/* Grid Raya — national dispatch-room aesthetic */
:root {
  --bg: #0b1210;
  --surface: #121a17;
  --surface-2: #182420;
  --line: #24332d;
  --text: #dfe8e2;
  --dim: #8ba396;
  --accent: #ffc233;       /* substation amber */
  --accent-dark: #b8860b;
  --danger: #e05252;
  --ok: #5aa469;
  font-size: 15px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Chakra Petch', sans-serif;
  background-image:
    radial-gradient(ellipse 80% 60% at 70% -10%, rgba(255,194,51,0.05), transparent),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,0.008) 3px 4px);
}
.mono { font-family: 'IBM Plex Mono', monospace; }
.accent { color: var(--accent); }
.dim { color: var(--dim); }
.small { font-size: 0.8rem; }
.hidden { display: none !important; }

.screen { min-height: 100vh; }

/* ---------- Buttons ---------- */
.btn {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.55em 1.1em;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: border-color 150ms ease, background 150ms ease;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #1a1305; border-color: var(--accent); }
.btn.primary:hover { background: #ffd260; }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.small { padding: 0.3em 0.7em; font-size: 0.85rem; }
.btn.icon { font-size: 1.1rem; padding: 0.3em 0.6em; }
.btn.icon.off { opacity: 0.4; text-decoration: line-through; }
.btn.wide { width: 100%; margin-top: 0.8rem; }
.btn:disabled { opacity: 0.4; cursor: default; }

input {
  font-family: 'IBM Plex Mono', monospace;
  background: #0d1512;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.5em 0.7em;
  width: 100%;
}
input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* ---------- Landing ---------- */
#landing { display: grid; place-items: center; }
.landing-inner { width: min(440px, 92vw); text-align: center; }
.brand-mark {
  font-size: 3rem; width: 84px; height: 84px; margin: 0 auto 0.6rem;
  display: grid; place-items: center;
  border: 2px solid var(--accent); color: var(--accent);
  box-shadow: 0 0 32px rgba(255,194,51,0.25), inset 0 0 18px rgba(255,194,51,0.12);
}
.brand h1 { font-size: 2.6rem; letter-spacing: 0.28em; margin: 0.2em 0 0.1em; }
.tagline { color: var(--dim); margin-top: 0; }
.landing-card {
  margin-top: 1.6rem; padding: 1.4rem; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
}
.landing-card label { display: block; font-size: 0.85rem; color: var(--dim); }
.landing-card input { margin-top: 0.35rem; }
.landing-actions { margin-top: 1rem; display: grid; gap: 0.7rem; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; }
#code-input { text-transform: uppercase; letter-spacing: 0.25em; }
.landing-note { color: var(--dim); font-size: 0.8rem; margin-top: 1.2rem; }

/* ---------- Lobby ---------- */
#lobby { display: grid; place-items: center; padding: 2rem 1rem; }
.lobby-inner { width: min(760px, 94vw); }
.lobby-head h2 { letter-spacing: 0.1em; }
.lobby-head p { color: var(--dim); }
.lobby-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 640px) { .lobby-grid { grid-template-columns: 1fr; } }
.player-list { list-style: none; padding: 0; margin: 0; }
.player-list li { padding: 0.45em 0; border-bottom: 1px solid var(--line); display: flex; gap: 0.6em; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.region-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.5rem 0; }
.region-btn {
  border: 1px solid var(--line); padding: 0.5em; cursor: pointer;
  background: var(--surface-2); color: var(--text); font-family: inherit; font-weight: 600;
}
.region-btn.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------- Panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); padding: 0.8rem; }
.panel h3 {
  margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 0.4rem;
}

/* ---------- Game layout ---------- */
#game { display: flex; flex-direction: column; height: 100vh; }
#topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0.8rem; background: var(--surface); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand-mini { font-weight: 700; letter-spacing: 0.18em; color: var(--accent); margin-right: 0.6rem; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.chip {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem;
  border: 1px solid var(--line); padding: 0.15em 0.6em; background: var(--surface-2);
}
#turn-banner { font-weight: 700; color: var(--accent); letter-spacing: 0.04em; }

