/* Hometown Run: road signs. Highway-sign green panels with white borders, the Overpass typeface (drawn after the
   US highway sign lettering, SIL OFL, self-hosted), yellow warning diamonds and asphalt. Its own look; games.css
   loads first only for the shared rules (no selectable text, the back button's pop-up). */
@font-face { font-family: Overpass; src: url(/fonts/overpass-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Overpass; src: url(/fonts/overpass-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
:root {
  --sign: #0d6b45; --sign-dark: #08482f; --white: #f7f7f2; --asphalt: #2b2f36; --tar: #1c1f24; --line: #ffc629;
  --warn: #ffc629; --blue: #1f5fae; --red: #c8352b;
}
* { box-sizing: border-box; }
html, body.hr { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--tar); }
body.hr { color: var(--white); font-family: Overpass, "Highway Gothic", "Arial Narrow", system-ui, sans-serif; font-weight: 700; }
.hr #app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.muted { color: #c9d8cf; font-weight: 700; }

.hr button, .hr .link { font: inherit; color: var(--white); cursor: pointer; }
.hr button { border: 3px solid var(--white); border-radius: 10px; background: var(--sign); padding: 8px 14px; min-height: 48px; font-size: 18px; font-weight: 900; box-shadow: 0 0 0 3px var(--sign-dark), 0 5px 0 3px #00000055; transition: transform .08s; }
.hr button:active { transform: translateY(3px); }
.hr button:focus-visible, .hr .link:focus-visible, .hr input:focus-visible { outline: 3px solid var(--line); outline-offset: 3px; }
.hr .link { background: none; border: 0; min-height: 44px; padding: 8px 6px; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; }
.hr button.icon { min-width: 44px; min-height: 44px; padding: 4px 8px; font-size: 18px; border-radius: 50%; }
.hr button.back, .hr button.back.quiet { color: var(--white); background: var(--sign); border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--sign-dark); font-weight: 900; min-height: 44px; min-width: 44px; padding: 6px 12px 6px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.playing button.back { font-size: 0; gap: 0; padding: 6px; justify-content: center; }
.playing button.back span { font-size: 22px; }

/* a road sign panel */
.sign { background: var(--sign); color: var(--white); border: 3px solid var(--white); border-radius: 10px; box-shadow: 0 0 0 3px var(--sign-dark), 0 6px 14px #0007; }
.sign small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; line-height: 1; }

/* top bar */
.hr-top { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: flex-start; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 10px 6px; pointer-events: none; }
.hr-top > * { pointer-events: auto; }
#back-slot:empty { display: none; }
.hr-top #sound, #pause { margin-left: auto; }
.playing #sound { display: none; }
.hud { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: stretch; }
.hud .sign { padding: 4px 10px; display: flex; flex-direction: column; justify-content: center; }
.hud .next { flex: 1; min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
.arrow { display: inline-block; font-size: 26px; line-height: 1; transition: transform .15s linear; }
.next-text { min-width: 0; flex: 1; }
.next-text b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dist { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hud .clock, .hud .drops { min-width: 58px; text-align: center; }
.hud .clock b, .hud .drops b { font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hud .clock.low { background: var(--red); box-shadow: 0 0 0 3px #7a1a14, 0 6px 14px #0007; animation: blink .8s steps(2) infinite; }
.free .hud .clock, .free .hud .drops, .free .hud .next { display: none; }
@keyframes blink { 50% { filter: brightness(1.35); } }
@media (max-width: 430px) {
  .next-text small { display: none; }
  .next-text b { font-size: 15px; }
  .hud .clock, .hud .drops { min-width: 48px; }
  .hud .clock b, .hud .drops b { font-size: 20px; }
}

#stage { position: relative; flex: 1; min-height: 0; }
#world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.mini { position: absolute; right: 10px; top: calc(max(8px, env(safe-area-inset-top)) + 64px); width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--sign-dark), 0 6px 14px #0007; background: #e7e1cf; z-index: 5; }
.speed { position: absolute; left: 12px; top: calc(max(8px, env(safe-area-inset-top)) + 64px); z-index: 5; background: var(--white); color: var(--tar); border: 3px solid var(--tar); border-radius: 8px; padding: 2px 8px; text-align: center; min-width: 56px; }
.on-street { position: absolute; left: 12px; top: calc(max(8px, env(safe-area-inset-top)) + 122px); z-index: 5; max-width: 46vw; background: var(--sign); color: var(--white); border: 2px solid var(--white); border-radius: 6px; box-shadow: 0 0 0 2px var(--sign-dark), 0 4px 10px #0006; padding: 3px 8px 1px; font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.on-street.empty { display: none; }
.speed b { display: block; font-size: 24px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.speed small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.pop { position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%) rotate(45deg); z-index: 6; width: 150px; height: 150px; background: var(--warn); border: 5px solid var(--tar); border-radius: 14px; display: grid; place-items: center; color: var(--tar); box-shadow: 0 10px 22px #0008; animation: pop 1.3s ease-out forwards; pointer-events: none; }
.pop span { transform: rotate(-45deg); text-align: center; font-size: 20px; font-weight: 900; line-height: 1.1; }
.pop span b { display: block; font-size: 30px; }
@keyframes pop { 0% { transform: translate(-50%, -50%) rotate(45deg) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -50%) rotate(45deg) scale(1.08); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -80%) rotate(45deg) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pop { animation: none; } .hud .clock.low { animation: none; } .arrow { transition: none; } }

/* touch controls */
.pads { position: absolute; left: 0; right: 0; bottom: 0; z-index: 8; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 12px max(28px, calc(env(safe-area-inset-bottom) + 18px)); pointer-events: none; }
.pads > div { display: flex; gap: 12px; pointer-events: auto; }
.hr .pad { width: 74px; height: 74px; border-radius: 50%; font-size: 28px; padding: 0; background: #0d6b45dd; touch-action: none; }
.hr .pad.held { background: var(--sign-dark); transform: translateY(3px); }
.hr .pedal { border-radius: 14px; width: 78px; height: 96px; font-size: 18px; }
.hr .pedal.gas { height: 110px; background: #1f5faedd; box-shadow: 0 0 0 3px #123a6a, 0 5px 0 3px #00000055; }
.hr .pedal.brake { background: #c8352bdd; box-shadow: 0 0 0 3px #7a1a14, 0 5px 0 3px #00000055; }
.hr .pedal.held { filter: brightness(.8); }
@media (pointer: fine) and (min-width: 900px) { .pads { display: none; } }

/* pages */
.page { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; padding: calc(max(8px, env(safe-area-inset-top)) + 56px) 16px max(30px, env(safe-area-inset-bottom)); overflow-y: auto; }
.page.home, .page.mine { background: linear-gradient(#1c1f2433, #1c1f24cc 70%); }
.board { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; }
.logo { margin: 0 auto; padding: 14px 22px 12px; font-size: clamp(34px, 9vw, 46px); font-weight: 900; text-align: center; line-height: 1; position: relative; letter-spacing: -.01em; }
.logo em { font-style: normal; color: var(--line); }
.logo .exit { position: absolute; top: -18px; right: 14px; font-size: 12px; letter-spacing: .1em; background: var(--sign); border: 2px solid var(--white); border-radius: 6px 6px 0 0; padding: 3px 8px 2px; border-bottom: 0; }
.tag { margin: 0; text-align: center; font-size: 16px; text-shadow: 0 2px 6px #000; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hr .mode { background: var(--asphalt); font-size: 16px; }
.hr .mode.on { background: var(--sign); outline: 3px solid var(--line); outline-offset: 2px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hr .level { min-height: 44px; border-radius: 8px; border: 2px solid var(--white); background: var(--asphalt); color: var(--white); font: inherit; font-size: 15px; font-weight: 900; cursor: pointer; }
.hr .level.on { background: var(--line); color: var(--tar); }
.picks { display: flex; flex-direction: column; gap: 10px; }
.lv-blurb { margin: -4px 0 0; text-align: center; font-size: 13px; text-shadow: 0 2px 6px #000; }
.towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hr .sign-btn { width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; font-size: 18px; line-height: 1.1; padding: 8px 12px; }
.hr .sign-btn small { font-size: 12px; font-weight: 700; opacity: .85; margin-top: 3px; }
.hr .sign-btn .best { color: var(--line); }
.hr .sign-btn.go { background: var(--blue); box-shadow: 0 0 0 3px #123a6a, 0 5px 0 3px #00000055; align-items: center; font-size: 22px; }
.hr .sign-btn.mine { background: var(--asphalt); align-items: center; }
.mine-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.hr .sign-btn.mine.here { background: var(--blue); box-shadow: 0 0 0 3px #123a6a, 0 5px 0 3px #00000055; }
.here-msg { margin: -4px 0 0; text-align: center; font-size: 13px; text-shadow: 0 2px 6px #000; }
.row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.small-sign { margin: 0 auto; padding: 8px 18px; font-size: 26px; font-weight: 900; text-align: center; }
.find label { display: block; font-size: 14px; margin-bottom: 6px; }
.find-row { display: flex; gap: 8px; }
.find input { flex: 1; min-width: 0; min-height: 48px; border-radius: 10px; border: 3px solid var(--white); background: var(--white); color: var(--tar); padding: 0 12px; font: inherit; font-size: 18px; }
.loading .board, .end .board, .paused .board { align-items: stretch; text-align: center; }
.page.loading, .page.end, .page.paused { background: #1c1f24c0; }
.cone { font-size: 46px; margin: 0; }
.end-town { margin: 0; font-size: 18px; }
.end-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.end-stats div { background: var(--white); color: var(--tar); border: 3px solid var(--tar); border-radius: 10px; padding: 8px; box-shadow: 0 0 0 3px var(--white); }
.end-stats b { display: block; font-size: 38px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.end-stats small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.credit { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(4px, env(safe-area-inset-bottom)); z-index: 9; margin: 0; font-size: 11px; color: #f7f7f2cc; text-shadow: 0 1px 3px #000; white-space: nowrap; pointer-events: auto; }
.credit a { color: inherit; }
.playing .credit { bottom: auto; top: calc(max(8px, env(safe-area-inset-top)) + 200px); right: 10px; left: auto; transform: none; font-size: 10px; }
@media (orientation: landscape) and (max-height: 500px) {
  .board { width: min(720px, 100%); }
  .towns { grid-template-columns: repeat(4, 1fr); }
  .board { gap: 6px; }
  .tag { display: none; }
  .picks { display: grid; grid-template-columns: 1fr 1fr; }
  .hr .mode { font-size: 14px; padding: 6px 8px; }
  .lv-blurb, .hr .sign-btn.mine small { display: none; }
  .hr .sign-btn.mine { min-height: 44px; padding: 6px 12px; }
  .logo { font-size: 30px; padding: 8px 18px 6px; }
  .hr .pad { width: 64px; height: 64px; }
  .hr .pedal { height: 78px; } .hr .pedal.gas { height: 90px; }
  .mini { width: 108px; height: 108px; }
  .playing .credit { top: auto; bottom: 4px; right: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-height: 680px) and (orientation: portrait) { .board { gap: 8px; } .picks { gap: 8px; } }
/* phones held upright: the drop-off sign gets its own row under Back, Lock and Pause */
@media (max-width: 600px) {
  .hr-top { flex-wrap: wrap; }
  .hud { order: 5; flex-basis: 100%; }
  .mini { top: calc(max(8px, env(safe-area-inset-top)) + 124px); width: 112px; height: 112px; }
  .speed { top: calc(max(8px, env(safe-area-inset-top)) + 124px); }
  .on-street { top: calc(max(8px, env(safe-area-inset-top)) + 182px); }
  .playing .credit { top: calc(max(8px, env(safe-area-inset-top)) + 242px); }
}
/* the "Stop this run?" pop-up from kit.js, as a sign */
.hr .leave-ask .card { background: var(--sign); color: var(--white); border: 3px solid var(--white); border-radius: 12px; box-shadow: 0 0 0 4px var(--sign-dark), 0 12px 30px #000a; }
.hr .leave-ask .muted { color: #d9eadf; }
.hr .leave-ask .go { background: var(--red); box-shadow: 0 0 0 3px #7a1a14; }