*,*::before,*::after{box-sizing:border-box;}
  html{color-scheme:dark;}
  body{margin:0;}
  img{max-width:100%;}
  [hidden]{display:none !important;}
:root{
    --night:#141B24;
    --ink:#0A0E14;
    --plate:#1A222C;
    --plate-edge:#2E3A46;
    --bronze:#8C4A2F;
    --gold:#D9A441;
    --gold-dim:#8A6B2C;
    --cream:#F2E6D0;
    --muted:#8A94A0;
    --signal:#E2573B;
    --moss:#6FA88A;
    --jp:"Zen Kaku Gothic New","Yu Gothic UI","Meiryo",sans-serif;
    --num:"Oswald","Yu Gothic UI",sans-serif;
  }

  html,body{height:100%;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--cream);
    font-family:var(--jp);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
  }
  button{font-family:inherit;color:inherit;}

  #app{
    height:100dvh;
    display:flex;
    flex-direction:column;
    background:var(--ink);
  }

  /* ---------- stage ---------- */
  #stage{
    position:relative;
    flex:1;
    min-height:0;
    overflow:hidden;
  }
  #cv{display:block;width:100%;height:100%;}

  /* ---------- instrument plates ---------- */
  .plate{
    position:absolute;
    background:linear-gradient(180deg,rgba(26,34,44,.93),rgba(10,14,20,.93));
    border:1px solid var(--plate-edge);
    border-radius:3px;
    box-shadow:0 6px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter:blur(2px);
  }
  .plate-label{
    font-size:10px;
    letter-spacing:.22em;
    color:var(--muted);
    font-weight:700;
  }

  /* distance — top right, the headline instrument */
  #odo{
    top:14px; right:14px;
    padding:10px 16px 12px;
    min-width:196px;
    border-top:2px solid var(--gold);
  }
  #odo .plate-label{display:block;margin-bottom:2px;}
  #odoRow{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;}
  #odoVal{
    font-family:var(--num);
    font-weight:500;
    font-size:clamp(40px,7.2vw,62px);
    line-height:.92;
    color:var(--gold);
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 18px rgba(217,164,65,.38);
  }
  #odoUnit{font-family:var(--num);font-size:18px;color:var(--gold-dim);}
  #hiRow{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    margin-top:8px;padding-top:7px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  #hiVal{
    font-family:var(--num);font-size:19px;color:var(--cream);
    font-variant-numeric:tabular-nums;
  }
  #odo.best{border-top-color:var(--moss);}
  #odo.best #hiVal{color:var(--moss);}

  /* speed + lives — top left */
  #gauge{
    top:14px; left:14px;
    padding:10px 14px 11px;
    min-width:168px;
  }
  #notchRow{display:flex;align-items:center;gap:10px;margin:6px 0 2px;}
  #notches{display:flex;gap:3px;}
  .notch{
    width:16px;height:22px;border-radius:2px;
    background:#222C37;border:1px solid #333F4B;
  }
  .notch.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(217,164,65,.5);}
  #kmh{font-family:var(--num);font-size:30px;line-height:1;font-variant-numeric:tabular-nums;}
  #kmhUnit{font-family:var(--num);font-size:12px;color:var(--muted);margin-left:2px;}
  #notchName{font-size:12px;color:var(--muted);font-weight:700;}
  #livesRow{
    display:flex;align-items:center;gap:8px;
    margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.1);
  }
  #lives{display:flex;gap:4px;}
  .life{width:7px;height:17px;border-radius:1px;background:var(--moss);}
  .life.off{background:#2A323B;}
  #lvRow{
    display:flex;align-items:center;gap:7px;
    margin-top:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.1);
  }
  #lvVal{
    font-family:var(--num);font-size:16px;line-height:1;color:var(--signal);
    font-variant-numeric:tabular-nums;
  }
  #lvBar{flex:1;height:4px;min-width:34px;background:#222C37;border-radius:2px;overflow:hidden;}
  #lvBar i{
    display:block;height:100%;width:100%;
    background:linear-gradient(90deg,var(--moss),var(--gold),var(--signal));
    transform-origin:left;transform:scaleX(0);
  }

  /* ---------- control deck ---------- */
  #deck{
    flex:0 0 auto;
    display:flex;align-items:stretch;gap:8px;
    padding:9px 12px;
    background:linear-gradient(180deg,#161D26,#0C1119);
    border-top:1px solid #2A3540;
  }
  .grp{display:flex;gap:6px;align-items:stretch;}
  #grpMove{flex:1;}
  .btn{
    appearance:none;border:1px solid var(--plate-edge);
    background:linear-gradient(180deg,#232D38,#161E27);
    border-radius:4px;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:1px;padding:8px 10px;min-width:56px;
    transition:background .12s ease,border-color .12s ease,transform .06s ease;
    touch-action:manipulation;user-select:none;
  }
  .btn:hover{background:linear-gradient(180deg,#2C3845,#1C2530);border-color:#44525F;}
  .btn:active,.btn.hit{transform:translateY(1px);background:var(--bronze);border-color:var(--gold);}
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
  .btn .ico{font-size:17px;line-height:1;font-family:var(--num);font-weight:500;}
  .btn .cap{font-size:9.5px;letter-spacing:.08em;color:var(--muted);white-space:nowrap;}
  .btn.wide{flex:1;}
  #btnHorn{flex:0 0 auto;min-width:96px;border-color:var(--gold-dim);}
  #btnHorn .ico{color:var(--gold);}
  #btnHorn.cool{opacity:.42;cursor:default;}
  #hornBar{
    position:absolute;left:0;bottom:0;height:2px;background:var(--gold);
    width:100%;transform-origin:left;
  }
  #btnHorn{position:relative;overflow:hidden;}

  /* ---------- overlays ---------- */
  .ov{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;
    padding:24px 20px;
    background:radial-gradient(ellipse at 50% 45%,rgba(10,14,20,.82),rgba(10,14,20,.96));
    z-index:5;
  }
  .ov[hidden]{display:none !important;}
  .eyebrow{
    font-size:11px;letter-spacing:.42em;color:var(--gold);font-weight:700;
  }
  .ov h1{
    margin:0;font-size:clamp(28px,6.6vw,48px);font-weight:900;letter-spacing:.04em;
    text-wrap:balance;line-height:1.18;
  }
  .ov h1 .sub{display:block;font-size:.42em;letter-spacing:.3em;color:var(--muted);margin-top:10px;font-weight:700;}
  .lede{
    margin:0;max-width:34em;font-size:14px;line-height:1.85;color:#C3CBD4;text-wrap:balance;
  }
  .keys{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:6px 18px;max-width:560px;width:100%;
    font-size:12.5px;color:#AEB7C1;text-align:left;
  }
  .keys div{display:flex;justify-content:space-between;gap:10px;
    padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07);}
  .keys b{color:var(--cream);font-weight:700;}
  kbd{
    font-family:var(--num);font-size:11px;background:#222C37;border:1px solid #39454F;
    border-bottom-width:2px;border-radius:3px;padding:1px 6px;color:var(--cream);
  }
  .cta{
    margin-top:4px;padding:13px 34px;border-radius:4px;cursor:pointer;
    background:var(--bronze);border:1px solid var(--gold);
    font-size:15px;font-weight:900;letter-spacing:.14em;
    transition:background .14s ease;
  }
  .cta:hover{background:#A3573A;}
  .cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  #overStats{display:flex;gap:32px;justify-content:center;margin:2px 0 2px;}
  #overStats > div{display:flex;flex-direction:column;gap:3px;}
  #overStats .plate-label{text-align:center;}
  #overStats .v{
    font-family:var(--num);font-size:clamp(30px,6vw,44px);line-height:1;
    font-variant-numeric:tabular-nums;
  }
  #overDist .v{color:var(--gold);}
  #newBest{color:var(--moss);font-size:12px;font-weight:700;letter-spacing:.2em;}
  #newBest[hidden]{display:none;}

  .corner{
    position:absolute;bottom:10px;left:14px;
    font-size:10.5px;color:#5E6872;letter-spacing:.1em;
  }
  #mute{
    position:absolute;top:14px;left:50%;transform:translateX(-50%);
    padding:5px 10px;font-size:11px;border-radius:3px;cursor:pointer;
    background:rgba(26,34,44,.86);border:1px solid var(--plate-edge);color:var(--muted);
  }
  #mute:hover{color:var(--cream);}

  @media (max-width:560px){
    #odo{min-width:150px;padding:8px 12px 10px;}
    #gauge{min-width:132px;padding:8px 11px 9px;}
    #kmh{font-size:24px;}
    .btn{min-width:48px;padding:7px 6px;}
    #btnHorn{min-width:74px;}
    #deck{gap:6px;padding:8px;}
  }
  @media (prefers-reduced-motion:reduce){
    .btn{transition:none;}
  }