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

:root{font-family:Inter,Arial,sans-serif;color:#f7fbf9;background:#07110f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 50% -30%,#153e33 0,#07110f 55%)}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #00d094;outline-offset:3px}.app{width:min(1320px,100%);margin:auto;padding:16px clamp(12px,3vw,32px) 24px}.topbar{height:72px;display:flex;align-items:center;gap:20px}.logo{width:160px;height:62px;object-fit:contain;object-position:left center}.topbar-title{border-left:1px solid #365047;padding-left:20px;display:flex;flex-direction:column;line-height:1}.topbar-title span,.eyebrow{font-size:10px;letter-spacing:.25em;color:#06cb8c;font-weight:800}.topbar-title strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:31px;letter-spacing:.045em}.icon-button{margin-left:auto;border:1px solid #355347;border-radius:9px;background:#10221d;color:#f7fbf9;padding:10px 14px;font-weight:800}.icon-button span{font-size:13px;margin-left:5px}.game-shell{position:relative;overflow:hidden;border:1px solid #315447;border-radius:16px;background:#0b2117;box-shadow:0 20px 70px #0008;aspect-ratio:16/9;min-height:380px}.game-shell canvas{display:block;width:100%;height:100%;touch-action:none}.hud{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;gap:1px;background:#10241ee8;border-bottom:1px solid #325346;backdrop-filter:blur(8px)}.hud-item{padding:10px 20px;min-width:95px;display:flex;flex-direction:column;gap:2px}.hud-item span:first-child{font-size:10px;font-weight:800;letter-spacing:.18em;color:#81a798}.hud-item strong{font-family:'Barlow Condensed',Impact,sans-serif;font-size:26px;letter-spacing:.04em;line-height:1}.hud-item.speed{margin-left:auto;text-align:right}.hud-item small{font:700 12px Inter,Arial,sans-serif;color:#89b2a2}.notice{position:absolute;left:50%;top:18%;transform:translateX(-50%);padding:9px 18px;border:1px solid #27bd8b;border-radius:999px;background:#07251ddd;color:#e9fff5;text-align:center;font-size:13px;font-weight:800;pointer-events:none;white-space:nowrap;transition:opacity .4s}.notice.hidden{opacity:0}.game-footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:9px 15px;color:#c1dacd;background:#091912b8;font-size:10px;font-weight:800;letter-spacing:.16em}.controls{display:flex;justify-content:space-between;gap:20px;margin-top:14px;touch-action:none}.steering,.pedals{display:flex;gap:10px}.control{border:1px solid #365d4d;border-radius:12px;background:#173228;color:white;min-width:82px;height:75px;font-weight:900;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 5px 0 #06130d}.control:active,.control.active{transform:translateY(4px);box-shadow:0 1px 0 #06130d;background:#235844}.control.steer{font-size:36px;line-height:1}.control.brake{border-color:#ad5c4f;background:#48231e;color:#ffb3a8}.control.brake.active{background:#713328}.control.gas{border-color:#00b47c;background:#087c57;color:#fff}.control.gas.active{background:#05a772}.help{max-width:900px;margin:16px 0 6px;color:#9fb9ae;font-size:13px;line-height:1.5}.text-button{border:0;background:none;color:#04ce8f;font-weight:800;padding:6px 0;text-decoration:underline;text-underline-offset:4px}dialog{width:min(600px,calc(100% - 24px));max-height:90dvh;overflow:auto;border:1px solid #35634e;border-radius:17px;background:#0d2119;color:#f4fff8;padding:26px;box-shadow:0 30px 90px #000c}dialog::backdrop{background:#000b}.dialog-head{display:flex;align-items:start;gap:16px}.dialog-head h2{font:800 34px/1 'Barlow Condensed',Impact,sans-serif;margin:7px 0 0}.dialog-head .close{font-size:26px;line-height:1;padding:3px 10px}.dialog-head+p{color:#bbd3c7;line-height:1.55;font-size:14px}.device-status{border:1px solid #315747;background:#143526;border-radius:9px;padding:12px;font-size:13px;font-weight:700}.calibration{margin-top:16px;display:grid;gap:8px}.calibration-step{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:12px;background:#152a20;border-radius:8px;padding:9px 11px}.calibration-step>span{color:#08d194;font:800 20px 'Barlow Condensed',Impact,sans-serif}.calibration-step strong,.calibration-step small{display:block}.calibration-step strong{font-size:13px}.calibration-step small{font-size:11px;color:#98b4a4;margin-top:2px}.calibration-step button{border:1px solid #227e58;background:#075c40;color:#fff;border-radius:7px;padding:8px 11px;font-size:12px;font-weight:800}.calibration-step button.saved{background:#08452f;border-color:#08c987}.calibration-status{color:#06d08d;font-size:13px;font-weight:700;min-height:20px}.hint{font-size:12px;color:#91ad9e;line-height:1.5}@media(max-width:650px){.app{padding:8px 8px 18px}.topbar{height:58px;gap:7px}.logo{width:106px;height:45px}.topbar-title{padding-left:9px}.topbar-title span{font-size:7px}.topbar-title strong{font-size:20px}.icon-button{padding:7px 9px}.icon-button span{display:none}.game-shell{aspect-ratio:4/5;min-height:440px;border-radius:10px}.hud-item{padding:8px 7px;min-width:0}.hud-item.wide{flex:1}.hud-item span:first-child{font-size:8px}.hud-item strong{font-size:20px}.hud-item.speed{flex:0 0 74px}.hud-item small{font-size:9px}.notice{top:18%;font-size:11px;white-space:normal;max-width:80%}.game-footer{font-size:8px;letter-spacing:.05em}.control{min-width:65px;height:68px;font-size:12px}.control.steer{font-size:31px}.controls{gap:6px}.steering,.pedals{gap:6px}.help{font-size:11px}.calibration-step{grid-template-columns:18px 1fr auto;gap:6px;padding:8px}.calibration-step button{padding:7px;font-size:11px}}


/* Fit desktop driving and its controls inside the browser viewport. */
@media (pointer:fine) and (min-width:651px) {
  .game-shell {
    height:clamp(240px,calc(100dvh - 270px),640px);
    min-height:0;
    aspect-ratio:auto;
  }
}
/* Canvas drawing-buffer dimensions must never enlarge the driving viewport. */
.game-shell #track { position:absolute; inset:0; }

/* Keep the road and both thumb controls visible in the mobile browser viewport. */

.topbar #settings-button{margin-left:0}
@media (pointer:coarse),(max-width:650px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{touch-action:none}
  dialog{touch-action:pan-y;overscroll-behavior:contain}
  .app{height:100dvh;min-height:0;display:flex;flex-direction:column;gap:8px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .topbar{height:46px;flex:0 0 46px;gap:8px}
  .logo{width:100px;height:42px}
  .topbar-title{padding-left:8px}.topbar-title strong{font-size:20px}.topbar-title span{font-size:7px}
  .icon-button{min-width:44px;min-height:44px;padding:8px}.icon-button span{display:none}
  .game-shell{flex:1 1 0;min-height:0;aspect-ratio:auto!important;width:100%;border-radius:10px}
  .hud-item{padding:8px 7px;min-width:0}.hud-item.wide{flex:1}.hud-item span:first-child{font-size:8px}.hud-item strong{font-size:20px}.hud-item.speed{flex:0 0 76px}.hud-item small{font-size:9px}
  .notice{top:72px;font-size:11px;white-space:normal;width:max-content;max-width:80%}
  .controls{flex:0 0 100px;margin:0;gap:12px;align-items:stretch;flex-wrap:nowrap}
  .wheel-controls{display:none}
  .steering{display:flex;flex:1;min-width:0;gap:8px}
  .pedals{flex:1;justify-content:flex-end;gap:8px}.control{min-width:0;flex:1;max-width:120px;height:100%;min-height:72px;border-radius:16px;font-size:13px;-webkit-touch-callout:none}
  .help{flex:0 0 auto;margin:0;font-size:10px;line-height:1.35}
  .game-footer{font-size:8px;letter-spacing:0;padding:6px 8px}
  dialog{padding:18px}.telemetry{right:10px;bottom:30px}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:900px) and (max-height:500px){
  .app{gap:4px}.topbar{height:36px;flex-basis:36px}.logo{height:32px;width:90px}.topbar-title strong{font-size:18px}.topbar .icon-button{min-height:34px}
  .controls{flex-basis:76px}.help{display:none}
  .hud-item{padding:5px 10px}.hud-item strong{font-size:18px}.notice{top:52px}.telemetry strong{font-size:18px}.telemetry span{font-size:8px}
}

/* Flag buttons remain available in both the game and the startup dialog. */
.language-switcher{display:flex;flex-shrink:0;gap:4px}
.language-switcher button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:6px;border:2px solid #355347;border-radius:8px;background:#10221d;touch-action:manipulation}
.language-switcher button[aria-pressed="true"]{border-color:#00d094;background:#194936}
.language-switcher button:hover{background:#235844}
.language-switcher svg{display:block;width:30px;height:auto;border-radius:1px}
.topbar{gap:clamp(6px,2vw,20px)}
.topbar .language-switcher{margin-left:auto}
.topbar .icon-button{margin-left:0;flex-shrink:0;white-space:nowrap}
.topbar-title{flex-shrink:0;white-space:nowrap}
.topbar .logo{flex-shrink:0}
@media(min-width:701px) and (max-width:1100px){
  .topbar{gap:8px}
  .topbar .logo{width:110px}
  .topbar-title{padding-left:12px}
  .topbar-title strong{font-size:clamp(20px,2.4vw,27px)}
  .topbar .icon-button{padding:10px 8px}
  .topbar .icon-button span{font-size:12px}
}
@media(min-width:701px) and (max-width:950px){.topbar .icon-button span{display:none}}
.dialog-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:700px){.topbar-title{display:none}.topbar .icon-button{padding:8px;flex-shrink:0}.topbar .icon-button span{display:none}}
@media(max-width:380px){.topbar{gap:4px}.topbar .logo{width:60px}}

.verification-state{position:absolute;z-index:3;top:81px;left:10px;max-width:calc(100% - 20px);margin:0;padding:5px 9px;border-radius:6px;background:#10241ee8;color:#d7f5e6;font-size:11px;pointer-events:none}
.verification-state:empty{display:none}

.chat-panel[hidden]{display:none}
.chat-open .app{width:calc(100% - 304px);margin-left:304px}
.leaderboard-start-form .chat-visibility{display:flex;align-items:center;gap:8px;grid-column:1 / -1;min-height:44px;margin:4px 0}.chat-visibility input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:#00b47c}
.chat-panel{position:fixed;z-index:20;right:max(12px,calc((100vw - 1260px)/2));top:94px;width:min(370px,calc(100vw - 24px));max-height:calc(100dvh - 110px);display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid #35634e;border-radius:14px;background:#0d2119f5;box-shadow:0 16px 50px #0009;touch-action:pan-y}
.chat-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.chat-heading h2{margin:0;font:800 26px 'Barlow Condensed',Impact,sans-serif}.chat-heading .icon-button{margin:0;padding:4px 12px;font-size:24px}
.chat-panel .hint{margin:0}.chat-panel ol{list-style:none;overflow:auto;overscroll-behavior:contain;margin:0;padding:0;min-height:70px;max-height:38dvh;touch-action:pan-y}.chat-panel li{padding:9px 0;border-bottom:1px solid #2c493b;overflow-wrap:anywhere;font-size:13px}.chat-panel time{float:right;color:#91ad9e;font-size:11px}.chat-panel li strong{color:#06cb8c}.chat-panel li p{margin:5px 0 0;white-space:pre-wrap}.chat-panel label{display:block;font-size:12px;margin-bottom:5px}.chat-compose{display:flex;gap:7px}.chat-compose input{min-width:0;flex:1;border:1px solid #35634e;border-radius:7px;background:#071910;color:#fff;padding:10px;font:16px Inter,Arial,sans-serif}.chat-compose button{border:1px solid #00b47c;border-radius:7px;background:#087c57;color:#fff;padding:9px;font-weight:700}.chat-compose button:disabled{opacity:.5}
@media(max-width:700px){.chat-panel{top:64px;max-height:calc(100dvh - 78px)}.chat-panel ol{max-height:32dvh}.topbar{gap:4px}.topbar .logo{width:80px}}
@media(max-width:380px){.topbar .logo{width:44px}.topbar .language-switcher{gap:0}.topbar .language-switcher button{min-width:36px;padding:3px}}

/* Chat stays in the left rail, including while the startup modal is open. */
.chat-panel { left:12px; right:auto; top:16px; width:280px; max-height:calc(100dvh - 32px); }
body.chat-open #settings-dialog { width:min(1040px,calc(100% - 328px)); max-width:calc(100% - 328px); margin-left:max(312px,calc((100vw - 1040px + 304px)/2)); }
@media(max-width:900px) {
  .chat-open .app { width:100%; margin-left:auto; padding-bottom:230px; }
  .chat-panel { top:auto; bottom:8px; left:8px; width:calc(100% - 16px); max-height:210px; gap:6px; padding:10px; }
  .chat-panel .hint { display:none; }
  .chat-panel ol { min-height:32px; max-height:70px; }
  .chat-panel .chat-heading h2 { font-size:20px; }
  .chat-panel .chat-heading .icon-button { min-height:30px; padding:2px 10px; }
  .chat-panel #chat-status { margin:0; font-size:11px; }
  .chat-panel #chat-form > label { display:none; }
  body.chat-open #settings-dialog { width:calc(100% - 16px); max-width:calc(100% - 16px); max-height:calc(100dvh - 238px); margin:8px auto auto; }
}

.hud-item.track-record { flex:1; min-width:0; max-width:220px; overflow:hidden; }
.hud-item.track-record > span { white-space:nowrap; letter-spacing:.08em; }
.hud-item.track-record #record-holder { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:1.2; letter-spacing:0; }

/* Full-height chat rail; messages consume the space above the composer. */
.chat-panel { top:0; bottom:0; left:0; height:100dvh; max-height:100dvh; border-radius:0; }
.chat-panel ol { flex:1 1 0; min-height:0; max-height:none; }
.chat-panel > :not(ol) { flex-shrink:0; }
.chat-panel #chat-status { margin:0; font-size:12px; }
.chat-presence { display:flex; align-items:center; gap:7px; margin:0; color:#acc9b9; font-size:12px; }
.chat-presence strong { color:#effff5; font-variant-numeric:tabular-nums; }
.chat-online-dot { width:7px; height:7px; border-radius:50%; background:#78e4ac; }
@media(max-width:900px) {
  .chat-panel { width:min(280px,100%); padding:16px; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .chat-panel ol { max-height:none; min-height:0; }
  .chat-open .app { padding-bottom:8px; }
  body.chat-open #settings-dialog { max-height:calc(100dvh - 24px); }
}