/* ============================================================================
   SIDE QUEST ADVENTURE LLC - site.css
   Tokens + ornate gold-on-navy chrome + sections + the living-world stage.
   All art is in assets/. CSS here is UI chrome only: panels, studs, buttons,
   bars, banners, glows. Palette from design-system.md (law).
   ============================================================================ */

/* ---- 1. Tokens -------------------------------------------------------------- */
:root {
  /* Navy */
  --navy-950: #00081D;
  --navy-900: #000F23;
  --navy-850: #001125;
  --navy-800: #0B1621;
  --navy-700: #112539;
  --teal-800: #103342;

  /* Gold / amber */
  --gold: #DE8915;
  --gold-bright: #FBCE60;
  --gold-deep: #7B5125;
  --cream: #CABA73;
  --cream-lt: #E8D6A8;

  /* Royal blue */
  --royal-deep: #093163;
  --royal: #203C73;
  --royal-mid: #0D5785;
  --blue-steel: #4A5A73;

  /* Greens & wood */
  --forest: #384D38;
  --hill: #58825B;
  --wood: #705032;
  --wood-dk: #3A271B;

  /* Status */
  --status-active: #4CA85B;
  --status-forge: #0D5785;
  --status-heart: #E0608A;
  --status-locked: #6B6F7A;
  --status-campaign: #FBCE60;

  /* Body text */
  --ink: #E8E4D4;
  --ink-soft: #B9B79E;

  /* Type */
  --f-display: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --f-micro: "Press Start 2P", "Courier New", monospace;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --col: 1080px;
  --radius: 4px;

  /* Living-world clock vars (written by world.js; defaults = sunset still) */
  --night: 0;
  --warm: 1;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html { background: var(--navy-950); }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: transparent;   /* the fixed world stage shows through everywhere */
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--gold-bright); }

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0;
  color: var(--cream-lt);
}

p { margin: 0 0 1rem; }

/* Skip link */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--gold); color: var(--navy-950);
  padding: .6rem 1rem; border-radius: var(--radius);
  font-weight: 700; font-family: var(--f-body);
  transition: top .15s;
}
.skip:focus { top: 8px; }

/* Focus rings */
:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Film grain + vignette (chrome-class texture; data-URI, no inline svg art) */
.grain {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 240px 40px rgba(0,4,15,.75);
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ---- 3. Layout shell -------------------------------------------------------- */
.wrap { width: min(100% - 2rem, var(--col)); margin-inline: auto; }

.section { padding: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem) 0; position: relative; }

/* ---- 4. RPGPanel (the universal ornate gold-on-navy wrapper) ---------------- */
.panel {
  position: relative;
  /* translucent over the living world (Rath, round 4): the characters and the
     valley read through the glass; backdrop blur keeps the copy comfortable */
  background: linear-gradient(180deg, rgba(11,22,33,.72), rgba(0,13,30,.82));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow:
    inset 0 0 0 1px var(--cream),
    inset 0 0 32px rgba(0,4,15,.55),
    0 14px 40px rgba(0,0,0,.5);
  padding: clamp(1.3rem, 1rem + 2vw, 2.4rem);
}
/* corner studs - four gold rivets via layered radial gradients on ::before */
.panel::before {
  content: "";
  position: absolute; inset: 7px; pointer-events: none;
  border-radius: 2px;
  background:
    radial-gradient(circle at top left, var(--gold-bright) 0 3px, transparent 4px),
    radial-gradient(circle at top right, var(--gold-bright) 0 3px, transparent 4px),
    radial-gradient(circle at bottom left, var(--gold-bright) 0 3px, transparent 4px),
    radial-gradient(circle at bottom right, var(--gold-bright) 0 3px, transparent 4px);
}
.panel::after {
  content: "";
  position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(202,186,115,.35);
  border-radius: 3px;
}
.panel > * { position: relative; z-index: 1; }

/* ---- 5. SectionTitle (cream pixel type flanked by gold diamonds) ------------ */
/* Press Start 2P, not Pixelify: the Pixelify capital G reads as B at title sizes
   ("Guild" read "Build") locked at QA 2026-07-04; matches the mockup's square
   pixel titles anyway. */
.sec-title {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  font-family: var(--f-micro);
  font-size: clamp(.95rem, .7rem + 1.1vw, 1.5rem);
  line-height: 1.5;
  color: var(--cream);
  text-align: center;
  text-shadow: 0 2px 0 var(--gold-deep), 0 0 18px rgba(222,137,21,.25);
  margin-bottom: clamp(1.2rem, 1rem + 1vw, 2rem);
}
.sec-title::before, .sec-title::after {
  content: "";
  width: 12px; height: 12px; flex: none;
  background: var(--gold-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(251,206,96,.7);
}

/* ---- 6. PixelButton --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(.95rem, .85rem + .4vw, 1.15rem);
  letter-spacing: .03em;
  padding: .8rem 1.5rem;
  min-height: 48px;
  color: var(--navy-950);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 2px solid var(--gold-deep);
  border-radius: 3px;
  box-shadow: 0 4px 0 var(--gold-deep), 0 8px 18px rgba(0,0,0,.4);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep), 0 3px 10px rgba(0,0,0,.4); }
.btn .ico { width: 22px; height: 22px; }

.btn--ghost {
  color: var(--cream-lt);
  background: rgba(0,8,29,.82);   /* solid backing: must read over the campfire art */
  border: 2px solid var(--gold);
  box-shadow: 0 4px 0 rgba(123,81,37,.7), 0 8px 18px rgba(0,0,0,.4);
}
.btn--ghost:hover { background: rgba(9,49,99,.85); }

