
:root{
  color-scheme:dark;
  --void:#0f0913;
  --deep-plum:#1b1020;
  --ritual-pink:#ff78c6;
  --orb-violet:#b9a5ff;
  --cold-cyan:#aeefff;
  --spectral-green:#c9f7c2;
  --pearl:#fff0fa;
  --surface:rgba(36,23,43,.90);
  --surface-strong:#2a1b31;
  --surface-soft:rgba(69,43,77,.52);
  --border:rgba(202,191,219,.20);
  --border-strong:rgba(255,120,198,.42);
  --text:#f7edf5;
  --muted:#c9becb;
  --pink:#f4a3da;
  --pink-soft:#efb9df;
  --danger:#ef8f9d;
  --success:var(--spectral-green);
  --shadow:0 24px 70px rgba(0,0,0,.35);
  --font-body:Inter,system-ui,sans-serif;
  --font-heading:"Cormorant Garamond",Georgia,serif;
  --font-display:"Cinzel Decorative","Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box;animation:none!important;transition:none!important}
[hidden]{display:none!important}
html{background:var(--void)}
body{
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  font-family:var(--font-body);
  background:
    radial-gradient(circle at 18% 8%,rgba(164,83,143,.18),transparent 32rem),
    radial-gradient(circle at 85% 22%,rgba(87,69,132,.18),transparent 30rem),
    linear-gradient(145deg,#0f0a12 0%,#1b1020 55%,#100b14 100%);
}
body::before{
  content:"";
  position:fixed;inset:0;pointer-events:none;opacity:.13;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.2px),
    radial-gradient(circle,rgba(244,163,218,.8) 0 1px,transparent 1.2px);
  background-position:0 0,45px 62px;
  background-size:120px 120px,175px 175px;
  mask-image:linear-gradient(to bottom,black,transparent 68%);
}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-family:var(--font-heading)}
h1,.shrine-copy>h2,.realm-header h3{font-family:var(--font-display)}
h1{margin-bottom:0;font-size:clamp(1.9rem,3.7vw,3rem)}
h2{font-size:clamp(1.8rem,3vw,2.5rem)}
h3{font-size:1.45rem}
.ambient{position:fixed;width:28rem;height:28rem;border-radius:50%;filter:blur(90px);opacity:.16;pointer-events:none}
.ambient-one{top:-10rem;right:-6rem;background:var(--ritual-pink)}
.ambient-two{bottom:-14rem;left:-8rem;background:#6757af}
.yst-shell{width:min(1480px,calc(100% - 2rem));margin:0 auto;padding:1.5rem 0 3rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0 1.25rem}
.eyebrow{margin-bottom:.35rem;color:var(--pink-soft);font-size:.73rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.muted{color:var(--muted);line-height:1.55}
.surface{
  background:linear-gradient(145deg,rgba(53,34,60,.92),rgba(28,18,34,.94));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.button,.icon-button{
  border:1px solid transparent;border-radius:999px;
}
.button{min-height:2.75rem;padding:.65rem 1rem;font-weight:700}
.button-primary{color:#27101f;background:linear-gradient(135deg,var(--pink),var(--ritual-pink))}
.button-ghost{color:var(--text);background:rgba(255,255,255,.045);border-color:var(--border)}
.icon-button{width:2.55rem;height:2.55rem;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--text);border-color:var(--border)}
.shrine{
  min-height:24rem;
  display:grid;
  grid-template-columns:minmax(15rem,.8fr) minmax(20rem,1.3fr);
  align-items:center;
  gap:2rem;
  overflow:hidden;
  padding:clamp(1.5rem,4vw,3.4rem);
  border-radius:32px;
}
.shrine-visual{position:relative;min-height:18rem;display:grid;place-items:center}
.orbital-ring{position:absolute;border:1px solid rgba(244,163,218,.25);border-radius:50%}
.ring-one{width:15rem;height:15rem;transform:rotate(20deg)}
.ring-two{width:20rem;height:9rem;transform:rotate(-18deg)}
.ring-three{width:12rem;height:20rem;transform:rotate(42deg)}
.sigil{
  position:relative;
  width:9rem;height:9rem;
  border:1px solid rgba(255,120,198,.55);
  border-radius:50%;
  background:
    radial-gradient(circle,#f7d7ef 0 6%,transparent 7%),
    radial-gradient(circle,rgba(255,120,198,.35),rgba(16,8,19,.9) 65%);
  box-shadow:0 0 50px rgba(255,120,198,.18);
}
.sigil::before,.sigil::after{content:"";position:absolute;inset:18%;border:1px solid rgba(185,165,255,.45);transform:rotate(45deg)}
.sigil::after{transform:rotate(0deg)}
.sigil-eye{position:absolute;inset:50% auto auto 50%;width:20px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:var(--pearl);box-shadow:0 0 14px var(--ritual-pink)}
.void-orb{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--orb-violet);box-shadow:0 0 10px var(--orb-violet)}
.o1{left:15%;top:45%}.o2{right:15%;top:45%}.o3{left:45%;top:13%}.o4{left:45%;bottom:13%}
.summoning-caption{position:absolute;bottom:0;display:grid;text-align:center;color:var(--muted);font-size:.8rem}
.summoning-caption strong{color:var(--pink);font-size:1.25rem}
.shrine-status{margin-bottom:.45rem;color:var(--muted);line-height:1.5}
.shrine-whisper{min-height:1.4rem;color:var(--pink-soft);font-family:var(--font-heading);font-size:1.08rem;font-style:italic}
.progress-track{height:.75rem;overflow:hidden;border:1px solid var(--border);border-radius:999px;background:rgba(0,0,0,.25)}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--orb-violet),var(--ritual-pink))}
.shrine-metrics,.reality-stats,.dreaming-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1rem
}
.shrine-metrics div,.reality-stats div,.dreaming-stats div{
  padding:.85rem;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.14)
}
.shrine-metrics span,.reality-stats span,.dreaming-stats span{display:block;color:var(--muted);font-size:.72rem}
.shrine-metrics strong,.reality-stats strong,.dreaming-stats strong{display:block;margin-top:.25rem;font-size:1.35rem}
.sacrifice-controls{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}
.sacrifice-controls input{width:120px;padding:.65rem;border:1px solid var(--border);border-radius:999px;background:#120c15;color:var(--text)}
.worlds-panel{margin-top:1.25rem;border-radius:28px;overflow:hidden}
.world-switcher{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}
.world-tab{padding:1rem;border:0;background:rgba(0,0,0,.13);color:var(--muted);font-weight:800}
.world-tab.active{background:rgba(244,163,218,.08);color:var(--text);box-shadow:inset 0 -3px 0 var(--ritual-pink)}
.world-tab-kicker{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-soft)}
.world-panel{display:none;padding:clamp(1.1rem,3vw,2rem)}
.world-panel.active{display:block}
.realm-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.realm-header h3{margin-bottom:.35rem}
.header-button-group{display:flex;gap:.65rem;flex-wrap:wrap}
.tab-row{display:flex;gap:.45rem;flex-wrap:wrap;margin:1rem 0}
.tab-button{padding:.6rem .9rem;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.03);color:var(--muted);font-weight:700}
.tab-button.active{background:rgba(255,120,198,.12);border-color:var(--border-strong);color:var(--text)}
.waking-tab{display:none}.waking-tab.active{display:block}
.card-list{display:grid;gap:.8rem}
.chore-card,.ritual-card{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:1rem;border:1px solid var(--border);border-radius:16px;background:rgba(0,0,0,.14)
}
.chore-card.due{border-color:rgba(255,120,198,.38);background:rgba(255,120,198,.055)}
.chore-card h3,.ritual-card h3{margin-bottom:.25rem}
.chore-card p:last-child,.ritual-card p{margin-bottom:0;color:var(--muted)}
.complete-button{min-height:2.8rem;padding:.7rem 1rem;border:0;border-radius:999px;background:var(--spectral-green);color:#152117;font-weight:800}
.ritual-card{grid-template-columns:1fr}
.ritual-card ul{margin:.4rem 0 .2rem;padding-left:1.2rem;color:var(--muted)}
.veil-panel{padding:1.25rem;border:1px dashed var(--border);border-radius:16px;background:rgba(0,0,0,.12)}
.veil-items{display:flex;gap:.5rem;flex-wrap:wrap}.veil-items span{padding:.45rem .65rem;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.dreaming-stats{grid-template-columns:repeat(2,1fr)}
.dreaming-rule{padding:.8rem;border-left:2px solid var(--cold-cyan);background:rgba(174,239,255,.05);color:var(--muted)}
.game-list{display:grid;gap:.7rem}
.game-list label{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:center;padding:.9rem 1rem;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.14)}
.game-list input{width:20px;height:20px;accent-color:var(--ritual-pink)}
.game-list strong,.game-list small{display:block}.game-list small{margin-top:.2rem;color:var(--muted)}
.customization{margin-top:1.25rem;padding:clamp(1.2rem,3vw,2rem);border-radius:24px}
.customization>div:first-child>p:last-child{max-width:800px;color:var(--muted);line-height:1.6}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-top:1rem}
.detail-grid article{padding:1rem;border:1px solid var(--border);border-radius:14px;background:rgba(0,0,0,.12)}
.detail-grid span{display:block;color:var(--pink-soft);font-size:.7rem;font-weight:800;letter-spacing:.12em}
.detail-grid strong{display:block;margin-top:.35rem;line-height:1.35}
.essential-dialog{
  position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:1.5rem;background:rgba(8,4,10,.82)
}
.essential-dialog>div{width:min(520px,100%);padding:2rem;border:1px solid var(--border-strong);border-radius:24px;background:#1b1020;box-shadow:var(--shadow)}
.toast{position:fixed;right:18px;bottom:18px;z-index:10000;padding:.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:#2a1b31;color:var(--text);opacity:0;pointer-events:none}
.toast.show{opacity:1}
@media(max-width:900px){
  .shrine{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  .yst-shell{width:min(100% - 1rem,1480px)}
  .topbar,.realm-header{display:block}
  .topbar .icon-button{margin-top:1rem}
  .header-button-group{margin-top:1rem}
  .shrine-metrics,.reality-stats,.dreaming-stats{grid-template-columns:1fr}
  .chore-card{grid-template-columns:1fr}
  .detail-grid{grid-template-columns:1fr}
}
