/* ─────────────────────────────────────────────────────────────
   dst.css — “Maxwell’s Stage” skin (Don’t Starve Together)
   - Hand-inked parchment cards, mossy forest vignette
   - Subtle jitter on headings (DST wobble)
   - Quote blocks styled like stage placards
   - Non-sticky vine rail nav with moon toggle
   - Maxwell sprite widget + modal
   ───────────────────────────────────────────────────────────── */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Spectral:ital,wght@0,400;0,600;1,400&family=Special+Elite&display=swap");
@font-face{
  font-family:"Belisa Plumilla Manual";
  src: url("/fonts/belisa-plumilla-manual.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ================= TOKENS (scoped) ================= */
.dst{
  /* Scene image */
  --bg-url: url("/images/fandom/dst/dst.webp");
  --bg-pos: 50% 38%;

  /* Palette (forest + parchment + rail) */
  --ink:        #1b1412;   --ink-soft: #2a221e;
  --paper-0:    #efe2c8;   --paper-1:  #e0d2b7;   --paper-2:#cdbd9f;
  --moss-0:     #243424;   --moss-1:   #324632;   --moss-2:#435f43;
  --rose-0:     #b04a3a;   --rose-1:   #7a2b22;
  --dust:       rgba(255,248,218,.10);
  --shadow:     rgba(0,0,0,.45);

  /* Rail material */
  --rail-border: #2a221e;
  --rail-edge:   rgba(255,255,255,.06);
  --rail-dark-1: rgba(27,20,18,.85);
  --rail-dark-2: rgba(27,20,18,.68);
  --rail-haze:   rgba(255,231,199,.08);

  /* Type stacks */
  --head: "IM Fell English","Special Elite",serif;
  --body: "Spectral", Georgia, serif;
  --mono: "Special Elite", ui-monospace, monospace;

  /* Rhythm */
  --maxw: 1040px;
  --r: 12px;
  --pad: 1.1rem;
  --gap: .9rem;

  color: var(--ink);
}

/* ================= PAGE BACKDROP ================= */
body.dst{
  margin:0;
  min-height:100svh;
  font: 400 16px/1.6 var(--body);
  color:#efe8d9;
  position:relative;
  background:
    radial-gradient(1200px 780px at 50% 30%, rgba(0,0,0,.35), transparent 20%),
    radial-gradient(1200px 780px at 50% 86%, rgba(0,0,0,.35), transparent 20%),
    linear-gradient(180deg, rgba(18,16,14,.05), rgba(18,16,14,.25)),
    var(--bg-url) var(--bg-pos)/cover fixed no-repeat;
}

/* soft grain + drifting motes */
body.dst::before{
  content:"";
  position:fixed; inset:-6vmax; pointer-events:none; z-index:0;
  background:
    radial-gradient(60vmax 40vmax at 50% 38%, rgba(0,0,0,.30), transparent 58%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.85;
}
body.dst::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(2px 2px at 10% 12%, var(--dust), transparent 40%),
    radial-gradient(2px 2px at 26% 44%, var(--dust), transparent 40%),
    radial-gradient(2px 2px at 72% 18%, var(--dust), transparent 40%),
    radial-gradient(2px 2px at 86% 66%, var(--dust), transparent 40%),
    radial-gradient(2px 2px at 38% 78%, var(--dust), transparent 40%);
  animation: specks 18s linear infinite;
  opacity:.45;
}
@keyframes specks{ to{ transform: translateY(8px) } }

/* container */
.dst .page.wrap{
  width:min(var(--maxw), 92vw);
  margin: clamp(16px, 4vh, 40px) auto 10vh;
  position:relative; z-index:1;
}

/* ================= FIREFLIES ================= */
.fireflies-container{ position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:5; }
.firefly{
  position:absolute; top:100%;
  width:6px; height:6px; border-radius:50%;
  background:rgba(224,201,122,.8);
  box-shadow:0 0 6px rgba(224,201,122,.6), 0 0 12px rgba(224,201,122,.4);
  opacity:.85;
}
.firefly:nth-child(1){left:10%; animation:drift1 12s infinite ease-in-out 1s;}
.firefly:nth-child(2){left:25%; animation:drift2 11s infinite ease-in-out 2s;}
.firefly:nth-child(3){left:40%; animation:drift3 13s infinite ease-in-out 0s;}
.firefly:nth-child(4){left:60%; animation:drift4 14s infinite ease-in-out 1.5s;}
.firefly:nth-child(5){left:80%; animation:drift5 10s infinite ease-in-out 3s;}
.firefly:nth-child(6){left:30%; animation:drift6 12s infinite ease-in-out 4s;}
.firefly:nth-child(7){left:50%; animation:drift7 15s infinite ease-in-out 2.5s;}
.firefly:nth-child(8){left:70%; animation:drift8 11.5s infinite ease-in-out 1.2s;}
.firefly:nth-child(9){left:15%; animation:drift9 13s infinite ease-in-out 3.4s;}
.firefly:nth-child(10){left:90%; animation:drift10 10.5s infinite ease-in-out .6s;}
@keyframes drift1{ 0%{transform:translate(0,0) scale(1); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(30px,-250px) scale(.8); opacity:.7;} 75%{opacity:1;} 100%{transform:translate(-20px,-500px) scale(.6); opacity:.2;} }
@keyframes drift2{ 0%{transform:translate(0,0) scale(1.2); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(-40px,-300px) scale(1); opacity:.8;} 75%{opacity:1;} 100%{transform:translate(15px,-550px) scale(.7); opacity:.2;} }
@keyframes drift3{ 0%{transform:translate(0,0) scale(.9); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(50px,-200px) scale(1.1); opacity:.6;} 75%{opacity:1;} 100%{transform:translate(-30px,-450px) scale(.8); opacity:.2;} }
@keyframes drift4{ 0%{transform:translate(0,0) scale(1); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(-20px,-280px) scale(.7); opacity:.7;} 75%{opacity:1;} 100%{transform:translate(30px,-520px) scale(.5); opacity:.2;} }
@keyframes drift5{ 0%{transform:translate(0,0) scale(1.1); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(40px,-230px) scale(.9); opacity:.8;} 75%{opacity:1;} 100%{transform:translate(-50px,-480px) scale(.6); opacity:.2;} }
@keyframes drift6{ 0%{transform:translate(0,0) scale(.8); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(-30px,-260px) scale(1); opacity:.7;} 75%{opacity:1;} 100%{transform:translate(20px,-505px) scale(.5); opacity:.2;} }
@keyframes drift7{ 0%{transform:translate(0,0) scale(1.2); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(25px,-300px) scale(.9); opacity:.8;} 75%{opacity:1;} 100%{transform:translate(-35px,-550px) scale(.7); opacity:.2;} }
@keyframes drift8{ 0%{transform:translate(0,0) scale(1); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(-45px,-240px) scale(.7); opacity:.7;} 75%{opacity:1;} 100%{transform:translate(15px,-525px) scale(.6); opacity:.2;} }
@keyframes drift9{ 0%{transform:translate(0,0) scale(1.1); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(35px,-220px) scale(.8); opacity:.8;} 75%{opacity:1;} 100%{transform:translate(-25px,-500px) scale(.5); opacity:.2;} }
@keyframes drift10{0%{transform:translate(0,0) scale(.9); opacity:.2;} 25%{opacity:1;} 50%{transform:translate(-20px,-270px) scale(1); opacity:.7;} 75%{opacity:1;} 100%{transform:translate(40px,-530px) scale(.6); opacity:.2;} }

/* ================= TYPE ================= */
h1, h2, h3{
  font-family: "Belisa Plumilla Manual","IM Fell English","Special Elite",serif;
  letter-spacing:.02em;
}
.dst .hero h1,
.dst .content h2,
.dst .content h3{
  font-family: var(--head);
  color:#fff3df;
  text-shadow: 0 1px 0 #0008;
}
.dst .hero h1{
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  letter-spacing:.5px;
  animation: dst-wobble 4.2s ease-in-out infinite;
}
@keyframes dst-wobble{ 0%,100%{ transform: rotate(-.3deg) } 50%{ transform: rotate(.3deg) } }
.dst .lede{ color:#f2e8d2; font-style:italic; margin:.25rem 0 .5rem; }
.dst .tagline{ color:#e9dcc4; font-style:italic; }
.dst .small{ font-size:.92rem } .dst .text-dim{ color:#dbcdb2 }

/* ================= NAV (non-sticky vine rail) ================= */
.dst .dst-nav, .dst-nav{
  position: static;
  width: min(var(--maxw,1040px), 92vw);
  margin: 0 auto 14px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px;
  padding: .55rem .8rem;
  border: 2px solid var(--rail-border);
  border-radius: 999px;
  background:
    radial-gradient(160% 140% at 50% -60%, var(--rail-haze), transparent 60%),
    linear-gradient(180deg, var(--rail-dark-2), var(--rail-dark-1));
  box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 0 1px var(--rail-edge) inset;
  backdrop-filter: blur(2px);
  z-index: 1;

  /* reserve space for the moon toggle */
  --toggle-size: 38px;
  padding-right: calc(var(--toggle-size) + 18px);
}
.dst .dst-nav a, .dst-nav a{
  position: relative;
  display: inline-block;
  padding: .28rem .6rem;
  border-radius: 8px;
  color: #fff3df;
  letter-spacing: .02em;
  text-decoration: none;
  transition: transform .12s ease, color .15s ease, background .15s ease;
}
.dst .dst-nav a::after, .dst-nav a::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  background: linear-gradient(90deg, #ffe8c6, #e3c49b 70%, transparent);
  transform: scaleX(0); transform-origin: left center; opacity:.85;
  transition: transform .18s ease;
}
.dst .dst-nav a:hover, .dst .dst-nav a:focus-visible,
.dst-nav a:hover,   .dst-nav a:focus-visible{
  background: linear-gradient(180deg, rgba(239,226,200,.18), rgba(205,189,159,.12));
  color:#fff7e9; transform: translateY(-1px);
}
.dst .dst-nav a:hover::after, .dst .dst-nav a:focus-visible::after,
.dst-nav a:hover::after,   .dst-nav a:focus-visible::after{ transform: scaleX(1); }
.dst .dst-nav a[aria-current="page"], .dst .dst-nav a.active,
.dst-nav a[aria-current="page"],      .dst-nav a.active{
  background: linear-gradient(180deg, rgba(239,226,200,.26), rgba(205,189,159,.16));
  box-shadow: 0 2px 0 #0004 inset;
}
.dst .dst-nav a:focus-visible, .dst-nav a:focus-visible{
  outline:2px solid #e5caa1; outline-offset:2px;
}
@media (max-width:560px){
  .dst .dst-nav, .dst-nav{ padding:.45rem .6rem; gap:.5rem; }
  .dst .dst-nav a, .dst-nav a{ padding:.24rem .5rem; }
}

/* ================= Night toggle (coin) ================= */
.dst .dst-nav .night-switch, .dst-nav .night-switch{
  --size: var(--toggle-size, 38px);
  --ring: #2a221e; --haze: rgba(255,231,199,.08);

  appearance: none;
  width: var(--size); height: var(--size);
  border: 2px solid var(--ring); border-radius: 999px;
  cursor: pointer; position: absolute; inset-inline-end: 10px; top: 50%;
  transform: translateY(-50%); margin: 0; z-index: 1;
  display:grid; place-items:center; line-height:1;

  background:
    radial-gradient(160% 140% at 50% -60%, var(--haze), transparent 60%),
    linear-gradient(180deg, rgba(27,20,18,.72), rgba(27,20,18,.92));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 12px rgba(0,0,0,.45);
}
.dst .dst-nav .night-switch::after, .dst-nav .night-switch::after{
  content:"☀";
  font-size: calc(var(--size) * .55);
  color:#f1d9a3;
  text-shadow: 0 0 6px rgba(241,217,163,.35), 0 0 12px rgba(241,217,163,.22);
  transform: translateY(-1px);
  transition: transform .18s ease, opacity .18s ease;
}
.dst .dst-nav .night-switch:hover, .dst-nav .night-switch:hover{ transform: translateY(calc(-50% - 1px)); }
.dst .dst-nav .night-switch:active, .dst-nav .night-switch:active{ transform: translateY(-50%); }
.dst .dst-nav .night-switch:focus-visible, .dst-nav .night-switch:focus-visible{
  outline: 2px solid #e5caa1; outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 12px rgba(0,0,0,.45), 0 0 0 4px rgba(229,202,161,.25);
}
.dst .dst-nav .night-switch[aria-checked="true"], .dst-nav .night-switch[aria-checked="true"]{
  background:
    radial-gradient(160% 140% at 50% -60%, rgba(229,202,161,.06), transparent 60%),
    linear-gradient(180deg, rgba(18,14,12,.78), rgba(18,14,12,.96));
}
.dst .dst-nav .night-switch[aria-checked="true"]::after,
.dst-nav .night-switch[aria-checked="true"]::after{
  content:"☾";
  color:#f1d9a3;
  text-shadow: 0 0 6px rgba(229,202,161,.32), 0 0 14px rgba(229,202,161,.20);
  transform: translateY(-1px) rotate(-6deg);
}
@media (max-width: 700px){
  .dst .dst-nav, .dst-nav{ --toggle-size: 34px; padding-right: calc(var(--toggle-size) + 16px); }
}
@media (max-width: 480px){
  .dst .dst-nav, .dst-nav{ --toggle-size: 32px; padding-right: calc(var(--toggle-size) + 14px); }
}
@media (prefers-reduced-motion: reduce){
  .dst .dst-nav .night-switch, .dst .dst-nav .night-switch::after,
  .dst-nav .night-switch,       .dst-nav .night-switch::after{ transition: none; }
}

/* ================= CARDS (dark rail palette) ================= */
/* Only background is translucent; text stays crisp */
.dst .card, .dst-page .card{
  --mossA: .86;
  border: 2px solid var(--rail-border);
  border-radius: .9rem;
  background:
    radial-gradient(160% 140% at 10% -60%, var(--rail-haze), transparent 55%),
    linear-gradient(180deg, var(--rail-dark-2), var(--rail-dark-1));
  box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 1px var(--rail-edge) inset;
  backdrop-filter: blur(1.5px);
  color: #f5efe3;
  position:relative;
  padding: calc(var(--pad) + .25rem);
  isolation:isolate; overflow: clip;
}
/* faint viney texture */
.dst .card::before, .dst-page .card::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 18px, transparent 18px 36px);
  mix-blend-mode: soft-light; opacity:.35;
}
/* faint paper grain overlay */
.dst .card::after, .dst-page .card::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.18; mix-blend-mode:multiply;
  background:
    repeating-linear-gradient(180deg, #0000 0 14px, #0001 14px 15px),
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .12 0'/></feComponentTransfer></filter>\
  <rect width='100' height='100' filter='url(%23n)'/>\
</svg>") center/320px 320px repeat;
}
.dst .card + .card{ margin-top: 1rem; }

/* Decorative braces (kept) */
.dst .hud-corners{ position:relative; }
.dst .hud-corners .brace{
  position:absolute; width:28px; height:28px; pointer-events:none; opacity:.6;
  background:
    conic-gradient(from 90deg, #0000 0 70deg, #4b3b2f 70deg 90deg) top left/28px 28px no-repeat,
    conic-gradient(from 0deg,  #0000 0 70deg, #4b3b2f 70deg 90deg) top right/28px 28px no-repeat,
    conic-gradient(from 180deg,#0000 0 70deg, #4b3b2f 70deg 90deg) bottom left/28px 28px no-repeat,
    conic-gradient(from -90deg,#0000 0 70deg, #4b3b2f 70deg 90deg) bottom right/28px 28px no-repeat;
}

/* simple nav variant used elsewhere */
.dst .hud-nav{
  display:flex; gap:.9rem; justify-content:center;
  padding:.6rem .9rem .75rem;
  font-family: var(--head);
  color:#f6ead4; text-shadow: 0 1px 0 #0008;
}
.dst .hud-nav a{
  color:#fff1e0; text-decoration:none; border-bottom:1px dashed transparent; padding:.1rem .2rem;
}
.dst .hud-nav a:hover{ color:#ffe8ca; border-color:#5b4a3b; }

/* ================= LISTS ================= */
.dst ul{ padding-left:1.1rem; }
.dst ul.dash{ list-style:none; padding-left:0; }
.dst ul.dash li{ position:relative; padding-left:1.2rem; margin:.35rem 0; }
.dst ul.dash li::before{ content:"—"; position:absolute; left:0; color:#7a5c47; }

/* ================= QUOTES (parchment) ================= */
.dst blockquote, .dst .dst-quote,
.dst blockquote.quote, .dst blockquote.pull-quote{
  margin:.9rem 0; padding:.9rem 1rem;
  border: 2px solid #3a2e23; border-radius:.8rem;
  background: linear-gradient(180deg, rgba(239,226,200,.94), rgba(224,210,183,.94) 60%, rgba(205,189,159,.94));
  color:#2b241e;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  position: relative; font-style: italic;
}
.dst blockquote::before, .dst .dst-quote::before,
.dst blockquote.quote::before, .dst blockquote.pull-quote::before{
  content:"“";
  position:absolute; left:.5rem; top:.1rem;
  font: 700 2.2rem/1 var(--head); color:#b08a5a; opacity:.65;
}
.dst blockquote footer, .dst .dst-quote footer,
.dst blockquote cite{ margin-top:.45rem; font-style: normal; color:#5a4a39; text-align:right; }
.dst .card blockquote{ margin-left:.2rem; margin-right:.2rem; }

/* ================= GRID HELPERS ================= */
.dst .grid.auto{ display:grid; gap:.9rem; }
@media (min-width: 740px){ .dst .grid.auto{ grid-template-columns: repeat(2,minmax(0,1fr)) } }
@media (min-width: 980px){ .dst .grid.auto{ grid-template-columns: repeat(3,minmax(0,1fr)) } }

/* ================= QUOTE CARDS (image + quote) ================= */
.dst .quote-card{
  --thumbW: 72px; --thumbR: 10px;
  list-style:none; display:grid;
  grid-template-columns: var(--thumbW) minmax(0,1fr);
  grid-template-areas: "thumb quote" "meta  meta";
  gap:.6rem .75rem; align-items:start;
  padding:.65rem .75rem .75rem;
  border: 2px solid var(--rail-border); border-radius:.8rem;
  background:
    radial-gradient(160% 140% at 10% -60%, var(--rail-haze), transparent 55%),
    linear-gradient(180deg, var(--rail-dark-2), var(--rail-dark-1));
  box-shadow: 0 8px 18px rgba(0,0,0,.45), 0 0 0 1px var(--rail-edge) inset;
  color:#f5efe3;
}
.dst .quote-card.no-art{ grid-template-areas: ". quote" "meta meta"; padding-left:.9rem; padding-right:.9rem; }
.dst .quote-card .obj{
  grid-area: thumb;
  width: var(--thumbW); height: var(--thumbW); object-fit: contain;
  border-radius: var(--thumbR);
  background:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 3px 10px rgba(0,0,0,.35);
}
.dst .quote-card blockquote{ grid-area: quote; margin:0 }
.dst .quote-card footer{ grid-area: meta; margin-top:.35rem; white-space: normal; }
.dst .quote-card footer em{ color:#e3c49b; font-style: normal }
@media (max-width: 580px){
  .dst .quote-card{ --thumbW: 60px; gap:.5rem .6rem; }
  .dst .quote-card .obj{ border-radius: 8px; }
}
@media (max-width: 420px){
  .dst .quote-card{
    grid-template-columns: 1fr;
    grid-template-areas: "thumb" "quote" "meta";
    gap:.45rem;
  }
  .dst .quote-card.no-art{ grid-template-areas: "quote" "meta"; }
  .dst .quote-card .obj{ width:70px; height:70px; }
}

/* ================= CURTAIN DIVIDER ================= */
.dst .curtain{
  height:10px; margin:.6rem 0;
  background: linear-gradient(180deg, #7a2b22, #b04a3a 60%, #5c211b);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 88% 70%, 82% 100%, 76% 70%, 70% 100%, 64% 70%, 58% 100%, 52% 70%, 46% 100%, 40% 70%, 34% 100%, 28% 70%, 22% 100%, 16% 70%, 10% 100%, 4% 70%, 0 100%);
  box-shadow: 0 8px 14px rgba(0,0,0,.35);
}

/* ================= LINKS / UTILITIES ================= */
.dst a{ color:#ffe0b6; } .dst a:hover{ color:#ffeacf; }
.dst .mt-1{ margin-top:.6rem } .dst .mt-2{ margin-top:1rem }

/* High contrast preference */
@media (prefers-contrast: more){
  .dst blockquote{ border-color:#1b1412 }
}

/* ================= MAXWELL WIDGET ================= */
:root{ --maxwell-sprite: url("/images/fandom/dst/maxwell_original.webp"); }

.maxwell-button{
  position: fixed; left: 10px; bottom: 0;
  width: 86px; height: 110px;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0; cursor: pointer; z-index: 60; border-radius: 0; overflow: visible; transform: translateZ(0);
}
.maxwell-button::after{
  content:""; position:absolute; inset:0;
  background-image: var(--maxwell-sprite);
  background-repeat:no-repeat; background-size:300% auto; background-position: 0% 52%;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.35));
  transform-origin: 50% 92%;
  animation: maxwell-breathe var(--breath-dur, 3.8s) ease-in-out infinite;
  will-change: transform;
}
.maxwell-button:hover{ transform: translateY(-1px); }
.maxwell-button:active{ transform: translateY(0); }
.maxwell-button:focus-visible::before{
  content:""; position:absolute; left:50%; bottom:-4px; width:78px; height:18px; transform: translateX(-50%);
  border-radius: 999px; box-shadow: 0 0 0 2px #e5caa1, 0 0 14px rgba(229,202,161,.35); pointer-events:none;
}
@keyframes maxwell-breathe{
  0%,100%{ transform: translateY(0) scale(1); }
  40%{ transform: translateY(-1px) scaleX(1.008) scaleY(1.012); }
  50%{ transform: translateY(-1.2px) scaleX(1.012) scaleY(1.018); }
  60%{ transform: translateY(-1px) scaleX(1.008) scaleY(1.012); }
}
@media (prefers-reduced-motion: reduce){ .maxwell-button::after{ animation: none; } }

/* Maxwell sizing/position via gutter */
#maxwell-widget{
  --gutter: calc((100vw - var(--maxw, 1040px)) / 2);
  --mx-w: clamp(86px, 12vw, calc(var(--gutter) - 18px));
  --mx-h: calc(var(--mx-w) * 1.28);
}
#maxwell-widget .maxwell-button{
  position: fixed; left: 7px; bottom: -14px;
  width: var(--mx-w); height: var(--mx-h); z-index: 60;
}
#maxwell-widget .maxwell-button::after{
  inset: 0; transform-origin: 50% 92%;
  animation: maxwell-breathe var(--breath-dur, 3.8s) ease-in-out infinite;
}
@media (max-width: 720px){
  #maxwell-widget{ --mx-w: 86px; --mx-h: calc(var(--mx-w) * 1.28); }
}

/* Maxwell modal */
.maxwell-modal[hidden]{ display:none; }
.maxwell-modal{ position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.maxwell-modal .maxwell-backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.maxwell-modal .modal-card{
  position: relative; z-index: 80;
  width: min(760px, 92vw); max-height: min(86vh, 760px); overflow: auto;
  padding: 1rem 1rem 1.1rem; border-radius: .9rem;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin; scrollbar-color: #bba689 var(--rail-dark-1);
}
.maxwell-modal .modal-card::-webkit-scrollbar{ width: 12px; height: 12px; }
.maxwell-modal .modal-card::-webkit-scrollbar-track{
  background: linear-gradient(180deg, var(--rail-dark-2), var(--rail-dark-1));
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(0,0,0,.55);
  box-shadow: inset 0 0 6px rgba(0,0,0,.35); border-radius: 12px;
}
.maxwell-modal .modal-card::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #c7b397, #9f876f 60%, #7a5c47);
  border: 2px solid #2a221e; border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 0 #0004;
}
.maxwell-modal .modal-card::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #d3c0a6, #b2977c 60%, #8a6b53);
}
.maxwell-modal .modal-card::before,
.maxwell-modal .modal-card::after{
  content:""; position: sticky; display:block; pointer-events:none; z-index: 1;
  margin: -1px -16px; height: 16px; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent);
}
.maxwell-modal .modal-card::before{ top: 0; }
.maxwell-modal .modal-card::after{ top: calc(100% - 16px); transform: scaleY(-1); }
@media (prefers-reduced-motion: reduce){
  .maxwell-modal .modal-card::before, .maxwell-modal .modal-card::after{ display:none; }
}

/* Modal header */
.modal-head{ display:flex; align-items:center; justify-content: space-between; gap:.75rem; margin-bottom:.6rem; }
.modal-head h3{
  margin:0; font-family: var(--head); color:#fff3df; letter-spacing:.02em; text-shadow: 0 1px 0 #0008;
}
.modal-close{
  background:none; border: 2px solid #2a221e; color:#fff2dd;
  border-radius:8px; width:34px; height:32px; line-height:28px; font-size:20px;
  display:grid; place-items:center; cursor:pointer;
  background-image: linear-gradient(180deg, rgba(27,20,18,.7), rgba(27,20,18,.9));
}
.modal-close:hover, .modal-close:focus-visible{ transform: translateY(-1px); }

/* Skins list */
.maxwell-modal .skins{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.7rem; }
.maxwell-modal .skins .quote-card{
  display:grid; grid-template-columns: 92px 1fr;
  grid-template-areas: "thumb quote" "thumb foot";
  align-items:start; gap:.55rem .8rem; padding:.65rem .75rem; border-radius:.8rem;
  border: 2px solid #5b4a3a;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.maxwell-modal .skins .quote-card:hover,
.maxwell-modal .skins .quote-card:focus-visible{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(239,226,200,.16), rgba(205,189,159,.10));
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  outline: 2px solid #e5caa1; outline-offset: 2px;
}
.maxwell-modal .skins .quote-card[aria-current="true"]{
  box-shadow: 0 0 0 2px rgba(229,202,161,.8) inset, 0 6px 16px rgba(0,0,0,.32);
}
.maxwell-modal .skins .quote-card blockquote{ grid-area: quote; margin:0; }
.maxwell-modal .skins .quote-card footer{ grid-area: foot; margin:.45rem 0 0; text-align:left; }
.skin-thumb{
  grid-area: thumb; width:92px; height:110px; border-radius:.55rem;
  background: linear-gradient(180deg, rgba(27,20,18,.72), rgba(27,20,18,.92));
  border: 2px solid #2a221e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 8px 16px rgba(0,0,0,.35);
  position: relative; overflow:hidden;
}
.skin-thumb::after{
  content:""; position:absolute; inset:6px;
  background-image: var(--sprite, var(--maxwell-sprite));
  background-repeat:no-repeat; background-size:300% auto; background-position: 0% 52%;
}
@media (max-width: 560px){
  .maxwell-modal .modal-card{ width: min(96vw, 560px); }
  .maxwell-modal .skins .quote-card{ grid-template-columns: 78px 1fr; gap:.45rem .6rem; }
  .skin-thumb{ width:78px; height:96px; }
}

/* ================= MISC (rail panels) ================= */
.dst .hud-rail{ display:grid; gap:.6rem; }
.dst .hud-panel{
  background: linear-gradient(180deg, #f4ead5, #e5d3b4);
  border:2px solid #2a221e; border-radius:10px;
  padding:.55rem .65rem;
  box-shadow: 0 3px 0 #0004, 0 10px 18px rgba(0,0,0,.3);
  color:#2a221e;
}
.dst .hud-panel .label{
  font: 700 .92rem/1 var(--head);
  letter-spacing:.02em; color:#5b4a3b; margin-bottom:.2rem;
}
.dst .hud-panel .value{ font-size:.98rem }

/* ================= RESPONSIVE TWEAKS ================= */
@media (max-width: 720px){
  .dst .card{ padding: var(--pad); }
  .dst .hero h1{ font-size: clamp(30px, 10vw, 52px); }
  .dst blockquote{ padding-left: 2.6rem }
}

/* Make quote-cards fill when there's no thumbnail */
.dst .quote-card:not(:has(.obj)),
.dst .quote-card.no-art{
  grid-template-columns: 1fr;
  grid-template-areas:
    "quote"
    "meta";
  /* undo the earlier gutter padding meant for the missing thumb */
  padding-left: .75rem;
  padding-right: .75rem;
}