:root {
  --night: #0B0715;
  --panel: #1A1330;
  --panel-2: #241A42;
  --line: #2F2452;
  --violet: #7C3AED;
  --glow: #A855F7;
  --gold: #FACC15;
  --plus: #22C55E;
  --text: #EDE9FE;
  --muted: #9C92BF;
  --danger: #F43F5E;

  /* неон фона */
  --n-violet: #8B3DFF;
  --n-blue: #5145FF;
  --n-magenta: #D946EF;
  --n-cyan: #00E5FF;
  --card-edge: rgba(139, 61, 255, .16);
  --card-shadow: 0 14px 34px -20px rgba(139, 61, 255, .55);

  --r-common: #8A84A3;
  --r-uncommon: #3B82F6;
  --r-rare: #A855F7;
  --r-epic: #EC4899;
  --r-legendary: #FACC15;

  --display: 'Unbounded', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: 16px;
  --tabs-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--night); overflow-x: hidden; }
body {
  background: var(--night);
  color: var(--text);
  font: 500 15px/1.45 var(--body);
  min-height: 100vh;
  padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 16px);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.num { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
#view { position: relative; z-index: 1; outline: none; padding: 0 var(--pad); max-width: 560px; margin: 0 auto; }

.star {
  width: 16px; height: 16px; flex: none;
  background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---------- headings ---------- */
h1, h2 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 24px; line-height: 1.15; }
h2 { font-size: 17px; line-height: 1.25; margin: 28px 0 12px; }

/* ---------- free case strip ---------- */
.free {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 20px; padding: 14px;
  background: var(--panel); border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--plus) 35%, transparent);
}
.free-text { flex: 1; min-width: 0; }
.free-text b { display: block; font-weight: 700; }
.free-text small { color: var(--muted); font-size: 13px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: 14px;
  background: var(--violet); font-weight: 700; white-space: nowrap;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: scale(.97); }
.btn[disabled] { background: var(--panel-2); color: var(--muted); cursor: default; }
.btn.green { background: var(--plus); color: #06210F; }
.btn.ghost { background: var(--panel-2); }
.btn.block { width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 54px; padding: 8px 16px; font-size: 16px; border-radius: 16px;
  white-space: normal; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.btn.block .star { flex: none; }

/* ---------- case grid ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.case-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 18px 10px 14px; border-radius: 18px;
  background: var(--panel); text-align: center; overflow: hidden;
}
/* мягкое свечение за капсулой: градиент вместо filter: blur — то же пятно без тяжёлого размытия на каждой карточке */
.case-card::before {
  content: ''; position: absolute; inset: auto 2% 48% 2%; height: 130px;
  background: radial-gradient(closest-side, var(--c), transparent); opacity: .5;
}
.case-card .name { font-weight: 700; font-size: 15px; }
.case-card .price { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 15px; }
.case-card .price .star { width: 13px; height: 13px; }

/* ---------- case page ---------- */
.case-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.back {
  width: 38px; height: 38px; border-radius: 12px; background: var(--panel);
  display: grid; place-items: center; font-size: 20px;
}
.case-head .sub { color: var(--muted); font-size: 13px; }

.reels { display: grid; gap: 8px; margin-bottom: 16px; }
.reel {
  position: relative; height: 128px; overflow: hidden;
  background: var(--panel); border-radius: 18px;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.reels.multi .reel { height: 84px; }
.reel::after { /* световая линия-указатель */
  content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 2px; margin-left: -1px;
  background: var(--glow);
  box-shadow: 0 0 12px 2px var(--glow), 0 0 32px 6px rgba(168, 85, 247, .45);
  z-index: 2; border-radius: 2px;
}
.strip {
  position: absolute; top: 0; bottom: 0; left: 50%;
  display: flex; align-items: center; gap: 6px;
  will-change: transform;
}
.tile {
  flex: none; width: 96px; height: 108px; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--panel-2);
  border-bottom: 3px solid var(--rc);
  font-size: 13px;
}
.reels.multi .tile { width: 70px; height: 72px; font-size: 11px; }
.tile.win { background: color-mix(in srgb, var(--rc) 22%, var(--panel-2)); }

.controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; container-type: inline-size; }
.controls > * { min-width: 0; max-width: 100%; }
.counts { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 6px; }
.counts[hidden] { display: none; }
.counts button {
  height: 40px; border-radius: 12px; background: var(--panel);
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--muted);
}
.counts button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--violet); }
.open-btn .num { font-size: 16px; }
.open-btn .star { width: 14px; height: 14px; }

.rtp-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

/* ---------- list rows ---------- */
.rows { background: var(--panel); border-radius: 18px; overflow: hidden; }
.row { display: flex; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .label { color: var(--muted); font-size: 13px; }
.row .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; word-break: break-all; }
.chip { padding: 6px 10px; border-radius: 10px; background: var(--panel-2); font-size: 13px; font-weight: 600; }
.amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.amounts button {
  height: 56px; border-radius: 14px; background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px;
}
.amounts .star { width: 13px; height: 13px; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; min-width: 0; background: var(--panel-2); border-radius: 12px; padding: 3px; }
.seg button { padding: 6px 12px; border-radius: 9px; font-weight: 600; font-size: 13px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--violet); color: var(--text); }
input.field {
  width: 100%; height: 42px; padding: 0 12px; border-radius: 12px;
  background: var(--night); border: 1px solid var(--line); color: var(--text); font: 500 14px var(--body);
}
.hist .val.plus { color: var(--plus); }
.hist .val.minus { color: var(--muted); }
.ok { color: var(--plus); font-size: 12px; font-weight: 700; }

/* ---------- games placeholder ---------- */
.game {
  display: flex; gap: 14px; align-items: center; padding: 16px; margin-bottom: 10px;
  background: var(--panel); border-radius: 18px;
}
.game .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--panel-2); display: grid; place-items: center; }
.game .ico svg { width: 26px; height: 26px; stroke: var(--glow); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.game p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

/* ---------- tabs ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: calc(var(--tabs-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(13, 9, 28, 0.94); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(139, 61, 255, .28);
  box-shadow: 0 -18px 40px -12px rgba(5, 3, 12, .9), inset 0 1px 0 rgba(217, 70, 239, .08);
}
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs a[aria-current="page"] { color: var(--text); }
.tabs a[aria-current="page"] svg { stroke: var(--glow); }

/* ---------- sheet / modal ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 5, 18, 0.72);
}
.sheet-body {
  width: 100%; max-width: 560px;
  padding: 22px var(--pad) calc(18px + var(--safe-b));
  background: var(--panel); border-radius: 24px 24px 0 0;
  animation: rise .22s ease-out;
}
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }
.sheet-body h1 { margin-bottom: 8px; }
.sheet-body p { color: var(--muted); margin: 0 0 18px; }
.win-list { display: grid; gap: 8px; margin: 16px 0 18px; }
.win-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.win-total .num { font-size: 26px; }
.win-total .num.up { color: var(--plus); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + var(--safe-b) + 14px); z-index: 30;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line); font-weight: 600; font-size: 14px;
  transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { border-color: var(--danger); }

.skeleton { height: 160px; border-radius: 18px; background: var(--panel); opacity: .6; }

/* ---------- gems ---------- */

@media (prefers-reduced-motion: reduce) {
  .sheet-body { animation: none; }
  .toast { transition: none; }
}

/* ---------- игры ---------- */
a.game { color: inherit; }
.game .chev { font-size: 26px; color: var(--muted); line-height: 1; }

.bet-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 6px; }
.sq { height: 48px; border-radius: 14px; background: var(--panel); font-family: var(--display); font-weight: 700; color: var(--muted); }
.bet-input {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px;
  background: var(--panel); border-radius: 14px; border: 1px solid var(--line);
}
.bet-input input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); outline: none;
  font: 700 18px var(--display); text-align: center; -moz-appearance: textfield;
}
.bet-input:focus-within { border-color: var(--violet); }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.presets button {
  height: 38px; border-radius: 11px; background: var(--panel);
  font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--muted);
}
.presets button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--violet); }
.slider input { width: 100%; accent-color: var(--violet); height: 28px; }

/* циферблат апгрейда */
.dial-wrap { position: relative; width: min(280px, 78vw); aspect-ratio: 1; margin: 4px auto 18px; }
.dial { width: 100%; height: 100%; display: block; overflow: visible; }
.dial-track { fill: none; stroke: var(--panel-2); stroke-width: 18; }
.dial-arc { fill: none; stroke: var(--glow); stroke-width: 18; stroke-linecap: butt; filter: drop-shadow(0 0 8px rgba(168, 85, 247, .6)); }
.needle { transform-origin: 120px 120px; transform-box: view-box; }
.needle path { fill: var(--text); filter: drop-shadow(0 0 6px rgba(237, 233, 254, .7)); }
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.dial-mult { font-size: 34px; }
.dial-mult.win { color: var(--plus); }
.dial-mult.lose { color: var(--muted); }
.dial-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* краш */
.crash-box { position: relative; height: 220px; margin-bottom: 10px; border-radius: 18px; background: var(--panel); overflow: hidden; }
.crash-svg { position: absolute; inset: 16px 12px 12px 12px; width: calc(100% - 24px); height: calc(100% - 28px); overflow: visible; }
.crash-line { fill: none; stroke: var(--glow); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.crash-fill { fill: rgba(124, 58, 237, .18); }
.crash-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.crash-mult { font-size: 44px; }
.crash-box[data-state="idle"] .crash-mult, .crash-box[data-state="countdown"] .crash-mult { color: var(--muted); }
.crash-box[data-state="won"] .crash-mult { color: var(--plus); }
/* Хвост после вывода: раунд уже не ваш, кривая ускоренно летит до точки краша */
.crash-box[data-state="tail"] .crash-mult { color: var(--muted); }
.crash-tail { fill: none; stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; opacity: .8; }
.crash-box[data-state="tail"] .crash-line, .crash-box[data-state="won"] .crash-line { stroke: var(--plus); }
.crash-box[data-state="tail"] .crash-fill, .crash-box[data-state="won"] .crash-fill { fill: rgba(34, 197, 94, .14); }
.crash-box[data-state="tail"] .dial-sub { color: var(--plus); font-weight: 700; }
.crash-box[data-state="crashed"] .crash-mult { color: var(--danger); }
.crash-box[data-state="crashed"] .crash-line { stroke: var(--danger); }
.crash-box[data-state="crashed"] .crash-fill { fill: rgba(244, 63, 94, .14); }
.last { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; min-height: 28px; }
.pill { flex: none; padding: 4px 10px; border-radius: 9px; background: var(--panel); font: 700 12px var(--display); color: var(--muted); }
.pill.hi { color: var(--gold); }
.auto { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 48px; padding: 0 6px 0 14px; background: var(--panel); border-radius: 14px; }
.auto span { color: var(--muted); font-weight: 600; }
.auto input { width: 110px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--night); color: var(--text); font: 700 15px var(--display); text-align: center; }
.slider input { -webkit-appearance: none; appearance: none; background: transparent; }
.slider input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--panel-2); }
.slider input::-moz-range-track { height: 6px; border-radius: 3px; background: var(--panel-2); }
.slider input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--violet); }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px rgba(168, 85, 247, .7); }
.slider input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--glow); }
.crash-center .dial-sub, .crash-mult { text-shadow: 0 2px 12px rgba(14, 10, 26, .9); }
.hint { margin: -4px 0 12px; color: var(--muted); font-size: 12px; }


/* ---------- сундук ---------- */

/* ---------- профиль ---------- */
.pf-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.avatar {
  width: 64px; height: 64px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--panel-2);
  font: 700 26px var(--display); color: var(--text);
  box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--lc);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-head h1 { font-size: 20px; margin-bottom: 4px; }
.lvl { display: inline-block; padding: 3px 10px; border-radius: 8px; font: 700 12px var(--display); color: var(--night); background: var(--lc); }
.lvl-card { padding: 14px; border-radius: 18px; background: var(--panel); }
.lvl-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.lvl-card .bar { height: 8px; margin: 10px 0 8px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.lvl-card .bar i { display: block; height: 100%; border-radius: 4px; }
.lvl-card .label { color: var(--muted); font-size: 12px; }
.stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.stats > div { padding: 12px 14px; border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 2px; }
.stats .num { font-size: 18px; }
.stats .label { color: var(--muted); font-size: 12px; }
form.row { gap: 8px; }
form.row .field { flex: 1; text-transform: uppercase; }
form.row .field::placeholder { text-transform: none; }

/* ---------- мины ---------- */
.mines-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.mstat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; background: var(--panel); border-radius: 14px; }
.mstat .label { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }
.mstat .num { font-size: 17px; }
.mstat .num.up { color: var(--plus); }
.mstat .num.down { color: var(--danger); }

.mines-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
  padding: 10px; margin-bottom: 10px; border-radius: 18px; background: var(--panel);
  transition: box-shadow .3s;
}
.mines-grid[data-state="running"] { box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .45); }
.mines-grid[data-state="won"] { box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, .55); }
.mines-grid[data-state="lost"] { box-shadow: inset 0 0 0 1.5px rgba(244, 63, 94, .55); }
.mcell {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0;
  border-radius: 12px; background: linear-gradient(180deg, #2C2150, var(--panel-2));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .12s, filter .15s, background .2s;
}
.mcell:disabled { cursor: default; }
.mines-grid[data-state="idle"] .mcell { opacity: .55; }
.mines-grid[data-state="running"] .mcell:not(.open):not(:disabled):hover { filter: brightness(1.25); transform: translateY(-2px); }
.mines-grid[data-state="running"] .mcell:not(.open):not(:disabled):active { transform: scale(.94); }
.mcell svg { width: 62%; height: 62%; display: block; }
.mcell.open { background: #120D22; box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, .45); }
.mcell.open.gem svg { animation: mpop .35s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 0 8px rgba(34, 197, 94, .55)); }
.mcell.open.mine.hit { background: rgba(244, 63, 94, .2); box-shadow: inset 0 0 0 1.5px var(--danger); }
.mcell.open.mine.hit svg { animation: mpop .4s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 0 10px rgba(244, 63, 94, .7)); }
.mcell.open.ghost { background: #140F26; box-shadow: none; }
.mcell.open.ghost svg { opacity: .32; animation: none; filter: none; }
.mcell.pending { animation: mpulse .5s ease-in-out infinite alternate; }
.mines-grid.shake { animation: mshake .45s; }
@keyframes mpop { from { transform: scale(.3); opacity: 0; } }
@keyframes mpulse { to { filter: brightness(1.5); transform: scale(.95); } }
@keyframes mshake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.ladder { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; scrollbar-width: none; min-height: 28px; }
.ladder::-webkit-scrollbar { display: none; }
.ladder .pill.done { color: var(--plus); }
.ladder .pill.cur { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--violet); }

.stepper { display: flex; align-items: center; gap: 4px; }
.stepper .sq { width: 36px; height: 36px; border-radius: 10px; background: var(--night); }
.stepper .num { min-width: 34px; text-align: center; font-size: 17px; }
[data-md]:disabled, [data-mp]:disabled, [data-bet]:disabled, .bet-input input:disabled { opacity: .45; cursor: default; }
.duo { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; min-width: 0; }
.duo > * { flex: 1 1 var(--act-min, 132px); min-width: 0; }
.duo > *:last-child { flex-grow: 2; }
.duo.one > * { flex-basis: 100%; }

@media (prefers-reduced-motion: reduce) {
  .mcell, .mcell svg, .mines-grid { animation: none !important; transition: none; }
}

/* ---------- переключатель ---------- */
.toggle { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 14px; background: var(--panel); border-radius: 14px; cursor: pointer; }
.toggle span { color: var(--muted); font-weight: 600; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--panel-2); transition: background .2s; flex: none; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.toggle input:checked + i { background: var(--violet); }
.toggle input:checked + i::after { transform: translateX(18px); background: #fff; }
.toggle input:focus-visible + i { outline: 2px solid var(--glow); outline-offset: 2px; }
.toggle:has(input:checked) span { color: var(--text); }

.partner-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 9px; border-radius: 8px; background: rgba(250, 204, 21, .14); color: var(--gold); font: 700 12px var(--display); }

/* =====================================================================
   Неоновый фон: отдельный декоративный слой позади интерфейса.
   .bg-fx            — фиксированный контейнер, pointer-events: none
   .bg-fx::before    — тонкая сетка, видна только по краям
   .bg-fx::after     — мягкое затемнение центра, чтобы контент читался
   .bg-glow (+::before/::after) — светящиеся пятна по углам, три слоя
   .bg-waves         — SVG-волны и бегущие «энергетические» импульсы
   .bg-dust (+::before/::after) — мелкие частицы
   ===================================================================== */
.bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.bg-fx > *, .bg-fx::before, .bg-fx::after { position: absolute; pointer-events: none; }

