/* css/style.css */
/* DRENCH//ZONE — original street-art UI. Black / paper white / crimson / cyan, sticker cards,
   halftone, hand-cut shapes, elastic motion. */
:root {
  --red: #ff1f5a; --red2: #ff5c8a; --cyan: #12d8ff; --cyan2: #7af0ff; --ink: #0b0a10; --paper: #f4efe4; --yel: #ffe14d;
  --t0: var(--red); --t1: var(--cyan);
  --hud-scale: 1;
  --spring: cubic-bezier(.2, 1.6, .4, 1);
  --snap: cubic-bezier(.7, 0, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; color: var(--paper); font-family: 'Barlow Condensed', system-ui, sans-serif; user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hidden { display: none !important; }

.screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.screen.active { opacity: 1; visibility: visible; transition: opacity .35s; pointer-events: auto; }
#hud.active, #countdown.active, #matchintro.active, #bigmap.active { pointer-events: none; }

.halftone { position: absolute; inset: -10%; background-image: radial-gradient(circle, rgba(255,255,255,.09) 1.3px, transparent 1.6px); background-size: 9px 9px; mask-image: linear-gradient(115deg, #000 0%, transparent 55%, #000 100%); }

/* ---------- logo ---------- */
.logo { font-family: 'Bungee', sans-serif; letter-spacing: -.02em; line-height: .9; display: inline-flex; align-items: baseline; transform: skewX(-8deg) rotate(-3deg); }
.logo span { display: inline-block; }
.logo .l1 { color: var(--paper); text-shadow: 3px 0 var(--red), -3px 0 var(--cyan), 0 8px 0 #000; }
.logo .sl { color: var(--red); margin: 0 .04em; transform: translateY(-.06em); text-shadow: 0 6px 0 #000; }
.logo .l2 { color: var(--cyan); text-shadow: 3px 3px 0 var(--red), 0 8px 0 #000; transform: translateY(.12em) rotate(4deg); }
.logo.big { font-size: clamp(56px, 11vw, 170px); }

/* ---------- loading ---------- */
#loading { background: radial-gradient(ellipse at 30% 40%, #2a0f24, #07060b 70%); display: grid; place-items: center; }
.load-wrap { text-align: center; display: grid; gap: 28px; place-items: center; }
.load-bar { width: min(520px, 80vw); height: 14px; background: #1a1720; clip-path: polygon(0 20%, 100% 0, 99% 100%, 1% 80%); }
.load-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--red), var(--yel), var(--cyan)); transition: width .25s; }
.load-text { font-weight: 700; letter-spacing: .2em; font-size: 15px; opacity: .7; text-transform: uppercase; }
.btn-start { font-family: 'Bungee'; font-size: 26px; padding: 18px 42px; background: var(--paper); color: var(--ink); clip-path: polygon(3% 0, 100% 8%, 96% 100%, 0 88%); animation: pulse 1.2s infinite; pointer-events: auto; }
.btn-start:hover { background: var(--yel); }
@keyframes pulse { 50% { transform: scale(1.06) rotate(-1deg); } }

/* ---------- intro ---------- */
#intro { background: transparent; overflow: hidden; }
#intro.dark { background: #000; }
#intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-flood { position: absolute; width: 170vmax; height: 170vmax; border-radius: 43% 57% 38% 62% / 55% 38% 62% 45%; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); filter: url(#rough); }
.intro-flood.a { background: radial-gradient(circle at 40% 40%, var(--red2), var(--red) 45%, #7a0028); }
.intro-flood.b { background: radial-gradient(circle at 60% 40%, var(--cyan2), var(--cyan) 45%, #06307a); }
#intro.flood .intro-flood.a { animation: floodA 1.3s var(--snap) forwards; }
#intro.flood .intro-flood.b { animation: floodB 1.3s .18s var(--snap) forwards; }
@keyframes floodA { 0% { transform: translate(-150%, -40%) scale(.2) rotate(0); } 70% { transform: translate(-50%, -50%) scale(1) rotate(40deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3) rotate(60deg); opacity: 0; } }
@keyframes floodB { 0% { transform: translate(50%, -60%) scale(.2) rotate(0); } 70% { transform: translate(-50%, -50%) scale(.9) rotate(-50deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.4) rotate(-70deg); opacity: 0; } }
.intro-hit { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; transform: translate(-50%, -50%) scale(0) rotate(-12deg); clip-path: url(#splatClip); background: radial-gradient(circle at 45% 45%, var(--paper) 0 18%, var(--red) 19% 46%, var(--cyan) 47% 60%, #000 61%); }
#intro.hit .intro-hit { animation: hit 1.6s forwards; }
@keyframes hit { 0% { transform: translate(-50%, -50%) scale(0) rotate(-12deg); } 12% { transform: translate(-50%, -50%) scale(1.05) rotate(-4deg); } 22% { transform: translate(-50%, -50%) scale(.98) rotate(-6deg); } 70% { transform: translate(-50%, -50%) scale(.98) rotate(-6deg); } 100% { transform: translate(-50%, -50%) scale(.28) rotate(-10deg); opacity: 0; } }
.intro-logo { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) skewX(-8deg) rotate(-3deg); }
.intro-logo span { opacity: 0; }
#intro.logo .intro-logo .l1 { animation: popIn .7s var(--spring) forwards; }
#intro.logo .intro-logo .sl { animation: popIn .7s .12s var(--spring) forwards; }
#intro.logo .intro-logo .l2 { animation: popIn .8s .22s var(--spring) forwards; }
@keyframes popIn { 0% { opacity: 0; transform: translateY(80px) scale(.3) rotate(-20deg); } 100% { opacity: 1; } }
.intro-tag { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); font-weight: 900; font-style: italic; letter-spacing: .5em; font-size: clamp(14px, 1.8vw, 24px); opacity: 0; }
#intro.logo .intro-tag { animation: fadeUp .6s .7s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.skip { position: absolute; right: 24px; bottom: 20px; font-weight: 700; letter-spacing: .2em; opacity: .6; padding: 8px 14px; pointer-events: auto; }
.skip:hover { opacity: 1; }

/* ---------- menu with parallax ---------- */
#menu { overflow: hidden; }
.par { position: absolute; inset: 0; will-change: transform; }
.layer-bg { background: linear-gradient(100deg, rgba(8,6,14,.88) 0%, rgba(8,6,14,.55) 34%, transparent 58%); }
.blob { position: absolute; border-radius: 41% 59% 47% 53% / 52% 38% 62% 48%; filter: url(#rough) blur(1px); opacity: .9; }
.blob.b1 { width: 46vmax; height: 46vmax; left: -18vmax; top: -16vmax; background: radial-gradient(circle at 60% 60%, var(--red), #6d0022 70%); animation: morph 11s ease-in-out infinite; }
.blob.b2 { width: 30vmax; height: 30vmax; left: -10vmax; bottom: -14vmax; background: radial-gradient(circle at 40% 40%, var(--cyan), #062e70 70%); animation: morph 13s ease-in-out infinite reverse; }
@keyframes morph { 50% { border-radius: 58% 42% 36% 64% / 42% 61% 39% 58%; transform: rotate(18deg) scale(1.05); } }
.stroke { position: absolute; height: 22px; background: var(--paper); clip-path: polygon(0 40%, 3% 0, 30% 20%, 60% 0, 100% 30%, 97% 100%, 60% 75%, 30% 100%, 2% 80%); opacity: .92; }
.stroke.s1 { width: 38vw; left: 3vw; top: 34vh; transform: rotate(-6deg); background: var(--yel); }
.stroke.s2 { width: 18vw; left: 22vw; top: 86vh; transform: rotate(4deg); background: var(--red); height: 12px; }
.stroke.s3 { width: 9vw; right: 6vw; top: 12vh; transform: rotate(-14deg); background: var(--cyan); height: 10px; }
.menu-logo { position: absolute; left: 5vw; top: 7vh; font-size: clamp(44px, 6.6vw, 104px); }
.menu-nav { position: absolute; left: 5vw; top: 38vh; display: grid; gap: 10px; }
.mbtn { position: relative; display: grid; text-align: left; padding: 10px 44px 10px 22px; min-width: 330px; background: rgba(12,10,18,.8); clip-path: polygon(0 6%, 97% 0, 100% 88%, 3% 100%); transition: transform .25s var(--spring), background .2s; overflow: hidden; }
.mbtn::before { content: ''; position: absolute; inset: 0; background: var(--paper); transform: translateX(-102%) skewX(-18deg); transition: transform .28s var(--snap); z-index: 0; }
.mbtn > * { position: relative; z-index: 1; }
.mbtn b { font-family: 'Bungee'; font-size: 30px; font-weight: 400; line-height: 1.05; letter-spacing: .01em; }
.mbtn small { font-weight: 700; letter-spacing: .14em; font-size: 13px; opacity: .65; text-transform: uppercase; }
.mbtn:nth-child(2n) { clip-path: polygon(2% 0, 100% 8%, 98% 100%, 0 92%); }
.mbtn.sel, .mbtn:hover { transform: translateX(22px) rotate(-1.2deg) scale(1.03); color: var(--ink); }
.mbtn.sel::before, .mbtn:hover::before { transform: translateX(0) skewX(-18deg) scaleX(1.3); }
.mbtn.hot.sel::before, .mbtn.hot:hover::before { background: var(--red); }
.mbtn.hot.sel, .mbtn.hot:hover { color: var(--paper); }
.mbtn.sel::after { content: '▶'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 18px; }
.sticker { background: var(--paper); color: var(--ink); padding: 14px 20px; clip-path: polygon(0 4%, 98% 0, 100% 94%, 2% 100%); box-shadow: 0 0 0 3px #000; }
.menu-card { position: absolute; right: 6vw; bottom: 10vh; display: grid; transform: rotate(3deg); min-width: 240px; }
.menu-card .tag { font-weight: 900; font-size: 12px; letter-spacing: .3em; color: var(--red); }
.menu-card b { font-family: 'Bungee'; font-size: 34px; font-weight: 400; }
.menu-card small { font-weight: 700; letter-spacing: .15em; }
.menu-foot { position: absolute; left: 5vw; bottom: 3vh; font-size: 13px; letter-spacing: .14em; opacity: .5; text-transform: uppercase; }
#menu.active .menu-nav .mbtn { animation: slideIn .6s var(--spring) backwards; }
#menu.active .menu-nav .mbtn:nth-child(1) { animation-delay: .05s; } #menu.active .menu-nav .mbtn:nth-child(2) { animation-delay: .1s; }
#menu.active .menu-nav .mbtn:nth-child(3) { animation-delay: .15s; } #menu.active .menu-nav .mbtn:nth-child(4) { animation-delay: .2s; } #menu.active .menu-nav .mbtn:nth-child(5) { animation-delay: .25s; }
#menu.active .menu-logo { animation: popIn .8s var(--spring) backwards; }
#menu.active .menu-card { animation: stickerIn .7s .3s var(--spring) backwards; }
@keyframes slideIn { from { opacity: 0; transform: translateX(-120px) rotate(-6deg); } }
@keyframes stickerIn { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }

/* ---------- panels ---------- */
.panel { background: linear-gradient(120deg, rgba(8,6,14,.94), rgba(20,8,20,.86)); backdrop-filter: blur(6px); padding: 5vh 5vw; overflow: auto; }
.panel.small { display: grid; place-content: center; }
.panel.small .menu-nav { position: static; }
.panel-head { display: flex; align-items: center; gap: 30px; margin-bottom: 26px; }
.panel-head h2 { font-family: 'Bungee'; font-weight: 400; font-size: clamp(40px, 5vw, 72px); transform: skewX(-8deg) rotate(-2deg); text-shadow: 4px 0 var(--red), -4px 0 var(--cyan); }
.back { font-weight: 900; letter-spacing: .2em; padding: 8px 16px; background: var(--paper); color: var(--ink); clip-path: polygon(4% 0, 100% 10%, 96% 100%, 0 90%); }
.back:hover { background: var(--yel); }
.loadout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; max-width: 1200px; }
.wcard { position: relative; padding: 14px 16px 16px; background: #15121c; clip-path: polygon(0 3%, 97% 0, 100% 96%, 3% 100%); display: grid; gap: 6px; text-align: left; transition: transform .25s var(--spring), background .2s; }
.wcard img { width: 100%; aspect-ratio: 1.4; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.wcard b { font-family: 'Bungee'; font-weight: 400; font-size: 22px; }
.wcard small { letter-spacing: .15em; font-weight: 700; opacity: .7; }
.wcard:hover, .wcard.sel { transform: rotate(-1.5deg) scale(1.04); background: #221b2c; }
.wcard.on { box-shadow: inset 0 0 0 4px var(--red); background: #2a1020; }
.wcard.on::after { content: 'AUSGERÜSTET'; position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 900; letter-spacing: .2em; background: var(--red); padding: 2px 6px; }
.loadout-detail { margin-top: 24px; max-width: 760px; display: grid; gap: 10px; transform: rotate(-.6deg); }
.loadout-detail h3 { font-family: 'Bungee'; font-weight: 400; font-size: 28px; }
.stat { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; font-weight: 900; letter-spacing: .1em; font-size: 14px; }
.stat i { display: block; height: 10px; background: linear-gradient(90deg, var(--red), var(--yel)); clip-path: polygon(0 0, 100% 20%, 98% 100%, 0 80%); }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tabs button { font-weight: 900; letter-spacing: .15em; padding: 10px 18px; background: #1b1722; clip-path: polygon(3% 0, 100% 6%, 97% 100%, 0 94%); }
.tabs button.on { background: var(--cyan); color: var(--ink); }
.settings-body { display: grid; gap: 6px; max-width: 820px; }
.row { display: grid; grid-template-columns: 1fr 320px; align-items: center; gap: 20px; padding: 10px 16px; background: rgba(255,255,255,.03); clip-path: polygon(0 0, 100% 6%, 99.5% 100%, .5% 94%); }
.row:hover { background: rgba(255,255,255,.08); }
.row label { font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.row .note { font-size: 12px; opacity: .5; letter-spacing: .1em; display: block; }
.row input[type=range] { width: 100%; accent-color: var(--red); }
.row select { background: #111; color: var(--paper); font: inherit; font-weight: 700; font-size: 18px; padding: 6px 10px; border: 2px solid #333; }
.row .val { font-weight: 900; margin-left: 8px; }
.toggle { justify-self: start; width: 64px; height: 30px; background: #333; clip-path: polygon(4% 0, 100% 8%, 96% 100%, 0 92%); position: relative; }
.toggle::after { content: ''; position: absolute; top: 4px; left: 5px; width: 24px; height: 22px; background: var(--paper); transition: left .2s var(--spring); }
.toggle.on { background: var(--red); } .toggle.on::after { left: 35px; }
.controls-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; max-width: 1200px; }
.controls-grid .sticker { display: grid; gap: 8px; font-size: 18px; font-weight: 500; }
.controls-grid .sticker:nth-child(2) { transform: rotate(1deg); } .controls-grid .sticker:nth-child(3) { transform: rotate(-1deg); background: var(--yel); }
.controls-grid h3 { font-family: 'Bungee'; font-weight: 400; font-size: 24px; }
kbd { font-family: inherit; font-weight: 900; background: var(--ink); color: var(--paper); padding: 1px 8px; margin-right: 6px; display: inline-block; transform: skewX(-8deg); }

/* ---------- pre-match lobby ---------- */
.pm { pointer-events: auto; background: linear-gradient(90deg, rgba(6,10,40,.92) 0%, rgba(6,10,40,.8) 52%, rgba(6,10,40,0) 72%); }
.pm-panel { position: absolute; left: 3vw; top: 3vh; bottom: 3vh; width: min(760px, 62vw); display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; overflow: auto; padding-right: 10px; }
.pm-head { display: flex; align-items: center; gap: 16px; }
.pm-head h2 { font-family: 'Bungee'; font-weight: 400; font-size: clamp(30px, 3.6vw, 52px); text-shadow: 4px 0 var(--t0), -4px 0 var(--t1); transform: skewX(-8deg); }
.pm-mode { font-family: 'Bungee'; font-size: 18px; padding: 4px 14px; border-radius: 12px; background: #ffd84a; color: #0b1446; }
.pm-head .back { margin-left: auto; }
.pm-sec { padding: 12px 14px; border-radius: 20px; background: rgba(12,22,80,.72); box-shadow: inset 0 0 0 2px rgba(83,216,255,.4); }
.pm-sec h3 { font-family: 'Bungee'; font-weight: 400; font-size: 18px; margin-bottom: 8px; letter-spacing: .04em; }
.pm-weapons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pm-w { display: grid; justify-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.06); transition: transform .2s var(--spring); }
.pm-w img { width: 100%; aspect-ratio: 1.3; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.pm-w b { font-family: 'Bungee'; font-weight: 400; font-size: 13px; }
.pm-w small { font-size: 10px; font-weight: 900; letter-spacing: .08em; opacity: .7; }
.pm-w:hover { transform: translateY(-3px); }
.pm-w.on { background: linear-gradient(180deg, #1a2a86, #0b1446); box-shadow: inset 0 0 0 3px #53d8ff, 0 0 18px rgba(83,216,255,.5); }
.pm-wdesc { margin-top: 8px; font-weight: 700; font-size: 14px; opacity: .9; }
.pm-wdesc span { color: #ffd84a; font-weight: 900; margin-left: 6px; }
.pm-skins { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.pm-s { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.06); }
.pm-s i { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--st) 45%, #111 120%); box-shadow: 0 0 calc(var(--sg) * 7px) var(--st), inset 0 -4px 8px rgba(0,0,0,.4); }
.pm-s.mode1 i { background: repeating-linear-gradient(0deg, var(--st) 0 3px, rgba(255,255,255,.2) 3px 6px); }
.pm-s.mode2 i { background: radial-gradient(circle at 40% 40%, #ff8a1f, #2a1410 60%); box-shadow: 0 0 12px #ff5a00; }
.pm-s b { font-family: 'Bungee'; font-weight: 400; font-size: 11px; }
.pm-s small { font-size: 10px; font-weight: 900; color: #ffd84a; }
.pm-s.on { box-shadow: inset 0 0 0 3px #53d8ff, 0 0 16px rgba(83,216,255,.5); background: rgba(83,216,255,.15); }
.pm-s.locked { opacity: .5; }
.pm-s.locked i { filter: grayscale(.8) brightness(.6); }
.pm-maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pm-m { position: relative; display: grid; align-content: end; gap: 6px; min-height: 120px; padding: 12px; border-radius: 18px; text-align: left; overflow: hidden; background: linear-gradient(160deg, var(--m1), var(--m2)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); transition: transform .2s var(--spring), box-shadow .15s; }
.pm-m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(transparent, rgba(5,8,30,.9)); }
.pm-m > * { position: relative; z-index: 1; }
.pm-m b { font-family: 'Bungee'; font-weight: 400; font-size: 17px; text-shadow: 2px 2px 0 #0b1446; }
.pm-m .tag-new { position: absolute; top: 8px; right: 8px; font-family: 'Bungee'; font-size: 12px; background: #ffd84a; color: #0b1446; padding: 2px 8px; border-radius: 8px; transform: rotate(6deg); z-index: 2; }
.pm-votes { position: relative; height: 18px; border-radius: 9px; background: rgba(0,0,0,.45); overflow: hidden; }
.pm-votes i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #53d8ff, #a8f000); transition: width .35s; }
.pm-votes span { position: relative; font-size: 11px; font-weight: 900; padding-left: 8px; line-height: 18px; }
.pm-m.on { box-shadow: inset 0 0 0 4px #fff, 0 0 20px rgba(255,255,255,.4); transform: translateY(-3px); }
.pm-m.spin { box-shadow: inset 0 0 0 5px #ffd84a, 0 0 30px #ffd84a; transform: scale(1.04); }
.pm-m.win { box-shadow: inset 0 0 0 5px #a8f000, 0 0 40px #a8f000; transform: scale(1.06) rotate(-1deg); }
.pm-foot { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; }
.pm-players { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-players span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; font-weight: 900; font-size: 13px; background: rgba(255,255,255,.08); }
.pm-players span.me { box-shadow: inset 0 0 0 2px #fff; }
.pm-players em { font-style: normal; font-weight: 900; color: #53d8ff; letter-spacing: .12em; }
.pm-timer { font-family: 'Bungee'; font-size: 44px; color: #ffd84a; min-width: 70px; text-align: center; text-shadow: 3px 3px 0 #0b1446; }
.pm-ready { min-width: 230px; }
.pm-reveal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 24px 46px; border-radius: 28px; background: rgba(6,10,40,.95); box-shadow: inset 0 0 0 4px #a8f000, 0 0 60px rgba(168,240,0,.5); animation: countPop .8s var(--spring); z-index: 5; }
.pm-reveal small { font-weight: 900; letter-spacing: .3em; }
.pm-reveal b { font-family: 'Bungee'; font-weight: 400; font-size: clamp(30px, 4vw, 56px); color: #a8f000; text-shadow: 3px 3px 0 #000; }
@media (max-width: 900px) { .pm-panel { width: 94vw; } .pm-weapons { grid-template-columns: repeat(3, 1fr); } .pm-skins { grid-template-columns: repeat(4, 1fr); } .pm-maps { grid-template-columns: 1fr; } }

/* ---------- map select ---------- */
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; max-width: 1300px; }
.map-card { position: relative; display: grid; align-content: end; min-height: 260px; padding: 18px; border-radius: 24px; text-align: left; overflow: hidden;
  background: linear-gradient(160deg, var(--m1), var(--m2)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 10px 30px rgba(0,0,0,.35); transition: transform .25s var(--spring), box-shadow .2s; }
.map-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 25%, rgba(255,255,255,.45), transparent 45%), repeating-linear-gradient(115deg, rgba(0,0,0,.06) 0 12px, transparent 12px 24px); }
.map-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(transparent, rgba(5,8,30,.88)); }
.map-card > * { position: relative; z-index: 1; }
.map-card b { font-family: 'Bungee'; font-weight: 400; font-size: 28px; text-shadow: 3px 3px 0 #0b1446; }
.map-card p { font-weight: 700; font-size: 16px; opacity: .92; }
.map-card small { font-weight: 900; letter-spacing: .2em; color: #ffd84a; }
.map-card .tag-new { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: 'Bungee'; font-size: 16px; background: #ffd84a; color: #0b1446; padding: 4px 12px; border-radius: 10px; transform: rotate(6deg); }
.map-card .tag-cur { position: absolute; top: 14px; left: 14px; z-index: 2; font-weight: 900; font-size: 13px; letter-spacing: .15em; background: #fff; color: #0b1446; padding: 3px 10px; border-radius: 8px; }
.map-card:hover, .map-card.sel { transform: translateY(-6px) rotate(-1deg) scale(1.03); box-shadow: inset 0 0 0 4px #53d8ff, 0 0 40px rgba(83,216,255,.55); }

/* ---------- tricks ---------- */
.trick-pop { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
.trick-pop b { display: block; font-family: 'Bungee'; font-weight: 400; font-size: 26px; color: #fff; text-shadow: 0 0 14px #53d8ff, 3px 3px 0 #0b1446; }
.trick-pop span { font-family: 'Bungee'; font-size: 20px; color: #ffd84a; text-shadow: 2px 2px 0 #0b1446; }
.trick-pop.show { animation: trickPop .9s var(--spring) forwards; }
@keyframes trickPop { 0% { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-6deg); } 20% { opacity: 1; transform: translateX(-50%) scale(1.15); } 35% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-18px); } }
.xp-card { max-width: 760px; padding: 18px 22px; border-radius: 20px; background: linear-gradient(160deg, rgba(20,34,110,.92), rgba(9,14,52,.92)); box-shadow: inset 0 0 0 3px rgba(83,216,255,.55); display: grid; gap: 8px; margin-bottom: 20px; }
.xp-card b { font-family: 'Bungee'; font-weight: 400; font-size: 34px; color: #ffd84a; }
.xp-card p { font-weight: 700; opacity: .8; }
.xp-bar { height: 16px; border-radius: 10px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.xp-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #53d8ff, #a8f000); transition: width .6s; }
.trick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; max-width: 1100px; }
.tcard { padding: 16px 18px; border-radius: 18px; background: rgba(12,20,70,.85); box-shadow: inset 0 0 0 3px rgba(83,216,255,.5); display: grid; gap: 6px; }
.tcard b { font-family: 'Bungee'; font-weight: 400; font-size: 22px; }
.tcard p { font-weight: 700; font-size: 16px; opacity: .9; }
.tcard small { font-weight: 900; letter-spacing: .15em; color: #a8f000; }
.tcard.locked { filter: grayscale(.9); opacity: .6; box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); }
.tcard.locked small { color: #ffd84a; }
.res-xp { position: relative; font-family: 'Bungee'; font-size: 22px; color: #ffd84a; text-shadow: 2px 2px 0 #000; min-height: 1.2em; }

/* ---------- ranked / profile / friends ---------- */
.pf-grid { display: grid; grid-template-columns: minmax(300px, 1.1fr) minmax(280px, 1fr) minmax(300px, 1fr); gap: 18px; max-width: 1400px; }
@media (max-width: 1100px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-box, .pf-card { padding: 18px 20px; border-radius: 22px; background: linear-gradient(160deg, rgba(20,34,110,.94), rgba(9,14,52,.94)); box-shadow: inset 0 0 0 3px rgba(83,216,255,.5), 0 0 30px rgba(83,216,255,.15); }
.pf-box h3 { font-family: 'Bungee'; font-weight: 400; font-size: 22px; margin-bottom: 10px; }
.pf-card { display: grid; gap: 12px; justify-items: center; text-align: center; position: relative; overflow: hidden; }
.pf-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 22%, var(--tc, #53d8ff), transparent 55%); opacity: .35; pointer-events: none; }
.pf-card > * { position: relative; }
.pf-card .rank-badge { filter: drop-shadow(0 6px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px var(--tc, #53d8ff)); animation: badgeFloat 3s ease-in-out infinite; }
@keyframes badgeFloat { 50% { transform: translateY(-6px) rotate(-2deg); } }
.pf-rank { font-family: 'Bungee'; font-size: 30px; color: var(--tc); text-shadow: 3px 3px 0 #0b1446; }
.pf-name { font-family: 'Bungee'; font-size: 26px; width: 100%; }
.pf-name input { font: inherit; font-size: 22px; text-align: center; width: 100%; padding: 6px 10px; border-radius: 12px; border: 0; }
.pf-title select { font: inherit; font-weight: 900; letter-spacing: .1em; padding: 4px 10px; border-radius: 10px; background: #0b1446; color: #ffd84a; border: 2px solid #53d8ff; }
.pf-rp { width: 100%; }
.pf-rp .bar { height: 16px; border-radius: 10px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.pf-rp .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--tc), #fff); transition: width .8s; }
.pf-rp small { font-weight: 900; letter-spacing: .12em; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.pf-stats div { background: rgba(255,255,255,.07); border-radius: 12px; padding: 6px 4px; display: grid; }
.pf-stats b { font-family: 'Bungee'; font-weight: 400; font-size: 20px; }
.pf-stats small { font-size: 11px; font-weight: 900; letter-spacing: .1em; opacity: .7; }
.pf-code { display: flex; gap: 8px; align-items: center; font-weight: 900; letter-spacing: .15em; background: #fff; color: #0b1446; padding: 6px 12px; border-radius: 12px; cursor: pointer; }
.pf-code:hover { background: #ffd84a; }
.pf-coins { font-family: 'Bungee'; font-size: 20px; color: #7af0ff; }
.pf-actions { display: grid; gap: 8px; width: 100%; }
.pf-actions .mbtn { min-width: 0; }
.pf-ladder { display: grid; gap: 8px; }
.pf-tier { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.05); text-align: left; }
.pf-tier b { font-family: 'Bungee'; font-weight: 400; font-size: 17px; }
.pf-tier small { display: block; font-weight: 700; opacity: .85; font-size: 13px; }
.pf-tier.locked { opacity: .45; filter: grayscale(.7); }
.pf-tier.current { box-shadow: inset 0 0 0 3px var(--tc); background: rgba(255,255,255,.12); }
.pf-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
.pf-add input { font: inherit; font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: .12em; padding: 8px 12px; border-radius: 12px; border: 0; min-width: 0; }
.pf-add .mbtn { min-width: 0; padding: 6px 14px; }
.pf-add .mbtn b { font-size: 18px; }
.pf-friends { display: grid; gap: 8px; max-height: 52vh; overflow: auto; }
.pf-friend { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: left; }
.pf-friend b { font-weight: 900; font-size: 17px; }
.pf-friend small { display: block; font-size: 12px; font-weight: 700; opacity: .8; }
.pf-friend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #666; margin-right: 5px; }
.pf-friend .dot.on { background: #a8f000; box-shadow: 0 0 8px #a8f000; }
.pf-friend button { font-weight: 900; font-size: 12px; letter-spacing: .08em; padding: 5px 9px; border-radius: 9px; background: #53d8ff; color: #0b1446; margin-left: 4px; }
.pf-friend button.x { background: rgba(255,255,255,.15); color: #fff; }
.pf-empty { opacity: .7; font-weight: 700; }
.frame-silver { box-shadow: inset 0 0 0 4px #c9d4e6, 0 0 30px rgba(200,210,230,.35); }
.frame-gold { box-shadow: inset 0 0 0 4px #ffd84a, 0 0 34px rgba(255,216,74,.45); }
.frame-platinum { box-shadow: inset 0 0 0 4px #46c9c0, 0 0 34px rgba(70,201,192,.45); }
.frame-diamond { box-shadow: inset 0 0 0 4px #7ab8ff, 0 0 40px rgba(77,141,255,.6); }
.frame-master { box-shadow: inset 0 0 0 4px #c77dff, 0 0 44px rgba(180,77,255,.6); }
.frame-legend { box-shadow: inset 0 0 0 5px #ff4fd8, 0 0 50px rgba(255,79,216,.7), 0 0 90px rgba(255,240,120,.35); }
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; z-index: 50; pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-radius: 16px; font-weight: 900; background: linear-gradient(90deg, #0b1446, #1a2a86); box-shadow: inset 0 0 0 3px #53d8ff, 0 6px 20px rgba(0,0,0,.4); animation: stickerIn .45s var(--spring); }
.toast button { font-weight: 900; padding: 6px 12px; border-radius: 10px; background: #a8f000; color: #0b1446; }
.toast button.no { background: rgba(255,255,255,.2); color: #fff; }
.res-reward { position: relative; display: flex; gap: 18px; align-items: center; justify-content: center; flex-wrap: wrap; min-height: 10px; }
.res-reward .rr-rank { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 18px; background: rgba(11,20,70,.85); box-shadow: inset 0 0 0 3px var(--tc, #53d8ff); }
.res-reward .rr-rank b { font-family: 'Bungee'; font-weight: 400; font-size: 22px; }
.res-reward .rr-delta { font-family: 'Bungee'; font-size: 26px; }
.res-reward .rr-delta.up { color: #a8f000; }
.res-reward .rr-delta.down { color: #ff5a6e; }
.res-reward .rr-coins { font-family: 'Bungee'; font-size: 20px; color: #7af0ff; }
.res-reward .rr-list { width: 100%; text-align: center; font-weight: 900; color: #ffd84a; }
.promo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; padding: 24px 40px; border-radius: 26px; background: rgba(8,12,40,.94); box-shadow: inset 0 0 0 4px var(--tc), 0 0 60px var(--tc); z-index: 5; animation: countPop .9s var(--spring); pointer-events: none; }
.promo b { font-family: 'Bungee'; font-weight: 400; font-size: 40px; color: var(--tc); text-shadow: 3px 3px 0 #000; }
.promo small { font-weight: 900; letter-spacing: .3em; }
.on-players .rb { display: inline-flex; vertical-align: middle; margin-right: 6px; }
.on-rankedtag { display: inline-block; font-size: 13px; padding: 2px 10px; border-radius: 8px; background: #ffd84a; color: #0b1446; margin-left: 8px; vertical-align: middle; }

.rk-box { display: grid; gap: 12px; align-content: start; }
.rk-rules { display: grid; gap: 6px; font-weight: 700; }
.rk-rules .up { color: #a8f000; font-weight: 900; } .rk-rules .down { color: #ff5a6e; font-weight: 900; }
.rk-play b { font-size: 34px !important; }
.rk-queue { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); }
.rk-queue h4 { font-family: 'Bungee'; font-weight: 400; font-size: 20px; color: #ffd84a; }
.on-friends h3 { font-family: 'Bungee'; font-weight: 400; font-size: 26px; }
.on-mycode { font-weight: 900; letter-spacing: .1em; display: flex; gap: 10px; align-items: center; }

/* ---------- online lobby ---------- */
.online-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; max-width: 1100px; }
.on-card { display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 22px; background: linear-gradient(160deg, rgba(20,34,110,.92), rgba(9,14,52,.92)); box-shadow: inset 0 0 0 3px rgba(83,216,255,.55), 0 0 30px rgba(83,216,255,.18); }
.on-card label { font-weight: 900; letter-spacing: .25em; font-size: 13px; opacity: .8; }
.on-card input { font: inherit; font-weight: 900; font-size: 24px; padding: 10px 14px; border-radius: 12px; border: 0; background: #fff; color: #0b1446; outline: none; }
.on-card input:focus { box-shadow: 0 0 0 4px #53d8ff; }
.on-card .mbtn { min-width: 0; }
.on-join { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.on-join input { text-transform: uppercase; text-align: center; letter-spacing: .25em; }
.on-status { min-height: 1.4em; font-weight: 700; color: #ffd84a; }
.on-room h3 { font-family: 'Bungee'; font-weight: 400; font-size: 30px; }
.on-room h3 span { color: #53d8ff; letter-spacing: .12em; }
.on-map { font-weight: 900; letter-spacing: .15em; opacity: .85; }
.on-players { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.on-players div { padding: 8px 12px; border-radius: 12px; font-weight: 900; background: rgba(255,255,255,.08); display: flex; justify-content: space-between; }
.on-players div.me { box-shadow: inset 0 0 0 2px #fff; }
.on-players div small { opacity: .7; font-size: 12px; letter-spacing: .12em; }
.on-players .host::after { content: 'HOST'; font-size: 11px; background: #ffd84a; color: #0b1446; padding: 1px 6px; border-radius: 6px; margin-left: 6px; }
.on-timer { font-family: 'Bungee'; font-size: 22px; color: #ffd84a; min-height: 1.3em; }
.on-actions { display: grid; gap: 10px; }

/* ---------- match intro ---------- */
.mi-bar { position: absolute; left: 0; right: 0; height: 12vh; background: #000; transition: transform .6s var(--snap); }
.mi-bar.top { top: 0; transform: translateY(-100%); } .mi-bar.bot { bottom: 0; transform: translateY(100%); }
#matchintro.active .mi-bar { transform: none; }
.mi-title { position: absolute; left: 6vw; top: 16vh; display: grid; transform: skewX(-8deg); }
.mi-title small { font-weight: 900; letter-spacing: .4em; font-size: 18px; color: var(--yel); }
.mi-title b { font-family: 'Bungee'; font-weight: 400; font-size: clamp(40px, 6vw, 88px); text-shadow: 4px 4px 0 #000; }
#matchintro.active .mi-title { animation: slideIn .8s .2s var(--spring) backwards; }
.mi-teams { position: absolute; left: 6vw; right: 6vw; bottom: 16vh; display: flex; align-items: center; justify-content: space-between; }
.mi-team { display: grid; gap: 6px; }
.mi-team.t1 { text-align: right; }
.mi-team div { padding: 6px 16px; font-weight: 900; font-size: 20px; letter-spacing: .05em; clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%); }
.mi-team.t0 div { background: var(--t0); } .mi-team.t1 div { background: var(--t1); color: var(--ink); }
.mi-team div small { opacity: .75; margin-left: 10px; font-size: 14px; letter-spacing: .15em; }
.mi-team div.you { outline: 3px solid var(--paper); }
#matchintro.active .mi-team.t0 div { animation: slideIn .6s var(--spring) backwards; }
#matchintro.active .mi-team.t1 div { animation: slideInR .6s var(--spring) backwards; }
@keyframes slideInR { from { opacity: 0; transform: translateX(120px) rotate(6deg); } }
.mi-team div:nth-child(2) { animation-delay: .1s !important; } .mi-team div:nth-child(3) { animation-delay: .2s !important; } .mi-team div:nth-child(4) { animation-delay: .3s !important; }
.mi-vs { font-family: 'Bungee'; font-size: 64px; color: var(--yel); transform: rotate(-8deg); text-shadow: 4px 4px 0 #000; }
.mi-map { position: absolute; right: 6vw; top: 16vh; width: 150px; height: 235px; clip-path: polygon(3% 0, 100% 2%, 97% 100%, 0 97%); background: rgba(0,0,0,.6); }

/* ---------- countdown ---------- */
#countdown { display: grid; place-items: center; }
.count-num { font-family: 'Bungee'; font-size: 26vh; color: var(--paper); text-shadow: 8px 0 var(--red), -8px 0 var(--cyan), 0 14px 0 #000; transform: skewX(-8deg); }
.count-num.pop { animation: countPop .9s var(--spring); }
.count-num.go { color: var(--yel); font-size: 32vh; }
@keyframes countPop { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 30% { transform: scale(.92) rotate(3deg); opacity: 1; } 55% { transform: scale(1.04) rotate(-2deg); } 100% { transform: scale(1) rotate(-4deg); opacity: .9; } }

/* ---------- HUD (blue glass + ink) ---------- */
#hud { font-size: calc(16px * var(--hud-scale)); --navy: #0b1446; --navy2: #1a2a86; --glass: rgba(10, 22, 78, .72); --edge: #53d8ff; --gold: #ffd84a; }
.hud-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.1em; }
.roster { display: flex; gap: .45em; }
.roster.r1 { flex-direction: row-reverse; }
.tpip { position: relative; width: 3.3em; height: 3.3em; display: grid; place-items: center; transition: transform .25s var(--spring), filter .3s; }
.tpip > svg.blob { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 0 8px var(--c)); }
.tpip > svg.blob use { fill: var(--c); stroke: #fff; stroke-width: 2.5px; }
.tpip > svg.icon { position: relative; width: 1.65em; height: 1.65em; color: #fff; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.tpip.me::after { content: ''; position: absolute; bottom: -.55em; left: 50%; transform: translateX(-50%); border: .38em solid transparent; border-top-color: #fff; }
.tpip.dead { filter: grayscale(1) brightness(.55); transform: scale(.82) rotate(-10deg); }
.tpip.dead::before { content: 'X'; position: absolute; z-index: 2; font-family: 'Bungee'; font-size: 1.9em; color: #fff; text-shadow: 0 2px 0 #000; }
.tpip.popped { animation: pipPop .7s var(--spring); }
.tpip .burst { position: absolute; inset: -40%; border-radius: 50%; border: .35em solid var(--c); opacity: 0; pointer-events: none; }
.tpip.popped .burst { animation: pipRing .6s ease-out forwards; }
@keyframes pipPop { 0% { transform: scale(1.5) rotate(18deg); } 40% { transform: scale(.7) rotate(-14deg); } 100% { transform: scale(.82) rotate(-10deg); } }
@keyframes pipRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.timer2 { position: relative; min-width: 6.6em; padding: .25em 1em .35em; border-radius: 1.4em; text-align: center; background: linear-gradient(180deg, #2a1f6e, #120d3d); box-shadow: inset 0 0 0 .18em #6a5cff, 0 .25em 0 rgba(0,0,0,.4), 0 0 1.4em rgba(90,110,255,.45); }
.timer2 span { font-family: 'Bungee'; font-size: 2.35em; color: var(--gold); text-shadow: 0 .08em 0 #7a4b00; letter-spacing: .02em; }
.timer2.warn span { color: #ff5a6e; animation: pulse .5s infinite; display: inline-block; }
.sp-wrap { position: absolute; top: 14px; right: 18px; display: grid; justify-items: end; gap: .55em; }
.sp-gauge { position: relative; width: 6.6em; height: 6.6em; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1e2a6e, #070b28 70%); box-shadow: 0 0 0 .22em #fff, 0 .3em 0 rgba(0,0,0,.35); display: grid; place-items: center; }
.sp-ring { position: absolute; inset: .35em; border-radius: 50%; background: conic-gradient(var(--edge) calc(var(--p, 0) * 1%), rgba(255,255,255,.08) 0); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); mask: radial-gradient(circle, transparent 62%, #000 63%); }
.sp-icon { width: 2.8em; height: 2.8em; color: #fff; margin-top: -.5em; }
.sp-pct { position: absolute; bottom: .55em; font-weight: 900; font-size: .95em; }
.sp-key { position: absolute; top: -.35em; left: -.35em; font-style: normal; font-weight: 900; background: #fff; color: var(--navy); border-radius: .4em; padding: 0 .4em; opacity: 0; transform: scale(.5); transition: .25s var(--spring); }
.sp-gauge.ready { animation: spReady 1s infinite; }
.sp-gauge.ready .sp-key { opacity: 1; transform: scale(1); }
.sp-gauge.ready .sp-icon { color: var(--gold); }
@keyframes spReady { 50% { box-shadow: 0 0 0 .22em #fff, 0 0 2.2em var(--edge), 0 0 4em var(--edge); transform: scale(1.06); } }
.points { display: flex; align-items: center; gap: .3em; padding: .2em .8em .2em .5em; border-radius: 1em; background: var(--glass); box-shadow: inset 0 0 0 .12em rgba(83,216,255,.55); }
.points svg { width: 1.1em; height: 1.1em; color: var(--t0); }
.points b { font-family: 'Bungee'; font-weight: 400; font-size: 1.25em; }
.points small { font-weight: 900; opacity: .8; }
.feed { display: grid; gap: .3em; justify-items: end; margin-top: .3em; }
.feed div { display: flex; align-items: center; gap: .45em; padding: .22em .75em; font-weight: 900; font-size: .95em; border-radius: .6em; background: var(--glass); box-shadow: inset 0 0 0 .1em rgba(83,216,255,.35); animation: slideInR .35s var(--spring); }
.feed svg { width: 1em; height: 1em; color: var(--gold); }
.feed .k0 { color: var(--t0); } .feed .k1 { color: var(--t1); }
.minimap-wrap { position: absolute; left: 18px; bottom: 18px; width: calc(140px * var(--hud-scale)); height: calc(220px * var(--hud-scale)); padding: 6px; border-radius: 16px; background: var(--glass); box-shadow: inset 0 0 0 3px #fff, 0 0 18px rgba(83,216,255,.4); }
#minimap { width: 100%; height: 100%; display: block; border-radius: 10px; }
.mm-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 900; font-size: .78em; letter-spacing: .1em; background: #fff; color: var(--navy); padding: 1px 10px; border-radius: 10px; }
.mm-tag kbd { transform: none; background: var(--navy); color: #fff; font-size: .9em; padding: 0 5px; border-radius: 4px; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); }
.crosshair svg { width: 100%; height: 100%; overflow: visible; }
.ch-ring { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 2.2; stroke-dasharray: 18 5.5; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.ch-dot { fill: #fff; }
.ch-ink-bg { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 5; stroke-linecap: round; }
.ch-ink { fill: none; stroke: var(--t0); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 60 60; filter: drop-shadow(0 0 3px var(--t0)); transition: stroke-dashoffset .1s; }
.ch-ink.low { stroke: #ff4d6d; animation: pulse .4s infinite; }
.ch-charge { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 0 200; transform: rotate(-90deg); }
.ch-charge.full { stroke: #fff; filter: drop-shadow(0 0 6px var(--gold)); }
.ch-hit { stroke: #fff; stroke-width: 3.2; opacity: 0; }
.ch-hit.show { animation: hitmark .25s; }
.ch-hit.kill { stroke: var(--gold); }
@keyframes hitmark { 0% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(1); } }
.crosshair.hidden-soft { opacity: 0; }
.wpn-wrap { position: absolute; right: 22px; bottom: 20px; display: grid; justify-items: end; gap: .35em; }
.wpn-slots { display: flex; gap: .35em; }
.wslot { position: relative; width: 2.6em; height: 2.6em; border-radius: .7em; display: grid; place-items: center; background: var(--glass); box-shadow: inset 0 0 0 .12em rgba(255,255,255,.25); color: #cfe6ff; transition: transform .2s var(--spring); }
.wslot svg { width: 1.6em; height: 1.6em; }
.wslot i { position: absolute; top: -.35em; left: -.25em; font-style: normal; font-size: .7em; font-weight: 900; background: #fff; color: var(--navy); padding: 0 .3em; border-radius: .3em; }
.wslot.on { background: linear-gradient(180deg, var(--navy2), var(--navy)); box-shadow: inset 0 0 0 .15em var(--edge), 0 0 .9em rgba(83,216,255,.6); color: #fff; transform: translateY(-.2em) scale(1.08); }
.wpn-name { text-align: right; display: grid; }
.wpn-name b { font-family: 'Bungee'; font-weight: 400; font-size: 1.7em; text-shadow: 0 .12em 0 rgba(0,0,0,.45), 0 0 .6em rgba(83,216,255,.5); }
.wpn-name small { font-weight: 900; letter-spacing: .16em; opacity: .85; }
.ink-line { position: relative; width: 13em; height: .9em; border-radius: .5em; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 .1em rgba(255,255,255,.4); overflow: hidden; }
.ink-line i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--t0); transition: width .12s; }
.ink-line span { position: absolute; right: .4em; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: .7em; text-shadow: 0 1px 2px #000; }
.ink-line.low { animation: lowInk .4s infinite; }
@keyframes lowInk { 50% { box-shadow: inset 0 0 0 .12em var(--gold), 0 0 .8em var(--gold); } }
.hp { width: 13em; height: .4em; border-radius: .3em; background: rgba(0,0,0,.5); overflow: hidden; }
.hp i { display: block; height: 100%; width: 100%; background: #fff; transition: width .15s; }
.center-msg { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) skewX(-8deg); font-family: 'Bungee'; font-size: clamp(34px, 6vw, 90px); text-shadow: 5px 0 var(--t0), -5px 0 var(--t1), 0 10px 0 #000; opacity: 0; white-space: nowrap; }
.center-msg.show { animation: centerMsg 1.8s var(--spring) forwards; }
@keyframes centerMsg { 0% { opacity: 0; transform: translate(-50%, -50%) skewX(-8deg) scale(2); } 20% { opacity: 1; transform: translate(-50%, -50%) skewX(-8deg) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) skewX(-8deg) scale(1); } }
.kill-banner { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); display: flex; align-items: center; gap: .5em; padding: .35em 1.2em .35em .6em; border-radius: 2em; background: linear-gradient(90deg, var(--navy), var(--navy2)); box-shadow: inset 0 0 0 .16em var(--edge), 0 0 1.6em rgba(83,216,255,.55); opacity: 0; white-space: nowrap; }
.kill-banner svg { width: 2em; height: 2em; color: var(--gold); }
.kill-banner span { font-family: 'Bungee'; font-size: 1.4em; color: var(--gold); }
.kill-banner b { font-weight: 900; font-size: 1.3em; }
.kill-banner.show { animation: killIn 1.6s var(--spring) forwards; }
@keyframes killIn { 0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-8deg); } 15% { opacity: 1; transform: translateX(-50%) scale(1.12) rotate(2deg); } 25% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
.special-banner { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%); font-family: 'Bungee'; font-size: clamp(30px, 5vw, 70px); color: #fff; text-shadow: 0 0 20px var(--edge), 4px 4px 0 var(--navy); opacity: 0; white-space: nowrap; }
.special-banner.show { animation: centerMsg 1.5s var(--spring) forwards; }
.swim-hint { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font-weight: 900; letter-spacing: .25em; opacity: 0; transition: opacity .4s; padding: .3em 1em; border-radius: 1em; background: var(--glass); }
.swim-hint.show { opacity: .9; }

/* ---------- big map ---------- */
#bigmap { display: grid; place-items: center; background: rgba(0,0,0,.45); }
.bigmap-card { background: rgba(8,6,14,.9); padding: 18px; clip-path: polygon(2% 0, 100% 1.5%, 98% 100%, 0 98.5%); display: grid; gap: 10px; transform: rotate(-1deg); }
.bigmap-card h3 { font-family: 'Bungee'; font-weight: 400; font-size: 28px; }
#bigmap-canvas { width: min(46vh, 60vw); height: min(72vh, 94vw); }
.bm-legend { display: flex; gap: 18px; font-weight: 900; letter-spacing: .15em; }
.bm-legend .c0 { color: var(--red); } .bm-legend .c1 { color: var(--cyan); }

/* ---------- results ---------- */
#results { display: grid; place-content: center; justify-items: center; gap: 26px; background: rgba(5,4,8,.55); }
.res-flood { position: absolute; inset: 0; background: linear-gradient(90deg, var(--t0) 0 50%, var(--t1) 50% 100%); clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: .2; }
#results.active .res-flood { animation: resFlood 1.2s var(--snap) forwards; }
@keyframes resFlood { to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
.res-title { position: relative; font-family: 'Bungee'; font-weight: 400; font-size: clamp(60px, 10vw, 150px); transform: skewX(-8deg) rotate(-3deg) scale(0); text-shadow: 6px 0 var(--red), -6px 0 var(--cyan), 0 12px 0 #000; }
.res-title.show { animation: countPop 1s var(--spring) forwards; }
.res-bars { position: relative; display: grid; gap: 14px; width: min(900px, 90vw); }
.res-bar { position: relative; height: 70px; background: rgba(0,0,0,.6); clip-path: polygon(0 6%, 100% 0, 99% 100%, 1% 92%); }
.res-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; }
.res-bar.b0 i { background: linear-gradient(90deg, #7a0028, var(--t0)); } .res-bar.b1 i { background: linear-gradient(90deg, #06307a, var(--t1)); }
.res-bar span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-family: 'Bungee'; font-size: 38px; text-shadow: 3px 3px 0 #000; }
.res-bar em { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-weight: 900; font-style: italic; font-size: 24px; letter-spacing: .15em; text-shadow: 2px 2px 0 #000; }
.res-bar.win { box-shadow: 0 0 0 4px var(--yel); }
.res-neutral { position: relative; font-weight: 900; letter-spacing: .25em; opacity: .7; }
.res-table { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 26px; width: min(900px, 90vw); font-weight: 700; font-size: 18px; }
.res-table div { display: flex; justify-content: space-between; padding: 4px 12px; background: rgba(0,0,0,.5); }
.res-table div.me { outline: 2px solid var(--paper); }
.res-table div.t0 { border-left: 6px solid var(--t0); } .res-table div.t1 { border-left: 6px solid var(--t1); }
.res-nav { position: relative; display: flex; gap: 16px; }
.res-nav .mbtn { min-width: 220px; }

.lock-hint { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); font-weight: 900; letter-spacing: .3em; padding: 10px 20px; background: var(--paper); color: var(--ink); clip-path: polygon(3% 0, 100% 8%, 97% 100%, 0 92%); display: none; }
.lock-hint.show { display: block; animation: pulse 1.2s infinite; }

/* full-screen paint wipe transition */
.wipe { position: absolute; inset: -20%; background: var(--red); clip-path: circle(0% at 50% 50%); pointer-events: none; }
.wipe.run { animation: wipe .9s var(--snap) forwards; }
@keyframes wipe { 0% { clip-path: circle(0% at 20% 60%); background: var(--red); } 45% { clip-path: circle(90% at 40% 50%); background: var(--red); } 55% { clip-path: circle(90% at 40% 50%); background: var(--cyan); } 100% { clip-path: circle(0% at 80% 40%); background: var(--cyan); } }

@media (max-width: 800px) {
  .mbtn { min-width: 240px; } .mbtn b { font-size: 22px; }
  .row { grid-template-columns: 1fr; }
  .menu-card { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }
body.reduce-motion * { animation-duration: .01s !important; }

/* css/shop.css */
/* DRENCH//ZONE — ITEM SHOP + new main menu. Same street-art language as the game UI (Bungee, paper
   stickers, chromatic offsets, halftone) pushed further: neon ink layers, holo foil cards, bloom glows,
   springy motion, parallax depth and scroll-driven effects. */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --mag: #ff2bd6; --cy: #12d8ff; --ye: #ffe14d; --li: #a8f000; --deep: #07051a; --deep2: #140a34; }

.splash-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 80; }
svg.drop { width: 1em; height: 1em; color: var(--cy); flex: none; }

/* ------------------------------------------------------------------ shared: wallet chip, floaters */
.wallet-chip { pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; color: #fff;
  background: linear-gradient(180deg, rgba(34,24,90,.92), rgba(10,7,34,.92)); box-shadow: inset 0 0 0 2px rgba(122,240,255,.6), 0 0 26px rgba(18,216,255,.35), 0 6px 0 rgba(0,0,0,.35); transition: transform .25s var(--spring); }
.wallet-chip:hover { transform: translateY(-2px) scale(1.04); }
.wallet-chip .drop { width: 30px; height: 30px; filter: drop-shadow(0 0 8px var(--cy)); animation: dropBob 2.4s ease-in-out infinite; }
.wallet-chip b { font-family: 'Bungee'; font-weight: 400; font-size: 22px; letter-spacing: .02em; min-width: 3ch; }
.wallet-chip small { font-weight: 900; letter-spacing: .22em; font-size: 11px; opacity: .7; }
.wallet-chip i { font-style: normal; font-family: 'Bungee'; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ye); color: #1a0b2e; font-size: 16px; box-shadow: 0 0 12px rgba(255,225,77,.7); }
.wallet-chip.big { padding: 8px 18px 8px 10px; } .wallet-chip.big b { font-size: 28px; }
.wallet-chip.bump { animation: chipBump .7s var(--spring); }
@keyframes chipBump { 30% { transform: scale(1.18) rotate(-3deg); box-shadow: inset 0 0 0 2px #fff, 0 0 50px var(--cy), 0 6px 0 rgba(0,0,0,.35); } }
@keyframes dropBob { 50% { transform: translateY(-3px) rotate(8deg); } }

.fl { position: absolute; width: calc(34px * var(--s)); height: calc(34px * var(--s)); rotate: var(--r); animation: floaty var(--d) ease-in-out infinite; filter: drop-shadow(0 0 14px var(--c)); opacity: .85; }
.fl.drop { background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--c) 30%); border-radius: 0 50% 50% 50%; }
.fl.splat { background: var(--c); clip-path: polygon(50% 0, 58% 30%, 85% 8%, 70% 38%, 100% 42%, 72% 56%, 94% 84%, 62% 70%, 55% 100%, 44% 70%, 14% 92%, 30% 60%, 0 50%, 30% 40%, 10% 12%, 42% 30%); opacity: .55; }
.fl.star { background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); width: calc(22px * var(--s)); height: calc(22px * var(--s)); animation: floaty var(--d) ease-in-out infinite, twinkle 2.2s ease-in-out infinite; }
.fl.ring { border: calc(4px * var(--s)) solid var(--c); border-radius: 50%; opacity: .5; }
@keyframes floaty { 50% { translate: 0 -26px; rotate: calc(var(--r) + 24deg); } }
@keyframes twinkle { 50% { opacity: .25; scale: .6; } }
@keyframes sheen { to { background-position: -200% 0; } }
@keyframes flagWiggle { 50% { transform: rotate(-2deg) scale(1.08); } }

/* ------------------------------------------------------------------ MAIN MENU upgrades */
.layer-far .mega-word { position: absolute; right: -6vw; bottom: -6vh; font-family: 'Bungee'; font-size: 26vw; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.06); transform: rotate(-9deg); white-space: nowrap; }
.layer-deco { pointer-events: none; }
.menu-topbar { position: absolute; right: 3vw; top: 3.2vh; display: flex; gap: 12px; align-items: center; pointer-events: auto; }
.player-card { position: relative; isolation: isolate; min-width: 230px; padding: 9px 20px 10px 16px; border-radius: 18px; overflow: hidden; display: grid; line-height: 1.05;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 10px 26px rgba(0,0,0,.45); transform: rotate(-1.5deg); }
.player-card .pc-bn { position: absolute; inset: 0; z-index: -1; }
.player-card .pc-bn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 70%); }
.player-card b { font-family: 'Bungee'; font-weight: 400; font-size: 22px; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.player-card small { font-weight: 900; letter-spacing: .2em; font-size: 12px; }
#menu.active .menu-topbar { animation: dropIn .8s .25s var(--spring) backwards; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-60px) rotate(-6deg); } }

.mbtn.shopbtn { background: linear-gradient(100deg, rgba(255,43,214,.9), rgba(255,120,40,.88) 50%, rgba(255,225,77,.9), rgba(255,43,214,.9)); background-size: 200% 100%; animation: sheen 5s linear infinite; }
.mbtn.shopbtn small { opacity: .9; }
.mbtn.shopbtn::before { background: var(--ye); }
.mbtn.shopbtn.sel, .mbtn.shopbtn:hover { color: #1a0b2e; }
.mb-new { position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(8deg); font-family: 'Bungee'; font-size: 14px; padding: 2px 9px; background: #f4efe4; color: #1a0b2e; z-index: 2; animation: flagWiggle 1.6s ease-in-out infinite; }
#menu.active .menu-nav .mbtn:nth-child(6) { animation-delay: .3s; } #menu.active .menu-nav .mbtn:nth-child(7) { animation-delay: .35s; }
#menu.active .menu-nav .mbtn:nth-child(8) { animation-delay: .4s; } #menu.active .menu-nav .mbtn:nth-child(9) { animation-delay: .45s; } #menu.active .menu-nav .mbtn:nth-child(10) { animation-delay: .5s; }

.menu-shop { position: absolute; right: 4vw; top: 15vh; width: 340px; height: 200px; border-radius: 26px; overflow: hidden; pointer-events: auto; text-align: left; isolation: isolate;
  background: radial-gradient(120% 110% at 85% 5%, var(--rc, var(--mag)) 0%, var(--rc2, #6a0a8a) 45%, #0b0620 100%);
  box-shadow: inset 0 0 0 3px var(--rc, var(--mag)), 0 0 44px color-mix(in srgb, var(--rc, #ff2bd6) 55%, transparent), 0 22px 44px rgba(0,0,0,.5);
  transform: rotate(-3deg); animation: teaserFloat 5s ease-in-out infinite; transition: scale .35s var(--spring); }
.menu-shop:hover { scale: 1.06; }
.menu-shop::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 10px, transparent 10px 22px); z-index: -1; }
.menu-shop::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 3px; background: conic-gradient(from var(--ang), var(--rc, #ff2bd6), #fff, var(--cy), #fff, var(--rc, #ff2bd6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 3.5s linear infinite; pointer-events: none; }
.ms-tag { position: absolute; left: 16px; top: 14px; font-family: 'Bungee'; font-size: 22px; text-shadow: 3px 0 var(--mag), -3px 0 var(--cy), 0 4px 0 #000; transform: skewX(-8deg); }
.ms-new { position: absolute; left: 16px; top: 48px; font-family: 'Bungee'; font-size: 12px; padding: 1px 8px; background: var(--ye); color: #1a0b2e; transform: rotate(-4deg); }
.ms-art { position: absolute; right: -6px; top: 6px; width: 170px; height: 170px; display: grid; place-items: center; }
.ms-art img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 12px 14px rgba(0,0,0,.6)); opacity: 0; transition: opacity .5s; animation: floatArt 4s ease-in-out infinite; }
.ms-art img.ok { opacity: 1; }
.ms-art .bn { width: 130px; height: 80px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.ms-info { position: absolute; left: 16px; bottom: 14px; display: grid; max-width: 190px; }
.ms-info small { font-weight: 900; letter-spacing: .16em; font-size: 11px; color: var(--ye); }
.ms-info b { font-family: 'Bungee'; font-weight: 400; font-size: 24px; line-height: 1; text-shadow: 0 3px 0 #000; }
.ms-price { font-family: 'Bungee'; font-size: 17px; display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; }
.ms-price s { font-family: 'Barlow Condensed'; font-weight: 700; opacity: .55; font-size: 14px; }
.ms-cta { position: absolute; right: 14px; bottom: 14px; font-weight: 900; letter-spacing: .18em; font-size: 12px; padding: 5px 10px; border-radius: 999px; background: #f4efe4; color: #1a0b2e; }
#menu.active .menu-shop { animation: stickerIn .8s .45s var(--spring) backwards, teaserFloat 5s 1.3s ease-in-out infinite; }
@keyframes teaserFloat { 50% { translate: 0 -8px; } }
@keyframes spinAng { to { --ang: 360deg; } }
@keyframes floatArt { 50% { translate: 0 -8px; rotate: -2deg; } }
@media (max-width: 1100px) { .menu-shop { display: none; } }
@media (max-width: 800px) { .menu-topbar .player-card { display: none; } }

/* ------------------------------------------------------------------ SHOP: layers */
.shop { overflow: hidden; background: transparent; }
.shop-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: opacity .5s; background: var(--deep); }
.sb { position: absolute; inset: -12% -6%; will-change: transform; }
.sb0 { inset: -30% -6%; }
.sb-grad { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 18% 12%, rgba(255,43,214,.38), transparent 48%), radial-gradient(ellipse at 88% 28%, rgba(18,216,255,.3), transparent 50%),
  radial-gradient(ellipse at 50% 100%, rgba(255,225,77,.16), transparent 55%), linear-gradient(180deg, #0f0830, var(--deep) 55%, #0b0624); }
.sb0 .halftone { opacity: .7; }
.ink { position: absolute; border-radius: 41% 59% 47% 53% / 52% 38% 62% 48%; opacity: .5; animation: morph 12s ease-in-out infinite; }
.ink.i1 { width: 46vmax; height: 46vmax; left: -16vmax; top: -14vmax; background: radial-gradient(circle at 60% 60%, var(--mag), #5a0a7a 70%); }
.ink.i2 { width: 30vmax; height: 30vmax; right: -10vmax; top: 62vh; background: radial-gradient(circle at 40% 40%, var(--cy), #06307a 70%); animation-duration: 15s; animation-direction: reverse; }
.ink.i3 { width: 22vmax; height: 22vmax; left: 34vw; top: 150vh; background: radial-gradient(circle, var(--ye), #b86a00 70%); animation-duration: 10s; opacity: .35; }
.ink.i4 { width: 38vmax; height: 38vmax; left: -14vmax; top: 230vh; background: radial-gradient(circle, var(--li), #2a6a00 70%); opacity: .35; }
.mega { position: absolute; font-family: 'Bungee'; font-size: 20vw; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.07); white-space: nowrap; transform: rotate(-8deg); }
.mega.m1 { left: -6vw; top: 6vh; } .mega.m2 { left: 8vw; top: 180vh; font-size: 14vw; -webkit-text-stroke-color: rgba(18,216,255,.08); }

.shop-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--mag) transparent; transition: opacity .5s; }
.shop-inner { position: relative; max-width: 1480px; margin: 0 auto; padding: 96px 5vw 140px; transform-origin: 50% 0; will-change: transform; }
.shop-top { position: absolute; left: 0; right: 0; top: 0; height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; z-index: 6;
  background: linear-gradient(180deg, rgba(7,5,26,.9), rgba(7,5,26,0)); pointer-events: none; }
.shop-top > * { pointer-events: auto; }
.shop-back { font-family: 'Bungee'; font-weight: 400; letter-spacing: .04em; }
.shop-prog { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 7; pointer-events: none; }
.shop-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--mag), var(--ye), var(--cy)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 14px var(--mag); }

/* ------------------------------------------------------------------ hero */
.shop-hero { min-height: calc(100vh - 140px); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 4vw; }
.sh-left { will-change: transform, opacity; }
.shop-logo { display: grid; line-height: .8; transform: skewX(-8deg) rotate(-4deg); font-family: 'Bungee'; }
.shop-logo .w1 { font-size: clamp(60px, 8.5vw, 140px); color: #f4efe4; text-shadow: 5px 0 var(--mag), -5px 0 var(--cy), 0 10px 0 #000; }
.shop-logo .w2 { font-size: clamp(96px, 15vw, 250px); margin-left: .12em; background: linear-gradient(100deg, var(--mag) 0%, var(--ye) 35%, var(--cy) 65%, var(--mag) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 12px 0 #000) drop-shadow(0 0 34px rgba(255,43,214,.6)); animation: sheen 6s linear infinite; }
.shop-tag { margin-top: 26px; font-weight: 900; letter-spacing: .34em; font-size: clamp(13px, 1.2vw, 17px); opacity: .85; }
.shop-reset { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 18px; border-radius: 999px; font-weight: 900; letter-spacing: .18em; font-size: 14px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 2px rgba(255,225,77,.45); }
.shop-reset b { font-family: 'Bungee'; font-weight: 400; font-size: 20px; letter-spacing: .06em; color: var(--ye); text-shadow: 0 0 14px rgba(255,225,77,.6); }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--li); box-shadow: 0 0 10px var(--li); animation: pulse 1.2s infinite; }
.shop-scrollhint { display: flex; align-items: center; gap: 12px; margin-top: 44px; font-weight: 900; letter-spacing: .35em; font-size: 12px; opacity: .6; }
.shop-scrollhint i { width: 2px; height: 46px; background: linear-gradient(transparent, #fff); animation: hintDrop 1.6s ease-in-out infinite; }
@keyframes hintDrop { 0% { transform: scaleY(0); transform-origin: 0 0; } 50% { transform: scaleY(1); transform-origin: 0 0; } 51% { transform-origin: 0 100%; } 100% { transform: scaleY(0); transform-origin: 0 100%; } }
.sh-feature { position: relative; display: grid; justify-items: center; gap: 16px; will-change: transform; }
.feat-tag { position: absolute; top: -30px; left: 50%; translate: -50% 0; z-index: 4; font-family: 'Bungee'; font-size: 16px; padding: 5px 14px; background: var(--ye); color: #1a0b2e; transform: rotate(-6deg); clip-path: polygon(3% 0, 100% 8%, 97% 100%, 0 90%); box-shadow: 0 0 20px rgba(255,225,77,.6); }
.feat-copy { text-align: center; display: grid; gap: 4px; max-width: 420px; }
.feat-copy b { font-family: 'Bungee'; font-weight: 400; font-size: 30px; }
.feat-copy p { font-weight: 700; opacity: .85; }
.feat-copy small { font-weight: 900; letter-spacing: .2em; }

/* ------------------------------------------------------------------ category bar */
.shop-cats { position: sticky; top: 74px; z-index: 5; display: flex; gap: 4px; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 10px 0 40px; padding: 7px; border-radius: 999px;
  background: rgba(14,8,40,.72); backdrop-filter: blur(14px) saturate(1.5); box-shadow: inset 0 0 0 2px rgba(255,255,255,.09), 0 12px 30px rgba(0,0,0,.4); transition: box-shadow .3s, background .3s; }
.shop-cats.stuck { background: rgba(14,8,40,.9); box-shadow: inset 0 0 0 2px rgba(255,43,214,.45), 0 0 30px rgba(255,43,214,.25), 0 12px 30px rgba(0,0,0,.5); }
.shop-cats button { position: relative; z-index: 1; flex: none; font-weight: 900; letter-spacing: .14em; padding: 10px 18px; border-radius: 999px; font-size: 14px; color: rgba(255,255,255,.72); transition: color .25s; }
.shop-cats button:hover { color: #fff; }
.shop-cats button.on { color: #1a0b2e; }
.cat-ink { position: absolute; left: 0; top: 7px; bottom: 7px; width: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--ye), var(--mag)); box-shadow: 0 0 22px rgba(255,43,214,.65); }

/* ------------------------------------------------------------------ sections */
.ss { position: relative; margin: 30px 0 120px; }
.ss-head { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 12px 24px; margin-bottom: 30px; opacity: 0; transform: translateX(-70px) skewX(-6deg); transition: opacity .7s, transform 1s var(--spring); }
.ss-head.in { opacity: 1; transform: none; }
.ss-ghost { position: absolute; left: -2vw; top: -.62em; z-index: -1; font-family: 'Bungee'; font-size: clamp(80px, 11vw, 190px); white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.07); pointer-events: none; will-change: transform; }
.ss-head h3 { font-family: 'Bungee'; font-weight: 400; font-size: clamp(38px, 5vw, 78px); line-height: .95; transform: skewX(-8deg); text-shadow: 4px 0 var(--mag), -4px 0 var(--cy), 0 8px 0 #000; }
.ss-head h3 em { font-style: normal; font-size: .38em; color: var(--ye); vertical-align: top; margin-right: 14px; text-shadow: 0 0 16px rgba(255,225,77,.55); }
.ss-count { justify-self: end; font-weight: 900; letter-spacing: .2em; font-size: 13px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(168,240,0,.35); }
.ss-what { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; max-width: 780px; padding: 12px 18px 12px 12px; background: #f4efe4; color: #1a0b2e; font-weight: 700; font-size: 16px; clip-path: polygon(0 6%, 99% 0, 100% 92%, 1% 100%); transform: rotate(-.6deg); }
.ss-what i { font-style: normal; font-family: 'Bungee'; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mag); color: #fff; }
.ss-what b { font-weight: 900; letter-spacing: .14em; color: var(--mag); margin-right: 4px; }
.ss-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 24px; perspective: 1300px; }
.ss-grid.daily { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-grid.bundles { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
@media (max-width: 900px) { .ss-grid.daily { grid-template-columns: 1fr 1fr; } .shop-hero { grid-template-columns: 1fr; } .ss-grid.bundles { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ item card */
.sc { position: relative; aspect-ratio: 3 / 4; text-align: left; pointer-events: auto; opacity: 0; transform: translateY(90px) rotateX(38deg) scale(.86);
  transition: opacity .6s ease calc(var(--i) * 65ms), transform 1s var(--spring) calc(var(--i) * 65ms); }
.sc.in { opacity: 1; transform: none; }
.sc.big { width: min(430px, 100%); aspect-ratio: 4 / 5; opacity: 1; transform: none; }
.bundles .sc { aspect-ratio: 16 / 8.5; }
.sc-in { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .6s var(--spring), box-shadow .3s, translate .4s var(--spring);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 75%, transparent), 0 16px 34px rgba(0,0,0,.5); }
.sc.hot { z-index: 3; }
.sc.hot .sc-in { transition: transform .08s linear, box-shadow .3s, translate .4s var(--spring); translate: 0 -10px;
  box-shadow: inset 0 0 0 3px var(--rc), 0 26px 50px rgba(0,0,0,.6), 0 0 46px color-mix(in srgb, var(--rc) 65%, transparent), 0 0 110px color-mix(in srgb, var(--rc) 25%, transparent); }
.sc-bg { position: absolute; inset: 0; background: radial-gradient(120% 85% at 50% 16%, color-mix(in srgb, var(--rc) 80%, #fff 20%) 0%, var(--rc2) 50%, #0a061e 100%); }
.sc-bg::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(120deg, rgba(255,255,255,.06) 0 9px, transparent 9px 21px); }
.sc-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.14) 1.2px, transparent 1.5px); background-size: 8px 8px; mask-image: linear-gradient(180deg, transparent 30%, #000); }
.sc-art { position: absolute; inset: 6% 5% 27%; display: grid; place-items: center; transform: translate(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -16px)); transition: transform .6s var(--spring); }
.sc-art img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.55)); opacity: 0; transform: scale(.8) translateY(14px); transition: opacity .45s, transform .8s var(--spring); }
.sc-art img.ok { opacity: 1; transform: none; }
.sc.hot .sc-art img.ok { transform: scale(1.08) rotate(-2deg); }
.sc-art.multi { grid-template-columns: repeat(4, 1fr); gap: 6px; inset: 10% 4% 34%; }
.sc-art.banner { inset: 14% 8% 34%; }
.sc-art.banner .bn { width: 100%; height: 100%; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.3), 0 12px 24px rgba(0,0,0,.5); }
.sc-art.banner .bn-name { position: absolute; left: 12px; bottom: 10px; font-family: 'Bungee'; font-size: 16px; text-shadow: 0 2px 0 #000; }
.sc-foil { position: absolute; inset: 0; opacity: 0; mix-blend-mode: color-dodge; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255,0,200,.55) 32%, rgba(0,230,255,.55) 44%, rgba(255,240,0,.55) 56%, rgba(120,255,120,.45) 66%, transparent 78%);
  background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%); transition: opacity .3s; }
.r-epic .sc-foil, .r-legendary .sc-foil, .r-mythic .sc-foil { opacity: .22; }
.sc.hot .sc-foil { opacity: .55; }
.sc-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.5), transparent 40%); opacity: 0; mix-blend-mode: overlay; transition: opacity .25s; }
.sc.hot .sc-glare { opacity: 1; }
.sc-in::before { content: ''; position: absolute; inset: -20%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%); transform: translateX(-120%); }
.r-rare .sc-in::before, .r-epic .sc-in::before, .r-legendary .sc-in::before, .r-mythic .sc-in::before { animation: shine 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.r-legendary .sc-in::after, .r-mythic .sc-in::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), var(--rc), #fff, var(--rc2), #fff, var(--rc)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spinAng 3.8s linear infinite; }
.sc-rar { position: absolute; left: 12px; top: 12px; z-index: 3; font-weight: 900; font-size: 11px; letter-spacing: .18em; padding: 4px 10px; border-radius: 999px; background: var(--rc); color: #120620; box-shadow: 0 0 16px var(--rc); }
.sc-flag { position: absolute; right: 10px; top: 10px; z-index: 3; font-family: 'Bungee'; font-size: 17px; padding: 3px 10px; background: var(--ye); color: #1a0b2e; transform: rotate(6deg); clip-path: polygon(4% 0, 100% 8%, 96% 100%, 0 90%); animation: flagWiggle 1.8s ease-in-out infinite; }
.sc-flag.alt { font-family: 'Barlow Condensed'; font-weight: 900; font-size: 11px; letter-spacing: .12em; background: #f4efe4; animation: none; }
.sc-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 44px 14px 52px; display: grid; background: linear-gradient(transparent, rgba(8,4,24,.94) 58%); }
.sc-info b { font-family: 'Bungee'; font-weight: 400; font-size: 20px; line-height: 1; text-shadow: 0 3px 0 #000; }
.sc.big .sc-info b { font-size: 30px; }
.sc-info small { font-weight: 900; letter-spacing: .16em; font-size: 11px; opacity: .75; margin-top: 4px; }
.sc-info s { opacity: .6; }
.sc-foot { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; display: flex; justify-content: flex-end; }
.sc-price { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 9px; border-radius: 999px; background: rgba(4,2,16,.88); box-shadow: inset 0 0 0 2px rgba(122,240,255,.65), 0 0 16px rgba(18,216,255,.25); font-family: 'Bungee'; font-size: 17px; }
.sc-price .drop { width: 18px; height: 18px; filter: drop-shadow(0 0 6px var(--cy)); }
.sc-price.poor { box-shadow: inset 0 0 0 2px rgba(255,90,110,.7); color: #ffb8c4; }
.sc-state { font-weight: 900; letter-spacing: .14em; font-size: 12px; padding: 6px 12px; border-radius: 999px; }
.sc-state.own { background: rgba(168,240,0,.18); color: #dcff85; box-shadow: inset 0 0 0 2px rgba(168,240,0,.6); }
.sc-state.eq { background: #f4efe4; color: #1a0b2e; box-shadow: 0 0 22px rgba(255,255,255,.55); }
.sc-state.lock { background: rgba(0,0,0,.65); color: var(--ye); }

/* ------------------------------------------------------------------ how it works + footer */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-step { padding: 24px; border-radius: 24px; background: linear-gradient(160deg, rgba(48,22,100,.8), rgba(14,8,38,.85)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); display: grid; gap: 6px;
  opacity: 0; transform: translateY(60px) rotate(2deg); transition: opacity .7s, transform 1s var(--spring); }
.how-step:nth-child(2) { transition-delay: .1s; } .how-step:nth-child(3) { transition-delay: .2s; }
.how-step.in { opacity: 1; transform: none; }
.how-step em { font-family: 'Bungee'; font-style: normal; font-size: 56px; line-height: 1; color: var(--ye); text-shadow: 0 0 24px rgba(255,225,77,.6); }
.how-step b { font-family: 'Bungee'; font-weight: 400; font-size: 26px; }
.how-step p { font-weight: 700; font-size: 17px; opacity: .88; }
.how-rar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.how-rar span { padding: 7px 16px; border-radius: 999px; background: var(--rc); color: #120620; font-weight: 900; letter-spacing: .16em; box-shadow: 0 0 18px var(--rc); }
.shop-foot { display: grid; justify-items: center; gap: 14px; padding: 60px 0 20px; opacity: .8; font-weight: 700; letter-spacing: .1em; }
.shop-foot .logo { font-size: 48px; }
@media (max-width: 900px) { .how { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ opening choreography */
.shop.entering .shop-logo .w1 { animation: slamIn .8s .12s var(--spring) backwards; }
.shop.entering .shop-logo .w2 { animation: slamIn .95s .24s var(--spring) backwards, sheen 6s 1.2s linear infinite; }
.shop.entering .shop-tag { animation: fadeUp2 .7s .55s var(--spring) backwards; }
.shop.entering .shop-reset { animation: popIn2 .7s .65s var(--spring) backwards; }
.shop.entering .shop-scrollhint { animation: fadeUp2 .7s .8s backwards; }
.shop.entering .sh-feature { animation: flipIn 1.2s .3s var(--spring) backwards; }
.shop.entering .shop-cats { animation: dropIn .8s .7s var(--spring) backwards; }
.shop.entering .shop-top > * { animation: dropIn .8s .4s var(--spring) backwards; }
.shop.entering .mega { animation: megaIn 1.6s .05s var(--snap) backwards; }
.shop.entering .ink { animation: inkIn 1.2s var(--spring) backwards, morph 12s 1.2s ease-in-out infinite; }
@keyframes slamIn { 0% { opacity: 0; transform: scale(3.2) rotate(-14deg); filter: blur(14px) brightness(3); } 55% { opacity: 1; transform: scale(.93) rotate(2deg); filter: blur(0) brightness(1.5); } 100% { transform: none; filter: none; } }
@keyframes fadeUp2 { from { opacity: 0; transform: translateY(30px); } }
@keyframes popIn2 { from { opacity: 0; transform: scale(.3) rotate(-10deg); } }
@keyframes flipIn { 0% { opacity: 0; transform: perspective(1000px) rotateY(-85deg) translateX(160px) scale(.75); } 100% { opacity: 1; } }
@keyframes megaIn { from { opacity: 0; transform: translateX(-30vw) rotate(-8deg); } }
@keyframes inkIn { from { scale: 0; } }

/* ------------------------------------------------------------------ detail panel + live 3D preview */
.shop.preview3d .shop-bg, .shop.preview3d .shop-scroll, .shop.preview3d .shop-prog { opacity: 0; pointer-events: none; }
.shop-detail { position: absolute; inset: 0; z-index: 10; display: none; pointer-events: auto; }
.shop-detail.open, .shop-detail.closing { display: block; }
.shop-detail.closing { pointer-events: none; }
.sd-dim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,3,18,.15) 0%, rgba(5,3,18,.45) 42%, rgba(5,3,18,.9) 68%); animation: fadeIn .4s; cursor: pointer; }
.shop:not(.preview3d) .sd-dim { background: radial-gradient(ellipse at 30% 50%, rgba(40,10,80,.55), rgba(5,3,18,.92) 70%); backdrop-filter: blur(8px); }
.closing .sd-dim { animation: fadeOut .35s forwards; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
.sd-live { position: absolute; left: 6vw; bottom: 9vh; display: grid; gap: 2px; animation: fadeUp2 .6s .2s backwards; }
.sd-live span { font-family: 'Bungee'; font-size: 22px; padding: 4px 14px; background: var(--li); color: #13220a; transform: rotate(-3deg); width: max-content; box-shadow: 0 0 22px rgba(168,240,0,.6); }
.sd-live small { font-weight: 900; letter-spacing: .2em; opacity: .85; margin-top: 6px; }
.sd-stage { position: absolute; left: 5vw; top: 50%; width: min(42vw, 560px); aspect-ratio: 1; transform: translateY(-50%); display: grid; place-items: center; animation: stageIn .9s var(--spring); }
.sd-stage .sc-art { position: relative; inset: auto; width: 100%; height: 100%; animation: floatArt 4s ease-in-out infinite; transform: none; }
.sd-stage .sc-art img { opacity: 1; filter: drop-shadow(0 30px 30px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(255,43,214,.35)); }
.sd-stage .sc-art.banner .bn { height: 55%; }
@keyframes stageIn { from { opacity: 0; transform: translateY(-50%) scale(.5) rotate(-20deg); } }
.sd-card { position: absolute; right: 4vw; top: 50%; width: min(540px, 44vw); max-height: 88vh; overflow: auto; transform: translateY(-50%); padding: 30px 32px 28px; border-radius: 30px; display: grid; gap: 14px;
  background: linear-gradient(165deg, rgba(36,18,86,.97), rgba(10,6,30,.97)); box-shadow: inset 0 0 0 3px var(--rc), 0 0 70px color-mix(in srgb, var(--rc) 45%, transparent), 0 30px 70px rgba(0,0,0,.65);
  animation: cardIn .75s var(--spring); }
.closing .sd-card { animation: cardOut .32s var(--snap) forwards; }
@keyframes cardIn { from { opacity: 0; transform: translate(110px, -50%) rotate(7deg) scale(.88); } }
@keyframes cardOut { to { opacity: 0; transform: translate(110px, -50%) rotate(6deg) scale(.9); } }
.sd-x { position: absolute; right: 16px; top: 14px; width: 40px; height: 40px; border-radius: 50%; font-weight: 900; font-size: 18px; background: rgba(255,255,255,.1); transition: transform .25s var(--spring), background .2s; }
.sd-x:hover { transform: rotate(90deg) scale(1.1); background: var(--mag); }
.sd-rar { color: var(--rc); font-weight: 900; letter-spacing: .26em; font-size: 13px; text-shadow: 0 0 14px var(--rc); }
.sd-card h2 { font-family: 'Bungee'; font-weight: 400; font-size: clamp(38px, 4vw, 62px); line-height: .95; transform: skewX(-6deg); text-shadow: 3px 0 var(--rc), -3px 0 var(--cy), 0 7px 0 #000; }
.sd-desc { font-size: 20px; font-weight: 700; opacity: .92; }
.sd-what { padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sd-what b { display: block; color: var(--ye); letter-spacing: .22em; font-size: 12px; margin-bottom: 4px; }
.sd-what p { font-weight: 700; font-size: 16px; opacity: .88; }
.sd-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sd-parts span { display: grid; grid-template-columns: 50px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); font-weight: 900; font-size: 14px; }
.sd-parts img { grid-row: span 2; width: 50px; height: 50px; object-fit: contain; }
.sd-parts small { font-size: 10px; letter-spacing: .14em; opacity: .7; }
.sd-parts span.own { opacity: .55; } .sd-parts span.own::after { content: '✓'; position: absolute; }
.sd-actions { display: grid; gap: 10px; margin-top: 4px; }
.sd-price { display: flex; align-items: center; gap: 10px; font-family: 'Bungee'; }
.sd-price b { font-weight: 400; font-size: 46px; line-height: 1; }
.sd-price small { font-family: 'Barlow Condensed'; font-weight: 900; letter-spacing: .2em; opacity: .7; }
.sd-price s { font-size: 22px; opacity: .45; margin-right: 6px; }
.sd-price .drop { width: 38px; height: 38px; filter: drop-shadow(0 0 12px var(--cy)); }
.sd-buy { position: relative; overflow: hidden; width: 100%; padding: 20px; border-radius: 20px; font-family: 'Bungee'; font-size: 22px; color: #1a0b2e; background: #f4efe4;
  box-shadow: 0 8px 0 #7a1a6a, 0 0 34px rgba(255,43,214,.4); transition: transform .15s var(--spring), box-shadow .15s; touch-action: none; }
.sd-buy i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--mag), var(--ye), var(--cy)); }
.sd-buy span { position: relative; }
.sd-buy:hover { transform: translateY(-2px); }
.sd-buy.holding { transform: translateY(5px) scale(.985); box-shadow: 0 3px 0 #7a1a6a, 0 0 60px rgba(255,43,214,.8); animation: holdShake .12s infinite; }
@keyframes holdShake { 50% { translate: 1px -1px; } }
.sd-buy:disabled { background: #2a2346; color: #ffb3c0; box-shadow: inset 0 0 0 2px rgba(255,90,110,.5); cursor: not-allowed; font-size: 17px; }
.sd-buy.nope { animation: nope .4s; }
@keyframes nope { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.sd-or { font-weight: 900; letter-spacing: .14em; opacity: .7; }
.sd-equip { width: 100%; padding: 16px; border-radius: 18px; font-family: 'Bungee'; font-size: 20px; color: #13220a; background: var(--li); box-shadow: 0 7px 0 #3f6a00, 0 0 30px rgba(168,240,0,.45); transition: transform .15s var(--spring); }
.sd-equip:hover { transform: translateY(-2px) scale(1.02); }
.sd-owned { font-weight: 900; letter-spacing: .2em; color: #dcff85; }
.sd-eq { text-align: center; padding: 14px; border-radius: 18px; font-family: 'Bungee'; font-size: 18px; background: #f4efe4; color: #1a0b2e; box-shadow: 0 0 26px rgba(255,255,255,.5); }
.sd-lock { padding: 14px; border-radius: 16px; font-weight: 900; background: rgba(0,0,0,.45); color: var(--ye); }
.shop-detail.bought .sd-card::after { content: 'GEKAUFT!'; position: absolute; left: 50%; top: 42%; font-family: 'Bungee'; font-size: 64px; color: var(--li); padding: 4px 22px; border: 6px solid var(--li); border-radius: 14px;
  text-shadow: 0 0 30px rgba(168,240,0,.8); box-shadow: 0 0 40px rgba(168,240,0,.6), inset 0 0 20px rgba(168,240,0,.4); background: rgba(8,20,4,.75); pointer-events: none; animation: stamp 1.6s var(--spring) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(3) rotate(-30deg); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(.9) rotate(-12deg); } 28% { transform: translate(-50%, -50%) scale(1.05) rotate(-14deg); } 75% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-14deg); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9) rotate(-14deg); } }
@media (max-width: 900px) { .sd-card { right: 3vw; left: 3vw; width: auto; } .sd-stage { display: none; } }
body.reduce-motion .sc, body.reduce-motion .ss-head, body.reduce-motion .how-step { transition: none !important; opacity: 1 !important; transform: none !important; }

/* main menu: compact nav so all entries fit (10 buttons) */
#menu .menu-nav { top: 29vh; gap: 6px; }
#menu .menu-nav .mbtn { padding: 6px 44px 6px 20px; }
#menu .menu-nav .mbtn b { font-size: clamp(20px, 2.1vw, 26px); }
#menu .menu-nav .mbtn small { font-size: 11.5px; }
@media (max-height: 760px) { #menu .menu-nav .mbtn small { display: none; } #menu .menu-nav { top: 26vh; } }

/* css/killcam.css */
/* DRENCH//ZONE — KILL CAM overlay + ink on the lens.
   Layers (far → near) slide with the camera for parallax: giant ghost name, ink stripes, card + timer.
   --kc = killer's ink colour, --px/--py = parallax offset (-1..1) set per frame by hud.js. */

.lens-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#hud .hud-top { z-index: 3; }
#hud .minimap-wrap, #hud .wpn-wrap, #hud .sp-wrap { transition: opacity .35s, transform .45s var(--snap); }
#hud.kc-on .minimap-wrap { opacity: 0; transform: translateX(-40px); }
#hud.kc-on .wpn-wrap { opacity: 0; transform: translateX(40px); }
#hud.kc-on .sp-wrap { opacity: 0; transform: translateY(-30px); }

.killcam { position: absolute; inset: 0; display: none; overflow: hidden; --kc: #ff1f5a; --px: 0; --py: 0; pointer-events: none; }
.killcam.show { display: block; }

/* cinematic letterbox with dripping ink edge */
.kc-bar { position: absolute; left: 0; right: 0; height: 10vh; background: #07060c; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 3.2vw; }
.kc-top { top: 0; transform: translateY(-101%); }
.kc-bot { bottom: 0; transform: translateY(101%); }
.killcam.show .kc-top { animation: kcBarT .55s .08s var(--snap) forwards; }
.killcam.show .kc-bot { animation: kcBarB .55s .08s var(--snap) forwards; }
@keyframes kcBarT { to { transform: none; } }
@keyframes kcBarB { to { transform: none; } }
.kc-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 22px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, var(--kc) 0 6px, transparent 6.5px) 0 0 / 53px 22px repeat-x,
    radial-gradient(ellipse 4px 11px at 50% 0, var(--kc) 0 98%, transparent 100%) 19px 0 / 97px 22px repeat-x,
    linear-gradient(var(--kc), var(--kc)) 0 0 / 100% 4px no-repeat; }
.kc-top::after { top: 100%; }
.kc-bot::after { bottom: 100%; transform: scaleY(-1); }
.kc-rec, .kc-hint { font-weight: 900; letter-spacing: .32em; font-size: 13px; color: rgba(244,239,228,.75); display: flex; align-items: center; gap: .7em; margin-top: 3vh; }
.kc-rec { font-family: 'Bungee'; font-weight: 400; letter-spacing: .18em; font-size: 16px; color: #fff; }
.kc-rec i { width: 12px; height: 12px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 12px var(--kc); animation: kcRec 1s steps(2) infinite; }
@keyframes kcRec { 50% { opacity: .15; } }
.kc-hint kbd { font: inherit; padding: .1em .45em; border-radius: .35em; background: rgba(255,255,255,.14); letter-spacing: .1em; }

/* parallax layers */
.kc-par { position: absolute; inset: 0; will-change: transform; }
.kc-l0 { transform: translate3d(calc(var(--px) * -70px), calc(var(--py) * -40px), 0); }
.kc-l1 { transform: translate3d(calc(var(--px) * -38px), calc(var(--py) * -22px), 0); }
.kc-l2 { transform: translate3d(calc(var(--px) * 14px), calc(var(--py) * 9px), 0); z-index: 2; }

.kc-ghost { position: absolute; left: -4vw; bottom: 7vh; font-family: 'Bungee'; font-size: 19vw; line-height: .85; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--kc) 55%, transparent); transform: rotate(-7deg); opacity: 0; }
.killcam.show .kc-ghost { animation: kcGhost 1s .45s var(--snap) forwards, kcDrift 14s 1.4s linear infinite; }
@keyframes kcGhost { from { opacity: 0; letter-spacing: .4em; } to { opacity: .9; letter-spacing: 0; } }
@keyframes kcDrift { to { translate: -12vw 0; } }

.kc-stripe { position: absolute; left: -10vw; bottom: 16vh; width: 70vw; height: 64px; transform: rotate(-7deg) scaleX(0); transform-origin: left;
  background: repeating-linear-gradient(-55deg, var(--kc) 0 16px, transparent 16px 30px); opacity: .55;
  -webkit-mask: linear-gradient(90deg, #000 55%, transparent); mask: linear-gradient(90deg, #000 55%, transparent); }
.kc-stripe.s2 { bottom: 11vh; left: -14vw; width: 52vw; height: 14px; background: var(--kc); opacity: .85; }
.killcam.show .kc-stripe { animation: kcStripe .6s .38s var(--snap) forwards; }
.killcam.show .kc-stripe.s2 { animation-delay: .46s; }
@keyframes kcStripe { to { transform: rotate(-7deg) scaleX(1); } }

/* killer card */
.kc-card { position: absolute; left: 4vw; bottom: 14vh; min-width: 360px; padding: 18px 30px 20px 26px; display: grid; gap: 6px; isolation: isolate; opacity: 0; transform: translateX(-140%) skewX(-7deg); }
.killcam.show .kc-card { animation: kcCard .7s .55s var(--spring) forwards; }
@keyframes kcCard { to { opacity: 1; transform: translateX(0) skewX(-7deg); } }
.kc-card-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(8,7,16,.94), rgba(20,14,36,.9)); clip-path: polygon(0 5%, 97% 0, 100% 92%, 2% 100%);
  box-shadow: inset 0 0 0 3px var(--kc); }
.kc-card-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--kc) 55%, transparent) 1.2px, transparent 1.6px) 0 0 / 9px 9px;
  -webkit-mask: linear-gradient(100deg, transparent 45%, #000); mask: linear-gradient(100deg, transparent 45%, #000); opacity: .6; }
.kc-card-bg::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--kc); box-shadow: 0 0 20px var(--kc); }
.kc-card small { font-weight: 900; letter-spacing: .38em; font-size: 13px; color: var(--kc); filter: brightness(1.3); }
.kc-card > b { font-family: 'Bungee'; font-weight: 400; font-size: 52px; line-height: .95; color: #fff; text-shadow: 4px 4px 0 var(--kc), 8px 8px 0 rgba(0,0,0,.55); }
.kc-meta { display: flex; gap: 10px; align-items: center; font-weight: 900; letter-spacing: .12em; font-size: 15px; }
.kc-wpn { display: flex; gap: 6px; align-items: center; padding: 3px 10px 3px 6px; border-radius: 8px; background: rgba(255,255,255,.1); }
.kc-wpn svg { width: 24px; height: 24px; color: var(--kc); }
.kc-wpn em { font-style: normal; }
.kc-skin { padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--kc) 30%, transparent); }
.kc-hp { position: relative; height: 10px; margin-top: 6px; border-radius: 5px; background: rgba(255,255,255,.12); overflow: hidden; }
.kc-hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, var(--kc), #fff); transition: width .25s; }
.kc-stats { display: flex; gap: 14px; align-items: center; font-weight: 900; letter-spacing: .2em; font-size: 13px; color: rgba(244,239,228,.8); }
.kc-stats b { font-family: 'Bungee'; font-weight: 400; font-size: 22px; letter-spacing: 0; color: #fff; margin-right: 6px; }
.kc-nem { display: none; padding: 4px 10px; border-radius: 6px; background: var(--kc); color: #0b0a10; letter-spacing: .16em; animation: kcNem .9s ease-in-out infinite alternate; }
.kc-nem.on { display: inline-block; }
@keyframes kcNem { to { box-shadow: 0 0 18px var(--kc); transform: scale(1.06) rotate(-2deg); } }

/* killer got splatted by your team while you watch */
.kc-card::after { content: 'AUCH ERWISCHT!'; position: absolute; right: -18px; top: 8px; padding: 4px 12px; font-family: 'Bungee'; font-size: 18px; color: #fff; background: #0b0a10;
  box-shadow: inset 0 0 0 3px #fff; transform: rotate(9deg) scale(2.2); opacity: 0; pointer-events: none; }
.kc-card.down::after { animation: kcDown .45s var(--spring) forwards; }
.kc-card.down > b { text-decoration: line-through; text-decoration-thickness: 5px; text-decoration-color: #fff; }
@keyframes kcDown { to { opacity: 1; transform: rotate(9deg) scale(1); } }

/* respawn ring */
.kc-timer { position: absolute; right: 4.5vw; bottom: 13vh; width: 132px; height: 132px; display: grid; place-items: center; opacity: 0; transform: scale(.3) rotate(-40deg); }
.killcam.show .kc-timer { animation: kcTimer .6s .7s var(--spring) forwards; }
@keyframes kcTimer { to { opacity: 1; transform: none; } }
.kc-timer svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.kc-rbg { fill: rgba(8,7,16,.85); stroke: rgba(255,255,255,.14); stroke-width: 8; }
.kc-ring { fill: none; stroke: var(--kc); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; filter: drop-shadow(0 0 6px var(--kc)); }
.kc-timer b { position: relative; z-index: 1; font-family: 'Bungee'; font-weight: 400; font-size: 50px; line-height: 1; color: #fff; margin-top: -10px; }
.kc-timer small { position: absolute; bottom: 30px; font-weight: 900; letter-spacing: .3em; font-size: 11px; color: rgba(244,239,228,.75); }
.kc-timer b.tick { animation: kcTick .45s var(--spring); }
@keyframes kcTick { from { transform: scale(1.6); color: var(--kc); } }

/* name tag that tracks the killer on screen */
.kc-tag { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; opacity: 0; transition: opacity .25s; will-change: transform; z-index: 2; }
.kc-tag.on { opacity: 1; }
.kc-tag b { font-family: 'Bungee'; font-weight: 400; font-size: 20px; padding: 2px 12px 3px; background: var(--kc); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.45); clip-path: polygon(0 8%, 100% 0, 96% 100%, 3% 92%); }
.kc-tag span { font-weight: 900; font-size: 12px; letter-spacing: .25em; color: #fff; text-shadow: 0 1px 3px #000; }
.kc-tag i { width: 16px; height: 16px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 0 3px var(--kc), 0 0 16px var(--kc); animation: kcDia 1s ease-in-out infinite; }
@keyframes kcDia { 50% { transform: rotate(45deg) translate(-4px, -4px); } }

@media (max-width: 900px) {
  .kc-card { min-width: 0; left: 3vw; right: 30vw; padding: 12px 18px 14px 18px; }
  .kc-card > b { font-size: 34px; }
  .kc-timer { width: 96px; height: 96px; right: 3vw; }
  .kc-timer b { font-size: 34px; }
  .kc-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-par { transform: none !important; }
  .killcam.show .kc-ghost { animation: kcGhost .01s forwards; }
}

/* css/settings.css */
/* DRENCH//ZONE — SETTINGS. Frosted dark-grey glass over the live arena, orange accent,
   one focused row (orange + white outline), tab pill that springs between tabs, swipeable pages. */

.st-screen {
  --st-or: #ff8a1d; --st-or2: #ffa840; --st-ordk: #c65c0a; --st-ink: #2a1606;
  --st-text: #fff; --st-muted: #cbc4d8; --st-dot: #8a8496;
  --st-ease: cubic-bezier(.2, .9, .25, 1); --st-spring: cubic-bezier(.3, 1.4, .4, 1);
  z-index: 5; font-size: clamp(11px, 1vw, 18px); font-family: 'Nunito', system-ui, sans-serif; color: var(--st-text);
}
.st-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12,9,18,.5) 0%, rgba(12,9,18,.22) 58%, rgba(12,9,18,0) 82%), linear-gradient(180deg, rgba(12,9,18,.38), rgba(12,9,18,0) 32%); }

/* ------------------------------------------------------------------ header */
.st-head { position: absolute; left: 1.8vw; top: 2.4vh; display: flex; align-items: flex-start; gap: 1.5em; z-index: 2; }
.st-back { display: flex; align-items: center; gap: .55em; height: 3.7em; margin-top: 1.4em; padding: 0 .85em 0 .42em; border-radius: 2em;
  background: rgba(22,18,28,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 .4em 1.2em rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.07);
  transition: transform .3s var(--st-spring), background .2s; }
.st-back:hover { transform: translateX(-.2em) scale(1.04); background: rgba(34,28,42,.9); }
.st-back i { width: 2.85em; height: 2.85em; border-radius: 50%; background: #fff; color: #1d1824; display: grid; place-items: center; }
.st-back i svg { width: 1.5em; height: 1.5em; }
.st-back kbd { font: 900 .95em 'Nunito', sans-serif; background: #f1eef4; color: #1d1824; padding: .28em .62em; border-radius: .5em; box-shadow: 0 .18em 0 #9c96a6; }
.st-title { position: relative; }
.st-splat { position: absolute; left: -1.9em; top: -2.6em; width: 8em; color: var(--st-or); filter: drop-shadow(0 .2em .5em rgba(0,0,0,.25)); pointer-events: none; }
.st-title h2 { position: relative; font-family: 'Lilita One', 'Bungee', sans-serif; font-weight: 400; font-size: 5.2em; line-height: 1; letter-spacing: .01em; color: #fff;
  text-shadow: .035em .035em 0 #1a1422, -.035em .035em 0 #1a1422, .035em -.035em 0 #1a1422, -.035em -.035em 0 #1a1422, 0 .07em 0 #1a1422, 0 .14em .3em rgba(0,0,0,.45); }
.st-title p { position: relative; margin: .2em 0 0 .1em; font-weight: 800; font-size: 1.35em; text-shadow: 0 .1em .35em rgba(0,0,0,.65); }

/* ------------------------------------------------------------------ layout + glass */
.st-main { position: absolute; left: 1.6vw; right: 7.6vw; top: 17.4vh; bottom: 1.6vh; display: grid; grid-template-columns: minmax(0, 1.92fr) minmax(0, 1fr); gap: 2.1vw; align-items: start; }
.st-panel { position: relative; border-radius: 1.8em; isolation: isolate;
  background: linear-gradient(160deg, rgba(48,42,60,.82), rgba(31,27,40,.86));
  -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 1.6em 4em rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.1); }
.st-left { height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* ------------------------------------------------------------------ tabs */
.st-tabs { display: flex; align-items: center; gap: .7em; margin: 1.15em 1.15em .8em; padding: .55em .7em; border-radius: 1.15em; background: rgba(16,13,22,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.st-key { flex: none; width: 1.95em; height: 1.95em; display: grid; place-items: center; border-radius: .45em; cursor: pointer; font: 900 .9em 'Nunito', sans-serif;
  background: #dcd8e2; color: #2a2433; box-shadow: 0 .2em 0 #8f8a98; transition: transform .2s var(--st-spring), background .2s; }
.st-key:hover { background: #fff; transform: translateY(-.1em); }
.st-key:active { transform: translateY(.12em); box-shadow: 0 .06em 0 #8f8a98; }
.st-tabrow { position: relative; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.st-tabrow button { position: relative; z-index: 1; height: 3.3em; display: flex; align-items: center; justify-content: center; gap: .55em;
  font: 900 1.2em 'Nunito', sans-serif; color: #d6d0e0; transition: color .3s, transform .25s var(--st-spring); }
.st-tabrow button svg { width: 1.25em; height: 1.25em; }
.st-tabrow button:hover:not(.on) { color: #fff; transform: translateY(-.06em); }
.st-tabrow button.on { color: var(--st-ink); }
.st-pill { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: .8em; pointer-events: none;
  background: linear-gradient(180deg, #ffab45, #ff8418); box-shadow: 0 .3em 0 var(--st-ordk), 0 .7em 1.6em rgba(255,130,20,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .55s var(--st-spring), width .55s var(--st-spring); }
.st-pill.squish { animation: stSquish .55s var(--st-ease); }
@keyframes stSquish { 35% { scale: 1.07 .88; } 70% { scale: .98 1.04; } }

/* ------------------------------------------------------------------ pages (swipe) */
.st-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.st-list { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; padding: .45em 1.15em 1.2em; display: flex; flex-direction: column; gap: .6em;
  scrollbar-width: thin; scrollbar-color: rgba(255,138,29,.55) transparent; transition: transform .38s var(--st-ease), filter .38s, opacity .38s; }
.st-list::-webkit-scrollbar { width: 6px; } .st-list::-webkit-scrollbar-thumb { background: rgba(255,138,29,.55); border-radius: 3px; }
.st-list.dragging { transition: none; cursor: grabbing; }
.st-list.leave { animation: stLeave .38s cubic-bezier(.4, 0, .2, 1) forwards; pointer-events: none; }
@keyframes stLeave { to { transform: translateX(calc(var(--d) * -110px)); filter: blur(12px); opacity: 0; } }
.st-screen.active .st-row { animation: stRowUp .55s var(--st-ease) calc(.14s + var(--i) * .035s) both; }
.st-screen.active .st-list.enter .st-row { animation: stEnter .55s var(--st-ease) calc(var(--i) * .03s) both; }
@keyframes stRowUp { from { transform: translateY(16px); filter: blur(6px); opacity: 0; } }
@keyframes stEnter { from { transform: translateX(calc(var(--d) * 110px)); filter: blur(10px); opacity: 0; } }

/* ------------------------------------------------------------------ rows */
.st-row { position: relative; flex: none; display: flex; align-items: center; gap: 1em; min-height: 4.75em; padding: .55em 1.25em .55em 1.35em; border-radius: 1.05em;
  background: rgba(255,255,255,.045); cursor: default; transition: background .28s, box-shadow .28s, transform .28s var(--st-ease); }
.st-row:hover:not(.focus) { background: rgba(255,255,255,.075); }
.st-row.focus { background: linear-gradient(90deg, rgba(124,66,26,.66), rgba(78,50,44,.58));
  box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or), 0 .5em 1.9em rgba(255,120,20,.3); }
.st-row.flash { animation: stFlash .6s var(--st-ease); }
@keyframes stFlash { 30% { background: rgba(255,138,29,.35); } }
.st-dot { flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--st-dot); transition: background .25s, box-shadow .25s, transform .3s var(--st-spring); }
.st-row.focus .st-dot { background: var(--st-or); box-shadow: 0 0 .7em var(--st-or); transform: scale(1.35); }
.st-row label { flex: 1; min-width: 0; font-weight: 900; font-size: 1.25em; letter-spacing: .005em; text-shadow: 0 1px 0 rgba(0,0,0,.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: inherit; }
.st-ctl { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 1.1em; }

/* slider */
.st-slider { position: relative; width: 17.5em; height: 2.9em; cursor: pointer; touch-action: none; }
.st-track { position: absolute; left: 0; right: 0; top: 50%; height: .9em; transform: translateY(-50%); border-radius: 1em; background: #1c1823; box-shadow: inset 0 .12em .3em rgba(0,0,0,.65); overflow: hidden; }
.st-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1em; background: linear-gradient(90deg, #ff7a0a, var(--st-or2)); box-shadow: 0 0 .8em rgba(255,140,30,.5); transition: width .14s var(--st-ease); }
.st-knob { position: absolute; top: 50%; width: 2.75em; height: 2.75em; margin-left: -1.375em; transform: translateY(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f1eef4 55%, #d8d2de); box-shadow: 0 .25em .65em rgba(0,0,0,.45), 0 0 0 .15em rgba(0,0,0,.14);
  transition: left .14s var(--st-ease), transform .25s var(--st-spring), box-shadow .25s; }
.st-row.focus .st-knob { box-shadow: 0 0 0 .2em var(--st-or), 0 .3em .9em rgba(0,0,0,.5); }
.st-slider:hover .st-knob { transform: translateY(-50%) scale(1.06); }
.st-slider.grab .st-knob { transform: translateY(-50%) scale(1.14); transition: transform .25s var(--st-spring); }
.st-slider.grab .st-fill { transition: none; }
.st-val { min-width: 3.5em; text-align: right; font-family: 'Lilita One', sans-serif; font-size: 1.9em; line-height: 1; text-shadow: 0 .08em 0 rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }

/* toggle */
.st-toggle { position: relative; width: 9.2em; height: 3.6em; border-radius: 2em; background: #1b1722; cursor: pointer;
  box-shadow: inset 0 .15em .45em rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04); transition: background .35s, box-shadow .35s; }
.st-toggle b { position: absolute; top: .45em; left: .45em; width: 2.7em; height: 2.7em; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #f1eef4 55%, #d8d2de); box-shadow: 0 .25em .6em rgba(0,0,0,.45); transition: left .42s var(--st-spring); }
.st-toggle span { position: absolute; top: 50%; right: 1.15em; transform: translateY(-50%); font-weight: 900; font-size: .95em; letter-spacing: .16em; color: #c7c0d2; transition: color .3s; }
.st-toggle.on { background: linear-gradient(90deg, #ff7a0a, var(--st-or2)); box-shadow: inset 0 .12em .3em rgba(0,0,0,.2), 0 0 1.1em rgba(255,130,20,.4); }
.st-toggle.on b { left: calc(100% - 3.15em); }
.st-toggle.on span { right: auto; left: 1.25em; color: var(--st-ink); }
.st-toggle:active b { width: 3.2em; }

/* chooser */
.st-select { position: relative; display: grid; grid-template-columns: 2.5em 1fr 2.5em; align-items: center; width: 21.9em; height: 3.2em; }
.st-arr { width: 2.5em; height: 2.5em; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transition: background .2s, color .2s, transform .25s var(--st-spring); }
.st-arr svg { width: 1.2em; height: 1.2em; }
.st-arr:hover { background: var(--st-or); color: var(--st-ink); transform: scale(1.1); }
.st-opt { text-align: center; font-family: 'Lilita One', sans-serif; font-size: 1.45em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-opt.flip { animation: stFlip .38s var(--st-ease); }
@keyframes stFlip { from { transform: translateX(calc(var(--d) * 22px)); filter: blur(4px); opacity: 0; } }
.st-dots { position: absolute; left: 50%; bottom: -.3em; transform: translateX(-50%); display: flex; gap: .3em; }
.st-dots i { width: .4em; height: .4em; border-radius: .3em; background: rgba(255,255,255,.25); transition: width .3s var(--st-spring), background .3s; }
.st-dots i.on { width: 1.2em; background: var(--st-or); }

/* link */
.st-link { display: flex; align-items: center; gap: .45em; padding: .5em .2em; font-weight: 900; font-size: 1.05em; letter-spacing: .15em; color: #fff; cursor: pointer; transition: color .2s, transform .25s var(--st-spring); }
.st-link svg { width: 1.2em; height: 1.2em; }
.st-link:hover, .st-row.focus .st-link { color: var(--st-or2); transform: translateX(.2em); }

/* ------------------------------------------------------------------ footer */
.st-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: .3em 1.15em 1.1em; padding-top: 1em; border-top: 1px solid rgba(255,255,255,.08); }
.st-saved { display: flex; align-items: center; gap: .6em; font-weight: 800; font-size: 1.05em; color: var(--st-muted); }
.st-saved i { width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; background: rgba(62,207,110,.18); color: #4ee07f; }
.st-saved i svg { width: .95em; height: .95em; }
.st-saved.ping i { animation: stPing .7s var(--st-ease); }
@keyframes stPing { 30% { transform: scale(1.35); box-shadow: 0 0 0 .45em rgba(78,224,127,.18); } }
.st-reset { display: flex; align-items: center; gap: .6em; height: 3.3em; padding: 0 1.5em; border-radius: 1em; cursor: pointer; white-space: nowrap;
  border: .14em solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); font-weight: 900; font-size: 1.05em; letter-spacing: .1em; color: #fff;
  transition: border-color .2s, background .2s, color .2s, transform .25s var(--st-spring); }
.st-reset svg { width: 1.3em; height: 1.3em; transition: transform .5s var(--st-ease); }
.st-reset:hover { border-color: var(--st-or); background: rgba(255,138,29,.12); }
.st-reset:hover svg { transform: rotate(-200deg); }
.st-reset.arm { background: var(--st-or); border-color: var(--st-or); color: var(--st-ink); animation: stArm 1s ease-in-out infinite; }
@keyframes stArm { 50% { box-shadow: 0 0 0 .35em rgba(255,138,29,.25), 0 0 1.4em rgba(255,138,29,.5); } }

/* ------------------------------------------------------------------ detail card */
.st-detail { padding: 1.45em 1.45em 1.7em; }
.st-dhead { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.05em; }
.st-dhead h3 { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.95em; line-height: 1.05; text-shadow: 0 .08em 0 rgba(0,0,0,.4); }
.st-chip { flex: none; font-family: 'Lilita One', sans-serif; font-size: 1.15em; padding: .25em .8em; border-radius: 1em; white-space: nowrap;
  background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); box-shadow: 0 .2em 0 var(--st-ordk), 0 0 1em rgba(255,130,20,.35); }
.st-chip.bump { animation: stBump .45s var(--st-spring); }
@keyframes stBump { 40% { transform: scale(1.14) rotate(-3deg); } }
.st-preview { padding: .75em; border-radius: 1.2em; background: rgba(16,13,22,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.st-cvwrap { border-radius: .95em; overflow: hidden; aspect-ratio: 16 / 6.8; background: #a9e0fb; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.st-cvwrap canvas { width: 100%; height: 100%; display: block; }
.st-meta { display: flex; align-items: center; gap: .8em; padding: .95em .35em .3em; font-weight: 800; font-size: .98em; line-height: 1.3; }
.st-meta > i { flex: none; width: 1.9em; height: 1.9em; color: #fff; }
.st-meta > i svg { width: 100%; height: 100%; }
.st-meta b { color: #ff9a2e; font-weight: 900; }
.st-meta .sw { display: inline-block; width: .95em; height: .95em; border-radius: .28em; margin-right: .25em; vertical-align: -.12em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.st-desc { margin-top: 1.2em; font-weight: 800; font-size: 1.08em; line-height: 1.45; color: #d6cfe2; }
.st-detail.swap .st-dhead h3, .st-detail.swap .st-desc, .st-detail.swap .st-meta { animation: stSwap .45s var(--st-ease) both; }
.st-detail.swap .st-desc { animation-delay: .05s; }
@keyframes stSwap { from { transform: translateY(8px); filter: blur(6px); opacity: 0; } }

/* ------------------------------------------------------------------ open choreography */
.st-screen.active .st-head { animation: stHead .6s var(--st-ease) both; }
.st-screen.active .st-splat { animation: stSplat .75s var(--st-spring) .08s both; }
.st-screen.active .st-left { animation: stLeft .7s var(--st-ease) .04s both; }
.st-screen.active .st-detail { animation: stRight .7s var(--st-ease) .12s both; }
@keyframes stHead { from { transform: translateY(-22px); filter: blur(10px); opacity: 0; } }
@keyframes stSplat { from { transform: scale(.15) rotate(-40deg); opacity: 0; } }
@keyframes stLeft { from { transform: translateX(-60px) scale(.98); filter: blur(16px); opacity: 0; } }
@keyframes stRight { from { transform: translateX(60px) scale(.98); filter: blur(16px); opacity: 0; } }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .st-main { grid-template-columns: 1fr; right: 1.6vw; }
  .st-detail { display: none; }
  .st-screen { font-size: clamp(11px, 1.45vw, 16px); }
}
@media (max-width: 700px) {
  .st-screen { font-size: 11px; }
  .st-head { left: 16px; right: 16px; }
  .st-title h2 { font-size: 3.2em; }
  .st-main { left: 8px; right: 8px; top: 120px; }
  .st-tabrow button span { display: none; }
  .st-row { flex-wrap: wrap; gap: .4em 1em; }
  .st-row label { flex-basis: calc(100% - 2em); }
  .st-ctl { width: 100%; }
  .st-slider { flex: 1; width: auto; }
  .st-select { width: 100%; }
  .st-foot { flex-wrap: wrap; }
}
body.reduce-motion #settings .st-row, body.reduce-motion #settings .st-list { animation-duration: .01s !important; }

/* css/menus.css */
/* DRENCH//ZONE — every menu in the SETTINGS glass style: frosted dark-grey panels over the live arena,
   orange accent, Lilita titles, Nunito text, focused items with the orange + white frame.
   The ITEM SHOP keeps its own design (shop.css) and is not touched here. */

/* ------------------------------------------------------------------ building blocks */
.st-screen .st-back b { font-weight: 900; font-size: .95em; letter-spacing: .12em; color: #fff; }
.gx-ptitle { flex: none; display: flex; align-items: center; gap: .7em; margin: 1.25em 1.4em .75em; }
.gx-ptitle i { flex: none; width: 1.7em; height: 1.7em; color: var(--st-or); }
.gx-ptitle i svg { width: 100%; height: 100%; }
.gx-ptitle b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.55em; letter-spacing: .01em; text-shadow: 0 .08em 0 rgba(0,0,0,.35); }
.gx-ptitle small { margin-left: auto; padding: .28em .8em; border-radius: 1em; background: rgba(255,255,255,.07); font-weight: 800; font-size: .92em; color: var(--st-muted); white-space: nowrap; }
.gx-col { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.gx-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .35em 1.15em 1.25em; scrollbar-width: thin; scrollbar-color: rgba(255,138,29,.55) transparent; }
.gx-scroll::-webkit-scrollbar { width: 6px; } .gx-scroll::-webkit-scrollbar-thumb { background: rgba(255,138,29,.55); border-radius: 3px; }
.gx-stack { display: flex; flex-direction: column; gap: .9em; }
.st-main.gx-cols3 { right: 1.6vw; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.st-main.gx-full { right: 1.6vw; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.st-screen.active .gx-col { animation: gxUp .7s var(--st-ease) both; }
.st-screen.active .gx-col:nth-child(2) { animation-delay: .07s; }
.st-screen.active .gx-col:nth-child(3) { animation-delay: .14s; }
@keyframes gxUp { from { transform: translateY(40px) scale(.98); filter: blur(14px); opacity: 0; } }
@keyframes gxIn { from { transform: translateX(-36px); filter: blur(8px); opacity: 0; } }
@keyframes gxPop { from { transform: scale(.9); filter: blur(12px); opacity: 0; } }

.st-screen input, .st-screen select { font: 800 1.1em 'Nunito', sans-serif; color: #fff; background: #1b1722; border: 0; border-radius: .8em; padding: .6em .9em; outline: none; min-width: 0;
  box-shadow: inset 0 .12em .35em rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); transition: box-shadow .2s; }
.st-screen input:focus, .st-screen select:focus { box-shadow: inset 0 .12em .35em rgba(0,0,0,.6), 0 0 0 .18em var(--st-or); }
.st-screen input::placeholder { color: #7d768a; }
.st-screen select option { background: #1b1722; color: #fff; }
.gx-krow kbd, .menu-foot kbd { font: 900 .85em 'Nunito', sans-serif; display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .6em; margin: 0; border-radius: .45em;
  background: #dcd8e2; color: #2a2433; box-shadow: 0 .2em 0 #8f8a98; transform: none; letter-spacing: 0; white-space: nowrap; }

/* ------------------------------------------------------------------ buttons on the glass screens (pause, online, ranked, lobby, results) */
.st-screen .mbtn { position: relative; display: grid; align-content: center; gap: .08em; min-width: 0; min-height: 3.6em; padding: .55em 3em .6em 2.6em; text-align: left; color: #fff;
  border-radius: 1em; clip-path: none; overflow: visible;
  background: radial-gradient(circle at 1.3em 50%, var(--st-dot, #8a8496) 0 .27em, transparent .3em), rgba(255,255,255,.055);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: background .28s, box-shadow .28s, transform .3s var(--st-spring, cubic-bezier(.3,1.4,.4,1)); }
.st-screen .mbtn:nth-child(2n) { clip-path: none; }
.st-screen .mbtn::before { display: none; }
.st-screen .mbtn b { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.3em; line-height: 1.1; letter-spacing: .01em; }
.st-screen .mbtn small { font-weight: 800; font-size: .85em; letter-spacing: .02em; text-transform: none; opacity: 1; color: var(--st-muted, #cbc4d8); }
.st-screen .mbtn::after { content: ''; position: absolute; right: 1.25em; top: 50%; width: .55em; height: .55em; border-right: .2em solid currentColor; border-top: .2em solid currentColor;
  transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity .2s, right .35s var(--st-spring, ease); }
.st-screen .mbtn:hover, .st-screen .mbtn.sel { transform: none; color: #fff;
  background: radial-gradient(circle at 1.3em 50%, #ff8a1d 0 .33em, transparent .36em), linear-gradient(90deg, rgba(124,66,26,.7), rgba(78,50,44,.62));
  box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em #ff8a1d, 0 .5em 1.9em rgba(255,120,20,.3); }
.st-screen .mbtn.sel::after, .st-screen .mbtn:hover::after { content: ''; opacity: 1; right: .95em; font-size: inherit; transform: translateY(-50%) rotate(45deg); }
.st-screen .mbtn.hot { color: #2a1606; background: radial-gradient(circle at 1.3em 50%, rgba(42,22,6,.55) 0 .27em, transparent .3em), linear-gradient(180deg, #ffab45, #ff8418);
  box-shadow: 0 .28em 0 #c65c0a, 0 .6em 1.6em rgba(255,130,20,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.st-screen .mbtn.hot small { color: rgba(42,22,6,.72); }
.st-screen .mbtn.hot:hover, .st-screen .mbtn.hot.sel { color: #2a1606; background: radial-gradient(circle at 1.3em 50%, #2a1606 0 .33em, transparent .36em), linear-gradient(180deg, #ffb95e, #ff8a1d);
  box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em #ff8a1d, 0 .28em 0 #c65c0a, 0 .8em 2.1em rgba(255,130,20,.5); }
.st-screen .mbtn:active { transform: translateY(.1em) scale(.99); }

/* ------------------------------------------------------------------ LOADOUT */
#loadout .loadout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13em, 1fr)); gap: .8em; max-width: none; padding-top: .2em; }
#loadout .wcard { padding: .9em 1em 1em; border-radius: 1.2em; clip-path: none; gap: .15em; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  transition: background .28s, box-shadow .28s, transform .35s var(--st-spring); }
#loadout .wcard img { aspect-ratio: 1.55; transition: transform .45s var(--st-spring); }
#loadout .wcard b { font-family: 'Lilita One', sans-serif; font-size: 1.45em; line-height: 1.05; }
#loadout .wcard small { font-weight: 800; font-size: .82em; letter-spacing: .06em; color: var(--st-muted); opacity: 1; }
#loadout .wcard:hover, #loadout .wcard.sel { transform: translateY(-.2em); background: linear-gradient(160deg, rgba(124,66,26,.66), rgba(78,50,44,.58));
  box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or), 0 .5em 1.9em rgba(255,120,20,.3); }
#loadout .wcard:hover img { transform: scale(1.07) rotate(-4deg); }
#loadout .wcard.on:not(:hover) { background: linear-gradient(160deg, rgba(255,138,29,.2), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 .15em rgba(255,138,29,.75); }
#loadout .wcard.on::after { top: .7em; right: .7em; padding: .3em .75em; border-radius: 1em; font: 900 .68em 'Nunito', sans-serif; letter-spacing: .12em;
  background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); box-shadow: 0 .15em 0 var(--st-ordk); }
#loadout.active .wcard { animation: stRowUp .55s var(--st-ease) backwards; }
#loadout .loadout-detail { margin: 0; max-width: none; display: block; transform: none; }
.ld-art { position: relative; aspect-ratio: 16 / 7.4; border-radius: .95em; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 62%, rgba(255,138,29,.38), transparent 58%), repeating-linear-gradient(120deg, rgba(255,255,255,.035) 0 12px, transparent 12px 26px), linear-gradient(160deg, #3b3249, #1b1723); }
.ld-art img { max-width: 82%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 1em 1em rgba(0,0,0,.55)); animation: ldFloat 4s ease-in-out infinite; }
@keyframes ldFloat { 50% { transform: translateY(-.35em) rotate(-2deg); } }
.ld-stats { display: grid; gap: .55em; margin-top: 1.1em; }
.ld-stat { display: grid; grid-template-columns: 8.2em 1fr 2.2em; align-items: center; gap: .8em; font-weight: 900; font-size: .98em; }
.ld-stat .st-track { position: relative; left: auto; right: auto; top: auto; transform: none; height: .8em; }
.ld-stat .st-fill { transition: width .6s var(--st-ease); }
.ld-stat b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.15em; text-align: right; }
.loadout-detail .st-desc em { display: block; margin-top: .55em; font-style: normal; color: #ffb35e; }
.loadout-detail.swap > * { animation: stSwap .45s var(--st-ease) both; }
.loadout-detail.swap > :nth-child(2) { animation-delay: .04s; } .loadout-detail.swap > :nth-child(3) { animation-delay: .08s; } .loadout-detail.swap > :nth-child(4) { animation-delay: .12s; }

/* ------------------------------------------------------------------ CONTROLS */
.gx-krow { display: flex; align-items: center; justify-content: space-between; gap: 1em; min-height: 3.2em; margin-bottom: .45em; padding: .45em .9em .45em 1.15em; border-radius: .95em;
  background: rgba(255,255,255,.045); transition: background .25s, box-shadow .25s; }
.gx-krow:hover { background: linear-gradient(90deg, rgba(124,66,26,.5), rgba(78,50,44,.45)); box-shadow: inset 0 0 0 .14em rgba(255,138,29,.7); }
.gx-krow span { font-weight: 900; font-size: 1.02em; }
.gx-krow em { flex: none; display: flex; align-items: center; gap: .3em; font-style: normal; }
.gx-krow em i { font-style: normal; font-weight: 900; color: var(--st-muted); }
.gx-trow { display: grid; gap: .2em; margin-bottom: .45em; padding: .7em 1em .75em 1.15em; border-radius: .95em; background: rgba(255,255,255,.045); transition: background .25s, box-shadow .25s; }
.gx-trow:hover { background: linear-gradient(90deg, rgba(124,66,26,.5), rgba(78,50,44,.45)); box-shadow: inset 0 0 0 .14em rgba(255,138,29,.7); }
.gx-trow b { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.25em; color: #ffb35e; }
.gx-trow span { font-weight: 800; font-size: .95em; line-height: 1.35; color: #d6cfe2; }
#controls.active .gx-krow, #controls.active .gx-trow { animation: stRowUp .5s var(--st-ease) backwards; }

/* ------------------------------------------------------------------ MAP SELECT */
#maps .map-grid { grid-template-columns: repeat(auto-fill, minmax(22em, 1fr)); gap: 1.1em; max-width: none; padding: 1em .2em .2em; }
#maps .map-card { min-height: 15.5em; padding: 1.3em; border-radius: 1.4em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 .7em 1.8em rgba(0,0,0,.35); transition: transform .35s var(--st-spring), box-shadow .28s; }
#maps .map-card::after { background: linear-gradient(transparent, rgba(18,15,24,.92)); }
#maps .map-card b { font-family: 'Lilita One', sans-serif; font-size: 2.1em; line-height: 1.05; text-shadow: 0 .08em 0 rgba(0,0,0,.5); }
#maps .map-card p { font-weight: 800; font-size: 1em; color: #e8e2f0; opacity: 1; }
#maps .map-card small { font-weight: 900; font-size: .78em; letter-spacing: .16em; color: #ffb35e; }
#maps .map-card .tag-new { font-family: 'Lilita One', sans-serif; font-size: 1em; border-radius: 1em; background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); box-shadow: 0 .2em 0 var(--st-ordk); }
#maps .map-card .tag-cur { font: 900 .78em 'Nunito', sans-serif; letter-spacing: .12em; border-radius: 1em; background: #fff; color: #2a2433; }
#maps .map-card:hover, #maps .map-card.sel:hover { transform: translateY(-.35em) scale(1.02); box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or), 0 .9em 2.2em rgba(255,120,20,.38); }
#maps .map-card.sel { transform: none; box-shadow: inset 0 0 0 .15em rgba(255,138,29,.8), 0 .7em 1.8em rgba(0,0,0,.35); }
#maps.active .map-card { animation: gxUp .6s var(--st-ease) backwards; }
#maps.active .map-card:nth-child(2) { animation-delay: .06s; } #maps.active .map-card:nth-child(3) { animation-delay: .12s; } #maps.active .map-card:nth-child(4) { animation-delay: .18s; }

/* ------------------------------------------------------------------ TRICKS */
#tricks .trick-grid { display: flex; flex-direction: column; gap: .55em; max-width: none; }
#tricks .tcard { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "dot name tag" ". how how"; align-items: center; column-gap: .9em; row-gap: .15em;
  padding: .8em 1.2em .85em; border-radius: 1em; background: rgba(255,255,255,.045); box-shadow: none; filter: none; opacity: 1; transition: background .25s, box-shadow .25s; }
#tricks .tcard .st-dot { grid-area: dot; }
#tricks .tcard b { grid-area: name; font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 1.2em; }
#tricks .tcard small { grid-area: tag; padding: .3em .8em; border-radius: 1em; font: 900 .75em 'Nunito', sans-serif; letter-spacing: .12em; background: rgba(78,224,127,.16); color: #4ee07f; }
#tricks .tcard p { grid-area: how; font-weight: 800; font-size: .95em; color: var(--st-muted); opacity: 1; }
#tricks .tcard:hover { background: linear-gradient(90deg, rgba(124,66,26,.66), rgba(78,50,44,.58)); box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or); }
#tricks .tcard:hover .st-dot { background: var(--st-or); box-shadow: 0 0 .7em var(--st-or); }
#tricks .tcard.locked b, #tricks .tcard.locked p { opacity: .55; }
#tricks .tcard.locked small { background: rgba(255,255,255,.08); color: #ffb35e; }
#tricks .tcard.locked .st-dot { background: #57515f; }
#tricks.active .tcard { animation: stRowUp .55s var(--st-ease) calc(.14s + var(--i) * .035s) both; }
.tr-bar { height: 1.15em; margin: .5em .3em .2em; border-radius: 1em; background: #1c1823; box-shadow: inset 0 .12em .3em rgba(0,0,0,.65); overflow: hidden; }
.tr-bar i { display: block; height: 100%; width: 0; border-radius: 1em; background: linear-gradient(90deg, #ff7a0a, #ffa840); box-shadow: 0 0 .8em rgba(255,140,30,.55); transition: width .9s var(--st-ease); }

/* ------------------------------------------------------------------ RANKED */
#profile .pf-card { margin-top: 1.15em; padding: 1.4em 1.2em 1.3em; border-radius: 1.3em; gap: .8em; background: rgba(255,255,255,.04); }
#profile .pf-card:not([class*="frame-"]), #profile .pf-card.frame-basic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
#profile .pf-card p { font-weight: 800; color: #d6cfe2; }
#profile .pf-rank { font-family: 'Lilita One', sans-serif; font-size: 2.1em; text-shadow: 0 .08em 0 rgba(0,0,0,.45); }
#profile .pf-name input { width: 100%; font-family: 'Lilita One', sans-serif; font-size: 1.55em; text-align: center; }
#profile .pf-title { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; }
#profile .pf-title select { font-size: .9em; letter-spacing: .02em; color: #ffb35e; }
#profile .pf-rp .bar { height: 1em; border-radius: 1em; background: #1c1823; box-shadow: inset 0 .12em .3em rgba(0,0,0,.65); }
#profile .pf-rp small { font-weight: 800; letter-spacing: .04em; color: var(--st-muted); }
#profile .pf-stats div { border-radius: .85em; background: rgba(255,255,255,.06); padding: .45em .3em; }
#profile .pf-stats b { font-family: 'Lilita One', sans-serif; font-size: 1.4em; }
#profile .pf-stats small { font-weight: 900; font-size: .68em; letter-spacing: .1em; color: var(--st-muted); opacity: 1; }
#profile .pf-coins { font-family: 'Lilita One', sans-serif; font-size: 1.3em; color: #ffb35e; }
.st-screen .pf-code { justify-content: center; border-radius: .85em; background: #f1eef4; color: #1d1824; font-weight: 900; letter-spacing: .1em; box-shadow: 0 .2em 0 #9c96a6; }
.st-screen .pf-code:hover { background: #ffab45; }
#profile .pf-ladder { gap: .5em; }
#profile .pf-tier { grid-template-columns: 3.4em 1fr; padding: .5em .85em; border-radius: .95em; background: rgba(255,255,255,.045); transition: background .25s; }
#profile .pf-tier b { font-family: 'Lilita One', sans-serif; font-size: 1.2em; }
#profile .pf-tier small { font-weight: 800; font-size: .82em; color: var(--st-muted); opacity: 1; }
#profile .pf-tier.current { background: linear-gradient(90deg, rgba(124,66,26,.6), rgba(78,50,44,.5)); box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or); }
#profile .rk-rules { gap: .5em; }
#profile .rk-rules p { padding: .6em .85em; border-radius: .85em; background: rgba(255,255,255,.045); font-weight: 800; color: #d6cfe2; }
#profile .rk-play b { font-size: 1.6em !important; }
.st-screen .rk-queue { border-radius: 1.1em; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.st-screen .rk-queue h4 { font-family: 'Lilita One', sans-serif; font-size: 1.3em; color: #ffb35e; }
.st-screen .on-status { font-weight: 800; color: #ffb35e; min-height: 1.4em; }
.st-screen .on-timer { font-family: 'Lilita One', sans-serif; color: #ffb35e; font-size: 1.4em; }

/* ------------------------------------------------------------------ ONLINE */
#online .gx-col { height: auto; align-self: start; max-height: 100%; overflow-y: auto; }
#online .on-card { display: grid; gap: .8em; align-content: start; padding: 1.5em 1.4em; border-radius: 1.8em;
  background: linear-gradient(160deg, rgba(48,42,60,.82), rgba(31,27,40,.86)); box-shadow: 0 1.6em 4em rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.1); }
#online .on-card label { font-weight: 900; font-size: .8em; letter-spacing: .2em; color: var(--st-muted); opacity: 1; }
#online .on-card input { font-size: 1.3em; background: #1b1722; color: #fff; }
#online .on-join { grid-template-columns: 7.5em 1fr; }
#online h3 { font-family: 'Lilita One', sans-serif; font-weight: 400; font-size: 1.6em; }
#online .on-room h3 span { color: #ffb35e; }
#online .on-mycode { font-weight: 800; letter-spacing: .02em; color: var(--st-muted); }
#online .pf-add { grid-template-columns: 1fr auto; }
#online .pf-add .mbtn { padding: .4em 2.2em .45em 2.2em; min-height: 0; }
#online .pf-add .mbtn b { font-size: 1.1em; }
.st-screen .pf-friends { gap: .5em; }
.st-screen .pf-friend { border-radius: .95em; background: rgba(255,255,255,.05); padding: .5em .8em; }
.st-screen .pf-friend b { font-weight: 900; }
.st-screen .pf-friend small { color: var(--st-muted); opacity: 1; }
.st-screen .pf-friend .dot.on { background: #4ee07f; box-shadow: 0 0 .5em #4ee07f; }
.st-screen .pf-friend button { border-radius: 1em; background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); box-shadow: 0 .15em 0 var(--st-ordk); }
.st-screen .pf-friend button.x { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.st-screen .pf-empty { font-weight: 800; color: var(--st-muted); opacity: 1; }
.st-screen .on-players { gap: .5em; }
.st-screen .on-players div { border-radius: .85em; background: rgba(255,255,255,.06); }
.st-screen .on-players div.me { box-shadow: inset 0 0 0 .15em #fff8ee, 0 0 0 .15em var(--st-or); }
.st-screen .on-players .host::after { border-radius: 1em; background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); }
#online .on-map { font-weight: 900; letter-spacing: .1em; color: var(--st-muted); opacity: 1; }

/* ------------------------------------------------------------------ PAUSE */
#pause.gx-pause { display: grid; place-items: center; }
.gx-pausebox { position: relative; width: min(30em, 92vw); padding: 2.4em 1.5em 1.5em; display: grid; gap: 1.5em; }
.gx-pausebox .st-title { margin-left: 1.2em; }
.gx-pausebox .st-title h2 { font-size: 4.2em; }
.gx-pausebox .st-splat { width: 6.5em; left: -1.6em; top: -2.2em; }
#pause .menu-nav { position: static; left: auto; top: auto; display: grid; gap: .5em; }
#pause.active .gx-pausebox { animation: gxPop .55s var(--st-spring) both; }
#pause.active .menu-nav .mbtn { animation: gxIn .5s var(--st-ease) backwards; }
#pause.active .menu-nav .mbtn:nth-child(2) { animation-delay: .06s; } #pause.active .menu-nav .mbtn:nth-child(3) { animation-delay: .12s; }

/* ------------------------------------------------------------------ PRE-MATCH LOBBY */
#prematch.pm { background: linear-gradient(90deg, rgba(12,9,18,.6) 0%, rgba(12,9,18,.3) 50%, rgba(12,9,18,0) 72%); }
#prematch .pm-panel { left: 1.6vw; top: 2vh; bottom: 2vh; width: min(54em, 60vw); padding: 1.2em 1.3em 1.2em; gap: .8em; border-radius: 1.8em;
  background: linear-gradient(160deg, rgba(48,42,60,.82), rgba(31,27,40,.86)); -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 1.6em 4em rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.1);
  scrollbar-width: thin; scrollbar-color: rgba(255,138,29,.55) transparent; }
#prematch.active .pm-panel { animation: stLeft .7s var(--st-ease) both; }
#prematch .pm-head { gap: 1.1em; align-items: center; }
#prematch .pm-head .st-back { margin-top: 0; }
#prematch .pm-head .st-title h2 { font-size: 2.9em; }
#prematch .pm-head .st-splat { width: 5em; left: -1.3em; top: -1.7em; }
#prematch .pm-mode { margin-left: auto; font-family: 'Lilita One', sans-serif; font-size: 1.05em; padding: .3em .95em; border-radius: 1em; background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); box-shadow: 0 .2em 0 var(--st-ordk); }
#prematch .pm-sec { padding: .9em 1em 1em; border-radius: 1.2em; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
#prematch .pm-sec h3 { font-family: 'Lilita One', sans-serif; font-size: 1.3em; letter-spacing: .01em; margin-bottom: .6em; }
#prematch .pm-w, #prematch .pm-s { border-radius: 1em; background: rgba(255,255,255,.05); transition: background .25s, box-shadow .25s, transform .3s var(--st-spring); }
#prematch .pm-w b, #prematch .pm-s b { font-family: 'Lilita One', sans-serif; font-size: .95em; }
#prematch .pm-w small { font-weight: 800; font-size: .68em; color: var(--st-muted); opacity: 1; }
#prematch .pm-s small { font-weight: 900; color: #ffb35e; }
#prematch .pm-w:hover, #prematch .pm-s:hover { transform: translateY(-.15em); background: rgba(255,255,255,.1); }
#prematch .pm-w.on, #prematch .pm-s.on { background: linear-gradient(160deg, rgba(124,66,26,.7), rgba(78,50,44,.62)); box-shadow: inset 0 0 0 .16em #fff8ee, 0 0 0 .16em var(--st-or), 0 .4em 1.4em rgba(255,120,20,.3); }
#prematch .pm-wdesc { font-weight: 800; font-size: .95em; color: #d6cfe2; }
#prematch .pm-wdesc span { color: #ffb35e; }
#prematch .pm-m { border-radius: 1.1em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
#prematch .pm-m::after { background: linear-gradient(transparent, rgba(18,15,24,.92)); }
#prematch .pm-m b { font-family: 'Lilita One', sans-serif; font-size: 1.2em; text-shadow: 0 .08em 0 rgba(0,0,0,.5); }
#prematch .pm-m .tag-new { font-family: 'Lilita One', sans-serif; border-radius: 1em; background: linear-gradient(180deg, #ffab45, #ff8418); color: var(--st-ink); }
#prematch .pm-votes { border-radius: 1em; background: #1c1823; }
#prematch .pm-votes i { background: linear-gradient(90deg, #ff7a0a, #ffa840); }
#prematch .pm-votes span { font-weight: 900; }
#prematch .pm-m.on { transform: translateY(-.2em); box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or), 0 .6em 1.8em rgba(255,120,20,.35); }
#prematch .pm-m.spin { transform: scale(1.04); box-shadow: inset 0 0 0 .25em #fff, 0 0 2em rgba(255,171,69,.9); }
#prematch .pm-m.win { transform: scale(1.06) rotate(-1deg); box-shadow: inset 0 0 0 .25em #fff8ee, 0 0 0 .25em var(--st-or), 0 0 3em rgba(255,138,29,.85); }
#prematch .pm-players span { border-radius: .85em; background: rgba(255,255,255,.07); font-weight: 900; }
#prematch .pm-players span.me { box-shadow: inset 0 0 0 .15em #fff8ee, 0 0 0 .15em var(--st-or); }
#prematch .pm-players em { color: #ffb35e; }
#prematch .pm-timer { font-family: 'Lilita One', sans-serif; font-size: 2.8em; color: #ffb35e; text-shadow: 0 .08em 0 rgba(0,0,0,.45); }
#prematch .pm-ready { min-width: 14em; }
#prematch .pm-reveal { border-radius: 1.6em; background: rgba(31,27,40,.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or), 0 0 4em rgba(255,138,29,.5); }
#prematch .pm-reveal small { font-weight: 900; letter-spacing: .25em; color: var(--st-muted); }
#prematch .pm-reveal b { font-family: 'Lilita One', sans-serif; color: #ffab45; text-shadow: 0 .08em 0 rgba(0,0,0,.5); }

/* ------------------------------------------------------------------ RESULTS */
#results { background: rgba(12,9,18,.5); gap: 1.4em; }
#results .res-title { font-family: 'Lilita One', sans-serif; letter-spacing: .01em; color: #fff;
  text-shadow: .035em .035em 0 #1a1422, -.035em .035em 0 #1a1422, .035em -.035em 0 #1a1422, -.035em -.035em 0 #1a1422, 0 .07em 0 #1a1422, 0 .14em .35em rgba(0,0,0,.5); }
#results .res-bar { height: 4.4em; border-radius: 1.3em; clip-path: none; overflow: hidden; background: rgba(31,27,40,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 .8em 2em rgba(0,0,0,.35); }
#results .res-bar i { border-radius: 1.3em; }
#results .res-bar span { font-family: 'Lilita One', sans-serif; font-size: 2.3em; text-shadow: 0 .08em 0 rgba(0,0,0,.45); }
#results .res-bar em { font-style: normal; font-weight: 900; font-size: 1.2em; letter-spacing: .12em; text-shadow: 0 .08em .2em rgba(0,0,0,.6); }
#results .res-bar.win { box-shadow: inset 0 0 0 .2em #fff8ee, 0 0 0 .2em var(--st-or), 0 0 2.2em rgba(255,138,29,.45); }
#results .res-neutral { font-weight: 900; letter-spacing: .2em; color: var(--st-muted); opacity: 1; }
#results .res-xp { font-family: 'Lilita One', sans-serif; font-size: 1.5em; color: #ffb35e; }
#results .res-table { gap: .45em 1.4em; }
#results .res-table div { border: 0; border-radius: .85em; padding: .45em .95em; font-weight: 800; font-size: 1.02em; background: rgba(31,27,40,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); outline: none; }
#results .res-table div.t0 { box-shadow: inset .35em 0 0 var(--t0); }
#results .res-table div.t1 { box-shadow: inset .35em 0 0 var(--t1); }
#results .res-table div.me { box-shadow: inset .35em 0 0 var(--st-or), inset 0 0 0 .15em #fff8ee, 0 0 0 .15em var(--st-or); }
#results .res-nav { gap: .9em; }
#results .res-nav .mbtn { min-width: 13em; }
.res-reward .rr-rank { border-radius: 1.1em; background: rgba(31,27,40,.85); }
.res-reward .rr-rank b, .res-reward .rr-delta, .res-reward .rr-coins { font-family: 'Lilita One', sans-serif; }
.toast { border-radius: 1.1em; background: rgba(31,27,40,.94); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: 'Nunito', sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset .3em 0 0 #ff8a1d, 0 .6em 1.6em rgba(0,0,0,.45); }
.toast button { border-radius: 1em; background: linear-gradient(180deg, #ffab45, #ff8418); color: #2a1606; }
.toast button.no { background: rgba(255,255,255,.14); color: #fff; }

/* ------------------------------------------------------------------ smaller screens */
@media (max-width: 1100px) {
  .st-main.gx-cols3 { grid-template-columns: minmax(0, 1fr); overflow-y: auto; align-items: start; align-content: start; }
  .st-main.gx-cols3 .gx-col { height: auto; min-height: auto; }
  .st-main.gx-cols3 .gx-scroll { flex: none; overflow: visible; }
  #loadout .st-main, #tricks .st-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  #loadout .st-detail, #tricks .st-detail { display: block; padding: 1em 1.2em 1.1em; }
  #loadout .ld-art, #loadout .ld-stats, #loadout .st-desc { display: none; }
  #prematch .pm-panel { width: auto; right: 1.6vw; }
}
@media (max-width: 700px) {
  #prematch .pm-panel { left: 8px; right: 8px; top: 8px; bottom: 8px; padding: 1em .9em; }
  #prematch .pm-head { flex-wrap: wrap; gap: .6em; }
  #prematch .pm-head .st-title h2 { font-size: 2.1em; }
  #prematch .pm-weapons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #prematch .pm-skins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #prematch .pm-maps { grid-template-columns: minmax(0, 1fr); }
  #prematch .pm-foot { grid-template-columns: 1fr auto; }
  #prematch .pm-players { grid-column: 1 / -1; }
  .gx-krow { flex-wrap: wrap; }
  #results .res-table { grid-template-columns: 1fr; }
}

/* css/touch.css */
/* DRENCH//ZONE — phones & tablets. Touch controls (core/touch.js) in the HUD's navy-glass look,
   HUD rearranged around the thumbs, and compact layouts for short landscape screens (iPhone quer). */

body.touch, body.touch * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.touch #game { touch-action: none; }

.tc { position: fixed; inset: 0; z-index: 30; display: none; pointer-events: none; --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); }
body.touch.in-match .tc { display: block; }
.tc-move, .tc-look { position: absolute; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
.tc-move { left: 0; width: 46%; }
.tc-look { right: 0; width: 54%; }
.tc-hint { position: absolute; left: calc(40px + var(--sl)); bottom: calc(36px + var(--sb)); width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  font: 900 11px 'Barlow Condensed', sans-serif; letter-spacing: .25em; color: rgba(255,255,255,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); background: rgba(11,20,70,.22); }
.tc-stick { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .12s; pointer-events: none; }
.tc-stick::before { content: ''; position: absolute; left: -64px; top: -64px; width: 128px; height: 128px; border-radius: 50%; background: rgba(11,20,70,.45); box-shadow: inset 0 0 0 3px rgba(83,216,255,.55), 0 0 22px rgba(83,216,255,.25); }
.tc-stick i { position: absolute; left: -27px; top: -27px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dfe8ff 60%, #9fb2e8); box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.tc-stick.on { opacity: 1; }
.tc-stick.on ~ .tc-move .tc-hint, .tc-move:has(~ .tc-stick.on) .tc-hint { opacity: 0; }

.tc-btn { position: absolute; pointer-events: auto; touch-action: none; display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 50%; color: #fff;
  width: var(--s); height: var(--s); padding: 0; background: rgba(11,20,70,.62); box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .12s, background .12s, box-shadow .12s; }
.tc-btn svg { width: calc(var(--s) * .4); height: calc(var(--s) * .4); }
.tc-btn small { font: 900 9px 'Barlow Condensed', sans-serif; letter-spacing: .12em; opacity: .85; }
.tc-btn.on { transform: scale(.9); background: rgba(83,216,255,.5); box-shadow: inset 0 0 0 3px #fff, 0 0 20px rgba(83,216,255,.6); }
.tc-fire { --s: 96px; right: calc(26px + var(--sr)); bottom: calc(30px + var(--sb)); background: color-mix(in srgb, var(--t0) 70%, #0b1446); box-shadow: inset 0 0 0 3px #fff, 0 0 22px color-mix(in srgb, var(--t0) 55%, transparent), 0 6px 16px rgba(0,0,0,.35); }
.tc-fire.on { background: var(--t0); }
.tc-jump { --s: 68px; right: calc(140px + var(--sr)); bottom: calc(22px + var(--sb)); }
.tc-swim { --s: 64px; right: calc(34px + var(--sr)); bottom: calc(142px + var(--sb)); }
.tc-swim.on { background: color-mix(in srgb, var(--t0) 60%, #0b1446); box-shadow: inset 0 0 0 3px #fff, 0 0 22px var(--t0); }
.tc-slide { --s: 56px; right: calc(122px + var(--sr)); bottom: calc(112px + var(--sb)); }
.tc-sub { --s: 52px; right: calc(222px + var(--sr)); bottom: calc(32px + var(--sb)); }
.tc-aim { --s: 48px; right: calc(206px + var(--sr)); bottom: calc(110px + var(--sb)); }
.tc-special { --s: 58px; right: calc(96px + var(--sr)); bottom: calc(190px + var(--sb)); opacity: .55; }
.tc-special.ready { opacity: 1; background: linear-gradient(160deg, #ffe14d, #ff9f1a); color: #1a0b2e; box-shadow: inset 0 0 0 3px #fff, 0 0 26px rgba(255,225,77,.8); animation: tcReady 1s ease-in-out infinite alternate; }
@keyframes tcReady { to { transform: scale(1.08); } }
.tc-pause, .tc-map { --s: 42px; top: calc(10px + env(safe-area-inset-top, 0px)); border-radius: 12px; }
.tc-pause { left: calc(12px + var(--sl)); }
.tc-map { left: calc(60px + var(--sl)); }
.tc-pause small, .tc-map small { display: none; }

.tc-rotate { position: fixed; inset: 0; display: none; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px; pointer-events: auto;
  background: rgba(8,6,14,.94); color: #fff; }
.tc-rotate b { font: 400 30px 'Bungee', sans-serif; }
.tc-rotate small { font: 700 16px 'Barlow Condensed', sans-serif; letter-spacing: .08em; opacity: .8; }
.tc-rotate::before { content: ''; width: 46px; height: 76px; border-radius: 10px; box-shadow: inset 0 0 0 4px #fff; animation: tcTurn 1.8s ease-in-out infinite; margin-bottom: 10px; }
@keyframes tcTurn { 40%, 70% { transform: rotate(-90deg); } }
@media (orientation: portrait) { body.touch.in-match .tc-rotate { display: grid; } }

/* HUD around the thumbs */
body.touch .minimap-wrap { display: none; }
body.touch .wpn-wrap { top: calc(60px + env(safe-area-inset-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: auto; bottom: auto; justify-items: start; gap: .3em; }
body.touch .wpn-wrap .ink-line, body.touch .wpn-wrap .hp { width: 9.5em; }
body.touch .wpn-slots, body.touch .wpn-name, body.touch .sp-key, body.touch .kc-hint, body.touch .mm-tag { display: none; }
body.touch .swim-hint { font-size: 0; bottom: auto; top: 30%; }
body.touch .swim-hint::after { content: 'TINTE-BUTTON · IN FARBE TANKEN'; font-size: calc(14px * var(--hud-scale)); }
body.touch .lock-hint { display: none !important; }
body.touch .kill-banner, body.touch .trick-pop { top: 24%; }

/* ------------------------------------------------------------------ short landscape screens (phones quer) */
@media (max-height: 520px) {
  #menu .menu-logo { left: 4vw; top: 3vh; font-size: clamp(30px, 5vw, 48px); }
  #menu .menu-nav { top: 22vh; left: 4vw; display: grid; grid-template-columns: repeat(2, minmax(0, 17em)); gap: 5px 10px; }
  #menu .menu-nav .mbtn { min-width: 0; padding: 4px 26px 4px 14px; }
  #menu .menu-nav .mbtn b { font-size: clamp(14px, 2.2vw, 19px); }
  #menu .menu-nav .mbtn small { display: none; }
  #menu .menu-nav .mbtn.sel, #menu .menu-nav .mbtn:hover { transform: translateX(6px) rotate(-1deg) scale(1.02); }
  #menu .menu-nav .mbtn.sel::after { font-size: 12px; right: 8px; }
  #menu .mb-new { right: 6px; font-size: 10px; }
  #menu .menu-topbar { top: 2vh; right: 2vw; transform: scale(.72); transform-origin: top right; }
  #menu .menu-card { right: 3vw; bottom: 4vh; transform: rotate(3deg) scale(.7); transform-origin: bottom right; }
  #menu .menu-foot { display: none; }
  .st-screen .st-head { top: 8px; gap: .8em; }
  .st-screen .st-back { margin-top: 0; height: 2.8em; }
  .st-screen .st-title h2 { font-size: 2.4em; }
  .st-screen .st-title p { display: none; }
  .st-screen .st-splat { width: 4em; left: -1em; top: -1.2em; }
  .st-screen .st-main { top: calc(8px + 3.4em); bottom: 8px; }
  #prematch .pm-panel { top: 6px; bottom: 6px; left: 6px; }
  #prematch .pm-weapons { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #prematch .pm-skins { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  #prematch .pm-maps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #prematch .pm-m { min-height: 90px; }
  #results { gap: 10px; transform: scale(.78); }
  .count-num { font-size: 34vh; }
}