/* ============================================================================
   ARES EMPIRE — the hub skin (reworked: clean · modern · professional).

   House language carried over from Aresium + Arestoteles: near-black wall,
   Space Grotesk text, JetBrains Mono numbers, glassmorphism, tight negative
   letter-spacing, restrained motion. The field is now PURE BLACK — no ambient
   washes. Polished gold survives only in the title wordmark; the provinces ride
   neutral white-glass tabs (à la Arestoteles). A dark marble bust, sunk into the
   black, stands at the left edge.
   ============================================================================ */

[data-theme="empire"] {
  --r-card: 16px; --r-row: 13px;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --imp: var(--sans);                         /* imperial caps now ride the sans — modern, not medieval */

  --bg: #070708;                              /* near-black wall, matched to the bust's ground so it floats */
  --ink: #f3f1ea; --ink-2: #a6a39a; --ink-3: #67645c;

  /* polished gold — bright crown highlight → rich body → reflected lower sheen */
  --gold-hi: #fff4d4;
  --gold:    #edca77;
  --gold-2:  #cfa24f;
  --gold-deep: #9a7228;
  --gold-text: linear-gradient(176deg, #fff6db 0%, #f6dd9c 19%, #e8c778 38%, #cca052 55%, #a87c31 72%, #ecce85 88%, #8c6420 100%);
  --gold-glow: rgba(237,202,119,0.16);
  /* project-name gold — a richer, metallic engrave (bright crown → antique body → reflected sheen).
     Reads as polished gold on pure black; paired with a drop-shadow for depth, never flat/cheap. */
  --gold-name: linear-gradient(176deg, #fff3cf 0%, #f6d886 22%, #e6bd62 46%, #cb9a3e 68%, #b07f2c 86%, #f0d289 100%);

  /* background is pure black now — no Mars-red / steel-blue ambient washes. */

  --card: rgba(17,16,20,0.55); --card-2: rgba(27,25,31,0.62);
  --line-soft: rgba(236,224,196,0.10); --line-2: rgba(236,212,150,0.20);
  --hover: rgba(237,202,119,0.06);
  --shadow: 0 30px 70px -32px rgba(0,0,0,0.92);
  --edge: rgba(255,246,222,0.10);
  --glass-edge: linear-gradient(135deg, rgba(255,246,222,0.22), rgba(237,202,119,0.05) 32%, rgba(255,255,255,0.02) 68%, rgba(237,202,119,0.12));
  --spec: radial-gradient(130% 90% at 0% 0%, rgba(255,246,222,0.08), transparent 46%);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  position: relative; overflow: hidden;
}
#root { height: 100%; position: relative; z-index: 1; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }

/* a gold gradient clipped to text — the one premium flourish, reused everywhere */
.gold-clip {
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================================
   AMBIENT — fixed colour wash behind everything (Mars-red left, steel-blue right),
   plus a vignette so the corners fall to black and the UI stays clean.
   ============================================================================ */
.emp-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #000; }
/* pure black field — no Mars-red / steel-blue / gold washes. just a soft vignette for depth. */
.emp-ambient::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 110% at 50% 44%, transparent 52%, rgba(0,0,0,0.6) 90%, #000 100%);
}

/* ============================================================================
   THE FIGURE — the marble bust, flush to the left edge. It's a true cut-out PNG
   (transparent ground), so pure black wraps perfectly around it — no blend tricks,
   no mask. Dimmed so it sits in the wall as atmosphere rather than a lit subject.
   ============================================================================ */
.emp-figure { position: fixed; left: 0; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: flex-end; overflow: hidden; transition: opacity .4s ease; }
.emp-figure.recede { opacity: 0.3; }       /* step back so the card board reads clean */
.emp-figure img {
  height: 100%; width: auto; object-fit: contain; object-position: left bottom;
  filter: brightness(0.5) contrast(1.05);          /* dim marble — embedded in the black, not lit */
}

/* ============================================================================
   HUB layout — header (title · controls), the stage (circle / card grid), and
   the timeline strip below.
   ============================================================================ */
.emp-app { position: relative; height: 100%; display: flex; flex-direction: column; z-index: 1;
  padding: clamp(16px, 2.6vh, 28px) clamp(18px, 3vw, 44px) clamp(12px, 2vh, 22px); }

/* ---- top bar: spacer · centered section title · controls ---- */
.emp-top { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.emp-top-l { justify-self: start; display: inline-flex; align-items: center; }
/* the Ares bust — the empire's crest, top-left */
.emp-crest { height: clamp(44px, 6.6vh, 66px); width: auto; object-fit: contain;
  filter: drop-shadow(0 5px 14px rgba(0,0,0,0.65)) drop-shadow(0 0 18px rgba(255,205,110,0.18)); }
.emp-mark { display: inline-flex; align-items: center; gap: 10px; opacity: 0.9; }
.emp-mark-dot { width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); box-shadow: 0 0 12px -2px var(--gold-glow); }
.emp-mark-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.32em; text-indent: 0.32em; color: var(--ink-3); }

/* the section title doubles as the primary nav toggle (THE EMPIRE ⇄ PROJECTS) */
.emp-title { justify-self: center; margin: 0; padding: 4px 6px; text-align: center; font-weight: 700;
  font-size: clamp(20px, 2.7vw, 34px); letter-spacing: 0.34em; text-indent: 0.34em; line-height: 1;
  white-space: nowrap; cursor: pointer;
  /* bright, luminous champagne-gold with a travelling sheen — premium, not muddy */
  background: linear-gradient(95deg, #fff4cf 0%, #ffe7a0 19%, #f6cf73 38%, #fff2c8 51%, #f0c662 66%, #ffeaad 85%, #f7d07a 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 16px rgba(255,226,150,0.24));
  animation: titleSheen 6.5s ease-in-out infinite;
  transition: filter .2s, opacity .2s; }
.emp-title:hover { filter: drop-shadow(0 1px 18px rgba(255,226,150,0.4)) brightness(1.06); }
.emp-title:active { opacity: 0.85; }
/* default landing reads THE EMPIRE — smaller than the PROJECTS / EXPANSIONS section titles */
.emp-title.is-empire { font-size: clamp(15px, 1.85vw, 22px); letter-spacing: 0.4em; text-indent: 0.4em; }
@keyframes titleSheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

.emp-top-r { justify-self: end; display: inline-flex; align-items: center; gap: 10px; }

/* the EXPAND / PROJECTS toggle — a clean glass pill, label + icon */
.emp-toggle { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px;
  border-radius: 11px; font-size: 12px; font-weight: 650; letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--line-soft); background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  transition: color .2s, border-color .2s, background .2s, transform .08s; }
.emp-toggle:hover { color: var(--gold-hi); border-color: var(--line-2); background: var(--card-2); }
.emp-toggle:active { transform: translateY(1px); }
.emp-toggle.on { color: var(--gold-hi); border-color: var(--line-2); background: rgba(237,202,119,0.08); }
.emp-toggle svg { width: 15px; height: 15px; }

/* logout — quiet icon button */
.emp-logout { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--ink-3); border: 1px solid var(--line-soft); background: var(--card);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: all .2s; }
.emp-logout:hover { color: #ff8a8a; border-color: rgba(255,90,90,0.3); background: rgba(255,60,60,0.07); }
.emp-logout svg { width: 16px; height: 16px; }

/* privacy policy + imprint — one quiet line in the bottom-right corner, under the chronicle and the board, in the
   login page's colours. It sits in the app's bottom padding (out of the flex flow), so the circle does not move; the
   board leaves room for it (.grid-wrap). */
.emp-legal { position: absolute; right: clamp(18px, 3vw, 44px); bottom: 6px; z-index: 2;
  font-size: 11px; line-height: 14px; letter-spacing: 0.02em; color: var(--ink-3); white-space: nowrap; }
.emp-legal a { color: #8a8475; transition: color .2s; }
.emp-legal a:hover { color: var(--gold); }

/* ---- the stage: holds the orbital circle OR the card grid ---- */
.emp-stage { flex: 1; min-height: 0; position: relative; }

/* ============================================================================
   THE CIRCLE — a wheel laid on a table, seen FROM THE FRONT, so the orbit reads
   almost as a line. The focused province sits at the front (low-centre); neighbours
   fall away to the sides; the far side is hidden (JS). The timeline runs parallel
   just beneath it — both live in .orbit-zone, on the right, clear of the bust.
   ============================================================================ */
.orbit-zone { position: absolute; left: 39%; right: 3%; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: clamp(10px, 2vh, 26px); }

/* the circle's view-point (the front tab) is offset right & down from centre. The shift is in
   vw on purpose: 1vw = 1% of screen width, so on the ~52.5cm display 20.95vw ≈ 11cm right and
   5.71vw ≈ 3cm down — the whole wheel travels with its focus. */
.ring-scene { position: relative; flex: none; width: 100%; height: clamp(206px, 33vh, 312px);
  touch-action: pan-y; user-select: none; --front-y: 68%;
  transform: translate(20.95vw, 5.71vw); }
.ring { position: absolute; inset: 0; z-index: 1; }

/* the provinces revolve on an invisible orbit — no rim line, no golden halo behind them. */

/* a province tab — a horizontal rectangle: mark on the left, NAME over STATUS on the right */
/* neutral glass tab — same house glass as the Arestoteles cards: white hairline edge,
   white spec, no gold. The focused tab brightens with a white ring, not a gold glow. */
.ring-tab { position: absolute; left: 50%; top: var(--front-y); width: 268px; height: 98px;
  display: flex; align-items: center; gap: 15px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-card);
  background: linear-gradient(rgba(16,16,21,0.62), rgba(16,16,21,0.62)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 32%, rgba(255,255,255,0.02) 68%, rgba(255,255,255,0.10)) border-box;
  -webkit-backdrop-filter: blur(13px) saturate(135%); backdrop-filter: blur(13px) saturate(135%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.10);
  cursor: pointer; will-change: transform, opacity;
  transition: border-color .25s, box-shadow .3s, background .25s; }
.ring-tab::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,0.07), transparent 46%); }
.ring-tab.is-front {
  border-color: rgba(255,255,255,0.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 26px 60px -26px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.12);
  background: linear-gradient(rgba(26,27,33,0.64), rgba(20,21,26,0.64)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.26), rgba(255,255,255,0.05) 32%, rgba(255,255,255,0.03) 68%, rgba(255,255,255,0.12)) border-box; }
