:root{
  --bg:#070d12; --bg2:#0b141b; --panel:#0e1a22; --panel2:#122430;
  --line:rgba(120,180,205,.14); --line2:rgba(120,180,205,.08);
  --ink:#e8f4fb; --dim:#9fbccd; --faint:#63849a;
  --acc:#3fd0c8; --acc2:#57a8ff; --gold:#ffc857; --bad:#ff6b6b; --good:#4fdc8f; --warn:#ffa23a;
  --hud-h:52px; --nav-w:72px;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);overflow:hidden;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(120,180,205,.2);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- boot ---------------- */
#boot{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);
  transition:opacity .4s ease}
#boot.gone{opacity:0;pointer-events:none}
.bootbox{text-align:center;max-width:420px;padding:24px}
.bootbox h1{font-size:30px;font-weight:800;letter-spacing:-.6px}
.bootbox h1 span{color:var(--acc)}
.bootbox p{color:var(--dim);margin-top:10px;font-size:13.5px;line-height:1.6}
.spin{width:26px;height:26px;margin:22px auto 0;border:2px solid rgba(63,208,200,.22);
  border-top-color:var(--acc);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#bootmsg{margin-top:14px;font-size:12px;color:var(--faint);font-family:var(--mono)}

/* ---------------- shell ---------------- */
/* Fixed to the viewport and given an explicit pixel height from JS. This is
   immune to dvh quirks and follows a phone's address bar as it collapses. */
#app{display:none;position:fixed;inset:0;height:var(--appH,100%);
  grid-template-columns:var(--nav-w) 1fr;grid-template-rows:var(--hud-h) 1fr}
#app.on{display:grid}

/* HUD */
#hud{grid-column:1/-1;display:flex;align-items:center;gap:0;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0d1b24,#0a141b);padding-right:12px}
.brand{width:var(--nav-w);display:grid;place-items:center;font-weight:800;letter-spacing:.5px;
  font-size:15px;color:var(--acc);border-right:1px solid var(--line)}
.clock{display:flex;align-items:center;gap:14px;padding:0 16px;border-right:1px solid var(--line2);height:100%}
.clock .day{font-size:19px;font-weight:800;line-height:1}
.clock .cyc{font-size:10.5px;color:var(--faint);letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.live{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--good)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:pulse 1.8s infinite}
.live.stale{color:var(--warn)} .live.stale i{background:var(--warn)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.hudstats{display:flex;gap:0;flex:1;min-width:0;overflow:hidden;height:100%}
.hs{padding:0 14px;display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--line2);min-width:88px}
.hs i{font-style:normal;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:800}
.hs b{font-size:14px;font-weight:800;margin-top:1px}
.hs b.up{color:var(--good)} .hs b.down{color:var(--bad)}
.who{display:flex;align-items:center;gap:9px;padding-left:14px;white-space:nowrap}
.who .flag{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:11px;
  font-weight:800;background:var(--panel2);border:1px solid var(--line)}
.who .nm{font-weight:800;font-size:13px}
.who .sub{font-size:10.5px;color:var(--faint);font-weight:700}

/* nav rail */

/* main */
#main{overflow:hidden;position:relative}
.view{position:absolute;inset:0;display:none;overflow:hidden}
.view.on{display:block}
.scroll{position:absolute;inset:0;overflow-y:auto;padding:16px 18px 40px}

/* ---------------- map view ---------------- */
#v-map{display:none;grid-template-columns:1fr 330px}
#v-map.on{display:grid}
.mapwrap{position:relative;overflow:hidden}
#map{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.modebar{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:5px;z-index:2}
.modebar button{padding:5px 10px;border-radius:7px;font-size:11px;font-weight:800;letter-spacing:.02em;
  background:rgba(9,20,27,.86);border:1px solid var(--line);color:var(--dim);backdrop-filter:blur(8px)}
