/* ==========================================================================
   TRADING EMPIRE V2 — living world, "why?" panels, office & evolution views
   Same identity as the terminal: dark panels, cyan / green / red / amber / violet neon.
   ========================================================================== */

/* ---------- tooltips: sections ---------- */
.tt-sec { font: 700 9px var(--f-mono); letter-spacing: 0.22em; color: var(--accent); margin: 7px 0 2px; opacity: 0.85; }
.modal-why .why-body { font-size: 12.5px; }
.modal-why .why-body .tt-row { font-size: 12px; padding: 3px 0; }
.modal-why .why-body .tt-big { font-size: 22px; }
.why-k { color: var(--accent); letter-spacing: 0.2em; }
.hs[data-why] { cursor: pointer; }
.hs[data-why]:hover .hs-l { color: var(--accent); }

/* ---------- header: next big goal ---------- */
.goal { display: flex; flex-direction: column; gap: 2px; min-width: 128px; max-width: 190px; padding: 3px 9px; border: 1px solid var(--line2); border-radius: var(--r); background: var(--bg2); cursor: pointer; }
.goal-k { font: 700 8.5px var(--f-mono); letter-spacing: 0.2em; color: var(--dim); }
.goal-t { font: 700 11px var(--f-mono); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal-bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.goal-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--up)); transition: width 0.4s; }
.goal.ready { border-color: rgba(255, 211, 107, 0.6); }
.goal.ready .goal-t { color: var(--gold); }
.goal.ready .goal-bar i { background: var(--gold); }

/* ---------- foldable side cards ---------- */
.fold-h { cursor: pointer; user-select: none; }
.fold-t { display: inline-flex; align-items: center; gap: 6px; }
.fold-ic { font-style: normal; color: var(--mute); transition: transform 0.2s; display: inline-block; }
.side-card.folded > :not(.card-h) { display: none !important; }
.side-card.folded .fold-ic { transform: rotate(-90deg); }
.side-card.folded { padding-bottom: 4px; }
.pv-fx { color: var(--dim); margin-top: 4px; line-height: 1.3; }

