/* Two themes share one set of tokens; components never name a colour directly. */
:root,[data-theme=dark]{color-scheme:dark;
 --bg:#0d1117;--bg-glow:radial-gradient(1100px 560px at 10% -12%,#e0b65612,transparent 60%),radial-gradient(900px 480px at 100% -5%,#5b8def14,transparent 55%);
 --surface:#151b23;--surface-2:#1b222c;--surface-3:#252e3a;--line:#252d38;--line-strong:#37424f;
 --text:#e9edf2;--muted:#a7b1be;--faint:#7d8898;
 --accent:#e0b656;--accent-2:#f0cd7c;--accent-ink:#1a1408;--accent-soft:#e0b6561f;
 --ok:#4ade80;--ok-soft:#4ade801a;--warn:#fbbf24;--warn-soft:#fbbf241a;--danger:#f87171;--danger-soft:#f871711a;--info:#60a5fa;--info-soft:#60a5fa1a;
 --shadow:0 1px 0 #ffffff0a inset,0 1px 2px #0005,0 14px 32px -20px #000d;--shadow-pop:0 28px 64px -24px #000e,0 0 0 1px #ffffff08;
 --nav-bg:#0d1117cc;--input:#0f141b;
 --map-terrain-border:#10151dd9;--map-ocean-a:#17335d;--map-ocean-b:#091831;--map-land:#445263;--map-border:#c9a551cc;--map-region:#d9b35a1c;--map-label:#eef1f4;--map-label-soft:#b7bfc9;--map-halo:#1a2129dd;--map-sea-label:#3d4b5c;--map-home:#d9b35a;--map-front:#f87171;--map-tag:#161c24ee;--map-attack:#f87171;--map-defend:#60a5fa;--map-select:#ecc977;--map-hover:#ffffff;--map-closed:#5b6472;--map-open:#e9edf2;
 --overlay:#151b23eb;--overlay-line:#252d38}
[data-theme=light]{color-scheme:light;
 --bg:#f3f4f7;--bg-glow:radial-gradient(1100px 520px at 12% -12%,#9a6b0f0d,transparent 60%),radial-gradient(900px 480px at 100% -5%,#0969da0a,transparent 55%);
 --surface:#ffffff;--surface-2:#f4f5f7;--surface-3:#e9ebef;--line:#e4e7eb;--line-strong:#c8cdd5;
 --text:#1f2328;--muted:#4f5761;--faint:#6e7781;
 --accent:#9a6b0f;--accent-2:#7a520a;--accent-ink:#fffaf0;--accent-soft:#9a6b0f1f;
 --ok:#1a7f37;--ok-soft:#1a7f371a;--warn:#9a6700;--warn-soft:#9a67001a;--danger:#c62828;--danger-soft:#c628281a;--info:#0969da;--info-soft:#0969da1a;
 --shadow:0 1px 2px #1f23280d,0 10px 28px -18px #1f232833;--shadow-pop:0 24px 60px -24px #1f232840,0 0 0 1px #1f23280a;
 --nav-bg:#ffffffd1;--input:#ffffff;
 --map-terrain-border:#2a2116cc;--map-ocean-a:#b9d3ea;--map-ocean-b:#9dbcd8;--map-land:#cfd4d9;--map-border:#9a6b0f;--map-region:#b9bfc844;--map-label:#1f2328;--map-label-soft:#4f5761;--map-halo:#f8f9facc;--map-sea-label:#5b6b78;--map-home:#9a6b0f;--map-front:#c62828;--map-tag:#ffffffee;--map-attack:#c62828;--map-defend:#0969da;--map-select:#7a520a;--map-hover:#1f2328;--map-closed:#a7adb5;--map-open:#e2e5e8;
 --overlay:#ffffffeb;--overlay-line:#e4e7eb}


:root{--radius:16px;--radius-sm:10px;--primary:var(--accent);--font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--display:"Inter","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scrollbar-color:var(--line-strong) transparent}
body{background-image:var(--bg-glow);background-attachment:fixed}
a{color:var(--accent-2);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
h1{font-size:clamp(26px,3vw,36px);line-height:1.15;margin:6px 0;letter-spacing:-.02em;font-weight:720}
h2{font-size:16px;margin:0;letter-spacing:-.01em;font-weight:650}
p{margin:8px 0;color:var(--muted)}.small{font-size:13px}.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent-soft)}
.eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:650}
.boot{display:grid;place-items:center;min-height:100vh;color:var(--muted);padding:20px;text-align:center}
.boot-card{display:grid;justify-items:center;gap:14px;animation:bootIn .5s ease-out both}
.boot-mark{width:56px;height:56px;border-radius:14px;background:conic-gradient(from 210deg,var(--primary),#3fa37a,#3b82c4,var(--primary));box-shadow:0 8px 30px rgba(0,0,0,.35);animation:bootSpin 2.4s linear infinite}
.boot-name{font-family:var(--display,system-ui);font-weight:700;letter-spacing:.32em;font-size:20px;color:var(--text)}
.boot-bar{width:180px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.boot-bar i{display:block;width:40%;height:100%;background:var(--primary);border-radius:3px;animation:bootSlide 1.2s ease-in-out infinite}
.boot-text{margin:0;font-size:13px}
.boot-failed .boot-mark,.boot-failed .boot-bar i{animation:none}
.boot-failed .boot-bar i{width:100%;background:var(--danger,#c55)}
@keyframes bootIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes bootSpin{to{transform:rotate(360deg)}}
@keyframes bootSlide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.boot-mark,.boot-bar i,.boot-card{animation:none}}
.icon{width:18px;text-align:center;opacity:.9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Shell */
.app{min-height:100vh;display:flex;flex-direction:column}
.topnav{display:flex;align-items:center;gap:18px;padding:0 24px;height:60px;background:var(--nav-bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);box-shadow:0 8px 24px -20px #000a;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.22em;font-size:15px;color:var(--text);white-space:nowrap}.brand:hover{text-decoration:none}
.brand::before{content:"";width:22px;height:22px;border-radius:8px;background:conic-gradient(from 210deg,var(--accent),#5b8def,#34d399,var(--accent));box-shadow:0 0 0 3px var(--accent-soft)}
.nav{display:flex;align-items:center;gap:2px;height:100%;min-width:0}
.nav-top{display:flex;align-items:center;gap:8px;height:36px;padding:0 13px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);background:none;border:1px solid transparent;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.nav-top:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.nav-top.active,.nav-group.active>.nav-top{color:var(--accent-2);background:var(--accent-soft)}
.caret{font-size:9px;opacity:.6}
.nav-group{position:relative;display:flex;align-items:center;height:100%}
.nav-menu{display:none;position:absolute;top:calc(100% - 6px);left:0;min-width:230px;padding:6px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:var(--shadow-pop);animation:popIn .18s var(--ease)}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:grid}
.nav-menu a{padding:9px 12px;border-radius:10px;color:var(--text);font-size:14px}.nav-menu a:hover{background:var(--surface-2);text-decoration:none}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px}
.live{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--faint)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex-shrink:0}.dot.on{background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.wallet,.energy{padding:5px 12px;font-size:13px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:999px;background:var(--accent-soft);color:var(--accent-2);font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.energy{background:var(--ok-soft);color:var(--ok)}
.identity{display:grid;text-align:right;color:var(--text);line-height:1.25}.identity:hover{text-decoration:none}.identity strong{font-weight:650}.identity small{color:var(--faint);font-size:12px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink);box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--line-strong);font-weight:750}
.theme-toggle{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:border-color .15s,background .15s}
.theme-toggle:hover{border-color:var(--line-strong);background:var(--surface-2)}
.beta{margin:16px auto 0;max-width:1200px;width:calc(100% - 40px);padding:10px 14px;border-radius:var(--radius-sm);background:var(--warn-soft);color:var(--text);font-size:13.5px;border:1px solid var(--line)}
.beta strong{color:var(--warn)}
.page{padding:32px 24px 88px;max-width:1260px;width:100%;margin:0 auto}
.page.wide{max-width:none;padding:0;flex:1;display:flex}
.loading,.empty{padding:26px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);color:var(--muted);text-align:center;font-size:14px;background:transparent}
.empty.error{border-style:solid;border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger);background:var(--danger-soft)}
.banner{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:20px;background:var(--info-soft);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);color:var(--text)}

/* Surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:0 20px 20px;min-width:0;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 -20px 16px;padding:15px 20px 13px;border-bottom:1px solid var(--line)}
.card-head h2{font-size:15px;margin:0;letter-spacing:-.01em;font-weight:650;color:var(--text);display:flex;align-items:center;gap:9px}.card-head h2::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--accent);flex-shrink:0}
.grid{display:grid;gap:18px;margin-bottom:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.stats.wide{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:20px}
.stat{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-width:0}
.stat small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.stat strong{display:block;font-size:23px;margin-top:3px;font-weight:700;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.stat span{font-size:12px;color:var(--muted)}
.row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}.row span{color:var(--muted)}.row strong{text-align:right;overflow-wrap:anywhere;font-weight:600}
.item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}.item>div:first-child{min-width:0}
.item small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.item.link{color:var(--text);border-radius:10px;padding:12px 10px;margin:0 -10px}.item.link:hover{text-decoration:none;background:var(--surface-2)}
.item-block{padding:4px 0 12px;border-bottom:1px solid var(--line)}.item-block:last-child{border-bottom:0}.item-block .item{border-bottom:0}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* Controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;height:auto;padding:7px 16px;line-height:1.25;text-align:center;overflow-wrap:anywhere;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer;white-space:normal;user-select:none;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.btn:hover{background:var(--surface-3);border-color:var(--faint);text-decoration:none}.btn:disabled{opacity:.55;cursor:wait}
.btn.primary,a.btn.primary,.btn.gold{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);border:1px solid var(--accent);font-weight:700;box-shadow:0 1px 0 #ffffff40 inset,0 8px 20px -12px var(--accent)}.btn.primary:hover,a.btn.primary:hover,.btn.gold:hover{background:var(--accent-2);color:var(--accent-ink);border-color:var(--accent-2)}
.btn.gold{letter-spacing:.02em}
.btn.big{padding:13px 20px;font-size:15px;border-radius:14px}
.btn.danger{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 35%,transparent)}.btn.danger:hover{background:color-mix(in srgb,var(--danger) 18%,var(--surface))}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover{background:var(--surface-2);color:var(--text)}
.form{display:grid;gap:12px;margin-top:10px}
.form.inline{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.field{display:grid;gap:6px;font-size:13px;color:var(--muted);font-weight:550}.field small{color:var(--faint);font-size:12px;font-weight:400}
input,select,textarea{font:inherit;color:var(--text);background:var(--input);border:1px solid var(--line-strong);border-radius:10px;padding:10px 12px;width:100%;transition:border-color .15s,box-shadow .15s}input:hover,select:hover,textarea:hover{border-color:var(--faint)}::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical}input.qty{width:76px}
details{margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:0 14px;background:var(--surface-2)}details[open]{padding-bottom:12px}
summary{cursor:pointer;color:var(--text);font-size:13.5px;font-weight:600;padding:10px 0;list-style:none;display:flex;align-items:center;gap:8px}summary::-webkit-details-marker{display:none}summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s;flex-shrink:0}details[open]>summary::before{transform:rotate(45deg)}summary:hover{color:var(--accent-2)}
.checks{border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin:0;display:grid;gap:6px;max-height:240px;overflow:auto}
.checks legend{padding:0 6px;color:var(--muted);font-size:13px}
.check{display:flex;gap:8px;align-items:center;font-size:14px}.check input{width:auto}.check small{color:var(--faint)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--surface-3);color:var(--muted);white-space:nowrap;font-weight:650;letter-spacing:.2px;border:1px solid transparent}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,transparent)}.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 25%,transparent)}.badge.danger{background:var(--danger-soft);color:var(--danger)}.badge.info{background:var(--info-soft);color:var(--info)}
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin:6px 0 22px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;width:max-content;max-width:100%}
.tabs a{padding:7px 14px;color:var(--muted);border-radius:10px;font-weight:600;font-size:13.5px;transition:background .15s,color .15s}
.tabs a.active{color:var(--text);background:var(--surface);box-shadow:0 1px 2px #0004,inset 0 0 0 1px var(--line-strong)}.tabs a:hover{text-decoration:none;color:var(--text)}.tabs a.active::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:2px}

/* Pages */
.state-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;margin-bottom:16px}
.flag{width:84px;height:56px;border-radius:8px;display:block;box-shadow:var(--shadow)}
.flag-letter{fill:#e8edf5;font-size:20px;font-weight:700}
.sw{width:10px;height:10px;vertical-align:middle;display:inline-block}
.hemicycle{width:100%;max-width:520px;display:block;margin:0 auto 6px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:6px 0 4px;color:var(--muted)}
.home-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
.home-main,.home-side{display:grid;gap:20px}
.pending{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;max-width:420px;padding:12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--text)}
.pending:hover{text-decoration:none;border-color:var(--accent)}.pending small{display:block;color:var(--muted);font-size:12px}
.hero-card{background:linear-gradient(135deg,var(--surface),var(--surface-2))}
.hero-card .quick{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin:14px 0 18px}
.region-card{position:relative;overflow:hidden}
/* The glow sits behind the content; above it, it dimmed the buttons and swallowed clicks. */
.region-card::after{content:"";position:absolute;inset:auto -40px -60px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);pointer-events:none;z-index:0}
.region-card>*{position:relative;z-index:1}
.region-name{font-size:28px!important;letter-spacing:-.4px!important;color:var(--text)!important;margin:4px 0 0!important;text-transform:uppercase!important;font-weight:750!important}
.chat{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px}
.channels{display:grid;gap:4px;align-content:start}
.channels>a{padding:9px 12px;border-radius:10px;color:var(--muted);font-weight:550}.channels>a:hover{background:var(--surface-2);text-decoration:none}.channels>a.active{background:var(--accent-soft);color:var(--text)}
.messages{height:56vh;overflow:auto;border-radius:10px;padding:12px 14px;margin:0 0 12px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.message{display:flex;gap:10px;align-items:flex-end;max-width:78%}.message small{color:var(--accent-2);font-weight:650;font-size:12px}
.message.mine{align-self:flex-end;flex-direction:row-reverse}.message.mine small{color:var(--ok)}
.message-avatar{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-3);color:var(--text);font-family:var(--display);font-size:13px;border:1px solid var(--line-strong)}
.message.mine .message-avatar{background:var(--accent-soft);border-color:var(--accent)}
.message-bubble{padding:8px 12px;border-radius:12px 12px 12px 4px;background:var(--surface);border:1px solid var(--line)}
.message.mine .message-bubble{border-radius:12px 12px 4px 12px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.message p{margin:2px 0 0;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.article{color:var(--text);line-height:1.8;overflow-wrap:anywhere;font-size:16px}
/* Press: a front page. Masthead, one lead story, a grid of cards, then the rest as a list; the reader is a single serif column. */
.press-masthead{text-align:center;padding:8px 0 18px;margin-bottom:22px;border-bottom:3px double var(--line-strong)}
.press-masthead h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(32px,5vw,54px);font-weight:700;letter-spacing:-.02em;margin:6px 0 4px}.press-masthead p{margin:0;font-size:14px}
.press-kicker{display:block;color:var(--accent-2);font-size:11px;font-weight:650;text-transform:uppercase;letter-spacing:.1em}
.press-league{width:100%;border-collapse:collapse}.press-league th,.press-league td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left}.press-league th{font-size:11px;text-transform:uppercase;color:var(--muted)}.press-league small{display:block;color:var(--muted)}.press-league tr:hover{background:var(--surface)}.press-table-wrap{overflow-x:auto}.article-upload-preview{display:block;max-width:100%;max-height:260px;object-fit:contain;border-radius:12px;margin-top:12px}.article-upload-preview[hidden]{display:none}.gazette-issue{padding:20px;border-bottom:1px solid var(--line)}.gazette-issue summary{cursor:pointer;font-weight:700;color:var(--accent-2)}
.press-search{display:block;margin-bottom:20px}.press-search input{width:100%;margin-top:8px}.map-legend summary{display:flex;justify-content:space-between;gap:24px;cursor:pointer;list-style:none}.map-legend summary strong{margin:0}.map-legend:not([open])>.legend-content{display:none!important}.map-legend:not([open]) summary span{transform:rotate(180deg)}.map-legend>.legend-content{display:grid!important;gap:6px}.press-league tr[hidden],.press-ranks li[hidden]{display:none}
.press-lead,.press-card,.press-story{color:var(--text)}.press-lead:hover,.press-card:hover,.press-story:hover{text-decoration:none}
.press-lead strong,.press-card strong,.press-story strong{font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.01em}
.press-lead em,.press-card em,.press-story em{font-style:normal;color:var(--faint);font-size:12px}
.press-lead p,.press-card p{margin:0;color:var(--muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.press-lead{display:grid;gap:22px;margin-bottom:20px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transition:border-color .2s}
.press-lead.with-image{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}.press-lead:hover,.press-card:hover{border-color:var(--line-strong)}
.press-lead img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px}.press-lead>span{display:grid;gap:10px;align-content:center}
.press-lead strong{font-size:clamp(24px,3.2vw,38px);line-height:1.15}.press-lead:hover strong,.press-card:hover strong,.press-story:hover strong{color:var(--accent-2)}
.press-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-bottom:20px}
.press-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s}
.press-card img{width:100%;aspect-ratio:16/9;object-fit:cover}.press-card>span{display:grid;gap:8px;padding:16px;align-content:start}.press-card strong{font-size:19px;line-height:1.25}.press-card p{font-size:13.5px}
.press-ranks{list-style:none;margin:0;padding:0;counter-reset:rank}.press-ranks li{counter-increment:rank;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.press-ranks li:last-child{border-bottom:0}
.press-ranks li::before{content:counter(rank);font-family:Georgia,serif;font-size:20px;font-weight:700;color:var(--faint)}.press-ranks small{display:block;color:var(--muted);font-size:12.5px}
.press-back{display:inline-block;margin:0 auto 14px;font-size:13.5px;font-weight:600;color:var(--muted)}.press-back:hover{color:var(--text);text-decoration:none}
.press-byline{margin:10px 0 0;font-size:14px}.press-byline strong{color:var(--text)}
.press-reader h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,4.4vw,46px);line-height:1.12;margin:10px 0 0}
.press-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
.press-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.8fr);gap:20px;margin-bottom:20px}.press-layout>main,.press-layout>aside{display:grid;gap:20px;align-content:start}.press-story{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.press-story:last-child{border-bottom:0}.press-story:not(.with-image){grid-template-columns:1fr}.press-story img{width:120px;height:82px;object-fit:cover;border-radius:10px}.press-story span{display:grid;gap:4px;align-content:center}.press-story strong{font-size:18px;line-height:1.3}.press-reader{max-width:760px;margin:0 auto 24px;padding:clamp(24px,5vw,56px);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.press-reader header{margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}.press-reader .article{font:18px/1.85 Georgia,serif}.press-metrics{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.article-corrections{display:grid;gap:7px;margin-top:28px;padding:16px;border-left:3px solid var(--warn);background:var(--warn-soft)}.newsroom{padding:14px 0;border-bottom:1px solid var(--line)}.newsroom>header{display:flex;justify-content:space-between;gap:12px;align-items:center}.newsroom>header small{display:block;color:var(--muted)}.draft-list{margin-top:10px}.press-stats .stats{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Sign-in */
.auth{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;min-height:calc(100vh - 64px);padding:40px;max-width:1180px;margin:0 auto}
.auth-hero h1{font-size:clamp(36px,5vw,60px);letter-spacing:-1.5px}.auth-hero p{max-width:480px;font-size:17px}
.pillars{display:flex;gap:8px;flex-wrap:wrap;padding:0;list-style:none;margin:18px 0}
.pillars li{padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:14px}
.auth-card{padding:26px 28px}.auth-card .tabs{margin-top:0}
.auth-top{position:absolute;top:16px;right:20px}

#toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;z-index:50;max-width:min(420px,calc(100vw - 36px))}
.toast{padding:12px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line-strong);border-left:4px solid var(--ok);color:var(--text);box-shadow:var(--shadow-pop);animation:popIn .25s var(--ease)}
.toast.error{border-left-color:var(--danger)}.toast.info{border-left-color:var(--info)}

/* Map: the canvas fills the page; overlays are small glass panels in separate corners. */

/* Map HUD - Strategy Game Style */
.map-shell{position:relative;flex:1;min-height:calc(100vh - 64px);display:flex;background:var(--map-ocean-b);overflow:hidden}
.world-canvas{position:relative;flex:1;width:100%;height:calc(100vh - 64px);display:block;cursor:grab;touch-action:none}
/* The moving sea is its own canvas under the map, so animating it never repaints the map. */
.world-water{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* The GPU-drawn land sits between the sea and the label canvas. */
.world-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Drifting clouds over the relief, under the names; only the terrain view shows them. */
.world-clouds{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.world-canvas:active{cursor:grabbing}.world-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* A click or drag on the map never selects page text or shows a focus frame around the whole map. */
.map-shell{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.world-canvas:focus:not(:focus-visible){outline:none}

.map-shell .btn,.map-modes,#map-search,.map-panel,.map-legend,.map-tooltip,#map-results {
    background: var(--overlay);
    color: var(--text);
    backdrop-filter: blur(8px) saturate(1.2);
    border: 1px solid var(--line-strong);
    border-top: 2px solid var(--accent);
    border-radius: 4px;
    box-shadow: var(--shadow-pop);
}
.map-panel .btn{color:var(--text);background:var(--surface-2);border-top-width:1px}
.map-panel .btn:hover{background:var(--surface-3)}
.map-panel .btn.danger{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.map-panel .btn.danger:hover{background:color-mix(in srgb,var(--danger) 22%,var(--surface))}
.map-panel .btn.primary{color:var(--accent-ink);background:linear-gradient(180deg,var(--accent-2),var(--accent));border-color:var(--accent)}

.map-controls{position:absolute;left:16px;top:16px;display:grid;gap:6px;z-index:3}
.map-controls .btn{width:36px;height:36px;padding:0;font-size:18px;border-radius:2px;border:1px solid var(--line-strong);border-bottom:2px solid var(--accent);color:var(--text);cursor:pointer;}
.map-controls .btn:hover{background:var(--surface-2);border-color:var(--accent);}

.map-toolbar{position:absolute;left:64px;top:16px;z-index:4;width:280px;max-width:calc(100% - 90px)}
/* The map's views are icons; the chosen one widens to show its name. */
.map-modes{display:flex;gap:4px;padding:4px;width:100%;margin-bottom:8px;}
.map-modes button{flex:0 0 38px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;font:650 11.5px var(--font);text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;overflow:hidden;transition:flex-basis .25s ease,background .2s,color .2s;}
.map-modes button svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.map-modes button span{display:none;}
.map-modes button:hover{color:var(--text);background:var(--surface-2,rgba(255,255,255,.06));}
.map-modes button:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
.map-modes button[aria-pressed=true]{flex:1 1 auto;background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);}
.map-modes button[aria-pressed=true] span{display:inline;}
@media (prefers-reduced-motion:reduce){.map-modes button{transition:none;}}

#map-search{display:flex;padding:0;}
#map-query{min-width:0;width:100%;background:none;border:0;padding:10px 12px;color:var(--text);margin:0;font-family:var(--font);}
#map-search button{border:0;border-left:1px solid var(--line-strong);background:transparent;color:var(--accent);padding:0 14px;cursor:pointer;font-weight:700;text-transform:uppercase;}
#map-search button:hover{background:var(--accent-soft);}

#map-results{margin-top:6px;padding:6px;max-height:310px;overflow:auto;}
#map-results button{display:block;width:100%;text-align:left;padding:9px 10px;color:var(--text);border:0;background:none;cursor:pointer;border-radius:2px;font:inherit;border-bottom:1px solid var(--line);}
#map-results button:hover{background:var(--surface-2);border-bottom-color:var(--accent);}
#map-results small{display:block;color:var(--accent-2);}

.map-panel{position:absolute;right:16px;top:16px;width:320px;max-width:calc(100% - 32px);padding:16px;z-index:3;max-height:calc(100% - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;}
.map-panel .eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:2px;font-size:11px;font-weight:700;}
.map-panel h2{font-family:var(--display);font-size:22px;margin:4px 0 12px;letter-spacing:.6px;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--line-strong);padding-bottom:8px;}
.map-panel .row{border-bottom:1px solid var(--line);padding:8px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;}
.map-panel .row:last-of-type{border-bottom:0;}
.map-panel .row strong{color:var(--accent-2);}
.map-panel .btn{margin-top:16px;width:100%;border-radius:2px;text-transform:uppercase;letter-spacing:1px;}

.map-legend{position:absolute;left:16px;bottom:16px;display:grid;gap:6px;padding:12px;font-size:12px;color:var(--muted);z-index:2;max-width:280px;}
.map-legend strong{font-family:var(--display);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px;}
.map-legend span{display:flex;align-items:center;gap:6px;}
/* One legend per view; the wrapper adds no box of its own, and a hidden one stays hidden. */
.map-legend>div:not([hidden]){display:contents}
.map-legend small{color:var(--faint);font-size:10px;margin-top:4px;}

.map-tooltip{position:absolute;z-index:5;pointer-events:none;padding:6px 10px;border-radius:2px;font-size:13px;white-space:nowrap;color:var(--text);border-top:1px solid var(--accent);}


@media (max-width:1600px){
 .topnav{height:auto;min-height:60px;flex-wrap:wrap;gap:4px 12px;padding:7px 16px}
 .nav{order:3;flex:1 0 100%;width:100%;height:42px;overflow-x:auto;scrollbar-width:thin}
 .nav-group,.nav-top{flex-shrink:0}
 .nav-top{padding:0 9px;font-size:13px;gap:6px}
 .who{gap:8px}
 .page.wide .map-shell,.page.wide .world-canvas{height:calc(100vh - 164px);min-height:calc(100vh - 164px)}
}
@media (max-width:1180px){.who .identity,.live{display:none}.topnav{column-gap:8px;padding-inline:12px}.nav-top{padding:0 8px;font-size:13px}}
@media (max-width:980px){
 .topnav{height:auto;flex-wrap:wrap;padding:10px 14px;gap:10px}.nav{order:3;width:100%;overflow-x:auto;height:44px}
 .nav-menu{position:fixed;top:auto;left:14px;right:14px}
 .grid.two,.grid.three,.chat,.auth,.home-grid{grid-template-columns:1fr}
 .press-lead.with-image,.press-layout{grid-template-columns:1fr}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.state-head{grid-template-columns:1fr}.hero-card .quick{grid-template-columns:1fr}
 .world-canvas,.map-shell{height:calc(100vh - 118px);min-height:calc(100vh - 118px)}.auth{padding:20px}
 .map-panel{top:auto;bottom:12px;right:12px;width:270px;max-height:38vh;overflow:auto}.map-legend{display:none}.map-toolbar{left:64px;top:14px;width:250px}.map-controls{top:14px;left:12px}
}
@media (max-width:560px){.item{flex-direction:column;align-items:stretch}.actions{justify-content:flex-start}.stats,.stats.wide{grid-template-columns:1fr}.tabs{width:100%;overflow:auto}
 .map-panel{max-height:26vh;left:12px;right:12px;width:auto;padding:10px 14px}.map-panel h2{font-size:18px}.map-panel .row{padding:3px 0}.map-panel .btn{margin-top:6px;padding:7px}.map-toolbar{width:calc(100% - 76px)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.meter{width:100%;height:8px;border-radius:999px;display:block;margin:4px 0 12px;overflow:hidden;background:var(--surface-3)}
.meter .meter-bg{fill:var(--surface-3)}.meter .meter-fill{fill:var(--ok)}.meter.low .meter-fill{fill:var(--danger)}
.front-card .row{padding:7px 0}
.front-card details{margin-top:8px}
.item .flag{width:42px;height:28px;display:inline-block;vertical-align:middle;margin-right:10px;border-radius:4px}
.identity-now{display:flex;gap:16px;align-items:center}.identity-now small{display:flex;gap:6px;align-items:center;color:var(--muted);margin-top:4px}
.colour-pick{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;margin-bottom:6px}
.colour-pick input[type=color]{height:42px;padding:3px;cursor:pointer}

.literacy-blur{filter:blur(7px);pointer-events:none;user-select:none}

/* The war screen announces itself: a band at the top, fronts that read like a situation report. */
.war-banner{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:var(--radius);margin-bottom:16px;border:1px solid var(--line)}
.war-banner-main{display:flex;gap:12px;align-items:center}
.war-banner-main p{margin:2px 0 0;font-size:.9rem;opacity:.85}
.war-banner-main strong{letter-spacing:.14em;font-size:.82rem}
.war-banner-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:.86rem}
.war-banner-stats strong{display:block;font-size:1.1rem}
.war-flare{font-size:1.6rem;line-height:1}
.war-banner.at-war{background:color-mix(in srgb,var(--danger) 16%,var(--surface-2));border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.war-banner.at-war .war-flare{animation:war-pulse 1.8s ease-in-out infinite}
.war-banner.warming{background:color-mix(in srgb,var(--warn) 14%,var(--surface-2));border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.war-banner.peace{background:var(--surface-2)}
@keyframes war-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
@media (prefers-reduced-motion:reduce){.war-banner.at-war .war-flare{animation:none}}
.front-card{border-left:3px solid color-mix(in srgb,var(--danger) 55%,var(--line))}
.front-card .card-head h2{font-size:1.05rem}

/* A tax rate is set by dragging or by typing; the two inputs sit on one row. */
.rate-row{display:flex;align-items:center;gap:10px}
.rate-range{flex:1;accent-color:var(--accent)}
.rate-number{width:88px}
.rate-unit{opacity:.7}

/* A flag a state uploaded is shown as it is, in the same box a drawn flag uses. */
.flag-image{width:96px;height:64px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}

/* A newspaper picture sits above the text, with its caption under it. */
.article-figure{margin:0 0 12px}
.article-figure img{width:100%;max-height:320px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--line)}
.article-figure figcaption{font-size:.85rem;opacity:.75;margin-top:4px}

/* The founder tag marks the accounts named in the server's own owner file. */
.founder-tag{display:inline-block;padding:0 6px;border-radius:999px;font-size:.72rem;letter-spacing:.04em;background:color-mix(in srgb,var(--accent) 22%,var(--surface-2));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line))}

/* A quest line reads like a checklist item: what to do on the left, what it pays on the right. */
.quest-row small{display:block;opacity:.75}
.quest-row .actions{white-space:nowrap}
.journey-card{overflow:hidden;background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--accent) 8%,var(--surface-2)))}
.journey-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin:8px 0}.journey-head h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.4px;text-transform:none;color:var(--text)}.journey-head p{margin:4px 0}.journey-progress span{height:9px}.journey-steps{display:flex;flex-wrap:wrap;gap:7px;padding:3px 0 12px}.journey-steps a{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:var(--surface-3);color:var(--faint);font-size:12px}.journey-steps a:hover{text-decoration:none;background:var(--surface-2);color:var(--text)}.journey-steps a.done{background:var(--ok-soft);color:var(--ok)}.journey-steps a.current{background:var(--accent-soft);color:var(--accent-2);font-weight:700}.journey-card>.actions{justify-content:flex-start}.journey-card>.actions .btn{min-width:min(100%,280px)}
.avatar-preview{width:96px;height:96px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--surface-3)}
.progress{display:flex;gap:4px;margin:10px 0}
.progress span{flex:1;height:6px;border-radius:3px;background:var(--surface-3)}
.progress span.on{background:var(--ok)}
.quiz-backdrop{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:20px;background:#050914d9;backdrop-filter:blur(10px)}
.quiz-shell{width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:clamp(22px,4vw,42px);border:1px solid var(--line-strong);border-radius:24px;background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-pop)}
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:18px}.quiz-head h2{font-size:clamp(22px,4vw,32px);color:var(--text);text-transform:none;letter-spacing:-.4px}.quiz-head>strong{color:var(--accent-2);font-variant-numeric:tabular-nums}
.quiz-meter{display:block;width:100%;height:8px;margin:18px 0 28px;border:0;border-radius:999px;overflow:hidden;background:var(--surface-3);accent-color:var(--accent)}
.quiz-meter::-webkit-progress-bar{background:var(--surface-3)}.quiz-meter::-webkit-progress-value{background:var(--accent)}.quiz-meter::-moz-progress-bar{background:var(--accent)}
.quiz-question h3{font-size:clamp(22px,3.5vw,34px);line-height:1.25;margin:4px 0 24px;letter-spacing:-.5px}.quiz-kicker{color:var(--accent-2);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.quiz-question fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.quiz-choice{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);cursor:pointer;color:var(--text);font-weight:600;transition:border-color .15s,background .15s,transform .05s}.quiz-choice:hover{border-color:var(--accent);background:var(--accent-soft)}.quiz-choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft)}.quiz-choice input{position:absolute;opacity:0;pointer-events:none}.quiz-letter{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:var(--surface-3);color:var(--accent-2)}.quiz-choice:has(input:checked) .quiz-letter{background:var(--accent);color:var(--accent-ink)}
.quiz-warning{min-height:24px;margin:10px 0 0;color:var(--danger)}.quiz-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}.quiz-question.invalid fieldset{animation:quiz-shake .2s linear 2}@keyframes quiz-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:560px){.quiz-backdrop{padding:0}.quiz-shell{min-height:100vh;max-height:100vh;border-radius:0;padding:22px 16px}.quiz-question fieldset{grid-template-columns:1fr}.quiz-choice{min-height:58px}.quiz-actions .btn{flex:1}}
/* Staff controls remain readable on phones and never rely on inline styling. */
.admin-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0}
.admin-heading h1{margin:.4rem 0;font-size:clamp(1.6rem,4vw,2.4rem)}
.admin-heading p{margin:.3rem 0;opacity:.75}
.admin-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--line-strong)}
.admin-tabs a{padding:.65rem .9rem;border:1px solid var(--line-strong);border-radius:.5rem;text-decoration:none;color:inherit}
.admin-tabs a[aria-current=page]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.admin-tabs a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.admin-json{white-space:pre-wrap;overflow-wrap:anywhere;max-height:20rem;overflow:auto}
@media(max-width:600px){.admin-heading{align-items:flex-start;flex-direction:column}.admin-tabs{flex-wrap:nowrap;overflow-x:auto}.admin-tabs a{flex-shrink:0}}


