:root {
  --green: #8cff3a;
  --green-d: #3b8f17;
  --orange: #ff8a1e;
  --bone: #e9e2cc;
  --steel: #1b211e;
  --steel2: #2a322d;
  --ink: #050806;
  --disp: 'Big Shoulders Stencil', 'Barlow Semi Condensed', sans-serif;
  --text: 'Barlow Semi Condensed', system-ui, sans-serif;
  --num: 'Martian Mono', ui-monospace, monospace;
  --u: clamp(0.62px, min(100vw / 1280, 100vh / 720), 1.25px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); overflow: hidden; color: var(--bone); font-family: var(--text); user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; }
[hidden] { display: none !important; }
button { font-family: var(--text); cursor: pointer; }

/* ---------- vignette + damage */
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%); }
#hurt { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(140,255,58,.25) 72%, rgba(255,110,20,.6) 100%); transition: opacity .5s ease-out; }
#hurt.on { opacity: 1; transition: none; }

/* ---------- name tags */
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; transform: translate(-50%, -100%); font: 600 max(11px, calc(12 * var(--u))) var(--text); letter-spacing: .04em; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,.9); padding: 1px 6px; }
.tag.me::before, .tag.me::after { content: ''; position: absolute; top: 0; bottom: 0; width: 5px; border: 1.5px solid currentColor; }
.tag.me::before { left: -3px; border-right: 0; }
.tag.me::after { right: -3px; border-left: 0; }
.tag .st { display: block; text-align: center; font: 500 calc(10 * var(--u)) var(--num); color: var(--orange); }
#prompt { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); font: 700 max(14px, calc(17 * var(--u))) var(--text); letter-spacing: .12em; color: var(--green); background: rgba(5,8,6,.75); border: 1px solid var(--green-d); padding: 6px 14px; pointer-events: none; }

