/* NIGHTGLASS · the Doors of Durin. Slate stone, ithildin line-work, wax seals.
   A deliberately single-dark design: the site is a door seen at night. */
:root{
  color-scheme:dark;
  --stone:#1c2024;      /* page */
  --hewn:#252a2f;       /* raised surfaces */
  --deep:#15181b;       /* evidence slab */
  --seam:#3a4249;       /* rules and borders */
  --seam-soft:#2e353b;
  --vellum:#ddd6c6;     /* text */
  --dim:#a39e92;        /* secondary text */
  --faint:#6f746f;      /* captions */
  --ithil:#9ec3d6;      /* accent: moon-letters */
  --ithil-dim:#6e8f9f;
  --wax:#a8432f;        /* seals, flags */
  --wax-light:#cf6a50;
  --moss:#86a476;       /* correct */
  --display:"IM Fell English SC","IM Fell English",Georgia,serif;
  --speech:"IM Fell English",Georgia,serif;
  --body:"Alegreya Sans","Gill Sans","Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{background:var(--stone)}
body{margin:0;background:var(--stone);color:var(--vellum);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:5px 5px}
a{color:var(--ithil);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--vellum)}
h1,h2,h3{margin:0;font-weight:400;line-height:1.15;text-wrap:balance}
p{margin:0 0 1em}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
code,pre{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--ithil);outline-offset:3px}
::selection{background:rgba(158,195,214,.3)}
.label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---------- masthead */
.masthead{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:baseline;gap:28px;padding:14px var(--gutter);
  background:rgba(28,32,36,.95);border-bottom:1px solid var(--seam)}
.masthead .name{font:22px var(--display);letter-spacing:.18em;color:var(--vellum);text-decoration:none}
.masthead nav{display:flex;gap:22px}
.masthead nav a{font-size:15px;color:var(--dim);text-decoration:none}
.masthead nav a:hover,.masthead nav a.on{color:var(--ithil)}
.masthead .tally{margin-left:auto;font:14px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;text-decoration:none}
.masthead .tally:hover{color:var(--ithil)}
.masthead .tally b{color:var(--vellum);font-weight:500}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:1px solid var(--ithil-dim);color:var(--ithil);
  font:16px var(--body);text-decoration:none;background:transparent;border-radius:2px}
.btn:hover{background:rgba(158,195,214,.08);color:var(--vellum);border-color:var(--ithil)}
.btn.solid{background:var(--ithil);color:var(--stone);border-color:var(--ithil);font-weight:500}
.btn.solid:hover{background:var(--vellum);border-color:var(--vellum)}
.btn.quiet{border-color:transparent;color:var(--dim);padding-inline:6px}
.btn.quiet:hover{color:var(--ithil);background:none}

/* ---------- title page */
.titlepage{display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;
  max-width:1180px;margin:0 auto;padding-block:clamp(36px,6vw,80px) 30px;padding-inline:var(--gutter)}
.wizard{width:100%;height:auto;max-width:320px}
.wizard *{fill:none;stroke:var(--ithil);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wizard .star{fill:var(--ithil);stroke:none}
.draw .wizard path,.draw .wizard circle{stroke-dasharray:900;stroke-dashoffset:900;animation:trace 3.2s cubic-bezier(.45,.05,.25,1) forwards}
.draw .wizard .late{animation-delay:1.2s}
@keyframes trace{to{stroke-dashoffset:0}}
.titlepage h1{font:clamp(46px,8vw,100px)/.95 var(--display);letter-spacing:.08em;color:var(--vellum)}
.titlepage .sub{font:italic clamp(19px,2.2vw,24px)/1.4 var(--speech);color:var(--dim);margin:16px 0 24px;max-width:38ch}
.speech{border-left:1px solid var(--ithil-dim);padding:4px 0 4px 18px;margin:0 0 26px;max-width:62ch}
.speech p{font:italic 19px/1.55 var(--speech);color:var(--vellum);margin:0 0 8px}
.speech footer{font:14px var(--body);color:var(--faint)}
.speech footer b{font-weight:500;color:var(--ithil)}
.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- contents */
.contents{max-width:980px;margin:0 auto;padding-block:20px 90px;padding-inline:var(--gutter)}
.contents h2{font:32px var(--display);letter-spacing:.1em;text-align:center;margin-bottom:6px}
.contents .intro{text-align:center;color:var(--dim);max-width:62ch;margin:0 auto 20px}
.part{margin-top:30px}
.part h3{font:italic 19px var(--speech);color:var(--ithil);margin-bottom:4px;padding-bottom:6px;border-bottom:1px solid var(--seam)}
.part .note{font-size:14px;color:var(--faint);margin:6px 0 4px}
.entry{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 16px;align-items:baseline;padding:14px 4px;text-decoration:none;color:var(--vellum);
  border-bottom:1px dotted var(--seam-soft)}
.entry:hover{background:rgba(158,195,214,.04);color:var(--vellum)}
.entry .num{font:26px var(--display);color:var(--dim);text-align:right}
.entry .t{display:flex;align-items:baseline;gap:10px;min-width:0}
.entry .t strong{font:24px/1.2 var(--display);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .t i{flex:1;border-bottom:1px dotted var(--seam);transform:translateY(-6px);min-width:20px}
.entry .pts{font:15px var(--mono);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.entry .meta{grid-column:2 / 4;font-size:15px;color:var(--dim)}
.entry .meta span+span::before{content:"·";margin:0 8px;color:var(--faint)}
.entry.done .num,.entry.done .pts{color:var(--wax-light)}
.entry .prog{display:inline-block;width:60px;height:3px;background:var(--seam);vertical-align:middle}
.entry .prog i{display:block;height:100%;background:var(--ithil)}

/* ---------- chapter: an open book */
.chapter{max-width:1500px;margin:0 auto;padding-block:30px 90px;padding-inline:var(--gutter)}
.chead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 26px;align-items:end;padding-bottom:22px;border-bottom:1px solid var(--seam)}
.chead .roman{grid-row:1 / 3;font:clamp(64px,9vw,120px)/.8 var(--display);color:var(--ithil)}
.chead h1{font:clamp(34px,5vw,58px)/1.02 var(--display);letter-spacing:.03em}
.chead .facts{grid-column:1 / 3;display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:15px;color:var(--dim)}
.chead .facts a{color:var(--dim);font-family:var(--mono);font-size:13px}
.chead .facts a:hover{color:var(--ithil)}
.book{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-top:28px;align-items:start}
.leaf{min-width:0;padding-right:clamp(18px,3vw,40px);border-right:1px solid var(--seam)}
.slab{min-width:0;padding-left:clamp(18px,3vw,40px);position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px)}
.prologue p{font:19px/1.65 var(--speech);color:var(--vellum)}
.prologue p:first-child::first-letter{font:64px/.8 var(--display);float:left;margin:6px 10px 0 0;color:var(--ithil)}
.guide{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;margin:26px 0;padding:16px 0;border-block:1px solid var(--seam-soft)}
.medal{width:52px;height:52px;border:1px solid var(--ithil-dim);border-radius:50%;display:grid;place-items:center;font:24px var(--display);color:var(--ithil)}
.guide p{font:italic 18px/1.5 var(--speech);margin:0 0 4px}
.guide small{color:var(--faint);font-size:14px}
.guide small b{color:var(--ithil);font-weight:500}
.section-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;margin:34px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--seam)}
.section-title .label{min-width:0;overflow-wrap:anywhere}
.section-title h2{font:22px var(--display);letter-spacing:.08em}
.brief{max-width:65ch}
.brief code,.writeup code,.q-text code{font-size:.85em;background:var(--hewn);padding:1px 5px;border-radius:2px;color:var(--ithil)}

