/* ------------------------------------------------------------------
   No `backdrop-filter` anywhere in this file, deliberately.

   Every frosted panel here sits on top of a full-screen WebGL canvas.
   To blur its backdrop the compositor has to snapshot that canvas into a
   separate texture each frame. When the GPU is busy — which is exactly
   when the scene is heavy: Ultra settings, flying, full draw distance —
   that snapshot can be handed over before the WebGL surface has been
   written, and the blur samples an uninitialised texture. The panel then
   paints as a solid black rectangle for one compositor frame.

   That is the black square that flashes past. It is not in the 3D scene
   at all, which is why nothing in the renderer explained it: a pixel
   probe reading the WebGL canvas directly never sees it, because the
   artifact is introduced above the canvas, in the compositor.

   The panels use a higher background alpha instead. Cheaper too — each
   blurred element was costing a full-screen read-back per frame.
------------------------------------------------------------------ */
/* Dune Runner — HUD & UI
   ------------------------------------------------------------------ */
:root{
  --ink:#e9f0f6;
  --ink-dim:#9db0c2;
  --glass:rgba(10,17,24,.78);
  --glass-2:rgba(10,17,24,.62);
  --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{
  width:100%;
  height:100%;
  height:100dvh;                 /* follows the system bars as they animate */
  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%;
  width:100dvw;height:100dvh;
  display:block;touch-action:none;
}

/* ─────────────── BOOT ─────────────── */
#boot{
  position:fixed;inset:0;z-index:60;
  width:100%;height:100%;min-width:100vw;min-height:100vh;
  min-height:100dvh;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
          max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow:auto;
  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;max-height:100%}

/* Short landscape phones: keep the whole panel on screen without scrolling.
   The title is the main offender — it wraps onto two lines and pushes the
   start button off the bottom. */
@media (max-height:470px){
  .boot-inner{padding:10px}
  .boot-logo{margin-bottom:12px}
  .boot-logo-main{font-size:clamp(22px,4.4vw,38px);letter-spacing:.12em;white-space:nowrap}
  .boot-logo-sub{margin-top:6px;font-size:9px;letter-spacing:.3em}
  .boot-msg{margin-top:9px;font-size:11.5px;min-height:15px}
  .start-btn{margin-top:13px;padding:12px 34px;font-size:13px}
  .boot-tips{margin-top:13px;gap:3px;font-size:10.5px;line-height:1.35}
}
@media (max-height:380px){
  .boot-logo-main{font-size:clamp(19px,3.6vw,30px)}
  .boot-logo{margin-bottom:8px}
  .boot-tips{display:none}          /* the controls are on screen anyway */
  .start-btn{margin-top:11px;padding:11px 30px}
}
.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);
  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,.80);border:1px solid var(--edge);color:#d3e0ec;
  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))}
.chip.mode.turbo{background:linear-gradient(180deg,#fff0a8,#ff5f1f);color:#2a1200;
  box-shadow:0 0 16px rgba(255,110,30,.6);animation:turboPulse .5s ease-in-out infinite alternate}
@keyframes turboPulse{from{box-shadow:0 0 10px rgba(255,110,30,.45)}
                      to{box-shadow:0 0 22px rgba(255,150,40,.85)}}
.ab-turbo.armed{border-color:var(--accent);box-shadow:0 0 18px rgba(255,138,41,.5)}

/* 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);
  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);
  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;
  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}

/* ---- circular analogue thumbstick ----
   The live area is the whole lower-left of the screen; the stick jumps to
   wherever your thumb lands so you never have to look for it. */
.stick-zone{
  position:absolute;left:0;bottom:0;
  width:46%;height:78%;
  pointer-events:auto;touch-action:none;
}
.stick{
  --r: 82px;
  position:absolute;
  left:calc(20px + var(--safe-l) + var(--r));
  bottom:calc(24px + var(--safe-b) + var(--r));
  width:0;height:0;
  transition:opacity .18s ease;
  opacity:.62;
}
.stick.live{opacity:1;transition:none}
.stick-base{
  position:absolute;left:calc(var(--r) * -1);top:calc(var(--r) * -1);
  width:calc(var(--r) * 2);height:calc(var(--r) * 2);border-radius:50%;
  background:rgba(11,18,26,.62);
  box-shadow:0 10px 30px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.13);
}
.stick-dial{position:absolute;inset:0;width:100%;height:100%}
.sd-ring{fill:none;stroke:rgba(255,255,255,.15);stroke-width:2}
.sd-inner{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1.5;stroke-dasharray:5 8}
.sd-arrow{fill:rgba(226,236,245,.42)}
.stick.live .sd-ring{stroke:rgba(255,138,41,.42)}

