/* ============================================================
   TANK BATTLE — mobile.css   (additive layer, loaded last)

   Nothing above this file is edited: these rules only add the
   behaviour phones, tablets, laptops and large screens need —
   safe-area gutters, fluid scaling, portrait & landscape
   compositions, scrollable panels/menus that can never be cut
   off, no page scrolling, and touch behaviour that feels right
   with a thumb.
   ============================================================ */

:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --gut-x: clamp(8px, 2.4vw, 18px);
  --gut-dock: clamp(10px, 3vw, 26px);
}

/* ============================================================
   1 · PAGE / SHELL — never scroll, never zoom, always fill
   ============================================================ */

html {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  width: 100%;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  /* the arena is a game surface: panning is re-enabled only where
     something actually has to scroll (panels & menus) */
  touch-action: manipulation;
}

#app {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;
}

#game-shell {
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}

#overlay {
  touch-action: manipulation;
  /* The overlay itself must stay transparent to input — only the
     visible screen is clickable. (ui.js leaves an inline
     `pointer-events: auto` on #overlay after the first screen is
     shown, which would otherwise swallow every touch, click and
     press aimed at the battlefield, the HUD and the dock.)
     Children re-enable hit-testing, so the menus keep working. */
  pointer-events: none !important;
}

#overlay > .screen {
  pointer-events: auto;
}

/* ============================================================
   2 · TOP & BOTTOM BARS — safe-area aware, never overlapping
   ============================================================ */

#hud {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: calc(6px + var(--sa-top)) calc(var(--gut-x) + var(--sa-right)) 6px
           calc(var(--gut-x) + var(--sa-left));
}

#stage-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: clamp(4px, 1.2vmin, 14px);
}

/* ============================================================
   3 · CONTROL VISIBILITY
   Desktop / mouse+keyboard: the whole bottom dock is removed, so
   the arena reclaims the entire window and nothing is left behind
   (no joystick, no FIRE button, no on-screen drive pad).
   Touch devices: the dock becomes a zero-height, click-through
   overlay, so the battlefield runs edge to edge behind the
   controls instead of being pushed up by a solid panel.
   The mode is set by js/mobile.js on <html data-mode>, from the
   real pointer capability — never from the window width.
   ============================================================ */

#dock {
  display: none;
}

/* the on-screen drive pad is redundant now: keyboards on desktop,
   the virtual stick on touch */
#drive-pad {
  display: none;
}

/* ---- touch: transparent overlay dock ---- */

html[data-mode="touch"] #dock {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  padding: 0;
  background: none;
  border: 0;
  z-index: 25;
  pointer-events: none;
  touch-action: none;
}

html[data-mode="touch"] #touch-controls.touch-on {
  display: block;
  position: absolute;
  inset: 0;
  padding: 0;
  gap: 0;
  pointer-events: none;
}

html[data-mode="touch"] #footer-bar {
  display: none;
}

/* ---- touch controls: thumb sized, safe-area aware ---- */

#touch-controls {
  padding: 0;
  gap: 0;
}

#joy-zone {
  position: absolute;
  left: calc(4px + var(--sa-left));
  bottom: calc(4px + var(--sa-bottom));
  width: min(46vw, 250px);
  height: clamp(96px, 23vh, 196px);
  pointer-events: auto;
}

#joy-base {
  /* the whole zone is the grab area, so a thumb never has to find a
     small target. The circle is sized from the zone, so it can never
     spill out of it, and it is translucent so the fight stays
     visible underneath. */
  left: 0;
  top: auto;
  bottom: 0;
  transform: none;
  width: auto;
  height: min(100%, 132px);
  max-width: 100%;
  max-height: 100%;
  opacity: .8;
}

#joy-knob {
  opacity: .95;
}

#joy-base.joy-live {
  opacity: 1;
}

/* Comfortable finger-sized targets wherever a real finger is used.
   (Pointer-based, so a mouse-driven desktop keeps its slimmer look.) */
@media (pointer: coarse) {
  #btn-pause {
    min-width: 44px;
    min-height: 44px;
  }

  .btn {
    min-height: 40px;
  }

  .level-card {
    min-height: 44px;
  }
}

#btn-fire {
  position: absolute;
  right: calc(8px + var(--sa-right));
  bottom: calc(8px + var(--sa-bottom));
  width: clamp(76px, 21vw, 118px);
  opacity: .88;
  pointer-events: auto;
}

#btn-fire:active,
#btn-fire.firing {
  opacity: 1;
}

