/* Exo 2 (SIL OFL, fonts/OFL-Exo2.txt): technical look, Cyrillic, variable weight */
@font-face { font-family: "Exo 2"; src: url(../fonts/Exo2.ttf) format("truetype"); font-weight: 100 900; font-display: swap; }

/* Layout: sticky top bar + live-drop ribbon, then one content column. Palette taken from the owner's side art:
   plum-black base, amber-gold accent, magenta and violet glow. */
:root {
  --bg: #0b0410; --panel: #1a0b22; --panel-2: #26102f; --line: #42204c;
  --fg: #fdf4ff; --muted: #c9adcf;
  --glow-1: #8b1cf0; --glow-2: #ff1f8f; --glow-3: #ffb020; --hot: #ff1f8f; --accent: #ffb020; --accent-ink: #1d1004;
  --good: #4fd18b; --bad: #ff6b6b;
  --r-blue: #4b69ff; --r-purple: #8847ff; --r-pink: #d32ee6; --r-red: #eb4b4b; --r-gold: #e4ae39;
  /* One font across the site */
  --f-display: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --f-body: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Exo 2", ui-monospace, Consolas, monospace;
  --cell: 140px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 150px; }
/* Neon glow behind everything; a picture in img/bg/background.jpg goes on top when present (see fx.js) */
html { background: var(--bg); }
body { min-height: 100vh; background:
    radial-gradient(55% 45% at 12% -5%, color-mix(in srgb, var(--glow-1) 70%, transparent), transparent 70%),
    radial-gradient(45% 40% at 95% 10%, color-mix(in srgb, var(--glow-2) 45%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 105%, color-mix(in srgb, var(--glow-3) 35%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed; }
body.has-bg { background:
    linear-gradient(180deg, rgba(11,4,16,.5), rgba(11,4,16,.84)),
    url(../img/bg/background.jpg) center / cover no-repeat fixed,
    var(--bg); }
body { margin: 0; color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--panel); }
img { max-width: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
input, select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; color: var(--fg); font: inherit; font-size: 14px; min-width: 0; }
code.mono, .mono { font-family: var(--f-mono); font-size: 12px; word-break: break-all; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.inner { max-width: 1280px; margin: 0 auto; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 30; background: var(--accent); color: var(--accent-ink); padding: 8px 14px; border-radius: 6px; font-weight: 600; }
.skip:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }
#view:focus { outline: none; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: .02em; }
h2 { font-size: 18px; }

/* top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: color-mix(in srgb, var(--panel) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top .inner { display: flex; align-items: center; gap: 18px; padding-block: 10px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: .08em; }
.logo b { color: var(--accent); font-weight: 700; }
.logo-mark { width: 30px; height: 30px; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { padding: 6px 10px; border-radius: 6px; color: var(--muted); font-weight: 600; font-size: 14px; }
.nav a.on, .nav a:hover { color: var(--fg); background: var(--panel-2); }
.nav a.on { box-shadow: inset 0 -2px 0 var(--accent); }
.spacer { flex: 1; }
.online { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.sound-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); font-size: 16px; line-height: 1; }
.sound-btn[aria-pressed="false"] { opacity: .6; }
@media (max-width: 1440px) { .online { display: none; } }   /* room for the sound button in the header row */
.wallet { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 4px 12px; }
.btn { background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 6px; padding: 7px 14px; display: inline-block; text-align: center; }
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.btn.ghost { background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); }
.btn.warn { background: var(--bad); color: var(--accent-ink); }
.btn.big { font-size: 17px; padding: 12px 26px; font-family: var(--f-display); letter-spacing: .04em; }
.ava { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #b3412f, var(--accent)); display: grid; place-items: center; font-family: var(--f-display); font-weight: 700; color: var(--accent-ink); flex: none; }
.ava.big { width: 84px; height: 84px; font-size: 34px; border-radius: 16px; }

/* live feed */
.feed { background: color-mix(in srgb, var(--bg) 60%, transparent); border-bottom: 1px solid var(--line); overflow: hidden; }
.feed .inner { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.feed-ctrl { display: flex; flex-direction: column; gap: 4px; flex: none; }
.feed-label { min-height: 26px; font-family: var(--f-display); font-size: 12px; letter-spacing: .12em; color: var(--muted); padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line); }
.feed-label { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; transform: scale(.7); } }
.feed-ctrl .seg button { min-height: 24px; padding: 2px 8px; font-size: 12px; }
.feed-track { display: flex; gap: 6px; overflow: hidden; min-width: 0; }
.drop { flex: none; width: 116px; background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--rc) 24%, var(--panel))); border-radius: 6px; border-bottom: 3px solid var(--rc); padding: 4px 6px; animation: slidein .4s ease-out; contain: layout paint; }
.drop .pic { height: 44px; }
.drop .who { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes slidein { from { transform: translateX(-24px); opacity: .2; } }

/* skin picture */
.pic { display: grid; place-items: center; height: 72px; }
.pic img, .pic svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; aspect-ratio: 4 / 3; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.pic svg { width: 100%; }
.spr { display: block; height: 100%; max-width: 100%; aspect-ratio: 4 / 3; background-size: 1000% 1000%; background-repeat: no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.fan .spr, .case-art.game .spr { width: 100%; height: auto; }
.case-art.game .spr { width: 86%; transition: transform .25s; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.case-card:hover .case-art.game .spr { transform: scale(1.06) rotate(-2deg); }
.strip .spr { filter: none; }

main { padding-block: 24px 64px; }
.sec { margin-top: 34px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-head h1, .sec-head h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .08em; }
.sec-head span { color: var(--muted); font-size: 13px; max-width: 80ch; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; min-width: 0; }
.empty { color: var(--muted); padding: 28px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; display: grid; gap: 12px; justify-items: center; }
.slot-empty { color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 22px 12px; text-align: center; font-size: 14px; }
.hint { color: var(--muted); font-size: 13px; margin: 0; text-align: center; min-height: 1.4em; }
.demo-note { color: var(--muted); font-size: 12px; text-align: center; margin-top: 40px; }

/* Cache scene + hero */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); min-height: 260px; display: flex; align-items: center; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,4,16,.94) 0%, rgba(26,11,34,.6) 50%, rgba(255,31,143,.08) 100%); }
.hero-copy { position: relative; z-index: 1; padding: 32px; max-width: 560px; }
.hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.08; }
.hero p { color: #d6d3cc; margin: 10px 0 18px; max-width: 46ch; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.promo-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.modes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.mode { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; transition: border-color .2s; }
.mode:hover { border-color: var(--accent); }
.mode b { font-family: var(--f-display); font-size: 16px; }
.mode span { color: var(--muted); font-size: 13px; }

/* case grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.grid.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.case-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .2s, border-color .2s; text-align: center; }
.case-card:hover { transform: translateY(-3px); border-color: var(--cc); }
.case-card:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.case-card .name { font-family: var(--f-display); font-weight: 700; font-size: 15px; line-height: 1.2; }
.case-card .opened { font-size: 12px; color: var(--muted); }
.price-tag { background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; font-size: 14px; margin-top: 4px; }
.badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--accent); color: var(--accent-ink); }
.b-hot { background: var(--bad); }
.b-limited { background: var(--r-gold); }
.b-free { background: var(--good); }
.case-art { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.case-art.game { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.case-art.game img, .case-art.game svg { width: 86%; height: auto; transition: transform .25s; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.case-card:hover .case-art.game img { transform: scale(1.06) rotate(-2deg); }
.case-art.ww::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 28%, transparent) 0%, transparent 45%, rgba(15,18,24,.8)); }
/* Map screenshot cropped per case (position + zoom set inline) */
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); }
.case-art.ww .map-img { transition: transform .4s; }
.case-card:hover .case-art.ww .map-img { filter: saturate(1) brightness(.9); }
.map-tag { position: absolute; left: 8px; bottom: 6px; z-index: 2; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #ecebe6; background: rgba(15,18,24,.6); padding: 1px 6px; border-radius: 3px; }
.fans { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.fan { position: absolute; width: 62%; transition: transform .3s; }
.fan .pic { height: auto; }
.fan .pic img, .fan .pic svg { width: 100%; height: auto; }
.fan-0 { transform: translateY(-4%) scale(1.05); z-index: 3; }
.fan-1 { transform: translate(-26%, 10%) rotate(-14deg) scale(.82); z-index: 2; }
.fan-2 { transform: translate(26%, 10%) rotate(14deg) scale(.82); z-index: 1; }
.case-card:hover .fan-1 { transform: translate(-32%, 8%) rotate(-18deg) scale(.84); }
.case-card:hover .fan-2 { transform: translate(32%, 8%) rotate(18deg) scale(.84); }
.ww-stamp { position: absolute; right: 8px; bottom: 6px; z-index: 2; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--tint); }
.case-card.mini { padding: 8px 8px 10px; }
.case-card.mini .name { font-size: 13px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters input { flex: 1 1 200px; }

/* case room */
.back { color: var(--muted); display: inline-flex; gap: 6px; margin-bottom: 14px; }
.back:hover { color: var(--fg); }
.room { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--cc) 22%, var(--panel)) 0%, var(--panel) 70%); border: 1px solid var(--line); border-radius: 14px; }
.room.ww::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,18,24,.35), rgba(15,18,24,.88)); }
.room-body { position: relative; z-index: 2; padding: 24px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.room .art { width: 300px; max-width: 80%; }
.room h1 { font-size: 30px; }
.room.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { box-shadow: inset 0 0 120px var(--flash); } 100% { box-shadow: inset 0 0 0 transparent; } }
.controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.seg { display: flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px; flex-wrap: wrap; }
.seg button { padding: 6px 12px; border-radius: 6px; color: var(--muted); font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--line); color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); }
.check { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 14px; }

