:root{--ink:#2b1d10;--muted:#5c4630;--bg:#0f1f24;--card:#fbf3e1;--brand:#1f5a5e;--brand2:#eadcbc;--accent:#8a2d2b;--gold:#c89b3c;--r:10px;--teal:#123a40;--wine:#6e1f24}
html{scroll-behavior:smooth}
body{font-family:"EB Garamond","Cormorant Garamond",Georgia,serif;font-size:18px;color:var(--ink);background:radial-gradient(ellipse at 50% 20%,#1d4a50 0,#0f262b 45%,#08151a 100%) fixed;min-height:100vh}
h1,h2,h3,.chap-no,legend,.brand{font-family:"Cormorant Garamond",Georgia,serif}
h1{font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:600;color:var(--wine);margin:.15em 0;line-height:1.05}
h2{font-size:2.1rem;font-weight:600;color:var(--teal);margin:.1em 0 .3em}
.chap-no{font-family:"IM Fell English SC",serif;letter-spacing:.2em;color:var(--accent);margin:0;font-size:1rem}
a{color:#1f5a5e}.crisis{position:sticky;top:0;z-index:100;background:#7a1f1f;font-family:system-ui,sans-serif}
.top{background:linear-gradient(#10292e,#0c2025);border-bottom:2px solid var(--gold);position:sticky;top:38px;z-index:90;gap:10px}
.brand{color:#f0d79a;font-size:1.5rem;text-decoration:none}.top nav a{color:#f3e6c6;font-size:1.05rem}.menu{color:#f3e6c6;border-color:#c89b3c}
.btn{background:linear-gradient(#2a7076,#174a4f);color:#fff8e6;border:1px solid #c89b3c;font-family:"EB Garamond",serif;font-size:1.05rem;box-shadow:0 2px 0 #0b2a2e,0 4px 12px rgba(0,0,0,.2)}
.btn:hover{filter:brightness(1.12)}.btn.ghost{background:transparent;color:var(--teal);border:1.5px solid var(--teal);box-shadow:none}
.book-btn{background:linear-gradient(#e2bb62,#b8862c);color:#2b1d10;border-color:#f3d995}
.top .btn{margin:0}
/* cover */
#cover{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:radial-gradient(#1d4a50,#061014);perspective:2000px;transition:opacity .8s}
.cover-book{width:min(70vw,440px);aspect-ratio:3/4;position:relative;transform-style:preserve-3d}
.cover-front{position:absolute;inset:0;transform-origin:left center;transition:transform 1.4s cubic-bezier(.6,.1,.3,1);box-shadow:0 30px 60px rgba(0,0,0,.6);border-radius:4px 10px 10px 4px;overflow:hidden;background:#123a40}
.cover-front img{width:100%;height:100%;object-fit:cover;display:block}
.cover-title{position:absolute;left:21%;right:9%;top:30%;bottom:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#f3d995;text-shadow:0 2px 6px #000}
.cover-title span{font-family:"Cormorant Garamond";font-size:clamp(1.8rem,5vw,2.8rem);font-weight:600}.cover-title small{font-family:"IM Fell English SC";letter-spacing:.25em;font-size:1rem}.cover-title em{margin-top:.6em;font-size:1rem}
#cover.opening .cover-front{transform:rotateY(-165deg)}#cover.gone{opacity:0;pointer-events:none}
.cover-ctl{position:absolute;bottom:8vh;display:flex;gap:10px}.cover-ctl .btn.ghost{color:#f3e6c6;border-color:#f3e6c6}
/* atmosphere */
#motes{position:fixed;inset:0;pointer-events:none;z-index:1}
.candleglow{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 12% 85%,rgba(255,190,90,.18),transparent 40%),radial-gradient(circle at 90% 15%,rgba(255,200,110,.1),transparent 35%);animation:flick 3s infinite alternate}
@keyframes flick{0%{opacity:.75}30%{opacity:1}55%{opacity:.85}80%{opacity:.98}100%{opacity:.8}}
main{position:relative;z-index:3}
/* pages */
.page{background:#f6ead0 url(img/parchment.webp) center/cover;padding:34px 30px 40px;position:relative}
.page .note{color:#5c4630}
.vignette{width:100%;border-radius:6px;display:block;margin:10px 0 14px;mix-blend-mode:multiply}
.hero-page{padding:0;background:#0d2328}.hero-art{width:100%;height:100%;object-fit:cover;display:block}
.dropcap::first-letter{float:left;font-family:"IM Fell English SC",serif;font-size:3.6em;line-height:1;width:1.35em;height:1.35em;margin:.05em .12em 0 0;display:flex;color:var(--wine);background:url(img/dropcap.webp) center/contain no-repeat;text-align:center;padding:.17em .1em 0}
.eyebrow{font-family:"IM Fell English SC";letter-spacing:.08em;color:#5c4630;font-size:.9rem}
.spot{width:110px;float:right;margin:10px 0 0 10px;mix-blend-mode:multiply;opacity:.9}
.card{background:rgba(255,251,240,.78);border:1px solid #d9c08a;box-shadow:0 2px 8px rgba(70,40,10,.12);margin-bottom:14px}
.chips label{background:#fffaf0;border-color:#c9ad73}.chips label:has(input:checked){background:#d9ecea;border-color:var(--brand);box-shadow:0 0 0 2px #c89b3c55}
.trust li{background:#efe0bd;border:1px solid #d1b06d}.placeholder{border-color:#a57a2e;color:#5c4630}
.tags span{background:#efe2c4}.bar{background:#e8d7b4}.bar span{background:linear-gradient(90deg,#1f5a5e,#c89b3c)}
select,input[type=number],input[type=search]{background:#fffaf0}
/* wax seals */
.avatar,.seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:"IM Fell English SC";font-size:1.4rem;color:#f6dc9c;
 background:radial-gradient(circle at 35% 30%,#a8433d,#6e1f24 60%,#4a1216);box-shadow:inset 0 0 0 3px #c89b3c,inset 0 0 0 6px #6e1f24,inset 0 0 0 7px #e6c26a,0 3px 6px rgba(0,0,0,.35);text-shadow:0 1px 1px #000}
#team-grid .card{display:grid;gap:4px}
/* results cards */
.ranked>li{position:relative;padding-left:96px;background:rgba(255,251,240,.85)}
.ranked>li .seal{position:absolute;left:18px;top:18px}.ranked>li .rspot{position:absolute;left:12px;bottom:10px;width:72px;mix-blend-mode:multiply;opacity:.85}
.ranked>li:first-child{border:2px solid #c89b3c;box-shadow:0 0 24px rgba(200,155,60,.35)}
.quiz-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}.quiz-nav .cnt{font-style:italic}
/* charms flip */
.skill{position:relative;perspective:1200px;background:rgba(255,251,240,.85)!important;margin-bottom:14px;min-height:240px}
.charm-front{position:absolute;inset:0;z-index:4;border-radius:var(--r);background:#f6ead0 url(img/parchment.webp) center/cover;border:2px solid #c89b3c;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;
 backface-visibility:hidden;transform-origin:left center;transition:transform .9s cubic-bezier(.5,.1,.3,1),opacity .9s;box-shadow:inset 0 0 30px rgba(120,80,20,.25)}
.charm-front img{width:90px;mix-blend-mode:multiply}.charm-front h4{font-family:"Cormorant Garamond";font-size:1.5rem;margin:.2em 0;color:var(--wine)}.charm-front p{margin:0 0 8px;font-size:.95rem;color:#5c4630}
.skill.open .charm-front{transform:rotateY(-170deg);opacity:0;pointer-events:none}
.disclaimer{background:#fff3d6;border-left-color:#8a2d2b}
/* ink-in */
.ink{opacity:1}.chapter.inking .ink{animation:ink 1.6s ease both}.chapter.inking .ink:nth-of-type(2){animation-delay:.25s}.chapter.inking .ink:nth-of-type(3){animation-delay:.5s}
@keyframes ink{from{opacity:0;filter:blur(4px);letter-spacing:.04em;color:#8a6a40}to{opacity:1;filter:none}}
/* turn controls */
.turnctl{display:none}#pgno{color:#f3e6c6;font-style:italic}.turnctl .btn.ghost{color:#f3e6c6;border-color:#c89b3c}
.ribbons{display:none}
/* MOBILE: stacked */
.chapter{max-width:760px;margin:22px auto;box-shadow:0 10px 30px rgba(0,0,0,.4);border-radius:8px;overflow:hidden;scroll-margin-top:120px}
.hero-page{aspect-ratio:16/9}
/* DESKTOP spread */
@media(min-width:1000px){
 body{overflow:hidden}.top nav{display:none}.menu{display:none}
 .book{position:relative;width:min(1320px,94vw);height:calc(100vh - 190px);margin:18px auto 0;perspective:2600px}
 .chapter{display:none;position:absolute;inset:0;max-width:none;margin:0;grid-template-columns:1fr 1fr;border-radius:6px;overflow:visible;box-shadow:0 30px 60px rgba(0,0,0,.55)}
 .chapter.active{display:grid}
 .page{overflow:auto;height:100%;scrollbar-width:thin;scrollbar-color:#c89b3c transparent}
 .page.left{border-radius:6px 0 0 6px;box-shadow:inset -40px 0 50px -30px rgba(80,50,10,.45)}
 .page.right{border-radius:0 6px 6px 0;box-shadow:inset 40px 0 50px -30px rgba(80,50,10,.45)}
 .hero-page{aspect-ratio:auto}
 .book::before{content:"";position:absolute;inset:-12px -14px;background:linear-gradient(90deg,#4a1216,#6e1f24 49.5%,#2a0a0c 50%,#6e1f24 50.5%,#4a1216);border-radius:12px;z-index:-1;box-shadow:0 0 0 2px #c89b3c66}
 .book::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(60,35,10,.4);z-index:5;pointer-events:none}
 .turnctl{display:flex;justify-content:center;align-items:center;gap:20px;margin:8px 0}
 .ribbons{display:flex;flex-direction:column;gap:6px;position:absolute;right:-56px;top:20px;z-index:6}
 .ribbons a{display:block;width:44px;padding:10px 0 18px;text-align:center;color:#fff3d6;text-decoration:none;font-family:"IM Fell English SC";font-size:.72rem;writing-mode:vertical-rl;
  background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%);transition:transform .5s,width .3s;transform:translateX(var(--st,0))}
 .ribbons a:hover,.ribbons a[aria-current=true]{transform:translateX(10px);filter:brightness(1.2)}
 .leaf{position:absolute;top:0;bottom:0;width:50%;z-index:20;transform-style:preserve-3d;pointer-events:none}
 .leaf.fwd{left:50%;transform-origin:left center;animation:turnF .9s cubic-bezier(.45,.05,.3,1) forwards}
 .leaf.back{left:0;transform-origin:right center;animation:turnB .9s cubic-bezier(.45,.05,.3,1) forwards}
 .leaf>div{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden}
 .leaf .lb{transform:rotateY(180deg)}
 .leaf>div::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.0),rgba(60,30,0,.28));pointer-events:none}
 .leaf>div .page{height:100%;overflow:hidden}
 @keyframes turnF{0%{transform:rotateY(0)}50%{transform:rotateY(-90deg) skewY(-1deg)}100%{transform:rotateY(-180deg)}}
 @keyframes turnB{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) skewY(1deg)}100%{transform:rotateY(180deg)}}
}
/* easter eggs */
.rune{cursor:pointer;color:#a57a2e;opacity:.55;margin-left:8px;font-size:.7em;background:none;border:0;padding:0 4px;font-family:serif}.rune.found{opacity:1;color:#c89b3c;text-shadow:0 0 10px #f3c96a}
#runes-hud{position:fixed;bottom:10px;left:10px;background:#0c2025e6;color:#f3e6c6;padding:6px 10px;border-radius:8px;font-size:13px;z-index:95;border:1px solid #c89b3c66}
#secret-room{position:fixed;inset:0;z-index:150;background:rgba(5,12,14,.85);display:grid;place-items:center;padding:20px}
#secret-room[hidden]{display:none}.sr-inner{max-width:1000px;background:#0d2328;border:2px solid #c89b3c;border-radius:12px;overflow:hidden;box-shadow:0 0 60px rgba(200,155,60,.35);animation:rise .8s ease}
.sr-inner img{width:100%;display:block}.sr-text{padding:18px 24px;color:#f3e6c6;text-align:center}.sr-text h2{color:#f0d79a}.flavor{font-style:italic}
@keyframes rise{from{opacity:0;transform:scale(.94)}}
#toast{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);background:#0c2025;color:#f3e6c6;border:1px solid #c89b3c;padding:10px 18px;border-radius:10px;z-index:160;opacity:0;transition:opacity .4s;pointer-events:none}#toast.show{opacity:1}
.sparkle{position:fixed;pointer-events:none;z-index:170;color:#f3c96a;font-size:18px;animation:sp .9s ease-out forwards}@keyframes sp{to{transform:translateY(-40px) scale(1.6);opacity:0}}
.epilogue{text-align:center;margin:20px 0}
@media(prefers-reduced-motion:reduce){.candleglow,.chapter.inking .ink,.sr-inner{animation:none}.leaf{display:none}.cover-front,.charm-front,.ribbons a{transition:none}#cover{display:none}.sparkle{display:none}html{scroll-behavior:auto}}
.top{position:relative;top:auto}
.pf{animation:pf .6s ease}@keyframes pf{from{opacity:.1;transform:perspective(800px) rotateY(60deg);transform-origin:left}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pf{animation:none}}
.skill.open{min-height:0}
[hidden]{display:none!important}
.sound-ctl{position:fixed;right:10px;bottom:10px;z-index:120;display:flex;gap:6px}
.sbtn{font:600 14px system-ui,sans-serif;background:#0c2025f0;color:#f3e6c6;border:1.5px solid #c89b3c;border-radius:999px;padding:8px 12px;cursor:pointer;min-height:40px}
.sbtn[aria-pressed=true]{background:#1f5a5e}
.pro-link{display:inline-block;background:#fff8e6;color:#123a40!important;border:2px solid #123a40;border-radius:999px;padding:10px 18px;font:600 15px system-ui,sans-serif;text-decoration:none;margin:6px 0}
.pro-link:hover{background:#e7f1f0}
.cover-pro{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap}
@media(max-width:600px){.cover-pro{white-space:normal;text-align:center;width:88vw}.sound-ctl{bottom:54px}#runes-hud{bottom:10px}.sbtn{font-size:13px;padding:6px 10px}}
.crisis{z-index:300}.cover-pro{top:64px}@media(max-width:600px){.cover-pro{top:86px}}
/* ===== v4 runes ===== */
.rune{position:absolute;z-index:8;min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:50%;font-size:22px;color:#c89b3c;opacity:.12;transition:opacity .6s,text-shadow .6s;margin:0;padding:0;background:transparent}
.rune:focus-visible,.rune:hover{opacity:1;text-shadow:0 0 12px #f3c96a}.rune.found{opacity:1;color:#f3c96a;text-shadow:0 0 14px #f3c96a;cursor:default}
.rune.shim{animation:runeshim 2.4s ease}@keyframes runeshim{40%{opacity:.75;text-shadow:0 0 16px #ffe29a}}
.hiddenrune{display:none!important}
.hero-page{position:relative;overflow:hidden}
.candle{position:absolute;left:4%;bottom:6%;width:44px;height:84px;background:none;border:0;padding:0;cursor:pointer;z-index:7}
.candle .wax{position:absolute;bottom:0;left:13px;width:18px;height:48px;background:linear-gradient(90deg,#d9c79c,#fff3d2,#cdb886);border-radius:3px 3px 2px 2px;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.candle .flame{position:absolute;bottom:48px;left:15px;width:14px;height:24px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff8d0,#ffc24a 45%,rgba(255,120,30,.0) 75%);opacity:.35;filter:blur(.3px)}
.candle.lit .flame,.candle:hover .flame{opacity:1;box-shadow:0 0 30px 12px rgba(255,190,80,.45)}
.magic .candle .flame{animation:flame 1.6s ease-in-out infinite alternate}@keyframes flame{50%{transform:scale(1.08,.94) translateX(.5px)}100%{transform:scale(.94,1.06) translateX(-.5px)}}
.r-candle{left:calc(4% + 46px);bottom:calc(6% + 30px)}
.vwrap{position:relative;overflow:hidden;border-radius:6px}.vwrap .vignette{margin:0;will-change:transform;transition:transform .6s ease-out}
.vwrap{margin:10px 0 14px}.r-margin{right:2px;bottom:2px;opacity:.05}.margin-rune:hover .r-margin{opacity:.55}
.r-charm{right:6px;bottom:6px}.skill:not(.open) .r-charm{visibility:hidden}
#results{position:relative}.r-quiz{position:relative;display:inline-grid;margin:6px auto;opacity:.25}
/* ===== v4 ambient magic (only when .magic) ===== */
.fireflies{position:fixed;inset:0;pointer-events:none;z-index:2}
@keyframes bob{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(10px,-34px,0) rotate(7deg)}}
.shoot{position:absolute;top:12%;left:70%;width:120px;height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));border-radius:2px;opacity:0;transform:rotate(-25deg);animation:shoot 9s ease-in infinite 2s;pointer-events:none;z-index:3}
@keyframes shoot{0%,88%{opacity:0;transform:translate3d(0,0,0) rotate(160deg)}90%{opacity:1}100%{opacity:0;transform:translate3d(-260px,120px,0) rotate(160deg)}}
.vwrap.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,240,200,.28) 50%,transparent 60%);transform:translateX(-100%);animation:sweep 11s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.magic .chapter h2{background:linear-gradient(100deg,#123a40 0 42%,#c89b3c 48%,#f6dc9c 50%,#c89b3c 52%,#123a40 58% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gild 9s ease-in-out infinite}
.magic .chapter h2 .rune{-webkit-text-fill-color:initial}
@keyframes gild{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.magic .ribbons a{animation:sway 6s ease-in-out infinite;transform-origin:top center}.magic .ribbons a:nth-child(2n){animation-delay:-2s}.magic .ribbons a:nth-child(3n){animation-delay:-4s}
@keyframes sway{0%,100%{rotate:-1.2deg}50%{rotate:1.2deg}}
.quillwrite{position:absolute;right:20px;top:14px;width:200px;height:56px;pointer-events:none;z-index:6;opacity:0}
.quillwrite svg{width:100%;height:100%}.quillwrite path{fill:none;stroke:#6e1f24;stroke-width:2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;opacity:.55}
.quillwrite img{position:absolute;width:40px;top:-30px;left:0;mix-blend-mode:multiply}
.quillwrite.go{animation:qfade 5s ease forwards}.quillwrite.go path{animation:qdraw 2.6s ease-in-out forwards}.quillwrite.go img{animation:qmove 2.6s ease-in-out forwards}
@keyframes qdraw{to{stroke-dashoffset:0}}@keyframes qmove{0%{transform:translate(0,30px)}25%{transform:translate(50px,0)}50%{transform:translate(100px,24px)}75%{transform:translate(150px,0)}100%{transform:translate(185px,10px)}}
@keyframes qfade{0%{opacity:0}8%,70%{opacity:1}100%{opacity:0}}
.bloom{position:fixed;left:0;top:0;width:60px;height:60px;border-radius:50%;pointer-events:none;z-index:180;background:radial-gradient(circle,rgba(110,31,36,.35),rgba(18,58,64,.15) 50%,transparent 70%);animation:bloom 1.1s ease-out forwards}
@keyframes bloom{from{opacity:.9;scale:.2}to{opacity:0;scale:1.8}}
.trail{position:fixed;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#ffe29a;box-shadow:0 0 8px #f3c96a;pointer-events:none;z-index:175;opacity:0}
.trail.on{animation:trail .7s ease-out forwards}@keyframes trail{from{opacity:.9;scale:1}to{opacity:0;scale:.2}}
.paused *{animation-play-state:paused!important}
@media(max-width:999px){.shoot{width:80px}}
@media(prefers-reduced-motion:reduce){.floaters,.fireflies,.shoot,.quillwrite,.bloom,.trail{display:none!important}.vwrap::after,.chapter h2,.ribbons a,.rune.shim,.candle .flame{animation:none!important}}
.vignette{aspect-ratio:4/3;object-fit:cover;height:auto}

/* ===== v7: night sky, new magic ===== */
body{background:radial-gradient(ellipse at 50% 0%,#2a1f5c 0,#141038 38%,#070818 75%,#03030c 100%) fixed;background-color:#05061a}
#sky{position:fixed;inset:0;pointer-events:none;z-index:0}
.aurora{position:fixed;inset:-10% -10% auto -10%;height:60vh;pointer-events:none;z-index:0;opacity:.85;
 background:radial-gradient(ellipse 40% 30% at 25% 40%,rgba(80,200,170,.28),transparent 70%),radial-gradient(ellipse 35% 25% at 70% 30%,rgba(150,90,220,.25),transparent 70%),radial-gradient(ellipse 30% 20% at 50% 60%,rgba(240,190,110,.12),transparent 70%)}
.magic .aurora{animation:aur 26s ease-in-out infinite alternate}
@keyframes aur{0%{transform:translate3d(-3%,0,0) scaleY(1)}50%{transform:translate3d(2%,2%,0) scaleY(1.15)}100%{transform:translate3d(4%,-1%,0) scaleY(.92)}}
.candleglow{background:radial-gradient(circle at 12% 88%,rgba(255,190,90,.14),transparent 38%),radial-gradient(circle at 88% 92%,rgba(255,200,110,.08),transparent 32%)}
.top{background:linear-gradient(#0d0b2a,#0a0920)}
#cover{background:radial-gradient(ellipse at 50% 30%,#2a1f5c,#070818 70%)}
.cover-title{background:radial-gradient(ellipse at center,rgba(8,6,20,.78) 0,rgba(8,6,20,.55) 45%,transparent 72%);border-radius:50%}
.vignette{mix-blend-mode:normal;box-shadow:0 0 0 1px #c89b3c66,0 6px 18px rgba(30,15,0,.35)}
.lantern-wrap{float:right;position:relative;margin:10px 0 0 10px}.lantern-wrap .spot{float:none;margin:0;display:block}
.lantern-wrap.kindled .spot{filter:drop-shadow(0 0 14px rgba(255,200,90,.9)) brightness(1.08);opacity:1}
.r-lantern{left:50%;top:48%;transform:translate(-50%,-50%);opacity:.5}
/* page glow on turn */
.book.glowturn::before{animation:bglow 1.1s ease-out}
@keyframes bglow{0%{box-shadow:0 0 0 2px #c89b3c66}40%{box-shadow:0 0 60px 14px rgba(243,201,106,.55),0 0 0 2px #f3d995}100%{box-shadow:0 0 0 2px #c89b3c66}}
/* hover shimmer on cards and buttons */
.magic .card,.magic .btn{position:relative;overflow:hidden}
.magic .card::after,.magic .btn::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,236,180,.35) 50%,transparent 65%);transform:translateX(-120%);transition:none}
.magic .card:hover::after,.magic .btn:hover::after{transform:translateX(120%);transition:transform .9s ease}
/* glowing spell-ink headings */
.magic .chapter.inking h2,.magic .chapter.inking h1{animation:inkglow 2.2s ease both}
@keyframes inkglow{0%{opacity:0;filter:blur(6px) drop-shadow(0 0 0 transparent)}45%{opacity:1;filter:blur(0) drop-shadow(0 0 10px rgba(243,201,106,.9))}100%{filter:drop-shadow(0 0 0 transparent)}}
/* rune-count HUD glow pulse */
.magic #runes-hud{animation:hud 5s ease-in-out infinite}@keyframes hud{50%{box-shadow:0 0 14px rgba(200,155,60,.45)}}
/* gold motes rising from page gutter (desktop) */
.gutter-motes{position:absolute;left:50%;top:0;bottom:0;width:0;z-index:6;pointer-events:none}
.gutter-motes i{position:absolute;bottom:4%;left:-2px;width:4px;height:4px;border-radius:50%;background:#ffe29a;box-shadow:0 0 8px #f3c96a;opacity:0;animation:gm 7s linear infinite}
@keyframes gm{0%{opacity:0;transform:translate3d(0,0,0)}10%{opacity:.9}100%{opacity:0;transform:translate3d(var(--dx,12px),-70vh,0)}}
@media(prefers-reduced-motion:reduce){.aurora,.book.glowturn::before,#runes-hud,.chapter h1,.chapter h2,.gutter-motes{animation:none!important}.gutter-motes{display:none}.card::after,.btn::after{display:none}}
/* v8 review scroll */
.reviews{margin:18px 0 8px;text-align:center}
.rv-h{font-size:1.15rem;margin:0 0 8px;color:var(--wine)}
.rv-stage{display:flex;align-items:center;gap:6px;justify-content:center}
.rv-arrow{flex:0 0 34px;height:34px;border-radius:50%;border:1px solid var(--gold);background:#10292e;color:#f3d98b;font-size:1.3rem;line-height:1;cursor:pointer}
.rv-scroll{position:relative;flex:1;max-width:460px;padding:14px 0;outline:none}
.rv-scroll:focus-visible{box-shadow:0 0 0 3px var(--gold);border-radius:8px}
.rv-rod{position:absolute;left:-10px;right:-10px;height:16px;border-radius:8px;z-index:2;
 background:linear-gradient(#f7e2a0,#c89b3c 45%,#7a5418);box-shadow:0 3px 6px rgba(0,0,0,.45);transition:transform .9s cubic-bezier(.6,.05,.3,1)}
.rv-rod::before,.rv-rod::after{content:"";position:absolute;top:-3px;width:12px;height:22px;border-radius:6px;background:radial-gradient(circle at 40% 35%,#fff3c4,#b8862d 60%,#5e3e10)}
.rv-rod::before{left:-6px}.rv-rod::after{right:-6px}
.rv-rod.top{top:6px}.rv-rod.bot{bottom:6px}
.rv-paper{position:relative;margin:0 4px;min-height:190px;display:flex;align-items:center;justify-content:center;
 background:radial-gradient(ellipse at 50% 50%,#fbf1d6 0,#f0dcae 70%,#dcc08a 100%);box-shadow:inset 0 0 22px rgba(120,80,30,.35);
 clip-path:inset(50% 0 50% 0);transition:clip-path .9s cubic-bezier(.6,.05,.3,1)}
.rv-scroll:not(.open) .rv-rod.top{transform:translateY(calc(95px - 8px))}
.rv-scroll:not(.open) .rv-rod.bot{transform:translateY(calc(-95px + 8px))}
.rv-scroll.open .rv-paper{clip-path:inset(0 0 0 0)}
.rv-text{margin:0;padding:18px 20px;font-size:1rem;line-height:1.45;color:var(--ink)}
.rv-text p{margin:0 0 8px;font-style:italic}
.rv-text footer{font-size:.85rem;color:var(--muted);font-variant:small-caps;letter-spacing:.03em}
.rv-text p,.rv-text footer{opacity:0;filter:blur(3px);transition:opacity .8s .7s,filter .8s .7s}
.rv-scroll.open .rv-text p,.rv-scroll.open .rv-text footer{opacity:1;filter:none}
.rv-scroll.closing .rv-text p,.rv-scroll.closing .rv-text footer{transition-delay:0s;transition-duration:.3s}
.rv-ctrl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.rv-pause{font:inherit;font-size:.85rem;padding:4px 10px;border-radius:14px;border:1px solid var(--gold);background:transparent;color:var(--ink);cursor:pointer;min-height:32px}
.rv-dots{display:flex;gap:4px}
.rv-dot{width:24px;height:24px;border:0;background:transparent;cursor:pointer;position:relative}
.rv-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px solid #8a6a2a;background:#e9d6a6}
.rv-dot[aria-current=true]::after{background:var(--gold);box-shadow:0 0 6px #f3d98b}
.rv-sum{margin:6px 0 0;font-size:.9rem}.rv-sum a{color:var(--brand)}
.reviews.rm .rv-paper{clip-path:none;transition:opacity .4s}
.reviews.rm .rv-rod{transition:none;transform:none!important}
.reviews.rm .rv-scroll:not(.open) .rv-paper{opacity:0}
.reviews.rm .rv-text p,.reviews.rm .rv-text footer{transition:none;opacity:1;filter:none}
@media (max-width:480px){.rv-paper{min-height:230px}.rv-scroll:not(.open) .rv-rod.top{transform:translateY(107px)}.rv-scroll:not(.open) .rv-rod.bot{transform:translateY(-107px)}.rv-text{padding:16px 12px;font-size:.95rem}.rv-arrow{flex-basis:30px;height:30px}}
.reviews .rv-text footer{background:none!important;border:0!important;padding:0!important;margin:0!important;box-shadow:none!important;min-height:0!important;display:block;color:var(--muted)}
.rv-paper{background:linear-gradient(90deg,rgba(120,80,30,.18),transparent 8%,transparent 92%,rgba(120,80,30,.18)),radial-gradient(ellipse at 50% 50%,#fbf1d6 0,#f0dcae 70%,#d9b97e 100%)}
.rv-paper{min-height:190px!important;max-height:360px}
.rv-text{max-height:360px;overflow-y:auto;white-space:pre-line;scrollbar-width:thin;scrollbar-color:#c89b3c transparent}
.rv-scroll:not(.open) .rv-rod.top{transform:translateY(var(--half,87px))!important}
.rv-scroll:not(.open) .rv-rod.bot{transform:translateY(calc(-1 * var(--half,87px)))!important}
.reviews.rm .rv-rod{transform:none!important}
.rv-dots{flex-wrap:wrap;justify-content:center;max-width:100%}
.rv-dot{width:14px;height:24px}.rv-dot::after{inset:7px 2px}
@media (max-width:480px){.rv-paper,.rv-text{max-height:420px}}
.rv-dots{display:none}.rv-count{font-size:.9rem;color:var(--muted);min-width:4em}
/* v9 awards spell */
.awards{position:relative;margin:20px 0 14px;padding:22px 16px 14px;text-align:center;border-radius:14px;overflow:hidden;
 background:radial-gradient(ellipse at 50% 0,#1d3f48 0,#10262c 60%,#0a1a1f 100%);border:2px solid var(--gold);
 box-shadow:0 0 0 4px #0c2025,0 0 0 6px #a57a2e,0 8px 24px rgba(0,0,0,.45),inset 0 0 30px rgba(200,155,60,.25)}
.awards::before,.awards::after{content:"❦";position:absolute;top:6px;color:#c89b3c;font-size:18px}.awards::before{left:10px}.awards::after{right:10px;transform:scaleX(-1)}
.aw-spell{position:absolute;inset:0;pointer-events:none}
.aw-circle{position:absolute;left:50%;top:10px;width:220px;height:220px;margin-left:-110px;opacity:0;fill:none;stroke:#f0c869;stroke-width:1.2;filter:drop-shadow(0 0 6px #f0c869)}
.aw-circle text{fill:#f0c869;stroke:none;font-size:11px;letter-spacing:2px}
.aw-flash{position:absolute;left:50%;top:120px;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff6d0;opacity:0;box-shadow:0 0 60px 40px rgba(255,230,150,.8)}
.aw-sparks{position:absolute;inset:0;width:100%;height:100%}
.aw-h{position:relative;margin:0 0 12px;font-size:1.35rem;color:#f3d98b;text-shadow:0 0 10px rgba(240,200,105,.6);letter-spacing:.02em}
.aw-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aw{display:flex;align-items:center;gap:12px;text-align:left;padding:8px 12px;border-radius:10px;background:linear-gradient(90deg,rgba(200,155,60,.16),rgba(200,155,60,.04));border:1px solid rgba(200,155,60,.45)}
.aw-t{color:#f6e6b8;font-size:1.02rem;line-height:1.3}
.aw-seal{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#3a2508;font-size:1.05rem;
 background:radial-gradient(circle at 35% 30%,#fff1b8,#d9a93f 55%,#8a5e18);box-shadow:0 0 0 2px #7a5418,0 0 10px rgba(240,200,105,.6)}
.aw-seal sup{font-size:.55em}
.aw-first{padding:12px 14px;background:linear-gradient(90deg,rgba(240,200,105,.32),rgba(200,155,60,.08));border:1.5px solid #f0c869;box-shadow:0 0 16px rgba(240,200,105,.35)}
.aw-first .aw-seal{flex-basis:58px;height:58px;font-size:1.4rem;box-shadow:0 0 0 2px #7a5418,0 0 0 5px rgba(240,200,105,.4),0 0 20px #f0c869}
.aw-first .aw-t{font-size:1.15rem;font-weight:600;color:#fff1c2}
.awards:not(.rm) .aw{opacity:0}
.awards.cast .aw-circle{animation:awCircle 2.2s ease-out forwards}
.awards.cast .aw-flash{animation:awFlash .9s .35s ease-out}
.awards.cast .aw{animation:awInk 1s forwards}
.awards.cast .aw:nth-child(1){animation-delay:.9s}.awards.cast .aw:nth-child(2){animation:awGrand 1.3s 1.5s forwards}.awards.cast .aw:nth-child(3){animation-delay:2.2s}
.awards.done .aw-h,.awards.done .aw{opacity:1;animation:none}
@keyframes awCircle{0%{opacity:0;transform:scale(.3) rotate(-90deg)}30%{opacity:1}75%{opacity:.8;transform:scale(1) rotate(30deg)}100%{opacity:0;transform:scale(1.15) rotate(45deg)}}
@keyframes awFlash{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(3)}}
@keyframes awInk{0%{opacity:0;filter:blur(6px) brightness(2);transform:translateY(6px)}60%{opacity:1;filter:blur(0) brightness(1.4)}100%{opacity:1;filter:none;transform:none}}
@keyframes awGrand{0%{opacity:0;transform:scale(.85);filter:blur(6px) brightness(2.2)}55%{opacity:1;transform:scale(1.05);filter:brightness(1.6);box-shadow:0 0 40px #f0c869}100%{opacity:1;transform:none;filter:none}}
@media (max-width:480px){.awards{padding:20px 10px 12px}.aw-h{font-size:1.15rem}.aw-t{font-size:.95rem}.aw-first .aw-t{font-size:1.02rem}.aw{gap:10px;padding:8px}}
.awards .aw-h{color:#f3d98b!important;-webkit-text-fill-color:#f3d98b!important;background:none!important}
.aw-seal{display:flex;align-items:center;justify-content:center}

/* v16 magic pen trigger */
.awards .aw-h{opacity:1!important;animation:none!important;filter:none!important}
.aw-penrow{position:relative;display:flex;flex-direction:column;align-items:center;margin:0 0 10px}
.aw-pen{position:relative;width:220px;max-width:70vw;height:64px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:12px;transform-origin:8% 55%}
.aw-pen svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.aw-pen:focus-visible{outline:2px solid #f3d98b;outline-offset:4px}
.aw-tipglow{transform-origin:193px 30px;animation:awTip 2.4s ease-in-out infinite}
@keyframes awTip{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.aw-hint{margin:2px 0 0;font-size:.95rem;font-style:italic;color:#f3d98b;text-shadow:0 0 8px rgba(240,200,105,.5);animation:awHint 2.4s ease-in-out infinite}
@keyframes awHint{50%{opacity:.6}}
.awards.armed .aw-list{background:linear-gradient(100deg,transparent 30%,rgba(243,217,139,.12) 50%,transparent 70%);background-size:250% 100%;animation:awShim 3.5s linear infinite;border-radius:10px}
@keyframes awShim{from{background-position:120% 0}to{background-position:-120% 0}}
.awards.swish .aw-pen{animation:awSwish .65s cubic-bezier(.3,.1,.3,1)}
@keyframes awSwish{0%{transform:translate(0,0) rotate(0)}15%{transform:translate(-10px,8px) rotate(12deg)}35%{transform:translate(6px,4px) rotate(8deg)}55%{transform:translate(-4px,10px) rotate(14deg)}75%{transform:translate(8px,6px) rotate(9deg)}100%{transform:translate(0,0) rotate(0)}}
.aw-spark{position:absolute;right:2%;top:46%;width:10px;height:10px;border-radius:50%;background:#fff6d0;box-shadow:0 0 12px 6px #f3c95a;opacity:0;pointer-events:none}
.awards.swish .aw-spark{animation:awSpark .9s .3s ease-out}
@keyframes awSpark{0%{opacity:1;transform:translate(0,0) scale(1)}60%{opacity:1;transform:translate(-90px,70px) scale(1.6)}100%{opacity:0;transform:translate(-110px,95px) scale(.4)}}
.awards.casting .aw-hint{opacity:0;transition:opacity .3s}
.awards.done .aw-hint{display:block}
.awards.rm .aw-tipglow,.awards.rm .aw-hint{animation:none}
@media (max-width:480px){.aw-pen{width:190px;height:56px}}
.aw-ink{display:block;width:300px;max-width:84vw;height:40px;margin:2px auto 0;overflow:visible}
.aw-ink text{font:italic 600 24px "Brush Script MT","Segoe Script","Apple Chancery",cursive;fill:#f3d98b;fill-opacity:0;stroke:#f3d98b;stroke-width:.8;stroke-dasharray:900;stroke-dashoffset:900;filter:drop-shadow(0 0 5px rgba(243,201,90,.8))}
.awards.armed .aw-ink text{opacity:.0}
.awards.casting .aw-ink text,.awards.cast .aw-ink text{opacity:1;animation:awInkText 1.4s ease-out forwards}
@keyframes awInkText{70%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
.awards.rm .aw-ink text{animation:none;stroke-dashoffset:0;fill-opacity:1;opacity:1}
/* v11 runes: a touch easier */
.rune{opacity:.22;min-width:48px;min-height:48px}
.rune.shim{animation:runeshim2 2.6s ease}@keyframes runeshim2{40%{opacity:.85;text-shadow:0 0 18px #ffe29a,0 0 4px #fff}}
.r-margin{opacity:.15}.margin-rune:hover .r-margin{opacity:.6}.r-quiz{opacity:.4}
.candle .flame{opacity:.6;box-shadow:0 0 14px 4px rgba(255,190,80,.35)}
.lantern-wrap:not(.kindled) .spot{animation:lanternCall 3.2s ease-in-out infinite}
@keyframes lanternCall{50%{filter:drop-shadow(0 0 10px rgba(255,200,90,.75)) brightness(1.06)}}
.rune-whisper{margin:10px 0 0;font-size:.82rem;font-style:italic;color:#8a6a3a;opacity:.6;letter-spacing:.02em}
.rune-hint-line{opacity:.7;font-style:italic}
.reward-btn{margin-left:8px;font:inherit;font-size:.85rem;padding:3px 10px;border-radius:12px;border:1px solid #c89b3c;background:#c89b3c;color:#1a1206;cursor:pointer;min-height:32px}
/* reward */
.reward{position:relative;margin:14px auto 16px;max-width:560px;padding:20px 18px 14px;border-radius:12px;color:#2b1d10;overflow:hidden;
 background:radial-gradient(ellipse at 50% 40%,#fff6dc 0,#f1ddaa 65%,#d8b878 100%);border:2px solid #c89b3c;box-shadow:0 0 0 4px #0d2328,0 0 0 6px #a57a2e,0 0 40px rgba(243,201,106,.55);animation:rwIn 1.2s ease both}
.rw-glow{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,230,150,.35),transparent 30%);animation:rwSpin 9s linear infinite;pointer-events:none}
.rw-k{position:relative;margin:0;font-variant:small-caps;letter-spacing:.12em;color:#6e4a18}
.rw-word{position:relative;margin:4px 0 10px;font-size:clamp(2rem,9vw,3.2rem);font-weight:700;line-height:1.1;color:#b8862d;-webkit-user-select:text;user-select:text;
 background:linear-gradient(180deg,#fff1b0,#d9a93f 50%,#8a5e18);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px rgba(240,190,80,.7));word-break:break-word}
.rw-word::selection{-webkit-text-fill-color:#2b1d10;background:#f3d98b}
.rw-msg{position:relative;margin:0 0 8px;font-size:1.05rem;line-height:1.4}
.rw-fine{position:relative;margin:0;font-size:.78rem;color:#5c4630}
@keyframes rwIn{0%{opacity:0;transform:scale(.85);filter:brightness(2)}60%{opacity:1;filter:brightness(1.3)}100%{transform:none;filter:none}}
@keyframes rwSpin{to{transform:rotate(360deg)}}
#secret-room{overflow-y:auto}.sr-inner{max-height:none}
@media (max-width:480px){.sr-inner img{max-height:30vh;object-fit:cover}.sr-text{padding:12px 14px}}
@media(prefers-reduced-motion:reduce){.reward,.rw-glow,.lantern-wrap .spot{animation:none!important}}
/* v12 constant sparkle on unfound runes */
.rune:not(.found){animation:runePulse 2.6s ease-in-out infinite;will-change:opacity}
.rune:not(.found)::before,.rune:not(.found)::after{content:"•";position:absolute;font-size:10px;line-height:1;color:#fff3c4;text-shadow:0 0 6px #f3c96a;pointer-events:none;opacity:0;animation:runeGlint 2.6s ease-in-out infinite;will-change:transform,opacity}
.rune:not(.found)::before{top:4px;right:6px}
.rune:not(.found)::after{bottom:6px;left:5px;font-size:8px;animation-delay:-1.3s}
@keyframes runePulse{0%,100%{opacity:.22;text-shadow:0 0 2px rgba(243,201,106,.3)}50%{opacity:1;color:#f6d27a;text-shadow:0 0 10px #f3c96a,0 0 22px rgba(255,220,140,.8)}}
@keyframes runeGlint{0%,32%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}68%{opacity:0;transform:scale(.4) rotate(90deg)}}
.rune.shim:not(.found){animation:runePulse 2.6s ease-in-out infinite}
.rune[data-rune=candle]{--d:-.4s;--t:2.6s}.rune[data-rune=margin]{--d:-1.1s;--t:2.9s}.rune[data-rune=charm]{--d:-1.9s;--t:2.3s}.rune[data-rune=quiz]{--d:-.8s;--t:2.7s}.rune[data-rune=lantern]{--d:-2.2s;--t:2.4s}
.rune:not(.found),.rune.shim:not(.found){animation:runePulse var(--t,2.6s) ease-in-out var(--d,0s) infinite}
.rune:not(.found)::before{font-size:13px;animation:runeGlint var(--t,2.6s) ease-in-out var(--d,0s) infinite}
.rune:not(.found)::after{font-size:9px;animation:runeGlint var(--t,2.6s) ease-in-out calc(var(--d,0s) - .35s) infinite}
.margin-rune:hover .r-margin{opacity:1}
@media(prefers-reduced-motion:reduce){.rune:not(.found){animation:none!important;opacity:.45;text-shadow:0 0 8px rgba(243,201,106,.7)}.rune:not(.found)::before,.rune:not(.found)::after{display:none}}
/* v13 larger, glittering, throbbing runes */
.rune{font-size:38px;min-width:52px;min-height:52px}
.rune:not(.found){background:radial-gradient(circle,rgba(255,220,140,.35) 0,rgba(243,201,106,.12) 40%,transparent 68%)}
@keyframes runePulse{0%,100%{opacity:.3;scale:1;text-shadow:0 0 3px rgba(243,201,106,.35)}50%{opacity:1;scale:1.15;color:#f6d27a;text-shadow:0 0 12px #f3c96a,0 0 26px rgba(255,220,140,.85)}}
/* faint rotating halo ring (replaces the v12 corner glint on ::after) */
.rune:not(.found)::after{content:"";top:50%;left:50%;bottom:auto;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;font-size:0;text-shadow:none;
 background:conic-gradient(from 0deg,transparent 0 10%,rgba(255,226,150,.55) 18%,transparent 28% 45%,rgba(190,160,255,.35) 55%,transparent 65% 78%,rgba(120,220,210,.35) 88%,transparent 96%);
 -webkit-mask:radial-gradient(circle,transparent 52%,#000 56%,#000 64%,transparent 68%);mask:radial-gradient(circle,transparent 52%,#000 56%,#000 64%,transparent 68%);
 opacity:.75;animation:runeRing 9s linear infinite;z-index:-1}
@keyframes runeRing{to{transform:rotate(360deg)}}
.rune .gl{position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;pointer-events:none;opacity:0;will-change:transform,opacity;
 animation:glit 2.4s ease-out infinite;background:#f3c96a;box-shadow:0 0 5px 1px #f3c96a}
.rune .gl.w{width:5px;height:5px;margin:-2.5px;background:#fffbe8;box-shadow:0 0 6px 2px #fff1c0}
.rune .gl.v{background:#d9c4ff;box-shadow:0 0 6px 2px #b79cff}
.rune .gl.t{background:#bff3ec;box-shadow:0 0 6px 2px #7fdcd0}
@keyframes glit{0%{opacity:0;transform:rotate(var(--a)) translateX(var(--r0)) scale(.3)}20%{opacity:1;transform:rotate(calc(var(--a) + 25deg)) translateX(calc(var(--r0) + 6px)) scale(1.3)}60%{opacity:.8;transform:rotate(calc(var(--a) + 70deg)) translateX(calc((var(--r0) + var(--r1)) / 2)) scale(.9)}100%{opacity:0;transform:rotate(calc(var(--a) + 110deg)) translateX(var(--r1)) scale(.2)}}
.rune.found .gl,.rune.found::after{display:none}
.rune.found{background:none;scale:1}
@media(prefers-reduced-motion:reduce){.rune .gl{display:none}.rune:not(.found){opacity:.5;scale:1}.rune:not(.found)::after{animation:none!important;display:none}}
.card details.bio{margin:6px 0 10px}.card details.bio summary{cursor:pointer;color:var(--wine);font-weight:600}.card details.bio p{margin:6px 0 0;line-height:1.5}
/* v15 2025 award */
.aw-past-list{margin-top:10px}
.aw-past{justify-content:center;background:rgba(200,155,60,.07);border-style:dashed}
.aw-past .aw-seal{flex-basis:38px;height:38px;font-size:.8rem}
.awards.cast .aw-past-list .aw:nth-child(1){animation:awInk 1s 2.8s forwards}
/* v17 quest layer (original art; storybook only) */
#book{box-shadow:0 0 0 6px #3b3a38,0 0 0 9px #57534c,0 0 0 11px #2a2926,0 20px 60px rgba(0,0,0,.6),0 0 90px rgba(255,150,60,.12)!important}
.torch{position:absolute;top:38%;width:14px;height:46px;background:linear-gradient(#6b4a2a,#3a2614);border-radius:3px;pointer-events:none;z-index:3}
.torch-l{left:-26px}.torch-r{right:-26px}
.torch i{position:absolute;left:50%;top:-22px;width:18px;height:26px;margin-left:-9px;border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 70%,#fff3c4,#ffb347 45%,rgba(255,110,40,0) 70%);filter:blur(.5px);animation:torchF 1.4s ease-in-out infinite alternate;box-shadow:0 0 30px 12px rgba(255,150,60,.25)}
@keyframes torchF{0%{transform:scale(1,1)}50%{transform:scale(.9,1.12) translateX(1px)}100%{transform:scale(1.05,.95) translateX(-1px)}}
@media (max-width:900px){.torch{display:none}}
.sheet{border:1px solid #8a6a32!important;background:linear-gradient(rgba(255,250,236,.94),rgba(246,234,206,.94))!important;position:relative}
.sheet::before{content:"";position:absolute;inset:5px;border:1px dashed rgba(138,106,50,.45);border-radius:inherit;pointer-events:none}
.sheet-tag{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#7a2b2b}
.sheet-approaches{border-left:3px solid #b8924a;padding-left:8px}
.quest-intro{font-style:italic;color:#5a4320;margin:0 0 10px}
#results.rolling{visibility:hidden}
.d20-roll{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0;color:#5a4320;font-style:italic}
.d20-roll svg{width:84px;height:84px;animation:d20 1.2s cubic-bezier(.2,.7,.3,1)}
.d-out{fill:#24435a;stroke:#d9b25a;stroke-width:2}.d-in{fill:#2f587a;stroke:#d9b25a;stroke-width:1.2}.d-edge{stroke:#d9b25a;stroke-width:1;fill:none;opacity:.7}.d20-roll text{fill:#f3d98b;font-size:20px}
@keyframes d20{0%{transform:translateY(-30px) rotate(0) scale(.6)}60%{transform:translateY(4px) rotate(600deg) scale(1.05)}100%{transform:translateY(0) rotate(720deg) scale(1)}}
.quest-map{margin:14px 0 0;padding:10px;border-radius:10px;background:radial-gradient(ellipse at center,#f6e7c1,#e3c98f 75%,#c9a96a);box-shadow:inset 0 0 30px rgba(90,60,20,.45);border:1px solid #9a7a40}
.quest-map figcaption{font-variant:small-caps;letter-spacing:.1em;color:#5a3a1a;text-align:center;margin-bottom:4px}
.quest-map svg{width:100%;height:auto;display:block}
.qm-road{fill:none;stroke:#7a4a1a;stroke-width:2.5;stroke-dasharray:6 6}
.qm-pt{fill:#7a2b2b;stroke:#f6e7c1;stroke-width:2}.quest-map a:hover .qm-pt,.quest-map a:focus .qm-pt{fill:#c8962e}
.quest-map text{font-size:13px;fill:#3a2410;font-style:italic}.quest-map .qm-land{font-weight:700;font-style:normal}.qm-n{font-size:11px}
.qm-tower{fill:#4a3a2a;stroke:#2a1a0a}.qm-mtn{fill:none;stroke:#8a6a3a;stroke-width:1.5;opacity:.6}
.quest-map a:focus{outline:none}.quest-map a:focus-visible text{text-decoration:underline}
.skill.scroll{border:0!important;border-top:10px solid #b8924a!important;border-bottom:10px solid #b8924a!important;border-radius:4px!important;background:linear-gradient(#f9efd6,#f2e2bc)!important;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.skill.scroll .cat::before{content:"Spell scroll · ";color:#7a2b2b}
@media (prefers-reduced-motion:reduce){.torch i,.d20-roll svg{animation:none}}
@media (max-width:480px){.quest-map text{font-size:17px}.quest-map .qm-n{font-size:14px}}
/* v18 original art pass */
.quest-map{background:#e9d6a8 url(img/map-bg.webp) center/cover!important}
.sheet{background-image:linear-gradient(rgba(255,250,236,.94),rgba(246,234,206,.94)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M2 38V14Q2 2 14 2h24' fill='none' stroke='%23b8924a' stroke-width='2'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23b8924a'/%3E%3Cpath d='M14 8h12M8 14v12' stroke='%23b8924a' stroke-width='1'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:0 0,6px 6px!important}
.sheet::after{content:"";position:absolute;right:6px;bottom:6px;width:40px;height:40px;pointer-events:none;transform:rotate(180deg);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M2 38V14Q2 2 14 2h24' fill='none' stroke='%23b8924a' stroke-width='2'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='%23b8924a'/%3E%3Cpath d='M14 8h12M8 14v12' stroke='%23b8924a' stroke-width='1'/%3E%3C/svg%3E") no-repeat}
.aw-penrow::before,.aw-penrow::after{content:"";position:absolute;top:14px;width:70px;height:36px;opacity:.75;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 36'%3E%3Cpath d='M68 18C50 18 46 4 34 6S26 26 16 22 6 10 2 16' fill='none' stroke='%23f3d98b' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='6' r='1.6' fill='%23f3d98b'/%3E%3Cpath d='M16 22l-2 4 4-1z' fill='%23f3d98b'/%3E%3C/svg%3E") no-repeat center/contain}
.aw-penrow::before{left:calc(50% - 190px)}.aw-penrow::after{right:calc(50% - 190px);transform:scaleX(-1)}
@media (max-width:480px){.aw-penrow::before,.aw-penrow::after{width:44px;top:10px}.aw-penrow::before{left:2px}.aw-penrow::after{right:2px}}
/* v19 motion pass (all gated by .mo; .mo-rm = simple fades) */
.mo-fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9999}
#sky,#motes{will-change:transform}
/* page turns: smoother curve, gold edge glow and shadow sweep */
.mo .leaf.fwd{animation:turnF 1s cubic-bezier(.65,.02,.25,1) forwards}.mo .leaf.back{animation:turnB 1s cubic-bezier(.65,.02,.25,1) forwards}
.mo .leaf>div::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(255,226,154,0) 60%,rgba(255,226,154,.55) 98%,rgba(255,250,230,.9));opacity:0;animation:leafGlow 1s ease-in-out}
@keyframes leafGlow{30%,70%{opacity:1}}
.mo .chapter.inking .page{animation:pageIn .7s cubic-bezier(.2,.7,.2,1)}@keyframes pageIn{from{opacity:.6;filter:brightness(1.25)}to{opacity:1;filter:none}}
/* hovers & focus */
.mo .card,.mo .btn,.mo .quest-map a,.mo .rune{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,filter .35s}
.mo .card:hover,.mo .card:focus-within{transform:translateY(-3px);box-shadow:0 12px 28px rgba(60,35,5,.28),0 0 0 1px rgba(200,155,60,.55),0 0 22px rgba(243,201,90,.25)}
.mo .btn{position:relative;overflow:hidden}
.mo .btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,248,220,.55),transparent);transform:skewX(-20deg) translateX(0);opacity:0;pointer-events:none}
.mo .btn:hover::after,.mo .btn:focus-visible::after{opacity:1;animation:btnSheen .8s ease}
@keyframes btnSheen{from{transform:skewX(-20deg) translateX(0)}to{transform:skewX(-20deg) translateX(420%)}}
.mo .btn:hover,.mo .btn:focus-visible{box-shadow:0 0 18px rgba(243,201,90,.55);transform:translateY(-1px)}
.mo .quest-map a .qm-pt,.mo .quest-map a .qm-tower{transition:transform .35s cubic-bezier(.2,.8,.2,1),filter .35s;transform-box:fill-box;transform-origin:center}
.mo .quest-map a:hover .qm-pt,.mo .quest-map a:focus .qm-pt,.mo .quest-map a:hover .qm-tower,.mo .quest-map a:focus .qm-tower{transform:scale(1.35);filter:drop-shadow(0 0 4px #f3c95a)}
.quest-map svg{will-change:transform}
/* pen spell: brighter ink glow, nib flare, light bloom per award */
.mo .awards.casting .aw-pen svg{filter:drop-shadow(0 0 10px rgba(243,201,90,.9)) drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.mo .aw-ink text{filter:drop-shadow(0 0 6px rgba(243,201,90,.95)) drop-shadow(0 0 16px rgba(243,170,60,.6))}
.mo .awards.cast .aw{position:relative;animation:awRise 1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes awRise{from{opacity:0;transform:translateY(10px) scale(.97);filter:brightness(2) blur(2px)}60%{opacity:1;filter:brightness(1.4)}to{opacity:1;transform:none;filter:none}}
.mo .awards.cast .aw:nth-child(2){animation:awRise 1.3s cubic-bezier(.2,.8,.2,1) 1.5s forwards}
.mo .awards.cast .aw::after{content:"";position:absolute;inset:-10px;border-radius:14px;pointer-events:none;background:radial-gradient(ellipse at 15% 50%,rgba(255,240,190,.75),rgba(243,201,90,.25) 40%,transparent 70%);opacity:0;animation:awBloom 1.2s ease-out forwards}
.mo .awards.cast .aw-list .aw:nth-child(1)::after{animation-delay:1.05s}.mo .awards.cast .aw-list .aw:nth-child(2)::after{animation-delay:1.65s}.mo .awards.cast .aw-list .aw:nth-child(3)::after{animation-delay:2.35s}.mo .awards.cast .aw-past::after{animation-delay:2.95s!important}
.mo .awards.cast .aw-past{animation-delay:2.8s!important}
@keyframes awBloom{0%{opacity:0;transform:scale(.9)}25%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
.mo .awards.done .aw::after{display:none}
/* d20: tumble, squash on landing, impact ring */
.mo .d20-roll svg{animation:d20b 1.2s cubic-bezier(.25,.8,.3,1);filter:drop-shadow(0 0 10px rgba(243,201,90,.6))}
@keyframes d20b{0%{transform:translate3d(-60px,-50px,0) rotate(-200deg) scale(.5);opacity:0}45%{transform:translate3d(10px,6px,0) rotate(420deg) scale(1.05);opacity:1}62%{transform:translate3d(0,-10px,0) rotate(640deg) scale(1)}80%{transform:translate3d(0,2px,0) rotate(712deg) scale(1.08,.92)}100%{transform:none}}
.mo .d20-roll{position:relative}
.mo .d20-roll::after{content:"";position:absolute;top:42px;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:2px solid rgba(243,201,90,.9);opacity:0;animation:d20ring .6s .95s ease-out}
@keyframes d20ring{0%{opacity:1;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
/* reviews scroll: eased unroll + gold sweep */
.mo .rv-rod{transition-timing-function:cubic-bezier(.65,.02,.25,1)!important}
.mo .rv-scroll.open .rv-paper{position:relative}
.mo .rv-scroll.open .rv-paper::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 35%,rgba(255,236,180,.5) 50%,transparent 65%);background-size:100% 300%;animation:rvSweep 1.2s .3s ease-out both}
@keyframes rvSweep{from{background-position:0 100%;opacity:1}to{background-position:0 0;opacity:0}}
/* torches: layered flame + rising embers */
.mo .torch i::before,.mo .torch i::after{content:"";position:absolute;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#ffd27a;box-shadow:0 0 6px #ffb347;opacity:0;animation:ember 2.2s linear infinite}
.mo .torch i::after{animation-delay:-1.1s;margin-left:2px}
@keyframes ember{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:1}100%{transform:translate3d(6px,-60px,0);opacity:0}}
.mo .torch i{animation:torchF2 1.6s ease-in-out infinite}
@keyframes torchF2{0%{transform:scale(1,1);opacity:.95}20%{transform:scale(.92,1.1) translateX(1px);opacity:1}45%{transform:scale(1.06,.94) translateX(-1px);opacity:.88}70%{transform:scale(.96,1.14);opacity:1}100%{transform:scale(1,1);opacity:.95}}
/* runes: brighter, higher contrast, larger, and a found-a-spell burst */
.rune:not(.found){opacity:.62!important;color:#ffd977!important;font-size:26px;text-shadow:0 0 6px #000,0 0 10px rgba(255,214,110,.95),0 0 22px rgba(255,190,80,.6)!important;background:radial-gradient(circle,rgba(20,14,6,.38) 0,rgba(20,14,6,.18) 45%,transparent 70%)!important}
.rune.hiddenrune{opacity:0!important}
.mo .rune:not(.found):hover,.mo .rune:not(.found):focus-visible{opacity:1!important;transform:scale(1.2)}
.rune.found{opacity:1!important;color:#fff1b8!important;text-shadow:0 0 8px #fff,0 0 18px #f3c96a,0 0 34px rgba(243,170,60,.8)!important;background:radial-gradient(circle,rgba(255,226,150,.35),transparent 70%)!important;box-shadow:0 0 0 2px rgba(243,201,90,.8),0 0 16px rgba(243,201,90,.6)}
.rune.rune-burst{animation:runeFound 1.2s cubic-bezier(.2,.8,.2,1)!important}
@keyframes runeFound{0%{transform:scale(1)}20%{transform:scale(1.6);filter:brightness(2)}100%{transform:scale(1);filter:none}}
.rune.rune-burst::before,.rune.rune-burst::after{content:""!important;position:absolute;inset:-6px;border-radius:50%;opacity:0;animation:runeRing 1s ease-out!important;font-size:0}
.rune.rune-burst::before{border:2px solid #f3d98b;box-shadow:0 0 18px #f3c95a}
.rune.rune-burst::after{background:conic-gradient(from 0deg,transparent 0 70%,rgba(255,250,220,.9) 80%,transparent 90%);animation:runeShim 1s ease-out!important}
@keyframes runeRing{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2.6)}}
@keyframes runeShim{0%{opacity:1;transform:rotate(0) scale(1.2)}100%{opacity:0;transform:rotate(300deg) scale(1.8)}}
.mo-rm .rune.found{transition:box-shadow .6s,text-shadow .6s}
.mo-rm .rune.rune-burst,.mo-rm .rune.rune-burst::before,.mo-rm .rune.rune-burst::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.mo-fx{display:none}.torch i::before,.torch i::after{display:none}}
.mo .awards.cast .aw-list .aw:nth-child(1){animation-delay:.9s}.mo .awards.cast .aw-list .aw:nth-child(3){animation-delay:2.2s}

.rune.found{border-radius:50%!important;aspect-ratio:1/1}
.vwrap.margin-rune{overflow:visible}.vwrap.margin-rune .vignette{border-radius:6px}
.rune{font-family:"Segoe UI Historic","Noto Sans Runic","Apple Symbols",Cardo,serif}

/* v20 quest launcher (game CSS lazy-loads) */
.qg-launch{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
#qg-open{font:inherit;font-size:1.05rem;padding:12px 18px;min-height:48px;border-radius:24px;border:2px solid var(--gold);background:linear-gradient(#1f5a5e,#123a40);color:#fbeec8;cursor:pointer;box-shadow:0 0 14px rgba(200,155,60,.35)}
#qg-open:hover,#qg-open:focus-visible{box-shadow:0 0 0 3px #f3d98b,0 0 22px rgba(243,217,139,.6)}
.qg-bonus{color:#f3d98b}
/* staff portraits framed like the wax seals */
#team-grid .avatar.has-portrait{position:relative;width:104px;height:104px;overflow:hidden;padding:0}
#team-grid .avatar .portrait{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:50%;object-fit:cover;filter:sepia(.18) saturate(.92) contrast(1.02);box-shadow:inset 0 0 12px rgba(60,30,10,.5)}
#team-grid .avatar.has-portrait::after{content:"";position:absolute;inset:7px;border-radius:50%;box-shadow:inset 0 0 14px rgba(70,35,10,.45);pointer-events:none}