/* The holo cockpit (js/cockpit.js). Game page only: the tablet keeps the
   classic HUD. Floating translucent teal panels in front of a dark hull.
   #cockpit[data-mode] is closed / half (minimal) / full (command: it leans in).
   The lean is parallax: every layer eases with the same timing, the hull the
   least, the panels and radar more, the cards the most, so it reads as the
   pilot leaning forward. */
.cockpit{--holo:#39f0c8;--holo-a:rgba(57,240,200,.85);--rd:min(78vh,40vw);--lean:.65s cubic-bezier(.45,0,.2,1);
  position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:2;pointer-events:none}
.cockpit.away{visibility:hidden}   /* on a planet's surface */
.ck-layer{position:absolute;inset:0;transform-origin:50% 100%;transition:transform var(--lean),opacity var(--lean)}
.cockpit[data-mode=closed] .ck-layer{transform:translateY(105%);opacity:0}
.cockpit[data-mode=full] .ck-hull{transform:scale(1.025)}
.cockpit[data-mode=full] .ck-panels{transform:translateY(-1.6vh)}   /* same spot across: only a small lift */

/* ---------- hull: a dark silhouette, tallest in the middle ---------- */
.ck-hull svg{position:absolute;left:0;bottom:0;width:100%;height:19vh}
.ck-seam{stroke:rgba(132,195,239,.14);stroke-width:1.5;vector-effect:non-scaling-stroke}
.ck-edge{stroke:rgba(57,240,200,.5);stroke-width:2;vector-effect:non-scaling-stroke}
.ck-light{position:absolute;bottom:var(--b,1.3vh);width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--c);
  box-shadow:0 0 6px var(--c);animation:ck-blink var(--t,2.6s) ease-in-out infinite alternate}
/* no lights between 30% and 70% across: the see-through radar sits there and a coloured dot reads as a contact */
@keyframes ck-blink{from{opacity:.3}to{opacity:1}}

/* ---------- holo panels: outer edges tilt down, facing the pilot ---------- */
.ck-panel{position:absolute;bottom:5.5vh;height:clamp(54px,8vh,74px);width:min(24vw,290px);box-sizing:border-box;padding:4px 12px;
  display:flex;align-items:center;gap:10px;border:2px solid var(--holo-a);border-radius:12px;
  background:linear-gradient(180deg,rgba(57,240,200,.17),rgba(57,240,200,.05));
  box-shadow:0 0 14px rgba(57,240,200,.35),inset 0 0 12px rgba(57,240,200,.16)}
.ck-left{right:calc(50% + var(--rd) / 2 + 1vw);transform-origin:100% 50%;transform:perspective(700px) rotateY(16deg) skewY(-7deg)}
.ck-right{left:calc(50% + var(--rd) / 2 + 1vw);transform-origin:0 50%;transform:perspective(700px) rotateY(-16deg) skewY(7deg);
  flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}

