:root {
  --bg: #0b0a10;
  --bg2: #15121f;
  --card: #1b1726ee;
  --card-solid: #1b1726;
  --line: #3a3150;
  --text: #ece6f5;
  --muted: #a59bb8;
  --gold: #e8c26a;
  --gold-2: #b8923d;
  --accent: #8f6bff;
  --danger: #ff5c6c;
  --ok: #4fd18b;
  --radius: 16px;
  --class: var(--gold);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 600px at 15% -10%, #3a1f5a55, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #5a2a1f44, transparent 60%),
    radial-gradient(800px 800px at 50% 120%, #1f3a5a44, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.55 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  overflow-x: hidden;
}
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff8, transparent),
    radial-gradient(1px 1px at 30% 70%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 70% 30%, #fff9, transparent),
    radial-gradient(1px 1px at 85% 80%, #fff5, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff4, transparent),
    radial-gradient(1.5px 1.5px at 20% 90%, #fff7, transparent),
    radial-gradient(1px 1px at 90% 10%, #fff6, transparent);
  animation: twinkleBg 6s ease-in-out infinite alternate;
}
@keyframes twinkleBg { from { opacity: .5 } to { opacity: 1 } }

h1, h2, h3, .brand { font-family: 'Cinzel', Georgia, serif; letter-spacing: .02em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: .2em 0 .3em; line-height: 1.15; }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.8rem); margin: .1em 0 .5em; line-height: 1.2; }
h3 { font-size: 1.1rem; margin: .2em 0; }
p { margin: .5em 0 1em; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.gold { color: var(--gold); }

.wrap { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 24px 16px 80px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.brand { color: var(--gold); font-weight: 700; font-size: 1.05rem; text-shadow: 0 0 18px #e8c26a55; }
.progress { flex: 1; max-width: 340px; height: 8px; background: #ffffff12; border-radius: 99px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width .5s ease; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: 0 30px 80px #0008, inset 0 1px 0 #ffffff10;
  backdrop-filter: blur(6px);
  animation: cardIn .45s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.98) } to { opacity: 1; transform: none } }
.qnum { color: var(--gold); font-family: 'Cinzel', serif; font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; }

/* ------------------------------------------------ forms */
input[type=text], input[type=password], textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: #0e0c15; color: var(--text);
  font: inherit; outline: none; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px #e8c26a33; }
textarea { min-height: 140px; resize: vertical; }

.btn {
  appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 600;
  padding: 12px 22px; border-radius: 12px; color: #1a1408;
  background: linear-gradient(180deg, #f3d488, var(--gold-2));
  box-shadow: 0 6px 20px #e8c26a33, inset 0 1px 0 #fff6;
  transition: transform .12s, filter .2s, opacity .2s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.ghost:hover { border-color: var(--gold); }
.btn.danger { background: linear-gradient(180deg, #ff8a95, #c43545); color: #fff; }
.nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; gap: 12px; flex-wrap: wrap; }
.nav .spacer { flex: 1; }
.err { color: var(--danger); min-height: 1.4em; margin-top: 8px; font-weight: 500; }
.note { padding: 12px 14px; border-radius: 12px; background: #8f6bff1a; border: 1px solid #8f6bff44; margin: 12px 0; }

/* ------------------------------------------------ login */
.login { max-width: 440px; margin: 8vh auto 0; text-align: center; }
.crest { font-size: 64px; filter: drop-shadow(0 0 24px #e8c26a66); animation: bob 3s ease-in-out infinite; display: inline-block; }
.login form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.login input { text-align: center; font-size: 1.1rem; letter-spacing: .08em; }
.shake-x { animation: shakeX .5s; }
@keyframes shakeX { 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }

/* ------------------------------------------------ autocomplete */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--card-solid);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; z-index: 20; box-shadow: 0 20px 50px #000a; }
.ac-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; }
.ac-item:hover, .ac-item.active { background: #ffffff10; }
.ac-item .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 8px currentColor; }
.ac-item .realm { margin-left: auto; color: var(--muted); font-size: .85rem; }

/* ------------------------------------------------ scenes (emoji art) */
.scene { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--class) 22%, transparent), transparent 70%); }
.scene .lyr { position: absolute; transform: translate(-50%, -50%); line-height: 1; user-select: none;
  animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

@keyframes bob { 0%, 100% { transform: translate(-50%, -50%) } 50% { transform: translate(-50%, -62%) } }
.bob { animation-name: bob; }
@keyframes sway { 0%, 100% { transform: translate(-50%, -50%) rotate(-6deg) } 50% { transform: translate(-50%, -50%) rotate(6deg) } }
.sway { animation-name: sway; }
@keyframes pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1) } 50% { transform: translate(-50%, -50%) scale(1.15) } }
.pulse { animation-name: pulse; }
@keyframes spinA { to { transform: translate(-50%, -50%) rotate(360deg) } }
.spin { animation-name: spinA; animation-timing-function: linear; }
@keyframes spinBack { to { transform: translate(-50%, -50%) rotate(-360deg) } }
.spinback { animation-name: spinBack; animation-duration: 1.4s !important; animation-timing-function: linear; }
@keyframes shake { 0%, 100% { transform: translate(-50%, -50%) } 25% { transform: translate(-56%, -48%) rotate(-4deg) } 75% { transform: translate(-44%, -52%) rotate(4deg) } }
.shake { animation-name: shake; animation-duration: .4s !important; }
@keyframes drift { 0%, 100% { transform: translate(-60%, -50%) } 50% { transform: translate(-40%, -50%) } }
.drift { animation-name: drift; animation-duration: 4s !important; }
@keyframes floatup { 0% { transform: translate(-50%, 0); opacity: 0 } 30% { opacity: 1 } 100% { transform: translate(-50%, -140%); opacity: 0 } }
.floatup { animation-name: floatup; animation-duration: 2.2s !important; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: translate(-50%, -50%) scale(.7) } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) } }
.twinkle { animation-name: twinkle; }
@keyframes pop { 0%, 100% { transform: translate(-50%, -50%) scale(.9) } 40% { transform: translate(-50%, -70%) scale(1.15) } }
.pop { animation-name: pop; animation-duration: 1.4s !important; }
@keyframes flicker { 0%, 100% { opacity: 1 } 45% { opacity: .7 } 50% { opacity: .3 } 55% { opacity: .9 } }
.flicker { animation-name: flicker; animation-duration: 1.2s !important; }
@keyframes brood { 0%, 100% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-50%, -48%) rotate(-8deg) } }
.brood { animation-name: brood; animation-duration: 3s !important; }
@keyframes hug { 0%, 100% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-30%, -50%) rotate(12deg) } }
.hug { animation-name: hug; }
@keyframes backflip { 0%, 60% { transform: translate(-50%, -50%) rotate(0) } 80% { transform: translate(-50%, -90%) rotate(-360deg) } 100% { transform: translate(-50%, -50%) rotate(-360deg) } }
.backflip { animation-name: backflip; animation-duration: 2.6s !important; }
@keyframes flap { 0%, 100% { transform: translate(-50%, -50%) scaleX(1) } 50% { transform: translate(-50%, -70%) scaleX(.6) } }
.flap { animation-name: flap; animation-duration: .6s !important; }
@keyframes falloff { 0% { transform: translate(-140%, -10%) rotate(0); opacity: 1 } 30% { transform: translate(-50%, -50%) rotate(20deg) } 100% { transform: translate(60%, 200%) rotate(260deg); opacity: 0 } }
.falloff { animation-name: falloff; animation-duration: 2.4s !important; animation-timing-function: ease-in !important; }
@keyframes suck { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1 } 100% { transform: translate(-50%, -50%) translate(var(--sx, -180%), 10%) scale(.2); opacity: 0 } }
.suck { animation-name: suck; animation-duration: 1.6s !important; --sx: -300%; }
@keyframes chomp { 0%, 100% { transform: translate(-50%, -50%) scale(1) } 50% { transform: translate(-50%, -50%) scale(1.2, .85) } }
.chomp { animation-name: chomp; animation-duration: .5s !important; }
@keyframes shrink { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1 } 100% { transform: translate(-200%, -30%) scale(.1); opacity: 0 } }
.shrink { animation-name: shrink; }
@keyframes lick { 0%, 100% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-50%, -50%) rotate(-25deg) } }
.lick { animation-name: lick; animation-duration: .7s !important; }
@keyframes licktongue { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) } 50% { opacity: 1; transform: translate(-80%, -60%) } }
.licktongue { animation-name: licktongue; animation-duration: .7s !important; }
@keyframes bench { 0%, 100% { transform: translate(-50%, -50%) } 50% { transform: translate(-50%, 10%) } }
.bench { animation-name: bench; animation-duration: 1.1s !important; }
@keyframes drip { 0% { transform: translate(-50%, -50%); opacity: 0 } 20% { opacity: 1 } 100% { transform: translate(-50%, 120%); opacity: 0 } }
.drip { animation-name: drip; animation-duration: 1.3s !important; }
@keyframes castR { 0% { transform: translate(-150%, -50%) scale(.4); opacity: 0 } 20% { opacity: 1 } 100% { transform: translate(120%, -50%) scale(1); opacity: 0 } }
.castR { animation-name: castR; animation-duration: 1.5s !important; animation-timing-function: linear !important; }
@keyframes charge { 0%, 100% { transform: translate(-50%, -50%) } 50% { transform: translate(-20%, -50%) } }
.charge { animation-name: charge; animation-duration: 1s !important; }
@keyframes blast { 0% { transform: translate(-90%, -50%) scale(.3); opacity: 0 } 50% { opacity: 1 } 100% { transform: translate(10%, -50%) scale(1.3); opacity: 0 } }
.blast { animation-name: blast; animation-duration: 1.2s !important; }
@keyframes pump { 0%, 100% { transform: translate(-50%, -50%) scale(1) } 50% { transform: translate(-50%, -50%) scale(1.35) } }
.pump { animation-name: pump; animation-duration: .8s !important; }
@keyframes aim { 0%, 70%, 100% { transform: translate(-50%, -50%) } 80% { transform: translate(-60%, -50%) } }
.aim { animation-name: aim; animation-duration: 3s !important; }
@keyframes stab { 0%, 100% { transform: translate(-50%, -50%) rotate(45deg) } 50% { transform: translate(-10%, -50%) rotate(45deg) } }
.stab { animation-name: stab; animation-duration: .6s !important; }
@keyframes kick { 0%, 100% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-50%, -60%) rotate(-20deg) } }
.kick { animation-name: kick; animation-duration: .9s !important; }
@keyframes wobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) } 50% { transform: translate(-40%, -50%) rotate(14deg) } }
.wobble { animation-name: wobble; animation-duration: 1.6s !important; }
@keyframes sip { 0%, 100% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-80%, -60%) rotate(-30deg) } }
.sip { animation-name: sip; animation-duration: 1.8s !important; }
@keyframes punch { 0%, 100% { transform: translate(-50%, -50%) } 50% { transform: translate(-100%, -50%) scale(1.2) } }
.punch { animation-name: punch; animation-duration: .5s !important; }
@keyframes boomerang { 0%, 100% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(60%, -50%) rotate(540deg) } }
.boomerang { animation-name: boomerang; animation-duration: 1.4s !important; }
@keyframes smash { 0%, 100% { transform: translate(-50%, -50%) rotate(-40deg) } 40% { transform: translate(-50%, -40%) rotate(50deg) } }
.smash { animation-name: smash; animation-duration: .9s !important; }
@keyframes peek { 0%, 60%, 100% { opacity: 0 } 70%, 90% { opacity: 1 } }
.peek { animation-name: peek; animation-duration: 3s !important; }
@keyframes zap { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 10% { opacity: .2 } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) } }
.zap { animation-name: zap; animation-duration: .9s !important; }
@keyframes sneak { 0%, 100% { transform: translate(-50%, -50%) } 50% { transform: translate(10%, -46%) } }
.sneak { animation-name: sneak; animation-duration: 2.4s !important; }
@keyframes bubble { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg) } 50% { transform: translate(-50%, -54%) rotate(8deg) } }
.bubble { animation-name: bubble; animation-duration: .8s !important; }
@keyframes roll { to { transform: translate(-50%, -50%) rotate(360deg) } }
.roll { animation-name: roll; animation-duration: .7s !important; animation-timing-function: linear !important; }
@keyframes dance { 0%, 100% { transform: translate(-50%, -50%) scaleX(1) } 50% { transform: translate(-50%, -56%) scaleX(-1) } }
.dance { animation-name: dance; animation-duration: .7s !important; }
@keyframes slashL { 0%, 100% { transform: translate(-50%, -50%) rotate(-30deg) } 50% { transform: translate(-50%, -50%) rotate(40deg) } }
.slashL { animation-name: slashL; animation-duration: .7s !important; }
@keyframes slashR { 0%, 100% { transform: translate(-50%, -50%) rotate(30deg) scaleX(-1) } 50% { transform: translate(-50%, -50%) rotate(-40deg) scaleX(-1) } }
.slashR { animation-name: slashR; animation-duration: .7s !important; }
@keyframes wiggle { 0%, 100% { transform: translate(-50%, -50%) scaleX(1) } 50% { transform: translate(-40%, -50%) scaleX(1.25) } }
.wiggle { animation-name: wiggle; animation-duration: .8s !important; }

