/* STRIKEZONE styles */
:root {
  --bg: #080b11; --panel: rgba(10, 14, 22, .78); --line: rgba(255, 255, 255, .09);
  --cyan: #19e3ff; --orange: #ff8a1a; --blue: #2b8cff; --red: #ff3b3b; --text: #e7edf6; --dim: #8b97a8;
  --font: "Rajdhani", "Bahnschrift", "Segoe UI", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: var(--font); cursor: pointer; }

/* ---------- loading ---------- */
#loading { position: fixed; inset: 0; background: radial-gradient(ellipse at center, #14202f, #05070b); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.ld-logo, .logo { font-weight: 800; letter-spacing: .12em; font-size: 54px; text-transform: uppercase; }
.ld-logo b, .logo b { color: var(--orange); }
.ld-sub { color: var(--dim); letter-spacing: .3em; font-size: 14px; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; z-index: 20; }
#lobby { padding-left: 104px !important; display: grid; grid-template-columns: minmax(280px, 340px) 1fr minmax(300px, 370px); grid-template-rows: auto 1fr auto; gap: 14px 20px; padding: 18px 26px; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,8,13,.55), rgba(5,8,13,0) 22%, rgba(5,8,13,0) 62%, rgba(5,8,13,.7)); }
.lb-head { grid-column: 1 / 4; display: flex; align-items: baseline; gap: 28px; pointer-events: auto; }
.lb-head .logo { font-size: 38px; line-height: 1; text-shadow: 0 2px 20px rgba(255,138,26,.35); }
.mode { display: flex; align-items: center; gap: 10px; color: var(--dim); letter-spacing: .28em; font-size: 14px; font-weight: 600; }
.mode .dot { width: 5px; height: 5px; background: var(--orange); transform: rotate(45deg); }
.panel { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); padding: 16px 18px 18px; overflow-y: auto; min-height: 0;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
#stageDrag { grid-column: 1 / 4; grid-row: 2; pointer-events: auto; cursor: grab; }
#stageDrag:active { cursor: grabbing; }
.panel h2 { font-size: 20px; letter-spacing: .24em; color: var(--cyan); font-weight: 700; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.panel h2.mt { margin-top: 18px; }
.sub { font-size: 12px; letter-spacing: .22em; color: var(--dim); font-weight: 700; margin: 14px 0 8px; }
.field { display: block; } .field span { font-size: 12px; letter-spacing: .22em; color: var(--dim); font-weight: 700; }
.field input { width: 100%; margin-top: 6px; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text); padding: 9px 12px; font: 600 18px var(--font); letter-spacing: .08em; outline: none; }
.field input:focus { border-color: var(--cyan); }

.skin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.skin { position: relative; cursor: pointer; padding: 10px 10px 9px; border: 1px solid var(--line); background: rgba(255,255,255,.035); transition: .15s; overflow: hidden; }
.skin::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.skin .nm { font-weight: 700; font-size: 17px; letter-spacing: .08em; padding-left: 8px; text-transform: uppercase; }
.skin .tg { font-size: 11px; color: var(--dim); letter-spacing: .14em; padding-left: 8px; text-transform: uppercase; }
.skin .sw { position: absolute; right: 8px; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--c3); box-shadow: 0 0 10px var(--c3); }
.skin:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.skin.sel { border-color: var(--cyan); background: rgba(25,227,255,.1); box-shadow: inset 0 0 0 1px rgba(25,227,255,.35), 0 0 18px rgba(25,227,255,.15); }

