:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0b3549; }
body { touch-action: none; user-select: none; }
#lake { width: 100%; height: 100%; display: block; touch-action: none; }
.hud { position: fixed; z-index: 2; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: max(14px, env(safe-area-inset-top)) 18px 10px; pointer-events: none; background: linear-gradient(#062b3bdb, transparent); text-shadow: 0 2px 10px #001923; }
.readouts { grid-column:2; display: flex; gap: clamp(12px, 4vw, 42px); text-align: center; }
.readouts div { min-width: 58px; }
.readouts span, .readouts small { display: block; color: #8dc7d5; font-size: 9px; letter-spacing: .12em; }
.readouts small em { color:#f0d681; font-style:normal; letter-spacing:0; }
.readouts strong { font: 700 23px/1.05 ui-monospace, monospace; color: white; }
.metric-bar,.g-readout i { display:block; width:54px; height:3px; margin:3px auto 0; border-radius:4px; background:#ffffff22; overflow:hidden; }
.metric-bar b,.g-readout i b { display:block; width:0%; height:100%; background:linear-gradient(90deg,#6ed6c2,#f1c85e,#e56342); border-radius:4px; }
.g-readout i { display:block; width:54px; height:3px; margin:3px auto 0; border-radius:4px; background:#ffffff22; overflow:hidden; }.g-readout i b{display:block;width:25%;height:100%;background:linear-gradient(90deg,#6ed6c2,#f1c85e,#e56342);border-radius:4px;}
.actions { grid-column:3; justify-self: end; display: flex; gap: 8px; pointer-events: auto; }
.rider-picker select { height:27px; max-width:126px; padding:0 5px; border:1px solid #b7eaf244; border-radius:7px; background:#092e3d; color:#f3ebd0; font:700 9px ui-sans-serif,system-ui; }
.views { display: flex; gap: 3px; padding: 3px; border: 1px solid #b7eaf233; border-radius: 10px; background: #05293888; }
.views button { height: 26px; padding: 0 8px; border: 0; background: transparent; font-size: 9px; }
.views button.selected { background: #dfb953; color: #173747; }
button { border: 1px solid #b7eaf266; background: #092e3dbd; color: #f8fbf5; border-radius: 9px; font: 700 12px inherit; letter-spacing: .08em; }
.actions button { height: 34px; min-width: 34px; padding: 0 11px; }
.actions button.selected { background:#dfb953;color:#173747; }
.wake-key { position: fixed; z-index: 2; left: 18px; top: 82px; display: flex; align-items: center; gap: 8px; color: #b7dae2; font-size: 10px; pointer-events: none; }
.wake-key i { width: 36px; height: 4px; border-radius: 9px; background: linear-gradient(90deg,#f8f2d1,#4293a8aa,#4293a822); }
.instruments { position: fixed; z-index: 2; right: 20px; bottom: 112px; display: flex; align-items: flex-end; gap: 12px; pointer-events: none; filter: drop-shadow(0 5px 12px #001b25aa); }
.wheel-wrap { position:fixed; left:24px; bottom:105px; width:126px; display:flex; flex-direction:column; align-items:center; gap:5px; color:#b8dbe1; font-size:8px; letter-spacing:.12em; pointer-events:auto; }
.wheel-wrap small { font-size:7px; color:#82bac5; white-space:nowrap; }.wheel-wrap small.connected { color:#f2cd67; }
.steering-wheel { position:relative; width:112px; height:112px; border:8px solid #d8c99b; border-radius:50%; box-shadow:inset 0 0 0 3px #4e3c2c,0 0 0 3px #142e38,0 8px 20px #001923aa; touch-action:none; }
.steering-wheel i { position:absolute; width:7px; height:46px; left:45px; top:46px; background:#d8c99b; transform-origin:50% 3px; pointer-events:none; }
.steering-wheel i:nth-child(2){transform:rotate(120deg)}.steering-wheel i:nth-child(3){transform:rotate(240deg)}
.steering-wheel b { position:absolute; z-index:2; width:30px; height:30px; left:33px; top:33px; border-radius:50%; background:#d15d39; border:3px solid #593326; }
.speedometer { position:fixed; z-index:2; left:50%; bottom:34px; transform:translateX(-50%); width:104px; height:82px; text-align:center; color:#d9edf0; font-size:9px; pointer-events:none; filter:drop-shadow(0 5px 12px #001b25aa); }
.speed-face { position: relative; width: 100px; height: 62px; overflow: hidden; border: 3px solid #d8e8dc88; border-bottom: 0; border-radius: 100px 100px 8px 8px; background: radial-gradient(circle at 50% 96%,#163744 0 13%,transparent 14%),conic-gradient(from 225deg at 50% 100%,#70d4c4 0 20%,#ebcc5b 20% 43%,#e76543 43% 50%,transparent 50%); }
.speed-face::after { content:""; position:absolute; inset:6px 6px 0; border-radius:90px 90px 0 0; background:#082d3c; }
.speed-face i { position:absolute; z-index:2; width:38px; height:3px; left:50%; bottom:3px; transform-origin:0 50%; transform:rotate(-180deg); background:#fff3c6; border-radius:4px; }
.speed-face b { position:absolute; z-index:3; left:45px; bottom:-2px; width:10px; height:10px; border-radius:50%; background:#e9c25d; }
.speed-face span { position:absolute; z-index:3; font:700 8px ui-monospace,monospace; }.s0{left:7px;bottom:4px}.s10{left:13px;top:31px}.s20{left:50%;top:8px;transform:translateX(-50%)}.s30{display:block;right:13px;top:31px}.smax{right:6px;bottom:4px}
.speedometer small { letter-spacing:.16em; }
.speedometer .cruise-indicator { display:none; color:#f1d67e; font:700 8px ui-monospace,monospace; letter-spacing:.08em; }
.speedometer.cruise-active > small:not(.cruise-indicator) { display:none; }
.speedometer.cruise-active .cruise-indicator { display:block; }
.marine-compass { width:60px; display:flex; flex-direction:column; align-items:center; gap:2px; color:#d9edf0; pointer-events:none; filter:drop-shadow(0 4px 9px #001923aa); }
.compass-dial { position:relative; width:58px; height:58px; overflow:hidden; border:4px solid #bea96f; border-radius:50%; background:radial-gradient(circle at 35% 28%,#e8f7f544 0 7%,transparent 28%),#082d3c; box-shadow:inset 0 0 0 2px #273d43,inset 0 0 12px #001821; }
.compass-dial::after { content:""; position:absolute; z-index:5; inset:3px; border-radius:50%; background:linear-gradient(135deg,#e9ffff2b 0 26%,transparent 28% 72%,#00182444); }
.compass-card { position:absolute; z-index:2; inset:5px; border:1px solid #87aeb5; border-radius:50%; background:repeating-conic-gradient(from -1deg,#d8e8dcaa 0 1deg,transparent 1deg 15deg),#0a3a4a; transform-origin:50% 50%; }
.compass-card::before { content:""; position:absolute; z-index:1; inset:7px; border:1px solid #5d8790; border-radius:50%; background:#0a3a4a; }
.compass-card::after { content:""; position:absolute; z-index:4; left:50%; top:50%; width:4px; height:4px; transform:translate(-50%,-50%); border-radius:50%; background:#e7d38d; }
.compass-card span { position:absolute; z-index:3; color:#dbe9e5; font:700 7px ui-monospace,monospace; line-height:1; }.compass-card .north{left:50%;top:2px;transform:translateX(-50%);color:#e86b4d}.compass-card .east{right:3px;top:50%;transform:translateY(-50%)}.compass-card .south{left:50%;bottom:2px;transform:translateX(-50%)}.compass-card .west{left:3px;top:50%;transform:translateY(-50%)}
.compass-lubber { position:absolute; z-index:6; left:50%; top:1px; width:0; height:0; transform:translateX(-50%); border-left:4px solid transparent; border-right:4px solid transparent; border-top:9px solid #f06d4e; }
.throttle-meter { display:flex; flex-direction:column; align-items:center; gap:5px; color:#b8dbe1; font-size:8px; letter-spacing:.12em; pointer-events:auto; }
.throttle-slot { position:relative; width:76px; height:150px; border:3px solid #a9d8df88; border-radius:18px; background:linear-gradient(to bottom,#8a4d3455 0 64%,#eaf3e888 65% 75%,#277c6955 76%); overflow:hidden; touch-action:none; box-shadow:inset 0 0 16px #001d29aa,0 5px 15px #00182088; }
.throttle-slot::after { content:"N"; position:absolute; z-index:1; left:0; right:0; top:70%; height:2px; transform:translateY(-50%); background:#eaf3e8aa; color:#dcebe8; font:700 8px ui-monospace,monospace; text-align:right; padding-right:5px; }
.throttle-slot i { position:absolute; z-index:1; left:12px; bottom:30%; width:46px; height:0%; border-radius:8px; background:linear-gradient(#ffb953,#d95f38); pointer-events:none; }
.throttle-slot b { position:absolute; z-index:3; left:6px; top:calc(70% - 9px); width:58px; height:18px; border-radius:7px; background:#ead8a8; border:2px solid #5e4a30; box-shadow:0 3px 8px #001; pointer-events:none; }
.throttle-slot em { position:absolute; z-index:2; left:7px; font:700 8px ui-monospace,monospace; color:#cce4e7; font-style:normal; pointer-events:none; }.throttle-slot em:first-child{top:7px}.throttle-slot em:nth-of-type(2){bottom:20px}
.throttle-slot output { position:absolute; z-index:2; left:0; right:0; bottom:5px; text-align:center; font:700 8px ui-monospace,monospace; color:#fff0bd; pointer-events:none; }
dialog { width: min(520px, calc(100% - 34px)); max-height:calc(100dvh - 24px); overflow-y:auto; border: 1px solid #9adce855; border-radius: 18px; background: #082f40f2; color: #eaf7f8; padding: 26px; box-shadow: 0 20px 80px #00161dcc; }
dialog::backdrop { background: #00151dbb; backdrop-filter: blur(4px); }
dialog h1 { max-width: 390px; margin: 0 30px 12px 0; font: 700 28px/1.08 Georgia, serif; color: #fff1c5; }
dialog p { line-height: 1.5; color: #c6e0e5; }
dialog dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
dialog dl div { padding: 10px; background: #fff1; border-radius: 9px; }
dialog dt { font-size: 10px; color: #83bfcd; letter-spacing: .12em; }
dialog dd { margin: 3px 0 0; font-weight: 700; }
#close-help,#close-physics { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; font-size: 22px; }
.note { font-size: 11px; opacity: .7; }
.physics-grid { display:grid; gap:14px; }.physics-grid label{display:grid;grid-template-columns:1fr auto;gap:6px;color:#bcdce2;font-size:11px}.physics-grid output{color:#f1d67e;font:700 11px ui-monospace,monospace}.physics-grid input[type="range"]{grid-column:1 / -1;width:100%;accent-color:#dfb953}.physics-grid label>small{grid-column:1 / -1;color:#92bdc7}.physics-grid .rider-picker select,.physics-grid .physics-select select{grid-column:1 / -1;width:100%;max-width:none;height:32px;padding:0 7px;border:1px solid #b7eaf244;border-radius:7px;background:#092e3d;color:#f3ebd0;font:700 10px ui-sans-serif,system-ui}.physics-grid .physics-toggle{display:flex;align-items:center;gap:8px;padding:10px;border-radius:8px;background:#ffffff0b}.physics-grid .physics-toggle input{accent-color:#dfb953}
@media (hover: hover) and (pointer: fine) { .controls { opacity: .38; } .controls:hover { opacity: 1; } }
@media (min-width: 701px) {
  #app.view-driver .speedometer { left:calc(50% - 318px); top:95px; bottom:auto; }
  #app.view-driver .marine-compass { position:fixed; z-index:4; left:calc(50% + 270px); top:101px; }
}
@media (min-width: 901px) {
  #physics-panel[open] { position:fixed; z-index:10; inset:12px 12px 12px auto; margin:0; width:380px; height:calc(100dvh - 24px); max-height:none; }
  #physics-panel::backdrop { background:transparent; backdrop-filter:none; }
  #app.physics-open #lake { width:calc(100% - 404px); }
  #app.physics-open .hud { right:404px; }
  #app.physics-open .instruments { right:424px; }
  #app.physics-open .speedometer { left:calc((100% - 404px)/2); }
  #app.physics-open.view-driver .speedometer { left:calc((100% - 404px)/2 - 318px); }
  #app.physics-open.view-driver .marine-compass { left:calc((100% - 404px)/2 + 270px); }
}
@media (min-width: 701px) and (max-width: 900px) {
  #app.view-driver .speedometer { left:calc(50% - 300px); transform:translateX(-50%) scale(.82); transform-origin:center; }
  #app.view-driver .marine-compass { left:calc(50% + 260px); transform:scale(.82); transform-origin:left center; }
}
@media (max-width: 700px) {
  .hud { grid-template-columns:1fr auto; padding:max(8px,env(safe-area-inset-top)) 10px 6px; }
  .readouts { grid-row:2; grid-column:1 / -1; width:100%; justify-content:center; gap:4px; margin-top:30px; padding-top:4px; border-top:1px solid #b7eaf222; }
  .readouts div { flex:1 1 0; min-width:0; }
  .readouts span { font-size:8px; letter-spacing:.08em; white-space:nowrap; }
  .readouts strong { font-size:21px; }
  .readouts small { font-size:7px; letter-spacing:.04em; }
  .metric-bar,.g-readout i { width:48px; margin-top:2px; }
  .wake-key { display:none; }
  .actions { grid-column:2; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:148px; }
  .actions button { height:30px; padding-inline:9px; }
  #reset { position:fixed; z-index:5; left:50%; bottom:max(30px,env(safe-area-inset-bottom)); transform:translateX(-50%); }
  .views { display:none; }
  .instruments { position:fixed; right:14px; bottom:max(28px,env(safe-area-inset-bottom)); transform:none; }
  .speedometer { display:block; z-index:4; top:max(6px,env(safe-area-inset-top)); bottom:auto; transform:translateX(-50%) scale(.72); transform-origin:top center; }
  .wheel-wrap { position:fixed; z-index:5; left:18px; right:auto; bottom:max(28px,env(safe-area-inset-bottom)); width:126px; transform:none; }
  .marine-compass { position:fixed; z-index:4; left:18px; top:max(8px,env(safe-area-inset-top)); }
  .throttle-slot { width:82px; height:170px; }
}
.hide-digital-gauges .readouts { display:none; }
@media (max-width: 390px) {
  .wheel-wrap { left:10px; }
  .instruments { right:8px; }
  .views button { padding-inline:6px; }
  .readouts strong { font-size:19px; }
  .speedometer { transform:translateX(-50%) scale(.65); }
  .marine-compass { left:12px; }
}