/* ============================================================
   InsanityCraft SPA shell: persistent animated background, a
   morphing logo, and content swapped into #view via the View
   Transitions API. Loaded AFTER insanity.css (overrides it).
   ============================================================ */

/* The animated scene is a fixed, persistent backdrop that never reloads between
   routes. Its width is based on 100vw (the FULL window width, which does not
   change when a scrollbar appears/disappears) instead of the content box, so the
   scene + its anchored overlays never jitter on a scrollbar toggle. No gutter is
   reserved, so there is never an empty bar when a page does not need to scroll. */
.hero-bg{
  position:fixed;
  top:-14px; bottom:-14px; left:-14px; right:auto;
  width:calc(100vw + 28px);
  z-index:0;
  view-transition-name:ic-bg;
}
/* Dim veil for legibility of content panels on sub-pages (0 on home).
   It has its own view-transition-name so the fade is driven by the View
   Transition (a plain CSS transition gets frozen during the swap and snaps). */
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 40%, rgba(12,5,20,.28), rgba(12,5,20,.62));
  opacity:0; view-transition-name:ic-scrim;
  transition:opacity .35s ease;   /* fallback for browsers without View Transitions */
}
body.route-sub .scrim{ opacity:0; }   /* dark veil off; content panel is opaque enough on its own */

.nav{ view-transition-name:ic-nav; }

/* Hide the nav auth chip until auth-nav.js has resolved /me, so a logged-in user
   never flashes the "Login" button before their account name loads. visibility
   (not display) keeps its layout space so the nav does not jump. */
html:not(.auth-ready) #loginChip,
html:not(.auth-ready) #acctDropdown{ visibility:hidden; }

/* The footer is display:none only for the NEW snapshot of a transition (vt-busy
   is added by app.js after the old snapshot is captured), so it never flashes
   expanded on a still-loading page. */
html.vt-busy .footer{ display:none !important; }

/* Fade the footer in whenever it becomes visible: on initial page load, and on
   every SPA navigation (removing vt-busy flips the footer display:none -> block,
   which restarts this animation). `backwards` fill so it starts transparent. */
.footer{ animation:footer-load-in .45s ease backwards; }
@keyframes footer-load-in{ from{ opacity:0; } to{ opacity:1; } }

/* The swapped content region sits above bg + scrim. */
#view{ position:relative; z-index:2; }

/* ---- HOME: exactly one viewport tall, never scrolls ---- */
body.route-home{ height:100vh; height:100dvh; overflow:hidden; }
body.route-home #view{ height:100%; }
.home-wrap{
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:54px 20px 116px; width:100%; max-width:1060px; margin:0 auto;
  view-transition-name:ic-home-content;   /* own group -> paints above the scene, clean cross-fade */
}
/* Home footer: collapsed 14px strip at the bottom, hover/focus to expand, and
   explicitly above the #view content layer (z-index:2) so it is never covered. */
/* Collapse the home footer with max-height (NOT transform). View-transition
   snapshots render a fixed element without its transform, so a translateY
   collapse gets captured fully-expanded (a flash on exit). max-height + overflow
   is captured as the real 14px strip. `transform:none !important` overrides
   insanity.css's translateY rule which would otherwise still apply. */
body.route-home .footer{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  transform:none !important;
  max-height:14px; overflow:hidden;
  transition:max-height .3s ease;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  view-transition-name:ic-home-footer;   /* fades out/in as its own group on nav */
}
body.route-home .footer:hover,
body.route-home .footer:focus-within{ max-height:120px; }

/* ---- The logo: one shared morphing element (big centred -> small top) ---- */
.site-logo{ display:block; text-decoration:none; view-transition-name:ic-logo; }
.home-wrap .site-logo{ width:min(560px,88%); margin:0 auto; }
.home-wrap .hero-logo-wrap{
  display:block; width:100%;
  animation:logo-breathe 5.5s ease-in-out infinite;
  filter:drop-shadow(0 12px 34px rgba(255,157,46,.38)) drop-shadow(0 3px 10px rgba(30,8,44,.55));
}
.home-wrap .hero-logo{ width:100%; height:auto; display:block; }

/* ---- SUB PAGES: logo centred in a header band, content panel below ----
   The band spans from the top of the page to the top of the panel, and the
   logo is centred in it -> the logo's middle sits exactly halfway between the
   page top and the panel top. */
.sub-wrap{
  position:relative;
  max-width:1100px; margin:0 auto;   /* cap on large monitors; stays fluid + padded below this */
  padding:0 clamp(14px,4vw,30px) 70px;
  display:flex; flex-direction:column; align-items:center;
}
.sub-logo-band{
  width:100%;
  height:clamp(210px,30vh,300px);
  display:flex; align-items:center; justify-content:center;
}
.sub-wrap .site-logo{ width:clamp(200px,30vw,260px); margin:0; }
.sub-wrap .hero-logo-wrap{ display:block; width:100%;
  filter:drop-shadow(0 8px 22px rgba(255,157,46,.34)) drop-shadow(0 2px 8px rgba(30,8,44,.5)); }
.sub-wrap .hero-logo{ width:100%; height:auto; display:block; }

/* Frosted content card shared by every sub-page, sat on the scene. */
.page-panel{
  width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px;
  box-shadow:0 22px 60px rgba(18,6,28,.34), inset 0 1px 0 rgba(255,255,255,.9);
  color:var(--ink);
  padding:clamp(22px,4vw,40px);
  view-transition-name:ic-sub-content;   /* own group -> paints above the scene, clean cross-fade */
  /* no backdrop-filter: it breaks view-transition snapshots (snaps + ghosts) */
}
.page-panel h1{ font-family:var(--font-display); color:var(--ink); margin:0 0 .3em; font-size:clamp(1.7rem,4vw,2.4rem); }

/* coming-soon (wiki) */
.wiki-soon{ text-align:center; }
.wiki-soon .soon-ic{
  width:76px; height:76px; margin:0 auto 18px; border-radius:22px; display:grid; place-items:center;
  font-size:2rem; background:rgba(242,140,30,.14); border:1px solid rgba(242,140,30,.32);
}
.wiki-soon p{ color:var(--ink-soft,rgba(36,19,51,.66)); font-weight:600; line-height:1.6; margin:0 auto 22px; max-width:440px; }
.btn-solid{
  display:inline-block; font-family:var(--font-body); font-weight:800; font-size:1rem; cursor:pointer;
  /* NO border. It used to be 1px transparent, which the gradient painted under (ragged corners);
     clipping the gradient to the padding box then let the page show through that 1px as a pale ring.
     With no border at all there is neither, and the extra 1px of padding keeps the size identical. */
  border:0; border-radius:12px; padding:13px 25px; text-decoration:none;
  /* A solid base UNDER the gradient, in the gradient's own starting colour. The corner pixels blend the
     button into whatever is behind it, and against a near-white modal that read as a pale dot at the
     top left; now that blend is gold on gold. */
  background:var(--gold) linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#3a1e06;
  box-shadow:0 8px 20px rgba(242,140,30,.32); transition:.15s;
}
.btn-solid:hover{ filter:brightness(1.04); transform:translateY(-1px); }

