:root {
  --bg: #07080c;
  --bg2: #10131c;
  --panel: rgba(16, 18, 28, 0.82);
  --line: rgba(201, 162, 39, 0.28);
  --gold: #c9a227;
  --gold2: #e8d48b;
  --blood: #c41e3a;
  --teal: #3d9ca8;
  --fog: #8b93a7;
  --text: #e7e3d6;
  --dim: #8a8474;
  --vit: #c41e3a;
  --will: #5b7cfa;
  --nerve: #d9782c;
  --comp: #7d5ea7;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; max-width: 100%; overflow-x: hidden; }
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: radial-gradient(1200px 600px at 20% -10%, #1a1020 0%, var(--bg) 55%);
  color: var(--text);
  letter-spacing: 0.01em;
  width: 100%;
}
h1, h2, .brand, .kicker {
  font-family: "Cormorant Garamond", Georgia, serif;
}
a { color: var(--gold2); text-decoration: none; }
a:hover { color: #fff; }
.fog {
  pointer-events: none; position: fixed; inset: -6%;
  background: radial-gradient(ellipse at 70% 120%, rgba(61,156,168,0.08), transparent 50%),
              radial-gradient(ellipse at 10% 80%, rgba(196,30,58,0.07), transparent 45%);
  animation: drift 18s ease-in-out infinite alternate;
}
.grain {
  pointer-events: none; position: fixed; inset: 0; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence baseFrequency='0.8' numOctaves='2'/></filter><rect width='80' height='80' filter='url(%23n)' opacity='0.55'/></svg>");
}
@keyframes drift { to { transform: translate3d(-2%, -1%, 0) scale(1.04); } }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(7,8,12,0.75);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 5;
  flex-wrap: wrap;
}
.brand {
  font-size: 1.45rem; letter-spacing: 0.28em; color: var(--gold);
  font-weight: 600;
}
.who { flex: 1; display: flex; align-items: center; gap: 0.7rem; }
button.who {
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
  padding: 0; cursor: default;
}
body:has(#mePop) button.who { cursor: pointer; }
body:has(#mePop) button.who:hover .who-name { color: var(--gold2); }
.who-av { width: 42px; height: 42px; object-fit: cover; border: 1px solid var(--gold); }
.who-name { display: block; font-weight: 600; }
.who-class { color: var(--dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; }
.who-record {
  display: block;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--fog);
}
.who-record b { font-weight: 600; }
.who-record .w { color: #6eb6ea; }
.who-record .l { color: #e08090; }
.npc.side-dark strong { color: #c084fc; }
.npc.side-light strong { color: #6eb6ea; }
.street-fights {
  flex: 0 0 auto;
  margin: 0.4rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid #1c1e28;
}
.street-fights h3 { margin: 0 0 0.3rem; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold2); }
.street-fight { display: grid; gap: 0.2rem; padding: 0.35rem 0; border-bottom: 1px solid #1c1e28; }
.street-fight p { margin: 0; font-size: 0.82rem; }
.street-fight .btn { width: fit-content; }
.chat-fight { margin: 0.15rem 0; }
.chat-priv { background: rgba(110, 182, 234, 0.08); border-left: 2px solid #6eb6ea; padding-left: 0.4rem; }
.priv-tag { color: #6eb6ea; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 0.25rem; }
.chat-priv-lab { margin: 0 0 0.25rem; color: #6eb6ea; font-size: 0.78rem; }
.marks { color: var(--gold2); font-variant-numeric: tabular-nums; }
.roster select {
  background: #0b0d14; color: var(--gold2); border: 1px solid var(--line);
  font: inherit; padding: 0.28rem 0.45rem; max-width: 16rem;
}
.rank-jump { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
.rank-jump span { color: var(--dim); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rank-jump button {
  min-width: 1.8rem; padding: 0.2rem 0.35rem; background: #12141d; border: 1px solid #333;
  color: var(--fog); cursor: pointer; font: inherit; font-size: 0.78rem;
}
.rank-jump button.on { border-color: var(--gold); color: var(--gold2); }
.out button {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 0.35rem 0.7rem; cursor: pointer; font: inherit;
}
.topbar .paper-btn {
  margin-left: auto;
  min-width: 7.2rem;
}

.play-nav {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.32rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 12, 18, 0.92);
  backdrop-filter: blur(10px);
  z-index: 6;
  flex-wrap: wrap;
}
.nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 5.4rem; padding: 0.32rem 0.7rem;
  background: linear-gradient(180deg, #2a2418, #16130e);
  border: 1px solid #5a4a28; color: var(--gold2);
  font: inherit; font-size: 0.78rem; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; text-decoration: none;
}
.nav-btn:hover { border-color: var(--gold); color: #fff; }
.nav-btn.on { border-color: var(--gold); background: linear-gradient(180deg, #3a3018, #1c160c); color: #fff; }
body.is-play .topbar { position: sticky; top: 0; z-index: 7; }
body.is-play main { padding: 0.7rem 1rem 1.4rem; min-width: 0; max-width: 100%; }
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.5rem 1.4rem; }
.bar {
  position: relative; height: 1.35rem; background: #0b0d14; border: 1px solid #222;
  overflow: hidden;
}
.bar i { display: block; height: 100%; }
.bar.vit i { background: linear-gradient(90deg, #7a1020, var(--vit)); }
.bar.will i { background: linear-gradient(90deg, #2a3d8f, var(--will)); }
.bar.nerve i { background: linear-gradient(90deg, #8a4a12, var(--nerve)); }
.bar.comp i { background: linear-gradient(90deg, #4a356e, var(--comp)); }
.bar.nrg i { background: linear-gradient(90deg, #1a4a8a, #3d8adf); }
.bar span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; letter-spacing: 0.04em; text-shadow: 0 1px 2px #000;
}

main { padding: 1.2rem 1.4rem 3rem; position: relative; z-index: 1; }

.hero { max-width: 760px; padding: 4rem 0 2rem; }
.kicker { letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); font-size: 0.78rem; }
.hero h1 { font-size: clamp(3rem, 8vw, 5.5rem); margin: 0.2rem 0; letter-spacing: 0.18em; font-weight: 600; }
.lede { color: var(--fog); font-size: 1.15rem; max-width: 40rem; line-height: 1.55; }
.cta { display: flex; gap: 0.8rem; margin: 1.6rem 0; flex-wrap: wrap; }
.pillars { list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.pillars li { border-left: 2px solid var(--gold); padding-left: 0.9rem; color: var(--fog); }
.pillars strong { color: var(--text); display: block; }

body.front-page {
  background: #05060a;
}
body.front-page .fog { opacity: 0.35; }
body.front-page .grain { opacity: 0.04; }
body.front-page .topbar {
  position: absolute; left: 0; right: 0; top: 0;
  background: linear-gradient(180deg, rgba(5,6,10,0.72), rgba(5,6,10,0));
  border-bottom: 0;
  z-index: 8;
}
body.front-page main { padding: 0; max-width: none; }
.front {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.front-art {
  position: absolute; inset: 0;
  background: #05060a url("../assets/front/shadow_city_panoramic_banner.jpg") center 42% / cover no-repeat;
}
.front-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,6,10,0.28) 0%, rgba(5,6,10,0.12) 32%, rgba(5,6,10,0.55) 62%, rgba(5,6,10,0.94) 100%),
    linear-gradient(90deg, rgba(5,6,10,0.45) 0%, transparent 28%, transparent 72%, rgba(5,6,10,0.35) 100%);
}
.front-copy {
  position: relative;
  z-index: 2;
  padding: 7rem clamp(1.2rem, 6vw, 4.5rem) 3.2rem;
  max-width: 46rem;
}
.front-copy h1 {
  font-size: clamp(3rem, 9vw, 5.6rem);
  margin: 0.15rem 0 0.4rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-shadow: 0 2px 28px rgba(0,0,0,0.7);
}
.front-copy .lede {
  color: #d5d0c4;
  text-shadow: 0 1px 12px rgba(0,0,0,0.65);
}
.front-copy .pillars li { color: #c4bfb4; }
.front .site-foot {
  position: relative; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(5,6,10,0.88));
  padding-bottom: 1.1rem;
}
.front-rate {
  position: absolute;
  z-index: 6;
  right: clamp(0.8rem, 3vw, 1.8rem);
  bottom: 4.4rem;
  width: min(22rem, calc(100% - 1.6rem));
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.5));
}
.front-rate .bmmorc-card { max-width: 100%; }
@media (max-width: 820px) {
  .front-art { background-position: center 38%; }
  .front-copy { padding-top: 5.5rem; padding-bottom: 1.2rem; max-width: none; }
  .front-copy h1 { letter-spacing: 0.1em; }
  .front-rate {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 2.4rem);
    max-width: 22rem;
    margin: 0 1.2rem 0.9rem auto;
    z-index: 3;
  }
}

.site-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.55rem 1.2rem;
  padding: 0.85rem 1.4rem 1.15rem;
  border-top: 1px solid rgba(201, 162, 39, 0.18);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; }
.site-foot a { color: #c9c2b0; font-size: 0.82rem; letter-spacing: 0.04em; }
.site-foot a:hover { color: var(--gold2); }
.site-foot p { margin: 0; color: var(--dim); font-size: 0.75rem; }

body.legal-page main { max-width: 48rem; margin: 0 auto; padding: 2rem 1.2rem 3rem; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 0.35rem; }
.legal-updated { color: var(--dim); font-size: 0.85rem; margin: 0 0 1.2rem; }
.legal h2 { font-size: 1.15rem; margin: 1.4rem 0 0.45rem; letter-spacing: 0.04em; }
.legal p, .legal li { color: var(--fog); line-height: 1.55; }
.legal ul { padding-left: 1.2rem; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.8rem 0 1rem; }
.legal-table th, .legal-table td { border: 1px solid #2a2a33; padding: 0.45rem 0.5rem; text-align: left; vertical-align: top; }
.legal-table th { color: var(--gold2); background: #12141c; }
.legal-table code { font-size: 0.82rem; color: var(--gold2); }

.agree-lab { display: flex; gap: 0.55rem; align-items: flex-start; margin: 0.8rem 0; font-size: 0.88rem; color: var(--fog); }
.agree-lab input { margin-top: 0.25rem; }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(10, 10, 14, 0.96);
  border-top: 1px solid var(--line);
  padding: 0.85rem 1rem 1rem;
}
.cookie-inner {
  max-width: 56rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; justify-content: space-between;
}
.cookie-inner p { margin: 0; color: #d5d0c4; font-size: 0.88rem; line-height: 1.45; max-width: 38rem; }
.cookie-go { display: flex; flex-wrap: wrap; gap: 0.4rem; }

[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: #161822; color: var(--text);
  padding: 0.55rem 1rem; cursor: pointer; font: inherit; letter-spacing: 0.06em;
  transition: 0.15s ease;
}
.btn:hover { border-color: var(--gold); color: var(--gold2); }
.btn.gold { background: linear-gradient(180deg, #d4b03a, #9a7414); color: #1a1406; border-color: #e8d48b; font-weight: 600; }
.btn.gold:hover { filter: brightness(1.08); color: #1a1406; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #7a2030; color: #f0b8c0; }
.btn.sm { padding: 0.28rem 0.55rem; font-size: 0.78rem; text-transform: uppercase; }
.btn.metro { border-color: #3d9ca8; color: #9fe3ea; }
.btn.taxi { border-color: #c9a227; }
.btn.locked, .spell.locked, .btn:disabled { opacity: 0.35; cursor: not-allowed; }

.card, .pane {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.2rem 1.3rem;
  backdrop-filter: blur(12px);
}
.auth-card { max-width: 28rem; margin: 3rem auto; }
label, .name-lab { display: grid; gap: 0.3rem; margin: 0.7rem 0; font-size: 0.85rem; color: var(--dim); }
input {
  background: #0b0d14; border: 1px solid #333; color: var(--text);
  padding: 0.55rem 0.65rem; font: inherit; width: 100%;
}
.err { color: #f08a98; }
.alt { color: var(--dim); }

.class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; }
.class-card {
  position: relative;
  border: 1px solid #2a2a33; padding: 0.7rem; cursor: pointer; display: grid; gap: 0.25rem;
  background: #0e1018;
}
.class-card:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.class-card input { position: absolute; opacity: 0; }
.class-card .tag { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.class-card em { color: var(--dim); font-style: normal; font-size: 0.88rem; }
.class-art {
  width: 100%;
  aspect-ratio: 1 / 1.55;
  object-fit: contain;
  object-position: center bottom;
  background: #0b0d14;
  margin: 0 0 0.35rem;
  display: block;
}
.class-card[data-class="werewolf"] .class-art { object-position: center; }

.city {
  display: grid;
  grid-template-columns: 1.85fr 0.8fr;
  grid-template-areas: "loc people";
  gap: 0.7rem;
  align-items: start;
  min-width: 0;
  max-width: 100%;
}
.city.city-out { grid-template-columns: 2.2fr 0.95fr; }
.loc, .people, .pane { min-width: 0; max-width: 100%; }
.loc { grid-area: loc; padding: 0.55rem 0.65rem; }
.people { grid-area: people; padding: 0.55rem 0.7rem; position: relative; }
.city.city-out .people {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 8.5rem);
  min-height: 0;
}
.city.city-out .people.has-energy {
  min-height: min(62vh, calc(100vh - 8.5rem));
}
.people h2 { margin: 0 0 0.35rem; flex: 0 0 auto; }
.people-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.street-energy {
  flex: 0 0 auto;
  margin: 0.45rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid #1c1e28;
}
.le-one {
  position: relative;
  display: flex;
  height: 1.2rem;
  background: #0b0d14;
  border: 1px solid #333;
  overflow: hidden;
}
.le-one .le-light,
.le-one .le-dark { display: block; height: 100%; flex: 0 0 auto; }
.le-one .le-light { background: linear-gradient(90deg, #1a4a8a, #6eb6ea); }
.le-one .le-dark {
  margin-left: auto;
  background: linear-gradient(90deg, #6b1a8a, #c41e3a);
}
.le-one em {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-style: normal; letter-spacing: 0.04em; text-shadow: 0 1px 2px #000;
  pointer-events: none;
}
.loc-chat { margin-top: 0.55rem; }
.loc-chat h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.loc-chat .log { max-height: 9.5rem; }
.district { letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); font-size: 0.72rem; margin: 0; }
.loc h1 { margin: 0.05rem 0 0; font-size: 1.45rem; line-height: 1.15; }
.blurb { color: var(--gold2); margin: 0; }
.desc { color: var(--fog); }
.banner { padding: 0.7rem 0.8rem; margin: 0.8rem 0; border: 1px dashed var(--line); color: var(--gold2); }
.banner.coma { border-color: #7a2030; color: #f0b8c0; }
.exits { list-style: none; padding: 0; margin: 0; }
.exits li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0; border-bottom: 1px solid #1c1e28; }
.exits small, .npc small { display: block; color: var(--dim); }
.modes { display: flex; gap: 0.3rem; align-items: start; }
.npc, .pc, .join { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid #1c1e28; }
.pc { cursor: pointer; position: relative; }
.reach-off {
  opacity: 0.42;
  filter: grayscale(0.6);
}
.pc:hover { background: rgba(255,255,255,0.03); }
.pc.side-dark strong, .chat-dark, .btl-unit.side-dark .pick-name, .arena-tag.side-dark strong, .side-dark#profName, .district.side-dark { color: #c084fc; }
.pc.side-light strong, .chat-light, .btl-unit.side-light .pick-name, .arena-tag.side-light strong, .side-light#profName, .district.side-light { color: #6eb6ea; }
.pc-pop {
  position: absolute; z-index: 12;
  display: flex; gap: 0.3rem;
  background: #14161f; border: 1px solid var(--gold);
  padding: 0.35rem; box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
.pc-pop[hidden] { display: none; }
.me-pop { z-index: 30; }
.me-sheet-modal {
  position: fixed; inset: 0; z-index: 26;
  display: grid; place-items: center;
  padding: 0.7rem;
  background: rgba(0, 0, 0, 0.62);
}
.me-sheet-modal[hidden] { display: none !important; }
.me-sheet-frame {
  position: relative;
  width: min(380px, 96vw);
  max-height: min(88dvh, 88vh);
  overflow: auto;
  background: rgba(12, 10, 8, 0.97);
  border: 1px solid var(--line);
  padding: 1.05rem 1.05rem 1.1rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.me-sheet-frame .map-close { position: absolute; right: 0.45rem; top: 0.35rem; z-index: 2; }
.me-sheet-frame .sheet { margin: 0; }
.prof-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 24;
  display: grid; place-items: center; padding: 1rem;
}
.prof-modal[hidden] { display: none; }
.prof-frame {
  display: grid; grid-template-columns: 160px 1fr; gap: 0.9rem;
  background: #12141c; border: 1px solid var(--line);
  width: min(520px, 96vw); padding: 0.9rem 1rem 1.1rem; position: relative;
}
.prof-frame .map-close { position: absolute; right: 0.5rem; top: 0.4rem; }
.prof-av { background: #0b0d14; border: 1px solid var(--line); min-height: 200px; overflow: hidden; }
.prof-av img { width: 100%; height: 220px; object-fit: cover; object-position: 50% 12%; display: block; }
.inv-page { max-width: 720px; }
.inv-grid { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.inv-item {
  display: flex; gap: 0.7rem; align-items: center;
  border: 1px solid var(--line); padding: 0.5rem 0.7rem; background: #0e1018;
}
.inv-item img { width: 36px; height: 36px; object-fit: contain; }
.inv-item small { display: block; color: var(--dim); }
.npc em { display: block; color: var(--dim); font-size: 0.82rem; font-style: italic; }
.muted { color: var(--dim); }
.stats, .xp { font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.train { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.stack { display: grid; gap: 0.35rem; margin-bottom: 0.6rem; }
.log { max-height: 180px; overflow: auto; font-size: 0.9rem; }
.log p { margin: 0.25rem 0; }
.chat-form { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.chat-form input { flex: 1; }

.fight { max-width: 900px; margin: 0 auto; }
.fight-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.stop-fight { margin: 0; }
.timer { font-variant-numeric: tabular-nums; color: var(--gold); }
.fighters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.fighter { padding: 1rem; border: 1px solid var(--line); background: #0e1018; }
.fighter.me { border-color: #3d9ca8; }
.fighter.foe { border-color: #7a2030; }
.hp { height: 8px; background: #1a1a22; }
.hp i { display: block; height: 100%; background: var(--vit); }
.flog { margin: 1rem 0; padding: 0.8rem; background: #08090e; border: 1px solid #222; min-height: 140px; max-height: 240px; overflow: auto; font-family: "IBM Plex Sans", monospace; }
.flog p { margin: 0.3rem 0; }
.rnd { color: var(--gold); margin-right: 0.4rem; }
.kit { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.45rem; }
.spell {
  text-align: left; background: #12141d; border: 1px solid #333; color: var(--text);
  padding: 0.55rem 0.65rem; cursor: pointer; font: inherit;
}
.spell:hover:not(:disabled) { border-color: var(--gold); }
.spell.shade { opacity: 0.38; filter: grayscale(0.5); cursor: not-allowed; }
.btl-unit.pick { cursor: pointer; }
.fight-self.btl-unit { padding: 0; }
.btl-unit.pick:hover, .btl-unit.picked {
  outline: 1px solid var(--gold); background: #161820;
}
.btl-unit.picked .pick-name { color: var(--gold2); }
.btl-pick-hint { padding: 0.25rem 0.55rem; margin: 0; font-size: 0.75rem; color: var(--dim); }
.spell small { display: block; color: var(--dim); }

.btl-battle { max-width: 1440px; margin: 0 auto; }
.fight-stage {
  display: block;
  min-height: 0;
}
.fight-portrait {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #141820 0%, #0b0d14 100%);
  min-height: 280px;
}
.fight-portrait.empty { border-style: dashed; opacity: 0.35; }
.fight-av {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}
.fight-portrait.right .fight-av,
.arena-slot.right .fight-av { transform: scaleX(-1); }
.fight-av--shift { object-position: center 42%; }
.btl-board {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(260px, 1.55fr) minmax(150px, 1fr);
  gap: 0.45rem; align-items: stretch;
}
.btl-board--me {
  grid-template-columns: minmax(190px, 0.95fr) minmax(120px, 0.7fr) minmax(240px, 1.45fr) minmax(120px, 0.7fr);
}
.fight-doz {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(480px, 1.95fr);
  gap: 0.4rem;
  min-height: 440px;
  align-items: stretch;
}
.fight-self {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  background: #0b0d14;
  border: 1px solid var(--line);
  cursor: pointer;
}
.fight-self .scene-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%; opacity: 0.55;
}
.fight-self .fight-av {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 72% 100%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.65));
  z-index: 1;
}
.fight-self .fight-hud {
  width: min(92%, 19rem);
  background: linear-gradient(90deg, rgba(6, 8, 14, 0.78) 0%, rgba(6, 8, 14, 0.35) 70%, rgba(6, 8, 14, 0) 100%);
}
.fight-self .hud-inner { bottom: 0.7rem; max-height: calc(100% - 0.8rem); }
.hud-stats em.up { color: #8fd18f; font-style: normal; font-weight: 700; margin-left: 0.2rem; }
.fight-desk {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(240px, 1.5fr) minmax(130px, 0.8fr);
  min-height: 440px;
  gap: 0.35rem;
}
.fight-desk .btl-col { min-height: 0; max-height: 520px; overflow: auto; }
.nick-frame {
  display: flex; align-items: center; gap: 0.45rem;
  width: 100%; margin: 0; padding: 0.38rem 0.55rem;
  background: transparent; border: 0; border-bottom: 1px solid #262a34;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.nick-frame .pick-name {
  display: inline; font-size: 0.95rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nick-frame .nick-hp { margin-left: auto; color: #e07080; font-variant-numeric: tabular-nums; font-size: 0.88rem; flex-shrink: 0; }
.nick-frame:hover, .nick-frame.picked { outline: 1px solid var(--gold); background: #161820; }
.nick-frame.picked .pick-name { color: var(--gold2); }
.nick-frame.is-down { opacity: 0.55; }
.nick-frame.is-down .pick-name { text-decoration: line-through; }
.btl-allies .nick-frame > :not(.pick-name):not(.nick-hp),
.btl-foes .nick-frame > :not(.pick-name):not(.nick-hp),
.btl-allies .btl-unit,
.btl-foes .btl-unit,
.btl-allies .btl-live, .btl-foes .btl-live,
.btl-allies .btl-bars, .btl-foes .btl-bars,
.btl-allies .btl-track, .btl-foes .btl-track,
.btl-allies .btl-states, .btl-foes .btl-states,
.btl-allies .btl-shields, .btl-foes .btl-shields,
.btl-allies .unit-av, .btl-foes .unit-av,
.btl-allies small, .btl-foes small { display: none !important; }
.nick-hp { margin-left: auto; color: #e07080; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
.vis-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.btl-leave { padding: 0.8rem; text-align: center; }
.btl-col { border: 1px solid var(--line); background: #12141c; min-height: 280px; }
.btl-col.btl-act {
  background: #1a2434;
  border-color: #4d6d8c;
}
.btl-col > header {
  padding: 0.35rem 0.55rem; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim); border-bottom: 1px solid #222;
}
.arena-nicks {
  display: flex; flex-direction: column; justify-content: center; gap: 0.25rem;
  padding: 0.6rem 0.8rem; text-align: right;
}
.arena-nick { margin: 0; font-weight: 600; }
.arena-slot.right.arena-foes {
  display: flex; flex-direction: row; justify-content: flex-end;
  width: 28%; padding: 0;
}
.arena-foes-2 { width: 42%; }
.arena-foes-3 { width: 52%; }
.arena-foe {
  position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden;
}
.arena-foe .arena-tag { left: 6%; right: 6%; }
.me-av {
  position: relative; height: 200px; margin: 0 -0.55rem 0.35rem;
  overflow: hidden; background: linear-gradient(180deg, #141820 0%, #0b0d14 100%);
}
.me-av .fight-av { object-position: center 20%; }
.btl-unit.nick {
  padding: 0.38rem 0.55rem;
  display: flex; align-items: center; gap: 0.45rem;
  border-bottom: 1px solid #262a34;
}
.btl-allies .btl-unit > :not(.pick-name):not(.nick-hp),
.btl-foes .btl-unit > :not(.pick-name):not(.nick-hp) {
  display: none !important;
}
.btl-allies .btl-unit.nick .pick-name,
.btl-foes .btl-unit.nick .pick-name {
  display: inline; font-size: 0.95rem;
}
.fight-self.pick { padding: 0; }
.btl-unit.is-down { opacity: 0.55; }
.btl-unit.is-down .pick-name { text-decoration: line-through; }
.btl-unit { padding: 0.4rem 0.55rem; }
.btl-unit strong { display: block; }
.btl-unit small { color: var(--dim); }
.btl-live {
  margin-top: 0.28rem; font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--gold2); display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem;
}
.btl-bars { display: flex; gap: 0.6rem; font-size: 0.8rem; margin: 0.25rem 0; }
.btl-bars .hp { color: #e07080; background: none; height: auto; }
.btl-bars .nrg { color: #6aa4c8; }
.btl-unit .hp { height: 7px; background: #1a1a22; margin-top: 0.25rem; }
.btl-track {
  height: 8px; background: #1a1a22; margin-top: 0.22rem;
  border: 1px solid #2c3040;
}
.btl-track i { display: block; height: 100%; }
.btl-track.vit i { background: linear-gradient(90deg, #7a1020, var(--vit)); }
.btl-track.nrg i { background: linear-gradient(90deg, #1a4a8a, #3d8adf); }
.btl-tabs { display: flex; gap: 0.2rem; padding: 0.35rem; border-bottom: 1px solid #3a5068; }
.btl-tab {
  background: #243044; border: 1px solid #5a7a9a; color: #d5e2f0;
  padding: 0.2rem 0.45rem; cursor: pointer; font: inherit; font-size: 0.78rem;
}
.btl-tab.on { border-color: var(--gold); color: var(--gold2); background: #2c3c54; }
.btl-spells { list-style: none; padding: 0.2rem; margin: 0; max-height: 280px; overflow-x: hidden; overflow-y: auto; }
.btl-spells .spell {
  width: 100%; display: flex; gap: 0.45rem; align-items: center; padding: 0.28rem 0.4rem;
  background: #243044; border-color: #5a7a9a; overflow: hidden; min-height: 2.6rem;
}
.btl-spells .spell .spell-copy { flex: 1 1 auto; min-width: 0; }
.btl-spells .spell .spell-copy strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btl-spells .spell .type-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.btl-tab img { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-right: 0.2rem; }
.btl-queue .spell-ico, .btl-queue .kind-ico,
.btl-log .spell-ico, .btl-log .kind-ico {
  width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 0.25rem;
}
.btl-queue td { white-space: nowrap; }
.btl-wait { padding: 1.2rem 0.8rem; color: var(--dim); text-align: center; }
.btl-queue { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.btl-queue th, .btl-queue td { padding: 0.22rem 0.4rem; border-bottom: 1px solid #222; text-align: left; }
.btl-od { padding: 0.35rem 0.55rem; margin: 0; color: var(--gold2); font-size: 0.82rem; }
.btl-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; padding: 0.4rem 0.5rem 0.6rem; }
.btl-logbar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin: 0.55rem 0 0.3rem; font-size: 0.82rem;
}
.btl-logbar strong { color: var(--gold2); }
.btl-log { max-height: 320px; }
.btl-log .phase { color: var(--gold); font-weight: 600; margin-top: 0.45rem; }
.btl-states { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.btl-states span {
  font-size: 0.68rem; letter-spacing: 0.02em;
  border: 1px solid var(--gold); color: var(--gold2); padding: 0.12rem 0.35rem;
  max-width: 100%; line-height: 1.25;
}
.btl-states span b { display: block; text-transform: lowercase; letter-spacing: 0.04em; }
.btl-shields { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.4rem; }
.btl-shields .bsh {
  position: relative; width: 1.7rem; height: 1.8rem;
}
.btl-shields .bsh img, .btl-shields .bsh svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.btl-shields .bsh b {
  position: static;
  min-width: 1.35rem; height: 0.95rem; padding: 0 0.18rem;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d14; border: 1px solid #444; color: var(--gold2);
  font-size: 0.68rem; font-weight: 700; line-height: 1;
}
.btl-shields .bsh.off { opacity: 0.32; }
.btl-shields .bsh {
  width: auto; min-width: 1.7rem; height: auto; padding: 0.12rem 0.28rem 0.12rem 0.12rem;
  display: inline-flex; align-items: center; gap: 0.22rem;
  border: 1px solid var(--gold); background: #0b0d14;
}
.btl-shields .bsh img, .btl-shields .bsh svg { width: 1.35rem; height: 1.35rem; }
.btl-shields .bsh em {
  font-style: normal; font-size: 0.62rem; letter-spacing: 0.04em;
  color: var(--gold2); max-width: 7rem; line-height: 1.1;
}
.btl-log .log-sh { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-left: 0.15rem; }
.btl-log svg.log-sh { display: inline-block; }
.unit-av { width: 48px; height: 48px; object-fit: cover; object-position: 50% 12%; float: right; border: 1px solid #333; }
.fight-layers { padding: 0.35rem 0.5rem; margin: 0; border-bottom: 1px solid #3a5068; }
.fight-arena { position: relative; min-height: 360px; margin-bottom: 0.8rem; }
.arena-slot {
  position: absolute; bottom: 0; top: 0; width: 24%; overflow: hidden; z-index: 1;
}
.arena-slot.left { left: 0; }
.arena-slot.right { right: 0; left: auto; }
.fight-arena .fight-av { inset: 0; }
.arena-tag {
  position: absolute; left: 8%; right: 8%; bottom: 6%;
  background: rgba(8,8,12,0.78); border: 1px solid var(--line);
  padding: 0.25rem 0.5rem; z-index: 2;
}
.arena-tag strong { display: block; }
.arena-tag small { color: var(--gold2); }
.arena-count {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 3; text-align: center; background: rgba(8,8,12,0.82);
  border: 1px solid var(--gold); padding: 0.6rem 1.2rem; min-width: 6.5rem;
}
.arena-count span { display: block; font-size: clamp(2.4rem, 7vw, 4rem); color: var(--gold); line-height: 1; font-weight: 600; }
.arena-count small { letter-spacing: 0.14em; text-transform: uppercase; color: var(--fog); }
.loot-wrap { max-width: 820px; margin: 0 auto 1rem; }
.loot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.loot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.loot-bag { border: 1px solid var(--line); background: #12141c; padding: 0.7rem; min-height: 160px; }
.loot-bag h2 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.loot-bag .empty { color: var(--dim); }
.loot-bag ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.loot-item {
  width: 100%; display: flex; gap: 0.5rem; align-items: center; text-align: left;
  background: #0e1018; border: 1px solid #333; color: var(--text); padding: 0.4rem 0.5rem; font: inherit; cursor: pointer;
}
.loot-item img { width: 22px; height: 22px; object-fit: contain; }
.loot-item small { margin-left: auto; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }
.loot-item:not(.dead):hover { border-color: var(--gold); }
.loot-item.dead { cursor: default; opacity: 0.85; }
@media (max-width: 820px) {
  .loot-cols { grid-template-columns: 1fr; }
  .arena-slot { width: 42%; }
  .btl-board { grid-template-columns: 1fr; }
  .fight-doz, .fight-desk { grid-template-columns: 1fr; }
  .fight-self { min-height: 280px; }
}

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; border: 0; padding: 0; margin: 1rem 0; }
.side-card { border: 1px solid #333; padding: 0.9rem; cursor: pointer; background: #0e1018; }
.side-card span { display: block; letter-spacing: 0.2em; font-weight: 700; }
.side-card.dark { border-color: #7a2030; }
.side-card.light { border-color: #c9a227; }
.side-card:has(input:checked) { box-shadow: 0 0 0 1px var(--gold); }
.side-card input { margin-right: 0.4rem; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.5rem; margin: 0.6rem 0 1.2rem; }
.av { display: grid; gap: 0.25rem; cursor: pointer; border: 1px solid #333; padding: 0.3rem; background: #0b0d14; }
.av img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.av span { font-size: 0.72rem; color: var(--dim); }
.av.on, .av:has(input:checked) { border-color: var(--gold); }
.av input { display: none; }
.av img { background: transparent; object-fit: contain; background-color: #1a1520; }

.wizard { display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem; max-width: 1120px; margin: 0 auto; min-height: 70vh; }
.wiz-rail { border-right: 1px solid var(--line); padding: 0.4rem 1rem 0 0; }
.wiz-rail ol { list-style: none; padding: 0; margin: 1rem 0 0; }
.wiz-rail li { padding: 0.45rem 0; color: var(--dim); border-left: 2px solid transparent; padding-left: 0.7rem; }
.wiz-rail li.on { color: var(--gold2); border-left-color: var(--gold); }
.wiz-step { display: none; }
.wiz-step.on { display: block; }
.wiz-nav { display: flex; gap: 0.6rem; margin-top: 1.4rem; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.choice { display: grid; gap: 0.25rem; border: 1px solid #333; padding: 1rem; cursor: pointer; background: #0e1018; }
.choice.big { min-height: 7rem; }
.choice.dark { border-color: #7a2030; }
.choice.light { border-color: #c9a227; }
.choice span { font-size: 1.3rem; font-family: "Cormorant Garamond", Georgia, serif; letter-spacing: 0.08em; }
.choice small { color: var(--dim); }
.choice:has(input:checked) { box-shadow: 0 0 0 1px var(--gold); }
.choice input { margin-bottom: 0.4rem; }
.choice.side-choice { min-height: 0; align-content: start; gap: 0.5rem; padding: 1.05rem 1.1rem 1.15rem; }
.choice.side-choice .side-poem {
  margin: 0.1rem 0 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.42;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.choice.side-choice .side-if {
  display: block;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--fog, var(--dim));
}
.choice.side-choice .side-who {
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--dim);
  opacity: 0.85;
}
.avatar-stage { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 1rem; align-items: start; }
.avatar-preview { position: sticky; top: 5rem; background: #0b0d14; border: 1px solid var(--gold); min-height: 420px; display: grid; place-items: end center; }
.avatar-preview img { max-height: 400px; width: auto; max-width: 100%; object-fit: contain; }
.avatar-preview p { color: var(--gold2); font-size: 0.8rem; padding: 0.4rem; }
.avatar-grid.large { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
.avatar-grid.large .av { padding: 0.4rem; }
.avatar-grid.large .av img { aspect-ratio: 3 / 4; height: 240px; width: 100%; object-fit: contain; }
.confirm { display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem; align-items: start; }
.confirm img { max-height: 320px; width: auto; }
.confirm dl { display: grid; grid-template-columns: 7rem 1fr; gap: 0.35rem 0.8rem; }
.confirm dt { color: var(--dim); }
@media (max-width: 820px) {
  .scene-av-slot { left: 1%; width: 58%; }
  .hud-overlay { width: min(68%, 17rem); }
  .hud-stats { gap: 0.08rem 0.5rem; }
  .hud-stats dt, .hud-stats dd { font-size: 0.78rem; }
  .hud-dev { font-size: 0.82rem; }
  .wizard, .avatar-stage, .confirm, .choice-row { grid-template-columns: 1fr; }
  .avatar-preview { position: static; min-height: 280px; }
  .avatar-preview img { max-height: 260px; }
}

.scene { position: relative; width: 100%; max-width: 100%; overflow: hidden; border: 1px solid var(--line); margin: 0; min-height: 280px; }
.scene.apartment { aspect-ratio: 16 / 8; max-height: 62vh; }
.scene.street { aspect-ratio: 16 / 8; max-height: 62vh; }
.scene.ward { aspect-ratio: 16 / 8; max-height: 62vh; }
.scene.travel { aspect-ratio: 16 / 8; max-height: 62vh; }
.scene-cap {
  position: absolute; left: 0.55rem; top: 0.45rem; z-index: 3;
  background: rgba(8, 8, 12, 0.62); border: 1px solid rgba(201, 162, 39, 0.22);
  padding: 0.28rem 0.55rem 0.4rem; max-width: 46%;
}
.scene-cap h1 { font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
.scene-layers {
  position: absolute; right: 0.5rem; top: 0.45rem; z-index: 4;
  display: flex; gap: 0.18rem; background: rgba(8, 8, 12, 0.7);
  padding: 0.2rem; border: 1px solid rgba(201, 162, 39, 0.25);
}
.scene-layers .layer { min-width: 1.85rem; padding: 0.2rem 0.35rem; font-size: 0.72rem; }
.scene-signs {
  position: absolute; right: 0.55rem; bottom: 0.55rem; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.28rem;
  max-width: min(70%, 14rem);
  box-sizing: border-box;
}
.scene-signs .sign,
.scene-signs .metro-enter { max-width: 100%; }
.sign { margin: 0; }
.sign button {
  display: block; width: 100%; max-width: 100%;
  background: linear-gradient(180deg, #2c3858, #1a2238);
  border: 1px solid #8aa0c8; color: #e8eef8;
  padding: 0.28rem 0.55rem; font: inherit; font-size: 0.78rem;
  letter-spacing: 0.03em; cursor: pointer; text-align: left;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
.sign button:hover { filter: brightness(1.12); }
.sign.gold button {
  background: linear-gradient(180deg, #d4b03a, #9a7414);
  border-color: #e8d48b; color: #1a1406; font-weight: 600;
}
.loc-one { margin: 0.4rem 0 0; color: var(--fog); font-size: 0.88rem; }
.ward-go { margin: 0.65rem 0 0; }
.ward-go .btn { width: 100%; max-width: 28rem; }
.ward-count {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  background: rgba(8, 8, 12, 0.78); border: 1px solid var(--line);
  padding: 0.55rem 1.3rem 0.7rem; text-align: center; min-width: 9rem;
}
.ward-sec {
  display: block; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1;
  color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 600;
}
.ward-count small { color: var(--fog); letter-spacing: 0.06em; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Foreground plate: left of frame, never past the edges. Image is scaled large so legs crop. */
.scene-av-slot {
  position: absolute;
  left: 3%;
  bottom: 0;
  top: 0;
  width: 44%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.scene.apartment .scene-av-slot { width: 36%; left: 6%; }
.scene-av,
.scene.apartment .scene-av {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.65));
}
.scene.street .scene-av {
  top: -6%;
  bottom: -28%;
  height: auto;
  object-fit: cover;
  object-position: 50% 10%;
}
.scene.street .scene-av--shift {
  top: -8%;
  bottom: -18%;
  object-position: 50% 40%;
}
.scene.apartment .scene-av--shift { object-position: 50% 38%; }
.scene.street-av {
  min-height: 220px;
  background: linear-gradient(180deg, #1c1826 0%, #0c0e16 62%, #07080d 100%);
}
.hud-overlay {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(48%, 21rem);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 8, 14, 0.62) 0%, rgba(6, 8, 14, 0.28) 62%, rgba(6, 8, 14, 0) 100%);
}
.hud-inner {
  pointer-events: auto;
  position: absolute;
  left: 0.5rem;
  right: 1.1rem;
  bottom: 0.5rem;
  max-height: calc(100% - 3.2rem);
  overflow: hidden;
}
.hud-dev {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.65rem;
  margin: 0 0 0.35rem; font-size: 0.95rem; color: var(--fog);
}
.hud-dev strong { color: #f2ead2; }
.hud-dev .hud-ups { color: var(--gold2); font-variant-numeric: tabular-nums; }
.hud-dev em { font-style: normal; color: var(--dim); font-size: 0.88rem; }
.hud-bars .bar { height: 1.2rem; margin: 0.22rem 0; background: rgba(11,13,20,0.72); }
.hud-bars .bar span { justify-content: flex-start; padding-left: 0.4rem; font-size: 0.82rem; }
.hud-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.14rem 0.85rem;
  margin: 0.4rem 0 0.25rem;
}
.hud-stats div { display: flex; justify-content: space-between; gap: 0.4rem; }
.hud-stats dt { color: var(--dim); font-size: 0.82rem; }
.hud-stats dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.hud-stats .exh dd { color: #ff6b7a; }
.hud-stats .exh em { font-style: normal; font-weight: 700; margin-left: 0.2rem; }
.hud-states { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.2rem; }
.hud-states .st {
  font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #ffb0b8; border: 1px solid #c41e3a; background: rgba(196, 30, 58, 0.2);
  padding: 0.08rem 0.3rem;
}
.hud-shields { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.hud-shields span { position: relative; width: 1.55rem; height: 1.65rem; }
.hud-shields img, .hud-shields svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.sh-ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.hud-shields b {
  position: absolute; right: -0.15rem; bottom: -0.1rem;
  font-size: 0.62rem; color: var(--gold2); text-shadow: 0 1px 2px #000;
}

.layers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.6rem 0; }
.layers span { color: var(--dim); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.layer-form { display: inline; }
.layer { min-width: 2.2rem; padding: 0.28rem 0.45rem; background: #12141d; border: 1px solid #333; color: var(--fog); cursor: pointer; font: inherit; }
.layer.on { border-color: var(--gold); color: var(--gold2); }
.layer.locked { opacity: 0.3; cursor: not-allowed; }

.map-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 20; display: grid; place-items: center; padding: 0.4rem; }
.map-modal[hidden] { display: none; }
.map-frame {
  background: #0b0d14; border: 1px solid var(--line); padding: 0.45rem 0.7rem 0.55rem;
  max-width: 98vw; max-height: 96vh; overflow: auto;
  display: flex; flex-direction: column; align-items: center;
}
.map-wrap {
  position: relative;
  width: min(1400px, 96vw, calc(96vh - 3.6rem));
}
.map-wrap img { width: 100%; height: auto; display: block; }
.city-map-svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  z-index: 1;
}
.city-map-art { pointer-events: none; }
.city-map-fallback { width: 100%; height: auto; display: block; }
.map-district {
  fill: rgba(8, 12, 18, 0.0);
  stroke: rgba(232, 212, 139, 0.22);
  stroke-width: 0.28;
  stroke-linejoin: round;
  cursor: pointer;
}
.map-district:hover, .map-district.on {
  fill: rgba(212, 176, 58, 0.2);
  stroke: rgba(232, 212, 139, 0.92);
  stroke-width: 0.42;
}
.map-district.here {
  fill: rgba(90, 212, 224, 0.3);
  stroke: #7ae7f0;
  stroke-width: 0.62;
  filter: drop-shadow(0 0 1.4px rgba(90, 212, 224, 0.9));
}
.map-place-label { pointer-events: none; }
.map-place-chip {
  fill: rgba(10, 9, 8, 0.78);
  stroke: rgba(201, 162, 39, 0.5);
  stroke-width: 0.12;
}
.map-place-text {
  fill: #f0e2b0;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: 2.05px;
  font-weight: 600;
}
.map-place-label.here .map-place-chip { fill: rgba(212, 176, 58, 0.94); }
.map-place-label.here .map-place-text { fill: #1a1406; }
.metro-schematic-wrap {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(58, 68, 84, 0.45) 0%, rgba(18, 22, 30, 0.15) 52%, rgba(8, 10, 14, 0.62) 100%),
    #1a1f28;
  overflow: hidden;
}
.metro-schematic {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  position: relative;
  z-index: 1;
}
.metro-schematic .metro-bg { fill: #1a1f28; }
.metro-schematic .metro-frame {
  fill: none; stroke: rgba(18, 22, 28, 0.85); stroke-width: 0.45;
}
.metro-schematic .metro-cross {
  stroke: rgba(8, 10, 14, 0.55); stroke-width: 0.18;
}
.metro-schematic .metro-line { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.metro-schematic .metro-line.glow { stroke-width: 2.15; opacity: 0.28; }
.metro-schematic .metro-line.rails { stroke-width: 1.12; opacity: 0.95; }
.metro-schematic .metro-line.gap { stroke: #141820; stroke-width: 0.42; opacity: 0.9; }
.metro-schematic .metro-line.cyan { stroke: #5ce8f5; }
.metro-schematic .metro-line.purple { stroke: #c56bff; }
.metro-schematic .metro-line.green { stroke: #6dff6a; }
.metro-schematic .hub-ring { fill: none; pointer-events: none; }
.metro-schematic .map-stop { cursor: pointer; pointer-events: auto; }
.metro-schematic .stop-hit { fill: none; pointer-events: all; }
.metro-schematic .stop-glow { opacity: 0.28; pointer-events: none; }
.metro-schematic .stop-fill { fill: #0b0f16; pointer-events: none; }
.metro-schematic .stop-ring { fill: none; stroke-width: 0.42; pointer-events: none; }
.metro-schematic .stop-m {
  fill: #f4fbff; font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-weight: 700; font-size: 2.32px; pointer-events: none;
}
.metro-schematic .map-stop.hub .stop-m { font-size: 2.48px; }
.metro-schematic .map-stop.cyan .stop-ring, .metro-schematic .map-stop.cyan .stop-glow { stroke: #5ce8f5; fill: #5ce8f5; }
.metro-schematic .map-stop.purple .stop-ring, .metro-schematic .map-stop.purple .stop-glow { stroke: #c56bff; fill: #c56bff; }
.metro-schematic .map-stop.green .stop-ring, .metro-schematic .map-stop.green .stop-glow { stroke: #6dff6a; fill: #6dff6a; }
.metro-schematic .map-stop.hub .stop-ring { stroke: #d8f6ff; }
.metro-schematic .map-stop.hub .stop-glow { fill: #9ae7ff; }
.metro-schematic .map-stop.cyan .stop-ring, .metro-schematic .map-stop.purple .stop-ring,
.metro-schematic .map-stop.green .stop-ring, .metro-schematic .map-stop.hub .stop-ring { fill: none; }
.metro-schematic .map-stop.on .stop-glow { opacity: 0.5; }
.metro-schematic .map-stop.on .stop-ring { stroke-width: 0.55; }
.metro-schematic .map-stop.here .stop-ring { stroke: #ff4d4d; stroke-width: 0.55; }
.metro-schematic .map-stop.here .stop-glow { fill: #ff4d4d; opacity: 0.42; }
.metro-schematic .map-stop.here .stop-fill { fill: #2a1014; }
.metro-enter { margin: 0.2rem 0 0; }
.metro-enter button, .metro-back button {
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.metro-enter img { display: block; height: 4.6rem; width: auto; max-width: 100%; }
.metro-back {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: 0.45rem; margin: 0;
}
.metro-back img {
  display: block; height: 5.4rem; width: auto; max-width: min(640px, 92vw);
}
.pin-m {
  display: inline-block; font-style: normal; font-weight: 700;
}
.map-pop {
  position: absolute; left: 0; top: 0; z-index: 9;
  background: rgba(8,10,16,0.96); border: 1px solid var(--gold);
  padding: 0.5rem 0.65rem; width: 280px; max-width: 72%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.map-pop[hidden] { display: none; }
.map-pop p { margin: 0 0 0.25rem; color: var(--gold2); font-weight: 600; font-size: 0.92rem; }
.map-pop-blurb { color: var(--fog) !important; font-weight: 400 !important; font-size: 0.8rem !important; line-height: 1.4; }
.map-pop.info .map-pop-btns { display: none; }
.map-pop.info .map-pop-blurb { display: none; }
.map-pop.info { width: auto; min-width: 8rem; padding: 0.38rem 0.55rem; }
.map-pop-btns button[hidden] { display: none; }
.map-pop-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.map-go { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; }
.map-close { align-self: flex-end; background: transparent; color: var(--fog); border: 0; cursor: pointer; font: inherit; }
.map-hint { color: var(--dim); font-size: 0.8rem; margin: 0 0 0.4rem; width: min(1400px, 96vw, calc(96vh - 3.6rem)); }
.city-flash {
  background: #2a1518; border: 1px solid #7a2030; color: #f0b8c0;
  padding: 0.45rem 0.7rem; margin: 0 0 0.6rem;
}

.home-actions { display: flex; gap: 0.5rem; margin-top: 0.8rem; flex-wrap: wrap; }
.school-list, .spell-list, .skill-bars { list-style: none; padding: 0; }
.school-list li, .spell-list li, .skill-bars li {
  display: flex; justify-content: space-between; gap: 0.8rem; align-items: center;
  padding: 0.55rem 0; border-bottom: 1px solid #1c1e28;
}
.spell-list small, .school-list small { display: block; color: var(--dim); }
.spell-list .dim { opacity: 0.45; }
.skill-bars .bar { position: relative; height: 1.1rem; background: #0b0d14; border: 1px solid #333; min-width: 180px; margin-top: 0.25rem; }
.skill-bars .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5b3d12, var(--gold)); }
.skill-bars .bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; }
.book, .skills-page { max-width: 860px; }

body.book-open {
  background: #080705;
}
body.book-open main {
  padding: 0.15rem 0.35rem 0.8rem;
  max-width: 1680px;
  margin: 0 auto;
}
body.book-open .fog { opacity: 0.22; }
body.book-open .grain { opacity: 0.03; }

.grimoire-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  max-width: 1680px;
  margin: 0 auto 0.2rem;
  padding: 0 0.4rem;
}
.grimoire {
  position: relative;
  width: min(100%, calc((100vh - 8.4rem) * 16 / 9));
  margin: 0 auto;
  container-type: inline-size;
  container-name: grimoire;
}
.grimoire-art {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55));
}
.grimoire-spread {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.leaf {
  pointer-events: auto;
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  color: #16100a;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: clamp(0.95rem, 2.05cqi, 1.22rem);
  line-height: 1.28;
  font-weight: 500;
  padding: 0.35em 0.7em 0.55em 0.6em;
  background: linear-gradient(180deg, rgba(255, 250, 236, 0.42), rgba(247, 234, 208, 0.22));
  text-shadow: 0 0 6px rgba(255, 248, 230, 0.95), 0 1px 0 rgba(255, 255, 255, 0.55);
}
.leaf-left {
  top: 19.3%;
  bottom: 20.8%;
  left: 24.5%;
  right: 54.6%;
  padding-right: 0.85em;
}
.leaf-right {
  top: 19.3%;
  bottom: 20.8%;
  left: 51.7%;
  right: 24.8%;
  padding-left: 0.85em;
}
.leaf h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.55em;
  margin: 0 0 0.12em;
  letter-spacing: 0.06em;
  color: #120c07;
  font-weight: 700;
}
.leaf h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.08em;
  margin: 0.55em 0 0.18em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2a1a10;
  border-bottom: 1px solid rgba(40, 24, 10, 0.35);
  padding-bottom: 0.08em;
  font-weight: 700;
}
.leaf h2 em {
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  float: right;
  color: #4a3220;
}
.leaf-lede, .leaf-meta, .leaf-skills {
  margin: 0.08em 0;
  color: #3a2818;
  line-height: 1.3;
  font-size: 0.92em;
}
.leaf-meta strong { color: #120c07; }
.leaf .school-list li,
.leaf .spell-list li {
  border-bottom-color: rgba(50, 30, 12, 0.22);
  padding: 0.28em 0.05em;
  align-items: flex-start;
  gap: 0.45em;
  font-size: 1em;
}
.leaf .school-list strong,
.leaf .spell-list strong {
  color: #120c07;
  font-weight: 600;
  font-size: 1.02em;
}
.leaf .spell-list small,
.leaf .school-list small {
  color: #4a3422;
  font-size: 0.86em;
  font-weight: 500;
}
.leaf .muted {
  color: #4a3422;
  font-size: 0.78em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}
.leaf .dim { opacity: 0.7; }
.leaf .dim strong { color: #3a2a1c; }
.leaf::-webkit-scrollbar { width: 8px; }
.leaf::-webkit-scrollbar-track { background: rgba(90, 60, 30, 0.08); }
.leaf::-webkit-scrollbar-thumb { background: rgba(70, 42, 18, 0.45); border-radius: 4px; }

.ink-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.72em;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(255, 244, 214, 0.85);
  border: 1px solid #5a3c18;
  color: #1a1008;
  padding: 0.22em 0.5em;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  text-shadow: none;
}
.ink-btn:hover { background: #f0d789; }
.ink-btn.gold {
  background: linear-gradient(180deg, #e0bc4a, #a07818);
  border-color: #6a4a12;
  color: #1a1406;
}
.ink-btn.ghost {
  background: transparent;
  border-color: transparent;
  text-decoration: underline;
  color: #4a3018;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 960px) {
  .grimoire {
    width: 100%;
  }
  .grimoire-spread {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin: -16% 5% 0;
  }
  .leaf,
  .leaf-left,
  .leaf-right {
    position: relative;
    inset: auto;
    top: auto; right: auto; bottom: auto; left: auto;
    background: linear-gradient(180deg, #f6ead0 0%, #ead7b0 100%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    padding: 0.95rem 1.05rem 1.15rem;
    overflow: visible;
    min-height: 0;
    font-size: 1.05rem;
  }
}

@media (max-width: 820px) {
  .city,
  .city.city-out {
    grid-template-columns: 1fr;
    grid-template-areas: "loc" "people";
    gap: 0.4rem;
    width: 100%;
  }
  .bars { grid-template-columns: 1fr 1fr; }
  .fighters { grid-template-columns: 1fr; }
  .topbar { padding: 0.4rem 0.4rem; gap: 0.4rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.12em; }
  .who { flex: 1 1 100%; min-width: 0; }
  .who-av { width: 34px; height: 34px; }
  .who-class { font-size: 0.72rem; }
  .who-record { font-size: 0.7rem; }
  .nav-btn { min-width: 0; padding: 0.3rem 0.48rem; font-size: 0.68rem; }
  .topbar .paper-btn, .topbar .mail-btn { margin-left: 0; min-width: 0; }
  .play-nav { padding: 0.28rem 0.35rem; }
  body.is-play main { padding: 0.3rem 0.3rem 1rem; }
  .loc, .people { padding: 0.4rem 0.35rem; }
  .class-grid { grid-template-columns: 1fr 1fr; }
  .scene-layers {
    right: 0.3rem;
    max-width: calc(100% - 0.6rem);
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .scene-layers .layer { min-width: 1.45rem; padding: 0.16rem 0.28rem; font-size: 0.66rem; }
  .scene-signs {
    right: 0.3rem;
    bottom: 0.4rem;
    max-width: min(46%, 9.8rem);
  }
  .city.city-out .people,
  .city.city-out .people.has-energy {
    min-height: 0;
    max-height: 50vh;
  }
  .sign button {
    font-size: 0.66rem;
    padding: 0.18rem 0.38rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .metro-enter img { height: 2.55rem; }
  .sheet-id { flex-wrap: wrap; }
  .sheet-id span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .class-art { aspect-ratio: 1 / 1.4; }
  .wiz-rail { display: none; }
  .office-search input { min-width: 0; width: 100%; }
  .skill-bars .bar { min-width: 0; }
  .quest-speech-claim .btn.gold { min-width: 0; }
}

.loc-energy { margin: 0.55rem 0 0.45rem; }
.le-lab { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.25rem; }

.sheet {
  border: 1px solid var(--line);
  background: rgba(10, 10, 16, 0.72);
  padding: 0.55rem 0.65rem 0.7rem;
  margin: 0 0 0.65rem;
}
.sheet-id { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.sheet-id span { color: var(--dim); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sheet-xp { margin: 0.15rem 0; color: var(--fog); font-size: 0.88rem; }
.sheet-bars .bar { height: 1.2rem; margin: 0.28rem 0; }
.sheet-bars .bar span { justify-content: flex-start; padding-left: 0.45rem; }
.sheet-bars .bar b {
  position: absolute; right: 0.4rem; top: 0; bottom: 0; display: flex; align-items: center;
  font-size: 0.72rem; font-weight: 500; color: var(--dim);
}
.sheet-stats { display: grid; gap: 0.15rem; margin: 0.5rem 0 0.4rem; }
.sheet-stats div { display: flex; justify-content: space-between; gap: 0.6rem; }
.sheet-stats dt { color: var(--dim); font-size: 0.85rem; }
.sheet-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.sheet-stats dd.exh { color: #e07080; display: flex; align-items: baseline; gap: 0.4rem; }
.sheet-stats dd.exh b { font-weight: 700; }
.sheet-stats dd.exh em {
  font-style: normal; font-weight: 700; color: #ff6b7a; letter-spacing: 0.02em;
}
.sheet-states { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.45rem; }
.sheet-states .st {
  display: block; max-width: 100%;
  border: 1px solid #c41e3a; background: rgba(196, 30, 58, 0.18);
  color: #ffb0b8; padding: 0.28rem 0.45rem; font-size: 0.75rem; line-height: 1.35;
}
.sheet-states .st b { display: block; letter-spacing: 0.08em; text-transform: uppercase; color: #ff6b7a; }
.sheet-states .st em { display: block; color: var(--gold2); font-style: normal; font-size: 0.7rem; }
.sheet-icons { color: var(--gold2); font-size: 0.8rem; margin: 0.35rem 0; }
.sheet-lab {
  margin: 0.45rem 0 0.25rem; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.sheet-shields { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.sheet-shields .sh {
  position: relative;
  width: 2.55rem; height: 2.7rem;
  padding: 0; border: 0; background: transparent;
  cursor: help;
}
.sheet-shields .sh img, .sheet-shields .sh svg {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.sheet-shields .sh b {
  position: absolute; right: -0.15rem; bottom: -0.1rem;
  min-width: 1.35rem; height: 1.1rem; padding: 0 0.2rem;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d14; border: 1px solid var(--sh); border-radius: 2px;
  color: var(--gold2); font-size: 0.72rem; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.sheet-shields .sh.off { opacity: 0.38; }
.sheet-shields .sh.off b { color: var(--dim); border-color: #333; }
.tip { position: relative; cursor: help; }
.tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: min(240px, 70vw);
  padding: 0.5rem 0.6rem;
  background: #14161f;
  border: 1px solid var(--gold);
  color: #e7e3d6;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  white-space: pre-wrap;
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.tip:hover::after,
.tip:focus::after,
.tip:focus-within::after,
.tip.is-tip::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pane.people .tip[data-tip]::after { left: auto; right: 0; }
.sheet-bars .bar { cursor: help; }

.act-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 22;
  display: grid; place-items: center; padding: 1rem;
}
.act-modal[hidden] { display: none; }
.act-frame {
  background: #12141c; border: 1px solid var(--line);
  width: min(560px, 96vw); max-height: 88vh; overflow: auto; padding: 0.8rem 0.9rem 1rem;
}
.act-head { display: flex; justify-content: space-between; align-items: center; }
.act-tabs { display: flex; gap: 0.3rem; margin: 0.6rem 0; }
.act-tab {
  background: #0e1018; border: 1px solid #333; color: var(--fog);
  padding: 0.3rem 0.6rem; cursor: pointer; font: inherit;
}
.act-tab.on { border-color: var(--gold); color: var(--gold2); }
.act-list { list-style: none; padding: 0; margin: 0; }
.act-list li { border-bottom: 1px solid #1c1e28; padding: 0.4rem 0; }
.act-list li[hidden] { display: none; }
.act-pick {
  width: 100%; display: flex; justify-content: space-between; gap: 0.6rem;
  background: transparent; border: 0; color: var(--text); font: inherit; cursor: pointer; text-align: left;
}
.act-pick:hover, .act-pick.on { color: var(--gold2); }
.act-list em { display: block; color: var(--dim); font-size: 0.8rem; font-style: normal; margin-top: 0.15rem; }
.act-queue { min-height: 2.4rem; margin: 0.6rem 0 0.3rem; color: var(--gold2); }
.act-cost { color: var(--dim); font-size: 0.85rem; }
.act-go { display: flex; gap: 0.4rem; }

.quest-close {
  position: absolute; top: 0.35rem; right: 0.45rem;
  background: transparent; border: 0; color: var(--fog);
  cursor: pointer; font: 600 0.85rem/1 "IBM Plex Sans", sans-serif;
  padding: 0.2rem 0.35rem;
}
.quest-close:hover { color: var(--gold2); }
.quest-mail[hidden] { display: none !important; }
.quest-mail {
  position: fixed; inset: 0; z-index: 28;
  display: grid; place-items: center;
  padding: 0.7rem;
  background: rgba(0, 0, 0, 0.55);
}
.quest-letter {
  position: relative;
  width: min(540px, 100%);
  max-height: min(88dvh, 88vh);
  overflow: auto;
  background: rgba(12, 10, 8, 0.97);
  border: 1px solid var(--line);
  padding: 1.05rem 1.15rem 1.15rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.quest-letter .kicker { margin: 0 1.6rem 0 0; }
.quest-letter h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  margin: 0.3rem 0 0.5rem;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  letter-spacing: 0.04em;
}
.quest-letter p { margin: 0 0 0.7rem; color: var(--fog); font-size: 0.95rem; line-height: 1.5; }
.mail-banner {
  width: 100%; height: auto; max-height: 160px;
  object-fit: cover; object-position: center top;
  margin: 0 0 0.7rem; border: 1px solid var(--line);
}
.mail-btn.mail-blink {
  animation: mailblink 1s ease-in-out infinite;
}
@keyframes mailblink {
  50% { border-color: #fff; color: #fff; box-shadow: 0 0 14px rgba(232, 212, 139, 0.85); }
}
.quest-dock {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 16;
  width: min(380px, calc(100% - 1.6rem));
  background: rgba(12, 10, 8, 0.94); border: 1px solid var(--line);
  padding: 0.85rem 1.8rem 1rem 1rem; box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.quest-dock header { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.quest-dock .kicker { margin: 0; }
.quest-n { color: var(--gold2); font-size: 0.78rem; letter-spacing: 0.08em; }
.quest-dock h2 { margin: 0.35rem 0 0.4rem; font-size: 1.25rem; }
.quest-dock p { margin: 0 0 0.7rem; color: var(--fog); font-size: 0.92rem; line-height: 1.45; }
.quest-go { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
body.book-open .quest-dock { max-height: 40vh; overflow: auto; }
.quest-lit {
  outline: 2px solid var(--gold) !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.4), 0 0 22px rgba(201, 162, 39, 0.7) !important;
  animation: questpulse 1.35s ease-in-out infinite;
  position: relative;
  z-index: 19;
}
.quest-dead {
  outline: 2px dashed #c41e3a !important;
  box-shadow: 0 0 12px rgba(196, 30, 58, 0.45);
}
@keyframes questpulse {
  50% { box-shadow: 0 0 0 7px rgba(201, 162, 39, 0.12), 0 0 28px rgba(232, 212, 139, 0.95); }
}
.quest-alloc table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.6rem; font-size: 0.88rem; }
.quest-alloc td { padding: 0.28rem 0.2rem; border-bottom: 1px solid #222; }
.quest-alloc input { width: 3.4rem; }
.quest-alloc tr.dim td { color: var(--dim); }
.quest-have { color: var(--gold2) !important; }
.quest-dock-book {
  width: min(1680px, 98vw);
  max-height: calc(100vh - 0.6rem);
  overflow: auto;
  left: 50%;
  right: auto;
  bottom: 0.25rem;
  transform: translateX(-50%);
  padding: 0.45rem 0.7rem 0.55rem;
  background: rgba(8, 7, 5, 0.92);
}
.quest-book { position: relative; margin: 0.15rem 0 0.35rem; container-type: inline-size; }
.quest-book-art { width: 100%; height: auto; display: block; }
.quest-book-pages {
  position: absolute;
  top: 19.3%;
  bottom: 20.8%;
  left: 24.5%;
  right: 24.8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4.8%;
}
.quest-page {
  min-height: 0;
  overflow: auto;
  padding: 0.15rem 0.45rem 0.2rem;
}
.quest-page h3 {
  margin: 0 0 0.25rem;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(0.95rem, 1.5cqi, 1.25rem);
  color: #1a1008;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quest-spells { list-style: none; padding: 0; margin: 0; }
.quest-spell {
  display: flex; justify-content: space-between; gap: 0.35rem; align-items: flex-start;
  padding: 0.28rem 0.25rem;
  margin-bottom: 0.28rem;
  background: rgba(255, 248, 230, 0.42);
  border: 1px solid rgba(90, 55, 20, 0.22);
  color: #1a1008;
}
.quest-spell strong { display: block; font-size: clamp(0.82rem, 1.2cqi, 1.02rem); }
.quest-spell em { display: block; font-size: clamp(0.72rem, 1.05cqi, 0.88rem); font-style: normal; color: #3a2818; line-height: 1.25; }

.quest-welcome {
  position: fixed; inset: 0; z-index: 28;
  display: grid; place-items: end center;
}
.quest-welcome-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
.quest-welcome-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.quest-speech {
  position: relative; z-index: 1;
  width: min(760px, calc(100vw - 1.6rem));
  margin: 0 0.8rem 1.2rem;
  background: rgba(8, 6, 10, 0.82);
  border: 1px solid var(--line);
  padding: 1.15rem 1.35rem 1.2rem;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
}
.quest-welcome.light .quest-speech {
  background: rgba(10, 12, 16, 0.78);
  border-color: rgba(232, 212, 139, 0.35);
}
.quest-speech h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0.2rem 0 0.6rem;
  letter-spacing: 0.04em;
}
.quest-speech p { color: #e7e3d6; font-size: 1.02rem; line-height: 1.55; margin: 0 0 0.9rem; }
.quest-welcome .quest-go { justify-content: flex-start; }
.quest-speech-claim {
  background: rgba(8, 6, 10, 0.72);
  text-align: center;
}
.quest-speech-claim .quest-go { justify-content: center; }
.quest-speech-claim .btn.gold { min-width: 12rem; padding: 0.7rem 1.4rem; font-size: 1.05rem; }
.quest-dock-train {
  width: min(520px, calc(100vw - 1.4rem));
  max-height: calc(100vh - 5.5rem);
  overflow: auto;
}
.train-row {
  display: flex; justify-content: space-between; gap: 0.6rem; align-items: center;
  padding: 0.45rem 0.2rem; border-bottom: 1px solid #222;
}
.train-row.rec { background: rgba(201, 162, 39, 0.08); }
.train-row strong { display: block; font-size: 0.92rem; }
.train-row small { display: block; color: var(--dim); font-size: 0.78rem; }
.train-ctrl { display: flex; align-items: center; gap: 0.35rem; }
.train-btn {
  width: 1.8rem; height: 1.8rem; cursor: pointer; font: inherit;
  background: #161822; border: 1px solid var(--line); color: var(--gold2);
}
.train-ctrl .put { min-width: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--gold2); font-weight: 700; }
.train-hits { margin: 0.7rem 0 0.5rem; padding: 0.55rem 0.6rem; border: 1px solid var(--line); background: #0b0d14; }
.train-hits ul { list-style: none; padding: 0; margin: 0.35rem 0 0; }
.train-hits li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.28rem 0; color: var(--fog); }
.train-hits b { color: var(--gold2); font-variant-numeric: tabular-nums; }
.quest-spell.on { box-shadow: 0 0 0 2px #c9a227, 0 0 12px rgba(201,162,39,0.55); }
.quest-spell.now { box-shadow: 0 0 0 2px #3d9ca8; }
.quest-spell.off { opacity: 0.55; filter: grayscale(0.4); }
.quest-spell .tag {
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; color: #1a1406; background: #d4b03a; padding: 0.12rem 0.3rem; font-weight: 700;
}
.quest-spell.off .tag { background: #5a4630; color: #e7e3d6; }
.quest-spell.now .tag { background: #3d9ca8; color: #071418; }
.quest-kit-mock {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  margin: 0.2rem 0 0.7rem;
}
.quest-kit-mock > span { width: 100%; color: var(--gold2); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.spell.mock { min-width: 7.5rem; opacity: 1; }
.spell.mock.soon { border-color: var(--gold); }
.nav-btn { position: relative; }
.nav-pip {
  display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: #c41e3a; margin-left: 0.25rem; vertical-align: middle;
  box-shadow: 0 0 6px #c41e3a;
}
.wanted-mark {
  display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.35rem;
  font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: #7a1020; color: #f0b8c0; border: 1px solid #c41e3a;
}
.npc-wanted { border-color: #c41e3a; }
.paper-page { max-width: 720px; }
body.is-play:has(.market-page) main,
body.is-play:has(.cafe-page) main,
body.is-play:has(.gym-page) main { padding-left: 0; padding-right: 0; padding-top: 0; }
.market-page, .cafe-page, .gym-page { max-width: none; width: 100%; }
.shop-floor--one { grid-template-columns: 1fr; top: 18%; }
.shop-panel--buy { max-height: 52vh; overflow: auto; }
.restaurant-page .gym-talk {
  left: 1rem; right: 1rem; width: auto; max-width: none; top: 5.2rem; max-height: 68%;
}
.shop-factory { max-height: none; overflow: auto; pointer-events: auto; }
.factory-list .warn { color: #d4a0a0; }
.factory-list small span { margin-right: 0.45rem; }
.scene.street.shop-scene {
  aspect-ratio: 21 / 9;
  max-height: none;
  min-height: 84vh;
  overflow: visible;
  border-left: 0; border-right: 0;
  z-index: 2;
}
.shop-floor {
  position: absolute; z-index: 6;
  left: 0.7rem; right: 0.7rem; top: 46%; bottom: auto;
  display: grid; grid-template-columns: 1.32fr 1fr; gap: 0.65rem;
  align-items: start;
  pointer-events: none;
}
.shop-panel {
  pointer-events: auto;
  overflow: auto;
  max-height: 100%;
  background: rgba(8, 8, 12, 0.82);
  border: 1px solid rgba(201, 162, 39, 0.28);
  padding: 0.55rem 0.65rem 0.7rem;
  backdrop-filter: blur(4px);
}
.shop-panel--sell {
  overflow: visible;
  max-height: none;
  z-index: 7;
  position: relative;
}
.shop-panel h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.shop-panel .muted { margin: 0 0 0.45rem; font-size: 0.78rem; }
.shop-list { margin: 0; }
.shop-list .inv-item { padding: 0.35rem 0.45rem; }
.shop-list .inv-item img { width: 40px; height: 40px; }
.shop-row { flex-wrap: wrap; }
.shop-row.is-empty { opacity: 0.72; }
.shop-none { margin-left: auto; padding: 0 0.4rem; }
.shop-back {
  position: absolute; z-index: 5; right: 0.7rem; left: auto; bottom: 0.4rem; margin: 0;
}
.inv-page h2 { margin: 1.1rem 0 0.25rem; font-size: 1.15rem; }
.paper-mast h1 { letter-spacing: 0.12em; margin: 0.2rem 0 0.4rem; }
.paper-wanted, .paper-news article, .market-block {
  border: 1px solid var(--line); background: #0e1018; padding: 0.9rem 1rem; margin: 0.8rem 0;
}
.paper-wanted h2, .paper-news h3, .market-block h2 { margin: 0.2rem 0 0.5rem; }
.paper-pay { color: var(--gold2); }
.market-sell { display: flex; gap: 0.35rem; align-items: center; margin-left: auto; }
.market-sell input[type="number"] { width: 4.2rem; }
.inv-item { display: flex; }

.hp-field {
  position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.sigil-row { display: flex; gap: 0.5rem; align-items: center; margin: 0.35rem 0; }
.sigil-row img { border: 1px solid var(--line); background: #0b0d14; }

body.is-office { background: #07080c; }
.office-bar { gap: 0.8rem; }
.office-nav { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.office-nav a { color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; }
.office-nav a.on, .office-nav a:hover { color: var(--gold2); }
.office-main { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.office-page h1 { margin: 0 0 0.4rem; }
.office-stats { display: flex; gap: 1.2rem; flex-wrap: wrap; list-style: none; padding: 0; }
.office-stats li { border: 1px solid var(--line); padding: 0.8rem 1rem; min-width: 8rem; background: #0e1018; }
.office-stats strong { display: block; font-size: 1.6rem; color: var(--gold2); }
.office-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.office-table th, .office-table td { border-bottom: 1px solid var(--line); padding: 0.4rem 0.5rem; text-align: left; }
.office-search { display: flex; gap: 0.4rem; margin: 0.8rem 0; }
.office-search input { min-width: 16rem; }
.office-dl { display: grid; grid-template-columns: 8rem 1fr; gap: 0.3rem 0.8rem; }
.office-dl dt { color: var(--dim); }
.office-actions, .office-inline, .office-plan { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; margin: 0.8rem 0; }
.office-plan label { display: grid; gap: 0.2rem; font-size: 0.82rem; color: var(--dim); }
.office-range { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.8rem 0 1rem; }
.office-range a {
  border: 1px solid var(--line); padding: 0.28rem 0.7rem; color: var(--dim);
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.75rem;
}
.office-range a.on, .office-range a:hover { border-color: var(--gold); color: var(--gold2); }
.office-analytics h2 { margin: 1.4rem 0 0.45rem; font-size: 1.05rem; }

.scene.street.cafe-scene {
  aspect-ratio: 21 / 9;
  max-height: none;
  min-height: 84vh;
  overflow: hidden;
}
.scene.street.cafe-scene .scene-bg { object-position: 72% center; }
.cafe-talk {
  position: absolute;
  z-index: 6;
  left: 1rem;
  top: 12%;
  width: min(32%, 22rem);
  max-height: 68%;
  overflow: auto;
  padding: 0.65rem 0.75rem 0.8rem;
  border: 1px solid rgba(201, 162, 39, 0.3);
  background: rgba(10, 8, 14, 0.74);
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.cafe-talk .kicker { margin: 0 0 0.35rem; letter-spacing: 0.08em; }
.cafe-talk p { margin: 0 0 0.55rem; font-size: 0.9rem; line-height: 1.45; }
.cafe-go { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cafe-scene.cafe-light .cafe-talk {
  background: rgba(255, 250, 240, 0.8);
  border-color: rgba(150, 118, 50, 0.4);
  color: #2a2216;
}
.cafe-scene.cafe-light .cafe-talk .kicker { color: #6b4e18; }
.cafe-scene.cafe-light .cafe-talk p { color: #2a2216; }
.cafe-scene.cafe-dark .cafe-talk {
  background: rgba(8, 6, 14, 0.78);
  border-color: rgba(170, 110, 220, 0.35);
  color: #ece4f6;
}
.cafe-scene.cafe-dark .cafe-talk .kicker { color: #d4b8f0; }
.cafe-scene.cafe-dark .cafe-talk p { color: #ece4f6; }

.scene.street.gym-scene {
  aspect-ratio: 21 / 9;
  max-height: none;
  min-height: 84vh;
  overflow: hidden;
}
.scene.street.gym-scene .scene-bg { object-position: 50% 40%; }
.gym-talk {
  position: absolute;
  z-index: 6;
  left: auto;
  right: 1rem;
  top: 3.2rem;
  width: min(38%, 24rem);
  max-height: 62%;
  overflow: auto;
  padding: 0.7rem 0.8rem 0.85rem;
  border: 1px solid rgba(201, 162, 39, 0.3);
  background: rgba(10, 8, 14, 0.78);
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.gym-talk p { margin: 0 0 0.55rem; font-size: 0.92rem; line-height: 1.45; }
.gym-talk .kicker { margin: 0.55rem 0 0.3rem; letter-spacing: 0.08em; color: var(--gold2); }
.gym-challenges { display: grid; gap: 0.15rem; margin: 0.2rem 0 0.4rem; }
button.gym-link {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  color: var(--gold2);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0.22rem 0;
  text-align: left;
}
button.gym-link:hover { color: #f0d78c; }
.gym-open { margin-top: 0.45rem; padding-top: 0.4rem; border-top: 1px solid rgba(201, 162, 39, 0.22); }
.gym-spar { display: grid; gap: 0.15rem; padding: 0.3rem 0; }
.gym-spar p { margin: 0; font-size: 0.85rem; }
.gym-spar .btn { width: fit-content; }

.street-find {
  position: absolute;
  z-index: 6;
  right: 0.7rem;
  top: 3.2rem;
  width: min(38%, 22rem);
  padding: 0.7rem 0.8rem 0.85rem;
  border: 1px solid rgba(201, 162, 39, 0.3);
  background: rgba(10, 8, 14, 0.82);
  backdrop-filter: blur(3px);
}
.street-find p { margin: 0 0 0.55rem; font-size: 0.95rem; line-height: 1.4; }
.street-find img { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 0 0.4rem; }
.street-find-go { display: flex; gap: 0.4rem; flex-wrap: wrap; }

@media (max-width: 820px) {
  .quest-book-pages { position: relative; inset: auto; grid-template-columns: 1fr; margin-top: 0.4rem; }
  .quest-book-art { display: none; }
  .shop-floor { grid-template-columns: 1fr; top: 38%; }
  .scene.street.shop-scene { max-height: none; min-height: 72vh; aspect-ratio: auto; overflow: visible; }
  .cafe-talk {
    left: 0.45rem; right: 0.45rem; top: auto; bottom: 0.45rem;
    width: auto; max-height: 40%;
  }
  .scene.street.cafe-scene { min-height: 72vh; aspect-ratio: auto; }
  .gym-talk {
    left: 0.45rem; right: 0.45rem; top: auto; bottom: 2.6rem;
    width: auto; max-height: 42%;
  }
  .scene.street.gym-scene { min-height: 72vh; aspect-ratio: auto; }
  .street-find {
    left: 0.45rem; right: 0.45rem; top: auto; bottom: 2.4rem;
    width: auto;
  }
}