/* =====================================================================
   Idol Rush — UI затерянного храма: резной камень, золото, факелы
   ===================================================================== */

:root {
  /* — палитра — */
  --stone-1: #3a3026;
  --stone-2: #2a221a;
  --stone-3: #1a1510;
  --sand-1: #d9c49a;
  --sand-2: #b8a077;

  --gold-1: #ffd88a;
  --gold-2: #e8b43c;
  --gold-3: #8a5f14;

  --jade-1: #7fe0b0;
  --jade-2: #2f9e6e;
  --jade-3: #14543c;

  --torch-1: #ffc45c;
  --torch-2: #e0761a;
  --torch-3: #7a3208;

  --blood: #d9452f;
  --text: #f4e6c8;
  --text-dim: #c4ac84;
  --text-mute: #8d7a5c;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --ff: "Trebuchet MS", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  --u: clamp(11px, 1.35vmin + 7px, 17px);
  --gap: calc(var(--u) * .78);
  --pad: calc(var(--u) * 1.1);
  --tap: 48px;

  /* резной край: тёмная фаска снизу + светлая сверху */
  --carve: inset 0 2px 0 rgba(255, 232, 190, .18), inset 0 -3px 0 rgba(0, 0, 0, .5);
}

* {
  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(--stone-3);
  color: var(--text);
  font-family: var(--ff);
  font-size: var(--u);
  line-height: 1.34;
  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-2); }
.ic-star { color: var(--jade-1); }
.ic-trophy { color: var(--gold-2); }
.ic-flag { color: var(--torch-1); }
.ic-hp { color: var(--jade-1); }

/* вспышка при получении урона */
#flash {
  position: absolute; inset: 0; z-index: 15; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(180, 30, 20, .55) 100%);
  opacity: 0; transition: opacity .22s ease;
}
body.hurt #flash { opacity: 1; transition-duration: .05s; }

/* ============================ 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% 22%, rgba(90, 62, 26, .5) 0%, transparent 62%),
    rgba(14, 10, 6, .82);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  overflow: auto;
  animation: scr-in .25s ease both;
}
@keyframes scr-in { from { opacity: 0 } to { opacity: 1 } }

#scr-load {
  background: linear-gradient(168deg, #241a0e 0%, #4a3418 42%, #7a4a1a 72%, #b5761f 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.25);
  border-radius: var(--r-lg);
  border: 2px solid var(--gold-3);
  background:
    linear-gradient(180deg, rgba(255, 226, 170, .10) 0%, transparent 30%),
    linear-gradient(180deg, var(--stone-1) 0%, var(--stone-2) 60%, var(--stone-3) 100%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .6),
    var(--carve),
    0 0 0 1px rgba(0, 0, 0, .6);
  animation: panel-in .38s cubic-bezier(.2, .9, .3, 1.12) both;
}
/* золотые «гвозди» по углам плиты */
.panel::before, .panel::after {
  content: '';
  position: absolute; top: 8px; width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-3));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.panel::before { left: 8px; }
.panel::after { right: 8px; }
.panel-wide { width: min(100%, calc(var(--u) * 34)); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(calc(var(--u) * 1.2)) scale(.96); }
  to { opacity: 1; transform: none; }
}
.panel.deny { animation: deny .35s ease; }

.panel-head {
  display: flex; align-items: center; gap: var(--gap);
  padding-bottom: calc(var(--gap) * .7);
  border-bottom: 2px solid rgba(138, 95, 20, .55);
}
.panel-head h2 {
  font-size: 1.24em; font-weight: 800; flex: 1;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-1);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}

.kicker {
  align-self: center;
  font-size: .72em; font-weight: 800;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-mute);
}
.kicker-good { color: var(--jade-1); }
.kicker-bad { color: var(--blood); }

.panel-title {
  align-self: center; text-align: center;
  font-size: 1.5em; font-weight: 800;
  letter-spacing: .02em;
  margin-top: calc(var(--gap) * -.4);
  color: var(--sand-1);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .5);
}
.panel-sub {
  align-self: center; text-align: center;
  font-size: .84em; color: var(--text-dim);
  max-width: 30ch;
  margin-top: calc(var(--gap) * -.35);
}

