/* =============================================================================
   LAMPARA · site.css — the player-facing design system
   Pages: index, home, player-portal, register, verify, reset-password.
   (admin-portal keeps admin.css / auth-theme.css; do not link those here.)

   Colours come only from the game's design palette (LAMPARA-DESIGN-PALETTE.md):
   the site stays dark and borrows the game's physical materials (parchment,
   gold plaques, mahogany, wax seals, laurel medals). Gold ties them together.

   ---------------------------------------------------------------- <head>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap">
   <link rel="stylesheet" href="assets/css/site.css">

   ---------------------------------------------------------------- Rules
   - Title Case in the HTML for titles, nav, buttons, labels. Never type ALL CAPS
     (the brand name LAMPARA is the only exception). Cinzel's capitals do the rest.
   - .display-xl (gold gradient text) at most once per page. No other gradient text.
   - .display-logo: the LAMPARA logo image as the main title (home hero, entry page).
   - .rule at most once per section. No ornaments under every title.
   - No particles, no pulsing. Hover/focus transitions only, plus .fade-up once.
   - Text on art/video sits on a scrim (.backdrop, .auth__art) and uses --hud.

   ---------------------------------------------------------------- Class API
   Type      .display-xl  .h1 .h2 .h3 .h4 (h1–h4 styled by default)  .lead  .small
             .eyebrow  .subtitle (Cinzel line under a title)  .muted  .dim  .hud
             .index-num ("01" step number)  .flow (vertical rhythm for prose)
   Quote     <figure class="quote [quote--pull|quote--hud]"><blockquote class="quote__text">…
             </blockquote><figcaption class="quote__source">…</figcaption></figure>
   Layout    .container [.container--narrow]  .section [.section--sm|--panel|--harbour]
             .section-head [.section-head--center]  .split [.split--top]
             .grid .grid--2/3/4/auto (--grid-min)  .stack [--xs|--sm|--lg|--xl]
             .cluster [--center|--between]  .rule (<hr>)  .rule-text (<p><span>…</span></p>)
   Brand     <a class="brand"><img class="brand__lamp" src="assets/images/Lampara_logo.png" alt="">
             <img class="brand__word" src="assets/images/Lampara.png" alt="LAMPARA"></a>
   Buttons   .btn + .btn--primary | --secondary | --ghost | --ink (outline on paper) | --danger
             modifiers .btn--plaque (ornate end caps, 1–2 hero CTAs only) .btn--sm .btn--block
             states  :disabled/.is-disabled · .soon/.btn-soon/[aria-disabled=true] (unavailable)
                     · .down/.btn-down (server down) · .loading/.is-loading (shows .spinner,
                     hides .btn-text). Inside .parchment, --secondary and --ghost turn to ink.
   Nav       <header class="site-nav" id="nav"> <div class="container site-nav__inner">
               .brand · <nav class="site-nav__links"> a[aria-current=page|.is-active|.on]
               · <div class="site-nav__actions"> a.site-nav__link + .btn.btn--primary.btn--sm
               · <button class="site-nav__toggle" aria-expanded aria-controls><span class="site-nav__bars"></span></button>
             </div> <div class="site-nav__sheet" id="…"> a… </div> </header>
             JS: toggle .is-open (or .open) on .site-nav + aria-expanded; add .is-scrolled
             when scrollY > 8. Under 960px links collapse into the sheet.
   Footer    .site-footer > .container.site-footer__grid > .site-footer__brand (.brand +
             .site-footer__blurb) + .site-footer__col (.site-footer__title + ul.site-footer__links)
             then .container.site-footer__bottom (p + .site-footer__social a[aria-label]>svg)
   Surfaces  .card [.card--flush > .card__media + .card__body]
             .frame (gold-framed dark panel) [.frame--media: 8px mount for img/video/.media]
             .parchment [.parchment--light] (paper board: ink text, heading ink, paper inputs)
             .plaque (mahogany, gold rule)   .ribbon (red banner label)
             .seal [.seal--sm|--lg] (wax seal with check; .seal--icon to supply own icon)
             .medal .medal--gold|--silver|--bronze|--locked [.medal--sm|--lg] (child = number/icon)
             .medallion [--sm|--lg] (gold-rimmed round image; > img or > span initial)
             .case [.is-locked] > .case__media(img) + .case__body(.case__name .case__meta .case__action)
   Stats     .plaque.stats > .stat > .stat__value + .stat__label   (hairline separators)
             .kpi-grid > .plaque.kpi > .kpi__label + .kpi__value + .kpi__meta
   Badges    .badge [--success|--danger|--muted]   .chips > .chip[.met|.is-ok] (password rules)
   Progress  .progress[style="--value:40%"] > .progress__fill  [--sm|--lg] (JS may set fill width)
             .progress.meter--suspicion[style="--value:40%"] > .progress__fill + .meter__scale
   Forms     .form (grid gap)  .form-grid (2 cols; .field--full spans)  .field > .field__label
             + .input|.select|.textarea + .field__hint|.field__error  (.ok/.err on hints)
             .field__row (label + right link)  .input-group > .input + button.input-group__btn
             label.checkbox > input[type=checkbox] + span   .alert --success|--danger|--info
             (.alert:empty hides itself)
   Auth      <div class="auth [auth--wide]"> <div class="auth__main"> <header class="auth__top">
             .brand + a.auth__back </header> <div class="auth__body"> .eyebrow h1.auth__title
             p.auth__subtitle <div class="parchment auth__card">…</div> p.auth__alt </div>
             <p class="auth__foot">…</p> </div>
             <aside class="auth__art [auth__art--lamp]"> img|video.auth__media
             <figure class="quote quote--hud auth__quote">…</figure> </aside> </div>
   States    .state (hidden) / .state.active (shown) — the existing page state switcher
   Spinner   .spinner [--sm]
   Modal     <div class="modal" role="dialog" aria-modal="true" aria-labelledby>  (show: .is-open
             / .open / .active)  > .modal__panel(.frame|.parchment) [--sm|--lg|--media]
             > button.modal__close + .modal__header(h2.modal__title) + .modal__body (scrolls)
             body.modal-open locks page scroll. JS: Esc closes, focus trapped, focus returns.
   Table     .table-wrap > table.table; tr.is-me|.is-highlight; td.num; th.num
   Tabs      .tabs[role=tablist] > .tabs__tab[aria-selected=true|.active|.is-active]
   Timeline  ol.timeline[style="--steps:7"] > li.timeline__item > .medallion + .timeline__label
   Art       .backdrop [.backdrop--hero|--center] > img|video (absolute art behind content)
             .glow (static candle light behind a child)  .media .media--16x9|--4x3|--1x1
   Toast     .toast (.on / .is-visible shows it)
   Motion    .fade-up [.fade-up--d1..d3]
   Utils     .sr-only .visually-hidden .skip-link .text-center .nowrap .mx-auto .w-full
             .mt-0 .mt-1…mt-10 (spacing scale) .mb-0 .hide-mobile .hide-desktop
   ============================================================================= */