/* speed: a horizontal bar, reverse at the left, 0 and cruise marks, heat on the boost section */
.ck-chevrons{flex:none;width:26px;height:26px;fill:none;stroke:var(--holo);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.ck-speedbox{flex:1;display:flex;flex-direction:column;gap:3px}
.ck-speed{align-self:flex-end;color:#c8fff0;font:.7rem/1 "Kenney Future","Baloo 2",system-ui,sans-serif;white-space:nowrap;text-shadow:0 0 6px rgba(57,240,200,.5)}
.ck-speed b{font-size:.95rem;color:#9fdcff}
.ck-meter{position:relative;height:16px;border:2px solid var(--holo-a);border-radius:9px;background:rgba(6,20,30,.55)}
.ck-rev,.ck-fill,.ck-heat{position:absolute;top:0;bottom:0;left:0;width:0}
.ck-rev{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 4px,transparent 4px 8px);border-radius:7px 0 0 7px}
.ck-fill{background:var(--sky);border-radius:6px;box-shadow:0 0 8px rgba(88,180,255,.6);transition:background .2s}
.ck-fill[data-band=boost],.ck-fill[data-band=overheat]{background:var(--sun)}
.ck-fill[data-band=reverse]{background:var(--peach)}
.ck-fill[data-band=spin]{background:#5dff8f;box-shadow:0 0 10px #5dff8f;transition:none}
.ck-fill[data-band=jump]{background:#5dff8f;animation:drive-glow .5s ease-in-out infinite alternate}
.ck-heat{background:#ff3b3b;box-shadow:0 0 8px #ff3b3b}
.ck-heat.overheated{animation:ck-overheat .3s steps(2,jump-none) infinite}
@keyframes ck-overheat{from{background:#ff3b3b}to{background:#ffc9c9}}   /* never pure white */
.ck-mark{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--cream);opacity:.85}
.ck-mark.zero{width:4px;margin-left:-2px;background:#e9f7ff;opacity:1;box-shadow:0 0 0 1px var(--navy)}

/* hold: gem sockets (up to 10), or a striped bar and a count for a big hold */
.ck-hold{display:flex;align-items:center;gap:8px;width:100%;min-height:18px}
.ck-sockets{display:flex;gap:clamp(4px,.55vw,7px);padding-left:3px}
.ck-sockets i{width:clamp(10px,1.3vw,15px);aspect-ratio:1;box-sizing:border-box;transform:rotate(45deg);border:2px solid rgba(57,240,200,.55);border-radius:3px}
.ck-sockets i.on{border-color:rgba(255,255,255,.8);box-shadow:0 0 8px currentColor}
.ck-holdbar{display:none;flex:1;height:14px;box-sizing:border-box;border:2px solid var(--holo-a);border-radius:7px;overflow:hidden;background:rgba(6,20,30,.5)}
.ck-holdbar i{display:block;height:100%;flex:none}
.ck-holdcount{display:none;color:#c8fff0;font:.8rem "Kenney Future",system-ui,sans-serif}
.ck-hold.big .ck-holdbar{display:flex}
.ck-hold.big .ck-holdcount{display:inline}
.ck-hold.full .ck-sockets i,.ck-hold.full .ck-holdbar{animation:ck-full .5s steps(2,jump-none) infinite}
@keyframes ck-full{from{border-color:#ff5a5a}to{border-color:rgba(255,90,90,.3)}}
.ck-credits{display:flex;align-items:center;gap:7px;color:var(--sun);font:1.1rem/1 "Kenney Future","Baloo 2",system-ui,sans-serif;
  text-shadow:0 0 8px rgba(255,200,87,.45);transform-origin:left center}
.ck-credits.pop{animation:credit-pop .18s ease-out}
.ck-coin{width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid #9a6a08;
  background:radial-gradient(circle at 35% 35%,#fff1b0,var(--sun) 45%,#d19a1c);box-shadow:0 0 6px rgba(255,200,87,.55)}

/* passengers (one seat per ring, filled when taken) and Space Ranger faction points */
.ck-rangers{display:flex;align-items:center;gap:7px;color:#8fc2ff;font:1.1rem/1 "Kenney Future","Baloo 2",system-ui,sans-serif;
  text-shadow:0 0 8px rgba(61,139,255,.5);transform-origin:left center}
.ck-rangers.pop{animation:credit-pop .3s ease-out}
.ck-seats{display:flex;gap:4px;margin-right:4px}
.ck-seats i{width:12px;height:12px;border-radius:50%;box-sizing:border-box;border:2px solid rgba(143,194,255,.6)}
.ck-seats i.on{background:#58b4ff;border-color:#b8d8ff;box-shadow:0 0 6px #58b4ff}
.ck-rangers.full .ck-seats i{animation:ck-full .5s steps(2,jump-none) infinite}
.ck-star{width:20px;height:20px;flex:none}
.ck-star circle{fill:rgba(16,26,61,.85);stroke:#3d8bff;stroke-width:2.5}
.ck-star path{fill:#3d8bff;stroke:rgba(16,26,61,.9);stroke-width:1}

/* ---------- command cards: only in the command cockpit, nearest layer ---------- */
.ck-cards{opacity:0;transform:translateY(7vh) scale(.85)}
.cockpit[data-mode=full] .ck-cards{opacity:1;transform:translateY(-2vh) scale(1.12)}
.ck-card{position:absolute;bottom:15.5vh;width:clamp(76px,11vh,112px);aspect-ratio:1;box-sizing:border-box;border:2px solid var(--a);border-radius:16px;
  background:linear-gradient(180deg,rgba(57,240,200,.15),rgba(57,240,200,.04));box-shadow:0 0 12px var(--glow),inset 0 0 10px rgba(57,240,200,.14)}
.ck-card.beacon{--a:rgba(255,79,216,.85);--glow:rgba(255,79,216,.35);right:calc(50% + var(--rd) * .42);transform:perspective(700px) rotateY(10deg) skewY(-4deg)}
.ck-card.home{--a:rgba(109,255,158,.85);--glow:rgba(109,255,158,.3);left:calc(50% + var(--rd) * .42);transform:perspective(700px) rotateY(-10deg) skewY(4deg)}
.ck-icon{position:absolute;inset:10%;overflow:visible}
.ck-ring{fill:none;stroke-width:2;opacity:.45}
.beacon .ck-ring{stroke:#ff4fd8}
.beacon .ck-icon path{fill:rgba(255,79,216,.35);stroke:#ff4fd8;stroke-width:3;stroke-linejoin:round}
.beacon.on .ck-icon path{fill:#ff4fd8;stroke:#ffe3f7}
.home .ck-ring{stroke:#6dff9e}
.home .ck-icon path{fill:none;stroke:#6dff9e;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ck-card.on{background:linear-gradient(180deg,var(--glow),rgba(57,240,200,.05));box-shadow:0 0 20px var(--a)}
.ck-card.on .ck-ring{opacity:1;animation:ck-ring 1.4s ease-in-out infinite alternate}
@keyframes ck-ring{from{stroke-width:2}to{stroke-width:5}}
.ck-card.hint{animation:ck-hint .6s ease-in-out infinite alternate}
@keyframes ck-hint{to{box-shadow:0 0 26px var(--a)}}
/* the button to press: a diamond of four, the right one lit, SNES letter on it */
.ck-badge{position:absolute;right:-18%;bottom:-18%;width:58%;overflow:visible}
.ck-badge circle{fill:rgba(57,240,200,.28);stroke:rgba(57,240,200,.7);stroke-width:1.5}
.ck-badge circle.lit{fill:var(--cream);stroke:var(--a);stroke-width:3}
.ck-badge text{fill:var(--navy);font:800 12px "Kenney Future",system-ui,sans-serif;text-anchor:middle;dominant-baseline:middle}

/* ---------- "go home": a green double chevron circling the ship ---------- */
.home-chevron{position:fixed;left:-22px;top:-22px;width:44px;height:44px;z-index:2;pointer-events:none;overflow:visible;
  animation:ck-blink 1.1s ease-in-out infinite alternate}
.home-chevron path{fill:none;stroke:#6dff9e;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 2px #081e1c) drop-shadow(0 0 6px rgba(109,255,158,.7))}

/* ---------- the radar as a holo ellipse, tilted away, sitting in the cockpit ----------
   One size in both cockpit modes (the canvas never resizes, so it never
   blanks); the modes differ only in the .radar transform, which eases, so
   the minimal radar glides into the command one and back.
   minimal: big, centred low so 55% shows (the whole ship icon at the centre).
   command: the whole ring, scaled down into the same height. */
body[data-cockpit] .radar{--d:min(78vh,40vw);perspective:calc(var(--d) * 3.1);transform-origin:50% 100%;transition:transform var(--lean,.65s cubic-bezier(.45,0,.2,1))}
body[data-cockpit] .radar[data-state=half]{transform:translate(-50%,45%)}
body[data-cockpit] .radar[data-state=full]{transform:translate(-50%,3.5%) scale(.51)}   /* measured: the ring fills the minimal dome's height (any screen: perspective scales with --d) */
body[data-cockpit] .radar canvas{transform:rotateX(40deg);transform-origin:50% 50%;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 0 8px rgba(57,240,200,.45))}
body[data-cockpit] .radar:not([data-state=closed]) .radar-tab{display:none}

/* the floating pills and side speed bar only show with the cockpit closed */
body[data-cockpit=half] .speed,body[data-cockpit=full] .speed,
body[data-cockpit=half] .gems,body[data-cockpit=full] .gems,
body[data-cockpit=half] .credits,body[data-cockpit=full] .credits,
body[data-cockpit=half] .faction,body[data-cockpit=full] .faction,
body[data-cockpit=half] .passengers,body[data-cockpit=full] .passengers{display:none}

/* ---------- auto-dock cue (js/dock-cue.js): a gold $ coin and the B badge ----------
   data-state: off (hidden) / ready (a soft breathing glow) / active (brighter,
   a dashed ring turning round the coin) / docked (steady and bright).
   The lamp sits on the dash above the hold and credits panel (minimal and
   command cockpits); .dock-cue is the classic HUD's, cockpit closed only. */
.dock-lamp,.dock-cue{--a:rgba(255,200,87,.9);--glow:rgba(255,200,87,.35);box-sizing:border-box;aspect-ratio:1;border:2px solid var(--a);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,200,87,.16),rgba(255,200,87,.04));box-shadow:0 0 10px var(--glow);transition:opacity .35s,background .35s}
.dock-lamp{--ds:clamp(46px,7vh,64px);position:absolute;width:var(--ds);
  left:calc(50% + var(--rd) / 2 + 1vw + min(24vw,290px) - var(--ds));bottom:calc(5.5vh + clamp(54px,8vh,74px) + 1.6vh);
  transform:perspective(700px) rotateY(-16deg) skewY(7deg)}
.dock-cue{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:clamp(56px,9vmin,76px);z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,26,61,.55),rgba(16,26,61,.35))}
body[data-cockpit=half] .dock-cue,body[data-cockpit=full] .dock-cue{display:none}
.dock-lamp[data-state=off],.dock-cue[data-state=off]{opacity:0}
.dock-lamp .dock-coin,.dock-cue .dock-coin{position:absolute;inset:8%;width:84%;height:84%;overflow:visible}
.dock-lamp .ck-badge,.dock-cue .ck-badge{right:-22%;bottom:-22%;width:52%}
.dock-coin .dc-dollar{fill:none;stroke:#7a4e00;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.dock-coin .dc-ring{fill:none;stroke:#ffc857;stroke-width:3;stroke-dasharray:9 7;opacity:0;transform-box:fill-box;transform-origin:center}
:is(.dock-lamp,.dock-cue)[data-state=ready]{animation:dock-ready 1.6s ease-in-out infinite alternate}
@keyframes dock-ready{from{box-shadow:0 0 6px var(--glow)}to{box-shadow:0 0 18px var(--a)}}
:is(.dock-lamp,.dock-cue):is([data-state=active],[data-state=docked]){background:linear-gradient(180deg,rgba(255,200,87,.42),rgba(255,200,87,.12));box-shadow:0 0 22px var(--a)}
:is(.dock-lamp,.dock-cue)[data-state=active] .dc-ring{opacity:1;animation:dock-turn 2.4s linear infinite}
:is(.dock-lamp,.dock-cue)[data-state=docked] .dc-ring{opacity:1;stroke-dasharray:none}
@keyframes dock-turn{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .ck-layer,body[data-cockpit] .radar{transition-duration:.15s}
  .ck-light,.home-chevron,.ck-card.on .ck-ring,.ck-card.hint,:is(.dock-lamp,.dock-cue)[data-state=ready],.dc-ring{animation:none}
}