:root { --red: #ff5664; --blue: #26c6ef; --ink: #10151d; }
html, body { background: #13243a; }
.game-shell {
  width: 100%; max-width: none;
  padding: max(.4rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: .4rem;
}
.game-header { grid-column: 1; grid-row: 1; min-height: 2.6rem; border: 0; color: white; }
.game-header h1 { color: white; font-size: clamp(1rem, 3vh, 1.5rem); font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.game-header .back-link, .game-header .icon-button, .game-header .shell-tool { min-height: 2.3rem; height: 2.3rem; border: 2px solid var(--ink); background: #f8fafc; box-shadow: 3px 3px 0 var(--ink); }
.game-header .back-link { width: 2.3rem; }
.game-header .icon-button { min-width: 5.8rem; padding: .25rem .55rem; font-size: .67rem; }
.game-header .game-profile, .game-header .shell-status { display: none; }
.game-stage { position: relative; grid-column: 1; grid-row: 2; min-height: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: clamp(.9rem, 2.5vw, 1.7rem); background: #78cbe8; box-shadow: 0 9px 0 #09111d, 0 22px 42px rgba(0,0,0,.3); isolation: isolate; touch-action: none; }
#game { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; border-radius: inherit; touch-action: none; }
.tank-hud { position: absolute; z-index: 2; inset: .55rem .7rem auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .5rem; pointer-events: none; }
.player-panel { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: .05rem .55rem; color: white; filter: drop-shadow(0 2px 1px #111); opacity: .58; transition: opacity .18s, transform .18s; }
.player-panel--blue { justify-content: end; text-align: right; }
.player-panel.is-active { opacity: 1; transform: scale(1.04); }
.player-panel strong { font-size: clamp(.62rem, 1.6vw, .9rem); letter-spacing: .14em; }
.player-panel span { color: var(--red); font-size: clamp(.8rem, 2vw, 1.15rem); letter-spacing: .1em; }
.player-panel--blue span { color: var(--blue); }
.player-panel small { grid-column: 1 / -1; font-size: clamp(.42rem, 1vw, .57rem); font-weight: 900; letter-spacing: .08em; }
.turn-panel { display: grid; justify-items: center; gap: .1rem; min-width: clamp(7.5rem, 19vw, 11rem); padding: .34rem .7rem; border: 2px solid rgba(10,15,23,.7); border-radius: 999px; background: rgba(250,250,244,.91); color: #202833; box-shadow: 2px 3px 0 rgba(10,15,23,.7); }
.turn-panel strong { font-size: clamp(.52rem, 1.3vw, .72rem); letter-spacing: .09em; }
.turn-panel span { font-size: clamp(.42rem, 1vw, .58rem); font-weight: 800; }
.fire-zone { position: absolute; z-index: 3; inset-block: 0; width: 50%; touch-action: none; }
.fire-zone--red { left: 0; }
.fire-zone--blue { right: 0; }
.message-card { border: 4px solid var(--ink); border-radius: 1.4rem; background: #fff7e5; box-shadow: 8px 9px 0 var(--ink); }
.message-card .eyebrow { margin: 0 0 .3rem; color: #647080; font-size: .7rem; font-weight: 950; letter-spacing: .15em; }
.message-card h2 { font-weight: 950; }
.message-card .primary { background: linear-gradient(90deg, var(--red), #ffd85b 49%, var(--blue)); color: var(--ink); }
.match-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; margin: .85rem 0 1rem; }
.match-rules span { display: grid; gap: .2rem; padding: .55rem .35rem; border: 2px solid #293342; border-radius: .7rem; background: white; color: #384454; font-size: .65rem; font-weight: 850; }
.match-rules b { color: #17202c; font-size: 1rem; }
@media (orientation: portrait) and (max-width: 900px) {
  .game-shell, .game-message { position: fixed; top: 50%; left: 50%; width: 100dvh; height: 100dvw; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; }
  .game-shell { padding: .35rem; }
  .game-message { right: auto; bottom: auto; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .game-shell { grid-template-rows: 2.1rem minmax(0, 1fr); gap: .25rem; padding-top: .25rem; padding-bottom: .25rem; }
  .game-header { min-height: 2rem; } .game-header h1 { font-size: .75rem; }
  .game-header .back-link, .game-header .icon-button, .game-header .shell-tool { min-height: 1.8rem; height: 1.8rem; }
  .game-header .back-link { width: 1.8rem; } .game-header .shell-tools { display: none; }
  .message-card { width: min(100%, 42rem); }
  .message-card .eyebrow { margin-bottom: .15rem; }
  .match-rules { margin: .35rem 0 .45rem; }
  .match-rules span { padding: .3rem; }
  .match-rules b { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .player-panel { transition: none; } }