.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 14px; color: #b9c4d3; }
kbd { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-bottom-width: 2px; padding: 0 6px; font: 700 12px var(--font); letter-spacing: .04em; color: #fff; border-radius: 3px; }

.wlist { display: flex; flex-direction: column; gap: 7px; }
.wcard { cursor: pointer; padding: 9px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.035); transition: .15s; }
.wcard:hover { background: rgba(255,255,255,.08); }
.wcard.sel { border-color: var(--orange); background: rgba(255,138,26,.1); box-shadow: inset 0 0 0 1px rgba(255,138,26,.35); }
.wcard .wn { display: flex; justify-content: space-between; font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.wcard .wd { font-size: 12px; color: var(--dim); letter-spacing: .06em; margin-bottom: 6px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.st { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .14em; color: var(--dim); font-weight: 700; }
.st .b { flex: 1; height: 4px; background: rgba(255,255,255,.1); } .st .b i { display: block; height: 100%; background: var(--orange); }
.equip { font-size: 15px; letter-spacing: .06em; padding: 8px 12px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.equip .ico { color: #9fb36a; margin-right: 6px; } .equip em { color: var(--dim); font-style: normal; font-size: 12px; } .equip b { color: var(--orange); }

.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; font-size: 13px; letter-spacing: .16em; color: var(--dim); font-weight: 700; }
.row input[type=range] { flex: 1; max-width: 140px; accent-color: var(--cyan); }
.row em { font-style: normal; width: 38px; text-align: right; color: var(--text); letter-spacing: .04em; }
.seg { display: flex; } .seg button { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--dim); padding: 5px 11px; font: 700 13px var(--font); letter-spacing: .1em; margin-left: -1px; }
.seg button.sel { background: var(--cyan); color: #04141a; border-color: var(--cyan); }

.lb-foot { grid-column: 1 / 4; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: end; pointer-events: none; }
.team { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--blue); backdrop-filter: blur(10px); padding: 10px 14px; }
.team.red { border-top-color: var(--red); }
.team .th { font-weight: 800; letter-spacing: .26em; font-size: 14px; color: var(--blue); margin-bottom: 6px; } .team.red .th { color: var(--red); }
.roster .pl { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.roster .pl:first-child { border-top: 0; }
.roster .sw { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.roster .nm { flex: 1; text-transform: uppercase; } .roster .nm small { display: block; color: var(--dim); font-size: 11px; letter-spacing: .14em; }
.roster .rd { font-size: 11px; color: #3df08d; letter-spacing: .2em; font-weight: 800; animation: blink 2s infinite; }
.roster .you { color: var(--cyan); font-size: 11px; letter-spacing: .2em; font-weight: 800; }
@keyframes blink { 50% { opacity: .45; } }
.startbox { pointer-events: auto; display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 280px; }
.start { background: linear-gradient(180deg, #ffa13a, #ff7a0f); color: #1a0e02; border: 0; padding: 16px 30px; font: 800 26px var(--font); letter-spacing: .2em; cursor: pointer; box-shadow: 0 6px 30px rgba(255,138,26,.35); transition: .15s;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.start:hover { filter: brightness(1.12); transform: translateY(-2px); }
.ghost { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--dim); padding: 8px; font: 700 13px var(--font); letter-spacing: .24em; }
.ghost:hover { color: #fff; background: rgba(255,255,255,.12); }

/* ---------- pause / end ---------- */
#pause, #end { display: flex; align-items: center; justify-content: center; background: rgba(4,6,10,.72); backdrop-filter: blur(5px); z-index: 40; }
.box { background: var(--panel); border: 1px solid var(--line); padding: 34px 48px; text-align: center; display: flex; flex-direction: column; gap: 14px; min-width: 360px; }
.box.wide { min-width: 560px; }
.box h1 { font-size: 64px; letter-spacing: .2em; font-weight: 800; line-height: 1; }
.box p { color: var(--dim); letter-spacing: .08em; font-size: 16px; }
.box .btns { display: flex; gap: 12px; justify-content: center; margin-top: 8px; } .box .btns .ghost { padding: 0 24px; font-size: 15px; }
#endScore { font-size: 40px; font-weight: 800; letter-spacing: .14em; } #endScore .b { color: var(--blue); } #endScore .r { color: var(--red); }
#endTable table, #scoreboard table { width: 100%; border-collapse: collapse; font-size: 16px; letter-spacing: .06em; }
th { color: var(--dim); font-size: 12px; letter-spacing: .2em; text-align: left; padding: 4px 8px; } td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: left; font-weight: 600; }
tr.blue td:first-child i, tr.red td:first-child i { display: block; width: 6px; height: 18px; } tr.blue td:first-child i { background: var(--blue); } tr.red td:first-child i { background: var(--red); }
tr.me td { background: rgba(25,227,255,.1); color: #fff; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-weight: 700; }
#scorebar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; background: rgba(6,9,14,.7); border: 1px solid var(--line); }
#scorebar .tm { width: 78px; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; }
#scorebar .tm.blue { background: linear-gradient(90deg, rgba(43,140,255,.1), rgba(43,140,255,.45)); color: #9ccbff; }
#scorebar .tm.red { background: linear-gradient(270deg, rgba(255,59,59,.1), rgba(255,59,59,.45)); color: #ffaaaa; }
#scorebar .mid { padding: 3px 22px; text-align: center; } #timer { font-size: 28px; letter-spacing: .12em; line-height: 1.1; } #goal { font-size: 11px; color: var(--dim); letter-spacing: .24em; }
#radar { position: absolute; top: 16px; left: 16px; width: 160px; height: 160px; }
#killfeed { position: absolute; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.kf { background: rgba(6,9,14,.65); padding: 4px 12px; font-size: 17px; letter-spacing: .06em; display: flex; gap: 8px; align-items: center; animation: kfin .2s; border-right: 3px solid rgba(255,255,255,.2); }
.kf.me { border-right-color: var(--orange); background: rgba(40,22,6,.75); } .kf i { font-style: normal; color: var(--dim); } .kf em { font-style: normal; color: var(--dim); font-size: 12px; }
@keyframes kfin { from { transform: translateX(30px); opacity: 0; } }

#crosshair { --gap: 6px; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity .1s; }
.ch { position: absolute; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.9); }
.ch.t, .ch.b { width: 2px; height: 9px; left: -1px; } .ch.l, .ch.r { width: 9px; height: 2px; top: -1px; }
.ch.t { top: calc(-9px - var(--gap)); } .ch.b { top: var(--gap); } .ch.l { left: calc(-9px - var(--gap)); } .ch.r { left: var(--gap); }
.cd { position: absolute; width: 3px; height: 3px; left: -1.5px; top: -1.5px; background: #fff; border-radius: 50%; box-shadow: 0 0 2px #000; }
#hitmarker { position: absolute; left: 50%; top: 50%; opacity: 0; } #hitmarker.on { opacity: 1; }
#hitmarker i { position: absolute; width: 10px; height: 2px; background: #fff; box-shadow: 0 0 3px #000; }
#hitmarker i:nth-child(1) { transform: translate(-16px, -9px) rotate(45deg); } #hitmarker i:nth-child(2) { transform: translate(6px, -9px) rotate(-45deg); }
#hitmarker i:nth-child(3) { transform: translate(-16px, 7px) rotate(-45deg); } #hitmarker i:nth-child(4) { transform: translate(6px, 7px) rotate(45deg); }
#hitmarker.head i { background: #ffd34d; } #hitmarker.kill i { background: #ff3b3b; width: 14px; }
#dmgRing { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.dmg { position: absolute; left: -90px; top: -200px; width: 180px; height: 70px; border-top: 6px solid rgba(255,40,40,.85); border-radius: 50%/100% 100% 0 0; transform-origin: 50% 200px; filter: blur(1px); animation: dmgf .9s forwards; }
.dmg { top: -230px; transform-origin: 50% 230px; }
@keyframes dmgf { to { opacity: 0; } }
#vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(190,0,0,.55) 100%); }

#healthBox { position: absolute; left: 24px; bottom: 24px; width: 260px; }
#healthBox .lbl { font-size: 12px; letter-spacing: .26em; color: var(--dim); } #hpNum { font-size: 52px; font-weight: 800; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.bar { height: 8px; background: rgba(255,255,255,.14); margin-top: 6px; } #hpFill { height: 100%; width: 100%; background: #37e08a; transition: width .15s; }
#shield { font-size: 12px; letter-spacing: .22em; color: var(--cyan); margin-top: 6px; opacity: 0; transition: opacity .3s; }
#ammoBox { position: absolute; right: 28px; bottom: 24px; text-align: right; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
#wName { font-size: 16px; letter-spacing: .24em; color: var(--orange); } .ammoRow { line-height: 1; } #mag { font-size: 64px; font-weight: 800; } #mag.low { color: #ff5a4a; } #reserve { font-size: 26px; color: var(--dim); margin-left: 6px; }
#nades { font-size: 18px; letter-spacing: .12em; color: #b6c78a; margin-top: 4px; } #reloadTxt { font-size: 15px; letter-spacing: .26em; color: #ffd34d; height: 20px; }
#toast { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); font-size: 22px; letter-spacing: .2em; color: #fff; text-shadow: 0 2px 10px #000; opacity: 0; transition: opacity .25s; }
#banner { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .3s; text-shadow: 0 4px 24px rgba(0,0,0,.7); }
#banner b { display: block; font-size: 84px; font-weight: 800; letter-spacing: .2em; color: #fff; } #banner span { font-size: 20px; letter-spacing: .3em; color: var(--orange); }
#deadBox { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity .3s; }
#deadBox.on { opacity: 1; } #deadTitle { font-size: 50px; font-weight: 800; letter-spacing: .24em; color: #ff5a4a; } #deadBy { font-size: 20px; letter-spacing: .14em; } #deadTimer { font-size: 18px; letter-spacing: .24em; color: var(--dim); margin-top: 4px; }
#scope { position: absolute; inset: 0; display: none; background: radial-gradient(circle at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 36vh, #000 36.4vh); }
#scope.on { display: block; } #scope .sc-h, #scope .sc-v { position: absolute; background: rgba(0,0,0,.85); } #scope .sc-h { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; } #scope .sc-v { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }
#scoreboard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; background: rgba(6,9,14,.88); border: 1px solid var(--line); padding: 18px 22px; display: none; }
#scoreboard.on { display: block; } #scoreboard h3 { letter-spacing: .3em; margin-bottom: 8px; color: var(--cyan); }
#hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-size: 13px; letter-spacing: .14em; color: var(--dim); opacity: 0; transition: opacity 1s; white-space: nowrap; } #hint.on { opacity: .9; }
#fps { position: absolute; left: 190px; top: 20px; font-size: 12px; color: var(--dim); letter-spacing: .1em; }

@media (max-width: 1100px) { #lobby { grid-template-columns: 250px 1fr 290px; padding: 12px; } .logo { font-size: 28px !important; } .start { font-size: 20px; padding: 12px 18px; } .startbox { min-width: 200px; } }

#reviveBox { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); width: 260px; text-align: center; opacity: 0; transition: opacity .15s; font-size: 17px; letter-spacing: .2em; text-shadow: 0 2px 8px #000; }
#reviveFill { height: 100%; width: 0; background: #37e08a; }

/* ---------- side rail + meta panels ---------- */
#profileBar { margin-left: auto; pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); padding: 6px 14px; font-size: 18px; letter-spacing: .06em; }
#profileBar .lv { color: var(--cyan); font-weight: 800; } .xpb { width: 90px; height: 6px; background: rgba(255,255,255,.14); } .xpb i { display: block; height: 100%; background: var(--cyan); }
.coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1a8, #f2b01e 60%, #b57a05); display: inline-block; box-shadow: 0 0 8px rgba(255,190,40,.6); }
#rail { position: fixed; left: 20px; top: 92px; display: flex; flex-direction: column; gap: 10px; z-index: 40; pointer-events: auto; }
#rail button { position: relative; width: 112px; padding: 13px 0; justify-content: center; background: var(--panel); border: 1px solid var(--line); color: var(--dim); font: 800 11px var(--font); letter-spacing: .16em; display: flex; flex-direction: column; align-items: center; gap: 3px; transition: .15s; backdrop-filter: blur(10px); }
#rail button .ic { font-size: 24px; filter: saturate(.8); } #rail button:hover { color: #fff; border-color: var(--orange); transform: translateX(3px); }
#rail button.sel { color: #fff; background: rgba(255,138,26,.18); border-color: var(--orange); }
#rail .dot { display: none; position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; }
.skin.locked { opacity: .55; } .skin .lk { position: absolute; right: 8px; bottom: 7px; font-size: 12px; font-weight: 800; color: #ffd34d; letter-spacing: .06em; }
#meta { z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(4,6,10,.55); backdrop-filter: blur(3px); }
.mbox { width: min(760px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: rgba(10,14,22,.96); border: 1px solid var(--line); border-top: 3px solid var(--orange); }
.mhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.mhead h2 { font-size: 26px; letter-spacing: .26em; color: #fff; } #mClose { background: none; border: 0; color: var(--dim); font-size: 22px; } #mClose:hover { color: #fff; }
#mBody { padding: 16px 22px 20px; overflow-y: auto; }
.msub { font-size: 12px; letter-spacing: .24em; color: var(--dim); font-weight: 700; margin: 16px 0 8px; }
.mcard { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; margin-bottom: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.mcard b { font-size: 18px; letter-spacing: .08em; display: block; } .mcard span, .mcard small { color: var(--dim); font-size: 13px; letter-spacing: .06em; }
.mcard.feat { background: linear-gradient(90deg, rgba(255,138,26,.18), rgba(255,138,26,.04)); border-color: rgba(255,138,26,.4); } .mcard.feat em { color: #3df08d; font-style: normal; font-weight: 800; letter-spacing: .2em; }
.mcard.gift { background: linear-gradient(90deg, rgba(25,227,255,.14), rgba(25,227,255,.03)); border-color: rgba(25,227,255,.35); }
.mcard .ev { flex: 1; } .mbar { height: 6px; background: rgba(255,255,255,.12); margin: 6px 0 3px; } .mbar i { display: block; height: 100%; background: var(--orange); }
.mbtn { background: linear-gradient(180deg, #ffa13a, #ff7a0f); color: #1a0e02; border: 0; padding: 9px 18px; font: 800 14px var(--font); letter-spacing: .12em; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mbtn:hover:not(:disabled) { filter: brightness(1.12); } .mbtn:disabled { background: rgba(255,255,255,.08); color: var(--dim); cursor: default; } .mbtn.alt { background: rgba(61,240,141,.18); color: #3df08d; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* ---------- inventory / loadout windows ---------- */
#winBack { position: fixed; inset: 0; z-index: 34; background: rgba(4,6,10,.55); backdrop-filter: blur(3px); pointer-events: auto; }
.win { position: fixed; z-index: 36; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); max-height: 86vh; padding: 0 24px 22px; border-top: 3px solid var(--orange); clip-path: none; background: rgba(10,14,22,.96); }
.win h2 { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -24px 6px; padding: 16px 24px 12px; background: rgba(10,14,22,.98); font-size: 26px; }
.wclose { background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--dim); padding: 6px 16px; font: 800 13px var(--font); letter-spacing: .2em; }
.wclose:hover { color: #fff; background: rgba(255,59,59,.3); }
.win .skin-grid { grid-template-columns: repeat(3, 1fr); }
.win .wlist { display: grid; grid-template-columns: 1fr 1fr; }
.win .keys { grid-template-columns: repeat(3, 1fr); }
.win .row input[type=range] { max-width: 260px; }
.win h2.mt { position: static; margin: 18px 0 12px; padding: 0 0 8px; background: none; font-size: 20px; }
.sitem { text-align: center; padding: 12px 10px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sitem .art { width: 100%; height: 90px; margin-bottom: 4px; background: linear-gradient(160deg, var(--c1), var(--c2)); position: relative; } .sitem .art i { position: absolute; inset: auto 0 0 0; height: 5px; background: var(--c3); box-shadow: 0 0 14px var(--c3); }
.sitem .nm { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .sitem .tg { font-size: 11px; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; } .sitem div.own { color: #3df08d; font-weight: 800; letter-spacing: .2em; font-size: 13px; }
.mnote { margin-top: 14px; font-size: 12px; color: var(--dim); letter-spacing: .08em; }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.tier { position: relative; padding: 8px 6px 8px; text-align: center; background: rgba(255,255,255,.035); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; align-items: center; opacity: .6; }
.tier.reached { opacity: 1; border-color: rgba(255,138,26,.5); } .tier.claimed { opacity: .5; } .tier.big { background: rgba(25,227,255,.08); border-color: rgba(25,227,255,.45); }
.tier em { position: absolute; left: 6px; top: 3px; font-style: normal; font-size: 11px; color: var(--dim); font-weight: 800; } .tier .rw { padding-top: 10px; } .tier .rw b { display: block; font-size: 17px; } .tier .rw span { font-size: 10px; color: var(--dim); letter-spacing: .16em; }
.tier .mbtn { min-width: 0; width: 100%; padding: 5px 0; font-size: 12px; }
.addf { display: flex; gap: 8px; } .addf input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #fff; padding: 9px 12px; font: 600 16px var(--font); outline: none; } .addf input:focus { border-color: var(--cyan); }
.fr .av { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: 0 0 10px rgba(255,255,255,.2); }
.st.online { color: #3df08d !important; } .st.ingame { color: #ffd34d !important; } .st.offline { color: #6b7686 !important; }
.mx { background: none; border: 0; color: var(--dim); font-size: 15px; padding: 6px; } .mx:hover { color: #ff5a4a; }
.rew { font-size: 20px; letter-spacing: .16em; color: #ffd34d; margin-top: 6px; font-weight: 700; }
@media (max-width: 800px) { .mgrid { grid-template-columns: 1fr 1fr; } .tiers { grid-template-columns: repeat(3, 1fr); } }

/* ---------- glacier spin event ---------- */
.mcard.spin { align-items: center; gap: 22px; padding: 18px; background: linear-gradient(120deg, rgba(25,201,242,.18), rgba(25,201,242,.03)); border-color: rgba(25,201,242,.45); }
.spw { flex: none; }
.wheelbox { position: relative; width: 236px; height: 236px; }
.wptr { position: absolute; left: 50%; top: -6px; margin-left: -11px; border: 11px solid transparent; border-top: 22px solid #ffd34d; z-index: 3; filter: drop-shadow(0 2px 4px #000); }
#wheel { position: absolute; inset: 8px; border-radius: 50%; border: 4px solid #cfeeff; box-shadow: 0 0 24px rgba(25,201,242,.45), inset 0 0 18px rgba(0,0,0,.5); }
#wheel b { position: absolute; left: 50%; top: 50%; width: 60px; margin: -9px 0 0 -30px; text-align: center; font-size: 17px; letter-spacing: .04em; color: #fff; }
#wheel b.g { font-size: 11px; color: #04141a; letter-spacing: .08em; }
.whub { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: #0b1624; border: 3px solid #cfeeff; }
.mcard.spin .spi { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mcard.spin .spi b { font-size: 28px; letter-spacing: .14em; }
.tagev { color: #19c9f2 !important; font-weight: 800; letter-spacing: .24em; }
.spbtns { display: flex; gap: 10px; flex-wrap: wrap; } .spbtns .mbtn { padding: 12px 16px; }
.spbtns .coin { width: 14px; height: 14px; }
.sres { min-height: 22px; color: #ffd34d; font-weight: 800; letter-spacing: .1em; font-size: 15px; }
@media (max-width: 800px) { .mcard.spin { flex-direction: column; } }

/* ---------- 2x scope (rifle): lens is drawn in 3D, only the label is DOM ---------- */
#scope .x2w { display: none; }
#scope.x2 { background: none; }
#scope.x2 .sc-h, #scope.x2 .sc-v { display: none; }
#scope.x2 .x2w { display: block; position: absolute; inset: 0; }
.x2info { position: absolute; left: 50%; top: calc(50% + 41vh); transform: translateX(-50%); display: flex; align-items: baseline; gap: 1.2vh; font-weight: 800; letter-spacing: .12em; color: #fff; text-shadow: 0 0 .8vh #000; }
.x2info b { font-size: 2.6vh; color: #6fd8ff; } .x2info span { font-size: 3vh; }

/* game mode selector */
.modesel { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.modesel .mlabel { font: 800 11px var(--font); letter-spacing: .3em; color: var(--dim); text-align: center; }
.modesel .seg { display: flex; } .modesel .seg button { flex: 1; padding: 9px 6px; font-size: 13px; cursor: pointer; }
.modesel .mdesc { font: 600 11px var(--font); letter-spacing: .08em; color: var(--dim); text-align: center; min-height: 28px; }

/* ---------- suit / gun cards (operator bundles shown as portrait cards) ---------- */
.cgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.win .cgrid { grid-template-columns: repeat(4, 1fr); }
.cgrid.gunsg, .win .cgrid.gunsg { grid-template-columns: repeat(3, 1fr); }
.scard { position: relative; cursor: pointer; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; border: 2px solid rgba(255,255,255,.14);
  background: radial-gradient(ellipse at 50% 38%, rgba(170,90,255,.38), rgba(60,24,100,.55) 55%, #1b0f2e 100%), linear-gradient(180deg, #3a2160, #1a0f2c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); transition: transform .15s, border-color .15s, box-shadow .15s; }
.scard::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, transparent 6px 14px); pointer-events: none; }
.scard .pic { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55)); transition: transform .2s; }
.scard:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.4); } .scard:hover .pic { transform: scale(1.05); }
.scard.sel { border-color: #ffc83a; box-shadow: 0 0 0 1px #ffc83a, 0 0 18px rgba(255,200,58,.45), inset 0 0 22px rgba(255,200,58,.18); }
.scard .plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; text-align: center; background: linear-gradient(0deg, rgba(8,4,16,.95) 40%, transparent); }
.scard .plate b { display: block; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1; color: #fff; }
.scard .plate small { display: block; font-size: 9px; letter-spacing: .14em; color: var(--c3, #b9a6d8); text-transform: uppercase; font-weight: 700; }
.scard .bdg { position: absolute; top: 5px; left: 5px; padding: 2px 7px; font: 800 10px var(--font); letter-spacing: .12em; color: #1a0e02; background: #ffc83a; clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.scard.locked .pic { filter: brightness(.55) saturate(.6) drop-shadow(0 6px 8px rgba(0,0,0,.55)); } .scard.locked .bdg { background: #ffd34d; }
.scard.own .bdg { background: #3df08d; }
.scard.gun { aspect-ratio: 16 / 11; } .scard.gun .pic { object-fit: contain; object-position: 50% 40%; height: 78%; padding: 6px 8px 0; }
.scard.gun.ice { background: radial-gradient(ellipse at 50% 40%, rgba(60,200,255,.4), rgba(20,70,130,.55) 55%, #0a1a30 100%); }
.sitem { padding: 0; background: none; border: 0; gap: 8px; } .sitem .scard { width: 100%; cursor: default; }
.mgrid { grid-template-columns: repeat(4, 1fr); }
.tier .scard { width: 100%; margin-top: 12px; aspect-ratio: 4 / 5; cursor: default; } .tier .scard .plate small { display: none; } .tier .scard .plate b { font-size: 12px; }
.wcard { display: flex; align-items: center; gap: 10px; } .wcard .wbody { flex: 1; min-width: 0; }
.wcard .wpic { width: 96px; height: 48px; flex: none; object-fit: contain; background: linear-gradient(160deg, #3a2160, #1a0f2c); border-radius: 3px; border: 1px solid rgba(255,255,255,.12); padding: 2px; }
.win .wlist { grid-template-columns: 1fr; }
.roster .av, .fr .av { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 2px solid var(--cyan); background: #2a1a44 center top / 150% no-repeat; }
.mcard.spin .spg { width: 150px; flex: none; } .mcard.spin .spg .scard { cursor: default; }
@media (max-width: 800px) { .cgrid, .win .cgrid { grid-template-columns: repeat(2, 1fr); } .mcard.spin .spg { width: 100%; } }

.tier .rw { width: 100%; padding-top: 0; } .tier .rw .scard { margin-top: 14px; }
.wcard .wpic { width: 120px; height: 60px; }
.tier { justify-content: center; } .tier .scard { aspect-ratio: 1 / 1.05; }

/* ---------- online ---------- */
#olBox { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.olnote, .olinv { background: rgba(10,14,22,.95); border: 1px solid var(--orange); padding: 10px 16px; font-weight: 700; letter-spacing: .08em; box-shadow: 0 6px 30px rgba(0,0,0,.5); }
.olinv { display: flex; align-items: center; gap: 12px; } .olinv b { color: var(--orange); }
.pcode { font-size: 34px !important; letter-spacing: .3em !important; color: #ffd34d; }