:root {
  --bg: #0b1526; --panel: rgba(13, 28, 50, .92); --panel2: rgba(20, 42, 72, .9); --line: #2b5f8a; --accent: #4fc3ff;
  --gold: #ffb63a; --text: #dbe9f7; --dim: #8ea6bf; --good: #6bff9a; --bad: #ff5a4f;
  --modal-narrow: 440px; --modal-standard: 620px; --modal-wide: 960px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--text); font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
.dim { color: var(--dim); }
.good { color: var(--good); } .badc { color: var(--bad); }
.glass { background: linear-gradient(180deg, rgba(20, 44, 76, .78), rgba(10, 22, 40, .82)); border: 1px solid var(--line); border-radius: 6px; backdrop-filter: blur(3px); }

/* ---------- buttons ---------- */
.btn { background: rgba(28, 58, 96, .9); color: var(--text); border: 1px solid var(--line); padding: 9px 18px; font-size: 15px; border-radius: 4px; letter-spacing: .3px; transition: .12s; }
.btn:hover:not(:disabled) { background: rgba(50, 100, 160, .95); border-color: var(--accent); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #2a78b8, #1c5a90); border-color: var(--accent); font-weight: 600; }
.btn.big { font-size: 18px; padding: 12px 26px; }
.btn.sm { padding: 5px 11px; font-size: 13px; }
.btn.bad { border-color: #8a3a34; color: #ffb0a8; }
.row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }

/* ---------- toasts / fade ---------- */
#toasts { position: absolute; top: calc(70px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 60; width: min(90vw, 640px); }
.toast { background: rgba(10, 24, 44, .92); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 8px 16px; border-radius: 4px; font-size: 14px; animation: tin .25s; transition: opacity .4s; text-align: center; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--bad); color: #ffd0cb; }
.toast.out { opacity: 0; }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 80; }

