/* --u is one design pixel. The UI was drawn on a 1920-wide canvas, so on
   desktop it is 100vw/1920 exactly; the mobile block redefines it so every
   panel scales up together to a readable size on a phone. */
:root{--u:calc(100vw/1920)}
*{margin:0;box-sizing:border-box} html,body{height:100%;background:#05060a;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif}
/* ONE scroll bar everywhere (Mike 2026-10-28): the phone's look on the website
   too -- a thin rounded see-through thumb, no track, no arrows. Lists that hide
   their bar (scrollbar-width:none) keep hiding it. */
::-webkit-scrollbar{width:6px;height:6px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:rgba(255,255,255,.5)}
@supports (-moz-appearance:none){*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}}
#stage{position:fixed;inset:calc(var(--u)*143) 0 0 0;cursor:grab} #stage.drag{cursor:grabbing}
svg{width:100%;height:100%;display:block;touch-action:none} svg image,svg path{pointer-events:none}
.rb{fill:none;stroke:rgba(0,0,0,.62);stroke-width:2.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.kb{fill:none;stroke:rgb(202, 163, 56);stroke-width:6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
#svg.kview .kb{stroke-width:2.2}  /* kingdom view: thinner than the region-view weight */
.klabel{fill:#f4e4b8;stroke:#000;stroke-width:4px;paint-order:stroke;stroke-opacity:.55;text-anchor:middle;dominant-baseline:middle;font-weight:700;font-size:48px;letter-spacing:.5px}
.rlabel{fill:#fff;stroke:#000;stroke-width:1px;paint-order:stroke;stroke-opacity:.6;text-anchor:middle;dominant-baseline:middle;font-weight:700;font-size:8.5px;font-family:Consolas,monospace}
.rtowns{fill:#f4e4b8;stroke:#000;stroke-width:.8px;paint-order:stroke;stroke-opacity:.6;text-anchor:middle;dominant-baseline:middle;font-weight:700;font-size:7px;font-family:Consolas,monospace}
/* special regions (Mike 2026-10-20): the condition under the region name in its tint colour; its gist only close in */
.rspec{stroke:#000;stroke-width:.8px;paint-order:stroke;stroke-opacity:.7;text-anchor:middle;dominant-baseline:middle;font-weight:700;font-size:6.5px;font-family:Consolas,monospace}
.rspec-good{fill:#7be08f}.rspec-bad{fill:#c99af2}
/* your characters on the map (Mike 2026-10-22) */
#gChars .char-mark image{filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
/* drag and drop (Mike 2026-10-23): a free character can be picked up and dropped on a region */
#stage.chargrab{cursor:move}   /* the map itself shows grab (pan) */
#stage.chardrag,#stage.chardrag *{cursor:grabbing}
#gChars .char-count{fill:#1a1d22;stroke:#caa338;stroke-width:1.5}
#gChars .char-route{fill:none;stroke:#f4e4b8;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:10 7;stroke-linecap:round;stroke-linejoin:round;opacity:.9;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
#gChars .char-route-back{stroke-width:2;stroke-dasharray:4 6;opacity:.7}
#gChars .char-route-done{fill:none;stroke:#f4e4b8;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.3}
#gChars .char-route-end{fill:none;stroke:#f4e4b8;stroke-width:2;vector-effect:non-scaling-stroke;opacity:.8}
#gChars .char-route-dest{fill:rgba(227,192,105,.25);stroke:#E3C069;stroke-width:3;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
#gDest .dest-label{fill:#f4e4b8;font:600 24px Georgia,serif;text-anchor:middle;paint-order:stroke;stroke:#1a1d22;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
#gChars .char-count-n{fill:#f4e4b8;font-size:14px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:Consolas,monospace}
/* your armies and navies on the map (Mike 2026-10-27): ember route lines, BLACK rings (characters' are gold) */
#gArmies .army-mark image{filter:drop-shadow(0 1px 2px rgba(0,0,0,.85))}
#gArmies .army-route{fill:none;stroke:#ff7a52;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:10 7;stroke-linecap:round;stroke-linejoin:round;opacity:.95;filter:drop-shadow(0 0 2px rgba(0,0,0,.9))}
#gArmies .army-route-done{fill:none;stroke:#ff7a52;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.3}
#gArmies .army-route-dest{fill:rgba(0,0,0,.35);stroke:#000;stroke-width:3.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px rgba(255,255,255,.55))}
#gArmies .army-count,#gArmies .army-post{fill:#000;stroke:#ff7a52;stroke-width:1.5}
#gArmies .army-badge-n{fill:#fff;font-size:13px;font-weight:700;text-anchor:middle;dominant-baseline:central;font-family:Consolas,monospace}
#gArmies .army-post-A{stroke:#ff7a52}#gArmies .army-post-D{stroke:#9cc8ff}
.rspec-d{fill:#f0ece2;stroke:#000;stroke-width:.7px;paint-order:stroke;stroke-opacity:.7;text-anchor:middle;dominant-baseline:middle;font-size:4.6px;font-family:Consolas,monospace;display:none}
svg.zdeep .rspec-d{display:inline}
html.m .rspec{font-size:10px}html.m .rspec-d{font-size:7px}
#gRegionB,#gKFill,#gMyFill,#gRegionL,#gKLabels{transition:opacity .18s}
#pop{position:fixed;display:none;background:rgba(12,14,22,.96);color:#e8eefc;border:1px solid #caa338;border-radius:8px;padding:9px 13px;font-size:13px;line-height:1.5;pointer-events:none;z-index:20;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#pop b{color:#f4e4b8}
#pop .inv-pop{color:#cc4444;font-weight:700}
#gInvFill{animation:invPulse 2.4s ease-in-out infinite}   /* a slow pulse, so an invasion reads as live */
@keyframes invPulse{0%,100%{opacity:.7}50%{opacity:1}}
#regionDetail{position:fixed;inset:calc(var(--u)*143) 0 0 0;z-index:40;background:#0a0d14;display:none;opacity:0;transition:opacity .5s ease}
#regionDetail.on{opacity:1}
.rd-frame{position:absolute;inset:0;margin:auto;aspect-ratio:1920/1080;max-width:100vw;max-height:100vh;transform:scale(1.06);transition:transform .7s ease}
#regionDetail.on .rd-frame{transform:none}
/* TERRAIN VIEW (Mike 2026-10-20): between the region view and the region map --
   every region painted in its own terrain, its towns as small settlements */
#gTerrain,#gTowns,#gFocus{transition:opacity .3s}
svg.tview .rlabel{font-size:5.5px}svg.tview .rtowns{display:none}svg.tview .rspec{font-size:4.2px}svg.tview .rspec-d{font-size:3px}
.town-ring{fill:none;stroke-width:1.1px;vector-effect:non-scaling-stroke}
.town-flag{stroke:#1a1208;stroke-width:.35px}
/* who holds a town: the kingdom's name in its colour under the town (Mike 2026-10-21) */
.town-holder{font-family:Georgia,serif;font-weight:700;text-anchor:middle;dominant-baseline:hanging;stroke:#0b0a08;stroke-width:2.4px;paint-order:stroke;stroke-opacity:.85;pointer-events:none}
.rd-terrain{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.rd-b{position:absolute;pointer-events:none}
/* the settlement is the way into the region's inspector */
#rd-village,#rd-town{pointer-events:auto;cursor:pointer}
#rd-name{position:absolute;top:2%;left:50%;transform:translateX(-50%);color:#f4e4b8;font-size:26px;font-weight:700;text-shadow:0 2px 8px #000;letter-spacing:1px}
#rd-back{position:fixed;top:calc(var(--u)*143 + 14px);left:14px;z-index:41;background:rgba(12,14,22,.92);color:#f4e4b8;border:1px solid #caa338;border-radius:8px;padding:9px 15px;font-size:14px;cursor:pointer;font-weight:700}
/* ---- NEW UI CHROME: PSD-extracted overlays ---- */
#topbar-img{position:fixed;top:0;left:0;width:100vw;height:auto;z-index:60;pointer-events:none;user-select:none}
/* Dynamic dropdown carets — the PSD's own arrows (luck up = Shape 1, stacks down = drop down icon).
   Baked arrows were erased from header.png; these overlays show DOWN when the menu is closed and
   UP when it is open, so the player sees there is a dropdown and how to close it. */
.hd-caret{position:fixed;z-index:61;pointer-events:none;width:calc(var(--u)*13);height:calc(var(--u)*12)}
#luck-caret{left:calc(var(--u)*1528);top:calc(var(--u)*95)}
#auto-caret{left:calc(var(--u)*1623);top:calc(var(--u)*96)}
/* ===== RANKING: bottom-nav icon (year-40 gate) + tab bar + standings popup (live) ===== */
#rank-hotspot{position:fixed;z-index:52;cursor:pointer;left:calc(var(--u)*586);bottom:calc(var(--u)*10);width:calc(var(--u)*80);height:calc(var(--u)*105)}
#rank-hotspot.rk-off{cursor:not-allowed}
/* before the first ranking (Year 40) the medallion's trophy shows greyed, not darkened out (Mike 2026-10-22) */
#rank-disabled{position:fixed;z-index:51;display:none;left:calc(var(--u)*586);bottom:calc(var(--u)*33);width:calc(var(--u)*80);height:calc(var(--u)*82);border-radius:50%;background:none;backdrop-filter:grayscale(1) brightness(.9);-webkit-backdrop-filter:grayscale(1) brightness(.9);pointer-events:none}
#rank-popup{width:calc(var(--u)*800);height:calc(var(--u)*660);min-width:500px;min-height:360px}
#rank-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.6% 2.8%;overflow:hidden}
.rk-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.6em;cursor:move}
.rk-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.rk-note{margin-left:auto;font-size:calc(var(--u)*14);color:#b6bac0;font-style:italic}
/* selection bar across the top; the selected tab uses the reverse knob-blue */
.rk-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5em;margin-bottom:.6em;flex:0 0 auto}
.rk-tabs.six{grid-template-columns:repeat(6,1fr)}
.rk-tab{text-align:center;padding:.55em .4em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer;white-space:nowrap}
.rk-tab:hover{background:rgba(202,163,56,.14);color:#fff}
.rk-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.35)}
.rk-body{display:flex;gap:.6em;flex:1;min-height:0}
.rk-col{background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;overflow-y:auto}
.rk-subs{flex:0 0 30%;padding:.4em}
.rk-stand{flex:1 1 auto;padding:.7em .85em;display:flex;flex-direction:column;min-width:0}
.rk-subi{display:flex;align-items:center;gap:.4em;padding:.55em .6em;font-size:calc(var(--u)*16);color:#e3c069;cursor:pointer;border-radius:4px;font-family:'Times New Roman',Times,serif}
.rk-subi:hover{background:rgba(202,163,56,.14);color:#fff}
.rk-subi.sel{background:rgba(202,163,56,.22);color:#fff}
.rk-empty{margin:auto;color:#8a7a4a;font-style:italic;font-size:calc(var(--u)*15);text-align:center;padding:1em;line-height:1.5}
.rk-podium{position:relative;width:100%;max-width:calc(var(--u)*430);margin:0 auto .3em;aspect-ratio:16/8;flex:0 0 auto}
.rk-podium img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.rk-plabel{position:absolute;text-align:center;font-family:'Times New Roman',Times,serif;white-space:nowrap;line-height:1.15}
.rk-plabel .p-place{font-size:calc(var(--u)*12);font-weight:700;letter-spacing:1px}
.rk-plabel .p-name{font-size:calc(var(--u)*15);font-weight:700;color:#f4e4b8}
.rk-band{font-size:calc(var(--u)*13);color:#b6bac0;letter-spacing:3px;text-transform:uppercase;text-align:center;font-weight:700;padding:.3em 0;border-top:1px solid rgba(182,186,192,.35);border-bottom:1px solid rgba(182,186,192,.35);margin:.1em 0 .5em;flex:0 0 auto}
.rk-list{display:flex;flex-direction:column;gap:.28em;overflow-y:auto;flex:1 1 auto;min-height:0}
.rk-row{display:flex;align-items:center;padding:.42em .6em;border-radius:5px;background:rgba(0,0,0,.28);border:1px solid #24323f}
.rk-row.me{background:rgba(202,163,56,.14);border-color:rgba(202,163,56,.5)}
.rk-rank{width:2em;text-align:right;margin-right:.8em;font-size:calc(var(--u)*18);font-weight:700;color:#b6bac0;font-family:'Times New Roman',Times,serif}
.rk-row.top3 .rk-rank{color:#e3c069}
.rk-name{flex:1;font-size:calc(var(--u)*16);color:#e8d9a8;font-family:'Times New Roman',Times,serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk-tp{font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic;margin-right:.6em}
.rk-crown{color:#e3c069;font-size:calc(var(--u)*12)}
.rk-seeall{padding:calc(var(--u)*8) calc(var(--u)*24);cursor:pointer;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);font-weight:700;color:#f4e4b8;background:none;border:9px solid transparent;border-image:url("../ui/btn_purchase.png") 12 fill stretch;flex:0 0 auto}
.rk-seeall:hover{filter:brightness(1.12)}
.rk-foot{display:flex;align-items:center;justify-content:center;gap:.7em;margin-top:.55em;flex:0 0 auto}
.rk-close2{width:calc(var(--u)*40);height:auto;cursor:pointer}
.rk-close2:hover{filter:brightness(1.12)}
.rk-filt{display:flex;gap:.5em;flex-wrap:wrap;margin-bottom:.5em;flex:0 0 auto}
.rk-filt .ig-sel{flex:1 1 12em;min-width:0}
.rk-mine{text-align:center;padding:.4em 0 .6em;flex:0 0 auto}
.rk-mine-rank{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*44);font-weight:700;color:#e3c069;line-height:1}
.rk-mine-of{font-size:calc(var(--u)*15);color:#b6bac0;margin-top:.2em}
/* ===== ARTIFACTS: bottom-nav icon + tab bar + relic-card grid (mirrors artifacts-page.jsx) ===== */
#artifact-hotspot{position:fixed;z-index:52;cursor:pointer;left:calc(var(--u)*730);bottom:calc(var(--u)*10);width:calc(var(--u)*81);height:calc(var(--u)*105)}
#artifacts-popup{width:calc(var(--u)*900);height:calc(var(--u)*660);min-width:520px;min-height:380px}
#artifacts-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.6% 2.8%;overflow:hidden}
.af-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.6em;cursor:move}
.af-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.af-note{margin-left:auto;font-size:calc(var(--u)*14);color:#b6bac0;font-style:italic}
.af-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-bottom:.6em;flex:0 0 auto}
.af-tab{text-align:center;padding:.55em .4em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer;white-space:nowrap}
.af-tab:hover{background:rgba(202,163,56,.14);color:#fff}
.af-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.35)}
.af-grid{flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*236),1fr));grid-auto-rows:minmax(calc(var(--u)*540),auto);gap:calc(var(--u)*12);align-content:start;padding-right:.3em}
.af-empty{grid-column:1/-1;margin:2em auto;color:#8a7a4a;font-style:italic;text-align:center;font-size:calc(var(--u)*15);line-height:1.6}
/* relic card = artifacts-page.jsx RelicCard (tokens: GOLD #c39037, BG_CARD rgba(0,0,0,.85), BORDER rgba(80,60,30,.25)) */
.af-card{position:relative;background:rgba(0,0,0,.85);border:1px solid rgba(120,95,50,.45);border-radius:8px;padding:calc(var(--u)*12);height:100%;display:flex;flex-direction:column;overflow:hidden}
.af-card.new{background:rgba(120,196,90,.12);border-color:rgba(150,220,110,.75);box-shadow:0 0 10px rgba(150,220,110,.45)}
.af-newbadge{position:absolute;top:calc(var(--u)*8);right:calc(var(--u)*8);background:rgba(150,220,110,.9);color:#0d1f0b;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*11);letter-spacing:1px;padding:1px calc(var(--u)*8);border-radius:1em}
.af-img{width:100%;aspect-ratio:512/341;object-fit:cover;object-position:center;border-radius:6px;border:1px solid rgba(195,144,55,.25);margin-bottom:calc(var(--u)*8);display:block;background:#0c1116;flex:0 0 auto}
.af-namerow{display:flex;justify-content:space-between;align-items:baseline;gap:.5em;flex:0 0 auto}
.af-name{color:#c39037;font-family:Georgia,serif;font-size:calc(var(--u)*16)}
.af-rarity{font-size:calc(var(--u)*12);letter-spacing:1px;font-family:Georgia,serif;flex:0 0 auto}
.af-set{color:rgba(180,170,150,.6);font-size:calc(var(--u)*12);font-family:Georgia,serif;margin-top:2px}
.af-narr{color:rgba(180,170,150,.75);font-size:calc(var(--u)*13);font-family:Georgia,serif;margin:calc(var(--u)*6) 0 calc(var(--u)*10);line-height:1.4;flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.af-rewards{border:1px solid rgba(120,95,50,.4);border-radius:6px;padding:calc(var(--u)*8) calc(var(--u)*10);flex:0 0 auto}
.af-rw{display:flex;gap:.6em;font-size:calc(var(--u)*12.5);color:rgba(230,220,200,.9);font-family:Georgia,serif;padding:2px 0;line-height:1.35}
.af-rwl{min-width:calc(var(--u)*74);color:#c39037;flex:0 0 auto}
.af-rw.empty{opacity:.4}
.af-rw.gold span:last-child{color:#c39037}
.af-assign{margin-top:calc(var(--u)*8);font-size:calc(var(--u)*12.5);font-family:Georgia,serif;color:rgba(230,220,200,.9);display:flex;align-items:center;gap:.5em;flex-wrap:wrap;flex:0 0 auto}
.af-assign .k{color:#c39037}
.af-sel{flex:1 1 auto;min-width:0;background:rgba(0,0,0,.5);color:rgba(230,220,200,.9);border:1px solid rgba(120,95,50,.6);border-radius:4px;padding:3px 6px;font-family:Georgia,serif;font-size:calc(var(--u)*12);cursor:pointer}
.af-ench{display:flex;align-items:center;gap:.5em;margin-top:calc(var(--u)*8);flex:0 0 auto}
.af-lamp{width:calc(var(--u)*12);height:calc(var(--u)*12);min-width:9px;min-height:9px;border-radius:50%;background:#2a2a2a;border:1px solid #555;flex:0 0 auto}
.af-lamp.on{background:#c39037;border-color:#e0b34e;box-shadow:0 0 6px rgba(195,144,55,.9)}
.af-ench-btn{padding:2px calc(var(--u)*10);font-family:Georgia,serif;font-size:calc(var(--u)*12);color:#c39037;background:rgba(0,0,0,.4);border:1px solid rgba(195,144,55,.45);border-radius:4px;cursor:pointer}
.af-ench-btn:hover{background:rgba(195,144,55,.16);color:#fff}
.af-ench-btn:disabled{opacity:.45;cursor:default}
.af-act{margin-top:calc(var(--u)*8);padding-top:calc(var(--u)*6);border-top:1px solid rgba(120,95,50,.3);display:flex;align-items:center;gap:.5em;flex:0 0 auto;font-size:calc(var(--u)*12.5);font-family:Georgia,serif;color:rgba(230,220,200,.9)}
.af-act .k{flex:1 1 auto;color:#c39037}
.af-done{margin-top:calc(var(--u)*6);font-size:calc(var(--u)*12);font-family:Georgia,serif;font-style:italic;color:rgba(180,170,150,.7);flex:0 0 auto}
.af-done.warn{color:#e0a53a;font-style:normal}
/* map layer toggle (Fishland: surface / underwater, Mike 2026-10-18) - shown only when the viewer may see more than one map of this world */
#layer-toggle{position:fixed;z-index:45;display:none;gap:.35em;left:calc(var(--u)*24);top:calc(var(--u)*160);padding:calc(var(--u)*6);background:rgba(4,14,20,.82);border:1px solid rgba(195,144,55,.55);border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
#layer-toggle button{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#d8cfb6;background:rgba(0,0,0,.35);border:1px solid rgba(120,95,50,.6);border-radius:6px;padding:.35em .9em;cursor:pointer;min-height:32px}
#layer-toggle button:hover{background:rgba(202,163,56,.14);color:#fff}
#layer-toggle button.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.35);cursor:default}
/* ===== BOTTOM-NAV numbers (rank / artifacts / empire) + EMPIRE label + goals popup ===== */
/* a number that replaces a bottom-nav medallion glyph; navy disc matches the medallion inner */
.nav-num{position:fixed;z-index:53;display:none;transform:translate(-50%,50%);align-items:center;justify-content:center;width:calc(var(--u)*60);height:calc(var(--u)*60);border-radius:50%;background:radial-gradient(circle at 50% 42%,#06212d,#03151d 76%);box-shadow:inset 0 0 5px rgba(0,0,0,.55);font-family:'Times New Roman',Times,serif;font-weight:700;color:#e9d7a3;font-size:calc(var(--u)*30);line-height:1;text-shadow:0 1px 2px #000;pointer-events:none}
#rank-num{left:calc(var(--u)*626);bottom:calc(var(--u)*74)}
#artifact-num{left:calc(var(--u)*770);bottom:calc(var(--u)*74)}
#empire-num{left:calc(var(--u)*1118);bottom:calc(var(--u)*74)}
/* EMPIRE label (replaces the painted-out COURT; TimesNewRomanPSMT like the baked labels) */
#empire-label{position:fixed;z-index:53;left:calc(var(--u)*1118);bottom:calc(var(--u)*9);transform:translateX(-50%);font-family:'Times New Roman',Times,serif;font-weight:700;color:#b79d66;font-size:calc(var(--u)*15);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 1px #000;pointer-events:none}
#empire-hotspot{position:fixed;z-index:54;cursor:pointer;left:calc(var(--u)*1078);bottom:calc(var(--u)*10);width:calc(var(--u)*81);height:calc(var(--u)*105)}
/* ===== REPORT A BUG popup (Menu, [Dev W19]) ===== */
#bug-popup{width:calc(var(--u)*600);height:calc(var(--u)*560);min-width:360px;min-height:340px}
#bug-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3% 3.4%;overflow:auto}
.bg-head{display:flex;align-items:center;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.6em;cursor:move;flex:0 0 auto}
.bg-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.bg-intro{font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4;flex:0 0 auto}
.bg-note{flex:1 1 auto;min-height:calc(var(--u)*140);width:100%;box-sizing:border-box;resize:none;font:inherit;font-size:calc(var(--u)*16);color:#f4e4b8;background:rgba(0,0,0,.35);border:1px solid #6b5a2a;border-radius:6px;padding:.6em}
html.m .bg-note{font-size:16px}
.bg-count{text-align:right;font-size:calc(var(--u)*12);color:#8a7a4a;margin:.25em 0 .5em;flex:0 0 auto}
.bg-facts{flex:0 0 auto;border:1px solid #2a3a4a;border-radius:6px;padding:.4em .6em;background:rgba(0,0,0,.2)}
.bg-fh{font-size:calc(var(--u)*12);color:#b6bac0;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:.2em}
.bg-f{display:flex;justify-content:space-between;gap:.8em;font-size:calc(var(--u)*14);padding:.15em 0;color:#b6a888}
.bg-f b{color:#e8d9a8;font-weight:400;text-align:right;overflow-wrap:anywhere}
/* ===== WHAT'S NEW popup + the Menu's version line (Mike 2026-10-30) ===== */
#whatsnew-popup{width:calc(var(--u)*600);height:calc(var(--u)*560);min-width:360px;min-height:300px}
#whatsnew-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3% 3.4%;overflow:hidden}
.wn-list{flex:1 1 auto;overflow-y:auto;padding-right:.3em}
.wn-ver{border-top:1px solid #3b4247;padding:.55em 0}
.wn-ver:first-child{border-top:none;padding-top:0}
.wn-vh{display:flex;align-items:baseline;gap:.6em;flex-wrap:wrap}
.wn-num{font-size:calc(var(--u)*20);font-weight:700;color:#e3c069;font-family:'Times New Roman',Times,serif}
.wn-tt{font-size:calc(var(--u)*16);color:#f4e4b8}
.wn-dt{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;white-space:nowrap}
.wn-ver ul{margin:.35em 0 0;padding-left:1.2em}
.wn-ver li{font-size:calc(var(--u)*15);color:#b6a888;line-height:1.4;margin:.15em 0}
.wn-none{font-size:calc(var(--u)*15);color:#b6a888;line-height:1.4}
#menu-menu .mm-ver{text-align:center;font-size:calc(var(--u)*12);letter-spacing:1px;color:#8a7a4a;padding-top:calc(var(--u)*6);border-top:1px solid #3b4247;margin-top:calc(var(--u)*4)}
html.m .wn-num{font-size:18px} html.m .wn-tt,html.m .wn-ver li,html.m .wn-none{font-size:15px} html.m .wn-dt{font-size:13px}
#empire-popup{width:calc(var(--u)*580);height:calc(var(--u)*500);min-width:360px;min-height:300px}
#empire-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3% 3.4%;overflow:hidden}
.ep-head{display:flex;align-items:center;gap:.6em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.5em;cursor:move;flex:0 0 auto}
.ep-castle{width:calc(var(--u)*40);height:auto;flex:0 0 auto}
.ep-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ep-prog{margin-left:auto;font-size:calc(var(--u)*18);color:#e3c069;font-family:'Times New Roman',Times,serif;font-weight:700}
.ep-intro{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.5em;line-height:1.4;flex:0 0 auto}
.ep-goals{flex:1 1 auto;min-height:0;overflow-y:auto}
.ep-goal{display:flex;align-items:flex-start;gap:.7em;padding:calc(var(--u)*9) .2em;border-top:1px solid #24323f}
.ep-goal:first-child{border-top:none}
.ep-pip{width:calc(var(--u)*16);height:calc(var(--u)*16);min-width:13px;min-height:13px;border-radius:50%;flex:0 0 auto;margin-top:.25em;border:1.5px solid rgba(255,226,155,.55);background:transparent}
.ep-pip.on{background:rgba(255,226,155,.92);border-color:rgba(255,226,155,.92);box-shadow:0 0 5px rgba(255,226,155,.6)}
.ep-gtext{flex:1 1 auto;min-width:0}
.ep-gname{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*17);color:#f4e4b8}
.ep-gname.off{color:#9a8d6a}
.ep-gdesc{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#b6a888;line-height:1.35;margin-top:1px}
.ep-gprogs{margin-top:.3em;padding:.25em .5em;border-left:2px solid rgba(195,144,55,.45);background:rgba(0,0,0,.18)}
.ep-gprog{display:flex;justify-content:space-between;gap:.8em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#b6a888;line-height:1.4}
.ep-gprog b{color:#e3c069;font-weight:700;text-align:right;white-space:nowrap}
.ep-gprog.ok b{color:#8fd08f}
.ep-gprog.none{display:block;margin-top:.3em;font-style:italic;color:#8a7a5a}
.ep-gstatus{margin-left:auto;font-size:calc(var(--u)*13);font-family:'Times New Roman',Times,serif;font-weight:700;flex:0 0 auto;padding-left:.6em;white-space:nowrap}
.ep-gstatus.done{color:#8fd08f}
.ep-gstatus.pending{color:#9a8d6a}
/* Empire achieved (5/5): the crown returns in reverse colour (dark on gold) to show it is active. */
#empire-active{position:fixed;z-index:53;display:none;transform:translate(-50%,50%);align-items:center;justify-content:center;width:calc(var(--u)*60);height:calc(var(--u)*60);border-radius:50%;background:radial-gradient(circle at 50% 40%,#f7e8b4,#caa338 76%);box-shadow:0 0 10px rgba(255,226,155,.9),inset 0 0 6px rgba(120,80,10,.45);left:calc(var(--u)*1118);bottom:calc(var(--u)*74);pointer-events:none}
#empire-active img{width:70%;height:70%;object-fit:contain;filter:brightness(0) opacity(.82)}
#empire-popup.ep-achieved .ep-title{color:#ffe29b;text-shadow:0 0 7px rgba(255,226,155,.7)}
#empire-popup.ep-achieved .ep-prog{color:#ffe29b;text-shadow:0 0 6px rgba(255,226,155,.7)}
#empire-popup.ep-achieved .ep-castle{filter:drop-shadow(0 0 6px rgba(255,226,155,.85))}
/* ===== CHRONICLES: rule book + Q&A (from Pip's 'Need a Hand'; Pip omitted) ===== */
#chron-hotspot{position:fixed;z-index:54;cursor:pointer;left:calc(var(--u)*1216);bottom:calc(var(--u)*10);width:calc(var(--u)*95);height:calc(var(--u)*105)}
#chron-popup{width:calc(var(--u)*900);height:calc(var(--u)*640);min-width:520px;min-height:380px}
#chron-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.6% 2.8%;overflow:hidden}
.cn-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.6em;cursor:move;flex:0 0 auto}
.cn-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.cn-note{margin-left:auto;font-size:calc(var(--u)*14);color:#b6bac0;font-style:italic}
.cn-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin-bottom:.6em;flex:0 0 auto}
.cn-tab{text-align:center;padding:.55em .4em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer;white-space:nowrap}
.cn-tab:hover{background:rgba(202,163,56,.14);color:#fff}
.cn-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.35)}
.cn-body{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*14) calc(var(--u)*18)}
.cn-sec{margin-bottom:calc(var(--u)*14)}
.cn-sectitle{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*18);color:#e3c069;margin-bottom:.15em}
.cn-sectext{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#e8d9a8;line-height:1.5}
.cn-lessons{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*10);margin-bottom:calc(var(--u)*10)}
.cn-lesson{text-align:center;padding:.7em .5em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.cn-lesson:hover{background:rgba(202,163,56,.16);color:#fff}
.cn-back{display:inline-block;margin-bottom:calc(var(--u)*10);padding:.35em .9em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#e3c069;background:rgba(0,0,0,.35);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.cn-back:hover{color:#fff;background:rgba(202,163,56,.16)}
.cn-ask{display:flex;gap:.5em;margin-bottom:calc(var(--u)*10)}
.cn-input{flex:1 1 auto;min-width:0;background:rgba(0,0,0,.45);color:#f4e4b8;border:1px solid #4a5a6a;border-radius:5px;padding:.5em .7em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16)}
.cn-askbtn{flex:0 0 auto;padding:.5em 1.1em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);font-weight:700;color:#f4e4b8;background:#2b5467;border:1px solid #4a8ab0;border-radius:5px;cursor:pointer}
.cn-askbtn:hover{background:#356986;color:#fff}
.cn-prompt{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.5em;font-style:italic}
.cn-topic{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#b6bac0;letter-spacing:1px;text-transform:uppercase;margin:calc(var(--u)*8) 0 .2em}
.cn-q{display:block;width:100%;text-align:left;padding:.42em .6em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#e8d9a8;background:rgba(0,0,0,.25);border:1px solid #24323f;border-radius:5px;cursor:pointer;margin-bottom:.3em}
.cn-q:hover{background:rgba(202,163,56,.14);color:#fff}
.cn-ans-q{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*18);color:#e3c069;margin-bottom:.3em}
.cn-ans-a{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);color:#e8d9a8;line-height:1.55}
.cn-empty{color:#8a7a4a;font-style:italic;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);padding:.6em 0}
/* ===== BUILDING popup (knob -> Building): Buildings / Status / Queue ===== */
#build-popup{width:calc(var(--u)*1080);height:calc(var(--u)*680);min-width:640px;min-height:420px}
#build-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4% 2.6%;overflow:hidden}
.bd-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.55em;cursor:move;flex:0 0 auto}
.bd-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.bd-mode{margin-left:auto;font-size:calc(var(--u)*24);font-weight:700;color:#e3c069;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.bd-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-bottom:.55em;flex:0 0 auto}
.bd-tab{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.bd-tab:hover{background:rgba(202,163,56,.14);color:#fff}
.bd-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.35)}
.bd-body{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*12) calc(var(--u)*14)}
.bd-intro{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4}
.bd-center{text-align:center}
.bd-grid{margin:.2em auto 0;border-collapse:separate;border-spacing:calc(var(--u)*4);font-family:'Times New Roman',Times,serif}
.bd-grid th{font-size:calc(var(--u)*13);color:#e3c069;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:.3em .4em;cursor:pointer}
.bd-grid td.rn{font-size:calc(var(--u)*15);color:#e8d9a8;text-align:left;padding:.2em .5em;white-space:nowrap}
.bd-grid tbody tr{cursor:pointer}
.bd-grid tbody tr:hover td{background:rgba(202,163,56,.10)}
.bd-grid td.rn:hover{color:#f4e4b8;text-decoration:underline}
/* Status: queue health, bottleneck, pillar totals, a region's buildings (Mike 2026-10-24) */
.bd-stat td{vertical-align:top}
.bd-sx{display:inline-block;width:1.1em;color:#e3c069;cursor:pointer}
.bd-qh{display:inline-block;white-space:nowrap;padding:3px 7px;border-radius:5px;font-size:calc(var(--u)*12.5);font-weight:700;border:1px solid rgba(0,0,0,.15)}
.bd-qh-full{background:#3f9140;color:#fff}.bd-qh-building{background:#2f74b5;color:#fff}.bd-qh-slowed{background:#e8962b;color:#241400}
.bd-qh-stalled{background:#b03636;color:#fff}.bd-qh-idle{background:#c1ccb3;color:#5a6550}
.bd-bn{font-size:calc(var(--u)*13);color:#e8d9a8;text-align:left;min-width:calc(var(--u)*190);max-width:calc(var(--u)*300);white-space:normal;line-height:1.3}
.bd-lvsum{font-size:calc(var(--u)*11.5);color:#9a8d6a;margin-top:2px}
.bd-sxrow td{background:rgba(0,0,0,.22);text-align:left;cursor:default}
.bd-sxrow:hover td{background:rgba(0,0,0,.22)!important}
.bd-sxp{font-size:calc(var(--u)*13);color:#b6a888;margin:.2em 0;line-height:1.6}
.bd-sxp b{color:#e3c069;margin-right:.4em}
.bd-sxb{display:inline-block;margin:0 .6em .1em 0;color:#e8d9a8}
.bd-sxb i{font-style:normal;font-weight:700;color:#f4e4b8}
.bd-pill{min-width:calc(var(--u)*66);display:inline-block;text-align:center;padding:3px 7px;border-radius:5px;font-size:calc(var(--u)*12.5);font-weight:700;border:1px solid rgba(0,0,0,.15);cursor:pointer}
.bd-legend{display:flex;flex-wrap:wrap;gap:1em;margin-top:.7em;font-family:'Times New Roman',Times,serif;justify-content:center}
.bd-leg{display:flex;align-items:center;gap:.4em;font-size:calc(var(--u)*13.5)}
.bd-sw{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.25);flex:0 0 auto}
.bd-leg .l{font-weight:700}.bd-leg .h{color:#8a7a4a;font-style:italic}
.bd-qsub{display:grid;grid-template-columns:repeat(2,1fr);gap:.4em;margin-bottom:.6em}
.bd-qtab{text-align:center;padding:.42em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);font-weight:700;color:#e3c069;background:rgba(0,0,0,.25);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.bd-qtab:hover{background:rgba(202,163,56,.14);color:#fff}
.bd-qtab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8}
.bd-pillar{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*8) calc(var(--u)*11);margin-bottom:calc(var(--u)*8);background:rgba(0,0,0,.2)}
.bd-pillar-h{display:flex;align-items:center;gap:.6em;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*17);color:#e3c069;margin-bottom:.25em}
.bd-pillar-h .n{margin-left:.6em;flex:0 0 auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.bd-blds{display:flex;flex-wrap:wrap;gap:.4em}
.bd-bld{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#e8d9a8;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:4px;padding:.2em .6em}
.bd-tolvl{font-size:calc(var(--u)*13);color:#e3c069}
.bd-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*210),1fr));gap:calc(var(--u)*10)}
.bd-style{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);background:rgba(0,0,0,.22);cursor:pointer}
.bd-style:hover{border-color:#4a8ab0;background:rgba(43,84,103,.28)}
.bd-style.sel{border-color:#4a8ab0;background:#2b5467}
.bd-style .sn{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*16);color:#f4e4b8}
.bd-style .sd{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#b6a888;line-height:1.35;margin-top:2px}
.bd-terrsel{display:flex;flex-wrap:wrap;gap:.4em;margin-bottom:.7em;padding-bottom:.6em;border-bottom:1px solid #2a3a4a}
.bd-terrchip{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;padding:.28em .7em;cursor:pointer;text-align:center}
.bd-terrchip:hover{background:rgba(202,163,56,.14);color:#fff}
.bd-terrchip.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8}
.bd-own{display:flex;gap:.7em;height:100%}
.bd-own-col{flex:1 1 50%;min-width:0;display:flex;flex-direction:column}
.bd-own.three>.bd-own-col{flex:1 1 0}
.bd-own.three>.bd-qcol{flex:1.4 1 0}
/* phone: the queue editor's columns stack, each list scrolling on its own */
@media (max-width:640px){.bd-own,.bd-own.three{flex-direction:column;height:auto}
  .bd-own>.bd-own-col,.bd-own.three>.bd-own-col,.bd-own.three>.bd-qcol{flex:0 0 auto}
  .bd-own .bd-own-list{max-height:38vh}}
.bd-curpill{border:1px solid #2a3a4a;border-radius:5px;margin-bottom:.3em;background:rgba(0,0,0,.18)}
.bd-curpill-h{display:flex;align-items:center;gap:.4em;cursor:pointer;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*14);color:#e3c069;padding:.32em .45em}
.bd-curpill-h:hover{background:rgba(202,163,56,.10)}
.bd-curpill-h .n{margin-left:auto;font-size:calc(var(--u)*12);color:#8a7a4a;font-weight:400}
.bd-curblds{padding:.1em .35em .35em;display:flex;flex-direction:column;gap:.18em}
.bd-currow{display:flex;align-items:center;justify-content:space-between;gap:.5em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13.5);color:#e8d9a8;padding:.14em .35em;border-radius:3px;background:rgba(255,255,255,.03)}
.bd-currow.off{opacity:.45}
.bd-curlvl{color:#f4e4b8;font-weight:700;white-space:nowrap}
.bd-currow.off .bd-curlvl{color:#8a7a4a;font-weight:400}
.bd-currow[data-curbld]{cursor:pointer}
.bd-currow[data-curbld]:hover{background:rgba(202,163,56,.14)}
.bd-rtabs{display:grid;grid-template-columns:4fr 1fr;gap:.45em;grid-column:1/-1;align-items:stretch}
.bd-rname{display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*20);color:#f4e4b8;background:#2b5467;border:1px solid #4a8ab0;border-radius:5px;box-shadow:inset 0 0 8px rgba(74,138,176,.35);letter-spacing:.5px}
.bd-rback{padding-left:calc(var(--u)*10);padding-right:calc(var(--u)*10)}
.bd-imgbox{background:#16202a;border:1px solid #4a8ab0;border-radius:10px;padding:calc(var(--u)*18);max-width:min(calc(var(--u)*820),94%);max-height:86vh;overflow-y:auto;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.bd-imgname{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*18);color:#f4e4b8;margin-bottom:.55em}
.bd-imgname span{color:#e3c069;font-weight:400}
.bd-imgpic{max-width:min(100%,calc(var(--u)*340));border-radius:8px;display:block;margin:0 auto}
.bd-detpop{width:calc(var(--u)*430);height:calc(var(--u)*500);min-width:calc(var(--u)*300);min-height:calc(var(--u)*260)}
.bd-detpop .lp-title.bd-detttl{font-size:calc(var(--u)*20);margin-bottom:.4em}
.bd-detpop .lp-title.bd-detttl span{color:#e3c069;font-weight:400}
.bd-chart tr.bd-hl>td{background:rgba(227,192,105,.24);font-weight:700}
.bd-chart tr.bd-hl>td.lv{color:#fff;background:#7a6320}
.lp-btn.bd-detclose{margin-top:.9em;padding-left:calc(var(--u)*56);padding-right:calc(var(--u)*56);min-width:calc(var(--u)*240)}
.bd-imgnoart{padding:2.2em 1em;color:#8a7a4a;font-style:italic;font-family:'Times New Roman',Times,serif;border:1px dashed #3b4247;border-radius:8px}
.bd-imghint{margin-top:.6em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic}
.bd-own-h{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*15);color:#e3c069;margin-bottom:.35em;flex:0 0 auto}
.bd-own-list{flex:1 1 auto;min-height:0;overflow-y:auto;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*6)}
.bd-own-item{display:flex;align-items:center;gap:.5em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.3em .5em;border-radius:4px;cursor:pointer}
.bd-own-item:hover{background:rgba(202,163,56,.14);color:#fff}
.bd-own-item .q{margin-left:auto;color:#e3c069;font-weight:700}
.bd-empty{color:#8a7a4a;font-style:italic;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);padding:.6em}
.bd-terrwrap{margin-bottom:.7em;padding-bottom:.6em;border-bottom:1px solid #2a3a4a}
.bd-checkbox{display:inline-flex;align-items:center;gap:.45em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#e3c069;cursor:pointer;margin-bottom:.5em;user-select:none}
.bd-checkbox .bd-box{width:calc(var(--u)*17);height:calc(var(--u)*17);border:1px solid #4a8ab0;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:calc(var(--u)*13);color:#f4e4b8;background:rgba(0,0,0,.3);line-height:1;flex:0 0 auto}
.bd-checkbox.on .bd-box{background:#2b5467}
.bd-checkbox.sm{margin-bottom:0;gap:0}
.bd-terrgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.bd-htoggle{flex:1 1 auto;display:flex;align-items:center;gap:.5em;cursor:pointer;min-width:0}
.bd-plvl{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#f4e4b8;background:#16202a;border:1px solid #3b4247;border-radius:4px;padding:.12em .3em;margin-left:.6em;flex:0 0 auto}
.bd-qall{display:block;width:100%;text-align:center;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*16);color:#f4e4b8;background:linear-gradient(180deg,#3f9140,#2c6b34);border:1px solid #5aa862;border-radius:6px;padding:calc(var(--u)*13);margin-bottom:calc(var(--u)*11);cursor:pointer;letter-spacing:.4px;text-shadow:0 1px 2px #000}
.bd-mrow.off{opacity:.5}
.bd-mrow.off .bd-mlvl,.bd-mrow.off .bd-mord{pointer-events:none}
.bd-warn{position:absolute;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:40;border-radius:12px}
.bd-warn[hidden]{display:none}
/* .lp-title carries no colour of its own -- the cream comes from
   .hdr-popup .lp-title, which does not reach dialogs raised anywhere else,
   so they inherited black. Fixed on the shared box, so every notice,
   picker and magic screen is readable wherever it is hosted. */
.bd-warnbox .lp-title{color:#f4e4b8}
/* a dialog raised on the page itself (the map's drag and drop, Mike 2026-10-23) has no
   popup around it to give its title its size or its text a colour */
body>.bd-warn .lp-title{font-size:calc(var(--u)*30);font-weight:700;margin-bottom:.35em}
body>.bd-warn .bd-warnbox{color:#e8dcc8}
/* [Dev W11] the mission dialog: a character row in the Who Goes? picker */
.ms-char{display:flex;align-items:center;gap:.6em}
.ms-char img{width:calc(var(--u)*44);height:calc(var(--u)*56);min-width:34px;min-height:44px;object-fit:cover;border:1px solid #6b5a2a;border-radius:4px;flex:0 0 auto}
.ms-char div{display:flex;flex-direction:column;gap:.1em;min-width:0}
.ms-char span{font-size:calc(var(--u)*13);color:#b6a888}
.ms-char .ms-ruler{color:#e3c069}
.bd-warnbox{width:min(calc(var(--u)*560),86%);background:#16202a;border:1px solid #4a8ab0;border-radius:10px;padding:calc(var(--u)*20) calc(var(--u)*24);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.bd-terrall{background:rgba(43,84,103,.3);border-color:#4a8ab0;font-weight:700}
.bd-pillar.open{background:rgba(0,0,0,.3)}
.bd-caret{color:#e3c069;font-size:calc(var(--u)*12);width:1em;display:inline-block}
.bd-qbtn{margin-left:.6em;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*13);color:#f4e4b8;background:linear-gradient(180deg,#3f9140,#2c6b34);border:1px solid #5aa862;border-radius:6px;padding:.26em .9em;cursor:pointer;text-shadow:0 1px 2px #000}
.bd-qbtn:hover,.bd-qall:hover,.bd-ownbtn:hover{background:linear-gradient(180deg,#4aa54a,#357d3f)}
.bd-qbtn.done,.bd-qall.done{filter:brightness(1.3)}
.bd-mblds{margin-top:.4em;border-top:1px solid #2a3a4a;padding-top:.45em;display:flex;flex-direction:column;gap:.32em}
.bd-mrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:.6em;background:rgba(255,255,255,.03);border:1px solid #2a3a4a;border-radius:5px;padding:.3em .55em}
.bd-mrow.dragging{opacity:.45}
.bd-mname{display:flex;align-items:center;gap:.5em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#e8d9a8}
.bd-drag{cursor:grab;color:#6c7a86;font-size:calc(var(--u)*14)}
.bd-mlvl{display:flex;align-items:center;gap:.4em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#b6a888}
.bd-lvlsel{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#f4e4b8;background:#16202a;border:1px solid #3b4247;border-radius:4px;padding:.15em .3em}
.bd-mord{display:flex;gap:.25em}
.bd-arrow{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#e3c069;background:rgba(0,0,0,.3);border:1px solid #3b4247;border-radius:4px;width:calc(var(--u)*26);height:calc(var(--u)*26);line-height:1;cursor:pointer;padding:0}
.bd-arrow:hover:not(:disabled){background:rgba(202,163,56,.18);color:#fff}
.bd-arrow:disabled{opacity:.3;cursor:default}
.bd-arrow.bd-del{color:#d98a8a}
.bd-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*250),1fr));gap:calc(var(--u)*10);margin-bottom:calc(var(--u)*11)}
.bd-theme{position:relative;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*10) calc(var(--u)*12);background:rgba(0,0,0,.22);cursor:pointer}
.bd-theme:hover{border-color:#4a8ab0;background:rgba(43,84,103,.28)}
/* the kingdom's active theme: the game's maroon (Cancel button / .ui-error) with an ACTIVE box top right (Mike 2026-10-21) */
.bd-theme.sel{border-color:#b3312a;background:#4b0708;box-shadow:0 0 7px rgba(179,49,42,.55)}
.bd-theme.sel:hover{border-color:#b3312a;background:#4b0708;filter:brightness(1.12)}
.bd-theme.sel .tn{padding-right:calc(var(--u)*70)}
.bd-theme.sel .tf{border-top-color:rgba(179,49,42,.55)}
.bd-theme-act{position:absolute;top:calc(var(--u)*8);right:calc(var(--u)*8);padding:calc(var(--u)*2) calc(var(--u)*8);border:1px solid #b3312a;border-radius:4px;background:rgba(0,0,0,.35);color:#f6d3ce;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*12);font-weight:700;letter-spacing:1px;text-transform:uppercase}
/* First Steps (Mike 2026-10-27): the theme that suits how the kingdom plays */
.bd-theme.rec{border-color:#C9A94E}
.bd-theme.rec .tn{padding-right:calc(var(--u)*110)}
.bd-theme-rec{position:absolute;top:calc(var(--u)*8);right:calc(var(--u)*8);padding:calc(var(--u)*2) calc(var(--u)*8);border:1px solid #C9A94E;border-radius:4px;background:rgba(0,0,0,.35);color:#f4e4b8;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*12);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.bd-theme.sel .bd-theme-rec{top:calc(var(--u)*34)}
.bd-theme .tn{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*16);color:#f4e4b8}
.bd-theme .td{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#b6a888;line-height:1.35;margin-top:2px}
.bd-theme .tf{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*12);color:#8fa1b0;line-height:1.3;margin-top:.42em;border-top:1px solid #2a3a4a;padding-top:.36em}
.bd-ownbtn{display:block;width:100%;text-align:center;font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*16);color:#f4e4b8;background:linear-gradient(180deg,#3f9140,#2c6b34);border:1px solid #5aa862;border-radius:6px;padding:calc(var(--u)*13);cursor:pointer;letter-spacing:.4px;text-shadow:0 1px 2px #000}
.bd-ownhead{display:flex;align-items:center;gap:.8em;margin-bottom:.55em}
.lp-btn.bd-back{flex:0 0 auto;padding-left:calc(var(--u)*18);padding-right:calc(var(--u)*18)}
.lp-btn.bd-savebtn{flex:0 0 auto;padding-left:calc(var(--u)*18);padding-right:calc(var(--u)*18)}
.bd-ownttl{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*16);color:#f4e4b8}
.bd-qitem{gap:.5em}
.bd-qitem .q{margin-left:0}
.bd-qname{flex:1 1 auto;min-width:0}
.bd-qitem.dragging{opacity:.45}
.bd-blwrap{display:flex;gap:.8em;height:100%}
.bd-bllist{flex:0 0 33%;overflow-y:auto;border:1px solid #2a3a4a;border-radius:6px;padding:.35em}
.bd-blrow{display:flex;align-items:center;gap:.55em;padding:.32em .5em;border-radius:5px;cursor:pointer}
.bd-blrow:hover{background:rgba(202,163,56,.12)}
.bd-blrow.sel{background:#2b5467}
.bd-blthumb{width:calc(var(--u)*40);height:calc(var(--u)*40);object-fit:contain;flex:0 0 auto;border-radius:4px;background:#0c1116;border:1px solid rgba(195,144,55,.2)}
.bd-blname{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);color:#e8d9a8;line-height:1.1}
.bd-blpil{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*11);color:#8a7a4a;text-transform:uppercase;letter-spacing:1px}
.bd-detail{flex:1 1 auto;min-width:0;overflow-y:auto;padding:.2em .5em}
.bd-dhead{display:flex;align-items:center;gap:.8em;margin-bottom:.5em}
.bd-dimg{width:calc(var(--u)*96);height:calc(var(--u)*96);object-fit:contain;flex:0 0 auto;border-radius:6px;background:#0c1116;border:1px solid rgba(195,144,55,.25)}
.bd-noart{width:calc(var(--u)*96);height:calc(var(--u)*96);display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#12202c,#12202c 6px,#0c1620 6px,#0c1620 12px);border:1px dashed rgba(195,144,55,.4);border-radius:6px;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*11);color:#8a7a4a;text-align:center;flex:0 0 auto}
.bd-dname{font-family:'Times New Roman',Times,serif;font-weight:700;font-size:calc(var(--u)*22);color:#f4e4b8}
.bd-dpil{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);color:#e3c069;text-transform:uppercase;letter-spacing:1px}
.bd-ddesc{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);color:#e8d9a8;line-height:1.5;margin-bottom:.55em;background:rgba(74,154,58,.12);border:1px solid rgba(74,154,58,.4);border-radius:8px;padding:.5em .7em}
.bd-prereq{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13.5);color:#e0a84a;background:rgba(200,138,62,.14);border:1px solid rgba(200,138,62,.5);border-radius:5px;padding:.4em .7em;margin-bottom:.55em}
.bd-score{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13.5);color:#cfe3b0;background:rgba(110,150,70,.14);border:1px solid rgba(130,170,90,.45);border-radius:5px;padding:.4em .7em;margin-bottom:.55em;text-align:left}
.bd-chart{width:100%;border-collapse:collapse;font-family:'Times New Roman',Times,serif}
.bd-chart th{color:#e3c069;font-weight:700;padding:.32em .5em;border-bottom:1px solid #3b4247;text-align:center;font-size:calc(var(--u)*12);text-transform:uppercase;letter-spacing:.5px}
.bd-chart th.ben{color:#8fd47a}
.bd-chart td{color:#e8d9a8;padding:.28em .5em;text-align:center;border-bottom:1px solid #1c2733;font-size:calc(var(--u)*13)}
.bd-chart td.ben{background:rgba(74,154,58,.16);color:#bfe6ac}
.bd-chart td.lv{color:#e3c069;font-weight:700}
.bd-chart th.grp{border-bottom:2px solid #3b4247}
.bd-chart th.dim{color:#8a7a4a}
.bd-chart th.sm{font-size:calc(var(--u)*10)}
.bd-chart td.ben.txt{text-align:left;white-space:normal;min-width:calc(var(--u)*130);color:#e8d9a8}
.bd-stub{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*12);color:#9a8850;font-style:italic;margin-top:.5em}
#nav-img{position:fixed;left:calc(var(--u)*471);bottom:0;width:calc(var(--u)*948);height:auto;z-index:50;pointer-events:none;user-select:none}
/* Bottom bar show/hide (Mike 2026-10-27): the bar + dial cover the map's
   bottom regions; the handle hides them all and brings them back. On by default. */
#nav-toggle{position:fixed;z-index:56;left:calc(var(--u)*1432);bottom:calc(var(--u)*12);width:calc(var(--u)*44);height:calc(var(--u)*44);min-width:26px;min-height:26px;
  display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;border-radius:50%;
  background:rgba(4,14,20,.85);border:1px solid rgba(195,144,55,.7);box-shadow:0 2px 8px rgba(0,0,0,.6);color:#e3c069}
#nav-toggle:hover{background:rgba(43,84,103,.9);color:#fff}
#nav-toggle svg{width:55%;height:55%;transition:transform .2s ease}
html.navoff #nav-toggle svg{transform:rotate(180deg)}
#nav-img,#knob,#rank-hotspot,#rank-disabled,#artifact-hotspot,#empire-hotspot,#chron-hotspot,.nav-num,#empire-active,#empire-label{transition:opacity .2s ease}
html.navoff #nav-img,html.navoff #knob,html.navoff #rank-hotspot,html.navoff #rank-disabled,html.navoff #artifact-hotspot,
html.navoff #empire-hotspot,html.navoff #chron-hotspot,html.navoff .nav-num,html.navoff #empire-active,html.navoff #empire-label{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
html.m #nav-toggle{display:none}
/* ===== INTRIGUE popup (knob -> Intrigue): Clandestine Operations / Dossier /
   Spy Network / Counter Intelligence. Purple accents per Mike;
   reuses the Building-popup layout vocabulary + the shared .lp-* buttons.
   Purple action buttons are the blue purchase art hue-shifted (.lp-purple) —
   a recolor, NOT a new button. Red (.lp-cancel) is left untouched. ===== */
#intrigue-popup{width:calc(var(--u)*1080);height:calc(var(--u)*680);min-width:640px;min-height:420px}
#intrigue-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4% 2.6%;overflow:hidden}
.ig-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.55em;cursor:move;flex:0 0 auto}
.ig-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ig-mode{margin-left:auto;font-size:calc(var(--u)*24);font-weight:700;color:#b98cff;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ig-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-bottom:.55em;flex:0 0 auto}
.ig-tab{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ig-tab:hover{background:rgba(202,163,56,.16);color:#fff}
.ig-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ig-panel{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*12) calc(var(--u)*14);font-family:'Times New Roman',Times,serif}
.ig-intro{font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4}
.ig-sec{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*9);background:rgba(0,0,0,.2)}
.ig-sec-h{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:calc(var(--u)*17);color:#b98cff;margin-bottom:.4em;letter-spacing:.5px}
.ig-sec-h .n{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.ig-cols{display:flex;gap:.7em}
.ig-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*205),1fr));gap:calc(var(--u)*8)}
.ig-op{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*8) calc(var(--u)*11);background:rgba(0,0,0,.24);cursor:pointer}
.ig-op:hover{border-color:#4a8ab0;background:rgba(202,163,56,.14)}
.ig-op.sel{border-color:#4a8ab0;background:#2b5467}
.ig-op .on{font-weight:700;font-size:calc(var(--u)*16);color:#f4e4b8}
.ig-op .od{font-size:calc(var(--u)*13);color:#b6a888;line-height:1.35;margin-top:2px}
.ig-op-ic{display:flex;align-items:center;gap:.55em}
.ig-op-ic .ig-optext{min-width:0}
.ig-opic{flex:0 0 auto;width:calc(var(--u)*50);height:calc(var(--u)*50);min-width:36px;min-height:36px;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.ig-opcols{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;align-items:start}
.ig-opcol{display:flex;flex-direction:column;gap:.4em;min-width:0}
.ig-opcol-h{text-align:center;font-weight:700;font-size:calc(var(--u)*14);letter-spacing:1px;text-transform:uppercase;color:#e3c069;padding:.2em 0 .3em;border-bottom:1px solid #3b4247;margin-bottom:.1em}
.ig-optile{cursor:pointer;border-radius:10px;padding:.2em;transition:filter .1s}
.ig-optile img{display:block;width:100%;max-width:calc(var(--u)*112);margin:0 auto}
.ig-optile:hover img{filter:brightness(1.1)}
.ig-optile.sel{background:rgba(202,163,56,0.16)}
.ig-optile.sel img{filter:drop-shadow(0 0 6px #b98cff) drop-shadow(0 0 3px #b98cff)}
.ig-optile-soon{cursor:default}
.ig-optile-soon img{filter:grayscale(.75) brightness(.55)}
.ig-optile-soon .ig-soon{text-align:center;color:#b98cff;font-style:italic;font-weight:700;font-size:calc(var(--u)*12);margin-top:-.2em}
.ig-chosen{display:flex;justify-content:center;margin:.1em 0}
.ig-optile-chosen img{max-width:calc(var(--u)*124)}
.ig-changehint{text-align:center;color:#b98cff;font-style:italic;font-size:calc(var(--u)*13);cursor:pointer;margin-top:-.1em}
.ig-changehint:hover{color:#d4b8ff;text-decoration:underline}
.ig-field{display:flex;align-items:center;gap:.6em;margin:.35em 0}
.ig-field label{flex:0 0 calc(var(--u)*120);font-size:calc(var(--u)*14);color:#e3c069;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.ig-sel{flex:1 1 auto;min-width:0;padding:.2em .35em;background:#16202a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);cursor:pointer}
.ig-list{display:flex;flex-direction:column;gap:.2em;overflow-y:auto}
.ig-item{display:flex;align-items:center;justify-content:space-between;gap:.5em;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.28em .5em;border-radius:4px;background:rgba(255,255,255,.03)}
.ig-recall{color:#b98cff;cursor:pointer;font-style:italic;font-size:calc(var(--u)*12.5);white-space:nowrap}
.ig-recall:hover{color:#d4b8ff;text-decoration:underline}
.ig-item .st{font-size:calc(var(--u)*12.5);color:#8a7a4a;white-space:nowrap}
.ig-slot{display:inline-flex;align-items:center;gap:.4em;font-size:calc(var(--u)*14);color:#e8d9a8;background:rgba(0,0,0,.25);border:1px solid #3b4247;border-radius:5px;padding:.3em .6em;margin:0 .35em .35em 0;cursor:pointer}
.ig-slot:hover{border-color:#4a8ab0}
.ig-slot.sel{background:#2b5467;border-color:#4a8ab0;color:#fff}
.ig-slot.empty{color:#8a7a4a;font-style:italic}
.ig-slot .k{font-size:calc(var(--u)*11);text-transform:uppercase;letter-spacing:1px;color:#8a7a4a}
.ig-tier{text-align:center;padding:.42em .3em;font-size:calc(var(--u)*14);font-weight:700;color:#e3c069;background:rgba(0,0,0,.25);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ig-tier.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8}
.ig-tier.lock{opacity:.45;cursor:default}
.ig-kbtns{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em}
.ig-kgrp{display:flex;align-items:baseline;gap:.6em;margin:.35em 0 .25em;font-size:calc(var(--u)*14);font-weight:700;color:#e3c069}
.ig-kgrp .n{font-weight:400;font-size:calc(var(--u)*12);color:#8a7a4a}
.ig-kbtn{text-align:center;padding:.55em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*13);font-weight:700;color:#e3c069;background:rgba(0,0,0,.28);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ig-kbtn:hover{background:rgba(202,163,56,.16);color:#fff}
.ig-kbtn.locked{opacity:.4;cursor:default;color:#8a7a4a}
.ig-kbtn.locked:hover{background:rgba(0,0,0,.28);color:#8a7a4a}
.ig-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em}
.ig-tierbtn{text-align:center;padding:.45em .3em;border-radius:5px;border:1px solid #3b4247;background:rgba(0,0,0,.28);cursor:pointer;color:#e3c069}
.ig-tierbtn:hover{background:rgba(202,163,56,.16)}
.ig-tierbtn .tt{display:block;font-weight:800;font-size:calc(var(--u)*15);color:#b98cff}
.ig-tierbtn .tn{display:block;font-size:calc(var(--u)*13)}
.ig-tierbtn.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8}
/* [Dev W14] the live Dossier: a slot's state, a tier's lines, one line opened */
.ig-kbtn.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8}
.ig-kbtn .ks{display:block;font-weight:400;font-size:calc(var(--u)*11);color:#a8a07a;margin-top:.15em}
.ig-tierbtn.locked{opacity:.4;cursor:default}
.ig-dline{display:flex;align-items:center;gap:.6em;padding:.3em .4em;border-bottom:1px solid rgba(255,255,255,.06);font-size:calc(var(--u)*14);color:#e8d9a8}
.ig-dline .dv{margin-left:auto;color:#8a7a4a}
.ig-dline .dv.ok{color:#7ec98a;cursor:pointer;text-decoration:underline}
.ig-dline.sel{background:rgba(202,163,56,.12)}
.ig-dtable{width:100%;border-collapse:collapse;margin:.3em 0;font-size:calc(var(--u)*13);color:#e8d9a8}
.ig-dtable th,.ig-dtable td{padding:.2em .4em;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
.ig-dtable th{color:#b98cff;font-weight:700}
.ig-dnote{width:100%;box-sizing:border-box;min-height:4.5em;background:rgba(0,0,0,.35);color:#e8d9a8;border:1px solid #3b4247;border-radius:5px;padding:.4em;font-family:inherit}
.ig-tierbtn.sel .tt{color:#f4e4b8}
.ig-areas-h{font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:.55em 0 .35em}
.ig-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*175),1fr));gap:.4em}
.ig-area{font-size:calc(var(--u)*13);color:#e8d9a8;background:rgba(202,163,56,.08);border:1px solid #2a3a4a;border-radius:5px;padding:.35em .55em}
.ig-4grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.5em}
.ig-4grid>.ig-sec{margin-bottom:0;min-height:0;display:flex;flex-direction:column}
.ig-statrow{display:flex;gap:.5em;justify-content:space-around;align-items:center;margin:.1em 0 .5em}
.ig-stat{text-align:center}
.ig-stat-n{font-size:calc(var(--u)*40);font-weight:800;line-height:1}
.ig-stat-l{font-size:calc(var(--u)*11.5);color:#8a7a4a;margin-top:.25em}
.ig-big{font-size:calc(var(--u)*68);font-weight:800;line-height:1;color:#b98cff;text-align:center}
.ig-rate{font-size:calc(var(--u)*26);font-weight:700;text-align:center;color:#f4e4b8}
.ig-barrow{display:flex;align-items:center;gap:.6em;margin:.3em 0}
.ig-barrow .bl{flex:0 0 calc(var(--u)*180);font-size:calc(var(--u)*13.5);color:#b6a888}
.ig-bartrack{flex:1 1 auto;height:calc(var(--u)*9);min-height:7px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.ig-barfill{display:block;height:100%;background:#9d6dd6}
.ig-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;margin:.2em 0 .4em}
.ig-tile{text-align:center;border:1px solid #5e4590;border-radius:6px;background:rgba(157,109,214,.12);padding:.7em .3em .55em}
.ig-tile[data-ws-show]{cursor:pointer}
.ig-tile[data-ws-show]:hover{border-color:#8a68c4}
.ig-tile.sel{border-color:#b98cff;background:rgba(157,109,214,.26)}
.ig-tile .ig-stat-n{color:#b98cff}
.ig-barrow .bv{flex:0 0 calc(var(--u)*46);text-align:right;font-size:calc(var(--u)*13);color:#e8d9a8}
.ig-stub{font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic;margin-top:.5em}
.lp-btn.lp-purple{border-image:url("../ui/btn_purchase.png") 12 fill stretch;filter:hue-rotate(58deg) saturate(1.12)}
/* ===== ECONOMIC popup (knob -> Economics): Rulership / Loyalty / Trade Routes
   Reuses the Building + Intrigue layout vocabulary and the shared
   .lp-* PSD buttons — .lp-buy (navy) for confirm, .lp-cancel (red) for cancel.
   NO new button art. Tier colours are the canonical rating palette from
   apps/game/src/kingdom/tier-colors.js; loyalty band colours are the region
   page's own (regions2.jsx). ===== */
/* Taller than the Building/Intrigue popups on purpose: Rulership carries the
   five levers plus both governance boxes, and UI_FORMATS.md §2 requires the
   DEFAULT size to show everything with no scroll bar. min-height stays low so
   the player can still shrink it and always reach a resize handle. */
#econ-popup{width:calc(var(--u)*1080);height:calc(var(--u)*820);min-width:640px;min-height:420px}
#econ-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4% 2.6%;overflow:hidden}
.ec-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.55em;cursor:move;flex:0 0 auto}
.ec-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ec-mode{margin-left:auto;font-size:calc(var(--u)*24);font-weight:700;color:#e3c069;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ec-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-bottom:.55em;flex:0 0 auto}
.ec-tab{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ec-tab:hover{background:rgba(202,163,56,.16);color:#fff}
.ec-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ec-panel{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*12) calc(var(--u)*14);font-family:'Times New Roman',Times,serif}
.ec-intro{font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4}
.ec-sec{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*9);background:rgba(0,0,0,.2)}
.ec-sec-h{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:calc(var(--u)*17);color:#e3c069;margin-bottom:.4em;letter-spacing:.5px}
.ec-sec-h .n{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.ec-sub{font-size:calc(var(--u)*13);color:#b6a888;line-height:1.35;margin:-.1em 0 .45em}
.ec-2col{display:grid;grid-template-columns:1fr 1fr;gap:.6em;align-items:start}
.ec-2col>.ec-sec{margin-bottom:0}
.ec-col{display:flex;flex-direction:column;gap:.6em;min-width:0}
.ec-col>.ec-sec{margin-bottom:0}
.ec-eyebrow{font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:.55em 0 .35em}
/* form rows — label + the approved in-popup dropdown (same as .ig-sel) */
.ec-field{display:flex;align-items:center;gap:.6em;margin:.35em 0}
.ec-field label{flex:0 0 calc(var(--u)*150);font-size:calc(var(--u)*14);color:#e3c069;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.ec-sel{flex:1 1 auto;min-width:0;padding:.2em .35em;background:#16202a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);cursor:pointer}
.ec-sel:disabled{opacity:.45;cursor:default}
/* the loyalty region picker: a list with each region's loyalty beside it */
.ec-dd{position:relative;flex:1 1 auto;min-width:0}
.ec-ddbtn{display:flex;align-items:center;justify-content:space-between;gap:.5em;user-select:none}
.ec-ddcar{color:#8a7a4a;font-size:.8em}
.ec-ddlist{position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:6;max-height:calc(var(--u)*320);min-height:0;overflow-y:auto;background:#10161e;border:1px solid #caa338;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.7);padding:.2em 0}
.ec-ddrow{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.25em .55em;font-size:calc(var(--u)*14);color:#f4e4b8;cursor:pointer}
.ec-ddrow:hover{background:#1f2c3a}
.ec-ddrow.on{background:#26364a}
.ec-ddn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-ddhd{padding:.3em .55em .15em;font-size:calc(var(--u)*12);color:#8a7a4a;font-weight:700;letter-spacing:1px;text-transform:uppercase;border-top:1px solid #1c2733}
.ec-barcol.on .ec-bar{outline:2px solid #f0c877;outline-offset:1px}
.ec-barcol.on .ec-barn{color:#f0c877}
/* tax / rate slider */
.ec-slider{display:flex;align-items:center;gap:.6em;margin:.3em 0}
.ec-slider input[type=range]{flex:1 1 auto;min-width:0;accent-color:#4a8ab0;cursor:pointer}
.ec-slider .sv{flex:0 0 calc(var(--u)*92);text-align:right;font-size:calc(var(--u)*15);font-weight:700;color:#f4e4b8}
.ec-scale{display:flex;justify-content:space-between;font-size:calc(var(--u)*12);color:#8a7a4a;margin-top:-.1em}
.ec-policy{font-size:calc(var(--u)*13.5);font-weight:700;letter-spacing:.4px}
/* horizontal meter stacks (region page's loyalty charts) */
.ec-mrow{margin:.32em 0}
.ec-mtop{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;font-size:calc(var(--u)*13.5);color:#e8d9a8}
.ec-mtop .mv{color:#f4e4b8;font-weight:700}
.ec-mtrack{height:calc(var(--u)*8);min-height:6px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-top:.18em}
.ec-mfill{height:100%;display:block}
/* income-effect equation rows */
.ec-eq{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:calc(var(--u)*13.5);color:#e8d9a8;padding:.2em 0;border-bottom:1px solid #1c2733}
.ec-eq:last-child{border-bottom:none}
.ec-eq.tot{font-weight:700;color:#f4e4b8;border-top:1px solid #3b4247;border-bottom:none;margin-top:.15em;padding-top:.3em}
.ec-pos{color:#7ec98a;font-weight:700}
.ec-neg{color:#e58a7c;font-weight:700}
.ec-zero{color:#8a7a4a}
/* head-count rows (Subjects) */
.ec-cnt{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:calc(var(--u)*13.5);color:#e8d9a8;padding:.16em 0}
.ec-cnt .cv{font-weight:700;font-variant-numeric:tabular-nums}
/* kingdom loyalty bar chart — one column per tier, height = region count */
.ec-chart{display:flex;align-items:flex-end;justify-content:space-around;gap:.4em;height:calc(var(--u)*150);min-height:110px;padding:.3em .2em 0;border-bottom:1px solid #3b4247}
.ec-barcol{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.ec-barn{font-size:calc(var(--u)*13);font-weight:700;color:#f4e4b8;margin-bottom:.18em}
.ec-bar{width:72%;border-radius:3px 3px 0 0;min-height:2px;cursor:pointer}
.ec-bar:hover{filter:brightness(1.25)}
.ec-barl{display:flex;justify-content:space-around;gap:.4em;margin-top:.25em}
.ec-barl span{flex:1 1 0;text-align:center;font-size:calc(var(--u)*12);color:#8a7a4a;min-width:0}
/* tier pill (canonical rating palette) */
.ec-pill{display:inline-block;min-width:calc(var(--u)*66);text-align:center;padding:2px 7px;border-radius:5px;font-size:calc(var(--u)*12.5);font-weight:700;letter-spacing:.4px}
/* big single rating readout (treasury) — the tier word IS the value */
.ec-tbig{text-align:center;font-size:calc(var(--u)*34);font-weight:800;line-height:1.1;letter-spacing:.5px;margin:.2em 0 .05em}
.ec-tgold{text-align:center;font-size:calc(var(--u)*17);font-weight:700;color:#d8c48a;margin:0 0 .2em;font-variant-numeric:tabular-nums}
.tax-fc{font-size:calc(var(--u)*12.5);color:#c9bfa0;line-height:1.35;margin:.15em 0 .55em;padding:.35em .55em;border-left:2px solid #6b5a2a;background:rgba(0,0,0,.18)}
.tax-fc i{color:#9a9480}
.ec-tcap{text-align:center;font-size:calc(var(--u)*11.5);color:#8a7a4a;letter-spacing:1px;text-transform:uppercase}
/* trade-route rows */
.ec-rt{display:flex;align-items:center;gap:.5em;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.3em .5em;border-radius:4px;background:rgba(255,255,255,.03);margin-bottom:.2em;cursor:pointer}
.ec-rt:hover{background:rgba(202,163,56,.14)}
.ec-rt.sel{background:#2b5467;border:1px solid #4a8ab0}
.ec-rt .rn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-rt .rl{flex:0 0 auto;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:700}
.ec-rt .rw{flex:0 0 auto;color:#c45a3a;font-weight:700}
/* the route list's four columns (Mike 2026-10-29): route | raided | gold a year | level + rating */
.ec-rt .rr{flex:0 0 calc(var(--u)*62);text-align:center;font-size:calc(var(--u)*12.5);color:#8a7a4a}
.ec-rt .rr.now{color:#ff6a50;font-weight:700}
.ec-rt .rr.past{color:#c8a13a}
.ec-rt .rg{flex:0 0 calc(var(--u)*86);text-align:right;font-weight:700;color:#f4e4b8;font-variant-numeric:tabular-nums}
.ec-rt .rg.off{color:#8a7a4a;text-decoration:line-through}
.ec-rt .rv{flex:0 0 auto;display:flex;align-items:center;gap:.4em;justify-content:flex-end;min-width:calc(var(--u)*118)}
.ec-rth{cursor:default;background:none;font-size:calc(var(--u)*11.5);color:#8a7a4a;text-transform:uppercase;letter-spacing:.8px;font-weight:700;border-bottom:1px solid #3b4247;border-radius:0}
.ec-rth:hover{background:none}
.ec-rth span{white-space:nowrap}
.ec-closing{display:inline-block;margin-left:calc(var(--u)*6);padding:0 calc(var(--u)*6);border-radius:calc(var(--u)*3);background:rgba(255,106,80,.16);color:#ff8a70;font-size:calc(var(--u)*11);font-weight:700;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle}
.ec-rth .rg{color:#8a7a4a;font-weight:700}
/* a place won in a full kingdom: the routes the roll can cut */
.ec-pend{border-color:#caa338}
.ec-cand{display:flex;align-items:center;gap:.5em;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.25em .5em;border-radius:4px;background:rgba(255,255,255,.03);margin-bottom:.2em}
.ec-cand .rn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-cand .rl{flex:0 0 auto;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:700}
.ec-candk{color:#8a7a4a;font-size:.9em}
/* suggested trade routes (Mike 2026-10-26) */
.ec-sug{padding:.45em .55em;border-radius:5px;background:rgba(255,255,255,.035);border:1px solid rgba(107,90,42,.35);margin-bottom:.4em}
.ec-sug.off{opacity:.55}
.ec-sugh{display:flex;align-items:baseline;gap:.6em;font-size:calc(var(--u)*14.5);color:#e8d9a8}
.ec-sugh .rn{flex:1 1 auto;min-width:0}
.ec-sugg{flex:0 0 auto;color:#e3c069;font-weight:700;font-size:calc(var(--u)*13.5);white-space:nowrap}
.ec-sugrel{font-size:calc(var(--u)*11.5);padding:0 .4em;border-radius:3px;background:rgba(255,255,255,.08);color:#b6a888;margin-left:.3em}
.ec-sugrel.allied,.ec-sugrel.friendly,.ec-sugrel.tributary{background:rgba(74,154,58,.25);color:#9fd88a}
.ec-sugrel.hostile{background:rgba(180,50,40,.3);color:#ff9a8a}
.ec-sugwhy{font-size:calc(var(--u)*12.5);color:#9fc3a0;margin:.1em 0 .3em}
.ec-sugno{font-size:calc(var(--u)*12.5);color:#ff8f7d;margin-top:.2em}
.ec-sugtog{cursor:pointer;font-size:calc(var(--u)*12.5);padding:.1em .6em;border-radius:10px;border:1px solid #6b5a2a;color:#8a7a4a;font-weight:700}
.ec-sugtog.on{background:#2b5467;border-color:#4a8ab0;color:#d8ecf6}
.ec-sugbtn{font-size:calc(var(--u)*13)!important;padding:.15em .8em!important;width:auto!important;flex:0 0 auto!important;min-width:0!important}
.ec-sugact{display:flex;justify-content:flex-end;margin-top:.15em}
/* roster / seat rows (monarch + region rulers) */
.ec-seat{display:flex;align-items:center;gap:.5em;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.28em .5em;border-radius:4px;background:rgba(255,255,255,.03);margin-bottom:.2em}
.ec-seat .sn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-seat .ss{flex:0 0 auto;font-size:calc(var(--u)*12.5);color:#8a7a4a;white-space:nowrap}
.ec-ruling{color:#7ec98a;font-weight:700}
.ec-notruling{color:#8a7a4a;font-weight:700}
.ec-empty{color:#8a7a4a;font-style:italic;font-size:calc(var(--u)*13.5);padding:.4em .2em}
.ec-stub{font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic;margin-top:.5em}
/* radial knob (interactive, 4 stacked layers) */
#knob{position:fixed;left:calc(var(--u)*76);bottom:calc(var(--u)*7);width:calc(var(--u)*335);height:calc(var(--u)*335);z-index:50;cursor:pointer;clip-path:circle(50%)}
#knob img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none}
#knob-needle,#knob-sel{transform-origin:50% 50%;transition:transform .28s ease,opacity .2s ease}
#knob-sel{opacity:0} /* selection = the wedge icon recoloured gold->red (no blue fill) */
/* movable + resizable knob popup (9-slice frame keeps its structure) */
#knob-popup{position:fixed;display:none;z-index:55;box-sizing:border-box;
  left:calc(var(--u)*76);bottom:calc(var(--u)*360);
  width:calc(var(--u)*300);height:calc(var(--u)*430);min-width:150px;min-height:190px;
  border:18px solid transparent;border-image:url("../ui/popup_blank.png") 20 fill stretch;
  cursor:move;user-select:none}
.pp-resize{position:absolute;right:-5px;bottom:-5px;width:22px;height:22px;cursor:nwse-resize;
  background:radial-gradient(circle at 68% 68%,rgba(202,163,56,.95),rgba(202,163,56,0) 72%)}
/* Shared popup resize: a grab-dot at every corner (SE = the .pp-resize dot above). */
.ls-rz{position:absolute;width:22px;height:22px;z-index:6}
.ls-nw{left:-5px;top:-5px;cursor:nwse-resize;background:radial-gradient(circle at 32% 32%,rgba(202,163,56,.95),rgba(202,163,56,0) 72%)}
.ls-ne{display:none}
.ls-sw{left:-5px;bottom:-5px;cursor:nesw-resize;background:radial-gradient(circle at 32% 68%,rgba(202,163,56,.95),rgba(202,163,56,0) 72%)}
.ls-se{right:-5px;bottom:-5px;cursor:nwse-resize;background:radial-gradient(circle at 68% 68%,rgba(202,163,56,.95),rgba(202,163,56,0) 72%)}
.pp-close{position:absolute;top:calc(var(--u)*-22);right:calc(var(--u)*-10);width:calc(var(--u)*54);height:auto;cursor:pointer;z-index:1;user-select:none}
/* investigator box (docked right, PSD position) */
/* ===== INSPECTOR — composed from the PSD's own elements ==================
   Each piece is its own export under ui/inspector/, placed at the exact
   percentage it occupies inside the PSD's 507x807 panel box. Text is real
   text so the panel can carry live region data; font and colours come from
   the PSD type layers (TimesNewRomanPSMT). The per-kingdom name colours are
   authored in the PSD, not decoration. */
#inspector{position:fixed;display:none;z-index:46;top:calc(var(--u)*175);right:calc(var(--u)*28);width:calc(var(--u)*507);aspect-ratio:507/807;font-family:'Times New Roman',Times,serif}
#inspector .ins-el{position:absolute;pointer-events:none;user-select:none}
#inspector .ins-bg{width:100%;height:100%;display:block}
#inspector .ins-tx{position:absolute;white-space:nowrap;pointer-events:none;color:#E8DCC8;font-size:calc(var(--u)*17)}
#inspector .ins-hit{position:absolute;pointer-events:auto;cursor:pointer}
#ins-base{left:4.536%;top:3.098%;width:89.941%;height:86.493%}
/* the strip is stretched 7px to the main box's right edge (88.56 -> 89.941).
   As exported it stopped short, so the KINGDOM/REGION bar read as a box
   bolted underneath rather than part of the frame. Artwork untouched. */
#ins-bottombar{left:4.536%;top:90.087%;width:89.941%;height:7.311%}
/* the gold frame. In the PSD this layer is called "Brightness/Contrast 1"
   but it is real artwork, not an adjustment -- it draws the outer border
   and the rule above the KINGDOM/REGION strip. */
#ins-frame{left:0%;top:1.735%;width:97.83%;height:98.265%}
/* section headings. Not in the PSD -- the panel needs them once the content
   below the tabs becomes switchable, so they use the heading's own gold. */
#inspector .ins-head{position:absolute;left:0;width:97.64%;text-align:center;
color:#E3C069;font-size:calc(var(--u)*19);letter-spacing:.14em;
text-transform:uppercase;pointer-events:none;line-height:1}
/* A tab blanks everything; the KINGDOM scope keeps the borders list but drops
   the terrain block, which is a region's property and not a kingdom's. With
   nothing above it the list takes the whole content area rather than leaving
   the panel half empty, and the divider goes with the section it divided. */
#inspector.ins-scope-kingdom .ins-sec-terrain{display:none}
#inspector.ins-scope-kingdom #ins-head-borders{top:37.0%}
#inspector.ins-scope-kingdom #ins-regions{top:40.2%;height:49.071%}
#inspector.ins-scope-kingdom #ins-chev{top:84.6%}
/* New Actions fills the rest of the pane as four selectable quadrants. */
/* the shared picker and notice rows (every .bd-warn box, not only the
   inspector): rows reuse the force-card treatment, selection reuses
   the same light overlay the tabs use */
.bd-warn .pk-list{max-height:calc(var(--u)*300);overflow-y:auto;scrollbar-width:none;margin:.3em 0}
.bd-warn .pk-list::-webkit-scrollbar{display:none}
.bd-warn .pk-row{display:flex;align-items:center;gap:.6em;border:1px solid #3b4247;
border-radius:6px;background:rgba(0,0,0,.28);padding:.4em .55em;margin-bottom:.3em;cursor:pointer}
.bd-warn .pk-row.on{background:rgba(255,255,255,.12);border-color:#6b8fa8}
.bd-warn .pk-row.off{opacity:.45;cursor:default}
.bd-warn .pk-row img{flex:0 0 calc(var(--u)*44);width:calc(var(--u)*44);
height:calc(var(--u)*44);object-fit:cover;object-position:top;border-radius:5px;border:1px solid #6b5a2a}
.bd-warn .pk-n{font-size:calc(var(--u)*16);color:#f4e4b8;font-weight:700;line-height:1.15}
.bd-warn .pk-s{font-size:calc(var(--u)*13);color:#C9A94E;font-style:italic}
.bd-warn .pk-r{margin-left:auto;font-size:calc(var(--u)*14);color:#E8DCC8}
/* a form field is a button now: neutral until set, then the blue PSD button */
#inspector .mil-unset{background:#16202a;border:1px solid #3b4247;border-radius:4px;
color:#c9c2b0;font-size:calc(var(--u)*16);padding:calc(var(--u)*6) 0}
#inspector .mil-chosen{grid-column:1/-1;color:#C9A94E;font-size:calc(var(--u)*13);
font-style:italic;margin:-.15em 0 .2em;line-height:1.25}
/* New Actions opens on Invade / Raid, carrying the inspector's own invade
   button art rather than a second button style. */
#inspector .mil-act{border:9px solid transparent;
border-image:url("../ui/inspector/invade_button_base.png") 14 fill stretch;
background:none;font-family:'Times New Roman',Times,serif;font-weight:700;
font-size:calc(var(--u)*20);color:#E3C069;letter-spacing:.05em;
text-shadow:0 1px 2px #000;cursor:pointer;padding:calc(var(--u)*7) 0}
/* the two entry choices stack, each the full width of the panel */
#inspector #mil-region{flex:0 0 auto;grid-template-columns:1fr}
#inspector .mil-row.one{grid-template-columns:1fr}
/* a field keeps its size when it fills; only the colour changes */
#inspector .mil-ready{background:#4a8ab0;border:1px solid #7fb4d0;border-radius:4px;
color:#08151c;font-weight:700;font-size:calc(var(--u)*16);
padding:calc(var(--u)*6) 0;cursor:pointer}
.bd-warn .nt-row{display:flex;gap:.6em;align-items:baseline;
font-size:calc(var(--u)*16);color:#E8DCC8;padding:.14em 0;
border-bottom:1px solid rgba(59,66,71,.6)}
.bd-warn .nt-row span{flex:0 0 46%;color:#C9A94E}
.bd-warn .nt-row b{color:#f4e4b8;font-weight:700}
/* battle-magic screens, on the canonical overlay */
#inspector .mg-grid{display:grid;grid-template-columns:repeat(3,1fr);
gap:calc(var(--u)*8);margin:.4em 0}
#inspector .mg-c{cursor:pointer;text-align:center}
/* the portraits vary wildly in shape, so the tile fixes the aspect and the
   art is cropped to it -- otherwise the grid goes ragged */
#inspector .mg-c img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top;
display:block;border-radius:4px;border:1px solid #3b4247}
#inspector .mg-wrap .bd-warnbox{max-height:92%;overflow-y:auto;scrollbar-width:none}
#inspector .mg-wrap .bd-warnbox::-webkit-scrollbar{display:none}
#inspector .mg-c.used{opacity:.32;pointer-events:none}
#inspector .mg-nm{color:#E8DCC8;font-size:calc(var(--u)*14);line-height:1.1;margin-top:.2em}
#inspector .mg-ty{color:#C9A94E;font-size:calc(var(--u)*12);font-style:italic}
#inspector .mg-ph{color:#E3C069;font-size:calc(var(--u)*15);letter-spacing:.1em;
text-transform:uppercase;margin:.5em 0 .15em}
/* three columns, one phase each, using the roster's own spell buttons */
#inspector .mg-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
#inspector .mg-col{min-width:0}
#inspector .mg-pick{cursor:pointer;margin-bottom:.3em}
#inspector .mg-pick.on{background:rgba(255,255,255,.12);border-color:#6b8fa8}
#inspector .mg-pick .nm{font-size:calc(var(--u)*13)}
#inspector .mg-pick img{flex:0 0 calc(var(--u)*38);width:calc(var(--u)*38);height:calc(var(--u)*38)}
#inspector .mg-pick.off{opacity:.45;cursor:not-allowed}   /* on its battle cooldown (BE-68) */
#inspector .mg-pick .mg-cd{margin-left:auto;font-size:calc(var(--u)*11);color:#e3c069;white-space:nowrap}
/* Battle Magic opens on the spells (2026-10-22): one row per spell, its phases, who can or does cast it */
#inspector .mg-spells{display:grid;grid-template-columns:repeat(2,1fr);gap:.35em;margin:.4em 0}
#inspector .mg-sp{cursor:pointer}
#inspector .mg-sp img{flex:0 0 calc(var(--u)*38);width:calc(var(--u)*38);height:calc(var(--u)*38)}
#inspector .mg-sp .nm{font-size:calc(var(--u)*13)}
#inspector .mg-sp .nm i{display:block;font-style:normal;color:#9a8850;font-size:calc(var(--u)*11)}
#inspector .mg-sp .mg-cnt{margin-left:auto;font-size:calc(var(--u)*11);color:#C9A94E;text-align:right}
#inspector .mg-c.off{opacity:.45;cursor:not-allowed}
/* The invade / raid form. Rows are label + the approved .ig-sel dropdown; the
   only new rule here is the row itself. */
#inspector .mil-form{flex:1;display:flex;flex-direction:column;
gap:calc(var(--u)*5);overflow-y:auto;scrollbar-width:none;min-height:0}
#inspector .mil-form::-webkit-scrollbar{display:none}
#inspector .mil-frow{display:grid;grid-template-columns:1fr 1fr;align-items:center;
gap:calc(var(--u)*8)}
#inspector .mil-frow>span{color:#E8DCC8;font-size:calc(var(--u)*16)}
#inspector .mil-target{color:#C9A94E;font-size:calc(var(--u)*16);font-style:italic;
text-align:center}
/* Military pane. Nothing new is drawn: the heading is .ins-head laid out in
   flow, the buttons are the PSD's own, and the count is the header's badge
   re-anchored to a button corner. */
#inspector .ins-pane{position:absolute;left:6.32%;top:36.5%;width:85%;height:51.4%;
display:none;flex-direction:column;gap:calc(var(--u)*9)}
#inspector.ins-tab-military #ins-mil{display:flex}
#inspector .ins-pane .ins-head{position:static}
#inspector .mil-row{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*9)}
#inspector .mil-row .lp-btn{position:relative;flex:none}
/* the count rides its button's corner, not the header (lost in ba1cffa5; restored Mike 2026-10-28) */
.hd-count-badge.ins-badge{position:absolute;z-index:auto;transform:none;left:auto;
top:calc(var(--u)*-7);right:calc(var(--u)*-7)}
#inspector .mil-div{width:100%;height:auto;align-self:center}
#inspector.ins-scope-kingdom #mil-region,
#inspector.ins-scope-kingdom #mil-new,
#inspector.ins-scope-kingdom #mil-rdef-h,
#inspector.ins-scope-kingdom #mil-rdef{display:none !important}
/* the kingdom settings are the mirror image: shown only on that scope */
#mil-king,#mil-king-h{display:none}
/* income belongs to a region, not a kingdom -- both the wash and the rating go */
#inspector.ins-scope-kingdom #ins-hdrbg,
#inspector.ins-scope-kingdom #ins-income{display:none}
#inspector.ins-scope-kingdom #mil-king{display:block}
#inspector.ins-scope-kingdom #mil-king-h{display:block}
/* ranking rows carry a handle and a position, and lift while dragged */
/* the four ratios sit across the panel; one click picks, no confirming */
#inspector .mil-row.four{grid-template-columns:repeat(4,1fr)}
#inspector .mil-lbl{color:#E8DCC8;font-size:calc(var(--u)*16);margin-top:.15em}
/* the ratio boxes and the next row were butted together */
#inspector #mil-king .mil-frow{margin-top:calc(var(--u)*10)}
/* the deadline reads as a fact, not a field: gold, on its own line */
#inspector .mil-clock{display:flex;align-items:baseline;justify-content:space-between;
border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.28);
padding:calc(var(--u)*5) calc(var(--u)*10);margin:calc(var(--u)*6) 0}
#inspector .mil-clock span{color:#C9A94E;font-size:calc(var(--u)*15)}
#inspector .mil-clock b{color:#f4e4b8;font-size:calc(var(--u)*18);font-weight:700}
/* a fight's phase, and under it how long is left */
#inspector .pk-r i{display:block;font-style:normal;color:#9db2c2;
font-size:calc(var(--u)*13);text-align:right}
#inspector .mil-stat{text-align:right;color:#f4e4b8;font-size:calc(var(--u)*16)}
#inspector .mil-stat i{font-style:normal;color:#C9A94E}
#inspector .mil-stat.none{color:#9a8a68;font-style:italic}
#inspector #mil-loss button,#inspector .mil-tog{background:#16202a;border:1px solid #3b4247;border-radius:4px;
color:#c9c2b0;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);
padding:calc(var(--u)*6) 0;cursor:pointer}
#inspector #mil-loss button.on{background:#4a8ab0;border-color:#7fb4d0;color:#08151c;font-weight:700}
/* an order the region cannot carry out yet: still readable, plainly not live */
#inspector .mil-tog[disabled]{opacity:.42;cursor:default}
/* a region set against the kingdom's standing order says so */
#inspector .mil-exc{color:#C9A94E;font-size:calc(var(--u)*12);font-style:italic}
#inspector .rk-row{display:flex;align-items:center;gap:.6em;border:1px solid #3b4247;
border-radius:6px;background:rgba(0,0,0,.28);padding:.35em .55em;margin-bottom:.28em;
cursor:grab;font-size:calc(var(--u)*16);color:#f4e4b8}
#inspector .rk-row.drag{opacity:.45;border-color:#6b8fa8}
#inspector .rk-row .n{flex:0 0 calc(var(--u)*22);color:#C9A94E;font-weight:700}
#inspector .rk-row .g{margin-left:auto;color:#6b7a86;letter-spacing:.15em}
#inspector .rk-list{max-height:calc(var(--u)*330);overflow-y:auto;scrollbar-width:none;margin:.3em 0}
#inspector .rk-list::-webkit-scrollbar{display:none}
/* Intrigue pane. The panel is a menu: Dossier and Clandestine Operations are
   buttons, and whichever you open replaces the menu in the same body. Nothing
   new is drawn -- .ins-head for the heading, the military pane's own .mil-frow
   label rows with their .mil-unset / .mil-ready Select buttons, .ig-optile for
   the operation medallions, and the shared picker + notice engines. */
#inspector.ins-tab-intrigue #ins-intr{display:flex}
/* a flex child will not shrink below its content without min-height:0, so the
   overflow rule never engages and a long view runs off the panel */
#inspector .intr-body{display:flex;flex-direction:column;
gap:calc(var(--u)*9);overflow-y:auto;scrollbar-width:none;min-height:0}
/* the form sizes to its rows and keeps the same rhythm, so the button row
   below it is spaced exactly like everything above */
#ins-intr .mil-form{flex:0 0 auto;gap:calc(var(--u)*9)}
#inspector .intr-body::-webkit-scrollbar{display:none}
#inspector .intr-menu{display:flex;flex-direction:column;
gap:calc(var(--u)*11)}
#ins-intr .lp-btn{border-width:calc(var(--u)*9)}
#inspector .intr-menu .lp-btn{width:100%;padding:calc(var(--u)*4) 0}
/* the four operation medallions, two by two in a panel a third the popup's width */
#inspector .intr-ops{display:grid;grid-template-columns:1fr 1fr;
gap:calc(var(--u)*5);margin-bottom:calc(var(--u)*8)}
#inspector .ig-optile img{max-width:calc(var(--u)*86)}
/* the shared bar rows again, with the label column narrowed to a panel that
   is a third the popup's width */
#inspector .ig-barrow{margin:.22em 0}
#inspector .ig-barrow .bl{flex:0 0 calc(var(--u)*148);font-size:calc(var(--u)*13)}
#inspector .ig-optile-chosen img{max-width:calc(var(--u)*92)}
/* a target the panel already knows: the Ready colour, but never a button */
#inspector .mil-lock{background:#4a8ab0;border:1px solid #7fb4d0;border-radius:4px;
color:#08151c;font-weight:700;font-size:calc(var(--u)*16);
padding:calc(var(--u)*6) 0;text-align:center;cursor:default}
/* "not known" reads exactly like an empty military stat: grey and italic */
#inspector .intr-none{color:#9a8a68;font-style:italic;
font-size:calc(var(--u)*15);line-height:1.35;padding:calc(var(--u)*3) 0}
/* where the intel came from -- gold and quiet, like .mil-chosen */
#inspector .intr-src{color:#C9A94E;font-size:calc(var(--u)*13);
font-style:italic;margin-top:.3em;line-height:1.25}
/* Economy pane. Intrigue's shape exactly: a menu of four doors, each opening
   in the same .intr-body. Nothing new is drawn -- the rows, Select buttons,
   option buttons, spell tiles and notes are the military / intrigue ones;
   the rate levers are the Economic popup's own .ec-slider. */
#inspector.ins-tab-economy #ins-econ{display:flex}
/* Diplomacy pane: the same menu, over the Diplomacy dial's own action catalogue */
#inspector.ins-tab-diplomacy #ins-dipl{display:flex}
#ins-econ .mil-form,#ins-dipl .mil-form{flex:0 0 auto;gap:calc(var(--u)*9)}
#ins-econ .lp-btn,#ins-dipl .lp-btn{border-width:calc(var(--u)*9)}
#inspector .lp-btn[disabled],.hdr-popup .lp-btn[disabled]{opacity:.42;cursor:default}
#inspector .dipl-acts .lp-btn{line-height:1.15;padding:calc(var(--u)*4) calc(var(--u)*4)}
#inspector .dipl-why{display:block;font-style:italic;font-weight:400;font-size:calc(var(--u)*12);letter-spacing:0}
/* option buttons: the Loss Ratio buttons' treatment, for any row of choices */
#inspector .econ-opts button{background:#16202a;border:1px solid #3b4247;border-radius:4px;
color:#c9c2b0;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);
padding:calc(var(--u)*6) 0;cursor:pointer;line-height:1.15}
#inspector .econ-opts button.on{background:#4a8ab0;border-color:#7fb4d0;color:#08151c;font-weight:700}
#inspector .econ-opts button[disabled]{opacity:.42;cursor:default}
#inspector .econ-opts button i{display:block;font-style:normal;font-size:calc(var(--u)*12)}
#inspector .mil-row.three{grid-template-columns:repeat(3,1fr)}
/* a lever row: label left, the popup's slider right */
#inspector .econ-lever{display:grid;grid-template-columns:34% 1fr;align-items:center;gap:calc(var(--u)*8)}
#inspector .econ-lever>span{color:#E8DCC8;font-size:calc(var(--u)*16)}
#inspector .econ-lever .ec-slider{margin:0}
#inspector .econ-lever .ec-slider .sv{flex:0 0 calc(var(--u)*44);font-size:calc(var(--u)*15)}
/* where a rate stands now, under its name: quiet gold, like .mil-chosen */
#inspector .econ-now{display:block;font-style:italic;color:#C9A94E;font-size:calc(var(--u)*12);line-height:1.1}
#inspector .mil-row.three .lp-btn{line-height:1.1;padding:calc(var(--u)*4) calc(var(--u)*3)}
/* requirement checklist: met in the ruling green, unmet in the battle red */
#inspector .econ-ok{color:#7ec98a;font-weight:700}
#inspector .econ-no{color:#cc4444;font-weight:700}
/* the five spells in one row, so the pane never scrolls to reach them */
#ins-econ .mg-grid{margin:0;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*6)}
#ins-econ .mg-nm{font-size:calc(var(--u)*13)}
#ins-head-terrain{top:37.0%}
#ins-head-borders{top:68.7%}
/* the default view: no tab selected, REGION scope. A tab or the KINGDOM scope
   empties the content area, which is where each pane will be designed. */
#inspector.ins-empty .ins-sec{display:none}
#ins-tabsel{display:none}
#inspector.ins-tabbed #ins-tabsel{display:block}
/* pulled left so its gap from the frame rail matches the rating's gap on
   the right -- the emblem's authored position left it far off centre */
#ins-crest{left:7.25%;top:6.568%;width:11.834%;height:10.037%}
/* The knob's own ring frames the pie -- far better than a plain circle. Its
   dark interior runs to 0.794 of the radius, so the slices are drawn to just
   inside that and the ring's baked wedge lines are covered. */
#ins-crest img,#ins-crest svg{position:absolute;inset:0;width:100%;height:100%;display:block}
#ins-crest img{object-fit:contain}
/* the income rating sits under the kingdom, inside the space the title block
   already had -- nothing above the divider grows */
/* The header band carries the income rating as a wash -- a tint, not a fill,
   so the cream title still reads over it. It stops at the divider. */
#ins-hdrbg{left:4.536%;top:3.098%;width:89.941%;height:15.614%;
border-radius:7px 7px 0 0;opacity:.3}
/* The rating itself sits top-right, below the close cross (which owns
   y 0-7.19%) so the two never touch. */
/* Label over value, because INCOME EXCEPTIONAL will not fit on one line in
   the corner and the longest rating must read in full. */
#inspector #ins-income{left:63%;width:27%;text-align:right;top:8.6%;
text-transform:uppercase;line-height:1.15;color:#f4e4b8;white-space:nowrap}
/* sized so EXCEPTIONAL, the longest rating, still reads in full */
#inspector #ins-income b{display:block;font-weight:700;
font-size:calc(var(--u)*15);letter-spacing:.02em}
#ins-close{left:88.955%;top:0.0%;width:11.045%;height:7.187%}
#ins-close b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#E3C069;font-size:calc(var(--u)*30);transform:rotate(45deg);line-height:1;font-weight:400}
/* The region name is the section headings' style one step up: same gold,
   same tracking, centred, just bigger. The kingdom sits under it a size
   down and italic. */
/* a name that got cut off can be clicked to see it in full; the shared
   map popup does the showing, lifted above the panel for the occasion */
#inspector .ins-tx.ins-clip{pointer-events:auto;cursor:pointer}
#pop.pop-top{z-index:60}
#inspector #ins-title{left:26.947%;width:43.746%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:8.2%;color:#E3C069;font-size:calc(var(--u)*24);letter-spacing:.14em;text-transform:uppercase;line-height:1}
#inspector #ins-sub{left:26.947%;width:43.746%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;top:13.0%;color:#C9A94E;font-size:calc(var(--u)*17);font-style:italic;letter-spacing:.08em;text-transform:uppercase;line-height:1}
/* On the KINGDOM scope the region drops out and the kingdom takes the
   title slot, upright and full size -- the region is not what is being
   looked at any more. */
#inspector.ins-scope-kingdom #ins-title{display:none}
/* the pie in the corner is the region's towns -- it says so underneath */
#inspector #ins-crestlbl{left:7.25%;width:11.834%;text-align:center;white-space:nowrap;top:16.0%;color:#C9A94E;font-size:calc(var(--u)*11);letter-spacing:.12em;text-transform:uppercase;line-height:1}
/* alone at full size the kingdom name would run into the crest, so on this
   scope it centres in the space beside the emblem rather than across the
   whole panel -- crest and name then read as one lockup. */
#inspector.ins-scope-kingdom #ins-sub{top:10.4%;font-size:calc(var(--u)*24);font-style:normal;letter-spacing:.14em;color:#E3C069}
#ins-div-top{left:11.834%;top:17.472%;width:74.556%;height:2.85%}
#ins-div-mid{left:11.44%;top:32.962%;width:74.556%;height:2.85%}
#ins-div-src{left:11.834%;top:65.4%;width:74.556%;height:2.85%}
#ins-tabsel{left:7.495%;top:18.711%;width:21.499%;height:15.737%;background:rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.26);border-right:1px solid rgba(255,255,255,.26);transition:left .16s}
#inspector .ins-tablbl{position:absolute;text-align:center;pointer-events:none;color:#E8DCC8;font-size:calc(var(--u)*17);line-height:1}
#inspector .ins-tabicon{position:absolute;left:10%;top:9%;width:80%;height:80%}
#ins-tab-military{left:10.848%;top:20.818%;width:14.793%;height:9.542%}
#ins-tablbl-military{left:7.848%;top:31.722%;width:20.793%}
#ins-tab-intrigue{left:31.361%;top:20.818%;width:14.793%;height:9.542%}
#ins-tablbl-intrigue{left:28.361%;top:31.722%;width:20.793%}
#ins-tab-economy{left:51.874%;top:20.818%;width:14.793%;height:9.542%}
#ins-tablbl-economy{left:48.874%;top:31.722%;width:20.793%}
#ins-tab-diplomacy{left:72.387%;top:20.818%;width:14.793%;height:9.542%}
#ins-tablbl-diplomacy{left:69.387%;top:31.722%;width:20.793%}
#ins-invade{left:14.004%;top:36.555%;width:70.217%;height:7.807%}
#ins-invade-icon{left:32.022%;top:25.4%;width:8.989%;height:52.376%;position:absolute}
#ins-invade-lbl{left:0;width:100%;text-align:center;top:38.094%;color:#E3C069;font-size:calc(var(--u)*23);letter-spacing:.06em;line-height:1}
#inspector .ins-tlbl{position:absolute;color:#E8DCC8;font-size:calc(var(--u)*17);left:18.738%;line-height:1}
/* the track starts further right than the PSD had it: SHALLOW WATERS needs
   the room, and a shorter bar keeps every label at one size. Right edge is
   unchanged, so the bars still line up with the panel. */
#inspector .ins-ttrack{position:absolute;left:52.0%;width:34.193%;height:3.346%}
#inspector .ins-tfill{position:absolute;left:52.394%;height:2.85%;background:linear-gradient(180deg,#8d660f 0%,#d19717 22%,#d19717 62%,#77560d 100%);border-radius:calc(var(--u)*11);transition:width .25s}
#ins-ticon-0{position:absolute;left:8.284%;top:40.2%;width:6.903%;height:3.9%;object-fit:contain;object-position:center}
#ins-tlbl-0{top:41.439%}
#ins-ttrack-0{top:40.571%}
#ins-tfill-0{top:40.819%;width:0}
#ins-ticon-1{position:absolute;left:8.284%;top:44.95%;width:6.903%;height:3.9%;object-fit:contain;object-position:center}
#ins-tlbl-1{top:46.189%}
#ins-ttrack-1{top:45.321%}
#ins-tfill-1{top:45.569%;width:0}
#ins-ticon-2{position:absolute;left:8.284%;top:49.7%;width:6.903%;height:3.9%;object-fit:contain;object-position:center}
#ins-tlbl-2{top:50.939%}
#ins-ttrack-2{top:50.071%}
#ins-tfill-2{top:50.319%;width:0}
#ins-ticon-3{position:absolute;left:8.284%;top:54.45%;width:6.903%;height:3.9%;object-fit:contain;object-position:center}
#ins-tlbl-3{top:55.689%}
#ins-ttrack-3{top:54.821%}
#ins-tfill-3{top:55.069%;width:0}
#ins-ticon-4{position:absolute;left:8.284%;top:59.2%;width:6.903%;height:3.9%;object-fit:contain;object-position:center}
#ins-tlbl-4{top:60.439%}
#ins-ttrack-4{top:59.571%}
#ins-tfill-4{top:59.819%;width:0}
#ins-regions{position:absolute;left:0;top:71.9%;width:97.64%;height:17.844%;overflow-y:auto;overflow-x:hidden;pointer-events:auto;scrollbar-width:none}
#ins-regions::-webkit-scrollbar{display:none}
#ins-regions .row{position:relative;height:calc(var(--u)*36);display:block}
#ins-regions .rn{position:absolute;left:18.738%;top:50%;transform:translateY(-50%);color:#E8DCC8;font-size:calc(var(--u)*17);white-space:nowrap}
#ins-regions .rk{position:absolute;left:45.759%;top:50%;transform:translateY(-50%);font-size:calc(var(--u)*17);white-space:nowrap}
#ins-chev{left:45.168%;top:85.0%;width:6.903%;height:4.585%}
#ins-chev-i{position:absolute;left:31.421%;top:40.545%;width:37.143%;height:32.432%}
#ins-togsel{left:5.128%;top:90.211%;width:43.59%;height:6.691%;background:rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.26);border-right:1px solid rgba(255,255,255,.26);transition:left .16s}
#ins-togdiv{left:48.718%;top:90.582%;width:0.394%;height:6.691%}
/* The whole half takes the click. The lettering alone was the hit target,
   so a press on the button did nothing unless it landed on a glyph. */
#inspector #ins-tog-kingdom{left:4.536%;top:90.087%;width:44.182%;height:7.311%;display:flex;align-items:center;justify-content:center;color:#E3C069;font-size:calc(var(--u)*23);letter-spacing:.04em;pointer-events:auto;cursor:pointer;line-height:1}
#inspector #ins-tog-region{left:49.112%;top:90.087%;width:45.365%;height:7.311%;display:flex;align-items:center;justify-content:center;color:#E3C069;font-size:calc(var(--u)*23);letter-spacing:.04em;pointer-events:auto;cursor:pointer;line-height:1}
/* header data overlay: live values in the PSD font (Times New Roman) */
#hb-data{position:fixed;top:0;left:0;width:100vw;height:calc(var(--u)*199);z-index:61;pointer-events:none;font-family:'Times New Roman',Times,serif;line-height:1;white-space:nowrap;font-weight:700}
#hb-data .f{position:absolute;transform:translate(-50%,-50%);text-align:center}
/* the player's own portrait, over the painted one, inside its ring. Hidden
   until it actually loads, so a missing image shows the painted portrait. */
#hd-avatar{position:fixed;left:calc(var(--u)*36);top:calc(var(--u)*22);width:calc(var(--u)*128);height:calc(var(--u)*128);
  border-radius:50%;object-fit:cover;z-index:62;pointer-events:none;opacity:0;transition:opacity .2s}
#hd-avatar.ok{opacity:1}
/* rank progress: the painted bar is full gold; the unfilled part is dimmed */
#hd-xpbar{position:fixed;left:calc(var(--u)*266);top:calc(var(--u)*68);width:calc(var(--u)*132);height:calc(var(--u)*16);
  z-index:62;pointer-events:none;border-radius:calc(var(--u)*8);overflow:hidden}
#hd-xpmask{position:absolute;right:0;top:0;bottom:0;width:100%;background:rgba(4,12,18,.82);transition:width .4s}
/* signed out: one way in, where the rank line would be */
/* rank detail: hover the shield or the bar (the header's own popup look) */
#hd-rankhot{position:fixed;left:calc(var(--u)*212);top:calc(var(--u)*50);width:calc(var(--u)*196);height:calc(var(--u)*50);
  z-index:63;pointer-events:auto;cursor:default}
#hd-rankpop{display:none;position:absolute;left:0;top:calc(100% + var(--u)*8);min-width:calc(var(--u)*230);
  background:rgba(12,14,22,.96);border:1px solid #caa338;border-radius:8px;padding:calc(var(--u)*10) calc(var(--u)*14);
  color:#e8eefc;font:calc(var(--u)*15)/1.45 'Times New Roman',serif;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.5)}
#hd-rankpop b{color:#f4e4b8;font-size:calc(var(--u)*17)}
#hd-rankpop .rp-bar{height:calc(var(--u)*7);border-radius:4px;background:#1f2d3a;margin:calc(var(--u)*6) 0;overflow:hidden}
#hd-rankpop .rp-bar i{display:block;height:100%;background:linear-gradient(90deg,#8d660f,#d19717)}
#hd-rankhot:hover #hd-rankpop:not(:empty){display:block}
/* God Mode (site owners): the switch under the portrait, the view-only
   banner under the header, and the game / kingdom picker rows */
#god-toggle{display:none;position:fixed;left:calc(var(--u)*22);top:calc(var(--u)*176);z-index:63;
  padding:calc(var(--u)*5) calc(var(--u)*14);border:1px solid #8d660f;border-radius:calc(var(--u)*14);
  background:#16202a;color:#C9A94E;font:700 calc(var(--u)*14) 'Times New Roman',serif;letter-spacing:.06em;cursor:pointer}
#god-toggle.on{border-color:#de2b29;color:#fff;background:linear-gradient(180deg,#6b1d1b,#3a1010);box-shadow:0 0 8px rgba(222,43,41,.7)}
#god-banner{display:none;position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--u)*150);z-index:63;
  align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*6) calc(var(--u)*10) calc(var(--u)*6) calc(var(--u)*16);
  border:1px solid #de2b29;border-radius:calc(var(--u)*8);background:linear-gradient(180deg,rgba(80,18,16,.95),rgba(40,10,10,.95));
  color:#f4e4b8;font:calc(var(--u)*15) 'Times New Roman',serif;box-shadow:0 4px 16px rgba(0,0,0,.6);white-space:nowrap}
#god-banner b{color:#ff8a7a;letter-spacing:.12em}
#god-banner i{color:#E3C069;font-style:italic}
#god-banner button{border:1px solid #8d660f;border-radius:calc(var(--u)*5);background:#16202a;color:#E3C069;
  font:700 calc(var(--u)*13) 'Times New Roman',serif;padding:calc(var(--u)*3) calc(var(--u)*10);cursor:pointer}
#god-list .god-row{display:flex;justify-content:space-between;gap:1em;padding:.5em .6em;border-bottom:1px solid #24323f;
  cursor:pointer;font-size:calc(var(--u)*17);color:#f4e4b8}
#god-list .god-row:hover{background:rgba(202,163,56,.14)}
#god-list .god-row i{color:#8a7a4a;font-size:.85em}
#god-list .god-none{padding:.8em;color:#8a7a4a;font-style:italic}
#god-held{display:none;position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--u)*150);z-index:63;
  align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*6) calc(var(--u)*16);
  border:1px solid #de2b29;border-radius:calc(var(--u)*8);background:linear-gradient(180deg,rgba(80,18,16,.95),rgba(40,10,10,.95));
  color:#f4e4b8;font:calc(var(--u)*15) 'Times New Roman',serif;box-shadow:0 4px 16px rgba(0,0,0,.6);white-space:nowrap}
#god-held b{color:#ff8a7a;letter-spacing:.12em}
html.m #god-held{top:calc(var(--mh) + 6px);left:8px;right:8px;transform:none;white-space:normal;font-size:13px}
html.m #god-toggle{display:none!important}
html.m #god-banner{top:calc(var(--mh) + 6px);left:8px;right:8px;transform:none;flex-wrap:wrap;white-space:normal;font-size:13px;gap:6px}
html.m #god-banner button{font-size:13px;padding:3px 9px}
html.m #hd-avatar,html.m #hd-xpbar,html.m #hd-rankhot{display:none!important}
/* ===== HEADER FLYOUTS: Luck + Auto — dropdown (PSD stacks format) + info popup =====
   Shared: .hdr-menu panel, .ls-box popup, .lp-* + the PSD button art. */
#luck-hotspot{position:fixed;z-index:62;cursor:pointer;left:calc(var(--u)*1483);top:calc(var(--u)*18);width:calc(var(--u)*62);height:calc(var(--u)*92)}
#auto-hotspot{position:fixed;z-index:62;cursor:pointer;left:calc(var(--u)*1562);top:calc(var(--u)*18);width:calc(var(--u)*78);height:calc(var(--u)*92)}
/* AUTO header label (replaces the baked STACKS label) */
#hd-auto-label{position:fixed;z-index:61;pointer-events:none;left:calc(var(--u)*1601);top:calc(var(--u)*101);transform:translate(-50%,-50%);font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);font-weight:700;letter-spacing:1px;color:#e3c069;white-space:nowrap}
/* dropdown = PSD "stacks" flyout panel + icon/label rows (no heading — redundant) */
/* z 69: above the popup band (64-67, where an open popup or the inspector is raised) and the phone More menu (68) — a dropdown always opens on top (Mike 2026-10-28). */
.hdr-menu{position:fixed;z-index:69;display:none;box-sizing:border-box;width:calc(var(--u)*317);background:url("../ui/dropdown_base.png") center/100% 100% no-repeat;font-family:'Times New Roman',Times,serif;padding:calc(var(--u)*16) calc(var(--u)*22) calc(var(--u)*20)}
.hdr-menu .lm-item{display:flex;align-items:center;gap:.6em;padding:calc(var(--u)*6) calc(var(--u)*4);font-size:calc(var(--u)*19);color:#e3c069;cursor:pointer;border-top:1px solid #3b4247;white-space:nowrap}
.hdr-menu .lm-item:first-child{border-top:none}
.hdr-menu .lm-item:hover{color:#fff}
.hdr-menu .lm-ico{width:1.35em;text-align:center;color:#e8d9a8;font-size:calc(var(--u)*20)}
#luck-menu{left:calc(var(--u)*1356);top:calc(var(--u)*108)}
#auto-menu{left:calc(var(--u)*1474);top:calc(var(--u)*108)}
/* info popup = ornate box, movable + resizable, keeps its red X */
.ls-box{box-sizing:border-box;border:18px solid transparent;border-image:url("../ui/popup_blank.png") 20 fill stretch;font-family:'Times New Roman',Times,serif;color:#f4e4b8}
.hdr-popup{position:fixed;display:none;z-index:64;left:calc(var(--u)*720);top:calc(var(--u)*280);width:calc(var(--u)*540);height:calc(var(--u)*430);min-width:230px;min-height:200px;user-select:none}
.hdr-popup .lp-close{position:absolute;top:calc(var(--u)*-22);right:calc(var(--u)*-10);width:calc(var(--u)*54);height:auto;cursor:pointer;z-index:2}
.hdr-popup .lp-body{position:absolute;inset:0;overflow:auto;padding:4% 7%}
.hdr-popup .lp-title{display:flex;align-items:center;gap:.4em;font-size:calc(var(--u)*30);font-weight:700;color:#f4e4b8;margin-bottom:.35em;cursor:move}
.hdr-popup .lp-desc{font-size:calc(var(--u)*20);color:#e8d9a8;margin-bottom:.5em;line-height:1.35}
.hdr-popup .lp-hr{height:1px;background:linear-gradient(90deg,transparent,rgba(202,163,56,.7),transparent);margin:.5em 0}
.hdr-popup .lp-row{display:flex;justify-content:space-between;gap:1em;font-size:calc(var(--u)*19);padding:.28em 0}
/* Troop Build (Mike 2026-10-22): a check box per troop type, and Round robin / Fill first */
.hdr-popup .at-types{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25em .9em}
.hdr-popup .at-type{display:inline-flex;align-items:center;gap:.3em;cursor:pointer;white-space:nowrap}
.hdr-popup .at-type input{accent-color:#c9a24a;width:1em;height:1em;margin:0;cursor:pointer}
.hdr-popup .at-toggle{display:grid;grid-template-columns:1fr 1fr;gap:.4em;margin:.5em 0 .3em}
.hdr-popup .at-toggle button{font-family:inherit;font-size:calc(var(--u)*18);padding:.3em;border-radius:4px;cursor:pointer;
  border:1px solid #4a4433;background:rgba(0,0,0,.35);color:#b79a56}
.hdr-popup .at-toggle button.on{border-color:#c9a24a;background:rgba(201,162,74,.2);color:#f3e6c4;font-weight:700}
.hdr-popup .lp-row .k{color:#b79a56}
/* Reusable game notices — see UI_FORMATS.md. .ui-warning = action-result WARNING (amber);
   .ui-error = blocking ERROR (maroon, matches the Cancel button). Full callouts, never one-liners. */
.ui-warning,.ui-error{display:flex;gap:.55em;align-items:flex-start;border-radius:6px;padding:.55em .8em;margin:.5em 0;line-height:1.34;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17)}
.ui-warning{color:#f0c877;background:rgba(224,52,47,.13);border:1px solid rgba(240,180,80,.45)}
.ui-warning .ui-ico{color:#f0b040}
.ui-error{color:#f6d3ce;background:#4b0708;border:1px solid #b3312a}
.ui-error .ui-ico{color:#ff7a6f}
.ui-warning .ui-ico,.ui-error .ui-ico{flex:0 0 auto;font-size:1.1em;line-height:1.1}
.hdr-popup .lp-stub{margin-top:.6em;font-size:calc(var(--u)*15);color:#9a8850;font-style:italic}
.lp-btns{display:flex;gap:5%;margin:.9em 0 .3em}
.lp-btn{flex:1;padding:calc(var(--u)*8) 0;cursor:pointer;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*20);font-weight:700;letter-spacing:.5px;color:#f4e4b8;text-shadow:0 1px 2px #000;background:none;border:9px solid transparent}
.lp-buy{border-image:url("../ui/btn_purchase.png") 12 fill stretch}
.lp-cancel{border-image:url("../ui/btn_cancel.png") 12 fill stretch}
.lp-btn:hover{filter:brightness(1.12)}
/* ===== INBOX: dropdown (unread red badges) + 3-section mail popup ===== */
#inbox-hotspot{position:fixed;z-index:62;cursor:pointer;left:calc(var(--u)*1659);top:calc(var(--u)*18);width:calc(var(--u)*60);height:calc(var(--u)*92)}
#inbox-menu{left:calc(var(--u)*1521);top:calc(var(--u)*108);width:calc(var(--u)*330)}
.hdr-menu .lm-badge{margin-left:auto;min-width:1.5em;height:1.5em;padding:0 .4em;display:inline-flex;align-items:center;justify-content:center;background:#de2b29;color:#fff;border-radius:1em;font-size:calc(var(--u)*13);font-weight:700;box-shadow:0 0 5px rgba(224,52,47,.75)}
/* mail popup — wider; reuses .ls-box frame + movable/resizable/persist */
#inbox-popup{width:calc(var(--u)*980);height:calc(var(--u)*560);min-width:540px;min-height:360px}
#inbox-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3.2% 3.6%;overflow:hidden}
.ib-toolbar{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.6em;cursor:move}
.ib-toolbar .ib-title{font-size:calc(var(--u)*22);font-weight:700;color:#f4e4b8;margin-left:.3em}
.ib-tool{display:flex;align-items:center;gap:.35em;padding:.3em .65em;border:1px solid #3b4247;border-radius:5px;background:rgba(255,255,255,.04);color:#e3c069;cursor:pointer;font-size:calc(var(--u)*15);white-space:nowrap;font-family:'Times New Roman',Times,serif}
.ib-tool:hover{background:rgba(202,163,56,.16);color:#fff}
.ib-tool.off{opacity:.4;cursor:default}
.ib-cols{display:flex;gap:.6em;flex:1;min-height:0}
.ib-col{background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;overflow-y:auto}
/* the folders and the list stop growing at a set width, so a widened box gives
   the room to the report itself (Mike 2026-10-28: battle reports need it) */
.ib-folders{flex:0 1 25%;max-width:calc(var(--u)*260);min-width:0;padding:.4em}
.ib-list{flex:0 1 33%;max-width:calc(var(--u)*400);min-width:0}
.ib-view{flex:1 1 auto;min-width:0;padding:1em 1.1em;display:flex;flex-direction:column}
.ib-folder{display:flex;align-items:center;gap:.4em;padding:.42em .55em;font-size:calc(var(--u)*16);color:#e3c069;cursor:pointer;border-radius:4px}
.ib-folder:hover,.ib-folder.sel{background:rgba(202,163,56,.16);color:#fff}
.ib-folder .ib-fcount{margin-left:auto;color:#de2b29;font-weight:700;font-size:calc(var(--u)*13)}
.ib-msg{padding:.5em .6em;border-bottom:1px solid #24323f;cursor:pointer}
.ib-msg:hover{background:rgba(202,163,56,.1)}
.ib-msg.sel{background:rgba(202,163,56,.18)}
.ib-msg-r1{display:flex;align-items:center;gap:.45em}
.ib-dot{width:.55em;height:.55em;border-radius:50%;background:#de2b29;flex:0 0 auto;box-shadow:0 0 4px rgba(224,52,47,.7)}
.ib-msg-subj{flex:1;font-size:calc(var(--u)*15);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b79a56}
.ib-msg.unread .ib-msg-subj{color:#f4e4b8;font-weight:700}
.ib-msg-r2{display:flex;justify-content:space-between;font-size:calc(var(--u)*12);color:#8a7a4a;margin-top:.22em}
.ib-view-subj{font-size:calc(var(--u)*22);font-weight:700;color:#f4e4b8;margin-bottom:.2em}
.ib-view-meta{display:flex;justify-content:space-between;font-size:calc(var(--u)*14);color:#b79a56;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.7em}
.ib-view-text{flex:1;overflow-y:auto;font-size:calc(var(--u)*16);color:#e8d9a8;line-height:1.55}
.ib-view-actions{display:flex;gap:6%;margin-top:.9em}
.ib-empty{margin:auto;color:#8a7a4a;font-style:italic;font-size:calc(var(--u)*16)}
/* W10 custom folders: the name box atop the folders, and the Move list */
#inbox-popup .ib-toolbar{flex-wrap:wrap}
.ib-fname{display:flex;flex-direction:column;gap:.35em;padding:.45em;margin-bottom:.4em;border:1px solid #3b4247;border-radius:5px;background:rgba(255,255,255,.03)}
.ib-fname-h{font-size:calc(var(--u)*14);color:#b79a56}
.ib-fname input{width:100%;box-sizing:border-box;padding:.35em .45em;background:#0a121a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font:inherit;font-size:calc(var(--u)*16)}
.ib-fname-b{display:flex;gap:.4em}
.ib-move{flex:1 1 auto;overflow-y:auto;margin:.4em 0}
.ib-move-h{margin:.6em 0 .15em;font-size:calc(var(--u)*14);font-weight:700;color:#b79a56;text-transform:uppercase;letter-spacing:.04em}
/* ===== CHAT (W10): Private Chat + Game Chat popup -- the Inbox frame and columns ===== */
#chat-popup{width:calc(var(--u)*860);height:calc(var(--u)*560);min-width:480px;min-height:360px}
#chat-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3.2% 3.6%;overflow:hidden}
#chat-popup .ib-folders{flex:0 0 32%}
#chat-popup.ch-game .ib-folders{display:none}
.ch-thread{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5em;padding-right:.3em}
.ch-msg{max-width:82%;padding:.45em .7em;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid #2a3a4a;color:#e8d9a8;font-size:calc(var(--u)*15);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.ch-msg.ch-me{align-self:flex-end;background:rgba(202,163,56,.14);border-color:#5a4a26}
.ch-who{display:block;font-size:calc(var(--u)*12);color:#b79a56;margin-bottom:.15em}
.ch-new{align-self:stretch;text-align:center;font-size:calc(var(--u)*12);color:#de2b29;border-top:1px solid #5a2a28;padding-top:.2em}
.ch-compose{display:flex;gap:.5em;margin-top:.6em;align-items:flex-end}
.ch-compose textarea{flex:1;min-height:3.2em;max-height:8em;resize:vertical;background:#0b1622;border:1px solid #3b4247;border-radius:5px;color:#f4e4b8;font:inherit;font-size:calc(var(--u)*15);padding:.4em .55em}
.ch-count{font-size:calc(var(--u)*12);color:#8a7a4a;margin-top:.2em;text-align:right}
.ch-count.over{color:#de2b29}
/* ===== Header count badges (Inbox / Alerts) — real count logic, stub data ===== */
.hd-count-badge{position:fixed;z-index:61;pointer-events:none;display:none;align-items:center;justify-content:center;background:#de2b29;color:#fff;font-family:'Times New Roman',Times,serif;font-weight:700;border-radius:1em;box-shadow:0 0 5px rgba(224,52,47,.85);border:1.5px solid #2a0d0c;transform:translate(-50%,-50%);min-width:calc(var(--u)*20);height:calc(var(--u)*20);padding:0 calc(var(--u)*3);font-size:calc(var(--u)*12);line-height:1;top:calc(var(--u)*30)}
#hd-inbox-badge{left:calc(var(--u)*1706)}
#hd-alerts-badge{left:calc(var(--u)*1798)}
/* ===== ALERTS: dropdown (3 areas + Select box) + checkbox popup ===== */
#alerts-hotspot{position:fixed;z-index:62;cursor:pointer;left:calc(var(--u)*1744);top:calc(var(--u)*18);width:calc(var(--u)*68);height:calc(var(--u)*92)}
#alerts-menu{left:calc(var(--u)*1610);top:calc(var(--u)*108);width:calc(var(--u)*300)}
#alerts-menu .al-count{margin-left:auto;color:#e3c069;font-weight:700;font-size:calc(var(--u)*14)}
#alerts-menu .al-select{margin-top:calc(var(--u)*10);text-align:center;padding:.55em;background:#2b5467;border:1px solid #4a8ab0;border-radius:5px;color:#f4e4b8;cursor:pointer;font-size:calc(var(--u)*17);font-weight:700;box-shadow:inset 0 0 8px rgba(74,138,176,.35)}
#alerts-menu .al-select:hover{background:#356986;color:#fff}
#alerts-popup{width:calc(var(--u)*560);height:calc(var(--u)*770);min-width:300px;min-height:320px}
#alerts-popup .lp-body{position:absolute;inset:0;overflow:auto;padding:4% 6%}
#alerts-popup .lp-title{cursor:move}
#alerts-msg-popup{width:calc(var(--u)*980);height:calc(var(--u)*560);min-width:540px;min-height:360px}
#alerts-msg-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:3.2% 3.6%;overflow:hidden}
/* ===== MENU: header ☰ dropdown (mirrors the game HeaderMenu) ===== */
#menu-hotspot{position:fixed;z-index:62;cursor:pointer;left:calc(var(--u)*1836);top:calc(var(--u)*18);width:calc(var(--u)*68);height:calc(var(--u)*92)}
/* right-aligned to the page edge (rightmost icon) */
#menu-menu{left:calc(var(--u)*1598);top:calc(var(--u)*108);width:calc(var(--u)*314);background-image:url("../ui/dropdown_base_menu.png")}
#menu-menu .lm-item{justify-content:flex-start}
#menu-menu .mm-state{margin-left:auto;font-size:calc(var(--u)*13);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#8a7a4a}
#menu-menu .lm-item.on .mm-state{color:#8fd08f}
#menu-menu .mm-div{height:1px;background:#3b4247;margin:calc(var(--u)*6) calc(var(--u)*2);border:0}
#menu-menu .lm-item.mm-quit{color:#e2564f;border-top:none}
#menu-menu .lm-item.mm-quit:hover{color:#ff7a6f}
#menu-menu .lm-item.mm-quit .lm-ico{color:#e2564f}
#menu-quit{width:calc(var(--u)*560);height:auto;min-width:320px;min-height:0}
#menu-quit .lp-body{position:static;inset:auto;overflow:visible;padding:6% 7% 5%}
.al-group{margin-bottom:.7em}
.al-group-h{font-size:calc(var(--u)*18);font-weight:700;color:#f4e4b8;border-bottom:1px solid #3b4247;padding-bottom:.2em;margin-bottom:.35em}
.al-check{display:flex;align-items:center;gap:.55em;padding:.22em .1em;font-size:calc(var(--u)*17);color:#e3c069;cursor:pointer}
.al-check:hover{color:#fff}
.al-check input{accent-color:#caa338;width:calc(var(--u)*16);height:calc(var(--u)*16);min-width:14px;min-height:14px;cursor:pointer;flex:0 0 auto}
/* W10 alert preferences: Email / Text columns, the contact line, the save note */
.al-row{display:grid!important;grid-template-columns:1fr calc(var(--u)*64) calc(var(--u)*64);align-items:center;gap:.4em}
.al-row .al-col{display:flex;justify-content:center;font-size:calc(var(--u)*14);font-weight:400;color:#b79a56;min-width:44px}
.al-row input:disabled{opacity:.35;cursor:not-allowed}
.al-contact{display:flex;flex-direction:column;gap:.35em;margin-bottom:.7em}
.al-crow{display:flex;align-items:center;gap:.6em;font-size:calc(var(--u)*16);color:#e3c069}
.al-clabel{flex:0 0 calc(var(--u)*90);min-width:70px;color:#b79a56}
.al-cval{overflow-wrap:anywhere;color:#f4e4b8}
.al-crow input{flex:1 1 auto;min-width:0;padding:.3em .45em;background:#0a121a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font:inherit}
.al-note{margin-top:.6em;font-size:calc(var(--u)*14);color:#8a7a4a;font-style:italic;text-align:center}
.al-note.ok{color:#7ec98a;font-style:normal}
/* ===== DIPLOMACY popup (knob -> Diplomacy) — mirrors the Economic/Intrigue shells ===== */
#dip-popup{width:calc(var(--u)*1180);height:calc(var(--u)*880);min-width:700px;min-height:460px}
#dip-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4% 2.6%;overflow:hidden}
.dp-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.55em;cursor:move;flex:0 0 auto}
.dp-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.dp-mode{margin-left:auto;font-size:calc(var(--u)*24);font-weight:700;color:#e3c069;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.dp-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-bottom:.55em;flex:0 0 auto}
.dp-tab{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*17);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.dp-tab:hover{background:rgba(202,163,56,.16);color:#fff}
.dp-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.dp-panel{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*12) calc(var(--u)*14);font-family:'Times New Roman',Times,serif}
.dp-intro{font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4}
.dp-sec{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*9);background:rgba(0,0,0,.2)}
.dp-sec-h{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:calc(var(--u)*17);color:#e3c069;margin-bottom:.4em;letter-spacing:.5px}
.dp-sec-h .n{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.dp-sub{font-size:calc(var(--u)*13);color:#b6a888;line-height:1.35;margin:-.1em 0 .45em}
.dp-stub{font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic;margin-top:.5em}
.dp-empty{color:#8a7a4a;font-style:italic;font-size:calc(var(--u)*13.5);padding:.4em .2em}
.dp-eyebrow{font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:.55em 0 .35em}
/* top row: the two dashboard boxes are ALWAYS the same height (stretch), then a
   deliberate gap before the full-width Relationship Meter box below them. */
.dp-2col{display:grid;grid-template-columns:1fr 1fr;gap:.6em;align-items:stretch}
.dp-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;align-items:stretch}
.dp-2col>.dp-sec,.dp-3col>.dp-sec{margin-bottom:0}
.dp-gapbox{margin-top:calc(var(--u)*16)}
/* Standing tab: four boxes on one 2x2 grid, all exactly the same size. */
.dp-4grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.6em;align-items:stretch}
.dp-4grid>.dp-sec{margin-bottom:0;display:flex;flex-direction:column;min-width:0}
.dp-grow{flex:1 1 auto;min-height:0}
.dp-field{display:flex;align-items:center;gap:.6em;margin:.35em 0}
.dp-field label{flex:0 0 calc(var(--u)*132);font-size:calc(var(--u)*14);color:#e3c069;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.dp-sel{flex:1 1 auto;min-width:0;padding:.2em .35em;background:#16202a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);cursor:pointer}
.dp-sel:disabled{opacity:.45;cursor:default}
.dp-subtabs{display:grid;gap:.4em;margin-bottom:.5em}
.dp-subtab{text-align:center;padding:.4em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.dp-subtab:hover{background:rgba(202,163,56,.16);color:#fff}
.dp-subtab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8}
/* vertical measurement ladder — the reputation rungs, name beside each level */
.dp-vbar{display:flex;flex-direction:column;gap:calc(var(--u)*3)}
.dp-vrow{display:flex;align-items:center;gap:.5em}
.dp-vn{flex:0 0 calc(var(--u)*30);text-align:right;font-size:calc(var(--u)*12);color:#8a7a4a;font-variant-numeric:tabular-nums}
.dp-vseg{flex:0 0 calc(var(--u)*54);height:calc(var(--u)*14);min-height:9px;border-radius:3px;border:1px solid rgba(0,0,0,.4);opacity:.26}
.dp-vrow.fill .dp-vseg{opacity:1}
.dp-vl{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*13.5);color:#b6a888;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-vrow.on .dp-vl{color:#f4e4b8;font-weight:700}
.dp-vrow.on .dp-vn{color:#e3c069;font-weight:700}
.dp-vrow.on .dp-vseg{box-shadow:0 0 0 1px #4a8ab0,0 0 9px rgba(74,138,176,.6)}
/* horizontal bar chart — NAME first, then a bar sized by the count, so the shape
   alone shows where you stand without reading a single number. */
.dp-hbar{display:flex;flex-direction:column;gap:calc(var(--u)*5)}
.dp-hrow{display:flex;align-items:center;gap:.55em;padding:.2em .3em;border-radius:4px;cursor:pointer}
.dp-hrow:hover{background:rgba(202,163,56,.13)}
.dp-hrow.sel{background:#2b5467;box-shadow:inset 0 0 0 1px #4a8ab0}
.dp-hrow.zero{opacity:.38;cursor:default}
.dp-hname{flex:0 0 calc(var(--u)*92);font-size:calc(var(--u)*13.5);color:#e8d9a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-hrow.sel .dp-hname{color:#f4e4b8;font-weight:700}
.dp-htrack{flex:1 1 auto;min-width:0;height:calc(var(--u)*17);min-height:11px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.dp-hfill{display:block;height:100%;border-radius:3px;min-width:3px}
.dp-hnum{flex:0 0 calc(var(--u)*26);text-align:right;font-size:calc(var(--u)*13);color:#f4e4b8;font-weight:700;font-variant-numeric:tabular-nums}
/* who makes up a bar — revealed when you click it */
.dp-klist{display:flex;flex-wrap:wrap;gap:.3em;margin-top:.15em}
.dp-kchip{font-size:calc(var(--u)*13);color:#e8d9a8;background:rgba(255,255,255,.05);border:1px solid #3b4247;border-radius:4px;padding:.14em .5em;white-space:nowrap}
.dp-vbig{text-align:center;font-size:calc(var(--u)*26);font-weight:800;line-height:1.1;margin:.1em 0 .05em;color:#f4e4b8;letter-spacing:.5px}
.dp-vcap{text-align:center;font-size:calc(var(--u)*11.5);color:#8a7a4a;letter-spacing:1px;text-transform:uppercase;margin-bottom:.5em}
/* reputation box: ladder on the left, a smaller meter on the right */
.dp-repsplit{display:grid;grid-template-columns:1fr 1fr;gap:.6em;align-items:center}
.dp-repmeter{display:flex;flex-direction:column;justify-content:center;min-width:0}
/* relationship half-dial — the PSD knob dial cut in half (ui/dial_half.png) */
.dp-dials{display:grid;grid-template-columns:1fr 1fr;gap:.8em;align-items:start}
.dp-dialbox{display:flex;flex-direction:column;align-items:center;min-width:0}
.dp-dialcap{font-size:calc(var(--u)*13);color:#b6a888;text-align:center;line-height:1.25;margin-bottom:.3em;min-height:2.5em}
.dp-dial{position:relative;width:100%;max-width:calc(var(--u)*330);aspect-ratio:670/336;overflow:hidden}
.dp-dial.sm{max-width:100%}
.dp-dialface{position:absolute;inset:0;width:100%;height:100%;display:block}
.dp-dialsvg{position:absolute;inset:0;width:100%;height:100%}
.dp-needle{position:absolute;left:0;top:0;width:100%;height:auto;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none}
.dp-hub{position:absolute;left:50%;bottom:0;width:11%;aspect-ratio:1;transform:translate(-50%,50%);border-radius:50%;background:radial-gradient(circle at 38% 33%,#efd79c,#b8902f 55%,#6b4d1c);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.6)}
.dp-dialtier{font-size:calc(var(--u)*18);font-weight:700;text-align:center;margin-top:.45em;letter-spacing:.4px}
.dp-dialsub{font-size:calc(var(--u)*11.5);color:#8a7a4a;text-align:center;letter-spacing:1px;text-transform:uppercase}
/* generic list rows (treaties, cease-fires, embassies, prisoners) */
.dp-item{display:flex;align-items:center;gap:.5em;font-size:calc(var(--u)*14);color:#e8d9a8;padding:.3em .5em;border-radius:4px;background:rgba(255,255,255,.03);margin-bottom:.22em}
.dp-item .nm{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-item .mt{flex:0 0 auto;font-size:calc(var(--u)*12.5);color:#8a7a4a;white-space:nowrap}
.dp-pill{display:inline-block;min-width:calc(var(--u)*62);text-align:center;padding:2px 7px;border-radius:5px;font-size:calc(var(--u)*12.5);font-weight:700;letter-spacing:.4px}
.dp-count{text-align:center;font-size:calc(var(--u)*34);font-weight:800;color:#e3c069;line-height:1.05;margin:.05em 0}
/* action tiles — equal-width grid (no diplomacy icon art exists yet) */
.dp-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;align-items:start}
.dp-actcol{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*8);background:rgba(0,0,0,.2);min-width:0}
.dp-actcol-h{text-align:center;font-weight:700;font-size:calc(var(--u)*14.5);color:#e3c069;letter-spacing:1px;text-transform:uppercase;margin-bottom:.45em}
.dp-tile{display:block;width:100%;text-align:center;padding:.5em .35em;margin-bottom:.35em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*14.5);font-weight:700;color:#e8d9a8;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer;line-height:1.2}
.dp-tile:hover{background:rgba(202,163,56,.16);color:#fff}
.dp-tile.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.dp-tile.soon,.dp-tile.gated{opacity:.42;cursor:default}
.dp-tile.soon:hover,.dp-tile.gated:hover{background:rgba(255,255,255,.04);color:#e8d9a8}
.dp-tilewhy{font-size:calc(var(--u)*11.5);color:#8a7a4a;font-style:italic;text-align:center;margin:-.2em 0 .45em;line-height:1.2}
.dp-chosen{display:flex;justify-content:center;margin-bottom:.15em}
.dp-chosen .dp-tile{max-width:calc(var(--u)*280);margin-bottom:0}
.dp-changehint{text-align:center;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-style:italic;cursor:pointer;margin-top:.3em}
.dp-changehint:hover{color:#e3c069}
/* cease-fire: a halted invasion, so it reads warmer than the rest */
.dp-cf{border-left:3px solid #c9a227;padding-left:.5em}
.dp-cfclock{color:#e3c069;font-weight:700}
/* ===== CHARACTERS popup (knob -> Characters): Skills & Status / Magic /
   Training & Promotion. Mirrors the Building/Intrigue/Economic/Diplomacy
   shells — same .ls-box frame, same .lp-* PSD buttons (blue .lp-buy commits,
   red .lp-cancel cancels), the shared approved dropdown (.ig-sel), and the
   standard gold accent (#e3c069). Intrigue's purple is the deliberate
   exception and is NOT copied here.
   Standing rules honoured: every group of boxes in a row is the SAME size
   (grid 1fr tracks, never auto), buttons in a row are equal width with
   centred text, skill tiers use the ONE canonical rating palette
   (RATING_COLORS.md) by rank, and no internal code is ever rendered. ===== */
#char-popup{width:calc(var(--u)*1180);height:calc(var(--u)*880);min-width:700px;min-height:460px}
#char-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4% 2.6%;overflow:hidden}
.ch-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.55em;cursor:move;flex:0 0 auto}
.ch-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ch-mode{margin-left:auto;font-size:calc(var(--u)*24);font-weight:700;color:#e3c069;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ch-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:.45em;margin-bottom:.55em;flex:0 0 auto}
.ch-tab{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ch-tab:hover{background:rgba(202,163,56,.16);color:#fff}
.ch-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ch-panel{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*12) calc(var(--u)*14);font-family:'Times New Roman',Times,serif}
.ch-intro{font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4}
.ch-sec{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*9);background:rgba(0,0,0,.2)}
.ch-sec-h{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:calc(var(--u)*17);color:#e3c069;margin-bottom:.4em;letter-spacing:.5px}
.ch-sec-h .n{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.ch-stub{font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic;margin-top:.5em}
/* every button in a row: same width, centred text */
.lp-btn{text-align:center}
.ch-btnrow{display:grid;gap:5%;margin:.9em 0 .3em}
.ch-btnrow .lp-btn{flex:0 1 auto;width:100%;margin:0}
/* roster: portrait cards */
.ch-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*132),1fr));gap:calc(var(--u)*10)}
.ch-card{cursor:pointer;border-radius:8px;padding:.3em;text-align:center;border:1px solid transparent}
.ch-card:hover{background:rgba(202,163,56,.14);border-color:#4a8ab0}
.ch-card.sel{background:rgba(202,163,56,.16);border-color:#4a8ab0}
.ch-frame{position:relative;width:100%;aspect-ratio:3/4;border-radius:6px;overflow:hidden;border:1px solid #6b5a2a;background:#0a141e;box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.ch-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.ch-card.sel .ch-frame{border-color:#e3c069;box-shadow:0 0 7px rgba(227,192,105,.55)}
.ch-cname{font-size:calc(var(--u)*14);font-weight:700;color:#f4e4b8;margin-top:.25em;line-height:1.15}
.ch-cstat{font-size:calc(var(--u)*12.5);color:#8a7a4a}
/* Roster: type under the name, and the Show filter (Mike 2026-10-21) */
.ch-ctype{font-size:calc(var(--u)*12.5);color:#e3c069;font-weight:700;letter-spacing:.3px}
.ch-filt{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .7em;margin:0 0 .6em;padding:.45em .6em;border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.22)}
.ch-filt label{font-size:calc(var(--u)*12.5);text-transform:uppercase;letter-spacing:1px;color:#8a7a4a;font-weight:700}
.ch-filt .ig-sel{width:auto;min-width:calc(var(--u)*170)}
.ch-filt .hint{font-size:calc(var(--u)*13);color:#9a8d6a;font-style:italic}
/* Boxes: Standing and every skill read the same way as the key skills */
.ch-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*175),1fr));gap:.6em}
.ch-boxes .ch-key{min-height:calc(var(--u)*78)}
.ch-key-v{font-size:calc(var(--u)*16);font-weight:700;color:#f4e4b8;line-height:1.2;word-break:break-word}
.ch-key.prim{border-color:#caa338;background:rgba(202,163,56,.18)}
/* Training & Promotion: the chosen character's portrait beside the picker */
.ch-selrow{display:flex;align-items:center;gap:.7em}
.ch-selrow>.ch-frame{flex:0 0 calc(var(--u)*86);width:calc(var(--u)*86)}
.ch-selrow>.ch-field{flex:1 1 auto;min-width:0}
html.m .ch-filt .ig-sel{min-width:0;flex:1 1 40%}
html.m .ch-boxes{grid-template-columns:repeat(2,1fr)}
html.m .ch-selrow>.ch-frame{flex-basis:64px;width:64px}
.ch-dead .ch-frame img{filter:grayscale(.85) brightness(.6)}
/* the Monarch (W05): a gold frame and a label under the portrait */
.ch-monarch .ch-frame{border-color:#e3c069;box-shadow:0 0 7px rgba(227,192,105,.55)}
.ch-crown{font-size:calc(var(--u)*11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#e3c069;margin-top:.2em}
/* selected character */
.ch-chosen{display:flex;gap:1em;align-items:flex-start;margin-bottom:.6em}
.ch-chosen .ch-frame{flex:0 0 calc(var(--u)*180);width:calc(var(--u)*180)}
.ch-chosen-side{flex:1 1 auto;min-width:0}
.ch-chosen-name{font-size:calc(var(--u)*26);font-weight:700;color:#f4e4b8;line-height:1.1}
/* Rename (Mike 2026-10-20): a character is born with its standard name; the player may give it one */
.ch-rename{display:inline-block;vertical-align:middle;margin-left:.6em;font-size:calc(var(--u)*13);font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#e3c069;border:1px solid #6b5a2a;border-radius:4px;padding:.15em .55em;cursor:pointer;background:rgba(202,163,56,.10)}
.ch-rename:hover{background:rgba(202,163,56,.22)}
.ch-namein{width:100%;box-sizing:border-box;margin-top:.5em;font:inherit;font-size:calc(var(--u)*18);color:#f4e4b8;background:rgba(0,0,0,.35);border:1px solid #6b5a2a;border-radius:4px;padding:.35em .5em}
html.m .ch-namein{font-size:16px}
.ch-chosen-sub{font-size:calc(var(--u)*15);color:#b6a888;margin-top:.15em}
/* status band — prominence, with the two red actions beside it, equal size */
.ch-statusbar{display:flex;align-items:center;gap:.9em;margin:.5em 0 .2em;padding:.45em .7em;border:1px solid #6b5a2a;border-radius:6px;background:rgba(202,163,56,.10)}
.ch-statusbar .k{font-size:calc(var(--u)*12.5);text-transform:uppercase;letter-spacing:1px;color:#8a7a4a;font-weight:700}
.ch-statusbar .v{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;line-height:1;flex:1 1 auto}
.ch-sbtns{flex:0 0 auto;display:grid;grid-template-columns:repeat(2,calc(var(--u)*168));gap:.55em}
.ch-sbtns .lp-btn{width:100%;margin:0;font-size:calc(var(--u)*16);padding:calc(var(--u)*7) 0}
.ch-off{opacity:.42;cursor:default}
/* not available (on a mission, ruling, recuperating, captured, fallen): the picture sits on the palette's red (Mike 2026-10-23) */
.ch-card.ch-busy .ch-frame{background:#cc4444;border-color:#6b2222}
/* Skills & Status by type (Mike 2026-10-23): Monarch & Advisors on top, then a
   section per type the player drags into their own order */
.ch-tsec{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*7) calc(var(--u)*9);margin-top:calc(var(--u)*9);background:rgba(0,0,0,.18)}
.ch-tsec-court{border-color:#6b5a2a;background:rgba(202,163,56,.07)}
.ch-tsec-h{display:flex;align-items:center;gap:.5em;font-weight:700;font-size:calc(var(--u)*16);color:#e3c069;margin-bottom:.4em;letter-spacing:.5px}
.ch-tsec-h .n{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.ch-tdrag{cursor:grab;touch-action:none;user-select:none;color:#8a7a4a;letter-spacing:-.25em;padding:.1em .5em .1em .1em;font-size:calc(var(--u)*18)}
.ch-tdrag:hover{color:#f4e4b8}
.ch-tsec.ch-tdragging{border-color:#4a8ab0;box-shadow:0 0 10px rgba(74,138,176,.6);opacity:.9}
.ch-tsec.ch-tdragging .ch-tdrag{cursor:grabbing}
/* Age tab (Mike 2026-10-23): the Elder band boxed red, Aged yellow; a newcomer
   to court ringed green, one won from prison / by coercion / by a spell orange */
.ch-age-btns{margin:0 0 .6em}
.ch-age-btns .lp-btn{font-size:calc(var(--u)*22)}
.ch-sec.ch-age-red{border:2px solid #e0362c;box-shadow:0 0 8px rgba(224,54,44,.45)}
.ch-sec.ch-age-yellow{border:2px solid #ffe23a;box-shadow:0 0 8px rgba(255,226,58,.4)}
.ch-sec.ch-age-dead{border-color:#6b6f78}
.ch-card.ch-new .ch-frame{border:2px solid #3fd16a;box-shadow:0 0 8px rgba(63,209,106,.6)}
.ch-card.ch-won .ch-frame{border:2px solid #ff8c1a;box-shadow:0 0 8px rgba(255,140,26,.6)}
.ch-age-key{display:flex;flex-wrap:wrap;gap:.4em 1.2em;font-size:calc(var(--u)*13);color:#b6a888;margin-bottom:.6em}
.ch-age-key span::before{content:'';display:inline-block;width:.9em;height:.9em;border-radius:2px;margin-right:.35em;vertical-align:-.1em;border:2px solid}
.ch-age-key .k-red::before{border-color:#e0362c}
.ch-age-key .k-yellow::before{border-color:#ffe23a}
.ch-age-key .k-new::before{border-color:#3fd16a}
.ch-age-key .k-won::before{border-color:#ff8c1a}
/* a default portrait is the type's map picture, whole (Mike 2026-10-23) */
img[src*="/character-icons/"]{object-fit:contain!important;object-position:50% 50%!important}
/* facts + skills */
.ch-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*250),1fr));gap:.3em .9em}
.ch-fact{display:flex;justify-content:space-between;gap:.6em;font-size:calc(var(--u)*14.5);padding:.2em 0;border-bottom:1px dotted rgba(107,90,42,.35)}
.ch-fact .k{color:#8a7a4a;white-space:nowrap}
.ch-fact .v{color:#e8d9a8;text-align:right;font-weight:700}
.ch-skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*300),1fr));gap:.25em .9em}
.ch-skrow{display:flex;align-items:center;gap:.6em;font-size:calc(var(--u)*14.5);padding:.18em 0}
.ch-skrow .sl{flex:1 1 auto;color:#b6a888;min-width:0}
.ch-tier{flex:0 0 auto;display:inline-block;box-sizing:border-box;min-width:calc(var(--u)*118);text-align:center;font-size:calc(var(--u)*13);font-weight:700;padding:.14em .5em;border-radius:4px;border:1px solid;white-space:nowrap}
.ch-t0{color:#666666;background:#1a1a1a;border-color:#333333}
.ch-t1{color:#cc4444;background:#3a1a1a;border-color:#6b2222}
.ch-t2{color:#55aa55;background:#1a2e1a;border-color:#2d5a2d}
.ch-t3{color:#b8a040;background:#2a2a1a;border-color:#5a5020}
.ch-t4{color:#5599cc;background:#1a2a3a;border-color:#224466}
.ch-t5{color:#9966cc;background:#2a1a3a;border-color:#442266}
.ch-t6{color:#cc8833;background:#3a2a1a;border-color:#664411}
.ch-chips{display:flex;flex-wrap:wrap;gap:.35em}
.ch-chip{font-size:calc(var(--u)*13.5);color:#e8d9a8;background:rgba(0,0,0,.25);border:1px solid #3b4247;border-radius:5px;padding:.22em .6em}
.ch-chip.none{color:#8a7a4a;font-style:italic}
/* ── MAGIC: three areas, and battle's phases styled exactly like the parent ── */
.ch-areabar{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-bottom:.5em}
.ch-subtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-bottom:.55em}
.ch-areabtn{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ch-areabtn:hover{background:rgba(202,163,56,.16);color:#fff}
.ch-areabtn.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ch-areabtn .n{display:block;font-size:calc(var(--u)*12);color:#8a7a4a;font-weight:400}
.ch-areabtn.sel .n{color:#cfe3ef}
/* spell card: art on the left, everything else to its right */
.ch-spell{display:flex;gap:calc(var(--u)*11);border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*8);background:rgba(0,0,0,.24)}
.ch-spellart{flex:0 0 calc(var(--u)*118);align-self:flex-start;width:calc(var(--u)*118);height:calc(var(--u)*118);min-width:92px;min-height:92px;border-radius:6px;border:1px solid #6b5a2a;background:radial-gradient(circle at 50% 38%,#1b2c3d 0%,#0a141e 78%);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 14px rgba(0,0,0,.65)}
.ch-spellart img{width:100%;height:100%;object-fit:cover;display:block}
.ch-spellart .sig{font-size:calc(var(--u)*40);color:#3f5a72;line-height:1}
.ch-spellbody{flex:1 1 auto;min-width:0}
.ch-spell-h{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.ch-spell-n{font-weight:700;font-size:calc(var(--u)*18);color:#f4e4b8}
.ch-spell-also{margin-left:auto;font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic}
.ch-spell-d{font-size:calc(var(--u)*13.5);color:#b6a888;line-height:1.35;margin:.25em 0}
/* the five facts: one row, five EQUAL boxes */
.ch-meta{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em;margin-top:.4em}
.ch-m{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--u)*13);color:#e8d9a8;background:rgba(202,163,56,.08);border:1px solid #2a3a4a;border-radius:5px;padding:.3em .35em;min-height:calc(var(--u)*44)}
.ch-m .k{display:block;color:#8a7a4a;text-transform:uppercase;letter-spacing:.5px;font-size:calc(var(--u)*10.5);margin-bottom:.15em}
.ch-fx{margin-top:.4em;font-size:calc(var(--u)*13);color:#a2946f;line-height:1.4;border-top:1px dotted rgba(107,90,42,.35);padding-top:.35em}
.ch-fx b{color:#e3c069}
/* ── TRAINING ── */
.ch-ptrow{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-bottom:.6em}
.ch-pt{text-align:center;border:1px solid #6b5a2a;border-radius:6px;padding:.5em;background:rgba(202,163,56,.10)}
.ch-pt-n{font-size:calc(var(--u)*44);font-weight:800;line-height:1;color:#e3c069}
.ch-pt-l{font-size:calc(var(--u)*13);color:#8a7a4a;margin-top:.2em;text-transform:uppercase;letter-spacing:1px}
.ch-field{display:flex;align-items:center;gap:.6em;margin:.4em 0}
.ch-field select{flex:1 1 auto;min-width:0;width:100%;text-overflow:ellipsis}
.ch-field label{flex:0 0 calc(var(--u)*150);font-size:calc(var(--u)*14);color:#e3c069;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.ch-cost{display:flex;align-items:center;justify-content:center;gap:.6em;margin:.5em 0 .2em;font-size:calc(var(--u)*17);color:#e8d9a8}
.ch-cost b{font-size:calc(var(--u)*24);color:#e3c069}
.ch-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*215),1fr));gap:.4em}
.ch-opt{display:flex;align-items:center;gap:.5em;border:1px solid #3b4247;border-radius:5px;padding:.3em .55em;background:rgba(0,0,0,.25);cursor:pointer;font-size:calc(var(--u)*14);color:#e8d9a8;min-height:calc(var(--u)*34)}
.ch-opt:hover{border-color:#4a8ab0;background:rgba(202,163,56,.14)}
.ch-opt.sel{background:#2b5467;border-color:#4a8ab0;color:#fff}
.ch-opt.lock{opacity:.42;cursor:default}
.ch-opt.lock:hover{border-color:#3b4247;background:rgba(0,0,0,.25)}
.ch-opt .c{margin-left:auto;font-size:calc(var(--u)*12.5);color:#8a7a4a;white-space:nowrap}
.ch-opt>span:first-child{min-width:0;overflow-wrap:anywhere}
.ch-opt.sel .c{color:#cfe3ef}
.ch-rare-h{font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:.55em 0 .3em}
/* ── nested popup: image gallery + upload (same ornate frame as the parent) ── */
.ch-modal{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(4,10,16,.72)}
.ch-modalbox{box-sizing:border-box;width:86%;max-height:88%;display:flex;flex-direction:column;border:18px solid transparent;border-image:url("../ui/popup_blank.png") 20 fill stretch;font-family:'Times New Roman',Times,serif;color:#f4e4b8;padding:calc(var(--u)*10) calc(var(--u)*14)}
.ch-modal-h{font-size:calc(var(--u)*22);font-weight:700;color:#f4e4b8;border-bottom:1px solid #3b4247;padding-bottom:.35em;margin-bottom:.45em}
.ch-modal-b{flex:1 1 auto;min-height:0;overflow-y:auto}
.ch-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*110),1fr));gap:calc(var(--u)*8)}
.ch-galcard{cursor:pointer;border-radius:8px;padding:.25em;border:1px solid transparent}
.ch-galcard:hover{background:rgba(202,163,56,.14);border-color:#4a8ab0}
.ch-galcard.sel{background:rgba(202,163,56,.16);border-color:#e3c069}
.ch-galcard.sel .ch-frame{border-color:#e3c069;box-shadow:0 0 7px rgba(227,192,105,.55)}
.ch-drop{border:1px dashed #6b5a2a;border-radius:8px;background:rgba(0,0,0,.25);padding:calc(var(--u)*22);text-align:center}
.ch-drop-i{font-size:calc(var(--u)*40);color:#6b5a2a;line-height:1}
.ch-drop-t{font-size:calc(var(--u)*16);color:#e8d9a8;margin:.35em 0 .15em}
.ch-drop-s{font-size:calc(var(--u)*13);color:#8a7a4a;line-height:1.4}
.ch-drop{cursor:pointer}
.ch-up-prev{width:calc(var(--u)*120);min-width:90px;margin:0 auto .4em}
.ch-up-prev img{width:100%;height:100%;object-fit:cover}
.ch-file{display:flex;align-items:center;gap:.6em;margin-top:.6em;font-size:calc(var(--u)*13.5);color:#8a7a4a}
.ch-file .nm{flex:1 1 auto;color:#e8d9a8;background:rgba(0,0,0,.3);border:1px solid #3b4247;border-radius:4px;padding:.3em .5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* primary + secondary skill get their own prominent pair of boxes; the rest
   sit below as a plain list with no role wording at all (Mike 2026-09-18) */
.ch-keyskills{display:grid;grid-template-columns:repeat(2,1fr);gap:.6em;margin-bottom:.6em}
.ch-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;text-align:center;border:1px solid #6b5a2a;border-radius:6px;background:rgba(202,163,56,.10);padding:.6em .4em}
.ch-key-r{font-size:calc(var(--u)*11.5);text-transform:uppercase;letter-spacing:1px;color:#8a7a4a;font-weight:700}
.ch-key-n{font-size:calc(var(--u)*20);font-weight:700;color:#f4e4b8;line-height:1.1}
.ch-key .ch-tier{font-size:calc(var(--u)*15);padding:.2em .7em;min-width:calc(var(--u)*150)}
/* magic known: real buttons carrying the spell art */
.ch-spellbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*196),1fr));gap:.5em}
.ch-spellbtn{display:flex;align-items:center;gap:.55em;border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.28);padding:.4em .55em;min-height:calc(var(--u)*66)}
.ch-spellbtn img{flex:0 0 calc(var(--u)*54);width:calc(var(--u)*54);height:calc(var(--u)*54);border-radius:5px;border:1px solid #6b5a2a;object-fit:cover;display:block}
.ch-spellbtn .nm{min-width:0;font-size:calc(var(--u)*15);font-weight:700;color:#f4e4b8;line-height:1.15}
.ch-spellbtn.none{color:#8a7a4a;font-style:italic;justify-content:center;font-size:calc(var(--u)*14)}
/* study picker: bigger, centred, obviously a choice */
.ch-studyopts{display:grid;grid-template-columns:repeat(2,calc(var(--u)*330));gap:.7em;justify-content:center;margin:.55em 0 .4em}
.ch-studyopt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;text-align:center;border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.28);padding:.7em .5em;cursor:pointer;min-height:calc(var(--u)*74)}
.ch-studyopt:hover{border-color:#4a8ab0;background:rgba(202,163,56,.16)}
.ch-studyopt.sel{background:#2b5467;border-color:#4a8ab0;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ch-studyopt .t{font-size:calc(var(--u)*19);font-weight:700;color:#f4e4b8}
.ch-studyopt .s{font-size:calc(var(--u)*13);color:#8a7a4a}
.ch-studyopt.sel .s{color:#cfe3ef}
.ch-pick{text-align:center;font-size:calc(var(--u)*14);color:#e3c069;letter-spacing:.5px;margin-top:.15em}
/* promote | learn side by side, same level, equal height */
.ch-twocol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6em;align-items:stretch}  /* minmax(0,..): a column may shrink below its widest content (the character select) instead of pushing the popup sideways */
.ch-twocol>.ch-sec{margin-bottom:0;display:flex;flex-direction:column;min-width:0}
.ch-twocol>.ch-sec>.ch-grow{flex:1 1 auto}
/* ===== MILITARY popup (knob -> Military): Troops / Armies & Navies /
   Recruit Queues / Battle History. Mirrors the Building/Intrigue/Economic/
   Diplomacy/Characters shells — same .ls-box frame, same .lp-* PSD buttons
   (blue .lp-buy commits, red .lp-cancel cancels), the shared approved
   .ig-sel dropdown, standard gold #e3c069. Intrigue's purple is NOT copied.
   Rating badges REUSE the canonical .ch-tier/.ch-t0..t6 palette
   (RATING_COLORS.md) — one palette, never a second. Troop art comes from the
   same /military-icons/units slugs the battle screens use, staged here as
   ui/troops/<slug>.webp. No internal code is ever rendered. ===== */
#mil-popup{width:calc(var(--u)*1320);height:calc(var(--u)*900);min-width:760px;min-height:480px}
#mil-popup .lp-body{position:absolute;inset:0;display:flex;flex-direction:column;padding:2.4% 2.6%;overflow:hidden}
.ml-head{display:flex;align-items:center;gap:.5em;padding-bottom:.5em;border-bottom:1px solid #3b4247;margin-bottom:.55em;cursor:move;flex:0 0 auto}
.ml-title{font-size:calc(var(--u)*24);font-weight:700;color:#f4e4b8;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ml-mode{margin-left:auto;font-size:calc(var(--u)*24);font-weight:700;color:#e3c069;font-family:'Times New Roman',Times,serif;letter-spacing:1px}
.ml-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em;margin-bottom:.55em;flex:0 0 auto}
.ml-tab{text-align:center;padding:.5em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*16);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ml-tab:hover{background:rgba(202,163,56,.16);color:#fff}
.ml-tab.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ml-panel{flex:1 1 auto;min-height:0;overflow-y:auto;background:#0e1c2b;border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*12) calc(var(--u)*14);font-family:'Times New Roman',Times,serif}
.ml-intro{font-size:calc(var(--u)*15);color:#b6a888;margin-bottom:.6em;line-height:1.4}
.ml-sec{border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*9);background:rgba(0,0,0,.2)}
.ml-sec-h{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:calc(var(--u)*17);color:#e3c069;margin-bottom:.4em;letter-spacing:.5px}
.ml-sec-h .n{margin-left:auto;font-size:calc(var(--u)*13);color:#8a7a4a;font-weight:400}
.ml-stub{font-size:calc(var(--u)*12);color:#8a7a4a;font-style:italic;margin-top:.5em}
.ml-btnrow{display:grid;gap:5%;margin:.9em 0 .3em}
.ml-btnrow .lp-btn{flex:0 1 auto;width:100%;margin:0}
.ml-off{opacity:.42;cursor:default}
/* Legendary sits above the seven canonical ranks (experience axis only) */
.ml-tleg{color:#ccaa00;background:#3a3a1a;border-color:#665500}
/* ── kingdom strength band: equal boxes, one row ── */
.ml-tot{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;margin-bottom:.6em}
.ml-totbox{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #6b5a2a;border-radius:6px;background:rgba(202,163,56,.10);padding:.5em .4em}
.ml-totbox .n{font-size:calc(var(--u)*30);font-weight:800;line-height:1;color:#e3c069}
.ml-totbox .l{font-size:calc(var(--u)*12);color:#8a7a4a;margin-top:.22em;text-transform:uppercase;letter-spacing:1px}
.ml-totbox .s{font-size:calc(var(--u)*12);color:#b6a888;margin-top:.1em}
.ml-totbox.warn .n{color:#cc4444}
/* ── troop type card: art left, everything else right (mirrors .ch-spell) ── */
.ml-unit{display:flex;gap:calc(var(--u)*11);border:1px solid #2a3a4a;border-radius:6px;padding:calc(var(--u)*9) calc(var(--u)*11);margin-bottom:calc(var(--u)*8);background:rgba(0,0,0,.24)}
.ml-unit.locked{opacity:.55}
.ml-art{flex:0 0 calc(var(--u)*104);align-self:flex-start;width:calc(var(--u)*104);height:calc(var(--u)*104);min-width:84px;min-height:84px;border-radius:6px;border:1px solid #6b5a2a;background:radial-gradient(circle at 50% 38%,#1b2c3d 0%,#0a141e 78%);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 14px rgba(0,0,0,.65)}
.ml-art img{width:100%;height:100%;object-fit:contain;display:block}
.ml-art .sig{font-size:calc(var(--u)*30);color:#3f5a72;line-height:1;font-weight:700}
.ml-ubody{flex:1 1 auto;min-width:0}
.ml-u-h{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap}
.ml-u-n{font-weight:700;font-size:calc(var(--u)*18);color:#f4e4b8}
.ml-u-c{font-size:calc(var(--u)*13);color:#8a7a4a;font-style:italic}
.ml-u-count{margin-left:auto;font-size:calc(var(--u)*20);font-weight:800;color:#e3c069;white-space:nowrap}
.ml-u-count .cl{font-size:calc(var(--u)*11.5);color:#8a7a4a;text-transform:uppercase;letter-spacing:1px;font-weight:700;margin-right:.35em}
.ml-u-d{font-size:calc(var(--u)*13.5);color:#b6a888;line-height:1.35;margin:.25em 0}
/* headline facts: one row of EQUAL boxes */
.ml-umeta{display:grid;grid-template-columns:repeat(4,1fr);gap:.4em;margin-top:.4em}
.ml-m{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--u)*13);color:#e8d9a8;background:rgba(202,163,56,.08);border:1px solid #2a3a4a;border-radius:5px;padding:.3em .35em;min-height:calc(var(--u)*42)}
.ml-m .k{display:block;color:#8a7a4a;text-transform:uppercase;letter-spacing:.5px;font-size:calc(var(--u)*10.5);margin-bottom:.15em}
/* the six skill ratings */
.ml-skills{display:grid;grid-template-columns:repeat(3,1fr);gap:.25em .8em;margin-top:.45em}
.ml-skrow{display:flex;align-items:center;gap:.5em;font-size:calc(var(--u)*13.5);padding:.14em 0}
.ml-skrow .sl{flex:1 1 auto;color:#b6a888;min-width:0}
.ml-skrow .ch-tier{min-width:calc(var(--u)*104);font-size:calc(var(--u)*12.5)}
.ml-req{margin-top:.4em;font-size:calc(var(--u)*13);color:#a2946f;border-top:1px dotted rgba(107,90,42,.35);padding-top:.35em}
.ml-req b{color:#e3c069}
.ml-lock{margin-top:.4em;font-size:calc(var(--u)*13);color:#cc8833;border-top:1px dotted rgba(107,90,42,.35);padding-top:.35em}
.ml-lock b{color:#e3c069}
/* ── armies & navies list ── */
.ml-armies{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*300),1fr));gap:calc(var(--u)*8)}
.ml-army{border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.28);padding:.45em .6em;cursor:pointer}
.ml-army:hover{border-color:#4a8ab0;background:rgba(202,163,56,.14)}
.ml-army.sel{background:#2b5467;border-color:#4a8ab0;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ml-army-h{display:flex;align-items:baseline;gap:.5em}
.ml-army-n{font-size:calc(var(--u)*17);font-weight:700;color:#f4e4b8;min-width:0}
.ml-army-t{margin-left:auto;font-size:calc(var(--u)*15);font-weight:700;color:#e3c069;white-space:nowrap}
.ml-army-t.full{color:#cc8833}
.ml-army-f{display:flex;gap:.6em;flex-wrap:wrap;font-size:calc(var(--u)*13);color:#8a7a4a;margin-top:.2em}
.ml-army-f .v{color:#e8d9a8}
.ml-bar{display:block;height:calc(var(--u)*7);min-height:5px;border-radius:3px;background:rgba(0,0,0,.45);border:1px solid #2a3a4a;overflow:hidden;margin-top:.3em}
.ml-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6d2a,#e3c069)}
.ml-bar i.full{background:linear-gradient(90deg,#8a4a1a,#cc8833)}
/* status pills */
.ml-pill{display:inline-block;font-size:calc(var(--u)*12);font-weight:700;padding:.1em .5em;border-radius:4px;border:1px solid;white-space:nowrap}
.ml-p-home{color:#55aa55;background:#1a2e1a;border-color:#2d5a2d}
.ml-p-march{color:#b8a040;background:#2a2a1a;border-color:#5a5020}
.ml-p-deploy{color:#5599cc;background:#1a2a3a;border-color:#224466}
.ml-p-battle{color:#cc4444;background:#3a1a1a;border-color:#6b2222}
/* ── transfer: two army columns, drag & drop ── */
.ml-xfer{display:grid;grid-template-columns:1fr 1fr;gap:.7em;align-items:stretch}
.ml-xcol{display:flex;flex-direction:column;min-width:0;border:1px solid #2a3a4a;border-radius:6px;background:rgba(0,0,0,.22);padding:.45em .55em}
.ml-xhead{display:flex;align-items:center;gap:.5em;margin-bottom:.4em}
.ml-xhead .ig-sel{flex:1 1 auto}
.ml-xcap{font-size:calc(var(--u)*12.5);color:#8a7a4a;text-align:right;white-space:nowrap}
.ml-xcap.over{color:#cc4444;font-weight:700}
.ml-xlist{flex:1 1 auto;min-height:calc(var(--u)*190);overflow-y:auto;border:1px dashed #3b4247;border-radius:5px;padding:.3em;background:rgba(0,0,0,.25)}
.ml-xlist.over{border-color:#e3c069;background:rgba(202,163,56,.14);box-shadow:inset 0 0 12px rgba(227,192,105,.25)}
.ml-xrow{display:flex;align-items:center;gap:.5em;border:1px solid #3b4247;border-radius:5px;background:rgba(0,0,0,.35);padding:.25em .45em;margin-bottom:.25em;cursor:grab;font-size:calc(var(--u)*13.5)}
.ml-xrow:hover{border-color:#4a8ab0;background:rgba(202,163,56,.14)}
.ml-xrow.drag{opacity:.45}
.ml-xrow img{flex:0 0 calc(var(--u)*34);width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:4px;border:1px solid #6b5a2a;object-fit:contain;background:rgba(0,0,0,.4)}
.ml-xrow .nm{flex:1 1 auto;min-width:0;color:#f4e4b8;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-xrow .qt{flex:0 0 auto;color:#e3c069;font-weight:700}
.ml-xempty{display:flex;align-items:center;justify-content:center;height:100%;min-height:calc(var(--u)*150);color:#8a7a4a;font-style:italic;font-size:calc(var(--u)*13.5);text-align:center;padding:.5em}
.ml-xhint{font-size:calc(var(--u)*12.5);color:#8a7a4a;font-style:italic;text-align:center;margin-top:.35em}
/* ── conscript ── */
.ml-field{display:flex;align-items:center;gap:.6em;margin:.4em 0}
.ml-field label{flex:0 0 calc(var(--u)*182);font-size:calc(var(--u)*14);color:#e3c069;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.ml-num{width:calc(var(--u)*120);padding:.2em .4em;background:#16202a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);text-align:right}
.ml-pool{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin:.45em 0}
/* ── recruit queues ── */
.ml-q{display:flex;align-items:center;gap:.6em;border:1px solid #3b4247;border-radius:5px;background:rgba(0,0,0,.3);padding:.35em .55em;margin-bottom:.3em;font-size:calc(var(--u)*14)}
.ml-q img{flex:0 0 calc(var(--u)*40);width:calc(var(--u)*40);height:calc(var(--u)*40);border-radius:4px;border:1px solid #6b5a2a;object-fit:contain;background:rgba(0,0,0,.4)}
.ml-q .nm{flex:1 1 auto;min-width:0;color:#f4e4b8;font-weight:700}
.ml-q .sub{display:block;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:400}
.ml-q .eta{flex:0 0 auto;color:#b6a888;font-size:calc(var(--u)*13);text-align:right;white-space:nowrap}
.ml-q .qn{flex:0 0 auto;color:#e3c069;font-weight:700;white-space:nowrap}
.ml-qbar{height:calc(var(--u)*6);min-height:4px;border-radius:3px;background:rgba(0,0,0,.45);border:1px solid #2a3a4a;overflow:hidden;margin-top:.22em}
.ml-qbar i{display:block;height:100%;background:linear-gradient(90deg,#8a6d2a,#e3c069)}
/* ── battle history ── */
.ml-camp{display:flex;align-items:center;gap:.7em;border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.28);padding:.45em .6em;margin-bottom:.35em}
/* the two sides of the war, side by side: theirs (attacks on you) | yours */
.ml-camps{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em;align-items:start}
.ml-camps>.ml-sec{margin-bottom:0}
.ml-camps .ml-camp{gap:.5em}
.ml-camps .ml-camp .rn{flex:1 1 auto;font-size:calc(var(--u)*14.5)}
.ml-camps .ml-camp .pg{flex:0 0 22%}
.ml-camps .ml-camp .ct{font-size:calc(var(--u)*12.5)}
.ml-bar i.foe{background:linear-gradient(90deg,#8a2a2a,#cc4444)}
.ml-camp .ct.foe{color:#cc4444}
.ml-camp .rn{flex:0 0 calc(var(--u)*230);min-width:0;font-size:calc(var(--u)*15.5);font-weight:700;color:#f4e4b8}
.ml-camp .rn .sub{display:block;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:400}
.ml-camp .pg{flex:1 1 auto;min-width:0}
.ml-camp .ct{flex:0 0 auto;font-size:calc(var(--u)*14);color:#e3c069;font-weight:700;white-space:nowrap}
.ml-bat{border:1px solid #2a3a4a;border-radius:6px;background:rgba(0,0,0,.24);margin-bottom:calc(var(--u)*8);overflow:hidden}
.ml-bat-h{display:flex;align-items:center;gap:.6em;padding:.45em .6em;cursor:pointer}
.ml-bat-h:hover{background:rgba(202,163,56,.1)}
.ml-bat-r{flex:0 0 auto;font-size:calc(var(--u)*12);font-weight:700;padding:.1em .55em;border-radius:4px;border:1px solid}
.ml-r-win{color:#55aa55;background:#1a2e1a;border-color:#2d5a2d}
.ml-r-loss{color:#cc4444;background:#3a1a1a;border-color:#6b2222}
.ml-bat-t{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*15.5);font-weight:700;color:#f4e4b8}
.ml-bat-t .sub{display:block;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:400}
.ml-bat-d{flex:0 0 auto;font-size:calc(var(--u)*13);color:#8a7a4a;white-space:nowrap}
.ml-bat-b{padding:.1em .6em .55em;border-top:1px solid #2a3a4a}
/* who fought: invader vs defender, equal columns */
.ml-sides{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:.45em 0}
.ml-side{border:1px solid #2a3a4a;border-radius:5px;background:rgba(0,0,0,.25);padding:.4em .5em}
.ml-side-h{display:flex;align-items:baseline;gap:.5em;margin-bottom:.25em}
.ml-side-r{font-size:calc(var(--u)*11);text-transform:uppercase;letter-spacing:1px;color:#8a7a4a;font-weight:700}
.ml-side-k{font-size:calc(var(--u)*16);font-weight:700;color:#f4e4b8}
/* the three troop numbers: equal boxes, same row */
.ml-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em}
.ml-nb{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid #2a3a4a;border-radius:5px;background:rgba(202,163,56,.08);padding:.28em .3em}
.ml-nb .v{font-size:calc(var(--u)*19);font-weight:800;color:#e8d9a8;line-height:1}
.ml-nb .k{font-size:calc(var(--u)*10.5);color:#8a7a4a;text-transform:uppercase;letter-spacing:.5px;margin-top:.12em}
.ml-nb.lost .v{color:#cc4444}
.ml-nb.left .v{color:#55aa55}
/* per-unit line inside a side */
.ml-uline{display:flex;align-items:center;gap:.45em;font-size:calc(var(--u)*13);padding:.16em 0;border-bottom:1px dotted rgba(107,90,42,.28)}
.ml-uline img{flex:0 0 calc(var(--u)*28);width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:4px;border:1px solid #6b5a2a;object-fit:contain;background:rgba(0,0,0,.4)}
.ml-uline .nm{flex:1 1 auto;min-width:0;color:#b6a888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-uline .n3{flex:0 0 auto;color:#e8d9a8;font-weight:700;white-space:nowrap}
.ml-uline .n3 s{color:#cc4444;text-decoration:none}
/* characters who fought */
.ml-chars{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--u)*300),1fr));gap:.4em;margin-top:.15em}
.ml-cw{display:flex;gap:.5em;border:1px solid #2a3a4a;border-radius:5px;background:rgba(0,0,0,.25);padding:.35em .5em}
.ml-cw img{flex:0 0 calc(var(--u)*46);width:calc(var(--u)*46);height:calc(var(--u)*46);border-radius:5px;border:1px solid #6b5a2a;object-fit:cover;object-position:50% 12%}
.ml-cw-b{flex:1 1 auto;min-width:0}
.ml-cw-n{font-size:calc(var(--u)*14.5);font-weight:700;color:#f4e4b8}
.ml-cw-n .rl{font-size:calc(var(--u)*12);color:#8a7a4a;font-weight:400;margin-left:.35em}
.ml-cw-d{font-size:calc(var(--u)*12.5);color:#b6a888;line-height:1.3}
.ml-cw-d b{color:#e3c069}
.ml-cw.fell .ml-cw-n{color:#cc4444}
.ml-cw.fell img{filter:grayscale(.85) brightness(.6)}
/* rename modal — same ornate frame as the parent */
.ml-modal{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(4,10,16,.72)}
.ml-modalbox{box-sizing:border-box;width:58%;max-height:80%;display:flex;flex-direction:column;border:18px solid transparent;border-image:url("../ui/popup_blank.png") 20 fill stretch;font-family:'Times New Roman',Times,serif;color:#f4e4b8;padding:calc(var(--u)*10) calc(var(--u)*14)}
.ml-modal-h{font-size:calc(var(--u)*22);font-weight:700;color:#f4e4b8;border-bottom:1px solid #3b4247;padding-bottom:.35em;margin-bottom:.5em}
.ml-modal-b{flex:1 1 auto;min-height:0;overflow-y:auto}
.ml-txt{width:100%;box-sizing:border-box;padding:.35em .5em;background:#16202a;border:1px solid #3b4247;border-radius:4px;color:#f4e4b8;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*18)}
/* ── small PSD button: the SAME .lp-buy / .lp-cancel art, just sized down for
   inline use (never a new button style — Mike-locked) ── */
.lp-btn.ml-sm{flex:0 0 auto;width:auto;font-size:calc(var(--u)*13);padding:calc(var(--u)*3) calc(var(--u)*12);border-width:7px;letter-spacing:0}
.ml-uact{display:flex;align-items:center;gap:.4em;margin-left:auto}
/* ── army detail action bar: four equal PSD buttons ── */
.ml-actbar{display:grid;grid-template-columns:repeat(4,1fr);gap:5%;margin:.7em 0 .2em}
.ml-actbar .lp-btn{width:100%;margin:0}
.ml-actbar5{display:grid;grid-template-columns:repeat(5,1fr);gap:4%;margin:.7em 0 .2em}
.ml-actbar5 .lp-btn{width:100%;margin:0}
/* ── available-forces callout ── */
.ml-avail{display:flex;align-items:center;gap:.8em;border:1px solid #6b5a2a;border-radius:6px;background:rgba(202,163,56,.10);padding:.5em .7em;margin-bottom:.55em}
.ml-avail .n{font-size:calc(var(--u)*34);font-weight:800;color:#e3c069;line-height:1}
.ml-avail .t{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*14.5);color:#b6a888;line-height:1.3}
.ml-avail .t b{color:#f4e4b8;display:block;font-size:calc(var(--u)*16.5)}
.ml-avail .lp-btn{flex:0 0 calc(var(--u)*250);width:calc(var(--u)*250);margin:0}
.ml-avail.none{opacity:.55}
/* ── selectable rows (disband picker, create form) ── */
.ml-drow{display:flex;align-items:center;gap:.6em;border:1px solid #3b4247;border-radius:5px;background:rgba(0,0,0,.3);padding:.35em .55em;margin-bottom:.28em;cursor:pointer;font-size:calc(var(--u)*14)}
.ml-drow:hover{border-color:#4a8ab0;background:rgba(202,163,56,.14)}
.ml-drow.sel{background:#2b5467;border-color:#4a8ab0;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ml-drow .nm{flex:1 1 auto;min-width:0;color:#f4e4b8;font-weight:700}
.ml-drow .nm .sub{display:block;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:400}
.ml-drow.sel .nm .sub{color:#cfe3ef}
.ml-drow .qt{flex:0 0 auto;color:#e3c069;font-weight:700;white-space:nowrap}
.ml-drow .mk{flex:0 0 calc(var(--u)*20);text-align:center;color:#8a7a4a;font-weight:700}
.ml-drow.sel .mk{color:#e3c069}
/* ── recruit-queue: army/navy toggle + fill mode ── */
.ml-seg{display:grid;grid-template-columns:repeat(2,1fr);gap:.45em;margin-bottom:.5em}
.ml-segb{text-align:center;padding:.45em .3em;font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*15);font-weight:700;color:#e3c069;background:rgba(255,255,255,.04);border:1px solid #3b4247;border-radius:5px;cursor:pointer}
.ml-segb:hover{background:rgba(202,163,56,.16);color:#fff}
.ml-segb.sel{background:#2b5467;border-color:#4a8ab0;color:#f4e4b8;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ml-segb .n{display:block;font-size:calc(var(--u)*12);color:#8a7a4a;font-weight:400}
.ml-segb.sel .n{color:#cfe3ef}
/* ── the fill table ── */
/* Recruit Queues opens on a choice: armies or navies. Nothing else is shown
   until one is picked (Mike 2026-09-20). Left panel is the army icon on its
   red-and-green field, right is the navy on blue. */
.ml-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--u)*14);
  min-height:calc(var(--u)*430);align-items:stretch}
.ml-pickcard{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5em;border:1px solid #6b5a2a;border-radius:8px;
  cursor:pointer;padding:calc(var(--u)*18) calc(var(--u)*14);overflow:hidden;
  box-shadow:inset 0 0 26px rgba(0,0,0,.55)}
.ml-pickcard.army{background:linear-gradient(135deg,rgba(146,28,28,.62) 0%,rgba(146,28,28,.52) 46%,rgba(28,110,44,.52) 54%,rgba(28,110,44,.62) 100%)}
.ml-pickcard.navy{background:linear-gradient(135deg,rgba(24,62,140,.62) 0%,rgba(38,118,186,.58) 100%)}
.ml-pickcard.garrison{background:linear-gradient(135deg,rgba(92,74,30,.66) 0%,rgba(58,64,70,.6) 100%)}   /* Region Garrison: the defend-only special unit (Mike 2026-10-24) */
.ml-pickcard:hover{border-color:#e3c069;box-shadow:inset 0 0 26px rgba(0,0,0,.45),0 0 16px rgba(227,192,105,.45)}
.ml-pickcard img{max-height:calc(var(--u)*250);max-width:72%;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.ml-pickcard .t{font-family:'Times New Roman',Times,serif;font-size:calc(var(--u)*26);
  font-weight:700;color:#f4e4b8;letter-spacing:1px;text-shadow:0 2px 4px #000}
.ml-pickcard .s{font-size:calc(var(--u)*14);color:#f0e6cf;text-shadow:0 1px 3px #000;text-align:center}
/* Settings read as a statement with a switch at the end, rather than pairs of
   competing buttons (Mike 2026-09-20). Gold-on-dark like every other control;
   this is a switch, not one of the PSD buttons. */
.ml-opt{display:flex;align-items:center;gap:.9em;padding:calc(var(--u)*9) calc(var(--u)*11);
  border:1px solid #2a3a4a;border-radius:6px;background:rgba(0,0,0,.26);
  margin-bottom:calc(var(--u)*7);cursor:pointer}
.ml-opt:hover{border-color:#4a8ab0;background:rgba(202,163,56,.10)}
.ml-opt-t{flex:1 1 auto;min-width:0}
.ml-opt-q{font-size:calc(var(--u)*15.5);color:#f4e4b8;font-weight:700;line-height:1.25}
.ml-opt-s{display:block;font-size:calc(var(--u)*13);color:#8a7a4a;margin-top:.12em;line-height:1.3}
.ml-opt.on .ml-opt-s{color:#b6a888}
.ml-sw{flex:0 0 auto;position:relative;width:calc(var(--u)*56);height:calc(var(--u)*26);
  min-width:44px;min-height:22px;border-radius:999px;background:#16202a;border:1px solid #3b4247}
.ml-sw i{position:absolute;top:50%;left:calc(var(--u)*3);transform:translateY(-50%);
  width:calc(var(--u)*18);height:calc(var(--u)*18);min-width:15px;min-height:15px;
  border-radius:50%;background:#6b5a2a;display:block}
.ml-opt.on .ml-sw{background:rgba(202,163,56,.22);border-color:#e3c069;box-shadow:inset 0 0 8px rgba(227,192,105,.30)}
.ml-opt.on .ml-sw i{left:auto;right:calc(var(--u)*3);background:#e3c069}
.ml-qtab{font-size:calc(var(--u)*13.5)}
.ml-qh,.ml-qr{display:grid;grid-template-columns:calc(var(--u)*22) minmax(0,2.4fr) repeat(9,minmax(0,1fr));gap:.3em;align-items:center}
.ml-qh{font-size:calc(var(--u)*11.5);color:#8a7a4a;text-transform:uppercase;letter-spacing:.4px;font-weight:700;padding:.2em .4em;border-bottom:1px solid #2a3a4a}
.ml-qh span,.ml-qr span{text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-qh span.l,.ml-qr span.l{text-align:left}
.ml-qr{border:1px solid #3b4247;border-radius:5px;background:rgba(0,0,0,.3);padding:.32em .4em;margin-top:.25em;cursor:grab;color:#e8d9a8}
.ml-qr:hover{border-color:#4a8ab0;background:rgba(202,163,56,.12)}
.ml-qr.drag{opacity:.45}
.ml-qr.over{border-color:#e3c069;box-shadow:0 -2px 0 #e3c069}
.ml-qr .nm{color:#f4e4b8;font-weight:700}
/* ── recruit: the chosen force, and a troop build (troop builds, Mike 2026-10-20) ── */
.ml-qr.sel{border-color:#e3c069;background:rgba(202,163,56,.2)}
.ml-chips{display:flex;flex-wrap:wrap;gap:.35em;margin:.5em 0}
.ml-chip{display:inline-flex;align-items:center;gap:.4em;border:1px solid #3b4247;border-radius:14px;padding:.2em .7em;font-size:calc(var(--u)*13.5);color:#e8d9a8;background:rgba(0,0,0,.3);cursor:pointer}
.ml-chip:hover{border-color:#4a8ab0}
.ml-chip.sel{border-color:#e3c069;color:#f4e4b8;background:rgba(202,163,56,.18)}
.ml-chip i{font-style:normal;color:#cc4444;font-weight:700}
.ml-chip.ml-ren{margin-left:auto;color:#8ab0cc}
/* a force's queued recruits, one row per unit (W12 cancel / expedite) */
.ml-qln{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.6fr) minmax(0,1.3fr) minmax(0,1.2fr) auto;gap:.5em;align-items:center;padding:.3em 0;border-top:1px solid #22303c;font-size:calc(var(--u)*14);color:#e8d9a8}
.ml-qln:first-of-type{border-top:0}
.ml-qln .nm{font-weight:700;color:#f4e4b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-qln .dim{color:#8a7a4a}
.ml-qln .acts{display:flex;gap:.3em;justify-content:flex-end;flex-wrap:wrap}
.ml-chip.ml-busy{opacity:.45;pointer-events:none}
@media (max-width:640px){.ml-qln{grid-template-columns:minmax(0,1fr) auto}.ml-qln .dim{display:none}.ml-qln .acts{grid-column:1 / -1;justify-content:flex-start}}
.ml-build{border:1px solid #2a3a4a;border-radius:6px;background:rgba(0,0,0,.25);padding:.4em .55em}
.ml-bh,.ml-brow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) calc(var(--u)*30) minmax(0,1.3fr) calc(var(--u)*30) minmax(0,1fr);gap:.35em;align-items:center}
.ml-bh span{font-size:calc(var(--u)*11);text-transform:uppercase;letter-spacing:1px;color:#8a7a4a}
.ml-brow{padding:.18em 0;border-top:1px dotted rgba(107,90,42,.3);font-size:calc(var(--u)*14)}
.ml-brow .sl{color:#f4e4b8;font-weight:700}
.ml-brow .cur.chg .ch-tier,.ml-brow .cur.chg .ml-arm{outline:1px solid #e3c069;outline-offset:1px}
.ml-brow .pc{font-size:calc(var(--u)*11.5);color:#8a7a4a;text-align:right}
.ml-step{width:calc(var(--u)*28);height:calc(var(--u)*24);border:1px solid #6b5a2a;border-radius:4px;background:rgba(0,0,0,.4);color:#e3c069;font-weight:700;cursor:pointer;font-size:calc(var(--u)*15);line-height:1;padding:0}
.ml-step:hover{border-color:#e3c069}
.ml-step.off{opacity:.3;cursor:default}
.ml-arm{display:inline-block;padding:.05em .5em;border:1px solid #4a5560;border-radius:4px;color:#d8dde2;font-size:calc(var(--u)*13)}
.ml-bpts{margin-top:.35em;text-align:right;color:#b6a888;font-size:calc(var(--u)*14)}
.ml-bpts b{color:#e3c069}
.ml-bpts.over b{color:#cc4444}
.ml-bpts .sub{color:#8a7a4a;font-size:calc(var(--u)*12)}
.ml-bq{margin:.45em 0;font-size:calc(var(--u)*14);color:#b6a888;line-height:1.4}
.ml-bq b{color:#e3c069}
.ml-bsave{display:flex;align-items:center;gap:.5em;margin:.4em 0}
.ml-bsave .sub{font-size:calc(var(--u)*12);color:#8a7a4a}
.ml-txt{flex:0 0 calc(var(--u)*200);min-width:0;background:rgba(0,0,0,.45);border:1px solid #6b5a2a;border-radius:4px;color:#f4e4b8;padding:.25em .45em;font-size:calc(var(--u)*14)}
.ml-intro.ml-err{color:#cc4444}
.ml-qr .grip{color:#6b5a2a;text-align:center;cursor:grab}
.ml-qr .rem.over{color:#cc4444;font-weight:700}
.ml-qfoot{display:grid;grid-template-columns:calc(var(--u)*22) minmax(0,2.4fr) repeat(9,minmax(0,1fr));gap:.3em;padding:.35em .4em;margin-top:.3em;border-top:1px solid #2a3a4a;font-weight:700;color:#e3c069;font-size:calc(var(--u)*13.5)}
.ml-qfoot span{text-align:right;min-width:0}
.ml-qfoot span.l{text-align:left}
/* ── kingdom queue: the four buildings ── */
.ml-blds{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em;margin:.5em 0}
.ml-bld{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;text-align:center;border:1px solid #3b4247;border-radius:6px;background:rgba(0,0,0,.28);padding:.6em .4em;cursor:pointer;min-height:calc(var(--u)*66)}
.ml-bld:hover{border-color:#4a8ab0;background:rgba(202,163,56,.16)}
.ml-bld.sel{background:#2b5467;border-color:#4a8ab0;box-shadow:inset 0 0 8px rgba(74,138,176,.4)}
.ml-bld.off{opacity:.42;cursor:default}
.ml-bld.off:hover{border-color:#3b4247;background:rgba(0,0,0,.28)}
.ml-bld img{width:calc(var(--u)*38);height:calc(var(--u)*38);object-fit:contain}
.ml-bld .t{font-size:calc(var(--u)*15);font-weight:700;color:#f4e4b8}
.ml-bld .s{font-size:calc(var(--u)*12);color:#8a7a4a}
.ml-bld.sel .s{color:#cfe3ef}
/* ── per-troop quantity entry inside the kingdom queue ── */
.ml-qty{display:flex;align-items:center;gap:.55em;border:1px solid #3b4247;border-radius:5px;background:rgba(0,0,0,.3);padding:.3em .5em;margin-bottom:.28em}
.ml-qty img{flex:0 0 calc(var(--u)*38);width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:4px;border:1px solid #6b5a2a;object-fit:contain;background:rgba(0,0,0,.4)}
.ml-qty .nm{flex:1 1 auto;min-width:0;font-size:calc(var(--u)*14.5);color:#f4e4b8;font-weight:700}
.ml-qty .nm .sub{display:block;font-size:calc(var(--u)*12.5);color:#8a7a4a;font-weight:400}
.ml-qty .have{flex:0 0 auto;font-size:calc(var(--u)*12.5);color:#8a7a4a;white-space:nowrap}
.ml-qty .ml-num{flex:0 0 calc(var(--u)*104);width:calc(var(--u)*104)}
/* ── region-queue interaction rule ── */
.ml-rule{display:grid;grid-template-columns:repeat(2,1fr);gap:.5em;margin:.45em 0}