:root{
  --bg0:#081a2e;
  --bg1:#0e2c4a;
  --bg2:#13406b;
  --panel:rgba(14,38,63,.82);
  --panel2:rgba(9,27,46,.72);
  --line:rgba(140,190,225,.18);
  --line2:rgba(140,190,225,.35);
  --text:#e9f2f7;
  --dim:#9db8cc;
  --gold:#e8c06a;
  --gold2:#f5d998;
  --teal:#3fd6b0;
  --coral:#ff8f6b;
  --red:#ff6b6b;
  --green:#8ce09a;
  --blue:#7cc4ff;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(63,214,176,.10), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(124,196,255,.12), transparent 60%),
    linear-gradient(160deg,var(--bg1),var(--bg0) 55%,#06121f);
  overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100vh}
/* ---------- TOP BAR ---------- */
#topbar{
  display:flex;align-items:center;gap:14px;
  padding:8px 14px;
  background:linear-gradient(180deg,rgba(6,20,36,.95),rgba(10,32,56,.9));
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.brand-title{
  font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:2px;
  color:var(--gold);
  text-shadow:0 2px 8px rgba(232,192,106,.35);
}
.brand-sub{font-size:10px;letter-spacing:3px;color:var(--dim);text-transform:uppercase}
.era-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--serif);font-size:15px;font-weight:600;
  padding:7px 14px;border-radius:20px;
  background:rgba(255,255,255,.08);border:1px solid var(--line2);
  white-space:nowrap;
}
.era-badge .year{color:var(--gold2);font-weight:700}
.era-badge-art{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  background:rgba(255,255,255,.06) center/cover no-repeat;
  border:1px solid var(--line2);position:relative;
}
.era-badge-art::after{
  content:"";position:absolute;inset:0;border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.era-badge-art.loaded{border-color:rgba(255,255,255,.25)}
.resources{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:center}
.res-chip{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:14px;padding:4px 10px;font-size:13px;
  min-width:74px;justify-content:center;
}
.res-chip .ico{font-size:15px}
.res-chip .val{font-weight:700}
.res-chip.low .val{color:var(--red)}
.res-chip .delta{font-size:10px;color:var(--dim);margin-left:2px}
.top-actions{display:flex;gap:8px;align-items:center}
.speed-sel{
  background:rgba(255,255,255,.07);color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  font-size:13px;padding:8px 8px;cursor:pointer;outline:none;
}
.speed-sel:hover{border-color:var(--line2)}
.speed-sel option{background:#122438;color:var(--text)}
.btn-next{
  font-family:var(--serif);font-size:15px;font-weight:700;
  background:linear-gradient(180deg,var(--gold2),var(--gold));
  color:#3a2a05;border:none;border-radius:18px;
  padding:9px 18px;cursor:pointer;box-shadow:var(--shadow);
  transition:transform .08s, box-shadow .15s;
}
.btn-next:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(232,192,106,.35)}
.btn-next:active{transform:translateY(1px)}
.btn-next .key{
  display:inline-block;font-size:12px;background:rgba(0,0,0,.15);
  border-radius:6px;padding:1px 6px;margin-left:6px;
}
.btn-next:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ghost{
  background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--line);
  border-radius:14px;width:38px;height:38px;font-size:17px;cursor:pointer;
}
.ghost:hover{color:var(--text);border-color:var(--line2)}
/* ---------- MAIN ---------- */
#main{display:flex;flex:1 1 auto;min-height:0}
#map-col{
  flex:0 0 320px;min-width:280px;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:10px;
  background:rgba(6,18,32,.4);
  overflow:hidden;
}
#map-title{
  font-family:var(--serif);font-size:14px;letter-spacing:2px;color:var(--gold);
  text-align:center;padding-bottom:6px;text-transform:uppercase;
}
#map-svg{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#map-svg svg{max-height:100%;max-width:100%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.isle{transition:opacity .3s}
.isle .blob{cursor:pointer;transition:transform .15s, opacity .2s;stroke-linejoin:round}
.isle .blob:hover{transform:scale(1.08);filter:brightness(1.15)}
.isle.selected .blob{stroke:var(--gold)!important;stroke-width:4px}
.isle.locked{opacity:.5}
.isle.locked .blob{cursor:not-allowed}
.isle .town{opacity:0;transition:opacity .3s}
.isle.has-town .town{opacity:1}
.isle .ind-badge{opacity:0}
.isle.has-industry .ind-badge{opacity:1}
.isle-name{
  font-size:9.5px;fill:#cfe3f2;text-anchor:middle;letter-spacing:1px;
  pointer-events:none;
}
.isle-name.locked{fill:#6b8296}
#map-legend{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  font-size:10.5px;color:var(--dim);padding:6px 0 2px;
}
#map-legend .lg{display:flex;align-items:center;gap:5px}
#map-legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
/* ---------- 3D GAMEBOARD ---------- */
#map-col.board3d{flex:1 1 58%;min-width:400px;padding:0;border-right:1px solid var(--line);position:relative}
#map-col.board3d #map-title,#map-col.board3d #map-svg,#map-col.board3d #map-legend{display:none}
#map-col.board3d + #content-col{flex:0 0 42%;min-width:420px}
#board-host{position:absolute;inset:0;overflow:hidden;background:#0d2f52}
#board-host canvas{display:block}
#board-host .flag-label{
  font-family:var(--serif);color:#ffd98a;font-size:12.5px;letter-spacing:.6px;
  text-shadow:0 1px 3px rgba(0,20,40,.95),0 0 12px rgba(0,30,60,.7);
  white-space:nowrap;pointer-events:none;user-select:none;
  transform:translate(-50%,-50%);background:rgba(8,26,48,.5);
  padding:3px 10px;border-radius:999px;border:1px solid rgba(255,217,138,.25);
}
#board-host .bl-label{
  font-family:var(--serif);color:#eaf6ff;font-size:11px;letter-spacing:.5px;
  text-shadow:0 1px 3px rgba(0,20,40,.9),0 0 10px rgba(0,30,60,.55);
  white-space:nowrap;pointer-events:none;user-select:none;transform:translate(-50%,-50%);
}
#board-host .bl-label .bl-pop{
  display:inline-block;margin-left:5px;padding:0 6px;border-radius:8px;
  background:rgba(8,26,44,.6);color:#ffd76b;font-size:10px;letter-spacing:0;
}
#board-host .bl-label.locked{color:#8fa8b8;font-size:10px}
#board-host .bl-label .bl-lock{font-size:9px;opacity:.75}
#board-host .bl-star{color:#7cc4ff}
#board-host .bl-star2{color:#ffd76b;font-size:24px;text-shadow:0 0 12px rgba(255,215,107,.9);transform:translate(-50%,-50%)}
#board-host .bl-ind{font-size:17px;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.7))}
#board-host .bl-count{
  background:rgba(8,18,28,.82);border:1px solid rgba(232,192,106,.4);
  border-radius:12px;padding:2px 6px 2px 4px;
  font:600 11px/1 sans-serif;color:#fff;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.5);transform:translate(-50%,-50%);
}
#board-host .bl-count-num{
  display:inline-block;min-width:15px;height:15px;line-height:15px;
  border-radius:50%;background:#e8b64a;color:#241a05;text-align:center;
  margin-left:4px;padding:0 3px;font:700 10px/15px sans-serif;
}
/* ---------- CONTENT ---------- */
#content-col{flex:1;display:flex;flex-direction:column;min-width:0}
#tabs{display:flex;gap:4px;padding:8px 12px 0;flex:0 0 auto}
.tab{
  font-family:var(--serif);font-size:13.5px;letter-spacing:.5px;
  background:transparent;color:var(--dim);border:1px solid transparent;
  border-bottom:none;padding:9px 16px;cursor:pointer;border-radius:12px 12px 0 0;
}
.tab:hover{color:var(--text)}
.tab.active{
  background:var(--panel);color:var(--gold);border-color:var(--line);
}
.tabpage{display:none;flex:1;min-height:0;padding:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bg2) transparent}
.tabpage.active{display:flex;gap:12px;flex-direction:row}
#tab-overview{flex-wrap:wrap}
#turn-income{flex:0 0 100%;min-width:0}
#turn-income .panel-card{width:100%}
.tabpage.active.col{flex-direction:column}
/* ---------- ISLANDS OVERVIEW ---------- */
#island-list{flex:0 0 168px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px}
.isle-card{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:8px 10px;cursor:pointer;transition:border-color .15s, background .15s;
}
.isle-card:hover{border-color:var(--line2)}
.isle-card.selected{border-color:var(--gold);background:rgba(232,192,106,.10)}
.isle-card.locked{opacity:.45;cursor:not-allowed}
.isle-card .ic-name{font-family:var(--serif);font-weight:700;font-size:14px}
.isle-card .ic-meta{font-size:11px;color:var(--dim);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.isle-card .ic-ind{font-size:10px;color:var(--teal);margin-top:3px}
#island-panel{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.panel-card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;
}
.panel-card h3{
  font-family:var(--serif);font-size:15px;color:var(--gold);
  margin-bottom:6px;letter-spacing:.5px;
}
.panel-card h3 .sub{font-size:11px;color:var(--dim);font-family:var(--sans);font-weight:400}
.stat-row{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;margin-top:6px}
.stat-pill{
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:10px;padding:4px 9px;
}
.stat-pill b{color:var(--gold2)}
.inc.pos{color:var(--green)}
.inc.neg{color:var(--red)}
.inc-sub{display:block;font-size:10px;color:var(--dim);font-weight:400}
.inc-note{font-size:10.5px;color:var(--dim);margin-top:6px;line-height:1.4}
.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px;margin-top:8px}
.build-card{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:8px 10px;position:relative;display:flex;flex-direction:column;gap:4px;
}
.build-card .bc-name{font-weight:600;font-size:13px}
.build-card .bc-name .ico{margin-right:5px}
.build-card .bc-desc{font-size:10.5px;color:var(--dim);line-height:1.35;flex:1}
.build-card .bc-eff{font-size:11px;color:var(--teal);display:flex;gap:7px;flex-wrap:wrap;font-weight:600}
.build-card .bc-eff .neg{color:var(--red,#d46a5a)}
.build-card .bc-cost{font-size:10.5px;color:var(--gold2);display:flex;gap:7px;flex-wrap:wrap}
.build-card .bc-count{position:absolute;top:6px;right:8px;font-size:11px;color:var(--teal);font-weight:700}
.build-card button{
  margin-top:6px;font-size:12.5px;font-weight:600;border:none;border-radius:9px;
  padding:5px 8px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a05;
}
.build-card button:disabled{background:rgba(255,255,255,.12);color:var(--dim);cursor:not-allowed}
.bc-actions{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.bc-actions button{
  margin-top:0;font-size:11.5px;padding:4px 7px;border-radius:8px;flex:0 0 auto;
}
.bc-actions .bc-b1{background:linear-gradient(180deg,#7fd8c0,#3fae8e);color:#06352a}
.bc-actions .bc-buy{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a05}
.bc-actions .bc-max{background:linear-gradient(180deg,#7cc4ff,#3a7ec8);color:#06233d}
.bc-actions .bc-num{
  width:44px;padding:3px 4px;border-radius:8px;border:1px solid var(--line);
  background:rgba(10,24,38,.7);color:#eaf6ff;font-size:12px;text-align:center;
}
.bc-actions .bc-num::-webkit-inner-spin-button{opacity:.5}
.build-card.locked{opacity:.55}
.build-card.locked .bc-lock{font-size:10px;color:var(--dim)}
.own-list{display:flex;flex-wrap:wrap;gap:6px;font-size:11.5px}
.own-item{background:rgba(63,214,176,.10);border:1px solid rgba(63,214,176,.3);border-radius:9px;padding:3px 8px}
.empty-note{font-size:12px;color:var(--dim);font-style:italic;padding:6px 2px}
/* ---------- PEOPLE / GOVERNANCE ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.big-stat{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;text-align:center;
}
.big-stat .bs-ico{font-size:20px}
.big-stat .bs-val{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--gold2);margin-top:2px}
.big-stat .bs-lbl{font-size:10.5px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.big-stat .bs-note{font-size:10px;color:var(--dim);margin-top:3px}
.nation-banner{
  background:linear-gradient(180deg,rgba(63,214,176,.10),rgba(63,214,176,.04));
  border:1px solid rgba(63,214,176,.3);border-radius:12px;padding:9px 12px;margin-bottom:10px;
  font-size:13.5px;line-height:1.5;
}
.meter-wrap{margin-top:6px}
.meter{height:10px;background:rgba(255,255,255,.07);border-radius:6px;overflow:hidden;margin-top:4px}
.meter > div{height:100%;border-radius:6px;transition:width .4s}
.gov-path-row{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.gov-opt{
  flex:1;min-width:150px;text-align:left;background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;
  color:var(--text);font-family:var(--sans);font-size:12.5px;line-height:1.4;
}
.gov-opt:hover{border-color:var(--gold)}
.gov-opt.chosen{border-color:var(--gold);background:rgba(232,192,106,.12)}
.gov-opt b{font-family:var(--serif);font-size:14px;color:var(--gold)}
.policy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:8px}
.policy-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 11px;display:flex;flex-direction:column;gap:4px}
.policy-card.researching{background:rgba(124,196,255,.06);border-color:rgba(124,196,255,.35)}
.policy-card .pc-name{font-weight:600;font-size:13px}
.policy-card .pc-desc{font-size:10.5px;color:var(--dim);line-height:1.35;flex:1}
.policy-card .pc-meta{font-size:10.5px;color:var(--gold2)}
.policy-card button{margin-top:5px;font-size:12px;font-weight:600;border:none;border-radius:8px;padding:4px 8px;cursor:pointer}
.policy-card button.adopt{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a05}
.policy-card button.drop{background:rgba(255,107,107,.18);color:var(--red);border:1px solid rgba(255,107,107,.4)}
.policy-card.adopted{border-color:var(--teal)}
.policy-card .pc-tag{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.industry-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ind-btn{
  font-size:11.5px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:4px 9px;cursor:pointer;color:var(--text);
}
.ind-btn:hover{border-color:var(--gold)}
.ind-btn.active{border-color:var(--teal);background:rgba(63,214,176,.14);color:var(--teal)}
.ind-btn:disabled{opacity:.4;cursor:not-allowed}
.ind-upgrade{margin-top:6px;font-size:12px}
.ind-upgrade button{
  font-size:12px;font-weight:600;border:none;border-radius:8px;padding:5px 10px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a05;
}
.ind-upgrade button:disabled{background:rgba(255,255,255,.12);color:var(--dim);cursor:not-allowed}
/* ---------- STORY ---------- */
#tab-story.col .story-pane{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.goal-card{background:rgba(63,214,176,.08);border:1px solid rgba(63,214,176,.3);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.5}
.goal-card b{color:var(--teal)}
.era-blurb{font-size:12.5px;color:var(--dim);line-height:1.55}
.chron{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:4px;flex:1}
.chron-entry{
  border-left:3px solid var(--line2);padding:4px 12px;background:var(--panel2);
  border-radius:0 10px 10px 0;
}
.chron-entry .ce-year{font-family:var(--serif);color:var(--gold2);font-size:12px;font-weight:700}
.chron-entry .ce-era{font-size:9.5px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-left:8px}
.chron-entry .ce-text{font-size:12.5px;line-height:1.5;margin-top:2px}
.chron-entry.era-marker{border-left-color:var(--gold);background:rgba(232,192,106,.08)}
.chron-entry.era-marker .ce-text{font-family:var(--serif);font-style:italic;color:var(--gold2)}
/* ---------- LOG BAR ---------- */
#logbar{
  flex:0 0 118px;border-top:1px solid var(--line);
  background:rgba(5,16,30,.85);padding:6px 14px 8px;display:flex;flex-direction:column;
}
#log-title{
  font-family:var(--serif);font-size:11px;letter-spacing:2px;color:var(--gold);
  text-transform:uppercase;flex:0 0 auto;
}
.log-count{color:var(--dim);font-family:var(--sans);font-size:10px}
#log-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:4px 0}
.log-line{font-size:11.5px;color:var(--dim);line-height:1.4;border-bottom:1px dashed rgba(140,190,225,.08);padding:2px 0}
.log-line b{color:var(--gold2);font-weight:600}
.log-line.hot{color:var(--text)}
.log-line .lg-ico{margin-right:4px}
/* ---------- SCROLLBARS ---------- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#1d5a92}
/* ---------- MODALS ---------- */
#modal-root{position:fixed;inset:0;pointer-events:none;z-index:100}
.modal-backdrop{
  position:absolute;inset:0;background:rgba(3,10,20,.72);
  backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
  pointer-events:auto;animation:fadeIn .25s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{
  width:min(620px,92vw);max-height:86vh;overflow-y:auto;
  background:linear-gradient(170deg,#12334f,#0a2037);
  border:1px solid var(--line2);border-radius:18px;
  box-shadow:var(--shadow);padding:22px 26px;
  animation:popIn .28s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popIn{from{transform:scale(.92) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal .m-kicker{
  font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:var(--teal);
  font-weight:700;
}
.modal h2{font-family:var(--serif);font-size:24px;color:var(--gold);margin:6px 0 10px;line-height:1.2}
.modal .m-year{font-family:var(--serif);color:var(--gold2);font-size:13px;margin-bottom:10px}
.modal .m-text{font-size:14px;line-height:1.65;color:#dcebf5}
.modal .m-text p{margin-bottom:9px}
.modal .m-text .m-hint{
  font-size:12.5px;color:#9ec8e8;background:rgba(46,109,158,.18);
  border:1px solid rgba(124,196,255,.25);border-radius:10px;padding:8px 12px;
}
.modal .m-text .hi{color:var(--gold2);font-weight:600}
.modal .m-text .red{color:var(--red)}
.modal .m-text .teal{color:var(--teal)}
.modal .m-quote{
  border-left:3px solid var(--gold);padding:8px 14px;margin:10px 0;
  font-family:var(--serif);font-style:italic;color:var(--gold2);background:rgba(232,192,106,.07);
  border-radius:0 10px 10px 0;
}
.choice-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.choice{
  text-align:left;background:var(--panel2);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;cursor:pointer;color:var(--text);
  font-family:var(--sans);transition:border-color .12s, background .12s;
}
.choice:hover{border-color:var(--gold);background:rgba(232,192,106,.10)}
.choice .c-label{font-weight:700;font-size:13.5px;color:var(--gold2)}
.choice .c-hint{font-size:11px;color:var(--dim);margin-top:3px;line-height:1.4}
.choice .c-result{font-size:12px;color:var(--teal);margin-top:5px;line-height:1.45}
.btn-primary{
  margin-top:14px;font-family:var(--serif);font-size:15px;font-weight:700;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a05;
  border:none;border-radius:14px;padding:10px 22px;cursor:pointer;
}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn-ghost{
  font-size:13px;background:rgba(255,255,255,.07);color:var(--text);
  border:1px solid var(--line2);border-radius:12px;padding:9px 16px;cursor:pointer;
}
/* intro */
.intro-eras{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.intro-era{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim)}
.intro-era .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.intro-era .yr{font-family:var(--serif);color:var(--gold2);flex:0 0 74px;text-align:right}
.howto{font-size:12px;color:var(--dim);line-height:1.6;margin-top:6px}
.howto b{color:var(--text)}
.ending-banner{font-family:var(--serif);font-size:17px;color:var(--teal);margin:8px 0;line-height:1.4}
/* ---------- TOASTS ---------- */
#toast-root{position:fixed;top:64px;right:14px;z-index:110;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  background:rgba(10,32,55,.95);border:1px solid var(--line2);border-left:4px solid var(--gold);
  border-radius:10px;padding:9px 14px;font-size:12.5px;max-width:320px;
  box-shadow:var(--shadow);animation:slideIn .3s;
}
.toast.good{border-left-color:var(--teal)}
.toast.bad{border-left-color:var(--red)}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* era card extra */
.era-years{font-family:var(--serif);color:var(--gold2);letter-spacing:1px}
.milestone-list{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.milestone-list li{font-size:12.5px;color:var(--dim);padding-left:18px;position:relative;line-height:1.45}
.milestone-list li::before{content:"✦";position:absolute;left:0;color:var(--gold);font-size:10px;top:2px}

/* cinematic era art — the modal banner each time a new era dawns */
.era-card-wrap{display:flex;flex-direction:column}
.era-art{
  position:relative;width:100%;height:0;padding-top:56.25%;
  border-radius:12px;overflow:hidden;margin:0 0 14px;
  background:#0b1622 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.45);
}
.era-art .era-art-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;color:#456;background:radial-gradient(circle at 50% 40%,#142433,#0a1520);
}
.era-art.has-art{height:auto;padding-top:0;aspect-ratio:16/9}
.era-art.no-art{height:auto;padding-top:0;min-height:120px;background:#0b1622}
.era-modal .modal{max-width:760px}
.era-modal h2{font-size:28px}

/* era banner in the People & Governance tab */
.era-banner{
  position:relative;width:100%;min-height:150px;border-radius:14px;overflow:hidden;
  margin-bottom:14px;display:flex;align-items:flex-end;
  background:#0b1622 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.4);
}
.era-banner.has-art{min-height:170px}
.era-banner .era-banner-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#456;background:radial-gradient(circle at 50% 35%,#142433,#0a1520);
}
.era-banner.has-art .era-banner-ph{display:none}
.era-banner .era-banner-caption{
  position:relative;z-index:1;padding:22px 18px 12px;display:flex;flex-direction:column;gap:2px;
  background:linear-gradient(180deg,rgba(3,10,18,.05),rgba(3,10,18,.86));
}
.era-banner .era-banner-epoch{
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gold2);font-weight:700;
}
.era-banner .era-banner-caption b{font-family:var(--serif);font-size:18px;color:#f5ecd6;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.era-banner .era-banner-year{font-size:11.5px;color:var(--dim)}

/* ---------- TITLE SCREEN ---------- */
/* The title screen surface: #boot-cover is a static element baked into
   index.html so it is the first, full-screen thing painted on launch (no
   flash of the game UI). Its only background is the REAL titlescreen.jpg
   (<img id="boot-bg">). There is no gradient/"fake" backdrop and no overlay:
   if the image is present it fills the screen; the title text sits on top. */
#boot-cover{
  position:fixed;inset:0;z-index:300;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;
  outline:none;
  /* contain so the full logo/artwork always fits on screen without clipping
     (any uncovered area stays the body's dark background base color) */
  background:url('assets/titlescreen.jpg') center/contain no-repeat;
  background-color:#020910;
}
#boot-cover #boot-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;   /* show the ENTIRE image, never crop the logo */
  opacity:1;
}
#boot-cover .title-content{position:relative;z-index:2}
#boot-cover.title-enter{animation:titleFadeIn .6s ease-out}
@keyframes titleFadeIn{from{opacity:0}to{opacity:1}}
#boot-cover.title-leaving{animation:titleFadeOut .48s ease-in forwards}
@keyframes titleFadeOut{from{opacity:1}to{opacity:0}}
.title-content{
  position:relative;z-index:1;text-align:center;max-width:820px;padding:30px 24px;
  transform:translateY(-2vh);
}
.title-kicker{
  font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--teal);
  font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:14px;
  -webkit-text-stroke:1px rgba(0,0,0,.55);paint-order:stroke fill;
}
.title-game{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(54px,11vw,116px);line-height:.95;letter-spacing:-1px;
  color:#f5ecd6;
  -webkit-text-stroke:2px rgba(0,0,0,.5);paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.35),0 12px 40px rgba(0,0,0,.75),0 0 60px rgba(232,192,106,.25);
  margin:0 0 6px;
}
.title-sub{
  font-family:var(--serif);font-style:italic;color:var(--gold2);
  font-size:clamp(16px,2.6vw,24px);text-shadow:0 2px 10px rgba(0,0,0,.7);margin-bottom:20px;
  -webkit-text-stroke:1px rgba(0,0,0,.6);paint-order:stroke fill;
}
.title-tagline{
  font-family:var(--serif);font-style:italic;color:#dcebf5;font-size:14px;
  text-shadow:0 2px 10px rgba(0,0,0,.8);max-width:520px;margin:0 auto 30px;line-height:1.55;
  -webkit-text-stroke:1px rgba(0,0,0,.6);paint-order:stroke fill;
}
.title-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.title-btn{
  font-family:var(--serif);font-size:16px;font-weight:700;cursor:pointer;
  border-radius:16px;padding:13px 32px;letter-spacing:.5px;
  border:none;pointer-events:auto;
}
.title-begin{
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2a05;
  box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.15) inset;
}
.title-begin:hover{filter:brightness(1.08);transform:translateY(-1px)}
.title-continue{
  background:rgba(8,20,34,.6);color:var(--gold2);
  border:1px solid rgba(232,192,106,.5);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.title-continue:hover{background:rgba(20,42,66,.7)}
.title-hint{color:rgba(220,235,245,.7);font-size:12px;margin-top:22px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.title-hint b{color:var(--gold2)}