/* Forbidden Rites — ritual violet, candlelight amber, bone and blood. */
:root{color-scheme:dark;
  --void:#07050c;--night:#0d0916;--stone:#130e1f;--stone2:#1a1329;--edge:#2f2542;--edge2:#4a3a60;
  --bone:#eadfc4;--bone-dim:#b7aa8e;--faint:#887d99;
  --candle:#f1b35c;--candle-hi:#ffd894;--candle-g:rgba(241,179,92,.16);
  --ritual:#9b6bff;--ritual-hi:#cdb4ff;--ritual-g:rgba(155,107,255,.18);
  --blood:#c03a48;--blood-hi:#ff8795;--ok:#7fe0b4;
  --display:"Cinzel Decorative","Cinzel",Georgia,serif;--head:"Cinzel",Georgia,serif;--ui:"Alegreya SC",Georgia,serif;--body:"Crimson Pro",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);--r:3px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:var(--void);color:var(--bone);font:clamp(16px,.35vw + 14.6px,19px)/1.6 var(--body);overflow-x:hidden}
::selection{background:var(--ritual);color:#fff}
a{color:var(--ritual-hi);text-underline-offset:3px}
a:hover{color:var(--candle-hi)}
:focus-visible{outline:2px solid var(--candle);outline-offset:3px}
img{max-width:100%}
h1,h2,h3,h4,h5{margin:0;font-family:var(--head);font-weight:700;letter-spacing:.03em;color:var(--bone)}
p{margin:0;overflow-wrap:anywhere}
.skip{position:fixed;left:12px;top:-80px;z-index:99;background:var(--candle);color:#120a04;padding:10px 16px;font-family:var(--ui)}
.skip:focus{top:10px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- the void: totem art, drifting fog, embers */
.void{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(90% 70% at 70% 20%,#1c0f35 0,transparent 60%),radial-gradient(70% 60% at 0 100%,rgba(192,58,72,.12),transparent 60%),var(--void)}
.totem-bg{position:absolute;right:-8vw;top:-6vh;width:min(1100px,95vw);aspect-ratio:1280/1063;background:url("art/rites/totem.webp") center/contain no-repeat;opacity:.42;
  -webkit-mask:radial-gradient(closest-side,#000 45%,transparent 100%);mask:radial-gradient(closest-side,#000 45%,transparent 100%);transition:transform 1.2s var(--ease);filter:saturate(1.1)}
.fog{position:absolute;inset:-20%;opacity:.5;background:radial-gradient(40% 30% at 30% 40%,rgba(120,80,200,.18),transparent 70%),radial-gradient(35% 25% at 70% 70%,rgba(90,50,160,.16),transparent 70%);animation:fog 40s ease-in-out infinite alternate}
.fog.f2{animation-duration:60s;animation-direction:alternate-reverse;opacity:.35;background:radial-gradient(30% 25% at 60% 30%,rgba(192,58,72,.12),transparent 70%),radial-gradient(45% 30% at 20% 80%,rgba(155,107,255,.14),transparent 70%)}
@keyframes fog{from{transform:translate3d(-4%,2%,0) scale(1)}to{transform:translate3d(5%,-3%,0) scale(1.12)}}
#embers{position:absolute;inset:0;width:100%;height:100%}
.vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 50%,rgba(3,2,6,.85) 100%),linear-gradient(90deg,rgba(7,5,12,.7),transparent 60%)}
.spark{position:fixed;z-index:90;width:5px;height:5px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--candle-hi);box-shadow:0 0 8px var(--candle),0 0 14px var(--ritual);pointer-events:none;animation:spark .7s var(--ease) forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* ---------- top bar */
.top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px;width:min(1320px,100% - clamp(24px,5vw,72px));margin:0 auto;padding:16px 0}
.homelink{font-family:var(--ui);font-weight:700;color:var(--bone-dim);text-decoration:none;border:1px solid var(--edge2);padding:6px 14px;border-radius:var(--r);background:rgba(13,9,22,.7);transition:.3s}
.homelink:hover{color:var(--candle-hi);border-color:var(--candle)}
.lang{display:flex;border:1px solid var(--edge2);border-radius:var(--r);overflow:hidden;background:rgba(13,9,22,.7)}
.lang a{font-family:var(--ui);font-weight:700;padding:6px 14px;color:var(--bone-dim);text-decoration:none;min-height:36px;display:grid;place-items:center}
.lang a[aria-current]{background:linear-gradient(180deg,var(--ritual-hi),var(--ritual));color:#12082a}
.sibling{margin-left:auto;padding:6px 13px;text-decoration:none;font:700 .78rem var(--head);color:#d7c18c;border:1px solid #60594d;background:rgba(11,29,31,.82);transition:border-color .3s,color .3s}.sibling:hover{border-color:#8ddacb;color:#a9e5d3}
@media(max-width:560px){.sibling{font-size:.65rem;padding:5px 8px}}
#app{position:relative;z-index:2;width:min(1320px,100% - clamp(24px,5vw,72px));margin:0 auto;padding-bottom:60px}

/* ---------- frames */
.frame{position:relative;border:1px solid var(--edge);border-radius:var(--r);background:linear-gradient(180deg,rgba(26,19,41,.9),rgba(13,9,22,.93));
  box-shadow:inset 0 1px 0 rgba(234,223,196,.08),inset 0 0 0 1px rgba(0,0,0,.5),0 30px 60px -30px #000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.frame::before{content:"";position:absolute;inset:-5px;pointer-events:none;background:
  linear-gradient(var(--bone-dim),var(--bone-dim)) left 4px top 4px/20px 1px no-repeat,linear-gradient(var(--bone-dim),var(--bone-dim)) left 4px top 4px/1px 20px no-repeat,
  linear-gradient(var(--bone-dim),var(--bone-dim)) right 4px top 4px/20px 1px no-repeat,linear-gradient(var(--bone-dim),var(--bone-dim)) right 4px top 4px/1px 20px no-repeat,
  linear-gradient(var(--bone-dim),var(--bone-dim)) left 4px bottom 4px/20px 1px no-repeat,linear-gradient(var(--bone-dim),var(--bone-dim)) left 4px bottom 4px/1px 20px no-repeat,
  linear-gradient(var(--bone-dim),var(--bone-dim)) right 4px bottom 4px/20px 1px no-repeat,linear-gradient(var(--bone-dim),var(--bone-dim)) right 4px bottom 4px/1px 20px no-repeat,
  radial-gradient(circle,var(--candle) 0 1.8px,transparent 2.6px) left 0 top 0/9px 9px no-repeat,radial-gradient(circle,var(--candle) 0 1.8px,transparent 2.6px) right 0 top 0/9px 9px no-repeat,
  radial-gradient(circle,var(--candle) 0 1.8px,transparent 2.6px) left 0 bottom 0/9px 9px no-repeat,radial-gradient(circle,var(--candle) 0 1.8px,transparent 2.6px) right 0 bottom 0/9px 9px no-repeat;opacity:.55}

/* ---------- buttons, chips, rings */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 20px;border-radius:var(--r);border:1px solid var(--edge2);overflow:hidden;cursor:pointer;
  font-family:var(--head);font-weight:700;font-size:.92rem;letter-spacing:.06em;color:var(--bone);text-decoration:none;background:linear-gradient(180deg,#221936,#110b1d);
  box-shadow:inset 0 1px 0 rgba(234,223,196,.12),0 2px 0 rgba(0,0,0,.5);transition:transform .3s var(--ease),border-color .3s,box-shadow .35s,color .3s}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,216,148,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{transform:translateY(-2px);border-color:var(--candle);color:var(--candle-hi);box-shadow:0 10px 26px -10px var(--candle)}
.btn:hover::after{transform:translateX(120%)}
.btn.primary{color:#170a02;border-color:var(--candle-hi);background:linear-gradient(180deg,var(--candle-hi),var(--candle) 55%,#b9772c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 30px -10px var(--candle)}
.btn.primary:hover{color:#170a02}
.btn.sm{min-height:36px;padding:6px 12px;font-size:.8rem}
.btn.ghost{background:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border:1px solid var(--edge2);border-radius:2px;font-family:var(--ui);font-size:.8rem;color:var(--bone-dim);background:rgba(7,5,12,.5)}
.chip.ok{color:var(--ok);border-color:rgba(127,224,180,.5)}
.ring .rt{fill:none;stroke:rgba(255,255,255,.08);stroke-width:4}
.ring .rv{fill:none;stroke:var(--ritual);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 4px var(--ritual));transition:stroke-dasharray .8s var(--ease)}
.ring text{fill:var(--bone);font:700 14px var(--head)}
.ico{display:block;width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 8px #000)}
.ico.big{width:64px;height:64px}
.bar{height:8px;border-radius:4px;background:rgba(255,255,255,.07);border:1px solid #000;overflow:hidden;flex:1;min-width:120px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blood),var(--ritual) 60%,var(--ritual-hi));box-shadow:0 0 10px var(--ritual);transition:width .8s var(--ease)}

/* ---------- hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,60px);align-items:center;min-height:min(78vh,760px);padding:clamp(10px,3vw,40px) 0 clamp(30px,5vw,60px)}
.kicker{font-family:var(--ui);letter-spacing:.2em;font-size:.82rem;color:var(--candle);display:flex;align-items:center;gap:10px}
.kicker .dia{width:7px;height:7px;background:var(--candle);transform:rotate(45deg);box-shadow:0 0 12px var(--candle);animation:flicker 3.2s infinite}
@keyframes flicker{0%,100%{opacity:1}42%{opacity:.75}45%{opacity:1}70%{opacity:.85}}
h1{font-family:var(--display);font-weight:900;line-height:.95;font-size:clamp(2.6rem,5.2vw,6.6rem);margin:14px 0 8px;letter-spacing:.01em}
h1 span{display:block;background:linear-gradient(180deg,#fff6df 0%,var(--bone) 35%,#9d8c6a 75%,#5d4e37 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(155,107,255,.55)) drop-shadow(0 6px 10px #000)}
h1 .h1b{padding-left:.6em}
.sub{font-family:var(--head);font-size:clamp(1.1rem,1.3vw + .7rem,1.7rem);color:var(--ritual-hi);letter-spacing:.08em}
.lead{max-width:56ch;color:var(--bone-dim);font-size:clamp(1.02rem,.4vw + .92rem,1.22rem);margin-top:14px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ends{margin-top:18px;color:var(--faint);font-family:var(--ui);font-size:.9rem}
.ends b{color:var(--candle-hi)}
.hero-sigil{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:560px;width:100%;justify-self:center}
.hero-sigil .circle{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(205,180,255,.35);stroke-width:1;animation:spin 90s linear infinite;filter:drop-shadow(0 0 6px rgba(155,107,255,.6))}
.hero-sigil .circle line{stroke:rgba(241,179,92,.45)}
.hero-sigil .circle polygon{stroke:rgba(192,58,72,.35)}
@keyframes spin{to{rotate:360deg}}
.hero-sigil .totem{position:relative;width:86%;-webkit-mask:radial-gradient(closest-side,#000 55%,transparent 100%);mask:radial-gradient(closest-side,#000 55%,transparent 100%);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.15)}}
.count{position:absolute;right:2%;bottom:6%;display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,rgba(26,19,41,.95),rgba(7,5,12,.95));border:1px solid var(--edge2);box-shadow:0 0 40px -6px var(--ritual)}
.count .ring{position:absolute;inset:0}
.count .ring .rv{stroke:var(--candle);filter:drop-shadow(0 0 6px var(--candle))}
.count b{position:relative;font:900 2.4rem/1 var(--display);color:var(--bone)}
.count b small{font-size:.5em;color:var(--bone-dim)}
.count span{position:absolute;bottom:22px;font-family:var(--ui);font-size:.62rem;letter-spacing:.08em;color:var(--bone-dim);text-align:center;width:90px;line-height:1.1}

/* ---------- rewards track */
.rewards,.order{padding:clamp(18px,2.4vw,30px);margin-bottom:22px}
.rewards h2,.order h2,.mechs>h2,.foot h2{font-size:clamp(1.3rem,1vw + 1rem,1.9rem);margin-bottom:16px}
.track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;position:relative}
.track::before{content:"";position:absolute;left:4%;right:4%;top:19px;height:2px;background:linear-gradient(90deg,var(--edge2),var(--edge2))}
.track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.track .step{position:relative;z-index:1;width:40px;height:40px;display:grid;place-items:center;font:700 .95rem var(--head);color:var(--bone-dim);background:var(--night);border:1px solid var(--edge2);transform:rotate(45deg);transition:.5s var(--ease)}
.track li .step::after{content:"";position:absolute;inset:4px;border:1px solid transparent}
.track li.got .step{color:#120a04;background:radial-gradient(circle at 35% 30%,var(--candle-hi),var(--candle));border-color:var(--candle-hi);box-shadow:0 0 18px var(--candle)}
.track .step i{font-style:normal;transform:rotate(-45deg)}
.track figure{margin:0;display:grid;justify-items:center;gap:6px;padding:10px 6px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.55);width:100%;transition:.4s var(--ease)}
.track li.got figure{border-color:var(--candle);box-shadow:0 0 22px -8px var(--candle)}
.track figure .ico{width:64px;height:64px}
.track figcaption b{display:block;font-family:var(--ui);font-size:.8rem;line-height:1.15}
.track figcaption small{display:block;color:var(--faint);font-size:.78rem;line-height:1.25;margin-top:4px}
.track figcaption em{display:block;font-style:normal;font-family:var(--ui);font-size:.72rem;color:var(--ritual-hi);margin-top:4px}
.track .piece{color:var(--faint);font-size:1.1rem;margin-top:10px}
.track li.got .piece{color:var(--candle);text-shadow:0 0 10px var(--candle)}
.note{color:var(--faint);font-size:.92rem;margin-top:12px}
.order ol{margin:0;padding-left:0;list-style:none;counter-reset:o;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.order li{counter-increment:o;position:relative;padding:14px 14px 14px 52px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.5);color:var(--bone-dim)}
.order li::before{content:counter(o);position:absolute;left:14px;top:14px;width:26px;height:26px;display:grid;place-items:center;font:700 .85rem var(--head);color:var(--candle-hi);border:1px solid var(--candle);transform:rotate(45deg)}

/* ---------- sticky challenge nav */
.chnav{position:sticky;top:0;z-index:20;margin:0 calc(-1*clamp(12px,2.5vw,36px)) 26px;padding:10px clamp(12px,2.5vw,36px);background:linear-gradient(180deg,rgba(7,5,12,.96),rgba(7,5,12,.85));border-bottom:1px solid var(--edge);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.chnav-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.chnav-in::-webkit-scrollbar{display:none}
.chnav a{flex:none;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--edge);border-radius:40px;text-decoration:none;color:var(--bone-dim);font-family:var(--ui);font-weight:700;font-size:.88rem;background:rgba(19,14,31,.8);transition:.35s var(--ease);min-height:44px}
.chnav a:hover{color:var(--bone);border-color:var(--edge2)}
.chnav a.cur{color:var(--bone);border-color:var(--ritual);box-shadow:0 0 18px -6px var(--ritual)}
.chnav a.ok{color:var(--ok)}
.chnav a.ok .ring .rv{stroke:var(--ok)}

/* ---------- challenge sections */
.chlist{display:grid;gap:34px}
.ch{overflow:hidden}
.ch-art{position:relative;height:clamp(90px,12vw,150px);background:var(--art) center/cover;border-bottom:1px solid var(--edge)}
.ch-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,5,12,.85) 0,rgba(7,5,12,.15) 45%,rgba(7,5,12,.7)),linear-gradient(180deg,transparent 35%,rgba(13,9,22,1))}
.ch-art{background-size:cover;background-position:center;transition:background-position 1.4s var(--ease)}
.ch:hover .ch-art{background-position:center 40%}
.ch-art .num{position:absolute;z-index:1;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);font:900 clamp(3rem,6vw,5.5rem)/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(234,223,196,.35)}
.ch-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,2vw,24px);align-items:center;padding:0 clamp(16px,2.4vw,32px);margin-top:-44px;position:relative;z-index:1}
.ico.sigil{width:88px;height:88px;padding:12px;border-radius:50%;background:radial-gradient(circle,#281b42,#0b0714 75%);border:1px solid var(--edge2);box-shadow:0 0 0 4px var(--void),0 0 0 5px rgba(241,179,92,.5),0 0 30px -4px var(--ritual)}
.ch-title h2{font-size:clamp(1.5rem,1.6vw + 1rem,2.4rem);text-shadow:0 0 18px rgba(155,107,255,.5)}
.req{margin-top:4px;font-style:italic;color:var(--candle-hi);font-size:1.02rem}
.req span{font-style:normal;font-family:var(--ui);font-size:.78rem;letter-spacing:.1em;color:var(--faint)}
.reqpt{color:var(--bone-dim)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ch-prog{display:grid;justify-items:center}
.ch-prog .ring text{font-size:20px}
.ch-prog small{font-family:var(--ui);color:var(--faint);margin-top:-4px}
.ch.complete .ch-prog .ring .rv{stroke:var(--ok);filter:drop-shadow(0 0 6px var(--ok))}
.ch.complete{border-color:rgba(127,224,180,.35)}
.ch-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(18px,2.6vw,36px);padding:clamp(16px,2.4vw,32px)}
.col h3{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--candle);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.col h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--edge2),transparent)}
.col h3.t2{margin-top:24px}
.steps ol{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px}
.steps ol li{counter-increment:s;position:relative;padding-left:40px;color:var(--bone)}
.steps ol li::before{content:counter(s);position:absolute;left:0;top:2px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font:700 .82rem var(--head);color:var(--ritual-hi);border:1px solid var(--ritual);background:var(--ritual-g)}
.tips{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tips li{position:relative;padding:10px 12px 10px 38px;border-left:2px solid var(--blood);background:linear-gradient(90deg,rgba(192,58,72,.12),transparent);color:var(--bone-dim);border-radius:0 var(--r) var(--r) 0}
.tips li::before{content:"✦";position:absolute;left:14px;top:10px;color:var(--blood-hi)}

/* ---------- checkboxes as ritual gems */
.chk{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;min-height:40px}
.chk input{position:absolute;opacity:0;width:28px;height:28px;margin:0;cursor:pointer}
.chk .gem{flex:none;width:20px;height:20px;transform:rotate(45deg);border:1px solid var(--edge2);background:radial-gradient(circle,#231836,#07050c);transition:.35s var(--ease)}
.chk input:focus-visible + .gem{outline:2px solid var(--candle);outline-offset:3px}
.chk:hover .gem{border-color:var(--ritual)}
.chk.on .gem{background:radial-gradient(circle at 35% 30%,#fff,var(--ritual-hi) 25%,var(--ritual) 70%);border-color:var(--ritual-hi);box-shadow:0 0 14px var(--ritual);animation:stamp .5s var(--ease)}
@keyframes stamp{40%{transform:rotate(45deg) scale(1.35)}}
.chk .lbl{display:grid}
.chk .lbl small{color:var(--faint);font-size:.88rem}
.chk.on .lbl b{color:var(--ok)}

/* ---------- tools */
.tbl{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th{font-family:var(--ui);font-size:.76rem;letter-spacing:.1em;text-align:left;color:var(--candle);background:rgba(241,179,92,.07);padding:9px 10px;border-bottom:1px solid var(--edge2);white-space:nowrap}
td{padding:6px 10px;border-bottom:1px solid rgba(47,37,66,.7);vertical-align:middle}
tbody tr{transition:background .25s}
tbody tr:hover{background:var(--ritual-g)}
tbody tr.on td b{color:var(--ok)}
td.num{font-family:var(--ui);white-space:nowrap;color:var(--candle-hi)}
.rites{display:grid;gap:8px}
details.rite{border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.45);transition:border-color .3s}
details.rite[open]{border-color:var(--edge2)}
details.rite.ok{border-color:rgba(127,224,180,.4)}
details.rite summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:48px}
details.rite summary::-webkit-details-marker{display:none}
details.rite summary::after{content:"+";margin-left:8px;color:var(--candle);font-size:1.3rem;transition:transform .4s var(--ease)}
details.rite[open] summary::after{transform:rotate(45deg)}
details.rite .act{font-family:var(--ui);font-size:.74rem;color:var(--faint);min-width:80px}
details.rite b{flex:1;font-family:var(--head)}
details.rite.ok b{color:var(--ok)}
.mini{font-family:var(--ui);font-size:.85rem;color:var(--ritual-hi)}
details.rite > .btn{margin:0 14px 10px}
details.rite .tbl{margin:0 10px 12px;border:0}
details[open] > :not(summary){animation:open .45s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}
.rares{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px}
.actgroup h4{font-family:var(--ui);font-size:.8rem;letter-spacing:.14em;color:var(--candle);margin-bottom:6px}
.rare{padding:6px 10px;border:1px solid var(--edge);border-radius:var(--r);margin-bottom:6px;background:rgba(7,5,12,.45);transition:.3s}
.rare.on{border-color:rgba(127,224,180,.35);background:rgba(127,224,180,.05)}
.trials{display:grid;gap:10px}
.trial{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.45)}
.trial.on{border-color:rgba(127,224,180,.35)}
.trial p{color:var(--bone-dim);font-size:.95rem;margin-left:32px}
.pts{font-family:var(--ui);font-size:.8rem;color:var(--candle)}
details.chaos{margin-top:14px;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:rgba(7,5,12,.45)}
details.chaos summary{list-style:none;cursor:pointer;position:relative;display:grid;min-height:70px;align-items:center}
details.chaos summary::-webkit-details-marker{display:none}
details.chaos .ico.banner{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
details.chaos summary b{position:relative;padding:14px;font-family:var(--head)}
details.chaos ul{margin:0;padding:12px 16px 14px 34px;color:var(--bone-dim);display:grid;gap:6px}
.numtool{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.45)}
.numtool label{display:flex;align-items:center;gap:10px;font-family:var(--ui)}
.numtool input{width:90px;min-height:42px;padding:6px 10px;border-radius:var(--r);border:1px solid var(--edge2);background:var(--void);color:var(--bone);font:700 1.1rem var(--head);text-align:center}
.numtool input:focus{border-color:var(--ritual);outline:none;box-shadow:0 0 0 3px var(--ritual-g)}
.numtool > span{font-family:var(--ui);color:var(--candle-hi)}
.numtool.slim{padding:6px 0;border:0;background:none}
.numtool.slim input{width:70px}
.trees{display:grid;gap:12px}
.tree{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.45)}
.tree.on{border-color:rgba(127,224,180,.35)}
.tree small{display:block;color:var(--faint)}
.tree b{font-family:var(--head)}
.bosses{display:grid;gap:12px}
.boss{padding:14px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(7,5,12,.45)}
.boss.on{border-color:rgba(127,224,180,.35)}
.boss header{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center}
.mech{font-family:var(--ui);font-size:.74rem;letter-spacing:.14em;color:var(--blood-hi)}
.keys{display:flex;gap:16px;margin:10px 0}
.keys figure{margin:0;display:grid;justify-items:center;gap:2px}
.keys figcaption{font-family:var(--ui);font-size:.72rem;color:var(--faint)}
.boss h5{font-family:var(--ui);font-size:.8rem;letter-spacing:.12em;color:var(--candle);margin:6px 0}
.boss ol{margin:0;padding-left:20px;color:var(--bone-dim);display:grid;gap:4px}
.boss .tip{margin-top:10px;padding:8px 10px;border-left:2px solid var(--ritual);background:var(--ritual-g);color:var(--bone-dim);font-size:.94rem}

/* ---------- omen planner */
.plan-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px}
.plan-sum{display:flex;gap:12px;align-items:center}
.plan-sum b{display:block;font-family:var(--head)}
.plan-sum span{color:var(--bone-dim);font-size:.95rem}
.plan-sum span b{display:inline;color:var(--candle-hi)}
.toggles{display:flex;flex-wrap:wrap;gap:14px}
.sw{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-size:.88rem;cursor:pointer;min-height:40px}
.sw input{position:absolute;opacity:0}
.sw i{position:relative;width:42px;height:22px;border-radius:12px;border:1px solid var(--edge2);background:var(--void);transition:.3s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--faint);transition:.35s var(--ease)}
.sw input:checked + i{background:var(--ritual-g);border-color:var(--ritual)}
.sw input:checked + i::after{transform:translateX(20px);background:var(--ritual-hi);box-shadow:0 0 8px var(--ritual)}
.sw input:focus-visible + i{outline:2px solid var(--candle);outline-offset:2px}
.om{display:flex;align-items:center;gap:8px}
.om .ico{width:34px;height:34px}
.om b{font-family:var(--ui);font-size:.92rem}
table.omens tr.plan{background:linear-gradient(90deg,rgba(241,179,92,.1),transparent)}
table.omens tr.plan td:first-child{box-shadow:inset 3px 0 0 var(--candle)}
table.omens tr.blocked{opacity:.45}
table.omens td small{color:var(--faint)}
.warn{font-style:normal;color:var(--blood-hi);margin-left:6px}

/* ---------- mechanics + footer */
.mechs{margin-top:46px}
.lead2{color:var(--bone-dim);margin:-8px 0 16px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:16px}
.mech{overflow:hidden;transition:transform .5s var(--ease),border-color .3s}
.mech:hover{transform:translateY(-4px);border-color:var(--edge2)}
.mech img{display:block;width:100%;height:clamp(90px,10vw,130px);object-fit:cover;border-bottom:1px solid var(--edge);transition:transform 1s var(--ease)}
.mech:hover img{transform:scale(1.05)}
.mech div{padding:16px 18px}
.mech h3{font-size:1.15rem;margin-bottom:6px;color:var(--candle-hi)}
.mech p{color:var(--bone-dim)}
.items{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:18px}
.items figure{margin:0;display:grid;justify-items:center;gap:4px;padding:12px;min-width:120px;border:1px solid var(--edge);border-radius:var(--r);background:rgba(13,9,22,.8);transition:.4s var(--ease)}
.items figure:hover{border-color:var(--ritual);transform:translateY(-3px);box-shadow:0 10px 26px -12px var(--ritual)}
.items .ico{width:56px;height:56px}
.items figcaption{font-family:var(--ui);font-size:.8rem;color:var(--bone-dim)}
.foot{margin-top:50px;padding-top:24px;border-top:1px solid var(--edge);color:var(--faint)}
.foot ul{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-wrap:wrap;gap:8px 18px}
.foot p{font-size:.92rem;margin-bottom:14px}

/* ---------- reveal */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform 1s var(--ease)}
.hero-copy > *{animation:rise 1s var(--ease) both}
.hero-copy > *:nth-child(2){animation-delay:.08s}.hero-copy > *:nth-child(3){animation-delay:.16s}.hero-copy > *:nth-child(4){animation-delay:.24s}.hero-copy > *:nth-child(5){animation-delay:.32s}
.hero-sigil{animation:rise 1.2s .2s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}