/* a "bare" panel drops the frosted card so its own inner cards sit on the scene */
.page-panel.bare{ background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; }
.page-loading{ text-align:center; padding:40px 0; color:var(--ink); font-weight:700; }
.spin{ display:inline-block; width:16px; height:16px; border:2.5px solid rgba(36,19,51,.18); border-top-color:var(--gold-deep); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-3px; margin-right:9px; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Rules (folded into the shell) ----
   Laid out like the apply/appeal forms: everything lives INSIDE the white
   page panel. Header card, realm tabs, then one centred section title per
   header with a hairline divider between sections. One realm renders at a
   time (/rules/<realm>/), so --accent is set on the wrap by the module. */
.rules-wrap{ max-width:none; margin:0;   /* fill the white container edge to edge */
  --ink-soft:rgba(36,19,51,.64); --line-2:rgba(36,19,51,.16); --row-line:rgba(36,19,51,.10); }
.rules-head{
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(18,6,28,.08), inset 0 1px 0 rgba(255,255,255,.7);
  padding:22px 26px 18px;
}
.rules-head .eyebrow{ font-weight:800; text-transform:uppercase; letter-spacing:3px; font-size:.76rem; color:var(--gold-deep); }
.rules-head h1{ font-family:var(--font-display); font-size:clamp(1.7rem,4.5vw,2.5rem); margin:.2em 0 .1em; color:var(--ink); }
.rules-head p{ max-width:560px; margin:0 auto; color:var(--ink-soft); font-weight:600; font-size:1rem; line-height:1.55; }
.rules-tabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:24px 0 0; }
.rtab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none; border:1px solid var(--line-2); background:rgba(255,255,255,.72); color:var(--ink); font-family:var(--font-body); font-weight:800; font-size:.92rem; border-radius:999px; padding:9px 16px; transition:.15s; white-space:nowrap; }
.rtab svg{ width:17px; height:17px; opacity:.75; }
.rtab:hover{ background:#fff; transform:translateY(-1px); }
.rtab.active{ color:#fff; border-color:transparent; background:var(--tab-accent,var(--gold-deep)); box-shadow:0 7px 18px rgba(18,6,28,.18); }
.rtab.active svg{ opacity:1; }
.rules-tabnote{ text-align:center; color:var(--ink-soft); font-weight:600; font-size:.84rem; line-height:1.5; margin:12px auto 0; max-width:560px; }
.rules-tabnote + .rules-panes{ margin-top:20px; }   /* the note already carries the gap under the tabs */
.rules-panes{ border-top:1px solid var(--line-2); margin-top:24px; animation:rules-fade .3s ease; }
@keyframes rules-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.rules-wrap .rsec{ margin:26px 0 2px; }
.rules-wrap .rsec-title{ font-family:var(--font-display); font-size:1.18rem; color:var(--ink); margin:0; text-align:center; }
.rules-wrap .rsec-sub{ text-align:center; max-width:820px; margin:5px auto 0; color:var(--ink-soft); font-weight:600; font-size:.84rem; line-height:1.5; }
.rules-wrap .rdiv{ border:0; border-top:1px solid var(--line-2); margin:36px 0 0; }
.rules-wrap .rdiv + .rsec{ margin-top:36px; }   /* equal breathing room above and below the divider line */
.rules-wrap .rsub{ font-family:var(--font-display); font-size:1.02rem; color:var(--accent); margin:22px 0 0; text-align:center; }
.rules-wrap ol.rlist{ list-style:none; counter-reset:r; margin:14px 0 0; padding:0; }
.rules-wrap ol.rlist ol.rlist{ margin:8px 0 2px; }   /* sub-bullets sit inside their parent item, so the indent is inherited */
.rules-wrap ol.rlist li{ counter-increment:r; position:relative; --rline:1.52rem; padding:7px 0 7px 36px; border-top:1px solid var(--row-line); font-weight:600; font-size:.95rem; line-height:1.6; color:#33223f; }
.rules-wrap ol.rlist > li:first-child{ border-top:0; }
.rules-wrap ol.rlist li::before{ content:counters(r,"."); position:absolute; left:0; top:calc(7px + (var(--rline) - 22px) / 2); min-width:22px; height:22px; padding:0 4px; border-radius:7px; background:color-mix(in srgb,var(--accent) 15%,#fff); color:var(--accent); font-family:var(--font-body); font-weight:800; font-size:.76rem; display:grid; place-items:center; }
.rules-wrap ol.rlist ol.rlist li{ padding-left:48px; font-size:.92rem; --rline:1.472rem; }   /* wider chip for 12.1 / 12.1.1 */
.rules-wrap ol.rlist ol.rlist li::before{ font-size:.7rem; }
.rules-wrap ol.rlist li.rnote{ counter-increment:none; border-top:0; margin:10px 0 2px; padding:10px 14px; border-radius:10px; background:color-mix(in srgb,var(--accent) 8%,#fff); color:var(--ink-soft); font-size:.9rem; font-weight:600; }
.rules-wrap ol.rlist li.rnote::before{ content:none; }
.rules-wrap .rempty{ text-align:center; color:var(--ink-soft); font-weight:600; padding:30px 0; }

/* ---- Clients & mods table (its own tab) ---- */
.rules-wrap .cm-intro{ color:var(--ink-soft); font-weight:600; font-size:.92rem; line-height:1.6; margin:26px auto 0; max-width:760px; text-align:center; }
.rules-wrap .cm-scroll{ overflow-x:auto; margin-top:14px; -webkit-overflow-scrolling:touch; }
.rules-wrap .cm-table{ width:100%; border-collapse:collapse; min-width:460px; --cm-yes:#41982f; --cm-no:#d63328; }
.rules-wrap .cm-table th, .rules-wrap .cm-table td{ text-align:left; padding:11px 10px; border-top:1px solid var(--row-line); }
.rules-wrap .cm-table thead th{ border-top:0; border-bottom:1px solid var(--line-2); font-family:var(--font-body); font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft); }
.rules-wrap .cm-table thead th + th{ text-align:center; width:104px; color:var(--c); }
.rules-wrap .cm-table tbody th{ font-weight:600; }
.rules-wrap .cm-name{ display:block; font-weight:700; font-size:.95rem; line-height:1.45; color:#33223f; }
.rules-wrap .cm-note{ display:block; margin-top:3px; color:var(--ink-soft); font-weight:600; font-size:.82rem; line-height:1.5; }
.rules-wrap .cm-table td{ text-align:center; font-size:1.02rem; font-weight:800; }
.rules-wrap .cm-table td span[aria-hidden]{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px; }
.rules-wrap .cm-yes span[aria-hidden]{ color:var(--cm-yes); background:color-mix(in srgb,var(--cm-yes) 15%,#fff); }
.rules-wrap .cm-no span[aria-hidden]{ color:var(--cm-no); background:color-mix(in srgb,var(--cm-no) 14%,#fff); }
.rules-wrap .cm-table tbody tr:hover{ background:rgba(36,19,51,.028); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---- Apply / Appeal forms (folded into the shell) ---- */
.forms-wrap{ max-width:none; margin:0;   /* fill the white container edge to edge */
  --ink-soft:rgba(36,19,51,.64); --line-2:rgba(36,19,51,.16); --red:#e2483d; }
.forms-head{
  text-align:center; margin-bottom:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  box-shadow:0 8px 22px rgba(18,6,28,.08), inset 0 1px 0 rgba(255,255,255,.7);
  padding:22px 26px 18px;
}
.forms-head .eyebrow{ font-weight:800; text-transform:uppercase; letter-spacing:3px; font-size:.76rem; color:var(--gold-deep); }
.forms-head h1{ font-family:var(--font-display); font-size:clamp(1.7rem,4.5vw,2.5rem); margin:.2em 0 .1em; color:var(--ink); }
.forms-head p{ max-width:560px; margin:0 auto; color:var(--ink-soft); font-weight:600; font-size:1rem; line-height:1.55; }
.forms-wrap .intro{ color:#33223f; font-weight:600; line-height:1.6; font-size:.98rem; padding:0 0 24px; margin:2px 0 2px; border-bottom:1px solid var(--line-2); }
.forms-wrap .intro p{ margin:.2em 0 .7em; } .forms-wrap .intro ul{ margin:.3em 0 .6em; padding-left:1.1em; } .forms-wrap .intro li{ margin:.25em 0; } .forms-wrap .intro a{ color:var(--gold-deep); }
.forms-wrap .fsec{ margin:26px 0 2px; text-align:center; }
.forms-wrap .fsec-title{ font-family:var(--font-display); font-size:1.18rem; color:var(--ink); margin:0; }
.forms-wrap .fsec-help{ color:var(--ink-soft); font-weight:600; font-size:.92rem; line-height:1.55; margin:8px auto 0; max-width:620px; }
.forms-wrap .fdiv{ border:0; border-top:1px solid var(--line-2); margin:36px 0 0; }
.forms-wrap .fdiv + .fsec{ margin-top:36px; }   /* equal breathing room above and below the divider line */
.forms-wrap .field{ margin:16px 0 0; }
.forms-wrap .field > label.q{ display:block; font-weight:800; font-size:.98rem; color:var(--ink); line-height:1.45; margin-bottom:3px; }
.forms-wrap .field .req{ color:var(--red); font-weight:800; margin-left:3px; }
.forms-wrap .fhelp{ color:var(--ink-soft); font-weight:600; font-size:.86rem; line-height:1.5; margin:2px 0 8px; }
.forms-wrap input[type=text],.forms-wrap input[type=email],.forms-wrap input[type=password],.forms-wrap input[type=number],.forms-wrap input[type=date],.forms-wrap textarea,.forms-wrap select{ width:100%; font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:12px 14px; outline:none; transition:.14s; }
.forms-wrap input[type=date]{ cursor:pointer; min-height:calc(1rem + 24px + 2px); }
.forms-wrap input[type=date]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.6; transition:.14s; }
.forms-wrap input[type=date]::-webkit-calendar-picker-indicator:hover{ opacity:1; }
.forms-wrap textarea{ min-height:120px; resize:vertical; line-height:1.55; }
.forms-wrap select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; padding-right:42px; cursor:pointer; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23241333" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'); background-repeat:no-repeat; background-position:right 15px center; background-size:16px; }
.forms-wrap input:focus,.forms-wrap textarea:focus,.forms-wrap select:focus{ border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(242,140,30,.16); }
.forms-wrap input[type=number]{ -moz-appearance:textfield; }
.forms-wrap input[type=number]::-webkit-outer-spin-button,.forms-wrap input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.forms-wrap .opts{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.forms-wrap .opt{ display:flex; align-items:flex-start; gap:11px; font-weight:600; font-size:.96rem; line-height:1.45; cursor:pointer; color:#33223f; background:#fff; border:1px solid var(--line-2); border-radius:11px; padding:11px 13px; transition:.14s; }
.forms-wrap .opt:hover{ border-color:var(--gold-deep); background:#fffdf8; }
.forms-wrap .opt input{ width:19px; height:19px; flex:0 0 auto; margin-top:1px; accent-color:var(--gold-deep); }
.forms-wrap .field.bad input,.forms-wrap .field.bad textarea,.forms-wrap .field.bad select{ border-color:var(--red); box-shadow:0 0 0 3px rgba(226,72,61,.14); }
.forms-wrap .field.bad .opts{ outline:2px solid rgba(226,72,61,.3); outline-offset:4px; border-radius:12px; }
/* Same fix as the login button (.btn-solid): no transparent border for the gradient to paint under, which left the
   rounded corners ragged, and a gold base under the gradient so the corner pixels blend gold on gold. The 1px of
   border it lost is added to the padding, so the size is unchanged. */
.forms-wrap .btn{ font-family:var(--font-body); font-weight:800; font-size:1rem; cursor:pointer; border-radius:12px; padding:14px 23px; border:0; background:var(--gold) linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#3a1e06; box-shadow:0 8px 20px rgba(242,140,30,.32); transition:.15s; text-decoration:none; display:inline-block; }
.forms-wrap .btn:hover{ filter:brightness(1.04); transform:translateY(-1px); }
.forms-wrap .btn[disabled]{ opacity:.55; cursor:default; transform:none; filter:none; }
.forms-wrap .btn-ghost{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.74)); color:var(--ink); border:1px solid var(--line-2); padding:13px 22px; box-shadow:0 6px 16px rgba(18,6,28,.1); }
.forms-wrap .submit-row{ margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.forms-wrap .formmsg{ font-weight:800; font-size:.95rem; min-height:1em; } .forms-wrap .formmsg.err{ color:var(--red); }
.forms-wrap .fstate{ max-width:620px; margin:2vh auto 0; text-align:center; }
/* the buttons under a state panel, side by side and wrapping on a phone */
.forms-wrap .fstate-acts{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; }
.forms-wrap .fstate .ic{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:rgba(242,140,30,.12); border:1px solid rgba(242,140,30,.3); display:grid; place-items:center; font-size:1.6rem; }
.forms-wrap .fstate h2{ font-family:var(--font-display); font-size:1.5rem; margin:0 0 8px; color:var(--ink); }
.forms-wrap .fstate p{ color:var(--ink-soft); font-weight:600; line-height:1.55; margin:0 0 18px; }
.forms-wrap .loginbox{ text-align:left; margin-top:10px; background:rgba(255,255,255,.6); border:1px solid var(--line-2); border-radius:14px; padding:16px 18px; }
.forms-wrap .loginbox label{ display:block; font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.5px; color:var(--gold-deep); margin:12px 0 5px; }
.forms-wrap .loginbox label:first-child{ margin-top:0; }
.forms-wrap .gate-links{ margin-top:14px; font-weight:700; font-size:.9rem; color:var(--ink-soft); text-align:center; }
.forms-wrap .gate-links a{ color:var(--gold-deep); text-decoration:none; }
.forms-wrap .ok-ic{ background:rgba(87,166,58,.14); border-color:rgba(87,166,58,.35); }

/* ---- Staff panel (folded, full-bleed on a dimmed scene) ---- */
.full-bleed{ width:100%; view-transition-name:ic-sub-content; }
body.route-staff .scrim{ opacity:1; }                 /* dim the busy scene for the dense admin UI */
body.route-staff .nav, body.route-staff .footer{ display:none; }   /* the staff panel has its own topbar */
.staff-root{ width:100%; }

/* On a sub-page the document scrolls normally and the footer sticks to the
   bottom of the viewport (sticky-footer flex) so it never floats mid-page when
   there is little content. The fixed bg/scrim/nav are out of flow. */
body.route-sub{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
  overflow-y:auto;
}
body.route-sub #view{ flex:1 0 auto; width:100%; }
/* footer sits ABOVE the dimming veil (scrim is z-index:1) so it is never dimmed.
   No backdrop-filter here either (it breaks the view-transition fade). */
body.route-sub .footer{
  position:relative; flex:0 0 auto; z-index:2;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
/* Each route gets a UNIQUE footer view-transition-name so every nav is an
   unpaired enter/exit fade. A shared name (all route-sub) pairs the groups and
   makes the browser MORPH the footer (which reads as a snap, or slides off
   without fading) instead of fading it. */
body.route-wiki  .footer{ view-transition-name:ic-footer-wiki; }
body.route-rules .footer{ view-transition-name:ic-footer-rules; }
body.route-forms .footer{ view-transition-name:ic-footer-forms; }

/* ---- View-transition tuning ----
   Only the persistent chrome (bg, scrim, nav, logo) is isolated into its own
   named group and morphed. The page content + footer stay in the ROOT snapshot
   and rise+fade in together as one composited image — this is what avoids the
   blurry backdrop-filter ghost that isolated panels leave behind. */
/* logo morph (own duration); normal blending avoids a pale glow-box on the
   drop-shadowed transparent PNG at two sizes (Willowbrook's fix). */
::view-transition-group(ic-logo){ animation-duration:.26s; }   /* was .42s; owner wanted the home <-> sub-page logo move quicker (2026-09-15) */
::view-transition-old(ic-logo),::view-transition-new(ic-logo){ animation-duration:.26s; }
::view-transition-old(ic-logo),::view-transition-new(ic-logo){ mix-blend-mode:normal; }
::view-transition-image-pair(ic-logo){ isolation:auto; }

/* content + footer cross-fade (distinct per-route names = unpaired = clean fade).
   Incoming fades in gently; outgoing fades out quicker so it clears fast. */
::view-transition-group(ic-home-content),::view-transition-group(ic-sub-content),
::view-transition-group(ic-home-footer),::view-transition-group(ic-footer-wiki),
::view-transition-group(ic-footer-rules),::view-transition-group(ic-footer-forms){ animation-duration:.34s; }
::view-transition-old(ic-home-content),::view-transition-old(ic-sub-content),
::view-transition-old(ic-home-footer),::view-transition-old(ic-footer-wiki),
::view-transition-old(ic-footer-rules),::view-transition-old(ic-footer-forms),
::view-transition-old(root){ animation-duration:.16s; }
::view-transition-new(root){ animation-duration:.26s; }

@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){ animation:none !important; }
}

/* ============================================================
   Wiki (folded into the shell) — golden-hour themed knowledge base.
   Landing (hero + search + category cards), category overview, and
   article view (browse sidebar + content + prev/next). Scoped under
   .wiki-wrap so it never leaks into other routes.
   ============================================================ */
body.route-wiki .sub-wrap{ max-width:1180px; }
body.route-wiki .footer{ view-transition-name:ic-footer-wiki; }

.wiki-wrap{ width:100%;
  --ink-soft:rgba(36,19,51,.66); --line-2:rgba(36,19,51,.14);
  --wk-accent:#f28c1e; --wk-cmd:#4338ca; }
.wk-eyebrow{ display:block; font-weight:800; text-transform:uppercase; letter-spacing:3px;
  font-size:.74rem; color:var(--gold-deep); }
/* article pages: the title block is dropped so the page title's bottom aligns with
   the realm dropdown box bottom — done by JS measurement (enhance), not a fixed px. */

/* ---------- shared search ---------- */
.wk-search{ position:relative; display:flex; align-items:center; }
.wk-search-ic{ position:absolute; left:14px; width:18px; height:18px; color:var(--ink-soft); pointer-events:none; display:grid; place-items:center; }
.wk-search-ic svg{ width:18px; height:18px; }
.wk-search input{ width:100%; font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:12px 14px 12px 42px; outline:none; transition:.14s; }
.wk-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.wk-search input:focus{ border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(242,140,30,.16); }

/* ---------- landing ---------- */
.wk-hero{ text-align:center; margin-bottom:6px; }
.wk-hero h1{ font-family:var(--font-display); font-size:clamp(2.1rem,5.4vw,3.1rem); margin:.16em 0 .18em; color:var(--ink); }
.wk-lead{ max-width:600px; margin:0 auto 20px; color:var(--ink-soft); font-weight:600; font-size:1.03rem; line-height:1.6; }
.wk-lead strong{ color:var(--ink); }
.wk-lead ul{ list-style:none; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:0; margin:14px 0 0; }
.wk-lead li{ margin:0; }
.wk-lead li span{ display:inline; }
.wk-lead a{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; font-weight:800;
  background:rgba(255,255,255,.7); border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; transition:.14s; }
.wk-lead a:hover{ border-color:var(--gold-deep); background:#fff; transform:translateY(-1px); }
.wk-hero .wk-search{ max-width:520px; margin:0 auto; }

.wk-results{ width:100%; margin:2px 0 0; text-align:left; background:#fff; border:1px solid var(--line-2);
  border-radius:12px; box-shadow:0 16px 40px rgba(18,6,28,.16); overflow:auto; max-height:60vh; }
.wk-results[hidden]{ display:none; }
.wk-res{ display:flex; align-items:center; gap:10px; padding:11px 15px; color:var(--ink); font-weight:700; text-decoration:none;
  border-top:1px solid var(--line-2); }
.wk-res:first-child{ border-top:0; }
.wk-res:hover{ background:#fff8ee; }
.wk-res-cat{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; flex:0 0 auto; min-width:66px; }
.wk-res-none{ padding:16px; color:var(--ink-soft); font-weight:600; }

.wk-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:26px; }
.wk-card{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9)); border:1px solid var(--line);
  border-radius:18px; box-shadow:0 14px 34px rgba(18,6,28,.13); padding:6px 20px 16px; position:relative; overflow:hidden; transition:.18s; }
.wk-card::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--wk-accent),color-mix(in srgb,var(--wk-accent) 40%,#fff)); }
.wk-card.dim{ opacity:.35; }
.wk-card-head{ display:flex; align-items:center; gap:14px; padding:18px 0 12px; text-decoration:none; border-bottom:1px solid var(--line-2); }
.wk-card-ic{ width:46px; height:46px; flex:0 0 auto; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:var(--wk-accent); box-shadow:0 8px 18px color-mix(in srgb,var(--wk-accent) 45%,transparent); }
.wk-card-ic svg{ width:24px; height:24px; }
.wk-card-t{ display:flex; flex-direction:column; }
.wk-card-name{ font-family:var(--font-display); font-size:1.28rem; color:var(--ink); line-height:1.1; }
.wk-card-count{ font-weight:700; font-size:.82rem; color:var(--ink-soft); margin-top:2px; }
.wk-card-list{ display:flex; flex-direction:column; padding-top:4px; }
.wk-card-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; text-decoration:none;
  color:#3a2853; font-weight:700; font-size:.96rem; padding:9px 8px 9px 10px; border-radius:9px; transition:.13s; }
.wk-card-link:hover{ background:color-mix(in srgb,var(--wk-accent) 9%,#fff); color:var(--ink); }
.wk-card-go{ flex:0 0 auto; width:16px; height:16px; color:var(--wk-accent); opacity:0; transform:translateX(-4px); transition:.13s; }
.wk-card-go svg{ width:16px; height:16px; }
.wk-card-link:hover .wk-card-go{ opacity:1; transform:none; }
.wk-card-link.hidden,.wk-nav-link.hidden,.wk-nav-cat.hidden{ display:none; }

/* ---------- article + realm view: two columns ---------- */
.wiki-article{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:0; align-items:start; }
/* In-flow sidebar (NOT sticky, owner 2026-09-02): it scrolls away with the page
   content rather than staying pinned in view. No internal overflow either, so the
   realm dropdown menu can overlay the nav without being clipped. */
.wk-side{ align-self:start;
  padding-right:20px; border-right:1px solid var(--line-2); display:flex; flex-direction:column; gap:14px; }
.wk-side-top{ display:flex; flex-direction:column; gap:12px; }
.wk-side-home{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft); font-weight:800; font-size:.82rem;
  text-decoration:none; text-transform:uppercase; letter-spacing:.6px; }
.wk-side-home svg{ width:16px; height:16px; }
.wk-side-home:hover{ color:var(--gold-deep); }
.wk-side .wk-search input{ padding-top:9px; padding-bottom:9px; font-size:.92rem; }

.wk-nav{ display:flex; flex-direction:column; }
.wk-nav[hidden]{ display:none; }
/* realm chooser: fully custom themed dropdown (replaces the old category header) */
.wk-realm-picker{ margin-bottom:16px; }
.wk-realm-label{ display:block; font-weight:700; font-size:.76rem; line-height:1.35; color:var(--ink-soft); margin-bottom:7px; }
.wk-realm-dd{ position:relative; }
.wk-realm-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--font-display); font-size:1.04rem; color:var(--ink); background:#fff; cursor:pointer;
  border:1px solid var(--line-2); border-radius:11px; padding:9px 12px; outline:none; transition:.14s; }
.wk-realm-btn:hover{ border-color:var(--wk-accent); }
.wk-realm-btn:focus-visible{ border-color:var(--wk-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--wk-accent) 20%,transparent); }
.wk-realm-dd.open .wk-realm-btn{ border-color:var(--wk-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--wk-accent) 18%,transparent); }
.wk-realm-cur{ display:flex; align-items:center; gap:9px; min-width:0; }
.wk-realm-txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wk-realm-ic{ width:24px; height:24px; flex:0 0 auto; border-radius:7px; display:grid; place-items:center; color:#fff; background:var(--wk-accent); }
.wk-realm-ic svg{ width:15px; height:15px; }
.wk-realm-caret{ flex:0 0 auto; width:18px; height:18px; color:var(--wk-accent); display:grid; place-items:center; transition:transform .16s; }
.wk-realm-caret svg{ width:18px; height:18px; }
.wk-realm-dd.open .wk-realm-caret{ transform:rotate(180deg); }
.wk-realm-menu{ position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--line-2); border-radius:13px; box-shadow:0 18px 44px rgba(18,6,28,.22); }
.wk-realm-menu[hidden]{ display:none; }
.wk-realm-opt{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; cursor:pointer;
  font-family:var(--font-display); font-size:1rem; color:var(--ink); outline:none; }
.wk-realm-opt .wk-realm-txt{ flex:1 1 auto; }
.wk-realm-opt:hover,.wk-realm-opt:focus-visible{ background:color-mix(in srgb,var(--wk-accent) 12%,#fff); }
.wk-realm-opt.active{ background:color-mix(in srgb,var(--wk-accent) 15%,#fff); }
.wk-realm-check{ flex:0 0 auto; width:16px; height:16px; color:var(--wk-accent); opacity:0; display:grid; place-items:center; }
.wk-realm-check svg{ width:16px; height:16px; }
.wk-realm-opt.active .wk-realm-check{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .wk-realm-caret{ transition:none; } }
.wk-nav-list{ display:flex; flex-direction:column; border-left:2px solid var(--line-2); margin-left:10px; }
.wk-nav-link{ color:var(--ink-soft); font-weight:700; font-size:.9rem; line-height:1.35; text-decoration:none;
  padding:6px 0 6px 14px; margin-left:-2px; border-left:2px solid transparent; transition:.12s; }
.wk-nav-link:hover{ color:var(--ink); }
.wk-nav-link.active{ color:var(--wk-accent); border-left-color:var(--wk-accent); }

.wk-main{ min-width:0; padding-left:30px; }
.wk-browse{ display:none; }
.wk-crumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:700; font-size:.84rem; color:var(--ink-soft); margin-bottom:14px; }
.wk-crumb a{ color:var(--ink-soft); text-decoration:none; } .wk-crumb a:hover{ color:var(--gold-deep); }
.wk-crumb [aria-current]{ color:var(--ink); }
.wk-crumb-sep{ opacity:.5; }
/* .wk-main h1.wk-title (not bare .wk-title) so it beats .page-panel h1 (0,1,1) which was overriding font-size/margin */
.wk-main h1.wk-title{ font-family:var(--font-display); font-size:clamp(2.2rem,4.6vw,2.9rem); color:var(--ink); margin:.12em 0 .7em; line-height:1.12; }
/* article body vertical position is set by JS (enhance): its top is aligned to the
   left nav-list top, since the title block is bottom-anchored to the dropdown box. */

/* category overview */
/* min-height matches the LEFT picker block (label + dropdown box) so both header
   blocks are the same height; content is vertically CENTRED within it (owner: the
   right block should be slightly bigger + centred, not bottom-pinned). */
.wk-cat-hero{ display:flex; align-items:flex-start; gap:16px; min-height:67px; margin:0 0 18px; }
.wk-cat-badge{ width:60px; height:60px; flex:0 0 auto; border-radius:17px; display:grid; place-items:center; color:#fff;
  background:var(--wk-accent); box-shadow:0 10px 22px color-mix(in srgb,var(--wk-accent) 45%,transparent); }
.wk-cat-badge svg{ width:36px; height:36px; }
.wk-cat-hero h1{ font-family:var(--font-display); font-size:clamp(1.85rem,4.3vw,2.6rem); color:var(--ink); margin:.06em 0 0; }
.wk-cat-sub{ color:var(--ink-soft); font-weight:700; font-size:.9rem; margin:2px 0 0; }
.wk-cat-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin-top:22px; }
.wk-tile{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:15px;
  box-shadow:0 10px 26px rgba(18,6,28,.1); padding:16px 18px 15px; text-decoration:none; transition:.16s; position:relative; overflow:hidden; }
.wk-tile::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--wk-accent); }
.wk-tile:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(18,6,28,.16); border-color:color-mix(in srgb,var(--wk-accent) 40%,var(--line)); }
.wk-tile h3{ font-family:var(--font-display); font-size:1.12rem; color:var(--ink); margin:0 0 6px; }
.wk-tile p{ color:var(--ink-soft); font-weight:600; font-size:.88rem; line-height:1.5; margin:0 0 12px; flex:1 0 auto; }
.wk-tile-go{ display:inline-flex; align-items:center; gap:6px; color:var(--wk-accent); font-weight:800; font-size:.82rem; }
.wk-tile-go svg{ width:15px; height:15px; }

/* ---------- article content typography ---------- */
/* flow-root = a block-formatting context so the first child's top margin is
   contained (doesn't collapse away). This makes an article that starts with an
   h3.wk-h heading begin its first line at the same height as one starting with a
   normal paragraph (the heading's .2em margin-top compensates its tighter line-height). */
.wk-content{ color:#3a2853; font-weight:500; font-size:1.02rem; line-height:1.75; display:flow-root; }
.wk-content p{ margin:0 0 1.05em; }
.wk-content strong,.wk-content b{ color:var(--ink); font-weight:800; }
.wk-content em,.wk-content i{ font-style:italic; }
.wk-content a{ color:var(--gold-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.wk-content a:hover{ color:var(--gold); }
.wk-content h3.wk-h{ font-family:var(--font-display); font-weight:400; font-size:1.32rem; color:var(--ink);
  margin:1.7em 0 .55em; line-height:1.2; padding-left:14px; border-left:4px solid var(--wk-accent); }
.wk-content h3.wk-h:first-child{ margin-top:calc(.2em + 3px); }   /* +3px owner-tuned so a leading heading lines up with paragraph-first articles */
.wk-content > p:first-child{ margin-top:1px; }   /* text-first articles: nudge the first paragraph down (owner-tuned) */
.wk-content hr{ border:0; border-top:1px solid var(--line-2); margin:1.9em 0; }
.wk-content hr + h3.wk-h{ margin-top:1.1em; }   /* divider already gives the gap */
.wk-content ul,.wk-content ol{ margin:0 0 1.05em; padding-left:0; list-style:none; }
.wk-content ul li,.wk-content ol li{ position:relative; padding-left:26px; margin:.5em 0; }
.wk-content ul li::before{ content:""; position:absolute; left:6px; top:.62em; width:7px; height:7px; border-radius:50%;
  background:var(--wk-accent); }
.wk-content ol{ counter-reset:wk; }
.wk-content ol li{ counter-increment:wk; }
.wk-content ol li::before{ content:counter(wk); position:absolute; left:0; top:.15em; width:20px; height:20px;
  border-radius:6px; background:color-mix(in srgb,var(--wk-accent) 14%,#fff); color:var(--wk-accent);
  font-family:var(--font-display); font-size:.72rem; display:grid; place-items:center; }
/* command / link chips: monospace box tinted to the realm colour, never italic */
.wk-content [style*="--wk-cmd"]{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-style:normal !important; font-weight:700; font-size:.9em; color:var(--wk-cmd);
  background:color-mix(in srgb,var(--wk-cmd) 11%,#fff); border:1px solid color-mix(in srgb,var(--wk-cmd) 30%,#fff);
  padding:.06em .42em; border-radius:6px; white-space:nowrap; }
.wk-content [style*="--wk-cmd"] *{ font-style:normal !important; color:inherit; }   /* defeat nested <em>/<i> */
.wk-content a[style*="--wk-cmd"]{ text-decoration:none; }

/* prev / next */
.wk-prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:38px; padding-top:24px; border-top:1px solid var(--line-2); }
.wk-pn{ display:flex; flex-direction:column; gap:3px; text-decoration:none; background:#fff; border:1px solid var(--line-2);
  border-radius:13px; padding:13px 16px; transition:.15s; min-width:0; }
.wk-pn-empty{ background:none; border:0; }
.wk-pn:hover{ border-color:var(--wk-accent, var(--gold-deep)); transform:translateY(-2px); box-shadow:0 12px 26px rgba(18,6,28,.12); }
.wk-pn-next{ text-align:right; }
.wk-pn-dir{ font-weight:800; text-transform:uppercase; letter-spacing:.6px; font-size:.7rem; color:var(--ink-soft); }
.wk-pn-title{ font-family:var(--font-display); color:var(--ink); font-size:1.02rem; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .wk-cards{ grid-template-columns:1fr; }
  .wiki-article{ grid-template-columns:1fr; }
  .wk-side{ position:static; max-height:none; overflow:visible; border-right:0; padding-right:0; display:none; margin-bottom:18px; }
  .wk-side.open{ display:flex; }
  .wk-main{ padding-left:0; }
  .wk-browse{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body); font-weight:800; font-size:.92rem;
    color:var(--ink); background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.8));
    border:1px solid var(--line-2); border-radius:11px; padding:10px 15px; cursor:pointer; margin-bottom:16px; transition:.14s; }
  .wk-browse:hover{ border-color:var(--gold-deep); }
  .wk-browse svg{ width:18px; height:18px; }
}
@media (max-width:480px){
  .wk-prevnext{ grid-template-columns:1fr; }
  .wk-pn-next{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){
  .wk-tile,.wk-pn,.wk-card,.wk-card-go,.wk-card-link{ transition:none; }
}

/* intro "useful links" (Discord / shop) = fun themed pill buttons, accent-coloured */
.wk-content.wk-info a{ display:inline-flex; align-items:center; gap:5px; vertical-align:middle; position:relative; top:-2px;
  color:#fff; background:var(--wk-accent); font-weight:800; font-size:.86em; text-decoration:none;
  padding:3px 9px 3px 7px; border-radius:999px; line-height:1;
  box-shadow:0 1.5px 0 color-mix(in srgb,var(--wk-accent) 62%,#000), 0 3px 8px color-mix(in srgb,var(--wk-accent) 38%,transparent);
  transition:transform .13s ease, box-shadow .13s ease; }
.wk-content.wk-info a:hover{ color:#fff; transform:translateY(-1.5px);
  box-shadow:0 3px 0 color-mix(in srgb,var(--wk-accent) 62%,#000), 0 6px 14px color-mix(in srgb,var(--wk-accent) 46%,transparent); }
.wk-content.wk-info a:active{ transform:translateY(0); box-shadow:0 1.5px 0 color-mix(in srgb,var(--wk-accent) 62%,#000); }
.wk-content.wk-info a::before{ content:""; width:13px; height:13px; flex:0 0 auto; background-size:contain; background-repeat:no-repeat; background-position:center; }
.wk-content.wk-info a[href*="discord"]::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23ffffff%27%3E%3Cpath%20d%3D%27M19.3%205.3A17%2017%200%200%200%2015%204l-.2.4a12%2012%200%200%201%203.6%201.8%2015%2015%200%200%200-12.8%200A12%2012%200%200%201%209.2%204.4L9%204a17%2017%200%200%200-4.3%201.3C2%209.2%201.3%2013%201.6%2016.7A17%2017%200%200%200%206.8%2019l.6-1.1a11%2011%200%200%201-1.7-.8l.4-.3a10%2010%200%200%200%208.6%200l.4.3a11%2011%200%200%201-1.7.8l.6%201.1a17%2017%200%200%200%205.2-2.3c.4-4.3-.7-8-3.5-11.4ZM8.9%2014.6c-.8%200-1.5-.8-1.5-1.7s.7-1.7%201.5-1.7%201.5.8%201.5%201.7-.7%201.7-1.5%201.7Zm6.2%200c-.8%200-1.5-.8-1.5-1.7s.7-1.7%201.5-1.7%201.5.8%201.5%201.7-.7%201.7-1.5%201.7Z%27%2F%3E%3C%2Fsvg%3E"); }
.wk-content.wk-info a[href*="store"]::before,.wk-content.wk-info a[href*="shop"]::before{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M6%202%203%206v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6l-3-4z%27%2F%3E%3Cpath%20d%3D%27M3%206h18%27%2F%3E%3Cpath%20d%3D%27M16%2010a4%204%200%200%201-8%200%27%2F%3E%3C%2Fsvg%3E"); }
@media (prefers-reduced-motion:reduce){ .wk-content.wk-info a{ transition:none; } }
/* intro "Useful links" = centered block of bigger themed buttons (no bullets) */
.wk-content.wk-info .wk-links{ text-align:center; margin-top:1.6em; padding-top:1.35em; border-top:1px solid var(--line-2); }
.wk-content.wk-info .wk-links-title{ display:block; font-family:var(--font-display); font-size:1.16rem; color:var(--ink); margin-bottom:.78em; letter-spacing:.3px; }
.wk-content.wk-info .wk-links-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.wk-content.wk-info .wk-links-row a{ font-size:1rem; padding:9px 16px 9px 13px; gap:8px; top:0; text-transform:capitalize; }
.wk-content.wk-info .wk-links-row a::before{ width:17px; height:17px; }

/* ================= ACCOUNT (/account/) =================
   Same white panel as the rules/forms pages, with the wiki's two column
   layout: an in-flow left nav (not sticky) and the section beside it. */
.acct-wrap{ --acct:#f28c1e;   /* the tokens below are per-wrap on this site, not global */
  --ink-soft:rgba(36,19,51,.64); --line-2:rgba(36,19,51,.16); --row-line:rgba(36,19,51,.10); }
.acct-loading{ display:flex; align-items:center; justify-content:center; gap:10px; padding:60px 0;
  color:var(--ink-soft); font-weight:700; font-size:.92rem; }
.acct-loading[hidden]{ display:none; }   /* the display:flex above beats [hidden] on its own */
.acct-gate{ text-align:center; padding:34px 0 40px; }
.acct-gate-ic{ width:56px; height:56px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center;
  color:var(--gold-deep); background:color-mix(in srgb,var(--gold) 16%,#fff); }
.acct-gate-ic svg{ width:28px; height:28px; }
.acct-gate h1{ font-family:var(--font-display); font-size:clamp(1.6rem,4vw,2.2rem); color:var(--ink); margin:0 0 .18em; }
.acct-gate p{ color:var(--ink-soft); font-weight:600; font-size:.96rem; margin:0 auto 20px; max-width:420px; }

.acct-layout[hidden]{ display:none; }   /* the display:grid below beats [hidden] on its own, so the signed-out page still showed the account */
.acct-layout{ display:grid; grid-template-columns:238px minmax(0,1fr); gap:0; align-items:start; }
.acct-side{ align-self:start; padding-right:20px; border-right:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:16px; }
.acct-card{ display:flex; align-items:center; gap:11px; min-width:0; }
.acct-avatar{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:1.15rem; color:#fff; background:linear-gradient(160deg,var(--gold),var(--gold-deep)); }
.acct-card-txt{ display:flex; flex-direction:column; min-width:0; }
.acct-card-name{ font-weight:800; font-size:.98rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-card-mail{ font-weight:600; font-size:.76rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.acct-nav{ display:flex; flex-direction:column; gap:2px; }
.acct-nav-link{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; border-radius:10px; padding:10px; font-family:var(--font-body); font-weight:700;
  font-size:.94rem; color:#3a2853; transition:.13s; }
.acct-nav-link svg{ flex:0 0 auto; width:17px; height:17px; color:var(--ink-soft); transition:.13s; }
.acct-nav-link span{ flex:1 1 auto; }
.acct-nav-link:hover{ background:color-mix(in srgb,var(--acct) 9%,#fff); color:var(--ink); }
.acct-nav-link.is-on{ background:color-mix(in srgb,var(--acct) 14%,#fff); color:var(--ink); font-weight:800; }
.acct-nav-link.is-on svg{ color:var(--acct); }
.acct-nav-n{ flex:0 0 auto; font-style:normal; font-weight:800; font-size:.72rem; color:var(--ink-soft); }

.acct-main{ padding-left:26px; min-width:0; }
.acct-sec{ display:none; }
.acct-sec.is-on{ display:block; }   /* no entry animation: the section must not slide as it loads */
@keyframes acct-fade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.acct-sec-head{ margin:0 0 22px; }
.acct-sec-head h1{ font-family:var(--font-display); font-size:clamp(1.5rem,3.4vw,2rem); color:var(--ink); margin:0 0 .14em; }
.acct-sec-head p{ color:var(--ink-soft); font-weight:600; font-size:.92rem; line-height:1.55; margin:0; max-width:520px; }

/* ---- account forms ---- */
.acct-block{ border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; margin-bottom:12px; background:rgba(255,255,255,.5); }
/* a row reads as one compact line until its drawer is opened */
.acct-line{ display:flex; align-items:center; gap:10px; }
.acct-line-txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.acct-line-t{ font-family:var(--font-display); font-size:1.02rem; color:var(--ink); line-height:1.25; }
.acct-line-v{ font-weight:600; font-size:.86rem; color:var(--ink-soft); overflow-wrap:anywhere; }
.acct-change{ flex:0 0 auto; cursor:pointer; font-family:var(--font-body); font-weight:800; font-size:.8rem;
  color:var(--gold-deep); background:#fff; border:1px solid var(--line-2); border-radius:999px; padding:7px 14px; transition:.14s; }
.acct-change:hover{ border-color:var(--gold-deep); background:color-mix(in srgb,var(--gold) 10%,#fff); }
.acct-change:disabled{ color:var(--ink-soft); cursor:not-allowed; opacity:.75; }
.acct-change:disabled:hover{ border-color:var(--line-2); background:#fff; }
.acct-drawer{ margin-top:12px; padding-top:12px; border-top:1px solid var(--row-line); animation:acct-fade .2s ease; }
.acct-drawer[hidden]{ display:none; }
.acct-note{ font-weight:600; font-size:.8rem; line-height:1.5; color:var(--ink-soft); margin:8px 0 0; }
.acct-note[hidden]{ display:none; }
#acctBanned{ display:flex; align-items:center; gap:10px; color:#a8261d; background:rgba(214,48,49,.08); border:1px solid rgba(214,48,49,.28); border-radius:12px; padding:11px 14px; margin:0 0 18px; font-weight:700; font-size:.88rem; line-height:1.4; }
#acctBanned svg{ width:18px; height:18px; flex:none; }
#acctBanned[hidden]{ display:none; }
.acct-pending[hidden]{ display:none; }
.acct-block h2{ font-family:var(--font-display); font-size:1.1rem; color:var(--ink); margin:0 0 .2em; }
.acct-block-sub{ color:var(--ink-soft); font-weight:600; font-size:.84rem; line-height:1.5; margin:0 0 4px; }
.acct-current{ font-weight:600; font-size:.86rem; color:var(--ink-soft); margin:10px 0 0; }
.acct-current strong{ color:var(--ink); font-weight:800; }
.acct-pending{ font-weight:600; font-size:.82rem; line-height:1.5; color:var(--gold-deep); margin:8px 0 0;
  background:color-mix(in srgb,var(--gold) 12%,#fff); border-radius:9px; padding:8px 11px; }
.acct-pill{ display:inline-block; margin-left:4px; font-weight:800; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.5px; border-radius:999px; padding:3px 8px; }
.acct-pill.ok{ color:#2f8f3e; background:rgba(47,143,62,.12); }
.acct-pill.warn{ color:#c0392b; background:rgba(192,57,43,.12); }
.acct-form{ margin-top:6px; }
.acct-form .btn-solid{ width:auto; margin-top:16px; padding-left:22px; padding-right:22px; }
.acct-form .m-msg{ margin-top:10px; font-family:var(--font-body); font-size:.82rem; font-weight:700; line-height:1.45; text-align:left; }
.acct-form .m-msg.err{ color:#c0392b; }
.acct-form .m-msg.ok{ color:#2f8f3e; }
.acct-form input:disabled{ background:rgba(36,19,51,.04); color:var(--ink-soft); cursor:not-allowed; }

/* ---- submission lists ---- */
.acct-list{ display:flex; flex-direction:column; gap:8px; }
.acct-row{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
  background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:13px 14px;
  font-family:var(--font-body); transition:.14s; }
.acct-row:hover{ border-color:var(--acct); box-shadow:0 4px 14px rgba(36,19,51,.07); }
.acct-row-main{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.acct-row-t{ font-weight:800; font-size:.95rem; color:var(--ink); }
.acct-row-d{ font-weight:600; font-size:.78rem; color:var(--ink-soft); }
.acct-row-go{ flex:0 0 auto; width:17px; height:17px; color:var(--acct); opacity:0; transform:translateX(-4px); transition:.13s; }
.acct-row:hover .acct-row-go{ opacity:1; transform:none; }
.acct-status{ flex:0 0 auto; font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--c); background:color-mix(in srgb,var(--c) 14%,#fff); border-radius:999px; padding:5px 10px; white-space:nowrap; }
.acct-empty{ color:var(--ink-soft); font-weight:600; font-size:.9rem; line-height:1.55; padding:22px 0; }
.acct-empty a{ color:var(--gold-deep); font-weight:800; text-decoration:none; }
.acct-empty a:hover{ text-decoration:underline; }

/* ---- one submission ----
   The overlay is the staff one: same markup, styled by staff.css, so the two views cannot drift apart. Only two things
   are needed here: cancel the page-level styles the .staff-root wrapper would otherwise bring to this page, and add the
   few bits the staff view does not have (a section header, a tint on the player's own comments, the send button). */
.acct-sub-root{ min-height:0; background:none; background-attachment:initial; }
/* NO text-align here on purpose: the staff modal inherits text-align:center from the base .modal, so overriding it
   was the one thing making the player's view look different from theirs. */
.acct-reply-bar{ display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:12px; flex-wrap:wrap; }
.acct-reply-bar .m-msg{ margin:0; margin-right:auto; }
/* Flat and modern rather than the gradient-and-glow look: one solid colour, a hairline shadow, a small press, and a
   real disabled state. Dark ink on the orange because white on it is nowhere near readable enough. */
/* inline-flex + centre, so the label sits dead centre however the font's own line box falls */
.acct-send{ display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  border:0; cursor:pointer; font-family:"Nunito",sans-serif; font-weight:800; font-size:.88rem;
  line-height:1; color:#2a1636; background:#f9a03f; padding:0 20px; border-radius:10px;
  box-shadow:0 1px 2px rgba(24,6,28,.14);
  transition:background .15s ease, box-shadow .15s ease, transform .08s ease; }
.acct-send:hover{ background:#f28c1e; box-shadow:0 4px 12px rgba(242,140,30,.26); }
.acct-send:active{ transform:scale(.98); box-shadow:0 1px 2px rgba(24,6,28,.16); }
.acct-send:focus-visible{ outline:2px solid #f28c1e; outline-offset:2px; }
.acct-send[disabled]{ background:rgba(36,19,51,.10); color:rgba(36,19,51,.42); box-shadow:none;
  cursor:default; transform:none; }
/* the footer has no business being behind a submission the player is reading */
body.sub-open .footer{ display:none; }

@media (max-width:760px){
  .acct-layout{ grid-template-columns:1fr; }
  .acct-side{ padding-right:0; border-right:0; border-bottom:1px solid var(--line-2); padding-bottom:16px; }
  .acct-nav{ flex-direction:row; flex-wrap:wrap; gap:6px; }
  .acct-nav-link{ width:auto; padding:8px 12px; font-size:.88rem; }
  .acct-main{ padding-left:0; padding-top:20px; }
}

/* ---- Leaderboards (/leaderboards/<realm>/<board>/, js/leaderboards-app.js) ----
   Same frosted page panel as rules/wiki, but a wider container so it feels
   closer to full screen. Realm tiles across the top, a searchable board list
   down the left, the chosen board on the right. --accent follows the realm. */
body.route-leaderboards .sub-wrap{ max-width:1400px; }
.lb-wrap{ width:100%; --accent:#f28c1e;
  --ink-soft:rgba(36,19,51,.64); --line-2:rgba(36,19,51,.14); --row-line:rgba(36,19,51,.08); }
.lb-wrap [hidden]{ display:none !important; }   /* the JS toggles .hidden on elements whose class sets display */
.lb-head{ text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.65); border-radius:16px;
  box-shadow:0 8px 22px rgba(18,6,28,.08), inset 0 1px 0 rgba(255,255,255,.7); padding:22px 26px 18px; }
.lb-head .eyebrow{ font-weight:800; text-transform:uppercase; letter-spacing:3px; font-size:.76rem; color:var(--gold-deep); }
.lb-head h1{ font-family:var(--font-display); font-size:clamp(1.7rem,4.5vw,2.5rem); margin:.2em 0 .1em; color:var(--ink); }
.lb-head p{ max-width:560px; margin:0 auto; color:var(--ink-soft); font-weight:600; font-size:1rem; line-height:1.55; }

/* realm tiles: each carries its own accent (--ra), the active one is filled */
.lb-realms{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:22px; }
.lb-realm{ position:relative; overflow:hidden; display:flex; align-items:center; gap:12px; min-width:0; min-height:68px;
  padding:13px 16px; border-radius:16px; text-decoration:none; color:var(--ink); background:#fff;
  border:1px solid var(--line-2); box-shadow:0 4px 12px rgba(18,6,28,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.lb-realm::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ra); }
.lb-realm-ic{ width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--ra); background:color-mix(in srgb,var(--ra) 13%,#fff); transition:background .18s ease, color .18s ease; }
.lb-realm-ic svg{ width:22px; height:22px; }
.lb-realm-txt{ display:flex; flex-direction:column; min-width:0; }
.lb-realm-name{ font-family:var(--font-display); font-size:1.08rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-realm-sub{ font-weight:700; font-size:.78rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-realm:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--ra) 45%,#fff); box-shadow:0 12px 24px rgba(18,6,28,.12); }
.lb-realm.active{ color:#fff; border-color:transparent;
  background:linear-gradient(135deg, color-mix(in srgb,var(--ra) 78%,#fff), var(--ra));
  box-shadow:0 12px 26px color-mix(in srgb,var(--ra) 38%,transparent); }
.lb-realm.active::before{ background:rgba(255,255,255,.45); }
.lb-realm.active .lb-realm-ic{ color:#fff; background:rgba(255,255,255,.22); }
.lb-realm.active .lb-realm-sub{ color:rgba(255,255,255,.86); }
.lb-realm:focus-visible{ outline:3px solid color-mix(in srgb,var(--ra) 45%,transparent); outline-offset:2px; }

/* two columns: board list | board */
.lb-body{ display:grid; grid-template-columns:272px minmax(0,1fr); align-items:start;
  margin-top:24px; padding-top:24px; border-top:1px solid var(--line-2); }
.lb-side{ padding-right:22px; border-right:1px solid var(--line-2); align-self:stretch; }
.lb-picker{ display:none; }
.lb-filter, .lb-psearch{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line-2);
  border-radius:11px; padding:0 12px; transition:border-color .14s, box-shadow .14s; }
.lb-filter svg, .lb-psearch svg{ width:16px; height:16px; flex:none; color:var(--ink-soft); }
.lb-filter input, .lb-psearch input{ border:0; outline:0; background:none; font:inherit; font-weight:700; font-size:.9rem;
  color:var(--ink); padding:10px 0; width:100%; min-width:0; }
.lb-filter:focus-within, .lb-psearch:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.lb-nav{ display:flex; flex-direction:column; gap:16px; margin-top:16px; }
.lb-filter[hidden] + .lb-nav{ margin-top:0; }   /* filter switched off: the list starts at the top */
.lb-group{ display:flex; flex-direction:column; gap:2px; }
.lb-cat{ margin:0 0 5px 10px; font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:1.3px; color:var(--ink-soft); }
.lb-item{ display:flex; align-items:center; gap:10px; min-height:42px; padding:6px 10px; border-radius:11px;
  text-decoration:none; color:var(--ink); font-weight:700; font-size:.92rem; transition:background .14s, color .14s; }
.lb-item-ic{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 11%,#fff); transition:background .14s, color .14s; }
.lb-item-ic svg{ width:17px; height:17px; }
.lb-item-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-item:hover{ background:color-mix(in srgb,var(--accent) 7%,#fff); }
.lb-item.active{ background:color-mix(in srgb,var(--accent) 13%,#fff); color:color-mix(in srgb,var(--accent) 62%,var(--ink)); }
.lb-item.active .lb-item-ic{ color:#fff; background:var(--accent); }
.lb-item:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.lb-nomatch{ margin:14px 10px 0; color:var(--ink-soft); font-weight:700; font-size:.86rem; }

.lb-main{ min-width:0; padding-left:30px; }
.lb-board{ animation:lb-in .28s ease; }
@keyframes lb-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.lb-bhead{ display:flex; align-items:center; gap:16px; }
.lb-bicon{ width:58px; height:58px; flex:none; border-radius:17px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 120% at 30% 25%, color-mix(in srgb,var(--accent) 68%,#fff), var(--accent));
  box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 32%,transparent), inset 0 2px 4px rgba(255,255,255,.35); }
.lb-bicon svg{ width:28px; height:28px; }
.lb-btxt{ min-width:0; }
.lb-bcat{ margin:0; font-weight:800; font-size:.72rem; text-transform:uppercase; letter-spacing:1.1px; color:var(--accent); }
.lb-btxt h2{ margin:2px 0 3px; font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,3vw,2rem); line-height:1.1; color:var(--ink); }
.lb-bdesc{ margin:0; color:var(--ink-soft); font-weight:600; font-size:.95rem; line-height:1.5; }

.lb-toolbar{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:20px; }
.lb-seg{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:4px; border-radius:12px; background:rgba(36,19,51,.06); }
.lb-seg button{ min-height:36px; border:0; background:none; cursor:pointer; font:inherit; font-weight:800; font-size:.85rem;
  color:var(--ink-soft); padding:7px 14px; border-radius:9px; transition:background .14s, color .14s, box-shadow .14s; }
.lb-seg button:hover{ color:var(--ink); }
.lb-seg button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 2px 8px rgba(18,6,28,.12); }
.lb-seg button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
/* An "All time" control that knows when its data starts shows it the moment you hover. A native title attribute
   waits about a second before appearing and that delay cannot be changed, so the date is carried in data-since and
   drawn here instead. The cursor stays the ordinary pointer: it is still a button. */
.lb-seg button.lb-has-since, .lb-chip.lb-has-since{ position:relative; }
.lb-seg button.lb-has-since::after, .lb-chip.lb-has-since::after{
  content:attr(data-since); position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  padding:6px 10px; border-radius:9px; background:var(--ink); color:#fff; font-weight:700; font-size:.75rem;
  line-height:1.2; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; z-index:6;
  box-shadow:0 8px 20px rgba(18,6,28,.28); }
.lb-seg button.lb-has-since::before, .lb-chip.lb-has-since::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink); pointer-events:none; opacity:0; visibility:hidden; z-index:6; }
/* Hover only. NOT :focus, or clicking the button would leave the bubble up until focus moved elsewhere.
   :focus-visible keeps keyboard users covered without firing on a mouse click. */
.lb-seg button.lb-has-since:hover::after, .lb-seg button.lb-has-since:hover::before,
.lb-seg button.lb-has-since:focus-visible::after, .lb-seg button.lb-has-since:focus-visible::before,
.lb-chip.lb-has-since:hover::after, .lb-chip.lb-has-since:hover::before{ opacity:1; visibility:visible; }
.lb-chip{ display:inline-flex; align-items:center; min-height:44px; gap:7px; font-weight:800; font-size:.85rem; color:var(--ink-soft);
  background:rgba(36,19,51,.06); border-radius:10px; padding:9px 13px; }
.lb-chip svg{ width:15px; height:15px; }
.lb-psearch{ width:min(200px,100%); min-height:44px; }   /* sized for its longest placeholder, "Find a faction" */
/* The group holds the period control and every switch row. It is allowed to shrink and wrap INSIDE itself
   (flex-basis well under its content width) so the search box stays beside it on the first row instead of
   being pushed onto a line of its own once a second row of buttons appears. */
.lb-toolbar-group{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; flex:1 1 320px; min-width:0; }
/* A switch row marked "below" in the catalogue (Trophies) always starts its own line under the timeframe instead of
   sitting beside it on a wide screen. Full-basis wrapper, so the buttons themselves still hug their content. */
.lb-segrow{ flex:1 1 100%; display:flex; }
.lb-toolbar > .lb-psearch{ flex:0 0 auto; }
/* "Example data" note: on every board until real data reaches it */
.lb-example{ display:flex; align-items:flex-start; gap:10px; margin:0 0 16px; padding:10px 14px; border-radius:12px;
  background:rgba(84,216,242,.12); border:1px solid rgba(53,184,232,.35); color:#1d5f78; font-weight:600; font-size:.85rem; line-height:1.45; }
.lb-example svg{ width:18px; height:18px; flex:none; margin-top:1px; }
.lb-example strong{ font-weight:800; }
.lb-bhead[hidden] + .lb-toolbar{ margin-top:0; }   /* board header switched off: the toolbar leads the board */

.lb-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.lb-stat{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:12px; align-items:center;
  background:#fff; border:1px solid var(--line-2); border-radius:14px; padding:12px 14px; min-width:0; }
.lb-stat-ic{ grid-row:1 / span 2; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#fff); }
.lb-stat-ic svg{ width:19px; height:19px; }
.lb-stat-k{ font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-soft); }
.lb-stat-v{ font-family:var(--font-display); font-size:1.2rem; line-height:1.2; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* podium: 1st in the middle and taller; DOM order stays 1, 2, 3 for screen readers */
.lb-podium{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:"second first third"; align-items:end; gap:14px; }
.lb-pod{ --medal:#9aa6b8; position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px;
  padding:18px 12px 16px; border-radius:18px; background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--medal) 13%,#fff));
  border:1px solid color-mix(in srgb,var(--medal) 45%,#fff); box-shadow:0 10px 24px rgba(18,6,28,.08); }
.lb-pod.p1{ grid-area:first; --medal:#f5b301; padding:30px 12px 24px; box-shadow:0 16px 34px rgba(245,179,1,.26); }
.lb-pod.p2{ grid-area:second; }
.lb-pod.p3{ grid-area:third; --medal:#cd7f45; }
.lb-pod .lb-av{ width:64px; height:64px; border-radius:14px; font-size:1.7rem; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--medal); }
.lb-pod.p1 .lb-av{ width:80px; height:80px; font-size:2.1rem; }
.lb-pod-crown{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; color:#e0a200; background:#fff; box-shadow:0 4px 12px rgba(245,179,1,.35); }
.lb-pod-crown svg{ width:19px; height:19px; fill:#ffd84d; }
.lb-pod-medal{ position:relative; z-index:1; margin-top:-13px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-weight:900; font-size:.8rem; color:#fff; background:var(--medal); border:2px solid #fff; }
/* Nunito draws its 1 with the upright right of centre (the flag hangs off the left), so a centred 1 looks pushed
   right. 2px of padding on the right moves it back 1px; 2 and 3 are drawn centred and need nothing. */
.lb-pod.p1 .lb-pod-medal{ padding-right:2px; }
.lb-pod-name{ max-width:100%; margin-top:4px; font-weight:800; font-size:.98rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-pod-val{ font-family:var(--font-display); font-size:1.25rem; color:color-mix(in srgb,var(--medal) 55%,var(--ink)); }
.lb-pod.p1 .lb-pod-val{ font-size:1.5rem; }
.lb-pod.is-empty{ opacity:.55; padding-top:22px; }
.lb-pod.is-empty .lb-pod-medal{ margin-top:0; }

.lb-av{ display:inline-grid; place-items:center; flex:none; overflow:hidden; border-radius:8px; background:color-mix(in srgb,var(--accent) 14%,#fff); }
.lb-av img{ width:100%; height:100%; display:block; image-rendering:pixelated; }
.lb-av-tile{ color:var(--accent); font-family:var(--font-display); line-height:1; }

.lb-table-wrap{ margin-top:24px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.lb-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.lb-table th{ text-align:left; padding:0 12px 10px; border-bottom:1px solid var(--line-2);
  font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; color:var(--ink-soft); }
.lb-table td{ padding:8px 12px; border-bottom:1px solid var(--row-line); font-weight:700; font-size:.95rem; color:#33223f; }
.lb-table tbody tr:last-child td{ border-bottom:0; }
.lb-table tbody tr:not(.lb-skel):hover td{ background:color-mix(in srgb,var(--accent) 5%,#fff); }
.lb-table .lb-c-rank{ width:78px; }
.lb-table .lb-c-val{ text-align:right; font-weight:800; white-space:nowrap; }
.lb-rank{ display:inline-grid; place-items:center; min-width:34px; height:28px; padding:0 8px; border-radius:8px;
  background:rgba(36,19,51,.06); color:var(--ink-soft); font-weight:800; font-size:.85rem; }
.lb-top10 .lb-rank{ background:color-mix(in srgb,var(--accent) 13%,#fff); color:color-mix(in srgb,var(--accent) 72%,var(--ink)); }
.lb-rank.r1{ background:#f5b301; color:#fff; } .lb-rank.r2{ background:#9aa6b8; color:#fff; } .lb-rank.r3{ background:#cd7f45; color:#fff; }
.lb-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.lb-who .lb-av{ width:30px; height:30px; border-radius:7px; font-size:.95rem; }
.lb-who-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-skel td i{ display:block; height:14px; border-radius:6px; background:linear-gradient(90deg, rgba(36,19,51,.06), rgba(36,19,51,.12), rgba(36,19,51,.06));
  background-size:200% 100%; animation:lb-shimmer 1.2s linear infinite; }
.lb-skel td:first-child i{ width:30px; } .lb-skel td:nth-child(2) i{ width:55%; } .lb-skel td:nth-child(3) i{ width:40%; margin-left:auto; }
@keyframes lb-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

.lb-empty{ text-align:center; color:var(--ink-soft); font-weight:700; padding:26px 0 6px; margin:0; }
.lb-more{ display:block; min-height:44px; margin:16px auto 0; padding:10px 22px; border-radius:11px; border:1px solid var(--line-2);
  background:#fff; cursor:pointer; font:inherit; font-weight:800; font-size:.9rem; color:var(--ink); transition:border-color .14s, color .14s; }
.lb-more:hover{ border-color:var(--accent); color:var(--accent); }
.lb-more:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }


@media (max-width:1150px){ .lb-realms{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){
  .lb-body{ grid-template-columns:1fr; }
  .lb-side{ padding-right:0; border-right:0; margin-bottom:20px; }
  .lb-picker{ display:flex; align-items:center; gap:12px; width:100%; min-height:54px; padding:9px 14px; border-radius:14px; cursor:pointer;
    border:1px solid var(--line-2); background:#fff; font:inherit; text-align:left; color:var(--ink); transition:border-color .14s; }
  .lb-picker:hover, .lb-side.open .lb-picker{ border-color:var(--accent); }
  .lb-picker:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .lb-picker-ic{ width:34px; height:34px; flex:none; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--accent); }
  .lb-picker-ic svg{ width:18px; height:18px; }
  .lb-picker-txt{ display:flex; flex-direction:column; min-width:0; }
  .lb-picker-k{ font-weight:800; font-size:.66rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--ink-soft); }
  .lb-picker-v{ font-family:var(--font-display); font-size:1.05rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lb-picker-caret{ margin-left:auto; width:20px; height:20px; color:var(--accent); transition:transform .16s; }
  .lb-picker-caret svg{ width:20px; height:20px; }
  .lb-side.open .lb-picker-caret{ transform:rotate(180deg); }
  .lb-side-inner{ display:none; margin-top:12px; padding:14px; border:1px solid var(--line-2); border-radius:14px; background:rgba(255,255,255,.7); }
  .lb-side.open .lb-side-inner{ display:block; }
  .lb-main{ padding-left:0; }
}
@media (max-width:640px){
  .lb-realms{ gap:8px; }
  .lb-realm{ padding:11px 12px; gap:10px; min-height:58px; }
  .lb-realm-ic{ width:34px; height:34px; border-radius:10px; }
  .lb-realm-ic svg{ width:18px; height:18px; }
  .lb-realm-name{ font-size:.95rem; }
  .lb-realm-sub{ display:none; }
  .lb-bicon{ width:48px; height:48px; border-radius:14px; }
  .lb-bicon svg{ width:24px; height:24px; }
  .lb-toolbar{ flex-direction:column; align-items:stretch; }
  .lb-seg button{ flex:1 1 0; padding:7px 8px; }
  .lb-psearch{ width:100%; }
  .lb-stats{ grid-template-columns:1fr; gap:8px; }
  .lb-podium{ gap:8px; }
  .lb-pod{ padding:16px 6px 12px; }
  .lb-pod.p1{ padding:26px 6px 18px; }
  .lb-pod .lb-av{ width:46px; height:46px; font-size:1.3rem; }
  .lb-pod.p1 .lb-av{ width:58px; height:58px; font-size:1.6rem; }
  .lb-pod-name{ font-size:.82rem; }
  .lb-pod-val{ font-size:1rem; } .lb-pod.p1 .lb-pod-val{ font-size:1.15rem; }
  .lb-table .lb-c-rank{ width:54px; }
  .lb-table th{ padding:0 6px 10px; } .lb-table td{ padding:8px 6px; font-size:.9rem; }
}
@media (prefers-reduced-motion:reduce){
  .lb-board{ animation:none; }
  .lb-skel td i{ animation:none; }
  .lb-realm, .lb-picker-caret{ transition:none; }
  .lb-realm:hover{ transform:none; }
}

/* ---- in-game link (account section + the code popup) ---- */
.mc-kv{ display:grid; gap:8px 18px; margin:12px 0 4px; padding-top:12px; border-top:1px solid var(--row-line); }
.mc-kv[hidden]{ display:none; }
.mc-kv > div{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.mc-kv dt{ flex:0 0 122px; font-family:var(--font-body); font-weight:800; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.4px; color:var(--ink-soft); margin:0; }
.mc-kv dd{ margin:0; font-weight:700; font-size:.86rem; color:var(--ink); overflow-wrap:anywhere; }
/* the command to run in game: the whole point of the popup, so it is the biggest thing in it */
/* This popup is short and has nothing to scroll, so it sits in the middle of the screen rather than
   near the top like the submission view, which can be tall. Scoped to this overlay for that reason. */
/* this one subtitle is a little longer than the others, and reads better on one line */
.acct-sec[data-sec="link"] .acct-sec-head p{ max-width:680px; }
.acct-sub-root #mcOv, .acct-sub-root #mcUnlinkOv{ align-items:center; }
/* The message line reserves a row even with nothing in it, which left a gap under the buttons.
   Hidden while empty, so the space below them matches the space above the title (the modal padding). */
.acct-sub-root #mcUnlinkMsg:empty, .acct-sub-root #mcOvMsg:empty{ display:none; }
.acct-sub-root .mc-confirm-note{ margin:0; font-weight:600; font-size:.86rem; line-height:1.55; color:var(--ink-soft); }
/* The command is centred on the BOX, not on the space left over beside the button: the button is taken
   out of the flow (absolute) so adding it cannot shove the text off-centre. */
.acct-sub-root .mc-cmd{ position:relative; display:flex; align-items:center; justify-content:center;
  margin:14px 0 10px; padding:14px 74px; border:1px solid var(--line-2); border-radius:13px;
  background:color-mix(in srgb,var(--gold) 9%,#fff); }
.acct-sub-root .mc-cmd code{ text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.16rem; font-weight:700; letter-spacing:.5px; color:var(--ink); overflow-wrap:anywhere; }
/* Quiet on purpose: the command is what matters here, copying it is a convenience beside it */
.acct-sub-root .mc-copy{ position:absolute; top:50%; right:12px; transform:translateY(-50%); cursor:pointer; font-family:var(--font-body); font-weight:800;
  font-size:.76rem; letter-spacing:.2px; color:var(--ink-soft); background:transparent;
  border:1px solid var(--line-2); border-radius:8px; padding:6px 11px;
  transition:color .14s ease, border-color .14s ease, background .14s ease; }
.acct-sub-root .mc-copy:hover{ color:var(--gold-deep); border-color:var(--gold-deep); background:rgba(255,255,255,.7); }
.acct-sub-root .mc-copy:active{ transform:translateY(-50%) scale(.97); }
.acct-sub-root .mc-copy:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.acct-sub-root .mc-exp{ margin:0; font-weight:700; font-size:.82rem; color:var(--ink-soft); }
.acct-sub-root .mc-wait{ display:flex; align-items:center; justify-content:center; margin:12px 0 0;
  font-weight:700; font-size:.84rem; color:var(--ink-soft); }
.acct-sub-root .mc-wait[hidden]{ display:none; }
.acct-sub-root .mc-renew{ margin:14px auto 0; }
.acct-sub-root .mc-renew[hidden]{ display:none; }

/* ---- hide me from this board ----
   A quiet icon at the end of the toolbar, shown only to a signed-in player with a linked Minecraft
   account. It is [hidden] for everyone else, so the toolbar is unchanged for the people who cannot use it. */
.lb-hide{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; min-height:44px; padding:0 12px;
  cursor:pointer; font:inherit; font-weight:800; font-size:.82rem; color:var(--ink-soft);
  background:#fff; border:1px solid var(--line-2); border-radius:11px;
  transition:color .14s, border-color .14s, background .14s, box-shadow .14s; }
.lb-hide[hidden]{ display:none; }
.lb-hide{ justify-content:center; }
.lb-hide .lb-hide-ic{ display:inline-flex; }
/* The label is empty until the player is hidden, but an empty flex item still takes its share of the gap,
   which pushed the eye off centre. Out of the flow while empty, so the icon sits dead centre. */
.lb-hide .lb-hide-t:empty{ display:none; }
.lb-hide svg{ width:17px; height:17px; }
.lb-hide:hover{ color:var(--ink); border-color:var(--ink-soft); }
.lb-hide:disabled{ opacity:.55; cursor:default; }
/* Hidden: gold, and it says so, because being invisible with no sign of it would be worse than the gap it fills */
.lb-hide.is-on{ color:var(--gold-deep); border-color:var(--gold-deep); background:color-mix(in srgb,var(--gold) 10%,#fff); }
.lb-hide.is-on:hover{ box-shadow:0 3px 10px rgba(242,140,30,.18); }
.lb-hide:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
/* Its tooltip: the same bubble as "Data started" on the timeframe button, and for the same reason (the
   browser's own tooltip takes about a second to appear). Anchored to the button's RIGHT edge rather than
   centred, because this button sits at the end of the toolbar and a centred bubble would hang off it. */
.lb-hide{ position:relative; }
.lb-hide[data-tip]::after{
  content:attr(data-tip); position:absolute; right:0; bottom:calc(100% + 9px);
  padding:6px 10px; border-radius:9px; background:var(--ink); color:#fff; font-weight:700; font-size:.75rem;
  line-height:1.2; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; z-index:6;
  box-shadow:0 8px 20px rgba(18,6,28,.28); }
.lb-hide[data-tip]::before{
  content:""; position:absolute; right:18px; bottom:calc(100% + 4px);
  border:5px solid transparent; border-top-color:var(--ink); pointer-events:none; opacity:0; visibility:hidden; z-index:6; }
.lb-hide[data-tip]:hover::after, .lb-hide[data-tip]:hover::before,
.lb-hide[data-tip]:focus-visible::after, .lb-hide[data-tip]:focus-visible::before{ opacity:1; visibility:visible; }

/* The action in the two hide-button popups. Flat and full width rather than the gradient pill the rest of
   the site uses: there is one thing to do in these dialogs, so it should read as one plain block. */
#lbGate .modal, #acctLoginOv .modal{ padding-bottom:28px; }
#lbGate h3, #acctLoginOv h3{ margin-bottom:6px; }
/* An explicit colour, NOT var(--ink-soft): that one is only defined inside the page wrappers, and this
   dialog hangs off <body>, so the variable was undefined and the text fell back to the inherited gold. */
#lbGate p, #acctLoginOv p{ margin:0 0 20px; color:rgba(36,19,51,.62); font-weight:600; font-size:.9rem; line-height:1.55; }
.lb-gate-go{ display:flex; align-items:center; justify-content:center; width:100%; min-height:48px;
  box-sizing:border-box; padding:0 20px; cursor:pointer; text-decoration:none;
  font-family:var(--font-body); font-weight:800; font-size:.95rem; line-height:1;
  color:#2a1636; background:#f9a03f; border:0; border-radius:12px;
  box-shadow:0 1px 2px rgba(24,6,28,.14);
  transition:background .15s ease, box-shadow .15s ease, transform .08s ease; }
.lb-gate-go:hover{ background:#f28c1e; box-shadow:0 6px 16px rgba(242,140,30,.28); }
.lb-gate-go:active{ transform:scale(.99); box-shadow:0 1px 2px rgba(24,6,28,.16); }
.lb-gate-go:focus-visible{ outline:2px solid #f28c1e; outline-offset:2px; }

/* ---- achievements (account section) ----
   Every achievement is always listed. Earned ones get a filled medal in their own colour (--ach) and the list of
   times they were won; the rest are greyed out so a player can still see what there is to go for. */
.ach-link{ display:flex; align-items:center; gap:14px; margin:0 0 14px; padding:14px 16px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gold) 40%,var(--line-2)); background:color-mix(in srgb,var(--gold) 9%,#fff); }
.ach-link[hidden]{ display:none; }
/* the subtitle runs the full width of the achievement cards under it, not the 520px other tabs use */
.acct-sec[data-sec="achievements"] .acct-sec-head p{ max-width:none; }
.ach-link-ic{ flex:0 0 auto; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:var(--gold-deep); background:#fff; }
.ach-link-ic svg{ width:20px; height:20px; }
.ach-link-txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ach-link-txt strong{ font-weight:800; font-size:.94rem; color:var(--ink); line-height:1.35; }
.ach-link-txt span{ font-weight:600; font-size:.82rem; color:var(--ink-soft); line-height:1.45; }
.ach-link .acct-send{ flex:0 0 auto; }

.ach-list{ display:flex; flex-direction:column; gap:12px; }
.ach{ border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.5); }
.ach.is-earned{ background:#fff; border-color:color-mix(in srgb,var(--ach) 34%,var(--line-2)); }
.ach-head{ display:flex; align-items:center; gap:14px; }
.ach-toggle{ width:100%; margin:0; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  font:inherit; color:inherit; border-radius:10px; }
.ach-toggle:focus-visible{ outline:2px solid var(--ach); outline-offset:4px; }
.ach-chev{ flex:0 0 auto; width:20px; height:20px; color:var(--ink-soft); transition:transform .18s ease, color .14s ease; }
.ach-toggle:hover .ach-chev{ color:var(--ach); }
.ach.is-open .ach-chev{ transform:rotate(180deg); color:var(--ach); }
.ach-lb{ color:var(--ach); font-weight:800; text-decoration:none; }
.ach-lb:hover{ text-decoration:underline; }
.ach-lb:focus-visible{ outline:2px solid var(--ach); outline-offset:2px; border-radius:3px; }
.ach-medal{ flex:0 0 auto; width:50px; height:50px; border-radius:15px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(150deg,color-mix(in srgb,var(--ach) 72%,#fff),var(--ach));
  box-shadow:0 6px 16px color-mix(in srgb,var(--ach) 30%,transparent); }
.ach-medal svg{ width:25px; height:25px; }
.ach-txt{ flex:1 1 auto; display:flex; flex-direction:column; gap:2px; min-width:0; }
.ach-name{ font-family:var(--font-display); font-size:1.08rem; color:var(--ink); line-height:1.25; }
.ach-desc{ font-weight:600; font-size:.84rem; color:var(--ink-soft); line-height:1.45; }
.ach-count{ flex:0 0 auto; font-weight:800; font-size:.95rem; color:var(--ach);
  background:color-mix(in srgb,var(--ach) 13%,#fff); border-radius:999px; padding:5px 12px; white-space:nowrap; }
.ach-count.is-zero{ font-size:.72rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft);
  background:rgba(36,19,51,.06); }
/* 0 / 119 reads as a number, not a label, so it keeps the number's size */
.ach-count.is-progress{ font-size:.95rem; text-transform:none; letter-spacing:0; }
/* not earned yet: the same card, drained of colour */
.ach.is-locked .ach-medal{ color:rgba(36,19,51,.34); background:rgba(36,19,51,.07); box-shadow:none; }
.ach.is-locked .ach-name{ color:var(--ink-soft); }
.ach.is-locked .ach-desc{ color:rgba(36,19,51,.5); }

.ach-wins{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--row-line); }
.ach-win{ display:flex; align-items:center; justify-content:space-between; gap:6px 16px; flex-wrap:wrap;
  padding:10px 0; border-bottom:1px solid var(--row-line); }
.ach-win:last-child{ border-bottom:0; padding-bottom:0; }
.ach-win[hidden]{ display:none; }
.ach-win-main{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
.ach-win-board{ font-weight:800; font-size:.92rem; color:var(--ink); text-decoration:none; }
.ach-win-board:hover{ color:var(--gold-deep); text-decoration:underline; }
.ach-win-realm{ font-weight:800; font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;
  color:var(--c); background:color-mix(in srgb,var(--c) 13%,#fff); border-radius:999px; padding:3px 9px; }
.ach-win-when{ display:flex; flex-direction:column; align-items:flex-end; gap:1px; text-align:right;
  font-weight:700; font-size:.82rem; color:var(--ink); }
.ach-win-got{ font-weight:600; font-size:.76rem; color:var(--ink-soft); }
.ach-more{ display:block; margin:10px auto 0; cursor:pointer; font-family:var(--font-body); font-weight:800; font-size:.8rem;
  color:var(--gold-deep); background:#fff; border:1px solid var(--line-2); border-radius:999px; padding:7px 16px; transition:.14s; }
.ach-more:hover{ border-color:var(--gold-deep); background:color-mix(in srgb,var(--gold) 10%,#fff); }

@media (max-width:560px){
  .ach-link{ flex-wrap:wrap; }
  .ach-link .acct-send{ width:100%; }
  .ach-head{ flex-wrap:wrap; }
  .ach-count{ margin-left:64px; }
  .ach-chev{ margin-left:auto; }
  .ach-win-when{ align-items:flex-start; text-align:left; }
}

/* ---- Privacy Policy (/privacy/, partials/privacy.html) ----
   A long read, so it is set for reading: a comfortable measure, clear section heads, a contents list, and tables that
   scroll sideways on a phone instead of squashing. Header card matches the rules page. */
.legal-wrap{ --ink-soft:rgba(36,19,51,.66); --line-2:rgba(36,19,51,.16); --row-line:rgba(36,19,51,.10);
  max-width:860px; margin:0 auto; color:var(--ink); }
body.route-legal .footer{ view-transition-name:ic-footer-legal; }
.legal-head{ text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.36));
  border:1px solid rgba(255,255,255,.65); border-radius:16px;
  box-shadow:0 8px 22px rgba(18,6,28,.08), inset 0 1px 0 rgba(255,255,255,.7); padding:22px 26px 18px; }
.legal-head .eyebrow{ font-weight:800; text-transform:uppercase; letter-spacing:3px; font-size:.76rem; color:var(--gold-deep); }
.legal-head h1{ font-family:var(--font-display); font-size:clamp(1.7rem,4.5vw,2.5rem); margin:.2em 0 .1em; color:var(--ink); }
.legal-head p{ max-width:560px; margin:0 auto; color:var(--ink-soft); font-weight:600; font-size:1rem; line-height:1.55; }
.legal-head .legal-date{ margin-top:10px; font-size:.82rem; font-weight:700; }

.legal-short{ margin:22px 0 0; padding:16px 20px; border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gold) 38%,var(--line-2)); background:color-mix(in srgb,var(--gold) 8%,#fff); }
.legal-short h2{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); margin:0 0 8px; }
.legal-short ul{ margin:0; padding-left:1.2em; }
.legal-short li{ font-weight:600; font-size:.94rem; line-height:1.6; color:#3a2853; margin:4px 0; }

.legal-toc{ margin:18px 0 6px; padding:14px 20px; border:1px solid var(--line-2); border-radius:14px; background:rgba(255,255,255,.55); }
.legal-toc ol{ margin:0; padding-left:1.4em; columns:2 240px; column-gap:28px; }
.legal-toc li{ break-inside:avoid; font-weight:700; font-size:.9rem; line-height:1.4; padding:4px 0; color:var(--ink-soft); }
.legal-toc a{ color:var(--ink); text-decoration:none; }
.legal-toc a:hover{ color:var(--gold-deep); text-decoration:underline; }

.legal-sec{ padding:26px 0 4px; border-bottom:1px solid var(--row-line); scroll-margin-top:90px; }
.legal-sec:last-child{ border-bottom:0; }
.legal-sec h2{ font-family:var(--font-display); font-size:clamp(1.3rem,3vw,1.6rem); color:var(--ink); margin:0 0 10px; }
.legal-sec h3{ font-family:var(--font-body); font-weight:900; font-size:1.02rem; color:var(--ink); margin:20px 0 6px; }
.legal-sec p, .legal-sec li{ font-weight:600; font-size:.95rem; line-height:1.7; color:#3a2853; }
.legal-sec p{ margin:0 0 12px; }
.legal-sec ul{ margin:0 0 12px; padding-left:1.2em; }
.legal-sec li{ margin:3px 0; }
.legal-sec strong{ font-weight:800; color:var(--ink); }
.legal-wrap a{ color:var(--gold-deep); font-weight:800; text-decoration:none; overflow-wrap:anywhere; }
.legal-wrap a:hover{ text-decoration:underline; }
.legal-sec code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; font-weight:700;
  background:rgba(36,19,51,.06); border-radius:6px; padding:1px 6px; }

.legal-table{ overflow-x:auto; margin:4px 0 14px; border:1px solid var(--line-2); border-radius:12px; background:#fff; }
.legal-table table{ width:100%; min-width:560px; border-collapse:collapse; }
.legal-table th{ text-align:left; font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.4px;
  color:var(--ink-soft); background:rgba(36,19,51,.035); padding:10px 14px; border-bottom:1px solid var(--line-2); }
.legal-table td{ vertical-align:top; font-weight:600; font-size:.88rem; line-height:1.55; color:#3a2853;
  padding:10px 14px; border-bottom:1px solid var(--row-line); }
.legal-table tr:last-child td{ border-bottom:0; }
.legal-table td:first-child{ font-weight:800; color:var(--ink); }
/* ==== Phone fixes (2026-09-14) ==== */
@media (max-width:700px){
  .tagline{ font-size:.72rem; padding:7px 14px 5px; }
}
@media (max-width:640px){
  /* the toolbar stacks into a column here, where "flex:1 1 320px" became 320px of HEIGHT: the big empty gaps */
  .lb-toolbar-group{ flex:0 0 auto; }
  /* timeframe and switch rows fill the width, so "This month" / "Keep Items Mode" stay on one line */
  .lb-seg{ display:flex; width:100%; }
  .lb-seg button{ white-space:nowrap; }
  /* search box and the hide button share one row */
  .lb-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .lb-toolbar > .lb-toolbar-group{ grid-column:1 / -1; }
  .lb-toolbar > .lb-psearch{ width:auto; }
  .lb-hide{ width:auto; }
  /* realm names wrap onto two lines rather than being cut off */
  .lb-realm-name{ white-space:normal; font-size:.9rem; line-height:1.15; }
  .lb-realm{ padding:10px; gap:8px; }
  .lb-realm-ic{ width:30px; height:30px; }
  /* long names shorten with "..." so the score column is never pushed off the screen */
  .lb-table{ table-layout:fixed; }
  .lb-table .lb-c-rank{ width:48px; }
  .lb-table th.lb-c-val{ width:96px; white-space:normal; line-height:1.2; }
  .lb-who{ gap:8px; }
}
@media (max-width:760px){
  /* a grid column grows to fit its content unless told otherwise, which let the tab bar and tables push the page wide */
  .staff-root .grid > *{ min-width:0; }
}
@media (max-width:560px){
  /* medal on the left, name and description beside it, the count underneath them and the arrow on the right, so the
     description gets the width instead of being squeezed between the medal and the count */
  .ach-head{ display:grid; grid-template-columns:44px minmax(0,1fr) auto; column-gap:12px; row-gap:6px; align-items:center; }
  .ach-medal{ grid-row:1 / span 2; width:44px; height:44px; border-radius:13px; }
  .ach-medal svg{ width:22px; height:22px; }
  .ach-txt{ grid-column:2; grid-row:1; }
  .ach-count{ grid-column:2; grid-row:2; justify-self:start; margin-left:0; font-size:.82rem; padding:3px 10px; }
  .ach-count.is-zero{ font-size:.64rem; }
  .ach-chev{ grid-column:3; grid-row:1 / span 2; margin-left:0; width:18px; height:18px; }
  .ach-name{ font-size:1rem; }
  .ach-desc{ font-size:.8rem; }
  /* link details: label above value on every row, instead of some beside and some below */
  .mc-kv > div{ flex-direction:column; align-items:flex-start; gap:2px; }
  .mc-kv dt{ flex:none; }
}
/* contents list links read as ink with a gold hover (the page-wide gold link colour was overriding them) */
.legal-wrap .legal-toc a{ color:var(--ink); }
.legal-wrap .legal-toc a:hover{ color:var(--gold-deep); }
/* ---- home page on phones: always fits one screen ----
   The home page is exactly one screen tall and does not scroll, so on a phone everything has to fit. Two columns of
   cards all the way down (at 380px and under it used to drop to one column, four cards tall, which pushed the logo off
   the top and the Shop card off the bottom), smaller cards, and a logo sized from the screen's HEIGHT as well as its
   width, so a short screen gets a smaller logo instead of a clipped one. */
@media (max-width:780px){
  .home-wrap{ padding-top:max(58px, 7dvh); padding-bottom:48px; }
  .home-wrap .site-logo{ width:min(88%, 330px, calc((100dvh - 390px) * 1.25)); }
  .actions{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; max-width:420px; margin-top:max(16px, 3dvh); }
  .action-card{ padding:14px 8px 12px; gap:5px; }
  .action-icon{ width:46px; height:46px; }
  .action-icon svg{ width:22px; height:22px; }
}
/* the rare really short screen (landscape, split screen): let it scroll rather than cut anything off */
@media (max-width:780px) and (max-height:560px){
  body.route-home{ height:auto; min-height:100dvh; overflow-y:auto; }
  body.route-home #view{ height:auto; }
  .home-wrap{ height:auto; }
  .home-wrap .site-logo{ width:min(60%, 240px); }
  .home-wrap .tagline{ display:none; }
}
/* the account popups now hang off <body> (so they sit above the nav), outside .acct-wrap where these tokens live */
.acct-sub-root{ --acct:#f28c1e; --ink-soft:rgba(36,19,51,.64); --line-2:rgba(36,19,51,.16); --row-line:rgba(36,19,51,.10); }
@media (max-width:760px){
  /* staff wiki editor: buttons wrap, the category picker fills the row, and the page list scrolls sideways inside itself */
  .staff-root .wk-head-actions{ flex-wrap:wrap; }
  .staff-root .wk-reorder-bar{ flex-wrap:wrap; }
  .staff-root .wk-reorder-bar select#wkReorderSel{ min-width:0; width:100%; }
  .staff-root .wk-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}
/* at every width, not just phones: the panel's second column also grew to fit its widest table on tablets */
.staff-root .grid > *{ min-width:0; }
@media (max-width:1100px){ .staff-root .wk-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } }
/* Birds on phones: each crossing takes a fixed time (23-34s) to travel 122% of the screen WIDTH, so on a phone that is
   only ~475px in the same time, about a fifth of the desktop speed. On narrow screens the crossing takes 40% as long
   (delays scaled too, so they stay spread out). The wingbeat is separate and unchanged. */
@media (max-width:780px){
  .bird{ animation-duration:calc(var(--dur, 26s) * .4); animation-delay:calc(var(--bd, 0s) * .4); }
}
@media (max-width:780px){ .home-wrap{ padding-bottom:48px; } }
/* Home on phones: a little more room between the logo, the tagline and the cards, where the screen has height to spare
   (none at 640px tall, up to 18px per gap on tall phones). The cards stay exactly where they were: the space below the
   group grows by the same amount as the gaps, so the extra room pushes the tagline and logo UP rather than the cards down. */
@media (max-width:780px){
  .home-wrap{ --hx:clamp(0px, calc((100dvh - 640px) * .1), 18px); padding-bottom:calc(48px + var(--hx) * 2); }
  .home-wrap .tagline{ margin-top:calc(16px + var(--hx)); }
  .home-wrap .actions{ margin-top:calc(max(16px, 3dvh) + var(--hx)); }
}
@media (max-width:780px){ .home-wrap > *{ flex-shrink:0; } }   /* nothing in the home group squashes to make room */
/* Phone browser bars (iPhone Safari's address and toolbar area, and the overscroll behind the page) take their colour
   from theme-color and the page canvas. Both were the dark purple, which looked off against the off-white footer, so
   the canvas is now the footer's own colour (theme-color in every shell matches). The body keeps its purple behind
   the scenery. */
html{ background-color:#ebe8dc; }
/* Home page on every screen: nothing in the logo / tagline / cards group may be squashed to fit (the tagline clips
   its own text, so the browser shrank it to a sliver on short desktop windows and it looked cut off). Instead, on
   desktop the logo is sized from the window HEIGHT as well as its width, so a short window gets a smaller logo. */
.home-wrap > *{ flex-shrink:0; }
@media (min-width:781px){
  .home-wrap .site-logo{ width:min(560px, 88%, max(200px, calc((100dvh - 440px) * 1.46))); }
}
/* Logo pulse, cheap in every browser (2026-09-15): the glow used to sit on the element that is being scaled, so
   Firefox recomputed two large blurred shadows of a 560px image on every frame (it showed as a laggy, glitchy
   pulse). The glow now belongs to the image inside and only the wrapper is scaled, on its own compositor layer, so
   the shadowed image is drawn once and just scaled. Looks the same. */
.home-wrap .hero-logo-wrap{ filter:none; will-change:transform; }
.home-wrap .hero-logo{ filter:drop-shadow(0 12px 34px rgba(255,157,46,.38)) drop-shadow(0 3px 10px rgba(30,8,44,.55)); }
/* ---- Animations on/off (nav, right of Login / account) ----
   A small icon button that turns the site's animations off for people whose browser or computer struggles with
   them. Remembered in this browser (localStorage "ic_anim"), and applied by a one-line script at the top of every
   page, so an "off" page never starts animating. The tooltip is instant (no fade) and says what a click will do. */
.chip-icon{ position:relative; padding:0; width:38px; height:38px; justify-content:center; gap:0; }
.chip-icon svg{ width:16px; height:16px; opacity:.7; }
.chip-icon:hover svg, .chip-icon:focus-visible svg{ opacity:1; }
.chip-icon .mt-off, .chip-icon .mt-label{ display:none; }
html.no-anim .chip-icon .mt-on{ display:none; }
html.no-anim .chip-icon .mt-off{ display:block; }
.chip-icon::after{ content:attr(data-tip); position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  white-space:nowrap; font-family:var(--font-body); font-weight:700; font-size:.78rem; line-height:1.2; color:#fff;
  background:var(--ink); padding:7px 10px; border-radius:8px; box-shadow:0 6px 18px rgba(18,6,28,.28);
  opacity:0; visibility:hidden; pointer-events:none; }
.chip-icon::before{ content:""; position:absolute; top:calc(100% + 1px); right:13px; z-index:61;
  border:5px solid transparent; border-bottom-color:var(--ink); opacity:0; visibility:hidden; pointer-events:none; }
.chip-icon:hover::after, .chip-icon:hover::before,
.chip-icon:focus-visible::after, .chip-icon:focus-visible::before{ opacity:1; visibility:visible; }
@media (max-width:780px){
  /* inside the phone menu it is a normal row with words, like the others, and needs no tooltip */
  .nav-links .chip-icon{ width:100%; height:auto; padding:9px 16px; justify-content:flex-start; gap:8px; }
  .nav-links .chip-icon .mt-label{ display:inline; }
  .chip-icon::after, .chip-icon::before{ display:none; }
}

/* What "off" does (owner 2026-09-15), and NOTHING else: the logo stops pulsing and sits at its normal size, the
   background scenery animations (birds, butterflies, bees, leaves, smoke, fire) are removed, and page changes stop
   cross-fading (app.js checks the same class). Hovers, menus and every other transition are left exactly as they
   are (an earlier version froze every animation and transition site-wide, and the owner found it glitchy). */
html.no-anim .hero-logo-wrap{ animation:none !important; transform:none !important; }
html.no-anim .bird-layer, html.no-anim .butterfly-layer, html.no-anim .bee-layer, html.no-anim .leaf-layer,
html.no-anim .smoke-layer, html.no-anim .fire-glow, html.no-anim .fire-flames{ display:none !important; }
/* ==== Rendering performance (2026-09-15) ====
   Measured in software rendering (a stand-in for a weak PC, /root/mobile-shots/perf.js on Node 3): the home page ran
   at ~11 fps at 1920x1080 and ~15 at 1366x768. Two things caused almost all of it:
   1. .hero-bg blurred itself live (filter: blur(5px)) and every moving thing lives INSIDE it, so each frame of any
      bird, bee or puff re-blurred the entire full-screen background.
   2. frosted glass (backdrop-filter) on the nav, tagline, cards and footer re-blurred that changing picture again.
   Now the blur is baked into the images (bg10*-blur.webp, same softness at the size each is shown), each small moving
   part carries its own small blur so it still looks soft, and frosted glass is off (the panels sit on an already
   blurry picture, so they look the same). Result: ~46 fps on the same test, and screenshots of a frozen frame
   differ by 0.02% of pixels. Do NOT put a filter back on .hero-bg or promote the sprites to layers (will-change
   halved the frame rate in software). */
.hero-bg{ filter:none; contain:paint; background-image:url("../assets/bg10-blur.webp?v=1"); }
.hero-trees{ background-image:url("../assets/bg10-trees-blur.webp?v=1"); }
@media (max-width:700px){
  .hero-bg{ background-image:url("../assets/bg10-sm-blur.webp?v=1"); }
  .hero-trees{ background-image:url("../assets/bg10-trees-sm-blur.webp?v=1"); }
}
.hero-bg .bird img, .hero-bg .puff, .hero-bg .fire-glow i, .hero-bg .bee, .hero-bg .butterfly, .hero-bg .leaf{ filter:blur(4px); }
.hero-bg .fire-flames{ filter:blur(4px); }   /* on the container: each flame is clip-path cut, which would crop its own blur */
*, *::before, *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
/* ---- Lite mode button (replaces the animations button, same place, 2026-09-15) ----
   Lite mode = html.no-anim: logo pulse off at normal size, scenery animations removed, instant page changes.
   Lit up (gold) while it is on, whether the visitor chose it or it switched itself on. */
.chip-icon .mt-on, .chip-icon .mt-off{ display:none !important; }
html.no-anim .chip-icon{ background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 34%,#fff), color-mix(in srgb,var(--gold) 22%,#fff)); border-color:color-mix(in srgb,var(--gold) 55%,#fff); }
html.no-anim .chip-icon svg{ opacity:1; color:var(--gold-deep); }
/* Home logo pulse, Firefox-proof (2026-09-15): the glow is BAKED into assets/logo-glow.webp (both drop-shadows,
   rendered exactly as the CSS drew them, 75 CSS px of transparent margin on every side), so the pulse scales one
   finished picture and no filter runs at all. Firefox stuttered on the live drop-shadow even after it moved onto the
   <img>. The picture is 710x562 for a 560x412 logo, hence 126.786% wide with -13.393% margins so the logo itself sits
   exactly where it did. Sub-page logos do not pulse and keep their CSS glow. */
.home-wrap .hero-logo.glow{ filter:none; width:126.786%; max-width:none; margin:-13.393%; }
/* Account + privacy footers come in WITH the page like the wiki's (2026-09-15): their data/partial is fetched before
   the page change now, so they no longer need hiding (vt-busy), and they get their own transition names so the
   footer fades rather than morphs (same reason as the others above). */
body.route-account .footer{ view-transition-name:ic-footer-account; }
body.route-legal .footer{ view-transition-name:ic-footer-legal; }
::view-transition-group(ic-footer-account),::view-transition-group(ic-footer-legal){ animation-duration:.34s; }
::view-transition-old(ic-footer-account),::view-transition-old(ic-footer-legal){ animation-duration:.16s; }
/* Staff panel footer comes in with the page too (2026-09-15): not async any more, its own transition name, and the
   panel is at least a screen tall so the footer starts below the fold instead of jumping as the tables fill in. */
body.route-staff .footer{ view-transition-name:ic-footer-staff; }
::view-transition-group(ic-footer-staff){ animation-duration:.34s; }
::view-transition-old(ic-footer-staff){ animation-duration:.16s; }
body.route-staff .full-bleed{ min-height:100vh; min-height:100dvh; }
/* The footer that stays put between two short pages (app.js names it ic-footer-still). When BOTH pages keep it,
   app.js also puts .ic-footer-paired on <html>: then only the new footer shows, with no fade and no move, so it
   stays exactly as it was. (An earlier :not(:only-child) version did not apply, so both snapshots were drawn and
   cross-faded, which looked briefly more opaque.) When only the page being LEFT had it, that lone footer fades out
   like any other. */
@keyframes ic-footer-fade-out{ to{ opacity:0; } }
::view-transition-group(ic-footer-still){ animation:none; }
:root.ic-footer-paired::view-transition-old(ic-footer-still){ animation:none; opacity:0; }
:root.ic-footer-paired::view-transition-new(ic-footer-still){ animation:none; opacity:1; }
:root:not(.ic-footer-paired)::view-transition-old(ic-footer-still){ animation:ic-footer-fade-out .16s ease both; }
/* Firefox logo pulse (2026-09-15): a screen recording showed the logo updating in only 49 of 119 frames (frozen up
   to 13 in a row) while the campfire on the same page updated in 107. The pulse grows the logo by about a third of a
   pixel per frame and Firefox snaps an axis-aligned scaled image to whole pixels, so it steps instead of gliding.
   An invisible 0.02deg rotation makes it filter the image smoothly between pixels. Firefox only (@supports test). */
@supports (-moz-appearance:none){
  @keyframes logo-breathe-ff{ 0%, 100%{ transform:scale(.95) rotate(.02deg); } 50%{ transform:scale(1) rotate(.02deg); } }
  .home-wrap .hero-logo-wrap{ animation-name:logo-breathe-ff; }
}
/* Sub-page logos (top of the page, smaller) get the same Firefox-proof treatment as the home logo (2026-09-15): they
   pulse too (the base .hero-logo-wrap rule in insanity.css), so they now use the baked-glow picture instead of a live
   drop-shadow on the pulsing element, and Firefox gets the smooth-scaling rotation on EVERY logo, not just the home one. */
.hero-logo.glow{ filter:none; width:126.786%; max-width:none; margin:-13.393%; }
.sub-wrap .hero-logo-wrap{ filter:none; }
@supports (-moz-appearance:none){
  .hero-logo-wrap{ animation-name:logo-breathe-ff; }
}