/* ===== Sloopy Space Trader -- retro space-terminal aesthetic ===== */
:root {
  --grn: #41ff7d;
  --grn-dim: #1d9c48;
  --grn-dark: #07210f;
  --amb: #ffb000;
  --amb-dim: #9c6a00;
  --red: #ff3b30;
  --cyan: #59e3ff;
  --panel: rgba(2, 14, 7, 0.92);
  --panel-edge: rgba(65, 255, 125, 0.55);
  --font-term: 'VT323', 'Courier New', monospace;
  --font-head: 'Orbitron', 'VT323', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #000; touch-action: none;
  font-family: var(--font-term);
  color: var(--grn);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

canvas { display: block; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; }
#hud-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* CRT scanline + vignette overlay */
#crt-overlay {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode: multiply;
}
#crt-overlay::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,10,0.5) 100%);
}

/* ===== fixed corner buttons ===== */
#sg-fs-btn, #mute-btn {
  position: fixed; top: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 6px;
  background: rgba(0,0,0,.45); color: #fff; cursor: pointer; z-index: 9999;
}
#sg-fs-btn { right: 8px; }
#mute-btn { right: 42px; color: var(--grn); }
#sg-fs-btn:hover, #mute-btn:hover { background: rgba(0,0,0,.7); }

/* ===== screens ===== */
#screen-root { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#screen-root > .screen { pointer-events: auto; }

.screen {
  position: absolute; inset: 0;
  display: flex;
  background: rgba(0, 4, 2, 0.62);
  overflow-y: auto;
}
.screen > .panel { margin: auto; }
.screen.clear { background: rgba(0, 4, 2, 0.28); }

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  box-shadow: 0 0 24px rgba(65,255,125,.18), inset 0 0 60px rgba(65,255,125,.05);
  border-radius: 4px;
  padding: 14px 18px;
  max-width: min(94vw, 860px);
  max-height: 94vh;
  overflow-y: auto;
  text-align: center;
}
.panel.wide { width: min(94vw, 860px); }
.panel.glass { background: rgba(2, 14, 7, 0.66); }

h1.game-title {
  font-family: var(--font-head);
  font-size: clamp(22px, 5vw, 46px);
  font-weight: 900; letter-spacing: 0.12em;
  color: var(--grn);
  text-shadow: 0 0 18px rgba(65,255,125,.8), 0 0 46px rgba(65,255,125,.35);
  margin: 4px 0 2px;
}
.subtitle {
  color: var(--amb); font-size: clamp(15px, 2.4vw, 22px);
  letter-spacing: .28em; margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(255,176,0,.5);
}
.tagline { color: var(--grn-dim); font-size: 17px; margin-bottom: 8px; }

