/* ---------- SPACE MODE ---------- */
#sp-hud{position:absolute;inset:0;pointer-events:none}
#sp-hud button,#sp-hud canvas,#sp-hud .click,#sp-stick,#sp-lever{pointer-events:auto}
.sp-top{position:absolute;top:calc(8px + var(--safeT));left:calc(10px + var(--safeL));right:calc(10px + var(--safeR));display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.sp-loc{background:var(--panel);border:1px solid var(--line);padding:6px 12px;display:flex;flex-direction:column;gap:3px;min-width:150px}
.sp-loc b{text-transform:uppercase;letter-spacing:.14em;font-size:14px;color:#f1ede4}
.sp-loc small{font-size:11px;color:var(--dim);letter-spacing:.06em;display:flex;gap:8px;flex-wrap:wrap}
.sp-loc small b,.sp-res b{color:var(--yellow);font-size:12px}
.chip{align-self:flex-start;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:1px 7px;border:1px solid currentColor}
.chip.neutral{color:#5fd3c0}.chip.combat{color:#ff5a3a;animation:blink 1s steps(2) infinite}.chip.victory{color:var(--green)}.chip.defeat{color:#999}
@keyframes blink{50%{opacity:.45}}
.sp-orders{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.sp-orders button{min-height:40px;padding:0 10px;font-size:12px;letter-spacing:.08em;display:flex;align-items:center;gap:6px}
.sp-orders button i{font-style:normal;color:var(--yellow);font-size:15px}
.sp-orders button.sel{background:#2c3a22;border-color:var(--green);color:#cfeeb0}
.sp-topr{display:flex;gap:6px}.sp-topr button{min-width:44px;padding:0 12px}
.sp-order-line{position:absolute;top:calc(60px + var(--safeT));left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#cfeeb0;text-shadow:0 1px 2px #000;white-space:nowrap}
.sp-fleet{position:absolute;left:calc(10px + var(--safeL));top:calc(84px + var(--safeT));display:flex;flex-direction:column;gap:5px;width:190px}
.sp-fleet .pill{min-height:40px;height:auto;padding:4px 8px;display:grid;grid-template-columns:18px 1fr;grid-template-rows:auto 4px;gap:2px 6px;text-align:left;letter-spacing:.04em;text-transform:none;font-size:12.5px}
.sp-fleet .pill .n{grid-row:1/3;color:var(--yellow);font-size:14px;align-self:center}
.sp-fleet .pill .nm{display:flex;flex-direction:column}.sp-fleet .pill small{font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.sp-fleet .pill .hp{grid-column:2;height:4px;background:#000}.sp-fleet .pill .hp i{display:block;height:100%;background:var(--green);transition:width .2s}
.sp-fleet .pill.sel{border-color:var(--yellow);background:#3d3420}.sp-fleet .pill.dead{opacity:.35}
.sp-ctx{position:absolute;right:calc(10px + var(--safeR));top:calc(64px + var(--safeT));display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.sp-ctx button{min-height:42px;font-size:12.5px}
.sp-ctx button.hot{background:var(--yellow);color:#151209;border-color:#ffd25a}
.sp-target{position:absolute;left:50%;top:calc(88px + var(--safeT));transform:translateX(-50%);background:var(--panel);border:1px solid var(--line);padding:6px 12px;min-width:220px;text-align:center}
.sp-target b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.sp-target .bar{height:6px;background:#000;margin:4px 0}.sp-target .bar i{display:block;height:100%;background:#ff5a3a}
.sp-target.player .bar i{background:var(--blue)}.sp-target.neutral .bar i{background:#5fd3c0}
.sp-target small{font-size:11px;color:var(--dim)}
#sp-reticle{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid rgba(255,214,103,.55);border-radius:50%}
#sp-reticle i{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:#ffd667;border-radius:50%}
#sp-lead{position:absolute;width:22px;height:22px;margin:-11px;border:2px solid #ff5a3a;transform:rotate(45deg);display:none}
#sp-lead.on{display:block}
#sp-arrow{position:absolute;color:#ff5a3a;font-size:26px;display:none;text-shadow:0 0 6px #000}
#sp-radar{position:absolute;left:50%;bottom:calc(10px + var(--safeB));transform:translateX(-50%);width:150px;height:150px;border-radius:50%;cursor:crosshair}
.sp-pilot{position:absolute;left:calc(208px + var(--safeL));top:calc(84px + var(--safeT));display:flex;gap:8px;align-items:center;pointer-events:none}
.sp-pilot .face{position:relative;width:46px;height:46px;border-radius:50%;background:#f2c33a;border:3px solid #e0661c;box-shadow:inset 0 -8px 0 rgba(0,0,0,.15);transition:background .3s}
.sp-pilot .eyes{position:absolute;left:10px;right:10px;top:15px;height:6px;background:radial-gradient(circle,#1a1a1a 2.5px,transparent 3px) 0 0/50% 100% repeat-x}
.sp-pilot .mouth{position:absolute;left:15px;right:15px;top:28px;height:4px;border-radius:0 0 6px 6px;background:#3a1a10}
.sp-pilot .bag{position:absolute;left:12px;top:24px;width:22px;height:20px;background:#d8c9a8;border:1px solid #8a7a5a;border-radius:2px 2px 6px 6px;display:none}
.sp-pilot .bubble{font-size:13px;letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:10px;display:none}
.sp-pilot.sick .face{background:#9fd36a;animation:queasy .9s ease-in-out infinite}
.sp-pilot.sick .mouth{height:8px;top:27px;border-radius:50%}
.sp-pilot.sick .bubble{display:block}
@keyframes queasy{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(2px)}}
.reduced .sp-pilot.sick .face{animation:none}
.sp-weld{position:absolute;left:50%;top:38%;transform:translateX(-50%);text-align:center;background:rgba(10,20,26,.75);border:1px solid #7cc7ff;padding:8px 16px;color:#cfeaff;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.sp-weld b{display:block;font-size:30px;color:#fff;letter-spacing:.06em}
.sp-weld .bar{height:5px;background:#000;margin-top:6px}.sp-weld .bar i{display:block;height:100%;background:#7cc7ff}
#sp-stick{position:absolute;left:calc(22px + var(--safeL));bottom:calc(22px + var(--safeB));width:150px;height:150px;border-radius:50%;background:rgba(20,20,18,.45);border:2px solid rgba(255,255,255,.18);touch-action:none}
#sp-stick i{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:rgba(242,169,0,.6);border:2px solid #ffd25a}
#sp-stick small{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:10px;letter-spacing:.2em;color:var(--dim)}
#sp-stick.desk{width:110px;height:110px;opacity:.75}#sp-stick.desk i{width:44px;height:44px;margin:-22px}
#sp-lever{position:absolute;right:calc(18px + var(--safeR));bottom:calc(22px + var(--safeB));width:70px;height:210px;display:flex;flex-direction:column;align-items:center;gap:4px;touch-action:none}
#sp-lever small{font-size:10px;letter-spacing:.2em;color:var(--dim)}
#sp-lever b{font-size:14px;color:var(--yellow)}
#sp-lever .track{position:relative;flex:1;width:34px;background:#141412;border:2px solid rgba(255,255,255,.2);background-image:repeating-linear-gradient(0deg,transparent 0 17px,rgba(255,255,255,.12) 17px 19px)}
#sp-lever .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(242,169,0,.15),rgba(242,169,0,.5))}
#sp-lever .track i{position:absolute;left:-14px;right:-14px;height:28px;background:var(--yellow);border:2px solid #151209;box-shadow:0 2px 0 #0008}
.sp-btns{position:absolute;right:calc(100px + var(--safeR));bottom:calc(22px + var(--safeB));display:grid;grid-template-columns:repeat(3,auto);grid-template-rows:auto auto;gap:8px;align-items:end}
.sp-round{width:62px;height:62px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;line-height:1}
.sp-round small{font-size:9px;letter-spacing:.14em;margin-top:2px}
.sp-fire{width:96px;height:96px;padding:0;background:#7a1c12;border-color:#ff5a3a;color:#fff;font-size:18px;grid-row:1/3;grid-column:2;align-self:center}
.sp-fire.on{background:#c0301e}
#sp-tgt{grid-column:3;grid-row:1}#sp-dodgeR{grid-column:3;grid-row:2}#sp-dodgeL{grid-column:1;grid-row:2}
.sp-lab{position:absolute;left:0;top:0;margin:-34px 0 0 -40px;width:80px;text-align:center;pointer-events:auto;cursor:pointer;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 2px #000}
.sp-lab b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-lab .bar{display:block;height:3px;background:rgba(0,0,0,.7);margin:2px 10px}.sp-lab .bar i{display:block;height:100%}
.sp-lab small{display:block;font-size:10px;color:#ffd667}
.sp-lab.enemy{color:#ff8a7a}.sp-lab.enemy .bar i{background:#ff4a3a}
.sp-lab.player{color:#9fd6ff}.sp-lab.player .bar i{background:#58b6ff}
.sp-lab.neutral{color:#8fe8d8}.sp-lab.neutral .bar i{background:#5fd3c0}
.sp-lab.coupling{color:#ffb347;margin:-12px 0 0 -40px}.sp-lab.coupling b::before{content:'◆ '}.sp-lab.coupling .bar i{background:#ff7a2a}
.sp-lab.sel{color:#fff}.sp-lab.sel b{outline:2px solid #ff5a3a;outline-offset:2px}
.sp-lab.far b,.sp-lab.far small{opacity:.55}.sp-lab.far{font-size:9px}
#sp-labels{position:fixed;inset:0;overflow:hidden;pointer-events:none}
#sp-cockpit{position:fixed;inset:0;pointer-events:none}
#sp-cockpit .cp-frame{position:absolute;inset:0;background:
  linear-gradient(100deg,#141210 0 7%,transparent 7.3%) ,linear-gradient(260deg,#141210 0 7%,transparent 7.3%),
  linear-gradient(0deg,#1a1814 0 17%,#2a2620 17% 18%,transparent 18.4%)}
#sp-cockpit .cp-dash{position:absolute;left:50%;bottom:calc(172px + var(--safeB));transform:translateX(-50%);display:flex;gap:18px;color:#3cbf7a;font-size:15px;letter-spacing:.14em}
#sp-warp{position:fixed;inset:0;background:radial-gradient(circle,rgba(0,0,0,0) 0,rgba(4,6,10,.9) 70%);display:flex;align-items:center;justify-content:center}
#sp-warp .streaks{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg,rgba(200,220,255,.0) 0 3deg,rgba(200,220,255,.35) 3deg 3.4deg);animation:warp 1.6s ease-in forwards;mask:radial-gradient(circle,transparent 8%,#000 60%);-webkit-mask:radial-gradient(circle,transparent 8%,#000 60%)}
#sp-warp b{position:relative;font-size:clamp(22px,4vw,42px);letter-spacing:.3em;text-transform:uppercase;color:#e6efff}
@keyframes warp{0%{transform:scale(.4) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(2.4) rotate(12deg);opacity:.9}}
.reduced #sp-warp .streaks{animation:none;opacity:.4}
/* hub & panels */
#sp-hub{position:absolute;inset:0;display:flex;justify-content:space-between;padding:calc(20px + var(--safeT)) calc(20px + var(--safeR)) calc(20px + var(--safeB)) calc(4vw + var(--safeL));background:linear-gradient(90deg,rgba(6,7,9,.85) 0,rgba(6,7,9,.4) 34%,rgba(6,7,9,0) 58%)}
.sp-hub-l{display:flex;flex-direction:column;justify-content:center;gap:12px;width:min(330px,86vw)}
.logo.sm{font-size:clamp(34px,5.4vw,64px)}
.sp-res{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
#sp-hub-nav{display:flex;flex-direction:column;gap:8px}
#sp-hub-nav button{height:48px;text-align:left;font-size:15px}
#sp-hub-nav button small{float:right;color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:none;margin-top:2px}
.sp-hub-info{align-self:flex-end;max-width:min(360px,40vw);background:var(--panel);border:1px solid var(--line);padding:12px 14px;font-size:13px;line-height:1.45;color:#cfcac0}
.sp-hub-info b{color:var(--yellow)}
.sp-card{max-width:min(920px,96vw)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.sp-item{background:#1c1b18;border:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.sp-item b{text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:#f1ede4}
.sp-item small{color:#bdb8ad;font-size:12px;line-height:1.35}
.sp-item .cost{color:var(--yellow);font-size:12.5px;letter-spacing:.08em}
.sp-item button{min-height:40px;font-size:12.5px}
.sp-item.on{border-color:var(--yellow)}
.sp-dest{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.sp-dest button{height:auto;min-height:110px;text-align:left;padding:12px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-transform:none;letter-spacing:.02em}
.sp-dest button b{text-transform:uppercase;letter-spacing:.1em;font-size:15px}
.sp-dest button small{font-weight:400;color:#bdb8ad;font-size:12px;line-height:1.3}
.sp-dest button em{font-style:normal;color:var(--yellow);font-size:12px;letter-spacing:.1em}
.sp-train{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap;margin:8px 0}
.sp-car{min-width:110px;background:#26241f;border:1px solid var(--line);padding:8px;display:flex;flex-direction:column;gap:4px;font-size:12px}
.sp-car b{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.sp-car .row button{min-height:34px;padding:0 8px;font-size:12px}
.sp-link{align-self:center;color:var(--orange);font-size:18px}
.sp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:10px 0}
.sp-stats div{background:#1c1b18;border:1px solid var(--line);padding:8px 10px;font-size:12px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.sp-stats div b{display:block;color:#f1ede4;font-size:20px;letter-spacing:.02em}
.sp-help{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px;line-height:1.35}
.sp-help b{color:var(--yellow);white-space:nowrap}
@media (pointer:fine){#sp-dodgeL,#sp-dodgeR,#sp-tgt{opacity:.8}}
@media (max-width:900px){.sp-orders button{font-size:0;padding:0 10px;min-width:44px}.sp-orders button i{font-size:18px}.sp-fleet{width:150px}.sp-pilot{left:calc(168px + var(--safeL))}}
/* phones, landscape */
@media (max-height:520px){
  .sp-fleet{display:none}.sp-order-line{display:none}.sp-hub-info{display:none}
  .sp-loc small{display:none}.sp-loc{padding:4px 10px}
  .sp-target{top:calc(56px + var(--safeT));min-width:200px;padding:4px 10px}
  #sp-radar{width:96px;height:96px;bottom:auto;top:calc(60px + var(--safeT));left:auto;right:calc(10px + var(--safeR));transform:none}
  .sp-ctx{left:calc(10px + var(--safeL));right:auto;top:calc(76px + var(--safeT));align-items:flex-start}
  .sp-ctx button{min-height:38px;font-size:11px;padding:0 12px}
  .sp-pilot{left:auto;right:calc(116px + var(--safeR));top:calc(62px + var(--safeT))}.sp-pilot .face{width:38px;height:38px}
  #sp-stick{width:124px;height:124px}#sp-lever{height:150px}
  .sp-btns{right:calc(92px + var(--safeR))}.sp-fire{width:84px;height:84px}.sp-round{width:54px;height:54px}
  #sp-cockpit .cp-dash{bottom:calc(16px + var(--safeB))}
}
/* phones, portrait */
@media (max-width:560px) and (orientation:portrait){
  .sp-orders{position:absolute;top:calc(60px + var(--safeT));left:50%;transform:translateX(-50%);flex-wrap:nowrap}
  .sp-loc{min-width:0;padding:4px 8px}.sp-loc small{display:none}.sp-topr button{padding:0 10px}
  .sp-order-line{top:calc(108px + var(--safeT));font-size:11px}
  .sp-target{top:calc(128px + var(--safeT));min-width:180px}
  #sp-radar{width:100px;height:100px;bottom:auto;top:calc(196px + var(--safeT));left:auto;right:calc(10px + var(--safeR));transform:none}
  .sp-ctx{top:calc(306px + var(--safeT))}.sp-ctx button{min-height:38px;font-size:11px}
  .sp-pilot{left:calc(10px + var(--safeL));top:calc(196px + var(--safeT))}
  .sp-fleet{top:auto;bottom:calc(330px + var(--safeB));width:140px}.sp-fleet .pill{min-height:32px;font-size:11px}
  .sp-btns{bottom:calc(150px + var(--safeB));right:calc(96px + var(--safeR))}.sp-fire{width:84px;height:84px}.sp-round{width:54px;height:54px}
  #sp-stick{width:124px;height:124px}#sp-lever{height:190px}
  #sp-cockpit .cp-dash{bottom:calc(120px + var(--safeB))}
  .sp-hub-info{display:none}
}