: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; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #9cc4e4; 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; touch-action: none; }
.hidden { display: none !important; }

#hud { position: fixed; inset: 0; pointer-events: none; padding: var(--sat) var(--sar) var(--sab) var(--sal); }
#hud button, #hud .pad { pointer-events: auto; }
#flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,60,40,0) 30%, rgba(255,60,40,.55)); opacity: 0; transition: opacity .25s; }
#flash.on { opacity: 1; transition: none; }

.bar { position: absolute; top: 10px; width: 27%; max-width: 280px; text-shadow: 0 1px 3px #000; font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.bar.left { left: 12px; } .bar.right { right: 12px; text-align: right; }
.bar .track { height: 12px; border-radius: 7px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.4); overflow: hidden; margin-top: 3px; }
.bar .track i { display: block; height: 100%; width: 100%; background: #3ddc84; transition: width .3s, background .3s; }
.bar.right .track i { margin-left: auto; }
.bar b { font-size: 11px; opacity: .85; }

#windBox { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: rgba(10,20,35,.55); border: 1px solid rgba(255,255,255,.35); border-radius: 30px; padding: 4px 14px 4px 5px; text-shadow: 0 1px 2px #000; }
#windDial { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.7); }
#windDial::before { content: 'N'; position: absolute; }
#windDial::before { content: '\25B2'; font-size: 7px; left: 50%; top: -1px; transform: translateX(-50%); opacity: .7; }
#windArrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-origin: 0 0; }
#windArrow::before { content: ''; position: absolute; left: -2px; top: -17px; width: 4px; height: 34px; background: #ffd34d; border-radius: 2px; }
#windArrow::after { content: ''; position: absolute; left: -8px; top: -25px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid #ffd34d; }
#windTxt { font-size: 15px; line-height: 1.1; } #windTxt b { font-size: 20px; } #windTxt small { display: block; font-size: 10px; opacity: .85; white-space: nowrap; }

#cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#cross i { position: absolute; background: rgba(255,255,255,.95); box-shadow: 0 0 2px #000, 0 0 2px #000; }
#cross .h { left: -26px; width: 52px; top: -.5px; height: 1px; }
#cross .v { top: -26px; height: 52px; left: -.5px; width: 1px; }
#cross .d { left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ff3b30; }
#readout { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 14px; font: 700 13px ui-monospace, Menlo, Consolas, monospace; background: rgba(10,20,35,.5); border-radius: 12px; padding: 4px 12px; text-shadow: 0 1px 2px #000; }
#lastShot { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); font: 700 13px ui-monospace, Menlo, Consolas, monospace; background: rgba(10,20,35,.5); border-radius: 12px; padding: 3px 12px; text-shadow: 0 1px 2px #000; opacity: 0; transition: opacity .4s; white-space: nowrap; }
#lastShot.on { opacity: 1; }
#warn { position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-weight: 900; font-size: 22px; color: #ff6a5a; text-shadow: 0 2px 6px #000; letter-spacing: 1px; }
#big { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-weight: 900; font-size: 56px; text-shadow: 0 3px 10px #000; display: none; }
#hitmark { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid #fff; transform: rotate(45deg); opacity: 0; }
#hitmark.on { opacity: .95; }

#topBtns { position: absolute; right: 12px; top: 64px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#topBtns button { background: rgba(10,20,35,.6); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: 14px; min-width: 60px; }
#topBtns button:active { background: rgba(80,120,200,.7); }

.pad { position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 900; letter-spacing: 1px; text-shadow: 0 2px 4px #000; border: 3px solid rgba(255,255,255,.75); touch-action: none; }
#btnFire { right: calc(18px + var(--sar)); bottom: 18px; width: 120px; height: 120px; font-size: 22px; background: radial-gradient(circle at 35% 30%, #ff7a5c, #c4261a); }
#btnFire.down { transform: scale(.94); filter: brightness(1.2); }
#btnFire.off { background: radial-gradient(circle at 35% 30%, #777, #444); border-color: rgba(255,255,255,.35); font-size: 15px; }
#btnDeploy { left: calc(18px + var(--sal)); bottom: 18px; width: 104px; height: 104px; font-size: 17px; background: radial-gradient(circle at 35% 30%, #5fa3ff, #1d4fb3); }
#btnDeploy small { font-size: 11px; font-weight: 700; opacity: .9; letter-spacing: 0; }
#btnDeploy.off { background: radial-gradient(circle at 35% 30%, #777, #444); border-color: rgba(255,255,255,.35); }
#btnDeploy.down { transform: scale(.94); }

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(10,20,40,.55), rgba(10,20,40,.78)); z-index: 5; overflow: auto; }
.panel { width: min(560px, calc(94 * var(--vw))); max-height: calc(96 * var(--vh)); overflow: auto; padding: 18px 22px; text-align: center; background: rgba(14,24,44,.82); border: 1px solid rgba(255,255,255,.25); border-radius: 18px; backdrop-filter: blur(6px); }
h1 { margin: 0; font-size: 36px; letter-spacing: 3px; text-shadow: 0 3px 0 #1a3a66; }
h2 { margin: 0 0 6px; font-size: 40px; }
.sub { margin: 4px 0 12px; opacity: .85; font-size: 14px; }
.row { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 9px 0; flex-wrap: wrap; }
.note { font-size: 12px; opacity: .7; }
button { font: inherit; color: #fff; background: #35507c; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; padding: 10px 16px; cursor: pointer; font-weight: 700; }
button.big { background: linear-gradient(#4a86e8, #2a58b8); font-size: 17px; padding: 12px 22px; }
button.arena { background: linear-gradient(#f0944a, #c0551a); }
button:disabled { opacity: .5; }
input#codeIn { width: 110px; text-align: center; font-size: 24px; font-weight: 800; letter-spacing: 6px; padding: 8px; border-radius: 12px; border: 2px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; text-transform: uppercase; }
.chk { font-size: 13px; opacity: .9; }
#menuMsg { min-height: 18px; margin: 4px 0; color: #ffd34d; font-size: 14px; }
.help { font-size: 12px; opacity: .78; line-height: 1.5; margin: 8px 0 0; }
#roomCode { font-size: 64px; font-weight: 900; letter-spacing: 10px; margin: 6px 0; text-shadow: 0 3px 0 #1a3a66; cursor: pointer; }
.shareRow { display: flex; gap: 10px; justify-content: center; }
#lobbyMsg { font-size: 16px; margin: 10px 0 2px; }
#overScore { font-size: 15px; line-height: 1.6; }

#rotate { position: fixed; inset: 0; background: #0d1b30; z-index: 20; display: none; align-items: center; justify-content: center; text-align: center; font-size: 22px; }
#rotate div { font-weight: 700; } @media (orientation: portrait) { #rotate.on { display: flex; } }
#toast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); background: rgba(10,20,35,.85); padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 14px; opacity: 0; transition: opacity .25s; z-index: 30; pointer-events: none; max-width: calc(90 * var(--vw)); text-align: center; }
#toast.on { opacity: 1; }

@media (max-height: 430px) {
  h1 { font-size: 26px; } .panel { padding: 10px 16px; } .sub { margin: 2px 0 6px; } .row { margin: 5px 0; } .help { font-size: 11px; margin-top: 4px; }
  #roomCode { font-size: 44px; } button.big { padding: 9px 16px; font-size: 15px; }
  #btnFire { width: 104px; height: 104px; } #btnDeploy { width: 92px; height: 92px; font-size: 15px; }
}

#btnSwap { left: calc(138px + var(--sal)); bottom: 18px; width: 86px; height: 86px; font-size: 14px; background: radial-gradient(circle at 35% 30%, #ffb347, #c4561a); }
#btnSwap small { font-size: 10px; font-weight: 700; opacity: .92; letter-spacing: 0; }
#btnSwap.off { background: radial-gradient(circle at 35% 30%, #777, #444); border-color: rgba(255,255,255,.35); }
#btnSwap.down { transform: scale(.94); }
#btnSwap.alert { animation: pulse .7s infinite alternate; border-color: #fff; }
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(255,170,60,.9); } to { box-shadow: 0 0 0 16px rgba(255,170,60,0); } }
#btnFire.archer { background: radial-gradient(circle at 35% 30%, #ffc56a, #d2601a); }
#btnFire.archer.off { background: radial-gradient(circle at 35% 30%, #777, #444); }
#squadWarn { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); font-weight: 800; font-size: 13px; color: #ffd0c8; text-shadow: 0 1px 3px #000, 0 0 8px #c00; white-space: nowrap; background: rgba(120,20,10,.35); border-radius: 12px; padding: 0 10px; }
#squadWarn:empty { display: none; }
.sqm { position: absolute; transform: translate(-50%, -100%); font: 800 12px system-ui, sans-serif; text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap; text-align: center; pointer-events: none; line-height: 1.15; }
.sqm::after { content: ''; display: block; margin: 1px auto 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid currentColor; }
#transit { position: absolute; inset: 0; background: #05080f; opacity: 0; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 22px; letter-spacing: 2px; pointer-events: none; }

/* 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; }

/* same compact layout as the (max-height: 430px) query, for the rotated (forced landscape) stage */
html.ls-short h1 { font-size: 26px; } html.ls-short .panel { padding: 10px 16px; } html.ls-short .sub { margin: 2px 0 6px; } html.ls-short .row { margin: 5px 0; } html.ls-short .help { font-size: 11px; margin-top: 4px; }
html.ls-short #roomCode { font-size: 44px; } html.ls-short button.big { padding: 9px 16px; font-size: 15px; }
html.ls-short #btnFire { width: 104px; height: 104px; } html.ls-short #btnDeploy { width: 92px; height: 92px; font-size: 15px; }