/* smooth revolve only when snapping/stepping; instant while dragging */
.ring.settling .ring-tab { transition: transform .5s cubic-bezier(.22,.7,.2,1), opacity .42s, filter .42s, border-color .25s, box-shadow .3s, background .25s; }

.tab-logo { width: 58px; height: 58px; flex: none; display: flex; align-items: center; justify-content: center; }
.tab-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.55)); }
.tab-mono { width: 54px; height: 54px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 26px; color: var(--ink); border: 1px solid rgba(255,255,255,0.12);
  background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.08), rgba(0,0,0,0.2)); }
.tab-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tab-name { font-weight: 700; font-size: 16.5px; letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--gold-name); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)); }
.tab-status { font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; }
.st-live  { color: #6fcf9b; } .st-wip { color: var(--gold-2); } .st-hold { color: #84b6ff; } .st-scout { color: var(--ink-3); }
.st-muster { color: #c8a25f; }    /* declared, gearing up — a muted bronze (not the live/building tones) */
/* in the ring tabs, the WIP status word drops its gold for a neutral tone (no glimmer) */
.tab-status.st-wip { color: var(--ink-2); }

/* spin hint under the circle */
.ring-hint { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.02em; color: var(--ink-3); opacity: 0.8; pointer-events: none; white-space: nowrap; }
.ring-hint kbd { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; }

/* freshly-conquered province materialising onto the ring */
@keyframes throneRise {
  0% { opacity: 0; transform: scale(.7) translateY(20px); }
  100% { opacity: 1; transform: none; }
}
.ring-tab.rising { animation: throneRise .9s cubic-bezier(.2,.8,.25,1) both; }

/* ============================================================================
   THE CARD GRID — "project mode": provinces leave the circle for a clean,
   count-adaptive board (2 → L/R · 3 → L/M/R · 4 → quadrants · …) with context
   under each. The SAME grid renders the EXPANSIONS (plans).
   ============================================================================ */
.grid-wrap { position: absolute; inset: 0 0 14px; display: flex; flex-direction: column; }   /* 14px: the legal line's room */
.grid-bar { flex: none; display: flex; align-items: center; justify-content: center; height: 34px; }
.grid-back { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.18em; text-indent: 0.18em; text-transform: uppercase; color: var(--ink-3);
  padding: 7px 14px; border-radius: 10px; border: 1px solid transparent; transition: all .2s; }
.grid-back:hover { color: var(--ink); border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); }
.grid-back svg { width: 14px; height: 14px; }

.card-grid { flex: 1; min-height: 0; display: grid; gap: clamp(22px, 2.8vw, 48px);
  padding: clamp(10px, 1.8vh, 22px) clamp(6px, 1.2vw, 20px) 6px; align-content: center; justify-items: stretch; }

.proj-card { position: relative; display: flex; flex-direction: column; text-align: left;
  padding: clamp(22px, 2.3vw, 32px); border-radius: var(--r-card); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(rgba(18,18,23,0.62), rgba(13,13,17,0.66)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04) 32%, rgba(255,255,255,0.02) 68%, rgba(255,255,255,0.10)) border-box;
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform .25s cubic-bezier(.2,.7,.25,1), border-color .25s, box-shadow .3s;
  opacity: 0; animation: cardIn .55s cubic-bezier(.2,.7,.25,1) both; }
