:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f7fbff;
  background: #070914;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #070914; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; }
.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

.menu-screen, .lobby-screen {
  display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #1b2750 0, #0b1022 38%, #05060c 74%);
}
.menu-screen::before, .lobby-screen::before {
  content: ""; position: absolute; inset: 0; opacity: .4;
  background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 43px 43px;
}
.menu-card {
  position: relative; z-index: 3; width: min(430px, calc(100vw - 32px)); padding: 34px;
  border: 1px solid rgba(255,255,255,.15); border-radius: 24px;
  background: rgba(8,12,27,.78); backdrop-filter: blur(20px); box-shadow: 0 24px 90px rgba(0,0,0,.45);
}
.eyebrow { font-size: 11px; letter-spacing: .22em; font-weight: 900; color: #74e6ff; }
h1 { margin: 8px 0 6px; font-size: clamp(50px, 10vw, 78px); line-height: .92; letter-spacing: -.07em; }
.menu-card > p { color: #aab4cd; line-height: 1.5; margin: 14px 0 26px; }
label { display: grid; gap: 7px; color: #7f8aa5; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
input { width: 100%; color: white; background: #11182c; border: 1px solid #293451; border-radius: 12px; padding: 14px 15px; outline: 0; }
input:focus { border-color: #56d7f5; box-shadow: 0 0 0 3px rgba(86,215,245,.12); }
button { color: #dfe8ff; background: #1b2742; border-radius: 12px; padding: 14px 18px; font-weight: 900; letter-spacing: .04em; }
button:hover { filter: brightness(1.13); }
button:disabled { cursor: default; opacity: .45; filter: none; }
.primary { width: 100%; margin-top: 14px; background: linear-gradient(135deg,#62e6ff,#7c6fff); color: #07101c; }
.secondary { width:100%;margin-top:8px;border:1px solid #354463;background:#131e35;color:#8ce9ff; }
.divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: #55617c; font-size: 10px; font-weight: 800; }
.divider::before,.divider::after { content:""; height:1px; background:#26304a; flex:1; }
.join-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.join-row input { font-size: 20px; letter-spacing: .22em; font-weight: 900; }
.suit-picker { margin-top:14px;display:grid;gap:8px;color:#7f8aa5;font-size:11px;font-weight:800;letter-spacing:.1em; }
#suit-colors { display:flex;gap:9px; }
#suit-colors button { width:34px;height:34px;padding:0;border-radius:50%;background:var(--suit);border:3px solid transparent;box-shadow:inset 0 -5px 10px rgba(0,0,0,.2); }
#suit-colors button.selected { border-color:#fff;transform:scale(1.08);box-shadow:0 0 0 3px rgba(116,230,255,.25); }
.error { color:#ff8395 !important; min-height:22px; margin:12px 0 0 !important; font-size:13px; }
.planet { position:absolute; border-radius:50%; filter: drop-shadow(0 0 45px rgba(80,141,255,.2)); }
.planet-a { width:260px;height:260px;right:-70px;top:-60px;background:radial-gradient(circle at 35% 30%,#61a8ff,#5648b6 42%,#171b50 70%); }
.planet-b { width:150px;height:150px;left:4%;bottom:6%;background:radial-gradient(circle at 35% 30%,#ffd16a,#e26d50 48%,#5f2439 75%); }

.lobby-card {
  position:relative;z-index:3;width:min(520px,calc(100vw - 32px));padding:34px;
  border:1px solid rgba(255,255,255,.15);border-radius:24px;background:rgba(8,12,27,.84);
  backdrop-filter:blur(20px);box-shadow:0 24px 90px rgba(0,0,0,.45);
}
.lobby-card h2 { margin:8px 0 4px;font-size:36px;letter-spacing:.04em; }
.lobby-card h2 strong { color:#74e6ff;letter-spacing:.15em; }
.lobby-stage { display:inline-flex;gap:6px;padding:6px 9px;border-radius:999px;background:#14243a;color:#7f8aa5;font-size:9px;font-weight:900;letter-spacing:.1em; }
.lobby-stage b { color:#74e6ff; }
.lobby-help { margin:8px 0 26px;color:#9ca8c0;line-height:1.5; }
.crew-heading { display:flex;justify-content:space-between;color:#7383a2;font-size:10px;font-weight:900;letter-spacing:.15em; }
.crew-list { list-style:none;padding:0;margin:10px 0 18px;display:grid;gap:8px; }
.crew-list li { display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:12px;background:#11182c;border:1px solid #25304b; }
.crew-list i { width:10px;height:10px;border-radius:50%;box-shadow:0 0 12px currentColor; }
.crew-list span { font-weight:800; }
.crew-list b { color:#7383a2;font-size:9px;letter-spacing:.13em; }
.lobby-status { margin:14px 0 0;text-align:center;color:#7f8aa5;font-size:12px; }

#game { background:#03050a; }
#game-canvas { width:100%;height:100%;display:block; }
.hud { position:absolute; z-index:5; border:1px solid rgba(127,199,255,.16); background:rgba(5,11,23,.76); backdrop-filter:blur(12px); box-shadow:0 12px 40px rgba(0,0,0,.18); }
.top-hud { top:14px;left:14px;right:14px;min-height:66px;border-radius:16px;padding:11px 16px;display:grid;grid-template-columns:86px 58px 58px auto 1fr;gap:13px;align-items:center; }
.label { display:block;color:#7383a2;font-size:9px;letter-spacing:.16em;font-weight:900;margin-bottom:3px; }
.top-hud strong { font-size:20px;letter-spacing:.08em; }
.enemy-block { display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px; }
.enemy-block .label { margin:0; }
.phase-rail { display:flex;gap:5px; }
.phase-rail span { padding:7px 10px;border-radius:999px;color:#54617a;background:#10182b;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap; }
.phase-rail span.active { color:#06101b;background:#73e4ff;box-shadow:0 0 20px rgba(86,215,245,.25); }
.phase-rail span.complete { color:#91f2bc;background:#173528; }
.bar { height:10px;background:#172038;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.bar i { display:block;width:0;height:100%;background:linear-gradient(90deg,#5ce8ff,#7b7cff);transition:width .16s ease; }
.bar.enemy i { width:100%;background:linear-gradient(90deg,#ff4f68,#ff9966); }
.bar.enemy-shield { margin-bottom:4px;height:5px; }
.bar.enemy-shield i { width:0;background:linear-gradient(90deg,#75d9ff,#ae8cff); }
.ship-status,.resource-status { left:14px;top:94px;width:250px;border-radius:16px;padding:15px; }
.ship-status h2,.resource-status h2,.job-panel h2,.build-panel h2 { margin:0 0 14px;font-size:13px;letter-spacing:.09em; }
.stat { display:grid;grid-template-columns:56px 1fr 48px;gap:7px;align-items:center;margin:10px 0; }
.stat span,.stat b { font-size:9px;color:#9ca8c0; }
.stat b { text-align:right;color:#eaf1ff; }
.bar.resource i { background:linear-gradient(90deg,#f7cb60,#66e3af); }
.rare-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;color:#7f8aa5;font-size:8px;font-weight:900; }
.rare-row b { color:#fff;margin-left:2px; }
.battle-clock { display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid #25304b;color:#ff8a9d;font-size:10px;font-weight:900;letter-spacing:.08em; }
.gather-clock { display:flex;justify-content:space-between;margin-top:12px;padding:10px 2px 0;border-top:1px solid #25304b;color:#74e6ff;font-size:10px;font-weight:900;letter-spacing:.08em; }
.gather-clock b { font-size:15px;color:#fff; }
.gather-clock.urgent,.gather-clock.urgent b { color:#ff6b55;animation:timer-warning .7s infinite alternate; }
@keyframes timer-warning { to { text-shadow:0 0 12px #ff3c2e; } }
.red-alert { position:absolute;z-index:6;left:50%;top:94px;transform:translateX(-50%);padding:9px 18px;border-radius:999px;background:rgba(178,27,49,.86);box-shadow:0 0 35px rgba(255,42,75,.3);font-size:12px;font-weight:1000;letter-spacing:.15em;animation:pulse 1s infinite alternate; }
.red-alert small { font-size:9px;margin-left:10px;opacity:.8; }
@keyframes pulse { to { box-shadow:0 0 55px rgba(255,42,75,.58);transform:translateX(-50%) scale(1.02); } }
.job-panel { left:50%;bottom:18px;transform:translateX(-50%);width:min(650px,calc(100vw - 28px));border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr 210px;gap:12px;align-items:center; }
.job-panel h2 { margin:0;font-size:18px; }
.mining-progress { width:min(340px,100%);margin-top:9px; }
.mining-progress > div:first-child { display:flex;justify-content:space-between;margin-bottom:5px;color:#70dce5;font-size:9px;font-weight:900;letter-spacing:.1em; }
.mining-progress b { color:#fff; }
.bar.mining { height:13px; }
.bar.mining i { background:linear-gradient(90deg,#f0d52e,#28d9d0); }
.rescue-progress { width:min(340px,100%);margin-top:9px; }
.rescue-progress > div:first-child { display:flex;justify-content:space-between;margin-bottom:5px;color:#7ff6ff;font-size:9px;font-weight:900;letter-spacing:.1em; }
.rescue-progress b { color:#fff; }
.bar.rescue { height:13px;border:1px solid #61efff;background:#071823; }
.bar.rescue i { background:repeating-linear-gradient(90deg,#37e8ff 0 13px,#a8ffff 13px 16px);box-shadow:0 0 14px #34e8ff; }
.battle-downed { filter:saturate(.35) brightness(.72); }
.job-panel p { grid-column:1/-1;margin:0;color:#7f8aa5;font-size:11px; }
#job-button { min-height:54px;background:linear-gradient(135deg,#f4cb56,#ff765f);color:#171006;box-shadow:0 8px 28px rgba(255,132,82,.2); }
.crew-notice { position:absolute;z-index:7;left:50%;top:94px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;background:rgba(7,17,32,.85);border:1px solid rgba(116,230,255,.2);color:#bfeeff;font-size:11px;font-weight:900;letter-spacing:.04em;transition:opacity .2s; }
.world-mining-marker { position:absolute;z-index:8;width:150px;transform:translate(-50%,-115%);padding:7px 9px;pointer-events:none;text-align:center;border:1px solid #23dce2;background:rgba(3,25,34,.92);box-shadow:0 0 14px rgba(35,220,226,.22);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px); }
.world-mining-marker span { display:block;color:#c9ffff;font:500 10px Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;letter-spacing:.08em; }
.world-mining-marker > div { height:8px;margin:5px 0 3px;padding:1px;border:1px solid #08727d;background:#06161e; }
.world-mining-marker i { display:block;width:0;height:100%;background:repeating-linear-gradient(90deg,#f0d52e 0 8px,#31b7a6 8px 10px);transition:width .12s ease; }
.world-mining-marker b { color:#7debf0;font-size:8px;letter-spacing:.08em; }
.event-log { right:14px;top:94px;width:285px;border-radius:16px;padding:12px; }
.event-log h2 { margin:0 0 7px;font-size:10px;letter-spacing:.13em;color:#7787a5; }
.event-log ol { list-style:none;margin:0;padding:0;display:grid;gap:4px; }
.event-log li { padding:6px 8px;border-radius:7px;background:#10182a;color:#9fb0ce;font-size:9px;animation:log-in .22s ease-out; }
.event-log li.danger { color:#ff8b9e;background:#32131c; }
.event-log li.success { color:#8ff0b6;background:#113022; }
.event-log li.phase { color:#7ee7ff;background:#10283a; }
@keyframes log-in { from { opacity:0;transform:translateX(12px); } }
.battle-tasks { left:14px;top:372px;width:250px;padding:12px;border-radius:14px; }
.battle-tasks h2 { display:flex;justify-content:space-between;gap:8px;margin:0 0 8px;font-size:10px;letter-spacing:.11em; }
.battle-tasks h2 b { color:#ff866f;font-size:8px;white-space:nowrap; }
.battle-tasks ol { display:grid;gap:5px;list-style:none;margin:0;padding:0; }
.battle-tasks li { display:grid;grid-template-columns:58px 1fr;gap:6px;align-items:center;padding:5px 6px;border-left:2px solid #46616b;background:rgba(8,25,34,.82); }
.battle-tasks li.assigned { border-left-color:#f4d63e;background:rgba(67,51,8,.7); }
.battle-tasks li strong { font-size:8px;letter-spacing:.06em; }
.battle-tasks li small { grid-column:1/-1;color:#68a9b5;font-size:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.battle-tasks .task-bar { height:7px;border:1px solid #08717a;background:#06161e;overflow:hidden; }
.battle-tasks .task-bar i { display:block;height:100%;background:linear-gradient(90deg,#28d7db,#f1d934);transition:width .15s; }
.final-countdown { position:absolute;z-index:9;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;background:radial-gradient(circle,rgba(100,0,8,.15),rgba(55,0,7,.5));animation:countdown-flash .48s infinite alternate; }
.final-countdown span,.final-countdown small { color:#ffb19f;font-weight:1000;letter-spacing:.2em;text-shadow:0 0 14px #ff271c; }
.final-countdown b { color:#fff;font-size:min(25vw,220px);line-height:.8;text-shadow:0 0 25px #ff2b1f,0 0 75px #bd001e; }
.battle-urgent .battle-clock,.battle-urgent .battle-clock b { color:#ff4d35;animation:timer-warning .35s infinite alternate; }
.battle-critical #game-canvas { animation:critical-shake .2s infinite; }
@keyframes countdown-flash { to { background:radial-gradient(circle,rgba(160,0,10,.08),rgba(95,0,8,.6)); } }
@keyframes critical-shake { 25% { transform:translate(1px,-1px); } 75% { transform:translate(-1px,1px); } }
.build-panel { left:50%;bottom:18px;transform:translateX(-50%);width:min(850px,calc(100vw - 28px));border-radius:18px;padding:16px; }
.build-heading { display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:12px; }
.build-heading h2 { margin:0;font-size:19px; }
.build-heading p { margin:0;color:#7f8aa5;font-size:11px; }
.sequence { display:flex;justify-content:center;gap:7px;margin:14px 0;flex-wrap:wrap; }
.sequence span { display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#10182b;border:1px solid #30405f;color:#7f8aa5;font-weight:1000; }
.sequence span.complete { background:#1b543b;color:#a7ffd0;border-color:#3c996e; }
.sequence span.current { border-color:#74e6ff;color:#fff;box-shadow:0 0 16px rgba(116,230,255,.3); }
.build-keys { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.build-keys button { min-height:58px;font-size:19px;background:linear-gradient(145deg,#263858,#17243d);border:1px solid #3a4d70; }
.build-progress { height:8px;margin-top:10px;background:#111a2c;border-radius:99px;overflow:hidden; }
.build-progress i { display:block;height:100%;width:0;background:linear-gradient(90deg,#67e4ff,#7bf1a8);transition:width .16s; }
.upgrade-panel { left:50%;bottom:18px;transform:translateX(-50%);width:min(850px,calc(100vw - 28px));border-radius:18px;padding:16px; }
.upgrade-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
.upgrade-grid button { min-height:82px;padding:11px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:5px;border:1px solid #2a3754;background:#111a2d; }
.upgrade-grid button span { color:#eaf1ff;font-size:12px; }
.upgrade-grid button b { color:#74e6ff;font-size:10px; }
.upgrade-grid button small { grid-column:1/-1;color:#7f8aa5;font-size:9px;line-height:1.35; }
.danger { width:100%;margin-top:10px;background:linear-gradient(135deg,#ff4f68,#ff9966);color:#1b080d; }
.result { position:absolute;z-index:20;inset:0;display:grid;place-items:center;background:rgba(2,5,12,.7);backdrop-filter:blur(9px); }
.result-card { width:min(430px,calc(100vw - 32px));text-align:center;background:#0b1120;border:1px solid #293551;border-radius:24px;padding:34px;box-shadow:0 30px 100px #000; }
.result-card h2 { font-size:52px;line-height:1;margin:8px 0 10px; }
.result-card p { color:#95a2bc;line-height:1.5; }

@media (max-width: 700px) {
  .top-hud { grid-template-columns:52px 36px 38px 1fr;gap:6px;padding:9px 10px; }
  .phase-rail { justify-content:flex-end; }
  .phase-rail span { padding:6px;font-size:8px; }
  .enemy-block { display:none !important; }
  .top-hud strong { font-size:16px; }
  .enemy-block { grid-template-columns:1fr;gap:3px; }
  .ship-status,.resource-status { width:205px;top:90px;padding:10px; }
  .red-alert { top:auto;bottom:142px;white-space:nowrap; }
  .job-panel { bottom:10px;grid-template-columns:1fr 145px;padding:10px; }
  .job-panel h2 { font-size:14px; }
  .crew-notice { top:230px;max-width:calc(100vw - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .event-log { display:none; }
  .battle-tasks { left:auto;right:10px;top:230px;width:180px;max-height:230px;overflow:auto; }
  .battle-tasks li { grid-template-columns:50px 1fr; }
  .build-panel,.upgrade-panel { bottom:8px;max-height:58vh;overflow:auto; }
  .build-heading { display:block; }
  .upgrade-grid { grid-template-columns:repeat(2,1fr); }
}

/* Sci-fi command interface */
:root {
  --space-black: #050a0f;
  --space-panel: rgba(7, 31, 43, .92);
  --space-panel-light: rgba(11, 54, 70, .9);
  --space-line: #00b9bd;
  --space-glow: #6dfaff;
  --space-blue: #31c8f2;
  --space-muted: #68a9b5;
  --space-gold: #f2d633;
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  color: #e9feff;
  background: var(--space-black);
}

body::after {
  content: "";
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(116, 242, 255, .1) 4px);
  mix-blend-mode: screen;
}

.menu-screen, .lobby-screen {
  background:
    linear-gradient(rgba(1, 14, 21, .3), rgba(1, 7, 11, .84)),
    radial-gradient(circle at 50% 38%, #0c5264 0, #082938 27%, #030a10 68%);
}

.menu-screen::before, .lobby-screen::before {
  opacity: .28;
  background-image:
    linear-gradient(rgba(27, 181, 191, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 181, 191, .06) 1px, transparent 1px),
    radial-gradient(#b8fbff 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px, 83px 83px;
}

.menu-card, .lobby-card, .result-card {
  border: 1px solid var(--space-line);
  border-radius: 2px;
  clip-path: polygon(0 16px, 16px 0, calc(100% - 58px) 0, calc(100% - 48px) 8px, 100% 8px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 54px 100%, 44px calc(100% - 7px), 0 calc(100% - 7px));
  background:
    linear-gradient(135deg, rgba(0, 210, 214, .08), transparent 28%),
    linear-gradient(180deg, rgba(10, 55, 72, .96), rgba(4, 22, 31, .98));
  box-shadow: inset 0 0 0 5px rgba(0, 171, 180, .07), 0 0 25px rgba(0, 226, 231, .12), 0 32px 100px rgba(0, 0, 0, .58);
}

.menu-card::before, .lobby-card::before, .result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 34%;
  width: 32%;
  height: 2px;
  background: var(--space-glow);
  box-shadow: 0 0 15px var(--space-glow);
}

.eyebrow, .label, label, .suit-picker, .crew-heading {
  color: var(--space-blue);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
}

h1, h2, button, .top-hud strong, .lobby-stage, .stat b, .battle-clock b {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
}

h1 {
  color: #f1ffff;
  letter-spacing: .025em;
  text-shadow: 0 0 7px rgba(121, 246, 255, .6), 4px 4px 0 #063743;
}

.menu-card > p, .lobby-help, .result-card p {
  color: #85bdc7;
}

input {
  color: #eaffff;
  border: 1px solid #087f8b;
  border-radius: 2px;
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  background: linear-gradient(180deg, rgba(8, 47, 62, .95), rgba(4, 25, 35, .98));
  box-shadow: inset 0 0 15px rgba(0, 181, 190, .08);
}

input::placeholder { color: #4f8d98; }
input:focus { border-color: var(--space-glow); box-shadow: 0 0 0 2px rgba(53, 237, 242, .12), inset 0 0 18px rgba(0, 218, 226, .1); }

button {
  position: relative;
  border: 1px solid #00a8ae;
  border-radius: 2px;
  clip-path: polygon(0 7px, 7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
  color: #dffeff;
  background: linear-gradient(180deg, #0d5663, #08303d 52%, #061e29 53%, #0a3440);
  box-shadow: inset 0 0 0 3px rgba(0, 5, 8, .4), 0 0 10px rgba(0, 227, 232, .12);
  text-shadow: 0 1px 0 #001418;
  transition: filter .14s ease, transform .14s ease, box-shadow .14s ease;
}

button:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 3px rgba(0, 5, 8, .32), 0 0 17px rgba(42, 245, 249, .3);
}

button:active { transform: translateY(1px); }
button:disabled { color: #45636a; border-color: #33545b; background: linear-gradient(#263a3e, #16252a); box-shadow: none; }

.primary, #job-button, .danger {
  color: #17200b;
  border-color: #ffed43;
  background: linear-gradient(180deg, #f4e736, #d6b91b 53%, #b88312 54%, #e0a81b);
  box-shadow: inset 0 0 0 3px rgba(75, 56, 5, .45), 0 0 14px rgba(255, 226, 45, .23);
  text-shadow: 0 1px rgba(255, 250, 158, .45);
}

.danger {
  color: #fff4e4;
  border-color: #ff6f45;
  background: linear-gradient(180deg, #f0563b, #9f2730 53%, #641724 54%, #a1262c);
  text-shadow: 0 1px #31030b;
}

#job-button:disabled {
  color: #53686b;
  border-color: #40585b;
  background: linear-gradient(180deg, #334548, #1d2b2e 53%, #152124 54%, #263538);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .22);
  text-shadow: none;
}

.secondary { border-color: #087f8b; color: #75edf2; background: linear-gradient(180deg, #104954, #072632); }
.divider { color: #45aab4; }
.divider::before, .divider::after { background: linear-gradient(90deg, transparent, var(--space-line), transparent); }

#suit-colors button {
  border-radius: 2px;
  border: 2px solid #0c707b;
  clip-path: polygon(25% 0, 75% 0, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0 75%, 0 25%);
  box-shadow: inset 0 -8px 10px rgba(0, 0, 0, .3);
}

#suit-colors button.selected {
  border-color: #e8ffff;
  box-shadow: 0 0 0 2px var(--space-line), 0 0 15px var(--suit);
}

.planet { opacity: .68; filter: drop-shadow(0 0 45px rgba(39, 210, 224, .18)) saturate(.7); }
.lobby-stage { border: 1px solid #087b86; border-radius: 2px; background: #082c38; color: #77aeb7; }
.lobby-stage b { color: var(--space-gold); }
.crew-list li {
  border: 1px solid #087984;
  border-radius: 1px;
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  background: linear-gradient(90deg, rgba(10, 57, 72, .96), rgba(5, 35, 47, .92));
}

.lobby-status { color: #62a3ad; }

#game { background: #010509; }

.hud {
  border: 1px solid rgba(0, 193, 198, .88);
  border-radius: 2px;
  clip-path: polygon(0 10px, 10px 0, calc(100% - 26px) 0, calc(100% - 18px) 7px, 100% 7px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 20px 100%, 13px calc(100% - 6px), 0 calc(100% - 6px));
  background:
    linear-gradient(135deg, rgba(0, 180, 187, .09), transparent 35%),
    linear-gradient(180deg, rgba(7, 43, 57, .92), rgba(3, 22, 31, .94));
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 4px rgba(0, 166, 174, .045), 0 0 16px rgba(0, 209, 214, .1), 0 13px 35px rgba(0, 0, 0, .28);
}

.hud::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 38%;
  width: 24%;
  height: 2px;
  background: var(--space-glow);
  box-shadow: 0 0 10px var(--space-glow);
  pointer-events: none;
}

.top-hud {
  border-bottom-color: rgba(75, 240, 244, .5);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(4, 30, 41, .96), rgba(8, 54, 68, .94) 48%, rgba(4, 27, 37, .96));
}

.top-hud > div:not(.enemy-block) { border-right: 1px solid rgba(0, 183, 189, .24); }
.top-hud strong { color: #f1ffff; text-shadow: 0 0 8px rgba(84, 235, 241, .35); }
.label { color: #36bdca; }

.phase-rail { gap: 3px; }
.phase-rail span {
  position: relative;
  border: 1px solid #125762;
  border-radius: 1px;
  clip-path: polygon(0 5px, 5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
  color: #507984;
  background: #071d27;
}
.phase-rail span.active { color: #001b1f; border-color: #75faff; background: linear-gradient(#7dfbff, #12aeb9); box-shadow: 0 0 15px rgba(67, 244, 248, .42); }
.phase-rail span.complete { color: #9dffd0; border-color: #248e70; background: #0a3b34; }

.ship-status h2, .resource-status h2, .event-log h2, .job-panel h2, .build-panel h2, .upgrade-panel h2 {
  color: #e6ffff;
  text-shadow: 0 0 7px rgba(66, 224, 231, .3);
}

.ship-status h2::before, .resource-status h2::before, .event-log h2::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  background: var(--space-blue);
  box-shadow: 0 0 7px rgba(49, 200, 242, .6);
}

.stat { border-bottom: 1px solid rgba(25, 133, 145, .17); padding-bottom: 7px; }
.stat span { color: #74b8c2; font-weight: 900; }
.stat b { color: #efffff; }

.bar, .build-progress {
  height: 12px;
  border: 1px solid #08727d;
  border-radius: 1px;
  padding: 2px;
  background: repeating-linear-gradient(90deg, #06161e 0 8px, #0b2731 8px 10px);
  box-shadow: inset 0 0 7px #000, 0 0 7px rgba(25, 216, 222, .1);
}

.bar i, .build-progress i {
  background: repeating-linear-gradient(90deg, #18d4c0 0 8px, #087d7a 8px 10px);
  box-shadow: 0 0 8px rgba(57, 255, 234, .38);
}
.bar.resource i { background: repeating-linear-gradient(90deg, #d9ea35 0 8px, #6bbb31 8px 10px); }
.bar.enemy i { background: repeating-linear-gradient(90deg, #ffad35 0 8px, #e44035 8px 10px); }
.bar.enemy-shield i { background: repeating-linear-gradient(90deg, #4ae9ff 0 8px, #426deb 8px 10px); }

.rare-row { color: #57a9b4; }
.rare-row b { color: var(--space-gold); }
.battle-clock { border-top-color: #08717a; color: #ff714d; }
.gather-clock { border-top-color:#08717a;color:#57dbe5; }
.bar.mining i { background:repeating-linear-gradient(90deg,#f0d52e 0 8px,#31b7a6 8px 10px); }

.crew-notice, .red-alert {
  border: 1px solid var(--space-line);
  border-radius: 2px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
  background: linear-gradient(180deg, rgba(9, 56, 69, .95), rgba(4, 27, 36, .96));
  color: #bafcff;
  box-shadow: 0 0 18px rgba(40, 232, 237, .18);
}

.red-alert { border-color: #ff543e; color: #fff; background: linear-gradient(180deg, rgba(190, 38, 36, .96), rgba(91, 10, 22, .96)); }

.event-log li {
  border-left: 2px solid #14737f;
  border-radius: 0;
  background: rgba(6, 34, 45, .9);
  color: #79abb5;
}
.event-log li.danger { border-color: #ff5b45; color: #ff9a87; background: rgba(73, 16, 22, .88); }
.event-log li.success { border-color: #50e49b; color: #96f5c2; background: rgba(9, 55, 40, .88); }
.event-log li.phase { border-color: #47e8f2; color: #9afaff; background: rgba(8, 57, 67, .88); }

.job-panel { border-width: 1px 1px 2px; }
.job-panel p, .build-heading p, .upgrade-grid button small { color: #6ca5af; }
#job-button { min-height: 54px; }

.sequence span {
  border-color: #0c7883;
  border-radius: 1px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  color: #70a3ad;
  background: #072732;
}
.sequence span.complete { color: #baffd5; border-color: #3dca88; background: #0a4b3a; }
.sequence span.current { color: #efffff; border-color: var(--space-glow); background: #0b5360; }
.build-keys button { border-color: #0c8c97; background: linear-gradient(180deg, #116173, #082d3c); }

.upgrade-grid button {
  border-color: #0a7883;
  border-radius: 1px;
  background: linear-gradient(145deg, rgba(13, 65, 80, .96), rgba(5, 31, 42, .97));
}
.upgrade-grid button span { color: #efffff; }
.upgrade-grid button b { color: var(--space-blue); }

.result { background: rgba(1, 9, 14, .82); }
.result-card h2 { color: #f4ffff; text-shadow: 0 0 16px rgba(61, 241, 245, .38); }

@media (max-width: 700px) {
  .menu-card, .lobby-card { padding: 26px 22px; }
  .top-hud { border-radius: 1px; }
  .phase-rail span { border-radius: 1px; }
  .ship-status, .resource-status, .job-panel, .build-panel, .upgrade-panel { border-radius: 1px; }
  body::after { opacity: .07; }
}