.btn--sm { font-size: .95rem; padding: .6rem 1.1rem; min-height: 44px; }

/* ---- 7. Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, var(--navy-950), rgba(0,15,35,.92));
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 3px 0 var(--gold-deep), 0 8px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
}
.nav {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem 0;
  width: min(100% - 2rem, 1240px); margin-inline: auto;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand img { width: 46px; height: 46px; image-rendering: pixelated; }
.brand .wordmark {
  display: inline-flex; align-items: baseline; gap: .5em;
  white-space: nowrap; line-height: 1;
}
.brand .wordmark .wm-short { display: none; }
.brand .wm-main {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1rem, .8rem + .8vw, 1.4rem);
  letter-spacing: .05em;
  color: var(--cream-lt);
  text-shadow: 0 2px 0 var(--gold-deep);
}
.brand .wm-llc {
  font-family: var(--f-micro);
  font-size: clamp(.6rem, .5rem + .35vw, .8rem);
  color: var(--gold-bright);
  letter-spacing: .04em;
  transform: translateY(-.1em);
}
.nav-links {
  display: flex; align-items: center; gap: .3rem;
  margin-left: auto; list-style: none; padding: 0; margin-block: 0;
}
.nav-links a {
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .45rem .8rem; min-height: 44px; min-width: 64px;
  color: var(--cream-lt); text-decoration: none; text-align: center;
  font-family: var(--f-micro); font-size: .6rem;   /* PS2P: Pixelify G = B trap */
  line-height: 1.4;
  border-radius: 3px;
  transition: background .12s, color .12s;
}
.nav-links a:hover { background: rgba(222,137,21,.16); color: var(--gold-bright); }
.nav-links a img { width: 26px; height: 26px; image-rendering: pixelated; }
.nav-cta { margin-left: .4rem; }

/* mobile nav: collapse text labels, keep icons + CTA */
@media (max-width: 860px) {
  .nav-links .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-links a { padding: .5rem; min-width: 44px; }
}
@media (max-width: 620px) {
  .brand .wordmark .wm-full { display: none; }
  .brand .wordmark .wm-short { display: inline; }
  .brand .wm-llc { display: none; }   /* clips against nav icons; the crest carries LLC */
}
@media (max-width: 560px) {
  .brand .wordmark { display: none; }   /* the crest carries the brand on phones */
  .brand .wm-main { font-size: .95rem; }
  .brand .wm-llc { font-size: .58rem; }
  .brand img { width: 40px; height: 40px; }
  .nav { gap: .5rem; }
  .nav-links { gap: .1rem; }
  .nav-links a { padding: .5rem .4rem; }
  .nav-cta { margin-left: .2rem; }
  .nav-cta .btn { padding: .55rem .7rem; }
  .nav-cta .btn .label-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ============================================================================
   8. HERO - THE LIVING WORLD STAGE
   ============================================================================ */
/* The world is a FIXED full-viewport backdrop: it follows the visitor down the
   whole page (Rath, 2026-07-04). The hero section is just the first "window"
   onto it; panels scroll over it; a scrim deepens with scroll for readability. */
.hero {
  position: relative; padding: 0; overflow-x: clip;
  min-height: clamp(540px, 92svh, 1080px);
}
.stage {
  position: fixed; inset: 66px 0 0 0;   /* below the sticky header so the castle top is never hidden */
  z-index: -1;
  overflow: hidden;
  background: var(--navy-950);
  isolation: isolate;
}
/* The world-frame holds ALL scene layers at the plate's native aspect ratio, so
   plates + residents always stay locked together. It COVERS the stage, anchored
   to the TOP so the castle peak stays visible on wide screens. */
.world-frame {
  position: absolute;
  left: 50%; bottom: 0;   /* anchor the GROUND to the stage bottom: the knight's feet + residents are
                             NEVER clipped on wide/short (fullscreen/ultrawide) screens. Any vertical
                             overflow crops from the TOP sky — the most expendable band. */
  transform: translateX(-50%);
  aspect-ratio: 33 / 14;
  width: max(100vw, calc((100vh - 66px) * 2.3572));
}
/* readability scrim: deepens as you scroll (JS sets --depth 0..1) */
.world-scrim {
  position: absolute; inset: 0;
  z-index: 7; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,8,29,.35), rgba(0,8,29,.78));
  opacity: var(--depth, 0);
}