/* ---------------------------------------------------------------- Tokens */
:root {
  color-scheme: dark;

  /* Dark base */
  --bg: #0A0805;
  --bg-panel: #0F0C08;
  --bg-card: #15110B;
  --bg-hover: #1E1810;
  --studio: #0F0D0A;
  --lamp-bg: #0E0A06;
  --harbour: #0A2741;      /* atmospheric tint only */
  --pasig: #0F3861;        /* atmospheric tint only */

  /* Text on dark */
  --text: #E8DCC8;
  --text-2: #C9B38E;
  --text-3: #A38C69;
  --text-dim: #8F7A5A;     /* minimum for any text */
  --hud: #F2D9A0;          /* text over art/video */

  /* Lines */
  --border: #2A2016;
  --border-gold: #4A3718;
  --gold-rule: #B8852E;
  --gold-dark: #7A5820;
  --gold-muted: #9A7228;

  /* Gold */
  --gold: #C9953A;
  --gold-light: #E8B84B;
  --gold-top: #FFE699;
  --gold-bottom: #CC8F38;
  --gold-face: #D4A34A;
  --gold-icon: #61431A;
  --focus: #DBAD4D;
  --brass: #D4AF37;
  --btn-top: #F0C25C;
  --btn-bottom: #D39A36;
  --btn-top-hover: #F6CD6C;
  --btn-bottom-hover: #DDA640;
  --btn-ink: #1B1206;
  --bar-top: #FBD673;
  --bar-bottom: #C2771F;

  /* Parchment */
  --wash: #FAEED4;
  --parchment-text: #FAEDCC;
  --page: #F5D493;
  --card-fill: #DDC396;
  --card-parchment: #D6BB8D;
  --aged: #AA7A37;

  /* Ink — text on parchment only */
  --ink: #2B1708;
  --ink-soft: #54361A;
  --heading-ink: #5C1F10;
  --ink-ok: #21661F;
  --ink-err: #9E1F17;
  --outline: #140C06;

  /* Wood */
  --leather: #5F3011;
  --narra: #5C3218;
  --wood: #442311;
  --mahogany-plaque: #3F1A0D;
  --mahogany: #3B1F0B;

  /* Red */
  --ribbon: #B2201F;
  --seal: #9D201F;
  --red-top: #DB3829;
  --red-bottom: #85120D;
  --crimson: #8B2020;
  --crimson-light: #C0392B;
  --error: #E06060;        /* error text on dark */

  /* Status */
  --success: #6DBA85;
  --success-dark: #2D6A3F;
  --sus-low: #33BF4D;
  --sus-mid: #E6A61A;
  --sus-high: #D93333;
  --quest-done: #4DCC4D;

  /* Medals */
  --medal-gold: #9E8249;
  --medal-silver: #898D93;
  --medal-bronze: #8F603A;
  --medal-locked: #4A4641;

  /* Light — static soft glow only */
  --ember: #FF9E38;
  --candle: #FFB366;

  /* Shape */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, .55);

  /* Spacing 4/8/12/16/24/32/48/64/96/128 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --container: 1200px;
  --gutter: 24px;
  --nav-h: 72px;

  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Crimson Text', Georgia, serif;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Material art (inline SVG; img-src allows data:) */
  --orn-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform=''%3E%3Cg fill='none' stroke='%23B8852E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 20V1.5H20' stroke-width='2'/%3E%3Cpath d='M20 1.5c3.2 0 5 1.4 5 3.4 0 1.5-1.1 2.4-2.3 2.4-1 0-1.7-.7-1.7-1.6' stroke-width='1.2'/%3E%3Cpath d='M1.5 20c0 3.2 1.4 5 3.4 5 1.5 0 2.4-1.1 2.4-2.3 0-1-.7-1.7-1.6-1.7' stroke-width='1.2'/%3E%3Cpath d='M5.5 13V5.5H13' stroke-width='1'/%3E%3Cpath d='M5.5 5.5c3.5.6 6 3 6.6 6.6' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M1.5 1.5h4.5v4.5h-4.5z' fill='%23B8852E'/%3E%3Ccircle cx='12.6' cy='12.6' r='1.5' fill='%23B8852E'/%3E%3C/g%3E%3C/svg%3E");
  --orn-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(28 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%23B8852E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 20V1.5H20' stroke-width='2'/%3E%3Cpath d='M20 1.5c3.2 0 5 1.4 5 3.4 0 1.5-1.1 2.4-2.3 2.4-1 0-1.7-.7-1.7-1.6' stroke-width='1.2'/%3E%3Cpath d='M1.5 20c0 3.2 1.4 5 3.4 5 1.5 0 2.4-1.1 2.4-2.3 0-1-.7-1.7-1.6-1.7' stroke-width='1.2'/%3E%3Cpath d='M5.5 13V5.5H13' stroke-width='1'/%3E%3Cpath d='M5.5 5.5c3.5.6 6 3 6.6 6.6' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M1.5 1.5h4.5v4.5h-4.5z' fill='%23B8852E'/%3E%3Ccircle cx='12.6' cy='12.6' r='1.5' fill='%23B8852E'/%3E%3C/g%3E%3C/svg%3E");
  --orn-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(0 28) scale(1 -1)'%3E%3Cg fill='none' stroke='%23B8852E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 20V1.5H20' stroke-width='2'/%3E%3Cpath d='M20 1.5c3.2 0 5 1.4 5 3.4 0 1.5-1.1 2.4-2.3 2.4-1 0-1.7-.7-1.7-1.6' stroke-width='1.2'/%3E%3Cpath d='M1.5 20c0 3.2 1.4 5 3.4 5 1.5 0 2.4-1.1 2.4-2.3 0-1-.7-1.7-1.6-1.7' stroke-width='1.2'/%3E%3Cpath d='M5.5 13V5.5H13' stroke-width='1'/%3E%3Cpath d='M5.5 5.5c3.5.6 6 3 6.6 6.6' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M1.5 1.5h4.5v4.5h-4.5z' fill='%23B8852E'/%3E%3Ccircle cx='12.6' cy='12.6' r='1.5' fill='%23B8852E'/%3E%3C/g%3E%3C/svg%3E");
  --orn-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='translate(28 28) scale(-1 -1)'%3E%3Cg fill='none' stroke='%23B8852E' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 20V1.5H20' stroke-width='2'/%3E%3Cpath d='M20 1.5c3.2 0 5 1.4 5 3.4 0 1.5-1.1 2.4-2.3 2.4-1 0-1.7-.7-1.7-1.6' stroke-width='1.2'/%3E%3Cpath d='M1.5 20c0 3.2 1.4 5 3.4 5 1.5 0 2.4-1.1 2.4-2.3 0-1-.7-1.7-1.6-1.7' stroke-width='1.2'/%3E%3Cpath d='M5.5 13V5.5H13' stroke-width='1'/%3E%3Cpath d='M5.5 5.5c3.5.6 6 3 6.6 6.6' stroke-width='1'/%3E%3C/g%3E%3Cpath d='M1.5 1.5h4.5v4.5h-4.5z' fill='%23B8852E'/%3E%3Ccircle cx='12.6' cy='12.6' r='1.5' fill='%23B8852E'/%3E%3C/g%3E%3C/svg%3E");
  --orn-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 0.5L11 4 6 7.5 1 4z' fill='%23B8852E'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .09 0 0 0 0 .03 0 0 0 1.2 -.35'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  --paper-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .67 0 0 0 0 .48 0 0 0 0 .22 0 0 0 2.2 -1'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23m)' opacity='.08'/%3E%3C/svg%3E");
  --wood-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='160'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .22' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .05 0 0 0 0 .02 0 0 0 2 -.7'/%3E%3C/filter%3E%3Crect width='600' height='160' filter='url(%23w)' opacity='.34'/%3E%3C/svg%3E");
  --laurel-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23140C06'%3E%3Cellipse cx='89.5' cy='50' rx='3.7' ry='1.55' transform='rotate(122 89.5 50)'/%3E%3Cellipse cx='82.5' cy='50' rx='3.7' ry='1.55' transform='rotate(58 82.5 50)'/%3E%3Cellipse cx='88.4' cy='59.5' rx='3.7' ry='1.55' transform='rotate(135.8 88.4 59.5)'/%3E%3Cellipse cx='81.6' cy='57.8' rx='3.7' ry='1.55' transform='rotate(71.8 81.6 57.8)'/%3E%3Cellipse cx='85' cy='68.4' rx='3.7' ry='1.55' transform='rotate(149.7 85 68.4)'/%3E%3Cellipse cx='78.8' cy='65.1' rx='3.7' ry='1.55' transform='rotate(85.7 78.8 65.1)'/%3E%3Cellipse cx='79.6' cy='76.2' rx='3.7' ry='1.55' transform='rotate(163.5 79.6 76.2)'/%3E%3Cellipse cx='74.3' cy='71.6' rx='3.7' ry='1.55' transform='rotate(99.5 74.3 71.6)'/%3E%3Cellipse cx='72.4' cy='82.5' rx='3.7' ry='1.55' transform='rotate(177.4 72.4 82.5)'/%3E%3Cellipse cx='68.5' cy='76.7' rx='3.7' ry='1.55' transform='rotate(113.4 68.5 76.7)'/%3E%3Cellipse cx='64' cy='86.9' rx='3.7' ry='1.55' transform='rotate(191.2 64 86.9)'/%3E%3Cellipse cx='61.5' cy='80.4' rx='3.7' ry='1.55' transform='rotate(127.2 61.5 80.4)'/%3E%3Cellipse cx='54.8' cy='89.2' rx='3.7' ry='1.55' transform='rotate(205.1 54.8 89.2)'/%3E%3Cellipse cx='53.9' cy='82.3' rx='3.7' ry='1.55' transform='rotate(141.1 53.9 82.3)'/%3E%3Cellipse cx='45.2' cy='89.2' rx='3.7' ry='1.55' transform='rotate(218.9 45.2 89.2)'/%3E%3Cellipse cx='46.1' cy='82.3' rx='3.7' ry='1.55' transform='rotate(154.9 46.1 82.3)'/%3E%3Cellipse cx='36' cy='86.9' rx='3.7' ry='1.55' transform='rotate(232.8 36 86.9)'/%3E%3Cellipse cx='38.5' cy='80.4' rx='3.7' ry='1.55' transform='rotate(168.8 38.5 80.4)'/%3E%3Cellipse cx='27.6' cy='82.5' rx='3.7' ry='1.55' transform='rotate(246.6 27.6 82.5)'/%3E%3Cellipse cx='31.5' cy='76.7' rx='3.7' ry='1.55' transform='rotate(182.6 31.5 76.7)'/%3E%3Cellipse cx='20.4' cy='76.2' rx='3.7' ry='1.55' transform='rotate(260.5 20.4 76.2)'/%3E%3Cellipse cx='25.7' cy='71.6' rx='3.7' ry='1.55' transform='rotate(196.5 25.7 71.6)'/%3E%3Cellipse cx='15' cy='68.4' rx='3.7' ry='1.55' transform='rotate(274.3 15 68.4)'/%3E%3Cellipse cx='21.2' cy='65.1' rx='3.7' ry='1.55' transform='rotate(210.3 21.2 65.1)'/%3E%3Cellipse cx='11.6' cy='59.5' rx='3.7' ry='1.55' transform='rotate(288.2 11.6 59.5)'/%3E%3Cellipse cx='18.4' cy='57.8' rx='3.7' ry='1.55' transform='rotate(224.2 18.4 57.8)'/%3E%3Cellipse cx='10.5' cy='50' rx='3.7' ry='1.55' transform='rotate(302 10.5 50)'/%3E%3Cellipse cx='17.5' cy='50' rx='3.7' ry='1.55' transform='rotate(238 17.5 50)'/%3E%3Cellipse cx='11.6' cy='40.5' rx='3.7' ry='1.55' transform='rotate(315.8 11.6 40.5)'/%3E%3Cellipse cx='18.4' cy='42.2' rx='3.7' ry='1.55' transform='rotate(251.8 18.4 42.2)'/%3E%3Cellipse cx='15' cy='31.6' rx='3.7' ry='1.55' transform='rotate(329.7 15 31.6)'/%3E%3Cellipse cx='21.2' cy='34.9' rx='3.7' ry='1.55' transform='rotate(265.7 21.2 34.9)'/%3E%3Cellipse cx='20.4' cy='23.8' rx='3.7' ry='1.55' transform='rotate(343.5 20.4 23.8)'/%3E%3Cellipse cx='25.7' cy='28.4' rx='3.7' ry='1.55' transform='rotate(279.5 25.7 28.4)'/%3E%3Cellipse cx='27.6' cy='17.5' rx='3.7' ry='1.55' transform='rotate(357.4 27.6 17.5)'/%3E%3Cellipse cx='31.5' cy='23.3' rx='3.7' ry='1.55' transform='rotate(293.4 31.5 23.3)'/%3E%3Cellipse cx='36' cy='13.1' rx='3.7' ry='1.55' transform='rotate(371.2 36 13.1)'/%3E%3Cellipse cx='38.5' cy='19.6' rx='3.7' ry='1.55' transform='rotate(307.2 38.5 19.6)'/%3E%3Cellipse cx='45.2' cy='10.8' rx='3.7' ry='1.55' transform='rotate(385.1 45.2 10.8)'/%3E%3Cellipse cx='46.1' cy='17.7' rx='3.7' ry='1.55' transform='rotate(321.1 46.1 17.7)'/%3E%3Cellipse cx='54.8' cy='10.8' rx='3.7' ry='1.55' transform='rotate(398.9 54.8 10.8)'/%3E%3Cellipse cx='53.9' cy='17.7' rx='3.7' ry='1.55' transform='rotate(334.9 53.9 17.7)'/%3E%3Cellipse cx='64' cy='13.1' rx='3.7' ry='1.55' transform='rotate(412.8 64 13.1)'/%3E%3Cellipse cx='61.5' cy='19.6' rx='3.7' ry='1.55' transform='rotate(348.8 61.5 19.6)'/%3E%3Cellipse cx='72.4' cy='17.5' rx='3.7' ry='1.55' transform='rotate(426.6 72.4 17.5)'/%3E%3Cellipse cx='68.5' cy='23.3' rx='3.7' ry='1.55' transform='rotate(362.6 68.5 23.3)'/%3E%3Cellipse cx='79.6' cy='23.8' rx='3.7' ry='1.55' transform='rotate(440.5 79.6 23.8)'/%3E%3Cellipse cx='74.3' cy='28.4' rx='3.7' ry='1.55' transform='rotate(376.5 74.3 28.4)'/%3E%3Cellipse cx='85' cy='31.6' rx='3.7' ry='1.55' transform='rotate(454.3 85 31.6)'/%3E%3Cellipse cx='78.8' cy='34.9' rx='3.7' ry='1.55' transform='rotate(390.3 78.8 34.9)'/%3E%3Cellipse cx='88.4' cy='40.5' rx='3.7' ry='1.55' transform='rotate(468.2 88.4 40.5)'/%3E%3Cellipse cx='81.6' cy='42.2' rx='3.7' ry='1.55' transform='rotate(404.2 81.6 42.2)'/%3E%3C/g%3E%3Cg fill='none' stroke='%23140C06'%3E%3Ccircle cx='50' cy='50' r='45' stroke-width='1.4'/%3E%3Ccircle cx='50' cy='50' r='28' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --seal-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M95.8 50L97.1 52.1L97.7 54.2L97.6 56.3L96.9 58.3L95.9 60.2L94.7 62L93.5 63.7L92.2 65.4L90.9 66.9L89.5 68.4L88 69.8L86.5 71.1L85.2 72.4L84.1 73.9L83.3 75.6L82.9 77.6L82.7 80L82.5 82.5L81.9 84.8L80.9 86.8L79.2 88.1L77 88.6L74.5 88.5L71.9 88L69.5 87.4L67.3 87.2L65.5 87.5L64 88.5L62.6 90L61.2 91.9L59.7 93.8L58 95.3L56.1 96.5L54.1 97.1L52.1 97.3L50 97.2L48 96.9L45.9 96.3L44 95.6L42.1 94.6L40.4 93.3L38.8 91.7L37.4 90.1L35.9 88.6L34.5 87.5L32.8 86.9L30.8 86.9L28.4 87.3L25.9 87.9L23.2 88.2L20.8 88L18.9 87L17.6 85.4L16.9 83.1L16.6 80.6L16.6 78L16.4 75.8L15.9 73.9L15 72.3L13.6 71L11.9 69.8L10.2 68.6L8.6 67.2L7.2 65.6L6 63.9L5.1 62L4.4 60.1L3.7 58.2L3.4 56.1L3.3 54.1L3.7 52L4.7 50L6.1 48.1L7.7 46.3L9.3 44.6L10.5 43L11 41.4L10.8 39.5L9.9 37.4L8.8 35L7.6 32.5L7 30L7.1 27.7L8.1 25.8L9.8 24.4L11.9 23.3L14.2 22.6L16.4 21.8L18.4 21L19.9 19.9L21.3 18.7L22.5 17.2L23.7 15.7L24.9 14.2L26.3 12.8L27.7 11.4L29.2 10L30.6 8.5L32.2 7L33.9 5.7L35.8 4.8L37.8 4.4L40 4.8L42.2 5.7L44.4 7.1L46.4 8.6L48.2 9.8L50 10.3L51.7 10L53.6 9L55.6 7.4L57.8 5.7L60.1 4.4L62.4 3.7L64.5 3.9L66.5 4.8L68.1 6.3L69.6 8.1L70.9 9.9L72.2 11.6L73.5 13.2L74.8 14.6L76.2 15.9L77.5 17.2L78.9 18.5L80.2 19.8L81.7 20.9L83.4 22L85.3 22.9L87.3 23.9L89.4 24.9L91.1 26.3L92.4 28L92.8 30L92.6 32.4L91.7 34.8L90.6 37.2L89.6 39.4L89.1 41.3L89.4 43L90.5 44.7L92.1 46.3L94 48.1Z' fill='%23140C06'/%3E%3C/svg%3E");
}

