/* Portal-only presentation. Individual games keep their existing styles. */
body.portal-modern { background: #0d1110; }
/* Keep the original Kickstart artwork behind a compact corner welcome. */
body.portal-modern dialog.entry-overlay {
  width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; color: var(--text);
  align-items: flex-start; justify-content: flex-end;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
dialog.entry-overlay:not([open]) { display: none; }
body.portal-modern dialog.entry-overlay .entry-card {
  width: min(228px, 100%); max-height: 100%; overflow-y: auto; padding: 16px;
  transform: none; border-radius: 16px; border: 1px solid #d8f3ff24;
  background: linear-gradient(160deg, #111617fa, #070a0bfa);
  box-shadow: 0 16px 44px #0007, inset 0 1px 0 #ffffff0c;
}
body.portal-modern .entry-card h2 { width: 100px; margin: 0 auto 14px; color: #eff2e8; font-size: inherit; line-height: 0; letter-spacing: 0; text-transform: none; }
body.portal-modern .entry-card .portal-button {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 7px 12px; border: 1px solid #fff; border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #ecf3f5 48%, #cfdee3 100%); color: #192f38;
  font: 700 11px/1.25 "Avenir Next", "Segoe UI", sans-serif; letter-spacing: .025em; text-transform: none;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #aabec6, 0 3px 0 #6f858c, 0 9px 20px #0007;
  transform: none; animation: none;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
body.portal-modern .entry-card .portal-button::before { display: none; }
body.portal-modern .entry-card .portal-button:hover {
  transform: translateY(-1px); background: linear-gradient(180deg, #fff, #e7f6fa);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #b7cbd1, 0 4px 0 #6f858c, 0 10px 24px #0008, 0 0 16px #bcecff24;
}
body.portal-modern .entry-card .portal-button:focus-visible { outline: 2px solid #a9e4f3; outline-offset: 4px; }
body.portal-modern .entry-card .portal-button:active { transform: translateY(2px); box-shadow: inset 0 1px 3px #49657438, 0 1px 0 #6f858c, 0 3px 8px #0005; }
.entry-button-icon { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #7e9ca32e; border-radius: 7px; background: linear-gradient(145deg, #fbffff, #cfdee3); box-shadow: inset 0 1px 0 #fff; }
.entry-button-icon svg { display: block; width: 20px; height: 20px; }
@media (max-width: 420px) {
  body.portal-modern dialog.entry-overlay { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  body.portal-modern dialog.entry-overlay .entry-card { width: min(212px, 100%); padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.portal-modern .entry-card .portal-button { transition: none; }
  body.portal-modern .entry-card .portal-button:hover, body.portal-modern .entry-card .portal-button:active { transform: none; }
}
body.portal-modern:not(.portal-playing-tetris):not(.delta-game-active):not(.cosmic-game-active):not(.defender-game-active):not(.fruity-game-active):not(.minors-game-active):not(.dizzyness-game-active) { overflow: hidden !important; height: 100dvh !important; min-height: 0; touch-action: auto; }
body.portal-modern:not(.portal-playing-tetris) > .layout { display: none !important; }
body.portal-modern .arcade-home[hidden] { display: none !important; }
.arcade-home { --ink: #eff2e8; --quiet: #a5afa5; --line: #303830; --lime: #d1f56a; width: min(1320px, calc(100% - 96px)); margin: auto; color: var(--ink); font-family: "Avenir Next", "Segoe UI", Arial, sans-serif; line-height: 1.5; }
body.portal-modern .arcade-home, body.portal-modern .arcade-home *, body.portal-modern .arcade-home *::before, body.portal-modern .arcade-home *::after { cursor: var(--amiga-cursor) !important; }
.arcade-home a { color: inherit; text-decoration: none; }
.arcade-home :is(button,a,summary):focus-visible { outline: 2px solid var(--lime); outline-offset: 5px; }
.arcade-home h1, .arcade-home h2, .arcade-home h3, .arcade-home p { margin: 0; }
.arcade-skip { position: fixed; top: -80px; left: 24px; padding: 12px 18px; background: #d1f56a; color: #111 !important; z-index: 10000; }
.arcade-skip:focus { top: 10px; }
.arcade-wordmark { display: flex; align-items: center; gap: 15px; flex: 0 0 auto; color: var(--ink) !important; }
.arcade-brand-symbol { display: block; width: 64px; height: 64px; overflow: hidden; }
.arcade-brand-symbol img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; filter: invert(1); opacity: .85; }
.arcade-nav { display: flex; align-items: center; gap: 24px; font: 12px/1.5 "Avenir Next", "Segoe UI", sans-serif; text-transform: none; letter-spacing: 0; }
.arcade-nav a { display: inline-block; padding: 6px 0; }
.arcade-nav a:hover { color: var(--lime); }
/* Bungee by the Bungee Project Authors, SIL OFL 1.1; served locally. */
@font-face { font-family: "ARCo Marquee"; src: url("/portal-assets/bungee-latin-v17.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
.arcade-eyebrow { text-transform: uppercase; letter-spacing: 1.6px; font-size: 10px; font-weight: 650; color: var(--quiet); }
.arcade-intro { --marquee-cream: #f3e3c0; --marquee-orange: #ec7650; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr); margin: 28px 0 35px; padding: 0 38px; overflow: hidden; color: var(--marquee-cream); background: #172426; border: 1px solid #6d796b; border-radius: 5px; box-shadow: inset 0 0 0 5px #101b1d, inset 0 0 0 6px #40534d; }
.arcade-intro::before { content: ""; position: absolute; inset: 7px; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px); }
.marquee-topline, .marquee-bottomline { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 11px/1.5 "Courier New", monospace; text-transform: uppercase; letter-spacing: 1.8px; }
.marquee-topline { min-height: 49px; border-bottom: 1px solid #51625a; }
.marquee-power { display: flex; align-items: center; gap: 8px; color: #a3c2b7; font-size: 10px; letter-spacing: 1.2px; }
.marquee-power i { width: 6px; height: 6px; background: #b8d889; border-radius: 50%; box-shadow: 0 0 0 3px #b8d88916; }
.marquee-copy { padding: 24px 0 29px; position: relative; z-index: 1; }
.arcade-intro h1 { flex: 0 0 auto; width: 132px; line-height: 0; margin: 0; }
/* The luminance mask displays just the custom lettering over the banner. */
.arcade-logo-lettering { display: block; width: 100%; height: auto; overflow: hidden; }
.arcade-home .marquee-description { font-size: 14px; line-height: 1.7; color: #c1c9b8; margin: 16px 0 23px; letter-spacing: .1px; }
.arcade-home .marquee-start { display: inline-flex; align-items: center; justify-content: space-between; gap: 17px; min-height: 49px; padding: 12px 17px; background: var(--marquee-cream); color: #172426; border: 1px solid var(--marquee-cream); box-shadow: 0 4px #ac8158; font: 700 12px/1.3 "Courier New", monospace; text-transform: uppercase; letter-spacing: 1px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.arcade-home .marquee-start:hover { background: #fff1d3; transform: translateY(-1px); box-shadow: 0 5px #ac8158; }
.arcade-home .marquee-start:active { transform: translateY(3px); box-shadow: 0 1px #ac8158; }
.arcade-home .marquee-start:focus-visible { outline-color: #f69a6a; }
.marquee-start-icon { font-size: 13px; color: #ae472a; }
.marquee-start-arrow { font-size: 19px; line-height: 1; padding-left: 13px; margin-left: 9px; border-left: 1px solid #ab9f80; }
.marquee-art { align-self: center; justify-self: center; position: relative; width: min(100%, 350px); padding: 0 0 15px; text-align: center; }
.marquee-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.marquee-free { display: block; margin-top: -18px; font: 400 18px/1.4 "ARCo Marquee", Impact, sans-serif; letter-spacing: 3px; color: #eaba72; }
.marquee-art-note { display: block; margin-top: 5px; font: 10px/1.5 "Courier New", monospace; letter-spacing: 1px; color: #b3beb0; }
.marquee-bottomline { min-height: 44px; border-top: 1px solid #51625a; color: #acbaac; font-size: 9px; letter-spacing: 1px; }
.marquee-bottomline b { font-size: 16px; color: #eaba72; font-weight: 400; padding-left: 8px; }
.arcade-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; align-items: start; border-top: 1px solid var(--line); padding-top: 32px; }
.arcade-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; }
.arcade-section-heading h2 { font-size: 24px; letter-spacing: -.8px; margin-top: 7px; font-weight: 600; }
.arcade-section-heading h2 > span { font-size: 15px; color: #667161; font-weight: 400; }
.arcade-small-note { font-size: 10px; color: var(--quiet); }
.arcade-game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
.arcade-home .arcade-game-card { display: flex; flex-direction: column; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 7px; min-width: 0; box-shadow: none; transform: none; color: var(--ink); font: inherit; letter-spacing: normal; text-transform: none; transition: background .18s, border-color .18s; }
.arcade-home .arcade-game-card:hover { background: #171e18; border-color: #536142; }
.arcade-home .arcade-game-card.is-active { background: #1d251b; border-color: #afce65; box-shadow: none; }
.arcade-card-art { display: grid; place-items: center; width: 100%; height: 150px; border-radius: 7px; background: #29271d; overflow: hidden; position: relative; }
.arcade-card-art::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 17px, #ffffff04 18px 19px); pointer-events: none; }
.arcade-card-art img { width: 93%; height: 110px; object-fit: contain; transition: transform .22s; filter: drop-shadow(0 6px 12px #0005); }
.arcade-game-card:hover img { transform: translateY(-3px); }
.arcade-game-card[data-game-id="tetris"] .arcade-card-art { background: #25293b; }
.arcade-game-card[data-game-id="cosmic-invaders"] .arcade-card-art { background: #33233c; }
.arcade-game-card[data-game-id="defender-it"] .arcade-card-art { background: #183038; }
.arcade-game-card[data-game-id="fruity-frank"] .arcade-card-art { background: #223623; }
.arcade-game-card[data-game-id="minors-manic"] .arcade-card-art { background: #3c2823; }
.arcade-game-card[data-game-id="delta-music-2"] .arcade-card-art { background: #2f2e3e; }
.arcade-card-art.arcade-card-art-cover { background: #fff3bd; }
.arcade-card-art-cover::after { display: none; }
.arcade-card-art.arcade-card-art-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: none; transform: none; }
.arcade-card-art-cover .arcade-card-number { color: #172343; background: #fff3bde6; border-radius: 3px; padding: 2px 4px; z-index: 1; }
.arcade-game-card[data-game-id="radzone"] .arcade-card-art { background: #132512; }
.arcade-game-card[data-game-id="radzone"] .arcade-card-number { color: #f7dc57; background: #132512ed; }
.arcade-game-card[data-game-id="radzone"] .arcade-card-meta { flex-wrap: wrap; gap: 6px; }
.arcade-home .arcade-game-card[data-game-id="radzone"] > strong { max-width: 100%; white-space: normal; }
.arcade-selected[data-game="radzone"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 2 / 3; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="radzone"] .arcade-ready { color: #efbc76; border-color: #746043; }
.arcade-game-card[data-game-id="road-rash-ii"] .arcade-card-art { background: #142016; }
.arcade-game-card[data-game-id="road-rash-ii"] .arcade-card-number { color: #ffd69a; background: #142016ed; }
.arcade-game-card[data-game-id="road-rash-ii"] .arcade-card-meta { flex-wrap: wrap; gap: 6px; }
.arcade-home .arcade-game-card[data-game-id="road-rash-ii"] > strong { max-width: 100%; white-space: normal; }
.arcade-home .arcade-selected[data-game="road-rash-ii"] .arcade-selected-art { float: none; width: 100%; height: auto; max-height: none; aspect-ratio: 5 / 7; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="road-rash-ii"] .arcade-ready { color: #efbc76; border-color: #746043; }
.arcade-game-card[data-game-id="desert-strike"] .arcade-card-art { background: #171b12; }
.arcade-game-card[data-game-id="desert-strike"] .arcade-card-number { color: #ffdb82; background: #171b12ed; }
.arcade-game-card[data-game-id="desert-strike"] .arcade-card-meta { flex-wrap: wrap; gap: 6px; }
.arcade-home .arcade-game-card[data-game-id="desert-strike"] > strong { max-width: 100%; white-space: normal; }
.arcade-home .arcade-selected[data-game="desert-strike"] .arcade-selected-art { float: none; width: 100%; height: auto; max-height: none; aspect-ratio: 2 / 3; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="desert-strike"] .arcade-ready { color: #efbc76; border-color: #746043; }
.arcade-card-number { position: absolute; left: 12px; top: 10px; color: #fff7; font: 10px monospace; }
.arcade-card-arrow { position: absolute; bottom: 8px; right: 12px; color: #fff8; font-size: 16px; }
.arcade-card-meta { display: flex; justify-content: space-between; width: 100%; margin: 15px 0 7px; font-size: 9px; color: var(--quiet); text-transform: uppercase; letter-spacing: 1px; }
.arcade-home .arcade-card-meta em { color: #c1da8f; font: inherit; letter-spacing: .5px; }
.arcade-home .arcade-card-meta em.arcade-coming-soon { color: #efbc76; }
.arcade-game-card:is([data-game-id="arconoid"], [data-game-id="paperboy"], [data-game-id="head-over-heels"], [data-game-id="prince-of-persia"], [data-game-id="roland-in-time"], [data-game-id="jet-set-willy"]) .arcade-card-meta { flex-wrap: wrap; gap: 6px; }
.arcade-game-card[data-game-id="jet-set-willy"] .arcade-card-art { background: #dddce4; }
.arcade-game-card[data-game-id="jet-set-willy"] .arcade-card-number { color: #a62221; background: #f6efe4ed; }
.arcade-home .arcade-game-card[data-game-id="jet-set-willy"] > strong { max-width: 100%; white-space: normal; }
.arcade-game-card[data-game-id="roland-in-time"] .arcade-card-art { background: #18120f; }
.arcade-game-card[data-game-id="roland-in-time"] .arcade-card-number { color: #ffedca; background: #18120fdc; }
.arcade-home .arcade-game-card[data-game-id="roland-in-time"] > strong { max-width: 100%; white-space: normal; }
.arcade-game-card[data-game-id="prince-of-persia"] .arcade-card-art { background: #151519; }
.arcade-game-card[data-game-id="prince-of-persia"] .arcade-card-number { color: #ffe1a1; background: #151519dc; }
.arcade-home .arcade-game-card[data-game-id="prince-of-persia"] > strong { max-width: 100%; white-space: normal; }
.arcade-game-card[data-game-id="head-over-heels"] .arcade-card-art { background: #080908; }
.arcade-game-card[data-game-id="head-over-heels"] .arcade-card-number { color: #fff2d7; background: #080908dc; }
.arcade-home .arcade-game-card[data-game-id="head-over-heels"] > strong { max-width: 100%; white-space: normal; }
.arcade-game-card[data-game-id="paperboy"] .arcade-card-art { background: #0b1013; }
.arcade-game-card[data-game-id="paperboy"] .arcade-card-number { color: #fff2d7; background: #0b1013dc; }
.arcade-home .arcade-card-meta em::before { content: ""; display: inline-block; background: currentColor; width: 4px; height: 4px; border-radius: 50%; margin-right: 5px; vertical-align: 2px; }
.arcade-home .arcade-game-card > strong { font-size: 16px; font-weight: 600; line-height: 1.4; }
.arcade-home .arcade-game-card > strong { align-self: flex-start; text-align: left; text-transform: none; }
.arcade-home .arcade-card-description { align-self: flex-start; text-align: left; }
.arcade-card-description { font-size: 10px; line-height: 1.6; color: var(--quiet); padding: 4px 0 7px; }
.arcade-side { display: grid; gap: 24px; position: sticky; top: 24px; }
.arcade-selected { background: #191f19; border: 1px solid #394333; border-radius: 13px; padding: 23px; }
.arcade-selected-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.arcade-ready { color: #c8df98; border: 1px solid #445235; border-radius: 30px; padding: 3px 8px; font-size: 9px; }
.arcade-selected-art { width: 100%; height: 105px; object-fit: contain; margin: 12px 0; }
.arcade-selected[data-game="arconoid"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 1; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="paperboy"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 1232 / 1277; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="head-over-heels"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 5 / 6; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="prince-of-persia"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 2 / 3; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="roland-in-time"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 1122 / 1402; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="jet-set-willy"] .arcade-selected-art { float: none; width: 100%; height: auto; aspect-ratio: 2 / 3; margin: 16px 0; border-radius: 7px; }
.arcade-selected:is([data-game="arconoid"], [data-game="paperboy"], [data-game="head-over-heels"], [data-game="prince-of-persia"], [data-game="roland-in-time"], [data-game="jet-set-willy"]) .arcade-ready { color: #efbc76; border-color: #746043; }
.arcade-selected > h2 { font-size: 26px; font-weight: 650; letter-spacing: -.8px; }
.arcade-selected > p:not(.arcade-input-hint) { font-size: 12px; line-height: 1.7; color: #c0c8ba; margin: 10px 0 21px; }
.arcade-home .arcade-play { display: block; width: 100%; min-height: 48px; padding: 12px; background: var(--lime); border: 1px solid var(--lime); color: #17200c; border-radius: 7px; font: 700 13px "Segoe UI", sans-serif; text-transform: none; letter-spacing: .1px; box-shadow: none; }
.arcade-home .arcade-play:hover { background: #e1ffa0; border-color: #e1ffa0; transform: none; }
.arcade-home .arcade-play:disabled { background: #30382a; border-color: #414a38; color: #abb6a2; }
.arcade-input-hint { font-size: 9px; text-align: center; color: var(--quiet); margin: 11px 0 20px !important; }
.arcade-how { border-top: 1px solid #394333; padding-top: 14px; }
.arcade-how summary { list-style: none; display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.arcade-how summary::-webkit-details-marker { display: none; }
.arcade-how[open] summary { margin-bottom: 15px; }
.arcade-how[open] summary > span[aria-hidden] { transform: rotate(45deg); }
.arcade-how h3 { font-size: 12px; margin: 15px 0 10px; }
.arcade-how p { display: flex; justify-content: space-between; gap: 18px; font-size: 10px; padding: 5px 0; color: #c4cbbb; }
.arcade-how p span:last-child { text-align: right; color: #eee; }
.arcade-scores { padding: 23px; border: 1px solid var(--line); border-radius: 13px; background: #121713; }
.arcade-scores > .arcade-section-heading > span { color: var(--lime); font-size: 26px; }
.arcade-home #highScoresCard { margin: 0; padding: 0; min-height: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.arcade-home #highScoresTitle { font: 600 21px/1.25 "Avenir Next", "Segoe UI", sans-serif; letter-spacing: -.5px; color: var(--ink); text-transform: none; margin: 0 0 18px; }
.arcade-home #highScoresTitle span { display: block; font: inherit; color: var(--quiet); }
.arcade-home #highScoresTitle, .arcade-home #highScoresTitle span { text-shadow: none; animation: none; letter-spacing: -.5px; }
.arcade-home .high-scores-list { gap: 0; }
.arcade-home .high-score-row { min-width: 0; border: 0; border-bottom: 1px solid #2a3229; background: transparent; border-radius: 0; box-shadow: none; padding: 11px 0; grid-template-columns: 23px 1fr 55px 32px 21px; gap: 5px; font-size: 11px; }
.arcade-home .high-score-heading { font-size: 8px; letter-spacing: .5px; padding: 6px 0; color: var(--quiet); }
.arcade-home .high-score-row strong { font-size: 12px; }
.arcade-home .high-score-score { color: var(--lime); }
.arcade-home .high-score-rank, .arcade-home .high-score-level { font-size: 10px; color: var(--quiet); }
.arcade-home .high-score-empty { background: transparent; border: 0; padding: 14px 0; font-size: 12px; min-height: 0; }
.arcade-score-note { color: var(--quiet); font-size: 10px; margin-top: 16px !important; }
.arcade-score-filter { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; color: var(--quiet); font-size: 10px; }
.arcade-score-filter select { min-width: 0; flex: 1; padding: 8px; border: 1px solid #3a4535; border-radius: 5px; background: #1c241b; color: var(--ink); font: 12px "Segoe UI", sans-serif; }
.arcade-score-filter select:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.arcade-score-empty { padding: 7px 0 12px; }
.arcade-score-empty > span { display: block; color: #82975c; font-size: 28px; margin-bottom: 8px; }
.arcade-score-empty > strong { display: block; font-size: 12px; margin-bottom: 8px; font-weight: 550; }
.arcade-score-empty > p { color: var(--quiet); font-size: 11px; line-height: 1.65; }
.arcade-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--quiet); margin-top: 48px; padding: 25px 0 35px; font-size: 11px; }
.arcade-footer-dot { margin: 0 14px; color: #56614d; }
#games, #arcadeScores, #selectedGamePanel { scroll-margin-top: 24px; }
@media (max-width: 1150px) {
  .arcade-home { width: calc(100% - 56px); }
  .arcade-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .arcade-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .arcade-home { width: calc(100% - 36px); }
  .arcade-body { display: grid; grid-template-columns: 1fr; gap: 26px; }
  .arcade-side { display: contents; }
  .arcade-selected { grid-row: 1; }
  .arcade-selected-art { float: right; width: 100px; height: 70px; margin: 5px 0 0 16px; }
  .arcade-selected-heading { margin-bottom: 17px; }
  .arcade-selected > h2 { font-size: 24px; }
  .arcade-selected > p:not(.arcade-input-hint) { font-size: 12px; min-height: 65px; margin-bottom: 15px; }
  .arcade-game-grid { gap: 16px 7px; }
  .arcade-card-art { height: 125px; }
  .arcade-card-art img { height: 95px; }
  .arcade-card-meta { font-size: 8px; letter-spacing: .5px; }
  .arcade-home .arcade-game-card > strong { font-size: 14px; }
  .arcade-card-description { font-size: 10px; }
  .arcade-small-note { display: none; }
  .arcade-footer { gap: 24px; align-items: flex-start; font-size: 10px; }
  .arcade-footer-dot { margin: 0 5px; }
  .arcade-home .high-score-row { grid-template-columns: 30px 1fr 70px 45px 25px; }
}
@media (max-width: 420px) {
  .arcade-card-art { height: 112px; }
  .arcade-card-art img { height: 88px; }
}
@media (max-width: 1000px) {
  .arcade-intro { padding: 0 26px; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); }
  .marquee-topline { font-size: 10px; letter-spacing: 1px; }
}
@media (max-width: 620px) {
  .arcade-intro { margin: 20px 0 27px; padding: 0 24px; grid-template-columns: minmax(0, 1fr); }
  .marquee-topline { min-height: 47px; font-size: 9px; letter-spacing: .7px; }
  .marquee-power { font-size: 0; gap: 0; }
  .marquee-copy { padding: 27px 0 32px; }
  .arcade-home .marquee-description { font-size: 12px; margin: 18px 0 23px; }
  .arcade-home .marquee-start { min-height: 48px; font-size: 11px; gap: 10px; }
  .marquee-art { display: none; }
  .arcade-intro::after { content: ""; position: absolute; bottom: 5px; right: 24px; height: 4px; width: 90px; background: linear-gradient(90deg, #dc5938 0 33.33%, #eab966 33.33% 66.66%, #66ada6 66.66%); }
  .marquee-bottomline { min-height: 51px; flex-wrap: wrap; justify-content: flex-start; gap: 2px; padding: 11px 0; font-size: 8px; }
  .marquee-bottomline span { flex-basis: 100%; }
  .marquee-bottomline b { display: none; }
}
/* A viewport-sized arcade: only the catalogue and the details rail scroll. */
.arcade-home {
  width: 100%; height: 100dvh; min-height: 0; margin: 0;
  padding: 0 clamp(12px, 1.4vw, 28px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.arcade-intro { grid-template-columns: minmax(0, 1fr) 120px; margin: 10px 0 14px; padding: 0 22px; }
.marquee-topline { min-height: 27px; font-size: 9px; }
.marquee-bottomline { min-height: 25px; font-size: 8px; }
.marquee-copy { display: flex; align-items: center; gap: 30px; padding: 10px 0; }
.arcade-home .marquee-description { font-size: 12px; margin: 0; }
.arcade-home .marquee-start { margin-left: auto; margin-right: 20px; min-height: 40px; padding: 8px 12px; font-size: 10px; }
.marquee-art { display: block; width: 110px; padding: 0; }
.marquee-free, .marquee-art-note { display: none; }
.arcade-body { min-height: 0; grid-template-columns: minmax(0, 1fr) 330px; align-items: stretch; gap: 18px; padding: 0; border: 0; overflow: hidden; }
.arcade-library { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #111813; overflow: hidden; }
.arcade-library > .arcade-section-heading { flex: 0 0 auto; margin-bottom: 12px; }
.arcade-section-heading h2 { font-size: 22px; margin-top: 3px; }
.arcade-game-grid { min-height: 0; overflow: auto; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 16px 10px; padding: 6px; }
.arcade-home .arcade-game-card { gap: 0; }
.arcade-home .arcade-game-card > * { flex-shrink: 0; }
.arcade-home .arcade-game-card > strong { max-width: 100%; white-space: normal; }
.arcade-side { min-width: 0; min-height: 0; display: block; position: static; overflow: auto; }
.arcade-side > * + * { margin-top: 18px; }
.arcade-game-grid, .arcade-side { overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y pinch-zoom; }
.arcade-game-grid::-webkit-scrollbar, .arcade-side::-webkit-scrollbar { display: none; width: 0; height: 0; }
.arcade-game-grid:focus-visible, .arcade-side:focus-visible { outline: 2px solid var(--lime); outline-offset: -3px; }
.arcade-selected, .arcade-scores { padding: 20px; }
.arcade-selected[data-game] .arcade-selected-art { float: none; width: 100%; height: auto; max-height: 260px; margin: 12px 0; object-fit: contain; }
.arcade-selected > h2 { font-size: 24px; }
.arcade-footer { min-height: 36px; margin-top: 10px; padding: 6px 0; font-size: 10px; }
#games, #arcadeScores, #selectedGamePanel { scroll-margin-top: 0; }
@media (max-width: 1150px) {
  .arcade-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
  .arcade-home .marquee-start { display: none; }
  .arcade-game-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .arcade-library { padding: 12px; }
}
@media (max-width: 760px) {
  .arcade-home { grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 10px; }
  .arcade-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; }
  .arcade-game-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 6px; }
  .arcade-library { padding: 10px; }
  .arcade-library > .arcade-section-heading { margin-bottom: 6px; }
  .arcade-section-heading h2 { font-size: 18px; margin-top: 0; }
  .arcade-selected-heading { margin-bottom: 8px; }
  .arcade-selected[data-game] .arcade-selected-art { float: right; width: 90px; height: 100px; aspect-ratio: auto; margin: 5px 0 8px 14px; }
  .arcade-selected { display: flow-root; }
  .arcade-selected > h2 { font-size: 20px; }
  .arcade-selected #demoStartCard { clear: both; }
  .arcade-footer { min-height: 28px; margin-top: 6px; gap: 8px; align-items: center; font-size: 8px; }
}
/* Keep the single brand header available on phones and short windows. */
@media (max-width: 760px), (max-height: 650px) {
  .arcade-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0 10px; padding: 12px 16px; }
  .arcade-intro::after { display: none; }
  .marquee-topline { display: contents; }
  .marquee-power, .marquee-art, .marquee-bottomline, .arcade-home .marquee-description, .arcade-home .marquee-start { display: none; }
  .marquee-copy { grid-column: 1; grid-row: 1; padding: 0; }
  .arcade-wordmark { gap: 10px; }
  .arcade-brand-symbol { width: 40px; height: 40px; }
  .arcade-intro h1 { width: 86px; }
  .arcade-nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 18px; font-size: 11px; }
}
@media (max-width: 420px) {
  .arcade-intro { padding: 10px 14px; }
  .arcade-nav { flex-direction: column; align-items: flex-end; gap: 0; }
  .arcade-nav a { padding: 2px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-home *, .arcade-home *::before, .arcade-home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shadow Dancer keeps the complete portrait cover and wraps its full title. */
.arcade-game-card[data-game-id="shadow-dancer"] .arcade-card-art { background: #152e32; }
.arcade-game-card[data-game-id="shadow-dancer"] .arcade-card-number { color: #f3dfb6; background: #152e32ed; }
.arcade-game-card[data-game-id="shadow-dancer"] .arcade-card-meta { flex-wrap: wrap; gap: 6px; }
.arcade-home .arcade-game-card[data-game-id="shadow-dancer"] > strong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.arcade-home .arcade-selected[data-game="shadow-dancer"] .arcade-selected-art { float: none; width: 100%; height: auto; max-height: none; aspect-ratio: 5 / 7; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="shadow-dancer"] .arcade-ready { color: #efbc76; border-color: #746043; }

/* Golden Axe II preserves the full retro cover at every viewport size. */
.arcade-game-card[data-game-id="golden-axe-ii"] .arcade-card-art { background: #252c18; }
.arcade-game-card[data-game-id="golden-axe-ii"] .arcade-card-number { color: #ffe199; background: #252c18ed; }
.arcade-game-card[data-game-id="golden-axe-ii"] .arcade-card-meta { flex-wrap: wrap; gap: 6px; }
.arcade-home .arcade-game-card[data-game-id="golden-axe-ii"] > strong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.arcade-home .arcade-selected[data-game="golden-axe-ii"] .arcade-selected-art { float: none; width: 100%; height: auto; max-height: none; aspect-ratio: 3 / 4; margin: 16px 0; border-radius: 7px; }
.arcade-selected[data-game="golden-axe-ii"] .arcade-ready { color: #efbc76; border-color: #746043; }