.proj-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 90% at 0% 0%, rgba(255,255,255,0.06), transparent 46%); }
.proj-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 40px 80px -34px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.12); }
button.proj-card { cursor: pointer; }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(22px) scale(.96); } 100% { opacity: 1; transform: none; } }

.pc-top { display: flex; align-items: center; gap: 15px; margin-bottom: 14px; }
.pc-logo { width: 60px; height: 60px; flex: none; display: flex; align-items: center; justify-content: center; }
.pc-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 22px rgba(0,0,0,0.55)); }
.pc-logo .tab-mono { width: 56px; height: 56px; font-size: 27px; }
.pc-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-name { font-weight: 700; font-size: clamp(18px, 1.5vw, 23px); letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gold-name); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.55)); }
.pc-status { font-size: 9.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.pc-blurb { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); font-weight: 450; text-wrap: pretty; flex: 1; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--line-soft); }
.pc-domain { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.pc-visit { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650;
  letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; color: var(--ink-2); transition: color .2s, gap .2s; }
.proj-card:hover .pc-visit { color: var(--ink); gap: 9px; }
.pc-visit svg { width: 13px; height: 13px; }

/* the "claim new ground" card that ends the expansions board */
.proj-card.is-new { align-items: center; justify-content: center; text-align: center; border-style: dashed;
  background: linear-gradient(rgba(14,14,18,0.4), rgba(11,11,15,0.44)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.10)) border-box; color: var(--ink-3); }