@media (max-width: 639px) {
  :root { --gutter: 16px; }
}

/* ---------------------------------------------------------------- Reset / base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
:where(p) + :where(p) { margin-top: .9em; }

img, video, canvas { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
  color: var(--gold-light);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(232, 184, 75, .45);
  text-underline-offset: 3px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
a:hover { color: var(--gold-top); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

::selection { background: rgba(201, 149, 58, .35); color: var(--text); }

[hidden] { display: none !important; }

hr { border: 0; }

/* ---------------------------------------------------------------- Typography */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; color: var(--gold-light); }
h2, .h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; color: var(--text); }
h3, .h3 { font-size: 20px; line-height: 1.3; color: var(--text); }
h4, .h4 { font-size: 16px; line-height: 1.35; color: var(--text); }

.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(52px, 7.5vw, 104px);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold-light); /* fallback */
  background: linear-gradient(180deg, var(--gold-top) 8%, var(--gold-bottom) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgba(20, 12, 6, .85)) drop-shadow(0 10px 28px rgba(20, 12, 6, .55));
  text-wrap: nowrap;
}
/* The LAMPARA logo (the game's carved-gold wordmark) as a page's main title. */
.display-logo { margin: 0; line-height: 0; }
.display-logo img {
  display: block;
  width: clamp(260px, 40vw, 580px);
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 28px rgba(20, 12, 6, .55));
}

.lead { font-size: 21px; line-height: 1.55; color: var(--text-2); }
.small, small { font-size: 15px; line-height: 1.5; }

.eyebrow {
  display: block;
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  color: var(--gold);
}

.subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--text-2);
}

.muted { color: var(--text-3); }
.dim { color: var(--text-dim); }
.hud { color: var(--hud); text-shadow: 0 1px 2px var(--outline); }

.index-num {
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold-rule);
  font-variant-numeric: lining-nums;
}

.flow > * + * { margin-top: var(--flow-space, 1em); }

strong, b { font-weight: 600; color: var(--text); }

/* Quote — Crimson italic, source in Cinzel gold */
.quote { margin: 0; }
.quote__text, .quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--text);
}
.quote__source, .quote figcaption, .quote cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--gold);
}
.quote__source em, .quote figcaption em, .quote cite em { font-family: var(--font-body); font-style: italic; font-size: 15px; letter-spacing: 0; font-weight: 400; }
.quote--pull { padding-left: var(--s-5); border-left: 1px solid var(--gold-rule); }
.quote--pull .quote__text, .quote--pull blockquote { font-size: 19px; color: var(--text-2); }
.quote--hud .quote__text, .quote--hud blockquote { font-size: 24px; line-height: 1.45; color: var(--hud); text-shadow: 0 1px 2px var(--outline); }
.quote--hud .quote__source, .quote--hud figcaption, .quote--hud cite { text-shadow: 0 1px 2px var(--outline); }

