body.playing-commute .site-header { display: none; }
.commute-score { display: flex; flex: none; align-items: baseline; gap: 7px; padding: 4px 9px; border: 1px solid #ffe48a88; border-radius: 8px; background: #16132ddd; color: #ffe48a; }
.commute-score small { font: 700 10px "DM Mono", monospace; text-transform: uppercase; }
.commute-score strong { font: 400 20px "Bungee", sans-serif; font-variant-numeric: tabular-nums; }
.commute-home-short { display: none; }
@media (max-width: 650px) {
  .commute-home-full { display: none; }
  .commute-home-short { display: inline; }
  .commute-score { gap: 4px; padding: 4px 6px; }
  .commute-score small { font-size: 8px; }
  .commute-score strong { font-size: 16px; }
}
#commute { display: flex; flex-direction: column; width: 100%; max-width: none; height: 100dvh; min-height: 100dvh; padding: 8px 8px 14px; background: radial-gradient(circle at 80% 0, #5d2d71, transparent 48%), #120c29; color: #fff3d7; }
#commute .commute-marquee { display: grid; grid-template-columns: auto auto minmax(40px, 1fr) auto auto; align-items: center; gap: 12px; min-height: 48px; padding: 4px 6px; border: 1px solid #b98cff66; border-radius: 14px; background: radial-gradient(90% 180% at 20% 0%, #6c3d8e66, transparent 65%), linear-gradient(105deg, #2d1948, #36203e 58%, #633443); box-shadow: inset 0 1px 0 #ffffff24, 0 0 22px #b266d333; }
#commute .commute-marquee button { min-height: 34px; padding: 5px 12px; border-color: #cc8cf477; background: #42224b66; }
.commute-marquee-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.commute-side-zero { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid #ffe48a; border-radius: 8px; color: #2d1535; background: #ffe48a; box-shadow: 0 0 10px #ffe48a99; font: 400 21px "Bungee", sans-serif; animation: side-a-flash 1.8s ease-in-out infinite; }
#commute .commute-marquee h1 { margin: 0; color: #ffe57f; font: 400 clamp(17px, 2.2vw, 27px) "Bungee", sans-serif; white-space: nowrap; text-shadow: 0 0 12px #ffa9d5; }
.commute-marquee-level { color: #9be9e8; font: 700 10px "DM Mono", monospace; letter-spacing: .12em; white-space: nowrap; }
#commute .arcade-marquee-leds { min-width: 40px; }
body.less-motion .commute-marquee *, body.less-motion .commute-marquee *::before, body.less-motion .commute-marquee *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .commute-marquee *, .commute-marquee *::before, .commute-marquee *::after { animation: none !important; } }
@media (max-width: 850px) { .commute-marquee-level { display: none; } #commute .commute-marquee { grid-template-columns: auto auto minmax(32px, 1fr) auto auto; gap: 7px; } }
@media (max-width: 650px) { #commute .commute-marquee { grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; } #commute .commute-marquee button { padding-inline: 7px; font-size: 10px; } #commute .commute-marquee h1 { overflow: hidden; font-size: 15px; text-overflow: ellipsis; } #commute .arcade-marquee-leds { display: block; grid-column: 1 / -1; grid-row: 2; width: 100%; } }
/* The shell is a column so the road can claim every pixel left below the
   marquee and the HUD, which keeps its bottom frame inside the viewport. */
.commute-shell { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; max-width: none; margin: 8px 0 0; min-height: 0; }
.commute-hud { position: relative; flex: none; min-width: 0; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid #b98cff66; border-radius: 14px; background: linear-gradient(160deg, #33204c, #192d4e); box-shadow: inset 0 1px 0 #ffffff20; }
.commute-hud .eyebrow, .commute-hud h2 { display: none; }
.commute-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; align-items: center; }
.commute-hud h2 { margin: 5px 0 10px; font: 17px/1.2 Bungee, sans-serif; color: #ffdc79; }
.commute-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0; border: 0; }
.commute-stat small { font: 700 10px "DM Mono", monospace; letter-spacing: .04em; color: #82e9e2; }
.commute-stat strong { font: 15px Bungee, sans-serif; color: #fff1b0; }
.commute-progress { grid-column: 1 / -1; grid-row: 2; height: 4px; margin: 0; overflow: hidden; border: 1px solid #fff0ba; border-radius: 20px; background: #0d1731; }
.commute-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #73e7df, #ffe074, #ff78aa); }
#commute-status { min-height: 0; margin: 0; color: #ffca89; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.commute-hud-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.commute-hud-actions button { min-height: 34px; padding: 5px 12px; border: 1px solid #9edfeb; border-radius: 8px; background: #2c3458; color: #fff4db; font-weight: 700; }
.commute-hud-actions .primary { grid-column: 1 / -1; background: #ffbf62; color: #251238; }
/* The road fills the space left under the HUD, so its bottom frame stays on
   screen from a tall desktop down to an SVGA sized window. */
.commute-field { position: relative; flex: 1 1 auto; min-width: 0; width: 100%; height: auto; min-height: min(200px, 45dvh); max-height: 60vw; overflow: hidden; border: 3px solid #ffcf70; border-radius: 17px; background: #231d46; box-shadow: 0 5px 0 #ef79a3; }
.commute-field-top { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 8px; padding: 8px 13px; background: #1b1639dc; font: 700 11px "DM Mono", monospace; letter-spacing: .08em; color: #fff1b3; }
/* The canvas fills the frame outright so the road's height comes from the
   layout instead of the canvas' own pixel size. */
#commute-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
.commute-overlay { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(440px, calc(100% - 32px)); padding: 25px; border: 2px solid #ffdd8d; border-radius: 18px; background: #201439ed; box-shadow: 0 0 45px #ed71a355; text-align: center; }
.commute-overlay[hidden] { display: none; }
.commute-overlay p { margin: 0; font: 700 11px "DM Mono", monospace; letter-spacing: .16em; color: #80eae7; }
.commute-overlay h2 { margin: 12px 0; font: clamp(25px, 4vw, 42px)/1.05 Bungee, sans-serif; color: #ffe083; }
.commute-overlay span { display: block; margin-bottom: 18px; line-height: 1.45; }
.commute-overlay .primary, .commute-overlay button { display: inline-block; margin: 3px; padding: 10px 14px; border: 0; border-radius: 8px; background: #ffca6a; color: #241838; font-weight: 800; text-decoration: none; cursor: pointer; }
.commute-overlay button:not(.primary) { background: #7de3df; }
/* Instructions share the arcade's short, scannable start cards. */
.commute-instructions { width: 100%; margin: 14px 0; padding: 12px; }
.commute-instructions .help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 11px; line-height: 1.4; letter-spacing: 0; }
.commute-instructions .help-grid span { margin: 0; min-height: 48px; padding: 8px; color: #fff3d7; }
/* The start card scrolls inside the road frame, but its button stays put so
   the trip can always be launched. */
#commute-intro { width: min(680px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: hidden; padding: 20px; display: flex; flex-direction: column; }
#commute-intro .commute-instructions { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#commute-intro > p, #commute-intro > h2 { flex: none; }
#commute-intro-start { flex: none; align-self: center; }
.commute-help { margin: 0; font: 11px/1.5 "DM Mono", monospace; }
.commute-help summary { padding: 8px 0; cursor: pointer; color: #82e9e2; }
.commute-help summary:focus-visible { outline: 2px solid #ffe083; outline-offset: 3px; }
.commute-help ul { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; width: min(360px, 100%); box-sizing: border-box; margin: 0; padding: 14px 14px 14px 30px; border: 1px solid #b98cff88; border-radius: 14px; background: #201439f5; box-shadow: 0 8px 24px #0006; color: #e9d6f5; }
.commute-help li + li { margin-top: 8px; }
#commute .game-nav.game-marquee { flex: none; }
@media (max-width: 950px) {
  .commute-hud { grid-template-columns: minmax(0, 1fr) auto; }
  #commute-status { grid-column: 1; grid-row: 2; }
  .commute-help { grid-column: 2; grid-row: 2; }
}
@media (max-width: 800px) {
  #commute { padding: 6px 6px 10px; }
  .commute-shell { margin-top: 6px; gap: 6px; }
  .game-nav.game-marquee { height: 46px; min-height: 46px; padding: 6px 10px 4px; gap: 8px; }
  .commute-hud { padding: 6px 8px; gap: 6px 8px; }
  .commute-readouts { gap: 4px 8px; }
  .commute-stat small { font-size: 8px; }
  .commute-stat strong { font-size: 13px; }
  .commute-progress { height: 3px; }
  #commute-status { font-size: 10px; line-height: 1.3; }
  .commute-hud-actions { grid-template-columns: auto auto; }
  .commute-hud-actions .primary { grid-column: auto; }
  .commute-hud-actions button { min-height: 30px; font-size: 10px; padding: 3px 6px; }
  .commute-field-top { padding: 6px 10px; font-size: 10px; }
  .commute-overlay { padding: 14px; }
  .commute-overlay h2 { margin: 8px 0; font-size: 22px; }
  .commute-instructions { margin: 8px 0; padding: 8px; }
  .commute-instructions .help-grid { font-size: 10px; gap: 6px; }
  .commute-instructions .help-grid span { min-height: 0; padding: 6px; }
}
@media (max-height: 700px) {
  .commute-overlay { padding: 14px; }
  .commute-overlay h2 { margin: 8px 0; font-size: 24px; }
  .commute-instructions { margin: 8px 0; padding: 8px; }
  .commute-instructions .help-grid { font-size: 10px; gap: 6px; }
  .commute-instructions .help-grid span { min-height: 0; padding: 6px; }
}
@media (max-width: 760px) {
  .commute-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 10px; }
  .commute-hud .eyebrow, .commute-hud h2 { display: none; }
  .commute-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; align-items: center; }
  .commute-stat { display: block; padding: 0; border: 0; }
  .commute-stat small { font-size: 8px; }
  .commute-stat strong { display: block; font-size: 15px; }
  .commute-progress { grid-column: 1 / -1; grid-row: 2; height: 5px; margin: 0; }
  .commute-hud-actions { align-content: start; gap: 4px; }
  .commute-hud-actions button { min-height: 32px; font-size: 10px; padding: 4px 8px; }
  #commute-status { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .commute-help { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  .commute-help summary { padding: 4px 0; }
  .commute-field { flex: 0 1 auto; aspect-ratio: 4 / 3; height: auto; min-height: min(360px, 55dvh); }
  .commute-instructions .help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 550px) {
  #commute { padding: 5px; }
  .commute-field { min-height: 360px; }
  .commute-field-top { font-size: 8px; }
  .commute-overlay { padding: 15px; }
  #commute-intro { padding: 12px; }
  #commute-intro h2 { font-size: 25px; margin: 8px 0; }
  .commute-instructions { padding: 8px; margin: 8px 0; }
  .commute-instructions .help-grid { gap: 4px; font-size: 10px; }
  .commute-instructions .help-grid span { padding: 6px; min-height: 0; }
}

.commute-tickets { margin: 0 auto 15px; padding: 11px 14px; width: fit-content; max-width: 100%; border: 2px dashed #39224f; border-radius: 8px; background: #ffe7a1; color: #321b48; font: 700 clamp(11px, 2vw, 16px) "DM Mono", monospace; letter-spacing: .06em; box-shadow: 0 0 0 4px #ffe7a155, 0 0 22px #ffe7a188; }
.commute-tickets[hidden] { display: none; }