:root {
  --red: #ff1e3c;
  --red-soft: rgba(255, 30, 60, 0.55);
  --cyan: #22e6ff;
  --pink: #ff2bd6;
  --text: #f4f1f6;
  --glass: rgba(14, 10, 20, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.09);
  --glow-red: 0 0 14px rgba(255, 30, 60, 0.65);
  --display: 'Chakra Petch', system-ui, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --jp: 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #05040a;
  font-family: var(--display);
  color: var(--text);
  user-select: none;
}

/* thin neon scrollbars (settings / loadout panels) */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--red) rgba(255,255,255,.04); } }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--red), var(--pink)); border-radius: 3px; box-shadow: 0 0 8px rgba(255,30,60,.6); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }
::-webkit-scrollbar-button { display: none; }

#game { display: block; width: 100vw; height: 100vh; }
.hidden { display: none !important; }
.mono { font-family: var(--mono); letter-spacing: 0.06em; }
.jp { font-family: var(--jp); font-weight: 700; }

.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 40px rgba(0,0,0,.35);
  border-radius: 10px;
}

#fps {
  position: fixed; top: 14px; right: 18px; font-size: 11px; color: var(--red);
  text-shadow: var(--glow-red); pointer-events: none; opacity: .85;
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; display: none; }
body.playing #hud { display: block; }
body.playing #menu { display: none; }

.label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; opacity: .75; }
.label .jp { color: var(--red); margin-right: 4px; opacity: 1; }
.big { font-size: 46px; font-weight: 700; line-height: 1; text-shadow: 0 0 18px rgba(255,255,255,.25); }
.bar { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--red); box-shadow: var(--glow-red); transform-origin: left; transition: transform .08s; }

#crosshair {
  position: absolute; left: 50%; top: 50%; --gap: 6px; --ch-color: #fff; --ch-scale: 1;
  transform: scale(var(--ch-scale)); transition: opacity .1s; filter: drop-shadow(0 0 3px var(--red));
}
#crosshair i { position: absolute; background: var(--ch-color); }
#crosshair .t, #crosshair .b { width: 2px; height: 8px; left: -1px; }
#crosshair .l, #crosshair .r { width: 8px; height: 2px; top: -1px; }
#crosshair .t { bottom: var(--gap); }
#crosshair .b { top: var(--gap); }
#crosshair .l { right: var(--gap); }
#crosshair .r { left: var(--gap); }
#crosshair.ads { opacity: 0; }

#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; filter: drop-shadow(0 0 4px #fff); }
#hitmarker i { position: absolute; width: 2px; height: 8px; background: #fff; left: -1px; top: -4px; }
#hitmarker i:nth-child(1) { transform: rotate(45deg) translateY(-11px); }
#hitmarker i:nth-child(2) { transform: rotate(135deg) translateY(-11px); }
#hitmarker i:nth-child(3) { transform: rotate(225deg) translateY(-11px); }
#hitmarker i:nth-child(4) { transform: rotate(315deg) translateY(-11px); }
#hitmarker.head { filter: drop-shadow(0 0 5px var(--red)); }
#hitmarker.head i { background: var(--red); }

#kills { position: absolute; left: 28px; bottom: 28px; padding: 14px 20px 16px; min-width: 130px; }
#kills .big { margin-top: 6px; }
#health { position: absolute; left: 178px; bottom: 28px; padding: 14px 20px 16px; width: 200px; }
#health .big { margin-top: 6px; font-variant-numeric: tabular-nums; }
#health .bar i { background: #4dff88; box-shadow: 0 0 10px rgba(77,255,136,.7); }
#health.low .bar i { background: var(--red); box-shadow: var(--glow-red); }
#health.low #hpVal { color: var(--red); text-shadow: var(--glow-red); animation: blink .6s steps(2) infinite; }
/* death: kill cam + respawn countdown */
#death { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; display: none; }
body.dead #death { display: block; animation: feedIn .25s ease-out; }
#death .d-title { font-size: 44px; font-weight: 700; letter-spacing: .12em; color: var(--red); text-shadow: 0 0 24px rgba(255,30,60,.7); }
#death .d-title .jp { font-size: 22px; margin-right: 6px; }
#death .d-by { margin-top: 6px; font-size: 14px; letter-spacing: .18em; }
#death .d-by b { color: #fff; }
#death .d-time { margin-top: 18px; font-size: 12px; letter-spacing: .22em; opacity: .75; }
#death .d-time b { color: var(--red); font-size: 18px; }
body.dead #crosshair, body.dead #hitmarker, body.dead #ammo, body.dead #slots, body.dead #speed { display: none; }
body.dead #hurt { opacity: .55 !important; }
/* end of match: only the results and the timer */
body.matchover #hud > *:not(#scoreboard):not(#timer):not(#feed) { display: none; }

/* match timer + scoreboard */
#timer { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 6px 18px; font-size: 22px; letter-spacing: .12em;
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 8px; backdrop-filter: blur(10px); font-variant-numeric: tabular-nums; }
#timer.low { color: var(--red); text-shadow: var(--glow-red); }
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.97); width: min(620px, 92vw);
  padding: 20px 24px; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
#scoreboard.show { opacity: 1; transform: translate(-50%, -50%); }
#scoreboard.final { border-color: var(--red); box-shadow: 0 0 40px rgba(255,30,60,.35); }
#scoreboard.final .sb-foot { visibility: hidden; }
.sb-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sb-head h2 { font-size: 24px; color: var(--red); text-shadow: 0 0 14px rgba(255,30,60,.5); letter-spacing: .05em; }
.sb-head h2 span { font-family: var(--mono); font-size: 12px; color: var(--text); opacity: .7; text-shadow: none; }
#scoreboard table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
#scoreboard th { font-size: 10px; letter-spacing: .18em; opacity: .55; font-weight: normal; padding: 6px 8px; text-align: right; }
#scoreboard td { padding: 7px 8px; text-align: right; border-top: 1px solid rgba(255,255,255,.06); font-variant-numeric: tabular-nums; }
#scoreboard .nm { text-align: left; }
#scoreboard td.nm { font-family: var(--display); font-size: 15px; letter-spacing: .06em; }
#scoreboard .rank { text-align: left; width: 28px; opacity: .6; }
#scoreboard tr.me td { background: rgba(255,30,60,.14); color: #fff; }
#scoreboard tr.me b { color: var(--red); }
#scoreboard tbody tr:first-child td.rank { color: #ffb02e; opacity: 1; }
.sb-foot { margin-top: 12px; font-size: 10px; opacity: .5; text-align: center; letter-spacing: .14em; }
/* getting shot: red edges + an arrow toward the shooter */
#hurt { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(255,20,50,.55) 100%); }
#dmgDir { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
#dmgDir i { position: absolute; left: -36px; top: -150px; width: 72px; height: 18px;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,40,70,.95), transparent 70%); filter: drop-shadow(0 0 8px var(--red));
  clip-path: polygon(0 100%, 50% 0, 100% 100%); }

#ammo { position: absolute; right: 28px; bottom: 28px; padding: 14px 20px 16px; width: 240px; box-sizing: border-box; text-align: right; }
#ammo .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ammo .big { font-variant-numeric: tabular-nums; }
#ammo .big { margin-top: 6px; }
#ammo .max { font-size: 20px; opacity: .5; margin-left: 4px; }
#ammo.low #ammoCur { color: var(--red); text-shadow: var(--glow-red); }
#ammo.melee .max { display: none; }
#slots { position: absolute; right: 30px; bottom: 160px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; letter-spacing: .14em; }
#slots div { opacity: .35; transition: opacity .15s, transform .15s; }
#slots div.on { opacity: 1; color: var(--red); text-shadow: var(--glow-red); transform: translateX(-6px); }
#slots kbd { font: inherit; font-size: 9px; padding: 0 4px; margin-right: 8px; border: 1px solid currentColor; border-radius: 3px; opacity: .8; }
#reloadText { font-style: normal; color: var(--cyan); visibility: hidden; }
#ammo.reloading #reloadText { visibility: visible; animation: blink .4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }

#speed { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); text-align: center; width: 180px; }
#speed .big { font-size: 34px; }
#speed .bar { margin: 6px 0 6px; }
#speed .bar i { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
#speed.fast #speedVal { color: var(--cyan); text-shadow: 0 0 16px var(--cyan); }
#speed.faster #speedVal { color: var(--pink); text-shadow: 0 0 16px var(--pink); }
#speed.faster .bar i { background: var(--pink); box-shadow: 0 0 12px var(--pink); }

