:root {
  color-scheme: dark;
  --panel-width: 480px;
  --ink: #e9f1f3;
  --muted: #8a9a9f;
  --line: #253238;
  --panel: #0c1216;
  --accent: #e6b94a;
  --cyan: #60d5db;
  --red: #e34747;
  --green: #70bd77;
}

.d-none,
[hidden] { display: none !important; }

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #070a0d;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { font-size: 150%; }

button { touch-action: manipulation; }

#gameRoot {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-width);
  background: #070a0d;
}

#worldWrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: radial-gradient(circle at 48% 42%, #172228 0, #0c1216 55%, #070a0d 100%);
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  outline: none;
}

#gameCanvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cyan); }

.bottom-left { left: 16px; bottom: 16px; }
.performance-status { position: absolute; z-index: 3; padding: 7px 10px; border: 1px solid rgba(96,213,219,.24); background: rgba(7,10,13,.82); color: #819196; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; pointer-events: none; }
.performance-status strong { color: var(--cyan); }
.world-population-status { left: 16px; bottom: 52px; min-width: 220px; padding: 9px 11px; color: #aebabe; font: 700 15px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }
.world-population-status strong { color: #f08088; }

#commandPanel {
  position: relative;
  z-index: 4;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 150px), var(--panel);
  border-left: 1px solid #2b383d;
  box-shadow: -18px 0 45px rgba(0,0,0,.25);
  scrollbar-color: #334148 #0c1216;
}

.panel-header {
  padding: 24px 22px 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand-kicker, .eyebrow, .section-label {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--muted);
}

.panel-header h1 {
  margin: 7px 0 0;
  font-size: 35px;
  line-height: .93;
  font-weight: 900;
  letter-spacing: .035em;
}

.panel-header h1 span { color: var(--accent); }

.header-controls {
  display: grid;
  grid-template-columns: auto auto;
  gap: 7px;
  justify-items: stretch;
}

.icon-button {
  font-size: 14px;
  letter-spacing: .1em;
  border-color: #344249;
  color: #aebabe;
}

.panel-section { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.section-label { margin-bottom: 12px; }

.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tool-button {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid #29373d;
  border-radius: 4px;
  background: #11191d;
  color: #aebabe;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
}
.tool-button:hover { color: #fff; border-color: #4a5b62; background: #162127; }
.tool-button.active { color: #111; border-color: var(--accent); background: var(--accent); }
.keycap {
  min-width: 25px;
  height: 25px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 700 14px/1 ui-monospace, monospace;
  opacity: .7;
}

.selection-section { min-height: 260px; }
.selection-empty { padding: 34px 8px; color: #65757b; text-align: center; font-size: 18px; line-height: 1.6; }
.selection-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.selection-title h2 { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: .01em; }
.selection-subtitle { color: #74848a; font: 15px/1.4 ui-monospace, monospace; }
.status-bar { height: 5px; margin: 13px 0 5px; overflow: hidden; border-radius: 3px; background: #263238; }
.status-bar > span { display: block; height: 100%; background: var(--green); transition: width .2s; }
.status-bar.energy > span { background: var(--cyan); }
.status-bar.resource > span { background: #b879ff; }
.status-caption { display: flex; justify-content: space-between; color: #718087; font: 14px/1.3 ui-monospace, monospace; }
.panel-actions { display: grid; gap: 6px; }
.panel-actions.two { grid-template-columns: 1fr 1fr; }
.panel-actions .btn { border-radius: 3px; font-size: 17px; font-weight: 700; padding: 10px 11px; }
.panel-actions .btn:disabled { opacity: .34; cursor: not-allowed; }
.disabled-button-tip { display: block; }
.disabled-button-tip .btn { width: 100%; }
.btn-command { background: #d8ab3d; border-color: #d8ab3d; color: #111; }
.btn-command:hover { background: #f0c65d; border-color: #f0c65d; color: #111; }
.btn-cyan { background: #296d73; border-color: #3c8c93; color: #e6fcff; }
.btn-cyan:hover { background: #348089; color: white; }
.btn-quiet { background: #11191d; border-color: #324047; color: #b5c0c4; }
.btn-quiet:hover { background: #1a272c; border-color: #4a5b62; color: white; }
.btn-danger-quiet { background: #2b1719; border-color: #643137; color: #eaa0a5; }
.btn-danger-quiet:hover { background: #4c2024; color: white; }
.action-note { margin: 8px 0 0; color: #6e7e83; font-size: 14px; line-height: 1.5; }

.cargo-list { display: grid; gap: 5px; margin: 12px 0; }
.cargo-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; padding: 7px 8px; background: #0a1013; border: 1px solid #202b30; }
.cargo-row i { width: 7px; height: 18px; border-radius: 1px; background: var(--accent); }
.cargo-row.energy i { background: var(--cyan); }
.cargo-row.stock i { background: #bdc8cc; }
.cargo-row.loco i { background: var(--green); }
.cargo-row.wagon i { background: #9d7cc1; }
.cargo-row.empty i { background: #718087; }
.cargo-row span { font-size: 15px; color: #9caaae; }
.cargo-row strong { font: 700 17px/1 ui-monospace, monospace; }

.hud {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(99,122,130,.25);
  background: rgba(7,11,14,.76);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
.top-left { top: 18px; left: 18px; width: min(390px, calc(100% - 36px)); padding: 14px 17px; }
.hud-stat { color: #aebabe; font: 700 26px/1.4 ui-monospace, monospace; }
.hud-stat strong { color: var(--accent); font-weight: 900; }
.bottom-right { right: 18px; bottom: 18px; width: 330px; padding: 14px 17px; }
.hover-title { margin-top: 5px; color: #dce6e8; font-size: 20px; font-weight: 800; }
.hover-detail { margin-top: 3px; color: #728188; font: 14px/1.45 ui-monospace, monospace; }

.tooltip .tooltip-inner {
  max-width: 260px;
  padding: 8px 10px;
  border: 1px solid #425158;
  border-radius: 3px;
  background: #11191d;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  color: #d6e0e3;
  font-size: 17px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
}

.toast-stack { position: absolute; z-index: 8; top: 18px; right: 18px; display: grid; gap: 7px; width: 400px; pointer-events: none; }
.game-toast { padding: 12px 15px; border-left: 3px solid var(--accent); background: rgba(9,14,17,.94); box-shadow: 0 8px 24px rgba(0,0,0,.35); color: #cfd9dc; font-size: 17px; animation: toast-in .18s ease-out; }
.game-toast.danger { border-color: var(--red); }
.game-toast.info { border-color: var(--cyan); }
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } }

.game-over { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(5,7,9,.8); backdrop-filter: blur(5px); }
.game-over-card { width: min(540px, 92%); padding: 34px; border: 1px solid #633137; background: #100e11; box-shadow: 0 20px 70px #000; text-align: center; }
.game-over-card h1 { margin: 10px 0; font-size: clamp(38px, 6vw, 57px); font-weight: 900; }
.defeat-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 24px 0; border: 1px solid #3e2a2f; background: #3e2a2f; text-align: left; }
.defeat-stats div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 13px; background: #171317; }
.defeat-stats span { color: #9dabad; }
.defeat-stats strong { color: #f08088; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.defeat-stats div:first-child { grid-column: 1 / -1; }
.game-over-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.game-over-actions .btn { min-height: 50px; font-weight: 800; }
.final-stats-button { position: absolute; z-index: 9; left: 16px; bottom: 126px; min-height: 54px; padding: 10px 18px; font-size: 18px; font-weight: 900; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
@media (max-width: 560px) { .defeat-stats { grid-template-columns: 1fr; } .defeat-stats div:first-child { grid-column: auto; } }

.reminders-overlay { position: fixed; inset: 0; z-index: 24; display: grid; place-items: center; padding: 20px; background: rgba(5,7,9,.82); backdrop-filter: blur(5px); }
.reminders-card { width: min(760px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 34px; border: 1px solid #68572d; background: #111114; box-shadow: 0 22px 75px #000; }
.reminders-card .eyebrow { color: var(--accent); }
.reminders-card h2 { margin: 8px 0 20px; font-size: 38px; font-weight: 900; }
.reminders-card ul { display: grid; gap: 13px; margin: 0 0 26px; padding-left: 28px; color: #c6d0d3; font-size: 18px; line-height: 1.45; }
.reminders-card li::marker { color: var(--accent); }
.reminders-card .btn { width: 100%; min-height: 52px; font-size: 18px; font-weight: 900; }

.confirm-overlay { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px; background: rgba(5,7,9,.76); backdrop-filter: blur(4px); }
.confirm-card { width: min(520px, 100%); padding: 30px; border: 1px solid #71343b; background: #121013; box-shadow: 0 22px 75px #000; text-align: center; }
.confirm-card h2 { margin: 10px 0 14px; font-size: 31px; font-weight: 900; }
.confirm-card p { min-height: 3em; margin: 0 0 24px; color: #b8c4c7; line-height: 1.45; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.confirm-actions .btn { min-height: 48px; font-weight: 800; }

@media (max-width: 800px) {
  :root { --panel-width: 390px; }
  .panel-header { padding: 17px 15px; }
  .panel-section { padding: 14px 15px; }
}

@media (max-width: 640px) {
  #gameRoot { grid-template-columns: 1fr; grid-template-rows: minmax(52vh, 1fr) minmax(290px, 48vh); }
  #commandPanel { width: 100%; height: 100%; border-left: 0; border-top: 1px solid #2b383d; }
  .panel-header { display: none; }
  .selection-section { min-height: 210px; }
  .top-left { top: 10px; left: 10px; }
  .bottom-right { right: 10px; bottom: 10px; }
}