/* ---------------------------------------------------------------- Layout */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--narrow { width: min(100% - 2 * var(--gutter), 760px); }

.section { position: relative; padding-block: var(--s-10); }
.section--sm { padding-block: var(--s-9); }
.section--panel {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section--harbour {
  background:
    radial-gradient(ellipse 70% 80% at 50% 110%, rgba(15, 56, 97, .38), rgba(15, 56, 97, 0) 70%),
    radial-gradient(ellipse 40% 50% at 50% 40%, rgba(255, 179, 102, .07), rgba(255, 179, 102, 0) 70%),
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 39, 65, .42) 70%, rgba(10, 39, 65, .58) 100%),
    var(--bg);
  border-top: 1px solid var(--border);
}

.section-head { max-width: 720px; margin-bottom: var(--s-7); }
.section-head .lead { margin-top: var(--s-4); }
.section-head--center { margin-inline: auto; text-align: center; }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
  align-items: center;
}
.split--top { align-items: start; }

.grid { display: grid; gap: var(--grid-gap, var(--s-5)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 220px), 100%), 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.stack--xs { --stack-gap: var(--s-2); }
.stack--sm { --stack-gap: var(--s-3); }
.stack--lg { --stack-gap: var(--s-5); }
.stack--xl { --stack-gap: var(--s-6); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3) var(--s-4)); }
.cluster--center { justify-content: center; }
.cluster--between { justify-content: space-between; }

@media (max-width: 959px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .section { padding-block: 72px; }
  .section--sm { padding-block: 56px; }
  .section-head { margin-bottom: var(--s-6); }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); --grid-gap: var(--s-3); }
  .lead { font-size: 19px; }
}

/* Rule — one thin gold line with a centred lozenge. Once per section at most. */
.rule {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 10px;
  margin: var(--s-5) auto;
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='10' viewBox='0 0 22 10'%3E%3Cpath d='M11 1l4 4-4 4-4-4z' fill='%23B8852E'/%3E%3Ccircle cx='2.5' cy='5' r='1' fill='%23B8852E'/%3E%3Ccircle cx='19.5' cy='5' r='1' fill='%23B8852E'/%3E%3C/svg%3E") center / 22px 10px no-repeat,
    linear-gradient(90deg, rgba(184, 133, 46, 0), rgba(184, 133, 46, .9)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(90deg, rgba(184, 133, 46, .9), rgba(184, 133, 46, 0)) right center / calc(50% - 16px) 1px no-repeat;
}
.rule--wide { max-width: none; }
.rule--start { margin-left: 0; }

/* "New to LAMPARA?" divider */
.rule-text {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-5) 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-3);
  text-align: center;
}
.rule-text::before, .rule-text::after { content: ''; flex: 1; height: 1px; background: var(--border-gold); }

/* Brand lock-up */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* touch target */
  text-decoration: none;
  flex: none;
}
.brand__lamp { height: 40px; width: auto; }
.brand__word { height: 30px; width: auto; }

/* ---------------------------------------------------------------- Buttons (game plaques) */
.btn {
  --btn-h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--btn-h);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.btn svg { width: 18px; height: 18px; }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  color: var(--btn-ink);
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  border-color: var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 230, 153, .6), inset 0 -2px 0 rgba(97, 67, 26, .35), var(--shadow-1);
  text-shadow: 0 1px 0 rgba(255, 230, 153, .35);
}
.btn--primary:hover {
  color: var(--btn-ink);
  background: linear-gradient(180deg, var(--btn-top-hover), var(--btn-bottom-hover));
  box-shadow: inset 0 1px 0 rgba(255, 230, 153, .75), inset 0 -2px 0 rgba(97, 67, 26, .35), 0 4px 16px rgba(0, 0, 0, .45);
}
.btn--primary:active { box-shadow: inset 0 2px 3px rgba(97, 67, 26, .45), var(--shadow-1); }
.btn--primary:disabled:hover { background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); }

/* Ornate end caps, like the game's gold plaque buttons. Hero CTAs only. */
.btn--plaque { margin-inline: 15px; }
.btn--plaque::before, .btn--plaque::after {
  content: '';
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 16px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: opacity 150ms ease, filter 150ms ease;
}
.btn--plaque::before { left: -15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='48' viewBox='0 0 16 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F0C25C'/%3E%3Cstop offset='1' stop-color='%23D39A36'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 8.5H10.5C10.5 12 8.3 14 5.6 14.2V18.2C2.6 19.6 1 21.6 1 24s1.6 4.4 4.6 5.8v4C8.3 34 10.5 36 10.5 39.5H15z' fill='url(%23g)' stroke='%237A5820' stroke-width='1'/%3E%3Ccircle cx='7' cy='24' r='2' fill='%2361431A'/%3E%3Cpath d='M10.5 14.5v19' stroke='%2361431A' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E"); }
.btn--plaque::after { right: -15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='48' viewBox='0 0 16 48'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F0C25C'/%3E%3Cstop offset='1' stop-color='%23D39A36'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(16 0) scale(-1 1)'%3E%3Cpath d='M15 8.5H10.5C10.5 12 8.3 14 5.6 14.2V18.2C2.6 19.6 1 21.6 1 24s1.6 4.4 4.6 5.8v4C8.3 34 10.5 36 10.5 39.5H15z' fill='url(%23g)' stroke='%237A5820' stroke-width='1'/%3E%3Ccircle cx='7' cy='24' r='2' fill='%2361431A'/%3E%3Cpath d='M10.5 14.5v19' stroke='%2361431A' stroke-opacity='.45' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E"); }
.btn--plaque:hover::before, .btn--plaque:hover::after { filter: brightness(1.06); }

.btn--secondary {
  color: var(--gold-light);
  background: transparent;
  border-color: var(--border-gold);
}
.btn--secondary:hover { color: var(--gold-light); background: var(--bg-hover); border-color: var(--gold); }

.btn--ghost {
  color: var(--gold-light);
  background: transparent;
  border-color: transparent;
  padding-inline: 12px;
}
.btn--ghost:hover { color: var(--gold-top); background: rgba(201, 149, 58, .08); }

/* Outline that reads on paper (secondary inside .parchment) */
.btn--ink, .parchment .btn--secondary {
  color: var(--heading-ink);
  background: transparent;
  border-color: var(--aged);
}
.btn--ink:hover, .parchment .btn--secondary:hover {
  color: var(--ink);
  background: rgba(170, 122, 55, .14);
  border-color: var(--heading-ink);
}
.parchment .btn--ghost { color: var(--heading-ink); }
.parchment .btn--ghost:hover { color: var(--ink); background: rgba(170, 122, 55, .14); }

.btn--danger { color: var(--error); background: transparent; border-color: rgba(192, 57, 43, .55); }
.btn--danger:hover { color: var(--error); background: rgba(139, 32, 32, .18); border-color: var(--crimson-light); }
.parchment .btn--danger { color: var(--ink-err); border-color: rgba(158, 31, 23, .5); }
.parchment .btn--danger:hover { color: var(--ink-err); background: rgba(158, 31, 23, .08); }

.btn--sm { --btn-h: 40px; padding: 0 16px; font-size: 14px; gap: 8px; }
.btn--sm.btn--plaque { margin-inline: 13px; }
.btn--sm.btn--plaque::before, .btn--sm.btn--plaque::after { width: 13px; }
.btn--sm.btn--plaque::before { left: -12px; }
.btn--sm.btn--plaque::after { right: -12px; }
.btn--block { display: flex; width: 100%; }
.btn--block.btn--plaque { width: calc(100% - 30px); }

/* Download gating states (game-download.js adds .soon / .down; home uses .btn-soon / .btn-down) */
.btn.soon, .btn.btn-soon, .btn[aria-disabled="true"] {
  color: var(--text-3);
  background: var(--bg-card);
  border-color: var(--border-gold);
  box-shadow: none;
  text-shadow: none;
  cursor: default;
}
.btn.soon:hover, .btn.btn-soon:hover, .btn[aria-disabled="true"]:hover { color: var(--text-3); background: var(--bg-card); border-color: var(--border-gold); }
.btn.down, .btn.btn-down, .btn.down:hover, .btn.btn-down:hover {
  color: var(--error);
  background: rgba(139, 32, 32, .14);
  border-color: rgba(192, 57, 43, .55);
}
.btn--plaque.soon::before, .btn--plaque.soon::after,
.btn--plaque.btn-soon::before, .btn--plaque.btn-soon::after,
.btn--plaque[aria-disabled="true"]::before, .btn--plaque[aria-disabled="true"]::after { opacity: .35; filter: grayscale(1); }
.parchment .btn.soon, .parchment .btn.btn-soon, .parchment .btn[aria-disabled="true"] {
  color: var(--ink-soft);
  background: rgba(170, 122, 55, .12);
  border-color: rgba(170, 122, 55, .6);
}
.parchment .btn.down, .parchment .btn.btn-down { color: var(--ink-err); background: rgba(158, 31, 23, .06); border-color: rgba(158, 31, 23, .5); }

/* Loading: <button class="btn …"><span class="btn-text">Sign In</span><span class="spinner"></span></button> */
.btn .spinner { display: none; width: 18px; height: 18px; border-width: 2px; border-color: rgba(201, 149, 58, .3); border-top-color: var(--gold-light); }
.btn--primary .spinner { border-color: rgba(27, 18, 6, .25); border-top-color: var(--btn-ink); }
.btn.loading, .btn.is-loading { pointer-events: none; }
.btn.loading .btn-text, .btn.is-loading .btn-text { display: none; }
.btn.loading .spinner, .btn.is-loading .spinner { display: block; }

/* ---------------------------------------------------------------- Site nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(10, 8, 5, .86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.site-nav.is-scrolled { border-bottom-color: var(--border); }
.site-nav__inner { height: 100%; display: flex; align-items: center; gap: var(--s-7); }
.site-nav__links { display: flex; align-items: center; gap: var(--s-6); height: 100%; }
.site-nav__links a, .site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 200ms var(--ease);
}
.site-nav__links a:hover, .site-nav__link:hover { color: var(--gold-light); }
.site-nav__links a[aria-current="page"], .site-nav__links a.is-active, .site-nav__links a.on, .site-nav__links a.active { color: var(--gold-light); }
.site-nav__links a[aria-current="page"]::after, .site-nav__links a.is-active::after, .site-nav__links a.on::after, .site-nav__links a.active::after { transform: scaleX(1); }
.site-nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); height: 100%; }

.site-nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.site-nav__toggle:hover { border-color: var(--gold); color: var(--gold-light); }
.site-nav__bars, .site-nav__bars::before, .site-nav__bars::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 200ms var(--ease), opacity 150ms ease;
}
.site-nav__bars { position: relative; }
.site-nav__bars::before, .site-nav__bars::after { content: ''; position: absolute; left: 0; }
.site-nav__bars::before { top: -6px; }
.site-nav__bars::after { top: 6px; }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars { background: transparent; }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav__sheet {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  padding: var(--s-2) var(--gutter) var(--s-5);
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-2);
}
.site-nav__sheet a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.site-nav__sheet a:not(.btn):hover, .site-nav__sheet a[aria-current="page"], .site-nav__sheet a.on, .site-nav__sheet a.is-active { color: var(--gold-light); }
.site-nav__sheet .btn { margin-top: var(--s-5); width: 100%; }

@media (max-width: 959px) {
  .site-nav__links, .site-nav__actions .site-nav__link { display: none; }
  .site-nav__toggle { display: inline-flex; }
  .site-nav__actions { gap: var(--s-3); }
  .site-nav.is-open .site-nav__sheet, .site-nav.open .site-nav__sheet { display: block; }
  .site-nav.is-open, .site-nav.open { border-bottom-color: var(--border); background: rgba(10, 8, 5, .97); }
}
@media (max-width: 639px) {
  .brand__lamp { height: 34px; }
  .brand__word { height: 26px; }
}

/* ---------------------------------------------------------------- Footer */
.site-footer {
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
  padding: var(--s-8) 0 var(--s-6);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-3);
}
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: var(--s-7); }
.site-footer__blurb { margin-top: var(--s-4); max-width: 36ch; color: var(--text-3); }
.site-footer__title {
  margin: 0 0 var(--s-4);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--text);
}
.site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer__links a { color: var(--text-2); text-decoration: none; }
.site-footer__links a:hover { color: var(--gold-light); }
.site-footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 15px;
  color: var(--text-dim);
}
.site-footer__social { display: flex; gap: var(--s-2); }
.site-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-3);
  transition: color 150ms ease, border-color 150ms ease;
}
.site-footer__social a:hover { color: var(--gold-light); border-color: var(--border-gold); }
.site-footer__social svg { width: 18px; height: 18px; }
@media (max-width: 959px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .site-footer { padding-top: var(--s-7); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .site-footer__bottom { margin-top: var(--s-7); }
}

/* ---------------------------------------------------------------- Surfaces */

/* Dark card */
.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.card:hover { border-color: var(--border-gold); }
.card--flush { padding: 0; overflow: hidden; }
.card__media { position: relative; background: var(--studio); }
.card__media > img, .card__media > video { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: var(--s-5) 28px 28px; }

/* Gold frame (the sprite "gold frame" board): rule + inner line + ornate corners */
.frame {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--gold-rule);
  border-radius: 2px;
  padding: var(--s-6);
}
.frame::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 133, 46, .25);
  pointer-events: none;
  z-index: 1;
}
.frame::before, .parchment::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  z-index: 2;
  background:
    var(--orn-tl) left top / 28px 28px no-repeat,
    var(--orn-tr) right top / 28px 28px no-repeat,
    var(--orn-bl) left bottom / 28px 28px no-repeat,
    var(--orn-br) right bottom / 28px 28px no-repeat;
}
.frame--media { padding: 8px; background: var(--studio); }
.frame--media > img, .frame--media > video, .frame--media > picture, .frame--media > .media { display: block; width: 100%; border-radius: 1px; }
.frame--media::before { background-size: 24px 24px; }