.proj-card.is-new:hover { color: var(--ink); }
.pc-new-mark { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed rgba(255,255,255,0.2); margin-bottom: 14px; }
.pc-new-mark svg { width: 24px; height: 24px; }

/* ============================================================================
   THE CHRONICLE LOG — under the circle, on the right. A bright golden line with
   live golden dust radiating off it (canvas), the busts of the updated projects as
   its markers (sitting on the line), and the log entry beneath each.
   --log-line-y must match LINE_Y in panels.jsx (the busts' centre on the line).
   ============================================================================ */
.emp-log { position: absolute; left: 39vw; right: 3vw; bottom: clamp(28px, 7vh, 92px);
  height: 178px; --log-line-y: 34px; z-index: 1; pointer-events: none; }
/* the wrapper stays click-through (so the bust/ring behind it stay reachable), but the
   scrolling strip itself must be grabbable — otherwise its scrollbar can't be dragged. */
.emp-log .log-track { pointer-events: auto; }
.log-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.log-track { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-start;
  justify-content: flex-start; gap: clamp(16px, 2vw, 40px); padding: 0 clamp(10px, 2vw, 28px);
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: rgba(237,202,119,0.32) transparent; }
.log-track::-webkit-scrollbar { height: 6px; }
.log-track::-webkit-scrollbar-track { background: transparent; }
.log-track::-webkit-scrollbar-thumb { background: rgba(237,202,119,0.28); border-radius: 4px; }
.log-track::-webkit-scrollbar-thumb:hover { background: rgba(237,202,119,0.5); }
/* fixed-width nodes so the strip scrolls instead of squeezing — oldest left, newest right */
.log-node { flex: 0 0 clamp(178px, 17vw, 224px); display: flex; flex-direction: column; align-items: center; text-align: center; }