/* ============================ WORDMARK =========================== */
.wordmark {
  align-self: center; text-align: center;
  font-size: clamp(20px, 5vmin, 40px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 100%;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff6dc 12%, var(--gold-1) 42%, var(--gold-2) 68%, #a06e14 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 rgba(40, 20, 0, .6)) drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}
.wordmark em {
  display: block; font-style: normal;
  font-size: .32em; font-weight: 700;
  letter-spacing: .3em;
  margin-top: .5em;
  background: none; color: var(--text-mute);
  -webkit-text-fill-color: var(--text-mute);
}
.wordmark-sm { font-size: clamp(16px, 3.6vmin, 27px); }

/* ============================= BUTTONS =========================== */
/* каменная кнопка с золотой окантовкой */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55em;
  min-height: var(--tap);
  padding: .68em 1.15em;
  border: 2px solid rgba(0, 0, 0, .45);
  border-radius: var(--r-md);
  font: inherit; font-weight: 800;
  letter-spacing: .02em;
  color: var(--text);
  cursor: pointer;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .55);
  box-shadow: var(--carve), 0 5px 0 rgba(0, 0, 0, .45), 0 10px 20px rgba(0, 0, 0, .4);
  transition: transform .1s ease, filter .15s ease, box-shadow .1s ease, opacity .15s;
}
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px var(--stone-3), 0 0 0 5px var(--gold-2), var(--carve); }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(3px); box-shadow: var(--carve), 0 2px 0 rgba(0, 0, 0, .45); }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-lg { min-height: calc(var(--tap) + var(--u) * .5); font-size: 1.06em; }
.btn .ic { width: 1.1em; height: 1.1em; }

.btn-primary {
  background: linear-gradient(180deg, var(--jade-1) 0%, var(--jade-2) 48%, var(--jade-3) 100%);
  border-color: rgba(10, 50, 34, .8);
  color: #06251a;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .35);
}
.btn-reward {
  background: linear-gradient(180deg, var(--torch-1) 0%, var(--torch-2) 52%, var(--torch-3) 100%);
  border-color: rgba(70, 28, 4, .8);
  color: #2a1200;
  text-shadow: 0 1px 1px rgba(255, 240, 200, .35);
}
.btn-ghost {
  background: linear-gradient(180deg, #5c4c38 0%, #3a2f22 55%, #241c14 100%);
  border-color: rgba(0, 0, 0, .5);
  color: var(--sand-1);
}

/* золотая искра, пробегающая по главным кнопкам */
.btn-primary::after, .btn-reward::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .38) 48%, transparent 60%);
  background-size: 260% 100%;
  background-position: 130% 0;
  animation: sheen 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 62% { background-position: 130% 0; }
  86%, 100% { background-position: -60% 0; }
}

.btn-stack {
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  line-height: 1.14; text-align: left; min-width: 0;
}
.btn-stack b { font-weight: 800; }
.btn-stack small { font-size: .64em; font-weight: 700; opacity: .92; white-space: normal; }