.stick-knob{
  position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.30), rgba(255,255,255,.06) 60%),
             rgba(20,30,40,.86);
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.22);
  will-change:transform;
}
.stick-knob i{
  position:absolute;inset:22px;border-radius:50%;
  background:rgba(255,255,255,.14);display:block;
}
.stick.live .stick-knob{
  background:radial-gradient(circle at 38% 32%, #ffd9a8, #ff8a29 62%, #d96c14);
  box-shadow:0 6px 20px rgba(255,138,41,.45), inset 0 0 0 1px rgba(255,255,255,.35);
}
.stick.live .stick-knob i{background:rgba(90,45,10,.22)}

/* ---- 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,.82);  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,.82);  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 ───────────────
   The game plays in portrait too. The screen is tall and narrow, so the
   top bar sheds its least useful chips, the gauge and minimap move up out
   of the way, and both thumbs get their controls at the bottom. */
@media (orientation:portrait){
  #clock, #fps{display:none}                 /* no room, and least useful */
  .hud-top-left{max-width:42vw}
  .badge{font-size:10.5px;padding:6px 11px 6px 9px;letter-spacing:.08em}
  .sub{font-size:9.5px;margin-top:5px}

  /* second row, clear of the badge on the left and the chips on the right */
  body.touch .hud-gauge{
    top:calc(92px + var(--safe-t));width:132px;left:50%;bottom:auto;
  }
  body.touch .gauge-svg{width:132px;height:100px}
  body.touch .gauge-read{top:36px}
  body.touch .gauge-val{font-size:25px}
  body.touch .gauge-unit{font-size:8.5px;letter-spacing:.22em}
  body.touch .gauge-alt{margin-top:-9px;font-size:9px}
  body.touch .boost-wrap{width:92px;margin-top:5px}

  body.touch .hud-map{
    top:calc(54px + var(--safe-t));right:calc(12px + var(--safe-r));
    left:auto;bottom:auto;transform:none;width:88px;height:88px;
  }

  /* the live area for the stick is the lower half only, so the top of the
     screen stays free for swiping the camera around */
  .stick-zone{width:56%;height:46%}

  body.touch .stick{
    --r:66px;
    left:calc(14px + var(--safe-l) + var(--r));
    bottom:calc(26px + var(--safe-b) + var(--r));
  }
  body.touch .stick-knob{left:-27px;top:-27px;width:54px;height:54px}
  body.touch .stick-knob i{inset:17px}

  body.touch .act{
    width:148px;height:206px;
    right:calc(10px + var(--safe-r));bottom:calc(18px + var(--safe-b));
  }
  body.touch .ab-turbo{right:76px;bottom:0;width:68px;height:68px}
  body.touch .ab-fly{right:0;bottom:0;width:68px;height:68px}
  body.touch .ab-climb{right:38px;bottom:76px;width:64px;height:64px}
  body.touch .ab .ab-ico{font-size:20px}
  body.touch .ab small{font-size:7.5px;letter-spacing:.1em}
  body.touch .act-mini{top:0;right:0;flex-direction:column;align-items:flex-end;gap:5px}
  body.touch .mb{padding:7px 9px;font-size:8px}
}

/* fatal */
#fatal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#05080b;
  width:100%;height:100%;min-height:100dvh;padding:24px}
#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){
  .stick{--r:70px}
  .stick-knob{left:-29px;top:-29px;width:58px;height:58px}
  .stick-knob i{inset:18px}
  .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){
  .stick{--r:60px}
  .stick-knob{left:-25px;top:-25px;width:50px;height:50px}
  .stick-knob i{inset:15px}
  .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}
}
/* big screens: tablets and unfolded foldables get a roomier stick */
@media (min-height:620px) and (pointer:coarse){
  .stick{--r:96px}
  .stick-knob{left:-40px;top:-40px;width:80px;height:80px}
  .stick-knob i{inset:26px}
  .act{width:232px;height:222px}
  .ab-turbo,.ab-fly{width:96px;height:96px}
  .ab-turbo{right:124px}
  .ab-climb{width:88px;height:88px;right:62px;bottom:106px}
  .ab .ab-ico{font-size:29px}
  .mb{font-size:10px;padding:10px 13px}
}