/* Project Union UI kit v5 "Porcelain & Ember" (v4 "Lantern & Lacquer" is commit 7b87bd8) (OVERNIGHT-v5.md chunk 3, research/review-2026-10-15-v4.md).
   Modern and airy, not medieval: one clean sans (Outfit, OFL), warm porcelain surfaces with thin hairlines and soft
   shadows, ONE accent (ember) for the main action, gold only for stars and rewards. No wood, brass, parchment,
   ribbons or chunky 3D. Rule: nothing sits on a painting unless it is part of the world; info lives in the slim
   header, an anchored dock or a bottom sheet. Sizes: buttons 40 px (main CTA 48), portraits/items ~15-20% smaller
   than v4. Phone-first, 390 px wide. Class names match v4 so the screens keep working. */
@font-face { font-family: 'Outfit'; src: url(fonts/Outfit.ttf) format('truetype'); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #f4f1ec; --surf: rgba(255, 253, 249, .84); --surf2: rgba(255, 253, 249, .64); --solid: #fffdf9;
  --line: rgba(44, 34, 24, .10); --line2: rgba(44, 34, 24, .18);
  --ink: #23201c; --ink2: #59534b; --dim: #958d81;
  --ember: #ea5a3e; --ember2: #cf4129; --gold: #eeb53c; --gold2: #b98315; --jade: #2b9b80; --sky: #5f86c9;
  --smoke: rgba(26, 22, 19, .56); --smoke-line: rgba(255, 255, 255, .16);
  --r-common: #a39f98; --r-rare: #3aa679; --r-epic: #6d78e2; --r-legendary: #e4a239; --r-mythic: #e4584a;
  --h-Sp: #e4584a; --h-S: #e4a239; --h-A: #8c6bd6;
  --sh1: 0 1px 2px rgba(40, 26, 12, .06), 0 4px 14px rgba(40, 26, 12, .08);
  --sh2: 0 2px 6px rgba(40, 26, 12, .08), 0 14px 36px rgba(40, 26, 12, .16);
  --blur: saturate(1.4) blur(14px);
  --tint: 44 34 24;   /* ink as an rgb triple: wells and tracks use rgb(var(--tint) / 4%) so they flip with the theme */
  --rim: #fff; --mix: #fff;   /* the white hairline on frosted discs and plates; what rarity tints are mixed with */
  --disc: radial-gradient(circle at 50% 35%, #fffdf9f0, #f1e9dcd8);
  --display: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ui: 500 14px/1.4 var(--display);
  /* names older mode screens still use */
  --txt: var(--ink); --paper: var(--solid); --paper2: #f3eee6; --paper3: #e9e2d6; --parch: var(--solid); --edge: var(--line2); --edge2: var(--dim);
  --wood: var(--ink2); --wood2: var(--ink); --brass: var(--gold); --brass2: var(--gold2); --lac: var(--ember); --lac2: var(--ember2);
  --red: var(--ember); --green: var(--jade); --blue: var(--sky); --purple: #8c6bd6; --amber: #e8962e; --board: var(--surf);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #1d1a17; color-scheme: light; }
/* ---------- dark theme (profile sheet, RUN-v7.md chunk 2): the same porcelain kit as warm charcoal. Ember, gold and jade
   keep their hue but lift for contrast on dark; paintings stay as they are, only a dusk veil over the open sky scenes.
   Set on <html data-theme="dark"> by js/theme.js before the first paint. */
[data-theme=dark] { color-scheme: dark;
  --bg: #16130f; --surf: rgba(33, 29, 25, .86); --surf2: rgba(33, 29, 25, .66); --solid: #221e1a;
  --line: rgba(255, 244, 228, .10); --line2: rgba(255, 244, 228, .18);
  --ink: #f3eee7; --ink2: #c9c0b4; --dim: #91897e;
  --ember2: #ff8466; --gold2: #f1c35a; --jade: #3dbf9f; --sky: #7fa3e0;
  --tint: 255 244 228; --rim: #ffffff26; --mix: #2b2621;
  --disc: radial-gradient(circle at 50% 35%, #3a332cf2, #241f1be6);
  --sh1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .3);
  --sh2: 0 2px 6px rgba(0, 0, 0, .35), 0 14px 36px rgba(0, 0, 0, .5);
  --paper2: #2c2722; --paper3: #36302a; --purple: #a88cf0;
  --veil: linear-gradient(#0e0c0a70, #0e0c0a48 45%, #0e0c0a90); }
/* reduce motion (profile sheet): no slides, pulses or bounces anywhere; the battle drops its shake and flashes (battle.js) */
[data-motion=reduce] *, [data-motion=reduce] ::before, [data-motion=reduce] ::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
body { margin: 0 auto; max-width: 480px; min-height: 100svh; padding-bottom: 72px; color: var(--ink); position: relative; font: var(--ui); }
/* painted scene: <body style="--scene:url(...)">; a very light veil only at the edges, the middle stays clear */
/* (body itself has NO background: it would paint over these negative-z layers) */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; max-width: 480px; margin: 0 auto; background-color: var(--bg); background-image: var(--scene, none); background-position: 50% 0; background-size: cover; background-repeat: no-repeat; }
body::after { content: ''; position: fixed; inset: 0; z-index: -1; max-width: 480px; margin: 0 auto; pointer-events: none; background: var(--veil, linear-gradient(#fff0, #fff0 70%, #1d1a1722)); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { -webkit-user-drag: none; user-select: none; }
code { font: 500 11px ui-monospace, monospace; color: var(--ember2); }
svg.i { display: block; flex: none; }
.lbl-o { color: #fff; text-shadow: 0 1px 3px #000a; }

/* ---------- slim header: 48 px, frosted porcelain. .top.dark = smoked glass for maps and battle */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 10px;
  background: var(--surf); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); }
.top h1 { margin: 0; font: 600 17px var(--display); letter-spacing: .1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .back { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--ink); font: 400 22px/1 var(--display); cursor: pointer; }
.top .back:active { background: var(--line); }
.top .sp { flex: 1; }
.top.dark { background: var(--smoke); border-bottom-color: var(--smoke-line); color: #fff; }
.top.dark .back { color: #fff; }
.top.dark .pill { background: #ffffff1f; border-color: var(--smoke-line); color: #fff; }

/* ---------- currencies: small chips */
.coin { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 9px 0 3px; border-radius: 12px; background: var(--surf2); border: 1px solid var(--line); font: 600 12px var(--display); font-variant-numeric: tabular-nums; }
.coin img { width: 20px; height: 20px; object-fit: contain; }
.top.dark .coin { background: #ffffff1a; border-color: var(--smoke-line); }

/* ---------- small things */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font: 600 12px var(--display); background: var(--surf2); border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.pill.ember { background: #ea5a3e14; border-color: #ea5a3e40; color: var(--ember2); }
.pill.jade { background: #2b9b8014; border-color: #2b9b8040; color: var(--jade); }
.pill.gold { background: #eeb53c1f; border-color: #eeb53c55; color: var(--gold2); }
.muted { color: var(--dim); font-size: 12px; font-weight: 500; }
.row { display: flex; gap: 8px; align-items: center; }
.grid { display: grid; gap: 8px; }
.g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g5 { grid-template-columns: repeat(5, 1fr); } .g6 { grid-template-columns: repeat(6, 1fr); }
.tag { display: inline-block; padding: 1px 7px; margin: 1px; border-radius: 6px; font: 600 10.5px var(--display); background: var(--paper2); color: var(--ink2); }
.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 60; padding: 9px 16px; border-radius: 999px; max-width: 86vw; text-align: center;
  background: var(--smoke); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; font: 500 13px var(--display); box-shadow: var(--sh2); }
.dot { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 2px var(--solid); }
.label { font: 600 10.5px var(--display); letter-spacing: .9px; text-transform: uppercase; color: var(--dim); }

/* ---------- boards: porcelain surface, hairline, soft shadow; titles are plain text, no ribbons */
.panel, .board { position: relative; margin: 10px; padding: 14px; background: var(--surf); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh1); color: var(--ink); }
.panel h2, .board h2, .ribbon { margin: 0 0 10px; font: 600 16px var(--display); letter-spacing: .1px; color: var(--ink); }
.panel h3, .board h3 { margin: 14px 0 6px; font: 600 10.5px var(--display); letter-spacing: .9px; text-transform: uppercase; color: var(--dim); }
.panel p { margin: 6px 0; color: var(--ink2); }
.panel.dark { background: var(--smoke); border-color: var(--smoke-line); color: #fff; }
.panel.dark h2 { color: #fff; } .panel.dark p, .panel.dark .muted { color: #ffffffb0; }
.glass, .well { background: rgb(var(--tint) / 3.9%); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.sep { height: 1px; margin: 10px 0; background: var(--line); }

/* ---------- buttons: flat, slim, rounded. ember = the ONE main action per screen; ghost = everything else */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  font: 600 14px var(--display); letter-spacing: .2px; color: #fff; border: 0;
  background: linear-gradient(#f06a4f, #cf4129); box-shadow: 0 1px 0 #ffffff40 inset, 0 4px 12px #ea5a3e40; transition: transform .1s, filter .1s; }
.btn.jade, .btn.blue { background: linear-gradient(#36ad91, #23866e); box-shadow: 0 1px 0 #ffffff40 inset, 0 4px 12px #2b9b8038; }
.btn.gold { background: linear-gradient(#f6c75a, #e0a12a); color: #3d2a06; box-shadow: 0 1px 0 #ffffff60 inset, 0 4px 12px #eeb53c40; }
.btn.ghost, .btn.paper { color: var(--ink); background: var(--solid); border: 1px solid var(--line2); box-shadow: var(--sh1); }
.btn.sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.btn.lg { min-height: 48px; padding: 0 24px; font-size: 16px; border-radius: 14px; }
.btn:disabled { filter: grayscale(.9) opacity(.55); cursor: default; }
.btn:active:not(:disabled) { transform: scale(.97); filter: brightness(.95); }
.ibtn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surf); color: var(--ink); cursor: pointer; position: relative; }

/* ---------- tabs: text with an ember underline; seg = pill segmented control */
.tabs { display: flex; gap: 18px; overflow-x: auto; padding: 0 14px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tab { flex: 0 0 auto; padding: 10px 0 9px; cursor: pointer; border: 0; background: none; font: 500 13.5px var(--display); color: var(--dim); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ember); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgb(var(--tint) / 5.1%); }
.seg button { flex: 1; min-height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); font: 500 12.5px var(--display); cursor: pointer; }
.seg button.on { background: var(--solid); color: var(--ink); font-weight: 600; box-shadow: var(--sh1); }

/* ---------- icon tile (dock and menus, never loose on a painting): line icon or small painted icon in a soft circle + label */
.itile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; cursor: pointer; }
.itile .fr { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--solid); border: 1px solid var(--line); box-shadow: var(--sh1); color: var(--ink); }
.itile .fr img { width: 30px; height: 30px; object-fit: contain; }
.itile b { font: 500 11px/1.15 var(--display); text-align: center; color: var(--ink2); }
.itile i { font: 500 9.5px var(--display); font-style: normal; color: var(--dim); }
.itile i.live { color: var(--ember2); font-weight: 600; }
.itile:active .fr { transform: scale(.94); }

/* ---------- item: soft rarity tint + thin rarity ring + painted item; "+15" / "Lv 3" small pill */
.item { position: relative; width: var(--sz, 54px); height: var(--sz, 54px); border-radius: 12px; flex: none; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 15%, color-mix(in srgb, var(--rc) 22%, var(--mix)), color-mix(in srgb, var(--rc) 46%, var(--mix)));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 85%, #fff), var(--sh1); }
.item img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 2px 2px #0003); }
.item .lv { position: absolute; left: 3px; bottom: 3px; padding: 0 4px; border-radius: 5px; font: 600 9.5px/14px var(--display); color: #fff; background: #23201cc0; }
.item .who { position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--solid); object-fit: cover; object-position: 50% 15%; box-shadow: var(--sh1); }
.item .fam { position: absolute; right: 3px; bottom: 3px; font: 600 9px var(--display); padding: 0 4px; border-radius: 4px; color: #fff; }
.item.empty { background: rgb(var(--tint) / 3.9%); box-shadow: inset 0 0 0 1.5px var(--line2); }
.item.empty::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font: 300 24px var(--display); color: var(--dim); }
.item.sel { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--rc) 85%, #fff), 0 0 0 2px var(--solid), 0 0 0 4px var(--ember); }
.r-common { --rc: var(--r-common); } .r-rare { --rc: var(--r-rare); } .r-epic { --rc: var(--r-epic); } .r-legendary { --rc: var(--r-legendary); } .r-mythic { --rc: var(--r-mythic); }
.r-dawn { --rc: #e8b54a; } .r-dusk { --rc: #8c6bd6; } .r-ex { --rc: #e4584a; }

/* ---------- hero portrait: rounded square, thin rarity ring, small level pill, House emblem */
.por { position: relative; aspect-ratio: 1; width: var(--sz, auto); border-radius: 12px; overflow: hidden; cursor: pointer; background: #2a2622;
  box-shadow: inset 0 0 0 2px var(--hc, var(--h-A)), var(--sh1); }
.por > img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; border-radius: 12px; padding: 2px; }
.por .lv { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 5px; font: 600 9.5px/15px var(--display); color: #fff; background: #23201cb8; }
.por .hs { position: absolute; left: 4px; top: 4px; width: 17px; height: 17px; filter: drop-shadow(0 1px 1px #0008); }
.por .st { position: absolute; right: 3px; top: 3px; display: flex; align-items: center; gap: 1px; font: 700 9px/1 var(--display); color: #fff; text-shadow: 0 1px 2px #000c; }
.por .st img { width: 15px; height: 15px; filter: drop-shadow(0 1px 1px #0008); }
/* v7 grade chip (common.js gradeChip): the light's emblem + its name, e.g. Flame II */
.grade { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px 0 2px; height: 22px; border-radius: 999px; border: 0; background: var(--smoke); color: #fff; font: 600 11px/1 var(--display); white-space: nowrap;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.grade img { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px #0006); }
button.grade { cursor: pointer; }
.grade.light { background: rgb(var(--tint) / 6%); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
/* small portraits (team strips, field units): no emblem or stars, just the face and the ring */
.por.xs .hs, .por.xs .st, .por.xs .lv { display: none; }
.por.off { filter: grayscale(1) brightness(.7); }
.por.sel { box-shadow: inset 0 0 0 2px var(--hc, var(--h-A)), 0 0 0 2px var(--solid), 0 0 0 4px var(--ember); }
.h-Sp { --hc: var(--h-Sp); } .h-S { --hc: var(--h-S); } .h-A { --hc: var(--h-A); }
.house-sun { color: #e2a92e; } .house-frost { color: #4f9ad0; } .house-storm { color: #8a5cc8; } .house-ash { color: #e0653a; } .house-moon { color: #7d8aa0; }
.rar-Sp { color: var(--h-Sp); } .rar-S { color: var(--gold2); } .rar-A { color: var(--h-A); } .rar-B { color: var(--dim); }
.pname { margin-top: 4px; font: 500 11.5px var(--display); color: var(--ink2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- tall hero cards (older screens) */
.card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #2a2622; border-radius: 14px; box-shadow: var(--sh1); }
.card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.card .nm { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 6px 5px; text-align: center; font: 600 11.5px var(--display); color: #fff; background: linear-gradient(#0000, #000b); }
.card .rk { position: absolute; top: 4px; right: 4px; z-index: 1; padding: 0 5px; border-radius: 5px; font: 600 9.5px/15px var(--display); background: #fffdf9e6; }
.card .gem { position: absolute; top: 6px; left: 6px; width: 9px; height: 9px; border-radius: 50%; z-index: 2; background: currentColor; box-shadow: 0 0 0 2px #fffd; }
.card.dead img { filter: grayscale(1) brightness(.55); }
.card.sel { box-shadow: 0 0 0 2px var(--solid), 0 0 0 4px var(--ember); }

/* ---------- portrait clusters */
.faces { display: flex; }
.faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; border: 2px solid var(--solid); margin-left: -7px; background: #2a2622; }
.faces img:first-child { margin-left: 0; }
.faces.lg img { width: 38px; height: 38px; margin-left: -9px; }
.faces .dead, .faces img.dead { filter: grayscale(1) brightness(.6); }
.strip { display: flex; gap: 3px; } .strip img { width: 16.66%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 8px; }
.strip.lost img { filter: grayscale(1) brightness(.6); }

/* ---------- stat lines (gear, artifacts, hero): label, value, roll pips; .up = a boosted / chase line */
.bar { height: 6px; border-radius: 3px; background: rgb(var(--tint) / 7.1%); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4cc3a4, var(--jade)); }
.bar.spark > i { background: linear-gradient(90deg, #f6c75a, #e8962e); }
.stat { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; padding: 4px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink2); }
.stat:last-child { border-bottom: 0; }
.stat b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.stat.main b { font-size: 15px; }
.stat.up b { color: var(--gold2); }
.stat.up b::before { content: '▲ '; font-size: 8px; vertical-align: 2px; }
.stat.off { color: var(--dim); } .stat.off b { color: var(--dim); font-weight: 500; }
.pips { display: inline-flex; gap: 2.5px; margin-left: 6px; vertical-align: middle; }
.pips i { width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--tint) / 12.2%); }
.pips i.on { background: var(--gold); }
.pips.max i.on { background: var(--ember); }
.skill { padding: 10px 12px; margin: 8px 0; border-radius: 14px; background: var(--solid); border: 1px solid var(--line); }
.skill .hd { display: flex; align-items: center; gap: 8px; }
.skill .slot { font: 600 9.5px/16px var(--display); padding: 0 7px; border-radius: 5px; background: #2b9b801c; color: var(--jade); text-transform: uppercase; letter-spacing: .6px; }
.skill .slot.ult { background: #ea5a3e1c; color: var(--ember2); }
.skill .slot.passive1, .skill .slot.passive2 { background: rgb(var(--tint) / 7.1%); color: var(--ink2); }
.skill .nm { font: 600 14px var(--display); color: var(--ink); }
.skill p { margin: 5px 0 0; color: var(--ink2); font-size: 13px; }
.skill .diff { margin-top: 5px; font: 500 12px var(--display); color: var(--ember2); }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; color: var(--dim); font: 600 10px var(--display); letter-spacing: .8px; text-transform: uppercase; padding: 6px 4px; border-bottom: 1px solid var(--line2); }
table.t td { padding: 7px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.t tr.me td { background: #eeb53c1f; }
.zone-up { border-left: 3px solid var(--jade); } .zone-down { border-left: 3px solid var(--ember); }

/* ---------- bottom tab bar (v6): frosted, 5 tabs, each a small painted icon over a label; the current tab gets an
   ember hairline on top and full colour, the others sit a little quieter */
.navbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9; display: flex; justify-content: center; pointer-events: none; }
.navbar > div { pointer-events: auto; width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surf); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-top: 1px solid var(--line); }
.navbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%; font: 500 10.5px var(--display); color: var(--dim); }
.navbar a img { width: 28px; height: 28px; object-fit: contain; opacity: .82; transition: transform .12s; }
.navbar a.on { color: var(--ink); font-weight: 600; }
.navbar a.on img { filter: drop-shadow(0 2px 3px #0002); transform: scale(1.08); }
.navbar a.on::before { content: ''; position: absolute; top: -1px; left: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 0 0 2px 2px; background: var(--ember); }
.navbar a .dot { top: 6px; right: calc(50% - 18px); }
.navbar a:active img { transform: scale(.9); }

/* ---------- v6 icon columns (Home, Union): round frosted discs with a painted icon, the label under it (58 px discs
   since his v6 note: "a tiny bit bigger"). Two columns hug the screen edges; the scene shows between and around them. */
.hcol { position: absolute; z-index: 3; top: 58px; display: flex; flex-direction: column; gap: 10px; width: 68px; }
.hcol.l { left: 4px; } .hcol.r { right: 4px; }
.cb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; }
.cb .fr { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--disc); border: 1px solid var(--rim); box-shadow: 0 0 0 1px var(--line2), 0 3px 8px #2c22182e; }
.cb .fr img { width: 47px; height: 47px; object-fit: contain; filter: drop-shadow(0 1px 1.5px #0003); }
.cb b, .cb i { font: 600 12px/1.1 var(--display); color: var(--ink); text-align: center; text-shadow: 0 0 3px #fff, 0 0 6px #fff, 0 0 10px #fffc; white-space: nowrap; }
.cb i { font-size: 10px; font-weight: 600; font-style: normal; color: var(--ink2); }
.cb i.live { color: var(--ember2); }
.cb .dot { top: 1px; right: 1px; }
.cb:active .fr { transform: scale(.93); }

/* ---------- v6 buildings on a scene (Home, Union): the sprite stands with its base on (x, y); its frosted name plate
   sits on the base. The scene box (.scene) keeps the painting's 2:3 ratio so buildings stay on their plazas; put it in a .scene-box. */
.scene { position: absolute; top: 50%; left: 50%; width: max(66.667cqh, min(100cqw, 72cqh)); height: max(100cqh, min(150cqw, 108cqh)); transform: translate(-50%, -50%); background: var(--scene-img) 50% 50% / 100% 100% no-repeat; }
.scene-box { container-type: size; }   /* the scene's parent: the scene covers it (crops the long side) */
/* short phones: the scene would lose the top-row roofs and the bottom plates, so it crops at most 8% of the height and
   the side strips this leaves (under the icon columns) show the same painting, blurred */
.scene-box::before { content: ''; position: absolute; inset: -24px; background: var(--scene-img) 50% 50% / cover no-repeat; filter: blur(8px) saturate(.9); }
.bld { position: absolute; z-index: 1; display: block; transform: translate(-50%, -100%); cursor: pointer; }
.bld > img { display: block; width: 100%; filter: drop-shadow(0 6px 6px #2c221830); transition: transform .15s; }
.bld:active > img { transform: scale(.96); }
.bld .plate { position: absolute; left: 50%; top: 100%; transform: translate(calc(-50% + var(--dx, 0px)), calc(-62% + var(--dy, 0px))); display: flex; flex-direction: column; align-items: center; padding: 3px 10px 4px; border-radius: 10px; white-space: nowrap;
  background: var(--surf); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--rim); box-shadow: 0 0 0 1px var(--line), 0 3px 8px #2c221826; }
.bld .plate b { font: 600 12px/1.15 var(--display); color: var(--ink); }
.bld .plate i { display: inline-flex; align-items: center; gap: 4px; font: 500 10px/1.2 var(--display); font-style: normal; color: var(--dim); }
.bld .plate i.live { color: var(--ember2); font-weight: 600; }
.bld .plate .lv { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 2px #ea5a3e33; }

/* ---------- bottom sheet: slides up, rounded top, a grabber; the page stays visible above it */
.sheet { position: fixed; inset: 0; z-index: 30; background: rgba(24, 20, 16, .32); display: flex; justify-content: center; align-items: flex-end; animation: fade .18s ease-out; }
.sheet > .panel { width: 100%; max-width: 480px; max-height: 88svh; overflow: auto; margin: 0; padding: 22px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
  background: var(--solid); border: 0; box-shadow: var(--sh2); animation: rise .22s cubic-bezier(.2, .8, .2, 1); }
.sheet > .panel::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--line2); }
.sheet .x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgb(var(--tint) / 5.9%); color: var(--ink2); font: 500 14px var(--display); cursor: pointer; }
/* artifact / exclusive effect steps: the current text once, then one chip per step with its number */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.steps > div { padding: 4px 0 5px; border-radius: 9px; text-align: center; background: rgb(var(--tint) / 3.9%); color: var(--dim); font: 500 10px var(--display); }
.steps > div b { display: block; font: 600 13px var(--display); color: var(--ink2); }
.steps > div.done b { color: var(--ink); }
.steps > div.on { background: #ea5a3e14; color: var(--ember2); } .steps > div.on b { color: var(--ember2); }
@keyframes rise { from { transform: translateY(40px); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }
input[type=range] { accent-color: var(--ember); }
select, input { font: inherit; }

/* ---------- dark theme, per piece: labels on paintings get a dark halo; the town and union scenes get a dusk wash
   under the buildings (the sprites stay a little brighter so the menu still reads) */
[data-theme=dark] .cb b, [data-theme=dark] .cb i { text-shadow: 0 0 3px #000, 0 0 6px #000c, 0 0 10px #0009; }
[data-theme=dark] .scene::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#141a2a66, #12100e59); }
[data-theme=dark] .scene-box::before { filter: blur(8px) saturate(.8) brightness(.6); }
[data-theme=dark] .bld > img { filter: drop-shadow(0 6px 6px #0006) brightness(.88); }
[data-theme=dark] .card .rk { background: #221e1ae6; }