/* Section 1: reusable presentation foundation. Canvas geometry remains unchanged. */
:root{
 --ink:#f0e9d9;--ink-muted:#c1c8bd;--ink-dark:#302c22;
 --slate-950:#111b20;--slate-900:#19282e;--slate-800:#24383e;
 --timber:#665038;--bronze:#b59b65;--gold:#e4c786;--teal:#83d0cf;
 --success:#add4a1;--warning:#efcf89;--danger:#ffb6a3;--magic:#c1aff0;
 --surface:linear-gradient(135deg,#263b41,#18282e 70%);
 --surface-raised:linear-gradient(#35535a,#243c43);
 --font-body:system-ui,-apple-system,"Segoe UI",sans-serif;
 --font-heading:Georgia,"Times New Roman",serif;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
 --radius:8px;--touch-size:44px;--panel-max:640px;--panel-pad:16px;
 --shadow:0 8px 24px #0005;--focus:0 0 0 3px var(--teal);
 --label-fill:#14262eed;--label-ink:#fff1d2;--label-gap:4px;
 --viewport-min:0px;--art-fit:contain;--heading-size:1.2rem;
 color:var(--ink);background:var(--slate-950);font-family:var(--font-body);
}
body{color:var(--ink);background:var(--slate-950)}
h1,h2,h3,h4,.ui-heading{font-family:var(--font-heading);font-weight:600;color:var(--gold);letter-spacing:.015em}
h2{font-size:var(--heading-size)}h3{font-size:1.05rem}
button,.ui-button{background:var(--surface-raised);border:1px solid #708c86;border-bottom-color:#536b68;border-radius:var(--radius);color:var(--ink);box-shadow:inset 0 1px #ffffff15,0 2px 3px #0003;transition:background-color .12s,border-color .12s;line-height:1.25}
button:hover:not(:disabled){border-color:var(--gold);background:#3b5960}
button:active:not(:disabled){box-shadow:inset 0 2px 4px #0005}
button:disabled{opacity:.6;box-shadow:none;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
button[aria-pressed=true],button[aria-selected=true],.ui-button--primary{background:linear-gradient(#426d6c,#294c50);border-color:var(--gold);color:#fff3d6}
input,select{background:#13262e;color:var(--ink);border-color:#698780;box-shadow:inset 0 2px 3px #0004;border-radius:6px}
input::placeholder{color:var(--ink-muted)}label{color:var(--ink-muted)}
#panel,.ui-panel,#account-tools[open]{background:var(--surface);border:1px solid var(--bronze);box-shadow:var(--shadow),inset 0 0 0 3px #e5c7840b;border-radius:var(--radius)}
#panel{max-width:var(--panel-max);padding:var(--panel-pad);scrollbar-color:#788c82 #18282e;scroll-padding-block:12px;overscroll-behavior:contain}
#panel>button:first-child{margin-bottom:8px}
.ui-panel--parchment{background:#e4d5b7;color:var(--ink-dark);border-color:#b39d75}
.ui-panel--illustrated{position:relative;isolation:isolate;overflow:hidden}
.ui-panel--illustrated>.ui-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.2;pointer-events:none}
.ui-card,.cards button,#action-body article,.alliance-content article,#world-choices article,#speedup-store article,#activity-speedups article{
 background:linear-gradient(125deg,#31474b88,#16272e99);border:1px solid #748477;border-radius:var(--radius);padding:12px;margin-block:8px;box-shadow:inset 0 1px #ffffff0b;
}
.ui-card--unit,.ui-card--building{display:grid;grid-template-columns:minmax(48px,72px) minmax(0,1fr);gap:12px;align-items:center}
.ui-art{object-fit:var(--art-fit);max-width:100%;height:auto}.ui-art--thumbnail{width:72px;height:72px}
.ui-tabs,.alliance-tabs,#workspace-tabs{gap:6px;border-bottom:1px solid #7d88624d;padding-bottom:8px}
.ui-tabs{display:flex;flex-wrap:wrap}.ui-tabs button{min-height:var(--touch-size)}
.ui-icon{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.22em;flex:none;margin-inline-end:.35em;color:var(--gold);pointer-events:none}
#rail button[data-ui-icon]::before,#rss dt[data-ui-icon]::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-.13em;margin-right:4px;background:var(--gold);mask:var(--icon-url) center/contain no-repeat;-webkit-mask:var(--icon-url) center/contain no-repeat}
/* Inline SVG icons keep dynamic text and existing click handlers intact. */
.ui-resource{font-variant-numeric:tabular-nums;white-space:nowrap}
dd,#tasks,#building-active,#march-capacity{font-variant-numeric:tabular-nums}
#status,#world-lobby-message,#registration-message{color:var(--warning)}
[role=alert],#march-error,#rename-error{color:var(--danger)}
.ui-notice{border-inline-start:3px solid var(--teal);padding:8px 12px;background:#27485066;overflow-wrap:anywhere}
.ui-notice--warning{border-color:var(--warning)}.ui-notice--error{border-color:var(--danger)}
.ui-state{display:inline-flex;gap:6px;align-items:center;padding:3px 8px;border-radius:20px;border:1px solid currentColor;font-size:.8rem}
.ui-state[data-state=locked]{color:var(--warning)}.ui-state[data-state=completed]{color:var(--success)}.ui-state[data-state=active]{color:var(--teal)}
.ui-progress{display:grid;gap:4px;font-variant-numeric:tabular-nums}.ui-progress progress{width:100%;height:10px;accent-color:var(--teal)}
.ui-progress[data-kind=research] progress{accent-color:var(--magic)}
.ui-tooltip{position:relative}.ui-tooltip [role=tooltip]{display:none;position:absolute;z-index:10;bottom:100%;left:0;max-width:min(280px,80vw);width:max-content;background:#111d24;color:var(--ink);padding:8px;border:1px solid var(--bronze);box-shadow:var(--shadow);pointer-events:none}
.ui-tooltip:focus-within [role=tooltip],.ui-tooltip:hover [role=tooltip]{display:block}
.ui-confirm{background:var(--surface);color:var(--ink);border:1px solid var(--bronze);border-radius:var(--radius);padding:20px;max-width:min(440px,calc(100vw - 24px));box-shadow:var(--shadow)}
.ui-confirm::backdrop{background:#071117bb}.ui-confirm form{display:flex;gap:10px;justify-content:flex-end}.ui-confirm p{line-height:1.5}
.ui-frame{border:12px solid transparent;border-image:url('/play/frame.svg') 24 stretch}
.ui-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;max-height:100%}
@media(max-width:600px){:root{--panel-pad:10px;--heading-size:1.1rem}.ui-card,.alliance-content article,#action-body article{padding:10px}.ui-icon{margin-inline-end:.2em}}
/* Short viewport hooks for the later HUD/map pass; no nav or map geometry rewrite. */
@media(max-height:500px) and (orientation:landscape){:root{--panel-pad:8px;--space-5:12px;--heading-size:1rem}.ui-panel h2{margin-block:6px}.ui-card--unit,.ui-card--building{grid-template-columns:48px minmax(0,1fr)}.ui-art--thumbnail{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(forced-colors:active){button,.ui-card,#panel{border:1px solid CanvasText;box-shadow:none}.ui-icon{color:ButtonText}}