/* ===========================================================================
   THEATRE COMMAND II — interface
   =========================================================================== */

/* ---------------------------------------------------------------- themes */
:root{
  --bg:#0b0e11; --bg2:#12171c; --bg3:#1a2128; --bg4:#212b33;
  --line:#2a343d; --line2:#3a4752;
  --txt:#dfe6ec; --txt2:#aab8c4; --dim:#8b9aa8; --faint:#5c6a76;
  --accent:#e0a13c; --accent2:#4ea3d8; --accentInk:#1a1200;
  --good:#4caf6a; --bad:#d7503f; --warn:#d8a33c; --nuke:#ffd25e;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:6px; --ui:1; --fs:14px; --panelw:400px;
  --shadow:0 10px 34px rgba(0,0,0,.5);
}
html[data-theme="ash"]{
  --bg:#08090b; --bg2:#0e1013; --bg3:#15181c; --bg4:#1c2126;
  --line:#242a30; --line2:#333c44; --accent:#c9c2b4; --accent2:#7fa6c4; --accentInk:#101010;
}
html[data-theme="sand"]{
  --bg:#191510; --bg2:#221c15; --bg3:#2c241b; --bg4:#372d22;
  --line:#43372a; --line2:#5a4a38; --txt:#f0e6d6; --txt2:#cdbda6; --dim:#a5927a;
  --accent:#e8b45e; --accent2:#8fbf9a; --accentInk:#211703;
}
html[data-theme="ice"]{
  --bg:#0a0f14; --bg2:#101822; --bg3:#17222e; --bg4:#1f2d3c;
  --line:#27384a; --line2:#365068; --accent:#6fc3f0; --accent2:#8fe0c4; --accentInk:#04141d;
}
html[data-theme="paper"]{
  --bg:#e9e6df; --bg2:#f4f2ec; --bg3:#fbfaf6; --bg4:#ffffff;
  --line:#cfc9bd; --line2:#b3ab9c;
  --txt:#20262c; --txt2:#48535e; --dim:#6c7883; --faint:#95a0aa;
  --accent:#a8681a; --accent2:#1f6a97; --accentInk:#fff;
  --shadow:0 10px 30px rgba(40,40,40,.18);
}
html[data-theme="contrast"]{
  --bg:#000; --bg2:#0a0a0a; --bg3:#141414; --bg4:#1e1e1e;
  --line:#4a4a4a; --line2:#6a6a6a; --txt:#fff; --txt2:#e0e0e0; --dim:#bdbdbd;
  --accent:#ffd400; --accent2:#00d0ff; --accentInk:#000;
  --good:#00e05a; --bad:#ff5a4a; --warn:#ffc400;
}
/* colour-blind friendly faction palette toggle */
html[data-cb="1"]{ --accent:#f0c419; --accent2:#3b9ae1; --good:#1f9e8a; --bad:#e0662b; }

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--sans); font-size:calc(var(--fs) * var(--ui));
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.spacer{flex:1}