#feed { position: absolute; right: 24px; top: 42px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#feed div {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-left: 2px solid var(--red); padding: 7px 12px; border-radius: 0 6px 6px 0;
  animation: feedIn .18s ease-out;
}
#feed div span { font-family: var(--jp); font-weight: 700; color: var(--red); margin-right: 6px; }
#feed div.head { border-left-color: var(--pink); }
#feed div.head span { color: var(--pink); }
#feed div.lvlup { border-left-color: #ffb02e; }
/* weapon level on loadout weapon cards */
.wpn-lvl { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.wpn-lvl b { color: #ffb02e; flex: none; }
.wpn-lvl .xpbar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.wpn-lvl .xpbar i { display: block; height: 100%; background: #ffb02e; }
.wpn-lvl em { font-style: normal; opacity: .55; flex: none; }
/* favourite weapon on the player card */
.pf-fav { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--glass-edge); border-radius: 8px; background: rgba(255,176,46,.06); }
.pf-fav .thumb { height: 60px; display: grid; place-items: center; color: #fff; }
.pf-fav .thumb .kf-gun { width: 110px; height: 36px; fill: currentColor; }
.pf-fav em { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .2em; color: #ffb02e; }
.pf-fav b { display: block; font-size: 20px; letter-spacing: .06em; margin: 2px 0; }
.pf-fav span { font-family: var(--mono); font-size: 11px; opacity: .7; }
@keyframes feedIn { from { transform: translateX(16px); opacity: 0; } }

/* ---------- Menu ---------- */
/* Layout after a modern shooter lobby: top bar, mode + START bottom-left, character centre, cards on the right */
#menu {
  position: fixed; inset: 0; --heavy: 'Archivo Black', var(--display);
  background:
    radial-gradient(ellipse 34% 60% at 47% 55%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(90deg, rgba(5,4,10,.92) 0%, rgba(5,4,10,.55) 30%, rgba(5,4,10,.25) 50%, rgba(5,4,10,.6) 72%, rgba(5,4,10,.9) 100%);
}
.mono-red { color: var(--red); font-size: 15px; letter-spacing: .3em; margin-top: 8px; text-shadow: var(--glow-red); }

/* top bar */
#topbar {
  position: absolute; left: 3vw; right: 3vw; top: 3.2vh; z-index: 3; display: flex; align-items: center; gap: 22px;
}
#topbar .logo { display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 6px 10px 5px; border: 2px solid #fff; }
#topbar .logo b { font-family: var(--heavy); font-size: 20px; letter-spacing: .02em; }
#topbar .logo small { font-family: var(--heavy); font-size: 8.5px; letter-spacing: .22em; margin-top: 3px; background: #fff; color: #08070c; padding: 1px 6px; }
#topbar .tabs { display: flex; gap: 4px; align-items: center; }
#topbar .tab {
  position: relative; font-family: var(--heavy); font-size: 12px; letter-spacing: .06em; color: #fff; cursor: pointer;
  background: none; border: none; padding: 9px 14px; transition: background .15s, color .15s;
}
#topbar .tab:hover { background: rgba(255,255,255,.08); }
#topbar .tab.on { background: #fff; color: #08070c; font-size: 14px; padding: 9px 18px; }
#topbar .tab .dot { position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: var(--glow-red); }
#topbar .me { margin-left: auto; display: flex; align-items: center; gap: 8px; font-family: var(--heavy); font-size: 13px; }
#topbar .chip { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 5px 10px; }
#topbar .chip i { font-style: normal; font-size: 9px; background: #fff; color: #08070c; border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; }
#topbar .lvl { background: #fff; color: #08070c; padding: 5px 9px; }
#topbar .who { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 5px 34px 5px 10px; }

/* mode + START */
#mode { position: absolute; left: 6vw; bottom: 9vh; z-index: 2; width: min(400px, 34vw); }
.mode-title {
  font-family: var(--heavy); font-weight: 400; font-size: clamp(40px, 5.6vw, 82px); line-height: .9; letter-spacing: -.01em; color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.mode-sub {
  font-family: 'Permanent Marker', cursive; font-size: clamp(30px, 4vw, 58px); color: var(--red); line-height: 1;
  transform: rotate(-6deg) translate(28%, -38%); text-shadow: 0 0 22px rgba(255,30,60,.45); pointer-events: none;
}
#playBtn {
  display: block; width: 100%; margin-top: 2vh; padding: 18px 0; font-family: var(--heavy); font-size: 26px; letter-spacing: .06em;
  color: #08070c; background: #fff; border: none; cursor: pointer; transition: transform .1s, box-shadow .15s, background .15s;
}
#playBtn:hover { background: var(--red); color: #fff; box-shadow: 0 0 34px rgba(255,30,60,.55); }
#playBtn:active { transform: translateY(2px); }
#lockMsg { margin-top: 10px; font-size: 11px; color: var(--cyan); }

/* right-hand cards */
#sidecards { position: absolute; right: 3vw; top: 13vh; bottom: 9vh; width: min(340px, 28vw); z-index: 2; display: flex; flex-direction: column; gap: 10px; }
#sidecards .card { background: rgba(14,13,20,.82); border: 1px solid rgba(255,255,255,.07); padding: 14px 16px; }
#sidecards h3 { font-family: var(--heavy); font-weight: 400; font-size: 15px; line-height: 1.05; letter-spacing: .02em; }
#sidecards .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
#sidecards .row .mono { font-size: 12px; }
#sidecards .feature {
  flex: 1; min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; padding: 0; overflow: hidden;
  background: linear-gradient(to top, rgba(8,7,12,.92), rgba(8,7,12,0) 55%), url('assets/holo/ad14.jpg') center / cover;
}
#sidecards .feature h3 { padding: 12px 16px; font-size: 18px; }
#sidecards .feature { padding: 0; position: relative; background: #0b1018; }
#announcement .announcement-slides { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#announcement .announcement-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px; opacity: 0; transform: translateX(8%); transition: opacity .42s ease, transform .42s ease; pointer-events: none; }
#announcement .announcement-slide.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }
#announcement .announcement-city { background: linear-gradient(0deg,rgba(5,7,12,.95),rgba(5,7,12,.05) 65%),url('assets/holo/ad14.jpg') center/cover; }
#announcement .announcement-kicker { font: 10px 'Share Tech Mono',monospace; letter-spacing: .1em; color: #8af4ff; }
#announcement .announcement-city-mark { position:absolute; right:19px;top:25px;font:900 58px/0.92 sans-serif;color:#ff1e3c;text-shadow:3px 3px #16050c; }
#announcement .announcement-city h3 { font-size:18px; }
#announcement .announcement-city h3 span { color:#8af4ff;font-size:12px; }
#announcement .announcement-report { justify-content:flex-start; padding:10px 12px; background:radial-gradient(ellipse at 50% 37%,#234b57,#0b111a 69%); }
#announcement .report-poster { flex:1;min-height:0;position:relative;overflow:hidden;border:1px solid rgba(138,244,255,.48);background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 4px),linear-gradient(145deg,#112a37,#0a111b 72%); }
#announcement .report-officer { position:absolute;height:81%;width:76%;right:-3%;bottom:-5%;filter:drop-shadow(0 0 9px #22e6ff66); }
#announcement .report-poster-title { position:absolute;left:10px;top:34%;font:900 clamp(20px,2vw,30px)/.93 'Archivo Black',sans-serif;color:#f4f0e8;text-shadow:2px 3px #12202a; }
#announcement .report-poster-footer { position:absolute;left:8px;right:8px;bottom:8px;font:700 9px 'Share Tech Mono',monospace;color:#ff5266;letter-spacing:.04em; }
#announcement .report-copy { display:flex;flex-direction:column;gap:3px;padding:7px 2px 1px;font-size:11px;line-height:1.25;color:#c5ccd4; }
#announcement .report-copy b { color:#fff;font:700 12px 'Chakra Petch',sans-serif; }
#announcement .announcement-controls { display:flex;align-items:center;justify-content:center;gap:12px;padding:5px 8px; }
#announcement .pips { padding:3px; }
#announcement .pips button { width:7px;height:7px;padding:0;border:0;background:rgba(255,255,255,.36);cursor:pointer; }
#announcement .pips button.on { background:#22e6ff; }
#announcement .announcement-arrow { padding:0 6px;border:0;background:transparent;color:#dceaf2;font-size:21px;line-height:1;cursor:pointer; }
@media (prefers-reduced-motion:reduce) { #announcement .announcement-slide { transition:none; } }
#sidecards .pips { display: flex; gap: 4px; padding: 10px 14px; }
#sidecards .pips i { width: 6px; height: 6px; background: rgba(255,255,255,.35); }
#sidecards .pips i.on { background: #fff; }
.xpbar { position: relative; height: 18px; margin-top: 12px; background: rgba(255,255,255,.08); }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: var(--red); width: 0; transition: width .4s; }
.xpbar { display: flex; align-items: center; }
.xpbar span { position: relative; font-family: var(--heavy); font-size: 10px; line-height: 1; padding-left: 8px; }
.scrawl { font-family: 'Permanent Marker', cursive; font-size: 17px; opacity: .85; transform: rotate(-4deg); white-space: nowrap; }
.chal { margin-top: 14px; }
.chal .row { font-family: var(--display); font-size: 12px; font-weight: 700; }
.chal .row b { color: var(--red); white-space: nowrap; font-family: var(--heavy); font-weight: 400; }
.chal.done .row b { color: #4dff88; }
.chal .xpbar { height: 14px; margin-top: 6px; }
.chal .xpbar i { background: rgba(255,255,255,.45); }
.chal.done .xpbar i { background: #4dff88; }
.chal .xpbar span { font-size: 9px; line-height: 1; }
.chal .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

/* HOW TO PLAY link under START */
.how { margin-top: 12px; background: none; border: none; color: rgba(255,255,255,.65); font-size: 12px; letter-spacing: .16em; cursor: pointer; }
.how:hover { color: #fff; }

/* server browser (SERVERS tab) */
#serversPop {
  position: absolute; z-index: 4; left: 3vw; right: 3vw; top: 12vh; bottom: 6vh; display: flex; flex-direction: column; padding: 22px 26px;
  background: rgba(10,9,14,.94); border: 1px solid rgba(255,255,255,.08);
}
#menu.browsing #mode, #menu.browsing #sidecards, #menu.browsing #showcase { opacity: 0; pointer-events: none; }
.sv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sv-head h2 { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 36px; line-height: 1; }
.sv-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.sv-filters button { font-family: 'Archivo Black', var(--display); font-size: 11px; letter-spacing: .05em; color: #fff; background: rgba(255,255,255,.06); border: none; padding: 8px 12px; cursor: pointer; }
.sv-filters button:hover { background: rgba(255,255,255,.14); }
.sv-filters button.on { background: #fff; color: #08070c; }
.sv-cols, .sv-row { display: grid; grid-template-columns: 2.2fr 1.1fr 1.2fr .8fr .7fr 90px; gap: 12px; align-items: center; }
.sv-cols { margin-top: 22px; padding: 0 14px 8px; font-size: 11px; letter-spacing: .14em; opacity: .5; border-bottom: 1px solid rgba(255,255,255,.08); }
#svList { margin-top: 6px; }
.sv-row { padding: 12px 14px; font-size: 13px; background: rgba(255,255,255,.035); margin-top: 4px; }
.sv-row:hover { background: rgba(255,255,255,.07); }
.sv-row b { font-family: 'Archivo Black', var(--display); font-weight: 400; }
.sv-join { font-family: 'Archivo Black', var(--display); font-size: 12px; background: #fff; color: #08070c; border: none; padding: 8px 0; cursor: pointer; }
.sv-join:hover { background: var(--red); color: #fff; }
.sv-none { padding: 16px 14px; font-size: 12px; letter-spacing: .14em; opacity: .5; }
.sv-empty { margin-top: auto; padding: 18px; border: 1px dashed rgba(255,255,255,.18); }
.sv-empty b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 15px; }
.sv-empty p { margin-top: 6px; font-size: 13px; opacity: .65; max-width: 640px; line-height: 1.5; }

/* store (STORE tab) */
#storePop {
  position: absolute; z-index: 4; left: 3vw; right: 3vw; top: 12vh; bottom: 6vh; display: flex; flex-direction: column; padding: 22px 26px;
  background: rgba(10,9,14,.95); border: 1px solid rgba(255,255,255,.08);
}
#menu.browsing #arches { opacity: .15; }
#topbar .chip.ticket i { background: none; font-size: 15px; width: auto; }
.st-wallet { display: flex; align-items: baseline; gap: 8px; font-family: 'Archivo Black', var(--display); }
.st-wallet span { font-size: 22px; }
.st-wallet b { font-size: 30px; }
.st-wallet em { font-style: normal; font-size: 11px; letter-spacing: .14em; opacity: .6; }
.st-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 22px; margin-top: 18px; }
.st-drop, .st-collection { background: rgba(255,255,255,.035); padding: 18px; display: flex; flex-direction: column; min-height: 0; }
.st-drop-title, .st-collection .row { display: flex; align-items: baseline; justify-content: space-between; }
.st-drop h3, .st-collection h3 { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 20px; }
.st-collection .row .mono { font-size: 12px; opacity: .7; }
/* the box: a faceted crate glowing in the rarity colour it's about to reveal */
.loot-stage { position: relative; flex: 1; min-height: 170px; display: grid; place-items: center; }
.loot-box {
  --r: #ffffff; position: relative; width: 120px; height: 120px; display: grid; place-items: center;
  background: linear-gradient(145deg, #2a2933, #121117); border: 3px solid #fff; transform: rotate(45deg);
  box-shadow: 0 0 30px rgba(255,255,255,.18), inset 0 0 22px rgba(255,255,255,.08);
}
.loot-box b { transform: rotate(-45deg); font-family: 'Archivo Black', var(--display); font-size: 46px; }
.loot-box i { position: absolute; inset: 14px; border: 2px solid rgba(255,255,255,.25); }
.loot-box.shaking { animation: lootShake .14s infinite; border-color: var(--r); box-shadow: 0 0 46px var(--r); }
.loot-box.burst { animation: lootBurst .45s forwards; border-color: var(--r); box-shadow: 0 0 120px 30px var(--r); }
.loot-box.gone { opacity: 0; }
@keyframes lootShake { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 25% { transform: rotate(41deg) translate(-3px, 2px); } 75% { transform: rotate(49deg) translate(3px, -2px); } }
@keyframes lootBurst { to { transform: rotate(45deg) scale(1.6); opacity: 0; } }
.loot-reveal {
  position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--r) 30%, transparent), transparent 70%);
}
.loot-reveal.show { display: flex; animation: revealIn .35s ease-out; }
.loot-reveal .sw { width: 64px; height: 64px; }
.loot-reveal > em { font-style: normal; font-size: 11px; letter-spacing: .2em; color: var(--r); font-family: var(--mono); }
.loot-reveal > b { font-family: 'Archivo Black', var(--display); font-size: 28px; text-shadow: 0 0 20px var(--r); }
.loot-reveal > span { font-size: 11px; letter-spacing: .12em; opacity: .75; font-family: var(--mono); }
@keyframes revealIn { from { transform: scale(.7); opacity: 0; } }
#openBox {
  font-family: 'Archivo Black', var(--display); font-size: 22px; padding: 14px 0; margin-top: 10px; background: #fff; color: #08070c; border: none; cursor: pointer;
}
#openBox span { font-size: 15px; margin-left: 8px; }
#openBox:hover:not(:disabled) { background: var(--red); color: #fff; }
#openBox:disabled { opacity: .35; cursor: not-allowed; }
.st-odds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; }
.st-odds div { border-top: 3px solid var(--r); background: rgba(255,255,255,.04); padding: 6px; text-align: center; }
.st-odds b { display: block; font-size: 9px; letter-spacing: .1em; color: var(--r); }
.st-odds span { font-family: 'Archivo Black', var(--display); font-size: 14px; }
.st-earn { margin-top: 12px; font-size: 10px; letter-spacing: .1em; line-height: 1.6; opacity: .55; }
.st-grid { margin-top: 12px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; align-content: start; }
.st-item { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: rgba(255,255,255,.04); border-bottom: 3px solid var(--r); }
.st-item > b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 13px; }
.st-item > em { font-style: normal; font-size: 10px; letter-spacing: .14em; opacity: .55; font-family: var(--mono); }
.st-item > span { font-size: 10px; letter-spacing: .14em; font-family: var(--mono); color: var(--r); }
.st-item.locked .st-thumb { filter: grayscale(.55) brightness(.85); }
.st-item.locked > b, .st-item.locked > em { opacity: .55; }
/* item pictures in the collection / reveal */
.st-thumb { position: relative; display: block; aspect-ratio: 1; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--r) 22%, #18161f), #0e0d13 75%); overflow: hidden; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb img:not([src]) { visibility: hidden; }
.st-thumb .anim { position: absolute; left: 4px; bottom: 4px; font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .14em; background: var(--r); color: #08070c; padding: 1px 4px; }
.st-thumb.title { display: grid; place-items: center; }
.st-thumb.title b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 11px; text-align: center; background: #fff; color: #08070c; padding: 4px 8px; transform: rotate(-4deg); }
.loot-reveal .st-thumb { width: 130px; box-shadow: 0 0 30px var(--r); }
.sw { display: block; width: 36px; height: 36px; border: 2px solid rgba(255,255,255,.3); }
.sw.aura { border-radius: 50%; border-color: var(--r); box-shadow: 0 0 14px var(--r), inset 0 0 10px var(--r); }
.sw.title { font-style: normal; font-family: 'Archivo Black', var(--display); font-size: 9px; display: grid; place-items: center; background: #fff; color: #08070c; }
/* locked store items in the loadout */
.item-card.locked, .title-card.locked, .wpn-card.locked { opacity: .45; cursor: not-allowed; position: relative; }
.lock-badge { position: absolute; top: 6px; right: 6px; z-index: 2; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; background: rgba(0,0,0,.7); padding: 2px 5px; }

/* controls popover */
#controlsPop { position: absolute; z-index: 4; top: 10vh; left: 50%; transform: translateX(-50%); width: min(460px, 92vw); padding: 18px 20px; }

/* light arches behind the character */
#arches { position: absolute; left: 47%; bottom: 0; transform: translateX(-50%); width: 46vh; height: 74vh; z-index: 0; pointer-events: none; }
#arches i { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); border: 3px solid rgba(255,255,255,.75); border-bottom: none;
  border-radius: 999px 999px 0 0; box-shadow: 0 0 18px rgba(255,255,255,.35), inset 0 0 18px rgba(255,255,255,.15); }
#arches i:nth-child(1) { width: 100%; height: 100%; }
#arches i:nth-child(2) { width: 84%; height: 90%; opacity: .75; }
#arches i:nth-child(3) { width: 68%; height: 80%; opacity: .55; }
#arches i:nth-child(4) { width: 52%; height: 70%; opacity: .35; }
#menu.editing #arches { opacity: .25; }
#menu.editing #mode, #menu.editing #sidecards { opacity: 0; pointer-events: none; }
/* the top bar stays up while customising, with LOADOUT as the active tab */
#menu.editing #topbar .tab#tabPlay { background: none; color: #fff; font-size: 12px; padding: 9px 14px; }
#menu.editing #topbar .tab#customizeBtn { background: #fff; color: #08070c; font-size: 14px; padding: 9px 18px; }
#topbar .tabs, #topbar .me, #mode, #sidecards { transition: opacity .3s; }

/* secondary buttons */
.ghost-btn {
  font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--text); cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--red-soft); border-radius: 999px; padding: 11px 20px;
  transition: background .15s, box-shadow .15s;
}
.ghost-btn:hover { background: rgba(255,30,60,.12); box-shadow: 0 0 18px rgba(255,30,60,.3); }
.ghost-btn .jp { color: var(--red); margin-right: 6px; letter-spacing: .1em; }
.wide-btn { width: 100%; margin: 12px 0 20px; }
.pill-btn {
  font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .2em; color: #fff; cursor: pointer;
  background: var(--red); border: none; border-radius: 999px; padding: 11px 26px; box-shadow: 0 0 20px rgba(255,30,60,.5);
}
.icon-btn { font: inherit; font-size: 16px; color: var(--text); background: none; border: 1px solid var(--glass-edge); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; }
.icon-btn:hover { border-color: var(--red); color: var(--red); }

