/* A small playable interlude, between contact and the legal footer. */
.arcade-section { padding-block: 0 64px; scroll-margin-top: 88px; }
.arcade-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.arcade-heading h2 { font-size: 28px; line-height: 1.2; }
.arcade-heading > p { color: var(--secondary); font-size: 14px; max-width: 27ch; }
.arcade-card { border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; background: var(--canvas); }
.arcade-title { font-size: 21px; padding: 24px 24px 0; }
.arcade-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 24px 20px; }
.arcade-toolbar > p { font-size: 14px; color: var(--secondary); max-width: 56ch; }
.arcade-scores { display: flex; gap: 28px; flex-shrink: 0; margin: 0; }
.arcade-scores div { text-align: right; min-width: 50px; }
.arcade-scores dt { color: var(--secondary); font-size: 12px; }
.arcade-scores dd { margin: 3px 0 0; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.arcade-stage { height: 360px; position: relative; background: var(--parchment); overflow: hidden; outline-offset: -3px; }
.arcade-stage canvas { display: block; width: 100%; height: 100%; }
[data-game="golf"] .arcade-stage { height: auto; aspect-ratio: 2.2; min-height: 220px; }
.arcade-course-header { display: flex; justify-content: space-between; align-items: center; gap: 17px; padding: 0 24px 20px; }
.arcade-course-header strong { font-size: 17px; font-weight: 600; }
.arcade-course-header p { margin-top: 4px; font-size: 14px; color: var(--secondary); }
.arcade-hole-scores { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-shrink: 0; }
.arcade-hole-scores li { padding: 8px 12px; font-size: 14px; font-variant-numeric: tabular-nums; border-radius: 8px; background: var(--parchment); }
.arcade-hole-scores [aria-current] { outline: 1px solid var(--hairline); font-weight: 600; }
.arcade-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; background: rgb(245 245 247 / .58); text-align: center; }
.arcade-overlay[hidden] { display: none; }
.arcade-overlay p { color: var(--ink); font-size: 21px; font-weight: 600; max-width: 32ch; }
.arcade-card button { font: inherit; font-size: 14px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--canvas); color: var(--blue); cursor: pointer; touch-action: manipulation; }
.arcade-card button.arcade-primary { border-color: var(--blue); background: var(--blue); color: white; }
.arcade-card button:hover:not(:disabled) { filter: brightness(.95); }
.arcade-card button:disabled { opacity: .45; cursor: default; }
.arcade-controls { padding: 20px 24px 8px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.arcade-session-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; }
.arcade-game-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.arcade-game-controls label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--secondary); }
.arcade-game-controls input[type="range"] { width: 110px; min-height: 44px; accent-color: var(--blue); }
.arcade-status { min-height: 42px; padding: 0 24px 20px; color: var(--secondary); font-size: 12px; }
.arcade-loading, .arcade-unavailable { padding: 48px 24px; min-height: 360px; color: var(--secondary); }
.arcade-winners { border-top: 1px solid var(--hairline); padding: 24px; }
.arcade-winners-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.arcade-winners-heading h4 { font-size: 21px; font-weight: 600; letter-spacing: -.3px; }
.arcade-winners-note, .arcade-list-status, .arcade-save-status, #arcade-name-note { color: var(--secondary); font-size: 14px; line-height: 1.47; }
.arcade-winners-note { margin-top: 4px; }
.arcade-list-status:not(:empty), .arcade-save-status:not(:empty) { margin-top: 17px; }
.arcade-name-form { margin-top: 24px; padding: 24px; border-radius: 8px; background: var(--parchment); }
.arcade-name-form[hidden], .arcade-winners-list[hidden] { display: none; }
.arcade-name-form > p:first-child { font-size: 17px; font-weight: 600; margin-bottom: 17px; }
.arcade-name-form label { display: block; font-size: 14px; margin-bottom: 8px; }
.arcade-name-fields { display: flex; gap: 12px; }
.arcade-name-fields input { flex: 1; min-width: 0; min-height: 44px; width: 100%; padding: 11px 17px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--canvas); color: var(--ink); font: inherit; font-size: 17px; }
.arcade-name-fields button { flex-shrink: 0; white-space: nowrap; }
#arcade-name-note { margin-top: 8px; }
.arcade-winners-list { list-style: none; padding: 0; margin: 20px 0 0; }
.arcade-winners-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 12px; font-size: 17px; line-height: 1.47; }
.arcade-winners-list li:nth-child(odd) { background: var(--parchment); border-radius: 8px; }
.arcade-rank { font-size: 14px; color: var(--secondary); font-variant-numeric: tabular-nums; }
.arcade-winner-name { overflow-wrap: anywhere; }
.arcade-winner-score { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; font-weight: 600; }
.arcade-card button:focus-visible, .arcade-name-fields input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.arcade-card button:active:not(:disabled) { transform: scale(.95); }
@media (max-width: 640px) {
  .arcade-section { padding-bottom: 48px; }
  .arcade-heading { display: block; }
  .arcade-heading > p { margin-top: 12px; max-width: none; }
  .arcade-title { padding: 20px 16px 0; }
  .arcade-toolbar { padding: 12px 16px 16px; align-items: start; gap: 16px; }
  .arcade-toolbar > p { font-size: 12px; }
  .arcade-scores { gap: 12px; }
  .arcade-scores div { min-width: 34px; }
  .arcade-scores dd { font-size: 21px; }
  .arcade-stage { height: 340px; }
  .arcade-course-header { padding: 0 16px 16px; align-items: start; flex-direction: column; gap: 12px; }
  .arcade-controls { padding: 16px 16px 8px; align-items: end; gap: 8px; }
  .arcade-game-controls { gap: 8px; }
  .arcade-game-controls input[type="range"] { width: 90px; }
  .arcade-card button { padding-inline: 14px; }
  .arcade-status { padding-inline: 16px; }
  .arcade-winners { padding: 20px 16px; }
  .arcade-name-form { padding: 17px; }
  .arcade-name-fields { flex-direction: column; }
  .arcade-winners-list li { gap: 8px; padding-inline: 8px; grid-template-columns: 20px minmax(0, 1fr) auto; }
}

