/* ★ 2026-10-07 · PROJECT 1936 · 1936 Earth engineering: riveted gunmetal, brass,
   typewriter paper, analog dials, a red-lit darkroom. Mobile-first, full screen. */
:root{
  --steel:#2a2925; --steel-2:#35332d; --steel-3:#1c1b18; --rivet:#6b6656;
  --brass:#b08d57; --brass-hi:#e2c27d; --brass-dk:#6e5532;
  --paper:#efe6d0; --paper-2:#e2d6b8; --ink:#2a2118; --ink-2:#5a4a36;
  --red:#9b2a1f; --red-hi:#d24a36; --green:#4f7d3a; --amber:#ffbf47;
  --type:'Special Elite','Courier Prime','Courier New',monospace;
  --mono:'Courier Prime','Courier New',monospace;
  --deco:'Limelight','Special Elite',serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0d0c0a;color:var(--paper);font-family:var(--type);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
#view{position:fixed;inset:0;display:block;opacity:0;touch-action:none;transition:filter .08s linear}
#view.on{opacity:1}
#ui{position:fixed;inset:0;pointer-events:none}
#ui > *{pointer-events:auto}
/* scenes drawn on the canvas let taps through to it; only their controls catch them */
#ui > .x-surface,#ui > .x-port,#ui .x-cam,#ui .x-cam .x-vf{pointer-events:none}
#ui .x-surface > .x-hud,#ui .x-surface > .x-actbar,#ui .x-port > .x-subhead,#ui .x-cam .x-camctl{pointer-events:auto}
.noscript{padding:40px;font-family:var(--type)}

/* riveted plate */
.riv{background:linear-gradient(180deg,var(--steel-2),var(--steel));border:2px solid #111;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.4),0 3px 0 #0a0a09;}
.riv::before,.riv::after{content:'';position:absolute;top:6px;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#a9a28a,var(--rivet) 55%,#2d2b25);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.riv::before{left:6px} .riv::after{right:6px}
.x-plate{font-family:var(--deco);font-size:1rem;letter-spacing:.12em;color:var(--brass-hi);margin:0;text-shadow:0 1px 0 #000}
.x-mono{font-family:var(--mono);font-size:.82rem;line-height:1.55;color:var(--ink-2);margin:0 0 12px}
.x-mono.dim{opacity:.7}

/* buttons */
.x-btn{display:inline-block;font-family:var(--type);font-size:.95rem;letter-spacing:.06em;padding:.8rem 1.1rem;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#1a140c;border:2px solid #3b2d18;border-radius:3px;
  box-shadow:0 3px 0 var(--brass-dk),inset 0 1px 0 rgba(255,255,255,.5);text-decoration:none}
.x-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--brass-dk)}
.x-btn:disabled{filter:grayscale(.8) brightness(.7)}
.x-btn.ghost{background:transparent;color:var(--brass-hi);border-color:var(--brass);box-shadow:none}
.x-btn.big{font-size:1.1rem;padding:1rem 1.4rem;width:100%}
.x-btns{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:30px}
.x-stamp{display:inline-block;font-family:var(--deco);font-size:1rem;letter-spacing:.2em;color:var(--brass-hi);border:3px double currentColor;padding:.3rem .7rem;transform:rotate(-3deg);margin:0 0 14px}
.x-stamp.red{color:var(--red)}

/* screens */
.x-screen{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
.x-paper{background:var(--paper);color:var(--ink);max-width:620px;margin:0 auto;padding:22px 20px 24px;border-radius:2px;
  box-shadow:0 0 0 1px #c9bb98,0 12px 40px rgba(0,0,0,.6);
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(90,74,54,.08) 27px 28px),radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.5),transparent 60%)}