/* roulette */
.rollers { width: 100%; display: grid; gap: 10px; }
.roller { position: relative; width: 100%; overflow: hidden; contain: layout paint; background: rgba(15,18,24,.8); border: 1px solid var(--line); border-radius: 10px; padding-block: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.roller::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--accent); box-shadow: 0 0 12px var(--accent); z-index: 2; }
.strip { display: flex; gap: 6px; will-change: transform; }
.strip .item { width: var(--cell); flex: none; }
.strip .pic img, .strip .pic svg { filter: none; }
.strip.done { will-change: auto; }
.strip.done .item:not(.win) { opacity: .3; transition: opacity .4s; }
.strip.done .item.win { box-shadow: 0 0 24px var(--rc); transform: scale(1.04); transition: transform .3s, box-shadow .3s; }

/* items */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.item { background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--rc) 20%, var(--panel))); border-radius: 8px; border-bottom: 3px solid var(--rc); padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; position: relative; text-align: left; }
.item .wear { position: absolute; top: 6px; right: 8px; font-size: 10px; color: var(--muted); font-family: var(--f-mono); }
.item .model { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .skin { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .meta { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; margin-top: 2px; }
.item .meta .chance { opacity: .85; }
.item .act { margin-top: 6px; }
.item .act .btn { width: 100%; padding: 5px; font-size: 13px; }
.item.glow { box-shadow: 0 0 28px var(--rc); }
.item.pop-in { animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
button.item { cursor: pointer; border-top: 0; border-left: 0; border-right: 0; outline-offset: 2px; transition: transform .15s; }
button.item:hover { transform: translateY(-2px); }
button.item[aria-pressed="true"] { outline: 2px solid var(--accent); }
button.item[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; left: 8px; color: var(--accent); font-weight: 700; }
button.item:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.result { width: 100%; display: grid; gap: 14px; }
.result h2 { font-size: 20px; }
.result h2:focus, .outcome:focus, #ct-title:focus { outline: none; }
.result .items { grid-template-columns: repeat(auto-fit, minmax(150px, 190px)); justify-content: center; }
.result .item { animation: pop .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
.list-scroll { max-height: 520px; overflow-y: auto; padding: 4px; }
.list-head { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 12px; }
.list-head h2 { font-size: 17px; }

/* upgrade */
.up-stage { display: grid; grid-template-columns: 1fr minmax(250px, 310px) 1fr; gap: 16px; align-items: stretch; }
.slot { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.slot h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.sum { font-size: 22px; font-family: var(--f-mono); }
.slot-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.slot-items .item { padding: 6px; }
.slot-items .pic { height: 52px; }
.cash { display: grid; gap: 4px; }
.cash label { font-size: 12px; color: var(--muted); }
.target-big .pic { height: 120px; }
.dial { position: relative; display: grid; justify-items: center; gap: 10px; align-content: center; padding: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hot) 35%, var(--line));
  background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--hot) 16%, var(--panel)), var(--panel) 75%); }