/* On tall/narrow phones: bias the cover-crop toward the campfire hub. */
@media (max-width: 720px) {
  .world-frame { transform: translateX(-51%); }   /* portrait: pan to the KNIGHT (the hero), not just the campfire */
}

/* The four plates, stacked absolutely, opacity-crossfaded by world.js. */
.plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;   /* frame is already at plate AR, so no distortion */
  opacity: 0;
  z-index: 1;
}
.plate--sunset { opacity: 1; }   /* default pre-JS LCP frame */

/* Layer order inside the world-frame:
   plates(1) < sky/celestials(2) < LAND occlusion(3) < glow(4) < fx(5) < residents(6) */
.sky, .residents, .fx-layer, .land-layer {
  position: absolute; inset: 0; pointer-events: none;
}
.sky { z-index: 2; }
.land-layer { z-index: 3; }
.land {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;
  opacity: 0;
}
.land--sunset { opacity: 1; }   /* matches the default sunset plate */
.fx-layer { z-index: 5; }
.residents { z-index: 6; }

/* Celestial sprites (sun/moon) */
.celestial {
  position: absolute;
  width: clamp(38px, 4.4vw, 74px); height: auto;
  image-rendering: pixelated;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 22px rgba(251,206,96,.5));
}
.celestial--moon { filter: drop-shadow(0 0 22px rgba(200,220,255,.55)); }

/* Residents - all positioned in % of stage */
.resident {
  position: absolute;
  image-rendering: pixelated;
  transform-origin: bottom center;
}
.res-knight {
  left: 51%; bottom: 15.5%;   /* on the path, setting out toward the kingdom (center frame, clear of the hero copy) */
  height: 25%; width: auto;
  z-index: 6;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
/* grounding: a soft contact shadow so he never reads as floating */
.res-knight-shadow {
  position: absolute;
  left: 52.4%; bottom: 15%;
  width: 8.4%; height: 2.2%;
  z-index: 5;
  background: radial-gradient(ellipse at center, rgba(0,4,15,.55), transparent 70%);
}
.res-knight.facing { transform: scaleX(-1); }   /* turns toward the night threat */
.res-slime {
  left: 71%; bottom: 6%;   /* by the rocks along the path, right side */
  height: 11%; width: auto;
  z-index: 6;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.45));
  pointer-events: auto; cursor: grab; touch-action: none;   /* flickable resident */
}
.res-slime:active { cursor: grabbing; }
/* while tossed, JS owns the transform — the idle squish must let go */
html.fx .res-slime.tossed { animation: none; }
/* alert bubble over the knight */
.res-alert {
  left: 55.5%; bottom: 42%;   /* tracks the knight */
  height: 11%; width: auto;
  z-index: 7;
  opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
/* night encounter creature (goblin/skeleton) - starts off the right edge.
   The art natively faces LEFT toward the knight; .fleeing flips it to run away. */
.res-foe {
  right: -14%; bottom: 17%;
  height: 20%; width: auto;
  z-index: 6;
  opacity: 0;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.5));
}
.res-foe.fleeing { transform: scaleX(-1); }
/* Bigfoot peeks from the RIGHT pines (flipped to face the valley) */
.res-bigfoot {
  right: 1.5%; bottom: 16%;
  height: 26%; width: auto;
  z-index: 6;
  transform: scaleX(-1);
  opacity: 0;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.55));
}
.res-bigfoot.leaving { transform: scaleX(1); }   /* walking AWAY into the pines = faces right */
/* castle easter-egg hotspot (invisible, clickable) */
.castle-hotspot {
  position: absolute;
  left: 68%; top: 6%;
  width: 9%; height: 14%;
  z-index: 8;
  cursor: pointer;
  pointer-events: auto;
  background: transparent;
  border: 0;
}
/* clickable residents get pointer events */
.res-bigfoot.clickable, .res-foe.clickable { pointer-events: auto; cursor: pointer; }

/* campfire radial glow - pure CSS, centered on the plate's fire pit */
.campfire-glow {
  position: absolute;
  left: 32%; bottom: 14%;
  width: 24%; height: 34%;
  transform: translate(-50%, 0);
  z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,168,60, calc(.30 + var(--night) * .40)) 0%,
    rgba(255,120,30, calc(.14 + var(--night) * .22)) 34%,
    transparent 68%);
  mix-blend-mode: screen;
}

