/* ============================================================
   星渡り — COCKPIT HUD
   Loads AFTER journey.css. Frames the tunnel/kanji "window" with
   a starship canopy: corner struts, targeting reticle, a top
   status strip, a right waypoint gauge, and a beveled bottom
   console with instrument readouts + a very subtle track manifest.
   Everything is foreground chrome; only controls take pointer events.
   ============================================================ */
:root{ --hud:'Share Tech Mono','DM Mono',ui-monospace,monospace; --aura:216,180,106; }

/* reposition the floating kinetic text so it lives in the upper
   "window" — clear of the bottom console */
#cockpit-host .st-block{ padding:13vh 11vw 27vh; }
.st-poem{ max-width:24em; }

/* dim the stock chrome — the cockpit replaces it */
#jMark, #jScrollHint{ display:none !important; }
#jExit{ display:none !important; }

/* ============================================================ COCKPIT SHELL */
#cockpit{ position:fixed; inset:0; z-index:7; pointer-events:none; font-family:var(--hud); }
#cockpit .pe{ pointer-events:auto; }

/* ---- window edge + dark canopy surround ---- */
.cp-glass{ position:fixed; inset:14px; z-index:7; pointer-events:none; border-radius:14px;
  border:1px solid rgba(var(--aura),.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 120px rgba(0,0,0,.55), 0 0 0 14px #050409;
  -webkit-mask:linear-gradient(#000,#000); }
.cp-glass::after{ /* faint canopy sheen */
  content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:linear-gradient(125deg, rgba(255,255,255,.05) 0%, transparent 22%, transparent 78%, rgba(255,255,255,.02) 100%); }
/* diagonal canopy struts in the top corners */
.cp-strut{ position:fixed; top:14px; width:34vmin; height:1px; z-index:8; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--aura),.4), transparent); }
.cp-strut.l{ left:14px; transform-origin:left top; transform:rotate(34deg); }
.cp-strut.r{ right:14px; transform-origin:right top; transform:rotate(-34deg);
  background:linear-gradient(270deg, rgba(var(--aura),.4), transparent); }

/* ---- corner brackets ---- */
.cp-corner{ position:fixed; width:30px; height:30px; z-index:8; pointer-events:none; opacity:.6; }
.cp-corner::before,.cp-corner::after{ content:''; position:absolute; background:rgba(var(--aura),.6); }
.cp-corner::before{ width:30px; height:1px; } .cp-corner::after{ width:1px; height:30px; }
.cp-corner.tl{ top:24px; left:24px; } .cp-corner.tr{ top:24px; right:24px; }
.cp-corner.tr::before{ right:0; } .cp-corner.tr::after{ right:0; }
.cp-corner.bl{ bottom:24px; left:24px; } .cp-corner.bl::before{ bottom:0; } .cp-corner.bl::after{ bottom:0; }
.cp-corner.br{ bottom:24px; right:24px; } .cp-corner.br::before{ bottom:0; right:0; } .cp-corner.br::after{ bottom:0; right:0; }

/* ---- targeting reticle around the kanji ---- */
.cp-reticle{ position:fixed; left:50%; top:46%; transform:translate(-50%,-50%); z-index:8; pointer-events:none;
  width:min(52vmin,520px); height:min(52vmin,520px); }
.cp-reticle i{ position:absolute; width:22px; height:22px; opacity:.5;
  border:1px solid rgba(var(--aura),.7); }
.cp-reticle i.a{ left:0; top:0; border-right:none; border-bottom:none; }
.cp-reticle i.b{ right:0; top:0; border-left:none; border-bottom:none; }
.cp-reticle i.c{ left:0; bottom:0; border-right:none; border-top:none; }
.cp-reticle i.d{ right:0; bottom:0; border-left:none; border-top:none; }
.cp-reticle .tick{ position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:1px; height:10px; background:rgba(var(--aura),.6); }
.cp-reticle .tick.b{ top:auto; bottom:-12px; }
.cp-reticle .lock{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--hud); font-size:9px; letter-spacing:.3em; color:rgba(var(--aura),.0); transition:.6s; }

