/* =====================================================================
   UI system — яркий аркадный стиль
   ===================================================================== */

:root {
  /* — палитра — */
  --ink: #12122b;
  --panel-hi: rgba(255, 255, 255, .10);
  --panel-lo: rgba(0, 0, 0, .30);
  --line: rgba(255, 255, 255, .25);
  --line-soft: rgba(255, 255, 255, .14);

  --text: #ffffff;
  --text-dim: #c9d4f2;
  --text-mute: #8d9cc9;

  --green-1: #5ee878;
  --green-2: #2aa63c;
  --blue-1: #64b0ff;
  --blue-2: #2f6fd0;
  --orange-1: #ffc45c;
  --orange-2: #f07f13;
  --gold: #ffd04d;
  --score: #ffe95c;
  --danger: #ff5a4d;

  /* — геометрия — */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --ff: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* — плавный масштаб под все экраны — */
  --u: clamp(11px, 1.35vmin + 7px, 17px);
  --gap: calc(var(--u) * .8);
  --pad: calc(var(--u) * 1.15);
  --tap: 48px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--u);
  line-height: 1.35;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

#c {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

canvas, img, svg { -webkit-user-drag: none; }
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; display: block; }
.ic-coin { color: var(--gold); }
.ic-star { color: var(--score); }
.ic-trophy { color: var(--gold); }
.ic-flag { color: #ff6b81; }

#grain { display: none; }

#vignette,
#grain + #vignette { pointer-events: none; }

/* ============================ SCREENS ============================ */
.scr {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(calc(var(--u) * .9), env(safe-area-inset-top))
           max(calc(var(--u) * .9), env(safe-area-inset-right))
           max(calc(var(--u) * .9), env(safe-area-inset-bottom))
           max(calc(var(--u) * .9), env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 30%, rgba(28, 34, 84, .55) 0%, rgba(8, 11, 36, .8) 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: auto;
  animation: scr-in .25s ease both;
}
@keyframes scr-in { from { opacity: 0 } to { opacity: 1 } }

#scr-load {
  background: linear-gradient(160deg, #1b2a6b 0%, #3f57c4 45%, #f8a35c 100%);
  backdrop-filter: none;
  z-index: 60;
}

/* ============================= PANEL ============================= */
.panel {
  position: relative;
  width: min(100%, calc(var(--u) * 25));
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap);
  padding: calc(var(--pad) * 1.2);
  border-radius: calc(var(--r-lg) + 6px);
  border: 2px solid var(--line);
  background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  animation: panel-in .4s cubic-bezier(.2, .9, .3, 1.15) both;
}
.panel-wide { width: min(100%, calc(var(--u) * 34)); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(calc(var(--u) * 1.4)) scale(.95); }
  to { opacity: 1; transform: none; }
}

.panel-head {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding-bottom: calc(var(--gap) * .7);
  border-bottom: 2px solid var(--line-soft);
}
.panel-head h2 {
  font-size: 1.3em;
  font-weight: 800;
  flex: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}