/* ============================================================
   3b · FULL SCREEN — gameplay owns the whole screen
   The dock is already an overlay in touch mode, so full screen only
   has to drop the frame padding and let the stage take the screen.
   ============================================================ */

html:fullscreen,
html:-webkit-full-screen {
  background: var(--bg, #0b1119);
}

html:fullscreen #game-shell,
html:-webkit-full-screen #game-shell {
  height: 100%;
  min-height: 100%;
}

html:fullscreen #stage-wrap,
html:-webkit-full-screen #stage-wrap {
  padding: 0;
}

html:fullscreen #stage,
html:-webkit-full-screen #stage {
  border-radius: 0;
  border-width: 0;
  outline: 0;
  box-shadow: none;
}

html:fullscreen #hud,
html:-webkit-full-screen #hud {
  padding-top: calc(6px + var(--sa-top));
}

/* ============================================================
   4 · SCREENS, PANELS & MENUS — always fully reachable
   ============================================================ */

.screen {
  padding: calc(clamp(8px, 3vmin, 32px) + var(--sa-top))
           calc(clamp(8px, 3vmin, 32px) + var(--sa-right))
           calc(clamp(8px, 3vmin, 32px) + var(--sa-bottom))
           calc(clamp(8px, 3vmin, 32px) + var(--sa-left));
  overflow: hidden;
}

.panel {
  max-height: 100%;
  max-width: 100%;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(16px, 3.4vmin, 34px);
}

.panel-title {
  /* keep the title clear of the close button on narrow panels */
  margin: 0 36px 14px;
  padding: 0;
}

/* the primary action of a modal stays reachable without scrolling */
.modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: 12px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, rgba(22, 34, 47, 0), var(--panel) 40%);
}

/* phones: modals become bottom sheets */
@media (max-width: 700px) {
  .modal {
    align-items: end;
  }

  .modal .panel {
    width: 100%;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: calc(clamp(16px, 3.4vmin, 34px) + var(--sa-bottom));
  }

  .modal .panel .modal-footer .btn {
    width: 100%;
  }
}

.menu-inner {
  width: min(94vw, 560px);
  max-width: 100%;
  max-height: 100%;
  padding: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.best-chip {
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Keyboard + mouse scheme: only for devices that have no touch
   screen, where the virtual controls are switched off. */
.menu-hint {
  display: none;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  text-wrap: balance;
}

html[data-mode="pointer"] .menu-hint {
  display: block;
  margin-top: 2px;
}

/* Desktop windows: the wordmark follows the window height as well, so
   the whole menu (logo, buttons, stats, key hints) fits a short laptop
   without scrolling. Every clamp keeps the original value as its
   maximum, so a normal monitor is untouched. */
@media (min-width: 701px) {
  .logo-tank {
    font-size: clamp(40px, min(13vw, 15vh), 118px);
  }

  .logo-battle {
    font-size: clamp(46px, min(15vw, 16.5vh), 138px);
  }

  .tagline {
    font-size: clamp(8px, min(1.9vw, 2.4vh), 14px);
    padding: 4px 12px;
  }

  .menu-inner {
    gap: clamp(6px, 1.8vh, 22px);
  }

  .menu-buttons {
    gap: clamp(5px, 1.4vh, 12px);
  }

  .menu-buttons .btn {
    padding: clamp(7px, 1.5vh, 12px) 18px;
  }

  .menu-buttons .btn-big {
    padding: clamp(9px, 1.9vh, 16px) 24px;
  }

  .best-chip {
    margin-top: clamp(2px, 1vh, 8px);
  }
}

/* very short desktop windows (squished, ~640px tall) */
@media (min-width: 701px) and (max-height: 700px) {
  .logo-tank {
    font-size: clamp(36px, min(13vw, 13.5vh), 118px);
  }

  .logo-battle {
    font-size: clamp(42px, min(15vw, 15vh), 138px);
  }

  .menu-inner {
    gap: clamp(6px, 1.5vh, 22px);
  }
}

/* ============================================================
   5 · FULL-SCREEN BUTTON (main menu)
   ============================================================ */

.fs-btn {
  position: absolute;
  top: calc(10px + var(--sa-top));
  right: calc(10px + var(--sa-right));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid rgba(8, 16, 26, .6);
  background: linear-gradient(180deg, rgba(33, 51, 70, .94), rgba(16, 26, 38, .96));
  color: #eaf4ff;
  font-family: var(--font-stack);
  font-weight: 900;
  font-size: clamp(10px, 2.6vw, 12px);
  letter-spacing: .14em;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .07s ease, box-shadow .07s ease, filter .15s ease;
}

.fs-btn:hover {
  filter: brightness(1.18);
}

.fs-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .45);
}