/* ---------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
.hud-tl { position: absolute; left: calc(10px + env(safe-area-inset-left)); top: 10px; width: calc(330 * var(--u)); }
.hp-plate { position: relative; }
.hp-plate img, .name-plate img, .timer-plate img, .hud-br > img, .banner > img { display: block; width: 100%; height: auto; }
.bar { position: absolute; overflow: hidden; background: #0b100d; border-radius: 2px; }
.bar.hp { left: 22.1%; top: 20.1%; width: 65.9%; height: 26.8%; }
.bar.sh { left: 22.1%; top: 55.7%; width: 61.9%; height: 23.5%; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transition: width .18s; }
.bar.hp i { background: linear-gradient(#c6ff6a, #6fdc22 45%, #3f9a12); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.bar.hp.low i { background: linear-gradient(#ffc06a, #ff8a1e 45%, #b84c08); }
.bar.sh i { background: linear-gradient(#8fd2ff, #2f8ef0 45%, #1a55b8); box-shadow: inset 0 -2px 0 rgba(0,0,0,.3); }
.bar.sh::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(5,12,30,.75) calc(10% - 2px) 10%), repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,.12) 6px 9px); }
.bar b { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 400 calc(12 * var(--u)) var(--num); color: #fff; text-shadow: 0 1px 2px #000; z-index: 1; }
.hp-plate.beat { animation: beat 0.9s infinite; }
@keyframes beat { 0%, 100% { filter: none; } 12% { filter: brightness(1.5) drop-shadow(0 0 6px #ff8a1e); } 24% { filter: none; } 36% { filter: brightness(1.3); } }
.name-plate { position: relative; width: 62%; margin-top: -4px; }
.name-plate span { position: absolute; left: 30%; right: 16%; top: 50%; transform: translateY(-50%); font: 700 calc(17 * var(--u)) var(--text); letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hud-tc { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: calc(230 * var(--u)); text-align: center; }
.timer-plate { position: relative; }
.timer-text { position: absolute; left: 35%; right: 6%; top: 18%; bottom: 18%; display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1; }
.timer-text b { font: 400 calc(25 * var(--u)) var(--num); color: #fff; letter-spacing: .02em; }
.timer-text span { font: 600 calc(12 * var(--u)) var(--text); letter-spacing: .18em; color: var(--green); margin-top: 3px; }
.sub-plate { display: inline-flex; gap: 6px; align-items: center; margin-top: 2px; padding: 2px 10px; background: rgba(10,14,12,.78); border: 1px solid #2c3a2f; border-top-color: #4b5a4e; font: 400 max(12px, calc(12 * var(--u))) var(--num); color: var(--bone); }
.sub-plate img { height: calc(12 * var(--u)); }
.sub-plate .sep { color: #44524a; }

.hud-tr { position: absolute; right: calc(10px + env(safe-area-inset-right)); top: 10px; width: calc(290 * var(--u)); display: flex; flex-direction: column; gap: 3px; }
.feed-row { position: relative; animation: feedIn .25s ease-out; transition: opacity .6s, transform .6s; }
.feed-row img.bg { display: block; width: 100%; }
.feed-row .fx { position: absolute; left: 24%; right: 15%; top: 22%; bottom: 22%; display: flex; align-items: center; gap: 6px; font: 600 calc(12 * var(--u)) var(--text); white-space: nowrap; overflow: hidden; justify-content: space-between; }
.feed-row .fx img { height: 80%; filter: drop-shadow(0 0 2px rgba(140,255,58,.6)); }
.feed-row .fx .z { color: var(--orange); }
.feed-row.out { opacity: 0; transform: translateX(30px); }
@keyframes feedIn { from { transform: translateX(110%); } to { transform: none; } }

.hud-br { position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); width: calc(250 * var(--u)); }
.ammo-text { position: absolute; left: 36%; right: 14%; top: 16%; bottom: 18%; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ammo-text img { height: 46%; margin-right: auto; filter: drop-shadow(0 0 3px rgba(140,255,58,.5)); }
.ammo-text b { font: 400 calc(30 * var(--u)) var(--num); color: #fff; line-height: 1; }
.ammo-text b.empty { color: var(--orange); }
.ammo-text span { font: 400 calc(13 * var(--u)) var(--num); color: #a9b3a5; align-self: flex-end; padding-bottom: 8%; }
.rl-arc { position: absolute; left: 5.5%; top: 14%; width: 22%; transform: rotate(-90deg); opacity: 0; transition: opacity .15s; }
.rl-arc.on { opacity: 1; }
.rl-arc circle { fill: none; stroke-width: 3; }
.rl-arc .track { stroke: rgba(0,0,0,.6); }
.rl-arc .fill { stroke: var(--green); stroke-dasharray: 100.5; stroke-dashoffset: 100.5; filter: drop-shadow(0 0 3px var(--green)); }
.wname { position: absolute; right: 10%; top: -2px; transform: translateY(-100%); font: 700 calc(11 * var(--u)) var(--text); letter-spacing: .2em; color: var(--green); text-shadow: 0 1px 2px #000; }

.hud-bl { position: absolute; left: calc(10px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 6px; pointer-events: auto; }
.mini { width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 34px; min-height: 34px; border: 0; background: url(../assets/ui/menu_buttons_04_small_square_button.webp) center / 100% 100%; color: var(--bone); font: 700 calc(16 * var(--u)) var(--text); display: grid; place-items: center; padding: 0; }
.mini img { width: 58%; }
.mini:hover { filter: brightness(1.3) drop-shadow(0 0 4px var(--green)); }
.mini:active { transform: translateY(2px); }

.banner { position: absolute; left: 50%; top: 24%; width: calc(380 * var(--u)); transform: translateX(-50%); animation: bannerIn .45s cubic-bezier(.2,.9,.3,1.2); }
.banner > div { position: absolute; inset: 14% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: .95; }
.banner b { font: 800 calc(40 * var(--u)) var(--disp); letter-spacing: .14em; color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 16px rgba(140,255,58,.45); }
.banner span { font: 700 calc(13 * var(--u)) var(--text); letter-spacing: .3em; color: var(--green); }
.banner.warn b { color: var(--orange); }
@keyframes bannerIn { from { transform: translateX(-50%) scaleX(.2); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.hint { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); font: 500 calc(13 * var(--u)) var(--text); letter-spacing: .08em; color: #b9c4b2; text-shadow: 0 1px 2px #000; white-space: nowrap; transition: opacity 1s; }

/* ---------- touch */
#touch { position: fixed; inset: 0; pointer-events: none; }
.stick { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); left: calc(20px + env(safe-area-inset-left)); width: min(34vmin, 170px); height: min(34vmin, 170px); border-radius: 50%; border: 2px solid rgba(140,255,58,.35); background: radial-gradient(circle, rgba(20,30,22,.45), rgba(5,8,6,.25)); pointer-events: auto; touch-action: none; opacity: .6; }
.stick:active { opacity: 1; }
.stick.aim { left: auto; right: calc(14px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5c6b5f, #1d241f); border: 2px solid var(--green-d); box-shadow: 0 0 10px rgba(140,255,58,.3); }
.stick span { position: absolute; left: 0; right: 0; top: -4px; transform: translateY(-100%); text-align: center; font: 700 10px var(--text); letter-spacing: .2em; color: rgba(233,226,204,.55); }
.tbtn { position: absolute; pointer-events: auto; touch-action: none; width: var(--tb); height: var(--tb); border-radius: 50%; border: 2px solid rgba(140,255,58,.45); background: radial-gradient(circle at 40% 35%, rgba(70,84,74,.85), rgba(16,20,18,.85)); color: var(--bone); font: 700 min(2.8vmin, 13px) var(--text); letter-spacing: .06em; padding: 0; }
.tbtn.on { background: radial-gradient(circle, rgba(140,255,58,.55), rgba(30,60,20,.8)); }
#touch { --st: min(32vmin, 160px); --tb: min(17vmin, 74px); }
.stick { width: var(--st); height: var(--st); }
#tJump { right: calc(var(--st) + 26px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); width: calc(var(--tb) * 1.15); height: calc(var(--tb) * 1.15); }
#tReload { right: calc(14px + env(safe-area-inset-right)); bottom: calc(var(--st) + 30px + env(safe-area-inset-bottom)); }
#tSwap { right: calc(var(--tb) + 26px + env(safe-area-inset-right)); bottom: calc(var(--st) + 30px + env(safe-area-inset-bottom)); }
#tUse { right: calc(14px + env(safe-area-inset-right)); bottom: calc(var(--st) + var(--tb) + 40px + env(safe-area-inset-bottom)); }
body.touch .hud-br { left: calc(10px + env(safe-area-inset-left)); right: auto; bottom: auto; top: calc(10px + 212 * var(--u)); width: calc(190 * var(--u)); }
body.touch .wname { display: none; }
body.touch .hud-bl { bottom: auto; top: calc(14px + 212 * var(--u) + 190 * var(--u) * 0.4 + 14px); }
@media (max-width: 700px) {
  .hud-tc { left: auto; right: calc(8px + env(safe-area-inset-right)); transform: none; width: calc(190 * var(--u)); text-align: right; }
  .hud-tr { top: calc(14px + 90 * var(--u)); width: calc(240 * var(--u)); }
}
body.touch .hint { display: none; }

/* ---------- menus */
#menu { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; overflow-y: auto; overflow-x: hidden; padding: 2vh 12px 16px; }
.menu-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #050806; }
.menu-bg .far { position: absolute; inset: -6% -20%; background: url(../assets/maps/shaft_far_wall.webp) center / cover; filter: brightness(.55) saturate(1.1); animation: drift 60s ease-in-out infinite alternate; }
.menu-bg .haze { position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(80,200,40,.18) 85%, rgba(120,255,60,.25)), radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(0,0,0,.75)); animation: hazeP 7s ease-in-out infinite alternate; }
.menu-bg .dust { position: absolute; inset: -50%; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(160,255,90,.7), transparent), radial-gradient(1px 1px at 70% 60%, rgba(160,255,90,.6), transparent), radial-gradient(1.2px 1.2px at 40% 80%, rgba(200,255,140,.5), transparent), radial-gradient(1px 1px at 85% 15%, rgba(160,255,90,.6), transparent); background-size: 230px 190px; animation: dust 40s linear infinite; opacity: .8; }
@keyframes drift { from { transform: translateX(-5%) scale(1.05); } to { transform: translateX(5%) scale(1.1); } }
@keyframes hazeP { from { opacity: .7; } to { opacity: 1; } }
@keyframes dust { from { transform: translate(0, 0); } to { transform: translate(230px, -190px); } }
.title { width: min(560px, 82vw, 62vh); height: auto; margin: 1vh 0 1.5vh; filter: drop-shadow(0 8px 20px rgba(0,0,0,.8)); flex: none; }
.screen { width: min(440px, 94vw); display: flex; flex-direction: column; align-items: stretch; gap: 6px; animation: bulkL .38s cubic-bezier(.2,.9,.25,1); }
.screen.alt { animation-name: bulkR; }
@keyframes bulkL { from { transform: translateX(-60vw); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bulkR { from { transform: translateX(60vw); opacity: 0; } to { transform: none; opacity: 1; } }
.screen h2, .panel h2 { margin: 4px 0 8px; text-align: center; font: 800 clamp(26px, 4.4vh, 40px) var(--disp); letter-spacing: .16em; color: var(--bone); text-shadow: 0 2px 0 #000, 0 0 18px rgba(140,255,58,.35); }
.lbl { font: 700 12px var(--text); letter-spacing: .3em; color: var(--green); text-align: center; }
.plate { position: relative; border: 0; height: clamp(44px, 7.4vh, 64px); background: url(../assets/ui/menu_buttons_01_wide_button_normal.webp) center / 100% 100% no-repeat; color: var(--bone); font: 700 clamp(15px, 2.6vh, 21px) var(--text); letter-spacing: .16em; text-shadow: 0 2px 0 #000; padding: 0 20px; transition: color .1s; }
.plate small { font-size: .6em; letter-spacing: .2em; color: var(--green); margin-left: 6px; }
.plate:hover, .plate:focus-visible { background-image: url(../assets/ui/menu_buttons_02_wide_button_hover_lit_green.webp); color: #fff; outline: none; }
.plate:active { background-image: url(../assets/ui/menu_buttons_03_wide_button_pressed.webp); transform: translateY(2px); }
.plate:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.plate.sm { height: 42px; font-size: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.row2 .plate { font-size: clamp(13px, 2.2vh, 17px); letter-spacing: .1em; padding: 0 8px; }
.input-plate, .code-plate { display: block; background: url(../assets/ui/menu_buttons_05_text_input_plate.webp) center / 100% 100% no-repeat; height: clamp(46px, 7.4vh, 62px); padding: 0 24px; }
.code-plate { background-image: url(../assets/ui/menu_buttons_06_room_code_plate.webp); height: 96px; }
.input-plate input, .code-plate input { width: 100%; height: 100%; background: transparent; border: 0; outline: none; color: #fff; text-align: center; font: 700 clamp(17px, 2.8vh, 22px) var(--text); letter-spacing: .14em; text-transform: uppercase; }
.code-plate input { font: 400 38px var(--num); letter-spacing: .25em; }
input::placeholder { color: #5f6b62; }
.mode { text-align: center; font: 500 12px var(--text); letter-spacing: .18em; color: #8e998c; margin-top: 4px; }
.mode b { color: var(--green); }
.status { min-height: 1.2em; text-align: center; font: 600 14px var(--text); letter-spacing: .06em; color: var(--orange); }
.status.big { font-size: 18px; color: var(--bone); }
.loading { position: fixed; left: 50%; bottom: 8vh; transform: translateX(-50%); text-align: center; font: 600 12px var(--text); letter-spacing: .3em; color: var(--green); }
.lbar { width: 240px; height: 6px; background: #121a14; border: 1px solid #2d3d30; margin-bottom: 8px; }
.lbar i { display: block; height: 100%; width: 0; background: var(--green); box-shadow: 0 0 8px var(--green); }
.controls-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font: 500 15px var(--text); background: rgba(8,12,10,.82); border: 1px solid #2c3a2f; padding: 12px 16px; margin-bottom: 6px; }
.controls-grid kbd { font: 400 12px var(--num); color: var(--green); background: #101612; border: 1px solid #2f4033; padding: 2px 6px; white-space: nowrap; }
.controls-grid .k { text-align: right; }
.set-head { font: 700 12px var(--text); letter-spacing: .3em; color: var(--green); margin: 6px 0 -2px; opacity: .85; }
.set-row b { color: var(--green); margin-left: 8px; }
.set-row { display: flex; justify-content: space-between; align-items: center; background: rgba(8,12,10,.82); border: 1px solid #2c3a2f; padding: 8px 14px; font: 700 15px var(--text); letter-spacing: .14em; }
.toggle { min-width: 84px; height: 34px; border: 1px solid var(--green-d); background: #101612; color: var(--green); font: 400 13px var(--num); }
.set-row input[type=range] { accent-color: var(--green); width: 50%; }

/* ---------- panels */
.panel { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2,4,3,.6); backdrop-filter: blur(2px); z-index: 5; overflow-y: auto; padding: 10px; }
.panel-in { width: min(440px, 94vw); display: flex; flex-direction: column; gap: 6px; padding: 16px; background: linear-gradient(#1c2320, #111613); border: 2px solid #3a4a3d; box-shadow: inset 0 0 0 1px #0a0d0b, inset 0 0 0 3px rgba(140,255,58,.25), 0 20px 50px rgba(0,0,0,.7); animation: bulkL .35s cubic-bezier(.2,.9,.25,1); position: relative; }
.panel-in.wide { width: min(560px, 96vw); }
.panel-in::before, .panel-in::after { content: ''; position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a968c, #2a322d); }
.panel-in::before { left: 6px; } .panel-in::after { right: 6px; }
.goal { margin: 0 0 4px; font: 500 15px/1.35 var(--text); color: #c8d0c0; text-align: center; }
.room-code { position: relative; width: 80%; margin: 2px auto 6px; }
.room-code img { display: block; width: 100%; }
.room-code b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(22px, 5vw, 36px) var(--num); letter-spacing: .2em; color: #fff; text-shadow: 0 0 10px rgba(140,255,58,.6); }
.room-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lobby-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.lrow { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: linear-gradient(90deg, var(--c) 0 6px, rgba(12,16,14,.95) 6px); border: 1px solid #2c3a2f; font: 700 16px var(--text); letter-spacing: .06em; }
.lrow .dot { width: 12px; height: 12px; background: var(--c); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.lrow .nm { color: var(--c); flex: 1; }
.lrow .info { font: 400 12px var(--num); color: #a9b3a5; }
.over-title { color: var(--orange) !important; font-size: clamp(36px, 7vh, 60px) !important; }
.scores { width: 100%; border-collapse: collapse; font: 600 15px var(--text); }
.scores th { font: 700 11px var(--text); letter-spacing: .2em; color: var(--green); text-align: left; padding: 4px 6px; border-bottom: 1px solid #2c3a2f; }
.scores td { padding: 5px 6px; border-bottom: 1px solid #1d2620; }
.scores td.n { font: 400 13px var(--num); text-align: right; }
.scores th.n { text-align: right; }
.board { font: 500 13px var(--text); color: #a9b3a5; }
.board a { color: var(--bone); }
.board .row { display: flex; justify-content: space-between; padding: 2px 6px; }
.board .row.mine { color: var(--green); }

/* ---------- weapons, grenades, perks */
.slots { position: absolute; right: 8%; top: -2px; transform: translateY(-210%); display: flex; gap: 3px; }
.slots i { font: 400 calc(9 * var(--u)) var(--num); font-style: normal; color: #6c7a6e; background: rgba(8,12,10,.8); border: 1px solid #2c3a2f; padding: 1px 4px; }
.slots i.own { color: var(--bone); border-color: #4b5a4e; }
.slots i.on { color: #050806; background: var(--green); border-color: var(--green); }
.gren { position: absolute; left: 4%; top: -2px; transform: translateY(-100%); display: flex; align-items: center; gap: 3px; font: 400 calc(13 * var(--u)) var(--num); color: var(--bone); text-shadow: 0 1px 2px #000; }
.gren img { height: calc(20 * var(--u)); }
img.wpn { filter: brightness(0) invert(.92) drop-shadow(0 0 3px rgba(140,255,58,.7)); }
.perk-row { display: flex; gap: 3px; margin-top: 3px; flex-wrap: wrap; width: 70%; }
.perk-row img { width: calc(24 * var(--u)); height: auto; filter: drop-shadow(0 1px 2px #000); }
.perk-offer { position: absolute; left: 50%; bottom: calc(60 * var(--u) + 14px + env(safe-area-inset-bottom)); transform: translateX(-50%); pointer-events: auto; text-align: center; animation: bulkR .35s cubic-bezier(.2,.9,.25,1); }
.po-title { font: 800 calc(18 * var(--u)) var(--disp); letter-spacing: .2em; color: var(--green); text-shadow: 0 2px 0 #000, 0 0 10px rgba(140,255,58,.5); margin-bottom: 4px; }
.po-cards { display: flex; gap: 8px; justify-content: center; }
.po-card { width: calc(150 * var(--u)); min-width: 96px; padding: 6px 6px 8px; border: 1px solid #3a4a3d; background: linear-gradient(#1c2320, #0e1311); box-shadow: inset 0 0 0 2px rgba(140,255,58,.18), 0 6px 18px rgba(0,0,0,.6); color: var(--bone); display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--text); }
.po-card:hover, .po-card:focus-visible { box-shadow: inset 0 0 0 2px var(--green), 0 0 14px rgba(140,255,58,.5); outline: none; }
.po-card:active { transform: translateY(2px); }
.po-card img { width: 46%; }
.po-card b { font: 700 calc(14 * var(--u)) var(--text); letter-spacing: .08em; min-height: 1em; }
.po-card span { font: 500 calc(12 * var(--u)) var(--text); color: #b9c4b2; line-height: 1.15; }
.po-card kbd { font: 400 calc(10 * var(--u)) var(--num); color: var(--green); border: 1px solid #2f4033; padding: 0 5px; }
body.touch .po-card kbd { display: none; }
body.touch .perk-offer { bottom: auto; top: 30%; }
#tNade { right: calc(var(--tb) + 26px + env(safe-area-inset-right)); bottom: calc(var(--st) + var(--tb) + 40px + env(safe-area-inset-bottom)); }
/* ---------- server list */
.screen.wide { width: min(620px, 96vw); }
.srv-list { display: flex; flex-direction: column; gap: 4px; max-height: 42vh; overflow-y: auto; background: rgba(8,12,10,.82); border: 1px solid #2c3a2f; padding: 6px; }
.srv { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(90deg, rgba(140,255,58,.14) 0 4px, rgba(16,22,18,.95) 4px); border: 1px solid #2c3a2f; }
.srv .nm { font: 700 16px var(--text); letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv .sub { font: 500 12px var(--text); color: #9aa595; letter-spacing: .06em; }
.srv .cnt { font: 400 13px var(--num); color: var(--bone); white-space: nowrap; }
.srv .cnt.full { color: var(--orange); }
.srv button { height: 36px; padding: 0 14px; border: 1px solid var(--green-d); background: #101612; color: var(--green); font: 700 14px var(--text); letter-spacing: .12em; }
.srv button:hover { background: #1a2a18; color: #fff; }
.srv button:disabled { opacity: .4; cursor: default; }
.toggle.wide { min-width: 120px; }

/* ---------- credits, machine perks, squad, boss */
.credits { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 4px; padding: 2px 10px; background: rgba(8,12,10,.82); border: 1px solid #4b5a2e; border-left: 4px solid #ffd56a; }
.credits b { font: 400 max(15px, calc(18 * var(--u))) var(--num); color: #ffd56a; }
.credits span { font: 700 calc(10 * var(--u)) var(--text); letter-spacing: .2em; color: #b9a46a; }
.credits.flash { animation: credflash .5s; }
@keyframes credflash { 0% { background: rgba(255,80,40,.6); } 100% { background: rgba(8,12,10,.82); } }
.mperks { display: flex; gap: 3px; margin-top: 4px; }
.mperks i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; border: 1px dashed #3a4a3d; background: rgba(8,12,10,.6) center / 100% 100% no-repeat; }
.mperks i.on { border: 0; filter: drop-shadow(0 0 4px rgba(255,255,255,.35)); }
.squad { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; width: 70%; }
.squad .sq { display: grid; grid-template-columns: 8px 1fr auto; gap: 5px; align-items: center; padding: 2px 6px; background: rgba(8,12,10,.75); border: 1px solid #23302a; font: 600 calc(11 * var(--u)) var(--text); }
.squad .sq .c { width: 8px; height: 8px; background: var(--c); }
.squad .sq .hb { grid-column: 2 / 4; height: 3px; background: #1a221d; }
.squad .sq .hb i { display: block; height: 100%; background: var(--green); }
.squad .sq .s { font: 400 calc(9 * var(--u)) var(--num); color: #a9b3a5; }
.squad .sq.down .s { color: var(--orange); }
.modelbl { margin-top: 2px; font: 700 max(10px, calc(10 * var(--u))) var(--text); letter-spacing: .22em; color: #9aa595; text-shadow: 0 1px 2px #000; }
.bossbar { margin: 4px auto 0; width: calc(420 * var(--u)); max-width: 90vw; }
.bb-name { display: flex; justify-content: space-between; font: 800 calc(16 * var(--u)) var(--disp); letter-spacing: .14em; color: #ff8a6a; text-shadow: 0 2px 0 #000; }
.bb-name span { font: 400 calc(10 * var(--u)) var(--num); color: #ffd0c0; align-self: center; }
.bb-bar { height: calc(10 * var(--u)); min-height: 6px; background: #1a0a08; border: 1px solid #5a2a20; box-shadow: 0 0 10px rgba(255,60,30,.4); }
.bb-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff8a5a, #c8301a); transition: width .2s; }
.denied { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); font: 700 calc(16 * var(--u)) var(--text); letter-spacing: .1em; color: #ff6a4a; background: rgba(20,4,2,.8); border: 1px solid #7a2a1a; padding: 6px 14px; pointer-events: none; animation: shakeX .3s; }
@keyframes shakeX { 0%,100% { transform: translateX(-50%); } 25% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 6px)); } }
.spectate { position: fixed; left: 50%; top: 32%; transform: translateX(-50%); font: 700 calc(14 * var(--u)) var(--text); letter-spacing: .2em; color: #c8d0c0; background: rgba(5,8,6,.7); padding: 4px 12px; pointer-events: none; }
.toast { position: fixed; right: 14px; bottom: calc(110 * var(--u) + 30px); padding: 8px 14px; background: linear-gradient(90deg, rgba(60,10,6,.92), rgba(12,8,8,.92)); border: 1px solid #ff6a3a; font: 700 14px var(--text); letter-spacing: .1em; color: #ffe0c8; pointer-events: none; animation: bulkR .35s; max-width: 70vw; }
.lobbyp, .votep { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 94vw); padding: 14px; background: linear-gradient(#1c2320, #111613); border: 2px solid #3a4a3d; box-shadow: inset 0 0 0 3px rgba(140,255,58,.2), 0 20px 50px rgba(0,0,0,.7); pointer-events: auto; display: flex; flex-direction: column; gap: 8px; z-index: 4; }
.lp-logo { width: 60%; margin: 0 auto; }
.lp-info { display: flex; justify-content: center; align-items: center; gap: 8px; font: 700 14px var(--text); letter-spacing: .12em; }
.lp-list { display: flex; flex-direction: column; gap: 3px; }
.lp-note { text-align: center; font: 500 13px var(--text); color: #a9b3a5; }
.votep { top: auto; bottom: 14%; transform: translateX(-50%); text-align: center; }
.votep b { font: 800 24px var(--disp); letter-spacing: .16em; color: var(--green); }
.votep span { font: 500 13px var(--text); color: #c8d0c0; }
#tBuy { right: calc(var(--tb) * 2 + 38px + env(safe-area-inset-right)); bottom: calc(var(--st) + 30px + env(safe-area-inset-bottom)); }
/* ---------- horde + arsenal screens */
.plate.hot { color: #e8ffd0; }
.plate.red { color: #ffd8c8; }
.sublogo { width: min(300px, 60vw); margin: 0 auto; filter: drop-shadow(0 6px 14px #000); }
.map-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; }
.mp-card { position: relative; border: 2px solid #2c3a2f; background: #0a0e0c; padding: 0; color: var(--bone); text-align: left; overflow: hidden; }
.mp-card img { display: block; width: 100%; height: 64px; object-fit: cover; filter: brightness(.75); }
.mp-card b { display: block; padding: 4px 6px 0; font: 700 12px var(--text); letter-spacing: .08em; }
.mp-card span { display: block; padding: 0 6px 5px; font: 500 10px var(--text); color: #9aa595; }
.mp-card.on { border-color: var(--green); box-shadow: 0 0 12px rgba(140,255,58,.4); }
.mp-card.locked img { filter: grayscale(1) brightness(.4); }
.screen.arsenal { width: min(980px, 98vw); }
.ar-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ar-logo { width: min(300px, 50vw); filter: drop-shadow(0 6px 14px #000); }
.ar-status { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; flex: 1; min-width: 260px; }
.chip { font: 400 12px var(--num); padding: 6px 10px; background: rgba(8,12,10,.85); border: 1px solid #2c3a2f; color: var(--bone); }
.chip.ok { border-color: var(--green-d); color: var(--green); }
.chip.no { border-color: #7a2a1a; color: #ff8a6a; }
.ar-level { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: rgba(8,12,10,.85); border: 1px solid #2c3a2f; padding: 6px 10px; }
.ar-level b { font: 800 20px var(--disp); letter-spacing: .14em; color: #ffd56a; }
.ar-level span { font: 400 11px var(--num); color: #a9b3a5; }
.xpbar { height: 8px; background: #1a1a10; border: 1px solid #4a4a2a; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb04a, #ffd56a); width: 0; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs button { flex: 1; min-width: 90px; height: 36px; border: 1px solid #2c3a2f; background: #101612; color: #a9b3a5; font: 700 13px var(--text); letter-spacing: .14em; }
.tabs button.on { color: #050806; background: var(--green); border-color: var(--green); }
.ar-body { max-height: 52vh; overflow-y: auto; background: rgba(8,12,10,.82); border: 1px solid #2c3a2f; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.ar-body.list { display: flex; flex-direction: column; }
.wcard { background: linear-gradient(#161c19, #0c100e); border: 1px solid #2c3a2f; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.wcard.locked { opacity: .75; }
.wcard .pic { height: 74px; display: grid; place-items: center; background: radial-gradient(ellipse, rgba(255,120,60,.12), transparent 70%); }
.wcard .pic img { max-width: 94%; max-height: 70px; }
.wcard.locked .pic img { filter: brightness(.35) saturate(.3); }
.wcard h4 { margin: 0; font: 800 16px var(--disp); letter-spacing: .12em; color: var(--bone); }
.wcard .cls { font: 600 10px var(--text); letter-spacing: .2em; color: #ff8a6a; }
.wcard .stat { display: grid; grid-template-columns: 52px 1fr; gap: 5px; align-items: center; font: 400 9px var(--num); color: #9aa595; }
.wcard .stat i { display: block; height: 4px; background: #1a221d; }
.wcard .stat i b { display: block; height: 100%; background: #ffb04a; }
.wcard .say { font: 500 12px/1.25 var(--text); color: #c8d0c0; }
.wcard .lock { font: 600 11px var(--text); color: #ff8a6a; }
.wcard .ok { font: 700 11px var(--text); letter-spacing: .12em; color: var(--green); }
.wcard .prog { height: 4px; background: #2a1a10; } .wcard .prog i { display: block; height: 100%; background: #ff8a4a; }
.wcard button { height: 30px; border: 1px solid var(--green-d); background: #101612; color: var(--green); font: 700 12px var(--text); letter-spacing: .12em; }
.wcard button.on { background: var(--green); color: #050806; }
.wcard canvas { width: 100%; height: 70px; background: #050806; }
.lvrow { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid #23302a; background: rgba(12,16,14,.9); font: 600 13px var(--text); }
.lvrow.got { border-color: #4b5a2e; } .lvrow .lv { font: 400 12px var(--num); color: #ffd56a; }
.lvrow button { height: 28px; padding: 0 10px; border: 1px solid var(--green-d); background: #101612; color: var(--green); font: 700 11px var(--text); }
.lvrow button.on { background: var(--green); color: #050806; }
.lvrow .sw { width: 22px; height: 22px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; border: 1px solid #000; }

/* ---------- career */
.career-mini { text-align: center; font: 400 11px var(--num); color: #ffd56a; letter-spacing: .06em; min-height: 1em; }
.cr-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cr-emblem { position: relative; width: 130px; flex: none; }
.cr-emblem img { width: 100%; filter: drop-shadow(0 6px 14px #000); }
.cr-emblem b { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); font: 400 16px var(--num); color: #fff; background: rgba(0,0,0,.75); padding: 1px 8px; border: 1px solid #ffd56a; }
.cr-info { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.cr-rank { font: 800 clamp(24px, 4vh, 36px) var(--disp); letter-spacing: .14em; color: #ffd56a; text-shadow: 0 2px 0 #000; }
.cr-stars { font: 400 18px var(--num); letter-spacing: .1em; color: #5a5040; }
.cr-stars .on { color: #ffd56a; text-shadow: 0 0 8px rgba(255,213,106,.6); }
.cr-ranks { display: flex; flex-wrap: wrap; gap: 4px; }
.cr-ranks span { font: 600 11px var(--text); letter-spacing: .08em; padding: 3px 8px; border: 1px solid #2c3a2f; background: rgba(8,12,10,.85); color: #7a857a; }
.cr-ranks span.got { color: #ffd56a; border-color: #6a5a2e; }
.cr-ranks span.now { color: #050806; background: #ffd56a; }
.plate.gold { color: #fff0c0; text-shadow: 0 0 10px rgba(255,213,106,.7), 0 2px 0 #000; }
.tag .rk { display: block; text-align: center; font: 600 max(10px, calc(10 * var(--u))) var(--text); letter-spacing: .12em; color: #ffd56a; opacity: .9; }
.account { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 10px; background: rgba(8,12,10,.82); border: 1px solid #2c3a2f; text-align: center; }
.account b { font: 700 14px var(--text); letter-spacing: .14em; color: var(--green); }
.account.guest b { color: #ffb04a; }
.account span { font: 500 12px var(--text); color: #b9c4b2; }

/* ---- PvP */
.pvp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pvp-modes button { background: rgba(8,12,10,.85); border: 1px solid #2c3a2f; color: #dfe6d8; padding: 8px; text-align: left; cursor: pointer; font: 500 11px var(--text); }
.pvp-modes button b { display: block; font: 700 14px var(--text); letter-spacing: .12em; color: #ff8a6a; margin-bottom: 3px; }
.pvp-modes button.on { border-color: #ff6a4a; box-shadow: 0 0 0 1px #ff6a4a inset, 0 0 14px rgba(255,90,60,.35); }
.mvote { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(880px, 96vw); max-height: 92vh; overflow: auto; background: rgba(6,9,8,.94); border: 1px solid #3a4a3d; padding: 10px 12px; z-index: 30; pointer-events: auto; display: flex; flex-direction: column; gap: 8px; }
.mv-head { display: flex; align-items: baseline; gap: 12px; }
.mv-head b { font: 700 20px var(--text); letter-spacing: .2em; color: #ff8a6a; }
.mv-head span { font: 600 12px var(--text); letter-spacing: .14em; color: #b9c4b2; }
.mv-head .mv-time { margin-left: auto; font: 700 22px var(--text); color: #ffd56a; }
.mv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mv-card { position: relative; background: #0b100d; border: 1px solid #2c3a2f; padding: 0 0 4px; cursor: pointer; color: #dfe6d8; text-align: left; font: 500 10px var(--text); }
.mv-card img { width: 100%; height: 64px; object-fit: cover; display: block; opacity: .85; }
.mv-card b { display: block; font: 700 12px var(--text); letter-spacing: .1em; padding: 3px 5px 0; }
.mv-card span { display: block; padding: 0 5px; color: #9aa596; }
.mv-card i { position: absolute; top: 4px; right: 4px; background: #000c; color: #ffd56a; font: 700 12px var(--text); font-style: normal; padding: 1px 6px; }
.mv-card.mine { border-color: #ffd56a; box-shadow: 0 0 0 1px #ffd56a inset; }
.mv-card.forced { border-color: #ff6a4a; }
.mv-prev { display: grid; grid-template-columns: 180px 1fr 230px; gap: 10px; align-items: center; }
.mv-prev img { width: 180px; height: 96px; object-fit: cover; }
.mv-prev canvas { width: 230px; height: 106px; border: 1px solid #2c3a2f; }
.mv-txt { display: flex; flex-direction: column; gap: 3px; font: 500 12px var(--text); color: #b9c4b2; }
.mv-txt b { font: 700 16px var(--text); color: #fff; letter-spacing: .14em; }
.mv-note { font: 600 12px var(--text); color: #dfe6d8; letter-spacing: .08em; }
@media (max-width: 700px) { .mv-prev { grid-template-columns: 1fr; } .mv-prev img, .mv-prev canvas { width: 100%; } .pvp-modes { grid-template-columns: 1fr; } }
.scores td.tm1 { color: #ff6a5a; } .scores td.tm2 { color: #5ab0ff; }

/* the account line: name and note on the left, SIGN OUT beside them, so it never adds a row */
.account { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; text-align: left; }
.account b, .account span { grid-column: 1; }
.account #bSignOut { grid-column: 2; grid-row: 1 / span 2; height: 36px; font-size: 13px; padding: 0 14px; }

#scrPvp h2 { margin: 0 0 2px; font-size: clamp(20px, 3.4vh, 32px); }
#scrPvp { gap: 5px; }
.pvp-maps { grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pvp-maps .mp-card img { height: 34px; }
.pvp-maps .mp-card b { font-size: 10px; padding: 2px 4px 0; }
.pvp-maps .mp-card span { font-size: 9px; padding: 0 4px 3px; }
.pvp-modes button { padding: 6px 8px; }
@media (max-height: 500px) { .pvp-modes button { font-size: 10px; } .pvp-maps .mp-card img { height: 24px; } }

/* career rank, shown during play */
.rank-plate { display: inline-flex; align-items: baseline; gap: 6px; margin: 2px 0 2px 2px; padding: 2px 8px; background: rgba(8,12,10,.82); border: 1px solid #5a4a1e; border-left: 3px solid #ffd56a; width: max-content; }
.rank-plate b { font: 700 calc(15 * var(--u)) var(--num); color: #ffd56a; letter-spacing: .04em; }
.rank-plate span { font: 700 calc(12 * var(--u)) var(--text); color: #e8e2cf; letter-spacing: .14em; }

/* the PvP screen fits a short landscape screen: arenas in one strip, a smaller title */
@media (min-width: 560px) { .pvp-maps { grid-template-columns: repeat(8, 1fr); } .pvp-maps .mp-card span { display: none; } .pvp-maps .mp-card b { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
@media (max-height: 560px) {
  #menu:has(#scrPvp:not([hidden])) .title { width: min(300px, 40vh); margin: 0 0 4px; }
  #scrPvp .plate { height: 38px; font-size: 14px; }
  #scrPvp .set-row { padding: 4px 12px; }
  #scrPvp .mode { display: none; }
  .pvp-modes button { padding: 4px 6px; }
}

/* arena strip: centred cards wide enough for the full arena name */
.pvp-maps, .pvp-maps[class] { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pvp-maps .mp-card { flex: 0 1 calc(25% - 3px); min-width: 120px; }
.pvp-maps .mp-card b { font-size: 10px; white-space: nowrap; overflow: visible; text-overflow: clip; letter-spacing: .04em; }

/* names live above the characters only, not in a HUD list */
#squad { display: none; }
.pvp-modes button { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }

/* environmental events */
body.ev-blackout #vignette { background: radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 0, rgba(0,0,0,.25) 16vmin, rgba(0,0,0,.93) 42vmin); }
body.ev-bloodmoon #vignette { background: radial-gradient(circle at 50% 50%, rgba(120,0,0,0) 30%, rgba(140,0,0,.35) 100%); mix-blend-mode: normal; }
/* Horde screen fits a short landscape screen */
#scrHorde .map-pick { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
@media (max-height: 620px) {
  #menu:has(#scrHorde:not([hidden])) .title { display: none; }
  #scrHorde .sublogo { width: min(200px, 34vh); }
  #scrHorde .mp-card img { height: 40px; }
  #scrHorde .plate { height: 38px; font-size: 14px; }
  #scrHorde .set-row { padding: 4px 12px; }
  #scrHorde { gap: 4px; }
}
/* the Horde screen has its own logo, so the game title steps aside, and everything fits the screen */
#menu:has(#scrHorde:not([hidden])) .title { display: none; }
#scrHorde .sublogo { width: auto; height: clamp(60px, 18vh, 170px); }
#scrHorde .mp-card img { height: clamp(34px, 8vh, 64px); object-position: center; }
@media (max-height: 450px) { #scrHorde .sublogo { height: 54px; } #scrHorde > .mode:first-of-type { display: none; } }
.mp-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }

/* PvP loadout */
.lo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 5px; max-height: 38vh; overflow-y: auto; }
.lo-grid button { position: relative; background: #0b100d; border: 1px solid #2c3a2f; color: #dfe6d8; padding: 4px 6px 5px; text-align: left; font: 500 10px var(--text); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.lo-grid button img { height: 34px; object-fit: contain; align-self: center; max-width: 100%; }
.lo-grid button b { font: 700 11px var(--text); letter-spacing: .06em; }
.lo-grid button i { position: absolute; top: 3px; right: 4px; font: 700 10px var(--text); font-style: normal; color: #ffd56a; }
.lo-grid button.p { border-color: #ffb04a; box-shadow: 0 0 0 1px #ffb04a inset; }
.lo-grid button.s { border-color: #5ab4ff; box-shadow: 0 0 0 1px #5ab4ff inset; }
.lo-grid button.k { border-color: #8cff3a; box-shadow: 0 0 0 1px #8cff3a inset; }
.lo-grid.perks button img { height: 28px; }

.rank-plate.abil { font: 700 calc(12 * var(--u)) var(--text); letter-spacing: .12em; color: #ff8a7a; border-left-color: #ff3a2a; border-color: #5a1e1e; }
.rank-plate.abil.ready { color: #fff; box-shadow: 0 0 10px rgba(255,60,40,.5); }