.kicker {
  align-self: center;
  font-size: .74em;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.kicker-good { color: var(--green-1); }
.kicker-bad { color: var(--danger); }

.panel-title {
  align-self: center;
  text-align: center;
  font-size: 1.6em;
  font-weight: 800;
  margin-top: calc(var(--gap) * -.4);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
}
.panel-sub {
  align-self: center;
  text-align: center;
  font-size: .88em;
  color: var(--text-dim);
  max-width: 26ch;
  margin-top: calc(var(--gap) * -.4);
}

/* ============================ WORDMARK =========================== */
.wordmark {
  align-self: center;
  text-align: center;
  font-size: clamp(28px, 7vmin, 56px);
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.05;
  background: linear-gradient(180deg, #ffffff 15%, #ffe27a 55%, #ffb02e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(40, 20, 0, .35)) drop-shadow(0 10px 24px rgba(0, 0, 0, .4));
}
.wordmark em {
  display: block;
  font-style: normal;
  font-size: .55em;
  font-weight: 900;
  letter-spacing: .34em;
  margin-top: .12em;
}
.wordmark-sm { font-size: clamp(22px, 4.8vmin, 36px); }

/* ============================= BUTTONS =========================== */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--tap);
  padding: .7em 1.4em;
  border: none;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .25);
  box-shadow: 0 5px 0 rgba(0, 0, 0, .28), 0 12px 26px rgba(0, 0, 0, .35), inset 0 2px 2px rgba(255, 255, 255, .35);
  transition: transform .1s ease, filter .15s ease, box-shadow .1s ease, opacity .15s ease;
}
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold), 0 5px 0 rgba(0, 0, 0, .28); }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(3px) scale(.98); box-shadow: 0 2px 0 rgba(0, 0, 0, .28), inset 0 2px 2px rgba(255, 255, 255, .35); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-lg { min-height: calc(var(--tap) + var(--u) * .55); font-size: 1.12em; }
.btn .ic { width: 1.05em; height: 1.05em; }

.btn-primary { background: linear-gradient(180deg, var(--green-1) 0%, var(--green-2) 100%); }
.btn-ghost { background: linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 100%); }
.btn-bonus { background: linear-gradient(180deg, var(--orange-1) 0%, var(--orange-2) 100%); }

/* блик, пробегающий по главным кнопкам */
.btn-primary::before, .btn-bonus::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 55% { left: -80%; }
  75%, 100% { left: 140%; }
}

/* двухстрочная надпись на RV-кнопке: «Смотреть рекламу» + что именно дадут */
.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 1.16;
  text-align: left;
  min-width: 0;
}
.btn-stack b { font-weight: 800; }
.btn-stack small {
  font-size: .66em;
  font-weight: 700;
  opacity: .95;
  white-space: normal;
}

/* "AD" label on every rewarded-video button */
.vid-tag {
  flex: none;
  padding: .18em .42em;
  border-radius: 6px;
  background: rgba(0, 0, 0, .38);
  border: 1.5px solid rgba(255, 255, 255, .7);
  color: #fff;
  font-size: .62em;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.1;
  text-shadow: none;
}

/* награда в диалоге подтверждения рекламы */
.offer-prize {
  align-self: center;
  text-align: center;
  padding: .55em 1.1em;
  border-radius: var(--r-md);
  border: 2px solid rgba(255, 208, 77, .5);
  background: rgba(0, 0, 0, .3);
  color: var(--gold);
  font-weight: 800;
  font-size: 1.02em;
}

.btn-row { display: flex; gap: var(--gap); }
.btn-row > .btn { flex: 1; }
.btn-row-tight { justify-content: center; gap: calc(var(--gap) * .9); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: linear-gradient(180deg, rgba(48, 58, 128, .85), rgba(20, 26, 66, .85));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3), inset 0 1px 1px rgba(255, 255, 255, .3);
  transition: transform .1s ease, filter .15s ease;
}
.icon-btn:hover { filter: brightness(1.15); }
.icon-btn:active { transform: scale(.92); }
.icon-btn:focus { outline: none; }
.icon-btn:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold); }
.icon-btn-sm { width: calc(var(--tap) * .8); height: calc(var(--tap) * .8); }
.icon-btn-wide { width: auto; border-radius: var(--r-pill); padding: 0 .9em; font-weight: 800; font-size: .85em; letter-spacing: .05em; }

