/* Hallmark · macrostructure: game menu · theme: original Road Rash
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 * Original artwork, Futura, translucent text panels and yellow selection arrows. */
:root {
  --menu-paper: #000; --menu-panel: #000b; --menu-overlay: #0009;
  --menu-ink: #d4fff6; --menu-muted: #c0c9c6; --menu-accent: #f8f078;
  --menu-orange: #ff5e2a; --menu-rule: #777; --menu-error: #ffb199;
  --menu-font: FutD, "Arial Narrow", sans-serif; --menu-display: FutB, Impact, sans-serif;
}
.front-menu { position: absolute; inset: 0; overflow-y: auto; overflow-x: clip; background: var(--menu-paper); color: var(--menu-ink); font: clamp(21px,2.2vw,28px)/1.35 var(--menu-font); text-shadow: 2px 2px 0 var(--menu-paper); touch-action: pan-y; overscroll-behavior: contain; }
.menu-art { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.menu-wrap { position: relative; max-width: 1060px; margin: auto; padding: max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.menu-header { display: flex; justify-content: flex-end; min-height: 44px; margin-bottom: 8px; }
.menu-brand { display: none; }
.front-menu h1 { width: fit-content; box-sizing: border-box; max-width: 100%; margin: 0 0 28px; padding: 16px 28px; background: var(--menu-overlay); font: clamp(40px,6vw,76px)/1.05 var(--menu-font); color: var(--menu-orange); text-shadow: 2px 2px 0 var(--menu-paper); overflow-wrap: anywhere; }
.front-menu h2 { font: 30px/1.2 var(--menu-display); margin: 0 0 16px; color: var(--menu-ink); }
.front-menu p { margin: 0 0 20px; }
.front-menu small,.menu-muted { color: var(--menu-muted); font-size: 20px; }
.menu-body { max-width: 860px; }
.front-menu button,.front-menu input,.front-menu select,.front-menu summary { font: inherit; touch-action: manipulation; }
.front-menu button { position: relative; min-height: 48px; border: 0; border-radius: 0; padding: 8px 16px 8px 36px; color: var(--menu-ink); background: transparent; font-family: var(--menu-display); font-size: 27px; text-shadow: 2px 2px 0 var(--menu-paper); cursor: pointer; white-space: nowrap; text-align: left; user-select: none; -webkit-user-select: none; }
.front-menu button::before { content: "➔"; position: absolute; left: 4px; visibility: hidden; color: var(--menu-accent); }
.front-menu button.primary { color: var(--menu-accent); }
.front-menu button.primary::before,.front-menu button:focus-visible::before { visibility: visible; }
.front-menu button:active:not(:disabled) { color: var(--menu-accent); }
.front-menu button:disabled { color: var(--menu-rule); cursor: default; }
.front-menu button:disabled::before { visibility: hidden; }
.front-menu :focus-visible { outline: 2px solid var(--menu-accent); outline-offset: 2px; }
.front-menu h1:focus { outline: none; }
.front-menu .quiet { background: var(--menu-overlay); }
@media(hover:hover) and (pointer:fine) { .front-menu button:hover:not(:disabled) { color: var(--menu-accent); } .front-menu button:hover:not(:disabled)::before { visibility: visible; } }
.menu-home .menu-art { object-fit: contain; }
.menu-home .menu-wrap { box-sizing: border-box; width: min(100%,133.333dvh); height: 100dvh; max-width: none; padding: 0; }
.menu-home .menu-header { display: none; }
.menu-home h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
.menu-home .menu-body { max-width: none; }
.home-actions { position: absolute; left: 0; right: 0; bottom: 64px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 10px 16px; background: var(--menu-overlay); }
.home-actions button { min-height: 54px; font-size: clamp(21px,2.6vw,32px); }
.home-caption { display: none; }
.home-footer { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 8px 16px; background: var(--menu-overlay); }
.home-footer button { font-size: 24px; }
.home-footer button.quiet { background: transparent; }
/* Both home rows share column centers; balanced arrow space keeps labels aligned. */
.menu-home .home-actions button,.home-footer button { display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 8px; text-align: center; }
.menu-home .home-actions button::before,.home-footer button::before { position: static; flex: 0 0 1em; }
.menu-home .home-actions button::after,.home-footer button::after { content: ""; flex: 0 0 1em; }
.menu-body > .home-actions { position: static; display: grid; grid-template-columns: minmax(0,1fr); max-width: 420px; margin-bottom: 24px; }
.menu-home .menu-body > .home-actions { position: absolute; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: none; margin: 0; }
.menu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; }
.menu-stack { display: grid; gap: 20px; padding: 24px; background: var(--menu-overlay); }
.menu-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.menu-card { padding: 24px; background: var(--menu-overlay); min-width: 0; }
.front-menu label { display: grid; gap: 8px; min-width: 0; }
.front-menu input:not([type=checkbox]):not([type=range]),.front-menu select { box-sizing: border-box; min-width: 0; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--menu-rule); border-radius: 0; color: var(--menu-accent); background: var(--menu-panel); font-size: 24px; font-family: var(--menu-font); }
.front-menu input[type=range] { accent-color: var(--menu-accent); width: 100%; min-height: 36px; margin: 0; }
.front-menu input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--menu-accent); }
.front-menu .check-label { display: flex; gap: 12px; align-items: center; }
.front-menu details { margin-top: 24px; padding-top: 12px; }
.front-menu summary { cursor: pointer; color: var(--menu-accent); min-height: 44px; }
.front-menu details .menu-stack { margin-top: 16px; padding: 0; background: transparent; }
.menu-message { min-height: 28px; color: var(--menu-accent); margin-top: 16px !important; padding: 8px 16px; background: var(--menu-overlay); overflow-wrap: anywhere; }
.menu-message:empty { visibility: hidden; }
.menu-message.error { color: var(--menu-error); }
.room-code { display: block; font: 44px/1.2 var(--menu-display); letter-spacing: .1em; color: var(--menu-accent); margin: 4px 0 12px; }
.room-players { list-style: none; padding: 0; margin: 0; }
.room-players li { display: flex; gap: 16px; justify-content: space-between; padding: 12px 0; overflow-wrap: anywhere; }
.room-players li span { min-width: 0; }
.room-players small { white-space: nowrap; }
.room-status { padding: 16px 0; margin: 0 !important; color: var(--menu-accent); }
.room-results { border-collapse: collapse; width: 100%; margin-bottom: 24px; background: var(--menu-overlay); }
.room-results th,.room-results td { text-align: left; padding: 12px 20px; overflow-wrap: anywhere; }
.room-results th { color: var(--menu-orange); font-weight: normal; }
.control-list { margin: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 24px; }
.control-list dt { color: var(--menu-accent); }
.control-list dd { margin: 0; }
.friend-room .menu-wrap { padding-bottom: 128px; }
.room-launch { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; background: var(--menu-panel); padding: 12px max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.room-launch > div { display: flex; align-items: center; gap: 16px; max-width: 1060px; margin: auto; }
.launch-status { color: var(--menu-accent); font-size: 21px; flex: 1; }
@media(max-width:600px) {
  .menu-wrap { padding: max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .front-menu h1 { padding: 12px 20px; margin-bottom: 20px; }
  .menu-columns { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .menu-card,.menu-stack { padding: 20px; }
  .menu-home .menu-art { object-fit: contain; object-position: center top; }
  .menu-home .menu-wrap { width: 100%; }
  .menu-home .menu-body > .home-actions { grid-template-columns: minmax(0,1fr); bottom: 72px; padding: 12px 24px; }
  .home-actions button { font-size: 28px; min-height: 52px; }
  .home-footer { justify-content: space-between; gap: 0; padding: 12px 16px; }
  .home-footer button { padding: 8px 2px; font-size: clamp(18px,5.6vw,21px); }
  .home-footer button::before,.home-footer button::after { display: none; }
  .menu-home .home-actions button { display: block; text-align: left; padding-inline: 36px 16px; }
  .menu-home .home-actions button::before { position: absolute; }
  .menu-home .home-actions button::after { display: none; }
  .room-launch { padding-inline: 12px; }
  .room-launch > div { gap: 8px; }
  .room-launch button { padding-right: 4px; font-size: 23px; }
  .launch-status { font-size: 19px; }
  .control-list { gap: 12px; }
}
@media(max-height:500px) and (min-width:601px) { .home-actions { bottom: 52px; padding-block: 4px; } .home-actions button { min-height: 44px; font-size: 22px; } .home-footer { padding-block: 0; } .home-footer button { font-size: 20px; } }
.home-actions:has(button:focus-visible) button.primary:not(:focus-visible) { color: var(--menu-ink); }
.home-actions:has(button:focus-visible) button.primary:not(:focus-visible)::before { visibility: hidden; }
@media(hover:hover) and (pointer:fine) {
  .home-actions:has(button:hover) button.primary:not(:hover) { color: var(--menu-ink); }
  .home-actions:has(button:hover) button.primary:not(:hover)::before { visibility: hidden; }
}

/* Course maps follow the original HUD colors and translucent panels. */
.course-map { margin: 16px 0 0; color: var(--menu-ink); background: var(--menu-overlay); font-family: var(--menu-font); }
.course-map figcaption { padding: 6px 10px 0; color: var(--menu-orange); font-size: 20px; }
.course-map svg { display: block; width: 100%; height: auto; max-height: 200px; }
.course-map small { display: block; padding: 0 10px 6px; font-size: 14px; color: var(--menu-ink); }
.track-map { max-width: 360px; }
.race-map { position: absolute; top: 96px; right: 2%; width: 200px; margin: 0; pointer-events: none; }
.race-map figcaption { font-size: 16px; }
.race-map small { font-size: 12px; }
.touch-race .race-map { top: calc(max(14px,env(safe-area-inset-top)) + 44px); right: max(8px,env(safe-area-inset-right)); width: 140px; }
.touch-race .race-map figcaption { font-size: 14px; }
.touch-race .race-map small { font-size: 10px; }
@media(max-height:450px) { .touch-race .race-map { width: 120px; } .touch-race .race-map figcaption { display: none; } }

/* Keyboard focus owns the classic selection arrow across every menu. */
.front-menu:has(button:focus-visible) button.primary:not(:focus-visible) { color: var(--menu-ink); }
.front-menu:has(button:focus-visible) button.primary:not(:focus-visible)::before { visibility: hidden; }
.front-menu button:focus-visible { color: var(--menu-accent); }

.track-list { display: grid; grid-template-columns: minmax(0,1fr); max-width: 520px; padding: 12px 16px; background: var(--menu-overlay); }
.track-list button { width: 100%; min-height: 54px; }
@media(max-width:600px) { .track-list { padding-inline: 4px; } .track-list button { font-size: 24px; } }