*{box-sizing:border-box;user-select:none;user-drag:none}
:root{
  --fg:#fff; --muted:#cfcfd6;
  --gold1:#f6d26a; --gold2:#b88746; --gold3:#fff1a6;
  --royalGlow: 0 0 16px rgba(246,210,106,.45);

  --icon-gear:   url("icons/gear-shifter.svg");
  --icon-engine: url("icons/engine.svg");
  --icon-head:   url("icons/headlights.svg");
  --icon-left:   url("icons/turn-left.svg");
  --icon-right:  url("icons/turn-right.svg");
  --icon-belt:   url("icons/seatbelt.svg");
  --icon-crest:  url("icons/crest.svg");
  --icon-btc:    url("icons/btc.svg");

  /* Optional: background zoom knob */
  --bg-fill: 105%;
}

html,body{height:100%;margin:0;background:transparent;color:var(--fg);font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}
.hud{position:fixed; right:24px; bottom:24px; width:480px; height:220px; border-radius:18px; overflow:hidden; filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)); transition:filter .35s ease, transform .35s ease}

/* Royal perimeter frame */
.hud::before{content:""; position:absolute; inset:0; border-radius:18px; padding:1.5px; background:linear-gradient(130deg, rgba(246,210,106,.95), rgba(255,255,255,.8), rgba(184,135,70,.95)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:frameShift 6s linear infinite; pointer-events:none; z-index:6}
@keyframes frameShift{0%{filter:hue-rotate(0) brightness(1)}50%{filter:hue-rotate(15deg) brightness(1.08)}100%{filter:hue-rotate(0) brightness(1)}}

/* Background (static) */
.bg{position:absolute;inset:0;overflow:hidden;z-index:-3}
.bgimg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:var(--bg-fill);min-height:var(--bg-fill);object-fit:cover;opacity:.9}

