:root {
  --brand-ink: #071a1c;
  --brand-ink-deep: #041113;
  --brand-stage: #0a2426;
  --brand-surface: rgba(14, 42, 43, 0.9);
  --brand-surface-raised: #173d3c;
  --brand-paper: #f5f8f1;
  --brand-paper-soft: #e7f0e8;
  --brand-text: #f3fbf7;
  --brand-text-dark: #163b3a;
  --brand-muted: #8eaaa3;
  --brand-muted-dark: #5e7e79;
  --brand-teal: #1cd7c6;
  --brand-teal-deep: #0b928c;
  --brand-teal-light: #78efe1;
  --brand-gold: #f3a641;
  --brand-gold-soft: #ffd27b;
  --brand-gold-deep: #a4600d;
  --brand-coral: #ff5c61;
  --brand-coral-deep: #be3d4b;
  --brand-violet: #7868f5;
  --brand-violet-deep: #5140ba;
  --brand-line-dark: rgba(142, 221, 210, 0.22);
  --brand-line-light: rgba(22, 75, 71, 0.17);
  --brand-shadow-dark: rgba(0, 0, 0, 0.38);
  --brand-shadow-light: rgba(28, 72, 68, 0.18);
  --arcade-font-ui: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", sans-serif;
  --arcade-font-display: "Arial Black", "Avenir Next Heavy", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --arcade-font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  --arcade-radius-frame: 18px;
  --arcade-radius-panel: 11px;
  --arcade-radius-control: 9px;
  --arcade-control-height: 40px;
}

html, body { font-family: var(--arcade-font-ui); }

/* One shared arcade frame language for every standalone game. */
.tetris-viewport,
.pang-viewport,
.air-viewport {
  --tetris-ink: var(--brand-text);
  --tetris-muted: var(--brand-muted);
  --tetris-line: var(--brand-line-dark);
  --tetris-panel: var(--brand-surface);
  --tetris-panel-strong: var(--brand-surface-raised);
  --tetris-accent: var(--brand-teal);
  --tetris-hot: var(--brand-coral);
  --tetris-shadow: var(--brand-shadow-dark);
  --pang-ink: var(--brand-text);
  --pang-muted: var(--brand-muted);
  --pang-line: var(--brand-line-dark);
  --pang-panel: var(--brand-surface);
  --pang-accent: var(--brand-gold);
  --pang-cyan: var(--brand-teal);
  --pang-danger: var(--brand-coral);
  --pang-shadow: var(--brand-shadow-dark);
  --air-ink: var(--brand-text);
  --air-muted: var(--brand-muted);
  --air-line: var(--brand-line-dark);
  --air-panel: var(--brand-surface);
  --air-panel-strong: var(--brand-surface-raised);
  --air-cyan: var(--brand-teal);
  --air-gold: var(--brand-gold);
  --air-red: var(--brand-coral);
  --air-blue: var(--brand-violet);
  --air-shadow: var(--brand-shadow-dark);
  font-family: var(--arcade-font-ui);
  color: var(--brand-text);
  background: var(--brand-ink);
}

.tetris-viewport[data-theme="white"],
.pang-viewport[data-theme="white"],
.air-viewport[data-theme="white"] {
  --tetris-ink: var(--brand-text-dark);
  --tetris-muted: var(--brand-muted-dark);
  --tetris-line: var(--brand-line-light);
  --tetris-panel: rgba(255, 255, 255, 0.9);
  --tetris-panel-strong: var(--brand-paper-soft);
  --tetris-accent: var(--brand-teal-deep);
  --tetris-hot: var(--brand-coral-deep);
  --tetris-shadow: var(--brand-shadow-light);
  --pang-ink: var(--brand-text-dark);
  --pang-muted: var(--brand-muted-dark);
  --pang-line: var(--brand-line-light);
  --pang-panel: rgba(255, 255, 255, 0.9);
  --pang-accent: var(--brand-gold-deep);
  --pang-cyan: var(--brand-teal-deep);
  --pang-danger: var(--brand-coral-deep);
  --pang-shadow: var(--brand-shadow-light);
  --air-ink: var(--brand-text-dark);
  --air-muted: var(--brand-muted-dark);
  --air-line: var(--brand-line-light);
  --air-panel: rgba(255, 255, 255, 0.9);
  --air-panel-strong: #ffffff;
  --air-cyan: var(--brand-teal-deep);
  --air-gold: var(--brand-gold-deep);
  --air-red: var(--brand-coral-deep);
  --air-blue: var(--brand-violet-deep);
  --air-shadow: var(--brand-shadow-light);
  color: var(--brand-text-dark);
  background: var(--brand-paper);
}