/* ============================== STATS ============================ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--r-lg);
  border: 2px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .28));
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12em;
  padding: calc(var(--pad) * .7) .3em;
}
.stat + .stat { border-left: 2px solid var(--line-soft); }
.stat b { font-size: 1.3em; font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.stat small { font-size: .62em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.stat .ic { width: 1.05em; height: 1.05em; margin-bottom: .12em; }

.result-row { display: flex; gap: var(--gap); justify-content: center; }
.result {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .06em;
  padding: calc(var(--pad) * .6) .4em;
  border-radius: var(--r-md);
  border: 2px solid var(--line-soft);
  background: rgba(0, 0, 0, .28);
}
.result small { font-size: .62em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.result b { font-size: 1.22em; font-weight: 800; }
.result-total { background: rgba(76, 217, 100, .18); border-color: rgba(76, 232, 92, .45); }
.result-total b { color: var(--green-1); }

.wallet {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .38em .9em;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 208, 77, .55);
  background: linear-gradient(180deg, rgba(90, 62, 6, .8), rgba(46, 30, 2, .8));
  color: var(--gold);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

/* =============================== HUD ============================= */
#hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: max(calc(var(--u) * .55), env(safe-area-inset-top))
           max(calc(var(--u) * .55), env(safe-area-inset-right))
           max(calc(var(--u) * .55), env(safe-area-inset-bottom))
           max(calc(var(--u) * .55), env(safe-area-inset-left));
}
.hud-bar { display: flex; align-items: center; gap: calc(var(--gap) * .55); }
.hud-spacer { flex: 1; }
#btn-pause { pointer-events: auto; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  height: calc(var(--tap) * .74);
  padding: 0 .95em;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 255, 255, .3);
  background: linear-gradient(180deg, rgba(40, 48, 110, .75), rgba(14, 18, 52, .75));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 800;
  font-size: .92em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.chip .ic { width: .95em; height: .95em; }
.chip-num { min-width: 4.2em; justify-content: flex-end; color: var(--score); }
.chip-num .ic-coin ~ *, .chip-num:has(.ic-coin) { color: var(--gold); }

/* босс */
#boss-hud {
  align-self: center;
  width: min(88%, calc(var(--u) * 26));
  margin-top: calc(var(--gap) * .9);
  display: flex;
  flex-direction: column;
  gap: .32em;
  animation: boss-in .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes boss-in { from { opacity: 0; transform: translateY(-14px) } to { opacity: 1; transform: none } }
.boss-head {
  display: flex;
  align-items: center;
  gap: .4em;
  font-size: .76em;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff8a7a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 0 14px rgba(255, 60, 40, .6);
}
.boss-head .ic { width: 1.15em; height: 1.15em; color: var(--danger); }
.boss-hp { margin-left: auto; color: #fff; font-variant-numeric: tabular-nums; }
.boss-track {
  position: relative;
  height: calc(var(--u) * .8);
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 120, 100, .7);
  background: rgba(20, 4, 4, .72);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 3px rgba(0, 0, 0, .8);
}
.boss-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #ff8a6b 0%, #f0341f 55%, #a2140a 100%);
  box-shadow: 0 0 14px rgba(255, 70, 40, .8);
  transition: width .3s cubic-bezier(.2, .9, .3, 1);
}
.boss-notches { position: absolute; inset: 0; display: flex; }
.boss-notches i { flex: 1; border-right: 2px solid rgba(0, 0, 0, .4); }
.boss-notches i:last-child { border-right: 0; }
.boss-tip {
  align-self: center;
  font-size: .7em;
  font-weight: 800;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

/* баннер уровня */
#lvl-intro {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1em;
  animation: lvl-intro 2.1s cubic-bezier(.2, .9, .3, 1) forwards;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .8);
}
#lvl-intro span {
  font-size: .74em;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
#lvl-intro strong { font-size: 2.2em; font-weight: 900; }
@keyframes lvl-intro {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(1.02); }
}

#hint {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .5em 1.2em;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 255, 255, .3);
  background: rgba(16, 20, 56, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .85em;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  animation: fade-in .4s both;
}
#hint .ic { color: var(--green-1); }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

#toasts {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
}
.toast {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .45em 1em;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 208, 77, .5);
  background: rgba(28, 20, 4, .88);
  color: var(--gold);
  font-weight: 800;
  font-size: .86em;
  animation: toast 1.5s ease forwards;
}
@keyframes toast {
  0% { opacity: 0; transform: translateY(10px) scale(.9) }
  14% { opacity: 1; transform: none }
  72% { opacity: 1 }
  100% { opacity: 0; transform: translateY(-18px) }
}