/* the marker: the project's bust in a glowing golden coin, centred on the line */
.log-bust { width: 50px; height: 50px; margin-top: calc(var(--log-line-y) - 25px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 38%, rgba(255,228,160,0.22), rgba(8,7,5,0.55));
  border: 1.5px solid rgba(255,222,150,0.75);
  box-shadow: 0 0 16px -2px rgba(255,206,112,0.65), 0 0 4px rgba(255,232,170,0.5), inset 0 0 9px rgba(255,224,150,0.22); }
.log-bust img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.65)); }

.log-meta { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.log-proj { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-2); }
.log-dot { color: var(--ink-3); font-size: 10px; }
.log-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.02em; }
.log-text { font-size: 12px; line-height: 1.55; color: var(--ink-2); font-weight: 450; text-wrap: pretty; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================================
   BUTTONS
   ============================================================================ */
.emp-btn { height: 44px; padding: 0 20px; font-size: 13px; font-weight: 650; letter-spacing: 0.06em;
  border-radius: 12px; color: #1a1206; transition: filter .18s, transform .06s;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); }
.emp-btn:hover { filter: brightness(1.05); }
.emp-btn:active { transform: translateY(1px); }
.emp-btn:disabled { opacity: .5; cursor: default; }
.emp-btn-ghost { height: 44px; padding: 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 12px; color: var(--ink-2); border: 1px solid var(--line-soft); background: var(--card); transition: all .2s; }
.emp-btn-ghost:hover { color: var(--gold-hi); border-color: var(--line-2); background: var(--card-2); }

/* ============================================================================
   THE FORGE — CONQUER opens here (centered modal over a dimmed hub).
   ============================================================================ */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(2,2,4,0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; animation: fadeIn .25s ease forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.panel-x { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); border-radius: 10px; color: var(--ink-2); transition: all .2s; }
.panel-x:hover { color: var(--gold-hi); border-color: var(--line-2); }

.forge { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; padding: 24px; }
.forge-card { position: relative; width: min(96vw, 560px); max-height: 92vh; overflow-y: auto; padding: 30px 30px 26px;
  border: 1px solid var(--line-2); border-radius: 22px;
  background: linear-gradient(rgba(16,14,18,0.92), rgba(10,9,12,0.95));
  -webkit-backdrop-filter: blur(30px) saturate(150%); backdrop-filter: blur(30px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  transform: scale(.97); opacity: 0; animation: forgeIn .4s cubic-bezier(.2,.8,.25,1) forwards; }
@keyframes forgeIn { to { transform: none; opacity: 1; } }
/* More apps (a member's "+"): the Forge's frame over a dimmed hub, one row per app. */
.forge.more { background: rgba(2,2,4,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.more-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); }
.more-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 16px 2px; border-bottom: 1px solid var(--line-soft); }
.more-logo { width: 52px; height: 52px; }
.more-logo .tab-mono { width: 46px; height: 46px; font-size: 22px; }
.more-id { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.more-name { font-size: 16px; }
.more-blurb { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.more-act .emp-btn { height: 40px; padding: 0 16px; font-size: 12.5px; white-space: nowrap; }
.more-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.more-state.is-asked { color: var(--gold-2); text-transform: none; letter-spacing: 0.02em; font-size: 12px; }
.more-error { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: #e0b4a6;
  border: 1px solid rgba(207,143,120,0.3); background: rgba(58,34,34,0.3); }
.more-empty { font-size: 13px; color: var(--ink-3); text-align: center; padding: 18px 0 6px; }
.forge-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.30em; text-indent: 0.30em; color: var(--gold-2); text-align: center; }
.forge-h { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; text-align: center; margin: 7px 0 4px;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.forge-sub { font-size: 13px; color: var(--ink-3); text-align: center; margin-bottom: 22px; text-wrap: pretty; }
.forge-field { margin-bottom: 16px; }
.forge-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-2);
  display: block; margin-bottom: 8px; }
.forge-input, .forge-textarea { width: 100%; padding: 13px 15px; font-size: 15px; color: var(--ink); font-family: var(--sans);
  border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255,255,255,0.03); outline: none;
  transition: border-color .18s, background .18s; }
.forge-input:focus, .forge-textarea:focus { border-color: var(--gold-2); background: rgba(237,202,119,0.05); }
.forge-input.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.forge-textarea { resize: vertical; min-height: 78px; line-height: 1.5; }
.forge-hintline { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }
.forge-hintline b { color: var(--gold-2); }
.forge-actions { display: flex; gap: 10px; margin-top: 22px; }
.forge-actions .emp-btn, .forge-actions .emp-btn-ghost { flex: 1; }

.handoff-step { margin-bottom: 18px; }
.handoff-num { font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; color: var(--gold-2); }
.handoff-h { font-size: 14.5px; font-weight: 650; color: var(--ink); margin: 4px 0 8px; }
.codeblock { position: relative; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(0,0,0,0.42); }
.codeblock pre { margin: 0; padding: 13px 15px; overflow-x: auto; font-family: var(--mono); font-size: 12px;
  line-height: 1.6; color: var(--ink-2); white-space: pre; scrollbar-width: thin; }
.copy-btn { position: absolute; top: 8px; right: 8px; height: 28px; padding: 0 11px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; border-radius: 8px; color: var(--ink-2); border: 1px solid var(--line-soft);
  background: rgba(20,18,14,0.85); transition: all .18s; display: inline-flex; align-items: center; gap: 6px; }
.copy-btn:hover { color: var(--gold-hi); border-color: var(--line-2); }
.copy-btn.done { color: #6ee0a0; border-color: rgba(110,224,160,0.5); }
.copy-btn svg { width: 13px; height: 13px; }

/* ============================================================================
   THE PROVINCE PAGE — a board card morphs to fill the screen (its rect animates to
   the viewport, then the content fades in). Neutral glass; the NAME is golden and
   links to the live site. Sections show a tidy empty state until they're written.
   ============================================================================ */
.pd-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; animation: fadeIn .3s ease forwards; }
.pd-panel { position: fixed; overflow: hidden; z-index: 71;
  border: 1px solid rgba(255,255,255,0.10);
  /* Arestoteles-style ground: near-black with crimson glows top-centre + lower-right */
  background:
    radial-gradient(72% 52% at 50% -14%, rgba(216,26,52,0.22), transparent 60%),
    radial-gradient(60% 52% at 92% 116%, rgba(150,14,38,0.18), transparent 58%),
    linear-gradient(180deg, #08080a, #050506);
  box-shadow: 0 50px 130px -40px rgba(0,0,0,0.95);
  transition: top .42s cubic-bezier(.4,.85,.2,1), left .42s cubic-bezier(.4,.85,.2,1),
    width .42s cubic-bezier(.4,.85,.2,1), height .42s cubic-bezier(.4,.85,.2,1), border-radius .42s ease; }
.pd-close { position: absolute; top: 22px; right: 26px; z-index: 3; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  color: var(--ink-2); border: 1px solid var(--line-soft); background: var(--card);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: all .2s; }
.pd-close:hover { color: var(--ink); border-color: rgba(255,255,255,0.2); background: var(--card-2); }
.pd-close svg { width: 18px; height: 18px; }

.pd-inner { height: 100%; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; justify-content: safe center;
  padding: clamp(26px, 4.5vh, 60px) clamp(18px, 3vw, 44px);
  opacity: 0; transition: opacity .3s ease .16s; }
.pd-panel.open .pd-inner { opacity: 1; }
.pd-content { width: min(1680px, 93vw); --pd-gap: clamp(18px, 1.8vw, 32px); }

/* header — a centred column: bust · shiny name · status/domain */
.pd-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 13px;
  margin-bottom: clamp(14px, 1.8vw, 22px); }
.pd-logo { width: clamp(64px, 6.5vw, 92px); height: clamp(64px, 6.5vw, 92px); flex: none; display: flex; align-items: center; justify-content: center; }
.pd-logo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 26px rgba(0,0,0,0.55)); }
.pd-logo .tab-mono { width: 100%; height: 100%; font-size: clamp(28px, 3vw, 40px); }
.pd-name { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-2); cursor: pointer;
  font-weight: 700; font-size: clamp(30px, 4.4vw, 58px); letter-spacing: 0.02em; text-transform: uppercase;
  transition: gap .2s, filter .2s; }
