:root {
  color-scheme: dark;
  --ink: #f5f1e7;
  --muted: #959ab4;
  --yellow: #ffd34f;
  --pink: #ff78ad;
  --blue: #7fa8ff;
  --night: #101326;
  --panel: #191d37;
  --line: #2e3459;
}

* { box-sizing: border-box; }
body:has(.arcade.immersive) { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 17% 5%, rgba(50, 67, 136, .24), transparent 36rem),
    radial-gradient(ellipse at 90% 40%, rgba(116, 59, 104, .11), transparent 30rem),
    var(--night);
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: '';
  opacity: .13;
  background-image: radial-gradient(#a6b5ff 0.65px, transparent .65px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.page-shell { width: min(1120px, calc(100% - 44px)); margin: 0 auto; padding: 23px 0 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 25px; border-bottom: 1px solid rgba(129, 143, 207, .14); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
.brand i { color: var(--yellow); font-style: normal; }
.brand-mark { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--yellow); color: #25223a; font-size: 23px; line-height: 1; transform: rotate(-7deg); }
.edition-tag { display: flex; align-items: center; gap: 9px; color: #c5c8db; font: 500 10px 'DM Mono', monospace; letter-spacing: .12em; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #80ebbb; box-shadow: 0 0 12px #80ebbb; }

.intro { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: end; padding: 31px 0 23px; }
.eyebrow, .hud-label, .overlay-eyebrow { color: var(--yellow); font: 500 10px 'DM Mono', monospace; letter-spacing: .16em; }
.intro h1 { margin: 11px 0 8px; font-size: clamp(33px, 4.5vw, 52px); line-height: .99; letter-spacing: -.055em; }
.intro h1 span { color: #aab1d2; }
.lede { max-width: 465px; margin: 14px 0 0; color: #aeb2c9; font-size: 14px; line-height: 1.6; }
.character-line { display: flex; align-items: center; gap: 8px; padding-bottom: 2px; }
.character-card { position: relative; display: flex; align-items: center; gap: 8px; min-width: 130px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(25, 29, 55, .78); }
.character-photo { display: block; flex: 0 0 36px; width: 36px; height: 36px; border: 2px solid var(--yellow); border-radius: 50%; background-size: cover; background-position: center 34%; }
.profile-portrait { display: block; flex: 0 0 52px; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 7px #f2bd7655); }
.ghost-portrait { display: block; flex: 0 0 50px; width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 7px #ff87ad44); }
.character-copy { display: grid; gap: 2px; }
.character-copy b { font: 500 10px 'DM Mono', monospace; letter-spacing: .08em; }
.character-copy small { color: #9297b2; font-size: 9px; white-space: nowrap; }
.versus { color: #747a99; font: 500 9px 'DM Mono', monospace; }

.arcade { max-width: 1120px; margin-inline: auto; overflow: hidden; border: 1px solid #323858; border-radius: 17px; background: linear-gradient(145deg, rgba(29, 34, 63, .98), rgba(20, 23, 45, .98)); box-shadow: 0 22px 70px #05071188, inset 0 1px #505b7a4d; }
.arcade:fullscreen, .arcade:-webkit-full-screen, .arcade.immersive { display: flex; flex-direction: column; width: 100vw; height: 100vh; height: 100dvh; max-width: none; margin: 0; border: 0; border-radius: 0; overflow: hidden; background: #050711; }
.arcade.immersive { position: fixed; z-index: 20; inset: 0; }
.arcade:fullscreen .arcade-topline, .arcade:-webkit-full-screen .arcade-topline, .arcade.immersive .arcade-topline,
.arcade:fullscreen .visual-mode-switch, .arcade:-webkit-full-screen .visual-mode-switch, .arcade.immersive .visual-mode-switch,
.arcade:fullscreen .mobile-controls, .arcade:-webkit-full-screen .mobile-controls, .arcade.immersive .mobile-controls,
.arcade:fullscreen .arcade-footer, .arcade:-webkit-full-screen .arcade-footer, .arcade.immersive .arcade-footer { display: none; }
.arcade:fullscreen .screen-frame, .arcade:-webkit-full-screen .screen-frame, .arcade.immersive .screen-frame { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 0; padding: 0; }
.arcade:fullscreen .screen-frame canvas, .arcade:-webkit-full-screen .screen-frame canvas, .arcade.immersive .screen-frame canvas { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 0; }
.arcade:fullscreen .game-overlay, .arcade:-webkit-full-screen .game-overlay, .arcade.immersive .game-overlay { inset: 0; border-radius: 0; }
.immersive-exit { display: none; }
.arcade:fullscreen .immersive-exit, .arcade:-webkit-full-screen .immersive-exit, .arcade.immersive .immersive-exit { position: absolute; z-index: 3; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #777b9b88; border-radius: 50%; background: #101326bb; color: white; font-size: 30px; line-height: 1; touch-action: manipulation; }
.arcade-topline { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 58px; padding: 11px 22px; border-bottom: 1px solid #303653; }
.score-block, .level-block, .lives-block { display: grid; align-content: center; gap: 4px; }
.level-block { justify-items: center; border-right: 1px solid #303653; border-left: 1px solid #303653; }
.lives-block { justify-items: end; }
.hud-label { color: #898faa; font-size: 8px; }
.score-block strong, .level-block strong, .lives-block strong { color: #f4f2e9; font: 500 14px 'DM Mono', monospace; letter-spacing: .1em; }
.lives-block strong { color: #ff89aa; font-size: 12px; letter-spacing: .08em; }
.life-icons { display: flex; align-items: center; gap: 3px; }
.life-icon { display: block; width: 29px; height: 29px; object-fit: contain; filter: drop-shadow(0 0 5px #f2bd7655); transition: opacity .15s ease, filter .15s ease; }
.life-icon.lost { opacity: .22; filter: grayscale(1); }
.visual-mode-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 6px 12px; border-bottom: 1px solid #303653; background: rgba(10, 13, 30, .58); }
.mode-label { margin-right: 4px; color: #8188a7; font: 9px 'DM Mono', monospace; letter-spacing: .1em; }
.mode-button { min-height: 27px; padding: 0 11px; border: 1px solid #454d76; border-radius: 7px; background: #191e38; color: #aeb4ce; font: 500 9px 'DM Mono', monospace; letter-spacing: .045em; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.mode-button:hover { border-color: #818cac; color: #fff6df; }
.mode-button[aria-pressed="true"] { border-color: #c19b5f; background: #4d422d; color: #f6d99f; box-shadow: inset 0 1px rgba(255, 241, 200, .12); }
.control-hint { margin-left: 7px; color: #e8d8a8; font: 10px 'DM Mono', monospace; letter-spacing: .025em; }
.screen-frame { position: relative; padding: 13px; background: #0b0e20; }
canvas { display: block; touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; height: auto; aspect-ratio: 23 / 17; border-radius: 6px; background: #070a19; image-rendering: auto; }
.game-overlay { position: absolute; inset: 13px; display: grid; place-items: center; border-radius: 6px; background: rgba(5, 8, 23, .57); backdrop-filter: blur(2px); transition: opacity .2s ease, visibility .2s ease; }
.game-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.overlay-card { width: min(370px, calc(100% - 36px)); padding: 24px 25px 21px; border: 1px solid #414a79; border-radius: 14px; background: rgba(20, 24, 49, .94); box-shadow: 0 15px 45px #030510aa; text-align: center; }
.overlay-eyebrow { color: var(--yellow); font-size: 9px; }
.overlay-card h2 { margin: 9px 0 7px; font-size: 25px; letter-spacing: -.04em; }
.overlay-card p { margin: 0 auto 17px; max-width: 300px; color: #aeb3cd; font-size: 12px; line-height: 1.5; }
.overlay-card button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 42px; border: 0; border-radius: 8px; background: var(--yellow); color: #242039; font: 700 11px 'DM Mono', monospace; letter-spacing: .07em; cursor: pointer; box-shadow: 0 4px 0 #c58f2d; transition: transform .12s ease, filter .12s ease; }
.overlay-card button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.overlay-card button:active { transform: translateY(2px); box-shadow: 0 1px 0 #c58f2d; }
.overlay-card button span { font-size: 15px; }
.overlay-card small { display: block; margin-top: 14px; color: #757d9f; font: 9px 'DM Mono', monospace; letter-spacing: .1em; }
.arcade-footer { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 19px; border-top: 1px solid #303653; color: #9298b3; font: 9px 'DM Mono', monospace; letter-spacing: .03em; }
.legend { display: flex; align-items: center; gap: 7px; }
.legend-carrot { font-size: 12px; line-height: 1; }
.legend-power { margin-left: 6px; color: #ffd34f; font-size: 17px; line-height: 1; filter: drop-shadow(0 0 4px #ffd34f); }
.legend-ghost { margin-left: 6px; color: #ff84ad; font-size: 12px; }
.subtitle { position: absolute; left: 50%; bottom: 24px; z-index: 2; max-width: calc(100% - 48px); margin: 0; padding: 7px 13px; border: 1px solid #414a79; border-radius: 9px; background: rgba(8, 11, 28, .78); color: #f5f1e7; font-size: 14px; line-height: 1.35; text-align: center; opacity: 0; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.subtitle.visible { opacity: 1; transform: translate(-50%, 0); }
.subtitle b { color: var(--yellow); font: 600 11px 'DM Mono', ui-monospace, monospace; letter-spacing: .06em; }
.audio-toggles { display: flex; gap: 6px; }
.toggle { min-height: 28px; padding: 0 9px; border: 1px solid #454d76; border-radius: 7px; background: #1c2141; color: #c5c8db; font: 500 9px 'DM Mono', ui-monospace, monospace; letter-spacing: .08em; cursor: pointer; }
.toggle b { color: #80ebbb; font-weight: 600; }
.toggle[aria-pressed="false"] b { color: #ff89aa; }
.toggle:hover { border-color: #6a74a8; }
.toggle:focus-visible, .mode-button:focus-visible, .overlay-card button:focus-visible, .mobile-controls button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.best-score b { margin-left: 7px; color: #f1eedf; font-weight: 500; }
.mobile-controls { display: none; }
.mobile-controls button { display: grid; place-items: center; width: 48px; height: 46px; border: 1px solid #454d76; border-radius: 10px; background: #1c2141; color: #f5f1e7; font-size: 18px; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mobile-controls button:active { background: #353b65; transform: translateY(1px); }
.mobile-controls { width: 164px; height: 150px; position: relative; margin: 14px auto 0; }
.mobile-controls button { position: absolute; }
.mobile-controls button[data-direction="up"] { left: 58px; top: 0; }
.mobile-controls button[data-direction="left"] { left: 0; top: 52px; }
.mobile-controls button[data-direction="right"] { right: 0; top: 52px; }
.mobile-controls button[data-direction="down"] { left: 58px; bottom: 0; }
@media (pointer: coarse), (max-width: 820px) {
  .mobile-controls { display: block; touch-action: none; }
}
.page-footer { display: flex; align-items: center; justify-content: center; gap: 11px; padding: 20px 0 0; color: #737a99; font: 10px 'DM Mono', monospace; letter-spacing: .04em; }
.footer-star { color: var(--yellow); }

@media (max-width: 820px) {
  .intro { grid-template-columns: 1fr; gap: 19px; }
  .character-line { justify-content: flex-start; }
  .character-card { min-width: 145px; }
}

@media (max-width: 560px) {
  .page-shell { width: min(100% - 24px, 520px); padding-top: 14px; }
  .topbar { padding-bottom: 15px; }
  .brand { font-size: 14px; }
  .brand-mark { width: 24px; height: 24px; font-size: 20px; }
  .edition-tag { gap: 6px; font-size: 8px; letter-spacing: .08em; }
  .intro { padding: 14px 0 11px; gap: 0; }
  .eyebrow { font-size: 8px; }
  .intro h1 { margin: 0; font-size: 24px; line-height: 1.12; }
  .intro h1 br { display: none; }
  .intro h1 span { display: none; }
  .lede, .character-line { display: none; }
  .character-line { gap: 5px; }
  .character-card { min-width: 0; gap: 6px; padding: 6px; }
  .character-photo { flex-basis: 30px; width: 30px; height: 30px; }
  .character-line { display: grid; grid-template-columns: 1fr 1fr; }
  .roel-card { grid-column: 1 / -1; justify-self: center; min-width: 156px; }
  .profile-portrait { flex-basis: 50px; width: 50px; height: 50px; }
  .ghost-portrait { flex-basis: 48px; width: 48px; height: 48px; }
  .versus { display: none; }
  .ghost-card { justify-content: center; }
  .character-copy b { font-size: 8px; }
  .character-copy small { font-size: 8px; }
  .versus { font-size: 8px; }
  .arcade { border-radius: 12px; }
  .arcade-topline { min-height: 51px; padding: 8px 13px; }
  .visual-mode-switch { min-height: 42px; gap: 5px; padding: 5px; }
  .mode-label { margin-right: 0; font-size: 8px; }
  .mode-button { min-height: 26px; padding-inline: 8px; font-size: 8px; }
  .fullscreen-button { margin-left: auto; }
  .control-hint { flex: 0 0 100%; margin: 0; text-align: center; font-size: 9px; }
  .screen-frame { padding: 7px; }
  .game-overlay { inset: 7px; }
  .overlay-card { padding: 17px 15px 14px; }
  .overlay-card h2 { font-size: 21px; }
  .overlay-card p { margin-bottom: 12px; font-size: 11px; }
  .overlay-card button { min-height: 37px; font-size: 9px; }
  .overlay-card .desktop-instructions { display: none; }
  .overlay-card small::after { content: 'VEGEN OMHOOG, OMLAAG, LINKS OF RECHTS'; }
  .overlay-card small { font-size: 0; }
  .overlay-card small::after { font: 600 9px 'DM Mono', monospace; letter-spacing: .06em; }
  .overlay-card small { margin-top: 10px; font-size: 8px; }
  .arcade-footer { min-height: 37px; font-size: 8px; }
  .legend { gap: 4px; }
  .legend-power, .legend-ghost { margin-left: 2px; }
  .arcade-footer { flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 7px 10px; }
  .legend { display: none; }
  .subtitle { bottom: 10px; max-width: 82%; padding: 4px 8px; font-size: 11px; }
  .subtitle b { font-size: 10px; }
  .page-footer { padding-top: 14px; font-size: 8px; }
  .mobile-controls { width: 100%; height: auto; position: static; display: flex; justify-content: center; gap: 10px; margin: 8px auto 10px; }
  .mobile-controls button { position: static; flex: 1 1 0; max-width: 78px; height: 54px; border-radius: 13px; font-size: 22px; }
  .mobile-controls button[data-direction="up"], .mobile-controls button[data-direction="left"], .mobile-controls button[data-direction="right"], .mobile-controls button[data-direction="down"] { position: static; }
  .control-hint { font: 9px 'DM Mono', monospace; }
}