.bg-fx::before {
  content: ''; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(139, 61, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 61, 255, .07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, transparent 35%, #000 100%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, transparent 35%, #000 100%);
  opacity: .8;
}
.bg-fx::after {
  content: ''; inset: 0; z-index: 3;
  background: radial-gradient(ellipse min(46vw, 420px) 62% at 50% 44%, rgba(11, 7, 21, .62), rgba(11, 7, 21, 0) 100%);
}

/* светящиеся пятна */
.bg-glow { inset: -12%; z-index: 0; animation: bgDrift 34s ease-in-out infinite alternate; will-change: transform; }
.bg-glow, .bg-glow::before, .bg-glow::after {
  background:
    radial-gradient(38% 32% at 4% 96%, rgba(139, 61, 255, .42), transparent 72%),
    radial-gradient(36% 30% at 98% 94%, rgba(217, 70, 239, .34), transparent 72%),
    radial-gradient(30% 26% at 6% 12%, rgba(81, 69, 255, .32), transparent 72%),
    radial-gradient(28% 24% at 96% 16%, rgba(139, 61, 255, .28), transparent 72%);
}
.bg-glow::before, .bg-glow::after { content: ''; position: absolute; inset: 0; will-change: transform, opacity; }
.bg-glow::before {
  background:
    radial-gradient(26% 22% at 18% 78%, rgba(81, 69, 255, .30), transparent 70%),
    radial-gradient(24% 20% at 86% 70%, rgba(139, 61, 255, .26), transparent 70%),
    radial-gradient(16% 14% at 93% 52%, rgba(0, 229, 255, .10), transparent 70%);
  animation: bgDrift2 26s ease-in-out infinite alternate;
}
.bg-glow::after {
  background:
    radial-gradient(22% 18% at 30% 100%, rgba(217, 70, 239, .22), transparent 70%),
    radial-gradient(20% 16% at 74% 4%, rgba(81, 69, 255, .22), transparent 70%),
    radial-gradient(12% 10% at 3% 44%, rgba(0, 229, 255, .08), transparent 70%);
  animation: bgBreath 14s ease-in-out infinite alternate;
}

/* волны */
.bg-waves { inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.bg-waves path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.bg-waves .w-aurora { stroke: none; opacity: .9; }
.w-bottom { animation: waveA 22s ease-in-out infinite alternate; }
.w-left { animation: waveB 28s ease-in-out infinite alternate; }
.w-right { animation: waveC 25s ease-in-out infinite alternate; }
.w-bottom, .w-left, .w-right { transform-box: view-box; will-change: transform; }
/* бегущий импульс вдоль линии */
.w-flow { stroke-dasharray: 70 930; stroke-dashoffset: 1000; opacity: .85; animation: flow 9s linear infinite; }
.w-flow-2 { stroke-dasharray: 40 960; animation-duration: 12s; animation-delay: -5s; }

/* частицы: два слоя точек с разной плиткой, медленно поднимаются и мерцают */
.bg-dust { left: 0; right: 0; top: 0; bottom: -600px; z-index: 2; animation: dustRise 140s linear infinite; will-change: transform; }
.bg-dust::before, .bg-dust::after { content: ''; position: absolute; inset: 0; }
.bg-dust::before {
  background-image:
    radial-gradient(1.2px 1.2px at 22px 38px, rgba(237, 233, 254, .75), transparent 100%),
    radial-gradient(1px 1px at 140px 92px, rgba(168, 85, 247, .9), transparent 100%),
    radial-gradient(1.4px 1.4px at 230px 210px, rgba(217, 70, 239, .8), transparent 100%),
    radial-gradient(1px 1px at 70px 250px, rgba(129, 140, 248, .8), transparent 100%),
    radial-gradient(1.2px 1.2px at 270px 40px, rgba(237, 233, 254, .6), transparent 100%),
    radial-gradient(1px 1px at 185px 160px, rgba(0, 229, 255, .7), transparent 100%);
  background-size: 300px 300px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 0, 0, .25) 30%, #000 85%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 0, 0, .25) 30%, #000 85%);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.bg-dust::after {
  background-image:
    radial-gradient(1px 1px at 40px 120px, rgba(237, 233, 254, .7), transparent 100%),
    radial-gradient(1.3px 1.3px at 150px 30px, rgba(139, 61, 255, .9), transparent 100%),
    radial-gradient(1px 1px at 110px 175px, rgba(217, 70, 239, .7), transparent 100%);
  background-size: 200px 200px;
  opacity: .5;
  animation: twinkle 7s ease-in-out -3s infinite alternate-reverse;
}

@keyframes bgDrift { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(2%, -2%, 0) scale(1.06); } }
@keyframes bgDrift2 { from { transform: translate3d(3%, 2%, 0); } to { transform: translate3d(-3%, -1%, 0); } }
@keyframes bgBreath { from { opacity: .45; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
@keyframes waveA { from { transform: translate(-24px, 6px); } to { transform: translate(24px, -14px); } }
@keyframes waveB { from { transform: translate(-10px, -8px) rotate(-1deg); } to { transform: translate(16px, 12px) rotate(1deg); } }
@keyframes waveC { from { transform: translate(12px, 10px) rotate(1deg); } to { transform: translate(-16px, -10px) rotate(-1deg); } }
@keyframes flow { to { stroke-dashoffset: 0; } }
@keyframes dustRise { to { transform: translate3d(0, -600px, 0); } }
@keyframes twinkle { from { opacity: .35; } to { opacity: 1; } }

/* ---------- карточки поверх фона: тонкие границы и мягкое свечение ---------- */
.case-card, .game, .rows, .free, .crash-box, .mines-grid, .lvl-card, .stats > div, .mstat, .back, .balance, .amounts button {
  box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow);
}
.mines-grid[data-state="running"] { box-shadow: inset 0 0 0 1.5px rgba(124, 58, 237, .45), var(--card-shadow); }
.mines-grid[data-state="won"] { box-shadow: inset 0 0 0 1.5px rgba(34, 197, 94, .55), var(--card-shadow); }
.mines-grid[data-state="lost"] { box-shadow: inset 0 0 0 1.5px rgba(244, 63, 94, .55), var(--card-shadow); }
.free { box-shadow: var(--card-shadow), 0 0 26px -12px rgba(34, 197, 94, .55); }
.case-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 45%), var(--panel);
  transition: transform .25s ease, box-shadow .25s ease;
}
.game { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) {
  .case-card:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent),
                0 0 24px -6px color-mix(in srgb, var(--c) 55%, transparent),
                0 18px 40px -18px color-mix(in srgb, var(--c) 70%, transparent);
  }
  a.game:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .5), 0 0 24px -8px rgba(168, 85, 247, .55), var(--card-shadow);
  }
}
.case-card:focus-visible { box-shadow: inset 0 0 0 1.5px var(--glow), 0 0 24px -6px var(--glow); }
.btn:not([disabled]):not(.ghost):not(.green) { box-shadow: 0 8px 24px -10px rgba(139, 61, 255, .8); }
.btn.green:not([disabled]) { box-shadow: 0 8px 24px -10px rgba(34, 197, 94, .7); }

@media (prefers-reduced-motion: reduce) {
  .bg-glow, .bg-glow::before, .bg-glow::after, .w-bottom, .w-left, .w-right, .w-flow, .bg-dust, .bg-dust::before, .bg-dust::after { animation: none !important; }
  .w-flow { opacity: 0; }
  .case-card, .game { transition: none; }
  .case-card:hover, a.game:hover { transform: none; }
}

/* =====================================================================
   Коллекция: 3D-предметы, капсулы, карточки, открытие, результат
   ===================================================================== */
:root {
  --surf: #171128;
  --surf-2: #211638;
  --r-common: #9A93B5; --r-uncommon: #4F8BFF; --r-rare: #9B4DFF; --r-epic: #E23DFF; --r-legendary: #FFD34F; --r-mythic: #FF5E8A;
}
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- изображение предмета ---------- */
.art { position: relative; display: grid; place-items: center; isolation: isolate; }
.art img, .art .art-fb { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
/* анимированные TGS (Lottie): контейнер плеера; запасная картинка — только если плеер не загрузился */
.art .tgs { display: block; width: 100%; height: 100%; pointer-events: none; }
.tgs svg { display: block; }
.tgs .tgs-fb { display: none; } .tgs.fail .tgs-fb { display: block; width: 100%; height: 100%; }
.tgs .tgs-fb svg { width: 100%; height: 100%; }
.row .art { width: 46px; height: 46px; flex: none; }

/* ---------- капсула ---------- */
.capsule { position: relative; display: inline-block; width: 120px; aspect-ratio: 1; flex: none; isolation: isolate; }
.capsule .cap-half { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; pointer-events: none;
  transition: transform .55s cubic-bezier(.2, .9, .25, 1.12), filter .35s ease; }
.capsule .cap-aura { position: absolute; inset: 6% 10% 14%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 42%, transparent), transparent 75%); opacity: .5; transition: opacity .3s, transform .3s; }
.capsule .cap-light { position: absolute; left: 50%; top: 22%; bottom: 26%; width: 6%; margin-left: -3%; z-index: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, #fff, color-mix(in srgb, var(--rar, var(--cc)) 80%, white 10%) 45%, transparent);
  transition: opacity .25s, transform .5s cubic-bezier(.2, .9, .25, 1.1); }
.capsule .cap-ring { display: none; }
.capsule .cap-sparks { position: absolute; left: 50%; top: 46%; z-index: 4; pointer-events: none; }
.capsule .cap-sparks i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; opacity: 0;
  background: color-mix(in srgb, var(--rar, var(--cc)) 70%, white); box-shadow: 0 0 8px var(--rar, var(--cc)); }
.capsule.sm { width: 64px; }
.capsule.card { width: 118px; margin: 2px 0 4px; }

/* сцена на странице кейса: покачивание, неоновые кольца, отражение */
.stage { position: relative; display: flex; justify-content: center; margin: -10px 0 4px; }
.stage::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: min(200px, 50vw); height: 26px; transform: translateX(-50%); border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cc) 45%, transparent), transparent); opacity: .7; }
.capsule.big { width: min(230px, 60vw); z-index: 1; animation: capFloat 5s ease-in-out infinite; }
.capsule.big .cap-ring { display: block; position: absolute; left: -2%; right: -2%; top: 50%; aspect-ratio: 1; margin-top: -52%; z-index: 3; pointer-events: none; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 14%, var(--cc) 20%, transparent 27% 58%, color-mix(in srgb, var(--cc) 60%, white) 63%, transparent 69%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  opacity: .55; filter: drop-shadow(0 0 4px var(--cc)); transform: rotateX(74deg) rotate(0deg); animation: ringSpin 9s linear infinite; }
.capsule.big .cap-ring.cr2 { left: 6%; right: 6%; margin-top: -44%; opacity: .4; transform: rotateX(70deg) rotateY(-14deg) rotate(0deg); animation: ringSpin2 13s linear infinite reverse; }

/* зарядка: ярче, кольца быстрее, дрожь */
.capsule.charging .cap-half { filter: brightness(1.22) drop-shadow(0 0 16px color-mix(in srgb, var(--cc) 80%, transparent)); animation: capShake .11s linear infinite; }
.capsule.charging .cap-aura { opacity: 1; transform: scale(1.18); }
.capsule.charging .cap-ring { animation-duration: .9s !important; opacity: 1 !important; }
/* раскрытие: половины разъезжаются, изнутри свет цвета редкости, искры */
.capsule.open .cap-l { transform: translateX(-24%) rotate(-7deg); }
.capsule.open .cap-r { transform: translateX(24%) rotate(7deg); }
.capsule.open .cap-light { opacity: 1; transform: scaleX(7) scaleY(1.15); }
.capsule.open .cap-aura { opacity: 1; transform: scale(1.3); background: radial-gradient(closest-side, color-mix(in srgb, var(--rar) 55%, transparent), transparent 75%); }
.capsule.open .cap-sparks i { animation: spark .9s ease-out forwards; }
.cap-sparks i:nth-child(1) { --dx: -70px; --dy: -60px; } .cap-sparks i:nth-child(2) { --dx: 74px; --dy: -52px; animation-delay: .04s !important; }
.cap-sparks i:nth-child(3) { --dx: -96px; --dy: 4px; } .cap-sparks i:nth-child(4) { --dx: 92px; --dy: 12px; animation-delay: .06s !important; }
.cap-sparks i:nth-child(5) { --dx: -50px; --dy: 70px; } .cap-sparks i:nth-child(6) { --dx: 56px; --dy: 66px; animation-delay: .03s !important; }
.cap-sparks i:nth-child(7) { --dx: -18px; --dy: -96px; } .cap-sparks i:nth-child(8) { --dx: 22px; --dy: -88px; animation-delay: .08s !important; }
.cap-sparks i:nth-child(9) { --dx: -110px; --dy: -30px; width: 3px; height: 3px; } .cap-sparks i:nth-child(10) { --dx: 112px; --dy: -24px; width: 3px; height: 3px; }
.cap-sparks i:nth-child(11) { --dx: -80px; --dy: 40px; width: 3px; height: 3px; } .cap-sparks i:nth-child(12) { --dx: 84px; --dy: 44px; width: 3px; height: 3px; }
.capsule.open[data-rar="common"] .cap-sparks i:nth-child(n+7) { display: none; }

@keyframes capFloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
@keyframes capShake { 0% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, .5px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(1.5px, .5px); } }
@keyframes ringSpin { to { transform: rotateX(74deg) rotate(360deg); } }
@keyframes ringSpin2 { to { transform: rotateX(70deg) rotateY(-14deg) rotate(360deg); } }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }

/* ---------- каталог ---------- */
.cat-bar { display: grid; gap: 8px; margin: 0 0 14px; }
.search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-edge); }
.search:focus-within { box-shadow: inset 0 0 0 1.5px var(--violet); }
.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: var(--text); font: 500 15px var(--body); }
.search input::placeholder { color: var(--muted); }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; height: 32px; padding: 0 13px; border-radius: 10px; background: var(--panel); color: var(--muted); font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px var(--card-edge); }
.chips button[aria-pressed="true"] { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--violet), 0 0 16px -6px var(--violet); }
.empty-cat { grid-column: 1 / -1; padding: 40px 16px; text-align: center; color: var(--muted); background: var(--panel); border-radius: 18px; }

.case-card { padding: 12px 10px 10px; }
.case-card .cover { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.case-card .name { position: relative; }
.case-card .meta { position: relative; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.case-card .foot { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.case-card .price { margin-top: 0; }
.case-card .peek { position: relative; z-index: 4; height: 30px; padding: 0 11px; border-radius: 9px; background: var(--panel-2); font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--card-edge); }
.case-card .peek:hover { box-shadow: inset 0 0 0 1px var(--glow); }
.case-card .badge { position: absolute; top: 9px; right: 9px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.case-card .badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.badge.gift { background: rgba(226, 61, 255, .14); color: #F2A6FF; box-shadow: inset 0 0 0 1px rgba(226, 61, 255, .35); }
@media (hover: hover) {
  .case-card:hover .cap-l { transform: translateX(-4%) rotate(-2deg); }
  .case-card:hover .cap-r { transform: translateX(4%) rotate(2deg); }
  .case-card:hover .cap-aura { opacity: .95; }
}

.free .capsule.sm { margin: -6px 0; }
.case-head .grow { flex: 1; min-width: 0; }
.head-price { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 11px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-edge); }
.head-price .star { width: 13px; height: 13px; }

/* ---------- рулетка ---------- */
.tile { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 12%, var(--panel-2)), var(--panel-2) 70%); }
.tile .art { width: 62px; height: 62px; }
.reels.multi .tile .art { width: 42px; height: 42px; }
.tile.win { background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 34%, var(--panel-2)), color-mix(in srgb, var(--rc) 12%, var(--panel-2))); box-shadow: 0 0 22px -4px var(--rc); }

/* ---------- карточки предметов ---------- */
.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 470px) { .item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.icard {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 10px 7px 8px; border-radius: 16px; overflow: hidden; text-align: center; color: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc) 9%, var(--surf)), var(--surf) 62%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 20%, transparent);
  transition: transform .22s ease, box-shadow .22s ease;
}
.icard .art { width: 100%; max-width: 108px; aspect-ratio: 1; transition: transform .35s cubic-bezier(.2, .9, .3, 1.25); }
.icard .art::before { content: ''; position: absolute; inset: 16% 14% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 34%, transparent), transparent); }
.icard::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--rc); box-shadow: 0 0 10px var(--rc); }
.icard::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%); transform: translateX(-130%); transition: transform .8s ease; }
.ic-name { display: flex; align-items: center; justify-content: center; min-height: 2.5em; font-size: 12px; font-weight: 700; line-height: 1.2; }
.ic-val { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.ic-val .star { width: 11px; height: 11px; }
.ic-foot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: 10.5px; color: var(--muted); }
.ic-rar { max-width: 100%; color: var(--rc); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-ch { font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .icard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent), 0 0 24px -8px var(--rc); }
  .icard:hover .art { transform: scale(1.09); }
  .icard:hover::before { transform: translateX(130%); }
}
.icard:focus-visible { box-shadow: inset 0 0 0 1.5px var(--rc), 0 0 20px -6px var(--rc); }

/* оформление по редкости: не только цвет, но и рамка */
.icard.r-uncommon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 26%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rc) 45%, transparent); }
.icard.r-rare { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 38%, transparent), inset 0 0 0 4px var(--surf), inset 0 0 0 5px color-mix(in srgb, var(--rc) 18%, transparent); }
.icard.r-epic {
  background:
    linear-gradient(var(--rc), var(--rc)) top 6px left 6px / 12px 2px no-repeat, linear-gradient(var(--rc), var(--rc)) top 6px left 6px / 2px 12px no-repeat,
    linear-gradient(var(--rc), var(--rc)) top 6px right 6px / 12px 2px no-repeat, linear-gradient(var(--rc), var(--rc)) top 6px right 6px / 2px 12px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--rc) 14%, var(--surf)), var(--surf) 62%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 38%, transparent), 0 0 18px -10px var(--rc);
}
.icard.r-legendary, .icard.r-mythic { border: 1.5px solid transparent; padding: 9px 6px 7px; }
.icard.r-legendary {
  background: linear-gradient(180deg, #2A2014, var(--surf) 62%) padding-box, linear-gradient(140deg, #FFF0C2, #FFD34F 35%, #A8781E 60%, #FFE7A6) border-box;
  box-shadow: 0 0 22px -10px #FFD34F;
}
.icard.r-mythic {
  background: linear-gradient(180deg, #2A1226, var(--surf) 62%) padding-box, conic-gradient(from var(--ang), #FF5E8A, #E23DFF, #426BFF, #00E5FF, #FFD34F, #FF5E8A) border-box;
  box-shadow: 0 0 26px -10px #FF5E8A; animation: angSpin 6s linear infinite;
}
.icard.r-legendary .art img, .icard.r-mythic .art img, .icard.r-legendary .art .tgs, .icard.r-mythic .art .tgs { animation: artFloat 4.2s ease-in-out infinite; }
.icard.r-mythic .art img { animation-delay: -1.4s; }
@keyframes artFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes angSpin { to { --ang: 360deg; } }

.gift-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45; color: #D9C9F2;
  background: rgba(226, 61, 255, .07); box-shadow: inset 0 0 0 1px rgba(226, 61, 255, .22); }

/* ---------- окна: подробности, награды, результат ---------- */
.sheet.center { align-items: center; padding: 16px; }
.sheet.center .sheet-body { border-radius: 24px; max-width: 420px; padding: 22px 18px 18px; animation: popIn .32s cubic-bezier(.2, 1.2, .4, 1); }
.sheet-body { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, color-mix(in srgb, var(--rc, #9B4DFF) 10%, var(--surf)), var(--surf) 40%); box-shadow: inset 0 0 0 1px var(--card-edge), 0 -10px 40px -12px rgba(0, 0, 0, .8); }
@keyframes popIn { from { transform: scale(.88); opacity: 0; } }
.peek-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.peek-head h1 { margin: 0 0 2px; }
.peek-head .muted { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.peek-head .star { width: 12px; height: 12px; }
.peek-sheet .btn.block { margin-top: 14px; }

.item-detail, .reveal { text-align: center; }
.idt-stage, .rv-stage { position: relative; width: min(250px, 62vw); aspect-ratio: 1; margin: -4px auto 6px; display: grid; place-items: center; }
.idt-stage .art, .rv-stage .art { width: 86%; height: 86%; z-index: 2; }
.idt-stage .art { animation: zoomIn .4s cubic-bezier(.2, 1.2, .4, 1) both; }
.idt-stage::before, .rv-halo { content: ''; position: absolute; inset: 10%; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 45%, transparent), transparent); }
.idt-row { display: flex; justify-content: space-between; padding: 10px 2px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 14px; }
.idt-row .label { color: var(--muted); }
.item-detail .btn { margin-top: 14px; }
.rv-rar { display: inline-block; margin-bottom: 6px; padding: 4px 10px; border-radius: 8px; font: 700 11px var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 40%, transparent); }
.reveal h1, .item-detail h1 { margin: 0 0 6px; }
.rv-val { display: inline-flex; align-items: center; gap: 8px; font-size: 30px; color: var(--plus); }
.rv-val .star { width: 22px; height: 22px; }
.rv-meta { margin-top: 2px; font-size: 13px; color: var(--muted); min-height: 1.3em; }
.rv-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; margin-top: 18px; }
.rv-actions .btn.block { min-height: 50px; font-size: 14px; line-height: 1.15; }
.rv-actions .star { width: 13px; height: 13px; }

/* появление награды: выход из света, лёгкое приближение и покачивание */
.rv-stage .art { animation: emerge .75s cubic-bezier(.2, 1.25, .4, 1) both; }
.rv-stage .art img { animation: turn 6s ease-in-out .8s infinite; }
.rv-rays { position: absolute; inset: -12%; z-index: 0; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 55%, transparent) 0 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%); mask: radial-gradient(closest-side, #000 20%, transparent 72%);
  animation: raysSpin 18s linear infinite; }