#layout { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
@media (max-width: 980px) { #layout { grid-template-columns: 1fr; overflow-y: auto; } #map-wrap { min-height: 60vh; } }

#map-wrap { position: relative; min-height: 0; }
#map { width: 100%; height: 100%; display: block; }

#sidebar { overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem; border-left: 1px solid var(--line); }

/* ---------- Map ---------- */
/* --fs is set by renderMap(): damps label size as the viewBox zooms into the playable area */
.link-line { stroke: #35473f; stroke-width: 2; }
.link-cost-bg { fill: #0d1512; stroke: #35473f; stroke-width: 1; }
.link-cost { fill: var(--dim); font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: calc(11px * var(--fs, 1)); text-anchor: middle; dominant-baseline: central; }
.city-node { cursor: pointer; }
.city-circle { fill: var(--surface-2); stroke-width: 2.5; }
.city-circle.buildable:hover { filter: drop-shadow(0 0 6px var(--accent)); }
.city-label { fill: var(--text); font-family: 'Chakra Petch', sans-serif; font-weight: 600; font-size: calc(11px * var(--fs, 1)); text-anchor: middle; pointer-events: none; }
.slot { stroke: #0b1210; stroke-width: 1; }
.region-label { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: calc(15px * var(--fs, 1)); letter-spacing: 0.2em; opacity: 0.5; text-anchor: middle; }
.city-dim { opacity: 0.22; pointer-events: none; }

/* ---------- Plant market ---------- */
#plant-market { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.plant-card {
  border: 1px solid var(--line); background: var(--surface-2); padding: 0.3rem 0.4rem 0.35rem;
  text-align: left; font-family: 'IBM Plex Mono', monospace; position: relative;
}
.plant-card.future { opacity: 0.45; }
.plant-card.clickable { cursor: pointer; }
.plant-card.clickable:hover { border-color: var(--accent); }
.plant-num { font-size: 1.15rem; font-weight: 600; }
.plant-io { font-size: 0.7rem; color: var(--dim); display: flex; align-items: center; gap: 1px; white-space: nowrap; margin-top: 2px; }
.fuel-icon { font-style: normal; }
.plant-mini {
  display: inline-block; border: 1px solid var(--line); padding: 0.15em 0.4em;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; margin: 0.15em 0.2em 0 0;
}
.plant-mini .fuel-chip { min-width: 1.2em; height: 1.2em; vertical-align: -0.2em; }

/* ---------- Resource market ---------- */
.res-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--line); }
.res-row:last-child { border-bottom: none; }
.res-name { width: 5.4em; font-weight: 600; }
.res-bar { flex: 1; height: 10px; background: #0d1512; border: 1px solid var(--line); position: relative; }
.res-fill { height: 100%; }
.res-price { font-family: 'IBM Plex Mono', monospace; width: 6.5em; text-align: right; font-size: 0.85rem; }

/* ---------- Players panel ---------- */
.pl-row { border: 1px solid var(--line); padding: 0.45rem; margin-bottom: 0.4rem; background: var(--surface-2); }
.pl-row.me { border-color: var(--accent); }
.pl-row.turn { box-shadow: inset 3px 0 0 var(--accent); }
.pl-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.pl-stats { font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem; color: var(--dim); display: flex; gap: 0.9em; margin-top: 0.2rem; }

/* ---------- Action dock (floats over the map; wide & short so nothing scrolls) ---------- */
#action-panel {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.6rem;
  width: min(720px, 96%); max-height: calc(100% - 1.2rem); overflow-y: auto; z-index: 12;
  padding: 0.55rem 0.8rem;
  background: rgba(18, 26, 23, 0.93); backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
#action-panel h3 { margin-bottom: 0.4rem; }
#action-panel.attention {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(255, 194, 51, 0.18), 0 8px 30px rgba(0, 0, 0, 0.5);
}
#action-body { display: flex; flex-direction: column; gap: 0.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.35rem 0.9rem; }
.btn-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.btn-row .cost-line { margin-right: auto; }
.bid-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem; align-items: center; }
.qty-row { display: grid; grid-template-columns: 5.4em 1fr auto auto auto; gap: 0.35rem; align-items: center; font-size: 0.9rem; }
.qty-val { font-family: 'IBM Plex Mono', monospace; text-align: center; min-width: 2em; }
.hint { font-size: 0.8rem; color: var(--dim); }
.cost-line { font-family: 'IBM Plex Mono', monospace; color: var(--accent); }

/* ---------- Log & chat ---------- */
#log { max-height: 180px; overflow-y: auto; font-size: 0.82rem; font-family: 'IBM Plex Mono', monospace; color: var(--dim); display: flex; flex-direction: column; gap: 2px; }
#log .chatline { color: var(--text); }
.chat-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; margin-top: 0.5rem; }