/* ============================================================ TOP STATUS STRIP */
.cp-top{ position:fixed; top:30px; left:0; right:0; z-index:9; display:flex; align-items:center;
  justify-content:space-between; padding:0 46px; pointer-events:none; }
.cp-top .seg-l,.cp-top .seg-r{ display:flex; align-items:center; gap:16px; }
.cp-brand{ font-family:var(--font-en); font-size:12px; letter-spacing:.42em; color:rgba(var(--aura),.8); text-indent:.42em; }
.cp-brand .slash{ opacity:.5; }
.cp-tag{ font-family:var(--hud); font-size:10px; letter-spacing:.28em; color:var(--ink-dim); }
.cp-pill{ font-family:var(--hud); font-size:10px; letter-spacing:.2em; color:rgba(var(--aura),.85);
  border:1px solid rgba(var(--aura),.3); border-radius:3px; padding:5px 11px; display:flex; gap:8px; align-items:center; }
.cp-pill .blink{ width:5px; height:5px; border-radius:50%; background:rgb(var(--aura)); box-shadow:0 0 8px rgb(var(--aura)); animation:cpBlink 1.6s infinite; }
@keyframes cpBlink{ 0%,100%{opacity:1;} 50%{opacity:.25;} }
.cp-exit{ pointer-events:auto; font-family:var(--hud); font-size:10px; letter-spacing:.24em; color:var(--ink-dim);
  border:1px solid var(--line,rgba(243,236,221,.12)); border-radius:3px; padding:6px 13px; text-decoration:none; transition:.3s; }
.cp-exit:hover{ color:var(--ink); border-color:rgba(var(--aura),.6); }

/* ============================================================ RIGHT WAYPOINT GAUGE (restyle #jDots) */
#jDots{ right:34px !important; gap:0 !important; padding:8px 0; }
#jDots::before{ content:''; position:absolute; right:5px; top:8px; bottom:8px; width:1px; background:linear-gradient(rgba(var(--aura),.05),rgba(var(--aura),.28),rgba(var(--aura),.05)); }
.j-dot{ position:relative; height:24px; padding-right:2px; }
.j-dot i{ width:5px !important; height:5px !important; border-radius:0 !important; transform:rotate(45deg);
  background:rgba(243,236,221,.35) !important; }
.j-dot.edge i{ width:3px !important; height:3px !important; }
.j-dot span{ font-family:var(--hud) !important; font-size:9px !important; letter-spacing:.16em !important; }
.j-dot.active i{ width:8px !important; height:8px !important; background:rgb(var(--aura)) !important;
  box-shadow:0 0 12px rgba(var(--aura),.9) !important; }
.cp-gauge-label{ position:fixed; right:30px; top:calc(50% - 150px); z-index:9; transform:translateY(-100%);
  font-family:var(--hud); font-size:9px; letter-spacing:.3em; color:var(--ink-dim); writing-mode:vertical-rl; pointer-events:none; }

/* ============================================================ BOTTOM CONSOLE */
.cp-dash{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:9; width:min(1180px,calc(100vw - 80px));
  display:grid; grid-template-columns:1fr 1.5fr 1fr; align-items:stretch; gap:1px;
  background:rgba(var(--aura),.16);
  clip-path:polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  pointer-events:none; }
.cp-mod{ background:linear-gradient(180deg, rgba(13,14,20,.82), rgba(8,9,14,.9));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); padding:14px 22px; min-height:104px;
  display:flex; flex-direction:column; justify-content:center; gap:8px; }
