:root {
  --night: #090b24;
  --night-2: #11163b;
  --panel: #171942;
  --panel-2: #22275b;
  --ink: #fff4d5;
  --muted: #b8b9d7;
  --gold: #ffd45e;
  --gold-dark: #b96b36;
  --cyan: #59e1e7;
  --pink: #f064a8;
  --green: #8ee66b;
  --danger: #ff6b6b;
  --outline: #050615;
  --shadow: 6px 6px 0 var(--outline);
  --pixel-font: "Courier New", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--night); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(72, 54, 139, .22), transparent 42%),
    linear-gradient(180deg, var(--night-2), var(--night) 68%);
  font-family: var(--pixel-font);
  image-rendering: pixelated;
}

button, a { font: inherit; }
button { color: inherit; }

button:focus-visible, a:focus-visible, canvas:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--night);
  background: #fff;
}
.skip-link:focus { top: 12px; }

.starfield, .starfield::before, .starfield::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  background-image:
    radial-gradient(circle at 9% 18%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 22% 77%, var(--cyan) 0 1px, transparent 1px),
    radial-gradient(circle at 48% 12%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 66% 53%, var(--gold) 0 1px, transparent 1px),
    radial-gradient(circle at 88% 25%, #fff 0 1px, transparent 1px),
    radial-gradient(circle at 94% 88%, var(--pink) 0 1px, transparent 1px);
  background-size: 310px 270px;
  opacity: .36;
}
.starfield::before { transform: translate(80px, 40px); opacity: .28; }
.starfield::after { transform: translate(-55px, 110px); opacity: .18; }

.arcade-shell { position: relative; z-index: 1; width: min(1180px, 100%); margin: 0 auto; }
.menu-screen { padding: clamp(18px, 3vw, 38px); }

.arcade-header {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: end;
  padding: 34px 0 28px;
  border-bottom: 4px solid var(--panel-2);
}

.back-learning {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cyan);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.back-learning:hover { color: #fff; }

.brand-lockup { display: flex; align-items: center; gap: 20px; min-width: 0; }
.moon-mark {
  flex: 0 0 70px;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--night);
  background: var(--gold);
  border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--pink), 9px 9px 0 var(--outline);
  clip-path: polygon(20% 0, 80% 0, 80% 12%, 92% 12%, 92% 32%, 100% 32%, 100% 68%, 92% 68%, 92% 88%, 80% 88%, 80% 100%, 20% 100%, 20% 88%, 8% 88%, 8% 68%, 0 68%, 0 32%, 8% 32%, 8% 12%, 20% 12%);
}
.moon-mark span { animation: mark-spin 9s steps(8) infinite; }

.eyebrow {
  margin: 0 0 6px;
  color: var(--cyan);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

h1, h2, h3, p { overflow-wrap: anywhere; }
h1 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(29px, 5vw, 58px);
  line-height: .96;
  letter-spacing: -.07em;
  text-shadow: 3px 3px 0 #7e3568;
}
.lede { max-width: 680px; margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.icon-button, .top-action {
  border: 2px solid #474d87;
  background: var(--panel);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--outline);
}
.icon-button { min-height: 42px; padding: 8px 10px; font-size: 12px; }
.icon-button span:first-child { color: var(--gold); margin-right: 5px; }
.icon-button:hover, .icon-button[aria-pressed="true"] { border-color: var(--cyan); background: #252a61; }

.arcade-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 130px)) 1fr;
  gap: 14px;
  align-items: stretch;
  margin: 26px 0;
}
.arcade-status > div, .daily-callout {
  margin: 0;
  padding: 14px;
  border: 2px solid #363c77;
  background: rgba(20, 23, 61, .78);
  box-shadow: 3px 3px 0 var(--outline);
}
.arcade-status > div { display: flex; flex-direction: column; gap: 4px; }
.status-value { color: var(--gold); font-size: 20px; font-weight: 700; }
.status-label { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.daily-callout { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--green); font-size: 12px; text-align: right; }
.daily-callout span { color: var(--gold); font-size: 22px; }

