@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700;800&display=swap');

:root {
  --nc-ink: #11130f;
  --nc-paper: #f8f3df;
  --nc-dim: #c8c1aa;
  --nc-yellow: #ffce3d;
  --nc-red: #ee4440;
  --nc-teal: #43d4c7;
  --nc-dark: #1b1a17;
  --nc-line: #ffffff35;
  --nc-display: 'Barlow Condensed', Impact, 'Arial Narrow Bold', sans-serif;
  --nc-body: 'Barlow', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body { min-width: 320px; margin: 0; background: #21181d; color: var(--nc-paper); font-family: var(--nc-body); }
body > .shell { display: none !important; }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--nc-yellow); outline-offset: 3px; }
#experience { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: #a65e6a; user-select: none; -webkit-user-select: none; }
#city-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; z-index: -2; outline: 0; }
.scene-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #100d134f 0%, transparent 24%, #160e1322 56%, #0b0c0ddd 100%), linear-gradient(90deg, #11100e88 0%, transparent 42%, transparent 72%, #0c0b0a55 100%); pointer-events: none; }
#webgl-fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: 30px; background: linear-gradient(#ba7381, #292026 72%, #11130f); color: var(--nc-paper); text-align: center; font-size: 15px; }
#webgl-fallback[hidden] { display: none; }

