/* Dune Runner — HUD & UI
   ------------------------------------------------------------------ */
:root{
  --ink:#e9f0f6;
  --ink-dim:#9db0c2;
  --glass:rgba(10,17,24,.55);
  --glass-2:rgba(10,17,24,.35);
  --edge:rgba(255,255,255,.14);
  --accent:#ff8a29;
  --accent-2:#39d4ff;
  --ok:#5ce6a5;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0;overflow:hidden;background:#05080b;}
body{
  font-family:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  overscroll-behavior:none;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;}

/* ─────────────── BOOT ─────────────── */
#boot{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 90% at 50% 8%, #1c2c3a 0%, #0a1219 55%, #05080b 100%);
  transition:opacity .7s ease, visibility .7s;
}
#boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-inner{width:min(560px,88vw);text-align:center;padding:18px}
.boot-logo{margin-bottom:26px}
.boot-logo-main{
  display:block;font-size:clamp(30px,7vw,54px);font-weight:800;letter-spacing:.16em;
  background:linear-gradient(180deg,#fff 10%,#8fb6d6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 60px rgba(90,160,220,.25);
}
.boot-logo-sub{
  display:block;margin-top:10px;font-size:clamp(9px,2.1vw,12px);letter-spacing:.42em;
  color:var(--accent);font-weight:600;
}
.boot-bar{
  height:4px;width:100%;border-radius:99px;overflow:hidden;
  background:rgba(255,255,255,.09);
}
.boot-bar i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#ffd08a);
  box-shadow:0 0 18px rgba(255,138,41,.6);transition:width .25s ease}
