/* FBSimCity — dark neon UI over the isometric canvas. */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0b0e1a;
  color: #dce4ff;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

#city {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
}

/* ---- top bar ---- */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(11,14,26,0.92), rgba(11,14,26,0.55) 80%, transparent);
  pointer-events: none;
  z-index: 10;
}
#topbar h1 {
  font-size: 20px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #ffa94d, #ff6b6b, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#topbar .sub { font-size: 12.5px; color: #9aa7d4; }
#topbar nav { margin-left: auto; display: flex; gap: 8px; pointer-events: auto; }

button, .ghlink {
  font: 600 12.5px "Segoe UI", sans-serif;
  color: #dce4ff;
  background: rgba(40,50,90,0.75);
  border: 1px solid rgba(130,150,220,0.35);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
button:hover, .ghlink:hover { background: rgba(60,75,130,0.9); border-color: rgba(160,180,255,0.6); }
button.primary { background: rgba(230,120,40,0.35); border-color: rgba(255,170,80,0.55); }
button.primary:hover { background: rgba(230,120,40,0.55); }

/* ---- control panel ---- */
#controls {
  position: fixed;
  top: 60px; left: 12px;
  width: 232px;
  background: rgba(14,18,34,0.88);
  border: 1px solid rgba(120,140,210,0.28);
  border-radius: 10px;
  padding: 12px 14px;
  backdrop-filter: blur(6px);
  z-index: 10;
}
#controls h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8fa0d8;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#controls-toggle {
  background: none;
  border: none;
  color: #8fa0d8;
  font-size: 15px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
#controls-toggle:hover { color: #fff; background: none; }
#controls.collapsed .ctl,
#controls.collapsed .btnrow,
#controls.collapsed #event-log { display: none; }
#controls.collapsed { width: auto; }
#controls.collapsed h2 { margin-bottom: 0; gap: 10px; }
.ctl { margin-bottom: 10px; }
.ctl label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #b9c4ec;
  margin-bottom: 3px;
  gap: 6px;
}
.ctl output { color: #ffd43b; font-weight: 600; white-space: nowrap; }
.ctl input[type="range"] { width: 100%; accent-color: #ffa94d; }
.ctl.switch label { display: block; font-size: 12px; cursor: pointer; }
.ctl.switch input { accent-color: #ffa94d; margin-right: 4px; }
.ctl.switch .hint { display: block; color: #7d89b8; font-size: 10.5px; margin-left: 20px; }
.ctl.danger input { accent-color: #ff6b6b; }

.btnrow { display: flex; gap: 8px; margin: 12px 0 8px; }
.btnrow button { flex: 1; padding: 6px 4px; }

#event-log {
  border-top: 1px solid rgba(120,140,210,0.2);
  padding-top: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #93a1cf;
  min-height: 54px;
  max-height: 120px;
  overflow: hidden;
}
#event-log div:first-child { color: #d7e0ff; }

/* ---- info panel ---- */
#info-panel {
  position: fixed;
  top: 60px; right: 12px;
  width: 300px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: rgba(14,18,34,0.92);
  border: 1px solid rgba(120,140,210,0.28);
  border-radius: 10px;
  padding: 14px 16px;
  backdrop-filter: blur(6px);
  z-index: 11;
}
#info-panel h2 { font-size: 16px; margin-bottom: 4px; color: #fff; padding-right: 20px; }
.code-chip {
  display: inline-block;
  font: 600 10.5px Consolas, monospace;
  color: #ffd43b;
  background: rgba(255,212,59,0.12);
  border: 1px solid rgba(255,212,59,0.3);
  border-radius: 4px;
  padding: 1px 7px;
  margin-bottom: 8px;
}
#info-body { font-size: 12.5px; line-height: 1.55; color: #c3cdf1; }
#info-body p { margin-bottom: 9px; }
#info-body a { color: #74c0fc; }
#info-body .fine { font-size: 11px; color: #8b97c4; }
#info-close, #tour-close, #trace-end {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: none;
  font-size: 18px;
  color: #8b97c4;
  padding: 2px 6px;
}
#info-close:hover, #tour-close:hover, #trace-end:hover { color: #fff; background: none; }

/* ---- stats bar ---- */
#stats {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 8px 16px;
  background: linear-gradient(0deg, rgba(11,14,26,0.95), rgba(11,14,26,0.6) 80%, transparent);
  font-size: 12px;
  color: #9aa7d4;
  z-index: 10;
  pointer-events: none;
}
#stats b { color: #e8edff; font-weight: 600; }
#stats .good { color: #69db7c; }
#stats .warn { color: #ffd43b; }
#stats .bad { color: #ff8787; }

/* ---- tour ---- */
#tour {
  position: fixed;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  background: rgba(16,20,40,0.94);
  border: 1px solid rgba(255,170,80,0.4);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 24px rgba(255,150,60,0.12);
  z-index: 12;
}
.tour-head { display: flex; align-items: baseline; gap: 10px; padding-right: 24px; }
#tour h3 { font-size: 15px; color: #ffc078; }
#tour-step { font-size: 11px; color: #8b97c4; }
#tour p { font-size: 13px; line-height: 1.55; color: #cdd6f6; margin: 8px 0 10px; }
.tour-nav { display: flex; justify-content: flex-end; gap: 8px; }

/* ---- scenario select ---- */
#ctl-scenario {
  width: 100%;
  background: rgba(40,50,90,0.75);
  color: #dce4ff;
  border: 1px solid rgba(130,150,220,0.35);
  border-radius: 6px;
  padding: 5px 6px;
  font: 12px "Segoe UI", sans-serif;
}

/* ---- stats sparklines / version ---- */
#stats .stat { display: inline-flex; align-items: center; gap: 5px; }
#stats canvas { opacity: 0.9; }
#stats .version { margin-left: auto; color: #5f6c99; font-size: 11px; }

/* ---- trace panel ---- */
#trace-panel {
  position: fixed;
  right: 12px;
  bottom: 46px;
  width: min(340px, calc(100vw - 24px));
  background: rgba(16,20,40,0.94);
  border: 1px solid rgba(77,171,247,0.45);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 24px rgba(77,171,247,0.12);
  z-index: 12;
}
#trace-panel h3 { font-size: 14px; color: #74c0fc; }
#trace-panel h4 { font-size: 13px; color: #fff; margin: 6px 0 4px; }
#trace-panel p { font-size: 12.5px; line-height: 1.5; color: #cdd6f6; margin-bottom: 10px; }

/* ---- overlays ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5,8,18,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  backdrop-filter: blur(3px);
}
.overlay-box {
  position: relative;
  background: rgba(16,20,40,0.97);
  border: 1px solid rgba(130,150,220,0.35);
  border-radius: 14px;
  padding: 22px 26px;
  max-width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 0 12px 60px rgba(0,0,0,0.6);
}
.overlay-box.wide { max-width: min(860px, calc(100vw - 32px)); }
.overlay-box h2 { font-size: 17px; color: #fff; margin-bottom: 10px; }
.overlay-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  color: #8b97c4;
  padding: 2px 6px;
}
.overlay-close:hover { color: #fff; background: none; }
.overlay-box .fine { font-size: 11.5px; color: #8b97c4; line-height: 1.5; margin-bottom: 12px; }

table.keys { border-collapse: collapse; font-size: 12.5px; color: #c3cdf1; }
table.keys td { padding: 4px 14px 4px 0; }
table.keys kbd {
  background: rgba(70,85,140,0.5);
  border: 1px solid rgba(130,150,220,0.4);
  border-radius: 4px;
  padding: 1px 7px;
  font: 11px Consolas, monospace;
  color: #e8edff;
}

/* ---- page anatomy ---- */
.anatomy { display: flex; gap: 22px; flex-wrap: wrap; }
.page-col {
  flex: 1 1 320px;
  border: 1px solid rgba(130,150,220,0.45);
  border-radius: 8px;
  overflow: hidden;
  font-size: 11.5px;
}
.pg { padding: 7px 10px; color: #dce4ff; }
.pg.hdr { background: rgba(76,110,245,0.35); font-weight: 600; }
.pg.hdr2 { background: rgba(76,110,245,0.22); }
.pg.slot { background: rgba(32,201,151,0.16); border-top: 1px dashed rgba(130,150,220,0.3); }
.pg.free {
  background: repeating-linear-gradient(45deg, rgba(80,90,130,0.10), rgba(80,90,130,0.10) 8px, rgba(80,90,130,0.22) 8px, rgba(80,90,130,0.22) 16px);
  text-align: center;
  padding: 20px 10px;
  color: #9aa7d4;
}
.pg.free span { font-size: 10px; }
.pg.rec { background: rgba(255,169,77,0.14); border-top: 1px dashed rgba(130,150,220,0.3); }
.pg .rpb {
  display: block;
  font: 10px Consolas, monospace;
  color: #ffd43b;
  margin-bottom: 2px;
}
.chain-col { flex: 1 1 260px; }
.chain-col h3 { font-size: 13px; color: #74c0fc; margin-bottom: 8px; }
.ver {
  background: rgba(77,171,247,0.16);
  border: 1px solid rgba(77,171,247,0.45);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  color: #dce4ff;
  font-weight: 600;
}
.ver span { display: block; font-size: 10.5px; font-weight: 400; color: #9aa7d4; }
.ver.newest { border-color: rgba(105,219,124,0.6); background: rgba(105,219,124,0.14); }
.ver.oldest { border-color: rgba(255,107,107,0.6); background: rgba(255,107,107,0.12); }
.arrow { text-align: center; color: #8b97c4; font-size: 11px; padding: 3px 0; }
.chain-col .fine { margin-top: 12px; }

/* ---- close-range "you are here" chip ---- */
#whereami {
  position: fixed;
  top: 52px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16,20,40,0.88);
  border: 1px solid rgba(255,212,59,0.4);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 12.5px;
  color: #ffd43b;
  pointer-events: none;
  z-index: 9;
}
body.day #whereami { background: rgba(252,253,255,0.92); color: #8a5a00; border-color: rgba(210,120,30,0.5); }

/* ---- live version-chain inspector ---- */
#chain-live h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #74c0fc;
  margin: 10px 0 6px;
}
.chainrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  color: #9aa7d4;
  border-left: 3px solid rgba(120,140,210,0.4);
  padding: 3px 8px;
  margin-bottom: 3px;
  border-radius: 0 5px 5px 0;
  background: rgba(40,50,90,0.35);
}
.chainrow span {
  font: 600 11px Consolas, monospace;
  color: #dce4ff;
  white-space: nowrap;
}
.chainrow.ver-new { border-left-color: #69db7c; background: rgba(105,219,124,0.12); }
.chainrow.ver-ok { border-left-color: #4dabf7; }
.chainrow.ver-dead { border-left-color: #ff6b6b; background: rgba(255,107,107,0.10); color: #d59a9a; }
.chainrow.more { border-left-style: dashed; font-style: italic; }
body.day .chainrow { background: rgba(220,228,248,0.5); color: #51619b; }
body.day .chainrow span { color: #24304f; }
body.day .chainrow.ver-new { background: rgba(43,138,62,0.12); }
body.day .chainrow.ver-dead { background: rgba(201,42,42,0.10); color: #a05252; }

/* ---- first-visit gesture hint ---- */
#gesture-hint {
  position: fixed;
  top: 54%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(16,20,40,0.85);
  border: 1px solid rgba(130,150,220,0.35);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 13px;
  color: #b9c4ec;
  pointer-events: none;
  z-index: 9;
  animation: hint-breathe 2.4s ease-in-out infinite;
}
#gesture-hint b { color: #ffd43b; font-weight: 600; }
@keyframes hint-breathe {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}
body.day #gesture-hint { background: rgba(252,253,255,0.9); color: #33406b; }
body.day #gesture-hint b { color: #b26b00; }

.hidden { display: none !important; }

/* ---- daylight theme ---- */
body.day { background: #eef3fb; color: #1f2947; }
body.day #topbar { background: linear-gradient(180deg, rgba(238,243,251,0.94), rgba(238,243,251,0.6) 80%, transparent); }
body.day #topbar .sub { color: #51619b; }
body.day button, body.day .ghlink {
  background: rgba(255,255,255,0.85);
  border-color: rgba(90,110,180,0.4);
  color: #24304f;
}
body.day button:hover, body.day .ghlink:hover { background: #ffffff; border-color: rgba(70,90,160,0.7); }
body.day button.primary { background: rgba(255,170,80,0.35); border-color: rgba(210,120,30,0.55); }
body.day #controls, body.day #info-panel, body.day #tour,
body.day #trace-panel, body.day .overlay-box {
  background: rgba(252,253,255,0.94);
  border-color: rgba(90,110,180,0.35);
}
body.day #controls h2 { color: #51619b; }
body.day .ctl label { color: #33406b; }
body.day .ctl output { color: #b26b00; }
body.day .ctl.switch .hint { color: #6b7aa8; }
body.day #event-log { color: #5a689a; border-top-color: rgba(90,110,180,0.25); }
body.day #event-log div:first-child { color: #1f2947; }
body.day #info-panel h2, body.day .overlay-box h2, body.day #trace-panel h4 { color: #141c36; }
body.day #info-body { color: #33406b; }
body.day #info-body a { color: #1971c2; }
body.day #info-body .fine, body.day .overlay-box .fine { color: #6b7aa8; }
body.day .code-chip { color: #b26b00; background: rgba(255,170,80,0.15); border-color: rgba(210,120,30,0.4); }
body.day #stats { background: linear-gradient(0deg, rgba(238,243,251,0.96), rgba(238,243,251,0.6) 80%, transparent); color: #51619b; }
body.day #stats b { color: #141c36; }
body.day #stats .good { color: #2b8a3e; }
body.day #stats .warn { color: #b26b00; }
body.day #stats .bad { color: #c92a2a; }
body.day #stats .version { color: #8b97c4; }
body.day #tour h3 { color: #b26b00; }
body.day #tour p, body.day #trace-panel p { color: #33406b; }
body.day #tour-step { color: #6b7aa8; }
body.day #trace-panel h3 { color: #1971c2; }
body.day #ctl-scenario { background: rgba(255,255,255,0.9); color: #24304f; border-color: rgba(90,110,180,0.4); }
body.day .overlay { background: rgba(180,195,225,0.5); }
body.day table.keys { color: #33406b; }
body.day table.keys kbd { background: rgba(220,228,248,0.9); color: #24304f; border-color: rgba(90,110,180,0.45); }
body.day .pg { color: #24304f; }
body.day .pg.free { color: #51619b; }
body.day .pg .rpb { color: #9a5b00; }
body.day .ver { color: #24304f; }
body.day .ver span { color: #51619b; }
body.day .arrow { color: #51619b; }
body.day #info-close, body.day #tour-close, body.day #trace-end, body.day .overlay-close { color: #6b7aa8; }
body.day #info-close:hover, body.day #tour-close:hover, body.day #trace-end:hover, body.day .overlay-close:hover { color: #141c36; }

/* ---- small screens ---- */
@media (max-width: 900px) {
  #controls { width: 200px; top: 54px; }
  #info-panel { width: min(300px, calc(100vw - 24px)); }
  #topbar .sub { display: none; }
}
@media (max-width: 640px) {
  #controls {
    top: auto;
    bottom: 40px;
    max-height: 40vh;
    overflow-y: auto;
  }
  #event-log { display: none; }
}