/* FX dots: fireflies + treeline eyes (chrome-class glow dots, NOT drawn art) */
.fx-dot {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.fx-firefly {
  width: 3px; height: 3px;
  background: #FFE08A;
  box-shadow: 0 0 6px 2px rgba(255,210,120,.8);
}
.fx-eye {
  width: 4px; height: 3px;
  background: #C9302C;
  box-shadow: 0 0 6px 2px rgba(220,60,50,.85);
}

/* Hero content overlay (headline + subcopy + buttons) sits over the stage */
.hero-copy {
  position: absolute; z-index: 8;
  left: clamp(1rem, 2vw, 3rem);
  top: 50%; transform: translateY(-50%);
  max-width: min(50%, 560px);
  pointer-events: auto;
}
.hero-copy h1 {
  font-size: clamp(2rem, 1.2rem + 4.2vw, 4.2rem);
  color: var(--cream-lt);
  text-shadow: 0 3px 0 var(--gold-deep), 0 0 24px rgba(0,8,29,.9), 0 4px 20px rgba(0,0,0,.8);
  margin-bottom: 1rem;
}
.hero-copy p {
  color: var(--ink);
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
  text-shadow: 0 2px 8px rgba(0,8,29,.95), 0 0 20px rgba(0,8,29,.9);
  max-width: 34ch;
  margin-bottom: 1.5rem;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* On phones the copy takes the full width at the top; the fixed world shows below */
@media (max-width: 720px) {
  .hero { min-height: 96svh; }
  .hero-copy {
    position: relative; top: auto; transform: none;
    max-width: 100%;
    padding: clamp(1.2rem, 1rem + 3vw, 2rem) 1rem;
    background: linear-gradient(180deg, rgba(0,8,29,.9), rgba(0,8,29,.55) 85%, transparent);
  }
  .hero-copy p { max-width: 100%; }
}

/* ============================================================================
   9. QUEST BOARD (carousel)
   ============================================================================ */
.carousel { position: relative; }
.carousel-track {
  display: flex; gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: .5rem .3rem 1.2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) var(--navy-800);
}
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }
.carousel-track::-webkit-scrollbar { height: 10px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 6px; }
.carousel-track::-webkit-scrollbar-track { background: var(--navy-800); }

.quest-card {
  flex: 0 0 clamp(260px, 40vw, 320px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .7rem;
  padding: 1.2rem;
}
.quest-card .qc-head { display: flex; align-items: center; gap: .7rem; }
.quest-card .qc-icon { width: 46px; height: 46px; image-rendering: pixelated; flex: none; }
.quest-card .qc-name {
  font-family: var(--f-display); font-weight: 700;
  font-size: 1.35rem; color: var(--cream-lt); line-height: 1.05;
}
.quest-card .qc-line { color: var(--ink-soft); font-size: .98rem; margin: 0; min-height: 3.2em; }

.badge {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--f-display); font-weight: 700;
  font-size: .85rem; letter-spacing: .04em;
  padding: .28rem .7rem; border-radius: 3px;
  color: var(--navy-950);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.badge--active   { background: var(--status-active); color: #05230b; }
.badge--forge    { background: var(--status-forge);  color: #eaf4ff; }
.badge--heart    { background: var(--status-heart);  color: #3a0a1c; }
.badge--locked   { background: var(--status-locked); color: #10121a; }
.badge--campaign { background: var(--status-campaign); color: #2a1c00; }

/* Stat bars */
.stats { display: flex; flex-direction: column; gap: .5rem; margin-top: .2rem; }
.stat { display: flex; align-items: center; gap: .55rem; }
.stat img { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
.stat-bar {
  flex: 1;
  height: 12px;
  background: var(--navy-950);
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  background-image: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.5) 9px 10px);
}
.stat-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width .9s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) { .stat-fill { transition: none; } }
.stat-num {
  font-family: var(--f-micro); font-size: 11px;
  color: var(--cream-lt); width: 3ch; text-align: right; flex: none;
}
.stat--empty .stat-num { color: var(--status-locked); }

.qc-cta { margin-top: auto; }
.qc-cta a.btn { width: 100%; justify-content: center; }
.qc-cta .sealed {
  display: block; text-align: center;
  font-family: var(--f-display); color: var(--status-locked);
  padding: .7rem; border: 2px dashed var(--status-locked); border-radius: 3px;
}

/* carousel arrows */
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 2px solid var(--gold-deep); border-radius: 50%;
  color: var(--navy-950); font-size: 1.4rem; font-weight: 900;
  cursor: pointer; z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.car-btn:hover { filter: brightness(1.08); }
.car-prev { left: -8px; }
.car-next { right: -8px; }
@media (max-width: 560px) { .car-btn { display: none; } }

/* ============================================================================
   10. GUILD HALL
   ============================================================================ */
.guild-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
@media (min-width: 780px) { .guild-grid { grid-template-columns: 1.2fr 1fr; } }

.guild-lead { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.guild-lead img { width: 68px; height: 68px; image-rendering: pixelated; flex: none; }
.guild-lead h2 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); color: var(--cream-lt); }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; margin-top: 1.2rem; }
.feature {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem;
  text-decoration: none;
  padding: .8rem .6rem;
  border: 2px solid transparent; border-radius: 4px;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.feature:hover, .feature:focus-visible {
  border-color: var(--gold);
  background: rgba(222,137,21,.08);
  transform: translateY(-2px);
}
.feature img { width: 52px; height: 52px; image-rendering: pixelated; }
.feature span {
  font-family: var(--f-display); font-weight: 700; font-size: 1rem;
  color: var(--cream-lt); line-height: 1.1;
}
.feature small {
  color: var(--ink-soft); font-size: .82rem; line-height: 1.45;
}
/* drop-down features (details/summary, no JS needed) */
.feature--drop { padding: 0; }
.feature--drop summary {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .8rem .6rem;
  cursor: pointer; list-style: none;
}
.feature--drop summary::-webkit-details-marker { display: none; }
.feature--drop summary::after {
  content: "+ open";
  font-family: var(--f-micro); font-size: .55rem;
  color: var(--gold-bright);
}
.feature--drop[open] summary::after { content: "- close"; }
.feature-list {
  list-style: none; margin: 0; padding: .2rem .8rem .9rem;
  display: grid; gap: .3rem;
  text-align: center;
  color: var(--ink); font-size: .9rem;
}
.feature-list li::before { content: "\2726  "; color: var(--gold); }

/* cast cameos (Wizard + Toasty) */
.cameos { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; margin-top: .5rem; }
.cameo { position: relative; }
.cameo img {
  image-rendering: pixelated;
  height: clamp(120px, 16vw, 170px); width: auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  transition: transform .2s ease;
}
.cameo:hover img, .cameo:focus-within img { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .cameo:hover img { transform: none; } }
.cameo-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  min-width: 180px; max-width: 240px;
  background: var(--navy-800);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: .6rem .8rem;
  font-size: .9rem; color: var(--ink);
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.cameo:hover .cameo-bubble, .cameo:focus-within .cameo-bubble { opacity: 1; transform: translate(-50%, -12px); }
.cameo-name {
  display: block; font-family: var(--f-display); font-weight: 700;
  color: var(--gold-bright); font-size: .85rem; margin-bottom: .15rem;
}

/* ============================================================================
   11. MEET THE BUILDER
   ============================================================================ */
.builder-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: center; }
@media (min-width: 720px) { .builder-grid { grid-template-columns: auto 1fr; } }

.portrait {
  position: relative;
  width: clamp(180px, 40vw, 240px);
  margin-inline: auto;
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--royal-deep), var(--navy-900));
  box-shadow: inset 0 0 0 1px var(--cream), 0 10px 28px rgba(0,0,0,.5);
  padding: .6rem .6rem 2.6rem;
}
.portrait img { width: 100%; height: auto; image-rendering: pixelated; }   /* height:auto kills the attr-height stretch */
.nameplate {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy-950);
  font-family: var(--f-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .05em;
  padding: .35rem 1.1rem; border-radius: 3px;
  border: 2px solid var(--gold-deep);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  white-space: nowrap;
}