/* ---------- main menu ---------- */
#screen-menu { position: absolute; inset: 0; display: none; align-items: center; justify-content: flex-start; padding-left: 8vw; background: linear-gradient(90deg, rgba(5, 10, 20, .88), rgba(5, 10, 20, .2) 70%); z-index: 20; }
.menu-box { display: flex; flex-direction: column; gap: 10px; width: min(340px, 86vw); }
.logo h1 { font-size: clamp(44px, 9vw, 84px); margin: 0; letter-spacing: 4px; line-height: .95; font-weight: 800; color: #eaf4ff; text-shadow: 0 0 30px rgba(79, 195, 255, .5); }
.logo h1 span { color: var(--accent); }
.logo small { color: var(--dim); letter-spacing: 2px; font-size: 11px; display: block; }
.logo .sub { letter-spacing: 8px; color: var(--gold); font-size: 13px; margin: 6px 0 22px; }
.foot { color: var(--dim); font-size: 12px; margin-top: 14px; line-height: 1.5; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; font-size: 14px; }
#hud > * { pointer-events: none; }
#objective { position: absolute; top: calc(14px + var(--safe-t)); left: calc(14px + var(--safe-l)); padding: 8px 16px 8px 12px; display: flex; gap: 10px; align-items: center; max-width: min(44vw, 380px); }
#objective small { color: var(--accent); font-size: 10px; letter-spacing: 1.5px; }
#objective #obj-text { font-size: 15px; }
.dia { width: 12px; height: 12px; background: var(--gold); transform: rotate(45deg); flex: none; box-shadow: 0 0 10px var(--gold); }
#sysbox { position: absolute; top: calc(14px + var(--safe-t)); left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 0 6px #000; }
#sysbox small { color: var(--dim); font-size: 10px; letter-spacing: 2px; } #sysbox div { font-size: 16px; letter-spacing: 3px; }
#radar-wrap { position: absolute; top: calc(10px + var(--safe-t)); right: calc(14px + var(--safe-r)); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(20, 50, 80, .55), rgba(8, 18, 34, .75)); box-shadow: 0 0 14px rgba(79, 195, 255, .25); }
#radar { width: 150px; height: 150px; }
#status { position: absolute; bottom: calc(14px + var(--safe-b)); left: calc(14px + var(--safe-l)); padding: 10px 14px; display: flex; gap: 12px; align-items: center; min-width: 290px; }
.shipicon { width: 30px; height: 48px; flex: none; opacity: .9; }
.bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.bar { display: flex; align-items: center; gap: 7px; }
.bi { width: 16px; color: var(--accent); font-size: 12px; text-align: center; }
.track { flex: 1; height: 11px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(80, 130, 180, .4); }
.track i { display: block; height: 100%; width: 100%; }
i.sh { background: linear-gradient(90deg, #2c8fd4, #55c0ff); } i.hu { background: linear-gradient(90deg, #2fb864, #6bff9a); } i.en { background: linear-gradient(90deg, #9a7a1c, #ffd23a); }
.bar b { width: 40px; text-align: right; font-size: 12px; font-weight: 600; }
.readout { text-align: right; font-size: 12px; line-height: 1.4; min-width: 90px; } .readout div:first-child { font-size: 16px; font-weight: 700; }
#weapons-wrap { position: absolute; bottom: calc(14px + var(--safe-b)); right: calc(14px + var(--safe-r)); padding: 8px 10px; display: flex; gap: 10px; align-items: center; pointer-events: auto !important; }
#weapons { display: flex; gap: 6px; }
.wslot { width: 46px; height: 46px; border: 1px solid var(--line); background: rgba(6, 14, 28, .7); border-radius: 4px; position: relative; padding: 8px; pointer-events: auto; }
.wslot svg { width: 100%; height: 100%; } .wslot span { position: absolute; bottom: 1px; right: 4px; font-size: 11px; color: var(--text); }
.wslot.off { opacity: .3; filter: grayscale(1); }
.missiles { font-size: 14px; color: var(--gold); }
#prompt { position: absolute; bottom: calc(96px + var(--safe-b)); left: 50%; transform: translateX(-50%); padding: 8px 20px; font-size: 16px; display: none; white-space: nowrap; }
#prompt.usable { border-color: var(--gold); color: #ffe6a8; box-shadow: 0 0 14px rgba(255, 182, 58, .3); }
#lane-bar { position: absolute; bottom: calc(40px + var(--safe-b)); left: 50%; transform: translateX(-50%); width: min(50vw, 420px); height: 14px; border: 1px solid var(--accent); background: rgba(0, 0, 0, .5); display: none; }
#lane-fill { display: block; height: 100%; background: linear-gradient(90deg, #1c6aa8, #4fc3ff); }
#lane-bar span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 3px; color: var(--accent); }
#cursor { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid rgba(160, 225, 255, .8); border-radius: 50%; }
#cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #bfeaff; border-radius: 50%; }
#cursor.impact { animation: aim-impact .26s ease-out; }
#flash { position: absolute; inset: 0; opacity: 0; box-shadow: inset 0 0 160px 40px #ff2a1a; }
/* Guidance is a dedicated HUD layer: it must stay readable over the radar,
   cockpit decoration and other in-flight panels. */
#marks { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
#marks .mark { position: absolute; left: 0; top: 0; display: none; will-change: transform; }
.mk-icon { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.mk-label { position: absolute; left: 14px; top: -14px; white-space: nowrap; font-size: 12px; text-shadow: 0 0 4px #000, 0 0 4px #000; line-height: 1.15; }
.mk-label small { color: var(--dim); font-size: 11px; }
.mark.obj .mk-icon { background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px var(--gold); width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.mark.obj .mk-label { color: #ffe0a0; }
.mark.obj .mk-icon { width: 22px; height: 22px; margin: -11px 0 0 -11px; box-shadow: 0 0 18px #ffd23a, 0 0 34px rgba(255, 170, 45, .55); animation: gps-pulse 1.1s ease-in-out infinite alternate; }
.mark.obj.off .mk-icon { border-left-width: 14px !important; border-right-width: 14px !important; border-bottom-width: 23px !important; margin: -12px 0 0 -14px !important; animation: gps-pulse 1.1s ease-in-out infinite alternate; }
.mark.obj.off .mk-label { display: block; left: 18px; top: -8px; color: #ffe0a0; font-weight: 700; letter-spacing: .5px; }
@keyframes gps-pulse { from { filter: brightness(.9); } to { filter: brightness(1.35); } }
.mark.gate .mk-icon { background: transparent; border: 2px solid #ffd23a; transform: rotate(45deg); } .mark.gate .mk-label { color: #ffe9a0; }
.mark.base .mk-icon { border: 2px solid var(--accent); border-radius: 3px; background: rgba(79, 195, 255, .15); } .mark.base .mk-label { color: #bfe6ff; }
.mark.lane .mk-icon { border: 2px solid #4fc3ff; border-radius: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; opacity: .8; }
.mark.foe .mk-icon { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #ff5a4f; margin: -5px 0 0 -6px; }
.mark.pod .mk-icon { background: var(--good); transform: rotate(45deg); width: 9px; height: 9px; margin: -4px 0 0 -4px; } .mark.pod .mk-label { color: var(--good); }
.mark.off .mk-icon { width: 0 !important; height: 0 !important; background: none !important; border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-bottom: 14px solid currentColor !important; border-top: none !important; border-radius: 0 !important; transform-origin: 50% 60%; margin: -8px 0 0 -8px !important; box-shadow: none !important; opacity: 1; }
.mark.obj.off { color: var(--gold); } .mark.gate.off { color: #ffd23a; } .mark.base.off { color: var(--accent); } .mark.foe.off { color: #ff5a4f; } .mark.lane.off, .mark.pod.off { display: none !important; }
.mark.off .mk-label { display: none; }
#target { position: absolute; left: 0; top: 0; z-index: 26; display: none; will-change: transform; }
.tg-br { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; --c: #ff5a4f; background: linear-gradient(var(--c), var(--c)) top left/14px 2px no-repeat, linear-gradient(var(--c), var(--c)) top left/2px 14px no-repeat, linear-gradient(var(--c), var(--c)) top right/14px 2px no-repeat, linear-gradient(var(--c), var(--c)) top right/2px 14px no-repeat, linear-gradient(var(--c), var(--c)) bottom left/14px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom left/2px 14px no-repeat, linear-gradient(var(--c), var(--c)) bottom right/14px 2px no-repeat, linear-gradient(var(--c), var(--c)) bottom right/2px 14px no-repeat; }
.tg-br.impact { animation: aim-impact .26s ease-out; }
@keyframes aim-impact { 0% { filter: brightness(1); opacity: 1; } 25% { transform: scale(1.28); filter: brightness(2.8) drop-shadow(0 0 7px #ff4f42) drop-shadow(0 0 15px rgba(255, 68, 48, .9)); opacity: 1; } 100% { transform: scale(1); filter: brightness(1); opacity: 1; } }
.tg-info { position: absolute; left: 36px; top: -30px; white-space: nowrap; font-size: 13px; text-shadow: 0 0 4px #000; }
#tg-dist { color: #ffb0a8; font-size: 12px; }
#tg-scan { display: none; margin-top: 3px; color: #6ad0ff; font-size: 12px; white-space: normal; max-width: 190px; }
#tg-scan.show { display: block; }
.tg-bars { width: 90px; margin: 2px 0; } .tgb { height: 5px; background: rgba(0, 0, 0, .6); margin-bottom: 2px; } .tgb i { display: block; height: 100%; }
#target.off .tg-br { display: none; } #target.off .tg-info { left: -40px; top: -40px; }
#target.focus .tg-br { --c: #6ad0ff; opacity: .75; }
/* focus is "nearest ship", not a threat — steady cyan, no alarm flicker/glow */
#target.focus.off .tg-info { animation: none; opacity: .85; filter: none; }
#target.focus.off .tg-arrow { border-bottom-color: #6ad0ff; filter: none; animation: none; }
#lead { position: absolute; left: 0; top: 0; z-index: 26; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #ffe15e; border-radius: 50%; display: none; }
#lead::after { content: ""; position: absolute; inset: 5px; background: #ffe15e; border-radius: 50%; }

/* ---------- touch controls ---------- */
#touch { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
#touch > * { pointer-events: auto; }
#stick { position: absolute; left: calc(30px + var(--safe-l)); bottom: calc(110px + var(--safe-b)); width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(120, 200, 255, .4); background: rgba(20, 50, 90, .3); display: flex; align-items: center; justify-content: center; touch-action: none; }
#knob { width: 60px; height: 60px; border-radius: 50%; background: rgba(120, 200, 255, .55); border: 2px solid #9adcff; }
#throttle { position: absolute; left: calc(200px + var(--safe-l)); bottom: calc(110px + var(--safe-b)); width: 34px; height: 150px; border: 2px solid rgba(120, 200, 255, .4); background: rgba(20, 50, 90, .3); border-radius: 8px; overflow: hidden; touch-action: none; }
#th-fill { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(79, 195, 255, .55); } #throttle span { position: absolute; top: 4px; width: 100%; text-align: center; font-size: 10px; color: var(--dim); }
.tbtns { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(80px + var(--safe-b)); display: grid; grid-template-columns: repeat(3, 62px); gap: 8px; }
.tb { height: 56px; border-radius: 50%; border: 2px solid rgba(120, 200, 255, .5); background: rgba(20, 50, 90, .55); color: #dff; font-size: 13px; font-weight: 700; touch-action: none; }
.tb.big { grid-column: span 1; background: rgba(200, 60, 50, .55); border-color: #ff8a80; height: 62px; }
.tb.down { background: rgba(120, 200, 255, .6); } .tb.use { border-color: var(--gold); }
.tmenu { position: absolute; right: calc(14px + var(--safe-r)); top: calc(170px + var(--safe-t)); display: flex; gap: 8px; }
.tb.sm { width: 48px; height: 40px; border-radius: 8px; font-size: 12px; }
body.touch #status { bottom: auto; top: calc(56px + var(--safe-t)); left: calc(14px + var(--safe-l)); min-width: 230px; }
body.touch #weapons-wrap { bottom: auto; top: calc(190px + var(--safe-t)); right: calc(14px + var(--safe-r)); display: none; }
body.touch #prompt { bottom: calc(20px + var(--safe-b)); }
body.touch #objective { top: calc(8px + var(--safe-t)); }
body.touch #radar-wrap { width: 110px; height: 110px; } body.touch #radar { width: 110px; height: 110px; }
body.touch .tmenu { top: calc(126px + var(--safe-t)); }

/* ---------- base screen ---------- */
#screen-base { position: absolute; inset: 0; z-index: 30; background: #05080f; }
#screen-base #bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 10, 20, .7), transparent 22%, transparent 70%, rgba(4, 10, 20, .5)); pointer-events: none; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; padding-right: 40px; flex-wrap: wrap; }
.p-scroll { overflow-y: auto; flex: 1; padding-right: 6px; touch-action: pan-y; }
.card { background: rgba(20, 42, 72, .7); border: 1px solid rgba(60, 110, 160, .6); border-radius: 5px; padding: 10px 14px; margin-bottom: 8px; }
.card.story { border-color: var(--gold); background: rgba(70, 50, 14, .35); } .card.cur { border-color: var(--good); }
.m-title { font-weight: 600; font-size: 16px; display: flex; gap: 8px; align-items: center; } .m-title .reward { margin-left: auto; color: var(--gold); }
.m-meta { font-size: 13px; color: var(--gold); margin-top: 4px; }
.tag { font-size: 10px; letter-spacing: 1px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 3px; color: var(--dim); font-weight: 400; } .tag.on { border-color: var(--good); color: var(--good); }
.market { display: flex; flex-direction: column; height: 100%; }
.m-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.tbl { display: flex; flex-direction: column; min-height: 0; border: 1px solid rgba(60, 110, 160, .5); }
.tbl-body { overflow-y: auto; flex: 1; }
.row-t { display: grid; grid-template-columns: 1fr 70px 80px; padding: 8px 12px; font-size: 15px; cursor: pointer; align-items: center; } .row-t span:nth-child(n+2) { text-align: center; }
.row-t.hd { background: rgba(30, 60, 100, .8); cursor: default; font-size: 13px; color: var(--dim); } .row-t:not(.hd):hover { background: rgba(50, 100, 160, .35); } .row-t.sel { background: rgba(50, 110, 170, .6); }
.it { display: flex; align-items: center; gap: 8px; }
.gem { width: 14px; height: 14px; background: var(--c); clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%); display: inline-block; flex: none; } .gem.big { width: 52px; height: 52px; margin-bottom: 6px; }
.star { color: var(--gold); }
.detail { border: 1px solid rgba(60, 110, 160, .5); padding: 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; touch-action: pan-y; } .detail h4 { margin: 0; font-size: 19px; } .detail p { margin: 0; font-size: 14px; }
.qty { display: flex; gap: 5px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .qty b { min-width: 34px; text-align: center; font-size: 18px; }
.spots { margin-top: 8px; border-top: 1px solid rgba(60, 110, 160, .5); padding-top: 8px; } .lbl { font-size: 11px; letter-spacing: 1.5px; color: var(--accent); text-transform: uppercase; margin-right: 8px; }
.spot { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; gap: 8px; } .spot small { font-size: 11px; } .tip { font-size: 12px; margin-top: 6px; }
.chip { display: inline-block; font-style: normal; font-size: 12px; padding: 1px 8px; margin: 2px 4px 2px 0; border-radius: 10px; border: 1px solid var(--c); color: var(--c); } .pd { margin-top: 6px; font-size: 13px; }
.slots { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .slot { border: 1px solid var(--line); padding: 8px 14px; cursor: pointer; background: rgba(20, 44, 76, .8); font-size: 14px; } .slot small { display: block; color: var(--dim); font-size: 11px; } .slot.sel { border-color: var(--accent); background: #24608f; }
.sgrid { display: grid; grid-template-columns: 50px 1fr 40px 50px 1fr 40px; gap: 4px 8px; align-items: center; margin-top: 6px; font-size: 12px; } .sgrid b { text-align: left; }
.sbar { height: 7px; background: rgba(0, 0, 0, .5); display: block; } .sbar i { display: block; height: 100%; background: var(--accent); }
.galmap { width: 100%; max-height: 52vh; background: rgba(4, 12, 24, .6); border: 1px solid rgba(60, 110, 160, .5); }
.galmap .link { stroke: #2f6a9a; stroke-width: 2; stroke-dasharray: 4 4; } .sysnode { cursor: pointer; } .sysnode text { fill: var(--text); font-size: 12px; } .sysnode .here { fill: var(--gold); font-size: 10px; font-weight: 700; } .sysnode .ct { fill: var(--dim); }
.sysnode.sel polygon { fill: #1c3f66; }
.map-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .map-det { max-height: 58vh; overflow-y: auto; touch-action: pan-y; } .map-det h3 { margin: 0 0 4px; }
.j-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } h3 { margin: 10px 0 6px; font-size: 15px; color: var(--accent); letter-spacing: 1px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .stats div { background: rgba(20, 44, 76, .7); padding: 6px 8px; font-size: 11px; color: var(--dim); } .stats b { display: block; color: var(--text); font-size: 16px; }

/* ---------- overlays / dialog ---------- */
#overlay { position: absolute; inset: 0; z-index: 50; pointer-events: none; } #overlay > * { pointer-events: auto; }
.ov-wrap { position: absolute; inset: 0; background: rgba(2, 6, 14, .72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ov-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; width: min(var(--modal-standard), 100%); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 60px #000; } .ov-box.wide { width: min(var(--modal-wide), 100%); } .ov-box.narrow { width: min(var(--modal-narrow), 100%); }
.ov-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--accent); letter-spacing: 2px; text-transform: uppercase; font-size: 15px; }
.ov-head .x { background: none; border: none; color: var(--text); font-size: 18px; }
.ov-body { min-height: 0; padding: 14px 16px; overflow-y: auto; touch-action: pan-y; }
.save-slots { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.save-slot { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 12px; }
.save-slot > span { color: #49b8ff; font-size: 10px; letter-spacing: 1.5px; }.save-slot b, .save-slot small { display: block; }.save-slot small { color: var(--dim); margin-top: 3px; }.save-slot em { color: var(--gold); font-style: normal; font-size: 12px; }
.save-actions { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.ov-box.save-record { height: min(88vh, 720px); }
.save-record .ov-body { flex: 1 1 auto; }
.save-record-stats { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(60, 110, 160, .45); border-radius: 5px; padding: 2px 10px; }
.save-record-stats .rep-kv { padding: 6px 4px; font-size: 13px; }.save-record-stats .rep-kv:nth-child(odd) { border-right: 1px solid rgba(60, 110, 160, .3); padding-right: 10px; }.save-record-stats .rep-kv:nth-child(even) { padding-left: 10px; }
.save-record .ach-list { max-height: 170px; overflow-y: auto; padding-right: 4px; }.save-record .ach-row { padding: 6px 9px; }.save-record .ach-row i { font-size: 11px; }
.save-record h3 { margin: 14px 0 8px; font-size: 16px; }.save-record textarea { width: 100%; resize: vertical; }
.ctl { font-size: 13px; margin: 5px 0; line-height: 1.4; } .ctl b { color: var(--gold); } .ctls { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
input#pname { width: 100%; padding: 10px; background: #08121f; border: 1px solid var(--line); color: var(--text); font-size: 18px; border-radius: 4px; user-select: text; -webkit-user-select: text; }
#dialog { position: absolute; inset: 0; z-index: 55; background: rgba(2, 6, 14, .55); align-items: flex-end; justify-content: center; padding: 20px 20px 30px; }
.dlg-box { display: flex; gap: 16px; width: min(900px, 100%); align-items: flex-end; }
.dlg-portrait { width: 150px; flex: none; position: relative; border: 2px solid var(--accent); background: #0d1726; clip-path: polygon(0 0, 88% 0, 100% 8%, 100% 100%, 0 100%); } .dlg-portrait canvas { width: 100%; display: block; }
.dlg-name { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(22, 58, 92, .95); text-align: center; font-size: 13px; padding: 4px; }
.dlg-main { flex: 1; background: rgba(12, 28, 50, .96); border: 2px solid var(--accent); border-radius: 6px; padding: 14px 20px; min-height: 150px; display: flex; flex-direction: column; }
.dlg-title { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .dlg-text { font-size: 18px; line-height: 1.45; flex: 1; }
.dlg-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 820px), (max-height: 520px) {
  .row-t { font-size: 13px; padding: 6px 8px; }
  .dlg-portrait { width: 90px; } .dlg-text { font-size: 15px; } .dlg-main { min-height: 100px; padding: 10px 14px; } #dialog { padding: 8px; }
  #status { min-width: 240px; } #radar-wrap { width: 110px; height: 110px; } #radar { width: 110px; height: 110px; }
  .base.planet .bmenu { top: 78px; } .base.planet .bmenu .mi { padding: 8px 10px; font-size: 13px; }
}
@media (max-height: 520px) { .bmenu.station { bottom: 10px; } .rep { bottom: 10px; } .base.planet .panel { left: 170px; width: calc(100vw - 180px); } }

@media (max-width: 640px) { .m-cols, .map-cols, .j-cols { grid-template-columns: 1fr; } .m-cols { grid-template-rows: 1fr 1fr; } }
@media (max-height: 520px) {
  .b-head { padding-top: calc(4px + var(--safe-t)); padding-bottom: 4px; } .b-title h2 { font-size: 18px; } .b-title small { font-size: 9px; }
  .panel { top: 56px; padding: 8px; } .tabs { margin-bottom: 6px; } .tab { padding: 4px 12px; font-size: 13px; } .m-head { font-size: 12px; margin-bottom: 4px; }
  .row-t { padding: 4px 8px; font-size: 13px; } .detail { padding: 8px; gap: 3px; } .detail h4 { font-size: 16px; } .detail p { font-size: 12px; }
  .gem.big { width: 30px; height: 30px; margin-bottom: 2px; } .btn.big { padding: 8px 20px; font-size: 15px; } .qty .btn.sm { padding: 3px 8px; }
  .base.planet .bmenu { top: 58px; } .card { padding: 7px 10px; } .m-title { font-size: 14px; } .sgrid { font-size: 11px; }
  .dlg-main { min-height: 90px; } #dialog { align-items: flex-end; }
}
@media (max-height: 520px) {
  body.touch #stick { bottom: calc(18px + var(--safe-b)); width: 130px; height: 130px; } body.touch #throttle { bottom: calc(18px + var(--safe-b)); left: calc(180px + var(--safe-l)); height: 130px; }
  body.touch .tbtns { bottom: calc(14px + var(--safe-b)); } body.touch #status { top: calc(50px + var(--safe-t)); }
}

/* =================== v2: reference-style docking screen =================== */
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tab { padding: 7px 18px; background: rgba(14, 34, 60, .85); border: 1px solid #1f4a72; cursor: pointer; font-size: 14px; letter-spacing: .5px; }
.tab.on { background: linear-gradient(180deg, #0f4a78, #0a2f52); border-color: #39b6ff; box-shadow: inset 0 0 12px rgba(57, 182, 255, .35); }
.tabs.big .tab { padding: 14px 44px; font-size: 18px; letter-spacing: 3px; display: flex; gap: 10px; align-items: center; clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); } .tabs.big .tab i { font-style: normal; }
#screen-base #bg { filter: brightness(.9) saturate(1.05); }
.b-shade { background: radial-gradient(ellipse at 30% 50%, rgba(4, 10, 20, .05), rgba(4, 10, 20, .75)); }
.b-top { position: absolute; top: calc(10px + var(--safe-t)); left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); display: flex; gap: 12px; z-index: 3; }
.b-top .grow { flex: 1; }
.hcard { background: linear-gradient(180deg, rgba(12, 32, 56, .92), rgba(6, 16, 30, .92)); border: 1px solid #1f5a86; border-radius: 6px; padding: 8px 16px; min-width: 190px; box-shadow: 0 0 18px rgba(30, 140, 220, .18); }
.hcard small { display: block; color: #49b8ff; letter-spacing: 2px; font-size: 11px; margin-bottom: 3px; }
.hcard.mission { min-width: 300px; max-width: 38vw; } .hc-row { display: flex; align-items: center; gap: 10px; } .hc-row b { font-size: 16px; font-weight: 600; } .hc-row div small { color: var(--dim); letter-spacing: 0; font-size: 12px; margin: 0; }
.hcard.credits b { font-size: 26px; color: #fff; } .coin { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd77a, #d9931a); color: #7a4a00; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-left: auto; }
.shipsil { width: 60px; height: 30px; }
.b-grid { position: absolute; z-index: 2; top: calc(84px + var(--safe-t)); bottom: calc(52px + var(--safe-b)); left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; }
.b-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.comms { position: relative; flex: 1; min-height: 0; border: 1px solid #1f6a9a; border-radius: 8px; overflow: hidden; box-shadow: 0 0 24px rgba(30, 150, 240, .2); background: #060a12; }
.comms canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.comms-tag { position: absolute; top: 12px; left: 12px; display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: rgba(8, 22, 40, .85); border: 1px solid #1f6a9a; border-radius: 4px; }
.comms-tag small { display: block; color: #49b8ff; letter-spacing: 2px; font-size: 10px; } .comms-tag b { font-size: 16px; display: block; font-weight: 600; } .comms-tag em { font-style: normal; color: #4fe0ff; font-size: 12px; letter-spacing: 1px; } .comms-tag .wave { color: #49b8ff; font-size: 18px; }
.nameplate { position: absolute; left: 0; bottom: 18px; padding: 10px 26px 10px 16px; background: linear-gradient(90deg, rgba(8, 22, 40, .95), rgba(8, 22, 40, .75)); border-left: 5px solid #39b6ff; } .nameplate b { display: block; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; } .nameplate small { display: block; color: #b6c8da; font-size: 13px; }
.say { min-height: 118px; padding: 12px 20px; background: linear-gradient(180deg, rgba(8, 24, 44, .92), rgba(6, 16, 30, .94)); border: 1px solid #1f6a9a; border-radius: 8px; font-size: 18px; line-height: 1.45; }
.say b { color: #dff3ff; letter-spacing: 1px; display: block; margin-bottom: 4px; }
.b-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.loc { display: grid; grid-template-columns: 46% 1fr; gap: 14px; background: linear-gradient(180deg, rgba(10, 28, 50, .93), rgba(6, 16, 30, .94)); border: 1px solid #1f5a86; border-radius: 8px; padding: 10px; flex: none; }
.loc-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border: 1px solid #1f5a86; background: #05080f; }
.loc-info h3 { margin: 0; font-size: 20px; letter-spacing: 2px; font-weight: 500; } .loc-type { color: #49b8ff; font-size: 13px; margin: 2px 0 8px; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 2px 0; border-bottom: 1px solid rgba(60, 110, 160, .25); } .kv span { color: var(--dim); } .kv b { font-weight: 500; text-align: right; }
.loc-info p { color: var(--dim); font-size: 12px; margin: 6px 0 0; line-height: 1.35; }
.bmenu { display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; }
.bmenu .mi { display: flex; align-items: center; gap: 14px; padding: 10px 16px; flex: 1; min-height: 52px; background: linear-gradient(90deg, rgba(10, 30, 54, .93), rgba(8, 20, 38, .9)); border: 1px solid #1f4a72; border-radius: 6px; cursor: pointer; transition: .12s; color: #cfe6f7; }
.bmenu .mi .ico { color: #49b8ff; flex: none; } .bmenu .mi .mt { flex: 1; min-width: 0; } .bmenu .mi b { display: block; font-size: 18px; font-weight: 500; } .bmenu .mi small { color: var(--dim); font-size: 13px; }
.bmenu .mi .key { color: #46739a; font-size: 12px; border: 1px solid #2b4d6e; padding: 0 6px; border-radius: 3px; } .bmenu .mi > svg:last-child { color: #7db6de; width: 20px; }
.bmenu .mi:hover, .bmenu .mi.sel { background: linear-gradient(90deg, rgba(14, 64, 104, .95), rgba(10, 40, 70, .95)); border-color: #39b6ff; box-shadow: 0 0 16px rgba(57, 182, 255, .35), inset 0 0 14px rgba(57, 182, 255, .18); }
.bmenu .mi.leave .ico { color: var(--gold); } .bmenu .mi.leave:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 182, 58, .35); }
.b-foot { position: absolute; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); bottom: calc(10px + var(--safe-b)); z-index: 3; display: flex; justify-content: space-between; align-items: center; color: #4f7899; font-size: 12px; letter-spacing: 2px; }
.b-tools { display: flex; gap: 8px; }
/* trade / service panel */
.panel { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; padding: calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) calc(10px + var(--safe-b)) calc(16px + var(--safe-l)); background: linear-gradient(180deg, rgba(4, 8, 16, .35) 0, rgba(4, 8, 16, .5) 22%, rgba(5, 12, 22, .96) 32%, rgba(5, 12, 22, .98) 100%); gap: 10px; }
.ph { display: flex; justify-content: space-between; align-items: flex-start; height: 24vh; min-height: 96px; max-height: 190px; flex: none; }
.ph-logo { display: flex; gap: 14px; align-items: center; } .ph-logo h2 { margin: 0; letter-spacing: 6px; font-weight: 500; font-size: clamp(20px, 3vw, 34px); text-shadow: 0 2px 8px #000; } .ph-logo small { color: #49b8ff; letter-spacing: 3px; }
.ph-rep { display: flex; gap: 14px; background: rgba(8, 22, 40, .9); border: 1px solid #1f6a9a; padding: 10px 16px; border-radius: 6px; max-width: min(46vw, 520px); align-items: center; }
.ph-rep canvas { width: 88px; height: 108px; object-fit: cover; object-position: 50% 25%; border: 1px solid #1f5a86; flex: none; } .ph-rep small { color: #49b8ff; letter-spacing: 2px; font-size: 11px; } .ph-rep b { display: block; font-size: 16px; } .ph-rep p { margin: 4px 0 0; font-size: 13px; color: #cfe0ee; font-style: italic; line-height: 1.35; }
.pbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pf { flex: none; display: grid; grid-template-columns: auto 1fr 250px auto; gap: 14px; align-items: stretch; }
.backbtn, .undock { background: rgba(10, 30, 54, .9); border: 1px solid #39b6ff; color: #dff3ff; padding: 0 22px; font-size: 15px; letter-spacing: 1px; border-radius: 4px; min-height: 48px; }
.undock { border-color: var(--gold); color: #ffd68a; font-size: 17px; letter-spacing: 3px; } .undock:hover { background: rgba(60, 40, 8, .8); } .backbtn:hover { background: rgba(20, 70, 110, .9); }
.pf-comms { border: 1px solid #1f4a72; border-radius: 6px; padding: 6px 12px; background: rgba(8, 20, 36, .85); font-size: 12px; overflow: hidden; max-height: 92px; } .pf-comms small, .pf-hold small { color: #49b8ff; letter-spacing: 2px; font-size: 10px; display: block; }
.cl { color: #a9bccd; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cl span { color: #5d7c98; } .cl.good { color: #8ff0b0; } .cl.bad { color: #ff9a92; }
.pf-hold { border: 1px solid #1f4a72; border-radius: 6px; padding: 6px 12px; background: rgba(8, 20, 36, .85); display: flex; flex-direction: column; gap: 1px; } .pf-hold b { font-size: 15px; } .hold { height: 12px; background: #04101c; border: 1px solid #1f4a72; } .hold i { display: block; height: 100%; background: linear-gradient(90deg, #0a86c4, #30d0ff); }
.market { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.m-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.tbl { border: 1px solid #1f4a72; background: rgba(6, 16, 30, .8); }
.row-t { grid-template-columns: 1fr 100px 110px 70px; padding: 8px 14px; font-size: 16px; border-bottom: 1px solid rgba(40, 80, 120, .25); }
.row-t.hd { font-size: 12px; letter-spacing: 1.5px; background: rgba(12, 32, 56, .9); } .row-t.sel { background: rgba(20, 100, 160, .45); box-shadow: inset 0 0 0 1px #39b6ff; } .row-t.faint { opacity: .45; }
.it .cico { flex: none; } .dm { font-weight: 700; } .dm.up { color: #6bff9a; } .dm.dn { color: #ff9a4f; } .dm.flat { color: var(--dim); }
.detail { border: 1px solid #1f4a72; background: rgba(6, 16, 30, .8); gap: 10px; }
.d-top { display: flex; gap: 14px; align-items: flex-start; } .d-top .cico { flex: none; } .detail h4 { font-size: 24px; font-weight: 500; }
.d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid rgba(40, 80, 120, .4); border-bottom: 1px solid rgba(40, 80, 120, .4); padding: 8px 0; } .d-stats small, .d-buy small { color: #49b8ff; letter-spacing: 1.5px; font-size: 10px; display: block; } .d-stats b { font-size: 20px; font-weight: 500; }
.d-buy { display: flex; justify-content: space-between; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .d-total { text-align: right; border: 1px solid #1f4a72; padding: 6px 16px; } .d-total b { font-size: 24px; color: #4fe0ff; font-weight: 500; }
.qty { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .qty b { min-width: 52px; text-align: center; font-size: 22px; font-weight: 500; border: 1px solid #1f4a72; padding: 3px 0; } .qb { width: 42px; height: 40px; background: #0d3a5e; border: 1px solid #39b6ff; color: #fff; font-size: 22px; border-radius: 3px; }
.buybtn { width: 100%; padding: 14px; font-size: 20px; letter-spacing: 2px; background: linear-gradient(180deg, rgba(10, 90, 150, .9), rgba(8, 56, 100, .9)); border: 1px solid #39b6ff; color: #fff; border-radius: 4px; box-shadow: 0 0 18px rgba(57, 182, 255, .3); } .buybtn:hover:not(:disabled) { background: rgba(20, 120, 190, .95); } .buybtn:disabled { opacity: .4; }
.spots { border-top: none; margin-top: 0; }
.dlg-portrait canvas { aspect-ratio: 360/440; object-fit: cover; }

@media (max-width: 900px), (max-height: 560px) {
  .b-top { top: calc(6px + var(--safe-t)); gap: 6px; } .hcard { padding: 4px 10px; min-width: 0; } .hcard.mission { min-width: 0; max-width: 30vw; } .hcard small { font-size: 9px; margin: 0; } .hc-row b { font-size: 13px; } .hcard.credits b { font-size: 18px; } .coin { width: 22px; height: 22px; } .hcard.ship { display: none; }
  .b-grid { top: calc(56px + var(--safe-t)); bottom: calc(36px + var(--safe-b)); gap: 8px; grid-template-columns: 1fr 1.1fr; } .say { min-height: 74px; font-size: 13px; padding: 6px 12px; } .loc { grid-template-columns: 1fr; } .loc-info { display: none; } .loc-img { aspect-ratio: 21/8; }
  .nameplate b { font-size: 14px; } .nameplate small { font-size: 11px; } .comms-tag { display: none; } .bmenu .mi { padding: 6px 10px; min-height: 40px; gap: 8px; } .bmenu .mi b { font-size: 14px; } .bmenu .mi small { display: none; } .bmenu .mi .key { display: none; }
  .b-foot span { display: none; } .ph { height: 15vh; min-height: 60px; } .ph-rep { display: none; } .ph-logo svg { width: 34px; height: 34px; } .pf { grid-template-columns: auto 1fr auto; } .pf-comms { display: none; } .pf-hold { display: none; } .backbtn, .undock { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .row-t { padding: 4px 8px; font-size: 13px; grid-template-columns: 1fr 64px 76px 40px; } .tabs.big .tab { padding: 6px 18px; font-size: 13px; } .d-top .cico { width: 40px; height: 40px; } .detail h4 { font-size: 17px; } .d-stats b { font-size: 14px; } .buybtn { padding: 8px; font-size: 15px; } .qb { width: 32px; height: 30px; }
}
@media (max-width: 640px) { .m-cols { grid-template-columns: 1fr; } }

.base.panel-open .b-top, .base.panel-open .b-grid, .base.panel-open .b-foot { visibility: hidden; }

/* =================== v2: cockpit HUD =================== */
#cockpit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body.chase #cockpit { display: none; }
#hud .glass { background: linear-gradient(180deg, rgba(10, 30, 52, .82), rgba(5, 14, 26, .88)); border: 1px solid #1c6a9a; border-radius: 4px; box-shadow: 0 0 14px rgba(30, 150, 240, .18), inset 0 0 12px rgba(30, 150, 240, .08); backdrop-filter: blur(2px); }
#hud small { color: #49b8ff; letter-spacing: 2px; font-size: 10px; }
#objective { top: calc(12px + var(--safe-t)); left: calc(12px + var(--safe-l)); display: block; max-width: min(34vw, 360px); min-width: 250px; padding: 8px 14px; }
#objective .ob-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } #objective .ob-ic { color: #49b8ff; font-size: 12px; }
#objective .ob-row { display: flex; gap: 10px; align-items: center; } #objective .ob-row.sub { color: var(--dim); font-size: 12px; margin-top: 2px; padding-left: 22px; } #obj-text { font-size: 16px; color: #ffcf7a; }
#credits-box { position: absolute; top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); padding: 8px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 170px; } #credits-box small { flex-basis: 100%; } #credits-box b { font-size: 28px; font-weight: 500; flex: 1; }
#console { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(150px, 25vh, 240px); display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(140px, .8fr) minmax(170px, 1fr) minmax(170px, .85fr) minmax(210px, 1.15fr); gap: 10px; padding: 0 calc(2vw + var(--safe-l)) calc(10px + var(--safe-b)) calc(2vw + var(--safe-r)); align-items: end; pointer-events: none; }
#pnl-left, #pnl-right { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#console #status, #console #weapons-wrap, #console #cargo-box, #hud-comms-box, #pnl-speed, #pnl-target { position: static; padding: 8px 12px; min-width: 0; }
#status .bars { gap: 8px; } .bar small { width: 62px; letter-spacing: 1px; } .bar .bi { color: #49b8ff; } .track { height: 9px; } .bar b { font-size: 13px; width: 44px; }
#hud-comms-box { font-size: 11px; height: clamp(50px, 9vh, 90px); overflow: hidden; } #hud-comms .cl { line-height: 1.3; }
#pnl-speed { position: relative !important; height: 100%; max-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.gauge { width: min(100%, 130px); } .g-val { position: absolute; top: 34%; text-align: center; } .g-val b { display: block; font-size: 32px; font-weight: 500; line-height: 1; } .g-val small { display: block; }
.thr { width: 100%; margin-top: -8px; } #thr-seg { display: flex; gap: 2px; margin-top: 3px; } #thr-seg i { flex: 1; height: 8px; background: rgba(60, 120, 170, .3); } #thr-seg i.on { background: #38c8ff; box-shadow: 0 0 5px #38c8ff; }
#radar-wrap { position: relative !important; top: auto !important; right: auto !important; width: auto; height: 100%; max-height: 220px; aspect-ratio: 1; justify-self: center; border-radius: 0; box-shadow: none; background: #1f8fc0; clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%); }
#radar-wrap::before { content: ""; position: absolute; inset: 2px; background: radial-gradient(circle, rgba(10, 34, 58, .92), rgba(4, 12, 24, .95)); clip-path: inherit; }
#radar { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } #radar-wrap .rn, #radar-wrap .rs { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11px; color: #49b8ff; } .rn { top: 6%; } .rs { bottom: 10%; } #radar-range { position: absolute; bottom: 2%; left: 0; right: 0; text-align: center; font-size: 11px; color: #cfe6f7; }
#pnl-target { height: 100%; max-height: 200px; display: flex; flex-direction: column; clip-path: polygon(6% 0, 94% 0, 100% 8%, 100% 92%, 94% 100%, 6% 100%, 0 92%, 0 8%); }
.tp-body { display: flex; gap: 10px; align-items: center; flex: 1; } #tp-icon { width: 46%; max-width: 110px; flex: none; } #tp-icon svg { width: 100%; height: auto; } #tp-name { font-size: 15px; font-weight: 500; display: block; } #tp-dist { font-size: 14px; color: #ffcf7a !important; }
#weapons-wrap small, #cargo-box small { display: block; margin-bottom: 4px; } #weapons { display: flex; flex-direction: column; gap: 4px; }
.wrow { display: flex; align-items: center; gap: 8px; font-size: 13px; pointer-events: auto; cursor: pointer; } .wrow .kk { border: 1px solid #39b6ff; width: 20px; text-align: center; font-size: 12px; border-radius: 2px; } .wrow .wn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wrow .wc { color: #cfe6f7; } .wrow.off { opacity: .35; }
#cargo-box { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } #cargo-box small { grid-column: 1 / -1; margin: 0; } #cargo-box .hold { height: 10px; } #t-cargo { font-size: 13px; font-weight: 500; }
#prompt { bottom: calc(clamp(150px, 25vh, 240px) + 10px + var(--safe-b)); }
#lane-bar { bottom: calc(clamp(150px, 25vh, 240px) + 46px); }
.cursor-hide { cursor: none; }
@media (max-width: 1180px) { #hud-comms-box, #pnl-target { display: none; } #console { grid-template-columns: minmax(200px, 1.3fr) minmax(130px, .8fr) minmax(150px, 1fr) minmax(200px, 1.1fr); } }
@media (max-height: 640px) { #hud-comms-box { display: none; } #console { height: clamp(120px, 26vh, 170px); } .g-val b { font-size: 24px; } .gauge { width: min(100%, 100px); } }

/* touch keeps the compact layout */
body.touch #console { display: contents; } body.touch #pnl-left, body.touch #pnl-right { display: contents; }
body.touch #hud-comms-box, body.touch #pnl-target, body.touch #cargo-box, body.touch .gauge, body.touch .thr, body.touch #weapons-wrap { display: none; }
body.touch #status { position: absolute !important; top: calc(52px + var(--safe-t)); left: calc(12px + var(--safe-l)); width: 230px; }
body.touch #pnl-speed { position: absolute !important; top: calc(150px + var(--safe-t)); left: calc(12px + var(--safe-l)); height: auto; padding: 2px 12px; clip-path: none; flex-direction: row; } body.touch .g-val { position: static; display: flex; gap: 6px; align-items: baseline; } body.touch .g-val b { font-size: 18px; }
body.touch #radar-wrap { position: absolute !important; top: calc(8px + var(--safe-t)) !important; right: calc(12px + var(--safe-r)) !important; width: 110px; height: 110px; }
body.touch #credits-box { top: calc(8px + var(--safe-t)); right: auto; left: 50%; transform: translateX(-50%); padding: 2px 12px; flex-wrap: nowrap; min-width: 0; } body.touch #credits-box small { display: none; } body.touch #credits-box b { font-size: 16px; } body.touch #credits-box .coin { display: none; }
body.touch #sysbox { display: none; } body.touch #objective { min-width: 0; max-width: 40vw; padding: 4px 10px; } body.touch #cockpit { display: none; }
body.touch #prompt { bottom: calc(20px + var(--safe-b)); } body.touch #lane-bar { bottom: 90px; }

/* declutter pass */
.mark.off:not(.obj) { display: none !important; }
.mark.lane .mk-icon { opacity: .55; }
.b-tools .btn { background: none; border: none; color: #5d86a8; padding: 4px 8px; font-size: 12px; letter-spacing: 1px; } .b-tools .btn:hover { color: #dff3ff; background: none; }
.bmenu .mi { min-height: 46px; flex: 0 0 auto; } .bmenu { gap: 8px; justify-content: flex-start; }
.loc-info .kv:nth-of-type(n+4) { display: none; }
#sysbox { opacity: .7; } #status .bar:nth-child(3) { opacity: .8; }
.toast { font-size: 13px; padding: 6px 14px; }

/* =================== chase view: light HUD like the reference =================== */
body.chase:not(.touch) #console { display: contents; }
body.chase:not(.touch) #pnl-left, body.chase:not(.touch) #pnl-right { display: block; position: absolute; }
body.chase:not(.touch) #pnl-left { left: calc(16px + var(--safe-l)); bottom: calc(16px + var(--safe-b)); width: 300px; }
body.chase:not(.touch) #hud-comms-box, body.chase:not(.touch) #pnl-target { display: none; }
body.chase:not(.touch) #pnl-right { right: calc(16px + var(--safe-r)); bottom: calc(92px + var(--safe-b)); width: 300px; display: flex; flex-direction: column; gap: 8px; }
body.chase:not(.touch) #pnl-speed { position: absolute !important; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); width: 300px; height: auto; max-height: none; padding: 8px 14px; clip-path: none; flex-direction: column; align-items: stretch; }
body.chase:not(.touch) .gauge { display: none; }
body.chase:not(.touch) .g-val { position: static; display: flex; gap: 8px; align-items: baseline; } body.chase:not(.touch) .g-val b { font-size: 20px; } body.chase:not(.touch) .thr { margin-top: 4px; }
body.chase:not(.touch) #radar-wrap { position: absolute !important; top: calc(12px + var(--safe-t)) !important; right: calc(12px + var(--safe-r)) !important; width: 150px; height: 150px; max-height: none; clip-path: circle(50%); }
body.chase:not(.touch) #credits-box { right: calc(178px + var(--safe-r)); min-width: 150px; } body.chase:not(.touch) #credits-box b { font-size: 24px; }
body.chase:not(.touch) #cargo-box { display: none; }
body.chase:not(.touch) #prompt { bottom: calc(110px + var(--safe-b)); } body.chase:not(.touch) #lane-bar { bottom: calc(60px + var(--safe-b)); }
body.chase:not(.touch) #sysbox { display: none; }

@media (max-width: 760px) {
  body.chase:not(.touch) #pnl-left, body.chase:not(.touch) #pnl-right, body.chase:not(.touch) #pnl-speed { width: calc(50vw - 22px); }
  body.chase:not(.touch) #radar-wrap { width: 110px; height: 110px; }
  body.chase:not(.touch) #credits-box { right: 12px; top: 130px; min-width: 110px; } body.chase:not(.touch) #credits-box b { font-size: 18px; }
  #objective { max-width: 52vw; min-width: 0; }
}

#warp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 12; display: none; }
#whiteflash { position: absolute; inset: 0; pointer-events: none; z-index: 13; opacity: 0; background: radial-gradient(circle at 50% 50%, #ffffff 0%, #bfe6ff 45%, #5aa8ff 100%); }

#hud > * { transition: opacity .4s; } body.jumping #hud > *:not(#cockpit) { opacity: .2; }

.mark.lane .mk-icon { border-color: #ffc23a; opacity: .8; }

/* ---------- IRIS, the onboard AI ---------- */
.orb { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #d8f6ff, #38c8ff 55%, #0a5a9a); box-shadow: 0 0 8px rgba(56, 200, 255, .7); }
body.ai-talk .orb { animation: orbtalk .5s ease-in-out infinite alternate; }
@keyframes orbtalk { from { transform: scale(1); box-shadow: 0 0 8px rgba(56, 200, 255, .6); } to { transform: scale(1.35); box-shadow: 0 0 18px rgba(120, 230, 255, 1); } }
.ai-chip { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ai-chip small { flex: 1; margin: 0; }
.msg-btn { pointer-events: auto; background: rgba(20, 50, 90, .6); border: 1px solid rgba(120, 200, 255, .5); color: #dff; border-radius: 4px; font-size: 14px; padding: 0 7px; cursor: pointer; position: relative; line-height: 20px; }
.msg-badge { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; background: #ff5a4f; color: #fff; font-size: 10px; font-weight: 700; text-align: center; padding: 0 4px; margin-left: 4px; }
.msg-btn .msg-badge, .tb .msg-badge { position: absolute; top: -6px; right: -6px; margin: 0; }
.tb { position: relative; }
body.has-msg .msg-btn { border-color: #ffd23a; animation: msgpulse 1.2s ease-in-out infinite alternate; }
@keyframes msgpulse { from { box-shadow: 0 0 0 rgba(255, 210, 58, 0); } to { box-shadow: 0 0 10px rgba(255, 210, 58, .9); } }
.hcard.ai { cursor: pointer; position: relative; min-width: 150px; }
.hcard.ai .msg-badge { position: absolute; top: -7px; right: -7px; margin: 0; }
.ai-say { border-color: #38c8ff; }
.msg-cols { display: grid; grid-template-columns: 300px 1fr; gap: 16px; min-height: 340px; }
.msg-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.msg-row { position: relative; padding: 8px 10px; border: 1px solid #1f3a56; border-radius: 6px; background: rgba(8, 20, 36, .7); cursor: pointer; }
.msg-row b { display: block; font-size: 13px; padding-right: 60px; } .msg-row small { color: var(--dim); font-size: 11px; }
.msg-row.on { border-color: #38c8ff; background: rgba(20, 60, 100, .6); }
.msg-row.unread b::before { content: '● '; color: #ffd23a; }
.msg-row .st { position: absolute; right: 8px; top: 8px; font-size: 9px; letter-spacing: 1px; color: #6ea8cf; }
.st-accepted { color: #6bff9a !important; } .st-declined, .st-expired { color: #ff8a80 !important; } .st-new { color: #ffd23a !important; }
.msg-head { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.msg-head canvas { width: 72px; height: 72px; border: 1px solid #1f5a86; border-radius: 6px; }
.msg-head small { display: block; color: var(--dim); } .msg-view p { line-height: 1.5; margin: 8px 0; }
@media (max-width: 640px) { .msg-cols { grid-template-columns: 1fr; } .hcard.ai { display: none; } }
#ai-hud { position: absolute; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-size: 12px; letter-spacing: 2px; }
#ai-hud .msg-btn { pointer-events: auto; }
body.touch #ai-hud { display: none; }

/* ---------- intro cinematic + ASTRA start screen ---------- */
#screen-intro { position: absolute; inset: 0; z-index: 85; pointer-events: auto; }
body.cine #gl { visibility: visible; }
.cine-bar { position: absolute; left: 0; right: 0; height: var(--bar, 11vh); background: #000; z-index: 4; }
.cine-bar.top { top: 0; } .cine-bar.bot { bottom: 0; }
body.briefing .cine-bar { height: 0 !important; transition: height .8s; } body.briefing #cine-vig { opacity: .55; }
#cine-cap { position: absolute; left: 6vw; top: calc(var(--bar, 11vh) + 16px); z-index: 3; color: #9fd8ff; font-size: 12px; letter-spacing: 5px; text-shadow: 0 0 8px #000; }
#cine-sub { position: absolute; left: 50%; bottom: calc(var(--bar, 11vh) + 18px); transform: translateX(-50%); width: min(78vw, 900px); text-align: center; z-index: 3; color: #e9f2fb; font-size: clamp(14px, 1.9vw, 21px); line-height: 1.5; text-shadow: 0 2px 10px #000, 0 0 3px #000; }
#cine-fade { position: absolute; inset: 0; background: #000; opacity: 1; pointer-events: none; z-index: 5; }
#cine-title { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; background: #000; }
#cine-title h1 { font-size: clamp(44px, 9vw, 110px); letter-spacing: .12em; font-weight: 300; color: #dff1ff; margin: 0; text-shadow: 0 0 40px rgba(79, 195, 255, .55); }
#cine-title h1 span { color: #4fc3ff; font-weight: 600; }
#cine-title .sub { letter-spacing: .6em; color: #6ea8cf; font-size: 13px; margin-top: 12px; }
.intro-controls { position: absolute; right: 18px; top: 14px; z-index: 8; display: flex; gap: 8px; opacity: .65; }
.intro-controls:hover { opacity: 1; }
#brief { display: none; position: absolute; right: 5vw; top: 50%; transform: translateY(-50%); width: min(460px, 90vw); z-index: 7; flex-direction: column; gap: 14px; padding: 22px 24px; background: linear-gradient(180deg, rgba(10, 28, 50, .82), rgba(5, 14, 28, .86)); border: 1px solid #1f5a86; border-radius: 8px; box-shadow: 0 0 40px rgba(30, 140, 220, .2); backdrop-filter: blur(4px); }
.br-head { display: flex; align-items: center; gap: 14px; } .br-head b { font-size: 22px; letter-spacing: 6px; color: #dff1ff; } .br-head small { display: block; color: #49b8ff; letter-spacing: 2px; font-size: 10px; margin-top: 2px; }
.br-head .orb { width: 26px; height: 26px; }
.br-text { min-height: 190px; color: #cfe2f2; font-size: 15px; line-height: 1.55; } .br-text p { margin: 0 0 10px; }
.br-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .br-cards div { border: 1px solid #1f3a56; border-radius: 6px; padding: 6px 10px; background: rgba(8, 20, 36, .6); }
.br-cards div:last-child { grid-column: span 2; } .br-cards small { display: block; color: #49b8ff; letter-spacing: 2px; font-size: 9px; } .br-cards b { font-size: 14px; font-weight: 600; color: #fff; }
@media (max-width: 760px) { #brief { right: 50%; transform: translate(50%, -50%); top: 58%; } .br-text { min-height: 140px; font-size: 13px; } .cine-bar { height: 8vh; } }
#cine-vig { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 48%, rgba(0, 0, 6, .55) 100%); }
#cine-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; opacity: .35; background: linear-gradient(180deg, #ff9a5a 0%, transparent 35%, transparent 65%, #2a7fff 100%); }
#cine-grain { position: absolute; inset: -60px; z-index: 3; pointer-events: none; opacity: .11; mix-blend-mode: overlay; background-size: 220px 220px; animation: grain .7s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-40px, 25px); } 40% { transform: translate(30px, -45px); } 60% { transform: translate(-25px, -30px); } 80% { transform: translate(45px, 35px); } 100% { transform: translate(0, 0); } }

/* ---------- shipyard: spinning hull, stats, permits ---------- */
.yard { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.yard-stage { position: relative; min-height: 360px; border: 1px solid #1f5a86; border-radius: 8px; overflow: hidden; background: radial-gradient(ellipse at 50% 62%, rgba(40, 130, 210, .38), rgba(6, 14, 28, .92) 72%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
.yard-slot { position: absolute; inset: 0; transition: filter .3s, opacity .3s; } .yard-canvas { display: block; width: 100%; height: 100%; }
.yard-stage.locked .yard-slot { filter: grayscale(1) brightness(.5); opacity: .85; }
.yard-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 1px solid #38a8ff; background: rgba(8, 24, 44, .8); color: #dff; font-size: 30px; line-height: 40px; cursor: pointer; z-index: 3; padding: 0 0 4px; }
.yard-arrow.l { left: 10px; } .yard-arrow.r { right: 10px; } .yard-arrow:hover:not(:disabled) { background: #1f5f9a; box-shadow: 0 0 14px rgba(56, 200, 255, .6); } .yard-arrow:disabled { opacity: .25; cursor: default; }
.yard-plate { position: absolute; left: 68px; top: 14px; z-index: 2; text-shadow: 0 0 8px #000; } .yard-plate small { display: block; color: #49b8ff; letter-spacing: 3px; font-size: 11px; } .yard-plate b { font-size: 28px; font-weight: 600; letter-spacing: 2px; color: #fff; }
.yard-price { position: absolute; left: 68px; bottom: 14px; z-index: 2; text-shadow: 0 0 8px #000; } .yard-price small { display: block; color: #8fb4d0; letter-spacing: 2px; font-size: 10px; } .yard-price b { font-size: 26px; color: #ffd23a; font-weight: 600; }
.yard-lock { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 3; background: rgba(50, 12, 12, .88); border: 1px solid #ff6a5a; color: #ffb4a8; padding: 7px 16px; border-radius: 6px; font-size: 13px; letter-spacing: 1px; white-space: nowrap; box-shadow: 0 0 20px rgba(255, 80, 60, .3); } .yard-lock span { margin-right: 8px; }
.yard-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; gap: 8px; justify-content: center; } .yard-dots i { width: 9px; height: 9px; border-radius: 50%; background: #2a4a6a; cursor: pointer; } .yard-dots i.on { background: #4fc3ff; box-shadow: 0 0 8px #4fc3ff; } .yard-dots i.lk { border: 1px solid #ff8a7a; }
.yard-side { display: flex; flex-direction: column; gap: 10px; }
.yard-desc { margin: 0; color: #b6cadb; font-size: 14px; line-height: 1.45; }
.stats { display: flex; flex-direction: column; gap: 5px; }
.st { display: grid; grid-template-columns: 96px 1fr 84px 36px; align-items: center; gap: 8px; font-size: 13px; } .st > span:first-child { color: #8fb4d0; } .st b { text-align: right; font-weight: 500; }
.st em { font-style: normal; font-size: 11px; text-align: right; } .st em.up { color: #6bff9a; } .st em.dn { color: #ff8a7a; }
.st .sbar { height: 7px; background: rgba(80, 140, 200, .2); border-radius: 4px; overflow: hidden; display: block; } .st .sbar i { display: block; height: 100%; background: linear-gradient(90deg, #1c6aa8, #4fc3ff); }
.yard-incl { font-size: 12px; }
.permit { border: 1px solid #1f3a56; border-radius: 6px; padding: 8px 12px; font-size: 13px; background: rgba(8, 20, 36, .6); } .permit small { display: block; color: #9ab4c8; margin-top: 3px; font-size: 12px; line-height: 1.4; }
.permit.ok { border-color: #2a7a4a; color: #8fffb4; } .permit.no { border-color: #7a3a32; color: #ffb4a8; } .permit.warn { border-color: #8a6a22; color: #ffd98a; }
.yard-buy { margin-top: auto; display: flex; flex-direction: column; gap: 8px; } .yard-buy .btn { width: 100%; } .yard-buy .btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 900px) { .yard { grid-template-columns: 1fr; } .yard-stage { min-height: 280px; } .yard-plate b { font-size: 22px; } .yard-lock { white-space: normal; width: 80%; text-align: center; bottom: 56px; } .st { grid-template-columns: 84px 1fr 78px 32px; } }

/* =================== air: spacing, calmer chrome =================== */
:root { --gap: 20px; }
/* docking screen */
.b-top { top: calc(20px + var(--safe-t)); left: calc(28px + var(--safe-l)); right: calc(28px + var(--safe-r)); gap: 18px; }
.hcard { padding: 12px 20px; }
.b-grid { top: calc(108px + var(--safe-t)); bottom: calc(64px + var(--safe-b)); left: calc(28px + var(--safe-l)); right: calc(28px + var(--safe-r)); gap: 32px; }
.b-left { gap: 18px; } .say { padding: 18px 26px; min-height: 128px; line-height: 1.55; }
.b-right { gap: 18px; } .loc { padding: 16px; gap: 22px; } .loc-info h3 { margin-bottom: 4px; } .kv { padding: 5px 0; }
.bmenu { gap: 12px; } .bmenu .mi { padding: 14px 22px; min-height: 58px; gap: 18px; }
.b-foot { left: calc(28px + var(--safe-l)); right: calc(28px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); }
/* service panels */
.panel { padding: calc(22px + var(--safe-t)) calc(32px + var(--safe-r)) calc(22px + var(--safe-b)) calc(32px + var(--safe-l)); }
.ph { height: 20vh; max-height: 160px; margin-bottom: 8px; }
.ph-rep { padding: 14px 20px; gap: 18px; } .ph-rep p { margin-top: 8px; line-height: 1.45; }
.pf { display: flex; gap: 20px; margin-top: 18px; } .pf-comms { display: none; } .pf-hold { margin-left: auto; min-width: 260px; padding: 10px 16px; gap: 6px; } .backbtn, .undock { min-height: 54px; padding: 0 28px; }
.tabs { margin-bottom: 20px; gap: 8px; } .tabs .tab { padding: 10px 24px; }
.p-scroll { padding: 4px 10px 16px 2px; }
.card { padding: 18px 22px; margin-bottom: 16px; } .card .m-title { margin-bottom: 8px; font-size: 17px; } .card .dim { line-height: 1.55; } .card .row { margin-top: 14px; gap: 10px; }
.p-scroll > .dim, .p-scroll > p { line-height: 1.6; margin: 0 0 16px; }
.m-cols { gap: 24px; } .row-t { padding: 13px 18px; } .row-t.hd { padding: 10px 18px; } .detail { padding: 24px; gap: 18px; } .d-stats { padding: 14px 0; gap: 14px; } .d-buy { gap: 14px; } .buybtn { padding: 16px; }
.yard { gap: 28px; } .yard-side { gap: 16px; } .st { gap: 10px; } .stats { gap: 9px; } .permit { padding: 12px 16px; }
/* overlays */
.ov-head { padding: 16px 24px; } .ov-body { padding: 26px 30px; }
.ov-body h3 { margin: 26px 0 12px; letter-spacing: 2px; } .ov-body h3:first-child { margin-top: 0; }
.j-cols { gap: 36px; } .stats { gap: 12px; }
.perms { display: flex; flex-direction: column; gap: 10px; } .perm { padding: 10px 14px; border: 1px solid #1f3a56; border-radius: 6px; background: rgba(8, 20, 36, .6); } .perm b { font-weight: 500; } .perm small { display: block; color: #9ab4c8; margin-top: 4px; font-size: 12px; line-height: 1.45; } .perm.ok { border-color: #2a7a4a; color: #8fffb4; }
.msg-cols { gap: 28px; } .msg-list { gap: 10px; } .msg-row { padding: 13px 16px; } .msg-view p { margin: 14px 0; line-height: 1.65; } .msg-head { margin-bottom: 14px; }
/* pause menu */
.pm { display: flex; flex-direction: column; gap: 14px; } .pm .btn.big { padding: 14px; font-size: 17px; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pm-grid.three { grid-template-columns: repeat(3, 1fr); } .pm-grid .btn { padding: 11px 8px; font-size: 14px; }
.pm-label { color: #49b8ff; font-size: 11px; letter-spacing: 3px; margin-top: 6px; text-transform: uppercase; }
.pm-ctl { border-top: 1px solid #1f3a56; padding-top: 12px; margin-top: 4px; } .pm-ctl summary { cursor: pointer; color: #8fb4d0; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; } .pm-ctl .ctls { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; font-size: 13px; }
/* flight HUD: fewer weights, generous margins */
#hud .glass { background: rgba(6, 18, 32, .58); border: 1px solid rgba(28, 106, 154, .5); box-shadow: none; backdrop-filter: blur(3px); border-radius: 6px; }
#objective { top: calc(24px + var(--safe-t)); left: calc(24px + var(--safe-l)); padding: 12px 18px; }
#ai-hud { left: calc(24px + var(--safe-l)); top: calc(112px + var(--safe-t)); transform: none; padding: 7px 14px; }
#credits-box { top: calc(24px + var(--safe-t)); right: calc(24px + var(--safe-r)); padding: 10px 18px; }
body.chase:not(.touch) #credits-box { right: calc(204px + var(--safe-r)); top: calc(30px + var(--safe-t)); }
body.chase:not(.touch) #radar-wrap { top: calc(24px + var(--safe-t)) !important; right: calc(24px + var(--safe-r)) !important; width: 150px; height: 150px; }
body.chase:not(.touch) #pnl-left { left: calc(24px + var(--safe-l)); bottom: calc(24px + var(--safe-b)); }
body.chase:not(.touch) #pnl-speed { right: calc(24px + var(--safe-r)); bottom: calc(24px + var(--safe-b)); }
body.chase:not(.touch) #pnl-right { right: calc(24px + var(--safe-r)); bottom: calc(112px + var(--safe-b)); }
#toasts { top: calc(28px + var(--safe-t)); }
#status .bars { gap: 12px; } #console #status, #console #weapons-wrap, #pnl-speed { padding: 12px 16px; }
@media (max-width: 900px), (max-height: 560px) {
  .b-top { top: calc(10px + var(--safe-t)); gap: 8px; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); }
  .b-grid { top: calc(62px + var(--safe-t)); bottom: calc(44px + var(--safe-b)); gap: 12px; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r)); }
  .panel { padding: calc(12px + var(--safe-t)) calc(14px + var(--safe-r)) calc(12px + var(--safe-b)) calc(14px + var(--safe-l)); } .ph { max-height: 90px; } .pf { gap: 10px; margin-top: 10px; }
  .card { padding: 14px 16px; margin-bottom: 12px; } .row-t { padding: 9px 12px; } .detail { padding: 16px; } .ov-body { padding: 18px; } .j-cols { gap: 20px; } .msg-cols { gap: 16px; }
  .pm-grid.three { grid-template-columns: 1fr 1fr; }
  #objective { top: calc(12px + var(--safe-t)); left: calc(14px + var(--safe-l)); } #ai-hud { top: calc(84px + var(--safe-t)); left: calc(14px + var(--safe-l)); }
}
body.touch #ai-hud { display: none; }
.hcard { min-width: 0; flex: 0 1 auto; } .hcard.mission { min-width: 220px; } .hcard.credits { flex: none; }
.bmenu { gap: 10px; } .bmenu .mi { min-height: 52px; padding: 10px 20px; }
@media (max-height: 860px) { .loc-img { aspect-ratio: 21/9; } .say { min-height: 104px; } .bmenu .mi { min-height: 48px; padding: 8px 18px; } .bmenu .mi small { font-size: 12px; } .loc { padding: 12px; } }
@media (max-width: 1100px) { .hcard.ship { display: none; } }
.ph { height: 14vh; min-height: 84px; max-height: 118px; margin-bottom: 4px; } .ph-rep canvas { width: 64px; height: 80px; } .ph-rep p { display: none; } .ph-rep { padding: 10px 18px; }
.tabs.big .tab { padding: 10px 28px; font-size: 15px; letter-spacing: 2px; } .tabs { margin-bottom: 16px; }
.pf { margin-top: 14px; } .backbtn, .undock { min-height: 48px; }
.detail { overflow-y: auto; }
#toasts { top: calc(100px + var(--safe-t)); z-index: 90; }

body.gyro #stick { display: none; }
.pm > .btn[data-a=steer] { font-size: 13px; padding: 10px; }

#cine-snap { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transform-origin: 50% 55%; will-change: opacity, transform; }

/* =================== shipyard, full-screen layout: list | stage | stats, price + buy underneath =================== */
.panel.yardmode { background: radial-gradient(ellipse at 50% 45%, #0d2a4a 0, #071626 55%, #040b16 100%); gap: 0; padding-left: calc(48px + var(--safe-l)); padding-right: calc(48px + var(--safe-r)); }
.panel.yardmode .ph { height: auto; min-height: 0; max-height: none; margin-bottom: 20px; } .panel.yardmode .ph-rep { display: none; }
.panel.yardmode .ph-logo h2 { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 8px; } .panel.yardmode .ph-logo small { letter-spacing: 5px; }
.panel.yardmode .tabs { margin-bottom: 18px; } .panel.yardmode .p-scroll { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.panel.yardmode .pf { margin-top: 20px; }
.yard { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr) 360px; grid-template-rows: minmax(0, 1fr) auto; gap: 0 36px; align-items: stretch; }
.yl { grid-row: 1 / 3; display: flex; flex-direction: column; min-height: 0; border: 1px solid #16456b; border-radius: 6px; background: rgba(7, 20, 36, .7); padding: 20px 14px 14px; }
.yl h4 { margin: 0 8px 16px; font-weight: 500; letter-spacing: 4px; font-size: 13px; color: #9fc8e6; }
.yl-list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; padding: 2px 4px 4px 2px; }
.yl-item { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 6px; background: rgba(20, 44, 70, .55); color: #e6f2fb; cursor: pointer; font: inherit; }
.yl-item:hover { background: rgba(30, 64, 100, .7); } .yl-item.on { border-color: #3aa7ee; background: rgba(28, 74, 118, .75); box-shadow: 0 0 0 1px rgba(58, 167, 238, .35); }
.yl-item img { width: 92px; height: 55px; object-fit: contain; flex: none; } .yl-item.lk img { filter: grayscale(1) brightness(.6); }
.yl-item span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .yl-item b { font-size: 16px; font-weight: 500; } .yl-item small { color: #8fb4d0; font-size: 13px; } .yl-item em { font-style: normal; color: #ffd23a; font-size: 15px; font-weight: 500; }
.yl-item.lk b, .yl-item.lk em { color: #8397a8; } .ylk { position: absolute; right: 10px; top: 8px; font-style: normal; font-size: 12px; opacity: .8; }
.yard-stage { grid-column: 2; min-height: 320px; border: 0; background: none; box-shadow: none; overflow: visible; }
.yard-arrow { width: 52px; height: 52px; background: rgba(8, 24, 44, .55); } .yard-arrow.l { left: 0; } .yard-arrow.r { right: 0; }
.yard-dots { bottom: 0; gap: 14px; } .yard-dots i { width: 11px; height: 11px; }
.yard-lock { bottom: 40px; }
.yard-side { grid-column: 3; grid-row: 1; min-height: 0; overflow-y: auto; border: 1px solid #16456b; border-radius: 6px; background: rgba(7, 20, 36, .7); padding: 26px 28px; gap: 22px; }
.yard-head h3 { margin: 0; font-size: 30px; font-weight: 600; color: #fff; } .yard-head span { display: block; margin-top: 6px; font-size: 19px; color: #3aa7ee; padding-bottom: 16px; border-bottom: 1px solid #1a4468; }
.yard-desc { font-size: 15px; line-height: 1.6; } .stats { gap: 15px; } .st { font-size: 14px; grid-template-columns: 104px 1fr 76px 34px; gap: 12px; } .st .sbar { height: 8px; }
.yard-incl { padding-top: 18px; border-top: 1px solid #1a4468; font-size: 13px; line-height: 1.5; }
.yard-foot { grid-column: 2 / 4; grid-row: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-top: 24px; }
.yard-foot .yard-price { position: static; text-shadow: none; } .yard-foot .yard-price small { color: #8fb4d0; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; margin-bottom: 4px; } .yard-foot .yard-price b { font-size: 34px; font-weight: 600; } .yard-foot .yard-price small:last-child { letter-spacing: .5px; text-transform: none; margin: 6px 0 0; font-size: 13px; }
.yard-foot .yard-buy { margin: 0; min-width: 300px; } .yard-foot .yard-buy .btn { min-height: 62px; font-size: 20px; }
@media (max-width: 1100px) { .yard { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 0 20px; } .yl-item img { width: 64px; height: 40px; } }
@media (max-width: 860px) {
  .panel.yardmode { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); } .panel.yardmode .p-scroll { overflow-y: auto; display: block; }
  .yard { display: flex; flex-direction: column; gap: 18px; } .yl { order: 1; padding: 12px; } .yl-list { flex-direction: row; overflow-x: auto; } .yl-item { width: 200px; flex: none; }
  .yard-stage { order: 0; min-height: 260px; } .yard-side { order: 2; overflow: visible; } .yard-foot { order: 3; flex-direction: column; align-items: stretch; } .yard-foot .yard-buy { min-width: 0; }
}
.yard-side { padding: 22px 24px; gap: 16px; } .stats { gap: 10px; } .st { grid-template-columns: 96px 1fr 72px 30px; gap: 10px; background: none; padding: 0; } .yard-head span { padding-bottom: 12px; } .yard-desc { font-size: 14px; line-height: 1.5; } .yard-incl { padding-top: 12px; }
.panel.yardmode .ph { margin-bottom: 12px; } .panel.yardmode .tabs { margin-bottom: 14px; } .panel.yardmode .pf { margin-top: 14px; } .yard-foot { padding-top: 16px; }
.yard-side .stats .st { background: none; padding: 0; } .yard-side .stats .st b { font-size: 14px; }
/* the spinning hull is the backdrop of the whole yard screen; every info block is a HUD layer over it */
@media (min-width: 861px) {
  .panel.yardmode .yard-slot { position: fixed; inset: 0; z-index: 0; }
  .panel.yardmode .ph, .panel.yardmode .tabs, .panel.yardmode .pf, .panel.yardmode .yl, .panel.yardmode .yard-side, .panel.yardmode .yard-foot { position: relative; z-index: 1; }
  .panel.yardmode .yl, .panel.yardmode .yard-side { background: rgba(7, 20, 36, .55); backdrop-filter: blur(3px); }
  .panel.yardmode .yard-arrow, .panel.yardmode .yard-dots, .panel.yardmode .yard-lock { z-index: 2; }
  .panel.yardmode .p-scroll { overflow: visible; }
}

/* =================== docking screen: the view stays the star; info is a light HUD =================== */
.base .b-shade { background: linear-gradient(90deg, rgba(4, 10, 20, .05) 40%, rgba(4, 10, 20, .6) 100%), linear-gradient(180deg, rgba(4, 10, 20, .65), transparent 20%, transparent 60%, rgba(4, 10, 20, .75)); }
.base .bx-top { top: calc(28px + var(--safe-t)); left: calc(56px + var(--safe-l)); right: calc(56px + var(--safe-r)); align-items: flex-start; gap: 16px; }
.bx-title { display: flex; align-items: center; gap: 22px; } .bx-title svg { flex: none; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .6)); }
.bx-title h1 { margin: 0; font-weight: 500; letter-spacing: 9px; font-size: clamp(24px, 3vw, 42px); color: #fff; text-shadow: 0 2px 12px #000; } .bx-title small { display: block; margin-top: 6px; color: #49b8ff; letter-spacing: 6px; font-size: 13px; }
.bx-mission { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: #cfe0ee; font-size: 14px; max-width: 46vw; text-shadow: 0 1px 6px #000; } .bx-mission b { font-weight: 500; } .bx-mission small { display: none; }
.base .bx-top .hcard.ai, .base .bx-top .hcard.ship { display: none; }
.base .bx-top .hcard.credits { padding: 14px 24px; }
.base .bx-grid { display: block; position: absolute; inset: 0; pointer-events: none; }
.bx-menu { position: absolute; right: calc(56px + var(--safe-r)); top: calc(150px + var(--safe-t)); bottom: calc(96px + var(--safe-b)); width: min(480px, 40vw); pointer-events: auto; display: flex; flex-direction: column; }
.bx-menu .bmenu { flex: 1; gap: 14px; justify-content: flex-start; padding-right: 2px; } .bx-menu .bmenu .mi { min-height: 70px; padding: 14px 26px; gap: 22px; } .bx-menu .bmenu .mi b { font-size: 21px; } .bx-menu .bmenu .mi small { margin-top: 3px; font-size: 14px; }
.bx-dlg { position: absolute; left: calc(56px + var(--safe-l)); bottom: calc(96px + var(--safe-b)); width: min(760px, calc(100vw - min(480px, 40vw) - 180px)); display: flex; gap: 0; pointer-events: auto; background: rgba(8, 22, 42, .82); border: 1px solid #1f5a86; border-radius: 6px; backdrop-filter: blur(4px); overflow: hidden; }
.bx-dlg canvas { flex: none; width: 150px; height: 150px; object-fit: cover; object-position: 50% 20%; border-right: 1px solid #1f5a86; }
.bx-say { padding: 22px 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; } .bx-say b { letter-spacing: 3px; font-size: 13px; color: #49b8ff; font-weight: 600; } .bx-say small { color: #8fb4d0; font-size: 14px; margin-bottom: 8px; } .bx-say #rep-dlg { font-size: clamp(16px, 1.6vw, 22px); line-height: 1.5; color: #fff; }
.base .b-foot { left: calc(56px + var(--safe-l)); right: calc(56px + var(--safe-r)); bottom: calc(30px + var(--safe-b)); }
@media (max-width: 860px) {
  .base .bx-top { left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); top: calc(14px + var(--safe-t)); } .bx-title svg { width: 40px; height: 40px; } .bx-title h1 { letter-spacing: 4px; font-size: 20px; } .bx-title small { letter-spacing: 3px; font-size: 11px; } .bx-mission { display: none; }
  .bx-menu { left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); width: auto; top: calc(80px + var(--safe-t)); bottom: calc(190px + var(--safe-b)); } .bx-menu .bmenu { gap: 8px; } .bx-menu .bmenu .mi { min-height: 54px; padding: 8px 16px; } .bx-menu .bmenu .mi b { font-size: 17px; }
  .bx-dlg { left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); width: auto; bottom: calc(52px + var(--safe-b)); } .bx-dlg canvas { width: 96px; height: 96px; } .bx-say { padding: 10px 16px; } .bx-say small { display: none; } .bx-say #rep-dlg { font-size: 14px; }
  .base .b-foot { left: calc(16px + var(--safe-l)); right: calc(16px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); }
}
@media (min-width: 861px) { .bx-menu .bmenu { justify-content: flex-end; } }
/* calmer backdrop: soften the busy interior, lift it out of the murk, and only darken where text sits */
#screen-base #bg { filter: blur(7px) brightness(1.3) saturate(.9); transform: scale(1.06); }
.base .b-shade { background: radial-gradient(ellipse at 38% 45%, rgba(30, 80, 140, .12), rgba(6, 16, 34, .35) 80%), linear-gradient(90deg, rgba(6, 16, 34, 0) 45%, rgba(6, 16, 34, .38) 100%), linear-gradient(180deg, rgba(6, 16, 34, .45), transparent 22%, transparent 62%, rgba(6, 16, 34, .5)); }
#screen-base #bg { filter: none; }

/* living backdrop: a slow camera drift, a sweep of light and a breathing sun glow over the picture */
#screen-base #bg { animation: bgdrift 46s ease-in-out infinite alternate; will-change: transform; }
@keyframes bgdrift { from { transform: scale(1.07) translate3d(-1.2%, .6%, 0); } to { transform: scale(1.12) translate3d(1.2%, -.8%, 0); } }
.b-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.b-fx i { position: absolute; display: block; }
.fx-sweep { top: -30%; bottom: -30%; width: 70%; left: -80%; background: radial-gradient(ellipse at 50% 50%, rgba(200, 230, 255, .26), rgba(160, 205, 255, .12) 45%, rgba(150, 200, 255, 0) 72%); filter: blur(28px); transform: skewX(-12deg); animation: fxsweep 22s ease-in-out infinite; }
@keyframes fxsweep { 0% { left: -80%; opacity: 0; } 25% { opacity: 1; } 60% { opacity: 1; } 85%, 100% { left: 110%; opacity: 0; } }
.fx-glow { right: -12%; top: -22%; width: 60%; height: 80%; background: radial-gradient(circle at 60% 40%, rgba(255, 244, 214, .3), rgba(255, 244, 214, 0) 62%); animation: fxglow 9s ease-in-out infinite alternate; }
@keyframes fxglow { from { opacity: .5; transform: scale(.95); } to { opacity: 1; transform: scale(1.08); } }
.b-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.base .b-top, .base .b-grid, .base .b-foot { z-index: 3; }
@media (prefers-reduced-motion: reduce) { #screen-base #bg, .fx-sweep, .fx-glow { animation: none; } }
/* in-flight transmissions never pause the game */
.tx { position: fixed; left: calc(20px + var(--safe-l)); bottom: calc(150px + var(--safe-b)); z-index: 40; display: flex; gap: 14px; max-width: min(520px, calc(100vw - 40px)); padding: 12px 18px 12px 12px; background: rgba(8, 22, 42, .88); border: 1px solid #1f6a9a; border-radius: 6px; backdrop-filter: blur(4px); pointer-events: none; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.tx.on { opacity: 1; transform: none; } .tx canvas { width: 72px; height: 72px; flex: none; object-fit: cover; border: 1px solid #1f5a86; }
.tx small { display: block; color: #49b8ff; letter-spacing: 2px; font-size: 11px; } .tx b { display: block; font-size: 15px; margin: 2px 0 6px; } .tx p { margin: 0; font-size: 14px; line-height: 1.45; color: #dbe9f5; }
/* shipyard backdrop: a generated low-poly bay view with a slow drift, behind the spinning hull */
.panel.yardmode { background: #040b16; overflow: hidden; }
.panel.yardmode::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(4, 11, 22, .18), rgba(4, 11, 22, .32)), url(../assets/yard/yard.jpg?v=2) center / cover no-repeat; animation: bgdrift 50s ease-in-out infinite alternate; will-change: transform; pointer-events: none; }
.panel.yardmode > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .panel.yardmode::before { animation: none; } }

/* =================== service screens (missions, trade, cantina, info, ship services): one clean glass style =================== */
.panel.svc { background: #040b16; overflow: hidden; gap: 0; padding-left: calc(56px + var(--safe-l)); padding-right: calc(56px + var(--safe-r)); padding-top: calc(28px + var(--safe-t)); }
.panel.svc::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(4, 11, 22, .5), rgba(4, 11, 22, .72)), var(--svc-bg) center / cover no-repeat; animation: bgdrift 50s ease-in-out infinite alternate; will-change: transform; pointer-events: none; }
.panel.svc.yardmode::before { background: linear-gradient(rgba(4, 11, 22, .18), rgba(4, 11, 22, .32)), url(../assets/yard/yard.jpg?v=2) center / cover no-repeat; }
.panel.svc > * { position: relative; z-index: 1; }
.panel.svc .ph { height: auto; max-height: none; min-height: 0; margin-bottom: 26px; align-items: center; }
.panel.svc .ph-logo h2 { font-size: clamp(22px, 2.6vw, 34px); letter-spacing: 8px; font-weight: 500; } .panel.svc .ph-logo small { letter-spacing: 6px; font-size: 13px; }
.ph-cred { display: none; } .panel.svc .ph-cred { display: block; padding: 12px 24px; background: rgba(8, 22, 42, .82); border: 1px solid #1f5a86; border-radius: 6px; backdrop-filter: blur(4px); } .ph-cred small { display: block; color: #49b8ff; letter-spacing: 3px; font-size: 11px; } .ph-cred b { font-size: 24px; font-weight: 500; }
.panel.svc .ph-rep, .panel.svc .pf-comms { display: none; }
.panel.svc .pf { margin-top: 22px; display: flex; gap: 20px; align-items: stretch; } .panel.svc .pf-hold { margin-left: auto; min-width: 240px; background: rgba(8, 22, 42, .82); backdrop-filter: blur(4px); }
.panel.svc .backbtn, .panel.svc .undock { background: rgba(8, 22, 42, .82); backdrop-filter: blur(4px); min-height: 56px; }
.glass { background: rgba(7, 20, 36, .72); border: 1px solid #16456b; border-radius: 6px; backdrop-filter: blur(6px); }
.panel.svc .tabs, .svc-tabs { display: flex; gap: 10px; margin-bottom: 22px; }
.panel.svc .tab { padding: 11px 26px; background: rgba(8, 22, 42, .7); border: 1px solid #16456b; border-radius: 6px; color: #b6cadb; cursor: pointer; font-size: 15px; letter-spacing: 1px; } .panel.svc .tab:hover { border-color: #3aa7ee; color: #fff; } .panel.svc .tab.on { background: rgba(28, 74, 118, .85); border-color: #3aa7ee; color: #fff; }
.panel.svc .p-scroll { padding: 0 6px 6px 0; }
.svc-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.4fr); gap: 32px; }
.svc-list { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.li { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 16px 20px; border: 1px solid transparent; border-radius: 6px; background: rgba(20, 44, 70, .55); color: #e6f2fb; cursor: pointer; font: inherit; }
.li:hover { background: rgba(30, 64, 100, .7); } .li.on { border-color: #3aa7ee; background: rgba(28, 74, 118, .8); }
.li span { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .li b { font-size: 17px; font-weight: 500; } .li small { color: #8fb4d0; font-size: 13px; } .li em { font-style: normal; color: #ffd23a; font-size: 16px; white-space: nowrap; }
.svc-detail { padding: 34px 38px; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.dt-head h3 { margin: 0; font-size: 30px; font-weight: 600; color: #fff; } .dt-head span { display: block; margin-top: 6px; color: #3aa7ee; font-size: 18px; padding-bottom: 18px; border-bottom: 1px solid #1a4468; }
.svc-detail p { margin: 0; font-size: 16px; line-height: 1.65; color: #cfe0ee; }
.dt-meta { display: flex; gap: 40px; flex-wrap: wrap; padding: 20px 0; border-top: 1px solid #1a4468; border-bottom: 1px solid #1a4468; } .dt-meta small { display: block; color: #8fb4d0; letter-spacing: 2px; font-size: 11px; margin-bottom: 6px; } .dt-meta b { font-size: 22px; font-weight: 500; color: #ffd23a; }
.dt-meta div:not(:first-child) b { color: #fff; }
.dt-btns { display: flex; gap: 16px; margin-top: auto; } .dt-btns .btn.big { min-height: 58px; padding: 0 34px; font-size: 18px; }
/* cantina */
.cant { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: end; }
.cant-who { display: flex; flex-direction: column; gap: 14px; align-self: stretch; justify-content: flex-end; } .cant-who canvas { width: 100%; max-height: 62vh; object-fit: cover; object-position: 50% 15%; border: 1px solid #1f5a86; border-radius: 6px; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.cant-name b { display: block; font-size: 24px; font-weight: 500; } .cant-name small { color: #8fb4d0; font-size: 14px; }
.cant-talk { display: flex; flex-direction: column; gap: 22px; align-self: stretch; justify-content: flex-end; }
.cant-say { padding: 34px 40px; } .cant-say small, .cant-cols small { display: block; color: #49b8ff; letter-spacing: 3px; font-size: 12px; margin-bottom: 12px; } .cant-say p { margin: 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.5; color: #fff; }
.cant-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .cant-cols .glass { padding: 24px 28px; } .cant-cols p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: #cfe0ee; }
/* trade, info, equipment, repair: same glass, more air */
.panel.svc .market { flex: 1; min-height: 0; display: flex; flex-direction: column; } .panel.svc .tabs.big .tab i { font-style: normal; margin-right: 10px; }
.panel.svc .m-cols { flex: 1; min-height: 0; gap: 32px; }
.panel.svc .tbl, .panel.svc .detail, .panel.svc .card, .panel.svc .slots, .panel.svc #info-map { background: rgba(7, 20, 36, .72); border: 1px solid #16456b; border-radius: 6px; backdrop-filter: blur(6px); }
.panel.svc .tbl { padding: 12px; } .panel.svc .row-t { border-radius: 6px; margin-bottom: 8px; background: rgba(20, 44, 70, .5); border: 1px solid transparent; } .panel.svc .row-t.hd { background: none; margin-bottom: 4px; } .panel.svc .row-t.sel { border-color: #3aa7ee; background: rgba(28, 74, 118, .8); }
.panel.svc .detail { padding: 30px 34px; gap: 24px; }
.panel.svc .card { padding: 24px 28px; margin-bottom: 20px; } .panel.svc .card .m-title { font-size: 19px; } .panel.svc .card .row { margin-top: 18px; }
.panel.svc .slots { padding: 16px; display: flex; gap: 12px; margin-bottom: 22px; } .panel.svc .slot { border-radius: 6px; padding: 14px 20px; }
@media (max-width: 860px) {
  .panel.svc { padding-left: calc(16px + var(--safe-l)); padding-right: calc(16px + var(--safe-r)); padding-top: calc(14px + var(--safe-t)); overflow-y: auto; } .panel.svc .p-scroll { overflow: visible; }
  .svc-split, .cant { grid-template-columns: 1fr; gap: 16px; } .svc-list { max-height: 34vh; } .svc-detail { padding: 22px; } .cant-who canvas { max-height: 30vh; } .cant-cols { grid-template-columns: 1fr; }
  .panel.svc .ph-cred { padding: 8px 14px; } .panel.svc .pf { flex-wrap: wrap; } .panel.svc .pf-hold { display: none; }
}
/* title screen: a generated low-poly key art with a slow drift instead of the live 3D view */
#screen-menu { background: #050a14; overflow: hidden; }
#screen-menu::before { content: ''; position: absolute; inset: 0; background: url(../assets/menu/menu.jpg?v=4) 65% center / cover no-repeat; animation: bgdrift 48s ease-in-out infinite alternate; will-change: transform; }
#screen-menu::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 20, .72), rgba(5, 10, 20, .15) 60%, rgba(5, 10, 20, 0)); pointer-events: none; }
#screen-menu > .menu-box { position: relative; z-index: 3; }
#screen-menu .b-fx, #screen-menu .b-motes { z-index: 2; }
#screen-menu::after { z-index: 1; }
#screen-menu .fx-glow { right: -8%; top: -18%; width: 55%; height: 75%; }
@media (prefers-reduced-motion: reduce) { #screen-menu::before { animation: none; } }
@media (max-width: 860px) {
  .panel.svc .pbody { flex: none; min-height: auto; } .panel.svc .svc-split { flex: none; } .panel.svc .pf { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(transparent, rgba(4, 11, 22, .92) 30%); }
  .cant { flex: none; } .cant-who { flex-direction: row; align-items: center; } .cant-who canvas { width: 30%; max-height: none; aspect-ratio: 4 / 5; }
}
/* cantina conversation */
.panel.svc[data-view="cantina"]::before { background: linear-gradient(rgba(4, 11, 22, .18), rgba(4, 11, 22, .4)), var(--svc-bg) center / cover no-repeat; }
.cant2 { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 22px; }
.cant-card { display: flex; width: min(760px, 58vw); overflow: hidden; animation: cfade .35s ease; } .cant-card canvas { flex: none; width: 190px; height: 228px; object-fit: cover; object-position: 50% 20%; border-right: 1px solid #1f5a86; }
.cant-line { padding: 26px 32px; display: flex; flex-direction: column; justify-content: center; gap: 4px; } .cant-line small { color: #3aa7ee; letter-spacing: 3px; font-size: 12px; } .cant-line b { font-size: 26px; font-weight: 600; color: #49b8ff; } .cant-line p { margin: 8px 0 0; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.55; color: #fff; }
.cant-choices { display: flex; flex-direction: column; gap: 12px; width: min(760px, 58vw); }
.cchoice { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 18px 24px; min-height: 60px; background: rgba(7, 20, 36, .8); border: 1px solid #16456b; border-radius: 6px; color: #eaf4ff; font: inherit; font-size: 17px; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s, border-color .15s; animation: cfade .35s ease; }
.cchoice:hover, .cchoice:focus-visible { background: rgba(20, 80, 130, .9); border-color: #3aa7ee; outline: none; } .cchoice svg { color: #7db6de; flex: none; }
@keyframes cfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .cant2 { align-items: stretch; justify-content: flex-start; } .cant-card, .cant-choices { width: auto; } .cant-card canvas { width: 96px; height: 116px; } .cant-line { padding: 14px 18px; } .cant-line b { font-size: 20px; } .cchoice { padding: 14px 18px; min-height: 52px; font-size: 15px; } }
/* Cantina floor: contacts are found in the room rather than in a menu list. */
.panel.svc[data-view="cantina"]::before { background: linear-gradient(90deg, rgba(3, 10, 22, .30), rgba(3, 10, 22, .08) 52%, rgba(3, 10, 22, .34)), linear-gradient(0deg, rgba(3, 8, 18, .45), transparent 45%), var(--svc-bg) center / cover no-repeat; animation: none; transform: none; }
.cant-floor { flex: 1; min-height: 0; position: relative; overflow: hidden; animation: cfade .35s ease; }
.cant-floor::before { display: none; }
.cant-floor::after { display: none; }
.cant-hint, .cant-spot { z-index: 1; }
.cant-live-canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; background: transparent !important; mix-blend-mode: normal; }
.panel.svc[data-view="cantina"] > .cant-live-stage { position: absolute !important; left: 50%; top: 50%; width: 1672px; height: 941px; z-index: 1 !important; overflow: hidden; pointer-events: none; transform-origin: 50% 50%; }
.cant-live-stage canvas { display: block; width: 1672px; height: 941px; pointer-events: none; mix-blend-mode: screen; background: transparent !important; }
.panel.svc[data-view="cantina"] > .cant-global-life { position: absolute !important; inset: 0; z-index: 1 !important; display: block; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.panel.svc[data-view="cantina"] > .ph, .panel.svc[data-view="cantina"] > .pbody, .panel.svc[data-view="cantina"] > .pf { z-index: 2; }
.cant-global-life > div { position: absolute; inset: 0; }
.cgl-haze i { position: absolute; width: 34vw; height: 19vw; max-width: 580px; max-height: 320px; border-radius: 50%; filter: blur(34px); opacity: .11; background: radial-gradient(ellipse, rgba(78, 141, 255, .52), transparent 68%); animation: cglHaze 17s ease-in-out infinite alternate; }
.cgl-haze i:nth-child(1) { left: 32%; top: 28%; } .cgl-haze i:nth-child(2) { left: -12%; top: 52%; background: radial-gradient(ellipse, rgba(255, 134, 46, .48), transparent 68%); animation-delay: -6s; } .cgl-haze i:nth-child(3) { right: -14%; top: 59%; background: radial-gradient(ellipse, rgba(74, 190, 255, .35), transparent 68%); animation-delay: -11s; }
@keyframes cglHaze { from { opacity: .055; transform: scale(.88); } to { opacity: .14; transform: scale(1.08); } }
.cgl-lamps i { position: absolute; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 203, 114, .23), rgba(255, 139, 44, .09) 32%, transparent 70%); filter: blur(3px); opacity: .25; animation: cglLamp 4.8s ease-in-out infinite; }
.cgl-lamps i:nth-child(1){left:6.2%;top:9%}.cgl-lamps i:nth-child(2){left:11.8%;top:8%;animation-delay:-2.1s}.cgl-lamps i:nth-child(3){left:17%;top:18%;width:118px;height:118px;animation-delay:-.8s}.cgl-lamps i:nth-child(4){left:31%;top:35%;width:95px;height:95px;animation-delay:-3.4s}.cgl-lamps i:nth-child(5){left:91%;top:12%;animation-delay:-1.3s}.cgl-lamps i:nth-child(6){left:96%;top:17%;width:120px;height:120px;animation-delay:-3.1s}.cgl-lamps i:nth-child(7){left:57%;top:54%;width:86px;height:86px;animation-delay:-4.1s}.cgl-lamps i:nth-child(8){left:79%;top:53%;width:86px;height:86px;animation-delay:-2.5s}
@keyframes cglLamp { 0%,100% { opacity: .16; } 45% { opacity: .35; } 51% { opacity: .19; } 57% { opacity: .31; } }
.cgl-window i { position:absolute; width:2px; height:2px; border-radius:50%; background:#e5f5ff; box-shadow:0 0 7px rgba(174,222,255,.75); opacity:.18; animation:cglStar 4.5s ease-in-out infinite; }
.cgl-window i:nth-child(1){left:45%;top:15%}.cgl-window i:nth-child(2){left:50%;top:22%;animation-delay:-1s}.cgl-window i:nth-child(3){left:55%;top:11%;animation-delay:-3s}.cgl-window i:nth-child(4){left:61%;top:25%;animation-delay:-.5s}.cgl-window i:nth-child(5){left:67%;top:16%;animation-delay:-2.5s}.cgl-window i:nth-child(6){left:72%;top:29%;animation-delay:-4s}.cgl-window i:nth-child(7){left:77%;top:19%;animation-delay:-1.5s}.cgl-window i:nth-child(8){left:81%;top:31%;animation-delay:-3.4s}.cgl-window i:nth-child(9){left:47%;top:33%;animation-delay:-2s}.cgl-window i:nth-child(10){left:52%;top:38%;animation-delay:-.8s}.cgl-window i:nth-child(11){left:58%;top:30%;animation-delay:-4.3s}.cgl-window i:nth-child(12){left:64%;top:41%;animation-delay:-2.8s}.cgl-window i:nth-child(13){left:70%;top:35%;animation-delay:-.3s}.cgl-window i:nth-child(14){left:76%;top:44%;animation-delay:-3.8s}.cgl-window i:nth-child(15){left:84%;top:39%;animation-delay:-1.8s}.cgl-window i:nth-child(16){left:88%;top:25%;animation-delay:-2.2s}.cgl-window i:nth-child(17){left:60%;top:20%;animation-delay:-4.6s}.cgl-window i:nth-child(18){left:74%;top:12%;animation-delay:-1.1s}
@keyframes cglStar { 0%,100%{opacity:.08;transform:scale(.65)} 50%{opacity:.65;transform:scale(1)} }
.cgl-beacons i { position:absolute; width:8px; height:8px; border-radius:50%; background:#ff8c78; box-shadow:0 0 14px 4px rgba(255,75,65,.28); opacity:0; animation:cglBeacon 2.8s ease-in-out infinite; }.cgl-beacons i:nth-child(1){left:65%;top:11%}.cgl-beacons i:nth-child(2){left:68%;top:16%;animation-delay:-1.1s}.cgl-beacons i:nth-child(3){left:53%;top:34%;animation-delay:-2.2s}.cgl-beacons i:nth-child(4){left:77%;top:34%;animation-delay:-.7s}.cgl-beacons i:nth-child(5){left:57%;top:19%;animation-delay:-1.7s}.cgl-beacons i:nth-child(6){left:52%;top:26%;animation-delay:-2.4s}.cgl-beacons i:nth-child(7){left:66%;top:43%;animation-delay:-.4s}.cgl-beacons i:nth-child(8){left:75%;top:39%;animation-delay:-1.5s}@keyframes cglBeacon{0%,68%,100%{opacity:0}74%{opacity:.8}79%{opacity:.12}}
.cgl-dust i { position:absolute; width:3px; height:3px; border-radius:50%; background:#dff4ff; box-shadow:0 0 8px rgba(135,207,255,.6); opacity:0; animation:cglDust 10s ease-in-out infinite; }.cgl-dust i:nth-child(1){left:9%;top:72%}.cgl-dust i:nth-child(2){left:17%;top:58%;animation-delay:-6s}.cgl-dust i:nth-child(3){left:28%;top:77%;animation-delay:-2s}.cgl-dust i:nth-child(4){left:38%;top:62%;animation-delay:-8s}.cgl-dust i:nth-child(5){left:48%;top:80%;animation-delay:-4s}.cgl-dust i:nth-child(6){left:58%;top:57%;animation-delay:-.5s}.cgl-dust i:nth-child(7){left:68%;top:84%;animation-delay:-7s}.cgl-dust i:nth-child(8){left:75%;top:68%;animation-delay:-3s}.cgl-dust i:nth-child(9){left:84%;top:79%;animation-delay:-9s}.cgl-dust i:nth-child(10){left:91%;top:56%;animation-delay:-5s}.cgl-dust i:nth-child(11){left:43%;top:90%;animation-delay:-1.5s}.cgl-dust i:nth-child(12){left:62%;top:42%;animation-delay:-7.5s}.cgl-dust i:nth-child(13){left:25%;top:43%;animation-delay:-2.6s}.cgl-dust i:nth-child(14){left:34%;top:70%;animation-delay:-5.4s}.cgl-dust i:nth-child(15){left:54%;top:67%;animation-delay:-3.5s}.cgl-dust i:nth-child(16){left:71%;top:49%;animation-delay:-8.5s}.cgl-dust i:nth-child(17){left:88%;top:45%;animation-delay:-4.5s}.cgl-dust i:nth-child(18){left:15%;top:88%;animation-delay:-.9s}@keyframes cglDust{0%,100%{opacity:0;transform:translate3d(0,15px,0) scale(.6)}35%,68%{opacity:.42}55%{transform:translate3d(9px,-18px,0) scale(1)}}
.cgl-reflections i { position:absolute; height:3px; width:9%; bottom:10%; border-radius:50%; opacity:.12; filter:blur(2px); background:linear-gradient(90deg,transparent,rgba(101,177,255,.8),transparent); animation:cglReflect 4.5s ease-in-out infinite alternate; }.cgl-reflections i:nth-child(1){left:18%;bottom:18%}.cgl-reflections i:nth-child(2){left:40%;bottom:12%;width:13%;animation-delay:-1.2s}.cgl-reflections i:nth-child(3){left:59%;bottom:22%;animation-delay:-3.3s}.cgl-reflections i:nth-child(4){left:72%;bottom:14%;width:15%;animation-delay:-2s}.cgl-reflections i:nth-child(5){left:7%;bottom:28%;animation-delay:-.6s}.cgl-reflections i:nth-child(6){left:87%;bottom:26%;animation-delay:-2.8s}@keyframes cglReflect{from{opacity:.04;transform:scaleX(.75)}to{opacity:.24;transform:scaleX(1.2)}}
@media (prefers-reduced-motion: reduce) { .cant-global-life *, .cant-global-life { animation: none !important; } }
/* Exact source map for cantina-v2.jpg (1672 × 941).  These are deliberately not generic
   decoration: every group corresponds to a visible source in the painted image. */
.cgl-lamps i:nth-child(1){left:7.48%;top:12.75%;width:130px;height:130px}.cgl-lamps i:nth-child(2){left:14.77%;top:11.69%;width:150px;height:150px}.cgl-lamps i:nth-child(3){left:20.22%;top:22.32%;width:110px;height:110px}.cgl-lamps i:nth-child(4){left:90.79%;top:15.94%;width:120px;height:120px}.cgl-lamps i:nth-child(5){left:95.87%;top:19.66%;width:120px;height:120px}
.cgl-candles i { position:absolute; width:100px; height:62px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(255,191,92,.36),rgba(255,125,40,.12) 38%,transparent 72%); filter:blur(4px); opacity:.2; animation:cglCandle 1.35s steps(2,end) infinite; }.cgl-candles i:nth-child(1){left:20.63%;top:76.73%;width:90px}.cgl-candles i:nth-child(2){left:58.31%;top:58.66%;width:55px}.cgl-candles i:nth-child(3){left:61.90%;top:58.45%;width:42px;animation-delay:-.35s}.cgl-candles i:nth-child(4){left:79.07%;top:57.92%;width:55px;animation-delay:-.7s}.cgl-candles i:nth-child(5){left:94.50%;top:79.70%;width:100px;animation-delay:-1.05s}@keyframes cglCandle{0%,100%{opacity:.13;transform:translate(-50%,-50%) scale(.86)}40%{opacity:.44;transform:translate(-50%,-50%) scale(1.08)}65%{opacity:.21;transform:translate(-50%,-50%) scale(.94)}}
.cgl-shelf i { position:absolute; width:125px; height:68px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,rgba(255,172,58,.17),transparent 70%); filter:blur(8px); opacity:.15; animation:cglShelf 3.2s ease-in-out infinite alternate; }.cgl-shelf i:nth-child(1){left:8.37%;top:25.51%}.cgl-shelf i:nth-child(2){left:8.37%;top:34.01%;animation-delay:-.6s}.cgl-shelf i:nth-child(3){left:8.37%;top:42.51%;animation-delay:-1.2s}.cgl-shelf i:nth-child(4){left:3.59%;top:29.76%;animation-delay:-1.8s}.cgl-shelf i:nth-child(5){left:13.16%;top:29.76%;animation-delay:-2.4s}.cgl-shelf i:nth-child(6){left:3.59%;top:40.38%;animation-delay:-2.8s}.cgl-shelf i:nth-child(7){left:13.16%;top:40.38%;animation-delay:-3.1s}@keyframes cglShelf{from{opacity:.07}to{opacity:.24}}
.cgl-ships { clip-path:polygon(43% 7%,91% 7%,91% 51%,43% 51%); overflow:hidden; }.cgl-ships i { position:absolute; width:12px; height:4px; border-radius:50%; background:#d7f2ff; box-shadow:0 0 10px 3px rgba(105,196,255,.78); opacity:.66; animation:cglShip 15s linear infinite; }.cgl-ships i::after{content:'';position:absolute;right:100%;top:1px;width:58px;height:2px;background:linear-gradient(90deg,transparent,rgba(120,190,255,.26));}.cgl-ships i:nth-child(1){left:55%;top:12%;animation-duration:18s}.cgl-ships i:nth-child(2){left:69%;top:19%;animation-delay:-9s;animation-duration:24s;transform:scale(.75)}.cgl-ships i:nth-child(3){left:60%;top:28%;animation-delay:-4s;animation-duration:20s;transform:scale(.58)}.cgl-ships i:nth-child(4){left:77%;top:27%;animation-delay:-14s;animation-duration:28s;transform:scale(.52)}@keyframes cglShip{0%{margin-left:-3%;opacity:0}10%,85%{opacity:.72}100%{margin-left:8%;opacity:0}}
.cgl-beacons i:nth-child(1){left:71.17%;top:10.41%}.cgl-beacons i:nth-child(2){left:73.98%;top:15.94%}.cgl-beacons i:nth-child(3){left:59.81%;top:34.01%}.cgl-beacons i:nth-child(4){left:83.73%;top:34.01%}.cgl-beacons i:nth-child(5){left:63.40%;top:18.60%}.cgl-beacons i:nth-child(6){left:58.91%;top:24.97%}.cgl-beacons i:nth-child(7){left:72.67%;top:42.51%}.cgl-beacons i:nth-child(8){left:81.04%;top:39.85%}
@keyframes cantinaGlow { from { opacity: .45; filter: blur(4px); } to { opacity: .9; filter: blur(9px); } }
@keyframes cantinaSweep { 0%, 22% { transform: translateX(-115%); } 62%, 100% { transform: translateX(115%); } }
.cant-atmo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.cant-atmo i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #d7edff; box-shadow: 0 0 12px 3px rgba(92, 191, 255, .55); opacity: 0; animation: cantSpeck 8s ease-in-out infinite; }
.cant-atmo i:nth-child(1) { left: 8%; top: 70%; animation-delay: -1s; } .cant-atmo i:nth-child(2) { left: 18%; top: 52%; animation-delay: -5s; background: #ffd08a; } .cant-atmo i:nth-child(3) { left: 29%; top: 80%; animation-delay: -2.2s; } .cant-atmo i:nth-child(4) { left: 38%; top: 61%; animation-delay: -6.2s; } .cant-atmo i:nth-child(5) { left: 48%; top: 74%; animation-delay: -3.4s; background: #ffd08a; } .cant-atmo i:nth-child(6) { left: 58%; top: 56%; animation-delay: -.5s; } .cant-atmo i:nth-child(7) { left: 67%; top: 83%; animation-delay: -4.8s; } .cant-atmo i:nth-child(8) { left: 74%; top: 65%; animation-delay: -1.8s; background: #ffd08a; } .cant-atmo i:nth-child(9) { left: 84%; top: 77%; animation-delay: -5.6s; } .cant-atmo i:nth-child(10) { left: 91%; top: 53%; animation-delay: -3s; } .cant-atmo i:nth-child(11) { left: 43%; top: 91%; animation-delay: -7s; background: #ffd08a; } .cant-atmo i:nth-child(12) { left: 62%; top: 40%; animation-delay: -4s; }
@keyframes cantSpeck { 0%, 100% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.65); } 30%, 70% { opacity: .7; } 50% { transform: translate3d(7px, -15px, 0) scale(1); } }
.cant-lamp-life, .cant-bar-life, .cant-table-life { position: absolute; z-index: 0; overflow: hidden; pointer-events: none; }
.cant-lamp-life { inset: 0; mix-blend-mode: screen; }
.cant-lamp-life i { --x: 10%; --y: 14%; --size: 130px; position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 104, .28), rgba(255, 141, 46, .11) 29%, transparent 68%); opacity: .3; filter: blur(3px); will-change: opacity; animation: cantLamp 4.6s ease-in-out infinite; }
.cant-lamp-life i:nth-child(1) { --x: 8.1%; --y: 13.5%; --size: 150px; animation-delay: -1.4s; } .cant-lamp-life i:nth-child(2) { --x: 14.7%; --y: 11%; --size: 150px; animation-delay: -3.2s; } .cant-lamp-life i:nth-child(3) { --x: 20.8%; --y: 21%; --size: 120px; animation-delay: -.7s; } .cant-lamp-life i:nth-child(4) { --x: 43%; --y: 42%; --size: 108px; animation-delay: -2.4s; } .cant-lamp-life i:nth-child(5) { --x: 91.2%; --y: 16%; --size: 165px; animation-delay: -3.8s; } .cant-lamp-life i:nth-child(6) { --x: 96.2%; --y: 21%; --size: 128px; animation-delay: -1.8s; } .cant-lamp-life i:nth-child(7) { --x: 58.5%; --y: 60%; --size: 94px; animation-delay: -4.2s; } .cant-lamp-life i:nth-child(8) { --x: 79%; --y: 59%; --size: 94px; animation-delay: -2.8s; }
@keyframes cantLamp { 0%, 100% { opacity: .21; } 44% { opacity: .47; } 49% { opacity: .27; } 55% { opacity: .43; } }
.cant-bar-life { left: 0; top: 30%; width: 34%; height: 55%; }
.cant-bar-life i { position: absolute; bottom: 5%; width: 46px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse at bottom, rgba(255, 214, 173, .28), rgba(135, 201, 255, .10) 38%, transparent 72%); filter: blur(10px); opacity: 0; animation: cantSteam 7.5s ease-out infinite; }
.cant-bar-life i:nth-child(1) { left: 31%; animation-delay: -1s; } .cant-bar-life i:nth-child(2) { left: 66%; animation-delay: -4s; animation-duration: 9s; } .cant-bar-life i:nth-child(3) { left: 14%; animation-delay: -6.5s; animation-duration: 11s; }
@keyframes cantSteam { 0% { opacity: 0; transform: translate(0, 22px) scale(.65); } 22% { opacity: .35; } 88% { opacity: .04; transform: translate(16px, -115px) scale(1.45); } 100% { opacity: 0; transform: translate(19px, -128px) scale(1.55); } }
.cant-table-life { inset: 0; mix-blend-mode: screen; }
.cant-table-life i { position: absolute; width: 100px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, rgba(82, 191, 255, .38), rgba(255, 183, 78, .18) 35%, transparent 72%); filter: blur(6px); opacity: .22; animation: cantTableGlow 3.8s ease-in-out infinite alternate; }
.cant-table-life i:nth-child(1) { left: 49%; top: 72%; } .cant-table-life i:nth-child(2) { left: 69%; top: 68%; animation-delay: -1.2s; } .cant-table-life i:nth-child(3) { left: 82%; top: 78%; animation-delay: -2.4s; } .cant-table-life i:nth-child(4) { left: 34%; top: 85%; animation-delay: -3.1s; }
@keyframes cantTableGlow { from { opacity: .14; transform: scaleX(.8); } to { opacity: .48; transform: scaleX(1.2); } }
.cant-focus .cant-spot:not(.chosen) { opacity: .28; transition: opacity .14s ease; } .cant-focus .cant-spot.chosen { border-color: #dff7ff; box-shadow: 0 0 0 2px rgba(89, 203, 255, .38), 0 0 36px rgba(71, 177, 255, .55); transform: translate(-50%, calc(-100% - 5px)) scale(1.04); }
.cant-focus .spot-crew.chosen { transform: translate(-50%, calc(-100% - 5px)) scale(1.04); }
.cant-hint { position: absolute; top: 2%; left: 1%; max-width: 355px; padding: 15px 18px; border-left: 2px solid #49b8ff; background: linear-gradient(90deg, rgba(5, 18, 35, .86), rgba(5, 18, 35, .15)); text-shadow: 0 2px 10px #000; pointer-events: none; }
.cant-hint small, .cant-hint b, .cant-hint span { display: block; } .cant-hint small { color: #49b8ff; letter-spacing: 2.4px; font-size: 11px; } .cant-hint b { margin: 5px 0; color: #fff; font-size: 21px; font-weight: 600; } .cant-hint span { color: #b6cadb; font-size: 13px; line-height: 1.45; }
.cant-spot { position: absolute; display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 10px 15px 10px 10px; color: #eaf6ff; text-align: left; font: inherit; background: rgba(5, 19, 37, .88); border: 1px solid #247caf; border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, .45), inset 0 0 18px rgba(36, 136, 202, .07); cursor: pointer; backdrop-filter: blur(7px); transform: translate(-50%, -100%); transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.cant-spot::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; background: inherit; border-right: inherit; border-bottom: inherit; transform: translateX(-50%) rotate(45deg); }
.cant-spot:hover, .cant-spot:focus-visible { transform: translate(-50%, calc(-100% - 4px)) scale(1.025); background: rgba(11, 47, 78, .96); border-color: #6ad0ff; outline: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .55), 0 0 20px rgba(62, 174, 255, .22); }
.cant-spot i { display: grid; place-items: center; width: 34px; height: 34px; color: #6ad0ff; font-style: normal; font-size: 28px; line-height: 1; border-right: 1px solid rgba(88, 180, 240, .3); padding-right: 10px; } .cant-spot span { display: flex; flex-direction: column; gap: 3px; } .cant-spot b { color: #fff; font-size: 14px; letter-spacing: .35px; } .cant-spot small { color: #79c4f2; font-size: 10px; letter-spacing: 1.5px; }
.cant-spot.urgent { border-color: #e2a72e; } .cant-spot.urgent i, .cant-spot.urgent small { color: #ffd23a; } .cant-spot.urgent { animation: cantpulse 1.8s ease-in-out infinite; } @keyframes cantpulse { 50% { box-shadow: 0 6px 25px rgba(0,0,0,.45), 0 0 20px rgba(255, 191, 57, .3); } }
.spot-bar { left: 9%; top: 32%; } .spot-job { left: 26%; top: 37%; } .spot-story { left: 41%; top: 47%; } .spot-info { left: 64%; top: 47%; } .spot-crew { left: 83%; top: 45%; } .spot-crew:hover, .spot-crew:focus-visible { transform: translate(-50%, calc(-100% - 4px)) scale(1.025); }
.panel.svc[data-view="cantina"] .cant2 { align-items: center; } .panel.svc[data-view="cantina"] .cant-card { width: min(1040px, 76vw); min-height: 280px; background: rgba(4, 17, 34, .91); border-color: #1b78b0; box-shadow: 0 18px 60px rgba(0, 0, 0, .55); } .panel.svc[data-view="cantina"] .cant-card canvas { width: 260px; height: 310px; } .panel.svc[data-view="cantina"] .cant-line { padding: 34px 40px; } .panel.svc[data-view="cantina"] .cant-line b { font-size: 31px; letter-spacing: 1px; } .panel.svc[data-view="cantina"] .cant-line p { margin-top: 14px; padding: 18px 22px; background: rgba(5, 25, 48, .8); border: 1px solid #1a5f8e; border-radius: 6px; }
.panel.svc[data-view="cantina"] .cant-choices { width: min(1040px, 76vw); align-self: center; } .panel.svc[data-view="cantina"] .cchoice { min-height: 54px; padding: 14px 20px; background: rgba(5, 21, 41, .91); } .cant-choices.waiting { opacity: .36; pointer-events: none; transform: translateY(5px); } .cant-choices { transition: opacity .2s ease, transform .2s ease; } .cant-line p.typing { cursor: pointer; } .cant-line p.typing::after { content: '▌'; display: inline-block; margin-left: 4px; color: #6ad0ff; animation: cantCursor .65s steps(2) infinite; } @keyframes cantCursor { 50% { opacity: 0; } } .cant-return { align-self: flex-start; margin-top: 4px; padding: 10px 14px; color: #9dc8e4; background: transparent; border: 0; cursor: pointer; font: inherit; font-size: 14px; } .cant-return:hover, .cant-return:focus-visible { color: #fff; text-decoration: underline; outline: none; }
@media (max-width: 860px) { .cant-floor { overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 10px 4px; background: linear-gradient(180deg, rgba(5, 14, 28, .7), rgba(5, 14, 28, .92)); } .panel.svc[data-view="cantina"] > .cant-live-stage { display: none !important; } .cant-hint, .cant-spot { position: relative; inset: auto; } .cant-hint { margin-bottom: 4px; } .cant-spot, .cant-spot:hover, .cant-spot:focus-visible, .cant-focus .cant-spot.chosen, .cant-focus .spot-crew.chosen { transform: none; width: 100%; min-width: 0; } .cant-spot.urgent { animation: none; } .cant-spot::after, .cant-lamp-life, .cant-bar-life, .cant-table-life { display: none; } .panel.svc[data-view="cantina"] .cant-card { width: 100%; min-height: 0; } .panel.svc[data-view="cantina"] .cant-card canvas { width: 120px; height: 150px; } .panel.svc[data-view="cantina"] .cant-line { padding: 16px; } .panel.svc[data-view="cantina"] .cant-line b { font-size: 21px; } .panel.svc[data-view="cantina"] .cant-line p { padding: 12px; margin-top: 8px; font-size: 15px; } .panel.svc[data-view="cantina"] .cant-choices { width: 100%; align-self: stretch; } }
/* equipment & repair */
.panel.svc .p-scroll { display: flex; flex-direction: column; }
.opts { display: flex; flex-direction: column; gap: 14px; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; background: rgba(20, 44, 70, .55); border: 1px solid #16456b; border-radius: 6px; }
.opt b { display: block; font-size: 18px; font-weight: 500; color: #fff; } .opt small { display: block; margin-top: 6px; color: #9db8cc; font-size: 14px; line-height: 1.5; }
.opt-r { display: flex; align-items: center; gap: 12px; flex: none; } .opt-r em { font-style: normal; color: #ffd23a; font-size: 17px; margin-right: 8px; white-space: nowrap; } .opt-r .btn { min-height: 46px; padding: 0 22px; } .opt-r .btn:disabled { opacity: .4; }
.rep-status { padding: 30px 28px; gap: 14px; } .rep-status small { color: #3aa7ee; letter-spacing: 3px; font-size: 12px; } .rep-status h3 { margin: 0 0 8px; font-size: 28px; font-weight: 600; color: #fff; }
.gauge { height: 14px; border-radius: 7px; background: rgba(80, 140, 200, .2); overflow: hidden; } .gauge i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #1c8a5a, #6bff9a); } .gauge.mid i { background: linear-gradient(90deg, #a87a1c, #ffd23a); } .gauge.low i { background: linear-gradient(90deg, #a83a2a, #ff7a6a); }
.gauge-n { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .gauge-n b { font-size: 40px; font-weight: 500; } .gauge-n span { color: #8fb4d0; font-size: 14px; }
.rep-kv { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid #1a4468; color: #b6cadb; } .rep-kv b { color: #fff; font-weight: 500; }
@media (max-width: 860px) { .opt { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; } .opt-r { justify-content: space-between; } }
.rep-status > * { flex: none; } .rep-status .gauge { min-height: 14px; }
.rep-status .gauge { display: block; }
.rep-status .gauge { width: 100%; }
/* information & galaxy map */
#info-map { flex: 1; min-height: 0; display: flex; background: none !important; border: 0 !important; backdrop-filter: none !important; } #info-map > .map-split { flex: 1; }
.map-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.map-pane { padding: 26px 30px; display: flex; flex-direction: column; justify-content: center; gap: 18px; min-height: 0; } .map-pane .galmap { width: 100%; max-height: 100%; flex: 1; min-height: 0; }
.map-tip { margin: 0; color: #9db8cc; font-size: 14px; line-height: 1.55; }
.opt.bx { display: block; } .opt.bx b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .opt.bx .pd { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .opt.bx .lbl { color: #8fb4d0; font-size: 12px; letter-spacing: 1.5px; min-width: 78px; text-transform: uppercase; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.loc-card { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .loc-pic { flex: 1; min-height: 160px; background: center / cover no-repeat; border-bottom: 1px solid #16456b; } .loc-body { padding: 24px 28px; } .loc-body h3 { margin: 0; font-size: 26px; font-weight: 600; color: #fff; } .loc-sub { display: block; margin: 6px 0 14px; color: #3aa7ee; font-size: 15px; }
.news-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 26px; } .news-item { padding: 20px 4px 20px 22px; border-left: 3px solid #1f6a9a; margin: 10px 0; } .news-item + .news-item { border-top: 0; } .news-item small { color: #3aa7ee; letter-spacing: 3px; font-size: 11px; } .news-item p { margin: 8px 0 0; font-size: 17px; line-height: 1.6; color: #e6f2fb; }
.ov-wrap .map-split { height: min(64vh, 560px); }
@media (max-width: 860px) { .map-split { grid-template-columns: 1fr; } .map-pane { padding: 14px; } .loc-pic { min-height: 140px; flex: none; height: 160px; } }

/* journal & messages: same glass windows */
.ov-box.svc-ov { width: min(1180px, 94vw); height: min(80vh, 740px); max-height: none; background: rgba(6, 16, 30, .94); border: 1px solid #1f5a86; border-radius: 10px; backdrop-filter: blur(10px); overflow: hidden; }
.svc-ov .ov-head { padding: 22px 32px; border-bottom: 1px solid #16456b; color: #dff3ff; font-size: 16px; letter-spacing: 6px; } .svc-ov .ov-head .x { font-size: 20px; opacity: .7; } .svc-ov .ov-head .x:hover { opacity: 1; }
.svc-ov .ov-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 26px 32px 30px; overflow: hidden; }
.svc-ov .svc-tabs { display: flex; gap: 10px; margin-bottom: 22px; } .svc-ov .tab { padding: 11px 26px; background: rgba(8, 22, 42, .7); border: 1px solid #16456b; border-radius: 6px; color: #b6cadb; cursor: pointer; font-size: 15px; letter-spacing: 1px; } .svc-ov .tab:hover { border-color: #3aa7ee; color: #fff; } .svc-ov .tab.on { background: rgba(28, 74, 118, .85); border-color: #3aa7ee; color: #fff; }
.svc-ov .svc-split { flex: 1; min-height: 0; }
.li.unread { border-color: #ffd23a; } .pill { font-style: normal; font-size: 11px; letter-spacing: 1.5px; padding: 4px 10px; border-radius: 10px; border: 1px solid #2b4d6e; color: #8fb4d0; flex: none; }
.pill.st-new { color: #ffd23a; border-color: #ffd23a; } .pill.st-accepted { color: #6bff9a; border-color: #2a7a4a; } .pill.st-declined, .pill.st-expired { color: #ff8a80; border-color: #7a3a32; }
.msg-from { display: flex; align-items: center; gap: 20px; } .msg-from canvas { width: 74px; height: 90px; object-fit: cover; border: 1px solid #1f5a86; border-radius: 4px; } .msg-from small { display: block; color: #3aa7ee; letter-spacing: 3px; font-size: 11px; } .msg-from b { display: block; font-size: 20px; font-weight: 500; margin: 2px 0; } .msg-from span { color: #8fb4d0; font-size: 14px; }
.msg-text p { margin: 0 0 14px; }
.j-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; margin-top: 6px; } .j-stats small { display: block; color: #8fb4d0; letter-spacing: 2px; font-size: 11px; margin-bottom: 6px; } .j-stats b { font-size: 30px; font-weight: 500; }
.svc-ov .rep-status { padding: 30px 28px; } .svc-ov .rep-status h3 { margin: 0; } .svc-ov .rep-status h3 + h3, .svc-ov .rep-status .rep-kv + h3 { margin-top: 22px; }
.perm-grid { flex: 1; }
@media (max-width: 860px) { .ov-box.svc-ov { width: 100vw; height: 100vh; border-radius: 0; } .svc-ov .ov-body { padding: 16px; } .svc-ov .ov-head { padding: 14px 16px; letter-spacing: 3px; } .svc-ov .svc-split { grid-template-columns: 1fr; overflow-y: auto; } .svc-ov .svc-list { max-height: 30vh; } }

/* =================== quick play =================== */
#screen-quick { position: absolute; inset: 0; z-index: 25; display: none; flex-direction: column; padding: calc(34px + var(--safe-t)) calc(56px + var(--safe-r)) calc(30px + var(--safe-b)) calc(56px + var(--safe-l)); background: #050a14; overflow: hidden; }
#screen-quick::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(5, 10, 20, .55), rgba(5, 10, 20, .8)), url(../assets/menu/menu.jpg?v=4) 65% center / cover no-repeat; animation: bgdrift 48s ease-in-out infinite alternate; pointer-events: none; }
#screen-quick > * { position: relative; z-index: 1; }
.qp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; } .qp-head h1 { margin: 0; font-weight: 500; letter-spacing: 10px; font-size: clamp(24px, 3vw, 38px); } .qp-head small { color: #49b8ff; letter-spacing: 4px; font-size: 12px; }
.qp-head .backbtn { background: rgba(8, 22, 42, .82); min-height: 52px; padding: 0 26px; }
.qp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.5fr); gap: 32px; }
.qp-list { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.qp-card { display: flex; align-items: center; gap: 20px; text-align: left; padding: 20px 24px; background: rgba(7, 20, 36, .78); border: 1px solid #16456b; border-radius: 6px; color: #eaf4ff; cursor: pointer; font: inherit; backdrop-filter: blur(6px); }
.qp-card:hover { border-color: #3aa7ee; } .qp-card.on { background: rgba(28, 74, 118, .85); border-color: #3aa7ee; } .qp-card i { font-style: normal; font-size: 30px; color: #49b8ff; width: 40px; text-align: center; flex: none; }
.qp-card span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .qp-card b { font-size: 19px; font-weight: 500; } .qp-card small { color: #9db8cc; font-size: 13px; line-height: 1.45; } .qp-card em { font-style: normal; color: #ffd23a; font-size: 13px; letter-spacing: 1.5px; flex: none; }
.qp-card.school { margin-top: auto; border-style: dashed; }
.qp-detail { padding: 30px 36px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; min-height: 0; }
.qp-diff { display: flex; gap: 10px; } .qp-diff button { padding: 10px 26px; background: rgba(20, 44, 70, .6); border: 1px solid #16456b; border-radius: 6px; color: #b6cadb; cursor: pointer; font: inherit; } .qp-diff button.on { background: rgba(28, 74, 118, .9); border-color: #3aa7ee; color: #fff; }
.qp-text p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #d6e6f3; }
.qp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 24px; padding: 18px 0; border-top: 1px solid #1a4468; border-bottom: 1px solid #1a4468; } .qp-facts small { display: block; color: #8fb4d0; letter-spacing: 2px; font-size: 11px; margin-bottom: 6px; } .qp-facts b { font-size: 18px; font-weight: 500; color: #fff; }
.qp-seed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .qp-seed label { color: #8fb4d0; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; } .qp-seed input { width: 110px; padding: 11px 14px; background: rgba(4, 12, 24, .85); border: 1px solid #1f5a86; border-radius: 6px; color: #fff; font: inherit; font-size: 17px; letter-spacing: 2px; } .qp-seed .btn { min-height: 46px; }
.qp-detail .dt-btns { margin-top: auto; }
.qp-modal { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgba(2, 6, 14, .72); padding: 20px; } .qp-modal-box { max-width: 560px; padding: 34px 38px; } .qp-modal-box h3 { margin: 0 0 12px; font-size: 26px; } .qp-modal-box p { margin: 0 0 24px; line-height: 1.6; color: #cfe0ee; font-size: 16px; } .qp-modal-box .dt-btns { flex-wrap: wrap; }
/* in-flight */
#quick-hud { position: fixed; inset: 0; z-index: 12; pointer-events: none; display: none; } body.quick .hcard.mission, body.quick #hud-comms-box { }
.qh-top { position: absolute; top: calc(18px + var(--safe-t)); left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 2px 12px #000; } .qh-top small { display: block; color: #49b8ff; letter-spacing: 4px; font-size: 12px; } .qh-top b { font-size: 38px; font-weight: 500; font-variant-numeric: tabular-nums; }
.qh-obj { display: none; } .qh-hint { position: absolute; top: calc(92px + var(--safe-t)); left: 50%; transform: translateX(-50%); color: #cfe6f6; font-size: 15px; text-shadow: 0 1px 8px #000; text-align: center; max-width: 80vw; }
.qh-skip { position: absolute; top: calc(18px + var(--safe-t)); right: calc(20px + var(--safe-r)); pointer-events: auto; padding: 10px 20px; background: rgba(8, 22, 42, .85); border: 1px solid #39b6ff; color: #dff3ff; border-radius: 6px; cursor: pointer; font: inherit; }
.qh-count { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(.6); font-size: clamp(80px, 14vw, 180px); font-weight: 600; color: #fff; text-shadow: 0 0 40px rgba(73, 184, 255, .8); opacity: 0; transition: opacity .2s, transform .3s; } .qh-count.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#quick-panel { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 6, 14, .5); }
.qp-brief { width: min(720px, 100%); padding: 34px 40px; display: flex; flex-direction: column; gap: 16px; } .qp-brief small { color: #3aa7ee; letter-spacing: 3px; font-size: 12px; } .qp-brief h2 { margin: 0; font-size: 30px; font-weight: 600; } .qp-brief .dt-btns { flex-wrap: wrap; margin-top: 8px; }
.qr-stars { font-size: 58px; letter-spacing: 8px; color: #ffd23a; text-align: center; text-shadow: 0 0 24px rgba(255, 210, 58, .5); } .qr-stars.fail { color: #ff6a5a; text-shadow: none; }
.qr-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 16px; padding: 16px 0; border-top: 1px solid #1a4468; border-bottom: 1px solid #1a4468; } .qr-rows small { display: block; color: #8fb4d0; letter-spacing: 2px; font-size: 11px; margin-bottom: 6px; } .qr-rows b { font-size: 22px; font-weight: 500; }
.qr-note { color: #6bff9a; font-size: 14px; min-height: 18px; }
@media (max-width: 860px) { #screen-quick { padding: calc(14px + var(--safe-t)) 16px calc(14px + var(--safe-b)); overflow-y: auto; } .qp-body { grid-template-columns: 1fr; gap: 16px; } .qp-list { overflow: visible; } .qp-detail { padding: 22px; overflow: visible; } .qp-brief { padding: 22px; } }
body.quick #credits-box, body.quick #cargo-box, body.quick #ai-hud { display: none !important; }

/* quick play result screen: the frozen 3D scene on the left, the score card on the right */
body.qr-on #hud, body.qr-on #quick-hud { opacity: 0; transition: opacity .4s; pointer-events: none; }
body.qr-on #quick-panel { display: block !important; padding: 0; align-items: normal; background: linear-gradient(90deg, rgba(3, 8, 18, 0) 0, rgba(3, 8, 18, .1) 38%, rgba(3, 8, 18, .86) 68%, rgba(3, 8, 18, .94) 100%); opacity: 0; transition: opacity .5s; overflow: hidden; }
body.qr-on #quick-panel.in { opacity: 1; }
.qr-brand { position: absolute; top: calc(26px + var(--safe-t)); left: calc(48px + var(--safe-l)); display: flex; align-items: center; gap: 18px; } .qr-brand h4 { margin: 0; font-weight: 500; letter-spacing: 8px; font-size: 26px; } .qr-brand small { color: #49b8ff; letter-spacing: 5px; font-size: 13px; }
.qr-total { position: absolute; top: calc(24px + var(--safe-t)); right: calc(48px + var(--safe-r)); padding: 12px 26px 12px 22px; background: rgba(8, 22, 42, .85); border: 1px solid #1f5a86; border-radius: 6px; display: grid; grid-template-columns: auto auto; gap: 0 18px; align-items: center; } .qr-total small { grid-column: 1 / 3; color: #49b8ff; letter-spacing: 3px; font-size: 11px; } .qr-total b { font-size: 28px; font-weight: 500; } .qr-total i { font-style: normal; color: #ffd23a; font-size: 26px; justify-self: end; } .qr-total b.pop { animation: starpop .5s; color: #ffd23a; }
.qr-col { position: absolute; right: calc(5vw + var(--safe-r)); top: 50%; width: min(512px, 36.8vw); max-height: calc(100dvh - 28px - var(--safe-t) - var(--safe-b)); display: flex; flex-direction: column; transform: translate(50px, -50%); opacity: 0; transition: opacity .55s, transform .55s cubic-bezier(.2, .8, .2, 1); } #quick-panel.in .qr-col { opacity: 1; transform: translate(0, -50%); }
.qr-col h1 { margin: 0; font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; letter-spacing: 2px; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); } .qr-col.bad h1 { color: #ff8a7a; }
.qr-col h5 { margin: 8px 0 20px; font-size: 16px; font-weight: 600; letter-spacing: 5px; color: #3aa7ee; } .qr-col.bad h5 { color: #ff8a7a; }
.qr-card { padding: 0; min-height: 0; overflow: auto; background: rgba(6, 18, 34, .8); }
.qr-top { display: flex; align-items: center; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #1a4468; }
.qr-stars { display: flex; gap: 8px; flex: none; } .qr-star { font-size: 46px; line-height: 1; color: #2a394b; transform: scale(.7); transition: color .2s; } .qr-star.on { color: #ffd23a; text-shadow: 0 0 22px rgba(255, 210, 58, .65); animation: starpop .55s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.qr-stars.gold .qr-star.on { text-shadow: 0 0 30px rgba(255, 220, 90, 1); filter: brightness(1.15); } .qr-x { font-size: 44px; color: #ff6a5a; }
@keyframes starpop { 0% { transform: scale(.4); opacity: .3; } 60% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
.qr-grade { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; min-width: 0; } .qr-grade.on { opacity: 1; transform: none; } .qr-grade b { display: block; color: #3aa7ee; letter-spacing: 3px; font-size: 15px; margin-bottom: 6px; } .qr-col.bad .qr-grade b { color: #ff8a7a; } .qr-grade span { color: #cfe0ee; font-size: 15px; line-height: 1.5; } .qr-grade.solo { padding: 26px 28px; }
.qr-table { padding: 6px 24px; }
.qr-row { display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: baseline; gap: 12px; padding: 9px 0; opacity: 0; transform: translateX(16px); transition: opacity .3s, transform .3s; } .qr-row.on { opacity: 1; transform: none; } .qr-row + .qr-row { border-top: 1px solid rgba(26, 68, 104, .55); }
.qr-row span { color: #9fc0d8; letter-spacing: 1px; font-size: 14px; } .qr-row b { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; } .qr-row em { font-style: normal; font-size: 14px; min-width: 76px; text-align: right; } .qr-row em.good { color: #6bff9a; } .qr-row em.badd { color: #ff8a7a; }
.qr-prog { padding: 12px 24px 14px; border-top: 1px solid #1a4468; opacity: 0; transition: opacity .4s; } .qr-prog.on { opacity: 1; } .qr-prog small { display: block; color: #3aa7ee; letter-spacing: 3px; font-size: 12px; margin-bottom: 8px; } .qr-prog > div { display: flex; gap: 16px; flex-wrap: wrap; }
.pi { display: inline-flex; align-items: center; gap: 10px; color: #cfe0ee; font-size: 15px; } .pi i { font-style: normal; color: #ffd23a; font-size: 22px; } .pi b { font-size: 18px; font-weight: 500; color: #fff; } .pi.flaw i, .pi.flaw b { color: #6bff9a; } .pi.rec i, .pi.rec b { color: #ffd23a; }
.qr-btns { display: flex; gap: 10px; flex-wrap: wrap; flex: none; margin-top: 14px; opacity: 0; pointer-events: none; transition: opacity .4s; } .qr-btns.on { opacity: 1; pointer-events: auto; } .qr-btns .btn.big { min-height: 52px; padding: 0 24px; font-size: 16px; }
.qr-note { margin-top: 10px; color: #6bff9a; font-size: 14px; min-height: 18px; }
.qr-esc { position: absolute; left: calc(48px + var(--safe-l)); bottom: calc(34px + var(--safe-b)); padding: 16px 26px; background: rgba(8, 22, 42, .8); border: 1px solid #1f5a86; color: #dff3ff; border-radius: 4px; cursor: pointer; font: inherit; opacity: 0; pointer-events: none; transition: opacity .4s; } .qr-esc.on { opacity: 1; pointer-events: auto; }
@media (max-width: 860px) { .qr-col { right: 4vw; left: 4vw; width: auto; top: auto; bottom: calc(16px + var(--safe-b)); transform: translateY(40px); } #quick-panel.in .qr-col { transform: none; } body.qr-on #quick-panel { background: linear-gradient(rgba(3, 8, 18, .1), rgba(3, 8, 18, .92) 45%); } .qr-brand { left: 16px; } .qr-brand h4 { font-size: 18px; letter-spacing: 4px; } .qr-total { right: 14px; } .qr-star { font-size: 32px; } .qr-top { padding: 16px; gap: 14px; flex-direction: column; align-items: flex-start; } .qr-col h1 { font-size: 26px; } .qr-row { padding: 9px 0; } .qr-row b { font-size: 19px; } .qr-esc { display: none; } .qr-table { padding: 4px 18px; } .qr-prog { padding: 14px 18px; } }
/* quick play: speed lines and the boost flash */
#quick-speed { position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0; display: none; transition: opacity .15s; background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(190, 225, 255, 0) 0deg 3deg, rgba(190, 225, 255, .5) 3.2deg 3.5deg, rgba(190, 225, 255, 0) 3.7deg 7deg); -webkit-mask-image: radial-gradient(ellipse at 50% 52%, transparent 34%, #000 92%); mask-image: radial-gradient(ellipse at 50% 52%, transparent 34%, #000 92%); animation: speedjit .12s steps(2) infinite; }
body.quick #quick-speed { display: block; } body.qr-on #quick-speed { display: none; }
@keyframes speedjit { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.03) rotate(1.5deg); } 100% { transform: scale(1) rotate(0deg); } }
.qh-boost { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(.6); font-size: clamp(40px, 6vw, 84px); font-weight: 700; letter-spacing: 8px; color: #ffe14a; text-shadow: 0 0 34px rgba(255, 210, 40, .9); opacity: 0; } .qh-boost.on { animation: boostflash 1.1s ease-out forwards; }
@keyframes boostflash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
@media (prefers-reduced-motion: reduce) { #quick-speed { animation: none; } }
#quick-speed { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; animation: none !important; opacity: 1 !important; }
#quick-arrow { position: fixed; left: 50%; top: 52%; z-index: 13; width: 64px; height: 64px; pointer-events: none; opacity: 0; color: #5be6ff; filter: drop-shadow(0 0 10px rgba(91, 230, 255, .9)); transition: opacity .15s; display: none; transform-origin: 50% 50%; } #quick-arrow.behind { color: #ffb14a; filter: drop-shadow(0 0 10px rgba(255, 177, 74, .9)); }
#quick-arrow-label { position: fixed; left: 50%; top: calc(52% + 96px); transform: translateX(-50%); z-index: 13; pointer-events: none; opacity: 0; color: #cfe6f6; font-size: 13px; letter-spacing: 2px; text-shadow: 0 1px 8px #000; display: none; }
body.quick #quick-arrow, body.quick #quick-arrow-label { display: block; } body.qr-on #quick-arrow, body.qr-on #quick-arrow-label { display: none; }
.qh-pos { position: absolute; top: calc(66px + var(--safe-t)); left: 50%; transform: translateX(-50%); color: #ffd23a; letter-spacing: 4px; font-size: 14px; font-weight: 600; text-shadow: 0 2px 10px #000; }
.qh-pos { top: calc(70px + var(--safe-t)); } .qh-hint { top: calc(98px + var(--safe-t)); }

/* =================== quick play menu: five mission cards and one detail panel =================== */
#screen-quick { padding: calc(24px + var(--safe-t)) calc(48px + var(--safe-r)) calc(28px + var(--safe-b)) calc(48px + var(--safe-l)); }
#screen-quick::before { background: linear-gradient(rgba(5, 10, 24, .45), rgba(5, 10, 24, .7)), url(../assets/menu/menu.jpg?v=4) 70% center / cover no-repeat; }
.qk-head { display: flex; justify-content: space-between; align-items: center; } .qk-brand { display: flex; align-items: center; gap: 18px; } .qk-brand h4 { margin: 0; font-weight: 500; letter-spacing: 8px; font-size: 26px; } .qk-brand small { color: #49b8ff; letter-spacing: 5px; font-size: 12px; }
.qk-total { padding: 12px 24px; background: rgba(8, 22, 42, .85); border: 1px solid #1f5a86; border-radius: 6px; display: grid; grid-template-columns: auto auto; gap: 0 18px; align-items: center; } .qk-total small { grid-column: 1 / 3; color: #49b8ff; letter-spacing: 3px; font-size: 11px; } .qk-total b { font-size: 28px; font-weight: 500; } .qk-total i { font-style: normal; color: #ffd23a; font-size: 26px; justify-self: end; }
.qk-title { margin: 18px 0 20px; } .qk-title h1 { margin: 0; font-size: clamp(38px, 5vw, 66px); font-weight: 800; letter-spacing: 4px; line-height: 1; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); } .qk-title small { display: block; margin-top: 10px; color: #49b8ff; letter-spacing: 8px; font-size: 15px; }
.qk-stage { flex: 1; min-height: 0; display: flex; }
.qk-pick { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 16px 22px; }
.qk-pick-info { display: flex; align-items: center; gap: 16px; min-width: 0; }
.qk-pick-info i { font-style: normal; font-size: 34px; color: #49b8ff; line-height: 1; flex: none; }
.qk-pick-info h2 { margin: 0; font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.qk-pick-info small { color: #8fb4d0; letter-spacing: 2px; font-size: 12px; }
.qk-pick .qs-go { margin: 0; width: auto; min-height: 54px; padding: 0 30px; font-size: 17px; letter-spacing: 2px; flex: none; }
.qk-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; min-height: 0; padding: 10px 0 6px; }
.qk-card { --qk: #49b8ff; --qk-rgb: 73,184,255; display: flex; flex-direction: column; min-height: 0; padding: 0; text-align: center; background: linear-gradient(160deg, rgba(var(--qk-rgb), .24), rgba(5, 15, 31, .94) 42%); border: 1px solid rgba(var(--qk-rgb), .55); border-radius: 10px; overflow: hidden; color: #fff; cursor: pointer; font: inherit; backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.qk-card:hover { border-color: var(--qk); transform: translateY(-3px); box-shadow: 0 0 24px rgba(var(--qk-rgb), .32), inset 0 1px 0 rgba(255,255,255,.12); } .qk-card.on { border: 2px solid var(--qk); transform: translateY(-8px); box-shadow: 0 0 36px rgba(var(--qk-rgb), .58), inset 0 1px 0 rgba(255,255,255,.15); background: linear-gradient(160deg, rgba(var(--qk-rgb), .36), rgba(6, 20, 40, .95) 44%); }
.qk-top { padding: 16px 10px 12px; background: linear-gradient(90deg, rgba(var(--qk-rgb), .20), transparent 72%); border-bottom: 1px solid rgba(var(--qk-rgb), .25); } .qk-top b { display: block; font-size: clamp(15px, 1.5vw, 22px); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .qk-top small { display: block; margin-top: 6px; color: var(--qk); letter-spacing: 4px; font-size: 12px; }
.qk-img { position: relative; flex: 1; min-height: 120px; background: var(--img) center / cover no-repeat, linear-gradient(#0d2a4a, #06121f); } .qk-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--qk-rgb), .20)); mix-blend-mode: screen; }
.qk-bot { padding: 14px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; background: linear-gradient(160deg, rgba(var(--qk-rgb), .20), rgba(4, 12, 26, .92) 78%); border-top: 1px solid rgba(var(--qk-rgb), .28); } .qk-bot i { font-style: normal; font-size: 30px; color: var(--qk); line-height: 1; text-shadow: 0 0 14px rgba(var(--qk-rgb), .55); }
.qk-hunt { --qk: #ff7869; --qk-rgb: 255,120,105; } .qk-canyon { --qk: #ff8f4f; --qk-rgb: 255,143,79; } .qk-trench { --qk: #ffb15d; --qk-rgb: 255,177,93; } .qk-school { --qk: #70e7ad; --qk-rgb: 112,231,173; } .qk-beacons { --qk: #73d9ff; --qk-rgb: 115,217,255; } .qk-race { --qk: #ffd05b; --qk-rgb: 255,208,91; } .qk-survive { --qk: #c18cff; --qk-rgb: 193,140,255; } .qk-rhythm { --qk: #f176ff; --qk-rgb: 241,118,255; }
.qk-bot span { font-size: 15px; line-height: 1.4; color: #dbe9f5; min-height: 42px; } .qk-bot em { font-style: normal; color: #ffd23a; letter-spacing: 2px; font-size: 14px; }
.qk-side { display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.qs-img { height: 26%; min-height: 110px; background: var(--img) center 30% / cover no-repeat, linear-gradient(#0d2a4a, #06121f); border-bottom: 1px solid #16456b; }
.qs-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.qs-body h2 { margin: 0; font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; } .qs-body > small { color: #49b8ff; letter-spacing: 4px; font-size: 13px; margin-top: -8px; }
.qs-body p { margin: 0; font-size: 15px; line-height: 1.6; color: #cfe0ee; }
.qs-rows { border-top: 1px solid #1a4468; } .qs-rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(26, 68, 104, .6); } .qs-rows span { color: #8fb4d0; letter-spacing: 2px; font-size: 12px; } .qs-rows b { font-size: 17px; font-weight: 500; text-align: right; color: #fff; }
.qs-body .qp-diff button { padding: 9px 20px; } .qs-body .qp-seed input { width: 92px; padding: 9px 12px; } .qs-body .qp-seed .btn { min-height: 42px; padding: 0 14px; font-size: 14px; }
.qs-go { margin-top: auto; min-height: 64px; font-size: 20px; letter-spacing: 3px; }
.qk-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; } .qk-foot .backbtn { background: rgba(8, 22, 42, .85); min-height: 52px; padding: 0 26px; } .qk-foot span { color: #4a7396; letter-spacing: 5px; font-size: 12px; }
@media (max-width: 1100px) { .qk-stage { grid-template-columns: minmax(0, 1fr) 320px; } .qk-cards { gap: 10px; } .qk-bot span { font-size: 13px; } }
@media (max-width: 860px) {
  #screen-quick { padding: calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b)); overflow-y: auto; } .qk-brand h4 { font-size: 18px; letter-spacing: 4px; } .qk-title { margin: 10px 0 12px; }
  .qk-stage { grid-template-columns: 1fr; gap: 14px; } .qk-cards { display: flex; overflow-x: auto; gap: 12px; padding: 10px 2px 12px; } .qk-card { flex: 0 0 168px; min-height: 300px; } .qk-side { overflow: visible; } .qs-body { overflow: visible; } .qk-foot span { display: none; }
}
.qs-go { margin-top: 0; width: 100%; } .qs-foot { flex: none; padding: 0 26px 24px; } .qs-body { padding-bottom: 14px; } .qs-body p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.qs-img { height: 20%; min-height: 96px; } .qs-body { gap: 11px; padding-top: 18px; }

/* title screen: three visual options */
#screen-menu .menu-box { width: min(700px, 92vw); gap: 0; }
#screen-menu .logo .sub { margin: 10px 0 30px; color: #6aa8d8; font-size: 14px; }
.mm-list { display: flex; flex-direction: column; gap: 16px; }
.mm-opt { --accent: #49b8ff; --accent-rgb: 73,184,255; display: flex; align-items: stretch; width: 100%; padding: 0; text-align: left; background: linear-gradient(100deg, rgba(7, 20, 38, .96), rgba(var(--accent-rgb), .24)); border: 1px solid rgba(var(--accent-rgb), .76); border-radius: 8px; overflow: hidden; color: #fff; cursor: pointer; font: inherit; backdrop-filter: blur(6px); box-shadow: inset 4px 0 0 rgba(var(--accent-rgb), .86), inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(var(--accent-rgb), .18); transition: transform .18s, border-color .18s, box-shadow .18s, background .18s; min-height: 118px; }
.mm-opt i { position: relative; flex: none; width: 34%; overflow: hidden; background: var(--img) 82% center / 180% auto no-repeat, linear-gradient(#0d2a4a, #06121f); }
.mm-opt i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(var(--accent-rgb), .42), rgba(var(--accent-rgb), .10)); mix-blend-mode: color; pointer-events: none; }
.mm-opt span { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 30px; } .mm-opt b { font-size: clamp(20px, 2.1vw, 28px); font-weight: 700; letter-spacing: 3px; } .mm-opt small { font-size: 16px; color: #bcd3e6; }
.mm-opt em { align-self: center; padding: 0 28px; font-style: normal; font-size: 40px; color: var(--accent); }
.mm-opt:hover, .mm-opt:focus-visible { border-color: var(--accent); transform: translateX(6px); box-shadow: inset 5px 0 0 var(--accent), 0 0 34px rgba(var(--accent-rgb), .56); background: linear-gradient(100deg, rgba(8, 22, 42, .98), rgba(var(--accent-rgb), .38)); outline: none; }
.mm-story { --accent: #ffc14f; --accent-rgb: 255,193,79; }
.mm-quick { --accent: #37cfff; --accent-rgb: 55,207,255; border-width: 2px; box-shadow: inset 4px 0 0 rgba(55,207,255,.92), inset 0 1px 0 rgba(255,255,255,.10), 0 0 28px rgba(55,207,255,.42); }
.mm-saves { --accent: #55edac; --accent-rgb: 85,237,172; }
.mm-small { display: flex; gap: 12px; margin-top: 22px; } .mm-small .btn { min-width: 140px; min-height: 48px; background: rgba(8, 22, 42, .82); }
#screen-menu .foot { margin-top: 20px; }
@media (max-width: 860px) { #screen-menu { padding-left: 4vw; padding-right: 4vw; align-items: center; } .mm-opt { min-height: 88px; } .mm-opt span { padding: 0 16px; } .mm-opt small { font-size: 14px; } .mm-opt em { padding: 0 14px; font-size: 30px; } .mm-list { gap: 10px; } #screen-menu .logo .sub { letter-spacing: 3px; font-size: 11px; margin: 6px 0 16px; } }

/* =================== arcade layer: score, combo and callouts =================== */
#quick-callouts { position: fixed; left: 50%; top: 26%; transform: translateX(-50%); z-index: 14; pointer-events: none; display: none; flex-direction: column; align-items: center; gap: 6px; width: min(90vw, 640px); }
.qc { display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); animation: qcpop 1.9s ease-out forwards; }
.qc b { font-size: 22px; letter-spacing: 4px; font-weight: 800; color: #dff3ff; } .qc span { font-size: 20px; font-weight: 700; color: #ffd23a; } .qc small { flex-basis: 100%; text-align: center; color: #9fc8e6; letter-spacing: 3px; font-size: 12px; text-transform: uppercase; }
.qc.t0 b { color: #ff8a7a; font-size: 18px; } .qc.t2 b { font-size: 30px; color: #7dffb0; } .qc.t3 b { font-size: 44px; color: #ffd23a; text-shadow: 0 0 30px rgba(255, 210, 58, .9); } .qc.t3 span { font-size: 28px; } .qc.t4 b, .qc.t5 b { font-size: 34px; color: #7dffb0; } .qc.t6 b, .qc.t7 b, .qc.t8 b { font-size: 46px; color: #ffb14a; text-shadow: 0 0 30px rgba(255, 150, 40, .9); }
@keyframes qcpop { 0% { opacity: 0; transform: translateY(18px) scale(.6); } 12% { opacity: 1; transform: translateY(0) scale(1.18); } 22% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1); } }
#quick-score { position: fixed; right: calc(22px + var(--safe-r)); top: 34%; z-index: 14; pointer-events: none; display: none; text-align: right; text-shadow: 0 2px 12px #000; }
#quick-score small { display: block; color: #49b8ff; letter-spacing: 4px; font-size: 11px; } #quick-score b { display: block; font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qs-combo { margin-top: 6px; opacity: 0; transition: opacity .2s; } .qs-combo.on { opacity: 1; } .qs-combo span { font-size: 26px; font-weight: 800; color: #ffd23a; } .qs-combo[data-m="1"] span { color: #9fc8e6; } .qs-combo[data-m="8"] span { color: #ff8a3a; animation: qcpulse .5s ease-in-out infinite alternate; }
.qs-combo i { display: block; width: 130px; height: 6px; margin: 4px 0 0 auto; background: rgba(80, 140, 200, .25); border-radius: 3px; overflow: hidden; } .qs-combo u { display: block; height: 100%; background: linear-gradient(90deg, #ffb14a, #ffe14a); }
@keyframes qcpulse { from { transform: scale(1); } to { transform: scale(1.18); } }
#quick-flash { position: fixed; inset: 0; z-index: 12; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255, 220, 120, 0) 45%, rgba(255, 200, 80, .35) 100%); } #quick-flash.on { animation: qflash .55s ease-out; } @keyframes qflash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
body.qr-on #quick-score, body.qr-on #quick-callouts, body.qr-on #quick-flash { display: none !important; }
.qk-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .qk-top b { font-size: clamp(13px, 1.25vw, 19px); } .qk-bot span { font-size: 13px; }
@media (max-width: 860px) { #quick-score { top: 40%; } #quick-score b { font-size: 24px; } .qc b { font-size: 16px; } .qc.t3 b { font-size: 28px; } }

/* ---------------------------------------------------------------- rhythm run */
.qk-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; }
body.rhythm #quick-score { display: none !important; }
#rh { position: fixed; inset: 0; z-index: 13; pointer-events: none; --hw: min(400px, 28vw); }
.rh-vig { position: absolute; inset: 0; --c: 60, 190, 255; background: radial-gradient(ellipse at center, rgba(var(--c), 0) 52%, rgba(var(--c), .38) 100%); opacity: .25; mix-blend-mode: screen; }
.rh-song { position: absolute; right: calc(22px + var(--safe-r)); top: 18px; width: var(--hw); display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgba(90, 170, 255, .35); background: linear-gradient(180deg, rgba(10, 24, 52, .72), rgba(6, 14, 34, .78)); border-radius: 6px; backdrop-filter: blur(6px); }
.rh-song img { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; } .rh-song b { display: block; font-size: 16px; font-weight: 700; color: #eaf4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rh-song small { display: block; color: #8fb3d6; font-size: 12px; margin-bottom: 6px; }
.rh-song i { display: block; height: 4px; background: rgba(100, 150, 210, .3); border-radius: 2px; overflow: hidden; } .rh-song u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3fd2ff, #b58cff); } .rh-song span { font-size: 12px; color: #cfe4ff; font-variant-numeric: tabular-nums; align-self: end; }
.rh-hw { position: absolute; right: calc(22px + var(--safe-r)); top: 17vh; width: var(--hw); height: 58vh; } .rh-hw canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.rh-judge { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-size: clamp(22px, 2.4vw, 34px); font-weight: 900; letter-spacing: 3px; opacity: 0; text-shadow: 0 0 18px currentColor, 0 2px 8px #000; pointer-events: none; }
.rh-judge.on { animation: rhj .7s ease-out forwards; } @keyframes rhj { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.2); } 30% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px); } }
.rh-card { position: absolute; right: calc(22px + var(--safe-r)); bottom: 22px; width: var(--hw); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 18px; border: 1px solid rgba(90, 170, 255, .35); background: linear-gradient(180deg, rgba(10, 24, 52, .72), rgba(6, 14, 34, .8)); border-radius: 6px; backdrop-filter: blur(6px); transition: box-shadow .15s, border-color .15s; }
.rh-card small { display: block; color: #49b8ff; letter-spacing: 3px; font-size: 11px; } .rh-card b { display: block; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; font-variant-numeric: tabular-nums; color: #f2f8ff; } .rh-cmb b { color: #46e0ff; } .rh-card em { display: block; font-style: normal; font-size: 11px; letter-spacing: 2px; color: #ffd23a; min-height: 13px; }
.rh-card.hot { border-color: rgba(70, 224, 255, .8); box-shadow: 0 0 22px rgba(70, 224, 255, .35); } body.rh-od .rh-card { border-color: rgba(255, 210, 58, .95); box-shadow: 0 0 30px rgba(255, 210, 58, .55); } body.rh-od .rh-cmb b { color: #ffd23a; }
.rh-acc { position: absolute; right: calc(22px + var(--safe-r)); top: calc(18px + 84px); width: var(--hw); display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; } .rh-acc small { color: #7fa6cf; letter-spacing: 3px; font-size: 11px; } .rh-acc b { font-size: 16px; color: #dcecff; }
body.rhythm #quick-callouts { left: 38%; top: 22%; }
@media (max-width: 860px) { #rh { --hw: 42vw; } .rh-song { grid-template-columns: 40px 1fr; } .rh-song img { width: 40px; height: 40px; } .rh-song span { display: none; } .rh-acc { top: 78px; } }
body.rhythm #radar-wrap, body.rhythm #pnl-right { display: none !important; }
body.rhythm #pnl-speed, body.rhythm #qh-time { display: none !important; }
#rh-lock { position: absolute; inset: 0; pointer-events: none; }
#rh-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.rh-judge { top: calc(40% + 22vmin); }
body.rhythm #cursor, body.rhythm #quick-arrow, body.rhythm #quick-arrow-label { display: none !important; }
.rh-judge { top: 60%; }
.rh-flash { position: absolute; inset: 0; opacity: 0; --fc: 255,255,255; --fa: .3; background: radial-gradient(ellipse at center, rgba(var(--fc), calc(var(--fa) * .55)) 0%, rgba(var(--fc), var(--fa)) 100%); mix-blend-mode: screen; } .rh-flash.on { animation: rhflash .38s ease-out; } @keyframes rhflash { 0% { opacity: 1; } 100% { opacity: 0; } }
#rh.rh-music .rh-card, #rh.rh-music .rh-acc, #rh.rh-music .rh-judge, #rh.rh-music #rh-cv, #rh.rh-music #rh-lock { display: none; }
#rh.rh-music .rh-song { right: auto; left: calc(14px + var(--safe-l, 0px)); top: 96px; width: min(300px, 40vw); }

/* ---------------------------------------------------------------- song picker */
.sp-modal { z-index: 8; background: radial-gradient(ellipse at center, rgba(4, 10, 26, .82), rgba(2, 5, 14, .94)); backdrop-filter: blur(6px); animation: spfade .25s ease-out; } @keyframes spfade { from { opacity: 0; } to { opacity: 1; } }
.sp-box { width: min(1180px, 96vw); max-height: 94vh; display: flex; flex-direction: column; gap: 18px; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-end; } .sp-head small { color: #49b8ff; letter-spacing: 4px; font-size: 12px; } .sp-head h2 { margin: 4px 0 0; font-size: clamp(26px, 3vw, 40px); letter-spacing: 6px; font-weight: 800; }
.sp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; min-height: 0; }
.sp-card { position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; border: 1px solid rgba(110, 170, 255, .3); border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, rgba(12, 26, 54, .9), rgba(6, 12, 30, .95)); transition: transform .18s, border-color .18s, box-shadow .18s; }
.sp-card:hover { transform: translateY(-6px); border-color: #59d6ff; box-shadow: 0 14px 40px rgba(60, 170, 255, .35); } .sp-card.on { border-color: rgba(255, 210, 90, .7); }
.sp-img { position: relative; aspect-ratio: 3 / 3.4; background: var(--img) center / cover no-repeat; transition: transform .6s; } .sp-card:hover .sp-img { transform: scale(1.05); } .sp-card { overflow: hidden; } .sp-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(6, 12, 30, .95)); }
.sp-img span { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 10px; font-size: 11px; letter-spacing: 3px; background: rgba(4, 10, 26, .7); border: 1px solid rgba(110, 170, 255, .4); border-radius: 3px; color: #bfe4ff; }
.sp-body { padding: 4px 18px 8px; } .sp-body b { display: block; font-size: clamp(19px, 1.8vw, 26px); font-weight: 800; letter-spacing: 1px; } .sp-body small { display: block; color: #8fb3d6; font-size: 14px; margin: 2px 0 10px; }
.sp-meta { display: flex; gap: 16px; color: #cfe4ff; font-size: 14px; } .sp-body em { display: block; margin-top: 10px; font-style: normal; color: #ffd23a; letter-spacing: 2px; font-size: 13px; }
.sp-play { margin: 8px 18px 18px; padding: 12px; text-align: center; letter-spacing: 4px; font-weight: 700; border-radius: 6px; background: linear-gradient(180deg, #3f8fe0, #2664b8); box-shadow: 0 0 0 rgba(89, 214, 255, 0); transition: box-shadow .18s; } .sp-card:hover .sp-play { box-shadow: 0 0 24px rgba(89, 214, 255, .6); }
@media (max-width: 860px) { .sp-cards { display: flex; overflow-x: auto; gap: 14px; padding-bottom: 10px; } .sp-card { flex: 0 0 240px; } .sp-modal { align-items: flex-start; overflow-y: auto; } }
.sp-modal { position: fixed; inset: 0; overflow-y: auto; align-items: center; }
.sp-img { aspect-ratio: auto; height: clamp(170px, 42vh, 460px); } .sp-body small { margin-bottom: 6px; } .sp-body em { margin-top: 6px; }
.sp-box { max-height: none; }
@media (max-height: 640px) { .sp-img { height: 30vh; } .sp-head h2 { font-size: 24px; } }
.sp-modal { align-items: flex-start; display: flex; } .sp-box { margin: auto; }
.sp-modal { z-index: 80; }

/* ---------------------------------------------------------------- mode carousel */
.qk-carousel { position: relative; min-width: 0; min-height: 0; display: flex; }
.qk-carousel .qk-cards { display: block; flex: 1; min-width: 0; position: relative; overflow: hidden; padding: 16px 0 10px; touch-action: pan-y; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%); }
.qk-carousel .qk-cards:active { cursor: grabbing; }
.qk-track { display: flex; gap: 16px; height: 100%; will-change: transform; padding: 0 6px; }
.qk-track .qk-card { flex: 0 0 clamp(220px, 17vw, 290px); height: 100%; min-height: 0; user-select: none; }
.qk-track .qk-top b { font-size: clamp(15px, 1.4vw, 21px); } .qk-track .qk-bot span { font-size: 14px; }
.qk-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 64px; border: 1px solid rgba(110, 170, 255, .4); background: rgba(6, 16, 34, .8); color: #dff3ff; font-size: 34px; line-height: 1; border-radius: 8px; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s, border-color .15s; } .qk-nav:hover { background: rgba(30, 80, 140, .85); border-color: #59d6ff; } .qk-nav.l { left: 4px; } .qk-nav.r { right: 4px; }
@media (max-width: 860px) { .qk-carousel { min-height: 320px; } .qk-track .qk-card { flex-basis: 190px; } .qk-nav { display: none; } }
body.assault #quick-speed { display: block; }
.cr-tag { display: inline-block; margin-bottom: 4px; padding: 2px 10px; font-size: 12px; font-weight: 800; letter-spacing: 3px; border: 1px solid currentColor; border-radius: 3px; transition: color .15s, background .15s, box-shadow .15s; }
.cr-tag.ready { color: #6f8fb0; opacity: .8; } .cr-tag.charging { color: #ffd23a; animation: crpulse .6s ease-in-out infinite alternate; } .cr-tag.on { color: #46e0ff; background: rgba(70, 224, 255, .14); box-shadow: 0 0 14px rgba(70, 224, 255, .45); }
.cr-tag.denied { color: #ff5a5a; background: rgba(255, 70, 70, .14); box-shadow: 0 0 12px rgba(255, 70, 70, .4); } @keyframes crpulse { from { opacity: .55; } to { opacity: 1; } }

/* ---------------------------------------------------------------- convoy opening */
#cv-hint { position: fixed; left: 50%; top: 22%; white-space: nowrap; transform: translateX(-50%) translateY(10px); z-index: 15; text-align: center; padding: 12px 26px; border: 1px solid rgba(255, 210, 90, .6); background: rgba(8, 16, 34, .78); border-radius: 8px; backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; }
#cv-hint.on { opacity: 1; transform: translateX(-50%); animation: cvpulse 1.2s ease-in-out infinite alternate; } @keyframes cvpulse { from { box-shadow: 0 0 0 rgba(255, 210, 90, 0); } to { box-shadow: 0 0 24px rgba(255, 210, 90, .5); } }
#cv-hint b { display: block; font-size: 22px; letter-spacing: 3px; color: #ffd23a; } #cv-hint kbd { display: inline-block; padding: 1px 12px; margin: 0 4px; border: 1px solid #ffd23a; border-radius: 4px; background: rgba(255, 210, 58, .12); font-family: inherit; } #cv-hint small { display: block; margin-top: 4px; color: #9fc8e6; letter-spacing: 2px; font-size: 12px; text-transform: uppercase; }
body.cv-arrow #quick-arrow, body.cv-arrow #quick-arrow-label { display: block; }
#cv-marks { position: fixed; inset: 0; z-index: 12; pointer-events: none; } .cv-mark { position: absolute; left: 0; top: 0; flex-direction: column; align-items: center; gap: 1px; text-shadow: 0 1px 8px #000; will-change: transform; }
.cv-mark i { width: 14px; height: 14px; border: 2px solid #5be6ff; transform: rotate(45deg); box-shadow: 0 0 10px rgba(91, 230, 255, .8); order: 3; margin-top: 6px; } .cv-mark b { order: 1; font-size: 12px; letter-spacing: 3px; color: #5be6ff; } .cv-mark small { order: 2; font-size: 11px; color: #cfe6f6; letter-spacing: 1px; }
#cv-marks.formed .cv-mark i { border-color: #67f0a1; box-shadow: 0 0 11px rgba(103, 240, 161, .85); } #cv-marks.formed .cv-mark b { color: #67f0a1; }
.bmenu .mi.hot { position: relative; } .bmenu .mi.hot::after { content: '★'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #ffd23a; font-size: 18px; text-shadow: 0 0 10px rgba(255, 210, 58, .9); animation: mihot 1s ease-in-out infinite alternate; } @keyframes mihot { from { opacity: .45; transform: translateY(-50%) scale(.9); } to { opacity: 1; transform: translateY(-50%) scale(1.15); } }

/* ---------------------------------------------------------------- key hints */
#keys-hint { position: fixed; left: calc(14px + var(--safe-l, 0px)); top: 44%; z-index: 9; display: none; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid rgba(110, 170, 255, .18); background: rgba(6, 14, 30, .38); border-radius: 6px; opacity: .55; pointer-events: none; transition: opacity .2s; } #keys-hint.on { display: flex; }
#keys-hint .kr { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 1px; color: #a9c6df; text-transform: uppercase; } #keys-hint kbd { min-width: 22px; padding: 1px 6px; text-align: center; font: 600 11px/1.5 inherit; color: #dff3ff; border: 1px solid rgba(160, 200, 255, .4); border-radius: 3px; background: rgba(60, 100, 150, .25); }
#keys-hint .pd, body.pad #keys-hint .kb { display: none; } body.pad #keys-hint .pd { display: inline-block; } #keys-hint .kr.hot { color: #ffd23a; } #keys-hint .kr.hot kbd { border-color: #ffd23a; color: #ffd23a; box-shadow: 0 0 8px rgba(255, 210, 58, .5); } #keys-hint small { margin-top: 2px; font-size: 9px; letter-spacing: 2px; color: #6f8fb0; text-align: right; }
#key-alert { position: fixed; left: 50%; bottom: 17%; transform: translateX(-50%) translateY(8px); z-index: 14; padding: 7px 16px; border: 1px solid rgba(110, 170, 255, .45); background: rgba(8, 18, 38, .8); border-radius: 6px; font-size: 14px; letter-spacing: 1px; color: #dcecff; opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; white-space: nowrap; } #key-alert.on { opacity: 1; transform: translateX(-50%); } #key-alert b { color: #ffd23a; letter-spacing: 2px; margin-right: 8px; } #key-alert kbd { padding: 0 8px; border: 1px solid #ffd23a; border-radius: 3px; color: #ffd23a; font: inherit; }
#key-alert .pd, body.pad #key-alert .kb { display: none; } body.pad #key-alert .pd { display: inline; }
body.rhythm #keys-hint { display: none !important; }

/* ---------------------------------------------------------------- off-screen target: hard to miss */
#target.off .tg-info { animation: tgflick 0.7s steps(2) infinite; }
@keyframes tgflick { 50% { opacity: .3; filter: drop-shadow(0 0 0 transparent); } 0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 90, 79, .9)); } }
.tg-arrow { display: none; }
#target.off .tg-arrow { display: block; position: absolute; left: -3px; top: -34px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid #ff5a4f; transform: rotate(var(--ang, 0rad)); transform-origin: 6px 24px; filter: drop-shadow(0 0 6px rgba(255, 90, 79, .9)); animation: tgflick 0.7s steps(2) infinite; }
#target.off .tg-info { left: 20px; top: -20px; }

/* ---------------------------------------------------------------- target readout: stay clear of the edge */
#target.edge-r .tg-info { left: auto; right: 36px; text-align: right; }
#target.edge-r .tg-bars, #target.edge-r .tgb { margin-left: auto; }
#target.edge-t .tg-info, #target.off.edge-t .tg-info { top: 20px; }
#target.edge-b .tg-info { top: auto; bottom: -30px; }
#target.off.edge-l .tg-info { left: 20px; }
#target.off.edge-r .tg-info { left: auto; right: 20px; text-align: right; }

/* ---------------------------------------------------------------- assault threat hologram */
#threat-hud { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity .3s; }

/* ---------------------------------------------------------------- finale (chapter 8) */
#fin-hint { position: fixed; left: 50%; top: 20%; transform: translateX(-50%) translateY(8px); z-index: 15; text-align: center; padding: 10px 24px; border: 1px solid rgba(255, 90, 90, .5); background: rgba(10, 8, 18, .78); border-radius: 8px; backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .4s; }
#fin-hint.on { opacity: 1; transform: translateX(-50%); }
#fin-hint b { display: block; font-size: 18px; letter-spacing: 2px; color: #ffb0b0; } #fin-hint small { display: block; margin-top: 2px; color: #cfaec0; letter-spacing: 1px; font-size: 12px; }
#fin-detect { position: fixed; left: 50%; bottom: 16%; transform: translateX(-50%); z-index: 14; width: min(320px, 70vw); text-align: center; opacity: 0; transition: opacity .3s; }
#fin-detect.on { opacity: 1; }
#fin-detect small { display: block; color: #ff8a8a; letter-spacing: 3px; font-size: 11px; margin-bottom: 3px; }
#fin-detect i { display: block; height: 6px; background: rgba(255, 80, 80, .18); border-radius: 3px; overflow: hidden; }
#fin-detect u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff8a3a, #ff3a3a); transition: width .2s; }
#fin-detect.hot i { box-shadow: 0 0 14px rgba(255, 60, 60, .6); }

/* ---------------------------------------------------------------- quick play: mission brief card */
.qb-wrap { display: flex; align-items: stretch; gap: 16px; max-width: 100%; }
.qp-brief2 { width: 460px; max-width: 100%; padding: 20px 24px 18px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(180deg, rgba(10, 22, 46, .96), rgba(6, 14, 32, .98)); border: 1px solid rgba(80, 150, 220, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(60, 130, 200, .12) inset; position: relative; }

/* mission progression — a winding checkpoint trail, same idea as a language app's skill path, reskinned in the
   game's holographic blue with a dashed scan-line trail instead of a solid road */
.qk-stages { width: 170px; flex: none; padding: 12px 10px; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(10, 22, 46, .96), rgba(6, 14, 32, .98)); border: 1px solid rgba(80, 150, 220, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.qk-stages > small { color: #6f9cc4; letter-spacing: 1.5px; font-size: 9.5px; margin-bottom: 4px; flex: none; }
.qks-path { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; padding: 4px 18px; }
.qks-path::before { content: ''; position: absolute; top: 18px; bottom: 18px; left: 50%; width: 0; border-left: 2px dashed rgba(58, 167, 238, .3); transform: translateX(-50%); z-index: 0; }
.qks-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; font: inherit; padding: 2px; z-index: 1; }
.qks-node.l { align-self: flex-start; } .qks-node.r { align-self: flex-end; }
.qks-circle { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: rgba(20, 44, 70, .75); border: 2.5px solid #1f5a86; color: #6f9cc4; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); transition: transform .15s; }
.qks-node:hover .qks-circle { transform: translateY(-2px); }
.qks-node.open .qks-circle { background: rgba(14, 30, 52, .7); border-color: #1a3f5f; color: #4a6d8c; }
.qks-node.done .qks-circle { background: #2a9d5c; border-color: #4fd888; color: #fff; box-shadow: 0 3px 0 #1c7a45; }
.qks-node.cur .qks-circle { width: 42px; height: 42px; font-size: 17px; background: #3aa7ee; border-color: #8ed4ff; color: #06121f; box-shadow: 0 3px 0 #1f6fa8, 0 0 18px rgba(58, 167, 238, .55); }
.qks-label { font-size: 8.5px; letter-spacing: .3px; color: #8fb4d0; text-align: center; line-height: 1.2; white-space: nowrap; }
.qks-label i { display: block; font-style: normal; color: #4a6d8c; font-size: 7.5px; letter-spacing: .5px; text-transform: uppercase; }
.qks-mark { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; background: rgba(6, 14, 32, .96); border: 1px solid #3aa7ee; border-radius: 20px; padding: 3px 7px; font-size: 9px; color: #ffd23a; white-space: nowrap; box-shadow: 0 0 12px rgba(58, 167, 238, .4); }
.qks-mark:empty { display: none; } .qks-stars { font-size: 9px; }
@media (max-width: 900px) {
  .qb-wrap { flex-direction: column-reverse; align-items: center; }
  .qp-brief2, .qk-stages { width: 460px; max-width: 100%; }
  .qks-path { flex-direction: row; padding: 14px 6px; }
  .qks-path::before { top: 50%; bottom: auto; left: 18px; right: 18px; width: auto; height: 0; border-left: none; border-top: 2px dashed rgba(58, 167, 238, .3); transform: translateY(-50%); }
  .qks-mark { bottom: auto; top: calc(100% + 6px); }
}
.qb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.qb-icon { width: 46px; height: 46px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; border: 1.5px solid #ff5a4f; background: rgba(255, 90, 79, .12); color: #ff6a5f; box-shadow: 0 0 16px rgba(255, 90, 79, .22); }
.qb-icon svg { width: 24px; height: 24px; }
.qb-icon.t1 { border-color: #ffb14a; background: rgba(255, 177, 74, .12); color: #ffb457; box-shadow: 0 0 16px rgba(255, 177, 74, .2); }
.qb-icon.t2 { border-color: #ff4f4f; background: rgba(255, 79, 79, .14); color: #ff6a6a; box-shadow: 0 0 16px rgba(255, 79, 79, .25); }
.qb-head small { display: block; color: #4fb3ff; letter-spacing: 2.5px; font-size: 10.5px; font-weight: 600; }
.qb-head h2 { margin: 1px 0 0; font-size: 19px; font-weight: 700; letter-spacing: .3px; }
.qb-x { margin-left: auto; width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(120, 160, 200, .3); background: rgba(20, 34, 58, .6); color: #9fc0dd; font-size: 14px; cursor: pointer; flex: none; }
.qb-x:hover { background: rgba(255, 255, 255, .08); }
.qb-desc { margin: 3px 0 4px; color: #b9cfe4; font-size: 12.5px; line-height: 1.5; }
.qb-cfg { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.qb-cfg .qp-diff button { padding: 6px 13px; font-size: 12px; } .qb-cfg .qp-seed { gap: 6px; } .qb-cfg .qp-seed label { display: none; } .qb-cfg .qp-seed input { width: 66px; padding: 6px 8px; font-size: 12.5px; } .qb-cfg .qp-seed .btn { min-height: 32px; padding: 0 10px; font-size: 13px; }
.qb-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(90, 150, 210, .35), transparent); margin: 4px 0; }
.qb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0 6px; text-align: center; }
.qb-stats > div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.qb-stats svg, .qb-rwrow svg { width: 22px; height: 22px; color: #ff5a52; }
.qb-stats b { font-size: 11.5px; font-weight: 600; color: #dfeaf6; line-height: 1.3; }
.qb-rewards { padding: 4px 0 2px; }
.qb-rewards > small { display: block; color: #4fb3ff; letter-spacing: 2.5px; font-size: 10px; margin-bottom: 7px; font-weight: 600; }
.qb-rwrow { display: flex; gap: 18px; flex-wrap: wrap; }
.qb-rwrow > div { display: flex; align-items: center; gap: 7px; }
.qb-rwrow svg { width: 18px; height: 18px; color: #ffd23a; }
.qb-rwrow b { font-size: 12.5px; font-weight: 600; color: #f0f6fb; } .qb-rwrow b i { display: block; font-style: normal; color: #7fa0bf; font-size: 9.5px; font-weight: 500; letter-spacing: 1px; margin-top: 1px; }
.qb-stars { color: #ffd23a; letter-spacing: 2px; } .qb-stars i { font-style: normal; color: rgba(255, 210, 58, .25); }
.qb-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 10px; }
.qb-btns .btn { width: 100%; min-height: 40px; font-size: 14px; }
.qb-btns .btn.primary { background: linear-gradient(180deg, #3f9dff, #1b6fe0); border: none; box-shadow: 0 10px 26px rgba(40, 130, 255, .38); font-weight: 700; letter-spacing: .3px; }
.qb-btns .btn.primary:hover { filter: brightness(1.08); }
.qb-skip { margin-top: 8px; width: 100%; opacity: .8; }
@media (max-width: 560px) { .qp-brief2 { padding: 18px 16px 16px; } .qb-stats { grid-template-columns: repeat(3, 1fr); gap: 5px; } .qb-stats b { font-size: 10.5px; } .qb-rwrow { gap: 12px; } }

/* ---------------------------------------------------------------- impact: manga hit-words + hail */
#impact-layer { position: fixed; inset: 0; z-index: 13; pointer-events: none; overflow: hidden; }
.imp-word { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) skewX(-9deg); font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', system-ui, sans-serif; font-weight: 900; font-size: 40px; letter-spacing: 1px; color: #fff9e8; -webkit-text-stroke: 7px #0c0604; paint-order: stroke fill; text-shadow: 5px 5px 0 rgba(0, 0, 0, .55); transform-origin: center; filter: url(#imp-jag); animation: impop .85s cubic-bezier(.2, 1.4, .4, 1) forwards; white-space: nowrap; z-index: 1; }
.imp-word.big { font-size: 56px; -webkit-text-stroke: 9px #0c0604; }
@keyframes impop { 0% { transform: translate(-50%, -50%) skewX(-9deg) scale(.15) rotate(-10deg); opacity: 0; } 16% { transform: translate(-50%, -55%) skewX(-9deg) scale(1.3) rotate(5deg); opacity: 1; } 30% { transform: translate(-50%, -55%) skewX(-9deg) scale(1) rotate(-2deg); } 75% { opacity: 1; } 100% { transform: translate(-50%, -68%) skewX(-9deg) scale(.92) rotate(0); opacity: 0; } }
.imp-star { position: absolute; left: 0; top: 0; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(0deg); background: #0c0604; clip-path: polygon(50% 0%, 61% 32%, 93% 21%, 68% 46%, 100% 50%, 68% 54%, 93% 79%, 61% 68%, 50% 100%, 39% 68%, 7% 79%, 32% 54%, 0% 50%, 32% 46%, 7% 21%, 39% 32%); animation: impstar .85s cubic-bezier(.2, 1.4, .4, 1) forwards; z-index: 0; }
.imp-star::after { content: ''; position: absolute; inset: 4px; background: #fff9e8; clip-path: polygon(50% 0%, 61% 32%, 93% 21%, 68% 46%, 100% 50%, 68% 54%, 93% 79%, 61% 68%, 50% 100%, 39% 68%, 7% 79%, 32% 54%, 0% 50%, 32% 46%, 7% 21%, 39% 32%); }
@keyframes impstar { 0% { transform: translate(-50%, -50%) scale(0) rotate(-25deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.15) rotate(10deg); opacity: 1; } 55% { opacity: .9; } 100% { transform: translate(-50%, -50%) scale(1.3) rotate(30deg); opacity: 0; } }

#hail { position: fixed; left: 50%; top: 15%; transform: translateX(-50%) translateY(-8px); z-index: 14; display: flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 20px; border: 1px solid rgba(255, 90, 79, .5); background: rgba(20, 8, 10, .78); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: 72vw; }
#hail.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#hail i { width: 9px; height: 9px; border-radius: 50%; background: #ff5a4f; flex: none; box-shadow: 0 0 10px rgba(255, 90, 79, .9); animation: hailblink 1.1s ease-in-out infinite; }
#hail b { font-weight: 600; font-size: 14px; color: #ffd8d4; letter-spacing: .2px; }
#hail.ally i { background: #4fc3ff; box-shadow: 0 0 10px rgba(79, 195, 255, .9); } #hail.ally { border-color: rgba(79, 195, 255, .5); }
@keyframes hailblink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (max-width: 640px) { #hail { top: 22%; font-size: 13px; } .imp-word { font-size: 18px; } .imp-word.big { font-size: 26px; } }

/* ---------------------------------------------------------------- achievement summary (end of a campaign arc) */
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, .03); }
.ach-ic { font-size: 22px; width: 30px; text-align: center; flex: none; }
.ach-row b { font-size: 17px; color: #ffd23a; flex: none; min-width: 34px; }
.ach-row div { display: flex; flex-direction: column; gap: 1px; }
.ach-row small { letter-spacing: 1.5px; color: var(--text); font-weight: 700; }
.ach-row i { font-style: normal; font-size: 12px; color: var(--dim); }

/* controller navigation: a clear highlight on whatever the stick/d-pad has selected */
body.pad button:focus, body.pad .mm-opt:focus, body.pad [onclick]:focus { outline: 2px solid #6ad0ff; outline-offset: 2px; box-shadow: 0 0 14px rgba(106, 208, 255, .55); }
.padcfg .pad-opts { margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; } .padcfg .pad-map, .padcfg .pad-hint { font-size: 12px; opacity: .85; margin-top: 4px; line-height: 1.5; } .padcfg .pad-hint { opacity: .6; }

/* ---------------------------------------------------------------- story cutscenes (js/cine.js) */
#cine { position: fixed; inset: 0; z-index: 9000; background: #000; overflow: hidden; display: none; cursor: pointer; }
#cine.on { display: block; }
#cine .cn-img { position: absolute; inset: -4%; background: #000 center / cover no-repeat; will-change: transform; filter: saturate(1.05) contrast(1.06); }
#cine .cn-pages { position: absolute; inset: 0; display: none; overflow: hidden; filter: saturate(1.05) contrast(1.06); background: #000; }
#cine.paged .cn-img { display: none; }
#cine.paged .cn-pages { display: block; }
#cine .cn-stage { position: absolute; inset: 0; overflow: hidden; will-change: opacity; transition: opacity 1.1s cubic-bezier(.22, .65, .25, 1); }
#cine .cn-stage.b { opacity: 0; }
#cine .cn-stage.fade-in { opacity: 1; }
#cine .cn-pg-bg { position: absolute; inset: 0; overflow: hidden; filter: blur(22px) brightness(.5) saturate(1.15); }
#cine .cn-pg-fg { position: absolute; inset: 0; overflow: hidden; }
#cine .cn-pg-bg img, #cine .cn-pg-fg img { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: block; max-width: none; will-change: transform; }
#cine .cn-pg-fg img { filter: drop-shadow(0 0 22px rgba(0, 0, 0, .55)); }
#cine .cn-cut { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 3; }
#cine .cn-cut.flash { animation: cnCut 2.4s ease-in-out; }
@keyframes cnCut { 0% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
#cine .cn-tint { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .45; background: linear-gradient(180deg, var(--tint) 0%, transparent 45%, transparent 60%, #06101f 100%); }
#cine .cn-glow { position: absolute; inset: -20%; mix-blend-mode: screen; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), color-mix(in srgb, var(--tint) 55%, #fff) 0%, color-mix(in srgb, var(--tint) 30%, transparent) 14%, transparent 42%); }
#cine .cn-dust { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; }
#cine .cn-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0, 0, 6, .72) 100%); }
#cine .cn-grain { position: absolute; inset: -60px; opacity: .1; mix-blend-mode: overlay; background-size: 200px 200px; animation: grain .7s steps(6) infinite; pointer-events: none; }
#cine .cn-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 1.1s cubic-bezier(.2, .7, .2, 1); z-index: 2; }
#cine .cn-bar.top { top: 0; } #cine .cn-bar.bot { bottom: 0; }
#cine.on .cn-bar { height: 10.5vh; }
#cine .cn-sub { position: absolute; left: 50%; bottom: calc(10.5vh + 22px); transform: translate(-50%, 6px); width: min(80vw, 920px); text-align: center; z-index: 3;
  color: #eef4fb; font-size: clamp(15px, 2vw, 22px); line-height: 1.5; letter-spacing: .01em; text-shadow: 0 2px 10px #000, 0 0 2px #000; opacity: 0; transition: opacity .7s, transform .9s; }
#cine .cn-sub.show { opacity: 1; transform: translate(-50%, 0); }
#cine .cn-skip { position: absolute; right: 22px; bottom: 3.6vh; z-index: 3; color: #7f95ab; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .7; }
#cine .cn-fade { position: absolute; inset: 0; background: #000; z-index: 5; pointer-events: none; opacity: 1; animation: cnIn 1.4s ease-out forwards; }
#cine.out .cn-fade { animation: none; opacity: 1; transition: opacity 1.4s; }
#cine.on:not(.out) .cn-fade { opacity: 0; }
@keyframes cnIn { from { opacity: 1; } to { opacity: 0; } }
#cine .cn-end { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, .82); opacity: 0; transition: opacity 1.6s; pointer-events: none; }
#cine .cn-end h1 { font-size: clamp(44px, 9vw, 110px); letter-spacing: .12em; font-weight: 300; color: #dff1ff; margin: 0; text-shadow: 0 0 40px rgba(79, 195, 255, .55); }
#cine .cn-end h1 span { color: #4fc3ff; font-weight: 600; }
#cine .cn-end > p { letter-spacing: .6em; color: #6ea8cf; font-size: 13px; margin-top: 14px; }
#cine .cn-end-msg { max-width: 620px; margin-top: 32px; padding: 0 24px; }
#cine .cn-end-msg p { color: #c7d7e8; font-size: clamp(13px, 1.6vw, 16px); line-height: 1.6; letter-spacing: .01em; text-align: center; margin: 0 0 14px; }
#cine .cn-end-msg p:last-child { margin-bottom: 0; color: #8fb4d8; }
#cine.title .cn-end { opacity: 1; } #cine.title .cn-sub { opacity: 0; }
@media (prefers-reduced-motion: reduce) { #cine .cn-grain { animation: none; } }
#cine.locked { cursor: default; } #cine.locked .cn-skip { display: none; }

/* ---------------------------------------------------------------- illustrated mission board */
.panel.svc[data-view="missions"] { padding: 0; background: #050c17; }
.panel.svc[data-view="missions"]::before { display: none; }
.panel.svc[data-view="missions"] .ph { display: none; }
.panel.svc[data-view="missions"] .pf { margin: 0; padding: 10px 24px 12px; background: #050c17; position: relative; z-index: 3; }
.mb { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.25fr); position: relative; z-index: 2; }
.mb-art { position: relative; background: #050c17 url(../assets/board/board.jpg) center / cover no-repeat; min-height: 0; }
/* one hall for every station: its palette colours the room, so each place still feels like its own */
.mb-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 22% 50%, var(--tint), transparent 62%), linear-gradient(180deg, var(--tint2), var(--tint)); mix-blend-mode: soft-light; opacity: .8; }
.mb-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, #050c17 100%), linear-gradient(180deg, rgba(4, 10, 20, .7), transparent 22%); pointer-events: none; }
.mb-title { position: absolute; left: 28px; top: 24px; z-index: 2; display: flex; align-items: center; gap: 16px; }
.mb-title h2 { margin: 0; font-weight: 500; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .32em; color: #f2f6fb; text-shadow: 0 2px 14px #000; }
.mb-title small { display: block; margin-top: 6px; letter-spacing: .5em; color: #3aa8ff; font-size: clamp(11px, 1.2vw, 15px); }
.mb-right { display: flex; flex-direction: column; min-height: 0; padding: 22px 26px 8px 10px; gap: 14px; }
.mb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex: none; }
.mb-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 52px; }
.mb-tab { background: rgba(14, 26, 44, .8); border: 1px solid rgba(120, 160, 210, .18); color: #9fb4c8; letter-spacing: .12em; font-size: 12px; padding: 12px 22px; border-radius: 6px; cursor: pointer; }
.mb-tab:hover { color: #fff; border-color: rgba(120, 190, 255, .45); } .mb-tab.on { color: #fff; background: rgba(28, 92, 160, .55); border-color: #3aa8ff; box-shadow: 0 0 14px rgba(58, 168, 255, .3); }
.mb-cred { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 10px; border: 1px solid rgba(120, 190, 255, .35); background: rgba(10, 22, 40, .85); flex: none; }
.mb-cred small { position: absolute; margin-top: -34px; font-size: 10px; letter-spacing: .2em; color: #6fb4ff; } .mb-cred b { font-size: 26px; color: #fff; } .mb-cred { position: relative; padding-top: 22px; }
.mb-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 6px; }
.mb-card { display: grid; grid-template-columns: 138px 1fr 168px; gap: 16px; align-items: center; padding: 12px; background: linear-gradient(90deg, rgba(14, 26, 44, .92), rgba(10, 20, 36, .92)); border: 1px solid rgba(120, 160, 210, .14); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; flex: none; }
.mb-card:hover { border-color: rgba(120, 190, 255, .4); } .mb-card.sel { border-color: #e8b53a; background: linear-gradient(90deg, rgba(38, 32, 18, .92), rgba(12, 22, 38, .92)); box-shadow: 0 0 0 1px rgba(232, 181, 58, .35); }
.mb-thumb { width: 138px; height: 92px; border-radius: 6px; background: #0b1526 center / cover no-repeat; }
.mb-main { min-width: 0; } .mb-tt { display: flex; align-items: center; gap: 10px; } .mb-tt b { font-size: 17px; color: #f2f6fb; font-weight: 600; }
.mb-gl { font-style: normal; font-size: 20px; line-height: 1; } .mb-gl.cargo, .mb-gl.support { color: #3aa8ff; } .mb-gl.bounty { color: #ffc23a; }
.mb-sub { display: block; margin: 3px 0 6px; letter-spacing: .14em; font-size: 11px; color: #6f8fb0; } .mb-main p { margin: 0; color: #b9c8d8; font-size: 13.5px; line-height: 1.4; }
.mb-btns { display: flex; gap: 8px; margin-top: 10px; }
.mb-side2 { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding-left: 4px; }
.mb-rew { display: flex; align-items: center; gap: 8px; } .mb-rew b { font-size: 20px; color: #fff; } .mb-meta { font-size: 13px; color: #b9c8d8; }
.mb-risk { display: flex; align-items: center; gap: 10px; } .mb-risk span { display: flex; gap: 3px; } .mb-risk i { width: 15px; height: 7px; background: rgba(120, 140, 170, .3); display: block; }
.mb-risk .r1 i.on { background: #6bff9a; } .mb-risk .r2 i.on { background: #ffb63a; } .mb-risk .r3 i.on { background: #ff5a4f; } .mb-risk small { font-size: 12px; color: #9fb4c8; }
.mb-empty { padding: 18px 6px; } .mb-mine { flex: none; align-self: flex-end; background: none; border: 0; color: #6fb4ff; letter-spacing: .14em; font-size: 12px; cursor: pointer; padding: 4px 6px 8px; }
@media (max-width: 900px) { .mb { grid-template-columns: 1fr; } .mb-art { display: none; } .mb-right { padding: 16px; } .mb-tabs { padding-top: 0; } .mb-card { grid-template-columns: 96px 1fr; } .mb-thumb { width: 96px; height: 70px; } .mb-side2 { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 12px; } }
/* the scene runs the full height of the screen, the footer floats over it */
.panel.svc[data-view="missions"] .mb { position: absolute; inset: 0; }
.panel.svc[data-view="missions"] .mb-right { padding-bottom: 92px; }
.panel.svc[data-view="missions"] .pf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 30px 24px 14px; background: linear-gradient(0deg, rgba(5, 12, 23, .92) 25%, rgba(5, 12, 23, 0)); pointer-events: none; }
.panel.svc[data-view="missions"] .pf > * { pointer-events: auto; }
.panel.svc[data-view="missions"] .mb-mine { position: absolute; right: 30px; bottom: 104px; }

/* cantina hall tint: stations of one model share an image, their palette gives each its own light */
.cant-tint { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .8; background: radial-gradient(ellipse at 30% 40%, var(--tint), transparent 65%), linear-gradient(180deg, var(--tint2), var(--tint)); }

/* ---------------------------------------------------------------- illustrated trade counter */
.panel.svc[data-view="trade"] { padding: 0; background: #050c17; }
.panel.svc[data-view="trade"]::before, .panel.svc[data-view="trade"] .ph { display: none; }
.panel.svc[data-view="trade"] .pf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 30px 24px 14px; margin: 0; background: linear-gradient(0deg, rgba(5, 12, 23, .92) 25%, rgba(5, 12, 23, 0)); pointer-events: none; }
.panel.svc[data-view="trade"] .pf > * { pointer-events: auto; }
.panel.svc[data-view="trade"] .pbody { position: absolute; inset: 0; }
.tc { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(460px, 1.45fr); }
.tc-art { position: relative; background: #050c17 url(../assets/trade/counter.jpg) center / cover no-repeat; min-height: 0; }
.tc-art::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .8; background: radial-gradient(ellipse at 30% 50%, var(--tint), transparent 62%), linear-gradient(180deg, var(--tint2), var(--tint)); }
.tc-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 62%, #050c17 100%), linear-gradient(180deg, rgba(4, 10, 20, .7), transparent 22%); pointer-events: none; }
.tc-title { position: absolute; left: 28px; top: 24px; z-index: 2; display: flex; align-items: center; gap: 16px; }
.tc-title h2 { margin: 0; font-weight: 500; font-size: clamp(20px, 2.6vw, 34px); letter-spacing: .32em; color: #f2f6fb; text-shadow: 0 2px 14px #000; }
.tc-title small { display: block; margin-top: 6px; letter-spacing: .5em; color: #3aa8ff; font-size: clamp(11px, 1.2vw, 15px); }
.tc-right { display: flex; flex-direction: column; min-height: 0; padding: 22px 26px 88px 8px; gap: 12px; }
.tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex: none; }
.tc-tabs { display: flex; gap: 8px; padding-top: 52px; flex: 1; }
.tc-tab { flex: 1; max-width: 190px; background: rgba(14, 26, 44, .8); border: 1px solid rgba(120, 160, 210, .18); color: #9fb4c8; letter-spacing: .14em; font-size: 12px; padding: 13px 0; border-radius: 6px; cursor: pointer; }
.tc-tab:hover { color: #fff; } .tc-tab.on { color: #fff; background: rgba(28, 92, 160, .55); border-color: #3aa8ff; box-shadow: 0 0 14px rgba(58, 168, 255, .3); }
.tc-cred { position: relative; display: flex; align-items: center; gap: 12px; padding: 22px 20px 12px; border-radius: 10px; border: 1px solid rgba(120, 190, 255, .35); background: rgba(10, 22, 40, .85); flex: none; }
.tc-cred small { position: absolute; top: 8px; left: 20px; font-size: 10px; letter-spacing: .2em; color: #6fb4ff; } .tc-cred b { font-size: 26px; color: #fff; }
.tc-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border: 1px solid rgba(120, 160, 210, .16); border-radius: 8px; overflow: hidden; flex: none; }
.tc-cat { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(10, 20, 36, .85); border: 0; border-right: 1px solid rgba(120, 160, 210, .12); color: #9fb4c8; padding: 10px 4px; cursor: pointer; letter-spacing: .1em; font-size: 11px; }
.tc-cat i { font-style: normal; font-size: 18px; } .tc-cat:hover { color: #fff; } .tc-cat.on { color: #fff; background: rgba(28, 92, 160, .5); box-shadow: inset 0 0 0 1px #3aa8ff; }
.tc-head, .tc-row { display: grid; grid-template-columns: 1fr 96px 96px 76px 96px; gap: 10px; align-items: center; }
.tc-head { flex: none; padding: 0 14px; color: #6f8fb0; letter-spacing: .14em; font-size: 11px; }
.tc-list { flex: 1; min-height: 60px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 6px; }
.tc-row { grid-template-columns: 44px 1fr 96px 96px 76px 96px; padding: 8px 14px 8px 10px; background: rgba(12, 22, 38, .9); border: 1px solid rgba(120, 160, 210, .12); border-radius: 8px; cursor: pointer; flex: none; }
.tc-head { grid-template-columns: 44px 1fr 96px 96px 76px 96px; } .tc-head span:first-child { grid-column: 1 / 3; }
.tc-row:hover { border-color: rgba(120, 190, 255, .4); } .tc-row.sel { border-color: #e8b53a; background: linear-gradient(90deg, rgba(38, 32, 18, .92), rgba(12, 22, 38, .92)); } .tc-row.faint { opacity: .55; }
.tc-nm b { display: block; color: #f2f6fb; font-size: 15px; } .tc-nm small { color: #7f97b0; font-size: 12px; }
.tc-bar { display: flex; gap: 2px; } .tc-bar i { width: 11px; height: 7px; background: rgba(120, 140, 170, .3); display: block; } .tc-bar.up i.on { background: #6bff9a; } .tc-bar.flat i.on { background: #4aa8ff; } .tc-bar.dn i.on { background: #ff6a5a; }
.tc-pr { display: flex; align-items: center; gap: 6px; } .tc-pr b { color: #fff; font-size: 17px; } .tc-st { color: #cfd9e6; text-align: center; }
.tc-qty { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid rgba(120, 190, 255, .3); border-radius: 6px; background: rgba(14, 30, 54, .8); padding: 3px 4px; } .tc-qty.ph { border: 0; background: none; }
.tc-qty button { background: none; border: 0; color: #6fb4ff; font-size: 18px; cursor: pointer; padding: 0 6px; } .tc-qty b { min-width: 26px; text-align: center; color: #fff; }
.tc-empty { padding: 16px 6px; }
.tc-detail { flex: none; border: 1px solid rgba(120, 160, 210, .16); border-radius: 10px; background: rgba(10, 20, 36, .88); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.tc-dtop { display: flex; gap: 14px; align-items: center; } .tc-dtop h4 { margin: 0; color: #fff; font-size: 17px; } .tc-dtop p { margin: 2px 0 0; color: #9fb4c8; font-size: 12.5px; line-height: 1.4; max-width: 44ch; }
.tc-dtop .d-stats { margin-left: auto; display: flex; gap: 18px; } .tc-dtop .d-stats small { display: block; color: #6f8fb0; font-size: 10px; letter-spacing: .14em; } .tc-dtop .d-stats b { color: #fff; font-size: 15px; }
.tc-dbot { display: flex; gap: 18px; align-items: stretch; } .tc-dbot .spots { flex: 1; min-width: 0; font-size: 12px; } .tc-do { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; justify-content: flex-end; }
.tc-qtyrow small { display: block; color: #6f8fb0; font-size: 10px; letter-spacing: .14em; margin-bottom: 4px; text-align: right; }
@media (max-width: 900px) { .tc { grid-template-columns: 1fr; } .tc-art { display: none; } .tc-right { padding: 14px 14px 86px; } .tc-tabs { padding-top: 0; } .tc-head, .tc-row { grid-template-columns: 38px 1fr 80px 64px; } .tc-bar, .tc-head span:nth-child(3), .tc-qty { display: none; } .tc-dtop .d-stats { display: none; } }
.tc-pr .coin, .tc-cred .coin { width: 22px; height: 22px; font-size: 12px; line-height: 22px; min-width: 22px; }
.tc-detail { padding: 10px 14px; gap: 8px; } .tc-dtop p { max-width: 38ch; }
.tc-dbot .spot:nth-of-type(n+4), .tc-dbot .tip { display: none; } .tc-dbot .spots .lbl { margin-bottom: 2px; }
.tc-do { min-width: 0; flex: 0 0 auto; } .tc-do .qty { display: flex; gap: 4px; align-items: center; } .tc-do .qb { padding: 6px 9px; font-size: 12px; min-width: 0; } .tc-do .qty b { min-width: 30px; text-align: center; }
.tc-do .buybtn { padding: 10px 18px; font-size: 13px; white-space: nowrap; }
.tc-list { min-height: 150px; }

/* ---- ship dealer: empty showroom left, options right ---- */
.panel.svc[data-view="ship"] { padding: 0; background: #060d18; }
.panel.svc[data-view="ship"]::before, .panel.svc[data-view="ship"] .ph { display: none; }
.panel.svc[data-view="ship"] .pf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 26px 24px 12px; margin: 0; background: linear-gradient(0deg, rgba(5, 12, 23, .92) 25%, rgba(5, 12, 23, 0)); pointer-events: none; }
.panel.svc[data-view="ship"] .pf > * { pointer-events: auto; }
.panel.svc[data-view="ship"] .pbody { position: absolute; inset: 0; }
.dl { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); }
.dl-art { position: relative; background: #0a1626 url("../assets/dealer/showroom.jpg") center / cover no-repeat; overflow: hidden; }
.dl-art::before { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light; background: radial-gradient(ellipse at 50% 60%, var(--tint), transparent 70%), linear-gradient(180deg, var(--tint2), transparent 60%); opacity: .55; pointer-events: none; }
.dl-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 80%, rgba(6, 13, 24, .8)); pointer-events: none; }
.dl-title { position: absolute; left: 24px; top: 18px; z-index: 3; display: flex; gap: 14px; align-items: center; text-shadow: 0 0 10px #000; }
.dl-title h2 { margin: 0; font-size: clamp(20px, 2.4vw, 32px); letter-spacing: 6px; font-weight: 500; color: #fff; } .dl-title small { letter-spacing: 5px; color: #7fc4ff; font-size: 12px; }
.dl-stage { position: absolute; left: 0; right: 0; top: 70px; bottom: 250px; z-index: 2; }
.dl-stage .yard-slot { position: absolute; inset: 0; }
.dl-arrow { z-index: 4; }
.dl-card { position: absolute; left: 22px; right: 22px; bottom: 74px; z-index: 3; padding: 16px 20px 14px; border: 1px solid rgba(110, 170, 230, .35); border-radius: 8px; background: rgba(8, 20, 38, .82); backdrop-filter: blur(6px); }
.dl-ctop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dl-card h3 { margin: 0; font-size: 24px; letter-spacing: 3px; font-weight: 500; color: #fff; } .dl-card small { color: #7fb4e0; letter-spacing: 2px; font-size: 11px; }
.dl-cpr { text-align: right; } .dl-cpr b { font-size: 24px; color: #ffd23a; font-weight: 600; }
.dl-hull { text-align: right; } .dl-hull b { display: block; font-size: 22px; } .dl-hull.ok b { color: #5fe08a; } .dl-hull.mid b { color: #ffd23a; } .dl-hull.low b { color: #ff6a5a; }
.dl-card > p { margin: 8px 0 10px; color: #b6cadb; font-size: 13px; line-height: 1.45; }
.dl-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.dl-facts div { text-align: center; border: 1px solid rgba(90, 140, 200, .25); border-radius: 6px; padding: 6px 2px; background: rgba(20, 40, 70, .4); }
.dl-facts i { display: block; font-style: normal; color: #5cb8ff; font-size: 16px; } .dl-facts small { display: block; font-size: 9px; } .dl-facts b { color: #fff; font-size: 16px; }
.dl-act { display: flex; gap: 10px; } .dl-act .btn { flex: 1; } .dl-warn { display: block; margin-top: 6px; color: #ffb48a; letter-spacing: 0; font-size: 12px; }
.dl-right { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 18px 22px 74px; background: linear-gradient(180deg, #0a1a2e, #060f1c); border-left: 1px solid #16456b; }
.dl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dl-tab, .dl-subtab { background: rgba(14, 34, 60, .8); border: 1px solid #1d4d7c; color: #9cc4e6; letter-spacing: 2px; font-size: 12px; padding: 9px 14px; border-radius: 4px; cursor: pointer; }
.dl-tab.on, .dl-subtab.on { background: #1a5d96; color: #fff; border-color: #4fc3ff; box-shadow: 0 0 12px rgba(56, 170, 255, .35); } .dl-subtab:disabled { opacity: .35; cursor: default; }
.dl-cred { text-align: right; padding: 6px 12px; border: 1px solid #1d4d7c; border-radius: 6px; background: rgba(10, 26, 46, .8); white-space: nowrap; } .dl-cred small { display: block; font-size: 9px; letter-spacing: 2px; color: #7fb4e0; } .dl-cred b { color: #ffd23a; font-size: 18px; margin-right: 4px; }
.dl-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.dl-sub { display: flex; gap: 6px; margin-bottom: 12px; }
.dl-ships { display: flex; flex-direction: column; gap: 8px; }
.dl-ship { display: grid; grid-template-columns: 96px 1fr auto 14px; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border: 1px solid #16456b; border-radius: 8px; background: rgba(10, 26, 46, .75); cursor: pointer; }
.dl-ship:hover { border-color: #4fc3ff; } .dl-ship.sel { border-color: #4fc3ff; background: rgba(20, 60, 100, .6); box-shadow: 0 0 14px rgba(56, 170, 255, .3); } .dl-ship.lk { opacity: .7; }
.dl-ship img { width: 96px; height: 62px; object-fit: contain; background: radial-gradient(ellipse at 50% 60%, rgba(60, 130, 210, .3), transparent 75%); border-radius: 5px; }
.dl-sm b { display: block; color: #fff; font-weight: 600; font-size: 15px; } .dl-sm small { color: #7fb4e0; font-size: 11px; }
.dl-ic { display: flex; gap: 10px; margin-top: 4px; color: #9cc4e6; font-size: 12px; }
.dl-pr b { color: #ffd23a; font-size: 16px; margin-right: 3px; } .dl-ch { color: #5cb8ff; font-style: normal; font-size: 22px; }
.dl-own .dl-gear { margin-top: 14px; display: grid; gap: 6px; } .dl-gear div { display: flex; justify-content: space-between; border-bottom: 1px solid #16456b; padding: 5px 2px; font-size: 13px; } .dl-gear span { color: #7fb4e0; } .dl-gear b { color: #fff; font-weight: 500; }
@media (max-width: 900px) { .dl { grid-template-columns: 1fr; overflow-y: auto; } .dl-art { min-height: 520px; } }
.dl-stage { bottom: 310px; }
.dl .coin { display: inline-flex; width: 18px; height: 18px; font-size: 11px; line-height: 18px; vertical-align: middle; }
.dl-cpr, .dl-pr, .dl-cred { display: flex; align-items: center; gap: 4px; } .dl-cred { flex-direction: row; flex-wrap: wrap; }
/* dealer: stack the old two-column equipment/repair layout into the narrow right column */
.dl-body .svc-split { display: flex; flex-direction: column; gap: 12px; }
.dl-body .glass { background: none; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; }
.dl-body .svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dl-body .svc-list .li { padding: 9px 12px; text-align: left; border: 1px solid #16456b; border-radius: 8px; background: rgba(10, 26, 46, .75); color: #fff; cursor: pointer; }
.dl-body .svc-list .li b { display: block; font-size: 13px; font-weight: 600; } .dl-body .svc-list .li small { display: block; font-size: 11px; color: #7fb4e0; margin-top: 2px; }
.dl-body .svc-list .li.on { border-color: #4fc3ff; background: rgba(20, 60, 100, .6); box-shadow: 0 0 12px rgba(56, 170, 255, .3); }
.dl-body .svc-list.rep-status { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid #16456b; border-radius: 8px; background: rgba(10, 26, 46, .75); }
.dl-body .rep-status h3 { font-size: 20px; margin: 0; } .dl-body .gauge-n b { font-size: 26px; } .dl-body .rep-kv { padding: 6px 0; font-size: 13px; }
.dl-body .dt-head h3 { margin: 0; font-size: 17px; font-weight: 600; color: #fff; } .dl-body .dt-head span { display: block; margin: 4px 0 10px; font-size: 12px; color: #7fb4e0; }
.dl-body .opts { gap: 8px; }
.dl-body .opt { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; background: rgba(10, 26, 46, .75); border-color: #16456b; border-radius: 8px; }
.dl-body .opt b { font-size: 15px; } .dl-body .opt small { font-size: 12px; margin-top: 3px; }
.dl-body .opt-r { justify-content: space-between; } .dl-body .opt-r em { font-size: 15px; } .dl-body .opt-r .btn { min-height: 36px; padding: 0 16px; font-size: 13px; }
/* dealer polish: match the mockup */
.dl-right { padding: 16px 22px 96px; gap: 0; }
.dl-cred { align-self: flex-end; margin-bottom: 14px; padding: 8px 16px; } .dl-cred b { font-size: 22px; }
.dl-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.dl-tab { padding: 12px 6px; font-size: 13px; text-align: center; }
.dl-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; } .dl-subtab { padding: 11px 6px; font-size: 12px; }
.dl-ships { gap: 10px; } .dl-ship { grid-template-columns: 130px 1fr auto 14px; padding: 10px 16px 10px 10px; border-radius: 6px; } .dl-ship img { width: 130px; height: 80px; }
.dl-sm b { font-size: 18px; font-weight: 500; } .dl-sm small { font-size: 13px; } .dl-ic { font-size: 13px; gap: 14px; margin-top: 8px; } .dl-pr b { font-size: 19px; }
.dl-ship.sel { border-color: #f2b73a; box-shadow: 0 0 14px rgba(242, 183, 58, .3); background: rgba(30, 50, 80, .7); }
.dl-card { bottom: 100px; left: 20px; right: 20px; padding: 18px 22px 16px; border-radius: 4px; border-color: #1d4d7c; background: rgba(6, 18, 36, .9); }
.dl-cbody { display: grid; grid-template-columns: 1fr 190px; gap: 20px; align-items: start; } .dl-cbody > div > p { margin: 8px 0 8px; }
.dl-act { flex-direction: column; } .dl-act .btn.primary { background: rgba(60, 40, 8, .8); border: 1px solid #f2b73a; color: #ffd76a; }
.dl-facts { margin: 6px 0 0; } .dl-facts div { background: none; border: 0; display: flex; align-items: center; gap: 8px; text-align: left; flex-wrap: wrap; padding: 0; } .dl-facts i { font-size: 22px; } .dl-facts small { width: auto; } .dl-facts b { font-size: 18px; flex-basis: 100%; margin-top: -4px; padding-left: 30px; }
.dl-stage { top: 80px; bottom: 330px; }
@media (max-width: 900px) { .dl-art { min-height: 760px; } .dl-stage { bottom: 380px; } .dl-cbody { grid-template-columns: 1fr; } }
/* vertical layout: ship on top, info card under it (no overlap) */
@media (max-width: 900px) {
  .dl-art { min-height: 0; display: flex; flex-direction: column; padding-top: 80px; }
  .dl-stage { position: relative; top: auto; bottom: auto; flex: none; height: 230px; }
  .dl-card { position: relative; left: auto; right: auto; bottom: auto; margin: 10px 14px 14px; }
  .dl-right { padding-bottom: 110px; }
}
/* vertical layout: compact showroom so the tabs and options start high on the screen */
@media (max-width: 900px) {
  .dl-art { padding-top: 52px; }
  .dl-title { top: 8px; left: 14px; } .dl-title svg { width: 34px; height: 34px; } .dl-title h2 { font-size: 18px; letter-spacing: 4px; } .dl-title small { font-size: 10px; }
  .dl-stage { height: 170px; }
  .dl-card { margin: 4px 12px 10px; padding: 10px 14px; } .dl-card h3 { font-size: 18px; } .dl-cpr b { font-size: 18px; }
  .dl-cbody > div > p { display: none; } .dl-cbody { gap: 10px; } .dl-facts b { font-size: 15px; padding-left: 0; margin: 0; flex-basis: auto; } .dl-facts i { font-size: 16px; } .dl-facts small { display: none; }
  .dl-act .btn { min-height: 36px; padding: 0 10px; font-size: 13px; }
}
/* phone width: nothing may push past the screen edge */
@media (max-width: 900px) {
  .dl { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; } .dl-art, .dl-right, .dl-body, .dl-card, .dl-ships, .dl-ship, .dl-sm { min-width: 0; max-width: 100%; }
  .dl-right { padding: 12px 12px 110px; }
  .dl-tabs { gap: 4px; } .dl-tab { padding: 10px 2px; font-size: 10px; letter-spacing: 1px; }
  .dl-subtab { letter-spacing: 1px; font-size: 11px; }
  .dl-ship { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 8px; padding: 8px; } .dl-ship img { width: 76px; height: 50px; } .dl-ch { display: none; }
  .dl-sm b { font-size: 15px; } .dl-sm small { font-size: 11px; } .dl-ic { gap: 8px; font-size: 11px; flex-wrap: wrap; } .dl-pr b { font-size: 15px; }
  .dl-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; } .dl-cbody { grid-template-columns: minmax(0, 1fr); }
  .dl-body .svc-list { grid-template-columns: 1fr 1fr; } .dl-body .opt-r { flex-wrap: wrap; gap: 8px; }
  .dl-card h3 { letter-spacing: 1px; } .dl-ctop { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .panel.svc[data-view="ship"] .pf { display: flex; flex-wrap: nowrap; gap: 10px; padding: 22px 12px 10px; }
  .panel.svc[data-view="ship"] .pf .backbtn, .panel.svc[data-view="ship"] .pf .undock { flex: 1 1 0; min-width: 0; padding: 0 10px; min-height: 46px; font-size: 13px; white-space: nowrap; }
}
/* vertical layout: the list below already carries name, price and stats; keep only the buy action */
@media (max-width: 900px) {
  .dl-ctop, .dl-facts, .dl-cbody > div > p, .dl-card > p { display: none; }
  .dl-card { background: none; border: 0; padding: 0; margin: 6px 12px 8px; backdrop-filter: none; }
  .dl-cbody { display: flex; flex-direction: column; gap: 6px; } .dl-act .btn { width: 100%; }
}
@media (max-width: 900px) {
  .dl-art { padding-top: 40px; } .dl-title { top: 4px; } .dl-title svg { width: 28px; height: 28px; } .dl-title h2 { font-size: 15px; } .dl-title small { font-size: 9px; }
  .dl-stage { height: 130px; }
  .dl-card { margin: 4px 12px 6px; } .dl-act .btn { min-height: 32px; }
}
@media (max-width: 900px) {
  .dl-art { padding-top: 46px; background-position: center 35%; }
  .dl-stage { height: 175px; }
  .dl-card { margin: 0 12px 4px; }
}
@media (max-width: 900px) {
  .dl[data-tab="ships-buy"] .dl-stage { height: 120px; }
  .dl[data-tab="ships-buy"] .dl-art { padding-top: 38px; }
  .dl[data-tab="ships-buy"] .dl-title { display: none; }
}
@media (max-width: 900px) {
  .dl[data-tab="ships-buy"] .dl-art { padding-top: 46px; } .dl[data-tab="ships-buy"] .dl-stage { height: 175px; }
  .dl[data-tab="ships-buy"] .dl-title { display: flex; }
  .dl[data-tab="ships-buy"] .dl-card { position: absolute; left: 12px; right: 12px; bottom: 6px; margin: 0; z-index: 4; }
  .dl[data-tab="ships-buy"] .dl-act .btn { background: rgba(40, 28, 6, .92); }
  .dl[data-tab="ships-buy"] .dl-warn { text-shadow: 0 0 6px #000; }
}
@media (max-width: 900px) { .dl-arrow, .dl-act .tag.on { display: none; } }
@media (max-width: 900px) { .dl-art, .dl[data-tab] .dl-art { height: 225px; min-height: 0; box-sizing: border-box; flex: none; } .dl { grid-template-rows: 225px auto; } }
/* ---- information: big vista left, glass panels right (same language as the dealer) ---- */
.panel.svc[data-view="info"] { padding: 0; background: #060d18; }
.panel.svc[data-view="info"]::before, .panel.svc[data-view="info"] .ph { display: none; }
.panel.svc[data-view="info"] .pf { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 26px 24px 12px; margin: 0; background: linear-gradient(0deg, rgba(5, 12, 23, .92) 25%, rgba(5, 12, 23, 0)); pointer-events: none; }
.panel.svc[data-view="info"] .pf > * { pointer-events: auto; }
.panel.svc[data-view="info"] .pbody { position: absolute; inset: 0; }
.if { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); }
.if.if-map { grid-template-columns: minmax(0, 1fr); }
.if-art { position: relative; background: #0a1626 var(--img) center / cover no-repeat; overflow: hidden; }
.if-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 13, 24, .55), transparent 35%, transparent 55%, rgba(6, 13, 24, .8)); }
.if-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 80%, rgba(6, 13, 24, .8)); pointer-events: none; }
.if-title { position: absolute; left: 28px; top: 22px; z-index: 3; text-shadow: 0 0 12px #000; } .if-title small { display: block; letter-spacing: 4px; color: #7fc4ff; font-size: 12px; } .if-title h2 { margin: 4px 0 0; font-size: clamp(24px, 3vw, 40px); letter-spacing: 7px; font-weight: 500; color: #fff; }
.if-card { position: absolute; left: 22px; right: 22px; bottom: 100px; z-index: 3; padding: 16px 20px; border: 1px solid #1d4d7c; border-radius: 6px; background: rgba(6, 18, 36, .88); backdrop-filter: blur(6px); }
.if-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .if-kv small, .if-panel small { display: block; color: #7fb4e0; letter-spacing: 2px; font-size: 10px; margin-bottom: 4px; } .if-kv b { color: #fff; font-weight: 500; font-size: 15px; } .if-kv .good { color: #5fe08a; } .if-kv .bad { color: #ff7a6a; } .if-kv .mid { color: #ffd23a; }
.if-svc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .if-svc span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 4px; border: 1px solid #1d4d7c; font-size: 12px; letter-spacing: 1px; color: #dff; background: rgba(20, 60, 100, .5); } .if-svc i { font-style: normal; color: #5cb8ff; } .if-svc .off { opacity: .35; text-decoration: line-through; }
.if-right { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 18px 22px 96px; background: linear-gradient(180deg, #0a1a2e, #060f1c); border-left: 1px solid #16456b; }
.if-right .dl-tabs { margin-bottom: 14px; }
.if-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; }
.if-map .if-body { overflow: hidden; } .if-map .if-right { border: 0; }
.if-panel { padding: 16px 18px; border: 1px solid #16456b; border-radius: 8px; background: rgba(10, 26, 46, .75); flex: none; }
.if-panel h3 { margin: 0; font-size: 22px; font-weight: 500; color: #fff; } .if-slogan { margin: 4px 0 10px !important; color: #4fc3ff !important; letter-spacing: 3px !important; font-size: 11px !important; }
.if-panel p { margin: 0; color: #b6cadb; font-size: 14px; line-height: 1.6; }
.if-trade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.if-news.top { border-color: #4fc3ff; box-shadow: 0 0 14px rgba(56, 170, 255, .25); } .if-news p { color: #e3eef8; }
@media (max-width: 900px) {
  .if { grid-template-columns: minmax(0, 1fr); grid-template-rows: 200px auto; overflow-y: auto; overflow-x: hidden; }
  .if.if-map { grid-template-rows: auto; }
  .if-art { height: 200px; } .if-card { display: none; } .if-title { left: 14px; top: 12px; } .if-title h2 { font-size: 20px; letter-spacing: 4px; } .if-title small { font-size: 10px; letter-spacing: 2px; }
  .if-right { padding: 12px 12px 110px; border-left: 0; min-width: 0; } .if-body { overflow: visible; } .if-trade { grid-template-columns: 1fr; }
  .panel.svc[data-view="info"] .pf { display: flex; flex-wrap: nowrap; gap: 10px; padding: 22px 12px 10px; }
  .panel.svc[data-view="info"] .pf .backbtn, .panel.svc[data-view="info"] .pf .undock { flex: 1 1 0; min-width: 0; padding: 0 10px; min-height: 46px; font-size: 13px; white-space: nowrap; }
}
@media (max-width: 900px) {
  .if { grid-template-rows: auto auto; } .if-art { height: auto; min-height: 150px; padding-top: 110px; }
  .if-card { display: block; position: relative; left: auto; right: auto; bottom: auto; margin: 0 12px 12px; padding: 12px 14px; } .if-kv { grid-template-columns: 1fr 1fr; } .if-kv > div:last-child { grid-column: 1 / -1; }
  .if-news.top { order: 0; }
}
/* ---- information kiosk ---- */
.ik { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr); background: #0a1626 var(--img) center / cover no-repeat; }
.ik::before { content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light; background: radial-gradient(ellipse at 40% 60%, var(--tint), transparent 70%), linear-gradient(180deg, var(--tint2), transparent 60%); opacity: .5; pointer-events: none; }
.ik::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(6, 13, 24, .78) 68%, rgba(6, 13, 24, .9)); pointer-events: none; }
.ik-side { position: relative; z-index: 2; } .ik .if-title { left: 28px; top: 22px; }
.ik-right { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: 0; padding: 18px 26px 96px; }
.ik-cred { align-self: flex-end; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #1d4d7c; border-radius: 6px; background: rgba(10, 26, 46, .85); margin-bottom: 26px; } .ik-cred small { font-size: 9px; letter-spacing: 2px; color: #7fb4e0; } .ik-cred b { color: #ffd23a; font-size: 22px; }
.ik-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.ik-item { display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border: 1px solid #16456b; border-radius: 6px; background: rgba(8, 22, 42, .82); color: #fff; cursor: pointer; }
.ik-item i { font-style: normal; font-size: 30px; color: #4fc3ff; text-align: center; } .ik-item b { display: block; font-size: 19px; font-weight: 500; } .ik-item small { display: block; margin-top: 3px; color: #9cc4e6; font-size: 13px; } .ik-item em { font-style: normal; font-size: 24px; color: #5cb8ff; }
.ik-item:hover, .ik-item:focus-visible { border-color: #4fc3ff; background: rgba(20, 60, 100, .7); box-shadow: 0 0 16px rgba(56, 170, 255, .35); }
.ik-back { align-self: flex-start; background: rgba(10, 26, 46, .85); border: 1px solid #1d4d7c; color: #9cc4e6; letter-spacing: 2px; font-size: 12px; padding: 9px 14px; border-radius: 4px; cursor: pointer; }
.ik-h { margin: 4px 0 2px; font-size: 26px; font-weight: 500; color: #fff; }
.ik-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ik-svc > div { padding: 12px 14px; border: 1px solid #16456b; border-radius: 6px; background: rgba(8, 22, 42, .82); } .ik-svc b { display: block; color: #fff; font-weight: 500; font-size: 15px; } .ik-svc small { display: block; margin-top: 3px; color: #9cc4e6; font-size: 12px; } .ik-svc .off { opacity: .4; }
.ik .if-panel { background: rgba(8, 22, 42, .82); }
.if-fac { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-left: 4px solid var(--c); } .if-fac b { color: #fff; font-size: 17px; font-weight: 500; margin-right: 10px; } .if-fac small { margin: 3px 0 0 !important; } .if-fac em { font-style: normal; color: var(--c); white-space: nowrap; }
@media (max-width: 900px) {
  .ik { grid-template-columns: minmax(0, 1fr); grid-template-rows: 150px auto; overflow-y: auto; overflow-x: hidden; background-position: center top; background-size: 100% 300px; background-repeat: no-repeat; background-color: #060f1c; }
  .ik::after { background: linear-gradient(180deg, transparent 20%, #060f1c 300px); } .ik::before { display: none; }
  .ik-right { padding: 8px 12px 110px; min-width: 0; } .ik-body { overflow: visible; } .ik-cred { position: absolute; top: 8px; right: 12px; margin: 0; padding: 4px 10px; } .ik-cred b { font-size: 16px; }
  .ik .if-title { left: 14px; top: 12px; } .ik .if-title h2 { font-size: 18px; letter-spacing: 3px; } .ik-svc { grid-template-columns: 1fr; }
}
@media (min-width: 901px) { .ik { background-size: 135% auto; background-position: right center; } .ik::after { background: linear-gradient(90deg, transparent 50%, rgba(6, 13, 24, .8) 68%, rgba(6, 13, 24, .92)); } }
.ik-pic { flex: none; height: 150px; border-radius: 6px; border: 1px solid #16456b; background: #0a1626 center / cover no-repeat; position: relative; overflow: hidden; }
.ik-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 13, 24, .75), transparent 55%); } .ik-pic span { position: absolute; left: 14px; bottom: 10px; z-index: 2; color: #fff; letter-spacing: 3px; font-size: 12px; text-transform: uppercase; text-shadow: 0 0 8px #000; }
@media (min-width: 901px) { .ik { grid-template-columns: minmax(0, .8fr) minmax(460px, 1.4fr); background-size: 170% auto; background-position: 12% center; } .ik::after { background: linear-gradient(90deg, transparent 22%, rgba(6, 13, 24, .82) 40%, rgba(6, 13, 24, .94)); } .ik-pic { height: 190px; } .ik-right { padding-left: 34px; padding-right: 34px; } }
@media (min-width: 901px) { .ik { grid-template-columns: minmax(0, .42fr) minmax(520px, 1fr); background-size: cover; background-position: left center; } .ik::after { background: linear-gradient(90deg, transparent 20%, rgba(6, 13, 24, .45) 40%, rgba(6, 13, 24, .6)); } }
@media (min-width: 901px) { .ik { grid-template-columns: minmax(0, .66fr) minmax(440px, 1fr); } }
/* codex + stronger station tint on the kiosk */
.ik::before { mix-blend-mode: color; opacity: .55; background: linear-gradient(135deg, var(--tint), var(--tint2)); }
.ik-cats { display: flex; flex-wrap: wrap; gap: 6px; } .ik-cat { display: inline-flex; align-items: center; gap: 6px; background: rgba(10, 26, 46, .85); border: 1px solid #1d4d7c; color: #9cc4e6; letter-spacing: 1px; font-size: 12px; padding: 8px 12px; border-radius: 4px; cursor: pointer; } .ik-cat i { font-style: normal; color: #5cb8ff; } .ik-cat.on { background: #1a5d96; color: #fff; border-color: #4fc3ff; }
.ik-blurb { margin: 2px 0 0; } .ik-ar { display: grid; grid-template-columns: 76px minmax(0, 1fr) 16px; gap: 14px; align-items: center; text-align: left; padding: 8px 14px 8px 8px; border: 1px solid #16456b; border-radius: 6px; background: rgba(8, 22, 42, .82); color: #fff; cursor: pointer; flex: none; } .ik-ar:hover { border-color: #4fc3ff; background: rgba(20, 60, 100, .7); }
.ik-th { width: 76px; height: 52px; border-radius: 4px; background: #0a1626 center / cover; display: grid; place-items: center; } .ik-th.no { border: 1px solid #16456b; } .ik-th i { font-style: normal; font-size: 24px; color: #4fc3ff; }
.ik-ar b { display: block; font-size: 16px; font-weight: 500; } .ik-ar small { display: block; margin-top: 2px; color: #9cc4e6; font-size: 12px; } .ik-ar em { font-style: normal; color: #5cb8ff; font-size: 20px; }
.ik-view { display: flex; flex-direction: column; gap: 10px; } .ik-view h4 { margin: 4px 0 0; font-size: 24px; font-weight: 500; color: #fff; } .ik-sum { color: #4fc3ff; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; } .ik-view p { margin: 0; color: #c8d9e8; font-size: 15px; line-height: 1.65; } .ik-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
@media (max-width: 900px) { .ik::before { display: block; bottom: auto; height: 300px; } }

.ik::before { display: none !important; }
/* ---- dealer: calmer, more game-like (aligned with the trade counter) ---- */
@media (min-width: 901px) { .dl { grid-template-columns: minmax(0, .95fr) minmax(400px, 1fr); } }
.dl-art { filter: brightness(.82) saturate(.9); }
.dl-art::after { background: linear-gradient(90deg, transparent 75%, rgba(6, 13, 24, .85)), linear-gradient(0deg, rgba(6, 13, 24, .9), transparent 42%); }
.dl-card { left: 0; right: 0; bottom: 0; padding: 0 26px 96px; border: 0; border-radius: 0; background: none; backdrop-filter: none; }
.dl-ctop { align-items: baseline; } .dl-card h3 { font-size: 26px; letter-spacing: 4px; text-shadow: 0 0 10px #000; } .dl-card small { text-shadow: 0 0 8px #000; }
.dl-cpr b { font-size: 26px; }
.dl-cbody { grid-template-columns: minmax(0, 1fr) 210px; }
.dl-card > p, .dl-cbody > div > p { color: #c4d6e6; font-size: 13px; margin: 6px 0 8px; text-shadow: 0 0 8px #000; }
.dl-bars { display: grid; gap: 7px; margin: 10px 0 0; }
.dl-bars > div { display: grid; grid-template-columns: 96px minmax(0, 1fr) 34px 34px; align-items: center; gap: 10px; font-size: 12px; color: #9cc4e6; letter-spacing: 1px; text-transform: uppercase; }
.dl-bars .bar { height: 6px; border-radius: 3px; background: rgba(80, 140, 200, .22); overflow: hidden; } .dl-bars .bar b { display: block; height: 100%; background: linear-gradient(90deg, #1f78c8, #4fc3ff); border-radius: 3px; }
.dl-bars em { font-style: normal; color: #fff; font-size: 14px; text-align: right; } .dl-bars u { text-decoration: none; font-size: 12px; } .dl-bars u.up { color: #6bff9a; } .dl-bars u.dn { color: #ff7a6a; }
.dl-right { padding-top: 20px; }
.dl-cred { margin-bottom: 12px; padding: 6px 14px; } .dl-cred b { font-size: 20px; }
.dl-tab { padding: 10px 6px; font-size: 12px; background: rgba(10, 26, 46, .8); border-color: #16456b; } .dl-tab.on, .dl-subtab.on { box-shadow: none; }
.dl-sub { margin-bottom: 10px; } .dl-subtab { padding: 8px 6px; background: none; border-color: #16456b; }
.dl-ships { gap: 4px; }
.dl-ship { grid-template-columns: 84px minmax(0, 1fr) auto; padding: 6px 16px 6px 8px; border-radius: 4px; background: rgba(10, 26, 46, .55); border-color: transparent; border-bottom: 1px solid #16456b; } .dl-ship img { width: 84px; height: 54px; } .dl-ch { display: none; }
.dl-ship:hover { background: rgba(20, 50, 84, .6); } .dl-ship.sel { background: rgba(38, 44, 40, .55); border-color: #f2b73a; box-shadow: none; }
.dl-sm b { font-size: 17px; } .dl-sm small { font-size: 12px; }
@media (max-width: 900px) { .dl-bars { display: none; } .dl-art { filter: none; } }
.dl-act .btn { white-space: nowrap; font-size: 14px; min-height: 46px; } .dl-cbody { grid-template-columns: minmax(0, 1fr) 230px; }
/* gear glyph tiles: colourful and readable at a glance */
.gi { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 10px; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--gc) 45%, transparent), color-mix(in srgb, var(--gc) 10%, #061224)); border: 1px solid color-mix(in srgb, var(--gc) 60%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 30%, transparent), inset 0 0 10px rgba(0, 0, 0, .35); }
.gi svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gc) 70%, transparent)); }
.dl-body .opt { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.dl-body .opt > .gi { grid-row: 1 / span 2; align-self: start; } .dl-body .opt > .opt-r { grid-column: 2; }
.dl-body .opt:not(:has(.gi)) { display: flex; }
.dl-body .opt:has(.tag.on) { border-color: #3fbf7a; background: linear-gradient(90deg, rgba(40, 120, 80, .28), rgba(10, 26, 46, .75)); }
.dl-body .opt-r em { color: #ffd23a; }
.dl-body .tag.on { background: rgba(60, 200, 120, .18); color: #7dffb0; border: 1px solid #3fbf7a; border-radius: 4px; padding: 5px 10px; font-size: 11px; letter-spacing: 1px; }
.dl-body .opt .btn.primary { background: linear-gradient(180deg, #2a86d8, #1a5d96); border-color: #4fc3ff; color: #fff; }
.dl-body .svc-list .li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; } .dl-body .svc-list .li .gi { width: 44px; height: 44px; border-radius: 8px; } .dl-body .svc-list .li .gi svg { width: 32px; height: 32px; }
/* icon-pack tiles replace the drawn glyphs */
.gi { background: radial-gradient(circle at 50% 40%, rgba(40, 80, 130, .35), rgba(6, 18, 36, .9)); border: 1px solid #1d4d7c; box-shadow: inset 0 0 12px rgba(0, 0, 0, .5); overflow: visible; }
.gi img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.dl-body .svc-list .li .gi img { width: 36px; height: 36px; }
.dl-body .opt > .gi { width: 58px; height: 58px; grid-template-columns: 58px; } .dl-body .opt { grid-template-columns: 58px minmax(0, 1fr); } .dl-body .opt > .gi img { width: 52px; height: 52px; }
.dl-body .opt { grid-template-columns: 72px minmax(0, 1fr); } .dl-body .opt > .gi { width: 72px; height: 72px; grid-template-columns: 72px; } .dl-body .opt > .gi img { width: 68px; height: 68px; }
.dl-body .svc-list .li .gi { width: 48px; height: 48px; } .dl-body .svc-list .li .gi img { width: 44px; height: 44px; } .dl-body .svc-list .li { grid-template-columns: 48px minmax(0, 1fr); }
.dl-body .tag.lock { background: rgba(255, 140, 90, .12); color: #ffb48a; border: 1px solid #a5623f; border-radius: 4px; padding: 5px 10px; font-size: 11px; letter-spacing: 1px; }
.tc-escort { display: flex; flex-direction: column; gap: 8px; max-width: 380px; padding: 12px 16px; border: 1px solid #16456b; border-radius: 6px; background: rgba(8, 22, 42, .82); }
.tc-escort .ec-t small { display: block; color: #7fb4e0; letter-spacing: 2px; font-size: 10px; } .tc-escort .ec-t b { color: #fff; font-size: 17px; font-weight: 500; }
.tc-escort p { margin: 0; color: #b6cadb; font-size: 12px; line-height: 1.5; }
#radar-wrap .rn, #radar-wrap .rs { display: none !important; }