/* ==========================================================================
   KRONOS MINING CO. — design tokens
   Industrial mainframe / CRT phosphor terminal, not a generic sci-fi HUD.
   ========================================================================== */
:root {
  --void:        #0a0c10;
  --void-2:      #0d1016;
  --panel:       #12161d;
  --panel-2:     #171c25;
  --line:        #2a3140;
  --line-soft:   #1c222c;

  --amber:       #ffb000;
  --amber-dim:   #8a6000;
  --amber-glow:  rgba(255, 176, 0, 0.35);

  --cyan:        #4fd8c4;
  --cyan-dim:    #2a6e63;
  --cyan-glow:   rgba(79, 216, 196, 0.30);

  --alert:       #ff5a4d;
  --alert-dim:   #6e2b25;

  /* Docking Control minigame only — deliberately more saturated/neon than
     the rest of the UI's muted phosphor palette, since these are meant to
     read as bright arcade "lights", not terminal readouts. --dock-hit is a
     distinct flash color, kept apart from every ship color on purpose (see
     the note on .dock-cell.dock-hit) so a correct tap always visibly
     changes, even for a ship that was already dock-green. */
  --dock-amber:       #ffcc00;
  --dock-amber-glow:  rgba(255, 204, 0, 0.55);
  --dock-cyan:        #00e5ff;
  --dock-cyan-glow:   rgba(0, 229, 255, 0.55);
  --dock-green:       #39ff6a;
  --dock-green-glow:  rgba(57, 255, 106, 0.55);
  --dock-purple:      #c93cff;
  --dock-purple-glow: rgba(201, 60, 255, 0.55);
  --dock-hit:         #ffffff;
  --dock-hit-glow:    rgba(255, 255, 255, 0.7);

  --ink:         #e8e6dd;
  --ink-dim:     #8b93a1;
  --ink-faint:   #545c6b;

  --font-display: 'IBM Plex Mono', ui-monospace, monospace;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;

  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  min-height: 100%;
}

body {
  overflow-x: hidden;
}

button, a {
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

#app {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

/* ---- background layers ---- */
#starfield {
  position: fixed;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 20% 0%, #0f1420 0%, #0a0c10 55%, #060709 100%);
}

/* Sits above the topbar/extraction-bay/panels so the comet is always
   visible (and therefore always clickable, including on phones where the
   HUD can cover the whole viewport) but still stays under the scanline/
   vignette overlays so it reads as part of the same CRT display. Never
   intercepts clicks itself — see the comet click handling in game.js. */
#cometLayer {
  position: fixed;
  inset: 0;
  z-index: 47;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 49;
  pointer-events: none;
  box-shadow: inset 0 0 18vw rgba(0, 0, 0, 0.65);
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: linear-gradient(to bottom, rgba(13, 16, 22, 0.97), rgba(13, 16, 22, 0.88));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.brand-mark {
  font-size: 22px;
  color: var(--amber);
  text-shadow: 0 0 10px var(--amber-glow);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.brand-sub {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

.ledger {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 16px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.ledger-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.ledger-value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 22px;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber-glow);
}

.ledger-sub {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--cyan);
}

.buff-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: rgba(255, 176, 0, 0.06);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 6px 14px;
  animation: buffPulse 1.6s ease-in-out infinite;
}
.buff-readout[hidden] { display: none; }
.buff-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--amber);
}
.buff-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--amber);
  text-shadow: 0 0 8px var(--amber-glow);
}
@keyframes buffPulse {
  0%, 100% { box-shadow: 0 0 8px var(--amber-glow); }
  50%      { box-shadow: 0 0 20px var(--amber-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .buff-readout { animation: none; }
}

.stardust-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--cyan-dim);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.stardust-readout:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}
.stardust-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.stardust-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--cyan);
}

.icon-btn {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: 34px;
  height: 34px;
  font-size: 15px;
  cursor: pointer;
  color: var(--ink-dim);
}
.icon-btn:hover { color: var(--amber); border-color: var(--amber-dim); }

/* ==========================================================================
   Layout
   ========================================================================== */
.layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas:
    "manifest upgrades"
    "warp warp"
    "foot foot";
  gap: 16px;
  padding: 20px;
  padding-bottom: 280px;
  max-width: 1280px;
  margin: 0 auto;
}

.manifest        { grid-area: manifest; }
.upgrades        { grid-area: upgrades; }
.warp-drive      { grid-area: warp; }
.foot-note       { grid-area: foot; }

