/* ---------------------------------------------------------------
   Star Prospector - game-specific styles.

   Loaded after /assets/base.css, which supplies the design tokens,
   the top bar, the buttons, the footer, the modals, the cookie
   banner and the legal-page layout shared by every Lynxy game.
   Only the field, its screens (menu, planet dock with market,
   services and shipyard, pause, lost, win)
   and the tool row live here. The field itself is always deep
   space; the screens on top of it follow the site theme.
---------------------------------------------------------------- */

:root {
  --gem: #e0a800;
  --space-edge: #cfd6ea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gem: #ffcf3a;
    --space-edge: #2a3350;
  }
}

:root[data-theme="dark"] {
  --gem: #ffcf3a;
  --space-edge: #2a3350;
}

/* --------------------------- header extras ----------------------------- */

.topbar--game .topbar__inner { max-width: 1000px; }

.stats {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  text-align: center;
  min-width: 58px;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.stat__value {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-dim);
}

.brand__mark--miner {
  background: linear-gradient(135deg, #1b2448, #4f6cf7 70%, #8b5cf6);
}

.brand__mark--miner svg { width: 20px; height: 20px; fill: #fff; }

@media (max-width: 560px) {
  .stats { gap: 6px; }
  .stat { min-width: 48px; padding: 4px 6px; }
  .stat__value { font-size: 15px; }
  .stat__label { font-size: 9px; letter-spacing: .04em; }
  .brand__name { display: none; }
}

/* -------------------------------- page --------------------------------- */

.page {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stage-wrap {
  display: flex;
  justify-content: center;
}

.stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--space-edge);
  box-shadow: var(--shadow);
  background: #070a14;
  /* Both thumbs steer on the field, so it must never scroll the page. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Replaced by game.js with the size that fits the screen. */
  width: 100%;
  height: 520px;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* --------------------------- screens on the field ---------------------- */

.cover {
  position: absolute;
  inset: 0;
  display: flex;
  padding: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  background: rgba(5, 8, 18, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade .2s ease;
  z-index: 3;
}

.cover[hidden] { display: none; }

.cover__card {
  margin: auto;
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px 18px 16px;
  text-align: center;
  animation: rise .25s cubic-bezier(.2, .8, .3, 1);
}

.cover__card[hidden] { display: none; }
.cover__card--wide { max-width: 460px; padding: 16px 14px 14px; }

.cover__logo svg { display: block; width: 190px; height: 84px; margin: -4px auto 2px; }

.cover__icon { font-size: 36px; line-height: 1; margin-bottom: 4px; }

.cover__title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cover__title--sm {
  font-size: 20px;
  background: none;
  color: var(--text);
}

.cover__text {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.cover__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cover__actions + .cover__actions { margin-top: 8px; }
.cover__actions--row { flex-direction: row; }
.cover__actions--row .btn--primary { flex: 1; }
.cover__actions--split { margin-top: 12px; }
.cover__actions--split .btn { flex: 1; }

.cover__home { flex: none; width: 48px; padding: 0; }
.cover__home img { width: 26px; height: 26px; display: block; }

.cover__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* The controls on the menu: on a touch screen, a choice between the
   steering stick and classic buttons; on a computer, the keys. */
.controls-help {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--text);
  text-align: left;
}

.controls-help[hidden] { display: none; }
.controls-help__note { margin: 8px 0 0; color: var(--text-dim); }
.controls-help__note[hidden] { display: none; }
.controls-help__note strong { color: var(--text); }

.controls-help--keys {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
}

.choice__btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  padding: 7px 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

.choice__btn.is-on { background: var(--accent); color: var(--accent-text); }

/* --------------------------------- dock -------------------------------- */

.dock__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  margin-bottom: 8px;
}

.dock__name { margin: 0; }

.dock__kind {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.3;
}

.purse {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 800;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.purse__gem { color: var(--gem); font-size: 14px; }
.purse.is-short { animation: shake .4s; border-color: var(--error); }

@keyframes shake {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.goal {
  background: linear-gradient(135deg, #0d1330, #1b1446);
  border-radius: 14px;
  padding: 10px 12px;
  color: #e8eeff;
  text-align: left;
}

.goal__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: rgba(210, 222, 255, .8);
}

.goal__top b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }

.goal__track {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  margin: 6px 0;
  overflow: hidden;
}

.goal__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #6f8bff, #9ff3ff);
}

.goal__note { margin: 0; font-size: 12px; color: rgba(210, 222, 255, .75); line-height: 1.35; }
.goal__jump { width: 100%; margin-top: 8px; white-space: normal; }

/* Three big tabs, each with an icon, a name and one line of what is
   waiting behind it (the cargo's worth, low fuel, upgrades you can
   afford). The open one is filled with the accent colour. */
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px 0 10px;
}

.tab {
  position: relative;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 4px 8px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}

.tab:active { transform: scale(.97); }

.tab__icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--accent);
  margin-bottom: 2px;
}

.tab__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab__label { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }

.tab__sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tab__sub.is-good { color: var(--ok); }
.tab__sub.is-warn { color: var(--error); }

/* a dot in the corner: something here wants attention */
.tab.has-news::after,
.tab.has-warn::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--surface-2);
}

.tab.has-warn::after { background: var(--error); }

.tab.is-on {
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}

