.arcade-page {
  --arcade-ink: #172338;
  --arcade-muted: #607087;
  --arcade-surface: #fffdf8;
  --arcade-accent: #d76535;
  --arcade-wall: #263b51;
  --arcade-floor: #f4eddd;
  --arcade-floor-line: rgba(37, 58, 79, .08);
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 221, 175, .45), transparent 34rem),
    var(--background);
  color: var(--arcade-ink);
}

@media (prefers-color-scheme: dark) {
  .arcade-page {
    --arcade-ink: #f1f3f5;
    --arcade-muted: #b6c1cc;
    --arcade-surface: #182332;
    --arcade-accent: #ff9a69;
    --arcade-wall: #344c65;
    --arcade-floor: #172536;
    --arcade-floor-line: rgba(193, 215, 237, .06);
    background:
      radial-gradient(ellipse at 50% -10%, rgba(218, 112, 63, .18), transparent 34rem),
      var(--background);
    color: var(--arcade-ink);
  }
}

.arcade-header,
.arcade-main,
.arcade-footer {
  width: min(100% - 2rem, 760px);
  margin-inline: auto;
}

.arcade-header {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: env(safe-area-inset-top, 0px);
}

.arcade-back,
.arcade-footer a {
  color: var(--accent);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}

.arcade-back { display: inline-flex; min-height: 44px; align-items: center; gap: .45rem; }
.arcade-header .eyebrow { font-size: .62rem; }

