/* Fonts and the first design tokens (the prototype's Ink & Gilt :root). Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Rise of Empires: Galactic Aurora: the Cozy Cosmos look (design-library/), carried over from prototypes/cozy-colony.html. */
@font-face { font-family: "Fredoka"; src: url("/fonts/Fredoka-Variable-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Variable-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/Nunito-Italic-Variable-latin.woff2") format("woff2"); font-weight: 200 1000; font-style: italic; font-display: swap; }

/* Layout: Rise of Empires "Ink & Gilt" frame reused for space. Full-window painted scene; ink top bar with view medallions;
   resource ribbon under it; rail left; movements right; builders dock bottom centre; parchment dialogs.
   One theme by design (as in Rise of Empires). */
:root{
  color-scheme: light;
  --ink-950:#140e0a; --ink-900:#1f1712; --ink-800:#2b2118; --ink-600:#4d3b2b; --ink-500:#6a5440;
  --parch-50:#fffbf2; --parch-100:#fbf3dc; --parch-200:#f4e7c5; --parch-300:#e9d6a8; --parch-400:#d8bf88;
  --gilt-200:#fff1c2; --gilt-300:#ffe08a; --gilt-400:#f5c451; --gilt-500:#e0a229; --gilt-600:#b87b14; --gilt-700:#8a5a0e;
  --crimson-300:#f07a6a; --crimson-400:#dc4a3b; --crimson-500:#b8281f; --crimson-600:#8f1a14; --crimson-700:#62110d;
  --verdant-300:#a6dd6c; --verdant-400:#78bf3f; --verdant-500:#52992a; --verdant-600:#3b7a1c; --verdant-700:#285613;
  --sky-400:#5b9bd5; --sky-500:#2f6db3;
  --gilt-a30:rgb(245 196 81 / 30%); --gilt-a45:rgb(245 196 81 / 45%); --gilt-a70:rgb(245 196 81 / 70%); --gilt-a85:rgb(245 196 81 / 85%);
  --shade-a18:rgb(0 0 0 / 18%); --shade-a25:rgb(0 0 0 / 25%); --shade-a35:rgb(0 0 0 / 35%); --shade-a45:rgb(0 0 0 / 45%); --shade-a60:rgb(0 0 0 / 60%);
  --light-a30:rgb(255 255 255 / 30%); --light-a45:rgb(255 255 255 / 45%); --light-a60:rgb(255 255 255 / 60%); --light-a70:rgb(255 255 255 / 70%); --light-a85:rgb(255 255 255 / 85%);
  --crimson-a25:rgb(184 40 31 / 25%); --crimson-a55:rgb(184 40 31 / 55%); --verdant-a45:rgb(59 122 28 / 45%);
  --text-strong:var(--ink-800); --text:#46372a; --text-muted:#6a5741; --text-on-ink:#f6ead2; --text-on-ink-muted:#c7b08a;
  --state-warn:#8a5200; --focus:var(--sky-500);
  /* resources of the space game, each with its own icon shape too */
  --res-ore:#c0703c; --res-crystal:#3f9fd8; --res-gas:#8a5cc4; --res-energy:var(--gilt-500);
  /* alliances on the galaxy map */
  --realm-you:#1fb5c4; --realm-2:#e2559f; --realm-3:#9b4fd6; --realm-4:#f58a1f; --realm-enemy:#d4180c;
  --map-ground:#1b2346; --map-ground-2:#1e2750; --map-grid:rgb(255 255 255 / 7%);
  --mat-ink:linear-gradient(180deg,#4a392b 0%,#33271d 48%,#261c15 100%);
  --mat-ink-raised:linear-gradient(180deg,#57432f 0%,#3d2f23 100%);
  --mat-ink-hover:linear-gradient(180deg,#6b523a 0%,#47362a 100%);
  --mat-parchment:radial-gradient(130% 100% at 50% 0%,var(--parch-50) 0%,var(--parch-100) 55%,var(--parch-200) 100%);
  --mat-gilt:linear-gradient(180deg,var(--gilt-200) 0%,var(--gilt-400) 30%,var(--gilt-500) 62%,var(--gilt-600) 100%);
  --mat-gilt-ring:conic-gradient(from 200deg,var(--gilt-600),var(--gilt-200) 18%,var(--gilt-500) 35%,var(--gilt-700) 55%,var(--gilt-300) 75%,var(--gilt-600));
  --mat-crimson:linear-gradient(180deg,#e35a46 0%,var(--crimson-500) 52%,var(--crimson-600) 100%);
  --mat-verdant:linear-gradient(180deg,#86c94a 0%,var(--verdant-600) 42%,var(--verdant-700) 100%);
  --mat-meadow:radial-gradient(circle at 50% 65%,#a5d67a,#5f9a4a);
  --mat-plinth:radial-gradient(60% 50% at 50% 68%,rgb(255 255 255 / 95%),rgb(255 255 255 / 0%) 100%),radial-gradient(120% 90% at 50% 100%,#cfe7a0 0%,#e9efc8 45%,var(--parch-100) 75%);
  --mat-plinth-locked:radial-gradient(120% 90% at 50% 100%,#d9d2c0 0%,#ebe4d2 50%,var(--parch-200) 85%);
  --mat-space-stage:radial-gradient(60% 60% at 50% 60%,#2c3770,#141a38 80%);
  --stripes-gilt:repeating-linear-gradient(-45deg,var(--gilt-500) 0 5px,var(--gilt-400) 5px 10px);
  --hairline-gilt:inset 0 0 0 1px var(--gilt-a45);
  --hairline-gilt-strong:inset 0 0 0 1px var(--gilt-a85);
  --rim-light:inset 0 1px 0 rgb(255 255 255 / 16%);
  --edge-ink:0 0 0 2px var(--ink-800);
  --shadow-1:0 1px 0 rgb(20 14 10 / 30%),0 2px 4px rgb(20 14 10 / 20%);
  --shadow-2:0 2px 0 rgb(20 14 10 / 35%),0 6px 14px rgb(20 14 10 / 28%);
  --shadow-3:0 3px 0 rgb(20 14 10 / 40%),0 16px 36px rgb(20 14 10 / 45%);
  --shadow-dialog:0 6px 0 var(--ink-950),0 30px 80px rgb(0 0 0 / 60%);
  --glow-gilt:0 0 0 2px var(--gilt-400),0 0 18px rgb(245 196 81 / 70%);
  --well:inset 0 1px 2px var(--shade-a25);
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:9999px;
  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-ui:"Nunito Sans","Avenir Next","Segoe UI",system-ui,sans-serif;
  --t-title-xl:800 1.75rem/1.1 var(--font-display); --t-title-l:800 1.375rem/1.15 var(--font-display); --t-title-m:700 1.0625rem/1.2 var(--font-display); --t-title-s:700 .9rem/1.2 var(--font-display);
  --t-body:500 .875rem/1.45 var(--font-ui); --t-body-s:600 .78rem/1.35 var(--font-ui); --t-label:800 .6875rem/1.2 var(--font-ui);
  --t-num-l:850 1.125rem/1 var(--font-ui); --t-num:800 .875rem/1 var(--font-ui); --t-num-s:800 .75rem/1 var(--font-ui); --t-button:800 .875rem/1 var(--font-ui);
  --tracking-label:.08em;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --topbar-height:64px; --ribbon-height:44px; --res-width:140px; --rail-width:62px; --side-width:300px; --gap:14px;
  --modal-w:920px; --modal-h:680px; --modal-w-sm:440px;
}

/* Reset, body and small shared utilities. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--ink-950);color:var(--text);font:var(--t-body);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:20px;height:20px;flex:none;display:inline-block}
.num{font-variant-numeric:tabular-nums}

/* Prototype frame: scene, top bar, tooltip, ribbon, alarm, rail, side column, builders dock, advisor, quick card. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* scene */
#scene{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}
#scene.point{cursor:pointer}
#scene.grab{cursor:grabbing}

/* top bar */
.topbar{position:fixed;inset:0 0 auto;z-index:103;height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--gap);background:var(--mat-ink);box-shadow:inset 0 -1px 0 var(--gilt-a45),var(--rim-light),0 2px 0 var(--ink-950),0 8px 22px var(--shade-a35)}
.topbar-side{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.topbar-side.right{justify-content:flex-end}
.topbar-sep{width:1px;height:26px;flex:none;background:linear-gradient(transparent,var(--gilt-a45),transparent)}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.brand b{font:850 .95rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;background:var(--mat-gilt);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 var(--shade-a60))}
.planet-switch{display:flex;flex-direction:column;gap:2px;padding:4px 10px;border-radius:var(--r-md);background:var(--mat-ink-raised);box-shadow:var(--hairline-gilt),var(--rim-light);border:0;cursor:pointer;text-align:left;min-width:0}
.planet-switch b{font:var(--t-title-s);color:var(--parch-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.planet-switch small{font:700 .66rem/1 var(--font-ui);color:var(--text-on-ink-muted);letter-spacing:.04em}
.topbar-centre{display:flex;align-items:center;gap:14px;flex:none}
.medallions{display:flex;align-items:center;gap:10px}
.medal{position:relative;display:flex;padding:0;background:none;border:0;cursor:pointer}
.medal-ring{display:block;width:54px;height:54px;padding:3px;border-radius:50%;background:var(--mat-gilt-ring);box-shadow:var(--edge-ink),var(--shadow-1);transition:width var(--dur-2) var(--ease-spring),height var(--dur-2) var(--ease-spring),box-shadow var(--dur-2),transform var(--dur-1)}
.medal-face{display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--parch-50),var(--parch-300));box-shadow:inset 0 0 0 1.5px var(--ink-800),inset 0 -4px 6px var(--shade-a18)}
.medal-face canvas{display:block;width:100%;height:100%}
.medal:hover .medal-ring{transform:translateY(-1px);box-shadow:var(--edge-ink),0 0 10px var(--gilt-a70),var(--shadow-1)}
.medal.active .medal-ring{width:60px;height:60px;padding:4px;box-shadow:var(--edge-ink),var(--glow-gilt),var(--shadow-1)}
.medal:focus-visible{outline:none}
.medal:focus-visible .medal-ring{outline:2px solid var(--focus);outline-offset:2px}
.coin-medal{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;background:none;border:0;cursor:pointer}
.coin-medal .medal-ring{width:38px;height:38px;padding:2px}
.coin-medal .medal-face{display:grid;place-items:center}
.coin-medal .icon{width:24px;height:24px}
.coin-medal > b{font:850 .74rem/1 var(--font-ui);color:var(--text-on-ink);text-shadow:0 1px 0 var(--ink-950)}
.topbar-btn{position:relative;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-md);background:var(--mat-ink-raised);box-shadow:var(--hairline-gilt),var(--rim-light),0 2px 0 var(--shade-a45);color:var(--parch-100);cursor:pointer}
.topbar-btn:hover{background:var(--mat-ink-hover)}
.topbar-btn[aria-pressed="true"]{box-shadow:var(--hairline-gilt-strong),0 0 10px var(--gilt-a45)}
.topbar-btn svg{width:20px;height:20px}
.clock{font:800 .82rem/1 var(--font-ui);color:var(--text-on-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.clock small{display:block;font:700 .62rem/1.2 var(--font-ui);color:var(--text-on-ink-muted);letter-spacing:.04em}

/* tooltip */
.tip{position:absolute;z-index:200;width:max-content;max-width:240px;padding:8px 12px 9px;font:var(--t-body-s);color:var(--text);background:var(--mat-parchment);border-radius:var(--r-md);box-shadow:var(--edge-ink),var(--shadow-2);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-1),transform var(--dur-1)}
.tip b{display:block;font:var(--t-title-s);color:var(--text-strong);margin-bottom:2px}
.tip.right{left:calc(100% + 14px);top:50%;transform:translate(-4px,-50%)}
.tip.below{top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px)}
.has-tip:hover > .tip,.has-tip:focus-visible > .tip{opacity:1;visibility:visible}
.has-tip:hover > .tip.right,.has-tip:focus-visible > .tip.right{transform:translate(0,-50%)}
.has-tip:hover > .tip.below,.has-tip:focus-visible > .tip.below{transform:translate(-50%,0)}

/* ribbon */

/* alarm */
.alarm{position:fixed;top:calc(var(--topbar-height) + var(--ribbon-height) + 30px);left:50%;transform:translateX(-50%);z-index:101;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border:0;border-radius:var(--r-full);background:var(--mat-crimson);color:var(--parch-50);font:800 .82rem/1 var(--font-ui);box-shadow:var(--edge-ink),0 0 0 4px var(--crimson-a25),0 0 22px var(--crimson-a55);cursor:pointer;animation:alarm 1.6s ease-in-out infinite}
.alarm .icon{width:22px;height:22px}
.alarm b{font-variant-numeric:tabular-nums}
.season-over{position:fixed;top:calc(var(--topbar-height) + var(--ribbon-height) + 30px);left:50%;transform:translateX(-50%);z-index:102;display:flex;gap:14px;align-items:flex-start;width:min(560px,calc(100vw - 32px));padding:12px 14px;border-radius:var(--r-md);background:var(--mat-parchment);box-shadow:var(--edge-ink),inset 4px 0 0 var(--verdant-500),var(--shadow-3);font:700 .84rem/1.4 var(--font-ui);color:var(--text-strong);animation:pop var(--dur-3) var(--ease-out)}
.season-over b{font:800 1rem/1.2 var(--font-display, var(--font-ui))}
.season-over p{margin:4px 0 0}
.season-over-actions{display:flex;flex-direction:column;gap:6px;flex:none}
@keyframes alarm{50%{box-shadow:var(--edge-ink),0 0 0 7px var(--crimson-a25),0 0 30px var(--crimson-a55)}}

/* rail */
.rail{position:fixed;left:var(--gap);top:150px;z-index:100;display:flex;flex-direction:column;gap:7px;padding:7px;border-radius:var(--r-lg);background:var(--mat-ink);box-shadow:0 0 0 2px var(--ink-950),var(--hairline-gilt),var(--rim-light),var(--shadow-3)}
.rail-btn{position:relative;width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-md);background:var(--mat-ink-raised);box-shadow:var(--hairline-gilt),var(--rim-light),0 2px 0 var(--shade-a45);cursor:pointer;transition:background var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.rail-btn .icon{width:30px;height:30px}
.rail-btn:hover,.rail-btn:focus-visible{background:var(--mat-ink-hover);box-shadow:var(--hairline-gilt-strong),var(--rim-light),0 2px 0 var(--shade-a45),0 0 14px var(--gilt-a30);transform:translateY(-1px)}
.badge{min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;font:900 .68rem/1 var(--font-ui);color:var(--parch-50);background:var(--crimson-500);border-radius:var(--r-full);box-shadow:0 0 0 2px var(--ink-800)}
.rail-btn > .badge{position:absolute;top:-5px;right:-6px}

/* side column */
.side{position:fixed;right:var(--gap);top:150px;z-index:100;width:var(--side-width);display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-height:calc(100% - 200px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgb(255 255 255 / 35%) transparent}
.side::-webkit-scrollbar{display:none}
.move-card{--mc:var(--verdant-500);position:relative;width:236px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 22px;border:0;border-radius:var(--r-sm);background:rgb(255 255 255 / 66%);box-shadow:0 0 0 1px var(--light-a70),var(--shadow-1);cursor:pointer;text-align:left;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.move-card.out{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%)}
.move-card:hover{background:var(--light-a85)}
.move-card .chev{position:absolute;left:12px;top:50%;width:0;height:0;transform:translateY(-50%);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:8px solid var(--mc)}
.move-card.out .chev{border-right:0;border-left:8px solid var(--mc)}
.move-card .icon{width:22px;height:22px}
.move-card .t{flex:1;min-width:0;font:800 .8rem/1.1 var(--font-ui);color:var(--text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-card .t small{display:block;font:700 .66rem/1.1 var(--font-ui);color:var(--text-muted)}
.move-card .c{font:850 .82rem/1 var(--font-ui);color:var(--text-strong);font-variant-numeric:tabular-nums}
.move-card .n{font:850 .82rem/1 var(--font-ui);padding-left:8px;box-shadow:-1px 0 0 var(--shade-a25);color:var(--text-strong)}
.move-card.foe{--mc:var(--crimson-500);background:rgb(255 236 230 / 80%)}
.move-card.foe .c{color:var(--crimson-600)}
.move-card.atk{--mc:var(--gilt-600)}
.orbit{width:236px;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.orbit li{list-style:none;display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:var(--r-sm);background:rgb(255 255 255 / 62%);font:700 .78rem/1.2 var(--font-ui);color:var(--text-strong)}
.orbit li b{margin-left:auto;font:850 .8rem/1 var(--font-ui);font-variant-numeric:tabular-nums}
.orbit li .icon{width:20px;height:20px}
.orbit ul{margin:0;padding:0;display:flex;flex-direction:column;gap:2px}

/* builders dock */
.dock{position:fixed;bottom:var(--gap);left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:stretch;gap:2px;padding:12px 6px 6px;border-radius:var(--r-lg);background:var(--mat-ink);box-shadow:0 0 0 2px var(--ink-950),var(--hairline-gilt),var(--rim-light),var(--shadow-2);max-width:calc(100% - 2 * var(--gap))}
.dock-group{position:relative;display:flex;gap:6px;padding:0 8px}
.dock-group + .dock-group{box-shadow:-1px 0 0 var(--gilt-a30)}
.dock-tag{position:absolute;top:-19px;left:50%;transform:translateX(-50%);padding:2px 8px;font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;white-space:nowrap;color:var(--text-on-ink-muted);background:var(--ink-900);border-radius:var(--r-full);box-shadow:var(--hairline-gilt);pointer-events:none}
.dock-tile{position:relative;width:60px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:none;border:0;cursor:pointer}
.dock-art{position:relative;width:52px;height:52px;overflow:hidden;border-radius:var(--r-md);background:var(--mat-meadow);box-shadow:0 0 0 2px var(--ink-950),var(--hairline-gilt),inset 0 0 0 1px var(--light-a45);transition:box-shadow var(--dur-1),transform var(--dur-1)}
.dock-art canvas{display:block;width:100%;height:100%}
.dock-tile:hover .dock-art,.dock-tile:focus-visible .dock-art{transform:translateY(-1px);box-shadow:0 0 0 2px var(--ink-950),var(--hairline-gilt-strong),0 0 12px var(--gilt-a45)}
.dock-tile:focus-visible{outline:none}
.dock-tile:focus-visible .dock-art{outline:2px solid var(--focus);outline-offset:2px}
.dock-level{position:absolute;top:38px;right:0;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;font:var(--t-num-s);color:var(--parch-50);background:var(--ink-800);border-radius:var(--r-full);box-shadow:0 0 0 1.5px var(--ink-950),inset 0 0 0 1px var(--gilt-a45)}
.dock-level.short{color:var(--ink-950);background:var(--gilt-400)}
.dock-level.reserved{background:var(--verdant-600)}
.dock-time{font:var(--t-num-s);color:var(--text-on-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.dock-progress{position:absolute;left:4px;right:4px;bottom:3px;height:4px;border-radius:2px;background:var(--shade-a45);overflow:hidden}
.dock-progress i{display:block;height:100%;background:var(--mat-gilt)}
.dock-tile.waiting .dock-art{filter:saturate(.6) brightness(.85)}
.dock-tile.empty .dock-art{background:var(--ink-900);box-shadow:0 0 0 2px var(--ink-950),inset 0 0 0 1.5px var(--gilt-a30);display:grid;place-items:center;color:var(--text-on-ink-muted);font:800 1.3rem/1 var(--font-ui)}
.dock-tile.empty .dock-time{color:var(--text-on-ink-muted)}
.dock-x{position:absolute;top:-6px;right:-2px;width:20px;height:20px;display:none;place-items:center;border:0;border-radius:50%;background:var(--crimson-500);color:var(--parch-50);font:900 .75rem/1 var(--font-ui);box-shadow:0 0 0 1.5px var(--ink-950);cursor:pointer;padding:0}
.dock-tile:hover .dock-x,.dock-tile:focus-within .dock-x{display:grid}

/* advisor */
.advisor{position:fixed;left:var(--gap);bottom:var(--gap);z-index:99;display:flex;align-items:flex-end;gap:8px;max-width:330px}
.advisor-portrait{width:64px;height:64px;flex:none;border-radius:50%;padding:3px;background:var(--mat-gilt-ring);box-shadow:var(--edge-ink),var(--shadow-2);border:0;cursor:pointer}
.advisor-portrait canvas{width:100%;height:100%;border-radius:50%;display:block;background:radial-gradient(circle at 40% 35%,#3a4a86,#1a2148)}
.advisor-bubble{position:relative;margin-bottom:22px;padding:10px 12px;background:var(--mat-parchment);border-radius:var(--r-md);box-shadow:var(--edge-ink),var(--shadow-2);font:var(--t-body-s);color:var(--text)}
.advisor-bubble::after{content:"";position:absolute;left:-8px;bottom:12px;border:6px solid transparent;border-right-color:var(--ink-800)}
.advisor-title{display:block;font:var(--t-title-s);color:var(--text-strong);margin-bottom:2px}
.advisor-link{display:inline-block;margin-top:6px;padding:0;border:0;background:none;font:800 .78rem/1 var(--font-ui);color:var(--verdant-600);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.advisor.closed .advisor-bubble{display:none}
.advisor-hide{position:absolute;top:4px;right:4px;width:20px;height:20px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);opacity:.55;font:900 .7rem/1 var(--font-ui);cursor:pointer}
.advisor-hide:hover,.advisor-hide:focus-visible{opacity:1;background:rgba(0,0,0,.08)}
.advisor-title{padding-right:18px}

/* quick card over a level badge */
.quick{position:fixed;z-index:210;width:260px;padding:10px 12px 11px;background:var(--mat-parchment);border-radius:var(--r-md);box-shadow:var(--edge-ink),var(--shadow-3);pointer-events:none;transform:translate(-50%,calc(-100% - 18px))}
.quick.below{transform:translate(-50%,22px)}
.quick::after{content:"";position:absolute;left:calc(50% + var(--tip,0px));bottom:-8px;transform:translateX(-50%);border:8px solid transparent;border-bottom:0;border-top-color:var(--ink-800)}
.quick.below::after{bottom:auto;top:-8px;border:8px solid transparent;border-top:0;border-bottom-color:var(--ink-800)}
.quick-title{font:var(--t-title-m);color:var(--text-strong)}
.quick-tagline{font:var(--t-body-s);color:var(--text-muted);margin-top:1px}
.quick-row{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font:700 .78rem/1.2 var(--font-ui);color:var(--text)}
.quick-row b{font:850 .8rem/1.2 var(--font-ui);white-space:nowrap;color:var(--text-strong);font-variant-numeric:tabular-nums}
.quick-row b .up{color:var(--verdant-600)}
.quick-note{margin-top:7px;padding-top:6px;border-top:1px solid var(--shade-a18);font:700 .76rem/1.3 var(--font-ui);color:var(--crimson-500)}
.quick-note.good{color:var(--verdant-600)}

/* Prototype frame: buttons, chips, dialogs, the construct dialog. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:9px 16px;font:var(--t-button);color:var(--text-strong);background:var(--mat-parchment);border:0;border-radius:var(--r-md);box-shadow:var(--edge-ink),var(--shadow-1);cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;transition:transform var(--dur-1),filter var(--dur-1)}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(1px)}
.btn.primary{color:#fff;background:var(--mat-verdant);text-shadow:0 1px 0 var(--verdant-700)}
.btn.war{color:#fff;background:var(--mat-crimson);text-shadow:0 1px 0 var(--crimson-700)}
.btn.ink{color:var(--text-on-ink);background:var(--mat-ink-raised);box-shadow:0 0 0 2px var(--ink-950),var(--hairline-gilt)}
.btn.sm{min-height:30px;padding:6px 11px;font-size:.8rem}
.btn.block{width:100%}
.btn:disabled{cursor:not-allowed;filter:grayscale(.6) opacity(.65);transform:none}
.btn.charging{color:var(--text-strong);background:var(--parch-200);cursor:default}
.btn.charging .fill{position:absolute;inset:0;background:var(--verdant-a45);transform-origin:left;transition:transform .6s}
.btn.charging span{position:relative}
.btn .icon{width:18px;height:18px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--r-full);font:800 .72rem/1.2 var(--font-ui);background:var(--parch-300);color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--shade-a18);white-space:nowrap}
.chip.ok{background:#dcefc4;color:var(--verdant-700)}
.chip.bad{background:#f6d4cc;color:var(--crimson-600)}
.chip.gold{background:var(--gilt-200);color:var(--gilt-700)}
.chip.ink{background:var(--ink-800);color:var(--text-on-ink)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* dialogs */
.modal-layer{position:fixed;inset:0;z-index:1000;display:grid;place-items:start center;padding:calc(var(--topbar-height) + 18px) 16px 16px}
.modal-backdrop{position:absolute;inset:0;background:rgb(20 14 10 / 55%);animation:fade var(--dur-2)}
.modal{position:relative;width:min(var(--modal-w),100%);height:min(var(--modal-h),calc(100dvh - var(--topbar-height) - 34px));display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--ink-800);box-shadow:var(--edge-ink),var(--shadow-dialog);animation:pop var(--dur-3) var(--ease-out);overflow:hidden}
.modal.sm{width:min(var(--modal-w-sm),100%);height:auto}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}}
@keyframes fade{from{opacity:0}}
.modal-head{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;background:var(--mat-ink);box-shadow:inset 0 -1px 0 var(--gilt-a45),var(--rim-light)}
.crest{position:relative;width:48px;height:48px;flex:none;border-radius:var(--r-md);background:var(--mat-meadow);box-shadow:0 0 0 2px var(--ink-950),var(--hairline-gilt)}
.crest.space{background:var(--mat-space-stage)}
.crest canvas{width:100%;height:100%;display:block;border-radius:inherit}
.crest-level{position:absolute;right:-6px;bottom:-6px;min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;font:var(--t-num-s);color:var(--ink-800);background:var(--mat-gilt);border-radius:var(--r-full);box-shadow:0 0 0 2px var(--ink-950)}
.modal-title{flex:1;min-width:0}
.modal-title h2{margin:0;font:var(--t-title-l);color:var(--parch-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.modal-title .sub{font:var(--t-body-s);color:var(--text-on-ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.esc{font:800 .66rem/1 var(--font-ui);color:var(--text-on-ink-muted);padding:3px 6px;border-radius:var(--r-xs);box-shadow:var(--hairline-gilt)}
.modal-close{width:40px;height:40px;flex:none;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-md);background:var(--mat-ink-raised);box-shadow:var(--hairline-gilt),var(--rim-light);color:var(--parch-100);cursor:pointer;font:900 1.1rem/1 var(--font-ui)}
.modal-close:hover{background:var(--mat-ink-hover)}
.modal-body{flex:1;min-height:0;overflow:auto;background:var(--mat-parchment);box-shadow:inset 0 0 0 1px var(--gilt-a70)}
.mtabs{position:sticky;top:0;z-index:2;display:flex;gap:4px;padding:0 14px;background:var(--parch-100);box-shadow:inset 0 -1px 0 var(--shade-a18);overflow-x:auto}
.mtab{padding:12px 12px 10px;border:0;background:none;font:800 .85rem/1 var(--font-ui);color:var(--text-muted);cursor:pointer;box-shadow:inset 0 -3px 0 transparent;white-space:nowrap}
.mtab.active{color:var(--text-strong);box-shadow:inset 0 -3px 0 var(--gilt-500)}
.modal-pad{--pad-x:16px;--pad-y:16px;padding:var(--pad-y) var(--pad-x);display:flex;flex-direction:column;gap:12px;flex:1 0 auto}
/* The body fills the dialog and its content area fills the body, so pagers (Rankings, Reports) sit
   pinned at the bottom, staying in view while it scrolls. (The dialog's height: 16-compact.css.) */
.modal-body{display:flex;flex-direction:column}
.modal-body > *{flex-shrink:0}
.modal-pad > .rank-pager,.modal-pad > .report-pager{position:sticky;bottom:calc(-1 * var(--pad-y));z-index:3;margin:auto calc(-1 * var(--pad-x)) calc(-1 * var(--pad-y));padding:10px var(--pad-x);background:var(--card);box-shadow:0 -2px 0 var(--card-line)}
.overline{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}
.card{background:var(--light-a60);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--gilt-a70);padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{margin:0;font:var(--t-title-m);color:var(--text-strong)}
.delta{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px 10px;align-items:baseline;font:700 .85rem/1.2 var(--font-ui)}
.delta span{color:var(--text-muted)}
.delta b{font:850 .9rem/1 var(--font-ui);color:var(--text-strong);font-variant-numeric:tabular-nums;text-align:right}
.delta .plus{color:var(--verdant-600);font:850 .8rem/1 var(--font-ui);text-align:right}
.delta .arrow{color:var(--text-muted);text-align:center}
.cost-tiles{display:flex;flex-wrap:wrap;gap:8px}
.cost-tile{display:flex;align-items:center;gap:6px;padding:5px 9px 5px 6px;border-radius:var(--r-md);background:var(--parch-50);box-shadow:inset 0 0 0 1px var(--shade-a18);font:850 .85rem/1 var(--font-ui);color:var(--text-strong);font-variant-numeric:tabular-nums}
.cost-tile .icon{width:22px;height:22px}
.cost-tile small{display:block;font:800 .68rem/1 var(--font-ui);color:var(--crimson-500);margin-top:2px}
.cost-tile.short{background:#fbe3dc;box-shadow:inset 0 0 0 1px var(--crimson-a55)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font:700 .84rem/1.3 var(--font-ui)}
.facts dt{color:var(--text-muted)}
.facts dd{margin:0;text-align:right;color:var(--text-strong);font-variant-numeric:tabular-nums}
.levels{width:100%;border-collapse:collapse;font:700 .8rem/1.2 var(--font-ui)}
.levels th{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);text-align:right;padding:5px 6px;border-bottom:1px solid var(--shade-a18)}
.levels td{text-align:right;padding:6px;border-bottom:1px solid var(--shade-a18);font-variant-numeric:tabular-nums;color:var(--text)}
.levels th:first-child,.levels td:first-child{text-align:left}
.levels tr.next td{color:var(--text-strong);background:var(--gilt-200)}
.callout{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:var(--r-md);font:700 .8rem/1.35 var(--font-ui)}
.callout.bad{background:#f6d4cc;color:var(--crimson-600)}
.callout.good{background:#dcefc4;color:var(--verdant-700)}
.reqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font:700 .82rem/1.2 var(--font-ui)}
.reqs li{display:flex;align-items:center;gap:8px}
.reqs li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;box-shadow:0 0 0 2px var(--crimson-500) inset}
.reqs li.ok{color:var(--text-muted)}
.reqs li.ok::before{background:var(--verdant-500);box-shadow:0 0 0 2px var(--ink-800) inset}
.reqs li span{margin-left:auto;font-variant-numeric:tabular-nums}
.detail-art{height:170px;border-radius:var(--r-md);background:var(--mat-plinth);box-shadow:inset 0 0 0 1px var(--gilt-a70);display:grid;place-items:center}
.detail-art canvas{width:280px;height:170px;max-width:100%}

/* construct */
.construct{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
.construct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.bcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0 0 8px;border:0;border-radius:var(--r-md);background:var(--mat-plinth);box-shadow:inset 0 0 0 1px var(--gilt-a70),var(--shadow-1);cursor:pointer;overflow:hidden;transition:transform var(--dur-1),box-shadow var(--dur-1)}
.bcard:hover{transform:translateY(-2px)}
.bcard canvas{width:100%;aspect-ratio:13/10;height:auto;display:block}
.bcard .label{font:var(--t-title-s);color:var(--text-strong);text-align:center;padding:0 6px}
.bcard.selected{box-shadow:inset 0 0 0 2px var(--gilt-500),var(--glow-gilt)}
.bcard.locked{background:var(--mat-plinth-locked)}
.bcard.locked canvas{filter:grayscale(1) opacity(.6)}
.bcard .check{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:var(--verdant-500);box-shadow:0 0 0 2px var(--ink-800);display:grid;place-items:center;color:#fff;font:900 .7rem/1 var(--font-ui)}
.bcard .padlock{position:absolute;top:6px;right:6px}

/* Prototype frame: galaxy map HUD and the send-fleet dialog. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* galaxy map HUD */
.hover-card{position:fixed;z-index:205;width:250px;padding:10px 12px 11px;background:var(--mat-parchment);border-radius:var(--r-md);box-shadow:var(--edge-ink),var(--shadow-3);pointer-events:none;font:700 .8rem/1.3 var(--font-ui)}
.hc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hc-title{font:var(--t-title-m);color:var(--text-strong)}
.hc-coords{font:850 .78rem/1 var(--font-ui);color:var(--text-muted);font-variant-numeric:tabular-nums}
.hc-stats{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin-top:6px}
.hc-stats dt{color:var(--text-muted)}
.hc-stats dd{margin:0;text-align:right;color:var(--text-strong);font-variant-numeric:tabular-nums}

/* send fleet */
.send-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ship-cell{display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 8px;align-items:center;padding:8px;border-radius:var(--r-md);background:var(--parch-50);box-shadow:inset 0 0 0 1px var(--shade-a18)}
.ship-cell canvas{grid-row:1/3;width:36px;height:24px}
.ship-cell b{font:var(--t-title-s);color:var(--text-strong)}
.ship-cell .home{font:800 .72rem/1 var(--font-ui);color:var(--sky-500);background:none;border:0;padding:0;cursor:pointer;text-align:left;text-decoration:underline;text-underline-offset:2px}
.choices{display:flex;flex-wrap:wrap;gap:6px}
.choice{padding:7px 12px;border:0;border-radius:var(--r-full);background:var(--parch-50);box-shadow:inset 0 0 0 1.5px var(--shade-a18);font:800 .8rem/1 var(--font-ui);color:var(--text);cursor:pointer}
.choice.active{background:var(--ink-800);color:var(--gilt-300);box-shadow:0 0 0 2px var(--gilt-500)}
.choice:disabled{opacity:.45;cursor:not-allowed}
.plates{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:14px;border-radius:var(--r-md);background:var(--mat-space-stage);box-shadow:inset 0 0 0 1px var(--gilt-a70)}
.plate{padding:8px 12px;background:var(--mat-parchment);border-radius:var(--r-md);box-shadow:var(--edge-ink)}
.plate b{display:block;font:var(--t-title-s);color:var(--text-strong)}
.plate small{font:700 .74rem/1.2 var(--font-ui);color:var(--text-muted)}
.plates .vs{font:900 1.2rem/1 var(--font-display);color:var(--gilt-300)}
.trip{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font:850 .9rem/1 var(--font-ui);color:var(--text-strong);font-variant-numeric:tabular-nums}
.trip span{color:var(--text-muted);font-weight:700}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.rep{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:var(--r-md);background:var(--light-a60);box-shadow:inset 0 0 0 1px var(--shade-a18)}
.rep .chip{grid-row:1/3}
.rep b{font:var(--t-title-s);color:var(--text-strong)}
.rep.fresh{box-shadow:inset 0 0 0 2px var(--star),0 0 0 0 transparent;background:var(--star-soft)}
.rank-table th:nth-child(2),.rank-table td:nth-child(2){text-align:left}
.rank-table tr.you td{font-weight:850;color:var(--ink);background:var(--star-soft)}
.reshape-row{display:flex;flex-wrap:wrap;gap:6px}
.rep span{font:600 .78rem/1.3 var(--font-ui);color:var(--text-muted)}
.rep time{grid-row:1/3;font:800 .74rem/1 var(--font-ui);color:var(--text-muted)}
.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 20px}
.keys div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--shade-a18);font:700 .84rem/1.2 var(--font-ui)}
.kbd{font:850 .72rem/1 var(--font-ui);padding:3px 7px;border-radius:var(--r-xs);background:var(--ink-800);color:var(--parch-50);white-space:nowrap}

.toasts{position:fixed;right:var(--gap);bottom:120px;z-index:300;display:flex;flex-direction:column;gap:6px;align-items:flex-end;pointer-events:none}
.toast{max-width:320px;padding:9px 14px;border-radius:var(--r-md);background:var(--mat-parchment);box-shadow:var(--edge-ink),var(--shadow-3);font:700 .82rem/1.35 var(--font-ui);color:var(--text-strong);animation:pop var(--dur-3) var(--ease-out)}
.toast.good{box-shadow:var(--edge-ink),inset 4px 0 0 var(--verdant-500),var(--shadow-3)}
.toast.bad{box-shadow:var(--edge-ink),inset 4px 0 0 var(--crimson-500),var(--shadow-3)}

.page.view-galaxy .advisor{display:none}
.page:not(.view-galaxy) .map-controls,.page:not(.view-galaxy) .minimap{display:none}

/* Prototype frame: responsive rules and reduced motion for all of the above. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
@media (max-width:1180px){ :root{--side-width:250px;--res-width:120px} .clock small{display:none} }
@media (max-width:980px){ .side{display:none} .brand b{display:none} }
@media (max-width:760px){
  :root{--gap:10px;--res-width:104px;--topbar-height:58px}
  .rail,.advisor,.census,.topbar-btn.snd,.clock{display:none}
  .medal-ring{width:44px;height:44px}
  .medal.active .medal-ring{width:48px;height:48px}
  .dock{padding:12px 4px 4px}
  .dock-group{padding:0 4px;gap:4px}
  .dock-tile{width:52px}
  .dock-art{width:46px;height:46px}
  .dock-level{top:32px}
  .minimap{display:none!important}
  .map-controls{top:130px}
  .modal-layer{padding:0;place-items:end stretch}
  .modal{width:100%;height:calc(100dvh - 40px);border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .two,.construct{grid-template-columns:minmax(0,1fr)}
  .esc{display:none}
  .keys{grid-template-columns:minmax(0,1fr)}
  .toasts{bottom:96px;left:var(--gap);align-items:stretch}
}
@media (max-width:440px){ .planet-switch,.planet-step{display:none} }
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }

/* Cozy Cosmos skin: the Night theme tokens over the old names, body, focus. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ================= Cozy Cosmos skin (design-library/project/tokens.json, Night theme) ================= */
:root{
  color-scheme: dark;
  --sky:#1a1642; --sky-deep:#110e2e; --sky-glow:#3b2f86; --star-dot:#fff3cf; --on-sky:#f4f0ff; --on-sky-soft:#b8afe8;
  --chrome:#2a2363; --chrome-raised:#3a3180; --chrome-hover:#4a3f9a; --chrome-line:#6a5fc0; --on-chrome:#f6f2ff; --on-chrome-soft:#c6bdf2;
  --card:#fbf8ff; --card-sunk:#efe9ff; --card-line:#ddd3fb; --control-line:#8478c2; --ink:#2a2154; --ink-soft:#5b5189;
  --star:#ffcf5c; --star-soft:#ffe9a8; --star-deep:#875800; --on-star:#3d2a00;
  --mint:#5fdcb0; --mint-deep:#15694a; --on-mint:#0d3527; --coral:#ff9a94; --coral-deep:#ad2f45; --on-coral:#4a1020;
  --rose:#ff9cc6; --locked:#d5cfee; --res-helium:#bba2ff; --focus:#8b7bff;
  --lip:0 4px 0 #120e33; --lip-sm:0 3px 0 #120e33; --shadow-card:0 3px 0 #120e33,0 14px 30px rgb(9 6 36 / 45%);
  /* the old Ink & Gilt names, now pointing at Cozy Cosmos values */
  --ink-950:#110e2e; --ink-900:#1a1642; --ink-800:#2a2154; --ink-600:#5b5189; --ink-500:#8478c2;
  --parch-50:#fbf8ff; --parch-100:#f6f2ff; --parch-200:#efe9ff; --parch-300:#ddd3fb; --parch-400:#c4b8f0;
  --gilt-200:#fff4cf; --gilt-300:#ffe9a8; --gilt-400:#ffcf5c; --gilt-500:#f5b83d; --gilt-600:#c98a12; --gilt-700:#875800;
  --crimson-300:#ffb3ae; --crimson-400:#ff9a94; --crimson-500:#ad2f45; --crimson-600:#8f2238; --crimson-700:#4a1020;
  --verdant-300:#a6efd3; --verdant-400:#5fdcb0; --verdant-500:#3cc296; --verdant-600:#15694a; --verdant-700:#0d3527;
  --sky-400:#74caff; --sky-500:#4a8fe0;
  --gilt-a30:rgb(255 207 92 / 30%); --gilt-a45:rgb(255 207 92 / 45%); --gilt-a70:rgb(255 207 92 / 70%); --gilt-a85:rgb(255 207 92 / 85%);
  --shade-a18:rgb(10 6 40 / 18%); --shade-a25:rgb(10 6 40 / 25%); --shade-a35:rgb(10 6 40 / 35%); --shade-a45:rgb(10 6 40 / 45%); --shade-a60:rgb(10 6 40 / 60%);
  --light-a30:rgb(255 255 255 / 30%); --light-a45:rgb(255 255 255 / 45%); --light-a60:rgb(255 255 255 / 60%); --light-a70:rgb(255 255 255 / 70%); --light-a85:rgb(255 255 255 / 85%);
  --crimson-a25:rgb(255 154 148 / 25%); --crimson-a55:rgb(255 154 148 / 55%); --verdant-a45:rgb(95 220 176 / 45%);
  --text-strong:#2a2154; --text:#3d3470; --text-muted:#5b5189; --text-on-ink:#f6f2ff; --text-on-ink-muted:#c6bdf2;
  --state-warn:#875800;
  --res-ore:#f6a96f; --res-crystal:#74caff; --res-gas:#bba2ff; --res-energy:#ffcf5c;
  --map-ground:#1a1642; --map-ground-2:#211c52;
  --mat-ink:#2a2363; --mat-ink-raised:#3a3180; --mat-ink-hover:#4a3f9a;
  --mat-parchment:#fbf8ff; --mat-gilt:#ffcf5c; --mat-gilt-ring:#ffcf5c; --mat-crimson:#ff9a94; --mat-verdant:#5fdcb0;
  --mat-meadow:#efe9ff; --mat-plinth:#efe9ff; --mat-plinth-locked:#d5cfee; --mat-space-stage:#1a1642;
  --stripes-gilt:repeating-linear-gradient(-45deg,#ffcf5c 0 6px,#ffe9a8 6px 12px);
  --hairline-gilt:inset 0 0 0 1.5px #6a5fc0; --hairline-gilt-strong:inset 0 0 0 2px #ffcf5c;
  --rim-light:inset 0 1px 0 rgb(255 255 255 / 8%); --edge-ink:0 0 0 2px #2a2154;
  --shadow-1:0 4px 0 #120e33; --shadow-2:0 3px 0 #120e33,0 14px 30px rgb(9 6 36 / 45%); --shadow-3:0 3px 0 #120e33,0 18px 40px rgb(9 6 36 / 50%);
  --shadow-dialog:0 6px 0 #0d0a26,0 30px 70px rgb(6 4 24 / 60%);
  --glow-gilt:0 0 0 3px #ffcf5c,0 0 20px rgb(255 207 92 / 55%);
  --well:inset 0 2px 3px rgb(42 33 84 / 16%);
  --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:28px;
  --font-display:"Fredoka","Baloo 2","Arial Rounded MT Bold",system-ui,sans-serif;
  --font-ui:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;
  --t-title-xl:600 1.75rem/1.1 var(--font-display); --t-title-l:600 1.5rem/1.15 var(--font-display); --t-title-m:600 1.125rem/1.2 var(--font-display); --t-title-s:600 .9375rem/1.2 var(--font-display);
  --t-body:500 .9375rem/1.45 var(--font-ui); --t-body-s:600 .8125rem/1.38 var(--font-ui); --t-label:800 .75rem/1.2 var(--font-ui);
  --t-num-l:800 1.125rem/1 var(--font-ui); --t-num:800 .9375rem/1 var(--font-ui); --t-num-s:800 .75rem/1 var(--font-ui); --t-button:800 .9375rem/1 var(--font-ui);
  --tracking-label:.06em; --dur-1:120ms; --dur-2:220ms; --dur-3:420ms;
}
body{background:var(--sky-deep);color:var(--text)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* Cozy Cosmos skin: top bar, planet arrows, attack banner, rail, movements and orbit list, builder dock, advisor, quick card. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* top bar */
.topbar{background:var(--chrome);box-shadow:0 2px 0 var(--ink),0 6px 0 #120e33}
.topbar-sep{background:var(--chrome-line);opacity:.7}
.brand b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--star);font:600 1.2rem/1 var(--font-display);letter-spacing:.01em;text-transform:none;filter:none}
.planet-switch{padding:3px 10px;gap:1px;background:var(--chrome-raised);border:2px solid var(--ink);box-shadow:var(--lip-sm);border-radius:var(--r-md)}
.planet-switch:hover{background:var(--chrome-hover)}
.planet-switch-wrap{position:relative;min-width:0;display:flex}
/* The arrows either side of the planet menu: the previous and next planet or moon, round and round. */
.planet-step{position:relative;flex:none;width:30px;height:38px;display:grid;place-items:center;padding:0 0 3px;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--chrome-raised);box-shadow:var(--lip-sm);color:var(--on-chrome);font:800 1.35rem/1 var(--font-ui);cursor:pointer}
.planet-step:hover:not(:disabled){background:var(--chrome-hover)}
.planet-step:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* An arrow with nowhere to go is faded part by part, never with `opacity`: that would fade its
   tooltip as well, and make the button a layer of its own, painted under the rail and the ribbon. */
.planet-step:disabled{cursor:default;color:color-mix(in srgb,var(--on-chrome) 45%,transparent);background:color-mix(in srgb,var(--chrome-raised) 45%,transparent) padding-box;border-color:color-mix(in srgb,var(--ink) 45%,transparent);box-shadow:0 3px 0 rgb(18 14 51 / 45%)}
.planet-nav{display:flex;align-items:center;gap:6px;min-width:0}
/* A steady width, so the right arrow stays put while you click through planets of any name. */
.planet-nav .planet-switch{width:230px}
.target-pick{margin:0 0 12px}
.phalanx-table tr.hostile td{color:var(--coral-deep);font-weight:800}
.watch-table td .chip{margin-left:6px}
.hc-fleet .hc-note{margin:6px 0 0;font:600 .72rem/1.35 var(--font-ui);color:var(--ink-soft)}
.hc-fleet.hostile .hc-title,.hc-fleet.hostile .hc-note{color:var(--coral-deep)}
.planet-foot{margin:2px 4px 0;padding-top:4px;border-top:1px solid var(--card-line);font:600 .68rem/1.3 var(--font-ui);color:var(--ink-soft)}
.planet-switch b{font:600 .9rem/1.1 var(--font-display);color:var(--on-chrome)}
.planet-switch small{font:700 .66rem/1.1 var(--font-ui);color:var(--on-chrome-soft)}
.medal-ring{background:var(--star);border:2px solid var(--ink);box-shadow:var(--lip);padding:3px;box-sizing:border-box}
.medal-face{background:var(--card);box-shadow:inset 0 0 0 2px var(--ink)}
.medal:hover .medal-ring{transform:translateY(-2px);box-shadow:var(--lip)}
.medal.active .medal-ring{box-shadow:var(--lip),var(--glow-gilt)}
.coin-medal b{color:var(--on-chrome);text-shadow:none;font:800 .8rem/1 var(--font-ui)}
.topbar-btn{background:var(--card);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--lip-sm);border-radius:var(--r-md)}
.topbar-btn:hover{background:var(--card-sunk)}
.topbar-btn[aria-pressed="true"]{background:var(--star);color:var(--on-star);box-shadow:var(--lip-sm),var(--glow-gilt)}
.clock{color:var(--on-chrome)}
.clock small{color:var(--on-chrome-soft)}
.badge{color:var(--on-coral);background:var(--coral);box-shadow:0 0 0 2px var(--ink)}
.tip{color:var(--ink-soft);background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.tip b{color:var(--ink);font:600 .95rem/1.2 var(--font-display)}


/* attack banner: calm but clear */
.alarm{color:var(--coral-deep);background:var(--card);border-radius:999px;box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--coral),var(--shadow-card);animation:none!important;font:800 .85rem/1.2 var(--font-ui)}
.alarm b{color:var(--coral-deep)}

/* rail */
.rail{background:var(--chrome);border-radius:var(--r-lg);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.rail-btn{background:var(--card);border:2px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--lip-sm)}
.rail-btn:hover,.rail-btn:focus-visible{background:var(--card-sunk);box-shadow:var(--lip-sm)}

/* movements and orbit list */
.side{padding:6px 8px 12px 10px;box-sizing:border-box}
.move-card{--mc:var(--mint-deep);min-height:46px;height:auto;padding:6px 10px 6px 26px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.move-card.out{clip-path:none}
.move-card:hover{background:var(--card-sunk)}
.move-card .t{color:var(--ink);font:600 .9rem/1.15 var(--font-display)}
.move-card small{color:var(--ink-soft);font:700 .7rem/1.2 var(--font-ui)}
.move-card .c,.move-card .n{color:var(--ink)}
.move-card .n{box-shadow:-2px 0 0 var(--card-line)}
.move-card.foe{--mc:var(--coral-deep);background:var(--card);box-shadow:var(--shadow-card),0 0 0 3px var(--coral)}
.move-card.foe .t,.move-card.foe .c{color:var(--coral-deep)}
.move-card.atk{--mc:var(--star-deep)}
.orbit li{color:var(--ink);background:var(--card);border-radius:var(--r-sm)}

/* builder dock */
.dock{background:var(--chrome);border-radius:var(--r-lg);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.dock-group + .dock-group{box-shadow:-2px 0 0 var(--chrome-line)}
.dock-tag{color:var(--on-chrome);background:var(--chrome);border-radius:999px;box-shadow:0 0 0 2px var(--ink);font:var(--t-label);letter-spacing:var(--tracking-label)}
.dock-art{background:var(--card-sunk);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink)}
.dock-tile:hover .dock-art,.dock-tile:focus-visible .dock-art{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--gilt-a45)}
.dock-level{color:var(--ink);background:var(--card);border-radius:999px;box-shadow:0 0 0 2px var(--ink)}
.dock-level.short{color:var(--on-coral);background:var(--coral)}
.dock-level.reserved{color:var(--on-mint);background:var(--mint)}
.dock-time{color:var(--on-chrome)}
.dock-progress{height:6px;background:rgb(42 33 84 / 30%)}
.dock-progress i{background:var(--stripes-gilt)}
.dock-tile.empty .dock-art{color:var(--on-chrome-soft);background:transparent;box-shadow:none;border:2px dashed var(--chrome-line);box-sizing:border-box}
.dock-tile.empty .dock-time{color:var(--on-chrome-soft)}
.dock-x{color:var(--on-coral);background:var(--coral);box-shadow:0 0 0 2px var(--ink)}

/* advisor */
.advisor-portrait{background:var(--star);box-shadow:0 0 0 2px var(--ink),var(--lip)}
.advisor-portrait canvas{background:radial-gradient(circle at 40% 35%,#4a3f9a,#2a2363)}
.advisor-bubble{color:var(--ink-soft);background:var(--card);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.advisor-bubble::after{border-right-color:var(--ink)}
.advisor-title{color:var(--ink)}
.advisor-link{color:var(--mint-deep)}

/* quick card */
.quick,.hover-card{color:var(--text);background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),var(--shadow-3)}
.quick::after{border-top-color:var(--ink)}
.quick.below::after{border-bottom-color:var(--ink)}
.quick-title,.hc-title{color:var(--ink)}
.quick-tagline,.hc-coords{color:var(--ink-soft)}
.quick-row{color:var(--text)}
.quick-row b{color:var(--ink)}
.quick-row .up{color:var(--mint-deep)}
.quick-note{color:var(--coral-deep);border-top-color:var(--card-line)}
.quick-note.good{color:var(--mint-deep)}

/* Cozy Cosmos skin: buttons and chips, dialogs, galaxy controls, responsive fixes. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* buttons and chips */
.btn{min-height:44px;padding:10px 20px;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px;box-shadow:var(--lip);font:var(--t-button)}
.btn:hover{filter:none;transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:none}
.btn.primary{color:var(--on-mint);background:var(--mint);text-shadow:none}
.btn.war{color:var(--on-coral);background:var(--coral);text-shadow:none}
.btn.ink{color:var(--on-chrome);background:var(--chrome-raised);box-shadow:var(--lip)}
.btn.sm{min-height:36px;padding:6px 14px;font-size:.8125rem}
.btn:disabled{filter:none;opacity:1;color:var(--ink);background:var(--locked);box-shadow:none;transform:translateY(4px)}
.btn.charging{color:var(--ink);background:var(--card-sunk);box-shadow:none;transform:none;overflow:hidden}
.btn.charging .fill{background:var(--verdant-a45)}
.chip{color:var(--ink);background:var(--card-sunk);border-radius:999px;box-shadow:0 0 0 2px var(--ink)}
.chip.ok{color:var(--on-mint);background:var(--mint)}
.chip.bad{color:var(--on-coral);background:var(--coral)}
.chip.gold{color:var(--on-star);background:var(--star)}
.chip.ink{color:var(--on-chrome);background:var(--chrome-raised)}

/* dialogs */
.modal-backdrop{background:rgb(17 14 46 / 70%)}
.modal{overflow:hidden;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-dialog)}
.modal-head{padding:12px 14px 12px 18px;background:var(--chrome);box-shadow:inset 0 -3px 0 var(--ink)}
.crest{margin:6px;background:var(--card-sunk);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--star),0 0 0 7px var(--ink)}
.crest.space{background:var(--sky)}
.crest-level{color:var(--on-star);background:var(--star);border-radius:999px;box-shadow:0 0 0 2px var(--ink)}
.modal-title h2{color:var(--on-chrome);font:var(--t-title-l)}
.modal-title .sub{color:var(--on-chrome-soft)}
.esc{color:var(--on-chrome-soft);border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--chrome-line)}
.modal-close{color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:var(--r-md);box-shadow:var(--lip-sm);font:800 1rem/1 var(--font-ui)}
.modal-close:hover{background:var(--card-sunk)}
.modal-body{background:var(--card);box-shadow:none}
.mtabs{gap:6px;padding:8px 12px;background:var(--card-sunk);box-shadow:inset 0 -2px 0 var(--card-line)}
.mtab{padding:9px 16px;color:var(--ink-soft);border:2px solid transparent;border-radius:999px;box-shadow:none}
.mtab.active{color:var(--ink);background:var(--card);border-color:var(--ink);box-shadow:var(--lip-sm)}
.overline,.muted{color:var(--ink-soft)}
.card{background:var(--card-sunk);border:2px solid var(--card-line);border-radius:var(--r-md);box-shadow:none}
.card h3{color:var(--ink);font:var(--t-title-m)}
.delta span{color:var(--ink-soft)}
.delta b{color:var(--ink)}
.delta .plus{color:var(--mint-deep)}
.cost-tile{color:var(--ink);background:var(--card);border-radius:var(--r-sm);box-shadow:var(--well),inset 0 0 0 1.5px var(--card-line)}
.cost-tile small{color:var(--coral-deep)}
.cost-tile.short{color:var(--coral-deep);background:var(--card);box-shadow:inset 0 0 0 2px var(--coral)}
.facts dt{color:var(--ink-soft)}
.facts dd{color:var(--ink)}
.levels th{color:var(--ink-soft);border-bottom-color:var(--card-line)}
.levels td{color:var(--text);border-bottom-color:var(--card-line)}
.levels tr.next td{color:var(--on-star);background:var(--star-soft)}
.callout.bad{color:var(--coral-deep);background:#ffe4e2}
.callout.good{color:var(--mint-deep);background:#dcf7ee}
.reqs li.ok::before{background:var(--mint);box-shadow:0 0 0 2px var(--ink)}
.detail-art{background:radial-gradient(120% 90% at 50% 100%,#e4dbff,#f6f2ff);border-radius:var(--r-md);box-shadow:inset 0 0 0 2px var(--card-line)}
.bcard{background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--card-line)}
.bcard.selected{box-shadow:0 0 0 2px var(--ink),var(--glow-gilt)}
.bcard.locked{background:var(--locked)}
.check{color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 2px var(--ink)}
.rep{background:var(--card-sunk);border-radius:var(--r-md);box-shadow:none}
.rep b{color:var(--ink)}
.rep span,.rep time{color:var(--ink-soft)}
.kbd{color:var(--on-chrome);background:var(--chrome-raised);border-radius:6px}
.toast{color:var(--ink);background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),var(--shadow-card);font:700 .8125rem/1.4 var(--font-ui)}
.toast.good{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--mint),var(--shadow-card)}
.toast.bad{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--coral),var(--shadow-card)}

/* galaxy controls (scene not redesigned yet) */
.map-box,.minimap{background:var(--chrome);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.choice{color:var(--ink);background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--card-line)}
.choice.active{color:var(--on-chrome);background:var(--chrome-raised);box-shadow:0 0 0 2px var(--ink)}
.ship-cell{background:var(--card-sunk);box-shadow:none}
.plates{background:var(--sky)}
.vs{color:var(--star)}

/* responsive fixes */
@media (max-width:760px){ .census{display:none!important} }

/* Added for the Rust build: census, Stardust and Aether coins, the galaxy map HUD. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ===== added for the Rust build ===== */
.census{display:flex;gap:8px}
/* Stardust and Aether (hud/topbar.rs, Coins): two coins right of the Galaxy medallion, the size of
   Population's (.coin-medal). */
.coins{display:flex;align-items:center;gap:8px}
.coins .coin-medal > b{font-variant-numeric:tabular-nums}

/* galaxy map HUD (base from the prototype, Cozy Cosmos skin) */
.map-controls{position:fixed;right:var(--gap);top:150px;z-index:100;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.map-box{display:flex;gap:6px;align-items:center;padding:6px;border-radius:var(--r-lg);background:var(--chrome);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.map-btn{min-width:36px;height:36px;padding:0 10px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--card);box-shadow:var(--lip-sm);color:var(--ink);font:800 .8rem/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.map-btn:hover{background:var(--card-sunk)}
.map-btn svg{width:18px;height:18px}
.map-btn[aria-pressed="true"]{color:var(--on-star);background:var(--star);box-shadow:var(--lip-sm)}
.levels-dots{display:flex;gap:4px;padding:0 4px}
.levels-dots i{width:8px;height:8px;border-radius:50%;background:var(--chrome-raised);box-shadow:none}
.levels-dots i.on{background:var(--star)}
.map-goto{display:flex;gap:4px;align-items:center}
.map-goto span{color:var(--on-chrome-soft);font:850 .9rem/1 var(--font-ui)}
.minimap{position:fixed;right:var(--gap);bottom:var(--gap);z-index:100;padding:6px;border-radius:var(--r-lg);background:var(--chrome);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.minimap canvas{display:block;width:180px;height:180px;border-radius:var(--r-md);cursor:pointer}
.hover-card{position:fixed;z-index:205;width:250px;padding:10px 12px 11px;pointer-events:none;font:700 .8rem/1.3 var(--font-ui);color:var(--ink);background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),var(--shadow-3)}
.hc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hc-title{font:var(--t-title-m);color:var(--ink)}
.hc-coords{font:850 .78rem/1 var(--font-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hc-stats{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:6px 0 0}
.hc-stats dt{color:var(--ink-soft)}
.hc-stats dd{margin:0;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.map-ring{position:fixed;z-index:206;width:150px;height:150px;transform:translate(-50%,-50%);pointer-events:none}
.ring-face{position:absolute;inset:22px;border-radius:50%;border:10px solid var(--card-sunk);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 2px var(--ink),var(--shadow-3);opacity:.92}
.ring-btn{position:absolute;width:46px;height:46px;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--ink),var(--lip-sm);cursor:pointer;pointer-events:auto;color:var(--ink)}
.ring-btn svg{width:30px;height:30px}
.ring-btn:hover{background:var(--star-soft)}
.ring-btn:disabled{cursor:not-allowed}.ring-btn:disabled svg{opacity:.45;filter:grayscale(.6)}
.ring-btn.ne{left:82%;top:18%;width:40px;height:40px;background:var(--star-soft)}.ring-btn.ne svg{width:26px;height:26px}.ring-btn.ne:hover{background:var(--star)}.ring-btn.top{left:50%;top:6%}.ring-btn.right{left:94%;top:50%}.ring-btn.bottom{left:50%;top:94%}.ring-btn.left{left:6%;top:50%}.ring-btn.centre{left:50%;top:50%}
.ring-btn .tip{left:50%;top:calc(100% + 6px);transform:translate(-50%,0)}
.ring-btn:hover .tip,.ring-btn:focus-visible .tip{opacity:1;visibility:visible}
.ring-name{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);padding:4px 10px;border-radius:999px;color:var(--on-chrome);background:var(--chrome);box-shadow:0 0 0 2px var(--ink);font:var(--t-title-s);white-space:nowrap}
#scene.grab{cursor:grab}
#scene.grab:active{cursor:grabbing}
@media (max-width:760px){ .minimap{display:none!important} .map-controls{top:200px} .map-box[role="group"]{display:none} }

/* Shipyard and Research tabs, Finish now, sending fleets. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Shipyard and Research tabs */
.tab-pane{display:flex;flex-direction:column;gap:12px}
.card h3 .chip{margin-left:8px;vertical-align:2px}
.card h3 .head-actions{float:right;display:flex;gap:6px}
.ship-special{margin:0;padding:6px 9px;border-radius:var(--r-md);background:var(--star-soft);color:var(--on-star);font:700 .76rem/1.35 var(--font-ui)}
.ship-time{font:800 .78rem/1 var(--font-ui);color:var(--ink-soft);white-space:nowrap}
.yard-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.yard-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.yard-row canvas{width:48px;height:32px}
.yard-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.yard-main b{font:var(--t-title-s);color:var(--ink)}
.yard-main span{font:700 .78rem/1.2 var(--font-ui);color:var(--ink-soft)}
.yard-bar{height:8px;border-radius:4px;background:rgb(42 33 84 / 15%);overflow:hidden}
.yard-bar i{display:block;height:100%;background:var(--stripes-gilt);border-radius:4px}
.dock-x.static{position:static;display:grid}
.dock-finish.static{position:static;animation:none}
/* Finish now (free, under 5 minutes left): a bolt on the tile's top left, opposite the cancel cross. */
.dock-finish{position:absolute;top:-6px;left:-2px;z-index:2;width:22px;height:22px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 1.5px var(--ink);animation:dock-finish-in .25s ease-out}
.dock-finish .icon{width:13px;height:13px}
.dock-finish:hover,.dock-finish:focus-visible{filter:brightness(1.08)}
.dock-finish:focus-visible{outline:2px solid var(--mint-deep);outline-offset:2px}
@keyframes dock-finish-in{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.dock-finish{animation:none}}

/* sending fleets */
.send-grid .ship-cell canvas{width:36px;height:24px}
.cargo-cell .icon{grid-row:1/3;width:28px;height:28px;color:var(--c)}
.mission-hint{margin:0;font:600 .8rem/1.35 var(--font-ui)}
.trip{margin-top:14px;font:800 .82rem/1.4 var(--font-ui);color:var(--ink)}
.fleet-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fleet-rows li{display:flex;gap:10px;align-items:center;justify-content:space-between;font:700 .8rem/1.3 var(--font-ui);color:var(--ink)}
.modal-foot{margin-top:14px}
.page.view-galaxy .toasts{bottom:224px}
@media (max-width:760px){ .page.view-galaxy .toasts{bottom:120px} }
.rep .chip{grid-column:1}
.rep b,.rep > span:not(.chip){grid-column:2}
.rep time{grid-column:3;text-align:right;white-space:nowrap}

/* Buildings window, construct dialog, Production window. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Buildings window (OGame-style list of everything you can build) */
.bl-layout{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:16px;align-items:start}
.bl-detail{position:sticky;top:64px;display:flex;flex-direction:column;gap:10px;padding:12px}
.bl-art{height:110px;margin:0}
.bl-info{display:flex;flex-direction:column;gap:10px;min-width:0}
.bl-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bl-head h3{flex:1 1 100%;margin:0;font:var(--t-title-l);color:var(--ink)}
.bl-desc{margin:0;font:600 .85rem/1.4 var(--font-ui)}
.bl-effect{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font:700 .85rem/1.3 var(--font-ui)}
.bl-effect dt{color:var(--ink-soft)}
.bl-effect dd{margin:0;color:var(--ink);font-weight:850;font-variant-numeric:tabular-nums}
.bl-effect dd.arrow{color:var(--ink-soft);font-weight:700}
.bl-effect dd.next{color:var(--mint-deep)}
.bl-price{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.bl-reqs{margin:0}
.bl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bl-actions .callout{flex:1 1 100%}
.bl-note{font:600 .78rem/1.3 var(--font-ui)}
.btn.ghost-link{background:none;border-color:transparent;box-shadow:none;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.btn.ghost-link:hover{color:var(--ink);background:none}
.bl-status{margin:2px 0 0;font:700 .8rem/1.2 var(--font-ui)}
.bl-group{margin-top:12px}
.bl-list{min-width:0}
.bl-group .overline{margin-bottom:8px}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.bl-tile{position:relative;border-radius:var(--r-md);background:var(--card-sunk);border:2px solid var(--card-line);transition:transform var(--dur-1,120ms) ease}
.bl-tile:hover{transform:translateY(-1px)}
.bl-tile.selected{border-color:var(--ink);box-shadow:0 0 0 3px var(--star),var(--lip-sm)}
.bl-tile.unplaced{border-style:dashed}
.bl-tile.locked canvas{filter:grayscale(.85) opacity(.6)}
.bl-pick{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;padding:8px 6px 8px;border:0;background:none;cursor:pointer;color:var(--ink);font:800 .76rem/1.15 var(--font-ui);text-align:center}
.bl-pick canvas{width:104px;height:80px}
.bl-pick:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-md)}
.bl-name{min-height:2.3em;display:flex;align-items:center}
.bl-level{position:absolute;top:6px;left:6px;min-width:24px;height:24px;padding:0 5px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--ink);font:var(--t-num-s);font-variant-numeric:tabular-nums;pointer-events:none}
.bl-tile.ready .bl-level{color:var(--on-mint);background:var(--mint)}
.bl-tile.busy .bl-level{color:var(--on-star);background:var(--star)}
.bl-plus{position:absolute;top:5px;right:5px;width:28px;height:28px;display:grid;place-items:center;padding:0;border:2px solid var(--ink);border-radius:50%;color:var(--on-mint);background:var(--mint);box-shadow:var(--lip-sm);font:900 1rem/1 var(--font-ui);cursor:pointer}
.bl-tile:not(.ready) .bl-plus{color:var(--ink);background:var(--card)}
.bl-plus:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.bl-plus:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.bl-time{position:absolute;left:50%;top:72px;transform:translateX(-50%);padding:2px 8px;border-radius:999px;color:var(--on-star);background:var(--star-soft);box-shadow:0 0 0 2px var(--ink);font:var(--t-num-s);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.bl-lock{position:absolute;left:50%;top:34px;transform:translateX(-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.bl-lock svg{width:18px;height:18px;fill:var(--locked,#d5cfee);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.bl-lock svg path{fill:none}
@media (max-width:760px){ .bl-layout{grid-template-columns:minmax(0,1fr)} .bl-detail{position:static;order:-1} .bl-art{height:130px} .bl-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))} .bl-pick canvas{width:88px;height:68px} .bl-time{top:58px} }
.bl-art canvas{width:200px;height:110px;max-width:100%}
.bl-detail .cost-tiles{gap:5px}
.bl-detail .cost-tile{padding:4px 7px 4px 4px;font-size:.8rem}
.bl-detail .cost-tile .icon{width:18px;height:18px}
.bl-detail .bl-info{gap:8px}
.bl-detail .bl-head h3{font:var(--t-title-m)}
.bl-detail .bl-desc{font-size:.8rem}
.bl-actions .btn{flex:1 1 auto}
.bl-actions .btn.ghost-link{flex:1 1 100%;min-height:30px;padding:4px}
/* construct dialog: every type, built ones marked */
.construct-head{margin:0 0 8px}
.construct-grid + .construct-head{margin-top:16px}
.construct-detail{position:sticky;top:0}
.bcard.built canvas{opacity:.85}
.bcard .bc-level{position:absolute;top:6px;left:6px;min-width:24px;height:24px;padding:0 5px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--ink);font:var(--t-num-s);font-variant-numeric:tabular-nums}
.bcard .bc-note{font:700 .72rem/1 var(--font-ui);color:var(--ink-soft)}
@media (max-width:760px){ .construct-detail{position:static} }
.construct .construct-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.construct .bcard canvas{aspect-ratio:13/9}
.construct .bcard .label{font-size:.85rem}
.construct-detail .detail-art canvas{width:220px;height:120px}
.construct-detail{gap:8px}

/* Production window (OGame's resource settings) */
.pr-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:12px}
.pr-climate{flex-direction:row;align-items:flex-start;gap:12px}
.pr-climate canvas{width:72px;height:72px;flex:none}
.pr-climate h3{margin:0 0 4px}
.pr-climate p{margin:0 0 6px;font:600 .82rem/1.4 var(--font-ui)}
.pr-hint{margin:8px 0 0;font:600 .78rem/1.4 var(--font-ui)}
.pr-table{width:100%;border-collapse:collapse;font:700 .85rem/1.3 var(--font-ui);color:var(--ink)}
.pr-table th,.pr-table td{padding:8px 10px;text-align:left;border-bottom:2px solid var(--card-line);vertical-align:middle}
.pr-table thead th{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.pr-table tbody th{font-weight:800}
.pr-table th small{display:block;font:600 .74rem/1.2 var(--font-ui);color:var(--ink-soft)}
.pr-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-table td.num.minus{color:var(--coral-deep)}
.pr-table tr.off td,.pr-table tr.off th{opacity:.55}
.pr-table tr.pr-sub th{font-weight:700}
.pr-table tfoot th,.pr-table tfoot td{border-bottom:0;font-weight:850;font-size:.95rem}
.pr-name{display:inline-flex;align-items:center;gap:6px}
.pr-name .icon{width:22px;height:22px;color:var(--c)}
.tip .tip-bad{color:var(--coral)}
.tip .tip-hint{opacity:.75;font-size:.72rem}
@media (max-width:760px){ .pr-top{grid-template-columns:minmax(0,1fr)} .pr-table th,.pr-table td{padding:6px 4px} .pr-table thead th:nth-child(2),.pr-table tbody td:nth-child(2),.pr-table tfoot td:nth-child(2){display:none} }
.hover-card{width:290px}
.hc-stats dd{overflow-wrap:anywhere}

/* Save chip, sign-in form, away list, report fleet tables, orbit pictures, rename row, unit hover card, race picker. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* accounts: the save chip, sign-in form, "while you were away" */
.save-chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);background:var(--card);box-shadow:var(--lip-sm);font:800 .78rem/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.save-chip.saved{color:var(--on-chrome);background:var(--chrome-raised)}
.save-chip i{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 2px var(--ink)}
.save-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-field{display:flex;flex-direction:column;gap:5px;font:800 .82rem/1.2 var(--font-ui);color:var(--ink)}
.auth-field input{height:44px;padding:0 12px;border:0;border-radius:var(--r-sm);color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line);font:700 .95rem/1 var(--font-ui)}
.auth-field input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.auth-field small{font:600 .75rem/1.2 var(--font-ui)}
.auth-demo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:12px;border-top:2px solid var(--card-line)}
.auth-demo p{margin:0;flex:1 1 220px;font:600 .8rem/1.4 var(--font-ui)}
.away-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.away-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border-radius:var(--r-md);background:var(--card-sunk);font:700 .84rem/1.4 var(--font-ui);color:var(--ink)}
@media (max-width:760px){ .save-chip{height:28px;padding:0 9px;font-size:.72rem} }
.alarm.calm{color:var(--mint-deep);box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--mint),var(--shadow-card);cursor:default}
.alarm.calm b{color:var(--mint-deep)}

/* Reports: a battle's fleets, an icon per ship type, what went in and what was lost */
.rep-table-wrap{grid-column:1/-1;overflow-x:auto;margin-top:6px}
.rep-table{border-collapse:separate;border-spacing:3px;font-variant-numeric:tabular-nums}
.rep-table th,.rep-table td{padding:2px 6px;text-align:center;border-radius:var(--r-sm,8px);background:var(--card)}
.rep-table thead td{background:none}
.rep-table th[scope=row]{text-align:left;font:800 .76rem/1.2 var(--font-ui);color:var(--ink-soft);background:none;white-space:nowrap;padding-left:0}
.rep-table td b{display:block;font:850 .84rem/1.2 var(--font-ui);color:var(--ink)}
.rep-table td small{display:block;font:700 .72rem/1.2 var(--font-ui);color:var(--ink-soft)}
.rep-table td small.lost{color:var(--coral-deep)}
.rep-table td.none{opacity:.45}

/* Alliance window */

/* Ship and defence pictures in the right column's lists */
.orbit li{padding:1px 10px 1px 3px;gap:6px}
.orbit-art{flex:none;display:grid;place-items:center;width:38px;height:25px;border-radius:var(--r-sm);background:var(--card-sunk)}
.orbit-art canvas{display:block;width:38px;height:25px}

/* The planet name, in the Command Center's dialog */
.rename-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rename-row input{flex:1 1 160px;min-width:0;height:36px;padding:0 12px;border:0;border-radius:var(--r-sm);color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line);font:700 .95rem/1 var(--font-ui)}
.rename-row input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Hover card for a ship or defence in the right column: to the left of the column, level with the row */
.unit-card{position:fixed;z-index:160;pointer-events:none;right:calc(var(--gap) + var(--side-width) + 10px);width:260px;top:clamp(70px,calc(var(--y) - 120px),calc(100vh - 340px));padding:10px 12px 12px;font:var(--t-body-s);color:var(--ink);background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.unit-card header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.unit-card header b{display:block;font:var(--t-title-s);color:var(--ink)}
.unit-card header small{font:700 .72rem/1.2 var(--font-ui);color:var(--ink-soft)}
.unit-card p{margin:0 0 8px;color:var(--ink-soft)}
.unit-card p.special{margin:8px 0 0;font-weight:700;color:var(--ink)}
.unit-card dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0}
.unit-card dt{font:700 .76rem/1.3 var(--font-ui);color:var(--ink-soft)}
.unit-card dd{margin:0;text-align:right;font:850 .8rem/1.3 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.orbit-art.big{width:60px;height:40px}
.orbit-art.big canvas{width:60px;height:40px}
@media (max-width:980px){ .unit-card{display:none} }
.reqs li .req-art{margin-left:0;flex:none;width:44px;height:34px;border-radius:8px;overflow:hidden;background:var(--card-sunk,#efeaff);display:grid;place-items:center}
.reqs li .req-art canvas{width:44px;height:34px;display:block}
.reqs li .req-name{flex:1;min-width:0;font-weight:700}
.reqs li:has(.req-art){gap:10px}

/* Race picker on the sign-up form (docs/RACES.md) */
.race-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* Three races side by side need more room than the small sign-in window */
.modal.sm:has(.race-pick) { max-width: min(720px, calc(100vw - 24px)); width: 720px; }
@media (max-width: 640px) { .race-pick { grid-template-columns: 1fr; } }
.race-card { text-align: left; padding: 8px 10px; font-size: .85rem; border-radius: 12px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; cursor: pointer; }
.race-card:hover { background: rgba(255, 255, 255, 0.09); }
.race-card.picked { border-color: var(--gold, #f2c14e); background: rgba(242, 193, 78, 0.12); }
.race-card h4 { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.race-card h4 small { opacity: 0.7; font-weight: 400; }
.race-card p { margin: 2px 0 6px; }
.race-card ul { margin: 0; padding-left: 16px; font-size: 0.82em; }
.race-card h4 { flex-wrap: wrap; }
.race-pros li::marker { color: #7bd88f; }
.race-cons li::marker { color: #ff8a7a; }
.race-cons li { color: #ffb0a4; }

/* The offline demo's calls to action in the top bar: Sign in and Sign up. */
.auth-cta{display:inline-flex;align-items:center;gap:6px}
.auth-btn{position:relative;height:32px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;color:var(--ink);background:var(--card);box-shadow:var(--lip-sm);font:800 .78rem/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.auth-btn.primary{background:var(--gold,#f4c84a)}
/* The tip is inside the button, so it must not inherit the button's single line. */
.auth-btn .tip{white-space:normal;text-align:left;width:max-content;max-width:min(240px,calc(100vw - 24px))}
.auth-btn .tip b{display:block}

/* The race's portrait on top of its card at sign-up. */
.race-face{display:flex;justify-content:center;margin:2px 0 6px}
.race-face canvas{display:block;width:96px;height:96px;transition:transform .2s var(--ease-spring,ease-out)}
.race-card:hover .race-face canvas,.race-card.picked .race-face canvas{transform:scale(1.06)}
.race-card.picked .race-face canvas{filter:drop-shadow(0 0 8px rgba(242,193,78,.7))}
.race-card h4{justify-content:center}
@media (max-width:640px){
  .race-card{display:grid;grid-template-columns:72px 1fr;column-gap:10px;align-items:start}
  .race-face{grid-row:span 4;margin:0}
  .race-face canvas{width:72px;height:72px}
  .race-card h4{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.race-face canvas{transition:none}}

/* Reports window. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Reports window (the Rise of Empires layout: tabs, filter chips, a page of rows, a report opened in its place) */
.report-tabs{position:static;margin:-2px 0 10px;padding:0;background:none;box-shadow:inset 0 -2px 0 var(--card-line)}
.report-filters{margin-bottom:10px}
.report-search{display:flex;gap:8px;margin-bottom:10px}
.report-search input{flex:1;min-width:0;padding:8px 12px;border-radius:var(--r-md);border:2px solid var(--control-line);background:var(--card);font:700 .85rem/1.2 var(--font-ui);color:var(--ink)}
.report-list{display:flex;flex-direction:column;gap:6px}
.rep-run{border-style:dashed}
.rep-run-list{display:flex;flex-direction:column;gap:6px;margin:0 0 4px 18px;padding-left:8px;border-left:2px solid var(--line, rgba(0,0,0,.15))}
.report-empty{padding:18px 4px;text-align:center}
.rep-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 12px;border:0;border-radius:var(--r-md);background:var(--card-sunk);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.rep-row:hover,.rep-row:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.rep-row.fresh{background:var(--star-soft);box-shadow:inset 0 0 0 2px var(--star)}
.rep-text{display:flex;flex-direction:column;min-width:0}
.rep-text b{font:var(--t-title-s);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-text small{font:600 .74rem/1.3 var(--font-ui);color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rep-row time{font:800 .72rem/1 var(--font-ui);color:var(--ink-soft);white-space:nowrap}
.rep-row .icon.fav{width:16px;height:16px;color:var(--star-deep)}
.report-type{display:block;flex:none;width:64px;height:40px;border-radius:var(--r-md);overflow:hidden;line-height:0;box-shadow:0 0 0 2px var(--ink)}
.report-type canvas{display:block;width:100%;height:100%}
.report-type.good{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--mint)}
.report-type.mixed{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--star)}
.report-type.bad{box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--coral)}
.report-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font:700 .78rem/1.2 var(--font-ui);color:var(--ink-soft)}
/* An open report's bar: back to the list, the newer and older reports either side of its day and
   time, its actions on the right. On a phone the actions wrap under it, as icons but for the
   "again" one. */
.report-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.report-bar .btn .icon{width:15px;height:15px}
.report-bar .btn{gap:5px}
.report-step{display:flex;align-items:center;gap:4px}
.report-step .btn{width:32px;padding:0;justify-content:center}
/* As wide as the widest time, so the arrows stay put from report to report. */
.report-step .when{min-width:96px;text-align:center;font:800 .8rem/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.report-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
@media (pointer:coarse){.report-step .btn{width:44px}}
@media (max-width:640px){
  /* The label stays for screen readers. */
  .report-acts .btn:not(.ink) > span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.report-fav.active{background:var(--star-soft);box-shadow:0 0 0 2px var(--star)}
.report-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--card-sunk);color:var(--ink)}
.report-banner .icon{width:28px;height:28px;flex:none}
.report-banner b{display:block;font:var(--t-title-s)}
.report-banner small{display:block;margin-top:2px;font:600 .8rem/1.4 var(--font-ui);color:var(--ink-soft)}
.report-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:12px;border-radius:var(--r-md);background:var(--card-sunk);margin-bottom:10px}
.report-vs.good{background:#dff6ec}
.report-vs.bad{background:#fde3e1}
.report-vs .rplate{display:flex;align-items:center;gap:8px;min-width:0}
.report-vs .rplate.defence{justify-content:flex-end;text-align:right}
.report-vs .rplate .icon{width:26px;height:26px;flex:none}
.report-vs .rplate b{display:block;font:var(--t-title-s);color:var(--ink)}
.report-vs .rplate small{display:block;font:700 .72rem/1.2 var(--font-ui);color:var(--ink-soft)}
.report-vs .outcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.report-vs .outcome .icon.lg{width:30px;height:30px}
.report-vs .outcome b{font:900 1.05rem/1.1 var(--font-display);color:var(--ink)}
.report-vs.good .outcome b{color:var(--mint-deep)}
.report-vs.bad .outcome b{color:var(--coral-deep)}
.report-vs .outcome small{font:700 .72rem/1.3 var(--font-ui);color:var(--ink-soft);max-width:170px}
.report-side{padding:10px 12px;margin-bottom:10px;border-radius:var(--r-md);background:var(--card-sunk)}
.report-side header{display:flex;align-items:center;gap:8px;margin-bottom:6px;font:700 .85rem/1.2 var(--font-ui);color:var(--ink)}
.report-side .side-mark .icon{width:20px;height:20px}
.report-side .side-loss{margin-left:auto;font:800 .74rem/1 var(--font-ui);color:var(--ink-soft)}
.report-side .side-loss.lost{color:var(--coral-deep)}
.report-strength{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 10px;font:700 .8rem/1.2 var(--font-ui);color:var(--ink-soft)}
.report-strength .icon{width:16px;height:16px;vertical-align:-3px;margin:0 4px}
.report-strength b{color:var(--ink)}
.report-loot{padding:10px 12px;margin-bottom:10px;border-radius:var(--r-md);background:var(--card-sunk)}
.report-loot header{margin-bottom:6px;font:var(--t-title-s);color:var(--ink)}
.report-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0;font:700 .8rem/1.3 var(--font-ui);color:var(--ink-soft)}
.report-events{margin:6px 0 0;padding:0 0 0 18px;font:600 .8rem/1.5 var(--font-ui);color:var(--ink)}
.report-shared{padding:8px 12px;margin-bottom:10px;border-radius:var(--r-md);background:var(--star-soft);color:var(--ink);font:700 .8rem/1.4 var(--font-ui)}
.report-shared p{margin:4px 0 0;font-weight:600}
.report-share{padding:12px;margin-bottom:10px;border-radius:var(--r-md);background:var(--card-sunk)}
.report-share h3{margin:0 0 8px}
.report-share .field{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.report-share .field > span{font:800 .76rem/1.2 var(--font-ui);color:var(--ink-soft)}
.report-share input,.report-share textarea{padding:8px 10px;border-radius:var(--r-md);border:2px solid var(--control-line);background:var(--card);font:700 .82rem/1.3 var(--font-ui);color:var(--ink)}
.report-actions{display:flex;gap:8px;margin:8px 0}
.report-link{display:flex;gap:8px}
.report-link input{flex:1;min-width:0}
.rep-table th canvas{display:block;margin:0 auto;width:40px;height:27px}
.report-alert{position:fixed;right:var(--gap);bottom:24px;z-index:310;display:flex;align-items:center;gap:4px;padding:6px 8px 6px 6px;border-radius:var(--r-md);background:var(--card);box-shadow:0 0 0 2px var(--ink),var(--shadow-card);animation:report-pop .25s ease-out}
.report-alert.good{box-shadow:0 0 0 3px var(--mint),0 0 0 5px var(--ink),var(--shadow-card)}
.report-alert.bad{box-shadow:0 0 0 3px var(--coral),0 0 0 5px var(--ink),var(--shadow-card)}
.report-alert-open{display:flex;align-items:center;gap:10px;padding:2px 8px 2px 2px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.report-alert-open b{display:block;font:var(--t-title-s)}
.report-alert-open small{display:block;font:700 .72rem/1.2 var(--font-ui);color:var(--ink-soft)}
.report-alert-close{border:0;background:none;color:var(--ink-soft);cursor:pointer;font-size:.9rem;padding:4px 6px}
@keyframes report-pop{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

/* Galaxy dock, send ships (rally point layout), draggable dialogs, map tooltips and filters, requirement kinds. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Galaxy: the builders dock stays bottom centre; the map tools are two small columns bottom left (layer filters, zoom). */
.map-controls.map-dock{position:fixed;left:var(--gap);right:auto;top:auto;bottom:var(--gap);transform:none;flex-direction:column;align-items:flex-start;gap:8px;padding:0;background:none;box-shadow:none;max-width:none}
.map-col{position:relative;flex-direction:column;gap:6px}
.map-tool{width:36px;padding:0}
.map-tool .icon{width:18px;height:18px}
.map-zoom-dots{flex-direction:column;align-items:center;padding:2px 0}
.map-pop{position:absolute;left:calc(100% + 8px);bottom:0;display:flex;gap:4px;align-items:center;padding:6px;border-radius:var(--r-lg);background:var(--chrome);box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
@media (max-width:1250px){ .map-controls.map-dock{bottom:130px} .minimap{display:none!important} }
.report-pager .btn:disabled{opacity:.45;cursor:not-allowed}

/* Send ships, laid out like Rise of Empires' rally point: boxes, a ship table, a confirmation banner */
.send-form{display:flex;flex-direction:column;gap:10px}
.send-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;align-items:start}
.send-box{overflow:hidden;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.send-box-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:6px 10px;font:var(--t-title-s);color:var(--ink);background:rgba(42,33,84,.07);border-bottom:1px solid var(--card-line)}
.send-box-head .head-actions{float:none}
.send-note{margin:0;padding:6px 10px 8px}
.send-target{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;margin:0;padding:8px 10px;font:600 .8rem/1.3 var(--font-ui);color:var(--ink)}
.send-target dt{color:var(--ink-soft)}
.send-target dd{margin:0;font-weight:800}
.send-box .target-pick{padding:0 10px 8px}
.send-kinds{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px 2px}
.send-kind{padding:8px 12px;border:0;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line);font:800 .8rem/1 var(--font-ui);color:var(--ink);cursor:pointer}
.send-kind:hover{transform:translateY(-1px)}
.send-kind.active{background:var(--chrome-raised);color:var(--on-chrome);box-shadow:0 0 0 2px var(--ink)}
.send-troops{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.send-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;box-shadow:inset -1px -1px 0 var(--card-line);min-width:0}
.send-cell b{font:700 .72rem/1.1 var(--font-ui);color:var(--ink);text-align:center}
.send-cell .home{font:800 .74rem/1 var(--font-ui);color:var(--ink-soft);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.send-cell .icon{width:28px;height:28px;color:var(--c)}
/* A cell's picture is 72 by 48, drawn with twice the pixels (`Thumb`): without a size of its own a
   canvas is shown at its pixel count, which leaves none to spare and a soft ship on a sharp screen. */
.send-cell canvas{flex:none;width:72px;height:48px}
.send-count{font:850 .95rem/1 var(--font-ui);color:var(--ink)}
.send-actions{display:flex;justify-content:flex-end;gap:8px}
.send-actions .btn{min-width:96px}
.send-form .trip{margin-top:0}
.send-banner{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:110px;padding:34px 0 10px;border-radius:var(--r-md);background:linear-gradient(160deg,var(--chrome) 0%,var(--chrome-raised) 60%,var(--chrome-hover) 100%);box-shadow:inset 0 0 0 1.5px var(--chrome-line);overflow:hidden}
.send-banner-kind{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:4px 16px;font:800 .8rem/1.2 var(--font-ui);color:var(--ink);background:var(--card);border-radius:0 0 var(--r-md) var(--r-md)}
.send-plate{display:flex;flex-direction:column;gap:2px;max-width:46%;padding:6px 26px 6px 10px;background:var(--card);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}
.send-plate.them{align-items:flex-end;padding:6px 10px 6px 26px;text-align:right;clip-path:polygon(16px 0,100% 0,100% 100%,16px 100%,0 50%)}
.send-plate b{overflow:hidden;font:800 .85rem/1.2 var(--font-ui);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
.send-plate span{font:700 .72rem/1.2 var(--font-ui);color:var(--ink-soft)}
.send-when{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:-10px auto 0;padding:3px 14px;font:850 .8rem/1.3 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink);background:var(--card-sunk);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:inset 0 0 0 1px var(--card-line)}
@media (max-width:560px){.send-top{grid-template-columns:1fr}}

/* A dialog taken by its head follows the pointer; nothing in it is selected meanwhile. */
.modal-head { cursor: move; touch-action: none; }
.modal-head button, .modal-head a, .modal-head input { cursor: pointer; }
.modal.dragging { user-select: none; will-change: translate; }
@media (max-width: 640px) { .modal-head { cursor: auto; touch-action: auto; } }

/* Map controls: side tooltips and the Filters popover. */
.map-tool{position:relative}
.tip.beside{left:calc(100% + 12px);top:50%;transform:translate(-4px,-50%);text-align:left;white-space:normal;font-weight:600;color:var(--ink)}
.has-tip:hover > .tip.beside,.has-tip:focus-visible > .tip.beside{opacity:1;visibility:visible;transform:translate(0,-50%)}
.map-pop[role=group]{flex-direction:column;align-items:stretch}
.filter-pop{width:270px;gap:2px;padding:8px;background:var(--card)}
.filter-pop h4{margin:2px 8px 6px;font:800 .66rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.filter-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 8px;border-radius:var(--r-sm);color:var(--ink)}
.filter-opt:hover{background:var(--card-sunk)}
.filter-text{display:flex;flex-direction:column;gap:2px}
.filter-text b{font:800 .85rem/1.1 var(--font-ui)}
.filter-text small{font:600 .72rem/1.25 var(--font-ui);color:var(--ink-soft)}
.filter-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--star,#ffcf5c);color:var(--on-star,#2a1b5c);box-shadow:0 0 0 2px var(--ink);font:800 .62rem/16px var(--font-ui);text-align:center}
.map-tool > .tip.beside{position:absolute;width:max-content;max-width:220px;z-index:210;pointer-events:none}

/* Each requirement says what kind it is, so the player knows where to look. */
.reqs li .req-text{flex:1;margin-left:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;text-align:left}
.reqs li .req-text .req-name{flex:none;line-height:1.15}
.reqs li .req-kind{font:800 .62rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}

/* Fleet movements: side cards, hover card, the Movements window. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The Trade Hub's market (panels/market.rs) */

/* Fleet movements: quiet side cards with a colour bar and an arrow, a hover card, and the tracking dialog */
.move-card{--mc:var(--mint-deep);position:relative;width:236px;min-height:36px;height:auto;display:flex;align-items:center;gap:8px;padding:5px 10px 5px 14px;border:0;border-radius:var(--r-md);background:rgb(251 248 255 / 78%);box-shadow:inset 3px 0 0 var(--mc),0 1px 2px rgb(20 12 60 / 22%);clip-path:none;cursor:pointer;text-align:left;transition:background var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.move-card.out,.move-card.atk{clip-path:none}
.move-card:hover,.move-card:focus-visible{background:var(--card);transform:translateX(-2px)}
.move-card .mc-arrow{flex:none;width:18px;text-align:center;font:800 1rem/1 var(--font-ui);color:var(--mc)}
.move-card .t{flex:1;min-width:0;font:700 .8rem/1.15 var(--font-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-card .t small{display:block;margin-top:1px;font:600 .68rem/1.1 var(--font-ui);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.move-card .c{font:800 .8rem/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.move-card .n{padding-left:8px;font:800 .76rem/1 var(--font-ui);color:var(--ink-soft);box-shadow:-1px 0 0 var(--card-line)}
.move-card.foe{--mc:var(--coral-deep);background:rgb(255 240 238 / 90%);box-shadow:inset 3px 0 0 var(--mc),0 1px 2px rgb(20 12 60 / 22%)}
.move-card.foe .c{color:var(--coral-deep)}
.move-card.attack{--mc:var(--star-deep)}
.move-card.visit{--mc:var(--sky-500)}
.move-card.home{--mc:var(--ink-soft)}
.move-card.home .c{color:var(--ink-soft)}
.move-tip header{align-items:center}
.move-tip .mv-arrow.big{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-full);background:var(--card-sunk);font:800 1.1rem/1 var(--font-ui)}
.move-tip dd{white-space:normal}
.mv-more{list-style:none;margin:8px 0 0;padding:6px 0 0;border-top:1px solid var(--card-line);display:flex;flex-direction:column;gap:3px}
.mv-more li{display:flex;justify-content:space-between;gap:8px;font:700 .72rem/1.25 var(--font-ui);color:var(--ink-soft)}
.mv-more li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-more li b{color:var(--ink);font-variant-numeric:tabular-nums}
.mv-arrow.foe,.mv-row.foe{--mc:var(--coral-deep)}
.mv-arrow.attack,.mv-row.attack{--mc:var(--star-deep)}
.mv-arrow.visit,.mv-row.visit{--mc:var(--sky-500)}
.mv-arrow.out,.mv-row.out{--mc:var(--mint-deep)}
.mv-arrow.home,.mv-row.home{--mc:var(--ink-soft)}
.mv-arrow{color:var(--mc,var(--ink))}
.mv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mv-row{--mc:var(--mint-deep);display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px 10px 10px;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 4px 0 0 var(--mc),inset 0 0 0 1px var(--card-line)}
.mv-row .mv-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-full);background:var(--card);font:800 1rem/1 var(--font-ui);color:var(--mc)}
.mv-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.mv-main b{font:800 .88rem/1.2 var(--font-ui);color:var(--ink)}
.mv-main small{font:600 .74rem/1.3 var(--font-ui);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis}
.mv-bar{display:block;height:4px;margin-top:6px;border-radius:var(--r-full);background:var(--card-line);overflow:hidden}
.mv-bar i{display:block;height:100%;border-radius:inherit;background:var(--mc)}
.mv-eta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.mv-eta b{font:850 .95rem/1.1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.mv-eta small{font:600 .68rem/1.1 var(--font-ui);color:var(--ink-soft)}
.mv-actions{display:flex;gap:6px;margin-top:6px}
.mv-row.foe .mv-eta b{color:var(--coral-deep)}
.mv-empty{margin:4px 0 10px;padding:14px;text-align:center;border-radius:var(--r-md);background:var(--card-sunk)}
@media (max-width:560px){.mv-row{grid-template-columns:28px minmax(0,1fr)}.mv-eta{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}}

/* Compact dialogs, tighter Buildings and Shipyard cards, HudSection, the rail, side hover cards, Spaceport, setting rows. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Compact dialogs: less chrome and spacing so most content fits without scrolling. */
/* A dialog is as tall as what it holds, up to --modal-h (or the window), so a short one leaves the scene
   in view. Three widths: wide (--modal-w, lists beside details), .md (--modal-w-md, one column) and .sm. */
:root{--modal-w:1000px;--modal-w-md:720px;--modal-h:760px}
.modal-layer{padding:calc(var(--topbar-height) + 8px) 12px 10px}
.modal{height:auto;max-height:min(var(--modal-h),calc(100dvh - var(--topbar-height) - 18px))}
@media (min-width:761px){ .modal.md{width:min(var(--modal-w-md),100%)} }
/* A phone's bottom sheet keeps its full height: it grows from the bottom, so its head and tabs would jump from tab to tab. */
@media (max-width:760px){ .modal:not(.sm){height:min(var(--modal-h),calc(100dvh - var(--topbar-height) - 18px))} }
.modal-head{padding:6px 12px 6px 14px;gap:10px}
.crest{width:40px;height:40px;margin:4px}
/* A head that shows one of the sprite's pictures (a window with a button on the rail or the bar) instead of a canvas. */
.crest.pic{display:grid;place-items:center;background:var(--card)}
.crest.pic .icon{width:30px;height:30px}
.modal-close{width:34px;height:34px}
.modal-title h2{font:800 1.15rem/1.15 var(--font-ui)}
.modal-title .sub{font-size:.78rem;line-height:1.2}
.mtabs{padding:5px 12px;gap:4px}
.mtab{padding:6px 14px}
.modal-pad{--pad-x:12px;--pad-y:10px;gap:8px}
.modal-foot{margin-top:6px;padding-top:0}
.two,.construct{gap:10px}
.bl-layout{gap:10px}
.detail-art{height:120px}
.detail-art canvas{height:120px}
.cost-tiles{gap:6px}
.cost-tile{padding:3px 8px 3px 5px}
.reqs{gap:3px}
.reqs li .req-art{width:36px;height:28px}
.construct-grid{gap:8px}

/* A resource's picture where its name would be: after an amount, in running text */
.res-ic{width:1.15em;height:1.15em;vertical-align:-.22em;margin:0 .08em;flex:none}
/* Buildings window: smaller tiles, more to a row. */
.bl-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:7px}
.bl-pick{padding:5px 4px 5px;gap:0;font-size:.72rem}
.bl-pick canvas{width:80px;height:58px}
.bl-group{margin-top:6px}
.bl-group .overline{margin-bottom:4px}
.bl-layout{grid-template-columns:minmax(0,1fr) 290px}
/* On a phone the detail sits above the list in one column (11-buildings-production.css); the line above would undo that. */
@media (max-width:760px){ .bl-layout{grid-template-columns:minmax(0,1fr)} }
.bl-detail{gap:6px;padding:10px}
.bl-art{height:110px}
/* Shipyard and Research cards: tighter, so more fit in view. */
.ship-special{padding:4px 8px}
.yard-list{gap:5px}
/* One long queue (up to 100 orders): it scrolls instead of pushing the window down. */
.yard-list{max-height:15rem;overflow-y:auto;padding-right:2px}

/* HudSection: a folding titled section; the panels are compact (the map view tighter still). */
.hud-sec{width:236px;display:flex;flex-direction:column;gap:3px}
.hud-sec-head{display:flex;align-items:center;gap:8px;width:100%;padding:4px 4px 0;border:0;background:none;cursor:pointer;color:var(--on-sky,var(--parch-50));font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;text-align:left}
.hud-sec-title{flex:1}
.hud-sec-count{font:850 .72rem/1 var(--font-ui);padding:2px 7px;border-radius:999px;background:var(--card,rgba(255,255,255,.7));color:var(--ink,#2a2154)}
.hud-sec-chev{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid currentColor;transition:transform var(--dur-1)}
.hud-sec.folded .hud-sec-chev{transform:rotate(-90deg)}
.hud-sec-body{display:flex;flex-direction:column;gap:3px}
.hud-sec-body[hidden]{display:none}
.side{gap:4px}
/* The rail sits high and compact on every view, as it first did on the map */
.page .rail{top:76px;padding:5px;gap:5px}
.page .rail-btn{width:38px;height:38px}
.page .rail-btn .icon{width:24px;height:24px}
.page.view-galaxy .side{top:76px;width:200px;max-height:calc(100% - 76px - 230px)}
.page.view-galaxy .hud-sec,.page.view-galaxy .move-card,.page.view-galaxy .orbit{width:200px}
.page.view-galaxy .move-card{height:30px}
.page.view-galaxy .orbit li{padding:1px 8px;font-size:.72rem}
.page.view-galaxy .orbit li .orbit-art{width:30px;height:20px}
.page.view-galaxy .orbit li .orbit-art canvas{width:30px;height:20px}
.page.view-galaxy .map-controls.map-dock{left:var(--gap);width:auto}
.page.view-galaxy .map-col{width:48px;box-sizing:border-box;align-items:center}
@media (max-width:900px){ .page.view-galaxy .side{display:none} }
.card{padding:8px 12px;gap:6px}
.card h3{font-size:1.05rem;line-height:1.2}
.page.view-galaxy .side{padding:0}

/* Hover cards of the side column: beside the row they describe, with an arrow pointing at it */
.unit-card{right:var(--tip-right,calc(var(--gap) + var(--side-width) + 10px));top:var(--tip-top,120px);width:268px;animation:tip-in var(--dur-1,.12s) var(--ease-out,ease-out)}
.unit-card::after{content:"";position:absolute;right:-8px;top:clamp(22px,var(--tip-point,40px),calc(100% - 22px));width:13px;height:13px;background:var(--card);border:2px solid var(--ink);border-left:0;border-bottom:0;border-radius:0 3px 0 0;transform:translateY(-50%) rotate(45deg)}
.orbit li,.move-card{transition:background var(--dur-1,.12s) var(--ease-out,ease-out),box-shadow var(--dur-1,.12s) var(--ease-out,ease-out)}
.orbit li:hover{background:var(--card-sunk);box-shadow:inset 3px 0 0 var(--star-deep)}
@keyframes tip-in{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.unit-card{animation:none}}

/* Carousel: three cards across, buttons to page sideways. */

/* Spaceport: movements filter and the send-fleet target picker */
.mv-filter{margin:0 0 10px}
.send-coords{display:flex;gap:10px;padding:10px 10px 4px}
.send-coords label{display:flex;align-items:center;gap:6px;font:800 .8rem/1 var(--font-ui);color:var(--ink)}
.send-note.bad{color:var(--coral-deep)}

.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0;color:var(--ink)}
.setting-row+.setting-row{border-top:1px solid var(--card-line)}
.setting-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.setting-text b{font:800 .92rem/1.2 var(--font-ui)}
.setting-text small{font:600 .76rem/1.3 var(--font-ui)}
.mv-facts{margin:0;font:700 .78rem/1.3 var(--font-ui)}
.mv-count{display:inline-block;min-width:16px;margin-left:2px;padding:1px 5px;border-radius:var(--r-full);background:rgba(42,33,84,.12);font:850 .7rem/1.2 var(--font-ui);text-align:center}
.choice.active .mv-count{background:rgba(255,255,255,.2)}

/* The dropdown (ui/dropdown.rs). Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The dropdown (ui/dropdown.rs) */
.dropdown{position:relative;display:inline-flex;min-width:0}
.dd-button{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer;font:inherit;color:inherit}
.dd-field{flex:1;justify-content:space-between;min-height:36px;padding:0 10px;border:0;border-radius:var(--r-sm);color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line);font:800 .85rem/1 var(--font-ui);font-variant-numeric:tabular-nums}
.dd-field:hover,.dropdown.open .dd-field{box-shadow:inset 0 0 0 2px var(--ink)}
.dd-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.dd-field>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-chevron{flex:none;width:14px;height:14px;transition:transform var(--dur-2) var(--ease-out)}
.dropdown.open .dd-chevron{transform:rotate(180deg)}
.dd-list{position:fixed;z-index:1100;overflow-y:auto;padding:6px;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lip-sm),var(--shadow-card);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s var(--dur-2)}
.dropdown.open .dd-list{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s}
.dd-list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.dd-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;white-space:nowrap}
.dd-list li.nested{margin-left:22px}
.dd-list li.active{background:var(--card-sunk)}
.dd-list li.chosen{background:var(--star-soft);box-shadow:inset 0 0 0 2px var(--star)}
.dd-list li canvas{flex:none;border-radius:50%}
.dd-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dd-text b{font:700 .88rem/1.15 var(--font-ui);overflow:hidden;text-overflow:ellipsis}
.dd-text small{font:700 .72rem/1.1 var(--font-ui);color:var(--ink-soft)}
.dd-check{flex:none;width:14px;height:14px;visibility:hidden}
.dd-list li.chosen .dd-check{visibility:visible}
.dd-foot{margin-top:4px}
.planet-menu{width:min(250px,calc(100vw - 32px));padding:4px}
.planet-menu li{gap:8px;padding:4px 6px}
.planet-menu li canvas{width:24px;height:24px}
.planet-menu li.nested{margin-left:16px}
.planet-menu li.chosen{background:var(--star-soft);box-shadow:inset 3px 0 0 var(--star)}
.planet-menu .dd-text{gap:1px}
.planet-menu .dd-text b{font:600 .85rem/1.15 var(--font-display);white-space:nowrap}
.planet-menu .dd-text small{font-size:.68rem}
.pr-dd{min-width:92px}
@media (prefers-reduced-motion:reduce){.dd-list,.dd-chevron{transition:none}}
.report-banner.scan{background:#e4dbff}
.report-banner.trade{background:#dff6ea}
.report-banner.trip,.report-banner.world{background:#fff1cf}

@media (max-width:640px){.send-top.solo{grid-template-columns:1fr}}

/* Research Lab and its requirements. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Research Lab (panels/lab.rs): every technology in one grid of equal cards, the level as a badge on
   the picture, a coloured status; the picked one's details beside its price and button. */
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:8px;margin-top:10px}
.tech-card{display:grid;grid-template-rows:auto 2.3em auto;justify-items:center;align-content:start;gap:5px;min-width:0;padding:10px 6px 8px;font:inherit;color:var(--ink);text-align:center;cursor:pointer;background:var(--card-sunk);border:2px solid var(--card-line);border-radius:var(--r-md)}
.tech-card:hover{border-color:var(--ink-soft)}
.tech-card:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tech-card.selected{border-color:var(--ink);background:var(--card);box-shadow:0 0 0 3px var(--star),var(--lip-sm)}
.tech-card[data-state="locked"] canvas{filter:grayscale(.8) opacity(.6)}
.tech-art{position:relative;display:grid;place-items:center}
.tech-art canvas{display:block;width:44px;height:44px}
.tech-art.big canvas{width:56px;height:56px}
.tech-level{position:absolute;right:-8px;bottom:-6px;min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;border-radius:999px;font:900 .74rem/1 var(--font-ui);font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--star);box-shadow:0 0 0 2px var(--ink)}
.tech-art.big .tech-level{min-width:26px;height:26px;font-size:.85rem}
.tech-name{display:flex;align-items:center;justify-content:center;font:var(--t-title-s);line-height:1.15;color:var(--ink)}
.tech-status{padding:3px 9px;border-radius:999px;font:800 .68rem/1 var(--font-ui);color:var(--ink-soft);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.tech-card[data-state="ready"] .tech-status{color:var(--on-mint);background:var(--mint);box-shadow:none}
.tech-card[data-state="now"] .tech-status{color:var(--ink);background:var(--star);box-shadow:none}
.tech-card[data-state="top"] .tech-status{color:var(--ink);background:var(--star-soft);box-shadow:none}
.tech-detail{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px;margin-top:12px;align-items:start}
.tech-detail-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.tech-detail-head{display:flex;align-items:center;gap:14px}
.tech-detail-head h3{margin:0}
.tech-detail-head p{margin:3px 0 0;font:600 .85rem/1.35 var(--font-ui)}
.tech-compare{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:8px}
.tech-now,.tech-next{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:var(--r-md);background:var(--card-sunk)}
.tech-next{background:color-mix(in srgb,var(--mint) 22%,var(--card))}
.tech-compare b{font:800 .9rem/1.25 var(--font-ui);color:var(--ink)}
.tech-next b{color:var(--mint-deep)}
.tech-compare .overline{margin:0}
.tech-arrow{align-self:center;font:900 1.1rem/1 var(--font-ui);color:var(--ink-soft)}
.tech-unlocks .overline{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.tech-unlocks .overline small{font:600 .7rem/1 var(--font-ui);text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.tech-unlocks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 8px}
.tech-unlocks li{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 4px 4px 8px;border-radius:var(--r-sm);font:700 .78rem/1.2 var(--font-ui);color:var(--ink-soft);background:var(--card-sunk)}
.tech-unlocks li.ok{color:var(--ink)}
.tech-unlocks li.ok span::before{content:"✓ ";color:var(--mint-deep);font-weight:900}
.tech-unlocks li i{min-width:20px;height:20px;display:grid;place-items:center;border-radius:999px;font:900 .7rem/1 var(--font-ui);font-style:normal;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.tech-unlocks li.ok i{color:var(--on-mint);background:var(--mint);box-shadow:none}
.tech-detail-side{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-md);background:var(--card-sunk)}
.tech-detail-side .overline{margin:0}
.tech-time{font:700 .8rem/1.2 var(--font-ui);color:var(--ink-soft)}
.tech-why{margin:0;font:700 .8rem/1.35 var(--font-ui)}
@media (max-width:720px){.tech-detail{grid-template-columns:minmax(0,1fr)}.tech-compare{grid-template-columns:minmax(0,1fr)}.tech-arrow{display:none}}

.race-card{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;background:var(--card-sunk);border:2px solid var(--card-line);color:var(--ink)}
.race-card:hover{background:var(--card-line)}
.race-card.picked{border-color:var(--star);background:var(--star-soft)}
.race-card h4 small{color:var(--ink-soft);opacity:1}
.race-card p{color:var(--ink)}
.race-cons li{color:var(--coral-deep)}

/* Tech tree tab (src/panels/lab.rs TechTree) */
.tech-tree{gap:6px}
/* Requirements are text only: the kind, then the name, on one line. */
.reqs li .req-text{flex:1;flex-direction:row;align-items:baseline;gap:8px}
.reqs li .req-kind{flex:none;min-width:76px}
.reqs li .req-text{justify-content:flex-start;text-align:left}
.reqs li .req-kind{text-align:left}

/* Combat simulator. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Combat simulator */
.sim-side{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:var(--r-md);background:var(--card-sunk);min-width:0}
.sim-side h3,.sim-result-side h4{margin:0;font:var(--t-title-s);color:var(--ink)}
.sim-levels{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sim-level{display:flex;align-items:center;justify-content:space-between;gap:6px;font:700 .75rem/1.2 var(--font-ui);color:var(--ink)}
.sim-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.sim-cell{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 6px;align-items:center;padding:4px 6px;border-radius:var(--r-sm);background:var(--card)}
.sim-cell b{font:800 .7rem/1.1 var(--font-ui);color:var(--ink)}
.sim-cell canvas{grid-row:1/3;width:36px;height:24px}
.sim{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}
.sim-edit{display:flex;flex-direction:column;gap:10px;min-width:0}
.sim-switch{display:flex;gap:6px;flex-wrap:wrap}
.sim-fill{align-self:flex-start}
.sim-side h3{display:none}
/* The result stays in view under the tabs while the form scrolls. */
.sim-out{position:sticky;top:52px;display:flex;flex-direction:column;gap:10px;max-height:calc(var(--modal-h) - 150px);overflow:auto;padding:12px;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--card-line)}
.sim-out h3{margin:0;font:var(--t-title-s);color:var(--ink)}
.sim-out .report-banner{margin:0}
.sim-out .sim-results{grid-template-columns:1fr}
.sim-out .sim-result-side{background:var(--card)}
.sim-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sim-result-side{padding:10px;border-radius:var(--r-md);background:var(--card-sunk);min-width:0}
.sim-table{width:100%;border-collapse:collapse;font:700 .78rem/1.3 var(--font-ui);color:var(--ink)}
.sim-table td,.sim-table th{padding:3px 4px;text-align:right}
.sim-table th{text-align:left;display:flex;align-items:center;gap:6px;font-weight:800}
.sim-table thead td{color:var(--ink-soft);font-size:.68rem;text-transform:uppercase}
.sim-table .loss.lost{color:var(--coral-600,#c0504a)}
.sim-art canvas{width:30px;height:20px;display:block}
.report-banner.good{background:#dff6ea}
.report-banner.bad{background:#ffe3dc}
@media (max-width:860px){.sim{grid-template-columns:1fr}.sim-out{position:static;max-height:none}}

/* Commander window and inventory. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Commander window (src/panels/commander.rs) */
.cmd-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cmd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cmd-pips{display:grid;grid-template-columns:repeat(20,1fr);gap:2px}
.cmd-pips i{height:8px;border-radius:3px;background:var(--card-line)}
.cmd-pips i.on{background:var(--star);box-shadow:inset 0 0 0 1px var(--ink)}
.cmd-hint{margin:0;font:600 .72rem/1.35 var(--font-ui)}
.cmd-why{margin:0;min-height:1.2em;font:700 .74rem/1.3 var(--font-ui);color:var(--coral-deep)}
.cmd-item{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
.cmd-item-ic{position:relative;flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);color:var(--ink);background:var(--star);box-shadow:0 0 0 2px var(--ink)}
.cmd-item-ic .icon{width:22px;height:22px}
/* An item's picture (scene/items.rs) is drawn for the bag's cells, the largest it is shown, and sized down everywhere else. */
canvas.item-pic{display:block;flex:none;width:72px;height:72px}
.cmd-item-ic canvas{width:34px;height:34px}
.cmd-count{position:absolute;right:-6px;bottom:-6px;min-width:20px;height:20px;padding:0 4px;display:grid;place-items:center;border-radius:999px;font:800 .68rem/1 var(--font-ui);font-style:normal;color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 2px var(--ink)}
.cmd-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:600 .76rem/1.3 var(--font-ui)}
.cmd-item-text b{font:800 .82rem/1.2 var(--font-ui);color:var(--ink)}
.cmd-item-act{display:flex;flex-direction:column;gap:4px;flex:none}
@media (max-width:640px){.cmd-grid{grid-template-columns:minmax(0,1fr)}}
/* Commander inventory: the commander with its gear slots, the bag grid, the picked item. */
.inv{display:grid;grid-template-columns:minmax(200px,.8fr) minmax(0,1.5fr);gap:10px}
@media (max-width:640px){.inv{grid-template-columns:minmax(0,1fr)}}
.inv-figure{align-items:center;gap:10px;padding-top:18px}
.inv-ribbon{padding:3px 22px;font:800 .8rem/1.3 var(--font-ui);color:var(--ink);background:var(--star);clip-path:polygon(0 0,100% 0,94% 50%,100% 100%,0 100%,6% 50%)}
.inv-stage{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:112px 56px;grid-template-areas:"avatar avatar avatar" "suit scanner engine";gap:8px;justify-content:center}
.inv-avatar{grid-area:avatar;justify-self:center;align-self:center;width:104px;height:104px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--sky);box-shadow:0 0 0 2px var(--ink)}
.inv-avatar canvas{width:96px;height:96px}
.inv-stage .slot-suit{grid-area:suit}
.inv-stage .slot-scanner{grid-area:scanner}
.inv-stage .slot-engine{grid-area:engine}
.inv-summary{text-align:center}
.inv-bag{gap:8px}
.inv-bag h3{margin:0}
.inv-filters{display:flex;gap:4px}
.inv-filter{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-md);cursor:pointer;color:var(--ink);background:var(--card);box-shadow:0 0 0 1.5px var(--card-line)}
.inv-filter .icon{width:16px;height:16px}
.inv-filter.active{background:var(--star);box-shadow:0 0 0 2px var(--ink)}
.inv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.inv-cell{position:relative;aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:0;border:0;border-radius:var(--r-md);cursor:pointer;color:var(--ink);background:var(--star);box-shadow:0 0 0 1.5px var(--ink)}
.inv-cell.gear{background:var(--mint);color:var(--on-mint)}
.inv-cell{grid-template-rows:1fr auto;padding:4px 2px}
.inv-cell .icon{width:50%;height:auto;aspect-ratio:1;align-self:center}
.inv-cell canvas{width:72%;height:auto;aspect-ratio:1;align-self:center}
.inv-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 .62rem/1.1 var(--font-ui)}
.inv-coming{margin:0 0 8px}
.inv-cell:hover{transform:translateY(-1px)}
.inv-cell.picked{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--star)}
.inv-cell.blank{cursor:default;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.inv-cell.blank:hover,.inv-cell.empty:hover{transform:none}
.inv-cell.empty{cursor:default;background:transparent;color:var(--ink-soft);box-shadow:none;outline:2px dashed var(--card-line);outline-offset:-3px}
.inv-cell.empty .icon{opacity:.45}
/* An empty slot shows what goes in it, as a ghost. */
.inv-cell.empty canvas{opacity:.38;filter:grayscale(1)}
.inv-cell .cmd-count{right:-4px;bottom:-4px}
.inv-tier{position:absolute;left:3px;top:3px;min-width:16px;padding:0 3px;border-radius:6px;font:800 .6rem/14px var(--font-ui);font-style:normal;text-align:center;color:var(--ink);background:var(--card);box-shadow:0 0 0 1px var(--ink)}
.inv-detail{margin-top:2px}
/* The hover card over an inventory cell: above it, kept inside the grid at the edges. */
.inv-tip{left:50%;bottom:calc(100% + 10px);display:flex;flex-direction:column;gap:3px;width:max-content;max-width:230px;text-align:left;font:600 .74rem/1.35 var(--font-ui);transform:translate(-50%,4px)}
.inv-tip b{margin:0;font:800 .84rem/1.2 var(--font-ui);color:var(--ink)}
.inv-tip-kind{font:800 .66rem/1.2 var(--font-ui);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft)}
.inv-tip::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);box-shadow:2px 2px 0 0 var(--ink)}
.has-tip:hover > .inv-tip,.has-tip:focus-visible > .inv-tip{transform:translate(-50%,0)}
.inv-grid .inv-cell:nth-child(6n+1) > .inv-tip{left:0;transform:translateY(4px)}
.inv-grid .inv-cell:nth-child(6n) > .inv-tip{left:auto;right:0;transform:translateY(4px)}
.inv-grid .inv-cell:nth-child(6n+1):hover > .inv-tip,.inv-grid .inv-cell:nth-child(6n):hover > .inv-tip{transform:none}
.inv-grid .inv-cell:nth-child(6n+1) > .inv-tip::after{left:18px}
.inv-grid .inv-cell:nth-child(6n) > .inv-tip::after{left:auto;right:8px}
.inv-cell:hover,.inv-cell:focus-visible{z-index:5}
@media (hover:none){.inv-tip{display:none}}

/* Settings, keyboard shortcuts, commander chip, Rankings, unit card over dialogs, number box, sector surface, toggle, game feel. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Settings and World settings: facts read left to right. */
.modal:has(.setting-row) .facts{grid-template-columns:max-content 1fr;gap:8px 18px}
.modal:has(.setting-row) .facts dd{text-align:left}

/* Keyboard shortcuts: a panel under the top bar's keyboard icon, shown on hover or focus. */
.shortcuts-wrap{position:relative}
.shortcuts-pop{position:absolute;top:calc(100% + 10px);right:-60px;z-index:400;width:min(460px,calc(100vw - 24px));padding:12px 16px 14px;border-radius:var(--r-md);background:var(--card,var(--mat-parchment));color:var(--ink,var(--text));box-shadow:0 0 0 2px var(--ink,var(--ink-950)),var(--shadow-3);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--dur-1),transform var(--dur-1),visibility var(--dur-1);pointer-events:none}
.shortcuts-pop h4{margin:0 0 6px;font:800 .66rem/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft,var(--text-muted))}
.shortcuts-wrap:hover .shortcuts-pop,.shortcuts-wrap:focus-within .shortcuts-pop{opacity:1;visibility:visible;transform:none}
@media (max-width:760px){ .shortcuts-wrap{display:none} }

/* Commander chip: the portrait in an experience ring, level badge, a dot for unspent points. */
.cmd-chip{position:relative;flex:none;width:46px;height:46px;padding:3px;border:0;border-radius:50%;cursor:pointer;background:conic-gradient(var(--gilt-400) var(--xp,0%),var(--ink-a35,rgba(0,0,0,.35)) 0);box-shadow:0 0 0 2px var(--ink-950,#000),var(--shadow-2)}
.cmd-chip-face{display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:50%;background:var(--mat-ink)}
.cmd-chip-face canvas{width:100%;height:100%}
.cmd-chip-level{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);min-width:20px;padding:1px 5px;border-radius:999px;background:var(--mat-gilt);color:var(--ink-900);font:var(--t-label);text-align:center;box-shadow:0 0 0 1.5px var(--ink-950,#000)}
.cmd-chip-dot{position:absolute;top:-2px;right:-2px;width:12px;height:12px;border-radius:50%;background:var(--coral,#ff7a6b);box-shadow:0 0 0 2px var(--ink-950,#000)}
.cmd-chip-away{position:absolute;bottom:-2px;left:-4px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 2px var(--ink-950,#000)}
.cmd-chip-away .icon{width:12px;height:12px}
.cmd-chip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:760px){ .cmd-chip{width:38px;height:38px} }


/* Rankings: pages, the podium and the sub-tabs of a board. */
.rank-table th.txt,.rank-table td.txt{text-align:left}
.rank-table th.num,.rank-table td.num{text-align:right}
.rank-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.rank-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rank-pod{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.rank-pod.you{box-shadow:0 0 0 2px var(--ink),var(--shadow-card)}
.rank-medal{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--star,var(--gilt-400));color:var(--on-star,var(--ink-900));font:900 1rem/1 var(--font-ui)}
.rank-facts dd{text-align:right}
.rank-hint{margin:0}
.rank-sub{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.rank-about{margin:0 0 8px;font:600 .78rem/1.35 var(--font-ui)}
@media (max-width:640px){ .rank-podium{grid-template-columns:minmax(0,1fr)} }

/* A unit card over a dialog (the send dialog's ships): above the dialog layer. */
.unit-card.over{z-index:1200}
/* On the right of its row (no room on the left): the arrow points left. */
.unit-card.flip{left:var(--tip-left);right:auto}
.unit-card.flip::after{right:auto;left:-8px;border:2px solid var(--ink);border-top:0;border-right:0;border-radius:0 0 0 3px}

/* The number box (ui/number.rs): one look wherever a number is typed. No spinner arrows: it is a
   text box that only takes digits. The container sets how wide it is. */
.num-input{box-sizing:border-box;width:84px;height:36px;padding:0 8px;border:0;border-radius:var(--r-sm);background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 2px var(--control-line);text-align:center;font:850 .95rem/1 var(--font-ui);font-variant-numeric:tabular-nums;transition:box-shadow var(--dur-1,.12s)}
.num-input::placeholder{color:var(--ink-soft);opacity:.5;font-weight:700}
.num-input:hover{box-shadow:inset 0 0 0 2px var(--ink-soft)}
.num-input:focus{outline:3px solid var(--focus);outline-offset:1px;box-shadow:inset 0 0 0 2px var(--ink)}
.num-input:disabled{opacity:.5;cursor:not-allowed}
.map-goto .num-input{width:56px;height:34px;padding:0 4px;font-size:.85rem}
.send-coords .num-input{width:84px;height:32px}
.ship-cell .num-input{grid-column:1/-1;width:100%;height:32px;margin-top:4px}
.send-cell .num-input{width:100%;height:30px;font-size:.88rem}
.sim-level .num-input{width:60px;height:30px;font-size:.85rem}
.sim-cell .num-input{grid-column:2;width:100%;height:30px;font-size:.85rem}


/* A planet's surface in the sector window (panels/fleet.rs) */
.sector-land{position:relative;margin:0 0 12px;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 0 0 2px var(--ink)}
.sector-land canvas{display:block;width:100%;height:auto}
.sector-land figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:5px 10px;border-radius:999px;font:800 .78rem/1.2 var(--font-ui);color:var(--on-chrome);background:rgb(17 14 46 / 78%)}

/* The on/off switch (ui/toggle.rs). */
.toggle{position:relative;flex:none;width:48px;height:28px;padding:0;border:0;border-radius:999px;cursor:pointer;background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--control-line);transition:background var(--dur-2,.18s),box-shadow var(--dur-2,.18s)}
.toggle-knob{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--ink-soft),0 1px 3px rgb(0 0 0 / 25%);transition:transform var(--dur-2,.18s) var(--ease-out,ease-out),box-shadow var(--dur-2,.18s)}
.toggle.on{background:var(--mint-deep);box-shadow:inset 0 0 0 2px var(--ink)}
.toggle.on .toggle-knob{transform:translateX(20px);box-shadow:0 0 0 2px var(--ink),0 1px 3px rgb(0 0 0 / 25%)}
.toggle:hover:not(.on){box-shadow:inset 0 0 0 2px var(--ink-soft)}
.toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.toggle,.toggle-knob{transition:none}}

/* Game feel (ui/fx.rs): the ribbon's icon pops and bar thickens when a store changes beyond its
   production, and the amount floats up (a gain) or falls (a spend). Only transform and opacity
   move. Silent with reduced motion. */
.fx-float{position:fixed;z-index:1300;pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%);font:850 .9rem/1 var(--font-ui);letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgb(0 0 0 / 65%);will-change:transform,opacity;animation:fx-rise 1.5s var(--ease-out) forwards}
.fx-float.gain{color:var(--mint)}
.fx-float.spend{color:var(--coral);animation-name:fx-fall}
.fx-float.warn{color:var(--star)}
@keyframes fx-rise{0%{opacity:0;transform:translate(-50%,-30%)}18%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-150%)}}
@keyframes fx-fall{0%{opacity:0;transform:translate(-50%,-60%)}15%{opacity:1}55%{opacity:1}100%{opacity:0;transform:translate(-50%,50px)}}
.fx-bump{will-change:transform;animation:fx-bump .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes fx-bump{35%{transform:scale(1.5)}}
.fx-fill{will-change:transform;transform-origin:center;animation:fx-fill .95s var(--ease-out)}
@keyframes fx-fill{25%,60%{transform:scaleY(2.4)}}
@media (prefers-reduced-motion:reduce){.fx-float{display:none}}

/* Shipyard window, Energy upkeep window. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* Shipyard (src/panels/yard.rs): uniform tiles on the left, the picked unit's detail on the right. */
.yd-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start;margin-top:12px}
.yd-list{display:flex;flex-direction:column;gap:14px;min-width:0}
.yd-group .overline{margin:0 0 8px}
.yd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.yd-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 9px;border-radius:var(--r-md);border:2px solid var(--card-line);background:var(--card-sunk);color:var(--ink);cursor:pointer;transition:transform var(--dur-1,120ms) ease,border-color var(--dur-1,120ms)}
.yd-tile:hover{transform:translateY(-1px);border-color:var(--control-line)}
.yd-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.yd-tile.selected{border-color:var(--ink);box-shadow:0 0 0 3px var(--star),var(--lip-sm)}
.yd-tile-art{display:grid;place-items:center;width:100%;height:64px;border-radius:var(--r-sm);background:var(--sky)}
.yd-tile-art canvas{width:96px;height:64px}
.yd-tile.locked .yd-tile-art canvas{filter:grayscale(.85) opacity(.55)}
.yd-tile-name{font:800 .8rem/1.15 var(--font-ui);text-align:center;min-height:1.15em}
/* Owned, top left; a mint badge means it can be built right now. */
.yd-have{position:absolute;top:4px;left:4px;min-width:24px;height:22px;padding:0 6px;box-sizing:border-box;display:grid;place-items:center;border-radius:999px;color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--ink);font:var(--t-num-s);font-variant-numeric:tabular-nums}
.yd-tile.ready .yd-have{color:var(--on-mint);background:var(--mint)}
.yd-queued{position:absolute;top:4px;right:4px;height:22px;padding:0 6px;display:grid;place-items:center;border-radius:999px;color:var(--on-star);background:var(--star);box-shadow:0 0 0 2px var(--ink);font:var(--t-num-s);font-variant-numeric:tabular-nums}
.yd-lock{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--ink)}
.yd-lock svg{width:16px;height:16px;fill:var(--locked,#d5cfee);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.yd-lock svg path{fill:none}

.yd-detail{position:sticky;top:52px;display:flex;flex-direction:column;gap:10px;padding:12px;max-height:calc(var(--modal-h) - 230px);overflow:auto}
.yd-detail-head{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:12px}
.yd-detail-art{display:grid;place-items:center;height:80px;border-radius:var(--r-md);background:var(--sky);box-shadow:0 0 0 2px var(--ink)}
.yd-detail-art canvas{width:120px;height:72px;max-width:100%}
.yd-detail-art.locked canvas{filter:grayscale(.85) opacity(.55)}
.yd-detail-title{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.yd-detail-title .overline{flex:1 1 100%;margin:0}
.yd-detail-title h3{margin:0;font:var(--t-title-m);color:var(--ink)}
.yd-blurb{margin:0;font:600 .8rem/1.35 var(--font-ui);color:var(--ink-soft)}
.yd-detail .ship-special{margin:0}
/* Stat bars: one scale per tab, so units compare at a glance. */
.yd-bars{display:flex;flex-direction:column;gap:5px;margin:0}
.yd-bar{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:8px;cursor:help}
.yd-bar dt{font:800 .74rem/1 var(--font-ui);color:var(--ink-soft)}
.yd-bar dd{display:grid;grid-template-columns:minmax(0,1fr) 62px;align-items:center;gap:8px;margin:0}
.yd-track{height:10px;border-radius:999px;background:var(--card-line);overflow:hidden}
.yd-track i{display:block;height:100%;border-radius:999px;background:var(--mint-deep)}
.yd-bar b{font:850 .85rem/1 var(--font-ui);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.yd-minor{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font:700 .76rem/1.2 var(--font-ui)}
.yd-minor div{display:flex;gap:6px;cursor:help}
.yd-minor dt{color:var(--ink-soft)}
.yd-minor dd{margin:0;color:var(--ink)}
.yd-price,.yd-total{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-top:8px;border-top:2px solid var(--card-line)}
.yd-total-label{flex:1 1 100%;font:800 .72rem/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.yd-total-time{margin-left:auto;font:800 .8rem/1 var(--font-ui);color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.yd-detail .cost-tiles{gap:5px}
.yd-detail .cost-tile{padding:4px 8px 4px 4px;font-size:.82rem}
.yd-detail .cost-tile .icon{width:18px;height:18px}
.yd-order{display:flex;flex-direction:column;gap:10px}
.yd-qty{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:6px}
.yd-qty .num-input{width:100%;height:38px}
.yd-step{height:38px;padding:0;border:2px solid var(--ink);border-radius:var(--r-sm);background:var(--card);color:var(--ink);box-shadow:var(--lip-sm);font:900 1.15rem/1 var(--font-ui);cursor:pointer}
.yd-step:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.yd-step:active:not(:disabled){transform:translateY(2px);box-shadow:none}
.yd-presets{grid-column:1/-1;display:flex;gap:6px}
.yd-preset{flex:1;justify-content:center;cursor:pointer;border:0}
.yd-preset.on{color:var(--on-star);background:var(--star)}
.yd-preset:disabled{opacity:.45;cursor:not-allowed}
.yd-build{width:100%;min-height:44px;justify-content:center;font-size:.95rem}
.yd-short{margin:0;font:700 .78rem/1.3 var(--font-ui);color:var(--coral-deep)}
.yd-locked{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:2px solid var(--card-line)}
.yd-locked h4{margin:0;font:800 .72rem/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
.yd-locked .reqs{margin:0}
.yd-note{margin:0 0 4px;font:700 .82rem/1.35 var(--font-ui);color:var(--ink-soft)}
@media (max-width:860px){.yd-layout{grid-template-columns:1fr}.yd-detail{position:static}}

/* The Energy upkeep window (panels/upkeep.rs): a small picture beside each row's name. */
.up-name canvas{width:36px;height:36px;flex:none}
.up-name > span small{display:block;font:600 .74rem/1.2 var(--font-ui);color:var(--ink-soft)}

/* Messages window, commander suggestions, side section titles. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ── Messages: the folder on the left, the open letter on the right; the Write tab ── */
.mail{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:var(--gap);align-items:start;min-height:0}
.mail-list{display:flex;flex-direction:column;background:var(--card-sunk);border:2px solid var(--card-line);border-radius:var(--r-md);overflow:hidden}
.mail-tools{display:flex;align-items:center;gap:8px;min-height:50px;padding:7px 10px;border-bottom:2px solid var(--card-line);background:var(--card)}
.mail-filter{flex:1;min-width:0;height:34px;padding:0 10px;border:0;border-radius:var(--r-sm);color:var(--ink);background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--card-line);font:700 .8rem/1 var(--font-ui)}
.mail-filter:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.mail-picked{margin-right:auto;font:800 .78rem/1 var(--font-ui);color:var(--ink)}
.mail-confirm{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:800 .78rem/1.2 var(--font-ui);color:var(--coral-deep)}
.mail-tools .mail-confirm{flex:1;justify-content:flex-end}
.mail-tools .mail-confirm span{margin-right:auto}
.mail-check{display:grid;place-items:center;width:26px;min-height:26px;flex:none;cursor:pointer}
.mail-check input{width:16px;height:16px;accent-color:var(--chrome-raised);cursor:pointer}
.mail-rows{list-style:none;margin:0;padding:0;max-height:560px;overflow-y:auto}
.mail-row{position:relative;display:flex;align-items:flex-start;gap:4px;padding:0 8px 0 10px;border-bottom:1px solid var(--card-line);transition:background var(--dur-1)}
.mail-row:last-child{border-bottom:0}
.mail-row:hover{background:var(--card)}
.mail-row.picked{background:#f3eeff}
.mail-row.open{background:var(--card);box-shadow:inset 4px 0 0 var(--star)}
.mail-row .mail-check{margin-top:14px}
.mail-open{flex:1;min-width:0;display:flex;align-items:flex-start;gap:9px;padding:10px 2px;text-align:left;background:none;border:0;cursor:pointer;color:var(--ink)}
.mail-open:focus-visible{outline:3px solid var(--focus);outline-offset:-2px;border-radius:var(--r-sm)}
.mail-lines{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mail-who{display:flex;align-items:baseline;gap:6px;font:700 .8rem/1.2 var(--font-ui)}
.mail-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.mail-who time{margin-left:auto;flex:none;font:600 .72rem/1 var(--font-ui);color:var(--ink-soft)}
.mail-dot{display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:1px;border-radius:50%;background:var(--star);box-shadow:0 0 0 2px var(--ink)}
.mail-subject{font:700 .85rem/1.25 var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-excerpt{font:500 .76rem/1.3 var(--font-ui);color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-row.unread .mail-who b,.mail-row.unread .mail-subject{font-weight:900}
.mail-row.unread .mail-excerpt{color:var(--ink)}
.mail-none{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 18px;text-align:center}
.mail-none b,.mail-blank b{font:var(--t-title-s);color:var(--ink)}
.mail-none p,.mail-blank p{margin:0;max-width:300px;font:600 .8rem/1.4 var(--font-ui)}
.mail-more{margin:8px 10px 10px}
.mail-reader{min-width:0}
.mail-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:280px;padding:24px;text-align:center;border:2px dashed var(--card-line);border-radius:var(--r-md)}
.mail-blank-icon{width:54px;height:54px;opacity:.85}
.mail-ava{--hue:250;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;color:#fff;background:hsl(var(--hue) 55% 52%);box-shadow:0 0 0 2px var(--ink);font:900 1.05rem/1 var(--font-ui);text-shadow:0 1px 0 rgb(0 0 0 / 25%)}
.mail-ava.sm{width:28px;height:28px;font-size:.78rem}
.mail-letter{display:flex;flex-direction:column;gap:12px;padding:16px 18px;background:var(--card-sunk);border:2px solid var(--card-line);border-radius:var(--r-md);animation:fade var(--dur-2) ease-out}
.mail-head{display:flex;align-items:flex-start;gap:12px}
.mail-head-text{flex:1;min-width:0}
.mail-head h3{margin:0 0 3px;font:var(--t-title-m);color:var(--ink);overflow-wrap:anywhere}
.mail-head p{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:2px 0 0;font:600 .78rem/1.3 var(--font-ui);color:var(--ink-soft)}
.mail-head p b{color:var(--ink)}
.mail-head .chip{padding:1px 7px;font-size:.66rem}
.mail-name{padding:1px 7px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--card-line);color:var(--ink);font-weight:700}
.mail-head-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;flex:none}
.mail-head-acts .mail-confirm{margin-left:0}
.mail-body{white-space:pre-wrap;overflow-wrap:anywhere;font:500 .92rem/1.55 var(--font-ui);color:var(--ink);padding:14px 16px;background:var(--card);border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--card-line);max-height:340px;overflow-y:auto}
.mail-quick{display:flex;flex-direction:column;gap:8px}
.mail-quick textarea{min-height:74px;padding:10px 12px;border:0;border-radius:var(--r-sm);resize:vertical;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line);font:600 .88rem/1.45 var(--font-ui)}
.mail-quick textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mail-quick-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
.mail-quick-foot small{margin-right:auto;font:600 .72rem/1.2 var(--font-ui)}
.mail-back{display:none;align-self:flex-start}
.mail-write{width:100%}
.mail-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mail-label small{font:700 .72rem/1 var(--font-ui)}
.mail-to{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:46px;padding:5px 6px;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line)}
.mail-to:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.auth-field .mail-to input{flex:1;min-width:170px;height:32px;padding:0 6px;box-shadow:none;background:transparent}
.auth-field .mail-to input:focus-visible{outline:0}
.mail-tag{gap:6px;padding:2px 3px 2px 2px;font-size:.78rem}
.mail-tag .mail-ava.sm{width:22px;height:22px;font-size:.66rem;box-shadow:0 0 0 1.5px var(--ink)}
.mail-tag button{display:grid;place-items:center;width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font:900 .7rem/1 var(--font-ui)}
.mail-tag button:hover{background:var(--card-line)}
.mail-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;display:block;list-style:none;margin:0;padding:4px;max-height:280px;overflow-y:auto;background:var(--card);border-radius:var(--r-md);box-shadow:0 0 0 2px var(--ink),var(--shadow-card);animation:fade var(--dur-1) ease-out}
.mail-suggest button{display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;text-align:left;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);cursor:pointer;font:700 .85rem/1.2 var(--font-ui)}
.mail-suggest button.active{background:var(--star-soft)}
.mail-suggest-none{padding:10px 12px;font:700 .8rem/1.3 var(--font-ui);color:var(--ink-soft)}
.mail-suggest-none.bad{color:var(--coral-deep)}
/* The Alliance window's invite box opens the same list as the Messages window's To. */
.al-invite-row{position:relative}
.mail-text{min-height:210px;padding:10px 12px;border:0;border-radius:var(--r-sm);resize:vertical;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line);font:600 .9rem/1.45 var(--font-ui)}
.mail-text:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mail-count.over{color:var(--coral-deep);font-weight:900}
.mail-send-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.mail-send-row > small{margin-right:auto;font:700 .76rem/1.3 var(--font-ui)}
.mail-send-row .mail-confirm{margin-left:0}
.btn .icon{width:16px;height:16px}
.mail-row.skel{pointer-events:none;align-items:center;gap:10px;padding:12px 12px 12px 40px}
.mail-row.skel .mail-ava{background:var(--card-line);box-shadow:none}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:6px}
.skel-lines i,.skel-block{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--card-line),var(--card),var(--card-line));background-size:200% 100%;animation:mail-shine 1.2s linear infinite}
.skel-block{height:120px;border-radius:var(--r-sm)}
@keyframes mail-shine{to{background-position:-200% 0}}
@media (max-width:760px){
  .mail{grid-template-columns:1fr}
  .mail-rows{max-height:none}
  .mail.reading .mail-list{display:none}
  .mail:not(.reading) .mail-reader{display:none}
  .mail-back{display:inline-flex}
  .mail-head{flex-wrap:wrap}
  .mail-head-acts{width:100%;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.skel-lines i,.skel-block{animation:none}.mail-letter,.mail-suggest{animation:none}}
/* The side column's section titles (Fleet, In orbit, ...) on a dark band, readable over the planet art. */
.hud-sec-head{padding:5px 8px;border-radius:var(--r-sm);background:rgb(20 12 60 / 62%);box-shadow:0 1px 2px rgb(20 12 60 / 30%)}
.hc-hint{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding-top:7px;border-top:1px solid var(--card-line);font:700 .74rem/1.2 var(--font-ui);color:var(--ink-soft)}
.hc-hint .icon{width:14px;height:14px;flex:none}

/* Explorations, the report picture, exploration points, the card game. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The Commander's Explorations tab (panels/commander.rs): a picture on top, the figures in a row
   of small tiles, the reason and the button on one line at the foot. */
.ex-card{padding:0;gap:0;overflow:hidden}
.ex-art{position:relative;line-height:0}
.ex-art canvas{display:block;width:100%;height:auto;aspect-ratio:320/105;box-shadow:0 2px 0 var(--ink)}
.ex-art .chip{position:absolute;top:8px;right:8px;line-height:1.2;box-shadow:0 0 0 2px var(--ink)}
.ex-body{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px}
.ex-body h3{margin:0}
.ex-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ex-stat{display:flex;flex-direction:column;gap:3px;padding:7px 10px;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.ex-stat span{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.ex-stat b{font:800 .86rem/1.2 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.ex-stat.wide{grid-column:1/-1}
.ex-stat.span2{grid-column:span 2}
.ex-stat b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ex-stat.wide b{white-space:normal}
.ex-foot .cmd-why.ready{color:var(--mint-deep)}
.ex-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:2px solid var(--card-line)}
.ex-foot p{margin:0;flex:1;min-width:0;font:700 .76rem/1.3 var(--font-ui)}
.ex-foot .cmd-why:empty{display:none}
.ex-foot .btn{flex:none}
.ex-foot .btn .icon{width:15px;height:15px;margin-right:4px}
.ex-live{flex-direction:row}
.ex-live .ex-art{flex:0 0 42%}
.ex-live .ex-art canvas{height:100%;min-height:170px;aspect-ratio:auto;object-fit:cover;box-shadow:2px 0 0 var(--ink)}
.ex-live .ex-body{flex:1;min-width:0}
@media (max-width:640px){.ex-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ex-live{flex-direction:column}.ex-live .ex-art canvas{min-height:0;aspect-ratio:320/105;box-shadow:0 2px 0 var(--ink)}}

/* The picture over an opened report (panels/reports.rs `report_hero`, scene/reportart.rs): the
   scene with its type and subject on a soft shade at the bottom, the outcome colour as its rim. */
.report-hero{position:relative;flex:none;margin:4px 4px 12px;border-radius:var(--r-md);overflow:hidden;line-height:0;box-shadow:0 0 0 2px var(--ink)}
.report-hero.good{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--mint)}
.report-hero.mixed{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--star)}
.report-hero.bad{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--coral)}
.report-hero canvas{display:block;width:100%;height:auto;aspect-ratio:480/110}
.report-hero-text{position:absolute;left:12px;bottom:10px;display:flex;line-height:1.2}
.report-hero-text .chip{flex:none;box-shadow:0 0 0 2px var(--ink)}
.report-hero.good .chip{color:var(--on-mint);background:var(--mint)}
.report-hero.mixed .chip{color:var(--on-star);background:var(--star)}
.report-hero.bad .chip{color:var(--on-coral);background:var(--coral)}
.rep-row .report-type{margin:2px}
/* Exploration points, like Rise of Empires' adventure points: the Explorations tab's box and the
   count on the commander chip. */
.ex-points{flex-direction:row;align-items:center;gap:10px;padding:10px 12px}
.ex-points h3{margin:0 auto 0 0}
.ex-points .ex-stat{min-width:150px}

/* The card game (src/panels/cards.rs), the Commander window's last tab: a night-sky table with the
   quartermaster and its speech, the free-games pennant, five cards in a fan that turn over in 3-D,
   and what to do under them. */
.card-game{display:flex;flex-direction:column;gap:10px}
.card-table{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 16px 14px;border-radius:var(--r-lg);color:var(--on-sky);background:radial-gradient(120% 90% at 50% 0%,var(--sky-glow),var(--sky) 60%,var(--sky-deep));box-shadow:0 0 0 2px var(--ink),var(--shadow-card);overflow:hidden}
.card-table::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(1.4px 1.4px at 12% 22%,var(--star-dot),transparent),radial-gradient(1.2px 1.2px at 78% 14%,var(--star-dot),transparent),radial-gradient(1.6px 1.6px at 88% 62%,var(--star-dot),transparent),radial-gradient(1.1px 1.1px at 30% 80%,var(--star-dot),transparent),radial-gradient(1.3px 1.3px at 55% 40%,var(--star-dot),transparent)}
.card-table > *{position:relative}
.card-dealer{align-self:stretch;display:flex;align-items:center;gap:12px;padding-right:120px}
.card-dealer-face{flex:none;width:64px;height:64px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:var(--chrome);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--star)}
.card-dealer-face canvas{width:64px;height:64px}
.card-speech{position:relative;margin:0;padding:9px 14px;border-radius:var(--r-md);font:700 .86rem/1.35 var(--font-ui);color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--ink),var(--lip-sm)}
.card-speech::before{content:"";position:absolute;left:-8px;top:50%;width:12px;height:12px;transform:translateY(-50%) rotate(45deg);background:var(--card);box-shadow:-2px 2px 0 0 var(--ink)}
.card-pennant{position:absolute;top:0;right:18px;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:92px;padding:8px 10px 16px;color:var(--on-star);background:var(--star);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);text-align:center}
.card-pennant b{font:var(--t-title-l)}
.card-pennant small{font:800 .66rem/1.15 var(--font-ui)}
.card-pennant .card-next{color:var(--star-deep)}
.card-fan{display:flex;justify-content:center;align-items:flex-end;gap:12px;padding:6px 0 4px;perspective:900px}
.play-card{--turn-delay:0ms;position:relative;flex:none;width:118px;height:166px;padding:0;border:0;background:none;cursor:pointer;transition:transform var(--dur-2,.2s) var(--ease-out,ease-out)}
.play-card:nth-child(1){transform:rotate(-8deg) translateY(10px)}
.play-card:nth-child(2){transform:rotate(-4deg) translateY(3px)}
.play-card:nth-child(4){transform:rotate(4deg) translateY(3px)}
.play-card:nth-child(5){transform:rotate(8deg) translateY(10px)}
button.play-card:not(:disabled):hover,button.play-card:focus-visible,.play-card.lifted{transform:translateY(-12px) rotate(0)}
button.play-card:disabled{cursor:default}
button.play-card:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--r-md)}
.play-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease-out,ease-out)}
.play-card.turn .play-card-inner{animation:card-turn .6s var(--ease-out,ease-out) var(--turn-delay) both}
.play-card.up .play-card-inner{transform:rotateY(180deg)}
@keyframes card-turn{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.play-card-back,.play-card-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--r-md);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 2px var(--ink),var(--lip)}
/* Both sides are pictures (scene/cards.rs, 118 x 166 units a card): the canvas fills the card and takes its corners. */
.play-card-back{background:var(--chrome)}
.play-card-pic{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit}
.play-card-face{transform:rotateY(180deg);color:var(--ink);background:var(--card);text-align:center}
/* What is written over a face sits where the picture leaves room: the name on its plate (cards.rs PLATE), the tier under it,
   and a count on the foot of the window, where a piece of gear wears its rank bar. */
.play-card-face b{position:absolute;left:11.5%;right:11.5%;top:62%;height:22.4%;display:grid;place-items:center;font:800 .78rem/1.12 var(--font-ui)}
.play-card-face small{position:absolute;left:0;right:0;top:85%;height:10%;display:grid;place-items:center;font:700 .66rem/1.1 var(--font-ui);color:var(--text-muted)}
.play-card-face .cmd-count{left:50%;right:auto;top:56.6%;bottom:auto;transform:translate(-50%,-50%)}
.play-card-face.gear .cmd-count{left:auto;right:12%;top:9.5%;transform:none}
.play-card.missed .play-card-face{filter:saturate(.35) brightness(.88)}
.play-card.dropping .play-card-face{filter:grayscale(.7) brightness(.85);box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--coral),var(--lip)}
.play-card.kept{z-index:1}
.play-card.kept .play-card-face{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--mint),0 0 22px rgb(95 220 176 / 55%)}
.play-card-tag{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);padding:2px 10px;border-radius:999px;font:800 .68rem/1.3 var(--font-ui);color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 2px var(--ink);white-space:nowrap;animation:fade .3s .6s both}
.play-card-tag.drop{color:var(--on-coral);background:var(--coral);animation:none}
.card-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;font:700 .82rem/1.3 var(--font-ui);color:var(--on-sky-soft)}
.card-game .btn.gilt{color:var(--on-star);background:var(--star)}
.card-four .card-price{padding:1px 8px;border-radius:999px;font:800 .7rem/1.4 var(--font-ui);background:var(--card);box-shadow:0 0 0 1.5px var(--ink)}
.card-details,.card-prizes ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.card-details li,.card-prizes li{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--r-md);font:600 .76rem/1.3 var(--font-ui);background:var(--card-sunk)}
.card-details li .cmd-item-ic,.card-prizes li .cmd-item-ic{width:32px;height:32px}
.card-details li .cmd-item-ic .icon,.card-prizes li .cmd-item-ic .icon{width:18px;height:18px}
.card-details li .cmd-item-ic canvas,.card-prizes li .cmd-item-ic canvas{width:28px;height:28px}
.card-details li.kept{background:#dcf7ee;box-shadow:inset 0 0 0 2px var(--mint)}
.card-details strong,.card-prizes strong{color:var(--ink)}
.card-prizes summary{cursor:pointer;font:800 .82rem/1.3 var(--font-ui);color:var(--ink)}
.card-prizes ul{margin-top:8px}
.card-prizes li > span:nth-child(2){flex:1;min-width:0}
.card-chance{font:800 .78rem/1 var(--font-ui);color:var(--ink)}
@media (max-width:640px){
  .card-dealer{padding-right:0;padding-top:64px}
  .card-fan{gap:4px}
  .play-card{width:64px;height:90px}
  .play-card-back,.play-card-face{border-radius:9px}
  .play-card-face b{top:58%;height:28%;font-size:.56rem}
  .play-card-face small{display:none}
  .play-card-face .cmd-count,.play-card-face.gear .cmd-count{left:auto;right:8%;top:7%;transform:none;min-width:15px;height:15px;padding:0 3px;font-size:.54rem}
}

/* Alliance window, mission pictures. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ── Alliance window: a banner, members beside inviting; compact boxes ── */
.btn.xs{min-height:26px;padding:3px 10px;font-size:.74rem;box-shadow:var(--lip-sm)}
.al-problem{align-items:center;margin-bottom:10px}
.al-problem span{flex:1}
.al-x{display:grid;place-items:center;width:20px;height:20px;flex:none;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;font:900 .68rem/1 var(--font-ui)}
.al-x:hover{background:rgb(0 0 0 / 8%)}
.al-x:disabled{opacity:.4;cursor:not-allowed}
.al-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--card-sunk);border:2px solid var(--card-line);border-radius:var(--r-md)}
.al-card + .al-card{margin-top:10px}
.al-card-head{display:flex;align-items:baseline;gap:10px}
.al-card-head h4{margin:0;font:var(--t-title-s);color:var(--ink)}
.al-card-head .muted{margin-left:auto;font:700 .72rem/1.2 var(--font-ui);text-align:right}
.al-card-head .chip{margin-left:auto}
.al-empty{align-items:flex-start}
.al-empty p{margin:0;font:600 .82rem/1.4 var(--font-ui)}
.al-badge{display:grid;place-items:center;flex:none;min-width:58px;height:58px;padding:0 8px;border-radius:var(--r-md);color:var(--on-chrome);background:var(--chrome-raised);box-shadow:0 0 0 2px var(--ink),var(--lip-sm);font:900 1.05rem/1 var(--font-ui);letter-spacing:.06em}
.al-badge.sm{min-width:44px;height:36px;font-size:.8rem;border-radius:var(--r-sm)}
.al-badge.xs{display:inline-grid;min-width:0;height:22px;padding:0 7px;font-size:.7rem;border-radius:6px;box-shadow:0 0 0 1.5px var(--ink)}
.al-banner{display:flex;align-items:center;gap:14px;padding:12px 14px;margin-bottom:12px;border-radius:var(--r-md);background:var(--card);border:2px solid var(--card-line)}
.al-banner-text{flex:1;min-width:0}
.al-banner h3{margin:0 0 4px;font:var(--t-title-m);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-banner p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font:700 .76rem/1.2 var(--font-ui);color:var(--ink-soft)}
.al-banner p > span:not(.al-meter) + span:not(.al-meter)::before{content:"·";margin-right:12px;color:var(--card-line)}
.al-meter{display:inline-block;width:70px;height:6px;margin-left:-4px;border-radius:999px;background:var(--card-sunk);box-shadow:inset 0 0 0 1px var(--card-line);overflow:hidden}
.al-meter i{display:block;height:100%;background:var(--mint)}
.al-banner-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;flex:none}
.al-confirm{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;font:800 .76rem/1.2 var(--font-ui);color:var(--coral-deep)}
.al-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;align-items:start}
.al-side{display:flex;flex-direction:column}
.al-members,.al-invites,.al-facts,.al-pendings{list-style:none;margin:0;padding:0}
.al-members{display:flex;flex-direction:column;max-height:470px;overflow-y:auto;margin:0 -6px}
.al-member,.al-invite{display:flex;align-items:center;gap:10px;min-height:40px;padding:5px 6px;border-radius:var(--r-sm)}
.al-member + .al-member{border-top:1px solid var(--card-line)}
.al-member:hover{background:var(--card)}
.al-member.you{background:var(--star-soft)}
.al-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;flex:1;min-width:0;font:700 .84rem/1.2 var(--font-ui);color:var(--ink)}
.al-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-who .chip{padding:1px 7px;font-size:.64rem}
.al-invite .al-who{flex-direction:column;align-items:flex-start;gap:2px}
.al-invite .al-who small{font:600 .72rem/1.2 var(--font-ui)}
.al-invite + .al-invite{border-top:1px solid var(--card-line)}
.al-points{flex:none;min-width:64px;text-align:right;font:800 .8rem/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.al-acts{display:flex;align-items:center;justify-content:flex-end;gap:4px;flex:none;min-width:64px}
.al-icon{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--card);color:var(--ink);cursor:pointer;font:900 .7rem/1 var(--font-ui)}
.al-icon svg{width:14px;height:14px}
.al-icon:hover{background:var(--star-soft)}
.al-icon .tip{white-space:nowrap}
.al-row{display:flex;gap:6px}
.al-row .al-input{flex:1}
.al-input{width:100%;min-width:0;height:34px;flex:none;padding:0 10px;border:0;border-radius:var(--r-sm);color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 2px var(--control-line);font:700 .84rem/1 var(--font-ui)}
.al-input::placeholder{color:var(--ink-soft);opacity:.6;font-weight:600}
.al-input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.al-input.bad{box-shadow:inset 0 0 0 2px var(--coral)}
.al-input:disabled{opacity:.55;cursor:not-allowed}
.al-note{margin:0;font:600 .74rem/1.35 var(--font-ui);color:var(--ink-soft)}
.al-sub{margin-top:2px;font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.al-pendings{display:flex;flex-wrap:wrap;gap:6px}
.al-pending{gap:4px;padding-right:3px}
.al-found{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:8px;align-items:end}
.al-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.al-field > span{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.al-tag .al-input{text-transform:uppercase;letter-spacing:.08em}
.al-found .btn{height:34px;min-height:34px}
.al-preview{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:22px;font:700 .76rem/1.3 var(--font-ui);color:var(--ink)}
.al-warn{color:var(--coral-deep)}
.al-facts{display:flex;flex-direction:column;gap:7px}
.al-facts li{display:flex;align-items:flex-start;gap:8px;font:600 .78rem/1.35 var(--font-ui);color:var(--ink)}
.al-facts li.muted{color:var(--ink-soft)}
.al-facts svg{width:15px;height:15px;flex:none;margin-top:1px;color:var(--ink-soft)}
@media (max-width:760px){
  .al-grid{grid-template-columns:1fr}
  .al-side{margin-top:10px}
  .al-banner{flex-wrap:wrap}
  .al-banner-acts{width:100%;justify-content:flex-start}
  .al-found{grid-template-columns:84px minmax(0,1fr)}
  .al-found .btn{grid-column:1/-1}
}
/* The send dialog's mission pictures (scene/missionart.rs): a strip in the Mission box that follows
   the pick, and the confirm step's banner behind the two plates. */
.send-art{line-height:0;border-bottom:2px solid var(--card-line)}
.send-art canvas{display:block;width:100%;height:auto;aspect-ratio:560/120}
.send-banner{min-height:150px}
.send-banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.send-banner .send-plate,.send-banner .send-banner-kind{position:relative;z-index:1}
.send-banner .send-banner-kind{position:absolute}

/* Commander attributes, quest book, Mk III gear. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The Commander's Attributes tab (panels/commander.rs): the figure on the left as in the
   Inventory, the level and the four attributes as compact rows beside it. */
.attr-panel{gap:12px}
.attr-head{padding-bottom:10px;border-bottom:2px solid var(--card-line)}
.attr-level{display:flex;flex-direction:column;gap:5px}
.attr-level h3{margin:0}
.attr-level small{font:700 .74rem/1.2 var(--font-ui)}
.attr-xp i{background:var(--star)}
.attr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.attr-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);background:var(--card-sunk)}
/* An attribute's emblem is a medal of its own (scene/ships.rs, draw_attribute): the picture is the disc. */
.attr-ic{flex:none;display:grid;place-items:center;width:56px;height:56px}
.attr-ic canvas{display:block;width:56px;height:56px}
@media (max-width:640px){.attr-ic,.attr-ic canvas{width:44px;height:44px}}
.attr-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.attr-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.attr-name b{font:800 .88rem/1.2 var(--font-ui);color:var(--ink)}
.attr-count{font:800 .72rem/1 var(--font-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.attr-text small{font:700 .74rem/1.3 var(--font-ui);color:var(--ink)}
.attr-next{color:var(--mint-deep)}
.attr-plus{width:34px;height:34px;padding:0;font:900 1.2rem/1 var(--font-ui)}
.attr-row .cmd-pips i{height:6px}
/* Quest book (panels/quests.rs): the tab's open quests on the left, the picked one on the right,
   headed by its narrator (Ines in mint, Bram in navy and gilt) and what they say. */
.quest-page{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:12px;align-items:start}
.quest-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.quest-pick{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:6px 12px;border:0;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line);font:800 .84rem/1.25 var(--font-ui);color:var(--ink);text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.quest-pick:hover:not(.active){background:var(--card-sunk)}
.quest-pick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.quest-pick.active{background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--ink),inset 4px 0 0 var(--star-deep)}
.quest-pick.done:not(.active){box-shadow:inset 0 0 0 2px var(--mint-deep)}
.quest-mark{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--star-deep)}
.quest-mark.done{color:var(--on-mint,#1f3b33);background:var(--mint);font:900 .8rem/1 var(--font-ui);box-shadow:0 0 0 1.5px var(--ink)}
.quest-detail{display:flex;flex-direction:column;gap:12px;padding:14px 16px}
.quest-head{display:flex;align-items:flex-start;gap:12px}
.quest-face{flex:none;width:84px;height:84px;border-radius:var(--r-md);overflow:hidden;background:var(--sky);box-shadow:0 0 0 2px var(--ink)}
.quest-detail.ines .quest-face{background:linear-gradient(160deg,#bff3df,#7fd9b8)}
.quest-detail.bram .quest-face{background:linear-gradient(160deg,#c9c1f7,#8f84d6)}
.quest-face canvas{display:block;width:84px;height:84px}
.quest-said{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:8px 12px;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.quest-said::before{content:"";position:absolute;left:-8px;top:22px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:8px solid var(--card-line)}
.quest-said .overline{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.quest-line{margin:0;font:italic 600 .86rem/1.4 var(--font-ui);color:var(--ink)}
.quest-title{margin:0;font:600 1.15rem/1.2 var(--font-display);color:var(--ink)}
.quest-progress{position:relative;height:24px;border-radius:999px;background:rgb(42 33 84 / 12%);overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--card-line)}
.quest-progress i{position:absolute;inset:0 auto 0 0;background:var(--mint);border-radius:999px;transition:width .4s}
.quest-progress span{position:relative;display:grid;place-items:center;height:100%;font:850 .78rem/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--ink)}
.quest-reward{display:flex;flex-direction:column;gap:6px}
.quest-reward .overline{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.quest-reward-tiles{display:flex;flex-wrap:wrap;gap:6px}
.quest-reward-tile{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line);font:800 .82rem/1.2 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.quest-reward-tile .icon{width:18px;height:18px;color:var(--star-deep)}
.quest-reward-tile small{font:700 .7rem/1.2 var(--font-ui);color:var(--ink-soft)}
.quest-foot{display:flex;justify-content:flex-end;padding-top:10px;border-top:2px solid var(--card-line)}
.quest-blurb{margin:10px 0 0;font:600 .76rem/1.35 var(--font-ui);text-align:center}
.quest-empty{flex-direction:row;align-items:center;gap:14px;padding:16px}
.quest-empty canvas{flex:none;width:96px;height:96px;border-radius:var(--r-md);background:var(--sky);box-shadow:0 0 0 2px var(--ink)}
.quest-empty p{margin:0;font:700 .9rem/1.4 var(--font-ui);color:var(--ink)}
@media (max-width:640px){.quest-page{grid-template-columns:1fr}}

/* Mk III, the last gear tier (panels/commander.rs): gold cells with a soft shine, "Final tier" in
   the tooltip, and the full set's line under the commander. */
.inv-cell.mk3{background:linear-gradient(150deg,#ffe9a8 0%,var(--star) 55%,#f5b83d 100%);color:var(--on-star);box-shadow:0 0 0 1.5px var(--ink),0 0 10px rgb(255 207 92 / 55%)}
.inv-cell.mk3::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgb(255 255 255 / 45%) 48%,transparent 60%);background-size:250% 100%;animation:mk3-shine 4s ease-in-out infinite}
.inv-cell.mk3.picked{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--star)}
@keyframes mk3-shine{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.inv-cell.mk3::after{display:none}}
.inv-tip-final{align-self:flex-start;padding:1px 7px;border-radius:999px;font:800 .66rem/1.3 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--on-star);background:var(--star)}
.inv-set{margin:0;padding:6px 10px;border-radius:var(--r-md);font:700 .76rem/1.35 var(--font-ui);text-align:center;color:var(--ink-soft);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.inv-set.on{color:var(--on-star);background:var(--star);box-shadow:0 0 0 1.5px var(--ink),0 0 12px rgb(255 207 92 / 50%)}
/* The Alliance tab: the alliance's three goals this week (panels/goals.rs). */
.goals-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.goals-head p{margin:0;font:var(--t-body-s);color:var(--ink-soft)}
.goals-head .chip{white-space:nowrap;font-variant-numeric:tabular-nums}
.goals{display:grid;grid-template-columns:1fr;gap:12px}
.goal-card{display:flex;flex-direction:column;gap:8px;padding:14px}
.goal-card.ready{box-shadow:0 0 0 2px var(--mint-deep),0 4px 0 2px var(--mint-deep)}
.goal-title{margin:0;font:var(--t-title-m);color:var(--ink)}
.goal-line{margin:0;font:var(--t-body-s);color:var(--ink-soft)}
.goal-mine{margin:0;font:700 .8rem/1.3 var(--font-ui)}
.goal-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.goal-tier{position:relative;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:7px 30px 7px 10px;border-radius:var(--r-sm);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line);font:700 .78rem/1.25 var(--font-ui);color:var(--ink)}
.goal-tier b{font:800 .78rem/1.25 var(--font-ui)}
.goal-target{text-align:right;font-variant-numeric:tabular-nums}
.goal-reward{grid-column:1 / -1;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.goal-tier.locked{background:transparent;box-shadow:inset 0 0 0 1.5px var(--card-line);border:0;outline:2px dashed var(--card-line);outline-offset:-2px;color:var(--ink-soft)}
.goal-tier.reached{box-shadow:inset 0 0 0 2px var(--control-line)}
.goal-tier.ready{background:#e6f8f1;box-shadow:inset 0 0 0 2px var(--mint-deep)}
.goal-tier.collected{background:var(--star-soft);box-shadow:inset 0 0 0 2px var(--star-deep)}
.goal-mark{position:absolute;top:7px;right:8px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 2px var(--ink);font:900 .7rem/1 var(--font-ui)}
.goal-card .btn{align-self:flex-end}
@media (max-width:640px){.goal-tiers{grid-template-columns:1fr}.goals-head{flex-direction:column;align-items:flex-start}.goal-card .btn{align-self:stretch}}

/* Night truce chip and World window, currencies, auction house, daily missions. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ── The night truce chip in the top bar, and the World settings window ── */
.truce-chip{position:relative;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:2px solid var(--ink);border-radius:999px;color:var(--on-chrome);background:linear-gradient(180deg,#3b2f86,#241d5c);box-shadow:var(--lip-sm);font:800 .78rem/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.truce-chip svg{width:15px;height:15px;color:var(--star)}
.truce-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ws-card{display:flex;flex-direction:column;gap:10px;padding:12px 14px;background:var(--card-sunk);border:2px solid var(--card-line);border-radius:var(--r-md)}
.ws-card + .ws-card{margin-top:10px}
.ws-head{display:flex;align-items:center;gap:10px}
.ws-head h4{margin:0;font:var(--t-title-s);color:var(--ink)}
.ws-head > :last-child{margin-left:auto}
.ws-head .muted{font:700 .72rem/1.2 var(--font-ui)}
.ws-rows{list-style:none;margin:0;padding:0}
.ws-row{display:flex;align-items:center;gap:12px;min-height:46px;padding:4px 0}
.ws-row + .ws-row{border-top:1px solid var(--card-line)}
.ws-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ws-text b{font:800 .86rem/1.2 var(--font-ui);color:var(--ink)}
.ws-text small{font:600 .74rem/1.3 var(--font-ui);color:var(--ink-soft)}
.ws-value{min-width:56px;padding:6px 10px;text-align:center;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 2px var(--card-line);font:900 .86rem/1 var(--font-ui);color:var(--ink)}
.ws-dd{min-width:110px}
.ws-note{margin:0;font:600 .74rem/1.35 var(--font-ui);color:var(--ink-soft)}
.ws-status{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border-radius:var(--r-sm);font:800 .8rem/1.3 var(--font-ui);color:var(--ink);background:var(--card)}
.ws-status i{width:9px;height:9px;flex:none;border-radius:50%;box-shadow:0 0 0 2px var(--ink);background:var(--locked)}
.ws-status.on i{background:var(--star)}
.ws-status.next i{background:var(--mint)}
.ws-hours{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.ws-hours.off{opacity:.55}
.ws-field{display:flex;flex-direction:column;gap:4px}
.ws-field > span{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.ws-length{margin-left:auto;align-self:center;font:800 .78rem/1 var(--font-ui);color:var(--ink-soft)}
.ws-hours-read{margin:0;font:900 .95rem/1 var(--font-ui);color:var(--ink)}
.ws-facts{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:18px;font:600 .78rem/1.35 var(--font-ui);color:var(--ink)}
.ws-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.ws-foot small{margin-right:auto;font:700 .76rem/1.3 var(--font-ui)}
/* The two currencies (shared::game::wallet): the purse in the auction house (the top bar's coins are .coins). */
.purse{display:flex;gap:8px;flex-wrap:wrap}
.purse-coin{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line);font:700 .78rem/1.2 var(--font-ui);color:var(--ink-soft)}
.purse-coin b{font:850 .9rem/1 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums}
.purse-coin small{font:700 .7rem/1 var(--font-ui);color:var(--ink-soft)}
.purse-coin .icon{width:20px;height:20px}
/* Finishing a longer build for Aether: the builder tile's lilac badge with the price. */
.dock-finish.rush{width:auto;min-width:22px;padding:0 5px;gap:2px;grid-auto-flow:column;color:var(--ink);background:#d9ccff;font:850 .66rem/1 var(--font-ui)}
.dock-finish.rush .icon{width:12px;height:12px}

/* The auction house (panels/auction.rs). */
.auction{display:flex;flex-direction:column;gap:12px}
.auc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.auc-list{display:flex;flex-direction:column;gap:6px}
.auc-row{display:grid;grid-template-columns:44px minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1.2fr) auto;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-md);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.auc-row.lead{box-shadow:inset 0 0 0 2px var(--mint-deep)}
.auc-list>.auc-row:has(.auc-bid):not(:has(.auc-price)){grid-template-columns:44px minmax(0,1fr) auto}
.auc-ic{position:relative;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);color:var(--ink);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.auc-ic .icon{width:22px;height:22px}
.auc-ic canvas{width:34px;height:34px}
.auc-what,.auc-price,.auc-state{display:flex;flex-direction:column;gap:2px;min-width:0}
.auc-what b,.auc-price b{font:800 .86rem/1.2 var(--font-ui);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auc-price b{font-variant-numeric:tabular-nums}
.auc-what small,.auc-price small,.auc-state small{font:700 .72rem/1.25 var(--font-ui);color:var(--ink-soft)}
.auc-state .chip{align-self:flex-start}
.auc-state .chip.bad{color:var(--coral-deep)}
.auc-bid{display:flex;align-items:center;gap:6px}
.auc-bid input{width:96px}
.auc-empty{margin:20px 0;text-align:center}
.auc-exchange{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.auc-exchange .card h3{margin:0}
.auc-exchange .card p{margin:0;font:600 .78rem/1.35 var(--font-ui)}
.auc-exchange .card:last-child{grid-column:1/-1}
.auc-uses{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font:600 .8rem/1.35 var(--font-ui);color:var(--ink)}
.auc-buy{display:flex;align-items:center;justify-content:space-between;gap:10px}
@media (max-width:760px){.auc-row{grid-template-columns:40px minmax(0,1fr) auto}.auc-price,.auc-state{grid-column:2/-1}.auc-exchange{grid-template-columns:1fr}}

/* The quest book's Daily tab: three slot cards side by side. */
.daily-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.daily-head p{margin:0;font:800 .86rem/1.3 var(--font-ui);color:var(--ink)}
.daily-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.daily-card{gap:10px;padding:12px}
.daily-card .quest-head{align-items:center}
.daily-card .quest-title{font-size:1rem}
.quest-face.small{width:56px;height:56px}
.quest-face.small canvas{width:56px;height:56px}
.daily-card .quest-line{font-size:.8rem;flex:1}
.daily-foot{display:flex;justify-content:space-between;gap:8px;padding-top:8px;border-top:2px solid var(--card-line);margin-top:auto}
.daily-card.empty{align-items:center;justify-content:center;text-align:center;min-height:260px;color:var(--ink-soft)}
.daily-card.empty .icon{width:48px;height:48px;opacity:.6}
.daily-card.empty p{margin:0;font:800 .86rem/1.3 var(--font-ui)}
@media (max-width:760px){.daily-slots{grid-template-columns:1fr}}

/* Resource bar (hud/ribbon.rs). Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ================= Resource bar (hud/ribbon.rs), docked under the top bar =================
   Drawn as part of the bar: the same chrome, rendered inside .topbar so it covers the bar's bottom
   edge where they meet (no seam), with curved shoulders carrying the bar's ink edge and lip down
   into the band. Each resource is a button to the Production window. */
.ribbon{--shoulder:16px;position:fixed;top:var(--topbar-height);left:50%;z-index:1;transform:translateX(-50%);max-width:calc(100% - 2 * var(--gap) - 2 * var(--shoulder))}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;width:var(--shoulder);height:var(--shoulder);pointer-events:none;
  filter:drop-shadow(0 2px 0 var(--hull-line)) drop-shadow(0 2px 0 var(--hull-line))}
/* The left shoulder curves round its bottom-left corner, the right one round its bottom-right; each
   overlaps the band's 2px side so the ink edges run into one another. */
.ribbon::before{right:calc(100% - 2px);background:radial-gradient(circle at 0 100%,transparent calc(var(--shoulder) - 2.5px),var(--hull-line) calc(var(--shoulder) - 2px),var(--hull-line) calc(var(--shoulder) - .5px),var(--chrome) var(--shoulder))}
.ribbon::after{left:calc(100% - 2px);background:radial-gradient(circle at 100% 100%,transparent calc(var(--shoulder) - 2.5px),var(--hull-line) calc(var(--shoulder) - 2px),var(--hull-line) calc(var(--shoulder) - .5px),var(--chrome) var(--shoulder))}
.ribbon-band{position:relative;display:flex;align-items:center;gap:6px;height:var(--ribbon-height);padding:0 6px 2px;background:var(--hull-bg);border:2px solid var(--hull-line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);box-shadow:0 4px 0 var(--hull-line),0 14px 26px rgb(9 6 36 / 40%)}

.res{position:relative;display:flex;align-items:center;gap:8px;min-width:var(--res-width);height:36px;margin:0;padding:0 12px 0 3px;border:0;border-radius:999px;color:var(--on-chrome);background:var(--chrome-raised);font:inherit;text-align:left;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.res:hover{background:var(--chrome-hover)}
.res:active{transform:translateY(1px)}
.res:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.res-coin{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--ink)}
.res-coin .icon{width:22px;height:22px}
.res-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.res-value{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.res-value b{font:800 1rem/1 var(--font-ui);color:var(--on-chrome);font-variant-numeric:tabular-nums}
.res-value span{font:700 .68rem/1 var(--font-ui);color:var(--on-chrome-soft);font-variant-numeric:tabular-nums}
.res-line{display:flex;align-items:center;gap:7px}
.res-bar{flex:1;min-width:40px;height:5px;overflow:hidden;border-radius:999px;background:var(--chrome)}
.res-bar i{display:block;height:100%;border-radius:inherit;background:var(--c);transition:width .6s var(--ease-out)}
.res.still .res-bar i{transition:none}
.res-rate{flex:none;font:800 .68rem/1 var(--font-ui);color:var(--mint);font-variant-numeric:tabular-nums;white-space:nowrap}
.res-rate.shrinking{color:var(--coral)}
.res.warn .res-value b{color:var(--star)}
.res.warn .res-bar i{background:var(--stripes-gilt)}
.res.full{box-shadow:inset 0 0 0 2px var(--coral)}
.res.full .res-value b{color:var(--coral)}
.res.full .res-bar i{background:var(--coral)}
.res .tip.below{top:calc(100% + 12px)}
@media (max-width:1180px){ .res-value span{display:none} }
@media (max-width:760px){
  .ribbon{--shoulder:12px;left:calc(var(--gap) + var(--shoulder));right:calc(var(--gap) + var(--shoulder));transform:none;max-width:none}
  .ribbon-band{overflow-x:auto;scrollbar-width:none}
  .res{min-width:0;padding-right:10px}
  .res-coin{width:26px;height:26px}
  .res-coin .icon{width:19px;height:19px}
  .res .tip{display:none}
}

/* Alliance Beacon note, the Trade Hub market, race cards. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The Alliance window's note when there's no Alliance Beacon yet. */
.al-beacon{align-items:center;justify-content:space-between;background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}

/* The Trade Hub (panels/market.rs, trade.rs), laid out like the Kingdoms marketplace: a bar of
   filters, a table of offers, one-line forms with icon pickers, a price meter and offer slots. */
.mk-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;padding:8px 10px;border-radius:var(--r-md);background:var(--card-sunk)}
.mk-sub{margin:8px 0;padding:0 2px;background:none}
.mk-grow{flex:1}
.mk-field{display:flex;align-items:center;gap:6px;font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.mk-pick{display:inline-flex;padding:2px;gap:2px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.mk-pick-btn{display:grid;place-items:center;min-width:30px;height:28px;padding:0 6px;border:0;border-radius:999px;background:none;color:var(--ink);cursor:pointer;font:800 .74rem/1 var(--font-ui)}
.mk-pick-btn .icon{width:18px;height:18px}
.mk-pick-btn:hover{background:var(--card-sunk)}
.mk-pick-btn[aria-checked="true"]{background:var(--star);box-shadow:0 0 0 1.5px var(--ink)}
.mk-toggle,.mk-sort{padding:4px 10px;border:0;border-radius:999px;font:800 .74rem/1.2 var(--font-ui);color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line);cursor:pointer}
.mk-toggle[aria-pressed="true"],.mk-sort.active{background:var(--mint);color:var(--on-mint);box-shadow:0 0 0 1.5px var(--ink)}
.mk-table{width:100%;border-collapse:collapse;font:700 .85rem/1.3 var(--font-ui);color:var(--ink)}
.mk-table th,.mk-table td{padding:7px 8px;text-align:left;border-bottom:2px solid var(--card-line);vertical-align:middle}
.mk-table thead th{font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
.mk-table .num{text-align:right}
.mk-table tr.blocked td{opacity:.6}
.mk-table tr.blocked td.mk-act,.mk-table tr.blocked td.mk-who{opacity:1}
.mk-amount{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:850;white-space:nowrap}
.mk-amount .icon{width:18px;height:18px}
.mk-rate{display:inline-block;min-width:44px;padding:2px 7px;border-radius:999px;text-align:center;font:800 .72rem/1.2 var(--font-ui);background:var(--card-sunk);color:var(--ink)}
.mk-rate.cheap{background:var(--mint);color:var(--on-mint)}
.mk-rate.dear{background:#ffe4e2;color:var(--coral-deep)}
.mk-who{min-width:0}
.mk-who b{display:block;font-weight:850}
.mk-who small{display:block;font:700 .72rem/1.25 var(--font-ui);color:var(--ink-soft)}
.mk-who small.mk-why{color:var(--coral-deep)}
.mk-act{text-align:right;width:1%;white-space:nowrap}
.mk-empty{margin:12px 2px}
.mk-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px;font:800 .8rem/1 var(--font-ui);color:var(--ink-soft)}
.mk-form{gap:10px}
.mk-form-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mk-form-head h3{margin:0}
.mk-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;border-radius:var(--r-md);background:var(--card-sunk)}
.mk-word{font:800 .9rem/1 var(--font-ui);color:var(--ink)}
.mk-num{width:110px}
.mk-quote{margin-left:2px;font-size:1rem}
.mk-have{margin:0;font:600 .78rem/1.4 var(--font-ui)}
.mk-post{display:flex;align-items:center;gap:12px}
.mk-post .mk-why{flex:1;margin:0;min-height:1.2em;font:700 .78rem/1.35 var(--font-ui);color:var(--coral-deep)}
.mk-slots{display:inline-flex;align-items:center;gap:4px;font:700 .74rem/1 var(--font-ui);color:var(--ink-soft)}
.mk-slots i{width:12px;height:12px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.mk-slots i.on{background:var(--star);box-shadow:0 0 0 1.5px var(--ink)}
.mk-slots span{margin-left:4px}
.mk-meter{display:flex;align-items:center;gap:10px}
.mk-meter-end{font:700 .7rem/1 var(--font-ui);color:var(--ink-soft);white-space:nowrap}
.mk-meter-bar{position:relative;flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--mint),var(--card-line) 33%,#ffc9c4)}
.mk-meter-fair{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink-soft)}
.mk-meter-pin{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--ink);transition:left .15s}
.mk-meter-pin.cheap{background:var(--mint)}
.mk-meter-pin.dear{background:var(--coral)}
.mk-title{margin:14px 2px 0}
@media (max-width:640px){.mk-table th:nth-child(3),.mk-table td:nth-child(3){display:none}.mk-num{width:84px}}
/* The race cards at sign-up: difficulty, who it suits, its signature rule. */

/* Signing in and the reset screens, queue slots to buy. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ── Signing in: the switch, field errors, password boxes, the reset screens ── */
.auth-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:14px;border-radius:999px;background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--card-line)}
.auth-switch button{height:34px;border:0;border-radius:999px;background:transparent;color:var(--ink-soft);font:800 .84rem/1 var(--font-ui);cursor:pointer}
.auth-switch button.active{color:var(--ink);background:var(--card);box-shadow:0 0 0 2px var(--ink),var(--lip-sm)}
.auth-switch button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.auth-form{gap:14px}
.auth-field > label,.auth-label{font:800 .82rem/1.2 var(--font-ui);color:var(--ink)}
.auth-field input{width:100%;box-sizing:border-box;height:42px}
.auth-field.bad input{box-shadow:inset 0 0 0 2px var(--coral)}
.auth-note{min-height:1.1em;font:600 .75rem/1.3 var(--font-ui);color:var(--ink-soft)}
.auth-field.bad .auth-note{color:var(--coral-deep);font-weight:800}
.auth-caps{font:800 .75rem/1.2 var(--font-ui);color:var(--state-warn,#8a5200)}
.pw-box{position:relative;display:flex}
.pw-box input{padding-right:70px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:30px;padding:0 10px;border:0;border-radius:999px;background:var(--card-sunk);color:var(--ink);font:800 .74rem/1 var(--font-ui);cursor:pointer}
.pw-eye:hover{background:var(--card-line)}
.pw-eye:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.pw-meter{display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:4px;margin-top:2px}
.pw-meter i{height:6px;border-radius:999px;background:var(--card-line);transition:background var(--dur-2)}
.pw-meter span{min-width:62px;text-align:right;font:800 .72rem/1 var(--font-ui);color:var(--ink-soft)}
.pw-meter[data-level="1"] i:nth-child(-n+1){background:var(--coral)}
.pw-meter[data-level="2"] i:nth-child(-n+2){background:var(--star)}
.pw-meter[data-level="3"] i:nth-child(-n+3){background:var(--mint)}
.pw-meter[data-level="4"] i{background:var(--mint-deep)}
.pw-rules{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0;list-style:none;font:600 .74rem/1.3 var(--font-ui);color:var(--ink-soft)}
.pw-rules li{display:flex;align-items:center;gap:5px}
.pw-rules li span{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--card-line);font-size:.62rem;color:var(--ink)}
.pw-rules li.ok{color:var(--mint-deep)}
.pw-rules li.ok span{background:var(--mint);color:var(--on-mint)}
.auth-link{align-self:flex-start;padding:2px 0;border:0;background:none;color:var(--ink);font:800 .8rem/1.2 var(--font-ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.auth-link:hover{color:var(--chrome-raised)}
.auth-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.auth-lead{margin:0;font:600 .84rem/1.45 var(--font-ui);color:var(--ink)}
.auth-sent{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;text-align:center;border-radius:var(--r-md);background:var(--card-sunk);box-shadow:inset 0 0 0 2px var(--card-line)}
.auth-sent p{margin:0;font:600 .84rem/1.45 var(--font-ui);color:var(--ink)}
.auth-sent .muted{font-size:.76rem}
.auth-sent-icon{width:52px;height:52px}
.modal.sm:has(.auth-form.wide){max-width:min(720px,calc(100vw - 24px));width:720px}
.acct-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.acct-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--card-line);font:600 .8rem/1.3 var(--font-ui)}
@media (prefers-reduced-motion:reduce){.pw-meter i{transition:none}}
/* A queue slot still to buy with Aether (hud/builders.rs). */
.dock-tile.locked{border:0;padding:0;font:inherit;color:inherit;background:none;cursor:pointer}
.dock-tile.locked .dock-art{display:grid;place-items:center;opacity:.75}
.dock-tile.locked .dock-art .icon{width:20px;height:20px}
.dock-tile.locked:disabled{cursor:default;opacity:.45}
.dock-tile.locked:not(:disabled):hover .dock-art{opacity:1}

/* Tech tree, Shipyard sub-tabs, Production focus, Season tab and tooltip, the Flight box. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The tech tree (panels/lab.rs): tiers left to right, a node per technology with its level bar
   and where it stands; the picked or pointed-at technology lights its path, the rest fades. */
.tree-intro{margin:0;font:600 .8rem/1.35 var(--font-ui);color:var(--ink-soft)}
.tree-svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
.tree-head{font:800 11px var(--font-ui);fill:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em}
.te path{fill:none;stroke:var(--coral);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round;opacity:.7;transition:opacity .15s}
.te.met path{stroke:var(--mint-deep);stroke-dasharray:none}
.te.lit path{stroke-width:3;opacity:1}
.te-label rect{fill:var(--card);stroke:var(--coral-deep);stroke-width:1.5}
.te.met .te-label rect{stroke:var(--mint-deep)}
.te-label text{font:800 10.5px var(--font-ui);fill:var(--ink);text-anchor:middle}
.te:not(.lit) path{opacity:.35}
.tn{cursor:pointer;outline:none;transition:opacity .15s}
.tn.faded{opacity:.45}
.tn-box{fill:var(--card);stroke:var(--card-line);stroke-width:2;transition:stroke .12s}
.tn.done .tn-box{fill:#e6f8f1}
.tn[data-state=ready] .tn-box{stroke:var(--star-deep);stroke-width:2.5}
.tn[data-state=now] .tn-box{fill:#fff4cf;stroke:var(--star-deep);stroke-dasharray:6 4}
.tn[data-state=top] .tn-box{stroke:var(--mint-deep)}
.tn[data-state=locked] .tn-box{fill:var(--card-sunk);stroke-dasharray:4 4}
.tn[data-state=locked] foreignObject{filter:grayscale(.85);opacity:.65}
.tn:hover .tn-box,.tn:focus-visible .tn-box{stroke:var(--ink)}
.tn.selected .tn-box{stroke:var(--ink);stroke-width:3.5}
.tn-name{font:800 13px var(--font-ui);fill:var(--ink)}
.tn-level{font:800 11px var(--font-ui);fill:var(--ink-soft);text-anchor:end;font-variant-numeric:tabular-nums}
.tn-track{fill:rgb(42 33 84 / 12%)}
.tn-fill{fill:var(--mint-deep)}
.tn[data-state=now] .tn-fill{fill:var(--star-deep)}
.tn-line{font:700 11px var(--font-ui);fill:var(--ink-soft)}
.tn[data-state=ready] .tn-line{fill:var(--star-deep)}
.tn[data-state=locked] .tn-line{fill:var(--coral-deep)}
.tn foreignObject{pointer-events:none}
.tn foreignObject canvas{display:block;width:40px;height:40px}
.tree-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font:700 .72rem/1 var(--font-ui);color:var(--ink-soft)}
.tree-legend .lg{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-3px;border-radius:4px;border:2px solid var(--card-line);background:var(--card)}
.tree-legend .lg.done{background:#e6f8f1;border-color:var(--mint-deep)}
.tree-legend .lg.ready{border-color:var(--star-deep)}
.tree-legend .lg.now{background:#fff4cf;border:2px dashed var(--star-deep)}
.tree-legend .lg.locked{background:var(--card-sunk);border-style:dashed}
.tree-legend .lg.line{width:20px;height:0;border:0;border-top:2px dashed var(--coral);border-radius:0;vertical-align:3px;background:none}
.tree-legend .lg.line.met{border-top:2px solid var(--mint-deep)}
/* The detail under the tree: what it needs, what it leads to. */
.tech-needs .overline,.tech-leads .overline{display:block;margin:0 0 6px}
.tech-chips{display:flex;flex-wrap:wrap;gap:6px}
.tech-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border:0;border-radius:999px;background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line);font:800 .78rem/1 var(--font-ui);color:var(--ink);cursor:pointer}
.tech-chip:hover{box-shadow:inset 0 0 0 2px var(--ink)}
.tech-chip canvas{width:20px;height:20px}
.tech-chip i{font-style:normal;color:var(--ink-soft);font-weight:700}
.tech-chip.ok i{color:var(--mint-deep)}
.tech-card[data-state="wait"] .tech-status{color:var(--ink-soft)}
.tech-card[data-state="locked"] .tech-status{color:var(--coral-deep)}
/* The Shipyard's sub-tabs (panels/yard.rs): All, then one per kind, with how many you have. */
.yd-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:4px;border-radius:999px;background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line);width:fit-content;max-width:100%}
.yd-tab{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:0;border-radius:999px;background:none;font:800 .82rem/1 var(--font-ui);color:var(--ink-soft);cursor:pointer}
.yd-tab b{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--card);font:850 .72rem/1.3 var(--font-ui);color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--card-line)}
.yd-tab:hover{color:var(--ink)}
.yd-tab:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.yd-tab.active{color:var(--on-ink,#fff);background:var(--ink)}
.yd-tab.active b{background:var(--star);box-shadow:none}
.yd-group .overline small{margin-left:8px;font:600 .74rem/1 var(--font-ui);text-transform:none;letter-spacing:0;color:var(--ink-soft)}
/* Production's focus under its attribute (panels/commander.rs). */
.attr-focus{margin-top:6px;gap:4px}
.attr-focus .choice{padding:4px 10px;font-size:.72rem}

/* The Rankings window's Season tab (panels/rankings.rs `SeasonTab`): the race for the Starforge,
   the result once the season is over, and the Hall of Fame. */
.sz-race,.sz-fame,.sz-next{gap:8px}
.sz-race h3,.sz-fame h3{margin:0}
.sz-line{margin:0;font:600 .82rem/1.4 var(--font-ui)}
.sz-forge{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;font:800 .82rem/1 var(--font-ui);color:var(--ink)}
.sz-forge .cmd-health{height:10px;border-radius:5px;overflow:hidden;background:var(--card-line)}
.sz-forge .cmd-health i{display:block;height:100%;border-radius:5px;background:var(--star)}
.sz-winner{margin:0;display:flex;flex-direction:column;gap:2px}
.sz-winner b{font:var(--t-title-s);color:var(--ink)}
.sz-winner small{font:700 .76rem/1.3 var(--font-ui);color:var(--ink-soft)}
.sz-title{margin:14px 2px 6px}
.sz-over{margin-bottom:8px}
.sz-next .btn{align-self:flex-start}
.btn.danger{color:var(--on-coral);background:var(--coral);box-shadow:0 0 0 2px var(--ink),var(--lip-sm)}
.clock[role="button"]{cursor:pointer}
/* The season tooltip: under the clock (not the middle of the top bar), wrapped to a readable width
   (`.clock` keeps its own text on one line), and held to the clock's right edge, near the screen's. */
.clock{position:relative}
.clock > .tip{width:300px;max-width:min(300px,calc(100vw - 24px));white-space:normal}
.clock > .tip.below{left:auto;right:0;transform:translate(0,-4px)}
.has-tip.clock:hover > .tip.below,.has-tip.clock:focus-visible > .tip.below{transform:translate(0,0)}
/* The send dialog's Flight box (speed, a timed landing) and the Phalanx's landing times. */
.send-flight{display:flex;flex-direction:column;gap:6px;padding:10px 12px}
.send-flight .overline{margin:0}
.send-flight .choices{gap:4px}
.send-flight.off .choices,.send-flight.off .overline{opacity:.45}
.send-flight .choice{padding:5px 9px;font-size:.74rem}
.send-timed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:700 .8rem/1.3 var(--font-ui);color:var(--ink)}
.send-timed input{width:64px}
.pr-when b{display:block;font:800 .82rem/1.2 var(--font-ui);font-variant-numeric:tabular-nums}
.pr-when small{font:700 .7rem/1.2 var(--font-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* Shop. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* ---------- Shop (panels/shop.rs) ---------- */
.badge.ok{color:var(--on-mint);background:var(--mint)}
.shop{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0;flex:1;min-height:100%}
.shop-nav{display:flex;flex-direction:column;gap:8px;padding:14px 12px;background:var(--card-sunk);border-right:2px solid var(--card-line)}
.shop-tab{position:relative;display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--card);box-shadow:var(--lip-sm);color:var(--ink);text-align:left;cursor:pointer;transition:transform var(--dur-1),background var(--dur-1)}
.shop-tab:hover{transform:translateY(-1px);background:#fff}
.shop-tab:active{transform:translateY(3px);box-shadow:none}
.shop-tab.active{background:var(--mint);color:var(--on-mint)}
.shop-tab.active::after{content:"";position:absolute;right:-16px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ink)}
.shop-tab-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.shop-tab.active .shop-tab-ic{background:#fff}
.shop-tab-ic .icon{width:24px;height:24px}
.shop-tab-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.shop-tab-text b{font:var(--t-title-s)}
.shop-tab-text small{font:700 .7rem/1.2 var(--font-ui);opacity:.8}
.shop-tab .badge{position:absolute;top:-6px;right:-6px}
.shop-main{display:flex;flex-direction:column;gap:12px;padding:14px 16px;min-width:0}
.shop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.shop-head h3{margin:0;font:var(--t-title-l);color:var(--ink)}
.shop-head p{margin:2px 0 0;font:600 .82rem/1.35 var(--font-ui)}
.shop-callout{align-items:center;justify-content:space-between}
.shop-callout:not(.bad){background:var(--star-soft);color:var(--on-star)}
.shop-callout .btn{flex:none}
.shop-body{flex:1;display:flex;flex-direction:column;gap:12px}
.shop-foot{display:flex;justify-content:space-between;gap:10px;padding-top:6px;border-top:2px dashed var(--card-line)}
.shop-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))}
.shop-grid.packages{grid-template-columns:repeat(3,minmax(0,1fr))}
.shop-grid.boosts{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.shop-grid.boosts .shop-card{padding:10px}
.shop-grid.deals{grid-template-columns:repeat(3,minmax(0,1fr))}
.shop-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px;border-radius:var(--r-md);background:var(--card);border:2px solid var(--ink);box-shadow:var(--lip-sm);color:var(--ink);min-width:0}
.shop-card h4{margin:0;font:var(--t-title-s);text-align:center}
.shop-art{display:grid;place-items:center;height:76px;margin:-2px -4px 0;border-radius:var(--r-sm);background:radial-gradient(90% 130% at 50% 100%,#fff,var(--card-sunk));box-shadow:inset 0 0 0 1.5px var(--card-line);overflow:hidden}
.shop-pile{display:flex;align-items:center;gap:2px;filter:drop-shadow(0 3px 0 rgb(42 33 84 / 22%))}
.shop-pile .icon{width:34px;height:34px}
.shop-pile .icon:nth-child(2){width:42px;height:42px;margin-top:-10px}
.shop-ribbon{position:absolute;top:-8px;left:-8px;z-index:1;padding:4px 9px;border-radius:999px;font:900 .74rem/1 var(--font-ui);color:var(--on-coral);background:var(--coral);box-shadow:0 0 0 2px var(--ink);transform:rotate(-8deg)}
.shop-ribbon.ok{color:var(--on-mint);background:var(--mint);transform:none;left:auto;right:-8px}
.shop-label{position:absolute;top:-9px;right:-6px;z-index:1;padding:4px 8px;border-radius:var(--r-sm);font:900 .66rem/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--on-star);background:var(--star);box-shadow:0 0 0 2px var(--ink)}
.shop-blurb,.shop-dur,.shop-limit{margin:0;font:600 .76rem/1.35 var(--font-ui);color:var(--ink-soft);text-align:center}
.shop-dur{font-weight:800}
.shop-lines{margin:0;padding:8px 10px;list-style:none;display:flex;flex-direction:column;gap:6px;border-radius:var(--r-sm);background:var(--card-sunk);font:700 .78rem/1.3 var(--font-ui)}
.shop-lines li{display:flex;align-items:center;gap:6px}
.shop-lines .icon{flex:none;width:18px;height:18px}
.shop-lines canvas{width:22px;height:22px}
.shop-lines b{font-weight:900}
.shop-buy{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.shop-buy .btn{width:100%}
.shop-card .price{display:inline-flex;align-items:center;gap:3px;margin-left:4px;padding:2px 8px 2px 4px;border-radius:999px;background:rgb(255 255 255 / 55%);font-variant-numeric:tabular-nums}
.shop-card .price .icon{width:16px;height:16px}
.shop-short{align-self:center;padding:0;border:0;background:none;font:800 .74rem/1.2 var(--font-ui);color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.shop-price{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:10px}
.shop-price s{font:800 .8rem/1 var(--font-ui);color:var(--ink-soft)}
.shop-price .btn{flex:1}
.deal-art{background:radial-gradient(90% 130% at 50% 100%,#fff,#f1e2ff)}
.boost.charter .boost-art{background:radial-gradient(90% 130% at 50% 100%,#fff,#d6ecff)}
.boost.mining .boost-art{background:radial-gradient(90% 130% at 50% 100%,#fff,#ffe2cc)}
.boost.helium .boost-art{background:radial-gradient(90% 130% at 50% 100%,#fff,#e6dcff)}
.boost.mentor .boost-art{background:radial-gradient(90% 130% at 50% 100%,#fff,#ffefbf)}
.shop-card.boost.on{box-shadow:0 0 0 3px var(--mint),var(--lip-sm)}
.boost-time{display:flex;flex-direction:column;gap:4px;text-align:center}
.boost-time small{font:800 .72rem/1.2 var(--font-ui);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.boost-time.on small{color:var(--mint-deep)}
.boost-bar{height:8px;border-radius:999px;background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line);overflow:hidden}
.boost-bar i{display:block;height:100%;background:var(--mint);border-radius:inherit;transition:width var(--dur-3)}
.pack-art{background:var(--card-sunk);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.pack-ic{position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--card);box-shadow:0 0 0 2px var(--ink)}
.pack-ic .icon{width:32px;height:32px}
.pack-ic canvas{width:46px;height:46px}
.shop-card.feature .pack-art{background:radial-gradient(90% 130% at 50% 100%,#fff,#d9f6ea)}
.stepper{display:flex;align-items:center;justify-content:center;gap:10px}
.stepper b{min-width:22px;text-align:center;font:var(--t-num)}
.stepper .btn{width:auto;min-width:32px}
.shop-card.package{align-items:center;cursor:pointer;font:inherit;transition:transform var(--dur-1)}
.shop-card.package:hover{transform:translateY(-2px)}
.shop-card.package:active{transform:translateY(3px);box-shadow:none}
.shop-card.package.best{box-shadow:0 0 0 3px var(--star),var(--lip-sm)}
.package-art{width:100%;height:84px;background:radial-gradient(90% 130% at 50% 100%,#fff,#e6dcff);display:flex;align-items:flex-end;justify-content:center;gap:0;padding-bottom:10px}
.package-art .icon{width:30px;height:30px;margin:0 -5px;filter:drop-shadow(0 2px 0 rgb(42 33 84 / 25%))}
.package-art .icon:nth-child(even){margin-bottom:12px}
.package-art.size-5 .icon,.package-art.size-6 .icon{width:36px;height:36px}
.package-amount{font:var(--t-title-l);font-variant-numeric:tabular-nums}
.package-price{padding:6px 16px;border-radius:999px;font:900 .86rem/1 var(--font-ui);background:var(--mint);color:var(--on-mint);box-shadow:0 0 0 2px var(--ink)}
.shop-note{margin:0;font:600 .78rem/1.35 var(--font-ui);text-align:center}
.shop-steps{margin:0;padding:0;list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.shop-steps li{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--card-sunk);font:800 .74rem/1 var(--font-ui);color:var(--ink-soft)}
.shop-steps i{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-style:normal;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--card-line)}
.shop-steps li.now{color:var(--ink);background:var(--star-soft)}
.shop-steps li.now i{background:var(--star);box-shadow:0 0 0 2px var(--ink)}
.shop-steps li.done{color:var(--mint-deep)}
.shop-steps li.done i{background:var(--mint);color:var(--on-mint)}
.checkout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;align-items:start}
.checkout-line{display:flex;justify-content:space-between;gap:10px;font:700 .84rem/1.3 var(--font-ui);color:var(--ink)}
.checkout-line.total{padding-top:8px;border-top:2px dashed var(--card-line);font-weight:900}
.checkout-methods .callout{background:var(--star-soft);color:var(--on-star)}
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.method{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border-radius:var(--r-md);border:2px dashed var(--control-line);background:var(--card);color:var(--ink-soft);text-align:left;cursor:not-allowed}
.method b{font:800 .84rem/1.2 var(--font-ui);color:var(--ink)}
.method small{font:600 .72rem/1.3 var(--font-ui)}
.method .chip{margin-top:4px}
.shop-teaser{flex-direction:row;align-items:center;gap:20px;padding:18px}
.shop-teaser h3{margin:0 0 6px}
.shop-teaser p{margin:0 0 12px;font:600 .84rem/1.45 var(--font-ui);color:var(--ink)}
.teaser-cards{position:relative;flex:none;width:150px;height:120px}
.teaser-cards span{position:absolute;top:10px;width:64px;height:92px;display:grid;place-items:center;border-radius:var(--r-sm);background:linear-gradient(160deg,#fff,#e6dcff);box-shadow:0 0 0 2px var(--ink),var(--lip-sm)}
.teaser-cards span:nth-child(1){left:0;transform:rotate(-12deg)}
.teaser-cards span:nth-child(2){left:42px;top:0;z-index:1}
.teaser-cards span:nth-child(3){left:84px;transform:rotate(12deg)}
.teaser-cards .icon{width:32px;height:32px}
.shop-sheet{display:flex;flex-direction:column;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--card);border:2px solid var(--ink);box-shadow:var(--lip-sm)}
.shop-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shop-sheet-head h3{margin:0;font:var(--t-title-m);color:var(--ink)}
.shop-sheet p{margin:0;font:600 .8rem/1.4 var(--font-ui)}
.shop-uses{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.shop-uses li{display:flex;gap:12px;align-items:flex-start;padding:9px 2px;border-bottom:1.5px solid var(--card-line);font:600 .8rem/1.4 var(--font-ui);color:var(--ink-soft)}
.shop-uses li:last-child{border-bottom:0}
.shop-uses .icon{flex:none;width:24px;height:24px}
.shop-uses b{display:block;font:800 .86rem/1.3 var(--font-ui);color:var(--ink)}
.shop-empty{margin:10px 0;text-align:center;color:var(--ink-soft)}
@media (max-width:760px){
  .shop{grid-template-columns:1fr}
  .shop-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:2px solid var(--card-line);padding:10px}
  .shop-tab{flex:none}
  .shop-tab-text small,.shop-tab.active::after{display:none}
  .shop-grid.packages,.shop-grid.boosts,.shop-grid.deals,.methods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checkout{grid-template-columns:1fr}
  .shop-teaser{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){.shop-tab,.shop-card.package,.boost-bar i{transition:none}}

/* Alliance chat. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
.al-chat{grid-column:1/-1}
.al-chat-lines{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:4px 0}
.al-chat-line{margin:0}
.al-chat-line.mine b{color:var(--teal, #2a9d8f)}
.al-chat-problem{color:var(--coral, #e8725c);margin:4px 0}
.al-chat-form{display:flex;gap:8px;margin-top:6px}
.al-chat-form input{flex:1}

/* The commander in the field (docs/COMMANDER_PLAN.md): the revival card in the Commander window,
   the "alone" send line, and its marker on the galaxy map's hover card. */
.revive-card{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;padding:14px 16px}
.revive-card h3{margin:0}
.revive-card p{margin:0}
.revive-card.fallen{border-color:var(--coral);box-shadow:0 0 0 2px var(--coral) inset}
.revive-card .coral{color:var(--coral-deep);font-weight:700}
.revive-card .btn{align-self:flex-start}
.commander-send .commander-check{display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer}
.commander-send .commander-check input{accent-color:var(--gold,currentColor)}
.commander-send.empty{opacity:.55}
.send-relocate{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;cursor:pointer}
.send-relocate input{accent-color:var(--gold,currentColor)}
.send-relocate small{flex-basis:100%}

/* The HUD's frame (game/nav.rs, hud/topbar.rs, hud/navbar.rs, hud/tally.rs, hud/rail.rs, hud/side.rs): the top bar, the rail, the fleet tray, and the compact layout for phones and tablets. Loaded in order from index.html: keep rules where they are, later files override earlier ones. */
/* The rail: its buttons come from the one list of windows, a divider where the group changes. */
.rail-sep{flex:none;align-self:center;width:22px;height:2px;margin:1px 0;border-radius:2px;background:var(--chrome-line);opacity:.75}
/* A window's short name, shown under its icon only where the rail is the phone's bottom strip. */
.rail-label{display:none}

/* ================= The top bar (hud/topbar.rs) =================
   Three columns: the brand, the planet and Population; the three views dead centre; Stardust and
   Aether beside them, then the status. It has no menu of windows: those are on the rail. A faint
   dusting of stars ties the chrome to the sky behind it. */
/* The hull (the bar and the drops hanging from it) is one surface: flat chrome with the dusting
   pinned to the window (`fixed`), so it runs on from the bar into the rail, ribbon and tray with no
   seam, and one dark edge (`--hull-line`) round all of it, the lip under its bottoms. */
:root{--hull-line:#120e33;
  --hull-bg:radial-gradient(circle,rgb(255 243 207 / 30%) .7px,transparent 1.2px) 11px 9px/97px 61px fixed,
    radial-gradient(circle,rgb(255 243 207 / 18%) .6px,transparent 1.1px) 47px 33px/71px 43px fixed,
    var(--chrome)}
.topbar.nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;
  background:var(--hull-bg);box-shadow:0 2px 0 var(--hull-line),0 6px 0 var(--hull-line)}
.nav-left,.nav-right{display:flex;align-items:center;gap:10px;min-width:0}
.nav-status{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}
.topbar.nav .clock{text-align:right}
/* The status sits at the bar's right end: its tooltips open leftwards so they stay on the page. */
.nav-status .has-tip > .tip.below{left:auto;right:0;transform:translate(0,-4px)}
.nav-status .has-tip:hover > .tip.below,.nav-status .has-tip:focus-visible > .tip.below{transform:translate(0,0)}
/* The arrow left of the planet menu sits at the bar's other end, above the rail: its tooltip opens
   rightwards from the arrow's own edge, so it stays on the page and off the rail's buttons. */
.planet-nav > .planet-step:first-child > .tip.below{left:0;transform:translate(0,-4px)}
.planet-nav > .planet-step:first-child:hover > .tip.below,.planet-nav > .planet-step:first-child:focus-visible > .tip.below{transform:translate(0,0)}

/* Population and the two currencies (hud/tally.rs) are coins on the bar. A compact window has no
   room for them there: they are cells at the end of the ribbon instead (a coin and the amount). */
.ribbon-sep,.res.mini{display:none}

/* ================= Under the bar: one hull, with drops (hud/topbar.rs) =================
   The rail and the ribbon hang from the bar as parts of it: the same chrome, no seam where they
   meet, curved shoulders carrying the bar's ink edge down. A grid lays them out: the ribbon is
   centred under the view medallions while there is room, and moves over rather than under a
   neighbour when there is not. */
:root{--rail-w:56px;--shoulder:16px}
.underbar{position:fixed;top:var(--topbar-height);left:0;right:0;z-index:1;display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,auto) minmax(max-content,1fr);align-items:start;pointer-events:none}
.underbar > *{pointer-events:auto}
.underbar .ribbon{grid-column:2;position:relative;top:auto;left:auto;right:auto;transform:none;max-width:none;min-width:0}
/* Energy is the ribbon's last cell, the one beside the fleet tray: its tooltip opens leftwards
   from the cell's own edge, so in a narrow window it does not reach under the tray. */
.underbar .res-3 > .tip.below{left:auto;right:0;transform:translate(0,-4px)}
.underbar .res-3:hover > .tip.below,.underbar .res-3:focus-visible > .tip.below{transform:translate(0,0)}
/* The rail: a drop at the bar's left end, its buttons in the list's order. */
.underbar .rail{grid-column:1;justify-self:start;position:relative;left:auto;top:auto;width:var(--rail-w);box-sizing:border-box;margin-right:calc(var(--shoulder) + 6px);padding:9px 7px 9px 9px;gap:5px;align-items:center;
  background:var(--hull-bg);border:2px solid var(--hull-line);border-left:0;border-top:0;border-radius:0 0 var(--r-lg) 0;box-shadow:0 4px 0 var(--hull-line),0 14px 26px rgb(9 6 36 / 40%)}
/* Its shoulder: the bar's edge curving down into the rail's, and the rail's border carried up under it. */
.underbar .rail::after{content:"";position:absolute;top:0;left:100%;width:var(--shoulder);height:var(--shoulder);pointer-events:none;
  filter:drop-shadow(0 2px 0 var(--hull-line)) drop-shadow(0 2px 0 var(--hull-line));
  background:radial-gradient(circle at 100% 100%,transparent calc(var(--shoulder) - 2.5px),var(--hull-line) calc(var(--shoulder) - 2px),var(--hull-line) calc(var(--shoulder) - .5px),var(--chrome) var(--shoulder))}
.underbar .rail::before{content:"";position:absolute;z-index:1;left:100%;top:calc(var(--shoulder) - 1px);width:2px;height:8px;background:var(--hull-line)}
.rail-btn{transition:background-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
/* A hovered button lifts by a pixel, which makes it a layer of its own, tooltip and all. The
   buttons are kept above the rail's shoulder, or it is painted across the first one's tooltip. */
.underbar .rail-btn{z-index:2}
.rail-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* A short window: the rail tightens so it clears the map's tools and the advisor. */
@media (max-height:800px){
  .underbar .rail{padding-top:6px;padding-bottom:7px;gap:3px}
  .page .underbar .rail-btn{width:34px;height:34px}
  .rail-sep{margin:0}
}
/* The galaxy's tools stand in the bottom left corner under the rail (14-map-send.css lifts them
   on a narrower window, into the rail's way); on a window too short for both, beside it. */
@media (min-width:1101px) and (max-width:1250px){ .map-controls.map-dock{bottom:var(--gap)} }
@media (min-width:1101px) and (max-height:720px){ .page.view-galaxy .map-controls.map-dock{left:calc(var(--rail-w) + var(--gap))} }

/* ================= The fleet tray (hud/side.rs): the rail's mirror at the bar's right end =================
   Open, it lists the fleets on the move and what is stationed here; folded, a line of counts.
   Its header always says what is in flight, one chip per kind of movement. */
:root{--tray-w:240px}
.underbar .side.tray{grid-column:3;justify-self:end;position:relative;right:auto;top:auto;width:var(--tray-w);max-height:none;overflow:visible;box-sizing:border-box;margin-left:calc(var(--shoulder) + 6px);padding:8px 9px 10px;gap:6px;align-items:stretch;
  background:var(--hull-bg);border:2px solid var(--hull-line);border-right:0;border-top:0;border-radius:0 0 0 var(--r-lg);box-shadow:0 4px 0 var(--hull-line),0 14px 26px rgb(9 6 36 / 40%)}
.underbar .side.tray::before{content:"";position:absolute;top:0;right:100%;width:var(--shoulder);height:var(--shoulder);pointer-events:none;
  filter:drop-shadow(0 2px 0 var(--hull-line)) drop-shadow(0 2px 0 var(--hull-line));
  background:radial-gradient(circle at 0 100%,transparent calc(var(--shoulder) - 2.5px),var(--hull-line) calc(var(--shoulder) - 2px),var(--hull-line) calc(var(--shoulder) - .5px),var(--chrome) var(--shoulder))}
.underbar .side.tray::after{content:"";position:absolute;z-index:1;right:100%;top:calc(var(--shoulder) - 1px);width:2px;height:8px;background:var(--hull-line)}
.tray-head{display:flex;align-items:center;gap:7px;min-height:28px;padding:0 3px 0 4px;border:0;border-radius:var(--r-sm);background:none;color:var(--on-chrome);font:600 1rem/1 var(--font-display);white-space:nowrap;text-align:left;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out)}
.tray-head:hover{background:var(--chrome-raised)}
.tray-head:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.tray-counts{margin-left:auto;display:flex;gap:4px}
.tray-count{display:flex;align-items:center;gap:3px;height:22px;padding:0 7px;border-radius:999px;background:var(--chrome-raised);color:var(--on-chrome);font:800 .76rem/1 var(--font-ui);font-variant-numeric:tabular-nums}
.tray-head:hover .tray-count{background:var(--chrome-hover)}
.tray-count i{font:900 .8rem/1 var(--font-ui);font-style:normal;color:var(--mint)}
.tray-count.foe,.tray-head:hover .tray-count.foe{background:var(--coral);color:var(--on-coral)}
.tray-count.foe i{color:var(--on-coral)}
.tray-count.attack i{color:var(--star)}
.tray-count.visit i{color:var(--sky-400)}
.tray-count.home i{color:var(--on-chrome-soft)}
.tray-head .hud-sec-chev{flex:none;margin-left:2px;color:var(--on-chrome-soft);transform:rotate(-90deg)}
.tray.open .tray-head .hud-sec-chev{transform:none}
/* The lists scroll inside the tray when they outgrow the window; its drop and shoulder stay put. */
.tray-body{display:none;flex-direction:column;gap:6px;min-height:0;max-height:calc(100vh - var(--topbar-height) - 210px);overflow-y:auto;margin:-3px;padding:3px;scrollbar-width:thin;scrollbar-color:var(--chrome-line) transparent}
.tray.open .tray-body{display:flex}
.tray.open .tray-fold{display:none}
.page.view-galaxy .tray-body{max-height:calc(100vh - var(--topbar-height) - 290px)}
.tray-fold{display:flex;flex-direction:column;gap:6px}
.tray-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tray-stat{display:flex;align-items:center;gap:7px;padding:5px 8px 5px 6px;border-radius:var(--r-sm);background:var(--chrome-raised);color:var(--on-chrome-soft);font:700 .74rem/1.15 var(--font-ui)}
.tray-stat .icon{width:22px;height:22px;color:var(--mint)}
.tray-stat b{display:block;font:800 .98rem/1 var(--font-ui);color:var(--on-chrome);font-variant-numeric:tabular-nums}
.tray-idle{margin:0;padding:0 4px 1px;font:700 .76rem/1.3 var(--font-ui);color:var(--on-chrome-soft)}
/* Its cards and rows, on the tray's chrome instead of the open sky. */
.underbar .tray .move-card,.underbar .tray .hud-sec,.underbar .tray .orbit{width:auto}
.underbar .tray .move-card{flex:none;height:auto;min-height:44px;padding:5px 9px 5px 8px;gap:6px;background:var(--card);box-shadow:inset 3px 0 0 var(--mc)}
.underbar .tray .move-card:hover{background:var(--card-sunk)}
.underbar .tray .move-card.foe{box-shadow:inset 3px 0 0 var(--mc),0 0 0 3px var(--coral)}
.underbar .tray .hud-sec{flex:none}
.underbar .tray .hud-sec-head{color:var(--on-chrome);background:var(--chrome-raised);box-shadow:none}
.underbar .tray .hud-sec-count{background:var(--chrome);color:var(--on-chrome)}
.underbar .tray .orbit li{padding:1px 10px 1px 3px;font-size:.78rem}
.underbar .tray .orbit li .orbit-art,.underbar .tray .orbit li .orbit-art canvas{width:38px;height:25px}

/* A narrow bar gives up words: the brand's name, then the season line under the clock; with the
   night truce chip showing, the season line and the chips' own words sooner. */
@media (max-width:1200px){ .topbar.nav .brand b{display:none} }
@media (max-width:1240px){ .topbar.nav .clock small{display:none} }
@media (max-width:1400px){
  .nav-status:has(.truce-chip) .clock small,.nav-status:has(.truce-chip) .save-word,.truce-word{display:none}
  .nav-status:has(.truce-chip) .save-chip.saved,.truce-chip{padding:0 9px}
}

/* ================= Compact: phones and tablets, up to 1100px (ui/viewport.rs, COMPACT_MAX_WIDTH) =================
   No room for drops at the sides: a menu button opens every window as a sheet, the rail lies along
   the bottom as a strip (five windows and a Fleet button), and the fleet tray is a sheet. */
.navburger,.strip-fleet,.sheet-head,.ribbon-more,.navscrim,.navsheet{display:none}
/* A count that needs no attention (fleets in flight, none of them an attack). */
.badge.calm{color:var(--on-mint);background:var(--mint)}
@media (max-width:1100px){
  /* The bar: the menu button and the planet, the three views still dead centre, the commander. */
  .topbar.nav{gap:8px}
  .topbar.nav .nav-status > :not(.cmd-chip),.topbar.nav .brand,.topbar.nav .planet-step,.topbar.nav .census,.topbar.nav .coins{display:none}
  .nav-left{gap:8px}
  .navburger{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--card);box-shadow:var(--lip-sm);color:var(--ink);cursor:pointer}
  .navburger svg{width:22px;height:22px}
  .navburger > .badge{position:absolute;top:-7px;right:-7px}
  .navburger:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .topbar.nav .planet-nav{flex:1;min-width:0}
  .topbar.nav .planet-switch-wrap{flex:1;min-width:0;max-width:260px}
  .topbar.nav .planet-nav .planet-switch{display:flex;width:100%;min-width:0;overflow:hidden}
  .topbar.nav .planet-switch small{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* The ribbon alone hangs from the bar, with population and the two currencies at its end; it
     scrolls sideways if the window is narrower than it. */
  :root{--res-width:100px}
  .ribbon-sep{display:block;flex:none;width:2px;height:22px;margin:0 3px;border-radius:2px;background:var(--chrome-line);opacity:.75}
  .res.mini{display:flex;min-width:0;gap:6px;padding:0 11px 0 3px}
  .res.mini > b{font:800 .95rem/1 var(--font-ui);color:var(--on-chrome);font-variant-numeric:tabular-nums}
  .underbar{padding:0 calc(var(--gap) + var(--shoulder))}
  .ribbon-band{gap:4px;overflow-x:auto;scrollbar-width:none}
  .ribbon-band::-webkit-scrollbar{display:none}
  .res .tip,.res-rate{display:none}

  /* The rail as the bottom strip: the windows with a short name, then Fleet. */
  .underbar .rail{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:2;justify-self:stretch;display:grid;grid-template-columns:repeat(6,minmax(0,104px));justify-content:center;align-items:stretch;gap:0;width:auto;height:calc(62px + env(safe-area-inset-bottom,0px));margin:0;padding:5px 6px calc(7px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(180deg,var(--chrome-raised),var(--chrome) 70%);border:0;border-top:2px solid var(--ink);border-radius:0;box-shadow:0 -4px 0 rgb(18 14 51 / 55%)}
  .underbar .rail::before,.underbar .rail::after,.rail-sep{display:none}
  .page .underbar .rail-btn,.strip-fleet{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:auto;height:auto;padding:0;border:0;border-radius:var(--r-md);background:none;box-shadow:none;transform:none;color:var(--on-chrome-soft);font:800 .64rem/1 var(--font-ui);cursor:pointer}
  .page .underbar .rail-btn:not(.in-strip){display:none}
  .page .underbar .rail-btn:hover,.page .underbar .rail-btn:focus-visible,.strip-fleet:hover{background:var(--chrome-raised);box-shadow:none;transform:none}
  .page .underbar .rail-btn .icon,.strip-fleet .icon{width:28px;height:28px}
  .strip-fleet{color:var(--on-chrome)}
  .strip-fleet:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
  .rail-label{display:block}
  .underbar .rail-btn > .badge,.strip-fleet > .badge{position:absolute;top:0;right:auto;left:calc(50% + 5px)}
  .underbar .rail-btn .tip,.underbar .unit-card{display:none}

  /* The sheets: the menu, and the fleet tray. Over a scrim, from the bottom, as the dialogs do on a phone. */
  .navscrim{display:block;position:fixed;inset:0;z-index:3;background:rgb(10 6 40 / 58%);animation:navscrim-in var(--dur-2) var(--ease-out)}
  .navsheet,.underbar .side.tray.sheet{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:5;justify-self:stretch;display:flex;flex-direction:column;gap:0;width:auto;max-width:560px;max-height:min(82dvh,calc(100dvh - var(--topbar-height) - 8px));margin:0 auto;padding:0 0 env(safe-area-inset-bottom,0px);overflow:hidden;
    border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--card);box-shadow:0 0 0 2px var(--ink),0 -12px 40px rgb(6 4 24 / 60%);animation:navsheet-in var(--dur-2) var(--ease-out)}
  .underbar .side.tray{display:none}
  .underbar .side.tray.sheet::before,.underbar .side.tray.sheet::after{display:none}
  .sheet-head{flex:none;display:flex;align-items:center;gap:10px;padding:9px 10px 11px 16px;background:var(--chrome);box-shadow:inset 0 -3px 0 var(--ink);color:var(--on-chrome)}
  .sheet-title{font:600 1.15rem/1 var(--font-display)}
  .sheet-head small{font:700 .76rem/1.2 var(--font-ui);color:var(--on-chrome-soft)}
  .sheet-close{flex:none;display:grid;place-items:center;width:36px;height:36px;margin-left:auto;padding:0;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--card);box-shadow:var(--lip-sm);color:var(--ink);font:900 .9rem/1 var(--font-ui);cursor:pointer}
  .sheet-head .save-chip{margin-left:auto}
  .sheet-head .save-chip + .sheet-close{margin-left:0}
  .sheet-head .save-chip.saved{padding:0 12px}
  .sheet-head .save-word{display:inline}
  .sheet-head .save-chip .tip{display:none}
  .navsheet-body{display:flex;flex-direction:column;gap:9px;min-height:0;padding:11px 12px 16px;overflow-y:auto}
  .navsheet-body h4{margin:2px 2px -3px;font:var(--t-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--ink-soft)}
  .navgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px 8px}
  .navtile{position:relative;display:flex;align-items:center;gap:8px;min-width:0;height:46px;padding:0 8px 3px;border:2px solid var(--ink);border-radius:var(--r-md);background:var(--card);box-shadow:var(--lip-sm);color:var(--ink);font:600 .98rem/1.1 var(--font-display);text-align:left;cursor:pointer}
  .navtile:active{transform:translateY(2px);box-shadow:0 1px 0 #120e33}
  .navtile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
  .navtile .icon{width:28px;height:28px}
  .navtile-name{flex:1;min-width:0;line-height:1.05}
  .navtile .badge{flex:none}
  /* The tray's lists in the sheet: on the card, not on the chrome. */
  .tray.sheet .tray-head,.tray.sheet .tray-fold{display:none}
  .tray.sheet .tray-body{display:flex;gap:7px;max-height:none;margin:0;padding:11px 12px 16px}
  .underbar .tray.sheet .move-card{box-shadow:inset 3px 0 0 var(--mc),0 0 0 2px var(--card-line)}
  .underbar .tray.sheet .move-card.foe{box-shadow:inset 3px 0 0 var(--mc),0 0 0 3px var(--coral)}
  .underbar .tray.sheet .hud-sec-head{padding:6px 2px 0;color:var(--ink-soft);background:none}
  .underbar .tray.sheet .hud-sec-count{background:var(--card-sunk);color:var(--ink)}
  .underbar .tray.sheet .orbit li{background:var(--card-sunk)}

  /* What sat at the bottom moves up over the strip. */
  .dock{bottom:calc(62px + 8px + env(safe-area-inset-bottom,0px))}
  /* The advisor's portrait stands beside the dock and its tip opens above it: a tablet has no
     room for the tip between the portrait and the dock. */
  .advisor{bottom:calc(62px + var(--gap));flex-direction:column-reverse;align-items:flex-start;gap:10px;max-width:min(290px,calc(50vw - 182px - 2 * var(--gap)))}
  .advisor-bubble{margin-bottom:0}
  .advisor-bubble::after{left:26px;bottom:-12px;border-right-color:transparent;border-top-color:var(--ink)}
  .toasts,.page.view-galaxy .toasts{bottom:182px}
  .report-alert{bottom:calc(62px + var(--gap))}
  .map-controls.map-dock{bottom:calc(62px + var(--gap))}
}
@keyframes navscrim-in{from{opacity:0}to{opacity:1}}
@keyframes navsheet-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .topbar.nav{gap:6px;padding:0 9px}
  .nav-left{gap:6px}
  .topbar.nav .medallions{gap:6px}
  .topbar.nav .cmd-chip{width:40px;height:40px}
  .underbar{padding:0 calc(var(--gap) + 12px)}
  /* A phone's dock reaches the window's sides: what stood beside it stands over it. */
  .toasts,.page.view-galaxy .toasts,.report-alert{bottom:158px}
}
/* A phone: smaller medallions, and the ribbon's four stores fill the band (a swipe brings
   population and the two currencies, the mark at the edge says so). */
@media (max-width:560px){
  .map-controls.map-dock{bottom:158px}
  /* No room to keep the views centred: the planet's name takes what the others leave. */
  .topbar.nav{display:flex}
  .nav-left{flex:1}
  .nav-right{flex:none}
  .topbar.nav .medallions{gap:5px}
  .topbar.nav .medal-ring{width:40px;height:40px;padding:2px}
  .topbar.nav .medal.active .medal-ring{width:44px;height:44px;padding:3px}
  .topbar.nav .planet-switch{padding:2px 9px 4px}
  .topbar.nav .planet-switch b{font-size:.84rem}
  .underbar .res{flex:none;gap:4px;height:34px;padding:0 9px 0 3px}
  .underbar .res:not(.mini){box-sizing:border-box;width:calc((100vw - 2 * (var(--gap) + 12px) - 10px - 3 * 4px - 26px) / 4);padding-right:5px}
  .underbar .res-coin{width:22px;height:22px}
  .underbar .res-coin .icon{width:16px;height:16px}
  .underbar .res-main{gap:4px}
  .underbar .res-value b{font-size:.8rem}
  .underbar .res-bar{min-width:0;height:4px}
  .ribbon-more{position:absolute;right:2px;top:0;bottom:2px;display:grid;place-items:center end;width:24px;padding-right:5px;border-radius:0 0 var(--r-lg) 0;
    background:linear-gradient(90deg,transparent,var(--chrome) 62%);color:var(--on-chrome-soft);font:900 1rem/1 var(--font-ui);pointer-events:none}
}
/* The smallest phones: everything on the bar a size down, so the planet's name keeps some room. */
@media (max-width:350px){
  .topbar.nav{gap:4px;padding:0 7px}
  .navburger{width:36px;height:36px}
  .topbar.nav .medallions{gap:3px}
  .topbar.nav .medal-ring{width:34px;height:34px}
  .topbar.nav .medal.active .medal-ring{width:38px;height:38px}
  .topbar.nav .cmd-chip{width:36px;height:36px}
}
/* A bar button that shows a picture from the sprite, not a one-colour glyph: the rail's size. */
.topbar-btn svg.pic{width:24px;height:24px}

/* 36 — Tactile layer: chunky lip buttons, bordered cards, pill tabs, touch
   ergonomics. A skin over 06–35: it changes how things look and feel, never
   what they do. Semantic tokens first, then components, then touch and motion. */

:root{
  --color-primary:var(--mint);
  --color-primary-lip:var(--mint-deep);
  --color-on-primary:var(--on-mint);
  --color-danger:var(--coral);
  --color-danger-lip:var(--coral-deep);
  --color-gold:var(--star);
  --color-gold-lip:var(--star-deep);
  --color-neutral-lip:#c9bdf3;
  --surface-card:var(--card);
  --surface-sunk:var(--card-sunk);
  --surface-line:var(--ink);
  --lip-depth:4px;
  --press-depth:3px;
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --tap-min:44px;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

/* Numbers never jitter while they count. */
.ribbon,.topbar,.coins,.tally,.badge,.lvl,.count,.cost,.timer,.clock,
[class*="-count"],[class*="-time"],[class*="-num"],[class*="-points"],
.mtab b,.btn b,td,th{font-variant-numeric:tabular-nums}

/* ---------- Buttons: a solid lip that collapses when pressed ---------- */
.btn{
  border-radius:18px;
  box-shadow:0 var(--lip-depth) 0 var(--color-neutral-lip),0 var(--lip-depth) 0 2px var(--ink);
  transition:transform 260ms var(--ease-spring),box-shadow 260ms var(--ease-spring),filter var(--dur-1);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}
.btn:hover{transform:translateY(-1px)}
.btn:active:not(:disabled),.btn.pressed:not(:disabled){
  transform:translateY(var(--press-depth));
  box-shadow:0 calc(var(--lip-depth) - var(--press-depth)) 0 var(--color-neutral-lip),0 calc(var(--lip-depth) - var(--press-depth)) 0 2px var(--ink);
  transition-duration:60ms;
}
.btn.primary{--color-neutral-lip:var(--color-primary-lip)}
.btn.war{--color-neutral-lip:var(--color-danger-lip)}
.btn.gilt{--color-neutral-lip:var(--color-gold-lip)}
.btn:disabled{box-shadow:0 2px 0 var(--locked),0 2px 0 2px var(--ink)}

/* ---------- Cards: crisp border and a solid depth lip, no blur ---------- */
.card,.unit-card{
  border-radius:var(--r-md);
  box-shadow:0 0 0 2px var(--surface-line),0 var(--lip-depth) 0 2px var(--surface-line);
}

/* ---------- Tiles: locked muted, available bright, done gold ----------
   Only the list tiles that carry these states (Buildings, Shipyard, Construct, the quest list);
   the lock badges they already draw (`.bl-lock`, `.yd-lock`, `.padlock`) stay. A picked tile keeps
   its gold ring. */
.bl-tile,.yd-tile{box-shadow:0 3px 0 var(--card-line);transition:transform 220ms var(--ease-spring),box-shadow 220ms,border-color 160ms}
.bl-tile.locked:not(.selected),.yd-tile.locked:not(.selected),.bcard.locked:not(.selected){
  background:var(--locked);border-style:dashed;border-color:var(--control-line);box-shadow:none;
}
.bl-tile.locked .bl-name,.yd-tile.locked .yd-tile-name,.bcard.locked{color:var(--ink-soft)}
.bl-tile.ready:not(.selected),.yd-tile.ready:not(.selected){
  border-color:var(--color-primary-lip);background:var(--surface-card);
  box-shadow:0 3px 0 var(--color-primary-lip);
}
.quest-pick.done:not(.active){
  background:var(--star-soft);
  box-shadow:inset 0 0 0 2px var(--color-gold-lip),inset 0 -3px 0 var(--color-gold-lip);
}
.quest-pick.done .quest-mark.done{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  color:var(--on-mint);background:var(--mint);box-shadow:0 0 0 2px var(--ink);font:900 .8rem/1 var(--font-ui);
}

/* Lists enter with a short rise. */
@keyframes tactile-rise{from{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}
.bl-tile,.yd-tile,.bcard,.quest-pick,.mv-list > li,.empty-state{animation:tactile-rise 280ms var(--ease-spring) both}

/* ---------- Empty lists: a picture, a title, what fills it, a way there (`ui/empty.rs`) ---------- */
.empty-state{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:12px 0;padding:22px 18px 20px;text-align:center;
  border-radius:var(--r-lg);background:var(--surface-sunk);
  border:2px dashed var(--card-line);color:var(--ink-soft);
}
.empty-badge{
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;
  background:var(--surface-card);box-shadow:0 0 0 2px var(--ink),0 4px 0 2px var(--ink);
  margin-bottom:4px;
}
.empty-badge .icon{width:36px;height:36px;color:var(--ink-soft)}
.empty-title{font:var(--t-title-m);color:var(--ink)}
.empty-text{margin:0;max-width:44ch;font:var(--t-body-s);color:var(--ink-soft)}
.empty-state .btn{margin-top:6px}

/* ---------- Tabs: pills in a track, one pill sliding to the open tab ---------- */
.mtabs{
  position:sticky;gap:6px;padding:8px 10px;margin:0;
  background:var(--surface-sunk);
  box-shadow:inset 0 -2px 0 var(--card-line);
  scroll-snap-type:x proximity;scrollbar-width:none;
}
.mtabs::-webkit-scrollbar{display:none}
.mtab{
  position:relative;z-index:1;
  min-height:38px;padding:9px 16px;border-radius:999px;scroll-snap-align:start;
  color:var(--ink-soft);background:transparent;box-shadow:none;
  transition:color 200ms,transform 220ms var(--ease-spring);
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
}
.mtab:hover:not(.active){color:var(--ink)}
.mtab.active{color:var(--ink);box-shadow:none}
.mtab:active{transform:translateY(2px)}
/* The pill: placed by `dialog.rs` (`--ink-x`, `--ink-y`, `--ink-w`, `--ink-h`). Until it is measured the open tab
   draws its own, so nothing is missing for a frame. */
.mtab-ink{
  position:absolute;z-index:0;top:var(--ink-y,8px);left:0;height:var(--ink-h,38px);
  width:var(--ink-w,0);transform:translateX(var(--ink-x,0));
  border-radius:999px;background:var(--surface-card);
  box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink);
  opacity:0;pointer-events:none;
  transition:transform 380ms var(--ease-spring),width 380ms var(--ease-spring),opacity 120ms;
}
.mtabs.inked .mtab-ink{opacity:1}
.mtabs:not(.inked) .mtab.active{background:var(--surface-card);box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink)}
.chip{touch-action:manipulation;user-select:none;-webkit-user-select:none}

/* ---------- Viewport: dynamic height, notches, home indicator ---------- */
html,body{height:100dvh;overscroll-behavior:none}
.tray-body{max-height:calc(100dvh - var(--topbar-height) - 210px)}
.page.view-galaxy .tray-body{max-height:calc(100dvh - var(--topbar-height) - 290px)}
.topbar{padding-top:max(var(--safe-top),0px)}
.topbar,.underbar{padding-left:max(var(--safe-left),0px);padding-right:max(var(--safe-right),0px)}

/* ---------- Touch: thumb-sized targets where the pointer is a finger ---------- */
@media (pointer:coarse){
  :root{--tap-min:48px}
  .btn,.mtab,.chip,.modal-close,.rail-btn,.dropdown button{min-height:var(--tap-min)}
  .modal-close,.rail-btn{min-width:var(--tap-min)}
  .btn.sm{min-height:40px}
  button,a,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}
@media (max-width:1100px){
  .modal-foot{padding-bottom:calc(12px + var(--safe-bottom))}
}

@media (prefers-reduced-motion:reduce){
  .btn,.mtab,.mtab-ink,.bl-tile,.yd-tile{transition:none}
  .bl-tile,.yd-tile,.bcard,.quest-pick,.mv-list > li,.empty-state{animation:none}
}

/* The signed-out tutorial's card: a narrator, the lesson, the way out. */
.tutorial{position:fixed;left:50%;bottom:132px;transform:translateX(-50%);z-index:60;display:flex;gap:14px;align-items:center;width:min(720px,calc(100vw - 24px));padding:12px 16px;background:var(--card);border:2px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--lip-sm),var(--shadow-card);color:var(--ink)}
.tutorial-face{flex:none;width:64px;height:64px;overflow:hidden;border-radius:50%}
.tutorial-face canvas{display:block;width:64px;height:64px}
.tutorial-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tutorial-body small{color:var(--ink-soft);font-weight:700}
.tutorial-body b{font:700 1.05rem/1.2 var(--font-display)}
.tutorial-body p{margin:0;line-height:1.35}
.tutorial-bar{height:6px;border-radius:999px;background:var(--line,#0002);overflow:hidden;margin-top:4px}
.tutorial-bar i{display:block;height:100%;background:var(--mint)}
.tutorial-actions{flex:none;display:flex;flex-direction:column;gap:6px;align-items:stretch}
.tutorial-skip{background:none;border:0;color:var(--ink-soft);font:700 .75rem/1 var(--font-ui);cursor:pointer;text-decoration:underline}
@media (max-width:700px){
  .tutorial{bottom:calc(150px + env(safe-area-inset-bottom,0px));flex-wrap:wrap}
  .tutorial-actions{flex-direction:row;width:100%;align-items:center;justify-content:flex-end}
}

/* The arrow under the bar's button a step is about. */
.tutorial-arrow{position:fixed;z-index:70;transform:translate(-50%,6px);color:var(--gold,#f4c84a);font-size:1.6rem;line-height:1;text-shadow:0 0 0 var(--ink),0 2px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink);pointer-events:none;animation:tutorial-bounce .9s ease-in-out infinite}
@keyframes tutorial-bounce{50%{transform:translate(-50%,16px)}}

/* The social windows wait until the island has a Shipyard. */
.page.tut-early .rail-btn[data-tour="Rankings"],.page.tut-early .rail-btn[data-tour="Alliance"],.page.tut-early .rail-btn[data-tour="Messages"],.page.tut-early .rail-btn[data-tour="Reports"]{display:none}

/* A step done: a banner with a burst of confetti. */
.tutorial-cheer{position:fixed;left:50%;top:calc(var(--topbar-height,64px) + 64px);transform:translateX(-50%);z-index:80;padding:10px 22px;background:var(--mint);border:2px solid var(--ink);border-radius:999px;box-shadow:var(--lip-sm);color:var(--ink);font:700 1rem/1 var(--font-display);pointer-events:none;animation:tutorial-pop .35s var(--ease-spring,ease-out)}
.tutorial-cheer.big{top:50%;transform:translate(-50%,-50%);z-index:1300;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 44px;border:0;border-radius:var(--r-lg);font-size:1.8rem;background:none;box-shadow:none;animation:cheer-big .5s var(--ease-spring,ease-out)}
/* The gold plate is a layer of its own, over the rays (-1) and under the words (1). */
.tutorial-cheer.big::before{content:"";position:absolute;inset:0;z-index:0;border:3px solid var(--ink);border-radius:var(--r-lg);background:var(--gold,#f4c84a);box-shadow:var(--lip-sm),0 0 0 8px #fff6,0 18px 50px #0006}
.tutorial-cheer.big b{position:relative;z-index:1}
.tutorial-cheer.big small{position:relative;z-index:1;font:700 .9rem/1.2 var(--font-ui);color:var(--ink)}
/* Light rays turning behind the big banner, fading out at their ends. */
.cheer-rays{position:absolute;left:50%;top:50%;width:720px;height:720px;margin:-360px 0 0 -360px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff3c4cc 0deg 9deg,#fff3c400 9deg 24deg);-webkit-mask:radial-gradient(circle,#000 18%,#0000 68%);mask:radial-gradient(circle,#000 18%,#0000 68%);animation:cheer-rays 9s linear infinite,cheer-fade .6s ease-out}
.tutorial-cheer.big i{z-index:1}
@keyframes cheer-big{from{transform:translate(-50%,-50%) scale(.4);opacity:0}70%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes cheer-rays{to{transform:rotate(360deg)}}
@keyframes cheer-fade{from{opacity:0;transform:scale(.5)}}
.tutorial-cheer i{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:2px;background:var(--gold,#f4c84a);animation:tutorial-confetti 1.2s ease-out forwards}
.tutorial-cheer i:nth-of-type(2){background:var(--mint);--dx:-70px;--dy:-34px}
.tutorial-cheer i:nth-of-type(1){--dx:-110px;--dy:-10px}
.tutorial-cheer i:nth-of-type(3){background:#ff8f7a;--dx:-30px;--dy:-48px}
.tutorial-cheer i:nth-of-type(4){background:#7ab8ff;--dx:30px;--dy:-48px}
.tutorial-cheer i:nth-of-type(5){--dx:70px;--dy:-34px}
.tutorial-cheer i:nth-of-type(6){background:#ff8f7a;--dx:110px;--dy:-10px}
@keyframes tutorial-pop{from{transform:translateX(-50%) scale(.6);opacity:0}}
@keyframes tutorial-confetti{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.tutorial-arrow,.tutorial-cheer,.tutorial-cheer i,.cheer-rays{animation:none}.tutorial-cheer i{display:none}}

/* The card can be dragged out of the way. */
.tutorial{cursor:grab;touch-action:none;user-select:none}
.tutorial.dragging{cursor:grabbing}
.tutorial button{cursor:pointer}

/* The guiding cursor: glides to the next thing to click, presses it, and a ring spreads. */
.guide-cursor{position:fixed;z-index:1200;width:0;height:0;pointer-events:none;transition:left .6s cubic-bezier(.4,.1,.2,1),top .6s cubic-bezier(.4,.1,.2,1)}
.guide-cursor svg{position:absolute;left:2px;top:2px;width:30px;height:30px;filter:drop-shadow(0 2px 0 #0004);transform-origin:5px 3px;animation:guide-press 1.8s ease-in-out infinite}
.guide-ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:3px solid var(--gold,#f4c84a);opacity:0;animation:guide-ring 1.8s ease-out infinite}
@keyframes guide-press{0%,45%,70%,100%{transform:translate(8px,8px)}55%{transform:translate(0,0) scale(.85)}}
@keyframes guide-ring{0%,50%{transform:scale(.3);opacity:0}55%{opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.guide-cursor,.guide-cursor svg,.guide-ring{animation:none;transition:none}.guide-ring{opacity:.8;transform:scale(1)}}

/* The step's goal is ordered: nothing to click, a calm note instead of the button. */
.tutorial-wait{margin:2px 0 0;padding:6px 10px;border-radius:var(--r-md);background:var(--mint);border:2px solid var(--ink);font-weight:700;font-size:.85rem}