.dial svg { width: 100%; max-width: 240px; height: auto; overflow: visible; }
.dial .needle { transform-origin: 100px 100px; }
.dial .notches line { stroke: color-mix(in srgb, var(--fg) 22%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.dial .arc { transition: stroke .3s; }
.dial.spinning .arc { animation: arc-pulse .9s ease-in-out infinite alternate; }
@keyframes arc-pulse { to { filter: brightness(1.35) drop-shadow(0 0 6px var(--hot)); } }
.dial .pct { font-family: var(--f-display); font-size: 32px; font-weight: 700; fill: var(--fg); }
.dial .lbl { font-size: 11px; letter-spacing: .14em; fill: var(--muted); text-transform: uppercase; }
.dial.win .arc { stroke: var(--good); }
.dial.lose .arc { stroke: var(--bad); }
.dial.boom { animation: dial-boom 1s ease-out; }
@keyframes dial-boom { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 70%, transparent), inset 0 0 90px color-mix(in srgb, var(--good) 55%, transparent); } 100% { box-shadow: 0 0 0 36px transparent, inset 0 0 0 transparent; } }
.dial.shake { animation: dial-shake .5s ease-in-out; }
@keyframes dial-shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.sparks { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.sparks i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 2px var(--hot);
  animation: spark var(--t) cubic-bezier(.15,.7,.3,1) forwards; }