/* Parchment (the game's paper board): ink on paper, vignette, faint grain */
.parchment {
  position: relative;
  color-scheme: light;
  color: var(--ink);
  background:
    var(--paper-grain),
    var(--paper-mottle),
    radial-gradient(130% 110% at 50% 38%, var(--page) 0%, var(--page) 34%, var(--card-parchment) 82%, var(--aged) 128%);
  border: 1px solid var(--gold-rule);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(250, 238, 212, .28), inset 0 0 56px rgba(170, 122, 55, .42), var(--shadow-2);
  padding: 40px;
}
.parchment::before {
  background:
    var(--orn-tl) left top / 32px 32px no-repeat,
    var(--orn-tr) right top / 32px 32px no-repeat,
    var(--orn-bl) left bottom / 32px 32px no-repeat,
    var(--orn-br) right bottom / 32px 32px no-repeat,
    var(--orn-mid) center -3.5px / 12px 8px no-repeat,
    var(--orn-mid) center calc(100% + 3.5px) / 12px 8px no-repeat;
}
.parchment--light {
  background:
    var(--paper-grain),
    radial-gradient(130% 110% at 50% 38%, var(--wash) 0%, var(--wash) 38%, var(--card-fill) 120%);
  box-shadow: inset 0 0 0 1px rgba(250, 238, 212, .5), inset 0 0 44px rgba(170, 122, 55, .26), var(--shadow-2);
}
.parchment h1, .parchment h2, .parchment h3, .parchment h4,
.parchment .h1, .parchment .h2, .parchment .h3, .parchment .h4 { color: var(--heading-ink); }
.parchment .eyebrow { color: var(--heading-ink); }
.parchment p, .parchment li, .parchment .lead { color: var(--ink); }
.parchment .muted, .parchment .dim, .parchment small, .parchment .small { color: var(--ink-soft); }
.parchment strong, .parchment b { color: var(--ink); }
.parchment a:not(.btn) { color: var(--heading-ink); text-decoration-color: rgba(92, 31, 16, .5); }
.parchment a:not(.btn):hover { color: var(--ink); text-decoration-color: currentColor; }
.parchment :focus-visible { outline-color: var(--heading-ink); }
.parchment .index-num { color: var(--heading-ink); }
.parchment .rule-text { color: var(--ink-soft); }
.parchment .rule-text::before, .parchment .rule-text::after { background: rgba(170, 122, 55, .7); }
.parchment .quote__text, .parchment .quote blockquote { color: var(--ink); }
.parchment .quote__source, .parchment .quote figcaption { color: var(--heading-ink); }
.parchment ::selection { background: rgba(170, 122, 55, .35); color: var(--ink); }

/* Mahogany plaque (the "achievement unlocked" toast) */
.plaque {
  position: relative;
  color: var(--parchment-text);
  background: var(--wood-grain), linear-gradient(180deg, var(--mahogany-plaque), var(--mahogany));
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 230, 153, .1), 0 8px 24px rgba(0, 0, 0, .45);
  padding: 20px 24px;
}
.plaque::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 133, 46, .3);
  border-radius: 1px;
  pointer-events: none;
}
.plaque h2, .plaque h3, .plaque h4 { color: var(--parchment-text); }

/* Red ribbon banner label — sparingly ("Beta", achievement titles) */
.ribbon {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  margin: 0 15px 5px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--parchment-text);
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(20, 12, 6, .55);
  background: linear-gradient(180deg, var(--red-top) -70%, var(--ribbon) 38%, var(--seal) 100%);
  box-shadow: inset 0 1px 0 rgba(219, 56, 41, .7), inset 0 -1px 0 rgba(133, 18, 13, .9), inset 0 0 0 1px rgba(133, 18, 13, .35);
}
.ribbon::before, .ribbon::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 15px;
  height: 100%;
  background: linear-gradient(180deg, var(--seal), var(--red-bottom));
}
.ribbon::before { left: -14px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 6px 50%); background: linear-gradient(90deg, var(--seal), var(--red-bottom) 75%, var(--outline) 100%); }
.ribbon::after { right: -14px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); background: linear-gradient(270deg, var(--seal), var(--red-bottom) 75%, var(--outline) 100%); }

