* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
  background: #0b1020;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Light theme: only overrides the neutral chrome (page background + game
   canvas fill, the latter set from JS since CSS can't reach into canvas
   pixels - see THEME_COLORS in client.js). The start screen (flat brand
   green, see #start-screen below), HUD chips and tank/world colors stay the
   same in both themes - they're already translucent/vivid enough to read
   fine over either background. */
html[data-theme="light"], html[data-theme="light"] body {
  background: #dbe3f0;
}
html[data-theme="light"] #game-canvas {
  background: #dbe3f0;
}

.hidden { display: none !important; }

/* Screen-to-screen crossfade (menu <-> game <-> death), distinct from the
   plain .hidden utility above so these three can animate instead of
   popping instantly. */
#start-screen, #hud, #death-screen {
  transition: opacity 0.45s ease, transform 0.45s ease;
}
#start-screen.screen-off, #hud.screen-off, #death-screen.screen-off {
  opacity: 0;
  pointer-events: none;
}
#start-screen.screen-off { transform: scale(1.06); }
#death-screen.screen-off { transform: scale(0.96); }

/* ===================== ICONS ===================== */
.icon {
  width: 18px;
  height: 18px;
  display: block;
  color: currentColor;
}
.controls-hint .icon { width: 13px; height: 13px; opacity: 0.85; }

/* ===================== ICON BUTTONS (mute / fullscreen / theme / settings) ===================== */
.icon-btn {
  position: fixed;
  bottom: 12px;
  z-index: 30;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 14, 30, 0.55);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fullscreen-btn { left: 12px; }
.mute-btn { left: 56px; }
/* Unlike fullscreen/mute (visible everywhere), the theme toggle only makes
   sense in-game now - the start screen is a fixed brand green in both
   themes, so switching there has no visible effect. Hidden by default and
   faded in only once #start-screen picks up its .screen-off state (set
   in client.js wherever it toggles the menu/game transition), the same
   class death-screen/hud key their own visibility off. */
.theme-btn {
  left: 100px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#start-screen.screen-off ~ .theme-btn {
  opacity: 1;
  pointer-events: auto;
}
/* Hall of Fame + Settings both live inside #start-screen (see markup) so
   they fade/hide with the rest of the menu automatically instead of
   staying visible in-game like fullscreen/mute above. */
.hof-btn { right: 56px; }
.settings-btn { right: 12px; }
.studio-btn { top: 12px; right: 12px; bottom: auto; }

/* Two stacked icons per toggle button - only one shown at a time via plain
   display swap (driven by the .is-active class), no crossfade needed. */
.icon-btn .icon.icon-toggled { display: none; }
.icon-btn.is-active .icon.icon-default { display: none; }
.icon-btn.is-active .icon.icon-toggled { display: block; }