/* ---------------------------------------------------------------- controls */
button{
  font-family:inherit; font-size:.92em; cursor:pointer; border-radius:var(--r);
  border:1px solid var(--line2); background:var(--bg3); color:var(--txt);
  padding:.42em .8em; transition:background .12s, border-color .12s, transform .06s;
}
button:hover:not(:disabled){background:var(--bg4); border-color:var(--accent2)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.4; cursor:not-allowed}
button:focus-visible, input:focus-visible, select:focus-visible{outline:2px solid var(--accent2); outline-offset:1px}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--accentInk); font-weight:650}
button.primary:hover:not(:disabled){filter:brightness(1.1)}
button.ghost{background:transparent}
button.danger{background:#3a1d19; border-color:#6b2c23; color:#f0a094}
html[data-theme="paper"] button.danger{background:#f7dcd6; border-color:#c98b7e; color:#7a2418}
button.big{padding:.7em 1.4em; font-size:1.02em}
button.icon{padding:.25em .55em; font-size:1.2em; line-height:1}
button.tiny{padding:.2em .5em; font-size:.8em}
kbd{font-family:var(--mono); font-size:.68em; background:rgba(0,0,0,.28); padding:.1em .35em;
    border-radius:3px; margin-left:.5em}
html[data-theme="paper"] kbd{background:rgba(0,0,0,.09)}

input,select,textarea{
  font-family:inherit; font-size:.92em; background:var(--bg); border:1px solid var(--line2);
  color:var(--txt); border-radius:var(--r); padding:.5em .6em; width:100%;
}
html[data-theme="paper"] input, html[data-theme="paper"] select{background:#fff}
input[type=range]{padding:0; height:1.5em; accent-color:var(--accent)}
input[type=checkbox]{width:auto; accent-color:var(--accent)}
label{display:block; font-size:.76em; text-transform:uppercase; letter-spacing:.09em;
      color:var(--dim); margin-bottom:.3em; font-weight:600}
.hint{text-transform:none; letter-spacing:0; color:var(--faint); font-weight:400}
h1,h2,h3,h4{margin:0}
a{color:var(--accent2)}

/* ---------------------------------------------------------------- doors */
.fullscreen{position:fixed; inset:0; overflow:auto; display:flex; align-items:flex-start;
  justify-content:center; padding:min(6vh,54px) 18px;
  background:
    radial-gradient(1200px 660px at 72% -12%, color-mix(in srgb, var(--accent2) 14%, transparent) 0%, transparent 62%),
    radial-gradient(900px 520px at 8% 112%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 60%),
    var(--bg);
}
.gate-box{width:100%; max-width:420px; text-align:center}
.gate-box.wide{max-width:470px}
.emblem{width:74px; height:74px; margin:0 auto 14px; color:var(--accent); opacity:.95}
.emblem.sm{width:30px; height:30px; margin:0 10px 0 0}
.emblem svg{width:100%; height:100%}
.gate-box h1{font-size:clamp(26px,4.4vw,40px); letter-spacing:.22em; font-weight:800;
  background:linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.tag{color:var(--dim); margin:.5em 0 1.7em; font-size:.98em}
.gate-box form{display:flex; flex-direction:column; gap:.7em; text-align:left}
.gate-box label{margin-top:.3em}
.tabs2{display:flex; gap:.4em; margin-bottom:1.1em; background:var(--bg2); padding:.3em;
  border-radius:var(--r); border:1px solid var(--line)}
.tabs2 button{flex:1; border:none; background:transparent; color:var(--dim)}
.tabs2 button.on{background:var(--bg4); color:var(--accent)}
.err{color:var(--bad); font-size:.88em; margin-top:.8em; min-height:1.2em}

/* ---------------------------------------------------------------- shells */
.shell{width:100%; max-width:1180px; display:flex; flex-direction:column; gap:16px}
.shell-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.shell-head h2{font-size:1.35em; letter-spacing:.03em}
.who{color:var(--dim); font-size:.88em}

.world-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.world-card{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:14px;
  display:flex; flex-direction:column; gap:9px; transition:border-color .15s, transform .1s}
.world-card:hover{border-color:var(--accent2); transform:translateY(-2px)}
.world-card h3{font-size:1.05em}
.world-card .meta{color:var(--dim); font-size:.82em; line-height:1.6}
.world-card .flag{width:12px;height:12px;border-radius:3px;display:inline-block;vertical-align:-1px;margin-right:6px}
.world-card .row{display:flex; gap:.5em; margin-top:auto; padding-top:6px}
.world-card .row button{flex:1}
.world-empty{grid-column:1/-1; text-align:center; color:var(--dim); padding:60px 20px; line-height:1.8;
  border:1px dashed var(--line2); border-radius:10px}

/* ---------------------------------------------------------------- setup */
.setup-body{display:grid; grid-template-columns:330px 1fr; gap:18px; align-items:start}
.setup-side{display:flex; flex-direction:column; gap:12px; position:sticky; top:0;
  background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:14px}
.setup-main{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.optgroup{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:13px}
.optgroup h3{font-size:.8em; text-transform:uppercase; letter-spacing:.11em; color:var(--accent);
  margin-bottom:11px; font-weight:700}
.opt{margin-bottom:13px}
.opt:last-child{margin-bottom:0}
.opt .oh{display:flex; align-items:center; justify-content:space-between; gap:8px}
.opt .oh span{font-size:.9em; font-weight:600}
.opt .help{color:var(--dim); font-size:.79em; line-height:1.5; margin-top:.3em}
.swatches{display:flex; gap:6px; flex-wrap:wrap}
.swatches i{width:24px; height:24px; border-radius:5px; cursor:pointer; display:block;
  border:2px solid transparent}
.swatches i.on{border-color:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.5)}
.citycard{background:var(--bg3); border:1px solid var(--line); border-radius:var(--r);
  padding:10px; font-size:.85em; color:var(--txt2); min-height:2em; line-height:1.6}
.citycard b{color:var(--accent)}
.results{position:relative; z-index:40}
.results div{padding:.5em .65em; background:var(--bg3); border:1px solid var(--line); border-top:none;
  cursor:pointer; font-size:.88em}
.results div:hover{background:var(--bg4)}
.results div small{color:var(--dim); margin-left:.5em}
.btnrow{display:flex; gap:.5em; flex-wrap:wrap}
.btnrow button{flex:1; min-width:90px}

/* ---------------------------------------------------------------- game shell */
#game{display:flex; flex-direction:column; height:100%}
#topbar{display:flex; align-items:center; gap:8px; padding:6px 9px; background:var(--bg2);
  border-bottom:1px solid var(--line); flex:0 0 auto; overflow-x:auto; scrollbar-width:thin}
.brand{font-weight:900; letter-spacing:.14em; color:var(--accent); font-size:1.05em; padding-right:4px}
.resbar{display:flex; gap:6px}
.res{display:flex; align-items:baseline; gap:5px; background:var(--bg3); border:1px solid var(--line);
  border-radius:var(--r); padding:.28em .6em; white-space:nowrap; cursor:default}
.res i{font-style:normal; font-size:.66em; letter-spacing:.08em; color:var(--dim)}
.res b{font-family:var(--mono); font-size:.9em; font-variant-numeric:tabular-nums}
.res .delta{font-family:var(--mono); font-size:.72em; margin-left:.15em}
.res .delta.up{color:var(--good)} .res .delta.down{color:var(--bad)}
.res.hot{border-color:var(--bad); animation:pulseBad 1.4s ease-in-out infinite}
@keyframes pulseBad{0%,100%{box-shadow:0 0 0 0 rgba(215,80,63,0)}50%{box-shadow:0 0 0 3px rgba(215,80,63,.22)}}
.turnbox{display:flex; align-items:center; gap:8px; margin-left:auto}
#r-date{font-family:var(--mono); color:var(--dim); font-size:.82em; white-space:nowrap}
.alerts{display:flex; gap:5px}
.chip{font-size:.72em; padding:.2em .55em; border-radius:20px; border:1px solid var(--line2);
  color:var(--dim); white-space:nowrap; cursor:pointer}
.chip.bad{border-color:var(--bad); color:#f0a094; background:rgba(215,80,63,.12)}
.chip.warn{border-color:var(--warn); color:#e6c477; background:rgba(216,163,60,.12)}
.chip.nuke{border-color:var(--nuke); color:var(--nuke); background:rgba(255,210,94,.14);
  animation:pulseBad 2.2s ease-in-out infinite}

#main{flex:1; display:flex; min-height:0; position:relative}
body[data-side="left"] #main{flex-direction:row-reverse}
#map{flex:1; background:#080b0e; min-width:0}
#fx{position:absolute; inset:0; pointer-events:none; z-index:410}

#side{width:var(--panelw); flex:0 0 var(--panelw); background:var(--bg2);
  border-left:1px solid var(--line); display:flex; flex-direction:column; min-height:0; position:relative}
body[data-side="left"] #side{border-left:none; border-right:1px solid var(--line)}
body[data-side="hidden"] #side{display:none}
.panel-grip{position:absolute; left:-3px; top:0; bottom:0; width:7px; cursor:col-resize; z-index:20}
body[data-side="left"] .panel-grip{left:auto; right:-3px}
.panel-grip:hover{background:var(--accent2); opacity:.35}

#tabs{display:flex; border-bottom:1px solid var(--line); flex:0 0 auto; overflow-x:auto; scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
#tabs button{flex:1 0 auto; border:none; border-radius:0; background:transparent; color:var(--dim);
  padding:.62em .5em; font-size:.76em; letter-spacing:.04em; border-bottom:2px solid transparent; min-width:56px}
#tabs button.on{color:var(--accent); border-bottom-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent)}
#tabs button .dot{display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--bad); margin-left:4px; vertical-align:1px}
#panes{flex:1; overflow-y:auto; min-height:0; scrollbar-width:thin}
.pane{display:none; padding:11px}
.pane.on{display:block}
body[data-compact="1"] .pane{padding:7px}
body[data-compact="1"] .blk{padding:8px; margin-bottom:8px}

/* ---------------------------------------------------------------- floating */
.floating{position:absolute; z-index:500}
#mapctl{top:10px; left:52px; display:flex; gap:6px; align-items:flex-start; flex-wrap:wrap;
  max-width:calc(100% - 70px)}
#mapctl input{width:190px}
#mapctl input,#mapctl button,.seg{background:color-mix(in srgb, var(--bg2) 92%, transparent);
  backdrop-filter:blur(6px); border-color:var(--line2)}
#mapctl button.toggle.on{background:var(--accent); color:var(--accentInk); border-color:var(--accent)}
.searchwrap{position:relative}
#find-results{position:absolute; top:calc(100% + 2px); left:0; width:270px}
.seg{display:flex; border:1px solid var(--line2); border-radius:var(--r); overflow:hidden}
.seg button{border:none; border-radius:0; background:transparent; font-size:.8em; padding:.42em .6em}
.seg button.on{background:var(--accent); color:var(--accentInk)}
body[data-mapctl="hidden"] #mapctl{display:none}

#flowbar{bottom:36px; left:52px; display:flex; gap:6px; flex-wrap:wrap; max-width:52%}
body[data-ticker="hidden"] #flowbar{bottom:10px}
#map .leaflet-bottom{bottom:26px}
body[data-ticker="hidden"] #map .leaflet-bottom{bottom:0}
.flow{background:color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter:blur(6px);
  border:1px solid var(--line2); border-radius:var(--r); padding:.32em .6em; font-size:.76em;
  display:flex; align-items:center; gap:.45em; white-space:nowrap}
.flow i{font-style:normal; color:var(--dim); letter-spacing:.06em; font-size:.9em}
.flow b{font-family:var(--mono); font-variant-numeric:tabular-nums}
.flow .pos{color:var(--good)} .flow .neg{color:var(--bad)}
body[data-flow="hidden"] #flowbar{display:none}

#toasts{position:absolute; bottom:44px; right:12px; z-index:900; display:flex; flex-direction:column;
  gap:6px; max-width:min(420px,46vw); align-items:flex-end}