/* Foreground effects */
.streaks{position:absolute;inset:0;z-index:-2;pointer-events:none;background:repeating-linear-gradient(110deg,rgba(255,255,255,.06)0 6px,rgba(255,255,255,0) 6px 46px);mix-blend-mode:screen;animation:streak 12s linear infinite}
@keyframes streak{from{background-position:0 0}to{background-position:-600px 0}}
.glass{position:absolute;inset:0;background:linear-gradient(to bottom right, rgba(0,0,0,.52), rgba(0,0,0,.66));z-index:-1}
.ornaments{position:absolute; inset:10px; z-index:0; pointer-events:none}
.ornaments::before,.ornaments::after{content:""; position:absolute; width:72px; height:72px; opacity:.14; background:#fff; filter:drop-shadow(0 0 12px rgba(246,210,106,.35)); -webkit-mask-image:var(--icon-crest); mask-image:var(--icon-crest); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center}
.ornaments::before{ left:12px; top:10px; transform:rotate(-8deg) }
.ornaments::after { right:12px; bottom:10px; transform:rotate(8deg) }

/* Boot screen */
.hud.booting .content{ visibility:hidden }
.hud.booting .welcome{ opacity:1; pointer-events:none }
.welcome{ position:absolute; inset:0; display:grid; place-items:center; z-index:5; opacity:0; transition:opacity .35s ease }
.scanlines{position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,0) 2px 4px); mix-blend-mode:overlay; opacity:.25}
.noise{position:absolute; inset:-40px; background:radial-gradient(transparent 60%, rgba(0,0,0,.35)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.08'/></svg>"); opacity:.9; mix-blend-mode:soft-light; animation:drift 6s linear infinite}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,-20px,0)}}
.intro-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; transform:translateZ(0) }
.crest{ width:64px; height:64px; background:#fff; filter:drop-shadow(0 0 18px rgba(255,255,255,.2)); -webkit-mask-image:var(--icon-crest); mask-image:var(--icon-crest); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; animation:crestIn .6s ease-out both}
@keyframes crestIn{from{transform:scale(.6); opacity:0}to{transform:scale(1); opacity:1}}
.title{ font-family:"Cinzel", serif; font-weight:900; font-size:28px; letter-spacing:3px; text-align:center; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 16px rgba(255,255,255,.35); position:relative; padding:2px 12px }
.subtitle{ font-family:"Cinzel", serif; font-weight:700; font-size:15px; letter-spacing:2px; color:#f1e6c2; text-shadow:0 0 12px rgba(246,210,106,.35) }

/* Glitch keyframes (visual only) */
/* Glitch keyframes (visual only) */
.glitch{ position:relative } 
.glitch .text{ position:relative; display:inline-block }
.glitch .g1,.glitch .g2{
  position:absolute; inset:0; content:""; display:block;
  background:linear-gradient(180deg, var(--gold3), var(--gold1) 50%, var(--gold2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none; filter:contrast(1.1) saturate(1.1); mix-blend-mode:screen; opacity:.7;
}
.glitch .g1{ transform:translate3d(0,0,0); animation:gl1 .8s steps(12) both }
.glitch .g2{ transform:translate3d(0,0,0); animation:gl2 .8s steps(12) both }

@keyframes gl1{
  0%{ clip-path:inset(0 0 0 0); transform:translate(0,0) }
  20%{ clip-path:inset(0 0 65% 0); transform:translate(-2px,-1px) }
  40%{ clip-path:inset(30% 0 35% 0); transform:translate(2px,1px) }
  60%{ clip-path:inset(80% 0 0 0); transform:translate(-1px,1px) }
  100%{ clip-path:inset(0 0 0 0); transform:translate(0,0) }
}
@keyframes gl2{
  0%{ clip-path:inset(0 0 0 0); transform:translate(0,0) }
  25%{ clip-path:inset(75% 0 0 0); transform:translate(2px,-1px) }
  50%{ clip-path:inset(10% 0 60% 0); transform:translate(-2px,1px) }
  75%{ clip-path:inset(0 0 85% 0); transform:translate(1px,0) }
  100%{ clip-path:inset(0 0 0 0); transform:translate(0,0) }
}  /* <-- this closing brace was missing */

/* Layout + meters */
.content{position:relative;z-index:1;padding:12px 16px;height:100%;display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.row.top{flex:1}
.dial{width:160px;height:160px}
.arc-bg{fill:none;stroke:rgba(255,255,255,.18);stroke-linecap:round;stroke-width:10}
.arc-val{fill:none;stroke:#b8f7ff;stroke-linecap:round;stroke-width:10;filter:drop-shadow(0 0 10px rgba(184,247,255,.6))}
.speed-big{font-size:48px;font-weight:800;letter-spacing:.5px;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:3}
.unit-big{font-size:13px;fill:#e9e9ef}
.stack{display:flex;flex-direction:column;gap:10px;flex:1}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.38);padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.chip.gear{align-self:flex-start;font-size:18px;font-weight:800}
.chip.gear .icon{width:20px;height:20px;background:#fff;-webkit-mask-image:var(--icon-gear);mask-image:var(--icon-gear);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.bars{display:flex;gap:10px}
.bar{position:relative;width:100%;height:16px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.bar label{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted)}
.bar .fill{position:absolute;left:0;top:0;height:100%;width:0}
.bar.rpm .fill{background:linear-gradient(90deg,#9cf7ff,#fff,#ff789e)}
.bar.fuel .fill{background:linear-gradient(90deg,#00ffa6,#b8f7ff)}
.bar.hp   .fill{background:linear-gradient(90deg,#ffd36b,#ff7a5a)}

/* Icon row */
.icons{display:flex;gap:8px}
.ico{width:36px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:all .2s ease;position:relative;overflow:hidden;color:#ddd;font-size:0}
.ico::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
#leftInd::before { -webkit-mask-image:var(--icon-left);  mask-image:var(--icon-left) }
#rightInd::before{ -webkit-mask-image:var(--icon-right); mask-image:var(--icon-right)}
#headHi::before  { -webkit-mask-image:var(--icon-head);  mask-image:var(--icon-head) }
#seatbelt::before{ -webkit-mask-image:var(--icon-belt);  mask-image:var(--icon-belt)}
.ico.on{ background:rgba(255,255,255,.18); color:#fff; box-shadow:0 0 14px rgba(184,247,255,.35) inset }
@keyframes blink{0%,49%{opacity:.25}50%,100%{opacity:1}}
#leftInd.on::before, #rightInd.on::before{ animation:blink .65s steps(1) infinite }
#headHi.on{ color:#ffec8c; box-shadow:0 0 16px rgba(255,240,150,.45) inset, 0 0 10px rgba(255,240,150,.35) }
#headHi.on::after{ content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%); width:60px; height:14px; pointer-events:none; background:linear-gradient(90deg, rgba(255,255,200,.38), rgba(255,255,200,0)); filter:blur(.5px)}
#headHi.hi{ color:#fff; box-shadow:0 0 18px rgba(255,255,220,.6) inset, 0 0 14px rgba(255,255,220,.55) }
#headHi.hi::after{ height:18px; width:86px; background:linear-gradient(90deg, rgba(255,255,240,.85), rgba(255,255,240,0)) }

/* Engine icon-only */
.row.bottom{gap:10px}
.chip.small{padding:0;border:0;background:transparent}
.chip.small b,.chip.small span{display:none}
.engine-chip{width:36px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:all .2s ease;position:relative;overflow:hidden}
.engine-chip .pic{width:18px;height:18px;background:#ddd;display:block;-webkit-mask-image:var(--icon-engine);mask-image:var(--icon-engine);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.engine-chip.active{ background:rgba(255,255,255,.18) }
.engine-chip.active .pic{ background:#fff }
.hud.engine-on{ filter:drop-shadow(0 26px 46px rgba(0,255,180,.25)) }
.hud.engine-on::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 50% 100%, rgba(0,255,210,.08), transparent 60%) }

/* NEW: BTC chip */
.btc-chip{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:12px;
  background:rgba(0,0,0,.38); border:1px solid rgba(255,255,255,.12);
  min-width: 172px;
}
.btc-pic{
  width:18px; height:18px; background:#ffba00; display:block;
  -webkit-mask-image:var(--icon-btc); mask-image:var(--icon-btc);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  filter:drop-shadow(0 0 6px rgba(255,186,0,.45));
}
.btc-col{display:flex; flex-direction:column; line-height:1.05}
.btc-line{font-size:13px}
.btc-idr{font-size:11px; color:var(--muted)}
.btc-delta{
  margin-left:auto; font-size:12px; font-weight:700;
  padding:2px 6px; border-radius:8px; background:rgba(0,0,0,.3);
}
.btc-delta.up{ color:#00ffb0 }
.btc-delta.down{ color:#ff7a7a }

/* No duplicates + hide KMH pill */
.head-chip,.ind-chip{display:none}
.mode{display:none}