.btn-row { display: flex; gap: var(--gap); }
.btn-row > .btn { flex: 1; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .35em;
  width: var(--tap); height: var(--tap); flex: none;
  border-radius: var(--r-md);
  border: 2px solid rgba(0, 0, 0, .5);
  background: linear-gradient(180deg, #5c4c38 0%, #322820 100%);
  color: var(--sand-1);
  cursor: pointer;
  box-shadow: var(--carve), 0 4px 0 rgba(0, 0, 0, .4);
  transition: transform .1s ease, filter .15s;
}
.icon-btn:hover { filter: brightness(1.15); }
.icon-btn:active { transform: translateY(2px); box-shadow: var(--carve), 0 1px 0 rgba(0, 0, 0, .4); }
.icon-btn:focus { outline: none; }
.icon-btn:focus-visible { box-shadow: 0 0 0 3px var(--stone-3), 0 0 0 5px var(--gold-2); }
.icon-btn-sm { width: calc(var(--tap) * .78); height: calc(var(--tap) * .78); }
.icon-btn-wide { width: auto; padding: 0 .8em; font-weight: 800; font-size: .82em; letter-spacing: .06em; }

/* ============================== STATS ============================ */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-radius: var(--r-md);
  border: 2px solid rgba(138, 95, 20, .5);
  background: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, .5));
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: .1em;
  padding: calc(var(--pad) * .66) .3em;
}
.stat + .stat { border-left: 2px solid rgba(138, 95, 20, .35); }
.stat b { font-size: 1.2em; font-weight: 800; color: var(--sand-1); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.stat small { font-size: .6em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.stat .ic { width: 1em; height: 1em; margin-bottom: .1em; }

/* полоска прочности в меню */
.hp-strip {
  display: flex; align-items: center; gap: .5em;
  padding: .45em .8em;
  border-radius: var(--r-md);
  border: 2px solid rgba(47, 158, 110, .4);
  background: rgba(20, 84, 60, .25);
  font-size: .76em; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.pips { display: flex; gap: .25em; margin-left: auto; }
.pip { width: 1.15em; height: 1.15em; color: rgba(255, 255, 255, .14); }
.pip.on { color: var(--jade-1); filter: drop-shadow(0 0 5px rgba(127, 224, 176, .55)); }

.result-row { display: flex; gap: var(--gap); justify-content: center; }
.result {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: .05em;
  padding: calc(var(--pad) * .58) .4em;
  border-radius: var(--r-sm);
  border: 2px solid rgba(0, 0, 0, .45);
  background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}
.result small { font-size: .6em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.result b { font-size: 1.16em; font-weight: 800; color: var(--sand-1); }
.result-total { background: rgba(47, 158, 110, .2); border-color: rgba(127, 224, 176, .45); }
.result-total b { color: var(--jade-1); }

.wallet {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .34em .8em;
  border-radius: var(--r-sm);
  border: 2px solid rgba(232, 180, 60, .5);
  background: rgba(60, 40, 8, .6);
  color: var(--gold-1);
  font-weight: 800;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}

/* ---------------------- панель прочности ---------------------- */
.hp-compare {
  display: flex; align-items: center; justify-content: center;
  gap: var(--gap);
  padding: calc(var(--pad) * .7);
  border-radius: var(--r-md);
  border: 2px solid rgba(0, 0, 0, .45);
  background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55);
}
.hp-col { display: flex; flex-direction: column; align-items: center; gap: .3em; flex: 1; }
.hp-col small { font-size: .6em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.hp-col b { font-size: 1.2em; color: var(--sand-1); }
.hp-col .pips { margin: 0; flex-wrap: wrap; justify-content: center; }
.hp-col-next b { color: var(--jade-1); }
.hp-arrow { width: 1.6em; height: 1.6em; color: var(--gold-2); flex: none; }
.maxed {
  align-self: center;
  padding: .5em 1.4em;
  border-radius: var(--r-md);
  border: 2px solid rgba(232, 180, 60, .5);
  background: rgba(60, 40, 8, .5);
  color: var(--gold-1);
  font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}

/* =============================== 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) * .5); flex-wrap: wrap; }
.hud-spacer { flex: 1; }
#btn-pause { pointer-events: auto; }

.chip {
  display: inline-flex; align-items: center; gap: .38em;
  height: calc(var(--tap) * .72);
  padding: 0 .8em;
  border-radius: var(--r-sm);
  border: 2px solid rgba(138, 95, 20, .55);
  background: linear-gradient(180deg, rgba(58, 46, 32, .88), rgba(26, 20, 14, .88));
  font-weight: 800; font-size: .9em;
  color: var(--sand-1);
  box-shadow: var(--carve), 0 3px 8px rgba(0, 0, 0, .45);
}
.chip .ic { width: .95em; height: .95em; }
.chip-num { min-width: 4em; justify-content: flex-end; }

/* сердца прочности */
.hearts {
  display: flex; align-items: center; gap: .18em;
  padding: 0 .5em;
  height: calc(var(--tap) * .72);
}
.heart {
  width: 1.5em; height: 1.5em;
  color: var(--jade-1);
  filter: drop-shadow(0 0 6px rgba(127, 224, 176, .5)) drop-shadow(0 2px 2px rgba(0, 0, 0, .6));
  transition: color .18s ease, transform .18s ease, filter .18s;
}
.heart.lost {
  color: rgba(120, 100, 80, .45);
  filter: none;
  transform: scale(.82);
}
.hearts.shake { animation: deny .34s ease; }
@keyframes deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

/* страж */
#boss-hud {
  align-self: center;
  width: min(88%, calc(var(--u) * 26));
  margin-top: calc(var(--gap) * .9);
  display: flex; flex-direction: column; gap: .3em;
  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: .72em; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--torch-1);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .7);
}
.boss-head .ic { width: 1.15em; height: 1.15em; color: var(--blood); }
.boss-hp { margin-left: auto; color: var(--sand-1); font-variant-numeric: tabular-nums; }
.boss-track {
  position: relative;
  height: calc(var(--u) * .72);
  border-radius: var(--r-sm);
  border: 2px solid rgba(138, 95, 20, .7);
  background: rgba(20, 8, 4, .8);
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .8);
}
.boss-fill {
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #ff9a5c 0%, var(--blood) 55%, #6e1a0c 100%);
  box-shadow: 0 0 12px rgba(217, 69, 47, .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, .55); }