body[data-side="left"] #toasts{right:auto; left:12px; align-items:flex-start}
.toast{background:color-mix(in srgb, var(--bg2) 96%, transparent); border:1px solid var(--line2);
  border-left:3px solid var(--accent); border-radius:var(--r); padding:.55em .8em; font-size:.84em;
  line-height:1.5; box-shadow:var(--shadow); animation:tin .22s ease; backdrop-filter:blur(6px)}
.toast.good{border-left-color:var(--good)} .toast.bad{border-left-color:var(--bad)}
.toast.nuke{border-left-color:var(--nuke)}
@keyframes tin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

#tickerwrap{position:absolute; left:0; right:0; bottom:0; height:26px; background:var(--bg2);
  border-top:1px solid var(--line); overflow:hidden; z-index:600; display:flex; align-items:center}
#ticker{white-space:nowrap; font-size:.78em; color:var(--dim); padding-left:100%;
  animation:tick 52s linear infinite}
#ticker span{margin-right:3em}
#ticker b{color:var(--txt2)}
@keyframes tick{to{transform:translateX(-100%)}}
body[data-ticker="hidden"] #tickerwrap{display:none}
body[data-ticker="hidden"] #toasts{bottom:12px}

/* ---------------------------------------------------------------- blocks */
.blk{background:var(--bg3); border:1px solid var(--line); border-radius:8px; padding:11px; margin-bottom:10px}
.blk h3{font-size:.74em; text-transform:uppercase; letter-spacing:.1em; color:var(--dim);
  margin-bottom:8px; font-weight:700; display:flex; align-items:center; gap:.5em}
