* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #000; font-family: 'Segoe UI', Tahoma, sans-serif; color: #fff; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
b { font-weight: 700; }

/* ---------- labels ---------- */
#labels, #edgeLayer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.label { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; text-align: center; font-size: 12px; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.label.body { color: #cfe6ff; font-size: 13px; letter-spacing: 1px; }
.label.body small { color: #8fb0d0; font-size: 11px; display: block; }
.label.body.moon { color: #b8c4d0; font-size: 11px; }
.label.player .pn { font-weight: 700; }
.label.player .pb { width: 46px; height: 3px; margin: 2px auto 0; background: rgba(0,0,0,.6); }
.label.player .pb i { display: block; height: 100%; }
.label.player .pb.s i { background: #3ab4ff; }
.label.player .pb.h i { background: #5f5; }
.label.loot { color: #ffd54a; font-weight: 700; font-size: 13px; }
.label.dmg { font-weight: 800; font-size: 16px; transform: translate(-50%, -50%); }
.label.dmg.sh { color: #6cf; }
.label.dmg.hl { color: #ff5a4a; }
.edge { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); }
.edge i { position: absolute; left: -9px; top: -9px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 18px solid currentColor; }
.edge span { position: absolute; left: 14px; top: -8px; font-size: 11px; white-space: nowrap; text-shadow: 0 0 3px #000; }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: flex-start; padding-left: 7vw; background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 70%); }
.loginCard { width: 380px; }
.loginCard h1 { font-size: 54px; margin: 0; letter-spacing: 8px; font-weight: 800; background: linear-gradient(90deg, #fff, #7cf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { color: #9ab; margin: 4px 0 26px; font-size: 13px; }
#nameInput { width: 100%; padding: 14px 16px; font-size: 18px; border-radius: 6px; border: 1px solid #2a4a66; background: rgba(5,15,30,.85); color: #fff; outline: none; }
#nameInput:focus { border-color: #5bf; }
#joinBtn { width: 100%; margin-top: 10px; padding: 14px; font-size: 18px; font-weight: 800; letter-spacing: 3px; border: none; border-radius: 6px; cursor: pointer; background: linear-gradient(90deg, #1b8cff, #19d3a2); color: #fff; }
#joinBtn:hover { filter: brightness(1.15); }
#joinError { color: #ff6060; min-height: 20px; margin-top: 6px; font-size: 14px; }
.online { margin-top: 12px; background: rgba(5,15,30,.7); border: 1px solid #1d3550; border-radius: 6px; padding: 10px 12px; max-height: 260px; overflow-y: auto; }
.onlineHead { color: #7cf; font-weight: 700; margin-bottom: 6px; font-size: 14px; }
#onlineList div { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: #dde; }
#onlineList div span:last-child { color: #9ab; }
#onlineList .bots { color: #fa6; }
#loadStatus { margin-top: 10px; font-size: 12px; color: #789; }
#previewCaption { position: fixed; right: 40px; bottom: 36px; text-align: right; font-size: 28px; letter-spacing: 6px; color: rgba(255,255,255,.8); text-shadow: 0 0 12px #000; }
#previewCaption small { display: block; font-size: 13px; letter-spacing: 2px; color: #9ab; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#bars { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 420px; background: rgba(0,8,16,.55); border: 1px solid rgba(90,170,255,.25); border-radius: 6px; padding: 8px 12px; }
.bar { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.bl { width: 64px; color: #9bd; letter-spacing: 1px; }
.bv { width: 42px; text-align: right; font-family: Consolas, monospace; }
.track { flex: 1; height: 9px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.fill { height: 100%; width: 100%; transition: width .15s; }
.fill.shield { background: linear-gradient(90deg, #1a7fff, #5cf); box-shadow: 0 0 8px #3af; }
.fill.hull { background: linear-gradient(90deg, #2c2, #9f6); }
.fill.hull.low { background: linear-gradient(90deg, #d22, #f73); }
.fill.ammo { background: linear-gradient(90deg, #d90, #fe6); }
#score { position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); display: flex; gap: 22px; font-size: 16px; text-shadow: 0 0 4px #000; }
#score .credits { color: #ffd54a; }
#score .frags { color: #ff9a4a; }
#flight { position: absolute; left: 18px; bottom: 300px; font-size: 13px; background: rgba(0,8,16,.5); padding: 8px 12px; border-radius: 6px; border-left: 2px solid #3af; min-width: 190px; }
#flight .k { color: #7ab; display: inline-block; width: 78px; font-size: 11px; letter-spacing: 1px; }
#flight b { font-family: Consolas, monospace; }
#modes { margin-top: 5px; font-size: 11px; color: #9cf; }
#modes .on { color: #fd5; }
#statusMsg { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-size: 20px; letter-spacing: 4px; color: #8ef; text-shadow: 0 0 12px #08f; text-align: center; }
#statusMsg small { display: block; font-size: 13px; letter-spacing: 1px; color: #bde; }
#warnMsg { position: absolute; top: 25%; left: 50%; transform: translateX(-50%); font-size: 18px; font-weight: 700; color: #ff5040; text-shadow: 0 0 10px #f00; letter-spacing: 2px; animation: blink .6s infinite alternate; }
#warnMsg:empty { display: none; }
#autopilotMsg { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); font-size: 15px; color: #6f9; letter-spacing: 2px; text-shadow: 0 0 8px #0f6; }
@keyframes blink { from { opacity: 1; } to { opacity: .45; } }
#crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; }
.ch-dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; background: #fff; border-radius: 50%; box-shadow: 0 0 4px #fff; }
.ch-ring { position: absolute; inset: 0; border: 1px solid rgba(160,220,255,.55); border-radius: 50%; }
#crosshair.mining .ch-ring { border-color: rgba(255,200,80,.8); border-style: dashed; }
#crosshair.smart .ch-ring { border-width: 2px; border-color: rgba(120,255,160,.8); }
#hitMarker { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%) rotate(45deg); opacity: 0; border-left: 2px solid transparent; }
#hitMarker::before, #hitMarker::after { content: ''; position: absolute; background: #fff; }
#hitMarker::before { left: 12px; top: 0; width: 2px; height: 26px; }
#hitMarker::after { top: 12px; left: 0; height: 2px; width: 26px; }
#hitMarker.show { animation: hitm .25s ease-out; }
@keyframes hitm { from { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1.3); } to { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(1); } }
#targetBox { position: absolute; width: 50px; height: 50px; border: 2px solid #ff4040; display: none; transform: translate(-50%, -50%); box-shadow: 0 0 8px rgba(255,0,0,.5); }
#targetBox .tname { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #f88; white-space: nowrap; }
#targetBox .tdist { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #fbb; white-space: nowrap; font-family: Consolas, monospace; }
#targetBox .tbars { position: absolute; right: -8px; top: 0; bottom: 0; width: 4px; }
#targetBox .tbars i { position: absolute; bottom: 0; width: 2px; }
#targetBox .tbars .ts { left: 0; background: #3af; }
#targetBox .tbars .th { left: 3px; background: #5f5; }
#mineMark { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%) rotate(45deg); border: 2px dashed rgba(255,200,80,.9); display: none; pointer-events: none; }
#leadMark { position: absolute; width: 12px; height: 12px; border: 2px solid #ffb340; border-radius: 50%; transform: translate(-50%, -50%); display: none; }
#chargeRing { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); display: none; }
#chargeRing svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#chargeRing .bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 4; }
#chargeRing .arc { fill: none; stroke: #ff6a20; stroke-width: 5; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; filter: drop-shadow(0 0 4px #f60); }
#chargeRing span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; color: #fa6; letter-spacing: 2px; }
#hitDir { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s; }
#hitDir::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 22px solid rgba(255,40,40,.9); filter: drop-shadow(0 0 6px red); }
#radar { position: absolute; right: 18px; bottom: 18px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(rgba(0,40,30,.55), rgba(0,15,10,.7)); border: 1px solid rgba(80,255,170,.4); }
#targetInfo { position: absolute; right: 230px; bottom: 22px; font-family: Consolas, monospace; font-size: 13px; color: #fb6; text-align: right; background: rgba(0,0,0,.4); padding: 6px 10px; border-radius: 4px; }
#targetInfo:empty { display: none; }
#lbTop { position: absolute; top: 14px; right: 14px; min-width: 190px; font-size: 12px; background: rgba(0,8,16,.5); border-radius: 6px; padding: 8px 10px; }
#lbTop .h { color: #7cf; font-weight: 700; margin-bottom: 4px; letter-spacing: 1px; }
#lbTop div.r { display: flex; justify-content: space-between; gap: 10px; }
#lbTop div.r.me { color: #fd5; }
#lbTop div.r.bot { color: #bbb; }
#killFeed { position: absolute; top: 170px; right: 14px; text-align: right; font-size: 13px; }
#killFeed div { background: rgba(0,0,0,.45); margin-bottom: 3px; padding: 3px 8px; border-radius: 3px; animation: fadeOut 6s forwards; }
#killFeed .k { color: #ff9a4a; } #killFeed .v { color: #ff5a5a; }
@keyframes fadeOut { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#netStats { position: absolute; top: 8px; left: 10px; font-family: Consolas, monospace; font-size: 12px; color: #fa0; text-shadow: 0 0 2px #000; }
#pip { position: absolute; right: 18px; bottom: 232px; width: 280px; height: 180px; border: 2px solid #ff5a1a; border-radius: 4px; display: none; box-shadow: 0 0 12px rgba(255,90,30,.5); }
#pip span { position: absolute; top: 3px; left: 6px; font-size: 11px; color: #ff7a3a; letter-spacing: 2px; font-family: Consolas, monospace; }

/* ---------- chat ---------- */
#chatBox { position: fixed; left: 14px; bottom: 14px; width: 380px; z-index: 6; display: flex; flex-direction: column; pointer-events: none; }
#chatMessages { max-height: 220px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 13px; text-shadow: 0 0 3px #000, 0 0 2px #000; }
#chatMessages div { margin-top: 2px; word-wrap: break-word; }
#chatMessages div.old { opacity: .35; }
#chatInput { display: none; margin-top: 6px; padding: 8px; font-size: 14px; border: 1px solid #3af; border-radius: 4px; background: rgba(0,10,25,.85); color: #fff; outline: none; pointer-events: auto; }

/* ---------- overlays ---------- */
#hitFlash { position: fixed; inset: 0; pointer-events: none; z-index: 4; box-shadow: inset 0 0 160px rgba(255,0,0,.0); transition: box-shadow .35s; }
#hitFlash.on { box-shadow: inset 0 0 160px rgba(255,20,20,.75); transition: none; }
#hitFlash.shield.on { box-shadow: inset 0 0 140px rgba(40,150,255,.6); }
#hpWarning { position: fixed; inset: 0; pointer-events: none; z-index: 4; border: 6px solid rgba(255,0,0,.5); display: none; animation: blink .5s infinite alternate; }
#respawnScreen { position: fixed; inset: 0; z-index: 25; display: none; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(rgba(80,0,0,.35), rgba(40,0,0,.8)); }
#respawnScreen .big { font-size: 48px; font-weight: 800; letter-spacing: 6px; color: #ff5a4a; text-shadow: 0 0 20px #f00; }
#respawnScreen .small { margin-top: 18px; font-size: 20px; color: #fcc; }
#killedBy { margin-top: 10px; font-size: 18px; color: #fbb; }

#lbFull { position: fixed; top: 8%; left: 50%; transform: translateX(-50%); width: min(760px, 92vw); max-height: 84%; overflow-y: auto; z-index: 26; display: none; background: rgba(2,10,20,.93); border: 1px solid #245; border-radius: 10px; padding: 18px 26px; }
#lbFull h2 { margin: 0 0 10px; text-align: center; letter-spacing: 4px; color: #7cf; }
#lbFull h3 { color: #19d3a2; margin: 18px 0 6px; font-size: 14px; letter-spacing: 2px; }
#lbFull table { width: 100%; border-collapse: collapse; font-size: 14px; }
#lbFull th { color: #7ab; font-weight: 600; text-align: left; border-bottom: 1px solid #245; padding: 6px; }
#lbFull td { padding: 5px 6px; border-bottom: 1px solid rgba(40,80,120,.25); }
#lbFull tr.me td { color: #fd5; }
#lbFull tr.bot td { color: #aab; }
#resourceStats td { color: #aac; font-family: Consolas, monospace; font-size: 12px; }

#pauseMenu { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.menuCard { background: rgba(4,12,24,.96); border: 1px solid #2a4a6a; border-radius: 12px; padding: 22px 30px; width: min(1020px, 95vw); max-height: 92vh; overflow-y: auto; }
.menuCard h2 { margin: 0 0 12px; letter-spacing: 6px; text-align: center; color: #7cf; }
.menuCard button.primary { display: block; margin: 0 auto 12px; padding: 12px 50px; font-size: 17px; font-weight: 700; letter-spacing: 2px; border: none; border-radius: 6px; cursor: pointer; background: linear-gradient(90deg, #1b8cff, #19d3a2); color: #fff; }
.menuCols { display: flex; gap: 28px; flex-wrap: wrap; }
.menuTabs { display: flex; gap: 6px; justify-content: center; margin: 0 -30px 8px; padding: 8px 0; position: sticky; top: -22px; z-index: 3; background: rgba(4,12,24,.98); }
.menuTabs button { padding: 7px 22px; border: 1px solid #2a4a6a; border-radius: 6px; background: transparent; color: #9bc; font-size: 14px; letter-spacing: 1px; cursor: pointer; }
.menuTabs button.on { background: #12365a; color: #fff; border-color: #3a7ab0; }
.menuCols .row span[id$=Value] { min-width: 40px; text-align: right; }
.menuCols .col { flex: 1; min-width: 240px; }
.menuCols h3 { color: #19d3a2; font-size: 13px; letter-spacing: 2px; margin: 14px 0 6px; text-transform: uppercase; }
.menuCols label { display: block; margin: 4px 0; font-size: 14px; cursor: pointer; color: #dde; }
.menuCols .row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #dde; margin: 4px 0; }
.menuCols input[type=range] { flex: 1; }
.menuCols .hint { font-size: 11px; color: #789; }
.menuCols .help p { margin: 3px 0; font-size: 13px; color: #bcd; }
.menuCols .help b { color: #fd5; }

/* ---------- far ship labels ---------- */
.label.player .pd { font-size: 10px; color: #c8d4e0; }
.label.player.far .pb { display: none; }
.label.player.far .pn { font-weight: 600; font-size: 11px; }

/* ---------- touch controls (phones) ---------- */
#touchUI { position: fixed; inset: 0; z-index: 8; display: none; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.touch #touchUI { display: block; }
#touchUI > * { pointer-events: auto; touch-action: none; }
#tLook { position: absolute; inset: 0; }
#tStickZone { position: absolute; left: 0; bottom: 0; width: 40vw; height: 62vh; }
#tStick { position: fixed; left: 100px; top: calc(100% - 100px); width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(120,200,255,.28); background: rgba(20,60,100,.14); pointer-events: none !important; }
#tStick.on { border-color: rgba(120,200,255,.6); background: rgba(20,60,100,.3); }
#tKnob { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(120,200,255,.45); box-shadow: 0 0 10px rgba(80,170,255,.5); }
#tTop { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
#tTop button { padding: 8px 7px; min-width: 42px; border-radius: 6px; border: 1px solid rgba(120,190,255,.4); background: rgba(8,24,44,.6); color: #cfe6ff; font: 700 10px/1 system-ui, sans-serif; letter-spacing: 1px; }
#tTop button:active { background: rgba(60,150,255,.55); }
#touchUI .tb { position: absolute; padding: 0; border-radius: 50%; border: 2px solid rgba(140,200,255,.45); background: rgba(10,30,55,.42); color: #cfe6ff; font: 700 10px/1 system-ui, sans-serif; letter-spacing: 1px; }
#touchUI .tb.on { background: rgba(60,150,255,.55); border-color: #9cf; }
#touchUI .tb.fire { right: 20px; bottom: 22px; width: 88px; height: 88px; font-size: 12px; border-color: rgba(120,255,170,.65); }
#touchUI .tb.fire.on { background: rgba(60,220,130,.5); }
#touchUI .tb.laser { right: 122px; bottom: 12px; width: 62px; height: 62px; border-color: rgba(255,120,210,.65); }
#touchUI .tb.laser.on { background: rgba(230,80,190,.5); }
#touchUI .tb.missile { right: 32px; bottom: 124px; width: 60px; height: 60px; border-color: rgba(255,160,80,.65); }
#touchUI .tb.missile.on { background: rgba(255,140,40,.5); }
#touchUI .tb.boost { right: 114px; bottom: 88px; width: 58px; height: 58px; }
#touchUI .tb.brake { right: 104px; bottom: 160px; width: 52px; height: 52px; }
#touchUI .tb.up { right: 196px; bottom: 74px; width: 50px; height: 50px; font-size: 16px; }
#touchUI .tb.down { right: 196px; bottom: 16px; width: 50px; height: 50px; font-size: 16px; }
#touchUI .tb.roll { bottom: calc(62vh + 8px); width: 50px; height: 50px; font-size: 22px; }
#touchUI .tb.roll.l { left: 14px; }
#touchUI .tb.roll.r { left: 72px; }
#rotateHint { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.88); color: #cfe6ff; font-size: 20px; letter-spacing: 2px; align-items: center; justify-content: center; text-align: center; padding: 24px; }
@media (orientation: portrait) { body.touch #rotateHint { display: flex; } }

/* Compact HUD on phones. */
body.touch { overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; }
body.touch #lbTop, body.touch #netStats, body.touch .menuCols .help { display: none; }
body.touch #radar { width: 104px; height: 104px; top: 8px; right: 8px; bottom: auto; }
body.touch #flight { left: 8px; top: 8px; bottom: auto; min-width: 0; padding: 4px 8px; font-size: 11px; }
body.touch #flight .k { width: 60px; font-size: 9px; }
body.touch #bars { width: min(300px, 34vw); bottom: 4px; padding: 3px 8px; }
body.touch .bar { margin: 1px 0; font-size: 9px; gap: 5px; }
body.touch .bl { width: 48px; }
body.touch .bv { width: 30px; }
body.touch .track { height: 6px; }
body.touch #score { bottom: 60px; font-size: 12px; gap: 14px; }
body.touch #killFeed { top: 46px; right: 120px; font-size: 11px; }
body.touch #targetInfo { right: 8px; top: 118px; bottom: auto; font-size: 11px; padding: 4px 8px; }
body.touch #pip { width: 170px; height: 104px; right: 120px; top: 130px; bottom: auto; }
body.touch #chatBox { width: 42vw; left: 130px; top: 96px; bottom: auto; font-size: 11px; }
body.touch #autopilotMsg { top: 48px; font-size: 12px; }
body.touch #statusMsg { top: 24%; font-size: 15px; }
body.touch #warnMsg { top: 32%; font-size: 14px; }
body.touch #lbFull { top: 46px; max-height: calc(100% - 56px); padding: 10px 14px; }
body.touch .menuCard { padding: 12px 14px; }
body.touch .menuCols { gap: 12px; }
body.touch #chargeRing { transform: translate(-50%, -50%) scale(.8); }

/* Small screens: compact login card. */
@media (max-height: 520px) {
    #login { padding-left: 4vw; }
    .loginCard h1 { font-size: 34px; letter-spacing: 5px; }
    .subtitle { margin: 2px 0 10px; font-size: 11px; }
    #nameInput, #joinBtn { padding: 10px 12px; font-size: 16px; }
    .online { max-height: 90px; padding: 6px 10px; }
    #previewCaption { font-size: 18px; right: 16px; bottom: 12px; }
}

/* ===== v23: crystals, shop ===== */
#score .crystals { color: #b98cff; }
#mineMark.crystal { border-color: rgba(190,140,255,.95); box-shadow: 0 0 10px rgba(170,110,255,.8); }
#shop { position: fixed; inset: 0; z-index: 45; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.shopCard { width: min(760px, 95vw); }
.shopWallet { text-align: center; font-size: 18px; color: #ffd54a; margin-bottom: 14px; }
.shopWallet span { color: #b98cff; margin-left: 18px; }
#shopList { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 10px; }
.shopItem { background: rgba(20,40,70,.55); border: 1px solid #2a4a6a; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.shopItem .sn { font-weight: 700; color: #cfe6ff; letter-spacing: 1px; }
.shopItem .sd { font-size: 12px; color: #9ab; flex: 1; }
.shopItem .sp { font-size: 13px; color: #ffd54a; }
.shopItem .ss { font-size: 11px; color: #7f93a8; border-top: 1px dashed #2a4a6a; padding-top: 5px; }
.shopItem .ss.on { color: #ffcf4a; font-weight: 700; text-shadow: 0 0 8px rgba(255,190,60,.6); }
.shopItem.super { border-color: #c9a23a; box-shadow: 0 0 14px rgba(255,190,60,.25) inset; }
.shopNote { grid-column: 1 / -1; text-align: center; color: #ffb070; font-size: 13px; padding: 6px; border: 1px dashed #6a4a2a; border-radius: 6px; }
.shopItem .pips { display: flex; gap: 4px; }
.shopItem .pips i { width: 18px; height: 6px; border-radius: 3px; background: #243548; }
.shopItem .pips i.on { background: linear-gradient(90deg, #1b8cff, #19d3a2); }
.shopItem button { padding: 8px; border: none; border-radius: 5px; cursor: pointer; font-weight: 700; background: #1b8cff; color: #fff; }
.shopItem button:disabled { background: #2a3a4a; color: #678; cursor: default; }
#shopMsg { text-align: center; min-height: 20px; color: #19d3a2; margin-bottom: 6px; }
#shopMsg.bad { color: #ff7070; }
.shopCard .hint { text-align: center; font-size: 11px; color: #789; margin-bottom: 12px; }
body.touch .shopCard { padding: 10px 12px; }
body.touch #shopList { grid-template-columns: repeat(4, 1fr); gap: 6px; }
body.touch .shopItem .sd { font-size: 10px; }

/* v27: planet minimap, spaceports, rare ore */
#minimap { position: absolute; right: 18px; bottom: 228px; width: 200px; height: 200px; display: none; border-radius: 8px; border: 1px solid rgba(255,210,90,.45); background: rgba(0,10,20,.6); box-shadow: 0 0 12px rgba(0,0,0,.5); pointer-events: none; }
#minimap.big { right: 50%; bottom: 50%; transform: translate(50%, 50%); width: min(720px, calc(100vw - 32px)); height: auto; aspect-ratio: 720 / 380; z-index: 20; }
body.touch #minimap { width: 104px; height: 104px; top: 120px; right: 8px; bottom: auto; }
.label.port .pn { color: #ffd24a; font-weight: 600; text-shadow: 0 0 4px #000; }
.label.port .pd { color: #ffe9a8; font-size: 11px; }
.label.port.far { opacity: .6; }
#mineMark.rare { border-color: rgba(255,205,60,.95); box-shadow: 0 0 10px rgba(255,190,40,.8); }
.portBox { grid-column: 1 / -1; border: 1px solid rgba(255,210,90,.5); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: rgba(60,45,10,.35); }
.portBox .pn { color: #ffd24a; font-weight: 700; margin-bottom: 8px; letter-spacing: .05em; }
.portBtns { display: flex; flex-wrap: wrap; gap: 8px; }
.portBtns button { flex: 1 1 140px; }