/* game.css — окна и кнопки игры. Размеры в --u (1/390 ширины сцены), цвета из brand.json. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg-bottom, #222); overscroll-behavior: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(ellipse at 50% 30%, var(--bg-top, #333), var(--bg-bottom, #111));
  user-select: none; -webkit-user-select: none; touch-action: none;
}
#stage { position: absolute; top: 0; height: 100%; overflow: hidden; --u: 1px; box-shadow: 0 0 calc(var(--u) * 60) rgba(0,0,0,.35); }
#cv { display: block; touch-action: none; cursor: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui .panels { pointer-events: none; position: absolute; inset: 0; }
#ui .panels > * { pointer-events: auto; }

#boot { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg-top, #222); z-index: 10; }
#boot i { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(255,255,255,.25); border-top-color: var(--secondary, #fff); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
svg { display: block; }

/* верхние кнопки поверх HUD */
.topbar { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) + var(--u) * 10); height: 0; pointer-events: none; }
.ibtn { pointer-events: auto; position: absolute; top: 0; width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%;
  background: rgba(0,0,0,.32); color: #fff; display: flex; align-items: center; justify-content: center; }
.ibtn svg { width: 56%; height: 56%; fill: currentColor; }
.ibtn[data-a=pause] { left: calc(var(--u) * 6); }
.ibtn[data-a=sound] { right: calc(var(--u) * 6); }
.ibtn:active { transform: scale(.92); }

/* окна */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--u) * 14);
  background: rgba(0,0,0,.42); opacity: 0; }
.overlay.title-screen { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.18)); padding-bottom: calc(var(--u) * 150); }
.card { width: 100%; max-width: calc(var(--u) * 360); max-height: 100%; overflow-y: auto; background: var(--panel); color: var(--panel-text);
  border-radius: calc(var(--u) * 24); padding: calc(var(--u) * 18); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgba(0,0,0,.35);
  font-size: calc(var(--u) * 15); line-height: 1.3; text-align: center; scrollbar-width: none; }
.card::-webkit-scrollbar { display: none; }
.title-screen .card { background: transparent; box-shadow: none; color: var(--text); padding-top: calc(var(--u) * 10); }
.card h1 { margin: calc(var(--u) * 6) 0 calc(var(--u) * 4); font-size: calc(var(--u) * 38); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em;
  color: var(--text); text-shadow: var(--title-shadow); }
.card h2 { margin: 0; font-size: calc(var(--u) * 22); font-weight: 900; }
.tag { margin: 0 0 calc(var(--u) * 18); font-size: calc(var(--u) * 16); font-weight: 650; opacity: .95; }
.title-logo { width: calc(var(--u) * 132); height: calc(var(--u) * 132); margin: 0 auto; border-radius: 50%; background: #fff; padding: calc(var(--u) * 14);
  box-shadow: 0 0 0 calc(var(--u) * 6) var(--secondary), 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0,0,0,.35); }
.title-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.meta { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 14); display: flex; gap: calc(var(--u) * 4); align-items: center; justify-content: center; }
.coin { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; }
.prize-hint { display: flex; gap: calc(var(--u) * 8); align-items: center; text-align: left; margin: calc(var(--u) * 16) auto 0; max-width: calc(var(--u) * 320);
  background: var(--chip-bg, rgba(0,0,0,.3)); color: #fff; border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--u) * 14); }
.prize-hint svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); fill: var(--secondary); flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); min-height: calc(var(--u) * 48);
  padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 16); font-weight: 800; font-size: calc(var(--u) * 16);
  background: var(--secondary-soft); color: var(--panel-text); box-shadow: inset 0 calc(var(--u) * -3) 0 rgba(0,0,0,.12); }
.btn svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: currentColor; flex: none; }
.btn:active:not(:disabled) { transform: translateY(calc(var(--u) * 2)) scale(.98); box-shadow: none; }
.btn:disabled { opacity: .45; }
.btn.primary, .btn.play { background: var(--primary); color: var(--on-primary); }
.btn.big { min-height: calc(var(--u) * 64); font-size: calc(var(--u) * 24); padding: 0 calc(var(--u) * 40); border-radius: calc(var(--u) * 22); }
.btn.play { background: var(--secondary); color: var(--on-secondary); box-shadow: inset 0 calc(var(--u) * -5) 0 rgba(0,0,0,.18), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.35); }
.btn.play svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
.btn.gold { background: linear-gradient(#ffd76a, #ffb020); color: #3a2400; }
.btn.soft { background: var(--secondary-soft); }
.btn.small { min-height: calc(var(--u) * 36); font-size: calc(var(--u) * 14); padding: 0 calc(var(--u) * 14); border-radius: calc(var(--u) * 12); }
.btn.wide { width: 100%; margin-top: calc(var(--u) * 12); }
.btn .dot, .chip .dot { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #ff3b5c; display: inline-block; box-shadow: 0 0 0 2px #fff; }

.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); justify-content: center; margin-top: calc(var(--u) * 16); }
.chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 9) calc(var(--u) * 13); border-radius: 999px;
  background: var(--chip-bg, rgba(0,0,0,.32)); color: #fff; font-weight: 700; font-size: calc(var(--u) * 14); }