/* settings panel */
#settings {
  position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3,2,8,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.settings-panel { width: 620px; max-width: 100%; max-height: min(720px, calc(100vh - 32px)); display: flex; flex-direction: column; padding: 22px 24px; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; }
.settings-head h2 { font-size: 30px; letter-spacing: .04em; line-height: 1; color: var(--red); text-shadow: 0 0 18px rgba(255,30,60,.5); }
.settings-head .mono-red { font-size: 12px; margin-top: 4px; display: block; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 10px; }
.settings-tabs button {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--text); cursor: pointer;
  background: none; border: 1px solid var(--glass-edge); border-radius: 999px; padding: 7px 14px;
}
.settings-tabs button .jp { color: var(--red); margin-right: 4px; }
.settings-tabs button.on { border-color: var(--red); background: rgba(255,30,60,.15); box-shadow: 0 0 14px rgba(255,30,60,.25); }
.settings-body { overflow-y: auto; padding-right: 6px; margin-right: -6px; flex: 1; min-height: 0; }
.set-row {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 1.3fr) 58px; align-items: center; gap: 14px;
  padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.set-row.wide { grid-template-columns: minmax(150px, 1fr) auto; }
.set-row .set-label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.set-row output { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--red); text-shadow: var(--glow-red); }
.set-row input[type=range] { margin-top: 0; }
.set-row .seg { justify-self: end; flex-wrap: wrap; }
.switch {
  justify-self: start; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--text); cursor: pointer;
  width: 64px; padding: 5px 0; border-radius: 999px; border: 1px solid var(--glass-edge); background: rgba(255,255,255,.04);
}
.switch.on { background: var(--red); border-color: var(--red); box-shadow: 0 0 12px var(--red-soft); }
.settings-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; margin-top: 10px; background: rgba(255,255,255,.12); border-radius: 2px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); cursor: pointer; }

.seg { display: flex; border: 1px solid var(--red-soft); border-radius: 999px; overflow: hidden; }
.seg button { font: inherit; font-size: 11px; letter-spacing: .14em; padding: 5px 14px; background: none; color: var(--text); border: none; cursor: pointer; }
.seg button.on { background: var(--red); box-shadow: 0 0 12px var(--red-soft); }

.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 11px; opacity: .85; }
kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; margin-right: 4px; text-align: center;
  border: 1px solid var(--red); color: var(--red); border-radius: 4px; font-family: var(--mono); font-size: 10px;
  box-shadow: 0 0 8px rgba(255,30,60,.35), inset 0 0 6px rgba(255,30,60,.2);
}
.tip { margin-top: 16px; font-size: 10.5px; line-height: 1.6; opacity: .55; }

/* subtle CRT lines over the menu only (the game has its own in the shader) */
#scanlines {
  position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
body.playing #scanlines { display: none; }

body.playing #settings { display: none; }

/* ---------- loadout: character showcase + customisation panel ---------- */
/* the character canvas covers the whole menu (behind the panels) and never changes size */
#showcaseCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; cursor: default; }
#showcaseCanvas.over { cursor: pointer; }
/* menu: the character is a hologram — scanlines, soft cyan glow, flicker, an occasional glitch,
   and a fade toward the bottom so it sits between the name tag and the CUSTOMIZE button */
#menu:not(.editing) #showcaseCanvas {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 98%);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
}
@keyframes holoFlicker {
  0%, 100% { opacity: .9; } 42% { opacity: .78; } 43% { opacity: .92; } 71% { opacity: .7; } 71.5% { opacity: .9; } 88% { opacity: .84; }
}
@keyframes holoGlitch {
  0%, 60%, 62.5%, 100% { transform: none; }
  60.5% { transform: translateX(6px) skewX(-2deg); }
  61% { transform: translateX(-4px); }
  61.6% { transform: translateX(3px) skewX(1deg); }
}
#menu.editing #showcaseCanvas { cursor: grab; }
#menu.editing #showcaseCanvas:active { cursor: grabbing; }
/* name tag + gun tag that frame the character; they glide with it (only text moves, no canvas) */
#showcase {
  position: absolute; left: 47%; top: 14vh; bottom: 4vh; width: 420px; transform: translateX(-50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; pointer-events: none;
  transition: left .6s cubic-bezier(.3,.7,.2,1);
}
#showcase > * { pointer-events: auto; }
.show-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
#menu.editing #showcase { left: 50%; }
#menu.editing { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(5,4,10,.15), rgba(5,4,10,.8) 80%); }
/* a small "level + name" plate over the head */
#showcase .tag { display: flex; align-items: center; gap: 6px; background: rgba(10,9,14,.75); padding: 4px 10px 4px 4px; font-family: 'Archivo Black', var(--display); }
#showcase .tag .tag-lvl { background: #fff; color: #08070c; font-size: 11px; padding: 2px 6px; }
#showcase .tag span { font-size: 13px; letter-spacing: .04em; }
#showcase .tag small { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--red); }
#showcase .gun-tag { font-size: 11px; letter-spacing: .14em; opacity: .7; }
#menu.editing #showcase .tag { visibility: hidden; }