.arcade-main { padding-top: 1.1rem; }
.arcade-game-gate { margin-bottom: 1rem; }
.arcade-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.arcade-heading h1 {
  margin: .2rem 0 .4rem;
  color: var(--arcade-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 10vw, 4.1rem);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1;
}
.arcade-intro { max-width: 34rem; margin: 0; color: var(--arcade-muted); font-size: .93rem; }
.arcade-clock {
  display: flex;
  min-width: 5.3rem;
  align-items: baseline;
  justify-content: center;
  gap: .2rem;
  padding: .5rem .65rem;
  border: 1px solid color-mix(in srgb, var(--arcade-accent) 32%, var(--line));
  border-radius: .85rem;
  background: color-mix(in srgb, var(--arcade-accent) 10%, var(--surface));
  color: var(--arcade-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.arcade-clock-icon { align-self: center; font-size: .9rem; }
.arcade-clock-unit { align-self: center; font-size: .65rem; font-weight: 700; }

.game-panel {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--arcade-ink) 12%, transparent);
  border-radius: 1.25rem;
  background: var(--arcade-surface);
  box-shadow: 0 18px 46px rgba(27, 38, 51, .12);
}
.game-topline {
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .55rem .85rem;
  color: var(--arcade-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.game-topline > span { display: inline-flex; align-items: center; gap: .38rem; }
.game-level { opacity: .7; }
.game-dot { width: .48rem; height: .48rem; border-radius: 50%; }
.game-dot-mouse { background: #d7a583; }
.game-dot-cat { background: #8a688f; }
.game-board-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--arcade-floor);
  touch-action: none;
}
#game-board { display: block; width: 100%; height: clamp(360px, 60vh, 550px); outline: none; cursor: grab; }
#game-board:active { cursor: grabbing; }
.game-radar {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 120px;
  height: 88px;
  border: 2px solid #fff0ae;
  border-radius: .4rem;
  opacity: .9;
  pointer-events: none;
}
.game-render-error { margin: .6rem; padding: .8rem; color: var(--arcade-ink); background: var(--arcade-surface); }
#game-board:focus-visible { box-shadow: inset 0 0 0 3px var(--arcade-accent); }
.game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: .75rem;
  background: rgba(13, 23, 35, .43);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.game-overlay[hidden] { display: none; }
.game-overlay-card {
  pointer-events: auto;
  width: min(100%, 24rem);
  padding: clamp(1rem, 4vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 1.05rem;
  background: var(--arcade-surface);
  box-shadow: 0 14px 42px rgba(0, 0, 0, .22);
  text-align: center;
}
.game-result-icon { display: block; margin-bottom: .35rem; font-size: 2.15rem; line-height: 1; }
.game-overlay-card .eyebrow { font-size: .61rem; }
.game-overlay-card h2 {
  margin: .35rem 0 .5rem;
  color: var(--arcade-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 500;
  line-height: 1.12;
}
.game-overlay-card > p:not(.eyebrow) { margin: 0 0 1rem; color: var(--arcade-muted); font-size: .83rem; line-height: 1.5; }
.game-overlay-card .button { width: min(100%, 15rem); background: var(--arcade-accent); }

.game-controls {
  display: flex;
  flex-wrap: wrap;
  min-height: 5.2rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .85rem .75rem;
}
.game-status { flex: 1 1 100%; margin: 0; color: var(--arcade-muted); font-size: .78rem; }
.game-control-label { color: var(--arcade-muted); font-size: .65rem; letter-spacing: .12em; }
.game-stick-control { display: grid; justify-items: center; gap: .3rem; }
.movement-stick { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--arcade-floor) 66%, var(--surface)); touch-action: none; user-select: none; }
.movement-stick-knob { width: 40px; height: 40px; border-radius: 50%; background: #52bdb0; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 3px 15px rgba(0, 0, 0, .2); pointer-events: none; }
.camera-look-pad { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: .6rem; padding: .5rem; border-block: 1px solid var(--line); background: color-mix(in srgb, var(--arcade-accent) 9%, var(--arcade-surface)); color: var(--arcade-ink); font-size: .78rem; cursor: grab; touch-action: none; user-select: none; }
.camera-look-pad:active { cursor: grabbing; }
.camera-look-pad:focus-visible { outline: 2px solid var(--arcade-accent); outline-offset: -3px; }
.game-dpad {
  display: grid;
  grid-template: repeat(2, 44px) / repeat(3, 44px);
  gap: .2rem;
  touch-action: none;
}
.dpad-button {
  display: grid;
  min-width: 44px;
  min-height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--arcade-ink) 13%, transparent);
  border-radius: .7rem;
  background: color-mix(in srgb, var(--arcade-floor) 66%, var(--surface));
  color: var(--arcade-ink);
  font: 800 1.3rem/1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.dpad-button:active { background: color-mix(in srgb, var(--arcade-accent) 24%, var(--surface)); }
.dpad-up { grid-area: 1 / 2; }
.dpad-left { grid-area: 2 / 1; }
.dpad-down { grid-area: 2 / 2; }
.dpad-right { grid-area: 2 / 3; }
.arcade-footnote { margin: .8rem 0; color: var(--arcade-muted); font-size: .78rem; text-align: center; }
.arcade-footer { padding: .5rem 0 calc(1.4rem + env(safe-area-inset-bottom)); text-align: center; }

@media (max-width: 480px) {
  .arcade-header,
  .arcade-main,
  .arcade-footer { width: min(100% - 1rem, 760px); }
  .arcade-header { min-height: 3.7rem; }
  .arcade-main { padding-top: .55rem; }
  .arcade-heading { align-items: center; margin-bottom: .75rem; }
  .arcade-heading h1 { font-size: clamp(2.2rem, 11vw, 3rem); }
  .arcade-intro { max-width: 15rem; font-size: .8rem; line-height: 1.4; }
  .arcade-clock { min-width: 4.6rem; padding: .4rem .45rem; font-size: 1.05rem; }
  .game-panel { border-radius: .9rem; }
  .game-topline { min-height: 2.4rem; padding-inline: .55rem; font-size: .58rem; }
  .game-controls { align-items: end; padding-inline: .6rem; }
  .game-status { padding-bottom: .25rem; }
}

@media (max-height: 700px) and (max-width: 480px) {
  .arcade-main { padding-top: .2rem; }
  .arcade-heading { margin-bottom: .45rem; }
  .game-controls { min-height: 4.6rem; }
  .arcade-footnote { margin: .4rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  .arcade-page *, .arcade-page *::before, .arcade-page *::after { scroll-behavior: auto; }
}

.maze-page .game-topline .arcade-clock { min-width: 0; padding: .2rem .4rem; font-size: 1rem; }
.maze-page .game-topline .game-level { font-size: .6rem; }

@media (max-width: 780px), (max-height: 600px) {
  .maze-page:has(#arcade-content:not([hidden])) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .maze-page:has(#arcade-content:not([hidden])) .account-header { position: fixed; top: 0; right: 0; width: min(55%, 22rem); }
  .maze-page .arcade-header { min-height: calc(56px + env(safe-area-inset-top, 0px)); margin-left: .5rem; width: 43%; gap: 0; }
  .maze-page .arcade-header .eyebrow { display: none; }
  .maze-page .arcade-back { font-size: .75rem; line-height: 1.2; }
  .maze-page .arcade-main { display: flex; flex-direction: column; min-height: 0; width: 100%; padding: 0 .4rem; }
  .maze-page #arcade-content:not([hidden]) { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .maze-page .arcade-heading { flex: 0 0 auto; margin: 0; padding: .15rem .4rem .4rem; }
  .maze-page .arcade-heading h1 { margin: 0; font-size: 1.4rem; }
  .maze-page .arcade-heading .eyebrow,
  .maze-page .arcade-intro,
  .maze-page .arcade-footnote,
  .maze-page:has(#arcade-content:not([hidden])) .arcade-footer { display: none; }
}

.maze-page.game-focused .game-panel { display: flex; flex-direction: column; min-height: 0; }
.maze-page.game-focused .game-board-wrap { flex: 1; min-height: 0; }
.maze-page.game-focused #game-board { height: 100%; }
.maze-page.game-focused .game-topline,
.maze-page.game-focused .game-controls,
.maze-page.game-focused .camera-look-pad { flex: 0 0 auto; }

@media (max-width: 780px), (max-height: 600px) {
  .maze-page .game-panel { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .maze-page .game-board-wrap { flex: 1; min-height: 0; }
  .maze-page #game-board { height: 100%; }
  .maze-page .game-topline { min-height: 48px; padding: 0 .4rem; flex: 0 0 auto; }
  .maze-page .game-controls { position: relative; flex: 0 0 auto; min-height: 0; gap: .3rem; padding: .35rem .65rem; }
  .maze-page .game-status { font-size: .7rem; line-height: 1.2; padding: 0; }
  .maze-page .camera-look-pad { flex: 0 0 auto; min-height: 44px; padding: .2rem; }
  .maze-page .movement-stick { width: 80px; height: 80px; }
  .maze-page .game-stick-control { gap: 0; }
  .maze-page .game-control-label { line-height: 1.2; }
  .maze-page .game-overlay { padding: .4rem; overflow: auto; }
  .maze-page .game-overlay-card { max-height: 100%; overflow: auto; padding: .65rem; }
  .maze-page .game-result-icon,
  .maze-page .game-overlay-card .eyebrow { display: none; }
  .maze-page .game-overlay-card h2 { font-size: 1.2rem; margin-top: 0; }
  .maze-page .game-overlay-card > p:not(.eyebrow) { font-size: .75rem; line-height: 1.35; margin-bottom: .5rem; }
  .maze-page .game-overlay-card .button { min-height: 44px; padding: .4rem; }
  .maze-page .game-radar { width: 90px; height: 66px; top: .4rem; right: .4rem; }
}

@media (max-height: 500px) and (min-width: 550px) {
  .maze-page .arcade-heading { display: none; }
  .maze-page .game-panel,
  .maze-page.game-focused .game-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    grid-template-rows: 48px minmax(0, 1fr) 44px;
  }
  .maze-page .game-topline { grid-area: 1 / 1 / 2 / 3; }
  .maze-page .game-board-wrap { grid-area: 2 / 1 / 4 / 2; height: 100%; }
  .maze-page .game-controls { grid-area: 2 / 2; align-content: center; padding: .2rem .5rem; }
  .maze-page .camera-look-pad { grid-area: 3 / 2; font-size: .65rem; }
  .maze-page .game-render-error:not([hidden]),
  .maze-page [data-game-screen-status]:not(:empty) { position: absolute; z-index: 2; top: 3rem; left: 0; right: 0; }
}

/* Sound toggle sits just left of the Full screen / Exit control in every game's top bar. */
.arcade-sound {
  min-width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: .35rem .55rem;
  border: 1px solid var(--line);
  border-radius: .6rem;
  background: var(--arcade-surface);
  color: var(--arcade-ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  order: 9;
  flex-shrink: 0;
}
.arcade-sound:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.arcade-sound[aria-pressed="true"] { opacity: .7; }
.arcade-sound + [data-game-screen-toggle] { margin-left: .4rem; }