@media (max-width: 880px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "manifest"
      "upgrades"
      "warp"
      "foot";
  }
}

/* ==========================================================================
   Extraction bay / core click target
   A persistent floating widget, fixed to the viewport, so the mining site
   stays reachable no matter where the director has scrolled to.
   ========================================================================== */
.extraction-bay {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 45;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  width: max-content;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

@media (max-width: 620px) {
  .extraction-bay {
    right: 12px;
    bottom: 12px;
    padding: 10px;
    transform-origin: bottom right;
    transform: scale(0.86);
  }
}

.bay-label {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.dim { color: var(--ink-faint); }

.key-hint {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  opacity: 0.75;
}

.core {
  position: relative;
  width: 156px;
  height: 156px;
  margin: 10px 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background:
    radial-gradient(circle at 66% 60%, rgba(0,0,0,0.5) 0 6%, transparent 7%),
    radial-gradient(circle at 24% 70%, rgba(0,0,0,0.4) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 22%, rgba(0,0,0,0.35) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 32%, #5a4322 0%, #2a1f10 45%, #120d07 100%);
  box-shadow:
    0 0 0 1px var(--amber-dim),
    0 0 40px rgba(255, 176, 0, 0.18),
    inset 0 0 30px rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.08s ease, box-shadow 0.3s ease, background 0.4s ease, width 0.5s ease, height 0.5s ease;
}
.core:hover {
  box-shadow:
    0 0 0 1px var(--amber),
    0 0 55px rgba(255, 176, 0, 0.3),
    inset 0 0 30px rgba(0,0,0,0.7);
}
.core:active, .core.core-key-active { transform: scale(0.96); }

/* ---- celestial body stages: the mining target grows and changes as
       milestone upgrades are bought, from rubble asteroid to a dying star -- */
.core[data-stage="1"] {
  width: 168px;
  height: 168px;
  background:
    radial-gradient(circle at 30% 70%, rgba(255,255,255,0.25) 0 10%, transparent 16%),
    radial-gradient(circle at 36% 30%, #eaf8ff 0%, #a8d8ec 30%, #4f7f96 60%, #142a34 100%);
  box-shadow: 0 0 0 1px var(--cyan-dim), 0 0 40px rgba(120, 210, 230, 0.25), inset 0 0 30px rgba(0,0,0,0.6);
}
.core[data-stage="2"] {
  width: 182px;
  height: 182px;
  background:
    radial-gradient(circle at 63% 58%, rgba(0,0,0,0.5) 0 7%, transparent 8%),
    radial-gradient(circle at 27% 68%, rgba(0,0,0,0.4) 0 5%, transparent 6%),
    radial-gradient(circle at 72% 26%, rgba(0,0,0,0.35) 0 4%, transparent 5%),
    radial-gradient(circle at 40% 66%, rgba(0,0,0,0.3) 0 3%, transparent 4%),
    radial-gradient(circle at 38% 32%, #dcdcdc 0%, #9a9a9a 45%, #3a3a3a 100%);
}
.core[data-stage="3"] {
  width: 198px;
  height: 198px;
  background: radial-gradient(circle at 35% 30%, #ffe39c 0%, #ff7a3d 30%, #a32b12 60%, #2a0e08 100%);
  animation: lavaPulse 3s ease-in-out infinite;
}
.core[data-stage="4"] {
  width: 214px;
  height: 214px;
  background: repeating-linear-gradient(
    to bottom,
    #e8c27a 0 8%, #c9974f 8% 15%, #b97b3a 15% 21%,
    #e8c27a 21% 30%, #d9a35c 30% 39%, #c9974f 39% 47%,
    #e8c27a 47% 55%, #b97b3a 55% 63%, #d9a35c 63% 72%, #c9974f 72% 100%
  );
}
.core[data-stage="4"] .core-planet-ring { opacity: 1; }
.core[data-stage="5"] {
  width: 232px;
  height: 232px;
  background: radial-gradient(circle at 50% 50%, #fff6d8 0%, #ffd166 30%, #ff9f1c 58%, #7a2e00 100%);
  animation: starPulse 1.6s ease-in-out infinite;
}
.core[data-stage="5"] .core-corona { opacity: 1; animation: coronaPulse 1.6s ease-in-out infinite; }

@keyframes lavaPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--amber-dim), 0 0 45px rgba(255,90,30,0.3), inset 0 0 30px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 0 1px var(--amber-dim), 0 0 65px rgba(255,120,40,0.5), inset 0 0 30px rgba(0,0,0,0.6); }
}
@keyframes starPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--amber), 0 0 55px rgba(255,209,102,0.45); }
  50%      { box-shadow: 0 0 0 1px var(--amber), 0 0 100px rgba(255,209,102,0.7); }
}
@keyframes coronaPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.core-planet-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 142%;
  height: 48%;
  transform: translate(-50%, -50%) rotate(-16deg);
  border-radius: 50%;
  border: 7px solid transparent;
  border-top-color: rgba(232, 194, 122, 0.55);
  border-bottom-color: rgba(180, 140, 80, 0.45);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.core-corona {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.4), transparent 70%);
  filter: blur(3px);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.core.stage-transition {
  animation: stageBurst 1.2s ease-out;
}
@keyframes stageBurst {
  0%   { filter: brightness(1) saturate(1); }
  25%  { filter: brightness(2) saturate(1.6); }
  100% { filter: brightness(1) saturate(1); }
}