/* Wax seal with a check (verified / completed / unlocked) */
.seal {
  --size: 48px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  color: var(--parchment-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--size) * .34);
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(20, 12, 6, .5));
}
.seal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 36% 30%, var(--red-top) 0%, var(--ribbon) 30%, var(--seal) 58%, var(--red-bottom) 100%);
  -webkit-mask: var(--seal-mask) center / 100% 100% no-repeat;
  mask: var(--seal-mask) center / 100% 100% no-repeat;
}
.seal::after {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23FAEDCC' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow:
    inset 0 1px 2px rgba(133, 18, 13, .95),
    inset 0 -1px 1px rgba(219, 56, 41, .55),
    0 1px 0 rgba(219, 56, 41, .5),
    0 -1px 1px rgba(133, 18, 13, .7);
}
.seal--icon::after { background-image: none; }
.seal > * { position: relative; z-index: 1; }
.seal--sm { --size: 28px; filter: drop-shadow(0 1px 1px rgba(20, 12, 6, .5)); }
.seal--lg { --size: 88px; }

/* Laurel medal */
.medal {
  --size: 64px;
  --m-base: var(--medal-gold);
  --m-face: var(--medal-gold);
  --m-sheen: linear-gradient(150deg, rgba(250, 238, 212, .55), rgba(250, 238, 212, 0) 46%, rgba(20, 12, 6, .45) 100%);
  --m-ink: var(--outline);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 50%;
  color: var(--m-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--size) * .32);
  line-height: 1;
  font-variant-numeric: lining-nums;
  background:
    radial-gradient(circle at 44% 40%, rgba(250, 238, 212, .2), rgba(250, 238, 212, 0) 26%),
    radial-gradient(closest-side, var(--m-face) 0 51%, rgba(20, 12, 6, .55) 53%, rgba(250, 238, 212, .25) 56%, rgba(0, 0, 0, 0) 58%),
    var(--m-sheen),
    var(--m-base);
  box-shadow: inset 0 0 0 1px rgba(20, 12, 6, .45), inset 0 1px 1px rgba(250, 238, 212, .4), 0 3px 8px rgba(0, 0, 0, .45);
}
.medal::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(20, 12, 6, .55), rgba(20, 12, 6, .3));
  -webkit-mask: var(--laurel-mask) center / 100% 100% no-repeat;
  mask: var(--laurel-mask) center / 100% 100% no-repeat;
  pointer-events: none;
}
.medal svg { width: 38%; height: 38%; }
.medal--gold {
  --m-base: var(--gold-face);
  --m-face: var(--medal-gold);
  --m-sheen: linear-gradient(150deg, rgba(255, 230, 153, .9), rgba(255, 230, 153, 0) 48%, rgba(97, 67, 26, .6) 100%);
}
.medal--silver { --m-base: var(--medal-silver); --m-face: var(--medal-silver); }
.medal--bronze { --m-base: var(--medal-bronze); --m-face: var(--medal-bronze); --m-ink: var(--parchment-text); }
.medal--bronze { text-shadow: 0 1px 1px rgba(20, 12, 6, .6); }
.medal--locked {
  --m-base: var(--medal-locked);
  --m-face: var(--medal-locked);
  --m-sheen: linear-gradient(150deg, rgba(250, 238, 212, .16), rgba(250, 238, 212, 0) 46%, rgba(20, 12, 6, .4) 100%);
  --m-ink: var(--text-2);
}
.medal--locked::before { opacity: .6; }
.medal--sm { --size: 36px; }
.medal--lg { --size: 96px; }

/* Gold-rimmed round image (quest thumbnails, player initial) */
.medallion {
  --size: 72px;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold-top), var(--gold-face) 38%, var(--gold-dark) 100%);
  box-shadow: 0 0 0 1px var(--gold-dark), 0 4px 14px rgba(0, 0, 0, .5);
}
.medallion > img, .medallion > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--mahogany);
  object-fit: cover;
}
.medallion > span {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--mahogany-plaque), var(--mahogany));
  color: var(--gold-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--size) * .4);
  line-height: 1;
}
.medallion--sm { --size: 40px; padding: 2px; }
.medallion--sm > img, .medallion--sm > span { border-width: 1px; }
.medallion--lg { --size: 104px; }
.medallion.is-locked { background: linear-gradient(160deg, var(--text-dim), var(--medal-locked)); box-shadow: 0 0 0 1px var(--border-gold), 0 4px 14px rgba(0, 0, 0, .5); }
.medallion.is-locked > img { filter: grayscale(1) brightness(.55); }

/* Artifact display case */
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: border-color 200ms ease;
}
button.case { padding: 0; font: inherit; width: 100%; }
.case:hover { border-color: var(--border-gold); color: inherit; }
.case__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 14%;
  background:
    radial-gradient(closest-side at 50% 56%, rgba(255, 179, 102, .26), rgba(255, 158, 56, .09) 55%, rgba(255, 158, 56, 0) 100%),
    var(--studio);
}
.case__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6));
  transition: transform 250ms var(--ease);
}
.case:hover .case__media img { transform: translateY(-3px); }
.case__body { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5) var(--s-5); border-top: 1px solid var(--border); }
.case__name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--text); }
.case__meta { font-size: 15px; line-height: 1.4; color: var(--text-3); }
.case__action { margin-top: var(--s-1); font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--gold-light); }
.case.is-locked .case__media { background: radial-gradient(closest-side at 50% 56%, rgba(74, 70, 65, .45), rgba(74, 70, 65, 0) 100%), var(--studio); }
.case.is-locked .case__media img { filter: grayscale(1) brightness(.42); }
.case.is-locked .case__name { color: var(--text-3); }

/* ---------------------------------------------------------------- Stats / KPI */
.stats { display: flex; padding: 28px 8px; }
.stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px var(--s-4);
  text-align: center;
}
.stats .stat + .stat { border-left: 1px solid rgba(184, 133, 46, .3); }
.stat__value {
  order: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--gold-light);
  font-variant-numeric: lining-nums;
}
.stat__label { order: 1; font-size: 17px; line-height: 1.3; color: var(--parchment-text); }
dl.stats, .stats dt, .stats dd { margin: 0; }
@media (max-width: 719px) {
  .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-2) var(--s-3); }
  .stat { padding: var(--s-4) var(--s-2); }
  .stats .stat + .stat { border-left: 0; }
  .stats .stat:nth-child(even) { border-left: 1px solid rgba(184, 133, 46, .3); }
  .stats .stat:nth-child(n+3) { border-top: 1px solid rgba(184, 133, 46, .3); }
  .stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--s-4); }
@media (max-width: 639px) { .kpi-grid { gap: var(--s-3); } .kpi { padding: 16px 18px; } .kpi__value { font-size: 28px; } }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.kpi__label { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.3; color: var(--text-2); }
.kpi__value { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--gold-light); font-variant-numeric: lining-nums; }
.kpi__meta { font-size: 15px; line-height: 1.4; color: var(--text-3); }

/* ---------------------------------------------------------------- Badges / chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 2px 10px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: rgba(201, 149, 58, .08);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
}
.badge--success { color: var(--success); border-color: rgba(45, 106, 63, .65); background: rgba(45, 106, 63, .16); }
.badge--danger { color: var(--error); border-color: rgba(192, 57, 43, .55); background: rgba(139, 32, 32, .16); }
.badge--muted { color: var(--text-3); border-color: var(--border); background: transparent; }
.parchment .badge { color: var(--heading-ink); border-color: rgba(170, 122, 55, .65); background: rgba(170, 122, 55, .12); }
.parchment .badge--success { color: var(--ink-ok); border-color: rgba(33, 102, 31, .45); background: rgba(33, 102, 31, .08); }
.parchment .badge--danger { color: var(--ink-err); border-color: rgba(158, 31, 23, .45); background: rgba(158, 31, 23, .07); }
.parchment .badge--muted { color: var(--ink-soft); border-color: rgba(84, 54, 26, .3); background: transparent; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text-3);
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.chip::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='none' stroke='%23140C06' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4' fill='none' stroke='%23140C06' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.chip.met, .chip.is-ok { color: var(--success); border-color: rgba(45, 106, 63, .6); background: rgba(45, 106, 63, .12); }
.chip.met::before, .chip.is-ok::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.6' fill='none' stroke='%23140C06' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.4l2.4 2.4 5.2-5.6' fill='none' stroke='%23140C06' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.parchment .chip { color: var(--ink-soft); border-color: rgba(84, 54, 26, .3); background: rgba(250, 238, 212, .35); }
.parchment .chip.met, .parchment .chip.is-ok { color: var(--ink-ok); border-color: rgba(33, 102, 31, .5); background: rgba(33, 102, 31, .08); }

/* ---------------------------------------------------------------- Progress / meter */
.progress {
  --value: 0%;
  position: relative;
  display: block;
  height: 10px;
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  background: var(--wood);
  box-shadow: inset 0 1px 2px rgba(20, 12, 6, .6);
  overflow: hidden;
}
.progress__fill {
  display: block;
  height: 100%;
  width: var(--value);
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--bar-top), var(--bar-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 230, 153, .7);
  transition: width 250ms var(--ease);
}
.progress--sm { height: 6px; }
.progress--lg { height: 14px; }
.parchment .progress { border-color: rgba(84, 54, 26, .55); }

