/* World War Command — visual theme (storyboard direction): dark navy, gold highlights, blue actions. Presentation only. */
:root{--bg:#081326;--card:#0f1e38;--card2:#132648;--line:#24406b;--txt:#e8eef8;--mut:#9fb0c8;--acc:#2f6fe0;--acc2:#4b8bff;--gold:#d9ad45;--gold2:#f3cf6b}
body{background:radial-gradient(1200px 600px at 50% -200px,#16305c 0%,var(--bg) 60%) fixed,var(--bg)}
header#topbar{background:linear-gradient(180deg,#0c1b36,#0a1730);border-bottom:1px solid rgba(217,173,69,.35)}
header#topbar .brand b{color:var(--gold2);letter-spacing:.3px}
#view>section,#view .card,.hmine,.nextstep,.meet .mcard,.pintro,.choose .gm,#advpanel,.uxask>div,#more .sheet{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
#view h2,.wiz h2,.welcome h1{color:var(--gold2)}
#view h3{color:#f0d68e}
.b{background:linear-gradient(180deg,var(--acc2),var(--acc));border:1px solid #1f56c0;color:#fff;border-radius:10px;font-weight:600}
.b:hover{filter:brightness(1.08)}
.b.q{background:transparent;border:1px solid var(--line);color:var(--txt)}
.b.gold,.welcome .wact .b:first-child{background:linear-gradient(180deg,var(--gold2),var(--gold));border-color:#a8822a;color:#1a1300}
input,select,textarea{background:#0a1730;border-color:var(--line);border-radius:8px}
input:focus,select:focus,textarea:focus,.b:focus-visible{outline:2px solid var(--gold2);outline-offset:1px}
#bnav{background:#0a1730;border-top:1px solid rgba(217,173,69,.35)}
#bnav button[aria-current=page],#bnav button.on{color:var(--gold2)}
#nav button.on,#nav button[aria-current=page]{background:rgba(217,173,69,.14);color:var(--gold2);border-left:3px solid var(--gold)}
.welcome{background:linear-gradient(180deg,rgba(19,38,72,.9),rgba(8,19,38,.95));border:1px solid rgba(217,173,69,.4);border-radius:18px;padding:22px}
.welcome .wlogo{color:var(--gold2);text-shadow:0 2px 12px rgba(217,173,69,.35)}
/* wizard stepper */
.wzsteps{display:flex;gap:4px;margin:4px 0 10px;padding:0;list-style:none}
.wzsteps li{flex:1;text-align:center;font-size:11px;color:var(--mut);min-width:0}
.wzsteps li i{display:flex;margin:0 auto 3px;width:26px;height:26px;border-radius:50%;border:2px solid var(--line);align-items:center;justify-content:center;font-style:normal;font-weight:700;color:var(--mut)}
.wzsteps li.on i{border-color:var(--gold);background:var(--gold);color:#1a1300}.wzsteps li.done i{border-color:var(--gold);color:var(--gold2)}
.wzsteps li.on{color:var(--gold2)}
.wzsteps li span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:420px){.wzsteps li span{display:none}.wzsteps li.on span{display:block}}
/* flag designer */
.fdes{display:grid;gap:12px}
.fprev{display:flex;justify-content:center;padding:12px;background:#0a1730;border:1px solid var(--line);border-radius:12px}
.fprev svg{width:min(260px,70vw);height:auto;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.tile{min-height:56px;border-radius:10px;border:2px solid var(--line);background:#0a1730;color:var(--txt);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;padding:4px;cursor:pointer}
.tile .g{font-size:22px;line-height:1}.tile svg{width:44px;height:28px;border-radius:3px}
.tile[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 2px rgba(217,173,69,.35) inset;background:#14284c}
.sw{display:flex;flex-wrap:wrap;gap:8px}.sw button{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer}
.sw button[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 3px var(--gold)}
.fdes .seg{display:flex;gap:6px;flex-wrap:wrap}.fdes .seg button{flex:1;min-width:90px}
.fdes .seg button[aria-pressed=true]{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1300;border-color:#a8822a}
/* territory map */
.pickwrap{position:relative;overflow:auto;border-radius:10px;border:1px solid var(--line);max-height:70vh;touch-action:pan-x pan-y}
.pickwrap canvas{display:block;transform-origin:0 0}
.mapctl{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap;align-items:center}
.mapctl .b{min-width:44px;min-height:44px}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--mut);margin:6px 0}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:4px;border:1px solid rgba(255,255,255,.3)}
/* dashboard */
.ovgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
@media (min-width:900px){.ovgrid{grid-template-columns:repeat(6,1fr)}}
.ov{background:#0a1730;border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center;cursor:pointer;color:var(--txt);min-height:84px}
.ov .g{font-size:22px}.ov b{display:block;font-size:17px;color:var(--gold2);margin-top:2px}.ov span{display:block;font-size:11px;color:var(--mut);overflow-wrap:anywhere}
/* more sheet as tiles */
#more .sheet button{border-radius:10px}
/* accessibility */
body.rm *,body.rm *::before,body.rm *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.lb .b,body.lb button,body.lb select,body.lb input:not([type=checkbox]):not([type=range]){min-height:52px;font-size:calc(17px*var(--fs,1))}
.a11y .seg{display:flex;gap:6px}.a11y .seg button{min-width:52px;min-height:44px}
.a11y .seg button[aria-pressed=true]{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1300}
.swr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.swr span{flex:1}.swr .b{min-width:72px}
body.hc{--bg:#000;--card:#000;--card2:#000;--line:#fff;--txt:#fff;--mut:#e5e5e5}
.pflag{overflow:hidden}.pflag svg{width:100%;height:100%;display:block}.hcard{background:#0a1730;border:1px solid var(--line);border-radius:12px}.hcard b{color:var(--gold2)}
.pickwrap #pick{max-width:none!important;height:auto}
.seg .b{word-break:keep-all;overflow-wrap:normal;hyphens:none;padding-inline:6px}
/* storyboard screens */
.sbcard{background:linear-gradient(180deg,#0f2142,#0a1730);border:1px solid #23406e;border-radius:14px;padding:14px;margin:0 0 14px}
.sbcard h2{color:var(--gold2,#facc15);margin:0 0 4px}.sbcard h3{margin:14px 0 6px;font-size:1rem}
.sbtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px}
.sbtile{background:#0b1a34;border:1px solid #1e3a66;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.sbtile .ic{font-size:1.2rem}.sbtile .lb{font-size:.85rem;color:#a9b8d6;overflow-wrap:anywhere}.sbtile b{font-size:1.15rem;color:#fff;overflow-wrap:anywhere}
.sbcharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:12px}
.sbchart{background:#0b1a34;border:1px solid #1e3a66;border-radius:10px;padding:10px;min-width:0}.sbchart .hd{display:flex;justify-content:space-between;gap:8px}
.spark{width:100%;height:70px;display:block;margin-top:6px}
.sbbars{display:flex;flex-direction:column;gap:8px}.sbbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:8px;align-items:center}
.sbbar span{overflow-wrap:anywhere}.sbbar .trk{height:10px;background:#1a2c4d;border-radius:6px;overflow:hidden}.sbbar .trk i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa)}
.sbact{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.sbok{background:#0f2e22;border:1px solid #1f6b47;border-radius:10px;padding:10px;margin-top:10px}
.sbrep{background:#0b1a34;border:1px solid #1e3a66;border-radius:10px;margin-top:8px}.sbrep summary{display:flex;gap:10px;align-items:center;padding:12px;cursor:pointer;font-size:1.05rem}
.sbrep summary small{display:block;color:#a9b8d6;font-size:.85rem}.sbrep dl{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:0 12px;margin:0}.sbrep dd{margin:0;font-weight:700}.sbrep .b{margin:10px 12px 12px}
body.rm .spark *{transition:none}
/* ---- vis3: mobile command panel ---- */
:root{--mcp-h:0px}
#mcp{position:fixed;left:0;right:0;bottom:calc(var(--bnav-h) + var(--cmd-h) + var(--safe-b));z-index:44;background:linear-gradient(180deg,#14213d,#0b1426);border-top:1px solid var(--gold,#d4a72c)}
#mcp .mcph{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:center;width:100%;min-height:40px;padding:6px 12px;cursor:pointer;font-size:14px}
#mcp .mcph b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mcp .mcph:focus-visible{outline:2px solid var(--gold,#d4a72c);outline-offset:-2px}
#mcp .mcpl{color:var(--gold,#d4a72c);font-size:12px}
#mcp .mcpb{max-height:55vh;overflow:auto;padding:0 12px 12px}
#mcp h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gold,#d4a72c);margin:10px 0 4px}
#mcp .mcpst{display:flex;gap:12px;flex-wrap:wrap;font-size:14px}
.mcpq{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}.mcpq .b{min-height:44px;margin:0}
@media (max-width:699px){body.has-mcp main{padding-bottom:calc(var(--bnav-h) + var(--cmd-h) + var(--mcp-h) + var(--safe-b) + 16px)}
 body.has-mcp #advbtn{bottom:calc(var(--bnav-h) + var(--cmd-h) + var(--mcp-h) + var(--safe-b) + 10px)}
 body.has-mcp #advpanel{bottom:calc(var(--bnav-h) + var(--cmd-h) + var(--mcp-h) + var(--safe-b) + 62px)}
 body.has-mcp.t-map #minfo{bottom:calc(var(--bnav-h) + var(--cmd-h) + var(--mcp-h) + var(--safe-b))}}
/* map legend outside wizard */
#view .legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;margin:6px 0}#view .legend i{display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-1px;border-radius:3px}
#view .mapctl{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}#view .mapctl .b{min-height:44px;min-width:44px;margin:0}
/* welcome mode cards */
.wmodes{margin-top:18px}.wmodes .hcard{text-align:left;display:flex;flex-direction:column;gap:4px}
/* confirm dialog (storyboard style) */
.uxask .card{border:1px solid var(--gold,#d4a72c)!important;max-width:440px;width:100%}
.uxask h2{display:flex;gap:8px;align-items:center;color:var(--gold,#d4a72c)}.uxask h2::before{content:"⚖️"}
.uxask ul{list-style:none;padding:0;margin:10px 0 14px}.uxask li{padding:6px 0 6px 26px;position:relative;border-bottom:1px solid var(--line)}.uxask li::before{content:"✓";position:absolute;left:4px;color:var(--gold,#d4a72c);font-weight:700}
.uxask #uxyes{background:linear-gradient(180deg,#e8c25a,#c99a22);color:#1a1405;border-color:#c99a22;font-weight:700}
.uxask .b{flex:1;min-height:48px}
/* adviser panel */
#advpanel{border-color:var(--gold,#d4a72c)!important}#advpanel .advh{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:8px;color:var(--gold,#d4a72c)}
#advbtn{background:linear-gradient(180deg,#1e3a8a,#14213d);border-color:var(--gold,#d4a72c)}
#sideadv{border-color:var(--gold,#d4a72c)!important}#sideadv h2{font-size:15px;color:var(--gold,#d4a72c)}
/* tablet: right context panel from 820px; desktop width caps */
@media (min-width:820px) and (max-width:999px){#shell{grid-template-columns:160px minmax(0,1fr) 230px!important}#nav button{font-size:13px}#side{display:block!important;font-size:13px;border-left:1px solid var(--line);padding:10px;position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto}}
@media (min-width:1000px){#view{max-width:1200px;margin-inline:auto;width:100%}}
@media (min-width:1700px){#view{max-width:1400px}}
#view .card,#view>section{max-width:100%}
#view .cgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
@media (min-width:700px){#view .b,header .b,#side .b{min-height:40px}}
body:has(#mcp.open) #advbtn,body:has(#mcp.open) #advpanel{display:none}