@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600;700&display=swap');
:root{--bg:#17120e;--ink:#eee2cb;--gold:#dcb47a;--muted:#b8a791;--line:#ddba7929;--serif:'Cormorant Garamond',Georgia,serif;--sans:Manrope,system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.7 var(--sans)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.symbols{position:absolute;width:0;height:0;overflow:hidden}.topbar{position:absolute;z-index:5;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:28px 5%;border-bottom:1px solid #eedfc51a}.brand{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:2.3px;line-height:1.6}.brand b{font-weight:400;letter-spacing:3px}.brand svg{width:33px;height:38px;color:var(--gold)}nav{display:flex;gap:35px;font-size:12px}nav a{position:relative;padding:5px 0}nav a:after{content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--gold);transition:width .3s}nav a:hover:after{width:100%}.motion{border:1px solid var(--line);border-radius:30px;background:#17120e44;font-size:10px;padding:9px 14px;color:var(--muted)}.hero{min-height:790px;height:100svh;max-height:1100px;position:relative;overflow:hidden;display:flex;align-items:center}.scene,.scene-video{position:absolute;inset:-25px;width:calc(100% + 50px);height:calc(100% + 50px);object-fit:cover;object-position:64% center;transform:translate(var(--px,0px),var(--py,0px)) scale(1.025);will-change:transform;transition:transform .6s ease-out;pointer-events:none}.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#120f0df5 0%,#17110ed9 30%,#17110e47 62%,#17110e0d),linear-gradient(0deg,#17120e,transparent 27%,transparent 80%,#17120e66)}.warmth{position:absolute;inset:0;background:radial-gradient(ellipse at 74% 42%,#ffa24126,transparent 50%);mix-blend-mode:screen;animation:fire 6s ease-in-out infinite alternate}.hero-content{position:relative;z-index:2;width:100%;padding:115px 7% 100px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.7px;text-transform:uppercase;color:var(--gold);margin:0 0 23px}.eyebrow>span{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin-right:10px;box-shadow:0 0 15px #efac68}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:.98;letter-spacing:-.035em}h1{font-size:clamp(76px,8.6vw,142px);margin:0 0 28px;max-width:800px}em{font-weight:400;color:var(--gold)}.intro{color:#d0c0a9;font:19px/1.6 var(--serif);margin:0 0 34px}.hero-actions{display:flex;align-items:center;gap:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 24px;border:1px solid #b68b53;background:#21190f;font-size:11px;transition:background .25s,transform .25s}.button:hover{background:#53391e;transform:translateY(-3px)}.button.primary{color:#291e11;background:#dfbd87;border-color:#dfbd87}.button.primary:hover{background:#f0d3a5}.button svg{width:18px;height:18px}.button span{margin-left:14px}.quiet{font-size:11px;color:#d9c9b1}.quiet span{margin-left:12px;color:var(--gold)}.edition{display:flex;flex-direction:column;gap:5px;margin-top:55px;color:#a99b85;font-size:9px;letter-spacing:1.8px}.edition span+span{font:italic 16px var(--serif);letter-spacing:0;color:#d6c5ab}.edition i{padding:0 9px}.dice-corner{position:absolute;z-index:3;right:8%;bottom:13%;display:flex;align-items:center;flex-direction:column}.tiny{font-size:9px;letter-spacing:2px;color:var(--muted)}#roll{border:0;background:none;padding:7px;transition:transform .4s}#roll:hover{transform:translateY(-8px) rotate(6deg)}.d20{width:145px;height:158px;stroke:url(#metal);stroke-width:1.6;filter:drop-shadow(0 15px 12px #0008)}.die-fill{fill:#241710ee}.d20 text{stroke:none;fill:#e5bd7e;font:38px var(--serif)}#roll-result{font:italic 18px var(--serif);color:var(--gold);min-height:31px}.rolling .d20{animation:tumble .65s ease-in-out}.scroll-cue{position:absolute;z-index:2;bottom:30px;left:7%;font-size:8px;letter-spacing:2.5px;color:#bdab92;display:flex;align-items:center;gap:20px}.scroll-cue span{font-size:25px}.embers{position:absolute;inset:0;z-index:1;pointer-events:none}.ember{position:absolute;bottom:10%;left:var(--left);height:3px;width:3px;border-radius:50%;background:#e9b06e;box-shadow:0 0 9px #f0a144;opacity:0;animation:rise var(--duration) var(--delay) infinite linear}.ribbon{min-height:76px;padding:18px 6%;display:flex;align-items:center;justify-content:center;gap:42px;border-block:1px solid var(--line);font:italic 18px var(--serif);color:#af9a7d;background:#20180f}.ribbon svg{color:var(--gold);width:22px}.section{padding:105px 7%;max-width:1600px;margin:auto}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px}.section-heading h2{margin:0;font-size:clamp(44px,5vw,72px);line-height:1.04}.section-heading>p{color:var(--muted);font-size:12px;margin-bottom:5px;line-height:1.9}.chapter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.chapter-card{position:relative;text-align:left;padding:30px;min-height:290px;background:radial-gradient(ellipse at var(--mx,50%) var(--my,0%),#ad7e3820,transparent 65%),#211a13;border:1px solid var(--line);transition:transform .3s,border-color .3s;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}.chapter-card:hover{transform:translateY(-6px);border-color:#b68b5380}.chapter-number{font:italic 64px var(--serif);color:#c29c5944;line-height:1}.chapter-card h3{font-size:31px;line-height:1.1;margin:23px 0 27px;max-width:270px}.chapter-card .read-link{margin-top:auto;font-size:9px;letter-spacing:1.7px;color:var(--gold);display:flex;justify-content:space-between;width:100%}.source-note{color:#988771;font-size:10px;margin-top:20px}.company{border-top:1px solid var(--line)}.portraits{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px}.portrait{text-align:left;padding:0;border:none;background:none;min-width:0}.portrait-image{position:relative;overflow:hidden;aspect-ratio:3/4;background:#292016;border:1px solid var(--line)}.portrait img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.85);transition:transform .6s,filter .6s}.portrait:hover img{transform:scale(1.07);filter:saturate(1) brightness(1)}.portrait-image:after{content:'↗';position:absolute;bottom:12px;right:14px;color:var(--gold);font-size:20px}.portrait h3{font-size:23px;margin:17px 0 8px;line-height:1.1}.portrait p{font-size:9px;color:var(--muted);margin:0}.table-section{position:relative;text-align:center;border-block:1px solid var(--line);background:radial-gradient(ellipse at 50% 50%,#6e412224,transparent 65%);max-width:none;padding:80px 6% 90px}.table-mark{margin:0 auto 25px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:65px;height:65px;color:var(--gold)}.table-mark svg{width:30px;height:30px}.table-section h2{font-size:clamp(45px,5vw,70px);margin:0 0 25px;line-height:1.05}.table-section>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.9}.table-section .button{margin-top:20px}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 7%;font-size:9px;color:#9f8d75;letter-spacing:1px}dialog{padding:0;max-width:min(900px,94vw);width:900px;max-height:90svh;background:#eee2ca;color:#30291e;border:1px solid #a7824c;box-shadow:0 25px 100px #000a}dialog::backdrop{background:#0b0806c9;backdrop-filter:blur(8px)}body:has(dialog[open]){overflow:hidden}.dialog-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 25px;background:#e5d6b9;border-bottom:1px solid #74604433;position:sticky;top:0;z-index:1;font-size:9px;letter-spacing:2px}.close,.reader-nav button{border:1px solid #74604455;background:transparent;padding:9px 14px;font-size:11px;color:inherit}#reader-content{padding:35px clamp(22px,6vw,75px);font:20px/1.8 var(--serif)}#reader-content h2{font-size:clamp(36px,4vw,55px);line-height:1.1;margin:5px 0 35px}#reader-content p{margin:0 0 20px}#reader-content em{color:inherit}.reader-nav{padding:20px 25px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #74604433;font-size:11px}.reader-nav button:disabled{opacity:.3;cursor:default}#character{max-width:680px;background:#211a13;color:var(--ink)}#character>.close{position:absolute;right:14px;top:14px;background:#17120eee;z-index:1}#character-content{display:grid;grid-template-columns:45% 55%}#character-content img{width:100%;height:400px;object-fit:cover}#character-content>div{padding:70px 30px 30px}#character-content h2{font-size:44px;line-height:1.1}#character-content p{color:var(--muted);font-size:12px}#character-content .eyebrow{color:var(--gold)}.still *{animation:none!important;scroll-behavior:auto!important}.still .scene{transform:none!important}.still .ember{display:none}@keyframes fire{from{opacity:.4}to{opacity:1}}@keyframes rise{0%{opacity:0;transform:translate(0,0)}20%{opacity:.5}90%{opacity:0}100%{transform:translate(45px,-420px);opacity:0}}@keyframes tumble{0%{transform:rotate(0) scale(1)}50%{transform:rotate(190deg) scale(.7)}100%{transform:rotate(360deg) scale(1)}}
@media(min-width:1600px){.hero-content{padding-left:max(7%,calc((100vw - 1400px)/2))}}@media(max-width:1000px){.portraits{grid-template-columns:repeat(3,1fr)}.portrait-image{aspect-ratio:4/4.6}.hero-content{padding-left:6%}.dice-corner{right:6%;bottom:9%}.d20{width:110px;height:130px}.chapter-card{padding:22px}.chapter-card h3{font-size:27px}.hero{min-height:730px}.section{padding:75px 6%}}@media(max-width:650px){.topbar{padding:19px 6%;flex-wrap:wrap;gap:18px}.brand{font-size:8px}.brand svg{width:27px}nav{order:3;width:100%;justify-content:space-between;gap:12px;font-size:11px}.motion{font-size:9px;padding:7px 10px}.hero{min-height:850px;max-height:none;height:100svh}.hero-content{padding:135px 6% 220px}.hero:after{background:linear-gradient(90deg,#17110ee8,#17110e66),linear-gradient(0deg,#17120e,transparent 40%)}.scene{background-position:60% center}.eyebrow{font-size:8px;letter-spacing:2px}h1{font-size:clamp(61px,13vw,85px)}.intro{font-size:18px}.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.edition{margin-top:30px}.dice-corner{bottom:42px;right:8%}.dice-corner .tiny{font-size:7px}.d20{width:90px;height:100px}#roll-result{font-size:15px}.scroll-cue{bottom:45px;max-width:140px;font-size:7px}.ribbon{gap:15px;padding:18px 6%;font-size:14px}.ribbon span{max-width:150px}.ribbon svg{flex-shrink:0}.section-heading{align-items:flex-start;flex-direction:column;gap:18px}.section-heading h2{font-size:46px}.chapter-grid{grid-template-columns:1fr}.chapter-card{min-height:225px}.chapter-card h3{max-width:none}.chapter-number{font-size:46px}.portraits{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 15px}.portrait h3{font-size:23px}footer{flex-direction:column;gap:10px}.table-section{padding:65px 6%}#character-content{grid-template-columns:1fr}#character-content img{height:300px;object-position:50% 25%}#character-content>div{padding:25px}#character-content h2{margin:15px 0}#reader-content{font-size:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.scene{transform:none!important}.ember{display:none}}
.chapter-search{display:flex;align-items:center;gap:1rem;max-width:42rem;margin:0 0 2.2rem;color:#d7bb88;font-family:var(--sans);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}.chapter-search input{flex:1;min-width:12rem;border:1px solid rgba(213,164,92,.28);border-radius:999px;background:rgba(13,10,8,.68);color:#f2e4c8;padding:.85rem 1.1rem;font:500 1rem/1.2 var(--sans);letter-spacing:0;text-transform:none;outline:none}.chapter-search input:focus{border-color:#d5a45c;box-shadow:0 0 0 3px rgba(213,164,92,.12)}.empty-search{grid-column:1/-1;color:#c8b99e}.character-threads{color:#d7bb88}.character-threads strong{color:#f0dfbf}@media(max-width:640px){.chapter-search{align-items:stretch;flex-direction:column}.chapter-search input{width:100%}}

/* Fuego ambiental sobre la chimenea ya presente en la ilustración. */
.hearth{--fire-x:0px;--fire-y:0px;--fire-force:0;position:absolute;z-index:1;left:62%;top:26%;width:30%;height:38%;pointer-events:none;overflow:hidden;mix-blend-mode:screen}.hearth:before{content:'';position:absolute;inset:8% 4% 3%;background:radial-gradient(ellipse at calc(51% + var(--fire-x)) calc(65% + var(--fire-y)),rgba(255,237,172,calc(.11 + var(--fire-force) * .06)) 0 10%,rgba(255,157,42,calc(.16 + var(--fire-force) * .08)) 27%,rgba(227,77,13,.1) 48%,transparent 74%);filter:blur(7px);animation:hearth-flicker 1.8s ease-in-out infinite alternate}.firelight{position:absolute;inset:14% 12% 9%;display:block;background:radial-gradient(ellipse at 50% 73%,rgba(255,244,190,.16),rgba(255,168,43,.12) 29%,rgba(223,69,10,.05) 50%,transparent 71%);filter:blur(3px);transform:translate(var(--fire-x),var(--fire-y)) scale(calc(1 + var(--fire-force) * .025));animation:hearth-flicker .9s steps(3,end) infinite alternate}.fire-spark{position:absolute;display:block;width:3px;height:3px;border-radius:50%;background:#ffd283;box-shadow:0 0 8px #ff8a25;opacity:0;animation:hearth-spark 4.5s infinite ease-out}.spark-one{left:48%;bottom:30%;animation-delay:-.5s}.spark-two{left:61%;bottom:23%;animation-delay:-2.1s}.spark-three{left:38%;bottom:31%;animation-delay:-3.2s}.spark-four{left:54%;bottom:18%;animation-delay:-4s}.still .fire-spark{display:none}.still .hearth:before,.still .firelight{opacity:.55!important;transform:none!important}@keyframes hearth-flicker{0%{opacity:.68;filter:blur(6px) brightness(.9)}37%{opacity:1;filter:blur(8px) brightness(1.22)}72%{opacity:.76;filter:blur(5px) brightness(1.06)}100%{opacity:.95;filter:blur(7px) brightness(1.14)}}@keyframes hearth-spark{0%{opacity:0;transform:translate(calc(var(--fire-x) * 2),0) scale(.4)}20%{opacity:.8}75%{opacity:.15}100%{opacity:0;transform:translate(calc(var(--fire-x) * 3 + 18px),-92px) scale(1.05)}}

/* Iluminación viva: el arte original permanece intacto y estos halos animan sus fuentes de luz. */
.hero{--cursor-x:72%;--cursor-y:44%;--cursor-alpha:0}.cursor-light{position:absolute;z-index:1;inset:0;pointer-events:none;opacity:var(--cursor-alpha);background:radial-gradient(circle 155px at var(--cursor-x) var(--cursor-y),rgba(255,190,103,.11),rgba(255,119,31,.035) 42%,transparent 72%);mix-blend-mode:screen;transition:opacity .45s ease}.hearth{left:59%;top:23%;width:31%;height:45%}.hearth:before{background:radial-gradient(ellipse at calc(51% + var(--fire-x)) calc(68% + var(--fire-y)),rgba(255,244,188,calc(.22 + var(--fire-force) * .08)) 0 9%,rgba(255,160,44,calc(.25 + var(--fire-force) * .09)) 27%,rgba(231,67,8,.13) 50%,transparent 76%);filter:blur(6px)}.firelight{inset:8% 5% 1%;background:radial-gradient(ellipse at 50% 70%,rgba(255,248,202,.25),rgba(255,164,38,.18) 27%,rgba(224,63,8,.075) 51%,transparent 73%)}.spark-five{left:44%;bottom:22%;animation-delay:-1.4s}.spark-six{left:65%;bottom:28%;animation-delay:-3.7s}.candlelights{position:absolute;z-index:1;inset:0;pointer-events:none;mix-blend-mode:screen}.candle-glow{--wind-x:0px;--wind-y:0px;position:absolute;width:76px;height:112px;margin:-56px 0 0 -38px;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(255,246,186,.45) 0 3%,rgba(255,177,69,.17) 16%,rgba(255,111,27,.07) 36%,transparent 69%);filter:blur(2px);transform:translate(var(--wind-x),var(--wind-y));animation:candle-breathe 2.1s ease-in-out infinite alternate}.candle-one{left:33%;top:42%;animation-delay:-.7s}.candle-two{left:46%;top:41%;animation-delay:-1.5s}.candle-three{left:60%;top:15%;animation-delay:-.2s}.candle-four{left:80%;top:10%;animation-delay:-1.1s}.candle-five{left:92%;top:43%;animation-delay:-1.8s}.chapter-card{transform-style:preserve-3d;will-change:transform;transition:transform .2s ease-out,border-color .3s}.chapter-card .chapter-number,.chapter-card h3,.chapter-card .read-link{transform:translateZ(14px)}.still .cursor-light,.still .candle-glow{display:none}.still .hearth:before,.still .firelight{opacity:.68!important}@keyframes candle-breathe{0%{opacity:.43;filter:blur(2.7px) brightness(.9);scale:.94 1.02}28%{opacity:.8;filter:blur(1.7px) brightness(1.18);scale:1.05 .96}67%{opacity:.55;filter:blur(2.3px) brightness(1.03);scale:.97 1.04}100%{opacity:.9;filter:blur(1.5px) brightness(1.27);scale:1.08 .94}}@media(max-width:650px){.candlelights{display:none}.hearth{left:68%;top:27%;width:38%;height:34%}.cursor-light{display:none}}

/* La taberna permanece estática; solo se superpone la llama recortada y transparente. */
.fire-animation{position:absolute;z-index:1;inset:-25px;width:calc(100% + 50px);height:calc(100% + 50px);object-fit:cover;object-position:64% center;transform:translate(var(--px,0px),var(--py,0px)) scale(1.025);will-change:transform;transition:transform .6s ease-out;pointer-events:none;mix-blend-mode:screen}.fire-motes{position:absolute;inset:0;display:block}.fire-mote{position:absolute;left:var(--left);bottom:22%;width:var(--size);height:var(--size);border-radius:50%;background:radial-gradient(circle,#fff0bd 0 18%,#ffc061 32%,#e85f18 61%,transparent 72%);box-shadow:0 0 calc(var(--size) * 3) rgba(255,129,37,.8);opacity:0;animation:local-ember var(--duration) var(--delay) infinite ease-out}.still .fire-animation,.still .fire-motes{display:none}@keyframes local-ember{0%{opacity:0;transform:translate3d(calc(var(--fire-x) * .4),8px,0) scale(.35)}15%{opacity:.92}58%{opacity:.58}100%{opacity:0;transform:translate3d(calc(var(--drift) + var(--fire-x) * 2.8),-155px,0) scale(1.15)}}@media(max-width:650px){.fire-animation{object-position:60% center}}

/* Brasas ambientales y un índice compacto que puede crecer con la campaña. */
body{background:radial-gradient(ellipse at 72% 28%,#2b1a102b,transparent 38%),var(--bg)}main,footer{position:relative;z-index:1}.ambient-canvas{position:fixed;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;transform:translateZ(0);will-change:transform}.warmth{background:radial-gradient(ellipse at 74% 48%,#ffa24126,transparent 46%)}.chronicle{position:relative}.chronicle:before{content:'';position:absolute;z-index:-1;inset:3% -8% 0;background:radial-gradient(ellipse at 78% 20%,rgba(117,65,25,.11),transparent 42%),radial-gradient(ellipse at 18% 75%,rgba(86,48,23,.08),transparent 38%);pointer-events:none}.chapter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}.chapter-card{min-height:78px;padding:11px 15px 11px 12px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:13px;background:radial-gradient(circle 130px at var(--mx,50%) var(--my,50%),rgba(196,132,61,.13),transparent 72%),rgba(31,23,17,.82);backdrop-filter:blur(3px);border-color:rgba(221,186,121,.13);transform-style:preserve-3d}.chapter-card:hover{transform:translateY(-2px);border-color:rgba(220,180,112,.5);background-color:rgba(40,28,18,.92)}.chapter-die{position:relative;display:grid;place-items:center;width:52px;height:52px;color:#bf8e50;filter:drop-shadow(0 5px 7px rgba(0,0,0,.34))}.chapter-die svg{position:absolute;inset:0;width:100%;height:100%;stroke:currentColor;stroke-width:.9}.chapter-die b{position:relative;font:600 13px/1 var(--sans);color:#e2ba7f;letter-spacing:-.04em}.chapter-copy{display:flex;min-width:0;flex-direction:column;gap:2px}.chapter-copy small{font:500 9px/1.3 var(--sans);letter-spacing:1.25px;text-transform:uppercase;color:#907a61}.chapter-copy strong{overflow:hidden;color:#eadbc2;font:500 19px/1.15 var(--serif);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}.chapter-card .read-link{width:auto;margin:0;color:#b9915d;font-size:9px;letter-spacing:1.1px;gap:7px}.chapter-card .read-link span{font-size:14px}.chapter-card .chapter-die,.chapter-card .chapter-copy,.chapter-card .read-link{transform:translateZ(8px)}.chapter-card.forthcoming{cursor:default;border-style:dashed;background:rgba(27,21,16,.5);opacity:.76}.forthcoming .chapter-die{color:#8d704b}.forthcoming .chapter-copy strong{color:#bca98c;font-style:italic}.still .ambient-canvas{display:none}@media(max-width:850px){.chapter-grid{grid-template-columns:1fr}}@media(max-width:650px){.chapter-card{min-height:72px;grid-template-columns:48px minmax(0,1fr);padding:10px 12px}.chapter-die{width:46px;height:46px}.chapter-copy strong{font-size:18px}.chapter-card .read-link{display:none}.ambient-canvas{opacity:.72}}
html,body{overflow-x:hidden}
body{width:100%;max-width:100vw}.chronicle{overflow:clip}
.warmth{background:radial-gradient(ellipse at 74% 48%,#ffa24118,transparent 41%)}.fire-animation{opacity:.82}.hearth{opacity:.86}.chapter-die b{color:#fff4df;text-shadow:0 1px 3px #21130a,0 0 5px #000;font-weight:700}

/* Submenú desplegable en navegación principal */
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer}
.nav-dropdown-toggle .arrow{font-size:10px;color:var(--gold);transition:transform .2s}
.nav-dropdown:hover .nav-dropdown-toggle .arrow{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 8px);left:-15px;background:#1e1711f5;border:1px solid #c99f5d66;border-radius:6px;padding:8px 0;min-width:215px;box-shadow:0 15px 35px rgba(0,0,0,.7);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transform:translateY(6px);transition:all .2s ease;z-index:20}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:11px;color:#d5c4aa;transition:background .2s,color .2s;text-decoration:none}
.nav-dropdown-menu a:hover{background:rgba(220,180,122,.15);color:#fff2da}
.nav-dropdown-menu a svg{width:16px;height:16px;stroke:var(--gold);flex-shrink:0}
.nav-dropdown-menu a small{margin-left:auto;background:rgba(220,180,122,.15);color:var(--gold);padding:2px 7px;border-radius:10px;font-size:9px;font-weight:600}
.nav-dropdown-menu a:after{display:none}

/* --- ESTILOS DEL COMPENDIO DE FAERÛN Y LOS PLANOS --- */
.compendium{border-top:1px solid var(--line);position:relative}
.compendium-tabs{display:flex;gap:12px;margin-bottom:28px;flex-wrap:wrap}
.comp-tab{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border:1px solid var(--line);background:rgba(33,26,19,.7);color:var(--muted);border-radius:30px;font-size:11px;letter-spacing:1px;text-transform:uppercase;transition:all .25s ease}
.comp-tab svg{width:18px;height:18px}
.comp-tab:hover{border-color:var(--gold);color:var(--ink);background:rgba(45,34,23,.9)}
.comp-tab.active{background:var(--gold);color:#1c140d;border-color:var(--gold);font-weight:600;box-shadow:0 0 20px rgba(220,180,122,.25)}
.comp-tab.active svg{stroke:#1c140d}
.tab-count{display:inline-block;padding:1px 7px;background:rgba(220,180,122,.2);border-radius:10px;font-size:9px;font-weight:700;color:var(--gold);margin-left:4px}
.comp-tab.active .tab-count{background:rgba(0,0,0,.25);color:#1c140d}

.compendium-search-bar{margin-bottom:34px;max-width:38rem}
.compendium-search-bar input{width:100%;border:1px solid rgba(213,164,92,.28);border-radius:999px;background:rgba(13,10,8,.68);color:#f2e4c8;padding:.85rem 1.3rem;font:500 1rem/1.2 var(--sans);letter-spacing:0;outline:none;transition:border-color .3s}
.compendium-search-bar input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(213,164,92,.15)}

.compendium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.comp-card{position:relative;background:radial-gradient(circle at 50% 0%,rgba(173,126,56,.1),transparent 65%),#211a13;border:1px solid var(--line);padding:24px;border-radius:4px;display:flex;flex-direction:column;transition:transform .3s,border-color .3s;cursor:pointer}
.comp-card:hover{transform:translateY(-4px);border-color:rgba(220,180,112,.6);background-color:#261e16}

.comp-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.comp-icon{font-size:24px}
.comp-badge{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;padding:3px 9px;border:1px solid var(--gold);border-radius:12px;font-weight:600}
.comp-title{font-size:26px;line-height:1.15;margin:0 0 6px;color:#f0e4cf;font-family:var(--serif)}
.comp-sub{color:var(--gold);font-size:11px;margin:0 0 14px;letter-spacing:.5px}
.comp-meta{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid rgba(221,186,121,.1)}
.comp-meta strong{color:#eee2cb}
.comp-desc{color:#bba891;font-size:12px;line-height:1.6;margin:0 0 20px;flex-grow:1}
.comp-open-btn{background:none;border:none;color:var(--gold);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:0;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.comp-open-btn:hover{color:#fff}

/* Tarjetas de Lugares con miniatura */
.comp-lugares{padding:0;overflow:hidden}
.comp-thumb-wrap{position:relative;width:100%;height:180px;overflow:hidden;background:#17120e}
.comp-thumb{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:brightness(.85) contrast(1.05)}
.comp-card:hover .comp-thumb{transform:scale(1.06);filter:brightness(1)}
.comp-region-tag{position:absolute;bottom:10px;left:12px;background:rgba(23,18,14,.88);border:1px solid var(--gold);padding:3px 9px;font-size:9px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;border-radius:10px;backdrop-filter:blur(4px)}
.comp-card-body{padding:20px;display:flex;flex-direction:column;flex-grow:1}

.comp-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--muted);font-style:italic}

/* Modal del Compendio */
#compendium-modal{max-width:820px;background:#1a140f;color:var(--ink);border:1px solid #c99f5d;box-shadow:0 30px 100px rgba(0,0,0,.85)}
#compendium-modal .dialog-bar{background:#241c14;border-bottom:1px solid rgba(220,180,122,.2);color:var(--gold)}
#comp-modal-content{padding:30px 35px 40px;max-height:calc(85vh - 60px);overflow-y:auto}
.comp-detail-image-hero{width:100%;max-height:360px;overflow:hidden;border-radius:4px;margin-bottom:24px;border:1px solid var(--line)}
.comp-detail-image-hero img{width:100%;height:100%;object-fit:cover}
.comp-detail-header{margin-bottom:28px}
.comp-badge-pill{display:inline-block;padding:4px 12px;border:1px solid var(--gold);color:var(--gold);border-radius:15px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;margin-bottom:12px}
.comp-detail-header h2{font-size:clamp(34px,4vw,48px);line-height:1.05;margin:0 0 8px;font-family:var(--serif);color:#fff2da}
.comp-detail-sub{color:var(--gold);font-size:13px;letter-spacing:.5px;margin:0 0 20px}
.comp-detail-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;background:rgba(33,26,19,.85);border:1px solid var(--line);padding:16px 20px;border-radius:4px}
.comp-detail-meta-grid .label{display:block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.comp-detail-meta-grid .val{font-size:12px;color:#f3e4cb;font-weight:600}

.comp-stats-box{background:rgba(28,21,15,.95);border:1px solid rgba(220,180,122,.3);padding:22px;border-radius:4px;margin-bottom:28px}
.comp-stats-box h3,.comp-lore-box h3{font-family:var(--serif);font-size:24px;color:var(--gold);margin:0 0 16px;border-bottom:1px solid rgba(220,180,122,.15);padding-bottom:8px}
.comp-stats-list{display:flex;flex-direction:column;gap:10px}
.comp-stat-row{display:grid;grid-template-columns:180px 1fr;gap:14px;padding:8px 10px;background:rgba(40,30,21,.5);border-radius:3px;font-size:12px}
.comp-stat-row .stat-name{color:var(--gold);font-weight:600}
.comp-stat-row .stat-val{color:#eee2cb}

.comp-lore-box{margin-bottom:24px}
.comp-lore-box p{color:#d3c2a9;font:15px/1.8 var(--sans);margin:0 0 14px}

@media(max-width:1050px){
  .compendium-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .compendium-grid{grid-template-columns:1fr}
  .comp-stat-row{grid-template-columns:1fr;gap:4px}
  #comp-modal-content{padding:20px 18px}
}

/* --- Botón Flotante y Modal de Sugerencias --- */
.feedback-float-btn{position:fixed;bottom:24px;right:24px;z-index:900;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,rgba(38,28,19,.95),rgba(20,14,10,.95));color:var(--gold);border:1px solid rgba(220,180,122,.45);padding:10px 18px;border-radius:30px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.5px;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.65),0 0 12px rgba(220,180,122,.15);backdrop-filter:blur(8px);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.feedback-float-btn svg{width:16px;height:16px;stroke:currentColor;fill:none}
.feedback-float-btn:hover{transform:translateY(-2px) scale(1.03);border-color:var(--gold);box-shadow:0 8px 28px rgba(0,0,0,.75),0 0 20px rgba(220,180,122,.35);color:#fff2da}
.feedback-float-btn:active{transform:translateY(0) scale(.98)}

.feedback-dialog{border:1px solid var(--gold);background:#15100c;color:#eee0c8;padding:0;border-radius:6px;max-width:580px;width:calc(100% - 32px);box-shadow:0 25px 60px rgba(0,0,0,.85),0 0 35px rgba(220,180,122,.15)}
.feedback-dialog::backdrop{background:rgba(8,6,4,.78);backdrop-filter:blur(4px)}
.feedback-body{padding:24px 26px 28px}
.feedback-intro{font-size:13.5px;line-height:1.6;color:#cfbfab;margin:0 0 18px}
.feedback-body .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.feedback-body .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.feedback-body label{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--gold);font-weight:600}
.feedback-body input,.feedback-body select,.feedback-body textarea{background:rgba(25,18,13,.85);border:1px solid rgba(220,180,122,.28);border-radius:4px;color:#fff2da;font-family:inherit;font-size:13.5px;padding:10px 12px;outline:none;transition:border-color .2s,box-shadow .2s}
.feedback-body input:focus,.feedback-body select:focus,.feedback-body textarea:focus{border-color:var(--gold);box-shadow:0 0 10px rgba(220,180,122,.25)}
.feedback-body textarea{resize:vertical;min-height:95px;line-height:1.5}
.feedback-actions{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.submit-feedback{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;font-weight:600;cursor:pointer}
.submit-feedback svg{width:16px;height:16px;stroke:currentColor;fill:none}
.fb-status{min-height:20px}
.fb-loading{font-size:12.5px;color:var(--gold);font-style:italic}
.fb-error{font-size:12.5px;color:#ff7b7b}
.fb-success{background:rgba(30,45,25,.7);border:1px solid rgba(120,200,100,.4);padding:12px 14px;border-radius:4px;color:#d8f5d0;font-size:13px;line-height:1.5}
.fb-success strong{display:block;color:#79e46a;margin-bottom:4px}
.fb-success p{margin:0;color:#c0e8b8}
.fb-online-notice{background:rgba(45,35,20,.85);border-color:rgba(220,180,122,.5);color:#f7e6ca}
.fb-online-notice strong{color:var(--gold)}
.fb-online-notice p{color:#dfcdb3}
.copy-discord-btn{margin-top:10px;width:100%;padding:9px 14px;font-size:12px;background:#5865F2;color:#fff;border:none;border-radius:4px;cursor:pointer;font-weight:600;transition:background .2s}
.copy-discord-btn:hover{background:#4752c4}
.copy-discord-btn.copied{background:#3ba55d}
.fb-history{margin-top:22px;padding-top:16px;border-top:1px solid rgba(220,180,122,.18)}
.fb-history h4{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin:0 0 10px}
.fb-history-item{background:rgba(28,20,14,.6);border:1px solid rgba(220,180,122,.15);padding:8px 12px;border-radius:4px;margin-bottom:8px;font-size:12px}
.fb-item-head{display:flex;justify-content:space-between;margin-bottom:4px}
.fb-item-cat{color:var(--gold);font-weight:600;font-size:11px}
.fb-item-date{color:var(--muted);font-size:10px}
.fb-item-msg{margin:0;color:#d8c7b3;line-height:1.4;white-space:pre-wrap}

@media(max-width:650px){
  .feedback-float-btn{bottom:16px;right:16px;padding:8px 14px;font-size:12px}
  .feedback-body{padding:18px 16px 22px}
  .feedback-body .form-row{grid-template-columns:1fr;gap:0}
}