.pause .chip, .results .chip { background: var(--secondary-soft); color: var(--panel-text); }
.chip svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); fill: currentColor; }

/* итоги */
.res-head { font-weight: 800; font-size: calc(var(--u) * 17); opacity: .75; }
.res-score { font-size: calc(var(--u) * 58); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--primary); }
.res-best { font-size: calc(var(--u) * 14); opacity: .7; }
.ribbon { display: inline-block; background: #ff3b5c; color: #fff; font-weight: 900; padding: calc(var(--u) * 4) calc(var(--u) * 14); border-radius: 999px; font-size: calc(var(--u) * 14); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 6); margin: calc(var(--u) * 12) 0; }
.stats div { background: var(--secondary-soft); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 8) calc(var(--u) * 4); }
.stats b { display: block; font-size: calc(var(--u) * 20); font-weight: 900; }
.stats span { font-size: calc(var(--u) * 12); opacity: .75; }
.actions { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.actions .row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.actions .row .btn { padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 15); }
.promo { border: calc(var(--u) * 3) dashed var(--secondary); border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 12);
  background: linear-gradient(135deg, rgba(255,211,77,.18), rgba(255,255,255,0)); }
.promo-t { font-weight: 800; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6);
  font-size: calc(var(--u) * 12); text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.promo-t svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); fill: var(--secondary); }
.promo-p { font-weight: 800; font-size: calc(var(--u) * 17); line-height: 1.25; margin-top: calc(var(--u) * 4); text-wrap: balance; }
.code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: calc(var(--u) * 28); letter-spacing: .06em;
  margin: calc(var(--u) * 8) 0; color: var(--primary); user-select: text; -webkit-user-select: text; }
.code.sm { font-size: calc(var(--u) * 18); margin: calc(var(--u) * 4) 0; }
.code.wait { font-size: calc(var(--u) * 16); opacity: .6; }
.promo-note { font-size: calc(var(--u) * 12); opacity: .7; margin-top: calc(var(--u) * 6); }
.progress { margin-bottom: calc(var(--u) * 12); font-size: calc(var(--u) * 14); }
.bar { height: calc(var(--u) * 10); border-radius: 999px; background: rgba(0,0,0,.1); overflow: hidden; margin-top: calc(var(--u) * 6); }
.bar i { display: block; height: 100%; background: var(--secondary); border-radius: 999px; }
.next { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 13); opacity: .8; }
.next .bar { height: calc(var(--u) * 6); }
.next .bar i { background: var(--primary); }

/* улучшения */
.ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--u) * 10); }
.ph h2 { flex: 1; text-align: left; }
.bal { display: flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 18); background: var(--secondary-soft); border-radius: 999px; padding: calc(var(--u) * 4) calc(var(--u) * 12); }
.upg-list { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.upg { display: flex; align-items: center; gap: calc(var(--u) * 10); text-align: left; padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 16); background: rgba(0,0,0,.04); }
.upg-ic { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: calc(var(--u) * 14); background: var(--primary); color: var(--on-primary); flex: none; display: flex; align-items: center; justify-content: center; }
.upg-ic svg { width: 58%; height: 58%; fill: currentColor; }
.upg-tx { flex: 1; min-width: 0; }
.upg-tx b { display: block; font-size: calc(var(--u) * 15); }
.upg-tx span { display: block; font-size: calc(var(--u) * 12); opacity: .7; }
.pips { display: flex; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 4); }
.pips i { width: calc(var(--u) * 18); height: calc(var(--u) * 6); border-radius: 3px; background: rgba(0,0,0,.12); }
.pips i.on { background: var(--secondary); }
.btn.buy { min-height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 15); background: var(--primary); color: var(--on-primary); gap: calc(var(--u) * 4); flex: none; }
.maxed { font-weight: 800; font-size: calc(var(--u) * 13); opacity: .6; padding: 0 calc(var(--u) * 6); }