.boot-msg{margin-top:14px;font-size:12.5px;color:var(--ink-dim);letter-spacing:.06em;min-height:18px}
.boot-tips{margin-top:30px;display:grid;gap:7px;font-size:12px;color:#7f95a8;line-height:1.5}
.boot-tips b{color:#dbe7f1;font-weight:600}
.start-btn{
  margin-top:22px;padding:15px 42px;border:0;border-radius:99px;cursor:pointer;
  font:700 14px/1 inherit;letter-spacing:.22em;color:#20140a;
  background:linear-gradient(180deg,#ffc069,var(--accent));
  box-shadow:0 10px 34px rgba(255,138,41,.38);
  transition:transform .15s ease, box-shadow .15s ease;
}
.start-btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(255,138,41,.5)}
.start-btn:active{transform:translateY(0)}

/* ─────────────── HUD ─────────────── */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;
  animation:fadein .8s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

.hud-top-left{
  position:absolute;top:calc(14px + var(--safe-t));left:calc(16px + var(--safe-l));
}
.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px 8px 12px;border-radius:99px;
  background:var(--glass);border:1px solid var(--edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px var(--accent)}
.sub{margin-top:7px;margin-left:4px;font-size:11px;color:#c3d3e0;letter-spacing:.1em;
  text-shadow:0 1px 4px rgba(0,0,0,.65)}

.hud-top-right{
  position:absolute;top:calc(14px + var(--safe-t));right:calc(16px + var(--safe-r));
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end;
}
.chip{
  padding:7px 12px;border-radius:9px;font-size:11px;font-weight:600;letter-spacing:.09em;
  background:rgba(8,14,20,.62);border:1px solid var(--edge);color:#d3e0ec;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.chip.mode{color:#0d1319;background:linear-gradient(180deg,#ffc069,var(--accent));border-color:transparent}
.chip.mode.fly{background:linear-gradient(180deg,#8ee7ff,var(--accent-2))}

/* icon buttons */
.chip.icon{
  pointer-events:auto;cursor:pointer;padding:6px;width:32px;height:30px;
  display:grid;place-items:center;
}
.chip.icon svg{width:17px;height:17px;fill:currentColor}
.chip.icon .ico-off{display:none}
.chip.icon.muted{color:#ff8f8f}
.chip.icon.muted .ico-on{display:none}
.chip.icon.muted .ico-off{display:block}
.chip.icon.active{color:#0d1319;background:linear-gradient(180deg,#ffc069,var(--accent));border-color:transparent}

/* settings panel */
.panel{
  position:absolute;top:calc(54px + var(--safe-t));right:calc(16px + var(--safe-r));
  z-index:4;width:262px;padding:14px;border-radius:14px;pointer-events:auto;
  background:rgba(8,14,20,.88);border:1px solid var(--edge);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}
.panel[hidden]{display:none}
.panel-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.panel-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.seg{display:flex;gap:3px;background:rgba(255,255,255,.07);padding:3px;border-radius:9px}
.seg button{
  border:0;background:transparent;color:#c6d5e2;cursor:pointer;
  font:600 10.5px/1 inherit;letter-spacing:.06em;padding:6px 8px;border-radius:7px;
}
.seg button.on{background:var(--accent);color:#20140a}
#gfxSeg{flex-wrap:wrap;justify-content:flex-end;max-width:170px}
#volRange{width:150px;accent-color:var(--accent);height:16px}
.panel-note{font-size:10px;color:#7f95a8;line-height:1.5;margin-top:2px}

/* gauge */
.hud-gauge{
  position:absolute;bottom:calc(18px + var(--safe-b));left:50%;transform:translateX(-50%);
  width:212px;text-align:center;
}
.gauge-svg{width:212px;height:161px;display:block;overflow:visible}
.g-track{fill:none;stroke:rgba(255,255,255,.11);stroke-width:7;stroke-linecap:round}
.g-fill{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:0 400;filter:drop-shadow(0 0 8px rgba(255,138,41,.55));
  transition:stroke .3s ease}
.hud-gauge.fly .g-fill{stroke:var(--accent-2);filter:drop-shadow(0 0 8px rgba(57,212,255,.55))}
.gauge-read{position:absolute;left:0;right:0;top:62px;pointer-events:none}
.gauge-val{font-size:42px;font-weight:800;line-height:1;letter-spacing:-.02em;
  text-shadow:0 3px 22px rgba(0,0,0,.65)}
.gauge-unit{font-size:10px;letter-spacing:.3em;color:#cfdde9;margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.gauge-alt{margin-top:-16px;font-size:10.5px;letter-spacing:.18em;color:#cfdde9;
  text-shadow:0 1px 4px rgba(0,0,0,.7)}
.boost-wrap{margin:9px auto 0;width:132px;height:3px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.boost-wrap i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#ffd08a,var(--accent));transition:width .12s linear}

/* minimap */
.hud-map{
  position:absolute;bottom:calc(20px + var(--safe-b));left:calc(18px + var(--safe-l));
  width:176px;height:176px;border-radius:50%;overflow:hidden;
  border:1px solid var(--edge);background:var(--glass);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.hud-map canvas{width:100%;height:100%;display:block;opacity:.94}
.map-ring{position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 30px rgba(0,0,0,.55);pointer-events:none}
.map-n{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:9px;letter-spacing:.2em;color:var(--ink-dim)}

.hud-hint{
  position:absolute;bottom:calc(20px + var(--safe-b));right:calc(20px + var(--safe-r));
  font-size:11px;color:var(--ink-dim);letter-spacing:.07em;
  background:var(--glass-2);border:1px solid var(--edge);padding:8px 13px;border-radius:9px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity .5s ease;
}
.hud-hint b{color:#e6eef6}
.hud-hint.hide{opacity:0}

/* ─────────────── TOUCH ─────────────── */
#touch{position:fixed;inset:0;z-index:30;pointer-events:none}
#touch button{pointer-events:auto;-webkit-touch-callout:none}

/* ---- D-pad: a single cross-shaped control, not four loose arrows ---- */
.dpad{
  --pad: 62px;
  position:absolute;left:calc(18px + var(--safe-l));bottom:calc(20px + var(--safe-b));
  display:grid;
  grid-template-columns:var(--pad) var(--pad) var(--pad);
  grid-template-rows:var(--pad) var(--pad) var(--pad);
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.5));
}
.dz, .dz-hub{
  background:rgba(13,21,29,.66);
  border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#e2ecf5;display:grid;place-items:center;padding:0;margin:0;
  transition:background .07s ease, color .07s ease;
}
.dz svg{width:27px;height:27px;fill:currentColor;opacity:.92}
.dz.on{background:linear-gradient(180deg,#ffc069,var(--accent));color:#1a1006}
/* only the outer corners are rounded, so the four cells read as one pad */
.dz-up   {grid-area:1/2/2/3;border-radius:22px 22px 0 0;border-bottom:0}
.dz-left {grid-area:2/1/3/2;border-radius:22px 0 0 22px;border-right:0}
.dz-right{grid-area:2/3/3/4;border-radius:0 22px 22px 0;border-left:0}
.dz-down {grid-area:3/2/4/3;border-radius:0 0 22px 22px;border-top:0}
.dz-hub{
  grid-area:2/2/3/3;border-left:0;border-right:0;
  font:700 9px/1 inherit;letter-spacing:.14em;color:rgba(226,236,245,.42);
}
.dz-hub span{transform:translateY(1px)}

/* ---- action cluster ---- */
.act{
  position:absolute;right:calc(18px + var(--safe-r));bottom:calc(20px + var(--safe-b));
  width:196px;height:186px;
}
.ab{
  position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.17);
  background:rgba(13,21,29,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#e2ecf5;display:grid;place-items:center;padding:0;line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:background .07s ease, transform .07s ease, color .07s ease;
}
.ab .ab-ico{font-size:22px;font-weight:700}
.ab small{font-size:8px;letter-spacing:.16em;opacity:.7;font-weight:700;margin-top:3px}
.ab.on{transform:scale(.93);color:#12100a;border-color:transparent}

.ab-turbo{right:104px;bottom:2px;width:82px;height:82px}
.ab-turbo .ab-ico{font-size:25px}
.ab-turbo.on{background:linear-gradient(180deg,#ffd08a,#ff8a29)}
.ab-fly{right:6px;bottom:2px;width:82px;height:82px}
.ab-fly.on{background:linear-gradient(180deg,#8ee7ff,#39d4ff)}
.ab-climb{right:52px;bottom:90px;width:76px;height:76px}
.ab-climb.on{background:linear-gradient(180deg,#a9ffd4,#5ce6a5)}

.act-mini{position:absolute;right:2px;top:-6px;display:flex;gap:5px}
.mb{
  pointer-events:auto;border:1px solid rgba(255,255,255,.16);border-radius:9px;
  background:rgba(13,21,29,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:#c6d5e2;font:700 8.5px/1 inherit;letter-spacing:.12em;padding:8px 10px;
}
.mb.on{background:linear-gradient(180deg,#ffc069,var(--accent));color:#1a1006}

/* ─────────────── TOUCH LAYOUT ───────────────
   When the on-screen controls are active the HUD is re-arranged so that
   nothing sits underneath a thumb: gauge to the top centre, minimap on
   the bottom edge between the D-pad and the action cluster. */
body.touch .hud-hint{display:none}
body.touch .hud-gauge{
  top:calc(6px + var(--safe-t));bottom:auto;left:50%;transform:translateX(-50%);width:152px;
}
body.touch .gauge-svg{width:152px;height:116px}
body.touch .gauge-read{top:42px}
body.touch .gauge-val{font-size:29px}
body.touch .gauge-alt{margin-top:-10px;font-size:9.5px}
body.touch .boost-wrap{width:104px;margin-top:6px}
body.touch .hud-map{
  width:104px;height:104px;
  left:50%;right:auto;transform:translateX(-50%);
  bottom:calc(12px + var(--safe-b));
}
body.touch .hud-top-left{max-width:34vw}
body.touch .badge{font-size:11px;padding:6px 12px 6px 10px}
body.touch .sub{font-size:10px}

/* portrait nudge */
#rotate{
  position:fixed;inset:0;z-index:70;display:none;place-items:center;text-align:center;
  background:rgba(5,8,11,.94);color:var(--ink);padding:30px;
}
#rotate .r-in{max-width:300px;font-size:14px;line-height:1.6}
#rotate .r-ico{font-size:44px;margin-bottom:14px;display:block;animation:rot 2.4s ease-in-out infinite}
@keyframes rot{0%,40%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait){
  body.touch #rotate{display:grid}
}

/* fatal */
#fatal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#05080b}
#fatal[hidden],#hud[hidden],#touch[hidden]{display:none!important}
.fatal-box{max-width:440px;padding:34px;text-align:center}
.fatal-box h2{margin:0 0 12px;font-size:20px;letter-spacing:.04em}
.fatal-box p{margin:0 0 10px;color:var(--ink-dim);font-size:13.5px;line-height:1.6}
.fatal-box .small{font-size:12px;opacity:.7}

/* small screens */
@media (max-width:820px){
  .hud-map{width:118px;height:118px;bottom:calc(210px + var(--safe-b));left:auto;
    right:calc(18px + var(--safe-r))}
  .hud-map canvas{width:100%;height:100%}
  .hud-gauge{width:168px;bottom:auto;top:calc(56px + var(--safe-t));left:50%}
  .gauge-svg{width:168px;height:128px}
  .gauge-read{top:48px}
  .gauge-val{font-size:32px}
  .gauge-alt{margin-top:-12px}
  .hud-hint{display:none}
}
@media (max-height:430px){
  .dpad{--pad:54px}
  .act{width:172px;height:164px}
  .ab-turbo,.ab-fly{width:72px;height:72px}
  .ab-turbo{right:92px}
  .ab-climb{width:66px;height:66px;right:46px;bottom:78px}
}
@media (max-height:360px){
  .dpad{--pad:47px}
  .act{width:150px;height:142px}
  .ab-turbo,.ab-fly{width:62px;height:62px}
  .ab-turbo{right:80px}
  .ab-climb{width:58px;height:58px;right:40px;bottom:68px}
  .ab .ab-ico{font-size:18px}
}