.modebar button:hover{border-color:var(--acc);color:var(--ink)}
.modebar button.on{background:var(--acc);border-color:var(--acc);color:#04231f}
.mapctl{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;gap:5px;z-index:2}
.mapctl button{width:31px;height:31px;border-radius:8px;background:rgba(9,20,27,.9);
  border:1px solid var(--line);color:var(--dim);font-size:15px;font-weight:800;display:grid;place-items:center}
.mapctl button:hover{border-color:var(--acc);color:var(--ink)}
.side{border-left:1px solid var(--line);background:var(--bg2);overflow-y:auto}

/* ---------------- generic bits ---------------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.card.tight{padding:11px}
h2.t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:800;
  margin-bottom:10px;display:flex;align-items:center;gap:8px}
h2.t .sp{flex:1}
h3.st{font-size:14.5px;font-weight:800;margin-bottom:3px}
.muted{color:var(--faint);font-size:12px}
.dim{color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.stat{background:var(--panel2);border:1px solid var(--line2);border-radius:9px;padding:9px 10px}
.stat i{font-style:normal;display:block;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:800}
.stat b{display:block;font-size:15px;font-weight:800;margin-top:2px}
.stat b small{font-size:11px;font-weight:700;color:var(--faint)}
.up{color:var(--good)} .down{color:var(--bad)} .gold{color:var(--gold)}

.bar{height:5px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;border-radius:9px;background:var(--acc);transition:width .5s}
.bar i.warn{background:var(--warn)} .bar i.bad{background:var(--bad)} .bar i.good{background:var(--good)}

.row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  border:1px solid var(--line2);background:var(--panel2);margin-bottom:6px}
.row .g{flex:1;min-width:0}
.row .n{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .v{font-weight:800;font-size:13px;white-space:nowrap}
.row.clk{cursor:pointer} .row.clk:hover{border-color:var(--acc)}
.row.me{border-color:rgba(255,226,122,.45);background:rgba(255,200,87,.07)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border-radius:9px;
  background:var(--acc);color:#04231f;font-weight:800;font-size:13px;transition:filter .15s,transform .06s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--dim)}
.btn.ghost:hover{border-color:var(--acc);color:var(--ink)}
.btn.danger{background:var(--bad);color:#2a0508}
.btn.warn{background:var(--warn);color:#2a1400}
.btn.sm{padding:6px 10px;font-size:11.5px;border-radius:7px}
.btn.wide{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btnrow{display:flex;gap:7px;flex-wrap:wrap}

.tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;background:rgba(120,180,205,.14);color:var(--dim)}
.tag.ai{background:rgba(120,180,205,.12)} .tag.human{background:rgba(255,200,87,.18);color:var(--gold)}
.tag.war{background:rgba(255,107,107,.18);color:var(--bad)}
.tag.good{background:rgba(79,220,143,.16);color:var(--good)}
.tag.known{background:rgba(79,220,143,.16);color:var(--good)}
.tag.advanced{background:rgba(87,168,255,.18);color:var(--acc2)}
.tag.experimental{background:rgba(255,162,58,.18);color:var(--warn)}
.tag.unknown{background:rgba(180,140,255,.18);color:#c0a6ff}
.tag.impossible{background:rgba(255,107,107,.18);color:var(--bad)}

label.f{display:block;margin-bottom:11px}
label.f>span{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:var(--faint);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px}
label.f>span b{color:var(--ink);font-size:12px}
input[type=range]{width:100%;-webkit-appearance:none;height:4px;border-radius:4px;
  background:rgba(255,255,255,.12);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--acc);border:2px solid #06171c;cursor:pointer}
/* Styled by exclusion, not by listing types. The old selector named text and
   number only, so password fell through to the browser's native box: narrow,
   white and unpadded on a dark form. Anything text-like gets this now, and any
   input type added later is covered without having to remember. */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select,textarea{width:100%;background:#081319;
  border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
textarea{resize:vertical;min-height:64px}

/* news */
.news{border-left:2px solid var(--line);padding:0 0 0 12px;margin-bottom:14px;position:relative}
.news::before{content:"";position:absolute;left:-5px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--faint)}
.news.s3::before{background:var(--acc2)} .news.s4::before{background:var(--warn)}
.news.s5::before{background:var(--bad);box-shadow:0 0 9px var(--bad)}
.news .meta{font-size:10px;color:var(--faint);font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.news .h{font-weight:800;font-size:13.5px;margin:2px 0 3px;line-height:1.35}
.news .b{font-size:12.5px;color:var(--dim);line-height:1.55}

/* toast */
#toast{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;
  align-items:flex-end;pointer-events:none;max-width:340px}
.tst{background:#0d2029;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:9px;
  padding:9px 13px;font-size:12.5px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.5);
  animation:tin .25s ease-out,tout .3s ease-in 4.2s forwards}
.tst.bad{border-left-color:var(--bad)} .tst.good{border-left-color:var(--good)}
.tst b{display:block;font-weight:800;margin-bottom:2px}
@keyframes tin{from{opacity:0;transform:translateX(20px)}}
@keyframes tout{to{opacity:0;transform:translateX(20px)}}

/* modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(3,9,13,.78);backdrop-filter:blur(5px);
  display:none;place-items:center;padding:24px}
.modal.on{display:grid}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:100%;max-width:520px;
  max-height:86vh;overflow-y:auto;padding:20px}
.mbox h3{font-size:17px;font-weight:800;margin-bottom:4px}
.mbox .sub{color:var(--faint);font-size:12.5px;margin-bottom:16px}
.warnbox{background:rgba(255,107,107,.09);border:1px solid rgba(255,107,107,.3);border-radius:10px;
  padding:12px;margin:12px 0}
.warnbox .l{display:flex;justify-content:space-between;font-size:12.5px;padding:3px 0}
.warnbox .l span{color:var(--dim)} .warnbox .l b{font-weight:800}

/* country picker */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:12px}
.pk{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  transition:border-color .15s,transform .06s}
.pk:hover{border-color:var(--acc);transform:translateY(-1px)}
.pk.taken{opacity:.42;cursor:not-allowed}
.pk .n{font-weight:800;font-size:13.5px}
.pk .s{font-size:11px;color:var(--faint);margin-top:2px}
.searchbar{display:flex;gap:8px;align-items:center}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  font-weight:800;padding:6px 8px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel)}
td{padding:6px 8px;border-bottom:1px solid var(--line2)}
tr.clk{cursor:pointer} tr.clk:hover td{background:rgba(120,180,205,.06)}
td.r,th.r{text-align:right}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(max-width:1100px){.cols{grid-template-columns:1fr}#v-map{grid-template-columns:1fr 290px}}
@media(max-width:820px){
  :root{--nav-w:60px}
  #v-map{grid-template-columns:1fr}
  #v-map .side{display:none}
  .hudstats .hs:nth-child(n+4){display:none}
}

/* ---------------- auth + session ---------------- */
.authbox{max-width:340px;width:100%}
.authbox .authnote{color:var(--warn);font-size:12.5px;margin-top:8px}
.authtabs{margin:18px 0 14px}
.autherr{color:var(--bad);font-size:12.5px;min-height:17px;margin-bottom:8px;font-weight:600}
.authbox label.f{text-align:left}
.overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:var(--bg)}
.sesh{display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--line2);margin-left:12px}
.sesh .t{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--dim);min-width:42px}

/* ---------------- mobile ---------------- */
@media (max-width:820px){
  :root{--hud-h:auto;--nav-w:0px}
  body{overflow:hidden}
  #app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  #hud{flex-wrap:wrap;padding:6px 10px 4px;gap:6px;row-gap:4px}
  .brand{display:none}
  .clock{padding:0 10px 0 0;border-right:0;height:auto}
  .clock .day{font-size:16px}
  .hudstats{order:3;width:100%;overflow-x:auto;border-top:1px solid var(--line2);padding-top:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hudstats::-webkit-scrollbar{display:none}
  .hudstats .hs{display:flex !important;min-width:74px;padding:0 10px;border-right:1px solid var(--line2)}
  .hs b{font-size:12.5px}
  .who{margin-left:auto;padding-left:0;gap:6px}
  .who .flag{width:22px;height:22px;font-size:9px;border-radius:6px}
  .who .nm{font-size:11.5px} .who .sub{display:none}
  .sesh{margin-left:6px;padding-left:8px}
  .sesh .t{font-size:11px;min-width:34px}

  /* nav becomes a bottom bar */
  
  
  
  
  
  
  

  main{grid-row:2}
  .scroll{padding:12px 12px 24px}
  .cols{grid-template-columns:1fr;gap:10px}
  .grid3,.grid4{grid-template-columns:1fr 1fr}
  #v-map{grid-template-columns:1fr}
  #v-map .side{display:none}
  #v-map.showside .mapwrap{display:none}
  #v-map.showside .side{display:block;border-left:0}
  .modebar{gap:4px;top:8px;left:8px;right:8px;max-height:64px;overflow-y:auto}
  .modebar button{padding:4px 8px;font-size:10.5px}
  .mapctl{bottom:10px;right:10px}
  .mapctl button{width:36px;height:36px}
  .mbox{max-height:88vh;padding:16px}
  .pickgrid{grid-template-columns:1fr}
  #toast{left:10px;right:10px;bottom:70px;max-width:none;align-items:stretch}
  table{font-size:11.5px}
  th,td{padding:5px 6px}
}
@media (max-width:420px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr 1fr}
  .stat b{font-size:13.5px}
}

/* segmented control (auth tabs, buy amounts) */
.seg{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:11px;padding:4px}
.seg button{flex:1;border:0;background:transparent;color:var(--faint);font:inherit;
  font-size:12.5px;font-weight:800;padding:8px 0;border-radius:8px;cursor:pointer;
  transition:background .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--acc);color:#04202a}

/* stop the browser painting autofilled fields white on a dark form */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #081319 inset;
  caret-color:var(--ink);
  border:1px solid var(--line);
}

