@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Cinzel';src:url('../fonts/cinzel-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
/* ============ ORBIS ============ */
:root{
  --bg:#080d14; --bg2:#0c141d; --panel:rgba(16,24,34,.86); --panel2:rgba(22,32,44,.92);
  --line:rgba(190,215,240,.13); --line2:rgba(190,215,240,.26);
  --gold:#e8c46a; --gold2:#f7dc9a; --goldd:#a3812f;
  --txt:#e8eef6; --dim:#93a4b8; --dim2:#6d7f94;
  --red:#e0574b; --grn:#5fc98a; --blu:#63b6e8; --amb:#e8a54b; --vio:#a982e0;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --r:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(1200px 700px at 50% -10%, #16243a 0%, #080d14 60%) fixed, var(--bg);
  color:var(--txt); font-family:"Barlow","Inter",system-ui,-apple-system,sans-serif;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.disp{font-family:"Cinzel","Georgia",serif;letter-spacing:.02em}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;background:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(160,190,220,.22);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.scroll{overflow-y:auto;scrollbar-width:thin}

/* ---------- TITLE ---------- */
#title{position:fixed;inset:0;display:flex;flex-direction:column;z-index:60;
  background:radial-gradient(1400px 800px at 50% 0%,#1a2c46 0%,#070c13 65%);overflow:auto}
#title.hide{display:none}
.title-inner{max-width:1180px;margin:0 auto;padding:38px 26px 60px;width:100%}
.brand{display:flex;align-items:center;gap:18px;justify-content:center;margin-bottom:6px}
.brand svg{filter:drop-shadow(0 6px 18px rgba(232,196,106,.35))}
.brand h1{font-size:clamp(38px,7vw,76px);letter-spacing:.14em;
  background:linear-gradient(180deg,#fff5d8,#e8c46a 45%,#9c7526);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{text-align:center;color:var(--dim);letter-spacing:.34em;text-transform:uppercase;font-size:12px;margin-bottom:30px}
.sect{margin:26px 0 12px;display:flex;align-items:center;gap:12px}
.sect h3{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sect .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.grid{display:grid;gap:12px}
.gp-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
  transition:.16s;position:relative;overflow:hidden;text-align:left}
.card:hover{border-color:var(--gold);transform:translateY(-2px);background:var(--panel2)}
.card.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 10px 30px rgba(232,196,106,.16);background:var(--panel2)}
.card .fl{font-size:26px;line-height:1}
.card .nm{font-weight:700;font-size:15px;margin-top:4px}
.card .sub{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.4}
.card .tag{position:absolute;top:9px;right:10px;font-size:9.5px;letter-spacing:.14em;color:var(--goldd);
  border:1px solid rgba(232,196,106,.3);padding:2px 6px;border-radius:20px;text-transform:uppercase}
.doc-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.diff-grid{grid-template-columns:repeat(auto-fit,minmax(185px,1fr))}
.searchbar{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:9px 13px;margin-top:6px}
.searchbar input{flex:1;background:none;border:0;outline:0;color:var(--txt);font-size:14px;font-family:inherit}
.startbar{position:sticky;bottom:0;margin-top:30px;display:flex;gap:14px;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,transparent,rgba(7,12,19,.95) 40%);padding:22px 4px 8px}
.btn{background:linear-gradient(180deg,#2a3a4e,#1a2634);border:1px solid var(--line2);color:var(--txt);
  padding:9px 16px;border-radius:9px;font-weight:600;font-size:13.5px;transition:.15s;letter-spacing:.02em}
.btn:hover{border-color:var(--gold);background:linear-gradient(180deg,#35485f,#20303f)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.gold{background:linear-gradient(180deg,#f0d189,#c69a3c);color:#2a1f06;border-color:#f5e0a8;font-weight:800;
  box-shadow:0 8px 26px rgba(232,196,106,.28)}
.btn.gold:hover{background:linear-gradient(180deg,#fbe2a6,#d8a944)}
.btn.big{padding:13px 34px;font-size:16px;letter-spacing:.1em;text-transform:uppercase}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.red{background:linear-gradient(180deg,#7c2f28,#5a201b);border-color:#b4544a}
.btn.red:hover{background:linear-gradient(180deg,#95392f,#6d2620)}

/* ---------- GAME SHELL ---------- */
#game{position:fixed;inset:0;display:flex;flex-direction:column}
#game.hide{display:none}
#hud{height:56px;flex:0 0 56px;display:flex;align-items:center;gap:8px;padding:0 12px;
  background:linear-gradient(180deg,rgba(12,19,28,.97),rgba(10,16,24,.9));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);z-index:20}
.hud-brand{display:flex;align-items:center;gap:9px;padding-right:12px;border-right:1px solid var(--line)}
.hud-brand .nm{font-family:"Cinzel",serif;letter-spacing:.16em;font-size:15px;color:var(--gold)}
.hud-nation{display:flex;align-items:center;gap:8px;padding:0 12px;border-right:1px solid var(--line)}
.hud-nation .fl{font-size:22px}
.hud-nation .t{font-weight:700;font-size:14px;line-height:1.1}
.hud-nation .s{font-size:10.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase}
.res{display:flex;gap:2px;align-items:center;flex:1;overflow-x:auto;padding:0 6px}
.res .r{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;white-space:nowrap;
  transition:.15s;cursor:default}
.res .r:hover{background:rgba(255,255,255,.05)}
.res .ic{font-size:15px;opacity:.95}
.res .v{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.res .d{font-size:11px;font-variant-numeric:tabular-nums}
.pos{color:var(--grn)} .neg{color:var(--red)}
.hud-right{display:flex;align-items:center;gap:10px;padding-left:8px;border-left:1px solid var(--line)}
.turnbox{text-align:right;line-height:1.15}
.turnbox .y{font-family:"Cinzel",serif;font-size:19px;color:var(--gold)}
.turnbox .t{font-size:10px;color:var(--dim);letter-spacing:.12em}

#stage{flex:1;position:relative;overflow:hidden}
#map{position:absolute;inset:0;display:block;cursor:grab;touch-action:none}
#fx{position:absolute;inset:0;display:block;pointer-events:none;z-index:2}
#vig{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.44) 100%)}
#map.drag{cursor:grabbing}
#map.aim{cursor:crosshair}

.panel{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(14px);box-shadow:var(--shadow);z-index:10}
#left{left:12px;top:12px;bottom:12px;width:322px;display:flex;flex-direction:column;overflow:hidden}
#right{right:12px;top:12px;bottom:12px;width:340px;display:flex;flex-direction:column;overflow:hidden}
.panel.collapsed{width:44px}
.panel.collapsed .pbody,.panel.collapsed .ptabs,.panel.collapsed .phead .ttl{display:none}
.phead{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);flex:0 0 auto}
.phead .ttl{font-family:"Cinzel",serif;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);flex:1}
.phead .x{opacity:.6;font-size:15px;padding:2px 5px;border-radius:6px}
.phead .x:hover{opacity:1;background:rgba(255,255,255,.08)}
.pbody{flex:1;overflow-y:auto;padding:13px}
.ptabs{display:flex;gap:3px;padding:8px 8px 0;flex:0 0 auto;border-bottom:1px solid var(--line)}
.ptab{flex:1;padding:7px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border-radius:8px 8px 0 0;text-align:center;font-weight:600;transition:.14s;border-bottom:2px solid transparent}
.ptab:hover{color:var(--txt);background:rgba(255,255,255,.05)}
.ptab.on{color:var(--gold);border-bottom-color:var(--gold);background:rgba(232,196,106,.08)}

.tnone{color:var(--dim2);font-size:13px;text-align:center;padding:36px 14px;line-height:1.7}
.thead{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px}
.thead .fl{font-size:32px;line-height:1}
.thead .nm{font-family:"Cinzel",serif;font-size:17px;line-height:1.15}
.thead .ow{font-size:11.5px;color:var(--dim);margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
.chip{font-size:10.5px;padding:3px 8px;border-radius:20px;border:1px solid var(--line2);color:var(--dim);
  background:rgba(255,255,255,.03);white-space:nowrap}
.chip.g{color:var(--gold);border-color:rgba(232,196,106,.35);background:rgba(232,196,106,.08)}
.chip.r{color:#ff9a8c;border-color:rgba(224,87,75,.4);background:rgba(224,87,75,.1)}
.chip.b{color:#93cdf0;border-color:rgba(99,182,232,.4);background:rgba(99,182,232,.1)}
.chip.n{color:#8ee0b0;border-color:rgba(95,201,138,.4);background:rgba(95,201,138,.1)}
.rows{display:flex;flex-direction:column;gap:1px;margin:10px 0}
.row{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;border-radius:7px;font-size:12.5px}
.row:nth-child(odd){background:rgba(255,255,255,.028)}
.row .k{color:var(--dim)} .row .v{font-weight:600;font-variant-numeric:tabular-nums}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.09);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;border-radius:6px;transition:width .35s}
.mini{font-size:11px;color:var(--dim2);line-height:1.55;margin-top:3px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px}
.act{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);
  border-radius:9px;background:rgba(255,255,255,.03);transition:.14s;text-align:left;font-size:12.5px;font-weight:600}
.act:hover:not(:disabled){border-color:var(--gold);background:rgba(232,196,106,.1)}
.act:disabled,.act.off{opacity:.4;cursor:not-allowed}
.act.off:hover{border-color:rgba(224,87,75,.45);background:rgba(224,87,75,.07)}
.act .c{font-size:10.5px;color:var(--dim);font-weight:500}
.act.wide{grid-column:1/-1}
.sechead{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:15px 0 7px;
  padding-bottom:5px;border-bottom:1px solid var(--line)}

/* lists */
.lrow{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;transition:.13s;cursor:pointer;font-size:12.5px}
.lrow:hover{background:rgba(255,255,255,.06)}
.lrow .fl{font-size:17px;width:22px;text-align:center}
.lrow .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lrow .vv{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px}
.swatch{width:9px;height:9px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.5)}

/* log */
.logi{font-size:12px;padding:7px 9px;border-left:2px solid var(--line2);margin-bottom:5px;line-height:1.5;
  background:rgba(255,255,255,.02);border-radius:0 7px 7px 0}
.logi .tn{font-size:9.5px;color:var(--dim2);letter-spacing:.1em;display:block;margin-bottom:2px}
.logi.war{border-left-color:var(--red)} .logi.peace{border-left-color:var(--grn)}
.logi.conquest{border-left-color:var(--gold)} .logi.rebel{border-left-color:#c0554f}
.logi.tech{border-left-color:var(--blu)} .logi.diplo{border-left-color:var(--vio)}
.logi.coalition{border-left-color:#ff8c42} .logi.nuke{border-left-color:#ff5a3c}

/* tooltip */
#tip{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;z-index:40;background:rgba(10,16,24,.96);border:1px solid var(--line2);
  border-radius:10px;padding:9px 12px;font-size:12px;max-width:280px;box-shadow:var(--shadow);opacity:0;transition:opacity .12s;
  backdrop-filter:blur(8px);line-height:1.5}
#tip.on{opacity:1}
#tip .h{font-weight:700;font-size:13.5px;margin-bottom:4px;display:flex;gap:6px;align-items:center}
#tip .d{color:var(--dim);font-size:11.5px}
#tip .st{display:flex;gap:10px;margin-top:5px;font-size:11px;flex-wrap:wrap}

/* toasts */
#toasts{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:35;display:flex;
  flex-direction:column;gap:7px;align-items:center;pointer-events:none;width:min(560px,88vw)}
.toast{background:rgba(12,20,30,.95);border:1px solid var(--line2);border-left:3px solid var(--gold);
  padding:9px 15px;border-radius:9px;font-size:13px;box-shadow:var(--shadow);animation:tin .3s;backdrop-filter:blur(8px)}
.toast.war{border-left-color:var(--red)} .toast.good{border-left-color:var(--grn)}
@keyframes tin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* end turn */
#endturn{position:absolute;right:calc(340px + 24px);bottom:16px;z-index:22}
#endturn > button{padding:13px 30px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;border-radius:11px}
#endturn .hint{font-size:10.5px;color:var(--dim2);text-align:center;margin-top:6px;letter-spacing:.06em;
  display:flex;gap:6px;align-items:center;justify-content:center}
.idlebtn{font-size:10.5px!important;letter-spacing:.04em!important;text-transform:none!important;
  color:var(--gold);border:1px solid rgba(232,196,106,.42);background:rgba(232,196,106,.12);
  border-radius:20px;padding:3px 9px!important;font-weight:600;transition:.14s;font-family:inherit;line-height:1.5}
.idlebtn:hover{background:rgba(232,196,106,.24);border-color:var(--gold)}

/* zoom */
#zoomctl{position:absolute;left:calc(322px + 24px);bottom:16px;z-index:22;display:flex;gap:6px}
#zoomctl button{width:34px;height:34px;border-radius:9px;background:var(--panel);border:1px solid var(--line);
  font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
#zoomctl button:hover{border-color:var(--gold)}

/* modal */
#modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,8,14,.72);backdrop-filter:blur(7px)}
#modal.on{display:flex}
.mbox{background:linear-gradient(180deg,rgba(20,30,42,.98),rgba(13,20,29,.99));border:1px solid var(--line2);
  border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.7);max-width:min(1080px,95vw);max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;width:100%}
.mbox.sm{max-width:min(560px,95vw)}
.mbox.md{max-width:min(760px,95vw)}
.mhead{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.mhead h2{font-size:18px;letter-spacing:.1em;color:var(--gold);flex:1}
.mbody{padding:20px;overflow-y:auto}
.mfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* tech tree */
.tt{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ttcol h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:8px;
  border-radius:8px;margin-bottom:9px}
.tech{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:8px;position:relative;
  transition:.15s;background:rgba(255,255,255,.025)}
.tech.can{cursor:pointer;border-color:rgba(232,196,106,.4)}
.tech.can:hover{background:rgba(232,196,106,.12);transform:translateX(3px)}
.tech.done{border-color:rgba(95,201,138,.55);background:rgba(95,201,138,.1)}
.tech.locked{opacity:.36}
.tech.cur{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.tech .tn{font-weight:700;font-size:12.5px;display:flex;gap:6px;align-items:center}
.tech .td{font-size:10.5px;color:var(--dim);margin-top:3px;line-height:1.45}
.tech .tc{font-size:10.5px;color:var(--gold);margin-top:4px;font-variant-numeric:tabular-nums}

/* battle */
.bt{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin-bottom:16px}
.bt .side{text-align:center}
.bt .side .fl{font-size:34px}
.bt .side .nm{font-weight:700;margin-top:4px;font-size:14px}
.bt .side .ct{font-size:30px;font-family:"Cinzel",serif;margin-top:6px;font-variant-numeric:tabular-nums}
.bt .vs{font-family:"Cinzel",serif;color:var(--gold);font-size:20px}
.blog{background:rgba(0,0,0,.3);border-radius:10px;padding:12px;font-size:12.5px;max-height:210px;overflow-y:auto;
  font-variant-numeric:tabular-nums;line-height:1.85}
.bres{text-align:center;font-family:"Cinzel",serif;font-size:22px;margin:14px 0 4px;letter-spacing:.1em}
.win{color:var(--grn)} .lose{color:var(--red)}

/* event */
.evtext{font-size:14.5px;line-height:1.75;color:#dbe5f0;margin-bottom:18px;font-style:italic}
.evopt{display:block;width:100%;text-align:left;padding:12px 15px;border:1px solid var(--line);border-radius:10px;
  margin-bottom:9px;transition:.15s;background:rgba(255,255,255,.03)}
.evopt:hover{border-color:var(--gold);background:rgba(232,196,106,.1);transform:translateX(4px)}
.evopt .t{font-weight:700;font-size:13.5px}
.evopt .e{font-size:11.5px;color:var(--dim);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}

/* slider popover */
#pop{position:absolute;z-index:45;background:rgba(12,19,28,.97);border:1px solid var(--gold);border-radius:12px;
  padding:13px;box-shadow:var(--shadow);display:none;width:250px;backdrop-filter:blur(10px)}
#pop.on{display:block}
#pop .t{font-size:12.5px;font-weight:700;margin-bottom:9px}
#pop input[type=range]{width:100%;accent-color:var(--gold)}
#pop .n{text-align:center;font-family:"Cinzel",serif;font-size:26px;color:var(--gold);margin:4px 0}
#pop .odds{font-size:11px;color:var(--dim);text-align:center;margin-bottom:9px;line-height:1.5}
#pop .b{display:flex;gap:7px}
#pop .b button{flex:1}

.kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line2);border-radius:5px;font-size:10.5px;
  background:rgba(255,255,255,.06);font-family:ui-monospace,monospace}
.flexrow{display:flex;gap:8px;align-items:center}
.spacer{flex:1}
@media (max-width:1180px){
  #left{width:280px} #right{width:296px}
  #legend{left:calc(280px + 20px)}
  #endturn{right:calc(296px + 20px)} #zoomctl{left:calc(280px + 20px)}
  .tt{grid-template-columns:repeat(2,1fr)}
}
#mbar{display:none}
@media (max-width:820px){
  #hud{height:auto;min-height:52px;flex-wrap:wrap;padding:4px 8px;gap:4px}
  .hud-brand{display:none}
  .hud-nation{padding:0 8px 0 2px}
  .hud-nation .fl{font-size:19px}
  .hud-right{gap:6px;padding-left:6px}
  .hud-right .btn.sm{padding:5px 7px;font-size:13px}
  .hud-right .lbl{display:none}
  .hud-nation{flex:1;min-width:0}
  .hud-nation .t{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hud-nation .s{font-size:9.5px}
  .turnbox .y{font-size:16px}
  .res{order:3;flex-basis:100%;border-top:1px solid var(--line);padding:3px 0 4px;gap:0}
  .res .r{padding:4px 7px} .res .v{font-size:13px} .res .d{font-size:10px}
  #left,#right{position:absolute;left:8px;right:8px;width:auto;top:auto;bottom:58px;height:56vh;
    transform:translateY(calc(100% + 70px));transition:transform .26s cubic-bezier(.2,.8,.3,1);z-index:26}
  #left.open,#right.open{transform:none}
  #zoomctl{left:8px;bottom:66px}
  #legend{left:8px;bottom:112px;max-width:200px}
  #endturn{display:none}
  #mbar{display:flex;position:absolute;left:0;right:0;bottom:0;height:52px;z-index:28;gap:6px;padding:6px 8px;
    background:linear-gradient(180deg,rgba(10,16,24,.82),rgba(8,13,20,.98));border-top:1px solid var(--line);
    backdrop-filter:blur(10px)}
  #mbar button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:9px;
    border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12px;font-weight:600}
  #mbar button span{font-size:11px}
  #mbar button.on{border-color:var(--gold);background:rgba(232,196,106,.14);color:var(--gold)}
  #mbar button.go{flex:1.25;background:linear-gradient(180deg,#f0d189,#c69a3c);color:#2a1f06;border-color:#f5e0a8;
    font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
  .tt{grid-template-columns:1fr}
  .mbox{max-height:86vh}
  #pop{width:min(250px,86vw)}
}
@media (max-width:820px) and (orientation:landscape){
  #left,#right{height:70vh;width:min(320px,46vw);left:auto;right:auto}
  #left{left:8px} #right{right:8px}
}

/* ---------- help tooltip (HUD + buttons) ---------- */
#htip{position:fixed;z-index:200;pointer-events:none;opacity:0;transform:translateY(-4px);
  transition:opacity .13s, transform .13s;
  background:linear-gradient(180deg,rgba(20,29,40,.99),rgba(13,20,29,.99));
  border:1px solid var(--line2);border-radius:11px;padding:11px 13px;width:max-content;max-width:310px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);backdrop-filter:blur(10px);line-height:1.5}
#htip.on{opacity:1;transform:none}
#htip .ht{font-family:"Cinzel",serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;display:flex;align-items:center;gap:6px}
#htip .hr{display:flex;justify-content:space-between;gap:18px;font-size:12px;padding:2px 0}
#htip .hr span:first-child{color:var(--dim)}
#htip .hr span:last-child{font-weight:700;font-variant-numeric:tabular-nums}
#htip .hd{font-size:11.5px;color:var(--dim);margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
#htip .hd b{color:#cfe0f0;font-weight:600}
#htip .hbar{height:5px;border-radius:5px;background:rgba(255,255,255,.09);overflow:hidden;margin:7px 0 2px}
#htip .hbar i{display:block;height:100%;border-radius:5px}

/* toasts must clear the modal */
#toasts{z-index:120}

/* ---------- inline result line inside modals ---------- */
.mnote{margin:2px 0 12px;padding:10px 13px;border-radius:10px;font-size:12.5px;line-height:1.5;
  border:1px solid var(--line2);background:rgba(255,255,255,.04);display:flex;gap:9px;align-items:flex-start}
.mnote.ok{border-color:rgba(95,201,138,.5);background:rgba(95,201,138,.12);color:#c9f0da}
.mnote.no{border-color:rgba(224,87,75,.5);background:rgba(224,87,75,.12);color:#f6c9c3}
.mnote .ic{font-size:15px;line-height:1.2}

/* ---------- objectives card ---------- */
.obj{border:1px solid rgba(232,196,106,.28);background:linear-gradient(180deg,rgba(232,196,106,.10),rgba(232,196,106,.03));
  border-radius:12px;padding:11px 12px;margin-bottom:12px}
.obj .ot{font-family:"Cinzel",serif;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  display:flex;justify-content:space-between;align-items:baseline}
.obj .ov{font-family:"Cinzel",serif;font-size:20px;color:#fff2cf;margin:5px 0 2px;font-variant-numeric:tabular-nums}
.obj .obar{height:8px;border-radius:8px;background:rgba(0,0,0,.35);overflow:hidden;position:relative;margin:6px 0 5px}
.obj .obar i{display:block;height:100%;background:linear-gradient(90deg,#c69a3c,#f5e0a8);border-radius:8px;transition:width .4s}
.obj .obar u{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.55)}
.obj .os{font-size:11px;color:var(--dim)}

/* ---------- next steps ---------- */
.steps{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.step{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:9px;font-size:12.5px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;transition:.14s;text-align:left;width:100%}
.step:hover{border-color:var(--gold);background:rgba(232,196,106,.1)}
.step.done{opacity:.45;cursor:default}
.step.done:hover{border-color:var(--line);background:rgba(255,255,255,.03)}
.step .sx{font-size:14px;line-height:1.2;width:16px;flex:0 0 16px;text-align:center}
.step .st{flex:1}
.step .sd{font-size:11px;color:var(--dim);margin-top:2px}

/* ---------- dispatches ---------- */
.disp-list{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.disp-i{display:flex;gap:8px;font-size:12px;padding:6px 9px;border-radius:8px;background:rgba(255,255,255,.03);
  line-height:1.45;border-left:2px solid var(--line2)}
.disp-i.good{border-left-color:var(--grn)} .disp-i.bad{border-left-color:var(--red)}
.disp-i.warn{border-left-color:var(--amb)} .disp-i.info{border-left-color:var(--blu)}
.disp-i .di{flex:0 0 15px;text-align:center}

/* ---------- log filter ---------- */
.filt{display:flex;gap:4px;margin-bottom:9px}
.filt button{flex:1;padding:5px;font-size:11px;border-radius:7px;border:1px solid var(--line);color:var(--dim);
  background:rgba(255,255,255,.03)}
.filt button.on{border-color:var(--gold);color:var(--gold);background:rgba(232,196,106,.1)}

/* ---------- map legend ---------- */
#legend{position:absolute;left:calc(322px + 24px);bottom:58px;z-index:12;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;backdrop-filter:blur(12px);box-shadow:var(--shadow);font-size:11.5px;
  display:none;max-width:230px}
#legend.on{display:block}
#legend h4{font-family:"Cinzel",serif;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
#legend .lg{display:flex;gap:8px;align-items:center;padding:2.5px 0;color:var(--dim)}
#legend .k{width:20px;height:12px;border-radius:3px;flex:0 0 20px}

/* nudge the player when research is idle */
@keyframes needpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,196,106,.0)}50%{box-shadow:0 0 0 4px rgba(232,196,106,.22)}}
.btn.needs{border-color:var(--gold);color:var(--gold);animation:needpulse 1.8s ease-in-out infinite}
.hint-line{font-size:11.5px;color:#a9c4dc;background:rgba(99,182,232,.10);border:1px solid rgba(99,182,232,.28);
  border-radius:9px;padding:8px 10px;margin:10px 0 2px;line-height:1.5}
.hint-line b{color:#d9ecfa}
@media (prefers-reduced-motion: reduce){ .btn.needs{animation:none} }

.logi.debt{border-left-color:#e0574b}
.logi.event{border-left-color:#a982e0}

/* diplomacy option rows */
.dipact{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 12px;margin-bottom:6px;
  border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03);transition:.14s}
.dipact:hover{border-color:var(--gold);background:rgba(232,196,106,.10);transform:translateX(3px)}
.dipact.off{opacity:.42;cursor:not-allowed;transform:none}
.dipact.off:hover{border-color:rgba(224,87,75,.4);background:rgba(224,87,75,.06);transform:none}
.dipact .di{font-size:17px;width:22px;text-align:center;flex:0 0 22px}
.dipact .dn{flex:1;font-weight:600;font-size:13px}
.dipact .dc{font-size:10.5px;color:var(--dim);font-weight:500;margin-top:2px}
.dipact .dv{font-size:10px;padding:3px 8px;border-radius:20px;border:1px solid;white-space:nowrap;font-weight:600}

/* war summary cards */
.warcard{border:1px solid rgba(224,87,75,.32);background:rgba(224,87,75,.07);border-radius:10px;
  padding:9px 11px;margin-bottom:7px;cursor:pointer;transition:.14s}
.warcard:hover{border-color:var(--red);background:rgba(224,87,75,.14)}
.warcard .wh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.warcard .wh .fl{font-size:17px}
.warcard .wh .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.warcard .wh .ws{font-variant-numeric:tabular-nums;font-size:13px}
.warcard .wbar{height:5px;border-radius:5px;margin:7px 0 5px;position:relative;
  background:linear-gradient(90deg,rgba(224,87,75,.5),rgba(255,255,255,.12) 50%,rgba(95,201,138,.5))}
.warcard .wbar i{position:absolute;top:-2px;width:3px;height:9px;border-radius:2px;transform:translateX(-50%)}
.warcard .wmeta{font-size:10.5px;color:var(--dim)}

/* peace-terms rows */
.termrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 11px;margin-bottom:5px;
  border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);transition:.13s}
.termrow:hover{border-color:var(--gold);background:rgba(232,196,106,.08)}
.termrow.on{border-color:var(--gold);background:rgba(232,196,106,.15)}
.termrow .tk{font-size:14px;width:16px}
.termrow .tn{flex:1;font-size:12.5px;font-weight:600}
.termrow .td{font-size:10.5px;color:var(--dim);font-weight:500;margin-top:1px}
.termrow .tp{font-variant-numeric:tabular-nums;font-weight:700;font-size:12.5px;color:var(--gold)}
.logi.liberation{border-left-color:#7fd6a8}

/* ---------- chronicle / end-of-game report ---------- */
.viz{ --s1:#b8892a; --s2:#4d96d4; --s3:#d15145; --s4:#9a6fd6;
  --vsurf:#101822; --vgrid:rgba(190,215,240,.13); --vaxis:rgba(190,215,240,.30); }
.viz .chart{position:relative;background:rgba(10,16,24,.55);border:1px solid var(--line);
  border-radius:12px;padding:12px 12px 6px}
.viz .chart h4{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  margin:0 0 2px;font-weight:700}
.viz .chart .sub{font-size:11.5px;color:var(--dim2);margin:0 0 10px}
.viz svg{display:block;width:100%;overflow:visible}
.viz .lg{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 2px;font-size:11.5px;color:var(--dim)}
.viz .lg i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:middle}
.viz .heros{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-bottom:14px}
.viz .hero{background:rgba(10,16,24,.55);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.viz .hero .k{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim2)}
.viz .hero .v{font-family:'Cinzel',serif;font-size:21px;color:var(--gold);line-height:1.25;margin-top:2px}
.viz .hero .v.sm{font-size:15px}
.viz .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){ .viz .grid2{grid-template-columns:1fr} }
.viz .vtip{position:absolute;pointer-events:none;background:rgba(8,13,20,.97);border:1px solid var(--line2);
  border-radius:8px;padding:7px 9px;font-size:11.5px;color:var(--txt);opacity:0;transition:opacity .09s;
  box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:5;white-space:nowrap}
.viz .vtip.on{opacity:1}
.viz .vtip b{color:var(--gold)}
.viz .vtip .r{display:flex;gap:9px;justify-content:space-between;margin-top:2px}
.viz .vtip .r i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px}
.viz table{width:100%;border-collapse:collapse;font-size:12px}
.viz th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim2);
  font-weight:700;padding:4px 6px;border-bottom:1px solid var(--line)}
.viz td{padding:5px 6px;border-bottom:1px solid rgba(190,215,240,.06);color:var(--txt)}
.viz td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--dim)}
.viz .tl{display:flex;flex-wrap:wrap;gap:4px}
.viz .tl span{font-size:11px;padding:2px 7px;border-radius:20px;border:1px solid var(--line)}
.viz .tl span.g{color:#8ee0b0;border-color:rgba(95,201,138,.4);background:rgba(95,201,138,.08)}
.viz .tl span.l{color:#ff9a8c;border-color:rgba(224,87,75,.4);background:rgba(224,87,75,.08)}
.viz .tl::-webkit-scrollbar{width:8px}
.viz .tl::-webkit-scrollbar-thumb{background:rgba(190,215,240,.18);border-radius:8px}

/* a decision you cannot duck: no backdrop dismissal, and it says so */
#modal.locked{cursor:not-allowed}
#modal.locked .mbox{cursor:auto;animation:lockpop .18s ease-out}
@keyframes lockpop{from{transform:scale(.985);opacity:.85}to{transform:scale(1);opacity:1}}
#modal.locked.nudge .mbox{animation:nudge .32s ease-in-out}
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}