.tags { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .6rem; }
.tags li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--cream-lt); }
.tags li::before {
  content: ""; width: 10px; height: 10px; flex: none;
  background: var(--gold-bright); transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(251,206,96,.6);
}

/* DialogueBox */
.dialogue {
  position: relative;
  background: var(--navy-800);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: 1.1rem 1.2rem .9rem;
  box-shadow: inset 0 0 0 1px rgba(202,186,115,.3), 0 8px 20px rgba(0,0,0,.4);
}
.dialogue::before {
  content: ""; position: absolute; left: 28px; top: -12px;
  width: 20px; height: 20px; background: var(--navy-800);
  border-left: 2px solid var(--gold); border-top: 2px solid var(--gold);
  transform: rotate(45deg);
}
.dialogue .name-tab {
  position: absolute; left: 16px; top: -16px;
  background: var(--gold); color: var(--navy-950);
  font-family: var(--f-display); font-weight: 700; font-size: .8rem;
  padding: .1rem .6rem; border-radius: 3px; z-index: 2;
}
.dialogue p { margin: 0; font-style: italic; color: var(--ink); font-size: 1.05rem; }

/* ============================================================================
   11b. FRIENDS & FAMILY (the home party)
   ============================================================================ */
.kin-intro { text-align: center; color: var(--ink-soft); margin: 0 0 1.6rem; }
.kin-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 620px) { .kin-grid { grid-template-columns: repeat(5, 1fr); } }
.kin { margin: 0; text-align: center; }
.kin-art {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  height: clamp(160px, 24vw, 220px);
  border: 3px solid var(--gold);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--royal-deep), var(--navy-900));
  box-shadow: inset 0 0 0 1px var(--cream), 0 10px 24px rgba(0,0,0,.5);
  padding: .5rem;
  overflow: hidden;
}
.kin-art img {
  height: 94%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
  transition: transform .2s ease;
}
.kin:hover .kin-art img, .kin:focus-within .kin-art img { transform: translateY(-6px) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .kin:hover .kin-art img, .kin:focus-within .kin-art img { transform: none; } }
.kin-name {
  /* Inter, NOT Pixelify: the pixel display font renders "Chonky" as "Ghonky"
     (capital C reads as G) — same ambiguous-glyph trap as G/B/numerals. Names must read. */
  display: block; margin-top: .7rem;
  font-family: var(--f-body); font-weight: 800;
  color: var(--gold-bright); font-size: clamp(.98rem, 2.3vw, 1.1rem); letter-spacing: .01em;
}
.kin-role { display: block; font-size: .85rem; color: var(--ink-soft); }
.kin-hint { text-align: center; color: var(--ink-soft); font-size: .82rem; margin: 1.4rem 0 0; opacity: .75; }