/* ---------------- the capital (3D) ---------------- */
#v-capital{background:#0a1620}
#cap{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.capprompt{position:absolute;left:50%;transform:translateX(-50%);bottom:112px;z-index:4;
  background:rgba(8,22,30,.92);border:1px solid var(--acc);border-radius:12px;padding:10px 16px;
  font-weight:800;font-size:14px;display:none;text-align:center;backdrop-filter:blur(8px);
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.capprompt.on{display:block}
.capprompt small{display:block;font-weight:700;font-size:11px;color:var(--faint);margin-top:3px}
.caphud{position:absolute;top:12px;left:12px;z-index:4;background:rgba(8,22,30,.82);
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:12px;
  backdrop-filter:blur(8px);max-width:240px;line-height:1.5}
.caphud b{display:block;font-size:13.5px;font-weight:800;margin-bottom:2px}
.caphud .k{color:var(--faint);font-size:11px}
#capTags{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
#capTags .nt{position:absolute;transform:translate(-50%,-100%);background:rgba(8,22,30,.85);
  border:1px solid var(--line);border-radius:7px;padding:2px 7px;font-size:11px;font-weight:800;
  white-space:nowrap;color:var(--gold)}
#capTags .nt span{color:var(--faint);font-weight:700}
.capact{position:absolute;right:20px;bottom:30px;z-index:5;display:none;
  width:82px;height:82px;border-radius:50%;background:var(--acc);color:#04231f;
  font-weight:800;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.capact.on{display:block}
#joy{position:absolute;left:24px;bottom:28px;width:118px;height:118px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--line);z-index:5;display:none;
  touch-action:none}
#joyKnob{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;
  border-radius:50%;background:var(--acc);opacity:.85;pointer-events:none}
@media (max-width:820px){ #joy{display:block} .capact{display:none} .capact.on{display:block}
  .capprompt{bottom:158px;font-size:13px} .caphud{font-size:11px;padding:7px 10px;max-width:190px} }

/* ---------------- territory build UI ---------------- */
#capTags .st{position:absolute;transform:translate(-50%,-100%);background:rgba(8,22,30,.8);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:10.5px;font-weight:800;
  white-space:nowrap;color:var(--dim)}
#capTags .st.bld{color:var(--warn);border-color:rgba(255,162,58,.5)}
/* ---------------- build panel ----------------
   Was a single sideways scroller holding two dozen buttons, so choosing meant
   dragging blindly through a strip. Now a titled sheet with a wrapping grid:
   the treasury is in the header because that is what you are really checking,
   and unaffordable and locked projects are dimmed differently so you can tell
   "not yet" from "not ever" without reading. */
.buildbar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:none;
  flex-direction:column;max-height:min(62vh,420px);
  background:rgba(8,20,27,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);border-radius:16px 16px 0 0;
  box-shadow:0 -12px 40px rgba(0,0,0,.5);
  padding-bottom:env(safe-area-inset-bottom)}
.buildbar.on{display:flex}
.bbhead{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;
  border-bottom:1px solid var(--line2);flex:0 0 auto}
.bbhead b{font-size:14px;font-weight:800;letter-spacing:.02em}
.bbhead .bbcash{margin-left:auto;font-size:13px;font-weight:800;color:var(--acc)}
.bbhead .bbx{width:30px;height:30px;border-radius:50%;font-size:19px;color:var(--faint);
  background:transparent;border:0;line-height:1}
.bbhead .bbx:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.bbgrid{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:8px;padding:12px 14px 16px;scrollbar-width:none}
.bbgrid::-webkit-scrollbar{display:none}
.bbgrid button{text-align:left;padding:10px 11px;border-radius:11px;min-width:0;
  background:var(--panel2);border:1px solid var(--line2)}
.bbgrid button:hover:not(:disabled){border-color:var(--acc);background:rgba(63,208,200,.08)}
.bbgrid button b{display:block;font-size:12.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bbgrid button span{display:block;font-size:10.5px;color:var(--faint);
  font-weight:700;margin-top:3px}
.bbgrid button i{font-style:normal;margin-right:4px}
.bbgrid button i.s{color:var(--gold)}
.bbgrid button.star b{color:var(--gold)}
/* cannot afford it yet, versus cannot build it at all */
.bbgrid button.broke{opacity:.62;border-style:dashed}
.bbgrid button.broke span{color:var(--warn)}
.bbgrid button.locked{opacity:.38}
@media (max-width:1000px), (max-height:560px){
  .buildbar{max-height:min(70vh,300px);border-radius:14px 14px 0 0}
  .bbhead{padding:9px 12px 8px}
  .bbgrid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:6px;padding:9px 12px 12px}
  .bbgrid button{padding:8px 9px}
  .bbgrid button b{font-size:11.5px} .bbgrid button span{font-size:9.5px}
}