.sparks i:nth-child(3n) { background: var(--good); box-shadow: 0 0 10px 2px var(--good); }
.sparks i:nth-child(3n+1) { background: #fff; }
@keyframes spark { from { transform: rotate(var(--a)) translateY(0) scale(var(--s)); opacity: 1; } to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0); opacity: 0; } }
.up-prize { width: min(170px, 100%); }
.up-prize.flare { animation: prize-in .7s cubic-bezier(.2,1.4,.4,1); }
.up-prize.flare .item { box-shadow: 0 0 0 1px var(--good), 0 0 28px color-mix(in srgb, var(--good) 55%, transparent); }
@keyframes prize-in { from { transform: scale(.4) rotate(-8deg); opacity: 0; } }
.outcome { margin: 0; min-height: 1.5em; font-weight: 600; text-align: center; }
.outcome.win { color: var(--good); }
.outcome.lose { color: var(--bad); }
.up-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

/* contract */
.contract-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
.contract-sum { display: grid; gap: 8px; justify-items: start; }
.contract-result { display: grid; gap: 10px; justify-items: center; min-height: 200px; align-content: center; }
.contract-result .item { width: 220px; }
.contract-result .pic { height: 110px; }
.shuffle { display: grid; grid-template-columns: repeat(3, 90px); gap: 8px; }
.shuffle .pic { height: 60px; animation: blink .3s infinite alternate; }
.shuffle .pic:nth-child(2n) { animation-delay: .15s; }
@keyframes blink { to { opacity: .25; } }