/* ---------- responsive */
@media (min-width:1920px){#app,.top{width:min(1560px,100% - 120px)}}
@media (max-width:1100px){.track{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px}.track::before{display:none}.ch-body{grid-template-columns:1fr}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  h1{font-size:clamp(2.4rem,12vw,5.6rem)}
  .hero-sigil{max-width:360px;order:-1;margin-top:-10px}
  .totem-bg{opacity:.25;right:-40vw}
  .ch-head{grid-template-columns:auto minmax(0,1fr);margin-top:-36px}
  .ch-prog{grid-column:1/-1;justify-self:start;display:flex;align-items:center;gap:8px}
}
@media (max-width:640px){
  html{scroll-padding-top:74px}
  .hero-sigil{max-width:280px}
  .count{width:104px;height:104px;right:-4px;bottom:0}
  .count .ring{width:104px;height:104px}
  .count b{font-size:1.9rem}
  .count span{bottom:14px;font-size:.52rem}
  .track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ico.sigil{width:66px;height:66px;padding:9px}
  .ch-art .num{font-size:3rem}
  .cta .btn{flex:1 1 200px}
  .trial,.tree{grid-template-columns:48px minmax(0,1fr)}
  .ico.big{width:48px;height:48px}
  .trial p{margin-left:0}
  table.omens thead,.rite table thead{display:none}
  table.omens tr,.rite table tr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 8px;padding:8px 6px;border-bottom:1px solid var(--edge)}
  table.omens td,.rite table td{border:0;padding:2px 0}
  table.omens td:first-child,.rite table td:first-child{grid-row:span 3}
  table.omens td.num{justify-self:start}
  .rite table td[data-l]::before,table.omens td[data-l="Custo"]::before,table.omens td[data-l="Cost"]::before{content:attr(data-l) " · ";font-family:var(--ui);font-size:.72rem;color:var(--faint)}
  .rite table td:nth-child(2)::before{content:none}
  .chnav a span{white-space:nowrap}
}
@media (max-width:360px){h1{font-size:2.6rem}.track{grid-template-columns:1fr 1fr}.chnav a span{display:none}}
@media (max-height:500px) and (orientation:landscape){.chnav{position:relative}.hero{min-height:0}.hero-sigil{max-width:240px}}
@media (pointer:coarse){.btn.sm{min-height:44px;min-width:44px}.chk{min-height:44px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.rv{opacity:1;transform:none}#embers{display:none}}
@media print{.void,.chnav,.top,.cta,.btn{display:none!important}body{background:#fff;color:#111}.frame{background:#fff;box-shadow:none}h1 span{-webkit-text-fill-color:#111;color:#111}}
/* decorative chapter number never sits on the title */
.ch-art .num{top:14px;transform:none;line-height:.9}
@media (max-width:860px){.ch-art .num{font-size:2.6rem;top:10px;right:14px}.ch-head{margin-top:-30px}}
@media (max-width:640px){.ch-art{height:96px}.ch-art .num{font-size:2.2rem;top:8px}}

/* celular: recompensas da liga em lista (sem metade da linha vazia nos marcos sem recompensa) */
@media (max-width:640px){
  .track{grid-template-columns:1fr;row-gap:10px}
  .track li{flex-direction:row;align-items:center;text-align:left;gap:18px;padding-left:4px}
  .track .step{flex:none;width:34px;height:34px}
  .track .piece{margin:0}
  .track figure{flex:1;grid-template-columns:56px minmax(0,1fr);justify-items:start;align-items:center;column-gap:12px;padding:10px 12px}
  .track figure .ico{width:52px;height:52px}
}