.tetris-viewport[data-theme="bright"],
.pang-viewport[data-theme="bright"],
.air-viewport[data-theme="bright"] {
  --tetris-panel: rgba(23, 61, 60, 0.94);
  --tetris-panel-strong: #204d4a;
  --tetris-line: rgba(142, 221, 210, 0.3);
  --pang-panel: rgba(23, 61, 60, 0.94);
  --pang-line: rgba(142, 221, 210, 0.3);
  --air-panel: rgba(23, 61, 60, 0.94);
  --air-panel-strong: #204d4a;
  --air-line: rgba(142, 221, 210, 0.3);
  background: #153b3b;
}

.bubble-viewport {
  --bubble-ink: var(--brand-text-dark);
  --bubble-muted: var(--brand-muted-dark);
  --bubble-line: var(--brand-line-light);
  --bubble-panel: rgba(255, 255, 255, 0.9);
  --bubble-accent: var(--brand-teal-deep);
  --bubble-gold: var(--brand-gold-deep);
  font-family: var(--arcade-font-ui);
  color: var(--brand-text-dark);
  background: var(--brand-paper);
}

.bubble-viewport[data-theme="dark"],
.bubble-viewport[data-theme="bright"] {
  --bubble-ink: var(--brand-text);
  --bubble-muted: var(--brand-muted);
  --bubble-line: var(--brand-line-dark);
  --bubble-panel: var(--brand-surface);
  --bubble-accent: var(--brand-teal);
  --bubble-gold: var(--brand-gold);
  color: var(--brand-text);
  background: var(--brand-ink);
}

.bubble-viewport[data-theme="bright"] { background: #153b3b; }

/* Shared frame, panel and control rhythm. */
.tetris-shell,
.pang-shell,
.air-shell { width: min(100%, 1240px); padding: clamp(12px, 1.8vw, 22px); gap: clamp(10px, 1.4vw, 16px); }

.tetris-board-frame,
.pang-stage-frame,
.air-stage-frame {
  border: 2px solid var(--brand-line-dark);
  border-radius: var(--arcade-radius-frame);
  background: var(--brand-stage);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2), 0 22px 52px var(--brand-shadow-dark), inset 0 0 42px rgba(28, 215, 198, 0.1);
}

.tetris-viewport[data-theme="white"] .tetris-board-frame,
.pang-viewport[data-theme="white"] .pang-stage-frame,
.air-viewport[data-theme="white"] .air-stage-frame {
  border-color: var(--brand-line-light);
  background: var(--brand-paper-soft);
  box-shadow: 8px 8px 0 rgba(20, 59, 55, 0.1), 0 22px 52px var(--brand-shadow-light), inset 0 0 42px rgba(28, 215, 198, 0.12);
}

.tetris-viewport[data-theme="bright"] .tetris-board-frame,
.pang-viewport[data-theme="bright"] .pang-stage-frame,
.air-viewport[data-theme="bright"] .air-stage-frame { border-color: rgba(142, 221, 210, 0.3); }

.tetris-button,
.tetris-control,
.pang-button,
.pang-control,
.air-button,
.air-control {
  min-height: var(--arcade-control-height);
  border: 1px solid var(--brand-line-dark);
  border-radius: var(--arcade-radius-control);
  color: var(--brand-text);
  background: color-mix(in srgb, var(--brand-surface-raised) 82%, transparent);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-family: var(--arcade-font-ui);
  font-weight: 850;
  letter-spacing: -0.01em;
}

.tetris-button:hover,
.tetris-control:hover,
.pang-button:hover,
.pang-control:hover,
.air-button:hover,
.air-control:hover {
  border-color: var(--brand-teal);
  color: var(--brand-teal-light);
  background: color-mix(in srgb, var(--brand-teal) 17%, var(--brand-surface-raised));
}

.tetris-button:focus-visible,
.tetris-control:focus-visible,
.tetris-start:focus-visible,
.pang-button:focus-visible,
.pang-control:focus-visible,
.pang-start:focus-visible,
.air-button:focus-visible,
.air-control:focus-visible,
.air-start:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-teal) 62%, transparent);
  outline-offset: 3px;
}

.tetris-viewport[data-theme="white"] .tetris-button,
.tetris-viewport[data-theme="white"] .tetris-control,
.pang-viewport[data-theme="white"] .pang-button,
.pang-viewport[data-theme="white"] .pang-control,
.air-viewport[data-theme="white"] .air-button,
.air-viewport[data-theme="white"] .air-control {
  color: var(--brand-text-dark);
  border-color: var(--brand-line-light);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 3px 3px 0 rgba(28, 72, 68, 0.12), inset 0 1px 0 #fff;
}

.tetris-brand-mark,
.pang-mark,
.air-mark {
  border-color: var(--brand-teal);
  border-radius: var(--arcade-radius-control);
  color: var(--brand-teal);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-teal) 22%, transparent), color-mix(in srgb, var(--brand-gold) 18%, transparent));
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 0 22px color-mix(in srgb, var(--brand-teal) 13%, transparent);
}

.tetris-kicker,
.pang-kicker,
.air-kicker,
.tetris-panel h2,
.air-card-heading { color: var(--brand-teal); }

