/* ============================================================
   ARULANDO SYSTEM — pixel navigation console theme
   ============================================================ */

@font-face { font-family: "PS2P"; src: local("Press Start 2P"); }

:root {
  --bg:#03060d;
  --bg2:#061018;
  --panel:#07160e;
  --panel2:#0a2114;
  --bezel:#0e2a19;
  --bezel2:#1c4f30;
  --line:#16683a;
  --green:#7dff5e;
  --green2:#4fd23f;
  --green-dim:#2f7a35;
  --ink:#cdecc0;
  --ink-dim:#6f9e6a;
  --amber:#ffc24a;
  --red:#ff5d4d;
  --cyan:#6fe0ff;
  --font-pixel:"Press Start 2P", monospace;
  --font-read:"VT323", monospace;
}

* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-read);
  overflow:hidden;
  -webkit-font-smoothing:none;
  font-smooth:never;
  cursor:default;
  user-select:none;
}
#root { position:fixed; inset:0; }

button { font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a { color:inherit; text-decoration:none; }

/* image-rendering for all pixel canvases */
canvas { image-rendering:pixelated; }

/* ---------------- CRT overlay ---------------- */
.crt-lines, .crt-vig {
  position:fixed; inset:0; pointer-events:none; z-index:9000;
}
.crt-lines {
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  animation:flick 5s steps(60) infinite;
}
.crt-vig {
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,0.55) 100%);
}
@keyframes flick { 0%,97%{opacity:1;} 98%{opacity:0.86;} 99%{opacity:1;} 100%{opacity:0.95;} }
@media (prefers-reduced-motion: reduce){ .crt-lines{ animation:none; } }

/* ================================================================
   STAGE / WORLD / CAMERA
   ================================================================ */
.stage { position:fixed; inset:0; overflow:hidden; background:#03060d; }
.starlayer { position:absolute; inset:0; z-index:0; }

.camera {
  position:absolute; left:50%; top:50%;
  width:760px; height:760px; margin:-380px 0 0 -380px;
  transform-origin:center center;
  transition:none; /* transform driven imperatively per-frame for smooth planet tracking */
  z-index:1;
  will-change:transform;
}
.camera.snap { transition:none; }

.field { position:absolute; inset:0; }

/* orbital rings */
.ring {
  position:absolute; left:50%; top:50%;
  border:1px dashed rgba(125,255,94,0.13);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.ring.lit { border-color:rgba(125,255,94,0.30); border-style:solid; }

/* central star */
.star-wrap {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.star-label {
  font-family:var(--font-pixel); font-size:7px; color:var(--amber);
  letter-spacing:1px; text-shadow:0 0 6px rgba(255,194,74,0.5);
  opacity:0.85; white-space:nowrap;
}

/* ---------------- destination node ---------------- */
.dest {
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  cursor:pointer; z-index:3;
}
.dest-body {
  position:relative;
  transition:transform 180ms ease;
  display:flex; align-items:center; justify-content:center;
}
.dest:hover .dest-body, .dest:focus-visible .dest-body { transform:scale(1.14); }
.dest:focus-visible { outline:none; }
.dest:focus-visible .dest-label { color:var(--green); }

.dest-label {
  font-family:var(--font-pixel); font-size:11px; letter-spacing:0.5px;
  color:var(--ink-dim); white-space:nowrap;
  text-shadow:0 0 4px rgba(0,0,0,0.9); transition:color 150ms;
}
.dest:hover .dest-label { color:var(--green); }
.dest-sub {
  font-family:var(--font-read); font-size:18px; line-height:1;
  color:var(--green-dim); opacity:0; transition:opacity 150ms;
  white-space:nowrap; margin-top:-1px;
}
.dest:hover .dest-sub, .dest:focus-visible .dest-sub { opacity:0.9; }

/* selection reticle on hover */
.reticle {
  position:absolute; inset:-9px; pointer-events:none;
  opacity:0; transition:opacity 150ms;
}
.dest:hover .reticle, .dest:focus-visible .reticle, .dest.active .reticle { opacity:1; }
.reticle span {
  position:absolute; width:6px; height:6px;
  border-color:var(--green); border-style:solid; border-width:0;
}
.reticle span:nth-child(1){ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.reticle span:nth-child(2){ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.reticle span:nth-child(3){ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.reticle span:nth-child(4){ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
.dest.active .reticle span { border-color:var(--amber); }

/* orbiting moon (decorative) */
.moon-orbit {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  animation:spin 26s linear infinite;
}
.moon-dot {
  position:absolute; top:-2px; left:50%; margin-left:-2px;
  width:4px; height:4px; background:#9ba6b2; box-shadow:0 0 0 1px #c9d4de;
}
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* asteroid belt */
.belt {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  animation:spin 150s linear infinite;
}
.rock { position:absolute; background:#5a4636; box-shadow:0 0 0 1px #3a2c20; }
@media (prefers-reduced-motion: reduce){ .moon-orbit,.belt{ animation:none; } }

/* ---------------- ship ---------------- */
.ship {
  position:absolute; transform:translate(-50%,-50%);
  transition:left 1100ms cubic-bezier(.5,.05,.2,1), top 1100ms cubic-bezier(.5,.05,.2,1);
  z-index:5; pointer-events:none;
}
.ship-rot { position:relative; transition:transform 350ms ease; }
.ship-trail {
  position:absolute; left:50%; top:60%; width:5px; height:0;
  margin-left:-2.5px;
  background:linear-gradient(to bottom, rgba(255,180,60,0.9), rgba(255,90,20,0.15), transparent);
  transition:height 200ms; z-index:-1;
}
.ship-trail.on { height:34px; }
.ship-glow {
  position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, rgba(125,255,94,0.18), transparent 70%);
  pointer-events:none;
}

/* ================================================================
   PIXEL WINDOW CHROME
   ================================================================ */
.pixel-window {
  position:relative; background:var(--panel);
  border:3px solid var(--bezel2);
  box-shadow:0 0 0 3px var(--bg), inset 0 0 0 1px rgba(125,255,94,0.10), 0 6px 0 rgba(0,0,0,0.45);
}
.pw-title {
  display:flex; align-items:center; gap:8px; padding:7px 9px;
  background:linear-gradient(180deg, var(--bezel2), var(--bezel));
  border-bottom:2px solid var(--bg);
}
.pw-icon {
  width:14px; height:14px; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--bg); background:var(--green);
  box-shadow:0 0 0 1px var(--green-dim);
}
.pw-titletext { min-width:0; }
.pw-name {
  font-family:var(--font-pixel); font-size:9px; color:var(--green);
  letter-spacing:0.5px; text-shadow:0 0 6px rgba(125,255,94,0.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pw-sub { font-family:var(--font-read); font-size:13px; color:var(--ink-dim); line-height:1.1; margin-top:1px; }
.pw-close {
  margin-left:auto; flex:none; width:20px; height:20px;
  font-family:var(--font-pixel); font-size:9px; color:var(--ink);
  background:var(--bezel); box-shadow:inset 0 0 0 1px var(--bg);
  display:flex; align-items:center; justify-content:center;
}
.pw-close:hover { background:var(--red); color:#1a0604; }
.pw-body { padding:13px 14px; }

/* pixel button */
.px-btn {
  font-family:var(--font-pixel); font-size:11px; color:var(--bg);
  background:var(--green); padding:11px 16px; letter-spacing:0.5px;
  box-shadow:0 0 0 2px var(--bg), 0 4px 0 var(--green-dim), inset 0 0 0 1px rgba(255,255,255,0.25);
  transition:transform 80ms, box-shadow 80ms;
}
.px-btn:hover { background:#9bff7f; }
.px-btn:active { transform:translateY(3px); box-shadow:0 0 0 2px var(--bg), 0 1px 0 var(--green-dim); }
.px-btn.ghost {
  color:var(--green); background:var(--panel2);
  box-shadow:0 0 0 2px var(--bg), inset 0 0 0 2px var(--bezel2), 0 4px 0 rgba(0,0,0,0.5);
}
.px-btn.ghost:hover { background:var(--bezel); color:#9bff7f; }

/* ================================================================
   HUD
   ================================================================ */
.hud { position:absolute; inset:0; z-index:20; pointer-events:none; }
.hud > * { pointer-events:auto; }

.hud-tl { position:absolute; top:16px; left:16px; max-width:400px; }
.hud-tr { position:absolute; top:16px; right:16px; display:flex; gap:8px; }
.hud-bl { position:absolute; bottom:16px; left:16px; }
.hud-br { position:absolute; bottom:16px; right:16px; }

.sys-readout { padding:12px 15px 13px; }
.sys-name { font-family:var(--font-pixel); font-size:14px; color:var(--green); letter-spacing:1px; text-shadow:0 0 8px rgba(125,255,94,0.4); }
.sys-meta { font-family:var(--font-read); font-size:19px; color:var(--ink-dim); margin-top:7px; line-height:1.35; }
.sys-meta b { color:var(--ink); font-weight:normal; }
.blink { animation:blink 1.1s steps(2) infinite; }
@keyframes blink { 50%{ opacity:0; } }

.icon-btn {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:var(--panel2); color:var(--green);
  box-shadow:0 0 0 2px var(--bg), inset 0 0 0 2px var(--bezel2);
  font-size:18px;
}
.icon-btn:hover { background:var(--bezel); color:#9bff7f; }
.icon-btn.off { color:var(--ink-dim); }

.hint {
  font-family:var(--font-read); font-size:19px; color:var(--ink-dim);
  background:rgba(7,22,14,0.7); padding:7px 13px;
  box-shadow:inset 0 0 0 1px var(--bezel);
}
.hint b { color:var(--green); font-weight:normal; }

/* nav log (worlds list) */
.navlog-btn { display:flex; align-items:center; gap:9px; padding:11px 15px; }
.navlog-btn .nl-ic { font-size:16px; }
.navlog-btn span.lab { font-family:var(--font-pixel); font-size:10px; color:var(--green); letter-spacing:0.5px; }

.navlog {
  position:absolute; bottom:72px; right:16px; width:290px; z-index:25;
  pointer-events:auto;
  transform-origin:bottom right;
}
.navlog .pw-body { padding:6px; max-height:50vh; overflow-y:auto; }
.nl-item {
  display:flex; align-items:center; gap:9px; width:100%;
  padding:7px 8px; text-align:left;
  border-bottom:1px solid rgba(28,79,48,0.4);
}
.nl-item:last-child { border-bottom:none; }
.nl-item:hover, .nl-item.active { background:var(--bezel); }
.nl-dot { width:8px; height:8px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.6); }
.nl-text { min-width:0; display:flex; flex-direction:column; gap:5px; }
.nl-label { display:block; font-family:var(--font-pixel); font-size:9px; color:var(--ink); letter-spacing:0.3px; line-height:1.3; }
.nl-item:hover .nl-label, .nl-item.active .nl-label { color:var(--green); }
.nl-name { display:block; font-family:var(--font-read); font-size:17px; color:var(--ink-dim); line-height:1.2; }

/* ================================================================
   INFO PANEL (destination dossier)
   ================================================================ */
.panel-dock {
  position:absolute; top:0; right:0; height:100%;
  width:min(720px, 62vw); padding:18px; z-index:30;
  display:flex; align-items:flex-start; pointer-events:none;
  transform:translateX(112%); transition:transform 700ms cubic-bezier(.5,.05,.2,1);
}
.panel-dock.open { transform:translateX(0); pointer-events:auto; }
.panel-window { display:flex; flex-direction:column; width:100%; max-height:100%; }
.panel-window .pw-body {
  flex:1; min-height:0; overflow-y:auto; padding:22px 24px 30px;
  scrollbar-width:thin; scrollbar-color:var(--bezel2) transparent;
}
.panel-window .pw-title { padding:11px 13px; }
.panel-window .pw-icon { width:18px; height:18px; font-size:12px; }
.panel-window .pw-name { font-size:14px; }
.panel-window .pw-sub { font-size:20px; }
.panel-window .pw-body::-webkit-scrollbar { width:8px; }
.panel-window .pw-body::-webkit-scrollbar-thumb { background:var(--bezel2); }

.readout {
  display:grid; grid-template-columns:max-content 1fr; gap:7px 14px;
  padding:9px 11px; margin-bottom:14px;
  background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel);
}
.ro-row { display:contents; }
.ro-k { color:var(--ink-dim); font-family:var(--font-pixel); font-size:11px; letter-spacing:0.5px; align-self:center; }
.ro-v { color:var(--ink); font-family:var(--font-read); font-size:25px; text-align:right; line-height:1.2; }
.ro-safe { color:var(--green2); }
.ro-warn { color:var(--amber); }

.sec-eyebrow { font-family:var(--font-pixel); font-size:11px; color:var(--green-dim); letter-spacing:1px; margin-bottom:12px; }
.sec-h { font-family:var(--font-pixel); font-size:21px; color:var(--green); line-height:1.5; text-shadow:0 0 8px rgba(125,255,94,0.3); margin-bottom:8px; }
.sec-role { font-family:var(--font-read); font-size:27px; color:var(--cyan); margin-bottom:14px; }
.sec-p { font-family:var(--font-read); font-size:27px; line-height:1.45; color:var(--ink); margin-bottom:12px; text-wrap:pretty; }

/* about stats */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.stat { padding:9px 10px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); }
.stat-v { font-family:var(--font-pixel); font-size:18px; color:var(--amber); }
.stat-k { font-family:var(--font-read); font-size:20px; color:var(--ink-dim); margin-top:5px; }

/* skills */
.skill-group { margin-bottom:16px; }
.skill-gname { font-family:var(--font-pixel); font-size:8px; color:var(--cyan); letter-spacing:0.5px; margin-bottom:9px; }
.skillbar { margin-bottom:9px; }
.sb-top { display:flex; justify-content:space-between; font-family:var(--font-read); font-size:15px; color:var(--ink); margin-bottom:3px; }
.sb-num { color:var(--green-dim); }
.sb-track { height:9px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); padding:1px; }
.sb-fill {
  height:100%; width:0; background:repeating-linear-gradient(90deg, var(--green) 0 4px, var(--green2) 4px 6px);
  animation:fillbar 900ms cubic-bezier(.3,.7,.3,1) forwards; animation-delay:var(--d);
}
@keyframes fillbar { to { width:var(--lvl); } }

/* timeline */
.timeline { position:relative; padding-left:16px; }
.timeline::before { content:""; position:absolute; left:3px; top:4px; bottom:4px; width:2px; background:var(--bezel2); }
.tl-item { position:relative; margin-bottom:16px; }
.tl-node { position:absolute; left:-16px; top:3px; width:8px; height:8px; background:var(--green); box-shadow:0 0 0 2px var(--bg), 0 0 8px var(--green); }
.tl-time { font-family:var(--font-pixel); font-size:11px; color:var(--amber); letter-spacing:0.5px; }
.tl-role { font-family:var(--font-read); font-size:27px; color:var(--green); margin-top:4px; }
.tl-org { font-family:var(--font-read); font-size:22px; color:var(--ink-dim); }
.tl-desc { font-family:var(--font-read); font-size:24px; color:var(--ink); margin-top:4px; line-height:1.4; }

/* education */
.edu-card { padding:10px 11px; margin-bottom:10px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); }
.edu-deg { font-family:var(--font-read); font-size:27px; color:var(--green); }
.edu-org { font-family:var(--font-read); font-size:22px; color:var(--ink-dim); margin-top:3px; }
.edu-time { color:var(--amber); }
.edu-desc { font-family:var(--font-read); font-size:24px; color:var(--ink); margin-top:6px; line-height:1.4; }

/* projects */
.proj-grid { display:flex; flex-direction:column; gap:10px; }
.proj-card { padding:11px 12px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); transition:box-shadow 150ms; }
.proj-card:hover { box-shadow:inset 0 0 0 1px var(--green-dim); }
.proj-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.proj-name { font-family:var(--font-pixel); font-size:10px; color:var(--green); }
.proj-tag { font-family:var(--font-read); font-size:13px; color:var(--bg); background:var(--green-dim); padding:1px 6px; white-space:nowrap; }
.proj-desc { font-family:var(--font-read); font-size:15px; color:var(--ink); margin:6px 0 8px; line-height:1.3; }
.proj-stack { display:flex; flex-wrap:wrap; gap:5px; }
.chip { font-family:var(--font-read); font-size:13px; color:var(--cyan); padding:1px 7px; box-shadow:inset 0 0 0 1px var(--bezel2); }

/* services */
.svc-list { display:flex; flex-direction:column; gap:2px; }
.svc { display:flex; gap:11px; padding:11px 4px; border-bottom:1px solid rgba(28,79,48,0.45); }
.svc:last-child { border-bottom:none; }
.svc-no { font-family:var(--font-pixel); font-size:16px; color:var(--bezel2); flex:none; }
.svc-n { font-family:var(--font-read); font-size:28px; color:var(--green); }
.svc-d { font-family:var(--font-read); font-size:24px; color:var(--ink); margin-top:4px; line-height:1.4; }

/* certs / honours */
.cert-list { display:flex; flex-direction:column; gap:9px; }
.cert { padding:10px 12px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); }
.cert-head { display:flex; align-items:flex-start; gap:9px; }
.cert-badge { font-size:16px; color:var(--amber); flex:none; line-height:1.4; }
.cert-n { font-family:var(--font-read); font-size:26px; color:var(--green); line-height:1.3; flex:1; min-width:0; }
.cert-time { font-family:var(--font-pixel); font-size:11px; color:var(--amber); flex:none; margin-top:3px; }
.cert-org { font-family:var(--font-read); font-size:22px; color:var(--ink-dim); margin:4px 0 0 25px; }
.cert-desc { font-family:var(--font-read); font-size:22px; color:var(--ink); margin:5px 0 0 25px; line-height:1.4; }

/* about tagline + reusable quote box */
.about-tagline {
  font-family:var(--font-pixel); font-size:15px; color:var(--amber); line-height:1.6;
  letter-spacing:0.5px; margin:3px 0 16px; text-shadow:0 0 8px rgba(255,194,74,0.25);
}
.quotebox {
  position:relative; margin:14px 0; padding:14px 14px 12px 16px;
  background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel);
  border-left:3px solid var(--green-dim);
}
.qb-mark { position:absolute; top:2px; left:8px; font-family:var(--font-read); font-size:38px; color:var(--green-dim); line-height:1; }
.qb-text { font-family:var(--font-read); font-size:26px; line-height:1.5; color:var(--ink); text-wrap:pretty; padding-left:16px; }
.qb-by { font-family:var(--font-pixel); font-size:9px; color:var(--green-dim); letter-spacing:0.5px; margin-top:10px; padding-left:16px; text-align:right; }

/* experience place + bullets */
.tl-place { font-family:var(--font-read); font-size:22px; color:var(--cyan); margin-top:3px; }
.tl-bullets { list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.tl-bullets li {
  position:relative; font-family:var(--font-read); font-size:24px; line-height:1.4; color:var(--ink);
  padding-left:17px; text-wrap:pretty;
}
.tl-bullets li::before { content:"▸"; position:absolute; left:0; top:0; color:var(--green-dim); }

/* education result */
.edu-result {
  display:inline-block; margin-top:10px; padding:4px 11px;
  font-family:var(--font-read); font-size:22px; color:var(--amber);
  box-shadow:inset 0 0 0 1px rgba(255,194,74,0.4);
}

/* value list — desc only */
.svc-value { font-family:var(--font-read); font-size:27px; color:var(--ink); line-height:1.4; align-self:center; }

/* single featured project */
.project-hero { padding:13px 14px 14px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); }
.ph-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ph-tag { font-family:var(--font-read); font-size:22px; color:var(--cyan); }
.ph-badge {
  font-family:var(--font-pixel); font-size:11px; color:var(--bg); background:var(--amber);
  padding:5px 9px; flex:none; box-shadow:0 0 10px rgba(255,194,74,0.4);
}
.ph-name { font-family:var(--font-pixel); font-size:19px; color:var(--green); line-height:1.5; margin:12px 0 10px; text-shadow:0 0 8px rgba(125,255,94,0.3); }
.ph-desc { font-family:var(--font-read); font-size:25px; line-height:1.45; color:var(--ink); text-wrap:pretty; }
.ph-links { display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.ph-link {
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-read); font-size:25px; color:var(--green);
  padding:11px 13px; background:var(--panel); box-shadow:inset 0 0 0 1px var(--bezel2);
  transition:background 130ms, box-shadow 130ms;
}
.ph-link:hover { background:var(--bezel); box-shadow:inset 0 0 0 1px var(--green-dim); }
.ph-arrow { color:var(--green-dim); font-size:22px; }
.ph-link:hover .ph-arrow { color:var(--green); }

/* hobbies */
.hobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hobby { padding:10px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); }
.hobby-n { font-family:var(--font-pixel); font-size:12px; color:var(--green); letter-spacing:0.3px; }
.hobby-d { font-family:var(--font-read); font-size:23px; color:var(--ink); margin-top:6px; line-height:1.35; }

/* contact */
.contact-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.contact-link { display:flex; align-items:center; gap:10px; padding:11px 12px; background:var(--bg2); box-shadow:inset 0 0 0 1px var(--bezel); transition:background 130ms, box-shadow 130ms; }
.contact-link:hover { background:var(--bezel); box-shadow:inset 0 0 0 1px var(--green-dim); }
.cl-k { font-family:var(--font-pixel); font-size:12px; color:var(--green); width:96px; flex:none; }
.cl-v { font-family:var(--font-read); font-size:25px; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cl-arrow { color:var(--green-dim); font-size:25px; }
.contact-link:hover .cl-arrow { color:var(--green); }

/* ================================================================
   TITLE SCREEN — SPACESHIP COCKPIT
   ================================================================ */
.title-screen { position:absolute; inset:0; z-index:50; transition:opacity 600ms ease; }
.title-screen.leaving { opacity:0; pointer-events:none; }

.cockpit {
  display:flex; flex-direction:column;
  background:radial-gradient(120% 90% at 50% 36%, rgba(10,33,20,0.16), rgba(3,6,13,0.5) 72%);
}

/* ---- canopy header rail ---- */
.ck-top {
  flex:none; height:30px; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; gap:10px;
  font-family:var(--font-pixel); font-size:7px; letter-spacing:1px; color:var(--ink-dim);
  background:linear-gradient(180deg, #2a2f37, #15181d);
  box-shadow:inset 0 1px 0 #4a525c, inset 0 -2px 0 #05070b, 0 2px 6px rgba(0,0,0,0.6);
  border-bottom:2px solid #05070b;
}
.ck-top-c { color:var(--green-dim); }
.ck-top-l, .ck-top-r { display:flex; align-items:center; gap:7px; }
.ck-led { width:6px; height:6px; border-radius:50%; display:inline-block; box-shadow:0 0 5px currentColor; }
.ck-led.g { background:var(--green); color:var(--green); animation:ledpulse 2.4s ease-in-out infinite; }
.ck-led.a { background:var(--amber); color:var(--amber); animation:ledpulse 1.6s ease-in-out infinite .3s; }
@keyframes ledpulse { 50% { opacity:.35; } }

/* ---- mid row: hull struts + windshield ---- */
.ck-mid { flex:1; display:flex; min-height:0; }
.ck-strut {
  position:relative; flex:none; width:clamp(30px, 5.5vw, 64px); overflow:hidden;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 5px),
    linear-gradient(90deg, #1b1f25, #2a2f37 45%, #20252b);
  box-shadow:inset 0 0 0 2px #05070b;
}
.ck-strut.left { box-shadow:inset 0 0 0 2px #05070b, inset 2px 0 0 #444b54; }
.ck-strut.right { box-shadow:inset 0 0 0 2px #05070b, inset -2px 0 0 #444b54; }
.ck-rivets {
  position:absolute; inset:6px;
  background-image:radial-gradient(circle, #444b54 1px, transparent 1.6px);
  background-size:14px 22px; opacity:.7;
}
.ck-stencil {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-90deg); white-space:nowrap;
  font-family:var(--font-pixel); font-size:7px; letter-spacing:2px; line-height:1.9;
  color:var(--amber); opacity:.5; text-align:center;
}
.ck-warn-stripe {
  position:absolute; left:0; right:0; bottom:0; height:10px;
  background:repeating-linear-gradient(45deg, #d9a328 0 6px, #15181d 6px 12px); opacity:.5;
}

/* ---- windshield / canopy ---- */
.ck-canopy { flex:1; position:relative; display:flex; align-items:center; justify-content:center; padding:14px; min-width:0; }
.ck-glass {
  position:relative; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  clip-path:polygon(4% 0, 96% 0, 100% 12%, 100% 88%, 96% 100%, 4% 100%, 0 88%, 0 12%);
  background:radial-gradient(130% 120% at 50% 30%, transparent 56%, rgba(10,40,22,0.22) 100%);
  box-shadow:inset 0 0 0 3px var(--bezel2), inset 0 0 0 6px #05070b, inset 0 0 70px rgba(0,0,0,0.55);
  overflow:hidden;
}
.ck-glare {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(125deg, rgba(125,255,180,0.05) 0 18%, transparent 34%, transparent 72%, rgba(110,224,255,0.04) 100%);
}
.ck-reticle {
  position:absolute; left:50%; top:50%; width:118px; height:118px;
  transform:translate(-50%,-50%); pointer-events:none; opacity:.14;
  background:
    linear-gradient(var(--green), var(--green)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--green), var(--green)) 0 50%/100% 1px no-repeat;
  border:1px solid var(--green); border-radius:50%;
}
.ck-corner { position:absolute; width:18px; height:18px; border:0 solid var(--bezel2); opacity:.9; }
.ck-corner.tl { top:6px; left:6px; border-top-width:3px; border-left-width:3px; }
.ck-corner.tr { top:6px; right:6px; border-top-width:3px; border-right-width:3px; }
.ck-corner.bl { bottom:6px; left:6px; border-bottom-width:3px; border-left-width:3px; }
.ck-corner.br { bottom:6px; right:6px; border-bottom-width:3px; border-right-width:3px; }

/* HUD projected on the glass */
.ck-hud { position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; padding:0 16px; transform:translateY(-7%); }

/* Title block — sits over open space on the right on desktop */
.ts-title-block {
  position:absolute; right:4%; left:auto; top:50%;
  transform:translateY(-50%);
  width:50%; padding:0 10px; z-index:4;
  text-align:center; display:flex; flex-direction:column; align-items:center;
}
.ts-shipfloat { margin-bottom:12px; animation:bob 3s ease-in-out infinite; }
@keyframes bob { 50%{ transform:translateY(-8px); } }
.ts-tag { font-family:var(--font-pixel); font-size:8px; color:var(--green-dim); letter-spacing:3px; margin-bottom:18px; }
.ts-title {
  font-family:var(--font-pixel); color:var(--green);
  font-size:clamp(20px, 5.4vw, 50px); line-height:1.25; letter-spacing:1px;
  text-shadow:0 0 16px rgba(125,255,94,0.45), 0 4px 0 #062810;
}
.ts-title .sm { display:block; font-size:0.40em; color:var(--ink); margin-top:14px; letter-spacing:2px; text-shadow:none; }
.ts-sub { font-family:var(--font-read); font-size:clamp(19px, 2.3vw, 28px); color:var(--ink); margin-top:18px; max-width:520px; line-height:1.45; }
.ts-sub b { color:var(--green); font-weight:normal; text-shadow:0 0 8px rgba(125,255,94,0.4); }
.ts-foot { font-family:var(--font-read); font-size:13px; color:var(--green-dim); text-align:center; }

/* scanline sweep confined to the glass */
.ts-scan {
  position:absolute; left:0; right:0; height:120px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(125,255,94,0.06) 50%, transparent);
  animation:sweep 6s linear infinite;
}
@keyframes sweep { from{ transform:translateY(-140px); } to{ transform:translateY(120%); } }

/* ---- dashboard console ---- */
.ck-dash {
  flex:none; position:relative;
  height:clamp(168px, 24vh, 238px);
  display:flex; align-items:center; justify-content:space-between; gap:clamp(10px, 2.5vw, 40px);
  padding:16px clamp(14px, 3vw, 42px);
  background:
    radial-gradient(60% 150% at 50% -20%, rgba(125,255,94,0.05), transparent 60%),
    linear-gradient(180deg, #2a2f37 0 3px, #20252c 3px, #15181d);
  box-shadow:inset 0 3px 0 #4a525c, inset 0 -2px 0 #05070b, 0 -3px 10px rgba(0,0,0,0.6);
  border-top:2px solid #05070b;
}
.ck-dash::before {
  content:""; position:absolute; left:0; right:0; top:8px; height:4px;
  background-image:radial-gradient(circle, #4a525c 1px, transparent 1.6px);
  background-size:20px 4px; opacity:.55;
}
.ck-cluster { display:flex; align-items:center; gap:clamp(10px, 1.6vw, 22px); }
.ck-cluster.left { flex:1; justify-content:flex-start; }
.ck-cluster.right { flex:1; justify-content:flex-end; }
.ck-center { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; }

/* gauges (vertical segmented meters) */
.ck-gauge { display:flex; flex-direction:column; align-items:center; gap:6px; }
.ck-gauge-lab { font-family:var(--font-pixel); font-size:7px; color:var(--ink-dim); letter-spacing:1px; }
.ck-segs { display:flex; flex-direction:column-reverse; gap:2px; }
.ck-segs .seg { width:18px; height:6px; background:#10141a; box-shadow:inset 0 0 0 1px #05070b; }

/* toggle switches */
.ck-switches { display:flex; flex-direction:column; gap:6px; }
.ck-toggle { display:flex; align-items:center; gap:7px; }
.ck-sw { position:relative; flex:none; width:13px; height:21px; background:#0c0f13; box-shadow:inset 0 0 0 2px #05070b, inset 0 0 0 3px #2a2f37; }
.ck-sw span { position:absolute; left:2px; right:2px; bottom:2px; height:8px; background:#434a54; box-shadow:inset 0 1px 0 #646c77; transition:all .18s; }
.ck-sw.on span { top:2px; bottom:auto; background:var(--green2); box-shadow:0 0 6px var(--green); }
.ck-toggle-lab { font-family:var(--font-pixel); font-size:7px; color:var(--ink-dim); letter-spacing:.5px; }

/* ignition button */
.ck-ignition { position:relative; padding:0; background:none; }
.ck-ign-ring {
  position:absolute; inset:-9px; pointer-events:none;
  box-shadow:0 0 0 2px #05070b, 0 0 0 5px #2a2f37, 0 0 26px rgba(125,255,94,0.38);
  background:repeating-linear-gradient(45deg, #d9a328 0 7px, #15181d 7px 14px); opacity:.5;
  animation:ignpulse 2.2s ease-in-out infinite;
}
@keyframes ignpulse { 50% { opacity:.26; } }
.ck-ign-face {
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:13px clamp(20px, 3vw, 34px); background:var(--green); color:var(--bg);
  box-shadow:0 0 0 2px #05070b, 0 5px 0 var(--green-dim), inset 0 0 0 1px rgba(255,255,255,0.3);
  transition:transform 80ms, box-shadow 80ms, background 120ms;
}
.ck-ignition:hover .ck-ign-face { background:#9bff7f; }
.ck-ignition:active .ck-ign-face { transform:translateY(4px); box-shadow:0 0 0 2px #05070b, 0 1px 0 var(--green-dim); }
.ck-ign-label { font-family:var(--font-pixel); font-size:13px; letter-spacing:.5px; }
.ck-ign-sub { font-family:var(--font-read); font-size:13px; color:rgba(6,40,16,0.72); letter-spacing:1px; white-space:nowrap; }

/* radar scope */
.ck-radar {
  position:relative; width:clamp(64px, 8vw, 92px); aspect-ratio:1; flex:none; overflow:hidden; border-radius:50%;
  background:radial-gradient(circle, #06140c, #03090a);
  box-shadow:0 0 0 2px #05070b, inset 0 0 0 2px var(--bezel2), inset 0 0 16px rgba(0,0,0,0.8);
}
.ck-radar-grid {
  position:absolute; inset:0; opacity:.5;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 9px, rgba(125,255,94,0.14) 9px 10px),
    linear-gradient(var(--green-dim),var(--green-dim)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--green-dim),var(--green-dim)) 0 50%/100% 1px no-repeat;
}
.ck-radar-sweep {
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(125,255,94,0.5), transparent 60deg);
  animation:radar 3s linear infinite;
}
@keyframes radar { to { transform:rotate(360deg); } }
.ck-blip { position:absolute; width:4px; height:4px; background:var(--green); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 6px var(--green); animation:blipfade 3s linear infinite; }
.ck-blip.b2 { animation-delay:1s; } .ck-blip.b3 { animation-delay:2s; }
@keyframes blipfade { 0%,18%{opacity:1;} 70%,100%{opacity:.15;} }

/* readout panel */
.ck-readout { display:flex; flex-direction:column; gap:5px; }
.ck-ro-row { display:flex; justify-content:space-between; gap:14px; min-width:98px; font-family:var(--font-pixel); font-size:7px; color:var(--ink-dim); letter-spacing:.5px; }
.ck-ro-row b { color:var(--ink); font-weight:normal; }
.ck-ro-row b.ok { color:var(--green2); }

@media (prefers-reduced-motion: reduce){
  .ts-shipfloat, .ts-scan, .ck-led, .ck-ign-ring, .ck-radar-sweep, .ck-blip { animation:none; }
  .ts-scan { display:none; }
}

@media (max-width: 820px) {
  .ck-top-c { display:none; }
  .ck-strut { width:18px; }
  .ck-stencil { display:none; }
  .ck-cluster.left .ck-switches { display:none; }
  /* center the title over the full canopy instead of squeezing it into the right half */
  .ts-title-block {
    right:auto; left:50%;
    transform:translate(-50%,-50%);
    width:90%; padding:0 6px;
  }
}
@media (max-width: 560px) {
  .ck-cluster.right .ck-readout { display:none; }
  .ck-gauge:nth-child(3) { display:none; }
  .ck-dash { gap:12px; padding:12px; height:clamp(130px, 20vh, 170px); }
}
/* Phones: the dashboard gauge clusters are decorative and crowd the primary
   INITIATE button off-screen — drop them and center the call-to-action. */
@media (max-width: 600px) {
  .ck-cluster.left, .ck-cluster.right { display:none; }
  .ck-dash { justify-content:center; }
  .ck-center { flex:1; }
}

/* Narrow screens — give the canopy more room and shrink the title so the
   single long word ("BERNESH") and the subtitle can't overflow the viewport */
@media (max-width: 560px) {
  .ck-canopy { padding:8px; }
  .ck-glass { clip-path:none; }
  .ts-title-block { width:96%; padding:0 4px; }
  .ts-title { font-size:clamp(18px, 7.4vw, 30px); letter-spacing:0; }
  .ts-title .sm { font-size:0.42em; margin-top:10px; letter-spacing:1px; }
  .ts-sub { font-size:clamp(13px, 4vw, 18px); max-width:94vw; margin-top:12px; }
  .ts-tag { margin-bottom:10px; letter-spacing:2px; font-size:7px; }
}
@media (max-width: 400px) {
  .ts-title { font-size:clamp(16px, 7vw, 24px); }
  .ts-sub { font-size:clamp(12px, 3.7vw, 16px); }
}

/* ================================================================
   RESPONSIVE / MOBILE
   ================================================================ */
@media (max-width: 820px) {
  .panel-dock { width:100%; padding:0; align-items:flex-end; transform:translateY(108%); }
  .panel-dock.open { transform:translateY(0); }
  .panel-window { box-shadow:none; border-width:3px 0 0 0; }
  .hud-tl { max-width:52vw; }
  .sys-meta { font-size:16px; }
  .navlog { width:min(300px, calc(100vw - 32px)); }
  .hint { display:none; }
}

@media (max-width: 480px) {
  .hud-tl { max-width:58vw; }
  .stat-grid, .hobby-grid { grid-template-columns:1fr; }
}

/* map content is visible immediately; the title screen handles the intro fade */

/* secret planet overlay fade-in */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* secret planet node — no pointer default, handled by component */
.secret-planet { pointer-events: auto; }