.placepanel{position:absolute;left:50%;transform:translateX(-50%);bottom:20px;z-index:7;display:none;
  background:rgba(8,22,30,.95);border:1px solid var(--acc);border-radius:13px;padding:12px 16px;
  backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(0,0,0,.55);min-width:250px;text-align:center}
.placepanel.on{display:block}
.placepanel .pl{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.placepanel .pl b{font-size:14.5px;font-weight:800}
.placepanel .pl span{font-size:12.5px;color:var(--acc);font-weight:800}
.placepanel .plhint{font-size:11.5px;color:var(--faint);margin:5px 0 10px;font-weight:600}
.placepanel .plhint.bad{color:var(--bad)}
@media (max-width:820px){ .buildbar{bottom:0} .placepanel{bottom:96px;min-width:220px} }

/* leader customiser */
.lookrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.lookrow>span{width:74px;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.lookrow .sws{display:flex;gap:7px;flex-wrap:wrap}
.sw{width:32px;height:32px;border-radius:9px;border:2px solid transparent;cursor:pointer}
.sw.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(63,208,200,.22)}
#capTags .stn{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(150,230,210,.55);
  text-shadow:0 2px 8px rgba(0,0,0,.9);white-space:nowrap}

/* camera turn controls (touch) */
#turnPad{position:absolute;right:22px;bottom:124px;z-index:5;display:none;gap:8px}
#turnPad button{width:52px;height:52px;border-radius:50%;background:rgba(9,20,27,.85);
  border:1px solid var(--line);color:var(--dim);font-size:16px;font-weight:800}
