#wrap {width:100%; height:100%; isolation:isolate;}
#game {width:100%; height:100%; touch-action:none;}
button {touch-action:manipulation;}
button:focus-visible {outline:3px solid #fff; outline-offset:3px;}
#displayButton {position:absolute; right:max(10px, env(safe-area-inset-right)); top:max(10px, env(safe-area-inset-top)); width:44px; height:44px; padding:12px; border:1px solid #526279; border-radius:8px; background:#111b29; color:#dfe7f0; z-index:50; cursor:pointer;}
#displayButton svg {display:block; width:100%; height:100%; fill:currentColor;}
#killfeed {top:64px; max-width:220px;}
#startScreen, #gameOverScreen {padding:54px 20px 20px;}
#startScreen h1, #gameOverScreen h1 {font-size:clamp(26px, 6.5vw, 64px); letter-spacing:clamp(1px, .5vw, 6px);}
#startScreen .sub, #gameOverScreen .sub {color:#a3aec0;}
#controls-hint {color:#a3aec0; gap:8px;}
#touchHint, #touchControls {display:none;}
#weaponLabel {font-size:12px; color:#b8c7da; margin-top:6px;}
body:not([data-view="play"]) #hud, body:not([data-view="play"]) #bottom-bar {visibility:hidden;}
@media (pointer:coarse) {
  #controls-hint {display:none;}
  #touchHint {display:block; max-width:340px; color:#a3aec0; font-size:13px; line-height:1.6; margin:20px 0 0;}
  body[data-view="play"] #touchControls {display:block;}
  #touchControls {position:absolute; inset:0; pointer-events:none; z-index:20; user-select:none; -webkit-user-select:none;}
  .stick {position:absolute; bottom:max(16px,env(safe-area-inset-bottom)); width:116px; height:116px; border:2px solid #55768d99; background:#101d2d88; border-radius:50%; pointer-events:auto; touch-action:none; color:#c5d5e4;}
  #moveZone {position:absolute; left:0; bottom:0; width:50%; height:45%; max-height:260px; pointer-events:auto; touch-action:none;}
  #moveStick {left:max(16px, env(safe-area-inset-left)); pointer-events:none; opacity:.45;}
  #moveStick.engaged {opacity:0;}
  #moveBase {width:134px; height:134px; bottom:auto; transform:translate(-50%,-50%); pointer-events:none;}
  /* Dashed ring: knob travel where movement reaches full speed (29px). */
  #moveBase::before {content:''; position:absolute; left:50%; top:50%; width:58px; height:58px; box-sizing:border-box; transform:translate(-50%,-50%); border:1px dashed #91bacb66; border-radius:50%;}
  #moveBase.boosting {border-color:#3ddc97; background:#3ddc9726;}
  #aimStick {right:max(16px, env(safe-area-inset-right)); border-color:#3ddc9799;}
  /* Invisible margin so a thumb landing just outside the ring still aims; buttons keep priority. */
  #aimStick::before {content:''; position:absolute; inset:-24px; border-radius:50%; touch-action:none;}
  .stick span {position:absolute; inset:0; display:grid; place-items:center; font-size:11px; letter-spacing:.5px; pointer-events:none;}
  .stick i {display:block; position:absolute; left:calc(50% - 19px); top:calc(50% - 19px); width:38px; height:38px; border:1px solid #91bacb88; background:#52758a55; border-radius:50%; pointer-events:none;}
  .touch-action {position:absolute; z-index:1; bottom:148px; min-width:72px; min-height:44px; border:1px solid #526279; border-radius:8px; background:#111b29cc; color:#dfe7f0; pointer-events:auto; touch-action:none; font:600 12px 'Segoe UI',sans-serif;}
  #boostButton {left:38px;}
  #reloadButton {right:38px;}
  .touch-action.active {background:#236849;}
  #hud {padding:10px;}
  #stats {min-width:158px; padding:7px 10px;}
  #stats > div:first-child {display:none;}
  .bar-row {font-size:11px; margin:3px 0;}
  #bottom-bar {inset:0; padding:0; display:block;}
  #minimap {position:absolute; right:10px; top:64px; width:82px; height:82px;}
  #bottom-bar > div:last-child {position:absolute; left:10px; top:110px; text-align:left !important;}
  #alive-count {font-size:11px;}
  #alive-count b {font-size:16px;}
  #zone-warn {max-width:200px; font-size:11px;}
  #killfeed {top:156px; right:10px; width:170px;}
  .kf-item {font-size:10px; padding:4px 6px;}
}
@media (max-height:440px) {
  #startScreen, #gameOverScreen {padding:44px 16px 12px;}
  #startScreen .sub, #gameOverScreen .sub {margin:6px 0 14px; font-size:13px; max-width:480px;}
  #touchHint, #controls-hint {margin-top:12px;}
  button.play-btn {padding:10px 28px; font-size:16px;}
  .stick {width:100px; height:100px; bottom:10px;}
  #moveStick {left:max(18px,env(safe-area-inset-left)); bottom:max(18px,env(safe-area-inset-bottom));}
  .touch-action {bottom:120px;}
  #killfeed {display:none;}
}
/* Short touch frames (embedded landscape phones, 220-340px tall): actions beside the sticks, HUD status at top center. */
/* Boost/Reload stay 150px in from the edge so touch adjustment cannot pull aim-margin taps onto Reload. */
@media (pointer:coarse) and (max-height:340px) {
  .stick {width:96px; height:96px; bottom:8px;}
  #moveStick {left:max(14px,env(safe-area-inset-left)); bottom:max(8px,env(safe-area-inset-bottom));}
  #aimStick {right:max(14px,env(safe-area-inset-right));}
  #moveZone {height:60%;}
  .touch-action {bottom:14px; min-width:64px;}
  #boostButton {left:calc(max(14px,env(safe-area-inset-left)) + 150px);}
  #reloadButton {right:calc(max(14px,env(safe-area-inset-right)) + 150px);}
  #minimap {width:64px; height:64px; top:10px; right:64px;}
  #bottom-bar > div:last-child {left:50%; top:8px; transform:translateX(-50%); text-align:center !important;}
  #hud {padding:8px;}
  #stats {padding:5px 8px;}
  .bar-row {margin:2px 0;}
}
@media (pointer:coarse) and (max-height:300px) {
  #startScreen, #gameOverScreen {padding:10px 16px;}
  #startScreen h1, #gameOverScreen h1 {font-size:34px;}
  #startScreen .sub, #gameOverScreen .sub {margin:4px 0 10px; font-size:12px; line-height:1.35;}
  #touchHint {margin-top:8px; font-size:12px; line-height:1.4;}
}
/* Spectating keeps the arena unobscured; only the result strip receives input. */
body[data-view="spectate"] #gameOverScreen {
  inset:auto; left:50%; bottom:max(10px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:calc(100% - 20px); max-width:470px; padding:10px 12px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; row-gap:3px;
  align-items:center; text-align:left; border:1px solid #344258; border-radius:9px;
  background:rgba(17,22,31,.9); color:var(--text); box-shadow:0 2px 12px #0004;
}
body[data-view="spectate"] #resultText {display:none;}
body[data-view="spectate"] #gameOverTitle {
  grid-column:1; font-size:14px; line-height:1.35; letter-spacing:0; color:var(--text); text-shadow:none;
}
body[data-view="spectate"] #gameOverSub {
  grid-column:1; margin:0; font-size:12px; line-height:1.35; color:#b8c7da;
}
body[data-view="spectate"] #restartBtn {
  grid-column:2; grid-row:1 / 3; min-height:44px; padding:8px 12px;
  font-size:12px; letter-spacing:0; box-shadow:none; background:#273e39; color:#c9f5df;
  border:1px solid #497366; white-space:nowrap;
}
@media (max-width:400px) {
  body[data-view="spectate"] #gameOverScreen {padding:8px; column-gap:8px;}
  body[data-view="spectate"] #gameOverTitle {font-size:12px;}
  body[data-view="spectate"] #gameOverSub {font-size:11px;}
  body[data-view="spectate"] #restartBtn {padding:8px; font-size:11px;}
}