.reveal.r-uncommon .rv-rays { opacity: .18; } .reveal.r-rare .rv-rays { opacity: .32; } .reveal.r-epic .rv-rays { opacity: .45; }
.reveal.r-legendary .rv-rays { opacity: .62; } .reveal.r-mythic .rv-rays { opacity: .75; animation: raysSpin 12s linear infinite, hue 4s linear infinite; }
.reveal.r-legendary .rv-stage::after, .reveal.r-mythic .rv-stage::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; z-index: 1;
  box-shadow: 0 0 0 2px var(--rc), 0 0 30px var(--rc); animation: burst 1.1s ease-out .15s both; }
.reveal.r-mythic .rv-rar { background: linear-gradient(90deg, #FF5E8A, #E23DFF, #426BFF, #00E5FF); color: #fff; box-shadow: none; }
.reveal.multi h1 { margin-bottom: 12px; }
.rv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.rv-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 14px; background: var(--surf-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent); animation: emerge .55s cubic-bezier(.2, 1.25, .4, 1) var(--d) both; }
.rv-cell .art { width: 72px; height: 72px; }
.rv-cell .num { font-size: 13px; color: var(--plus); }
.reveal .win-total { margin-top: 12px; }
/* × в окне результата: внутри окна справа сверху, «прилипает» при прокрутке длинного списка, зона нажатия 44px */
.reveal-sheet .sheet-body { position: relative; }
.rv-close { position: sticky; top: 0; float: right; z-index: 6; width: 44px; height: 44px; margin: -14px -10px -44px 0;
  display: grid; place-items: center; border-radius: 14px; color: #E9DDFF; cursor: pointer;
  background: rgba(20, 13, 38, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(181, 123, 255, .45), 0 0 14px -4px rgba(155, 77, 255, .7);
  transition: background .15s, box-shadow .15s, transform .12s; -webkit-tap-highlight-color: transparent; }
.rv-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (hover: hover) { .rv-close:hover { background: rgba(124, 58, 237, .38); box-shadow: inset 0 0 0 1px rgba(200, 160, 255, .8), 0 0 20px -2px rgba(155, 77, 255, .95); color: #fff; } }
.rv-close:active { transform: scale(.9); background: rgba(124, 58, 237, .55); }
.rv-close:focus-visible { outline: 2px solid #C084FC; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rv-close { transition: none; } }
@keyframes emerge { 0% { transform: translateY(26px) scale(.35); opacity: 0; filter: brightness(3); } 60% { opacity: 1; } 100% { transform: none; opacity: 1; filter: none; } }
@keyframes zoomIn { from { transform: scale(.6); opacity: 0; } }
@keyframes turn { 0%, 100% { transform: perspective(600px) rotateY(-12deg) translateY(0); } 50% { transform: perspective(600px) rotateY(12deg) translateY(-6px); } }
@keyframes raysSpin { to { transform: rotate(360deg); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes burst { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .capsule.big, .capsule .cap-ring, .capsule.charging .cap-half, .icard.r-legendary .art img, .icard.r-mythic .art img, .icard.r-mythic,
  .rv-stage .art, .rv-stage .art img, .rv-rays, .rv-cell, .idt-stage .art, .reveal .rv-stage::after { animation: none !important; }
  .capsule .cap-half, .icard, .icard .art, .icard::before { transition: none; }
  .capsule.open .cap-sparks i { animation: none; }
}

/* =====================================================================
   Шапка KAPSULAS: стекло, неоновая линия, логотип, меню, баланс, аватар
   ===================================================================== */
:root { --top-h: 60px; --logo: 'Orbitron', var(--display); }
.top {
  position: sticky; top: 0; z-index: 8;
  padding-top: env(safe-area-inset-top, 0px);
  background: linear-gradient(180deg, rgba(11, 7, 21, .82), rgba(11, 7, 21, .62));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: background .25s ease, box-shadow .25s ease;
}
/* тонкая неоновая линия по низу: тускнеет к краям */
.top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(155, 77, 255, .55) 22%, rgba(66, 107, 255, .65) 50%, rgba(226, 61, 255, .5) 78%, transparent);
  box-shadow: 0 0 10px rgba(155, 77, 255, .45);
}
.top.scrolled { background: linear-gradient(180deg, rgba(11, 7, 21, .94), rgba(11, 7, 21, .86)); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9); }
.top-in { display: flex; align-items: center; gap: 12px; height: var(--top-h); max-width: 1240px; margin: 0 auto; padding: 0 var(--pad); }

/* логотип */
.logo { display: inline-flex; align-items: center; gap: 9px; flex: none; color: var(--text); border-radius: 12px; }
.logo-mark { width: 34px; height: 34px; overflow: visible; filter: drop-shadow(0 0 6px rgba(155, 77, 255, .55)); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.logo-core { transform-origin: 20px 20px; animation: corePulse 3.2s ease-in-out infinite; }
.logo-word { font-family: var(--logo); font-weight: 900; font-size: 19px; letter-spacing: .14em; line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #E9DDFF 55%, #B79CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(155, 77, 255, .35)); }
.logo-word span { background: linear-gradient(90deg, #C084FC, #7AA2FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (hover: hover) { .logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); } }
@keyframes corePulse { 0%, 100% { opacity: .75; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }

/* центральное меню */
.hnav { display: none; flex: 1; justify-content: center; gap: 4px; }
.hnav a { position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 11px;
  font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--muted); transition: color .2s, background .2s; }
.hnav a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 2px; opacity: 0; transform: scaleX(.4);
  background: linear-gradient(90deg, #9B4DFF, #426BFF); box-shadow: 0 0 10px rgba(155, 77, 255, .8); transition: opacity .25s, transform .25s; }
.hnav a:hover { color: var(--text); background: rgba(155, 77, 255, .08); }
.hnav a[aria-current="page"] { color: #fff; background: linear-gradient(180deg, rgba(155, 77, 255, .16), rgba(155, 77, 255, .04)); box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .28); }
.hnav a[aria-current="page"]::after { opacity: 1; transform: none; }

/* правая часть */
.top-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: rgba(23, 17, 40, .7); box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .2); transition: box-shadow .2s, background .2s; }
.icon-btn:hover { box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .5), 0 0 14px -4px rgba(155, 77, 255, .7); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[aria-pressed="true"] svg { stroke: var(--text); }
.balance {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 4px 0 12px; border-radius: 13px; font-size: 15px;
  background: linear-gradient(180deg, rgba(36, 26, 66, .85), rgba(23, 17, 40, .85));
  box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .3), 0 0 18px -8px rgba(155, 77, 255, .7); transition: box-shadow .2s;
}
.balance:hover { box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .6), 0 0 22px -6px rgba(155, 77, 255, .8); }
.balance .star { width: 15px; height: 15px; filter: drop-shadow(0 0 4px rgba(255, 211, 79, .6)); }
.balance .num { min-width: 1ch; }
.balance .plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, #9B4DFF, #426BFF); box-shadow: 0 0 12px -2px rgba(124, 58, 237, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.balance .plus svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.balance.bump .num { animation: bump .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bump { 40% { transform: scale(1.12); color: var(--gold); } }
.avatar-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; }
.avatar-btn .av { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #3A2A66, #1A1330); font: 800 15px var(--display); color: var(--text);
  box-shadow: 0 0 0 2px var(--lc, #8A84A3), 0 0 14px -2px var(--lc, #8A84A3); transition: transform .2s; }
.avatar-btn .av img { width: 100%; height: 100%; object-fit: cover; }
.avatar-btn:hover .av, .avatar-btn[aria-current] .av { transform: scale(1.06); }

/* компьютер: меню в шапке, нижние вкладки не нужны */
@media (min-width: 900px) {
  :root { --top-h: 72px; }
  .hnav { display: flex; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-word { font-size: 22px; }
  .tabs { display: none; }
  body { padding-bottom: 40px; }
  .toast { bottom: 28px; }
  .top-in { gap: 24px; }
}
/* телефоны: звук — в настройках профиля, всё компактнее */
@media (max-width: 599px) {
  #soundBtn { display: none; }
  .top-in { gap: 8px; }
  .logo { gap: 7px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-word { font-size: 16px; letter-spacing: .11em; }
  .top-right { gap: 6px; }
  .balance { height: 36px; gap: 6px; padding: 0 3px 0 10px; font-size: 14px; }
  .balance .plus { width: 28px; height: 28px; }
  .avatar-btn { width: 38px; height: 38px; }
  .avatar-btn .av { width: 34px; height: 34px; }
}
@media (max-width: 359px) {
  .logo-word { font-size: 14px; letter-spacing: .08em; }
  .balance .star { display: none; }
}
@media (prefers-reduced-motion: reduce) { .logo-core { animation: none; } .balance.bump .num { animation: none; } }
@media (max-width: 359px) { .free { gap: 10px; padding: 12px; } .free .btn { padding: 0 12px; } .free .capsule.sm { width: 52px; } }
.cat-bar > * { min-width: 0; }

/* =====================================================================
   Главная: широкий каталог, ежедневный кейс, сортировка, состояния
   ===================================================================== */
body.wide #view { max-width: 1240px; }
body.wide .bg-fx::after { background: radial-gradient(ellipse min(62vw, 760px) 70% at 50% 46%, rgba(11, 7, 21, .7), rgba(11, 7, 21, 0) 100%); }
html.paused .bg-fx, html.paused .bg-fx *, html.paused .bg-fx::before, html.paused .bg-fx::after { animation-play-state: paused !important; }

/* сетка: 2 на телефоне → 5 на широком экране */
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { body.wide .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1180px) { body.wide .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* карточка кейса */
.case-card {
  padding: 12px 12px 12px; border-radius: 20px; isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%),
    linear-gradient(180deg, #1D1535, #140F26);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, rgba(155, 77, 255, .12)), 0 18px 36px -26px rgba(0, 0, 0, .9);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1), box-shadow .3s ease;
  animation: cardIn .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.case-card::before { display: none; }
.case-card .cap-wrap { position: relative; display: grid; place-items: center; width: 100%; margin: 4px 0 2px; }
.case-card .cap-wrap::after { content: ''; position: absolute; left: 50%; bottom: 6%; width: 62%; height: 12%; transform: translateX(-50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent); opacity: .7; transition: opacity .3s, transform .3s; }
.case-card .capsule.card { width: min(132px, 82%); margin: 0; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.case-card .name { font: 700 15px/1.2 var(--display); letter-spacing: -.01em; margin-top: 2px; text-align: center; }
.case-card .meta { text-align: center; }
.case-card .price { font-size: 16px; }
.case-card .tier { position: absolute; top: 10px; left: 10px; z-index: 2; max-width: calc(100% - 56px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 3px 8px; border-radius: 7px; font: 700 9.5px var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--rc); background: color-mix(in srgb, var(--rc) 13%, rgba(11, 7, 21, .6)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 35%, transparent); }
.case-card.t-elite .tier { color: #1A1206; background: linear-gradient(90deg, #FFE7A6, #FFD34F, #E0A93C); box-shadow: 0 0 12px -3px rgba(255, 211, 79, .7); }
/* кейс с мифической наградой — переливающаяся рамка */
.case-card.r-mythic { border: 1px solid transparent;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%) padding-box, linear-gradient(180deg, #1D1535, #140F26) padding-box,
    conic-gradient(from var(--ang), #FF5E8A, #E23DFF, #426BFF, #00E5FF, #FFD34F, #FF5E8A) border-box;
  animation: cardIn .5s cubic-bezier(.2, .9, .3, 1) both, angSpin 7s linear infinite; animation-delay: calc(var(--i, 0) * 35ms), 0s; }
.case-card .badge { top: 8px; right: 8px; }
.case-card .peek { display: inline-flex; align-items: center; gap: 5px; }
.case-card .peek svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@media (max-width: 420px) { .case-card .peek span { display: none; } .case-card .peek { width: 34px; padding: 0; justify-content: center; } }
@media (hover: hover) {
  .case-card:hover { transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 65%, transparent), 0 0 28px -8px color-mix(in srgb, var(--c) 70%, transparent), 0 24px 40px -24px rgba(0, 0, 0, .9); }
  .case-card:hover .capsule.card { transform: translateY(-4px) scale(1.04); }
  .case-card:hover .cap-wrap::after { opacity: 1; transform: translateX(-50%) scale(1.15); }
}
.case-card:has(.cover:focus-visible) { box-shadow: inset 0 0 0 2px var(--glow), 0 0 24px -6px var(--glow); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* заголовок каталога и сортировка */
.cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; }
.cat-head h1 { font-size: 22px; }
.sort select { height: 36px; padding: 0 32px 0 12px; border-radius: 11px; border: 0; color: var(--text); font: 600 13px var(--body); cursor: pointer;
  -webkit-appearance: none; appearance: none; background: rgba(23, 17, 40, .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239C92BF' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center / 11px;
  box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .28); }
.sort select:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--violet); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.filters .chips { margin: 0; padding: 0; }
.filters .sep { width: 1px; height: 20px; background: rgba(155, 77, 255, .25); margin: 0 4px; }
@media (max-width: 640px) { .filters { display: grid; gap: 8px; } .filters .sep { display: none; } .filters .chips { margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); } }
@media (min-width: 900px) { body.wide .cat-bar { grid-template-columns: minmax(260px, 360px) 1fr; align-items: center; } }
.cat-status { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.cat-status .reset { color: #C9A8FF; font-weight: 700; font-size: 13px; padding: 4px 0; }
.cat-status .reset:hover { color: #fff; text-decoration: underline; }
.chips button { transition: color .2s, background .2s, box-shadow .2s; }
.empty-cat { display: grid; justify-items: center; gap: 10px; padding: 44px 16px; }
.empty-cat svg, .load-error svg { width: 44px; height: 44px; fill: none; stroke: #6E5A9E; stroke-width: 2; stroke-linecap: round; }
.empty-cat b { color: var(--text); font-weight: 600; }

/* ежедневный кейс */
.daily { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; margin: 6px 0 4px; padding: 12px 18px 12px 8px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 140% at 0% 50%, color-mix(in srgb, var(--cc) 26%, transparent), transparent 70%), linear-gradient(180deg, #1B1532, #130F24);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc) 40%, transparent), 0 0 34px -18px var(--cc); }
.daily::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .05) 45%, transparent 60%); transform: translateX(-100%); }
.daily[data-state="ready"]::after { animation: sweep 4.5s ease-in-out infinite; }
.daily-cap { display: grid; place-items: center; }
.daily .capsule.daily-c { width: 112px; margin: -6px 0; animation: capFloat 5s ease-in-out infinite; }
.daily-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.daily-kicker { font: 700 10px var(--display); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 80%, white); }
.daily-title { font: 700 18px/1.15 var(--display); }
.daily-sub { color: var(--muted); font-size: 13px; }
.daily-timer { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 22px; }
.daily-timer .num { font-size: 17px; color: var(--text); letter-spacing: .02em; }
.daily-timer .ring { width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--cc) calc(var(--p) * 360deg), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 66%); mask: radial-gradient(closest-side, transparent 62%, #000 66%); }
.daily-timer .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plus); box-shadow: 0 0 10px var(--plus); animation: dotPulse 1.6s ease-in-out infinite; }
.daily-timer .lock { width: 12px; height: 12px; border: 2px solid var(--muted); border-radius: 3px; position: relative; top: 2px; }
.daily-timer .lock::before { content: ''; position: absolute; left: 1px; top: -7px; width: 6px; height: 6px; border: 2px solid var(--muted); border-bottom: 0; border-radius: 5px 5px 0 0; }
.daily[data-state="ready"] .daily-timer { color: #8BF0B0; font-weight: 600; }
.daily-btn { height: 46px; padding: 0 22px; border-radius: 14px; }
@media (max-width: 520px) { .daily-btn { height: 42px; } }
.daily[data-state="ready"] .daily-btn { background: linear-gradient(135deg, #2BD66C, #16A34A); color: #04170B; box-shadow: 0 0 22px -6px rgba(34, 197, 94, .8); animation: readyPulse 2.4s ease-in-out infinite; }
.daily[data-state="wait"] .daily-btn { background: rgba(36, 26, 66, .8); color: var(--muted); box-shadow: inset 0 0 0 1px rgba(155, 77, 255, .2); pointer-events: none; }
.daily[data-state="deposit"] .daily-btn { background: linear-gradient(135deg, #9B4DFF, #426BFF); }
@keyframes sweep { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes dotPulse { 50% { opacity: .4; transform: scale(.8); } }
@keyframes readyPulse { 50% { box-shadow: 0 0 30px -4px rgba(34, 197, 94, .95); } }
@media (max-width: 520px) {
  .daily { grid-template-columns: auto minmax(0, 1fr); padding: 10px 14px 14px 4px; }
  .daily .capsule.daily-c { width: 96px; }
  .daily-btn { grid-column: 1 / -1; width: 100%; margin-top: 6px; }
  .daily-title { font-size: 16px; }
}
@media (min-width: 900px) { body.wide .daily { padding: 14px 26px 14px 14px; } body.wide .daily .capsule.daily-c { width: 128px; } }

/* загрузка и ошибка */
.sk { border-radius: 20px; background: linear-gradient(100deg, #17112A 30%, #221A3C 50%, #17112A 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
.sk-daily { height: 120px; margin: 6px 0 22px; }
.sk-bar { height: 44px; margin-bottom: 18px; border-radius: 14px; }
.sk-card { aspect-ratio: 3 / 4; }
@keyframes shimmer { to { background-position: -150% 0; } }
.load-error { display: grid; justify-items: center; gap: 8px; padding: 70px 16px; text-align: center; }
.load-error b { font: 700 17px var(--display); }
.load-error p { margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .case-card, .daily .capsule.daily-c, .daily::after, .daily-timer .dot, .daily .daily-btn, .sk { animation: none !important; }
  .case-card, .case-card .capsule.card { transition: none; }
}

/* ---------- профиль: карточка игрока ---------- */
.pf-hero { position: relative; margin: 6px 0 2px; padding: 16px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--lc) 26%, transparent), transparent 60%), linear-gradient(180deg, #1D1535, #130F24);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 35%, transparent), 0 0 34px -20px var(--lc); }
.pf-hero .pf-head { margin: 0 0 14px; }
.pf-hero .lvl-card { padding: 0; background: none; box-shadow: none; }
.avatar-ring { position: relative; display: grid; place-items: center; width: 76px; height: 76px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--lc) calc(var(--p) * 360deg), rgba(255, 255, 255, .1) 0); }
.avatar-ring .avatar { width: 66px; height: 66px; border: 0; box-shadow: 0 0 0 3px #17112A; }
.pf-hero h1 { font-size: 21px; }
.pf-hero .lvl { box-shadow: 0 0 14px -4px var(--lc); }
.pf-hero .bar { height: 10px; background: rgba(255, 255, 255, .08); }
.pf-hero .bar i { box-shadow: 0 0 12px var(--lc); }
.stats > div { background: linear-gradient(180deg, #1B1432, #151027); }
.stats .num { font-size: 20px; }

/* ---------- свои изображения из админки ---------- */
.capsule.own .cap-half { object-fit: contain; }
.capsule.own .cap-l { clip-path: inset(0 50% 0 0); }
.capsule.own .cap-r { clip-path: inset(0 0 0 50%); }
.art.own img { object-fit: contain; }
.badge.gift img { width: 18px; height: 18px; object-fit: contain; }
img.logo-mark { object-fit: contain; }
.promo { display: block; margin: 0 0 14px; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 1; max-height: 240px; width: 100%; background: var(--panel, #160F2A);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .35), 0 0 24px rgba(124, 58, 237, .25); }
.promo img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.promo { transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { a.promo:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(168, 85, 247, .7), 0 0 32px rgba(124, 58, 237, .4); } }
@media (prefers-reduced-motion: reduce) { a.promo { transition: none; } a.promo:hover { transform: none; } }

/* =====================================================================
   Кейсы новых форм: «Скоро», индивидуальные анимации ожидания и раскрытия
   ===================================================================== */
.case-card.draft .tier.soon { color: #EDE4FF; background: color-mix(in srgb, var(--c) 26%, rgba(20, 12, 40, .9)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.case-card.draft .meta { color: color-mix(in srgb, var(--c) 45%, var(--muted)); }
.case-card.draft .soon-lbl { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; font-size: 12px; font-weight: 700; color: var(--muted);
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 6px, transparent 6px 12px), var(--panel-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.case-card.draft .soon-lbl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.soon-pill { font-weight: 700; color: #EDE4FF; }
.soon-box { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--card-edge); }
.soon-box svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--glow, #A855F7); stroke-width: 2; stroke-linecap: round; }
.soon-box p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* появление сцены на странице кейса и реакция на выбор карточки */
.stage { animation: stageIn .55s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes stageIn { from { opacity: 0; transform: scale(.86) translateY(10px); } }
.case-card:active .cap-wrap { transform: scale(.95); transition: transform .12s; }

/* --- ожидание (только крупная модель на странице кейса — одна анимация на экране) --- */
.capsule.big[data-fx="gem"] .cap-aura, .capsule.big[data-fx="core"] .cap-aura { animation: auraPulse 2.8s ease-in-out infinite; }
.capsule.big[data-fx="core"] .cap-aura { animation-duration: 1.6s; }
.capsule.big[data-fx="prism"] { animation: prismSway 7s ease-in-out infinite; }
.capsule.big[data-fx="orbit"] { animation: orbFloat 8s ease-in-out infinite; }
.capsule.big[data-fx="relic"] { animation: relicFloat 6s ease-in-out infinite; }
.capsule.big[data-fx="portal"] .cap-aura { inset: 4%; opacity: .7; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--cc) 70%, transparent), transparent 40%, color-mix(in srgb, #E23DFF 60%, transparent), transparent 75%);
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 62%, transparent 76%); mask: radial-gradient(closest-side, transparent 52%, #000 62%, transparent 76%); animation: spin 7s linear infinite; }
.capsule.big[data-fx="portal"] .cap-ring { display: none; }
@keyframes auraPulse { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: .95; transform: scale(1.1); } }
@keyframes prismSway { 0%, 100% { transform: perspective(700px) translateY(0) rotateY(-14deg); } 50% { transform: perspective(700px) translateY(-6px) rotateY(14deg); } }
@keyframes orbFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes relicFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 33% { transform: translateY(-10px) rotate(1deg); } 66% { transform: translateY(-4px) rotate(2.5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- наведение на карточку в каталоге: «намёк» на раскрытие своей формы --- */
@media (hover: hover) {
  .case-card:hover [data-fx="doors"] .cap-l { transform: perspective(600px) rotateY(-14deg); transform-origin: 10% 50%; }
  .case-card:hover [data-fx="doors"] .cap-r { transform: perspective(600px) rotateY(14deg); transform-origin: 90% 50%; }
  .case-card:hover [data-fx="shatter"] .cap-l { transform: translate(-5%, -3%) rotate(-3deg); }
  .case-card:hover [data-fx="shatter"] .cap-r { transform: translate(5%, 3%) rotate(3deg); }
  .case-card:hover [data-fx="rise"] .cap-l, .case-card:hover [data-fx="rise"] .cap-r { transform: translateY(-5%); }
  .case-card:hover [data-fx="gem"] .cap-half, .case-card:hover [data-fx="prism"] .cap-half { filter: brightness(1.15) drop-shadow(0 0 10px color-mix(in srgb, var(--cc) 70%, transparent)); }
}

/* --- раскрытие: у каждой формы своё движение половин --- */
.capsule.open[data-fx="doors"] .cap-l { transform-origin: 10% 50%; transform: perspective(700px) rotateY(-72deg); }
.capsule.open[data-fx="doors"] .cap-r { transform-origin: 90% 50%; transform: perspective(700px) rotateY(72deg); }
.capsule.open[data-fx="slide"] .cap-l { transform: translateX(-36%); transition-timing-function: cubic-bezier(.7, 0, .2, 1); }
.capsule.open[data-fx="slide"] .cap-r { transform: translateX(36%); transition-timing-function: cubic-bezier(.7, 0, .2, 1); }
.capsule.open[data-fx="shatter"] .cap-l { transform: translate(-27%, -13%) rotate(-15deg); }
.capsule.open[data-fx="shatter"] .cap-r { transform: translate(25%, 14%) rotate(13deg); }
.capsule.open[data-fx="portal"] .cap-l { transform: translateX(-30%) scale(1.1); }
.capsule.open[data-fx="portal"] .cap-r { transform: translateX(30%) scale(1.1); }
.capsule.open[data-fx="portal"] .cap-light { transform: scaleX(11) scaleY(1.5); }
.capsule.open[data-fx="core"] .cap-light { animation: coreFlash .6s ease-out; }
.capsule.charging[data-fx="core"] .cap-half { filter: brightness(1.45) saturate(1.3) drop-shadow(0 0 22px var(--cc)); }
.capsule.open[data-fx="gem"] .cap-l, .capsule.open[data-fx="prism"] .cap-l { transform: translate(-21%, -5%) rotate(-11deg); }
.capsule.open[data-fx="gem"] .cap-r, .capsule.open[data-fx="prism"] .cap-r { transform: translate(21%, 5%) rotate(11deg); }
.capsule.open[data-fx="rise"] .cap-l { transform: translate(-18%, -16%) rotate(-6deg); }
.capsule.open[data-fx="rise"] .cap-r { transform: translate(18%, -16%) rotate(6deg); }
.capsule.open[data-fx="orbit"] .cap-l { transform: translate(-26%, 7%) rotate(-17deg); }
.capsule.open[data-fx="orbit"] .cap-r { transform: translate(26%, -7%) rotate(17deg); }
.capsule.open[data-fx="relic"] .cap-l { transform: translate(-28%, -11%) rotate(-23deg); }
.capsule.open[data-fx="relic"] .cap-r { transform: translate(27%, 12%) rotate(19deg); }
.capsule[data-fx="money"] .cap-sparks i { background: #FFD34F; box-shadow: 0 0 8px #FFB020; border-radius: 2px; }
.capsule[data-fx="money"] .cap-sparks i:nth-child(even) { background: #4ADE80; box-shadow: 0 0 8px #22C55E; width: 9px; height: 5px; }
@keyframes coreFlash { 0% { opacity: 0; transform: scale(1); } 25% { opacity: 1; transform: scaleX(16) scaleY(2.2); } 100% { opacity: 1; transform: scaleX(7) scaleY(1.15); } }

/* касание модели «Скоро»: короткое покачивание половин */
.capsule.poke .cap-l { animation: pokeL .5s ease-out; }
.capsule.poke .cap-r { animation: pokeR .5s ease-out; }
@keyframes pokeL { 40% { transform: translateX(-6%) rotate(-3deg); } }
@keyframes pokeR { 40% { transform: translateX(6%) rotate(3deg); } }

@media (prefers-reduced-motion: reduce) {
  .stage, .capsule.big[data-fx], .capsule[data-fx] .cap-aura, .capsule.open[data-fx] .cap-light, .capsule.poke .cap-half { animation: none !important; }
  .case-card:active .cap-wrap { transform: none; }
}

/* =====================================================================
   Коллекция игрока
   ===================================================================== */
.coll-link { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border-radius: 16px; color: var(--text);
  background: linear-gradient(120deg, rgba(155, 77, 255, .16), rgba(66, 107, 255, .1)), var(--panel); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .35); }
.coll-link .grow { flex: 1; display: grid; gap: 2px; }
.coll-link small { color: var(--muted); font-size: 12.5px; }
.coll-link .cl-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(155, 77, 255, .18); }
.coll-link .cl-ic svg { width: 20px; height: 20px; fill: none; stroke: #D8B4FE; stroke-width: 1.8; }
.coll-progress { height: 6px; border-radius: 4px; background: var(--panel); overflow: hidden; margin: 2px 0 12px; }
.coll-progress i { display: block; height: 100%; background: linear-gradient(90deg, #9B4DFF, #E23DFF, #FFD34F); border-radius: inherit; }
.coll-chips { margin-bottom: 10px; }
.coll-chips button small { opacity: .65; margin-left: 3px; font-weight: 600; }
.coll-chips button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--gc, var(--violet)), 0 0 16px -6px var(--gc, var(--violet)); }
.coll-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.coll-sec h2 { display: flex; align-items: baseline; gap: 8px; font-size: 16px; margin: 18px 0 10px; }
.coll-sec h2::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--gc); align-self: center; box-shadow: 0 0 10px var(--gc); }
.coll-sec h2 small { color: var(--muted); font: 600 12px var(--body); }
.coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.wide .coll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ccard { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 8px; border-radius: 14px; text-align: center; color: var(--text);
  background: radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--rc) 18%, transparent), transparent 70%), var(--panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 30%, var(--card-edge)); transition: transform .2s, box-shadow .2s; }
.ccard .art { width: 100%; aspect-ratio: 1; }
.ccard .cc-name { font: 700 12px/1.2 var(--display); min-height: 2.4em; display: grid; place-items: center; }
.ccard .cc-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 2px; font-size: 10.5px; font-weight: 700; }
.ccard .cc-rar { color: var(--rc); text-transform: uppercase; letter-spacing: .04em; font-size: 9.5px; }
.ccard .cc-n { color: var(--text); }
.ccard .cc-lock svg { width: 13px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 2; }
.ccard.locked .art img { filter: brightness(0) saturate(0); opacity: .55; }
.ccard.locked .art { filter: drop-shadow(0 0 1px rgba(200, 180, 255, .35)); }
.ccard.locked .cc-name { color: var(--muted); }
.ccard.r-legendary:not(.locked), .ccard.r-mythic:not(.locked) { box-shadow: inset 0 0 0 1px var(--rc), 0 0 18px -8px var(--rc); }
.ccard.r-mythic:not(.locked) .art img { animation: artFloat 4.2s ease-in-out infinite; }
@media (hover: hover) { .ccard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--rc), 0 6px 22px -10px var(--rc); } }
.item-detail.locked .idt-stage img { filter: brightness(0) saturate(0); opacity: .5; }
.idt-desc { margin: 4px 0 10px; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; }
.toggle.small { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .ccard { transition: none; } .ccard.r-mythic .art img { animation: none; } }

/* =====================================================================
   Коллекции кейсов в каталоге (блоки из админки)
   ===================================================================== */
.cgroups { display: grid; gap: 26px; }
.cgroup { position: relative; padding-top: 18px; }
.cgroup + .cgroup::before { content: ''; position: absolute; top: -13px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gc) 55%, transparent) 20%, color-mix(in srgb, var(--gc) 55%, transparent) 80%, transparent); }
.cg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cg-t { min-width: 0; }
.cg-head h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.cg-head h2::before { content: ''; width: 4px; height: 20px; border-radius: 2px; flex: none; background: var(--gc); box-shadow: 0 0 12px var(--gc); }
.cg-head p { margin: 4px 0 0 14px; color: var(--muted); font-size: 13.5px; }
.cg-n { flex: none; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center; font: 700 12px var(--display);
  color: color-mix(in srgb, var(--gc) 70%, white); background: color-mix(in srgb, var(--gc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent); }
.cg-cover { display: block; width: 100%; aspect-ratio: 4 / 1; max-height: 220px; object-fit: cover; border-radius: 16px; margin-bottom: 12px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gc) 40%, transparent); }
.free-lbl { font: 700 14px var(--display); color: #4ADE80; }
/* колонки из админки: телефон — cm-N, компьютер — cd-N */
@media (max-width: 639px) {
  .cg-grid.cm-1 { grid-template-columns: minmax(0, 1fr); }
  .cg-grid.cm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-grid.cm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cg-grid.cm-3 .case-card .peek span { display: none; }
}
@media (min-width: 900px) {
  body.wide .cg-grid.cd-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.wide .cg-grid.cd-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.wide .cg-grid.cd-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.wide .cg-grid.cd-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.wide .cg-grid.cd-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Пополнение баланса и окна платежей */
h3.sub { font: 700 14px var(--body); color: var(--muted); margin: 16px 0 8px; display: flex; align-items: center; gap: 8px; }
.pay-cta {
  width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, rgba(124, 58, 237, .32), rgba(168, 85, 247, .12)), var(--panel);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .45), 0 0 24px rgba(124, 58, 237, .18);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pay-cta:hover { box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .7), 0 0 30px rgba(124, 58, 237, .3); }
.pay-cta:active { transform: scale(.985); }
.pay-cta b { display: block; font-size: 15px; }
.pay-cta small { color: var(--muted); font-size: 12px; }
.pay-cta-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(124, 58, 237, .35); }
.pay-cta-ic svg { width: 22px; height: 22px; fill: none; stroke: #E9D5FF; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pay-cta-arrow { font-size: 26px; color: var(--muted); line-height: 1; }
.cst { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--panel-2); white-space: nowrap; }
.cst.paid { color: var(--plus); background: rgba(34, 197, 94, .14); }
.cst.confirming { color: #FACC15; background: rgba(250, 204, 21, .12); }
.cst.failed, .cst.expired { color: var(--muted); }
.pay-sum { display: grid; gap: 8px; margin: 16px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.pay-sum > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pay-sum b { font-weight: 700; text-align: right; }
.pay-sum .star { display: inline-block; width: 13px; height: 13px; vertical-align: -1px; }
.sheet-body p.pay-note { font-size: 12px; line-height: 1.5; margin: 0 0 14px; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.pay-res { text-align: center; }
.pay-res .pay-sum { text-align: left; }
.pay-res-ic { width: 64px; height: 64px; margin: 4px auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(124, 58, 237, .2); box-shadow: 0 0 28px rgba(168, 85, 247, .35); }
.pay-res-ic svg { width: 32px; height: 32px; fill: none; stroke: #E9D5FF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pay-res.paid .pay-res-ic { background: rgba(34, 197, 94, .18); box-shadow: 0 0 28px rgba(34, 197, 94, .35); }
.pay-res.paid .pay-res-ic svg { stroke: var(--plus); }
.pay-res.failed .pay-res-ic, .pay-res.expired .pay-res-ic { background: rgba(154, 147, 181, .14); box-shadow: none; }
.pay-res.failed .pay-res-ic svg, .pay-res.expired .pay-res-ic svg { stroke: var(--muted); }
.pay-res .spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(233, 213, 255, .25); border-top-color: #E9D5FF; animation: spin .9s linear infinite; }
.pay-res-act { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .pay-res .spin, .btn.loading::after { animation-duration: 2.4s; } }
.web-login #tgLogin { margin-top: 14px; min-height: 40px; }
/* Окно «Пополнить баланс» */
.tu-tabs { display: flex; width: 100%; margin: 4px 0 16px; }
.tu-tabs button { flex: 1; padding: 9px 10px; font-size: 14px; }
.tu-tabs button[aria-selected="true"] { background: var(--violet); color: var(--text); box-shadow: 0 0 16px rgba(124, 58, 237, .45); }
.tu-body { min-height: 180px; }
.tu-loading { display: grid; place-items: center; min-height: 180px; }
.tu-loading .spin, .tu-msg .spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(233, 213, 255, .25); border-top-color: #E9D5FF; animation: spin .9s linear infinite; }
.tu-msg { text-align: center; padding: 6px 0 4px; }
.sheet-body .tu-msg p { margin: 8px 0 16px; color: var(--muted); }
.tu-msg-ic { width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: rgba(124, 58, 237, .18); }
.tu-msg-ic svg { width: 26px; height: 26px; fill: none; stroke: #E9D5FF; stroke-width: 1.9; stroke-linecap: round; }
.tu-admin { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(250, 204, 21, .07); box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .3); font-size: 13px; text-align: left; }
.tu-admin b { color: #FACC15; }
.tu-admin ul { margin: 8px 0 12px; padding-left: 18px; color: var(--text); line-height: 1.45; }
.tu-admin li + li { margin-top: 4px; }
.tu-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(244, 63, 94, .12); color: #FDA4AF; font-size: 13px; line-height: 1.4; }
#topUpBtn { margin-top: 0; }
/* TON: кошелёк, депозит, вывод */
.ton-logo { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #0098EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7.5h10l-5 9.5z M12 7.5v9.5' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 0 12px rgba(0, 152, 234, .45); }
.tw-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.tw-card.on { box-shadow: inset 0 0 0 1px rgba(0, 152, 234, .5), 0 0 18px rgba(0, 152, 234, .15); }
.tw-card b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; }
.tw-card small { color: var(--muted); font-size: 12px; }
.tw-card .btn { padding: 0 16px; height: 38px; }
.tw-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 152, 234, .16); }
.tw-ic svg { width: 21px; height: 21px; fill: none; stroke: #7DD3FC; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sheet-body .tw-card { background: var(--night); }
.tdep-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tdep-head b { font-size: 16px; }
.tdep-head .muted { font-size: 12px; flex-basis: 100%; margin-left: 30px; margin-top: -6px; }
.tdep-amt { display: block; margin-top: 14px; }
.tdep-amt .label { display: block; margin-bottom: 6px; }
.tdep-in { position: relative; display: block; }
.tdep-in input.field { height: 52px; font: 700 20px var(--body); padding-right: 64px; font-variant-numeric: tabular-nums; }
.tdep-in .cur { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: #7DD3FC; }
.tdep-lim { display: flex; justify-content: space-between; gap: 8px; margin: 6px 2px 14px; font-size: 12px; color: var(--muted); }
.tdep-lim #tdGet { color: var(--text); font-weight: 700; }
.tx-link { color: #7DD3FC; text-decoration: none; white-space: nowrap; }
.tx-link:hover { text-decoration: underline; }
.wd-btns { display: grid; gap: 8px; }
.wd-btns .pay-cta { margin-top: 0; }
.pay-cta.ghost { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pay-cta.ghost .pay-cta-ic { background: rgba(250, 204, 21, .14); }
.pay-cta.ghost .pay-cta-ic svg { stroke: #FACC15; }
.wd-asset { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 6px; border-radius: 12px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.wd-asset .muted { font-size: 12px; margin-left: auto; }
.wd-addr { padding: 10px 12px; border-radius: 12px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; word-break: break-all; }
.wd-addr small { display: block; color: var(--plus); font-family: var(--body); margin-top: 4px; }
.wd-addr-s { font-size: 12px; word-break: break-all; max-width: 62%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.assets3 { display: grid; gap: 8px; margin: 4px 0 14px; }
.assets3 > div { padding: 10px 12px; border-radius: 12px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.assets3 b { display: block; }
.assets3 small { color: var(--muted); font-size: 12px; }
#tonBox .row { flex-wrap: wrap; }
.tu-tabs button { padding: 9px 6px; }
/* Документы и поддержка */
.rows.legal .row { color: inherit; text-decoration: none; transition: background .15s ease; }
.rows.legal .row:hover { background: rgba(124, 58, 237, .08); }
.rows.legal .muted { font-size: 13px; }
.lg-ic { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(124, 58, 237, .2); }
.lg-ic svg { width: 18px; height: 18px; fill: none; stroke: #E9D5FF; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.sheet-body p.legal-note, p.legal-note { font-size: 12px; color: var(--muted); margin: -8px 0 16px; }
.legal-note a { color: #C4B5FD; }
.web-login .legal-note { margin-top: 14px; }

/* ---------- история профиля ---------- */
.hx h2 { margin-bottom: 10px; }
.hx-toggle { height: auto; min-height: 56px; padding: 10px 14px; gap: 12px; margin-bottom: 12px; box-shadow: inset 0 0 0 1px var(--card-edge); }
.hx-toggle .grow { display: grid; gap: 2px; min-width: 0; }
.hx-toggle b { color: var(--text); font-weight: 700; font-size: 14px; }
.hx-toggle small { color: var(--muted); font-weight: 500; font-size: 12px; line-height: 1.35; }
.hx-tabs { margin-bottom: 10px; }
.hx-search { position: relative; margin-bottom: 10px; }
.hx-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.hx-search .field { width: 100%; padding-left: 38px; }
.hx-list { box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow); }
.hx-row { width: 100%; text-align: left; color: inherit; font: inherit; background: none; cursor: pointer; transition: background .15s ease; animation: hxIn .25s ease both; }
.hx-row:hover, .hx-row:focus-visible { background: rgba(124, 58, 237, .08); outline: none; }
.hx-row:focus-visible { box-shadow: inset 0 0 0 2px var(--glow); }
@keyframes hxIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hx-main { display: grid; gap: 2px; }
.hx-t { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-main .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-main .hx-d { font-size: 12px; opacity: .8; }
.hx-right { display: grid; justify-items: end; gap: 5px; flex: none; max-width: 46%; }
.hx-amt { font-weight: 800; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.hx-amt .star { display: inline-block; width: 13px; height: 13px; }
.hx-amt.plus { color: var(--plus); }
.hx-amt.minus { color: var(--text); }
.hx-amt.zero { color: var(--muted); font-weight: 600; }
.hx-art { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 30%, transparent), transparent); }
.hx-art .art { width: 42px; height: 42px; }
.hx-ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--card-edge); }
.hx-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--glow); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hx-ic.k-deposit svg { stroke: var(--plus); }
.hx-ic.k-withdrawal svg { stroke: var(--n-cyan); }
.hx-ic.k-balance svg { stroke: var(--gold); }
.cst.hx-st { font-size: 11px; padding: 2px 7px; }
.cst.ok { color: var(--plus); background: rgba(34, 197, 94, .14); }
.cst.wait { color: #FACC15; background: rgba(250, 204, 21, .12); }
.cst.bad { color: var(--danger); background: rgba(244, 63, 94, .13); }
.cst.back { color: #7DD3FC; background: rgba(125, 211, 252, .12); }
.cst.off { color: var(--muted); }
.hx-state { padding: 28px 16px; text-align: center; color: var(--muted); display: grid; gap: 12px; justify-items: center; }
.hx-state p { margin: 0; font-size: 14px; line-height: 1.45; }
.hx-state.small { padding: 14px 16px; border-top: 1px solid var(--line); }
.hx-state.small p { font-size: 12px; }
.hx-skel { height: 74px; border-top: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .08), transparent) 0 0 / 200% 100% no-repeat; animation: hxSk 1.2s linear infinite; }
.hx-skel:first-child { border-top: 0; }
@keyframes hxSk { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.hx-foot { margin-top: 10px; }
.hx-foot:empty { display: none; }
/* подробности */
.hx-detail h1 { margin: 0; font-size: 18px; }
.hx-dh { display: flex; align-items: center; gap: 12px; text-align: left; }
.hx-visual { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.hx-cap .capsule { width: 92px; }
.hx-arrow { color: var(--muted); font-size: 20px; }
.hx-item { width: 96px; height: 96px; border-radius: 18px; display: grid; place-items: center;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 35%, transparent), transparent); }
.hx-item .art { width: 88px; height: 88px; }
.hx-detail .pay-sum .plus { color: var(--plus); }
.hx-detail .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.hx-addr, .hx-hash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.hx-addr .label, .hx-hash .label { width: 100%; color: var(--muted); font-size: 12px; }
.hx-addr .mono, .hx-hash .mono { flex: 1; min-width: 0; }
.hx-addr .mono.wrap { word-break: break-all; flex-basis: 100%; }
.hx-detail .pay-sum .label { white-space: nowrap; }
.hx-detail .chip { cursor: pointer; }
@media (max-width: 420px) { .hx-right { max-width: 42%; } .hx-t { font-size: 13px; } .hx-cap .capsule { width: 76px; } .hx-item { width: 80px; height: 80px; } .hx-item .art { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) { .hx-row { animation: none; } .hx-skel { animation-duration: 3s; } }

/* ---------- вывод Telegram Stars ---------- */
.swd-sum { margin-top: 10px; }
.swd-sum .row { padding: 11px 14px; }
.swd-row .grow > div:first-child { font-size: 14px; }
.swd-bal { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 14px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(124, 58, 237, .06)); box-shadow: inset 0 0 0 1px var(--card-edge); }
.swd-bal span { color: var(--muted); font-size: 13px; }
.swd-bal b { font-size: 18px; }
.swd-lbl { display: block; text-align: left; font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.swd-input { position: relative; }
.swd-input .field { width: 100%; font-size: 20px; font-weight: 800; padding-right: 64px; }
.swd-input span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; pointer-events: none; }
.swd-presets { margin: 8px 0 0; padding: 0; }
.swd-facts { list-style: none; margin: 12px 0 0; padding: 10px 12px; display: grid; gap: 4px; text-align: left; font-size: 12px; color: var(--muted);
  border-radius: 12px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.swd-to { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); }
.swd-to small { color: var(--muted); font-size: 12px; }
#swdTo { width: 100%; }
.swd-hint { text-align: left; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.swd-warn { color: #FACC15; font-size: 13px; text-align: left; margin: 12px 0 0; }
.sheet-body .tu-err { margin-top: 12px; }
.swd-row { align-items: flex-start; }
.swd-row .swd-reason { white-space: normal; color: #FDA4AF; }
.swd-row .hx-ic svg { stroke: var(--gold); }

/* TON: адрес, сеть и инструкция депозита */
.tdep-info { display: grid; gap: 6px; padding: 10px 12px; margin-bottom: 10px; border-radius: 12px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.tdep-info > div { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tdep-info span { color: var(--muted); flex: 1; }
.tdep-info .mono, .pay-sum .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.tdep-steps { margin: 0 0 12px; padding-left: 20px; text-align: left; font-size: 12px; line-height: 1.5; color: var(--muted); display: grid; gap: 4px; }
.pay-sum .chip { padding: 3px 8px; font-size: 11px; }

a.pay-cta { text-decoration: none; color: inherit; }

/* ---------- выбор языка при первом запуске ---------- */
.lp { text-align: center; display: grid; gap: 14px; }
.lp-mark { width: 72px; height: 72px; margin: 4px auto 0; overflow: visible; filter: drop-shadow(0 0 14px rgba(155, 77, 255, .7)); animation: lpFloat 3.2s ease-in-out infinite; }
@keyframes lpFloat { 50% { transform: translateY(-4px) rotate(-4deg); } }
.lp h1 { margin: 0; font-size: 22px; display: grid; gap: 4px; }
.lp h1 span { font: 600 14px var(--body); color: var(--muted); }
.lp-list { display: grid; gap: 10px; margin-top: 4px; }
.lp-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 16px; text-align: left; color: var(--text);
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background .2s, transform .15s; }
.lp-opt:active { transform: scale(.985); }
.lp-opt b { display: block; font-size: 16px; }
.lp-opt small { color: var(--muted); font-size: 12px; }
.lp-code { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 14px var(--display); letter-spacing: .06em;
  background: linear-gradient(160deg, rgba(168, 85, 247, .35), rgba(67, 56, 202, .25)); box-shadow: inset 0 0 0 1px var(--card-edge); }
.lp-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .2s, background .2s; }
.lp-opt[aria-pressed="true"] { background: rgba(124, 58, 237, .22); box-shadow: inset 0 0 0 2px var(--glow), 0 0 22px -8px var(--glow); }
.lp-opt[aria-pressed="true"] .lp-dot { background: var(--glow); box-shadow: inset 0 0 0 5px #2A1250, 0 0 10px var(--glow); }
.lp-note { margin: 0; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .lp-mark { animation: none; } }

/* ---------- пополнение: три вкладки ---------- */
.tu-tabs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.tu-tabs3 button { display: grid; justify-items: center; gap: 4px; padding: 9px 4px; font-size: 12.5px; line-height: 1.15; }
.tu-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tu-tabs3 [data-tab="buy"] .tu-ic svg { fill: currentColor; stroke: none; }
.swd-buy-link { display: block; width: 100%; margin-top: 10px; color: #C4B5FD; font-size: 13px; font-weight: 600; text-align: center; background: none; }

/* ---------- «Купить Stars» через бота ---------- */
.buy { display: grid; gap: 12px; text-align: left; }
.buy-hero { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(250, 204, 21, .16), transparent 55%), linear-gradient(135deg, rgba(124, 58, 237, .32), rgba(67, 56, 202, .1));
  box-shadow: inset 0 0 0 1px var(--card-edge), var(--card-shadow); }
.buy-hero h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.25; }
.buy-hero p { margin: 0; color: #CFC6EE; font-size: 13px; line-height: 1.5; }
.buy-star { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, #FFE58A, #F59E0B); box-shadow: 0 0 24px -4px rgba(250, 204, 21, .7); }
.buy-star svg { width: 28px; height: 28px; fill: #3B1A00; }
.buy h3.sub { margin: 4px 0 0; }
.buy-methods { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 360px) { .buy-methods { grid-template-columns: minmax(0, 1fr); } }
.buy-m { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--text);
  background: linear-gradient(135deg, var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.buy-m:hover { box-shadow: inset 0 0 0 1px var(--glow), 0 0 18px -6px var(--glow); transform: translateY(-1px); }
.buy-m:active { transform: scale(.98); }
.buy-m b { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-m-go { color: var(--muted); }
.buy-m-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.buy-m-ic svg { width: 26px; height: 26px; }
.m-sbp .buy-m-ic { background: linear-gradient(135deg, #22C55E, #3B82F6 55%, #A855F7); }
.m-sbp2 .buy-m-ic { background: linear-gradient(135deg, #F59E0B, #EC4899 55%, #8B5CF6); }
.m-ton .buy-m-ic { background: linear-gradient(160deg, #38BDF8, #0284C7); }
.m-usdt .buy-m-ic { background: linear-gradient(160deg, #34D399, #059669); }
.m-rocket .buy-m-ic { background: linear-gradient(160deg, #818CF8, #4338CA); }
.m-cbot .buy-m-ic { background: linear-gradient(160deg, #60A5FA, #2563EB); }
.buy-note { margin: 0; }
.buy-cta { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; height: 54px; font-size: 16px;
  box-shadow: 0 10px 30px -10px rgba(124, 58, 237, .9), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.buy-cta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.buy-open { margin: -4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.buy-how { padding: 14px 16px; border-radius: 16px; background: var(--night); box-shadow: inset 0 0 0 1px var(--line); }
.buy-how h3 { margin: 0 0 8px; font-size: 15px; }
.buy-how ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13px; line-height: 1.45; color: #DCD4F5; }
.buy-how p { margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.buy-sep { padding: 12px 14px; border-radius: 14px; background: rgba(124, 58, 237, .1); box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .3); }
.buy-sep p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: #C4B5FD; }
@media (prefers-reduced-motion: reduce) { .buy-m { transition: none; } }

/* ---------- апгрейд: варианты шанса и «Настроить» ---------- */
.up-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 6px; }
.up-presets button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; padding: 6px 4px; border-radius: 14px;
  background: linear-gradient(160deg, var(--panel-2), var(--panel)); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s, box-shadow .2s, background .2s, transform .15s; }
.up-presets button b { font: 800 16px var(--body); color: var(--text); font-variant-numeric: tabular-nums; }
.up-presets button small { font-size: 10.5px; line-height: 1.1; white-space: nowrap; }
.up-presets button:hover { box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .6); }
.up-presets button:active { transform: scale(.97); }
.up-presets button[aria-pressed="true"] { background: rgba(124, 58, 237, .26); color: #E9D5FF; box-shadow: inset 0 0 0 2px var(--glow), 0 0 20px -6px var(--glow); }
.up-presets .up-cfg { padding: 6px 8px; color: #C4B5FD; }
.up-cfg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.up-note { margin: 2px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 370px) { .up-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } .up-presets .up-cfg { grid-column: 1 / -1; min-height: 40px; display: flex; justify-content: center; gap: 8px; } .up-presets .up-cfg small { font-size: 13px; font-weight: 700; } }
.up-modal { display: grid; gap: 12px; }
.up-modal h1 { margin: 0; }
.up-modal .pay-note { margin: 0; }
.up-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.up-field { position: relative; display: flex; align-items: center; gap: 8px; }
.up-field span { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #C4B5FD; background: rgba(124, 58, 237, .2); }
.up-field input { flex: 1; min-width: 0; font: 800 18px var(--body); padding-right: 30px; text-align: center; }
.up-field input.bad { box-shadow: inset 0 0 0 1.5px var(--danger); }
.up-field em { position: absolute; right: 12px; font-style: normal; font-weight: 800; color: var(--muted); pointer-events: none; }
.up-modal-act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.up-modal-act #upSave { grid-column: 1 / -1; order: -1; }

/* ---------- Telegram Gifts: пополнение и вывод подарками ---------- */
.tu-tabs4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tu-tabs4 button { font-size: 12px; padding: 9px 2px; }
.gf-hero .gf-star svg { fill: none; stroke: #3B1A00; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.gf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 4px 0 12px; }
.gf-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 8px 10px; border-radius: 16px;
  background: var(--panel); border: 1.5px solid var(--line); text-align: center; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gf-card:not([disabled]):active { transform: scale(.97); }
.gf-card[aria-checked="true"] { border-color: var(--violet); box-shadow: 0 0 18px rgba(124, 58, 237, .45); background: color-mix(in srgb, var(--violet) 14%, var(--panel)); }
.gf-card[disabled] { opacity: .45; cursor: default; }
.gf-n { font-size: 13px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-p { font-size: 13px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 3px; }
.gf-p small { color: var(--muted); font-weight: 500; }
.gf-tag { font-size: 11px; color: #C4B5FD; }
.gf-tag.off { color: var(--muted); }
.gf-tag.order, .gf-order { color: #fbbf24; }
.gf-order-note { margin-top: 8px; color: #fde68a; }
.gf-pic { display: grid; place-items: center; width: 64px; height: 64px; flex: none; }
.gf-pic img, .gf-pic .tgs { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.gf-pic > svg, .gf-pic .tgs-fb svg { width: 60%; height: 60%; fill: none; stroke: #C4B5FD; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.gf-row .gf-pic { width: 40px; height: 40px; }
.gf-op { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 4px 0 12px; border-radius: 16px; background: var(--panel); text-align: left; }
.gf-op .grow { display: grid; gap: 2px; min-width: 0; }
.gf-op .gf-pic { width: 56px; height: 56px; }
.gf-steps { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; text-align: left; color: var(--text); }
.gf-steps li::marker { color: #C4B5FD; font-weight: 700; }
.gf-tg { margin: 0 0 12px; }
.gf-msg { margin-bottom: 10px; }
.gf-load { text-align: center; }
#giftBox:empty { display: none; }
@media (max-width: 380px) { .gf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tu-tabs4 button { font-size: 11px; } }
.gf-rn { display: block; font-weight: 500; font-size: 12px; color: var(--muted); }

/* ---------- Кошелёк: «Пополнение» и «Вывод» ---------- */
.wal-bal { display: flex; align-items: center; gap: 8px; padding: 14px 16px; margin: 0 0 12px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .28), rgba(26, 19, 48, .9)); box-shadow: inset 0 0 0 1px rgba(181, 123, 255, .28); flex-wrap: wrap; }
.wal-bal .label { flex: 1; }
.wal-bal b { font-size: 24px; }
.wal-dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin: 0 0 12px; }
.wal-dir button { padding: 10px; font-size: 15px; }
.wal-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.wal-methods.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wal-methods.n1 { grid-template-columns: minmax(0, 1fr); }
.wal-m { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 8px 12px; min-width: 0; text-align: center;
  border-radius: 16px; background: var(--panel); border: 1.5px solid var(--line); transition: border-color .15s, box-shadow .15s, transform .12s; }
.wal-m:active { transform: scale(.98); }
.wal-m.on { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, var(--panel)); box-shadow: 0 0 20px rgba(124, 58, 237, .4); }
.wal-m.dim .wal-ic { opacity: .5; }
.wal-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--panel-2); color: #C4B5FD; }
.wal-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.wal-ic.m-stars svg { fill: #FACC15; stroke: none; }
.wal-ic.m-gifts { color: #FFD34F; }
.wal-ic.m-crypto { color: #4FB6FF; }
.wal-mt { display: grid; gap: 3px; min-width: 0; }
.wal-mt b { font-size: 13.5px; line-height: 1.2; }
.wal-mt small { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.wal-tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 8px; background: rgba(168, 85, 247, .22); color: #E9D5FF; }
.wal-tag.off { background: var(--panel-2); color: var(--muted); }
.wal-panel { padding: 16px; border-radius: 20px; background: rgba(26, 19, 48, .72); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 18px; }
.wal-ph { margin: 0 0 12px; font-size: 17px; }
.wal-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin-bottom: 14px; }
.wal-sub button { font-size: 13px; padding: 8px 6px; }
.wal-panel .buy-hero { margin-bottom: 4px; }
.wal-hx h2 { margin-top: 6px; }
.wal-f { flex-wrap: wrap; margin-bottom: 8px; }
.wal-cta { display: grid; gap: 8px; }
a.pay-cta { text-decoration: none; color: inherit; }
.gf-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; }
.gf-tools .hx-search { margin: 0; }
.gf-sort { width: auto; max-width: 46vw; padding-right: 28px; }
.gf-empty { grid-column: 1 / -1; text-align: center; }
.gf-card.off { opacity: .55; }
.gf-detail { text-align: center; }
.gf-detail .gf-big { display: grid; place-items: center; margin: 4px auto 6px; }
.gf-detail .gf-big .gf-pic { width: 140px; height: 140px; }
.gf-detail h1 { margin: 4px 0 6px; }
.gf-desc { font-size: 14px; line-height: 1.5; margin: 8px 0 14px !important; }
.gf-detail .pay-sum { text-align: left; }
.gf-to { margin-bottom: 4px; }
@media (min-width: 760px) {
  .wal-methods { gap: 12px; }
  .wal-panel { padding: 22px; }
  .gf-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (max-width: 380px) { .wal-mt small { display: none; } .gf-tools { grid-template-columns: minmax(0, 1fr); } .gf-sort { max-width: none; width: 100%; } }

select.field, .gf-sort { -webkit-appearance: none; appearance: none; background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4B5FD' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
  color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 0 30px 0 12px; height: 42px; font: inherit; font-size: 14px; }
.wal-panel .pay-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 12px; }
.wal-panel .tu-msg p { color: var(--muted); }


/* =====================================================================
   Экономный режим графики (html.lite): слабые телефоны и «Экономия трафика».
   Включается автоматически (слабое устройство или низкий FPS) или вручную в профиле.
   Оставляем всё, что несёт смысл (вращение рулетки, раскрытие, статусы), убираем дорогое:
   размытие под стеклом, живой фон, бесконечные декоративные анимации и тени-фильтры.
   ===================================================================== */
html.lite .bg-glow, html.lite .bg-dust, html.lite .w-flow { display: none !important; }
html.lite .bg-fx *, html.lite .bg-fx::before, html.lite .bg-fx::after { animation: none !important; will-change: auto !important; }
html.lite .bg-fx { background: radial-gradient(60% 40% at 0% 0%, rgba(124, 58, 237, .22), transparent 70%), radial-gradient(60% 40% at 100% 100%, rgba(217, 70, 239, .16), transparent 70%); }
html.lite *, html.lite *::before, html.lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.lite .top { background: rgba(11, 7, 21, .97); }
html.lite .tabs { background: #0D091C; }
html.lite .rv-close { background: rgba(20, 13, 38, .95); }
html.lite .capsule.big, html.lite .capsule.big[data-fx], html.lite .daily .capsule.daily-c, html.lite .cap-aura,
html.lite .icard .art img, html.lite .icard .art .tgs, html.lite .ccard .art img, html.lite .rv-stage .art img, html.lite .rv-rays,
html.lite .logo-core, html.lite .daily[data-state="ready"]::after, html.lite .daily-timer .dot, html.lite .daily[data-state="ready"] .daily-btn,
html.lite .lp-mark, html.lite .mcell.pending { animation: none !important; }
html.lite .cap-ring, html.lite .cap-sparks { display: none !important; }
html.lite .logo-mark, html.lite .balance .star, html.lite .dial-arc, html.lite .needle path, html.lite .lp-mark, html.lite .ccard.locked .art,
html.lite .mcell.open.gem svg, html.lite .mcell.open.mine.hit svg { filter: none !important; }
html.lite .capsule.charging .cap-half { filter: brightness(1.2) !important; }
html.lite .case-card::before { opacity: .35; }
html.lite .sk, html.lite .hx-sk { animation-duration: 2.4s; }
/* длинные списки: браузер не рисует то, что за экраном */
html.lite .case-card, html.lite .hx-row, html.lite .icard, html.lite .gf-card { content-visibility: auto; contain-intrinsic-size: auto 200px; }
/* статичный кадр анимации TGS (экономный режим и миниатюры) */
.tgs .tgs-still { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* рулетка: маска по краям заменяется наложенным градиентом — движущуюся ленту не приходится маскировать каждый кадр */
html.lite .reel { -webkit-mask-image: none; mask-image: none; }
html.lite .reel::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, var(--panel), rgba(26, 19, 48, 0) 16%, rgba(26, 19, 48, 0) 84%, var(--panel)); }
html.lite .reel::after { box-shadow: 0 0 8px 1px var(--glow); }
html.lite .tile.win { box-shadow: none; }
.gfx-row small { display: block; font-size: 12px; margin-top: 2px; }
.wal-split { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.wal-split span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: rgba(11, 7, 21, .45); min-width: 0; }
.wal-split small { font-size: 11px; color: var(--muted); }
.wal-split b { font-size: 15px; }
.wal-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: #FDE68A; }

/* окно «подпишитесь на канал» при активации промокода */
.sub-sheet { display: grid; gap: 12px; text-align: center; padding: 6px 2px 4px; }
.sub-sheet .sub-ic { font-size: 40px; line-height: 1; filter: drop-shadow(0 0 18px rgba(168, 85, 247, .55)); }
.sub-sheet h1 { margin: 0; font-size: 20px; }
.sub-sheet p { margin: 0; line-height: 1.45; }
.sub-sheet .sub-warn { color: #fbbf24; font-weight: 600; }
.sub-sheet .btn.loading { opacity: .6; pointer-events: none; }

/* живые цены NFT-подарков (по рынку) */
.gf-live { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; font-size: 12px; color: var(--muted, #a59cc7); }
.gf-live .dot, .gf-livedot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: gfPulse 2s infinite; flex: none; }
.gf-livedot { display: inline-block; margin-left: 5px; vertical-align: middle; }
@keyframes gfPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
html.lite .gf-live .dot, html.lite .gf-livedot { animation: none; }
@media (prefers-reduced-motion: reduce) { .gf-live .dot, .gf-livedot { animation: none; } }

/* ---------- Камень, ножницы, бумага: тёмная сине-графитовая сцена ---------- */
.rps { --rps-bg: #121826; --rps-panel: #1a2234; --rps-edge: rgba(120, 150, 210, .16); --rps-glow: #5b8cff; }
.rps .case-head .chip { margin-left: auto; }
.rps-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px 6px; scrollbar-width: none; }
.rps-strip::-webkit-scrollbar { display: none; }
.rps-step { flex: none; display: grid; justify-items: center; gap: 6px; width: 62px; }
.rps-card { width: 56px; height: 64px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(180deg, #1f2940, #161d2e);
  box-shadow: inset 0 0 0 1px var(--rps-edge); color: #7d8bab; font: 800 18px var(--display); transition: transform .25s, box-shadow .25s, background .25s; }
.rps-card svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rps-x { font: 700 12px var(--display); color: #7d8bab; }
.rps-step.done .rps-card { color: #34d399; background: linear-gradient(180deg, #17352f, #13241f); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35); }
.rps-step.done .rps-x { color: #34d399; }
.rps-step.cur .rps-card { color: #fff; transform: translateY(-2px); background: linear-gradient(180deg, #2a3a63, #1b2643); box-shadow: inset 0 0 0 1.5px var(--rps-glow), 0 8px 22px -8px rgba(91, 140, 255, .8); }
.rps-step.cur .rps-x { color: #fff; }
.rps-step.won .rps-card { color: #fbbf24; box-shadow: inset 0 0 0 1.5px #fbbf24, 0 8px 22px -8px rgba(251, 191, 36, .7); }
.rps-step.lost .rps-card { color: #f87171; box-shadow: inset 0 0 0 1.5px #f87171; }
.rps-stage { position: relative; padding: 18px 14px 14px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #1d2840 0%, var(--rps-bg) 70%);
  box-shadow: inset 0 0 0 1px var(--rps-edge), 0 18px 40px -26px rgba(0, 0, 0, .9); margin-bottom: 12px; transition: box-shadow .3s; }
.rps-stage[data-state="running"] { box-shadow: inset 0 0 0 1.5px rgba(91, 140, 255, .5), 0 18px 40px -26px rgba(91, 140, 255, .55); }
.rps-stage[data-res="win"] { box-shadow: inset 0 0 0 1.5px rgba(52, 211, 153, .6), 0 18px 44px -24px rgba(52, 211, 153, .55); }
.rps-stage[data-res="lose"] { box-shadow: inset 0 0 0 1.5px rgba(248, 113, 113, .6), 0 18px 44px -24px rgba(248, 113, 113, .45); }
.rps-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.rps-side { display: grid; justify-items: center; gap: 6px; }
.rps-side .label { color: #8fa0c4; font-size: 12px; font-weight: 600; }
.rps-hand { width: min(30vw, 120px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 26px; background: var(--rps-panel); box-shadow: inset 0 0 0 1px var(--rps-edge); transition: transform .3s, box-shadow .3s; }
.rps-hand svg { width: 72%; height: 72%; }
.rps-hand.opp svg:not(.ph) { transform: scaleX(-1); }
.rps-hand.r-win { box-shadow: inset 0 0 0 2px #34d399, 0 0 30px -6px rgba(52, 211, 153, .7); transform: scale(1.06); animation: rpsPop .45s ease-out; }
.rps-hand.r-lose { opacity: .55; transform: scale(.94); }
.rps-hand.r-draw { box-shadow: inset 0 0 0 2px #8fa0c4; }
.rps-vs { font: 800 15px var(--display); color: #5d6b8c; letter-spacing: .08em; }
.rps-stage.shaking .rps-hand { animation: rpsShake .65s ease-in-out; }
.rps-stage.shaking .rps-hand.opp { animation-delay: .04s; }
@keyframes rpsShake { 0%, 100% { transform: translateY(0) rotate(0); } 15%, 48%, 81% { transform: translateY(-12px) rotate(-6deg); } 32%, 65% { transform: translateY(4px) rotate(3deg); } }
@keyframes rpsPop { 0% { transform: scale(.9); } 60% { transform: scale(1.12); } 100% { transform: scale(1.06); } }
.rps-msg { min-height: 22px; margin: 12px 0 4px; text-align: center; font-weight: 700; color: #c7d2ea; }
.rps-stage[data-res="win"] .rps-msg { color: #34d399; }
.rps-stage[data-res="lose"] .rps-msg { color: #f87171; }
.rps-now { display: flex; justify-content: center; align-items: baseline; gap: 10px; }
.rps-now .num { font-size: 26px; }
.rps-now .num.up { color: var(--plus); }
.rps-now .num.down { color: var(--danger); }
.rps-now .label { color: #8fa0c4; font-size: 12px; }
.rps-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rps-pick { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border: 0; border-radius: 20px; color: #dbe4f7; cursor: pointer;
  background: linear-gradient(180deg, #222d47, #182034); box-shadow: inset 0 0 0 1px var(--rps-edge), 0 10px 24px -18px rgba(0, 0, 0, .9); transition: transform .15s, box-shadow .2s, opacity .2s; }
.rps-pick .rps-pic { width: 100%; max-width: 78px; aspect-ratio: 1; display: grid; place-items: center; }
.rps-pick .rps-pic svg { width: 100%; height: 100%; }
.rps-pick b { font: 700 13px var(--display); }
.rps-pick:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--rps-glow), 0 12px 26px -16px rgba(91, 140, 255, .8); }
.rps-pick:not(:disabled):active { transform: scale(.96); }
.rps-pick:disabled { opacity: .45; cursor: default; }
.rps-demo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.rps-demo-tag { color: #fbbf24; }
.rps-rules p { line-height: 1.5; color: var(--muted); }
.rps-rule-row { display: flex; justify-content: center; gap: 14px; margin: 6px 0 14px; flex-wrap: wrap; }
.rps-rule-row span { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.rps-rule-row i, .rps-mini i { display: inline-grid; width: 28px; height: 28px; }
.rps-rule-row i svg, .rps-mini i svg { width: 100%; height: 100%; }
.rps-seq { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.rps-mini { display: inline-flex; gap: 1px; padding: 2px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.rps-mini i { width: 18px; height: 18px; }
.rps-mini.win { box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .5); }
.rps-mini.lose { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); }
html.lite .rps-stage.shaking .rps-hand, html.lite .rps-hand.r-win { animation: none; }
@media (prefers-reduced-motion: reduce) { .rps-stage.shaking .rps-hand, .rps-hand.r-win { animation: none; } }
.rps .case-head h1 { font-size: 18px; line-height: 1.2; }

/* ---------- Chicken Road: спокойный сине-графитовый минимализм ---------- */
.ck { --ck-bg: #11212d; --ck-panel: #172b39; --ck-lane: #1a3242; --ck-lane2: #1d3747; --ck-edge: rgba(160, 190, 210, .14); --ck-text: #dbe7ef; --ck-muted: #8aa1b1; --ck-ok: #5cc98a; --ck-hit: #e2524b;
  background: var(--ck-bg); border-radius: 22px; padding: clamp(8px, 3cqi, 12px); container-type: inline-size; min-width: 0; color: var(--ck-text); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.ck .case-head { margin-bottom: 10px; gap: 8px; }
.ck .case-head h1 { font-size: 18px; line-height: 1.2; }
.ck .chip { background: var(--ck-panel); border-color: var(--ck-edge); color: var(--ck-text); text-decoration: none; }
.ck-field { position: relative; overflow-x: auto; overflow-y: hidden; border-radius: 18px; background: var(--ck-panel); box-shadow: inset 0 0 0 1px var(--ck-edge); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ck-field::-webkit-scrollbar { display: none; }
.ck-road { position: relative; display: flex; height: 300px; min-width: max-content; }
.ck-start { position: relative; flex: 0 0 104px; background: #20384a; border-right: 4px solid #2c4a5e; }
.ck-curb { position: absolute; right: -4px; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(#cbd5e1 0 12px, #8ea2b1 12px 24px); }
.ck-light { position: absolute; left: 10px; top: 16px; width: 20px; }
.ck-post { position: absolute; width: 10px; } .ck-post.p1 { left: 12px; bottom: 76px; } .ck-post.p2 { left: 40px; bottom: 120px; }
.ck-lane { position: relative; flex: 0 0 92px; background: var(--ck-lane); transition: background .35s; }
.ck-lane:nth-child(odd) { background: var(--ck-lane2); }
.ck-lane::after { content: ''; position: absolute; right: -1px; top: 10px; bottom: 74px; border-right: 2px dashed rgba(203, 213, 225, .22); }
.ck-lane.done { background: #22404f; }
.ck-lane.cur { background: #24465a; }
.ck-dot { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #2a4556; box-shadow: inset 0 0 0 2px rgba(160, 190, 210, .18), 0 3px 8px rgba(0, 0, 0, .3); transition: background .3s, box-shadow .3s, transform .3s; }
.ck-dot i { font-style: normal; font-weight: 700; font-size: 13px; color: var(--ck-muted); }
.ck-x { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 13px; font-weight: 700; color: #5f7787; font-variant-numeric: tabular-nums; }
.ck-lane.done .ck-dot { background: #2f6a52; box-shadow: inset 0 0 0 2px rgba(92, 201, 138, .55); }
.ck-lane.done .ck-dot i { color: #d8f5e4; }
.ck-lane.done .ck-x { color: #9fd9b6; }
.ck-lane.cur .ck-dot { background: #345a70; box-shadow: inset 0 0 0 2px #8fb7cf, 0 0 0 4px rgba(143, 183, 207, .15); transform: translateX(-50%) scale(1.08); }
.ck-lane.cur .ck-dot i, .ck-lane.cur .ck-x { color: #eef6fb; }
.ck-lane.won .ck-dot { background: var(--ck-ok); } .ck-lane.won .ck-dot i { color: #0e2a1c; }
.ck-lane.hit .ck-dot { background: #6b2f2c; box-shadow: inset 0 0 0 2px var(--ck-hit); } .ck-lane.hit .ck-x { color: #f0a29d; }
.ck-bar { position: absolute; left: 50%; top: 18px; width: 64px; transform: translate(-50%, -30px); opacity: 0; transition: transform .35s ease-out, opacity .35s; }
.ck-lane.done .ck-bar { transform: translate(-50%, 0); opacity: 1; }
.ck-car { position: absolute; left: 50%; top: 0; width: 46px; transform: translate(-50%, -110px); opacity: 0; }
.ck-lane.car-go .ck-car { animation: ckCar .45s cubic-bezier(.5, 0, .6, 1) forwards; }
.ck-lane.hit .ck-car { opacity: 1; transform: translate(-50%, 92px); }
.ck-finish { flex: 0 0 64px; background: repeating-conic-gradient(#20384a 0 25%, #2b4a5d 0 50%) 0 0 / 16px 16px; display: grid; place-items: center; font-size: 22px; }
.ck-hen { position: absolute; left: 0; top: 118px; width: 64px; height: 64px; transition: transform .45s cubic-bezier(.3, .7, .3, 1); z-index: 2; will-change: transform; }
.ck-hen svg { width: 100%; height: 100%; }
.ck-hen.hop svg { animation: ckHop .45s ease-out; }
.ck-hen.dead svg { animation: ckHitHen .4s ease-out forwards; }
@keyframes ckHop { 0% { transform: translateY(0) scaleY(1); } 35% { transform: translateY(-26px) scaleY(1.04); } 70% { transform: translateY(0) scaleY(.92); } 100% { transform: none; } }
@keyframes ckCar { from { transform: translate(-50%, -110px); opacity: 1; } to { transform: translate(-50%, 92px); opacity: 1; } }
@keyframes ckHitHen { to { transform: rotate(-80deg) translate(-6px, 10px) scale(.9); opacity: .55; filter: grayscale(.6); } }
.ck-now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.ck-now > div { background: var(--ck-panel); border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--ck-edge); min-width: 0; }
.ck-now .label { display: block; font-size: 11px; color: var(--ck-muted); }
.ck-now .num { font-size: 18px; font-variant-numeric: tabular-nums; } .ck-now .num.up { color: var(--ck-ok); } .ck-now .num.down { color: var(--ck-hit); }
.ck-msg { min-height: 20px; margin: 4px 2px 8px; color: var(--ck-muted); font-size: 14px; }
.ck-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.ck-modes button { padding: 10px 6px; border-radius: 12px; border: 0; background: var(--ck-panel); color: var(--ck-muted); font: inherit; font-weight: 700; box-shadow: inset 0 0 0 1px var(--ck-edge); cursor: pointer; }
.ck-modes button[aria-checked="true"] { background: #2a4b60; color: #fff; box-shadow: inset 0 0 0 2px #8fb7cf; }
.ck-modes button:disabled { opacity: .55; cursor: default; }
.ck-terms { font-size: 12px; color: var(--ck-muted); margin: 8px 2px; line-height: 1.4; }
.ck .bet-input, .ck .sq { background: var(--ck-panel); box-shadow: inset 0 0 0 1px var(--ck-edge); }
.ck .btn:not(.ghost):not(.green) { background: #3d6e8c; box-shadow: none; }
.ck .btn.green { background: #3fa46f; box-shadow: none; color: #fff; }
.ck-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 14px; }
.ck-table th, .ck-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid rgba(160, 190, 210, .14); }
.ck-filters { display: grid; gap: 8px; margin-bottom: 12px; }
.ck-hrow b { font-size: 14px; }
@media (min-width: 900px) { .ck-road { height: 340px; } .ck-hen { top: 136px; } .ck-lane { flex-basis: 104px; } }
html.lite .ck-hen.hop svg, html.lite .ck-lane.car-go .ck-car { animation-duration: .01s; }
@media (prefers-reduced-motion: reduce) { .ck-hen, .ck-bar { transition: none; } .ck-hen.hop svg { animation: none; } }
.ck .rows .row { background: var(--ck-panel); box-shadow: inset 0 0 0 1px var(--ck-edge); border-color: transparent; }
.ck-hrow { align-items: flex-start; gap: 10px; }
.ck-hrow > div:last-child { flex: 0 0 auto; max-width: 38%; }
.ck-hrow > div:last-child .label { font-size: 11px; display: block; }
.ck .chips button { background: var(--ck-panel); border-color: var(--ck-edge); color: var(--ck-muted); }
.ck .chips button[aria-pressed="true"] { background: #2a4b60; border-color: #8fb7cf; color: #fff; box-shadow: none; }
.ck-hrow .up { color: var(--ck-ok); font-weight: 600; } .ck-hrow .down { color: var(--ck-hit); font-weight: 600; }

/* ---------- единые адаптивные правила игр (все игры используют .controls / .duo / .bet-row) ---------- */
/* Причина переполнения была в сетках: дорожка 1fr = minmax(auto, 1fr) растягивалась под min-content
   кнопок с white-space: nowrap и выталкивала всю панель за экран. Теперь дорожки minmax(0, …),
   большие кнопки переносят текст, а пары действий сами встают столбиком, когда им тесно. */
#view > * { min-width: 0; max-width: 100%; }
.ck-modes button { min-width: 0; min-height: 44px; overflow-wrap: anywhere; line-height: 1.15; }
#cBtns { --act-min: 200px; }                 /* курица: «Забрать» и «Следующий шаг» в ряд только если обе целиком помещаются */
.ck-now .num { overflow-wrap: anywhere; }
@container (max-width: 300px) { .ck-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 340px) {
  .bet-row { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 5px; }
  .bet-row .sq { height: 48px; }
  .bet-input { padding: 0 10px; }
}
@container (max-width: 360px) {
  .ck-now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-now > div:first-child { grid-column: 1 / -1; }
}
@container (max-width: 300px) { .rps-picks b { font-size: 12px; } }
/* ввод ставки с клавиатуры в Telegram: поле не должно прятаться под клавиатурой */
.controls input { scroll-margin: 120px 0; }
/* история раундов во всех играх: правая колонка (сумма и проверка) не сжимает описание до столбика */
.rows.hist .row { align-items: flex-start; gap: 10px; }
.rows.hist .row > div:last-child { flex: 0 1 auto; max-width: 42%; min-width: 0; overflow-wrap: anywhere; }
.rows.hist .row > div:last-child .label { font-size: 11px; display: block; line-height: 1.25; }

/* ---------- игра целиком на экране телефона (html.fit, высоту считает fitGame) ---------- */
/* .g-fit — игровой блок высотой с видимую область; .g-stage — поле игры, которое сжимается;
   всё остальное (шапка, ставка, кнопки) — фиксированной высоты и всегда видно. */
html.fit .g-fit { display: flex; flex-direction: column; gap: 8px; height: var(--fit-h, auto); }
html.fit .g-fit > * { flex: none; margin-top: 0; margin-bottom: 0; }
html.fit .g-fit > .g-stage { flex: 1 1 0; min-height: 90px; container-type: size; display: grid; place-items: center; }
html.fit .g-fit .case-head { margin: 0; gap: 10px; min-height: 38px; }
html.fit .g-fit .case-head h1 { font-size: 20px; }
html.fit .g-fit .back { width: 36px; height: 36px; }
html.fit .g-fit .controls { gap: 8px; }
html.fit .g-fit .btn.block { min-height: 50px; }
html.fit .g-fit + h2 { margin-top: 22px; }
/* апгрейд: круг вписывается в поле */
html.fit .g-stage .dial-wrap { width: min(100cqw, 100cqh, 300px); margin: 0 auto; }
html.fit .g-fit .up-presets button { min-height: 48px; padding: 4px; }
/* краш: график занимает всё поле */
html.fit .g-stage .crash-box { width: 100%; height: 100%; margin: 0; }
html.fit .g-fit .last { min-height: 26px; }
html.fit .g-fit .hint { margin: -2px 0 0; }
/* мины: квадратное поле по меньшей стороне */
html.fit .g-stage .mines-grid { width: min(100cqw, 100cqh); margin: 0 auto; gap: clamp(4px, 1.6cqh, 8px); padding: clamp(6px, 2cqh, 10px); }
html.fit .g-stage .mcell { border-radius: clamp(8px, 2.4cqh, 12px); }
html.fit .g-fit .mines-top .mstat { padding: 6px; }
html.fit .g-fit .mines-top .num { font-size: 16px; }
/* КНБ: карточки рук по высоте поля */
html.fit .g-stage .rps-stage { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; }
html.fit .g-stage .rps-hand { width: min(30vw, 120px, calc(100cqh - 112px)); border-radius: clamp(14px, 6cqh, 26px); }
html.fit .g-stage .rps-msg { margin: 8px 0 2px; }
html.fit .g-fit .rps-strip { padding: 2px 2px 6px; }
html.fit .g-fit .rps-card { height: 54px; }
html.fit .g-fit .rps-picks { gap: 8px; }
html.fit .g-fit .rps-pick { padding: 8px 6px; gap: 4px; }
html.fit .g-fit .rps-pick .rps-pic { max-width: 56px; }
/* курица: дорожка по высоте поля, курица — посередине полосы */
html.fit .ck.g-fit { padding: 10px; gap: 8px; }
html.fit .g-stage .ck-field { width: 100%; height: 100%; }
html.fit .g-stage .ck-road { height: 100%; min-height: 0; }
.ck-hen { top: calc(50% - 46px); }
.ck-lane.car-go .ck-car { animation-name: ckCarTop; }
.ck-lane.hit .ck-car { transform: translate(-50%, 0); top: calc(50% - 30px); }
@keyframes ckCarTop { from { top: -90px; opacity: 1; transform: translate(-50%, 0); } to { top: calc(50% - 30px); opacity: 1; transform: translate(-50%, 0); } }
html.fit .ck .ck-now { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: 6px; }
html.fit .ck .ck-now > div { padding: 6px 8px; grid-column: auto; }
html.fit .ck .ck-now .label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fit .ck .ck-now .num { font-size: 16px; }
html.fit .ck .ck-msg { min-height: 0; margin: 0 2px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fit .ck .ck-modes { margin: 0; }
html.fit .ck .ck-modes button { min-height: 40px; padding: 6px 4px; }
html.fit .ck .ck-terms { margin: 0 2px; font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.fit #cBtns { --act-min: 130px; }
/* низкие экраны: убираем пояснения, остаётся игра и управление */
@media (max-height: 760px) {
  html.fit .g-fit .up-note, html.fit .g-fit .hint, html.fit .ck .ck-terms { display: none; }
  html.fit .g-fit .bet-row .sq, html.fit .g-fit .bet-input { height: 44px; }
  html.fit .g-fit .toggle, html.fit .g-fit .auto { height: 44px; }
  html.fit .g-fit .presets button { height: 34px; }
}
@media (max-height: 640px) {
  html.fit .g-fit .case-head h1 { font-size: 17px; }
  html.fit .g-fit .btn.block { min-height: 46px; font-size: 15px; }
  html.fit .g-fit .rps-strip .rps-x { font-size: 10px; }
  html.fit .g-fit .rps-card { height: 44px; width: 48px; }
  html.fit .g-fit .rps-pick b { display: none; }
}
@media (max-height: 620px) {
  /* очень низкий экран: заголовок без кнопок не нужен — назад ведут кнопка Telegram и нижняя навигация */
  html.fit .g-fit > .case-head:not(:has(.chip)) { display: none; }
  html.fit .g-fit .mines-top .mstat { padding: 4px 6px; }
  html.fit .g-fit .mines-top .label { font-size: 10px; }
  html.fit .g-fit .controls:has(.presets) > .auto:has(.stepper) { display: none; }  /* число мин — кнопками пресетов */
  html.fit .g-fit .rps-strip .rps-step { width: 52px; }
}
@media (max-height: 540px) {
  html.fit .g-fit .bet-row .sq, html.fit .g-fit .bet-input, html.fit .g-fit .toggle, html.fit .g-fit .auto { height: 40px; }
  html.fit .g-fit .btn.block { min-height: 44px; }
  html.fit .g-fit .up-presets button { min-height: 40px; }
  html.fit .g-fit .up-presets small, html.fit .ck .ck-msg, html.fit .g-fit .rps-msg:empty { display: none; }
  html.fit .g-fit .rps-card { height: 38px; width: 42px; }
  html.fit .g-fit .rps-pick .rps-pic { max-width: 40px; }
  html.fit .ck .ck-now .label { display: none; }
}

/* ---------- вкладка «Игры»: крупные карточки с картинками из «Медиафайлов» ---------- */
.gcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.gcard { --g1: #2b2160; --g2: #120d26; --gl: rgba(168, 85, 247, .35);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  min-height: 196px; padding: 14px 14px 16px; border-radius: 26px; color: var(--text); text-decoration: none;
  background: radial-gradient(120% 90% at 100% 0%, var(--gl), transparent 60%), linear-gradient(160deg, var(--g1), var(--g2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 34px -22px rgba(0, 0, 0, .9);
  transition: transform .18s ease, box-shadow .2s ease; -webkit-tap-highlight-color: transparent; }
.gcard:active { transform: scale(.975); }
@media (hover: hover) { .gcard:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 40px -22px var(--gl); } }
.gcard.wide { grid-column: 1 / -1; min-height: 172px; padding: 16px 18px 18px; }
.gcard-badge { position: relative; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2;
  background: rgba(8, 6, 20, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); backdrop-filter: blur(6px); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcard-title { position: relative; z-index: 2; margin-top: 6px; font: 800 clamp(19px, 5.4vw, 24px)/1.08 var(--body); letter-spacing: -.01em; max-width: 100%; overflow-wrap: anywhere; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.gcard.wide .gcard-title { font-size: clamp(22px, 6.6vw, 30px); max-width: 64%; }
.gcard-desc { position: relative; z-index: 2; margin-top: auto; font-size: 13px; line-height: 1.3; color: rgba(237, 233, 254, .62); max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard.wide .gcard-desc { max-width: 60%; }
/* картинка справа снизу, слегка уходит за край; под текстом — затемнение, чтобы он читался */
.gcard-img { position: absolute; z-index: 1; right: -10%; bottom: -8%; width: 78%; height: auto; max-height: 92%; object-fit: contain; object-position: right bottom; pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45)); transition: transform .3s ease; }
.gcard.wide .gcard-img { right: -2%; bottom: -10%; width: 46%; max-height: 118%; }
.gcard.has-img::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(6, 4, 16, .55), transparent 62%); }
@media (hover: hover) { .gcard:hover .gcard-img { transform: scale(1.04) rotate(-1deg); } }
.gcard-ico { position: absolute; z-index: 0; right: 12px; bottom: 12px; width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.gcard-ico svg { width: 34px; height: 34px; fill: none; stroke: rgba(237, 233, 254, .7); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gcard.wide .gcard-ico { width: 84px; height: 84px; right: 18px; bottom: 18px; }
/* свои цвета каждой игры */
.gcard.g-chicken { --g1: #23406a; --g2: #0d1a2e; --gl: rgba(96, 165, 250, .4); }
.gcard.g-upgrade { --g1: #24305f; --g2: #0e1229; --gl: rgba(99, 102, 241, .45); }
.gcard.g-mines { --g1: #1f4a3d; --g2: #0b1a16; --gl: rgba(52, 211, 153, .35); }
.gcard.g-crash { --g1: #5b2433; --g2: #1e0b12; --gl: rgba(248, 113, 113, .4); }
.gcard.g-rps { --g1: #3d2463; --g2: #140c25; --gl: rgba(192, 132, 252, .4); }
@media (max-width: 340px) { .gcards { gap: 10px; } .gcard { min-height: 176px; padding: 12px; border-radius: 22px; } .gcard-desc { font-size: 12px; } }
@media (min-width: 640px) { .gcards { gap: 16px; } .gcard { min-height: 230px; } .gcard.wide { min-height: 210px; } }
@media (min-width: 900px) { body.wide .gcards, .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.lite .gcard-badge { backdrop-filter: none; }
/* кнопки игр реагируют на касание без задержки двойного тапа и не выделяют текст */
.btn { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* ---------- Mine Drop: пиксельный стиль ---------- */
.md { --md-bg: #0b0a1a; --md-block: #4b4766; --md-pick: #a855f7; --md-btn: #7c3aed; --md-glow: #a855f7; --md-rows: 5;
  --md-u: calc(var(--md-rows) + 3.05); }
.px, .md img { image-rendering: pixelated; image-rendering: crisp-edges; }
.md .case-head h1 { font-size: 20px; }
.md-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.md-stats > div { min-width: 0; padding: 7px 10px; border-radius: 12px; background: #141a33; box-shadow: inset 0 0 0 2px #232a4d, inset 0 -3px 0 rgba(0, 0, 0, .35); }
.md-stats .label { display: block; font-size: 10.5px; color: #8b93c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-stats .num { font-size: 17px; }
.md-field { position: relative; width: 100%; aspect-ratio: 5 / var(--md-u); margin: 0 auto; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--md-bg) 55%, #141b3d), color-mix(in srgb, var(--md-bg) 70%, #0f1530) 40%, #0c0f22);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06), 0 0 0 2px color-mix(in srgb, var(--md-glow) 45%, transparent), 0 18px 40px -24px var(--md-glow); }
html.fit .g-stage .md-field { width: min(100cqw, calc(100cqh * 5 / var(--md-u))); }
/* небо и барабан */
.md-sky { position: absolute; left: 0; right: 0; top: 0; height: calc(100% * 2.2 / var(--md-u)); }
.md-stars i { position: absolute; width: 2px; height: 2px; background: #c9d2ff; opacity: .5; animation: mdTw 2.8s steps(2) infinite; }
@keyframes mdTw { 50% { opacity: .1; } }
.md-reel { position: absolute; left: 50%; top: 50%; width: calc(100% * 1.95 / 5); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #1e2540 0 54%, transparent 55%), repeating-conic-gradient(from 8deg, #5b6787 0 26deg, #3d4763 26deg 30deg);
  box-shadow: 0 0 0 4px #2b3350, 0 0 0 7px #4f5b7c, 0 0 0 9px #222842, 0 0 26px 6px color-mix(in srgb, var(--md-glow) 35%, transparent), inset 0 0 0 6px #4c5776, inset 0 0 0 9px #1a2036; }
.md-reel::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; box-shadow: inset 0 0 0 3px #57638a, inset 0 0 18px rgba(0, 0, 0, .6); pointer-events: none; }
.md-win { position: absolute; left: 50%; top: 50%; width: 34%; height: 78%; transform: translate(-50%, -50%); overflow: hidden; border-radius: 6px;
  background: #161b30; box-shadow: inset 0 0 0 2px #0c0f1e, 0 0 0 2px #59658a; }
.md-win::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 12, 26, .85), transparent 30%, transparent 70%, rgba(10, 12, 26, .85)); }
.md-strip { position: absolute; left: 0; right: 0; top: 0; height: 100%; will-change: transform; }
.md-slot { height: calc(100% / 3); display: grid; place-items: center; }
.md-slot img { width: 78%; height: 78%; object-fit: contain; }
.md-reel[data-tier] .md-win { transition: box-shadow .2s; }
.md-reel[data-tier="common"] .md-win { box-shadow: inset 0 0 0 2px #0c0f1e, 0 0 0 2px #9aa3b0, 0 0 14px #9aa3b0; }
.md-reel[data-tier="rare"] .md-win { box-shadow: inset 0 0 0 2px #0c0f1e, 0 0 0 2px #3b9cf5, 0 0 16px #3b9cf5; }
.md-reel[data-tier="epic"] .md-win { box-shadow: inset 0 0 0 2px #0c0f1e, 0 0 0 2px #b05cf0, 0 0 18px #b05cf0; }
.md-reel[data-tier="legendary"] .md-win { box-shadow: inset 0 0 0 2px #0c0f1e, 0 0 0 2px #f5c22e, 0 0 22px #f5c22e; }
.md-arrow { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); }
.md-arrow.l, .md-arrow.r { width: 13%; aspect-ratio: 1; border: 0; background: #59d35b; filter: drop-shadow(0 0 6px rgba(89, 211, 91, .7)); }
.md-arrow.l { left: 15%; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.md-arrow.r { right: 15%; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.md-reel.spin .md-arrow { animation: mdBlink .18s steps(2) infinite; }
@keyframes mdBlink { 50% { filter: brightness(1.6) drop-shadow(0 0 10px #59d35b); } }
.md-left { position: absolute; right: 8px; top: 8px; font: 700 12px var(--display); color: #c9d2ff; background: rgba(10, 12, 26, .6); padding: 3px 8px; border-radius: 8px; box-shadow: inset 0 0 0 2px #232a4d; }
/* земля */
.md-ground { position: absolute; left: 0; right: 0; bottom: 0; top: calc(100% * 2.2 / var(--md-u)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr); background: #120d0a; box-shadow: inset 0 3px 0 #2c4d1c; }
.md-col { display: grid; grid-template-rows: repeat(var(--md-rows), minmax(0, 1fr)) minmax(0, .85fr); min-width: 0; min-height: 0; overflow: hidden; }
.md-block { position: relative; background-size: 100% 100%; image-rendering: pixelated; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .08); transition: filter .1s; }
.md-crack { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; pointer-events: none; }
.md-hp { position: absolute; right: 3px; top: 2px; font: 700 10px var(--display); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; opacity: .8; }
.md-block.hurt { animation: mdHurt .14s steps(2); }
@keyframes mdHurt { 50% { transform: translateY(2px); filter: brightness(1.35); } }
.md-block.gone { animation: mdBreak .26s steps(4) forwards; }
@keyframes mdBreak { 0% { filter: brightness(1.5); } 100% { transform: scale(.25); opacity: 0; } }
.md-chest-slot { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: linear-gradient(180deg, #0f0b09, #070505); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.md-chest-slot.open { background: radial-gradient(60% 60% at 50% 55%, rgba(250, 204, 21, .45), transparent 70%), #0b0806; }
.md-chest { height: 86%; max-height: 100%; max-width: 92%; width: auto; object-fit: contain; filter: brightness(.45) saturate(.6); transition: filter .25s; }
.md-chest-slot.free .md-chest { filter: none; animation: mdFree .5s steps(4); }
.md-chest-slot.free { background: radial-gradient(60% 60% at 50% 55%, rgba(250, 204, 21, .22), transparent 70%), #0b0806; }
.md-chest-slot.shake .md-chest { animation: mdShake .12s steps(2) infinite; }
.md-chest-slot.open .md-chest { animation: mdChest .4s steps(5); filter: drop-shadow(0 0 8px rgba(250, 204, 21, .8)); }
@keyframes mdFree { 50% { transform: translateY(-12%); filter: brightness(1.5); } }
@keyframes mdShake { 50% { transform: translateX(6%) rotate(4deg); } }
@keyframes mdChest { from { transform: translateY(40%) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
/* кирка, искры, награды, итог */
.md-pick { position: absolute; left: 0; top: 0; z-index: 5; width: calc(100% / 5 * 0.9); aspect-ratio: 1; pointer-events: none; will-change: transform; }
.md-pick img { width: 100%; height: 100%; display: block; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .5)); transform-origin: 30% 80%; }
.md-pick.t-epic img { filter: drop-shadow(0 0 6px #b05cf0) drop-shadow(2px 3px 0 rgba(0, 0, 0, .5)); }
.md-pick.t-legendary img { filter: drop-shadow(0 0 8px #f5c22e) drop-shadow(2px 3px 0 rgba(0, 0, 0, .5)); }
.md-pick b { position: absolute; left: 4px; top: -6px; font: 800 11px var(--display); color: #fff; background: rgba(0, 0, 0, .65); border-radius: 6px; padding: 1px 5px; }
.md-pick.hit img { animation: mdSwing .11s steps(3); }
@keyframes mdSwing { 0% { transform: rotate(-35deg); } 100% { transform: rotate(8deg); } }
.md-pick.away { transition: opacity .22s !important; opacity: 0; }
.md-spark { position: absolute; z-index: 6; width: 7px; height: 7px; pointer-events: none; background-size: 400% 400%; background-position: 30% 40%; background-color: #8b5a34;
  image-rendering: pixelated; animation: mdSpark .6s cubic-bezier(.2, .6, .4, 1) forwards; }
.md-spark.gold { background: #ffd84a; box-shadow: 0 0 6px #f5c22e; } .md-spark.dim { opacity: .4; }
@keyframes mdSpark { 60% { opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) * -0.2 + 40px)) rotate(180deg); opacity: 0; } }
.md-pop { position: absolute; z-index: 7; transform: translate(-50%, 0); font: 800 13px var(--display); color: #ffe98a; text-shadow: 2px 2px 0 #000; pointer-events: none; animation: mdPop 1.05s steps(10) forwards; white-space: nowrap; }
.md-pop.gold { font-size: 16px; color: #ffd84a; }
@keyframes mdPop { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -38px); } }
.md-total { position: absolute; z-index: 8; left: 50%; top: calc(100% * 2.2 / var(--md-u) * .5); transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 10px 18px; border-radius: 10px;
  background: #141a33; box-shadow: 0 0 0 3px #59658a, 0 0 0 6px #1a2036, 0 0 30px -4px var(--md-glow); animation: mdChest .4s steps(5); }
.md-total .num { font-size: 26px; text-shadow: 2px 2px 0 #000; } .md-total .up { color: #59d35b; font-weight: 800; } .md-total .down { color: var(--danger); font-weight: 800; }
.md-field.big .md-total .num { color: #ffd84a; }
.md-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.md-speed { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--panel-2); flex: none; }
.md-speed button { padding: 6px 10px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--muted); }
.md-speed button[aria-pressed="true"] { background: var(--md-btn); color: #fff; }
.md-info { min-width: 0; font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.md .btn:not(.ghost) { background: var(--md-btn); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25); }
.md-mini { display: inline-block; width: 22px; height: 22px; vertical-align: middle; } .md-mini img { width: 100%; height: 100%; display: block; }
.md-mini.tex { background-size: 100% 100%; image-rendering: pixelated; border-radius: 3px; }
.md-rules h3 { margin: 14px 0 4px; font-size: 14px; }
html.fit .md.g-fit .md-stats .num { font-size: 15px; }
@media (max-height: 640px) { html.fit .md .md-info { display: none; } }
@media (prefers-reduced-motion: reduce) { .md-stars i { animation: none; } }
.md-hud { position: absolute; left: 8px; top: 8px; display: grid; gap: 1px; z-index: 3; text-shadow: 2px 2px 0 #000; }
.md-hud .num { font-size: clamp(16px, 5cqw, 22px); color: #ffe98a; }
.md-hud #dWin { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--display); color: #dfe5ff; }
.md-hud #dWin .star { width: 11px; height: 11px; }
.md-found { font: 700 11px var(--display); color: #8b93c0; }

/* ---------- Plinko ---------- */
.pk { --pk-field: #0b0716; --pk-peg: #c084fc; --pk-ball: #fbbf24; --pk-glow: #a855f7; --pk-low: #6366f1; --pk-mid: #ec4899; --pk-high: #f97316; --pk-top: #fbbf24; --pk-gi: 1; }
.pk .case-head h1 { font-size: 20px; }
.pk-board { position: relative; width: 100%; aspect-ratio: 1 / .95; border-radius: 22px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--pk-glow) calc(28% * var(--pk-gi)), transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--pk-field) 80%, #17112b), var(--pk-field));
  box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .18), 0 18px 44px -26px var(--pk-glow); }
html.fit .g-stage .pk-board { width: 100%; height: 100%; aspect-ratio: auto; }
.pk-board canvas { position: absolute; inset: 0; display: block; }
.pk-slots { position: absolute; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.pk-slot { display: grid; place-items: center; min-width: 0; border-radius: 6px; font: 800 var(--fs, 11px)/1 var(--display); color: #fff; letter-spacing: -.02em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff 8%), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 4px 10px -6px var(--c);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; white-space: nowrap; transition: transform .15s; }
.pk-slot.low { --c: var(--pk-low); } .pk-slot.low.dim { --c: color-mix(in srgb, var(--pk-low) 55%, #1e1b4b); }
.pk-slot.mid { --c: var(--pk-mid); } .pk-slot.high { --c: var(--pk-high); } .pk-slot.top { --c: var(--pk-top); color: #3b2300; text-shadow: none; }
.pk-slot.hit { animation: pkHit .45s ease-out; }
@keyframes pkHit { 0% { transform: translateY(0); filter: brightness(1); } 30% { transform: translateY(5px); filter: brightness(1.8); box-shadow: 0 0 18px var(--c); } 100% { transform: none; filter: none; } }
.pk-hud { position: absolute; left: 12px; top: 10px; display: grid; gap: 1px; pointer-events: none; }
.pk-hud .label { font-size: 10.5px; color: rgba(245, 243, 255, .55); }
.pk-hud .num { font-size: 18px; color: #f5f3ff; } .pk-hud .num.up { color: #fbbf24; } .pk-hud .num.down { color: #a5b4fc; }
.pk-hud #pWin { font-size: 12px; color: rgba(245, 243, 255, .8); font-weight: 700; }
.pk-fly { position: absolute; right: 12px; top: 12px; font: 700 12px var(--display); color: #fbbf24; }
.pk-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 3px; border-radius: 14px; background: var(--panel); }
.pk-seg button { min-width: 0; min-height: 38px; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--muted); }
.pk-seg button[aria-checked="true"] { background: linear-gradient(180deg, #a855f7, #7c3aed); color: #fff; box-shadow: 0 6px 16px -8px #a855f7; }
.pk-seg button:disabled { opacity: .55; }
.pk-seg button[aria-checked="true"]:disabled { opacity: .85; }
.pk-bet { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 6px; }
.pk-bet .sq { font-size: 13px; }
.pk #pGo { background: linear-gradient(180deg, #a855f7, #7c3aed); box-shadow: 0 10px 26px -12px #a855f7; }
html.fit .pk .pk-seg button { min-height: 34px; }
@media (max-height: 700px) { html.fit .pk .pk-seg button { min-height: 30px; font-size: 12px; } }

/* ---------- Tower Rush ---------- */
.tw { --tw-sky1: #22144a; --tw-sky2: #0b0716; --tw-build: #f5b301; --tw-cash: #7c3aed; --tw-glow: #a855f7; }
.tw .case-head h1 { font-size: 20px; }
.tw-scene { position: relative; width: 100%; aspect-ratio: 1 / 1.05; border-radius: 22px; overflow: hidden; cursor: pointer; isolation: isolate;
  background: radial-gradient(70% 45% at 50% 0%, color-mix(in srgb, var(--tw-glow) 30%, transparent), transparent 70%), linear-gradient(180deg, var(--tw-sky1), var(--tw-sky2)); box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .22), 0 18px 40px -24px var(--tw-glow); touch-action: manipulation; }
html.fit .g-stage .tw-scene { width: 100%; height: 100%; aspect-ratio: auto; }
.tw-scene canvas { position: absolute; inset: 0; z-index: 2; display: block; }
.tw-hud { position: absolute; z-index: 3; left: 12px; top: 10px; display: grid; gap: 1px; pointer-events: none; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.tw-hud .num { font-size: clamp(22px, 7cqw, 30px); color: #fff; }
.tw-hud #wFloor { font: 700 12px var(--display); color: #fff; }
.tw-next { font-size: 11.5px; color: rgba(255, 255, 255, .9); }
.tw-res { position: absolute; z-index: 3; right: 10px; top: 10px; display: grid; justify-items: end; gap: 4px; pointer-events: none; }
.tw-res .label { font-size: 11px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.tw-res #wRes { display: grid; gap: 4px; justify-items: end; }
.tw-res #wRes span { padding: 2px 8px; border-radius: 8px; font: 700 11px var(--display); background: rgba(10, 20, 40, .45); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.tw-res #wRes span.up { box-shadow: inset 0 0 0 1.5px #f5d76e; color: #fff3c4; } .tw-res #wRes span.down { color: #fecaca; }
.tw-msg { position: absolute; z-index: 4; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: 90%; text-align: center; padding: 8px 14px; border-radius: 14px; font-weight: 800; font-size: 14px;
  background: rgba(10, 14, 30, .72); color: #fff; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); animation: mdChest .35s ease-out; pointer-events: none; }
.tw-msg b { color: #facc15; } .tw-msg.lose { color: #fecaca; } .tw-msg.bonus { color: #fde68a; box-shadow: 0 0 0 2px #facc15, 0 0 24px -4px #facc15; }
.tw-load { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; color: #fff; font-weight: 700; }
.tw-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tw-btns.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-btn { min-width: 0; min-height: 56px; border-radius: 16px; display: grid; place-items: center; align-content: center; gap: 1px; padding: 6px 10px; color: #fff; font-family: var(--display);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: transform .08s, filter .15s; }
.tw-btn b { font-size: 18px; letter-spacing: .04em; text-transform: uppercase; } .tw-btn span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-family: var(--body); font-weight: 700; }
.tw-btn:active { transform: scale(.97); }
.tw-btn:disabled { filter: saturate(.5) brightness(.75); }
.tw-btn.cash { background: linear-gradient(180deg, color-mix(in srgb, var(--tw-cash) 70%, #fff), var(--tw-cash)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .25); }
.tw-btn.build { color: #2b1d00; background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .9) 0 8px, transparent 8px 16px) top / 100% 7px no-repeat, repeating-linear-gradient(-45deg, rgba(0, 0, 0, .9) 0 8px, transparent 8px 16px) bottom / 100% 7px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--tw-build) 70%, #fff), var(--tw-build));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), inset 0 -4px 0 rgba(0, 0, 0, .2); }
.tw-btn.build b { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.tw-lad { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 4px; margin: 8px 0 14px; font-size: 12px; }
.tw-lad span { padding: 4px 6px; border-radius: 8px; background: var(--panel-2); }

/* ---------- Penalty ---------- */
.pn .case-head h1 { font-size: 20px; }
.pn-scene { position: relative; width: 100%; aspect-ratio: 1 / 1.05; border-radius: 22px; overflow: hidden; isolation: isolate; container-type: inline-size;
  background: #0b0716; box-shadow: inset 0 0 0 1px rgba(192, 132, 252, .22), 0 18px 40px -24px var(--glow); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
html.fit .g-stage .pn-scene { width: 100%; height: 100%; aspect-ratio: auto; }
.pn-scene canvas { position: absolute; inset: 0; z-index: 1; display: block; }
/* табло: название, множитель, голы, возможный выигрыш */
.pn-board { position: absolute; z-index: 3; top: 8px; left: 50%; transform: translateX(-50%); width: min(94%, 420px); display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand mult goals" "brand mult win";
  align-items: center; column-gap: 10px; padding: 6px 12px; border-radius: 14px; pointer-events: none;
  background: linear-gradient(180deg, rgba(26, 16, 58, .88), rgba(10, 6, 24, .88)); box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .45), 0 0 22px -6px rgba(124, 58, 237, .8); }
.pn-brand { grid-area: brand; font: 900 clamp(11px, 3.2cqw, 14px) var(--logo, var(--display)); letter-spacing: .16em; color: #e9d5ff; text-shadow: 0 0 10px rgba(168, 85, 247, .9); }
.pn-board .num { grid-area: mult; justify-self: center; font: 900 clamp(22px, 7.4cqw, 32px)/1 var(--display); color: #facc15; text-shadow: 0 0 14px rgba(250, 204, 21, .6); font-variant-numeric: tabular-nums; }
.pn-board .num.bump { animation: pnBump .55s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pnBump { 0% { transform: scale(1); } 35% { transform: scale(1.28); text-shadow: 0 0 26px #facc15, 0 0 46px rgba(168, 85, 247, .9); } 100% { transform: scale(1); } }
.pn-goals, .pn-win { justify-self: end; font-size: clamp(10.5px, 3cqw, 12.5px); font-weight: 700; color: #fff; white-space: nowrap; }
.pn-goals { grid-area: goals; } .pn-win { grid-area: win; color: #a5f3fc; }
/* лестница множителей */
.pn-lad { position: absolute; z-index: 3; top: calc(8px + clamp(44px, 12cqw, 54px) + 6px); left: 0; right: 0; display: flex; gap: 5px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.pn-lad::-webkit-scrollbar { display: none; }
.pn-lad span { flex: none; display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 8px; font-size: 10px; color: rgba(255, 255, 255, .65); background: rgba(10, 6, 24, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pn-lad span b { font: 800 11px var(--display); color: #fff; }
.pn-lad span.done { color: #fde68a; box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .7); } .pn-lad span.done b { color: #facc15; }
.pn-lad span.next { color: #fff; background: rgba(124, 58, 237, .55); box-shadow: inset 0 0 0 1.5px #c084fc, 0 0 14px -2px #a855f7; }
/* пять зон удара поверх ворот — крупные цели для пальца */
.pn-zones { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pn-zone { position: absolute; display: grid; place-items: center; border-radius: 16px; pointer-events: auto; background: transparent; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pn-zone:disabled { pointer-events: none; }
.pn-zone i { width: 38%; max-width: 54px; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity .2s, transform .2s;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 0 0 4px rgba(168, 85, 247, .35), 0 0 18px rgba(168, 85, 247, .7); background: radial-gradient(circle, rgba(250, 204, 21, .5) 0 18%, transparent 20%); }
.pn-zones.live .pn-zone i { opacity: .75; animation: pnPulse 1.8s ease-in-out infinite; }
.pn-zones.live .pn-zone:nth-child(2) i { animation-delay: .2s; } .pn-zones.live .pn-zone:nth-child(3) i { animation-delay: .4s; } .pn-zones.live .pn-zone:nth-child(4) i { animation-delay: .6s; } .pn-zones.live .pn-zone:nth-child(5) i { animation-delay: .8s; }
@media (hover: hover) { .pn-zones.live .pn-zone:hover { background: rgba(168, 85, 247, .16); box-shadow: inset 0 0 0 1.5px rgba(192, 132, 252, .6); } .pn-zones.live .pn-zone:hover i { opacity: 1; transform: scale(1.1); } }
.pn-zone:focus-visible { outline: 2px solid #facc15; outline-offset: -2px; }
.pn-zone.hit { animation: pnHit .5s ease-out; }
.pn-zone.hit i { opacity: 1; }
@keyframes pnPulse { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
@keyframes pnHit { 0% { background: rgba(250, 204, 21, .45); box-shadow: inset 0 0 0 2px #facc15, 0 0 26px rgba(250, 204, 21, .8); } 100% { background: transparent; box-shadow: none; } }
/* «ГОЛ!» / «СЕЙВ!» */
.pn-flash { position: absolute; z-index: 4; left: 0; right: 0; top: 36%; text-align: center; pointer-events: none; opacity: 0;
  font: 900 clamp(38px, 15cqw, 72px)/1 var(--display); letter-spacing: .06em; }
.pn-flash.show { animation: pnFlash 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.pn-flash.goal { color: #facc15; text-shadow: 0 0 18px rgba(250, 204, 21, .9), 0 0 40px rgba(168, 85, 247, .9), 0 4px 0 #7c2d12; }
.pn-flash.save { color: #a5f3fc; text-shadow: 0 0 18px rgba(34, 211, 238, .9), 0 0 40px rgba(81, 69, 255, .9), 0 4px 0 #1e1b4b; }
@keyframes pnFlash { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.12); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px) scale(1.04); } }
.pn-msg { bottom: 10px; }
.tw-btn.pn-go { background: linear-gradient(180deg, #facc15, #f59e0b); color: #2b1d00; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 10px 26px -12px rgba(250, 204, 21, .8); }
.tw-btn.pn-go b { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.pn .tw-btn.cash { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.pn-last { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; min-height: 22px; }
.pn-last::-webkit-scrollbar { display: none; }
.pn-last span { flex: none; padding: 2px 8px; border-radius: 8px; font: 700 11px var(--display); background: var(--panel-2); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pn-last span.up { box-shadow: inset 0 0 0 1.5px #f5d76e; color: #fff3c4; } .pn-last span.down { color: #fecaca; }
.pn-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.pn-dots i { width: 7px; height: 7px; border-radius: 50%; background: #facc15; box-shadow: 0 0 6px rgba(250, 204, 21, .6); }
.pn-dots i.s { background: #22d3ee; box-shadow: 0 0 6px rgba(34, 211, 238, .6); }
.pn-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; }
.pn-table th, .pn-table td { padding: 5px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.pn-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .pn-zones.live .pn-zone i, .pn-board .num.bump { animation: none; } .pn-flash.show { animation-duration: .9s; } }
html.lite .pn-zones.live .pn-zone i { animation: none; }