/* left: category list */
#loadout { display: none; position: absolute; left: 3vw; top: calc(50% + 36px); transform: translateY(-50%); z-index: 2; }
#menu.editing #loadout { display: block; animation: slideInL .35s cubic-bezier(.3,.7,.2,1); }
.lo-panel { width: 400px; max-height: min(calc(100vh - 120px), 900px); display: flex; flex-direction: column; padding: 24px 22px 18px; }
.lo-list { flex: 1; min-height: 0; overflow-y: auto; margin: 10px -8px 0 0; padding-right: 8px; }
.lo-group-title { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; opacity: .55; margin: 14px 0 7px; }
.lo-group-title .jp { color: var(--red); opacity: 1; }
.lo-section { margin-bottom: 10px; }
.lo-section .swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.lo-section .sw { width: 34px; height: 34px; }
.cat-row {
  position: relative; display: grid; grid-template-columns: 76px 1fr 16px; align-items: center; gap: 16px; width: 100%;
  margin-bottom: 8px; padding: 8px 12px 8px 8px; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--glass-edge); border-radius: 8px;
  transition: border-color .12s, background .12s, transform .12s;
}
.cat-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--r, transparent); box-shadow: 0 0 10px var(--r, transparent); }
.cat-row:hover { border-color: var(--red-soft); transform: translateX(2px); }
.cat-row.on { border-color: var(--red); background: rgba(255,30,60,.12); }
.cat-thumb { width: 76px; height: 76px; border-radius: 6px; background: #120f1a; overflow: hidden; display: grid; place-items: center; }
.cat-thumb img, .item-card .thumb img, .wpn-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s; }
.cat-thumb img.ready, .item-card .thumb img.ready, .wpn-card .thumb img.ready { opacity: 1; }
.cat-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cat-text em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; opacity: .6; }
.cat-text em .jp { font-style: normal; color: var(--red); }
.cat-text b { font-size: 19px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { font-size: 20px; opacity: .35; transition: transform .15s; }
.cat-row.on .chev { opacity: 1; color: var(--red); transform: translateX(3px); }
.none-icon { font-family: var(--mono); font-size: 22px; opacity: .3; }
.dots { display: flex; gap: 4px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }

/* right: item window */
#itemWin { display: none; position: absolute; right: 3vw; top: calc(50% + 36px); transform: translateY(-50%); z-index: 2;
  width: 400px; max-height: min(86vh, 820px); flex-direction: column; padding: 20px 18px 18px; }