/* shiny, like THE EMPIRE — a travelling champagne sheen (expanded view only) */
.pd-name-t { background: linear-gradient(95deg, #fff4cf 0%, #ffe7a0 19%, #f6cf73 38%, #fff2c8 51%, #f0c662 66%, #ffeaad 85%, #f7d07a 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 14px rgba(255,226,150,0.22)); animation: titleSheen 6.5s ease-in-out infinite; }
.pd-name svg { width: clamp(18px, 2vw, 24px); height: clamp(18px, 2vw, 24px); opacity: .75; }
.pd-name:hover { gap: 19px; filter: brightness(1.06); }
.pd-sub { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pd-sub .pc-status { font-size: 10px; }
.pd-domain { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.01em; }

/* overview — centred across the page, with a subtle divider beneath */
.pd-lead { max-width: 860px; margin: clamp(6px,1vw,12px) auto 0; text-align: center; text-wrap: balance;
  font-size: clamp(16px, 1.45vw, 21px); line-height: 1.65; color: var(--ink); font-weight: 450; }
.pd-divider { width: min(440px, 62%); height: 1px; margin: clamp(20px,2.4vw,32px) auto clamp(26px,3vw,42px);
  background: linear-gradient(90deg, transparent, rgba(255,234,176,0.5), transparent); }

/* the section "tabs" — label pulled out & centred above an Arestoteles-style glass box */
.pd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pd-gap); align-items: start;
  margin-bottom: clamp(20px, 2.2vw, 34px); }
.pd-sec { display: flex; flex-direction: column; }
.pd-sec-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 13px; }
.pd-sec-box { border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-card); padding: clamp(18px, 1.7vw, 26px);
  background: linear-gradient(rgba(20,18,22,0.5), rgba(13,12,16,0.55)) padding-box,
    linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.04) 32%, rgba(255,255,255,0.02) 68%, rgba(255,255,255,0.10)) border-box;
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08); min-height: clamp(108px, 13vh, 148px); }