/* ---------- news feed ---------- */
.news-filter { margin: -2px 0 6px; width: 100%; }
.news-filter button { flex: 1; padding: 3px 4px; font-size: 9px; }
.news-list { max-height: 360px; }
.news-odd { opacity: 0.55; }
.news-odd .ncat { color: var(--mute); }
.news-me { background: linear-gradient(90deg, rgba(167, 123, 255, 0.1), transparent); border-left: 2px solid var(--violet); padding-left: 6px; }
.news-me .ncat { color: var(--violet); }
.news-reg .ncat { color: var(--amber); }
.news-confirm .ncat { color: var(--up); }
.news-deny .ncat { color: var(--down); }
.news-hit { box-shadow: inset 2px 0 0 var(--amber); }
.ntag.me { color: var(--violet); }
.ntag.hit.soon { color: var(--amber); border-style: dashed; }
.ntag.hit.now { color: #05070b; background: var(--amber); border-color: var(--amber); animation: blink 0.5s steps(2) 4; }

/* ---------- calendar ---------- */
.cal-list { display: flex; flex-direction: column; gap: 5px; }
.cal { border: 1px solid var(--line2); border-radius: var(--r); padding: 5px 7px; background: var(--bg2); }
.cal.clickable { cursor: pointer; }
.cal.clickable:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.cal-h { display: flex; align-items: center; gap: 6px; font: 700 11px var(--f-mono); }
.cal-h b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-i { color: var(--accent); }
.cal-t { color: var(--dim); white-space: nowrap; }
.cal-t.soon { color: var(--amber); animation: blink 1s steps(2) infinite; }
.cal-x { color: var(--dim); margin-top: 2px; }

/* ---------- world card ---------- */
.wd-row { display: grid; grid-template-columns: 86px 1fr auto; gap: 8px; align-items: center; font: 10.5px var(--f-mono); padding: 3px 0; cursor: help; }
.wd-l { font-weight: 700; letter-spacing: 0.12em; color: var(--dim); font-size: 9.5px; }
.wd-row b { white-space: nowrap; }
.wd-bar { height: 6px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.wd-bar i { display: block; height: 100%; width: 0; transition: width 0.4s; }
.wd-bar.att i { background: linear-gradient(90deg, var(--accent), var(--violet)); }
.wd-bar.reg i { background: var(--up); }
.wd-bar.reg i.mid { background: var(--amber); }
.wd-bar.reg i.hi { background: var(--down); box-shadow: 0 0 8px var(--down); }
.wd-note { margin-top: 4px; line-height: 1.35; }

/* ---------- order entry: impact & liquidity ---------- */
.op-impact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: 11px var(--f-mono); color: var(--dim); padding: 5px 7px; border-radius: var(--r); background: var(--bg2); border: 1px solid var(--line); cursor: help; }
.op-impact .op-lbl { min-width: 0; }
.op-impact em { flex-basis: 100%; font-style: normal; font-size: 10.5px; }
.imp { font-weight: 700; letter-spacing: 0.08em; padding: 0 5px; border-radius: 3px; border: 1px solid currentColor; }
.imp-lo { color: var(--up); }
.imp-mid { color: var(--amber); }
.imp-hi { color: var(--down); box-shadow: 0 0 10px rgba(255, 61, 104, 0.35); }
.mk-liq { display: inline-flex; align-items: center; gap: 6px; font: 700 9.5px var(--f-mono); letter-spacing: 0.12em; color: var(--dim); cursor: help; }
.lq-bar { width: 54px; height: 5px; border-radius: 5px; background: var(--bg2); border: 1px solid var(--line); overflow: hidden; }
.lq-bar i { display: block; height: 100%; background: var(--up); transition: width 0.4s; }
.lq-bar i.mid { background: var(--amber); }
.lq-bar i.lo { background: var(--down); }
details.adv { border-top: 1px solid var(--line); padding-top: 6px; }
details.adv > summary { cursor: pointer; list-style: none; color: var(--dim); }
details.adv > summary::before { content: '▸ '; }
details.adv[open] > summary::before { content: '▾ '; }
details.adv[open] { display: flex; flex-direction: column; gap: 6px; }

/* ---------- market actors (desk card) ---------- */
.actors { padding: 7px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); cursor: help; font: 10.5px var(--f-mono); }
.ac-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.ac-net { font-weight: 700; letter-spacing: 0.1em; }
.ac-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.ac-bar i { display: block; height: 100%; transition: width 0.6s; }
.ac-bar i.s { background: linear-gradient(90deg, var(--down), rgba(255, 61, 104, 0.45)); }
.ac-bar i.l { background: linear-gradient(90deg, rgba(25, 245, 140, 0.45), var(--up)); }
.ac-top { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; color: var(--dim); }
.ac-g { border-left: 2px solid var(--gc); padding-left: 5px; }
.ac-risk { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.rk { font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--amber); color: var(--amber); }
.rk.hot { color: #05070b; background: var(--amber); animation: blink 0.8s steps(2) infinite; }
.ac-camp { color: var(--amber); margin-top: 4px; }

/* ---------- micro tutorials ---------- */
#tipcards { position: fixed; left: calc(var(--nav-w) + 14px); bottom: 36px; z-index: 9150; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 340px; }
.tipcard {
  pointer-events: auto; padding: 11px 13px; border-radius: 8px; border: 1px solid rgba(var(--accent-rgb), 0.65);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(10, 15, 22, 0.97) 60%); box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.25), 0 12px 30px rgba(0, 0, 0, 0.6);
  transform: translateX(-30px); opacity: 0; transition: 0.35s cubic-bezier(.2, 1.2, .3, 1);
}
.tipcard.in { transform: none; opacity: 1; }
.tipcard.out { opacity: 0; transform: translateY(10px); }
.tc-k { font: 700 9px var(--f-mono); letter-spacing: 0.3em; color: var(--accent); }
.tc-t { font: 700 13px var(--f-disp); letter-spacing: 0.08em; color: #fff; margin: 2px 0 4px; }
.tc-x { font-size: 12px; color: var(--text); margin-bottom: 8px; line-height: 1.45; }

/* ---------- effective gain lines (upgrades, research, staff…) ---------- */
.gain { display: inline-block; font: 600 10.5px var(--f-mono); color: var(--up); cursor: help; }
.gain.sat { color: var(--amber); }
.gain i { font-style: normal; color: var(--dim); }
.upg .gain, .item .gain { margin-top: 2px; }
.upg-filters { display: flex; flex-wrap: wrap; gap: 6px; }
/* inside the node (nodes clip their overflow), on the cost line: "15 RP ……… ★ RECOMMANDÉ" */
.rec-badge { position: absolute; right: 6px; bottom: 6px; font: 700 9px/1.4 var(--f-mono); letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; background: var(--gold); color: #05070b; box-shadow: 0 0 8px rgba(255, 211, 107, 0.45); z-index: 2; white-space: nowrap; }
.rnode.rec { box-shadow: 0 0 0 1px var(--gold), 0 0 16px rgba(255, 211, 107, 0.35); }
.legend.away { opacity: 0.6; border-style: dashed; }

/* ---------- bots: exposure ---------- */
.bc-expo { display: flex; flex-wrap: wrap; gap: 3px 10px; font: 10.5px var(--f-mono); color: var(--dim); min-height: 15px; }
.bc-expo b { font-weight: 600; }
.expo-tbl td:first-child { font-weight: 700; }

/* ---------- fund: flows with reasons ---------- */
.flow.out b { color: var(--down) !important; }
.flow-why { grid-column: 2 / -1; font-size: 10px; color: var(--dim); margin-top: -2px; }
.fund-notes { display: flex; flex-direction: column; gap: 2px; font: 10.5px var(--f-mono); margin-top: 6px; }
.fund-notes .fn { display: flex; justify-content: space-between; gap: 10px; }

/* ---------- empire: rivals ---------- */
.rv-state { font: 700 9.5px var(--f-mono); letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; border: 1px solid currentColor; margin-left: 6px; }
.rv-state.trouble { color: var(--gold); }
.rv-state.campaign { color: var(--amber); }
.vc-prof { font-size: 10.5px; color: var(--dim); margin: 2px 0; }

/* ==========================================================================
   OFFICE (isometric HQ)
   ========================================================================== */
.view-office { display: flex; flex-direction: column; gap: 10px; }
.of-wrap { position: relative; height: calc(100vh - 205px); min-height: 420px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--accent-rgb), 0.08), transparent 65%), #020306; }
.of-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.of-canvas.hover { cursor: pointer; }
.of-hud { position: absolute; left: 10px; top: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.of-title { pointer-events: auto; padding: 8px 12px; border-radius: var(--r); background: rgba(6, 9, 14, 0.82); border: 1px solid var(--line2); backdrop-filter: blur(4px); }
.of-title .k { font: 700 9px var(--f-mono); letter-spacing: 0.28em; color: var(--accent); }
.of-title b { display: block; font: 700 17px var(--f-disp); letter-spacing: 0.08em; color: #fff; }
.of-title span { font-size: 11px; color: var(--dim); }
.of-side { pointer-events: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.of-chip { padding: 4px 9px; border-radius: 20px; background: rgba(6, 9, 14, 0.82); border: 1px solid var(--line2); font: 600 10.5px var(--f-mono); color: var(--dim); white-space: nowrap; }
.of-chip b { color: var(--text); }
.of-chip.alert { border-color: var(--down); color: var(--down); animation: blink 1s steps(2) infinite; }
.of-btns { display: flex; gap: 6px; }
.of-zone-tip { position: absolute; pointer-events: none; padding: 6px 9px; border-radius: var(--r); background: rgba(6, 9, 14, 0.92); border: 1px solid rgba(var(--accent-rgb), 0.6); font: 600 11px var(--f-mono); color: #fff; transform: translate(-50%, -120%); white-space: nowrap; z-index: 3; }
.of-zone-tip span { display: block; font-weight: 400; font-size: 10px; color: var(--dim); }
.of-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.of-role { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); font: 11px var(--f-mono); cursor: pointer; }
.of-role:hover { border-color: rgba(var(--accent-rgb), 0.5); }
.of-role i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.of-role b { margin-left: auto; color: #fff; }
.of-legend { border-color: rgba(255, 211, 107, 0.45); }
.of-next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.of-next .btn-buy { width: auto; min-width: 260px; margin-top: 0; }
.of-dissolve { position: fixed; inset: 0; z-index: 8700; pointer-events: none; }

/* ==========================================================================
   EVOLUTION (ascension)
   ========================================================================== */
.ev-hero { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ev-kpi { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(0, 0, 0, 0.25); }
.ev-kpi span { display: block; font: 600 9px var(--f-mono); letter-spacing: 0.16em; color: var(--dim); text-transform: uppercase; }
.ev-kpi b { font: 700 18px var(--f-mono); }
.ev-kpi small { display: block; color: var(--dim); font: 10.5px var(--f-mono); }
.ev-path { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.ev-stage { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; transition: 0.2s; }
.ev-stage canvas { width: 100%; height: auto; aspect-ratio: 220 / 120; display: block; border-radius: 4px; background: #020306; }
.ev-stage .es-n { font: 700 9.5px var(--f-mono); letter-spacing: 0.12em; color: var(--dim); }
.ev-stage .es-t { font: 600 11.5px var(--f-disp); letter-spacing: 0.04em; color: var(--text); line-height: 1.2; }
.ev-stage .es-s { font: 10px var(--f-mono); color: var(--dim); }
.ev-stage.done { border-color: rgba(var(--accent-rgb), 0.45); }
.ev-stage.done .es-n { color: var(--accent); }
.ev-stage.cur { border-color: var(--gold); box-shadow: 0 0 18px rgba(255, 211, 107, 0.25); }
.ev-stage.cur .es-n { color: var(--gold); }
.ev-stage.locked { opacity: 0.45; }
.ev-stage.locked canvas { filter: grayscale(1) brightness(0.45); }
.ev-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; }
.tl { position: relative; padding-left: 14px; max-height: 520px; overflow-y: auto; }
.tl::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, var(--accent), var(--line2)); }
.tl-e { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 4px 0; font: 11.5px var(--f-mono); animation: actIn 0.3s ease-out; }
.tl-e::before { content: ''; position: absolute; left: -13px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--panel); border: 1px solid var(--accent); }
.tl-e.t-ere::before { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tl-e.t-argent::before { border-color: var(--up); }
.tl-e.t-prestige::before, .tl-e.rec::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }
.tl-e.t-crise::before { border-color: var(--down); }
.tl-e.t-monde::before { border-color: var(--violet); }
.tl-t { color: var(--dim); }
.tl-x b { color: #fff; font-weight: 600; }
.tl-x .rec { color: var(--gold); font-size: 10px; margin-left: 6px; }
.cmp { width: 100%; border-collapse: collapse; font: 11.5px var(--f-mono); }
.cmp th { text-align: left; font-size: 9.5px; letter-spacing: 0.12em; color: var(--dim); padding: 4px 6px; border-bottom: 1px solid var(--line2); }
.cmp td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.cmp td.best { color: var(--gold); }
.cmp td.faster { color: var(--up); }
.cmp td.slower { color: var(--down); }
.mem-list { display: flex; flex-direction: column; gap: 4px; font: 11.5px var(--f-mono); }
.mem-list div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 3px 0; }
.mem-list span { color: var(--dim); }
.runs-bars { display: flex; align-items: flex-end; gap: 4px; height: 80px; padding-top: 6px; }
.runs-bars i { flex: 1; min-width: 6px; background: linear-gradient(180deg, var(--gold), rgba(255, 182, 39, 0.25)); border-radius: 2px 2px 0 0; position: relative; }
.runs-bars i.l2 { background: linear-gradient(180deg, var(--violet), rgba(167, 123, 255, 0.25)); }
.runs-bars i.l3 { background: linear-gradient(180deg, var(--magenta), rgba(255, 79, 216, 0.25)); }
.ev-next { border-color: rgba(255, 211, 107, 0.5); background: radial-gradient(circle at 100% 0%, rgba(255, 211, 107, 0.12), transparent 50%), var(--panel); }
.ev-next h3 { font: 700 18px var(--f-disp); letter-spacing: 0.06em; margin: 2px 0 4px; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1599px) { .goal { max-width: 150px; min-width: 110px; } }
@media (max-width: 1380px) { .goal { display: none; } }
@media (max-width: 1000px) {
  .ev-path { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ev-cols { grid-template-columns: 1fr; }
  .of-wrap { height: 62vh; min-height: 340px; }
}
@media (max-width: 760px) {
  .ev-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* phones: toasts live at the bottom and banners at the top, so the tips sit just below the banners */
  #tipcards { left: 8px; right: 8px; top: 172px; bottom: auto; max-width: none; }
  .banner { width: calc(100vw - 16px); box-sizing: border-box; padding: 8px 12px; }
  .banner-k { letter-spacing: 0.2em; }
  .banner-t { font-size: 17px; letter-spacing: 0.08em; }
  .banner-s { font-size: 11px; }
  .of-wrap { height: 56vh; min-height: 300px; }
  .of-title b { font-size: 14px; }
  .of-side { display: none; }
}
/* boot screen on phones: the logo used to be wider than the screen */
@media (max-width: 520px) {
  .boot-inner { width: 100%; max-width: 100vw; padding: 16px; box-sizing: border-box; }
  .boot-logo { font-size: clamp(20px, 7.4vw, 34px); letter-spacing: 0.08em; gap: 8px; flex-wrap: wrap; }
  .boot-tag { font-size: 11px; letter-spacing: 0.35em; }
  .boot-sub, .boot-foot { overflow-wrap: anywhere; }
  .boot-lines { font-size: 10.5px; }
  .boot-enter { max-width: 100%; padding: 14px 16px; font-size: 13px; letter-spacing: 0.14em; white-space: nowrap; }
}