.blk h3 .r{margin-left:auto; font-weight:400; text-transform:none; letter-spacing:0}
.cityhead{margin-bottom:10px}
.cityhead h2{font-size:1.3em; line-height:1.2}
.cityhead .sub{color:var(--dim); font-size:.83em; margin-top:.25em}
.pill{display:inline-block; font-size:.68em; letter-spacing:.05em; padding:.16em .5em; border-radius:10px;
  border:1px solid var(--line2); color:var(--dim); margin:0 .35em .3em 0; vertical-align:middle}
.pill.you{background:color-mix(in srgb,var(--accent) 18%,transparent); border-color:var(--accent); color:var(--accent)}
.pill.enemy{background:rgba(215,80,63,.15); border-color:#8c3a30; color:#e79184}
.pill.state{background:rgba(78,163,216,.13); border-color:#3a6c8c; color:#8fc4e4}
.pill.warn{background:rgba(216,163,60,.14); border-color:#8a6a24; color:#e0be6e}
.pill.good{background:rgba(76,175,106,.14); border-color:#2f6b43; color:#84d3a0}
.pill.nuke{background:rgba(255,210,94,.16); border-color:#a8862c; color:var(--nuke)}

.kv{display:flex; justify-content:space-between; gap:10px; padding:.24em 0; font-size:.86em;
  border-bottom:1px dotted color-mix(in srgb,var(--line) 70%,transparent)}
.kv:last-child{border-bottom:none}
.kv span{color:var(--dim)}
.kv b{font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
.kv b.good{color:var(--good)} .kv b.bad{color:var(--bad)} .kv b.warn{color:var(--warn)}

.bar{height:6px; background:color-mix(in srgb,var(--bg) 80%,#000); border-radius:3px; overflow:hidden; margin:.3em 0 .15em}
.bar>i{display:block; height:100%; background:var(--accent2); transition:width .3s}
.bar.good>i{background:var(--good)} .bar.bad>i{background:var(--bad)} .bar.warn>i{background:var(--warn)}
.bar.nuke>i{background:linear-gradient(90deg,var(--warn),var(--nuke))}

table.t{width:100%; border-collapse:collapse; font-size:.85em}
table.t th{text-align:left; color:var(--dim); font-weight:600; font-size:.75em; text-transform:uppercase;
  letter-spacing:.07em; padding:.3em .35em; border-bottom:1px solid var(--line)}
table.t td{padding:.34em .35em; border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  font-family:var(--mono); font-variant-numeric:tabular-nums}
table.t td.n{font-family:var(--sans)}
table.t td.num{text-align:right}
table.t tr:hover td{background:color-mix(in srgb,var(--txt) 4%,transparent)}
table.t tr.clickable{cursor:pointer}

.note{color:var(--dim); font-size:.8em; line-height:1.55; margin-top:.5em}
.empty{color:var(--faint); font-size:.86em; text-align:center; padding:22px 10px; line-height:1.7}

.row{display:flex; align-items:center; gap:8px; padding:.45em 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.row:last-child{border-bottom:none}
.row .ic{width:26px; height:26px; flex:0 0 26px; border-radius:5px; background:var(--bg);
  border:1px solid var(--line2); display:flex; align-items:center; justify-content:center;
  font-size:.66em; font-family:var(--mono); color:var(--accent2); font-weight:700}
.row .ic.done{color:var(--good); border-color:var(--good)}
.row .ic.locked{color:var(--faint)}
.row .tx{flex:1; min-width:0}
.row .tx b{display:block; font-size:.88em; font-weight:600}
.row .tx small{color:var(--dim); font-size:.78em; display:block; line-height:1.45}
.row>button{flex:0 0 auto; font-size:.8em}

.logline{font-size:.82em; padding:.4em .55em; border-left:2px solid var(--line2); margin-bottom:4px;
  background:color-mix(in srgb,var(--txt) 3%,transparent); line-height:1.5; border-radius:0 4px 4px 0}
.logline.win{border-left-color:var(--good)} .logline.loss{border-left-color:var(--bad)}
.logline.warnl{border-left-color:var(--warn)} .logline.info{border-left-color:var(--accent2)}
.logline .w{color:var(--faint); font-family:var(--mono); font-size:.76em; margin-right:.5em}

.mkt{display:flex; align-items:center; gap:8px; padding:.5em 0;
  border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.mkt:last-child{border-bottom:none}
.mkt .mn{flex:1; min-width:0}
.mkt .mn b{font-size:.88em; display:block}
.mkt .mn small{color:var(--dim); font-size:.77em; display:block; line-height:1.4}
.mkt .mp{font-family:var(--mono); font-size:.82em; color:var(--accent); white-space:nowrap}
.mkt input{width:70px; text-align:right; font-family:var(--mono); padding:.3em .4em}
.mkt button{flex:0 0 auto}

/* ---------------------------------------------------------------- modal */
#modal{position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:2000; display:flex;
  align-items:center; justify-content:center; padding:20px; animation:fadein .12s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--bg2); border:1px solid var(--line2); border-radius:10px; width:100%;
  max-width:640px; max-height:88vh; display:flex; flex-direction:column; box-shadow:var(--shadow);
  animation:popin .16s cubic-bezier(.2,.9,.3,1.2)}
.modal-box.wide{max-width:940px}
@keyframes popin{from{opacity:0; transform:scale(.96) translateY(10px)}to{opacity:1; transform:none}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:.8em 1em;
  border-bottom:1px solid var(--line)}
.modal-head span{font-size:1.05em; font-weight:700; letter-spacing:.02em}
.modal-head button{border:none; background:transparent; font-size:1.5em; line-height:1; padding:0 .2em; color:var(--dim)}
#modal-body{padding:1em; overflow-y:auto}
#modal-foot{padding:.7em 1em; border-top:1px solid var(--line); display:flex; gap:.5em; justify-content:flex-end; flex-wrap:wrap}

/* ---------------------------------------------------------------- map bits */
.leaflet-container{background:#080b0e; font-family:var(--sans)}
html[data-theme="paper"] .leaflet-container{background:#dfe4e8}
.leaflet-bar a{background:var(--bg2); color:var(--txt2); border-bottom-color:var(--line)}
.leaflet-bar a:hover{background:var(--bg4)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--bg2); color:var(--txt); border:1px solid var(--line2)}
.leaflet-tooltip{background:color-mix(in srgb,var(--bg2) 95%,transparent); border:1px solid var(--line2);
  color:var(--txt); font-size:.8em; box-shadow:none; backdrop-filter:blur(4px)}
.leaflet-tooltip-top:before{border-top-color:var(--line2)}
.leaflet-control-attribution{background:rgba(10,13,16,.7) !important; color:var(--faint) !important; font-size:9px}
html[data-theme="paper"] .leaflet-control-attribution{background:rgba(255,255,255,.75) !important}
.leaflet-control-attribution a{color:var(--dim) !important}
.city-lbl{font-size:10px; font-weight:600; color:#eef3f7; text-shadow:0 0 3px #000,0 0 6px #000,0 1px 2px #000;
  white-space:nowrap; pointer-events:none}
html[data-theme="paper"] .city-lbl{color:#1b2228; text-shadow:0 0 3px #fff,0 0 6px #fff}
body[data-labels="off"] .city-lbl{display:none}
.colmk{font-size:15px; text-shadow:0 0 4px #000; pointer-events:none; line-height:1}
.strikemk{font-size:14px; pointer-events:none; line-height:1; filter:drop-shadow(0 0 4px #000)}

/* ---------------------------------------------------------------- misc */
.split{display:grid; grid-template-columns:1fr 1fr; gap:.6em}
.tag-line{display:flex; flex-wrap:wrap; gap:.3em; margin-top:.4em}
.sliderrow{display:flex; align-items:center; gap:.6em}
.sliderrow input[type=range]{flex:1}
.sliderrow output{font-family:var(--mono); font-size:.82em; width:3.4em; text-align:right; color:var(--dim)}
.warnbox{background:rgba(215,80,63,.1); border:1px solid #7d3128; border-radius:var(--r);
  padding:.65em .8em; font-size:.85em; line-height:1.55; margin:.6em 0}
.warnbox.nuke{background:rgba(255,210,94,.09); border-color:#8a6a24}
.kbd-list{display:grid; grid-template-columns:auto 1fr; gap:.4em 1em; font-size:.86em; align-items:center}
.kbd-list kbd{margin:0; justify-self:start}

@media (max-width:1000px){
  .setup-body{grid-template-columns:1fr}
  .setup-side{position:static}
  :root{--panelw:340px}
}
@media (max-width:760px){
  #side{position:absolute; right:0; top:0; bottom:26px; z-index:700; box-shadow:var(--shadow)}
  body[data-side="left"] #side{left:0; right:auto}
  #flowbar{display:none}
  #mapctl{left:52px; max-width:calc(100% - 60px)}
}
@media print{ body{display:none} }


/* ---------------------------------------------------------------- WARMARCH landing */
.beta-chip{font-size:.62em; font-weight:800; letter-spacing:.12em; padding:.2em .55em;
  border-radius:4px; background:var(--accent); color:var(--accentInk); vertical-align:middle;
  white-space:nowrap}
#landing{position:fixed; inset:0; overflow-y:auto; background:
  radial-gradient(1300px 700px at 75% -14%, color-mix(in srgb, var(--accent2) 16%, transparent) 0%, transparent 60%),
  radial-gradient(1000px 600px at 6% 30%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%),
  var(--bg); scroll-behavior:smooth}
.land-nav{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:14px;
  padding:12px clamp(16px,4vw,44px); background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid color-mix(in srgb, var(--line) 60%, transparent)}
.land-logo{display:flex; align-items:center; gap:8px; font-weight:900; letter-spacing:.16em;
  color:var(--accent); font-size:1.05em}
.land-logo svg{width:24px; height:24px}
.land-link{color:var(--dim); text-decoration:none; font-size:.9em}
.land-link:hover{color:var(--txt)}
.land-cta{background:var(--accent); color:var(--accentInk); font-weight:700; text-decoration:none;
  padding:.5em 1.1em; border-radius:6px; font-size:.9em; transition:filter .12s, transform .1s}
.land-cta:hover{filter:brightness(1.12); transform:translateY(-1px)}
.land-cta.big{font-size:1.05em; padding:.75em 1.8em; display:inline-block; margin-top:1.4em}
.land-hero{max-width:820px; margin:0 auto; padding:clamp(40px,8vh,90px) 22px 40px; text-align:center;
  position:relative}
.hero-globe{width:min(300px,52vw); margin:0 auto 6px; opacity:.9}
.hg-sphere{fill:color-mix(in srgb, var(--accent2) 8%, transparent)}
.hg-line{fill:none; stroke:color-mix(in srgb, var(--accent2) 40%, transparent); stroke-width:.8}
.hg-rim{stroke:var(--accent2); stroke-width:1.6; opacity:.7}
.hg-dot{fill:var(--accent)}
.hg-arc{fill:none; stroke:var(--accent); stroke-width:1.2; stroke-dasharray:130;
  stroke-dashoffset:130; animation:arcdraw 5s ease-in-out infinite}
.hg-arc.a2{animation-delay:1.4s} .hg-arc.a3{animation-delay:2.8s}
.hg-dot{animation:dotpulse 2.6s ease-in-out infinite}
.hg-dot.d2{animation-delay:.5s} .hg-dot.d3{animation-delay:1s}
.hg-dot.d4{animation-delay:1.5s} .hg-dot.d5{animation-delay:2s}
@keyframes arcdraw{0%{stroke-dashoffset:130;opacity:0}12%{opacity:1}55%{stroke-dashoffset:0;opacity:1}75%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes dotpulse{0%,100%{opacity:.5}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .hg-arc,.hg-dot{animation:none; stroke-dashoffset:0; opacity:.8} }
.hero-title{font-size:clamp(44px,9vw,86px); font-weight:900; letter-spacing:.18em; line-height:1;
  background:linear-gradient(100deg, var(--accent) 20%, color-mix(in srgb, var(--accent) 40%, #fff));
  -webkit-background-clip:text; background-clip:text; color:transparent; margin:.1em 0 .15em}
.hero-sub{font-size:clamp(17px,2.6vw,24px); color:var(--txt2); font-weight:600; margin:.2em 0 .8em}
.hero-body{color:var(--dim); line-height:1.75; max-width:620px; margin:0 auto; font-size:1.02em}
.hero-note{color:var(--faint); font-size:.85em; margin-top:1em}
.land-feats{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
  max-width:1080px; margin:30px auto; padding:0 22px}
.feat{background:color-mix(in srgb, var(--bg2) 85%, transparent); border:1px solid var(--line);
  border-radius:12px; padding:22px; transition:border-color .15s, transform .12s}
.feat:hover{border-color:var(--accent2); transform:translateY(-3px)}
.feat h3{color:var(--accent); font-size:1.02em; letter-spacing:.03em; margin-bottom:.5em}
.feat p{color:var(--dim); line-height:1.7; font-size:.92em; margin:0}
.land-how{max-width:640px; margin:44px auto; padding:0 22px}
.land-how h2{text-align:center; letter-spacing:.06em; margin-bottom:.8em}
.land-how ol{color:var(--txt2); line-height:2.1; font-size:1.02em; padding-left:1.3em}
.land-how b{color:var(--accent)}
.land-enter{display:flex; justify-content:center; padding:30px 22px 50px}
.land-enter .gate-box{background:var(--bg2); border:1px solid var(--line); border-radius:14px;
  padding:30px 28px; max-width:400px; box-shadow:var(--shadow)}
.land-enter h2{letter-spacing:.06em}
.land-foot{border-top:1px solid var(--line); padding:26px 22px 44px; text-align:center;
  color:var(--faint); font-size:.82em; line-height:1.8}
.land-foot .cred{display:flex; gap:2.2em; justify-content:center; flex-wrap:wrap;
  font-size:1.15em; color:var(--txt2); margin-bottom:.9em}
.land-foot .cred b{color:var(--accent)}
#topbar .beta-chip{margin-right:2px}