.tetris-start,
.pang-start,
.air-start {
  min-height: 44px;
  border: 2px solid var(--brand-teal);
  border-radius: var(--arcade-radius-control);
  color: #032625;
  background: linear-gradient(135deg, var(--brand-teal-light), var(--brand-teal) 62%, var(--brand-teal-deep));
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 24px color-mix(in srgb, var(--brand-teal) 18%, transparent);
  font-family: var(--arcade-font-display);
  letter-spacing: -0.02em;
}

.tetris-viewport[data-theme="white"] .tetris-start,
.pang-viewport[data-theme="white"] .pang-start,
.air-viewport[data-theme="white"] .air-start { color: #073a38; }

.tetris-panel,
.tetris-stat,
.tetris-chain,
.pang-stat,
.pang-chain,
.air-card,
.air-stage-chip,
.air-metric,
.air-chain {
  border-color: var(--brand-line-dark);
  border-radius: var(--arcade-radius-panel);
}

.tetris-stat:first-child,
.pang-stat:first-child,
.air-card:first-child { border-color: color-mix(in srgb, var(--brand-teal) 56%, var(--brand-line-dark)); }

.tetris-chain strong,
.pang-chain strong,
.air-chain strong { color: var(--brand-gold-soft); font-family: var(--arcade-font-display); }

.tetris-control[data-action="drop"],
.pang-control[data-action="fire"],
.air-control[data-action="bomb"] { color: var(--brand-coral); border-color: color-mix(in srgb, var(--brand-coral) 62%, var(--brand-line-dark)); }

.pang-control[data-action="fire"],
.air-control[data-action="fire"] { color: var(--brand-teal); border-color: color-mix(in srgb, var(--brand-teal) 62%, var(--brand-line-dark)); }

.tetris-viewport[data-theme="white"] .tetris-chain strong,
.pang-viewport[data-theme="white"] .pang-chain strong,
.air-viewport[data-theme="white"] .air-chain strong { color: var(--brand-gold-deep); }

/* The library shell uses the same frame and control tokens as the games. */
.library-app {
  --library-bg: var(--brand-ink);
  --library-surface: var(--brand-surface);
  --library-surface-strong: var(--brand-surface-raised);
  --library-line: var(--brand-line-dark);
  --library-text: var(--brand-text);
  --library-muted: var(--brand-muted);
  --library-accent: var(--brand-teal);
  --library-gold: var(--brand-gold);
  --library-shadow: var(--brand-shadow-dark);
  font-family: var(--arcade-font-ui);
}

body.white-theme .library-app {
  --library-bg: var(--brand-paper);
  --library-surface: rgba(255, 255, 255, 0.9);
  --library-surface-strong: #ffffff;
  --library-line: var(--brand-line-light);
  --library-text: var(--brand-text-dark);
  --library-muted: var(--brand-muted-dark);
  --library-accent: var(--brand-teal-deep);
  --library-gold: var(--brand-gold-deep);
  --library-shadow: var(--brand-shadow-light);
}

.library-button,
.library-volume,
.library-status,
.library-nav,
.game-card,
.player-shell { border-color: var(--brand-line-dark); border-radius: var(--arcade-radius-panel); }
.library-button { min-height: var(--arcade-control-height); font-family: var(--arcade-font-ui); font-weight: 850; }
.library-button:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.player-shell { border-width: 2px; background: var(--brand-ink-deep); box-shadow: 0 28px 70px var(--brand-shadow-dark), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.brand-lockup { border-color: var(--brand-teal); border-radius: var(--arcade-radius-control); color: var(--brand-teal); background: linear-gradient(145deg, color-mix(in srgb, var(--brand-teal) 20%, transparent), color-mix(in srgb, var(--brand-gold) 16%, transparent)); }
.game-card:hover, .game-card:focus-within { border-color: color-mix(in srgb, var(--brand-teal) 62%, var(--brand-line-dark)); }
.game-cover--bubble { background: radial-gradient(circle at 17% 20%, color-mix(in srgb, var(--brand-violet) 42%, transparent), transparent 22%), linear-gradient(135deg, var(--brand-ink), var(--brand-teal-deep) 58%, var(--brand-gold)); }
.game-cover--shrine { background: radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--brand-gold-soft) 42%, transparent), transparent 24%), linear-gradient(135deg, var(--brand-ink), var(--brand-teal-deep) 58%, var(--brand-violet-deep)); }
.game-cover--tetris { background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--brand-teal-light) 34%, transparent), transparent 25%), linear-gradient(135deg, var(--brand-ink), var(--brand-violet-deep) 58%, var(--brand-coral-deep)); }
.game-cover--pang { background: radial-gradient(circle at 82% 17%, color-mix(in srgb, var(--brand-gold-soft) 35%, transparent), transparent 24%), linear-gradient(135deg, var(--brand-ink), var(--brand-teal-deep) 54%, var(--brand-coral)); }
.game-cover--airstrike { background: var(--brand-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}