html,body{margin:0;height:100%;overflow:hidden;background:#05070a}
#scene{position:absolute;inset:0}
#hud{position:absolute;left:14px;bottom:14px;padding:10px 12px;border-radius:8px;
     background:rgba(6,10,16,.6);color:#e8eef5;font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
#hud b{font-weight:600;color:#7fd1ff}
#msg{position:absolute;inset:auto 0 50% 0;text-align:center;color:#e8eef5;font:14px/1.6 ui-monospace,monospace}

/* Google attribution must stay visible; hide the ion branding only */
.credits .cesium-credit-logoContainer{display:none}
.credits{color:#8a97a6;font:11px/1.4 ui-monospace,monospace}
.credits a{color:#8a97a6}

/* wallet: top right, big enough to read at a glance while driving */
#wallet{position:absolute;right:20px;top:16px;text-align:right;pointer-events:none;
        font:600 34px/1.05 ui-monospace,SFMono-Regular,Menlo,monospace;
        color:#e8eef5;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#wallet.low{color:#ff5f56}
#delta{display:block;margin-top:4px;font-size:19px;color:#ff5f56;opacity:0}
#delta.on{animation:charge 1.5s ease-out}
#delta.up{color:#8bc34a}
@keyframes charge{
  0%{opacity:0;transform:translateY(-10px)}
  15%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(22px)}
}

/* one-off messages: fades in over the scene, never takes clicks */
#toast{position:absolute;left:50%;top:16%;transform:translateX(-50%);max-width:70%;
       padding:12px 18px;border-radius:8px;background:rgba(6,10,16,.85);
       color:#e8eef5;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
       text-align:center;opacity:0;transition:opacity .35s;pointer-events:none}
#toast.on{opacity:1}
#toast b{color:#ff7043}

#rec{color:#ff5f56}

#hint{color:#7fd1ff}

/* controls live behind the gear so the HUD keeps only live telemetry while driving */
#gear{position:absolute;left:14px;bottom:14px;width:36px;height:36px;padding:0;
      display:grid;place-items:center;border:0;border-radius:8px;cursor:pointer;
      background:rgba(6,10,16,.6);color:#e8eef5}
#gear:hover{background:rgba(6,10,16,.85)}
#gear[aria-expanded="true"]{color:#7fd1ff}
#keys{position:absolute;left:14px;bottom:60px;max-width:min(520px,60vw);
      padding:10px 12px;border-radius:8px;background:rgba(6,10,16,.85);color:#e8eef5;
      font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}
#hud{left:60px}                     /* clear the gear button */

/* speedo + fuel, bottom right: the two things you watch while driving */
#gauge{position:absolute;right:20px;bottom:14px;padding:10px 14px;border-radius:8px;
       background:rgba(6,10,16,.6);color:#e8eef5;text-align:right;
       font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;pointer-events:none}
#speedo b{font-size:38px;font-weight:600;line-height:1}
#speedo span{margin-left:6px;color:#8a97a6}
#fuel{margin-top:8px;display:flex;align-items:center;gap:8px;justify-content:flex-end}
#fuelTrack{width:110px;height:6px;border-radius:3px;background:rgba(232,238,245,.18);overflow:hidden}
#fuelBar{height:100%;width:100%;background:#7fd1ff;transition:width .2s linear}
#gauge.low #fuelBar{background:#ff5f56}
#gauge.low #fuelL{color:#ff5f56}