/* ============================================================================
   12. ADVENTURE SYSTEM (quest path)
   ============================================================================ */
.path {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  position: relative;
}
/* dotted gold connector behind the row */
.path::before {
  content: ""; position: absolute;
  left: 8%; right: 8%; top: 34px; height: 0;
  border-top: 3px dotted var(--gold);
  z-index: 0;
}
.step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; height: 100%; }
.step .num {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  /* Inter, NOT pixel type: pixel numerals misread (2 as 8, 3 as S) - QA 2026-07-04 */
  color: var(--navy-950); font-family: var(--f-body); font-weight: 800; font-size: 1.25rem;
  border: 2px solid var(--gold-deep);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.step .step-panel {
  background: var(--navy-800);
  border: 2px solid var(--gold);
  border-radius: 4px;
  padding: 1rem .7rem;
  width: 100%;
  flex: 1;   /* all five panels match height regardless of name wrap */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: inset 0 0 0 1px rgba(202,186,115,.25);
}
.step .step-panel img { width: 46px; height: 46px; image-rendering: pixelated; }
/* PS2P: Pixelify B and G are near-identical ("Build" read "Guild") - QA 2026-07-04 */
.step .step-name { font-family: var(--f-micro); color: var(--cream-lt); font-size: .62rem; line-height: 1.5; }

@media (max-width: 700px) {
  .path { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
  .path::before { display: none; }
}
@media (max-width: 420px) { .path { grid-template-columns: 1fr; } }

/* ============================================================================
   13. CAPTAIN'S LOG
   ============================================================================ */
.log-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
@media (min-width: 820px) { .log-grid { grid-template-columns: 1fr 1.1fr; } }
.log-desk {
  position: relative;
  border: 3px solid var(--gold); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--cream), 0 10px 28px rgba(0,0,0,.5);
  overflow: hidden;
}
.log-desk img { width: 100%; height: 100%; object-fit: cover; }
/* invisible desk easter-egg hotspots (the shelf books + the mug) */
.desk-hotspot {
  position: absolute; background: transparent; border: 0; cursor: pointer;
  padding: 0;
}
.desk-hotspot--books { left: 55%; top: 10%; width: 22%; height: 16%; }
.desk-hotspot--mug   { left: 60%; top: 55%; width: 13%; height: 16%; }
.log-more { margin-top: 1.1rem; }
/* journal tabs (the /log/ page): one journal per quest */
.log-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0 1.2rem; }
.log-tab {
  font-family: var(--f-micro); font-size: .58rem;
  color: var(--cream-lt);
  background: rgba(0,17,37,.7);
  border: 2px solid var(--gold-deep); border-radius: 3px;
  padding: .55rem .8rem; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.log-tab:hover { border-color: var(--gold); }
.log-tab.active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: var(--navy-950); border-color: var(--gold-deep);
}
.log-intro { color: var(--ink-soft); }
.log-entries { display: grid; gap: 1rem; margin-top: 1.2rem; }
.log-entry {
  background: var(--navy-800);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: .9rem 1.1rem;
}
.log-entry .log-date { font-family: var(--f-micro); font-size: 11px; color: var(--gold-bright); }
.log-entry .log-title { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--cream-lt); margin: .3rem 0; }
.log-entry .log-text { color: var(--ink); font-size: .98rem; margin: 0; }
.log-empty { color: var(--ink-soft); font-style: italic; }
/* the JS-rendered empty-state stays INVISIBLE until the journal fetch actually
   resolves empty — otherwise every load flashes "opens soon" (Rath, 2026-07-15).
   noscript copy is exempt (no JS will ever reveal it). */
#logEntries .log-empty { visibility: hidden; }
#logEntries .log-empty.log-empty--confirmed { visibility: visible; }
noscript .log-empty { visibility: visible; }

/* ============================================================================
   14. CONTACT
   ============================================================================ */
.contact-panel {
  position: relative;
  /* translucent like the panels; the form fields stay solid for readability */
  background: linear-gradient(180deg, rgba(11,22,33,.76), rgba(0,15,35,.86));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 3px solid var(--gold); border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--cream), inset 0 0 40px rgba(0,4,15,.8), 0 14px 40px rgba(0,0,0,.5);
  padding: clamp(1.6rem, 1.2rem + 2.4vw, 3rem) clamp(1.2rem, 1rem + 3vw, 4rem);
  text-align: center;
  overflow: hidden;
}
.contact-title { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem); color: var(--cream); text-shadow: 0 2px 0 var(--gold-deep); margin-bottom: .8rem; }
.contact-sub { color: var(--ink-soft); max-width: 46ch; margin: 0 auto 1.8rem; }

