@font-face { font-family: Nunito; font-weight: 700; font-display: block; src: url(fonts/nunito-cyr-700.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Nunito; font-weight: 700; font-display: block; src: url(fonts/nunito-lat-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: Nunito; font-weight: 800; font-display: block; src: url(fonts/nunito-cyr-800.woff2) format("woff2"); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Nunito; font-weight: 800; font-display: block; src: url(fonts/nunito-lat-800.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body { font-family: Nunito, system-ui, sans-serif; font-weight: 700; color: #eaf2ff;
  background: #071431 url(img/bg-v.jpg) center / cover no-repeat; }
@media (min-aspect-ratio: 1/1) { body { background-image: url(img/bg-h.jpg); } }
svg { width: 100%; height: 100%; }
svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
button { font-family: inherit; }

#app { height: 100%; display: flex; flex-direction: column; }
#bar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; padding: 12px 12px 6px; gap: 10px; }
#lvl { font-size: 22px; font-weight: 800; letter-spacing: .2px; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.tools { display: flex; gap: 8px; }
.tile { width: 46px; height: 46px; padding: 11px; border: 1px solid rgba(140,180,255,.22); border-radius: 14px; color: #eaf2ff; cursor: pointer;
  background: linear-gradient(180deg, rgba(40,58,98,.92), rgba(18,28,56,.92));
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12); }
.tile:active { transform: translateY(1px); filter: brightness(1.2); }
.tile:disabled { opacity: .35; cursor: default; }

/* оверлеи */
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 10; background: rgba(4,10,28,.55); backdrop-filter: blur(3px); }
#start { background: #071431 url(img/bg-v.jpg) center / cover no-repeat; overflow-y: auto; touch-action: pan-y; align-items: flex-start; }
@media (min-aspect-ratio: 1/1) { #start { background-image: url(img/bg-h.jpg); } }
.overlay.show { display: flex; }
.menu { width: min(94vw, 460px); margin: auto; padding: 4vh 0 3vh; text-align: center; }
.menu h1 { line-height: .95; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }
.menu .t1 { display: block; font-size: clamp(46px, 12vw, 66px); font-weight: 800; color: #fff; }
.menu .t2 { display: block; font-size: clamp(36px, 9.5vw, 52px); font-weight: 800;
  background: linear-gradient(180deg, #ffd65c, #ff9a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.menu p { font-size: 16px; opacity: .85; margin-bottom: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
#grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 22px; padding: 14px; border-radius: 20px;
  background: rgba(10,20,46,.6); border: 1px solid rgba(140,180,255,.16); }
.lv { aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; position: relative; color: #fff; font-size: 18px; font-weight: 800;
  background: radial-gradient(circle at 40% 30%, #2b416f, #14213f 70%); box-shadow: inset 0 0 0 2px rgba(140,180,255,.28), 0 3px 8px rgba(0,0,0,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lv .st { display: flex; height: 10px; margin-top: 3px; color: #ffc93c; }
.lv .st svg { width: 10px; height: 10px; fill: currentColor; }
.lv.cur { background: radial-gradient(circle at 40% 30%, #ffc04a, #ff8a00 75%); color: #3a1a00; box-shadow: 0 0 14px rgba(255,150,30,.7), inset 0 2px 0 rgba(255,255,255,.4); }
.lv.lock { cursor: default; color: rgba(234,242,255,.45); }
.lv.lock svg { width: 13px; height: 13px; margin-top: 3px; fill: rgba(234,242,255,.45); color: rgba(234,242,255,.45); }

.card { position: relative; border-radius: 26px; padding: 30px 26px 26px; width: min(88vw, 360px); text-align: center;
  background: linear-gradient(180deg, rgba(34,52,96,.96), rgba(14,24,52,.96)); border: 1px solid rgba(140,180,255,.25);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 40px rgba(60,150,255,.25); }
.bigstar { width: 96px; height: 96px; margin: -78px auto 6px; display: block; fill: #ffc93c; filter: drop-shadow(0 0 16px rgba(255,190,40,.8)); animation: starIn .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } }
.card h2 { font-size: 32px; font-weight: 800; line-height: 1.05; margin-bottom: 6px;
  background: linear-gradient(180deg, #ffe07a, #ffa21f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card p { font-size: 16px; margin-bottom: 22px; opacity: .8; }
.spark i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: #ffc93c; opacity: .9; animation: fall 1.6s ease-out infinite; }
.spark i:nth-child(1) { left: 12%; top: 10%; background: #ff5a5f; }
.spark i:nth-child(2) { left: 84%; top: 14%; animation-delay: .2s; }
.spark i:nth-child(3) { left: 22%; top: 40%; background: #3ec1d3; animation-delay: .5s; }
.spark i:nth-child(4) { left: 76%; top: 46%; background: #a66cff; animation-delay: .1s; }
.spark i:nth-child(5) { left: 6%; top: 70%; animation-delay: .7s; }
.spark i:nth-child(6) { left: 92%; top: 72%; background: #8fe388; animation-delay: .35s; }
.spark i:nth-child(7) { left: 50%; top: -6%; background: #f78fb3; animation-delay: .6s; }
.spark i:nth-child(8) { left: 36%; top: 6%; background: #ff8c42; animation-delay: .9s; }
@keyframes fall { 0% { transform: translateY(-8px) rotate(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px) rotate(200deg); opacity: 0; } }
.big { border: 0; border-radius: 18px; padding: 15px 56px; font-size: 24px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ffb340 0%, #ff8a10 60%, #f26b00 100%); text-shadow: 0 2px 0 rgba(150,60,0,.5);
  box-shadow: 0 5px 0 #b84f00, 0 10px 22px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.45); }
.big:active { transform: translateY(3px); box-shadow: 0 2px 0 #b84f00, 0 5px 12px rgba(0,0,0,.4); }
.big:disabled { opacity: .6; }
#start { scrollbar-width: none; } #start::-webkit-scrollbar { display: none; }
.hero { width: min(70vw, 300px); aspect-ratio: 600 / 470; margin: 0 auto -18px; background: url(img/hero.jpg) center / cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
@media (max-height: 560px) { .hero { display: none; } }
#lvl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#moves { font-size: 13px; opacity: .75; }
.ttl { min-width: 0; }
#cv { flex: 1; width: 100%; min-height: 0; display: block; touch-action: none; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
#tip { min-height: 20px; text-align: center; font-size: 15px; padding: 0 16px; text-shadow: 0 1px 4px rgba(0,0,0,.7); color: #ffe7a8; }
#foot { display: flex; justify-content: center; gap: 10px; padding: 10px 10px 16px; }
.boost { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 78px; height: 66px; border: 0; border-radius: 18px; cursor: pointer;
  font-size: 12px; font-weight: 800; color: #3a1a00; background: linear-gradient(180deg, #ffe07a 0%, #ffbe2e 55%, #f59a00 100%);
  box-shadow: 0 5px 0 #c86d00, 0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.55); }
.boost svg { width: 28px; height: 28px; }
.boost#bRestart { background: linear-gradient(180deg, #7fb6ff, #3b78e8); color: #fff; box-shadow: 0 5px 0 #1d4fae, 0 8px 16px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35); }
.boost:active { transform: translateY(3px); box-shadow: 0 2px 0 #c86d00; }
.boost:disabled { filter: grayscale(.7) brightness(.75); cursor: default; }
.cnt { position: absolute; right: -7px; top: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; font-size: 13px; line-height: 24px; color: #fff;
  background: #ff3d6e; box-shadow: 0 2px 0 #a3123e; display: flex; align-items: center; justify-content: center; gap: 3px; }
.cnt.price { background: #fff3c4; color: #6a3a00; box-shadow: 0 2px 0 #c99a2e; }
.cnt.price .coin { width: 13px; height: 13px; }
.cnt.ad { background: #2fc46a; box-shadow: 0 2px 0 #157a3d; padding: 3px 5px; }
.cnt.ad svg { width: 16px; height: 16px; }

.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -.12em; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6b0 0 18%, #ffd23b 40%, #f0a000 100%); box-shadow: inset 0 -2px 0 rgba(160,90,0,.45), 0 1px 2px rgba(120,60,0,.3); }
.chip { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 14px; font-size: 18px; font-weight: 800; color: #fff; font-family: inherit;
  background: rgba(10,20,46,.7); border: 1px solid rgba(140,180,255,.25); }
.chip .coin { width: 22px; height: 22px; }
.chip svg { width: 22px; height: 22px; }
.st1 { fill: #ffc93c; }
.stats { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.skinsBtn { cursor: pointer; color: #ffe07a; }
.skinsBtn svg { color: #ff5fa2; }

.stars3 { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: -70px auto 8px; }
.stars3 svg { width: 70px; height: 70px; fill: #24345e; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); transition: fill .2s; }
.stars3 svg.mid { width: 92px; height: 92px; }
.stars3 svg.on { fill: #ffc93c; filter: drop-shadow(0 0 14px rgba(255,190,40,.9)); animation: starIn .45s cubic-bezier(.3,1.6,.5,1); }
#win .card { margin-top: 60px; overflow: visible; }
.card p { margin-bottom: 12px; }
.reward { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 30px; font-weight: 800; color: #ffe07a; margin-bottom: 12px; }
.reward .coin { width: 34px; height: 34px; }
#chest { margin: 0 auto 16px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.25); font-size: 14px; }
.chestTop { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; text-align: left; }
.chestTop .box { font-size: 24px; }
#chest.open .box { display: inline-block; animation: starIn .6s cubic-bezier(.3,1.6,.5,1); }
.barbg { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.barbg i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffd23b, #ff8a10); transition: width .6s; }
.adbtn { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; height: 46px; padding: 0 22px; border: 0; border-radius: 15px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #4fd88a, #1fa85a); box-shadow: 0 4px 0 #137a3f; }
.adbtn svg { width: 24px; height: 24px; }
.adbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 #137a3f; }
.vkrow { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.soc { border: 0; border-radius: 14px; padding: 10px 16px; font-family: inherit; font-size: 15px; font-weight: 800; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #5b9dff, #2f6fe0); box-shadow: 0 4px 0 #1d4fae; }
.link { display: block; margin: 12px auto 0; border: 0; background: none; color: #a9c4ff; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; text-decoration: underline; }
.promo { display: none; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 14px; text-align: left; font-family: inherit; font-size: 13px; line-height: 1.25;
  color: #eaf2ff; cursor: pointer; font-weight: 700; border-radius: 18px; }
.promo.show { display: flex; }
.promo b { font-size: 16px; color: #ffb3d1; }
.promo .pic { width: 52px; height: 52px; flex: none; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }

#skinList { display: grid; gap: 10px; margin: 12px 0 18px; }
.skin { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 10px; padding: 8px 12px; border-radius: 16px; cursor: pointer;
  font-family: inherit; color: #fff; text-align: left; background: rgba(0,0,0,.25); border: 2px solid transparent; }
.skin canvas { grid-row: span 2; width: 150px; height: 53px; }
.skin b { font-size: 17px; }
.skin span { font-size: 14px; color: #ffe07a; display: flex; align-items: center; gap: 4px; }
.skin.on { border-color: #ffc93c; background: rgba(255,200,60,.12); }
.skin.no { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ribbon { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 9px 26px; border-radius: 14px; font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #ff8fbd, #ff2f77); box-shadow: 0 5px 0 #b6134f, 0 10px 20px rgba(160,40,90,.35); }
#gift .card { padding-top: 40px; overflow: visible; }
.info { font-size: 15px; line-height: 1.3; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; margin-bottom: 12px; }
.days i { font-style: normal; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; font-size: 11px; background: rgba(140,180,255,.15); }
.days i b { font-size: 15px; }
.days i.got { opacity: .45; }
.days i.now { background: linear-gradient(180deg, #ffe08a, #ffbf3a); color: #4a2600; transform: scale(1.12); box-shadow: 0 3px 0 #d78500; }
.note { font-size: 12px; opacity: .75; margin-top: 10px; }
#skins .card { max-height: 94vh; overflow-y: auto; scrollbar-width: none; }
@media (max-width: 380px) { #lvl { font-size: 19px; } .tile { width: 42px; height: 42px; padding: 10px; } #bar { gap: 6px; } .chip { font-size: 16px; padding: 0 9px; } .boost { width: 70px; height: 60px; } #foot { gap: 8px; } .skin { grid-template-columns: 130px 1fr; } .skin canvas { width: 130px; height: 46px; } }
@media (max-height: 640px) { .boost { height: 54px; } .boost span { display: none; } #foot { padding-bottom: 8px; } }
.lv .st i { display: flex; opacity: .22; } .lv .st i.on { opacity: 1; }
#win { overflow-y: auto; }
@media (max-height: 700px) { .stars3 { margin-top: -50px; } .stars3 svg { width: 54px; height: 54px; } .stars3 svg.mid { width: 70px; height: 70px; }
  #win .card { padding: 20px 20px 16px; margin-top: 44px; } #win .card h2 { font-size: 26px; } .reward { font-size: 24px; margin-bottom: 6px; } .reward .coin { width: 26px; height: 26px; }
  #chest { margin-bottom: 10px; padding: 8px 10px; } .promo { margin-top: 10px; padding: 8px 12px; } .adbtn { margin-top: 8px; height: 42px; } .vkrow { margin-top: 8px; } }