.tab.is-on .tab__icon { background: rgba(255, 255, 255, .2); color: #fff; }
.tab.is-on .tab__sub { color: rgba(255, 255, 255, .85); }
.tab.is-on::after { box-shadow: 0 0 0 2px var(--accent); }

.tab.is-closed:not(.is-on) { opacity: .6; }
.tab.is-closed .tab__icon { color: var(--text-dim); }

.dock__body { text-align: left; }

.dock__hint {
  margin: 8px 2px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.35;
}

.dock__empty {
  margin: 12px 4px;
  font-size: 13.5px;
  color: var(--text-dim);
  text-align: center;
}

.sell-all { width: 100%; }
.sell-all:disabled { opacity: .5; cursor: default; }

.market { display: grid; gap: 5px; }

.mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "best sell";
  align-items: center;
  gap: 2px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 7px 8px 7px 10px;
}

.mrow.has { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mrow__name { grid-area: name; font-weight: 700; font-size: 14px; display: flex; align-items: center; }
.mrow__name em { font-style: normal; color: var(--accent); margin-left: 4px; }
.mrow__price { grid-area: price; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.mrow__best { grid-area: best; font-size: 11.5px; color: var(--text-dim); }
.up-tag { color: var(--ok); font-size: 11px; }
.down-tag { color: var(--error); font-size: 11px; }

.mrow__sell {
  grid-area: sell;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  white-space: nowrap;
}

.mrow__sell:disabled { background: transparent; color: var(--text-dim); cursor: default; padding: 6px 4px; }

.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 9px 9px 12px;
  margin-bottom: 6px;
}

.srow__body { display: flex; flex-direction: column; font-size: 12.5px; color: var(--text-dim); line-height: 1.3; }
.srow__body b { color: var(--text); font-size: 14px; }
.srow__btns { display: flex; flex-direction: column; gap: 4px; }

.shop {
  display: grid;
  gap: 6px;
  text-align: left;
}

.up {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
}

.up__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #172045, #2c2466);
  color: #9ff3ff;
}

.up__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.up__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.up__name {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.up__pips { display: inline-flex; gap: 2px; }

.up__pips i {
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--border-strong);
  opacity: .5;
}

.up__pips i.on { background: var(--accent); opacity: 1; }

.up__stat {
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.up__stat b { color: var(--ok); font-weight: 700; }

.up__desc {
  font-size: 11.5px;
  color: var(--text-dim);
  opacity: .85;
}

.up__buy {
  font: inherit;
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  min-width: 76px;
  background: var(--accent);
  color: var(--accent-text);
  cursor: pointer;
  white-space: nowrap;
}

.up__buy span { color: #ffe27a; }
:root[data-theme="dark"] .up__buy span { color: #5a4200; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .up__buy span { color: #5a4200; }
}

.up__buy:active { transform: scale(.96); }

.up__buy.is-short {
  background: var(--surface);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.up__buy.is-short span { color: var(--text-dim); }
.up__buy:disabled { background: transparent; color: var(--ok); cursor: default; border: 1px solid var(--border); }
.srow .up__buy:disabled { color: var(--text-dim); }

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}

/* ------------------------------- tool row ------------------------------ */

.tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}

.tool {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  min-width: 104px;
  white-space: nowrap;
}

.tool:active { transform: scale(.97); }
.tool[disabled] { opacity: .45; cursor: default; }
.tool .icon { width: 18px; height: 18px; }

.icon--play { display: none; }
.is-paused .icon--pause { display: none; }
.is-paused .icon--play { display: block; }

.icon__mute { display: none; }
.is-off .icon__waves { display: none; }
.is-off .icon__mute { display: block; }

.keys-hint {
  display: none;
  margin: 0;
  gap: 4px 12px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--text-dim);
}

kbd {
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  min-width: 22px;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--text);
  display: inline-block;
  text-align: center;
}

kbd + kbd { margin-left: 2px; }

@media (hover: hover) and (pointer: fine) {
  .keys-hint { display: flex; }
}

/* ------------------------ about / SEO copy ----------------------------- */

.about {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 14px;
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.about h1 {
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 6px;
}

.about h2 {
  font-size: 15px;
  color: var(--text);
  margin: 18px 0 4px;
}

.about p { margin: 0 0 8px; }
.about__small { font-size: 12px; opacity: .8; }
.up-list { margin: 6px 0 10px; padding-left: 20px; }
.up-list li { margin: 3px 0; }

.noscript {
  text-align: center;
  padding: 12px 16px;
  margin: 0;
  color: var(--error);
}

/* --------------------------- how-to-play page -------------------------- */

.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}

.doc th, .doc td {
  border: 1px solid var(--border);
  padding: 7px 9px;
  text-align: left;
}

.doc th { background: var(--surface-2); color: var(--text); font-weight: 600; }
.doc ol { padding-left: 20px; }
.doc .dot { margin-right: 8px; }

.system-names {
  columns: 2;
  column-gap: 24px;
}

.system-names li { break-inside: avoid; margin: 2px 0; }

/* ------------------------- pictures for the site ----------------------- */

/* ?shot=… renders the field alone, filling the window. */
.is-shot body > *:not(main) { display: none !important; }
.is-shot .page { padding: 0; max-width: none; }
.is-shot .tools, .is-shot .about, .is-shot .cover { display: none !important; }
.is-shot .stage { position: fixed; inset: 0; width: 100vw !important; height: 100vh !important; border: 0; border-radius: 0; }