/* Starport Trader — sci-fi play UI. Desktop: fixed-height three-column console (no page scroll). Phone: stacked. */
:root {
    --sp-bg: #050914;
    --sp-bg2: #0a1328;
    --sp-panel: rgba(13, 24, 48, .72);
    --sp-panel-solid: #0d1830;
    --sp-line: rgba(125, 211, 252, .16);
    --sp-line-strong: rgba(125, 211, 252, .38);
    --sp-text: #dbeafe;
    --sp-muted: #7f93b5;
    --sp-cyan: #38d9f5;
    --sp-cyan-soft: rgba(56, 217, 245, .14);
    --sp-amber: #fbbf24;
    --sp-orange: #fb923c;
    --sp-red: #f43f5e;
    --sp-green: #34d399;
    --sp-violet: #a78bfa;
    --sp-radius: 14px;
    --sp-font: "Segoe UI", "SF Pro Display", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --sp-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
.sp-body {
    background:
        radial-gradient(1200px 700px at 70% -10%, rgba(56, 120, 245, .18), transparent 60%),
        radial-gradient(900px 600px at -10% 110%, rgba(167, 139, 250, .14), transparent 60%),
        linear-gradient(180deg, var(--sp-bg2), var(--sp-bg));
    color: var(--sp-text);
    font-family: var(--sp-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.sp-body::before { /* starfield */
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55;
    background-image:
        radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cbd5e1, transparent),
        radial-gradient(1.5px 1.5px at 200px 150px, #93c5fd, transparent), radial-gradient(1px 1px at 330px 40px, #fff, transparent),
        radial-gradient(1px 1px at 420px 210px, #e2e8f0, transparent), radial-gradient(1.5px 1.5px at 520px 120px, #c4b5fd, transparent);
    background-size: 560px 260px;
}
a { color: var(--sp-cyan); }
.sp-app { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.sp-muted { color: var(--sp-muted); }
.sp-kicker { text-transform: uppercase; letter-spacing: .22em; font-size: .7rem; color: var(--sp-cyan); margin: 0 0 .4rem; }
.sp-num { font-variant-numeric: tabular-nums; font-family: var(--sp-mono); }

/* Top bar */
.sp-top { display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; border-bottom: 1px solid var(--sp-line); background: rgba(5, 9, 20, .7); backdrop-filter: blur(8px); flex: 0 0 auto; }
.sp-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--sp-text); min-width: 0; }
.sp-brand__mark { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; background: conic-gradient(from 210deg, var(--sp-cyan), var(--sp-violet), var(--sp-amber), var(--sp-cyan)); box-shadow: 0 0 18px rgba(56, 217, 245, .45); mask: radial-gradient(circle at 50% 50%, transparent 5px, #000 6px); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 5px, #000 6px); }
.sp-brand__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.sp-brand__text b { font-size: 1rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-brand__text small { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--sp-muted); }
.sp-top__stats { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.sp-chip { display: inline-flex; flex-direction: column; padding: .25rem .7rem; border: 1px solid var(--sp-line); border-radius: 10px; background: rgba(13, 24, 48, .6); min-width: 86px; }
.sp-chip small { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-muted); }
.sp-chip b { font-family: var(--sp-mono); font-size: .95rem; font-variant-numeric: tabular-nums; }
.sp-chip--turns b { color: var(--sp-cyan); } .sp-chip--cr b { color: var(--sp-amber); } .sp-chip--warn b { color: var(--sp-red); }

/* Layout */
.sp-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 380px; gap: .75rem; padding: .75rem; }
.sp-col { min-height: 0; display: flex; flex-direction: column; gap: .75rem; }
.sp-col--left, .sp-col--right { overflow: hidden; }
.sp-col--map { min-width: 0; }
.sp-panel { position: relative; background: var(--sp-panel); border: 1px solid var(--sp-line); border-radius: var(--sp-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(10px); }
.sp-panel::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--sp-line-strong), transparent); }
.sp-pad { padding: .8rem .9rem; }
.sp-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .55rem; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sp-muted); font-weight: 600; }
.sp-h b { color: var(--sp-text); letter-spacing: .04em; text-transform: none; font-size: .95rem; }
.sp-grow { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(125, 211, 252, .25) transparent; }
.sp-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.sp-kv { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; font-size: .86rem; }
.sp-kv dt { color: var(--sp-muted); } .sp-kv dd { margin: 0; text-align: right; font-family: var(--sp-mono); font-variant-numeric: tabular-nums; }
.sp-bar { height: 6px; border-radius: 99px; background: rgba(148, 163, 184, .15); overflow: hidden; }
.sp-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sp-cyan), #60a5fa); box-shadow: 0 0 10px rgba(56, 217, 245, .6); }
.sp-bar--amber > i { background: linear-gradient(90deg, var(--sp-amber), var(--sp-orange)); box-shadow: 0 0 10px rgba(251, 191, 36, .5); }
.sp-bar--red > i { background: linear-gradient(90deg, var(--sp-red), #fb7185); }
.sp-bar--green > i { background: linear-gradient(90deg, var(--sp-green), #6ee7b7); }
.sp-gauge { margin: .35rem 0 .6rem; } .sp-gauge__lbl { display: flex; justify-content: space-between; font-size: .75rem; color: var(--sp-muted); margin-bottom: .2rem; } .sp-gauge__lbl b { color: var(--sp-text); font-family: var(--sp-mono); font-weight: 500; }

/* Buttons & inputs */
.sp-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .85rem; border-radius: 10px; border: 1px solid var(--sp-line-strong); background: rgba(56, 217, 245, .06); color: var(--sp-text); font: inherit; font-weight: 600; letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, transform .05s, box-shadow .15s; }
.sp-btn:hover { background: rgba(56, 217, 245, .14); border-color: var(--sp-cyan); box-shadow: 0 0 14px rgba(56, 217, 245, .25); }
.sp-btn:active { transform: translateY(1px); }
.sp-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.sp-btn--primary { background: linear-gradient(180deg, #22d3ee, #0891b2); border-color: #67e8f9; color: #03131c; }
.sp-btn--primary:hover { background: linear-gradient(180deg, #67e8f9, #06b6d4); }
.sp-btn--amber { background: linear-gradient(180deg, #fbbf24, #d97706); border-color: #fde68a; color: #1c1103; }
.sp-btn--danger { border-color: rgba(244, 63, 94, .6); background: rgba(244, 63, 94, .12); }
.sp-btn--danger:hover { border-color: var(--sp-red); background: rgba(244, 63, 94, .22); box-shadow: 0 0 14px rgba(244, 63, 94, .35); }
.sp-btn--sm { padding: .28rem .6rem; font-size: .8rem; border-radius: 8px; }
.sp-btn--block { width: 100%; }
.sp-iconbtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--sp-line-strong); background: rgba(5, 9, 20, .75); color: var(--sp-text); font-size: 1rem; cursor: pointer; }
.sp-iconbtn:hover { border-color: var(--sp-cyan); }
.sp-input { width: 100%; padding: .45rem .6rem; border-radius: 9px; border: 1px solid var(--sp-line-strong); background: rgba(3, 7, 18, .7); color: var(--sp-text); font: inherit; font-family: var(--sp-mono); }
.sp-input:focus { outline: none; border-color: var(--sp-cyan); box-shadow: 0 0 0 3px rgba(56, 217, 245, .18); }
.sp-tabs { display: flex; gap: .25rem; padding: .3rem; border-bottom: 1px solid var(--sp-line); }
.sp-tab { flex: 1; padding: .4rem .3rem; border: 0; border-radius: 8px; background: transparent; color: var(--sp-muted); font: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.sp-tab[aria-selected="true"] { background: var(--sp-cyan-soft); color: var(--sp-text); box-shadow: inset 0 -2px 0 var(--sp-cyan); }

/* Map */
.sp-mapwrap { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sp-map { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; }
.sp-map.is-dragging { cursor: grabbing; }
.sp-map__hud { position: absolute; left: .8rem; top: .7rem; pointer-events: none; display: flex; flex-direction: column; gap: .15rem; text-shadow: 0 1px 6px #000; }
.sp-map__hud b { font-size: 1.05rem; letter-spacing: .04em; } .sp-map__hud small { color: var(--sp-muted); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.sp-map__zoom { position: absolute; right: .7rem; top: .7rem; display: flex; flex-direction: column; gap: .35rem; }
.sp-lane { stroke: rgba(125, 211, 252, .28); stroke-width: 1.3; }
.sp-lane--one { stroke: rgba(167, 139, 250, .55); stroke-dasharray: 5 4; }
.sp-lane--route { stroke: var(--sp-cyan); stroke-width: 3; filter: drop-shadow(0 0 4px rgba(56, 217, 245, .9)); }
.sp-lane--here { stroke: rgba(253, 230, 138, .65); stroke-width: 1.8; }
.sp-node { cursor: pointer; }
.sp-node circle.sp-dot { fill: #1e293b; stroke: #64748b; stroke-width: 1.2; transition: r .15s; }
.sp-node.is-explored circle.sp-dot { fill: #334155; stroke: #94a3b8; }
.sp-node.is-port circle.sp-dot { fill: #0e7490; stroke: #67e8f9; }
.sp-node.is-safe circle.sp-dot { stroke: #5eead4; }
.sp-node.is-uncharted circle.sp-dot { fill: transparent; stroke: rgba(148, 163, 184, .45); stroke-dasharray: 2 2; }
.sp-node.is-hub circle.sp-dot { fill: #b45309; stroke: var(--sp-amber); }
.sp-node.is-depot circle.sp-dot { fill: #9a3412; stroke: var(--sp-orange); }
.sp-node.is-raiders circle.sp-dot { fill: #881337; stroke: var(--sp-red); }
.sp-node.is-adjacent circle.sp-dot { stroke: #fde68a; stroke-width: 2; }
.sp-node.is-target circle.sp-dot { stroke: #fff; stroke-width: 2.4; }
.sp-node:hover circle.sp-dot { stroke: #fff; }
.sp-node text { fill: #cbd5e1; font-size: 10px; font-family: var(--sp-mono); pointer-events: none; paint-order: stroke; stroke: rgba(5, 9, 20, .9); stroke-width: 3px; }
.sp-node text.sp-name { fill: #fde68a; font-family: var(--sp-font); font-size: 11px; font-weight: 600; }
.sp-node.is-uncharted text { fill: #64748b; }
.sp-safe-halo { fill: rgba(94, 234, 212, .045); stroke: rgba(94, 234, 212, .18); stroke-dasharray: 3 5; }
.sp-ship { pointer-events: none; }
.sp-ship__ring { fill: none; stroke: var(--sp-cyan); stroke-width: 2; animation: sp-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.sp-ship__core { fill: var(--sp-cyan); filter: drop-shadow(0 0 6px var(--sp-cyan)); }
@keyframes sp-pulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }

/* Ticker */
.sp-ticker { flex: 0 0 auto; padding: .5rem .8rem; display: flex; flex-direction: column; gap: .15rem; max-height: 92px; overflow: hidden; font-size: .82rem; }
.sp-ticker p { margin: 0; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-ticker p:first-child { color: var(--sp-text); }
.sp-ticker p.is-error:first-child { color: #fda4af; }

/* Lists, trade rows, cards */
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.sp-good { display: grid; grid-template-columns: 1fr auto; gap: .35rem .6rem; padding: .6rem .7rem; border: 1px solid var(--sp-line); border-radius: 11px; background: rgba(3, 7, 18, .35); }
.sp-good__name { font-weight: 700; } .sp-good__side { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: .1rem .45rem; border-radius: 6px; }
.sp-good__side--sells { color: #6ee7b7; background: rgba(52, 211, 153, .12); } .sp-good__side--buys { color: #fcd34d; background: rgba(251, 191, 36, .12); }
.sp-good__price { font-family: var(--sp-mono); font-size: 1.05rem; color: var(--sp-amber); text-align: right; }
.sp-good .sp-bar { grid-column: 1 / -1; }
.sp-good__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .74rem; color: var(--sp-muted); }
.sp-good__act { grid-column: 1 / -1; display: flex; gap: .35rem; }
.sp-haggle { border: 1px solid rgba(251, 191, 36, .45); background: linear-gradient(180deg, rgba(251, 191, 36, .1), rgba(251, 191, 36, .02)); border-radius: 12px; padding: .75rem; margin-bottom: .6rem; }
.sp-haggle__quote { font-family: var(--sp-mono); font-size: 1.6rem; color: var(--sp-amber); line-height: 1.1; }
.sp-dots { display: inline-flex; gap: .25rem; } .sp-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(148, 163, 184, .3); } .sp-dots i.is-used { background: var(--sp-red); }
.sp-shipcard { display: grid; grid-template-columns: 54px 1fr auto; gap: .2rem .7rem; align-items: center; padding: .6rem .7rem; border: 1px solid var(--sp-line); border-radius: 12px; background: rgba(3, 7, 18, .35); }
.sp-shipcard.is-current { border-color: var(--sp-cyan); box-shadow: inset 0 0 0 1px rgba(56, 217, 245, .3); }
.sp-shipcard__icon { grid-row: span 2; width: 54px; height: 40px; }
.sp-shipcard__name { font-weight: 700; } .sp-shipcard__price { font-family: var(--sp-mono); color: var(--sp-amber); text-align: right; }
.sp-shipcard__specs { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .72rem; color: var(--sp-muted); }
.sp-shipcard__specs b { color: var(--sp-text); font-family: var(--sp-mono); font-weight: 500; }
.sp-warps { display: flex; flex-wrap: wrap; gap: .35rem; }
.sp-warp { min-width: 52px; }
.sp-news li { font-size: .82rem; padding: .35rem 0; border-bottom: 1px dashed var(--sp-line); } .sp-news time { color: var(--sp-muted); font-family: var(--sp-mono); font-size: .72rem; margin-right: .35rem; }
.sp-news .k-death { color: #fda4af; } .sp-news .k-combat { color: #86efac; } .sp-news .k-admin { color: #fde68a; }
.sp-rank { display: grid; grid-template-columns: 22px 1fr auto; gap: .5rem; align-items: center; padding: .35rem .2rem; border-bottom: 1px dashed var(--sp-line); font-size: .84rem; }
.sp-rank.is-you { color: var(--sp-cyan); } .sp-rank small { display: block; color: var(--sp-muted); font-size: .7rem; }
.sp-badge { display: inline-block; padding: .08rem .45rem; border-radius: 6px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--sp-line-strong); color: var(--sp-muted); }
.sp-badge--safe { color: #5eead4; border-color: rgba(94, 234, 212, .5); } .sp-badge--danger { color: #fda4af; border-color: rgba(244, 63, 94, .5); } .sp-badge--gold { color: #fde68a; border-color: rgba(251, 191, 36, .55); }

/* Encounter overlay (over the map) */
.sp-encounter { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(127, 29, 29, .35), rgba(5, 9, 20, .82)); backdrop-filter: blur(2px); z-index: 5; }
.sp-encounter[hidden] { display: none; }
.sp-enc { width: min(560px, 92%); padding: 1.1rem 1.2rem; border: 1px solid rgba(244, 63, 94, .55); border-radius: 16px; background: linear-gradient(180deg, rgba(40, 8, 20, .92), rgba(13, 10, 28, .95)); box-shadow: 0 0 40px rgba(244, 63, 94, .25), inset 0 1px 0 rgba(255, 255, 255, .05); }
.sp-enc__alert { color: #fda4af; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; font-weight: 800; animation: sp-blink 1.2s steps(2) infinite; }
@keyframes sp-blink { 50% { opacity: .35; } }
.sp-enc h2 { margin: .25rem 0 .2rem; font-size: 1.4rem; letter-spacing: .03em; }
.sp-enc__taunt { color: #fecdd3; font-style: italic; margin: 0 0 .8rem; }
.sp-enc__vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; margin-bottom: .8rem; }
.sp-enc__side { padding: .55rem .65rem; border-radius: 11px; border: 1px solid var(--sp-line); background: rgba(3, 7, 18, .5); }
.sp-enc__side--foe { border-color: rgba(244, 63, 94, .45); }
.sp-enc__side small { color: var(--sp-muted); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.sp-enc__vsmark { font-weight: 900; color: #fda4af; letter-spacing: .1em; }
.sp-enc__log { font-family: var(--sp-mono); font-size: .76rem; color: #cbd5e1; background: rgba(0, 0, 0, .35); border-radius: 9px; padding: .5rem .6rem; margin: 0 0 .8rem; max-height: 120px; overflow: auto; }
.sp-enc__log p { margin: 0 0 .2rem; }
.sp-enc__acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.sp-enc__acts .sp-btn { flex-direction: column; padding: .6rem .4rem; }
.sp-enc__acts small { font-weight: 500; font-size: .7rem; color: var(--sp-muted); }

/* Gate, create pilot, toast */
.sp-gate { flex: 1; display: grid; place-items: center; padding: 1rem; }
.sp-gate__card { max-width: 520px; padding: 1.6rem; text-align: center; }
.sp-gate__card h1 { margin: .2rem 0 .5rem; font-size: 2rem; letter-spacing: .04em; }
.sp-gate__card .sp-row { justify-content: center; margin-top: 1rem; }
.sp-create { max-width: 560px; margin: 0 auto; padding: 1.4rem; }
.sp-create label { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-muted); margin: .7rem 0 .25rem; }
.sp-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); padding: .6rem 1rem; border-radius: 11px; background: rgba(13, 24, 48, .95); border: 1px solid var(--sp-line-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); z-index: 20; max-width: 90vw; }
.sp-toast.is-error { border-color: rgba(244, 63, 94, .7); color: #fecdd3; }
.sp-example { position: fixed; right: .8rem; bottom: .8rem; z-index: 30; padding: .3rem .7rem; border-radius: 8px; background: #f59e0b; color: #1c1103; font-weight: 800; letter-spacing: .12em; font-size: .72rem; }

/* Wide desktops get a little more air; narrower laptops shrink the side columns. */
@media (min-width: 1600px) { .sp-main { grid-template-columns: 330px minmax(0, 1fr) 420px; } }
@media (max-width: 1280px) { .sp-main { grid-template-columns: 260px minmax(0, 1fr) 340px; } .sp-chip { min-width: 74px; } }
@media (max-width: 1100px) and (min-width: 901px) { .sp-main { grid-template-columns: 240px minmax(0, 1fr) 310px; gap: .5rem; padding: .5rem; } .sp-top__stats .sp-chip:nth-child(n+5) { display: none; } }

/* Phone / tablet: stacked, page scrolls. */
@media (max-width: 900px) {
    .sp-app { height: auto; min-height: 100dvh; }
    .sp-top { flex-wrap: wrap; position: sticky; top: 0; z-index: 10; }
    .sp-top__stats { margin-left: 0; width: 100%; justify-content: flex-start; gap: .35rem; }
    .sp-chip { min-width: 0; flex: 1 1 22%; padding: .2rem .45rem; }
    .sp-main { display: flex; flex-direction: column; padding: .5rem; gap: .5rem; }
    .sp-col--map { order: 1; } .sp-col--right { order: 2; } .sp-col--left { order: 3; }
    .sp-col--left, .sp-col--right { overflow: visible; }
    .sp-mapwrap { height: 56vh; min-height: 300px; flex: 0 0 auto; }
    .sp-grow { overflow: visible; }
    .sp-enc__acts { grid-template-columns: 1fr; }
}
.sp-enc__acts .sp-btn--amber small { color: rgba(40, 24, 0, .78); }