.pd-addons-wrap { display: flex; justify-content: center; margin-bottom: clamp(24px, 3vw, 44px); }
.pd-addons { width: calc((100% - 2 * var(--pd-gap)) / 3); min-width: 250px; }

.pd-p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.pd-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.pd-list li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-align: left; }
.pd-list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-2); opacity: 0.85; }
.pd-empty { font-size: 13px; color: var(--ink-3); font-style: italic; text-align: center; }

/* change log — the same shiny golden timeline as the main page */
.pd-tl-wrap { margin-top: clamp(6px, 1vw, 14px); }
.pd-tl { position: relative; height: 166px; --log-line-y: 34px; margin-top: 10px; }
.pd-tl .log-track { justify-content: flex-start; }

/* ============================================================================
   INTRO — the bust slams onto the wall; cracks burst from the root all at once
   and grow outward; "ARES EMPIRE" slams in, in polished gold with a single shine.
   ============================================================================ */
.intro-overlay { position: fixed; inset: 0; z-index: 9000; background: #000; overflow: hidden; will-change: opacity; }
.intro-shake { position: absolute; inset: 0; will-change: transform; }
.intro-stage { position: absolute; inset: 0; overflow: hidden; perspective: 1200px;
  background: radial-gradient(60% 46% at 50% 56%, rgba(150,18,30,0.16), transparent 64%), #000; }
.intro-bust { position: absolute; aspect-ratio: 0.785; transform-origin: center; will-change: transform; }
.intro-bust-ph, .intro-bust-img { position: absolute; inset: 0; }
.intro-bust-img { width: 100%; height: 100%; object-fit: contain; }
/* no drop-shadow on the bust: it's redrawn at ~3x size during the fall, and a black shadow on the
   black wall barely shows */
.intro-bust-ph { border-radius: 12px; overflow: hidden; transition: opacity .3s ease;
  background: linear-gradient(143deg, #efece7 0%, #dad6cf 26%, #bdb8af 52%, #98938a 76%, #7a756d 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -16px 30px rgba(0,0,0,0.28), 0 30px 60px rgba(0,0,0,0.6); }
.bust-ph-vein { position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: soft-light;
  background: linear-gradient(118deg, transparent 28%, rgba(255,255,255,0.5) 30%, transparent 33%),
    linear-gradient(72deg, transparent 58%, rgba(70,66,60,0.5) 60%, transparent 63%); }
.bust-ph-cap { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; font-family: var(--mono);
  font-size: clamp(10px,1.5vw,15px); font-weight: 600; letter-spacing: 0.34em; color: rgba(50,46,40,0.62); text-indent: 0.34em; }

/* impact crater — a scorched, faintly red-rimmed depression under the bust */
.intro-crater { position: absolute; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(0,0,0,0.72), rgba(40,8,12,0.4) 42%, rgba(214,42,58,0.10) 66%, transparent 82%); }

/* the cracks — fine gold fissures with a brief white-hot core (refined, not molten glare) */
.intro-cracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* no filters here: a filter per path is re-rendered every frame while the cracks grow */
.intro-crack { fill: none; stroke: #e7c074; opacity: 0.85; stroke-linecap: round; stroke-linejoin: round; }
.intro-crack.core { stroke: #fff6df; opacity: 0.9; }
.intro-crack-glow { fill: none; stroke: rgba(226,160,90,0.16); stroke-linecap: round; stroke-linejoin: round; }

.intro-dust { position: absolute; transform: translate(-50%,-50%); border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(120,30,34,0.4), rgba(80,16,22,0.14) 56%, transparent 76%); }
.intro-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(46% 40% at 50% 56%, #fff3d0, rgba(255,206,122,0.5) 40%, transparent 72%); }

.intro-band { position: absolute; left: 0; right: 0; bottom: 0; height: 24vh; min-height: 130px;
  display: flex; align-items: center; justify-content: center; padding: 0 clamp(16px,4vw,48px) 7vh; opacity: 0; }
.ares-word { display: flex; justify-content: center; gap: 0.03em; width: 100%; max-width: 1120px;
  font-weight: 700; letter-spacing: 0.02em; line-height: 0.9; font-size: clamp(40px, 8.4vw, 138px); }
.ares-word span { position: relative; will-change: transform, opacity;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35); }
/* a single specular sweep that crosses the gold once, on reveal */
.ares-word.shine span {
  background-image: var(--gold-text),
    linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.92) 50%, transparent 58%);
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, -120% 0;
  -webkit-background-clip: text; background-clip: text;
  animation: goldShine 1.1s ease-out 0s 1 both; }     /* fires when JS adds .shine, after the slam */
@keyframes goldShine { to { background-position: 0 0, 130% 0; } }

/* ============================================================================
   reduced motion + responsive
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay { display: none; }
  .proj-card { animation: none; opacity: 1; }
  .ares-word.shine span { animation: none; }
}

@media (max-width: 1080px) {
  .ring-scene { transform: translate(14vw, 4vw); }   /* gentler shift on smaller screens */
  .emp-figure img { height: 86%; }
}
@media (max-width: 820px) {
  .emp-figure { opacity: 0.24; }                 /* recede the bust so the circle/grid own the screen */
  .ring-scene { transform: none; }               /* the cm offset is desktop-only — recentre on mobile */
  .emp-title { font-size: clamp(16px, 5vw, 24px); letter-spacing: 0.2em; text-indent: 0.2em; }
  .emp-title.is-empire { font-size: clamp(13px, 4vw, 19px); }
  .emp-toggle { padding: 0 12px; letter-spacing: 0.12em; }
  .ring-tab { width: 224px; height: 88px; }
  .card-grid { grid-template-columns: 1fr !important; align-content: start; overflow-y: auto; }
  .ring-hint { display: none; }
  .pd-grid { grid-template-columns: 1fr; }
  .emp-log { left: 3vw; right: 3vw; bottom: 26px; height: 150px; }   /* above the legal line */
  .emp-crest { height: 40px; }
}

/* The public demo (/demo, app/empire-api.js): a band saying the account is made up, Log in instead of Log out. */
.demo-band {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; white-space: nowrap;
  font: 500 13px/1.2 "Space Grotesk", system-ui, sans-serif; color: rgba(244, 241, 233, 0.78);
  background: rgba(14, 12, 9, 0.82); border: 1px solid rgba(233, 200, 107, 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.7);
}
.demo-band b { color: #f4f1e9; font-weight: 700; }
.demo-band a {
  padding: 6px 13px; border-radius: 999px; font-weight: 700; color: #1b1406; text-decoration: none;
  background: linear-gradient(180deg, #fff7da 0%, #f4dd92 30%, #e4c264 60%, #bd9239 100%);
}
.demo-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #e9c86b; box-shadow: 0 0 0 3px rgba(233, 200, 107, 0.2); }
html.demo .emp-logout, html.demo .emp-toggle, html.demo .em-icon-button[aria-label="Log out"] { display: none; }   /* no plans board in the demo */
@media (max-width: 520px) { .demo-band { font-size: 12px; } }