.meter--suspicion {
  height: 12px;
  background:
    linear-gradient(90deg, rgba(51, 191, 77, .2) 0 33.33%, rgba(230, 166, 26, .2) 33.33% 66.66%, rgba(217, 51, 51, .2) 66.66%),
    var(--wood);
}
.meter--suspicion .progress__fill {
  width: 100%;
  background: linear-gradient(90deg, var(--sus-low) 0 33.33%, var(--sus-mid) 33.33% 66.66%, var(--sus-high) 66.66%);
  box-shadow: inset 0 1px 0 rgba(250, 238, 212, .45);
  clip-path: inset(0 calc(100% - var(--value)) 0 0 round 999px);
  transition: clip-path 250ms var(--ease);
}
.meter--suspicion::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent calc(33.33% - 1px), rgba(20, 12, 6, .75) calc(33.33% - 1px) calc(33.33% + 1px),
    transparent calc(33.33% + 1px) calc(66.66% - 1px), rgba(20, 12, 6, .75) calc(66.66% - 1px) calc(66.66% + 1px),
    transparent calc(66.66% + 1px));
  pointer-events: none;
}
.meter__scale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s-2);
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-3);
}
.meter__scale > :nth-child(2) { text-align: center; }
.meter__scale > :nth-child(3) { text-align: right; }
.parchment .meter__scale { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Forms */
.form { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.form-grid > .field--full, .form-grid > .span-2 { grid-column: 1 / -1; }
@media (max-width: 559px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field__label, .field > label:not(.checkbox) {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--text-2);
}
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.field__row a { font-size: 16px; }
.field__hint { font-size: 15px; line-height: 1.4; color: var(--text-3); }
.field__hint:empty { display: none; }
.field__error, .field__hint.err, .field__hint.is-error { font-size: 15px; line-height: 1.4; color: var(--error); }
.field__hint.ok, .field__hint.is-ok { color: var(--success); }

.input, .select, .textarea {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-dim); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-gold); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(219, 173, 77, .25);
}
.input[aria-invalid="true"], .input.is-invalid, .input.err { border-color: var(--crimson-light); }
.input[aria-invalid="true"]:focus, .input.is-invalid:focus, .input.err:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .25); }
.input.is-valid, .input.ok { border-color: var(--success-dark); }
.input:disabled { opacity: .55; cursor: not-allowed; }
.textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5l4 4 4-4' fill='none' stroke='%23C9953A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px var(--bg-card) inset;
  transition: background-color 9999s 0s;
}
input[type="date"].input { padding-right: 10px; }

/* Show/Hide password */
.input-group { position: relative; display: block; }
.input-group > .input { padding-right: 84px; }
.input-group__btn {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: 68px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.input-group__btn:hover { background: rgba(201, 149, 58, .1); }

/* Checkbox */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.checkbox input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.checkbox input:hover { border-color: var(--gold); }
.checkbox input:checked {
  border-color: var(--gold-dark);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231B1206' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat, linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
}
.checkbox input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Alert */
.alert {
  --alert-c: var(--gold-light);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  padding: 12px 16px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  background: rgba(201, 149, 58, .08);
  color: var(--text);
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
}
.alert::before {
  content: 'i';
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--alert-c);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.alert:empty { display: none; }
.alert--success { --alert-c: var(--success); border-color: rgba(45, 106, 63, .55); background: rgba(45, 106, 63, .16); }
.alert--success::before { content: '\2713'; }
.alert--danger { --alert-c: var(--error); border-color: rgba(192, 57, 43, .45); background: rgba(139, 32, 32, .16); }
.alert--danger::before { content: '!'; }
.parchment .alert { color: var(--heading-ink); border-color: rgba(170, 122, 55, .6); background: rgba(170, 122, 55, .1); --alert-c: var(--heading-ink); }
.parchment .alert--success { color: var(--ink-ok); border-color: rgba(33, 102, 31, .4); background: rgba(33, 102, 31, .08); --alert-c: var(--ink-ok); }
.parchment .alert--danger { color: var(--ink-err); border-color: rgba(158, 31, 23, .4); background: rgba(158, 31, 23, .07); --alert-c: var(--ink-err); }

/* Paper inputs (the game's registration form on parchment) */
.parchment .field__label, .parchment .field > label:not(.checkbox) { color: var(--heading-ink); }
.parchment .field__hint { color: var(--ink-soft); }
.parchment .field__error, .parchment .field__hint.err, .parchment .field__hint.is-error { color: var(--ink-err); }
.parchment .field__hint.ok, .parchment .field__hint.is-ok { color: var(--ink-ok); }
.parchment .input, .parchment .select, .parchment .textarea {
  background-color: var(--wash);
  border-color: var(--aged);
  color: var(--ink);
  box-shadow: inset 0 1px 2px rgba(84, 54, 26, .14);
}
.parchment .input::placeholder, .parchment .textarea::placeholder { color: rgba(84, 54, 26, .7); }
.parchment .input:hover, .parchment .select:hover, .parchment .textarea:hover { border-color: var(--ink-soft); }
.parchment .input:focus, .parchment .select:focus, .parchment .textarea:focus {
  border-color: var(--gold-dark);
  box-shadow: inset 0 1px 2px rgba(84, 54, 26, .14), 0 0 0 3px rgba(219, 173, 77, .7);
}
.parchment .input[aria-invalid="true"], .parchment .input.is-invalid, .parchment .input.err { border-color: var(--ink-err); }
.parchment .input[aria-invalid="true"]:focus, .parchment .input.is-invalid:focus, .parchment .input.err:focus { box-shadow: 0 0 0 3px rgba(158, 31, 23, .2); }
.parchment .input.is-valid, .parchment .input.ok { border-color: var(--ink-ok); }
.parchment .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.5l4 4 4-4' fill='none' stroke='%235C1F10' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.parchment .input:-webkit-autofill, .parchment .input:-webkit-autofill:hover, .parchment .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px var(--wash) inset;
}
.parchment .input-group__btn { color: var(--heading-ink); }
.parchment .input-group__btn:hover { background: rgba(170, 122, 55, .16); }
.parchment .checkbox { color: var(--ink); }
.parchment .checkbox input { border-color: var(--aged); background-color: var(--wash); }
.parchment .checkbox input:hover { border-color: var(--ink-soft); }
.parchment .checkbox input:checked { border-color: var(--gold-dark); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%231B1206' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat, linear-gradient(180deg, var(--btn-top), var(--btn-bottom)); }
.parchment .checkbox input:focus-visible { outline-color: var(--heading-ink); }

/* ---------------------------------------------------------------- Auth layout */
.auth {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  min-height: 100vh;
  background: var(--bg);
}
.auth--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.auth__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  padding: var(--s-6) var(--s-7);
}
.auth__top, .auth__foot { width: 100%; max-width: 460px; margin-inline: auto; }
.auth--wide .auth__top, .auth--wide .auth__foot { max-width: 600px; }
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.auth__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 17px;
  color: var(--text-2);
  text-decoration: none;
}
.auth__back:hover { color: var(--gold-light); }
.auth__back svg { width: 16px; height: 16px; }
.auth__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s-7) 0;
}
.auth--wide .auth__body { max-width: 600px; }
.auth__title { font-size: clamp(34px, 3.4vw, 46px); }
.auth__subtitle { margin-top: var(--s-3); font-size: 19px; line-height: 1.5; color: var(--text-2); }
.auth__card { margin-top: var(--s-6); padding: 36px; }
.auth__alt { margin-top: var(--s-5); text-align: center; font-size: 17px; color: var(--text-2); }
.auth__foot { font-size: 14px; line-height: 1.5; color: var(--text-dim); text-align: center; }

.auth__art {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--lamp-bg);
}
.auth__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth__art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(10, 8, 5, .62) 12%, rgba(10, 8, 5, 0) 36%),
    linear-gradient(0deg, rgba(10, 8, 5, .94) 0%, rgba(10, 8, 5, .6) 26%, rgba(10, 8, 5, 0) 54%),
    linear-gradient(180deg, rgba(10, 8, 5, .45) 0%, rgba(10, 8, 5, 0) 18%);
}
.auth__art--lamp .auth__media {
  height: calc(100% - 150px);
  object-fit: cover;
  object-position: 50% 50%;
  /* 16:9 clip in a tall panel: cover the panel and fade the clip's bottom edge into the lamp background */
  -webkit-mask-image: linear-gradient(180deg, black 76%, transparent 100%);
  mask-image: linear-gradient(180deg, black 76%, transparent 100%);
}
.auth__art--lamp::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side at 52% 42%, rgba(255, 179, 102, .16), rgba(255, 158, 56, .05) 55%, rgba(255, 158, 56, 0) 100%);
}
.auth__quote { position: absolute; z-index: 2; left: 56px; right: 56px; bottom: 56px; max-width: 540px; }

