:root { font-family: "Segoe UI", Arial, sans-serif; color: #f4f1dc; background: #142621; font-synthesis: none; --cream: #f4f1dc; --muted: #b5c5b8; --lime: #d8eb98; --panel: #162c27; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid #f2d479; outline-offset: 5px; }
#app { width: 100%; height: 100%; min-height: 100svh; position: relative; overflow: hidden; background: #17392e; }
#game { position: absolute; inset: 0; outline: none; }
#game canvas { display: block; image-rendering: auto; }
.vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 140px 40px #0b201840; }
.hud { position: absolute; z-index: 5; left: max(4.5vw, env(safe-area-inset-left)); right: max(4.5vw, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; pointer-events: none; gap: 20px; }
.game-actions { display: flex; align-items: center; align-self: flex-start; flex-wrap: wrap; gap: 8px; min-width: 0; }
.top-hud { top: max(5vh, env(safe-area-inset-top)); }
.bottom-hud { bottom: max(5vh, env(safe-area-inset-bottom)); align-items: flex-end; }
.share-button { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 90px; min-height: 44px; padding: 9px 14px; background: #142d25e6; color: #e0eac8; border: 1px solid #c6d9b545; border-radius: 7px; box-shadow: 0 4px 15px #09241920; font-size: 12px; font-weight: 600; }
.share-button:hover { background: #294735; border-color: #d4e4b877; }
.share-button:disabled { opacity: .5; cursor: default; }
.share-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { font-size: clamp(8px, .72vw, 11px); letter-spacing: 2px; display: block; margin-top: 9px; color: #d1dbca; }
.session-status { display: flex; align-items: center; gap: 10px; background: #132b25e3; border: 1px solid #c6d9b525; border-radius: 30px; padding: 12px 17px; font-size: clamp(11px, 1vw, 14px); color: #e4eadc; box-shadow: 0 4px 20px #061d1620; }
.status-dot, .identity-dot { width: 7px; height: 7px; border-radius: 50%; background: #b9cab3; flex: 0 0 auto; }
.status-dot.live { background: #c5e88f; box-shadow: 0 0 8px #c5e88f60; }
.status-dot.waiting { background: #edbd77; animation: pulse 1.4s infinite; }
.status-dot.offline { background: #d49075; }
.status-divider { width: 1px; height: 15px; background: #c6d9b531; margin: 0 3px; }
.server-hud { position: relative; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.server-hud .session-status { white-space: nowrap; }
.traffic-panel { position: absolute; top: calc(100% + 9px); right: 0; width: 310px; pointer-events: auto; color: #d8e3c9; background: #112b24ed; border: 1px solid #c6d9b531; border-radius: 9px; box-shadow: 0 6px 22px #091f1933; }
.traffic-panel summary { cursor: pointer; padding: 10px 13px; list-style: none; display: flex; flex-direction: column; gap: 7px; user-select: none; }
.traffic-panel summary::-webkit-details-marker { display: none; }
.traffic-panel summary:focus-visible { outline: 2px solid #e4ecab; outline-offset: 3px; border-radius: 8px; }
.traffic-heading { display: flex; align-items: center; justify-content: space-between; font-size: 8px; letter-spacing: 1.7px; color: #a2b798; font-weight: 650; }
.traffic-chevron { font-size: 14px; line-height: 10px; transition: transform .18s; }
.traffic-panel[open] .traffic-chevron { transform: rotate(180deg); }
.traffic-rates { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr .65fr; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.traffic-rates > span { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; white-space: nowrap; }
.traffic-rates small { color: #96ae96; font-size: 9px; }
.traffic-rates b { color: #e0edb2; font-weight: 600; }
.traffic-details { border-top: 1px solid #c6d9b521; padding: 11px 13px 13px; max-height: min(60vh, 390px); overflow-y: auto; overscroll-behavior: contain; }
.traffic-caption { display: flex; justify-content: space-between; gap: 8px; color: #95ab90; font-size: 10px; }
.traffic-table { display: flex; flex-direction: column; gap: 11px; margin: 14px 0 12px; font-size: 11px; }
.traffic-table > div { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.traffic-table dt { color: #bdcdb4; }
.traffic-table dd { margin: 0; text-align: right; color: #edf1d2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.traffic-table .traffic-estimate { border-top: 1px solid #c6d9b525; padding-top: 12px; }
.traffic-note, .traffic-scope, .traffic-grace { font-size: 10px; line-height: 1.55; margin: 8px 0 0; color: #a4b69d; }
.traffic-scope { color: #c0ccb4; }
.traffic-grace { border-top: 1px solid #c6d9b521; padding-top: 9px; color: #d2dcb7; }
.people-icon { font-size: 20px; color: #d5e1ca; line-height: 10px; }
.join-screen { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; padding: 8vh 8.5vw; background: linear-gradient(90deg, #112920f5 0%, #112920e6 24%, #112920a1 43%, #11292020 68%, transparent 100%); transition: opacity .45s ease; }
.join-screen.leaving { opacity: 0; pointer-events: none; }
.join-copy { margin-top: 18px; max-width: 640px; }
.section-kicker { font-size: clamp(10px, .86vw, 12px); font-weight: 600; letter-spacing: 2.3px; color: #d8e8aa; display: flex; align-items: center; gap: 10px; }
.section-kicker > span { display: block; width: 23px; height: 1px; background: #d8e8aa; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(38px, 5.4vw, 79px); letter-spacing: -2.3px; line-height: 1.08; margin: 22px 0 23px; text-shadow: 0 3px 20px #142b2360; }
h1 em { color: #dbe6af; font-weight: 400; }
.join-copy > p { font-size: clamp(13px, 1.25vw, 18px); line-height: 1.8; color: #c2cfc0; margin: 0 0 30px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid #e6f2b6; border-radius: 7px; padding: 16px 20px; color: #243626; background: var(--lime); font-size: clamp(13px, 1.1vw, 16px); font-weight: 650; box-shadow: 0 5px 0 #09221866, 0 10px 35px #0e211b50; transition: background .15s, transform .15s; }
.primary-button:hover { background: #e9f5b7; transform: translateY(-2px); }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { cursor: wait; opacity: .7; transform: none; }
.a-button { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border: 1.5px solid #47603b; border-radius: 50%; font-weight: 600; font-size: 14px; }
.button-arrow { font-size: 22px; font-weight: 400; margin-left: 12px; }
.world-note { position: absolute; right: 8%; bottom: 26%; display: flex; align-items: center; gap: 14px; font-size: 10px; line-height: 1.7; letter-spacing: 2px; color: #e5e7c8; text-shadow: 0 2px 3px #19342c; }
.note-line { width: 36px; height: 1px; background: #e5e7c89c; }
.controls-panel { display: flex; flex-direction: column; gap: 11px; padding: 13px 16px; background: #142d25db; border: 1px solid #c6d9b51d; border-radius: 8px; }
.controller-status { color: #a6b99f; font-size: 11px; letter-spacing: .05px; }
.controller-status.ready { color: #d4eaa5; }
.controller-status.reversed { color: #81ed8d; font-weight: 600; }
.pacman-status { color: #f9d67d; font-size: 12px; line-height: 1.6; white-space: pre-line; }
.pacman-status.powered { color: #b7d7ff; }
.identity-panel { pointer-events: auto; display: flex; gap: 9px; align-items: center; background: #142d25e8; padding: 13px 16px; border-radius: 8px; border: 1px solid #c6d9b526; font-size: 13px; }
.identity-dot { width: 9px; height: 9px; }
.text-button { color: #bfd198; border: 0; border-left: 1px solid #bdccaf30; background: none; padding: 0 0 0 12px; margin-left: 4px; font-size: 11px; }
.text-button:hover { color: #edf5c4; }
.text-button:disabled { opacity: .4; cursor: default; }
.toast { position: absolute; z-index: 6; left: 50%; top: 17%; transform: translateX(-50%); border-radius: 7px; background: #122b25f2; padding: 12px 22px; border: 1px solid #deecb74a; box-shadow: 0 5px 20px #0b1c1640; font-size: 13px; text-align: center; max-width: 80%; }
.modal-backdrop { position: absolute; inset: 0; display: grid; place-items: center; z-index: 10; background: #071b17b8; backdrop-filter: blur(5px); padding: 25px; }
.name-card { width: min(460px, 100%); background: #203b2f; border: 1px solid #bfd1975c; box-shadow: 0 20px 90px #061a1666; border-radius: 14px; padding: 34px; }
.name-card h2 { font-family: Georgia, serif; font-weight: 400; font-size: 29px; line-height: 1.2; margin: 18px 0 12px; }
.name-card p { color: #bacab3; font-size: 13px; line-height: 1.6; }
.name-card label { display: block; font-size: 12px; margin: 24px 0 9px; }
.name-card input { width: 100%; background: #132b23; border: 1px solid #9bae846e; padding: 12px; color: #f4f1dc; font-size: 17px; border-radius: 5px; }
.share-backdrop { overflow-y: auto; overscroll-behavior: contain; }
.share-card { width: min(520px, 100%); max-height: calc(100svh - 50px); overflow-y: auto; background: #203b2f; border: 1px solid #bfd1975c; box-shadow: 0 20px 90px #061a1666; border-radius: 14px; padding: 29px; text-align: center; }
.share-intro .section-kicker { justify-content: center; font-size: 10px; }
.share-card h2 { font-family: Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin: 15px 0 12px; }
.share-intro p { color: #c0ceb8; font-size: 13px; line-height: 1.65; margin: 0 auto 22px; max-width: 370px; }
.share-qr { width: min(354px, 100%); margin: 0 auto; padding: 12px; background: #fff; border: 1px solid #fff; border-radius: 9px; }
.share-qr img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.share-url { color: #e2eacb; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .2px; overflow-wrap: anywhere; margin: 14px 0 20px; }
.share-actions { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.share-actions button { min-height: 44px; min-width: 115px; }
.share-close-hint { font-size: 10px; color: #aabb9f; }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 25px; gap: 12px; }
.secondary-button { background: none; border: 0; padding: 10px 0; color: #d3dfc6; font-size: 13px; }
.compact-button { padding: 11px 15px; font-size: 13px; }
.join-copy > .join-error, .name-card .form-error { color: #f3b7a2; margin-top: 15px; font-size: 13px; }
.no-script { position: fixed; inset: 30%; z-index: 20; padding: 30px; background: #172d2a; }
.touch-controls { position: absolute; left: max(5vw, env(safe-area-inset-left)); bottom: max(14vh, 78px); z-index: 6; display: flex; align-items: center; flex-direction: column; gap: 8px; user-select: none; -webkit-user-select: none; }
.touch-stick { position: relative; width: 126px; height: 126px; border: 1px solid #e2edbd5c; border-radius: 50%; background: #142d2599; box-shadow: inset 0 0 0 10px #d2dfaa08, 0 4px 24px #082b2130; touch-action: none; }
.touch-knob { position: absolute; width: 47px; height: 47px; top: calc(50% - 23.5px); left: calc(50% - 23.5px); border-radius: 50%; background: #d7e6aabf; border: 2px solid #eff4c8bb; box-shadow: 0 3px 10px #071e1650; pointer-events: none; }
.touch-stick.active { background: #173d2ecc; border-color: #e3edbcb0; }
.touch-stick.active .touch-knob { background: #d8eb98; }
.touch-cross { position: absolute; background: #d8e5b029; pointer-events: none; }
.touch-cross.horizontal { left: 18px; top: 50%; width: 88px; height: 1px; }
.touch-cross.vertical { left: 50%; top: 18px; width: 1px; height: 88px; }
.touch-playing .controls-panel { padding: 0; border: 0; background: none; }
.touch-playing .controller-status { max-width: 165px; text-shadow: 0 1px 5px #112b1c; }
@keyframes pulse { 50% { opacity: .35; } }
@media (min-aspect-ratio: 19/9) { .join-copy { margin-left: 4vw; } }
@media (max-width: 720px) { .hud { left: 5%; right: 5%; } .top-hud { top: 4%; } .bottom-hud { bottom: 4%; } .eyebrow { letter-spacing: 1.2px; font-size: 8px; } .session-status { padding: 9px 12px; gap: 7px; } .session-status .people-icon, .status-divider { display: none; } #connection-label { max-width: 100px; } .join-screen { padding-left: 7%; background: linear-gradient(90deg, #112920f0, #112920ac 65%, #11292038); } h1 { letter-spacing: -1px; } .join-copy { margin-top: -20px; } .world-note { display: none; } .controls-panel { padding: 10px; gap: 8px; } .controller-status { max-width: 265px; font-size: 10px; } .identity-panel { flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 160px; padding: 10px; font-size: 11px; } .text-button { border: none; padding: 0; margin: 2px 0 0; flex-basis: 100%; text-align: right; font-size: 10px; } }
@media (max-height: 530px) { .top-hud { top: 5%; } .bottom-hud { bottom: 5%; } .join-copy { margin-top: 15px; } .section-kicker { font-size: 9px; } h1 { font-size: clamp(29px, 5.3vw, 47px); margin: 12px 0; } .join-copy > p { font-size: 12px; line-height: 1.5; margin-bottom: 15px; } .primary-button { padding: 10px 14px; } .controls-panel { padding: 8px 11px; gap: 5px; } .eyebrow { margin-top: 5px; } .name-card { padding: 20px; } .name-card h2 { margin: 10px 0; } .name-card label { margin-top: 14px; } .form-actions { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (pointer: coarse) and (max-height: 530px) { .touch-controls { bottom: 15%; left: 5%; } .touch-stick { width: 104px; height: 104px; } .touch-cross.horizontal { width: 66px; } .touch-cross.vertical { height: 66px; } .identity-panel { font-size: 11px; } }
@media (max-aspect-ratio: 3/4) { .join-screen { align-items: center; padding-bottom: 12vh; } .join-copy { margin-top: 0; } h1 { font-size: 44px; } .top-hud { align-items: flex-start; } .session-status { flex-wrap: wrap; max-width: 122px; justify-content: center; font-size: 10px; } .touch-controls { bottom: 15%; } .bottom-hud { align-items: center; } .identity-panel { max-width: 175px; } }
@media (max-width: 520px) { .top-hud { gap: 12px; } }
@media (max-width: 720px) { .server-hud { flex: 0 0 auto; max-width: 145px; } .server-hud .session-status { white-space: normal; max-width: 145px; flex-wrap: wrap; justify-content: center; } .traffic-panel { width: 145px; } .traffic-panel summary { padding: 8px 10px; gap: 6px; } .traffic-heading { font-size: 7px; letter-spacing: 1.3px; } .traffic-rates { font-size: 10px; gap: 4px; flex-direction: column; } .traffic-rates > span { justify-content: space-between; } .traffic-panel[open] { width: min(290px, 90vw); } .traffic-panel[open] .traffic-rates { flex-direction: row; gap: 12px; } .traffic-panel[open] .traffic-rates > span { justify-content: flex-start; } .traffic-details { max-height: 45vh; } }
@media (max-width: 380px) { .server-hud { max-width: 125px; } .server-hud .session-status { max-width: 125px; padding: 8px; font-size: 9px; } .traffic-panel { width: 125px; } }
@media (max-height: 530px) { .traffic-panel { width: 235px; } .traffic-panel summary { padding: 7px 10px; gap: 5px; } .traffic-details { max-height: 48vh; } }
@media (max-width: 520px) { .share-button { min-width: 82px; padding: 8px 12px; font-size: 11px; } .share-card { padding: 23px; } .share-card h2 { font-size: 28px; } .share-qr { padding: 10px; } .share-intro p { font-size: 12px; margin-bottom: 18px; } .share-url { font-size: 11px; } }
@media (max-height: 600px) and (min-width: 600px) { .share-backdrop { padding: 18px; } .share-card { width: min(760px, 100%); max-height: calc(100svh - 36px); display: grid; grid-template-columns: minmax(0, 1fr) min(53vh, 280px); gap: 10px 28px; padding: 23px; text-align: left; } .share-intro { align-self: center; } .share-intro .section-kicker { justify-content: flex-start; font-size: 9px; } .share-card h2 { font-size: 29px; } .share-intro p { margin: 0; font-size: 12px; } .share-code { grid-column: 2; grid-row: 1 / 3; align-self: center; } .share-qr { padding: 10px; } .share-url { margin: 9px 0 0; font-size: 10px; text-align: center; } .share-actions { align-items: flex-start; align-self: end; gap: 8px; } }
@media (min-width: 600px) and (min-height: 601px) and (max-height: 800px) { .share-card { padding: 22px; } .share-card h2 { font-size: 30px; margin: 12px 0 9px; } .share-intro p { margin-bottom: 18px; } .share-qr { width: min(320px, 100%); } .share-url { margin: 11px 0 16px; } .share-actions { gap: 8px; } }

/* Compact controls for the shared physics sandbox. */
.driving-status { position: absolute; z-index: 4; top: 26px; left: 50%; transform: translateX(-50%); display: grid; gap: 7px; width: min(500px, 48vw); padding: 14px 20px; border: 1px solid #83bcba70; border-radius: 8px; background: #172b30eb; color: #eaf0d7; pointer-events: none; }
.driving-status[hidden] { display: none; }
.drive-title { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #93d8ce; }
.drive-gear { letter-spacing: 1px; color: #f0d091; }
.driving-status strong { font: 600 27px/1.1 "Segoe UI", sans-serif; font-variant-numeric: tabular-nums; }
.drive-help { font-size: 11px; line-height: 1.5; color: #d0dace; }
.drive-surface { font-size: 12px; font-weight: 600; color: #c9df9a; }
.drive-return { font-size: 10px; color: #86c8c8; }
.driving .motion-panel, .driving .controls-panel { display: none; }
.touch-drive-actions { position: fixed; bottom: max(18vh, 144px); right: max(6vw, env(safe-area-inset-right)); display: grid; grid-template-columns: repeat(2, 76px); gap: 8px; }
.touch-drive-actions button { width: 76px; height: 56px; border: 2px solid #93d8ce99; border-radius: 16px; background: #172b30cc; color: #f0e3ba; touch-action: none; pointer-events: auto; font-size: 10px; font-weight: 700; }
.touch-drive-actions button[aria-pressed="true"] { background: #4a817d; border-color: #d0eee1; }
.driving.touch-playing .touch-controls { bottom: max(18vh, 116px); }
.driving.touch-playing .bottom-hud { bottom: max(12px, env(safe-area-inset-bottom)); }
.driving.touch-playing .identity-panel { max-width: none; width: 100%; justify-content: space-between; padding: 8px; gap: 7px; }
.driving.touch-playing .player-colour-label { flex-basis: auto; }
@media (max-width: 720px) { .driving-status { top: max(155px, calc(5vh + 112px)); width: min(330px, 85vw); padding: 10px 13px; } .driving-status strong { font-size: 23px; } .drive-help { font-size: 10px; } }
@media (max-height: 530px) { .driving-status { top: 10px; width: min(350px, 45vw); gap: 4px; padding: 8px 12px; } .drive-return { display: none; } }
.share-button { min-width: 70px; box-shadow: none; padding: 8px 10px; }
.session-status { padding: 10px 12px; font-size: 12px; border-radius: 7px; }
.vignette { display: none; }
.join-screen { justify-content: center; padding: 110px 25px; background: #12271b45; }
.join-copy { margin: 0; width: min(450px, 100%); max-width: 450px; padding: 26px; background: #172d25f2; border: 1px solid #b3c69a60; border-radius: 10px; }
.join-copy h1 { font: 600 27px/1.2 "Segoe UI", Arial, sans-serif; letter-spacing: -.5px; margin: 0 0 14px; text-shadow: none; }
.join-copy > p { font-size: 13px; line-height: 1.65; margin-bottom: 20px; }
.join-copy .primary-button { padding: 12px 16px; font-size: 14px; box-shadow: none; }
.identity-panel { flex-wrap: wrap; max-width: 380px; padding: 10px 12px; gap: 9px; }
.player-colour-label { display: inline-flex; align-items: center; gap: 7px; color: #d0ddbe; font-size: 11px; }
#player-color { width: 38px; height: 32px; padding: 3px; background: transparent; border: 1px solid #b4c39865; border-radius: 5px; cursor: pointer; }
.car-style-label { display: inline-flex; align-items: center; gap: 7px; color: #d0ddbe; font-size: 11px; }
.car-style-label[hidden] { display: none; }
#car-style { min-height: 36px; padding: 6px 9px; color: #eaf0d7; background: #172d25; border: 1px solid #b4c39865; border-radius: 5px; font: inherit; cursor: pointer; }
#car-style:focus-visible { outline: 3px solid #f2d479; outline-offset: 2px; }
.motion-panel { position: relative; margin-left: auto; color: #d0ddbe; }
.motion-panel summary { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-height: 44px; padding: 8px 10px; border: 1px solid #b4c39865; border-radius: 5px; font-size: 11px; cursor: pointer; list-style: none; user-select: none; }
.motion-panel summary::-webkit-details-marker { display: none; }
.motion-panel summary:focus-visible { outline: 3px solid #f2d479; outline-offset: 3px; }
.motion-panel summary:hover, .motion-panel[open] summary { background: #294735; }
.motion-chevron { font-size: 15px; }
.motion-panel[open] .motion-chevron { transform: rotate(180deg); }
.motion-controls { position: absolute; z-index: 7; right: 0; bottom: calc(100% + 10px); width: min(270px, 85vw); max-height: min(300px, 65svh); overflow-y: auto; overscroll-behavior: contain; padding: 15px; background: #162f26fa; border: 1px solid #b3c69a60; border-radius: 9px; box-shadow: 0 6px 22px #091f1950; }
.motion-title { margin: 0 0 14px; color: #edf1d2; font-size: 12px; font-weight: 600; }
.motion-setting { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; font-size: 12px; }
.motion-setting output { font-size: 11px; font-variant-numeric: tabular-nums; }
.motion-setting input { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 44px; margin: 0; accent-color: var(--lime); cursor: pointer; }
.motion-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.motion-footer p { margin: 0; color: #a8bc9e; font-size: 10px; line-height: 1.5; }
.motion-footer button { min-height: 44px; padding: 6px 10px; color: #d9e8b9; border: 1px solid #b4c39865; border-radius: 5px; background: transparent; font-size: 11px; }
.motion-footer button:hover { background: #294735; }
.name-card h2, .share-card h2 { font-family: "Segoe UI", Arial, sans-serif; font-size: 25px; font-weight: 600; }
.controls-panel { padding: 10px 12px; gap: 7px; }
@media (max-width: 720px) {
  .identity-panel { max-width: 205px; padding: 9px; justify-content: flex-end; }
  .identity-panel .text-button { flex-basis: auto; margin: 0; }
  .player-colour-label { flex-basis: 100%; justify-content: flex-end; }
  .join-copy { padding: 22px; }
  .join-copy h1 { font-size: 25px; }
  .join-copy > p { font-size: 12px; }
}
@media (max-height: 530px) {
  .join-screen { padding-block: 60px; }
  .join-copy { padding: 18px 22px; }
  .join-copy h1 { font-size: 23px; margin-bottom: 8px; }
  .join-copy > p { margin-bottom: 12px; }
}

.drive-combat { font-size: 12px; color: #f0d394; }
.driving-minimap { position: absolute; z-index: 4; left: 5vw; top: 100px; width: 200px; padding: 5px; border: 1px solid #e8c39380; border-radius: 8px; background: #242b27eb; pointer-events: none; }
.driving-minimap[hidden] { display: none; }
.driving-minimap canvas { display: block; width: 100%; height: auto; border-radius: 4px; }
.driving-minimap > span { display: block; text-align: center; font: 10px 'Segoe UI', sans-serif; padding-top: 3px; }
.driving-minimap b { color: #fff; font-weight: normal; }.driving-minimap i { color: #74e4ea; font-style: normal; }.driving-minimap em { color: #ff886b; font-style: normal; }
@media (max-width: 720px) { .driving-minimap { left: 20px; right: auto; top: 83px; bottom: auto; width: 119px; padding: 3px; } .driving-minimap canvas { height: 48px; } .driving-minimap > span { font-size: 8px; } }
@media (max-height: 530px) { .driving-minimap { left: 38px; right: auto; top: 76px; bottom: auto; width: 152px; padding: 3px; } .driving-minimap canvas { height: 48px; } .driving-minimap > span { font-size: 8px; } }
.drive-weapons { font-size: 11px; color: #d9e6d2; }
@media (max-height: 530px) { .drive-combat, .drive-weapons { font-size: 10px; } }
@media (max-width: 720px) {
  .traffic-panel { width: 205px; }
  .traffic-panel summary { padding: 6px 10px; }
  .traffic-rates, .traffic-panel[open] .traffic-rates { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr .65fr; gap: 4px; }
  .traffic-rates > span, .traffic-panel[open] .traffic-rates > span { flex-direction: column; align-items: flex-start; gap: 1px; }
  .traffic-rates small { font-size: 8px; }
}

.drive-debug { display: grid; gap: 7px; }
.drive-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.drive-debug button { justify-self: start; pointer-events: auto; min-height: 32px; border: 1px solid #87b5ab80; border-radius: 5px; padding: 5px 10px; background: #203d38; color: #e7efdb; font-size: 11px; }
.drive-debug button[aria-pressed="true"] { background: #355948; border-color: #82ff98; }
#collision-legend { font-size: 10px; line-height: 1.5; color: #c8d4c6; }
.collision-body { color: #82ff98; } .collision-ground { color: #65dafa; }
.collision-cab { color: #ffd36a; } .collision-contact { color: #ff6161; }

/* Controller menu: safe TV margins, strong focus and browser-free pickers. */
.game-menu-opener { position: absolute; z-index: 7; left: max(4.5vw, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); font-size: 15px; min-height: 44px; }
.menu-open-hint { margin-left: 8px; color: #c9df9a; font-size: 12px; }
.bottom-hud .controls-panel { margin-bottom: 44px; }
.game-menu-backdrop { position: absolute; z-index: 30; inset: 0; padding: 5vh 5vw; display: flex; align-items: center; justify-content: center; background: #081711c9; }
.game-menu-card { display: flex; flex-direction: column; width: min(680px, 100%); max-height: 90vh; padding: 24px 30px 18px; color: #f4f1dc; background: #172d27; border: 2px solid #a4c09a; border-radius: 14px; box-shadow: 0 16px 70px #0008; }
.menu-kicker { color: #b9cf9a; letter-spacing: 2px; font-size: 12px; }
.game-menu-card h2 { font-size: clamp(25px, 2.4vw, 36px); margin: 5px 0 8px; }
.game-menu-card header p { color: #bdcdbd; line-height: 1.4; font-size: 15px; margin: 0 0 16px; }
.game-menu-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 5px; margin: -5px; scrollbar-color: #afc88a #172d27; }
.menu-group { display: grid; gap: 8px; margin-bottom: 8px; }
.menu-group button { width: 100%; min-height: 48px; border: 2px solid #698570; border-radius: 7px; padding: 9px 16px; background: #223d32; color: #f3f2df; text-align: left; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.25; }
.menu-group button[aria-pressed="true"] { border-color: #d8eb98; background: #3b5438; }
.menu-group button[aria-pressed="true"]::after { content: ' ✓'; color: #d8eb98; }
.menu-group button:hover { background: #3a5540; }
.menu-group button.menu-focused, .menu-group button:focus-visible { outline: 3px solid #ffe395; outline-offset: 1px; background: #d8eb98; color: #172b22; border-color: #f4f1dc; }
.menu-group button.menu-focused::after { color: #243d26; }
.menu-group button:disabled { opacity: .4; cursor: default; }
.menu-group input { width: 100%; min-height: 48px; border: 2px solid #91ad85; background: #0e211b; color: #fff; border-radius: 6px; padding: 8px 12px; font-size: 22px; }
.menu-colours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.menu-group .menu-colour { display: flex; align-items: center; gap: 10px; padding-inline: 10px; }
.menu-colour::before { content: ''; flex: 0 0 25px; height: 25px; border-radius: 50%; border: 2px solid #fff9; background: var(--swatch); }
.menu-keys { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.menu-name-entry { position: sticky; top: 0; z-index: 1; background: #172d27; }
.menu-keys button, .menu-edit-keys button { scroll-margin-top: 64px; }
.menu-keys button { padding: 5px 0; min-height: 44px; text-align: center; }
.menu-edit-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.menu-edit-keys button { padding-inline: 6px; text-align: center; }
.game-menu-message { color: #ffe395; min-height: 1.4em; margin: 10px 0 8px; font-size: 16px; }
.game-menu-card footer { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 12px; border-top: 1px solid #88a47b66; font-size: clamp(14px, 1.1vw, 18px); color: #c5d7bd; }
.game-menu-card footer b { color: #ecf3d0; }
.menu-qr { width: min(280px, 100%); margin: auto; border: 12px solid white; border-radius: 8px; }
.menu-guide { display: grid; grid-template-columns: auto 1fr; gap: 15px 20px; font-size: 17px; }
.menu-guide dt { color: #d8eb98; font-weight: 600; }
.menu-guide dd { margin: 0; }
@media (max-width: 520px) {
  .game-menu-card { padding: 17px 14px 14px; }
  .menu-colours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-keys { gap: 4px; }
  .menu-keys button { min-height: 40px; font-size: 16px; }
  .menu-guide { grid-template-columns: 1fr; gap: 7px; }
  .menu-guide dd { margin-bottom: 10px; }
}
@media (max-height: 600px) {
  .game-menu-card { padding: 12px 18px; }
  .game-menu-card h2 { font-size: 25px; }
  .game-menu-card header p { font-size: 13px; margin-bottom: 8px; }
  .game-menu-message { margin: 6px 0; font-size: 14px; }
  .game-menu-card footer { padding-top: 8px; }
}