/* battle */
.battle-setup { display: grid; gap: 14px; }
.battle-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.battle-row > .muted { min-width: 120px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; font-size: 13px; }
.arena { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.fighter { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.fighter.winner { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.fighter-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.fighter-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* bonus */
.bonus-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; }
.wheel-card { display: grid; justify-items: center; gap: 12px; }
.wheel-card svg { width: 100%; max-width: 380px; height: auto; }
#wheel { transform-origin: 0 0; }
.wheel-txt { fill: var(--fg); font-family: var(--f-display); font-size: 12px; font-weight: 700; }
.bonus-side { display: grid; gap: 16px; align-content: start; }
.bonus-side .card { display: grid; gap: 10px; justify-items: start; }
.promo-form { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.promo-form input { flex: 1 1 160px; text-transform: uppercase; }
.lvl { width: 100%; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.lvl i { display: block; height: 100%; background: var(--accent); }

/* fair */
.fair-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fair-grid .card { display: grid; gap: 10px; align-content: start; }
.verify { display: grid; gap: 6px; }
.verify label { font-size: 12px; color: var(--muted); }

/* profile */
.prof { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.prof-head { display: grid; justify-items: center; gap: 8px; text-align: center; }
.kv { display: grid; gap: 8px; margin-top: 10px; width: 100%; }
.stat-row { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.stat-row span:first-child { color: var(--muted); }
.field { display: grid; gap: 6px; margin-top: 10px; text-align: left; width: 100%; }
.field label, .field .lab { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { padding: 8px 14px; color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--fg); border-color: var(--accent); }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; color: var(--muted); }
.scroll-x { overflow-x: auto; }
.hist { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 8px; }
.hist td { padding: 8px; border-top: 1px solid var(--line); white-space: nowrap; }
.hist .rdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--rc); margin-right: 6px; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--panel-2); }
.tag.good { color: var(--good); } .tag.bad { color: var(--bad); }
.minus { color: var(--bad); }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: 10px 16px; border-radius: 8px; z-index: 20; max-width: calc(100% - 32px); }
.toast.err { border-left-color: var(--bad); }

/* Steam sign-in */
.btn.steam { background: #171a21; color: #fff; border: 1px solid #66c0f4; }
.btn.steam::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #66c0f4; vertical-align: 1px; }
.ava-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ava { overflow: hidden; }
.steam-acc { display: grid; gap: 6px; justify-items: start; }
.steam-acc a { color: #66c0f4; }

/* top-up dialog */
.pay { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.pay::backdrop { background: rgba(0,0,0,.6); }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pay-head .btn { padding: 4px 10px; }
.pay-body { display: grid; gap: 12px; margin-top: 14px; justify-items: start; }
.pay-body p { margin: 0; }
.pay-body .empty, .pay-body .wallets { width: 100%; }
.wallets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wallets li { display: grid; gap: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; justify-items: start; }
.w-head { display: flex; gap: 8px; align-items: baseline; }
.w-net { font-size: 12px; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.toast.ok { border-left-color: var(--good); }

@media (max-width: 1000px) {
  .up-stage, .up-lists, .contract-stage, .bonus-grid, .fair-grid { grid-template-columns: 1fr; }
  .modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .prof { grid-template-columns: 1fr; }
  .online { display: none; }
  .top .inner { gap: 10px; }
  :root { --cell: 110px; }
  .grid, .grid.small, .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mode:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .arena { grid-template-columns: 1fr; }
  .hero-copy { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* season pass */
.pass-hero { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); min-height: 240px; display: flex; align-items: center; }
.pass-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,18,24,.94) 0%, rgba(15,18,24,.6) 60%, rgba(15,18,24,.2) 100%); }
.pass-copy { position: relative; z-index: 1; padding: 28px; max-width: 620px; display: grid; gap: 10px; justify-items: start; }
.pass-copy h1 { font-size: clamp(26px, 4vw, 38px); }
.pass-copy p { margin: 0; color: #d6d3cc; max-width: 52ch; }
.pass-meta { display: grid; gap: 6px; width: 100%; max-width: 380px; }
.pass-level { font-family: var(--f-display); font-size: 20px; font-weight: 700; }
.pass-bar { height: 8px; }
.missions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mission { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; }
.mission.done { border-color: var(--good); }
.mission-top, .mission-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.stars { color: var(--accent); font-weight: 700; white-space: nowrap; }
.track-scroll { overflow-x: auto; padding-bottom: 8px; }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 10px; }
.track-col { display: grid; gap: 8px; grid-template-rows: auto 1fr 1fr; }
.track-num { text-align: center; color: var(--muted); font-weight: 700; }
.track-col.reached .track-num { color: var(--accent); }
.reward { background: var(--panel); border: 1px solid var(--line); border-bottom: 3px solid var(--rc, var(--line)); border-radius: 10px; padding: 10px; display: grid; gap: 6px; justify-items: center; text-align: center; align-content: start; }
.reward.prem { background: linear-gradient(180deg, color-mix(in srgb, var(--r-gold) 14%, var(--panel)), var(--panel)); }
.reward.claimed { opacity: .55; }
.reward .pic { height: 56px; }
.reward-rub { font-size: 18px; font-weight: 700; height: 56px; display: grid; place-items: center; }
.reward-name { font-size: 12px; line-height: 1.3; min-height: 2.6em; }
.reward-lock { font-size: 12px; }
.reward .btn { padding: 5px 12px; font-size: 13px; }

/* page transitions: the view slides, the header and feed stay put */
#view { view-transition-name: page; }
::view-transition-old(page) { animation: page-out .22s ease-in both; }
::view-transition-new(page) { animation: page-in .38s cubic-bezier(.2,.8,.2,1) both; }
#view.enter { animation: page-in .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes page-out { to { opacity: 0; transform: translateX(-24px) scale(.985); filter: blur(4px); } }
@keyframes page-in { from { opacity: 0; transform: translateX(28px) scale(.985); filter: blur(6px); } }
/* cards rise in one after another */
.grid > *, .modes > *, .items > .item { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.grid > :nth-child(2), .modes > :nth-child(2), .items > :nth-child(2) { animation-delay: .04s; }
.grid > :nth-child(3), .modes > :nth-child(3), .items > :nth-child(3) { animation-delay: .08s; }
.grid > :nth-child(4), .modes > :nth-child(4), .items > :nth-child(4) { animation-delay: .12s; }
.grid > :nth-child(5), .modes > :nth-child(5), .items > :nth-child(5) { animation-delay: .16s; }
.grid > :nth-child(n+6), .modes > :nth-child(n+6), .items > :nth-child(n+6) { animation-delay: .2s; }
.strip .item { animation: none; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(page), ::view-transition-new(page), #view.enter, .grid > *, .modes > *, .items > .item { animation: none; }
}

/* 3D inspect */
.item[data-item] { cursor: zoom-in; }
.strip .item[data-item] { cursor: default; }
.inspect-btn { position: absolute; top: 5px; left: 6px; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, var(--rc) 35%, var(--panel)); color: var(--fg); opacity: .75; }
.inspect-btn:hover, .inspect-btn:focus-visible { opacity: 1; }
.strip .inspect-btn { display: none; }
.inspect { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); background: radial-gradient(80% 70% at 50% 45%, color-mix(in srgb, var(--rc) 30%, var(--panel)), var(--panel) 75%); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.inspect::backdrop { background: rgba(8,2,12,.78); backdrop-filter: blur(4px); }
.ins-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.ins-model { color: var(--muted); font-size: 13px; }
.ins-stage { position: relative; height: min(52vh, 380px); perspective: 900px; display: grid; place-items: center; touch-action: none; cursor: grab; user-select: none; }
.ins-stage:active { cursor: grabbing; }
.ins-card { position: relative; width: min(82%, 520px); aspect-ratio: 4 / 3; transform-style: preserve-3d; transition: transform .08s linear; display: grid; place-items: center; }
.ins-img, .ins-spr { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.55)) drop-shadow(0 0 30px color-mix(in srgb, var(--rc) 45%, transparent)); transform: translateZ(40px); pointer-events: none; }
.ins-spr .spr { width: 100%; height: 100%; }
.ins-glare { position: absolute; inset: 0; transform: translateZ(60px); pointer-events: none; background: radial-gradient(40% 35% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 70%); mix-blend-mode: screen; border-radius: 20px; }
.ins-floor { position: absolute; bottom: 8%; width: 60%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 55%, transparent), transparent); filter: blur(6px); }
.ins-gl { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.ins-gl:active { cursor: grabbing; }
.ins-stage.is-3d .ins-card, .ins-stage.is-3d .ins-floor { display: none; }
.ins-stage.loading-3d::after { content: "Загрузка 3D…"; position: absolute; bottom: 4px; right: 8px; font-size: 12px; color: var(--muted); }
.ins-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.ins-tools[hidden] { display: none; }
.ins-tools [aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.ins-info { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.ins-info .tag { border: 1px solid var(--rc); color: var(--fg); border-radius: 4px; padding: 1px 8px; font-size: 13px; }
.ins-price { font-size: 20px; font-weight: 700; color: var(--accent); }

/* 18+ gate */
.age { width: min(440px, calc(100% - 32px)); background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; }
.age::backdrop { background: radial-gradient(60% 60% at 50% 40%, rgba(255,31,143,.38), rgba(8,2,12,.96)); backdrop-filter: blur(10px); }
.age-box { display: grid; gap: 12px; justify-items: center; }
.age-box p { margin: 0; }
.age-badge { font-family: var(--f-display); font-weight: 800; font-size: 28px; color: var(--accent-ink); background: var(--accent); border-radius: 12px; padding: 4px 14px; }
.age-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* wallet dialog: forms, withdrawals, referral */
.pay-form { display: grid; gap: 6px; width: 100%; }
.pay-form label, .ref-box .lab { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pay-form .row { display: flex; gap: 8px; }
.pay-form .row input { flex: 1; }
.pay-form > .btn.big { justify-self: start; margin-top: 4px; }
.wd-calc { margin: 0; font-size: 13px; color: var(--fg); }
.wd-err { margin: 0; font-size: 13px; color: var(--bad); min-height: 1.2em; }
.wd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.wd-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; flex-wrap: wrap; }
.wd-list .tag { color: var(--accent); font-size: 12px; }
.ref-box { display: grid; gap: 6px; width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; justify-items: start; }
.ref-code { font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: .12em; color: var(--accent); }
.pay-body .kv { width: 100%; }
.pay .seg button { flex: 1; }

/* side panels: owner's pictures in img/side/, in the free space beside the 1280px column */
.side { display: none; position: fixed; top: 0; bottom: 0; width: min(calc((100vw - 1280px) / 2 - 24px), 380px); z-index: 0; background: center / cover no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--fade-dir), #000 55%, transparent); mask-image: linear-gradient(var(--fade-dir), #000 55%, transparent); }
.side-left { left: 0; --fade-dir: to right; background-image: url(../img/side/left.jpg); }
.side-right { right: 0; --fade-dir: to left; background-image: url(../img/side/right.jpg); }
@media (min-width: 1600px) {
  body.has-side-left .side-left, body.has-side-right .side-right { display: block; }
}
.top, .feed, main { position: relative; z-index: 1; }
.top { position: sticky; z-index: 9; }

/* demo notice above everything */
.demo-bar { position: relative; z-index: 10; background: repeating-linear-gradient(135deg, #ffb020 0 14px, #ffc24d 14px 28px); color: var(--accent-ink); text-align: center; font-size: 13px; font-weight: 600; padding: 6px 16px; }
.demo-bar b { text-transform: uppercase; letter-spacing: .08em; margin-right: 8px; }

/* themed covers (js/art.js): dark two-colour base, a pattern kept to the edges, emblem as a corner watermark */
.case-art.th { position: relative; overflow: hidden; box-shadow: inset 0 0 48px rgba(0,0,0,.55); background:
    radial-gradient(60% 70% at 50% 58%, color-mix(in srgb, var(--c1) 28%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c1) 14%, var(--c2)), var(--c2) 75%); }
.case-art.th::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, transparent 35%, #000 90%); mask-image: radial-gradient(ellipse 75% 70% at 50% 55%, transparent 35%, #000 90%); }
.case-art.th .emblem { position: absolute; width: 58%; height: 58%; right: -4%; top: -6%; fill: none; stroke: var(--c1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: .32; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c1) 70%, transparent)); transition: transform .4s, opacity .3s; }
.case-card:hover .case-art.th .emblem { transform: scale(1.08) rotate(-6deg); opacity: .5; }
.case-art.th .fan .spr, .case-art.th .fan img { filter: drop-shadow(0 6px 10px rgba(0,0,0,.65)); }
.case-art.th .map-tag { color: var(--c1); letter-spacing: .06em; max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-art.th .ww-stamp { color: #ffb020; opacity: .85; }
.pat-stripes::before { background: repeating-linear-gradient(90deg, var(--c1) 0 2px, transparent 2px 14px); }
.pat-diag::before { background: repeating-linear-gradient(45deg, var(--c1) 0 2px, transparent 2px 12px); }
.pat-dots::before { background: radial-gradient(var(--c1) 1.5px, transparent 2px) 0 0 / 14px 14px; }
.pat-grid::before { background: linear-gradient(var(--c1) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, var(--c1) 1px, transparent 1px) 0 0 / 16px 16px; }
.pat-rays::before { background: repeating-conic-gradient(from 0deg at 50% 60%, var(--c1) 0 6deg, transparent 6deg 18deg); }
.pat-waves::before { background: radial-gradient(circle at 50% 100%, transparent 8px, var(--c1) 9px 10px, transparent 11px) 0 0 / 22px 12px; }
.pat-checker::before { background: conic-gradient(var(--c1) 25%, transparent 0 50%, var(--c1) 0 75%, transparent 0) 0 0 / 20px 20px; opacity: .06; }
.pat-zigzag::before { background: linear-gradient(135deg, var(--c1) 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(225deg, var(--c1) 25%, transparent 25%) -10px 0 / 20px 20px; opacity: .06; }
.pat-rings::before { background: repeating-radial-gradient(circle at 50% 60%, var(--c1) 0 1.5px, transparent 2px 14px); }
.pat-noise::before { background: radial-gradient(var(--c1) 1px, transparent 1.5px) 0 0 / 7px 9px, radial-gradient(var(--c1) 1px, transparent 1.5px) 3px 5px / 11px 7px; opacity: .3; }
.pat-sparkle::before { background: radial-gradient(var(--c1) 1px, transparent 2px) 0 0 / 23px 19px, radial-gradient(#fff 1px, transparent 2px) 9px 7px / 31px 27px; opacity: .45; }
.pat-pixel::before { background: conic-gradient(var(--c1) 25%, transparent 0 50%, var(--c1) 0 75%, transparent 0) 0 0 / 8px 8px; opacity: .07; }
.pat-dunes::before { background: repeating-radial-gradient(ellipse at 50% 140%, var(--c1) 0 2px, transparent 3px 16px); }
/* photo covers: picture underneath, tinted toward the case colours so skins stay readable */
.case-art.th.photo .case-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s;
  filter: brightness(var(--pb, .8)) saturate(.9) contrast(1.05); }
.case-art.th.photo::before { opacity: 1; -webkit-mask-image: none; mask-image: none; z-index: 1;
  background: radial-gradient(42% 38% at 50% 52%, rgba(0,0,0,.38), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--c2) 45%, transparent), color-mix(in srgb, var(--c2) 72%, transparent) 75%, var(--c2)),
    radial-gradient(60% 60% at 50% 55%, transparent, rgba(0,0,0,.35)); }
.case-art.th.photo .emblem { width: 24%; height: 24%; right: 5%; top: 6%; opacity: .4; z-index: 2; }
.case-card:hover .case-art.th.photo .emblem { opacity: .6; }
.case-art.th.photo .fans, .case-art.th.photo .map-tag, .case-art.th.photo .ww-stamp { z-index: 2; }
.case-card:hover .case-art.th.photo .case-photo { transform: scale(1.06); }

/* mobile fixes */
@media (max-width: 760px) {
  /* header: 3 compact rows (logo + steam/ava, wallet, one-line scrollable nav) instead of a ~270px sticky block */
  .demo-bar { font-size: 11px; padding: 4px 12px; line-height: 1.35; }
  .top .inner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "logo steam ava" "wallet wallet wallet" "nav nav nav"; gap: 8px; padding-block: 8px 6px; align-items: center; }
  .top .logo { grid-area: logo; font-size: 18px; min-width: 0; min-height: 40px; }
  .top .logo-mark { width: 26px; height: 26px; }
  .top .spacer, .top .online { display: none; }
  .top .wallet { grid-area: wallet; min-width: 0; }
  .top .wallet #balance { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top .wallet .btn { min-height: 40px; padding: 8px 12px; }
  .top #steam-btn { grid-area: steam; min-height: 40px; padding: 8px 12px; font-size: 0; display: inline-flex; align-items: center; }
  .top #steam-btn::before { margin-right: 6px; }
  .top #steam-btn::after { content: "Steam"; font-size: 14px; }
  .top .inner > a[href="#profile"] { grid-area: ava; display: grid; place-items: center; min-width: 40px; min-height: 40px; }
  .top .nav { grid-area: nav; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; -webkit-overflow-scrolling: touch; }
  .top .nav::-webkit-scrollbar { display: none; }
  .top .nav a { flex: none; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; }
  .feed-ctrl .seg button { min-height: 32px; }
}
@media (max-width: 760px) {
  /* wallet dialog: the auto grid column grew to the long referral URL / code row and pushed content past the right padding */
  .pay { padding: 16px; }
  .pay-body { grid-template-columns: minmax(0, 1fr); }
  .pay-body > * { max-width: 100%; min-width: 0; }
  .ref-box > * { max-width: 100%; overflow-wrap: anywhere; }
  .pay .seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay .seg button, .pay-head .btn { min-height: 40px; min-width: 40px; }
  .pay-form .row { flex-wrap: wrap; }
  .pay-form .row input { flex: 1 1 140px; min-height: 40px; }

  /* case result: two compact columns instead of one 190px column per drop */
  .result .items:has(> .item:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* contract: empty result placeholder reserved 200px */
  .contract-result { min-height: 120px; }
  .contract-sum .btn.big { width: 100%; }

  /* battle: 2 fighters per row instead of a 900px single column */
  .arena { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fighter { padding: 8px; }
  .fighter .pic { height: 56px; }

  /* pass: narrower reward columns, track bleeds to the screen edge */
  .track-scroll { margin-inline: -16px; padding-inline: 16px; }
  .track { grid-auto-columns: 124px; gap: 8px; }

  .seg button { min-height: 40px; }
  .tabs button { min-height: 40px; }
}
@media (max-width: 420px) {
  :root { --cell: 96px; }
  .card { padding: 14px; }
  .hero-copy { padding: 18px; }
  .sec-head h1, .sec-head h2 { font-size: 18px; }
  .btn.big { font-size: 16px; padding: 12px 20px; }
  .grid { gap: 10px; }
}
@media (max-width: 760px) {
  /* battle fighter cards: implicit auto column grew to the head row (ava + name + "Победитель" + sum) and caused page h-scroll */
  .fighter { grid-template-columns: minmax(0, 1fr); }
  .fighter-head { flex-wrap: wrap; gap: 4px 6px; }
  .fighter-head .ava { width: 28px; height: 28px; font-size: 14px; border-radius: 6px; }
  .fighter-head .num { font-size: 13px; }
  .fighter-head .tag { order: 5; flex-basis: 100%; text-align: center; font-size: 11px; }
}
@media (max-width: 760px) {
  /* x3-x5 opening: five full-height reels were ~930px tall; compact the cells so most of them fit one screen */
  .rollers:has(> .roller:nth-child(3)) { gap: 6px; }
  .rollers:has(> .roller:nth-child(3)) .roller { padding-block: 6px; }
  .rollers:has(> .roller:nth-child(3)) .strip .item { padding: 4px 6px 6px; }
  .rollers:has(> .roller:nth-child(3)) .strip .pic { height: 44px; }
  .rollers:has(> .roller:nth-child(3)) .strip .item .model { display: none; }
  .rollers:has(> .roller:nth-child(3)) .strip .item .skin { font-size: 12px; }
}
@media (max-width: 760px) {
  /* header row 1 also holds the sound toggle (otherwise it is auto-placed into a 4th grid row) */
  .top .inner { grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "logo sound steam ava" "wallet wallet wallet wallet" "nav nav nav nav"; gap: 8px 6px; }
  .top .logo { overflow: hidden; white-space: nowrap; }
  .top .sound-btn { grid-area: sound; min-width: 40px; min-height: 40px; }
}
@media (max-width: 380px) {
  .top .logo { font-size: 16px; letter-spacing: .05em; gap: 6px; }
  .top #steam-btn { padding: 8px 10px; }
}
@media (pointer: coarse) {
  /* the 3D badge is a real button on touch screens: bigger hit area, same look */
  .inspect-btn { font-size: 11px; padding: 4px 8px; opacity: .9; }
  .inspect-btn::after { content: ""; position: absolute; inset: -10px; }
}