/* Infrastructure coverage: 0-5 levels shown as 0-100 % bars. */
.cover{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin:4px 0 10px}
.cover>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--ok));border-radius:inherit}
.infra-row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.infra-row small{display:block;color:var(--faint)}
.infra-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:4px 14px 8px}
.infra-grid small{color:var(--muted)}
@media(max-width:760px){.infra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Resmî Gazete masthead: a small flag beside the state's own name. */
.gazette-masthead{display:flex;align-items:center;gap:20px;padding:18px 20px;margin-bottom:20px;background:var(--surface-2);border:1px solid var(--line-strong);border-top:4px solid var(--text);border-radius:6px}
.gazette-flag{flex:0 0 auto;width:84px;height:56px;overflow:hidden;border:1px solid var(--line);border-radius:3px}
.gazette-flag svg,.gazette-flag img{display:block;width:100%;height:100%}
.gazette-title{flex:1;min-width:0;text-align:center}
.gazette-title h1{font-family:"Times New Roman",Georgia,serif;font-size:clamp(22px,3vw,32px);margin:6px 0;letter-spacing:.5px}
.gazette-meta{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);font-size:13px;color:var(--muted)}
@media(max-width:560px){.gazette-masthead{flex-direction:column}.gazette-meta{flex-direction:column;align-items:center;gap:2px}}
.infra-grid small.faint{color:var(--faint);font-size:11.5px}

