:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ink: #e9f1f7;
  --ink-dim: #9fb3c4;
  --gold: #f1c46b;
  --blue: #59b7ff;
  --cyan: #7ef0ff;
  --orange: #ff8a3d;
  --red: #ff5a5f;
  --panel: rgba(12, 22, 36, 0.92);
  --panel-edge: rgba(140, 190, 230, 0.28);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #04070d; color: var(--ink); font-family: var(--font); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
/* fixed (not absolute): a 1600 px absolute stage widened the mobile layout viewport to 1500+ px (v2 phone pass) */
#stage { position: fixed; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
#board, #cards, #hud, #fx, #overlay, #zoom { position: absolute; inset: 0; }
#cards, #hud, #fx, #zoom { pointer-events: none; }
#arrows { position: absolute; inset: 0; width: 1600px; height: 900px; pointer-events: none; z-index: 5600; }
#fx { z-index: 5700; }
#overlay { z-index: 6000; pointer-events: none; }
#overlay > * { pointer-events: auto; }
#zoom { z-index: 7000; }
/* #zoom is click-through; its modal children (examine, zone viewers) must take clicks again (F, 13/10/2026: viewer Close was dead) */
#zoom > .examine-scrim, #zoom > .scrim-viewer { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
/* v1.7 (F): state panel beside the zoomed table card */
.zoom-mo-content { position: relative; }
.zoom-state { position: absolute; left: calc(100% + 14px); top: 8%; width: 230px; padding: 10px 12px; border-radius: 12px; background: rgba(6,14,24,0.94);
  border: 1px solid rgba(160,200,235,0.35); box-shadow: 0 8px 24px rgba(0,0,0,0.55); color: #eaf6ff; font: 600 14px/1.35 system-ui, sans-serif; text-align: left; }
.zoom-state.is-left { left: auto; right: calc(100% + 14px); }
.zoom-state-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9fb3c4; margin-bottom: 4px; }
.zoom-state-row + .zoom-state-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.06); }

/* Minimum touch targets (app/tap-targets.js): every control class in this list is at least --tap-min (44 CSS px at the
   current stage scale) on coarse pointers. A new control class joins with one entry here. */
@media (pointer: coarse) {
  :is(.dbtn, .num-step, .btn-main, .btn-secondary, .btn-fc, .btn-undo, .log-btn, .snd-btn, .game-gear, .game-menu-item,
      .stack-view, .avatar-gy, .peek-btn, .presence-claim, .lobby-btn, .lobby-link, .dbg-x) {
    min-width: var(--tap-min, 44px); min-height: var(--tap-min, 44px);
  }
}
/* a dense cluster zoomed for touch (data-tap-zoom): grows from its bottom-right corner, above the board */
.is-tap-zoomed { transform: scale(var(--tap-zoom, 1)); transform-origin: right bottom; z-index: 6500 !important; background: rgba(6,14,24,0.94) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.7); transition: transform 160ms ease-out; }
.phases.is-tap-zoomed .phase-stop { height: 22px; }