/* Shared mobile shell for Stella's standalone and embedded browser games. */
html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}

body.arcade-game {
  min-height: 100dvh;
  overscroll-behavior: none;
}

.arcade-game canvas,
.arcade-game .mobile-controls,
.arcade-game .dpad {
  touch-action: none;
}

/* Overlays and chrome buttons: allow taps without double-tap zoom. The canvas
   itself stays touch-action:none so gameplay gestures are never hijacked. */
.arcade-game .screen-overlay,
.arcade-game .icon-btn,
.arcade-game .touch-btn {
  touch-action: manipulation;
}

/* Pause/mute/exit must stay tappable above every overlay card, or a touch
   player who pauses can never resume (overlays sit at z-index 5 in the games). */
.arcade-game .top-actions {
  z-index: 6;
}

.arcade-game button,
.arcade-game select,
.arcade-game input,
.arcade-game a {
  -webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
  .arcade-game button,
  .arcade-game select,
  .arcade-game a {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Phone portrait: use the entire dynamic viewport and keep controls on-screen. */
@media (max-width: 720px) {
  body.arcade-game:not(.management-game) {
    overflow: hidden;
  }

  .arcade-game:not(.management-game) .shell {
    width: 100vw;
    height: 100dvh;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  .arcade-game:not(.management-game) .mast {
    flex: 0 0 auto;
    margin: 0;
    gap: 6px;
  }

  .arcade-game:not(.management-game) .brand {
    padding: 7px 10px;
  }

  .arcade-game:not(.management-game) .brand h1 {
    margin: 0;
    font-size: 16px;
    line-height: 1.15;
  }

  .arcade-game:not(.management-game) .brand p,
  .arcade-game:not(.management-game) .header-actions,
  .arcade-game:not(.management-game) .control-strip,
  .arcade-game:not(.management-game) .footer-row {
    display: none !important;
  }

  .arcade-game:not(.management-game) .cabinet {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
  }

  .arcade-game:not(.management-game) .cabinet > .top-actions--docked {
    position: static;
    order: -1;
    width: 100%;
    min-height: 44px;
    margin: 0 0 6px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    z-index: 8;
  }

  .arcade-game:not(.management-game) .cabinet > .top-actions--docked .icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }

  .arcade-game:not(.management-game) .viewport {
    flex: 0 0 auto;
    min-height: 0;
    width: 100%;
    max-height: none;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
  }

  .arcade-game.game-stella-man .viewport {
    aspect-ratio: 224 / 288;
  }

  .arcade-game.has-touch-controls .mobile-controls,
  .arcade-game.has-touch-controls .dpad {
    flex: 0 0 auto;
    margin-top: 6px;
  }

  .arcade-game.canvas-touch .touch-hint {
    display: block;
    flex: 0 0 auto;
    margin: 5px 0 0;
  }

  .arcade-game.embedded .mast {
    display: none !important;
  }

  .arcade-game.embedded .shell {
    justify-content: flex-start;
  }

  .management-game .shell {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .management-game button,
  .management-game select {
    min-height: 44px;
  }
}

/* Phone landscape: put the game screen beside the physical controls. */
@media (max-width: 960px) and (max-height: 600px) {
  body.arcade-game:not(.management-game) {
    overflow: hidden;
  }

  .arcade-game:not(.management-game) .shell {
    width: 100vw;
    height: 100dvh;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    display: block;
  }

  .arcade-game:not(.management-game) .mast,
  .arcade-game:not(.management-game) .control-strip,
  .arcade-game:not(.management-game) .footer-row,
  .arcade-game:not(.management-game) .touch-hint {
    display: none !important;
  }

  .arcade-game:not(.management-game) .cabinet {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 4px;
    box-shadow: none;
  }

  .arcade-game.has-touch-controls .cabinet {
    grid-template-columns: minmax(0, 1fr) clamp(176px, 31vw, 260px);
  }

  .arcade-game:not(.management-game) .viewport {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 4 / 3;
  }

  .arcade-game:not(.game-stella-man) .viewport canvas {
    width: 100%;
    height: 100%;
  }

  .arcade-game.game-stella-man .viewport {
    aspect-ratio: 224 / 288;
  }

  .arcade-game.game-stella-man canvas#game {
    width: auto;
    height: 100%;
    max-height: 100%;
  }

  .arcade-game.has-touch-controls .mobile-controls,
  .arcade-game.has-touch-controls > .dpad,
  .arcade-game.has-touch-controls .cabinet > .dpad {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: center;
    width: 100%;
    margin: 0;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 6px;
  }

  .arcade-game.game-stella-man .cabinet > .dpad {
    display: grid;
    width: auto;
  }

  .arcade-game.has-touch-controls .touch-btn {
    min-width: 48px;
    min-height: 48px;
  }

  .arcade-game .hud-bar {
    top: 4px;
    left: 4px;
    right: 4px;
    padding: 4px 42px 4px 6px;
  }

  .arcade-game .hud-readout {
    font-size: 13px;
    gap: 2px 7px;
  }

  .arcade-game .top-actions {
    top: 4px;
    right: 4px;
    gap: 3px;
  }

  .arcade-game .icon-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-width: 2px;
    font-size: 10px;
  }

  .arcade-game .screen-overlay {
    padding: 8px;
  }

  .arcade-game .overlay-card {
    max-height: 100%;
    overflow: auto;
    padding: 10px;
  }
}

/* Desktop and modal iframes: fit the whole cabinet in the window instead of
   letting a width-driven 4:3 screen push the bottom of the game below the fold.
   The cabinet is a size container; the viewport letterboxes inside it. */
@media (min-width: 721px) and (pointer: fine) {
  body.arcade-game:not(.management-game) {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .arcade-game:not(.management-game) .shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .arcade-game:not(.management-game) .mast,
  .arcade-game:not(.management-game) .control-strip,
  .arcade-game:not(.management-game) .footer-row {
    flex: 0 0 auto;
  }

  .arcade-game:not(.management-game) .cabinet {
    flex: 1 1 auto;
    min-height: 120px;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Stella-Man sizes its canvas with its own vh calcs; leave it be.
     Both dimensions come from container-query units: flexbox won't honor
     aspect-ratio on a flex item here, so the box is computed outright. */
  .arcade-game:not(.management-game):not(.game-stella-man) .viewport {
    flex: 0 0 auto;
    width: min(100cqw, calc(100cqh * 4 / 3));
    height: min(100cqh, calc(100cqw * 3 / 4));
    max-height: none;
  }

  .arcade-game:not(.management-game):not(.game-stella-man) .viewport canvas {
    width: 100%;
    height: 100%;
  }

  /* Keep Stella-Man's viewport spanning the cabinet: centering it as a flex
     item would shrink-wrap it to the canvas's intrinsic 224px. */
  .arcade-game.game-stella-man .viewport {
    align-self: stretch;
  }

  /* Inside the arcade modal, give the whole window to the game. */
  .arcade-game.embedded .mast,
  .arcade-game.embedded .footer-row {
    display: none !important;
  }

  /* Room for three icon buttons (mute/pause/exit) in the HUD strip. */
  .arcade-game.embedded .hud-bar {
    padding-right: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-game *,
  .arcade-game *::before,
  .arcade-game *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}