#turnPad button:active{background:var(--acc);color:#04231f}
@media (max-width:820px){ #turnPad{display:flex} }

/* travel list */
.tvlist{max-height:46vh;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tvrow{text-align:left;background:var(--panel2);border:1px solid var(--line2);border-radius:9px;
  padding:8px 10px}
.tvrow:hover{border-color:var(--acc)}
.tvrow.on{border-color:var(--gold);background:rgba(255,200,87,.08)}
.tvrow b{display:block;font-size:12.5px;font-weight:800}
.tvrow span{display:block;font-size:10.5px;color:var(--faint);font-weight:700;margin-top:1px}
@media (max-width:820px){ .tvlist{grid-template-columns:1fr} }
#capTags .stn.nb{color:rgba(150,175,190,.42);font-size:10px}

/* ---------------- mobile fixes ---------------- */
/* A `1fr` grid track has min-width:auto, so a wide child (the 9-item nav, the
   HUD stat strip) can force the whole layout wider than the screen. Pin the
   tracks and the scrollers to min-width:0 so they shrink instead. */
#app{grid-template-columns:minmax(0,var(--nav-w)) minmax(0,1fr);min-width:0}
#hud,#main,
#hud{overflow:hidden}

@media (max-width:820px){
  #app{grid-template-columns:minmax(0,1fr)}
  
  #hud{max-width:100vw}
  .hudstats{max-width:100vw}

  /* the land HUD was eating a third of the screen */
  .caphud{max-width:none;left:8px;right:8px;top:6px;padding:7px 10px;
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px}
  .caphud b{font-size:12px;margin:0}
  .caphud .k{font-size:10.5px}
  .caphud .btnrow{width:100%;margin-top:2px}
  .caphud .btn.sm{padding:6px 8px;font-size:11px}

  /* controls sized for a thumb, kept clear of each other */
  #joy{width:104px;height:104px;left:14px;bottom:calc(66px + env(safe-area-inset-bottom))}
  #joyKnob{width:44px;height:44px;margin:-22px 0 0 -22px}
  #turnPad{right:14px;bottom:calc(140px + env(safe-area-inset-bottom));flex-direction:column}
  #turnPad button{width:46px;height:46px}
  .capact{right:14px;bottom:calc(66px + env(safe-area-inset-bottom));width:66px;height:66px;font-size:13px}
  .buildbar{bottom:calc(53px + env(safe-area-inset-bottom))}
  .placepanel{bottom:calc(150px + env(safe-area-inset-bottom));left:8px;right:8px;
    transform:none;min-width:0}
}

/* the Build button is always available; it is not tied to any prompt */
.buildbtn{position:absolute;right:20px;bottom:30px;z-index:8;
  width:82px;height:82px;border-radius:50%;background:var(--acc);color:#04231f;
  font-weight:800;font-size:14px;box-shadow:0 6px 24px rgba(0,0,0,.5);display:block}
.buildbtn:active{filter:brightness(1.1)}
@media (max-width:820px){
  .buildbtn{right:14px;bottom:calc(66px + env(safe-area-inset-bottom));
    width:66px;height:66px;font-size:12.5px}
}

/* ---------------- land: landscape on phones ---------------- */
/* Portrait is not blocked. The land simply reads better wide, and a player
   works that out in about a second without being told. */

/* landscape phones: short screens, so everything hugs the edges */
@media (max-width:1000px) and (orientation:landscape) and (max-height:520px){
  :root{--hud-h:38px}
  #hud{padding:2px 8px;gap:4px}
  .clock{padding:0 8px 0 0}
  .clock .day{font-size:14px} .clock .cyc{display:none}
  .hudstats .hs{min-width:62px;padding:0 7px}
  .hs i{font-size:8px} .hs b{font-size:11px}
  .who .flag{width:19px;height:19px}
  .who .nm{font-size:10.5px}
  .sesh .t{display:none}

  
  
  
  
  
  #app{grid-template-rows:var(--hud-h) 1fr}
  main{margin-left:52px}
  .scroll{padding:10px 12px 16px}

  .caphud{left:60px;top:6px;right:auto;max-width:210px;padding:6px 9px;font-size:10.5px;
    display:block}
  .caphud .btnrow{margin-top:4px}
  #joy{left:64px;bottom:12px;width:96px;height:96px}
  #joyKnob{width:40px;height:40px;margin:-20px 0 0 -20px}
  #turnPad{right:96px;bottom:14px;flex-direction:row;gap:6px}
  #turnPad button{width:44px;height:44px}
  .buildbtn{right:14px;bottom:14px;width:62px;height:62px;font-size:12px}
  .buildbar{bottom:0;padding:8px 10px}
  .buildbar button{min-width:92px;padding:6px 9px}
  .placepanel{bottom:84px;left:auto;right:14px;transform:none;min-width:0;max-width:230px;
    padding:9px 12px}
  #capTags .stn{font-size:9.5px}
}

/* ---------------- touch controls ---------------- */
/* Keyed off a coarse pointer, not screen width: a landscape phone is often
   wider than a tablet in portrait, and width alone hid the controls. */
@media (pointer: coarse){
  #joy{display:block}
  #turnPad{display:flex}
  .buildbtn{display:block}
}
@media (pointer: fine){
  #joy{display:none}
  #turnPad{display:none}
}

/* landscape phone: short and wide */
@media (orientation:landscape) and (max-height:520px){
  /* the nav is taken out of flow, so the grid must collapse to one column,
     otherwise main is squeezed into the old 72px rail */
  #app{grid-template-columns:minmax(0,1fr)}
  
  
  
  
  
  main{margin-left:52px}
  .scroll{padding:10px 12px 16px}
  .caphud{left:60px;top:5px;right:auto;width:auto;max-width:230px;min-width:170px;
    padding:6px 9px;font-size:10.5px;display:block}
  .caphud b{font-size:11.5px}
  .caphud .btnrow{display:flex;gap:5px;margin-top:4px}
  .caphud .btn.sm{flex:1;padding:5px 6px;font-size:10.5px}
  #joy{left:62px;bottom:10px;width:92px;height:92px}
  #joyKnob{width:38px;height:38px;margin:-19px 0 0 -19px}
  #turnPad{right:88px;bottom:12px;flex-direction:row;gap:6px}
  #turnPad button{width:42px;height:42px}
  .buildbtn{right:12px;bottom:12px;width:58px;height:58px;font-size:11.5px}
  .placepanel{left:auto;right:12px;bottom:78px;transform:none;
    min-width:0;width:214px;padding:8px 11px;text-align:left}
  .placepanel .pl b{font-size:12.5px}
  .placepanel .plhint{font-size:10.5px;margin:4px 0 7px}
  .buildbar{bottom:0;padding:7px 10px}
  .buildbar button{min-width:88px;padding:6px 8px}
  .buildbar button b{font-size:11px}
  .buildbar button span{font-size:9px}
}

/* ---------------- slide-out menu ---------------- */

#app{grid-template-columns:minmax(0,1fr)}   /* the rail is a drawer now */

main{margin-left:0}

@media (orientation:landscape) and (max-height:520px){
  
  
  
  main{margin-left:0}
  
  .caphud{left:10px}
  #joy{left:14px}
}

/* ---------------- day / night ---------------- */
body.daymode{
  --bg:#eef4f8; --bg2:#e2ebf1; --panel:#ffffff; --panel2:#f2f7fa;
  --line:rgba(20,60,80,.16); --line2:rgba(20,60,80,.09);
  --ink:#0d2029; --dim:#3d5a68; --faint:#6b8595;
  --acc:#0e9c92; --acc2:#1d6fd0; --gold:#b8860b; --good:#128a4f; --warn:#b45309; --bad:#c1372f;
}
body.daymode #hud{background:linear-gradient(180deg,#ffffff,#eef4f8)}
body.daymode 
body.daymode .buildbar{background:linear-gradient(0deg,rgba(240,247,250,.97),rgba(240,247,250,0))}
body.daymode .caphud,body.daymode .placepanel,body.daymode .modebar button,
body.daymode .mapctl button,body.daymode #turnPad button{background:rgba(255,255,255,.92)}
body.daymode #capTags .st{background:rgba(255,255,255,.85);color:var(--dim)}
body.daymode #capTags .stn{color:rgba(20,70,60,.6);text-shadow:0 1px 4px rgba(255,255,255,.9)}
body.daymode .tst{background:#ffffff}
body.daymode #boot,body.daymode .overlay{background:var(--bg)}
#dayToggle{margin-left:auto;padding:0 10px;font-size:15px;flex:0 0 auto}

/* zoom control */
#zoomPad{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:5px}
#zoomPad button{width:40px;height:40px;border-radius:11px;background:rgba(9,20,27,.88);
  border:1px solid var(--line);color:var(--dim);font-size:19px;font-weight:800;
  display:grid;place-items:center;backdrop-filter:blur(6px)}
#zoomPad button:hover{border-color:var(--acc);color:var(--ink)}
#zoomPad button:active{background:var(--acc);color:#04231f}
#zoomLvl{font-size:10px;font-weight:800;color:var(--faint);font-family:var(--mono);
  background:rgba(9,20,27,.85);border:1px solid var(--line);border-radius:7px;padding:2px 5px}
body.daymode #zoomPad button,body.daymode #zoomLvl{background:rgba(255,255,255,.92)}
@media (orientation:landscape) and (max-height:520px){
  #zoomPad{right:12px;top:auto;bottom:80px;transform:none;flex-direction:row}
  #zoomPad button{width:36px;height:36px;font-size:17px}
  #zoomLvl{display:none}
}

/* compass / reset view */
#compass{position:absolute;right:14px;top:14px;z-index:6;width:42px;height:42px;border-radius:50%;
  background:rgba(9,20,27,.88);border:1px solid var(--line);display:grid;place-items:center;
  backdrop-filter:blur(6px)}
