:root {
  color-scheme: dark;
  --ink: #f6fbff;
  --muted: #b4c8dc;
  --panel: rgba(9, 19, 42, 0.92);
  --panel-strong: #101f42;
  --line: rgba(164, 206, 255, 0.22);
  --accent: #ffd66d;
  --accent-2: #68e1ff;
  --danger: #ff7b9b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

html.wp-classic-battle-active { overflow: hidden; overscroll-behavior: none; }

body {
  min-height: 100svh;
  color: var(--ink);
  background:
    radial-gradient(circle at 16% 8%, rgba(91, 159, 255, 0.22), transparent 32rem),
    radial-gradient(circle at 90% 18%, rgba(172, 91, 255, 0.18), transparent 28rem),
    #050b1d;
}

button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, canvas:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.classic-arcade {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 16px 14px 24px;
}

.arcade-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 2px 18px;
}

/* The shared shell owns the visible Main title, language, and settings row.
   Keep this legacy wrapper in the DOM so its locale control can be adopted,
   but do not render a second title above the Main card. */
.arcade-header { display: none; }

.eyebrow { color: var(--accent-2); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { margin-top: 4px; font-size: clamp(1.7rem, 7vw, 3.25rem); line-height: 1; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.45rem, 5vw, 2.3rem); }
.tagline, .objective, .guide-copy { color: var(--muted); line-height: 1.55; }
.tagline { margin-top: 8px; max-width: 54rem; }