.game-hud { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: 18px; left: 18px; display: flex; min-height: 55px; align-items: center; gap: 18px; }
.hud-brand { display: flex; min-width: 185px; align-items: center; gap: 9px; font: 700 17px var(--nc-display); letter-spacing: .5px; text-shadow: 0 2px 10px #0009; }
.hud-brand b { color: var(--nc-yellow); }
.hud-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--nc-yellow); color: var(--nc-yellow); font: 800 12px var(--nc-body); transform: rotate(-7deg); }
.hud-readout { display: flex; min-height: 48px; align-items: center; border: 1px solid #ffffff35; background: #12110fbd; box-shadow: 0 5px 18px #0003; backdrop-filter: blur(8px); }
.hud-readout > span { display: grid; min-width: 82px; gap: 1px; padding: 5px 12px; border-right: 1px solid #ffffff26; }
.hud-readout > span:last-child { border-right: 0; }
.hud-readout small { color: #d7cfb6; font: 700 9px var(--nc-body); letter-spacing: 1px; }
.hud-readout b { color: #fff7dd; font: 700 18px var(--nc-display); line-height: 1; }
.hud-readout span:first-child b { color: var(--nc-yellow); }
.hud-readout i { font-style: normal; }
.hud-readout em { margin-left: 3px; color: #b9b09b; font: 500 11px var(--nc-body); }
.hud-icon-button { display: grid; width: 42px; height: 42px; margin-left: auto; place-items: center; border: 1px solid #ffffff5a; border-radius: 50%; background: #11110fc9; cursor: pointer; font: 17px var(--nc-body); backdrop-filter: blur(8px); }
.hud-icon-button:hover { border-color: var(--nc-yellow); color: var(--nc-yellow); }

.mission-ribbon { position: absolute; z-index: 5; top: 81px; left: 19px; display: flex; max-width: min(420px, calc(100vw - 285px)); align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #ffffff36; background: #14120fc9; color: #e3dbc4; font: 700 9px var(--nc-body); letter-spacing: .8px; backdrop-filter: blur(7px); }
.mission-ribbon strong { overflow: hidden; color: var(--nc-yellow); font: 700 14px var(--nc-display); letter-spacing: .3px; text-overflow: ellipsis; white-space: nowrap; }
.mission-ribbon i { margin-left: auto; color: #aaa28e; font: 600 9px var(--nc-body); white-space: nowrap; }
.live-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--nc-red); box-shadow: 0 0 9px #ee4440b8; }

.map-card { position: absolute; z-index: 5; top: 78px; right: 18px; width: 232px; height: 183px; overflow: hidden; border: 1px solid #ffffff6b; background: #11130f; box-shadow: 0 10px 30px #0005; transition: inset .2s, width .2s, height .2s; }
.map-card.expanded { inset: 7% 7%; width: auto; height: auto; z-index: 30; box-shadow: 0 0 0 100vmax #090a09c9; }
.map-card-head { position: relative; z-index: 402; display: flex; height: 27px; align-items: center; justify-content: space-between; padding-left: 9px; background: #171715; color: var(--nc-paper); font: 700 9px var(--nc-body); letter-spacing: 1px; }
.map-card-head span { display: flex; align-items: center; gap: 7px; }
.map-card-head small { color: var(--nc-teal); font: 700 8px var(--nc-body); }
.map-card-head button { width: 28px; height: 27px; border: 0; background: transparent; color: var(--nc-paper); cursor: pointer; font-size: 15px; }
.map-card-head #streetview-open { width: auto; min-width: 36px; color: var(--nc-yellow); font: 800 9px var(--nc-display); }
.map-card-head button:hover { color: var(--nc-yellow); }
#map-slot { position: relative; height: calc(100% - 27px); }
#map { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: #d5dfd1; }
.leaflet-control-attribution { font-size: 8px !important; }
.leaflet-control-zoom { margin: 5px !important; }
.leaflet-control-zoom a { width: 22px !important; height: 22px !important; line-height: 22px !important; }
.map-card:not(.expanded) .leaflet-control-attribution { font-size: 7px !important; }
.map-card:not(.expanded) .leaflet-control-zoom { display: none; }

.streetview-panel { position: absolute; z-index: 12; inset: 72px 5vw 74px; display: grid; grid-template-rows: 46px minmax(0, 1fr) 31px; overflow: hidden; border: 1px solid #fff8; background: #11130f; box-shadow: 0 0 0 100vmax #080909bf, 0 16px 60px #0009; }
.streetview-panel[hidden] { display: none; }
.streetview-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #151512; }
.streetview-panel > header div { display: grid; gap: 2px; }
.streetview-panel > header small { color: var(--nc-teal); font: 700 8px var(--nc-body); letter-spacing: 1px; }
.streetview-panel > header strong { color: var(--nc-paper); font: 700 13px var(--nc-display); }
.streetview-panel > header button { width: 34px; height: 34px; border: 0; background: transparent; color: var(--nc-paper); cursor: pointer; font-size: 25px; }
#streetview-frame { width: 100%; height: 100%; border: 0; background: #242621; }
#streetview-frame[hidden] { display: none; }
#streetview-photo { width: 100%; height: 100%; object-fit: cover; background: #242621; }
#streetview-photo[hidden] { display: none; }
.streetview-setup { align-self: center; justify-self: center; width: min(470px, calc(100% - 28px)); padding: 22px; border: 1px solid #ffffff3d; background: #191815f5; }
.streetview-setup[hidden] { display: none; }
.streetview-setup > b { color: var(--nc-yellow); font: 800 25px var(--nc-display); }
.streetview-setup p { color: var(--nc-dim); font-size: 12px; line-height: 1.55; }
.streetview-setup label { display: block; margin: 15px 0 5px; color: var(--nc-teal); font: 700 9px var(--nc-body); letter-spacing: 1px; text-transform: uppercase; }
.streetview-setup > div { display: flex; gap: 6px; }
.streetview-setup input { min-width: 0; flex: 1; padding: 9px; border: 1px solid #ffffff44; background: #11130f; color: var(--nc-paper); }
.streetview-setup button { padding: 0 12px; border: 0; background: var(--nc-yellow); color: var(--nc-ink); cursor: pointer; font: 800 10px var(--nc-body); }
.streetview-setup a, .streetview-panel footer a { color: var(--nc-yellow); font: 700 9px var(--nc-body); text-decoration: none; }
.streetview-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 10px; background: #151512; color: var(--nc-dim); font: 600 8px var(--nc-body); }
.streetview-panel footer a { white-space: nowrap; }

.home-screen { position: absolute; z-index: 4; inset: 0; display: flex; align-items: flex-end; padding: 0 5.5% max(35px, env(safe-area-inset-bottom)); background: linear-gradient(90deg, #100e0dc9 0%, #100e0d77 35%, transparent 78%), linear-gradient(0deg, #0e0e0ddd 0%, #0e0e0d8a 18%, transparent 57%); opacity: 1; visibility: visible; transition: opacity .35s ease, visibility .35s; }
.home-screen.home-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.menu-open .control-dock, .menu-open .radio-dock { opacity: 0; visibility: hidden; pointer-events: none; }
.home-copy { width: min(710px, 78vw); padding-bottom: 11px; }
.home-kicker { display: flex; gap: 12px; margin: 0 0 11px; color: #dcd4bc; font: 700 10px var(--nc-body); letter-spacing: 1.8px; }
.home-kicker span:first-child { color: var(--nc-teal); }
.home-copy h1 { margin: 0; color: var(--nc-yellow); font: 900 clamp(70px, 11vw, 142px)/.73 var(--nc-display); letter-spacing: 0; text-shadow: 3px 5px 0 #16110e, 0 11px 26px #09090986; }
.home-copy h1 i { display: inline-block; padding-left: 75px; color: #fff9e8; font-size: .61em; font-style: italic; line-height: 1.05; }
.home-tagline { margin: 15px 0 17px; color: #f0e9d5; font: 700 12px var(--nc-body); letter-spacing: 2px; }
.home-tagline b { color: var(--nc-yellow); }
.home-route-row { display: flex; width: min(420px, 100%); align-items: center; gap: 14px; padding: 9px 12px; border-top: 1px solid #ffffff52; border-bottom: 1px solid #ffffff52; background: #10100fb3; }
.home-route-row > span { color: var(--nc-teal); font: 700 9px var(--nc-body); letter-spacing: 1.1px; white-space: nowrap; }
#home-route-slot { min-width: 0; flex: 1; }
#home-route-slot .route-select { min-height: 34px; border-color: transparent; background: #ffffff10; font: 700 13px var(--nc-body); }
.home-actions { display: flex; width: min(620px, 100%); gap: 9px; margin-top: 13px; }
#start-slot { flex: 1.35; }
#start-slot > button { width: 100%; min-height: 58px; border: 2px solid #211912; background: var(--nc-yellow); box-shadow: 0 5px 0 #975b14, 0 10px 20px #0005; color: #17130e; cursor: pointer; font: italic 900 25px var(--nc-display); letter-spacing: .4px; transform: skew(-2deg); transition: transform .12s, filter .12s; }
#start-slot > button:hover { filter: brightness(1.08); transform: skew(-2deg) translateY(-2px); }
.menu-button { display: flex; min-width: 111px; min-height: 52px; align-items: center; justify-content: center; gap: 7px; border: 1px solid #ffffff49; background: #171513e8; box-shadow: 0 5px 0 #080807; color: #f5edd9; cursor: pointer; font: 800 16px var(--nc-display); }
.menu-button span { color: var(--nc-yellow); font-size: 18px; }
.menu-button:hover { border-color: var(--nc-yellow); color: var(--nc-yellow); }
.home-how { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 18px; color: #e2dbc8; font: 600 9px var(--nc-body); letter-spacing: .3px; }
.home-how span { display: flex; align-items: center; gap: 6px; }
.home-how b { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: var(--nc-yellow); color: #20190d; font: 800 9px var(--nc-body); }
.home-bottom { position: absolute; right: 5.5%; bottom: max(13px, env(safe-area-inset-bottom)); left: 5.5%; display: flex; justify-content: space-between; color: #aaa18c; font: 700 8px var(--nc-body); letter-spacing: 1.2px; }

#start-button { position: static; min-height: 58px; }
.button-group { display: flex; gap: 6px; }
#radio-controls .button-group { align-items: center; }
#radio-controls #horn-button, #radio-controls #music-button { min-height: 30px; padding: 0 9px; border-color: #ffffff35; background: #181816; font: 700 9px var(--nc-body); }
#radio-controls #radio-track-button { max-width: 110px; min-height: 30px; overflow: hidden; padding: 0 8px; border: 1px solid #ffffff35; background: #181816; color: var(--nc-teal); cursor: pointer; font: 700 8px var(--nc-body); text-overflow: ellipsis; white-space: nowrap; }
#radio-controls #radio-volume { width: 75px; }
.radio-dock { position: absolute; z-index: 5; bottom: max(28px, env(safe-area-inset-bottom)); left: 19px; display: grid; width: 285px; min-height: 69px; grid-template-columns: auto 1fr; align-items: center; gap: 5px 12px; padding: 8px 11px; border: 1px solid #ffffff35; background: #12120fd9; box-shadow: 0 5px 19px #0004; backdrop-filter: blur(8px); }
.radio-brand { display: flex; align-items: center; gap: 7px; }
.radio-wave { color: var(--nc-yellow); font-size: 19px; }
.radio-brand span:last-child { display: grid; gap: 2px; }
.radio-brand b { font: 800 11px var(--nc-display); letter-spacing: .5px; }
.radio-brand small { color: var(--nc-teal); font: 700 7px var(--nc-body); letter-spacing: .7px; }
#radio-controls { justify-self: end; }
#radio-controls .radio-volume { color: transparent; font-size: 0; }
#radio-controls .radio-volume input { width: 71px; height: 13px; }
.radio-dock p { grid-column: 1 / -1; overflow: hidden; margin: 0; color: #a9a28f; font: 700 8px var(--nc-body); letter-spacing: .65px; text-overflow: ellipsis; white-space: nowrap; }

.control-dock { position: absolute; z-index: 5; right: 20px; bottom: max(27px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 15px; }
.touch-controls { display: grid !important; grid-template-columns: repeat(3, 55px); grid-template-rows: 57px 57px; gap: 7px; }
.touch-button { display: grid; min-width: 0; min-height: 0 !important; place-items: center; padding: 0 !important; border: 1px solid #ffffff67 !important; background: #171614d9 !important; box-shadow: 0 4px 0 #080807b5; color: #fff5d9 !important; cursor: pointer; font: 800 18px var(--nc-display) !important; touch-action: none; backdrop-filter: blur(8px); }
.touch-button:active { border-color: var(--nc-yellow) !important; background: #d6a920 !important; color: #18140b !important; transform: translateY(3px); }
.touch-button[data-control="left"] { grid-column: 1; grid-row: 2; border-radius: 28px 6px 6px 28px; }
.touch-button[data-control="right"] { grid-column: 3; grid-row: 2; border-radius: 6px 28px 28px 6px; }
.touch-button[data-control="interact"] { grid-column: 2; grid-row: 2; font-size: 9px !important; }
.touch-button[data-control="horn"] { grid-column: 2; grid-row: 1; font-size: 10px !important; }
.touch-button[data-control="brake"] { grid-column: 1; grid-row: 1; color: var(--nc-red) !important; }
.touch-button[data-control="gas"] { grid-column: 3; grid-row: 1; border-color: var(--nc-yellow) !important; background: var(--nc-yellow) !important; color: #21190d !important; }
.game-toast { position: absolute; z-index: 8; top: 49%; left: 50%; width: min(440px, calc(100vw - 40px)); padding: 13px 18px; border: 1px solid #ffffff5c; background: #171512e8; color: var(--nc-paper); text-align: center; font: 600 13px var(--nc-body); line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(-50%, -42%); transition: opacity .18s, transform .18s; }
.game-toast strong { display: block; margin-bottom: 3px; color: var(--nc-yellow); font: 800 22px var(--nc-display); }
.game-toast.visible { opacity: 1; transform: translate(-50%, -50%); }

.game-modal { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: #0d0d0dba; backdrop-filter: blur(6px); }
.game-modal[hidden] { display: none; }
.modal-panel { position: relative; width: min(490px, 100%); padding: 27px; border: 1px solid #ffffff50; background: #191815f5; box-shadow: 0 20px 80px #0008; }
.modal-close { position: absolute; top: 8px; right: 11px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--nc-paper); cursor: pointer; font-size: 27px; }
.modal-kicker { margin: 0 0 3px; color: var(--nc-teal); font: 700 9px var(--nc-body); letter-spacing: 1.5px; }
.modal-panel h2 { margin: 0; color: var(--nc-yellow); font: 900 43px/.95 var(--nc-display); }
.modal-copy { margin: 9px 0 20px; color: var(--nc-dim); font-size: 13px; }
.paint-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.paint-option { display: grid; gap: 8px; padding: 8px; border: 1px solid #ffffff32; background: #ffffff08; color: var(--nc-paper); cursor: pointer; font: 700 9px var(--nc-body); }
.paint-option.active { border-color: var(--nc-yellow); color: var(--nc-yellow); }
.paint-swatch { height: 55px; background: linear-gradient(90deg, #ec493d 0 22%, #f4ca39 22% 50%, #111a22 50% 76%, #32cec1 76%); }
.paint-swatch.coast { background: linear-gradient(90deg, #f5f0dc 0 25%, #039f99 25% 52%, #e33d49 52% 76%, #0c1a27 76%); }
.paint-swatch.neon { background: linear-gradient(90deg, #201940 0 20%, #de3bb5 20% 43%, #11d8f4 43% 64%, #e7e62d 64%); }
.garage-note { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; align-items: center; margin: 18px 0; padding: 11px 0; border-top: 1px solid #ffffff25; border-bottom: 1px solid #ffffff25; color: #aaa18c; font: 700 8px var(--nc-body); }
.garage-note b { color: var(--nc-paper); font-size: 9px; }
.action-button { min-height: 37px; padding: 0 13px; border: 1px solid #ffffff44; background: #26231e; color: var(--nc-paper); cursor: pointer; font: 700 10px var(--nc-body); }
.action-button.primary { border-color: var(--nc-yellow); background: var(--nc-yellow); color: #17130e; }
.modal-done { width: 100%; margin-top: 8px; }
.leader-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 12px; padding: 14px 3px; border-bottom: 1px solid #ffffff26; font-size: 12px; }
.leader-row span { color: var(--nc-teal); font: 700 17px var(--nc-display); }
.leader-row strong { color: var(--nc-yellow); }
.pause-panel { display: grid; gap: 9px; }
.pause-panel h2 { margin-bottom: 11px; }

@media (max-width: 760px) {
  .game-hud { top: max(8px, env(safe-area-inset-top)); right: 9px; left: 9px; min-height: 43px; gap: 6px; }
  .hud-brand { min-width: 0; gap: 6px; font-size: 14px; }
  .hud-mark { width: 29px; height: 29px; font-size: 10px; }
  .hud-readout { min-height: 39px; margin-left: auto; }
  .hud-readout > span { min-width: 56px; padding: 4px 7px; }
  .hud-readout > span:first-child { min-width: 71px; }
  .hud-readout small { font-size: 7px; }
  .hud-readout b { font-size: 15px; }
  .hud-icon-button { width: 35px; height: 35px; flex: 0 0 35px; margin-left: 0; }
  .mission-ribbon { top: 59px; left: 9px; max-width: calc(100vw - 194px); gap: 5px; padding: 6px 7px; font-size: 7px; }
  .mission-ribbon strong { font-size: 12px; }
  .mission-ribbon i { display: none; }
  .map-card { top: 59px; right: 9px; width: 165px; height: 127px; }
  .map-card-head { height: 23px; font-size: 8px; }
  .map-card-head button { height: 23px; }
  .map-card-head #streetview-open { min-width: 34px; font-size: 8px; }
  #map-slot { height: calc(100% - 23px); }
  .home-screen { align-items: flex-end; padding: 0 16px max(125px, calc(env(safe-area-inset-bottom) + 112px)); background: linear-gradient(90deg, #0f0e0dc2, #0f0e0d3d 88%), linear-gradient(0deg, #0d0d0df2 0%, #10100dc4 30%, transparent 73%); }
  .home-copy { width: 100%; padding-bottom: 0; }
  .home-kicker { gap: 8px; margin-bottom: 8px; font-size: 8px; }
  .home-copy h1 { font-size: clamp(67px, 17vw, 104px); }
  .home-copy h1 i { padding-left: 42px; }
  .home-tagline { margin: 9px 0 10px; font-size: 9px; letter-spacing: 1.2px; }
  .home-route-row { gap: 8px; padding: 6px 8px; }
  .home-route-row > span { font-size: 7px; }
  #home-route-slot .route-select { min-height: 31px; font-size: 11px; }
  .home-actions { gap: 6px; margin-top: 9px; }
  #start-slot { flex: 1.15; }
  #start-slot > button { min-height: 47px; font-size: 20px; }
  .menu-button { min-width: 68px; min-height: 44px; gap: 3px; padding: 0 5px; font-size: 12px; }
  .menu-button span { font-size: 14px; }
  .home-how { gap: 5px 11px; margin-top: 10px; font-size: 7px; }
  .home-how b { width: 15px; height: 15px; font-size: 7px; }
  .home-bottom { right: 12px; bottom: max(8px, env(safe-area-inset-bottom)); left: 12px; font-size: 6px; letter-spacing: .6px; }
  .radio-dock { bottom: max(78px, calc(env(safe-area-inset-bottom) + 74px)); left: 9px; width: 201px; min-height: 52px; gap: 3px 7px; padding: 5px 7px; }
  .radio-wave { font-size: 15px; }
  .radio-brand b { font-size: 9px; }
  .radio-brand small { font-size: 6px; }
  .radio-dock p { font-size: 6px; }
  #radio-controls #horn-button, #radio-controls #music-button { min-height: 25px; padding: 0 5px; font-size: 7px; }
  #radio-controls #radio-track-button { max-width: 72px; min-height: 25px; padding: 0 4px; font-size: 6px; }
  #radio-controls #radio-volume { display: none; }
  .control-dock { right: 9px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 73px)); gap: 0; }
  .touch-controls { grid-template-columns: repeat(3, 43px); grid-template-rows: 45px 45px; gap: 5px; }
  .touch-button { font-size: 15px !important; }
  .touch-button[data-control="interact"], .touch-button[data-control="horn"] { font-size: 8px !important; }
  .game-toast { top: 39%; font-size: 12px; }
  .streetview-panel { inset: 52px 7px 58px; grid-template-rows: 40px minmax(0, 1fr) 31px; }
  .streetview-setup { padding: 15px; }
  .streetview-setup > b { font-size: 21px; }
  .streetview-panel footer { font-size: 7px; }
  .modal-panel { padding: 22px 17px; }
  .modal-panel h2 { font-size: 37px; }
}

@media (max-width: 390px) {
  .hud-brand { font-size: 12px; }
  .hud-mark { width: 26px; height: 26px; }
  .hud-readout > span { min-width: 48px; padding: 4px 5px; }
  .hud-readout > span:first-child { min-width: 62px; }
  .hud-readout small { letter-spacing: .5px; }
  .hud-readout b { font-size: 13px; }
  .hud-icon-button { width: 31px; height: 31px; flex-basis: 31px; }
  .mission-ribbon { max-width: calc(100vw - 183px); }
  .map-card { width: 156px; height: 120px; }
  .home-screen { padding-right: 11px; padding-left: 11px; }
  .home-copy h1 { font-size: 67px; }
  .home-how { font-size: 6px; }
  .home-how span { gap: 4px; }
  .radio-dock { width: 178px; }
  .control-dock { right: 7px; }
  .touch-controls { grid-template-columns: repeat(3, 39px); grid-template-rows: 42px 42px; }
  .home-bottom { font-size: 5px; }
}

@media (max-height: 570px) {
  .home-screen { padding: 100px 5.5% max(18px, env(safe-area-inset-bottom)); }
  .home-copy { width: min(650px, 78vw); }
  .home-kicker { margin-bottom: 6px; font-size: 8px; }
  .home-copy h1 { font-size: clamp(54px, 12vh, 70px); }
  .home-tagline { margin: 7px 0 9px; font-size: 9px; }
  .home-route-row { padding-top: 5px; padding-bottom: 5px; }
  .home-actions { margin-top: 8px; }
  #start-slot > button { min-height: 45px; font-size: 20px; }
  .menu-button { min-height: 43px; }
  .home-how { display: none; }
  .home-bottom { bottom: 6px; }
  .map-card { height: 145px; }
}

@media (max-width: 760px) and (max-height: 570px) {
  .home-screen { padding: 100px 13px max(22px, env(safe-area-inset-bottom)); }
  .home-copy { width: 100%; }
  .home-copy h1 { font-size: clamp(49px, 11vh, 64px); }
  .home-tagline { margin: 5px 0 7px; font-size: 8px; }
  .home-route-row { width: min(360px, 100%); }
  .home-actions { width: min(560px, 100%); }
  .home-bottom { bottom: 5px; }
}