/* stone pillars flanking the hall: banner hangs ON the pillar, torch mounts ON
   the pillar (nothing floats, everything attaches - Rath round 4) */
.pillar { position: absolute; top: 0; bottom: 0; width: 96px; z-index: 1; }
.pillar--l { left: 8px; }
.pillar--r { right: 8px; }
.pillar-col {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(0,0,0,.5));
}
.pillar-banner {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 84px; height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
}
/* torches mount on the INSIDE face of each pillar, both facing inward */
.torch { position: absolute; top: 46%; width: 32px; z-index: 2; }
.torch img { width: 100%; height: auto; image-rendering: pixelated; }
.pillar--l .torch { left: calc(100% - 10px); }
.pillar--l .torch img { transform: scaleX(-1); }   /* flipped: faces the hall */
.pillar--r .torch { right: calc(100% - 10px); }    /* native left-facing: faces the hall */
.torch--r img { transform: scaleX(-1); }   /* mirrored pair: sconces face inward */
/* subtle warm halo aligned on the flame (top of the icon), not a floating blob */
.torch-flame {
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,170,60,.5), transparent 65%);
  mix-blend-mode: screen; pointer-events: none;
}
html.fx .torch-flame { animation: flamepulse 3s ease-in-out infinite; }
@keyframes flamepulse { 0%,100% { opacity: .5; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .torch-flame { animation: none; opacity: .6; } }
@media (max-width: 720px) { .pillar { display: none; } }

/* Netlify form - clean, conventional, high-contrast (theme NEVER wraps it) */
.quest-form { max-width: 520px; margin: 0 auto; text-align: left; position: relative; z-index: 3; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; color: var(--cream-lt); margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--f-body); font-size: 1rem;
  padding: .75rem .85rem;
  color: var(--ink);
  background: #05101f;
  border: 2px solid var(--blue-steel);
  border-radius: 4px;
}
.field input:focus, .field textarea:focus { border-color: var(--gold-bright); outline: none; box-shadow: 0 0 0 3px rgba(251,206,96,.3); }
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.form-submit { text-align: center; }
.form-submit .btn { justify-content: center; }

/* ============================================================================
   15. FOOTER
   ============================================================================ */
.site-footer {
  border-top: 3px solid var(--gold);
  background: linear-gradient(180deg, rgba(0,15,35,.96), var(--navy-950));
  padding: 2.2rem 0 2.6rem;
  margin-top: 1rem;
}
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.footer-inner img { width: 56px; height: 56px; image-rendering: pixelated; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; justify-content: center; list-style: none; padding: 0; margin: 0; }
.footer-nav a { color: var(--cream-lt); text-decoration: none; font-weight: 600; }
.footer-nav a:hover { color: var(--gold-bright); }
.footer-brands { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center; }
.footer-brands a { color: var(--gold-bright); text-decoration: none; }
.footer-brands a:hover { text-decoration: underline; }
.footer-meta { color: var(--ink-soft); font-size: .9rem; }

/* ============================================================================
   16. Scroll reveals (failure-safe: only active when html.js is present)
   ============================================================================ */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ============================================================================
   17. Cursor dot (desktop fine-pointer only) + magnetic buttons
   ============================================================================ */
/* the cursor is the sun by day and the moon by night (world.js sets html.is-night) */
.cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 999; pointer-events: none;
  width: 22px; height: 22px; margin: -11px 0 0 -11px;
  background: url("/assets/icons/icon_sun.webp") center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 8px rgba(251,206,96,.65));
  opacity: 0;
  transition: opacity .2s, transform .08s ease-out;
}
html.is-night .cursor-dot {
  background-image: url("/assets/icons/icon_moon.webp");
  filter: drop-shadow(0 0 8px rgba(200,220,255,.6));
}
@media (hover: hover) and (pointer: fine) {
  html.js .cursor-dot.on { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .cursor-dot { display: none; } }

/* ============================================================================
   18. Pixel toast (easter-egg messages)
   ============================================================================ */
.toast-host { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 900; display: grid; gap: .6rem; pointer-events: none; }
.toast {
  background: var(--navy-800);
  border: 2px solid var(--gold);
  border-radius: 4px;
  color: var(--cream-lt);
  /* Inter, not pixel type: toast numerals must read instantly (dice results) */
  font-family: var(--f-body); font-weight: 600; font-size: 1rem;
  padding: .7rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 0 0 1px rgba(202,186,115,.3);
  opacity: 0; transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: none; }

/* Konami: night-Bigfoot marches across the hero once */
.march {
  position: absolute; bottom: 15%; left: -12%;
  height: 28%; width: auto; z-index: 7;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
  transform: scaleX(-1);
}
html.js .march.go { animation: march 9s linear forwards; }
@keyframes march { from { left: -12%; } to { left: 108%; } }
@media (prefers-reduced-motion: reduce) { .march.go { animation: none; display: none; } }

/* idle life - motion-gated (only under html.fx).
   The knight does NOT bob (it read as floating - Rath QA 2026-07-04); he is
   grounded by the contact shadow. The slime keeps its squash. */
html.fx .res-slime  { animation: squash 3.4s ease-in-out infinite; }
@keyframes squash { 0%,100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(.92) scaleX(1.05); } }