.menu-list { display: flex; flex-direction: column; gap: 6px; margin: 10px auto 6px; max-width: 420px; }
.menu-item {
  font-family: var(--font-term); font-size: clamp(17px, 2.4vw, 23px);
  color: var(--grn); background: rgba(10, 40, 20, 0.35);
  border: 1px solid rgba(65,255,125,.35); border-radius: 3px;
  padding: 5px 14px; cursor: pointer; letter-spacing: .12em;
  transition: background .12s, color .12s, transform .08s;
}
.menu-item:hover, .menu-item.selected {
  background: var(--grn); color: #021007;
  text-shadow: none; transform: scale(1.02);
}
.menu-item:disabled, .menu-item.disabled {
  color: rgba(65,255,125,.3); border-color: rgba(65,255,125,.15);
  background: transparent; cursor: default; transform: none;
}
.menu-item .key-hint { color: var(--amb); margin-right: 10px; }
.menu-item:hover .key-hint, .menu-item.selected .key-hint { color: #5c3d00; }

.stats-line { color: var(--grn-dim); font-size: 15px; margin-top: 8px; line-height: 1.45; }
.stats-line b { color: var(--amb); font-weight: normal; }

h2.screen-title {
  font-family: var(--font-head); font-size: clamp(18px, 3vw, 26px);
  letter-spacing: .18em; color: var(--amb);
  text-shadow: 0 0 14px rgba(255,176,0,.55);
  margin-bottom: 4px;
}
.station-sub { color: var(--grn-dim); font-size: 18px; margin-bottom: 10px; }
.credits-line { color: var(--cyan); font-size: 20px; margin: 6px 0 2px; }

/* market table */
.mkt-wrap { overflow-x: auto; margin: 10px 0; }
table.mkt { border-collapse: collapse; width: 100%; font-size: clamp(14px, 1.9vw, 19px); }
table.mkt th {
  color: var(--amb); font-weight: normal; letter-spacing: .1em;
  border-bottom: 1px solid var(--amb-dim); padding: 3px 8px; white-space: nowrap;
}
table.mkt td { padding: 2px 6px; border-bottom: 1px solid rgba(65,255,125,.12); white-space: nowrap; }
table.mkt tr.mrow { cursor: pointer; }
table.mkt tr.mrow:hover td, table.mkt tr.mrow.selected td { background: rgba(65,255,125,.14); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.illegal { color: var(--red); }
.mbtn {
  font-family: var(--font-term); font-size: 15px;
  background: rgba(10,40,20,.5); color: var(--grn);
  border: 1px solid rgba(65,255,125,.4); border-radius: 3px;
  padding: 1px 7px; margin: 0 2px; cursor: pointer;
}
.mbtn:hover { background: var(--grn); color: #021007; }
.mbtn:disabled { opacity: .25; cursor: default; background: transparent; color: var(--grn); }
.hold-line { color: var(--cyan); font-size: 18px; margin: 8px 0 4px; }
.note-line { color: var(--grn-dim); font-size: 15px; margin-top: 6px; line-height: 1.4; }

/* chart */
#chart-canvas {
  display: block; margin: 8px auto;
  background: #010a05; border: 1px solid var(--panel-edge);
  max-width: 100%;
}
.chart-info { font-size: 19px; line-height: 1.55; color: var(--grn); min-height: 90px; }
.chart-info b { color: var(--amb); font-weight: normal; }

/* status / help */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; text-align: left; font-size: clamp(16px, 2.2vw, 21px); margin: 10px auto; max-width: 560px; }
.kv .k { color: var(--amb); }
.kv .v { color: var(--grn); }
.help-block { text-align: left; max-width: 640px; margin: 0 auto; font-size: clamp(16px, 2.2vw, 21px); line-height: 1.55; }
.help-block h3 { color: var(--amb); font-weight: normal; letter-spacing: .15em; margin: 12px 0 2px; }
.help-block .kbd {
  display: inline-block; min-width: 86px; color: var(--cyan);
}

.warn { color: var(--red); }
.good { color: var(--grn); }
.amb { color: var(--amb); }

.flash-title { animation: titleflicker 3.4s infinite; }
@keyframes titleflicker {
  0%, 100% { opacity: 1; } 92% { opacity: 1; }
  93% { opacity: .6; } 94% { opacity: 1; } 96% { opacity: .75; } 97% { opacity: 1; }
}

/* ===== touch controls ===== */
#touch-ui { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#touch-ui.hidden { display: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 62%; pointer-events: auto; }
#stick-base {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  border: 2px solid rgba(65,255,125,.35); background: rgba(65,255,125,.06);
  display: none; transform: translate(-50%, -50%);
}
#stick-nub {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(65,255,125,.35); border: 2px solid rgba(65,255,125,.7);
  transform: translate(-50%, -50%);
}
#touch-buttons {
  position: absolute; right: 8px; bottom: 120px; display: flex; flex-direction: column;
  gap: 10px; align-items: flex-end; pointer-events: auto;
}
.tbtn {
  width: 62px; height: 62px; border-radius: 50%;
  font-family: var(--font-term); font-size: 19px;
  background: rgba(65,255,125,.12); color: var(--grn);
  border: 2px solid rgba(65,255,125,.5); cursor: pointer;
}
.tbtn:active { background: rgba(65,255,125,.45); color: #021007; }
#tb-fire { width: 76px; height: 76px; border-color: rgba(255,59,48,.65); color: var(--red); background: rgba(255,59,48,.12); }
#tb-fire:active { background: rgba(255,59,48,.5); color: #fff; }
#tb-dock.owned { border-color: var(--amb); color: var(--amb); }
#throttle-wrap {
  position: absolute; right: 84px; bottom: 0px; width: 34px; height: 220px;
  border: 2px solid rgba(89,227,255,.45); border-radius: 6px; background: rgba(89,227,255,.06);
  pointer-events: auto; overflow: hidden;
}
#throttle-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0%; background: rgba(89,227,255,.35); }
#throttle-grip { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; color: var(--cyan); font-size: 15px; padding: 2px 0; }

.hidden { display: none !important; }

/* scrollbar styling for panels */
.panel::-webkit-scrollbar, .screen::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb, .screen::-webkit-scrollbar-thumb { background: var(--grn-dim); border-radius: 4px; }
.panel::-webkit-scrollbar-track, .screen::-webkit-scrollbar-track { background: rgba(0,20,8,.5); }