/* ============================= LOADING =========================== */
.load-wrap { display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) * 1.2); margin: auto; }
.load-orb {
  position: relative;
  width: clamp(62px, 14vmin, 110px);
  height: clamp(62px, 14vmin, 110px);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #4b4f66 0%, #23253a 55%, #0d0e1a 100%);
  border: 4px solid #e8e8f4;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 -8px 18px rgba(0, 0, 0, .5);
  display: grid;
  place-items: center;
  animation: orb 1.2s ease-in-out infinite;
}
.load-orb i {
  position: absolute;
  width: 44%;
  height: 12%;
  background: #35e83a;
  border-radius: 3px;
  box-shadow: 0 0 14px rgba(53, 232, 58, .8);
}
.load-orb i:nth-child(1) { transform: rotate(90deg) translateY(-26%) scaleX(.7); opacity: .45 }
.load-orb i:nth-child(2) { transform: rotate(90deg) }
.load-orb i:nth-child(3) { transform: rotate(90deg) translateY(26%) scaleX(.7); opacity: .45 }
@keyframes orb {
  0%, 100% { transform: translateY(0) scale(1, 1) }
  50% { transform: translateY(-14%) scale(.98, 1.02) }
}
.load-bar {
  width: min(64vw, 340px);
  height: clamp(10px, 2.2vmin, 16px);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, .35);
  border: 2px solid rgba(255, 255, 255, .35);
  overflow: hidden;
}
.load-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #35e83a, #b8ff3d);
  box-shadow: 0 0 12px rgba(120, 255, 80, .8);
  transition: width .25s ease;
}
.load-pct { font-size: .82em; font-weight: 800; letter-spacing: .18em; color: rgba(255, 255, 255, .85); }