.boss-notches i:last-child { border-right: 0; }
.boss-tip {
  align-self: center;
  font-size: .68em; font-weight: 700;
  letter-spacing: .04em;
  color: var(--sand-1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .9);
  animation: pulse 1.7s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }

#banner {
  position: absolute; left: 50%; top: 34%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .1em;
  animation: banner 2.2s cubic-bezier(.2, .9, .3, 1) forwards;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 8px 26px rgba(0, 0, 0, .9);
}
#banner span {
  font-size: .72em; font-weight: 800;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--torch-1);
}
#banner strong {
  font-size: 2em; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--sand-1);
}
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  78% { 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: .48em 1.1em;
  border-radius: var(--r-sm);
  border: 2px solid rgba(138, 95, 20, .5);
  background: rgba(26, 20, 14, .85);
  font-size: .82em; font-weight: 700;
  color: var(--text-dim);
  white-space: nowrap;
  animation: fade-in .4s both;
}
#hint .ic { color: var(--gold-2); }
@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

#toasts {
  position: absolute; left: 50%; top: 21%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35em;
}
.toast {
  display: flex; align-items: center; gap: .4em;
  padding: .42em .95em;
  border-radius: var(--r-sm);
  border: 2px solid rgba(232, 180, 60, .5);
  background: rgba(44, 28, 8, .92);
  color: var(--gold-1);
  font-weight: 800; font-size: .84em;
  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, 108px); height: clamp(62px, 14vmin, 108px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #b8a684 0%, #6b5c44 52%, #2a231a 100%);
  border: 3px solid var(--gold-3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .7), inset 0 -10px 20px rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  animation: orb 1.15s cubic-bezier(.45, 0, .55, 1) infinite;
}
.load-orb i {
  position: absolute;
  border: 3px solid var(--gold-1);
  box-shadow: 0 0 10px rgba(255, 216, 138, .7);
}
.load-orb i:nth-child(1) { width: 42%; height: 42%; transform: rotate(45deg); }
.load-orb i:nth-child(2) { width: 20%; height: 20%; border-radius: 50%; }
@keyframes orb {
  0%, 100% { transform: translateY(0) scale(1, 1) }
  50% { transform: translateY(-13%) scale(.98, 1.02) }
}
.load-bar {
  width: min(64vw, 320px);
  height: clamp(9px, 2vmin, 14px);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, .55);
  border: 2px solid var(--gold-3);
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7);
}
.load-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--torch-2), var(--gold-1));
  box-shadow: 0 0 12px rgba(255, 196, 92, .8);
  transition: width .25s ease;
}
.load-pct { font-size: .78em; font-weight: 800; letter-spacing: .18em; color: var(--text-dim); }