#compass span{font-size:12px;font-weight:800;color:var(--acc);transition:transform .12s linear}
#compass:hover{border-color:var(--acc)}
#compass::before{content:"";position:absolute;top:4px;left:50%;margin-left:-3px;
  border-left:3px solid transparent;border-right:3px solid transparent;
  border-bottom:6px solid var(--bad)}
body.daymode #compass{background:rgba(255,255,255,.92)}
@media (orientation:landscape) and (max-height:520px){
  #compass{width:36px;height:36px;right:12px;top:10px}
}

/* click a state, then travel to it */
.statepick{position:absolute;z-index:9;display:none;background:rgba(8,22,30,.95);
  border:1px solid var(--acc);border-radius:12px;padding:11px 14px;backdrop-filter:blur(10px);
  box-shadow:0 10px 34px rgba(0,0,0,.55);min-width:172px;
  transform:translate(-50%,-115%);pointer-events:auto}
.statepick.on{display:block}
.statepick .sp-n{font-size:14.5px;font-weight:800}
.statepick .sp-t{font-size:11px;color:var(--faint);font-weight:700;margin:1px 0 9px}
.statepick .btnrow{display:flex;gap:6px}
.statepick .btn.sm{flex:1;padding:6px 8px;font-size:11.5px}
body.daymode .statepick{background:rgba(255,255,255,.96)}

/* ---- HUD breathing room on phones ---- */
@media (max-width:1000px), (max-height:560px){
  .hudstats{gap:0}
  .hs{min-width:0;padding:0 11px;flex:1 1 auto;max-width:none}
  .hs i{font-size:8.5px;letter-spacing:.06em;white-space:nowrap;overflow:visible}
  .hs b{font-size:13px;white-space:nowrap}
  .who{padding-left:10px;gap:7px;min-width:0}
  .who .nm{font-size:12px;max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .who .sub{display:none}
  .who .flag{width:22px;height:22px;font-size:9px}
  .sesh{margin-left:6px;padding-left:8px}
  .clock{padding:0 10px 0 0}
  .clock .cyc{display:none}
  #dayToggle{padding:0 8px;font-size:14px}
  /* the tag next to the country name wraps the row otherwise */
  .who .tag{display:none}
}

/* ---------------- lobby: worlds by code ---------------- */
.lbmine{width:100%;margin-bottom:16px}
.lbhead{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:7px;text-align:left}
.lbrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;margin-bottom:6px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px}
.lbrow:hover{border-color:var(--acc)}
.lbrow .g{flex:1;min-width:0}
.lbrow .n{font-size:13px;font-weight:800;display:flex;align-items:center;gap:6px}
.lbrow .s{font-size:11px;color:var(--faint);font-weight:700;margin-top:2px}
.lbrow .code{font-family:var(--mono);font-size:14px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.codein{text-transform:uppercase;letter-spacing:.42em;text-align:center;
  font-family:var(--mono);font-size:22px;font-weight:800}
.bigcode{font-family:var(--mono);font-size:44px;font-weight:800;letter-spacing:.18em;
  color:var(--gold);margin:18px 0 6px;text-shadow:0 2px 18px rgba(255,200,87,.28)}

/* ---------------- keep clear of the notch ----------------
   The page is served viewport-fit=cover so the land reaches the screen edges.
   In landscape the Dynamic Island sits over one side, so anything you have to
   read or tap gets pushed in by the safe-area inset. These resolve to 0 on a
   device without a notch, so it is safe to apply everywhere. */

#hud{padding-left:calc(10px + env(safe-area-inset-left));
     padding-right:calc(12px + env(safe-area-inset-right))}