/* рекорды и призы */
.tabs { display: flex; background: rgba(0,0,0,.06); border-radius: 999px; padding: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 8); }
.tab { flex: 1; padding: calc(var(--u) * 8); border-radius: 999px; font-weight: 700; font-size: calc(var(--u) * 14); }
.tab.on { background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.lb { list-style: none; margin: 0; padding: 0; text-align: left; }
.lb li { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 12); }
.lb li:nth-child(odd) { background: rgba(0,0,0,.035); }
.lb li.me { background: var(--secondary-soft); font-weight: 800; }
.lb .rk { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: calc(var(--u) * 13); flex: none; }
.lb li:nth-child(1) .rk { background: #ffd34d; } .lb li:nth-child(2) .rk { background: #d9dde3; } .lb li:nth-child(3) .rk { background: #f0b27a; }
.lb .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb li.empty, .lb li.note { justify-content: center; opacity: .65; background: none; font-size: calc(var(--u) * 13); text-align: center; }
.prize { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 6) calc(var(--u) * 10); text-align: left; padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 14); background: rgba(0,0,0,.04); margin-bottom: calc(var(--u) * 8); }
.prize > div:first-child { flex: 1 1 60%; }
.prize b { display: block; } .prize span { font-size: calc(var(--u) * 12); opacity: .7; }
.prize.got { background: var(--secondary-soft); }
.prize .lock { font-size: calc(var(--u) * 12); opacity: .6; }
.muted { opacity: .7; font-size: calc(var(--u) * 13); margin: calc(var(--u) * 8) 0 0; text-wrap: balance; }
.toggles { display: flex; gap: calc(var(--u) * 8); justify-content: center; margin-top: calc(var(--u) * 14); }
.tog { padding: calc(var(--u) * 9) calc(var(--u) * 16); border-radius: 999px; background: rgba(0,0,0,.08); font-weight: 700; font-size: calc(var(--u) * 14); }
.tog::before { content: "○ "; } .tog.on { background: var(--primary); color: var(--on-primary); } .tog.on::before { content: "● "; }
.pause .btn.big { width: 100%; margin-top: calc(var(--u) * 4); }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 12); }
.day { border-radius: calc(var(--u) * 12); background: rgba(0,0,0,.05); padding: calc(var(--u) * 6) 0; font-size: calc(var(--u) * 12); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.day .coin { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.day.past { opacity: .45; }
.day.today { background: var(--secondary); color: var(--on-secondary); box-shadow: 0 0 0 calc(var(--u) * 3) var(--primary); font-weight: 800; }

.toast { position: absolute; left: 50%; bottom: calc(var(--u) * 110); transform: translateX(-50%); background: rgba(20,20,24,.9); color: #fff; padding: calc(var(--u) * 10) calc(var(--u) * 18);
  border-radius: 999px; font-weight: 700; font-size: calc(var(--u) * 15); display: none; white-space: nowrap; pointer-events: none; z-index: 5; }

/* демо-реклама */
.adov { position: absolute; inset: 0; z-index: 8; background: rgba(8,10,14,.92); display: flex; align-items: center; justify-content: center; opacity: 0; }
.adbox { width: calc(var(--u) * 320); border-radius: calc(var(--u) * 22); padding: calc(var(--u) * 24) calc(var(--u) * 18); text-align: center; color: #fff;
  background: repeating-linear-gradient(45deg, #2a2f3a 0 calc(var(--u) * 14), #232833 calc(var(--u) * 14) calc(var(--u) * 28)); border: 2px dashed rgba(255,255,255,.35); }
.adtag { display: inline-block; font-size: calc(var(--u) * 12); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #ffb020; color: #2a1a00; padding: 2px calc(var(--u) * 10); border-radius: 999px; }
.adt { font-size: calc(var(--u) * 26); font-weight: 900; margin: calc(var(--u) * 12) 0 calc(var(--u) * 6); }
.ads { font-size: calc(var(--u) * 14); opacity: .85; text-wrap: balance; }
.adp { font-size: calc(var(--u) * 12); opacity: .6; margin-top: calc(var(--u) * 12); text-wrap: balance; }
.adring { position: relative; width: calc(var(--u) * 64); height: calc(var(--u) * 64); margin: calc(var(--u) * 16) auto 0; }
.adring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.adring circle { fill: none; stroke-width: 4; }
.adring .bg { stroke: rgba(255,255,255,.2); } .adring .fg { stroke: #ffb020; stroke-linecap: round; }
.adring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 24); }