/* ------------------------------------------------ hero card (same character) */
.hero {
  --class: var(--gold);
  position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center;
  padding: 22px; border-radius: 18px; overflow: hidden; margin: 10px 0 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--class) 22%, #15121f), #15121f 60%);
  border: 1px solid color-mix(in srgb, var(--class) 60%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--class) 30%, transparent);
  animation: heroIn .9s cubic-bezier(.2, .9, .3, 1.3);
}
@keyframes heroIn { 0% { transform: perspective(800px) rotateY(80deg) scale(.8); opacity: 0 } 100% { transform: none; opacity: 1 } }
.hero::before { content: ''; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--class) 35%, transparent), transparent 30%);
  animation: rotate 6s linear infinite; z-index: 0; }
.hero > * { position: relative; z-index: 1; }
@keyframes rotate { to { transform: rotate(360deg) } }
.hero .scene { background: radial-gradient(circle, color-mix(in srgb, var(--class) 30%, transparent), #0b0a10cc 70%); }
.hero .cname { font-family: 'Cinzel', serif; font-size: 1.8rem; color: var(--class); text-shadow: 0 0 20px color-mix(in srgb, var(--class) 60%, transparent); }
.hero .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-size: .9rem;
  background: #ffffff10; border: 1px solid #ffffff22; }
.chip button { all: unset; cursor: pointer; opacity: .7; padding-left: 4px; }
.chip button:hover { opacity: 1; }
@media (max-width: 600px) { .hero { grid-template-columns: 1fr; } }

/* ------------------------------------------------ choice buttons */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.choice { position: relative; text-align: left; cursor: pointer; padding: 16px; border-radius: 14px; border: 1px solid var(--line);
  background: #ffffff06; color: var(--text); font: inherit; transition: transform .15s, border-color .2s, background .2s; }
.choice:hover { transform: translateY(-2px); border-color: #e8c26a88; }
.choice.on { border-color: var(--gold); background: #e8c26a14; box-shadow: 0 0 0 2px #e8c26a44 inset; }
.choice .big { font-size: 1.8rem; display: block; margin-bottom: 4px; }
.choice b { display: block; }
.check { display: flex; align-items: center; gap: 12px; }
.check .box { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line); flex: none; display: grid; place-items: center; transition: all .2s; }
.choice.on .box { background: var(--gold); border-color: var(--gold); }
.choice.on .box::after { content: '✓'; color: #1a1408; font-weight: 800; }

/* ------------------------------------------------ class picker */
.picked { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; margin: 6px 0 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { --class: var(--gold); cursor: pointer; border-radius: 14px; border: 1px solid var(--line); background: #ffffff05;
  padding: 10px; text-align: center; transition: transform .15s, border-color .2s, box-shadow .2s; color: var(--text); font: inherit; position: relative; }
.tile:hover { transform: translateY(-3px); border-color: var(--class); box-shadow: 0 10px 30px color-mix(in srgb, var(--class) 25%, transparent); }
.tile .scene { font-size: 14px; }
.tile .t-name { font-family: 'Cinzel', serif; font-weight: 700; color: var(--class); margin-top: 6px; }
.tile .t-tag { font-size: .8rem; color: var(--muted); line-height: 1.3; min-height: 2.6em; }
.tile.on { border-color: var(--class); box-shadow: 0 0 0 2px var(--class) inset, 0 0 30px color-mix(in srgb, var(--class) 30%, transparent); }
.tile.on::after { content: '✓'; position: absolute; top: 8px; right: 10px; background: var(--class); color: #000; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.tile .count { position: absolute; top: 8px; right: 10px; background: var(--class); color: #000; min-width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-weight: 800; font-size: .85rem; padding: 0 6px; }
.tile .role { font-size: .78rem; color: var(--muted); }
.drill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

/* ------------------------------------------------ resistance slider */
.slider { position: relative; height: 90px; margin: 40px 10px 10px; user-select: none; touch-action: none; }
.slider .track { position: absolute; left: 0; right: 0; top: 40px; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #4fd18b, #e8c26a 50%, #ff5c6c); box-shadow: inset 0 2px 6px #0008; }
.slider .thumb { position: absolute; top: 46px; width: 64px; height: 64px; margin-left: -32px; margin-top: -32px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), linear-gradient(180deg, #f3d488, var(--gold-2));
  display: grid; place-items: center; font-size: 34px; cursor: grab; box-shadow: 0 8px 24px #000a, 0 0 0 4px #0b0a10;
  transition: left .45s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
.slider .thumb.dragging { transition: none; cursor: grabbing; }
.slider .thumb.strain { animation: strain .12s infinite; }
@keyframes strain { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(-2px, 1px) } 75% { transform: translate(2px, -1px) } }
.slider .stops { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; }
.slider .stop { cursor: pointer; font-weight: 700; font-family: 'Cinzel', serif; padding: 2px 8px; border-radius: 8px; transform: translateX(-50%); position: absolute; white-space: nowrap; }
.slider .stop.on { color: var(--gold); text-shadow: 0 0 12px #e8c26a88; }
.slider .chains { position: absolute; top: 34px; height: 24px; left: 50%; right: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: repeating-linear-gradient(90deg, transparent 0 10px, #ffffff55 10px 14px); }
.struggle-msg { min-height: 2.4em; text-align: center; font-weight: 600; color: var(--gold); transition: all .3s; }
.struggle-msg.pop { animation: msgPop .4s; }
@keyframes msgPop { 0% { transform: scale(.6); opacity: 0 } 70% { transform: scale(1.08) } 100% { transform: scale(1); opacity: 1 } }

/* simple 3-stop slider (raider level) */
.lvl-slider { margin: 26px 6px 6px; }
.lvl-slider input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 99px;
  background: linear-gradient(90deg, #4fd18b, #8f6bff, #ff5c6c); outline: none; }
.lvl-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(180deg, #f3d488, var(--gold-2)); border: 4px solid #0b0a10; cursor: pointer; box-shadow: 0 4px 14px #000a; }
.lvl-slider input[type=range]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); border: 4px solid #0b0a10; cursor: pointer; }
.lvl-labels { display: flex; justify-content: space-between; margin-top: 10px; font-family: 'Cinzel', serif; font-weight: 700; font-size: .95rem; }
.lvl-labels span { cursor: pointer; flex: 1; text-align: center; color: var(--muted); }
.lvl-labels span:first-child { text-align: left; }
.lvl-labels span:last-child { text-align: right; }
.lvl-labels span.on { color: var(--gold); }
.lvl-desc { margin-top: 16px; animation: cardIn .4s; }
.lvl-desc ul { padding-left: 20px; margin: 6px 0; }
.lvl-desc li { margin: 4px 0; }

/* ------------------------------------------------ big stages (raider level animations) */
.stage { position: relative; height: 230px; border-radius: 14px; overflow: hidden; margin-top: 14px;
  background: linear-gradient(180deg, #1d1830 0%, #2a2140 60%, #3b2e1f 60%, #2a2016 100%); border: 1px solid var(--line); }
.stage .a { position: absolute; line-height: 1; transform: translate(-50%, -50%); }
.stage .party { position: absolute; top: 62%; display: flex; gap: 2px; font-size: 34px; transform: translateY(-50%); white-space: nowrap; }
.stage .caption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: 'Cinzel', serif; color: var(--gold); font-size: .95rem; text-shadow: 0 2px 6px #000; }

/* AoTC: wooden swords vs baby dragon (6s loop) */
.aotc .party { animation: aotcMarch 6s ease-in-out infinite; }
@keyframes aotcMarch { 0% { left: -40% } 40%, 100% { left: 36% } }
.aotc .baby { left: 76%; top: 62%; font-size: 30px; animation: aotcBaby 6s infinite; }
@keyframes aotcBaby { 0%, 45% { transform: translate(-50%, -50%) rotate(0) } 50% { transform: translate(-50%, -50%) rotate(-10deg) } 55%, 90% { transform: translate(-30%, -20%) rotate(180deg); opacity: 1 } 100% { opacity: 0 } }
.aotc .bottle { left: 84%; top: 52%; font-size: 18px; animation: aotcBaby2 6s infinite; }
@keyframes aotcBaby2 { 0%, 50% { opacity: 1 } 55%, 100% { opacity: 0 } }
.aotc .bonk { left: 66%; top: 42%; font-size: 30px; opacity: 0; animation: bonk 6s infinite; }
@keyframes bonk { 0%, 44% { opacity: 0; transform: translate(-50%, -50%) scale(.3) } 48% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) } 56%, 100% { opacity: 0 } }
.aotc .win { left: 50%; top: 22%; font-size: 26px; font-family: 'Cinzel', serif; color: var(--gold); opacity: 0; animation: win 6s infinite; white-space: nowrap; }
@keyframes win { 0%, 58% { opacity: 0; transform: translate(-50%, -30%) scale(.6) } 64%, 92% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0 } }

/* Mythic without burnout (10s loop) */
.myth .party { animation: mythMarch 10s linear infinite; }
@keyframes mythMarch {
  0% { left: -30%; transform: translateY(-50%) scaleX(1) }
  20% { left: 4%; transform: translateY(-50%) scaleX(1) }
  45% { left: 26%; transform: translateY(-50%) scaleX(1) }
  62% { left: 34%; transform: translateY(-50%) scaleX(1) }
  72% { left: 34%; transform: translateY(-50%) scaleX(1) }
  73% { left: 34%; transform: translateY(-50%) scaleX(-1) }
  100% { left: -40%; transform: translateY(-50%) scaleX(-1) }
}
.myth .d1 { left: 30%; top: 60%; font-size: 30px; animation: d1 10s infinite; }
@keyframes d1 { 0%, 16% { opacity: 1; transform: translate(-50%, -50%) rotate(0) } 20%, 100% { opacity: 0; transform: translate(-50%, -20%) rotate(180deg) } }
.myth .d2 { left: 52%; top: 60%; font-size: 30px; animation: d2 10s infinite; }
@keyframes d2 { 0%, 38% { opacity: 1; transform: translate(-50%, -50%) rotate(0) } 43%, 100% { opacity: 0; transform: translate(-50%, -20%) rotate(180deg) } }
.myth .g1 { left: 30%; top: 50%; font-size: 22px; opacity: 0; animation: g1 10s infinite; }
@keyframes g1 { 0%, 18% { opacity: 0; transform: translate(-50%, -50%) } 22% { opacity: 1 } 34%, 100% { opacity: 0; transform: translate(-50%, -260%) } }
.myth .g2 { left: 52%; top: 50%; font-size: 22px; opacity: 0; animation: g2 10s infinite; }
@keyframes g2 { 0%, 41% { opacity: 0; transform: translate(-50%, -50%) } 45% { opacity: 1 } 56%, 100% { opacity: 0; transform: translate(-50%, -260%) } }
.myth .boss { left: 82%; top: 48%; font-size: 110px; animation: bossLoom 10s infinite; filter: drop-shadow(0 0 20px #ff5c6c66); }
@keyframes bossLoom { 0%, 45% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 55%, 95% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0 } }
.myth .bossname { left: 82%; top: 12%; font-family: 'Cinzel', serif; color: #ff8a95; font-size: 15px; animation: bossLoom 10s infinite; white-space: nowrap; }
.myth .shrug { left: 40%; top: 30%; font-size: 34px; opacity: 0; animation: shrug 10s infinite; }
@keyframes shrug { 0%, 62% { opacity: 0; transform: translate(-50%, -30%) } 64%, 74% { opacity: 1; transform: translate(-50%, -50%) } 78%, 100% { opacity: 0 } }
.myth .loot { left: 10%; top: 14%; font-size: 15px; color: var(--gold); font-family: 'Cinzel', serif; opacity: 0; animation: lootTxt 10s infinite; }
@keyframes lootTxt { 0%, 20% { opacity: 0 } 25%, 95% { opacity: 1 } 100% { opacity: 0 } }

/* CE or Bust */
.ce .boss { left: 50%; top: 68%; font-size: 100px; transform: translate(-50%, -50%) rotate(90deg); filter: grayscale(.6) brightness(.8); }
.ce .xeyes { left: 50%; top: 40%; font-size: 26px; animation: spinA 3s linear infinite; }
.ce .party { left: 4%; top: 62%; font-size: 36px; }
.ce .party.right { left: auto; right: 4%; }
.ce .party span { display: inline-block; transform-origin: bottom center; animation: tired 3s ease-in-out infinite; }
.ce .party span:nth-child(2) { animation-delay: .4s; }
.ce .party span:nth-child(3) { animation-delay: .8s; }
@keyframes tired { 0%, 100% { transform: rotate(-14deg) translateY(0) } 50% { transform: rotate(-20deg) translateY(4px) } }
.ce .party.right span { animation-name: tiredR; }
@keyframes tiredR { 0%, 100% { transform: rotate(14deg) translateY(0) } 50% { transform: rotate(20deg) translateY(4px) } }
.ce .sweat { font-size: 18px; animation: dripS 1.6s infinite; }
@keyframes dripS { 0% { opacity: 0; transform: translate(-50%, -50%) } 20% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, 120%) } }
.ce .spark { font-size: 16px; animation: twinkle 1.6s infinite; }
.ce .banner { left: 50%; top: 16%; font-family: 'Cinzel', serif; font-size: 22px; color: var(--gold); white-space: nowrap; text-shadow: 0 0 14px #e8c26aaa; animation: pulse 2.4s ease-in-out infinite; }

/* ------------------------------------------------ attendance reveal */
.attend { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 14px;
  background: #ffffff07; border: 1px solid var(--line); margin-top: 18px; animation: cardIn .5s; }
.attend .scene { aspect-ratio: 1; }
.attend .meter { height: 14px; background: #ffffff12; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.attend .meter i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #ff5c6c, #e8c26a, #4fd18b); background-size: 300px 100%; transition: width 1.6s cubic-bezier(.2, .9, .3, 1); }
.attend .title { font-family: 'Cinzel', serif; font-size: 1.3rem; color: var(--gold); }
@media (max-width: 560px) { .attend { grid-template-columns: 1fr; } .attend .scene { max-width: 200px; margin: 0 auto; } }
@keyframes ghost { 0%, 100% { opacity: 1 } 40%, 60% { opacity: .05 } }
.ghostfade { animation-name: ghost; animation-duration: 2.4s !important; }

/* ------------------------------------------------ raid times runaway */
.times { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; position: relative; min-height: 260px; }
.runaway { position: relative; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.nope { padding: 16px; border-radius: 14px; border: 1px dashed var(--danger); color: var(--danger); font-weight: 700; animation: msgPop .4s; }

/* ------------------------------------------------ overlays */
.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #05040acc; backdrop-filter: blur(4px); animation: fadeIn .25s; padding: 16px; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.overlay .box { background: var(--card-solid); border: 1px solid var(--line); border-radius: 18px; padding: 28px; max-width: 460px; width: 100%; text-align: center; animation: cardIn .4s cubic-bezier(.2, .9, .3, 1.4); }
.overlay .huge { font-size: 96px; line-height: 1; display: inline-block; }
.eyeroll { position: relative; display: inline-block; font-size: 96px; }
.eyeroll .pupils { position: absolute; left: 50%; top: 38%; transform: translate(-50%, 0); font-size: 30px; animation: roll3 1.6s ease-in-out infinite; }
@keyframes roll3 { 0%, 100% { transform: translate(-50%, 6px) } 30% { transform: translate(-70%, -14px) } 60% { transform: translate(-30%, -14px) } }
.sad { animation: sadDroop 2.5s ease-in-out infinite; }
@keyframes sadDroop { 0%, 100% { transform: rotate(-4deg) } 50% { transform: rotate(4deg) translateY(6px) } }
.tears { position: relative; height: 40px; }
.tears span { position: absolute; top: 0; font-size: 22px; animation: tear 1.2s infinite ease-in; }
@keyframes tear { 0% { transform: translateY(-20px); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(60px); opacity: 0 } }
.wtf { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #200008e6; animation: wtfFlash .15s 6 alternate; padding: 16px; text-align: center; }
@keyframes wtfFlash { from { background: #200008e6 } to { background: #60001aee } }
.wtf .w { font-family: 'Cinzel', serif; font-size: clamp(4rem, 18vw, 10rem); font-weight: 900; color: #ff5c6c; text-shadow: 0 0 40px #ff0033, 6px 6px 0 #000; animation: wtfShake .1s infinite, wtfZoom .6s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes wtfShake { 0% { transform: translate(2px, -2px) rotate(-2deg) } 50% { transform: translate(-3px, 2px) rotate(2deg) } 100% { transform: translate(2px, 1px) rotate(-1deg) } }
@keyframes wtfZoom { from { scale: 4; opacity: 0 } to { scale: 1; opacity: 1 } }
body.quake .wrap { animation: wtfShake .08s infinite; }

.confetti { position: fixed; top: -20px; z-index: 70; pointer-events: none; font-size: 20px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ------------------------------------------------ admin */
.admin .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 20px; }
.admin .stat { background: #ffffff07; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.admin .stat b { font-size: 1.8rem; font-family: 'Cinzel', serif; color: var(--gold); display: block; }
.admin section { margin: 24px 0; }
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 180px 1fr 44px; gap: 10px; align-items: center; font-size: .92rem; }
.bar .fill { height: 18px; border-radius: 6px; background: #ffffff10; overflow: hidden; }
.bar .fill i { display: block; height: 100%; background: var(--class, var(--gold)); border-radius: 6px; }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 560px) { .bar { grid-template-columns: 110px 1fr 34px; } }
.resp { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 10px 0; background: #ffffff05; }
.resp summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.resp dl { display: grid; grid-template-columns: 170px 1fr; gap: 6px 12px; margin: 12px 0 0; }
.resp dt { color: var(--muted); }
.resp dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 560px) { .resp dl { grid-template-columns: 1fr; } .resp dt { margin-top: 6px; } }
.quote { border-left: 3px solid var(--gold); padding: 6px 12px; margin: 8px 0; background: #ffffff05; border-radius: 0 8px 8px 0; white-space: pre-wrap; }

/* The animations ARE the survey, so only tone down the seizure-y bits for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  body.quake .wrap, .wtf, .wtf .w { animation: none !important; }
}

/* ------------------------------------------------ SVG cartoon art (druid specs) */
.scene svg.art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.art .mk-body, .art .mk-eyes, .art .kernel, .art .cat-head, .art .cat-tongue, .art .cat-tail, .art .cat-leg, .art .licktext,
.art .arm, .art .barbell, .art .sweat, .art .rep, .art .crown, .art .tree-eye, .art .handglow, .art .hp, .art .plus { transform-box: fill-box; }
.art .glow { filter: drop-shadow(0 0 2px #7fe3ff); }
.art .glow-green { filter: drop-shadow(0 0 2px #8dff9e); }

/* moonkin */
.moonkin .mk-body { transform-origin: 50% 100%; animation: mkBreathe 2.4s ease-in-out infinite; }
@keyframes mkBreathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.035, .965) } }
.moonkin .mk-eyes { transform-origin: 50% 50%; animation: blink 3.6s infinite; }
@keyframes blink { 0%, 91%, 100% { transform: scaleY(1) } 94% { transform: scaleY(.1) } }
.moonkin .tvscreen { animation: tv 1.8s steps(1) infinite; }
@keyframes tv { 0% { fill: #4aa3ff } 33% { fill: #a77cff } 66% { fill: #ffcf66 } }
.moonkin .tvbeam { animation: flicker .9s infinite; }
.moonkin .kernel { animation: kernel 2.2s ease-in infinite; }
@keyframes kernel { 0% { transform: translate(0, 0); opacity: 1 } 50% { transform: translate(17px, -26px) } 85% { transform: translate(34px, -16px); opacity: 1 } 100% { transform: translate(35px, -16px); opacity: 0 } }

/* feral cat */
.feral .cat-head { transform-origin: 15% 85%; animation: catLick .65s ease-in-out infinite; }
@keyframes catLick { 0%, 100% { transform: rotate(-5deg) } 50% { transform: rotate(9deg) translate(2px, -3px) } }
.feral .cat-tongue { transform-origin: 50% 0; animation: tongue .65s ease-in-out infinite; }
@keyframes tongue { 0%, 100% { transform: scaleY(.35) } 50% { transform: scaleY(1.25) } }
.feral .cat-tail { transform-origin: 100% 95%; animation: tail 2.6s ease-in-out infinite; }
@keyframes tail { 0%, 100% { transform: rotate(-7deg) } 50% { transform: rotate(9deg) } }
.feral .cat-leg { transform-origin: 0% 100%; animation: legTwitch 2.6s ease-in-out infinite; }
@keyframes legTwitch { 0%, 80%, 100% { transform: rotate(0) } 88% { transform: rotate(-4deg) } }
.feral .licktext { opacity: 0; animation: lickTxt 1.3s infinite; }
.feral .licktext.l2 { animation-delay: .65s; }
@keyframes lickTxt { 0% { opacity: 0; transform: translateY(4px) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(-8px) } }

/* guardian bench press */
.guardian .arm { transform-origin: 50% 100%; animation: armPress 1.5s ease-in-out infinite; }
@keyframes armPress { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(.55) } }
.guardian .barbell { animation: barPress 1.5s ease-in-out infinite; }
@keyframes barPress { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(12.6px) } }
.guardian .sweat { animation: sweat 1.5s ease-in infinite; }
.guardian .sweat.s2 { animation-delay: .7s; }
@keyframes sweat { 0% { transform: translate(0, 0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translate(-4px, 14px); opacity: 0 } }
.guardian .rep { opacity: 0; animation: rep 1.5s ease-out infinite; }
@keyframes rep { 0%, 40% { opacity: 0; transform: translateY(6px) } 55% { opacity: 1 } 100% { opacity: 0; transform: translateY(-10px) } }

/* resto tree form */
.resto .crown { transform-origin: 50% 100%; animation: crownSway 3.2s ease-in-out infinite; }
@keyframes crownSway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
.resto .tree-eye { transform-origin: 50% 50%; animation: blink 4s infinite; }
.resto .handglow { transform-origin: 50% 50%; animation: handGlow .5s ease-in-out infinite; filter: drop-shadow(0 0 4px #8dff9e); }
@keyframes handGlow { 0%, 100% { transform: scale(.6); opacity: .5 } 50% { transform: scale(1.1); opacity: 1 } }
.resto .rejuv { animation: rejuvFly 1.5s linear infinite; opacity: 0; filter: drop-shadow(0 0 3px #8dff9e); }
@keyframes rejuvFly {
  0% { transform: translate(88px, 42px) rotate(0) scale(.4); opacity: 0 }
  15% { opacity: 1 }
  85% { opacity: 1 }
  100% { transform: translate(131px, 62px) rotate(720deg) scale(1.1); opacity: 0 }
}
.resto .hp { transform-origin: 0 50%; animation: hp 3s ease-out infinite; }
@keyframes hp { 0% { transform: scaleX(.2); fill: #ff5c6c } 50% { fill: #e8c26a } 100% { transform: scaleX(1); fill: #4fd18b } }
.resto .plus { animation: lickTxt .5s infinite; }
.art .gl { filter: drop-shadow(0 0 2px currentColor); }

/* ------------------------------------------------ "application has quit" fake Windows error */
.win-dlg { width: min(360px, 100%); background: #ece9d8; color: #000; border: 1px solid #0a246a; border-radius: 8px 8px 3px 3px;
  box-shadow: 0 18px 50px #000c; font: 13px/1.4 Tahoma, 'Segoe UI', sans-serif; overflow: hidden; animation: cardIn .25s; }
.win-title { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px 5px 10px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #0a5fd8, #0846b8 60%, #0a3a9a); }
.win-x { all: unset; cursor: pointer; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 3px; font-size: 12px; font-weight: 700;
  background: linear-gradient(180deg, #e8735a, #c8432a); border: 1px solid #fff; color: #fff; }
.win-body { display: flex; gap: 14px; align-items: center; padding: 18px 16px 8px; }
.win-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #d11a0a);
  color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; box-shadow: 0 1px 2px #0006; }
.win-foot { display: flex; justify-content: center; padding: 8px 0 14px; }
.win-ok { font: inherit; min-width: 76px; padding: 3px 10px; background: linear-gradient(180deg, #fff, #e3e0d0); border: 1px solid #003c74; border-radius: 3px; cursor: pointer; }
.win-ok:focus { outline: 1px dotted #000; outline-offset: -4px; }

/* welcome screen boss fight */
.intro-scene { position: relative; aspect-ratio: 160 / 82; margin: -6px 0 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: radial-gradient(circle at 30% 60%, #5a1a1a55, transparent 60%), radial-gradient(circle at 80% 70%, #1a4a2a44, transparent 60%), #0e0c15; }
.intro-scene svg.art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ------------------------------------------------ Q7 feedback categories */
.fb-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
@media (max-width: 600px) { .fb-cats { grid-template-columns: repeat(3, 1fr); } }
.fb-cat { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px;
  border-radius: 14px; border: 1px solid var(--line); background: #ffffff06; color: var(--text); font: inherit; font-weight: 600;
  transition: transform .15s, border-color .2s, background .2s; }
.fb-cat:hover { transform: translateY(-2px); border-color: #e8c26a88; }
.fb-cat .fb-icon { font-size: 1.8rem; line-height: 1; transition: transform .3s; }
.fb-cat:hover .fb-icon { transform: scale(1.15) rotate(-6deg); }
.fb-cat.open { border-color: var(--gold); background: #e8c26a14; box-shadow: 0 0 0 2px #e8c26a44 inset; }
.fb-cat.done::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ok); color: #062; font-weight: 800; font-size: .75rem; display: grid; place-items: center; }
.fb-panel { margin-top: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #ffffff05; animation: cardIn .3s; }
.fb-panel h3 { font-family: 'Inter', sans-serif; font-size: 1rem; margin: 0 0 12px; }
.fb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.fb-opts.rating { grid-template-columns: repeat(5, 1fr); }
.fb-opt { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px;
  border: 1px solid var(--line); background: #0e0c15; color: var(--text); font: inherit; text-align: center; transition: all .15s; }
.fb-opt:hover { border-color: #e8c26a88; transform: translateY(-1px); }
.fb-opt.on { border-color: var(--gold); background: #e8c26a1c; box-shadow: 0 0 0 2px #e8c26a44 inset; }
.fb-opt .fb-oicon { font-size: 1.5rem; line-height: 1.1; }
.fb-opt.on .fb-oicon { animation: msgPop .35s; }
.fb-comment { min-height: 70px; margin-top: 12px; }
.fb-fun { text-align: center; }
.fb-funface { font-size: 3rem; line-height: 1.1; display: inline-block; }
.fb-funface.pop { animation: msgPop .35s; }
.fb-fun input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 12px; border-radius: 99px; margin: 10px 0 6px;
  background: linear-gradient(90deg, #ff5c6c, #e8c26a 50%, #4fd18b); outline: none; }
.fb-fun input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, #f3d488, var(--gold-2)); border: 4px solid #0b0a10; cursor: pointer; }
.fb-fun input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); border: 4px solid #0b0a10; }
.fb-funlabel { font-family: 'Cinzel', serif; font-weight: 700; color: var(--gold); min-height: 1.4em; }

/* ------------------------------------------------ sidebar question navigation */
.layout { display: block; }
body.has-nav .wrap { max-width: 1120px; }
body.has-nav .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.sidenav { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  box-shadow: 0 20px 50px #0006; animation: cardIn .4s; }
.sidenav ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sidenav button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px; color: var(--text); font-size: .9rem; transition: background .15s; }
.sidenav button:hover:not(:disabled) { background: #ffffff0d; }
.sidenav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sidenav .nav-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem;
  border: 2px solid var(--line); color: var(--muted); }
.sidenav .nav-t { display: flex; flex-direction: column; line-height: 1.25; }
.sidenav .nav-why { font-size: .72rem; color: var(--muted); }
.sidenav button.seen .nav-n { background: var(--ok); border-color: var(--ok); color: #062; font-size: 0; }
.sidenav button.seen .nav-n::after { content: '✓'; font-size: .85rem; font-weight: 800; }
.sidenav button.cur { background: #e8c26a1a; box-shadow: inset 3px 0 0 var(--gold); }
.sidenav button.cur .nav-n { border-color: var(--gold); color: var(--gold); }
.sidenav button.off { opacity: .45; cursor: not-allowed; }
.sidenav .nav-char { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 10px; background: #ffffff07; border: 1px solid var(--line); }
.sidenav .nav-char b { font-family: 'Cinzel', serif; font-size: 1.05rem; }

@media (max-width: 900px) {
  body.has-nav .layout { grid-template-columns: 1fr; gap: 12px; }
  .sidenav { position: relative; top: 0; padding: 8px; display: flex; gap: 8px; align-items: center; overflow: hidden; }
  .sidenav .nav-char { width: auto; flex: none; }
  .sidenav .nav-char .small { display: none; }
  .sidenav ol { flex-direction: row; margin: 0; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 2px; }
  .sidenav ol::-webkit-scrollbar { display: none; }
  .sidenav li button { width: auto; padding: 4px; }
  .sidenav .nav-t { display: none; }
  .sidenav button.cur { box-shadow: none; background: transparent; }
  .sidenav button.cur .nav-n { background: var(--gold); color: #1a1408; }
}

/* ------------------------------------------------ "What a nerd" wizard */
.nerd { position: relative; width: 240px; margin: 0 auto; }
.nerd .wiz { width: 220px; display: block; margin: 30px auto 0; animation: wizIn .6s cubic-bezier(.2, 1.6, .4, 1); transform-origin: 50% 100%; }
@keyframes wizIn { from { transform: translateY(60px) scale(.5); opacity: 0 } to { transform: none; opacity: 1 } }
.wiz * { transform-box: fill-box; }
.wiz .wiz-arm { transform-origin: 0% 0%; animation: wizJab .5s ease-in-out .5s infinite; }
@keyframes wizJab { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-8deg) translate(2px, 2px) } }
.wiz .wiz-hand { transform-origin: 30% 30%; animation: wizPoint .5s ease-in-out .5s infinite; }
@keyframes wizPoint { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.25) } }
.wiz .wiz-glow { filter: drop-shadow(0 0 4px #fff3a0); animation: flicker 1.4s infinite; }
.wiz .wiz-eyes { transform-origin: 50% 50%; animation: blink 3s infinite; }
.nerd .wiz { animation: wizIn .6s cubic-bezier(.2, 1.6, .4, 1), wizLaugh .25s ease-in-out .8s 6; }
@keyframes wizLaugh { 0%, 100% { translate: 0 0 } 50% { translate: 0 -3px } }
.nerd-bubble { position: absolute; top: 0; right: -18px; background: #fff; color: #1b1030; font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 1.25rem; padding: 8px 14px; border-radius: 16px; box-shadow: 0 6px 20px #0008; white-space: nowrap; z-index: 2;
  opacity: 0; animation: msgPop .4s .45s forwards; }
.nerd-bubble::after { content: ''; position: absolute; left: 22px; bottom: -10px; border: 6px solid transparent; border-top: 8px solid #fff; border-left-color: #fff; }
.nerd-emoji { position: absolute; left: -6px; top: 70px; font-size: 2.2rem; opacity: 0; animation: msgPop .4s .8s forwards, nerdFloat 1.6s ease-in-out 1.2s infinite; }
@keyframes nerdFloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -6px } }