.cp-mod:first-child{ clip-path:polygon(0 16px, 16px 0, 100% 0, 100% 100%, 0 100%); }
.cp-mod:last-child{ clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
.mod-label{ font-family:var(--hud); font-size:9px; letter-spacing:.34em; color:rgba(var(--aura),.7); display:flex; align-items:center; gap:8px; }
.mod-label::after{ content:''; flex:1; height:1px; background:rgba(var(--aura),.16); }

/* left: flight system */
.sys-row{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--hud); }
.sys-row .k{ font-size:9px; letter-spacing:.16em; color:var(--ink-dim); }
.sys-row .v{ font-size:13px; letter-spacing:.06em; color:var(--ink); }
.sys-row .v b{ color:rgb(var(--aura)); font-weight:400; }
.warpbar{ height:3px; background:rgba(255,255,255,.08); margin-top:2px; overflow:hidden; }
.warpbar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,rgba(var(--aura),.5),rgb(var(--aura))); transition:width .12s linear; }

/* center: station / navigation */
.cpd-station{ align-items:center; text-align:center; }
.st-idx-big{ font-family:var(--hud); font-size:11px; letter-spacing:.4em; color:rgba(var(--aura),.85); }
.st-state{ font-family:var(--font-en); font-size:15px; letter-spacing:.28em; color:var(--ink); }
.st-state .rom{ color:rgb(var(--aura)); }
.st-prog{ width:100%; height:1px; background:rgba(255,255,255,.1); position:relative; margin-top:4px; }
.st-prog i{ position:absolute; left:0; top:-1px; height:3px; width:0; background:rgb(var(--aura)); box-shadow:0 0 8px rgba(var(--aura),.8); transition:width .15s linear; }
.st-prog .ticks{ position:absolute; inset:0; display:flex; justify-content:space-between; }
.st-prog .ticks span{ width:1px; height:5px; margin-top:-2px; background:rgba(255,255,255,.18); }

/* right: track manifest (subtle, expands on hover) */
.cpd-manifest{ pointer-events:auto; position:relative; }
.man-head{ display:flex; justify-content:space-between; align-items:baseline; }
.man-n{ font-family:var(--hud); font-size:13px; color:rgb(var(--aura)); }
.man-list{ display:flex; flex-direction:column; gap:3px; margin-top:2px; max-height:46px; overflow:hidden; mask:linear-gradient(180deg,#000 60%,transparent); }
.man-row{ display:flex; align-items:center; gap:8px; font-family:var(--hud); font-size:10px; letter-spacing:.04em;
  color:var(--ink-dim); cursor:pointer; transition:.2s; white-space:nowrap; overflow:hidden; }
.man-row::before{ content:'▸'; font-size:8px; color:rgba(var(--aura),.5); }
.man-row:hover{ color:var(--ink); } .man-row.on{ color:rgb(var(--aura)); }
.man-row .mn{ overflow:hidden; text-overflow:ellipsis; }
.cpd-manifest:hover .man-list{ max-height:120px; }
.man-hint{ font-family:var(--hud); font-size:8px; letter-spacing:.2em; color:var(--ink-faint,rgba(243,236,221,.18)); margin-top:4px; }

/* bottom thrust hint */
.cp-thrust{ position:fixed; left:50%; bottom:138px; transform:translateX(-50%); z-index:9; pointer-events:none;
  font-family:var(--hud); font-size:9px; letter-spacing:.34em; color:var(--ink-dim); display:flex; flex-direction:column; align-items:center; gap:6px; transition:opacity .6s; }
.cp-thrust .arr{ width:10px; height:10px; border-right:1px solid rgba(var(--aura),.6); border-bottom:1px solid rgba(var(--aura),.6); transform:rotate(45deg); animation:cpThrust 1.6s var(--ease) infinite; }
@keyframes cpThrust{ 0%{opacity:0; transform:rotate(45deg) translate(-3px,-3px);} 50%{opacity:1;} 100%{opacity:0; transform:rotate(45deg) translate(3px,3px);} }
@media (prefers-reduced-motion:reduce){ .cp-thrust .arr,.cp-pill .blink{ animation:none; } }

@media (max-width:820px){
  .cp-dash{ grid-template-columns:1fr; width:calc(100vw - 36px); }
  .cp-mod:nth-child(1){ display:none; }
  .cp-strut, .cp-reticle{ display:none; }
  .cp-top{ padding:0 22px; }
  .cp-tag{ display:none; }
  #cockpit-host .st-block{ padding:12vh 7vw 30vh; }
}