.core-value {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--amber);
  text-shadow: 0 0 12px var(--amber-glow);
  pointer-events: none;
}

.floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.floater {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--amber);
  text-shadow: 0 0 6px var(--amber-glow);
  animation: floatUp 0.9s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1.05); }
}

.chunk {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  will-change: transform, opacity;
  animation: chunkFly 0.75s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes chunkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.35); }
}

.bay-stats {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat span {
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
.stat strong {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}

/* ==========================================================================
   Panels shared
   ========================================================================== */
.manifest, .upgrades {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.upgrade-count {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--cyan);
}

.buy-toggle {
  display: flex;
  gap: 4px;
}
.buy-mode {
  background: var(--void-2);
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
}
.buy-mode.active {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255, 176, 0, 0.08);
}

/* ---- manifest rows ---- */
.manifest-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unit-row {
  display: grid;
  grid-template-columns: 56px 1fr auto auto 96px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.unit-row.locked { opacity: 0.45; }
.unit-row.affordable { border-color: var(--amber-dim); }

.unit-tag {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink-faint);
  border-right: 1px solid var(--line-soft);
  padding-right: 10px;
}

.unit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.unit-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.unit-desc {
  font-size: 11px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-owned {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--cyan);
  text-align: right;
  min-width: 44px;
}

.unit-rate {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--ink-faint);
  text-align: right;
  min-width: 90px;
}

.buy-btn {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 9px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--amber-dim);
  background: linear-gradient(to bottom, #201804, #150f02);
  color: var(--amber);
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
}
.buy-btn:disabled {
  border-color: var(--line);
  color: var(--ink-faint);
  background: var(--void-2);
  cursor: not-allowed;
}
.buy-btn:not(:disabled):hover {
  box-shadow: 0 0 10px var(--amber-glow);
}
.buy-btn .cost {
  display: block;
  font-size: 10px;
  opacity: 0.85;
}

@media (max-width: 620px) {
  .unit-row { grid-template-columns: 1fr auto; grid-template-areas: "info owned" "info buy"; row-gap: 8px; }
  .unit-tag { display: none; }
  .unit-info { grid-area: info; }
  .unit-owned { grid-area: owned; }
  .unit-rate { display: none; }
  .buy-btn { grid-area: buy; width: 100%; }
}

/* ---- upgrades ---- */
.upgrade-rack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.empty-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--ink-faint);
  font-style: italic;
  margin: 6px 0;
}

.upgrade-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--amber-dim);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
}
.upgrade-card.affordable {
  border-left-color: var(--amber);
  box-shadow: 0 0 10px rgba(255,176,0,0.08);
}
.upgrade-card.purchased {
  border-left-color: var(--cyan);
  opacity: 0.55;
  cursor: default;
}
.upgrade-card:disabled { cursor: not-allowed; }

.upgrade-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.upgrade-desc {
  font-size: 11px;
  color: var(--ink-faint);
}
.upgrade-cost {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--amber);
  margin-top: auto;
}
.upgrade-card.purchased .upgrade-cost { color: var(--cyan); }

/* ==========================================================================
   Warp drive / prestige
   ========================================================================== */
