:root{--vh:1vh;--vw:1vw;--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left)}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #02030a; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; touch-action: none; overscroll-behavior: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- overlays / menus ---------- */
.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 20, .45); z-index: 20; padding: var(--sat) var(--sar) var(--sab) var(--sal); }
.panel { background: rgba(8, 16, 38, .82); border: 1px solid rgba(120,170,255,.35); border-radius: 16px; padding: 14px 22px; text-align: center; max-height: calc(96 * var(--vh)); overflow: auto; min-width: 300px; max-width: calc(94 * var(--vw)); backdrop-filter: blur(6px); box-shadow: 0 0 40px rgba(60,120,255,.2); }
h1 { margin: 0; font-size: clamp(26px, calc(8 * var(--vh)), 46px); letter-spacing: 7px; color: #cfe2ff; text-shadow: 0 0 18px #3d7bff, 0 3px 0 #1d3f8f; }
h2 { margin: 0 0 6px; font-size: clamp(24px, calc(8 * var(--vh)), 40px); letter-spacing: 3px; }
.sub { opacity: .85; font-size: 13px; margin: 2px 0 8px; }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 8px 0; flex-wrap: wrap; }
button { font: inherit; font-weight: 700; color: #fff; background: #2d5ea8; border: 0; border-radius: 10px; padding: 10px 16px; cursor: pointer; }
button:active { filter: brightness(1.25); transform: scale(.97); }
button:disabled { opacity: .5; }
button.big { background: #e0562b; font-size: 17px; padding: 12px 22px; letter-spacing: 1px; }
button.go { background: #1f9d63; }
input#codeIn { width: 110px; font: inherit; font-size: 22px; font-weight: 800; letter-spacing: 6px; text-align: center; text-transform: uppercase; padding: 9px 4px; border-radius: 10px; border: 2px solid #5b84c4; background: #fff; color: #112; -webkit-user-select: text; user-select: text; }
.help { font-size: 11.5px; opacity: .8; line-height: 1.45; margin: 6px 0 0; }
#menuMsg { color: #ffd166; min-height: 16px; margin: 4px 0 0; font-size: 13px; }
#roomCode { font-size: clamp(36px, calc(14 * var(--vh)), 70px); font-weight: 900; letter-spacing: 12px; text-indent: 12px; color: #ffd166; line-height: 1.1; cursor: pointer; }
#lobbyMsg { margin: 4px 0 8px; font-size: 14px; }
.shareRow { display: flex; gap: 8px; justify-content: center; margin: 2px 0 4px; }
.shareRow button { padding: 8px 14px; font-size: 14px; }

.seats { display: flex; gap: 10px; justify-content: center; margin: 8px 0; }
.seat { width: 150px; padding: 10px 8px; border-radius: 12px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); font-size: 12px; line-height: 1.35; cursor: pointer; }
.seat b { display: block; font-size: 14px; letter-spacing: 1px; margin-bottom: 2px; }
.seat.mine { border-color: #ffd166; background: rgba(255,209,102,.18); }
.seat.taken { border-color: #5b84c4; background: rgba(91,132,196,.2); cursor: default; }
.seat.free:active { background: rgba(255,255,255,.18); }
.seat i { display: block; font-style: normal; opacity: .8; font-size: 11px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.9); }
#hud > * { pointer-events: none; }
#hud[data-role=pilot] .gunOnly { display: none !important; }
#hud[data-role=gun] .pilotOnly { display: none !important; }
.bar { position: absolute; top: calc(8px + var(--sat)); width: min(calc(28 * var(--vw)), 240px); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.bar.left { left: calc(12px + var(--sal)); }
.bar.right { right: calc(12px + var(--sar)); text-align: right; }
.bar .track { height: 12px; margin-top: 2px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.55); border-radius: 7px; overflow: hidden; }
.bar .track i { display: block; height: 100%; width: 100%; background: #3ddc84; transition: width .12s, background .2s; }
#role { position: absolute; top: calc(44px + var(--sat)); left: calc(12px + var(--sal)); font-size: 11px; font-weight: 800; letter-spacing: 2px; opacity: .85; color: #9cc4ff; }
#nodes { position: absolute; top: calc(6px + var(--sat)); left: 50%; transform: translateX(-50%); text-align: center; }
#nodes small { display: block; font-size: 10px; letter-spacing: 2px; opacity: .85; margin-bottom: 3px; }
#nodeRow { display: flex; gap: 6px; justify-content: center; }
.np { width: 34px; height: 12px; background: rgba(0,0,0,.55); border: 1px solid #ffb020; border-radius: 4px; overflow: hidden; }
.np i { display: block; height: 100%; width: 100%; background: #ff8a20; transition: width .15s; }
.np.dead { border-color: #555; }
#cross { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 2px solid rgba(140,255,200,.85); border-radius: 50%; }
#cross div { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #8fffc8; border-radius: 50%; }
#cross.over { border-color: #ff4b4b; }
#hitmark { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; opacity: 0; transition: opacity .25s; }
#hitmark::before, #hitmark::after { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: #ff4b4b; transform: rotate(45deg); }
#hitmark::after { transform: rotate(-45deg); }
#hitmark.on { opacity: 1; transition: none; }
.emark { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid #ff4b4b; border-radius: 4px; display: none; }
.emark span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; white-space: nowrap; color: inherit; margin-top: 2px; }
.emark.st { width: 76px; height: 76px; margin: -38px 0 0 -38px; border-color: #5fd8ff; color: #5fd8ff; border-radius: 50%; }
.emark.nd { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: #ffb020; color: #ffb020; border-radius: 50%; }
.emark.dr { color: #ff6a5a; }
.earrow { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: -12px 0 0 -12px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid #ff4b4b; filter: drop-shadow(0 0 4px #000); display: none; }
.earrow.st { border-bottom-color: #5fd8ff; }
#lockBox { position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; border: 3px solid #ffb020; border-radius: 8px; transform-origin: center; }
#lockBox.locked { border-color: #3dff8a; box-shadow: 0 0 16px #3dff8a; animation: pulse .35s infinite alternate; }
#lockBox span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; font-size: 12px; font-weight: 900; letter-spacing: 1px; white-space: nowrap; color: #ffb020; }
#lockBox.locked span { color: #3dff8a; }
#lockBox em { position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; background: rgba(0,0,0,.6); }
#lockBox em i { display: block; height: 100%; width: 0; background: #ffb020; }
#lockBox.locked em i { background: #3dff8a; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.12); } }
#warn { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); font-size: 24px; font-weight: 900; color: #ff4b4b; letter-spacing: 3px; animation: blink .5s infinite alternate; white-space: nowrap; }
@keyframes blink { from { opacity: 1; } to { opacity: .25; } }
#big { position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(26px, calc(11 * var(--vh)), 64px); font-weight: 900; letter-spacing: 4px; text-align: center; white-space: pre; line-height: 1.15; text-shadow: 0 0 18px rgba(80,140,255,.8), 0 2px 4px #000; }
#info { position: absolute; bottom: calc(8px + var(--sab)); left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; opacity: .9; text-align: center; }
#mslRow { display: flex; gap: 5px; justify-content: center; margin-bottom: 3px; }
.pip { width: 14px; height: 22px; border-radius: 3px 3px 7px 7px; border: 1px solid #fff; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
.pip i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #ffd166; }
#flash { position: absolute; inset: 0; background: radial-gradient(transparent 40%, rgba(255,0,0,.55)); opacity: 0; transition: opacity .35s; }
#flash.on { opacity: 1; transition: none; }
#flash.white { background: #fff; }
#topBtns { position: absolute; top: calc(66px + var(--sat)); right: calc(12px + var(--sar)); display: flex; gap: 6px; }
#topBtns button { padding: 6px 10px; font-size: 12px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.4); pointer-events: auto; }
#heatLbl.hot { color: #ff4b4b; animation: blink .3s infinite alternate; }

.pad { position: absolute; bottom: calc(14px + var(--sab)); width: clamp(96px, calc(26 * var(--vh)), 140px); height: clamp(96px, calc(26 * var(--vh)), 140px); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; letter-spacing: 1px; border: 3px solid rgba(255,255,255,.8); pointer-events: auto !important; touch-action: none; text-align: center; line-height: 1.15; }
.pad small { font-size: 12px; font-weight: 700; opacity: .9; }
#btnR { right: calc(18px + var(--sar)); background: rgba(224, 60, 40, .55); }
#btnL { left: calc(18px + var(--sal)); background: rgba(60, 140, 240, .55); }
#btnL.ready { background: rgba(40, 200, 110, .7); border-color: #b6ffd2; box-shadow: 0 0 22px #3dff8a; }
#btnR.over { background: rgba(90,90,90,.6); border-color: rgba(255,255,255,.35); }
.pad.down { filter: brightness(1.5); transform: scale(.94); }

#toast { position: fixed; bottom: 24%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); padding: 8px 16px; border-radius: 20px; font-size: 14px; z-index: 40; opacity: 0; transition: opacity .3s; pointer-events: none; text-align: center; }
#toast.on { opacity: 1; }

#rotate { position: fixed; inset: 0; background: #060b1c; z-index: 100; display: none; align-items: center; justify-content: center; text-align: center; font-size: 22px; font-weight: 700; }
#rotate div { line-height: 1.6; }
#rotate div::first-line { font-size: 70px; }
@media (orientation: portrait) { #rotate { display: flex; } }

.emark.mt { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-color: #ffd166; color: #ffd166; border-radius: 50%; border-style: dashed; }
.emark.mt.hit { border-color: #ff4b4b; color: #ff4b4b; border-style: solid; animation: blink .25s infinite alternate; }

#manMenu { position: absolute; inset: 0; }
.mtile { position: absolute; width: 92px; height: 58px; margin: -29px 0 0 -46px; border-radius: 12px; background: rgba(8, 16, 38, .82); border: 2px solid rgba(160,200,255,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.mtile b { font-size: 22px; }
.mtile span { font-size: 10px; font-weight: 800; letter-spacing: .5px; }
.mtile.sel { background: #ffb020; color: #111; border-color: #fff; transform: scale(1.18); box-shadow: 0 0 14px rgba(255,176,32,.9); text-shadow: none; }
#btnL.cool { background: rgba(90, 90, 90, .55); border-color: rgba(255,255,255,.45); }

.emark.sm { width: 42px; height: 42px; margin: -21px 0 0 -21px; border: 3px solid #ff2a2a; color: #ff6a5a; border-radius: 6px; animation: blink .3s infinite alternate; }

/* no-double-tap-zoom */
html, body, canvas { touch-action: manipulation; }
html, body, canvas, .pad, #hud, #hud * { touch-action: none; }
button, input, label { touch-action: manipulation; }