/* Golf has its own readable control deck and an adaptive course view. */
.arcade-prompt { display: flex; flex-direction: column; align-items: center; gap: 16px; }
[data-game="golf"] .arcade-card { container: golf-game / inline-size; }
[data-game="golf"] .arcade-title { font-size: 28px; letter-spacing: -.6px; }
[data-game="golf"] .arcade-toolbar { padding-top: 8px; }
[data-game="golf"] .arcade-scores { gap: 24px; }
[data-game="golf"] .arcade-scores dt { font-size: 12px; }
[data-game="golf"] .arcade-scores dd { font-size: 28px; }
[data-game="golf"] .arcade-stage { aspect-ratio: 2.15; min-height: 260px; }
[data-game="golf"] .arcade-course-header { padding-top: 20px; border-top: 1px solid var(--hairline); flex-direction: column; align-items: stretch; }
[data-game="golf"] .arcade-hole-scores { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
.arcade-hole-scores li { display: flex; flex-direction: column; gap: 4px; min-width: 78px; padding: 10px 14px; }
.arcade-hole-scores span { font-size: 12px; color: var(--secondary); }
.arcade-hole-scores strong { font-size: 14px; font-weight: 400; }
.arcade-hole-scores [aria-current] { outline: 1px solid var(--blue); }
.arcade-hole-scores [aria-current] strong { font-weight: 600; }
[data-game="golf"] .arcade-overlay { background: rgb(233 240 237 / .14); }
[data-game="golf"] .arcade-prompt { padding: 24px 32px; border: 1px solid var(--hairline); border-radius: 18px; background: rgb(255 255 255 / .96); max-width: 320px; }
[data-game="golf"] .arcade-prompt p { font-size: 21px; line-height: 1.3; letter-spacing: -.3px; }
[data-game="golf"] .arcade-controls { padding: 24px 24px 12px; align-items: end; gap: 24px; }
[data-game="golf"] .arcade-game-controls { flex: 1; display: grid; grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) auto; gap: 24px; align-items: end; }
[data-game="golf"] .arcade-game-controls label { display: block; font-size: 14px; color: var(--ink); }
[data-game="golf"] .arcade-game-controls label > span { display: flex; justify-content: space-between; gap: 12px; }
[data-game="golf"] .arcade-game-controls output { font-variant-numeric: tabular-nums; font-weight: 600; }
[data-game="golf"] .arcade-game-controls input { width: 100%; margin: 0; touch-action: none; }
[data-game="golf"] .arcade-game-controls > button { min-width: 120px; margin-bottom: 0; }
[data-game="golf"] .arcade-session-controls { flex-wrap: nowrap; }
.arcade-golf-help { padding: 0 24px 8px; font-size: 14px; line-height: 1.47; color: var(--secondary); }
[data-game="golf"] .arcade-status { font-size: 14px; line-height: 1.47; padding-bottom: 24px; }
@container golf-game (max-width: 799px) {
  .arcade-controls { flex-wrap: wrap; }
  .arcade-game-controls { flex-basis: 100% !important; }
  .arcade-session-controls { width: 100%; justify-content: end; }
  .arcade-course-header { align-items: start; flex-direction: column; }
  [data-game="golf"] .arcade-hole-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container golf-game (max-width: 519px) {
  [data-game="golf"] .arcade-stage { height: 400px; aspect-ratio: auto; }
  [data-game="golf"] .arcade-title { font-size: 24px; padding-top: 20px; }
  [data-game="golf"] .arcade-toolbar { display: block; padding: 8px 16px 16px; }
  [data-game="golf"] .arcade-toolbar > p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-game="golf"] .arcade-scores { gap: 24px; }
  [data-game="golf"] .arcade-scores div { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  [data-game="golf"] .arcade-scores dd { font-size: 21px; }
  [data-game="golf"] .arcade-course-header { padding: 16px; gap: 16px; }
  .arcade-hole-scores li { min-width: 0; padding: 10px; }
  [data-game="golf"] .arcade-controls { padding: 20px 16px 12px; gap: 12px; }
  [data-game="golf"] .arcade-game-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
  [data-game="golf"] .arcade-game-controls > button { grid-column: 1 / -1; width: 100%; font-size: 17px; }
  [data-game="golf"] .arcade-session-controls { justify-content: space-between; }
  .arcade-golf-help { padding-inline: 16px; }
  [data-game="golf"] .arcade-prompt { padding: 20px; }
}

/* The low-resolution racing scene deliberately evokes an 80s arcade cabinet. */
[data-game="runner"] .arcade-stage { height: 420px; background: #79c8e8; }
[data-game="runner"] .arcade-stage canvas { image-rendering: pixelated; }
.drive-hud { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; gap: 12px; pointer-events: none; font: 700 14px/1.4 ui-monospace, Menlo, monospace; color: #fff4ce; text-transform: uppercase; }
.drive-hud > span { background: #272b42; padding: 8px 12px; border: 2px solid #fff4ce; }
.drive-hud strong { font: inherit; font-size: 20px; }
[data-game="runner"] .arcade-overlay { background: rgb(25 32 52 / .08); }
[data-game="runner"] .arcade-prompt { background: #272b42; border: 3px solid #fff4ce; padding: 24px; max-width: 340px; }
[data-game="runner"] .arcade-prompt p { color: #fff4ce; font: 700 21px/1.5 ui-monospace, Menlo, monospace; }
[data-game="runner"] .arcade-prompt button { border-radius: 0; font-family: ui-monospace, Menlo, monospace; }
[data-game="runner"] .arcade-game-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
[data-game="runner"] .arcade-game-controls button { touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 8px; min-width: 86px; min-height: 48px; }
[data-game="runner"] .arcade-game-controls button[data-held="true"] { background: var(--blue); color: white; }
@media(max-width:640px) {
  [data-game="runner"] .arcade-controls { flex-wrap: wrap; }
  [data-game="runner"] .arcade-game-controls { width: 100%; }
  [data-game="runner"] .arcade-game-controls button { min-width: 0; padding-inline: 8px; }
  [data-game="runner"] .arcade-session-controls { width: 100%; }
  [data-game="runner"] .arcade-toolbar { display: block; }
  [data-game="runner"] .arcade-toolbar > p { font-size: 14px; margin-bottom: 12px; }
  [data-game="runner"] .arcade-scores div { text-align: left; }
  .drive-hud { left: 8px; right: 8px; top: 8px; font-size: 11px; }
  .drive-hud > span { padding: 6px; }
}