/* ============================== SHOP ============================= */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--gap) * .7);
}
.skin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  padding: calc(var(--pad) * .55) .25em calc(var(--pad) * .5);
  border-radius: var(--r-md);
  border: 2px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .28));
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, filter .15s ease;
}
.skin:hover { transform: translateY(-2px); filter: brightness(1.12); }
.skin:active { transform: scale(.95); }
.skin:focus { outline: none; }
.skin:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--gold); }
.skin.is-sel {
  border-color: #4ce85c;
  background: linear-gradient(180deg, rgba(76, 232, 92, .18), rgba(0, 0, 0, .3));
  box-shadow: 0 0 16px rgba(76, 232, 92, .45), inset 0 0 12px rgba(76, 232, 92, .15);
}
.skin.is-locked .skin-orb { filter: saturate(.3) brightness(.6); }
.skin.deny { animation: deny .35s ease; }
@keyframes deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}
.skin-orb {
  width: 100%;
  aspect-ratio: 1;
  max-width: calc(var(--u) * 3.7);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, .5),
    inset 5px 6px 10px rgba(255, 255, 255, .25),
    0 6px 12px rgba(0, 0, 0, .4);
  transition: transform .18s ease;
}
.skin:hover .skin-orb { transform: rotate(-8deg) scale(1.06); }
.skin-name {
  font-size: .7em;
  font-weight: 800;
  color: var(--text-dim);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skin.is-sel .skin-name { color: #fff; }
.skin-tag {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .16em .6em;
  border-radius: var(--r-pill);
  font-size: .64em;
  font-weight: 800;
  white-space: nowrap;
}
.skin-tag .ic { width: .9em; height: .9em; }
.tag-price { background: rgba(0, 0, 0, .35); color: var(--gold); }
.tag-vid { background: rgba(240, 127, 19, .4); color: var(--orange-1); }
.tag-own { background: rgba(47, 111, 208, .4); color: #b8d8ff; }
.tag-sel { background: rgba(42, 166, 60, .4); color: #8dff9e; }
.skin-rarity {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  pointer-events: none;
  box-shadow: inset 0 2.5px 0 var(--rar, transparent);
  opacity: .8;
}

/* =========================== LEADERBOARD ========================= */
.lb-list {
  display: flex;
  flex-direction: column;
  gap: .3em;
  max-height: min(46vh, calc(var(--u) * 22));
  overflow-y: auto;
  scrollbar-width: thin;
}
.lb-row {
  display: flex;
  align-items: center;
  gap: .65em;
  padding: .48em .75em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .08);
  font-size: .9em;
}
.lb-row.is-me { background: rgba(76, 217, 100, .28); border-color: rgba(76, 217, 100, .6); }
.lb-rank { width: 2em; font-weight: 800; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.lb-row:nth-child(1) .lb-rank { color: var(--gold); }
.lb-row:nth-child(2) .lb-rank { color: #cfd8ee; }
.lb-row:nth-child(3) .lb-rank { color: #e0a06a; }
.lb-ava { width: 1.9em; height: 1.9em; border-radius: 50%; background: #2c3160; object-fit: cover; flex: none; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lb-score { font-weight: 800; color: var(--score); font-variant-numeric: tabular-nums; }
.lb-empty { padding: 1.6em .8em; text-align: center; color: var(--text-dim); font-size: .9em; }

/* ============================ CONFETTI =========================== */
#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.conf {
  position: absolute;
  top: -8vh;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  animation: conf linear forwards;
}
@keyframes conf { to { transform: translateY(118vh) rotate(740deg); opacity: .6 } }

/* =========================== PLATFORMS =========================== */
body.platform-playables .feat-mute,
body.platform-playables .feat-lang,
body.platform-playables .feat-leaderboard { display: none !important; }
body.no-vid .feat-vid { display: none !important; }

/* ========================== RESPONSIVE =========================== */
@media (max-height: 560px) {
  :root { --u: clamp(10px, 1.1vmin + 6.5px, 14px); --tap: 42px; }
  .panel { padding: calc(var(--pad) * .9); gap: calc(var(--gap) * .8); }
  .wordmark-sm { font-size: clamp(18px, 3.6vmin, 28px); }
  .panel-sub { display: none; }
  .stat { padding: calc(var(--pad) * .45) .3em; }
  .lb-list { max-height: 40vh; }
}
@media (min-aspect-ratio: 16/9) and (max-height: 520px) {
  .panel-menu {
    width: min(100%, calc(var(--u) * 40));
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas:
      "brand  play"
      "stats  acts"
      "stats  tools";
    align-items: center;
    column-gap: calc(var(--gap) * 1.3);
  }
  .panel-menu .wordmark-sm { grid-area: brand; margin: 0; }
  .panel-menu .stat-row { grid-area: stats; grid-template-columns: 1fr; }
  .panel-menu .stat + .stat { border-left: 0; border-top: 2px solid var(--line-soft); }
  .panel-menu #btn-play { grid-area: play; }
  .panel-menu .btn-row:not(.btn-row-tight) { grid-area: acts; }
  .panel-menu .btn-row-tight { grid-area: tools; }
}
@media (max-width: 380px) {
  .skin-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-num { min-width: 3.4em; }
}
@media (max-width: 300px) {
  .btn-row { flex-direction: column; }
  .result-row { flex-wrap: wrap; }
}

/* ---- системная пауза платформы: кнопки скрыты, выход только по onResume ---- */
#scr-pause.sys .btn,
#scr-pause.sys .panel-sub { display: none !important; }

/* ---- предупреждение за 2 секунды до межстраничной рекламы ---- */
#break-warn {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 11, 36, .85);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.break-warn-box {
  display: flex; align-items: center; gap: .55em;
  padding: .85em 1.6em;
  border-radius: var(--r-pill);
  border: 2px solid rgba(255, 208, 77, .55);
  background: linear-gradient(180deg, rgba(60, 40, 8, .95), rgba(28, 20, 4, .95));
  color: var(--gold);
  font-weight: 800; font-size: 1.1em;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.break-warn-box b { font-size: 1.5em; font-variant-numeric: tabular-nums; }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}