@media (max-width: 959px) {
  .auth, .auth--wide { grid-template-columns: minmax(0, 1fr); }
  .auth__art {
    order: -1;
    position: relative;
    height: auto;
    min-height: 200px;
    display: flex;
    align-items: flex-end;
  }
  .auth__art::before {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, .78) 38%, rgba(10, 8, 5, .2) 100%),
      linear-gradient(180deg, rgba(10, 8, 5, .7) 0%, rgba(10, 8, 5, 0) 40%);
  }
  .auth__quote { position: relative; left: auto; right: auto; bottom: auto; width: 100%; max-width: none; padding: 96px var(--gutter) 4px; }
  .auth__quote .quote__text, .auth__quote blockquote { font-size: 18px; }
  .auth__top, .auth--wide .auth__top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; max-width: none; padding: var(--s-3) var(--gutter); }
  .auth__art--lamp .auth__media { height: 100%; object-fit: cover; object-position: 50% 30%; -webkit-mask-image: none; mask-image: none; }
  .auth__main { min-height: 0; padding: 0 var(--gutter) var(--s-6); }
  .auth__body { max-width: 600px; padding: var(--s-5) 0 var(--s-6); justify-content: flex-start; }
  .auth__card { padding: 28px 20px; }
}
@media (max-width: 639px) {
  .auth__card { padding: 26px 18px; }
}

/* Page state switcher (register / verify / reset-password) */
.state { display: none; }
.state.active, .state.is-active { display: block; animation: lp-fade 250ms ease both; }

/* ---------------------------------------------------------------- Spinner */
.spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex: none;
  border: 2px solid rgba(201, 149, 58, .22);
  border-top-color: var(--gold-light);
  border-radius: 50%;
  animation: lp-spin 900ms linear infinite;
}
.spinner--sm { width: 18px; height: 18px; }
.parchment .spinner { border-color: rgba(170, 122, 55, .35); border-top-color: var(--gold-dark); }
.parchment .btn--primary .spinner { border-color: rgba(27, 18, 6, .25); border-top-color: var(--btn-ink); }

/* ---------------------------------------------------------------- Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
  background: rgba(10, 8, 5, .82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal.is-open, .modal.open, .modal.active { display: flex; animation: lp-fade 200ms ease both; }
.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  padding: 40px;
  animation: lp-rise 250ms var(--ease) both;
}
.modal__panel:not(.parchment):not(.frame) {
  background: var(--bg-panel);
  border: 1px solid var(--border-gold);
  border-radius: 2px;
  box-shadow: var(--shadow-2);
}
.modal__panel.frame { background: var(--bg-panel); box-shadow: var(--shadow-2); }
.modal__panel--sm { max-width: 560px; }
.modal__panel--lg { max-width: 1080px; }
.modal__panel--media { max-width: 1080px; padding: 8px; }
.modal__panel--media.frame, .modal__panel--media:not(.parchment):not(.frame) { background: var(--studio); }
.modal__header { flex: none; padding-right: 48px; margin-bottom: var(--s-5); }
.modal__title { font-size: clamp(24px, 2.6vw, 32px); }
.modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  background: rgba(10, 8, 5, .7);
  color: var(--text-2);
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.modal__close:hover { color: var(--gold-light); border-color: var(--gold); }
.modal__close svg { width: 16px; height: 16px; }
.parchment .modal__close, .modal__panel.parchment .modal__close { border-color: rgba(170, 122, 55, .75); background: rgba(250, 238, 212, .55); color: var(--heading-ink); }
.parchment .modal__close:hover { color: var(--ink); border-color: var(--heading-ink); }
.modal__panel--media .modal__close { top: -52px; right: 0; }
body.modal-open, html.modal-open { overflow: hidden; }
@media (max-width: 639px) {
  .modal { padding: var(--s-3); }
  .modal__panel { padding: 28px 18px; max-height: calc(100dvh - 24px); }
  .modal__panel--media { padding: 6px; }
  .modal__close { top: 10px; right: 10px; width: 44px; height: 44px; }
}

/* ---------------------------------------------------------------- Table */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text-2);
  font-variant-numeric: lining-nums tabular-nums;
}
.table th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-3);
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background-color 150ms ease; }
.table tbody tr:hover { background: rgba(30, 24, 16, .7); }
.table tr.is-me, .table tr.is-highlight, .table tr.me { background: rgba(201, 149, 58, .10); }
.table tr.is-me > :first-child, .table tr.is-highlight > :first-child, .table tr.me > :first-child { box-shadow: inset 2px 0 0 var(--gold); }
.table tr.is-me td, .table tr.me td { color: var(--text); }
.table .num { text-align: right; }
.table td.strong, .table .name { color: var(--text); font-weight: 600; }
.parchment .table { color: var(--ink); }
.parchment .table th { color: var(--heading-ink); border-bottom-color: rgba(170, 122, 55, .7); }
.parchment .table td { border-bottom-color: rgba(170, 122, 55, .35); }
.parchment .table tbody tr:hover { background: rgba(170, 122, 55, .1); }
@media (max-width: 639px) {
  .table { font-size: 16px; }
  .table th, .table td { padding-inline: 10px; }
}

/* ---------------------------------------------------------------- Tabs */
.tabs {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-2);
  text-decoration: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.tabs__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 200ms var(--ease);
}
.tabs__tab:hover { color: var(--gold-light); }
.tabs__tab[aria-selected="true"], .tabs__tab.active, .tabs__tab.is-active { color: var(--gold-light); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab.active::after, .tabs__tab.is-active::after { transform: scaleX(1); }
.tabs__tab:focus-visible { outline-offset: -2px; }
@media (max-width: 639px) { .tabs { gap: var(--s-5); } }

/* ---------------------------------------------------------------- Timeline (quest medallions on a gold rule) */
.timeline {
  --steps: 7;
  --dot: 88px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline::before {
  content: '';
  position: absolute;
  top: calc(var(--dot) / 2);
  left: calc(100% / var(--steps) / 2);
  right: calc(100% / var(--steps) / 2);
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 133, 46, .25), var(--gold-rule) 12% 88%, rgba(184, 133, 46, .25));
}
.timeline__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; min-width: 0; }
.timeline__item .medallion { --size: var(--dot); }
.timeline__label { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.3; color: var(--text); }
.timeline__meta { font-size: 15px; line-height: 1.35; color: var(--text-3); }
@media (max-width: 959px) {
  .timeline { --dot: 64px; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .timeline::before { top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); left: calc(var(--dot) / 2); right: auto; width: 1px; height: auto; background: var(--gold-rule); }
  .timeline__item { flex-direction: row; text-align: left; gap: var(--s-4); }
}

/* ---------------------------------------------------------------- Art, glow, media */
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.backdrop > img, .backdrop > video, .backdrop > picture > img { width: 100%; height: 100%; object-fit: cover; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: var(--scrim, linear-gradient(0deg, var(--bg), rgba(10, 8, 5, .3))); }
.backdrop--hero {
  --scrim:
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, 0) 32%),
    linear-gradient(180deg, rgba(10, 8, 5, .55) 0%, rgba(10, 8, 5, 0) 22%),
    radial-gradient(80% 110% at 0% 55%, rgba(10, 39, 65, .42), rgba(10, 39, 65, 0) 70%),
    linear-gradient(90deg, rgba(10, 8, 5, .95) 0%, rgba(10, 8, 5, .84) 30%, rgba(10, 8, 5, .38) 58%, rgba(10, 8, 5, .06) 80%);
}
.backdrop--center {
  --scrim:
    linear-gradient(0deg, var(--bg) 0%, rgba(10, 8, 5, 0) 40%),
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(10, 8, 5, .5), rgba(10, 8, 5, .9) 100%),
    linear-gradient(180deg, rgba(10, 39, 65, .35), rgba(10, 39, 65, 0) 50%);
}
.backdrop + * { position: relative; z-index: 1; }

.glow { position: relative; isolation: isolate; }
.glow::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 180%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 179, 102, .3), rgba(255, 158, 56, .1) 45%, rgba(255, 158, 56, 0) 100%);
}

.media { position: relative; overflow: hidden; background: var(--studio); }
.media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------- Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 120;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--parchment-text);
  background: linear-gradient(180deg, var(--mahogany-plaque), var(--mahogany));
  border: 1px solid var(--gold-rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms var(--ease);
}
.toast.on, .toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- Motion */
.fade-up { animation: lp-fade-up 700ms var(--ease) both; }
.fade-up--d1 { animation-delay: 90ms; }
.fade-up--d2 { animation-delay: 180ms; }
.fade-up--d3 { animation-delay: 270ms; }

@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lp-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- Utilities */
.sr-only, .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--gold);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.mx-auto { margin-inline: auto; }
.w-full { width: 100%; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mt-9 { margin-top: var(--s-9); }
.mt-10 { margin-top: var(--s-10); }
.mb-0 { margin-bottom: 0; }
@media (max-width: 639px) { .hide-mobile { display: none !important; } }
@media (min-width: 640px) { .hide-desktop { display: none !important; } }

/* ---------------------------------------------------------------- Reduced motion */
/* ---------------------------------------------------------------- Embers (site-embers.js)
   The game's splash embers: a few warm sparks drift up behind the content. The layer is fixed at
   z-index 0 and added last, so it shows over backgrounds and art; cards, forms and plaques sit above it. */
.fx-embers { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx-ember {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #FFCF6A;
  box-shadow: 0 0 6px 2px rgba(255, 160, 60, .5);
  opacity: 0;
  animation: fx-ember linear infinite;
}
@keyframes fx-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: .75; }
  50% { opacity: .55; transform: translate(var(--sway, 20px), -50vh) scale(1); }
  85% { opacity: .2; }
  100% { opacity: 0; transform: translate(calc(var(--sway, 20px) * -.5), -105vh) scale(.4); }
}
:where(.card, .frame, .parchment, .plaque) { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .fx-embers { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}