#menu.editing #itemWin.open { display: flex; animation: slideInR .3s cubic-bezier(.3,.7,.2,1); }
@keyframes slideInR { from { opacity: 0; transform: translate(24px, -50%); } }
@keyframes slideInL { from { opacity: 0; transform: translate(-24px, -50%); } }
.win-body { flex: 1; min-height: 0; overflow-y: auto; margin: 14px -8px 0 0; padding-right: 8px; }
.win-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .22em; opacity: .6; margin: 16px 0 8px; }
.win-body > .win-sub:first-child { margin-top: 0; }
.win-body .swatches { justify-content: flex-start; }
.win-body .text-in { width: 100%; }
.item-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.item-card {
  position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--glass-edge); border-radius: 8px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.item-card:hover { border-color: var(--r); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.item-card.on { border-color: var(--red); box-shadow: 0 0 16px rgba(255,30,60,.35); }
.item-card.on::after {
  content: 'EQUIPPED'; position: absolute; top: 6px; left: 6px; padding: 2px 5px; border-radius: 3px;
  font-family: var(--mono); font-size: 8px; letter-spacing: .14em; background: var(--red); color: #fff;
}
.item-card .thumb { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--r) 18%, #120f1a), #120f1a 70%); }
.item-card .thumb.wide { aspect-ratio: 16 / 9; }
.item-card .meta { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; border-top: 2px solid var(--r); }
.item-card .meta b { color: var(--text); font-size: 12px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card .meta em { font-style: normal; font-family: var(--mono); font-size: 8px; letter-spacing: .16em; color: var(--r); }
.wpn-list { display: flex; flex-direction: column; gap: 8px; }
.wpn-card {
  display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 8px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); background: rgba(255,255,255,.03); border: 1px solid var(--glass-edge); border-radius: 8px;
  transition: border-color .12s;
}
.wpn-card:hover { border-color: var(--red-soft); }
.wpn-card.on { border-color: var(--red); background: rgba(255,30,60,.1); box-shadow: 0 0 16px rgba(255,30,60,.25); }
.wpn-card .thumb { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #120f1a; }
.wpn-card .gun-head { display: block; margin-bottom: 4px; }
.wpn-card .gun-head b { font-size: 14px; }
.title-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.title-card {
  font: inherit; font-size: 12px; letter-spacing: .12em; padding: 12px 8px; cursor: pointer; color: var(--text);
  background: rgba(255,255,255,.03); border: 1px solid var(--glass-edge); border-radius: 8px;
}
.title-card.on { border-color: var(--red); background: rgba(255,30,60,.12); color: #fff; }

@media (max-width: 1100px) {
  .lo-panel { width: 340px; }
  #itemWin { width: 340px; }
  .wpn-card { grid-template-columns: 110px 1fr; }
}
.hint-small { font-size: 10px; opacity: .5; align-self: center; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; justify-self: end; }
.sw {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; background: var(--c);
  border: 2px solid rgba(255,255,255,.15); box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}
.sw.on { border-color: #fff; box-shadow: 0 0 12px var(--c), inset 0 0 0 2px rgba(0,0,0,.35); }
.seg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); margin-right: 6px; vertical-align: 1px; }

.gun-head { margin-bottom: 8px; line-height: 1.2; }
.gun-head b { font-size: 16px; letter-spacing: .06em; margin-right: 6px; }
.gun-head .jp { color: var(--red); font-size: 11px; }
.gun-head em { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; opacity: .6; }
.stat { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 6px; margin: 3px 0; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; opacity: .85; }
.stat i { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.stat b { display: block; height: 100%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.gun-foot { margin-top: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; opacity: .55; }
.text-in {
  justify-self: end; width: 220px; font: inherit; font-size: 15px; letter-spacing: .1em; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-edge); border-radius: 6px; padding: 7px 10px; text-transform: uppercase;
}
.text-in:focus { outline: none; border-color: var(--red); box-shadow: 0 0 10px rgba(255,30,60,.3); }

/* ---------- sniper scope ---------- */
#scope { --sc: #ff1e3c; --sd: .94; --lens: min(36vh, 36vw); position: absolute; inset: 0; display: none;
  background: radial-gradient(circle at center, transparent 0 var(--lens), rgba(0,0,0,var(--sd)) calc(var(--lens) + 2px)); }
#scope i { position: absolute; background: var(--sc); opacity: .85; }
#scope .h { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
#scope .v { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
#scope b { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 6px var(--sc); }
#scope .ring, #scope .ticks { display: none; position: absolute; left: 50%; top: 50%; }
/* MIL-DOT: thin crosshair with dots along it */
#scope[data-style="mil-dot"] i { opacity: .6; }
#scope[data-style="mil-dot"] .h, #scope[data-style="mil-dot"] .v { width: auto; height: auto; }
#scope[data-style="mil-dot"] .h { height: 1px; } #scope[data-style="mil-dot"] .v { width: 1px; }
#scope[data-style="mil-dot"] .ticks { display: block; width: calc(var(--lens) * 1.4); height: calc(var(--lens) * 1.4); transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--sc) 0 2.5px, transparent 3px) center / calc(var(--lens) * .14) 6px repeat-x, radial-gradient(circle, var(--sc) 0 2.5px, transparent 3px) center / 6px calc(var(--lens) * .14) repeat-y; }
/* DOT: just a dot in a clear lens */
#scope[data-style="dot"] i { display: none; }
#scope[data-style="dot"] b { width: 7px; height: 7px; margin: -3.5px; }
/* CIRCLE: ring + dot, no lines */
#scope[data-style="circle"] i { display: none; }
#scope[data-style="circle"] .ring { display: block; width: 44px; height: 44px; margin: -22px; border: 2px solid var(--sc); border-radius: 50%; box-shadow: 0 0 6px var(--sc); }
/* OFF: no black edge and no reticle — just the zoomed view (your normal crosshair stays) */
#scope[data-style="off"] { background: none; }
#scope[data-style="off"] > * { display: none !important; }
body.scoped #scope[data-style="off"] ~ #crosshair, body.scoped:has(#scope[data-style="off"]) #crosshair { opacity: 1; }body.scoped #scope { display: block; }
body.scoped #crosshair { opacity: 0; }

@media (max-width: 900px) {
  #showcase { width: 40vw; }
}

@media (max-width: 600px) {
  #menu { padding: 0 16px; }
  .set-row { grid-template-columns: 1fr 52px; }
  .set-row .set-label { grid-column: 1 / -1; }
  .set-row.wide { grid-template-columns: 1fr; }
  .set-row .seg { justify-self: start; }
}

/* ============ player card: icons, calling cards, stats popup (src/cosmetics.js, src/profile.js) ============ */
#topbar .top-icon, #topbar .lvl, #topbar .who { cursor: pointer; }
#topbar .top-icon { display: flex; }
#topbar .who:hover, #topbar .lvl:hover { outline: 1px solid #fff; }

/* player icon: a kanji badge. epic / legendary ones move */
.picon {
  --a: #ff1e3c; --b: #12101a; position: relative; display: grid; place-items: center; width: 64px; aspect-ratio: 1; flex: none; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--a) 35%, var(--b)), var(--b) 72%);
  border: 2px solid var(--a); box-shadow: inset 0 0 14px color-mix(in srgb, var(--a) 40%, transparent);
}
.picon b { position: relative; z-index: 1; font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif; font-weight: 900; font-size: 34px; color: var(--a); text-shadow: 0 0 10px var(--a); line-height: 1; }
.picon.mini { width: 28px; border-width: 1px; }
.picon.mini b { font-size: 15px; }
.pi-pulse { animation: piPulse 1.4s ease-in-out infinite; }
@keyframes piPulse { 50% { box-shadow: inset 0 0 26px var(--a), 0 0 18px var(--a); } }
.pi-pulse b { animation: piBeat 1.4s ease-in-out infinite; }
@keyframes piBeat { 10% { transform: scale(1.15); } 22% { transform: scale(1); } 34% { transform: scale(1.1); } 50% { transform: scale(1); } }
.pi-spin::before { content: ''; position: absolute; inset: -50%; background: conic-gradient(from 0deg, transparent 0 70%, var(--a) 85%, transparent 100%); animation: piSpin 2.2s linear infinite; opacity: .55; }
.pi-spin::after { content: ''; position: absolute; inset: 3px; background: inherit; }
@keyframes piSpin { to { transform: rotate(360deg); } }
.pi-glitch b { animation: piGlitch 2s steps(1) infinite; }
@keyframes piGlitch {
  0%, 40%, 62%, 100% { transform: none; text-shadow: 0 0 10px var(--a); }
  42% { transform: translate(-3px, 1px) skewX(-12deg); text-shadow: 3px 0 #22e6ff, -3px 0 #ff2bd6; }
  46% { transform: translate(3px, -1px); text-shadow: -2px 0 #22e6ff, 2px 0 #ff2bd6; clip-path: inset(10% 0 45% 0); }
  50% { transform: translate(-1px, 2px); text-shadow: 2px 0 #2aff8a; }
  58% { transform: translate(2px, 0) skewX(8deg); clip-path: inset(55% 0 5% 0); }
}
.pi-rainbow { animation: piHue 4s linear infinite; --a: #ff3a6a; }
@keyframes piHue { to { filter: hue-rotate(360deg); } }
.pi-flame::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -30%; height: 90%; background: radial-gradient(ellipse at 50% 100%, #ffd06a, #ff5a10 40%, transparent 70%); filter: blur(4px); animation: piFlame .9s ease-in-out infinite alternate; }
@keyframes piFlame { from { transform: scaleY(.85) translateY(6%); opacity: .7; } to { transform: scaleY(1.15) skewX(4deg); opacity: 1; } }
.pi-flame b { color: #fff4d0; text-shadow: 0 0 12px #ff8a2a, 0 0 4px #ffd06a; }

/* calling card: a wide banner; animated ones have a moving layer (.cc-fx) */
.pcard { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; aspect-ratio: 4 / 1; padding: 0 16px; overflow: hidden; background: #15131c; isolation: isolate; }
.pcard.art-card { background: #0d1016; }
.pcard .cc-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.pcard.cc-with-player::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,5,9,.85), rgba(3,5,9,.3) 65%, rgba(3,5,9,.15)); pointer-events: none; }
.cc-animated .cc-image { animation: ccArtwork 9s ease-in-out infinite alternate; }
@keyframes ccArtwork { from { transform: scale(1.025); filter: brightness(.95); } to { transform: scale(1.08) translateX(-1%); filter: brightness(1.15); } }
.picon .pi-image { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .cc-animated .cc-image, .picon, .picon b { animation: none !important; } }
.pcard .cc-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pcard .picon { width: auto; height: 74%; }
.pc-who { display: flex; flex-direction: column; min-width: 0; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.pc-who b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 26px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-who small { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; margin-top: 6px; opacity: .85; }
.pc-lvl { margin-left: auto; font-family: 'Archivo Black', var(--display); font-size: 20px; background: #fff; color: #08070c; padding: 4px 10px; }
.cc-street { background: linear-gradient(100deg, #1a0a10 0%, #2a0e18 45%, #0c0b12 100%); }
.cc-street .cc-fx { background: linear-gradient(100deg, transparent 58%, #ff1e3c 58% 61%, transparent 61% 64%, rgba(255,30,60,.4) 64% 65%, transparent 65%); }
.cc-concrete { background: #3a3c42; }
.cc-concrete .cc-fx { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 44px), radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 50%); }
.cc-sunset { background: linear-gradient(180deg, #ff8a3a, #ff2b7a 60%, #4a1060); }
.cc-sunset .cc-fx { background: radial-gradient(circle at 78% 70%, #ffe08a 0 14%, transparent 15%), repeating-linear-gradient(180deg, transparent 0 8px, rgba(74,16,96,.6) 8px 10px); -webkit-mask: linear-gradient(180deg, transparent 50%, #000 50%); mask: linear-gradient(180deg, transparent 0 52%, #000 52%); }
.cc-bamboo { background: linear-gradient(90deg, #0e2a18, #1a4a2a); }
.cc-bamboo .cc-fx { background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(90,200,110,.35) 30px 38px, transparent 38px 64px), repeating-linear-gradient(0deg, transparent 0 40px, rgba(0,0,0,.4) 40px 42px); }
.cc-circuit { background: #061a1e; }
.cc-circuit .cc-fx { background: linear-gradient(90deg, transparent 49.5%, rgba(34,230,255,.4) 49.5% 50.5%, transparent 50.5%) 0 0 / 60px 60px, linear-gradient(0deg, transparent 49.5%, rgba(34,230,255,.25) 49.5% 50.5%, transparent 50.5%) 0 0 / 60px 30px, radial-gradient(circle, #22e6ff 0 2px, transparent 3px) 0 0 / 60px 30px; }
.cc-torii { background: linear-gradient(180deg, #2a0608, #6a1014); }
.cc-torii .cc-fx { background: linear-gradient(#ff3a2a, #ff3a2a) 70% 22% / 30% 7% no-repeat, linear-gradient(#ff3a2a, #ff3a2a) 70% 36% / 24% 4% no-repeat, linear-gradient(#ff3a2a, #ff3a2a) 63% 100% / 2.5% 72% no-repeat, linear-gradient(#ff3a2a, #ff3a2a) 77% 100% / 2.5% 72% no-repeat, radial-gradient(circle at 70% 60%, rgba(255,200,120,.3), transparent 45%); }
/* animated */
.cc-rain { background: linear-gradient(180deg, #08061a, #1a0a2a 60%, #2a0a3a); }
.cc-rain .cc-fx { background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(160,200,255,.35) 14px 15px, transparent 15px 31px), linear-gradient(0deg, rgba(255,43,214,.35), transparent 40%); background-size: 120px 120px, 100% 100%; animation: ccRain .5s linear infinite; }
@keyframes ccRain { to { background-position: -32px 120px, 0 0; } }
.cc-scan { background: #0a0a12; }
.cc-scan .cc-fx { background: repeating-linear-gradient(180deg, rgba(42,255,138,.08) 0 2px, transparent 2px 5px), linear-gradient(180deg, transparent 40%, rgba(42,255,138,.5) 50%, transparent 60%); background-size: 100% 100%, 100% 300%; animation: ccScan 2.4s linear infinite; }
@keyframes ccScan { from { background-position: 0 0, 0 100%; } to { background-position: 0 0, 0 -200%; } }
.cc-koi { background: linear-gradient(120deg, #ff5a3a, #ff2b7a, #2a8aff, #3affb0, #ff5a3a); background-size: 300% 100%; animation: ccKoi 8s linear infinite; }
.cc-koi .cc-fx { background: radial-gradient(ellipse 60px 18px at 20% 40%, rgba(255,255,255,.35), transparent), radial-gradient(ellipse 50px 14px at 70% 70%, rgba(255,255,255,.25), transparent); animation: ccSwim 6s ease-in-out infinite alternate; }
@keyframes ccKoi { to { background-position: 300% 0; } }
@keyframes ccSwim { to { transform: translateX(12%) translateY(-8%); } }
.cc-skyline { background: linear-gradient(180deg, #0a0420, #2a0a40 55%, #ff2bd6 140%); }
.cc-skyline .cc-fx {
  background:
    repeating-linear-gradient(90deg, #08061a 0 18px, transparent 18px 22px, #0e0a22 22px 46px, transparent 46px 52px, #08061a 52px 64px, transparent 64px 70px) 0 100% / 280px 55% repeat-x,
    repeating-linear-gradient(90deg, transparent 0 30px, #120c2a 30px 60px, transparent 60px 90px) 0 100% / 180px 75% repeat-x,
    radial-gradient(circle, #22e6ff 0 1px, transparent 2px) 0 0 / 23px 17px;
  animation: ccCity 18s linear infinite;
}
@keyframes ccCity { to { background-position: -280px 100%, -180px 100%, -23px 0; } }
.cc-inferno { background: #1a0402; }
.cc-inferno .cc-fx { transform-origin: 50% 100%; background: radial-gradient(ellipse 22% 85% at 18% 100%, #ffd06a, #ff5a10 45%, transparent 75%), radial-gradient(ellipse 28% 100% at 52% 100%, #ffb02e, #ff3a10 45%, transparent 75%), radial-gradient(ellipse 22% 80% at 86% 100%, #ffd06a, #ff2a10 45%, transparent 75%); animation: ccFire .8s ease-in-out infinite alternate; }
.cc-inferno::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, #ffb02e 0 1.5px, transparent 2px) 0 0 / 37px 29px, radial-gradient(circle, #ff5a10 0 1px, transparent 2px) 13px 7px / 23px 31px; animation: ccEmbers 3s linear infinite; }
@keyframes ccFire { from { transform: scaleY(.8) skewX(-3deg); filter: brightness(.85); } to { transform: scaleY(1.05) skewX(3deg); filter: brightness(1.2); } }
@keyframes ccEmbers { to { background-position: 6px -58px, 0 -62px; } }

/* in the store collection */
.st-thumb.flat { display: grid; place-items: center; padding: 10px; }
.st-thumb.flat .picon { width: 62%; }
.st-thumb.flat .pcard { aspect-ratio: 2.2 / 1; }
.loot-reveal .st-thumb.flat .pcard { aspect-ratio: 1.6 / 1; }

/* the popup */
#profilePop { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(4,3,8,.55); }
#profilePop.hidden { display: none; }
.pf-win { width: min(760px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto; padding: 22px 26px; background: rgba(10,9,14,.97); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 14px; }
.pf-win > * { flex: none; }
.pf-win .sv-head { display: flex; justify-content: space-between; align-items: center; }
.pf-win .pcard.big { aspect-ratio: auto; height: 120px; }
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pf-stats div { background: rgba(255,255,255,.04); padding: 10px 12px; border-left: 3px solid var(--red); }
.pf-stats em { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; opacity: .6; }
.pf-stats b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 20px; }
.pf-tabs { display: flex; gap: 4px; }
.pf-tabs button { font-family: 'Archivo Black', var(--display); font-size: 12px; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.06); border: none; padding: 9px 16px; cursor: pointer; }
.pf-tabs button.on { background: #fff; color: #08070c; }
.pf-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pf-grid.card { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pf-pick > .picon { width: 64px; }
.pf-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; color: #fff; background: rgba(255,255,255,.04); border: 2px solid transparent; border-bottom: 3px solid var(--r); cursor: pointer; text-align: center; }
.pf-pick:hover { background: rgba(255,255,255,.08); }
.pf-pick.on { border-color: #fff; }
.pf-pick.locked { cursor: not-allowed; }
.pf-pick.locked > .picon, .pf-pick.locked > .pcard { filter: grayscale(.7) brightness(.7); }
.pf-pick > span:last-child b { display: block; font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 13px; }
.pf-pick > span:last-child em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--r); }
@media (max-width: 640px) { .pf-stats { grid-template-columns: repeat(2, 1fr); } .pc-who b { font-size: 18px; } }

/* top-right: icon + level + name in one block */
#topbar .me-block { display: flex; align-items: stretch; gap: 0; padding: 3px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; font: inherit; cursor: pointer; }
#topbar .me-block:hover { border-color: #fff; }
#topbar .me-block .lvl { display: grid; place-items: center; padding: 0 9px; margin-left: 3px; }
#topbar .me-block .who { background: none; border: none; display: grid; align-items: center; padding: 0 30px 0 10px; }
#topbar .me-block .top-icon .picon.mini { width: 28px; }

/* collection item preview */
.st-item { cursor: pointer; }
.st-item:hover { background: rgba(255,255,255,.08); }
#itemPreview { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(4,3,8,.7); }
#itemPreview.hidden { display: none; }
.ip-win { position: relative; width: min(460px, calc(100vw - 32px)); padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--r) 25%, #0c0b11), #0a090e 70%); border: 1px solid var(--r); box-shadow: 0 0 60px color-mix(in srgb, var(--r) 40%, transparent); animation: revealIn .25s ease-out; }
.ip-win .icon-btn { position: absolute; top: 10px; right: 10px; }
.ip-win .st-thumb { width: 100%; max-width: 360px; }
.ip-win .st-thumb.flat .picon { width: 55%; }
.ip-win .st-thumb.flat .pcard { aspect-ratio: 3 / 1; }
.ip-win > em { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--r); margin-top: 6px; }
.ip-win > b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 32px; text-shadow: 0 0 20px var(--r); }
.ip-win > span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; opacity: .75; }

/* leaderboard */
#leadersPop { position: absolute; z-index: 4; left: 3vw; right: 3vw; top: 12vh; bottom: 6vh; display: flex; flex-direction: column; padding: 22px 26px; background: rgba(10,9,14,.95); border: 1px solid rgba(255,255,255,.08); }
#leadersPop.hidden { display: none; }
.lb-list { flex: 1; min-height: 0; overflow-y: auto; }
.lb-row { display: grid; grid-template-columns: 48px minmax(160px, 2.4fr) repeat(5, 1fr); align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; }
.lb-row > b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 16px; }
.lb-row span.on { color: #fff; font-weight: 700; }
.lb-row > span:not(.lb-name) { opacity: .75; text-align: right; }
.lb-row > span.on { opacity: 1; }
.lb-cols { margin-top: 14px; font-size: 10px; letter-spacing: .14em; opacity: .7; }
.lb-cols span.on { color: var(--red); }
.lb-name { display: flex; align-items: center; gap: 10px; font-family: 'Archivo Black', var(--display); font-size: 13px; }
.lb-name em { font-style: normal; font-size: 9px; background: var(--red); padding: 2px 6px; letter-spacing: .1em; }
.lb-row.top1 > b { color: #ffb02e; } .lb-row.top2 > b { color: #c8d0dc; } .lb-row.top3 > b { color: #d08a4a; }
.lb-row.me { background: rgba(255,30,60,.12); border-left: 3px solid var(--red); }
.lb-note { margin-top: 10px; font-size: 10px; letter-spacing: .12em; opacity: .5; }
@media (max-width: 700px) { .lb-row { grid-template-columns: 30px 1.6fr repeat(5, 1fr); font-size: 11px; padding: 6px; } }

/* coloured titles */
.ttl { --ta: #fff; --tb: var(--ta); color: var(--ta); font-weight: 700; letter-spacing: .08em; }
.ttl-grad, .ttl-shine, .ttl-rainbow { background: linear-gradient(90deg, var(--ta), var(--tb), var(--ta)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ttl-shine { background-image: linear-gradient(100deg, var(--ta) 0 40%, #fff 50%, var(--tb) 60% 100%); animation: ttlShine 2.6s linear infinite; }
@keyframes ttlShine { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.ttl-rainbow { background-image: linear-gradient(90deg, var(--ta), var(--tb), #fff, var(--ta)); animation: ttlShine 3s linear infinite; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ta) 60%, transparent)); }
.ttl-glitch { position: relative; color: var(--ta); text-shadow: 0 0 8px var(--ta); animation: ttlGlitch 2.4s steps(1) infinite; }
@keyframes ttlGlitch { 0%, 88%, 100% { text-shadow: 0 0 8px var(--ta); transform: none; } 90% { text-shadow: 2px 0 var(--tb), -2px 0 #ff2bd6; transform: translateX(1px); } 94% { text-shadow: -2px 0 var(--tb), 2px 0 #ff2bd6; transform: translateX(-1px); } }
.title-card .ttl { pointer-events: none; }

/* clan tags */
.clan-tag { --cc: #ff1e3c; color: var(--cc); margin-right: .35em; text-shadow: 0 0 8px color-mix(in srgb, var(--cc) 50%, transparent); }
.field-row { display: flex; gap: 8px; align-items: center; }
.field-row .text-in { flex: 1; min-width: 0; }
.clan-form { display: flex; flex-direction: column; gap: 8px; }
.clan-form .tag-in { width: 100px; }
.clan-preview { flex: 1; font-family: 'Archivo Black', var(--display); font-size: 14px; }
.pill-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; }

/* confirmation */
#confirmPop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4,3,8,.6); }
#confirmPop.hidden { display: none; }
.cf-win { width: min(380px, calc(100vw - 32px)); padding: 22px; background: rgba(12,10,18,.98) !important; border: 1px solid rgba(255,255,255,.15); text-align: center; animation: revealIn .2s ease-out; }
.cf-win h3 { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 20px; }
.cf-win p { margin: 14px 0 18px; font-size: 15px; }
.cf-win p b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 18px; }
.cf-old { opacity: .5; text-decoration: line-through; }
.cf-btns { display: flex; gap: 8px; justify-content: center; }
#topbar .who, #showcase .tag span { white-space: nowrap; }

/* points chip */
#topbar .chip.points i { background: #ffb02e; font-family: var(--heavy); }
.pf-pick.locked, .item-card.locked, .wpn-card.locked, .title-card.locked[data-buy] { cursor: pointer; }
.item-card.locked[data-buy]:hover, .wpn-card.locked[data-buy]:hover, .title-card.locked[data-buy]:hover { opacity: .8; }
.title-card small { font-family: var(--mono); font-size: 9px; color: #ffb02e; margin-left: 4px; }
.pf-price { display: block; font-style: normal; font-family: var(--mono); font-size: 10px; color: #ffb02e; }
.lock-badge { color: #ffb02e; }
.name-hint { font-size: 9px; letter-spacing: .12em; opacity: .55; margin-top: 6px; }
.cf-win p small { opacity: .6; font-size: 12px; }

/* clan page */
#clanPop { position: absolute; z-index: 4; left: 3vw; right: 3vw; top: 12vh; bottom: 6vh; display: flex; flex-direction: column; padding: 22px 26px; background: rgba(10,9,14,.95); border: 1px solid rgba(255,255,255,.08); }
#clanPop.hidden { display: none; }
.cl-head { border-bottom: 3px solid var(--cc); padding-bottom: 12px; align-items: flex-end; }
.cl-head .mono { font-size: 11px; letter-spacing: .12em; opacity: .6; }
.cl-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.cl-empty h3, .cl-col h3 { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 18px; }
.cl-empty .xpbar { width: min(360px, 80vw); }
.cl-lock { font-size: 44px; }
.cl-sub { font-size: 11px; opacity: .55; letter-spacing: .08em; }
.cl-form { display: flex; flex-direction: column; gap: 10px; width: min(360px, 86vw); }
.cl-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 16px; }
.cl-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; background: rgba(255,255,255,.035); padding: 16px; }
.cl-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.cl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255,255,255,.04); }
.cl-row.me { background: rgba(255,30,60,.12); }
.cl-row b { flex: 1; font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 13px; }
.cl-row em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; opacity: .7; }
.mini-btn { font-family: 'Archivo Black', var(--display); font-size: 11px; background: #fff; color: #08070c; border: none; padding: 5px 12px; cursor: pointer; }
.mini-btn:hover { background: var(--red); color: #fff; }
@media (max-width: 760px) { .cl-body { grid-template-columns: 1fr; overflow-y: auto; } }

/* camo path */
.sub-note { font-size: 9px; letter-spacing: .12em; opacity: .5; margin-left: 6px; }
.item-card.camo.locked { opacity: .75; cursor: default; }
.item-card.camo.locked .thumb { filter: grayscale(.8) brightness(.7); }
.item-card.camo.mastery { box-shadow: inset 0 0 0 1px #ffd06a; }
.camo-goal { position: relative; display: block; height: 14px; margin: 4px 6px 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.camo-goal i { position: absolute; inset: 0 auto 0 0; background: var(--r); opacity: .55; }
.camo-goal em { position: relative; display: block; font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; line-height: 14px; text-align: center; }

/* 3D item viewer in the store preview — bright studio */
.ip-stage { position: relative; width: 100%; aspect-ratio: 1; background: radial-gradient(circle at 50% 40%, #ffffff, #d8d6e4 45%, color-mix(in srgb, var(--r) 35%, #8a86a0) 100%); border: 1px solid rgba(255,255,255,.4); }
.ip-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.ip-stage canvas:active { cursor: grabbing; }
.ip-hint { position: absolute; left: 0; right: 0; bottom: 8px; font-size: 9px; letter-spacing: .14em; color: #2a2638; opacity: .7; pointer-events: none; }
.ip-win { width: min(520px, calc(100vw - 32px)); }

/* fixes: preview close button above the 3D stage; the top bar always above the full-screen character canvas */
.ip-win .icon-btn { z-index: 3; background: rgba(10,9,14,.85); }
#topbar { z-index: 8; }
#topbar .me-block, #topbar .me-block * { pointer-events: auto; }
#topbar .me-block > * { pointer-events: none; }

/* kill feed: KILLER [gun] (headshot) VICTIM */
#feed div { display: flex; align-items: center; gap: 8px; }
#feed div b { font-weight: 700; letter-spacing: .04em; }
#feed div b.you { color: #ffb02e; }
#feed .kf-gun { width: 44px; height: 14px; fill: currentColor; opacity: .9; flex: none; }
.kf-sil { display: inline-block; background: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
#feed .kf-sil { width: 52px; height: 16px; }
#feed .kf-head { width: 14px; height: 14px; fill: var(--pink); color: var(--pink); flex: none; }

#topbar .me-block .who { display: flex; align-items: center; white-space: nowrap; }
#topbar .me-block .who .clan-tag { margin-right: .35em; }

/* end-of-match awards */
#sbAwards:empty { display: none; }
.aw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.aw { background: rgba(255,255,255,.05); padding: 8px 10px; border-top: 3px solid #ffb02e; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw.me { background: rgba(255,176,46,.12); }
.aw em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; opacity: .65; }
.aw b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw span { font-family: 'Archivo Black', var(--display); font-size: 18px; color: #ffb02e; }
.aw-me { margin-top: 8px; font-size: 10px; letter-spacing: .12em; opacity: .8; }
@media (max-width: 640px) { .aw-grid { grid-template-columns: repeat(2, 1fr); } }

/* name plates over players in game */
#plates { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
body:not(.playing) #plates { display: none; }
.plate { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; font-family: 'Archivo Black', var(--display); font-size: 9px; letter-spacing: .05em; color: #fff; white-space: nowrap; padding-bottom: 3px;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.7); }

/* titles under names (scoreboard + leaderboard) */
.sb-who, .lb-who { display: inline-flex; flex-direction: column; line-height: 1.15; position: relative; z-index: 1; }
.sb-who small, .lb-who small { font-size: 9px; letter-spacing: .1em; font-family: var(--mono); }
/* faded calling card behind each scoreboard row's name cell */
#scoreboard td.nm { position: relative; overflow: hidden; }
#scoreboard .pcard.sb-card { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; opacity: .32; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%); mask-image: linear-gradient(90deg, #000 30%, transparent 100%); }
.aw b { font-size: 11px; white-space: normal; overflow: visible; line-height: 1.2; }
.aw b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* featured calling cards */
.cc-vapor { background: linear-gradient(180deg, #1a0a3a, #ff6ad5 120%); }
.cc-vapor .cc-fx { background: linear-gradient(0deg, transparent 49%, rgba(106,240,255,.6) 49% 51%, transparent 51%) 0 0 / 100% 18px, linear-gradient(90deg, transparent 48%, rgba(106,240,255,.5) 48% 52%, transparent 52%) 0 0 / 34px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 45%, #000); mask-image: linear-gradient(180deg, transparent 45%, #000); animation: ccVapor 1.2s linear infinite; }
@keyframes ccVapor { to { background-position: 0 18px, 0 0; } }
.cc-petals { background: linear-gradient(160deg, #2a0a20, #6a1a40); }
.cc-petals .cc-fx { background: radial-gradient(ellipse 4px 3px, #ffb0d8 60%, transparent 70%) 0 0 / 47px 31px, radial-gradient(ellipse 3px 2px, #ff7ab8 60%, transparent 70%) 20px 10px / 29px 41px; animation: ccPetals 4s linear infinite; }
@keyframes ccPetals { to { background-position: 47px 93px, -9px 123px; } }

/* store sub-tabs + featured */
.st-tabs { display: flex; gap: 4px; margin-top: 14px; }
.st-tabs button { font-family: 'Archivo Black', var(--display); font-size: 13px; letter-spacing: .05em; color: #fff; background: rgba(255,255,255,.06); border: none; padding: 10px 18px; cursor: pointer; }
.st-tabs button.on { background: #fff; color: #08070c; }
.st-tabs button i { font-style: normal; font-family: var(--mono); font-size: 10px; margin-left: 6px; color: #ffb02e; }
.st-body.hidden, .st-featured.hidden { display: none; }
.st-featured { flex: 1; min-height: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.ft-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; background: linear-gradient(90deg, rgba(255,176,46,.14), transparent); padding: 14px 18px; border-left: 3px solid #ffb02e; }
.ft-head h3 { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 22px; }
.ft-head p, .ft-reset { font-size: 10px; letter-spacing: .14em; opacity: .7; }
.ft-reset b { color: #ffb02e; font-size: 14px; }
.ft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ft-item { padding: 12px; }
.ft-buy { margin-top: 6px; font-family: 'Archivo Black', var(--display); font-size: 14px; background: #ffb02e; color: #08070c; border: none; padding: 9px 0; cursor: pointer; }
.ft-buy:hover { background: #fff; }
.ft-owned { margin-top: 6px; text-align: center; font-family: var(--mono); letter-spacing: .14em; }
/* relic glow */
.st-item[style*="#ff1e2e"] { box-shadow: inset 0 0 18px rgba(255,30,46,.25); }
.wpn-card .rar { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--r); margin-left: 6px; }
.title-path { display: flex; flex-direction: column; gap: 6px; }
.title-card.path { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; }
.title-card.path.locked { opacity: .8; }

/* weapon cards: lock badge sits at the bottom so it never covers the name / rarity */
.wpn-card { position: relative; }
.wpn-card .lock-badge { top: auto; bottom: 8px; right: 8px; }

/* relic calling cards */
.cc-hellgate { background: radial-gradient(ellipse at 50% 120%, #ff1e2e, #3a0206 50%, #060102 90%); }
.cc-hellgate .cc-fx { background: linear-gradient(#ff1e2e, #ff1e2e) 72% 18% / 34% 6% no-repeat, linear-gradient(#ff1e2e, #ff1e2e) 72% 32% / 28% 3% no-repeat, linear-gradient(#ff1e2e, #ff1e2e) 63% 100% / 2.5% 74% no-repeat, linear-gradient(#ff1e2e, #ff1e2e) 81% 100% / 2.5% 74% no-repeat; filter: drop-shadow(0 0 8px #ff1e2e); animation: ccGate 1.6s ease-in-out infinite alternate; }
.cc-hellgate::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, #ff6a3a 0 1.5px, transparent 2px) 0 0 / 31px 23px; animation: ccEmbers 2.4s linear infinite; }
@keyframes ccGate { to { filter: drop-shadow(0 0 18px #ff1e2e) brightness(1.3); } }
.cc-bloodmoon { background: linear-gradient(180deg, #120204, #3a0408 70%, #060102); }
.cc-bloodmoon .cc-fx { background: radial-gradient(circle at 78% 42%, #ff3a2a 0 13%, rgba(255,30,46,.35) 14%, transparent 30%), repeating-linear-gradient(90deg, #060102 0 14px, transparent 14px 20px, #0c0204 20px 40px, transparent 40px 46px) 0 100% / 220px 34% repeat-x; animation: ccMoon 3s ease-in-out infinite alternate; }
@keyframes ccMoon { to { filter: brightness(1.35) saturate(1.2); } }
.wpn-card .lock-badge { top: 8px; left: 8px; right: auto; bottom: auto; }   /* over the picture, clear of the text */

/* ---- calling card line art (src/cardart.js): the old flat shapes give way to the drawn layer ---- */
.pcard .cc-fx, .pcard::after { display: none !important; }
.pcard .cc-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden;
  filter: drop-shadow(0 0 1.5px currentColor);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 30%, #000 50%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.6) 30%, #000 50%); }
.pcard .cc-art text { fill: currentColor; }
.pcard .cc-art g[fill] text { fill: inherit; }
/* animated layers */
.cc-art .blink { animation: artBlink 1.1s steps(2, jump-none) infinite; }
.cc-art .flicker { animation: artFlicker 3s linear infinite; }
.cc-art .pulse { animation: artPulse 1.8s ease-in-out infinite; }
.cc-art .scan { animation: artScan 2.6s linear infinite; }
.cc-art .drift { animation: artDrift 1.1s linear infinite; }
.cc-art .drift.slow { animation-duration: 6s; }
.cc-art .drift2 { transform: translateY(-100px); animation-name: artDrift2; }
.cc-art .rise { animation: artRise 3s linear infinite; }
.cc-art .spin { animation: artSpin 3s linear infinite; }
.cc-art .spin.slow { animation-duration: 14s; }
.cc-art .ripple { animation: artRipple 3s ease-out infinite; }
.cc-art .scroll, .cc-art .scroll-grid { animation: artScroll 2s linear infinite; }
.cc-art .scroll-grid { animation: artGrid 1.4s linear infinite; }
.cc-art .drift-x { animation: artCrows 9s linear infinite; }
.cc-art .flame { animation: artPulse 0.9s ease-in-out infinite alternate; }
@keyframes artBlink { 50% { opacity: .15; } }
@keyframes artFlicker { 0%, 46%, 50%, 54%, 100% { opacity: 1; } 48%, 52% { opacity: .2; } }
@keyframes artPulse { 50% { opacity: .45; } }
@keyframes artScan { from { transform: translateY(0); opacity: .9; } to { transform: translateY(100px); opacity: .2; } }
@keyframes artDrift { from { transform: translateY(0); } to { transform: translateY(100px); } }
@keyframes artDrift2 { from { transform: translateY(-100px); } to { transform: translateY(0); } }
@keyframes artRise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-60px); opacity: 0; } }
@keyframes artSpin { to { transform: rotate(360deg); } }
@keyframes artRipple { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes artScroll { to { transform: translateX(-120px); } }
@keyframes artGrid { from { transform: translateY(0); } to { transform: translateY(4px); } }
@keyframes artCrows { from { transform: translateX(60px); } to { transform: translateX(-120px); } }
.cc-art .spin, .cc-art .ripple { transform-box: view-box; }
/* still cards don't move */
.cc-street .cc-art *, .cc-concrete .cc-art *, .cc-sunset .cc-art *, .cc-bamboo .cc-art *, .cc-circuit .cc-art *, .cc-torii .cc-art * { animation: none !important; }
/* koi pond: dark water so the line art reads (the colour drift stays) */
.cc-koi { background: linear-gradient(120deg, #04161c, #08303a, #10202e, #04161c); background-size: 300% 100%; animation: ccKoi 10s linear infinite; }

/* player icon line-art emblems (src/iconart.js) */
.picon b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0; }
.picon .pi-art { width: 86%; height: 86%; overflow: visible; filter: drop-shadow(0 0 2px currentColor) drop-shadow(0 0 5px color-mix(in srgb, currentColor 50%, transparent)); }
.picon.mini .pi-art { width: 96%; height: 96%; stroke-width: 1.4; filter: drop-shadow(0 0 1px currentColor); }
.picon.mini .pi-art [stroke-width] { stroke-width: 2.6; }
/* tiny icons: just the emblem's main lines */
.picon.mini .pi-frame, .picon.mini .pi-echo, .picon.mini .pi-art [opacity^="0."], .picon.mini .pi-art [opacity^="."] { display: none; }
.picon .pi-art .blink { animation: artBlink 1.1s steps(2, jump-none) infinite; }
.picon .pi-art .pulse { animation: artPulse 1.6s ease-in-out infinite; }
.picon .pi-art .flicker { animation: artFlicker 2.4s linear infinite; }
.picon .pi-art .spin.slow { animation: artSpin 16s linear infinite; }
.picon .pi-art .rise { animation: artRiseS 2.4s linear infinite; }
@keyframes artRiseS { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }
/* still icons (common / rare) don't move */
.picon:not(.pi-pulse):not(.pi-spin):not(.pi-glitch):not(.pi-rainbow):not(.pi-flame) .pi-art * { animation: none !important; }
.pi-flame b { text-shadow: none; }
.cc-art .kscroll { animation: artK 12s linear infinite; }
@keyframes artK { from { transform: translateY(0); } to { transform: translateY(-100px); } }
/* performance: the hidden scoreboard isn't painted; card glow filter only on big cards */
#scoreboard:not(.show) { visibility: hidden; }
.pcard .cc-art { filter: none; }
.pcard.big .cc-art { filter: drop-shadow(0 0 1.5px currentColor); }
#scoreboard.final .pcard.sb-card { opacity: .55; }
/* end screen: the card art lives on the right of the name cell, behind the name it fades out */
#scoreboard.final .pcard.sb-card { opacity: .8; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, #000 55%); mask-image: linear-gradient(90deg, rgba(0,0,0,.35) 0%, #000 55%); }
#scoreboard.final .pcard.sb-card .cc-art { -webkit-mask-image: none; mask-image: none; }
#scoreboard.final td.nm { width: 46%; }

/* ---------- sign in / sign up ---------- */
#authScreen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,30,60,.18), transparent 60%), linear-gradient(180deg, rgba(8,7,12,.92), rgba(8,7,12,.98)); transition: opacity .5s; }
#authScreen.done { opacity: 0; pointer-events: none; }
#authScreen:not(.ready):not(.done) .auth-card { opacity: .0; }
.auth-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 28px 26px; background: rgba(12,10,18,.96); border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 60px rgba(255,30,60,.15); transition: opacity .3s; }
.auth-logo { align-self: center; display: flex; flex-direction: column; align-items: center; line-height: 1; padding: 8px 14px 7px; border: 2px solid #fff; }
.auth-logo b { font-family: var(--heavy); font-size: 30px; }
.auth-logo small { font-family: var(--heavy); font-size: 10px; letter-spacing: .22em; margin-top: 4px; background: #fff; color: #08070c; padding: 1px 8px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.auth-tabs button { font-family: 'Archivo Black', var(--display); font-size: 13px; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.06); border: none; padding: 10px; cursor: pointer; }
.auth-tabs button.on { background: #fff; color: #08070c; }
#authForm { display: flex; flex-direction: column; gap: 10px; }
#authForm label { display: flex; flex-direction: column; gap: 4px; }
#authForm label > span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; opacity: .7; }
#authForm label > span i { font-style: normal; opacity: .6; }
#authForm .text-in { width: 100%; }
#authScreen[data-mode="login"] .signup-only { display: none; }
.auth-check { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 12px; opacity: .85; cursor: pointer; }
.auth-check[hidden] { display: none !important; }
.auth-error { font-size: 12px; color: #ff6a7a; background: rgba(255,30,60,.1); border-left: 3px solid var(--red); padding: 8px 10px; }
.auth-error[hidden] { display: none; }
#authSubmit { margin-top: 4px; font-family: 'Archivo Black', var(--display); font-size: 18px; letter-spacing: .05em; padding: 14px 0; background: #fff; color: #08070c; border: none; cursor: pointer; }
#authSubmit:hover:not(:disabled) { background: var(--red); color: #fff; }
#authSubmit:disabled { opacity: .5; cursor: wait; }
.auth-note { font-size: 9px; letter-spacing: .12em; opacity: .5; text-align: center; line-height: 1.6; }
.pf-head-btns { display: flex; gap: 8px; align-items: center; }

/* ---------- scoreboard: report buttons + free cursor ---------- */
#scoreboard .sb-rep { width: 28px; text-align: center; padding: 0 4px; }
.sb-report { font-size: 12px; line-height: 1; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); width: 22px; height: 22px; cursor: pointer; opacity: .5; }
.sb-report:hover { opacity: 1; background: var(--red); border-color: var(--red); }
body.sbcursor #scoreboard { pointer-events: auto; }
body.sbcursor #scoreboard .sb-report { opacity: .85; }
.sb-back { display: none; margin: 10px auto 0; font-size: 11px; letter-spacing: .14em; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 7px 14px; cursor: pointer; }
body.sbcursor .sb-back { display: block; }
body.sbcursor #scoreboard .sb-foot { display: none; }
body.sbcursor #crosshair { opacity: 0; }

/* ---------- report dialog ---------- */
#reportPop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(4,3,8,.6); padding: 16px; }
#reportPop.hidden { display: none; }
.rp-win { width: min(440px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; background: rgba(12,10,18,.98); border: 1px solid rgba(255,30,60,.5); box-shadow: 0 0 40px rgba(255,30,60,.2); }
.rp-head { display: flex; justify-content: space-between; align-items: center; }
.rp-head h3 { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 20px; }
.rp-target b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 16px; color: var(--red); }
.rp-target .mono { font-size: 10px; opacity: .6; letter-spacing: .12em; }
.rp-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rp-reasons button { text-align: left; padding: 9px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.rp-reasons button b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 12px; }
.rp-reasons button span { font-size: 10px; opacity: .6; }
.rp-reasons button.on { border-color: var(--red); background: rgba(255,30,60,.15); }
.rp-reasons button:last-child { grid-column: span 2; }
#rpDetails { width: 100%; resize: vertical; min-height: 60px; font-family: inherit; }
.rp-msg { font-size: 12px; color: #ff6a7a; }
.rp-btns { display: flex; justify-content: flex-end; gap: 8px; }
.rp-done { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; padding: 10px 0; }
.rp-done > b { font-family: 'Archivo Black', var(--display); font-size: 20px; color: #4dff88; }

/* ---------- other players' profiles + owner tools ---------- */
#playerPop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(4,3,8,.6); padding: 16px; }
#playerPop.hidden { display: none; }
.pp-win { width: min(720px, 100%); max-height: 88vh; overflow-y: auto; padding: 22px 26px; background: rgba(10,9,14,.97); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 14px; }
.pp-win.wide { width: min(860px, 100%); }
.pp-win > * { flex: none; }
.pp-win .sv-head { display: flex; justify-content: space-between; align-items: center; }
.pp-win .pcard.big { aspect-ratio: auto; height: 120px; }
.pp-loading { opacity: .6; padding: 30px; text-align: center; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10px; letter-spacing: .12em; }
.pp-meta > span { background: rgba(255,255,255,.05); padding: 4px 8px; }
.pp-role.r-owner { color: #ffd700; } .pp-role.r-dev { color: #2aff8a; } .pp-role.r-partner { color: #b06aff; }
.pp-banned { color: #fff; background: var(--red) !important; }
.pp-admin { border: 1px solid #ffd70066; background: rgba(255,215,0,.05); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pp-admin-head { display: flex; justify-content: space-between; align-items: center; }
.pp-admin-head b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 14px; color: #ffd700; letter-spacing: .06em; }
.pp-admin-head span { font-size: 10px; opacity: .6; }
.pp-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-row > .mono { font-size: 10px; letter-spacing: .14em; opacity: .7; width: 44px; }
.pp-seg { display: flex; gap: 4px; }
.pp-seg button { font-family: 'Archivo Black', var(--display); font-size: 11px; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 7px 12px; cursor: pointer; }
.pp-seg button.on { background: #ffd700; color: #08070c; border-color: #ffd700; }
.pp-ban select { width: 120px; }
.pp-ban input { flex: 1; min-width: 160px; }
.pill-btn.danger { background: var(--red); color: #fff; }
.pp-isbanned span { flex: 1; font-size: 12px; color: #ff8a9a; }
.lb-link, .link { cursor: pointer; }
.lb-link:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lb-gap { text-align: center; opacity: .4; padding: 2px; }
.cl-invites { width: min(560px, 100%); display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.mini-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
/* reports inbox */
.rp-list { display: flex; flex-direction: column; gap: 8px; }
.rp-item { background: rgba(255,255,255,.04); border-left: 3px solid var(--red); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.rp-item-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rp-item-head .mono { margin-left: auto; font-size: 10px; opacity: .55; }
.rp-who { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 15px; }
.rp-reason { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; background: var(--red); padding: 2px 6px; }
.rp-item p { font-size: 13px; opacity: .85; }
.rp-item-foot { display: flex; gap: 8px; align-items: center; }
.rp-item-foot .mono { flex: 1; font-size: 10px; letter-spacing: .1em; opacity: .65; }

/* custom hitmarker sound (Settings → Audio) */
.hs-box { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.hs-file { font-size: 12px; letter-spacing: .08em; background: rgba(255,255,255,.05); padding: 8px 10px; }
.hs-file span { opacity: .55; margin-left: 6px; }
.hs-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-btns label.pill-btn { cursor: pointer; display: inline-flex; align-items: center; }
.hs-note { font-size: 9px; letter-spacing: .1em; opacity: .55; line-height: 1.6; }
.hs-note.bad { color: #ff6a7a; opacity: 1; }

/* confirm popups always in front of every other window */
#confirmPop { z-index: 200 !important; }

/* ---------- match replay player ---------- */
body.replaying #menu, body.replaying #authScreen { display: none !important; }
body.replaying #hud { display: block; }
body.replaying #hud > *:not(#feed) { display: none !important; }
#replayBar { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 95; width: min(980px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: rgba(10,9,14,.9); border: 1px solid rgba(255,30,60,.45); box-shadow: 0 0 30px rgba(0,0,0,.6); }
#replayBar.hidden { display: none; }
.rb-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-tag { font-size: 10px; letter-spacing: .16em; color: #fff; background: var(--red); padding: 2px 8px; animation: artBlink 1.4s steps(2, jump-none) infinite; }
.rb-top b { font-family: 'Archivo Black', var(--display); font-weight: 400; font-size: 14px; }
.rb-label { margin-left: auto; font-size: 11px; letter-spacing: .14em; color: #ffb02e; }
.rb-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rb-controls button { font-family: 'Archivo Black', var(--display); font-size: 11px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); padding: 6px 9px; cursor: pointer; }
.rb-controls button:hover, .rb-controls button.on { background: #fff; color: #08070c; }
.rb-controls .rb-play { min-width: 38px; }
.rb-controls .rb-exit { margin-left: auto; background: var(--red); border-color: var(--red); }
.rb-controls input[type=range] { flex: 1; min-width: 140px; accent-color: var(--red); }
.rb-controls select { width: auto; max-width: 190px; padding: 5px 8px; }
.rb-time { font-size: 11px; min-width: 84px; text-align: center; }
.rb-hint { font-size: 9px; letter-spacing: .14em; opacity: .5; text-align: center; }
.rp-attach { font-size: 10px; letter-spacing: .12em; color: #4dff88; }
.rp-watch { align-self: flex-start; }

/* staff role badges next to names */
.role-badge { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-left: .3em; vertical-align: -0.12em; color: var(--rb);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--rb) 70%, transparent)); }
.role-badge svg { width: 100%; height: 100%; }
.role-badge.r-owner svg { fill: color-mix(in srgb, #ffd700 35%, transparent); }
.ban-item { border-left-color: #ffd700; }

/* player card / profile header: title left, buttons right on one line, compact and no glow */
.pf-win .sv-head, .pp-win .sv-head { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; }
.pf-head-btns { flex-wrap: nowrap; gap: 6px; }
.pf-head-btns .pill-btn { padding: 7px 14px; font-size: 11px; box-shadow: none !important; text-shadow: none; white-space: nowrap; }
.pf-head-btns .pill-btn:hover { box-shadow: none !important; }
.pf-head-btns .icon-btn { flex: none; }
@media (max-width: 560px) { .pf-win .sv-head, .pp-win .sv-head { flex-wrap: wrap; } }

/* ---------- MYTHIC rarity: a colour that cycles through RGB (used anywhere a rarity colour is) ---------- */
@property --mythic { syntax: '<color>'; inherits: true; initial-value: #ff1e3c; }
/* animated only on the elements that show a mythic colour (animating it on :root restyled the whole page every
   frame — the store dropped to ~10 FPS). Those elements carry it in their inline style (--r: var(--mythic)). */
[style*="--mythic"] { animation: mythicCycle 3s linear infinite; }
@keyframes mythicCycle {
  0%, 100% { --mythic: #ff1e3c; } 17% { --mythic: #ffd21e; } 33% { --mythic: #2aff6a; }
  50% { --mythic: #1ee6ff; } 67% { --mythic: #3a6aff; } 83% { --mythic: #d21eff; }
}
.st-item[style*="--mythic"] { box-shadow: inset 0 0 22px color-mix(in srgb, var(--mythic) 35%, transparent); }

/* store collection: still pictures — animated icons / calling cards only move in the popup view */
#storeGrid .st-item *, #stFeatured .ft-grid .st-item *, #storeGrid .st-item *::before, #storeGrid .st-item *::after { animation-play-state: paused !important; }

/* collection: items you don't own are a black silhouette with a ? */
.st-thumb.mys { background: radial-gradient(circle at 50% 45%, #4a4658, #26232f 75%) !important; }
.st-thumb.mys > *:not(.anim) { filter: brightness(0) !important; opacity: .9; }
.st-thumb.mys .anim { display: none; }
.st-thumb.mys::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Archivo Black', var(--display);
  font-size: 46px; color: var(--r); text-shadow: 0 0 14px color-mix(in srgb, var(--r) 70%, transparent), 0 2px 0 #000; pointer-events: none; }
.st-item.mystery { cursor: default; }
.st-item.locked.mystery .st-thumb { filter: none; }
/* thumbnails are transparent now: give their frames the old backdrop */
.thumb, .cat-thumb { background: radial-gradient(circle at 50% 45%, #4a4560, #2a2638 80%); }

/* Original full-card announcement arrangement, with navigation over the artwork. */
#announcement .announcement-slide { padding:0; }
#announcement .announcement-controls { position:absolute;top:6px;left:8px;z-index:3;padding:0;gap:4px; }
#announcement .announcement-controls .pips { padding:4px; }
#announcement .announcement-arrow { font-size:16px; }
#announcement .announcement-city h3 { padding:12px 16px; }
#announcement .announcement-report { padding:0;background:#07151c; }
#announcement .report-poster { width:100%;height:100%;border:0;background:#07151c;display:flex;flex-direction:column; }
#announcement .report-poster-title { position:relative;order:-1;flex:none;top:auto;left:auto;z-index:2;padding:32px 12px 8px;text-align:center;text-transform:uppercase;font-size:clamp(16px,1.35vw,24px);line-height:1.08; }
#announcement .report-officer { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;filter:none; }
#announcement .report-poster::after { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,rgba(0,0,0,.05) 28%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.52) 100%); }
#announcement .report-caption { position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 16px;text-align:left;font-family:var(--heavy);font-weight:400;font-size:min(17px,1.05vw);line-height:1.05;letter-spacing:0;white-space:nowrap;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px #000;pointer-events:none; }
#announcement button:focus-visible { outline:2px solid #8af4ff;outline-offset:3px; }
/* Lobby chat stays available over the game without releasing pointer lock. */
#lobby-chat { position:fixed; left:28px; bottom:154px; width:min(350px,calc(100vw - 56px)); z-index:90; color:var(--text); font:14px/1.45 var(--mono); pointer-events:none; text-shadow:0 1px 3px #000; }
body:not(.playing) #lobby-chat, body.replaying #lobby-chat, body.sbcursor #lobby-chat { display:none; }
#lobby-chat input { font:inherit; }
#replay-chat { display:none; position:fixed; right:20px; top:100px; width:min(360px,35vw); max-height:55vh; overflow:auto; padding:16px; background:#080b14ed; color:white; z-index:100; font:14px/1.5 monospace; overflow-wrap:anywhere; }
body.replaying #replay-chat { display:block; }
#replay-chat h3 { font-size:13px; color:#50cddd; }
#replay-chat .reported { color:#ffb86b; }
#lobby-chat .chat-log { max-height:116px; overflow:auto; padding:10px 14px; overflow-wrap:anywhere; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent; }
#lobby-chat .chat-log::-webkit-scrollbar { width:3px; }
#lobby-chat .chat-log::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); box-shadow:none; }
#lobby-chat .chat-log:empty { display:none; }
#lobby-chat form { display:none; }
#lobby-chat.typing form { display:block; pointer-events:auto; margin-top:6px; }
#lobby-chat input { width:100%; box-sizing:border-box; padding:10px 14px; color:var(--text); background:transparent; border:0; border-radius:10px; font:inherit; outline:none; }
#lobby-chat form:focus-within { border-color:rgba(255,255,255,.25); }