.locale-picker { display: grid; gap: 5px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.locale-picker select { min-width: 112px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; color: var(--ink); background: #0b1732; }

.screen[hidden] { display: none !important; }
.arcade-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18, 35, 73, 0.94), var(--panel));
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.main-panel { display: grid; gap: 18px; padding: 18px; }
.main-copy { display: grid; align-content: center; gap: 14px; }
.main-progress { min-height: 44px; display: flex; align-items: center; padding: 9px 12px; border: 1px solid rgba(104, 225, 255, 0.24); border-radius: 12px; background: rgba(5, 18, 45, 0.58); color: var(--accent-2); font-size: 0.84rem; font-weight: 800; line-height: 1.3; }
.preview-art { min-height: 230px; overflow: hidden; border-radius: 18px; background: #0d1732; }
.preview-art img { display: block; width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.guide-copy { font-size: 0.93rem; }
.guide-copy strong { color: var(--ink); }
.wave-plan[hidden] { display: none !important; }
.wave-plan {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(104, 225, 255, 0.24);
  border-radius: 16px;
  background: rgba(5, 18, 45, 0.58);
}
.wave-plan-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wave-plan-kicker { color: var(--accent-2); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.wave-plan h2 { color: var(--ink); font-size: 1.05rem; line-height: 1.2; }
.wave-plan-intro { margin-top: 5px; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.wave-plan-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 11px 0 0; padding: 0; list-style: none; }
.wave-plan-step { min-width: 0; padding: 10px; border: 1px solid rgba(164, 206, 255, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.045); }
.wave-plan-label { display: block; color: var(--accent); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.wave-plan-step strong { display: block; margin-top: 3px; color: var(--ink); font-size: 0.86rem; line-height: 1.25; }
.wave-plan-step p { margin-top: 5px; color: var(--muted); font-size: 0.76rem; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .wave-plan { padding: 12px; }
  .wave-plan-list { grid-template-columns: 1fr; }
  .wave-plan-step { padding: 9px 10px; }
}
@media (min-width: 561px) and (max-width: 919px) and (max-height: 500px) {
  .wave-plan-list { grid-template-columns: 1fr; }
}

.primary, .secondary, .control-button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 10px 15px;
  color: var(--ink);
  font-weight: 800;
  transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
}
.primary { background: linear-gradient(135deg, #ffd66d, #ff9d5e); color: #27152b; box-shadow: 0 9px 24px rgba(255, 164, 94, 0.24); }
.secondary { border-color: var(--line); background: rgba(255, 255, 255, 0.07); }
.primary:hover, .secondary:hover, .control-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.primary:active, .secondary:active, .control-button:active { transform: translateY(1px) scale(0.98); }
.primary { width: 100%; }
.main-copy > .primary { min-height: 52px; }

.battle-screen { min-height: calc(100svh - 56px); }
.battle-panel { padding: 12px; }
.battle-top { display: grid; gap: 10px; }
.battle-topline, .control-row, .hud { display: flex; align-items: center; gap: 8px; }
.battle-topline { justify-content: space-between; }
.round-label { color: var(--accent); font-size: 0.83rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.icon-button { width: 44px; min-width: 44px; padding: 8px; }

/* General Space Rocks has a shared shell return overlay at the physical
   left edge. Reserve that strip in the authored row while the viewport is
   narrower than the desktop canvas cap; otherwise the overlay hides the
   round label even though the Battle controls themselves remain reachable. */
@media (max-width: 919px) {
  body[data-game-id="space-rocks"].is-game-playing .battle-topline {
    padding-left: 56px;
  }
}

/* The shared shell promotes Maze Chase's Back control into a fixed physical
   left-edge header. In portrait, reserve that strip in the native row so the
   Stage label remains readable instead of sitting beneath the promoted
   control. Landscape keeps the established composition. */
@media (max-width: 649px) and (min-height: 501px) {
  body.is-game-playing[data-game-id="maze-chase"] .battle-topline {
    padding-left: 56px;
  }
}

.hud { flex-wrap: wrap; justify-content: space-between; padding: 10px 2px; }
.hud-item { display: grid; gap: 2px; min-width: 62px; }
.hud-label { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.hud-value { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 900; }
.canvas-wrap { width: 100%; max-width: 920px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; background: #030817; touch-action: none; }
.canvas-wrap.maze { aspect-ratio: 1 / 1; }
.canvas-wrap.space { aspect-ratio: 960 / 540; }
canvas { display: block; width: 100%; height: 100%; image-rendering: auto; }
.game-message { min-height: 27px; padding: 9px 2px 2px; color: var(--muted); text-align: center; font-size: 0.9rem; }
.game-message[data-tone="danger"] { color: var(--danger); }
.game-message[data-tone="success"] { color: var(--accent); }

.touch-controls { display: flex; justify-content: center; gap: 9px; padding: 10px 0 2px; }
.touch-controls.maze-controls { display: grid; grid-template-columns: repeat(3, minmax(52px, 70px)); grid-template-rows: repeat(2, 48px); }
.maze-controls .control-button:nth-child(1) { grid-column: 2; }
.maze-controls .control-button:nth-child(2) { grid-column: 1; grid-row: 2; }
.maze-controls .control-button:nth-child(3) { grid-column: 2; grid-row: 2; }
.maze-controls .control-button:nth-child(4) { grid-column: 3; grid-row: 2; }
.space-controls { flex-wrap: wrap; }
.space-controls .control-button { min-width: 76px; }
.control-button { border-color: rgba(116, 213, 255, 0.3); background: rgba(67, 151, 208, 0.16); color: var(--accent-2); user-select: none; touch-action: none; }
.control-button.is-held { background: rgba(255, 214, 109, 0.25); color: var(--accent); }
.control-hint { color: var(--muted); font-size: 0.78rem; text-align: center; }

.result-panel { padding: 26px 20px; }
.result-copy { margin-top: 9px; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 22px 0; }
.stat { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: rgba(255,255,255,0.05); }
.stat strong, .stat span { display: block; }
.stat span { color: var(--muted); font-size: 0.73rem; }
.stat strong { margin-top: 5px; font-size: 1.2rem; }
.result-actions { display: grid; gap: 9px; }
.confirm-back { margin: 4px 0 10px; padding: 12px; border: 1px solid rgba(255, 214, 109, 0.35); border-radius: 14px; background: rgba(255, 214, 109, 0.08); }
.confirm-back[hidden] { display: none; }
.confirm-back p { color: var(--muted); font-size: 0.86rem; }
.confirm-back .control-row { margin-top: 9px; }
.general-reserve { width: calc(100% - 28px); height: 56px; margin: 0 14px; }
.battle-screen { position: relative; }
.battle-screen.has-result .battle-panel { padding-bottom: 22px; }
.battle-screen.has-result #resultScreen { display: block; margin-top: 12px; }
.arcade-footer { padding: 16px 2px 0; color: var(--muted); font-size: 0.78rem; text-align: center; }

/* Active Battle owns the visible viewport. Main keeps normal document flow so
   the public guide remains readable before play starts. */
body.is-game-playing {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--wp-mobile-vh, 100dvh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-game-playing .classic-arcade {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 56px;
  overflow: hidden;
}

body.is-game-playing .arcade-header,
body.is-game-playing .arcade-footer { display: none; }
body.is-game-playing .battle-screen { min-height: 0; height: 100%; overflow: hidden; }
body.is-game-playing .battle-panel {
  width: min(100%, 920px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 0;
}
body.is-game-playing .battle-top,
body.is-game-playing .hud,
body.is-game-playing .game-message,
body.is-game-playing .touch-controls,
body.is-game-playing .control-hint { flex: 0 0 auto; }
body.is-game-playing .canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
}
body.is-game-playing .canvas-wrap canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
}
/* The playfield is intentionally landscape. Let its wrapper collapse to the
   native ratio so the flex column does not center a small Canvas inside a
   tall empty slot on phone portrait screens. */
body.is-game-playing .canvas-wrap.space {
  flex: 0 0 auto;
  aspect-ratio: 960 / 540;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}
body.is-game-playing .canvas-wrap.space canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
}
@media (max-width: 560px) and (min-height: 561px) {
  body.is-game-playing .space-controls {
    flex-wrap: nowrap;
    gap: 4px;
  }
  body.is-game-playing .space-controls .control-button {
    min-width: 0;
    flex: 1 1 0;
    padding: 8px 4px;
  }
}
@media (min-width: 650px) and (max-height: 500px) {
  body.is-game-playing .canvas-wrap.space {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
  }
  body.is-game-playing .canvas-wrap.space canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
}
body.is-game-playing .general-reserve {
  grid-row: 2;
  width: min(100%, 920px);
  margin: 0 auto;
}
body.is-game-playing .battle-screen.has-result .battle-panel { padding-bottom: 12px; }
body.is-game-playing .battle-panel { position: relative; }
body.is-game-playing .battle-screen.has-result .battle-topline,
body.is-game-playing .battle-screen.has-result .hud,
body.is-game-playing .battle-screen.has-result .canvas-wrap,
body.is-game-playing .battle-screen.has-result .game-message,
body.is-game-playing .battle-screen.has-result .touch-controls,
body.is-game-playing .battle-screen.has-result .control-hint { visibility: hidden; pointer-events: none; }
body.is-game-playing .battle-screen.has-result #resultScreen {
  position: absolute;
  inset: 0;
  z-index: 4;
  min-height: 0;
  margin: 0;
  padding: 12px;
  display: grid;
  place-items: center;
  overflow: auto;
  background: #071333;
}
body.is-game-playing .battle-screen.has-result .result-panel { width: min(100%, 560px); max-height: 100%; overflow: auto; }
body.is-game-playing .confirm-back {
  position: absolute;
  z-index: 5;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

@media (min-width: 650px) {
  .classic-arcade { padding: 28px 24px 34px; }
  .main-panel { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: stretch; padding: 24px; }
  .preview-art, .preview-art img { min-height: 360px; }
  .battle-panel { padding: 18px; }
  .general-reserve { width: calc(100% - 40px); margin: 0 20px; }
  .battle-top { grid-template-columns: 1fr auto; align-items: center; }
  .hud { grid-column: 1 / -1; }
  .result-panel { padding: 38px 42px; }
  .touch-controls.maze-controls { grid-template-columns: repeat(4, minmax(52px, 70px)); grid-template-rows: 48px; }
  .maze-controls .control-button:nth-child(n) { grid-column: auto; grid-row: auto; }
}

@media (min-width: 1000px) {
  .main-panel { grid-template-columns: minmax(0, 1fr) 420px; }
  .preview-art, .preview-art img { min-height: 420px; }
}

@media (min-width: 650px) and (max-height: 500px) {
  body.is-game-playing .battle-panel { padding: 6px 12px; }
  body.is-game-playing .battle-topline { min-height: 38px; gap: 6px; }
  body.is-game-playing .battle-topline .secondary { min-height: 38px; padding: 6px 10px; }
  body.is-game-playing .battle-topline .icon-button { min-height: 38px; height: 38px; }
  body.is-game-playing[data-game-id="maze-chase"] .battle-topline [data-wp-battle-utility] { min-height: 48px; height: 48px; }
  body.is-game-playing[data-game-id="space-rocks"] .battle-topline [data-wp-battle-utility] { min-height: 44px; height: 44px; }
  body.is-game-playing .hud { padding: 4px 2px; }
  body.is-game-playing .game-message { min-height: 18px; padding: 2px; font-size: 0.75rem; }
  body.is-game-playing .touch-controls { padding: 5px 0 0; }
  body.is-game-playing .control-hint { display: none; }
}

/* Space Rocks Result shares the fixed Battle envelope. In short landscape,
   the portrait Result stack is taller than the 334px play area and leaves
   both recovery buttons below the physical viewport. Keep the same Result
   content and actions, but place the actions in a compact side track and
   lay out all five stats in one bounded row. */
@media (min-width: 650px) and (max-height: 500px) and (min-aspect-ratio: 3 / 2) {
  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result #resultScreen {
    padding: 8px 12px;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result .result-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(176px, 220px);
    grid-template-areas:
      "title actions"
      "copy actions"
      "stats actions";
    align-items: center;
    column-gap: 18px;
    padding: 14px 18px;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result #resultTitle {
    grid-area: title;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result #resultCopy {
    grid-area: copy;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result #resultStats {
    grid-area: stats;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 0;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result #resultStats .stat {
    min-width: 0;
    padding: 6px 4px;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result #resultStats .stat span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result .result-actions {
    grid-area: actions;
    align-self: stretch;
    align-content: center;
    gap: 6px;
  }

  body[data-game-id="space-rocks"].is-game-playing .battle-screen.has-result .result-actions > button {
    min-height: 44px;
  }
}

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