/* ---------- Video strip (top-right; bottom is the action dock's) ---------- */
#videos {
  position: absolute; right: 0.6rem; top: 0.6rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
  justify-content: flex-end; max-width: calc(100% - 1.2rem); z-index: 8;
}
.vid-tile {
  width: 148px; aspect-ratio: 4/3; background: #000; border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.vid-tile video { width: 100%; height: 100%; object-fit: cover; }
.vid-name {
  position: absolute; left: 0; bottom: 0; right: 0; font-size: 0.7rem; padding: 1px 5px;
  background: rgba(0,0,0,0.6); font-family: 'IBM Plex Mono', monospace;
}

/* ---------- Modal & toast ---------- */
#modal-backdrop {
  position: fixed; inset: 0; background: rgba(5,9,8,0.75); display: grid; place-items: center; z-index: 50;
}
#modal { background: var(--surface); border: 1px solid var(--accent); padding: 1.2rem; width: min(480px, 92vw); max-height: 86vh; overflow-y: auto; }
#modal h3 { margin-top: 0; letter-spacing: 0.08em; }
#toast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%);
  background: var(--danger); color: #fff; padding: 0.5em 1.2em; z-index: 60;
  font-weight: 600; box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- How to play ---------- */
.phase-hint {
  font-size: 12px; line-height: 1.5; color: var(--dim, #9aa89b);
  background: rgba(255, 194, 51, .06);
  border-left: 2px solid var(--accent, #ffc233);
  padding: 6px 10px; margin-bottom: 10px; border-radius: 0 4px 4px 0;
}
.phase-hint.hidden { display: none; }
.help { max-width: 560px; max-height: 72vh; overflow-y: auto; padding-right: 6px; }
.help h2 { margin-top: 0; }
.help h4 { color: var(--accent, #ffc233); margin: 16px 0 6px;
  font-family: 'Chakra Petch', sans-serif; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
.help p, .help li { font-size: 13.5px; line-height: 1.6; }
.help ol, .help ul { padding-left: 20px; margin: 6px 0; }
.help li { margin-bottom: 8px; }
.help #help-close { margin-top: 14px; width: 100%; }

/* ---------- Fuel chips (colored SVG icons) & plant colours ---------- */
.fuel-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 1.5em; height: 1.5em; padding: 0 0.18em; border-radius: 4px;
  border: 1px solid currentColor; vertical-align: -0.3em; font-style: normal;
}
.fuel-chip svg { width: 1em; height: 1em; display: block; }
.fc-coal    { color: #b5906b; background: rgba(156, 122, 82, 0.22); }
.fc-oil     { color: #8fa5bb; background: rgba(126, 147, 168, 0.22); }
.fc-garbage { color: #e8cf4a; background: rgba(227, 201, 63, 0.16); }
.fc-uranium { color: #ff6b6b; background: rgba(255, 97, 97, 0.18); }
.fc-eco     { color: #63cf85; background: rgba(88, 196, 124, 0.18); }
.fc-hybrid  { color: #a99b8a; background: linear-gradient(100deg, rgba(156,122,82,0.28) 48%, rgba(126,147,168,0.28) 52%); }

.plant-head { display: flex; justify-content: space-between; align-items: center; gap: 0.2em; }
.plant-art svg { width: 26px; height: 26px; display: block; color: var(--pcc, var(--dim)); opacity: 0.95; }
.plant-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pc, transparent); }
.plant-coal    { --pc: #9c7a52; --pcc: #b5906b; background: color-mix(in srgb, #9c7a52 10%, var(--surface-2)); }
.plant-oil     { --pc: #7e93a8; --pcc: #8fa5bb; background: color-mix(in srgb, #7e93a8 10%, var(--surface-2)); }
.plant-garbage { --pc: #e3c93f; --pcc: #e8cf4a; background: color-mix(in srgb, #e3c93f 8%,  var(--surface-2)); }
.plant-uranium { --pc: #ff6161; --pcc: #ff6b6b; background: color-mix(in srgb, #ff6161 9%,  var(--surface-2)); }
.plant-eco     { --pc: #58c47c; --pcc: #63cf85; background: color-mix(in srgb, #58c47c 9%,  var(--surface-2)); }
.plant-hybrid  { --pc: linear-gradient(90deg, #9c7a52, #7e93a8); --pcc: #a99b8a; background: color-mix(in srgb, #90837a 10%, var(--surface-2)); }

.leave-actions { display: grid; gap: 0.5rem; margin-top: 0.8rem; }

.variant-row { display:flex; gap:8px; align-items:center; font-size:13px; margin:10px 0; cursor:pointer; }
.plant-card.discounted { outline: 1px solid var(--accent, #ffc233); }
.discount-tag { position:absolute; top:-7px; right:-6px; background:var(--accent,#ffc233); color:#141a14;
  font: 600 9px 'IBM Plex Mono', monospace; padding:1px 4px; border-radius:3px; }
.plant-card { position:relative; }

/* ---------- landmass background ---------- */
.landmass { fill: rgba(120, 160, 120, .055); stroke: rgba(150, 190, 150, .22); stroke-width: 1; }
.land-context { fill: rgba(255, 255, 255, .015); stroke: rgba(255, 255, 255, .05); stroke-width: 1; }