.warp-drive {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.warp-stripe {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--amber-dim) 0 10px,
    transparent 10px 20px
  );
  opacity: 0.6;
}
.warp-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.warp-text { display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.warp-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.warp-desc {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.5;
}
.warp-desc strong { color: var(--cyan); }

.stardust-progress {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-width: 420px;
}
.stardust-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--void-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.stardust-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--cyan-dim), var(--cyan));
  box-shadow: 0 0 8px var(--cyan-glow);
  transition: width 0.4s ease;
}
.stardust-progress-label {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.stardust-progress-label strong { color: var(--cyan); }

.warp-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--cyan-dim);
  background: linear-gradient(to bottom, #12211f, #0b1614);
  color: var(--cyan);
  cursor: pointer;
  white-space: nowrap;
}
.warp-btn:disabled {
  border-color: var(--line);
  color: var(--ink-faint);
  background: var(--void-2);
  cursor: not-allowed;
}
.warp-btn:not(:disabled):hover {
  box-shadow: 0 0 16px var(--cyan-glow);
}

.foot-note {
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-faint);
  padding: 6px 0 18px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.foot-note p { margin: 4px 0; }
.foot-note .credit { opacity: 0.8; }
.foot-note .credit a {
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-faint);
}
.foot-note .credit a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber-dim);
}
.foot-note .version { opacity: 0.55; font-size: 9.5px; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--amber-dim);
  border-radius: var(--radius);
  padding: 24px 26px;
  max-width: 420px;
  width: 90vw;
  box-shadow: 0 0 60px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.4);
}
.modal.wide { max-width: 560px; }
.modal::backdrop { background: rgba(4, 5, 8, 0.75); backdrop-filter: blur(2px); }

/* ---- apotheosis: a once-ever milestone, so it gets its own treatment
       rather than the standard amber terminal-panel look ---- */
.modal.apotheosis {
  border-color: var(--cyan);
  background: radial-gradient(circle at 50% 30%, #16222a 0%, var(--panel) 70%);
  box-shadow: 0 0 90px rgba(79, 216, 196, 0.35), inset 0 0 40px rgba(0,0,0,0.5);
  text-align: center;
  animation: apotheosisGlow 2.4s ease-in-out infinite;
}
.modal.apotheosis .modal-title {
  color: var(--cyan);
  text-shadow: 0 0 16px var(--cyan-glow);
  font-size: 20px;
  letter-spacing: 0.2em;
}
.apotheosis-body {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}
.apotheosis-figure {
  color: var(--cyan);
  text-shadow: 0 0 14px var(--cyan-glow);
  font-size: 20px;
}
.modal.apotheosis .modal-btn {
  border-color: var(--cyan-dim);
  color: var(--cyan);
  background: rgba(79, 216, 196, 0.08);
  margin: 6px auto 0;
}
.modal.apotheosis .modal-btn:hover { box-shadow: 0 0 12px var(--cyan-glow); }

@keyframes apotheosisGlow {
  0%, 100% { box-shadow: 0 0 90px rgba(79, 216, 196, 0.3), inset 0 0 40px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 130px rgba(79, 216, 196, 0.5), inset 0 0 40px rgba(0,0,0,0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .modal.apotheosis { animation: none; }
}

.modal-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--amber);
  margin: 0 0 14px;
  text-shadow: 0 0 8px var(--amber-glow);
}
.modal-body {
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.6;
  margin: 0 0 10px;
}
.modal-body strong { color: var(--cyan); }
.modal-figure {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--amber);
  margin: 10px 0 20px;
  text-shadow: 0 0 10px var(--amber-glow);
}
.modal-btn {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--amber-dim);
  background: rgba(255,176,0,0.08);
  color: var(--amber);
  cursor: pointer;
  margin-top: 6px;
}
.modal-btn:hover { box-shadow: 0 0 10px var(--amber-glow); }

.perk-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.perk-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.perk-info { display: flex; flex-direction: column; gap: 2px; }
.perk-name { font-size: 13px; font-weight: 600; }
.perk-desc { font-size: 11px; color: var(--ink-faint); }
.perk-level { font-size: 10px; color: var(--cyan); font-family: var(--font-display); }
.perk-buy {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--cyan-dim);
  background: rgba(79,216,196,0.08);
  color: var(--cyan);
  cursor: pointer;
  white-space: nowrap;
}
.perk-buy:disabled { border-color: var(--line); color: var(--ink-faint); background: var(--void-2); cursor: not-allowed; }

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.settings-row.danger { color: var(--alert); }
.settings-row-support { margin-top: 10px; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.settings-note { font-size: 11px; color: var(--cyan); min-height: 16px; }

.toggle-btn {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--void-2);
  color: var(--ink-dim);
  cursor: pointer;
  text-decoration: none;
}
.toggle-btn:hover { color: var(--amber); border-color: var(--amber-dim); }
.toggle-btn.danger { color: var(--alert); border-color: var(--alert-dim); }
.toggle-btn.danger:hover { box-shadow: 0 0 10px rgba(255,90,77,0.3); }