.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.game-card {
  --accent: var(--cyan);
  position: relative;
  display: grid;
  grid-template-columns: 126px 1fr;
  min-height: 176px;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  border: 3px solid #41477e;
  background: var(--panel);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s steps(2), border-color .12s;
}
.game-card::after {
  content: "PLAY →";
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}
.game-card:hover { transform: translate(-2px, -3px); border-color: var(--accent); box-shadow: 8px 9px 0 var(--outline); }
.game-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--outline); }
.card-preview { position: relative; min-height: 100%; background: #0b0d2b; border-right: 3px solid #41477e; }
.card-preview canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.card-number { position: absolute; left: 8px; top: 8px; padding: 3px 5px; color: var(--night); background: var(--accent); font-size: 10px; font-weight: 700; }
.card-content { min-width: 0; padding: 18px 18px 40px; }
.card-content .eyebrow { color: var(--accent); }
.card-content h2 { margin: 3px 0 8px; color: #fff; font-size: clamp(16px, 2vw, 22px); line-height: 1.1; letter-spacing: -.04em; }
.card-content p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.card-meta { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; }
.card-meta span { padding: 4px 6px; border: 1px solid #424878; color: #d9daf0; font-size: 9px; text-transform: uppercase; }
.card-best { color: var(--gold) !important; border-color: #806a36 !important; }

.arcade-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 30px 0 10px; color: #8689b2; font-size: 10px; }
kbd { padding: 2px 5px; color: #fff; border: 1px solid #555d91; border-bottom-width: 3px; background: #1b1e4a; }
.text-button { padding: 8px; color: var(--pink); border: 0; background: none; cursor: pointer; text-decoration: underline; }

/* Active game */
.game-screen { min-height: 100dvh; padding: clamp(10px, 2vw, 24px); }
.game-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-bottom: 14px; }
.back-button, .top-action { min-height: 42px; padding: 9px 12px; cursor: pointer; }
.back-button { justify-self: start; color: var(--cyan); border: 2px solid #454b80; background: var(--panel); box-shadow: 3px 3px 0 var(--outline); }
.current-game-heading { display: flex; align-items: center; gap: 12px; text-align: left; }
.current-game-heading h1 { color: #fff; font-size: clamp(18px, 3vw, 30px); text-shadow: 2px 2px 0 #713364; white-space: nowrap; }
.current-game-heading .eyebrow { margin-bottom: 2px; }
.cabinet-number { padding: 6px; color: var(--night); background: var(--gold); font-weight: 700; box-shadow: 3px 3px 0 var(--pink); }
.game-top-actions { justify-self: end; display: flex; gap: 8px; }
.top-action { width: 42px; font-size: 17px; }

.game-stage {
  position: relative;
  width: min(100%, calc((100dvh - 170px) * 1.7778), 1360px);
  margin: 0 auto;
  border: 5px solid #353b73;
  background: #050615;
  box-shadow: 0 0 0 4px var(--outline), 12px 14px 0 rgba(0,0,0,.55), 0 0 55px rgba(89,225,231,.1);
  touch-action: none;
}
body.broom-race-mode .game-stage {
  width: min(100%, calc((100dvh - 150px) * 1.7778), 1480px);
}
#game-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; background: #101337; image-rendering: auto; cursor: crosshair; position: relative; z-index: 2; }
.scanlines { display: none; }
.announcement { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); color: #fff; font-size: clamp(12px, 2vw, 22px); font-weight: 700; text-align: center; text-shadow: 3px 3px 0 #000; pointer-events: none; opacity: 0; }
.announcement.show { animation: announce .85s steps(5); }

.desktop-controls { margin: 18px auto 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
.touch-controls { display: none; width: min(100%, 620px); margin: 14px auto 0; justify-content: space-between; align-items: center; }
.d-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 36px); }
.d-pad button, .action-pad button { border: 2px solid #596195; background: #252a61; box-shadow: 3px 3px 0 var(--outline); touch-action: none; }
.d-pad [data-control="up"] { grid-column: 2; grid-row: 1; }
.d-pad [data-control="left"] { grid-column: 1; grid-row: 2; }
.d-pad [data-control="down"] { grid-column: 2; grid-row: 2; }
.d-pad [data-control="right"] { grid-column: 3; grid-row: 2; }
.action-pad { display: flex; align-items: center; gap: 14px; }
.action-pad button { border-radius: 50%; color: #fff; font-weight: 700; }
.action-primary { width: 58px; height: 58px; background: #9c336a !important; }
.action-secondary { width: 45px; height: 45px; background: #2e7192 !important; }
body.broom-race-mode .d-pad [data-control="up"],
body.broom-race-mode .d-pad [data-control="down"],
body.broom-race-mode .action-secondary { display: none; }
body.broom-race-mode .d-pad { display: flex; gap: 14px; align-items: center; }
body.broom-race-mode .d-pad [data-control="left"],
body.broom-race-mode .d-pad [data-control="right"] { width: 62px; height: 54px; font-size: 20px; }
body.broom-race-mode .action-primary { width: 78px; height: 64px; border-radius: 18px; font-size: 11px; }

/* Modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(3, 4, 18, .86); backdrop-filter: blur(4px); }
.modal-backdrop[hidden] { display: none; }
.game-modal { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 36px); overflow: auto; padding: clamp(22px, 4vw, 38px); border: 4px solid #4a518a; background: linear-gradient(180deg, #202558, #141638); box-shadow: 9px 9px 0 var(--outline); text-align: center; }
.game-modal::before, .game-modal::after { content: ""; position: absolute; width: 12px; height: 12px; background: var(--gold); }
.game-modal::before { top: 8px; left: 8px; }
.game-modal::after { top: 8px; right: 8px; }
.modal-art { width: 104px; height: 70px; margin: 0 auto 15px; image-rendering: pixelated; }
.modal-kicker { color: var(--cyan); }
.game-modal h2 { margin: 0; color: var(--gold); font-size: clamp(25px, 6vw, 40px); line-height: 1; letter-spacing: -.06em; text-shadow: 3px 3px 0 #7d3568; }
.modal-copy { margin: 15px auto; color: var(--muted); font-size: 12px; line-height: 1.6; }
.how-to-play { display: grid; gap: 8px; margin: 18px 0; text-align: left; }
.instruction-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; padding: 9px; border: 1px solid #3f467c; background: rgba(8,10,37,.45); color: #d7d8ec; font-size: 10px; line-height: 1.4; }
.instruction-row strong { color: var(--cyan); text-align: right; }
.result-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 20px 0; }
.result-grid[hidden] { display: none; }
.result-stat { padding: 11px 8px; border: 1px solid #454b80; background: #101231; }
.result-stat strong { display: block; color: var(--gold); font-size: 18px; }
.result-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.result-stat.rank { grid-column: 1 / -1; border-color: #98753b; }
.result-stat.rank strong { font-size: 22px; }
.modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pixel-button { min-height: 48px; padding: 11px 15px; border: 3px solid var(--outline); cursor: pointer; box-shadow: 4px 4px 0 var(--outline); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pixel-button:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--outline); }
.pixel-button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--outline); }
.pixel-button.primary { color: #161330; background: var(--gold); }
.pixel-button.secondary { color: #fff; background: #343a74; }

.toast { position: fixed; z-index: 80; left: 50%; bottom: 24px; max-width: calc(100% - 30px); transform: translate(-50%, 30px); padding: 10px 14px; color: var(--night); background: var(--cyan); box-shadow: 4px 4px 0 var(--outline); font-weight: 700; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

body.high-contrast { --night: #000; --night-2: #080808; --panel: #111; --panel-2: #222; --ink: #fff; --muted: #eee; --gold: #ffeb3b; --cyan: #58ffff; --pink: #ff70bd; --green: #aaff72; }
body.high-contrast .game-card, body.high-contrast .arcade-status > div { border-color: #fff; }
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }

@keyframes mark-spin { to { transform: rotate(360deg); } }
@keyframes announce { 0% { opacity: 0; transform: translate(-50%, 8px) scale(1.3); } 20%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; } }

@media (max-width: 800px) {
  .arcade-header { grid-template-columns: 1fr; }
  .header-actions { justify-content: flex-start; }
  .arcade-status { grid-template-columns: repeat(3, 1fr); }
  .daily-callout { grid-column: 1 / -1; justify-content: center; text-align: center; }
  .game-grid { grid-template-columns: 1fr; }
  .game-topbar { grid-template-columns: auto 1fr auto; }
  .current-game-heading { justify-self: center; }
  .current-game-heading .cabinet-number, .current-game-heading .eyebrow { display: none; }
}

@media (pointer: coarse), (max-width: 700px) {
  .touch-controls { display: flex; }
  .desktop-controls { display: none; }
  .game-stage { width: 100%; }
}

@media (max-width: 520px) {
  .menu-screen { padding: 16px; }
  .arcade-header { padding-top: 38px; }
  .brand-lockup { align-items: flex-start; gap: 13px; }
  .moon-mark { flex-basis: 48px; width: 48px; height: 48px; font-size: 20px; border-width: 3px; }
  .button-label { display: none; }
  .icon-button { min-width: 44px; font-size: 17px; }
  .icon-button span:first-child { margin: 0; }
  .arcade-status { gap: 7px; }
  .arcade-status > div { padding: 10px 7px; }
  .status-value { font-size: 14px; }
  .status-label { font-size: 7px; }
  .game-card { grid-template-columns: 104px 1fr; min-height: 160px; }
  .card-content { padding: 14px 12px 38px; }
  .card-content h2 { font-size: 16px; }
  .card-content p { font-size: 10px; }
  .card-meta span:not(.card-best) { display: none; }
  .game-card::after { right: 10px; }
  .arcade-footer { flex-direction: column; text-align: center; }
  .game-screen { padding: 8px; }
  .game-topbar { margin-bottom: 10px; }
  .back-button { font-size: 0; width: 42px; }
  .back-button::after { content: "←"; font-size: 18px; }
  .current-game-heading h1 { white-space: normal; text-align: center; font-size: 15px; }
  .game-stage { border-width: 3px; box-shadow: 0 0 0 3px var(--outline), 6px 7px 0 rgba(0,0,0,.55); }
  .modal-actions { grid-template-columns: 1fr; }
  .instruction-row { grid-template-columns: 85px 1fr; }
}

@media (max-height: 640px) and (orientation: landscape) {
  .game-screen { padding: 5px 10px; }
  .game-topbar { margin-bottom: 5px; }
  .game-topbar button { min-height: 34px; padding: 5px 9px; }
  .game-stage { width: min(82vw, calc((100dvh - 58px) * 1.7778)); }
  .touch-controls { position: fixed; inset: auto 10px 8px; width: auto; margin: 0; pointer-events: none; }
  .touch-controls button { pointer-events: auto; opacity: .88; }
}