/* ============================== 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-sm);
  border: 2px solid rgba(0, 0, 0, .45);
  background: linear-gradient(180deg, rgba(92, 76, 56, .55), rgba(26, 20, 14, .7));
  font: inherit; color: inherit; cursor: pointer;
  box-shadow: var(--carve);
  transition: transform .12s ease, border-color .15s, filter .15s;
}
.skin:hover { transform: translateY(-2px); filter: brightness(1.12); border-color: rgba(232, 180, 60, .5); }
.skin:active { transform: translateY(1px); }
.skin:focus { outline: none; }
.skin:focus-visible { box-shadow: 0 0 0 3px var(--stone-3), 0 0 0 5px var(--gold-2); }
.skin.is-sel {
  border-color: var(--jade-1);
  background: linear-gradient(180deg, rgba(47, 158, 110, .3), rgba(20, 84, 60, .3));
  box-shadow: 0 0 14px rgba(127, 224, 176, .4), var(--carve);
}
.skin.is-locked .skin-orb { filter: saturate(.25) brightness(.55); }
.skin.deny { animation: deny .35s ease; }
.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, .6),
    inset 5px 6px 10px rgba(255, 240, 200, .22),
    0 5px 10px rgba(0, 0, 0, .5);
  transition: transform .18s ease;
}
.skin:hover .skin-orb { transform: rotate(-8deg) scale(1.06); }
.skin-name {
  font-size: .68em; font-weight: 800;
  color: var(--text-dim);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.skin.is-sel .skin-name { color: var(--sand-1); }
.skin-tag {
  display: inline-flex; align-items: center; gap: .22em;
  padding: .14em .55em;
  border-radius: var(--r-sm);
  font-size: .62em; font-weight: 800; white-space: nowrap;
}
.skin-tag .ic { width: .9em; height: .9em; }
.tag-price { background: rgba(0, 0, 0, .5); color: var(--gold-1); }
.tag-ad { background: rgba(224, 118, 26, .45); color: #ffe0b0; }
.tag-own { background: rgba(120, 100, 70, .5); color: var(--text-dim); }
.tag-sel { background: rgba(47, 158, 110, .5); color: #d8ffe8; }
.skin-rarity {
  position: absolute; inset: 0;
  border-radius: var(--r-sm);
  pointer-events: none;
  box-shadow: inset 0 2.5px 0 var(--rar, transparent);
  opacity: .85;
}

/* =========================== LEADERBOARD ========================= */
.lb-list {
  display: flex; flex-direction: column; gap: .28em;
  max-height: min(46vh, calc(var(--u) * 22));
  overflow-y: auto; scrollbar-width: thin;
}
.lb-row {
  display: flex; align-items: center; gap: .65em;
  padding: .44em .7em;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  background: rgba(0, 0, 0, .3);
  font-size: .88em;
}
.lb-row.is-me { background: rgba(47, 158, 110, .28); border-color: rgba(127, 224, 176, .5); }
.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-1); }
.lb-row:nth-child(2) .lb-rank { color: #d8d0c0; }
.lb-row:nth-child(3) .lb-rank { color: #d09a6a; }
.lb-ava { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--stone-1); 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(--gold-1); font-variant-numeric: tabular-nums; }
.lb-empty { padding: 1.5em .8em; text-align: center; color: var(--text-mute); font-size: .88em; }

.ad-reward {
  align-self: center; text-align: center;
  padding: .55em 1.1em;
  border-radius: var(--r-md);
  border: 2px solid rgba(232, 180, 60, .55);
  background: rgba(44, 28, 8, .7);
  color: var(--gold-1);
  font-weight: 800; font-size: 1.02em;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}

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

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

/* ========================== RESPONSIVE =========================== */
@media (max-height: 620px) {
  :root { --u: clamp(10px, 1.1vmin + 6.5px, 14px); --tap: 42px; }
  .panel { padding: calc(var(--pad) * .85); gap: calc(var(--gap) * .75); }
  .wordmark-sm { font-size: clamp(14px, 2.9vmin, 21px); }
  .wordmark em { font-size: .28em; margin-top: .3em; }
  .panel-sub { display: none; }
  .stat { padding: calc(var(--pad) * .42) .3em; }
  .lb-list { max-height: 40vh; }
  .heart { width: 1.25em; height: 1.25em; }
}
@media (min-aspect-ratio: 16/9) and (max-height: 520px) {
  .panel-menu {
    width: min(100%, calc(var(--u) * 42));
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    grid-template-areas:
      "brand play"
      "stats acts"
      "hp    tools";
    align-items: center;
    column-gap: calc(var(--gap) * 1.2);
  }
  .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 rgba(138, 95, 20, .35); }
  .panel-menu .hp-strip { grid-area: hp; }
  .panel-menu #btn-play { grid-area: play; }
  .panel-menu .btn-row:nth-of-type(1) { grid-area: acts; }
  .panel-menu .btn-row:nth-of-type(2) { grid-area: tools; }
}
@media (max-width: 380px) {
  .skin-grid { grid-template-columns: repeat(3, 1fr); }
  .chip-num { min-width: 3.3em; }
  .heart { width: 1.2em; height: 1.2em; }
}
@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 секунды до межстраничной рекламы ---- */
#ad-warn {
  position: absolute; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 7, 4, .86);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.ad-warn-box {
  display: flex; align-items: center; gap: .55em;
  padding: .85em 1.6em;
  border-radius: var(--r-md);
  border: 2px solid rgba(232, 180, 60, .55);
  background: linear-gradient(180deg, rgba(60, 40, 10, .95), rgba(30, 20, 8, .95));
  color: var(--gold-1);
  font-weight: 800; font-size: 1.1em;
  box-shadow: var(--carve), 0 10px 26px rgba(0, 0, 0, .55);
}
.ad-warn-box b { font-size: 1.5em; font-variant-numeric: tabular-nums; }

/* ---- пояснение, зачем нужен вход (всегда видно рядом с кнопкой) ---- */
.auth-note {
  display: flex; flex-direction: column; gap: .35em;
  padding: calc(var(--pad) * .8) calc(var(--pad) * .9);
  border-radius: var(--r-md);
  border: 2px solid rgba(232, 180, 60, .4);
  background: rgba(60, 40, 10, .5);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
}
.auth-note-head {
  display: flex; align-items: center; gap: .4em;
  font-size: .8em; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-1);
}
.auth-note-head .ic { width: 1.1em; height: 1.1em; }
.auth-note p { font-size: .82em; line-height: 1.4; color: var(--text-dim); }

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