/* questions */
.q{position:relative;padding:18px 0 18px 46px;border-bottom:1px dotted var(--seam)}
.q-n{position:absolute;left:0;top:17px;font:22px var(--display);color:var(--dim);width:34px;text-align:right}
.q-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;font-size:14px;color:var(--faint)}
.q-meta .pts{font-family:var(--mono);font-variant-numeric:tabular-nums}
.q form{display:flex;gap:8px;margin-top:10px}
.q input{flex:1;min-width:0;padding:9px 12px;background:var(--deep);border:1px solid var(--seam);border-radius:2px;font:15px var(--mono);color:var(--vellum)}
.q input::placeholder{color:#5c625f}
.q input:focus{outline:0;border-color:var(--ithil)}
.linkish{color:var(--dim);font-size:14px;text-decoration:underline dotted;text-underline-offset:3px}
.linkish:hover{color:var(--ithil)}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--dim)}
.hint{margin-top:10px;padding:6px 0 6px 14px;border-left:1px solid var(--ithil-dim);font:italic 16px/1.5 var(--speech);color:var(--dim)}
.q.wrong input{border-color:var(--wax-light);animation:shake .4s}
@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.q.solved{padding-right:62px}
.q.solved .q-n{color:var(--moss)}
.q .answer{margin-top:8px;font:15px var(--mono);color:var(--moss);word-break:break-all}
.seal{position:absolute;right:0;top:14px;width:44px;height:44px;border-radius:50%;background:var(--wax);display:grid;place-items:center;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),inset 0 -3px 6px rgba(0,0,0,.25);color:#f2d7cc;font:20px var(--display);transform:rotate(-8deg)}
.seal.pressed{animation:press .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes press{0%{transform:rotate(-30deg) scale(2);opacity:0}100%{transform:rotate(-8deg) scale(1);opacity:1}}

/* evidence slab */
.files{border:1px solid var(--seam);background:var(--deep)}
.file{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:9px 14px;border-top:1px solid var(--seam-soft);font:14px var(--mono);cursor:pointer;color:var(--dim)}
.file:first-child{border-top:0}
.file:hover{color:var(--vellum);background:rgba(255,255,255,.02)}
.file.on{color:var(--ithil);background:rgba(158,195,214,.06)}
.file .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file small{color:var(--faint);font-variant-numeric:tabular-nums}
.file a{color:var(--faint);text-decoration:none;padding:0 4px}
.file a:hover{color:var(--ithil)}
.file.bundle{color:var(--vellum);cursor:default}
.viewer{margin-top:16px;border:1px solid var(--seam);background:var(--deep)}
.vbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--seam)}
.vbar .fname{font:14px var(--mono);color:var(--ithil);margin-right:auto}
.vbar input[type=search]{width:min(320px,100%);padding:6px 10px;background:var(--stone);border:1px solid var(--seam);font:14px var(--mono);border-radius:2px}
.vbar input:focus{outline:0;border-color:var(--ithil)}
.vbar label{font-size:13px;color:var(--dim);display:flex;gap:5px;align-items:center}
.vbar small{font:13px var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.code{max-height:68vh;overflow:auto;padding:8px 0;font:12.5px/1.6 var(--mono);color:#c9c4b7}
.ln{display:flex;white-space:pre}
.ln .no{flex:none;width:62px;padding-right:14px;text-align:right;color:#4a5155;user-select:none;font-variant-numeric:tabular-nums}
.code mark{background:rgba(158,195,214,.28);color:#fff}
.code .more{padding:12px 18px}
.code .tip{padding:2px 16px 8px;font:italic 14px var(--speech);color:var(--faint)}
.ln[data-line]{cursor:pointer}
.ln:hover{background:rgba(158,195,214,.05)}
.pretty{margin:4px 0 10px 62px;padding:10px 14px;border-left:1px solid var(--ithil-dim);background:var(--stone);color:var(--vellum);font:12.5px/1.55 var(--mono);white-space:pre-wrap;word-break:break-all}
.empty{padding:36px 18px;text-align:center;color:var(--faint);font-size:15px}
.reading{margin:6px 0 0;padding-left:18px;font-size:15px}
.reading li{margin:6px 0;color:var(--dim)}
.reading small{color:var(--faint)}
.evidence-media{margin:14px 0 0;padding:12px;border:1px solid var(--seam);background:var(--deep)}
.evidence-media img{display:block;width:100%;max-height:260px;object-fit:contain;image-rendering:pixelated}
.evidence-media audio{display:block;width:100%}
.evidence-media figcaption,.evidence-media p{margin:8px 0 0;color:var(--dim);font-size:14px}

/* debrief */
.flagline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:6px 0 22px;padding:14px 16px;border:1px solid var(--wax);background:rgba(168,67,47,.08)}
.flagline code{font:16px var(--mono);color:var(--wax-light);word-break:break-all}
.epilogue p{font:18px/1.65 var(--speech)}
.writeup{max-width:70ch}
.writeup strong{color:var(--ithil);font-weight:500}
.locked{color:var(--faint);font:italic 17px var(--speech)}

/* ---------- the door: chapter complete */
.door{position:fixed;inset:0;z-index:100;background:var(--stone);display:grid;place-items:center;overflow:auto;padding:40px var(--gutter)}
.door .halves{position:fixed;inset:0;display:grid;grid-template-columns:1fr 1fr;pointer-events:none;z-index:2}
.door .halves div{background:#23282d;border:1px solid var(--seam);background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:5px 5px}
.door .halves div:first-child{transform-origin:left center;animation:open 1.6s 1s cubic-bezier(.7,0,.3,1) forwards}
.door .halves div:last-child{transform-origin:right center;animation:open2 1.6s 1s cubic-bezier(.7,0,.3,1) forwards}
@keyframes open{to{transform:perspective(1200px) rotateY(80deg);opacity:0}}
@keyframes open2{to{transform:perspective(1200px) rotateY(-80deg);opacity:0}}
.door .arch{position:fixed;left:50%;top:50%;width:min(460px,80vw);transform:translate(-50%,-50%);z-index:3;animation:fade .8s 1.2s forwards}
.door .arch *{fill:none;stroke:var(--ithil);stroke-width:1.2;stroke-dasharray:1400;stroke-dashoffset:1400;animation:trace 1.1s forwards}
@keyframes fade{to{opacity:0}}
.door .inner{position:relative;max-width:640px;text-align:center;opacity:0;animation:rise 1s 2.2s forwards}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.big-seal{width:104px;height:104px;margin:0 auto 20px;border-radius:50%;background:var(--wax);display:grid;place-items:center;color:#f2d7cc;
  font:42px var(--display);box-shadow:inset 0 0 0 5px rgba(0,0,0,.18),inset 0 -6px 12px rgba(0,0,0,.3);transform:rotate(-8deg)}
.door h2{font:clamp(34px,6vw,54px) var(--display);margin:6px 0 16px}
.door .flag{display:inline-block;font:16px var(--mono);color:var(--wax-light);border:1px solid var(--wax);padding:8px 14px;margin-bottom:24px;word-break:break-all}
.door .epilogue{text-align:left}
.door .cta{justify-content:center;margin-top:26px}

/* ---------- about */
.page{max-width:760px;margin:0 auto;padding-block:50px 90px;padding-inline:var(--gutter)}
.page h1{font:44px var(--display);margin-bottom:18px}
.page h2{font:24px var(--display);margin:34px 0 10px}
.page p,.page li{max-width:65ch}

#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:10px 18px;background:var(--hewn);
  border:1px solid var(--seam);font-size:15px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:200;max-width:calc(100vw - 32px)}
#toast.show{opacity:1}
#toast.error{border-color:var(--wax);color:#f0cbbf}
.loading{padding:80px 20px;text-align:center;font:italic 20px var(--speech);color:var(--faint)}


/* ---------- the delving: dungeon map */
:root{--torch:#d9a45b}
.viewswitch{display:flex;justify-content:center;gap:6px;margin:6px 0 18px}
.chip{padding:5px 12px;border:1px solid var(--seam);border-radius:2px;font-size:14px;color:var(--dim);background:transparent}
.chip:hover{color:var(--vellum);border-color:var(--ithil-dim)}
.chip.on{color:var(--stone);background:var(--ithil);border-color:var(--ithil)}
.worldmap{position:relative;max-width:1480px;margin:0 auto;border:1px solid var(--seam);background:#101418;box-shadow:0 30px 80px -30px #000,0 0 0 6px var(--stone),0 0 0 7px var(--seam-soft)}
.contents:has(.worldmap){max-width:1560px}
.worldmap{aspect-ratio:1600/1040;overflow:hidden}
.worldmap svg{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:grab}
.worldmap.zoomed svg{touch-action:none}
.worldmap.dragging svg{cursor:grabbing}
.worldmap.dragging .site{pointer-events:none}
.mapzoom{position:absolute;right:14px;top:14px;display:flex;flex-direction:column;z-index:2;border:1px solid var(--ithil-dim);background:rgba(15,19,23,.9)}
.mapzoom button{width:36px;height:34px;font:20px/1 var(--body);color:var(--ithil)}
.mapzoom button+button{border-top:1px solid var(--seam)}
.mapzoom button:hover{background:rgba(158,195,214,.12);color:var(--vellum)}
.legend .how{color:var(--faint);font-style:italic}
.map .sea{fill:#0f1317}
.map .shore path{fill:none;stroke:#9ec3d6;stroke-opacity:.05;stroke-linejoin:round}
.map .shore path[stroke-width="14"],.map .shore path[stroke-width="9.8"]{stroke-opacity:.09;stroke-dasharray:2 5}
.map .land{fill:#1d2226}
.map .coast{fill:none;stroke:#6e8f9f;stroke-width:1.6;stroke-linejoin:round}
.map .wv{fill:none;stroke:#6e8f9f;stroke-opacity:.45;stroke-width:1.2;stroke-linecap:round;animation:bob 5s ease-in-out var(--d) infinite}
@keyframes bob{50%{transform:translate(4px,-2px);stroke-opacity:.2}}
.map .river-bank{fill:none;stroke:#6e8f9f;stroke-linecap:round}
.map .river{fill:none;stroke:#0f1317;stroke-linecap:round}
.map .mtb{fill:#1d2226;stroke:#8aa9b8;stroke-width:1.3;stroke-linejoin:round}
.map .mth{fill:none;stroke:#6e8f9f;stroke-width:.9;stroke-opacity:.8}
.map .mts{fill:#c7d6dd;opacity:.75}
.map .tree{fill:#1b2226;stroke:#7c9a86;stroke-width:1.1;stroke-linejoin:round}
.map .hill{fill:none;stroke:#5f7a86;stroke-width:1.2}
.map .grass{fill:none;stroke:#4f6772;stroke-width:1}
.map .barrows path{fill:none;stroke:#5f7a86;stroke-width:1.3}
.map .road{fill:none;stroke:#8c8471;stroke-width:2.4;stroke-dasharray:9 6;stroke-linecap:round;opacity:.55}
.map .road.walked{stroke:var(--torch);opacity:1;filter:drop-shadow(0 0 4px rgba(224,173,98,.45));animation:march 1.8s linear infinite}
@keyframes march{to{stroke-dashoffset:-30}}
.map .trail{fill:none;stroke:#9ec3d6;stroke-width:1.8;stroke-dasharray:1.5 6;stroke-linecap:round;opacity:.6}
.map .trail.walked{stroke:var(--torch);opacity:.95}
.map .bridge path{fill:none;stroke:#a39e92;stroke-width:1.4}
.map .bridge .deck{fill:#1d2226;stroke:none}
.map .house{fill:#1a1f23;stroke:#8aa9b8;stroke-width:1.1;stroke-linejoin:round}
.map .boat{animation:rock 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.map .boat path{fill:#1d2226;stroke:#9ec3d6;stroke-width:1.2;stroke-linejoin:round}
@keyframes rock{25%{transform:rotate(4deg)}75%{transform:rotate(-4deg)}}
.map .serpent path{fill:none;stroke:#6e8f9f;stroke-width:2.2;stroke-linecap:round}
.map .realm{font:22px var(--display);letter-spacing:.5em;text-anchor:middle;fill:#8ea3ad;opacity:.55}
.map .sea-name{font-size:19px;fill:#6e8f9f}
.map .land-name{font:italic 21px var(--speech);text-anchor:middle;fill:#b9c9cf;opacity:.8}
.map .wood-name{font:italic 15px var(--speech);text-anchor:middle;fill:#7c9a86}
.map .fog rect{fill:#0b0e11;opacity:.58}
.map .clouds ellipse{animation:drift 70s linear infinite}
.map .clouds ellipse:nth-child(2){animation-duration:95s;animation-delay:-40s}
.map .clouds ellipse:nth-child(3){animation-duration:80s;animation-delay:-20s}
@keyframes drift{from{transform:translateX(-500px)}to{transform:translateX(1700px)}}

/* sites */
.map .site{cursor:pointer;outline:none;animation:ink .7s calc(var(--i) * 45ms + .15s) both}
.map .keyhole{fill:var(--torch);stroke:none;animation:flame 1.6s ease-in-out infinite alternate}
.map .redact{fill:#07090b;stroke:var(--wax-light);stroke-width:.8}
.map .clip{fill:none;stroke:var(--torch);stroke-width:1.4;stroke-linecap:round}
.map .wire{fill:none;stroke:#8aa9b8;stroke-width:1.1}
.map .spark{fill:#ffe2a8;offset-path:path('M-33 -19 Q-2 -6 19 -19');animation:wire 2.6s linear infinite;filter:drop-shadow(0 0 3px #e0ad62)}
@keyframes wire{from{offset-distance:0%}to{offset-distance:100%}}
.map .meteor{fill:none;stroke:#dfe8ec;stroke-width:1.6;stroke-linecap:round;opacity:0;animation:meteor 17s linear infinite}
.map .meteor.m2{animation-duration:23s;animation-delay:-9s}
@keyframes meteor{0%{opacity:0;transform:translate(1180px,40px)}1%{opacity:.9}5%{opacity:0;transform:translate(1010px,96px)}100%{opacity:0;transform:translate(1010px,96px)}}
.map .flock{animation:flock 46s linear infinite;animation-delay:-12s}
@keyframes flock{0%{transform:translate(-120px,560px)}55%{transform:translate(1720px,300px)}100%{transform:translate(1720px,300px)}}
.map .bird{fill:none;stroke:#b9c9cf;stroke-width:1.3;stroke-linecap:round;animation:birdflap .45s ease-in-out var(--d) infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes birdflap{to{transform:scaleY(.35)}}
.map .ff{fill:#e8f0a0;opacity:0;animation:firefly 5s ease-in-out var(--d) infinite;filter:drop-shadow(0 0 3px #e8f0a0)}
@keyframes firefly{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.9}50%{transform:translate(9px,-7px)}70%{opacity:.7}85%{opacity:0;transform:translate(-6px,-12px)}}
.map .site.fresh .wax{animation:stamp .7s cubic-bezier(.2,1.6,.4,1) .6s both}
@keyframes stamp{0%{transform:scale(3.2) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.map .site.fresh .lift{animation:glow 1.6s ease-out .5s}
@keyframes glow{0%{filter:none}30%{filter:drop-shadow(0 0 10px #e0ad62) brightness(1.6)}100%{filter:none}}
.map .site.fresh .halo{animation:flare 2s ease-out .5s both}
@keyframes flare{0%{opacity:0}25%{opacity:1}100%{opacity:.55}}
@keyframes ink{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.map .site .halo{fill:url(#torch);opacity:0;transition:opacity .3s}
.map .site.next .halo{opacity:1;animation:flicker 3.1s infinite;transform-box:fill-box;transform-origin:center}
.map .site.done .halo{opacity:.55}
.map .site:hover .halo,.map .site:focus-visible .halo{opacity:1}
.map .site .lift{transition:transform .25s cubic-bezier(.2,.8,.3,1.4)}
.map .site:hover .lift,.map .site:focus-visible .lift{transform:translateY(-4px) scale(1.08)}
.map .k{fill:#171b1f;stroke:var(--ithil);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.map .ln,.map .rune,.map .timber,.map .pipe,.map .refl{fill:none;stroke:var(--ithil);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.map .timber{stroke:#b08d5f;stroke-width:2.2}
.map .pipe{stroke:#8aa9b8;stroke-width:2.6}
.map .refl{stroke-opacity:.45}
.map .hatch{fill:none;stroke:var(--ithil-dim);stroke-width:1}
.map .dark{fill:#07090b;stroke:var(--ithil);stroke-width:1.2}
.map .win,.map .lamp,.map .glint{fill:var(--torch);stroke:none}
.map .flag,.map .flame{fill:var(--wax-light);stroke:none}
.map .flame{fill:var(--torch);animation:flame 1.1s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.map .snow{fill:#dfe8ec;stroke:none;opacity:.85}
.map .water{fill:#0f1317;stroke:var(--ithil);stroke-width:1.4}
.map .twinkle{fill:#dfe8ec;animation:twinkle 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.map .twinkle:nth-of-type(2n){animation-delay:-1.1s}
@keyframes twinkle{50%{opacity:.35;transform:scale(.7)}}
.map .moon{fill:#dfe8ec;opacity:.8}
.map .cloud{fill:#20262b;stroke:#b9c9cf;stroke-width:1.2}
.map .drift{animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:translateX(5px)}}
.map .key circle,.map .key path{fill:none;stroke:var(--torch);stroke-width:1.6;stroke-linecap:round}
.map .ring{fill:none;stroke:var(--torch);stroke-width:1.2;opacity:0;animation:pulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
.map .ring.r2{animation-delay:1.2s}
@keyframes pulse{0%{opacity:.8;transform:scale(.5)}100%{opacity:0;transform:scale(2.2)}}
.map .gear{animation:spin 8s linear infinite}
.map .gear circle,.map .gear path{fill:none;stroke:var(--torch);stroke-width:1.5}
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}
.map .hand{animation:spin 6s steps(12) infinite;transform-box:fill-box;transform-origin:50% 100%}
.map .smoke circle{fill:#8a918c;opacity:0;animation:smoke 4.2s ease-out infinite}
.map .smoke circle:nth-child(2){animation-delay:1.4s}
.map .smoke circle:nth-child(3){animation-delay:2.8s}
.map .cold path{stroke:#8a918c;stroke-dasharray:3 4;animation:rise-smoke 5s linear infinite}
@keyframes rise-smoke{to{stroke-dashoffset:-28}}
.map .mist path{fill:#c9d6dc;opacity:.16;animation:sway 7s ease-in-out infinite}
.map .mist path:nth-child(2){animation-duration:9s;animation-direction:reverse;opacity:.22}
.map .beam{fill:url(#torch);opacity:.9;animation:flame 2s ease-in-out infinite alternate}
.map .stripe{fill:var(--wax);stroke:none}
.map .bell{animation:swing 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes swing{25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}
.map .wave path{stroke-opacity:.7;animation:flame 1.2s ease-in-out infinite alternate}
.map .bird{animation:sway 3s ease-in-out infinite}
.map .echo path{animation:flame .9s ease-in-out infinite alternate}
.map .ember-door{fill:var(--torch);opacity:.55;animation:flame 1.4s ease-in-out infinite alternate}
.map .gold circle{fill:var(--torch)}
.map .letters path{fill:#2a2f33;stroke:var(--wax-light);stroke-width:1.1}
.map .site.far .k,.map .site.far .ln,.map .site.far .dark,.map .site.far .rune,.map .site.far .water{stroke:#56656c}
.map .site.far .hatch,.map .site.far .refl{stroke:#3b464b}
.map .site.far:hover .k,.map .site.far:hover .ln,.map .site.far:focus-visible .k{stroke:var(--ithil)}
.map .site.done .k,.map .site.done .ln,.map .site.done .rune{stroke:#e2bf85}
.map .tag .plate{fill:rgba(15,19,23,.86);stroke:var(--seam);stroke-width:1}
.map .site:hover .plate,.map .site:focus-visible .plate{stroke:var(--ithil)}
.map .site.next .plate{stroke:var(--torch)}
.map .site.done .plate{stroke:#6b5a3e}
.map .tag text{text-anchor:middle}
.map .ttl{font:16px var(--display);fill:var(--vellum);letter-spacing:.03em}
.map .ttl .num{fill:var(--ithil)}
.map .ttl .tale{font:italic 17px var(--speech)}
.map .site.done .ttl .num,.map .site.next .ttl .num{fill:var(--torch)}
.map .site.far .ttl{fill:#8c918d}
.map .sub{font:11px var(--mono);fill:var(--ithil);letter-spacing:.04em}
.map .wax{transform-box:fill-box;transform-origin:center}
.map .wax circle{fill:var(--wax);stroke:#6d2a1d;stroke-width:1.5}
.map .wax text{font:13px var(--body);text-anchor:middle;fill:#f2d7cc}
.map .walker{cursor:pointer;outline:none}
.map .walker .staff-glow{animation:flicker 2.3s infinite;transform-box:fill-box;transform-origin:center}
.map .walker .shadow{fill:#000;opacity:.45}
.map .walker .robe{fill:#39434b;stroke:#9ec3d6;stroke-width:1.1;stroke-linejoin:round}
.map .walker .fold{fill:none;stroke:#6e8f9f;stroke-width:.8}
.map .walker .beard{fill:#d7dde0;stroke:#9aa7ad;stroke-width:.5}
.map .walker .face{fill:#c9a489}
.map .walker .brim,.map .walker .cone{fill:#27324a;stroke:#9ec3d6;stroke-width:1.1;stroke-linejoin:round}
.map .walker .arm{fill:none;stroke:#39434b;stroke-width:3.2;stroke-linecap:round}
.map .walker .staff{stroke:#a07a4c;stroke-width:2;stroke-linecap:round}
.map .walker .staff-light{fill:#fff4d0;filter:drop-shadow(0 0 4px #ffd27a) drop-shadow(0 0 9px #e0ad62);animation:flame .8s ease-in-out infinite alternate}
.map .walker .stride{transform-box:fill-box;transform-origin:50% 100%;animation:idle 4s ease-in-out infinite}
@keyframes idle{50%{transform:rotate(-1.5deg)}}
.map .walker.walking .stride{animation:stride .42s ease-in-out infinite alternate}
@keyframes stride{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-2px) rotate(3deg)}}
.map .walker:hover .staff-glow,.map .walker:focus-visible .staff-glow{animation-duration:.8s}
.map .walker:focus-visible .robe{stroke:#fff}
.map .walker.hail .stride{animation:hail .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes hail{40%{transform:translateY(-7px) scale(1.12)}}
.map .beacon{fill:none;stroke:var(--torch);stroke-width:1.6;opacity:0;animation:pulse 2.8s ease-out infinite;transform-box:fill-box;transform-origin:center;pointer-events:none}
.map .beacon.b2{animation-delay:1.4s}
.map .road.preview{stroke:var(--ithil);opacity:1;stroke-width:3.2;filter:drop-shadow(0 0 5px rgba(158,195,214,.6));animation:march 1.2s linear infinite}
.map .trail.preview{stroke:var(--ithil);opacity:1;stroke-width:2.6;filter:drop-shadow(0 0 4px rgba(158,195,214,.6))}
.map .river-glint{fill:none;stroke:#cfe3ec;stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1.5 26;opacity:.55;animation:flow 6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-110}}
.map .moon-disc{fill:#e6eef1;filter:drop-shadow(0 0 10px rgba(223,232,236,.55))}
.map .crater{fill:#c3cfd5;opacity:.7}
.map .star-dot{fill:#dfe8ec;animation:twinkle 3.2s ease-in-out var(--d) infinite;transform-box:fill-box;transform-origin:center}
.map .cartouche .scroll{fill:#171b1f;stroke:var(--ithil-dim);stroke-width:1.4}
.map .cartouche .scroll-in{fill:none;stroke:var(--seam);stroke-width:1}
.map .map-name{font:25px var(--display);text-anchor:middle;fill:var(--vellum);letter-spacing:.12em}
.map .map-sub{font:italic 14px var(--speech);text-anchor:middle;fill:var(--dim)}
.map .compass circle{fill:none;stroke:#6e8f9f;stroke-width:1}
.map .compass circle:first-child{stroke-dasharray:2 4}
.map .compass .pt{fill:#9ec3d6;opacity:.85}
.map .compass .pt.dim{fill:#1d2226;stroke:#6e8f9f;stroke-width:.8;opacity:1}
.map .compass text{font:18px var(--display);text-anchor:middle;fill:var(--ithil)}
.map .scale path{stroke:#8ea3ad;stroke-width:1.2}
.map .scale .fill{fill:#8ea3ad;stroke:none}
.map .scale text{font:italic 14px var(--speech);text-anchor:middle;fill:#8ea3ad}
.map .frame{fill:none;stroke:var(--ithil-dim);stroke-width:1.6}
.map .frame.thin{stroke:var(--seam);stroke-width:1}
.map .tick{stroke:var(--ithil-dim);stroke-width:1}
.mapcard{position:absolute;z-index:3;width:300px;transform:translate(-50%,-100%);padding:12px 14px;background:rgba(21,24,27,.97);border:1px solid var(--ithil-dim);
  box-shadow:0 14px 40px rgba(0,0,0,.6);pointer-events:none;animation:rise .18s ease-out}
.mapcard.below{transform:translate(-50%,0)}
.mapcard strong{display:block;font:22px/1.15 var(--display);font-weight:400;margin:6px 0 4px}
.mapcard p{margin:0 0 6px;font-size:14.5px;line-height:1.45;color:var(--dim)}
.mapcard small{font:12px var(--mono);color:var(--ithil)}
.legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;margin:18px 0 0;padding:0;font-size:14px;color:var(--dim)}
.legend li{display:flex;align-items:center;gap:8px}
.legend span{display:inline-block}
.k-road{width:30px;border-top:2.4px dashed var(--torch)}
.k-trail{width:30px;border-top:2px dotted var(--ithil)}
.k-lantern{width:10px;height:10px;border-radius:50%;background:#ffe2a8;box-shadow:0 0 10px 4px rgba(224,173,98,.5)}
.k-seal{width:20px;height:20px;border-radius:50%;background:var(--wax);color:#f2d7cc;font-size:12px;text-align:center;line-height:20px}
.part h4.land{margin:22px 0 2px;font:20px var(--display);color:var(--vellum)}
.part h4.land small{font:12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-left:8px}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}23%{opacity:.82;transform:scale(.97)}41%{opacity:.95;transform:scale(1.02)}67%{opacity:.78;transform:scale(.98)}}
@keyframes flame{from{opacity:.7}to{opacity:1}}

/* chapter entry: descending into the hall */
.descend{animation:descend .75s cubic-bezier(.2,.7,.2,1)}
@keyframes descend{from{opacity:0;transform:translateY(-22px);filter:brightness(.25)}60%{filter:brightness(.8)}to{opacity:1;transform:none;filter:none}}

/* ---------- toolkit drawer */
.tk-btn{padding:4px 12px;font-size:14px}
kbd{font:12px var(--mono);border:1px solid var(--seam);padding:0 5px;border-radius:2px;color:var(--faint)}
.toolkit{position:fixed;top:0;right:0;bottom:0;z-index:40;width:min(420px,100vw);background:var(--hewn);border-left:1px solid var(--seam);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);animation:slidein .25s ease-out}
[hidden]{display:none!important}
@keyframes slidein{from{transform:translateX(30px);opacity:0}}
@media (min-width:1300px){body.tk-open .chapter{padding-right:calc(var(--gutter) + 420px)}}
.tk-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--seam)}
.tk-head strong{font:22px var(--display);font-weight:400;letter-spacing:.08em}
.x{font-size:22px;color:var(--dim);line-height:1;padding:0 4px}
.x:hover{color:var(--vellum)}
.tk-tabs{display:flex;border-bottom:1px solid var(--seam)}
.tk-tabs button{flex:1;padding:10px 6px;font-size:15px;color:var(--dim);border-bottom:2px solid transparent}
.tk-tabs button.on{color:var(--ithil);border-bottom-color:var(--ithil)}
.tk-body{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.tl{font-size:13px;color:var(--faint)}
.tk-body textarea,.tk-body input{width:100%;padding:8px 10px;background:var(--deep);border:1px solid var(--seam);border-radius:2px;color:var(--vellum);font:13px/1.5 var(--mono);resize:vertical}
.tk-body textarea:focus,.tk-body input:focus{outline:0;border-color:var(--ithil)}
.tk-body .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk-body .row input{width:auto}
.modes{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.modes .chip{font-size:13px;padding:4px 9px}
.out{margin:0;min-height:60px;max-height:44vh;overflow:auto;padding:10px;background:var(--deep);border:1px solid var(--seam-soft);font:12.5px/1.55 var(--mono);color:var(--vellum);white-space:pre-wrap;word-break:break-all}
.tip{font:italic 15px var(--speech);color:var(--faint);margin:0}
.pins{display:flex;flex-direction:column;gap:6px}
.pin{position:relative;padding:8px 28px 8px 10px;background:var(--deep);border-left:2px solid var(--wax)}
.pin .where{display:block;font:12px var(--mono);color:var(--ithil)}
.pin code{display:block;font:12px/1.45 var(--mono);color:var(--dim);word-break:break-all;max-height:5.8em;overflow:hidden}
.pin .x{position:absolute;top:4px;right:6px;font-size:18px}

/* hex viewer */
.file .n em{font:italic 11px var(--mono);color:var(--faint);margin-left:6px}
.hexsel{padding:8px 14px;border-bottom:1px solid var(--seam);font:12.5px/1.6 var(--mono);color:var(--dim);min-height:38px}
.hexsel b{color:var(--ithil);font-weight:500}
.hexsel code{color:var(--vellum);word-break:break-all}
.hexsel .asc{color:var(--torch)}
.hexwrap{max-height:62vh;overflow:auto;padding:8px 0;font:12px/1.65 var(--mono)}
.hr{display:flex;gap:10px;padding:0 10px;white-space:pre;width:max-content;min-width:100%}
.hr:hover{background:rgba(158,195,214,.04)}
.ho{color:#4a5155;user-select:none}
.hb i{font-style:normal;color:#c9c4b7;padding:0 2px;cursor:pointer;border-radius:2px}
.hb i:nth-child(8){margin-right:6px}
.vbar #hexgo{padding:6px 10px;background:var(--stone);border:1px solid var(--seam);font:14px var(--mono);border-radius:2px;color:var(--vellum)}
.vbar #hexgo:focus{outline:0;border-color:var(--ithil)}
.hb i.z{color:#4d5458}
.ha b{font-weight:400;color:var(--dim);cursor:pointer}
.hb i:hover,.ha b:hover{background:rgba(158,195,214,.18);color:#fff}
.hb i.hit,.ha b.hit{background:rgba(224,173,98,.25);color:#fff}
.hb i.sel,.ha b.sel{background:var(--ithil);color:var(--stone)}
.hexpager{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-top:1px solid var(--seam)}
.hexpager small{font:12px var(--mono);color:var(--faint)}
.tk-body select{padding:6px 8px;background:var(--deep);border:1px solid var(--seam);color:var(--vellum);font:13px var(--mono);border-radius:2px}
.tip.small{font-size:13px}
.tk-tabs{overflow-x:auto;scrollbar-width:none}
.tk-tabs button{flex:1 0 auto;padding:10px 9px;font-size:14px}

/* viewer: pins and wrapping */
.pinbtn{flex:none;width:22px;color:transparent;font-size:10px}
.ln:hover .pinbtn{color:var(--faint)}
.pinbtn:hover,.pinbtn:focus-visible{color:var(--wax-light)!important}
.code.wrap .ln{white-space:pre-wrap;word-break:break-all}
.ln .tx{min-width:0}

/* ---------- title art, training, side quests */
.art{margin:0;justify-self:center;max-width:340px;width:100%}
.art img{display:block;width:100%;height:auto;max-width:100%;border:1px solid var(--seam);filter:saturate(.85) contrast(1.02);
  box-shadow:0 0 0 6px var(--stone),0 0 0 7px var(--seam-soft)}
.art figcaption{margin-top:12px;font:italic 14px var(--speech);color:var(--faint);text-align:center}
.art figcaption a{color:var(--dim)}
.training-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;max-width:820px;margin:0 auto 24px;padding:16px 20px;
  border:1px solid var(--ithil-dim);text-decoration:none;color:var(--vellum);background:rgba(158,195,214,.04)}
.training-card:hover{background:rgba(158,195,214,.08);color:var(--vellum)}
.training-card .big{font:52px/1 var(--display);color:var(--ithil)}
.training-card strong{display:block;font:22px var(--display);font-weight:400}
.training-card span span{color:var(--dim);font-size:15px}
.training-card .pts{font:14px var(--mono);color:var(--dim);white-space:nowrap}
.howto{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.howto li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px dotted var(--seam);animation:rise .5s calc(var(--i) * 90ms) both}
.howto .step{font:26px/1 var(--display);color:var(--ithil);text-align:right}
.howto strong{font:20px var(--display);font-weight:400}
.howto p{margin:4px 0 0;color:var(--dim);font-size:16px}
.page.wide{max-width:980px}
.quests{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:22px}
.quest{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--seam);text-decoration:none;color:var(--vellum)}
.quest:hover{border-color:var(--ithil-dim);background:rgba(158,195,214,.04);color:var(--vellum)}
.quest strong{font:24px var(--display);font-weight:400}
.quest > span:not(.label){color:var(--dim);font-size:15px}
.quest small{margin-top:auto;color:var(--ithil);font:13px var(--mono)}
.side-group{margin-top:34px}
.side-group h2{padding-bottom:7px;border-bottom:1px solid var(--seam)}
.side-invite{margin:30px auto 0;text-align:center;color:var(--dim);font:italic 18px var(--speech)}

/* ---------- celebrations */
.fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:150}
.finale{position:fixed;inset:0;z-index:120;display:grid;place-items:center;overflow:auto;padding:40px var(--gutter);
  background:radial-gradient(ellipse at 50% 30%,#1d2833 0%,#0c0f12 70%);animation:fadein .8s both}
@keyframes fadein{from{opacity:0}}
.finale-sky{position:fixed;inset:0;pointer-events:none}
.finale-sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#dfe8ec;animation:twinkle2 3s ease-in-out var(--d) infinite}
@keyframes twinkle2{50%{opacity:.2}}
.finale-sky .moon{position:absolute;right:12%;top:10%;width:90px;height:90px;border-radius:50%;background:#dfe8ec;box-shadow:0 0 60px 10px rgba(223,232,236,.25),inset -18px -8px 0 0 #c3cfd5}
.finale-dragon{position:fixed;top:18%;left:0;width:min(560px,70vw);pointer-events:none;animation:finalefly 5.5s .6s cubic-bezier(.4,0,.6,1) both;z-index:1}
.finale-dragon .dragon-fly{position:static;width:100%;animation:none}
.finale-dragon .fire{position:absolute;right:-26%;top:27%;width:32%;height:18%;border-radius:50%;
  background:radial-gradient(ellipse at 0% 50%,#fff3c4 0%,#e0ad62 30%,#cf6a50 60%,transparent 72%);opacity:0;animation:breathfire 5.5s .6s both;filter:blur(2px)}
@keyframes finalefly{0%{transform:translate(-80vw,30vh) rotate(8deg)}45%{transform:translate(30vw,-4vh) rotate(-4deg)}100%{transform:translate(130vw,-20vh) rotate(-8deg)}}
@keyframes breathfire{0%,38%{opacity:0;transform:scaleX(.2)}46%{opacity:1;transform:scaleX(1.2)}58%{opacity:0;transform:scaleX(1.5)}100%{opacity:0}}
.finale .inner{position:relative;z-index:2;max-width:640px;text-align:center;animation:rise 1.2s 2.6s both}
.finale h2{font:clamp(38px,7vw,64px)/1.05 var(--display);margin:8px 0 18px}
.finale .speech-line{font:italic 20px/1.6 var(--speech);color:var(--vellum)}
.finale small{display:block;margin:-6px 0 24px;color:var(--ithil)}
.finale .cta{justify-content:center}
.finale .big-seal{background:radial-gradient(circle at 35% 30%,#3f7087,#1f3c4a);color:#dfe8ec;box-shadow:0 0 50px rgba(158,195,214,.35),inset 0 0 0 5px rgba(0,0,0,.2)}
.finished{display:flex;align-items:center;gap:18px;max-width:820px;margin:0 auto 22px;padding:14px 20px;border:1px solid var(--torch);text-decoration:none;color:var(--vellum);
  background:linear-gradient(90deg,rgba(224,173,98,.12),rgba(224,173,98,.02))}
.finished strong{display:block;font:22px var(--display);font-weight:400;color:var(--torch)}
.finished span span{color:var(--dim);font-size:15px}
.big-seal.small{width:52px;height:52px;margin:0;font-size:22px;flex:none}
.ending .namefield{display:block;width:min(420px,100%);margin:6px 0 18px;padding:10px 12px;background:var(--deep);border:1px solid var(--seam);color:var(--vellum);font:20px var(--display);border-radius:2px}
.ending .namefield:focus{outline:0;border-color:var(--ithil)}
.cert{display:block;width:100%;height:auto;margin:6px 0 20px;border:1px solid var(--seam);box-shadow:0 30px 70px -30px #000}
.sealrow{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.minis{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px dashed var(--seam);color:var(--faint);font:15px var(--display);text-decoration:none}
.minis.on{background:var(--wax);border:0;color:#f2d7cc}
.minis.side.on{background:#2e5566;color:#cfe3ec}
.savebox{display:block;width:100%;margin:6px 0 10px;padding:8px 10px;background:var(--deep);border:1px solid var(--seam);color:var(--vellum);font:12.5px/1.5 var(--mono);border-radius:2px;word-break:break-all}
#save-zone{flex-direction:column;align-items:stretch}

/* ---------- accounts, leaderboard, first blood */
.iconbtn{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--seam);border-radius:50%;color:var(--dim);align-self:center}
.iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover,.iconbtn.on{color:var(--ithil);border-color:var(--ithil-dim)}
.iconbtn.on{box-shadow:0 0 12px rgba(158,195,214,.25)}
.masthead .account{font-size:15px;color:var(--ithil);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;align-self:center}
.masthead .account.on,.masthead .account:hover{color:var(--vellum)}
.account .dot{width:7px;height:7px;border-radius:50%;background:var(--moss);box-shadow:0 0 6px var(--moss)}
.drop{display:inline-block;width:14px;height:18px;background:var(--wax-light);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;clip-path:path('M7 0 C7 0 14 9 14 12 A7 7 0 0 1 0 12 C0 9 7 0 7 0 Z');vertical-align:-3px}
.drop.small{width:9px;height:12px;clip-path:path('M4.5 0 C4.5 0 9 6 9 8 A4.5 4.5 0 0 1 0 8 C0 6 4.5 0 4.5 0 Z');vertical-align:-1px}
.chead .facts .blood{color:var(--wax-light);font-size:14px}
.bloodword{color:var(--wax-light);font-weight:500}
.firstblood{position:fixed;left:50%;top:84px;z-index:160;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:14px 24px;
  background:linear-gradient(90deg,#3a1510,#5b2016 50%,#3a1510);border:1px solid var(--wax-light);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(207,106,80,.35);
  animation:bloodin .6s cubic-bezier(.2,1.4,.4,1) both;max-width:calc(100vw - 32px)}
.firstblood strong{font:28px var(--display);letter-spacing:.14em;text-transform:uppercase;color:#ffd9cc}
.firstblood span:last-child{color:#f0cbbf;font-size:15px}
.firstblood .drop{width:22px;height:28px;clip-path:path('M11 0 C11 0 22 14 22 18 A11 11 0 0 1 0 18 C0 14 11 0 11 0 Z');animation:drip 1.2s ease-in-out infinite alternate}
.firstblood.out{animation:bloodout .8s ease-in both}
@keyframes bloodin{from{opacity:0;transform:translate(-50%,-30px) scale(.8)}}
@keyframes bloodout{to{opacity:0;transform:translate(-50%,-20px)}}
@keyframes drip{to{transform:translateY(3px) scaleY(1.08)}}
.statrow{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 24px}
.statrow div{flex:1 1 150px;padding:14px 16px;border:1px solid var(--seam);background:var(--deep)}
.statrow b{display:block;font:34px/1 var(--display);color:var(--torch);font-weight:400}
.statrow span{font-size:14px;color:var(--dim)}
.blood-own{color:var(--wax-light)}
.tabs{display:flex;gap:4px;margin:24px 0 0;border-bottom:1px solid var(--seam)}
.tabs button{padding:10px 16px;color:var(--dim);border-bottom:2px solid transparent;font-size:16px}
.tabs button.on{color:var(--ithil);border-bottom-color:var(--ithil)}
.authform{display:flex;flex-direction:column;gap:6px;max-width:420px;padding:18px 0}
.authform input{padding:10px 12px;background:var(--deep);border:1px solid var(--seam);border-radius:2px;color:var(--vellum);font:16px var(--body)}
.authform input:focus{outline:0;border-color:var(--ithil)}
.authform .btn{margin-top:12px;align-self:flex-start}
.authmsg{min-height:1.4em;margin:6px 0 0;color:var(--wax-light);font-size:15px}
.podium{display:flex;justify-content:center;align-items:flex-end;gap:12px;margin:26px 0 18px}
.podium .step{flex:0 1 220px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 12px 16px;border:1px solid var(--seam);background:var(--deep);text-align:center}
.podium .s1{padding-top:34px;border-color:var(--torch);background:linear-gradient(180deg,rgba(224,173,98,.12),var(--deep))}
.podium .s2{padding-top:24px}
.podium .me{outline:2px solid var(--ithil);outline-offset:2px}
.podium .medal{width:46px;height:46px;font-size:22px;color:var(--stone);border:0;background:#8a918c}
.podium .s1 .medal{background:var(--torch);box-shadow:0 0 20px rgba(224,173,98,.5)}
.podium .s3 .medal{background:#a8743f}
.podium strong{font:22px var(--display);font-weight:400;overflow-wrap:anywhere}
.podium span:last-child{font:13px var(--mono);color:var(--dim)}
.lbtable{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.lbtable th{text-align:left;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:8px 10px;border-bottom:1px solid var(--seam)}
.lbtable td{padding:10px;border-bottom:1px dotted var(--seam-soft)}
.lbtable td:first-child{font:18px var(--display);color:var(--dim);width:44px}
.lbtable .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbtable tr.me td{background:rgba(158,195,214,.07);color:var(--ithil)}
.bloods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.bloodcard{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px dashed var(--seam);text-decoration:none;color:var(--dim)}
.bloodcard strong{font:18px var(--display);font-weight:400;color:var(--vellum)}
.bloodcard.taken{border-style:solid;border-color:rgba(207,106,80,.5);background:rgba(168,67,47,.07)}
.bloodcard.taken > span:last-child{color:var(--wax-light)}
.bloodcard:hover{border-color:var(--ithil-dim)}
@media (max-width:700px){.lbtable th:nth-child(5),.lbtable td:nth-child(5),.lbtable th:nth-child(6),.lbtable td:nth-child(6){display:none}.podium .step{padding-inline:6px}}

/* ---------- Gandalf: a painted medallion and a speaking scroll */
.sage{--mood:var(--ithil);--mood-soft:rgba(158,195,214,.28);position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:90;
  display:flex;align-items:flex-end;gap:14px;max-width:min(500px,calc(100vw - 36px));pointer-events:none}
.sage[data-mood=praise]{--mood:#e0ad62;--mood-soft:rgba(224,173,98,.3)}
.sage[data-mood=warn]{--mood:#b9c9cf;--mood-soft:rgba(185,201,207,.22)}
.sage[data-mood=blood]{--mood:#e07a5f;--mood-soft:rgba(207,106,80,.4)}
.sage > *{pointer-events:auto}
.sage-face{position:relative;flex:none;width:84px;height:84px;border-radius:50%;padding:0;background:#0f1317;transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.sage-face img{position:absolute;inset:9px;width:66px;height:66px;border-radius:50%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.9) contrast(1.05) brightness(.95);transition:filter .2s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.sage-face::after{content:"";position:absolute;inset:9px;border-radius:50%;box-shadow:inset 0 -14px 18px rgba(10,12,14,.55),inset 0 0 0 1px rgba(158,195,214,.25);pointer-events:none}
.sage-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sage-ring circle{fill:none}
.sage-ring .r-out{stroke:var(--ithil-dim);stroke-width:1.2}
.sage-ring .r-in{stroke:var(--seam);stroke-width:1}
.sage-ring .r-ticks{stroke:var(--mood);stroke-width:1;opacity:.75;transform-origin:50px 50px;animation:spin 60s linear infinite;transition:stroke .4s}
.sage-ring .gem{fill:var(--mood);stroke:none}
.sage-halo{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,var(--mood-soft) 0%,transparent 68%);opacity:0;transition:opacity .4s}
.sage-glint{position:absolute;left:26%;top:22%;width:10px;height:5px;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(2px);transform:rotate(-30deg);pointer-events:none}
.sage-face:hover{transform:scale(1.07)}
.sage-face:hover .sage-halo,.sage:not(.folded) .sage-halo{opacity:1}
.sage.speaking .r-ticks{animation-duration:9s}
.sage.blip .sage-face img{animation:blip .16s ease-out}
@keyframes blip{50%{filter:saturate(1) contrast(1.08) brightness(1.18)}}
.sage.arrived.folded .sage-face{animation:nod 1.2s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes nod{0%{transform:translateY(40px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.sage:not(.folded) .sage-face{animation:bob2 3.4s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-3px)}}

.sage-bubble{position:relative;display:flex;gap:0;min-width:0;background:linear-gradient(180deg,rgba(29,34,38,.98),rgba(18,21,24,.98));
  border:1px solid var(--mood);box-shadow:0 18px 50px rgba(0,0,0,.65),0 0 0 4px rgba(15,19,23,.7),0 0 28px -8px var(--mood-soft);
  transform-origin:0 100%;transition:opacity .25s,transform .35s cubic-bezier(.2,1.3,.4,1),border-color .4s,box-shadow .4s}
.sage-bubble::before{content:"";position:absolute;left:-8px;bottom:30px;width:14px;height:14px;background:#15191c;border-left:1px solid var(--mood);border-bottom:1px solid var(--mood);transform:rotate(45deg);transition:border-color .4s}
.sage-bubble::after{content:"";position:absolute;inset:5px;border:1px solid rgba(158,195,214,.08);pointer-events:none}
.sage.pop .sage-bubble{animation:scrollin .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes scrollin{from{transform:scale(.94) translateY(6px);opacity:.4}}
.sage.folded .sage-bubble{opacity:0;transform:scale(.85) translateY(12px);pointer-events:none}
.sage-body{position:relative;padding:12px 16px 10px 18px;min-width:0}
.sage-body header{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding-bottom:6px;margin-bottom:4px;border-bottom:1px solid rgba(158,195,214,.12)}
.sage-name{font:17px var(--display);letter-spacing:.08em;color:var(--mood);font-weight:400;transition:color .4s}
.sage-role{font:italic 13px var(--speech);color:var(--faint)}
.sage-text{margin:6px 0 8px;font:italic 18.5px/1.5 var(--speech);color:var(--vellum);min-height:1.5em;cursor:pointer;text-wrap:pretty}
.sage-text em{color:var(--torch);font-style:normal;font-family:var(--mono);font-size:.78em;background:rgba(224,173,98,.08);padding:0 4px}
.sage-text .caret{display:inline-block;width:6px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--mood);opacity:.6;animation:flame .5s steps(2) infinite}
.sage-actions{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.sage-next{font:14px var(--body);color:var(--mood);padding:3px 10px;border:1px solid transparent;border-radius:2px}
.sage-next:hover{border-color:var(--mood)}
.sage-left{color:var(--faint);font-size:12px}
.sage-actions .x{font-size:20px}
.sage-bust{display:none;margin:0;position:relative;flex:none;width:150px;overflow:hidden;border-right:1px solid rgba(158,195,214,.15)}
.sage-bust img{display:block;width:100%;height:100%;object-fit:cover;object-position:66% 8%;filter:saturate(.85) contrast(1.05)}
.sage-bust::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(18,21,24,.9)),linear-gradient(0deg,rgba(18,21,24,.7),transparent 40%)}
.sage-bust figcaption{position:absolute;left:8px;bottom:6px;z-index:1;font:9px var(--mono);color:rgba(221,214,198,.6);white-space:nowrap}
.sage.big{max-width:min(640px,calc(100vw - 36px))}
.sage.big .sage-bust{display:block}
.sage.big .sage-body{padding:16px 20px 12px}
.sage.big .sage-text{font-size:20px;min-height:4.5em}
body.tk-open .sage{display:none}
@media (max-width:700px){
  .sage{left:10px;gap:10px}
  .sage-face{width:62px;height:62px}.sage-face img,.sage-face::after{inset:7px;width:48px;height:48px}
  .sage-text{font-size:16.5px}.sage.big .sage-text{font-size:17px}
  .sage.big .sage-bust{width:92px}
}

/* ---------- dragons */
.titlepage{position:relative}
.sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.dragon-fly{position:absolute;top:4%;left:0;width:clamp(150px,20vw,260px);height:auto;animation:fly 9s 1.2s linear both}
.dragon-fly .hide{fill:#14171a;stroke:var(--ithil);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round}
.dragon-fly .vein{fill:none;stroke:var(--ithil-dim);stroke-width:.5}
.dragon-fly .ember{fill:var(--torch)}
.dragon-fly .wing{transform-box:view-box;transform-origin:108px 58px;animation:flap .7s ease-in-out infinite alternate}
.dragon-fly .wing.far{animation-delay:-.1s}
@keyframes fly{0%{transform:translate(-30vw,40px) rotate(4deg)}45%{transform:translate(45vw,-10px) rotate(-2deg)}100%{transform:translate(115vw,20px) rotate(3deg)}}
@keyframes flap{from{transform:rotate(14deg) scaleY(.9)}to{transform:rotate(-26deg) scaleY(1.06)}}
.door .sky.shadow{position:fixed;z-index:4}
.door .sky.shadow .dragon-fly{top:30%;width:min(640px,80vw);animation:fly 3.4s .5s ease-in both;filter:brightness(0) opacity(.55)}
.lair .hide{fill:#15181b;stroke:var(--ithil-dim);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.lair .vein{fill:none;stroke:#4f6772;stroke-width:1.4}
.lair .breath{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.035,1.07)}}
.lair .eye-shut{fill:none;stroke:var(--ithil-dim);stroke-width:1.6}
.lair .eye-open{fill:var(--torch);opacity:0;transition:opacity .4s}
.map:has(.site[data-site=honeybucket]:hover) .lair .eye-open,.map:has(.site[data-site=honeybucket]:focus-visible) .lair .eye-open{opacity:1}
.map:has(.site[data-site=honeybucket]:hover) .lair .eye-shut{opacity:0}
.lair .smoke circle{fill:#8a918c;opacity:0;animation:smoke 4.2s ease-out infinite}
.lair .smoke circle:nth-child(2){animation-delay:1.4s}
.lair .smoke circle:nth-child(3){animation-delay:2.8s}
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.35}100%{opacity:0;transform:translate(22px,-46px) scale(2.6)}}
.lair.empty text{font:italic 15px var(--speech);fill:var(--faint);text-anchor:middle}
.lair.empty path{fill:none;stroke:var(--torch);stroke-width:1.5}

@media (max-width:980px){
  .book{grid-template-columns:minmax(0,1fr)}
  .leaf{padding-right:0;border-right:0}
  .slab{padding-left:0;position:static;margin-top:30px}
}
@media (max-width:700px){
  body{font-size:16px}
  .masthead{gap:16px;flex-wrap:wrap}
  .masthead .tally{margin-left:0}
  .titlepage{grid-template-columns:1fr}
  .wizard{max-width:170px;margin:0 auto;display:block}
  .art{max-width:240px}
  .training-card{grid-template-columns:auto minmax(0,1fr)}
  .training-card .pts{grid-column:2}
  .titlepage h1{text-align:center}
  .entry{grid-template-columns:40px minmax(0,1fr)}
  .entry .pts,.entry .meta{grid-column:2}
  .entry .t strong{white-space:normal}
  .entry .t i{display:none}
  .q{padding-left:36px}
  .q form{flex-wrap:wrap}
  .q form .btn{width:100%;justify-content:center}
  .ln .no{width:44px}
  .worldmap{margin-inline:calc(var(--gutter) * -1);border-inline:0;box-shadow:none;aspect-ratio:auto;height:min(76vh,620px)}
  .map .grain{display:none}
  .mapcard{display:none}
  .legend .how{flex-basis:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}