@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #0a0118;
  --panel: #140430ee;
  --line: #2b1a4d;
  --cyan: #23e6ff;
  --magenta: #ff2bd6;
  --orange: #ff9e3d;
  --violet: #8b5cf6;
  --text: #d8ccf1;
  --grid: #34a4c422;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: 'Share Tech Mono', monospace; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- title screen ---------- */
#titleScreen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0a0118 0%, #1b0638 45%, #431060 62%, #b0206e 78%, #0a0118 78.2%, #0a0118 100%);
  overflow: hidden; z-index: 50; }
#titleScreen .sun { position: absolute; left: 50%; top: 58%; width: 340px; height: 340px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #ffd24a, #ff6ac1 55%, #ff2bd6);
  border-radius: 50%; filter: blur(1px);
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
          mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 22px);
  opacity: .9; }
#titleScreen .horizon { position: absolute; left: -25%; right: -25%; top: 78%; bottom: 0;
  background:
    repeating-linear-gradient(90deg, var(--grid) 0 2px, transparent 2px 60px),
    repeating-linear-gradient(180deg, #23e6ff33 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #23064b, #0a0118);
  transform: perspective(300px) rotateX(55deg); transform-origin: top; }
.title-inner { position: relative; z-index: 2; text-align: center; }
.logo { font-family: 'Press Start 2P', monospace; font-size: 52px; letter-spacing: 4px;
  color: var(--cyan); text-shadow: 0 0 8px var(--cyan), 0 0 32px #23e6ff88, 4px 4px 0 #0a0118, 5px 5px 0 var(--magenta); }
.logo span { color: var(--magenta); text-shadow: 0 0 8px var(--magenta), 0 0 32px #ff2bd688, 4px 4px 0 #0a0118, 5px 5px 0 var(--cyan); }
.tagline { margin: 18px 0 34px; color: var(--orange); letter-spacing: 3px; text-transform: uppercase; font-size: 14px; }
.title-buttons { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.hint { margin-top: 40px; font-size: 12px; opacity: .65; letter-spacing: 2px; }

.nbtn { background: rgba(8, 2, 26, 0.82); color: var(--cyan); border: 2px solid var(--cyan);
  -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15);
  padding: 12px 34px; font-size: 15px; letter-spacing: 3px;
  text-shadow: 0 0 6px var(--cyan), 0 1px 3px #000;
  box-shadow: 0 0 12px #23e6ff44, inset 0 0 12px #23e6ff22;
  transition: all .15s; }
.nbtn:hover:not(:disabled) { background: rgba(21, 48, 66, 0.85); box-shadow: 0 0 24px #23e6ff88, inset 0 0 18px #23e6ff33; }
.nbtn:disabled { opacity: .35; cursor: default; }

/* ---------- game chrome ---------- */
#game { position: fixed; inset: 0; display: grid;
  grid-template-rows: 44px 1fr 28px;
  grid-template-columns: 122px 1fr;
  grid-template-areas: "top top" "pal view" "status status"; }
#topbar { grid-area: top; display: flex; align-items: center; gap: 16px; padding: 0 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px #ff2bd622; font-size: 15px; z-index: 5; }
#topbar .spacer { flex: 1; }
.stat { color: var(--cyan); text-shadow: 0 0 6px #23e6ff88; white-space: nowrap; }
#stFunds { color: var(--orange); text-shadow: 0 0 6px #ff9e3d88; }
.tbtn { background: transparent; border: 1px solid var(--violet); color: var(--violet);
  padding: 4px 10px; font-size: 12px; letter-spacing: 1px; }
.tbtn:hover { background: #8b5cf633; box-shadow: 0 0 10px #8b5cf666; }
#speed button { background: transparent; border: 1px solid var(--line); color: var(--text);
  width: 30px; padding: 3px 0; font-size: 11px; }
#speed button.on { border-color: var(--magenta); color: var(--magenta); box-shadow: 0 0 8px #ff2bd666; }

#rci { display: inline-flex; gap: 5px; align-items: flex-end; height: 26px; }
.bar { position: relative; width: 16px; height: 26px; border: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: center; }
.bar i { position: absolute; bottom: 50%; left: 0; right: 0; height: 0; }
.bar b { position: relative; font-size: 9px; z-index: 2; padding-bottom: 1px; }
.bar.r i { background: #35ff8f; box-shadow: 0 0 6px #35ff8f; }
.bar.c i { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.bar.i i { background: var(--orange); box-shadow: 0 0 6px var(--orange); }

#palette { grid-area: pal; display: flex; flex-direction: column; gap: 6px; padding: 6px 5px;
  background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; z-index: 5; }
#toolGrid, #megaGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
#viewModes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: transparent; border: 1px solid var(--line); color: var(--text); padding: 5px 0; }
.tool b { font-size: 15px; font-weight: normal; }
.tool small { font-size: 8px; letter-spacing: 1px; opacity: .7; text-transform: uppercase; }
.tool:hover { border-color: var(--cyan); }
.tool.on { border-color: var(--magenta); color: var(--magenta);
  box-shadow: 0 0 10px #ff2bd666, inset 0 0 8px #ff2bd633; }
.tool.zr b { color: #35ff8f; } .tool.zc b { color: var(--cyan); } .tool.zi b { color: var(--orange); }
.tool.derez b { color: #ff4059; }
#minimap { margin-top: auto; align-self: center; width: 108px; height: 108px;
  border: 1px solid var(--line); image-rendering: pixelated; }

#view { grid-area: view; width: 100%; height: 100%; display: block; background: var(--bg); }

#statusbar { grid-area: status; display: flex; align-items: center; padding: 0 12px;
  background: var(--panel); border-top: 1px solid var(--line); font-size: 12px;
  color: var(--violet); letter-spacing: 1px; z-index: 5; }

/* ---------- panels, toasts ---------- */
.panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 340px; background: var(--panel); border: 2px solid var(--magenta);
  box-shadow: 0 0 30px #ff2bd655, inset 0 0 24px #ff2bd611;
  padding: 20px 24px; z-index: 20; }
.panel h2 { font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--magenta);
  text-shadow: 0 0 8px #ff2bd688; margin-bottom: 16px; letter-spacing: 2px; }
.panel label { display: block; margin: 12px 0; font-size: 13px; }
.panel .close { margin-top: 14px; padding: 8px 20px; font-size: 12px; }
.panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel td { padding: 3px 6px; border-bottom: 1px dashed var(--line); }
.panel td:last-child { text-align: right; color: var(--orange); }
input[type=range] { accent-color: var(--magenta); width: 160px; vertical-align: middle; }

#queryPopup { min-width: 240px; border-color: var(--cyan);
  box-shadow: 0 0 30px #23e6ff55; font-size: 13px; line-height: 1.7; }
#queryPopup h2 { color: var(--cyan); }

#toasts { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 30; pointer-events: none; }
.toast { background: var(--panel); border: 1px solid var(--orange); color: var(--orange);
  padding: 8px 22px; font-size: 13px; letter-spacing: 2px; text-align: center;
  box-shadow: 0 0 18px #ff9e3d55; animation: toastIn .3s ease, toastOut .5s ease 3.5s forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

#scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(180deg, transparent 0 3px, #00000030 3px 4px); }

#viewModes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: auto; }
.vbtn { background: transparent; border: 1px solid var(--line); color: var(--text);
  font-size: 10px; padding: 3px 0; font-family: inherit; }
.vbtn.on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 6px #23e6ff55; }
#minimap { margin-top: 4px; }

.ordRow { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; font-size: 13px; cursor: pointer; }
.ordRow b { color: var(--cyan); }
#ordPanel { max-width: 460px; }

#graphCanvas { border: 1px solid var(--line); display: block; margin-bottom: 8px; }
#graphLegend { font-family: 'Share Tech Mono', monospace; margin-bottom: 6px; }

#megaSep { font-size: 9px; letter-spacing: 3px; color: var(--magenta); text-align: center;
  margin: 6px 0 2px; text-shadow: 0 0 6px #ff2bd688; }
.tool.mega b { color: var(--magenta); }
.tool.mega:disabled { opacity: 0.3; cursor: default; }
.tool.mega:disabled:hover { border-color: var(--line); }
#diffSel { display: flex; gap: 6px; margin-top: 14px; justify-content: center; }
.dbtn { background: rgba(8, 2, 26, 0.75); border: 1px solid #4a3a78; color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px #000;
  padding: 6px 16px; font-size: 11px; letter-spacing: 2px; font-family: inherit; }
.dbtn.on { border-color: var(--orange); color: var(--orange); box-shadow: 0 0 10px #ff9e3d55;
  background: rgba(26, 12, 4, 0.78); }
#victoryBanner { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; background: #0a0118dd; text-align: center; }
#victoryBanner h1 { font-family: 'Press Start 2P', monospace; font-size: 38px; color: var(--magenta);
  text-shadow: 0 0 14px var(--magenta), 0 0 48px #ff2bd688, 4px 4px 0 #0a0118, 6px 6px 0 var(--cyan);
  animation: vicPulse 1.6s ease-in-out infinite; }
#victoryBanner p { color: var(--cyan); letter-spacing: 2px; }
@keyframes vicPulse { 50% { transform: scale(1.04); } }

#sizeSel { display: flex; gap: 6px; margin-top: 8px; justify-content: center; }
#scenSel { display: grid; grid-template-columns: repeat(5, auto); gap: 6px; margin-top: 14px; justify-content: center; }
#scenSel .dbtn { padding: 6px 10px; font-size: 10px; }
#scenDesc { margin-top: 10px; font-size: 12px; color: #c9b8f5; letter-spacing: 1px;
  min-height: 2.4em; max-width: 480px; padding: 6px 14px; border-radius: 3px;
  background: rgba(8, 2, 26, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-shadow: 0 1px 3px #000; }
#defeatBanner { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; background: #180208dd; text-align: center; }
#defeatBanner h1 { font-family: 'Press Start 2P', monospace; font-size: 34px; color: #ff4059;
  text-shadow: 0 0 14px #ff4059, 4px 4px 0 #0a0118; }
#defeatBanner p { color: var(--orange); letter-spacing: 2px; }

#fundSliders label { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12px; }
#fundSliders label b { width: 90px; color: var(--cyan); font-weight: normal; }
#fundSliders input[type=range] { width: 120px; }
#bondRow { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
#bondInfo { font-size: 12px; color: var(--orange); }
#disasterPanel { max-width: 420px; }
#disasterPanel .nbtn { display: inline-block; margin: 3px; padding: 8px 12px; font-size: 11px; }

/* ── Help: tooltips, manual, tutorial ── */
#tooltip { position: fixed; z-index: 40; width: 250px; background: var(--panel);
  border: 1px solid var(--cyan); box-shadow: 0 0 18px #23e6ff44;
  padding: 10px 12px; font-size: 12px; line-height: 1.5; pointer-events: none; }
#tooltip.hidden { display: none; }
#tooltip h3 { color: var(--cyan); font-size: 12px; letter-spacing: 1px; margin-bottom: 4px; }
#tooltip .tt-stats { color: var(--orange); margin: 4px 0; font-size: 11px; }
#tooltip .tt-note { color: #9fb0d8; font-size: 11px; margin-top: 4px; }

#manualPanel { width: min(720px, 92vw); height: min(540px, 86vh);
  display: flex; flex-direction: column; z-index: 55; }
#manualPanel.hidden { display: none; }
#manualCols { display: flex; gap: 16px; flex: 1; min-height: 0; }
#manualNav { display: flex; flex-direction: column; gap: 4px; min-width: 176px; overflow-y: auto; }
#manualNav button { text-align: left; background: none; border: 1px solid var(--line);
  color: var(--text); padding: 7px 9px; font-size: 11px; letter-spacing: 1px;
  cursor: pointer; font-family: inherit; }
#manualNav button.on { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 10px #23e6ff33; }
#manualBody { flex: 1; overflow-y: auto; font-size: 13px; line-height: 1.65; padding-right: 8px; }
#manualBody h3 { color: var(--cyan); margin-bottom: 8px; letter-spacing: 2px; }
#manualBody ul, #manualBody ol { margin: 8px 0 8px 20px; }
#manualBody li { margin: 5px 0; }
#manualBody th { text-align: left; color: var(--cyan); padding: 3px 6px;
  border-bottom: 1px solid var(--line); }
#manualBody b { color: var(--orange); font-weight: 600; }

#tutPanel { position: fixed; left: 84px; bottom: 40px; width: 310px;
  background: var(--panel); border: 2px solid var(--orange);
  box-shadow: 0 0 24px #ff9e3d44; padding: 12px 14px; z-index: 25; font-size: 13px; }
#tutPanel.hidden { display: none; }
#tutPanel h4 { color: var(--orange); font-size: 12px; letter-spacing: 2px; margin-bottom: 6px; }
#tutStep { float: right; color: #9fb0d8; font-size: 11px; }
#tutText { line-height: 1.55; }
#btnTutSkip { margin-top: 10px; background: none; border: 1px solid var(--line);
  color: #9fb0d8; font-size: 10px; padding: 4px 10px; cursor: pointer;
  letter-spacing: 1px; font-family: inherit; }