#joy{left:calc(24px + env(safe-area-inset-left))}
#zoomPad{right:calc(16px + env(safe-area-inset-right))}
#compass{right:calc(16px + env(safe-area-inset-right))}
#turnPad{right:calc(22px + env(safe-area-inset-right))}
.capact,.buildbtn{right:calc(20px + env(safe-area-inset-right))}
.buildbar{padding-left:calc(12px + env(safe-area-inset-left));
          padding-right:calc(12px + env(safe-area-inset-right))}

/* the code chip was losing its last letter to the label */

/* ---------------- what to do next ----------------
   A country with ten menus and no stated goal reads as a pile of settings. This
   sits on the land and names the single next useful move, worked out from what
   the player actually has. It is dismissible and never nags twice. */
.goal{position:absolute;left:50%;transform:translateX(-50%);top:12px;z-index:8;display:none;
  align-items:center;gap:12px;max-width:min(560px,calc(100% - 32px));
  background:rgba(8,22,30,.94);border:1px solid var(--acc);border-radius:13px;
  padding:10px 12px 10px 15px;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.goal.on{display:flex}
.goal .g{flex:1;min-width:0}
.goal .gt{font-size:13.5px;font-weight:800}
.goal .gs{font-size:11.5px;color:var(--faint);font-weight:600;margin-top:2px}
.goal .goalx{width:26px;height:26px;border-radius:50%;color:var(--faint);font-size:16px;
  background:transparent;border:0;flex:0 0 auto}
.goal .goalx:hover{color:var(--ink)}
@media (max-width:1000px), (max-height:560px){
  .goal{top:8px;padding:8px 10px 8px 12px;gap:8px}
  .goal .gt{font-size:12px} .goal .gs{font-size:10.5px}
}

/* ---------------- the way home ----------------
   With the menu gone, any page that is not the land is a room with no door.
   This is the only route back, so it sits above everything and only appears
   when you are somewhere other than the land. */
#backLand{position:fixed;z-index:60;display:none;
  left:calc(12px + env(safe-area-inset-left));top:calc(10px + env(safe-area-inset-top));
  padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:800;
  background:var(--acc);color:#04231f;box-shadow:0 6px 20px rgba(0,0,0,.45)}
#backLand.on{display:block}

/* ---------------- taking office ----------------
   Choosing a country is the single biggest decision a player makes. It used to
   be confirmed by a toast in the corner, which read like a minor notification
   and left people unsure whether it had worked. */
.takeover{position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  background:rgba(4,10,14,.86);backdrop-filter:blur(8px);padding:24px;
  opacity:0;transition:opacity .26s ease}
.takeover.on{opacity:1}
.takeover .tk{max-width:460px;width:100%;text-align:center;
  transform:translateY(10px) scale(.98);transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.takeover.on .tk{transform:none}
.takeover .tkflag{width:64px;height:64px;margin:0 auto 16px;border-radius:16px;
  display:grid;place-items:center;font-size:20px;font-weight:800;letter-spacing:.04em;
  background:var(--acc);color:#04231f;box-shadow:0 10px 34px rgba(63,208,200,.32)}
.takeover .tkline{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.takeover h1{font-size:34px;font-weight:800;margin:4px 0 6px;letter-spacing:-.01em}
.takeover .tksub{font-size:12.5px;color:var(--faint);font-weight:700}
.takeover .tkgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 14px;text-align:left}
.takeover .tkmuted{font-size:12.5px;color:var(--dim);margin-bottom:18px}
@media (max-width:1000px), (max-height:560px){
  .takeover .tkflag{width:48px;height:48px;font-size:16px;margin-bottom:10px}
  .takeover h1{font-size:24px}
  .takeover .tkgrid{margin:12px 0 10px;gap:6px}
  .takeover .tkmuted{font-size:11.5px;margin-bottom:12px}
}