/* ==========================================================================
   Docking Control minigame
   A dedicated "old terminal" treatment rather than the standard amber
   terminal-panel look shared by the other modals: flat-black CRT screen,
   its own scanline texture (the global .scanlines overlay never paints over
   an open <dialog> — dialogs render in the browser's top layer, above it),
   and a blinking cursor. Kept compact and roughly square on purpose — the
   9-cell grid is inherently square, so the surrounding chrome (caption,
   HUD, status line, actions) is trimmed tight instead of stacking into a
   tall column, and a fixed-height status line (see .dock-status-line) means
   the layout never changes height between idle/in-progress/result, which is
   what caused a scrollbar to pop in/out before. Targets portrait play
   (including mobile) rather than chasing every possible landscape/short
   viewport — width is the binding constraint there, same as any other
   modal, so it doesn't need special-casing.
   ========================================================================== */
.modal.dock-modal {
  max-width: 460px;
  max-height: 90vh;
  overflow: hidden;
  background: var(--void);
  border: 1px solid var(--amber-dim);
  box-shadow: 0 0 0 1px var(--void-2), inset 0 0 40px rgba(0, 0, 0, 0.85), 0 0 50px rgba(255, 176, 0, 0.12);
  position: relative;
}
.modal.dock-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.modal.dock-modal form { position: relative; z-index: 2; }

.dock-title { margin-bottom: 6px; }
.term-cursor {
  display: inline-block;
  color: var(--amber);
  animation: termBlink 1s steps(1) infinite;
}
@keyframes termBlink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.dock-caption {
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--cyan);
  margin: 0 0 10px;
}
.dock-caption-pirate { color: var(--dock-purple); font-weight: 700; }

.dock-hud {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.dock-stat { display: flex; flex-direction: column; gap: 2px; text-align: center; flex: 1; }
.dock-stat span { font-size: 9px; letter-spacing: 0.1em; color: var(--ink-faint); }
.dock-stat strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--ink);
}

.dock-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 10px;
}
.dock-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  background: var(--void-2);
  border-radius: var(--radius);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.dock-cell.dock-amber  { background: var(--dock-amber);  border-color: var(--dock-amber);  box-shadow: 0 0 20px var(--dock-amber-glow),  inset 0 0 10px rgba(255,255,255,0.25); color: #1a1300; }
.dock-cell.dock-cyan   { background: var(--dock-cyan);   border-color: var(--dock-cyan);   box-shadow: 0 0 20px var(--dock-cyan-glow),   inset 0 0 10px rgba(255,255,255,0.25); color: #00232a; }
.dock-cell.dock-green  { background: var(--dock-green);  border-color: var(--dock-green);  box-shadow: 0 0 20px var(--dock-green-glow),  inset 0 0 10px rgba(255,255,255,0.25); color: #062b0f; }
.dock-cell.dock-purple { background: var(--dock-purple); border-color: var(--dock-purple); box-shadow: 0 0 20px var(--dock-purple-glow), inset 0 0 10px rgba(255,255,255,0.25); color: #2a0a38; }
/* Deliberately its own color (bright white), never reused by a ship state —
   otherwise tapping a ship whose lit color happened to match the flash
   would show no visible change at all. */
.dock-cell.dock-hit  { background: var(--dock-hit); border-color: var(--dock-hit); box-shadow: 0 0 26px var(--dock-hit-glow); }
.dock-cell.dock-miss { background: var(--alert); border-color: var(--alert); box-shadow: 0 0 24px rgba(255, 90, 77, 0.55); }

.dock-status-line {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin: 0 0 12px;
  text-align: center;
}
.dock-status-line.dock-status-new-high {
  color: var(--cyan);
  border-color: var(--cyan-dim);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.dock-actions { display: flex; gap: 10px; }
.dock-actions .modal-btn { flex: 1; margin: 0; }

/* ==========================================================================
   Accessibility
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .floater, .chunk, .core, .core-corona { animation: none !important; }
  .scanlines { display: none; }
}