.fs-btn .fs-i {
  display: block;
  flex: 0 0 auto;
}

.fs-btn .fs-i-collapse {
  display: none;
}

.fs-btn.is-on {
  color: #0d1a0d;
  background: linear-gradient(180deg, #8fe06a, #4da32c);
  border-color: rgba(0, 0, 0, .5);
  box-shadow: 0 3px 0 #1d5711, 0 8px 18px rgba(0, 0, 0, .35);
}

.fs-btn.is-on .fs-i-expand {
  display: none;
}

.fs-btn.is-on .fs-i-collapse {
  display: block;
}

.fs-btn.fs-standalone {
  opacity: .75;
}

#fs-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--sa-bottom));
  z-index: 200;
  width: max-content;
  max-width: min(88vw, 420px);
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(33, 51, 70, .97), rgba(16, 26, 38, .97));
  border: 2px solid var(--panel-edge);
  color: var(--text);
  font-family: var(--font-stack);
  font-size: clamp(11px, 3.1vw, 14px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

#fs-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* icon-only on narrow screens so it can never crowd the logo */
@media (max-width: 520px) {
  .fs-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
  }

  .fs-btn .fs-label {
    display: none;
  }

  .menu-inner {
    padding-top: 46px;
  }
}

/* ============================================================
   6 · PHONE PORTRAIT — tighten the HUD & dock
   ============================================================ */

@media (max-width: 768px) {
  .hp-bar {
    height: clamp(14px, 2.4vw, 20px);
  }

  .plate-head {
    gap: 6px;
  }

  .levels-grid {
    grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 8px;
  }

  .howto-grid {
    grid-template-columns: 1fr;
  }

  .stack {
    gap: 10px;
  }

  .stack .btn {
    width: 100%;
  }

  .result-stats {
    gap: 10px;
  }

  .stat {
    min-width: 96px;
    padding: 8px 12px;
  }
}

@media (max-width: 400px) {
  #hud {
    gap: 5px;
  }

  .hp-plate {
    padding: 4px 6px;
  }

  .plate-head {
    gap: 5px;
    margin-bottom: 3px;
  }

  .plate-name {
    font-size: 9px;
    letter-spacing: .08em;
  }

  .tank-dot {
    width: 11px;
    height: 11px;
  }

  .hud-center {
    gap: 3px;
  }

  .score-chip,
  .round-chip {
    min-width: 46px;
    padding: 1px 6px;
    gap: 5px;
  }

  .chip-value {
    font-size: 13px;
  }

  .hp-text {
    font-size: 9px;
  }

  .icon-btn {
    width: 34px;
  }

  .stat {
    min-width: 84px;
    padding: 7px 9px;
  }
}

/* ============================================================
   7 · PHONE LANDSCAPE — the controls float over the arena so the
   battlefield keeps the whole height of the screen
   ============================================================ */

@media (orientation: landscape) and (max-height: 620px) and (pointer: coarse) {
  #hud {
    padding-top: calc(3px + var(--sa-top));
    padding-bottom: 3px;
  }

  .hp-plate {
    padding: 3px 8px;
  }

  .hp-bar {
    height: clamp(11px, 2.4vh, 17px);
  }

  .plate-head {
    margin-bottom: 2px;
  }

  .chip-label {
    display: none;
  }

  .plate-enemy {
    max-width: 240px;
  }

  /* the overlay dock is already in place: only the thumb sizes are
     tuned down a little so they never cover the letterboxed arena */
  #joy-base {
    height: min(100%, 108px);
  }

  #btn-fire {
    width: clamp(62px, 24vh, 104px);
  }
}

/* ============================================================
   8 · SHORT LANDSCAPE MENU — logo beside the buttons so the whole
   menu fits a 320-500px tall window without scrolling
   ============================================================ */

