:root{--bg:#120e0b;--stone:#1d1814;--stone2:#272019;--parch:#e9dcc0;--ink:#efe4cc;--muted:#b9a789;--gold:#e2b765;--gold2:#a87a33;--red:#8e2a1f;--teal:#3aa59a;
--rune:'Noto Sans Runic',serif;--head:'Cinzel',serif;--deco:'Cinzel Decorative',serif;--body:'Cormorant Garamond',Georgia,serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.55;font-weight:500;
 background-image:radial-gradient(ellipse at 50% 0%,rgba(226,183,101,.07),transparent 60%),
 repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),
 radial-gradient(circle at 20% 80%,rgba(142,42,31,.10),transparent 50%)}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
b{color:#fff3d6;font-weight:700}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
/* hero */
.hero{position:relative;max-width:720px;margin:0 auto;overflow:hidden}
.hero-img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top;max-height:78vh}
.hero-fade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(transparent,var(--bg) 92%)}
.hero-text{position:absolute;left:0;right:0;bottom:10px;text-align:center;padding:0 18px}
.runes{font-family:var(--rune);color:var(--gold);letter-spacing:.5em;margin:0 0 4px;opacity:.85;font-size:18px}
.kicker{font-family:var(--head);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}
.tagline{font-family:var(--body);font-style:italic;font-size:22px;margin:4px 0 0;color:#fff1d2;text-shadow:0 2px 8px #000}
/* tabs */
.tabs{position:sticky;top:0;z-index:50;background:rgba(18,14,11,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 border-top:1px solid rgba(226,183,101,.35);border-bottom:1px solid rgba(226,183,101,.35);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.tabs-inner{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 10px;max-width:960px;margin:0 auto;scroll-snap-type:x proximity}
.tabs-inner::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;font-family:var(--head);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
 text-decoration:none;padding:9px 13px;border-radius:999px;border:1px solid transparent;transition:.25s;scroll-snap-align:center;white-space:nowrap}
.tabs a.on{color:#1a120a;background:linear-gradient(180deg,#f3d48d,var(--gold) 50%,var(--gold2));border-color:#f8e0a6;box-shadow:0 0 14px rgba(226,183,101,.35)}
@media(min-width:720px){.tabs-inner{justify-content:center}}
/* layout */
main{max-width:960px;margin:0 auto;padding:6px 16px 30px}
.panel{animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rune-h{font-family:var(--deco);font-weight:900;color:var(--gold);text-align:center;font-size:27px;line-height:1.2;margin:26px 0 16px;
 text-shadow:0 2px 0 #000,0 0 18px rgba(226,183,101,.25)}
.rune-h span{font-family:var(--rune);font-size:.8em;color:var(--gold2);vertical-align:middle;margin:0 6px}
.sub-h{font-family:var(--head);font-weight:700;color:var(--gold);font-size:19px;letter-spacing:.06em;text-transform:uppercase;margin:30px 0 12px;
 display:flex;align-items:center;gap:10px}
.sub-h:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(226,183,101,.6),transparent)}
.sub-h small{font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--muted);font-size:15px;font-weight:500}
.sub-h small.age{background:var(--red);color:#fff;border-radius:6px;padding:0 7px;font-family:var(--head);font-size:12px}
p{margin:0 0 14px}
.center{text-align:center}.small{font-size:16px}.muted{color:var(--muted);margin:0}
.note{font-style:italic;color:var(--muted);text-align:center}
.drop:first-letter{font-family:var(--deco);float:left;font-size:58px;line-height:.9;color:var(--gold);margin:6px 8px 0 0}
.wide-fig{margin:0 0 18px;border:1px solid rgba(226,183,101,.45);border-radius:14px;overflow:hidden;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.wide-fig img{width:100%;aspect-ratio:16/10;object-fit:cover}
.wide-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 9px;font-style:italic;font-size:16px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.scroll-card{position:relative;color:#2b1d10;background:linear-gradient(180deg,#efe2c4,#dcc8a0);border-radius:6px;padding:18px 18px 8px;margin:22px 4px;
 box-shadow:inset 0 0 40px rgba(110,70,20,.35),0 8px 24px rgba(0,0,0,.6);border:1px solid #b89559}
.scroll-card:before,.scroll-card:after{content:"";position:absolute;left:-6px;right:-6px;height:12px;border-radius:8px;background:linear-gradient(180deg,#8a5d2a,#5a3a16)}
.scroll-card:before{top:-6px}.scroll-card:after{bottom:-6px}
.scroll-card h3{font-family:var(--deco);color:#6e1d14;margin:2px 0 8px;font-size:21px}
.scroll-card b{color:#5a160f}
.pills{list-style:none;padding:0;margin:4px 0 12px;display:flex;flex-wrap:wrap;gap:6px}
.pills li{font-family:var(--head);font-size:11.5px;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(110,29,20,.12);border:1px solid rgba(110,29,20,.35)}
.two-col{display:grid;gap:14px}
@media(min-width:720px){.two-col{grid-template-columns:1fr 1fr}}
.lore-box{background:linear-gradient(160deg,var(--stone2),var(--stone));border:1px solid rgba(226,183,101,.3);border-radius:14px;padding:16px 16px 4px;position:relative}
.lore-box h3{font-family:var(--head);color:var(--gold);margin:0 0 8px;font-size:18px}
.ico{margin-right:4px}
.timeline{list-style:none;counter-reset:t;padding:0 0 0 6px;margin:0;border-left:2px solid rgba(226,183,101,.35)}
.timeline li{counter-increment:t;position:relative;padding:0 0 14px 26px;font-size:17.5px;color:var(--ink)}
.timeline li:before{content:counter(t);position:absolute;left:-14px;top:0;width:26px;height:26px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);
 color:var(--gold);font-family:var(--head);font-size:13px;font-weight:700;display:grid;place-items:center}
.timeline b{display:block;font-family:var(--head);color:var(--gold);font-size:15px;letter-spacing:.04em}
/* dragons */
.dragon-hero{display:grid;gap:0;background:linear-gradient(160deg,#1b2030,#141118);border:1px solid rgba(120,200,140,.35);border-radius:16px;overflow:hidden;margin:6px 0 18px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.dragon-hero img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%}
.dragon-hero>div{padding:14px 16px 4px}
.dragon-hero h3{font-family:var(--deco);font-size:28px;color:#9be3a8;margin:0 0 8px;text-shadow:0 0 18px rgba(80,220,120,.35)}
.dragon-hero.danger{border-color:rgba(230,90,50,.45);background:linear-gradient(160deg,#2a1510,#141010)}
.dragon-hero.danger h3{color:#ff8a5c;text-shadow:0 0 18px rgba(255,90,40,.4)}
@media(min-width:720px){.dragon-hero{grid-template-columns:42% 1fr}.dragon-hero img{height:100%;aspect-ratio:auto}}
.tag{font-family:var(--head);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.bond-card{background:var(--stone);border:1px solid rgba(110,100,220,.45);border-radius:14px;padding:14px 16px;margin:0 0 18px}
.bond-card h3{font-family:var(--head);color:#b9b2ff;margin:0 0 10px;font-size:18px}
.bond-card h3 small{font-family:var(--body);color:var(--muted);font-size:14px;font-weight:500;margin-left:6px}
.meter{position:relative;height:10px;border-radius:9px;background:linear-gradient(90deg,#3a3329,#4b3f30);border:1px solid rgba(226,183,101,.35);margin:0 0 12px;overflow:visible}
.meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#c9493b,var(--gold))}
.meter .tick{position:absolute;top:-3px;width:2px;height:14px;background:var(--gold)}
.tiers{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:8px}
.tiers li{background:rgba(255,255,255,.035);border-left:3px solid var(--gold2);padding:7px 10px;border-radius:0 8px 8px 0;font-size:16.5px}
.tiers li b{display:block;font-family:var(--head);font-size:13px;letter-spacing:.06em;color:var(--gold)}
.tiers li:nth-child(4){border-left-color:#e0607a}
.earn p{font-size:15.5px;margin:6px 0}.earn em{font-style:normal;color:var(--gold);white-space:nowrap}
.up{color:#7fd38c}.down{color:#ff7a6a}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}
.dcard{background:linear-gradient(160deg,var(--stone2),var(--stone));border:1px solid rgba(226,183,101,.25);border-radius:12px;padding:11px 12px}
.dcard b{font-family:var(--head);color:var(--gold);font-size:14.5px;display:block;margin-bottom:3px}
.dcard p{font-size:15.5px;margin:0;line-height:1.4}
.dcard.img{padding:0;overflow:hidden;position:relative}
.dcard.img img{width:100%;height:100%;object-fit:cover;min-height:150px}
.dcard.img span{position:absolute;bottom:0;left:0;right:0;padding:16px 10px 7px;font-family:var(--head);font-size:13px;color:var(--gold);background:linear-gradient(transparent,rgba(0,0,0,.85))}
@media(min-width:720px){.dgrid{grid-template-columns:repeat(3,1fr)}}
/* characters */
.tier-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.tier-legend span{font-family:var(--head);font-size:11.5px;padding:4px 9px;border-radius:999px;border:1px solid rgba(226,183,101,.4);color:var(--gold)}
.tier-legend span:last-child{border-color:#e0607a;color:#ff9fb1}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:720px){.cgrid{grid-template-columns:repeat(3,1fr)}}
.ccard{display:flex;flex-direction:column;background:linear-gradient(170deg,var(--stone2),var(--stone));border:1px solid color-mix(in srgb,var(--c) 55%,transparent);border-radius:14px;overflow:hidden;
 box-shadow:0 8px 22px rgba(0,0,0,.55);transition:transform .2s}
.ccard:active{transform:scale(.97)}
.portrait{position:relative;display:block}
.portrait img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
.portrait:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,var(--stone2))}
.portrait .age{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:14px;
 background:rgba(0,0,0,.65);border:1.5px solid var(--gold);color:var(--gold)}
.cbody{display:flex;flex-direction:column;padding:0 10px 10px;margin-top:-26px;position:relative;z-index:2}
.cname{font-family:var(--head);font-weight:700;font-size:15.5px;line-height:1.15;color:#fff3d6}
.crole{font-size:13.5px;color:var(--c);filter:brightness(1.5);font-weight:700;margin:2px 0 4px}
.cshort{font-size:14.5px;line-height:1.3;color:var(--muted);margin-bottom:8px}
.aff{display:block}.aff .meter.sm{height:6px;margin:0 0 3px}
.aff-l{font-family:var(--head);font-size:11px;color:#ff9fb1}
.more{font-family:var(--head);font-size:11.5px;color:var(--gold);margin-top:6px;letter-spacing:.05em}
.support{display:grid;gap:10px}
@media(min-width:720px){.support{grid-template-columns:1fr 1fr}}
.support>div{background:var(--stone);border:1px solid rgba(226,183,101,.2);border-radius:12px;padding:11px 13px;font-size:16px;line-height:1.4}
.support b{font-family:var(--head);color:var(--gold);display:block;font-size:15px}
.support span{display:block;font-style:italic;color:var(--muted);font-size:14px;margin-bottom:4px}
/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(5,3,2,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center}
.modal[hidden],.lightbox[hidden]{display:none}
.modal-card{position:relative;width:100%;max-width:620px;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#221b15,#15100c);
 border:1px solid rgba(226,183,101,.45);border-bottom:0;border-radius:20px 20px 0 0;animation:up .3s ease;padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:720px){.modal{align-items:center}.modal-card{border-radius:20px;border-bottom:1px solid rgba(226,183,101,.45)}}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.mclose{position:sticky;top:10px;float:right;margin:10px 10px -46px 0;z-index:5;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid var(--gold);color:var(--gold);text-align:center;font-size:16px}
.mhead{position:relative}
.mhead img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;cursor:zoom-in}
.mtitle{position:absolute;left:0;right:0;bottom:0;padding:50px 16px 10px;background:linear-gradient(transparent,#1d1712 85%)}
.mtitle h3{font-family:var(--deco);color:var(--gold);font-size:27px;margin:0;line-height:1.1}
.mage{font-size:16px;margin:4px 0 0;color:var(--ink)}
.mbody{padding:6px 16px 22px;font-size:17.5px}
.mbody h4{font-family:var(--head);color:var(--gold);font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:16px 0 8px}
.sw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sw>div{background:rgba(142,42,31,.18);border:1px solid rgba(226,120,100,.35);border-radius:10px;padding:8px 10px;font-size:15.5px;line-height:1.35}
.sw b{display:block;font-family:var(--head);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#ff9f8a}
.ud{list-style:none;padding:0;margin:0;font-size:15.5px}.ud li{padding:3px 0}.ud .u{color:#a6e3ae}.ud .d{color:#ff9a8c}
/* map */
.map-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;border:2px solid var(--gold2);box-shadow:0 10px 30px rgba(0,0,0,.65),inset 0 0 0 1px #000;scrollbar-width:thin}
.map-wrap{position:relative;width:760px;max-width:none}
@media(min-width:800px){.map-wrap{width:100%}}
.map-img{width:100%;max-width:none}
.pin{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;text-align:center;
 font-family:var(--rune);font-size:15px;color:#1b1208;background:radial-gradient(circle at 35% 30%,#ffe7a8,var(--gold) 55%,var(--gold2));border:2px solid #3a240e;
 box-shadow:0 0 0 3px rgba(226,183,101,.3),0 3px 8px rgba(0,0,0,.6);animation:pulse 2.6s infinite}
.pin.on{background:radial-gradient(circle at 35% 30%,#ffb39b,#c9493b 60%,#7a1d14);color:#fff;animation:none;box-shadow:0 0 0 5px rgba(255,120,90,.45),0 0 18px rgba(255,90,60,.7);z-index:3}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(226,183,101,.3),0 3px 8px rgba(0,0,0,.6)}50%{box-shadow:0 0 0 8px rgba(226,183,101,.08),0 3px 8px rgba(0,0,0,.6)}}
.map-info{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(180deg,#efe2c4,#dcc8a0);color:#2b1d10;border-radius:10px;padding:12px;margin:14px 0;min-height:64px;
 box-shadow:inset 0 0 30px rgba(110,70,20,.35)}
.map-info img{width:84px;height:110px;object-fit:cover;border-radius:6px;border:1px solid #8a5d2a;flex:0 0 auto;cursor:zoom-in}
.map-info h4{font-family:var(--deco);color:#6e1d14;margin:0 0 4px;font-size:18px}
.map-info p{font-size:16px;margin:0;line-height:1.4}.map-info .muted{color:#6b5232}
.map-legend{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.map-legend li{font-family:var(--head);font-size:12.5px;padding:7px 8px;border-radius:8px;background:var(--stone);border:1px solid rgba(226,183,101,.2);cursor:pointer;display:flex;gap:7px;align-items:center;line-height:1.2}
.map-legend li.on{border-color:#c9493b;background:#2a1712}
.lr{font-family:var(--rune);color:var(--gold);font-size:15px;width:16px;text-align:center}
/* gallery */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
@media(min-width:720px){.ggrid{grid-template-columns:repeat(5,1fr)}}
.gt{position:relative;border-radius:9px;overflow:hidden;border:1px solid rgba(226,183,101,.3);background:#000}
.gt img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .4s,filter .4s}
.gt:active img{transform:scale(1.04)}
.gt span{position:absolute;left:0;right:0;bottom:0;padding:14px 5px 4px;font-size:11.5px;line-height:1.15;font-family:var(--head);color:#f5e6c4;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.blurred .gt img{filter:blur(16px) brightness(.6)}
.romance-gate{background:linear-gradient(160deg,#2a1216,#160c0e);border:1px solid rgba(224,96,122,.5);border-radius:12px;padding:12px 14px;margin:0 0 10px;font-size:16px}
.romance-gate.done .btn{display:none}.romance-gate.done p{margin:0}
.romance-gate.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.btn{display:block;width:100%;text-align:center;font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.05em;padding:11px;border-radius:999px;color:#fff;
 background:linear-gradient(180deg,#b33a4f,#7a1d2e);border:1px solid #ff9fb1}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px}
.lightbox img{max-width:100%;max-height:82vh;border-radius:8px;border:1px solid rgba(226,183,101,.4)}
.lightbox p{font-family:var(--head);color:var(--gold);margin:10px 0 0;font-size:15px;text-align:center}
.lb-close,.lb-prev,.lb-next{position:absolute;color:var(--gold);font-size:22px;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(226,183,101,.5);display:grid;place-items:center;text-align:center}
.lb-close{top:max(12px,env(safe-area-inset-top));right:12px}
.lb-prev{left:8px;top:50%;font-size:30px}.lb-next{right:8px;top:50%;font-size:30px}
/* play */
.goals{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:7px}
.goals li{background:var(--stone);border:1px solid rgba(226,183,101,.2);border-radius:10px;padding:8px 12px;font-size:17px}
.cmds{display:grid;gap:8px}
.cmd{background:linear-gradient(160deg,var(--stone2),var(--stone));border:1px solid rgba(226,183,101,.3);border-radius:12px;overflow:hidden}
.cmd summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer}
.cmd summary::-webkit-details-marker{display:none}
.cmd summary:after{content:"+";margin-left:auto;color:var(--gold);font-family:var(--head);font-size:20px}
.cmd[open] summary:after{content:"–"}
.cmd code{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:700;color:#1a120a;background:var(--gold);padding:3px 8px;border-radius:6px;flex:0 0 auto}
.cmd summary span{font-size:16px;line-height:1.25}
.cmd p{padding:0 12px 12px;margin:0;font-size:15.5px;color:var(--muted)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.85em;color:var(--gold)}
pre.info{background:#0b0908;border:1px solid rgba(226,183,101,.3);border-radius:10px;padding:12px;font-size:12.5px;line-height:1.5;color:#cfe8d0;overflow-x:auto;white-space:pre}
.tips{display:grid;gap:10px}
@media(min-width:720px){.tips{grid-template-columns:1fr 1fr}}
.tip{background:linear-gradient(180deg,#efe2c4,#dcc8a0);color:#2b1d10;border-radius:10px;padding:11px 13px;font-size:16px;line-height:1.4;box-shadow:inset 0 0 26px rgba(110,70,20,.3)}
.tip b{display:block;font-family:var(--head);color:#6e1d14;font-size:15px;margin-bottom:3px}
.tip q{display:block;font-style:italic;margin-top:4px;color:#4a3520}
.big-cta{font-family:var(--deco);color:var(--gold);font-size:21px;margin:28px 0 8px}
footer{text-align:center;padding:22px 18px 40px;color:var(--muted);font-size:14.5px;border-top:1px solid rgba(226,183,101,.2);max-width:720px;margin:0 auto}
.meter{display:block}
.aff-l{display:block;margin-top:2px}
.cbody{flex:1}.more{margin-top:auto;padding-top:6px}
.tier-legend{gap:4px}.tier-legend span{font-size:10.5px;padding:3px 7px}
.aff .meter.sm .tick{top:-2px;height:10px;width:1.5px;opacity:.8}
.tip b{display:inline;font-family:inherit;color:#5a160f;font-size:inherit;margin:0}
.tip>b:first-child{display:block;font-family:var(--head);color:#6e1d14;font-size:15px;margin-bottom:3px}
.tip code{color:#7a1d14;background:rgba(110,29,20,.12);padding:1px 5px;border-radius:4px}
pre.info{white-space:pre-wrap;word-break:break-word}
.pin{font-family:var(--head);font-weight:700;font-size:14px}
.lr{font-family:var(--head);font-weight:700;font-size:12px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1b1208;display:grid;place-items:center;flex:0 0 auto}
.gfeat img{aspect-ratio:4/5;object-position:center 30%;cursor:zoom-in}