/* title */
.x-title{display:grid;place-items:center;text-align:center;
  background:radial-gradient(ellipse at 50% 40%,#2a2620,#0d0c0a 70%)}
.x-title-in{max-width:520px}
.x-title h1{font-family:var(--deco);font-weight:400;font-size:clamp(3.2rem,15vw,6rem);line-height:.95;margin:6px 0 0;color:var(--paper);
  text-shadow:0 2px 0 #000,0 0 30px rgba(226,194,125,.25);letter-spacing:.04em}
.x-tsub{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--brass);margin:14px 0 0}
.x-fine{font-family:var(--mono);font-size:.7rem;color:#8b836f;margin-top:28px;line-height:1.7}
.x-fine a{color:var(--brass-hi)}

/* dossier */
.x-dossier{background:#15130f}
.x-typed{font-family:var(--type);font-size:.86rem;line-height:1.55;white-space:pre-wrap;margin:0 0 18px;min-height:14em;color:var(--ink)}
.x-sign{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--ink-2);margin-bottom:16px}
.x-sign input{font-family:var(--type);font-size:1.2rem;border:none;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);padding:6px 2px;outline:none}

/* cockpit (launch, descent) */
.x-cockpit{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#2c2a25,#0e0d0b)}
.x-panel{width:min(560px,100%);padding:26px 18px 22px;text-align:center}
.x-dials{display:flex;justify-content:center;gap:10px;margin:18px 0}
.x-dial{flex:1;max-width:150px;background:var(--steel-3);border:2px solid #000;border-radius:8px;padding:8px 6px 6px}
.x-dial svg,.x-g svg{display:block;width:100%;height:auto}
.x-dial span,.x-g span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--brass-hi);text-align:center}
.x-arc{fill:none;stroke:#d8cfb4;stroke-width:3;stroke-dasharray:2 4}
.x-arc.red{stroke:var(--red-hi);stroke-dasharray:none}
.x-needle{stroke:#f2e6c8;stroke-width:2.5;stroke-linecap:round;transform-origin:50px 58px;transform:rotate(-80deg);transition:transform 1.1s cubic-bezier(.3,1.6,.5,1)}
.x-g .x-needle{transform-origin:30px 36px;transition:transform .6s ease}
.x-dial circle,.x-g circle{fill:var(--brass)}
.x-readout{font-family:var(--mono);font-size:1.1rem;letter-spacing:.14em;color:var(--amber);background:#0c0b09;border:2px solid #000;padding:.7rem;margin:0 0 16px;text-shadow:0 0 8px rgba(255,191,71,.6)}
.x-cockpit.alarm .x-readout{color:#ff6b55;animation:x-blink .5s steps(2) infinite}
.x-alt{font-family:var(--mono);font-size:1.4rem;color:var(--paper);margin:10px 0}
.x-alt b{color:var(--amber);letter-spacing:.1em}
.x-lever{width:150px;height:150px;border-radius:50%;border:4px solid #300;background:radial-gradient(circle at 40% 35%,#e05a46,#8c1f14 70%);
  color:#fff;font-family:var(--mono);font-weight:700;font-size:.82rem;letter-spacing:.08em;box-shadow:0 6px 0 #3a0c07,0 0 30px rgba(220,60,40,.5);animation:x-pulse 1s ease-in-out infinite}
@keyframes x-pulse{50%{box-shadow:0 6px 0 #3a0c07,0 0 50px rgba(255,80,50,.9)}}
@keyframes x-blink{50%{opacity:.3}}
.shake .x-panel{animation:x-shake .12s linear infinite}
.shake-soft .x-panel{animation:x-shake .5s linear infinite}
@keyframes x-shake{25%{transform:translate(2px,-1px)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px)}}

/* hyperspace */
.x-hyper{display:grid;place-items:center;background:transparent;pointer-events:none}
.x-hyper.white{background:#fff;transition:background .6s}
.x-hyper.black{background:#000;pointer-events:auto}
.x-hyper-t{font-family:var(--type);font-size:1.15rem;line-height:1.7;white-space:pre-wrap;text-align:center;max-width:30ch;color:var(--paper)}

/* ship hub */
.x-ship{background:radial-gradient(ellipse at 50% 0%,#2e2b25,#100f0d 70%);display:flex;flex-direction:column;gap:12px}
.x-ship.unpowered{animation:x-flicker 4s steps(1) infinite}
@keyframes x-flicker{0%,100%{filter:brightness(.55)}43%{filter:brightness(.8)}44%{filter:brightness(.45)}46%{filter:brightness(.7)}}
.x-shiphead,.x-subhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 12px 22px;max-width:760px;width:100%;margin:0 auto}
.x-where{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--paper-2);margin:4px 0 0}
.x-snd{background:var(--steel-3);border:2px solid #000;color:var(--brass-hi);font-family:var(--mono);font-size:.72rem;padding:.4rem .6rem;border-radius:3px}
.x-stations{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:760px;width:100%;margin:0 auto}
@media (min-width:640px){.x-stations{grid-template-columns:repeat(4,1fr)}}
button.x-station{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:22px 14px 14px;min-height:96px;border-radius:3px}
button.x-station b{font-family:var(--deco);font-weight:400;font-size:.98rem;letter-spacing:.06em;color:var(--brass-hi)}
button.x-station span{font-family:var(--mono);font-size:.7rem;color:#a99f86}
button.x-station:disabled{opacity:.45}
button.x-station:not(:disabled):active{transform:translateY(2px)}
button.x-station i{position:absolute;right:10px;bottom:10px;font-style:normal;font-family:var(--mono);font-weight:700;font-size:.75rem;color:#1a140c;background:var(--amber);border-radius:10px;padding:1px 8px}
.x-ship > .x-btn.big{max-width:760px;margin:4px auto 0}
.x-shipnote{font-family:var(--type);text-align:center;color:var(--amber);font-size:.92rem;min-height:1.4em;margin:6px auto;max-width:760px}

/* sub-screens */
.x-sub{background:#100f0d;display:flex;flex-direction:column;gap:14px}
.x-back{background:var(--steel-3);border:2px solid #000;color:var(--brass-hi);font-family:var(--mono);font-size:.78rem;padding:.45rem .7rem;border-radius:3px}
.x-subbody{max-width:760px;width:100%;margin:0 auto}
.x-empty{font-family:var(--type);color:#a99f86;text-align:center;margin-top:40px;line-height:1.6}

.x-switches{display:grid;gap:10px}
@media (min-width:640px){.x-switches{grid-template-columns:repeat(3,1fr)}}
.x-sw{padding:22px 14px 14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.x-sw .x-dial{max-width:none}
.x-sw small{grid-column:1/-1;font-family:var(--mono);font-size:.7rem;color:#a99f86}
.x-toggle{width:52px;height:84px;border-radius:6px;border:2px solid #000;background:#151411;position:relative}
.x-toggle span{position:absolute;left:12px;right:12px;height:38px;bottom:8px;border-radius:4px;background:linear-gradient(180deg,#d9d2bd,#8e8770);transition:bottom .15s}
.x-toggle[aria-pressed="true"] span{bottom:36px;background:linear-gradient(180deg,var(--brass-hi),var(--brass))}
.x-sw.on .x-dial span{color:#9fdc7a}
.x-radio{font-family:var(--type);white-space:pre-wrap;color:var(--amber);font-size:.9rem;line-height:1.6;min-height:3em;margin:14px 2px}

/* star chart */
.x-chart{position:relative;aspect-ratio:1/1;max-height:62vh;margin:0 auto;background:var(--paper);border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px #c9bb98,0 10px 30px rgba(0,0,0,.6)}
.x-chart-grid{position:absolute;inset:0;background:
  radial-gradient(circle at 46% 46%,transparent 0 18%,rgba(42,33,24,.18) 18.2% 18.5%,transparent 18.7% 34%,rgba(42,33,24,.14) 34.2% 34.5%,transparent 34.7% 52%,rgba(42,33,24,.1) 52.2% 52.5%,transparent 52.7%),
  repeating-linear-gradient(0deg,transparent 0 9.9%,rgba(42,33,24,.12) 10%),repeating-linear-gradient(90deg,transparent 0 9.9%,rgba(42,33,24,.12) 10%)}
.x-you{position:absolute;transform:translate(-50%,-50%);color:var(--red);font-weight:700;font-size:1.3rem;text-align:center;line-height:1}
.x-you small,.x-body small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.04em;line-height:1.25;color:var(--ink);margin-top:4px}
.x-body small{width:9.5em;margin-left:-4.75em;position:relative;left:50%}
.x-body{position:absolute;transform:translate(-50%,-50%);background:none;border:none;padding:6px;text-align:center;animation:x-plot .6s ease-out both}
.x-body i{display:block;margin:0 auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--ink);background:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 4px)}
.x-body.reach i{background:#7d5bb8;border-color:#3d2a63;box-shadow:0 0 0 4px rgba(125,91,184,.25)}
.x-body.here i{box-shadow:0 0 0 4px rgba(155,42,31,.5)}
@keyframes x-plot{from{opacity:0;transform:translate(-50%,-50%) scale(2)}}
.x-navctl{text-align:center;margin-top:14px}
.x-navnote{font-family:var(--type);color:#cfc5aa;font-size:.88rem;line-height:1.6;max-width:44ch;margin:12px auto 0}

/* darkroom */
.x-redroom{background:radial-gradient(ellipse at 50% 30%,#3a0d08,#0f0302 75%)}
.x-redroom .riv{background:linear-gradient(180deg,#3a1a14,#24100c)}
.x-dark{display:flex;flex-direction:column;align-items:center;gap:14px}
.x-tray{width:min(340px,92vw);aspect-ratio:4/3.3;background:linear-gradient(180deg,#2b0b07,#1a0503);border:3px solid #0a0201;border-radius:10px;display:grid;place-items:center;position:relative;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8)}
.x-print{width:82%;aspect-ratio:4/3;background:#f4efe2;padding:6px;box-shadow:0 4px 12px rgba(0,0,0,.6);opacity:.12;transform:rotate(-1.5deg)}
.x-print img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.55) contrast(1.1) brightness(2.6);opacity:0}
.x-print.dev{opacity:1;transition:opacity .4s}
.x-print.dev img{animation:x-develop 1.6s ease-out forwards}
@keyframes x-develop{0%{opacity:0;filter:sepia(.6) contrast(.6) brightness(2.6)}60%{opacity:.8}100%{opacity:1;filter:sepia(.55) contrast(1.1) brightness(1)}}
.x-grade{position:absolute;bottom:8px;right:10px;font-family:var(--deco);font-size:1rem;letter-spacing:.14em;margin:0;transform:rotate(-6deg)}
.g-excellent{color:#ffd76a}.g-good{color:#c7f0a0}.g-fair{color:#e6b98a}.g-poor{color:#ff8d7a}
.x-darknote{font-family:var(--type);color:#f0c2b5;text-align:center;margin:0 0 10px}
.x-darkctl{text-align:center}
.x-manifest{min-height:240px;display:flex;flex-direction:column;align-items:center}
.x-man-k{font-family:var(--deco);letter-spacing:.14em;color:var(--brass-hi);margin:0 0 10px;text-align:center}
.x-man-k.dim{color:#d9a597;font-family:var(--type);letter-spacing:.04em;line-height:1.5}

/* laboratory, archive */
.x-lab,.x-arc{padding:24px 18px 16px;margin-bottom:12px}
.x-lab h3,.x-arc h3{font-family:var(--deco);font-weight:400;color:var(--brass-hi);letter-spacing:.08em;margin:0 0 8px;font-size:1.05rem;display:flex;justify-content:space-between;gap:10px}
.x-lab p{font-family:var(--type);color:#cfc5aa;font-size:.9rem;line-height:1.55}
.x-lab .x-mono,.x-arc .x-mono{color:#a99f86}
.x-out{margin-top:14px;display:flex;flex-direction:column;align-items:center}
.x-arc ul{list-style:none;margin:0;padding:0}
.x-arc li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px;padding:9px 0;border-top:1px solid rgba(226,194,125,.15);font-family:var(--type);color:#6f6754}
.x-arc li b{font-weight:400}
.x-arc li.part{color:#cfc5aa}
.x-arc li.done{color:var(--paper)}
.x-arc li span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--brass)}
.x-arc li em{flex-basis:100%;font-size:.82rem;color:#a99f86;font-style:normal;line-height:1.5}

/* expedition log */
.x-obj{margin:0 0 16px;padding-left:1.4rem;font-family:var(--type);font-size:.92rem;line-height:1.5;color:var(--ink)}
.x-obj li{margin-bottom:8px}
.x-obj li.done{text-decoration:line-through;color:#8b7d63}
.x-obj li.main{font-family:var(--deco);letter-spacing:.06em;color:var(--red);list-style:none;margin-left:-1.4rem;margin-top:14px}

/* cards */
.x-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.x-card{position:relative;background:#f3ecd9;color:var(--ink);border:2px solid #3b2d18;border-radius:6px;padding:8px;
  box-shadow:0 0 0 3px var(--brass),0 6px 16px rgba(0,0,0,.5);width:170px;margin:4px;cursor:pointer;animation:x-cardin .6s cubic-bezier(.2,1.5,.4,1) both}
.x-grid .x-card{width:auto}
@keyframes x-cardin{from{opacity:0;transform:translateY(16px) scale(.92)}}
.x-card.foil{box-shadow:0 0 0 3px var(--brass-hi),0 0 18px rgba(255,215,106,.6),0 6px 16px rgba(0,0,0,.5)}
.x-card.foil::after{content:'FIRST EDITION';position:absolute;top:34px;right:-6px;font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;background:var(--brass-hi);color:#1a140c;padding:2px 5px;transform:rotate(8deg)}
.x-card-band{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.08em;background:var(--ink);color:var(--brass-hi);padding:4px 6px;margin:-2px -2px 8px;border-radius:3px 3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-card-art{aspect-ratio:4/3;background:#d9cfb6;border:1px solid #8b7d63;display:grid;place-items:center;overflow:hidden}
.x-card-art img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) contrast(1.08)}
.x-spr{width:70%;aspect-ratio:1;background-size:400% 400%;background-position:0 0;image-rendering:auto}
.x-noimg{font-family:var(--mono);font-size:.6rem;color:#8b7d63}
.x-card-nm{font-family:var(--type);font-size:.88rem;line-height:1.2;margin:8px 0 4px;min-height:2.4em}
.x-card-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;color:var(--ink-2);letter-spacing:.06em}
.x-card-meta b{color:var(--red)}
.x-qty{position:absolute;top:30px;left:-8px;background:var(--red);color:#fff;font-family:var(--mono);font-weight:700;font-size:.72rem;padding:2px 7px;border-radius:10px;border:2px solid #f3ecd9}
.x-card.big{width:min(340px,86vw);cursor:default;padding:10px}
.x-card.big .x-card-nm{font-size:1.2rem;min-height:0}
.x-card-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0;font-family:var(--mono);font-size:.72rem}
.x-card-dl dt{color:var(--ink-2);letter-spacing:.08em}
.x-card-dl dd{margin:0;font-weight:700}
.x-card-canon{font-family:var(--mono);font-size:.74rem;color:var(--red);margin:6px 0}
.x-card-note{font-family:var(--type);font-size:.78rem;line-height:1.45;color:var(--ink-2);margin:6px 0 0}

/* modal */
.x-modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:rgba(5,4,3,.78);overflow:auto}
.x-modal-in{display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%;overflow:auto}
.x-modal-in.x-paper{align-items:stretch;width:min(560px,100%)}
.x-sketch{width:100%;height:auto;border:1px solid #c9bb98;margin-bottom:14px}
.x-notes p{font-family:var(--type);font-size:.84rem;line-height:1.5;margin:0 0 8px}

/* reclassification */
.x-reclass{background:#15130f}
.x-relist{list-style:none;padding:0;margin:16px 0}
.x-relist li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:7px 0;border-bottom:1px dashed #c9bb98;font-family:var(--type)}
.x-relist s{color:var(--ink-2);text-decoration:none;background:linear-gradient(var(--red),var(--red)) 0 55%/0% 2px no-repeat;transition:background-size .3s}
.x-relist li.struck s{background-size:100% 2px;color:#9a8a70}
.x-relist b{font-family:var(--deco);font-weight:400;letter-spacing:.06em;color:var(--red);font-size:1.05rem}

/* recall */
.x-recall{display:grid;place-items:center;background:#1a0705}

/* surface HUD */
.x-surface{padding:0}
.x-hud{position:absolute;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:flex;align-items:center;gap:8px;padding:16px 12px 8px;border-radius:4px;max-width:640px;margin:0 auto}
.x-zone{display:flex;flex-direction:column;min-width:0;flex:1}
.x-zone b{font-family:var(--deco);font-weight:400;font-size:.8rem;line-height:1.1;letter-spacing:.06em;color:var(--brass-hi)}
.x-zone span{font-family:var(--mono);font-size:.58rem;color:#a99f86;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-gauges{display:flex;gap:4px}
.x-g{width:52px;background:var(--steel-3);border:1px solid #000;border-radius:6px;padding:3px 3px 2px}
.x-g span{font-size:.5rem}
.x-g.low{box-shadow:0 0 0 2px var(--red-hi);animation:x-blink .8s steps(2) infinite}
.x-counts{display:flex;flex-direction:column;gap:4px}
.x-counts span{display:flex;align-items:center;gap:5px;background:#0c0b09;border:1px solid #000;padding:2px 6px;border-radius:3px}
.x-counts i{font-style:normal;font-family:var(--mono);font-size:.5rem;color:#a99f86;letter-spacing:.08em}
.x-counts b{font-family:var(--mono);font-size:.82rem;color:var(--amber);letter-spacing:.1em}
.x-actbar{position:absolute;left:8px;right:8px;bottom:max(10px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1.5fr 1fr;grid-template-rows:auto auto;gap:6px;max-width:560px;margin:0 auto}
.x-act{background:linear-gradient(180deg,var(--steel-2),var(--steel));border:2px solid #000;color:var(--paper);border-radius:4px;padding:.7rem .3rem;font-family:var(--mono);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  box-shadow:0 3px 0 #000,inset 0 1px 0 rgba(255,255,255,.08)}
.x-act:active{transform:translateY(2px);box-shadow:0 1px 0 #000}
.x-act.primary{grid-row:1/3;grid-column:2;background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#1a140c;font-size:.82rem}
.x-act.primary:disabled{background:var(--steel);color:#6f6754}
.x-act.on{color:var(--amber);box-shadow:0 3px 0 #000,inset 0 0 0 2px var(--amber)}
.x-act[data-a="cam"]{grid-column:1;grid-row:1}
.x-act[data-a="crouch"]{grid-column:1;grid-row:2}
.x-act[data-a="journal"]{grid-column:3;grid-row:1}
.x-act[data-a="flare"]{grid-column:3;grid-row:2}
.cam-on .x-actbar,.cam-on .x-hud{display:none}

/* camera */
.x-cam{position:absolute;inset:0;pointer-events:none}
.x-cam[hidden]{display:none}
.x-vf{position:absolute;left:50%;top:42%;width:min(78vw,520px);aspect-ratio:4/3;transform:translate(-50%,-50%);pointer-events:none;
  box-shadow:0 0 0 100vmax rgba(8,6,4,.62)}
.x-vf i{position:absolute;width:26px;height:26px;border:3px solid var(--paper)}
.x-vf .tl{top:-3px;left:-3px;border-right:none;border-bottom:none}.x-vf .tr{top:-3px;right:-3px;border-left:none;border-bottom:none}
.x-vf .bl{bottom:-3px;left:-3px;border-right:none;border-top:none}.x-vf .br{bottom:-3px;right:-3px;border-left:none;border-top:none}
.x-vf::after{content:'';position:absolute;inset:19%;border:1px dashed rgba(239,230,208,.45)}
.x-vfc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:1.4rem;color:rgba(239,230,208,.7)}
.x-cam.flash::after{content:'';position:fixed;inset:0;background:#fff;animation:x-flash .25s ease-out forwards;pointer-events:none}
@keyframes x-flash{from{opacity:.9}to{opacity:0}}
.x-camctl{position:absolute;left:8px;right:8px;bottom:max(10px,env(safe-area-inset-bottom));pointer-events:auto;padding:18px 14px 10px;border-radius:6px;max-width:560px;margin:0 auto;
  display:grid;grid-template-columns:auto 1fr auto;gap:10px 12px;align-items:center}
.x-range{display:flex;flex-direction:column;align-items:center;background:#0c0b09;border:1px solid #000;padding:4px 8px;border-radius:3px;min-width:64px}
.x-range span{font-family:var(--mono);font-size:.5rem;color:#a99f86;letter-spacing:.1em}
.x-range b{font-family:var(--mono);font-size:.95rem;color:var(--amber)}
.x-ring{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:.5rem;color:#a99f86;letter-spacing:.1em}
.x-ring input{width:100%;accent-color:var(--brass);height:28px}
.x-scale{display:flex;justify-content:space-between;font-style:normal}
.x-scale i{font-style:normal;color:var(--brass-hi);font-size:.62rem}
.x-cambtns{display:flex;flex-direction:column;align-items:center;gap:6px}
.x-shutter{width:58px;height:58px;border-radius:50%;border:3px solid #000;background:radial-gradient(circle at 40% 35%,#f1f1ee,#9c9a92 70%);box-shadow:0 3px 0 #000,0 0 0 4px var(--brass)}
.x-shutter:active{transform:translateY(2px)}
.x-camx{background:none;border:none;color:var(--brass-hi);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em}
.x-camfilm{grid-column:1/-1;margin:0;text-align:center;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--amber)}

/* observation port */
.x-port{padding:0}
.x-port .x-subhead{position:absolute;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;width:auto;border-radius:4px}
.x-porthint{position:absolute;top:calc(max(8px,env(safe-area-inset-top)) + 64px);left:0;right:0;text-align:center;font-family:var(--type);font-size:.82rem;color:#cfc5aa;margin:0;pointer-events:none;text-shadow:0 1px 2px #000}
.x-port .x-cam .x-camx{display:none}

/* toasts */
.x-toasts{position:fixed;left:50%;top:calc(max(8px,env(safe-area-inset-top)) + 84px);transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;gap:6px;width:min(92vw,440px);pointer-events:none}
.x-toast{background:var(--paper);color:var(--ink);font-family:var(--type);font-size:.84rem;line-height:1.35;padding:.55rem .8rem;border-left:5px solid var(--brass);box-shadow:0 4px 14px rgba(0,0,0,.5);animation:x-tin .25s ease-out both}
.x-toast.red{border-left-color:var(--red)}
.x-toast.out{animation:x-tout .35s ease-in forwards}
@keyframes x-tin{from{opacity:0;transform:translateY(-8px)}}
@keyframes x-tout{to{opacity:0;transform:translateY(-8px)}}

@media (prefers-reduced-motion:reduce){
  .x-ship.unpowered,.shake .x-panel,.shake-soft .x-panel,.x-lever,.x-cockpit.alarm .x-readout,.x-g.low{animation:none}
}

/* ═══════════════════ SURVEY BUILD 2 ═══════════════════ */
:root{ --gold:#d9b46a; --gold-hi:#f3d28c; --gold-dk:#7c5a26; --parch:#e6d6ae; --parch-2:#cdb98a; --stone:#17151a; --serif:'Cinzel','Limelight',serif; --glow:#7fd0ff; }
.x-btn.small{font-size:.78rem;padding:.5rem .75rem}
.x-mono.light{color:#cfc5aa}
.x-tgoals{font-family:var(--type);font-size:.92rem;line-height:1.6;color:#e2d6b8;margin:18px auto 0;max-width:34ch}
button.x-station.wide{grid-column:1/-1;min-height:80px;background:linear-gradient(180deg,#4a3a20,#2c2214);border-color:#000}
button.x-station.wide b{font-size:1.15rem}
.x-obj li.side{color:#6b5d48;font-style:italic}

/* ── THE MAP BOARD ── */
.x-board{padding:0;overflow-y:auto;
  background:
    radial-gradient(circle at 4% 88%,rgba(255,170,70,.28),transparent 14%),
    radial-gradient(circle at 97% 84%,rgba(255,160,60,.24),transparent 13%),
    radial-gradient(ellipse at 50% 40%,#2a2630,#121014 60%,#0a090b 100%)}
.x-board::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 140px),repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 70px)}
.x-board-in{position:relative;display:grid;grid-template-columns:1fr;gap:10px;padding:max(10px,env(safe-area-inset-top)) 10px max(16px,env(safe-area-inset-bottom));max-width:1500px;margin:0 auto}
@media (min-width:1000px){
  .x-board-in{grid-template-columns:270px minmax(0,1fr) 250px;align-items:start;padding:18px;
    background:linear-gradient(180deg,#2b2620,#1a1714);border:6px solid #3a2f22;border-radius:6px;margin:18px auto;
    box-shadow:0 0 0 2px var(--gold-dk),0 0 0 4px #0e0c0a,0 30px 80px rgba(0,0,0,.8),inset 0 0 60px rgba(0,0,0,.6)}
}
.x-bcol{display:flex;flex-direction:column;gap:10px}
@media (max-width:999px){ .x-bcol.left{order:0} .x-bmap{order:1} .x-bcol.right{order:2} .x-hide-sm{display:none} }
.x-plq{background:linear-gradient(180deg,#e9dab3,#d6c294);color:#2b2015;border-radius:3px;padding:14px 14px 12px;position:relative;
  box-shadow:inset 0 0 0 1px #8a6a32,inset 0 0 0 4px #e9dab3,inset 0 0 0 5px #a98544,0 6px 16px rgba(0,0,0,.6),0 0 0 2px #2a2016;
  background-image:linear-gradient(180deg,rgba(233,218,179,.94),rgba(214,194,148,.96)),radial-gradient(circle at 20% 10%,#fff6,transparent 50%)}
.x-plq h2{font-family:var(--serif);font-weight:800;font-size:1.25rem;letter-spacing:.06em;margin:0;color:#3a2410;text-align:center;line-height:1.15}
.x-plq h3{font-family:var(--serif);font-weight:700;font-size:.86rem;letter-spacing:.12em;margin:0 0 8px;color:#4a3015;text-align:center;border-bottom:1px solid #a98544;padding-bottom:6px}
.x-plq p{font-family:var(--type);font-size:.82rem;line-height:1.5;margin:6px 0 0}
.x-plq-sub{font-family:var(--serif)!important;font-size:.66rem!important;letter-spacing:.14em;text-align:center;color:#6b4a1c;margin-top:4px!important}
.x-gl{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:start;margin:8px 0}
.x-gl > span{font-family:var(--serif);font-weight:800;font-size:1rem;color:#7c4a14;text-align:center;border:1px solid #a98544;border-radius:50%;width:28px;height:28px;line-height:26px}
.x-gl b{display:block;font-family:var(--serif);font-weight:700;font-size:.8rem;letter-spacing:.08em}
.x-gl em{display:block;font-family:var(--type);font-style:normal;font-size:.76rem;color:#5a4128}
.x-bar{display:block;height:6px;background:#bfa774;border:1px solid #8a6a32;margin-top:5px;border-radius:3px;overflow:hidden}
.x-bar i{display:block;height:100%;background:linear-gradient(90deg,#7c4a14,#d9a24a)}
.x-facts,.x-key,.x-named{list-style:none;margin:0;padding:0;font-family:var(--type);font-size:.78rem}
.x-facts li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted #a98544}
.x-facts b{font-weight:400;color:#4a3015;text-align:right}
.x-key li{display:flex;align-items:center;gap:8px;padding:3px 0}
.x-key .k{width:14px;height:14px;border-radius:50%;flex:none}
.k.visited{background:radial-gradient(circle at 35% 30%,#fff,#7d4bb0 40%,#2a1a40);box-shadow:0 0 8px #b07cff}
.k.identified{background:radial-gradient(circle at 35% 30%,#fff,#3f8f5f 40%,#10261a)}
.k.unidentified{background:radial-gradient(circle at 35% 30%,#888,#26242e);border:1px dashed #6b5a3a}
.k.range{border:2px dashed #b58a3a}
.x-named{columns:2;column-gap:12px;font-size:.72rem}
.x-named li{padding:1px 0;color:#7a6548;break-inside:avoid}
.x-named li.k{color:#2b2015;font-weight:700}
.x-named span{display:inline-block;width:2em;color:#8a6a32}
.x-vplq .x-btn{width:100%;margin-top:10px}
.x-bmap{position:relative;border-radius:8px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,#1a1630,#0b0a14 70%);border:3px solid #3a2f22;
  box-shadow:0 0 0 1px var(--gold-dk),inset 0 0 80px rgba(0,0,0,.9),0 10px 30px rgba(0,0,0,.7)}
.x-bmap::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 72% 12%,#fff6,transparent),radial-gradient(1.5px 1.5px at 88% 64%,#fffa,transparent),
  radial-gradient(1px 1px at 24% 76%,#fff6,transparent),radial-gradient(1px 1px at 52% 90%,#fff5,transparent),radial-gradient(1px 1px at 92% 30%,#fff7,transparent),radial-gradient(1px 1px at 6% 50%,#fff6,transparent)}
.x-chart-svg{display:block;width:100%;height:auto;max-height:calc(100vh - 140px);margin:0 auto;cursor:pointer}
@media (max-width:999px){ .x-chart-svg{max-height:none} }
.x-dust{fill:none;stroke:#e8c9a0;stroke-width:22;filter:url(#soft)}
.x-ring{fill:none;stroke:rgba(217,180,106,.22);stroke-width:1.2;stroke-dasharray:3 6}
.x-spire{stroke:rgba(255,226,160,.28);stroke-width:1.5}
.x-drift{fill:none;stroke:rgba(180,140,230,.35);stroke-width:1.5;stroke-dasharray:10 8}
.x-range-c{fill:rgba(181,138,58,.07);stroke:#b58a3a;stroke-width:2;stroke-dasharray:8 6}
.x-flare{fill:rgba(255,236,190,.55);filter:url(#glow)}
.x-orb{stroke:rgba(0,0,0,.6);stroke-width:1}
.x-bd.unidentified .x-orb{stroke:#7a6a4a;stroke-dasharray:3 3}
.x-q{font-family:var(--serif);font-size:14px;font-weight:700;fill:#a99a78;text-anchor:middle}
.x-pring{fill:none;stroke:#e9d6a6;stroke-width:2.5;opacity:.85}
.x-pring.back{opacity:.4}
.x-tag rect{fill:rgba(12,10,8,.78);stroke:rgba(217,180,106,.55);stroke-width:1}
.x-tag text{font-family:'Cinzel',serif;font-weight:700;font-size:11.5px;letter-spacing:.06em;fill:#f0dca8;text-anchor:middle}
.x-bd.unidentified .x-tag text{fill:#a99a78}
.x-bd.visited .x-tag rect{stroke:#f3d28c}
.x-bd{transition:transform .15s}
.x-bd.sel .x-orb,.x-bd.sel circle:first-child{filter:brightness(1.3)}
.x-bd.sel .x-tag rect{stroke:#fff3c8;stroke-width:2}
.x-bd.reach.unidentified .x-orb{stroke:#e9c46a;stroke-width:2;stroke-dasharray:none;animation:x-beacon 1.6s ease-in-out infinite}
@keyframes x-beacon{50%{stroke:#fff3c8;stroke-width:4}}
.x-vessel path{stroke:#ff7a5a;stroke-width:3;stroke-linecap:round}
.x-vessel .x-vring{fill:none;stroke:#ff7a5a;stroke-width:1.5;opacity:.7}
.x-vessel text{font-family:'Cinzel',serif;font-weight:800;font-size:11px;letter-spacing:.1em;fill:#ffb59f;text-anchor:middle}
.x-banner{display:table;margin:-6px auto 14px;position:relative;white-space:nowrap;font-family:var(--serif);font-weight:800;letter-spacing:.14em;
  font-size:clamp(.9rem,3vw,1.7rem);color:#bfe8ff;text-shadow:0 0 12px var(--glow),0 0 28px rgba(127,208,255,.6);
  background:linear-gradient(180deg,rgba(20,18,26,.85),rgba(8,8,12,.92));padding:.35em 1em;border:2px solid #4a3c26;border-radius:4px;box-shadow:0 0 0 1px var(--gold-dk),0 6px 18px rgba(0,0,0,.6)}
.x-sheet{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 10px max(12px,env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none}
.x-sheet[hidden]{display:none}
.x-sheet-in{pointer-events:auto;width:min(460px,100%);animation:x-cardin .3s ease-out both}
.x-sh-k{font-family:var(--serif)!important;font-weight:700;font-size:.72rem!important;letter-spacing:.14em;color:#7c4a14;margin:0!important}
.x-sheet h3,.x-planet .x-plq h3{font-size:1.3rem;border:none;text-align:left;padding:0;margin:4px 0 2px;letter-spacing:.06em}
.x-sh-sub{font-family:var(--serif)!important;font-size:.7rem!important;letter-spacing:.12em;color:#6b4a1c;margin:0 0 6px!important}
.x-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:8px 0;font-family:var(--mono);font-size:.78rem}
.x-sheet dt{color:#6b4a1c;letter-spacing:.08em}
.x-sheet dd{margin:0;font-weight:700}
.x-sh-note{font-family:var(--type);font-size:.82rem;line-height:1.5;color:#4a3420}
.x-sh-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.x-plq .x-btn.ghost{color:#4a3015;border-color:#8a6a32}

/* ── planet: districts ── */
.x-planet{background:radial-gradient(ellipse at 50% 30%,#2a2630,#0d0c0f)}
.x-dist{list-style:none;margin:12px 0 0;padding:0}
.x-dist li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dotted #a98544;font-family:var(--type);color:#8a7a5c}
.x-dist li.open{color:#2b2015}
.x-dist .x-roman{font-family:var(--serif);font-weight:800;width:2.4em;color:#7c4a14}
.x-dist b{flex:1;font-weight:400}
.x-dist em{font-style:normal;font-size:.72rem;font-family:var(--mono);color:#9a8a6c}

/* ── surface controls: D-pad, A/B, dialog ── */
#ui .x-surface > .x-pad,#ui .x-surface > .x-ab,#ui .x-surface > .x-dialog{pointer-events:auto}
.x-hud .x-menu{background:var(--steel-3);border:2px solid #000;color:var(--brass-hi);font-size:1.1rem;width:40px;height:40px;border-radius:4px;flex:none}
.x-pad{position:absolute;left:14px;bottom:max(16px,env(safe-area-inset-bottom));width:150px;height:150px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;touch-action:none}
.x-pad button{background:linear-gradient(180deg,#3a3830,#22211c);border:2px solid #000;color:var(--paper);font-size:1rem;border-radius:6px;box-shadow:0 3px 0 #000;touch-action:none;user-select:none;-webkit-user-select:none}
.x-pad button:active{transform:translateY(2px);box-shadow:0 1px 0 #000;background:#4a463a}
.x-pad [data-d="up"]{grid-column:2;grid-row:1}.x-pad [data-d="left"]{grid-column:1;grid-row:2}.x-pad [data-d="right"]{grid-column:3;grid-row:2}.x-pad [data-d="down"]{grid-column:2;grid-row:3}
.x-ab{position:absolute;right:14px;bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:14px;align-items:flex-end}
.x-ab button{width:70px;height:70px;border-radius:50%;border:3px solid #000;font-family:var(--serif);font-weight:800;font-size:1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;box-shadow:0 4px 0 #000;user-select:none}
.x-ab small{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;margin-top:3px}
.x-util-overlay{position:fixed;inset:0;z-index:80;background:rgba(5,10,14,.24);backdrop-filter:blur(1px);color:#dff6ff;font:600 12px/1.3 system-ui,sans-serif;letter-spacing:.08em;pointer-events:auto}.x-util-wheel{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-50%);border:2px solid rgba(143,230,255,.85);border-radius:50%;background:radial-gradient(circle,rgba(12,25,34,.74) 0 24%,rgba(10,20,28,.56) 25% 57%,rgba(8,15,22,.28) 58% 100%);box-shadow:0 0 0 8px rgba(8,18,25,.18),0 0 34px rgba(70,190,255,.4);text-align:center}.x-util-wheel:before,.x-util-wheel:after{content:"";position:absolute;inset:14%;border:1px solid rgba(143,230,255,.28);border-radius:50%;pointer-events:none}.x-util-wheel:after{inset:31%;border-color:rgba(255,211,106,.35)}.x-util-wheel b,.x-util-wheel small{position:absolute;left:0;width:100%;top:132px}.x-util-wheel small{top:153px;opacity:.78;font-size:9px}.x-util-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:28px;color:#8fe6ff;font-style:normal;text-shadow:0 0 12px #73d6ff}.x-util-group{position:absolute;top:86px;font-size:9px;font-style:normal;color:#9fe6ff;opacity:.8}.x-util-group.tactical{left:54px}.x-util-group.combat{right:54px;color:#ffd36a}.x-util-overlay button{position:absolute;transform:translate(-50%,-50%);min-width:96px;padding:9px 8px;background:rgba(24,40,56,.78);border:1px solid rgba(70,103,125,.9);border-radius:16px;color:#dff6ff;font:inherit;cursor:pointer;z-index:2}.x-util-overlay button.tactical{border-color:rgba(115,214,255,.65)}.x-util-overlay button.combat{border-color:rgba(255,211,106,.8)}.x-util-overlay button.on{background:rgba(28,100,120,.9);border-color:#fff;color:#fff;box-shadow:0 0 14px rgba(143,230,255,.45)}
.x-a{background:radial-gradient(circle at 40% 35%,var(--brass-hi),var(--brass) 70%);color:#1a140c;transform:translateY(-22px)}
.x-b{background:radial-gradient(circle at 40% 35%,#5a5648,#2c2a24 70%);color:var(--paper)}
.x-b.on{color:var(--amber);box-shadow:0 4px 0 #000,0 0 0 3px var(--amber)}
.x-ab button:active{box-shadow:0 1px 0 #000;margin-top:3px}
.x-dialog{position:absolute;left:10px;right:10px;bottom:max(190px,calc(env(safe-area-inset-bottom) + 180px));max-width:620px;margin:0 auto;z-index:15;
  background:var(--paper);color:var(--ink);border:3px solid #2a2118;border-radius:6px;padding:14px 16px 16px;box-shadow:0 0 0 3px var(--brass),0 10px 30px rgba(0,0,0,.6);cursor:pointer}
.x-dialog[hidden]{display:none}
.x-dtext{font-family:var(--type);font-size:1rem;line-height:1.5;margin:0;min-height:3em;white-space:pre-wrap}
.x-dmore{position:absolute;right:12px;bottom:6px;color:var(--red);animation:x-blink .8s steps(2) infinite}
.x-dialog.ask .x-dmore{display:none}
.x-dchoices{display:flex;gap:8px;margin-top:10px}
.x-dchoices:empty{display:none}
.x-dchoices button{font-family:var(--type);font-size:.95rem;background:var(--ink);color:var(--paper);border:none;border-radius:3px;padding:.5rem 1rem}
.x-dchoices button:focus-visible{outline:2px solid var(--red)}
@media (min-width:900px){ .x-dialog{bottom:30px} }
.x-fade{position:fixed;inset:0;background:#000;opacity:0;transition:opacity .25s;z-index:60;pointer-events:none}
.x-fade.on{opacity:1}

/* ── encounter ── */
.x-encounter{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:12px;background:rgba(6,5,4,.72);animation:x-encin .35s ease-out both}
@keyframes x-encin{from{opacity:0;transform:scale(1.15)}}
.x-encounter.hit .x-enc-in{animation:x-shake .12s linear 4}
.x-encounter.flash::after{content:'';position:fixed;inset:0;background:#fff;animation:x-flash .25s ease-out forwards;pointer-events:none}
.x-enc-in{width:min(460px,100%);padding:24px 16px 16px;border-radius:6px}
.x-enc-k{font-family:var(--serif);font-weight:800;letter-spacing:.2em;color:var(--brass-hi);text-align:center;margin:0 0 10px}
.x-enc-stage{position:relative;height:200px;border-radius:4px;overflow:hidden;border:2px solid #000;
  background:url(/explorer/assets/grass.png) 0 0/128px;box-shadow:inset 0 0 50px rgba(0,0,0,.6)}
.x-enc-spr{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;background-size:400% 400%;background-position:0 0;image-rendering:auto;
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.4));animation:x-idle 1.2s ease-in-out infinite}
.x-enc-spr.flit{animation:x-idle .4s ease-in-out infinite}
.x-enc-spr.gone{opacity:0;transition:opacity .6s}
@keyframes x-idle{50%{margin-top:-80px}}
.x-enc-vf{position:absolute;inset:16px 40px;border:2px dashed rgba(239,230,208,.7);pointer-events:none}
.x-enc-vf i{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border:2px solid rgba(239,230,208,.8);border-radius:50%}
.x-enc-nm{font-family:var(--serif);font-weight:800;font-size:1.25rem;letter-spacing:.06em;color:var(--paper);text-align:center;margin:12px 0 2px}
.x-enc-sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:#a99f86;text-align:center;margin:0}
.x-enc-msg{font-family:var(--type);font-size:.92rem;line-height:1.5;color:var(--amber);min-height:3em;margin:12px 2px}
.x-enc-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.x-enc-acts[hidden]{display:none}
.x-enc-acts button{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;padding:.8rem .4rem;border-radius:4px;border:2px solid #000;
  background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#1a140c;box-shadow:0 3px 0 #000}
.x-enc-acts button.ghost{background:transparent;color:var(--brass-hi);border-color:var(--brass);box-shadow:none}
.x-enc-acts button:disabled{filter:grayscale(1) brightness(.6)}
.x-enc-cam{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.x-enc-cam[hidden]{display:none}
.x-enc-cam .x-camfilm{grid-column:1/-1}
.x-spr.sheet{background-size:400% 400%}
.x-spr:not(.sheet){background-size:contain;background-repeat:no-repeat;background-position:center}
.x-reveal .x-modal-in{animation:x-cardin .5s cubic-bezier(.2,1.5,.4,1) both}

/* ═══════════════════ SURVEY BUILD 3 · Carl Nasaro canon ═══════════════════ */
.x-title h1{font-size:clamp(2.3rem,10vw,4.6rem)}
.x-sign b.x-sig{display:block;font-family:'Limelight',cursive;font-weight:400;font-size:1.6rem;color:#1d2a5a;border-bottom:2px solid var(--ink);padding:4px 2px;min-height:1.6em;letter-spacing:.02em;transform:rotate(-2deg)}
.x-goals{display:grid;gap:6px;margin:4px 0 14px}
.x-goal{display:grid;grid-template-columns:2rem 1fr;column-gap:8px;align-items:baseline;border-bottom:1px dotted #b7a37a;padding-bottom:6px}
.x-goal span{grid-row:1/3;font-family:var(--serif);font-weight:800;color:var(--red);text-align:center}
.x-goal b{font-family:var(--serif);font-weight:700;letter-spacing:.08em;font-size:.86rem}
.x-goal em{font-style:normal;font-family:var(--mono);font-size:.74rem;color:var(--ink-2)}
.x-chapters{margin:0 0 14px}
.x-chapters ol{list-style:none;margin:0;padding:0}
.x-chapters li{display:grid;grid-template-columns:2rem 1fr;column-gap:8px;padding:4px 0;color:#9a8a6c;font-family:var(--type);font-size:.85rem}
.x-chapters li span{grid-row:1/3;font-family:var(--serif);font-weight:800;text-align:center}
.x-chapters li.open{color:var(--ink)}
.x-chapters li.open span{color:var(--red)}
.x-chapters em{font-style:normal;font-size:.78rem;color:var(--ink-2)}
.x-earth{background-image:linear-gradient(180deg,rgba(214,226,240,.95),rgba(178,196,214,.96))!important}
.x-earth h3{color:#1d3355!important}
.x-earth p{font-size:.8rem!important}

/* ═══════════════════ NATIVE ART · pocket style ═══════════════════ */
img.x-pix,.x-card-art img.x-pix{image-rendering:pixelated;object-fit:contain;padding:8%;background:#cfe0b0}
.x-enc-stage{background-size:64px 64px!important;background-repeat:repeat;image-rendering:pixelated}
.x-enc-spr{background-size:contain!important;background-repeat:no-repeat;background-position:center!important;image-rendering:pixelated;width:144px;height:144px;margin:-72px 0 0 -72px}
@keyframes x-idle{50%{margin-top:-78px}}
#view{image-rendering:pixelated}

/* ═══════════════════ SURVEY BUILD 6 · OPEN EXPANSE ═══════════════════
   Landscape-native, DualSense-ready, the pocket-style opening, card battles. */
:root{ --gba:'VT323','Courier Prime',monospace; --ctl-alpha:1 }

/* ── title · PRESS START ── */
.x-title-ship{display:block;margin:18px auto 0;width:auto;height:clamp(70px,16vh,130px);padding:0!important;background:none!important;animation:x-hover 2.4s ease-in-out infinite}
@keyframes x-hover{50%{transform:translateY(-6px)}}
.x-press{font-family:var(--gba);font-size:1.9rem;letter-spacing:.2em;color:var(--amber);margin:18px 0 0;cursor:pointer;animation:x-blink 1.1s steps(2) infinite;text-shadow:0 0 10px rgba(255,191,71,.5)}
.x-title .x-btns{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:18px}

/* ── the opening (pocket style) ── */
.x-gba{padding:0;background:#0b0a0d;display:flex;flex-direction:column}
.x-gba-stage{position:relative;flex:1;min-height:0;overflow:hidden;
  background:linear-gradient(180deg,#3a3326 0 58%,#2a2419 58% 60%,#4a3e2a 60%);}
.x-gba-stage::before{content:'';position:absolute;left:8%;top:10%;width:26%;height:36%;border:6px solid #2a2016;background:repeating-linear-gradient(90deg,#c9b98e 0 2px,#e2d4ae 2px 12px);opacity:.55;box-shadow:0 0 0 2px #6b5432}
.x-gba-stage::after{content:'';position:absolute;right:7%;top:14%;width:22%;height:30%;border:4px solid #1a1612;background:radial-gradient(circle at 50% 50%,#1a1630,#05040a);box-shadow:inset 0 0 18px #000,0 0 0 2px #6b5432}
.x-gba-floor{position:absolute;left:50%;bottom:6%;width:min(46vw,300px);height:28px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%)}
.x-gba-por{position:absolute;left:50%;bottom:7%;height:min(62vh,300px);width:auto;transform:translateX(-50%);image-rendering:pixelated;z-index:2;opacity:0;transition:opacity .5s,transform .8s cubic-bezier(.5,0,.5,1)}
.x-gba-por.in{opacity:1}
.x-gba-por.now{transition:none}
.x-gba-por.shrink{transform:translateX(-50%) scale(.35)}
.x-gba-por.tiny{transform:translateX(-50%)}
.x-gba-prop{position:absolute;left:calc(50% + min(18vw,150px));bottom:12%;height:min(30vh,150px);width:auto;padding:0!important;background:none!important;z-index:3;animation:x-hover 2.4s ease-in-out infinite}
.x-gba-pick{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:min(12vw,90px);padding:3% 0;z-index:3}
.x-gba-pick figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.6;transition:opacity .2s,transform .2s}
.x-gba-pick figure.on{opacity:1;transform:translateY(-6px)}
.x-gba-pick canvas{height:min(34vh,220px);width:auto;image-rendering:pixelated}
.x-gba-pick figcaption{font-family:var(--gba);font-size:1.5rem;letter-spacing:.14em;color:#fff3c8}
.x-dialog.gba{position:relative;left:auto;right:auto;bottom:auto;margin:0 auto max(10px,env(safe-area-inset-bottom));width:min(980px,calc(100% - 20px));max-width:none;
  background:#f8f8f8;color:#303030;border:4px solid #4a5a8a;border-radius:10px;box-shadow:inset 0 0 0 3px #f8f8f8,inset 0 0 0 6px #a8b8d8,0 6px 0 #1a1a2a;padding:14px 22px 16px}
.x-dialog.gba .x-dtext{font-family:var(--gba);font-size:clamp(1.35rem,3.6vh,1.9rem);line-height:1.25;min-height:2.6em;color:#303030;text-shadow:2px 2px 0 #d0d0c8}
.x-dialog.gba .x-dmore{color:#e05040;font-size:1.1rem}
.x-dialog.gba .x-dchoices{justify-content:flex-end}
.x-dialog.gba .x-dchoices button{font-family:var(--gba);font-size:1.5rem;letter-spacing:.06em;background:#fff;color:#303030;border:3px solid #4a5a8a;border-radius:6px;padding:.1rem 1rem}
.x-dialog.gba .x-dchoices button:focus{outline:none;background:#ffe9a8;box-shadow:0 0 0 3px #e05040}

/* ── naming screen ── */
.x-name{display:grid;place-items:center;background:linear-gradient(180deg,#4a6aa8,#2a3a68)}
.x-name-in{background:#f8f8f8;border:4px solid #303848;border-radius:10px;box-shadow:inset 0 0 0 4px #a8b8d8,0 8px 0 #1a1a2a;padding:16px 18px;width:min(640px,100%)}
.x-name-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.x-name-head canvas{width:48px;height:64px;image-rendering:pixelated;background:#dfe8f4;border-radius:6px}
.x-name-head p{margin:0;font-family:var(--gba);font-size:1.6rem;color:#303030}
.x-name-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.x-name-slots i{font-style:normal;display:inline-block;width:1.1ch;text-align:center;color:#303030}
.x-name-v b{font-weight:400;color:#4a5a8a}
.x-name-grid > div{display:flex;gap:4px;justify-content:center;margin:4px 0}
.x-name-grid button,.x-name-grid span{width:min(9vw,48px);height:min(9vh,44px);font-family:var(--gba);font-size:1.5rem;color:#303030;background:#fff;border:2px solid #a8b8d8;border-radius:5px}
.x-name-grid span{border-color:transparent;background:none}
.x-name-grid button:focus{outline:none;background:#ffe9a8;border-color:#e05040}
.x-name-ctl{gap:10px!important}
.x-name-ctl button{width:auto!important;padding:0 1.2rem}
.x-name-ctl .ok{background:#ffe9a8;border-color:#e0a040}

/* ── kit & options rows ── */
.x-kit{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#2e2b25,#100f0d 70%)}
.x-kit-in{width:min(820px,100%);padding:24px 18px 18px;border-radius:6px}
.x-kit-grid{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:10px}
.x-kit-prev{display:flex;flex-direction:column;align-items:center;gap:8px;background:radial-gradient(circle,#4a4436,#1c1b18);border:2px solid #000;border-radius:6px;padding:10px}
.x-kit-prev .por{height:min(34vh,180px);width:auto;image-rendering:pixelated}
.x-kit-prev .spr{width:72px;height:72px;image-rendering:pixelated}
.x-kit-rows{display:flex;flex-direction:column;gap:6px}
.x-kit-row{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(90px,1.2fr) 44px;align-items:center;gap:6px;background:var(--steel-3);border:1px solid #000;border-radius:4px;padding:4px 6px}
.x-kit-row span{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:#a99f86}
.x-kit-row b{font-family:var(--gba);font-weight:400;font-size:1.35rem;color:var(--amber);text-align:center}
.x-kit-row button{height:36px;background:linear-gradient(180deg,#3a3830,#22211c);border:2px solid #000;border-radius:4px;color:var(--paper)}
.x-kit-rows .x-btn{margin-top:8px}
.x-opts{padding:24px 16px 16px;display:flex;flex-direction:column;gap:6px}

/* ── ship: nine stations ── */
.x-stations{grid-template-columns:repeat(3,1fr)}
@media (min-width:900px){.x-stations{grid-template-columns:repeat(4,1fr)}}

/* ── locker team, chips, hp bars ── */
.x-team{padding:22px 14px 12px;margin:0 0 12px}
.x-team h3{font-family:var(--deco);font-weight:400;color:var(--brass-hi);margin:0 0 8px;font-size:1rem;letter-spacing:.08em;display:flex;gap:10px;align-items:baseline}
.x-team h3 small{font-family:var(--mono);font-size:.62rem;color:#a99f86;letter-spacing:.08em}
.x-teamrow{display:flex;flex-wrap:wrap;gap:8px}
.x-chip{display:flex;align-items:center;gap:8px;background:#0c0b09;border:2px solid #000;border-radius:5px;padding:4px 10px 4px 4px;color:var(--paper);text-align:left;min-width:180px}
.x-chip img.x-pix{width:44px;height:44px;padding:0;background:#1c1b18;border-radius:3px}
.x-chip span{display:flex;flex-direction:column;gap:2px;flex:1}
.x-chip b{font-family:var(--type);font-weight:400;font-size:.82rem}
.x-chip em{font-style:normal;font-family:var(--mono);font-size:.62rem;color:#a99f86}
.x-hpbar{display:block;height:6px;background:#2a2a24;border:1px solid #000;border-radius:3px;overflow:hidden}
.x-hpbar > i{display:block;height:100%;background:linear-gradient(90deg,#48c058,#88e070);transition:width .5s ease}
.x-hpbar.amber > i{background:linear-gradient(90deg,#d8a830,#f0d060)}
.x-hpbar.red > i{background:linear-gradient(90deg,#c83828,#f06048)}
.x-card-moves{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.x-card-moves span{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:3px;background:var(--tc);color:#111}
.x-objwrap{margin-top:10px}

/* ── the Codex: lore pages ── */
.x-arc h4{font-family:var(--deco);font-weight:400;color:var(--paper);margin:10px 0 4px;font-size:.9rem;letter-spacing:.08em}
.x-lore{border-left:3px solid var(--brass);padding:2px 0 2px 10px;margin:0 0 10px}
.x-lore p{font-family:var(--type);font-size:.86rem;line-height:1.5;color:#e2d6b8;margin:0 0 6px}
.x-lore span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;color:var(--brass)}

/* ── surface HUD in landscape: a slim strip ── */
.x-hud{max-width:none;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));padding:12px 12px 6px}
.x-lead{gap:4px!important}
.x-lead img.x-pix{width:22px;height:22px;padding:0;background:none}
.x-lead b{font-size:.62rem!important}
.x-lead:empty{display:none!important}
.x-padhint{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#e2d6b8;background:rgba(12,11,9,.75);border:1px solid #000;padding:4px 10px;border-radius:12px;white-space:nowrap;pointer-events:none}
.x-pad,.x-ab{opacity:var(--ctl-alpha)}
.x-pad{left:max(14px,env(safe-area-inset-left))}
.x-ab{right:max(14px,env(safe-area-inset-right))}
body.lefty .x-pad{left:auto;right:max(14px,env(safe-area-inset-right))}
body.lefty .x-ab{right:auto;left:max(14px,env(safe-area-inset-left));flex-direction:row-reverse}
@media (orientation:landscape){
  .x-dialog:not(.gba){left:190px;right:190px;bottom:max(14px,env(safe-area-inset-bottom));max-width:none}
}

/* ── controllers: hide touch controls, show real focus ── */
body.pad .x-pad,body.pad .x-ab{display:none}
body.pad .x-padhint{display:block}
body.pad .x-dialog:not(.gba){left:10px;right:10px;max-width:760px}
body.pad :focus{outline:3px solid var(--amber)!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(255,191,71,.25)}
.x-bd:focus{outline:none!important}
.x-bd:focus .x-orb{stroke:#ffbf47;stroke-width:5;stroke-dasharray:none}
.x-bd:focus .x-tag rect{stroke:#ffbf47;stroke-width:2.5}
.x-bd.here .x-tag rect{stroke:#ff9a7a}

/* ── card battles ── */
.x-battle{position:fixed;inset:0;z-index:26;display:flex;flex-direction:column;background:#0b0a0d;animation:x-encin .35s ease-out both}
.x-battle.flash::after{content:'';position:fixed;inset:0;background:#fff;animation:x-flash .25s ease-out forwards;pointer-events:none}
.x-bt-field{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.35)),var(--bg) 0 0/64px;image-rendering:pixelated}
.x-bt-field::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#9cc8e8 0 34%,transparent 34%);opacity:.35}
.x-bt-mon{position:absolute;display:flex;justify-content:center;align-items:flex-end}
.x-bt-mon::before{content:'';position:absolute;bottom:-4%;left:-10%;right:-10%;height:28%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),rgba(0,0,0,.15) 60%,transparent 70%)}
.x-bt-mon img.x-pix{position:relative;padding:0;background:none;height:100%;width:auto;image-rendering:pixelated}
.x-bt-mon.foe{right:12%;top:14%;height:38%}
.x-bt-mon.me{left:12%;bottom:4%;height:46%}
.x-bt-mon.hit img{animation:x-hit .45s steps(2) 1}
.x-bt-mon.lunge img{animation:x-lunge .3s ease-out 1}
.x-bt-mon.me.lunge img{animation-name:x-lunge2}
.x-bt-mon.calmed img{filter:saturate(.6) brightness(1.1);animation:x-idle2 1.6s ease-in-out infinite}
@keyframes x-hit{0%,100%{opacity:1}25%,75%{opacity:.2;transform:translateX(4px)}50%{opacity:1;transform:translateX(-4px)}}
@keyframes x-lunge{50%{transform:translateX(-16%)}}
@keyframes x-lunge2{50%{transform:translateX(16%)}}
@keyframes x-idle2{50%{transform:translateY(-4%)}}
.x-bt-info{position:absolute;padding:16px 12px 8px;border-radius:6px;min-width:min(42vw,260px);display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.x-bt-info b{font-family:var(--type);font-weight:400;font-size:.92rem;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-bt-info span{font-family:var(--mono);font-size:.72rem;color:var(--amber)}
.x-bt-info .x-hpbar{grid-column:1/-1;height:8px}
.x-bt-info em{font-style:normal;font-family:var(--mono);font-size:.7rem;color:#e2d6b8}
.x-bt-info .x-gems{color:#8ad0ff;letter-spacing:.12em;text-align:right}
.x-bt-info.foe{left:4%;top:8%}
.x-bt-info.me{right:4%;bottom:10%}
.x-bt-low{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;padding:16px 14px max(12px,env(safe-area-inset-bottom));border-radius:0;align-items:center}
.x-bt-msg{font-family:var(--gba);font-size:clamp(1.25rem,3.4vh,1.7rem);line-height:1.2;color:var(--paper);margin:0;min-height:2.4em}
.x-bt-menu,.x-bt-sub{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.x-bt-menu[hidden],.x-bt-sub[hidden]{display:none}
.x-bt-menu button,.x-bt-sub > button{font-family:var(--gba);font-size:1.35rem;letter-spacing:.08em;padding:.35rem .5rem;border-radius:5px;border:2px solid #000;background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:#1a140c;box-shadow:0 3px 0 #000;text-align:left}
.x-bt-sub > button[data-m]{display:flex;flex-direction:column;border-left:8px solid var(--tc)}
.x-bt-sub > button[data-m] span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em}
.x-bt-sub > button.ghost{background:transparent;color:var(--brass-hi);border-color:var(--brass);box-shadow:none}
.x-bt-sub > button:disabled{filter:grayscale(1) brightness(.6)}
.x-bt-sub .x-chip{min-width:0}

/* ── rotate your device ── */
#x-rotate{display:none;position:fixed;inset:0;z-index:100;background:#0d0c0a;color:var(--paper);place-items:center;text-align:center;padding:24px}
#x-rotate p{font-family:var(--type);font-size:1rem;line-height:1.6;max-width:30ch;margin:12px auto}
#x-rotate .ph{width:70px;height:120px;border:4px solid var(--brass-hi);border-radius:12px;margin:0 auto;animation:x-turn 2.2s ease-in-out infinite}
@keyframes x-turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (orientation:portrait) and (max-width:820px) and (pointer:coarse){ body:not(.allow-portrait) #x-rotate{display:grid} }

/* ── landscape phones: everything fits a short screen ── */
@media (orientation:landscape) and (max-height:540px){
  .x-screen{padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}
  .x-title h1{font-size:clamp(1.8rem,9vh,3rem)}
  .x-title-ship{height:16vh;margin-top:8px}
  .x-tsub{margin-top:6px}
  .x-press{font-size:1.5rem;margin-top:8px}
  .x-fine{margin-top:10px;font-size:.62rem}
  .x-stations{grid-template-columns:repeat(5,1fr);gap:6px}
  .x-station{min-height:62px;padding:16px 10px 8px}
  .x-station b{font-size:.8rem}
  .x-station span{font-size:.6rem}
  .x-station.wide{grid-column:span 2;min-height:62px}
  .x-shiphead,.x-subhead{padding:8px 14px 8px 20px}
  .x-board-in{grid-template-columns:minmax(0,1fr) 250px;align-items:start}
  .x-bmap{order:0!important;grid-row:1/3}
  .x-chart-svg{max-height:calc(100vh - 70px)!important}
  .x-bcol.left{order:1!important}
  .x-bcol.right{order:2!important}
  .x-banner{display:none}
  .x-sheet{left:auto;right:8px;bottom:8px;width:min(440px,52vw)}
  .x-sheet-in{max-height:calc(100vh - 20px);overflow:auto}
  .x-hud{padding:10px 10px 4px;gap:6px}
  .x-g{width:44px}
  .x-pad{width:132px;height:132px;bottom:max(10px,env(safe-area-inset-bottom))}
  .x-ab button{width:62px;height:62px}
  .x-a{transform:translateY(-16px)}
  .x-enc-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px;width:min(860px,100%);padding:18px 14px 12px}
  .x-enc-k{grid-column:1/-1;margin-bottom:4px}
  .x-enc-stage{grid-row:2/6;height:auto;min-height:170px}
  .x-enc-nm{margin-top:0}
  .x-enc-msg{margin:6px 2px;font-size:.84rem}
  .x-enc-acts button{padding:.55rem .3rem}
  .x-modal{padding:8px}
  .x-card.big{width:min(560px,92vw);display:grid;grid-template-columns:180px 1fr;column-gap:12px}
  .x-card.big .x-card-band{grid-column:1/-1}
  .x-card.big .x-card-art{grid-row:2/6}
  .x-kit-grid{grid-template-columns:auto 1fr}
  .x-kit-in{padding:16px 14px 12px}
  .x-kit-row{padding:2px 6px}
  .x-kit-row button{height:30px}
  .x-name-grid button,.x-name-grid span{height:min(11vh,40px)}
  .x-gba-por{height:min(54vh,260px)}
  .x-dialog.gba{padding:8px 18px 10px}
  .x-bt-low{padding:12px 12px 8px}
  .x-bt-msg{min-height:2.2em}
  .x-camctl{max-width:620px}
  .x-vf{top:40%;width:min(60vw,440px)}
  .x-toasts{top:calc(max(8px,env(safe-area-inset-top)) + 64px)}
}
@media (orientation:landscape){
  .x-toasts{left:auto;right:max(10px,env(safe-area-inset-right));transform:none;width:min(40vw,380px);top:calc(max(8px,env(safe-area-inset-top)) + 70px)}
  .x-toast{font-size:.78rem;padding:.45rem .7rem}
}

/* ═══════════════════ THE ASTRANAV · the whole interface ═══════════════════
   1936 American engineering: cream enamel case, chrome trim, a red enamel badge,
   bakelite keys and a green phosphor screen. */
:root{ --enamel:#e9e1cc; --enamel-2:#cfc4a6; --chrome:#c9ccd0; --chrome-dk:#7a7f86; --phos:#7cf08a; --phos-dk:#0b1f10; --badge:#b4281e }
.x-nav{padding:0;background:radial-gradient(ellipse at 50% 20%,#1f1c18,#0a0908 70%)}
.x-nav-dev{position:absolute;inset:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  display:grid;grid-template-columns:132px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px 12px 12px;border-radius:18px;
  background:linear-gradient(180deg,#f2ebd8,var(--enamel) 30%,var(--enamel-2));
  box-shadow:inset 0 0 0 3px var(--chrome),inset 0 0 0 5px var(--chrome-dk),inset 0 2px 0 6px rgba(255,255,255,.4),0 10px 40px rgba(0,0,0,.7)}
.x-nav-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;min-width:0}
.x-nav-logo{font-family:var(--deco);font-weight:400;font-size:1.25rem;letter-spacing:.16em;color:#fff3e0;background:linear-gradient(180deg,#d23a2c,var(--badge));
  padding:.15rem .7rem;border-radius:4px;box-shadow:0 0 0 2px var(--chrome),0 0 0 3px var(--chrome-dk),inset 0 1px 0 rgba(255,255,255,.4);text-shadow:0 1px 0 #5a0c06}
.x-nav-mk{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;color:#6b5d40;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-nav-where{margin-left:auto;font-family:var(--gba);font-size:1.05rem;letter-spacing:.06em;color:var(--phos);background:var(--phos-dk);padding:.05rem .6rem;border-radius:4px;box-shadow:inset 0 0 8px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.x-nav-tabs{display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto}
.x-nav-tabs button{font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.14em;padding:.7rem .5rem;border-radius:6px;border:2px solid #3a3226;
  background:linear-gradient(180deg,#4a4032,#2c261d);color:#e9e1cc;box-shadow:0 3px 0 #1a150f,inset 0 1px 0 rgba(255,255,255,.12);text-align:left}
.x-nav-tabs button.on{background:linear-gradient(180deg,#ffd27a,#e0a440);color:#2a1c0a;box-shadow:0 1px 0 #1a150f,inset 0 0 10px rgba(255,255,255,.35),0 0 12px rgba(255,191,71,.45)}
.x-nav-tabs button:active{transform:translateY(2px);box-shadow:0 1px 0 #1a150f}
.x-nav-tabs .x-nav-close{margin-top:auto;background:linear-gradient(180deg,#d23a2c,#8a1c14);color:#fff3e0}
.x-nav-screen{position:relative;min-height:0;overflow:auto;border-radius:12px;padding:12px;background:radial-gradient(ellipse at 50% 40%,#10281a,#06120a 80%);
  box-shadow:inset 0 0 0 3px #0a0a08,inset 0 0 30px rgba(0,0,0,.9),0 0 0 2px var(--chrome-dk);color:var(--paper)}
.x-nav-screen::after{content:'';position:sticky;display:block;left:0;right:0;bottom:0;height:0;pointer-events:none}
.x-nav-screen::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:12px;z-index:3;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
.x-crt{font-family:var(--gba);font-size:1.2rem;line-height:1.25;color:var(--phos);text-shadow:0 0 6px rgba(124,240,138,.55);margin:0 0 10px}
.x-crt small{font-size:.95rem;opacity:.8}
.x-crt.dim{opacity:.6}
.x-nav-screen .x-paper{max-width:none}
.x-nav-screen .x-arc,.x-nav-screen .x-team{background:linear-gradient(180deg,rgba(20,40,26,.85),rgba(8,20,12,.9));border-color:#0a0a08}
.x-nav-screen .x-arc h3,.x-nav-screen .x-team h3{color:var(--phos);font-family:var(--gba);font-size:1.3rem;letter-spacing:.08em}
.x-nav-screen .x-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.x-nav-screen .x-opts{background:transparent;border:none;box-shadow:none;padding:4px}
.x-nav-screen .x-opts::before,.x-nav-screen .x-opts::after{display:none}
.x-nav-hq .x-subsection{margin:0 0 10px;padding:0;border:1px solid #1d3a24;border-radius:8px;background:linear-gradient(180deg,rgba(20,40,26,.85),rgba(8,20,12,.9));overflow:hidden}
.x-nav-hq .x-subsection>summary{list-style:none;cursor:pointer;padding:10px 12px;color:var(--phos);font-family:var(--gba);font-size:1.3rem;letter-spacing:.08em;background:rgba(4,12,7,.42);border-bottom:1px solid transparent}
.x-nav-hq .x-subsection>summary::-webkit-details-marker{display:none}
.x-nav-hq .x-subsection>summary::before{content:'＋';display:inline-block;width:1.3em;color:#ffd27a}
.x-nav-hq .x-subsection[open]>summary{border-bottom-color:#1d3a24}
.x-nav-hq .x-subsection[open]>summary::before{content:'−'}
.x-nav-hq .x-subsection>.x-hqlist,.x-nav-hq .x-subsection>.x-mats,.x-nav-hq .x-subsection>.x-shipbar,.x-nav-hq .x-subsection>.x-xch,.x-nav-hq .x-subsection>p,.x-nav-hq .x-subsection>i,.x-nav-hq .x-subsection>ol,.x-nav-hq .x-subsection>.x-stages{margin-left:12px;margin-right:12px}
/* SYSTEM: the telescope */
.x-nav-system{padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#120e22,#04030a 75%)}
.x-scope{position:absolute;inset:0}
.x-spiral{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.x-spiral:active{cursor:grabbing}
.x-st{fill:#fff}
.x-orbit{fill:none;stroke:rgba(217,190,140,.13);stroke-width:1;stroke-dasharray:2 5}
.x-drift2{fill:none;stroke:rgba(180,140,230,.22);stroke-width:1.2;stroke-dasharray:8 7}
.x-shade{fill:none;stroke:rgba(0,0,0,.55);stroke-width:1}
.x-spiral .x-tag text{font-size:9.5px}
.x-spiral .x-tag rect{fill:rgba(6,10,8,.72)}
.x-bd.sealed .x-orb{stroke:#6a2a2a;stroke-dasharray:2 2}
.x-bd.sealed .x-tag text{fill:#c86a5a}
.x-spiral .x-vessel path{fill:#ff7a5a;stroke:none}
.x-spiral .x-vessel text{font-size:8.5px}
.x-scope-ui{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:4}
.x-scope-ui button{width:36px;height:36px;border-radius:50%;border:2px solid var(--chrome-dk);background:linear-gradient(180deg,#f2ebd8,var(--enamel-2));color:#2a2118;font-weight:700;font-size:1.1rem}
.x-scope-k{position:absolute;left:12px;bottom:8px;margin:0;font-family:var(--gba);font-size:1.15rem;letter-spacing:.1em;color:#bfe8ff;text-shadow:0 0 8px rgba(127,208,255,.7);z-index:4;pointer-events:none}
.x-sheet2{position:absolute;right:10px;bottom:10px;top:56px;width:min(360px,48%);z-index:5;display:flex;align-items:flex-end;pointer-events:none}
.x-sheet2[hidden]{display:none}
.x-sheet2 .x-sheet-in{pointer-events:auto;width:100%;max-height:100%;overflow:auto}
.x-sheet2 h3{font-size:1.15rem;border:none;text-align:left;padding:0;margin:4px 0 2px}
.x-sheet2 dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0;font-family:var(--mono);font-size:.72rem}
.x-sheet2 dt{color:#6b4a1c;letter-spacing:.08em}
.x-sheet2 dd{margin:0;font-weight:700}
/* FIELD */
.x-field2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
.x-field2 .x-sketch{border-radius:6px}
.x-field-side .x-teamrow{margin-bottom:10px}
/* the boot log */
.x-boot .x-nav-dev{grid-template-columns:1fr}
.x-bootlog{white-space:pre-wrap;margin:0;padding:14px;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#10281a,#06120a 80%);box-shadow:inset 0 0 30px rgba(0,0,0,.9);overflow:auto;font-size:1.35rem}
/* the HUD's AstraNav key */
.x-hud .x-menu{width:auto;padding:0 .7rem;font-family:var(--gba);font-size:1.25rem;letter-spacing:.1em;color:var(--phos);background:linear-gradient(180deg,#f2ebd8,var(--enamel-2));
  border:2px solid var(--chrome-dk);text-shadow:none;color:#2a1c0a;box-shadow:inset 0 0 0 2px #fff6}
/* scanning */
.x-signal{display:block;height:10px;margin-top:4px;border:1px solid #000;border-radius:5px;background:#0b1f10;overflow:hidden}
.x-signal i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3a7a40,#7cf08a);transition:width .08s linear}
.x-signal.lock{box-shadow:0 0 0 2px var(--phos),0 0 12px rgba(124,240,138,.7)}
.x-scanbtn{display:grid;place-items:center;font-family:var(--gba);font-size:1.15rem;letter-spacing:.06em;color:#0b1f10!important;background:radial-gradient(circle at 40% 35%,#c8ffd0,#5ac86a 70%)!important}
.x-enc-vf .x-sweep{position:absolute;left:0;right:0;top:0;height:3px;background:var(--phos);box-shadow:0 0 12px var(--phos);animation:x-sweep 1.4s ease-in-out infinite alternate}
@keyframes x-sweep{to{top:calc(100% - 3px)}}
.x-scanbar{width:min(320px,70vw);height:12px;border:2px solid #000;border-radius:6px;background:#0b1f10;overflow:hidden}
.x-scanbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3a7a40,#7cf08a);animation:x-fill 1.1s ease-out forwards}
@keyframes x-fill{to{width:100%}}
/* narrow and portrait: the keys run across the top */
@media (max-width:640px){
  .x-nav-dev{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr)}
  .x-nav-tabs{flex-direction:row;overflow-x:auto}
  .x-nav-tabs button{flex:none;padding:.5rem .6rem}
  .x-nav-tabs .x-nav-close{margin-top:0;margin-left:auto}
  .x-nav-mk{display:none}
  .x-field2{grid-template-columns:1fr}
}
@media (orientation:landscape) and (max-height:540px){
  .x-nav-dev{grid-template-columns:112px minmax(0,1fr);padding:6px 10px 10px;gap:6px}
  .x-nav-logo{font-size:1rem}
  .x-nav-tabs button{padding:.45rem .45rem;font-size:.66rem}
  .x-nav-screen{padding:8px}
  .x-sheet2{top:8px;width:min(330px,50%)}
  .x-sheet2 .x-plq{padding:10px 10px 8px}
}
.x-nav-screen::before{background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px)}
body.in-nav .x-toasts{left:max(150px,calc(env(safe-area-inset-left) + 150px));right:auto;top:auto;bottom:max(18px,env(safe-area-inset-bottom));transform:none;width:min(46vw,380px)}
@media (max-width:640px){ body.in-nav .x-toasts{left:12px;width:calc(100% - 24px)} }
/* ── NASARUS · headquarters (survey build 8) ── */
.x-year{font-family:var(--gba);font-size:clamp(1.6rem,6vw,2.6rem);letter-spacing:.5em;margin:6px 0 0 .5em;color:var(--brass-hi);text-shadow:0 0 14px rgba(226,194,125,.5)}
.x-objhint{position:absolute;left:50%;transform:translateX(-50%);top:calc(max(8px,env(safe-area-inset-top)) + 84px);margin:0;width:max-content;max-width:min(46vw,440px);text-align:center;
  font-family:var(--gba);font-size:1.05rem;line-height:1.15;color:#f2ebd8;text-shadow:0 1px 0 #000,0 0 6px #000;pointer-events:none}
.x-objhint:empty{display:none}
.cam-on .x-objhint{display:none}
.x-nav-tabs button.x-tab-hq:not(.on){color:#ffd27a;box-shadow:0 2px 0 #1a150f,inset 0 0 0 2px rgba(255,210,122,.45)}
/* telescope: zones, the drift, the headquarters ring */
.x-zspire{stroke-width:1;opacity:.35;stroke-dasharray:1 6}
.x-zone-l{font-family:var(--gba);font-size:12px;letter-spacing:.2em;opacity:.7;text-anchor:middle}
.x-drift3{fill:none;stroke:rgba(180,140,230,.3);stroke-width:1.4;stroke-dasharray:9 7}
.x-hqring{fill:none;stroke:#ffd27a;stroke-width:1.6;animation:x-hqpulse 2.4s ease-in-out infinite}
.x-hqring2{fill:none;stroke:rgba(255,210,122,.35);stroke-width:1;stroke-dasharray:3 4}
@keyframes x-hqpulse{50%{opacity:.35}}
/* the HQ page */
.x-hqhead h3 b,.x-nav-hq .x-arc h3 b{float:right;font-size:.95rem;opacity:.85}
.x-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:8px 0}
.x-stages span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:6px;border:1px solid #1d3a24;background:rgba(0,0,0,.25);text-align:center;opacity:.55}
.x-stages span.on{opacity:1;border-color:var(--phos);box-shadow:0 0 8px rgba(124,240,138,.35)}
.x-stages span.fut{border-style:dashed}
.x-stages b{font-family:var(--gba);font-size:1.3rem;color:var(--phos)}
.x-stages i{font-style:normal;font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;line-height:1.2}
.x-mats{width:100%;border-collapse:collapse;font-family:var(--gba);font-size:1.1rem;color:var(--phos)}
.x-mats th{font-size:.9rem;opacity:.7;text-align:right;font-weight:400}
.x-mats td{padding:2px 6px;border-top:1px solid rgba(124,240,138,.15);text-align:right}
.x-mats td:first-child{text-align:left}
.x-xch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-family:var(--gba);font-size:1rem;color:var(--phos)}
.x-hqlist{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.x-hqlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:8px 10px;border-radius:6px;border:1px solid #1d3a24;background:rgba(0,0,0,.22)}
.x-hqlist li.done{border-color:rgba(124,240,138,.45)}
.x-hqlist b{font-family:var(--gba);font-size:1.15rem;letter-spacing:.06em;color:var(--phos);grid-column:1}
.x-hqlist span{grid-column:1;font-family:var(--mono);font-size:.7rem;line-height:1.4;color:#d8e6d0}
.x-hqlist li > div,.x-hqlist li > em{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.x-hqlist em{font-style:normal;font-family:var(--gba);font-size:1rem;color:#ffd27a;text-align:right}
.x-hqlist em.ok{color:var(--phos)}
.x-hqlist em.dim{color:#9aa898;font-size:.9rem}
#hq-history .x-hqlist li > em{grid-column:1 / span 2;grid-row:auto;display:block;text-align:left;font-family:var(--mono);font-size:.7rem;color:#d8e6d0}
.x-records{margin:6px 0 0;padding-left:1.4em;font-family:var(--mono);font-size:.72rem;line-height:1.5;color:#d8e6d0;max-height:16em;overflow:auto}
.x-records:empty::before{content:'No records yet.';opacity:.6}
.x-stagecard{text-align:center}
.x-stagecard h2{font-family:var(--gba);font-size:2.6rem;letter-spacing:.14em;margin:4px 0}
.x-stage-nm{font-family:var(--deco);font-size:1.4rem;letter-spacing:.06em;margin:0 0 12px}
/* the crash */
.x-cockpit.impact{animation:x-impact .9s ease-out both}
@keyframes x-impact{0%{filter:brightness(4)}15%{transform:translate(-8px,6px)}30%{transform:translate(7px,-5px)}45%{transform:translate(-4px,3px)}100%{filter:none;transform:none}}
@media (prefers-reduced-motion:reduce){.x-cockpit.impact,.x-hqring{animation:none}}
@media (orientation:landscape) and (max-height:540px){ .x-objhint{top:calc(max(6px,env(safe-area-inset-top)) + 82px);font-size:.95rem} }
@media (max-width:560px){ .x-objhint{left:12px;right:12px;transform:none;top:232px;width:auto;max-width:none;text-align:left} }
.x-mats td:first-child b{font-weight:400;margin-right:.7em}
.x-mats th:not(:first-child),.x-mats td:not(:first-child){padding-left:6px;padding-right:6px;text-align:center}
.x-mats small{font-family:var(--mono);font-size:.66rem;color:#bcd0b8}
@media (max-width:640px),(orientation:landscape) and (max-height:540px){ .x-mats small{display:none} }
/* gaits: ○ / B cycles STALK → STEADY → SPRINT */
.x-b[data-gait="stalk"]{color:#9fd8ff;box-shadow:0 4px 0 #000,0 0 0 3px #5a8ab0}
.x-b[data-gait="sprint"]{color:#ffb070;box-shadow:0 4px 0 #000,0 0 0 3px #e0702a;animation:x-sprint .5s ease-in-out infinite alternate}
@keyframes x-sprint{to{box-shadow:0 4px 0 #000,0 0 0 3px #e0702a,0 0 14px rgba(255,140,60,.6)}}
@media (prefers-reduced-motion:reduce){.x-b[data-gait="sprint"]{animation:none}}
.x-death .x-paper{border-top:6px solid var(--red-hi,#c8402c)}
.x-death-h{font-family:var(--deco);font-size:1.6rem;letter-spacing:.04em;margin:6px 0 10px;color:#5a1a12}
/* THE WAY HOME */
.x-shipbar{display:block;height:12px;margin:8px 0 4px;border:2px solid #0a0a08;border-radius:6px;background:#0b1f10;overflow:hidden}
.x-shipbar i{display:block;height:100%;background:linear-gradient(90deg,#3a7a40,#7cf08a,#ffd27a);box-shadow:0 0 10px rgba(124,240,138,.6)}
.x-perk{margin:4px 0 8px;font-family:var(--mono);font-size:.72rem;line-height:1.45;color:#d8e6d0}
.x-perk b{font-family:var(--gba);font-size:1.05rem;letter-spacing:.06em;color:#ffd27a;margin-right:.4em;font-weight:400}
.x-perk.dim{opacity:.6}
/* the seven sections · numbered keys */
.x-nav-tabs .x-tab-n{font-style:normal;display:inline-block;min-width:1.3em;margin-right:.35em;padding:0 .2em;border-radius:3px;background:rgba(0,0,0,.25);text-align:center;font-size:.85em}
.x-nav-stars{padding:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#120e22,#04030a 75%)}
/* 1 · SYSTEM · the home panel */
.x-home{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;align-items:stretch}
.x-wd{display:block;text-align:left;font:inherit;color:var(--paper);padding:10px 12px;border-radius:8px;border:1px solid #1d3a24;background:linear-gradient(180deg,rgba(20,40,26,.85),rgba(8,20,12,.9));box-shadow:inset 0 0 0 1px rgba(124,240,138,.08);min-height:96px}
button.x-wd{cursor:pointer}
button.x-wd:hover,button.x-wd:focus-visible{border-color:var(--phos);box-shadow:0 0 0 2px rgba(124,240,138,.35);outline:none}
.x-wd h4{margin:0 0 6px;font-family:var(--gba);font-weight:400;font-size:1.2rem;letter-spacing:.08em;color:#ffd27a}
.x-wd h4 i{font-style:normal;display:inline-block;min-width:1.2em;margin-right:.4em;padding:0 .25em;border-radius:3px;background:#ffd27a;color:#1a140c;text-align:center}
.x-wd .x-crt{margin:0 0 4px;font-size:1.1rem}
.x-wd .x-mono{margin:0;font-size:.7rem}
.x-wd-status,.x-wd-sketch{grid-column:span 2}
.x-wd-sketch .x-sketch{display:block;width:100%;height:auto;border-radius:6px}
.x-wd-small{min-height:0}
.x-wd-team{display:flex;gap:6px;margin-bottom:4px}
.x-wd-team img{width:40px;height:40px;background:rgba(0,0,0,.3);border-radius:6px;padding:2px}
.x-meters{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.x-meter{display:grid;grid-template-columns:3.2em 1fr auto;align-items:center;gap:8px;font-family:var(--gba);font-size:1rem;color:var(--phos)}
.x-meter > i{display:block;height:9px;border:1px solid #000;border-radius:5px;background:#0b1f10;overflow:hidden}
.x-meter > i > i{display:block;height:100%;background:linear-gradient(90deg,#3a7a40,#7cf08a)}
.x-meter.low{color:#ff8a6a}.x-meter.low > i > i{background:linear-gradient(90deg,#8a2a1c,#ff6b55)}
/* 2 · HEADQUARTERS · the live map */
.x-hqmap{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:6px;border:1px solid #1d3a24;background:#04110a}
.x-live-scanner{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:6px;border:1px solid #1d3a24;background:#04110a}
.x-devroom{overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#251c12,#080706 78%)}
.x-devroom-in{width:min(980px,100%);margin:0 auto;padding:24px 16px 40px;text-align:center}
.x-devroom-in h1{font-family:var(--deco);font-size:clamp(1.8rem,5vw,3rem);letter-spacing:.08em;color:#ffd27a;margin:4px 0 8px}
.x-devroom-in>.x-mono{max-width:62ch;margin:0 auto 18px;color:#d8e6d0}
.x-devchests{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;text-align:left}
.x-devchest{padding:12px;border:1px solid #4b3924;border-radius:8px;background:linear-gradient(180deg,rgba(53,39,23,.9),rgba(17,12,8,.94));box-shadow:inset 0 0 0 1px rgba(255,210,122,.08)}
.x-devchest.claimed{border-color:#7cf08a;box-shadow:inset 0 0 0 1px rgba(124,240,138,.25)}
.x-devchest-art{position:relative;height:86px;margin:0 auto 8px}
.x-chest-sprite{position:absolute;left:50%;top:8px;width:72px;height:72px;object-fit:contain;image-rendering:pixelated;transform:translateX(-50%);opacity:.9}
.x-devsprite{display:block;width:72px;height:72px;object-fit:contain;image-rendering:pixelated;margin:0 auto 8px;background:rgba(0,0,0,.2);border-radius:6px}
.x-devchest-art .x-devsprite{position:absolute;left:50%;top:0;transform:translateX(-50%);margin:0;z-index:1}
.x-devchest h3{font-family:var(--gba);font-size:1.15rem;color:#ffd27a;margin:0 0 4px}
.x-devchest p{font-family:var(--mono);font-size:.68rem;line-height:1.4;color:#d8e6d0;min-height:3.2em;margin:0 0 10px}
.x-devchest .x-btn{width:100%}
.x-clock{font-family:var(--gba);font-weight:400}
.x-maplegend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 0;font-family:var(--gba);font-size:.95rem;color:#d8e6d0}
.x-maplegend span::before{content:'';display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px;border-radius:2px}
.x-maplegend .k-fac::before{background:#7cf08a}.x-maplegend .k-plot::before{background:#3d6a48}.x-maplegend .k-ruin::before{background:#ffb347}
.x-maplegend .k-rest::before{background:#6fd0c0}.x-maplegend .k-res::before{background:#9fe8ff;border-radius:50%}.x-maplegend .k-aet::before{background:#ff7ae0;border-radius:50%}.x-maplegend .k-you::before{background:#ff4a2a;border-radius:50%}
/* 5 · RESEARCH · unredeemed cards */
.x-card.pend{opacity:.72;outline:2px dashed #e0a030;outline-offset:-4px}
.x-card-pend{position:absolute;left:6px;right:6px;top:30px;z-index:2;padding:2px 4px;font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.06em;text-align:center;color:#1a140c;background:#ffd27a;border-radius:3px}
.x-card{position:relative}
@media (max-width:640px){ .x-wd-status,.x-wd-sketch{grid-column:auto} .x-nav-tabs .x-tab-n{display:none} }
.x-home{grid-auto-flow:row dense}
button.x-wd{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
.x-nav-tabs button{white-space:nowrap;letter-spacing:.06em}
.x-card-pend.prof{background:#7cf08a;color:#0b1f10}
.x-wd-sketch h4 b{float:right;font-size:.95rem;opacity:.85;font-weight:400}
.x-maplegend .k-ship::before{background:#e8f4ea}.x-maplegend .k-cre::before{background:#d8f05a;border-radius:50%}
.x-maplegend .k-war::before{background:#ff3a2a;border-radius:50%}.x-maplegend .k-vault::before{background:#ff6a3a}.x-maplegend .k-lm::before{background:#ffd27a}
.x-maplegend .k-you::before{background:#fff;box-shadow:0 0 0 2px #ff4a2a}
/* MASTER CANON · the full Master Codex, sealed until discovered */
.x-canon-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.x-canon-letters{display:flex;flex-wrap:wrap;gap:3px;margin:0 0 8px}
.x-canon-letters button{min-width:1.9em;padding:2px 4px;font-family:var(--gba);font-size:1rem;color:var(--phos);background:rgba(0,0,0,.3);border:1px solid #1d3a24;border-radius:3px;cursor:pointer}
.x-canon-letters button.on{background:var(--phos);color:#0b1f10}
.x-canon-list li.sealed{opacity:.55;border-style:dashed}
.x-canon-list li.sealed b{letter-spacing:.12em}
.x-canon-page{max-width:min(720px,94vw);max-height:86vh;overflow:auto;text-align:left}
.x-canon-page h2{font-family:var(--deco);margin:4px 0 6px}
.x-canon-text{font-family:var(--mono);font-size:.78rem;line-height:1.55;margin:10px 0}
.x-canon-text p{margin:0 0 8px}
.x-canon-text .dim{opacity:.55}
.x-canon-page{align-items:stretch;padding:18px 20px;border-radius:12px;background:radial-gradient(ellipse at 50% 30%,#10281a,#06120a 85%);box-shadow:0 0 0 3px #0a0a08,0 0 0 5px var(--chrome-dk,#6b6455),0 18px 50px rgba(0,0,0,.7);color:#e8f0e2}
.x-canon-page .x-man-k{color:var(--phos)}
.x-canon-page h2{color:#ffd27a;text-align:left}
/* ── INVENTORY · item icons and drag-and-drop (art pass) ── */
.x-wd-inv{grid-column:span 2}
.x-wd h4 small{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;color:#8fbf96;margin-left:.6em}
.x-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;margin:6px 0 4px}
.x-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 4px;border-radius:6px;border:1px solid #2c5a36;
  background:radial-gradient(circle at 50% 35%,rgba(124,240,138,.12),rgba(8,20,12,.9) 70%);color:var(--paper);font:inherit;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.x-slot img.x-pix{width:40px;height:40px;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.x-slot b{position:absolute;top:2px;right:4px;font-family:var(--mono);font-size:.66rem;color:#ffd27a;text-shadow:0 1px 0 #000}
.x-slot span{font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#bfe8c4}
.x-slot:hover,.x-slot:focus-visible,.x-slot.on{border-color:var(--phos);box-shadow:0 0 0 2px rgba(124,240,138,.35);outline:none}
.x-inv-detail{min-height:1.4em;margin:2px 0 0}
.x-inv-detail b{color:#ffd27a}
img.x-ico{width:20px;height:20px;image-rendering:pixelated;vertical-align:-5px;margin-right:6px}
.x-dnd-ghost{position:fixed;z-index:9999;pointer-events:none;opacity:.92;transform:scale(1.06) rotate(-2deg);box-shadow:0 10px 24px rgba(0,0,0,.55);margin:0}
.x-dnd-hole{opacity:.35;outline:2px dashed var(--phos);outline-offset:-2px}
.x-teamrow,.x-roster{touch-action:pan-y}
.x-teamrow [data-card],.x-roster [data-card]{cursor:grab;-webkit-user-select:none;user-select:none}
.x-teamrow{min-height:56px;padding:6px;border:1px dashed rgba(255,210,122,.25);border-radius:8px}
.x-dnd-hint{margin:10px 0 6px}
@media (max-width:640px){ .x-wd-inv{grid-column:auto} .x-inv{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))} }
@media (min-width:1400px){ .x-inv{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))} .x-slot img.x-pix{width:48px;height:48px} }
.x-teamrow [data-card] img,.x-roster [data-card] img,.x-slot img{pointer-events:none;-webkit-user-drag:none}
.x-slot img.x-pix,img.x-ico{background:none;border:0;padding:0;box-shadow:none}
/* ── ITEM CATALOG · bag and stores · static (AA:1936 handoff) ── */
.x-inv-tabs{display:flex;gap:6px;margin:4px 0 2px;flex-wrap:wrap}
.x-slot.unknown img.x-pix{filter:brightness(0) opacity(.45)}
.x-slot.unknown span{color:#5a7a60}
.x-catalog{max-height:none}
img.x-ico.big{width:40px;height:40px;vertical-align:middle}
.x-static::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;mix-blend-mode:screen;opacity:.22;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(124,240,138,.12) 0 2px,transparent 2px 5px);
  animation:x-staticjit .18s steps(3) infinite}
.x-static .x-nav-where::after{content:" · INTERFERENCE";color:#ff8a6a}
.x-static .x-nav-screen{animation:x-staticwob 2.6s steps(2) infinite}
@keyframes x-staticjit{0%{transform:translate(0,0)}33%{transform:translate(-2px,1px)}66%{transform:translate(1px,-1px)}100%{transform:translate(0,0)}}
@keyframes x-staticwob{0%,92%{filter:none}94%{filter:hue-rotate(40deg) contrast(1.3)}96%{filter:none;transform:translateX(2px)}98%{transform:none}}
@media (prefers-reduced-motion:reduce){ .x-static::after,.x-static .x-nav-screen{animation:none} }
/* ── VICEWORLD · portraits, dialog faces and the CUSTOMIZE PILOT screen ── */
.x-dialog .x-dface{display:none}
.x-dialog.has-face{padding-left:118px;min-height:104px}
.x-dialog.has-face .x-dface{display:block;position:absolute;left:10px;top:50%;transform:translateY(-50%);width:96px;height:96px;image-rendering:pixelated;border:3px solid #101014;border-radius:6px;box-shadow:0 3px 0 rgba(0,0,0,.4)}
@media (max-width:640px){ .x-dialog.has-face{padding-left:84px} .x-dialog.has-face .x-dface{width:64px;height:64px} }
.x-wd-pilot{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:12px;align-items:start}
.x-wd-pilot h4{grid-column:1/-1}
.x-wd-pilot .x-pilot-mini{grid-row:2/4;width:96px;height:96px;image-rendering:pixelated;border:3px solid #101014;border-radius:6px}
.x-pilot{display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}
.x-pilot-in{width:min(1100px,100%);max-height:100%;overflow:auto;background:radial-gradient(ellipse at 30% 0%,#1f2a22,#0b100c 75%);border:2px solid #2c5a36;border-radius:14px;padding:14px;color:var(--paper)}
.x-pilot-top{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-bottom:10px}
.x-pilot-top b{font-family:var(--gba);font-size:1.6rem;letter-spacing:.1em;color:#ffd27a}
.x-pilot-body{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:16px}
.x-pilot-prev{display:flex;flex-direction:column;gap:8px;align-items:center}
.x-pilot-por{width:256px;height:256px;max-width:100%;image-rendering:pixelated;border:4px solid #101014;border-radius:10px;box-shadow:0 6px 0 rgba(0,0,0,.45)}
.x-pilot-field{width:256px;max-width:100%;height:auto;image-rendering:pixelated;background:linear-gradient(#2f5a2c,#3f7c33);border-radius:8px;border:2px solid #101014}
.x-pilot-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.x-pilot-grid h5{margin:10px 0 6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:#8fbf96}
.x-popts{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.x-popt{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px;border-radius:8px;border:2px solid #23402a;background:#0c160e;color:var(--paper);font:inherit;cursor:pointer}
.x-popt img{width:64px;height:64px;image-rendering:pixelated;border-radius:4px}
.x-popt span{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em}
.x-popt.on,.x-popt:hover,.x-popt:focus-visible{border-color:var(--phos);box-shadow:0 0 0 2px rgba(124,240,138,.35);outline:none}
.x-swatches{display:flex;flex-wrap:wrap;gap:8px}
.x-swatch{width:36px;height:36px;border-radius:8px;border:3px solid #101014;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.x-swatches.big .x-swatch{width:64px;height:64px}
.x-swatch.on{outline:3px solid var(--phos);outline-offset:2px}
@media (max-width:760px){ .x-pilot-body{grid-template-columns:1fr} .x-pilot-por{width:192px;height:192px} .x-popts{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))} .x-popt img{width:52px;height:52px} }
/* ── the suit adapts · custom colours ── */
.x-atmo{margin:2px 0 4px}
.x-atmo b{color:#ffd27a}
.x-swatch-pick{position:relative;display:inline-block;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);overflow:hidden}
.x-swatch-pick input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer;border:0;padding:0}

/* ── CHAPTER TABS · long AstraNav panels read one chapter at a time (Journal, Research, Codex, Companions) ── */
.x-ch-off{display:none!important}
.x-chaptabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px;padding:8px 0 10px;border-bottom:1px dashed rgba(216,207,180,.35);position:sticky;top:0;z-index:3;background:inherit}
.x-chaptabs.many{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.x-chaptab{flex:0 0 auto;display:inline-flex;align-items:baseline;gap:8px;min-height:36px;padding:7px 12px;border:1px solid rgba(216,207,180,.45);border-radius:3px;
  background:rgba(0,0,0,.25);color:#d8cfb4;font:inherit;font-family:var(--type,monospace);font-size:.78rem;letter-spacing:.06em;cursor:pointer;text-align:left}
.x-chaptab b{font-weight:400;font-size:.7rem;opacity:.75}
.x-chaptab:hover,.x-chaptab:focus-visible{border-color:#e8b830;color:#fff;outline:none}
.x-chaptab.on{background:#d8cfb4;color:#1e1e24;border-color:#d8cfb4}
.x-chaptab.on b{opacity:.85}
.x-nav-screen > .x-chaptabs{background:#081a0f;margin:-12px -12px 12px;padding:10px 12px}
@media (max-width:560px){ .x-nav-screen > .x-chaptabs{margin:-8px -8px 10px;padding:8px} }
.x-codex-in > .x-chaptabs{position:static}
@media (max-width:560px){ .x-chaptabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch} .x-chaptab{font-size:.72rem;padding:6px 10px} }
/* the Journal's chapters */
.x-jr-head{margin-bottom:4px}
.x-jch{margin-bottom:14px}
.x-jch > h3{font-family:var(--deco,serif);letter-spacing:.08em;font-size:1rem;margin:0 0 10px;display:flex;justify-content:space-between;gap:10px;color:var(--ink)}
.x-jch > h3 b{font-family:var(--type,monospace);font-weight:400;font-size:.8rem;color:var(--red)}
.x-jch .x-mono.light{color:#6b5d48}
.x-jr-next{margin:6px 0 14px;padding:10px 12px;border-left:3px solid var(--red)}
.x-jr-now{margin:2px 0 6px;font-family:var(--type,monospace);font-size:.95rem}
.x-jr-main{margin:0;font-family:var(--deco,serif);letter-spacing:.06em;font-size:.82rem;color:var(--red)}
.x-jr-main.done{text-decoration:line-through}
.x-jr-logs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.x-jr-logs button{width:100%;display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 10px;border:1px solid rgba(60,50,30,.35);background:rgba(255,255,255,.25);color:var(--ink);font:inherit;cursor:pointer;text-align:left}
.x-jr-logs button:hover,.x-jr-logs button:focus-visible{border-color:var(--red);outline:none}
.x-jr-logs b{font-family:var(--deco,serif);letter-spacing:.06em;font-weight:400;font-size:.85rem}
.x-jr-logs em{font-style:normal;font-family:var(--type,monospace);font-size:.8rem}
.x-jr-logs li.now button{border-color:var(--red)}
.x-jr-logs li.done b{text-decoration:line-through;color:#8b7d63}
.x-jr-bar{grid-column:1/3;height:4px;background:rgba(60,50,30,.18);display:block}
.x-jr-bar i{display:block;height:100%;background:var(--red)}

/* ── SANDBOX · □ MOVE: grab, drag, set ── */
.x-ab .x-sq{width:54px;height:54px;font-size:1.25rem;background:radial-gradient(circle at 40% 35%,#4a5a6a,#22303c 70%);color:var(--paper);transform:translateY(8px)}
.x-ab .x-sq.on{background:radial-gradient(circle at 40% 35%,#8fe0a0,#2f7a44 70%);color:#08140c}
@media (max-width:560px){ .x-ab{gap:10px} .x-ab .x-sq{width:48px;height:48px} }

/* ── STATIONS · each structure and machine has its own screen ── */
.x-station{place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.x-station-in{width:min(860px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%,#10281a,#06120a 85%);box-shadow:inset 0 0 0 3px var(--chrome,#b9b3a0),0 12px 44px rgba(0,0,0,.75);color:#d8cfb4}
.x-station-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;background:linear-gradient(180deg,#f2ebd8,#e2d6b8);color:#2a2118;border-bottom:3px solid #1c1626}
.x-station-top img{width:72px;height:72px;object-fit:contain;image-rendering:pixelated}
.x-station-top h2{margin:0;font-family:var(--deco,serif);letter-spacing:.1em;font-size:1.25rem}
.x-station-top .x-man-k{margin:0;color:#9b2a1f}
.x-station-top .x-mono{margin:2px 0 0;color:#5a4a36}
.x-station-top .x-btn{align-self:start}
.x-station-body{overflow:auto;padding:12px 14px 16px;min-height:0}
.x-station-body > details,.x-station-body > section{margin-bottom:12px}
.x-station-body .x-hqlist li > img.x-ico,.x-nav-inventory .x-hqlist li > img.x-ico{grid-row:1/3;width:32px;height:32px;margin-right:4px}
.x-station-body .x-hqlist li:has(> img.x-ico),.x-nav-inventory .x-hqlist li:has(> img.x-ico){grid-template-columns:auto minmax(0,1fr) auto}
.x-rocket-btns{display:flex;gap:10px;margin:0 0 12px}
.x-rocket-map{position:relative;min-height:340px;height:min(56vh,480px);border-radius:10px;overflow:hidden}
.x-rocket-map:empty{display:none}
@media (max-width:560px){ .x-station-top{grid-template-columns:auto minmax(0,1fr);padding:10px 12px} .x-station-top img{width:48px;height:48px} .x-station-top .x-btn{grid-column:1/-1;justify-self:end} .x-rocket-map{min-height:300px} }

/* ── THE COCKPIT · the ship's own console, aboard ── */
.x-cockpit-dev{background:linear-gradient(180deg,#d9dde0,#9aa2a8 40%,#6e767c)}
.x-cockpit .x-nav-logo{background:linear-gradient(180deg,#3a74d8,#24508f);text-shadow:0 1px 0 #0a1a3a}
.x-cockpit-tabs button{font-family:var(--deco,serif);letter-spacing:.08em}
.x-shipstat{margin-top:6px}

/* ── INVENTORY tab ── */
.x-nav-inventory .x-inv{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.x-station-body .x-hqlist li:has(> img.x-ico) > b,.x-station-body .x-hqlist li:has(> img.x-ico) > span,
.x-nav-inventory .x-hqlist li:has(> img.x-ico) > b,.x-nav-inventory .x-hqlist li:has(> img.x-ico) > span{grid-column:2}
.x-station-body .x-hqlist li:has(> img.x-ico) > div,.x-nav-inventory .x-hqlist li:has(> img.x-ico) > div{grid-column:3;grid-row:1/3}

/* ── UX TIGHTENING (Survey 10.10) ── */
/* what A will do, named above the buttons */
.x-aprompt{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:calc(max(22px,env(safe-area-inset-bottom)) + 104px);margin:0;max-width:min(60vw,420px);
  padding:6px 12px;border-radius:4px;background:rgba(239,230,208,.94);color:#2a2118;font-family:var(--type,monospace);font-size:.8rem;letter-spacing:.04em;
  box-shadow:0 2px 0 #1c1626;pointer-events:none;text-align:right}
body.lefty .x-aprompt{right:auto;left:max(14px,env(safe-area-inset-left));text-align:left}
.cam-on .x-aprompt{display:none}
.x-ab .x-sq.dim{opacity:.55}
.x-ab .x-a small{max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the cockpit's touchpad stand-in */
.x-ck-an{border:0;cursor:pointer;font:inherit}
/* the System screen's inventory glance */
.x-wd-invsum{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.x-slot.mini{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:1px solid rgba(216,207,180,.3);border-radius:4px;background:rgba(0,0,0,.2)}
.x-slot.mini img{width:24px;height:24px;image-rendering:pixelated}
.x-slot.mini b{font-size:.75rem}
@media (max-width:560px){ .x-aprompt{bottom:calc(max(22px,env(safe-area-inset-bottom)) + 92px);font-size:.72rem} }
/* a habitat variant's colours, on its card */
.x-card-cols{display:flex;align-items:center;gap:6px;margin:4px 0;font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.1em}
.x-card-cols i{display:inline-block;width:16px;height:16px;border:2px solid #1c1626;border-radius:2px}
/* the rocket's fuel tank */
.x-hqlist li.x-fuel-row > i.x-fuelbar{grid-column:1/-1;grid-row:3;display:block;width:100%;height:8px;margin-top:6px;border-radius:4px;background:rgba(0,0,0,.4);overflow:hidden}
.x-hqlist li.x-fuel-row > i.x-fuelbar > i{display:block;height:100%;background:linear-gradient(90deg,#c8843c,#ffd23a)}

/* ── SHIP LEVELS · PILOT LEVEL · AETHREN UPGRADES ── */
.x-lvbar{display:block;height:10px;margin:6px 0 10px;border-radius:5px;background:rgba(0,0,0,.45);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(216,207,180,.25)}
.x-lvbar > i{display:block;height:100%;background:linear-gradient(90deg,#2f7a44,#8fe0a0)}
.x-lvbar.thin{height:6px;margin:4px 0}
.x-shiplv h4{margin:12px 0 0;font-family:var(--deco,serif);letter-spacing:.08em;font-weight:400;color:#d8cfb4;display:flex;justify-content:space-between}
.x-shiplv h4 small{font-family:var(--mono,monospace);color:#8fe0a0}
.x-lvpips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:6px 0 8px}
.x-lvpips span{display:flex;flex-direction:column;gap:2px;padding:8px;border-radius:6px;border:1px solid #1d3a24;background:rgba(0,0,0,.25);color:#8a8270}
.x-lvpips span b{font-family:var(--deco,serif);font-size:1.3rem;font-weight:400;color:#8a8270}
.x-lvpips span i{font-style:normal;font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.08em}
.x-lvpips span em{font-style:normal;font-family:var(--mono,monospace);font-size:.55rem;opacity:.8}
.x-lvpips span.on{border-color:rgba(124,240,138,.6);color:#cfe8c8}
.x-lvpips span.on b{color:#8fe0a0}
.x-lvpips span.next{border-color:#e8b830;color:#e8d8a8}
.x-lvpips span.next b{color:#e8b830}
.x-gate li span .x-lvbar{margin:4px 0 0}
@media (max-width:560px){ .x-lvpips{grid-template-columns:repeat(5,minmax(52px,1fr));overflow-x:auto} .x-lvpips span em{display:none} }

/* ── CAVE DUNGEONS · the side-scrolling cave ── */
.x-side .x-zone .x-zw{color:#c9a8ff}

/* ── ASTRABLASTER MK1 · the charge meter on the HUD ── */
.x-weapon{display:grid;grid-template-columns:auto minmax(60px,1fr) auto;gap:4px 8px;align-items:center;margin:6px 0 0;padding:6px 8px;border-radius:4px;background:rgba(0,0,0,.45);color:#ffe8b0;font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.08em}
.x-weapon[hidden]{display:none}
.x-weapon .x-wbar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.x-weapon .x-wbar > i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#c8843c,#ffd23a)}
.x-weapon span{white-space:nowrap}

/* the utility button (△) and the flight state: a smaller face button beside □ */
.x-ab .x-tri{width:48px;height:48px;font-size:1.1rem;background:radial-gradient(circle at 40% 35%,#6a4a7a,#2e2038 70%);color:var(--paper);transform:translateY(14px)}
.x-ab .x-tri small{font-size:.42rem}
.x-ab .x-sq.on{box-shadow:0 4px 0 #000,0 0 0 3px #8fe0a0}
@media (max-width:560px){ .x-ab .x-tri{width:44px;height:44px} }

/* ── MODULAR HUD · six independent modules over the gameplay. The old status bar is retired. ── */
.x-mods{position:absolute;inset:0;pointer-events:none;z-index:4}
.x-mod{position:absolute;pointer-events:none;background:rgba(10,9,14,.74);border:1px solid #000;border-radius:6px;padding:6px 8px;color:#e8dcc0;font-family:var(--mono);box-sizing:border-box}
.x-mod h4{margin:0 0 4px;font-family:var(--deco);font-weight:400;font-size:.7rem;letter-spacing:.1em;color:var(--brass-hi)}
.x-mod h4 b,.x-acount{font-family:var(--mono);color:var(--amber);font-size:.66rem}
.x-mod span{font-size:.56rem;letter-spacing:.12em;color:#a99f86}
.x-aethren{left:10px;top:12px;width:176px;min-height:44px}
.x-party{display:flex;flex-direction:column;gap:4px}
.x-pm{display:flex;gap:6px;align-items:center}
.x-pm div{flex:1;min-width:0}
.x-pm span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.58rem;color:#e8dcc0}
.x-vital{width:134px;top:12px}
.x-vital[data-mod="health"]{right:12px}
.x-vital[data-mod="air"]{right:154px}
.x-vital[data-mod="suit"]{right:296px}
.x-vbar{display:block;height:7px;margin:3px 0;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.x-vbar>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3a8a5a,#8fe0a0);transition:width .4s}
.x-vital[data-mod="air"] .x-vbar>i{background:linear-gradient(90deg,#2f6a9a,#8fd0ff)}
.x-vital[data-mod="suit"] .x-vbar>i{background:linear-gradient(90deg,#8a6a20,#ffd36a)}
.x-vital[data-mod="health"] .x-vbar>i{background:linear-gradient(90deg,#8a2a2a,#ff8a7a)}
.x-mod.low .x-vbar>i{background:#c0392b}
.x-vnum{display:block;font-family:var(--mono);font-size:.7rem;color:#e8dcc0;text-align:right}
.x-utilmod{left:10px;bottom:176px;width:232px}
.x-utilmod .x-weapon{margin:0;background:none;padding:0}
.x-utilmod em{display:block;font-style:normal;font-size:.56rem;color:var(--brass-hi);letter-spacing:.08em;margin-bottom:3px}
.x-minimapmod{right:12px;bottom:176px;width:152px}
.x-minimapmod .x-zn{font-size:.6rem;color:var(--brass-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-minimapmod .x-zw{display:block;font-size:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.x-minimap{display:block;width:100%;height:auto;margin-top:4px;border:1px solid #000;image-rendering:pixelated}
.x-nav-btn,.x-hudedit,.x-hudreset{position:absolute;top:8px;pointer-events:auto;background:var(--steel-3);border:2px solid #000;color:var(--brass-hi);font-family:var(--gba);font-size:.9rem;letter-spacing:.1em;height:34px;padding:0 .7rem;border-radius:4px;cursor:pointer}
.x-nav-btn{left:50%;transform:translateX(-50%);font-size:1.1rem;color:var(--phos)}
.x-hudedit{left:50%;transform:translateX(-50%);top:46px}
.x-hudedit.on{background:#ffd36a;color:#1a140c}
.x-hudreset{left:50%;transform:translateX(-50%);top:84px}
.x-mods.editing .x-mod{pointer-events:auto;cursor:move;outline:2px dashed #ffd36a;outline-offset:2px}
.x-mods.editing .x-mod::before{content:'⠿';position:absolute;top:1px;right:5px;color:#ffd36a;font-size:.8rem}
.cam-on .x-mods{display:none}
@media (max-width:560px){
  .x-aethren{width:132px}
  .x-vital{width:112px}
  .x-vital[data-mod="health"]{right:8px;top:12px}
  .x-vital[data-mod="air"]{right:8px;top:72px}
  .x-vital[data-mod="suit"]{right:8px;top:132px}
  .x-utilmod{width:184px;bottom:150px}
  .x-minimapmod{width:112px;bottom:150px}
  .x-nav-btn{left:auto;right:10px;top:auto;bottom:auto;transform:none;top:190px}
  .x-hudedit,.x-hudreset{top:190px;left:10px}
  .x-hudedit{left:70px}
  .x-hudreset{left:132px}
}
@media (orientation:landscape) and (max-height:540px) and (min-width:561px){
  .x-aethren{width:150px}
  .x-vital{width:96px;padding:4px 6px}
  .x-vital[data-mod="health"]{right:8px}
  .x-vital[data-mod="air"]{right:110px}
  .x-vital[data-mod="suit"]{right:212px}
  .x-vnum{font-size:.62rem}
  .x-minimapmod{width:104px;bottom:150px}
  .x-utilmod{width:196px;bottom:150px}
}
@media (orientation:landscape) and (max-height:540px) and (min-width:561px) and (max-width:759px){
  .x-vital[data-mod="suit"]{right:8px;top:68px}
  .x-minimapmod{width:80px;bottom:140px}
  .x-minimapmod .x-zw{display:none}
}
.x-noutil{margin:0;font-size:.56rem;letter-spacing:.08em;color:#a99f86;line-height:1.3}
.x-noutil[hidden]{display:none}