:root { --ink:#d9e7ff; --muted:#7886a3; --bg:#070a11; --panel:#101621; --line:rgba(150,184,231,.16); --cyan:#67e8f9; --lime:#d4ff5c; --orange:#ff9e57; }
#match-timer { color:var(--lime); font-family:"Rajdhani",sans-serif; font-size:20px; line-height:.55; font-weight:700; letter-spacing:1.5px; }
.hud-quest { position:absolute; top:52px; left:50%; transform:translateX(-50%); padding:8px 12px; max-width:340px; border:1px solid rgba(103,232,249,.24); background:rgba(7,14,23,.72); color:#c9dceb; text-align:center; font-size:10px; letter-spacing:.7px; }.hud-quest b { color:var(--cyan); }.hud-grenades { position:absolute; right:36px; top:60px; display:flex; gap:6px; }.grenade-chip { min-width:56px; padding:5px 7px; border:1px solid rgba(218,237,255,.22); background:rgba(7,14,23,.72); color:#d8e8f3; font-size:9px; text-align:center; }.grenade-chip b { display:block; color:var(--lime); font-size:13px; }.round-summary { display:none; position:absolute; z-index:8; top:50%; left:50%; width:min(760px,90vw); max-height:76vh; overflow:auto; transform:translate(-50%,-50%); padding:28px; border:1px solid rgba(212,255,92,.48); background:rgba(6,12,20,.94); box-shadow:0 20px 70px #000b; }.round-summary.show { display:block; }.round-summary h2 { margin:0 0 5px; color:var(--lime); font:700 40px/1 "Rajdhani",sans-serif; letter-spacing:1px; }.round-summary > p { margin:0 0 18px; color:#9dacbf; font-size:11px; }.round-summary table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }.round-summary th { color:#71839c; font-weight:500; letter-spacing:1px; }.round-summary th,.round-summary td { padding:9px 6px; border-bottom:1px solid rgba(178,213,244,.12); }.round-summary tr.player-row { background:rgba(212,255,92,.1); color:#f5fbff; }.round-summary .summary-foot { margin:18px 0 0; color:#aab9cc; font-size:10px; letter-spacing:1px; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:"Chakra Petch", sans-serif; overflow-x:hidden; }
button { font:inherit; color:inherit; cursor:pointer; }
.app-shell { min-height:100vh; background:#080c15; }
.topbar { height:74px; position:fixed; inset:0 0 auto; z-index:20; display:flex; align-items:center; padding:0 4vw; border-bottom:1px solid var(--line); background:rgba(7,10,17,.82); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; color:#f4f8ff; text-decoration:none; font-family:"Rajdhani",sans-serif; font-size:20px; font-weight:700; letter-spacing:2px; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--lime); color:#070a11; clip-path:polygon(0 0,100% 0,78% 100%,0 76%); font-size:20px; }
.muted { color:var(--cyan); font-size:.72em; margin-left:4px; }
.main-nav { display:flex; gap:28px; margin:auto; height:100%; }
.nav-link { border:0; background:none; letter-spacing:1.5px; color:#8591aa; font-size:12px; position:relative; padding:2px 0 0; }
.nav-link::after { content:""; position:absolute; height:2px; background:var(--lime); width:0; left:0; bottom:0; transition:width .2s; }
.nav-link:hover, .nav-link.active { color:#f4f8ff; }.nav-link.active::after { width:100%; }
.currency { display:flex; align-items:center; gap:8px; border:1px solid var(--line); padding:7px 11px; color:#fff; font-size:14px; font-weight:700; }.coin { color:var(--lime); font-size:18px; }
.screen { display:none; min-height:100vh; padding-top:74px; }.screen-active { display:block; }
.menu-screen { position:relative; min-height:100vh; overflow:hidden; isolation:isolate; background:linear-gradient(115deg,#090f1b 0%,#0d1523 48%,#120f29 100%); }
.hero-grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(rgba(125,187,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(125,187,255,.1) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(to right,black 15%,transparent 90%); }
.hero-noise { position:absolute; inset:0; opacity:.34; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; pointer-events:none; }
.hero-orb { position:absolute; width:55vw; aspect-ratio:1; filter:blur(10px); opacity:.84; mix-blend-mode:screen; border-radius:48% 52% 64% 36% / 44% 41% 59% 56%; animation:float 12s ease-in-out infinite alternate; }.orb-a { right:-10vw; top:8vh; background:radial-gradient(circle at 35% 30%,#ffd55c 0 4%,#ff5c7e 22%,#6527d8 46%,transparent 70%); }.orb-b { right:12vw; bottom:-44vh; background:radial-gradient(circle,#36e7cf,#165ed9 42%,transparent 69%); animation-delay:-4s; }.orb-c { right:2vw; top:45vh; width:30vw; background:radial-gradient(circle,#d4ff5c 0,#21cbba 32%,transparent 67%); animation-delay:-7s; }
@keyframes float { to { transform:translate(6vw,-4vh) rotate(18deg) scale(1.13); border-radius:65% 35% 41% 59% / 50% 63% 37% 50%; } }
.scan-line { position:absolute; width:105vw; height:1px; background:rgba(214,255,92,.28); transform:rotate(-22deg); top:48%; left:-12vw; box-shadow:0 0 25px 5px rgba(214,255,92,.12); }
.hero-copy { position:relative; z-index:2; padding:clamp(135px,19vh,205px) 7vw 9vh; }.eyebrow { color:var(--cyan); margin:0 0 18px; font-size:12px; font-weight:700; letter-spacing:2px; }.eyebrow span { display:inline-block; width:26px; height:2px; margin:0 10px 3px 0; background:var(--cyan); }
h1 { margin:0; font-family:"Rajdhani",sans-serif; font-size:clamp(60px,10vw,142px); line-height:.73; letter-spacing:-3px; font-weight:700; color:#f4f7fb; }h1 em { color:var(--lime); font-style:normal; }.hero-description { color:#aebbd0; line-height:1.55; margin:31px 0; font-size:15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }.button { min-width:150px; border:1px solid rgba(218,238,255,.25); background:rgba(6,12,21,.42); padding:14px 17px; font-weight:700; letter-spacing:1.4px; font-size:13px; transition:.2s; }.button:hover { transform:translateY(-2px); border-color:var(--cyan); }.button-primary { background:var(--lime); color:#0a1019; border-color:var(--lime); }.play-triangle { font-size:10px; margin-right:8px; }.button i { font-style:normal; color:var(--cyan); padding-left:8px; }
.hero-card { position:absolute; z-index:3; border:1px solid rgba(204,229,255,.22); background:rgba(10,16,29,.53); backdrop-filter:blur(13px); padding:16px; }.card-label { color:#8c9ab4; font-size:10px; letter-spacing:1.6px; }.card-label b { color:#f0f7ff; margin-left:8px; }.card-map { width:220px; right:16vw; top:18vh; }.mini-map { height:122px; position:relative; overflow:hidden; margin:12px 0; background:#111a28; border:1px solid rgba(207,236,255,.12); }.mini-map::before { content:""; position:absolute; width:130%; height:48px; top:38px; left:-14px; transform:rotate(-11deg); background:#293647; }.mini-road { position:absolute; background:#35455a; z-index:1; }.road-h { width:130%; height:12px; top:58px; left:-17px; transform:rotate(-11deg); }.road-v { height:140%; width:15px; left:130px; top:-15px; transform:rotate(14deg); }.mini-block { position:absolute; z-index:2; background:#172535; border:1px solid #476178; }.b1{width:42px;height:30px;left:22px;top:14px}.b2{width:53px;height:22px;right:9px;top:23px}.b3{width:57px;height:31px;left:19px;bottom:9px}.b4{width:30px;height:25px;right:31px;bottom:11px}.mini-map i { position:absolute; left:103px; top:52px; width:8px; height:8px; background:var(--lime); border-radius:50%; z-index:4; box-shadow:0 0 0 6px rgba(212,255,92,.13); }.card-map p { margin:0; font-size:9px; color:#8f9bb0; letter-spacing:1px; line-height:1.55; }.card-map strong { color:var(--cyan); }.card-loadout { right:5vw; bottom:8vh; width:205px; }.loadout-preview { display:flex; gap:7px; min-height:53px; margin:13px 0; }.preview-weapon { flex:1; padding:8px 5px; background:rgba(165,205,255,.07); border-left:2px solid var(--cyan); font-size:10px; color:#d5e4f6; overflow:hidden; }.preview-weapon small { display:block; color:#7d8ba3; font-size:8px; margin-top:3px; }.tiny-link { padding:0; border:0; background:none; color:var(--lime); font-size:10px; font-weight:700; letter-spacing:1px; }.corner-data { position:absolute; display:flex; gap:9px; color:#8190a9; font-size:9px; letter-spacing:1.5px; left:7vw; bottom:32px; z-index:2; }
.intel-drawer { position:fixed; z-index:25; right:0; top:30%; display:flex; transform:translateX(calc(100% - 38px)); transition:transform .35s cubic-bezier(.2,.7,.2,1); }.intel-drawer:hover, .intel-drawer:focus-within { transform:translateX(0); }.drawer-tab { width:38px; min-height:230px; background:var(--lime); color:#080d14; display:flex; align-items:center; justify-content:space-between; flex-direction:column; padding:14px 0; font-size:10px; font-weight:700; letter-spacing:1.3px; writing-mode:vertical-rl; }.tab-arrow { font-size:22px; font-weight:400; }.drawer-content { width:280px; min-height:230px; padding:23px; border:1px solid rgba(212,255,92,.42); border-right:0; background:rgba(8,14,24,.94); backdrop-filter:blur(14px); }.drawer-eyebrow { margin:0 0 5px; color:var(--lime); font-size:9px; letter-spacing:1.8px; }.drawer-content h2 { margin:0 0 15px; font-family:"Rajdhani"; font-size:29px; letter-spacing:1px; }.drawer-content article { display:flex; border-top:1px solid var(--line); padding:9px 0; gap:10px; }.drawer-content article span { color:var(--cyan); font-size:10px; }.drawer-content article p { margin:0; color:#a7b3c5; line-height:1.35; font-size:11px; }.drawer-foot { margin:8px 0 0; color:#67748c; font-size:8px; letter-spacing:1px; }
.interior-screen { position:relative; padding:126px 7vw 70px; overflow:hidden; background:radial-gradient(circle at 80% 10%,#14264a 0,transparent 28%),linear-gradient(135deg,#090d16,#0a111d 60%,#090f1b); }.interior-screen::before { content:""; position:absolute; width:45vw; height:45vw; right:-20vw; bottom:-16vw; opacity:.3; background:repeating-radial-gradient(circle,#1e4160 0 1px,transparent 1px 22px); }.section-heading { position:relative; z-index:1; }.section-heading h1 { font-size:clamp(50px,7vw,92px); }.section-heading > p:last-child { color:#9daac0; line-height:1.5; font-size:14px; }.case-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:18px; margin-top:47px; max-width:1100px; }.case-card { position:relative; overflow:hidden; min-height:352px; padding:22px; background:linear-gradient(145deg,rgba(29,42,61,.94),rgba(8,14,23,.95)); border:1px solid rgba(171,207,240,.2); transition:transform .2s,border-color .2s; }.case-card:hover { transform:translateY(-5px); border-color:var(--case); }.case-card::after { content:""; position:absolute; width:170px; height:170px; top:64px; right:-25px; border:1px solid var(--case); opacity:.33; transform:rotate(30deg); }.case-number { color:var(--case); font-size:11px; font-weight:700; letter-spacing:2px; }.case-card h2 { position:relative; z-index:1; font-family:"Rajdhani"; font-size:34px; line-height:.88; margin:14px 0 14px; }.case-icon { display:grid; place-items:center; width:120px; height:120px; position:relative; z-index:1; margin:0 auto 20px; color:var(--case); border:2px solid currentColor; box-shadow:inset 0 0 0 8px rgba(255,255,255,.03),0 0 35px rgba(99,224,244,.1); font-size:56px; transform:rotate(45deg); }.case-icon span { transform:rotate(-45deg); }.case-items { min-height:40px; border-top:1px solid var(--line); padding-top:11px; color:#aebbd0; font-size:11px; line-height:1.4; }.buy-case { position:absolute; z-index:2; width:calc(100% - 44px); left:22px; bottom:21px; border:1px solid var(--case); color:#f8fbff; background:rgba(12,18,28,.72); padding:11px; font-size:12px; font-weight:700; letter-spacing:1px; }.buy-case:hover { background:var(--case); color:#071019; }.shop-note { position:relative; z-index:1; margin-top:24px; max-width:760px; color:#8594aa; font-size:12px; }.shop-note span { color:var(--lime); font-weight:700; margin-right:7px; }
.arsenal-heading { display:inline-block; }.loadout-status { position:relative; z-index:2; display:flex; align-items:center; gap:16px; margin:40px 0 22px; padding:13px 15px; max-width:730px; border:1px solid var(--line); background:rgba(9,16,28,.8); color:#94a2b9; font-size:11px; letter-spacing:1px; }.loadout-slots { flex:1; display:flex; gap:6px; }.loadout-slot { min-width:135px; padding:8px; background:#121b2b; border-left:2px solid #46536b; color:#dfeaff; }.loadout-slot.empty { color:#66738a; }.loadout-status strong { color:var(--lime); font-size:12px; }.inventory-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; max-width:1100px; }.weapon-card { min-height:132px; padding:17px; background:linear-gradient(135deg,rgba(25,37,55,.88),rgba(8,14,24,.94)); border:1px solid rgba(177,214,249,.14); position:relative; transition:.2s; }.weapon-card:hover { border-color:var(--weapon); transform:translateY(-2px); }.weapon-card.selected { border-color:var(--lime); box-shadow:inset 0 0 0 1px var(--lime); }.weapon-card.selected::after { content:"В БОЮ"; position:absolute; right:10px; top:10px; font-size:9px; color:var(--lime); letter-spacing:1px; }.weapon-type { color:#71829b; font-size:9px; letter-spacing:1.3px; }.weapon-card h3 { margin:8px 0 3px; font-size:21px; font-family:"Rajdhani"; line-height:1; }.weapon-card p { margin:0; color:#90a0b8; font-size:10px; }.weapon-stripe { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--weapon); }.empty-arsenal { grid-column:1/-1; padding:25px; border:1px dashed var(--line); color:#8593aa; }
.game-screen { position:fixed; z-index:31; inset:0; padding:0; background:#030508; }.game-screen canvas { width:100vw; height:100vh; display:block; cursor:none; }.game-hud { pointer-events:none; position:absolute; inset:0; padding:22px; text-shadow:0 2px 5px #000; }.hud-top { display:flex; justify-content:space-between; margin-left:56px; color:#b8c7da; font-size:11px; letter-spacing:1.3px; }.hud-logo { color:var(--lime); font-weight:700; }.hud-bottom-left { position:absolute; bottom:36px; left:38px; width:220px; }.health-line { display:flex; justify-content:space-between; font-size:10px; color:#b5c5d6; letter-spacing:1px; }.health-line strong { color:#f4f9ff; font-size:18px; margin-top:-5px; }.health-bar { height:5px; margin:6px 0 10px; background:rgba(195,220,247,.18); }.health-bar i { display:block; height:100%; width:100%; background:var(--lime); box-shadow:0 0 8px var(--lime); transition:width .15s; }.equipped-name { font-family:"Rajdhani"; color:#f5f8ff; font-size:25px; font-weight:700; letter-spacing:1px; }.hud-bottom-right { position:absolute; right:38px; bottom:35px; text-align:right; }.ammo { display:flex; justify-content:flex-end; align-items:baseline; color:#f4f8ff; font-family:"Rajdhani"; }.ammo strong { font-size:52px; line-height:.8; }.ammo span { color:#99a9c0; font-size:20px; }.ammo i { font-style:normal; }.ammo-meta { margin-top:8px; color:#9baac1; font-size:10px; letter-spacing:1px; }.hud-controls { position:absolute; left:50%; transform:translateX(-50%); bottom:24px; color:rgba(199,217,237,.55); font-size:9px; letter-spacing:1px; white-space:nowrap; }.exit-match { position:absolute; right:22px; top:52px; color:#c4d3e5; padding:8px; background:rgba(7,12,20,.5); border:1px solid rgba(185,211,240,.2); font-size:10px; letter-spacing:1px; }.exit-match:hover { border-color:var(--lime); color:var(--lime); }.game-message { pointer-events:none; position:absolute; z-index:3; top:50%; left:50%; width:min(500px,80vw); transform:translate(-50%,-50%); text-align:center; color:#f2f8ff; font-family:"Rajdhani"; font-weight:700; font-size:32px; letter-spacing:2px; transition:opacity .25s; text-shadow:0 3px 20px #000; }.game-message small { display:block; color:#acbad0; font-family:"Chakra Petch"; font-size:11px; letter-spacing:1px; margin-top:12px; }.toast { position:fixed; z-index:60; opacity:0; top:91px; left:50%; transform:translate(-50%,-15px); transition:.25s; pointer-events:none; background:#e7f4ff; color:#08101d; padding:11px 15px; font-size:12px; font-weight:700; box-shadow:0 8px 30px #0008; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:800px) { .topbar{height:62px;padding:0 16px}.brand{font-size:15px}.main-nav{gap:14px}.nav-link{font-size:9px}.screen{padding-top:62px}.hero-copy{padding:130px 25px 100px}.hero-card{display:none}.hero-actions{max-width:320px}.button{min-width:140px}.interior-screen{padding:105px 25px 48px}.case-grid{grid-template-columns:1fr;margin-top:28px}.case-card{min-height:310px}.intel-drawer{top:38%;transform:translateX(calc(100% - 30px))}.drawer-tab{width:30px}.drawer-content{width:245px}.loadout-status{align-items:flex-start;flex-wrap:wrap}.loadout-slots{flex-basis:100%}.hud-top{margin-left:0;font-size:9px}.hud-controls{display:none}.hud-bottom-left{left:18px;bottom:21px;width:170px}.hud-bottom-right{right:18px;bottom:23px}.ammo strong{font-size:42px}.exit-match{top:15px;right:13px}.game-hud{padding:15px}.inventory-grid{grid-template-columns:1fr 1fr}.weapon-card{min-height:118px;padding:13px}.weapon-card h3{font-size:18px} }

/* Loadout extensions, settings and the case-opening sequence. */
.case-card { min-height:386px; }
.case-items { min-height:67px; }
.buy-case { bottom:16px; }
.gear-section { position:relative; z-index:1; max-width:1100px; margin-top:54px; padding-top:24px; border-top:1px solid var(--line); display:grid; grid-template-columns:260px 1fr; gap:26px; }
.gear-section h2 { margin:0 0 9px; color:#f3f8ff; font:700 30px/1 "Rajdhani",sans-serif; letter-spacing:1px; }.gear-section > div > p:last-child { color:#98a9bf; font-size:11px; line-height:1.5; }.gear-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; align-content:start; }.gear-card { min-height:112px; padding:15px; text-align:left; border:1px solid rgba(177,214,249,.16); background:linear-gradient(135deg,rgba(25,37,55,.88),rgba(8,14,24,.94)); color:#e6eff8; }.gear-card:hover,.gear-card.selected { border-color:var(--gear); box-shadow:inset 0 0 0 1px var(--gear); }.gear-card small { display:block; margin-bottom:7px; color:#8fa2bb; letter-spacing:1px; }.gear-card b { display:block; font:700 22px/1 "Rajdhani",sans-serif; }.gear-card span { display:block; margin-top:7px; color:#a9b9ca; font-size:10px; }.gear-card em { float:right; color:var(--lime); font-size:15px; font-style:normal; }.gear-empty { padding:19px; border:1px dashed var(--line); color:#8090a6; font-size:11px; }
.settings-panel { position:relative; z-index:1; width:min(780px,100%); margin-top:44px; border:1px solid rgba(171,207,240,.18); background:rgba(9,16,28,.78); }.settings-label { margin:0; padding:15px 19px 10px; color:var(--cyan); font-size:10px; font-weight:700; letter-spacing:1.6px; }.setting-row { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:13px 19px; border-top:1px solid rgba(177,214,249,.1); cursor:pointer; }.setting-row span { display:grid; gap:5px; }.setting-row b { color:#e9f2fb; font-size:12px; }.setting-row small,.danger-zone small { color:#8fa0b6; font-size:10px; line-height:1.35; }.setting-row input { position:absolute; opacity:0; pointer-events:none; }.switch { flex:0 0 42px; height:22px; padding:3px; border:1px solid #50647f; background:#101927; transition:.2s; }.switch::after { content:""; display:block; width:14px; height:14px; background:#8191a5; transition:.2s; }.setting-row input:checked + .switch { border-color:var(--lime); background:rgba(212,255,92,.14); }.setting-row input:checked + .switch::after { transform:translateX(18px); background:var(--lime); box-shadow:0 0 10px var(--lime); }.sliders-label { margin-top:12px; border-top:1px solid rgba(177,214,249,.1); }.settings-placeholder { margin:0 19px; padding:15px; border:1px dashed rgba(177,214,249,.18); color:#7688a0; font-size:11px; }.danger-label { margin-top:12px; border-top:1px solid rgba(177,214,249,.1); color:#ff8a92; }.danger-zone { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 19px 20px; }.danger-zone > div { display:grid; gap:5px; }.danger-zone b { color:#f4d8db; font-size:12px; }.danger-button { border:1px solid rgba(255,100,117,.6); padding:10px 12px; background:rgba(122,34,48,.18); color:#ffb5bc; font-size:10px; font-weight:700; letter-spacing:1px; }.danger-button.confirm { background:#e95d6c; border-color:#ff9ba4; color:#171019; }
.case-opening { position:fixed; z-index:80; inset:0; display:grid; place-items:center; padding:20px; background:rgba(3,6,11,.84); opacity:0; visibility:hidden; transition:opacity .2s,visibility .2s; }.case-opening.show { opacity:1; visibility:visible; }.case-opening-box { width:min(420px,90vw); padding:34px; text-align:center; border:1px solid rgba(212,255,92,.5); background:radial-gradient(circle at 50% 30%,#1c2a3e,#090f1a 70%); box-shadow:0 0 80px rgba(103,232,249,.13); }.case-opening-box p { margin:0; color:var(--cyan); font-size:10px; letter-spacing:2px; }.case-spinner { width:150px; height:150px; display:grid; place-items:center; position:relative; margin:25px auto; border:1px solid rgba(212,255,92,.24); transform:rotate(45deg); overflow:hidden; }.case-spinner::before,.case-spinner::after { content:""; position:absolute; inset:-45%; background:conic-gradient(transparent,rgba(212,255,92,.8),transparent 24%); animation:caseSpin 1.1s linear infinite; }.case-spinner::after { animation-delay:-.55s; opacity:.55; }.case-spinner i { position:absolute; inset:13px; z-index:1; background:#0d1726; }.case-spinner b { position:relative; z-index:2; color:var(--lime); font-size:55px; transform:rotate(-45deg); }.case-opening-box strong { display:block; color:#f1f7ff; font:700 29px/1 "Rajdhani",sans-serif; letter-spacing:1px; }.case-opening-box small { display:block; min-height:16px; margin-top:11px; color:#9bb0c8; font-size:10px; letter-spacing:1px; }.case-opening.revealed .case-spinner::before,.case-opening.revealed .case-spinner::after { animation-play-state:paused; }.case-opening.revealed .case-spinner { border-color:var(--lime); box-shadow:0 0 34px rgba(212,255,92,.38); } @keyframes caseSpin { to { transform:rotate(1turn); } }
.low-detail .hero-orb,.low-detail .scan-line,.low-detail .hero-noise { display:none; }.low-detail .hero-grid { opacity:.14; }.low-detail .case-card,.low-detail .weapon-card { transition:none; }.low-detail .case-card:hover,.low-detail .weapon-card:hover { transform:none; }
.danger-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }.unlock-button { border-color:rgba(103,232,249,.62); background:rgba(24,112,132,.15); color:#baf6ff; }.unlock-button.confirm { background:#75eafa; border-color:#baf6ff; color:#071218; }
.app-shell { position:relative; }.app-shell::after { content:""; position:fixed; z-index:100; pointer-events:none; inset:0; opacity:0; background:linear-gradient(105deg,transparent 0 42%,rgba(103,232,249,.18) 48%,rgba(212,255,92,.26) 52%,transparent 58%); transform:translateX(-115%); }.app-shell.scene-shift::after { animation:sceneShift .46s cubic-bezier(.2,.8,.2,1); } @keyframes sceneShift { 12%{opacity:1} 55%{opacity:.75} 100%{opacity:0;transform:translateX(115%)} }
.screen-active { animation:screenReveal .38s cubic-bezier(.18,.72,.24,1); } @keyframes screenReveal { from { opacity:0; transform:translateY(10px) scale(.992); } to { opacity:1; transform:none; } }
.menu-screen { background:radial-gradient(circle at 75% 20%,rgba(255,111,128,.2),transparent 26%),radial-gradient(circle at 63% 72%,rgba(25,221,210,.18),transparent 30%),linear-gradient(118deg,#050a13 0%,#0b1628 50%,#140d26 100%); }.menu-screen::before { content:""; position:absolute; z-index:1; width:64vw; height:64vw; right:-18vw; top:3vh; border:1px solid rgba(154,224,245,.16); border-radius:42% 58% 50% 50%; box-shadow:inset 0 0 90px rgba(89,211,245,.06),0 0 120px rgba(185,89,246,.08); transform:rotate(-20deg); }.menu-screen::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(5,10,18,.66),transparent 55%),repeating-linear-gradient(0deg,transparent 0 7px,rgba(202,234,255,.018) 8px); }.hero-copy { max-width:740px; }.hero-copy > * { position:relative; z-index:2; }.hero-copy h1 { text-shadow:0 0 34px rgba(181,214,255,.14); }.hero-description { max-width:470px; padding-left:17px; border-left:2px solid rgba(103,232,249,.56); }.hero-actions { margin-top:38px; }.button { backdrop-filter:blur(10px); }.button-primary { box-shadow:0 10px 28px rgba(212,255,92,.22); }.hero-card { border-color:rgba(179,226,255,.3); box-shadow:0 18px 70px rgba(0,0,0,.32); }.card-map { animation:cardFloat 6s ease-in-out infinite alternate; }.card-loadout { animation:cardFloat 7s -2s ease-in-out infinite alternate; } @keyframes cardFloat { to { transform:translateY(-11px); } }.menu-radar { position:absolute; z-index:3; right:7vw; bottom:7vh; width:154px; height:154px; display:grid; place-items:center; border:1px solid rgba(103,232,249,.35); border-radius:50%; color:#bfeaf3; font-size:8px; letter-spacing:1.4px; text-align:center; background:radial-gradient(circle,rgba(103,232,249,.1) 0 3%,transparent 4% 28%,rgba(103,232,249,.04) 29% 30%,transparent 31% 57%,rgba(103,232,249,.08) 58% 59%,transparent 60%); box-shadow:0 0 42px rgba(103,232,249,.1),inset 0 0 30px rgba(103,232,249,.08); }.menu-radar::before,.menu-radar::after { content:""; position:absolute; background:rgba(103,232,249,.2); }.menu-radar::before { width:1px; height:100%; }.menu-radar::after { height:1px; width:100%; }.menu-radar i { position:absolute; width:48%; height:1px; transform-origin:left center; transform:rotate(-28deg); left:50%; top:50%; background:linear-gradient(90deg,rgba(212,255,92,.9),transparent); animation:radarSweep 2.8s linear infinite; }.menu-radar b { color:var(--lime); font-weight:700; font-size:8px; } @keyframes radarSweep { to { transform:rotate(332deg); } }
.hud-grenades { left:38px; right:auto; top:auto; bottom:102px; }.grenade-chip { min-width:142px; text-align:left; border-left:2px solid var(--lime); }.grenade-chip b { text-align:right; }.hud-quest:empty { display:none; }.equipped-name { transition:opacity .18s,transform .18s; }.weapon-card.selected { animation:loadoutLock .35s ease-out; } @keyframes loadoutLock { 0% { transform:scale(.97); } 70% { transform:scale(1.015); } }
@media (max-width:800px) { .menu-radar{display:none}.hud-grenades{left:18px;bottom:86px}.grenade-chip{min-width:122px}.hero-description{font-size:12px}.menu-screen::before{width:110vw;height:110vw;right:-55vw;top:6vh} }
@media (max-width:800px) { .gear-section{grid-template-columns:1fr;margin-top:36px}.gear-grid{grid-template-columns:1fr 1fr}.settings-panel{margin-top:30px}.setting-row{gap:14px}.setting-row b{font-size:11px}.danger-zone{align-items:flex-start;flex-direction:column}.danger-actions{justify-content:flex-start}.case-card{min-height:386px}.main-nav{gap:8px}.nav-link{font-size:8px;letter-spacing:.6px} }
.menu-radar { right:28vw; }
.equipped-name.switching { color:var(--cyan); opacity:.55; transform:translateX(10px); animation:weaponSwitch .5s ease-in-out infinite alternate; } @keyframes weaponSwitch { to { opacity:1; transform:translateX(0); letter-spacing:3px; } }

/* Each long menu owns its scrollbar, so an itch.io iframe keeps navigation available at 1280×720. */
.interior-screen { height:100vh; min-height:0; overflow-x:hidden; overflow-y:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; }
.interior-screen { scrollbar-color:var(--cyan) rgba(6,12,21,.76); scrollbar-width:thin; }
.interior-screen::-webkit-scrollbar { width:13px; }.interior-screen::-webkit-scrollbar-track { background:rgba(6,12,21,.76); border-left:1px solid rgba(130,178,218,.18); }.interior-screen::-webkit-scrollbar-thumb { min-height:58px; border:3px solid rgba(6,12,21,.76); border-radius:10px; background:linear-gradient(var(--cyan),var(--lime)); }.interior-screen::-webkit-scrollbar-thumb:hover { background:var(--lime); }