/* ============================================================================
   19. d20 easter egg + LIVE WEATHER (rain / snow / wind, Richmond KY)
   ============================================================================ */
/* the 3D dice overlay: transparent, never blocks clicks; dice roll ACROSS the page */
#dice-box { position: fixed; inset: 0; z-index: 950; pointer-events: none; }
#dice-box canvas {
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

.qc-dice { background: transparent; border: 0; padding: 0; cursor: pointer; }
.qc-dice img { display: block; width: 46px; height: 46px; image-rendering: pixelated; }
html.fx .qc-dice.rolling img { animation: diceroll .95s cubic-bezier(.3,.8,.4,1); }
@keyframes diceroll {
  0%   { transform: rotate(0) translateY(0) scale(1); }
  20%  { transform: rotate(140deg) translateY(-10px) scale(1.15); }
  45%  { transform: rotate(300deg) translateY(2px) scale(.95); }
  70%  { transform: rotate(560deg) translateY(-5px) scale(1.08); }
  100% { transform: rotate(720deg) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .qc-dice.rolling img { animation: none; } }

/* weather particles live in the world fx-layer (chrome-class FX, like fireflies) */
.fx-rain {
  position: absolute; top: -6%;
  width: 3px; height: 20px;
  background: linear-gradient(180deg, rgba(190,215,255,.14), rgba(200,225,255,.82));
  border-radius: 1px;
}
html.fx .fx-rain { animation: rainfall linear infinite; }
@keyframes rainfall {
  from { transform: translateY(-4vh) translateX(0); }
  to   { transform: translateY(108vh) translateX(-4vw); }
}
.fx-snow {
  position: absolute; top: -4%;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(235,242,255,.85);
  box-shadow: 0 0 4px 1px rgba(235,242,255,.35);
}
html.fx .fx-snow { animation: snowfall linear infinite; }
@keyframes snowfall {
  0%   { transform: translateY(-4vh) translateX(0); }
  25%  { transform: translateY(24vh) translateX(2.2vw); }
  50%  { transform: translateY(52vh) translateX(-1.6vw); }
  75%  { transform: translateY(79vh) translateX(2vw); }
  100% { transform: translateY(108vh) translateX(-1vw); }
}
.fx-gust {
  position: absolute;
  width: 120px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(220,230,245,.4), transparent);
  opacity: 0;
}
html.fx .fx-gust { animation: gust 2.6s ease-in infinite; }
@keyframes gust {
  0%   { transform: translateX(-10vw); opacity: 0; }
  15%  { opacity: .7; }
  60%  { opacity: .35; }
  100% { transform: translateX(115vw); opacity: 0; }
}
/* windy weather leans the rain harder */
.weather--wind .fx-rain { animation-name: rainwind; }
@keyframes rainwind {
  from { transform: translateY(-4vh) translateX(0) rotate(18deg); }
  to   { transform: translateY(108vh) translateX(-14vw) rotate(18deg); }
}

/* thunderstorm: a sky flash + an occasional faint procedural bolt, over the rain.
   Animations are html.fx-gated so reduced-motion users get no strobe (photosensitivity). */
.fx-lightning {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(130% 75% at 50% -8%,
    rgba(222,234,255,.92), rgba(170,200,255,.45) 42%, transparent 72%);
}
/* a strike is a SPLIT SECOND: a quick sky flicker that fully fades back to nothing */
html.fx .fx-lightning.strike { animation: lightning-flash 480ms ease-out forwards; }
@keyframes lightning-flash {
  0% { opacity: 0; } 4% { opacity: .9; } 11% { opacity: .08; }
  18% { opacity: .6; } 30% { opacity: .04; } 100% { opacity: 0; }
}
.fx-bolt {
  position: absolute; top: -2%; width: 44px; height: 48%; opacity: 0;
  background: linear-gradient(180deg, rgba(240,247,255,1), rgba(188,214,255,.65));
  filter: drop-shadow(0 0 7px rgba(205,228,255,.95));
  clip-path: polygon(56% 0, 34% 30%, 60% 32%, 40% 60%, 62% 62%, 44% 100%,
                     50% 64%, 30% 62%, 50% 34%, 30% 32%);
}
/* the bolt itself: a ~200ms double-flicker, then gone (never lingers on screen) */
html.fx .fx-bolt.strike { animation: bolt-flash 210ms ease-out forwards; }
@keyframes bolt-flash {
  0% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: .2; }
  36% { opacity: .9; } 60% { opacity: .05; } 100% { opacity: 0; }
}

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }