/* ── Palette ──
   Neutral charcoal surfaces with light text, so copy never sits blue-on-blue.
   One warm accent (amber) marks labels and primary actions; sky blue is kept
   for live values and links. All text colours pass WCAG AA on --surface. */
:root {
  --surface:    #1a2029;
  --surface-2:  #222a35;
  --panel:      rgba(24,29,37,0.94);
  --scrim:      rgba(9,11,15,0.82);
  --border:     rgba(255,255,255,0.12);
  --text:       #f3f4f6;
  --text-2:     #d1d5db;
  --text-3:     #9ca3af;
  --accent:     #fbbf24;
  --accent-2:   #f59e0b;
  --sky:        #7dd3fc;
}

/* ── Reset ── */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:#11151b; font-family:'Segoe UI',sans-serif; overflow:hidden; }
canvas { display:block; }

/* ══════════════════════════════════════
   TOOLBAR
══════════════════════════════════════ */
#toolbar {
  position:fixed; top:0; left:0; right:0; height:56px;
  background:var(--panel); border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; gap:5px; padding:0 14px; z-index:10;
  backdrop-filter:blur(8px);
}
#toolbar h1 { color:var(--text); font-size:1rem; margin-right:6px; white-space:nowrap; letter-spacing:.03em; }

#level-badge {
  background:rgba(126,200,227,0.15); border:1px solid rgba(126,200,227,0.35);
  color:var(--sky); font-size:0.75rem; font-weight:700; padding:3px 9px;
  border-radius:20px; margin-right:6px; white-space:nowrap;
}

.tool-btn {
  display:flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:7px; cursor:pointer;
  font-size:0.78rem; font-weight:500; white-space:nowrap;
  border:1.5px solid transparent; transition:all .15s;
}
.tool-btn:hover { filter:brightness(1.2); transform:translateY(-1px); }
.tool-btn:active { transform:translateY(0); }

.tool-btn[data-tool="residential"]        { background:rgba(74,144,217,0.15); border-color:rgba(74,144,217,0.4); color:var(--sky); }
.tool-btn[data-tool="residential"].active { background:rgba(74,144,217,0.35); border-color:#4a90d9; color:#fff; }
.tool-btn[data-tool="commercial"]         { background:rgba(243,156,18,0.15); border-color:rgba(243,156,18,0.4); color:#f5b942; }
.tool-btn[data-tool="commercial"].active  { background:rgba(243,156,18,0.35); border-color:#f39c12; color:#fff; }
.tool-btn[data-tool="industrial"]         { background:rgba(142,68,173,0.15); border-color:rgba(142,68,173,0.4); color:#c39bd3; }
.tool-btn[data-tool="industrial"].active  { background:rgba(142,68,173,0.35); border-color:#8e44ad; color:#fff; }
.tool-btn[data-tool="road"]               { background:rgba(120,120,120,0.15); border-color:rgba(150,150,150,0.35); color:#bbb; }
.tool-btn[data-tool="road"].active        { background:rgba(150,150,150,0.3); border-color:#aaa; color:#fff; }
.tool-btn[data-tool="power"]              { background:rgba(241,196,15,0.15); border-color:rgba(241,196,15,0.4); color:#f4d03f; }
.tool-btn[data-tool="power"].active       { background:rgba(241,196,15,0.35); border-color:#f1c40f; color:#fff; }
.tool-btn[data-tool="demolish"]           { background:rgba(192,57,43,0.12); border-color:rgba(192,57,43,0.4); color:#e74c3c; }
.tool-btn[data-tool="demolish"].active    { background:rgba(192,57,43,0.35); border-color:#e74c3c; color:#fff; }

.tool-btn[data-tool="school"]             { background:rgba(26,188,156,0.15); border-color:rgba(26,188,156,0.4); color:#1abc9c; }
.tool-btn[data-tool="school"].active      { background:rgba(26,188,156,0.35); border-color:#1abc9c; color:#fff; }
.tool-btn[data-tool="park"]               { background:rgba(39,174,96,0.15); border-color:rgba(39,174,96,0.4); color:#2ecc71; }
.tool-btn[data-tool="park"].active        { background:rgba(39,174,96,0.35); border-color:#27ae60; color:#fff; }
.tool-btn[data-tool="government"]         { background:rgba(192,57,43,0.12); border-color:rgba(192,57,43,0.35); color:#e08080; }
.tool-btn[data-tool="government"].active  { background:rgba(192,57,43,0.3); border-color:#c0392b; color:#fff; }
.tool-btn[data-tool="police"]             { background:rgba(36,113,163,0.15); border-color:rgba(36,113,163,0.4); color:#5dade2; }
.tool-btn[data-tool="police"].active      { background:rgba(36,113,163,0.35); border-color:#2471a3; color:#fff; }
.tool-btn[data-tool="fire"]               { background:rgba(231,76,60,0.15); border-color:rgba(231,76,60,0.4); color:#ff8a80; }
.tool-btn[data-tool="fire"].active        { background:rgba(231,76,60,0.35); border-color:#e74c3c; color:#fff; }

.sep { width:1px; height:28px; background:rgba(255,255,255,0.08); margin:0 3px; }
#tax-wrap { display:flex; align-items:center; gap:6px; margin-left:6px; }
#tax-wrap label { color:var(--text-2); font-size:0.78rem; }
#tax-rate {
  width:46px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15);
  color:#fff; border-radius:5px; padding:3px 5px; font-size:0.78rem; text-align:center;
}

/* ══════════════════════════════════════
   HUD
══════════════════════════════════════ */
#hud {
  position:fixed; bottom:14px; left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid rgba(255,255,255,0.09);
  border-radius:30px; padding:9px 24px; display:flex; gap:20px; z-index:10;
  backdrop-filter:blur(8px);
}
.stat { color:#eee; font-size:0.82rem; display:flex; align-items:center; gap:3px; white-space:nowrap; }
.stat span { color:var(--sky); font-weight:700; }
.stat.money span { color:#2ecc71; }
.stat.power span { color:#f1c40f; }
.stat.happy span { color:#e67e22; }
.goal-suffix { color:rgba(126,200,227,0.5) !important; font-weight:400 !important; font-size:0.75rem; }
.hud-sep { width:1px; height:18px; background:rgba(255,255,255,0.12); margin:0 2px; }
.stat.svc { font-size:0.78rem; }
.stat.school-stat span { color:#1abc9c; }
.stat.park-stat   span { color:#2ecc71; }
.stat.gov-stat    span { color:#e08080; }
.stat.police-stat span { color:#5dade2; }
.stat.fire-stat   span { color:#ff8a80; }

/* ══════════════════════════════════════
   ALERTS
══════════════════════════════════════ */
#alerts {
  position:fixed; top:64px; right:14px;
  display:flex; flex-direction:column; gap:6px; z-index:20;
}
.alert {
  padding:8px 13px; border-radius:7px; font-size:0.78rem; color:#fff;
  animation:fadeIn .25s ease; max-width:280px;
}
.alert.warn { background:rgba(192,57,43,0.92); border-left:3px solid #e74c3c; }
.alert.info { background:rgba(41,128,185,0.92); border-left:3px solid #5dade2; }
.alert.ok   { background:rgba(39,174,96,0.92);  border-left:3px solid #2ecc71; }
@keyframes fadeIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }

/* ══════════════════════════════════════
   TOOLTIP
══════════════════════════════════════ */
#tooltip {
  position:fixed; bottom:70px; left:50%; transform:translateX(-50%);
  background:var(--panel); border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; padding:10px 16px; z-index:15; pointer-events:none;
  display:none; min-width:180px; backdrop-filter:blur(8px);
}
#tooltip .tt-title { font-size:0.85rem; font-weight:700; margin-bottom:5px; }
#tooltip .tt-row   { font-size:0.75rem; color:#aaa; display:flex; justify-content:space-between; gap:16px; }
#tooltip .tt-row span { color:#eee; }
#tooltip.residential .tt-title { color:#4a90d9; }
#tooltip.commercial  .tt-title { color:#f39c12; }
#tooltip.industrial  .tt-title { color:#c39bd3; }
#tooltip.road        .tt-title { color:#aaa; }
#tooltip.power       .tt-title { color:#f1c40f; }
#tooltip.school      .tt-title { color:#1abc9c; }
#tooltip.park        .tt-title { color:#2ecc71; }
#tooltip.government  .tt-title { color:#e08080; }
#tooltip.police      .tt-title { color:#5dade2; }
#tooltip.fire        .tt-title { color:#ff8a80; }

/* ══════════════════════════════════════
   LEVEL SELECT
══════════════════════════════════════ */
#level-select {
  position:fixed; inset:0; background:var(--scrim);
  display:none; align-items:center; justify-content:center;
  z-index:150; backdrop-filter:blur(8px);
}
#level-select-card {
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:16px;
  padding:24px 28px; max-width:780px; width:96%; max-height:88vh;
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px rgba(0,0,0,0.65);
}
#level-select-card h2 { color:var(--text); font-size:1.3rem; margin-bottom:3px; flex-shrink:0; }
.ls-sub { color:var(--text-3); font-size:0.8rem; margin-bottom:14px; flex-shrink:0; }

/* Scrollable level grid area */
#level-grid {
  overflow-y:auto; flex:1; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
#level-grid::-webkit-scrollbar { width:5px; }
#level-grid::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }

/* Era section header */
.era-header {
  display:flex; align-items:center; gap:8px;
  font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:#aaa; margin:12px 0 6px;
}
.era-header:first-child { margin-top:0; }
.era-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.era-range { color:var(--text-3); font-weight:400; margin-left:2px; }

/* Era row — 10 cards per row */
.era-row {
  display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; margin-bottom:4px;
}

.lvl-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; padding:8px 4px; text-align:center; cursor:pointer;
  transition:all .15s;
}
.lvl-card:hover {
  background:rgba(255,255,255,0.12);
  border-color:var(--era-color, #5dade2);
  transform:translateY(-2px);
}
.lvl-card.current { border-color:#2ecc71; background:rgba(39,174,96,0.1); }
.lvl-card.locked  { opacity:0.5; cursor:not-allowed; }
.lvl-card.locked:hover { transform:none; background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.08); }
.lvl-num  { font-size:1rem; font-weight:700; color:#ddd; margin-bottom:2px; }
.lvl-name { font-size:0.58rem; color:var(--text-2); margin-bottom:3px; font-weight:500; line-height:1.2; min-height:1.8em; }
.lvl-goal { font-size:0.58rem; color:var(--sky); margin-bottom:3px; }
.lvl-diff { font-size:0.6rem; color:#f1c40f; letter-spacing:0; }

/* ══════════════════════════════════════
   LEVEL COMPLETE
══════════════════════════════════════ */
#level-complete {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  display:none; align-items:center; justify-content:center;
  z-index:100; backdrop-filter:blur(6px);
}
#lc-card {
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid rgba(46,204,113,0.3); border-radius:16px;
  padding:40px 48px; text-align:center; color:#fff;
  box-shadow:0 0 60px rgba(46,204,113,0.15);
  animation:popIn .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes popIn { from{transform:scale(0.9)} to{transform:scale(1)} }
#lc-title { font-size:2rem; margin-bottom:12px; }
#lc-sub   { color:var(--text-2); font-size:0.9rem; margin-bottom:24px; }
/* ══════════════════════════════════════
   LOADING SCREEN
══════════════════════════════════════ */
#loading {
  position:fixed; inset:0; background:var(--scrim);
  display:flex; align-items:center; justify-content:center;
  z-index:300; flex-direction:column; gap:16px;
}
#loading-card { text-align:center; color:#ddd; }
.loading-spinner {
  width:44px; height:44px; border-radius:50%;
  border:3px solid rgba(126,200,227,0.2);
  border-top-color:var(--sky);
  animation:spin .8s linear infinite;
  margin:0 auto 14px;
}
@keyframes spin { to { transform:rotate(360deg); } }
#loading-text { font-size:1rem; color:var(--sky); font-weight:600; }
#loading-sub  { font-size:0.75rem; color:var(--text-3); margin-top:4px; }

/* ══════════════════════════════════════
   WELCOME CARD
══════════════════════════════════════ */
#welcome {
  position:fixed; inset:0; background:var(--scrim);
  display:flex; align-items:center; justify-content:center;
  z-index:200; backdrop-filter:blur(8px);
}
#welcome-card {
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:16px;
  padding:28px 34px 20px; max-width:600px; width:92%; color:#ddd;
  box-shadow:0 24px 60px rgba(0,0,0,0.65);
}
#welcome-card h1 { font-size:1.75rem; color:var(--text); margin-bottom:3px; }
#welcome-card .subtitle { color:var(--text-3); font-size:0.82rem; margin-bottom:18px; }
#welcome-card h3 { font-size:0.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:14px 0 8px; }

.zone-pills { display:flex; flex-wrap:wrap; gap:6px; }
.zone-pill  { padding:4px 11px; border-radius:20px; font-size:0.74rem; font-weight:600; border:1px solid transparent; }
.zone-pill.res { background:rgba(74,144,217,0.18); border-color:rgba(74,144,217,0.4); color:var(--sky); }
.zone-pill.com { background:rgba(243,156,18,0.18);  border-color:rgba(243,156,18,0.4);  color:#f5b942; }
.zone-pill.ind { background:rgba(142,68,173,0.18);  border-color:rgba(142,68,173,0.4);  color:#c39bd3; }
.zone-pill.rd  { background:rgba(120,120,120,0.15); border-color:rgba(150,150,150,0.3); color:#bbb; }
.zone-pill.pw  { background:rgba(241,196,15,0.18);  border-color:rgba(241,196,15,0.4);  color:#f4d03f; }
.zone-pill.sc  { background:rgba(26,188,156,0.18);  border-color:rgba(26,188,156,0.4);  color:#1abc9c; }
.zone-pill.pk  { background:rgba(39,174,96,0.18);   border-color:rgba(39,174,96,0.4);   color:#2ecc71; }
.zone-pill.gv  { background:rgba(192,57,43,0.15);   border-color:rgba(192,57,43,0.4);   color:#e08080; }
.zone-pill.po  { background:rgba(36,113,163,0.18);  border-color:rgba(36,113,163,0.4);  color:#5dade2; }
.zone-pill.fi  { background:rgba(231,76,60,0.15);   border-color:rgba(231,76,60,0.4);   color:#ff8a80; }

.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rule-item  { display:flex; gap:9px; align-items:flex-start; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:8px; padding:9px 11px; font-size:0.77rem; line-height:1.45; }
.rule-icon  { font-size:1.05rem; flex-shrink:0; margin-top:1px; }
.rule-text  { color:var(--text-2); }
.rule-text strong { display:block; color:#ddd; font-size:0.79rem; margin-bottom:1px; }

.win-cond {
  margin-top:14px; background:rgba(39,174,96,0.1); border:1px solid rgba(39,174,96,0.25);
  border-radius:8px; padding:10px 13px; font-size:0.78rem; color:#82e0aa;
  display:flex; align-items:center; gap:8px;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn-primary {
  padding:10px 22px; cursor:pointer; font-size:0.9rem; font-weight:600;
  background:linear-gradient(135deg, var(--accent), var(--accent-2)); border:1px solid var(--accent);
  border-radius:9px; color:#1a1300; transition:all .15s; white-space:nowrap;
}
.btn-primary:hover { filter:brightness(1.15); transform:translateY(-1px); }
.btn-ghost {
  padding:9px 16px; cursor:pointer; font-size:0.82rem; background:none;
  border:1px solid rgba(255,255,255,0.22); color:var(--text-2); border-radius:8px; transition:all .15s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn-small {
  margin-top:8px; padding:5px 11px; cursor:pointer; font-size:0.74rem; font-weight:600;
  background:rgba(93,173,226,0.18); border:1px solid rgba(93,173,226,0.5);
  color:#bfe3f5; border-radius:6px;
}
.btn-small:hover { background:rgba(93,173,226,0.32); }

/* ══════════════════════════════════════
   GUIDE (welcome / how to play)
══════════════════════════════════════ */
.guide-step { display:none; animation:fadeUp .3s ease; min-height:330px; }
.guide-step.active { display:block; }
@keyframes fadeUp { from{transform:translateY(8px)} to{transform:none} }
.guide-hero { font-size:2.6rem; margin-bottom:6px; }
.guide-step h2 { color:var(--text); font-size:1.25rem; margin-bottom:10px; }
.guide-step p { color:var(--text-2); font-size:0.86rem; line-height:1.55; margin-bottom:10px; }
.guide-step p b { color:#fff; }
.guide-note { font-size:0.78rem !important; color:var(--text-3) !important; }
.era-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin:6px 0 12px; }
.era-chip {
  border:1px solid var(--c); border-radius:8px; padding:8px 4px; text-align:center;
  background:color-mix(in srgb, var(--c) 14%, transparent);
}
.era-chip b { display:block; color:#fff; font-size:0.74rem; }
.era-chip span { color:#aaa; font-size:0.66rem; }
.mini-grid { display:grid; grid-template-columns:repeat(9, 22px); gap:3px; margin:10px 0; }
.mini-grid div { width:22px; height:22px; border-radius:4px; background:rgba(255,255,255,0.06); }
.mini-grid .lit { background:rgba(241,196,15,0.35); }
.mini-grid .plant { background:#f1c40f; box-shadow:0 0 10px rgba(241,196,15,0.8); }
.badge-demo { display:inline-block; background:#e74c3c; border-radius:50%; width:18px; height:18px; text-align:center; font-size:0.7rem; line-height:18px; }
.eff-table { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:12px 0; }
.eff-table div { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:8px; padding:8px; text-align:center; font-size:0.78rem; color:#aaa; }
.eff-table b { display:block; font-size:1.1rem; color:#f1c40f; margin-top:2px; }
.eff-table b.ok { color:#2ecc71; } .eff-table b.bad { color:#e74c3c; }
.svc-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.svc-list div { font-size:0.8rem; color:#aaa; background:rgba(255,255,255,0.04); border-radius:7px; padding:6px 10px; }
.svc-list span { margin-right:6px; } .svc-list b { color:#ddd; margin-right:4px; }
.zone-pills { margin-bottom:12px; }
#guide-nav { display:flex; align-items:center; gap:10px; margin-top:16px; }
#guide-dots { flex:1; display:flex; justify-content:center; gap:6px; }
#guide-dots button { width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,0.2); cursor:pointer; padding:0; }
#guide-dots button.active { background:var(--accent); width:22px; border-radius:5px; }

/* ══════════════════════════════════════
   LEVEL SELECT additions
══════════════════════════════════════ */
.ls-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-shrink:0; }
.ls-foot { display:flex; justify-content:space-between; align-items:center; margin-top:12px; flex-shrink:0; }
#ls-progress { color:var(--text-3); font-size:0.78rem; }
.lvl-card { position:relative; }
.lvl-card.done::after { content:'✓'; position:absolute; top:3px; right:6px; color:#2ecc71; font-size:0.75rem; font-weight:700; }
.lvl-card.next { border-color:#5dade2; box-shadow:0 0 0 1px #5dade2, 0 0 14px rgba(93,173,226,0.35); animation:pulse 1.8s ease-in-out infinite; }

/* ══════════════════════════════════════
   BRIEFING
══════════════════════════════════════ */
#briefing {
  position:fixed; inset:0; background:var(--scrim); display:none;
  align-items:center; justify-content:center; z-index:120; backdrop-filter:blur(4px);
}
#briefing-card {
  background:linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); border-radius:16px; padding:26px 30px;
  width:min(480px, 92vw); color:#ddd; box-shadow:0 24px 60px rgba(0,0,0,0.6);
  animation:popIn .3s ease;
}
#br-era { font-size:0.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
#br-name { font-size:1.6rem; font-weight:700; color:#fff; margin:2px 0 4px; }
#br-desc { color:var(--text-2); font-size:0.86rem; margin-bottom:6px; }
#briefing-card h3 { font-size:0.68rem; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); margin:14px 0 7px; }
#br-goals { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.br-goal { background:rgba(46,204,113,0.1); border:1px solid rgba(46,204,113,0.3); border-radius:8px; padding:8px 10px; font-size:0.8rem; color:var(--text-2); }
.br-goal b { display:block; color:#82e0aa; font-size:1.05rem; }
#br-rules { display:flex; flex-wrap:wrap; gap:6px; }
.br-rule { font-size:0.74rem; padding:4px 10px; border-radius:20px; background:rgba(243,156,18,0.12); border:1px solid rgba(243,156,18,0.35); color:#f5c26b; }
.br-rule.easy { background:rgba(255,255,255,0.05); border-color:rgba(255,255,255,0.12); color:#aaa; }
#br-hint { margin-top:14px; font-size:0.82rem; color:#bfe3f5; background:rgba(93,173,226,0.1); border-left:3px solid #5dade2; padding:9px 12px; border-radius:6px; }
.br-actions, .lc-actions { display:flex; justify-content:space-between; gap:10px; margin-top:18px; }

/* ══════════════════════════════════════
   LEVEL COMPLETE additions
══════════════════════════════════════ */
#lc-card { max-width:520px; }
#lc-stats { display:flex; justify-content:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
#lc-stats div { background:rgba(255,255,255,0.05); border-radius:8px; padding:8px 12px; font-size:0.75rem; color:#aaa; }
#lc-stats b { display:block; color:#fff; font-size:1rem; }

/* ══════════════════════════════════════
   SIDE PANEL: OBJECTIVES + ADVISOR
══════════════════════════════════════ */
#side-panel {
  position:fixed; top:66px; left:14px; width:272px; z-index:10;
  display:none; flex-direction:column; gap:10px;
}
#objectives, #advisor {
  background:var(--panel); border:1px solid rgba(255,255,255,0.09);
  border-radius:12px; padding:11px 14px; backdrop-filter:blur(6px);
}
.panel-head { display:flex; justify-content:space-between; align-items:center; color:var(--accent); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
#obj-info { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:0.9rem; }
.obj-row { margin-bottom:8px; }
.obj-row:last-child { margin-bottom:0; }
.obj-top { display:flex; justify-content:space-between; font-size:0.78rem; color:#ccc; margin-bottom:3px; }
.obj-top b { color:#fff; font-weight:600; }
.obj-row.met .obj-top b { color:#2ecc71; }
.obj-bar { height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.obj-fill { height:100%; background:linear-gradient(90deg,#2e86c1,#5dade2); border-radius:3px; transition:width .5s ease; }
.obj-row.met .obj-fill { background:linear-gradient(90deg,#27ae60,#2ecc71); }
#advisor { border-left:3px solid #5dade2; }
#advisor.warn { border-left-color:#e74c3c; }
#advisor.good { border-left-color:#2ecc71; }
#adv-step { color:#f1c40f; text-transform:none; letter-spacing:0; }
#adv-title { color:#fff; font-weight:700; font-size:0.9rem; margin-bottom:4px; }
#adv-text { color:var(--text-2); font-size:0.78rem; line-height:1.5; }
#advisor.flash { animation:flash .6s ease; }
@keyframes flash { 0%{box-shadow:0 0 0 0 rgba(93,173,226,0.7)} 100%{box-shadow:0 0 0 12px rgba(93,173,226,0)} }

/* Tool button the advisor is pointing at */
.tool-btn.nudge { animation:pulse 1.2s ease-in-out infinite; position:relative; }
.tool-btn.nudge::after {
  content:'👆'; position:absolute; bottom:-26px; left:50%; transform:translateX(-50%);
  font-size:1.1rem; animation:bob 1s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(93,173,226,0.0)} 50%{box-shadow:0 0 0 4px rgba(93,173,226,0.55)} }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,-5px)} }
.tool-btn.cant-afford { opacity:0.5; }

/* ══════════════════════════════════════
   TOOLBAR additions
══════════════════════════════════════ */
#tax-cap { color:var(--text-3); font-size:0.7rem; }
#menu-wrap { position:relative; margin-left:auto; }
#menu-btn { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.15); color:#ddd; border-radius:7px; width:34px; height:32px; cursor:pointer; font-size:1rem; }
#menu-btn:hover { border-color:var(--sky); }
#menu {
  position:absolute; right:0; top:40px; display:none; flex-direction:column; min-width:180px;
  background:var(--panel); border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
}
#menu.open { display:flex; }
#menu button { background:none; border:none; color:#ccc; text-align:left; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:0.82rem; }
#menu button:hover { background:rgba(126,200,227,0.12); color:#fff; }

/* ══════════════════════════════════════
   HUD additions
══════════════════════════════════════ */
#hud { align-items:center; padding:7px 20px 7px 10px; gap:16px; }
#time-ctrl { display:flex; gap:3px; }
#time-ctrl button { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:#ccc; border-radius:7px; width:30px; height:26px; cursor:pointer; font-size:0.78rem; }
#time-ctrl button.active { background:rgba(93,173,226,0.3); border-color:#5dade2; color:#fff; }
.stat.year { flex-direction:column; align-items:flex-start; gap:2px; }
#year-bar { width:58px; height:3px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
#year-fill { height:100%; width:0; background:#5dade2; }
.net { font-size:0.7rem; font-weight:600; }
.net.pos { color:#2ecc71 !important; } .net.neg { color:#e74c3c !important; }
#paused-tag {
  position:fixed; top:66px; left:50%; transform:translateX(-50%); z-index:11; display:none;
  background:rgba(241,196,15,0.92); color:#1a1a1a; font-weight:700; font-size:0.78rem;
  padding:5px 14px; border-radius:20px;
}
#tooltip { bottom:66px; }

/* ══════════════════════════════════════
   CURSOR INFO
══════════════════════════════════════ */
#cursor-info {
  position:fixed; z-index:25; pointer-events:none; display:none;
  background:var(--panel); border:1px solid rgba(255,255,255,0.14); border-radius:8px;
  padding:7px 10px; font-size:0.74rem; color:#ddd; max-width:240px; line-height:1.5;
}
#cursor-info b { color:#fff; }
#cursor-info .ok { color:#2ecc71; } #cursor-info .bad { color:#ff7b6b; } #cursor-info .dim { color:#888; }