/* Economy: summary tiles, company cards with a production flow, and price tables. */
.eco-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:14px 0 18px}
.eco-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;display:grid;gap:2px;min-width:0;align-content:start}
.eco-tile small{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);font-weight:650}
.eco-tile strong{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.25;overflow-wrap:anywhere}
.eco-tile span{font-size:12px;color:var(--muted)}
.eco-tile .eco-bar{margin-top:6px}
.eco-bar{display:block;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.eco-bar>span{display:block;height:6px;border-radius:inherit;background:var(--accent);transition:width .4s ease}
.eco-bar.run>span{background:linear-gradient(90deg,var(--info),var(--ok))}
.eco-bar.energy>span{background:var(--ok)}.eco-bar.low>span{background:var(--danger)}.eco-bar.xp>span{background:var(--accent-2)}
.eco-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--text);white-space:nowrap}
.eco-chip b{font-variant-numeric:tabular-nums;color:var(--accent-2)}
.eco-chip.muted{color:var(--faint)}.eco-chip.ok{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.eco-chips,.eco-tags{display:flex;flex-wrap:wrap;gap:6px}
.eco-company{display:grid;gap:14px;align-content:start}
.eco-company-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.eco-company-head h2{font-size:18px;margin:0 0 8px}
.eco-section h3{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin:0 0 8px;font-weight:650}
.eco-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.eco-flow-side{display:flex;flex-wrap:wrap;gap:6px}.eco-flow-side:last-of-type{justify-content:flex-end}
.eco-flow small{grid-column:1/-1;color:var(--muted);font-size:12px}
.eco-arrow{font-size:18px;color:var(--accent)}
.eco-progress{display:grid;gap:5px;margin-top:10px}.eco-progress>span{font-size:12.5px;color:var(--muted)}
.eco-actions{margin-top:10px;justify-content:flex-start}
.eco-mini{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.eco-mini .eco-tile{padding:9px 10px;background:var(--surface-2)}.eco-mini .eco-tile strong{font-size:14.5px}
.eco-manage{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.eco-filter{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.eco-filter a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:13px;font-weight:600}
.eco-filter a:hover{text-decoration:none;color:var(--text);border-color:var(--line-strong)}
.eco-filter a.active{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
/* Chips for what trades now, a compact menu for the whole catalogue. */
.eco-filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:4px 0 12px}
.eco-filterbar .eco-filter{margin:0}
.eco-filter-form{display:flex;gap:8px;align-items:center;margin:0}.eco-filter-form .field{display:flex;gap:8px;align-items:center;margin:0}.eco-filter-form .field>span{font-size:12px;color:var(--faint)}.eco-filter-form select{min-width:180px}
.eco-top{margin-bottom:4px}
.eco-table{display:grid;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.eco-row{display:grid;grid-template-columns:minmax(150px,2fr) minmax(110px,1.3fr) minmax(110px,1.2fr) minmax(60px,.6fr) minmax(170px,1.6fr);align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.eco-row:first-child{border-top:0}
.eco-row:hover:not(.head){background:var(--surface-2)}
.eco-row.head{background:var(--surface-2);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-weight:650;padding-top:8px;padding-bottom:8px}
.eco-table.compact .eco-row{grid-template-columns:minmax(110px,1.6fr) repeat(4,minmax(70px,1fr));padding:8px 12px}
.eco-cell{display:grid;gap:1px;min-width:0}
.eco-cell small{font-size:11.5px;color:var(--faint)}
.eco-cell.main strong{font-size:14.5px}
.eco-cell.num{text-align:right;font-variant-numeric:tabular-nums}
.eco-cell.act{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.eco-cell.act .qty{width:70px}
.eco-cell.act form.inline{display:flex;gap:6px;align-items:center;margin:0}
@media(max-width:760px){
 .eco-mini{grid-template-columns:repeat(2,minmax(0,1fr))}
 .eco-row{grid-template-columns:1fr 1fr;row-gap:6px}
 .eco-row.head{display:none}
 /* The price summary stays a real table on phones: five short columns fit, and the header keeps its meaning. */
 .eco-table.compact .eco-row{grid-template-columns:minmax(64px,1.3fr) repeat(4,minmax(0,1fr));gap:6px;padding:7px 8px;font-size:12.5px}
 .eco-table.compact .eco-row.head{display:grid;font-size:9px;letter-spacing:.3px;gap:8px}
 .eco-table.compact .eco-cell.num{text-align:right}
 .eco-tile{padding:10px 12px}.eco-tile strong{font-size:17px}
 .eco-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .eco-table.compact .eco-cell.main{grid-column:auto}
 .eco-cell.main,.eco-cell.act{grid-column:1/-1}.eco-cell.act{justify-content:flex-start}
 .eco-cell.num{text-align:left}
}
.eco-page{display:grid;gap:14px}.eco-page>.eco-tiles,.eco-page>.eco-filterbar{margin:0}.eco-page>.grid{margin:0}
/* Two-to-four column tables for portfolios, pay slips and order lists. */
.eco-table.compact-3 .eco-row{grid-template-columns:minmax(120px,1.6fr) repeat(2,minmax(80px,1fr)) minmax(80px,auto)}
.eco-table.compact-4 .eco-row{grid-template-columns:minmax(140px,1.8fr) minmax(110px,1.2fr) minmax(80px,.8fr) minmax(150px,1.5fr)}
.eco-table.compact-3 .eco-row>.eco-cell:last-child,.eco-table.compact-4 .eco-row>.eco-cell:last-child{justify-self:end}
/* Order book depth: the bar length is the size waiting at that price. */
.eco-book{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.eco-book h3{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);margin:0 0 6px;font-weight:650}
.eco-depth{position:relative;display:flex;justify-content:space-between;gap:8px;padding:4px 8px;font-size:12.5px;font-variant-numeric:tabular-nums;border-radius:6px;overflow:hidden;margin-bottom:3px}
.eco-depth>span{position:absolute;inset:0 auto 0 0;opacity:.18;border-radius:inherit}
.eco-depth.bid>span{background:var(--ok)}.eco-depth.ask>span{background:var(--danger)}
.eco-depth b,.eco-depth em{position:relative;font-style:normal}.eco-depth.bid b{color:var(--ok)}.eco-depth.ask b{color:var(--danger)}
@media(max-width:760px){.eco-table.compact-3 .eco-row,.eco-table.compact-4 .eco-row{grid-template-columns:1fr 1fr}.eco-book{grid-template-columns:1fr}}
.eco-cell>.badge{justify-self:start;width:max-content}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@keyframes popIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
/* Narrow screens scroll the menu sideways; the bar itself is noise. */
.nav{scrollbar-width:none}.nav::-webkit-scrollbar{display:none}

/* Cards without a header strip (party cards, custom sections) still get breathing room at the top. */
.card>:first-child:not(.card-head){margin-top:18px}
.eco-tile strong,.stat strong{font-family:var(--display);letter-spacing:-.02em}
h1{font-family:var(--display)}

/* Politics: seat distribution, party cards, member chips, command shortcuts, motions. */
.seat-bar{display:flex;height:22px;border-radius:6px;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface-2)}
.seat-bar>span{height:100%;border-right:1px solid #0003}.seat-bar>span.vacant{background:repeating-linear-gradient(135deg,var(--surface-3) 0 4px,var(--surface-2) 4px 8px)}
.seat-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:13px;color:var(--muted)}.seat-legend b{color:var(--text);font-variant-numeric:tabular-nums}
.party-card{border-top:3px solid var(--party,var(--accent))}
.party-program{border-left:3px solid var(--line-strong);padding-left:12px;font-style:italic}
.section-title{font-family:var(--display);font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);margin:14px 0 8px}
.member-list{display:flex;flex-wrap:wrap;gap:6px}
.member-avatar{width:24px;height:24px;border-radius:50%;vertical-align:middle;margin-right:4px;object-fit:cover}
.energy-input{width:60px;margin-right:4px}
.member{padding:4px 10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font-size:13px}.member b{color:var(--accent)}
.command-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:4px}
.command-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);color:var(--text);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.command-card:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px)}
.command-icon{grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:19px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.command-card strong{font-family:var(--display);letter-spacing:.5px}.command-card small{color:var(--muted);font-size:12.5px}
.motion{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:7px}.motion:last-of-type{border-bottom:0}
.motion-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.motion small{color:var(--muted);font-size:12.5px}.motion .actions{justify-content:flex-start}
.vote-bar{position:relative;display:flex;height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.vote-bar .yes{background:var(--ok)}.vote-bar .no{background:var(--danger);margin-left:auto}
.vote-bar i{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--text);opacity:.8}
.mp-group{padding:10px 0;border-bottom:1px solid var(--line)}.mp-group:last-child{border-bottom:0}
.mp-party{display:flex;align-items:center;gap:8px;margin-bottom:8px}.mp-party span{margin-left:auto;font-family:var(--display);color:var(--accent)}
/* Career: one card per profession with its level stamped on the corner. */
.prof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.prof-card{display:grid;gap:10px;align-content:start;padding:14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.prof-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.prof-head small{display:block;color:var(--muted);font-size:12.5px}
.prof-head .command-icon{grid-row:auto}
.prof-level{font-family:var(--display);font-size:24px;color:var(--accent);min-width:34px;text-align:right}
.prof-card .btn{justify-self:start}
/* Party cards: the party's colour along the top, its abbreviation as an emblem, and three figures. */
/* The order of government: offices as cards, the powers as a two-column table. */
.order-summary{margin:0;line-height:1.6;color:var(--muted)}
.order-office{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line)}.order-office:last-of-type{border-bottom:0}
.order-office-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.order-office p{margin:0;font-size:13.5px;line-height:1.5}.order-office small{color:var(--faint)}
.order-powers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 24px}
.order-powers>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}.order-powers span{color:var(--muted)}.order-powers b{text-align:right}
/* The map panel names the state with its flag beside it. */
.panel-state-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.panel-state-head h2{margin:2px 0 0}
.panel-flag{flex:none;display:block;width:64px;height:43px;border-radius:5px;overflow:hidden;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.35)}.panel-flag svg{display:block;width:100%;height:100%}
/* The map's visual settings: a small panel beside the zoom buttons. */
.map-fx{position:absolute;left:62px;top:250px;z-index:6;display:grid;gap:8px;width:250px;padding:14px;border-radius:12px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:13px}
.map-fx[hidden]{display:none}.map-fx strong{font-family:var(--display);font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent)}
.map-fx label{display:flex;gap:10px;align-items:center;justify-content:flex-start;text-align:left;cursor:pointer;font-weight:500}.map-fx input[type=checkbox]{flex:none;width:16px;height:16px;margin:0;accent-color:var(--accent)}.map-fx-quality{justify-content:space-between}.map-fx select{flex:1;max-width:130px}.map-fx small{color:var(--faint);line-height:1.4}
.map-controls [data-zoom="fx"][aria-pressed="true"]{background:var(--accent);color:var(--accent-ink,#111)}
/* Election night: one row per party, its background filled to its share of the vote. */
.poll-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.poll-head small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}.poll-head strong{font-family:var(--display);font-size:17px}
.poll-turnout{display:grid;gap:5px;margin-bottom:14px}.poll-turnout small{color:var(--muted);font-size:12.5px}
.poll-bar{height:8px;border-radius:99px;background:var(--surface-3);overflow:hidden}.poll-bar>span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s}
.poll-rows{display:grid;gap:8px;margin-bottom:10px}
.poll-row{--party:var(--accent);position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;isolation:isolate}
.poll-row.lead{border-color:color-mix(in srgb,var(--party) 60%,var(--line))}
.poll-fill{position:absolute;inset:0 auto 0 0;z-index:-1;background:color-mix(in srgb,var(--party) 26%,transparent);border-right:2px solid var(--party);transition:width .8s}.poll-fill.w-0{border-right:0}
.poll-row .party-emblem{width:42px;height:42px;font-size:12px}
.poll-name{flex:1;min-width:0}.poll-name strong{display:block;font-family:var(--display);font-size:16px}.poll-name small{display:block;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poll-num{display:flex;align-items:center;gap:10px;text-align:right}.poll-num strong{display:block;font-family:var(--display);font-size:20px}.poll-num small{display:block;color:var(--muted);font-size:12px}
/* The map's town card: tiles, the office, segmented network bars, the air gauge and the output factors. */
.town-card{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.town-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.town-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.town-tile{display:grid;justify-items:center;gap:2px;padding:12px 6px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);text-align:center}
.town-tile .town-i{width:20px;height:20px;color:var(--muted)}.town-tile strong{font-family:var(--display);font-size:20px}.town-tile small{color:var(--faint);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.town-h{display:flex;align-items:center;gap:7px;margin:6px 0 0;color:var(--muted);font:700 11.5px var(--display);letter-spacing:1.6px;text-transform:uppercase}
.town-infra{display:grid;grid-template-columns:16px 1fr auto 34px;align-items:center;gap:8px;font-size:12.5px}.town-infra b{text-align:right}
.town-seg{display:flex;gap:2px}.town-seg i{width:9px;height:8px;border-radius:2px;background:var(--surface-3)}.town-seg i.on{background:var(--accent)}
.town-infra.k-roads i.on{background:#d4a72c}.town-infra.k-power i.on{background:#e3b341}.town-infra.k-industry i.on{background:#a371f7}.town-infra.k-rail i.on{background:#58a6ff}
.town-note{margin:0;color:var(--faint);font-size:12px;line-height:1.45}.town-note.bad{color:var(--danger,#e5534b)}
.town-air{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 10px;font-size:12px}.town-air small{color:var(--muted)}
.town-gauge{position:relative;height:8px;border-radius:99px;background:var(--surface-3);overflow:visible}.town-gauge>span{display:block;height:100%;border-radius:99px;background:#3fb950}
.town-gauge.over>span{background:linear-gradient(90deg,#d29922,#e5534b)}.town-gauge>b{position:absolute;top:-3px;width:2px;height:14px;background:var(--text);opacity:.55}
.town-eff{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.town-eff>div{display:grid;gap:1px;padding:8px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.town-eff small{color:var(--muted);font-size:11px}.town-eff strong{font-family:var(--display);font-size:17px}.town-eff span{color:var(--faint);font-size:10.5px}
.town-inv{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:12.5px}.town-inv li{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:baseline}.town-inv b{color:var(--ok,#3fb950)}.town-inv small{color:var(--faint)}
/* The regimes page: a comparison table, then one card per regime with its chain of offices and its powers. */
.regime-compare{overflow-x:auto;margin-top:12px}.regime-compare table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
.regime-compare th,.regime-compare td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.regime-compare thead th{color:var(--muted);font-size:11px;letter-spacing:1px;text-transform:uppercase}.regime-compare tbody th small{display:block;color:var(--faint);font-weight:400}
.regime-compare tr.mine{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.regime-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.regime-card{--fam:var(--accent);display:grid;gap:10px;align-content:start;padding:16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--fam)}
.regime-card.f-monarchy{--fam:#d4a72c}.regime-card.f-autocracy{--fam:#e5534b}.regime-card.f-collegial{--fam:#58a6ff}.regime-card.f-republic{--fam:#3fb950}
.regime-card.mine{box-shadow:0 0 0 2px color-mix(in srgb,var(--fam) 55%,transparent)}
.regime-card header{display:flex;justify-content:space-between;align-items:center}.regime-family{color:var(--fam);font:700 11px var(--display);letter-spacing:1.5px;text-transform:uppercase}
.regime-card h3{margin:0;font-family:var(--display);font-size:20px}.regime-summary{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.regime-chain{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:office}
.regime-office{position:relative;padding:8px 10px 8px 14px;border-radius:8px;background:var(--surface-2);border-left:3px solid var(--line-strong)}
.regime-office.exec{border-left-color:var(--fam)}.regime-office.leg{border-left-color:#8b949e}
.regime-office strong{display:block;font-size:13.5px}.regime-office small{display:block;color:var(--faint);font-size:12px;line-height:1.4}
.regime-card details summary{cursor:pointer;color:var(--accent);font-size:13px}
/* The space view: the GPU draws the globe and the space around it; the flat map's names and marks are hidden. */
.map-shell.globe{background:#020409}.map-shell.globe .world-canvas{opacity:0}.map-shell.globe .world-water,.map-shell.globe .world-clouds{display:none}
/* The state's head on the map card: picture (or initial), title and name. */
.leader-card{display:flex;align-items:center;gap:12px;margin:2px 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.leader-card .leader-face{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--surface-3);color:var(--accent);font:800 18px var(--display);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.leader-card .leader-face .town-i{width:20px;height:20px}
.leader-card small{display:block;color:var(--muted);font-size:11px;letter-spacing:1.2px;text-transform:uppercase}.leader-card strong{display:block;font-family:var(--display);font-size:16px}
.leader-card.vacant strong{color:var(--faint)}.leader-gov{display:block;margin-top:2px;color:var(--muted);font-size:12px}.leader-gov b{color:var(--text);font-weight:600}
/* Disasters on the map card, and the world's weather when no town is chosen. */
.town-disaster{display:grid;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid color-mix(in srgb,var(--danger,#e5534b) 45%,var(--line));background:color-mix(in srgb,var(--danger,#e5534b) 10%,var(--surface-2))}
.town-disaster strong{font-size:13.5px}.town-disaster small{color:var(--muted);font-size:12px}
.sky-card{display:grid;gap:8px;margin-top:12px}.sky-row{display:flex;align-items:center;gap:10px}.sky-row strong{display:block;font-size:13.5px}.sky-row small{display:block;color:var(--muted);font-size:12px}
.sky-badge{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#58a6ff;color:#06111f;font:800 13px var(--display)}.sky-row.quake .sky-badge{background:#e5534b;color:#fff;font-size:11px}
/* The state's pooled resources, opened from the map card. */
.town-res{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:8px 10px}.town-res summary{cursor:pointer;color:var(--accent);font-size:13px;font-weight:600}
.town-res-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}.town-res-row small{color:var(--muted)}.town-res-row b{color:var(--ok,#3fb950);font-weight:600}
.map-controls [data-zoom="provinces"][aria-pressed="true"]{background:var(--accent);color:var(--accent-ink,#111)}
/* A player's public profile. */
.cz-page{display:grid;gap:16px;max-width:900px}
.cz-head{display:grid;gap:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface))}
.cz-top{display:flex;gap:18px;align-items:center}
.cz-face{flex:none;width:104px;height:104px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--surface-3);color:var(--accent);font:800 40px var(--display);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 60%,transparent),0 8px 24px rgba(0,0,0,.35)}
.bank-governor-card{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;margin-bottom:16px}
.bank-governor-face{width:48px;height:48px;margin:0;border:1px solid var(--line-strong);box-shadow:none}
.bank-governor-initial{font:700 18px var(--display);color:var(--text)}
.bank-governor-role{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1px;text-transform:uppercase}
.bank-governor-name{font-size:16px;font-weight:700;margin-top:2px}
.bank-governor-tenure{font-size:12px;color:var(--muted);margin-top:2px}
.bank-governor-vacant{font-size:14px;color:var(--muted);margin-top:2px}
.cz-id h1{margin:0;font-family:var(--display);font-size:30px;letter-spacing:.3px}.cz-id h1 small{font-size:18px;color:var(--accent)}
.cz-meta{display:flex;gap:14px;margin:4px 0 8px;color:var(--muted);font-size:13px}
.cz-chips{display:flex;flex-wrap:wrap;gap:6px}.cz-chip{padding:4px 10px;border-radius:6px;font:700 11px var(--display);letter-spacing:1px;text-transform:uppercase;border:1px solid var(--line)}
.cz-chip.office{color:#7cc4ff;border-color:color-mix(in srgb,#7cc4ff 45%,var(--line));background:color-mix(in srgb,#7cc4ff 10%,transparent)}
.cz-chip.rank{color:#e3b341;border-color:color-mix(in srgb,#e3b341 45%,var(--line));background:color-mix(in srgb,#e3b341 10%,transparent)}.cz-chip.civil{color:var(--muted)}
.cz-bio{margin:0;padding:6px 14px;border-left:3px solid var(--accent);color:var(--text);font-style:italic;line-height:1.7}
.cz-lines{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:13.5px}.cz-lines a{color:var(--accent)}
.cz-party{--party:var(--accent)}.cz-party b{color:var(--party)}
.cz-medals{display:flex;flex-wrap:wrap;gap:12px}.cz-medal{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;font-size:26px;border:2px solid var(--line);background:var(--surface-2)}.cz-medal small{font-size:11px;color:var(--muted);margin-top:-6px}
.cz-medal.r1{border-color:#e3b341}.cz-medal.r2{border-color:#9aa4b2}.cz-medal.r3{border-color:#b87333}
.cz-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.cz-job{display:grid;gap:2px;padding:10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.cz-job small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}.cz-job strong{font-family:var(--display)}.cz-job span{color:var(--faint);font-size:12px}
.cz-h{margin:14px 0 6px;color:var(--muted);font:700 11.5px var(--display);letter-spacing:1.5px;text-transform:uppercase}
.cz-row{padding:8px 0;border-bottom:1px solid var(--line)}.cz-row strong{display:block}.cz-row small{color:var(--muted)}
.town-cap{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13px}
.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.party-tile{--party:var(--accent);display:grid;gap:14px;padding:16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);border-top:3px solid var(--party)}
.party-tile.mine{border-color:color-mix(in srgb,var(--party) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--party) 30%,transparent)}
.party-tile header{display:flex;gap:12px;align-items:center}.party-tile header strong{font-family:var(--display);font-size:20px;letter-spacing:.3px}.party-tile header small{display:block;color:var(--muted);font-size:13px}
.party-emblem{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--party);color:#fff;font:800 14px var(--display);letter-spacing:.5px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}
.party-mine{margin-left:6px;padding:2px 8px;border-radius:999px;font:700 10px var(--font);letter-spacing:1px;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);vertical-align:middle}
.party-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px;border-top:1px solid var(--line);text-align:center}
.party-stats b{display:block;font-family:var(--display);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.party-stats small{color:var(--faint);font-size:11.5px}
.party-tile footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.discharge-pending{display:grid;gap:6px;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.discharge-pending small{color:var(--muted)}.discharge-pending .btn{justify-self:start}
/* Each career has its own tone: the icon, the level and the line that says what the career does take it. */
.prof-card{--prof:var(--accent);border-top:2px solid color-mix(in srgb,var(--prof) 70%,transparent)}
.prof-production{--prof:#e0a63a}.prof-research{--prof:#a78bfa}.prof-military{--prof:#7fae5b}.prof-health{--prof:#ef6b6b}.prof-journalism{--prof:#5aa8e6}
.prof-card .command-icon{color:var(--prof);border-color:color-mix(in srgb,var(--prof) 45%,transparent);background:color-mix(in srgb,var(--prof) 12%,transparent)}
.prof-card .prof-level{color:var(--prof)}
.prof-effect{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--prof) 8%,var(--surface-3,rgba(255,255,255,.03)));border:1px solid color-mix(in srgb,var(--prof) 22%,transparent)}
.prof-effect small{grid-column:1/-1;font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint)}
.prof-effect strong{font-family:var(--display);font-size:22px;color:var(--prof);line-height:1.2}
.prof-effect p{grid-column:1/-1;margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.prof-next{display:flex;gap:8px;align-items:baseline;font-size:12.5px;color:var(--muted)}.prof-next>span:first-child{color:var(--prof);font-size:10px}.prof-next b{color:var(--text)}
/* A locked action explains itself instead of failing after the player has done the work. */
.lock-panel{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.lock-panel.locked{border-left:3px solid var(--warn)}.lock-panel.tried{border-left:3px solid var(--info)}.lock-panel.top{border-left:3px solid var(--ok)}
.lock-panel p{margin:4px 0 8px}
.lock-icon{font-size:22px;line-height:1}
.lock-note{color:var(--faint);font-size:12.5px}
.update-banner{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1000;display:flex;gap:14px;align-items:center;padding:12px 14px 12px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow-pop);max-width:calc(100vw - 32px);animation:popIn .25s var(--ease)}
.update-banner span{font-size:14px}
/* Drill buttons and the rank ladder. */
.drill{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.drill .btn{white-space:nowrap}.drill>span{grid-column:1/-1;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-family:var(--display);margin-right:2px}
.drill .btn{height:30px;padding:0 6px;font-size:12.5px}
.actions.start{justify-content:flex-start}
.rank-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rank-class{display:grid;gap:6px;align-content:start}
.rank-class-name{font-family:var(--display);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);padding-bottom:6px;border-bottom:1px solid var(--line)}
.rank{display:grid;grid-template-columns:auto 1fr;column-gap:8px;padding:7px 10px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);opacity:.72}
.rank small{grid-column:2;color:var(--faint);font-size:11.5px}
.rank-chevrons{grid-row:1/3;align-self:center;font-weight:800;color:var(--faint);letter-spacing:-2px;font-size:15px}
.rank.passed{opacity:1}.rank.passed .rank-chevrons{color:var(--ok)}
.rank.current{opacity:1;border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}.rank.current .rank-chevrons{color:var(--accent)}
@media(max-width:760px){.rank-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Promotion checklist and course attendance. */
.promotion{margin-top:14px;padding:14px;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--line)}
.checklist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.checklist li{display:flex;gap:8px;align-items:baseline;color:var(--muted);font-size:13.5px}.checklist li span{color:var(--danger);font-weight:800}
.checklist li.met{color:var(--text)}.checklist li.met span{color:var(--ok)}.checklist small{color:var(--faint)}
.course{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}.course:last-of-type{border-bottom:0}
.course-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.course small{color:var(--muted)}
/* Courts: staff rows and case files with the defence and the reasoned verdict. */
.member-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.member-row strong{margin-right:auto}
.court-case{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}.court-case:last-child{border-bottom:0}
.defense{margin:0;padding:8px 12px;border-left:3px solid var(--line-strong);background:var(--surface-2);border-radius:0 8px 8px 0;color:var(--text);font-size:13.5px;white-space:pre-wrap}
.defense small{display:block;color:var(--faint);font-size:11px;letter-spacing:1px;text-transform:uppercase;margin-bottom:3px}
.defense.verdict{border-left-color:var(--accent)}

/* Long labels wrap inside the button instead of spilling out of their panel. */
.map-panel .btn{white-space:normal;line-height:1.3;padding:10px 12px;letter-spacing:.6px}
.xp-line{display:grid;gap:5px;margin-top:6px}.xp-line>span{font-size:12px;color:var(--muted)}.xp-line b{color:var(--accent-2);font-family:var(--display)}
.home-xp{margin-top:14px}
/* Budget cards: figures, the spending bar and the vote bar. */
.budget{padding:12px 0;border-bottom:1px solid var(--line);display:grid;gap:8px}.budget:last-child{border-bottom:0}

/* XP gain feedback: bar fills smoothly, "+N XP" floats up, a level-up flashes the line. */
.xp-line{position:relative}
.eco-bar>span{transition:width 1.1s cubic-bezier(.3,.8,.3,1)}
.xp-float{position:absolute;right:0;top:-4px;color:var(--ok,#5fbf6a);font-weight:700;font-size:13px;pointer-events:none;animation:xpFloat 1.8s ease-out forwards}
@keyframes xpFloat{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
.level-badge{position:absolute;left:50%;top:-10px;transform:translateX(-50%);background:var(--primary);color:var(--on-primary,#fff);padding:2px 10px;border-radius:999px;font-size:12px;pointer-events:none;animation:lvlPop 2.6s ease-out forwards}
@keyframes lvlPop{0%{opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1;transform:translateX(-50%) scale(1.15)}30%{transform:translateX(-50%) scale(1)}85%{opacity:1}100%{opacity:0}}
.xp-line.level-up .eco-bar{box-shadow:0 0 0 2px var(--primary),0 0 14px var(--primary);transition:box-shadow .3s}
@media (prefers-reduced-motion:reduce){.eco-bar>span{transition:none}.xp-float,.level-badge{animation-duration:.01s}}

/* Official gazette issues: one bordered sheet per issue, entries separated by a single rule. */
.gazette-issues{display:grid;gap:16px;margin-top:16px}
.gazette-issue{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius,6px);overflow:hidden}
.gazette-issue>header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--surface-2);border-bottom:2px solid var(--line-strong)}
.gazette-issue>header strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:18px}
.gazette-issue>header small{color:var(--muted)}
.gazette-entries{padding:4px 18px}
.gazette-entry{display:grid;gap:6px;justify-items:start;padding:14px 0;border-bottom:1px dashed var(--line)}
.gazette-entry:last-child{border-bottom:0}
.gazette-entry strong{font-family:Georgia,'Times New Roman',serif;font-size:16px}
.gazette-entry p{margin:0;color:var(--text);overflow-wrap:anywhere}
.gazette-entry small{color:var(--muted)}
.gazette-empty{text-align:center;padding:40px;color:var(--muted)}

/* Percent classes for bars and markers (see applyStyles in app.js): CSP-safe replacements for inline widths. */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.l-0{left:0%}.l-1{left:1%}.l-2{left:2%}.l-3{left:3%}.l-4{left:4%}.l-5{left:5%}.l-6{left:6%}.l-7{left:7%}.l-8{left:8%}.l-9{left:9%}.l-10{left:10%}.l-11{left:11%}.l-12{left:12%}.l-13{left:13%}.l-14{left:14%}.l-15{left:15%}.l-16{left:16%}.l-17{left:17%}.l-18{left:18%}.l-19{left:19%}.l-20{left:20%}.l-21{left:21%}.l-22{left:22%}.l-23{left:23%}.l-24{left:24%}.l-25{left:25%}.l-26{left:26%}.l-27{left:27%}.l-28{left:28%}.l-29{left:29%}.l-30{left:30%}.l-31{left:31%}.l-32{left:32%}.l-33{left:33%}.l-34{left:34%}.l-35{left:35%}.l-36{left:36%}.l-37{left:37%}.l-38{left:38%}.l-39{left:39%}.l-40{left:40%}.l-41{left:41%}.l-42{left:42%}.l-43{left:43%}.l-44{left:44%}.l-45{left:45%}.l-46{left:46%}.l-47{left:47%}.l-48{left:48%}.l-49{left:49%}.l-50{left:50%}.l-51{left:51%}.l-52{left:52%}.l-53{left:53%}.l-54{left:54%}.l-55{left:55%}.l-56{left:56%}.l-57{left:57%}.l-58{left:58%}.l-59{left:59%}.l-60{left:60%}.l-61{left:61%}.l-62{left:62%}.l-63{left:63%}.l-64{left:64%}.l-65{left:65%}.l-66{left:66%}.l-67{left:67%}.l-68{left:68%}.l-69{left:69%}.l-70{left:70%}.l-71{left:71%}.l-72{left:72%}.l-73{left:73%}.l-74{left:74%}.l-75{left:75%}.l-76{left:76%}.l-77{left:77%}.l-78{left:78%}.l-79{left:79%}.l-80{left:80%}.l-81{left:81%}.l-82{left:82%}.l-83{left:83%}.l-84{left:84%}.l-85{left:85%}.l-86{left:86%}.l-87{left:87%}.l-88{left:88%}.l-89{left:89%}.l-90{left:90%}.l-91{left:91%}.l-92{left:92%}.l-93{left:93%}.l-94{left:94%}.l-95{left:95%}.l-96{left:96%}.l-97{left:97%}.l-98{left:98%}.l-99{left:99%}.l-100{left:100%}

/* --- NEWS TICKER --- */
.news-ticker-container {
  display: flex;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--display);
  font-size: 14px;
  height: 32px;
  align-items: center;
  overflow: hidden;
  position: relative;
  z-index: 15;
}
.news-ticker-label {
  background: var(--danger);
  color: white;
  font-weight: bold;
  padding: 0 12px;
  height: 100%;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  z-index: 2;
  box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}
.news-ticker-scroller {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.news-ticker-content {
  display: flex;
  position: absolute;
  white-space: nowrap;
  line-height: 32px;
  animation: ticker 40s linear infinite;
  gap: 40px;
}
.news-ticker-content span {
  padding-left: 20px;
  position: relative;
}
.news-ticker-content span::before {
  content: "•";
  color: var(--accent);
  position: absolute;
  left: 0;
}
@keyframes ticker {
  0% { transform: translateX(100vw); }
  100% { transform: translateX(-100%); }
}

/* --- 3D COMBAT ARENA --- */
.combat-3d-arena {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  background: var(--surface-1);
  border-radius: 12px;
  padding: 16px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
  margin-top: 12px;
}
.combat-side {
  flex: 1;
  perspective: 1000px;
}
.combat-card {
  background: var(--surface-2);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  transition: transform 0.3s ease;
  height: 100%;
}
.combat-side.attacker .combat-card {
  transform: rotateY(10deg);
  border-left: 4px solid var(--danger);
}
.combat-side.defender .combat-card {
  transform: rotateY(-10deg);
  border-right: 4px solid var(--ok);
}
.combat-card h4 {
  margin: 0 0 12px 0;
  text-transform: uppercase;
  font-family: var(--display);
  letter-spacing: 1px;
}
.combat-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 13px;
}
.combat-stat strong {
  color: var(--accent);
}
.combat-details {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-dim);
  min-height: 32px;
}
.combat-center {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.combat-vs {
  font-size: 24px;
  font-weight: bold;
  color: var(--danger);
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.combat-progress-container {
  width: 100%;
  height: 24px;
  background: var(--surface-3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
  position: relative;
}
.combat-bubble {
  height: 100%;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(0,0,0,0.5) inset;
  background-size: 20px 20px;
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  animation: barberpole 2s linear infinite;
}
.combat-bubble.danger { background-color: var(--danger); }
.combat-bubble.warning { background-color: #f59e0b; }
.combat-bubble.safe { background-color: var(--ok); }
.combat-bubble span {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px black;
  left: 0;
}
.combat-log-details {
  margin-top: 16px;
  background: var(--surface-1);
  border-radius: 6px;
  padding: 8px 12px;
}
@keyframes barberpole {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}
@media (max-width: 600px) {
  .combat-3d-arena {
    flex-direction: column;
  }
  .combat-side.attacker .combat-card { transform: none; border-left: none; border-top: 4px solid var(--danger); }
  .combat-side.defender .combat-card { transform: none; border-right: none; border-bottom: 4px solid var(--ok); }
  .combat-vs { display: none; }
}

/* Motion: short fades on arrival, colour on hover. Nothing jumps or scales under the pointer. */
@keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes backdropFade{from{opacity:0}to{opacity:1}}
.page{animation:riseIn .28s var(--ease) both}
.grid>*{animation:riseIn .32s var(--ease) both}
.grid>:nth-child(2){animation-delay:.03s}.grid>:nth-child(3){animation-delay:.06s}.grid>:nth-child(4){animation-delay:.09s}.grid>:nth-child(n+5){animation-delay:.12s}
.nav-menu,dialog,.modal{transform-origin:top;animation:popIn .18s var(--ease) both}
.modal-backdrop,.quiz-backdrop{animation:backdropFade .25s var(--ease) both}
.btn:active:not(:disabled){transform:translateY(1px)}
.card,.eco-tile{transition:border-color .2s,box-shadow .2s}
.eco-tile:hover{border-color:var(--line-strong)}
.text-center{text-align:center}

/* Map interaction styling */
.map-hover-fx {
    transition: opacity 0.3s ease;
}
.map-hover-fx:hover {
    opacity: 0.85;
}

/* Toast disappearing animation */
@keyframes popOut {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(6px) scale(0.98); }
}
.toast.hiding {
    animation: popOut 0.25s var(--ease) forwards;
}

/* Regime card: an office's rule sits under its title; an empty seat says how it is really filled. */
.row small.block{display:block;color:var(--muted);font-weight:400;font-size:12px;margin-top:2px;max-width:46ch}
.row strong small.block{text-align:right;margin-left:auto}
.row .muted{color:var(--muted)}

/* Battle board: attackers | the battle | defenders. Gold is the attacking side, blue the defending one, as on the map. */
.battle{display:grid;gap:14px}
.battle-top{display:flex;justify-content:space-between;gap:12px}
.battle-back{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--muted)}
.battle-grid{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr) minmax(220px,1fr);gap:14px;align-items:start}
@media (max-width:980px){.battle-grid{grid-template-columns:1fr}.battle-core{order:-1}}
.battle-side,.battle-core,.battle-action{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.battle-side{overflow:hidden}
.battle-side-head{display:flex;gap:10px;align-items:center;padding:12px 14px 6px}
.battle-side-head strong{display:block;font-size:14px}
.battle-side.attacker .battle-side-head strong,.battle-side.attacker .battle-side-stats b,.battle-line-nums .attacker,.battle-team.attacker strong{color:var(--accent-2)}
.battle-side.defender .battle-side-head strong,.battle-side.defender .battle-side-stats b,.battle-line-nums .defender,.battle-team.defender strong{color:var(--info)}
.battle-side-stats{display:flex;justify-content:space-between;padding:4px 14px 10px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.battle-row{display:grid;grid-template-columns:22px 34px 1fr auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line)}
.battle-row.top-1{background:linear-gradient(90deg,var(--accent-soft),transparent 70%)}
.battle-side.defender .battle-row.top-1{background:linear-gradient(90deg,var(--info-soft),transparent 70%)}
.battle-rank{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--faint)}
.battle-row.top .battle-rank{border:1px solid var(--line-strong);color:var(--text)}
.battle-row.top-1 .battle-rank{border-color:var(--accent);color:var(--accent-2)}
.battle-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--line-strong);background:var(--surface-3)}
.battle-avatar.initials{display:grid;place-items:center;font-weight:700;color:var(--muted)}
.battle-row.top-1 .battle-avatar{border-color:var(--accent)}
.battle-who{min-width:0}.battle-who strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.battle-who small{color:var(--faint);font-size:11px}
.battle-crown{color:var(--accent-2);font-size:13px}
.battle-dmg{font-variant-numeric:tabular-nums;font-size:13px}
.battle-side details{border-top:0}.battle-side details>summary{padding:10px 14px;text-align:center;font-size:13px;font-weight:650;cursor:pointer;color:var(--muted)}
.battle-core{padding:18px 22px;display:grid;gap:14px;background-image:repeating-linear-gradient(135deg,#ffffff05 0 2px,transparent 2px 14px)}
.battle-title{display:flex;justify-content:center;align-items:center;gap:10px}
.battle-live{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ok);border:1px solid var(--ok);border-radius:999px;padding:2px 10px;background:var(--ok-soft)}
.battle-versus{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;text-align:center}
.battle-team{display:grid;justify-items:center;gap:6px}.battle-team strong{font-family:var(--display);font-size:clamp(18px,2.2vw,26px);line-height:1.1}
.battle-flag{display:block;width:72px;height:48px;border-radius:6px;overflow:hidden;box-shadow:0 4px 18px #0006}
.battle-flag svg,.battle-flag-sm svg{width:100%;height:100%;display:block}
.battle-flag-sm{display:block;width:40px;height:27px;border-radius:4px;overflow:hidden;flex:0 0 auto}
.battle-flag-img{object-fit:cover}
.battle-swords{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:var(--accent-2);border:1px solid var(--line-strong);background:var(--surface-2)}
.battle-meta{text-align:center;font-size:13px;margin:0}
.battle-line{display:grid;gap:6px}
.battle-line-nums{display:flex;justify-content:space-between;align-items:baseline}.battle-line-nums b{font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.battle-bar{height:12px;border-radius:999px;background:var(--info);overflow:hidden;position:relative}
.battle-bar-a{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-right:3px solid var(--text);transition:width 1s ease}
.battle-line-pct{display:flex;justify-content:space-between;font-size:11px;color:var(--faint)}
.battle-city{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.battle-clock{text-align:center;font-size:14px;color:var(--muted)}.battle-clock b{color:var(--accent-2)}
.battle-elapsed{height:2px;background:var(--line);border-radius:2px;overflow:hidden;width:70%;justify-self:center}
.battle-elapsed>span{display:block;height:100%;background:var(--accent)}
.battle-action{padding:14px 18px;display:grid;justify-items:center;text-align:center;max-width:720px;width:100%;justify-self:center}
.battle-action p{margin:0 0 8px}
.battle-go{display:grid;justify-items:center;gap:6px}.battle-fight{display:flex;justify-content:center}.battle-fight .btn{min-width:160px}
.battle-rule{text-align:center;color:var(--faint)}
.war-reason{margin:8px 0 0;padding:10px 14px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text);font-size:14px;line-height:1.55;white-space:normal}
.war-reason .badge{margin-right:6px}

.map-battle-link{display:block;margin:6px 0 8px;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--danger);background:var(--danger-soft);color:var(--danger);font-weight:650;font-size:13px}
.map-battle-link:hover{text-decoration:none;filter:brightness(1.1)}

/* Medals: the day's podium on the war page and the medal strip on the profile. */
.podium{display:flex;gap:12px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.podium-step{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px;border-radius:10px;background:var(--surface-2,rgba(127,127,127,.08));min-width:110px}
.podium-step.rank-1{order:2;padding-top:18px}.podium-step.rank-2{order:1}.podium-step.rank-3{order:3}
.podium-medal{font-size:28px;line-height:1}
.medal-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}.medal{font-size:22px}

/* Facility sections: one tile per building inside a plant. */
.facility-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.facility-tile{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line,rgba(127,127,127,.25));border-radius:8px}
.facility-level{letter-spacing:2px;font-size:12px;color:var(--accent,#e0b44a)}

/* Company, holding and group logos. */
.eco-logo-row{display:flex;gap:10px;align-items:center}
.eco-logo{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--surface-2,rgba(127,127,127,.12))}
.eco-logo.initials{display:grid;place-items:center;font-weight:700;font-size:18px}
/* Health beside energy in the top bar; it turns red when low enough to slow work down. */
.health{padding:5px 12px;font-size:13px;border-radius:999px;background:var(--info-soft);color:var(--info);font-weight:650;white-space:nowrap;border:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.health.low{background:var(--danger-soft);color:var(--danger)}
.vital{display:grid;justify-items:center;align-content:center;gap:0;min-width:44px;height:40px;padding:2px 6px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:11px;font-variant-numeric:tabular-nums;line-height:1.1}
.vital-icon{font-size:18px;line-height:20px}.vital small{font-size:10px;font-weight:700;white-space:nowrap}
.vital-energy{color:var(--ok);background:var(--ok-soft)}.vital-health{color:var(--info);background:var(--info-soft)}.vital-health.low{color:var(--danger);background:var(--danger-soft)}
.state-weather-notice{display:grid;gap:8px;margin:0 0 14px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line));border-left:3px solid var(--accent);border-radius:10px;background:var(--surface-2)}
.state-weather-notice>strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.state-weather-row{display:flex;align-items:center;gap:10px}.state-weather-row>span:first-child{color:var(--accent);font-size:19px}.state-weather-row b,.state-weather-row small{display:block}.state-weather-row small{font-size:12px;color:var(--muted)}

/* Plant card: a coloured edge by family, a status light, the key numbers, production beside plant health. */
.plant-card{position:relative;overflow:hidden;border-top:3px solid var(--plant-tone,var(--accent))}
.plant-card.plant-food{--plant-tone:var(--ok)}.plant-card.plant-heavy{--plant-tone:var(--warn)}.plant-card.plant-arms{--plant-tone:var(--danger)}
.plant-card::before{content:"";position:absolute;inset:0 0 auto 0;height:90px;background:linear-gradient(180deg,color-mix(in srgb,var(--plant-tone) 12%,transparent),transparent);pointer-events:none}
.plant-hero{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.plant-hero h2{font-size:19px;margin:0 0 2px}
.plant-sub{margin:0 0 8px;color:var(--muted);font-size:13px}
.plant-status{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:650;background:var(--surface-2);border:1px solid var(--line);white-space:nowrap}
.plant-status i{width:8px;height:8px;border-radius:50%;background:var(--faint)}
.plant-status.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.plant-status.ok i{background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:plant-pulse 1.8s infinite}
.plant-status.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.plant-status.warn i{background:var(--warn)}
@keyframes plant-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.plant-status.ok i{animation:none}}
.plant-kpis{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.plant-kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;display:grid;gap:3px;min-width:0;align-content:start}
.plant-kpi small{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);font-weight:650}
.plant-kpi strong{font-size:15px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plant-kpi span{font-size:11.5px;color:var(--muted)}
.plant-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:12px;align-items:start}
.plant-main{display:grid;gap:12px}
.plant-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px}
.plant-lines{display:flex;align-items:center;gap:6px;margin:10px 0 6px;font-size:12px;color:var(--muted)}
.plant-line{width:14px;height:14px;border-radius:4px;border:1px solid var(--line-strong);background:var(--surface-3)}
.plant-line.busy{background:linear-gradient(135deg,var(--info),var(--ok));border-color:transparent}
.plant-lines span:last-child{margin-left:4px}
.plant-health{display:grid;gap:10px}
.plant-gauge{display:grid;gap:5px}
.plant-gauge>div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}.plant-gauge b{font-variant-numeric:tabular-nums}
.plant-gauge small{color:var(--muted);font-size:11.5px}
.plant-facts{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px;padding-top:6px;border-top:1px dashed var(--line)}
.plant-facts span{color:var(--muted)}
/* A company's own page: the registry record on top, the books as real statements, the portfolio as one table. */
.co-back{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:600}
.co-head-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.co-head h2{font-size:21px;margin:0 0 2px}
.co-registry{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 18px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.co-registry div{min-width:0}
.co-registry dt{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--faint);font-weight:650}
.co-registry dd{margin:2px 0 0;font-size:13.5px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.co-desc{position:relative;margin:12px 0 0;font-size:13.5px;line-height:1.55;white-space:pre-line}
.co-desc .muted{color:var(--muted)}
.eco-logo.small{width:32px;height:32px;border-radius:8px}.eco-logo.small.initials{font-size:14px}
.co-portfolio .eco-row{grid-template-columns:minmax(170px,2fr) minmax(130px,1.4fr) minmax(90px,1fr) minmax(110px,1fr) repeat(3,minmax(90px,1fr))}
a.co-row{color:inherit;text-decoration:none}a.co-row:hover{text-decoration:none}
.co-statement .eco-row{grid-template-columns:minmax(160px,2fr) repeat(3,minmax(90px,1fr));padding:8px 12px}
.co-stat .eco-row{grid-template-columns:minmax(150px,2fr) repeat(2,minmax(80px,1fr));padding:8px 12px}
.co-total{background:var(--surface-2)}
.co-sheet{margin-bottom:10px;align-items:start}
.co-bal .eco-row{grid-template-columns:minmax(150px,2fr) minmax(90px,1fr);padding:8px 12px}
.co-goods{margin-bottom:6px}.co-goods .eco-row{grid-template-columns:minmax(120px,2fr) repeat(3,minmax(80px,1fr))}
.co-total.key{background:var(--accent-soft)}
.neg{color:var(--danger)}.pos{color:var(--ok)}
@media(max-width:760px){
 .co-portfolio .eco-row{grid-template-columns:1fr 1fr}
 .co-statement .eco-row,.co-stat .eco-row{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:6px;padding:7px 8px;font-size:12px}
 .co-stat .eco-row{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
 .co-bal .eco-row{grid-template-columns:minmax(0,2fr) minmax(0,1fr);padding:7px 8px;font-size:12px}
 .co-goods .eco-row{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
 .co-bal .eco-row.head,.co-goods .eco-row.head{display:grid;font-size:9px}
 .co-statement .eco-row.head,.co-stat .eco-row.head{display:grid;font-size:9px;letter-spacing:.3px}
 .co-head-top{flex-direction:column}
}
.facility-tile{background:var(--surface-2);transition:border-color .2s var(--ease,ease)}
.facility-tile.built{border-color:color-mix(in srgb,var(--plant-tone,var(--accent)) 45%,var(--line))}
.facility-top{display:flex;align-items:center;gap:8px}
.facility-icon{font-size:17px;line-height:1}
.facility-pips{display:flex;gap:4px;margin:2px 0}
.facility-pips i{width:16px;height:5px;border-radius:3px;background:var(--surface-3)}.facility-pips i.on{background:var(--plant-tone,var(--accent))}
@media (max-width:900px){.plant-body{grid-template-columns:1fr}.plant-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* The map stage: the four layers move and tilt together. Tilted (3B, or dragged with the right mouse button), the plane
   leans back from the viewer and its far edge dissolves into the haze of the atmosphere, as the horizon does from a
   plane window: no drawn curve, the land and sea simply grow paler and fade into a pale sky that darkens upwards. */
.map-stage{position:relative;flex:1;display:flex;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.map-shell.tilted{background:linear-gradient(180deg,#050a14 0%,#0c1729 7%,#2b4262 14%,#6f87a5 20%,#90a6be 26%,#90a6be 100%)}
.map-shell.tilted .map-stage{transform:perspective(1100px) rotateX(var(--tilt,30deg)) scale(var(--tilt-scale,1.14));
 /* The far edge is the planet's limb: an arc that falls away towards the sides, with the sky beyond it. */
 -webkit-mask-image:radial-gradient(70% 70% at 50% 74%,#000 93%,rgba(0,0,0,.55) 97%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 74%,#000 93%,rgba(0,0,0,.55) 97%,transparent 100%)}
.map-shell.tilting .map-stage{transition:none}
.map-haze{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
 /* The atmosphere glows along the limb and thins inwards, as seen from orbit. */
 background:radial-gradient(70% 70% at 50% 74%,rgba(130,165,210,0) 72%,rgba(130,165,210,.16) 86%,rgba(150,190,240,.5) 96%,rgba(185,215,255,.75) 99%,rgba(185,215,255,0) 100%),
  linear-gradient(90deg,rgba(2,6,16,.22),rgba(2,6,16,0) 12%,rgba(2,6,16,0) 88%,rgba(2,6,16,.22))}
.map-shell.tilted .map-haze{opacity:var(--haze,1)}
.map-sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .45s}.map-shell.tilted .map-sky{opacity:1}
.map-controls [data-zoom="tilt"][aria-pressed="true"],.map-controls [data-zoom="sun"][aria-pressed="true"],.map-controls [data-zoom="globe"][aria-pressed="true"]{background:var(--accent);color:var(--accent-ink,#111)}
@media (prefers-reduced-motion:reduce){.map-stage,.map-haze{transition:none}}
/* Sponsored lines bought by companies (press-ads.js). */
.press-ads{display:grid;gap:8px;margin:14px 0;padding:12px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--surface-2)}
.press-ads>small{color:var(--faint);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase}
.press-ad{display:grid;gap:2px}.press-ad strong{color:var(--accent);font-family:var(--display)}.press-ad span{font-size:13.5px}.press-ad em{color:var(--faint);font-size:11px}

/* Natural events and the game calendar (0.219.0). */
.game-calendar{display:flex;align-items:center;gap:12px;padding:8px 24px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.game-calendar strong{color:var(--text)}
.avatar-image{object-fit:cover}
.game-calendar select{width:auto;max-width:190px;padding:3px 6px;font-size:11px}
.game-calendar-label{letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.game-calendar small{margin-left:auto;font-size:11px}
@media(max-width:600px){.game-calendar{gap:8px;padding:7px 12px;flex-wrap:wrap}.game-calendar small{width:100%;margin-left:0}}
.sky-date{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.town-dmg{color:var(--danger);font-style:normal;font-size:11px;font-weight:650}
.sky-badge .town-i{width:14px;height:14px}
.sky-row.tornado .sky-badge,.sky-row.wildfire .sky-badge{background:color-mix(in srgb,var(--danger) 22%,transparent)}
.sky-row.flood .sky-badge,.sky-row.blizzard .sky-badge{background:color-mix(in srgb,var(--info) 22%,transparent)}
.sky-row.drought .sky-badge{background:color-mix(in srgb,var(--warn) 22%,transparent)}
/* War lobby keeps public fronts separate from the player's command tools. */
.war-overview .row{align-items:center}.meter.war-share .meter-bg{fill:#862d38}.meter.war-share .meter-fill{fill:var(--accent)}
.war-lobby{max-width:800px;margin:0 auto 28px}.war-lobby-heading{text-align:center;margin:30px 0 24px}.war-lobby-heading small{letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.war-lobby-heading h1{font-size:30px;margin:10px 0}.war-lobby-heading p{color:var(--muted)}
.war-tabs{display:flex;max-width:450px;margin:0 auto 24px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.war-tabs a{flex:1;padding:13px;text-align:center;text-decoration:none;color:var(--muted);border-radius:7px}.war-tabs a[aria-current]{color:var(--accent);background:#d9b24c18;box-shadow:inset 0 0 0 1px #d9b24c66}.war-tabs span{margin-left:7px}
.war-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;background:var(--surface);padding:18px;border:1px solid var(--line);border-radius:12px;margin-bottom:16px}.war-overview .row{display:flex;flex-direction:column;gap:8px;border:0;text-align:center}.war-overview strong{font-size:22px}.war-front-list{display:grid;gap:16px}.war-front,.war-peace{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#151f31,#111820);padding:22px}.war-front header,.war-front footer{display:flex;justify-content:space-between;align-items:center;gap:10px}.war-front h2{font-size:15px;letter-spacing:.08em;margin:0}.war-opponents{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:12px;margin:24px 0}.war-opponents>div{display:flex;flex-direction:column;gap:8px}.war-opponents>div:last-child{text-align:right;align-items:flex-end}.war-opponents>span{text-align:center;color:var(--accent);font-size:26px}.war-opponents img,.war-opponents svg{width:48px;height:32px;object-fit:cover}.war-opponents small,.war-front-meta{color:var(--muted);font-size:12px}.war-front-meta{display:flex;flex-wrap:wrap;gap:16px;margin:16px 0}.war-front footer{padding-top:16px;border-top:1px solid var(--line)}.war-peace{text-align:center;padding:42px 24px}.war-peace>span{font-size:36px;color:#48cca9}.war-peace p{color:var(--muted);line-height:1.7}.war-peace a{color:var(--accent)}
@media(max-width:600px){.war-front{padding:16px}.war-opponents strong{font-size:13px;overflow-wrap:anywhere}.war-overview{gap:8px;padding:12px}.war-lobby-heading h1{font-size:25px}}