@media (orientation: landscape) and (max-height: 620px) {
  .menu-inner {
    display: grid;
    width: min(96vw, 860px);
    max-width: 100%;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "logo tagline"
      "logo buttons"
      "logo chips";
    align-items: center;
    justify-items: center;
    gap: clamp(4px, 1.2vh, 10px) clamp(10px, 3vw, 26px);
    padding: 46px 2px 2px;
  }

  .logo {
    grid-area: logo;
    margin-bottom: 0;
  }

  .tagline {
    grid-area: tagline;
  }

  .menu-buttons {
    grid-area: buttons;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(5px, 1.2vh, 8px);
    width: min(100%, 440px);
  }

  .menu-buttons .btn {
    width: 100%;
    padding: clamp(6px, 1.7vh, 11px) 10px;
    font-size: clamp(10px, 2.6vh, 15px);
    border-radius: 11px;
  }

  .menu-buttons .btn-big {
    grid-column: 1 / -1;
    padding: clamp(8px, 2vh, 13px) 16px;
    font-size: clamp(13px, 3.2vh, 19px);
  }

  .menu-chips {
    grid-area: chips;
    gap: 6px;
  }

  .best-chip {
    margin-top: 0;
    padding: clamp(4px, 1vh, 8px) 14px;
    font-size: clamp(8px, 2vh, 12px);
    letter-spacing: .12em;
  }

  .logo-tank {
    font-size: clamp(26px, 11vh, 62px);
    -webkit-text-stroke-width: 1.5px;
  }

  .logo-battle {
    font-size: clamp(30px, 12.5vh, 70px);
    -webkit-text-stroke-width: 1.5px;
  }

  .tagline {
    font-size: clamp(8px, 1.8vh, 11px);
    padding: 3px 12px;
    letter-spacing: .22em;
  }

  /* panels stay readable in a short window */
  .panel {
    padding: clamp(12px, 3vh, 22px);
  }

  .panel-title {
    font-size: clamp(20px, 6vh, 32px);
    margin-bottom: 10px;
  }

  .result-emblem {
    font-size: clamp(38px, 12vh, 62px);
  }

  .howto-card ul,
  .howto-card p {
    font-size: clamp(10px, 1.9vh, 12px);
    line-height: 1.45;
  }

  .howto-card {
    padding: 9px 11px;
  }

  .lvl-tile {
    border-radius: 11px;
  }
}

/* ============================================================
   9 · TABLETS — a little more room for the arena & controls
   ============================================================ */

@media (orientation: portrait) and (min-width: 600px) and (max-width: 1024px) and (pointer: coarse) {
  #joy-zone {
    width: min(40vw, 260px);
    height: clamp(110px, 18vh, 160px);
  }

  #joy-base {
    height: min(100%, 132px);
  }

  #btn-fire {
    width: clamp(92px, 18vw, 124px);
  }
}

/* ---------------- Short portrait phone: tighter menu ---------------- */
@media (orientation: portrait) and (max-height: 640px) {
  .menu-inner {
    gap: clamp(5px, 1.4vh, 14px);
    padding-top: 46px;
  }

  .logo {
    margin-bottom: 0;
  }

  .logo-tank {
    font-size: clamp(32px, 9.5vh, 72px);
    -webkit-text-stroke-width: 1.5px;
  }

  .logo-battle {
    font-size: clamp(36px, 10.5vh, 80px);
    -webkit-text-stroke-width: 1.5px;
  }

  .tagline {
    font-size: clamp(8px, 1.7vh, 11px);
    letter-spacing: .16em;
    padding: 2px 8px;
  }

  .menu-buttons {
    gap: 7px;
  }

  .menu-buttons .btn {
    padding: 8px 14px;
    font-size: clamp(11px, 2.1vh, 15px);
  }

  .menu-buttons .btn-big {
    padding: 11px 18px;
    font-size: clamp(14px, 2.8vh, 20px);
  }

  .best-chip {
    padding: 5px 12px;
    font-size: clamp(8px, 1.6vh, 13px);
    letter-spacing: .12em;
  }
}

/* ============================================================
   10 · LARGE SCREENS — scale the shell up, keep it centred
   ============================================================ */

@media (min-width: 1600px) and (min-height: 860px) {
  :root {
    --gut-x: 22px;
  }

  .menu-inner {
    width: min(88vw, 700px);
    gap: clamp(14px, 2vh, 26px);
  }

  .menu-buttons {
    width: min(100%, 440px);
    gap: 15px;
  }

  .menu-buttons .btn {
    padding: 15px 30px;
    font-size: 19px;
  }

  .best-chip {
    font-size: 16px;
  }

  .panel {
    padding: clamp(26px, 3vmin, 42px);
  }

  .panel-wide {
    width: min(92vw, 940px);
  }

  .howto-grid {
    gap: 16px;
  }

  .howto-card ul,
  .howto-card p {
    font-size: 14px;
  }

  .levels-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 14px;
  }

  #joy-zone {
    width: min(40vw, 300px);
  }
}

/* ============================================================
   11 · ACCESSIBILITY / MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .fs-btn,
  #fs-toast {
    transition: none !important;
  }
}