/* STFU Requiem — design tokens
   Night violet page, lavender "paper" tarot cards, gold + magenta accents.
   Display: Dela Gothic One. Text: Zen Kaku Gothic New. */
:root {
  --night: #1C0F2E;
  --night-2: #2B1747;
  --night-3: #3D2263;
  --paper: #EDE6F7;
  --paper-2: #D9CCEE;
  --ink: #1C0F2E;
  --gold: #F4C542;
  --gold-deep: #C8931B;
  --magenta: #D6246E;
  --violet: #7A3FB8;
  --teal: #2BB3A8;
  --text: #EDE6F7;
  --muted: #B3A3CF;

  --display: "Dela Gothic One", "Arial Black", Impact, sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 2.441rem;
  --step-4: clamp(2.4rem, 5vw + 1rem, 4.2rem);

  --radius-card: 14px;
  --radius-ui: 8px;
  --page: min(1200px, 100% - 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden means hidden: a component's own display rule (.btn is inline-flex) used to beat the browser's, so a hidden
   button still showed (Reveal all after a pull, the install banner's Install before any prompt, the push buttons) */
[hidden]:not([hidden="until-found"]) { display: none !important; }
html { color-scheme: dark; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background:
    radial-gradient(circle at 1px 1px, rgb(122 63 184 / 0.18) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--night);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; }
img.missing { visibility: hidden; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  text-shadow: 3px 3px 0 var(--magenta);
}
.display.sm { font-size: var(--step-3); text-shadow: 2px 2px 0 var(--magenta); }
.h2 { font-family: var(--display); font-weight: 400; font-size: var(--step-2); margin: 0; }
.h3 { font-size: var(--step-1); font-weight: 700; margin: 0 0 .4rem; }
.lede { font-size: var(--step-1); max-width: 60ch; }
.kicker { color: var(--gold); font-weight: 700; margin: 0 0 .3rem; }

/* The one loud thing: the menacing "ゴゴゴ" */
.menace {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1;
  margin: 0 0 .5rem;
  color: var(--violet);
  letter-spacing: .05em;
  transform: skewX(-8deg);
  -webkit-text-stroke: 2px var(--night);
  text-shadow: 4px 4px 0 var(--night-3);
  animation: menace 2.4s steps(2) infinite;
}
.menace.small { font-size: 2rem; }
@keyframes menace { 50% { transform: skewX(-8deg) translate(2px, -1px); } }

/* ---------- layout ---------- */
.page { width: var(--page); margin: 2rem auto 4rem; }
.page.narrow, .narrow { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
.empty { text-align: center; padding-block: 4rem; }

/* ---------- header & navigation ----------
   Desktop (>= 1024px): one sticky row of flat links with two small dropdowns.
   Below that: slim top bar + bottom tab dock + a full menu sheet (<dialog>). */
.skip { position: absolute; left: -999px; top: .5rem; z-index: 60; padding: .5rem 1rem; background: var(--gold); color: var(--ink); font-weight: 700; border-radius: var(--radius-ui); }
.skip:focus { left: .5rem; }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem max(1.25rem, (100% - 1200px) / 2);
  padding-top: calc(.55rem + env(safe-area-inset-top));
  background: rgb(43 23 71 / .94);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--night-3);
  position: sticky; top: 0; z-index: 20;
}
.wordmark {
  font-family: var(--display); font-size: 1.25rem; color: var(--paper); text-decoration: none;
  display: flex; align-items: center; gap: .5rem; white-space: nowrap; flex: none;
}
.wordmark > img { width: 38px; height: 38px; object-fit: cover; border: 2px solid var(--gold); border-radius: 8px; flex: none; }
.brand-name { color: var(--paper); }
.brand-suffix { color: var(--gold); font-size: .9em; }

.nav { display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; }
.nav > a, .nav-drop > summary {
  position: relative; display: block;
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: .45rem .7rem; border-radius: var(--radius-ui); white-space: nowrap; cursor: pointer;
}
.nav > a:hover, .nav-drop > summary:hover, .nav-drop[open] > summary { color: var(--paper); background: var(--night-3); }
/* Current page: gold text with an underline bar, not a loud filled pill. */
.nav > a[aria-current], .nav-drop > summary[aria-current] { color: var(--gold); }
.nav > a[aria-current]::after, .nav-drop > summary[aria-current]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: -.62rem; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold);
}
.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav .nav-drop > summary::before { content: "▾"; float: right; margin-left: .35rem; font-size: .75em; color: var(--gold); }
.nav-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 30; display: grid; gap: 2px;
  min-width: 200px; padding: .35rem; background: var(--night-2); border: 1px solid var(--night-3);
  border-radius: var(--radius-ui); box-shadow: 0 12px 28px rgb(0 0 0 / .45);
}
.nav-menu.right { left: auto; right: 0; }
.nav-menu a, .nav-menu button.link {
  display: block; width: 100%; padding: .5rem .7rem; border-radius: 6px; text-align: left;
  color: var(--paper); text-decoration: none; font-weight: 500; white-space: nowrap;
}
.nav-menu a:hover, .nav-menu button.link:hover { background: var(--night-3); color: #fff; }
.nav-menu a[aria-current] { color: var(--gold); background: rgb(244 197 66 / .1); font-weight: 700; }
.nav-menu form { margin: 0; padding-top: 2px; border-top: 1px solid var(--night-3); }
/* Grouped menus: icon, name and one line on why the page matters. */
.nav-menu.wide { min-width: 320px; }
.nav-menu .menu-item { display: flex; align-items: flex-start; gap: .65rem; white-space: normal; padding: .55rem .7rem; }
.menu-icon { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 6px; background: var(--night-3); color: var(--gold); }
.menu-item strong { display: block; font-size: .95rem; }
.menu-item small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; font-weight: 400; }
.menu-item.hot { background: rgb(244 197 66 / .1); box-shadow: inset 3px 0 0 var(--gold); }
.menu-item.hot .menu-icon { background: var(--gold); color: var(--ink); }
.nav-badge { margin-left: .3rem; padding: .05rem .4rem; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 .65rem/1.4 var(--body); font-style: normal; vertical-align: .1em; }
.nav-badge.new { background: var(--magenta); color: #fff; }
.nav-badge.go { background: var(--gold, #F4C542); color: #1C0F2E; }
/* sub-sections inside a grouped menu (Battle: Adventure, Challenges, PvP) */
.menu-sub { margin: .35rem .7rem .1rem; color: var(--gold); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.menu-sub:first-child { margin-top: .15rem; }
/* The Battle tab glows until the story is done, to pull new players into it. */
.nav-drop.hot > summary { color: var(--gold); background: rgb(244 197 66 / .1); box-shadow: inset 0 0 0 1px rgb(244 197 66 / .45); }
.nav-dot { display: inline-block; width: 8px; height: 8px; margin-left: .35rem; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 0 rgb(214 36 110 / .7); animation: dot-ping 1.8s ease-out infinite; vertical-align: .15em; }
@keyframes dot-ping { 70% { box-shadow: 0 0 0 7px rgb(214 36 110 / 0); } 100% { box-shadow: 0 0 0 0 rgb(214 36 110 / 0); } }

/* New-player tour */
.tour { position: fixed; inset: 0; z-index: 80; animation: tour-fade .35s ease-out; }
.tour[hidden] { display: none; }
/* The spotlight only ever moves and resizes: its shadow keeps the same three layers in every state (a soft ring,
   a faint glow, the dim), so nothing can interpolate the ring into a screen-wide flash. */
.tour-spot { position: fixed; border-radius: var(--radius-ui); pointer-events: none;
  box-shadow: 0 0 0 2px rgb(244 197 66 / .5), 0 0 16px 2px rgb(244 197 66 / .14), 0 0 0 9999px rgb(14 7 24 / .6);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease; }
.tour-spot.is-off { box-shadow: 0 0 0 0 rgb(244 197 66 / 0), 0 0 0 0 rgb(244 197 66 / 0), 0 0 0 9999px rgb(14 7 24 / .6); }
.tour-card { position: fixed; width: min(340px, calc(100vw - 24px)); padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2);
  border: 1px solid rgb(244 197 66 / .45); box-shadow: 0 12px 32px rgb(0 0 0 / .45); animation: tour-card-in .3s ease-out; }
@keyframes tour-fade { from { opacity: 0; } }
@keyframes tour-card-in { from { opacity: 0; translate: 0 6px; } }
@media (prefers-reduced-motion: reduce) { .tour, .tour-card { animation: none; } .tour-spot { transition: none; } }
.tour-card .h3 { margin: 0 0 .35rem; color: var(--gold); }
.tour-text { margin: 0 0 .9rem; line-height: 1.5; }
.tour-count { margin: 0 0 .2rem; font-size: .75rem; }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tour-nav { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.tour-nav [hidden], .tour-actions [hidden] { display: none !important; }  /* a .btn display rule must never show a hidden step button */
body.touring .nav-drop[open] > .nav-menu { display: none; }

.account { display: flex; align-items: center; gap: .8rem; margin-left: auto; flex: none; }
.account form { margin: 0; }
.account-drop > summary { display: flex; align-items: center; gap: .5rem; color: var(--paper); padding: .25rem .6rem .25rem .25rem; }
.account-drop > summary img, .avatar-initial { border-radius: 50%; }
.avatar-initial { display: grid; place-items: center; width: 32px; height: 32px; flex: none; background: var(--violet); color: var(--paper); font-weight: 700; }
.me-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.account .btn.discord { padding: .45rem .9rem; font-size: var(--step--1); box-shadow: none; }

/* Bottom dock + menu sheet: hidden on desktop. */
.dock { display: none; }
.sheet { display: none; }

/* Desktop sidebar (signed in, >= 1024px): every page in collapsible groups; collapses to an icon rail.
   The top bar keeps only the inbox and the account menu. */
:root { --side-w: 232px; }
.sidenav { display: none; }
@media (min-width: 1024px) {
  html.side-mini { --side-w: 64px; }
  body.has-side { padding-left: var(--side-w); }
  body.has-side .topbar > .nav, body.has-side .topbar > .wordmark { display: none; }
  body.has-side .topbar { min-height: 58px; padding-inline: 1.25rem; }
  body.has-side .install-hint { left: calc(var(--side-w) + .6rem); }
  .sidenav { position: fixed; inset: 0 auto 0 0; z-index: 25; display: flex; flex-direction: column; width: var(--side-w);
    background: rgb(36 19 60 / .97); border-right: 2px solid var(--night-3); }
  .side-brand { min-height: 58px; padding: .6rem .85rem; border-bottom: 2px solid var(--night-3); font-size: 1.02rem; }
  .side-brand > img { width: 34px; height: 34px; }
  .side-brand .side-label { overflow: visible; }
  .side-brand .brand-suffix { display: inline; font-size: .85em; }
  .side-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .5rem .5rem 1rem;
    scrollbar-width: thin; scrollbar-color: var(--night-3) transparent; }
  .side-group + .side-group { margin-top: .3rem; }
  .side-pinned { padding-bottom: .4rem; margin-bottom: .3rem; border-bottom: 1px solid var(--night-3); }
  .side-head, .side-collapse { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .6rem; width: 100%;
    padding: .45rem .6rem; border-radius: var(--radius-ui); cursor: pointer; color: var(--muted); }
  .side-head { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .side-head::after { content: "▾"; margin-left: auto; font-size: .8rem; transition: transform .2s; }
  .side-group:not(.open) .side-head::after { transform: rotate(-90deg); }
  .side-head:hover, .side-collapse:hover { color: var(--paper); background: var(--night-3); }
  .side-head:focus-visible, .side-collapse:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
  .side-links { display: grid; gap: 1px; }
  .side-group:not(.open) .side-links { display: none; }
  .side-link { position: relative; display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; border-radius: var(--radius-ui);
    color: var(--paper); text-decoration: none; font-size: .93rem; font-weight: 500; white-space: nowrap; }
  .side-link:hover { color: #fff; background: var(--night-3); }
  .side-link[aria-current] { color: var(--gold); font-weight: 700; background: rgb(244 197 66 / .12); box-shadow: inset 3px 0 0 var(--gold); }
  .side-link.hot:not([aria-current]) { box-shadow: inset 0 0 0 1px rgb(244 197 66 / .45); }
  .side-link.nav-gang .side-label { color: #FF8DB9; }
  .side-link .nav-badge { margin-left: auto; }
  .side-icon { flex: none; width: 1.5rem; text-align: center; color: var(--gold); opacity: .85; }
  .side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .side-collapse { width: auto; margin: .4rem .5rem calc(.5rem + env(safe-area-inset-bottom)); font-size: .85rem; }
  .side-collapse .side-icon { transition: transform .2s; }

  /* the icon rail: every link stays one click away, names show on hover (title) */
  .side-mini .sidenav .side-label, .side-mini .sidenav .side-link .nav-badge, .side-mini .side-head { display: none; }
  .side-mini .side-group .side-links { display: grid; }
  .side-mini .side-group + .side-group { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--night-3); }
  .side-mini .side-link, .side-mini .side-collapse, .side-mini .side-brand { justify-content: center; padding-inline: 0; }
  .side-mini .side-icon { width: auto; font-size: 1.1rem; }
  .side-mini .side-collapse .side-icon { transform: rotate(180deg); }
  .side-mini .side-link.hot::after { content: ""; position: absolute; top: 5px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); }
}

@media (max-width: 1180px) {
  .brand-suffix { display: none; }
  .me-name { display: none; }
  .nav > a, .nav-drop > summary { padding-inline: .55rem; }
  .nav > a[aria-current]::after, .nav-drop > summary[aria-current]::after { left: .55rem; right: .55rem; }
}

@media (max-width: 1023px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .topbar { padding: .45rem max(.9rem, env(safe-area-inset-right)) .45rem max(.9rem, env(safe-area-inset-left)); padding-top: calc(.45rem + env(safe-area-inset-top)); }
  .wordmark { font-size: 1.1rem; }
  .wordmark > img { width: 32px; height: 32px; }
  .nav { display: none; }
  .account-drop > summary { padding: .2rem; }
  .account-drop > summary img, .account-drop .avatar-initial { width: 34px; height: 34px; }
  .hide-sm { display: none; }

  .dock {
    position: fixed; inset: auto 0 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: .25rem max(.25rem, env(safe-area-inset-right)) calc(.25rem + env(safe-area-inset-bottom)) max(.25rem, env(safe-area-inset-left));
    background: rgb(43 23 71 / .97); backdrop-filter: blur(8px);
    border-top: 1px solid var(--night-3);
  }
  .dock > a, .dock > button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
    min-height: 54px; padding: 0; border: 0; background: none; border-radius: var(--radius-ui);
    color: var(--muted); font: 700 .7rem/1.1 var(--body); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-icon { font-size: 1.25rem; line-height: 1; color: var(--paper); opacity: .8; }
  .dock > :is(a, button)[aria-current] { color: var(--gold); }
  .dock > :is(a, button)[aria-current] .dock-icon { color: var(--gold); opacity: 1; }
  .dock > :is(a, button)[aria-current]::before { content: ""; position: absolute; top: -.25rem; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold); }
  .dock > a:active, .dock > button:active { background: var(--night-3); }

  .sheet[open] {
    display: block; position: fixed; inset: auto 0 0; margin: 0; width: 100%; max-width: 100%;
    max-height: min(85vh, 680px); overflow-y: auto; overscroll-behavior: contain;
    padding: .9rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: var(--night-2); color: var(--text); border: 0; border-top: 2px solid var(--gold);
    border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgb(0 0 0 / .5);
    animation: sheet-up .2s ease-out;
  }
  .sheet::backdrop { background: rgb(10 4 20 / .6); }
  @keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
  .sheet-me { display: flex; align-items: center; gap: .6rem; color: var(--paper); text-decoration: none; min-width: 0; }
  .sheet-me img, .sheet-me .avatar-initial { border-radius: 50%; flex: none; width: 40px; height: 40px; }
  .sheet-me span { display: grid; line-height: 1.25; min-width: 0; }
  .sheet-me strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sheet-me small { color: var(--muted); }
  .sheet-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--night-3); color: var(--paper); font-size: 1.1rem; cursor: pointer; }
  .sheet-group { margin: .9rem 0 .35rem; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .35rem; }
  .sheet-grid a {
    display: flex; align-items: center; gap: .55rem; min-height: 48px; padding: .5rem .75rem;
    border-radius: var(--radius-ui); background: var(--night-3); color: var(--paper); font-weight: 700; text-decoration: none;
  }
  .sheet-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .sheet-grid a > span:first-child { color: var(--gold); width: 1.2em; text-align: center; flex: none; }
  .sheet-grid a > span + span { display: grid; gap: .05rem; }
  .sheet-grid a small { color: var(--muted); font-weight: 400; font-size: .74rem; line-height: 1.25; }
  .sheet-grid a[aria-current] { background: var(--gold); color: var(--ink); }
  .sheet-grid a[aria-current] > span:first-child, .sheet-grid a[aria-current] small { color: var(--ink); }
  .sheet-grid a.hot { box-shadow: inset 0 0 0 2px var(--gold); }
  .dock > :is(a, button).hot .dock-icon { color: var(--gold); opacity: 1; }
  .dock > :is(a, button) .nav-dot { position: absolute; top: .45rem; right: calc(50% - 1.1rem); }
  .sheet-logout { margin: 1rem 0 0; }
  /* the dock's Battle sheet: every battle category in its own colour, each page with what it's for */
  .battle-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
  .battle-sheet-head h2 { margin: 0; font: 400 1.6rem/1.1 var(--display); color: var(--paper); text-shadow: 3px 3px 0 var(--magenta); }
  .battle-sheet-head h2 span { color: var(--gold); }
  .battle-cat { --cat: var(--gold); margin-top: .9rem; }
  .battle-cat.cat-adventure { --cat: #B48CF0; } .battle-cat.cat-challenges { --cat: #FF6FA8; } .battle-cat.cat-pvp { --cat: var(--sky); }
  .battle-cat-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; color: var(--cat); font: 400 1rem/1.2 var(--display); }
  .battle-cat-h::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--cat), transparent); opacity: .6; }
  .battle-cat-h small { order: 2; font: 700 .7rem var(--body); color: var(--muted); }
  .battle-cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: .4rem; }
  .battle-cat-list a { display: flex; align-items: flex-start; gap: .5rem; min-height: 56px; padding: .55rem .6rem; border-radius: var(--radius-ui);
    background: var(--night-3); border-left: 3px solid var(--cat); color: var(--paper); text-decoration: none; }
  .battle-cat-icon { flex: none; width: 1.3em; text-align: center; font-size: 1.15rem; line-height: 1.2; }
  .battle-cat-list a > span + span { display: grid; gap: .1rem; min-width: 0; }
  .battle-cat-list strong { font-size: .86rem; line-height: 1.2; }
  .battle-cat-list small { color: var(--muted); font-size: .7rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .battle-cat-list a[aria-current] { background: var(--cat); color: var(--ink); }
  .battle-cat-list a[aria-current] small { color: var(--ink); }
  .battle-cat-list a.hot { box-shadow: inset 0 0 0 2px var(--gold); }

  .toast.floating { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }

.kofi-link { color: var(--gold); font-weight: 700; }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.news-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); color: var(--paper); text-decoration: none; transition: transform .15s, border-color .15s; }
.news-card:hover { color: var(--paper); border-color: var(--gold); transform: translateY(-2px); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--night-3); }
.news-card-body { display: grid; gap: .3rem; padding: .8rem 1rem 1rem; }
.news-card time { color: var(--gold); font-size: .75rem; font-weight: 700; }
.news-card strong { font: 400 var(--step-1)/1.2 var(--display); }
.news-card .muted { font-size: var(--step--1); line-height: 1.45; }
.news-card.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.news-card.lead img { aspect-ratio: 16 / 9; height: auto; }
.news-card.lead strong { font-size: var(--step-2); }
.news-pages { display: flex; justify-content: space-between; margin-top: 1.2rem; }
.news-article .news-cover { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-card); margin: .6rem 0 1.2rem; }
.news-text p { font-size: 1.05rem; line-height: 1.65; margin: 0 0 1rem; }
/* the post's Markdown (app/news.py render_body) */
.news-text :is(h2, h3, h4) { margin: 1.8rem 0 .6rem; line-height: 1.2; }
.news-text h2 { font: 400 1.55rem/1.15 var(--display); color: var(--paper); }
.news-text h3 { font: 400 1.2rem/1.2 var(--display); color: var(--gold); }
.news-text h4 { font-size: 1.05rem; color: var(--gold); }
.news-text > :first-child { margin-top: 0; }
.news-text :is(ul, ol) { margin: 0 0 1rem; padding-left: 1.4rem; font-size: 1.05rem; line-height: 1.6; }
.news-text li { margin: .3rem 0; }
.news-text li > :is(ul, ol) { margin: .3rem 0 .2rem; font-size: 1em; }
.news-text li::marker { color: var(--gold); }
.news-text blockquote { margin: 0 0 1rem; padding: .6rem 1rem; border-left: 4px solid var(--magenta); border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
  background: var(--night-2); color: var(--muted); }
.news-text hr { margin: 1.8rem 0; border: 0; border-top: 2px dashed var(--night-3); }
.news-text code { padding: .05rem .35rem; border-radius: 6px; background: var(--night-3); font-size: .92em; }
.news-text em { color: var(--paper); }
.news-text .md-video { margin: 1.2rem 0; display: grid; gap: .35rem; }
.md-video > button, .md-video > iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-ui); }
.md-video.short > button, .md-video.short > iframe { width: min(340px, 100%); aspect-ratio: 9 / 16; justify-self: center; }
.md-video-play { display: grid; place-content: center; justify-items: center; gap: .6rem; cursor: pointer; color: var(--paper);
  background: radial-gradient(ellipse at 50% 40%, rgb(214 36 110 / .35), transparent 60%),
              repeating-linear-gradient(135deg, rgb(255 255 255 / .03) 0 12px, transparent 12px 24px), var(--night-2);
  outline: 2px solid var(--night-3); outline-offset: -2px; }
.md-video-play:hover .md-video-icon, .md-video-play:focus-visible .md-video-icon { transform: scale(1.08); background: #FF0033; }
.md-video-play:focus-visible { outline-color: var(--gold); }
.md-video-icon { display: grid; place-items: center; width: 76px; height: 54px; padding-left: 4px; border-radius: 16px;
  background: #CC0029; color: #fff; font-size: 1.5rem; transition: transform .15s, background .15s; }
.md-video-note { font-size: .85rem; color: var(--muted); }
.md-video figcaption { font-size: .85rem; text-align: right; }
@media (prefers-reduced-motion: reduce) { .md-video-icon { transition: none; } }
.news-text .md-buttons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.news-text .md-btn { text-decoration: none; }
.news-text p > .md-btn { margin: 0 .2rem; vertical-align: middle; }
.news-text .md-table { margin: 0 0 1rem; overflow-x: auto; border-radius: var(--radius-ui); border: 2px solid var(--night-3); }
.news-text table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.45; }
.news-text :is(th, td) { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--night-3); }
.news-text th { background: var(--night-2); color: var(--gold); font-weight: 900; white-space: nowrap; }
.news-text tbody tr:last-child td { border-bottom: 0; }
.news-text tbody tr:nth-child(even) td { background: rgb(255 255 255 / .03); }
.news-more-title { margin-top: 2rem; }
.news-more { padding-left: 1.1rem; }
.home-news .shelf-head a { margin-left: auto; }
@media (max-width: 760px) { .news-card.lead { display: flex; } .news-card.lead img { min-height: 0; aspect-ratio: 16 / 9; } }
.admin-card { margin: 1.2rem 0; padding: 1.2rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.news-form { display: grid; gap: .9rem; }
.news-form label { display: grid; gap: .3rem; font-weight: 700; }
.news-form input[type=text], .news-form input[type=url], .news-form textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .5rem .65rem; }
.news-form .check { display: flex; align-items: center; gap: .4rem; font-weight: 400; }
.news-cover-pick { display: grid; gap: .6rem; border: 1px dashed var(--night-3); border-radius: var(--radius-ui); padding: .8rem; }
.news-cover-preview { max-width: 320px; border-radius: var(--radius-ui); }
.admin-news { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.admin-news li { display: flex; align-items: center; gap: .8rem; padding: .5rem; border-radius: var(--radius-ui); background: var(--night-3); }
.admin-news li > span { display: grid; flex: 1; min-width: 0; }
.admin-news img, .admin-news .no-cover { width: 72px; height: 44px; object-fit: cover; border-radius: 6px; display: grid; place-items: center; background: var(--night-2); }
.admin-news form { margin: 0; }
.kofi-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.5rem 0 0; color: var(--muted); }
.footer { padding: 2rem max(1.25rem, (100% - 1200px) / 2); color: var(--muted); font-size: var(--step--1); border-top: 1px solid var(--night-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer p { margin: 0; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: 700 var(--step-0)/1.2 var(--body);
  padding: .7rem 1.2rem;
  color: var(--paper); background: var(--night-3);
  border: 2px solid var(--paper); border-radius: var(--radius-ui);
  box-shadow: 3px 3px 0 var(--night);
  text-decoration: none; cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { color: var(--paper); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--magenta); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--night); }
.btn[disabled], .btn.htmx-request { opacity: .6; cursor: progress; }
.btn.gold { background: var(--gold); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--magenta); }
.btn.gold:hover { color: var(--ink); box-shadow: 6px 6px 0 var(--magenta); }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--magenta); color: #FF8DB9; }
.btn.discord { background: #5865F2; border-color: #5865F2; box-shadow: none; }
.btn.big { font-size: var(--step-1); padding: .9rem 1.6rem; }
.btn.small { font-size: var(--step--1); padding: .4rem .75rem; box-shadow: 2px 2px 0 var(--night); }
button.link { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; }
.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

select, input[type=search] {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .45rem .6rem;
}
form.inline { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
form.inline select { font-size: var(--step--1); max-width: 14rem; }

.notice { background: var(--night-2); border-left: 4px solid var(--violet); padding: .8rem 1rem; border-radius: 0 var(--radius-ui) var(--radius-ui) 0; }
.toast { padding: .75rem 1rem; border-radius: var(--radius-ui); font-weight: 700; border: 2px solid; margin: 0 0 1rem; }
.toast.ok { border-color: var(--teal); background: rgb(43 179 168 / .12); }
.toast.error, .notice.error { border-color: var(--magenta); background: rgb(214 36 110 / .14); }
.toast.floating { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 50; background: var(--night-2); }

/* ---------- the tarot card ---------- */
.card {
  --frame: var(--ink);
  --window: linear-gradient(160deg, #CDBEE6, #A992CF);
  position: relative;
  aspect-ratio: 7 / 12;
  width: 100%;
  border-radius: var(--radius-card);
  padding: 7px;
  background: var(--frame);
  color: var(--ink);
  box-shadow: 5px 6px 0 rgb(0 0 0 / .35);
  isolation: isolate;
}
.card-face {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  padding: 8px;
  border-radius: calc(var(--radius-card) - 5px);
  background:
    radial-gradient(circle at 1px 1px, rgb(28 15 46 / .13) 1px, transparent 1.4px) 0 0 / 6px 6px,
    var(--paper);
  border: 2px solid var(--ink);
  overflow: hidden;
}
.card-link { position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-card); }
.card-top { display: flex; justify-content: space-between; align-items: center; min-height: 1.2rem; }
.card-no { font-family: var(--display); font-size: .8rem; }
.stars { display: flex; gap: 1px; flex-wrap: wrap; justify-content: flex-end; max-width: 72%; }
.st {
  width: .8rem; height: .8rem; background: var(--gold-deep);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.st.asc { background: var(--magenta); }
.card-window {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 999px 999px 6px 6px;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / .35) 1px, transparent 1.6px) 0 0 / 5px 5px,
    var(--window);
  overflow: hidden;
  display: grid; place-items: end center;
  min-height: 0;
}
.card-window img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.card-window img.cover { object-fit: cover; object-position: center 42%; }
.card-window img.missing { visibility: hidden; }
.lvl {
  position: absolute; left: 6px; bottom: 6px;
  font: 700 .72rem/1 var(--body); background: var(--ink); color: var(--paper);
  padding: .25rem .45rem; border-radius: 4px;
}
.card-name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(.82rem, .5rem + .9vw, 1.08rem);
  line-height: 1.15; text-align: center; margin: 0;
  padding: .45rem .35rem; border-block: 2px solid var(--ink);
  background: linear-gradient(90deg, transparent, rgb(28 15 46 / .08), transparent);
  text-wrap: balance;
  min-height: 2.9em; display: grid; place-items: center;
}
.card-flavor {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.7em; margin: 0; color: var(--night-3); font-size: .68rem; line-height: 1.35;
  text-align: center; font-style: italic;
}
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; text-align: center; }
.card-stats div + div { border-left: 1px solid rgb(28 15 46 / .3); }
.card-stats dt { font-size: .65rem; font-weight: 700; color: var(--night-3); }
.card-stats dd { margin: 0; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.card-items { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.card-items li { font-size: .62rem; background: var(--ink); color: var(--gold); padding: .1rem .35rem; border-radius: 3px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card.rare   { --frame: var(--violet); --window: linear-gradient(160deg, #C6B3F0, #8C62C9); }
.card.epic   { --frame: var(--gold);   --window: linear-gradient(160deg, #FBE7A6, #E3A93A); }
.card.legend { --frame: var(--magenta); --window: linear-gradient(160deg, #F7B9D3, #C43A7A); }
.card.mythic {
  --frame: conic-gradient(from var(--spin, 0deg), var(--gold), var(--magenta), var(--teal), var(--violet), var(--gold));
  --window: linear-gradient(160deg, #FFF3C4, #F29BC4 55%, #8FE3DB);
}
.card.rare .card-name { border-color: var(--violet); }
.card.epic .card-name { border-color: var(--gold-deep); }
.card.legend .card-name { border-color: var(--magenta); }
.card.mythic .card-name { border-color: var(--gold-deep); }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card.mythic:hover, .card.mythic:focus-within, .card.mythic.reveal { animation: holo 3s linear infinite; }
@keyframes holo { to { --spin: 360deg; } }

.card-link:hover ~ .card-face { background-color: #fff; }
.card:has(.card-link:hover) { transform: translateY(-3px); box-shadow: 7px 9px 0 rgb(0 0 0 / .35); }
.card { transition: transform .12s, box-shadow .12s; }

/* Full art (★3+): the image fills the card, text sits on a dark gradient, a foil sheen runs across.
   The window keeps its place (and so the card keeps a classic card's size); only the image leaves it. */
.card.fullart .card-face { position: relative; background: #120821; color: var(--paper); }
.card.fullart .card-face > * { position: relative; z-index: 1; }
.card.fullart .card-face > .card-window { position: static; z-index: auto; border-color: transparent; background: none; }
.card.fullart .card-window img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%; border-radius: 0; }  /* not the classic arch: the face's own corners clip it */
.card.fullart .card-face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(to bottom, rgb(12 6 22 / .55) 0%, transparent 15%, transparent 52%, rgb(12 6 22 / .82) 76%, rgb(12 6 22 / .95) 100%); }
.card.fullart .lvl, .card.fullart .charge-chip, .card.fullart .card-flags { z-index: 2; }
.card.fullart .rar-badge { box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.card.fullart .lvl { bottom: auto; top: 2.3rem; left: 10px; }
.card.fullart .charge-chip { bottom: auto; top: 2.3rem; right: 10px; }
.card.fullart .card-flags { top: auto; bottom: 48%; right: 10px; }
.card.fullart .card-name { color: #fff; border-color: rgb(255 255 255 / .55); background: none; text-shadow: 2px 2px 0 #000, 0 0 12px rgb(0 0 0 / .8); }
.card.fullart.epic .card-name { border-color: var(--gold); } .card.fullart.legend .card-name { border-color: #FF6FAE; }
.card.fullart.mythic .card-name { border-image: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal)) 1; }
.card.fullart .card-flavor { color: var(--paper-2); text-shadow: 0 1px 2px #000; }
.card.fullart .card-stats div + div { border-left-color: rgb(255 255 255 / .2); }
.card.fullart .card-stats dt { color: var(--muted); }
.card.fullart .card-stats dd { color: #fff; }
.card.fullart .traits li { border-color: rgb(255 255 255 / .45); background: rgb(12 6 22 / .6); }
.card.fullart .xp { background: rgb(255 255 255 / .2); }
.card.fullart::after { content: ""; position: absolute; inset: 7px; z-index: 2; border-radius: calc(var(--radius-card) - 5px); pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .28) 45%, rgb(160 240 255 / .18) 50%, transparent 62%) -120% 0 / 250% 100% no-repeat;
  mix-blend-mode: screen; background-position: 40% 0; }
/* Performance: a grid can hold 200 full arts and shinies. At rest every card is still (a fixed sheen); the
   animated effects, which repaint the card on every frame, only run on the card you point at, the big stand
   card and reveals. */
.card.fullart:is(:hover, :focus-within, .big, .reveal)::after { animation: foil 4.5s ease-in-out infinite; }
.card.fullart:is(:hover, :focus-within)::after { animation-duration: 1.6s; }
@keyframes foil { 0%, 35% { background-position: -120% 0; } 75%, 100% { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) { .card.fullart::after { animation: none !important; background-position: 40% 0; } }

/* Shiny: alternate colours on the art, a rainbow holo frame, a twinkling badge (stacks with full art) */
.card.shiny {
  --frame: conic-gradient(from var(--spin, 0deg), #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF, #C77DFF, #FF5EAE);
}
/* the spinning frame and the drifting sparkles repaint the card each frame: only where someone is looking */
.card.shiny:is(:hover, :focus-within, .big):not(.reveal) { animation: holo 4s linear infinite; }  /* .reveal keeps its flip-in */
.card.shiny:is(:hover, :focus-within, .big, .reveal) .card-face::after { animation: shiny-sheen 6s linear infinite; }
.card.shiny:is(:hover, :focus-within, .big) .shiny-badge { animation: twinkle 1.8s ease-in-out infinite; }
.card.shiny .card-window img:not(.own-art) { filter: hue-rotate(150deg) saturate(1.35) brightness(1.05); }
.card.shiny .card-face::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .35;
  background: repeating-linear-gradient(125deg, rgb(255 94 174 / .5) 0 8%, rgb(255 212 94 / .5) 8% 16%, rgb(110 242 201 / .5) 16% 24%, rgb(110 168 255 / .5) 24% 32%),
              radial-gradient(circle at 20% 15%, #fff 0 1.5px, transparent 2.5px) 0 0 / 46px 46px,
              radial-gradient(circle at 70% 60%, #fff 0 1px, transparent 2px) 0 0 / 34px 34px;
  background-size: 300% 300%, 46px 46px, 34px 34px; }
.card.shiny .card-face { position: relative; }
.shiny-badge { display: inline-block; margin-right: auto; margin-left: 3px; font-size: .9rem; line-height: 1; filter: drop-shadow(0 0 4px #FFD45E); }
.shiny-title { display: inline-block; animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.25) rotate(15deg); } }  /* transform only: the GPU runs it alone */
@keyframes shiny-sheen { to { background-position: 300% 300%, 46px 46px, 34px 34px; } }
/* a shiny drop (1 in 1000): its tag in the pull, its title in the cinematic, a hint in the summon */
.shiny-tag { background: linear-gradient(90deg, #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF); color: #120821; font-weight: 700; }
span.shiny-tag:not(.new-tag) { padding: 0 .4rem; border-radius: 4px; }
.cine.is-shiny .cine-title { background: linear-gradient(90deg, #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF, #FF5EAE); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: cine-stamp .45s cubic-bezier(.2, .9, .3, 1.6) both, cine-rainbow 3s linear infinite; }
.summon.has-shiny .sum-gather i:nth-child(4n) { background: #FF5EAE; box-shadow: 0 0 6px #FF5EAE; }
.summon.has-shiny .sum-gather i:nth-child(4n + 1) { background: #6EF2C9; box-shadow: 0 0 6px #6EF2C9; }
.summon.has-shiny .sum-gather i:nth-child(4n + 2) { background: #FFD45E; box-shadow: 0 0 6px #FFD45E; }
@media (prefers-reduced-motion: reduce) { .card.shiny, .card.shiny .card-face::after, .shiny-badge, .shiny-title { animation: none !important; } }

.card.big { max-width: 320px; }
.card.big .card-name { font-size: 1.35rem; }
.card.big .card-stats dd { font-size: 1.05rem; }

/* pull reveal: the single orchestrated moment */
.card.reveal { animation: flip .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.card.reveal.mythic { animation: flip .9s cubic-bezier(.2, .9, .3, 1.2) both, holo 3s linear .9s infinite; }
@keyframes flip {
  0%   { transform: perspective(900px) rotateY(90deg) scale(.8); filter: brightness(3); }
  60%  { transform: perspective(900px) rotateY(-8deg) scale(1.04); filter: brightness(1.3); }
  100% { transform: none; filter: none; }
}

/* ---------- grids ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1.4rem 1.1rem; }
.team-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.count { color: var(--muted); margin: 0 0 .8rem; }

/* ---------- home ---------- */
.hero {
  width: var(--page); margin: 3rem auto 2rem;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center;
}
.hand { position: relative; height: 660px; }
.hero-art {
  position: absolute; left: 50%; top: 0; width: min(420px, 92%); aspect-ratio: 4 / 5; transform: translateX(-50%) rotate(2deg);
  border: 4px solid var(--gold); border-radius: 220px 220px 18px 18px; overflow: hidden;
  box-shadow: 8px 8px 0 var(--magenta), 0 24px 60px rgb(0 0 0 / .45);
  animation: art-in .9s cubic-bezier(.2, .8, .2, 1) both;
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgb(28 15 46 / .85)); }
@keyframes art-in { from { opacity: 0; transform: translateX(-50%) rotate(2deg) translateY(24px) scale(.97); } }
.hand-slot {
  position: absolute; left: 50%; top: 290px; z-index: 1; width: 170px;
  transform-origin: 50% 140%;
  transform: translateX(calc(-50% + var(--n) * 58px)) rotate(calc(var(--n) * 8deg)) translateY(calc(var(--n) * var(--n) * 6px));
  animation: deal .8s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc((var(--n) + 2) * 70ms);
}
.hand-slot:hover { z-index: 5; }
@keyframes deal { from { transform: translateX(-50%) rotate(0) translateY(40px); opacity: 0; } }
@media (max-width: 900px) { .hand-slot { transform: translateX(calc(-50% + var(--n) * 38px)) rotate(calc(var(--n) * 8deg)) translateY(calc(var(--n) * var(--n) * 5px)); } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; margin-top: 1.5rem; }
  .hand { height: 620px; overflow-x: clip; }  /* the fanned cards reach ~600px: keep them off the next heading */
  .hero-art { width: min(300px, 80%); }
  .hand-slot { width: 130px; top: 250px; }
}
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }
.steps ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 3.2rem; position: relative; }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 0;
  font-family: var(--display); font-size: 2.4rem; line-height: 1; color: var(--gold);
  text-shadow: 3px 3px 0 var(--magenta);
}
.steps h3 { margin: 0 0 .3rem; font-size: var(--step-1); }
.steps p { margin: 0; color: var(--muted); }

/* ---------- welcome / pull ---------- */
.welcome { text-align: center; padding-top: 2rem; }
.welcome .lede { margin-inline: auto; }
.welcome .cta { justify-content: center; }
.stage { display: grid; place-items: center; padding: 1rem; }
.stage .card { width: min(300px, 80vw); }
.pull { display: grid; grid-template-columns: auto 1fr; gap: 2rem; align-items: center; margin-bottom: 2rem; padding: 1rem; background: var(--night-2); border-radius: var(--radius-card); }
@media (max-width: 700px) { .pull { grid-template-columns: 1fr; text-align: center; } }

/* ---------- encyclopedia ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.search input { width: min(360px, 80vw); }
.chips { display: flex; gap: .3rem; border: 0; padding: 0; margin: 0; flex-wrap: wrap; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: inline-block; padding: .35rem .75rem; border: 2px solid var(--night-3); border-radius: 999px; font-weight: 700; cursor: pointer; }
.chips input:checked + span { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.chips input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Ranked: the roster picker and the pick-and-ban */
.roster-panel { padding: 1.2rem 0; }
.roster-search { display: block; max-width: 320px; margin: .4rem 0 .6rem; }
.roster-list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .3rem;
  max-height: 420px; overflow-y: auto; }
.roster-list label { display: flex; align-items: center; gap: .45rem; padding: .4rem .6rem; border-radius: var(--radius-ui); background: var(--night-2);
  border: 1px solid var(--night-3); cursor: pointer; }
.roster-list label.picked { border-color: var(--gold); background: rgb(244 197 66 / .1); }
.roster-list label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.roster-list small { margin-left: auto; white-space: nowrap; }
.draft { padding: 1rem 0; }
.draft-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.draft-head .turn-clock { font-size: var(--step-1); font-weight: 700; margin: 0; }
.draft-sub { margin-top: 1rem; }
.draft-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; margin: .4rem 0 1rem; }
.draft-row.mine { opacity: .85; }
.draft-pick { position: relative; display: grid; border-radius: var(--radius-card); }
label.draft-pick { cursor: pointer; }
label.draft-pick:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.draft-mark { position: absolute; left: 50%; top: 40%; translate: -50% -50%; padding: .2rem .6rem; border-radius: 6px; font: 700 .85rem/1.3 var(--body);
  background: var(--magenta); color: #fff; letter-spacing: .05em; box-shadow: 0 4px 12px rgb(0 0 0 / .4); pointer-events: none; }
label.draft-pick .draft-mark { opacity: 0; transition: opacity .15s; }
label.draft-pick.picked .draft-mark { opacity: 1; }
label.draft-pick.picked .card, .draft-pick.banned .card { filter: grayscale(.85) brightness(.6); }
label.draft-pick:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.draft-pick.banned.yours .draft-mark { background: var(--night-3); }
.draft-order { display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin: .4rem 0 .8rem; }
.draft-order label { display: grid; gap: .2rem; font-weight: 700; font-size: var(--step--1); }

/* Stands page: preview every card as a full art / shiny */
.look-chips { align-items: center; }
.look-chips legend { float: left; margin-right: .4rem; color: var(--muted); font-size: var(--step--1); font-weight: 700; }
.look-chips .unique-toggle span { border-style: dashed; }
.look-cell { position: relative; display: grid; }
.look-tag { position: absolute; z-index: 3; left: 50%; bottom: -.6rem; transform: translateX(-50%); white-space: nowrap; padding: .1rem .5rem;
  border-radius: 999px; background: var(--night-2); border: 1px solid var(--gold); color: var(--gold); font: 700 .7rem/1.5 var(--body); pointer-events: none; }

.stand-detail { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 760px) { .stand-detail { grid-template-columns: 1fr; } }
table.stats { border-collapse: collapse; min-width: 260px; margin-bottom: .6rem; }
table.stats th, table.stats td { padding: .4rem .8rem .4rem 0; border-bottom: 1px solid var(--night-3); text-align: left; }
table.stats td { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- player ---------- */
.player-bar, .profile-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.player-bar .who, .profile-head { justify-content: flex-start; }
.player-bar .who { display: flex; gap: 1rem; align-items: center; }
.avatar { border-radius: 50%; border: 3px solid var(--gold); }
.xp { display: flex; align-items: center; gap: .7rem; }
.xp span { font-weight: 700; }
.bar { width: 180px; height: 10px; background: var(--night-3); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--gold); }
.figures { display: flex; gap: 2rem; margin: 0 0 1.5rem; flex-wrap: wrap; }
.figures.compact { margin: 0; }
.figures dt { color: var(--muted); font-size: var(--step--1); }
.figures dd { margin: 0; font-family: var(--display); font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.figures a { color: inherit; }

.actions-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.action-tile { background: var(--night-2); border: 2px solid var(--night-3); border-radius: var(--radius-card); padding: 1.1rem 1.2rem; }
.action-tile p { margin: 0 0 .8rem; }
.loot { font-size: var(--step-1); font-weight: 700; color: var(--gold); }
.suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1.2rem; padding: .8rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px dashed var(--gold); }
.suggest .kicker { margin: 0 0 .3rem; }
.suggest p { margin: 0; }
.suggest-names { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-weight: 700; }
.suggest-names img { width: 36px; height: 36px; object-fit: cover; object-position: center top; border-radius: 6px; margin-right: -.5rem; }
.suggest-names small { color: var(--muted); font-weight: 400; }
/* Boss rush */
.rush-best { display: grid; justify-items: end; gap: .1rem; }
.rush-best small { color: var(--muted); font-size: .75rem; }
.rush-best strong { font: 400 var(--step-3)/1 var(--display); color: var(--gold); }
.rush-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem; border-radius: var(--radius-card); border: 2px solid var(--gold); background: linear-gradient(110deg, rgb(244 197 66 / .12), transparent 60%), var(--night-2); }
.rush-run .h2 { margin: .1rem 0 .6rem; }
.rush-run form { margin: 0; }
.rush-team { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.rush-team li { display: grid; gap: .2rem; width: 120px; font-size: var(--step--1); font-weight: 700; }
.rush-team li.down { opacity: .4; filter: grayscale(1); }
.rush-team img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--radius-ui); }
.rush-team small { color: var(--muted); font-weight: 400; }
.rush-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.rush-bosses { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rush-bosses li { display: flex; gap: .8rem; align-items: center; padding: .5rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.rush-bosses li.beaten { border-color: var(--teal); }
.rush-bosses li.next { border-color: var(--gold); }
.rush-bosses img { width: 56px; height: 56px; object-fit: cover; object-position: center top; border-radius: 8px; flex: none; }
.rush-bosses span { display: grid; gap: .1rem; }
.rush-reward { color: var(--gold); font-size: .75rem; }
.gang-standings li.me { box-shadow: inset 3px 0 0 var(--gold); }
@media (max-width: 860px) { .rush-grid { grid-template-columns: 1fr; } }
/* Currency icons (app/branding.py): Meteor Dust is gold sparks, Arrowheads a gold blade, Devil's Palm a palm */
.cur { display: inline-flex; vertical-align: -.15em; margin-left: .2em; }
.cur svg { width: 1.05em; height: 1.05em; }
.cur-dust { color: #F4C542; filter: drop-shadow(0 0 2px rgb(244 197 66 / .45)); }
.cur-head { color: #F4C542; filter: drop-shadow(0 0 2px rgb(214 36 110 / .5)); }
.cur-palm { color: #5FC46A; }
.cur-amount { white-space: nowrap; font-variant-numeric: tabular-nums; }
.btn.gold .cur-head, .btn.gold .cur-dust { color: var(--ink); filter: none; }
.wallet dt { display: flex; align-items: center; gap: .3rem; }
.wallet dt .cur { margin-left: 0; }

/* The Forge (reforge tab) */
.forge-layout { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1.2rem; }
.forge-picker { position: sticky; top: 80px; display: grid; gap: .6rem; }
.forge-picker input { font: inherit; color: var(--paper); background: var(--night-2); border: 2px solid var(--night-3); border-radius: var(--radius-ui); padding: .5rem .7rem; }
.forge-picker input:focus { border-color: var(--gold); outline: none; }
.forge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-height: calc(100vh - 220px); overflow-y: auto; }
.forge-list li[hidden] { display: none; }
.forge-list a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .4rem .5rem;
  border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid transparent; color: var(--paper); text-decoration: none; }
.forge-list a:hover, .forge-list a.on { border-color: var(--gold); }
.forge-list img { width: 42px; height: 42px; object-fit: cover; object-position: center top; border-radius: 6px; }
.forge-list strong { display: block; font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-list small { color: var(--muted); font-size: .72rem; }
.forge-ranks { display: flex; gap: 2px; }
.forge-ranks b, .reel-quality b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; border-radius: 4px; font-size: .75rem; background: var(--night-3); color: var(--paper); }
.q-A b, b.q-A { background: linear-gradient(135deg, var(--gold), var(--magenta)); color: var(--ink); }
.q-B b, b.q-B { background: var(--gold); color: var(--ink); }
.q-C b, b.q-C { background: var(--violet); color: var(--paper); }
.q-D b, b.q-D { background: var(--night-3); }
.q-E b, b.q-E, .q-F b, b.q-F { background: rgb(214 36 110 / .35); color: #FF8DB9; }
.forge-card { padding: 1.3rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); display: grid; gap: 1rem; }
.forge-head { display: flex; gap: 1rem; align-items: center; }
.forge-head img { width: 96px; height: 96px; flex: none; object-fit: cover; object-position: center top; border-radius: var(--radius-ui); border: 3px solid var(--gold-deep); }
.forge-head .h2, .forge-head p { margin: 0; }
.forge-pairs { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.reel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .7rem .9rem;
  border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); font-weight: 700; overflow: hidden;
  transition: border-color .2s, box-shadow .2s; }
.reel-type { font-size: 1.05rem; }
.reel-quality { display: flex; align-items: center; gap: .4rem; }
.reel.locked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.reel-lock { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--night-3); }
.reel-lock input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reel-lock:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.reel-lock:has(input:disabled) { opacity: .35; cursor: not-allowed; }
.reel.rolling { border-color: var(--violet); }
.reel.rolling .reel-type, .reel.rolling .reel-quality { filter: blur(.5px); animation: reel-shake .14s linear infinite; }
.reel.landed { animation: reel-land .45s cubic-bezier(.2, .9, .3, 1.4); }
.reel.better { border-color: var(--teal); box-shadow: 0 0 18px rgb(43 179 168 / .35); }
.reel.worse { border-color: var(--magenta); }
.reel.better::after, .reel.worse::after { position: absolute; right: .4rem; top: .2rem; font-size: .7rem; }
.reel.better::after { content: "\25B2"; color: var(--teal); }
.reel.worse::after { content: "\25BC"; color: var(--magenta); }
@keyframes reel-shake { 50% { transform: translateY(-3px); } }
@keyframes reel-land { from { transform: scale(1.06); } }
.forge-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.forge-compare .h3, .forge-form .h3 { margin: 0; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.forge-new { padding: .6rem; margin: -.6rem; border-radius: var(--radius-ui); background: rgb(244 197 66 / .06); }
.forge-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.forge-form { display: grid; gap: .6rem; margin: 0; }
.forge-cost { margin: .3rem 0 0; font-size: var(--step-1); }
.forge-card small.up { color: var(--teal); font-weight: 700; }
.forge-card small.down { color: #FF8DB9; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .reel.landed, .reel.rolling .reel-type, .reel.rolling .reel-quality { animation: none; } }
@media (max-width: 860px) {
  .forge-layout, .forge-compare { grid-template-columns: 1fr; }
  .forge-picker { position: static; }
  .forge-list { max-height: 240px; }
  .forge-new { margin: 0; }
}

/* Quests */
.quests-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.quests-head p.muted { max-width: 60ch; }
.quest-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.2rem 0 .6rem; }
.quest-tabs { display: flex; gap: .3rem; padding: .25rem; border-radius: 999px; background: var(--night-2); border: 1px solid var(--night-3); }
.quest-tabs button { position: relative; font: 700 var(--step--1)/1 var(--body); color: var(--muted); background: none; border: 0; border-radius: 999px;
  padding: .6rem 1rem; cursor: pointer; display: flex; align-items: center; gap: .35rem; }
.quest-tabs button[aria-selected=true] { background: var(--gold); color: var(--ink); }
@media (pointer: coarse) { .quest-tabs button { min-height: 44px; } }
.tab-badge { min-width: 1.3rem; height: 1.3rem; border-radius: 999px; background: var(--magenta); color: #fff; font-size: .7rem; display: grid; place-items: center; padding: 0 .3rem; }
.claim-all { animation: claim-glow 1.6s ease-in-out infinite; }
@keyframes claim-glow { 50% { box-shadow: 0 0 0 4px rgb(244 197 66 / .25), 0 0 24px rgb(244 197 66 / .35); } }
.quest-panel-head { margin: 0 0 .6rem; font-size: var(--step--1); }
.quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.quest-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .9rem 1rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); transition: border-color .2s; }
.quest-card.ready { border-color: var(--gold); background: linear-gradient(100deg, rgb(244 197 66 / .1), var(--night-2) 60%); }
.quest-card.done { opacity: .55; }
.quest-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--night-3); color: var(--gold); }
.quest-card.ready .quest-icon { background: var(--gold); color: var(--ink); }
.quest-card.done .quest-icon { background: var(--teal); color: var(--ink); }
.quest-main h3 { margin: 0; font-size: var(--step-0); }
.quest-main p { margin: .1rem 0 .4rem; font-size: var(--step--1); }
.quest-progress { display: flex; align-items: center; gap: .6rem; }
.quest-progress .bar { flex: 1; height: 8px; margin: 0; }
.quest-count { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.reward-chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.reward-chips li { padding: .15rem .55rem; border-radius: 999px; background: var(--night-3); font-size: .75rem; font-weight: 700; }
.reward-chips .chip-xp { color: var(--muted); }
.reward-chips .chip-head, .reward-chips .chip-palm { background: rgb(244 197 66 / .16); color: var(--gold); }
.quest-pct { font-family: var(--display); font-size: var(--step-1); color: var(--muted); }
.quest-claimed { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-ui);
  background: rgb(43 179 168 / .15); border: 2px solid var(--teal); animation: toast-in .35s ease-out; }
.quest-claimed strong { color: var(--teal); }
.quest-locked, .quest-invite { margin-top: .8rem; padding: .9rem 1rem; border-radius: var(--radius-card); border: 2px dashed var(--night-3); }
.quest-locked { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .9rem; align-items: center; }
.quest-locked p { margin: 0; display: grid; gap: .15rem; }
.quest-invite p { margin: 0 0 .6rem; }
.invite-link { display: flex; gap: .5rem; }
.invite-link input { flex: 1; min-width: 0; font: inherit; font-size: var(--step--1); color: var(--paper); background: var(--night); border: 2px solid var(--night-3);
  border-radius: var(--radius-ui); padding: .45rem .6rem; }
@media (max-width: 640px) {
  .quest-card { grid-template-columns: 40px minmax(0, 1fr); }
  .quest-icon { width: 40px; height: 40px; }
  .quest-act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
  .quest-act .quest-pct { display: none; }
  .quest-tabs { width: 100%; justify-content: space-between; }
  .quest-tabs button { padding: .55rem .7rem; }
  .quest-locked { grid-template-columns: 40px minmax(0, 1fr); }
  .quest-locked .btn { grid-column: 1 / -1; }
}

/* Community: players, friends, inbox */
.player-search { display: flex; gap: .5rem; margin: 1rem 0; }
.player-search input { flex: 1; min-width: 0; font: inherit; color: var(--paper); background: var(--night-2); border: 2px solid var(--night-3);
  border-radius: var(--radius-ui); padding: .6rem .8rem; }
.player-search input:focus { border-color: var(--gold); outline: none; }
.player-list { list-style: none; margin: .4rem 0 1.4rem; padding: 0; display: grid; gap: .5rem; }
.player-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .9rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.player-id { display: flex; align-items: center; gap: .7rem; color: var(--paper); text-decoration: none; min-width: 0; }
.player-id img, .avatar-initial.big { width: 44px; height: 44px; border-radius: 50%; flex: none; font-size: 1.1rem; }
.player-id strong { display: block; }
.player-id small { color: var(--muted); font-size: .75rem; }
.player-actions, .inline-forms, .profile-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.player-actions form.inline, .inline-forms form.inline, .profile-actions form.inline { margin: 0; }
.profile-actions { align-self: flex-start; justify-content: flex-end; }
.pill.friends { padding: .3rem .7rem; border-radius: 999px; background: rgb(214 36 110 / .18); color: #FF8DB9; font-weight: 700; font-size: var(--step--1); }
.danger-text { color: #FF8DB9 !important; }
.count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem; border-radius: 999px; background: var(--magenta);
  color: #fff; font: 700 .8rem/1 var(--body); vertical-align: middle; }
.invite-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 1rem; align-items: center; margin: 1rem 0 1.4rem;
  padding: 1rem 1.1rem; border-radius: var(--radius-card); border: 2px solid var(--gold); background: linear-gradient(110deg, rgb(244 197 66 / .12), var(--night-2) 70%); }
.invite-card h2, .invite-card p { margin: 0 0 .3rem; }
@media (max-width: 720px) { .invite-card { grid-template-columns: 1fr; } }
.inbox-h { margin: 1rem 0 .4rem; }
.inbox-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.inbox-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem .9rem;
  border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--gold); }
.inbox-list form.inline { margin: 0; }
.feed { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 2px; }
.feed-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .55rem .7rem; border-radius: 8px; }
.feed-item.new { background: rgb(244 197 66 / .08); }
.feed-item.new .feed-text::after { content: " \2022  new"; color: var(--gold); font-size: .72rem; font-weight: 700; }
.feed-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--night-3); font-size: .85rem; }
.feed-text a { color: var(--paper); }
.feed-item time { font-size: .72rem; white-space: nowrap; }
.join-page .cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }

/* Special scaling line (stand panel, stand page, forge) */
.type-matchup { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .3rem 0 .6rem; font-size: var(--step--1); }
.type-matchup > span { display: inline-flex; align-items: baseline; gap: .3rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--night-3); background: var(--night-2); }
.type-matchup small { font-weight: 700; }
.type-matchup .type-own { border-color: var(--gold); }
.type-matchup .type-beats { border-color: var(--teal); color: #8FE3DA; }
.type-matchup .type-weak { border-color: var(--magenta); color: #F59ABE; }
.type-matchup .type-help { margin-left: .2rem; font-size: .8rem; }
.type-wheel { max-width: 300px; margin: .6rem auto 1rem; }
.type-wheel svg { display: block; width: 100%; height: auto; color: var(--muted); }
.type-wheel figcaption { margin-top: .4rem; font-size: var(--step--1); color: var(--muted); text-align: center; }
.tw-arrow { fill: none; stroke: currentColor; stroke-width: 2.5; }
.tw-arrow.is-beats { color: var(--teal); stroke-width: 4; }
.tw-arrow.is-weak { color: var(--magenta); stroke-width: 4; }
.tw-tip { fill: var(--muted); } .tw-tip.is-beats { fill: var(--teal); } .tw-tip.is-weak { fill: var(--magenta); }
.tw-node circle { fill: var(--night-2); stroke: var(--night-3); stroke-width: 2; }
.tw-node text { fill: var(--text); font-size: 18px; }
.tw-node .tw-label { font-size: 10px; font-weight: 700; fill: var(--muted); }
.tw-node.is-own circle { stroke: var(--gold); stroke-width: 4; }
.tw-node.is-target circle { stroke: var(--teal); stroke-width: 4; }
.tw-node.is-threat circle { stroke: var(--magenta); stroke-width: 4; }
.tw-luck circle { stroke-dasharray: 4 3; }
.scaling { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .3rem 0 .6rem; font-size: var(--step--1); }
.scaling-stat { padding: .15rem .6rem; border-radius: 999px; font-weight: 700; background: var(--night-3); }
.scaling-stat.stat-damage { background: rgb(214 36 110 / .2); color: #FF8DB9; }
.scaling-stat.stat-armor { background: rgb(122 63 184 / .3); color: #D7B8FF; }
.scaling-stat.stat-health { background: rgb(91 227 142 / .15); color: #7DF0A8; }
.scaling-stat.stat-speed { background: rgb(43 179 168 / .2); color: #7FE3DA; }
.scaling-stat.stat-critical { background: rgb(244 197 66 / .18); color: var(--gold); }
.scaling-power { font-family: var(--display); font-size: var(--step-0); color: var(--gold); }

/* Inbox bell and pop-up toasts */
.account { display: flex; align-items: center; gap: .4rem; }
.bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; font-size: 1.15rem; }
.bell:hover, .bell[aria-current] { background: var(--night-3); }
.bell b { position: absolute; top: 1px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--magenta);
  color: #fff; font: 700 .68rem/18px var(--body); text-align: center; }
.bell.ring span { display: inline-block; animation: bell-ring .9s ease-in-out 2; }
@keyframes bell-ring { 20%, 60% { transform: rotate(14deg); } 40%, 80% { transform: rotate(-14deg); } }
/* Pop-ups (app.js toasts): manga panels that pop in, a badge in their kind's colour (--accent), a timer bar that runs
   out (--life, set by app.js; it pauses under the pointer), and a shake for errors */
.toasts { position: fixed; z-index: 60; right: 1rem; top: 76px; display: grid; gap: .6rem; width: min(380px, calc(100vw - 2rem)); pointer-events: none; }
.toast-pop { --accent: var(--sky); position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: .7rem;
  padding: .7rem .8rem .85rem; border-radius: 12px; background: #F7F1E3; border: 3px solid var(--ink); color: var(--ink); text-decoration: none;
  box-shadow: 5px 5px 0 var(--accent), 0 14px 30px rgb(0 0 0 / .45); font: 700 var(--step--1)/1.35 var(--body);
  animation: toast-in .5s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .35s, transform .35s; }
.toast-pop::before { content: "🔔"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--accent); color: var(--ink); font-size: 1rem; line-height: 1; rotate: -8deg; }
.toast-pop::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); transform-origin: left;
  animation: toast-life var(--life, 7s) linear forwards; }
.toast-pop:hover::after { animation-play-state: paused; }
@keyframes toast-life { to { transform: scaleX(0); } }
.toast-pop.quest { --accent: var(--gold); } .toast-pop.quest::before { content: "☑"; font-weight: 700; }
.toast-pop.friend { --accent: #FF8DB9; } .toast-pop.friend::before { content: "♥"; }
.toast-pop.fight::before { content: "⚔"; }
.toast-pop.trade::before { content: "⇄"; }
.toast-pop.gang::before { content: "⚑"; }
.toast-pop.achievement { --accent: var(--gold); } .toast-pop.achievement::before { content: "🏆"; }
.toast-pop.unlock::before { content: "🔓"; }
/* the result of an action (Flask flash), floating instead of a bar at the top of the page */
.toast-pop[class*="flash-"] { --accent: var(--gold); }
.toast-pop[class*="flash-"]::before { content: "ℹ"; font-weight: 700; }
.toast-pop.flash-ok::before { content: "★"; }
.toast-pop.flash-error { --accent: var(--magenta); animation: toast-in .5s cubic-bezier(.2, 1.4, .4, 1), toast-shake .4s .45s; }
.toast-pop.flash-error::before { content: "!"; font-weight: 800; color: #fff; }
.achievements li.secret { border-style: dashed; }
.achievements li[hidden] { display: none; }
.ach-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
@media (pointer: coarse) { .ach-filter .filter-chip { min-height: 44px; } }
.achievements li.secret h2 { letter-spacing: .2em; }
.toast-pop span { flex: 1; }
.toast-pop.leaving { opacity: 0; transform: translateY(-8px) scale(.92); }
.toast-x { align-self: flex-start; min-width: 28px; min-height: 28px; background: none; border: 0; color: var(--ink); opacity: .55; cursor: pointer; font-size: .85rem; }
.toast-x:hover { opacity: 1; }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(-16px) scale(.55) rotate(-5deg); } 60% { opacity: 1; transform: scale(1.06) rotate(1.5deg); } }
@keyframes toast-shake { 25% { translate: -5px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
@media (max-width: 640px) { .toasts { top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); right: .6rem; left: .6rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .toast-pop, .toast-pop.flash-error, .bell.ring span { animation: none; } .toast-pop::after { display: none; } }

/* Install-the-app prompt (phones only, see app.js) */
.install-hint { position: fixed; z-index: 45; left: .6rem; right: .6rem; bottom: calc(70px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .5rem .7rem; align-items: center; padding: .8rem .9rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--gold); box-shadow: 0 12px 30px rgb(0 0 0 / .55);
  animation: pull-arrive .3s ease-out; }
.install-hint[hidden] { display: none; }
.install-hint img { border-radius: 10px; }
.install-hint strong { display: block; }
.install-hint p { margin: .1rem 0 0; font-size: var(--step--1); color: var(--muted); }
.install-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem; }

/* Wiki search */
.wiki-search { grid-column: 1 / -1; position: relative; margin-bottom: 1rem; }
.wiki-search input { width: 100%; font: inherit; font-size: 1.05rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .7rem .9rem; }
.wiki-results { position: absolute; z-index: 15; left: 0; right: 0; top: calc(100% + .3rem); list-style: none; margin: 0; padding: .3rem; max-height: min(70vh, 520px); overflow-y: auto;
  background: var(--night-2); border: 1px solid var(--night-3); border-radius: var(--radius-ui); box-shadow: 0 16px 40px rgb(0 0 0 / .5); }
.wiki-results li.muted { padding: .7rem; }
.wiki-results a { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: 6px; color: var(--paper); text-decoration: none; }
.wiki-results a:hover, .wiki-results a:focus-visible { background: var(--night-3); outline-offset: -3px; }
.wiki-results small { color: var(--gold); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.wiki-results span { color: var(--muted); font-size: var(--step--1); }

/* Profile */
.profile-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.5rem; padding: 1.4rem; margin-bottom: 1.2rem; border-radius: var(--radius-card);
  background: radial-gradient(ellipse at 0% 0%, rgb(122 63 184 / .45), transparent 60%), var(--night-2); border: 2px solid var(--night-3); }
.profile-hero .avatar { width: 104px; height: 104px; flex: none; }
.avatar-big { display: grid; place-items: center; background: var(--violet); color: var(--paper); font: 400 2.6rem/1 var(--display); }
.profile-id { flex: 1; min-width: 220px; display: grid; gap: .25rem; }
.profile-id .kicker, .profile-id p { margin: 0; }
.supporter { color: var(--gold); }
.profile-level { display: grid; grid-template-columns: auto minmax(0, 260px); justify-content: start; align-items: center; gap: .6rem; font-size: var(--step--1); margin-top: .3rem; }
.profile-level strong { font-size: 1.1rem; color: var(--gold); }
.profile-share { align-self: flex-start; }
.profile-stats { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.profile-stats li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon value" "icon label"; align-items: center; gap: 0 .6rem; padding: .7rem .8rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.profile-stats li > span { grid-area: icon; font-size: 1.4rem; color: var(--gold); }
.profile-stats strong { grid-area: value; font: 400 var(--step-1)/1.1 var(--display); }
.profile-stats small { grid-area: label; color: var(--muted); font-size: .75rem; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.profile-side { display: grid; gap: 1.2rem; }
.profile-collection { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.profile-collection li { display: grid; grid-template-columns: 3rem 1fr 3.5rem; align-items: center; gap: .5rem; font-size: var(--step--1); }
.profile-collection small { text-align: right; color: var(--muted); }
.profile-achievements { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.profile-achievements li { display: flex; gap: .6rem; align-items: center; padding: .45rem .6rem; border-radius: var(--radius-ui); background: var(--night-2); }
.profile-achievements li > span:first-child { font-size: 1.3rem; }
.profile-achievements span:last-child { display: grid; }
.profile-showcase-title { margin-top: 2rem; }
@media (max-width: 860px) { .profile-grid { grid-template-columns: 1fr; } .profile-level { grid-template-columns: auto 1fr; } }
.raid-card .kicker { margin: 0; }
.raid-meter { position: relative; height: 14px; margin: .6rem 0 .4rem; border-radius: 99px; background: var(--night-3); }
.raid-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--magenta), var(--gold)); }
.raid-tick { position: absolute; top: -3px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--muted); }
.raid-tick.reached { background: var(--gold); }
.raid-tiers { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .3rem; }
.raid-tiers li { display: grid; gap: .1rem; padding: .45rem .7rem; border-radius: var(--radius-ui); background: var(--night-3); font-size: var(--step--1); opacity: .75; }
.raid-tiers li.reached { opacity: 1; box-shadow: inset 3px 0 0 var(--gold); }
.raid-tiers li.reached strong::after { content: " ✓"; color: var(--teal); }
.raid-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.raid-actions form { margin: 0; }
.small-print { font-size: .78rem; }
.raid-prev { flex-basis: 100%; margin: 0; color: var(--gold); font-weight: 700; font-size: var(--step--1); }
.raid-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: var(--step--1); }
.raid-hits li { display: flex; justify-content: space-between; border-bottom: 1px solid var(--night-3); padding: .2rem 0; }
.recipe-bonus { margin: .1rem 0; color: var(--teal); font-size: var(--step--1); font-weight: 700; }
.fuse-path { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--muted); }
.fuse-path.ready { color: var(--teal); font-weight: 700; }
.streak { list-style: none; margin: .2rem 0 .8rem; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.streak li { display: grid; gap: .05rem; padding: .25rem .1rem; text-align: center; border-radius: 6px; background: var(--night-3); font-size: .68rem; font-weight: 700; color: var(--muted); }
.streak li small { font-weight: 400; font-size: .6rem; }
.streak li.done { background: rgb(43 179 168 / .25); color: var(--paper); }
.streak li.next { box-shadow: inset 0 0 0 2px var(--gold); color: var(--gold); }
.streak li:last-child span { color: var(--gold); }
.streak-count { font: 700 .8rem/1 var(--body); color: #FF9F43; margin-left: .3rem; }

.shelf { margin-bottom: 2.8rem; }
.shelf-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 2px solid var(--night-3); padding-bottom: .5rem; }
.shelf-head p { margin: 0; }
.slot { display: flex; flex-direction: column; gap: .5rem; }
.empty-slot { aspect-ratio: 7 / 12; border: 3px dashed var(--night-3); border-radius: var(--radius-card); display: grid; place-content: center; text-align: center; padding: 1rem; }
.empty-slot p { margin: 0; }
.collection-filter { display: grid; gap: .25rem; width: min(100%, 340px); margin: 0 0 1rem; color: var(--muted); font-size: var(--step--1); font-weight: 700; }
.collection-filter input { width: 100%; }
details.menu summary { cursor: pointer; font-size: var(--step--1); font-weight: 700; color: var(--muted); list-style: none; padding: .3rem 0; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu summary::before { content: "+ "; color: var(--gold); }
details.menu[open] summary::before { content: "− "; }
.menu-body { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; padding: .6rem; background: var(--night-2); border-radius: var(--radius-ui); }

/* ---------- items ---------- */
.inventory { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .8rem; }
.item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; background: var(--night-2); border-radius: var(--radius-ui); border: 2px solid var(--night-3); }
.item.arrow { border-color: var(--gold-deep); }
.item h3 { margin: 0; font-size: var(--step-0); }
.item p { margin: 0; font-size: var(--step--1); }

/* ---------- leaderboard ---------- */
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tabs a { padding: .4rem .8rem; border-radius: 999px; border: 2px solid var(--night-3); color: var(--paper); text-decoration: none; font-weight: 700; }
.tabs a[aria-current] { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.board { list-style: none; padding: 0; margin: 0; }
.board li { display: grid; grid-template-columns: 3rem 1fr auto auto; align-items: center; gap: .8rem; padding: .55rem .6rem; border-bottom: 1px solid var(--night-3); }
.board li.you { background: rgb(244 197 66 / .1); }
.board .rank { font-family: var(--display); font-size: var(--step-1); text-align: center; color: var(--muted); }
.board li:nth-child(-n+3) .rank { color: var(--gold); }
.board .who { display: flex; align-items: center; gap: .6rem; color: var(--paper); text-decoration: none; font-weight: 700; min-width: 0; }
.board .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who img, .avatar-blank { border-radius: 50%; width: 36px; height: 36px; background: var(--night-3); flex: none; }
.board .lead { width: 40px; height: 40px; object-fit: contain; }
.board .value { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }

/* ---------- fight ---------- */
.crusade-intro { text-align: center; padding-top: 1rem; }
.crusade-intro .lede { margin-inline: auto; }
/* Layout: arena and log on the left, a tall spotlight for portraits and special GIFs on the right. */
.fight {
  display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  grid-template-areas: "stage spot" "log spot";
}
.fight form { margin: 0; }
.fight-stage { grid-area: stage; display: grid; gap: .8rem; }
.spotlight { grid-area: spot; align-self: stretch; }
.fight .log { grid-area: log; }

.arena {
  position: relative; display: grid; gap: .6rem; padding: 1rem .8rem; overflow: hidden; isolation: isolate;
  border: 2px solid var(--night-3); border-radius: var(--radius-card);
  contain: layout paint;
  background:
    radial-gradient(ellipse 70% 45% at 50% 50%, rgb(122 63 184 / .28), transparent 70%),
    repeating-linear-gradient(115deg, rgb(255 255 255 / .025) 0 2px, transparent 2px 14px),
    var(--night-2);
}
.side-name { margin: 0; font: 400 var(--step-0)/1.2 var(--display); letter-spacing: .02em; text-align: center; }
.side.foe .side-name { color: #FF8DB9; }
.side.you .side-name { color: var(--gold); }
.side ul { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.foe .fighter { --dir: 1; --bar: var(--magenta); }
.you .fighter { --dir: -1; --bar: var(--teal); }
.arena-mid { display: grid; gap: .2rem; justify-items: center; padding: .3rem 0; border-block: 1px dashed rgb(255 255 255 / .1); }

.fighter {
  --ring: var(--night-3);
  position: relative; width: 148px; display: grid; justify-items: center; align-content: start; gap: .2rem; text-align: center;
  padding: .65rem .55rem .55rem; background: rgb(28 15 46 / .75); border: 2px solid var(--night-3); border-radius: var(--radius-card);
  transition: transform .15s, background .15s, border-color .15s, opacity .4s;
  contain: layout style; will-change: transform;
}
.fighter.rare { --ring: var(--violet); }
.fighter.epic { --ring: var(--gold-deep); }
.fighter.legend { --ring: var(--magenta); }
.fighter.mythic { --ring: var(--gold); }
.fighter-portrait { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 3px solid var(--ring); border-radius: var(--radius-ui); background: var(--night-3); }
.fighter-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fighter-badge { position: absolute; right: 4px; bottom: 4px; font-size: .9rem; filter: none; text-shadow: 0 1px 2px rgb(0 0 0 / .8); }
/* Fight cosmetics (the "✨ Cosmetics" toggle): a shiny fights in its colours with a rainbow frame, a ★3+ copy with
   its full art. All still: a fight already animates plenty. */
.fighter-shiny { position: absolute; left: 4px; top: 3px; font-size: .8rem; filter: none; text-shadow: 0 0 4px #FFD45E; }
.fighter.shiny .fighter-portrait { border-color: transparent;
  background: linear-gradient(var(--night-3), var(--night-3)) padding-box, conic-gradient(#FF5EAE, #FFD45E, #6EF2C9, #6EA8FF, #C77DFF, #FF5EAE) border-box; }
.fighter.shiny .fighter-portrait img:not(.own-art), .spotlight.shiny-art .spotlight-img { filter: hue-rotate(150deg) saturate(1.35) brightness(1.05); }
.fighter.fullart .fighter-portrait img { object-position: center 18%; }
.fighter.fullart .fighter-portrait { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35), 0 0 10px color-mix(in srgb, var(--ring) 45%, transparent); }
.fighter h3 { margin: .1rem 0 0; font-size: var(--step--1); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fighter-meta { margin: 0; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; }
.fighter .charge { margin: 0; font-size: .7rem; color: var(--muted); }
.charge.ready { color: var(--gold); font-weight: 700; }
.hp { width: 100%; height: 8px; background: var(--night-3); border-radius: 99px; overflow: hidden; contain: strict; }
.hp i { display: block; height: 100%; background: var(--bar, var(--teal)); transition: width .35s ease-out; }
.fighter.down { opacity: .35; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.fighter.acting { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(244 197 66 / .25), 0 0 22px rgb(244 197 66 / .25); }
.fighter-hit { position: absolute; inset: 0; background: transparent; border: 0; border-radius: var(--radius-card); cursor: crosshair; z-index: 2; }
.fighter:has(.fighter-hit) { border-color: var(--magenta); animation: target-pulse 1.4s ease-in-out infinite; }
.fighter-hit[data-hit]::after {
  content: attr(data-hit); position: absolute; left: 50%; top: .4rem; transform: translateX(-50%); white-space: nowrap;
  padding: .1rem .45rem; border-radius: 999px; background: var(--magenta); color: #fff; font: 700 .72rem/1.4 var(--body);
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.fighter-hit:hover::after, .fighter-hit:focus-visible::after { opacity: 1; }
.hp { position: relative; }
.hp-dot, .hp-regen { position: absolute; top: 0; bottom: 0; display: block; }
.hp-dot { background: repeating-linear-gradient(135deg, #FF4D6D 0 4px, #B3123A 4px 8px); animation: hp-pulse 1.2s ease-in-out infinite; }
.hp-regen { background: repeating-linear-gradient(135deg, #5BE38E 0 4px, #1E9E57 4px 8px); opacity: .85; animation: hp-pulse 1.2s ease-in-out infinite; }
#fight.playing .hp-dot, #fight.playing .hp-regen, #fight.playing .hp-forecast { visibility: hidden; }
@keyframes hp-pulse { 50% { opacity: .45; } }
.hp-forecast { font-weight: 700; padding: 0 .3rem; border-radius: 999px; }
.hp-forecast.bad { color: #FF8DA1; background: rgb(255 77 109 / .15); }
.hp-forecast.good { color: #7DF0A8; background: rgb(91 227 142 / .14); }
.fx-list { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.fx { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .35rem; border-radius: 999px; font-size: .66rem; line-height: 1.5;
  border: 1px solid; white-space: nowrap; cursor: help; }
.fx.bad { border-color: rgb(255 77 109 / .6); background: rgb(255 77 109 / .14); color: #FFC2CD; }
.fx.good { border-color: rgb(91 227 142 / .55); background: rgb(91 227 142 / .12); color: #C4F7D6; }
.fx b { font-variant-numeric: tabular-nums; }
.fx small { font-size: .6rem; opacity: .8; }
.fx small::before { content: "· "; }
.fx small::after { content: "t"; }
@media (max-width: 640px) { .fx .fx-name { display: none; } }
.turn-clock { margin: .2rem 0 0; text-align: center; font-size: var(--step--1); color: var(--muted); font-variant-numeric: tabular-nums; }
.turn-clock.mine { color: var(--paper); }
.turn-clock b { font-size: var(--step-1); color: var(--gold); }
.turn-clock.urgent b { color: #FF4D6D; animation: hp-pulse .5s ease-in-out infinite; }
.mirror-odds { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.mirror-odds li { display: grid; gap: .1rem; padding: .6rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); border-top: 3px solid var(--muted); }
.mirror-odds .mirror-clear { border-color: var(--teal); } .mirror-odds .mirror-sharp { border-color: var(--gold); }
.mirror-odds .mirror-twisted { border-color: var(--magenta); }
.mirror-odds small { color: var(--muted); font-size: .72rem; }
@media (max-width: 640px) { .mirror-odds { grid-template-columns: 1fr 1fr; } }
.searching { display: flex; align-items: center; gap: .6rem; }
.spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--night-3); border-top-color: var(--gold); animation: cine-spin .8s linear infinite; }
.special-preview { margin: .1rem 0 0; max-width: 60ch; text-align: center; font-size: var(--step--1); color: var(--paper-2); }
.special-preview strong { color: var(--gold); }
/* "Hold it for a later turn": only with the settings menu's "Choose when specials fire" (app.js, html.manual-special) */
.special-hold { display: none; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: var(--step--1); color: var(--paper); background: rgb(14 7 24 / .7); border: 2px solid var(--gold); }
html.manual-special .special-hold { display: inline-flex; }
.special-hold input { width: 18px; height: 18px; accent-color: var(--gold); }
.fighter:has(.fighter-hit:hover), .fighter:has(.fighter-hit:focus-visible) { background: rgb(214 36 110 / .25); transform: translateY(-3px); animation: none; }
@keyframes target-pulse { 50% { border-color: var(--gold); } }

.turn-banner { font-family: var(--display); font-size: var(--step-1); text-align: center; margin: 0; min-height: 1.6em; }
.turn-banner .turn-no { display: inline-block; margin-right: .4rem; padding: .05rem .5rem; font-size: .75em; background: var(--gold); color: var(--ink); border-radius: 4px; vertical-align: .1em; }
.turn-banner.play { font-family: var(--body); font-weight: 700; font-size: var(--step-0); color: var(--paper); animation: banner-in .25s ease-out; }
.turn-banner.play.crit, .turn-banner.play.special { color: var(--gold); }
.turn-banner.play.crit2 { color: #FF4040; }
.turn-banner.play.crit3 { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; animation: banner-in .25s ease-out, rainbow-shift 1.2s linear infinite; }
.turn-banner.play.terrain { color: var(--teal); }
.turn-banner.play.sudden { color: #FF8DB9; }
.turn-banner.done { font-size: var(--step-3); text-shadow: 3px 3px 0 var(--magenta); animation: slam .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.turn-banner.done.loss { color: #FF8DB9; text-shadow: 3px 3px 0 var(--night); }
@keyframes banner-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes slam { from { opacity: 0; transform: scale(2.2) rotate(-6deg); } }
.terrain { text-align: center; margin: 0; color: var(--muted); font-size: var(--step--1); max-width: 52ch; }
.terrain strong { color: var(--teal); margin-right: .25rem; }
.sudden-badge { margin: .1rem 0 0; padding: .15rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: rgb(214 36 110 / .2); color: #FF8DB9; animation: sudden-pulse 1.6s ease-in-out infinite; }
.sudden-badge.soon { background: transparent; color: var(--muted); animation: none; border: 1px dashed var(--night-3); }
@keyframes sudden-pulse { 50% { background: rgb(214 36 110 / .35); } }

.fight-controls { margin: 0; text-align: right; }
.result { text-align: center; padding: 1.2rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--teal); animation: pull-arrive .4s ease-out both; }
.result.loss { border-color: var(--magenta); }
.result p { margin: 0 0 .8rem; }
.fight.playing .result, .fight.playing .fight-controls { display: none; }
.fight.playing .fighter-hit { pointer-events: none; }
.fight.playing .fighter:has(.fighter-hit) { animation: none; border-color: var(--night-3); }
.fight.playing .arena { cursor: pointer; }

/* Replay effects, toggled by app.js for each fresh log event. */
.fighter.lunge { z-index: 3; animation: lunge .45s cubic-bezier(.3, .7, .4, 1); }
.fighter.hurt { animation: hurt .45s ease-out; }
.fighter.hurt.crit { animation: hurt-crit .6s ease-out; }
.fighter.dodge { animation: dodge .5s ease-in-out; }
.fighter.cast { z-index: 3; border-color: var(--gold); animation: cast 1.2s ease-out; }
.fighter.ko { animation: ko .7s ease-in forwards; }
@keyframes lunge { 45% { transform: translateY(calc(var(--dir) * 34px)) scale(1.08); } }
@keyframes hurt {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); filter: brightness(1.7); }
  40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}
@keyframes hurt-crit {
  0%, 100% { transform: none; }
  15% { transform: translateX(-12px) rotate(-3deg) scale(.95); filter: brightness(2.2); }
  35% { transform: translateX(10px) rotate(2deg); } 55% { transform: translateX(-7px); } 75% { transform: translateX(4px); }
}
@keyframes dodge { 40% { transform: translateX(36px) skewX(-10deg); opacity: .55; } 70% { transform: translateX(30px); } }
@keyframes cast {
  0% { box-shadow: 0 0 0 0 rgb(244 197 66 / .9); }
  30% { transform: scale(1.1); box-shadow: 0 0 0 10px rgb(244 197 66 / .35), 0 0 40px rgb(244 197 66 / .6); }
  100% { box-shadow: 0 0 0 22px rgb(244 197 66 / 0); }
}
@keyframes ko { 30% { transform: translateY(-6px) rotate(-4deg); } to { transform: translateY(10px) rotate(6deg); opacity: .35; filter: grayscale(1); } }

.dmg-pop {
  position: absolute; left: 50%; top: 22%; z-index: 4; pointer-events: none; white-space: nowrap;
  font: 400 1.6rem/1 var(--display); color: #fff; -webkit-text-stroke: 1px var(--night); text-shadow: 2px 2px 0 var(--magenta);
  animation: pop 1s ease-out forwards;
}
.dmg-pop.crit { font-size: 2.2rem; color: var(--gold); }
/* Crits past 100%: red for a double, rainbow for a triple and beyond. Normal hits stay white. */
.dmg-pop.crit2 { font-size: 2.6rem; color: #FF4040; text-shadow: 2px 2px 0 var(--night); }
.dmg-pop.crit3 {
  font-size: 3rem; color: transparent; -webkit-text-stroke: 0; text-shadow: none;
  background: var(--rainbow); -webkit-background-clip: text; background-clip: text;
  animation: pop 1.2s ease-out forwards, rainbow-shift .6s linear infinite;
}
:root { --rainbow: linear-gradient(90deg, #FF4040, #FF9F1C, #FFE14D, #4DFF88, #3FD0FF, #9D6BFF, #FF4FD8); }
@keyframes rainbow-shift { from { filter: drop-shadow(2px 2px 0 #14102A) hue-rotate(0deg); } to { filter: drop-shadow(2px 2px 0 #14102A) hue-rotate(360deg); } }
.dmg-pop.miss { font-size: 1.2rem; color: var(--teal); text-shadow: 2px 2px 0 var(--night); }
.dmg-pop.stun { font-size: 1.1rem; color: var(--paper); text-shadow: 2px 2px 0 var(--violet); }
@keyframes pop {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
  20% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); }
  70% { opacity: 1; transform: translate(-50%, -30px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(.95); }
}
.arena-flash { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.arena.flash-special .arena-flash { z-index: 5; background: radial-gradient(circle, rgb(244 197 66 / .55), rgb(214 36 110 / .25) 60%, transparent); animation: flash .9s ease-out; }
.arena.shake { animation: arena-shake .35s; }
@keyframes flash { 10% { opacity: .7; } }
@keyframes arena-shake { 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -1px); } }

/* Spotlight: the acting stand's portrait, or its special GIF when one fires. */
.spotlight figure { margin: 0; height: 100%; min-height: 420px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); }
.spotlight-frame {
  position: relative; display: grid; place-items: center; overflow: hidden; min-height: 0; contain: paint;
  background: repeating-conic-gradient(from 0deg at 50% 60%, rgb(255 255 255 / .03) 0 6deg, transparent 6deg 12deg), radial-gradient(circle at 50% 60%, var(--night-3), var(--night));
}
.spotlight-img { width: 100%; height: 100%; max-height: 560px; object-fit: contain; padding: 1rem; will-change: transform, opacity; }
.spotlight figcaption { display: grid; gap: .15rem; padding: .7rem .9rem; border-top: 2px solid var(--night-3); }
.spotlight-name { font: 400 var(--step-1)/1.15 var(--display); }
.spotlight-line { color: var(--muted); font-size: var(--step--1); }
.spotlight.swap .spotlight-img { animation: spot-in .35s cubic-bezier(.2, .8, .2, 1); }
.spotlight.special figure { border-color: var(--gold); box-shadow: 0 0 30px rgb(244 197 66 / .25); }
.spotlight.special .spotlight-img { padding: 0; object-fit: cover; animation: spot-zoom .6s cubic-bezier(.2, .8, .2, 1); }
.spotlight.special .spotlight-name { color: var(--gold); }
.menacing {
  position: absolute; right: .5rem; top: .4rem; font: 400 2rem/1 var(--display); color: var(--violet);
  -webkit-text-stroke: 2px var(--night); text-shadow: 3px 3px 0 var(--magenta); opacity: 0; pointer-events: none;
}
.spotlight.special .menacing { opacity: 1; animation: menace .5s steps(2) infinite; }
@keyframes spot-in { from { opacity: 0; transform: scale(.9); } }
@keyframes spot-zoom { from { opacity: 0; transform: scale(1.35); filter: brightness(2); } }

/* Log */
.log-title { margin: 0 0 .4rem; font-size: var(--step-0); color: var(--muted); }
.log ol { list-style: none; padding: 0; margin: 0; max-height: 280px; overflow-y: auto; border: 2px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night-2); }
.log li { padding: .45rem .8rem; border-bottom: 1px solid var(--night-3); font-size: var(--step--1); border-left: 3px solid transparent; }
.log li .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .3rem; }
.log li.mine { border-left-color: var(--teal); }
.log li.theirs { color: #F2C6D8; border-left-color: var(--magenta); }
.log li.crit { font-weight: 700; color: var(--gold); }
.log li.crit2 { color: #FF6B6B; }
.log li.crit3 { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.log li.special { color: var(--gold); font-weight: 700; }
.log li.stun { color: var(--muted); font-style: italic; }
.log li.terrain { color: var(--teal); font-weight: 700; border-left-color: var(--teal); }
.log li.sudden { color: #FF8DB9; font-weight: 700; }
.log li.pending { display: none; }
.log li.fresh { animation: logIn .35s ease-out both; }
@keyframes logIn { from { opacity: 0; transform: translateX(-8px); background: rgb(244 197 66 / .2); } }

@media (max-width: 860px) {
  /* Phones: the fight stays on one screen. Arena, then the latest log lines, then a compact spotlight. */
  .fight { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "log" "spot"; gap: .8rem; }
  .spotlight figure { min-height: 0; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: none; align-items: center; }
  .spotlight-frame { height: 96px; }
  .spotlight-img { max-height: 96px; padding: .3rem; }
  .spotlight.special .spotlight-img { padding: 0; }
  .spotlight figcaption { border-top: 0; border-left: 2px solid var(--night-3); }
  .menacing { font-size: 1.1rem; }
  .log ol { max-height: 132px; }
  .log.open ol { max-height: 60vh; }
}
.log-title { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.log-toggle { display: none; padding: .3rem .7rem; min-height: 36px; font: 700 .75rem/1 var(--body); color: var(--gold); background: none; border: 1px solid var(--night-3); border-radius: 999px; cursor: pointer; }
@media (max-width: 860px) { .log-toggle { display: inline-flex; align-items: center; } }
/* Touch screens have no hover: show the damage preview on every target. */
@media (hover: none) {
  .fighter-hit[data-hit]::after { opacity: 1; }
}
@media (max-width: 480px) {
  .side ul { gap: .45rem; }
  .fighter { width: calc(33.333% - .35rem); min-width: 96px; padding: .5rem .3rem .4rem; }
  .fighter .charge { font-size: .62rem; }
  .arena { padding: .8rem .4rem; }
  .dmg-pop { font-size: 1.25rem; }
  .dmg-pop.crit { font-size: 1.6rem; }
  .dmg-pop.crit2 { font-size: 1.85rem; }
  .dmg-pop.crit3 { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.use-result { scroll-margin-top: 90px; }

/* ---------- reborn additions ---------- */
.rar-badge { font-family: var(--display); font-size: .78rem; background: var(--ink); color: var(--paper); padding: .05rem .4rem; border-radius: 4px; }
.card.epic .rar-badge { background: var(--gold-deep); color: var(--ink); }
.card.legend .rar-badge { background: var(--magenta); }
.card.mythic .rar-badge { background: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal)); color: var(--ink); }
.taunt { font-size: .8rem; }
.card-top { gap: 4px; }
.card-top .stars { margin-left: auto; }
.card-stats.four { grid-template-columns: repeat(4, 1fr); }
.card-stats.four dd { font-size: .78rem; }
.traits { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; }
.traits li { font-size: .66rem; font-weight: 700; border: 1px solid var(--ink); border-radius: 3px; padding: 0 .3rem; }
.card-face { grid-template-rows: auto 1fr auto auto auto; }
.card-face > .traits, .card-face > .card-items { margin-top: -2px; }
.card { aspect-ratio: auto; min-height: 0; }
.card-window { aspect-ratio: 5 / 6; }

.banners { display: grid; gap: 1.5rem; }
.banner { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 1.5rem; background: var(--night-2); border: 2px solid var(--night-3); border-radius: var(--radius-card); padding: 1rem; }
.banner-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-ui); background: var(--night-3); }
.banner-body p { margin: .3rem 0 .8rem; }
.banner-art-link { position: relative; display: block; border-radius: var(--radius-ui); overflow: hidden; color: inherit; text-decoration: none; }
.banner-art-hint { position: absolute; right: .5rem; bottom: .5rem; padding: .2rem .55rem; border-radius: 999px; background: rgb(11 5 20 / .75);
  font-size: .75rem; font-weight: 700; color: var(--paper); opacity: .85; transition: opacity .2s; }
.banner-art-link:hover .banner-art-hint, .banner-art-link:focus-visible .banner-art-hint { opacity: 1; background: var(--gold); color: var(--ink); }
.banner-counts { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0 .2rem; }
.bd-open { margin-left: .3rem; font-weight: 700; }
.calendar li[data-open-banner] { cursor: pointer; border-radius: 10px; padding: .2rem; }
.calendar li[data-open-banner]:hover, .calendar li[data-open-banner]:focus-visible { background: var(--night-3); outline: none; }
.banner-panel { width: min(900px, calc(100vw - 1.5rem)); }
.bd-head { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-bottom: 1rem; }
.bd-art { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-ui); background: var(--night-3); }
.bd-head .display { margin: .1rem 0 .3rem; }
.bd-when { font-weight: 700; color: var(--muted); margin: .4rem 0 0; }
.bd-when.on { color: var(--teal); }
.bd-odds { width: 100%; }
.bd-odds td, .bd-odds th { text-align: center; }
.bd-rules { margin: .6rem 0 0; padding-left: 1.1rem; font-size: var(--step--1); display: grid; gap: .25rem; }
.bd-group { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .4rem; font-size: var(--step-0); }
.bd-stands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.bd-stands a { display: grid; gap: .25rem; padding: .4rem; border-radius: 10px; background: var(--night); border: 2px solid var(--night-3); color: var(--paper);
  text-decoration: none; height: 100%; }
.bd-stands a:hover { border-color: var(--gold); }
.bd-stands img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: 6px; background: var(--paper-2); }
.bd-stands .rar-epic a { border-color: rgb(244 197 66 / .5); } .bd-stands .rar-legend a { border-color: rgb(214 36 110 / .6); }
.bd-stands .rar-mythic a { border-color: var(--teal); box-shadow: 0 0 10px rgb(43 179 168 / .4); }
.bd-stands .owned img { opacity: .8; }
.bd-name { font-size: .78rem; font-weight: 700; line-height: 1.2; }
.bd-tags { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
.bd-owned { color: var(--teal); }
@media (max-width: 640px) { .bd-head { grid-template-columns: 1fr; } .bd-stands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.banner.themed { border-color: var(--gold); background: linear-gradient(120deg, rgb(244 197 66 / .1), var(--night-2) 55%); }
.theme-art { display: grid; place-items: center; align-content: center; gap: .3rem; aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 40%, rgb(244 197 66 / .35), transparent 60%), linear-gradient(135deg, var(--violet), var(--magenta)); }
.theme-art span { font-size: 4.2rem; line-height: 1; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .45)); }
.theme-art small { font: 700 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); opacity: .85; }
.theme-tag { display: inline-block; vertical-align: middle; padding: .15rem .55rem; border-radius: 999px; background: var(--gold); color: var(--ink);
  font: 700 .7rem/1.4 var(--body); text-transform: uppercase; letter-spacing: .06em; }
.admin-force { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 1rem 0 0; padding: .6rem .9rem;
  border-radius: var(--radius-ui); border: 2px dashed var(--magenta); background: rgb(214 36 110 / .08); font-size: var(--step--1); }
.admin-force label { display: inline-flex; align-items: center; gap: .35rem; }
.admin-force select { font: inherit; color: var(--paper); background: var(--night-2); border: 1px solid var(--night-3); border-radius: 6px; padding: .3rem .4rem; }
.admin-force-tag { font-weight: 700; color: #FF8DB9; }
.rotation-note { margin: 1rem 0; padding: .7rem .9rem; border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--gold); }
.calendar { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.calendar > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; align-items: center; padding: .8rem 1rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.calendar > li.now { border-color: var(--gold); }
.cal-when strong { display: block; }
.cal-banners { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cal-banners li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cal-banners li strong, .cal-banners li small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-banners li small { font-size: .72rem; }
.cal-face { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--night-3); font-size: 1.3rem; }
.cal-face img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cal-banners li.theme .cal-face { background: linear-gradient(135deg, var(--violet), var(--magenta)); }
@media (max-width: 720px) {
  .calendar > li { grid-template-columns: 1fr; gap: .5rem; }
  .cal-banners { grid-template-columns: 1fr; }
}
.banner-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
table.odds { border-collapse: collapse; font-size: var(--step--1); }
table.odds th, table.odds td { padding: .25rem .7rem .25rem 0; text-align: left; font-variant-numeric: tabular-nums; }
table.odds thead th, table.odds tr:first-child th { color: var(--muted); }
@media (max-width: 700px) { .banner { grid-template-columns: 1fr; } }

.pull-batch { background: var(--night-2); border-radius: var(--radius-card); padding: 1.2rem; margin-bottom: 2rem; }
.pull-showcase {
  display: grid; grid-template-columns: 132px minmax(0, 1fr) 88px; align-items: center; gap: 1.2rem;
  max-width: 900px; margin: 0 auto 1.4rem; padding: .8rem 1rem;
  border: 1px solid var(--night-3); border-left: 4px solid var(--gold); background: var(--night);
  animation: pull-arrive .5s cubic-bezier(.2, .8, .2, 1) both;
}
.pull-avatar { width: 132px; height: 132px; object-fit: cover; border: 2px solid var(--gold); border-radius: var(--radius-ui); }
.pull-announcement .display { margin-bottom: .35rem; }
.pull-announcement p { margin-block: .2rem; }
.pull-tier { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 0 12px rgb(244 197 66 / .4)); animation: tier-arrive .7s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pull-arrive { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes tier-arrive { from { opacity: 0; transform: scale(.45) rotate(-18deg); } 70% { transform: scale(1.12) rotate(4deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
.pull-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sparks .meter i { background: linear-gradient(90deg, var(--gold), var(--magenta)); }
.spark-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .4rem 0 0; padding: .5rem .7rem; border-radius: var(--radius-ui); background: rgb(244 197 66 / .1); border: 1px solid var(--gold); }
.spark-pick select { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .25rem .4rem; }
.pull-again { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.2rem; }
.pull-again small { font-weight: 400; opacity: .8; margin-left: .3rem; }
.pull-free { margin-left: auto; font-size: var(--step--1); }
.pull-free.low { color: #FF8DB9; font-weight: 700; }
#autofuse-result:empty { display: none; }
.pull-grid .card.reveal { animation-delay: calc(var(--d, 0) * 120ms); }
.slot[style] .card.reveal { animation-delay: calc(var(--d, 0) * 120ms); }
.where { margin: 0; font-size: var(--step--1); text-align: center; }
@media (max-width: 620px) {
  /* phones: avatar and title side by side, the tier badge after them, the line below at full width (three columns
     left the text a 160px sliver) */
  .pull-batch { padding: .8rem; }
  .pull-showcase { grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-areas: "av title tier" "text text text";
    gap: .45rem .7rem; padding: .65rem .7rem; }
  .pull-announcement { display: contents; }
  .pull-announcement .menace { display: none; }
  .pull-avatar { grid-area: av; width: 60px; height: 60px; }
  .pull-announcement .display { grid-area: title; margin: 0; }
  .pull-announcement .display.sm { font-size: 1.2rem; line-height: 1.15; }
  .pull-announcement p.muted { grid-area: text; margin: 0; font-size: var(--step--1); }
  .pull-tier { grid-area: tier; width: 48px; height: 48px; }
}

input[type=text] { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .4rem .6rem; }
.tabs small { opacity: .7; }

.quests { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.quests li { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1rem; background: var(--night-2); border-radius: var(--radius-ui); border: 2px solid var(--night-3); }
.quests li.ready { border-color: var(--gold); }
.quests li.done { opacity: .6; }
.quests h3 { margin: 0; font-size: var(--step-0); }
.quests p { margin: .1rem 0 .4rem; font-size: var(--step--1); }
.quests .bar { width: 100%; max-width: 320px; }

.tier { color: var(--muted); font-weight: 400; margin-right: .3rem; }
.admin-target { display: grid; gap: .8rem; }
.admin-counts { padding-bottom: .8rem; border-bottom: 1px solid var(--night-3); }
.admin-audit { list-style: none; padding: 0; margin: 0; }
.admin-audit li { display: grid; grid-template-columns: minmax(135px, auto) 1fr 1fr 1fr; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid var(--night-3); font-size: var(--step--1); }
.admin-audit time, .admin-audit span { color: var(--muted); }
.admin-search { align-items: end; }
.admin-search input { width: min(100%, 24rem); }
.admin-grant { margin-top: 1rem; }
.admin-supporter { margin-top: 1rem; }
.battle-tabs { border-bottom: 1px solid var(--night-3); padding-bottom: .65rem; }
.story-cta {
  display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; text-decoration: none; color: var(--paper);
  border-radius: var(--radius-card); border: 2px solid var(--gold); background: linear-gradient(110deg, rgb(244 197 66 / .16), transparent 65%), var(--night-2);
  box-shadow: 0 0 0 0 rgb(244 197 66 / .4); animation: cta-glow 2.4s ease-in-out infinite;
}
.story-cta:hover { color: var(--paper); transform: translateY(-1px); }
.story-cta > span:nth-child(2) { display: grid; gap: .15rem; flex: 1; min-width: 0; }
.story-cta small { color: var(--gold); font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.story-cta strong { font: 400 var(--step-1)/1.2 var(--display); }
.story-cta .muted { font-size: var(--step--1); }
.story-cta-icon { font-size: 2rem; }
@keyframes cta-glow { 50% { box-shadow: 0 0 22px 0 rgb(244 197 66 / .35); } }
@media (max-width: 620px) { .story-cta { flex-wrap: wrap; } .story-cta .btn { width: 100%; text-align: center; } }
.battle-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem 0; border-bottom: 1px solid var(--night-3); }
.battle-panel > div { max-width: 62ch; }
.battle-panel h2 { margin-bottom: .35rem; }
.battle-panel p { margin-block: .25rem; }
.battle-panel > form { margin: 0; }
.dungeon-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.5rem; align-items: start; }
.dungeon-controls { padding: 1rem; border-left: 2px solid var(--night-3); display: grid; gap: .6rem; align-content: start; }
.dungeon-controls .kicker { margin: .4rem 0 0; }
.dungeon-stairs { display: grid; gap: .5rem; }
.dungeon-stairs .btn { width: 100%; }
.dungeon-bag { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.dungeon-team li { width: 70px; font-size: .7rem; }
.dungeon-last { padding: 1rem 0; }
.move-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(2, 48px); gap: 5px; justify-content: center; margin-block: 1rem; }
.move-pad form:first-child { grid-column: 2; }
.move-pad form:nth-child(2) { grid-column: 1; grid-row: 2; }
.move-pad form:nth-child(3) { grid-column: 2; grid-row: 2; }
.move-pad form:nth-child(4) { grid-column: 3; grid-row: 2; }
.move-button { width: 48px; height: 48px; border: 1px solid var(--gold-deep); background: var(--night-3); color: var(--gold); font: 700 1.3rem var(--body); cursor: pointer; }
.move-button:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.move-button:disabled { opacity: .3; cursor: not-allowed; }
.dungeon-start { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 1.5rem; border-block: 1px solid var(--night-3); }
.dungeon-start h2, .dungeon-start p { margin-top: 0; }
@media (max-width: 760px) { .dungeon-layout { grid-template-columns: 1fr; } .dungeon-controls { border-left: 0; border-top: 2px solid var(--night-3); } }

.social-panel { margin: 1.2rem 0 2rem; padding: 1.2rem 0; border-block: 1px solid var(--night-3); }
.social-panel > .h2 { margin-bottom: .9rem; }
.social-heading, .own-shop-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.social-heading p, .own-shop-row p { margin: .2rem 0; }
.social-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; align-items: end; }
.social-form label, .listing-form label { display: grid; gap: .3rem; color: var(--muted); font-size: var(--step--1); font-weight: 700; }
.social-form input, .listing-form input { width: 100%; min-width: 0; }
.social-list, .member-list { list-style: none; padding: 0; margin: .8rem 0 0; }
.social-list li, .member-list li { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--night-3); }
.social-list li > :first-child, .member-list li > :last-child { min-width: 0; }
.social-list li > span, .social-list li > div > span { color: var(--muted); font-size: var(--step--1); }
.social-list li > form { margin-left: auto; }
.social-list a { color: var(--paper); }
.social-list strong { display: block; }
.gang-standings .rank, .member-list .rank { min-width: 4.5rem; color: var(--gold); font-weight: 700; }
.gang-standings b { margin-left: auto; white-space: nowrap; }
.member-list { max-width: 520px; }
.invite-form { margin-top: 1rem; }
.invite-form input { max-width: 15rem; }
.listing-form { gap: .8rem; align-items: end; }
.listing-form select { min-width: 12rem; }
.market-inventory { margin-top: .8rem; }
/* Tower: a stack of floors, the current one glowing, upcoming enemies previewed */
.tower-page .player-bar > div:first-child, .rush .player-bar > div:first-child { flex: 1 1 420px; max-width: 72ch; }
.tower-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1.2rem; }
.tower-stack { list-style: none; margin: 0; padding: 0 1rem; display: grid; gap: 0; position: relative;
  background: linear-gradient(90deg, transparent 0 .6rem, var(--night-3) .6rem calc(.6rem + 3px), transparent 0) ,
              linear-gradient(270deg, transparent 0 .6rem, var(--night-3) .6rem calc(.6rem + 3px), transparent 0); }
.tower-cap { text-align: center; font: 400 var(--step-3)/1 var(--display); color: var(--violet); padding: .4rem 0 .6rem;
  background: linear-gradient(transparent, rgb(122 63 184 / .15)); -webkit-mask-image: linear-gradient(transparent, #000 60%); }
.tower-base { text-align: center; padding: .5rem; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; border-top: 3px solid var(--night-3); }
.tower-floor {
  position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; grid-template-areas: "num foes meta" "num reward reward" "num team team";
  align-items: center; gap: .3rem .8rem; padding: .55rem .7rem; margin: 0 0 4px;
  border-radius: 6px; background: var(--night-2); border: 2px solid var(--night-3);
}
.tower-floor.ahead { opacity: .82; }
.tower-floor.ahead:first-of-type, .tower-floor.ahead:nth-of-type(2) { opacity: .5; }
.tower-floor.cleared { opacity: .55; border-color: rgb(43 179 168 / .5); }
.tower-floor.current { border-color: var(--gold); background: linear-gradient(90deg, rgb(244 197 66 / .18), var(--night-2) 70%);
  box-shadow: 0 0 0 3px rgb(244 197 66 / .2), 0 0 26px rgb(244 197 66 / .2); transform: scale(1.02); z-index: 1; }
.tower-floor.boss { border-style: double; border-width: 4px; }
.tower-floor.boss.ahead { border-color: var(--magenta); }
.tower-floor-num { grid-area: num; display: grid; justify-items: center; line-height: 1; }
.tower-floor-num small { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tower-floor-num strong { font: 400 var(--step-2)/1 var(--display); }
.tower-floor-num em { font-style: normal; font-size: .65rem; font-weight: 700; margin-top: .2rem; color: var(--gold); }
.tower-floor.boss .tower-floor-num em { color: #FF8DB9; }
.tower-foes { grid-area: foes; list-style: none; margin: 0; padding: 0; display: flex; gap: .35rem; }
.tower-foes img { width: 44px; height: 44px; object-fit: cover; object-position: center top; border-radius: 6px; border: 2px solid var(--night-3); background: var(--night-3); }
.tower-foes .rar-rare img { border-color: var(--violet); }
.tower-foes .rar-epic img { border-color: var(--gold-deep); }
.tower-foes .rar-legend img, .tower-foes .rar-mythic img { border-color: var(--magenta); }
.tower-floor.boss .tower-foes li:first-child img { width: 54px; height: 54px; }
.tower-floor-meta { grid-area: meta; display: grid; justify-items: end; gap: .2rem; font-size: .75rem; color: var(--muted); text-align: right; }
.tower-tag { padding: .05rem .45rem; border-radius: 999px; font-weight: 700; font-size: .68rem; }
.tower-tag.here { background: var(--gold); color: var(--ink); }
.tower-tag.done { color: var(--teal); }
.tower-reward { grid-area: reward; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .72rem; }
.tower-reward-label { font-weight: 700; color: var(--gold); margin-right: .15rem; }
.tower-reward.paid { opacity: .6; }
.tower-reward.paid .tower-reward-label { color: var(--teal); }
.tower-chip { display: inline-flex; align-items: center; gap: .25em; padding: .05rem .5rem; border-radius: 999px;
  background: var(--night-3); font-weight: 700; white-space: nowrap; }
.tower-chip .emoji { width: 1.1em; height: 1.1em; }
.tower-chip.dust { color: #9FD8FF; }
.tower-chip.stand-xp { color: #7DF0A8; }
.tower-chip.item { color: var(--gold); }
.tower-chip.arrow { color: #FF8DB9; background: rgb(214 36 110 / .2); }
.tower-milestones { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tower-milestones li { display: grid; gap: .25rem; padding: .45rem .6rem; border-radius: 6px; background: var(--night-3); font-size: .78rem; }
.tower-milestones li span { display: flex; flex-wrap: wrap; gap: .25rem; }
.tower-milestones .tower-chip { background: var(--night-2); }
.tower-milestones li.boss { box-shadow: inset 3px 0 0 var(--magenta); }
.tower-climbers { grid-area: team; list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; }
.tower-climbers img { width: 30px; height: 30px; object-fit: cover; object-position: center top; border-radius: 50%; border: 2px solid var(--gold); }
.tower-climbers .down img { filter: grayscale(1); opacity: .45; border-color: var(--night-3); }
.tower-side { display: grid; gap: 1rem; position: sticky; top: 80px; }
.tower-panel { padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); display: grid; gap: .6rem; }
.tower-panel:first-child { border-color: var(--gold); }
.tower-panel .h2, .tower-panel .kicker, .tower-panel p { margin: 0; }
.tower-panel form { margin: 0; }
.tower-team li { width: 96px; }
@media (max-width: 860px) {
  .tower-layout { grid-template-columns: 1fr; }
  .tower-side { position: static; order: -1; }
  .tower-stack { padding: 0 .3rem; }
  .tower-floor { grid-template-columns: 3.2rem minmax(0, 1fr); grid-template-areas: "num foes" "num meta" "num reward" "num team"; }
  .tower-floor-meta { justify-items: start; text-align: left; }
  .tower-foes img { width: 38px; height: 38px; }
}
@media (max-width: 560px) {
  .social-list li { align-items: flex-start; flex-wrap: wrap; }
  .social-list li > form { margin-left: 0; }
  .gang-standings b { margin-left: 0; }
  .listing-form { align-items: stretch; flex-direction: column; }
  .admin-audit li { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- wiki ---------- */
.wiki { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.wiki-nav { position: sticky; top: 76px; display: grid; gap: 1px; max-height: calc(100vh - 96px); overflow-y: auto; }
.wiki-nav a { padding: .4rem .7rem; border-radius: var(--radius-ui); color: var(--muted); font-size: .92rem; font-weight: 500; text-decoration: none; border-left: 3px solid transparent; }
.wiki-nav a:hover { color: var(--paper); background: var(--night-2); }
.wiki-nav a[aria-current] { color: var(--gold); font-weight: 700; background: var(--night-2); border-left-color: var(--gold); border-radius: 0 var(--radius-ui) var(--radius-ui) 0; }
.wiki-nav-home { margin-bottom: .3rem; }
.wiki-nav-group { margin: .9rem 0 .2rem .7rem; color: var(--gold); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wiki-body { min-width: 0; max-width: 820px; }
.wiki-head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--night-3); }
.wiki-head .display { margin-bottom: .6rem; }
.wiki-head p:last-child { margin-bottom: 0; }
.wiki-h2 { margin: 2rem 0 .6rem; font: 400 var(--step-1)/1.2 var(--display); color: var(--paper); }
.wiki-note { margin-top: 1.5rem; font-size: var(--step--1); }
.wiki-next { margin-top: 2rem; }
.wiki-list { padding-left: 1.2rem; }
.wiki-list li { margin-bottom: .3rem; }
.wiki-body code { padding: .05rem .35rem; border-radius: 4px; background: var(--night-2); font-size: .9em; }

.wiki-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.wiki-feature-card {
  display: grid; gap: .2rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-card);
  background: linear-gradient(140deg, var(--night-3), var(--night-2)); border: 2px solid var(--gold);
  color: var(--muted); text-decoration: none; box-shadow: 4px 4px 0 var(--magenta); transition: transform .12s, box-shadow .12s;
}
.wiki-feature-card:hover { color: var(--paper); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--magenta); }
.wiki-feature-card strong { color: var(--paper); font: 400 var(--step-1)/1.2 var(--display); }
.wiki-feature-icon { font-size: 1.4rem; letter-spacing: .15em; }
.wiki-group-title { margin: 1.6rem 0 .5rem; color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wiki-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.wiki-topics a { display: grid; gap: .1rem; height: 100%; padding: .8rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); text-decoration: none; color: var(--muted); font-size: var(--step--1); }
.wiki-topics a:hover { border-color: var(--gold); color: var(--paper); }
.wiki-topics strong { color: var(--paper); font-size: var(--step-0); }

.wiki-table-wrap { overflow-x: auto; }
.wiki-table { border-collapse: collapse; min-width: 300px; font-variant-numeric: tabular-nums; }
.wiki-table th, .wiki-table td { padding: .45rem 1.2rem .45rem 0; border-bottom: 1px solid var(--night-3); text-align: left; }
.wiki-table thead th { color: var(--muted); font-size: var(--step--1); }

/* Over Heaven: the rule list on a fight card and the team's resonances */
.oh-rules { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .35rem; }
.oh-rules li { padding: .4rem .6rem; border-left: 3px solid var(--part, var(--gold, currentColor)); background: var(--night-2, transparent); }
.oh-team { margin-top: 1rem; }
.wiki-defs { display: grid; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.wiki-defs li { display: grid; grid-template-columns: 2rem 9rem minmax(0, 1fr); align-items: baseline; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--night-3); }
.wiki-defs li > span:last-child { color: var(--muted); }
.def-icon { text-align: center; }
.wiki-defs.effects li.neg strong { color: #FF8DB9; }
.wiki-defs.effects li.pos strong { color: #7FE3D9; }
.rank-ladder { display: grid; gap: .3rem; list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: rank; }
.rank-ladder li { display: flex; justify-content: space-between; padding: .55rem .9rem; border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--violet); }
.rank-ladder li:nth-last-child(-n+3) { border-left-color: var(--gold); }
.rank-ladder span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* explorers (terrains, synergies) */
.explorer-tools { position: sticky; top: 60px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin: 0 -.5rem 1rem; padding: .6rem .5rem; background: rgb(28 15 46 / .92); backdrop-filter: blur(6px); }
.filter-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-chip { padding: .35rem .8rem; border: 2px solid var(--night-3); border-radius: 999px; background: transparent; color: var(--paper); font: 700 .85rem/1.3 var(--body); white-space: nowrap; cursor: pointer; }
.filter-chip:hover { border-color: var(--gold); }
.filter-chip[aria-pressed=true] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.explorer-search input, .explorer-search select { width: 100%; max-width: 360px; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .45rem .7rem; }
.explorer-finds { display: flex; flex-wrap: wrap; gap: .5rem; }
.explorer-finds .explorer-search { flex: 1 1 220px; max-width: 360px; }
.explorer-list { display: grid; gap: .9rem; }
.explorer-card { scroll-margin-top: 170px; padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); border-top: 4px solid var(--accent, var(--violet)); }
.explorer-card[hidden], .explorer-empty[hidden] { display: none; }
.terrain-ocean { --accent: #3BA7E0; } .terrain-desert { --accent: #E3A93A; } .terrain-frozen { --accent: #BFE7F5; }
.terrain-mirror { --accent: #C6B3F0; } .terrain-nature { --accent: #5FC46A; } .terrain-gravity { --accent: var(--magenta); }
.terrain-default { --accent: var(--muted); }
.explorer-card-head { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .4rem; }
.explorer-card-head h2 { margin: 0; font: 400 var(--step-1)/1.2 var(--display); }
.explorer-card-head p { margin: .15rem 0 0; color: var(--muted); font-size: var(--step--1); }
.explorer-card-head p.terrain-rule { color: var(--paper); }
.explorer-icon { font-size: 1.9rem; line-height: 1; flex: none; }
.explorer-label { margin: .9rem 0 .35rem; color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.explorer-label .muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.stand-chips { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.stand-chips a { display: inline-block; padding: .3rem .65rem; border-radius: 999px; background: var(--night-3); color: var(--paper); font-size: .85rem; font-weight: 700; text-decoration: none; }
.stand-chips a:hover { background: var(--violet); }
.stand-chips .muted { font-weight: 500; font-size: .75rem; }
.bonus-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .1rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.bonus-rows li { display: flex; justify-content: space-between; gap: .6rem; padding: .35rem .2rem; border-bottom: 1px dashed var(--night-3); font-size: .9rem; }
.bonus-rows a { color: var(--paper); text-decoration: none; font-weight: 700; }
.bonus-rows a:hover { color: var(--gold); }
.bonus-rows span { color: #7FE3D9; text-align: right; font-variant-numeric: tabular-nums; }
.is-match, .stand-chips a.is-match { outline: 2px solid var(--gold); outline-offset: 1px; border-radius: 6px; }
.stand-chips a.is-match { border-radius: 999px; }
.synergy-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .45rem; list-style: none; margin: .6rem 0 0; padding: 0; }
.synergy-members li { padding: .55rem .7rem; border-radius: var(--radius-ui); background: rgb(28 15 46 / .55); border: 1px solid var(--night-3); }
.synergy-members li.is-active { border-color: rgb(244 197 66 / .45); }
.synergy-members a { color: var(--paper); font-weight: 700; text-decoration: none; }
.synergy-members a:hover { color: var(--gold); }
.synergy-members p { margin: .25rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.syn-on, .syn-off { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 4px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.syn-on { background: var(--gold); color: var(--ink); }
.syn-off { background: var(--night-3); color: var(--muted); }

/* stand page: terrain & synergy facts */
.stand-wiki { display: grid; gap: .45rem; list-style: none; margin: 0 0 1.2rem; padding: 0; }
.stand-wiki li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .4rem; }
.stand-wiki small { display: block; }

@media (max-width: 1023px) {
  .wiki { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Topics become a swipeable chip row under the header. */
  .wiki-nav {
    position: static; display: flex; gap: .35rem; max-height: none; overflow-x: auto; overflow-y: hidden;
    margin: 0 calc(-1 * (100vw - 100%) / 2) 1rem; padding: .2rem calc((100vw - 100%) / 2) .6rem;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .wiki-nav::-webkit-scrollbar { display: none; }
  .wiki-nav a { flex: none; padding: .4rem .8rem; border: 2px solid var(--night-3); border-radius: 999px; font-size: .85rem; font-weight: 700; scroll-snap-align: start; }
  .wiki-nav a[aria-current] { background: var(--gold); color: var(--ink); border: 2px solid var(--gold); border-radius: 999px; }
  .wiki-nav-group { display: none; }
  .explorer-tools { top: 50px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.5rem; padding-inline: .5rem; }
  .filter-row::-webkit-scrollbar { display: none; }
  .explorer-search input, .explorer-search select { max-width: none; }
  .explorer-finds .explorer-search { max-width: none; }
}
@media (max-width: 600px) {
  .page.wiki { margin-top: 1rem; }
  .wiki-head .display { font-size: 1.9rem; }
  .explorer-card { padding: .85rem .8rem .9rem; }
  .bonus-rows, .synergy-members { grid-template-columns: 1fr; }
  .wiki-defs li { grid-template-columns: 1.8rem minmax(0, 1fr); row-gap: .1rem; }
  .wiki-defs li > span:last-child { grid-column: 2; }
}

/* ---------- auth ---------- */
.auth-page { display: grid; place-items: start center; }
.auth-card { width: min(440px, 100%); padding: 1.6rem 1.5rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); box-shadow: 6px 6px 0 var(--magenta); }
.auth-card .display { margin-bottom: 1rem; }
.btn.block { display: flex; justify-content: center; width: 100%; }
.auth-hint { margin: .5rem 0 0; font-size: var(--step--1); text-align: center; }
.auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; color: var(--muted); font-size: var(--step--1); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--night-3); }
.auth-form { display: grid; gap: .9rem; }
.auth-form label { display: grid; gap: .3rem; color: var(--muted); font-size: var(--step--1); font-weight: 700; }
.auth-form input:not([type=hidden]) { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .6rem .75rem; }
.auth-form small { font-weight: 500; }
.auth-switch { margin: 1.2rem 0 0; text-align: center; font-size: var(--step--1); color: var(--muted); }
.account-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin: 0 0 .8rem; }
.account-facts dt { color: var(--muted); font-size: var(--step--1); }
.account-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- gangs ---------- */
.gang-hero { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-bottom: 1rem; }
.gang-banner { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-card); border: 3px solid var(--gold); box-shadow: 5px 5px 0 var(--magenta); }
.gang-hero-body .display { margin-bottom: .3rem; }
.gang-hero-body .notice { margin: .6rem 0 1rem; }
.gang-tabs { position: sticky; top: 60px; z-index: 4; padding: .5rem 0; background: rgb(28 15 46 / .92); backdrop-filter: blur(6px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.gang-tabs a { flex: none; }
.gang-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 2rem; }
.gang-card { scroll-margin-top: 120px; }
#members, #guardians, #vault, #settings { scroll-margin-top: 120px; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .8rem 0; }
.versus > div { display: grid; padding: .7rem .9rem; border-radius: var(--radius-ui); background: var(--night-2); }
.versus span { color: var(--muted); font-size: var(--step--1); }
.versus strong { font: 400 var(--step-2)/1.1 var(--display); }
.versus small { color: var(--muted); }
.war-last { margin-top: .8rem; }
.meter { height: 12px; margin: .6rem 0 .4rem; border-radius: 999px; background: var(--night-3); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--gold)); border-radius: inherit; }
.roster { display: grid; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.roster li { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .7rem; padding: .5rem .2rem; border-bottom: 1px solid var(--night-3); }
.roster a { color: var(--paper); font-weight: 700; }
.rank-chip { min-width: 4.6rem; padding: .1rem .5rem; border-radius: 999px; background: var(--night-3); color: var(--muted); font-size: .72rem; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.rank-chip.r0 { background: var(--gold); color: var(--ink); }
.rank-chip.r1 { background: var(--violet); color: var(--paper); }
.roster-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-left: auto; }
.social-panel form.inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .3rem 0; }
.stash { display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.stash li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; padding: .4rem 0; border-bottom: 1px dashed var(--night-3); }
@media (max-width: 700px) {
  .gang-hero { grid-template-columns: 1fr; }
  .gang-banner { max-width: 180px; }
  .gang-tabs { top: 50px; }
  .roster-actions { margin-left: 0; width: 100%; }
}

/* ---------- card details ---------- */
.card-top { flex-wrap: nowrap; overflow: hidden; }
.card-top .tag { font-size: .72rem; line-height: 1; flex: none; }
.card-top .stars { margin-left: auto; flex: none; }
.card-window { position: relative; }
.charge-chip { position: absolute; right: 6px; bottom: 6px; font: 700 .68rem/1 var(--body); background: rgb(28 15 46 / .82); color: var(--gold); padding: .25rem .4rem; border-radius: 4px; }
.card-flags { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; }
.card-flags i { font-style: normal; font: 700 .68rem/1 var(--body); background: var(--ink); color: var(--paper); padding: .25rem .35rem; border-radius: 4px; }
.card-flags .dupe { background: var(--teal); color: var(--ink); }
.xp { height: 4px; margin-top: -3px; border-radius: 2px; background: rgb(28 15 46 / .18); overflow: hidden; }
.xp i { display: block; height: 100%; background: var(--teal); }
.card-stats.five { grid-template-columns: repeat(5, 1fr); }
.card-stats.five dt { font-size: .58rem; }
.card-stats.five dd { font-size: .74rem; }
.card.big .card-stats.five dd { font-size: 1rem; }
.card.small .card-stats.five dd { font-size: .68rem; }
.card.small .card-name { font-size: .82rem; min-height: 2.6em; padding: .3rem .25rem; }
.traits li.qA { background: var(--gold); border-color: var(--gold-deep); }
.traits li.qB { background: #D9C3FF; }
.traits li.qC { background: #CFF2EE; }
.traits li.qE, .traits li.qF { background: #F3C7D6; color: #6b1238; }
.card-items li { background: transparent; padding: 0; font-size: .85rem; }
.emoji { width: 1.15em; height: 1.15em; vertical-align: -.2em; object-fit: contain; }
.card.locked { box-shadow: 5px 6px 0 rgb(0 0 0 / .35), 0 0 0 2px var(--teal); }
.rar-tag { display: inline-block; padding: 0 .35rem; border-radius: 4px; font: 700 .7rem/1.5 var(--body); background: var(--night-3); color: var(--paper); }
.rar-tag.rare { background: var(--violet); }
.rar-tag.epic { background: var(--gold); color: var(--ink); }
.rar-tag.legend { background: var(--magenta); }
.rar-tag.mythic { background: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal)); color: var(--ink); }

/* ---------- collection ---------- */
.stand-slot { position: relative; cursor: pointer; border-radius: var(--radius-card); }
.stand-slot[hidden], .collection-empty[hidden] { display: none; }
.stand-slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.stand-slot:hover .card { transform: translateY(-3px); box-shadow: 7px 9px 0 rgb(0 0 0 / .35); }
.pick-box { display: none; position: absolute; top: 10px; left: 10px; z-index: 4; width: 22px; height: 22px; accent-color: var(--magenta); }
.selecting .pick-box { display: block; }
.selecting .stand-slot:has(.pick-box:checked) .card { outline: 3px solid var(--magenta); outline-offset: 2px; }
.storage-tools { position: sticky; top: 62px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 -.5rem 1rem; padding: .6rem .5rem; background: rgb(28 15 46 / .92); backdrop-filter: blur(6px); }
.storage-tools input[type=search] { flex: 1 1 200px; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .4rem .65rem; }
.storage-tools .filter-row { flex: 1 1 auto; }
.filter-chip small { opacity: .7; font-weight: 500; }
.sort-pick { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: var(--step--1); font-weight: 700; }
.bulk-bar { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--magenta); box-shadow: 0 8px 24px rgb(0 0 0 / .45); }
.bulk-bar[hidden] { display: none; }
.bulk-bar [data-selected-count] { font-weight: 700; margin-right: auto; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.shelf-head .autofuse { margin-left: auto; }
.storage-full { color: #FF8DB9; font-weight: 700; }
@media (min-width: 1024px) { .bulk-bar { bottom: 1rem; } .storage-tools { top: 70px; } }
.collection-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem .9rem; }
.timers { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 2rem; padding: 0; }
.timers li { display: grid; padding: .45rem .8rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); font-size: var(--step--1); }
.timers li span { color: var(--muted); }
.timers li a { font-weight: 700; text-decoration: none; align-self: center; }

/* stand panel dialog */
.stand-panel { width: min(960px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 1.4rem; overflow-y: auto; color: var(--text); background: var(--night-2); border: 2px solid var(--gold); border-radius: var(--radius-card); box-shadow: 8px 8px 0 var(--magenta); }
.stand-panel::backdrop { background: rgb(10 4 20 / .7); }
.panel-close { position: sticky; top: 0; float: right; z-index: 2; display: grid; place-items: center; }
.panel-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.6rem; }
.panel-card .card { max-width: 280px; }
.panel-body .display { margin-bottom: .3rem; }
.panel-body .h3 { margin: 1.1rem 0 .4rem; color: var(--gold); }
.panel-meta { color: var(--muted); margin: 0; }
.panel-stats { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.panel-stats th, .panel-stats td { padding: .25rem 1rem .25rem 0; text-align: left; border-bottom: 1px solid var(--night-3); }
.panel-stats thead th { color: var(--muted); font-size: var(--step--1); }
.panel-stats td:last-child { font-weight: 700; color: var(--paper); }
.panel-traits { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.panel-traits li { display: grid; padding: .4rem .7rem; border-radius: var(--radius-ui); background: var(--night-3); border-left: 4px solid var(--muted); }
.panel-traits li.qA { border-color: var(--gold); } .panel-traits li.qB { border-color: var(--violet); } .panel-traits li.qC { border-color: var(--teal); }
.panel-traits li.qE, .panel-traits li.qF { border-color: var(--magenta); }
.panel-traits em { color: var(--muted); font-size: .75rem; font-style: normal; }
.panel-items { display: grid; gap: .3rem; list-style: none; margin: 0 0 .5rem; padding: 0; }
.panel-items li { display: flex; align-items: center; gap: .5rem; }
.panel-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
@media (max-width: 700px) {
  .stand-panel { inset: auto 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; border-width: 2px 0 0; box-shadow: none; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .panel-grid { grid-template-columns: 1fr; }
  .panel-card { display: flex; justify-content: center; }
  .panel-card .card { max-width: 230px; }
}

/* ---------- items ---------- */
.item-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.item-tools input { flex: 1 1 200px; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .4rem .65rem; }
[data-item-section][hidden], [data-item-name][hidden] { display: none; }
.item-tile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem .9rem; align-items: start; padding: .9rem 1rem; background: var(--night-2); border-radius: var(--radius-ui); border: 2px solid var(--night-3); }
.item-tile.arrow, .item-tile.ready { border-color: var(--gold-deep); }
.item-tile > .item-info:first-child { grid-column: 1 / -1; }
.item-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--night-3); font-size: 1.6rem; }
.item-icon .emoji { width: 32px; height: 32px; }
.item-info h3 { margin: 0; font-size: var(--step-0); }
.item-info p { margin: .15rem 0 0; font-size: var(--step--1); }
.item-tile .count { color: var(--gold); font-size: .85rem; }
.item-bonus { color: #7FE3D9; font-weight: 700; }
/* item sets (app/game/gear.py): the set an item belongs to, and the bonus a stand's pieces light up */
.item-set { margin: .2rem 0 0; color: var(--muted); font-size: var(--step--1); }
.item-set.on { color: var(--gold); }
.item-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.item-actions form.inline select { max-width: 11rem; }
.have { color: #7FE3D9; } .need { color: #FF8DB9; }
.equipped-title { margin-top: 1.5rem; }
.equipped { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.equipped li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .5rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); }
.equipped img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--paper-2); }
.equipped-item { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 999px; background: var(--night-3); font-size: var(--step--1); }
.equipped-item .link { text-decoration: none; padding: 0 .2rem; }

/* ---------- trades ---------- */
.trade { margin: 0 0 1rem; padding: 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.trade-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; margin: .6rem 0; }
.trade-sides h3 { margin: 0 0 .3rem; color: var(--gold); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.trade-arrow { align-self: center; font-size: 1.6rem; color: var(--muted); }
.trade-goods { display: grid; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.trade-actions { display: flex; gap: .5rem; }
.trade-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1.2rem; margin-top: 1rem; }
.trade-columns fieldset { min-width: 0; border: 2px solid var(--night-3); border-radius: var(--radius-card); padding: .8rem 1rem 1rem; }
.trade-columns legend { padding: 0 .4rem; font: 400 var(--step-1)/1.2 var(--display); color: var(--gold); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .35rem; max-height: 340px; overflow-y: auto; padding-right: .2rem; }
.pick { display: grid; grid-template-columns: auto 36px minmax(0, 1fr); align-items: center; gap: .45rem; padding: .35rem .45rem; border-radius: var(--radius-ui); background: var(--night-2); cursor: pointer; border: 2px solid transparent; }
.pick:has(input:checked) { border-color: var(--gold); background: var(--night-3); }
.pick img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.pick > span { display: grid; min-width: 0; font-size: .8rem; line-height: 1.25; }
.pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-pick { display: grid; gap: .3rem; }
.item-pick label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--step--1); }
.frag { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; font-weight: 700; }
.frag input { width: 9rem; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .3rem .5rem; }
.trade-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
@media (max-width: 600px) { .trade-sides { grid-template-columns: 1fr; } .trade-arrow { transform: rotate(90deg); justify-self: center; } }

/* ---------- story & achievements ---------- */
/* Story: current stage card + journey map */
.story-progress { min-width: 180px; font-size: var(--step--1); color: var(--muted); }
.story-progress strong { font: 400 var(--step-2)/1 var(--display); color: var(--gold); }
.story-progress .meter { height: 6px; margin-top: .3rem; }
.story-stage {
  --part: var(--gold);
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.4rem;
  border-radius: var(--radius-card); border: 2px solid var(--night-3); border-left: 6px solid var(--part);
  background: linear-gradient(120deg, color-mix(in srgb, var(--part) 14%, transparent), transparent 60%), var(--night-2);
}
.story-stage.boss { border-color: var(--part); box-shadow: 0 0 0 3px color-mix(in srgb, var(--part) 25%, transparent); }
.story-stage.done { display: block; }
.story-stage .h2 { margin: .1rem 0 .6rem; }
.story-intro { margin: 0 0 .7rem; color: var(--paper-2); font-style: italic; }
.story-text { margin: 0 0 .9rem; font-size: 1.05rem; line-height: 1.55; }
.story-reward { color: var(--gold); font-weight: 700; margin: 0 0 1rem; }
.story-foes > p { margin: 0 0 .5rem; font-size: var(--step--1); }
.story-foes ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.story-foes a { display: grid; gap: .2rem; text-decoration: none; color: var(--paper); text-align: center; font-size: var(--step--1); font-weight: 700; }
.story-foes img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--radius-ui); border: 3px solid var(--night-3); background: var(--night-3); }
.story-foes .rar-rare img { border-color: var(--violet); }
.story-foes .rar-epic img { border-color: var(--gold-deep); }
.story-foes .rar-legend img, .story-foes .rar-mythic img { border-color: var(--magenta); }
.story-foes small { color: var(--muted); font-weight: 400; }
.story-map-title { margin: 2rem 0 .6rem; }
.story-map { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.story-part { --part: var(--gold); padding: .8rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--part); }
.story-part header { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.story-part header small { color: var(--part); font-weight: 700; }
.story-part header .muted { margin-left: auto; font-size: var(--step--1); }
.story-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.story-nodes .node { display: grid; justify-items: center; text-align: center; gap: .2rem; font-size: .75rem; color: var(--muted); }
.node-dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-weight: 700; background: var(--night-3); color: var(--muted); border: 2px solid transparent; }
.node.cleared .node-dot { background: var(--part); color: var(--ink); }
.node.current .node-dot { border-color: var(--gold); color: var(--gold); animation: target-pulse 1.4s ease-in-out infinite; }
.node.current .node-label { color: var(--paper); font-weight: 700; }
.node.boss .node-dot { width: 40px; height: 40px; font-size: 1.1rem; }
.node.locked { opacity: .55; }
.node-label { line-height: 1.2; }
.node-level { font-size: .68rem; opacity: .8; }
.node-replay { margin: .15rem 0 0; }
.node-replay .btn { padding: .1rem .45rem; font-size: .7rem; box-shadow: none; }
@media (max-width: 760px) {
  .story-stage { grid-template-columns: 1fr; }
  .story-nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .node-label { display: none; }
}
.meter.wide { width: min(280px, 100%); }
.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .7rem; list-style: none; margin: 0; padding: 0; }
.achievements li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .8rem; padding: .9rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.achievements li.unlocked { border-color: rgb(244 197 66 / .5); background: linear-gradient(135deg, rgb(244 197 66 / .12), var(--night-2)); }
.achievements li:not(.unlocked) .ach-emoji { filter: grayscale(1); opacity: .6; }
.ach-emoji { font-size: 2rem; line-height: 1; text-align: center; }
.achievements h2 { margin: 0; font-size: var(--step-0); }
.achievements p { margin: .15rem 0; font-size: var(--step--1); }
.ach-reward { color: var(--gold); }

/* ---------- banners & pull reveal ---------- */
.pity { display: grid; gap: .25rem; max-width: 360px; }
.pity span { font-weight: 700; }
.pity .meter { margin: 0; }
.banner-pool { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .6rem 0; padding: 0; }
.banner-pool a { position: relative; display: block; width: 58px; height: 58px; border-radius: 10px; overflow: hidden; border: 2px solid var(--night-3); background: var(--paper-2); }
.banner-pool img { width: 100%; height: 100%; object-fit: cover; }
.banner-pool span { position: absolute; left: 2px; bottom: 2px; padding: 0 .25rem; border-radius: 3px; background: var(--ink); color: var(--paper); font: 700 .58rem/1.4 var(--body); }
.banner-pool .rar-epic a { border-color: var(--gold); } .banner-pool .rar-legend a { border-color: var(--magenta); }
.banner-pool .rar-mythic a { border-color: var(--teal); box-shadow: 0 0 10px rgb(43 179 168 / .6); }
.banner-pool .more { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 10px; background: var(--night-3); color: var(--muted); font-weight: 700; }
.odds-box { margin: .4rem 0 .8rem; }
.odds-box summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: var(--step--1); }
.odds-box p { font-size: var(--step--1); margin: .4rem 0 0; }
.pull-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0 0 1rem; }
.flip { position: relative; perspective: 1000px; cursor: pointer; border-radius: var(--radius-card); --glow: #8F7DB3; }  /* one neutral back for every rarity */
.flip.flipped.rar-rare { --glow: var(--violet); } .flip.flipped.rar-epic { --glow: var(--gold); } .flip.flipped.rar-legend { --glow: var(--magenta); } .flip.flipped.rar-mythic { --glow: var(--teal); }
/* no spoilers: an unturned card shows a plain back, no NEW tag, no destination */
.slot:has(.flip:not(.flipped)) [data-where] { visibility: hidden; }
.pull-batch[data-cine-wait] .pull-grid { visibility: hidden; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .9, .3, 1.15); transform: rotateY(180deg); }
.flip.flipped .flip-inner { transform: rotateY(0); }
.flip-front, .flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back {
  position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-items: center; border-radius: var(--radius-card);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--glow) 55%, transparent), transparent 65%),
              repeating-linear-gradient(45deg, rgb(255 255 255 / .05) 0 6px, transparent 6px 12px), var(--night-2);
  border: 3px solid var(--glow); box-shadow: 0 0 22px color-mix(in srgb, var(--glow) 60%, transparent);
}
.flip-back span { font: 400 2.6rem/1 var(--display); color: var(--glow); text-shadow: 0 0 14px var(--glow); }
.flip:not(.flipped):hover .flip-back { transform: rotateY(180deg) translateY(-4px); }
/* Hovering (or focusing) a face-down card tints its glow toward its rarity, half way from the neutral back: a hint,
   never a spoiler. --glow is registered so the tint fades in instead of snapping. */
@property --glow { syntax: "<color>"; inherits: true; initial-value: #8F7DB3; }
.flip { transition: --glow .45s ease; }
.flip:not(.flipped):is(:hover, :focus-visible).rar-common { --glow: color-mix(in srgb, #DDE3EE 45%, #8F7DB3); }
.flip:not(.flipped):is(:hover, :focus-visible).rar-rare { --glow: color-mix(in srgb, #A77BFF 50%, #8F7DB3); }
.flip:not(.flipped):is(:hover, :focus-visible).rar-epic { --glow: color-mix(in srgb, #F4C542 50%, #8F7DB3); }
.flip:not(.flipped):is(:hover, :focus-visible).rar-legend { --glow: color-mix(in srgb, #FF4DA0 50%, #8F7DB3); }
.flip:not(.flipped):is(:hover, :focus-visible).rar-mythic { --glow: color-mix(in srgb, #5FF2E4 50%, #8F7DB3); }
/* SSR and better are the player's to turn over: Reveal all and Skip leave them face down, pulsing gold (the same for
   SSR, UR and LR: hovering one still tints it toward its own rarity) */
.flip.must-tap:not(.flipped) { --glow: #E9C25A; }
.flip.must-tap:not(.flipped) .flip-back { animation: must-tap 1.4s ease-in-out infinite; }
@keyframes must-tap { 50% { translate: 0 -4px; box-shadow: 0 0 34px var(--glow); } }
.pull-tap-hint { margin: 0 0 1rem; padding: .55rem .8rem; border-radius: var(--radius-ui); border: 2px dashed var(--gold);
  background: rgb(244 197 66 / .08); font-weight: 700; }
.pull-tap-hint[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .flip.must-tap .flip-back { animation: none; } }
.flip.flipped.rar-epic .card, .flip.flipped.rar-legend .card, .flip.flipped.rar-mythic .card { animation: pop .5s ease-out .45s both; }
@keyframes pop { 50% { transform: scale(1.06); } }
.new-tag { display: inline-block; margin-right: .35rem; padding: 0 .35rem; border-radius: 4px; background: var(--magenta); color: #fff; font: 700 .68rem/1.5 var(--body); }
.pull-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-weight: 700; }
.pull-history ol { display: grid; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.pull-history li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .45rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); font-size: var(--step--1); }
.pull-history time { color: var(--muted); font-variant-numeric: tabular-nums; }
.pull-history b { color: var(--gold); }
.rar-dots { display: flex; gap: 3px; }
.rar-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.rar-dots .rar-rare { background: var(--violet); } .rar-dots .rar-epic { background: var(--gold); }
.rar-dots .rar-legend { background: var(--magenta); } .rar-dots .rar-mythic { background: var(--teal); }

/* ---------- admin ---------- */
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.admin-search { display: flex; gap: .4rem; flex: 1 1 320px; max-width: 520px; }
.admin-search input { flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .4rem .65rem; }
.admin-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.admin-tabs a { flex: none; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: 1rem 0; }
.stat-tiles > div { display: grid; padding: .8rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.stat-tiles span { color: var(--muted); font-size: var(--step--1); }
.stat-tiles strong { font: 400 var(--step-2)/1.2 var(--display); font-variant-numeric: tabular-nums; }
.stat-tiles small { color: var(--muted); }
.admin-note { font-size: var(--step--1); }
.admin-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 2rem; }
.admin-list { display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.admin-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--night-3); }
.bars { display: grid; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: 3rem 1fr 5rem; align-items: center; gap: .6rem; }
.bars .meter { margin: 0; }
.bars b { text-align: right; font-variant-numeric: tabular-nums; }
.admin-player { display: flex; align-items: center; gap: 1rem; margin: .6rem 0; }
.admin-player .avatar { border-radius: 50%; }
.avatar-initial.big { width: 72px; height: 72px; font-size: 1.8rem; }
.admin-player .display { margin-bottom: .2rem; }
.admin-links { margin: .3rem 0 0; font-size: var(--step--1); }
.syn-off.ban { background: var(--magenta); color: #fff; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.admin .social-panel form.inline input[type=number] { width: 6.5rem; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.admin-table th, .admin-table td { padding: .45rem .6rem .45rem 0; border-bottom: 1px solid var(--night-3); text-align: left; vertical-align: middle; }
.admin-table th { color: var(--muted); }
.admin-table form.inline { margin: 0; }
.stats-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.stats-filter { font: inherit; color: var(--paper); background: var(--night-2); border: 2px solid var(--night-3); border-radius: var(--radius-ui); padding: .4rem .7rem; margin-bottom: .5rem; width: min(100%, 320px); }
.stats-table th[role=button] { cursor: pointer; user-select: none; white-space: nowrap; }
.stats-table th[data-dir=asc]::after { content: " B2"; }
.stats-table th[data-dir=desc]::after { content: " BC"; }
.stats-table td.thin { opacity: .45; }
.stats-table td.hot { color: var(--teal); font-weight: 700; }
.stats-table td.cold { color: #FF8DB9; font-weight: 700; }
.stats-table tr[hidden] { display: none; }
.admin-table input[type=number] { width: 4.5rem; }
.check { display: inline-flex; align-items: center; gap: .3rem; color: var(--muted); font-size: var(--step--1); }
.admin-audit li { display: grid; grid-template-columns: 9rem 9rem minmax(0, 1fr); gap: .2rem .8rem; padding: .35rem 0; border-bottom: 1px solid var(--night-3); font-size: var(--step--1); }
.admin-audit li > span:last-child { grid-column: 2 / -1; }
.raw-save { max-height: 70vh; overflow: auto; padding: 1rem; border-radius: var(--radius-ui); background: #0f0819; color: #cfe; font-size: .78rem; line-height: 1.45; }
@media (max-width: 600px) { .admin-audit li { grid-template-columns: 1fr; } .admin-audit li > span:last-child { grid-column: auto; } .bars li { grid-template-columns: 2.6rem 1fr 4rem; } }
.admin input[type=number], .admin input[type=text], .social-panel input[type=number], .frag input { font: inherit; font-size: var(--step--1); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .3rem .5rem; }
@media (max-width: 600px) { .team-grid, .collection-grid, .pull-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .6rem; } .player-bar .figures { gap: 1rem 1.5rem; } }

/* ---------- touch screens ----------
   Tap targets of at least 44px and 16px form text (smaller text makes iOS zoom in on focus).
   Desktop keeps its compact sizes. */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
  .btn.small, .filter-chip, .tabs a, .log-toggle, .stand-chips a, .wiki-nav a, .timers a, .board .who,
  .wordmark, .node-replay .btn, .menu-item, .nav-menu a, .sheet-grid a, .bonus-rows a {
    min-height: 44px;
  }
  .btn.small, .filter-chip, .tabs a, .stand-chips a, .timers a, .bonus-rows a { display: inline-flex; align-items: center; justify-content: center; }
  .btn.small[hidden], .filter-chip[hidden], .tabs a[hidden], .stand-chips a[hidden], .timers a[hidden], .bonus-rows a[hidden] { display: none; }  /* hidden wins on phones too */
  .wiki-nav a { display: flex; align-items: center; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  .chips span { min-height: 44px; display: inline-flex; align-items: center; }
  .pick-box { width: 24px; height: 24px; }
}
@media (pointer: coarse) { .bonus-rows a, .stand-chips a { min-width: 44px; } }

/* Cinematic pull (app.js): one card at a time, a bigger show for SSR, UR and LR */
body.cine-open { overflow: hidden; }
.cine-auto { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); color: var(--muted); cursor: pointer; }
.cine { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; cursor: pointer; color: var(--paper);
  --c: #B3A3CF; --c2: #7A3FB8; user-select: none; -webkit-tap-highlight-color: transparent; }
.cine.r-SR { --c: #A77BFF; --c2: #5B2CA0; }
.cine.show:not(.charge):not(.revealed) { --c: #B3A3CF; --c2: #7A3FB8; }
.cine.r-SSR { --c: #F4C542; --c2: #C8931B; }
.cine.r-UR { --c: #FF4DA0; --c2: #9B1457; }
.cine.r-LR { --c: #5FF2E4; --c2: #F4C542; }
.cine-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c2) 35%, #120821) 0%, #0B0514 70%);
  transition: background .6s; }
.cine-rays { position: absolute; inset: -50%; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 30%, transparent) 0 6deg, transparent 6deg 18deg);
  animation: cine-spin 18s linear infinite; }
.cine-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cine-stage { position: relative; z-index: 2; perspective: 1400px; margin-bottom: 90px; }  /* room for the caption below */
.cine-card { position: relative; width: min(280px, 64vw, calc((100vh - 340px) / 1.68)); aspect-ratio: 5 / 8.4; transform-style: preserve-3d; transform: rotateY(180deg);
  transition: transform .7s cubic-bezier(.2, .9, .3, 1.15); }
.cine-card.enter { animation: cine-in .55s cubic-bezier(.2, .9, .3, 1.2) both; }
.cine-card.turned { transform: rotateY(0deg); }
.cine-face, .cine-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* the cloned card has 3D transforms of its own, which defeat backface-visibility: swap sides halfway through the turn */
.cine-face { opacity: 0; }
.cine-card.turned .cine-face { opacity: 1; transition: opacity 0s .35s; }
/* The turn is an animation of its own, which takes over from the entrance or the build-up wherever they are: a quick
   tap, or the UR / LR build-up filling forwards, used to keep the card on its back while its face showed (mirrored).
   Edge-on (90deg) lands exactly halfway (.35s), when the face swaps in (above); then a small overshoot settles it. */
.cine .cine-card.turned { animation: cine-turn .7s linear both !important; }
@keyframes cine-turn {
  0% { transform: rotateY(180deg); animation-timing-function: ease-in; }
  50% { transform: rotateY(90deg); animation-timing-function: ease-out; }
  82% { transform: rotateY(-10deg); animation-timing-function: ease-in-out; }
  100% { transform: rotateY(0deg); } }
.cine-card.turned .cine-back { opacity: 0; transition: opacity 0s .35s; }
.cine-face { display: grid; pointer-events: none; }  /* the card's own link would leave the page: a tap means "next" */
.cine-face .card { width: 100%; height: 100%; }
/* one card on screen at a time: the cinematic plays the full shiny / full art effects */
.cine-face .card.shiny { animation: holo 4s linear infinite; }
.cine-face .card.shiny .card-face::after { animation: shiny-sheen 6s linear infinite; }
.cine-face .card.fullart::after { animation: foil 4.5s ease-in-out infinite; }
.cine-back { transform: rotateY(180deg); border-radius: 22px; display: grid; place-items: center; border: 4px solid var(--c);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 25%, #1C0F2E), #1C0F2E 70%); box-shadow: 0 0 40px color-mix(in srgb, var(--c) 60%, transparent); }
.cine-back span { font: 400 6rem/1 var(--display); color: var(--c); text-shadow: 0 0 24px var(--c); }
.cine-menace, .cine-title { position: absolute; z-index: 3; margin: 0; pointer-events: none; font-family: var(--display); }
.cine-menace { top: 9%; right: 6%; font-size: clamp(1.6rem, 6vw, 3.2rem); color: var(--c); writing-mode: vertical-rl; opacity: 0;
  text-shadow: 3px 3px 0 #000; }
.cine-title { top: 3%; left: 50%; transform: translateX(-50%); font-size: clamp(2rem, 9vw, 5rem); color: var(--c); white-space: nowrap;
  -webkit-text-stroke: 2px #000; text-shadow: 5px 5px 0 #000, 0 0 30px var(--c); }
.cine-caption { position: absolute; z-index: 3; bottom: calc(64px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(560px, 92vw); text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .6rem; }
.cine.revealed .cine-caption { animation: cine-rise .5s ease-out both; }
.cine-caption strong { font: 400 clamp(1.4rem, 5vw, 2.2rem)/1.1 var(--display); text-shadow: 3px 3px 0 #000; }
.cine-caption small { flex-basis: 100%; color: var(--paper-2); font-size: var(--step--1); padding: .4rem .7rem; border-radius: 10px;
  background: rgb(11 5 20 / .72); text-shadow: 0 1px 2px #000; }
.cine-gif { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.cine-rar { padding: .15rem .6rem; border-radius: 999px; font: 700 .85rem/1.4 var(--body); background: var(--c); color: #120821; }
.cine-bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / .6)); }
.cine-count { font-weight: 700; font-variant-numeric: tabular-nums; }
.cine-hint { color: var(--muted); font-size: var(--step--1); }

/* SSR: gold rays, a shaking card, ゴゴゴ */
.cine.charge.r-SSR .cine-rays, .cine.charge.r-UR .cine-rays, .cine.charge.r-LR .cine-rays { opacity: 1; }
.cine.charge.r-SSR .cine-card { animation: cine-shake .12s linear infinite; }
.cine.charge .cine-menace { opacity: 1; animation: cine-menace 1s ease-in-out infinite; }
.cine.revealed.r-SSR .cine-flash { animation: cine-flash .5s ease-out; }
.cine.revealed.r-SSR .cine-title { animation: cine-stamp .45s cubic-bezier(.2, .9, .3, 1.6) both; }
/* SSR and up: once the build-up has played, the card stops shaking and waits for a tap, breathing */
.cine.ready.r-SSR .cine-card { animation: cine-await 1.6s ease-in-out infinite; }
@keyframes cine-await { 50% { scale: 1.035; } }
.cine.ready .cine-hint { color: var(--gold); font-weight: 700; animation: cine-menace 1.2s ease-in-out infinite; }
/* A UR or an LR charges exactly like an SSR (app.js look): its own show starts once it's face up.
   UR: the screen shakes, magenta rings */
.cine.revealed.r-UR { animation: cine-quake .1s linear 7; }
.cine.revealed.r-UR .cine-stage::before, .cine.revealed.r-LR .cine-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; border: 3px solid var(--c); transform: translate(-50%, -50%); animation: cine-ring .9s ease-out infinite; }
.cine.revealed.r-UR .cine-flash { background: var(--c); animation: cine-flash .7s ease-out; }
.cine.revealed.r-UR .cine-title { animation: cine-stamp .5s cubic-bezier(.2, .9, .3, 1.8) both, cine-pulse 1.2s .5s ease-in-out infinite; }
.cine.revealed.r-UR .cine-card { animation: cine-pop .6s ease-out; }
/* LR: time stops (the world goes negative for a blink), rainbow rays, LEGENDARY sweeping in */
.cine.revealed.r-LR .cine-bg { animation: cine-timestop 1.4s steps(2) 1; }
.cine.revealed.r-LR .cine-rays { opacity: 1; animation-duration: 6s;
  background: repeating-conic-gradient(from 0deg, #FF4DA0 0 5deg, #F4C542 5deg 10deg, #5FF2E4 10deg 15deg, transparent 15deg 22deg); }
.cine.revealed.r-LR .cine-menace { font-size: clamp(2.4rem, 9vw, 4.6rem); }
.cine.revealed.r-LR .cine-flash { animation: cine-flash 1.2s ease-out; }
.cine.revealed.r-LR .cine-title { font-size: clamp(2.4rem, 11vw, 6.5rem); animation: cine-sweep .9s cubic-bezier(.2, .9, .3, 1.2) both;
  background: linear-gradient(90deg, #FF4DA0, #F4C542, #5FF2E4, #FF4DA0); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 2px #000; text-shadow: none; filter: drop-shadow(5px 5px 0 #000); }
.cine.revealed.r-LR .cine-title { animation: cine-sweep .9s cubic-bezier(.2, .9, .3, 1.2) both, cine-rainbow 3s linear infinite; }
.cine.revealed.r-LR .cine-card { animation: cine-pop 1s ease-out; box-shadow: 0 0 80px #5FF2E4, 0 0 160px #FF4DA0; border-radius: 22px; }
.cine.revealed.r-LR .cine-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, #F4C542 0 3px, transparent 4px), radial-gradient(circle at 70% 20%, #5FF2E4 0 3px, transparent 4px),
              radial-gradient(circle at 40% 80%, #FF4DA0 0 3px, transparent 4px), radial-gradient(circle at 85% 70%, #F4C542 0 3px, transparent 4px);
  background-size: 180px 180px; animation: cine-confetti 2.5s linear infinite; }

@keyframes cine-spin { to { transform: rotate(360deg); } }
@keyframes cine-in { from { transform: rotateY(180deg) translateY(60vh) scale(.6); opacity: 0; } }
@keyframes cine-shake { 25% { translate: -3px 1px; } 75% { translate: 3px -1px; } }
@keyframes cine-quake { 25% { translate: -4px 2px; } 50% { translate: 3px -3px; } 75% { translate: 2px 3px; } }
@keyframes cine-ring { from { width: 10px; height: 10px; opacity: 1; } to { width: 140vmin; height: 140vmin; opacity: 0; } }
@keyframes cine-timestop { 50% { filter: invert(1) hue-rotate(180deg); } }
@keyframes cine-flash { from { opacity: .9; } to { opacity: 0; } }
@keyframes cine-stamp { from { transform: translateX(-50%) scale(3) rotate(-8deg); opacity: 0; } to { transform: translateX(-50%) scale(1) rotate(-4deg); opacity: 1; } }
@keyframes cine-pulse { 50% { transform: translateX(-50%) scale(1.08) rotate(-4deg); } }
@keyframes cine-sweep { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(-50%) skewX(0); } }
@keyframes cine-rainbow { to { background-position: 300% 0; } }
@keyframes cine-pop { 40% { transform: scale(1.12); } }
@keyframes cine-rise { from { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes cine-menace { 50% { transform: translateY(-6px) scale(1.06); } }
@keyframes cine-confetti { to { background-position: 0 180px; } }
@media (prefers-reduced-motion: reduce) {
  .cine *, .cine { animation: none !important; }
  .cine-card { transition: transform .2s; }
}

/* Summon (app.js): a slow, dim build-up before the cards. Light gathers and a silver Arrow descends and hovers;
   for SSR and above the core beats and turns gold (.t1); then the Arrow strikes and a soft portal opens. A UR or an
   LR summons exactly like an SSR (only its faint tells give it away). No flashes and no shaking. */
.summon { position: fixed; inset: 0; z-index: 81; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  --c: #C9D3E8; --c2: #2E3352; user-select: none; -webkit-tap-highlight-color: transparent; color: var(--paper); }
.summon.t1 { --c: #F4C542; --c2: #6E4A0C; }
.summon.impact.s-SR { --c: #A77BFF; --c2: #4A2486; }
.summon.out { opacity: 0; transition: opacity .45s ease; }
.sum-bg { position: absolute; inset: 0; animation: tour-fade .6s ease-out;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c2) 32%, #0B0514) 0%, #07030D 68%); transition: background .8s ease; }

/* the Arrow: a slow descent, a hover, then the strike */
.sum-arrow { position: absolute; left: 50%; top: 50%; width: 4px; height: 26vmin; margin: -32vmin 0 0 -2px; border-radius: 2px;
  background: linear-gradient(transparent, var(--c)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent);
  animation: sum-descend 1.5s cubic-bezier(.25, .1, .2, 1) both, sum-hover 1.6s ease-in-out 1.5s infinite; transition: background .6s, box-shadow .6s; }
.sum-arrow::after { content: ""; position: absolute; left: 50%; bottom: -12px; translate: -50% 0; border: 7px solid transparent;
  border-top: 13px solid var(--c); border-bottom: 0; filter: drop-shadow(0 0 4px var(--c)); transition: border-color .6s; }
.summon.impact .sum-arrow { animation: sum-strike .5s cubic-bezier(.6, 0, .9, .5) forwards; }

/* light gathering toward the centre while the Arrow comes down */
.sum-gather, .sum-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sum-gather i { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--c); opacity: 0;
  box-shadow: 0 0 6px var(--c); animation: sum-gather var(--t) ease-in var(--w) infinite; transition: background .6s; }
.summon.impact .sum-gather { opacity: 0; transition: opacity .4s; }

/* the core: a faint glow that breathes, then beats on each colour upgrade */
.sum-portal { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sum-portal::before { content: ""; position: absolute; width: 18vmin; height: 18vmin; translate: -50% -50%; border-radius: 50%; opacity: .35;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%); animation: sum-breathe 2.4s ease-in-out infinite;
  transition: opacity .6s, background .6s; }
.summon.pulse .sum-portal::before { animation: sum-beat .85s ease-out; }
.summon.impact .sum-portal::before { opacity: .6; width: 26vmin; height: 26vmin; animation: sum-breathe 2s ease-in-out infinite; }
.sum-portal i { position: absolute; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); }
.summon.pulse .sum-portal i:first-child { animation: sum-ring .85s ease-out; }
.summon.impact .sum-portal i { animation: sum-ring 1.8s cubic-bezier(.2, .6, .3, 1) forwards; }
.summon.impact .sum-portal i:nth-child(2) { animation-delay: .25s; }
.summon.impact .sum-portal i:nth-child(3) { animation-delay: .5s; }
.summon.s-R .sum-portal i:nth-child(n+2), .summon.s-SR .sum-portal i:nth-child(3) { display: none; }

/* after the strike: a light bloom of sparks drifting out */
.sum-sparks i { position: absolute; width: 2px; height: 10px; margin-left: -1px; border-radius: 2px; background: var(--c);
  box-shadow: 0 0 5px var(--c); opacity: 0; transform: rotate(var(--a)); animation: sum-spark var(--t) cubic-bezier(.2, .7, .3, 1) var(--w) forwards; }
.sum-sparks i.mote { width: 4px; height: 4px; border-radius: 50%; animation-name: sum-mote; }

/* SSR and up: slow, faint rays once the portal opens */
.sum-rays { position: absolute; inset: -50%; opacity: 0; transition: opacity 1.2s ease; animation: cine-spin 40s linear infinite;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 14%, transparent) 0 4deg, transparent 4deg 18deg); }
.summon.burst.s-SSR .sum-rays { opacity: .65; }

.sum-word { position: absolute; top: 12%; right: 8%; margin: 0; writing-mode: vertical-rl; opacity: 0; transition: opacity 1s ease;
  font: 400 clamp(1.4rem, 5vw, 2.6rem)/1 var(--display); color: var(--c); text-shadow: 2px 2px 0 #000; }
.summon.beat .sum-word { opacity: .7; animation: cine-menace 1.6s ease-in-out infinite; }
.sum-hint { position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom)); margin: 0; color: var(--muted); font-size: var(--step--1); opacity: .7; }

@keyframes sum-descend { from { transform: translateY(-60vh); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(0); } }
@keyframes sum-hover { 50% { transform: translateY(-1.2vmin); } }
@keyframes sum-strike { to { transform: translateY(8vmin) scaleY(.15); opacity: 0; } }
@keyframes sum-gather { from { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))); opacity: 0; } 30% { opacity: .7; }
  to { transform: rotate(var(--a)) translateY(-1vmin); opacity: 0; } }
@keyframes sum-breathe { 50% { scale: 1.1; opacity: .5; } }
@keyframes sum-beat { 0% { scale: 1; } 18% { scale: 1.45; opacity: .85; } 100% { scale: 1; opacity: .4; } }
@keyframes sum-ring { from { width: 10px; height: 10px; opacity: .7; } to { width: 56vmin; height: 56vmin; opacity: 0; } }
@keyframes sum-spark { from { transform: rotate(var(--a)) translateY(-2vmin); opacity: .9; }
  to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))); opacity: 0; } }
@keyframes sum-mote { from { transform: rotate(var(--a)) translateY(-3vmin); opacity: .8; } to { transform: rotate(var(--a)) translateY(calc(-.5 * var(--d))); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .summon, .summon * { animation: none !important; } }

/* UR and LR tells (app.js TELLS): before the card turns, a UR shows one and an LR two, picked at random, at a random
   moment and place. Faint and brief on purpose: they're easter eggs for sharp eyes, never an announcement. --h is
   the card's true colour (magenta for UR, cyan for LR). */
.tell { position: absolute; z-index: 2; margin: 0; pointer-events: none; }
.tell-menace { font: 400 clamp(1rem, 3.4vw, 1.7rem)/1 var(--display); color: var(--h); writing-mode: vertical-rl; text-shadow: 1px 1px 0 #000;
  opacity: 0; animation: tell-fade 1.9s ease-in-out forwards; }
@keyframes tell-fade { 30%, 60% { opacity: .22; } to { opacity: 0; translate: 0 -1.4vmin; } }
.tell-star { font-size: .8rem; line-height: 1; color: #FFD45E; text-shadow: 0 0 6px #FFD45E; opacity: 0; animation: tell-twinkle 1.1s ease-in-out forwards; }
@keyframes tell-twinkle { 45% { opacity: .55; scale: 1.35; } to { opacity: 0; scale: .5; } }
.tell-confetti { inset: 0; }
.tell-confetti i { position: absolute; top: -2vh; width: 5px; height: 8px; border-radius: 1px; opacity: 0; animation: tell-fall 2.8s linear forwards; }
@keyframes tell-fall { 12% { opacity: .38; } 80% { opacity: .25; } to { opacity: 0; transform: translateY(72vh) rotate(540deg); } }
.tell-ring { left: 50%; top: 50%; width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--h);
  opacity: 0; animation: tell-ring 1.7s ease-out forwards; }
@keyframes tell-ring { 12% { opacity: .3; } to { width: 72vmin; height: 72vmin; opacity: 0; } }
.tell-ladybug { left: -4%; bottom: 14%; font-size: .8rem; line-height: 1; opacity: .38; rotate: 80deg; animation: tell-crawl 3.4s linear forwards; }
@keyframes tell-crawl { 85% { opacity: .38; } to { left: 26%; translate: 0 -3vh; opacity: 0; } }
.tell-tbc { left: 3%; bottom: calc(3.4rem + env(safe-area-inset-bottom)); padding: .12rem .55rem .12rem 1.1rem; font: 700 .58rem/1.3 var(--body);
  letter-spacing: .05em; text-transform: uppercase; color: #3B2A12; background: #C9A35A; clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%);
  opacity: 0; animation: tell-tbc 2.2s ease-out forwards; }
@keyframes tell-tbc { from { translate: -14px 0; } 20%, 70% { opacity: .2; translate: 0 0; } to { opacity: 0; } }
.tell-bolt { top: -5%; width: 8vmin; height: 42vh; background: var(--h); clip-path: polygon(45% 0, 60% 0, 52% 38%, 68% 38%, 40% 100%, 48% 55%, 32% 55%);
  opacity: 0; animation: tell-bolt 1.1s ease-in-out forwards; }
@keyframes tell-bolt { 10% { opacity: .14; } 18% { opacity: .03; } 27% { opacity: .1; } 40%, to { opacity: 0; } }
.summon.tell-timestop .sum-bg, .cine.tell-timestop .cine-bg { animation: tell-timestop .5s ease-in-out; }
@keyframes tell-timestop { 50% { filter: saturate(.3) brightness(.85); } }
/* the Requiem Arrow: a little gold beetle on the shaft, and a violet tip */
.sum-arrow::before { content: ""; position: absolute; left: 50%; top: 56%; width: 6px; height: 8px; translate: -50% 0; border-radius: 50% 50% 45% 45%;
  background: #E8C15A; box-shadow: 0 0 4px #E8C15A, inset 0 -2px 0 #6E4A0C; opacity: 0; transition: opacity .9s ease; }
.summon.tell-requiem .sum-arrow::before { opacity: .75; }
.summon.tell-requiem .sum-arrow::after { border-top-color: #CDA8FF; }
/* the cinematic card's ？ flickers its true colour for a blink */
.cine.tell-glint .cine-back span { animation: tell-glint 1.4s ease-in-out; }
@keyframes tell-glint { 0%, 42%, 54%, 100% { color: var(--c); } 46%, 50% { color: color-mix(in srgb, var(--h) 55%, var(--c)); } }
@media (prefers-reduced-motion: reduce) { .tell { display: none; } }

/* Special descriptions: numbers that grow with the stand's stats vs fixed ones */
.sp-fixed { font-weight: 700; }
.sp-scales { font-weight: 700; color: var(--gold); border-bottom: 1px dotted currentColor; cursor: help; white-space: nowrap; }
.sp-calc { margin-left: .25em; padding: 0 .35em; border-radius: 999px; font-size: .85em; font-style: normal;
  font-variant-numeric: tabular-nums; background: rgb(244 197 66 / .18); }
.card .sp-scales { color: #8a5a00; }
.card .sp-calc { background: rgb(214 140 0 / .2); }
.card.fullart .sp-scales { color: var(--gold); }

/* Alternate Universe: locked chapters stay readable but dimmed */
.story-part.au-locked { opacity: .55; filter: saturate(.4); }
.story-part header a { color: inherit; }
.syn-bonus { margin: .2rem 0 0; color: var(--gold); font-size: var(--step--1); }

/* Auction house */
.auction-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; }
.auction-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.auction-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.auction-lot { display: grid; gap: .45rem; }
.auction-lot-info { display: grid; gap: .3rem; justify-items: start; font-size: var(--step--1); }
.auction-lot-info form { margin: 0; }
.auction-seller { margin: 0; color: var(--muted); }
.auction-price { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-weight: 700; color: var(--gold); }
.auction-price em { font-style: normal; color: var(--muted); }
.auction-side { display: grid; gap: 1rem; position: sticky; top: 80px; }
.auction-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.auction-mine li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: .5rem; align-items: center; font-size: var(--step--1); }
.auction-mine img { width: 40px; height: 40px; object-fit: cover; object-position: center top; border-radius: 6px; }
.auction-mine form { margin: 0; }
@media (max-width: 860px) {
  .auction-layout { grid-template-columns: 1fr; }
  .auction-side { position: static; order: -1; }
}

/* Crusaders' Journey: the road from Tokyo to Cairo is the page. A map with the travellers moving along it, their
   boarding passes, then the seven stops as tickets. Part 3's colours (page_part) tint it through --part / --part-2. */
.journey { --jr: var(--part-2, var(--gold)); --jr-2: var(--part, var(--violet)); }
.jr-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 1.5rem; align-items: center;
  margin-bottom: 1rem; padding: 1.3rem 1.5rem; border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse 60% 120% at 100% 100%, color-mix(in srgb, var(--jr) 35%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--jr-2) 45%, var(--night-2)), var(--night-2)); }
.jr-hero::before { content: ""; position: absolute; inset: auto -5% -38% 40%; height: 70%; z-index: -1; border-radius: 50% 50% 0 0;
  background: color-mix(in srgb, var(--jr) 18%, transparent); }  /* a dune on the horizon */
.jr-title h1 { margin: .1rem 0 .35rem; }
.jr-lede { margin: 0; max-width: 56ch; color: var(--paper-2); }
.jr-slots { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.jr-slots small { flex-basis: 100%; text-align: right; color: var(--muted); font-size: .75rem; }
.jr-slot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px dashed var(--night-3); background: rgb(28 15 46 / .5);
  color: var(--muted); font-size: 1.3rem; }
.jr-slot.on { border: 3px solid var(--jr); background: var(--night); }
.jr-slot.done { border-color: #4BD07A; box-shadow: 0 0 14px rgb(75 208 122 / .6); }
.jr-slot img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center top; }
.jr-slot i { font-style: normal; }
/* the map */
.jr-map { position: relative; margin-bottom: 1.4rem; padding: 3.6rem .5rem 1rem; border-radius: var(--radius-card); border: 2px solid var(--night-3);
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--jr) 18%, transparent) 1px, transparent 1.5px) 0 0 / 16px 16px, var(--night); overflow: hidden; }
.jr-stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.jr-stops::before { content: ""; position: absolute; top: 21px; left: 6.25%; right: 6.25%; height: 4px; border-radius: 2px;  /* the road, pin to pin */
  background: repeating-linear-gradient(90deg, var(--jr) 0 12px, transparent 12px 20px); opacity: .8; }
.jr-stop { position: relative; display: grid; justify-items: center; gap: .15rem; text-align: center; min-width: 0; }
.jr-pin { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); background: var(--night-2);
  font-size: 1.35rem; box-shadow: 0 0 0 2px var(--night-3); }
.jr-stop.home .jr-pin { background: var(--jr); }
.jr-stop.finale .jr-pin { background: var(--magenta); box-shadow: 0 0 0 2px var(--magenta), 0 0 18px rgb(214 36 110 / .55); }
.jr-stop b { font-size: .78rem; line-height: 1.15; overflow-wrap: anywhere; }
.jr-stop small { color: var(--muted); font-size: .68rem; }
/* a traveller: between the first pin and its stop's pin, as far as its trip has gone */
.jr-traveller { position: absolute; top: .55rem; left: calc(6.25% + .5rem + (87.5% - 1rem) * var(--stop) * var(--p)); translate: -50% 0; z-index: 1;
  display: grid; place-items: center; transition: left 1s linear; }
.jr-traveller img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid var(--jr); background: var(--night);
  box-shadow: 0 3px 0 var(--ink); animation: jr-bob 1.6s ease-in-out infinite; }
.jr-traveller::after { content: ""; width: 0; height: 0; border: 6px solid transparent; border-top-color: var(--jr); }
.jr-traveller.done img { border-color: #4BD07A; animation: none; }
@keyframes jr-bob { 50% { translate: 0 -3px; } }
/* boarding passes */
.journey-trips, .journey-plan { margin-bottom: 1.8rem; }
.jr-passes { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.jr-pass { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1rem;
  border-radius: var(--radius-card); background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--jr-2); }
.jr-pass.done { box-shadow: 4px 4px 0 #2E8B57, 0 0 22px rgb(75 208 122 / .35); }
.jr-pass-who { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.jr-pass-who img { flex: none; width: 60px; height: 60px; border-radius: 12px; object-fit: cover; object-position: center top; border: 2px solid var(--ink); background: var(--night); }
.jr-pass-who span { display: grid; min-width: 0; }
.jr-pass-who strong { font-size: .95rem; line-height: 1.2; overflow-wrap: anywhere; }
.jr-pass-who small, .jr-pass-eta { color: #5A4A70; font-size: .8rem; }
.jr-pass-route { display: grid; gap: .35rem; min-width: 0; }
.jr-pass-leg { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.jr-pass-leg i { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); }
.jr-pass .meter { height: 10px; background: #D9CCEE; border-color: var(--ink); }
.jr-pass .meter i { background: var(--jr-2); }
.jr-pass.done .meter i { background: #2E8B57; }
.jr-pass p { margin: 0; }
.jr-pass .journey-log { font-style: italic; font-size: .82rem; }
.jr-pass .journey-loot { color: var(--ink); font-weight: 700; }
.jr-pass-act { align-self: stretch; display: grid; place-items: center; padding-left: 1rem; border-left: 2px dashed rgb(28 15 46 / .35); }
.jr-pass-act form { margin: 0; }
.jr-pass .btn.ghost { color: var(--ink); border-color: var(--ink); }
.jr-empty { margin: 0; padding: 1rem; border-radius: var(--radius-ui); border: 2px dashed var(--night-3); color: var(--muted); text-align: center; }
/* the plan: the traveller and its power, then the tickets */
.jr-plan-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: end; margin-bottom: 1rem; }
.journey-pick { margin: 0; }
.jr-power { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .8rem; align-items: center; margin: 0; padding: .7rem .9rem;
  border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.jr-power span { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.jr-power strong { grid-row: 2; font: 400 1.5rem/1.1 var(--display); color: var(--jr); }
.jr-power small { grid-row: 1 / span 2; grid-column: 2; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.jr-tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: .7rem; }
.jr-ticket { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); grid-template-rows: 1fr auto; overflow: hidden;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); transition: translate .15s, border-color .15s; }
.jr-ticket:hover { translate: 0 -2px; border-color: var(--jr-2); }
.jr-ticket-stub { grid-row: 1 / span 2; display: grid; place-content: center; justify-items: center; gap: .2rem;
  background: color-mix(in srgb, var(--jr-2) 40%, var(--night)); border-right: 2px dashed rgb(237 230 247 / .25); }
.jr-ticket-stub b { font-size: 2rem; line-height: 1; }
.jr-ticket-stub small { font: 400 .85rem/1 var(--display); color: var(--jr); }
.jr-ticket-body { padding: .7rem .8rem .2rem; min-width: 0; }
.jr-ticket h3 { margin: 0 0 .2rem; font-size: 1rem; }
.jr-ticket-blurb { margin: 0 0 .45rem; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.journey-est { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; font-size: .72rem; }
.jr-ticket form { grid-column: 2; justify-self: end; margin: 0; padding: .4rem .7rem .7rem; }
.jr-ticket.finale { grid-column: 1 / -1; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--magenta), 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 100% 0%, rgb(214 36 110 / .3), transparent 60%), var(--night-2); }
.jr-ticket.finale .jr-ticket-stub { background: var(--magenta); }
.jr-ticket.finale .jr-ticket-stub small { color: var(--paper); }
.jr-ticket.finale h3 { font: 400 1.25rem/1.2 var(--display); }
@media (max-width: 760px) {
  .jr-hero { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; }
  .jr-slots { justify-content: flex-start; } .jr-slots small { text-align: left; }
  .jr-map { padding: 3.2rem .25rem .8rem; }
  .jr-pin { width: 34px; height: 34px; font-size: 1rem; border-width: 2px; }
  .jr-stops::before { top: 15px; height: 3px; }
  .jr-stop b { display: none; }  /* eight names don't fit a phone: the pins and the hours say enough */
  .jr-stop.home b, .jr-stop.finale b { display: block; font-size: .62rem; }
  .jr-traveller img { width: 32px; height: 32px; border-width: 2px; }
  .jr-pass { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .jr-pass-act { padding: .6rem 0 0; border-left: 0; border-top: 2px dashed rgb(28 15 46 / .35); justify-items: start; }
  .jr-plan-head { grid-template-columns: minmax(0, 1fr); }
  .jr-ticket { grid-template-columns: 58px minmax(0, 1fr); }
  .jr-ticket-stub b { font-size: 1.5rem; }
  .jr-hero::before { inset: auto -20% -50% 45%; }
}
@media (prefers-reduced-motion: reduce) { .jr-traveller img { animation: none; } .jr-traveller, .jr-ticket { transition: none; } }

/* Gang hub at the top of the team page */
.gang-hub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center;
  margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: var(--radius-card);
  background: linear-gradient(110deg, rgb(214 36 110 / .22), var(--night-2) 55%); border: 2px solid var(--magenta); }
.gang-hub.recruit { grid-template-columns: minmax(0, 1fr) auto; background: linear-gradient(110deg, rgb(122 63 184 / .3), var(--night-2) 60%); border-color: var(--violet); }
.gang-hub-crest { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 2px solid var(--night-3); }
.gang-hub-main .h2 { margin: .1rem 0 .3rem; }
.gang-hub-main .h2 a { color: inherit; }
.gang-hub-main p { margin: 0 0 .3rem; }
.gang-hub-facts { list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: var(--step--1); color: var(--muted); }
.gang-hub-actions { display: grid; gap: .45rem; justify-items: stretch; text-align: center; }
.nav .nav-gang { color: #FF8DB9; }
@media (max-width: 720px) {
  .gang-hub, .gang-hub.recruit { grid-template-columns: 1fr; }
  .gang-hub-crest { display: none; }
}
.auction-lot.is-auction .card { box-shadow: 0 0 0 2px rgb(122 63 184 / .6); border-radius: var(--radius-card); }
.auction-lot.winning .card { box-shadow: 0 0 0 3px var(--gold); }
.auction-bid-line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.auction-winning { margin: 0; color: var(--gold); font-weight: 700; }
.auction-bid { display: flex; gap: .3rem; align-items: center; width: 100%; }
.auction-bid label { flex: 1; min-width: 0; }
.auction-bid input { width: 100%; }
.sale-mode { display: flex; gap: 1rem; border: 0; padding: 0; margin: 0; }
.sale-mode label { display: flex; align-items: center; gap: .35rem; font-weight: 700; }
.auction-sell [data-mode] { display: grid; gap: .6rem; }
.auction-sell[data-active="fixed"] [data-mode="bid"], .auction-sell[data-active="bid"] [data-mode="fixed"] { display: none; }
.auction-bid input[type=number] { font: inherit; font-size: var(--step--1); color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .3rem .5rem; }
.sale-mode label { white-space: nowrap; color: var(--paper); }
.auction-side .social-panel { margin: 0; padding: 1rem 0; }
.auction-side .social-panel:first-child { padding-top: 0; border-top: 0; }
.auction-sell { grid-template-columns: 1fr; }
@media (max-width: 560px) {
  .auction-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .6rem; }
  .auction-lot .card { min-width: 0; }
  .auction-bid { flex-wrap: wrap; }
  .auction-bid button { width: 100%; }
}

/* Wiki item catalog */
.item-catalog { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.item-card.kind-gear { --accent: var(--gold); }
.item-card.kind-usable { --accent: var(--magenta); }
.item-card.kind-material { --accent: var(--teal); }
.item-card.kind-corpse-part { --accent: #E3A93A; }
.item-card .explorer-icon .emoji { width: 1.6em; height: 1.6em; }
.item-card p { margin: .35rem 0; }
.item-card-bonus { font-weight: 700; color: #7FE3D9; }
.item-card-ability { color: var(--gold); }
.item-sources li { flex-wrap: wrap; }
.item-sources span { color: var(--muted); font-size: .82rem; }
.item-card-used { font-size: var(--step--1); }
@media (max-width: 560px) { .item-catalog { grid-template-columns: 1fr; } }

/* =====================================================================
   Seasons, live duels, history & replays, simulator, gang chat, events,
   Stand Dex, mastery, gifts and notification settings
   ===================================================================== */

/* Tabs that scroll sideways on phones instead of wrapping into a pile */
.scroll-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.scroll-tabs::-webkit-scrollbar { display: none; }
.scroll-tabs a { flex: none; white-space: nowrap; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .35rem; }
.tabs .tab-aside { margin-left: auto; border-style: dashed; color: var(--muted); }
.tabs .tab-aside:hover { color: var(--paper); border-color: var(--paper); }
/* battle tabs: PvP | practice and record */
.tabs .tab-split { width: 2px; align-self: stretch; margin-inline: .3rem; border-radius: 2px; background: var(--night-3); }
.tabs .tab-ranked:not([aria-current]) { border-color: rgb(244 197 66 / .55); }
.tabs a.locked { color: var(--muted); border-style: dashed; border-color: var(--night-3); }
.tabs a.locked[aria-current] { background: var(--night-3); color: var(--paper); border-color: var(--night-3); }
.tabs a.hot:not([aria-current]) { box-shadow: 0 0 0 0 rgb(244 197 66 / .4); animation: cta-glow 2.4s ease-in-out infinite; }
.ranked-locked .meter { max-width: 26rem; margin-top: .6rem; }

/* what the story just opened: one card per new mode, until it's visited */
.unlock-spot { margin: 0 0 1.4rem; }
.unlock-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.unlock-head .h3 { margin: 0; color: var(--gold); }
.unlock-head form { margin: 0; }
.unlock-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .8rem; }
.unlock-grid .unlock-card { margin: 0; padding: .85rem 1rem; }
.unlock-card strong { font-size: var(--step-0); }
.unlock-card .story-cta-icon { font-size: 1.6rem; }
.unlock-card.ranked { grid-column: 1 / -1; border-color: var(--magenta); background: linear-gradient(110deg, rgb(214 36 110 / .2), transparent 65%), var(--night-2); }
.unlock-card.ranked small { color: #FF8DB9; }
.story-unlock { margin: .2rem 0 .9rem; color: var(--muted); font-size: var(--step--1); }
.story-unlock strong { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .tabs a.hot { animation: none; } }
@media (max-width: 620px) { .unlock-card:not(.ranked) .muted { display: none; } .unlock-grid { gap: .5rem; } }
.live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #FF4D6D; box-shadow: 0 0 0 0 rgb(255 77 109 / .6); animation: live-ping 1.6s ease-out infinite; flex: none; }
@keyframes live-ping { 70% { box-shadow: 0 0 0 .45rem rgb(255 77 109 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 77 109 / 0); } }

/* ---------- Ranked seasons ---------- */
.season-claim, .gift-card, .event-ribbon {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; padding: .9rem 1.1rem;
  border-radius: var(--radius-card); border: 2px solid var(--gold);
  background: linear-gradient(110deg, rgb(244 197 66 / .16), transparent 70%), var(--night-2);
}
.season-claim > div, .gift-card > div { flex: 1; min-width: min(100%, 220px); }
.season-claim p, .gift-card p { margin: .15rem 0 0; }
.season-claim form, .gift-card form { margin: 0; }
.season-claim-icon, .gift-icon { font-size: 2rem; line-height: 1; }
.season-card { margin: 1.2rem 0 0; padding: 1.1rem 1.2rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1.5rem; align-items: center; }
.season-card .kicker { margin: 0; font-size: var(--step--1); }
.season-card .h2 { margin: 0; }
.season-card .h2 small { font: 700 var(--step-0) var(--body); margin-left: .3rem; }
.season-card p { margin: .1rem 0; }
.season-tier { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.season-badge { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; transform: rotate(-4deg);
  font: 400 1.5rem/1 var(--display); color: var(--ink); background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--magenta); }
.season-badge.sm { width: 30px; height: 30px; border-radius: 8px; font-size: .85rem; box-shadow: 2px 2px 0 var(--night); transform: none; }
.season-badge.tier-act-2 { background: #C9B6F0; }
.season-badge.tier-act-3 { background: var(--teal); }
.season-badge.tier-act-4 { background: var(--violet); color: var(--paper); }
.season-badge.tier-requiem { background: var(--gold); }
.season-badge.tier-love-train { background: var(--magenta); color: var(--paper); }
.season-badge.tier-over-heaven { background: linear-gradient(135deg, var(--gold), var(--magenta) 55%, var(--teal)); }
.season-figures { display: flex; gap: 1.4rem; margin: 0; }
.season-figures dt { color: var(--muted); font-size: .75rem; }
.season-figures dd { margin: 0; font: 400 var(--step-1)/1.1 var(--display); font-variant-numeric: tabular-nums; }
.season-qualify, .season-card .meter, .season-rewards { grid-column: 1 / -1; }
.season-card .meter { margin: 0; }
.season-qualify { font-size: var(--step--1); color: var(--gold); font-weight: 700; }
.season-qualify.done { color: #7FE3D9; }
.season-rewards summary { cursor: pointer; color: var(--muted); font-size: var(--step--1); font-weight: 700; padding: .3rem 0; }
.season-rewards ul { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .25rem; }
.season-rewards li { display: grid; grid-template-columns: 30px minmax(6.5rem, auto) 3.5rem 1fr; align-items: center; gap: .6rem; padding: .3rem .4rem; border-radius: var(--radius-ui); font-size: var(--step--1); }
.season-rewards li.current { background: rgb(244 197 66 / .12); outline: 1px solid rgb(244 197 66 / .4); }
.board-note { margin: 0 0 .6rem; color: var(--muted); font-size: var(--step--1); }
@media (max-width: 560px) {
  .season-card { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .season-figures { justify-content: space-between; padding: .5rem .2rem 0; border-top: 1px solid var(--night-3); }
  .season-badge { width: 48px; height: 48px; font-size: 1.25rem; }
  .season-rewards li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .season-rewards li > span:last-child { grid-column: 2 / -1; color: var(--muted); }
}

/* ---------- Live duels ---------- */
.watch-panel > p { margin-top: 0; }
.duel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.duel-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag go" "sides go"; gap: .4rem 1rem; align-items: center;
  padding: .8rem 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); color: var(--paper); text-decoration: none; }
.duel-link:hover { color: var(--paper); border-color: var(--gold); }
.duel-tag { grid-area: tag; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.duel-tag.ranked { color: var(--gold); }
.duel-sides { grid-area: sides; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .8rem; }
.duel-side { display: grid; gap: .25rem; min-width: 0; }
.duel-side:last-child { text-align: right; justify-items: end; }
.duel-side strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.duel-faces { display: flex; }
.duel-faces img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; background: var(--night-3); border: 2px solid var(--night-2); }
.duel-faces img + img { margin-left: -10px; }
.duel-hp { display: block; width: min(140px, 100%); height: 6px; border-radius: 999px; background: var(--night-3); overflow: hidden; }
.duel-hp i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), #7FE3D9); }
.duel-side:last-child .duel-hp i { margin-left: auto; background: linear-gradient(90deg, #FF8DB9, var(--magenta)); }
.duel-vs { font: 400 var(--step-0)/1 var(--display); color: var(--magenta); }
.duel-watch { grid-area: go; }
@media (max-width: 560px) {
  .duel-link { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tag" "sides" "go"; }
  .duel-watch { width: 100%; }
  .duel-faces img { width: 28px; height: 28px; }
}

/* ---------- History ---------- */
.history-record { margin: 0 0 .8rem; }
.history-list, .profile-battles { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.history-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .65rem .8rem;
  border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--muted); }
.history-row.win { border-left-color: var(--teal); }
.history-row.loss { border-left-color: var(--magenta); }
.history-result { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 400 1rem/1 var(--display); background: var(--night-3); color: var(--muted); flex: none; }
.history-result.sm { width: 26px; height: 26px; font-size: .75rem; }
.win > .history-result { background: var(--teal); color: var(--ink); }
.loss > .history-result { background: var(--magenta); color: var(--paper); }
.history-main { display: grid; gap: .1rem; min-width: 0; }
.history-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-main strong a { color: inherit; }
.history-main small { font-size: .75rem; }
.history-teams { display: flex; align-items: center; gap: 2px; margin-top: .2rem; flex-wrap: wrap; }
.history-teams img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--night-3); }
.history-teams em { font-style: normal; font-size: .7rem; color: var(--muted); margin: 0 .3rem; }
@media (max-width: 480px) {
  .history-row { grid-template-columns: auto minmax(0, 1fr); }
  .history-row > .btn, .history-row > .small-print { grid-column: 2; justify-self: start; }
}

/* ---------- Watching & replays ---------- */
.watch-head { align-items: flex-end; }
.watch-head .kicker { display: flex; align-items: center; gap: .45rem; }
.watch-title { overflow-wrap: anywhere; }
.watch-vs { font-size: .55em; color: var(--muted); text-shadow: none; vertical-align: middle; }
.watch-note { margin: 0; font-size: var(--step--1); }
.replay-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.replay-speed { display: inline-flex; gap: .3rem; }
.replay-speed .btn { min-width: 2.8rem; }
.replay-hint { margin: -.4rem 0 .8rem; }
.viewer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.viewer-actions .btn { min-width: 9rem; }
.fight-sim { text-align: left; }
.fight-sim:not(:empty) { margin-top: 1rem; }
.event-line { color: var(--gold); font-weight: 700; }
.fight.viewer .fighter { cursor: default; }
@media (max-width: 560px) {
  .watch-head { align-items: stretch; }
  .replay-tools { width: 100%; justify-content: space-between; }
  .viewer-actions .btn { flex: 1 1 100%; }
}

/* ---------- Team simulator ---------- */
.sim-lede { font-size: var(--step-0); color: var(--muted); }
.sim-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .9rem 1rem; align-items: end;
  padding: 1.1rem; margin: 0 0 1.2rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.sim-field { display: grid; gap: .3rem; min-width: 0; }
.sim-field[hidden] { display: none; }
.sim-field label { font-weight: 700; font-size: var(--step--1); color: var(--muted); }
.sim-field select, .sim-field input { width: 100%; min-width: 0; font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .55rem .65rem; }
.sim-go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sim-busy { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-weight: 700; }
.sim-busy.htmx-indicator:not(.htmx-request) { display: none; }
.sim-busy.htmx-request { opacity: 1; }
.sim-card { padding: 1.2rem; margin: 0 0 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--muted); animation: pull-arrive .35s ease-out both; }
.sim-card.good { border-color: var(--teal); --tone: var(--teal); }
.sim-card.mid { border-color: var(--gold); --tone: var(--gold); }
.sim-card.bad { border-color: var(--magenta); --tone: var(--magenta); }
.sim-top { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.sim-rate { --deg: calc(var(--rate) * 3.6deg); flex: none; display: grid; place-content: center; text-align: center; width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--night-2) 78%, transparent 79%), conic-gradient(var(--tone, var(--gold)) var(--deg), var(--night-3) 0); }
.sim-rate strong { font: 400 var(--step-3)/1 var(--display); }
.sim-rate small { color: var(--muted); font-size: .75rem; }
.sim-sum { flex: 1; min-width: min(100%, 240px); }
.sim-sum .kicker { margin: 0; overflow-wrap: anywhere; }
.sim-verdict { font: 400 var(--step-1)/1.25 var(--display); margin: .2rem 0 .6rem; }
.sim-figures { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; }
.sim-figures dt { color: var(--muted); font-size: .72rem; }
.sim-figures dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-card .h3 { margin: 1.1rem 0 .5rem; }
.sim-stands { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sim-stands li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .7rem; align-items: center; }
.sim-stands img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; background: var(--night-3); }
.sim-stand-body p { margin: 0; }
.sim-bar { height: 8px; margin: .3rem 0; border-radius: 999px; background: var(--night-3); overflow: hidden; }
.sim-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--magenta), var(--gold)); }
.sim-stand-meta { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .75rem; }
.pill.carry { margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .7rem; font-weight: 700; }
@media (max-width: 480px) { .sim-top { justify-content: center; text-align: center; } .sim-figures { justify-content: center; } .sim-go .btn { width: 100%; } }

/* ---------- Gang chat ---------- */
.chat-panel .h2 { margin-bottom: .6rem; }
.chat { border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--night-2); border: 1px solid var(--night-3); border-bottom: 0; }
.chat-list { list-style: none; margin: 0; padding: .7rem; display: flex; flex-direction: column; gap: .45rem;
  height: clamp(220px, 42vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.chat-empty { margin: 0; padding: 2.5rem 1rem; text-align: center; }
.chat-msg { position: relative; align-self: flex-start; max-width: min(85%, 560px); padding: .45rem .75rem .5rem; border-radius: 4px 14px 14px 14px; background: var(--night-3); }
.chat-msg.mine { align-self: flex-end; border-radius: 14px 4px 14px 14px; background: rgb(244 197 66 / .16); border: 1px solid rgb(244 197 66 / .3); }
.chat-meta { margin: 0; font-size: .72rem; display: flex; flex-wrap: wrap; gap: 0 .5rem; align-items: baseline; padding-right: 1.4rem; }
.chat-meta a { min-width: 0; overflow-wrap: anywhere; }
.chat-meta time { white-space: nowrap; }
.chat-meta a { color: var(--gold); font-weight: 700; text-decoration: none; }
.chat-msg.mine .chat-meta a { color: var(--paper); }
.chat-text { margin: .1rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-del { position: absolute; top: .2rem; right: .25rem; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: .75rem; opacity: .5; }
.chat-msg:hover .chat-del, .chat-del:focus-visible { opacity: 1; }
.chat-del:hover { background: rgb(214 36 110 / .25); color: var(--paper); }
.chat-error { margin: 0; padding: 0 .8rem; color: #FF8DB9; font-size: var(--step--1); font-weight: 700; }
.chat-error:empty { display: none; }
.chat-error:not(:empty) { padding-bottom: .5rem; }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem; border: 1px solid var(--night-3);
  border-radius: 0 0 var(--radius-card) var(--radius-card); background: var(--night); }
.chat-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 8rem; resize: vertical; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .55rem .7rem; field-sizing: content; }
.chat-form .btn { flex: none; min-height: 44px; }
@media (hover: none) { .chat-del { opacity: .8; width: 32px; height: 32px; } }

/* ---------- Events ---------- */
.event-ribbon { color: var(--paper); text-decoration: none; margin-top: 0; border-color: var(--magenta);
  background: linear-gradient(110deg, rgb(214 36 110 / .22), rgb(244 197 66 / .12) 60%, transparent), var(--night-2); }
.event-ribbon:hover { color: var(--paper); border-color: var(--gold); }
.event-ribbon-icon { font-size: 1.6rem; }
.event-ribbon-text { flex: 1; min-width: min(100%, 220px); display: grid; }
.event-ribbon-text strong { font: 400 var(--step-1)/1.2 var(--display); }
.event-ribbon-text span { font-size: var(--step--1); color: var(--muted); }
.event-ribbon-go { font-weight: 700; color: var(--gold); white-space: nowrap; }
.event-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding: 1.4rem; margin-bottom: 1.4rem; border-radius: var(--radius-card);
  border: 2px solid var(--magenta); background: radial-gradient(circle at 90% 10%, rgb(244 197 66 / .2), transparent 45%), linear-gradient(120deg, rgb(214 36 110 / .22), transparent 60%), var(--night-2); }
.event-hero.quiet { border-color: var(--night-3); background: var(--night-2); }
.event-hero-body { flex: 1; min-width: min(100%, 280px); }
.event-hero-body .kicker, .event-hero-body .display { margin-bottom: .4rem; }
.event-hero-body p { margin: .3rem 0; }
.event-rule { font-size: var(--step-1); }
.event-tokens { display: grid; justify-items: center; padding: .9rem 1.4rem; border-radius: var(--radius-card); background: var(--night); border: 2px solid var(--gold); box-shadow: 4px 4px 0 var(--magenta); }
.event-tokens span { font-size: 1.6rem; line-height: 1; }
.event-tokens strong { font: 400 var(--step-3)/1 var(--display); color: var(--gold); }
.event-tokens small { color: var(--muted); }
.event-stands { list-style: none; margin: .6rem 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.event-stands img { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: var(--night-2); border: 2px solid var(--night-3); }
.event-stands a:hover img { border-color: var(--gold); }
.event-stands .more { align-self: center; padding: 0 .5rem; }
.event-shop { list-style: none; margin: .6rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .5rem; }
.event-shop li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem .9rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.event-shop li > div { display: grid; min-width: 0; }
.event-shop small { font-size: .75rem; }
.event-shop form { margin: 0; flex: none; }
.event-shop .btn { min-width: 4.6rem; }
.event-shop li.sold-out { opacity: .55; }
.event-shop li.exclusive { border: 2px solid var(--gold); background: linear-gradient(110deg, rgb(244 197 66 / .12), transparent 70%), var(--night-2); }
.event-shop li.exclusive { grid-column: 1 / -1; }
.pill.event-only { display: inline-block; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--magenta); color: var(--paper); font-size: .68rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.event-ability { color: var(--paper); font-size: .8rem !important; line-height: 1.35; margin: .15rem 0; }
.event-form { max-width: 760px; }
.event-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .8rem; }
.event-form input[type=date], .event-form select { width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .45rem .6rem; }
@media (max-width: 560px) {
  .event-hero { padding: 1.1rem; }
  .event-tokens { width: 100%; grid-template-columns: auto auto auto; justify-content: center; align-items: baseline; gap: .5rem; }
  .event-ribbon-go { width: 100%; text-align: right; }
}

/* ---------- Stand Dex ---------- */
/* Stand Dex: see the sticker album block further down */

/* ---------- Mastery & titles ---------- */
.mastery-box { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.mastery-box.lv3 { border-color: var(--gold); }
.mastery-box.lv4 { border: 2px solid transparent; background: linear-gradient(var(--night-2), var(--night-2)) padding-box, linear-gradient(120deg, var(--gold), var(--magenta), var(--teal)) border-box; }
.mastery-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
.mastery-medal { font-size: 1.3rem; line-height: 1; }
.mastery-box .meter { margin: .45rem 0 .3rem; height: 8px; }
.mastery-stats { display: flex; flex-wrap: wrap; gap: .1rem 1rem; margin: 0; font-size: .75rem; }
.profile-title { margin: -.2rem 0 .1rem; color: var(--gold); font-weight: 700; letter-spacing: .02em; }
.profile-mastery { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.profile-mastery li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: var(--radius-ui); background: var(--night-2); }
.profile-mastery img { width: 40px; height: 40px; object-fit: contain; display: block; }
.profile-mastery span:nth-child(2) { display: grid; min-width: 0; }
.profile-mastery strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-mastery small { font-size: .72rem; }
.mastery-chip { font-size: 1.2rem; }
.profile-mastery li.lv4 { box-shadow: inset 0 0 0 2px var(--gold); }
.profile-battles li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: var(--radius-ui); background: var(--night-2); }
.pb-main { display: grid; min-width: 0; }
.pb-main small { font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-replay { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--night-3); color: var(--gold); text-decoration: none; }
.pb-replay:hover { background: var(--gold); color: var(--ink); }
.title-picker select { max-width: min(100%, 22rem); }

/* ---------- Gifts ---------- */
.gift-card { border-color: var(--magenta); }
.player-actions .gift-form { gap: .3rem; }
.gift-label { font-size: 1.1rem; }
.btn.small.gift-btn { padding-inline: .55rem; }
.pill.gifted { padding: .3rem .7rem; border-radius: 999px; background: var(--night-3); color: var(--muted); font-weight: 700; font-size: var(--step--1); }

@media (prefers-reduced-motion: reduce) {
  .live-dot, .sim-card { animation: none; }
}
@media (pointer: coarse) {
  .scroll-tabs a, .dex-card summary, .replay-speed .btn, .event-shop .btn, .gift-btn { min-height: 44px; }
  .pb-replay { width: 44px; height: 44px; }
}

/* Training ground */
.training-form { display: grid; gap: 1.2rem; }
.training-drills, .training-stands { border: 0; margin: 0; padding: 0; min-width: 0; }
.training-drills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .7rem; }
.training-drills legend, .training-stands legend { margin-bottom: .5rem; }
.training-drill { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); cursor: pointer; }
.training-drill:has(input:checked) { border-color: var(--gold); }
.training-drill > span { display: grid; gap: .15rem; min-width: 0; }
.training-stands ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .5rem; max-height: 460px; overflow-y: auto; }
.training-stands label { display: flex; gap: .6rem; align-items: center; padding: .45rem .6rem; border: 2px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night-2); cursor: pointer; }
.training-stands label:has(input:checked) { border-color: var(--teal); }
.training-stands label.maxed { opacity: .6; }
.training-stands img { border-radius: 6px; flex: none; object-fit: cover; }

/* Stand chips: one tile everywhere (the chips page, a stand's slots, the socket picker), coloured by tier */
.tier-common { --chip: #B8BCC8; } .tier-rare { --chip: #39D0C0; } .tier-epic { --chip: #B57BFF; } .tier-legendary { --chip: #F4C542; }
.chip-bag-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .8rem; }
.chip-bag-head h2 { margin: 0; }
.chip-counts { display: flex; gap: .7rem; margin: 0 auto 0 0; font-weight: 700; font-size: var(--step--1); }
.chip-counts span { color: var(--chip); }
.chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .7rem; margin-bottom: 1.6rem; }
.chip-tile { --chip: #B8BCC8; display: flex; flex-direction: column; gap: .45rem; min-width: 0; padding: .75rem .8rem;
  border: 2px solid color-mix(in srgb, var(--chip) 55%, transparent); border-radius: var(--radius-card);
  background: linear-gradient(160deg, color-mix(in srgb, var(--chip) 16%, var(--night-2)), var(--night-2) 70%); }
.chip-tile.tier-legendary { box-shadow: 0 0 0 1px rgb(244 197 66 / .25), 0 0 18px rgb(244 197 66 / .18); }
.chip-head { display: flex; align-items: center; gap: .5rem; margin: 0; min-width: 0; }
.chip-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; font-size: 1.05rem;
  background: color-mix(in srgb, var(--chip) 22%, var(--night)); }
.chip-syn { flex: 1; min-width: 0; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.chip-tier { flex: none; color: var(--chip); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.chip-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-lines li::before { content: "▸ "; color: var(--chip); }
.chip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: auto; }
.chip-fits { flex-basis: 100%; margin: 0; font-size: var(--step--1); }
.chip-tile.compact { padding: .55rem .65rem; gap: .35rem; }
.chip-tile.compact .chip-icon { width: 1.7rem; height: 1.7rem; font-size: .95rem; }
.chip-tile.compact .chip-tier-name { display: none; }
.chip-tile.compact .chip-lines { font-size: var(--step--1); }
.chip-tile.compact .chip-syn { font-size: .8rem; }
.chip-tile.compact .chip-head { align-items: flex-start; }
.chip-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: .5rem; margin: .4rem 0 .7rem; }
.chip-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 84px; padding: .5rem;
  border: 2px dashed var(--night-3); border-radius: var(--radius-card); color: var(--muted); font-size: var(--step--1); font-weight: 700; text-align: center; }
.chip-slot span { font-size: 1.2rem; }
.chip-slot.locked { border-style: solid; opacity: .55; }
.chip-picker { margin: 0 0 .6rem; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); }
.chip-picker summary { cursor: pointer; padding: .6rem .8rem; font-weight: 700; }
.chip-pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .5rem; padding: 0 .6rem .6rem; max-height: 360px; overflow-y: auto; }
.chip-worn { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.chip-worn li { display: flex; align-items: center; gap: .7rem; padding: .45rem .6rem; border-radius: var(--radius-ui); background: var(--night-2); }
.chip-worn img { flex: none; border-radius: 6px; object-fit: cover; }
.chip-worn-name { display: grid; min-width: 0; }
.chip-worn-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }
.chip-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; border-radius: 999px; white-space: nowrap;
  font-size: var(--step--1); font-weight: 700; color: var(--chip); border: 1px solid color-mix(in srgb, var(--chip) 60%, transparent);
  background: color-mix(in srgb, var(--chip) 12%, transparent); }

/* Compact owned cards (collection, team): one line of chrome above and on the art, one divider, one row of
   traits and items. Tags, the charge ring and the star shapes live on big cards and in the stand panel. */
.star-pill { margin-left: auto; flex: none; font: 700 .7rem/1 var(--body); padding: .2rem .4rem; border-radius: 999px;
  background: var(--magenta); color: #fff; letter-spacing: .02em; }
.card.compact .card-top { min-height: 1.35rem; }
.card.compact .card-flags { top: auto; bottom: 6px; right: 6px; }
.card.compact.fullart .card-flags { bottom: auto; top: 2.3rem; right: 10px; }
.card.compact .card-name { border-top: 0; padding-top: .3rem; min-height: 2.5em; }
.card.compact .xp { margin-top: 0; }
.card.compact .card-face { gap: 5px; }
.card.compact .traits { flex-wrap: nowrap; overflow: hidden; }
.card.compact .traits li.item { border: 0; background: none; padding: 0 .1rem; font-size: .8rem; line-height: 1.25; }
.card.compact .traits li.item .emoji { width: 1em; height: 1em; vertical-align: -.15em; }
.card.fullart.compact .traits li.item { background: none; }
.card.compact .card-stats div + div { border-left: 0; }
.card.compact .card-stats.five dt { font-size: .55rem; letter-spacing: .04em; opacity: .85; }
.card.compact .card-stats.five dd { font-size: .8rem; }
.card.compact.small .card-stats.five dd { font-size: .7rem; }

/* Inbox: web push card */
.push-card { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; margin: 0 0 1.6rem;
  padding: 1rem 1.1rem; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); }
.push-card h2 { margin: 0 0 .2rem; }
.push-card p { margin: 0; }
.push-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.push-energy { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); cursor: pointer; }

/* Co-op raid: lobby and party */
.coop-lobby { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; align-items: start; }
.coop-panel { display: grid; gap: .8rem; padding: 1rem 1.1rem; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); min-width: 0; }
.coop-panel h2 { margin: 0; }
.coop-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.coop-code strong { font: 400 2.2rem/1 var(--display); letter-spacing: .12em; color: var(--gold); cursor: copy; }
.coop-party { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.coop-party li { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border: 2px solid var(--night-3); border-radius: var(--radius-ui); }
.coop-party li.ready { border-color: color-mix(in srgb, var(--teal) 60%, transparent); }
.coop-party li.open { border-style: dashed; opacity: .7; }
.coop-party img, .coop-empty-art { flex: none; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.coop-empty-art { display: grid; place-items: center; background: var(--night); color: var(--muted); font-size: 1.4rem; font-weight: 700; }
.coop-who { display: grid; min-width: 0; }
.coop-start { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: .4rem 0 0; }
.coop-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.coop-row label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--step--1); }
.coop-stands { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .45rem; max-height: 520px; overflow-y: auto; }
.coop-stand { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .4rem .5rem; text-align: left; color: inherit; font: inherit;
  border: 2px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night); cursor: pointer; }
.coop-stand:hover, .coop-stand:focus-visible { border-color: var(--gold); }
.coop-stand.used { cursor: not-allowed; opacity: .45; filter: grayscale(.7); }
.coop-stand.picked { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 14%, var(--night)); }
.coop-stand img { flex: none; border-radius: 6px; object-fit: cover; }
.coop-stand span { display: grid; min-width: 0; }
.coop-create { display: grid; gap: .6rem; }
.coop-join { display: flex; gap: .5rem; }
.coop-join input { flex: 1; min-width: 0; font: 400 1.6rem/1 var(--display); letter-spacing: .15em; text-transform: uppercase; padding: .4rem .6rem; }
.coop-crew { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; }
.coop-crew img { border-radius: 8px; object-fit: cover; border: 2px solid var(--magenta); }
.fighter-owner { margin: -.15rem 0 .15rem; font-size: .7rem; font-weight: 700; color: var(--teal); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Admin events: what each modifier does */
.event-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .8rem; margin-bottom: 1rem; }
.event-help-card { padding: .9rem 1rem; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); }
.event-help-card h3 { margin: 0; }
.event-help-card > p { margin: .1rem 0 .5rem; font-size: var(--step--1); }
.event-help-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: var(--step--1); }
.event-shop-details { margin: 0 0 1.4rem; }
.event-shop-details summary { cursor: pointer; font-weight: 700; padding: .3rem 0; }
.event-preview { padding: .7rem .9rem; border-left: 4px solid var(--gold); border-radius: var(--radius-ui); background: rgb(244 197 66 / .08); }
.event-preview p { margin: 0; }
.event-preview p + p { margin-top: .3rem; }
[data-event-pick][hidden] { display: none; }

/* Admin: new players graph. Series colours validated on --night-2 (dataviz validator, dark mode). */
.signups { position: relative; --series-discord: #22A399; --series-web: #BF8A1F; }
.signups-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem 1rem; }
.signups-head h2 { margin: 0; }
.signups-head p { margin: .2rem 0 0; }
.signup-tiles { grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr)); }
.signup-tiles small.up { color: #7FE0B0; } .signup-tiles small.down { color: #FF9CB8; }
.chart-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0 0 .4rem; padding: 0; font-size: var(--step--1); color: var(--paper-2); }
.chart-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.chart-legend li[hidden] { display: none; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sw.discord { background: var(--series-discord); } .sw.web { background: var(--series-web); }
.sw.avg { height: 2px; width: 16px; border-radius: 1px; background: var(--paper-2); }
.signup-chart { width: 100%; min-height: 260px; }
.signup-chart svg { display: block; max-width: 100%; }
.signup-chart .grid { stroke: var(--night-3); stroke-width: 1; }
.signup-chart .base { stroke: var(--muted); stroke-width: 1; }
.signup-chart .tick { fill: var(--muted); font: 500 11px var(--body); font-variant-numeric: tabular-nums; }
.signup-chart .bar.discord { fill: var(--series-discord); } .signup-chart .bar.web { fill: var(--series-web); }
.signup-chart .avg { fill: none; stroke: var(--paper-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.signup-chart .hover-col { fill: rgb(237 230 247 / .07); }
.signup-chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: absolute; z-index: 5; display: grid; gap: .15rem; min-width: 150px; padding: .5rem .65rem; pointer-events: none;
  border: 1px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night); color: var(--paper); font-size: var(--step--1);
  box-shadow: 0 6px 18px rgb(0 0 0 / .4); }
.chart-tip span { display: flex; align-items: center; gap: .4rem; color: var(--paper-2); }
.chart-tip b { margin-left: auto; color: var(--paper); font-variant-numeric: tabular-nums; }
.signup-table { margin-top: .6rem; }
.signup-table summary { cursor: pointer; color: var(--muted); font-size: var(--step--1); }
.signup-table .admin-table-wrap { max-height: 320px; overflow-y: auto; }

.chart-tip[hidden] { display: none; }

/* Team planner */
.plan-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .8rem; margin: 1rem 0; }
.plan-slot { display: grid; gap: .6rem; min-width: 0; margin: 0; padding: .9rem 1rem; border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); }
.plan-slot > legend { padding: 0 .3rem; font: 400 var(--step-0) var(--display); color: var(--gold); }
.plan-slot select { width: 100%; min-width: 0; }
.plan-build { display: grid; gap: .55rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.plan-build[disabled] { opacity: .45; }
.plan-build[hidden] { display: none; }
.plan-level { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; align-items: center; font-weight: 700; font-size: var(--step--1); }
.plan-level output { justify-self: end; font: 400 var(--step-0) var(--display); color: var(--paper); }
.plan-level input { grid-column: 1 / -1; width: 100%; accent-color: var(--gold); }
.plan-row { display: grid; gap: .25rem; }
.plan-label, .plan-type { font-weight: 700; font-size: var(--step--1); }
.plan-type { display: grid; gap: .25rem; }
.plan-type small { font-weight: 500; }
.seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; min-width: 2.2rem; padding: .3rem .6rem; text-align: center; font-weight: 700; font-size: var(--step--1);
  border: 2px solid var(--night-3); border-radius: 999px; background: var(--night); }
.seg input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.plan-review { margin: 0 0 1.5rem; }
.plan-tiles { grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); }
.plan-stands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: .8rem; margin: .8rem 0 1.2rem; }
.plan-stand { display: grid; grid-template-columns: 120px 1fr; gap: .8rem; align-items: start; min-width: 0; padding: .8rem;
  border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night-2); }
.plan-card .card { max-width: 120px; }
.plan-body { display: grid; gap: .45rem; min-width: 0; }
.plan-meta { display: grid; margin: 0; }
.plan-stats { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.plan-stats th, .plan-stats td { padding: .2rem .3rem; text-align: right; border-bottom: 1px solid var(--night-3); }
.plan-stats th[scope=row], .plan-stats thead th:first-child { text-align: left; color: var(--muted); font-weight: 700; }
.plan-stats thead th { color: var(--muted); font-weight: 700; font-size: .72rem; }
.plan-gain { color: #7FE0B0; font-weight: 700; }
.plan-special { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.plan-special-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.plan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .8rem 1.4rem; }
.plan-facts h2 { margin: 0 0 .4rem; }
.plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.plan-list li { display: flex; gap: .55rem; align-items: flex-start; }
.plan-list li > span:last-child { display: grid; min-width: 0; }
.plan-list small { font-size: var(--step--1); }
@media (max-width: 480px) { .plan-stand { grid-template-columns: 1fr; } .plan-card { max-width: 140px; } }

/* Stand / item picker: a fixed-height trigger (the page never jumps when you pick) and a sheet of portrait tiles.
   Full screen on phones, a large centred panel on wider screens. */
.sp { min-width: 0; }
.sp-trigger { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 76px; padding: .55rem .75rem; text-align: left;
  color: var(--paper); font: inherit; cursor: pointer; border: 2px dashed var(--night-3); border-radius: var(--radius-card);
  background: var(--night); transition: border-color .12s, background .12s; }
.sp.is-set .sp-trigger { border-style: solid; }
.sp-trigger:hover, .sp-trigger:focus-visible { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--night)); outline: none; }
.sp-plus { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; font-size: 1.5rem;
  color: var(--gold); background: var(--night-2); }
.sp-placeholder { font-weight: 700; color: var(--paper-2); }
.sp-face { flex: none; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; border: 2px solid var(--night-3); background: var(--night-2); }
.sp-face.rare { border-color: var(--violet); } .sp-face.epic { border-color: var(--gold); }
.sp-face.legend { border-color: var(--magenta); } .sp-face.mythic { border-color: var(--teal); }
.sp-face img, .sp-chip img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.sp-text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.sp-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-text small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--step--1); }
.sp-change { flex: none; margin-left: auto; padding: .3rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  color: var(--ink); background: var(--gold); white-space: nowrap; }
.sp-chips { display: flex; gap: .4rem; flex-wrap: wrap; min-width: 0; flex: 1; }
.sp-chip { position: relative; display: grid; justify-items: center; gap: .15rem; width: 58px; font-size: .62rem; font-weight: 700; text-align: center; }
.sp-chip img, .sp-chip .sp-emoji { width: 46px; height: 46px; border-radius: 10px; border: 2px solid var(--night-3); background: var(--night-2); }
.sp-chip.rare img { border-color: var(--violet); } .sp-chip.epic img { border-color: var(--gold); }
.sp-chip.legend img { border-color: var(--magenta); } .sp-chip.mythic img { border-color: var(--teal); }
.sp-chip > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper-2); }
.sp-chip b { position: absolute; top: -4px; left: 2px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: .66rem; color: var(--ink); background: var(--gold); }
.sp-emoji { display: grid; place-items: center; width: 100%; height: 100%; font-size: 1.6rem; line-height: 1; }
.sp-items .sp-trigger { min-height: 64px; }
.sp-compact .sp-trigger { min-height: 64px; padding: .45rem .6rem; }
.sp-compact .sp-face, .sp-compact .sp-plus { width: 44px; height: 44px; }

.sp-dialog { width: min(980px, calc(100vw - 32px)); max-width: none; height: min(780px, calc(100vh - 48px)); max-height: none; padding: 0;
  color: var(--paper); border: 2px solid var(--night-3); border-radius: var(--radius-card); background: var(--night); }
.sp-dialog::backdrop { background: rgb(10 4 20 / .72); backdrop-filter: blur(3px); }
.sp-sheet { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; min-height: 0; }
.sp-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem .5rem; }
.sp-title { margin: 0; font: 400 var(--step-1) var(--display); }
.sp-count { color: var(--gold); font-weight: 700; font-size: var(--step--1); }
.sp-x { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--paper); background: var(--night-2);
  font-size: 1.1rem; cursor: pointer; }
.sp-tools { display: grid; gap: .5rem; padding: 0 1rem .7rem; border-bottom: 1px solid var(--night-3); }
.sp-search { width: 100%; min-height: 44px; font-size: 1rem; }
.sp-tabs, .sp-rar { display: flex; flex-wrap: wrap; gap: .35rem; }
.sp-tabs:empty, .sp-rar:empty { display: none; }
.sp-tabs small { opacity: .7; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .55rem; align-content: start;
  padding: .8rem 1rem 1rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.sp-tile { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .45rem .4rem .55rem; text-align: center; font: inherit;
  color: var(--paper); cursor: pointer; border: 2px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night-2);
  transition: transform .08s, border-color .1s; }
.sp-tile:hover:not(:disabled), .sp-tile:focus-visible { border-color: var(--gold); transform: translateY(-2px); outline: none; }
.sp-tile.rare { --edge: var(--violet); } .sp-tile.epic { --edge: var(--gold); } .sp-tile.legend { --edge: var(--magenta); } .sp-tile.mythic { --edge: var(--teal); }
.sp-tile-art { position: relative; width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--night);
  box-shadow: inset 0 0 0 2px var(--edge, var(--night-3)); }
.sp-tile-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.sp-tile-name { width: 100%; font-weight: 700; font-size: .8rem; line-height: 1.15; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.3em; }
.sp-tile small { color: var(--muted); font-size: .66rem; line-height: 1.3; }
.sp-tile.is-on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--night-2)); }
.sp-tile.is-off { opacity: .4; }
.sp-tile:disabled { cursor: not-allowed; }
.sp-mark { position: absolute; top: 5px; left: 5px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 .3rem;
  border-radius: 999px; font-size: .8rem; color: var(--ink); background: var(--gold); box-shadow: 0 2px 6px rgb(0 0 0 / .5); }
.sp-badge { position: absolute; top: 4px; right: 4px; font-style: normal; font-size: .8rem; filter: drop-shadow(0 1px 2px #000); }
.sp-badge.sp-taunt { top: auto; bottom: 4px; }
.sp-why { font-style: normal; font-size: .62rem; font-weight: 700; color: #FF9CB8; }
.sp-none .sp-tile-art { box-shadow: inset 0 0 0 2px var(--night-3); }
.sp-nothing { grid-column: 1 / -1; text-align: center; padding: 2rem 0; }
.sp-foot { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .7rem 1rem;
  border-top: 1px solid var(--night-3); background: var(--night-2); }
.sp-foot[hidden] { display: none; }
@media (max-width: 640px) {
  .sp-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .sp-grid { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: .45rem; padding: .7rem .75rem 1rem; }
  .sp-head, .sp-tools { padding-left: .75rem; padding-right: .75rem; }
}

/* Team planner, with the picker: equal columns and a fixed config area, so choosing a stand never resizes the page */
.plan-slot { align-content: start; }
.plan-config { display: grid; align-content: start; gap: .55rem; }
.plan-hint { margin: .2rem 0 0; font-size: var(--step--1); }
.plan-owned { display: grid; gap: .35rem; padding: .7rem .8rem; border-radius: var(--radius-ui); background: var(--night); }
.plan-owned p { margin: 0; }
.plan-owned-meta { font-weight: 700; }
.plan-owned-items { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: var(--step--1); color: var(--paper-2); }
.plan-owned-items .emoji { width: 1.1em; height: 1.1em; vertical-align: -.2em; }
.plan-build[hidden], .plan-owned[hidden], .plan-hint[hidden] { display: none; }
.plan-empty { display: grid; place-items: center; min-height: 260px; text-align: center; border: 2px dashed var(--night-3);
  border-radius: var(--radius-card); color: var(--muted); }
@media (min-width: 960px) {
  .plan-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the sleeker planner: each build folds behind a one-line summary; the review shows faces, not whole cards */
.mode-hero[data-mode="planner"] { --mode: #F4C542; --mode-2: #3AB4F2; }
.plan-slot > *, .plan-config > *, .plan-fold { min-width: 0; }  /* long names truncate instead of widening the column */
.plan-fold { border-radius: var(--radius-ui); background: var(--night); }
.plan-fold[hidden] { display: none; }
.plan-fold > summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .45rem .75rem; cursor: pointer; list-style: none;
  border-radius: var(--radius-ui); }
.plan-fold > summary::-webkit-details-marker { display: none; }
.plan-fold > summary:hover { background: color-mix(in srgb, var(--gold) 8%, transparent); }
.plan-fold-label { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan-fold-sum { flex: 1; min-width: 0; font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-fold-edit { flex: none; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: var(--ink); background: var(--gold); }
.plan-fold[open] .plan-fold-edit { background: var(--night-3); color: var(--paper); }
.plan-fold-edit::before { content: "Edit"; }
.plan-fold[open] .plan-fold-edit::before { content: "Done"; }
.plan-fold[open] > .plan-build { padding: .2rem .75rem .8rem; }
.plan-owned .small-print { display: none; }  /* the planner's header says it */
.plan-stand { grid-template-columns: 1fr !important; padding: .75rem .85rem; }
.plan-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .65rem; align-items: center; }
.plan-meta strong { align-self: end; }
.plan-meta small { align-self: start; }
.plan-face { grid-row: span 2; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; object-position: center 25%;
  border: 2px solid var(--night-3); background: var(--night); }
.plan-face.rar-rare { border-color: var(--violet); } .plan-face.rar-epic { border-color: var(--gold); }
.plan-face.rar-legend { border-color: var(--magenta); } .plan-face.rar-mythic { border-color: var(--teal); }
.plan-stats th, .plan-stats td { padding: .15rem .3rem; }

/* Co-op: nothing in a panel may widen it past the screen (the code box and its button used to) */
.coop-panel > * { min-width: 0; }
.coop-join { min-width: 0; }
.coop-join input { width: 100%; min-width: 0; font-size: 1.35rem; }
.coop-join .btn { flex: none; }
.coop-create .training-drill small { display: block; }

.nowrap { white-space: nowrap; }
@media (min-width: 1100px) { .plan-stands { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan-stand { grid-template-columns: 1fr; } .plan-card { max-width: 120px; } }

/* Team planner: suggestions for the last empty slot */
.plan-suggest { margin: 1.2rem 0; padding: 1rem 1.1rem; border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--night-3));
  border-radius: var(--radius-card); background: color-mix(in srgb, var(--gold) 5%, var(--night-2)); }
.plan-suggest > h2 { margin: 0 0 .2rem; }
.plan-suggest-h { margin: .8rem 0 .4rem; font-size: var(--step--1); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.plan-suggest-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .5rem; }
.plan-suggestion { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--radius-ui); background: var(--night); }
.plan-suggestion img { flex: none; border-radius: 10px; object-fit: cover; object-position: center 25%; }
.plan-suggestion-body { flex: 1; min-width: 0; }
.plan-suggestion-body p { margin: 0; }
.plan-gain-line { font-size: var(--step--1); color: var(--paper-2); }
.plan-gain-line b { color: #7FE0B0; }
.plan-suggestion .btn { flex: none; }
.plan-why { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 0; padding: 0; }
.plan-why li { padding: .1rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap;
  color: var(--paper-2); background: var(--night-2); border: 1px solid var(--night-3); }
.plan-suggestion { align-items: flex-start; }
.plan-suggestion .btn { align-self: center; }
.sp-missing .sp-trigger { border-color: #FF6B8E; border-style: solid; }
.sp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sp-inline .sp { flex: 1 1 240px; }
.sp-inline .sp-trigger { min-height: 60px; }

/* Item picker: quantity rows under the trigger (trades), item art in tiles */
.sp-qty-list { display: grid; gap: .35rem; margin-top: .45rem; }
.sp-qty-list:empty { display: none; }
.sp-qty-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: var(--radius-ui); background: var(--night); }
.sp-qty-art { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--night-2); overflow: hidden; }
.sp-qty-art img { width: 100%; height: 100%; object-fit: contain; }
.sp-qty-art .sp-emoji { font-size: 1.2rem; }
.sp-qty-name { flex: 1; min-width: 0; font-weight: 700; font-size: var(--step--1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stepper { display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.sp-stepper button, .sp-qty-x { width: 32px; height: 32px; border: 2px solid var(--night-3); border-radius: 50%; color: var(--paper);
  background: var(--night-2); font: 700 1rem/1 var(--body); cursor: pointer; }
.sp-stepper button:disabled { opacity: .35; cursor: not-allowed; }
.sp-stepper small { color: var(--muted); }
.sp-qty-x { border-color: transparent; background: none; color: var(--muted); }
.sp-tile.item .sp-tile-art { display: grid; place-items: center; }
.sp-tile.item .sp-tile-art img { width: 70%; height: 70%; object-fit: contain; }
.sp-tile.item .sp-emoji { font-size: 2.6rem; }
.sp-field { display: grid; gap: .3rem; min-width: 0; flex: 1 1 260px; }
.sp-field-label { font-weight: 700; font-size: var(--step--1); color: var(--muted); }
.sp-chip b:not(:empty) { min-width: 18px; width: auto; padding: 0 .25rem; border-radius: 999px; }

/* Home: the Today card (app/game/today.py), what's ready first */
.today { margin-top: 1.5rem; }
.today-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.today-row { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border-radius: var(--radius-ui); background: var(--night-2);
  border: 1px solid var(--night-3); color: var(--paper); text-decoration: none; height: 100%; }
.today-row:hover { border-color: var(--paper); color: var(--paper); }
.today-row > span:nth-child(2) { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.today-row small { color: var(--muted); font-size: var(--step--1); }
.today-row.ready { border-color: var(--gold); background: linear-gradient(110deg, rgb(244 197 66 / .12), transparent 70%), var(--night-2); }
.today-row.ready small { color: var(--gold); }
.today-icon { font-size: 1.4rem; width: 1.8rem; text-align: center; flex: none; }
.today-go { color: var(--gold); font-weight: 700; }

/* Quests: the weekly off-meta bounty (app/game/bounty.py) */
.bounty-card { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.4rem; padding: 1rem 1.2rem; border-radius: var(--radius-card);
  background: var(--night-2); border: 2px dashed var(--violet); }
.bounty-card.done { border: 2px solid var(--gold); }
.bounty-card .h3 { margin: 0 0 .2rem; }
.bounty-card p { margin: 0 0 .4rem; }
.bounty-body { flex: 1; min-width: 0; }
.bounty-body .meter { max-width: 26rem; }
.bounty-icon { font-size: 2rem; flex: none; }
@media (max-width: 620px) { .bounty-card { flex-wrap: wrap; } }
.guide-path { margin: .4rem 0; padding: .5rem .8rem; border-radius: 10px; background: rgba(255,255,255,.04); }
.guide-path summary { cursor: pointer; }
.guide-path .wiki-list { margin: .5rem 0 .3rem; }
.fight-advice { margin: .3rem 0 .6rem; padding: .35rem .6rem; border-radius: 8px; font-size: .85rem; line-height: 1.4;
  border-left: 3px solid var(--violet); background: rgba(255,255,255,.04); }
.fight-advice.ready { border-left-color: #3fbf7f; }
.fight-advice.close { border-left-color: var(--gold); }
.fight-advice.low { border-left-color: #e0524f; }
.bounty-card.road { border-style: solid; border-color: var(--line, var(--violet)); }
.bounty-card.road.done { border-color: var(--gold); }
.road-tiers { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .85rem; }
.road-tiers li { padding: .2rem .55rem; border-radius: 999px; background: var(--night-3, rgba(255,255,255,.06)); opacity: .75; }
.road-tiers li.ready { opacity: 1; outline: 2px solid var(--gold); }
.road-tiers li.claimed { opacity: .5; text-decoration: line-through; }

/* Ranked: this season's most picked stands */
.meta-chart { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.meta-chart summary { cursor: pointer; font-weight: 700; }
.meta-chart ol { list-style: none; padding: 0; margin: .7rem 0 .4rem; display: grid; gap: .35rem; }
.meta-chart li { display: grid; grid-template-columns: 28px minmax(0, 11rem) 2.5rem 1fr 3rem; align-items: center; gap: .6rem; }
.meta-chart li img { border-radius: 6px; object-fit: cover; }
.meta-chart li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.meta-chart li b { text-align: right; font-variant-numeric: tabular-nums; }
.meta-bar { height: 8px; border-radius: 4px; background: var(--night-3); overflow: hidden; }
.meta-bar i { display: block; height: 100%; background: var(--gold); }
@media (max-width: 620px) { .meta-chart li { grid-template-columns: 28px 1fr 3rem; } .meta-chart li small, .meta-bar { display: none; } }

/* Story: auto-replay a cleared stage */
.auto-replay { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1.2rem 0 0; padding: .8rem 1rem;
  border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.auto-replay-label { display: grid; gap: .1rem; flex: 1 1 16rem; }
.auto-replay-label small { font-size: var(--step--1); }
.auto-replay select { max-width: 100%; }

/* Inbox rewards (app/rewards.py) */
.reward-list li { align-items: flex-start; }
.reward-body { display: grid; gap: .3rem; flex: 1 1 16rem; min-width: 0; }
.reward-lines { display: flex; flex-wrap: wrap; gap: .35rem; }
.reward-chip { padding: .15rem .55rem; border-radius: 999px; background: rgb(244 197 66 / .14); color: var(--gold); font-size: var(--step--1); font-weight: 700; }
.reward-chip img.emoji { width: 1.1em; height: 1.1em; vertical-align: -.2em; }

/* Admin: rewards form and server logs */
.reward-fields { display: grid; gap: .7rem; margin: 0; padding: .8rem 1rem 1rem; border: 1px solid var(--night-3); border-radius: var(--radius-ui); }
.reward-fields legend { padding: 0 .4rem; font-weight: 700; }
.reward-fields .check { font-size: inherit; color: inherit; }
.reward-form input[type=number] { width: 100%; font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .45rem .6rem; }
.reward-pick { display: grid; gap: .4rem; font-weight: 700; }
.admin-logs { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .4rem; }
.admin-logs li { padding: .55rem .8rem; border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--night-3); min-width: 0; }
.admin-logs li.log-warning { border-left-color: var(--gold); }
.admin-logs li.log-error, .admin-logs li.log-critical { border-left-color: var(--magenta); }
.log-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; font-size: var(--step--1); }
.log-head code { overflow-wrap: anywhere; }
.log-msg { margin: .3rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-logs pre { margin: .4rem 0 0; padding: .6rem; max-height: 22rem; overflow: auto; font-size: .75rem; background: var(--night); border-radius: 6px; }
.log-filter { display: flex; flex-wrap: wrap; gap: .4rem; }
.log-error code { overflow-wrap: anywhere; }

/* ===================================================================================
   JoJo touches: the stand parameter chart, pull speed lines, menacing titles, fight effects,
   part title cards, kanji rarity stamps, empty states, the loader and the main buttons' ゴ
   =================================================================================== */

/* Stand parameters: the anime's hexagon, graded A-E (macros.param_chart, app/game/params.py) */
.param-chart { --pc-line: var(--night-3); --pc-fill: rgb(244 197 66 / .28); --pc-stroke: var(--gold); --pc-text: var(--text); --pc-muted: var(--muted);
  display: block; width: 100%; height: auto; max-width: 300px; }
.pc-ring { fill: none; stroke: var(--pc-line); stroke-width: 1; }
.pc-axis { stroke: var(--pc-line); stroke-width: 1; }
.pc-shape { fill: var(--pc-fill); stroke: var(--pc-stroke); stroke-width: 2.5; stroke-linejoin: round; }
.pc-dot { fill: var(--pc-stroke); }
.pc-grade { fill: var(--pc-stroke); font: 400 15px var(--display); }
.pc-jp { fill: var(--pc-text); font: 700 12px var(--body); }
.pc-en { fill: var(--pc-muted); font: 500 9.5px var(--body); letter-spacing: .04em; }
.pc-rg { fill: var(--pc-muted); font: 500 8px var(--body); }
.stand-params { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 1rem; align-items: center; margin-bottom: .6rem; }
@media (max-width: 640px) { .stand-params { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
/* the big card's back: paper, like the face, with the chart in ink */
.card-params { position: absolute; inset: 7px; z-index: 2; display: grid; align-content: center; justify-items: center; gap: .2rem; padding: 10px;
  border: 2px solid var(--ink); border-radius: calc(var(--radius-card) - 5px); color: var(--ink); text-align: center;
  background: radial-gradient(circle at 1px 1px, rgb(28 15 46 / .13) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--paper); }
.card-params .param-chart { --pc-line: rgb(28 15 46 / .28); --pc-fill: rgb(214 36 110 / .26); --pc-stroke: var(--magenta); --pc-text: var(--ink); --pc-muted: var(--night-3); }
.card-params-title { margin: 0; font: 700 .7rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--night-3); }
.card-params-title span { font: 400 .95rem var(--display); color: var(--ink); letter-spacing: .04em; margin-right: .3rem; }
.card-params-name { margin: 0; font: 400 1.05rem/1.15 var(--display); }
.card-params[hidden] { display: none; }
.card.params-on .card-face { visibility: hidden; }
.card.turning { animation: jj-card-turn .36s ease-in-out; }
@keyframes jj-card-turn { 50% { transform: rotateY(90deg); } }
.params-flip { display: inline-flex; align-items: center; gap: .3rem; margin: .7rem auto 0; padding: .35rem .8rem; min-height: 36px; cursor: pointer;
  font: 700 .8rem/1 var(--body); color: var(--gold); background: var(--night-2); border: 1px solid var(--night-3); border-radius: 999px; }
.params-flip:hover, .params-flip[aria-pressed="true"] { border-color: var(--gold); }
.stage:has(.params-flip), .panel-card:has(.params-flip) { flex-direction: column; align-items: center; }
.card-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .7rem; }
.card-tools .params-flip { margin: 0; }

/* UR / LR pulls: manga focus lines and ドドド, in the cinematic and on the grid */
.cine-lines { position: absolute; inset: -20%; z-index: 1; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .5) 0deg .6deg, transparent .6deg 4.5deg);
  -webkit-mask: radial-gradient(circle, transparent 22%, #000 55%); mask: radial-gradient(circle, transparent 22%, #000 55%); }
.cine.revealed:is(.r-UR, .r-LR) .cine-lines { animation: jj-lines-in .25s ease-out forwards, jj-lines-flicker .12s steps(2) .25s infinite; }
.cine-sfx b { position: absolute; z-index: 3; opacity: 0; pointer-events: none; font: 400 clamp(1.8rem, 7vw, 3.6rem)/1 var(--display); color: var(--c);
  -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #000; }
.cine-sfx b:nth-child(1) { left: 6%; top: 20%; rotate: -12deg; }
.cine-sfx b:nth-child(2) { right: 14%; top: 40%; rotate: 9deg; }
.cine-sfx b:nth-child(3) { left: 9%; bottom: 30%; rotate: 6deg; }
.cine-sfx b:nth-child(4) { right: 8%; bottom: 24%; rotate: -8deg; }
.cine.revealed:is(.r-UR, .r-LR) .cine-sfx b { animation: jj-sfx-pop .3s cubic-bezier(.2, 1.6, .4, 1) forwards, jj-jitter 1.2s steps(2) .3s infinite; }
.cine.revealed:is(.r-UR, .r-LR) .cine-sfx b:nth-child(2) { animation-delay: .1s, .4s; }
.cine.revealed:is(.r-UR, .r-LR) .cine-sfx b:nth-child(3) { animation-delay: .2s, .5s; }
.cine.revealed:is(.r-UR, .r-LR) .cine-sfx b:nth-child(4) { animation-delay: .3s, .6s; }
.pull-batch { overflow: clip; }  /* the grid's speed lines stay inside the pull */
.pull-grid .slot { position: relative; }
.slot:has(.flip-burst) .flip { z-index: 1; }
.flip-burst { position: absolute; inset: 0; pointer-events: none; animation: jj-fade-late 2.6s forwards; }
.burst-lines { position: absolute; inset: -45%; background: repeating-conic-gradient(from 0deg, rgb(237 230 247 / .55) 0deg .7deg, transparent .7deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 20%, #000 50%, transparent 72%); mask: radial-gradient(circle, transparent 20%, #000 50%, transparent 72%);
  animation: jj-lines-in .25s ease-out both, jj-lines-flicker .12s steps(2) .25s infinite; }
.flip-burst .sfx { position: absolute; z-index: 2; opacity: 0; font: 400 1.5rem/1 var(--display); color: var(--magenta);
  -webkit-text-stroke: 1.5px var(--night); text-shadow: 3px 3px 0 var(--night); animation: jj-sfx-pop .3s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.flip-burst .s1 { left: -6%; top: 4%; rotate: -12deg; }
.flip-burst .s2 { right: -8%; top: 24%; rotate: 9deg; color: var(--gold); animation-delay: .1s; }
.flip-burst .s3 { left: -4%; bottom: 22%; rotate: 6deg; color: var(--violet); animation-delay: .2s; }
@keyframes jj-lines-in { from { opacity: 0; scale: 1.4; } to { opacity: 1; scale: 1; } }
@keyframes jj-lines-flicker { 50% { rotate: 1.2deg; } }
@keyframes jj-sfx-pop { from { opacity: 0; scale: 2.2; } to { opacity: 1; scale: 1; } }
@keyframes jj-jitter { 50% { translate: 2px -1px; } }
@keyframes jj-fade-late { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* Menacing page titles: ゴ marks float to the right of the words (macros.menacing). The margin keeps them on the page. */
.menacing-title { position: relative; display: inline-block; isolation: isolate; margin-right: 1.3em; }
.menacing-marks i { position: absolute; z-index: -1; font-style: normal; font-family: var(--display); line-height: 1; pointer-events: none;
  color: var(--violet); -webkit-text-stroke: .05em var(--night); text-shadow: .08em .08em 0 var(--night-3);
  opacity: var(--o); scale: var(--s); rotate: var(--r); animation: jj-drift 3.2s ease-in-out infinite alternate, jj-jitter 1.6s steps(2) infinite; }
.menacing-marks i:nth-child(1) { right: -1.25em; top: -.3em; --s: .62; --r: -8deg; --o: .9; }
.menacing-marks i:nth-child(2) { right: -.6em; top: -.75em; --s: .36; --r: 10deg; --o: .65; animation-delay: -.6s, -.3s; }
.menacing-marks i:nth-child(3) { right: -1.35em; top: .45em; --s: .4; --r: 6deg; --o: .7; animation-delay: -1.2s, -.6s; }
.menacing-marks i:nth-child(4) { right: -.45em; top: .3em; --s: .3; --r: -12deg; --o: .5; animation-delay: -1.8s, -.9s; }
.menacing-marks i:nth-child(5) { left: -.45em; top: -.6em; --s: .28; --r: -14deg; --o: .45; animation-delay: -2.4s, -1.2s; }
@keyframes jj-drift { to { translate: 0 -.12em; } }

/* Fight effects (the 💥 Effects toggle): battle cries on specials */
.cry { position: absolute; z-index: 5; pointer-events: none; white-space: nowrap; font: 400 1.5rem/1 var(--display); color: var(--gold);
  -webkit-text-stroke: 1.5px var(--night); text-shadow: 3px 3px 0 var(--magenta); animation: jj-cry .6s cubic-bezier(.2, 1.6, .4, 1) forwards; }
.cry.plain { font-size: 1.9rem; color: var(--paper); }
@keyframes jj-cry { 0% { opacity: 0; scale: 2; } 25% { opacity: 1; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: 0 -14px; } }
.log-prefs { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.log-toggle.pref-toggle { display: inline-flex; align-items: center; }
.log-toggle.pref-toggle[aria-pressed="false"] { color: var(--muted); }

/* Part title cards on the story and Alternate Universe maps */
.story-part header.part-card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: .1rem; margin: 0 0 .8rem; padding: .85rem 1rem;
  border: 3px solid var(--ink); border-top: 5px solid var(--part); border-radius: var(--radius-ui); color: var(--paper);
  background: linear-gradient(110deg, color-mix(in srgb, var(--part) 55%, var(--night)), color-mix(in srgb, var(--part) 18%, var(--night))); }
.part-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .6;
  background: repeating-linear-gradient(-55deg, transparent 0 14px, rgb(255 255 255 / .07) 14px 15px); }
.part-num { position: absolute; right: .1rem; bottom: -1.7rem; z-index: -1; font: 400 7rem/1 var(--display); color: var(--part); opacity: .35; }
.part-label { font: 700 .74rem var(--body); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.part-title { font: 400 clamp(1.2rem, 3vw, 1.65rem)/1.08 var(--display); text-transform: uppercase; text-wrap: balance;
  -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--ink); }
.part-title a { color: inherit; text-decoration: none; }
.part-jp { font-weight: 700; font-size: .9rem; letter-spacing: .1em; opacity: .9; }
.part-count { margin-top: .3rem; font-size: .8rem; font-weight: 700; }

/* Small touches: kanji rarity stamps, the JoJo empty state, the ドドド loader, ゴ around the main buttons */
.rar-tag::before, .rar-badge::before { font-family: var(--display); font-weight: 400; margin-right: .25em; }
.rar-tag.common::before, .card.common .rar-badge::before { content: "並"; }
.rar-tag.rare::before, .card.rare .rar-badge::before { content: "良"; }
.rar-tag.epic::before, .card.epic .rar-badge::before { content: "極"; }
.rar-tag.legend::before, .card.legend .rar-badge::before { content: "超"; }
.rar-tag.mythic::before, .card.mythic .rar-badge::before { content: "神"; }
.rar-badge { display: inline-block; rotate: -4deg; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }
.empty-state { grid-column: 1 / -1; display: grid; gap: .35rem; justify-items: center; text-align: center; padding: 1.4rem 1rem; margin: 0 0 1rem;
  border: 2px dashed var(--night-3); border-radius: var(--radius-ui); background: var(--night-2); }
.empty-state p { margin: 0; max-width: 52ch; }
.empty-quote { font: 400 var(--step-1)/1.2 var(--display); color: var(--paper); text-shadow: 2px 2px 0 var(--magenta); }
.dododo { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70; padding: .35rem .75rem; pointer-events: none;
  border-radius: 999px; background: var(--night-2); border: 2px solid var(--night-3); box-shadow: 0 6px 18px rgb(0 0 0 / .4);
  visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
.dododo.on { visibility: visible; opacity: 1; }
.dododo b { display: inline-block; font: 400 1.25rem/1 var(--display); color: var(--violet); -webkit-text-stroke: 1px var(--night); animation: jj-jitter .5s steps(2) infinite; }
.dododo b:nth-child(2) { animation-delay: .12s; }
.dododo b:nth-child(3) { animation-delay: .24s; }
@media (max-width: 1023px) { .dododo { bottom: calc(5rem + env(safe-area-inset-bottom)); } }
.btn.gold.big { position: relative; }
.btn.gold.big::before, .btn.gold.big::after { content: "ゴ"; position: absolute; pointer-events: none; opacity: 0;
  font: 400 1.1rem/1 var(--display); color: var(--violet); -webkit-text-stroke: 1px var(--night); transition: opacity .15s, translate .15s; }
.btn.gold.big::before { left: -1.1rem; top: -.7rem; rotate: -12deg; }
.btn.gold.big::after { right: -1rem; bottom: -.6rem; rotate: 10deg; }
.btn.gold.big:is(:hover, :focus-visible)::before, .btn.gold.big:is(:hover, :focus-visible)::after { opacity: 1; translate: 0 -3px; animation: jj-jitter .6s steps(2) infinite; }

@media (prefers-reduced-motion: reduce) {
  .menacing-marks i, .dododo b, .burst-lines, .cine-lines, .cine-sfx b, .flip-burst, .flip-burst .sfx, .cry,
  .card.turning, .btn.gold.big::before, .btn.gold.big::after { animation: none !important; }
}

/* Co-op Over Heaven: this week's rule card, and its tier option */
.coop-heaven { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-ui); border: 2px solid rgb(214 36 110 / .5);
  background: linear-gradient(135deg, rgb(214 36 110 / .14), rgb(122 63 184 / .1)); }
.coop-heaven .kicker { color: #FF8DB9; }
.coop-heaven .notice { margin: .5rem 0; }
.training-drill.heaven { border-color: rgb(214 36 110 / .5); }
.training-drill.heaven:has(input:checked) { border-color: var(--magenta); }
.training-drill.locked { opacity: .55; cursor: not-allowed; }

/* Admin: deleting a save */
.danger-zone { margin-top: 1rem; padding: .8rem 1rem; border: 2px solid rgb(214 36 110 / .5); border-radius: var(--radius-ui); background: rgb(214 36 110 / .08); }
.danger-zone summary { cursor: pointer; font-weight: 700; color: #FF8DB9; }
.danger-zone p { margin: .6rem 0; max-width: 70ch; }
.danger-zone label { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--step--1); }

/* ===================================================================================
   JoJo touches, round two: 再起不能, 勝利 / 敗北, the VS splash, the stand aura, 実績解除, heavy hits, the Stand User file
   =================================================================================== */

/* 再起不能: a knocked-out stand gets the manga's "retired" stamp. The card fades, the stamp doesn't. */
.fighter.down { opacity: 1; filter: none; }
.fighter.down > :not(.retired) { opacity: .4; }
.fighter.down .fighter-portrait img { filter: grayscale(1) brightness(.7); }
.retired { position: absolute; left: 50%; top: 34%; z-index: 4; display: none; justify-items: center; line-height: 1; pointer-events: none;
  translate: -50% -50%; rotate: -14deg; padding: .25rem .45rem .3rem; border: 3px solid #E0302F; border-radius: 4px; color: #E0302F;
  background: rgb(237 230 247 / .92); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px #E0302F; }
.retired b { font: 400 .95rem/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.retired small { font: 700 .5rem/1.3 var(--body); letter-spacing: .25em; }
.fighter.down .retired, .fighter.ko .retired { display: grid; }
.fighter.ko .retired { animation: jj-stamp .32s cubic-bezier(.2, 1.5, .4, 1) .25s both; }
@keyframes jj-stamp { from { opacity: 0; scale: 2.4; } to { opacity: 1; scale: 1; } }

/* 勝利 / 敗北: the result slams in over the arena once the last turn has played, then leaves its kanji in the banner */
.result-kanji { font-family: var(--display); margin-right: .2em; }
.turn-banner.win .result-kanji { color: var(--gold); }
.turn-banner.loss .result-kanji { color: var(--violet); }
.fight-slam { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: .2rem; overflow: hidden;
  pointer-events: none; animation: jj-slam-out 2.6s ease forwards; }
.fight.playing .fight-slam { display: none; }
.fight-slam b { position: relative; font: 400 clamp(3rem, 12vw, 5.6rem)/1 var(--display); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 6px 6px 0 var(--ink); animation: jj-slam .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.fight-slam small { position: relative; font: 700 .95rem var(--body); letter-spacing: .4em; text-transform: uppercase; animation: jj-slam .45s .08s cubic-bezier(.2, 1.4, .4, 1) both; }
.fight-slam.win b, .fight-slam.win small { color: var(--gold); }
.fight-slam.lose { background: linear-gradient(180deg, rgb(18 8 33 / .7), rgb(43 23 71 / .7)); }
.fight-slam.lose b { color: var(--violet); }
.fight-slam.lose small { color: var(--muted); }
.slam-lines { position: absolute; inset: -30%; opacity: 0; }
.fight-slam.win .slam-lines { background: repeating-conic-gradient(from 0deg, rgb(244 197 66 / .45) 0deg .7deg, transparent .7deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 50%); mask: radial-gradient(circle, transparent 18%, #000 50%);
  animation: jj-lines-in .3s .1s ease-out forwards, jj-lines-flicker .12s steps(2) .4s infinite; }
@keyframes jj-slam { 0% { opacity: 0; scale: 3; } 60% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; } }
@keyframes jj-slam-out { 0%, 80% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }


/* Stand aura: the stand whose turn it is gives off a moving glow in its rarity's colour, with ゴ beside it */
@property --aura { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fighter.acting { border-color: transparent; box-shadow: none; isolation: isolate; }
.fighter.acting .fighter-portrait { border-color: var(--ring); }
.fighter.acting.common { --ring: var(--muted); }
.fighter.acting::before {
  content: ""; position: absolute; inset: -9px -7px -5px; z-index: -1; border-radius: 22px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent, var(--ring), transparent 30%, var(--ring) 50%, transparent 65%, var(--ring) 85%, transparent);
  filter: blur(9px); opacity: .9;
  will-change: transform, opacity;
  animation: jj-aura 2.2s linear infinite, jj-aura-pulse 1.1s ease-in-out infinite alternate;
}
.fighter.acting::after { content: "ゴ ゴ"; position: absolute; right: -12px; top: -14px; z-index: 3; pointer-events: none; writing-mode: vertical-rl;
  font: 400 1rem/1 var(--display); color: var(--ring); -webkit-text-stroke: 1px var(--night); animation: jj-jitter .6s steps(2) infinite; }
@keyframes jj-aura { to { transform: rotate(360deg); } }
@keyframes jj-aura-pulse { to { opacity: .6; } }

/* Heavy hits (a quarter of the target's health or more, 💥 Effects): a manga sound effect */
.heavy-sfx { position: absolute; top: 6%; z-index: 6; pointer-events: none; white-space: nowrap; font: 400 clamp(1.5rem, 4vw, 2.3rem)/1 var(--display);
  color: #E0302F; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--ink);
  animation: jj-heavy .8s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes jj-heavy { 0% { opacity: 0; scale: 2.4; } 25% { opacity: 1; scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; scale: 1.1; } }

/* 実績解除 / 称号獲得: achievements and titles stamp in at the top of the screen */
.slams { position: fixed; top: calc(4.5rem + env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 75; display: grid; gap: .8rem;
  width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.toast-pop.slam { position: relative; display: block; padding: 0; background: none; border: 0; box-shadow: none; pointer-events: auto; text-decoration: none; }
.slam-card { position: relative; display: grid; justify-items: center; gap: .2rem; padding: 1rem 1.4rem .9rem; text-align: center; rotate: -2deg; color: var(--ink);
  background: radial-gradient(circle at 1px 1px, rgb(28 15 46 / .28) 1.1px, transparent 1.6px) 0 0 / 6px 6px, var(--paper);
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--magenta); animation: jj-slam .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.slam-medal { position: absolute; left: -16px; top: -16px; width: 46px; height: 46px; display: grid; place-items: center; font: 400 1.3rem/1 var(--display);
  background: var(--gold); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); }
.slam-jp { font: 400 1.5rem/1 var(--display); letter-spacing: .06em; }
.slam-en { font: 700 .66rem var(--body); letter-spacing: .28em; text-transform: uppercase; color: var(--night-3); }
.slam-card strong { font: 400 1.05rem/1.2 var(--display); color: var(--magenta); }
.toast-pop.slam .toast-x { position: absolute; right: -8px; top: -8px; z-index: 1; }
.toast-pop.slam.leaving .slam-card { animation: jj-slam-leave .5s ease-in forwards; }
@keyframes jj-slam-leave { to { opacity: 0; translate: 0 -24px; } }

/* The Stand User file: the profile header, in the player's theme (app/game/profile.py) */
.user-file { --t1: #7A3FB8; --t2: #D6246E; --t3: #2BB3A8; position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1.3rem 1.3rem 1.6rem; margin-bottom: .8rem;
  border: 3px solid var(--ink); border-radius: var(--radius-card);
  background: linear-gradient(110deg, color-mix(in srgb, var(--t1) 60%, var(--night)), color-mix(in srgb, var(--t1) 14%, var(--night)) 62%); }
.user-file::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; z-index: -1; opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(-55deg, transparent 0 12px, rgb(255 255 255 / .07) 12px 13px); }
.file-tag { writing-mode: vertical-rl; align-self: stretch; padding-left: .35rem; border-left: 3px solid var(--t3);
  font: 400 1rem/1 var(--display); letter-spacing: .12em; color: var(--t3); }
.file-avatar { width: 96px; height: 96px; flex: none; border-radius: 12px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--t2); object-fit: cover; }
.file-who { display: grid; gap: .25rem; min-width: 0; }
.file-who p, .file-who h1 { margin: 0; }
.file-who h1 { -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; overflow-wrap: anywhere; }
.file-label { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.file-quote { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.file-facts { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; margin: .2rem 0 0; font-size: var(--step--1); }
.file-facts dt { color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.file-facts dd { margin: 0; font-weight: 700; }
.file-pins { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .35rem 0 0; padding: 0; }
.file-pins li { padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgb(28 15 46 / .55); border: 1px solid var(--t3); }
.file-stand { margin: 0; width: clamp(96px, 16vw, 168px); aspect-ratio: 1; align-self: end; }
.file-stand img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(4px 4px 0 var(--ink)); }
.file-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; display: flex; }
.file-bars i { flex: 1; }
.file-bars i:nth-child(1) { background: var(--t1); }
.file-bars i:nth-child(2) { background: var(--t2); }
.file-bars i:nth-child(3) { background: var(--t3); }
.user-file + .profile-actions { justify-content: flex-start; margin-bottom: 1.2rem; }
@media (max-width: 760px) {
  .user-file { grid-template-columns: auto minmax(0, 1fr); }
  .file-tag { display: none; }
  .file-avatar { width: 72px; height: 72px; align-self: start; }
  .file-stand { position: absolute; right: .4rem; bottom: .6rem; z-index: -1; width: 110px; opacity: .45; }
}

/* Report a profile */
.report-box { position: relative; }
.report-box > summary { list-style: none; }
.report-box > summary::-webkit-details-marker { display: none; }
.report-form { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; display: grid; gap: .4rem; width: min(320px, calc(100vw - 32px));
  padding: .9rem; background: var(--night-2); border: 2px solid var(--night-3); border-radius: var(--radius-ui); box-shadow: 0 12px 28px rgb(0 0 0 / .45); }
.report-form p { margin: 0; }
.report-form textarea { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .4rem .5rem; }
@media (max-width: 640px) { .report-form { left: 0; right: auto; } }

/* Customize your profile */
.customize-form { display: grid; gap: 1.1rem; }
.customize-field { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; font-weight: 700; min-width: 0; }
.customize-field legend { padding: 0; margin-bottom: .4rem; }
.customize-field small { font-weight: 400; }
.customize-field input[type=text], .customize-field select { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--ink);
  border-radius: var(--radius-ui); padding: .45rem .6rem; max-width: 34rem; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .5rem; }
.theme-opt { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 2px solid var(--night-3); border-radius: var(--radius-ui);
  background: var(--night); cursor: pointer; font-weight: 400; }
.theme-opt:has(input:checked) { border-color: var(--gold); }
.theme-opt.locked { opacity: .55; cursor: not-allowed; }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt:has(input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.theme-opt > span:last-child { display: grid; min-width: 0; }
.theme-opt small { font-size: .72rem; }
.theme-swatch { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--ink);
  background: linear-gradient(135deg, var(--t1) 0 40%, var(--t2) 40% 70%, var(--t3) 70%); }
.pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .35rem .8rem; font-weight: 400; }
.pin-grid .check { color: var(--text); font-size: var(--step--1); }

/* Admin: reports */
.report-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .7rem; }
.report-item { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--magenta); min-width: 0; }
.report-item:not(.open) { border-left-color: var(--night-3); opacity: .8; }
.report-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; }
.report-note { margin: 0; font-style: italic; overflow-wrap: anywhere; }
.report-seen { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; font-size: var(--step--1); }
.report-seen dt { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.report-seen dd { margin: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .fighter.ko .retired, .fight-slam, .fight-slam b, .fight-slam small, .slam-lines, .fighter.acting::before, .fighter.acting::after,
  .heavy-sfx, .slam-card, .vs-splash *, .stand-reveal * { animation: none !important; }
  .fight-slam { display: none; }
}

/* The KO tumble keeps the 再起不能 stamp at full strength: the card's contents fade, not the card */
.fighter.ko { animation: jj-ko .7s ease-in forwards; }
.fighter.ko > :not(.retired) { opacity: .4; transition: opacity .5s; }
.fighter.ko .fighter-portrait img { filter: grayscale(1) brightness(.7); transition: filter .5s; }
@keyframes jj-ko { 30% { transform: translateY(-6px) rotate(-4deg); } to { transform: translateY(10px) rotate(6deg); } }

/* ===================================================================================
   Navigation, round three: the mascot (Jolyne), the title-card wordmark, the tarot-card current page,
   narration tooltips on the icon rail, the Stand Arrow in the phone dock, and the sky blue from her artwork
   =================================================================================== */
:root { --sky: #3AB4F2; --sky-deep: #1B7FC4; --sky-soft: rgb(58 180 242 / .14); }

/* the sky blue where the site had no accent: focus, info notes, badges, XP, a secondary button */
:focus-visible { outline-color: var(--sky); }
.notice { border-left-color: var(--sky); }
.nav-badge { background: var(--sky); }
.bell b { background: var(--sky); color: var(--ink); }
.xp i { background: linear-gradient(90deg, var(--sky-deep), var(--sky)); }
.profile-level .meter i { background: linear-gradient(90deg, var(--sky-deep), var(--sky)); }
.btn.sky { background: var(--sky); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 var(--sky-deep); }
.btn.sky:hover { color: var(--ink); box-shadow: 6px 6px 0 var(--sky-deep); }

/* the logo: Jolyne in a round frame, and the title-card wordmark */
.mascot { position: relative; flex: none; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ink); background: var(--sky); box-shadow: 0 0 0 2px var(--gold), 3px 3px 0 2px var(--magenta); }
.mascot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wordmark > img { display: none; }
.wordmark { gap: .65rem; }
.wordmark-text { position: relative; display: grid; line-height: .9; transform: skewX(-10deg); margin-right: .9rem; }
.wm-stfu { font: 400 1.35rem/.95 var(--display); letter-spacing: .02em; color: #FFFFFF; filter: drop-shadow(2px 2px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)); }
.wm-req { font: 400 .62rem/1 var(--display); letter-spacing: .4em; color: #FFFFFF; margin-top: .12rem; }
.wm-go { position: absolute; right: -15px; top: -7px; font: 400 .66rem/1 var(--display); color: var(--violet); -webkit-text-stroke: .6px var(--ink);
  writing-mode: vertical-rl; animation: jj-jitter .7s steps(2) infinite; }
@media (min-width: 1024px) {
  .side-brand { gap: .65rem; min-height: 70px; }
  .side-brand .mascot { width: 46px; height: 46px; }
  .side-brand .wm-stfu { font-size: 1.55rem; }
  .side-brand .wm-req { font-size: .7rem; }
  .side-mini .side-brand .wordmark-text { display: none; }
  .side-mini .side-brand .mascot { width: 40px; height: 40px; }
}
@media (max-width: 1023px) {
  .topbar .mascot { width: 34px; height: 34px; border-width: 2px; box-shadow: 0 0 0 2px var(--gold); }
  .topbar .wm-stfu { font-size: 1.15rem; }
  .topbar .wm-req { font-size: .55rem; }
}

/* the current page is a tarot card: in the sidebar and the phone menu */
@media (min-width: 1024px) {
  .side-link[aria-current] { margin: .25rem -.15rem; padding: .5rem .65rem; color: var(--ink); font-weight: 700; rotate: -1.5deg;
    background: radial-gradient(circle at 1px 1px, rgb(28 15 46 / .14) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--paper);
    border: 2px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--magenta); }
  .side-link[aria-current] .side-icon { color: var(--magenta); opacity: 1; }
  .side-link[aria-current] .side-label { color: var(--ink); }
  .side-mini .side-link[aria-current] { margin-inline: .3rem; padding-inline: 0; rotate: none; }  /* no tilt: it would trap the fixed tooltip */
  /* narration-box tooltips on the icon rail (the full sidebar shows the names already) */
  .side-tip { display: none; }
  .side-mini .side-tip { display: block; position: fixed; left: calc(var(--side-w) + 10px); z-index: 60; padding: .25rem .65rem; white-space: nowrap;
    background: #FFFBEA; color: var(--ink); border: 2px solid var(--ink); font-weight: 700; font-size: .82rem; box-shadow: 3px 3px 0 var(--magenta);
    opacity: 0; translate: -6px 0; transition: opacity .12s, translate .12s; pointer-events: none; }  /* top: its place in the link, centred */
  .side-mini .side-tip small { display: block; max-width: 260px; white-space: normal; font-weight: 500; font-size: .7rem; color: var(--night-3); }
  .side-mini .side-link:is(:hover, :focus-visible) .side-tip { opacity: 1; translate: 0 0; }
}
@media (max-width: 1023px) {
  .sheet-grid a[aria-current] { color: var(--ink); rotate: -1deg; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--magenta);
    background: radial-gradient(circle at 1px 1px, rgb(28 15 46 / .14) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--paper); }
  .sheet-grid a[aria-current] > span:first-child { color: var(--magenta); }
}

/* the Stand Arrow in the middle of the phone dock (Summon) */
@media (max-width: 1023px) {
  .dock { overflow: visible; }
  .dock > a.dock-summon { justify-content: flex-end; color: var(--gold); }
  .dock > a.dock-summon:active { background: none; }
  .dock > a.dock-summon[aria-current]::before { display: none; }
  .arrow-btn { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin-top: -30px; margin-bottom: .1rem; border-radius: 50%;
    border: 3px solid var(--ink); background: radial-gradient(circle at 50% 38%, #3A2066, var(--night) 70%);
    box-shadow: 0 0 0 4px rgb(43 23 71), 0 6px 16px rgb(0 0 0 / .45); }
  .arrow-btn::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgb(244 197 66 / .7); animation: jj-spin 9s linear infinite; }
  .arrow-btn::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle, rgb(244 197 66 / .35), transparent 65%);
    animation: jj-glow 1.8s ease-in-out infinite alternate; }
  .arrow-svg { position: relative; z-index: 1; width: 42px; height: 42px; filter: drop-shadow(2px 2px 0 var(--ink)); transition: translate .15s; }
  .dock-summon:active .arrow-svg { animation: jj-strike .45s cubic-bezier(.3, 0, .2, 1); }
  .dock-summon[aria-current] .arrow-btn { box-shadow: 0 0 0 4px rgb(43 23 71), 0 0 0 6px var(--gold), 0 6px 16px rgb(0 0 0 / .45); }
}
@keyframes jj-spin { to { rotate: 360deg; } }
@keyframes jj-glow { to { opacity: .4; } }
@keyframes jj-strike { 30% { translate: 0 -8px; scale: 1.1; } 60% { translate: 0 5px; scale: .95; } }

/* the phone menu: the mascot's banner at the top */
@media (max-width: 1023px) {
  .sheet[open] { padding-top: 0; }
  .sheet-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
    margin: 0 calc(-1 * max(1rem, env(safe-area-inset-right))) .6rem calc(-1 * max(1rem, env(safe-area-inset-left)));
    padding: 0 1rem .7rem; min-height: 150px; overflow: hidden; border-radius: 18px 18px 0 0; border-bottom: 3px solid var(--ink); }
  .sheet-hero { position: absolute; inset: 0; z-index: 0; }
  .sheet-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .sheet-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgb(28 15 46 / .88)); }
  .sheet-say { position: absolute; right: 4.2rem; top: .8rem; z-index: 1; max-width: 50%; padding: .3rem .65rem; background: var(--paper); color: var(--ink);
    border: 2px solid var(--ink); border-radius: 50% / 40%; font-size: .74rem; font-weight: 700; text-align: center; }
  .sheet-head > :not(.sheet-hero) { position: relative; z-index: 1; }
  .sheet-head .sheet-close { align-self: start; margin-top: .7rem; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
  .sheet-me strong { text-shadow: 2px 2px 0 var(--ink); }
  .sheet-me small { color: var(--sky); font-weight: 700; }
}

/* the mascot on empty pages, in the tour, on error pages and in the loading badge */
.empty-state { grid-template-columns: auto minmax(0, 1fr); align-items: start; justify-items: start; text-align: left; gap: .9rem; }
.empty-mascot { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--gold); object-fit: cover; background: var(--sky); }
.empty-bubble { position: relative; display: grid; gap: .25rem; padding: .6rem .9rem; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 14px; min-width: 0; }
.empty-bubble::before { content: ""; position: absolute; left: -10px; top: 18px; width: 14px; height: 14px; background: var(--paper);
  border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); rotate: 45deg; }
.empty-bubble .empty-quote { color: var(--ink); text-shadow: none; }
.empty-bubble .muted { color: var(--night-3); }
.empty-bubble a:not(.btn) { color: var(--sky-deep); }
.tour-card { border-color: rgb(58 180 242 / .55); padding-left: 4.6rem; min-height: 6rem; }
.tour-mascot { position: absolute; left: .9rem; top: 1rem; width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink);
  box-shadow: 0 0 0 2px var(--sky); object-fit: cover; background: var(--sky); }
.error-page { display: grid; justify-items: center; gap: .5rem; text-align: center; padding: 2rem 1rem; margin-top: 2rem; border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--sky-deep), var(--night) 80%); border: 2px solid var(--ink); }
.error-page p { margin: 0; }
.error-mascot { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--gold), 5px 5px 0 3px var(--magenta); object-fit: cover; }
.dododo { display: inline-flex; align-items: center; gap: .45rem; padding-left: .3rem; }
.dododo-face { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--sky); object-fit: cover;
  animation: jj-bob .6s ease-in-out infinite alternate; }
.dododo b { color: var(--sky); }
@keyframes jj-bob { to { translate: 0 -3px; } }

@media (prefers-reduced-motion: reduce) {
  .wm-go, .arrow-btn::before, .arrow-btn::after, .dock-summon:active .arrow-svg, .dododo-face { animation: none !important; }
}

/* The arena glows in the colour of the terrain in play (terrain-* sets --accent; app.js follows changes during the replay) */
.arena { transition: box-shadow .6s ease, border-color .6s ease; }
.arena.has-terrain { border-color: color-mix(in srgb, var(--accent) 70%, var(--night-3));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 30px 2px color-mix(in srgb, var(--accent) 38%, transparent),
              inset 0 0 48px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .arena { transition: none; } }

/* A player's banner image behind their Stand User file (app/game/profile.py IMAGE_HOSTS), dimmed so the text stays readable */
.file-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.user-file.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgb(28 15 46 / .92), color-mix(in srgb, var(--t1) 30%, rgb(28 15 46 / .6)) 60%, rgb(28 15 46 / .35)); }
.customize-field input[type=url] { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .45rem .6rem; max-width: 34rem; }
.report-image { display: block; max-width: 220px; max-height: 120px; border-radius: 6px; border: 2px solid var(--night-3); object-fit: cover; }

/* ===================================================================================
   Dungeon (the Delve) and co-op raid pages, redone in the site's palette
   =================================================================================== */

/* the floors: B1 > B2 > B3 (boss) */
.delve-status { display: grid; gap: .35rem; justify-items: end; }
.delve-floors { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
.delve-floors li { display: flex; align-items: center; gap: .2rem; padding: .25rem .6rem; border-radius: 999px; border: 2px solid var(--night-3);
  background: var(--night); color: var(--muted); font-size: .85rem; }
.delve-floors li b { font: 400 1rem var(--display); }
.delve-floors li + li::before { content: "›"; margin: 0 .35rem 0 -.75rem; color: var(--night-3); }
.delve-floors li.past { color: var(--paper); border-color: var(--violet); }
.delve-floors li.here { color: var(--ink); background: var(--gold); border-color: var(--ink); box-shadow: 2px 2px 0 var(--magenta); }
@media (max-width: 760px) { .delve-status { justify-items: start; } }

/* the map: stone floors in the site's violets, a screentone fog, events as coloured badges, the team leader as the token */
.dungeon-layout { grid-template-columns: minmax(0, 1fr) 290px; }
.delve-map-wrap { display: grid; gap: .7rem; min-width: 0; }
.delve-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0; padding: 0; font-size: var(--step--1); color: var(--muted); }
.delve-legend li { display: inline-flex; align-items: center; gap: .35rem; }

/* The walk map (partials/walkmap.html, the walker in app.js): one seamless board. The floor is the board itself, so
   tiles join with no seams; walls are one mass with a face where floor lies in front; the token slides tile to tile. */
.walk-map { --step: 150ms; width: min(100%, 680px); padding: 10px; border-radius: var(--radius-card); border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--night-3); background: #0E0718; touch-action: manipulation; }
.walk-board { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  aspect-ratio: var(--cols) / var(--rows); border-radius: 6px; background: #0E0718; }
/* the pixel tiles (scripts/make_tiles.py): floor, cracked floor, mossy floor (v0-v2), wall top, wall face */
.walk-tile { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; color: var(--paper); font: 700 clamp(.6rem, 2vw, 1.05rem)/1 var(--body);
  background: url("../img/dungeon-tiles.png") 0 0 / 500% 100%; image-rendering: pixelated; }
.walk-tile.v1 { background-position-x: 25%; } .walk-tile.v2 { background-position-x: 50%; }
.walk-tile.wall { background-position-x: 75%; } .walk-tile.wall.face { background-position-x: 100%; }
.walk-tile:not(.visited):not(.fog):not(.wall) { box-shadow: inset 0 0 0 100vmax rgb(14 7 24 / .42); }
.walk-tile.fog { background: radial-gradient(circle at 1px 1px, rgb(122 63 184 / .35) 1px, transparent 1.5px) 0 0 / 5px 5px, #0E0718; image-rendering: auto; }
.walk-tile.fog.rim { background-color: rgb(14 7 24 / .82); }
.walk-tile.cleared::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: rgb(14 7 24 / .35); }
.walk-tile.event-boss { box-shadow: inset 0 0 0 2px var(--magenta), inset 0 0 0 100vmax rgb(107 31 69 / .55); }
.walk-tile.event-stairs { box-shadow: inset 0 0 0 2px var(--sky), inset 0 0 0 100vmax rgb(27 94 138 / .6); }
/* the marks' pixel sprites (scripts/make_tiles.py marks -> img/marks.png, one 16 x 16 cell each): a mark fills its
   tile like the floor does; its glyph stays in the markup as a text fallback */
.walk-mark, .mark-sprite { display: block; width: 100%; aspect-ratio: 1; font-size: 0; color: transparent; image-rendering: pixelated;
  background: url("../img/marks.png") calc(var(--i, 0) * 100% / 21) 0 / 2200% 100% no-repeat; }
.sprite-buy-heal { --i: 0; }
.sprite-buy-item, .sprite-buy { --i: 1; }
.sprite-buy-boon { --i: 2; }
.sprite-buy-arrow { --i: 3; }
.sprite-buy-key { --i: 4; }
.sprite-keeper { --i: 5; }
.sprite-lock { --i: 6; }
.sprite-bossdoor { --i: 7; }
.sprite-arrow { --i: 8; }
.sprite-standarrow { --i: 9; }
.sprite-treasure, .sprite-chest { --i: 10; }
.sprite-relic { --i: 11; }
.sprite-heart { --i: 12; }
.sprite-key { --i: 13; }
.sprite-trapdoor { --i: 14; }
.sprite-exit { --i: 15; }
.sprite-fight { --i: 16; }
.sprite-elite { --i: 17; }
.sprite-boss { --i: 18; }
.sprite-trap { --i: 19; }
.sprite-camp { --i: 20; }
.sprite-stairs { --i: 21; }
[data-walkmap] .walk-tile:not(.fog):not(.wall) { cursor: pointer; }
/* the world map (Test lab, lab/world_body.html): the area drawn whole (scripts/make_world.py), the walk grid see-through
   over it; the roads to other areas carry no sign: the road just goes on */
/* the view: the map is bigger than the screen, so a window of it (up to 13 rows) follows the walker, never past the
   map's edges (a map smaller than the window sits centred). This transform is where the view starts; the camera in
   app.js then follows the walker with a little lag, easing in and out. */
.world-page .walk-map { --tile: 32px; width: 100%; padding: 6px; background: #1A2A1E; overflow: hidden;  /* 1:1 with the art */
  height: calc(var(--tile) * min(var(--rows), 13) + 12px); container-type: size; }
.world-page .walk-board { --bw: calc(var(--cols) * var(--tile)); --bh: calc(var(--rows) * var(--tile));
  width: var(--bw); height: var(--bh); aspect-ratio: auto; background: #1A2A1E var(--map) 0 0 / 100% 100% no-repeat;
  transform: translate(clamp(min(100cqw - var(--bw), (100cqw - var(--bw)) / 2), 50cqw - (var(--x) + .5) * var(--tile), max(0px, (100cqw - var(--bw)) / 2)),
                       clamp(min(100cqh - var(--bh), (100cqh - var(--bh)) / 2), 50cqh - (var(--y) + .5) * var(--tile), max(0px, (100cqh - var(--bh)) / 2)));
  will-change: transform; }
.wm-dialogue p.wm-need { flex-basis: 100%; color: #2C5A8A; font-weight: 600; }
.walk-map .walk-tile.terr, .walk-map .walk-tile.terr.wall, .walk-map .walk-tile.terr.face { background: none; box-shadow: none; }
.wm-stage .walk-tile.event-gate .walk-mark { display: none; }
.wm-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .wm-layout { grid-template-columns: 1fr; } }
.wm-stage { display: grid; gap: .6rem; }
.wm-place { display: flex; justify-content: space-between; align-items: end; gap: .6rem; }
.wm-place small { display: block; color: var(--muted); font-size: var(--step--1); }
.wm-place strong { font: 400 var(--step-2)/1.1 var(--display); }
.wm-hud { display: flex; gap: .5rem; margin: 0; font-weight: 700; }
.wm-hud span { padding: .2rem .55rem; border-radius: 999px; background: var(--night-2); border: 1px solid var(--night-3); }
.wm-stage .walk-mark { transform: translateY(-38%) scale(.72); filter: drop-shadow(0 2px 0 rgb(0 0 0 / .45)); }
.wm-npc { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)); }
.wm-npc .trainer-sprite { position: absolute; left: 0; bottom: 0; width: 100%; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .35)); }
.wm-npc.leader::before { content: "👑"; position: absolute; left: 50%; top: -55%; transform: translateX(-50%); font-size: clamp(.5rem, 1.6vw, .8rem); }
.wm-npc.beaten .trainer-sprite { filter: grayscale(.85) brightness(.85); }
.wm-alert { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); display: grid; place-items: center;
  width: 1.3em; height: 1.3em; border: 2px solid var(--ink); border-radius: 4px; background: #fff; color: var(--magenta);
  font: 400 clamp(.7rem, 2vw, 1.1rem)/1 var(--display); animation: wm-alert .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes wm-alert { from { transform: translate(-50%, 40%) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wm-alert { animation: none; } }
.wm-dialogue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .8rem 1rem;
  border: 3px solid var(--ink); border-radius: 10px; background: #F8F6EE; color: #1C0F2E; box-shadow: 4px 4px 0 var(--night-3); }
.wm-dialogue p { margin: 0; flex: 1 1 18rem; font-weight: 600; }
.wm-dialogue .muted { color: #5A4E6E; font-weight: 400; }
.wm-dialogue.spotted { border-color: var(--magenta); }
.wm-dialogue.quiet { background: #ECE6F6; }
.wm-side { display: grid; gap: 1rem; }
.wm-card { padding: .9rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.wm-card h2 { margin: 0 0 .6rem; }
.wm-team, .wm-trainers { display: grid; gap: .55rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.wm-team li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .6rem; align-items: center; }
.wm-team img { border-radius: 8px; object-fit: cover; }
.wm-team li > span { display: grid; gap: .15rem; }
.wm-team li.down img { filter: grayscale(1) brightness(.6); }
.wm-hp { display: block; height: 7px; border-radius: 99px; background: #0E0718; overflow: hidden; }
.wm-hp i { display: block; height: 100%; background: #48C858; transition: width .4s; }
.wm-hp.mid i { background: #F4C542; } .wm-hp.low i { background: #E83838; }
.wm-trainers li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .5rem; align-items: center; }
.wm-trainers li > span:last-child { display: grid; }
.wm-trainers li.beaten { opacity: .6; }
.wm-face { display: block; width: 24px; }
.wm-face .trainer-sprite { width: 100%; }
.wm-healer { display: flex; gap: .8rem; align-items: center; }
.wm-healer img { border-radius: 10px; }
.walk-token { position: absolute; left: 0; top: 0; z-index: 1; display: grid; pointer-events: none;
  width: calc(100% / var(--cols)); height: calc(100% / var(--rows));
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)); transition: transform var(--step) linear; }
.walk-token .trainer-sprite { position: absolute; left: 0; bottom: 0; width: 100%; filter: drop-shadow(0 2px 0 rgb(0 0 0 / .35)); }
.walk-token.bump .trainer-sprite { animation: walk-bump .2s; }
@keyframes walk-bob { to { translate: 0 -2px; } }
@keyframes walk-bump { 40% { translate: var(--bx, 0) var(--by, 0); } }
@media (prefers-reduced-motion: reduce) { .walk-token { transition: none; } }

/* The trainer sprite (app/game/trainer.py): a cell of its sheet, 3 frames (stand, step, step) x 4 faces, kept pixel-sharp.
   .step-a / .step-b show a step for the first half of a tile's slide (the walker alternates them); .walking loops. */
.trainer-sprite { display: block; aspect-ratio: 16 / 20; background: var(--sheet) 0 0 / 300% 400% no-repeat; image-rendering: pixelated; }
.trainer-sprite[data-face="up"] { background-position-y: 33.333%; }
.trainer-sprite[data-face="left"] { background-position-y: 66.667%; }
.trainer-sprite[data-face="right"] { background-position-y: 100%; }
.trainer-sprite.step-a { animation: trainer-step-a var(--step, 150ms) steps(1, end); }
.trainer-sprite.step-b { animation: trainer-step-b var(--step, 150ms) steps(1, end); }
.trainer-sprite.walking { animation: trainer-walk .6s steps(1, end) infinite; }
@keyframes trainer-step-a { 0% { background-position-x: 50%; } 50%, 100% { background-position-x: 0; } }
@keyframes trainer-step-b { 0% { background-position-x: 100%; } 50%, 100% { background-position-x: 0; } }
@keyframes trainer-walk { 0% { background-position-x: 50%; } 25% { background-position-x: 0; } 50% { background-position-x: 100%; } 75% { background-position-x: 0; } }
@media (prefers-reduced-motion: reduce) { .trainer-sprite.walking { animation: none; } }

.delve-legend .walk-tile { display: inline-grid; width: 1.6rem; height: 1.6rem; border-radius: 4px; }
.delve-legend .walk-mark { width: 100%; }

/* the side panel: cards */
.dungeon-controls { padding: 0; border-left: 0; gap: .7rem; }
.delve-card { display: grid; gap: .45rem; padding: .8rem .9rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); min-width: 0; }
.delve-card-title { margin: 0; font: 700 .76rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.delve-card-title small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.delve-card p { margin: 0; }
.move-pad { margin-block: .3rem; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); gap: 6px; }
.move-button { width: 52px; height: 52px; border-radius: 12px; border: 2px solid var(--ink); background: var(--night-3); color: var(--gold);
  box-shadow: 2px 3px 0 var(--ink); font: 700 1.35rem var(--body); transition: transform .06s, box-shadow .06s; }
.move-button:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.move-button:active:not(:disabled) { transform: translate(1px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.move-button:disabled { opacity: .25; box-shadow: none; }
.move-button { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.delve-encounter { justify-items: center; text-align: center; border-color: var(--c, var(--magenta)); box-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--magenta)) 30%, transparent); }
.delve-encounter.event-fight { --c: #FF8DB9; } .delve-encounter.event-elite { --c: #FF5C8A; } .delve-encounter.event-boss { --c: var(--gold); }
.delve-encounter h2 { margin: 0; }
.delve-encounter-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink); background: var(--c);
  color: var(--ink); font: 400 2rem/1 var(--display); box-shadow: 3px 3px 0 var(--ink); animation: jj-jitter .5s steps(2) infinite; }
.delve-stairs { border-color: var(--sky); }
.delve-stairs form { margin: 0; }
.delve-choice { display: grid; gap: .1rem; width: 100%; padding: .6rem .8rem; text-align: left; cursor: pointer; border-radius: var(--radius-ui); border: 2px solid var(--ink);
  font: inherit; box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s; }
.delve-choice:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.delve-choice strong { font-size: 1rem; }
.delve-choice small { font-size: .78rem; opacity: .85; }
.delve-choice.deeper { background: var(--gold); color: var(--ink); }
.delve-choice.home { background: var(--night-3); color: var(--paper); border-color: var(--paper); }
.delve-bag-dust { font: 400 1.6rem/1 var(--display); color: var(--gold); }
.delve-items { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; }
.delve-items li { padding: .1rem .5rem; border-radius: 999px; background: var(--night); border: 1px solid var(--night-3); font-size: .78rem; font-weight: 700; }
.delve-team { list-style: none; display: grid; gap: .45rem; margin: 0; padding: 0; }
.delve-team li { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.delve-team img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 2px solid var(--night-3); background: var(--night-3); }
.delve-who { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.delve-who strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.delve-who .hp { height: 7px; }
.delve-who small { font-size: .72rem; }
.delve-team li.low .hp i { background: #FFB35C; }
.delve-team li.down { opacity: .5; }
.delve-team li.down img { filter: grayscale(1); }

/* the entrance and the last run */
.delve-gate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-top: 1rem; padding: 1.3rem;
  border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 15% 50%, rgb(58 180 242 / .16), transparent 60%), var(--night-2); }
.delve-gate-art { display: grid; place-items: center; width: 130px; aspect-ratio: 3 / 4; border-radius: 70px 70px 10px 10px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 1px 1px, rgb(122 63 184 / .4) 1px, transparent 1.5px) 0 0 / 5px 5px, radial-gradient(ellipse at 50% 80%, #2B1747, #0E0718);
  box-shadow: inset 0 0 0 6px #3D2263, 0 0 26px rgb(58 180 242 / .25); }
.delve-gate-art span { font: 400 2.6rem/1 var(--display); color: var(--sky); animation: walk-bob 1.4s ease-in-out infinite alternate; }
.delve-gate-body { display: grid; gap: .8rem; min-width: 0; }
.delve-gate-body h2, .delve-gate-body p { margin: 0; }
.delve-facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.delve-facts li { display: grid; padding: .45rem .75rem; border-radius: var(--radius-ui); background: var(--night); border: 1px solid var(--night-3); }
.delve-facts strong { color: var(--gold); }
.delve-facts small { color: var(--muted); font-size: .74rem; }
.delve-gate-team { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; }
.delve-gate-team li { display: grid; justify-items: center; gap: .2rem; width: 92px; text-align: center; }
.delve-gate-team img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--gold); }
.delve-gate-team small { font-size: .7rem; color: var(--muted); line-height: 1.2; }
.delve-last { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2);
  border: 2px solid var(--c, var(--night-3)); }
.delve-last.cleared { --c: var(--gold); } .delve-last.left { --c: var(--sky); } .delve-last.lost { --c: #E0302F; }
.delve-last h2, .delve-last p { margin: 0; }
.delve-last-mark { flex: none; display: grid; place-items: center; min-width: 56px; height: 56px; padding: 0 .4rem; border-radius: 12px; border: 2px solid var(--ink);
  background: var(--c); color: var(--ink); font: 400 1.5rem/1 var(--display); box-shadow: 2px 2px 0 var(--ink); }
.delve-last.lost .delve-last-mark { font-size: .85rem; background: var(--paper); color: #E0302F; border-color: #E0302F; rotate: -6deg; }
@media (max-width: 760px) {
  .delve-gate { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .delve-gate-body { justify-items: center; }
  .delve-facts, .delve-gate-team { justify-content: center; }
}

/* co-op raid: the week's boss, how it goes, today's wins */
.raid-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.3rem; align-items: center; margin-bottom: 1.2rem; padding: 1.2rem 1.3rem;
  border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 10% 50%, rgb(214 36 110 / .22), transparent 55%), repeating-linear-gradient(-55deg, transparent 0 14px, rgb(255 255 255 / .03) 14px 15px), var(--night-2); }
.raid-boss { margin: 0; width: 140px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--magenta), 0 0 28px rgb(214 36 110 / .5); background: var(--night-3); }
.raid-boss img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.raid-hero-body { display: grid; gap: .45rem; min-width: 0; }
.raid-hero-body h1, .raid-hero-body p { margin: 0; }
.raid-crew { list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
.raid-crew img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 2px solid var(--magenta); background: var(--night-3); }
.raid-crew li:first-child img { border-color: var(--gold); }
.raid-steps { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .2rem 0 0; padding: 0; font-size: var(--step--1); color: var(--muted); }
.raid-steps li { display: inline-flex; align-items: center; gap: .4rem; }
.raid-steps b { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sky); color: var(--ink); font: 400 .78rem var(--display); }
.raid-wins { display: grid; justify-items: center; gap: .3rem; padding: .7rem .9rem; border-radius: var(--radius-card); background: var(--night); border: 2px solid var(--night-3); text-align: center; }
.raid-wins small { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.raid-wins strong { font: 400 1.2rem var(--display); color: var(--gold); }
.raid-pips { display: flex; gap: .3rem; }
.raid-pips i { width: 14px; height: 14px; rotate: 45deg; border: 2px solid var(--ink); background: var(--night-3); }
.raid-pips i.left { background: var(--gold); box-shadow: 0 0 8px rgb(244 197 66 / .5); }
@media (max-width: 760px) {
  .raid-hero { grid-template-columns: auto minmax(0, 1fr); }
  .raid-boss { width: 88px; align-self: start; }
  .raid-wins { grid-column: 1 / -1; grid-template-columns: auto auto auto; justify-content: start; align-items: center; gap: .7rem; }
}

/* the difficulties: cards with a colour stripe each */
.raid-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .5rem; }
.raid-tier { --c: var(--teal); position: relative; display: grid; gap: .15rem; align-content: start; padding: .7rem .75rem .65rem; cursor: pointer;
  border-radius: var(--radius-ui); border: 2px solid var(--night-3); border-top: 5px solid var(--c); background: var(--night); }
.raid-tier input { position: absolute; opacity: 0; pointer-events: none; }
.raid-tier:has(input:checked) { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 3px 3px 0 var(--ink); background: color-mix(in srgb, var(--c) 10%, var(--night)); }
.raid-tier:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
.raid-tier.tier-hard { --c: var(--gold); }
.raid-tier.tier-nightmare { --c: var(--magenta); }
.raid-tier.tier-heaven { --c: #FF4DA0; border-top: 5px solid; border-image: linear-gradient(90deg, #FF4DA0, #F4C542, #5FF2E4) 1; }
.raid-tier.tier-heaven:has(input:checked) { border-image: none; border-color: #FF4DA0; }
.raid-tier.locked { opacity: .55; cursor: not-allowed; }
.raid-tier-name { font: 400 1.05rem var(--display); }
.raid-tier-level { color: var(--c); font-weight: 700; font-size: .85rem; }
.raid-tier-loot { color: var(--muted); font-size: .74rem; line-height: 1.35; }
.raid-tier-loot b { color: var(--paper); }
.raid-tier-rule { color: #FF8DB9; font-size: .72rem; font-weight: 700; }

/* the lobby: the code as a ticket, the seats as cards */
.coop-code { align-items: center; padding: .7rem .8rem; border-radius: var(--radius-ui); border: 2px dashed var(--gold); background: rgb(244 197 66 / .06); }
.coop-code-label { display: grid; font-weight: 700; font-size: .8rem; color: var(--muted); }
.coop-code-label small { font-weight: 400; font-size: .7rem; }
.coop-code strong { cursor: text; user-select: all; }
.coop-party li { background: var(--night); }
.coop-party li.ready { position: relative; border-color: var(--teal); }
.coop-party li.ready::after { content: "✓ Ready"; margin-left: auto; padding: .1rem .5rem; border-radius: 999px; background: var(--teal); color: var(--ink); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.coop-party li.waiting { border-color: var(--night-3); }
.coop-party li.waiting .coop-empty-art { animation: walk-bob 1s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .delve-encounter-icon, .delve-gate-art span, .coop-party li.waiting .coop-empty-art { animation: none !important; }
}

/* ===================================================================================
   Chats (global, private, raid), open co-op lobbies, milestone titles
   =================================================================================== */
.chat-acts { position: absolute; top: .15rem; right: .2rem; display: flex; gap: .1rem; }
.chat-acts .chat-del { position: static; }
.chat-msg:has(.chat-acts > :nth-child(2)) .chat-meta { padding-right: 3.4rem; }
.chat-report-form { margin: 0; }
.chat-report { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; font-size: .75rem; opacity: .45; }
.chat-msg:hover .chat-report, .chat-report:focus-visible { opacity: 1; }
.chat-report:hover { background: rgb(214 36 110 / .25); color: var(--paper); }
@media (hover: none) { .chat-report { opacity: .7; width: 32px; height: 32px; } }
.chat-title { color: var(--sky); font-weight: 700; font-size: .68rem; }
.chat-global .chat-list { height: clamp(300px, 58vh, 620px); }
.chat-raid .chat-list { height: clamp(180px, 32vh, 320px); }
.chat-page .tabs { margin-bottom: 1rem; }

/* private messages */
.conv-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.conv-list a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--radius-ui); background: var(--night);
  border: 2px solid var(--night-3); color: var(--paper); text-decoration: none; }
.conv-list a:hover { border-color: var(--sky); }
.conv-list li.unread a { border-color: var(--sky); background: var(--sky-soft); }
.conv-list img, .conv-list .avatar-initial { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.conv-who { display: grid; min-width: 0; flex: 1; }
.conv-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-who time { font-size: .74rem; }
.conv-list .nav-badge { margin-left: auto; }
.chat-settings { margin-top: .4rem; }
.dm-head { display: flex; align-items: center; gap: .8rem; margin: .4rem 0 1rem; flex-wrap: wrap; }
.dm-head img, .dm-head .avatar-initial { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.dm-head > div { display: grid; flex: 1; min-width: 0; }
.dm-head h1 { margin: 0; overflow-wrap: anywhere; }

/* the raid chat */
.raid-chat, .ranked-chat { margin-top: 1rem; }
.ranked-chat { display: block; }
.ranked-chat .chat-list { max-height: 260px; }
.raid-chat .chat, .ranked-chat .chat { border-radius: var(--radius-ui) var(--radius-ui) 0 0; }
.raid-chat .chat-form, .ranked-chat .chat-form { border-radius: 0 0 var(--radius-ui) var(--radius-ui); }

/* open co-op lobbies */
.open-lobbies { margin: 0 0 1rem; padding: .9rem 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--sky); }
.open-lobbies h2 { margin: 0 0 .6rem; }
.open-lobbies ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.open-lobbies li { --c: var(--teal); display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .55rem .7rem; border-radius: var(--radius-ui);
  background: var(--night); border: 2px solid var(--night-3); border-left: 5px solid var(--c); }
.open-lobbies li.tier-hard { --c: var(--gold); } .open-lobbies li.tier-nightmare { --c: var(--magenta); } .open-lobbies li.tier-heaven { --c: #FF4DA0; }
.open-lobbies form { margin: 0 0 0 auto; }
.open-lobby-who { display: grid; min-width: 0; }
.open-lobby-seats { display: flex; gap: .25rem; }
.open-lobby-seats i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--night-3); }
.open-lobby-seats i.taken { background: var(--c); border-color: var(--ink); }
.open-check { margin-top: .2rem; }

/* milestone titles on the profile */
.title-goals { margin-top: .2rem; font-weight: 400; }
.title-goals summary { cursor: pointer; font-weight: 700; color: var(--gold); }
.title-goals ul { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .35rem .9rem; }
.title-goals li { display: grid; padding: .35rem .55rem; border-radius: var(--radius-ui); background: var(--night); border: 1px solid var(--night-3); }
.title-goals li.earned { border-color: var(--sky); }
.title-goals li.earned strong { color: var(--sky); }
.title-goals li small { font-size: .74rem; }

/* admin: a reported message */
.report-message { margin: 0; padding: .5rem .8rem; border-left: 4px solid var(--magenta); background: rgb(214 36 110 / .08); border-radius: 0 var(--radius-ui) var(--radius-ui) 0; }
.report-message p { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }


/* The daily streak: a growing flame, the week's Dust bonus, the shield, the next milestone */
.streak-head { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .5rem; }
.streak-flame { font-size: 1.6rem; line-height: 1; filter: drop-shadow(0 0 6px rgb(255 159 67 / .6)); }
.streak-flame.lv1 { font-size: 1.9rem; } .streak-flame.lv2 { font-size: 2.2rem; } .streak-flame.lv3 { font-size: 2.5rem; }
.streak-flame.lv4 { font-size: 2.8rem; filter: drop-shadow(0 0 10px rgb(244 197 66 / .8)) hue-rotate(-15deg); }
.streak-info { display: grid; min-width: 0; }
.streak-info small { font-size: .74rem; }
.streak-mult { color: var(--gold); }
.streak li { padding: .35rem .1rem .3rem; border: 1px solid transparent; }
.streak-icon { font-size: .9rem; line-height: 1.1; }
.streak li.big { background: linear-gradient(180deg, rgb(244 197 66 / .22), var(--night-3)); color: var(--gold); }
.streak li.done .streak-icon::after { content: " ✓"; font-size: .7rem; color: var(--teal); }
.streak-goal { display: grid; gap: .25rem; margin: -.3rem 0 .8rem; font-size: .76rem; color: var(--muted); }
.streak-goal .meter { height: 6px; margin: 0; }
.streak-goal .meter i { background: linear-gradient(90deg, var(--sky-deep), var(--sky)); }
.streak-milestone { margin: 0 0 .5rem; padding: .5rem .7rem; border-radius: var(--radius-ui); background: rgb(244 197 66 / .15); border: 2px solid var(--gold); font-weight: 700; color: var(--gold); }

/* The chat bubble: bottom right, above the phone dock; the loader moves to the left */
.chat-bubble { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 65; }
.chat-bubble > summary { list-style: none; position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: var(--sky); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--sky-deep), 0 8px 20px rgb(0 0 0 / .4); font-size: 1.5rem; }
.chat-bubble > summary::-webkit-details-marker { display: none; }
.chat-bubble[open] > summary { background: var(--paper); }
.chat-bubble-panel { position: absolute; right: 0; bottom: 66px; width: min(360px, calc(100vw - 32px)); display: grid; border-radius: var(--radius-card); overflow: hidden;
  background: var(--night-2); border: 2px solid var(--ink); box-shadow: 0 16px 40px rgb(0 0 0 / .55); }
.chat-bubble-head { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; background: var(--night-3); font-size: .85rem; }
.chat-bubble-head strong { margin-right: auto; }
.chat-bubble-head a { color: var(--sky); text-decoration: none; font-weight: 700; }
.chat-bubble .chat { border-radius: 0; border: 0; }
.chat-bubble .chat-list { height: min(46vh, 340px); }
.chat-bubble .chat-form { border-radius: 0; border-width: 1px 0 0; }
.dododo { right: auto; left: 1rem; }
@media (max-width: 1023px) { .chat-bubble { bottom: calc(5.4rem + env(safe-area-inset-bottom)); right: .8rem; } .chat-bubble > summary { width: 48px; height: 48px; font-size: 1.25rem; } }
.cine-open .chat-bubble, .tour:not([hidden]) ~ .chat-bubble, .install-open .chat-bubble { display: none; }

/* The signature stand on the Stand User file is its actual card */
.file-stand.file-card { width: clamp(110px, 15vw, 150px); aspect-ratio: auto; align-self: center; rotate: 3deg; }
.file-stand.file-card .card { width: 100%; box-shadow: 4px 5px 0 var(--ink); }
@media (max-width: 760px) { .file-stand.file-card { position: static; opacity: 1; width: 110px; grid-column: 1 / -1; justify-self: center; rotate: 0deg; } }

/* News up front: the kind badge, the patch notes card on the home page, the ribbon on every page */
.news-kind { display: inline-block; margin-right: .4rem; padding: .05rem .5rem; border-radius: 999px; font: 700 .68rem/1.5 var(--body); font-style: normal; background: var(--night-3); color: var(--paper); }
.news-kind.kind-patch { background: var(--sky); color: var(--ink); }
.news-kind.kind-event { background: var(--magenta); color: #fff; }
.patch-card { display: grid; gap: .3rem; margin-bottom: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-card); text-decoration: none; color: var(--paper);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--sky-deep); background: radial-gradient(circle at 1px 1px, rgb(58 180 242 / .2) 1px, transparent 1.5px) 0 0 / 8px 8px, var(--night-2); }
.patch-card:hover { color: var(--paper); transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--sky-deep); }
.patch-tag { justify-self: start; padding: .1rem .6rem; border-radius: 999px; background: var(--sky); color: var(--ink); font-weight: 700; font-size: .78rem; }
.patch-card strong { font: 400 var(--step-2)/1.15 var(--display); }
.patch-card time { color: var(--muted); font-size: .8rem; }
.news-ribbon { display: flex; align-items: center; gap: .7rem; padding: .55rem max(1rem, (100% - 1200px) / 2); text-decoration: none; color: var(--ink); background: var(--sky); border-bottom: 2px solid var(--ink); font-size: .9rem; }
.news-ribbon[hidden] { display: none; }
.news-ribbon.kind-event { background: var(--gold); }
.news-ribbon:hover { color: var(--ink); }
.news-ribbon-tag { flex: none; font-weight: 700; }
.news-ribbon strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-ribbon-go { margin-left: auto; flex: none; font-weight: 700; }
.news-ribbon-x { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
@media (max-width: 640px) { .news-ribbon-go { display: none; } .news-ribbon strong { margin-right: auto; } }

/* The streak strip fits a narrow tile (7 cells in ~220px): day, one symbol, a short value; the full reward is in the title and for screen readers */
.streak li { position: relative; min-width: 0; overflow: hidden; padding: .3rem 0 .25rem; gap: .1rem; line-height: 1.1; border: 1px solid transparent; }
.streak li small { font-size: .58rem; font-weight: 700; }
.streak li b { font-size: .64rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.streak-icon { font-size: .85rem; line-height: 1; }
.streak li.done .streak-icon::after { content: none; }
.streak li.done .streak-icon { color: var(--teal); }
.streak li.next { border-color: var(--gold); box-shadow: none; }
.streak li.big b { color: var(--gold); }
.streak-head { flex-wrap: wrap; }
.streak-info small { line-height: 1.35; }
.streak-goal span:first-child { overflow-wrap: anywhere; }

/* ===================================================================================
   Summon page, in the style of the dungeon and raid pages: ink borders, offset shadows, gauges, the Arrow
   =================================================================================== */
.summon-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "emblem title wallet" "gauges gauges gauges";
  gap: 1rem 1.3rem; align-items: center; margin-bottom: 1.2rem; padding: 1.2rem 1.3rem; border-radius: var(--radius-card);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 8% 40%, rgb(244 197 66 / .2), transparent 50%), repeating-linear-gradient(-55deg, transparent 0 14px, rgb(255 255 255 / .03) 14px 15px), var(--night-2); }
.summon-emblem { grid-area: emblem; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 38%, #3A2066, var(--night) 70%); box-shadow: 0 0 0 3px var(--gold), 0 0 24px rgb(244 197 66 / .45); }
.summon-arrow { width: 64px; height: 64px; filter: drop-shadow(2px 2px 0 var(--ink)); animation: summon-float 2.4s ease-in-out infinite alternate; }
@keyframes summon-float { to { translate: 0 -4px; } }
.summon-title { grid-area: title; display: grid; gap: .2rem; min-width: 0; }
.summon-title h1, .summon-title p { margin: 0; }
.summon-rotate { justify-self: start; padding: .2rem .7rem; border-radius: 999px; border: 2px dashed var(--gold); background: rgb(244 197 66 / .08); font-size: .85rem; }
.summon-wallet { grid-area: wallet; justify-self: end; }
.summon-gauges { grid-area: gauges; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .7rem; }
.gauge { display: grid; gap: .35rem; max-width: none; padding: .65rem .8rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); }
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gauge-head b { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.gauge-head strong { font: 400 1.35rem/1 var(--display); color: var(--paper); }
.gauge-head strong small { font-size: .8rem; color: var(--muted); }
.gauge .meter { height: 10px; margin: 0; }
.gauge.pity .meter i { background: linear-gradient(90deg, var(--sky-deep), var(--sky)); }
.gauge.sparks .meter i { background: linear-gradient(90deg, var(--gold), var(--magenta)); }
.gauge.sparks.ready { border-color: var(--gold); box-shadow: 0 0 16px rgb(244 197 66 / .3); }
.gauge small { font-size: .74rem; }
@media (max-width: 700px) {
  .summon-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "emblem title" "wallet wallet" "gauges gauges"; }
  .summon-emblem { width: 70px; height: 70px; } .summon-arrow { width: 48px; height: 48px; }
  .summon-wallet { justify-self: start; }
}

/* the banners: cards with a colour stripe, the art carrying its counts, a big pull button */
.banners { gap: 1.3rem; }
.banner { position: relative; padding: 1.1rem; border: 3px solid var(--ink); border-top: 6px solid var(--violet); box-shadow: 5px 5px 0 var(--night-3); }
.banner.themed { border-top-color: var(--gold); border-color: var(--ink); background: linear-gradient(120deg, rgb(244 197 66 / .12), var(--night-2) 55%); }
.banner.has-lr { border-top-color: transparent; border-image: none; }
.banner.has-lr::before { content: ""; position: absolute; left: -3px; right: -3px; top: -6px; height: 6px; border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal), var(--violet), var(--gold)); }
.banner-art-link { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.banner-lr-tag { position: absolute; left: .5rem; top: .5rem; padding: .15rem .55rem; border-radius: 6px; border: 2px solid var(--ink); rotate: -4deg;
  background: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal)); color: var(--ink); font: 400 .78rem var(--display); }
.banner-body h2 { margin: 0; }
.banner-pool a { border-width: 2px; border-color: var(--muted); }
.banner-pool .rar-rare a { border-color: var(--violet); }
.banner-pool .rar-epic a { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.banner-pool .rar-legend a { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta); }
.banner-pool .rar-mythic a { border-color: var(--gold); box-shadow: 0 0 0 2px var(--magenta), 0 0 12px rgb(214 36 110 / .5); }
.banner-pool a:hover { transform: translateY(-2px); }
.banner-pool a { transition: transform .1s; }
.banner-actions { align-items: center; }
.banner-actions .pull-10 { min-width: 12rem; }
.banner-actions .btn[disabled] { filter: grayscale(.6); }

/* the calendar and recent pulls, as cards */
.calendar > li { border: 2px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night-2); }
.calendar > li.now { border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--gold), 4px 4px 0 var(--night-3); }
.cal-today { display: inline-block; padding: .05rem .55rem; rotate: -3deg; border: 2px solid var(--ink); border-radius: 6px; background: var(--gold); color: var(--ink); font: 400 .9rem var(--display); }
.cal-face { border: 2px solid var(--ink); }
.pull-history li { border: 2px solid var(--night-3); }
.pull-history li:has(b) { border-color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .summon-arrow { animation: none; } }

/* ===================================================================================
   Shared page pieces in the newer style (team, gangs, the collection pages, and every page with a player-bar):
   the header is a hero card, panels are cards. Cheap on purpose: solid borders, unblurred offset shadows, no
   animation, nothing applied per stand card.
   =================================================================================== */
.player-bar { padding: 1rem 1.2rem; border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: repeating-linear-gradient(-55deg, transparent 0 14px, rgb(255 255 255 / .03) 14px 15px), var(--night-2); }
.player-bar .display { margin-bottom: .2rem; }
.player-bar .kicker { margin-bottom: .1rem; }
.fight .player-bar, .player-bar .player-bar { box-shadow: none; }
.social-panel { margin: 1rem 0 1.4rem; padding: 1rem 1.1rem; border-radius: var(--radius-card); border: 2px solid var(--night-3); border-block: 2px solid var(--night-3);
  background: var(--night-2); }
.social-panel > .h2:first-child, .social-panel > .h3:first-child, .social-panel > .social-heading:first-child { margin-top: 0; }
.social-panel .social-panel { background: var(--night); }
.action-tile { border-top: 4px solid var(--gold); }
.action-tile h2 { margin-top: 0; }
.shelf-head h2::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5rem; rotate: 45deg; vertical-align: .12em; background: var(--gold); }
.forge-card, .sim-form { border: 2px solid var(--night-3); }
.forge-card { box-shadow: 4px 4px 0 var(--ink); }
.item-tile.ready { box-shadow: inset 4px 0 0 var(--gold); }

.gang-hero { padding: 1.2rem; border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 10% 30%, rgb(214 36 110 / .18), transparent 55%), var(--night-2); }
.gang-grid { gap: 0 1.4rem; }
.gang-grid > .social-panel { margin-block: .5rem 1rem; }
@media (max-width: 640px) { .player-bar, .gang-hero { padding: .9rem; box-shadow: 3px 3px 0 var(--night-3); } }

/* Planner: other gear on your own copy, refine levels; the team page's Plan this team */
.plan-over { margin: .3rem 0; color: var(--paper); font-size: var(--step--1); }
.plan-over-items { margin-top: .3rem; }
.plan-refine { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--step--1); font-weight: 700; color: var(--muted); }
.plan-refine select { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .2rem .35rem; }
.shelf-head .plan-this { margin-left: auto; }

/* Over Heaven difficulty stars */
.oh-diff { font-size: .8em; letter-spacing: .05em; color: var(--sky); white-space: nowrap; }
.oh-diff.d4 { color: var(--gold); } .oh-diff.d5 { color: #FF4DA0; }
.oh-diff-off { color: var(--night-3); }

/* admin: the PvE unlock checklist on a player page */
.pve-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pve-check li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) minmax(7rem, auto); gap: .7rem; align-items: center;
  padding: .5rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.pve-check li.sub { margin-left: 1.6rem; }
.pve-check li.done { border-color: var(--sky-deep); }
.pve-box { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 5px; border: 2px solid var(--muted); font-weight: 700; }
.pve-check li.done .pve-box { background: var(--sky); border-color: var(--ink); color: var(--ink); }
.pve-name { display: grid; min-width: 0; }
.pve-state { display: grid; gap: .2rem; justify-items: end; font-size: .85rem; }
.pve-state .meter { width: 7rem; height: 8px; margin: 0; }
.pve-check li.locked .pve-name strong { color: var(--muted); }
@media (max-width: 560px) { .pve-check li { grid-template-columns: 1.6rem minmax(0, 1fr); } .pve-state { grid-column: 2; justify-items: start; } .pve-check li.sub { margin-left: .6rem; } }

/* ===================================================================================
   Part 10 · Carry Me: Joyce's hero, her resolve (hope -> justice), the lineage strip
   =================================================================================== */
.cm-hero { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto; grid-template-areas: "joyce title progress" "joyce resolve resolve";
  gap: .8rem 1.3rem; align-items: center; margin-bottom: 1.2rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-card);
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 15% 50%, rgb(58 180 242 / .22), transparent 55%), repeating-linear-gradient(-55deg, transparent 0 14px, rgb(255 255 255 / .03) 14px 15px), var(--night-2); }
.cm-joyce { grid-area: joyce; width: 100%; height: auto; border-radius: var(--radius-ui); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--sky); }
.cm-title { grid-area: title; min-width: 0; } .cm-title h1, .cm-title p { margin: 0 0 .3rem; }
.cm-hero .story-progress { grid-area: progress; }
.cm-resolve { grid-area: resolve; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cm-resolve-label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cm-resolve ol { display: flex; flex: 1; gap: 0; margin: 0; padding: 0; list-style: none; min-width: 0; }
.cm-resolve li { flex: 1; padding: .3rem .4rem; text-align: center; font-size: .8rem; background: var(--night); color: var(--muted);
  border: 2px solid var(--night-3); margin-left: -2px; }
.cm-resolve li:first-child { border-radius: 999px 0 0 999px; margin-left: 0; } .cm-resolve li:last-child { border-radius: 0 999px 999px 0; }
.cm-resolve li.on { background: linear-gradient(90deg, var(--sky-deep), var(--sky)); color: var(--ink); border-color: var(--ink); }
.cm-resolve li.on:nth-child(n+4) { background: linear-gradient(90deg, var(--magenta), #FF7A3D); }
.cm-resolve li.now { font-weight: 700; box-shadow: 0 0 12px rgb(58 180 242 / .5); }
.cm-lineage { margin-bottom: 1.2rem; }
.cm-lineage h2 { margin: 0 0 .5rem; }
.cm-lineage ol { display: flex; gap: .55rem; margin: 0; padding: .2rem 0 .4rem; list-style: none; overflow-x: auto; }
.cm-lineage li { flex: 0 0 auto; display: grid; justify-items: center; gap: .25rem; width: 76px; text-align: center; font-size: .7rem; }
.cm-lineage img { width: 64px; height: 64px; object-fit: cover; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--sky); background: var(--night); }
.cm-lineage li.lost img { filter: brightness(0) opacity(.45); box-shadow: 0 0 0 2px var(--night-3); }
.cm-lineage li.lost span { color: var(--muted); }
.cm-guest li a { border-color: var(--sky) !important; box-shadow: 0 0 0 2px var(--sky); }
.cm-forms { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; padding: .6rem; border: 2px dashed var(--sky); border-radius: var(--radius-ui); }
.cm-forms legend { padding: 0 .3rem; font-size: .85rem; color: var(--sky); }
.cm-forms label { display: grid; justify-items: center; gap: .2rem; width: 72px; padding: .3rem; border-radius: var(--radius-ui); border: 2px solid var(--night-3); font-size: .68rem; text-align: center; cursor: pointer; }
.cm-forms label:has(input:checked) { border-color: var(--sky); background: rgb(58 180 242 / .12); }
.cm-forms input { position: absolute; opacity: 0; pointer-events: none; }
.cm-forms label:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
.cm-forms img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.carry-me .node-replay select { max-width: 8rem; font-size: .75rem; }
@media (max-width: 760px) {
  .cm-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "joyce" "title" "progress" "resolve"; }
  .cm-joyce { max-width: 360px; }
  .cm-resolve li { font-size: .7rem; padding: .25rem .2rem; }
}

/* level gates on story / AU / Carry Me stages */
.level-gate { display: grid; gap: .45rem; border-color: var(--gold); }
.level-gate .meter { height: 8px; margin: 0; max-width: 18rem; }

/* ===================================================================================
   Team presets: a grid of MAX_TEAMS slot cards (filled first, then empty), the active one lit
   =================================================================================== */
.presets { margin-top: 1.4rem; padding: 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.presets-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.presets-head h3 { margin: 0; }
.presets-count { font-size: .85rem; color: var(--muted); } .presets-count strong { font: 400 1.2rem/1 var(--display); color: var(--paper); }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.preset-card { display: grid; align-content: start; gap: .55rem; padding: .65rem .7rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); min-width: 0; }
.preset-card.active { border-color: var(--sky); box-shadow: 0 0 0 1px var(--sky), 3px 3px 0 var(--ink); }
.preset-card.broken { border-style: dashed; }
.preset-card.empty { border-style: dashed; background: transparent; min-height: 5.5rem; }
.preset-top { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.preset-num { display: grid; place-items: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 2px solid var(--ink);
  background: var(--gold); color: var(--ink); font: 400 .8rem/1 var(--display); rotate: -4deg; }
.preset-card.empty .preset-num { background: var(--night-3); color: var(--muted); border-color: var(--night-3); }
.preset-card.active .preset-num { background: var(--sky); }
.preset-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; text-transform: capitalize; }
.preset-badge { flex: 0 0 auto; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; background: var(--sky); color: var(--ink); font-weight: 700; }
.preset-badge.warn { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.preset-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: 0; padding: 0; list-style: none; }
.preset-members li { display: grid; justify-items: center; gap: .15rem; min-width: 0; font-size: .66rem; text-align: center; }
.preset-members li span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-members img { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; border: 2px solid var(--muted); background: var(--night-2); }
.preset-members .rar-rare img { border-color: var(--violet); } .preset-members .rar-epic img { border-color: var(--gold); }
.preset-members .rar-legend img { border-color: var(--magenta); } .preset-members .rar-mythic img { border-color: var(--gold); box-shadow: 0 0 0 2px var(--magenta); }
.preset-members .gone img { opacity: .35; border-style: dashed; } .preset-members .gone span { color: var(--muted); }
.preset-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.preset-actions .btn.danger { margin-left: auto; }
.preset-save { display: flex; flex-wrap: wrap; gap: .4rem; }
.preset-save label { flex: 1 1 8rem; } .preset-save input { width: 100%; }
/* admin checklist debug toggles */
.pve-check li { grid-template-columns: 1.6rem minmax(0, 1fr) auto minmax(7rem, auto); }
.pve-debug { margin: 0; } .pve-check .pve-state { grid-column: -2; }
@media (max-width: 560px) { .pve-check li { grid-template-columns: 1.6rem minmax(0, 1fr); } .pve-debug, .pve-check .pve-state { grid-column: 2; } }

/* ===================================================================================
   The unified chat bubble: tabs (global, gang, messages), conversations inline, red dots for unread
   =================================================================================== */
.red-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #FF3B3B; border: 2px solid var(--ink); box-shadow: 0 0 6px rgb(255 59 59 / .7); vertical-align: middle; }
.chat-bubble > summary .chat-dots { position: absolute; top: -2px; right: -2px; line-height: 0; }
.chat-bubble > summary .red-dot { width: 16px; height: 16px; animation: red-dot-pulse 1.6s ease-in-out infinite; }
@keyframes red-dot-pulse { 50% { transform: scale(1.18); } }
.bubble-inner { display: grid; min-width: 0; }
.bubble-tabs { display: flex; align-items: stretch; gap: 0; background: var(--night-3); }
.bubble-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .4rem; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bubble-tab:hover { color: var(--paper); }
.bubble-tab.on { color: var(--paper); border-bottom-color: var(--sky); background: rgb(58 180 242 / .08); }
.bubble-tab .tab-dot { line-height: 0; }
.bubble-full { display: grid; place-items: center; padding: 0 .7rem; color: var(--sky); text-decoration: none; font-weight: 700; }
.bubble-note { margin: 0; padding: 1.2rem 1rem; font-size: .88rem; }
.bubble-convs { list-style: none; margin: 0; padding: .3rem; height: min(46vh, 340px); overflow-y: auto; background: var(--night-2); }
.bubble-conv { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .55rem; border: 0; border-radius: var(--radius-ui); background: none; color: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.bubble-conv:hover, .bubble-conv:focus-visible { background: var(--night-3); }
.bubble-conv .avatar, .bubble-conv .avatar-initial { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; }
.bubble-conv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble-conv.unread .bubble-conv-name { font-weight: 700; }
.bubble-conv time { font-size: .72rem; }
.bubble-dm-head { display: flex; align-items: center; gap: .6rem; padding: .4rem .6rem; background: var(--night-2); border-bottom: 1px solid var(--night-3); }
.bubble-dm-head strong { color: var(--paper); }
.bubble-dm-head a:last-child { margin-left: auto; text-decoration: none; }
.chat-bubble .bubble-dm .chat-list { height: min(40vh, 300px); }
@media (prefers-reduced-motion: reduce) { .chat-bubble > summary .red-dot { animation: none; } }

/* wiki: the progression guide's roadmap */
.guide-steps { display: grid; gap: .5rem; padding-left: 1.4rem; }
.guide-road { list-style: none; margin: 1rem 0; padding: 0 0 0 1.1rem; display: grid; gap: .55rem; border-left: 3px solid var(--night-3); }
.guide-road li { position: relative; display: flex; align-items: flex-start; gap: .8rem; padding: .55rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); border-left: 4px solid var(--part, var(--sky)); }
.guide-road li::before { content: ""; position: absolute; left: calc(-1.1rem - 9px); top: 1rem; width: 12px; height: 12px; border-radius: 50%; background: var(--part, var(--sky)); border: 2px solid var(--ink); }
.guide-road li > div { display: grid; gap: .15rem; min-width: 0; }
.guide-lv { flex: 0 0 auto; min-width: 3.4rem; padding: .15rem .4rem; border-radius: 6px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); font: 400 .8rem var(--display); text-align: center; rotate: -3deg; }
.guide-opens { font-size: .82rem; color: var(--sky); }
.wiki-feature-card.guide { border-color: var(--sky); box-shadow: 0 0 0 2px var(--sky); }

/* picker repeat mode: the picked copies, each removable */
.sp-picked { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 100%; }
.sp-picked-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .45rem .2rem .25rem; border-radius: 999px; border: 2px solid var(--night-3);
  background: var(--night-2); color: var(--paper); font: inherit; font-size: .75rem; cursor: pointer; }
.sp-picked-chip img, .sp-picked-chip .sp-emoji { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; font-size: .9rem; }
.sp-picked-chip b { color: var(--muted); } .sp-picked-chip:hover b { color: #FF3B3B; }
.sp-foot { flex-wrap: wrap; }

/* ===================================================================================
   Puzzles (daily and personal): the crew beside a squad builder, a ladder on the side
   =================================================================================== */
.pz-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center; margin-bottom: 1rem; padding: 1.1rem 1.2rem;
  border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse at 10% 50%, rgb(58 180 242 / .2), transparent 55%), repeating-linear-gradient(45deg, transparent 0 14px, rgb(255 255 255 / .03) 14px 15px), var(--night-2); }
.pz-emblem { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 18px; border: 3px solid var(--ink); background: var(--sky); font-size: 2.4rem; rotate: -6deg; box-shadow: 3px 3px 0 var(--ink); }
.pz-title h1, .pz-title p { margin: 0 0 .3rem; }
.pz-next { display: grid; justify-items: end; gap: .1rem; padding: .5rem .8rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); font-size: .75rem; }
.pz-next strong { font: 400 1.4rem/1 var(--display); color: var(--sky); }
.pz-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pz-tabs a { display: grid; padding: .55rem 1rem; border-radius: var(--radius-ui); border: 2px solid var(--night-3); background: var(--night-2); color: var(--paper); text-decoration: none; font-weight: 700;
  transition: translate .15s, box-shadow .15s; }
.pz-tabs a:hover { translate: 0 -2px; }
.pz-tabs a small { font-weight: 400; color: var(--muted); font-size: .72rem; }
.pz-tabs a.on { border-color: var(--ink); background: var(--sky); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pz-tabs a.on small { color: var(--ink); }
.pz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.pz-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.pz-panel { padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.pz-panel > .h3:first-child, .pz-panel > .h2:first-child { margin-top: 0; }
.pz-wait { display: grid; justify-items: center; text-align: center; gap: .5rem; }
/* the reveal: a sealed case file, its odds as big figures */
.pz-reveal { overflow: hidden; padding: 1.4rem 1.5rem; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--sky), 6px 6px 0 var(--night-3);
  background: radial-gradient(circle at 100% 0%, rgb(58 180 242 / .25), transparent 45%), var(--night-2); }
.pz-reveal .h2 { margin: .1rem 0 1rem; }
.pz-reveal-mark { position: absolute; right: -.6rem; top: -1.6rem; z-index: -1; font: 400 11rem/1 var(--display); color: var(--sky); opacity: .14; rotate: 12deg; pointer-events: none; }
.pz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.pz-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .2rem; padding: .7rem .8rem; border-radius: var(--radius-ui);
  background: var(--night); border: 2px solid var(--night-3); }
.pz-facts dt { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.pz-facts dd { margin: 0; font: 400 1.7rem/1.05 var(--display); color: var(--paper); }
.pz-facts dd small { font-size: .55em; color: var(--muted); }
.pz-prize { margin: 0 0 1.1rem; padding: .55rem .8rem; border-radius: var(--radius-ui); background: rgb(244 197 66 / .12); border-left: 4px solid var(--gold); }
.pz-prize strong { color: var(--gold); }
/* the clock */
.pz-status { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pz-status p { margin: 0; font-size: 1.05rem; }
.pz-clock { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .9rem; border-radius: 999px; background: var(--night); border: 2px solid var(--sky); box-shadow: 3px 3px 0 var(--ink); }
.pz-clock strong, .pz-solved strong { font-family: var(--display); color: var(--gold); }
.pz-board { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pz-sub { margin: 1.1rem 0 .5rem; font-size: .95rem; }
/* the crew: the other side of the VS */
.pz-crew { border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgb(214 36 110 / .7), 5px 5px 0 var(--night-3);
  background: linear-gradient(180deg, rgb(214 36 110 / .2), var(--night-2) 45%); }
.pz-crew > .h3 { display: flex; align-items: center; gap: .5rem; }
.pz-crew > .h3::after { content: "VS"; margin-left: auto; padding: .1rem .5rem; border-radius: 8px; background: var(--magenta); color: var(--paper);
  font: 400 .9rem/1.3 var(--display); rotate: -6deg; box-shadow: 2px 2px 0 var(--ink); }
.pz-foes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pz-foes a { display: grid; justify-items: center; gap: .2rem; width: 76px; font-size: .7rem; text-align: center; color: var(--paper); text-decoration: none; }
.pz-foes img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--magenta); background: var(--night); box-shadow: 0 0 14px rgb(214 36 110 / .45); }
.pz-foe-build { margin: .6rem 0 0; font-size: .85rem; }
.pz-rules { margin: 0; } .pz-check { margin: .8rem 0 0; font-size: .78rem; color: var(--sky); }
/* the squad */
.pz-build { border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgb(58 180 242 / .6), 5px 5px 0 var(--night-3); }
.pz-squad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pz-slot { display: grid; justify-items: center; align-content: start; gap: .2rem; min-height: 6.6rem; padding: .55rem .35rem; border-radius: var(--radius-ui);
  border: 2px solid var(--ink); background: radial-gradient(circle at 50% 30%, rgb(58 180 242 / .3), transparent 70%), var(--night); text-align: center;
  box-shadow: 3px 3px 0 var(--sky); animation: wts-in .25s ease-out; }
.pz-slot.empty { border: 2px dashed var(--night-3); background: transparent; box-shadow: none; align-content: center; animation: none; }
.pz-slot-num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--night-3); color: var(--muted); font: 400 1.1rem/1 var(--display); }
.pz-slot img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sky); }
.pz-slot-name { font-weight: 700; font-size: .8rem; } .pz-slot-gear { font-size: .68rem; color: var(--muted); }
.pz-syn { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 1.6rem; margin: .6rem 0 0; }
.pz-lit { padding: .15rem .55rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: .75rem; font-weight: 700; border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
/* the six stands */
.pz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .5rem; }
.pz-card { position: relative; display: flex; gap: .6rem; padding: .6rem .65rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); cursor: pointer;
  transition: translate .15s, border-color .15s; }
.pz-card:hover { translate: 0 -2px; border-color: var(--muted); }
.pz-card input { position: absolute; opacity: 0; pointer-events: none; }
.pz-card:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--sky), 4px 4px 0 var(--ink); background: linear-gradient(135deg, rgb(58 180 242 / .2), var(--night) 60%); }
.pz-card:has(input:checked)::after { content: "\2713"; position: absolute; top: .35rem; right: .45rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem;
  border-radius: 50%; background: var(--sky); color: var(--ink); font-weight: 700; font-size: .8rem; }
.pz-card:has(input:disabled) { opacity: .45; cursor: not-allowed; translate: none; }
.pz-card:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
.pz-card-art img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--muted); background: var(--night-2); }
.pz-card.rar-rare .pz-card-art img { border-color: var(--violet); } .pz-card.rar-epic .pz-card-art img { border-color: var(--gold); } .pz-card.rar-legend .pz-card-art img { border-color: var(--magenta); }
.pz-card-body { display: grid; gap: .2rem; min-width: 0; font-size: .82rem; }
.pz-stats { display: flex; flex-wrap: wrap; gap: .1rem .55rem; font-size: .72rem; color: var(--muted); }
.pz-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.pz-tag { padding: .05rem .4rem; border-radius: 999px; font-size: .66rem; background: var(--night-3); }
.pz-special { color: var(--muted); font-size: .7rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the items: who carries each one, the picked stands as one segmented row */
.pz-gear-list { display: grid; gap: .45rem; }
.pz-gear { margin: 0; padding: .55rem .65rem; border: 2px solid var(--night-3); border-radius: var(--radius-ui); background: var(--night); }
.pz-gear:has(input[value]:not([value=""]):checked) { border-color: var(--gold); }
.pz-gear legend { float: left; width: 100%; margin-bottom: .4rem; font-size: .85rem; }
.pz-gear legend small { display: block; }
.pz-seg { clear: both; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .3rem; }
.pz-seg label[hidden] { display: none; }
.pz-seg span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pz-seg input:disabled + span { opacity: .4; }
.pz-go { position: sticky; bottom: .6rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: 1rem;
  padding: .6rem .8rem; border-radius: var(--radius-ui); border: 2px solid var(--ink); background: var(--night-3); box-shadow: 0 6px 18px rgb(0 0 0 / .35); }
/* ladders */
.pz-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.pz-ladder li { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: var(--radius-ui); background: var(--night); }
.pz-ladder li:nth-child(-n+3) { border-left: 3px solid var(--gold); }
.pz-ladder li.me { box-shadow: 0 0 0 2px var(--sky); }
.pz-ladder a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); }
.pz-rank { min-width: 2rem; text-align: center; font-weight: 700; } .pz-time { font-family: var(--display); color: var(--gold); }
.pz-mystats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; text-align: center; }
.pz-mystats div { display: grid; padding: .5rem .2rem; border-radius: var(--radius-ui); background: var(--night); }
.pz-mystats strong { font: 400 1.3rem/1.1 var(--display); color: var(--gold); } .pz-mystats span { font-size: .7rem; color: var(--muted); }
@media (max-width: 1100px) { .pz-layout { grid-template-columns: minmax(0, 1fr); } .pz-side { position: static; } }
@media (max-width: 760px) { .pz-board { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pz-hero { grid-template-columns: auto minmax(0, 1fr); gap: .6rem .9rem; padding: .9rem 1rem; }
  .pz-title > .muted { display: none; }  /* the tabs and the card below say it; the board comes a screen sooner */
  .pz-next { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  .pz-emblem { width: 54px; height: 54px; font-size: 1.7rem; }
  .pz-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .pz-tabs a { padding: .5rem .7rem; }
  .pz-reveal { padding: 1.1rem; }
  .pz-facts { grid-template-columns: 1fr 1fr; }
  .pz-facts dd { font-size: 1.4rem; }
  .pz-reveal .btn.big { width: 100%; }
  .pz-seg label span { padding-inline: .3rem; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .pz-slot { animation: none; } .pz-card, .pz-tabs a { transition: none; } }

/* grouped top-bar menus (Battle: Daily, Adventure, Challenges, PvP; Community: People, Market) in columns */
.nav-drop.has-cols { position: static; }
.nav-menu.cols { left: 50%; translate: -50% 0; width: min(760px, calc(100vw - 1.5rem)); max-height: calc(100vh - 5.5rem); overflow-y: auto;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .2rem .5rem; align-items: start; }
.menu-col { display: grid; gap: 2px; align-content: start; }

/* inbox: claim all / read all, and the per-notification tick */
.inbox-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.2rem; padding: .6rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.inbox-bar form { margin: 0; }
.feed-read { margin: 0 0 0 .2rem; }
.feed-tick { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--night-3); background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; }
.feed-tick:hover, .feed-tick:focus-visible { border-color: var(--sky); color: var(--sky); }
.feed-item.new { grid-template-columns: 28px minmax(0, 1fr) auto auto; }

/* ===================================================================================
   The live event, everywhere: a strip under the top bar, and a badge on spotlighted stands
   =================================================================================== */
.event-strip { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 auto; padding: .55rem 2.6rem .55rem 1rem;
  max-width: 1200px; color: var(--ink); text-decoration: none; border-bottom: 3px solid var(--ink);
  background: linear-gradient(100deg, var(--gold), #FF9F43 30%, var(--magenta) 62%, var(--violet) 85%, var(--gold));
  background-size: 300% 100%; animation: event-strip-flow 9s linear infinite; }
.event-strip[hidden] { display: none; }
body.has-side .event-strip { max-width: none; }
@media (min-width: 1240px) { .event-strip { border-radius: 0 0 var(--radius-ui) var(--radius-ui); border-inline: 3px solid var(--ink); } body.has-side .event-strip { border-radius: 0; border-inline: 0; } }
@keyframes event-strip-flow { to { background-position: 300% 0; } }
.event-strip-tag { padding: .12rem .55rem; border-radius: 6px; border: 2px solid var(--ink); background: var(--ink); color: var(--gold);
  font: 400 .78rem var(--display); rotate: -3deg; white-space: nowrap; animation: event-tag-pulse 1.8s ease-in-out infinite; }
@keyframes event-tag-pulse { 50% { transform: scale(1.07); } }
.event-strip-text { flex: 1 1 260px; min-width: 0; display: grid; line-height: 1.25; }
.event-strip-text strong { font: 400 1.05rem var(--display); }
.event-strip-text span { font-size: .82rem; font-weight: 700; }
.event-strip-time { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.event-strip-time b { font-family: var(--display); font-weight: 400; font-size: .95rem; }
.event-strip-go { padding: .3rem .75rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.event-strip:hover .event-strip-go { background: var(--night-2); color: var(--gold); }
.event-strip-x { position: absolute; top: 50%; right: .5rem; translate: 0 -50%; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  border: 2px solid var(--ink); background: rgb(255 255 255 / .35); color: var(--ink); font-weight: 700; cursor: pointer; }
.event-strip-x:hover { background: var(--paper); }
@media (max-width: 640px) { .event-strip { padding: .5rem 2.4rem .5rem .7rem; } .event-strip-go { display: none; } .event-strip-text { flex-basis: 100%; order: 3; } }
/* the stands the event boosts */
.event-badge { display: inline-block; margin-left: 3px; font-size: .9rem; line-height: 1; filter: drop-shadow(0 0 4px #FF4DA0); animation: event-tag-pulse 1.8s ease-in-out infinite; }
.card:has(.event-badge) { box-shadow: 0 0 0 2px var(--magenta), 0 0 14px rgb(214 36 110 / .45); }
@media (prefers-reduced-motion: reduce) { .event-strip, .event-strip-tag, .event-badge { animation: none; } }

/* "Back to your fight" inside a notice or a pop-up */
.back-to-fight { display: inline-flex; margin: .35rem 0 0 .3rem; vertical-align: middle; white-space: nowrap; }
.toast-pop .toast-btn { margin: .4rem 0 0; }

/* never squeezed: puzzle portraits and the report buttons keep their size inside flex rows */
.pz-card-art, .pz-foes img, .pz-slot img, .pz-card-art img { flex: none; }
.pz-card-art img, .pz-foes img, .pz-slot img { max-width: none; aspect-ratio: 1; display: block; }
.report-box { flex: none; }
.report-box > summary { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.chat-report-form { display: flex; flex: none; }
.chat-report, .chat-del { flex: none; display: grid; place-items: center; padding: 0; line-height: 1; min-width: 26px; aspect-ratio: 1; }
@media (hover: none) { .chat-report, .chat-del { min-width: 32px; } }

/* admin puzzle log */
.pz-log-error td { color: #FF8A8A; } .pz-log-empty td { color: var(--gold); } .pz-log td:first-child { white-space: nowrap; }

/* ===================================================================================
   THE BIZARRE LAYER: screentone, part colours and the big moments.
   H  screentone: halftone dots fade in from one corner of every hero and panel (an overlay; their own look is kept).
   F  part palettes: a page about one part, or the part you're on (body[data-part]), tints the page, a stripe down
      its panels' left edge and their dots.
   I  speed lines (.speedlines) behind the big moments; B the stand reveal; C the VS splash.
   =================================================================================== */
:is(.player-bar, .summon-hero, .pz-hero, .cm-hero, .raid-hero, .gang-hero, .event-hero, .social-panel, .pz-panel, .admin-card, .story-stage, .action-tile, .gang-hub, .push-card) { --tone: var(--gold); position: relative; isolation: isolate; }
/* the screentone: an overlay above the panel's own background, below its content, following its rounded corners */
:is(.player-bar, .summon-hero, .pz-hero, .cm-hero, .raid-hero, .gang-hero, .event-hero, .social-panel, .pz-panel, .admin-card, .story-stage, .action-tile, .gang-hub, .push-card)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone) 22%, transparent) 1.1px, transparent 1.5px) 0 0 / 6px 6px;
  -webkit-mask-image: linear-gradient(130deg, transparent 45%, #000 100%); mask-image: linear-gradient(130deg, transparent 45%, #000 100%);
}
/* each panel's dots in its own colour */
.pz-hero, .cm-hero, .pz-reveal { --tone: var(--sky); }
.raid-hero, .gang-hero, .event-hero, .pz-crew, .gang-hub { --tone: var(--magenta); }
.story-stage { --tone: var(--part); }

/* F: a part's page takes its colours */
body[data-part] {
  background:
    radial-gradient(ellipse 90% 45% at 50% -8%, color-mix(in srgb, var(--part) 38%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--part) 22%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--night);
}
body[data-part] .kicker { color: var(--part-2); }
body[data-part] :is(.player-bar, .summon-hero, .pz-hero, .cm-hero, .social-panel) { --tone: var(--part-2); border-left: 6px solid var(--part); }
body[data-part] .display, body[data-part] .h2 { text-shadow: 3px 3px 0 color-mix(in srgb, var(--part) 70%, var(--ink)); }

/* I: speed lines, behind the big moments (UR/LR pulls, a solved puzzle, the stand reveal, the VS splash) */
.speedlines, .slam-lines, .burst-lines { will-change: transform, opacity; backface-visibility: hidden; }
.speedlines { position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--sl, rgb(255 243 220 / .4)) 0deg 1.2deg, transparent 1.2deg 6.5deg);
  -webkit-mask-image: radial-gradient(circle, transparent 15%, #000 45%); mask-image: radial-gradient(circle, transparent 15%, #000 45%);
  animation: sl-flicker .24s steps(2) infinite; }
@keyframes sl-flicker { 50% { transform: rotate(2.5deg); } }
.pull-showcase.big-pull { position: relative; isolation: isolate; overflow: hidden; }
.pull-showcase.big-pull .speedlines { --sl: rgb(244 197 66 / .32); }
.pz-status.solved { position: relative; isolation: isolate; overflow: hidden; padding: .7rem .9rem; border-radius: var(--radius-ui); border: 3px solid var(--ink); background: var(--night-2); }
.pz-status.solved .speedlines { --sl: rgb(244 197 66 / .22); }

/* B: the stand reveal, a screen-wide title card when a special fires (app.js standReveal) */
.stand-reveal { position: fixed; inset: 0; z-index: 85; display: grid; place-content: center; text-align: center; gap: .35rem; padding: 0 12px;
  pointer-events: none; overflow: hidden; isolation: isolate; background: rgb(18 8 30 / .45); animation: sr-life 1.15s ease forwards; }
.stand-reveal .speedlines { --sl: rgb(255 243 220 / .3); }
.stand-reveal b { font: 400 clamp(1.4rem, 6vw, 3.1rem)/1.05 var(--display); color: var(--gold); letter-spacing: .02em;
  -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--ink); animation: sr-slam .5s cubic-bezier(.2, 1.4, .3, 1) both; }
.stand-reveal.foe b { color: #FF7FB6; }
.stand-reveal span { justify-self: center; padding: .15rem .7rem; border-radius: 6px; background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: .72rem; letter-spacing: .25em; text-transform: uppercase; animation: sr-rise .4s .25s ease-out both; }
.stand-reveal span:empty { display: none; }
@keyframes sr-life { 0% { opacity: 0; } 8%, 78% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sr-slam { from { transform: scale(2.6) rotate(-4deg); opacity: 0; filter: blur(5px); } 60% { transform: scale(.95) rotate(1deg); opacity: 1; filter: none; } }
@keyframes sr-rise { from { transform: translateY(10px); opacity: 0; } }

/* C: the VS splash when a big fight opens (app.js vsSplash) */
.vs-splash { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; isolation: isolate; cursor: pointer;
  background: var(--ink); animation: vs-life 1.9s ease forwards; }
.vs-splash .speedlines { --sl: rgb(244 197 66 / .2); }
.vs-panel { position: relative; display: grid; align-content: end; gap: .35rem; padding: 0 6vw 16vh; min-width: 0; }
.vs-panel.l { background: linear-gradient(135deg, var(--sky, #3AB4F2), #1B5FA8); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
  animation: vs-in-l .45s cubic-bezier(.2, .9, .3, 1) both; }
.vs-panel.r { background: linear-gradient(225deg, var(--magenta), #6B1240); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  text-align: right; justify-items: end; animation: vs-in-r .45s cubic-bezier(.2, .9, .3, 1) both; }
.vs-panel img { position: absolute; top: 12vh; width: min(30vw, 240px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid var(--ink); background: var(--night); }
.vs-panel.l img { left: 7vw; } .vs-panel.r img { right: 7vw; }
.vs-panel small { justify-self: start; padding: .1rem .6rem; border-radius: 6px; background: rgb(255 255 255 / .85); color: var(--ink); font-weight: 900; font-size: .8rem; }
.vs-panel.r small { justify-self: end; }
.vs-panel b { font: 400 clamp(1.1rem, 4vw, 2.2rem)/1.1 var(--display); color: #fff; text-transform: uppercase; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.vs-word { position: absolute; left: 50%; top: 44%; translate: -50% -50%; z-index: 2; font: 400 clamp(4rem, 14vw, 9rem)/1 var(--display); color: var(--gold);
  -webkit-text-stroke: 12px var(--ink); paint-order: stroke fill; text-shadow: 7px 7px 0 var(--ink); animation: vs-pop .5s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.vs-label { position: absolute; left: 50%; bottom: 7vh; translate: -50% 0; z-index: 2; padding: .2rem .9rem; border-radius: 6px; background: var(--paper); color: var(--ink);
  font: 700 .85rem var(--body); font-style: normal; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
.vs-label:empty { display: none; }
@keyframes vs-life { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vs-in-l { from { transform: translateX(-100%); } }
@keyframes vs-in-r { from { transform: translateX(100%); } }
@keyframes vs-pop { from { transform: scale(3) rotate(-12deg); opacity: 0; } }
@media (max-width: 640px) { .vs-panel img { top: 18vh; width: 34vw; } .vs-panel { padding-bottom: 20vh; } }
@media (prefers-reduced-motion: reduce) { .speedlines, .stand-reveal, .stand-reveal *, .vs-splash, .vs-splash * { animation: none !important; } }

/* 2. The part you're on colours every page that isn't about a part of its own: a softer glow than a part's own page */
body[data-part-from="progress"] {
  background:
    radial-gradient(ellipse 90% 40% at 50% -10%, color-mix(in srgb, var(--part) 24%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--part) 16%, transparent) 1px, transparent 1.5px) 0 0 / 14px 14px,
    var(--night);
}
body[data-part] .side-link[aria-current], body[data-part] .nav > a[aria-current] { color: var(--part-2); }
body[data-part] .side-head .side-label { color: color-mix(in srgb, var(--part-2) 75%, var(--muted)); }

/* 3. The menacing aura: UR and LR cards give off ゴゴゴ and a glow when hovered or focused */
.card:is(.legend, .mythic)::before { content: "ゴゴゴ"; position: absolute; top: 6%; right: -4px; z-index: 6; pointer-events: none;
  font: 400 1.35rem/1 var(--display); letter-spacing: -.12em; color: var(--violet); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  opacity: 0; transform: translateY(6px) scale(.7) rotate(-6deg); transition: opacity .18s, transform .18s; }
.card.mythic::before { color: var(--gold); }
.card:is(.legend, .mythic):is(:hover, :focus-within)::before { opacity: 1; transform: none; animation: menace-float 1.6s ease-in-out .2s infinite; }
.card.legend:is(:hover, :focus-within) { box-shadow: 0 0 0 2px var(--magenta), 0 0 22px 2px rgb(122 63 184 / .65); }
.card.mythic:is(:hover, :focus-within) { box-shadow: 0 0 0 2px var(--gold), 0 0 26px 4px rgb(244 197 66 / .5), 0 0 40px 8px rgb(214 36 110 / .3); }
.card.small:is(.legend, .mythic)::before { font-size: 1rem; }
@keyframes menace-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .card:is(.legend, .mythic):is(:hover, :focus-within)::before { animation: none; } }

/* gang ladder and a gang's public page */
.gang-ladder { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.gang-ladder li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .55rem .8rem;
  border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.gang-ladder li.top { border-color: var(--gold); }
.gang-ladder li.mine { box-shadow: 0 0 0 2px var(--sky); }
.gl-rank { font: 400 1.05rem var(--display); text-align: center; }
.gl-main { display: flex; align-items: center; gap: .7rem; min-width: 0; color: var(--text); text-decoration: none; }
.gl-main:hover strong { color: var(--gold); }
.gl-banner { flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); background: var(--night-3); }
.gl-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-text { display: grid; min-width: 0; } .gl-text strong, .gl-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-stats { display: flex; align-items: center; gap: .3rem .8rem; flex-wrap: wrap; justify-content: flex-end; font-size: .82rem; color: var(--muted); }
.gl-stats b { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: .95rem; }
@media (max-width: 560px) { .gang-ladder li { grid-template-columns: 2.2rem minmax(0, 1fr); } .gl-stats { grid-column: 2; justify-content: flex-start; } }
.gang-public-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 0; }
.gang-public-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: .4rem; }
.gang-public-roster a { display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border-radius: var(--radius-ui); background: var(--night); color: var(--text); text-decoration: none; }
.gang-public-roster a:hover { background: var(--night-3); }
.gang-public-roster .avatar, .gang-public-roster .avatar-initial { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.gpr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpr-rank { font-size: .7rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: var(--night-3); color: var(--muted); }
.gpr-rank.rank-0 { background: var(--gold); color: var(--ink); } .gpr-rank.rank-1 { background: var(--violet); color: #fff; }
.ladder-switch { margin: .3rem 0 0; font-size: .9rem; }


/* ===================================================================================
   Who's that Stand? — a spotlit stage for the mystery card (a tarot frame), the clues that unlock as you miss,
   the guess rows (cards on a phone)
   =================================================================================== */
.wts-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem 1.2rem; align-items: center; margin-bottom: 1.2rem; }
.wts-emblem { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; border: 3px solid var(--ink); background: var(--gold);
  color: var(--ink); font: 400 2.6rem/1 var(--display); rotate: -6deg; box-shadow: 3px 3px 0 var(--ink); }
.wts-figures { display: flex; gap: .5rem; margin: 0; }
.wts-figures div { display: grid; justify-items: center; padding: .4rem .8rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); }
.wts-figures dt { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.wts-figures dd { margin: 0; font: 400 1.3rem/1.2 var(--display); }
.wts-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1rem; align-items: start; }
.wts-main { display: grid; gap: 1rem; min-width: 0; }
/* the stage: gold rays behind the card, the guess and the clues beside it */
.wts-board { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr);
  gap: 1.4rem; align-items: start; padding: 1.3rem; border-radius: var(--radius-card); border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(circle at 22% 45%, rgb(244 197 66 / .22), transparent 42%),
    repeating-conic-gradient(from 0deg at 22% 45%, rgb(244 197 66 / .07) 0deg 4deg, transparent 4deg 12deg), var(--night-2); }
.wts-card { margin: 0; padding: 10px; border-radius: var(--radius-card); background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px var(--gold), 6px 6px 0 3px var(--ink); rotate: -2deg; transition: rotate .3s ease; }
.wts-card:hover { rotate: 0deg; }
.wts-card.solved { box-shadow: 0 0 0 3px #4BD07A, 6px 6px 0 3px var(--ink), 0 0 40px rgb(75 208 122 / .45); rotate: 0deg; }
.wts-card.failed { box-shadow: 0 0 0 3px var(--magenta), 6px 6px 0 3px var(--ink); }
.wts-window { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 40%, #3D2263, transparent 70%), repeating-linear-gradient(-45deg, #2B1747 0 10px, #24133E 10px 20px); }
.wts-window img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wts-blind { position: absolute; inset: 0; display: grid; place-content: center; padding: 1rem; text-align: center; color: var(--paper-2); font-weight: 700; font-size: .85rem; }
.wts-q { position: absolute; right: 8px; bottom: 4px; font: 400 2.4rem/1 var(--display); color: var(--gold); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  animation: wts-bob 2.4s ease-in-out infinite; }
@keyframes wts-bob { 50% { translate: 0 -4px; rotate: 6deg; } }
.wts-card figcaption { display: grid; justify-items: center; gap: .1rem; padding: .5rem .2rem .1rem; color: var(--ink); text-align: center; }
.wts-card figcaption strong { font: 400 1.15rem/1.15 var(--display); word-break: break-all; }
.wts-card figcaption small { font-weight: 700; font-size: .78rem; }
.wts-side { display: grid; gap: 1rem; min-width: 0; }
.wts-form { display: grid; gap: .45rem; }
.wts-form label { font: 400 1.05rem/1.2 var(--display); color: var(--gold); }
.wts-input { display: flex; gap: .5rem; }
.wts-input input { flex: 1; min-width: 0; height: 52px; padding: 0 1rem; border: 3px solid var(--ink); border-radius: var(--radius-ui);
  background: var(--paper); color: var(--ink); font: 700 1.1rem var(--body); box-shadow: inset 3px 3px 0 rgb(28 15 46 / .12), 4px 4px 0 var(--ink); }
.wts-input input::placeholder { color: #7A6A95; font-weight: 500; }
.wts-input input:focus { outline: none; box-shadow: inset 3px 3px 0 rgb(28 15 46 / .12), 0 0 0 3px var(--gold), 4px 4px 0 var(--ink); }
.wts-input .btn { height: 52px; padding-inline: 1.4rem; font-size: 1.05rem; }
.wts-result { margin: 0; padding: .8rem 1rem; border-radius: var(--radius-ui); border: 3px solid var(--ink); font-size: 1.1rem; box-shadow: 4px 4px 0 var(--ink); }
.wts-result.win { background: #2E8B57; color: #fff; } .wts-result.lose { background: #6B1D3A; color: #FFD2E1; }
.wts-clues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem; }
.wts-clues li { display: grid; align-content: start; gap: .25rem; padding: .6rem .75rem; border-radius: var(--radius-ui); background: rgb(28 15 46 / .55);
  border: 2px dashed var(--night-3); font-size: .9rem; }
.wts-clues li.wide { grid-column: 1 / -1; }
.wts-clues li.on { border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--sky); animation: wts-in .35s ease-out; }
.wts-clues b { display: flex; align-items: center; gap: .35rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.wts-clues li.on b { color: var(--violet); }
.wts-clues b i { font-style: normal; font-size: .95rem; letter-spacing: 0; }
.wts-lock { color: var(--muted); font-size: .85rem; }
.wts-letter { font: 400 1.3rem/1 var(--display); }
.wts-share pre { margin: 0 0 .4rem; padding: .6rem .8rem; border-radius: var(--radius-ui); background: var(--night); font: 1rem/1.35 ui-monospace, monospace; white-space: pre-wrap; }
/* the guess rows */
.wts-guesses { display: grid; gap: .35rem; overflow-x: auto; }
.wts-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(6, minmax(78px, 1fr)); gap: .3rem; min-width: 640px; }
.wts-row.head span { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 .2rem; }
.wts-name { display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: var(--radius-ui); background: var(--night-2); font-weight: 700; font-size: .85rem; min-width: 0; }
.wts-name img { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.wts-cell { display: grid; place-content: center; text-align: center; padding: .35rem .3rem; border-radius: var(--radius-ui); border: 2px solid var(--ink); font-weight: 700; font-size: .82rem; line-height: 1.2;
  box-shadow: 2px 2px 0 var(--ink); }
.wts-cell small { font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; display: none; }
.wts-cell.hit { background: #2E8B57; color: #fff; }
.wts-cell.up, .wts-cell.down { background: var(--gold); color: var(--ink); }
.wts-cell.miss { background: #6B1D3A; color: #FFD2E1; }
.wts-row.correct .wts-name { box-shadow: 0 0 0 2px #4BD07A; }
.wts-row:not(.head) { animation: wts-in .35s ease-out; }
@keyframes wts-in { from { opacity: 0; transform: translateY(-6px); } }
.wts-empty { margin: 0; padding: .9rem 1rem; border-radius: var(--radius-ui); border: 2px dashed var(--night-3); color: var(--muted); text-align: center; }
.wts-empty b { color: var(--paper); }
.wts-legend { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.wts-legend li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.wts-legend .wts-cell { width: 2rem; height: 1.6rem; padding: 0; }
@media (max-width: 1100px) { .wts-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .wts-hero { grid-template-columns: auto minmax(0, 1fr); gap: .6rem .9rem; } .wts-figures { grid-column: 1 / -1; }
  .wts-hero > div > .muted { display: none; }  /* the clues below say the same, one screen shorter */
  .wts-emblem { width: 54px; height: 54px; font-size: 2rem; }
  .wts-figures div { flex: 1; padding: .3rem .4rem; }
  .wts-board { grid-template-columns: minmax(0, 1fr); padding: 1rem; gap: 1rem;
    background: radial-gradient(circle at 50% 20%, rgb(244 197 66 / .22), transparent 45%),
      repeating-conic-gradient(from 0deg at 50% 20%, rgb(244 197 66 / .07) 0deg 4deg, transparent 4deg 12deg), var(--night-2); }
  .wts-card { width: min(100%, 210px); justify-self: center; }
  .wts-row.head { display: none; }
  /* a guess is a card: the stand on top, its six facts in a grid with their labels */
  .wts-guesses { overflow: visible; gap: .5rem; }
  .wts-row { min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .45rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
  .wts-row.correct { border-color: #4BD07A; }
  .wts-row .wts-name { grid-column: 1 / -1; background: none; padding: 0 .1rem .1rem; box-shadow: none !important; }
  .wts-cell small { display: block; }
}
@media (prefers-reduced-motion: reduce) { .wts-row:not(.head), .wts-clues li.on, .wts-q { animation: none; } .wts-card { transition: none; } }

/* ===================================================================================
   The Gang Cup — a bracket of match cards, a column per round
   =================================================================================== */
.cup-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.2rem; align-items: center; margin-bottom: 1.2rem; }
.cup-emblem { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--ink); background: var(--gold);
  font-size: 2.2rem; box-shadow: 0 0 0 3px var(--magenta), 0 0 22px rgb(244 197 66 / .45); }
.cup-mine { border-color: var(--sky); }
.cup-live { font: 400 1.6rem var(--display); color: var(--gold); margin: .2rem 0 .6rem; } .cup-live small { font: 400 .8rem var(--body); color: var(--muted); }
.cup-champion { position: relative; display: grid; justify-items: center; gap: .2rem; margin: 0 0 1.2rem; padding: 1.4rem 1rem; text-align: center; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--gold), 6px 6px 0 3px var(--ink);
  background: radial-gradient(circle at 50% 0%, rgb(244 197 66 / .35), transparent 60%), var(--night-2); }
.cup-champion::before { content: ""; position: absolute; inset: -40%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgb(244 197 66 / .14) 0deg 1.4deg, transparent 1.4deg 7deg); }
.cup-crown { font-size: 2.4rem; } .cup-champion a { color: var(--gold); text-decoration: none; }
.cup-bracket { display: grid; grid-template-columns: repeat(var(--rounds), minmax(240px, 1fr)); gap: 1rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1.2rem; }
.cup-round { display: grid; grid-template-rows: auto 1fr; gap: .6rem; min-width: 0; }
.cup-round-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font: 400 1rem var(--display); }
.cup-round-title small { font: 400 .75rem var(--body); color: var(--muted); }
.cup-livetag { padding: .05rem .45rem; border-radius: 5px; background: var(--magenta); color: #fff; font: 700 .65rem var(--body); letter-spacing: .12em; animation: event-tag-pulse 1.8s ease-in-out infinite; }
.cup-matches { display: grid; align-content: space-around; gap: .8rem; }
.cup-match { position: relative; display: grid; gap: 4px; padding: .45rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.cup-match.playing { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), 0 0 14px rgb(214 36 110 / .35); }
.cup-vs { justify-self: center; margin: -3px 0; font: 400 .7rem/1 var(--display); color: var(--gold); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.cup-team { display: grid; grid-template-columns: 1.4rem 30px minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .3rem .4rem; border-radius: 6px; background: var(--night); }
.cup-team.won { background: linear-gradient(90deg, rgb(244 197 66 / .22), var(--night)); box-shadow: inset 3px 0 0 var(--gold); }
.cup-team.lost { opacity: .5; } .cup-team.lost .cup-name { text-decoration: line-through; }
.cup-team.mine { box-shadow: inset 0 0 0 2px var(--sky); }
.cup-team.tbd { grid-template-columns: 1.4rem minmax(0, 1fr); }
.cup-seed { font: 400 .75rem var(--display); color: var(--muted); text-align: center; }
.cup-banner { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); background: var(--night-3); }
.cup-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cup-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .88rem; color: var(--text); text-decoration: none; }
a.cup-name:hover { color: var(--gold); }
.cup-score { font: 400 .9rem var(--display); color: var(--gold); }
.cup-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.cup-history li { display: flex; gap: .8rem; padding: .35rem .5rem; border-radius: var(--radius-ui); background: var(--night); }
.cup-history span { color: var(--muted); font-variant-numeric: tabular-nums; }
.gl-cups { font-size: .85rem; }
@media (max-width: 680px) { .cup-hero { grid-template-columns: minmax(0, 1fr); } .cup-emblem { width: 56px; height: 56px; font-size: 1.7rem; } }

.wts-blind { position: absolute; inset: 0; display: grid; place-content: center; padding: 1rem; text-align: center; color: var(--muted); font-weight: 700; font-size: .9rem; }

/* Requiem mode */
.rq-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.rq-tabs a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; border: 2px solid var(--night-3);
  background: var(--night-2); color: var(--text); text-decoration: none; font-weight: 700; font-size: .85rem; }
.rq-tabs a small { color: var(--muted); font-weight: 400; }
.rq-tabs a.on { border-color: var(--ink); background: var(--tc, var(--magenta)); color: #fff; box-shadow: 3px 3px 0 var(--ink); }
.rq-tabs a.on small { color: rgb(255 255 255 / .8); }
.rq-tabs a.locked { opacity: .55; }
.rq-tabs a.done:not(.on) { border-color: var(--gold); }
.rq-odds { margin: .4rem 0; padding: .35rem .6rem; border-radius: var(--radius-ui); background: rgb(214 36 110 / .14); border-left: 4px solid var(--magenta); font-size: .9rem; }

/* Statuses drawn on the stand itself (status.view "aura"): stunned stands reel under circling stars with a 気絶 stamp,
   poisoned ones glow toxic green with rising bubbles, burning ones flicker with flames and embers. Hidden while a turn
   replays (they're the end state), then faded in. */
.fighter.st-stun { border-color: #F4C542; border-style: dashed; }
.fighter.st-stun .fighter-portrait img { filter: grayscale(.55) brightness(.85) contrast(1.1); animation: st-reel 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.fighter.st-poison:not(.st-stun):not(.acting) { border-color: #7CD64A; box-shadow: 0 0 16px rgb(124 214 74 / .45); }
.fighter.st-burn:not(.st-stun):not(.st-poison):not(.acting) { border-color: #FF7A26; box-shadow: 0 0 16px rgb(255 122 38 / .5); }
.fighter.st-poison.st-burn:not(.st-stun):not(.acting) { border-color: #FF7A26; box-shadow: -6px 0 16px rgb(124 214 74 / .45), 6px 0 16px rgb(255 122 38 / .5); }
/* the art itself turns sickly green or scorched (a stun's grey wins) */
.fighter.st-poison:not(.st-stun) .fighter-portrait img { filter: sepia(.45) hue-rotate(45deg) saturate(1.6) brightness(.92); }
.fighter.st-burn:not(.st-stun):not(.st-poison) .fighter-portrait img { filter: sepia(.4) saturate(1.7) hue-rotate(-12deg) brightness(1.05) contrast(1.05); }
.fighter.st-poison.st-burn:not(.st-stun) .fighter-portrait img { filter: sepia(.45) hue-rotate(20deg) saturate(1.6); }
#fight.playing .fighter:is(.st-stun, .st-poison, .st-burn) .fighter-portrait img { filter: none; animation: none; }  /* end-state tints wait for the replay */
.aura { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; border-radius: inherit; }
.aura-poison { background: linear-gradient(to top, rgb(98 196 52 / .7), rgb(140 60 190 / .25) 50%, transparent 78%);
  box-shadow: inset 0 0 14px 3px rgb(124 214 74 / .85); animation: st-pulse 2.2s ease-in-out infinite; }
.aura-poison i { position: absolute; bottom: -12px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #EFFFD6, #8FE34A 45%, #3E8F1E); box-shadow: 0 0 6px #8FE34A; animation: st-bubble 2.6s ease-in infinite; }
.aura-poison i:nth-child(1) { left: 12%; animation-delay: 0s; }
.aura-poison i:nth-child(2) { left: 34%; width: 6px; height: 6px; animation-delay: .9s; }
.aura-poison i:nth-child(3) { left: 55%; width: 11px; height: 11px; animation-delay: 1.6s; }
.aura-poison i:nth-child(4) { left: 74%; width: 7px; height: 7px; animation-delay: .4s; }
.aura-poison i:nth-child(5) { left: 88%; width: 5px; height: 5px; animation-delay: 2s; }
.aura-burn { background: linear-gradient(to top, rgb(255 80 20 / .8), rgb(255 160 40 / .4) 38%, transparent 68%);
  box-shadow: inset 0 0 14px 3px rgb(255 122 38 / .9); animation: st-flicker .55s ease-in-out infinite alternate; }
.aura-poison + .aura-burn { background: linear-gradient(to top, rgb(255 80 20 / .55), transparent 45%); box-shadow: inset 0 -10px 12px -2px rgb(255 122 38 / .9); }
.aura-burn::before { content: ""; position: absolute; inset: auto -10% -6% -10%; height: 46%;
  background: radial-gradient(ellipse at 20% 100%, #FFD45E 0 18%, transparent 45%), radial-gradient(ellipse at 55% 100%, #FF7A26 0 22%, transparent 50%),
              radial-gradient(ellipse at 85% 100%, #FFB02E 0 16%, transparent 44%);
  filter: blur(3px); animation: st-flame .8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.aura-burn i { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 6px 2px #FF7A26; animation: st-ember 1.8s ease-out infinite; }
.aura-burn i:nth-child(1) { left: 18%; animation-delay: .2s; }
.aura-burn i:nth-child(2) { left: 40%; animation-delay: 1s; }
.aura-burn i:nth-child(3) { left: 58%; animation-delay: .5s; }
.aura-burn i:nth-child(4) { left: 76%; animation-delay: 1.4s; }
.aura-burn i:nth-child(5) { left: 90%; animation-delay: .8s; }
.stun-stamp { position: absolute; left: 50%; top: 56%; z-index: 3; display: grid; justify-items: center; line-height: 1; pointer-events: none;
  padding: .2rem .45rem .25rem; translate: -50% -50%; rotate: -12deg; border: 2px solid var(--ink); border-radius: 4px; background: #F4C542; color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink); animation: st-stamp .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.stun-stamp b { font-family: var(--display); font-size: 1.05rem; letter-spacing: .05em; }
.stun-stamp small { font-family: var(--display); font-size: .5rem; letter-spacing: .2em; }
.stun-halo { position: absolute; left: 50%; top: .45rem; z-index: 4; width: 70%; height: 22px; translate: -50% 0; pointer-events: none; }
.stun-halo i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: .95rem; line-height: 1; color: #FFE27A;
  text-shadow: 0 0 4px #F4C542, 1px 1px 0 var(--ink); animation: st-orbit 1.6s linear infinite; }
.stun-halo i:nth-child(2) { animation-delay: -.53s; font-size: .75rem; color: #FFF6C8; }
.stun-halo i:nth-child(3) { animation-delay: -1.07s; }
.fighter .stun-note { margin: 0; font-size: .7rem; font-weight: 700; color: #F4C542; }
@keyframes st-reel { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes st-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes st-bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120px) scale(1.1); opacity: 0; } }
@keyframes st-flicker { from { opacity: .8; } to { opacity: 1; } }
@keyframes st-flame { from { transform: scaleY(.85) skewX(-3deg); } to { transform: scaleY(1.15) skewX(3deg); } }
@keyframes st-ember { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(8px, -90px); opacity: 0; } }
@keyframes st-stamp { from { scale: 2.2; opacity: 0; } to { scale: 1; opacity: 1; } }
/* an ellipse around the head: sideways across the width, a little up and down, the far side smaller and dimmer */
@keyframes st-orbit {
  0% { transform: translate(-50%, -50%) translate(-34px, 0) scale(1); opacity: 1; }
  25% { transform: translate(-50%, -50%) translate(0, 7px) scale(1.15); opacity: 1; }
  50% { transform: translate(-50%, -50%) translate(34px, 0) scale(1); opacity: 1; }
  75% { transform: translate(-50%, -50%) translate(0, -7px) scale(.7); opacity: .6; }
  100% { transform: translate(-50%, -50%) translate(-34px, 0) scale(1); opacity: 1; }
}
.aura, .stun-stamp, .stun-halo, .stun-note { transition: opacity .4s; }
#fight.playing .aura, #fight.playing .stun-stamp, #fight.playing .stun-halo, #fight.playing .stun-note { display: none !important; }
#fight.playing .scenery > i, #fight.playing .arena-bg, #fight.playing .arena::after, #fight.playing .ranked-crown { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .aura, .aura::before, .aura i, .stun-halo i, .stun-stamp, .fighter.st-stun .fighter-portrait img { animation: none !important; }
  .stun-halo i:nth-child(1) { transform: translate(-50%, -50%) translate(-24px, 0); }
  .stun-halo i:nth-child(2) { transform: translate(-50%, -50%); }
  .stun-halo i:nth-child(3) { transform: translate(-50%, -50%) translate(24px, 0); }
  .aura-poison i, .aura-burn i { display: none; }
}

/* The forge: every upgrade bench (gear refining on the Items page, chip combining on the Chips page) shares this
   look. A bench is a dark plate with a hammer mark; each row is icon | name, level pips and before -> after | the action. */
.bench { margin: 0 0 2.4rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--radius-card); background: linear-gradient(160deg, var(--night-2), rgb(28 15 46 / .9));
  border: 2px solid var(--night-3); border-left: 6px solid var(--gold); }
.bench-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem .8rem; margin-bottom: .8rem; }
.bench-head .h2 { margin: 0; }
.bench-head .kicker { margin: 0; }
.bench-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; rotate: -8deg; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--gold); color: var(--ink); font-size: 1.4rem; box-shadow: 3px 3px 0 var(--ink); }
.bench-note { grid-column: 1 / -1; margin: .3rem 0 0; font-size: var(--step--1); }
.bench-wallet, .bench-target { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 .7rem; font-weight: 700; }
.bench-wallet span { color: var(--gold); font-size: 1.1rem; }
.bench-target select { min-width: 0; max-width: 100%; font-weight: 400; }
.bench-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bench-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem; padding: .55rem .7rem;
  border-radius: var(--radius-ui); background: rgb(255 255 255 / .03); border: 1px solid var(--night-3); }
.bench-row.ready { border-color: rgb(244 197 66 / .45); background: rgb(244 197 66 / .06); }
.bench-row.maxed { opacity: .7; }
.bench, .bench-row { scroll-margin-top: 90px; }
/* Guests: the start box (login / register), the strip that asks them to save, and the cookie note for everyone */
.guest-form { display: grid; gap: .6rem; }
.guest-agree { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
.guest-agree input { margin-top: .2rem; flex: none; }
.guest-note { margin: 0; font-size: .85rem; text-align: center; }
.guest-strip { display: block; padding: .5rem 1rem; text-align: center; font-size: .9rem; color: var(--ink); background: #3AB4F2;
  border-bottom: 2px solid var(--ink); text-decoration: none; }
.guest-strip b { white-space: nowrap; }
.cookie-note { position: fixed; z-index: 46; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .8rem;
  max-width: 40rem; margin: 0 auto; padding: .7rem .9rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3);
  box-shadow: 0 12px 30px rgb(0 0 0 / .5); font-size: .88rem; }
.cookie-note[hidden] { display: none; }
.cookie-note p { margin: 0; flex: 1; }
@media (max-width: 1023px) { .cookie-note { bottom: auto; top: calc(4.4rem + env(safe-area-inset-top)); } }
.auction-tabs { margin: 0 0 1rem; }
.auction-tabs a { text-decoration: none; }
.auction-tabs a[aria-current] { background: var(--gold); color: var(--ink); border-color: var(--ink); }
.wanted-board { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.wanted-post { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: .4rem .8rem; padding: .6rem .8rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.wanted-post.can-fill { border-color: rgb(244 197 66 / .55); background: rgb(244 197 66 / .06); }
.wanted-post img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--night-3); }
.wanted-info p { margin: 0; }
.wanted-name strong { font-size: 1.05rem; }
.wanted-offer { font-weight: 700; margin-top: .2rem !important; }
.wanted-fill { display: flex; gap: .4rem; align-items: center; margin: 0; }
.wanted-none { font-size: .82rem; text-align: right; }
@media (max-width: 560px) { .wanted-post { grid-template-columns: 48px minmax(0, 1fr); } .wanted-fill, .wanted-none { grid-column: 1 / -1; justify-content: flex-end; } }
.chat-warn { margin: .3rem 0 0; padding: .4rem .6rem; border-radius: var(--radius-ui); font-size: .82rem; font-weight: 700;
  color: var(--ink); background: #FFB547; border: 2px solid var(--ink); }
/* Film mode (admins, app.js): nothing but the game on screen, and a ripple wherever the screen is tapped */
body.film :is(.cookie-note, .install-hint, .chat-bubble, #guide, .guide-pill, .admin-force, .maint-banner, .dev-strip, .guest-strip,
  .chat-del, [data-tour="admin"]) { display: none !important; }
.tap-ripple { position: fixed; z-index: 300; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; pointer-events: none;
  border: 3px solid rgb(255 255 255 / .95); background: rgb(255 255 255 / .28); box-shadow: 0 0 18px rgb(255 255 255 / .5);
  animation: tap-ripple .55s ease-out forwards; }
@keyframes tap-ripple { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.webhook-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.webhook-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: .5rem .7rem;
  border-radius: var(--radius-ui); background: var(--night-3); }
.webhook-list form { margin: 0; }
.stored-gear { margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.stored-gear > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.stored-gear[open] > summary { margin-bottom: .5rem; }
.stored-gear > .btn { margin-bottom: .6rem; }
.bench-row.flash { animation: bench-flash 1.6s ease-out; }
@keyframes bench-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 3px transparent; } }
.bench-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 8px; background: var(--night-3); font-size: 1.35rem; line-height: 1; }
.bench-icon img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.bench-row[class*="tier-"] .bench-icon { color: var(--chip); background: color-mix(in srgb, var(--chip) 16%, var(--night-3)); }
.bench-main { display: grid; gap: .2rem; min-width: 0; }
.bench-name { margin: 0; overflow-wrap: anywhere; }
.bench-name small { font-weight: 400; }
.bench-pips { display: flex; gap: 3px; }
.bench-pips i { width: 14px; height: 6px; border-radius: 2px; background: var(--night-3); transform: skewX(-20deg); }
.bench-pips i.on { background: var(--gold); box-shadow: 0 0 6px rgb(244 197 66 / .5); }
.bench-row[class*="tier-"] .bench-pips i.on { background: var(--chip); box-shadow: 0 0 6px color-mix(in srgb, var(--chip) 60%, transparent); }
.bench-deltas { display: flex; flex-wrap: wrap; gap: .25rem .4rem; margin: 0; }
.bench-delta { display: inline-flex; align-items: baseline; gap: .25rem; padding: .05rem .45rem; border-radius: 999px; background: var(--night-3); font-size: .8rem; font-variant-numeric: tabular-nums; }
.bench-delta small { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
.bench-delta b { color: #7CE38B; }
.bench-delta.lucky { --chip: var(--gold); background: color-mix(in srgb, var(--chip) 18%, var(--night-3)); }
.bench-delta.lucky b { color: var(--chip); }
.bench-act { display: flex; justify-content: flex-end; }
.bench-go { display: grid; justify-items: center; gap: .05rem; min-width: 7.5rem; padding: .4rem .8rem; border: 2px solid var(--ink); border-radius: var(--radius-ui);
  background: var(--gold); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.bench-go strong { font-family: var(--display); font-weight: 400; font-size: .95rem; letter-spacing: .02em; }
.bench-go small { font-size: .7rem; font-weight: 700; }
.bench-go:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.bench-go:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.bench-go:disabled { background: var(--night-3); color: var(--muted); border-color: var(--night-3); box-shadow: none; cursor: not-allowed; }
.bench-done { font-family: var(--display); font-size: .85rem; color: var(--gold); letter-spacing: .04em; }
@media (max-width: 600px) {
  .bench { padding: .85rem .75rem .9rem; border-left-width: 4px; }
  .bench-row { grid-template-columns: 2.3rem minmax(0, 1fr); padding: .55rem; }
  .bench-icon { width: 2.3rem; height: 2.3rem; font-size: 1.2rem; }
  .bench-act { grid-column: 1 / -1; }
  .bench-go { width: 100%; grid-auto-flow: column; justify-content: center; align-items: baseline; gap: .5rem; }
  .bench-target select { width: 100%; }
}

/* Dev mode tools (only rendered when the app runs with debug on, i.e. scripts/dev.py) */
.dev-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 1rem; padding: .5rem .7rem;
  border: 2px dashed #39D0C0; border-radius: var(--radius-ui); background: rgb(57 208 192 / .08); }
.dev-strip form { margin: 0; }
.dev-tag { font-family: var(--display); font-size: .8rem; letter-spacing: .06em; color: #39D0C0; }

/* The deep dungeon: nine floors in three bands (the delve, the Over Heaven depths, the Requiem depths) */
:root { --heaven: #3AB4F2; --requiem: #D6246E; }
.delve-floors { flex-wrap: wrap; gap: .25rem; justify-content: flex-end; max-width: 30rem; }
.delve-floors li { padding: .15rem .45rem; font-size: .75rem; }
.delve-floors li b { font-size: .85rem; }
.delve-floors li + li::before { content: none; }
.delve-floors li.band-heaven { border-color: color-mix(in srgb, var(--heaven) 55%, var(--night-3)); }
.delve-floors li.band-requiem { border-color: color-mix(in srgb, var(--requiem) 55%, var(--night-3)); }
.delve-floors li.band-heaven.past { border-color: var(--heaven); }
.delve-floors li.band-requiem.past { border-color: var(--requiem); }
@media (max-width: 760px) { .delve-floors { justify-content: flex-start; } }
.band-heaven-text { color: var(--heaven); }
.band-requiem-text { color: #FF5EAE; }
.delve-band { display: grid; gap: .3rem; margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius-ui); border: 2px solid var(--c);
  border-left-width: 6px; background: color-mix(in srgb, var(--c) 10%, var(--night-2)); }
.delve-band.band-heaven { --c: var(--heaven); }
.delve-band.band-requiem { --c: var(--requiem); }
.delve-band p { margin: 0; }
.delve-band-name { font: 400 1.05rem var(--display); color: var(--c); letter-spacing: .03em; }
.delve-band-rules { margin: 0; padding-left: 1.1rem; font-size: var(--step--1); }
.delve-band-pay { font-size: .8rem; font-weight: 700; color: var(--gold); }
.delve-warn { margin: 0 0 .5rem; padding: .5rem .65rem; border-radius: var(--radius-ui); font-size: .82rem; line-height: 1.4;
  border: 2px dashed var(--c, var(--gold)); background: color-mix(in srgb, var(--c, var(--gold)) 12%, transparent); }
.delve-warn.band-heaven { --c: var(--heaven); }
.delve-warn.band-requiem { --c: var(--requiem); }
.delve-choice.deeper.band-heaven { background: var(--heaven); }
.delve-choice.deeper.band-requiem { background: var(--requiem); color: var(--paper); }

/* The Requiem Tower: the way in sits on the Tower page itself, big and red; the Over Heaven toggle on both climbs */
.rq-tower-cta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; margin: 0 0 1.4rem;
  padding: .9rem 1.1rem; border: 3px solid var(--ink); border-radius: var(--radius-card); text-decoration: none; color: var(--paper);
  background: linear-gradient(120deg, #3A0B22, #7A1046 55%, #D6246E); box-shadow: 5px 5px 0 var(--ink); transition: transform .1s, box-shadow .1s; }
.rq-tower-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.rq-tower-cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.rq-tower-cta-mark { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 3px solid var(--ink);
  background: var(--paper); color: #7A1046; font-size: 1.9rem; rotate: -8deg; box-shadow: 3px 3px 0 var(--ink); }
.rq-tower-cta-text { display: grid; gap: .15rem; min-width: 0; }
.rq-tower-cta-text small { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFC2DC; }
.rq-tower-cta-text strong { font: 400 clamp(1.25rem, 3.5vw, 1.8rem)/1.1 var(--display); text-shadow: 2px 2px 0 var(--ink); }
.rq-tower-cta-text span { font-size: var(--step--1); color: #FFE3EF; }
.rq-tower-cta-go { font: 400 2rem/1 var(--display); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 600px) { .rq-tower-cta { grid-template-columns: auto minmax(0, 1fr); } .rq-tower-cta-go { display: none; } .rq-tower-cta-mark { width: 2.8rem; height: 2.8rem; font-size: 1.5rem; } }
.rq-tower .tower-panel, .rq-tower .tower-floor.current { border-color: #D6246E; }
.btn.rq-go { background: #D6246E; color: var(--paper); border-color: var(--ink); }
.oh-toggle { display: flex; align-items: flex-start; gap: .55rem; margin: .2rem 0 .8rem; padding: .55rem .7rem; cursor: pointer;
  border: 2px dashed var(--heaven, #3AB4F2); border-radius: var(--radius-ui); background: rgb(58 180 242 / .08); }
.oh-toggle input { margin-top: .2rem; accent-color: #3AB4F2; width: 1.1rem; height: 1.1rem; flex: none; }
.oh-toggle span { display: grid; gap: .1rem; }
.oh-toggle small { color: var(--muted); font-size: .78rem; }
.oh-toggle:has(input:checked) { border-style: solid; background: rgb(58 180 242 / .16); }
.oh-on { color: #3AB4F2; }
.tower-rules { list-style: none; margin: .2rem 0; padding: 0; font-size: .75rem; color: #9EDCFF; }

/* The ranked queue bar: top of the desktop sidebar, top of the phone menu; it refreshes itself every 20s */
.queue-bar { display: flex; align-items: center; gap: .5rem; margin: .2rem .6rem .5rem; padding: .4rem .6rem; border-radius: var(--radius-ui);
  border: 2px solid var(--night-3); background: var(--night); color: var(--muted); text-decoration: none; font-size: .8rem; }
.queue-bar:hover { border-color: var(--gold); color: var(--paper); }
.queue-bar strong { color: var(--paper); font-variant-numeric: tabular-nums; }
.queue-pulse { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--night-3); }
.queue-bar.live .queue-pulse { background: #7CE38B; box-shadow: 0 0 0 0 rgb(124 227 139 / .6); animation: queue-pulse 1.8s ease-out infinite; }
.queue-bar.live { border-color: rgb(124 227 139 / .45); }
.queue-bar.mine { border-color: var(--gold); background: rgb(244 197 66 / .1); }
.queue-cta { margin-left: auto; font-weight: 700; color: var(--gold); white-space: nowrap; }
@keyframes queue-pulse { to { box-shadow: 0 0 0 7px rgb(124 227 139 / 0); } }
.queue-bar.sheet { margin: .2rem 0 .8rem; padding: .6rem .8rem; font-size: .9rem; }
.side-mini .queue-bar.side { justify-content: center; margin-inline: .4rem; padding-inline: 0; }
.side-mini .queue-bar.side .queue-text, .side-mini .queue-bar.side .queue-cta { display: none; }
@media (prefers-reduced-motion: reduce) { .queue-bar.live .queue-pulse { animation: none; } }

/* Legal pages and the changelog */
.legal h2 { margin-top: 1.6rem; }
.legal ul { padding-left: 1.2rem; display: grid; gap: .4rem; }
.footer-links { font-size: var(--step--1); }
.cl-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.4rem; }
.cl-entry { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; }
.cl-badge { display: grid; align-content: start; justify-items: center; gap: .2rem; padding-top: .2rem; }
.cl-badge b { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--night-3); color: var(--paper); font: 400 1.4rem/1 var(--display); box-shadow: 3px 3px 0 var(--ink); rotate: -6deg; }
.cl-entry.latest .cl-badge b { background: var(--gold); color: var(--ink); }
.cl-badge small { color: var(--muted); font-size: .75rem; }
.cl-body { padding: .9rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); min-width: 0; }
.cl-entry.latest .cl-body { border-color: var(--gold); }
.cl-body .h2 { margin: 0 0 .3rem; }
.cl-head { margin: .8rem 0 .3rem; font: 400 .9rem var(--display); color: var(--gold); letter-spacing: .04em; }
.cl-body ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
@media (max-width: 600px) { .cl-entry { grid-template-columns: 1fr; gap: .5rem; } .cl-badge { grid-auto-flow: column; justify-content: start; align-items: center; gap: .6rem; } .cl-badge b { width: 3.4rem; height: 3.4rem; font-size: 1.1rem; } }

/* Share cards (/s/<id>) and share buttons */
.share-card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.4rem; align-items: center; margin-top: 1rem;
  padding: 1.2rem; border: 3px solid var(--ink); border-radius: var(--radius-card); background: var(--night-2); box-shadow: 6px 6px 0 var(--ink); }
.share-art { position: relative; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: var(--radius-ui); overflow: hidden; background: var(--night-3); }
.share-art img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.share-badge { position: absolute; left: .6rem; top: .6rem; padding: .2rem .6rem; border: 2px solid var(--ink); border-radius: 6px; background: var(--gold);
  color: var(--ink); font: 400 .95rem var(--display); box-shadow: 2px 2px 0 var(--ink); rotate: -4deg; }
.share-menace { position: absolute; right: .4rem; bottom: .2rem; font: 400 1.6rem var(--display); color: var(--magenta); text-shadow: 2px 2px 0 var(--ink); }
.share-body .display { margin: .2rem 0 .5rem; }
.share-text { font-size: 1.05rem; }
.share-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .6rem; }
.kind-requiem .share-badge { background: #D6246E; color: var(--paper); }
@media (max-width: 640px) { .share-card { grid-template-columns: 1fr; } .share-art { max-width: 280px; } }
.share-btn { gap: .35rem; }

/* Landing page (logged out): the proof strip, the feature grid, the closing call to action */
.landing-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.landing-proof div { display: grid; justify-items: center; gap: .1rem; padding: .8rem .6rem; text-align: center; border-radius: var(--radius-ui);
  background: var(--night-2); border: 2px solid var(--night-3); }
.landing-proof strong { font: 400 1.5rem/1.1 var(--display); color: var(--gold); }
.landing-proof span { font-size: .8rem; color: var(--muted); }
.landing-features { margin-top: 2rem; }
.feature-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.feature-grid li { position: relative; padding: 1rem 1.1rem 1.1rem; border: 2px solid var(--ink); border-radius: var(--radius-card); background: var(--night-2);
  box-shadow: 4px 4px 0 var(--ink); }
.feature-grid li:nth-child(3n + 1) { border-top: 5px solid var(--gold); }
.feature-grid li:nth-child(3n + 2) { border-top: 5px solid var(--magenta); }
.feature-grid li:nth-child(3n) { border-top: 5px solid var(--teal); }
.feature-grid h3 { margin: .3rem 0; font: 400 1.1rem var(--display); }
.feature-grid p { margin: 0; font-size: var(--step--1); color: var(--muted); }
.feature-icon { font-size: 1.8rem; }
.landing-final { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin: 1.4rem 0 .4rem; }

/* A new player's first week: the Welcome week calendar and the Beginner's path */
.onboarding { display: grid; gap: 1rem; margin: 1.2rem 0; }
.welcome-week, .b-path { padding: 1rem 1.1rem; border-radius: var(--radius-card); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--night-2); }
.welcome-week { border-color: var(--gold); background: linear-gradient(150deg, rgb(244 197 66 / .14), var(--night-2) 60%); }
.ob-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.ob-head .h2 { margin: 0; }
.ob-head .kicker { margin: 0; }
.ob-wait { font-size: .85rem; font-weight: 700; color: var(--muted); }
.ww-days { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.ww-day { position: relative; display: grid; align-content: start; gap: .25rem; min-width: 0; padding: .5rem .45rem; border-radius: var(--radius-ui);
  background: var(--night); border: 2px solid var(--night-3); font-size: .72rem; line-height: 1.3; color: var(--muted); }
.ww-day b { font: 400 .85rem var(--display); color: var(--paper); }
.ww-day.big { border-color: rgb(244 197 66 / .5); }
.ww-day.today { border-color: var(--gold); background: rgb(244 197 66 / .14); color: var(--paper); animation: ww-pulse 1.6s ease-in-out infinite; }
.ww-day.claimed { opacity: .55; }
.ww-day i { position: absolute; top: -.5rem; right: -.4rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font-style: normal; font-size: .75rem; font-weight: 700; border: 2px solid var(--ink); background: var(--gold); color: var(--ink); }
.ww-day.claimed i { background: var(--teal); }
@keyframes ww-pulse { 50% { box-shadow: 0 0 0 4px rgb(244 197 66 / .25); } }
@media (max-width: 760px) { .ww-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ww-day.today { animation: none; } }
.b-path > p { margin: .5rem 0; }
.bp-meter { margin: .4rem 0 .8rem; }
.bp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .4rem; }
.bp-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .45rem .6rem;
  border-radius: var(--radius-ui); background: var(--night); border: 1px solid var(--night-3); }
.bp-mark { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--night-3); font-weight: 700; font-size: .8rem; }
.bp-step.done:not(.claimed) { border-color: var(--gold); }
.bp-step.done:not(.claimed) .bp-mark { background: var(--gold); color: var(--ink); }
.bp-step.claimed { opacity: .6; }
.bp-step.claimed .bp-mark { background: var(--teal); color: var(--ink); }
.bp-text { display: grid; min-width: 0; }
.bp-text small { color: var(--muted); font-size: .72rem; }
.bp-final { margin: .8rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-weight: 700; }
.dev-foot { justify-content: center; margin: .8rem auto 0; max-width: 34rem; }

/* A new save's first screen (banners?welcome=1): one clear thing to do */
.first-pull { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .4rem .9rem; margin: 0 0 1rem; padding: .8rem 1rem;
  border: 3px solid var(--ink); border-radius: var(--radius-card); background: var(--gold); color: var(--ink); text-decoration: none;
  box-shadow: 4px 4px 0 var(--magenta); animation: jj-jitter .6s steps(2) 3; }
.first-pull strong { display: block; font: 400 1.15rem/1.15 var(--display); }
.first-pull small { display: block; font-size: .85rem; }
.first-pull-mark { font-size: 2rem; }
.first-pull-go { font: 400 1.8rem/1 var(--display); animation: first-pull-bob 1.2s ease-in-out infinite; }
.first-pull-pick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
@keyframes first-pull-bob { 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .first-pull, .first-pull-go { animation: none; } }

/* 360-400px phones: the summon header and the welcome-week calendar fit the screen */
@media (max-width: 420px) {
  .summon-emblem { width: 56px; height: 56px; } .summon-arrow { width: 38px; height: 38px; }
  .summon-title .kicker { white-space: normal; font-size: .78rem; }
  .summon-rotate { max-width: 100%; box-sizing: border-box; font-size: .78rem; }
  .ww-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ww-day { overflow-wrap: anywhere; }
  .first-pull { grid-template-columns: auto minmax(0, 1fr); } .first-pull-go { display: none; }
}

.hero-copy .lede { max-width: 31rem; }  /* the intro stays clear of the fanned cards on wide screens */

/* LEVEL UP: a slam card of its own (app.js levelUp), the level stamped huge over a burst of rays */
.lvl-card { overflow: hidden; isolation: isolate; padding: 1.1rem 1.8rem 1rem; background: var(--gold); }
.lvl-rays { position: absolute; inset: -60%; z-index: -1; background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / .55) 0 9deg, transparent 9deg 22deg);
  animation: lvl-spin 6s linear infinite; }
.lvl-num { display: block; font: 400 2.6rem/1 var(--display) !important; color: var(--magenta) !important; text-shadow: 3px 3px 0 var(--ink);
  animation: lvl-pop .7s cubic-bezier(.2, 1.8, .4, 1) .15s both; }
.lvl-open { display: block; max-width: 18rem; margin-top: .3rem; font-size: .8rem; font-weight: 700; color: var(--ink); }
@keyframes lvl-spin { to { transform: rotate(360deg); } }
@keyframes lvl-pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.25) rotate(4deg); opacity: 1; } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .lvl-rays, .lvl-num { animation: none !important; } }

/* The first-session guide (partials/guide.html): a spotlight on the one thing to use now, a card beside it, and a pill
   to the next page when the next step lives elsewhere. The page stays usable under it: only the card takes clicks. */
#guide { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
#guide[hidden], .guide-pill[hidden] { display: none; }
.guide-spot { position: fixed; border-radius: var(--radius-ui); pointer-events: none;
  box-shadow: 0 0 0 3px #3AB4F2, 0 0 18px 4px rgb(58 180 242 / .35), 0 0 0 9999px rgb(14 7 24 / .5);
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; animation: guide-pulse 1.6s ease-in-out infinite; }
.guide-spot.is-off { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 9999px rgb(14 7 24 / .5); animation: none; }
@keyframes guide-pulse { 50% { box-shadow: 0 0 0 3px #3AB4F2, 0 0 26px 10px rgb(58 180 242 / .15), 0 0 0 9999px rgb(14 7 24 / .5); } }
.guide-card { position: fixed; pointer-events: auto; width: min(320px, calc(100vw - 24px)); padding: .85rem .95rem .75rem 4rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid #3AB4F2; box-shadow: 0 12px 32px rgb(0 0 0 / .5);
  animation: tour-card-in .25s ease-out; }
.guide-mascot { position: absolute; left: .75rem; top: .85rem; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px #3AB4F2; background: #3AB4F2; object-fit: cover; }
.guide-count { margin: 0; font-size: .72rem; color: #9EDCFF; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.guide-title { margin: .05rem 0 .25rem; font: 400 1.1rem/1.2 var(--display); color: var(--gold); }
.guide-text { margin: 0 0 .6rem; line-height: 1.45; font-size: .95rem; }
.guide-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.guide-later { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.guide-actions:has(.guide-later[hidden]) { justify-content: flex-end; }
#guide.moving .guide-card { transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1); }
.guide-actions .btn { white-space: nowrap; }
.guide-pill { position: fixed; z-index: 66; left: 50%; translate: -50% 0; bottom: calc(1rem + env(safe-area-inset-bottom)); display: flex; align-items: center;
  gap: .45rem; max-width: calc(100vw - 2rem); padding: .6rem 1rem; border: 2px solid var(--ink); border-radius: 999px; background: #3AB4F2;
  color: var(--ink); font-weight: 700; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); animation: tour-card-in .3s ease-out; }
.guide-pill span:last-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) { .guide-pill { left: .8rem; translate: none; max-width: calc(100vw - 5.6rem); bottom: calc(5.6rem + env(safe-area-inset-bottom)); } }
body.guiding .chat-bubble, body.guiding .install-hint, body.guiding .cookie-note, body.guide-pill-on .chat-bubble { display: none; }
@media (prefers-reduced-motion: reduce) { .guide-spot, #guide.moving .guide-card { animation: none; transition: none; } }
.coach-glow { position: relative; border-radius: var(--radius-card); animation: coach-glow 1.6s ease-in-out infinite; }
@keyframes coach-glow { 0%, 100% { box-shadow: 0 0 0 3px #3AB4F2, 0 0 0 0 rgb(58 180 242 / .5); } 50% { box-shadow: 0 0 0 3px #3AB4F2, 0 0 0 10px rgb(58 180 242 / 0); } }
@media (prefers-reduced-motion: reduce) { .coach-glow { animation: none; box-shadow: 0 0 0 3px #3AB4F2; } }
.coach-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .4rem .9rem; margin: .8rem 0; padding: .9rem 1rem;
  border: 3px solid var(--ink); border-radius: var(--radius-card); background: var(--gold); color: var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--magenta); }
.coach-next[hidden] { display: none; }
.coach-next strong { display: block; font: 400 1.15rem/1.15 var(--display); }
.coach-next small { display: block; font-size: .85rem; }
.coach-next-mark { font-size: 2rem; }
.coach-next-go { font-weight: 700; white-space: nowrap; padding: .4rem .8rem; border: 2px solid var(--ink); border-radius: var(--radius-ui); background: var(--paper); }
@media (max-width: 520px) { .coach-next { grid-template-columns: auto minmax(0, 1fr); } .coach-next-go { grid-column: 1 / -1; text-align: center; } }

/* Name suggestions drawn by the page ([data-suggest]): phones get them too */
.suggest-host { position: relative; }
.suggest-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin: .2rem 0 0; padding: .25rem; list-style: none; max-height: 16rem; overflow-y: auto;
  border: 2px solid var(--ink); border-radius: var(--radius-ui); background: var(--night-2); box-shadow: 4px 4px 0 var(--ink); }
.suggest-list[hidden] { display: none; }
.suggest-list li { padding: .55rem .7rem; border-radius: 6px; cursor: pointer; font-weight: 700; }
.suggest-list li:hover, .suggest-list li:active { background: var(--night-3); color: var(--gold); }
.dock a.coach-glow, .side-link.coach-glow, #nav-sheet a.coach-glow { border-radius: var(--radius-ui); }

/* Pull reveal: a card front with 3D transforms of its own (shiny holo, full art, the rarity pop) can defeat
   backface-visibility, so its turned-away face showed through mirrored. The faces now swap at the halfway point of the
   turn, like the cinematic's: the front is simply not drawn until it faces you. */
.flip-front { visibility: hidden; transition: visibility 0s linear .3s; }
.flip.flipped .flip-front { visibility: visible; }
.flip-back { transition: visibility 0s linear .3s; }
.flip.flipped .flip-back { visibility: hidden; }

/* Chat emoji and stickers: the 😊 button, its picker, and admin emotes / stickers inside messages */
.chat-form.has-emo { position: relative; }
.emo-btn { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 2px solid var(--night-3);
  border-radius: var(--radius-ui); background: var(--night); font-size: 1.2rem; cursor: pointer; }
.emo-btn[aria-expanded="true"], .emo-btn:hover { border-color: var(--gold); }
.emo-pop { position: absolute; left: 0; right: 0; bottom: calc(100% + .4rem); z-index: 40; padding: .4rem; border: 2px solid var(--ink);
  border-radius: var(--radius-ui); background: var(--night-2); box-shadow: 4px 4px 0 var(--ink); }
.emo-pop[hidden] { display: none; }
.emo-tabs { display: flex; gap: .3rem; margin-bottom: .35rem; }
.emo-tabs button { flex: 1; padding: .3rem; border: 0; border-radius: 6px; background: var(--night); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.emo-tabs button.on { background: var(--gold); color: var(--ink); }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.2rem, 1fr)); gap: .15rem; max-height: 12rem; overflow-y: auto; }
.emo-grid.stickers { grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); }
.emo { display: grid; place-items: center; aspect-ratio: 1; padding: .15rem; border: 0; border-radius: 6px; background: none; font-size: 1.35rem; cursor: pointer; }
.emo:hover { background: var(--night-3); }
.emo img { width: 100%; height: 100%; object-fit: contain; }
.emo-empty { grid-column: 1 / -1; margin: .4rem; font-size: .85rem; }
.chat-emote { display: inline-block; width: 1.6em; height: 1.6em; object-fit: contain; vertical-align: -.45em; }
.chat-emote.big { width: 3rem; height: 3rem; }
.chat-sticker { display: block; max-width: 140px; max-height: 140px; object-fit: contain; }
.sticker-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.sticker-form label { display: grid; gap: .2rem; font-weight: 700; font-size: .85rem; }
.sticker-admin-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.sticker-admin-grid li { display: grid; justify-items: center; gap: .3rem; padding: .7rem; border-radius: var(--radius-ui); background: var(--night-2); border: 1px solid var(--night-3); }
.sticker-admin-grid form { margin: 0; }

/* Maintenance mode: the admin switch, and the banner admins see while it's on */
.maint-card { margin-bottom: 1rem; }
.maint-card.on { border-color: var(--magenta); background: rgb(214 36 110 / .12); }
.maint-form { display: grid; gap: .5rem; max-width: 34rem; }
.maint-form label { display: grid; gap: .2rem; font-weight: 700; font-size: .85rem; }
.maint-banner { position: fixed; left: 50%; top: .5rem; z-index: 90; translate: -50% 0; padding: .35rem .9rem; border: 2px solid var(--ink);
  border-radius: 999px; background: var(--magenta); color: var(--paper); font-size: .8rem; font-weight: 700; text-decoration: none;
  box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; max-width: calc(100vw - 1rem); overflow: hidden; text-overflow: ellipsis; }

/* ── Arenas: every mode has its own ground (partials/fight.html sets .kind-* on #fight; .arena-bg is a backdrop layer
   behind the fighters). Gradients and patterns only, no images to load. ─────────────────────────────────── */
.arena-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .9; background: var(--arena-bg, none); }
.fight .arena { background-color: var(--arena-base, var(--night-2)); }
/* the story: a sunset road with manga speed lines */
.kind-story { --arena-base: #2A1530; --arena-bg:
  radial-gradient(ellipse 90% 50% at 50% 100%, rgb(255 154 60 / .30), transparent 70%),
  repeating-conic-gradient(from 0deg at 50% 120%, rgb(255 220 160 / .06) 0 2deg, transparent 2deg 9deg),
  linear-gradient(180deg, #24123A, #4A1E3A); }
/* the Mirror World: cold shards of glass */
.kind-wormhole { --arena-base: #141A33; --arena-bg:
  conic-gradient(from 30deg at 30% 40%, rgb(198 179 240 / .16), transparent 20%, rgb(120 200 255 / .12) 40%, transparent 60%),
  conic-gradient(from 210deg at 70% 60%, rgb(198 179 240 / .14), transparent 25%, rgb(120 200 255 / .10) 45%, transparent 65%),
  linear-gradient(135deg, #10162E, #2A2350 50%, #10162E); }
/* the Tower: stone courses rising into light */
.kind-tower { --arena-base: #1D1A2B; --arena-bg:
  linear-gradient(0deg, transparent 60%, rgb(244 197 66 / .14)),
  repeating-linear-gradient(0deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 38px),
  repeating-linear-gradient(90deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 76px),
  linear-gradient(180deg, #2B2540, #15121F); }
/* the dungeon: torchlit stone in the dark */
.kind-dungeon { --arena-base: #0F0C14; --arena-bg:
  radial-gradient(circle at 10% 50%, rgb(255 140 50 / .22), transparent 30%), radial-gradient(circle at 90% 50%, rgb(255 140 50 / .22), transparent 30%),
  repeating-linear-gradient(0deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 30px), linear-gradient(180deg, #1A1420, #0B0910); }
.kind-dungeon .arena-bg { animation: torch 2.4s ease-in-out infinite alternate; }
@keyframes torch { to { opacity: .7; } }
/* the boss rush: a red arena */
.kind-rush { --arena-base: #2A0E18; --arena-bg:
  repeating-conic-gradient(from 0deg at 50% 50%, rgb(214 36 110 / .10) 0 4deg, transparent 4deg 12deg),
  radial-gradient(circle, transparent 40%, rgb(0 0 0 / .5)), linear-gradient(180deg, #3A0F1F, #1A0810); }
/* the alternate universe: the world turned negative */
.kind-alt_universe { --arena-base: #0E1A1A; --arena-bg:
  repeating-linear-gradient(90deg, rgb(95 242 228 / .06) 0 3px, transparent 3px 7px),
  radial-gradient(ellipse at 50% 50%, rgb(95 242 228 / .18), transparent 65%), linear-gradient(180deg, #0F2424, #1A0F2A); }
/* Over Heaven: a white-gold sky */
.kind-over_heaven { --arena-base: #2A2340; --arena-bg:
  repeating-conic-gradient(from 0deg at 50% -20%, rgb(255 243 196 / .10) 0 3deg, transparent 3deg 11deg),
  radial-gradient(ellipse 80% 60% at 50% 0%, rgb(255 243 196 / .28), transparent 70%), linear-gradient(180deg, #4A3F6E, #231A3A); }
/* Requiem: black, and a crimson halo where the Arrow struck */
.kind-requiem { --arena-base: #0A0508; --arena-bg:
  radial-gradient(circle at 50% 50%, rgb(214 36 110 / .26), transparent 45%), repeating-radial-gradient(circle at 50% 50%, rgb(214 36 110 / .06) 0 2px, transparent 2px 26px),
  linear-gradient(180deg, #14060C, #050205); }
/* Carry Me: a stage, curtains and a spotlight (Joyce is an actor) */
.kind-carry_me { --arena-base: #1E0A12; --arena-bg:
  radial-gradient(ellipse 40% 70% at 50% 0%, rgb(255 240 200 / .22), transparent 70%),
  repeating-linear-gradient(90deg, rgb(140 20 40 / .55) 0 14px, rgb(90 10 25 / .55) 14px 28px) left / 12% 100% no-repeat,
  repeating-linear-gradient(90deg, rgb(140 20 40 / .55) 0 14px, rgb(90 10 25 / .55) 14px 28px) right / 12% 100% no-repeat,
  linear-gradient(180deg, #2A0F18, #120509); }
/* the training ground and the dummy: dojo boards */
.kind-training, .kind-dummy { --arena-base: #2B1E14; --arena-bg:
  repeating-linear-gradient(90deg, rgb(255 220 170 / .06) 0 2px, transparent 2px 64px), linear-gradient(180deg, #3A2818, #1E140C); }
/* co-op and gang fights: a war banner of blue and magenta */
.kind-coop, .kind-gang_war, .kind-gang_raid { --arena-base: #121A33; --arena-bg:
  linear-gradient(115deg, rgb(58 180 242 / .16), transparent 45%, transparent 55%, rgb(214 36 110 / .16)),
  repeating-linear-gradient(115deg, rgb(255 255 255 / .03) 0 2px, transparent 2px 16px), linear-gradient(180deg, #172244, #0F142A); }
/* the daily puzzle: graph paper */
.kind-puzzle { --arena-base: #15122A; --arena-bg:
  linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(180deg, #1C1838, #120F22); }
/* events: confetti */
.kind-event { --arena-base: #24123A; --arena-bg:
  radial-gradient(circle at 20% 30%, #F4C542 0 2px, transparent 3px) 0 0 / 90px 90px, radial-gradient(circle at 70% 60%, #5FF2E4 0 2px, transparent 3px) 0 0 / 110px 110px,
  radial-gradient(circle at 40% 80%, #FF4DA0 0 2px, transparent 3px) 0 0 / 70px 70px, linear-gradient(180deg, #2E1748, #1A0E2C); }
@media (prefers-reduced-motion: reduce) { .arena-bg { animation: none !important; } }

/* ── Heaven's Gate (heaven.html, and each fight's gimmick on the fight screen) ── */
.heaven-gate .hv-hero { background: linear-gradient(135deg, rgb(95 242 228 / .14), rgb(244 197 66 / .12) 50%, rgb(255 77 160 / .14)); }
/* the climb: an act per section, its fights a staircase (each step sits a little further right on wide screens) */
.hv-progress { display: grid; gap: .4rem; justify-items: end; font-size: var(--step--1); color: var(--muted); }
.hv-progress strong { font: 400 var(--step-2)/1 var(--display); color: var(--paper); }
.hv-ladder { list-style: none; display: flex; gap: 3px; margin: 0; padding: 0; }
.hv-ladder li { width: 10px; height: 14px; border-radius: 3px; background: var(--night-3); }
.hv-ladder li.boss { width: 14px; }
.hv-ladder li.cleared { background: var(--hv); }
.hv-ladder li.open { background: var(--paper); box-shadow: 0 0 8px var(--paper); }
.hv-act { position: relative; margin: 1.6rem 0 0; padding: 1.1rem 1.1rem 1.2rem; border-radius: var(--radius-card); overflow: hidden;
  background: linear-gradient(160deg, rgb(95 242 228 / .06), rgb(244 197 66 / .05) 50%, rgb(255 77 160 / .06)), var(--night-2);
  border: 2px solid var(--night-3); }
.hv-act.sealed { opacity: .6; }
.hv-act.done { border-color: color-mix(in srgb, var(--gold) 50%, var(--night-3)); }
.hv-act-head { position: relative; display: grid; gap: .2rem; margin-bottom: .8rem; }
.hv-act-head .h2 { margin: 0; }
.hv-act-jp { position: absolute; right: 0; top: -.4rem; font: 400 clamp(2rem, 7vw, 3.6rem)/1 var(--display); color: rgb(255 255 255 / .06);
  pointer-events: none; white-space: nowrap; }
.hv-stairs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.hv-step { --hv: var(--gold); border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3);
  border-left: 6px solid var(--hv); }
@media (min-width: 760px) { .hv-step { margin-left: calc(var(--i) * 1.4rem); } }
.hv-step.open { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hv) 60%, transparent), 0 0 30px color-mix(in srgb, var(--hv) 22%, transparent); }
.hv-step.locked { opacity: .5; border-left-color: var(--night-3); }
.hv-step.cleared { border-left-color: var(--teal); }
.hv-step.boss { border-width: 2px 2px 2px 8px; }
.hv-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; min-width: 0; cursor: pointer; list-style: none; }
.hv-row::-webkit-details-marker { display: none; }
.hv-name { display: grid; min-width: 0; flex: 1; }
.hv-name strong { font: 400 var(--step-1)/1.15 var(--display); }
.hv-name .kicker { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; font-size: 1.35rem;
  background: color-mix(in srgb, var(--hv) 25%, var(--night)); border: 3px solid var(--hv); }
.hv-foes { display: flex; gap: 4px; flex: none; }
.hv-foes img { width: 36px; height: 36px; object-fit: cover; border-radius: 9px; border: 2px solid var(--hv); }
@media (max-width: 520px) { .hv-foes { display: none; } }
.hv-state { flex: none; padding: .15rem .55rem; border-radius: 999px; font-size: var(--step--1); font-weight: 700; background: var(--night-3); }
.hv-step.open .hv-state { background: var(--hv); color: var(--ink); }
.hv-step.cleared .hv-state { color: var(--teal); }
.hv-body { padding: 0 1rem 1rem; display: grid; gap: .6rem; }
.hv-rule-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.hv-rule-chips li { padding: .25rem .6rem; border-radius: 8px; font-size: var(--step--1); background: color-mix(in srgb, var(--hv) 14%, var(--night-2));
  border: 1px solid color-mix(in srgb, var(--hv) 40%, transparent); }
.hv-go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.hv-pacts fieldset { border: 0; padding: 0; margin: .6rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; }
.hv-pacts legend { font-weight: 700; margin-bottom: .4rem; }
.hv-pact { display: flex; gap: .5rem; padding: .6rem .7rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); cursor: pointer; }
.hv-pact:has(input:checked) { border-color: var(--gold); background: rgb(244 197 66 / .08); }
.hv-pact span { display: grid; gap: .15rem; }
.hv-pact .boon { color: #7EE29A; } .hv-pact .bane { color: #FF8DB9; }
.hv-banner { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .25rem; justify-items: center; }
.hv-banner li { padding: .2rem .7rem; border-radius: 999px; font-size: .85rem; font-weight: 700; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .15); }
.hv-banner li.hot { color: var(--ink); background: var(--gold); border-color: var(--ink); animation: hv-hot 1s ease-in-out infinite alternate; }
@keyframes hv-hot { to { box-shadow: 0 0 16px var(--gold); } }
/* Heaven's Door: an unread enemy's health is a closed book */
.fighter.hp-hidden .hp i { width: 100% !important; background: repeating-linear-gradient(45deg, #6E5A8E 0 6px, #4A3A66 6px 12px) !important; }
.fighter.hp-hidden .hp b { display: none; }
/* the four fights' grounds */
.kind-heaven { --arena-base: #120B22; }
.hv-world { --arena-bg: repeating-conic-gradient(from 0deg at 50% 50%, rgb(244 197 66 / .10) 0 1deg, transparent 1deg 30deg),
  radial-gradient(circle, rgb(244 197 66 / .20), transparent 55%), linear-gradient(180deg, #2B1F0A, #120B04); }
.hv-epitaph { --arena-bg: repeating-linear-gradient(0deg, rgb(214 36 110 / .08) 0 2px, transparent 2px 9px),
  radial-gradient(ellipse at 50% 40%, rgb(214 36 110 / .30), transparent 60%), linear-gradient(180deg, #2A0814, #0E0308); }
.hv-door { --arena-bg: repeating-linear-gradient(0deg, rgb(255 248 230 / .07) 0 1px, transparent 1px 22px),
  linear-gradient(90deg, transparent 49.6%, rgb(255 248 230 / .18) 49.6% 50.4%, transparent 50.4%), linear-gradient(180deg, #1E2A40, #0F1626); }
.hv-heaven { --arena-bg: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px) 0 0 / 60px 60px,
  radial-gradient(circle at 70% 70%, #9EF 0 1px, transparent 2px) 0 0 / 90px 90px,
  repeating-conic-gradient(from 0deg at 50% 50%, rgb(95 242 228 / .10) 0 2deg, transparent 2deg 14deg), linear-gradient(180deg, #050818, #120830); }
/* Made in Heaven: time accelerates: the stars spin faster and the world tilts a little more every round */
.hv-heaven .arena-bg { inset: -30%; animation: hv-spin calc(40s - 34s * var(--accel, 0)) linear infinite; }
.hv-heaven .arena { transform: rotate(calc(var(--accel, 0) * -1.5deg)); filter: hue-rotate(calc(var(--accel, 0) * 40deg)); transition: transform 1s, filter 1s; }
@keyframes hv-spin { to { transform: rotate(360deg); } }
/* The World: time stops and the world drains to grey; King Crimson: an erased turn tears the screen */
.fight.timestopped .arena { filter: grayscale(1) contrast(1.15) brightness(.85); transition: filter .25s; }
.fight.erased .arena { animation: hv-erase .9s steps(6); }
@keyframes hv-erase { 20% { clip-path: inset(10% 0 55% 0); transform: translateX(-12px); filter: invert(1); }
  40% { clip-path: inset(50% 0 20% 0); transform: translateX(14px); } 60% { clip-path: inset(30% 0 40% 0); filter: hue-rotate(90deg); } 100% { clip-path: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hv-heaven .arena { transform: none; } .fight.erased .arena { animation: none; } }

/* ── Duels: each half of the arena wears its player's profile (theme colours, banner, signature stand) ── */
.duel-half { position: absolute; left: 0; right: 0; height: 50%; z-index: -1; pointer-events: none; overflow: hidden;
  background-size: cover; background-position: center; }
.duel-half.them { top: 0; background-color: var(--them1); }
.duel-half.me { bottom: 0; background-color: var(--me1); }
.duel-half::before { content: ""; position: absolute; inset: 0; }
.duel-half.them::before { background: linear-gradient(180deg, color-mix(in srgb, var(--them1) 75%, #0B0514), rgb(11 5 20 / .7) 85%); }
.duel-half.me::before { background: linear-gradient(0deg, color-mix(in srgb, var(--me1) 75%, #0B0514), rgb(11 5 20 / .7) 85%); }
.duel-half img { position: absolute; width: 46%; max-width: 260px; opacity: .28; filter: saturate(1.2); mix-blend-mode: screen; }
.duel-half.them img { right: -4%; top: 4%; transform: rotate(8deg); }
.duel-half.me img { left: -4%; bottom: 4%; transform: rotate(-8deg); }
.duel-half.them { animation: duel-in-top .6s ease-out; } .duel-half.me { animation: duel-in-bottom .6s ease-out; }
@keyframes duel-in-top { from { transform: translateY(-100%); } }
@keyframes duel-in-bottom { from { transform: translateY(100%); } }
/* the clash: where the two halves meet, energy runs along the line in both players' colours */
.duel-clash { position: absolute; left: -10%; right: -10%; top: 50%; height: 4px; z-index: -1; pointer-events: none; translate: 0 -50%;
  background: linear-gradient(90deg, var(--them2), var(--them1), #fff, var(--me1), var(--me2)); background-size: 200% 100%;
  box-shadow: 0 0 16px #fff, 0 0 32px var(--them1), 0 0 32px var(--me1); animation: duel-clash 2.2s linear infinite; transform: rotate(-3deg); }
@keyframes duel-clash { to { background-position: 200% 0; } }
.has-looks .side.foe .side-name { color: color-mix(in srgb, var(--them1) 45%, #fff); }
.has-looks .side.you .side-name { color: color-mix(in srgb, var(--me1) 45%, #fff); }
@media (prefers-reduced-motion: reduce) { .duel-half, .duel-clash { animation: none; } }

/* ── Ranked: everything gold and grandiose ── */
.kind-ranked .arena { border: 3px solid var(--gold); box-shadow: 0 0 0 3px #6E4A0C, 0 0 40px rgb(244 197 66 / .35), inset 0 0 60px rgb(244 197 66 / .15); }
.kind-ranked .arena-bg { inset: -50%; z-index: 0; opacity: .5; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(244 197 66 / .22) 0 3deg, transparent 3deg 12deg); animation: hv-spin 60s linear infinite; }
.kind-ranked .arena::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 15% 20%, #FFE9A0 0 1.5px, transparent 2.5px) 0 0 / 70px 70px,
              radial-gradient(circle at 60% 70%, #F4C542 0 1.5px, transparent 2.5px) 0 0 / 90px 90px;
  animation: ranked-dust 6s linear infinite; opacity: .8; }
@keyframes ranked-dust { to { background-position: 0 -70px, 0 -90px; } }
.kind-ranked .side-name { color: var(--gold) !important; font-size: var(--step-1); text-shadow: 3px 3px 0 #6E4A0C, 0 0 18px rgb(244 197 66 / .6); }
.kind-ranked .turn-banner { color: #FFF3C4; }
.kind-ranked .fighter { border-color: #C8931B; box-shadow: 0 0 0 1px rgb(244 197 66 / .35); }
.kind-ranked .fighter.acting { border-color: var(--gold); box-shadow: 0 0 22px rgb(244 197 66 / .65); }
.ranked-crown { position: absolute; top: 50%; left: 50%; translate: -50% -50%; z-index: -1; pointer-events: none; font-size: clamp(8rem, 30vw, 16rem);
  line-height: 1; color: rgb(244 197 66 / .10); text-shadow: 0 0 40px rgb(244 197 66 / .25); animation: crown 4s ease-in-out infinite alternate; font-style: normal; }
@keyframes crown { to { scale: 1.06; color: rgb(244 197 66 / .16); } }
.kind-ranked .duel-clash { background: linear-gradient(90deg, #6E4A0C, #F4C542, #FFF3C4, #F4C542, #6E4A0C); background-size: 200% 100%;
  box-shadow: 0 0 20px #F4C542, 0 0 40px #F4C542; height: 6px; }
.kind-ranked .fight-slam b { background: linear-gradient(90deg, #FFF3C4, #F4C542, #C8931B); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-reduced-motion: reduce) { .kind-ranked .arena-bg, .kind-ranked .arena::after, .ranked-crown { animation: none; } }

/* ===================================================================================
   THE REFRESH (2026-10): screentone pages, a watermark per part, page wipes, the team on stage, the story road,
   the star-up moment, stand level-ups and the sound menu.
   =================================================================================== */
/* Screentone pages: halftone dots fade in from the top-right corner (and a little from the bottom-left), in the
   part's light colour; faint speed lines fan out from the same corner. Fixed layers behind everything. */
body { background: var(--night); }
body[data-part] { background: radial-gradient(ellipse 90% 45% at 50% -8%, color-mix(in srgb, var(--part) 34%, transparent), transparent 70%), var(--night); }
body[data-part-from="progress"] { background: radial-gradient(ellipse 90% 40% at 50% -10%, color-mix(in srgb, var(--part) 22%, transparent), transparent 70%), var(--night); }
body::before, body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--part-2, var(--violet)) 24%, transparent) 1.3px, transparent 1.9px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 100% 0%, #000, transparent 75%), radial-gradient(ellipse 50% 45% at 0% 100%, rgb(0 0 0 / .65), transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 100% 0%, #000, transparent 75%), radial-gradient(ellipse 50% 45% at 0% 100%, rgb(0 0 0 / .65), transparent 75%);
}
body::after {
  background: repeating-conic-gradient(from 180deg at 100% 0%, rgb(255 255 255 / .05) 0deg 1deg, transparent 1deg 5deg);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, transparent 12%, #000 32%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0%, transparent 12%, #000 32%, transparent 70%);
}
/* the part's symbol (parts.SYMBOLS), huge and faint behind the page */
.part-mark { position: fixed; right: -6vw; top: 10vh; z-index: -1; width: min(50vw, 560px); aspect-ratio: 1; pointer-events: none;
  color: var(--part-2); opacity: .065; transform: rotate(-12deg); }
.part-mark svg { display: block; width: 100%; height: 100%; }
body.film .part-mark, body.cine-open .part-mark { display: none; }

/* Page transitions: the new page wipes in on a slant (cross-document View Transitions; browsers without them just
   load the page), then its title stamps on for a beat (app.js, pagereveal). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-dim .42s ease both; }
::view-transition-new(root) { animation: vt-wipe .42s cubic-bezier(.7, 0, .25, 1) both; }
@keyframes vt-wipe { from { clip-path: polygon(0 0, 0 0, -28% 100%, -28% 100%); } to { clip-path: polygon(0 0, 128% 0, 100% 100%, -28% 100%); } }
@keyframes vt-dim { to { filter: brightness(.55) saturate(.6); } }
.vt-stamp { position: fixed; left: 50%; top: 42%; z-index: 96; translate: -50% -50%; pointer-events: none; max-width: 92vw; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font: 400 clamp(1.8rem, 7vw, 4.2rem)/1 var(--display); color: var(--part-2, var(--gold));
  -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); animation: vt-stamp .75s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes vt-stamp { 0% { opacity: 0; transform: scale(2) rotate(-6deg); } 25% { opacity: 1; transform: scale(1) rotate(-4deg); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .vt-stamp { display: none; }
}

/* Home: your team on stage */
.team-stage { width: var(--page); margin: 1.5rem auto .5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.ts-copy { flex: 1 1 300px; max-width: 30rem; }
.ts-copy .lede { margin: .6rem 0 0; }
.ts-title { text-shadow: 4px 4px 0 var(--part, var(--violet)); }
.ts-figures { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 0; padding: 0; }
.ts-figures li { padding: .3rem .75rem; border-radius: 8px; font-weight: 700; font-size: .9rem;
  border: 2px solid color-mix(in srgb, var(--part-2, var(--gold)) 65%, transparent); }
.ts-figures .ts-power { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.ts-copy .cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.ts-stage { position: relative; isolation: isolate; flex: 2 1 460px; display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(.4rem, 1.4vw, 1rem); min-height: 400px; padding: 1rem 0 2.2rem; }
.ts-stage .speedlines { inset: -8% 0; animation: none; opacity: .55; --sl: color-mix(in srgb, var(--part-2, var(--gold)) 22%, transparent); }
.ts-aura { position: absolute; left: 8%; right: 8%; bottom: .6rem; z-index: -1; height: 64px; border-radius: 50%; filter: blur(7px);
  background: radial-gradient(ellipse, color-mix(in srgb, var(--part-2, var(--gold)) 55%, transparent), transparent 70%); animation: ts-aura 3s ease-in-out infinite; }
.ts-slot { width: clamp(118px, 16vw, 200px); animation: ts-bob 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.ts-slot:nth-of-type(1) { rotate: -7deg; }
.ts-slot:nth-of-type(2) { z-index: 2; scale: 1.12; margin: 0 .6rem 1.4rem; }
.ts-slot:nth-of-type(3) { rotate: 7deg; }
.ts-slot:hover, .ts-slot:focus-within { animation-play-state: paused; z-index: 3; }
@keyframes ts-bob { 50% { translate: 0 -12px; } }
@keyframes ts-aura { 50% { opacity: .65; transform: scaleX(1.08); } }
@media (max-width: 640px) { .ts-stage { min-height: 0; padding-bottom: 1.6rem; } .ts-slot { width: 29vw; } .ts-slot:nth-of-type(2) { margin: 0 .2rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .ts-slot, .ts-aura { animation: none; } }

/* The story map as a road: each part's stretch in its colour, the cleared part filled in, rows zigzag part to part */
.story-map.road { gap: 1.2rem; }
.story-map.road .story-part { position: relative; }
.story-map.road .story-nodes { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: .25rem; margin-top: 1.4rem; }
.story-map.road .story-nodes > .node { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; }
.story-map.road .story-nodes::before, .story-map.road .story-nodes::after { content: ""; position: absolute; top: 13px; height: 8px; border-radius: 99px; }
.story-map.road .story-nodes::before { left: calc(50% / var(--n, 5)); right: calc(50% / var(--n, 5)); background: rgb(255 255 255 / .1);
  background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .18) 0 6px, transparent 6px 14px); }
.story-map.road .story-nodes::after { left: calc(50% / var(--n, 5)); width: calc((100% - 100% / var(--n, 5)) * var(--done, 0));
  background: var(--part); box-shadow: 0 0 12px color-mix(in srgb, var(--part) 70%, transparent); }
.story-map.road .story-part:nth-child(even) .story-nodes { flex-direction: row-reverse; }
.story-map.road .story-part:nth-child(even) .story-nodes::after { left: auto; right: calc(50% / var(--n, 5)); }
.story-map.road .node.boss .node-dot { margin-top: -3px; box-shadow: 0 0 0 3px var(--ink), 0 0 16px color-mix(in srgb, var(--part) 70%, transparent); }
.story-map.road .node.cleared .node-dot { box-shadow: 0 0 0 3px var(--ink); }
/* the road turns from one part to the next: a short dashed bend on the side the last row ended */
.story-map.road .story-part + .story-part::before { content: ""; position: absolute; top: -1.2rem; width: 8px; height: 1.2rem; border-radius: 4px;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / .22) 0 5px, transparent 5px 9px); }
.story-map.road .story-part:nth-child(even)::before { right: 2.4rem; }
.story-map.road .story-part:nth-child(odd)::before { left: 2.4rem; }
/* your lead stand stands on the next stage */
.node-you { position: absolute; top: -32px; left: 50%; z-index: 2; width: 30px; height: 30px; margin-left: -15px; border-radius: 8px; object-fit: cover;
  border: 2px solid var(--gold); background: #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .5); animation: ts-bob 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .node-you { animation: none; } }

/* The star-up moment (app.js starUp): the card flashes, a star slams on with a ドン, the stats count up */
.starup { position: fixed; inset: 0; z-index: 95; display: grid; place-content: center; justify-items: center; gap: .8rem; padding: 16px;
  overflow: hidden; isolation: isolate; background: rgb(18 8 30 / .82); cursor: pointer; animation: su-in .2s ease both; }
.starup.leaving { animation: su-out .3s ease both; }
.su-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; translate: -50% -50%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(244 197 66 / .3) 0 4deg, transparent 4deg 14deg); animation: su-rays 2.8s linear .25s both; }
.su-card { position: relative; width: min(46vw, 210px); aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 5px solid var(--gold);
  background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 20px 50px rgb(0 0 0 / .6); animation: su-card .7s ease both; }
.su-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; }
.su-card::after { content: ""; position: absolute; inset: 0; background: #fff; animation: su-flash .55s ease-out both; }
.su-star { position: absolute; left: 50%; top: 40%; width: min(34vw, 150px); translate: -50% -50%; color: var(--gold); filter: drop-shadow(0 0 18px var(--gold));
  animation: su-star .55s cubic-bezier(.2, 1.6, .4, 1) .35s both; }
.su-star svg { display: block; width: 100%; stroke: var(--ink); stroke-width: 4; }
.su-don { position: absolute; left: calc(50% + min(18vw, 90px)); top: calc(42% - min(30vw, 150px)); margin: 0; font: 400 clamp(2.4rem, 9vw, 4rem)/1 var(--display);
  color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 4px 4px 0 var(--magenta); rotate: -8deg; animation: su-don .5s ease-out .4s both; }
.su-title { margin: 0; font: 400 clamp(1.5rem, 6vw, 2.3rem)/1.1 var(--display); color: var(--gold); text-align: center; -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill; animation: su-rise .4s ease-out .75s both; }
.su-stats { display: grid; gap: .35rem; min-width: min(80vw, 290px); margin: 0; animation: su-rise .4s ease-out .9s both; }
.su-stats div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .8rem; border-radius: 8px; background: rgb(255 255 255 / .08); font-weight: 700; }
.su-stats dd { margin: 0; color: #8BE3A0; font-variant-numeric: tabular-nums; }
.su-hint { margin: 0; font-size: .8rem; color: var(--muted); animation: su-rise .4s ease-out 1.2s both; }
@keyframes su-in { from { opacity: 0; } }
@keyframes su-out { to { opacity: 0; } }
@keyframes su-rays { from { opacity: 0; transform: rotate(0); } 15% { opacity: 1; } to { opacity: .6; transform: rotate(50deg); } }
@keyframes su-card { 0% { transform: scale(.9); } 30% { transform: scale(1.06) rotate(-2deg); } 55% { transform: scale(.98) rotate(1deg); } 100% { transform: none; } }
@keyframes su-flash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes su-star { from { opacity: 0; transform: scale(3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes su-don { from { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } to { opacity: 1; transform: none; } }
@keyframes su-rise { from { opacity: 0; transform: translateY(10px); } }
.starup.shake { animation: su-in .2s ease both, arena-shake .35s ease .4s; }
@media (prefers-reduced-motion: reduce) { .starup, .starup * { animation: none !important; } .su-card::after { opacity: 0; } }

/* A stand's level-up: a smaller pop than the player's, a ring and the new level */
.toast-pop.standup span:first-child { display: inline-flex; align-items: center; gap: .6rem; }
.lv-ring { position: relative; flex: none; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  font: 400 1rem/1 var(--display); color: var(--ink); background: var(--sky, #3AB4F2); animation: lvl-pop .6s cubic-bezier(.2, 1.8, .4, 1) both; }
.lv-ring::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid var(--sky, #3AB4F2); animation: lv-ring 1.4s ease-out .2s both; }
@keyframes lv-ring { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lv-ring, .lv-ring::after { animation: none; } }

/* The sound menu (app.js sfx): off by default, saved on the device */
.sound-drop > summary { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--muted);
  border: 2px solid rgb(255 255 255 / .14); }  /* no padding: .nav-drop's would push the icon off-centre */
.sound-drop > summary:hover { color: var(--paper); }
.sound-icon svg { display: block; transition: transform .3s; }
.sound-drop[open] > summary .sound-icon svg { transform: rotate(60deg); }
@media (prefers-reduced-motion: reduce) { .sound-icon svg { transition: none; } }
.sound-menu { min-width: 17rem; padding: .8rem; display: grid; gap: .6rem; max-height: calc(100dvh - 5.5rem); overflow-y: auto;
  overscroll-behavior: contain; }
@media (max-width: 640px) {  /* phones: centred on the screen under the top bar, not hung off the gear's right edge */
  .nav-menu.right.sound-menu { position: fixed; top: calc(env(safe-area-inset-top) + 3.4rem); left: 50%; right: auto; translate: -50% 0;
    width: min(22rem, calc(100vw - 1.5rem)); min-width: 0; max-height: calc(100dvh - 4rem - 5rem); }
}
.sound-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; font-weight: 700; }
.sound-row.col { display: grid; gap: .3rem; }
.sound-row input[type="checkbox"], .sound-cats input { width: 20px; height: 20px; accent-color: var(--gold); }
.sound-row input[type="range"] { width: 100%; accent-color: var(--gold); }
.sound-cats { display: grid; gap: .35rem; margin: 0; padding: .5rem .7rem .6rem; border: 1px solid rgb(255 255 255 / .14); border-radius: 10px; }
.sound-cats legend { padding: 0 .3rem; font-weight: 700; font-size: .85rem; color: var(--gold); }
.sound-cats label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.danger-zone { margin-top: 1rem; padding: .6rem .9rem; border: 1px solid rgb(214 36 110 / .45); border-radius: var(--radius-ui); }
.danger-zone > summary { cursor: pointer; font-weight: 800; color: #FF8FB4; }
.danger-zone[open] > summary { margin-bottom: .5rem; }
.lang-pick { grid-template-columns: 1fr 1fr; }
.lang-pick a { display: flex; align-items: center; gap: .45rem; min-height: 36px; padding: .2rem .5rem; border-radius: 8px;
  color: var(--paper); text-decoration: none; font-weight: 700; font-size: .9rem; }
.lang-pick a:hover { background: rgb(255 255 255 / .06); }
.lang-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); }
.lang-pick a[aria-current] .lang-dot { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 40%, transparent 45%); }
label.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }  /* the bots' honeypot (login, register): label only, or every health bar named .hp hides too */
.key-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .6rem; font-size: .9rem; }
.key-cap { min-height: 36px; min-width: 44px; padding: .2rem .6rem; border-radius: 8px; border: 1px solid rgb(255 255 255 / .25);
  border-bottom-width: 3px; background: var(--night-2); color: var(--paper); font: 800 .9rem var(--body); cursor: pointer; }
.key-cap:hover { border-color: var(--gold); }
.key-cap:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.key-cap.listening { border-color: var(--gold); color: var(--gold); animation: key-wait 1s ease-in-out infinite; }
@keyframes key-wait { 50% { opacity: .55; } }
.key-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.key-presets button { min-height: 32px; padding: .15rem .6rem; border-radius: 99px; border: 1px solid rgb(255 255 255 / .2);
  background: transparent; color: var(--muted); font: 700 .8rem var(--body); cursor: pointer; }
.key-presets button:hover { color: var(--paper); border-color: var(--gold); }
@media (hover: none) and (pointer: coarse) { .key-map { display: none; } }  /* no keyboard on a phone */
@media (prefers-reduced-motion: reduce) { .key-cap.listening { animation: none; } }

/* ===================================================================================
   PERFORMANCE (measured in Firefox, which repaints far more than Chromium): every looping animation used to force
   a repaint of the page's fixed screentone layers. The layers get their own compositor layer, the loops animate
   only transform and opacity, and Firefox skips the backdrop blurs (the bars are near-opaque anyway).
   =================================================================================== */
body::before, body::after { will-change: transform; transform: translateZ(0); contain: strict; }
.part-mark { will-change: transform; contain: strict; }
.dododo b, .wm-go, .ts-slot, .node-you, .dododo-face { will-change: translate, transform; }
/* the red "new" dot and the next story stage pulse with a ring that scales (no box-shadow repaints) */
.nav-dot { position: relative; animation: none; box-shadow: none; }
.nav-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--magenta); opacity: .7;
  animation: dot-ring 1.8s ease-out infinite; will-change: transform, opacity; }
@keyframes dot-ring { 70%, 100% { transform: scale(2.6); opacity: 0; } }
.node.current .node-dot { position: relative; animation: none; }
.node.current .node-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 3px solid rgb(214 36 110 / .45);
  animation: node-ring 1.4s ease-in-out infinite; will-change: transform, opacity; pointer-events: none; }
@keyframes node-ring { 50% { transform: scale(1.18); opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .nav-dot::after, .node.current .node-dot::after { animation: none; } }
@supports (-moz-appearance: none) {
  .topbar, .dock, .storage-tools, .explorer-tools, .gang-tabs { backdrop-filter: none; }
  .topbar { background: rgb(43 23 71 / .985); }
  .storage-tools, .explorer-tools, .gang-tabs { background: rgb(28 15 46 / .97); }
}
.storage-more { display: block; margin: 1rem auto 0; }
/* the home stage's glow: a soft gradient that breathes with transform and opacity only (no animated blur) */
.ts-aura { filter: none; background: radial-gradient(ellipse, color-mix(in srgb, var(--part-2, var(--gold)) 45%, transparent), transparent 72%); will-change: transform, opacity; }

/* ===================================================================================
   MOBILE FIXES (2026-10): the dungeon's layout, text selection in fights, the long-press link menu on cards, and a
   denser team page.
   =================================================================================== */
/* the dungeon's redesign set two columns after the phone rule: on a phone the map got squeezed into a strip */
@media (max-width: 760px) { .dungeon-layout { grid-template-columns: minmax(0, 1fr); } }
/* tapping fast in a fight no longer selects text; long-pressing a card no longer opens the phone's link menu (share...) */
#fight, .fight, .card, .stand-slot, .draft-pick { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.card img, #fight img { -webkit-user-drag: none; user-drag: none; }
/* team presets: one empty slot (it holds the save form), not ten */
.preset-card.empty ~ .preset-card.empty { display: none; }
@media (max-width: 640px) {
  .player-bar { gap: .6rem; padding-block: .8rem; }
  .player-bar .display.sm { font-size: 1.7rem; }
  .wallet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .8rem; }
  .wallet > div { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; min-width: 0; }
  .wallet dt { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .wallet dd { margin: 0; font-size: 1rem; white-space: nowrap; }
  .gang-hub { padding: .8rem .9rem; }
  .gang-hub .muted, .gang-hub-crest { display: none; }
  .gang-hub-facts { font-size: .78rem; }
  .gang-hub-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
  .gang-hub-actions .btn { min-height: 40px; padding: .35rem .8rem; }
  /* the four tiles become one swipeable row */
  .actions-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; margin: 0 -1rem 1.2rem; padding: 0 1rem .4rem; scrollbar-width: none; }
  .actions-row::-webkit-scrollbar { display: none; }
  .actions-row > .action-tile { flex: 0 0 78%; scroll-snap-align: start; padding: .8rem .9rem; }
  .action-tile .h3 { font-size: 1.05rem; }
  .action-tile p { font-size: .88rem; margin-bottom: .6rem; }
  .timers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-bottom: 1.2rem; }
  .timers li { padding: .35rem .5rem; font-size: .72rem; min-width: 0; }
  /* three stands a row in the team and storage */
  .team-grid, .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem .45rem; }
  /* small cards keep the art, rarity, level, stars and name; the stand's panel has every stat */
  :is(.team-grid, .collection-grid) .card :is(.card-stats, .traits, .card-flavor) { display: none; }
  :is(.team-grid, .collection-grid) .card .card-name { font-size: .78rem; line-height: 1.1; }
}

/* ===================================================================================
   PHONES: Compact by default (more on screen), Comfortable as a setting (html.comfy, the sound and display menu).
   And the entrance wipe for browsers without cross-page transitions (html.vt-enter, set before the first paint).
   =================================================================================== */
@media (max-width: 640px) {
  html:not(.comfy) { font-size: 87.5%; --page: min(1200px, 100% - 1.25rem); }
  html:not(.comfy) .page { margin-top: 1rem; margin-bottom: 2.5rem; }
  html:not(.comfy) .topbar { padding-top: calc(.3rem + env(safe-area-inset-top)); padding-bottom: .3rem; }
  html:not(.comfy) .topbar .mascot img { width: 32px; height: 32px; }
  html:not(.comfy) .sound-drop > summary { width: 36px; height: 36px; }
  html:not(.comfy) .dock { padding-top: .1rem; }
  html:not(.comfy) :is(.player-bar, .action-tile, .battle-panel, .story-part, .bounty-card, .gang-hub, .presets, .story-stage) { padding: .7rem .8rem; }
  html:not(.comfy) .display { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
  html:not(.comfy) :is(.grid, .collection-grid, .team-grid) { gap: .45rem .4rem; }
  html:not(.comfy) .btn { min-height: 44px; }  /* still easy to tap */
}
html.vt-enter::before { content: ""; position: fixed; inset: -2px; z-index: 2147483000; pointer-events: none;
  background: repeating-linear-gradient(-18deg, rgb(255 255 255 / .16) 0 2px, transparent 2px 14px), linear-gradient(120deg, #7A3FB8, #D6246E 55%, #F4C542);
  animation: vt-sweep .5s cubic-bezier(.7, 0, .25, 1) .05s both; }
@keyframes vt-sweep { from { clip-path: polygon(0 0, 128% 0, 100% 100%, -28% 100%); } to { clip-path: polygon(128% 0, 128% 0, 100% 100%, 100% 100%); } }
@media (prefers-reduced-motion: reduce) { html.vt-enter::before { display: none; } }

/* floating notes never take space in the page (app.js lifts them into the toast stack, three at most) */
[data-float] { display: none !important; }
@media (max-width: 640px) {
  .toasts { top: calc(56px + env(safe-area-inset-top)); bottom: auto; right: .6rem; left: .6rem; width: auto; gap: .35rem; align-content: start; }
  .toast-pop { padding: .5rem .7rem; font-size: .85rem; box-shadow: 0 6px 18px rgb(0 0 0 / .45); }
}

/* ===================================================================================
   PVE MENUS (2026-10): the story's world map, the Alternate Universe's wormholes, Carry Me's theatre, Over Heaven's
   night sky and Requiem's targets. Only the playing pieces move (transform/opacity), and only where you are.
   =================================================================================== */
/* the team: its three stands side by side, at every width */
.team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }

/* Story: the world map */
.world-map { margin: 0 0 1.4rem; }
.wm-scroll { overflow-x: auto; border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--night-3); scrollbar-width: thin; }
.wm-board { position: relative; min-width: 760px; }
.wm-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; color: rgb(255 255 255 / .07); }
.wm-sea { fill: #130A26; }
.wm-land { fill: #2C1A4C; stroke: #4C3080; stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wm-route { fill: none; stroke: rgb(255 255 255 / .38); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wm-route.done { stroke: var(--gold); stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 3px rgb(244 197 66 / .6)); }
.wm-pin { position: absolute; z-index: 1; translate: -50% -50%; display: grid; justify-items: center; text-decoration: none; color: var(--paper); }
.wm-pin:hover, .wm-pin:focus-visible { z-index: 3; }
.wm-dot { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); font: 400 .85rem/1 var(--display); color: var(--ink);
  background: radial-gradient(circle, var(--part) 0 56%, transparent 58%), conic-gradient(var(--gold) calc(var(--frac) * 360deg), rgb(255 255 255 / .2) 0);
  box-shadow: 0 3px 10px rgb(0 0 0 / .55); transition: scale .15s; }
.wm-pin:hover .wm-dot, .wm-pin:focus-visible .wm-dot { scale: 1.15; }
.wm-pin.fresh .wm-dot { filter: saturate(.35) brightness(.75); }
.wm-pin.current .wm-dot { position: relative; }
.wm-pin.current .wm-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--gold); animation: node-ring 1.4s ease-in-out infinite; will-change: transform, opacity; }
.wm-label { position: absolute; display: grid; white-space: nowrap; text-align: center; padding: .12rem .45rem; border-radius: 6px; background: rgb(18 8 30 / .85);
  font-size: .72rem; line-height: 1.2; pointer-events: none; }
.wm-label small { color: var(--muted); font-size: .66rem; }
.wm-pin.below .wm-label { top: calc(100% + 5px); left: 50%; translate: -50% 0; }
.wm-pin.above .wm-label { bottom: calc(100% + 5px); left: 50%; translate: -50% 0; }
.wm-pin.left .wm-label { right: calc(100% + 7px); top: 50%; translate: 0 -50%; text-align: right; }
.wm-pin.right .wm-label { left: calc(100% + 7px); top: 50%; translate: 0 -50%; text-align: left; }
.wm-you { position: absolute; left: calc(100% + 4px); top: 50%; margin-top: -12px; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--gold); object-fit: cover; background: #fff;
  box-shadow: 0 3px 8px rgb(0 0 0 / .5); animation: ts-bob 2.4s ease-in-out infinite; will-change: translate; }
.story-part { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { .wm-pin.current .wm-dot::after, .wm-you { animation: none; } }

/* Alternate Universe: the wormholes */
.rifts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: 0 0 1.4rem; }
.rift { display: grid; justify-items: center; gap: .3rem; padding: .8rem .4rem; border-radius: var(--radius-card); text-align: center; text-decoration: none; color: var(--paper);
  border: 2px solid transparent; transition: background .15s; }
.rift:hover, .rift:focus-visible { background: rgb(255 255 255 / .04); }
.rift.here { border-color: color-mix(in srgb, var(--part) 70%, transparent); background: rgb(255 255 255 / .05); }
.rift-ring { display: grid; place-items: center; width: 116px; aspect-ratio: 1; padding: 5px; border-radius: 50%;
  background: conic-gradient(var(--part) calc(var(--frac) * 360deg), rgb(255 255 255 / .12) 0); box-shadow: 0 0 26px color-mix(in srgb, var(--part) 40%, transparent); }
.rift-hole { position: relative; isolation: isolate; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
  border: 3px solid var(--ink); background: #07030E; }
.rift-swirl { position: absolute; inset: -25%; z-index: -1; will-change: transform;
  background: radial-gradient(circle, #07030E 0 14%, transparent 52%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--part) 85%, #fff) 0 9deg, color-mix(in srgb, var(--part) 30%, #07030E) 9deg 22deg, #07030E 22deg 36deg);
  animation: rift-spin 16s linear infinite paused; }
.rift-swirl::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: repeating-conic-gradient(from 40deg, rgb(255 255 255 / .18) 0 4deg, transparent 4deg 26deg);
  animation: rift-spin 9s linear infinite reverse paused; }
.rift.here .rift-swirl, .rift.here .rift-swirl::after, .rift:hover .rift-swirl, .rift:hover .rift-swirl::after { animation-play-state: running; }
.rift-core { font: 400 1.05rem/1 var(--display); color: #fff; text-shadow: 0 0 10px var(--part), 2px 2px 0 var(--ink); }
.rift.sealed { opacity: .5; filter: grayscale(.75); }
.rift.sealed .rift-swirl, .rift.sealed .rift-swirl::after { animation: none; }
.rift-name { font: 400 .92rem/1.15 var(--display); }
.rift-meta { color: var(--muted); font-size: .74rem; }
@keyframes rift-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rift-swirl, .rift-swirl::after { animation: none !important; } }

/* Carry Me: the theatre */
.cm-theater { display: grid; gap: .9rem; margin: 0 0 1.4rem; }
.cm-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 170px; padding: 2.3rem 19% 1.6rem; text-align: center;
  border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--night-3);
  background: radial-gradient(ellipse at 50% 125%, color-mix(in srgb, var(--part) 60%, transparent), transparent 62%),
    radial-gradient(ellipse 60% 70% at 50% -25%, rgb(255 236 190 / .28), transparent 70%), #1A0912; }
.cm-curtain { position: absolute; top: 0; bottom: 0; width: 17%; z-index: -1;
  background: repeating-linear-gradient(90deg, #6E0B1E 0 9px, #A8182F 9px 17px, #7E0F24 17px 25px); box-shadow: inset 0 -14px 20px rgb(0 0 0 / .35); }
.cm-curtain.left { left: 0; border-bottom-right-radius: 70% 22%; }
.cm-curtain.right { right: 0; border-bottom-left-radius: 70% 22%; }
.cm-marquee { position: absolute; top: .5rem; left: 19%; right: 19%; display: flex; justify-content: space-between; margin: 0; }
.cm-marquee i { width: 7px; height: 7px; border-radius: 50%; background: #FFE07A; box-shadow: 0 0 8px #FFC93A; }
.cm-marquee i:nth-child(odd) { animation: bulb 1.3s steps(2) infinite; }
@keyframes bulb { 50% { opacity: .3; } }
.cm-showing .kicker { margin: 0; color: #FFE07A; }
.cm-act-title { margin: .25rem 0; font: 400 clamp(1.3rem, 3.4vw, 2.1rem)/1.1 var(--display); color: #fff; text-shadow: 3px 3px 0 var(--ink); }
.cm-showing .muted { margin: 0; font-size: .85rem; }
.cm-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.cm-ticket { display: grid; gap: .05rem; padding: .5rem 1.1rem .5rem .8rem; border-left: 6px solid var(--part); border-radius: 8px; text-decoration: none; color: #2A1A12;
  background: #F3E6C8; -webkit-mask: radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px); mask: radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px);
  transition: translate .15s; }
.cm-ticket:hover, .cm-ticket:focus-visible { translate: 0 -3px; }
.cm-ticket b { font: 400 .95rem/1 var(--display); }
.cm-ticket span { font-weight: 700; font-size: .84rem; line-height: 1.15; }
.cm-ticket small { color: #6B5847; font-size: .74rem; }
.cm-ticket.now { background: #FFF2CC; translate: 0 -3px; }
.cm-ticket.torn { background: repeating-linear-gradient(-45deg, #E4D6B6 0 6px, #EADDBF 6px 12px); }
.cm-ticket.torn small::after { content: " · played"; }
.cm-ticket.shut { opacity: .45; filter: grayscale(1); }
.story-part[id^="act-"], .story-part[id^="au-"] { scroll-margin-top: 80px; }
@media (prefers-reduced-motion: reduce) { .cm-marquee i { animation: none; } }

/* Over Heaven: the tracks as a night sky */
.oh-sky { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: 0 0 1.2rem; padding: .7rem;
  border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--night-3);
  background: radial-gradient(1px 1px at 12% 20%, #fff8, transparent), radial-gradient(1px 1px at 72% 64%, #fff6, transparent), radial-gradient(1px 1px at 40% 82%, #fff5, transparent),
    radial-gradient(ellipse at 25% 0%, #2A1F66, #0B0820 72%); }
.oh-const { display: grid; gap: .1rem; padding: .45rem .55rem .55rem; border-radius: 10px; border: 2px solid transparent; text-decoration: none; color: var(--paper); }
.oh-const:hover, .oh-const:focus-visible { background: rgb(255 255 255 / .05); }
.oh-const.active { border-color: color-mix(in srgb, var(--part) 80%, #fff); background: rgb(255 255 255 / .07); }
.oh-const svg { width: 100%; height: 62px; overflow: visible; }
.oh-const polyline { fill: none; stroke: rgb(255 255 255 / .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.oh-const circle { fill: rgb(255 255 255 / .32); }
.oh-const circle.lit { fill: #FFEBB0; filter: drop-shadow(0 0 2.5px #F4C542); }
.oh-const circle.next { fill: none; stroke: #F4C542; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.oh-const strong { font-size: .88rem; line-height: 1.15; }
.oh-const small { color: var(--muted); font-size: .74rem; }
.oh-const.done strong::after { content: " ✓"; color: var(--gold); }
.oh-const.locked { opacity: .5; }
.oh-const.extra { border-style: dashed; border-color: rgb(214 36 110 / .5); }

/* Requiem: a target per track */
.rq-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: .55rem; }
.rq-board a { display: grid; justify-items: center; align-content: start; gap: .25rem; padding: .6rem .4rem; border-radius: 12px; text-align: center; }
.rq-board a.on { background: color-mix(in srgb, var(--tc, var(--magenta)) 30%, var(--night-2)); }
.rq-target { display: grid; place-items: center; width: 64px; aspect-ratio: 1; padding: 5px; border-radius: 50%;
  background: conic-gradient(var(--tc, var(--magenta)) calc(var(--frac) * 360deg), rgb(255 255 255 / .12) 0); }
.rq-target > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--ink); font-size: 1.15rem;
  background: repeating-radial-gradient(circle, #33195A 0 6px, #1C0F2E 6px 12px); }
.rq-board b { font-size: .82rem; line-height: 1.15; }

/* phones: the sky, the wormholes, the tickets and the targets scroll sideways */
@media (max-width: 640px) {
  :is(.rifts, .oh-sky, .cm-tickets, .rq-board) { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  :is(.rifts, .oh-sky, .cm-tickets, .rq-board)::-webkit-scrollbar { display: none; }
  .rift { flex: 0 0 128px; scroll-snap-align: start; } .rift-ring { width: 92px; }
  .oh-const { flex: 0 0 136px; scroll-snap-align: start; }
  .cm-tickets > li { flex: 0 0 140px; scroll-snap-align: start; }
  .rq-board a { flex: 0 0 104px; scroll-snap-align: start; }
  .cm-stage { padding-inline: 22%; min-height: 150px; }
}

/* Badges: staff (STFU Team, Moderator) and earned ones, on the profile and next to names in the chats */
.profile-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.badge-chip, .chat-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .5rem; border-radius: 999px; font-weight: 700; font-size: .78rem;
  line-height: 1.3; color: var(--paper); background: rgb(255 255 255 / .08); border: 1.5px solid rgb(255 255 255 / .2); white-space: nowrap; }
.badge-chip.main { box-shadow: 0 0 0 2px var(--gold); }
.chat-badge { margin-left: .3rem; padding: 0 .4rem; font-size: .68rem; vertical-align: .1em; }
.badge-team { background: linear-gradient(120deg, #7A3FB8, #D6246E); border-color: #F4C542; color: #fff; }
.badge-mod { background: #1B5E8A; border-color: #3AB4F2; color: #fff; }
.badge-supporter { background: rgb(244 197 66 / .18); border-color: var(--gold); color: var(--gold); }
.badge-heaven { background: rgb(95 242 228 / .14); border-color: #5FF2E4; }
.badge-requiem { background: rgb(214 36 110 / .18); border-color: var(--magenta); }
.badge-shiny { background: rgb(255 255 255 / .1); border-color: #FFD6F5; }
.badge-veteran { background: rgb(200 100 43 / .2); border-color: #F2C27A; }

/* ===================================================================================
   NO SIDEWAYS PAGE ON PHONES: nothing may make the page wider than the screen (a wider page lets phones pan and
   zoom out, and the layout looks broken). Decorations that bleed off the edge are clipped inside their own box.
   =================================================================================== */
html, body { overflow-x: clip; max-width: 100%; }
.part-mark-box { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.part-mark-box .part-mark { position: absolute; z-index: auto; }
.ts-stage { overflow-x: clip; overflow-y: visible; }
@media (max-width: 640px) {
  /* the swipeable tile row reaches exactly to the screen edges, whatever the page gutter (Compact or Comfortable) */
  .actions-row { margin-inline: calc((100% - 100vw) / 2); padding-inline: calc((100vw - 100%) / 2); }
  /* phones zoom into any field under 16 px when it's tapped (and stay zoomed): fields keep 16 px in Compact too */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1em); }
}
@media (max-width: 640px) {
  /* the home stage: three cards that fit the screen, a gentler tilt, the stats left to the stand's panel */
  .ts-stage { gap: .35rem; padding-inline: .2rem; }
  .ts-slot { width: calc((100% - 1.2rem) / 3); }
  .ts-slot:nth-of-type(1) { rotate: -4deg; }
  .ts-slot:nth-of-type(2) { scale: 1.06; margin: 0 .1rem .8rem; }
  .ts-slot:nth-of-type(3) { rotate: 4deg; }
  .ts-stage .card :is(.card-stats, .traits, .card-flavor) { display: none; }
  .ts-stage .card .card-name { font-size: .78rem; line-height: 1.1; }
}

/* Special numbers and power: a tooltip with the whole equation, on hover, keyboard focus and tap (the browser's own
   tooltip never shows on phones) */
.sp-scales[data-tip], .scaling-power[data-tip] { position: relative; cursor: help; }
.sp-scales[data-tip]:is(:hover, :focus)::after, .scaling-power[data-tip]:is(:hover, :focus)::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; z-index: 40;
  width: max-content; max-width: min(320px, 82vw); padding: .5rem .65rem; border-radius: 8px; border: 2px solid var(--gold);
  background: var(--ink); color: var(--paper); font: 500 .78rem/1.4 var(--body); text-align: left; white-space: pre-line;
  box-shadow: 0 8px 20px rgb(0 0 0 / .5); pointer-events: none; }
.sp-scales[data-tip]:focus, .scaling-power[data-tip]:focus { outline: none; }
.sp-scales[data-tip]:focus-visible, .scaling-power[data-tip]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the page title stamp on a phone: smaller, and a long title wraps instead of being cut off */
@media (max-width: 640px) { .vt-stamp { width: max-content; max-width: 88vw; white-space: normal; text-align: center; font-size: clamp(1.4rem, 8.5vw, 2.6rem); line-height: 1.05; } }

/* ===================================================================================
   THE ANIMATION LAB, BUILT (2026-10): damage preview, hit-stop and rush, the PvP cut-in, the stand sheet's tabs,
   the daily stamp, the ranked promotion, the 10-pull fan, shiny sparkles, holo tilt, the menacing aura at rest,
   pressed buttons and loading shapes. Everything stops with "reduce motion".
   =================================================================================== */
/* damage preview: the health the hit would take blinks on the bar; the verdict above the card */
.hp { position: relative; }
.hp-ghost { position: absolute; top: 0; bottom: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 4px, var(--magenta) 4px 8px); transition: opacity .12s; }
.fighter:has(.fighter-hit:hover) .hp-ghost, .fighter:has(.fighter-hit:focus-visible) .hp-ghost { opacity: 1; animation: ghost-blink .8s ease-in-out infinite; }
@keyframes ghost-blink { 50% { opacity: .45; } }
.fighter-hit[data-hit]::after { padding: .25rem .55rem; border-radius: 8px; border: 2px solid var(--gold); background: var(--ink); color: var(--paper); font-weight: 700; }

/* hit-stop: the target freezes bright for a few frames */
.fighter.hitstop .fighter-portrait { animation: hitstop .14s steps(2); }
@keyframes hitstop { 50% { filter: brightness(2.1) contrast(1.2); transform: translate(-3px, 2px); } }
/* a rush: one number per hit, a hit counter */
.rush-pop { position: absolute; z-index: 6; font-size: 1.05rem !important; }
.rush-count { position: absolute; right: -6px; top: 18%; z-index: 7; pointer-events: none; text-align: right;
  font: 400 2rem/.9 var(--display); color: var(--gold); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.rush-count small { display: block; font: 900 .65rem var(--body); letter-spacing: .2em; color: #fff; -webkit-text-stroke: 0; }
.rush-count.bump { animation: rush-bump .14s ease-out; }
@keyframes rush-bump { 50% { transform: scale(1.3); } }

/* the PvP cut-in: a manga panel slashes in when a special fires */
.cut-in { position: fixed; left: 0; right: 0; top: 30%; z-index: 88; height: min(34vh, 260px); display: grid; grid-template-columns: 1.1fr 1fr;
  pointer-events: none; animation: cut-life 1.7s ease forwards; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .6)); }
.cut-art { position: relative; overflow: hidden; isolation: isolate; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); background: var(--magenta);
  animation: cut-in-l .32s cubic-bezier(.2, .9, .3, 1) both; }
.cut-in.foe .cut-art { background: #3A6FD8; }
.cut-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; mix-blend-mode: luminosity; opacity: .9; }
.cut-art .speedlines { z-index: 1; --sl: rgb(255 255 255 / .28); animation: none; }
.cut-text { display: grid; align-content: center; gap: .3rem; padding: 0 1.2rem 0 18%; clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  background: var(--ink); animation: cut-in-r .32s .06s cubic-bezier(.2, .9, .3, 1) both; }
.cut-text b { font: 400 clamp(1.3rem, 4.5vw, 2.6rem)/1 var(--display); color: var(--gold); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.cut-text small { font-weight: 900; letter-spacing: .2em; font-size: .78rem; color: #fff; text-transform: uppercase; }
.cut-sfx { position: absolute; right: 4%; bottom: -14px; font: 400 clamp(2rem, 7vw, 3.6rem)/1 var(--display); color: #fff;
  -webkit-text-stroke: 8px var(--magenta); paint-order: stroke fill; rotate: -8deg; animation: cut-sfx 1.7s ease both; }
@keyframes cut-in-l { from { transform: translateX(-110%); } }
@keyframes cut-in-r { from { transform: translateX(110%); } }
@keyframes cut-life { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cut-sfx { 0%, 18% { opacity: 0; transform: scale(2.4); } 32% { opacity: 1; transform: none; } }

/* the stand panel: a grab handle and tabs on phones (all its groups on wider screens), loading shapes */
.panel-grab { display: none; }
.ptabs { display: none; }
@media (max-width: 640px) {
  .stand-panel[open] { animation: sheet-up .32s cubic-bezier(.2, 1, .3, 1); }
  .panel-grab { display: block; width: 44px; height: 5px; margin: -.2rem auto .6rem; border-radius: 99px; background: rgb(255 255 255 / .35); }
  .ptabs { position: sticky; top: -1rem; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: .6rem -1rem .4rem;
    padding: 0 1rem; background: var(--night-2); border-bottom: 1px solid rgb(255 255 255 / .12); }
  .ptabs button { min-height: 44px; border: 0; background: none; color: var(--muted); font: 700 .9rem var(--body); cursor: pointer; }
  .ptabs button[aria-selected="true"] { color: #fff; }
  .ptabs-line { position: absolute; bottom: -1px; left: 1rem; width: calc((100% - 2rem) / 4); height: 3px; border-radius: 99px; background: var(--gold);
    transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
  .panel-body[data-tab="gear"] .ptabs-line { transform: translateX(100%); }
  .panel-body[data-tab="stars"] .ptabs-line { transform: translateX(200%); }
  .panel-body[data-tab="chips"] .ptabs-line { transform: translateX(300%); }
  .panel-body[data-tab="stats"] .pt-group:not([data-group="stats"]), .panel-body[data-tab="gear"] .pt-group:not([data-group="gear"]),
  .panel-body[data-tab="stars"] .pt-group:not([data-group="stars"]), .panel-body[data-tab="chips"] .pt-group:not([data-group="chips"]) { display: none; }
  .pt-group { animation: tab-in .22s ease; }
}
@keyframes tab-in { from { opacity: 0; transform: translateX(10px); } }
.panel-skeleton { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 1.2rem; padding: .4rem 0; }
.sk { display: block; border-radius: 10px; background: linear-gradient(90deg, rgb(255 255 255 / .06) 25%, rgb(255 255 255 / .15) 37%, rgb(255 255 255 / .06) 63%) 0 0 / 400% 100%;
  animation: shimmer 1.2s ease infinite; }
.sk-card { aspect-ratio: 7 / 12; }
.sk-col { display: grid; gap: .7rem; align-content: start; }
.sk-line { height: 14px; width: 100%; } .sk-line.tall { height: 30px; } .w40 { width: 40%; } .w55 { width: 55%; } .w70 { width: 70%; } .w80 { width: 80%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 640px) { .panel-skeleton { grid-template-columns: 1fr; } .sk-card { width: 55%; margin: 0 auto; } }

/* the daily streak: claimed days wear a 済 stamp; today's slams on with an ink splash */
.streak li { position: relative; }
.streak-stamp { position: absolute; inset: 8%; z-index: 2; display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--magenta);
  color: var(--magenta); font: 400 1.25rem/1 var(--display); rotate: -14deg; opacity: .85; pointer-events: none; }
.streak-stamp.new { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.streak-ink { position: absolute; inset: -20%; z-index: 1; border-radius: 50%; background: radial-gradient(circle, rgb(214 36 110 / .4), transparent 65%);
  animation: ink .55s ease-out both; pointer-events: none; }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-16deg); } 60% { opacity: .9; transform: scale(.92); } 100% { transform: none; } }
@keyframes ink { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* the ranked promotion: the old badge breaks, the new one slams in over rays */
.promo-moment { position: fixed; inset: 0; z-index: 92; display: grid; place-content: center; justify-items: center; gap: 1rem; overflow: hidden;
  isolation: isolate; border: 0; cursor: pointer; background: rgb(18 8 30 / .86); color: var(--paper); font: inherit; animation: fade-in .25s ease both; }
.promo-rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; translate: -50% -50%; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgb(244 197 66 / .32) 0 6deg, transparent 6deg 18deg); animation: promo-rays 4s linear .5s both; }
.promo-badge { grid-area: 1 / 1; display: grid; place-items: center; width: 170px; height: 170px; padding: 0 1rem; text-align: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); font: 400 1.5rem/1.05 var(--display); color: var(--ink); }
.promo-badge.old { background: linear-gradient(160deg, #B3A3CF, #7A3FB8); animation: shatter .5s ease-in .35s forwards; }
.promo-badge.new { background: linear-gradient(160deg, #FFF3C4, var(--gold) 50%, #C8931B); animation: rank-in .6s .8s cubic-bezier(.2, 1.6, .4, 1) both; }
.promo-word { font: 400 clamp(2rem, 8vw, 3.4rem)/1 var(--display); color: var(--gold); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill;
  animation: rank-in .5s 1.15s cubic-bezier(.2, 1.6, .4, 1) both; }
.promo-moment small { color: var(--muted); animation: fade-in .4s 1.8s both; }
@keyframes promo-rays { from { opacity: 0; transform: rotate(0); } 15% { opacity: 1; } to { opacity: .5; transform: rotate(50deg); } }
@keyframes shatter { 30% { transform: scale(1.08) rotate(3deg); } 100% { transform: scale(.4) rotate(-20deg); opacity: 0; filter: blur(4px); } }
@keyframes rank-in { from { opacity: 0; transform: scale(2.4) rotate(12deg); } }
@keyframes fade-in { from { opacity: 0; } }

/* the 10-pull fan: sorted by rarity, the best in the middle */
.pull-fan { position: relative; height: 230px; margin: 1rem auto .4rem; max-width: 720px; overflow: hidden; }
.fan-card { position: absolute; left: 50%; bottom: -30px; width: 96px; aspect-ratio: 7 / 10; margin-left: -48px; border-radius: 10px; overflow: hidden;
  border: 3px solid var(--ink); background: var(--night-3); transform-origin: 50% 240%; rotate: var(--a); animation: fan-deal .45s cubic-bezier(.2, .9, .3, 1) both;
  box-shadow: 0 8px 18px rgb(0 0 0 / .5); }
.fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan-card small { position: absolute; left: 4px; top: 4px; padding: 0 .35rem; border-radius: 4px; background: rgb(255 255 255 / .9); color: var(--ink); font-weight: 900; font-size: .7rem; }
.fan-card.r-SSR { border-color: #D8B8FF; } .fan-card.r-UR { border-color: var(--magenta); }
.fan-card.r-LR { border-color: var(--gold); }
.fan-card.top { width: 118px; margin-left: -59px; bottom: -14px; box-shadow: 0 0 0 3px var(--gold), 0 0 30px var(--gold); }
@keyframes fan-deal { from { opacity: 0; transform: translateY(180px); } }
@media (max-width: 640px) { .pull-fan { height: 180px; } .fan-card { width: 70px; margin-left: -35px; } .fan-card.top { width: 88px; margin-left: -44px; } }

/* shiny: a burst of sparkles and SHINY */
.sparkle-burst { position: absolute; left: 50%; top: 45%; z-index: 30; width: 0; height: 0; pointer-events: none; }
.sparkle-burst i { position: absolute; width: 14px; height: 14px; margin: -7px; background: #fff;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #FFD6F5);
  animation: spark-burst .95s ease-out both; }
.sparkle-word { position: absolute; left: 50%; top: -90px; translate: -50% 0; white-space: nowrap; font: 400 1.9rem/1 var(--display); color: #fff;
  -webkit-text-stroke: 6px var(--magenta); paint-order: stroke fill; animation: rank-in .45s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes spark-burst { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(120deg); } }

/* holo tilt (pointer devices): a glare on every card, a sheen on SSR, a sliding rainbow foil on UR and LR */
.card.tilting { transform: perspective(700px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) scale(1.03); transition: transform .08s linear; z-index: 4; }
.card-glare { position: absolute; inset: 0; z-index: 7; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .45), transparent 45%); mix-blend-mode: overlay; }
.card.tilting .card-glare { opacity: 1; }
.card.epic.tilting .card-glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .5), transparent 45%),
  linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .3) 50%, transparent 65%) var(--gx, 50%) 0 / 250% 100%; }
.card:is(.legend, .mythic).tilting .card-glare { mix-blend-mode: color-dodge;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .35), transparent 40%),
  linear-gradient(115deg, transparent 20%, rgb(255 0 170 / .4) 35%, rgb(0 220 255 / .4) 45%, rgb(255 230 0 / .4) 55%, transparent 70%) var(--gx, 50%) 0 / 250% 100%; }

/* the menacing aura at rest: UR and LR cards in the team, on the home stage and in profile showcases */
:is(.team-grid, .ts-stage, .pull-grid) .card:is(.legend, .mythic)::before { opacity: .95; transform: none; animation: menace-drift 3.4s ease-in-out infinite; will-change: transform; }
@keyframes menace-drift { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(3px, -7px) rotate(3deg) scale(1.06); } }

/* pressed buttons and loading shapes */
:is(.btn, button).htmx-request, form.htmx-request :is(.btn, button[type="submit"], button:not([type])), .btn.is-busy {
  position: relative; transform: translateY(3px); box-shadow: none; pointer-events: none; color: transparent !important; }
:is(.btn, button).htmx-request::after, form.htmx-request :is(.btn, button[type="submit"], button:not([type]))::after, .btn.is-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%;
  border: 3px solid rgb(255 255 255 / .35); border-top-color: currentColor; color: var(--paper); animation: spin .7s linear infinite; }
.btn.gold:is(.htmx-request, .is-busy)::after, form.htmx-request .btn.gold::after { border-color: rgb(28 15 46 / .3); border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading { position: relative; }
.is-loading::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent 25%, rgb(255 255 255 / .07) 40%, transparent 55%) 0 0 / 300% 100%;
  animation: is-loading-in .2s ease .25s forwards, shimmer 1.1s ease .25s infinite; }
@keyframes is-loading-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hp-ghost, .fighter.hitstop .fighter-portrait, .rush-count, .cut-in, .cut-in *, .pt-group, .sk, .streak-stamp, .streak-ink, .promo-moment, .promo-moment *,
  .fan-card, .sparkle-burst *, .card-glare, .is-loading::after, :is(.team-grid, .ts-stage, .pull-grid) .card:is(.legend, .mythic)::before { animation: none !important; }
  .card.tilting { transform: none; }
  .promo-badge.old { display: none; }
}

/* ===================================================================================
   INSPECT (2026-10): a stand card full screen, turned by a drag or the phone's tilt. Its back changes with the
   rarity; the back only shows here (pulls keep the one neutral back, for the suspense). Also the profile's
   read-only build view, which reuses the stand panel.
   =================================================================================== */
.inspect { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  display: flex; flex-direction: column; overflow: clip; color: #fff; background: radial-gradient(ellipse at 50% 45%, #3A1F66, #0E0719 75%); }
.inspect:not([open]) { display: none; }
.inspect[open] { animation: fade-in .25s ease both; }
.inspect::backdrop { background: #0E0719; }
.inspect-lines { position: absolute; inset: -30%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgb(255 243 220 / .06) 0 1.2deg, transparent 1.2deg 7deg); }
.inspect-top { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; padding: max(.8rem, env(safe-area-inset-top)) 1rem 0; }
.inspect-top b { flex: 1; min-width: 0; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 400 1.1rem/1.2 var(--display); }
.inspect-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.inspect-motion { flex: none; min-height: 44px; padding: 0 .9rem; border: 2px solid rgb(255 255 255 / .3); border-radius: 99px; background: transparent; color: #fff;
  font: 700 .85rem var(--body); cursor: pointer; }
.inspect-motion[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .inspect-motion { visibility: hidden; } }
.inspect-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; perspective: 1100px; touch-action: none;
  cursor: grab; user-select: none; -webkit-user-select: none; }
.inspect-stage:active { cursor: grabbing; }
.inspect-float { animation: inspect-float 4.5s ease-in-out infinite; }
@keyframes inspect-float { 50% { transform: translateY(-8px); } }
/* one flat piece turns; the script shows the face toward the viewer (nested 3D faces break in Firefox) */
.inspect-card { position: relative; width: min(300px, 74vw, 44dvh); will-change: transform; }
.inspect-card.settle { transition: transform .55s cubic-bezier(.2, 1.4, .4, 1); }
.inspect-face { border-radius: var(--radius-card); }
.inspect-front { position: relative; }
.inspect-card.show-back .inspect-front, .inspect-card:not(.show-back) .card-back { visibility: hidden; }
.inspect-front .card { width: 100%; max-width: none; margin: 0; pointer-events: none; box-shadow: 0 18px 40px rgb(0 0 0 / .55); }
.inspect-glare, .inspect-foil { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; }
.inspect-glare { background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .45), transparent 45%); mix-blend-mode: overlay; }
.inspect-foil { opacity: 0; }
.inspect-card.rk-SSR .inspect-foil { opacity: var(--fo); mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .4) 50%, transparent 65%) var(--gx, 50%) 0 / 250% 100%; }
.inspect-card:is(.rk-UR, .rk-LR) .inspect-foil { opacity: var(--fo); mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 20%, rgb(255 0 170 / .4) 35%, rgb(0 220 255 / .4) 45%, rgb(255 230 0 / .4) 55%, transparent 70%) var(--gx, 50%) 0 / 250% 100%; }
.inspect-bottom { position: relative; z-index: 1; display: grid; justify-items: center; gap: .7rem; padding: 0 1rem max(1.2rem, env(safe-area-inset-bottom)); }
.inspect-hint { margin: 0; min-height: 1.3em; color: var(--muted); font-size: .9rem; text-align: center; }
.inspect-btns { display: flex; gap: .6rem; }

/* the backs: the Stand Arrow on every one, louder as the rarity climbs */
.card-back { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; transform: scaleX(-1);
  border: 6px solid var(--bc); background: var(--bbg); box-shadow: 0 18px 40px rgb(0 0 0 / .55); }
.cb-pat { position: absolute; inset: 0; background: var(--bpat); }
.cb-halo { position: absolute; left: 50%; top: 44%; width: 76%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--bhalo, none); }
.cb-inner { position: absolute; inset: 10px; border: 2px solid var(--bline); border-radius: 10px; }
.cb-arrow { position: relative; width: 34%; margin-top: -14%; color: var(--bem); filter: var(--bglow, none); }
.cb-logo { position: absolute; left: 0; right: 0; bottom: 19%; text-align: center; font: 400 clamp(.75rem, 4.5vw, 1rem) var(--display); letter-spacing: .14em; color: var(--bem); }
.cb-tier { position: absolute; left: 50%; bottom: 8%; translate: -50% 0; white-space: nowrap; padding: .2rem .7rem; border-radius: 99px; background: var(--bc);
  color: var(--ink); font: 900 .68rem var(--body); letter-spacing: .18em; }
.cb-go { display: none; position: absolute; font: 400 1.8rem/1 var(--display); color: #C23BFF; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  animation: cb-drift 3.2s ease-in-out infinite; }
.cb-go.g1 { left: 9%; top: 10%; } .cb-go.g2 { right: 10%; top: 22%; animation-delay: -.8s; }
.cb-go.g3 { left: 12%; bottom: 30%; animation-delay: -1.6s; } .cb-go.g4 { right: 12%; bottom: 36%; animation-delay: -2.4s; }
@keyframes cb-drift { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(4px, -9px) rotate(5deg); } }
.cb-foil { position: absolute; inset: 0; display: none; pointer-events: none; }
.cb-glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / .35), transparent 45%); mix-blend-mode: overlay; }
.cb-R { --bc: #B3A3CF; --bbg: #2B1747; --bpat: radial-gradient(rgb(255 255 255 / .13) 1px, transparent 1.6px) 0 0 / 7px 7px; --bline: rgb(179 163 207 / .4); --bem: #B3A3CF; }
.cb-SR { --bc: #9B6BE0; --bbg: linear-gradient(160deg, #4A2A7A, #2B1747); --bpat: repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 2px, transparent 2px 9px);
  --bline: rgb(198 179 240 / .55); --bem: #C6B3F0; }
.cb-SSR { --bc: var(--gold); --bbg: radial-gradient(circle at 50% 42%, #5A2E8A, #2B1747 70%);
  --bpat: repeating-conic-gradient(from 0deg at 50% 42%, rgb(244 197 66 / .22) 0 4deg, transparent 4deg 14deg); --bline: rgb(244 197 66 / .65); --bem: var(--gold);
  --bhalo: radial-gradient(circle, rgb(244 197 66 / .38), transparent 68%); }
.cb-UR { --bc: var(--magenta); --bbg: radial-gradient(circle at 50% 42%, #7A1748, #1C0F2E 75%);
  --bpat: repeating-radial-gradient(circle at 50% 42%, rgb(214 36 110 / .28) 0 2px, transparent 2px 13px); --bline: var(--gold); --bem: #fff;
  --bglow: drop-shadow(0 0 8px #D6246E) drop-shadow(0 0 20px #D6246E); }
.cb-UR .cb-go, .cb-LR .cb-go { display: block; }
.cb-LR { --bc: var(--gold); --bbg: radial-gradient(circle at 50% 42%, #2A1C55, #0E0719 72%);
  --bpat: repeating-conic-gradient(from 0deg at 50% 42%, rgb(255 255 255 / .07) 0 2deg, transparent 2deg 9deg); --bline: transparent; --bem: var(--gold);
  --bglow: drop-shadow(0 0 10px rgb(244 197 66 / .8)); --bhalo: conic-gradient(from 0deg, #F4C542, #D6246E, #2BB3A8, #7A3FB8, #F4C542);
  border-color: transparent; background: var(--bbg) padding-box, linear-gradient(135deg, #F4C542, #D6246E, #2BB3A8, #F4C542) border-box; }
.cb-LR .cb-halo { width: 58%; -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 67%, transparent 68%);
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 67%, transparent 68%); animation: cb-spin 8s linear infinite; }
.cb-LR .cb-go { color: var(--gold); font-size: 1.5rem; }
.cb-LR .cb-foil { display: block; opacity: .5; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 20%, rgb(255 0 170 / .35) 35%, rgb(0 220 255 / .35) 45%, rgb(255 230 0 / .35) 55%, transparent 70%) var(--gx, 50%) 0 / 250% 100%; }
.cb-LR .cb-tier { background: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal)); }
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* the profile's build view: the stand panel without its buttons, three tabs */
.panel-stats td.gain { color: #5FD3A4; font-weight: 700; }
.build-foot { margin-top: 1.2rem; }
.build-page .panel-grid { margin-top: 1rem; }
@media (max-width: 640px) {
  .ptabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptabs.three .ptabs-line { width: calc((100% - 2rem) / 3); }
  .panel-body[data-tab="chips"] .ptabs.three .ptabs-line { transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce) {
  .inspect[open], .inspect-float, .cb-go, .cb-LR .cb-halo { animation: none; }
  .inspect-card.settle { transition-duration: .01s; }
}

/* ---------- contact us and bug reports (main.contact) ---------- */
.contact-head { max-width: 760px; margin-bottom: 1.2rem; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 1.2rem; align-items: start; }
.contact-form { display: grid; gap: .55rem; }
.contact-form > label, .contact-row label { font-weight: 700; }
.contact-form textarea, .contact-form input:not([type="radio"]) { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .55rem .7rem; }
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form .btn { justify-self: start; }
.contact-kinds { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .5rem; padding: 0; border: 0; }
.contact-kinds legend { margin-bottom: .45rem; padding: 0; font-weight: 700; }
.contact-kind { position: relative; cursor: pointer; }
.contact-kind input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.contact-kind > span { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .9rem; border-radius: 99px;
  border: 2px solid var(--night-3); background: var(--night-2); font-weight: 700; }
.contact-kind input:checked + span { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.contact-kind input:focus-visible + span { outline: 3px solid var(--paper); outline-offset: 2px; }
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.contact-row > div { display: grid; gap: .35rem; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-tips ol { margin: .4rem 0 .8rem; padding-left: 1.2rem; display: grid; gap: .3rem; }
.contact-sent { text-align: center; display: grid; justify-items: center; gap: .4rem; }
.contact-sent-mark { margin: 0; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--teal); color: var(--ink);
  font: 400 1.8rem/1 var(--display); }
.contact-text { white-space: pre-wrap; }
@media (max-width: 760px) {
  .contact-layout, .contact-row { grid-template-columns: 1fr; }
}
.raid-bonus { color: var(--gold); font-weight: 700; }
/* Home: a round button in the phone top bar (the dock holds the other pages); bigger screens have it in the menus */
.home-btn { display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--paper); text-decoration: none; }
.home-btn:hover, .home-btn[aria-current] { background: var(--night-3); }
.home-btn[aria-current] { color: var(--gold); }
@media (max-width: 1023px) { .home-btn { display: grid; } }

/* ===================================================================================
   THE FIGHT'S FINALE (2026-10): the frame freezes in sepia under "To Be Continued", then a win cuts to its MVP's
   pose (app.js finale), then the 勝利!/敗北… slam. Hidden while the turn replays and once it's done.
   =================================================================================== */
.tbc-freeze, .victory-pose { display: none; }
.fight.tbc .arena > :not(.tbc-freeze) { filter: sepia(.9) contrast(1.15) brightness(.82) saturate(.8); transition: filter .2s; }
.fight.tbc .tbc-freeze { position: absolute; inset: 0; z-index: 9; display: block; pointer-events: none;
  background: repeating-radial-gradient(circle at 30% 40%, rgb(60 40 10 / .35) 0 1px, transparent 1px 3px); }
.tbc-freeze .tbc-arrow { display: none; }
.tbc-arrow.live { position: fixed; z-index: 95; left: max(4vw, 1rem); bottom: calc(10vh + env(safe-area-inset-bottom)); display: flex; align-items: center; height: clamp(44px, 9vw, 64px);
  padding: 0 clamp(18px, 4vw, 34px) 0 clamp(46px, 9vw, 70px); background: #C9B27A; color: #2A2416; border: 4px solid #2A2416;
  clip-path: polygon(0 50%, clamp(30px, 6vw, 46px) 0, 100% 0, 100% 100%, clamp(30px, 6vw, 46px) 100%);
  font: italic 900 clamp(1.1rem, 4vw, 1.9rem)/1 var(--body); letter-spacing: .02em; animation: tbc-in .55s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes tbc-in { from { transform: translateX(-130%); } }
.fight.tbc .fight-slam, .fight.posing .fight-slam { display: none; }
.victory-pose.live { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 2.5rem);
  flex-wrap: wrap; padding: 1rem; overflow: hidden; border: 0; cursor: pointer; color: var(--paper); font: inherit; background: rgb(10 5 20 / .78);
  animation: fade-in .3s ease both; }
.pose-rays { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgb(244 197 66 / .22) 0 6deg, transparent 6deg 18deg); animation: pose-spin 18s linear infinite; }
@keyframes pose-spin { to { rotate: 360deg; } }
.pose-card { position: relative; width: clamp(150px, 30vw, 240px); aspect-ratio: 7 / 10; border-radius: 16px; overflow: hidden; background: #fff;
  border: 6px solid var(--gold); box-shadow: 0 0 0 4px var(--ink), 0 0 60px rgb(244 197 66 / .7); rotate: -4deg;
  animation: pose-rise .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.pose-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.pose-card b { position: absolute; left: 8px; top: 8px; padding: .1rem .55rem; border-radius: 7px; background: var(--gold); color: var(--ink); font: 900 .8rem var(--body); letter-spacing: .1em; }
@keyframes pose-rise { from { opacity: 0; transform: translateY(70px) scale(.9); } }
.pose-go { position: absolute; font: 400 clamp(1.6rem, 5vw, 2.5rem)/1 var(--display); color: #C23BFF; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  animation: menace-drift 2.6s ease-in-out infinite; pointer-events: none; }
.pose-go.g1 { left: 18%; top: 16%; } .pose-go.g2 { left: 46%; top: 10%; animation-delay: -.9s; } .pose-go.g3 { left: 22%; bottom: 14%; animation-delay: -1.7s; }
.pose-text { position: relative; display: grid; gap: .35rem; text-align: left; animation: pose-rise .6s .12s cubic-bezier(.2, 1.3, .4, 1) both; }
.pose-text strong { font: 400 clamp(2.4rem, 9vw, 4.4rem)/1 var(--display); color: var(--gold); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; }
.pose-text span { font-weight: 700; font-size: 1.05rem; }
.pose-text small { color: var(--gold); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .tbc-arrow, .pose-rays, .pose-card, .pose-go, .pose-text { animation: none; } }

/* ===================================================================================
   TERRAIN SCENERY (2026-10): the field drawn behind the fight, CSS only (partials/fight.html .scenery). It shows
   over the mode's own ground only while a real terrain holds, under a veil that keeps the fighters readable.
   Players can keep it still or switch it off (the display menu: html.scenery-still / .scenery-off).
   =================================================================================== */
.scenery { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .8s ease; border-radius: inherit; }
.arena.has-terrain .scenery { opacity: 1; }
.scenery > i { position: absolute; display: block; }
.sc-sky, .sc-fx, .sc-veil { inset: 0; }
.sc-far { left: -5%; right: -5%; bottom: 30%; height: 40%; }
.sc-near { left: -5%; right: -5%; bottom: 0; height: 36%; }
.sc-veil { background: linear-gradient(180deg, rgb(12 6 22 / .5), rgb(12 6 22 / .66)); }
html.scenery-off .scenery { display: none; }
html.scenery-still .scenery > i { animation: none !important; }
/* ocean: open sea, a moving swell, the sun's glint */
.terrain-ocean .sc-sky { background: linear-gradient(180deg, #5BA8E0, #B9E2F5 60%); }
.terrain-ocean .sc-far { bottom: 34%; height: 10%; background: linear-gradient(180deg, #2C7DB8, #1E5F94); }
.terrain-ocean .sc-near { height: 42%; background: repeating-linear-gradient(170deg, rgb(255 255 255 / .18) 0 6px, transparent 6px 40px), linear-gradient(180deg, #1E5F94, #0D2F55);
  background-size: 220px 100%, 100% 100%; animation: sc-swell 6s linear infinite; }
.terrain-ocean .sc-fx { background: radial-gradient(circle at 78% 18%, rgb(255 255 240 / .9) 0 30px, transparent 32px); }
@keyframes sc-swell { to { background-position: 220px 0, 0 0; } }
/* desert: a white sun, dunes, heat haze */
.terrain-desert .sc-sky { background: linear-gradient(180deg, #F2A541, #F9D88A 70%); }
.terrain-desert .sc-far { background: radial-gradient(70% 100% at 30% 100%, #D9894A 60%, transparent 61%), radial-gradient(60% 90% at 80% 100%, #C77538 60%, transparent 61%); }
.terrain-desert .sc-near { background: radial-gradient(120% 100% at 50% 100%, #B8652D 60%, transparent 61%), linear-gradient(180deg, transparent 40%, #9A5222); }
.terrain-desert .sc-fx { background: radial-gradient(circle at 70% 22%, #FFF6D8 0 46px, rgb(255 240 200 / .4) 47px 70px, transparent 71px); animation: sc-haze 3s ease-in-out infinite; }
@keyframes sc-haze { 50% { transform: translateY(-3px) scaleY(1.01); } }
/* frozen wastes: ice peaks and snowfall */
.terrain-frozen .sc-sky { background: linear-gradient(180deg, #9FB6D9, #E4EEF8 70%); }
.terrain-frozen .sc-far { height: 50%; background: linear-gradient(180deg, #F2F7FD, #B9CBE4);
  clip-path: polygon(0 100%, 10% 40%, 22% 70%, 36% 15%, 50% 65%, 63% 25%, 78% 60%, 90% 30%, 100% 55%, 100% 100%); }
.terrain-frozen .sc-near { background: linear-gradient(180deg, #DCE7F5, #A9BFDD); }
.terrain-frozen .sc-fx { background: radial-gradient(circle, #fff 0 2px, transparent 3px) 0 0 / 46px 46px, radial-gradient(circle, rgb(255 255 255 / .8) 0 1.5px, transparent 2.5px) 20px 10px / 31px 31px;
  animation: sc-snow 7s linear infinite; }
@keyframes sc-snow { to { background-position: 20px 460px, -10px 320px; } }
/* mirror world: glass panels and a sweeping sheen */
.terrain-mirror .sc-sky { background: linear-gradient(180deg, #1E3A4F, #2E6B78); }
.terrain-mirror .sc-far { inset: 0; height: auto; background: repeating-linear-gradient(90deg, rgb(180 240 255 / .16) 0 2px, transparent 2px 120px),
  repeating-linear-gradient(0deg, rgb(180 240 255 / .1) 0 2px, transparent 2px 140px); }
.terrain-mirror .sc-near { height: 44%; background: linear-gradient(180deg, rgb(150 230 240 / .25), rgb(10 40 55 / .85)); border-top: 2px solid rgb(190 250 255 / .6); }
.terrain-mirror .sc-fx { background: linear-gradient(110deg, transparent 40%, rgb(220 255 255 / .35) 50%, transparent 60%) 0 0 / 300% 100%; animation: sc-sheen 5s ease-in-out infinite; }
@keyframes sc-sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }
/* nature: a canopy, light shafts, drifting leaves */
.terrain-nature .sc-sky { background: linear-gradient(180deg, #8CC77A, #DDF0B8 70%); }
.terrain-nature .sc-far { height: 62%; bottom: 20%; background: radial-gradient(18% 40% at 10% 60%, #3F7D3A 60%, transparent 61%), radial-gradient(22% 46% at 34% 55%, #356F33 60%, transparent 61%),
  radial-gradient(20% 44% at 62% 58%, #3F7D3A 60%, transparent 61%), radial-gradient(24% 50% at 88% 52%, #2F6430 60%, transparent 61%); }
.terrain-nature .sc-near { background: linear-gradient(180deg, #4E8F3E, #2D5A26); }
.terrain-nature .sc-fx { background: radial-gradient(ellipse 6px 3px, #6FB04E 98%, transparent) 0 0 / 90px 90px, linear-gradient(115deg, transparent 30%, rgb(255 255 220 / .25) 40%, transparent 50%);
  animation: sc-leaves 9s linear infinite; }
@keyframes sc-leaves { to { background-position: 180px 360px, 0 0; } }
/* gravity field: rings pulling inward, floating debris */
.terrain-gravity .sc-sky { background: radial-gradient(circle at 50% 55%, #4B2A8C, #120A22 70%); }
.terrain-gravity .sc-far { inset: 0; height: auto; background: repeating-radial-gradient(circle at 50% 55%, rgb(194 140 255 / .22) 0 2px, transparent 2px 46px); animation: sc-pull 4s linear infinite; }
.terrain-gravity .sc-near { height: 20%; background: linear-gradient(180deg, transparent, #120A22); }
.terrain-gravity .sc-fx { background: radial-gradient(circle, rgb(230 210 255 / .7) 0 3px, transparent 4px) 0 0 / 140px 120px; animation: sc-debris 6s ease-in-out infinite; }
@keyframes sc-pull { from { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes sc-debris { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .scenery > i { animation: none !important; } }

/* raid phases (gangs.PHASES): the villain's current phase, its ticks on the meter, the four phases */
.raid-phase { display: grid; gap: .3rem; margin: .4rem 0 .2rem; padding: .7rem .9rem; border-radius: var(--radius-ui); background: rgb(214 36 110 / .12);
  border: 2px solid rgb(214 36 110 / .55); }
.raid-phase p { margin: 0; }
.raid-phase .phase-tag { justify-self: start; padding: .15rem .65rem; border-radius: 99px; background: var(--magenta); color: #fff; font: 900 .78rem var(--body); letter-spacing: .08em; text-transform: uppercase; }
.raid-phase.phase-4 { border-color: var(--gold); background: rgb(244 197 66 / .12); }
.raid-phase.phase-4 .phase-tag { background: var(--gold); color: var(--ink); }
.raid-next { color: var(--muted); font-size: var(--step--1); }
.raid-next strong { color: var(--gold); }
.phase-tick { position: absolute; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--night-3); border: 2px solid var(--magenta); color: var(--paper); font: 900 .7rem var(--body); z-index: 1; }
.phase-tick.reached { background: var(--magenta); }
.raid-phases { margin: .2rem 0 .6rem; }
.raid-phases summary { cursor: pointer; font-weight: 700; color: var(--gold); min-height: 44px; display: flex; align-items: center; }
.raid-phases ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.raid-phases li { display: grid; gap: .2rem; padding: .6rem .7rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); font-size: var(--step--1); }
.raid-phases li.now { border-color: var(--gold); }
.raid-phases li.done { opacity: .65; }
.raid-phases li.locked { border-style: dashed; }
.raid-phases li small { color: var(--gold); font-weight: 900; letter-spacing: .05em; }
.raid-phases li span { color: var(--muted); }

/* ranked predictions (partials/predict.html): beside the live duel for spectators */
.watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.predict-panel { position: sticky; top: 70px; }
.predict { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.predict-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.predict-head .h3 { margin: 0; }
.predict-head small { color: var(--gold); font-weight: 700; }
.predict-pool { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--night-3); }
.predict-pool i:first-child { background: var(--gold); } .predict-pool i:last-child { background: var(--magenta); }
.predict-total { margin: 0; color: var(--muted); font-size: var(--step--1); }
.predict-form, .predict-sides, .predict-stakes { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }
.predict-stakes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.predict-stakes legend { grid-column: 1 / -1; margin-bottom: .2rem; font-weight: 700; }
.predict-side, .predict-stake { position: relative; cursor: pointer; }
.predict-side input, .predict-stake input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.predict-side span { display: grid; gap: .1rem; min-height: 44px; padding: .5rem .7rem; border-radius: var(--radius-ui); border: 2px solid var(--night-3); background: var(--night); }
.predict-side small { color: var(--muted); }
.predict-stake span { display: grid; place-items: center; min-height: 44px; border-radius: 99px; border: 2px solid var(--night-3); background: var(--night); font-weight: 700; }
.predict-side input:checked + span, .predict-stake input:checked + span { border-color: var(--gold); color: var(--gold); }
.predict-side input:focus-visible + span, .predict-stake input:focus-visible + span { outline: 3px solid var(--paper); outline-offset: 2px; }
.predict-stake input:disabled + span { opacity: .4; }
.predict-result, .predict-mine, .predict-paid { margin: 0; }
.predict-paid { font: 400 1.2rem var(--display); }
.predict-paid.win { color: #5FD3A4; } .predict-paid.lose { color: var(--magenta); }
@media (max-width: 900px) { .watch-layout { grid-template-columns: 1fr; } .predict-panel { position: static; } }

/* ===================================================================================
   D'ARBY'S DEN (app/game/den.py): a casino back room. Dark wood, green felt, gold trim, poker chips, playing cards.
   =================================================================================== */
.den { --den-wood: #3B2314; --den-wood-2: #5A3620; --den-felt: #1F5A3C; --den-felt-2: #0C2A1C; --den-gold: #E8C26A; }
.den-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.2rem; align-items: center; padding: 1.2rem 1.4rem; margin-bottom: 1rem;
  border-radius: 14px; border: 3px solid var(--den-gold); color: #F4E9D2;
  background: repeating-linear-gradient(90deg, rgb(0 0 0 / .12) 0 2px, transparent 2px 46px), linear-gradient(160deg, var(--den-wood-2), var(--den-wood));
  box-shadow: inset 0 0 40px rgb(0 0 0 / .45), 0 10px 26px rgb(0 0 0 / .35); }
.den-darby { width: 92px; height: 128px; display: grid; place-items: center; border-radius: 10px; background: #FBF6EA; border: 3px solid var(--den-gold);
  transform: rotate(-6deg); box-shadow: 6px 6px 0 rgb(0 0 0 / .35); }
.den-card-face { display: grid; place-items: center; gap: .1rem; }
.den-card-face b { font: 400 2.6rem/1 var(--display); color: #1C0F2E; }
.den-card-face i { font-style: normal; font-size: 1.5rem; color: #1C0F2E; }
.den-kicker { margin: 0; color: var(--den-gold); font-weight: 900; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.den-title { margin: .1rem 0 .5rem; font: 400 clamp(1.7rem, 5vw, 2.6rem)/1 var(--display); color: #FBF6EA; text-shadow: 3px 3px 0 #000; }
.den-speech { position: relative; max-width: 560px; margin: 0; padding: .7rem .9rem; border-radius: 16px; background: #FBF6EA; color: #2A1A10; font-weight: 700; }
.den-speech::before { content: ""; position: absolute; left: -12px; top: 18px; border: 7px solid transparent; border-right-color: #FBF6EA; border-top-color: #FBF6EA; }
.den-speech small { display: block; margin-top: .2rem; color: #9A5B1E; font-weight: 900; }
.den-today { display: grid; gap: .4rem; margin: 0; }
.den-today div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .7rem; border-radius: 8px; background: rgb(0 0 0 / .3); }
.den-today dt { color: #D9C6A4; font-size: .78rem; }
.den-today dd { margin: 0; font: 400 1.05rem var(--display); color: var(--den-gold); }
.den-today small { color: #B8A27E; font-family: var(--body); font-size: .75rem; }

/* the games: playing cards */
.den-deck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.den-play { position: relative; display: grid; gap: .2rem; padding: .8rem 1rem .8rem 3.2rem; border-radius: 10px; background: #FBF6EA; color: #2A1A10;
  border: 2px solid #CBB78F; opacity: .55; box-shadow: 0 4px 0 #A8926A; }
.den-play { cursor: pointer; }
.den-play:has(input:disabled) { cursor: not-allowed; }
.den-play:has(input:focus-visible) { outline: 3px solid var(--den-gold); outline-offset: 2px; }
.den-play:has(input:checked) { opacity: 1; border-color: var(--den-gold); box-shadow: 0 4px 0 #9A5B1E, 0 0 0 3px rgb(232 194 106 / .35); transform: translateY(-3px); }
.den-deck { border: 0; min-width: 0; }
.den-play.on { opacity: 1; border-color: var(--den-gold); box-shadow: 0 4px 0 #9A5B1E, 0 0 0 3px rgb(232 194 106 / .35); transform: translateY(-3px); }
.den-suit { position: absolute; left: .9rem; top: .7rem; font-size: 1.6rem; color: #B3123F; }
.den-play:nth-child(2) .den-suit { color: #1C0F2E; }
.den-play b { font: 400 1rem var(--display); }
.den-play small { color: #6A5536; }

/* the room: the felt table and the side rail */
.den-room { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.den-felt { padding: 1rem; border-radius: 26px; border: 12px solid var(--den-wood); outline: 3px solid var(--den-gold); outline-offset: -14px;
  background: radial-gradient(ellipse at 50% 40%, var(--den-felt), var(--den-felt-2) 78%); box-shadow: inset 0 0 70px rgb(0 0 0 / .65), 0 14px 30px rgb(0 0 0 / .4); }
.den-table { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; min-height: 440px; text-align: center; color: #E2F4E8; }
.den-versus { display: flex; align-items: center; gap: .8rem; font-weight: 700; }
.den-who { display: flex; align-items: center; gap: .4rem; padding: .25rem .7rem .25rem .25rem; border-radius: 99px; background: rgb(0 0 0 / .45); border: 2px solid transparent; }
.den-who.turn { border-color: var(--den-gold); box-shadow: 0 0 14px rgb(232 194 106 / .45); }
.den-who i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--violet); color: #fff; font: 400 .9rem var(--display); font-style: normal; }
.den-who i.opp { background: #9A1B3F; }
.den-vs { color: var(--den-gold); font-family: var(--display); }
.den .glass { position: relative; width: 190px; height: 236px; border: 5px solid rgb(220 240 255 / .8); border-top: none; border-radius: 0 0 32px 32px;
  background: linear-gradient(90deg, rgb(255 255 255 / .16), transparent 30%, transparent 70%, rgb(255 255 255 / .22)); box-shadow: 0 20px 26px -10px rgb(0 0 0 / .6); }
.den .glass::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 230px; height: 26px; margin-left: -115px; border-radius: 50%; background: radial-gradient(ellipse, rgb(0 0 0 / .45), transparent 70%); }
.den .water { position: absolute; left: 0; right: 0; bottom: 0; height: calc(96% + var(--dome, 0px)); border-radius: 0 0 26px 26px;
  background: linear-gradient(180deg, rgb(214 150 64 / .88), rgb(140 80 26 / .96)); transition: height .35s; }
.den .water::before { content: ""; position: absolute; left: -2px; right: -2px; top: -14px; height: 28px; border-radius: 50%; background: rgb(232 172 88 / .92); }
.den .coin { position: absolute; left: 50%; width: 46px; height: 12px; margin-left: -23px; border-radius: 50%; background: radial-gradient(ellipse at 40% 30%, #FFE7A0, #C8931B); border: 2px solid #7A5410; }
.den .coin.new { animation: den-drop .5s cubic-bezier(.4, 0, .8, 1) both; }
@keyframes den-drop { from { transform: translateY(-220px); } }
.den .spill { position: absolute; left: -70px; right: -70px; bottom: -14px; height: 64px; border-radius: 50%; background: radial-gradient(ellipse, rgb(214 150 64 / .85), transparent 70%); animation: den-spill .6s ease-out both; }
@keyframes den-spill { from { transform: scale(.3); opacity: 0; } }
.den-risk { display: grid; gap: .3rem; width: min(320px, 100%); font-size: var(--step--1); }
.den-risk .bar, .den-limit .bar { height: 10px; border-radius: 99px; background: rgb(0 0 0 / .4); overflow: hidden; }
.den-risk .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5FD3A4, var(--den-gold), #D6246E); transition: width .35s; }
.den-last { margin: 0; font-size: var(--step--1); color: #CDEBD8; }
.den-btns { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.den-wait { margin: 0; color: var(--den-gold); font-weight: 700; }
.den-result { margin: 0; font: 400 2rem var(--display); -webkit-text-stroke: 6px #0C2A1C; paint-order: stroke fill; }
.den-prize { margin: 0; padding: .35rem .8rem; border-radius: 99px; background: rgb(0 0 0 / .4); color: var(--den-gold); font-weight: 800; }
.den-result.win { color: #7BF0B8; } .den-result.lose { color: #FF6E9C; }
.den-quote { position: relative; margin: .3rem 0 0; max-width: 420px; padding: .6rem .9rem; border-radius: 14px; background: #FBF6EA; color: #2A1A10; font: 700 .95rem/1.35 var(--body); }
.den-quote::before { content: ""; position: absolute; left: 50%; top: -12px; margin-left: -7px; border: 7px solid transparent; border-bottom-color: #FBF6EA; }
.den-msg { display: grid; gap: .5rem; justify-items: center; max-width: 380px; }
.den-msg b { font: 400 1.3rem var(--display); color: var(--den-gold); }
.den-msg p { margin: 0; }

.den-side { display: grid; gap: .8rem; align-content: start; }
.den-card { display: grid; gap: .55rem; padding: 1rem; border-radius: 14px; border: 2px solid var(--den-gold); color: #F4E9D2;
  background: linear-gradient(160deg, var(--den-wood-2), var(--den-wood)); box-shadow: inset 0 0 30px rgb(0 0 0 / .4); }
.den-card select { min-height: 44px; font: inherit; border-radius: 8px; padding: .3rem .5rem; color: #2A1A10; background: #FBF6EA; border: 2px solid var(--den-gold); }
.den-card .btn { justify-self: start; }
.den-card .muted { color: #CBB78F; }
.den-label { margin: 0; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--den-gold); }
.den-rule { width: 100%; border: 0; border-top: 1px dashed rgb(232 194 106 / .45); margin: .2rem 0; }
.den-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; border: 0; }
.den-chip { position: relative; cursor: pointer; }
.den-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.den-chip span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fff; font: 900 .78rem var(--body);
  background: radial-gradient(circle, var(--chip) 62%, transparent 63%), repeating-conic-gradient(var(--chip) 0 20deg, #fff 20deg 40deg);
  border: 2px solid rgb(0 0 0 / .4); box-shadow: 0 3px 0 rgb(0 0 0 / .45); transition: transform .12s; }
.den-chip.c1 { --chip: #3D6FD8; } .den-chip.c2 { --chip: #2E8B57; } .den-chip.c3 { --chip: #B3123F; } .den-chip.c4 { --chip: #1C0F2E; } .den-chip.c5 { --chip: #B8860B; }
.den-chip input:checked + span { transform: translateY(-5px); box-shadow: 0 0 0 3px var(--den-gold), 0 8px 10px rgb(0 0 0 / .45); }
.den-chip input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.den-chip input:disabled + span { opacity: .3; cursor: not-allowed; }
.den-blocked b { font: 400 1.1rem var(--display); color: var(--den-gold); }
.den-blocked p { margin: 0; }
.den-limit { display: grid; gap: .25rem; font-size: var(--step--1); }
.den-limit .bar i { display: block; height: 100%; background: var(--den-gold); }
.den-limit.hit .bar i { background: #D6246E; }
.den-rules { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-size: .8rem; color: #D9C6A4; }
@media (max-width: 900px) { .den-room { grid-template-columns: 1fr; } .den-hero { grid-template-columns: auto 1fr; } .den-today { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .den-deck { grid-template-columns: 1fr; } .den-darby { width: 64px; height: 90px; } .den-card-face b { font-size: 1.8rem; } }
@media (prefers-reduced-motion: reduce) { .den .coin.new, .den .spill { animation: none; } }

/* ===================================================================================
   HEAVEN'S DOOR GAUNTLET (app/game/gauntlet.py): the run drawn as a manga. Cream paper, black ink, screentone;
   stands are open books (Heaven's Door), boons and pacts are pages Rohan writes.
   =================================================================================== */
.hd { --hd-paper: #F6F0E1; --hd-paper-2: #EDE3CC; --hd-ink: #18101F; --hd-tone: radial-gradient(rgb(24 16 31 / .16) 1px, transparent 1.4px) 0 0 / 6px 6px; }
.hd-cover { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; overflow: hidden;
  padding: 1.4rem 1.6rem; margin-bottom: 1rem; border: 4px solid var(--hd-ink); border-radius: 6px; color: var(--hd-ink);
  background: linear-gradient(115deg, transparent 62%, rgb(214 36 110 / .9) 62.2%, rgb(214 36 110 / .9) 64%, transparent 64.2%), var(--hd-tone), var(--hd-paper);
  box-shadow: 8px 8px 0 var(--hd-ink); }
.hd-cover::after { content: "ヘブンズ・ドアー"; position: absolute; right: 1rem; top: .4rem; font: 400 clamp(1rem, 3vw, 1.6rem) var(--display); color: rgb(24 16 31 / .14); writing-mode: vertical-rl; }
.hd-kicker { margin: 0; font-weight: 900; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }
.hd-title { margin: .2rem 0 .6rem; font: 400 clamp(2rem, 6vw, 3.4rem)/.95 var(--display); color: var(--hd-ink); }
.hd-title span { display: block; color: var(--magenta); -webkit-text-stroke: 0; }
.hd-bubble { position: relative; max-width: 560px; margin: 0; padding: .8rem 1rem; border: 3px solid var(--hd-ink); border-radius: 18px; background: #fff;
  font-weight: 700; line-height: 1.45; }
.hd-bubble::before { content: ""; position: absolute; left: 30px; bottom: -16px; border: 8px solid transparent; border-top-color: var(--hd-ink); border-left-color: var(--hd-ink); }
.hd-bubble small { display: block; margin-top: .3rem; color: var(--magenta); font-weight: 900; }
.hd-best { display: grid; justify-items: center; padding: .6rem 1rem; border: 3px solid var(--hd-ink); background: #fff; transform: rotate(3deg); box-shadow: 4px 4px 0 var(--hd-ink); }
.hd-best small { font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.hd-best strong { font: 400 2.6rem/1 var(--display); color: var(--magenta); }

/* the chapters strip: pages already drawn, this one, the ones to come */
.hd-chapters { display: flex; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hd-chapters li { flex: 0 0 auto; display: grid; place-items: center; width: 58px; height: 74px; border: 3px solid var(--hd-ink); border-radius: 3px;
  background: var(--hd-paper); color: var(--hd-ink); box-shadow: 3px 3px 0 var(--hd-ink); }
.hd-chapters li span { font: 400 1.25rem/1 var(--display); }
.hd-chapters li small { font-size: .62rem; font-weight: 900; text-transform: uppercase; color: var(--magenta); min-height: 1em; }
.hd-chapters li.done { background: var(--hd-tone), var(--hd-paper-2); opacity: .75; }
.hd-chapters li.done small { color: var(--hd-ink); font-size: .9rem; }
.hd-chapters li.now { background: var(--gold); transform: translateY(-4px); box-shadow: 4px 6px 0 var(--magenta); }
.hd-chapters li.next { background: transparent; color: var(--paper); border-style: dashed; border-color: var(--muted); box-shadow: none; }
.hd-chapters li.boss { border-color: var(--magenta); }

.hd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; align-items: start; }
.hd-main { padding: 1rem; border: 4px solid var(--hd-ink); border-radius: 6px; background: var(--hd-tone), var(--hd-paper); color: var(--hd-ink); box-shadow: 8px 8px 0 var(--hd-ink); }
.hd-main .muted { color: #5B4D63; }
.hd-run { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.2rem; }
.hd-label { margin: 0 0 .4rem; font: 900 .75rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); }

/* the cast: each stand an open book */
.hd-cast { display: grid; gap: .6rem; align-content: start; }
.hd-book { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: .55rem; padding: .4rem .5rem .4rem .4rem; border: 3px solid var(--hd-ink);
  border-radius: 4px 12px 12px 4px; background: linear-gradient(90deg, #E3D7BD 0 6px, transparent 6px),
  repeating-linear-gradient(0deg, transparent 0 15px, rgb(24 16 31 / .08) 15px 16px), #FFFBF0; box-shadow: 3px 3px 0 var(--rc, var(--hd-ink)); }
.hd-book-art { width: 64px; height: 76px; overflow: hidden; border: 2px solid var(--hd-ink); border-radius: 3px; background: #fff; }
.hd-book-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hd-book-page { display: grid; gap: .2rem; align-content: start; min-width: 0; }
.hd-book-page strong { font: 400 .95rem/1.15 var(--display); }
.hd-book-page small { font-size: .72rem; color: #5B4D63; }
.hd-ink { display: block; height: 7px; border: 1.5px solid var(--hd-ink); border-radius: 99px; background: #fff; overflow: hidden; }
.hd-ink i { display: block; height: 100%; background: var(--hd-ink); }
.hd-written { font: italic 700 .75rem var(--body); color: var(--magenta); overflow-wrap: anywhere; }
.hd-book.empty { display: grid; place-items: center; min-height: 82px; grid-template-columns: 1fr; border-style: dashed; color: #8A7B8F; font-weight: 700; box-shadow: none; background: transparent; }
.hd-commands { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.hd-commands li { padding: .1rem .5rem; border: 2px solid var(--hd-ink); border-radius: 99px; font-size: .72rem; font-weight: 900; background: #fff; }
.hd-commands li.pact { background: var(--hd-ink); color: #FF8FB8; }
.hd-dust { margin: 0; font-size: .85rem; }

/* this chapter's page: caption boxes and panels */
.hd-page { display: grid; gap: .7rem; align-content: start; min-width: 0; }
.hd-caption { justify-self: start; margin: 0; padding: .3rem .7rem; border: 2px solid var(--hd-ink); background: #fff; font-weight: 900; box-shadow: 3px 3px 0 var(--hd-ink); }
.hd-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }
.hd-panel { display: grid; gap: .4rem; align-content: start; min-width: 0; padding: 0 0 .7rem; overflow: hidden; border: 4px solid var(--hd-ink); background: #fff;
  box-shadow: 5px 5px 0 var(--rc, var(--hd-ink)); transition: transform .15s; }
.hd-panel:nth-child(2) { transform: rotate(.8deg); } .hd-panel:nth-child(3) { transform: rotate(-.8deg); }
.hd-panel:hover { transform: translateY(-4px) rotate(0); }
.hd-panel > :not(.hd-panel-art) { margin: 0 .65rem; min-width: 0; overflow-wrap: anywhere; }
.hd-panel strong { font: 400 1rem/1.15 var(--display); }
.hd-panel small { color: #5B4D63; line-height: 1.4; font-size: .78rem; }
.hd-panel select { width: calc(100% - 1.3rem); min-height: 44px; font: inherit; border: 2px solid var(--hd-ink); border-radius: 4px; background: var(--hd-paper); color: var(--hd-ink); }
.hd-panel .btn { justify-self: start; }
.hd-panel-art { position: relative; display: grid; place-items: center; height: 140px; overflow: hidden; border-bottom: 4px solid var(--hd-ink);
  background: repeating-conic-gradient(from 0deg at 50% 60%, rgb(24 16 31 / .1) 0 3deg, transparent 3deg 12deg), var(--rc, var(--hd-paper-2)); }
.hd-panel-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hd-panel-art b { position: absolute; left: 6px; top: 6px; padding: 0 .4rem; border: 2px solid var(--hd-ink); background: var(--rc, var(--gold)); color: var(--hd-ink); font-size: .7rem; }
.hd-mini { margin: 0; font: 900 .7rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.hd-proto { --rc: var(--gold); }
.hd-hazard { background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, var(--hd-ink) 14px 28px); }
.hd-glyph { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--hd-ink); background: radial-gradient(circle, #FFF6D0, var(--magenta) 72%);
  font: 400 1.8rem var(--display); color: var(--hd-ink); animation: hd-pulse 1.6s ease-in-out infinite; }
@keyframes hd-pulse { 50% { transform: scale(1.07); } }
.hd-stats { display: flex; flex-wrap: wrap; gap: .25rem; }
.hd-stats i { font-style: normal; padding: 0 .35rem; border: 1.5px solid var(--hd-ink); border-radius: 4px; background: #E8F7EE; color: #11663F; font-weight: 900; font-size: .7rem; }
.hd-stats i.bad { background: #FBE4EC; color: #A3123F; }

/* Rohan's two pages: a white boon, a black pact */
.hd-deals { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.hd-deal { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1rem 1rem 1rem 4.6rem; border: 4px solid var(--hd-ink); min-height: 150px; }
.hd-deal .hd-glyph { position: absolute; left: .7rem; top: .9rem; width: 56px; height: 56px; font-size: 1.4rem; animation: none; }
.hd-deal strong { font: 400 1.05rem/1.15 var(--display); }
.hd-deal p { margin: 0; line-height: 1.4; font-size: .85rem; }
.hd-deal .btn { justify-self: start; margin-top: .3rem; }
.hd-deal.boon { background: repeating-linear-gradient(0deg, transparent 0 17px, rgb(24 16 31 / .07) 17px 18px), #FFFBF0; box-shadow: 5px 5px 0 var(--gold); }
.hd-deal.pact { background: radial-gradient(circle at 85% 20%, rgb(214 36 110 / .35), transparent 50%), var(--hd-ink); color: #F3E6EC; box-shadow: 5px 5px 0 var(--magenta); }
.hd-deal.pact .hd-glyph { background: radial-gradient(circle, #FF8FB8, #6B0F33 72%); color: #fff; border-color: #FF8FB8; }
.hd-deal.pact .hd-mini { color: #FF8FB8; }

.hd-splash { display: grid; justify-items: center; gap: .6rem; text-align: center; padding: 2rem 1rem; }
.hd-splash p { margin: 0; max-width: 520px; }
.hd-splash.ready { border: 4px solid var(--hd-ink); background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(24 16 31 / .08) 0 2deg, transparent 2deg 9deg), #fff; }
.hd-big { font: 400 clamp(2rem, 6vw, 3.2rem)/1 var(--display) !important; color: var(--hd-ink); }
.hd-abandon { justify-self: end; }
.hd-abandon .btn.ghost { color: var(--hd-ink); border-color: rgb(24 16 31 / .4); }

/* the side: table of contents */
.hd-side { display: grid; gap: 1rem; }
.hd-toc { padding: .9rem 1rem; border: 3px solid var(--hd-ink); border-radius: 4px; background: var(--hd-paper); color: var(--hd-ink); box-shadow: 5px 5px 0 var(--hd-ink); }
.hd-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.hd-toc ol li { display: grid; grid-template-columns: 24px 1fr auto; gap: .4rem; align-items: baseline; padding-bottom: .25rem; border-bottom: 1.5px dotted rgb(24 16 31 / .35); }
.hd-toc ol li a { color: var(--hd-ink); font-weight: 700; }
.hd-toc ol li.me { color: var(--magenta); }
.hd-toc ol li b { font-family: var(--display); font-weight: 400; }
.hd-rules { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .82rem; }
.r-R { --rc: #B3A3CF; } .r-SR { --rc: #9B6BE0; } .r-SSR { --rc: var(--gold); } .r-UR { --rc: var(--magenta); } .r-LR { --rc: var(--teal); }
/* the storyboard, items, events, villains, ink and the manuscript */
.hd-written.gear { color: #2E6B4A; font-style: normal; }
.hd-gear { --rc: #2E8B57; }
.hd-gear .hd-panel-art { background: linear-gradient(160deg, #DDF3E4, #9FD8B5); }
.hd-gear .hd-glyph { background: radial-gradient(circle, #F2FFF6, #2E8B57 72%); }
.hd-board-panel .hd-panel-art { display: grid; place-items: center; min-height: 110px; background: var(--hd-tone), var(--hd-paper-2); }
.hd-board-panel.p-lab .hd-panel-art { background: repeating-linear-gradient(-45deg, var(--gold) 0 14px, var(--hd-ink) 14px 28px); }
.hd-board-panel.p-rest .hd-glyph { background: radial-gradient(circle, #FFF6D0, #E08A2E 72%); }
.hd-board-panel.p-event .hd-glyph { background: radial-gradient(circle, #EDE0FF, #6B3FB5 72%); color: #fff; }
.hd-villain-warn { margin: 0 0 .7rem; padding: .55rem .8rem; border: 3px solid var(--hd-ink); background: #FFE3EC; color: var(--hd-ink); font-weight: 700; }
.hd-event { display: grid; justify-items: center; gap: .55rem; text-align: center; padding: 1.4rem 1rem; border: 4px solid var(--hd-ink);
  background: var(--hd-tone), #fff; color: var(--hd-ink); box-shadow: 6px 6px 0 var(--hd-ink); }
.hd-event p { margin: 0; max-width: 52ch; }
.hd-event-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .4rem; }
.hd-event .btn.ghost { color: var(--hd-ink); border-color: var(--hd-ink); }
.hd-quill .muted, .hd-toc .muted { color: #5B4E66; }
.hd-splash.villain { border: 4px solid var(--hd-ink); background: linear-gradient(180deg, #2A0F1F, #4B1030); color: #FFE8F0; box-shadow: 6px 6px 0 var(--hd-ink); }
.hd-splash.villain .hd-big { color: #FF8FB8; }
.hd-villain-art img { width: 140px; aspect-ratio: 5 / 6; object-fit: cover; border: 4px solid #FF8FB8; box-shadow: 0 0 28px rgb(255 80 140 / .5); }
.hd-notes { display: grid; gap: .35rem; margin: 0 0 .8rem; padding: .6rem .8rem; border: 3px solid var(--hd-ink); text-align: left; background: #fff; color: var(--hd-ink); }
.hd-notes label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.hd-notes small { flex-basis: 100%; padding-left: 1.6rem; color: #5B4E66; }
.hd-quill { display: grid; gap: .45rem; margin: 1rem 0; padding: .9rem 1rem; border: 3px solid var(--hd-ink); background: var(--hd-paper); color: var(--hd-ink);
  box-shadow: 5px 5px 0 var(--hd-ink); }
.hd-quill-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hd-quill-form select { min-height: 42px; max-width: 100%; border: 2px solid var(--hd-ink); border-radius: 4px; padding: .2rem .4rem; background: #fff; color: var(--hd-ink); }
.hd-unlocks { display: grid; gap: .5rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.hd-unlocks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; }
.hd-unlocks .hd-glyph { width: 38px; height: 38px; border-width: 2px; font-size: 1rem; animation: none; }
.hd-unlocks li div { display: grid; gap: .1rem; }
.hd-unlocks small { font-size: .78rem; color: #5B4E66; }
.hd-unlocks li.done { opacity: .75; }
.hd-owned { color: #2E8B57; font-size: 1.2rem; }
.hd-tier { font-style: normal; color: var(--magenta); letter-spacing: -.05em; }
@media (max-width: 960px) { .hd-layout, .hd-run { grid-template-columns: 1fr; } .hd-panel:nth-child(n) { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd-glyph { animation: none; } .hd-panel { transition: none; } }

/* ── Man vs Machine (machine.html): a manga chapter. Ink-bordered panels, menacing ゴゴゴ, the Foundation's case file ── */
.mvm { display: grid; gap: 28px; }
.mvm .small { font-size: var(--step--1); }
.mvm-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--magenta); background: var(--ink); }
@media (max-width: 760px) { .mvm-hero { grid-template-columns: 1fr; } }
.mvm-hero-text { position: relative; padding: 26px; display: grid; gap: 10px; align-content: start;
  background: repeating-conic-gradient(from 0deg at 85% 30%, rgb(244 197 66 / .07) 0 4deg, transparent 4deg 9deg), var(--night-2); }
.mvm-hero-text p { margin: 0; max-width: 60ch; }
.mvm-hero h1 { text-shadow: 4px 4px 0 var(--magenta), 8px 8px 0 var(--ink); }
.mvm-stand { font-family: var(--display); font-size: 1.15rem; }
.mvm-stand b { color: var(--gold); font-weight: 400; }
.mvm-gogo { position: absolute; right: 18px; top: 12px; font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem); color: var(--magenta);
  line-height: .9; text-shadow: 3px 3px 0 var(--ink); pointer-events: none; }
.mvm-gogo span { display: block; animation: mvm-rumble 1.6s ease-in-out infinite; }
.mvm-gogo span:nth-child(2) { animation-delay: .2s; margin-left: .35em; }
.mvm-gogo span:nth-child(3) { animation-delay: .4s; }
@keyframes mvm-rumble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: translate(2px, -3px) rotate(-4deg); } }
.mvm-portrait { position: relative; margin: 0; min-height: 300px; border-left: 5px solid var(--ink); overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 3px 3px, rgb(20 10 34 / .35) 1.4px, transparent 2px) 0 0 / 10px 10px, linear-gradient(160deg, var(--gold), #e79a3a 55%, var(--magenta)); }
@media (max-width: 760px) { .mvm-portrait { border-left: 0; border-top: 5px solid var(--ink); min-height: 240px; } }
.mvm-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.mvm-hat { width: 120px; margin-bottom: 90px; }
.mvm-balloon { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; margin: 0; background: var(--paper); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 18px; padding: 10px 14px; font-weight: 700; line-height: 1.35; box-shadow: 4px 4px 0 var(--ink); }
.mvm-balloon cite { display: block; font-style: normal; font-weight: 400; font-size: var(--step--1); margin-top: 4px; }
.mvm-panel { position: relative; background: var(--night-2); border: 4px solid var(--ink); outline: 2px solid var(--paper-2); outline-offset: -8px;
  padding: 24px; display: grid; gap: 12px; align-content: start; min-width: 0; box-shadow: 8px 8px 0 var(--ink); }
.mvm-panel.tone { background: radial-gradient(circle at 2px 2px, rgb(214 36 110 / .2) 1.2px, transparent 1.8px) 0 0 / 9px 9px, var(--night-2); }
.mvm-panel p { margin: 0; }
.mvm-caption { justify-self: start; font-family: "Courier New", ui-monospace, monospace; font-weight: 700; font-size: var(--step--1); color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); padding: 2px 10px; transform: skew(-6deg); }
.mvm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 26px; }
.mvm-row-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; }
.mvm-tbc { display: inline-flex; gap: 8px; align-items: center; font-family: "Courier New", ui-monospace, monospace; font-weight: 700; color: var(--ink);
  background: var(--paper-2); padding: 4px 16px 4px 26px; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); }
.mvm-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 680px) { .mvm-stages { grid-template-columns: 1fr 1fr; } }
.mvm-stages li { border: 3px solid var(--ink); background: var(--night); padding: 10px; display: grid; gap: 2px; min-width: 0; }
.mvm-stages span { font-size: .75rem; color: var(--muted); }
.mvm-stages b { font-family: var(--display); font-weight: 400; }
.mvm-stages small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.mvm-stages li.done { opacity: .55; }
.mvm-stages li.now { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--magenta); }
.mvm-stages li.now span, .mvm-stages li.now small { color: var(--ink); }
.mvm-sfx { font-family: var(--display); font-size: 1.6rem; color: var(--gold); text-shadow: 2px 2px 0 var(--magenta), 4px 4px 0 var(--ink); }
.mvm-bar { position: relative; height: 26px; background: var(--ink); border: 3px solid var(--ink); outline: 2px solid var(--paper-2); }
.mvm-bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(115deg, var(--magenta) 0 12px, #b31c5b 12px 18px); }
.mvm-ticks { position: relative; height: 20px; font-size: .75rem; color: var(--muted); }
.mvm-ticks span { position: absolute; transform: translateX(-100%); white-space: nowrap; }
.mvm-ticks span.got { color: var(--gold); }
.mvm-crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mvm-foe { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 8px; box-shadow: 5px 5px 0 var(--ink); display: grid; gap: 2px; min-width: 0; }
.mvm-foe img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); background: var(--night-3); }
.mvm-foe b { font-family: var(--display); font-weight: 400; line-height: 1.15; font-size: .95rem; }
.mvm-foe small { font-size: .74rem; }
.mvm-foe.lead { box-shadow: 5px 5px 0 var(--magenta); }
.mvm-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mvm-chips li { border: 2px solid var(--ink); background: var(--paper-2); color: var(--ink); padding: 3px 10px; font-weight: 700; font-size: .88rem; }
.mvm-dots { display: flex; gap: 10px; }
.mvm-dots i { width: 22px; height: 22px; border: 3px solid var(--ink); background: var(--night); transform: rotate(45deg); outline: 2px solid var(--gold); }
.mvm-dots i.used { background: var(--gold); }
.mvm-file { position: relative; background: #E9DFC6; color: #2a2014; border: 3px solid var(--ink); padding: 20px 22px; display: grid; gap: 10px;
  font-family: "Courier New", ui-monospace, monospace; box-shadow: 6px 6px 0 var(--ink); }
.mvm-file h2 { font-family: inherit; font-size: 1rem; letter-spacing: .06em; margin: 0; padding-right: 120px; }
.mvm-file p { margin: 0; }
.mvm-file .rejected { color: #B3202A; }
.mvm-stamp { position: absolute; right: 14px; top: 10px; color: #B3202A; border: 3px solid #B3202A; padding: 0 8px; font-family: var(--display); transform: rotate(9deg); opacity: .85; }
.mvm-brain-wrap { overflow-x: auto; background: var(--ink); border: 3px solid var(--ink); outline: 2px solid var(--paper-2); outline-offset: -6px; }
.mvm-brain { width: 100%; min-width: 660px; height: auto; display: block; }
.mvm-brain text { font-family: var(--body); font-size: 13px; font-weight: 700; fill: var(--paper); }
.mvm-brain .col { font-size: 12px; font-weight: 400; letter-spacing: .1em; fill: var(--gold); }
.mvm-brain .edge { fill: none; stroke: var(--violet); stroke-linecap: round; }
.mvm-brain .edge.hot { stroke: var(--magenta); }
.mvm-brain .edge.pos { stroke: var(--gold); }
.mvm-brain .edge.neg { stroke: var(--magenta); }
.mvm-brain .edge:focus, .mvm-brain .edge:hover { opacity: 1; outline: none; }
.mvm-foe .mvm-gear { font-weight: 700; color: var(--violet); }
.mvm-brain .node { fill: var(--night); stroke: var(--paper-2); stroke-width: 2; }
.mvm-brain .node.lit { fill: var(--gold); stroke: var(--ink); stroke-width: 3; }
.mvm-brain g.n { cursor: help; }
.mvm-brain g.n:focus { outline: none; }
.mvm-brain g.n:focus .node, .mvm-brain g.n:hover .node { stroke: var(--teal); stroke-width: 4; }
.mvm-tip { min-height: 1.6em; color: var(--muted); }
.mvm-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mvm-tiers li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 2px solid var(--night-3); }
.mvm-tiers li span { display: grid; min-width: 0; }
.mvm-tiers li small { color: var(--muted); }
.mvm-tiers li.reached { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .mvm-gogo span { animation: none; } }
.mvm-dev { display: grid; gap: 8px; padding: 12px 16px; border: 2px dashed var(--teal); background: rgb(43 179 168 / .08); }
.mvm-dev-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.mvm-inputs { columns: 2 14rem; }

/* D'Arby's other games: the cat's two plates, and poker's playing cards */
.den-hint { margin: 0 0 .6rem; font-style: italic; color: var(--den-gold); }
.den-plates { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.den-plate { display: grid; gap: .3rem; align-content: start; padding: .8rem; border-radius: 10px; background: #FBF6EA; color: #2A1A10; border: 2px solid #CBB78F; }
.den-plate { text-align: left; }
.den-plate ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.den-plate.picked { border-color: var(--den-gold); box-shadow: 0 0 0 3px rgb(232 194 106 / .4); }
.den-plate.eaten { background: #FFF1C9; }
.den-odds { font: 400 1.2rem var(--display); color: #9A5B1E; }
.den-ate { font-weight: 700; }
.den-cards { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .6rem; }
.den-pc { position: relative; display: inline-grid; }
.den-pc > span { display: grid; place-items: center; width: 3.4rem; height: 4.8rem; border-radius: 8px; background: #FBF6EA; color: #1C0F2E;
  border: 2px solid #CBB78F; font: 400 1.3rem/1 var(--display); box-shadow: 0 3px 0 #A8926A; }
.den-pc > span i { font-style: normal; font-size: 1.2rem; }
.den-pc.red > span { color: #B3123F; }
.den-pc input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.den-pc input:checked + span { transform: translateY(-10px); border-color: #B3123F; box-shadow: 0 0 0 3px rgb(179 18 63 / .35); opacity: .75; }
.den-pc input:focus-visible + span { outline: 3px solid var(--den-gold); outline-offset: 2px; }
@media (max-width: 480px) { .den-plates { grid-template-columns: 1fr; } .den-pc > span { width: 2.9rem; height: 4.1rem; } }

/* ── The admin panel (admin/layout.html): its own work shell, true-black flat ─────────────────────────────────────
   One black ground for sidebar, top bar and canvas, divided by 1px rules; cards are a lightness step (#111) with no
   border or shadow; nested panels one more (#2a2a2a). Colour goes on data and status only: the site's gold is the one
   data hue (the new-players bars), never a button, tab or nav item. The primary button is inverted (white, black text).
   Grid: sidebar 224 + rule 1; canvas gutter 29; main column 1fr + 14 gap + rail 360. */
body.admin-app { background: #000; }
body.admin-app main { display: block; }
.adm {
  --ground: #000000; --surface: #111111; --raised: #2a2a2a; --active: #1c1c1c;
  --border: #1a1a1a; --rule: #1f1f1f; --control: #444444;
  --text: #ffffff; --muted: #b4b4b4; --faint: #949494;
  --accent: #F4C542;            /* STFU Requiem's gold: the one data hue */
  --positive: #3fc07a; --negative: #e5566f; --warning: #e5a93b;
  --pill-ok-bg: #172a1d; --pill-ok-ink: #3fc07a; --pill-bad-bg: #2c1a20; --pill-bad-ink: #ef7d91;
  --pill-warn-bg: #2b2414; --pill-warn-ink: #e5a93b; --pill-neutral-bg: #222222;
  --radius-card: 20px; --radius-panel: 12px; --radius-control: 999px;
  --gap: 14px; --pad: 22px; --control-height: 36px;
  --font: var(--body);
  display: grid; grid-template-columns: 224px minmax(0, 1fr); grid-template-rows: 64px 1fr; min-height: 100vh;
  background: var(--ground); color: var(--text); font: 400 14px/20px var(--font);
}
.adm a { color: var(--text); text-decoration: none; }
.adm a:hover { text-decoration: underline; text-underline-offset: 3px; }
.adm :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.adm .num, .adm td, .adm dd { font-variant-numeric: tabular-nums; }
.adm .muted { color: var(--muted); }
.adm code { font: 13px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--muted); background: none; padding: 0; }

/* the shell */
.adm-side { grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); padding: 14px 12px 18px; }
.adm-brand { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; margin-bottom: 18px; }
.adm-brand img { width: 28px; height: 28px; border-radius: 50%; }
.adm-brand span { display: grid; line-height: 1.15; }
.adm-brand b { font: 400 15px/1.1 var(--display); letter-spacing: .01em; }
.adm-brand small { color: var(--faint); font-size: 12px; }
.adm-nav { display: grid; gap: 18px; }
.adm-group { display: grid; }
.adm-group-label { margin: 0 0 4px; padding: 0 8px; color: var(--faint); font-size: 12px; }
.adm-nav a { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 2px; padding: 0 8px;
  border-radius: 8px; color: #bbbbbb; }
.adm-nav a:hover { color: var(--text); text-decoration: none; background: var(--active); }
.adm-nav a[aria-current="page"] { color: var(--text); font-weight: 500; }
.adm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pill-bad-bg); color: var(--pill-bad-ink);
  font: 600 12px/20px var(--font); text-align: center; }
.adm-back { margin-top: auto; padding: 14px 8px 0; color: var(--muted) !important; border-top: 1px solid var(--border); }
.adm-top { grid-column: 2; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; height: 64px;
  padding: 0 29px; background: var(--ground); border-bottom: 1px solid var(--border); }
.adm-search { flex: 1; max-width: 520px; }
.adm-search input { width: 100%; }
.adm .adm-who { margin: 0 0 0 auto; display: grid; justify-items: end; line-height: 1.2; padding-left: 16px; border-left: 1px solid var(--border); align-self: stretch; align-content: center; }
.adm-who small { color: var(--faint); font-size: 12px; }
.adm-menu { display: none; }
.adm-canvas { grid-column: 2; min-width: 0; padding: 28px 29px 64px; }

/* the title row, cards and the overview grid */
.adm-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.adm h1, .adm h1.display { margin: 0; font: 600 24px/32px var(--font); letter-spacing: 0; color: var(--text); text-shadow: none; }
.adm h1 small { font-size: 16px; font-weight: 400; color: var(--muted); }
.adm h1.display { margin-bottom: 20px; }
.adm-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.adm-fresh { margin: 0; color: var(--faint); font-size: 12px; white-space: nowrap; }
.adm-fresh a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.adm .h2, .adm h2 { margin: 0; font: 600 16px/24px var(--font); color: var(--text); text-shadow: none; letter-spacing: 0; }
.adm .h3, .adm h3 { margin: 0; font: 600 15px/22px var(--font); color: var(--text); letter-spacing: 0; }
.adm-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--gap); align-items: start; }
.adm-main, .adm-rail { display: grid; gap: var(--gap); min-width: 0; }
.adm-rail { gap: 0; }
.adm-rail-h { margin: 18px 0 8px !important; font-size: 14px !important; color: var(--muted) !important; font-weight: 500 !important; }
.adm-rail > .adm-rail-h:first-child { margin-top: 0 !important; }
.adm-rail-head { display: flex; align-items: baseline; justify-content: space-between; }
.adm-rail-head a { color: var(--muted); font-size: 13px; }
.adm-card, .adm .admin-card, .adm .social-panel { display: grid; gap: 12px; align-content: start; min-width: 0; margin: 0 0 var(--gap);
  padding: var(--pad); border: 0; border-radius: var(--radius-card); background: var(--surface); box-shadow: none; }
.adm-main > .adm-card, .adm-pair > .adm-card, .adm-rail > .adm-card { margin: 0; }
.adm-card-head, .adm .social-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.adm-card-head .muted { font-size: 13px; white-space: nowrap; }
.adm .social-heading a { color: var(--muted); font-size: 13px; }
.adm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; }
.adm p { margin: 0; }
.adm .small-print { font-size: 13px; line-height: 19px; color: var(--faint); }
.adm .signups { --series-discord: var(--accent); --series-web: #e6e6e6; }
body.admin-app .footer, body.admin-app .cookie-note, body.admin-app .install-hint { display: none !important; }
body.admin-app::before, body.admin-app::after { display: none; }
.adm .admin-columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--gap); align-items: start; }
.adm .admin-columns > .social-panel { margin: 0; }
.adm .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.adm .stat-tiles small { overflow-wrap: anywhere; }
.adm .webhook-list li { padding: 10px 14px; border-radius: var(--radius-panel); background: var(--raised); }
.adm .item-pick, .adm .reward-pick { font-weight: 400; }
.adm .admin-player .avatar-initial { background: #2a2a2a; color: var(--text); }
.adm code { overflow-wrap: anywhere; }
.adm .rar-tag { font-size: 11px !important; }
.adm :is(.social-panel, .admin-card)::after { display: none; }
.adm :is(.social-panel, .admin-card) { border: 0 !important; }
.adm .tabs a, .adm .tabs a.tab { padding: 8px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 500; }
.adm .tabs a[aria-current], .adm .tabs a.active { background: none; color: var(--text); border-bottom-color: var(--text); }
.adm .pve-check .btn.gold { background: #2a2a2a; border-color: #2a2a2a; color: var(--text); }
.adm .sp-trigger { border: 1px solid var(--control) !important; border-radius: 10px !important; background: #0a0a0a !important; color: var(--text) !important; box-shadow: none !important; }
.adm .sp-trigger * { color: inherit; }
.adm .danger-zone { border: 0; border-radius: var(--radius-panel); background: #1a0f12; }
/* peer help cards: one card split into columns by 1px rules (the ground shows through a 1px gap) */
.adm .event-help { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--gap); border-radius: var(--radius-card);
  overflow: hidden; background: var(--border); }
.adm .event-help-card { padding: 18px var(--pad); border: 0; border-radius: 0; background: var(--surface); }
.adm .event-help-card ul { color: var(--muted); }
@media (max-width: 1180px) { .adm .event-help { grid-template-columns: minmax(0, 1fr); } }
/* free-flowing page content between cards */
.adm-canvas > h2, .adm-canvas > .h2 { margin: 28px 0 10px !important; }
.adm-canvas > p { margin-bottom: 14px; max-width: 80ch; }
.adm-canvas > details { margin: 0 0 var(--gap); }
.adm-canvas > details > summary { margin-bottom: 10px; font-weight: 500; }
.adm .pve-check li { border: 0; border-radius: var(--radius-panel); background: var(--raised); }
.adm .pve-check li.done { border: 0; }
.adm .pve-box { border: 1.5px solid var(--control); }
.adm .pve-check li.done .pve-box { background: var(--positive); border-color: var(--positive); }
.adm .meter { background: #2a2a2a; border: 0; box-shadow: none; } .adm .meter i { background: #8a8a8a; }
.adm-card form > .btn.small.ghost { justify-self: start; padding-inline: 0; }
.adm-empty { padding: 10px 14px; border: 1px dashed #333; border-radius: var(--radius-panel); color: var(--muted); }

/* figures: one container split by dividers */
.adm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-radius: var(--radius-card); background: var(--surface); }
.adm-kpis > div { display: grid; gap: 2px; padding: 18px var(--pad); min-width: 0; }
.adm-kpis > div + div { border-left: 1px solid var(--border); }
.adm-kpis dt { color: var(--muted); font-size: 13px; }
.adm-kpis dd { margin: 0; font: 500 24px/32px var(--font); }
.adm-kpis small { color: var(--faint); font-size: 12px; }
.adm .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: 0 0 var(--gap);
  border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.adm .stat-tiles > div { display: grid; gap: 2px; align-content: start; padding: 18px var(--pad); border: 0; border-radius: 0; background: none;
  box-shadow: inset 1px 0 0 var(--border); }
.adm .stat-tiles span { color: var(--muted); font-size: 13px; }
.adm .stat-tiles strong { font: 500 22px/30px var(--font); font-variant-numeric: tabular-nums; text-shadow: none; }
.adm .stat-tiles small { color: var(--faint); font-size: 12px; }
.adm-facts { display: grid; gap: 0; margin: 0; }
.adm-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.adm-facts dt { color: var(--muted); }
.adm-facts dd { margin: 0; }
.adm-bars { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.adm-bars li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.adm-bars span { color: var(--muted); font-size: 13px; }
.adm-bars i { height: 6px; width: var(--w); min-width: 2px; border-radius: 999px; background: #8a8a8a; }
.adm-bars b { font-weight: 400; text-align: right; }

/* rows inside cards */
.adm-rows, .adm .admin-list { list-style: none; margin: 0; padding: 0; display: grid; }
.adm-rows li, .adm .admin-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px;
  border-bottom: 1px solid var(--rule); }
.adm-rows li:last-child, .adm .admin-list li:last-child { border-bottom: 0; }
.adm-rows a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm .admin-audit { list-style: none; margin: 0; padding: 0; display: grid; }
.adm .admin-audit li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 13px; }
.adm .admin-audit li:last-child { border-bottom: 0; }
.adm .admin-audit time { color: var(--faint); font-variant-numeric: tabular-nums; grid-row: span 2; }
.adm .admin-audit span { grid-column: 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-audit-card { padding-block: 8px; }

/* pills, notices */
.adm .pill { display: inline-flex; flex: none; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 500 12px/1 var(--font);
  white-space: nowrap; background: var(--pill-neutral-bg); color: var(--text); border: 0; }
.adm .pill.ok { background: var(--pill-ok-bg); color: var(--pill-ok-ink); }
.adm .pill.bad, .adm .syn-off.ban { background: var(--pill-bad-bg); color: var(--pill-bad-ink); }
.adm .pill.warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }
.adm .notice { padding: 12px 14px; border: 0; border-radius: var(--radius-panel); background: var(--raised); color: var(--muted); }
.adm .rar-tag { background: var(--pill-neutral-bg) !important; color: var(--text) !important; border: 0 !important; box-shadow: none !important; }
.adm .nav-badge { background: var(--pill-bad-bg); color: var(--pill-bad-ink); box-shadow: none; }
.adm-disclose summary { cursor: pointer; color: var(--muted); }
.adm-disclose[open] summary { margin-bottom: 10px; }
.maint-card.on { background: #1a1608; }

/* tables */
.adm .admin-table, .adm .wiki-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 0; }
.adm .admin-table th, .adm .wiki-table th { padding: 0 12px 8px 0; color: var(--muted); font: 400 12px/16px var(--font); text-transform: none;
  letter-spacing: 0; text-align: left; border-bottom: 1px solid var(--border); background: none; }
.adm .admin-table td, .adm .wiki-table td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.adm .admin-table tr:last-child td, .adm .wiki-table tr:last-child td { border-bottom: 0; }
.adm .admin-table th.num, .adm .admin-table td.num, .adm .wiki-table th.num, .adm .wiki-table td.num { text-align: right; }
.adm .admin-table tbody tr:hover td { background: #161616; }

/* controls: pills; the primary is inverted, never the accent */
.adm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-height); padding: 0 16px;
  border: 1px solid var(--control); border-radius: var(--radius-control); background: transparent; color: var(--text);
  font: 500 14px/1 var(--font); box-shadow: none; transform: none; text-shadow: none; letter-spacing: 0; }
.adm .btn:hover { background: #1c1c1c; color: var(--text); box-shadow: none; transform: none; text-decoration: none; }
.adm .btn:active { transform: none; box-shadow: none; background: #262626; }
.adm .btn.gold, .adm .btn.primary { background: #ffffff; border-color: #ffffff; color: #000000; box-shadow: none; }
.adm .btn.gold:hover { background: #e6e6e6; color: #000; }
.adm .btn.ghost { border-color: transparent; color: var(--muted); }
.adm .btn.ghost:hover { color: var(--text); }
.adm .btn.danger { border-color: #5a2a33; color: var(--pill-bad-ink); background: transparent; }
.adm .btn.danger:hover { background: var(--pill-bad-bg); }
.adm .btn.small { height: 30px; padding: 0 12px; font-size: 13px; box-shadow: none; }
.adm .btn.big { height: 40px; font-size: 15px; }
.adm .btn::before, .adm .btn::after { content: none !important; }
.adm input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]), .adm select, .adm textarea {
  min-height: var(--control-height); padding: 7px 12px; border: 1px solid var(--control); border-radius: 10px; background: #0a0a0a;
  color: var(--text); font: 400 14px/20px var(--font); box-shadow: none; }
.adm textarea { min-height: 72px; }
.adm input::placeholder, .adm textarea::placeholder { color: var(--faint); }
.adm .adm-search input { height: 36px; border-radius: 999px; padding-inline: 16px; background: var(--surface); border-color: #2a2a2a; }
.adm label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.adm form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }
.adm form.inline { display: inline-flex; }
.adm .maint-form { margin-bottom: 4px; }
.adm .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm .filter-chip { height: 30px; padding: 0 12px; border: 1px solid #2a2a2a; border-radius: 999px; background: transparent; color: var(--muted);
  font: 500 13px/1 var(--font); box-shadow: none; }
.adm .filter-chip[aria-pressed="true"] { background: #ffffff; border-color: #ffffff; color: #000; }
/* the event form: the modifiers as pills (several can be on), the shop as a ticked table */
.adm .event-kinds { min-inline-size: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.adm .event-kinds legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.adm .event-kind { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid #2a2a2a;
  border-radius: 999px; color: var(--text); font-size: 14px; cursor: pointer; }
.adm .event-kind:has(input:checked) { background: #ffffff; border-color: #ffffff; color: #000; }
.adm .event-kind input { accent-color: #000; margin: 0; }
.adm .event-shop-pick summary { font-weight: 500; }
.adm .event-shop-pick input[type=number] { width: 84px; text-align: right; }
.adm .event-shop-pick tr:has(input[name=offer]:not(:checked)) td:not(:first-child) { opacity: .45; }
.adm .tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: var(--gap); overflow-x: auto; }
.adm .tabs a { padding: 8px 0; color: var(--muted); border-bottom: 2px solid transparent; background: none; border-radius: 0; box-shadow: none; }
.adm .tabs a[aria-current="page"], .adm .tabs a.on { color: var(--text); border-bottom-color: var(--text); }
.adm details > summary { cursor: pointer; }

/* the new-players chart: gold on the Discord saves, light grey on web-only, a grey average */
.adm .chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 12px; }
.adm .chart-legend li { display: flex; align-items: center; gap: 6px; }
.adm .sw { width: 8px; height: 8px; border-radius: 2px; }
.adm .sw.avg { height: 2px; width: 12px; background: var(--faint); }
.adm .signup-chart .grid { stroke: #222; }
.adm .signup-chart .base { stroke: #555; }
.adm .signup-chart .tick { fill: var(--faint); font: 400 12px var(--font); }
.adm .signup-chart .avg { stroke: var(--faint); stroke-width: 1.5; }
.adm .signup-chart .hover-col { fill: rgb(255 255 255 / .05); }
.adm .chart-tip { background: #1c1c1c; color: var(--text); border: 0; border-radius: 10px; box-shadow: 0 8px 24px rgb(0 0 0 / .5); }
.adm .signup-table summary { color: var(--muted); font-size: 13px; }

/* tablet: the rail goes under the main column */
@media (max-width: 1180px) {
  .adm-split { grid-template-columns: minmax(0, 1fr); }
  .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .adm-kpis > div:nth-child(4) { border-left: 0; }
  .adm-kpis > div:nth-child(n+4) { border-top: 1px solid var(--border); }
}
/* phone and small tablet: the sidebar folds into a Menu sheet in the top bar */
@media (max-width: 900px) {
  .adm { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px 1fr; }
  .adm-side { display: none; }
  .adm-top { grid-column: 1; height: 56px; padding: 0 16px; gap: 10px; }
  .adm-canvas { grid-column: 1; padding: 20px 16px 48px; }
  .adm .adm-who { display: none; }
  .adm-menu { display: block; }
  .adm-menu > summary { list-style: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--control);
    border-radius: 999px; font-weight: 500; }
  .adm-menu > summary::-webkit-details-marker { display: none; }
  .adm-menu[open] > .adm-nav { position: fixed; inset: 56px 0 0; z-index: 20; overflow-y: auto; padding: 16px; background: var(--ground);
    align-content: start; }
  .adm-menu .adm-nav a { height: 44px; }
  .adm-pair { grid-template-columns: minmax(0, 1fr); }
  .adm-title { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-kpis > div { border-left: 0 !important; border-top: 1px solid var(--border); }
  .adm-kpis > div:nth-child(-n+2) { border-top: 0; }
  .adm-kpis > div:nth-child(even) { border-left: 1px solid var(--border) !important; }
  .adm-kpis > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* phone: tighter cards, tables that scroll sideways instead of wrapping every cell, the menu as a grid of tiles */
@media (max-width: 600px) {
  .adm { --pad: 16px; --gap: 12px; --radius-card: 16px; }
  .adm-top { padding: 0 12px; }
  .adm-canvas { padding: 16px 12px 40px; }
  .adm h1, .adm h1.display { font-size: 22px; line-height: 28px; }
  .adm-canvas > p { font-size: 13px; line-height: 19px; color: var(--muted); }
  .adm-card-head .muted { white-space: normal; }
  .adm-kpis > div, .adm .stat-tiles > div { padding: 12px var(--pad); }
  .adm-kpis dd { font-size: 20px; line-height: 26px; }
  .adm .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm .stat-tiles strong { font-size: 18px; line-height: 24px; }
  .adm :is(.admin-table, .wiki-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .adm :is(.admin-table, .wiki-table) :is(th, td) { white-space: nowrap; }
  .adm .pz-log td:last-child { white-space: normal; min-width: 240px; }
  .adm-menu[open] > .adm-nav { gap: 14px; padding: 14px 12px 32px; }
  .adm-menu .adm-group { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .adm-menu .adm-group-label { grid-column: 1 / -1; margin: 0; }
  .adm-menu .adm-nav a { height: 48px; margin: 0; padding: 0 12px; border-radius: 12px; background: var(--surface); color: var(--text); }
  .adm-menu .adm-nav a[aria-current="page"] { background: var(--text); color: #000; }
  .adm-menu .adm-back { grid-column: 1 / -1; border-top: 0; justify-content: center; }
}

/* ── Navigation rework: a shorter sidebar, the top bar's "Jump to", and the phone menu as tiles ─────────────────── */
/* "Jump to": every page the player can open, found as they type; the results open as a paper tarot card */
.jump { display: none; }
@media (min-width: 1024px) {
  .jump { position: relative; display: block; flex: 1; max-width: 460px; margin-right: 1rem; }
  .jump input { width: 100%; height: 40px; padding: 0 1rem 0 2.4rem; border: 2px solid var(--night-3); border-radius: 999px;
    background: var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3A3CF' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .9rem 50%;
    color: var(--paper); font: 500 .95rem var(--body); }
  .jump input::placeholder { color: var(--muted); }
  .jump input:focus { outline: none; border-color: var(--gold); }
  .jump-list { position: absolute; inset: calc(100% + 8px) 0 auto; z-index: 40; display: grid; gap: 2px; padding: .4rem;
    background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 6px 6px 0 var(--magenta); }
  .jump-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .8rem; padding: .5rem .7rem; border-radius: 8px;
    color: var(--ink); text-decoration: none; }
  .jump-opt strong { font: 400 1rem/1.25 var(--display); }
  .jump-opt em { font-style: normal; font-size: .78rem; font-weight: 700; color: #6A4E92; align-self: center; }
  .jump-opt small { grid-column: 1 / -1; color: #4A3A60; font-size: .82rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jump-opt[aria-selected="true"] { background: var(--gold); }
  .jump-opt[aria-selected="true"] em, .jump-opt[aria-selected="true"] small { color: var(--ink); }
  .jump-none { margin: 0; padding: .6rem .7rem; color: #4A3A60; }

  /* the sidebar: group titles in the display face, each with its count; icons in one tone until hovered or current */
  .side-head { font: 400 .9rem/1.2 var(--display); letter-spacing: .01em; text-transform: none; color: var(--gold); }
  .side-head .side-label { color: inherit; }
  .side-count { margin-left: .1rem; color: var(--muted); font: 600 .72rem var(--body); }
  .side-link .side-icon { filter: grayscale(1) brightness(1.35); opacity: .7; transition: filter .15s, opacity .15s; }
  .side-link:hover .side-icon, .side-link[aria-current] .side-icon, .side-link.hot .side-icon { filter: none; opacity: 1; }
}

/* the phone menu: a search, then three tiles a row (the description is the tile's title) */
@media (max-width: 1023px) {
  .sheet-head { min-height: 116px; }
  .sheet .sheet-find { width: 100%; height: 44px; margin: .2rem 0 .4rem; padding: 0 1rem; border: 2px solid var(--night-3); border-radius: 999px;
    background: var(--night); color: var(--paper); font: 500 1rem var(--body); }
  .sheet .sheet-find:focus { outline: none; border-color: var(--gold); }
  .sheet-none { margin: .8rem 0; color: var(--muted); text-align: center; }
  .sheet-group { font: 400 .88rem/1.2 var(--display); letter-spacing: .01em; text-transform: none; }
  .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .sheet-grid a { position: relative; flex-direction: column; justify-content: center; gap: .3rem; min-height: 78px; padding: .55rem .3rem;
    text-align: center; font-size: .8rem; line-height: 1.2; }
  .sheet-grid a > span:first-child { width: auto; font-size: 1.35rem; line-height: 1; }
  .sheet-grid a > span + span { display: block; overflow-wrap: anywhere; }
  .sheet-grid a small { display: none; }
  .sheet-grid a .nav-badge { position: absolute; top: -6px; right: -4px; margin: 0; font-size: .62rem; }
  /* the long "Continue here" sits centred on the tile's top edge, without the arrow that points at a side menu */
  .sheet-grid a .nav-badge.go { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
  .sheet-grid a .nav-badge.go .go-arrow { display: none; }
  .sheet-grid a[hidden], .sheet-section[hidden] { display: none; }
}

/* the den with nobody seated: the table and the button follow the game picked on the deck */
.den-idle-poker, .den-idle-cat, .den-go-poker, .den-go-cat { display: none; }
.den:has(input[name=kind][value=poker]:checked) :is(.den-idle-glass, .den-go-glass),
.den:has(input[name=kind][value=cat]:checked) :is(.den-idle-glass, .den-go-glass) { display: none; }
.den:has(input[name=kind][value=poker]:checked) .den-idle-poker,
.den:has(input[name=kind][value=cat]:checked) .den-idle-cat { display: grid; justify-items: center; gap: .4rem; }
.den:has(input[name=kind][value=poker]:checked) .den-go-poker,
.den:has(input[name=kind][value=cat]:checked) .den-go-cat { display: inline; }
.den-pc.back > span { background: #24133B; color: var(--den-gold); border-color: var(--den-gold); font: 400 1.1rem/1 var(--display); }
.den-idle-cat .den-plates { width: min(100%, 420px); }
.den-idle-cat .den-plate { justify-items: center; text-align: center; }
.den-cloche { display: grid; place-items: center; width: 84px; height: 56px; border-radius: 84px 84px 10px 10px; background: #D9CCEE;
  border: 2px solid #2A1A10; color: #2A1A10; font: 400 1.6rem/1 var(--display); }

/* ===================================================================================
   Mode headers (Adventure and Challenges): each mode its own colour, a badge, a vertical Japanese word behind the
   figures, a one-line lede and the rules folded under "How it works". Carry Me and the co-op raid keep their own
   layout (Joyce's art, the boss) and take only the colour, the word and the fold.
   =================================================================================== */
.mode-hero { --mode: var(--gold); --mode-2: var(--violet); position: relative; isolation: isolate; overflow: hidden; }
.mode-hero[data-mode="story"] { --mode: var(--part-2, var(--gold)); --mode-2: var(--part, var(--violet)); }
.mode-hero[data-mode="au"] { --mode: #5FF2E4; --mode-2: #2B6E8F; }
.mode-hero[data-mode="carryme"] { --mode: #FF9FD2; --mode-2: #7A3FB8; }
.mode-hero[data-mode="overheaven"] { --mode: #BDE7FF; --mode-2: #3AB4F2; }
.mode-hero[data-mode="requiem"] { --mode: #FF4D6D; --mode-2: #6B1D3A; }
.mode-hero[data-mode="heaven"] { --mode: #F4C542; --mode-2: #5FF2E4; }
.mode-hero[data-mode="tower"] { --mode: #B48CF0; --mode-2: #4A2A86; }
.mode-hero[data-mode="rush"] { --mode: #FF8A3D; --mode-2: #8A1C2B; }
.mode-hero[data-mode="coop"] { --mode: #FFD15C; --mode-2: #D6246E; }
.mode-hero[data-mode="training"] { --mode: #7DF0A8; --mode-2: #1E6B4A; }
/* the vertical word, huge and faint, at the right edge behind the figures */
.mode-mark { position: absolute; z-index: -1; top: 50%; right: 1.2rem; translate: 0 -50%; writing-mode: vertical-rl; pointer-events: none; user-select: none;
  font: 400 min(4.6rem, calc(10.5rem / var(--n, 2)))/1 var(--display); color: var(--mode); opacity: .22; white-space: nowrap; }  /* the word fits the header's height */
/* the header itself (the player-bar ones; Carry Me and the raid keep their grids) */
.player-bar.mode-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.4rem;
  padding: 1.3rem 1.5rem; border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--night-3);
  background: radial-gradient(ellipse 55% 140% at 100% 50%, color-mix(in srgb, var(--mode-2) 55%, transparent), transparent 70%),
    linear-gradient(100deg, color-mix(in srgb, var(--mode-2) 22%, var(--night-2)), var(--night-2) 55%); }
.player-bar.mode-hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--mode); }
.mode-badge { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; border: 3px solid var(--ink); rotate: -6deg;
  background: var(--mode); box-shadow: 3px 3px 0 var(--ink); font-size: 2.1rem; line-height: 1; }
.mode-hero[data-mode="requiem"] .mode-badge { border-radius: 50%; rotate: 0deg; background: #12081E; color: #FF4D6D; box-shadow: 0 0 0 3px var(--magenta), 0 0 26px rgb(214 36 110 / .55); }
.mode-hero-body { min-width: 0; }
.mode-hero-body h1 { margin: .1rem 0 .35rem; }
.mode-hero .kicker { color: var(--mode); }
.mode-lede { margin: 0; max-width: 60ch; font-size: 1.05rem; color: var(--paper); }
.mode-rules { margin-top: .5rem; max-width: 72ch; }
.mode-rules summary { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; color: var(--mode); font-weight: 700; font-size: .85rem; list-style: none; }
.mode-rules summary::-webkit-details-marker { display: none; }
.mode-rules summary::before { content: "+"; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  border: 2px solid currentColor; font-size: .8rem; line-height: 1; }
.mode-rules[open] summary::before { content: "−"; }
.mode-rules p { margin: .4rem 0 0; color: var(--paper-2); font-size: .92rem; line-height: 1.55; }
/* the figures on the right: one dark panel whatever the page puts there */
.player-bar.mode-hero > :is(.story-progress, .rush-best) { position: relative; min-width: 170px; padding: .7rem 1rem; border-radius: var(--radius-ui);
  background: rgb(18 8 30 / .7); border: 2px solid color-mix(in srgb, var(--mode) 45%, var(--night-3)); }
.mode-hero .story-progress strong, .mode-hero .rush-best strong { color: var(--mode); }
.mode-hero .story-progress .meter i { background: var(--mode); }
@media (max-width: 760px) {
  .player-bar.mode-hero { grid-template-columns: auto minmax(0, 1fr); padding: 1rem 1.1rem; gap: .7rem 1rem; }
  .player-bar.mode-hero > :is(.story-progress, .rush-best) { grid-column: 1 / -1; min-width: 0; justify-items: start; }
  .player-bar.mode-hero > .figures { grid-column: 1 / -1; min-width: 0; }  /* the wallet (gear pages) gets its own row */
  .mode-badge { width: 50px; height: 50px; font-size: 1.5rem; border-radius: 14px; align-self: start; }
  .mode-hero-body h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .mode-lede { font-size: .95rem; }
  .mode-mark { top: .8rem; translate: none; right: .4rem; font-size: min(3rem, calc(8rem / var(--n, 2))); }
}

/* the stage card of every Adventure page: the mode's colour, and a VS between the story and the enemies */
.story-stage:not(.done) { position: relative; border: 3px solid var(--ink); border-left: 6px solid var(--part); box-shadow: 5px 5px 0 var(--night-3); }
.story-stage:not(.done) > .story-foes { position: relative; padding-left: 1.4rem; border-left: 2px dashed color-mix(in srgb, var(--part) 50%, transparent); }
.story-stage:not(.done) > .story-foes::before { content: "VS"; position: absolute; left: -1.05rem; top: 1.2rem; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 2px solid var(--ink); background: var(--magenta); color: var(--paper);
  font: 400 .78rem/1 var(--display); rotate: -10deg; box-shadow: 2px 2px 0 var(--ink); }
.story-stage .story-foes img { transition: translate .15s; }
.story-stage .story-foes a:hover img { translate: 0 -3px; }
@media (max-width: 760px) {
  .story-stage:not(.done) > .story-foes { padding: 1.3rem 0 0; border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--part) 50%, transparent); }
  .story-stage:not(.done) > .story-foes::before { left: 50%; top: -1.05rem; translate: -50% 0; }
}
@media (prefers-reduced-motion: reduce) { .story-stage .story-foes img { transition: none; } }
/* the Story page's "Where next": the Adventure modes it has opened, each in its mode's colour */
.mode-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: .6rem; margin: 1.2rem 0; }
.mode-next-h { grid-column: 1 / -1; margin: 0; font: 400 1.05rem/1.2 var(--display); color: var(--gold); }
.mode-next-tile { --mode: var(--gold); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: center; padding: .75rem .9rem;
  border-radius: var(--radius-ui); border: 2px solid var(--night-3); border-top: 4px solid var(--mode); background: var(--night-2); color: var(--paper);
  text-decoration: none; transition: translate .15s, border-color .15s; }
.mode-next-tile:hover { translate: 0 -2px; border-color: var(--mode); }
.mode-next-tile[data-mode="au"] { --mode: #5FF2E4; } .mode-next-tile[data-mode="carryme"] { --mode: #FF9FD2; }
.mode-next-tile[data-mode="overheaven"] { --mode: #BDE7FF; } .mode-next-tile[data-mode="requiem"] { --mode: #FF4D6D; }
.mode-next-tile > span { grid-row: span 2; font-size: 1.6rem; }
.mode-next-tile strong { color: var(--mode); }
.mode-next-tile small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .mode-next-tile { transition: none; } }
@media (min-width: 761px) { .mode-hero { padding-right: 6.6rem !important; } .mode-mark { right: 1.4rem; } }  /* the word gets its own column */
/* the changelog's version selector */
.cl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 1.2rem 0 1rem; }
.cl-pick label { font-weight: 700; color: var(--muted); }
.cl-pick select { flex: 1 1 220px; max-width: 420px; min-height: 42px; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .35rem .6rem; }
.cl-step { display: flex; gap: .4rem; margin-left: auto; }
.changelog .cl-entry + .cl-entry { margin-top: 1.4rem; }

/* ===================================================================================
   Team page in tabs: Team · Collection · Presets · Today (app.js). Manga tabs, one panel at a time once the script
   runs (every panel shows without it), and the collection's compact list view.
   =================================================================================== */
[data-tab-page].tabs-on [data-tab-panel]:not(.on) { display: none; }
.page-tabs { display: flex; gap: .45rem; margin: 0 0 1.2rem; padding: .3rem .1rem .55rem; overflow-x: auto; scrollbar-width: none;
  border-bottom: 3px solid var(--ink); }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.15rem;
  border: 3px solid var(--ink); border-radius: 12px 12px 4px 4px; background: var(--night-2); color: var(--paper-2);
  font: 400 1rem/1 var(--display); text-decoration: none; transform: skewX(-6deg); transition: translate .12s, background .12s; }
.page-tabs a > * { transform: skewX(6deg); }
.page-tabs a:hover { translate: 0 -2px; color: var(--paper); }
.page-tabs a small { padding: .1rem .45rem; border-radius: 999px; background: var(--night); color: var(--muted); font: 700 .72rem var(--body); }
.page-tabs a[aria-selected="true"] { background: var(--gold); color: var(--ink); box-shadow: 4px 4px 0 var(--magenta); translate: 0 -3px; }
.page-tabs a[aria-selected="true"] small { background: var(--ink); color: var(--gold); }
.page-tabs a:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.page-tabs .nav-dot { position: absolute; top: -5px; right: -5px; }
[data-tab-panel] { animation: wts-in .25s ease-out; }
#tab-presets .presets { margin-top: 0; }
@media (max-width: 640px) {
  /* four equal tabs that always fit; the filter chips scroll sideways, one row each, so the stands come sooner */
  .page-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .3rem; overflow: visible; }
  .page-tabs a { justify-content: center; padding: .55rem .2rem; font-size: .8rem; transform: none; border-radius: 10px 10px 4px 4px; }
  .page-tabs a > * { transform: none; }
  .page-tabs a > span, .page-tabs a small { display: none; }
  .gang-page-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* up to 7 tabs: two rows, never squeezed */
  .storage-tools .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; }
  .storage-tools .filter-row::-webkit-scrollbar { display: none; }
  .storage-tools .filter-chip { flex: none; }
}
@media (prefers-reduced-motion: reduce) { [data-tab-panel] { animation: none; } .page-tabs a { transition: none; } }

/* the collection's view, filters and list rows */
.view-pick { display: flex; gap: .3rem; }
.slot-row { display: none; }
.collection-grid.list { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.collection-grid.list .stand-slot > .card, .collection-grid.list .stand-slot > a.card { display: none; }
.collection-grid.list .slot-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; align-items: center; gap: .3rem .8rem;
  padding: .4rem .7rem .4rem .45rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3);
  border-left: 5px solid var(--edge, var(--night-3)); }
.collection-grid.list .stand-slot:hover .slot-row { border-color: var(--gold); border-left-color: var(--edge, var(--gold)); }
.slot-row.rar-rare { --edge: var(--violet); } .slot-row.rar-epic { --edge: var(--gold); }
.slot-row.rar-legend { --edge: var(--magenta); } .slot-row.rar-mythic { --edge: var(--teal); }
.slot-row img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; object-position: center 25%; background: var(--night); }
.slot-row-name { display: grid; min-width: 0; }
.slot-row-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-row-name small { color: var(--muted); font-size: .74rem; }
.slot-row-lv { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.slot-row-lv em { font-style: normal; color: var(--gold); }
.slot-row-pw { min-width: 3.5rem; text-align: right; font: 400 .9rem var(--display); color: var(--gold); }
.slot-row-pw::before { content: "⚡"; font-family: var(--body); margin-right: .15rem; }
.slot-row-tags { display: flex; gap: .25rem; min-width: 3.2rem; justify-content: flex-end; font-size: .85rem; }
.slot-row-tags em { font-style: normal; font-weight: 700; color: var(--teal); }
.collection-grid.list .pick-box { top: 50%; left: auto; right: .6rem; translate: 0 -50%; }
.selecting .collection-grid.list .slot-row { padding-right: 2.6rem; }
.collection-grid.list .stand-slot:has(.pick-box:checked) .slot-row { border-color: var(--magenta); background: color-mix(in srgb, var(--magenta) 14%, var(--night-2)); }
@media (max-width: 520px) {
  .collection-grid.list .slot-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .slot-row img { width: 40px; height: 40px; }
  .slot-row-pw { display: none; }
  .slot-row-tags { grid-column: 3; grid-row: 2; min-width: 0; }
  .slot-row-lv { grid-column: 3; grid-row: 1; }
}

/* the Gang Cup strip: your gang's match today, under the top bar (a trophy-gold sibling of the event strip) */
.cup-strip { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .9rem; margin: 0 auto; max-width: 1200px;
  padding: .5rem 2.6rem .5rem 1rem; color: var(--paper); text-decoration: none; border-bottom: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgb(244 197 66 / .08) 0 12px, transparent 12px 24px),
    linear-gradient(100deg, #3B2208, var(--night-2) 45%, #3B2208); }
.cup-strip[hidden] { display: none; }
body.has-side .cup-strip { max-width: none; }
.cup-strip-tag { padding: .12rem .55rem; border-radius: 6px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink);
  font: 400 .78rem var(--display); rotate: -3deg; white-space: nowrap; }
.cup-strip-text { flex: 1 1 280px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; }
.cup-strip-text strong { font: 400 1rem var(--display); }
.cup-strip-text em { font-style: normal; font-weight: 700; color: var(--gold); }
.cup-vs { padding: 0 .35rem; border-radius: 4px; background: var(--magenta); font: 400 .7rem/1.5 var(--display); rotate: -6deg; }
.cup-strip-text small { flex-basis: 100%; color: var(--muted); font-size: .72rem; }
.cup-strip-go { padding: .3rem .8rem; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: .82rem;
  white-space: nowrap; animation: event-tag-pulse 1.8s ease-in-out infinite; }
.cup-strip.done .cup-strip-go { background: var(--night-3); color: var(--paper-2); animation: none; }
.cup-strip:hover .cup-strip-go { background: var(--paper); }
@media (max-width: 640px) { .cup-strip { padding: .5rem 2.4rem .5rem .7rem; } .cup-strip-text { flex-basis: 100%; order: 3; } }
@media (prefers-reduced-motion: reduce) { .cup-strip-go { animation: none; } }

/* ===================================================================================
   Stand Dex as a sticker album: a completion ring in the header, the sets ready to claim first, the rarity sets as
   medals, the crew sets as cards (owned in colour, missing as silhouettes) that open to their whole set
   =================================================================================== */
.mode-hero[data-mode="dex"] { --mode: #F4C542; --mode-2: #D6246E; }
.dex-ring { --p: 0; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(closest-side, var(--night) 72%, transparent 73%),
    conic-gradient(var(--gold) calc(var(--p) * 1%), var(--night-3) 0); box-shadow: 3px 3px 0 var(--ink); }
.dex-ring strong { font: 400 1.5rem/1 var(--display); color: var(--gold); }
.dex-ring small { font-size: .6em; }
.dex-figs { display: flex; gap: .5rem; margin: 0; }
.dex-figs div { display: grid; justify-items: center; padding: .45rem .9rem; border-radius: var(--radius-ui); background: rgb(18 8 30 / .7);
  border: 2px solid color-mix(in srgb, var(--mode) 45%, var(--night-3)); }
.dex-figs dt { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.dex-figs dd { margin: 0; font: 400 1.4rem/1.15 var(--display); color: var(--mode); }
.dex-figs dd small { font-size: .55em; color: var(--muted); }
.dex-h { margin: 1.6rem 0 .7rem; }
/* ready to claim */
.dex-ready { margin: 1rem 0 0; padding: .9rem 1rem; border-radius: var(--radius-card); border: 3px solid var(--ink);
  background: repeating-linear-gradient(-45deg, rgb(244 197 66 / .1) 0 12px, transparent 12px 24px), color-mix(in srgb, var(--gold) 14%, var(--night-2));
  box-shadow: 0 0 0 2px var(--gold), 5px 5px 0 var(--night-3); }
.dex-ready .h3 { margin: 0 0 .5rem; color: var(--gold); }
.dex-ready ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .5rem; }
.dex-ready li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .6rem;
  border-radius: var(--radius-ui); background: var(--night); }
.dex-ready li > span:nth-child(2) { display: grid; min-width: 0; }
.dex-ready small { color: var(--muted); font-size: .74rem; }
.dex-claim { margin: 0; }
.dex-done { margin: 0; color: #7FE3D9; font-weight: 700; font-size: .85rem; }
/* rarity medals */
.dex-medals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; }
.dex-medal { --c: var(--muted); --p: 0; display: grid; justify-items: center; align-content: start; gap: .3rem; padding: .9rem .6rem;
  text-align: center; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.dex-medal.rar-rare { --c: var(--violet); } .dex-medal.rar-epic { --c: var(--gold); } .dex-medal.rar-legend { --c: var(--magenta); }
.dex-medal.rar-mythic { --c: var(--teal); }
.dex-medal.complete:not(.claimed) { border-color: var(--gold); box-shadow: 0 0 18px rgb(244 197 66 / .3); }
.dex-medal-ring { display: grid; place-content: center; justify-items: center; width: 96px; height: 96px; border-radius: 50%; text-decoration: none;
  color: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: translate .15s;
  background: radial-gradient(closest-side, var(--night) 70%, transparent 71%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--night-3) 0); }
.dex-medal-ring:hover { translate: 0 -3px; }
.dex-medal-ring b { font: 400 1.35rem/1 var(--display); color: var(--c); }
.dex-medal-ring small { font-weight: 700; font-size: .78rem; }
.dex-medal.claimed .dex-medal-ring { box-shadow: 0 0 0 3px #7FE3D9, 3px 3px 0 var(--ink); }
.dex-medal-title { margin: .2rem 0 0; font-weight: 700; font-size: .85rem; }
.dex-medal-reward { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.35; }
.dex-rarity-set { margin-top: .7rem; }
.dex-page.js-on .dex-rarity-set:not([open]) { display: none; }
/* the album */
.dex-tools { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-bottom: .8rem; }
.dex-tools[hidden] { display: none; }
.dex-tools input { flex: 1 1 220px; max-width: 360px; min-height: 42px; font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-ui); padding: .35rem .7rem; }
.dex-album { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .7rem; }
.dex-card[hidden] { display: none; }
.dex-card:has(details[open]) { grid-column: 1 / -1; }
.dex-card details, details.dex-card { border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.dex-card.complete:not(.claimed) details { border-color: var(--gold); box-shadow: 0 0 18px rgb(244 197 66 / .25); }
.dex-card.claimed details { border-color: rgb(43 179 168 / .55); }
.dex-card summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "badge name count" "faces faces faces" "meter meter meter"; gap: .45rem .7rem; align-items: center; padding: .8rem .9rem; }
.dex-card summary::-webkit-details-marker { display: none; }
.dex-card summary:hover { background: color-mix(in srgb, var(--gold) 5%, transparent); border-radius: var(--radius-card); }
.dex-badge { grid-area: badge; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .3rem; border-radius: 10px;
  background: var(--night-3); font-size: 1.25rem; }
.dex-badge.rar-tag { font: 700 .85rem/1 var(--body); }
.dex-card-name { grid-area: name; display: grid; min-width: 0; }
.dex-card-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dex-card-name small { color: var(--muted); font-size: .74rem; }
.dex-card.complete:not(.claimed) .dex-card-name small { color: var(--gold); font-weight: 700; }
.dex-card.claimed .dex-card-name small { color: #7FE3D9; }
.dex-count { grid-area: count; font: 400 1.15rem/1 var(--display); font-variant-numeric: tabular-nums; }
.dex-count small { font-size: .65em; color: var(--muted); }
.dex-faces { grid-area: faces; display: flex; align-items: center; gap: .25rem; min-width: 0; }
.dex-faces em { font-style: normal; font-size: .75rem; font-weight: 700; color: var(--muted); margin-left: .15rem; }
.dex-meter { grid-area: meter; height: 6px; margin: 0; }
.dex-card.claimed .dex-meter i { background: var(--teal); }
.dex-face { display: block; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--night-3); background: var(--night); line-height: 0; }
.dex-face img { object-fit: cover; object-position: center 25%; }
.dex-face.have { border-color: var(--gold); }
.dex-face.missing img { filter: brightness(0); opacity: .5; }  /* a silhouette (no drop-shadow: a blur redrawn every frame) */
.dex-faces .dex-face img { width: 30px; height: 30px; }
.dex-body { padding: 0 1rem 1rem; }
.dex-reward { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .7rem; font-size: .9rem; }
.dex-reward strong { color: var(--gold); }
.dex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .6rem .4rem; }
.dex-grid li { display: grid; justify-items: center; gap: .25rem; text-align: center; }
.dex-grid .dex-face { border-radius: 14px; border-width: 3px; }
.dex-grid .dex-face img { width: 64px; height: 64px; }
.dex-grid .dex-face:hover { translate: 0 -2px; }
.dex-grid span { font-size: .7rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dex-grid .missing span { color: var(--muted); }
@media (max-width: 900px) { .dex-medals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .mode-hero[data-mode="dex"] .dex-ring { width: 64px; height: 64px; align-self: start; }
  .mode-hero[data-mode="dex"] .dex-ring strong { font-size: 1.1rem; }
  .dex-figs { grid-column: 1 / -1; } .dex-figs div { flex: 1; }
}
@media (max-width: 520px) {
  .dex-medals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .dex-medal-ring { width: 76px; height: 76px; }
  /* crew cards two a row: badge, name and count, the bar; the portraits wait inside the opened card */
  .dex-album { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .dex-card summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge count" "name name" "meter meter";
    gap: .35rem .5rem; padding: .6rem .65rem; }
  .dex-card .dex-faces { display: none; }
  .dex-card .dex-badge { min-width: 32px; height: 32px; font-size: 1rem; }
  .dex-count { justify-self: end; }
  .dex-card-name strong { font-size: .88rem; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dex-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  .dex-grid .dex-face img { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .dex-medal-ring { transition: none; } }

/* the gear pages (Items, Stand chips, Reforge): one colour, and a switcher between them */
.mode-hero[data-mode="gear"] { --mode: #3AB4F2; --mode-2: #1B5E8C; }
.gear-nav { display: flex; gap: .4rem; margin: -.4rem 0 1rem; flex-wrap: wrap; }
.gear-nav a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 999px; border: 2px solid var(--night-3);
  background: var(--night-2); color: var(--paper-2); font-weight: 700; font-size: .85rem; text-decoration: none; }
.gear-nav a:hover { border-color: var(--sky); color: var(--paper); }
.gear-nav a[aria-current="page"] { background: var(--sky); border-color: var(--ink); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.gear-more { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
.items-page .page-tabs { margin-top: .2rem; }

/* a stand's page: its actions, and what players do with it */
.stand-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.2rem; }
.stand-played { display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0 .6rem; }
.stand-played div { display: grid; padding: .5rem .9rem; border-radius: var(--radius-ui); background: var(--night-2); border: 2px solid var(--night-3); }
.stand-played dt { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.stand-played dd { margin: 0; font: 400 1.4rem/1.15 var(--display); color: var(--gold); }
.stand-played dd small { display: block; font: 700 .7rem var(--body); color: var(--muted); }
.stand-gear { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.stand-gear .pill small { color: var(--muted); }
.mode-hero[data-mode="pvp"] { --mode: #3AB4F2; --mode-2: #D6246E; }
.season-card { display: grid; gap: .15rem; }
.season-tier { font: 400 1rem/1.2 var(--display); color: var(--paper); }
.season-card small { color: var(--muted); font-size: .74rem; }
/* achievements: the three closest to done, pinned */
.ach-near { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--radius-card); border: 2px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 9%, var(--night-2)); }
.ach-near .h3 { margin: 0 0 .5rem; color: var(--gold); }
.ach-near ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .5rem; }
.ach-near li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: var(--radius-ui); background: var(--night); }
.ach-near li > span:last-child { display: grid; gap: .2rem; min-width: 0; }
.ach-near small { color: var(--muted); font-size: .74rem; }
.ach-near .meter { height: 6px; margin: 0; }
/* the cosmetics shop: profile themes as swatches */
.theme-shop { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .6rem; }
.theme-card { display: grid; gap: .45rem; justify-items: start; padding: .7rem; border-radius: var(--radius-card); border: 2px solid var(--night-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, var(--night-2)), var(--night-2) 70%); }
.theme-card.owned { border-color: var(--c1); }
.shop-swatch { display: flex; width: 100%; height: 42px; border-radius: 10px; overflow: hidden; border: 2px solid var(--ink); }
.shop-swatch i { flex: 1; } .shop-swatch i:nth-child(1) { background: var(--c1); } .shop-swatch i:nth-child(2) { background: var(--c2); }
.shop-swatch i:nth-child(3) { background: var(--c3); }
/* the gang level, in the gang's hero */
.gang-level { margin-top: .6rem; max-width: 520px; }
.gang-level summary { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "badge meter" "badge text"; gap: .1rem .6rem;
  align-items: center; cursor: pointer; list-style: none; }
.gang-level summary::-webkit-details-marker { display: none; }
.gang-level-badge { grid-area: badge; padding: .35rem .6rem; border-radius: 10px; border: 2px solid var(--ink); background: var(--gold); color: var(--ink);
  font: 400 1rem var(--display); box-shadow: 2px 2px 0 var(--ink); }
.gang-level .meter { grid-area: meter; height: 8px; margin: 0; }
.gang-level summary small { grid-area: text; color: var(--muted); font-size: .76rem; }
.gang-level-rows { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .82rem; }
.gang-level-rows li { display: flex; gap: .5rem; align-items: baseline; color: var(--muted); }
.gang-level-rows li.on { color: var(--paper); } .gang-level-rows li.on b { color: var(--gold); }

/* ===================================================================================
   PERFORMANCE · calm when idle (app.js): after a few seconds without input, the decorative loops (menacing letters,
   pulsing dots, rays, bobbing cards, flowing strips) pause; the next move, scroll or key starts them again. Every
   running loop kept the browser drawing frames and recompositing the screen, ~40% of a slow CPU on an idle page.
   What tells the player something keeps running: loading spinners, fights, the summon reveal, dialogs, toasts.
   =================================================================================== */
html.calm *, html.calm *::before, html.calm *::after { animation-play-state: paused !important; }
html.calm :is(.spinner, .htmx-request, .htmx-request *, #fight, #fight *, .pull-batch, .pull-batch *, .cine, .cine *, .summon, .summon *, .stand-reveal,
  .stand-reveal *, .toast-pop, dialog[open], dialog[open] *),
html.calm :is(#fight, .pull-batch, .cine, .summon, .stand-reveal, dialog[open]) :is(*::before, *::after) { animation-play-state: running !important; }

/* PERFORMANCE · long lists: items far below the screen skip layout and painting until they're scrolled near
   (content-visibility; Chrome, Edge, Firefox 125+, Safari 18+). The size hint keeps the scrollbar steady. */
.grid > .card, .grid > .look-cell, .collection-grid > .stand-slot, .dex-album > .dex-card, .achievements > li, .theme-shop > li,
.stand-grid > *, .auction-list > li, .ladder > li {
  content-visibility: auto; contain-intrinsic-size: auto 320px;
}
.collection-grid.list > .stand-slot, .achievements > li, .dex-album > .dex-card { contain-intrinsic-size: auto 120px; }

/* The trainer builder (trainer.html): the look walks on a patch of grass, turns on a stand, and the parts sit beside it */
.trainer-head { display: grid; gap: .3rem; margin-bottom: 1.2rem; max-width: 62ch; }
.trainer-head p, .trainer-head h1 { margin: 0; }
.trainer-builder { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.trainer-stage { position: sticky; top: 5rem; display: grid; gap: .8rem; justify-items: center; padding: 1rem; border-radius: var(--radius-card);
  background: var(--night-2); border: 2px solid var(--night-3); }
.trainer-field { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-ui); border: 3px solid var(--ink);
  background: radial-gradient(ellipse 15% 5% at 50% 79%, rgb(0 0 0 / .22) 96%, transparent),
    repeating-linear-gradient(0deg, #70B060 0 8px, #78B868 8px 16px), #70B060; }
.trainer-field .trainer-sprite { width: 34%; }
.trainer-turn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; width: 100%; }
.trainer-turn li { display: grid; gap: .2rem; justify-items: center; padding: .4rem; border-radius: var(--radius-ui); background: var(--night-3); }
.trainer-turn .trainer-sprite { width: 48px; }
.trainer-turn small { color: var(--muted); font-size: .7rem; }
.trainer-buy { display: grid; gap: .4rem; width: 100%; }
.trainer-buy:empty { display: none; }
.trainer-stage > .btn { width: 100%; }
.trainer-stage .small-print { margin: 0; }
.trainer-parts { display: grid; gap: .8rem; min-width: 0; }
.trainer-slot { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .7rem .8rem .8rem; border-radius: var(--radius-card); border: 2px solid var(--night-3); background: var(--night-2); }
.trainer-slot legend { padding: 0 .3rem; font: 700 .76rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.trainer-opt { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--night-3); background: var(--night); font-size: .85rem; }
.trainer-opt input { position: absolute; opacity: 0; pointer-events: none; }
.trainer-opt small { color: var(--gold); font-size: .72rem; }
.trainer-opt.locked span { opacity: .8; }
.trainer-opt:has(input:checked) { border-color: var(--gold); background: var(--night-3); box-shadow: 2px 2px 0 var(--ink); }
.trainer-opt:has(input:focus-visible) { outline: 2px solid var(--sky); outline-offset: 2px; }
.trainer-slot.swatches .trainer-opt { padding: 3px; }
.trainer-opt i { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--sw); border: 2px solid var(--ink); }
@media (max-width: 760px) {
  .trainer-builder { grid-template-columns: minmax(0, 1fr); }
  .trainer-stage { position: static; }
}

/* the wardrobe in the shop: each part on the default trainer */
.trainer-shop { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.trainer-shop li { display: grid; gap: .35rem; justify-items: center; text-align: center; padding: .7rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.trainer-shop li.owned { border-color: var(--teal); }
.trainer-shop .trainer-sprite { width: 64px; }
.trainer-shop strong { font-size: .85rem; }

/* the trainer on the team page's header and in a profile's facts */
.trainer-card { display: flex; align-items: center; gap: .6rem; padding: .35rem .8rem .35rem .45rem; border-radius: var(--radius-card); text-decoration: none; color: inherit;
  background: repeating-linear-gradient(0deg, #70B060 0 6px, #78B868 6px 12px); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.trainer-card .trainer-sprite { width: 40px; }
.trainer-card > span:last-child { display: grid; padding: .2rem .5rem; border-radius: var(--radius-ui); background: rgb(14 7 24 / .82); }
.trainer-card strong { font-size: .85rem; }
.trainer-card small { color: var(--gold); font-size: .72rem; }
.trainer-card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.file-trainer dd { display: flex; align-items: center; gap: .5rem; }
.file-trainer .trainer-sprite { width: 28px; }

/* gangs: how players join (boss settings) and the applications a capo answers */
.gang-join-mode fieldset { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; }
.gang-join-mode legend { margin-bottom: .3rem; font-weight: 700; }
.gang-join-mode .join-mode { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .7rem; border-radius: var(--radius-ui); border: 2px solid var(--night-3); cursor: pointer; }
.gang-join-mode .join-mode:has(input:checked) { border-color: var(--gold); background: var(--night-3); }
.gang-join-mode .join-mode span { display: grid; gap: .1rem; }
.gang-applications { margin-top: 1rem; }
.gang-applications h3 { margin: 0 0 .4rem; }

/* the fight's stats table: every stand right now, changes since the start in green or red */
.fight-stats { margin: 1rem 0; padding: .6rem .9rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.fight-stats summary { cursor: pointer; font-weight: 700; color: var(--gold); }
.fight-stats table { width: 100%; margin-top: .7rem; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.fight-stats caption { text-align: left; font-weight: 700; padding-bottom: .3rem; }
.fight-stats th, .fight-stats td { padding: .3rem .5rem; text-align: right; border-bottom: 1px solid var(--night-3); white-space: nowrap; }
.fight-stats th[scope="row"], .fight-stats thead th:first-child { text-align: left; white-space: normal; }
.fight-stats tr.down { opacity: .45; }
.fight-stats small.up { color: var(--teal); }
.fight-stats small.down { color: #FF665C; }
@media (max-width: 640px) {
  .fight-stats { overflow-x: auto; }
  .fight-stats table { font-size: .74rem; }
  .fight-stats th, .fight-stats td { padding: .25rem .35rem; }
  .fight-stats th[scope="row"] { white-space: nowrap; }
}

/* the dungeon's landing: today's nine floors, band by band, with heaven's rules on the deepest */
.delve-depths { margin-top: 1.4rem; }
.delve-depths > p { margin: .2rem 0 .9rem; }
.depth-bands { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.depth-band { padding: .8rem 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); border-left-width: 6px; }
.depth-band.band-delve { border-left-color: var(--teal); }
.depth-band.band-requiem { border-left-color: var(--magenta); }
.depth-band.band-heaven { border-left-color: var(--gold); background: linear-gradient(120deg, rgb(244 197 66 / .08), transparent 60%), var(--night-2); }
.depth-band h3 { margin: 0; }
.depth-band > p { margin: .2rem 0 .6rem; }
.depth-floors { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.depth-floors li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .4rem .6rem; border-radius: var(--radius-ui); background: var(--night); }
.depth-floors b { min-width: 3.2rem; font-family: var(--display); }
.depth-meta { color: var(--muted); font-size: .85rem; }
.depth-rule { flex-basis: 100%; font-size: .85rem; }
.depth-rule.boss { color: var(--gold); }

/* admin: the build optimizer's form, and a stand's trait editor */
.adm-optimizer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.adm-optimizer label { display: grid; gap: .2rem; font-size: .85rem; }
.adm-optimizer input[type="number"] { width: 5.5rem; }
.adm-traits summary { cursor: pointer; font-size: .8rem; color: var(--muted); }
.adm-traits form { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .3rem; }
.adm-trait { display: inline-flex; gap: .2rem; }

@-moz-document url-prefix() {
  .topbar, .dock { backdrop-filter: none; background: var(--night-2); }
  :is(.player-bar, .summon-hero, .pz-hero, .cm-hero, .raid-hero, .gang-hero, .event-hero, .social-panel, .pz-panel, .admin-card, .story-stage, .action-tile, .gang-hub, .push-card)::after {
    display: none;
  }
  @keyframes hurt {
    0%, 100% { transform: none; }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
  }
  @keyframes hurt-crit {
    0%, 100% { transform: none; }
    15% { transform: translateX(-12px) rotate(-3deg) scale(.95); }
    35% { transform: translateX(10px) rotate(2deg); }
    55% { transform: translateX(-7px); }
    75% { transform: translateX(4px); }
  }
  @keyframes sr-slam {
    from { transform: scale(2.6) rotate(-4deg); opacity: 0; }
    60% { transform: scale(.95) rotate(1deg); opacity: 1; }
  }
  .dmg-pop.crit3, .turn-banner.play.crit3 {
    animation: pop 1.2s ease-out forwards;
    filter: drop-shadow(2px 2px 0 #14102A);
  }
}

/* Test lab (lab/index.html) and Rogue rush (lab/rogue_body.html): one Isaac-style room on screen, the HUD and the
   minimap laid over it, the enemies standing in the middle, and the new room sliding in from the door you took. */
.lab-list { list-style: none; display: grid; gap: .8rem; margin: 1rem 0 0; padding: 0; }
.lab-card { display: grid; gap: .3rem; padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); color: inherit; text-decoration: none; }
.lab-card:hover { border-color: var(--gold); }
.rogue-stage { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-card); }
.rogue-stage .walk-map { width: 100%; }
.rogue-stage.slide-u .walk-board { animation: rogue-in-u .28s ease-out; }
.rogue-stage.slide-d .walk-board { animation: rogue-in-d .28s ease-out; }
.rogue-stage.slide-l .walk-board { animation: rogue-in-l .28s ease-out; }
.rogue-stage.slide-r .walk-board { animation: rogue-in-r .28s ease-out; }
@keyframes rogue-in-u { from { translate: 0 -40%; opacity: .2; } }
@keyframes rogue-in-d { from { translate: 0 40%; opacity: .2; } }
@keyframes rogue-in-l { from { translate: -40% 0; opacity: .2; } }
@keyframes rogue-in-r { from { translate: 40% 0; opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .rogue-stage .walk-board { animation: none !important; } }
.walk-tile.event-door { box-shadow: inset 0 0 0 100vmax #05020A; }
.walk-tile.event-door .walk-mark { display: none; }
.walk-tile.event-trapdoor { box-shadow: inset 0 0 0 100vmax #05020A; }
.rogue-foes { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 4px; pointer-events: none; }
.rogue-foes img { width: clamp(28px, 7vw, 56px); height: auto; aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--ink); object-fit: cover; background: var(--night-3); box-shadow: 2px 2px 0 var(--ink); }
.rogue-minimap { position: absolute; right: 18px; top: 18px; display: grid; grid-template-columns: repeat(var(--cols), 16px); grid-auto-rows: 11px; gap: 2px;
  padding: 4px; border-radius: 6px; background: rgb(5 2 10 / .75); pointer-events: none; }
.mm-room { display: grid; place-items: center; font: 700 8px/1 var(--body); color: var(--ink); background: #3A2A4E; border-radius: 2px; }
.mm-room.seen { background: #9A8BB0; }
.mm-room.here { background: var(--paper); }
.mm-room.kind-boss:not(.seen) { background: #6B1F45; color: var(--paper); }
.walk-tile.event-bossdoor { box-shadow: inset 0 0 0 100vmax #3A0B22; }
/* the shop window (lab/rogue_body.html): over the page, the shopkeeper and each stand's ware in their sprites */
.rogue-shop-pop { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 16px; background: rgb(5 2 10 / .6); }
.rogue-shop-window { display: grid; gap: .8rem; width: min(100%, 440px); max-height: 100%; overflow: auto; padding: 1rem;
  border-radius: var(--radius-card); border: 3px solid var(--ink); background: var(--night-2); box-shadow: 4px 4px 0 var(--gold); }
.rogue-shop-window:focus { outline: none; }
.rogue-shop-head { display: flex; align-items: center; gap: .8rem; }
.rogue-shop-head .mark-sprite { width: 64px; flex: none; }
.rogue-shop-head p { margin: .2rem 0 0; }
.rogue-wares { list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
.rogue-wares li { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); }
.rogue-wares li.sold { opacity: .5; }
.rogue-wares .mark-sprite { width: 44px; flex: none; }
.rogue-ware { display: grid; flex: 1; min-width: 0; }
.rogue-wares form { margin: 0; }
.rogue-wares .btn { min-height: 44px; }
/* the Devil's Palm window: who the new stand replaces; the team window: give an item to another stand */
.rogue-replace { display: grid; gap: .4rem; margin: 0 0 .8rem; padding: 0; border: 0; min-width: 0; }
.rogue-replace legend { font-weight: 700; margin-bottom: .4rem; }
.rogue-replace label { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .4rem .6rem; cursor: pointer;
  border-radius: var(--radius-ui); background: var(--night); border: 2px solid var(--night-3); }
.rogue-replace label:has(:checked) { border-color: var(--gold); }
.rogue-ware form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .3rem; }
.rogue-ware form > span { flex: 1 0 100%; }
.rogue-ware form > span, .rogue-item, .rogue-replace label > span, .rogue-newcomer > span { display: grid; gap: .1rem; min-width: 0; }
.rogue-newcomer { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: var(--radius-ui);
  background: var(--night); border: 2px solid var(--gold); }
.rogue-newcomer img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: var(--radius-ui); }
.rogue-newcomer strong { font-size: 1.15rem; }
.rogue-ware select { flex: 1; min-width: 0; min-height: 44px; }
.rogue-foes.boss img { width: clamp(36px, 9vw, 72px); border-color: var(--magenta); }
.mm-room.kind-boss { background: #6B1F45; color: var(--paper); }
.mm-room.kind-boss.here { background: var(--paper); color: var(--ink); }
.rogue-draft { display: grid; gap: .8rem; margin-top: 1rem; }
.rogue-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.rogue-pick { display: grid; gap: .3rem; width: 100%; padding: .6rem; border-radius: var(--radius-card); border: 2px solid var(--night-3);
  background: var(--night-2); color: inherit; text-align: center; cursor: pointer; }
.rogue-pick:hover, .rogue-pick:focus-visible { border-color: var(--gold); }
.rogue-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.rogue-pick.rarity-SSR { border-color: #B98CFF; } .rogue-pick.rarity-UR { border-color: var(--gold); } .rogue-pick.rarity-LR { border-color: var(--magenta); }

/* Rogue rush's floors (rogue.FLOOR_THEMES, scripts/make_tiles.py rogue): one tile sheet a part of the story, floor 3
   (DIO's mansion) the default; enemy crews stand in the room as a Stand User (a random builder look) under their stands */
.rogue-stage .walk-tile { background-image: url("../img/mansion-tiles.png"); }
.rogue-stage.floor-1 .walk-tile { background-image: url("../img/castle-tiles.png"); }
.rogue-stage.floor-2 .walk-tile { background-image: url("../img/island-tiles.png"); }
.rogue-stage.floor-4 .walk-tile { background-image: url("../img/morioh-tiles.png"); }
.rogue-stage.floor-5 .walk-tile { background-image: url("../img/colosseum-tiles.png"); }
.rogue-stage.floor-6 .walk-tile { background-image: url("../img/prison-tiles.png"); }
.rogue-stage.floor-7 .walk-tile { background-image: url("../img/desert-tiles.png"); }
.rogue-stage.floor-8 .walk-tile { background-image: url("../img/walleyes-tiles.png"); }
/* A new floor's title card: black over the swap, the part and the place, then it fades onto the floor */
.rogue-card { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; gap: .6rem; padding: 16px;
  text-align: center; background: #05020A; animation: rogue-card 3.4s ease-in forwards; }
.rogue-card .kicker { margin: 0; animation: rogue-card-in 3.4s ease-out both; }
.rogue-card h2 { margin: 0; font-size: clamp(2rem, 8vw, 4.5rem); color: var(--gold); animation: rogue-card-in 3.4s ease-out .25s both; }
@keyframes rogue-card { 0%, 72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes rogue-card-in { 0% { opacity: 0; translate: 0 14px; } 22%, 100% { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .rogue-card { animation-duration: 2s; }
  .rogue-card .kicker, .rogue-card h2 { animation: none; }
}
.rogue-stage .walk-tile.fog { background: #0B0610; }
.rogue-stage .walk-map, .rogue-stage .walk-board { background: #0B0610; }
.rogue-foes { flex-direction: column; align-items: center; gap: 2px; }
.rogue-foe-stands { display: flex; gap: 3px; }
.rogue-foe-stands img { width: clamp(20px, 4.5vw, 40px); }
.rogue-foe-user { display: block; width: clamp(28px, 7vw, 54px); filter: drop-shadow(0 3px 0 rgb(0 0 0 / .45)); }
.rogue-foes.boss .rogue-foe-user { width: clamp(40px, 10vw, 80px); filter: drop-shadow(0 0 6px var(--magenta)); }
.rogue-foes.boss .rogue-foe-stands img { width: clamp(24px, 6vw, 52px); }
.rogue-pips { display: flex; gap: 3px; }
.rogue-pips i { width: 12px; height: 12px; border-radius: 3px; background: var(--night-3); }
.rogue-pips i.on { background: var(--gold); }

/* The site's own dialog (app.js siteDialog): confirms, alerts and copy boxes instead of the browser's pop-ups */
.site-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 3px solid var(--ink); border-radius: var(--radius-card);
  background: var(--night-2); color: var(--paper); box-shadow: 6px 6px 0 var(--night-3); }
.site-dialog::backdrop { background: rgb(10 4 20 / .65); }
.site-dialog form { display: grid; gap: 1rem; padding: 1.2rem 1.2rem 1rem; }
.site-dialog p { margin: 0; font-size: var(--step-0); line-height: 1.5; white-space: pre-line; }
.site-dialog-copy { width: 100%; padding: .5rem .6rem; border-radius: 8px; border: 2px solid var(--night-3); background: var(--night); color: inherit; font: inherit; }
.site-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }
.site-dialog .btn.danger { background: #E05A6E; color: var(--paper); }
.site-dialog[open] { animation: site-dialog-in .16s ease-out; }
@keyframes site-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .site-dialog[open] { animation: none; } }
/* 3 defeats in a row (partials/fight.html): four ways to get stronger */
.stuck-pop { width: min(440px, calc(100vw - 32px)); padding: 1.2rem; border: 3px solid var(--ink); border-radius: var(--radius-card);
  background: var(--night-2); color: var(--paper); box-shadow: 6px 6px 0 var(--night-3); }
.stuck-pop::backdrop { background: rgb(10 4 20 / .65); }
.stuck-pop h2 { margin: 0 0 .3rem; }
.stuck-pop > p { margin: 0 0 .9rem; }
.stuck-ways { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.stuck-ways li { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .8rem; border: 2px solid var(--night-3); border-radius: 10px; background: var(--night); }
.stuck-ways b { flex: none; width: 2rem; text-align: center; font-size: 1.3rem; }
.stuck-ways li > span { display: grid; gap: .15rem; min-width: 0; }
.stuck-ways small { color: var(--muted); }
.stuck-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.stuck-links a { padding: .3rem .65rem; min-height: 2rem; display: inline-flex; align-items: center; border: 2px solid var(--night-3); border-radius: 999px;
  background: var(--night-2); color: var(--paper); text-decoration: none; font-size: var(--step--1); font-weight: 700; }
.stuck-links a:hover, .stuck-links a:focus-visible { border-color: var(--gold); color: var(--gold); }
.stuck-pop[open] { animation: site-dialog-in .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .stuck-pop[open] { animation: none; } }

.player-suggest li { display: flex; align-items: center; gap: .45rem; }
.player-suggest img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.player-suggest small { color: var(--muted); }
/* Merging a website save and a Discord save (merge.html): two cards, one kept */
.merge-form { display: grid; gap: 1rem; margin-top: 1rem; }
.merge-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.merge-card { position: relative; cursor: pointer; }
.merge-card input { position: absolute; opacity: 0; }
.merge-card-body { display: grid; gap: .5rem; height: 100%; padding: 1rem; border-radius: var(--radius-card); border: 3px solid var(--night-3); background: var(--night-2); }
.merge-card input:checked + .merge-card-body { border-color: var(--gold); box-shadow: 4px 4px 0 var(--gold); }
.merge-card input:focus-visible + .merge-card-body { outline: 3px solid var(--sky); outline-offset: 2px; }
.merge-card-title { font: 400 var(--step-1)/1.1 var(--display); }
.merge-team { display: flex; gap: 4px; min-height: 48px; }
.merge-team img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 2px solid var(--ink); }
.merge-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .8rem; margin: 0; }
.merge-facts div { display: flex; justify-content: space-between; gap: .4rem; font-size: var(--step--1); }
.merge-facts dt { color: var(--muted); } .merge-facts dd { margin: 0; font-weight: 700; }
.merge-pick { justify-self: start; padding: .2rem .6rem; border-radius: 6px; background: var(--night-3); font-weight: 700; font-size: var(--step--1); }
.merge-card input:checked + .merge-card-body .merge-pick { background: var(--gold); color: var(--ink); }
.merge-confirm { display: grid; gap: .3rem; max-width: 320px; }
.merge-confirm input { padding: .5rem .6rem; border-radius: 8px; border: 2px solid var(--night-3); background: var(--night); color: inherit; font: inherit; letter-spacing: .08em; }
.merge-actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* Tapping fast in a fight on a phone: no text selection or long-press menu anywhere on the page while it's on (a stray
   double tap used to select text and throw the page to the top), no double-tap zoom on the arena. Inputs still type. */
#fight, .fight { touch-action: manipulation; }
body:has(#fight:not(.finished)) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body:has(#fight:not(.finished)) :is(input, textarea, [contenteditable]) { -webkit-user-select: text; user-select: text; }

/* Heaven's Door training, rebuilt (hdoor.html, app/game/hdoor.py): the portal (stand cards, scenario cards, a start
   bar) and the run (HUD with the turn track, the stand's book with stat bars, big action tiles or an event). Phones
   first; from 960px the book sits beside the turn. */
.hdt-cover { padding-block: 1rem; }
.hdt-cover .hd-title { font-size: clamp(2.2rem, 9vw, 4rem); }
.hdt-result { display: grid; gap: .2rem; margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-card);
  background: var(--night-2); border: 2px solid var(--gold); box-shadow: 4px 4px 0 var(--magenta); }
.hdt-result p { margin: 0; }
.hdt-result-big { font: 400 1.8rem/1.1 var(--display); color: var(--gold); }
.hdt-result-big span { font: 700 1rem/1 var(--body); color: var(--paper); }
.hdt-start { display: grid; gap: .7rem; margin-top: 1.2rem; }
.hdt-start .rr-h { margin: .4rem 0 0; }
.hdt-pick { display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: .5rem; overflow-x: auto; padding: .2rem .1rem .6rem;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.hdt-stand-card { position: relative; display: grid; justify-items: center; gap: .2rem; padding: .5rem .4rem; cursor: pointer; text-align: center;
  scroll-snap-align: start; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.hdt-stand-card input, .hdt-scenario input { position: absolute; opacity: 0; pointer-events: none; }
.hdt-stand-card img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; }
.hdt-stand-card strong { font-size: .8rem; line-height: 1.15; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdt-stand-card small { font-size: .72rem; color: var(--muted); }
.hdt-stand-card:has(:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(244 197 66 / .3); }
.hdt-stand-card:has(:focus-visible), .hdt-scenario:has(:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
.hdt-scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.hdt-scenario { position: relative; display: grid; gap: .3rem; padding: .8rem; cursor: pointer; border-radius: var(--radius-card);
  background: var(--night-2); border: 2px solid var(--night-3); }
.hdt-scenario small { color: var(--muted); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.hdt-scenario strong { font-size: 1.05rem; }
.hdt-scenario span { display: flex; flex-wrap: wrap; gap: .3rem; }
.hdt-scenario em, .hdt-choice em { font-style: normal; font-size: .78rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; background: var(--night); }
.hdt-scenario:has(:checked) { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(244 197 66 / .3); }
.hdt-go { position: sticky; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .6rem; margin-top: .4rem; padding: .6rem .8rem; border-radius: var(--radius-card);
  background: rgb(30 15 50 / .95); border: 2px solid var(--gold); }
.hdt-go span { font-weight: 700; }
.hdt-go .btn { min-height: 52px; }
@media (max-width: 1023px) { .hdt-go { bottom: calc(72px + env(safe-area-inset-bottom)); } }
.hdt-hud { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .5rem; padding: .55rem .8rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.hdt-where { display: grid; min-width: 7rem; }
.hdt-where small { color: var(--muted); font-weight: 700; font-size: var(--step--1); }
.hdt-where strong { font: 400 1.4rem/1.1 var(--display); color: var(--gold); }
.hdt-where strong span { font-size: .9rem; color: var(--muted); }
.hdt-track { list-style: none; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; flex: 1 1 14rem; margin: 0; padding: 0; }
.hdt-track li { display: grid; place-items: center; height: 18px; border-radius: 4px; background: var(--night); font-size: .65rem; line-height: 1; }
.hdt-track li.done { background: var(--night-3); }
.hdt-track li.now { background: var(--gold); color: var(--ink); }
.hdt-track li.chapter { box-shadow: inset 0 0 0 2px var(--magenta); }
.hdt-track li.won { background: #2E7D4F; } .hdt-track li.lost { background: #6B1F2E; }
.hdt-log { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: var(--step--1); }
.hdt-body { display: grid; gap: .8rem; margin-top: .8rem; }
.hdt-book { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: .6rem 1rem; padding: .9rem; border-radius: var(--radius-card);
  background: var(--night-2); border: 2px solid var(--night-3); }
.hdt-book > img { width: 104px; height: 104px; border-radius: 12px; object-fit: cover; border: 2px solid var(--gold); }
.hdt-who { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.hdt-who h1, .hdt-who p { margin: 0; }
.hdt-energy { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.hdt-energy .hp { flex: 1; height: 10px; }
.hdt-energy .hp.low i { background: var(--magenta); }
.hdt-mood { font-weight: 700; }
.hdt-stats { grid-column: 1 / -1; list-style: none; display: grid; gap: .35rem; margin: 0; padding: 0; }
.hdt-stats li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 700; }
.hdt-stats li.bonus > span:first-child { color: var(--gold); }
.hdt-stats b { text-align: right; }
.hdt-bar { height: 10px; border-radius: 999px; background: var(--night); overflow: hidden; }
.hdt-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--magenta), var(--gold)); }
.hdt-turn { display: grid; gap: .6rem; align-content: start; }
.hdt-next, .hdt-warn { margin: 0; padding: .55rem .8rem; border-radius: var(--radius-ui); background: var(--night-2); font-size: var(--step--1); }
.hdt-next.now { border: 2px solid var(--magenta); }
.hdt-warn { border: 2px solid var(--magenta); color: #FFC2D6; font-weight: 700; }
.hdt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.hdt-tiles form { margin: 0; }
.hdt-tile { display: grid; justify-items: center; gap: .15rem; width: 100%; min-height: 92px; padding: .6rem .4rem; cursor: pointer;
  color: var(--paper); border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3);
  font: inherit; transition: transform .12s, border-color .12s; }
.hdt-tile:hover { border-color: var(--paper); }
.hdt-tile:active { transform: scale(.97); }
.hdt-tile.bonus { border-color: var(--gold); background: linear-gradient(180deg, rgb(244 197 66 / .14), var(--night-2)); }
.hdt-tile.calm { background: var(--night); }
.hdt-icon { font-size: 1.8rem; line-height: 1; }
.hdt-tile strong { font-size: 1rem; }
.hdt-tile small { color: var(--muted); font-size: .78rem; font-weight: 700; }
.hdt-event { display: grid; gap: .5rem; padding: 1rem; border-radius: var(--radius-card); background: #F7F1E3; color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--magenta); }
.hdt-event p, .hdt-event h2 { margin: 0; }
.hdt-event .kicker { color: var(--magenta); }
.hdt-choices { display: grid; gap: .5rem; }
.hdt-choices form { margin: 0; }
.hdt-choice { display: grid; gap: .3rem; width: 100%; min-height: 56px; padding: .6rem .8rem; cursor: pointer; text-align: left; font: inherit;
  border-radius: var(--radius-ui); background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }
.hdt-choice:hover { border-color: var(--magenta); }
.hdt-choice span { display: flex; flex-wrap: wrap; gap: .3rem; }
.hdt-choice em { background: rgb(255 255 255 / .12); }
@media (min-width: 640px) { .hdt-tiles { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .hdt-choices { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .hdt-body { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); align-items: start; } }

/* Rogue rush, rebuilt (rogue/body.html): the portal (hero, floor strip, runs left, upgrade tiles), the draft, and the
   run (HUD bar, the room, one prompt, the party). Phones first: one column, big targets; a side column from 960px. */
.rr-hero { position: relative; display: grid; gap: .6rem; justify-items: center; margin-top: .5rem; padding: 1.4rem 1rem 1.2rem;
  text-align: center; border-radius: var(--radius-card); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--gold);
  background: radial-gradient(120% 90% at 50% 0%, #3A1630, #12081E 70%); overflow: hidden; }
.rr-hero .kicker { margin: 0; }
.rr-title { margin: 0; font: 400 clamp(2.6rem, 11vw, 5rem)/.9 var(--display); color: var(--gold); text-shadow: 3px 3px 0 var(--magenta); }
.rr-tag { margin: 0; font-weight: 700; color: var(--paper); letter-spacing: .04em; }
.rr-floors { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; width: min(100%, 520px); margin: .4rem 0 0; padding: 0; }
.rr-floors li { position: relative; aspect-ratio: 1; border-radius: 6px; border: 2px solid var(--night-3);
  background: var(--sheet) 100% 0 / 500% 100%; image-rendering: pixelated; filter: grayscale(.85) brightness(.45); }
.rr-floors li.reached { filter: none; border-color: var(--gold); }
.rr-floors li span { position: absolute; left: 3px; bottom: 1px; font: 700 .7rem/1 var(--body); color: var(--paper); text-shadow: 0 1px 2px #000; }
.rr-go { display: grid; gap: .5rem; justify-items: center; width: min(100%, 360px); margin-top: .4rem; }
.rr-go form, .rr-start { width: 100%; }
.rr-start { min-height: 56px; font-size: 1.2rem; }
.rr-runs { display: flex; align-items: center; gap: 6px; margin: 0; }
.rr-runs i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--gold); }
.rr-runs i.on { background: var(--gold); }
.rr-runs small { margin-left: .3rem; color: var(--muted); font-weight: 700; }
.rr-wait { margin: 0; padding: .7rem 1rem; border-radius: var(--radius-ui); background: var(--night); font-weight: 700; }
.rr-best { margin: 0; color: var(--muted); font-size: var(--step--1); }
.rr-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .6rem; font: 400 1.3rem/1.1 var(--display); }
.rr-h small { font: 700 1rem/1 var(--body); color: var(--gold); }
.rr-tree { margin-top: 1rem; }
.rr-tree ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; margin: 0; padding: 0; }
.rr-tree li { display: grid; gap: .6rem; align-content: start; padding: .8rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.rr-tree li form { margin: 0; }
.rr-tree .btn { width: 100%; min-height: 44px; }
.rr-tree li > small { text-align: center; font-weight: 700; }
.rr-attr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .5rem; align-items: center; }
.rr-attr b { grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--gold); color: var(--ink); font-size: .8rem; }
.rr-attr small { color: var(--muted); font-size: var(--step--1); }
.rr-how { margin-top: 1rem; padding: .7rem 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.rr-how summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.rr-how ul { margin: .6rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.rr-hud { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .5rem; padding: .55rem .8rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.rr-where { display: grid; min-width: 0; flex: 1 1 10rem; }
.rr-where small { color: var(--muted); font-weight: 700; font-size: var(--step--1); }
.rr-where strong { font: 400 1.25rem/1.1 var(--display); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-res { display: flex; gap: .4rem; margin: 0; }
.rr-res span { padding: .25rem .55rem; border-radius: 999px; background: var(--night); font-weight: 700; }
.rr-hud-actions { display: flex; gap: .4rem; align-items: center; }
.rr-hud-actions .btn { min-height: 40px; }
.rr-menu { position: relative; }
.rr-menu summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; list-style: none;
  font-weight: 700; background: var(--night); border: 2px solid var(--night-3); }
.rr-menu summary::-webkit-details-marker { display: none; }
.rr-menu-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: .5rem; width: min(80vw, 260px); padding: .8rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--gold); box-shadow: 0 8px 24px rgb(0 0 0 / .5); }
.rr-menu-body p { margin: 0; }
.rr-attrs { display: flex; flex-wrap: wrap; gap: .3rem; }
.rr-attrs span { padding: .2rem .5rem; border-radius: 6px; background: var(--night); font-size: var(--step--1); }
.rr-boon { font-size: var(--step--1); color: var(--gold); }
.rr-body { display: grid; gap: .7rem; margin-top: .7rem; }
.rr-side { display: grid; gap: .7rem; align-content: start; }
.rr-prompt { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: var(--radius-card);
  background: var(--night-2); border: 2px solid var(--gold); }
.rr-prompt.danger { border-color: var(--magenta); box-shadow: 0 0 0 3px rgb(214 36 110 / .25); }
.rr-prompt p { display: grid; flex: 1; min-width: 0; margin: 0; }
.rr-prompt b { font-size: 1.05rem; }
.rr-prompt small { color: var(--muted); }
.rr-prompt form, .rr-prompt .btn { flex: none; margin: 0; }
.rr-prompt .btn { min-height: 48px; padding-inline: 1.2rem; }
.rr-party { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; }
.rr-party a { display: grid; justify-items: center; gap: .3rem; padding: .5rem; border-radius: var(--radius-card); text-align: center;
  color: inherit; text-decoration: none; background: var(--night-2); border: 2px solid var(--night-3); }
.rr-party a:hover { border-color: var(--gold); }
.rr-party img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.rr-party a > span { display: grid; gap: .2rem; width: 100%; min-width: 0; }
.rr-party strong { font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-party small { font-size: .72rem; color: var(--muted); }
.rr-party .hp { height: 6px; }
.rr-party li.low a { border-color: var(--magenta); }
.rr-party li.down a { opacity: .45; }
.rr-party.mini { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.rr-party.mini li { display: flex; align-items: center; gap: .4rem; padding: .4rem; border-radius: 10px; background: var(--night-2); }
.rr-party.mini img { width: 36px; height: 36px; }
.rr-draft { display: grid; gap: .8rem; }
.rr-draft .rogue-pick strong { font-size: 1.05rem; }
@media (min-width: 960px) {
  .rr-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .rr-party { grid-template-columns: 1fr; }
  .rr-party a { grid-template-columns: 48px minmax(0, 1fr); justify-items: start; text-align: left; }
}

/* The dungeon in the game layout (partials/dungeon_body.html, the rr-* blocks above) */
.delve-hero .delve-floors { flex-wrap: wrap; justify-content: center; max-width: 560px; }
.delve-hero .rr-party.mini { width: min(100%, 420px); }
.rr-run .delve-band { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .7rem 0 0; font-size: var(--step--1); }
.rr-run .delve-band b { color: var(--c); }
.rr-prompt.stairs { border-color: var(--sky); }
.rr-side .delve-choice { min-height: 56px; }
.rr-side .delve-warn { margin: 0; }
.rr-menu-body .move-pad { margin: .2rem auto; }
.rr-menu-body .rr-h { margin: 0; font-size: 1.05rem; }
.delve-depths .depth-bands { margin-top: .6rem; }
/* the achievement and level-up slams (app.js slamify) keep their own card, medal and entrance */
.toast-pop.slam { animation: none; overflow: visible; }
.toast-pop.slam::before, .toast-pop.slam::after { display: none; }
/* Ladders (leaderboard.html): an account's prestige next to its name */
.prestige-badge { margin-left: .3rem; padding: .05rem .4rem; border-radius: 999px; font-size: .72rem; color: var(--ink); background: var(--gold); vertical-align: middle; }
.hdt-stand-card .hdt-cost { color: var(--gold); font-weight: 700; }
.hdt-go span { display: grid; }
.hdt-go span small { color: var(--muted); font-weight: 600; font-size: .75rem; }

/* The game layout for the boss rush, the tower, puzzles and gangs (gm-*, beside Rogue rush's rr-* blocks): a hero in
   the mode's colours (--mode), big figures, a boss track, compact boards, gangs with their banner behind them */
.gm-hero[data-mode="rush"] { --mode: #FF8A3D; --mode-2: #8A1C2B; }
.gm-hero[data-mode="tower"] { --mode: #B48CF0; --mode-2: #4A2A86; }
.gm-hero[data-mode="requiem"] { --mode: #FF4D6D; --mode-2: #6B1D3A; }
.gm-hero[data-mode="puzzle"] { --mode: #3AB4F2; --mode-2: #1B5E8C; }
.gm-hero { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--mode-2, #3A1630) 75%, transparent), #12081E 72%);
  box-shadow: 4px 4px 0 var(--mode, var(--gold)); }
.gm-hero .rr-title, .gm-hero .kicker { color: var(--mode, var(--gold)); }
.gm-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.gm-stats > div { display: grid; justify-items: center; min-width: 96px; padding: .45rem .8rem; border-radius: 12px; background: rgb(0 0 0 / .3); border: 2px solid rgb(255 255 255 / .1); }
.gm-stats small { color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.gm-stats strong { font: 400 1.5rem/1.1 var(--display); color: var(--paper); }
.gm-stats .big strong { font-size: 2.2rem; color: var(--mode, var(--gold)); }
.gm-start { display: grid; gap: .5rem; width: 100%; }
.gm-card { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.gm-cols { display: grid; gap: 0 1rem; }
.gm-cols > .rr-how { margin-top: 1rem; }
@media (min-width: 900px) { .gm-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.gm-party { margin-top: .8rem; }
.gm-track { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin: 0; padding: 0; }
.gm-track li { position: relative; display: grid; justify-items: center; gap: .15rem; padding: .45rem .3rem .5rem; border-radius: 12px; text-align: center;
  background: var(--night); border: 2px solid var(--night-3); }
.gm-track img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; filter: grayscale(.5) brightness(.75); }
.gm-track b { position: absolute; left: 6px; top: 4px; font: 400 .9rem var(--display); color: var(--paper); text-shadow: 0 1px 2px #000; }
.gm-track i { position: absolute; right: 5px; top: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-style: normal; font-weight: 800; font-size: .8rem; background: var(--gold); color: var(--ink); }
.gm-track span { font-size: .72rem; font-weight: 700; line-height: 1.15; }
.gm-track small { font-size: .65rem; color: var(--muted); line-height: 1.15; }
.gm-track li.beaten { border-color: var(--gold); }
.gm-track li.beaten img, .gm-track li.next img { filter: none; }
.gm-track li.next { border-color: var(--magenta); box-shadow: 0 0 0 3px rgb(214 36 110 / .35); animation: gm-pulse 1.6s ease-in-out infinite; }
@keyframes gm-pulse { 50% { box-shadow: 0 0 0 7px rgb(214 36 110 / .1); } }
@media (prefers-reduced-motion: reduce) { .gm-track li.next { animation: none; } }
.gm-board { list-style: none; display: grid; gap: .3rem; margin: 0; padding: 0; }
.gm-board li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 10px; background: var(--night); }
.gm-board li.me { outline: 2px solid var(--gold); }
.gm-rank { text-align: center; font: 400 1rem var(--display); }
.gm-board strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-board small { color: var(--muted); font-size: .75rem; }
.gm-board b { color: var(--gold); }
.gm-floor > * + * { margin-top: .6rem; }
.gm-floor .tower-foes.big img { width: 64px; height: 64px; }
.gm .tower-layout { margin-top: 1rem; }
.gm .tower-side > .gm-card:first-child { margin-top: 0; }
.gm-hero.pz-hero { display: grid; grid-template-columns: none; justify-items: center; gap: .6rem; }
.gm-switch { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: min(100%, 520px); }
.gm-switch a { display: grid; justify-items: center; gap: .1rem; min-height: 44px; padding: .7rem .5rem; border-radius: 14px; text-decoration: none; color: var(--paper);
  background: rgb(0 0 0 / .3); border: 2px solid rgb(255 255 255 / .12); }
.gm-switch a span { font-size: 1.6rem; line-height: 1; }
.gm-switch a strong { font-size: 1.05rem; }
.gm-switch a small { color: var(--muted); font-size: .72rem; }
.gm-switch a.on { border-color: var(--mode, var(--gold)); background: color-mix(in srgb, var(--mode, var(--gold)) 18%, transparent); box-shadow: 3px 3px 0 var(--mode, var(--gold)); }
.gm-hero .pz-next { display: flex; align-items: baseline; gap: .4rem; padding: 0; background: none; border: 0; }
.gm-gang-hero { position: relative; display: block; overflow: hidden; padding: 1.4rem 1.2rem 1.2rem; text-align: center; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--gold); }
.gm-gang-hero .gang-banner { position: absolute; inset: 0; z-index: 0; width: 100%; max-width: none; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; filter: brightness(.45) saturate(1.1); }
.gm-gang-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(18 8 30 / .15), rgb(18 8 30 / .92)); -webkit-mask-image: none; mask-image: none; }
.gm-gang-hero .gang-hero-body { position: relative; z-index: 1; display: grid; gap: .5rem; justify-items: center; }
.gm-gang-hero .kicker { margin: 0; color: var(--gold); }
.gm-motto { margin: 0; font-style: italic; color: var(--paper); }
.gm-motd { margin: 0; padding: .4rem .8rem; border-radius: 12px; background: #F7F1E3; color: var(--ink); font-weight: 700; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--magenta); }
.gm-gang-hero .gang-level { width: min(100%, 520px); text-align: left; }
.gm-gangs .raid-meter { height: 22px; border: 2px solid var(--ink); }
.gm-gangs .raid-actions { display: grid; gap: .5rem; margin: .7rem 0; }
.gm-gangs .raid-actions form, .gm-gangs .raid-actions .btn.big { width: 100%; }
.gm-gangs .btn.big { min-height: 56px; }
.gm-gangs .versus { position: relative; }
.gm-gangs .versus::after { content: "VS"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--magenta); color: #fff; font: 400 1rem var(--display); border: 3px solid var(--ink); }
.gm-gangs .versus > div { justify-items: center; padding: 1rem .8rem; text-align: center; }
.gm-gangs .versus strong { font-size: var(--step-3); color: var(--gold); }
.gm-roster { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.gm-roster li { padding: .6rem .7rem; border: 2px solid var(--night-3); border-bottom-width: 2px; border-radius: 12px; background: var(--night-2); }
.gm-roster li.r0 { border-color: var(--gold); }
.gm-roster li.r1 { border-color: var(--violet); }
.gm-recruiting li .btn { min-height: 44px; }
/* ── The gang page as a game screen (gangs.html) ── */
.gm-recruiting { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .8rem; margin: .8rem 0 0; padding: 0; list-style: none; }
/* a gang hiring: a poster with its banner on top, its figures as chips, and one big button */
.wanted { position: relative; display: grid; gap: .45rem; align-content: start; overflow: hidden; padding: 0 0 .8rem; border-radius: var(--radius-card);
  background: var(--night-2); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--night-3); transition: translate .15s ease, box-shadow .15s ease; }
.wanted:hover { translate: 0 -3px; box-shadow: 4px 7px 0 var(--magenta); }
.wanted.open { box-shadow: 4px 4px 0 var(--teal); }
.wanted > :not(.wanted-head) { margin-inline: .9rem; }
.wanted-head { position: relative; display: block; height: 104px; overflow: hidden; border-bottom: 3px solid var(--ink); }
.wanted-head img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) brightness(.8); }
.wanted-head b { position: absolute; left: .6rem; bottom: .5rem; padding: .15rem .55rem; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .74rem; }
.wanted strong { font: 400 1.25rem/1.1 var(--display); }
.wanted strong a { color: var(--paper); text-decoration: none; }
.wanted-motto { color: var(--muted); font-style: italic; font-size: .9rem; }
.wanted-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.wanted-chips span { padding: .12rem .5rem; border-radius: 999px; background: rgb(0 0 0 / .3); border: 1px solid rgb(255 255 255 / .1); font-size: .76rem; font-weight: 700; }
.wanted-do { display: flex; gap: .4rem; margin-top: .2rem; }
.wanted-do form, .wanted-do .btn { flex: 1; width: 100%; min-height: 44px; }
.wanted-none { grid-column: 1 / -1; text-align: left; }
/* the lobby: what a crew gives you */
.gang-lobby { --tone: var(--magenta); }
.gang-lobby-text { display: grid; gap: .35rem; }
.gang-lobby-pitch { max-width: 46ch; margin: 0; color: var(--paper); }
.gang-lobby-go { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 0; }
.gang-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .6rem; margin: 1rem 0; padding: 0; list-style: none; }
.gang-perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i t" "i s"; gap: .1rem .7rem; align-items: center; padding: .8rem .9rem;
  border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.gang-perks li > span { grid-area: i; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: rgb(214 36 110 / .16); font-size: 1.5rem; }
.gang-perks strong { grid-area: t; font: 400 1.05rem var(--display); }
.gang-perks small { grid-area: s; color: var(--muted); line-height: 1.3; }
.gang-found .found-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.price-tag { padding: .3rem .8rem; border-radius: 10px; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--magenta);
  font: 400 1.15rem var(--display); rotate: -2deg; }
.price-tag small { font: 700 .7rem var(--body); }
/* a ranking's podium: gold in the middle on the highest step */
.gang-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .5rem; margin: .8rem 0; padding: 0; list-style: none; }
.gang-podium li { display: grid; justify-items: center; gap: .15rem; min-width: 0; padding: .7rem .4rem 0; text-align: center; }
.gang-podium li.p1 { grid-column: 2; grid-row: 1; } .gang-podium li.p2 { grid-column: 1; grid-row: 1; } .gang-podium li.p3 { grid-column: 3; grid-row: 1; }
.gang-podium .medal { font-size: 2rem; line-height: 1; }
.gang-podium li.p1 .medal { font-size: 2.6rem; }
.gang-podium a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--paper); font-weight: 800; }
.gang-podium b { color: var(--gold); font: 400 1.05rem var(--display); }
.gang-podium small { color: var(--muted); font-size: .72rem; }
.gang-podium .step { display: grid; place-items: center; width: 100%; margin-top: .35rem; border-radius: 10px 10px 0 0; border: 3px solid var(--ink); border-bottom: 0;
  background: linear-gradient(180deg, var(--night-3), var(--night-2)); color: var(--muted); font: 400 1.4rem var(--display); }
.gang-podium .p1 .step { height: 84px; background: linear-gradient(180deg, #F4C542, #B8902A); color: var(--ink); }
.gang-podium .p2 .step { height: 60px; background: linear-gradient(180deg, #D8D8E8, #9090A8); color: var(--ink); }
.gang-podium .p3 .step { height: 44px; background: linear-gradient(180deg, #D89058, #985830); color: var(--ink); }
.gang-podium li.me a { color: var(--gold); }
/* inside: today's duties, ticked off as they're done */
.gang-duties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.gang-duties a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: center; height: 100%; padding: .65rem .8rem; border-radius: 14px;
  background: var(--night-2); border: 2px solid var(--night-3); color: var(--paper); text-decoration: none; }
.gang-duties a > span:last-child { display: grid; }
.gang-duties small { color: var(--muted); font-size: .76rem; }
.duty-check { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(0 0 0 / .3); font-size: 1.15rem; font-weight: 900; }
.gang-duties .done a { opacity: .7; }
.gang-duties .done .duty-check { background: var(--teal); color: var(--ink); }
.gang-duties .todo a { border-color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }
.gang-duties .todo .duty-check { background: rgb(244 197 66 / .18); animation: duty-pulse 1.6s ease-in-out infinite; }
.gang-duties .ready a { border-color: var(--magenta); box-shadow: 3px 3px 0 var(--magenta); }
.gang-duties .ready .duty-check { background: rgb(214 36 110 / .25); animation: duty-pulse 1.2s ease-in-out infinite; }
@keyframes duty-pulse { 50% { scale: 1.12; } }
/* the weekly boss as a fight card */
.gang-boss { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1rem; border-radius: var(--radius-card);
  background: radial-gradient(90% 120% at 0% 50%, rgb(214 36 110 / .35), transparent 65%), var(--night-2); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--magenta); }
.gang-boss.phase-4 { box-shadow: 4px 4px 0 var(--gold); background: radial-gradient(90% 120% at 0% 50%, rgb(244 197 66 / .3), transparent 65%), var(--night-2); }
.gang-boss-body { display: grid; gap: .25rem; min-width: 0; }
.gang-boss-body .h2, .gang-boss-body .kicker, .gang-boss-body > p { margin: 0; }
.gang-boss-art { position: relative; justify-self: center; width: 150px; height: 150px; }
.gang-boss-art .boss { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--magenta), 0 0 28px rgb(214 36 110 / .65);
  animation: boss-breathe 3s ease-in-out infinite; }
.gang-boss-art .guard { position: absolute; bottom: 0; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--violet); }
.gang-boss-art .g1 { left: -6px; } .gang-boss-art .g2 { right: -6px; }
@keyframes boss-breathe { 50% { scale: 1.04; box-shadow: 0 0 0 3px var(--magenta), 0 0 40px rgb(214 36 110 / .85); } }
.raid-progress { margin-top: 1rem; }
.raid-dmg { margin: 0; }
.raid-dmg strong { font: 400 1.6rem var(--display); color: var(--gold); }
.raid-dmg small { color: var(--muted); }
.gm-gangs .raid-meter { height: 26px; margin: 1.6rem 0 .6rem; overflow: visible; }
.gm-gangs .raid-meter > i { box-shadow: inset 0 -6px 0 rgb(0 0 0 / .18); }
.gm-gangs .raid-chest { top: auto; bottom: calc(100% + 2px); width: auto; height: auto; margin: 0; translate: -50% 0; background: none; font-size: 1.25rem; line-height: 1;
  filter: grayscale(1) brightness(.8); }
.gm-gangs .raid-chest.reached { filter: none; animation: chest-hop 1.8s ease-in-out infinite; }
@keyframes chest-hop { 0%, 70%, 100% { translate: -50% 0; } 80% { translate: -50% -5px; } }
.raid-bonuses { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.raid-bonuses .raid-bonus { padding: .15rem .6rem; border-radius: 999px; background: rgb(244 197 66 / .12); font-size: .82rem; }
.gm-gangs .raid-go { font-size: 1.15rem; letter-spacing: .02em; }
.claim-glow { animation: claim-glow 1.4s ease-in-out infinite; }
@keyframes claim-glow { 50% { box-shadow: 0 0 0 4px rgb(244 197 66 / .35), 3px 3px 0 var(--magenta); } }
.raid-chests { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.raid-chests li { position: relative; padding: .7rem .8rem .7rem 3.1rem; border: 2px solid var(--night-3); background: var(--night-2); opacity: .8; }
.raid-chests li .chest { position: absolute; left: .7rem; top: .65rem; font-size: 1.6rem; filter: grayscale(1); }
.raid-chests li.reached { opacity: 1; border-color: var(--gold); box-shadow: 3px 3px 0 var(--gold); }
.raid-chests li.reached .chest { filter: none; }
.raid-mvp li { position: relative; isolation: isolate; padding: .35rem .6rem; border: 0; border-radius: 8px; overflow: hidden; }
.raid-mvp li i { position: absolute; inset: 0 auto 0 0; z-index: -1; background: linear-gradient(90deg, rgb(214 36 110 / .4), rgb(214 36 110 / .1)); }
.raid-mvp li.mvp i { background: linear-gradient(90deg, rgb(244 197 66 / .45), rgb(244 197 66 / .1)); }
.raid-mvp li.mvp span { color: var(--gold); font-weight: 800; }
/* the weekly goal: reward nodes on a track */
.gang-goal { margin-top: 1.2rem; padding: 1rem; border-radius: var(--radius-card); background: var(--night-2); border: 2px solid var(--night-3); }
.gang-goal .kicker, .gang-goal > p { margin: 0 0 .4rem; }
.goal-track { position: relative; margin: .6rem 0 .4rem; padding-bottom: 3.4rem; }
.goal-track .meter { height: 14px; margin: 1.2rem 0 0; }
.goal-nodes { position: absolute; inset: 0; display: block; margin: 0; }
.goal-nodes li { position: absolute; top: 0; display: grid; justify-items: center; width: 92px; margin: 0; padding: 0; translate: -50% 0; border-radius: 0; background: none; outline: 0;
  text-align: center; text-decoration: none; opacity: 1; }
.goal-nodes li:last-child { translate: -85% 0; }
.goal-nodes .node { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--night-3); border: 3px solid var(--ink); font-size: .95rem; }
.goal-nodes li.ready .node { background: var(--gold); animation: duty-pulse 1.2s ease-in-out infinite; }
.goal-nodes li.claimed .node { background: var(--teal); color: var(--ink); font-weight: 900; }
.goal-nodes strong { font-size: .8rem; }
.goal-nodes small { color: var(--muted); font-size: .68rem; line-height: 1.15; }
/* war: who's ahead, as a tug of war */
.gm-gangs .versus > div.ahead { border: 2px solid var(--gold); box-shadow: 3px 3px 0 var(--gold); }
.war-tug { height: 14px; margin: .2rem 0 .5rem; border-radius: 99px; overflow: hidden; background: var(--violet); border: 2px solid var(--ink); }
.war-tug i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--magenta)); }
.war-call { font-weight: 700; }
/* members as crew cards: a face, a rank, this week's raid damage and today's attack */
.crew-today { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .3rem .8rem; margin: 0 0 .8rem; }
.crew-today .meter { height: 10px; margin: 0; width: 100%; }
.gm-roster li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .7rem; align-items: center; position: relative; }
.gm-roster li.in::after { content: "✓"; position: absolute; top: .45rem; right: .55rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); color: var(--ink); font-size: .75rem; font-weight: 900; }
.crew-face { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--violet); border: 3px solid var(--ink);
  color: #fff; font: 400 1.2rem var(--display); }
.gm-roster li.r0 .crew-face { background: var(--gold); color: var(--ink); }
.crew-face img { width: 100%; height: 100%; object-fit: cover; }
.crew-who { display: grid; gap: .1rem; min-width: 0; }
.crew-who > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-stat { color: var(--muted); font-size: .74rem; }
.gm-roster .roster-actions { grid-column: 1 / -1; margin: 0; }
.vault-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "i n" "i t"; gap: 0 .7rem; align-items: center; margin: 0 0 .6rem; }
.vault-sum span { grid-area: i; font-size: 2.4rem; }
.vault-sum strong { grid-area: n; font: 400 2rem/1 var(--display); color: var(--gold); }
.vault-sum small { grid-area: t; color: var(--muted); }
@media (max-width: 640px) {
  .gang-boss { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .gang-boss-body .raid-phase { text-align: left; }
  .goal-nodes li { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .gang-boss-art .boss, .gang-duties .todo .duty-check, .gang-duties .ready .duty-check, .gm-gangs .raid-chest.reached, .claim-glow,
  .goal-nodes li.ready .node { animation: none; }
  .wanted { transition: none; }
}
/* chat @mentions (app.js): the suggestion list opens above the chat box; mentions in messages, gold when it's you */
.mention-suggest { top: auto; bottom: calc(100% + .2rem); }
.mention-suggest li[aria-selected="true"] { background: var(--night-3); }
.chat-text .mention { padding: 0 .2rem; border-radius: 4px; color: var(--sky); background: rgb(58 180 242 / .12); font-weight: 700; }
.chat-text .mention.me { color: var(--ink); background: var(--gold); }
.toast-pop.mention { --accent: var(--sky); }
.toast-pop.mention::before { content: "@"; font-weight: 800; }

/* ── Prestige, seen everywhere: a ✦ pip on cards and fighters, a frame that warms with each prestige ── */
.prestige-pip { padding: 0 .35rem; border-radius: 4px; font: 400 .78rem var(--display); color: var(--ink); background: var(--gold); box-shadow: 0 0 8px rgb(255 212 94 / .6); }
.card.pr2 .prestige-pip, .fighter.pr2 .fighter-prestige { background: linear-gradient(90deg, var(--gold), var(--magenta)); color: #fff; }
.card.pr3 .prestige-pip, .fighter.pr3 .fighter-prestige { background: linear-gradient(90deg, var(--gold), var(--magenta), var(--teal)); color: var(--ink); }
.card.pr1 { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgb(255 212 94 / .35); }
.card.pr2 { box-shadow: 0 0 0 2px var(--magenta), 0 0 18px rgb(214 36 110 / .45); }
.card.pr3 { box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--magenta), 0 0 24px rgb(58 209 196 / .5); }
.fighter-prestige { position: absolute; right: 4px; top: 3px; z-index: 2; padding: 0 .3rem; border-radius: 4px; font: 400 .72rem var(--display);
  color: var(--ink); background: var(--gold); box-shadow: 0 0 6px rgb(255 212 94 / .7); }
.fighter.pr1 .fighter-portrait { border-color: var(--gold); }
.fighter.pr2 .fighter-portrait, .fighter.pr3 .fighter-portrait { border-color: var(--magenta); box-shadow: 0 0 12px rgb(214 36 110 / .5); }

/* ── The stand panel as a game screen (partials/stand_panel.html): a hero HUD, tabs at every width, upgrade cards ── */
.sp-hero { --rar: var(--muted); position: relative; margin: 0 0 .7rem; padding: .9rem 1rem .8rem; border-radius: 14px; overflow: hidden;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--rar) 32%, transparent), transparent 60%), rgb(0 0 0 / .28);
  border: 2px solid color-mix(in srgb, var(--rar) 55%, transparent); }
.sp-hero.rare { --rar: var(--violet); } .sp-hero.epic { --rar: var(--gold); } .sp-hero.legend { --rar: var(--magenta); } .sp-hero.mythic { --rar: var(--teal); }
.sp-hero .kicker { color: var(--rar); margin: 0; }
.sp-hero .display { margin: .1rem 0 .55rem; }
.sp-hud { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.sp-lv { --p: 0; position: relative; display: grid; place-items: center; align-content: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--night-2) 78%, transparent 80% 100%), conic-gradient(var(--gold) calc(var(--p) * 1%), rgb(255 255 255 / .12) 0); }
.sp-lv b { font: 400 1.45rem/1 var(--display); color: var(--paper); }
.sp-lv small { font-size: .6rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.sp-hud-col { display: grid; gap: .2rem; }
.sp-stars i, .sp-prest i { font-style: normal; font-size: 1.15rem; color: rgb(255 255 255 / .18); }
.sp-stars i.on { color: var(--gold); text-shadow: 0 0 8px rgb(255 212 94 / .6); }
.sp-prest { display: flex; align-items: center; gap: .1rem; }
.sp-prest i.on { color: var(--magenta); text-shadow: 0 0 8px rgb(214 36 110 / .7); }
.sp-prest small { margin-left: .4rem; font-size: .72rem; font-weight: 700; color: var(--muted); }
.pr1 .sp-prest small, .pr2 .sp-prest small, .pr3 .sp-prest small { color: var(--magenta); }
.sp-power { display: grid; justify-items: end; margin-left: auto; padding: .35rem .8rem; border-radius: 12px; background: rgb(0 0 0 / .35); border: 2px solid rgb(255 255 255 / .1); }
.sp-power small { font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sp-power strong { font: 400 1.6rem/1.05 var(--display); color: var(--gold); }
.sp-where { margin: .55rem 0 0; font-size: .8rem; font-weight: 700; color: var(--paper-2); }
.panel-grid.pr3 .sp-hero { border-color: var(--magenta); box-shadow: inset 0 0 0 1px var(--gold), 0 0 20px rgb(58 209 196 / .25); }

/* tabs at every width: one group at a time, like a game menu */
.sp2 .ptabs { position: sticky; top: -1.4rem; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .8rem 0 .6rem;
  padding: .3rem; border-radius: 12px; background: var(--night); border: 1px solid rgb(255 255 255 / .1); }
.sp2 .ptabs button { position: relative; min-height: 42px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 .88rem var(--body); cursor: pointer; }
.sp2 .ptabs button:hover { color: var(--paper); }
.sp2 .ptabs button[aria-selected="true"] { color: var(--ink); background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep, #B8860B); }
.sp2 .ptabs-line { display: none; }
.ptab-dot { position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 2px var(--night), 0 0 8px var(--teal); }
.sp2 .panel-body[data-tab="stats"] .pt-group:not([data-group="stats"]), .sp2 .panel-body[data-tab="gear"] .pt-group:not([data-group="gear"]),
.sp2 .panel-body[data-tab="stars"] .pt-group:not([data-group="stars"]), .sp2 .panel-body[data-tab="chips"] .pt-group:not([data-group="chips"]) { display: none; }
.sp2 .pt-group { animation: tab-in .22s ease; }
.sp2 .pt-group > .h3:first-child { margin-top: .2rem; }

.sp-special { padding: .7rem .9rem; border-radius: 12px; background: rgb(0 0 0 / .25); border-left: 4px solid var(--gold); }
.sp-label { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font: 400 1rem var(--display); color: var(--gold); }
.sp-charge { padding: .05rem .45rem; border-radius: 999px; font: 700 .72rem var(--body); color: var(--paper); background: var(--night-3); }
.sp-special .special-text { margin: 0 0 .3rem; }
.sp-statgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: 0; }
.sp-statgrid > div { display: grid; justify-items: center; gap: .05rem; padding: .5rem .3rem; border-radius: 12px; text-align: center; background: rgb(0 0 0 / .3); border: 2px solid rgb(255 255 255 / .08); }
.sp-statgrid dt { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sp-statgrid dd { margin: 0; font: 400 1.3rem/1.15 var(--display); color: var(--paper); font-variant-numeric: tabular-nums; }
.sp-statgrid small { font-size: .66rem; color: var(--muted); }

.sp-slots { display: grid; gap: .4rem; margin: 0 0 .6rem; padding: 0; list-style: none; }
.sp-slots li { display: flex; align-items: center; gap: .6rem; min-height: 52px; padding: .35rem .6rem; border-radius: 12px; background: rgb(0 0 0 / .28); border: 2px solid rgb(255 255 255 / .1); }
.sp-slots li.empty { border-style: dashed; }
.sp-slot-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; font-size: 1.2rem; background: var(--night-3); }
.sp-slot-name { flex: 1; min-width: 0; font-weight: 700; }
.sp-slot-acts { display: flex; flex-wrap: wrap; gap: .3rem; }

.sp-ups { display: grid; gap: .6rem; }
.sp-up { padding: .75rem .9rem; border-radius: 14px; background: rgb(0 0 0 / .3); border: 2px solid rgb(255 255 255 / .1); }
.sp-up.ready { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), 0 0 18px rgb(58 209 196 / .25); }
.sp-up.done { opacity: .75; }
.sp-up > header { display: flex; align-items: center; gap: .7rem; }
.sp-up h3 { margin: 0; font: 400 1.1rem var(--display); color: var(--paper); }
.sp-up header small { color: var(--muted); font-size: .78rem; }
.sp-up-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; font-size: 1.3rem; color: var(--ink); background: var(--gold); }
.sp-up.prestige .sp-up-icon { color: #fff; background: linear-gradient(135deg, var(--gold), var(--magenta)); }
.sp-up.requiem .sp-up-icon { background: linear-gradient(135deg, var(--teal), var(--violet)); color: #fff; }
.sp-reqs { display: grid; gap: .3rem; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .88rem; }
.sp-reqs li { display: flex; align-items: flex-start; gap: .5rem; }
.sp-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: .8rem; font-weight: 800; }
.sp-reqs .ok .sp-check { color: var(--ink); background: var(--teal); }
.sp-reqs .no .sp-check { color: #fff; background: var(--magenta); }
.sp-reqs .opt { color: var(--muted); }
.sp-reqs b { color: var(--paper); font-variant-numeric: tabular-nums; }
.sp-pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: .25rem; }
.sp-pips i { width: 12px; height: 12px; border-radius: 3px; background: rgb(255 255 255 / .14); transform: rotate(45deg) scale(.8); }
.sp-pips i.on { background: var(--gold); box-shadow: 0 0 6px rgb(255 212 94 / .6); }
.sp-why { display: block; margin-top: .25rem; color: var(--gold); font-weight: 700; }
.sp-up-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.sp-up form.inline { margin-top: .6rem; }

.sp-dock { position: sticky; bottom: -1.4rem; z-index: 3; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1rem 0 0; padding: .6rem 0 .2rem;
  background: linear-gradient(transparent, var(--night-2) 30%); }
@media (max-width: 640px) {
  .sp2 .ptabs { top: -1rem; margin: .6rem 0 .4rem; }
  .sp2 .ptabs button { font-size: .78rem; min-height: 44px; }
  .sp-statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-power { margin-left: 0; }
  .sp-dock { bottom: calc(-1rem - env(safe-area-inset-bottom)); }
  .panel-grid.sp2 { grid-template-columns: minmax(0, 1fr); }
}

/* lightning: jagged white strikes (the summon's last step, and an LR climbing in the cinematic) */
.cine-bolt { position: absolute; top: -5%; z-index: 3; width: 9vmin; height: 70vh; pointer-events: none; opacity: 0;
  background: linear-gradient(#fff, #CFFBFF 60%, transparent); filter: drop-shadow(0 0 10px #5FF2E4) drop-shadow(0 0 24px #fff);
  clip-path: polygon(48% 0, 62% 0, 50% 34%, 70% 34%, 34% 100%, 44% 48%, 26% 48%); animation: bolt-strike .6s steps(2, end) forwards; }
@keyframes bolt-strike { 0% { opacity: 0; } 10% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: 1; } 100% { opacity: 0; } }

/* the cinematic: a face-down SSR-or-better climbs a step per tap (gold, then magenta, then lightning) before it turns */
.cine.upped .cine-card { animation: cine-quake .08s linear 6, cine-await 1.4s ease-in-out .5s infinite; }
.cine.upped .cine-flash { animation: cine-flash .55s ease-out; }
.cine.surge .cine-flash { background: #FF4DA0; }
.cine.storm .cine-flash { background: #fff; }
.cine.storm .cine-back { border-image: linear-gradient(135deg, #5FF2E4, #FF4DA0, #F4C542) 1; }
.cine.storm .cine-back span { background: linear-gradient(90deg, #5FF2E4, #FF4DA0, #F4C542, #5FF2E4) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: cine-rainbow 1.6s linear infinite; }
.cine.ready .cine-title, .cine.upped .cine-title { animation: cine-stamp .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.cine.upped .cine-menace { font-size: 1.4em; }
@media (prefers-reduced-motion: reduce) {
  .summon.shake, .cine.upped .cine-card, .cine-bolt, .sum-call { animation: none !important; }
}

/* ── 1.3.1 banners as gacha banners: the art blurred behind, the featured stand, a shining pull button ── */
.banner.gacha { overflow: hidden; isolation: isolate; }
.banner.gacha::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art, none) center / cover; filter: blur(22px) saturate(1.5);
  opacity: .3; transform: scale(1.25); }
.banner.gacha::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 30%, rgb(12 5 22 / .75)); }
.banner.gacha.has-lr { border-top-color: transparent; border-image: linear-gradient(90deg, #5FF2E4, #FF4DA0, #F4C542) 1; }
.banner-feature { --rc: var(--gold); position: absolute; right: .6rem; bottom: .6rem; z-index: 2; width: 36%; max-width: 130px; aspect-ratio: 1; border-radius: 14px;
  overflow: hidden; border: 3px solid var(--rc); background: var(--night-3); box-shadow: 0 0 0 3px var(--ink), 0 0 24px var(--rc); animation: feature-float 3s ease-in-out infinite alternate; }
.banner-feature.rar-legend { --rc: var(--magenta); } .banner-feature.rar-mythic { --rc: #5FF2E4; } .banner-feature.rar-rare { --rc: var(--violet); }
.banner-feature img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.banner-feature b { position: absolute; left: 4px; top: 4px; padding: 0 .35rem; border-radius: 4px; font: 400 .8rem var(--display); color: var(--ink); background: var(--rc); }
.banner-feature.rar-mythic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  animation: sheen 2.8s ease-in-out infinite; }
.banner-feature-name { position: absolute; left: .5rem; bottom: .5rem; z-index: 2; max-width: 55%; padding: .2rem .55rem; border-radius: 6px; font-size: .75rem; font-weight: 800;
  color: var(--ink); background: var(--gold); border: 2px solid var(--ink); rotate: -2deg; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.banner-art-link .banner-art-hint { top: .5rem; right: .5rem; bottom: auto; }
.banner-rate { padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--gold); border: 1px solid var(--gold); background: rgb(244 197 66 / .1); }
.btn.shine { position: relative; overflow: hidden; }
.btn.shine:not(:disabled)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .6) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: sheen 3.2s ease-in-out infinite; }
.btn.shine:not(:disabled):hover { transform: translateY(-2px) scale(1.03); }
@keyframes sheen { 0%, 55% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
@keyframes feature-float { to { transform: translateY(-5px) rotate(1.5deg); } }
.gauge.pity.hot { border-color: var(--magenta); box-shadow: 0 0 18px rgb(214 36 110 / .35); }
.gauge.pity.hot .meter i { background: linear-gradient(90deg, var(--gold), var(--magenta)); animation: cine-pulse-bar 1.2s ease-in-out infinite; }
.pity-hot { display: block; color: var(--magenta); font-size: .8rem; }
@keyframes cine-pulse-bar { 50% { filter: brightness(1.5); } }

/* the grid's reveal: every card pops as it lands, SSR and better slam in with a shockwave in their colour */
.slot { --rc: var(--gold); }
.slot.r-UR { --rc: #FF4DA0; } .slot.r-LR { --rc: #5FF2E4; } .slot.r-SR { --rc: #A77BFF; }
.slot.slam { position: relative; }
.slot.slam .flip { animation: card-slam .55s cubic-bezier(.2, 1.4, .4, 1); }
.slot.slam::after { content: ""; position: absolute; left: 50%; top: 45%; width: 20px; height: 20px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 3px solid var(--rc); box-shadow: 0 0 20px var(--rc); animation: card-shock .7s ease-out forwards; }
.slot.slam.r-LR .flip-front { animation: card-glow-lr 2s linear infinite; }
@keyframes card-slam { 0% { transform: scale(1.35); filter: brightness(2.2); } 60% { transform: scale(.96); } 100% { transform: none; filter: none; } }
@keyframes card-shock { from { width: 20px; height: 20px; opacity: 1; } to { width: 260px; height: 260px; opacity: 0; } }
@keyframes card-glow-lr { 0%, 100% { filter: drop-shadow(0 0 8px #5FF2E4); } 33% { filter: drop-shadow(0 0 8px #FF4DA0); } 66% { filter: drop-shadow(0 0 8px #F4C542); } }

/* the results: the best pull's headline over the fan, with rays in its colour behind */
.fan-title { --rc: var(--gold); display: grid; justify-items: center; gap: .1rem; margin: 1.2rem 0 0; text-align: center; animation: cine-pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.fan-title.r-UR { --rc: #FF4DA0; } .fan-title.r-LR { --rc: #5FF2E4; } .fan-title.r-SR { --rc: #A77BFF; } .fan-title.r-R { --rc: var(--muted); }
.fan-title b { font: 400 clamp(1.8rem, 6vw, 3.2rem)/1 var(--display); color: var(--rc); text-shadow: 3px 3px 0 var(--ink), 0 0 24px var(--rc); -webkit-text-stroke: 1px var(--ink); rotate: -3deg; }
.fan-title.r-LR b { background: linear-gradient(90deg, #5FF2E4, #FF4DA0, #F4C542, #5FF2E4) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cine-rainbow 2s linear infinite; text-shadow: none; }
.fan-title span { font-weight: 800; color: var(--paper); }
.pull-batch:is(.best-SSR, .best-UR, .best-LR) .pull-fan { overflow: hidden; }
.pull-batch:is(.best-SSR, .best-UR, .best-LR) .pull-fan::before { content: ""; position: absolute; left: 50%; bottom: -40%; width: 160%; aspect-ratio: 1; translate: -50% 0; z-index: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 22%, transparent) 0 6deg, transparent 6deg 18deg); animation: cine-spin 30s linear infinite; }
.pull-batch.best-UR .pull-fan::before { background: repeating-conic-gradient(from 0deg, rgb(255 77 160 / .25) 0 6deg, transparent 6deg 18deg); }
.pull-batch.best-LR .pull-fan::before { background: repeating-conic-gradient(from 0deg, rgb(95 242 228 / .25) 0 5deg, transparent 5deg 12deg, rgb(255 77 160 / .22) 12deg 17deg, transparent 17deg 24deg); }
@media (prefers-reduced-motion: reduce) {
  .banner-feature, .btn.shine::after, .slot.pop .flip, .slot.slam .flip, .slot.slam::after, .fan-title, .pull-fan::before { animation: none !important; }
}

/* ── 1.3.1 summon: Avdol's tarot. The pull's cards rain down into a spread, each hinting at what it is (app.js summon) ── */
.summon.rain { cursor: pointer; }
.rain-bg { position: absolute; inset: 0; animation: tour-fade .5s ease-out;
  background: radial-gradient(circle at 50% 45%, #2A1240 0%, #0B0514 70%), #07030D; }
.rain-bg::after { content: ""; position: absolute; inset: 0; opacity: .12;
  background: repeating-conic-gradient(from 0deg at 50% 45%, #C9A85A 0 1deg, transparent 1deg 15deg); animation: cine-spin 60s linear infinite; }
.rain-table { position: absolute; inset: 0; overflow: hidden; }
/* each card falls straight through the screen in its own column and leaves at the bottom */
.rain-drop { position: absolute; left: var(--lane); top: 0; width: var(--w); translate: -50% 0;
  animation: rain-drop var(--dur) linear var(--delay) both; }
.rain-drop.cue-hang { animation-name: rain-drop-hang; }
@keyframes rain-drop { from { transform: translate(0, calc(-1 * var(--w) * 2)) rotate(var(--r0)); } to { transform: translate(var(--x1), 110vh) rotate(var(--r1)); } }
@keyframes rain-drop-hang { from { transform: translate(0, calc(-1 * var(--w) * 2)) rotate(var(--r0)); } 30%, 52% { transform: translate(calc(var(--x1) * .4), 28vh) rotate(0deg); }
  to { transform: translate(var(--x1), 110vh) rotate(var(--r1)); } }
.rain-card { position: relative; display: block; width: var(--w); aspect-ratio: 7 / 11; border-radius: 9px;
  border: 3px solid #8A7A5A; box-shadow: 0 10px 22px rgb(0 0 0 / .55);
  background: radial-gradient(circle at 50% 50%, #3B1D5E 0%, #1A0B2C 72%), #1A0B2C; }
.rain-card::before { content: ""; position: absolute; inset: 5px; border-radius: 5px; border: 1px solid rgb(201 168 90 / .45);
  background: repeating-linear-gradient(45deg, rgb(201 168 90 / .1) 0 2px, transparent 2px 9px); }
.rain-card > b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 calc(var(--w) * .38)/1 var(--display); color: #C9A85A;
  text-shadow: 0 0 8px rgb(201 168 90 / .5); }

/* the hints: SR violet, SSR loud and clear */
.rain-card.l-SR { border-color: #A77BFF; box-shadow: 0 10px 22px rgb(0 0 0 / .55), 0 0 14px rgb(167 123 255 / .55); }
.rain-card.l-SR > b { color: #CDB6FF; }
.rain-card.l-SSR { border-color: #F4C542; box-shadow: 0 10px 22px rgb(0 0 0 / .55), 0 0 22px #F4C542, 0 0 48px rgb(244 197 66 / .45); }
.rain-card.l-SSR > b { color: #FFE27A; text-shadow: 0 0 14px #F4C542; }
.rain-card.l-SSR.landed { animation: rain-ssr 1.4s ease-in-out infinite alternate; }
.rain-sfx { position: absolute; left: 50%; bottom: 100%; z-index: 2; translate: -50% 0; white-space: nowrap; pointer-events: none;
  font: 400 calc(var(--w) * .32)/1 var(--display); color: #FFE27A; text-shadow: 2px 2px 0 #000, 0 0 16px #F4C542; animation: rain-sfx .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.rain-sfx::before { content: ""; position: absolute; left: 50%; top: calc(100% + var(--w) * .78); width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%;
  border: 3px solid #F4C542; box-shadow: 0 0 18px #F4C542; animation: card-shock .7s ease-out forwards; }
.summon.rain.quake .rain-table { animation: cine-quake .08s linear 5; }
@keyframes rain-ssr { to { filter: brightness(1.25); scale: 1.04; } }
@keyframes rain-sfx { from { transform: scale(2.6) rotate(-10deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

/* a UR: passes for an SR or an SSR, and slips one small cue (a different one each time) */
.rain-card.cue-spin, .rain-card.cue-spin.landed { animation: rain-spin var(--dur) linear both; }  /* a UR may turn over twice as it falls */
@keyframes rain-spin { to { transform: rotateY(720deg); } }
.rain-card.landed:is(.cue-shimmer, .cue-spark, .cue-go, .cue-ladybug, .cue-spiral, .cue-calamity)::after { position: absolute; pointer-events: none; }
.rain-card.landed.cue-shimmer::after { content: ""; inset: 0; border-radius: 7px; background: linear-gradient(115deg, transparent 40%, rgb(255 77 160 / .45) 50%, transparent 60%) -150% 0 / 250% 100% no-repeat;
  animation: sheen 1.6s ease-in-out .4s 2 both; }
.rain-card.landed.cue-spark::after { content: "✦"; top: -6px; right: -4px; font-size: calc(var(--w) * .16); color: #FF4DA0; text-shadow: 0 0 6px #FF4DA0;
  animation: rain-twinkle 1.8s ease-in-out .5s infinite; }
.rain-card.landed.cue-go::after { content: "ゴ"; top: 10%; right: calc(var(--w) * -.32); font: 400 calc(var(--w) * .2)/1 var(--display); color: #FF4DA0; opacity: 0;
  animation: rain-faint 2.4s ease-in-out .3s infinite; }
@keyframes rain-twinkle { 0%, 100% { opacity: 0; scale: .5; } 50% { opacity: 1; scale: 1; } }
@keyframes rain-faint { 0%, 100% { opacity: 0; } 50% { opacity: .55; } }

/* an LR: plainer still, and only its own stand's tell gives it away */
.rain-card.landed.cue-ladybug::after { content: "🐞"; bottom: 6%; left: 0; font-size: calc(var(--w) * .13); animation: rain-crawl 3.2s linear .6s both; }
@keyframes rain-crawl { from { translate: 0 0; opacity: 0; } 10% { opacity: 1; } to { translate: calc(var(--w) * .8) calc(var(--w) * -.25); opacity: .9; } }
.rain-card.cue-haste:not(.landed) { filter: drop-shadow(0 -26px 6px rgb(95 242 228 / .18)); }
.rain-card.landed.cue-spiral::after { content: ""; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: .5;
  background: conic-gradient(from 0deg, transparent, rgb(244 197 66 / .7), transparent 40%); mask: radial-gradient(circle, transparent 55%, #000 57%);
  animation: cine-spin 2.6s linear infinite; }
.rain-card.landed.cue-double::before { animation: rain-double 1.6s ease-in-out .3s both; }
@keyframes rain-double { 0% { translate: 0 0; } 35% { translate: 9px -7px; box-shadow: -9px 7px 0 rgb(255 255 255 / .12); } 100% { translate: 0 0; } }
.rain-card.landed.cue-calamity::after { content: ""; left: 62%; top: -40%; width: 5px; height: 5px; border-radius: 50%; background: #0B0514; box-shadow: 0 0 0 1px rgb(255 255 255 / .35);
  animation: rain-speck 1.3s cubic-bezier(.5, 0, 1, .6) .5s both; }
@keyframes rain-speck { from { translate: 0 0; opacity: 0; } 20% { opacity: 1; } 90% { translate: 0 calc(var(--w) * .9); opacity: 1; box-shadow: 0 0 0 1px rgb(255 255 255 / .35); }
  to { translate: 0 calc(var(--w) * .9); opacity: 0; box-shadow: 0 0 10px 4px rgb(255 255 255 / .5); } }

/* ── the summon's openings (app.js PRE): the Arrow, Magician's Red, ZA WARUDO, menacing ── */
.summon.rain { --w: min(13vw, 96px); }
.pre { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transition: opacity .4s; }
.pre.done { opacity: 0; }
.pre-say { position: absolute; left: 50%; top: 22%; translate: -50% 0; margin: 0; white-space: nowrap; font: 400 clamp(1.6rem, 6vw, 3rem)/1 var(--display);
  color: #FFE27A; text-shadow: 3px 3px 0 #000, 0 0 18px rgb(244 197 66 / .6); -webkit-text-stroke: 1px #000; animation: pre-say 1s ease-out both; }
.pre-say.big { top: 16%; font-size: clamp(2.2rem, 9vw, 4.6rem); animation-duration: 1.4s; }
.pre-say.fire { color: #FF8A3D; text-shadow: 3px 3px 0 #000, 0 0 22px #FF5A1F; }
.pre-say.whoosh { top: 40%; left: 30%; font-size: clamp(1.4rem, 5vw, 2.4rem); } .pre-say.whoosh.r { left: 70%; top: 58%; }
.pre-say.shuf { top: 66%; font-size: clamp(1.2rem, 4vw, 2rem); color: #CDB6FF; }
.pre-say.tick { top: 30%; left: 34%; font-size: clamp(1rem, 3.5vw, 1.6rem); color: #fff; } .pre-say.tick.t1 { left: 66%; }
.pre-say.go { top: calc(8% + var(--i) * 17%); left: 9%; translate: 0 0; color: #B04DFF; text-shadow: 3px 3px 0 #000, 0 0 14px #B04DFF; animation: pre-go 1.2s cubic-bezier(.2, 1.6, .4, 1) both, cine-menace 1.4s ease-in-out 1.2s infinite; }
.pre-say.go.r { left: auto; right: 9%; }
@keyframes pre-say { from { transform: scale(2.4) rotate(-8deg); opacity: 0; } 18% { transform: rotate(-4deg); opacity: 1; } 75% { opacity: 1; } to { opacity: 0; transform: translateY(-14px) rotate(-4deg); } }
@keyframes pre-go { from { transform: scale(2.6); opacity: 0; } to { opacity: .9; } }

/* the deck, in the middle */
.pre-deck { position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 7 / 11; translate: -50% -50%; opacity: 0; transition: opacity .4s, transform .4s; }
.pre-deck.in { opacity: 1; animation: pre-deck-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.pre-deck .rain-card, .pre-fly .rain-card, .pre-fan .rain-card { position: absolute; inset: 0; width: 100%; }
.pre-deck .rain-card { translate: calc(var(--i) * -1.5px) calc(var(--i) * -2px); }
.pre-deck.shuffle .rain-card:nth-child(odd) { animation: riffle-l .8s ease-in-out 3; }
.pre-deck.shuffle .rain-card:nth-child(even) { animation: riffle-r .8s ease-in-out 3; }
.pre-deck.hit { animation: cine-quake .08s linear 5; }
.pre-deck.gone, .pre-fan.gone { opacity: 0; transition: opacity .15s; }
@keyframes pre-deck-in { from { transform: scale(.3) rotate(-20deg); } }
@keyframes riffle-l { 35% { transform: translate(-115%, -8%) rotate(-14deg); } 70% { transform: translate(-20%, 0) rotate(-3deg); } }
@keyframes riffle-r { 35% { transform: translate(115%, -8%) rotate(14deg); } 70% { transform: translate(20%, 0) rotate(3deg); } }

/* the flung cards: up and off the top */
.pre-fly { position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 7 / 11; translate: -50% -50%;
  animation: pre-fly .9s cubic-bezier(.3, .5, .4, 1) calc(var(--k) * 45ms) both; }
@keyframes pre-fly { from { transform: none; } to { transform: translate(var(--x), -90vh) rotate(var(--r)); } }

/* the Arrow: zooms across the screen, or drops onto the deck */
.pre-arrow { position: absolute; left: 0; top: 0; width: min(34vw, 260px); aspect-ratio: 1; opacity: 0; filter: drop-shadow(0 0 16px #F4C542); }
.pre-arrow svg { width: 100%; height: 100%; rotate: 90deg; }
.pre-arrow::after { content: ""; position: absolute; right: 50%; top: 47%; width: 70vw; height: 6%; border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgb(244 197 66 / .8)); }
.pre-arrow.zoom1 { animation: pre-zoom1 .9s cubic-bezier(.6, 0, .4, 1) both; }
.pre-arrow.zoom2 { animation: pre-zoom2 .9s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes pre-zoom1 { from { opacity: 1; transform: translate(-40vw, 30vh) rotate(-12deg); } 95% { opacity: 1; } to { opacity: 0; transform: translate(120vw, 18vh) rotate(-12deg); } }
@keyframes pre-zoom2 { from { opacity: 1; transform: translate(120vw, 52vh) rotate(192deg); } 95% { opacity: 1; } to { opacity: 0; transform: translate(-40vw, 44vh) rotate(192deg); } }
.pre-arrow.down { left: 50%; translate: -50% 0; width: min(24vw, 170px); }
.pre-arrow.down svg { rotate: 180deg; }
.pre-arrow.down::after { right: auto; left: 47%; top: auto; bottom: 50%; width: 6%; height: 60vh; background: linear-gradient(transparent, rgb(244 197 66 / .8)); }
.pre-arrow.drop { animation: pre-drop .8s cubic-bezier(.7, 0, .9, .4) both; }
@keyframes pre-drop { from { opacity: 1; transform: translateY(-60vh); } to { opacity: 1; transform: translateY(calc(50vh - min(24vw, 170px) * .9)); } }
.pre.impact::after { content: ""; position: absolute; inset: 0; background: #fff; animation: cine-flash .5s ease-out both; }

/* Magician's Red: a ring of fire, the cards fanned inside it */
.pre-fire { position: absolute; left: 50%; top: 50%; width: min(70vmin, 520px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; scale: .3;
  background: conic-gradient(from 0deg, #FF5A1F, #FFB13D, #FF3D1F, #FFD25E, #FF5A1F, #FF8A3D, #FF3D1F, #FF5A1F);
  mask: radial-gradient(circle, transparent 58%, #000 61%, #000 66%, transparent 72%); filter: blur(2px) drop-shadow(0 0 24px #FF5A1F);
  transition: opacity .5s, scale .6s cubic-bezier(.2, 1.4, .4, 1); }
.pre-fire.lit { opacity: 1; scale: 1; animation: cine-spin 3s linear infinite, pre-flicker .18s steps(2) infinite; }
@keyframes pre-flicker { 50% { filter: blur(3px) drop-shadow(0 0 34px #FF8A3D); } }
.pre-fan { position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 7 / 11; translate: -50% -50%; }
.pre-fan .rain-card { transform-origin: 50% 170%; transition: transform .8s cubic-bezier(.2, 1.2, .4, 1); }
.pre-fan.open .rain-card { transform: rotate(calc((var(--i) - 4.5) * 15deg)); }
.pre-fan.close .rain-card { transform: none; }
.pre-fan.turn:not(.close) { animation: cine-spin 1.9s cubic-bezier(.5, 0, .5, 1) 1; }

/* ZA WARUDO: the colour drains, a clock ticks */
.summon.rain.tstop .rain-bg, .summon.rain.tstop .pre-deck { filter: grayscale(1) invert(.85) hue-rotate(180deg); transition: filter .3s; }
.pre-dome { position: absolute; left: 50%; top: 50%; width: 10px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 3px solid #B48CF0; box-shadow: 0 0 30px #B48CF0, inset 0 0 30px #B48CF0; animation: pre-dome 1.1s ease-out both; }
@keyframes pre-dome { to { width: 240vmax; opacity: 0; } }
.pre-clock { --tick: 0; position: absolute; left: 50%; top: 50%; width: min(56vmin, 400px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0;
  border: 4px solid rgb(255 255 255 / .55); background: repeating-conic-gradient(rgb(255 255 255 / .5) 0 1deg, transparent 1deg 30deg); transition: opacity .5s; }
.pre-clock.in { opacity: 1; } .pre-clock.gone { opacity: 0; }
.pre-clock i { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 40%; margin-left: -2px; border-radius: 2px; background: #fff; transform-origin: 50% 100%;
  rotate: calc(var(--tick) * 6deg); transition: rotate .12s cubic-bezier(.2, 2, .4, 1); }
.pre-clock i + i { height: 28%; width: 6px; margin-left: -3px; rotate: calc(var(--tick) * 30deg); }
.pre-deck.frozen { animation: none; }

/* a shiny never hides: a prismatic card that sparkles as it falls */
.rain-card.shiny { border-color: transparent; background: linear-gradient(#1A0B2C, #1A0B2C) padding-box,
  linear-gradient(90deg, #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF, #FF5EAE) border-box; background-size: 100% 100%, 300% 100%;
  box-shadow: 0 0 18px #FF5EAE, 0 0 30px #6EF2C9; }
.rain-card.shiny, .rain-card.shiny.landed { animation: shiny-border 1.2s linear infinite; }
.rain-card.shiny > b { background: linear-gradient(90deg, #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes shiny-border { to { background-position: 0 0, 300% 0; } }

/* turning a card over: a flash and a ring in its colour, for every rarity (grid and cinematic) */
.slot.r-R { --rc: #C9D3E8; }
.slot.pop { position: relative; }
.slot.pop .flip { animation: card-pop .4s cubic-bezier(.2, 1.8, .4, 1); }
.slot.pop .flip-front { animation: card-flash .45s ease-out; }
.slot.pop::after { content: ""; position: absolute; left: 50%; top: 45%; width: 14px; height: 14px; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--rc); box-shadow: 0 0 12px var(--rc); animation: card-ring .5s ease-out forwards; }
@keyframes card-pop { 0% { transform: scale(1.18); } 50% { transform: scale(.95); } }
@keyframes card-flash { from { filter: brightness(2.4); } }
@keyframes card-ring { from { opacity: 1; } to { width: 170px; height: 170px; opacity: 0; } }
.cine.popped .cine-card { animation: cine-pop .45s cubic-bezier(.2, 1.8, .4, 1); }
.cine.popped:is(.r-R, .r-SR) .cine-flash { animation: cine-flash .35s ease-out; opacity: 0; }
.cine.popped.r-SR .cine-flash { background: #A77BFF; }
@media (prefers-reduced-motion: reduce) {
  .pre *, .slot.pop .flip, .slot.pop::after, .cine.popped .cine-card { animation: none !important; }
}

/* RARE! / SUPER RARE! popping with the cards: in the rain (by look) and as each card turns in the grid (by rarity) */
.flip-call { position: absolute; left: 50%; z-index: 4; white-space: nowrap; pointer-events: none; font-family: var(--display); line-height: 1;
  -webkit-text-stroke: 1px #000; text-shadow: 2px 2px 0 #000; animation: call-pop 1.3s cubic-bezier(.2, 1.6, .4, 1) both; }
.flip-call { top: 38%; font-size: clamp(.9rem, 2.6vw, 1.4rem); color: #CDB6FF; }
.flip-call.r-SSR { color: #FFE27A; font-size: clamp(1.1rem, 3.2vw, 1.8rem); }
.flip-call.r-UR { color: #FF4DA0; font-size: clamp(1.2rem, 3.6vw, 2rem); }
.flip-call.r-LR { font-size: clamp(1.3rem, 4vw, 2.2rem); background: linear-gradient(90deg, #5FF2E4, #FF4DA0, #F4C542); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
@keyframes call-pop { 0% { transform: translateX(-50%) scale(2.4) rotate(-10deg); opacity: 0; } 18% { transform: translateX(-50%) scale(1) rotate(-5deg); opacity: 1; }
  75% { opacity: 1; } 100% { transform: translateX(-50%) translateY(-14px) rotate(-5deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flip-call { animation: none; opacity: 0; } }

/* the cinematic's flip titles: R and SR get theirs too, quieter than an SSR's stamp */
.cine.revealed.r-R .cine-title { font-size: clamp(1.2rem, 4.5vw, 2rem); color: #C9D3E8; opacity: .8; animation: call-fade .5s ease-out both; }
.cine.revealed.r-SR .cine-title { font-size: clamp(1.5rem, 6vw, 2.8rem); color: #CDB6FF; text-shadow: 2px 2px 0 #000, 0 0 14px #A77BFF; animation: call-fade .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes call-fade { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); } }

/* a shiny's own show in the cinematic (app.js shinyShow) */
.cine-shiny { pointer-events: none; }
div.cine-shiny { position: absolute; inset: 0; z-index: 2; overflow: hidden; }
.shiny-prism { position: absolute; inset: -20%; opacity: 0; mix-blend-mode: screen;
  background: conic-gradient(from 0deg, #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF, #B48CF0, #FF5EAE); filter: blur(30px); animation: shiny-prism 1.6s ease-out both; }
@keyframes shiny-prism { 0% { opacity: 0; transform: scale(.4) rotate(0); } 20% { opacity: .85; } 100% { opacity: .18; transform: scale(1.2) rotate(120deg); } }
.shiny-rain b { position: absolute; top: -8%; animation: shiny-fall 2.4s linear both; text-shadow: 0 0 8px currentColor; }
@keyframes shiny-fall { to { transform: translateY(115vh) rotate(360deg); opacity: .2; } }
.cine-card > i.cine-shiny { position: absolute; inset: 0; z-index: 3; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(2px); }
.shiny-holo { background: linear-gradient(115deg, transparent 25%, rgb(255 94 174 / .45) 38%, rgb(255 212 94 / .45) 46%, rgb(110 242 201 / .45) 54%, rgb(110 168 255 / .45) 62%, transparent 75%) -150% 0 / 260% 100% no-repeat;
  mix-blend-mode: color-dodge; animation: shiny-sweep 2.2s ease-in-out .3s infinite; }
@keyframes shiny-sweep { 0% { background-position: -150% 0; } 60%, 100% { background-position: 150% 0; } }
.cine-card > i.shiny-stamp { inset: auto 0 38% 0; display: grid; place-items: center; height: auto; border-radius: 0; font: 400 clamp(2rem, 9vw, 3.6rem)/1 var(--display); font-style: normal;
  letter-spacing: .08em; rotate: -14deg; color: transparent; -webkit-text-stroke: 2px #fff;
  background: linear-gradient(90deg, #FF5EAE, #FFD45E, #6EF2C9, #6EA8FF, #FF5EAE) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 14px #fff); animation: shiny-stamp .5s cubic-bezier(.2, 1.6, .4, 1) .35s both, cine-rainbow 2s linear .85s infinite; }
@keyframes shiny-stamp { from { opacity: 0; transform: translateZ(2px) scale(3); } to { opacity: 1; transform: translateZ(2px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .cine-shiny, .cine-shiny * { animation: none !important; } .shiny-rain { display: none; } }

/* a live Man vs Machine: its menu link glows until the player is on it, so a new event isn't missed */
.side-link.hot[data-tour="machine"]:not([aria-current]), .menu-item.hot[href$="/machine"]:not([aria-current]) {
  box-shadow: inset 0 0 0 2px var(--gold); animation: mvm-call 2.2s ease-in-out infinite; }
@keyframes mvm-call { 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px 2px rgb(244 197 66 / .45); } }
@media (prefers-reduced-motion: reduce) { .side-link.hot[data-tour="machine"], .menu-item.hot[href$="/machine"] { animation: none; } }

/* ===================================================================================
   Summoners' Hall (Test lab, templates/lab/hall.html): five stands, three waves, a floor ladder per dungeon.
   =================================================================================== */
.mode-hero[data-mode="hall"] { --mode: #FFB86B; --mode-2: #5B2A86; }
.type-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.type-pill.stat-damage { background: rgb(214 36 110 / .2); color: #FF8DB9; }
.type-pill.stat-armor { background: rgb(122 63 184 / .3); color: #D7B8FF; }
.type-pill.stat-health { background: rgb(91 227 142 / .15); color: #7DF0A8; }
.type-pill.stat-speed { background: rgb(43 179 168 / .2); color: #7FE3DA; }
.type-pill.stat-critical { background: rgb(244 197 66 / .18); color: var(--gold); }
.hall-run, .hall-team, .hall-dungeon { margin: 0 0 1rem; padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--night-2); border: 1px solid var(--night-3); }
.hall-run { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; border-color: var(--gold); }
.hall-waves { display: flex; gap: .4rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.hall-waves li { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--night-3); font-weight: 700; }
.hall-waves li.done { background: var(--teal, #2BB3A8); border-color: transparent; color: var(--ink); }
.hall-waves li.now { border-color: var(--gold); box-shadow: 0 0 12px rgb(244 197 66 / .5); }
.hall-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.hall-head h2 { margin: 0; }
.hall-types { display: flex; gap: .3rem; margin: 0; }
.hall-roster { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: .8rem 0; padding: 0; list-style: none; }
.hall-roster li { display: grid; gap: .15rem; text-align: center; }
.hall-roster img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--radius-ui); border: 3px solid var(--night-3); background: var(--night-3); }
.hall-roster li.rare img { border-color: var(--violet); } .hall-roster li.epic img { border-color: var(--gold-deep); }
.hall-roster li.legend img { border-color: var(--magenta); } .hall-roster li.mythic img { border-color: var(--gold); }
.hall-roster span { font-weight: 700; font-size: .85rem; line-height: 1.2; overflow-wrap: anywhere; }
.hall-roster small { color: var(--muted, #B8A9D9); font-size: .75rem; }
.hall-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hall-pick .sp { flex: 1 1 260px; }
.hall-dungeons { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.hall-dungeon { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; border-top: 4px solid var(--accent, var(--violet)); }
.hall-dungeon.stat-damage { --accent: #FF8DB9; } .hall-dungeon.stat-speed { --accent: #7FE3DA; } .hall-dungeon.stat-health { --accent: #7DF0A8; }
.hall-boss { position: relative; }
.hall-boss img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top; border-radius: var(--radius-ui); border: 3px solid var(--accent, var(--gold)); }
.hall-boss-name { position: absolute; inset: auto 0 0; padding: .3rem .4rem; font-size: .75rem; font-weight: 700; text-align: center; background: linear-gradient(transparent, rgb(0 0 0 / .85)); border-radius: 0 0 var(--radius-ui) var(--radius-ui); }
.hall-dungeon-body h2 { margin: 0; }
.hall-dungeon-body p { margin: .3rem 0; }
.hall-matchup { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hall-bring { font-weight: 700; color: var(--gold); }
.hall-floors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin-top: .6rem; }
.hall-floor { min-height: 2.4rem; border-radius: var(--radius-ui); border: 2px solid var(--night-3); background: var(--night-3); color: var(--paper); font: 700 .9rem/1 var(--body); cursor: pointer; }
.hall-floor.done { background: rgb(43 179 168 / .25); border-color: #2BB3A8; color: #7FE3DA; }
.hall-floor.open { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 0 14px rgb(244 197 66 / .45); }
.hall-floor.locked, .hall-floor:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.hall-floor:not(:disabled):hover { border-color: var(--gold); }
@media (max-width: 600px) {
  .hall-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hall-dungeon { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .7rem; }
}
.hall-auto { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .7rem; }
.hall-run { gap: .6rem; }
.hall-auto-box { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--gold); cursor: pointer; }
.passive { margin: .35rem 0; }
.passive-tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--magenta)); color: var(--ink); font-weight: 800; font-size: .75rem; letter-spacing: .02em; }