.tool.tut-glow { border-color: var(--orange) !important; animation: tutPulse 1s ease-in-out infinite; }
@keyframes tutPulse { 0%, 100% { box-shadow: 0 0 6px #ff9e3d66; } 50% { box-shadow: 0 0 20px #ff9e3dcc; } }

/* ── synthwave scrollbars ── */
* { scrollbar-width: thin; scrollbar-color: #3a2a68 transparent; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a2a68; border-radius: 4px;
  border: 1px solid #1b0f3e; }
::-webkit-scrollbar-thumb:hover { background: #5a43a8; box-shadow: 0 0 6px #8b5cf688; }
::-webkit-scrollbar-corner { background: transparent; }

/* compact palette on short windows: icons only, tooltips carry the names */
@media (max-height: 900px) {
  .tool small { display: none; }
  .tool { padding: 4px 0; }
  #palette { gap: 4px; }
  #minimap { width: 88px; height: 88px; }
}

/* ══════════════ MOBILE / TOUCH ══════════════ */
.mobileOnly { display: none; }
#view { touch-action: none; }

/* transient tool card for touch (no hover to lean on) */
#toolFlash { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 120px);
  max-width: min(420px, 92vw); z-index: 32; pointer-events: none;
  background: var(--panel); border: 1px solid var(--cyan);
  box-shadow: 0 0 18px #23e6ff55; padding: 9px 13px; font-size: 12px; line-height: 1.5;
  animation: flashIn .18s ease, flashOut .4s ease 2.6s forwards; }
#toolFlash h3 { color: var(--cyan); font-size: 12px; letter-spacing: 1px; margin-bottom: 3px; }
#toolFlash .tt-stats { color: var(--orange); font-size: 11px; margin-top: 3px; }
@keyframes flashIn { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes flashOut { to { opacity: 0; } }

@media (max-width: 860px), (pointer: coarse) and (max-width: 1100px) {
  html, body { height: 100dvh; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
  .mobileOnly { display: flex; }

  /* stack: topbar / canvas / dock — the palette becomes a bottom dock */
  #game { height: 100dvh;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr;
    grid-template-areas: "top" "view" "pal";
    padding-bottom: env(safe-area-inset-bottom, 0px); }
  #statusbar { position: fixed; left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    background: #140430cc; border: none; font-size: 11px; padding: 2px 10px;
    pointer-events: none; z-index: 6; }

  /* topbar: two compact rows, icons only, scrollable if it must be */
  #topbar { flex-wrap: wrap; height: auto; gap: 8px 10px; padding: 6px 8px 4px;
    font-size: 13px; padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  #topbar .spacer { display: none; }
  .stat { font-size: 12px; }
  #stDate { order: -1; }
  .tbtn { padding: 6px 9px; font-size: 11px; min-height: 32px; }
  #speed button { width: 34px; min-height: 30px; }

  /* palette -> horizontally scrolling dock of big touch targets */
  #palette { flex-direction: row; align-items: center; gap: 6px;
    overflow-x: auto; overflow-y: hidden; padding: 6px 8px;
    border-right: none; border-top: 1px solid var(--line);
    scroll-snap-type: x proximity; }
  #toolGrid, #megaGrid { display: flex; gap: 6px; }
  #palette .tool { min-width: 58px; min-height: 58px; scroll-snap-align: center; flex: 0 0 auto; }
  #palette .tool b { font-size: 20px; }
  #palette .tool small { font-size: 8px; }
  #megaSep { writing-mode: vertical-rl; font-size: 8px; padding: 0 2px; align-self: stretch;
    display: flex; align-items: center; }

  /* views + minimap live in a popover toggled by the ◱ button */
  #viewModes, #minimap { display: none; }
  #palette.showLayers #viewModes { display: grid; grid-auto-flow: column;
    grid-template-columns: none; grid-template-rows: 1fr 1fr; gap: 4px; }
  #palette.showLayers #minimap { display: block; width: 58px; height: 58px; margin: 0; }
  #palette.showLayers #toolGrid, #palette.showLayers #megaGrid,
  #palette.showLayers #megaSep { display: none; }
  .vbtn { min-width: 34px; min-height: 26px; font-size: 12px; }

  /* panels: near-fullscreen sheets that scroll */
  .panel { width: min(96vw, 560px); max-height: 82dvh; overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .panel h2 { font-size: 12px; }
  .panel .close { width: 100%; min-height: 44px; }
  #manualPanel { width: 96vw; height: 86dvh; }
  #manualCols { flex-direction: column; }
  #manualNav { flex-direction: row; overflow-x: auto; min-width: 0; padding-bottom: 4px; }
  #manualNav button { flex: 0 0 auto; }
  #disasterPanel .nbtn { width: calc(50% - 8px); font-size: 10px; padding: 10px 4px; }
  #tutPanel { left: 8px; right: 8px; width: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 116px); }
  #tooltip { display: none; }   /* no hover on touch; #toolFlash replaces it */

  /* title screen fits a phone */
  .logo { font-size: clamp(28px, 11vw, 52px); }
  .tagline { font-size: 11px; margin: 12px 0 20px; letter-spacing: 2px; }
  .title-buttons { gap: 10px; }
  .nbtn { padding: 12px 20px; font-size: 13px; letter-spacing: 2px; min-height: 46px; }
  #scenSel { grid-template-columns: repeat(3, 1fr); }
  #scenSel .dbtn { font-size: 9px; padding: 8px 4px; }
  .dbtn { min-height: 38px; }
  .hint { display: none; }
  #titleScreen { overflow-y: auto; align-items: flex-start; padding: 6vh 10px 4vh; }
}

/* landscape phones: keep the dock, shrink vertical chrome further */
@media (pointer: coarse) and (max-height: 500px) {
  #palette .tool { min-width: 50px; min-height: 46px; }
  #palette .tool small { display: none; }
  #topbar { padding: 3px 8px; gap: 6px; }
  .stat { font-size: 11px; }
}