:root{
  --abyss:#201d2e; --void:#1a1726; --card:#171522;
  --bone:#d6d2ea; --ash:#a29dc0; --pale:#ece8fa;
  --ink:#32269e; --ink-deep:#241b73; --ink-dark:#1b1454; --ink-light:#4c3cc4; --ink-pale:#7466d6;
  --glow:#ece8fa;
  --lavender:#c9bdf0; --burnt:#c97a45;
}
*{margin:0;padding:0;box-sizing:border-box;}

/* System-font stacks only — no external requests, works everywhere */
body{
  background:var(--abyss);color:var(--bone);
  font-family:Garamond,'Palatino Linotype',Palatino,Georgia,serif;
  overflow-x:hidden;
}
.display-font, .nav-logo, .entity-name, .archive-title, .post-title-bar,
.section-title, .metric-value, .confession-sheet h3, .loading-text,
.book-page-tile h3, .contact-box button, .nav-links button, .unveil-rune{
  font-family:'Big Caslon','Didot',Georgia,'Times New Roman',serif;
}
a{color:inherit;}

/* ---------- loading screen ---------- */
.loading-screen{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(ellipse at center,var(--void) 0%,var(--abyss) 100%);
  display:flex;align-items:center;justify-content:center;
  animation:loading-fadeout 3s ease-in-out forwards;
}
@keyframes loading-fadeout{0%,80%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}}
.loading-screen.hidden{display:none !important;}
.ritual-container{display:flex;flex-direction:column;align-items:center;gap:34px;}
.ritual-circle{position:relative;width:220px;height:220px;animation:ritual-emerge 1.6s ease-out;}
@keyframes ritual-emerge{0%{opacity:0;transform:scale(.3) rotate(-140deg);}100%{opacity:1;transform:scale(1) rotate(0deg);}}
.circle-outer,.circle-middle,.circle-inner{position:absolute;border-radius:50%;border:1px solid;top:50%;left:50%;transform:translate(-50%,-50%);}
.circle-outer{width:100%;height:100%;border-color:var(--ink-light);animation:pulse-outer 3s infinite ease-in-out;box-shadow:0 0 20px rgba(76,60,196,.6),inset 0 0 20px rgba(76,60,196,.25);}
.circle-middle{width:72%;height:72%;border-color:var(--glow);animation:pulse-middle 3s infinite ease-in-out .5s;box-shadow:0 0 15px rgba(236,232,250,.5),inset 0 0 15px rgba(236,232,250,.2);}
.circle-inner{width:46%;height:46%;border-color:var(--ink);animation:pulse-inner 3s infinite ease-in-out 1s;box-shadow:0 0 10px rgba(50,38,158,.6),inset 0 0 10px rgba(50,38,158,.25);}
@keyframes pulse-outer{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6;}50%{transform:translate(-50%,-50%) scale(1.05);opacity:1;}}
@keyframes pulse-middle{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:.7;}50%{transform:translate(-50%,-50%) scale(1.08) rotate(180deg);opacity:1;}}
@keyframes pulse-inner{0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:.8;}50%{transform:translate(-50%,-50%) scale(1.1) rotate(-180deg);opacity:1;}}
.rune-ring{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);animation:rune-ring-rotate 22s linear infinite;}
@keyframes rune-ring-rotate{from{transform:translate(-50%,-50%) rotate(0);}to{transform:translate(-50%,-50%) rotate(360deg);}}
.rune-ring .rune{position:absolute;font-size:18px;color:var(--ink-light);text-shadow:0 0 14px rgba(76,60,196,.9);top:50%;left:50%;transform-origin:0 0;animation:rune-pulse 2.4s infinite ease-in-out;animation-delay:calc(var(--i)*.2s);}
.rune-ring .rune:nth-child(1){transform:translate(-50%,-50%) rotate(0deg) translateY(-110px) rotate(0deg);}
.rune-ring .rune:nth-child(2){transform:translate(-50%,-50%) rotate(45deg) translateY(-110px) rotate(-45deg);}
.rune-ring .rune:nth-child(3){transform:translate(-50%,-50%) rotate(90deg) translateY(-110px) rotate(-90deg);}
.rune-ring .rune:nth-child(4){transform:translate(-50%,-50%) rotate(135deg) translateY(-110px) rotate(-135deg);}
.rune-ring .rune:nth-child(5){transform:translate(-50%,-50%) rotate(180deg) translateY(-110px) rotate(-180deg);}
.rune-ring .rune:nth-child(6){transform:translate(-50%,-50%) rotate(225deg) translateY(-110px) rotate(-225deg);}
.rune-ring .rune:nth-child(7){transform:translate(-50%,-50%) rotate(270deg) translateY(-110px) rotate(-270deg);}
.rune-ring .rune:nth-child(8){transform:translate(-50%,-50%) rotate(315deg) translateY(-110px) rotate(-315deg);}
@keyframes rune-pulse{0%,100%{opacity:.5;}50%{opacity:1;text-shadow:0 0 22px rgba(76,60,196,1);}}
.loading-text{display:flex;gap:6px;font-size:2rem;letter-spacing:8px;color:var(--pale);text-shadow:0 0 20px rgba(50,38,158,.7);}
.loading-text span{display:inline-block;animation:letter-float 2s infinite ease-in-out;}
.loading-text span:nth-child(odd){animation-delay:.1s;}
.loading-text span:nth-child(even){animation-delay:.3s;}
@keyframes letter-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.loading-subtext{font-size:13px;letter-spacing:4px;color:var(--ash);opacity:.7;font-style:italic;}

/* ---------- starfield (global) ---------- */
.starfield{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at top,var(--void) 0%,var(--abyss) 70%);overflow:hidden;}
.starfield::before,.starfield::after{
  content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),
    radial-gradient(1px 1px at 30% 70%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 55% 15%,#fff,transparent),
    radial-gradient(1px 1px at 70% 55%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 85% 80%,#fff,transparent),
    radial-gradient(1px 1px at 95% 30%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 20% 90%,#fff,transparent),
    radial-gradient(1px 1px at 45% 40%,#fff,transparent);
  background-size:600px 600px;
  opacity:.5;
  animation:twinkle 6s ease-in-out infinite alternate;
}
.starfield::after{background-size:800px 800px;background-position:100px 200px;animation-duration:9s;opacity:.3;}
@keyframes twinkle{0%{opacity:.2;}100%{opacity:.6;}}

/* ---------- nav ---------- */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;background:rgba(23,21,34,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(50,38,158,.35);
}
.nav-logo{letter-spacing:4px;font-size:14px;color:var(--pale);text-decoration:none;cursor:pointer;opacity:.85;transition:.3s;}
.nav-logo:hover{opacity:1;text-shadow:0 0 12px var(--ink-light);}
.nav-links{display:flex;gap:8px;}
.nav-links button{background:transparent;border:1px solid rgba(50,38,158,.4);color:var(--ash);font-size:11px;letter-spacing:2px;padding:11px 20px;cursor:pointer;transition:.35s ease;}
.nav-links button:hover,.nav-links button.current{background:var(--ink-light);color:#fff;border-color:var(--ink-light);box-shadow:0 0 18px rgba(76,60,196,.6);}

/* ---------- page transition shell ---------- */
.page-viewport{position:relative;width:100%;height:100vh;overflow:hidden;}
.page{position:absolute;inset:0;width:100%;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(0);transition:transform .6s cubic-bezier(.65,0,.35,1);padding-top:100px;}
.page.hidden-page{visibility:hidden;pointer-events:none;}
.page-inner{max-width:900px;margin:0 auto;padding:40px 30px 100px;position:relative;}

/* ==================== HOME ==================== */
.avatar-shrine{position:relative;width:190px;height:190px;margin:0 auto 20px;}
.avatar-backdrop{position:absolute;inset:6px;border-radius:50%;z-index:1;background:repeating-conic-gradient(from 0deg,rgba(76,60,196,.35) 0deg 8deg,transparent 8deg 20deg);animation:spin 40s linear infinite;}
.avatar-ring-outer{position:absolute;inset:-16px;border-radius:50%;border:1px solid var(--ink-light);opacity:.8;animation:spin 22s linear infinite;box-shadow:0 0 14px rgba(76,60,196,.6);z-index:3;}
.avatar-ring-inner{position:absolute;inset:-26px;border-radius:50%;border:1px solid var(--glow);opacity:.35;animation:spin-reverse 30s linear infinite;z-index:3;}
.avatar-core{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px solid var(--pale);box-shadow:0 0 40px rgba(50,38,158,.45);}
.avatar-core img{width:100%;height:100%;object-fit:cover;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes spin-reverse{to{transform:rotate(-360deg);}}

.ornate-frame{position:absolute;left:0;width:100%;height:90px;color:var(--ink-light);opacity:.75;pointer-events:none;filter:drop-shadow(0 0 6px rgba(76,60,196,.5));}
.ornate-top{top:-46px;}
.ornate-bottom{bottom:-46px;transform:scaleY(-1);}

.grimoire-header{position:relative;text-align:center;padding:70px 30px 50px;margin-bottom:70px;}
.bloodline-seal{font-size:11px;color:var(--ink-light);letter-spacing:3px;margin-bottom:8px;}
.entity-name{font-size:2.6rem;letter-spacing:10px;color:var(--pale);text-shadow:0 0 30px rgba(50,38,158,.6);margin-bottom:4px;}
.entity-sigil{color:var(--ash);font-style:italic;font-size:1rem;opacity:.7;margin-bottom:24px;}
.power-mark{font-size:11px;color:var(--ink-pale);letter-spacing:3px;margin-top:12px;font-style:italic;}
.prophecy-verse{max-width:480px;margin:20px auto 30px;font-style:italic;color:var(--bone);line-height:1.7;}
.power-metrics{display:flex;justify-content:center;gap:50px;flex-wrap:wrap;margin-bottom:30px;}
.metric-shard{display:flex;flex-direction:column;align-items:center;}
.metric-label{display:block;font-size:10px;color:var(--ash);letter-spacing:2px;margin-bottom:6px;font-family:Garamond,serif;}
.metric-value{font-size:1.3rem;color:var(--ink-light);text-shadow:0 0 14px rgba(76,60,196,.6);}
.portal-links{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;}
.portal-links a{font-size:12px;text-decoration:none;color:var(--bone);letter-spacing:1px;transition:.3s;font-style:italic;}
.portal-links a:hover{color:var(--ink-light);text-shadow:0 0 10px var(--ink-light);}

.dark-divider{display:flex;align-items:center;gap:24px;margin:70px 0 40px;}
.void-line{flex:1;height:1px;background:linear-gradient(to right,transparent,var(--ink-light),var(--glow),var(--ink-light),transparent);opacity:.6;}
.archive-title{font-size:1.2rem;letter-spacing:5px;color:var(--pale);white-space:nowrap;}
.entity-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:30px;}
.entity-vessel{background:var(--card);border:1px solid var(--ink-deep);padding:20px;text-align:center;transition:.4s;}
.entity-vessel:hover{border-color:var(--ink-light);transform:translateY(-6px);box-shadow:0 14px 40px rgba(50,38,158,.35);}

/* ==================== BLOG ==================== */
.section-title{font-size:1.8rem;letter-spacing:6px;color:var(--pale);text-align:center;margin-bottom:60px;}
.post{position:relative;max-width:680px;margin:0 auto 60px;}
.post-title-bar{position:relative;z-index:2;display:inline-block;margin-left:26px;margin-bottom:-18px;background:var(--ink-dark);border:1px solid var(--ink-light);padding:12px 26px;letter-spacing:2px;font-size:.95rem;color:var(--lavender);box-shadow:0 0 20px rgba(50,38,158,.4);}
.post-body{position:relative;z-index:1;background:rgba(23,21,34,.8);backdrop-filter:blur(3px);border:1px solid rgba(50,38,158,.3);padding:44px 30px 30px;}
.post-date{font-size:12px;letter-spacing:2px;color:var(--ash);margin-bottom:16px;font-style:italic;}
.post-text{color:var(--burnt);line-height:1.8;font-size:1.05rem;}

#page-game, #page-game *{user-select:none;-webkit-user-select:none;-moz-user-select:none;}

/* ==================== CONFESSIONAL — dramatic ==================== */
#page-confessional{background:#000;}
.confessional-fog{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 100%,rgba(50,38,158,.18) 0%,transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 100%,rgba(76,60,196,.15) 0%,transparent 60%);
  animation:fog-breathe 10s ease-in-out infinite alternate;
}
@keyframes fog-breathe{0%{opacity:.6;}100%{opacity:1;}}
.confessional-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.55) 85%,rgba(0,0,0,.85) 100%);}
.confessional-title{color:var(--ash);text-shadow:0 0 24px rgba(76,60,196,.5);letter-spacing:10px;position:relative;z-index:2;}
.confessional-intro{text-align:center;font-style:italic;color:var(--ink-pale);letter-spacing:1px;margin-bottom:60px;position:relative;z-index:2;opacity:.85;}

.candle-layer{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.candle{position:absolute;bottom:0;width:5px;height:0;pointer-events:none;opacity:0;}
.candle .wax{position:absolute;bottom:0;width:6px;height:42px;background:linear-gradient(to bottom,#4a3d55,#20191f);border-radius:1px 1px 0 0;box-shadow:0 0 3px rgba(0,0,0,.6);}
.candle .flame{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);width:7px;height:14px;background:radial-gradient(circle,#ffe3a8,var(--burnt) 65%,transparent);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;box-shadow:0 0 18px 5px rgba(255,180,90,.65),0 0 36px 10px rgba(76,60,196,.25);animation:flame-flicker 1.5s ease-in-out infinite;}
.candle .glow{position:absolute;bottom:20px;left:50%;transform:translate(-50%,0);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,90,.18) 0%,transparent 70%);animation:flame-flicker 2.2s ease-in-out infinite;}
@keyframes flame-flicker{0%,100%{transform:translateX(-50%) scale(1);opacity:1;}45%{transform:translateX(-42%) scale(.9,1.08);opacity:.9;}70%{transform:translateX(-55%) scale(1.05,.95);opacity:1;}}
@keyframes candle-rise{0%{opacity:0;bottom:-30px;}12%{opacity:1;}88%{opacity:1;}100%{opacity:0;bottom:75vh;}}

.book-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:34px;padding:10px 10px 60px;}
.book-page-tile{
  position:relative;
  background:
    linear-gradient(160deg,rgba(30,24,44,.9),rgba(10,8,15,.95));
  border:1px solid var(--ink-deep);
  clip-path:polygon(0 3%,97% 0,100% 96%,3% 100%);
  padding:38px 20px;text-align:center;cursor:pointer;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1),box-shadow .5s,border-color .5s;
  transform:rotate(var(--tilt,0deg));
}
.book-page-tile:nth-child(3n){--tilt:-1.4deg;}
.book-page-tile:nth-child(3n+1){--tilt:1.1deg;}
.book-page-tile:nth-child(3n+2){--tilt:-.6deg;}
.book-page-tile::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(76,60,196,.12),transparent 70%);
  opacity:0;transition:opacity .5s;
}
.book-page-tile:hover{transform:rotate(0deg) translateY(-8px) scale(1.03);border-color:var(--ink-light);box-shadow:0 20px 50px rgba(50,38,158,.4),0 0 40px rgba(76,60,196,.25);}
.book-page-tile:hover::before{opacity:1;}
.book-page-tile h3{position:relative;z-index:1;font-size:1.05rem;letter-spacing:2px;color:var(--pale);font-style:italic;}
.book-page-tile span{position:relative;z-index:1;display:block;margin-top:10px;font-size:11px;color:var(--ash);letter-spacing:1px;font-style:italic;opacity:.7;}

.confession-overlay{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s;}
.confession-overlay::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(76,60,196,.1),transparent 60%);
  animation:overlay-flicker 3s ease-in-out infinite;
}
@keyframes overlay-flicker{0%,100%{opacity:.7;}50%{opacity:1;}}
.confession-overlay.open{opacity:1;pointer-events:auto;}
.confession-sheet{
  position:relative;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;
  background:linear-gradient(165deg,#1c1626,#0a0810 75%);
  border:1px solid var(--ink-light);
  box-shadow:0 0 90px rgba(50,38,158,.45),inset 0 0 60px rgba(0,0,0,.5);
  padding:56px 44px 40px;
  transform:scale(.75) rotateX(8deg);opacity:0;
  transition:transform .6s cubic-bezier(.2,.9,.3,1.3),opacity .5s;
  filter:blur(2px);
}
.confession-overlay.open .confession-sheet{transform:scale(1) rotateX(0deg);opacity:1;filter:blur(0);}
.wax-seal{
  position:absolute;top:-26px;left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--ink-light),var(--ink-dark) 75%);
  display:flex;align-items:center;justify-content:center;
  color:var(--glow);font-size:22px;
  box-shadow:0 0 24px rgba(50,38,158,.7),inset 0 2px 4px rgba(255,255,255,.15);
  border:1px solid var(--ink-pale);
}
.confession-sheet h3{color:var(--lavender);letter-spacing:2px;text-align:center;margin-bottom:6px;font-style:italic;font-size:1.4rem;}
.confession-sheet .post-date{text-align:center;margin-bottom:20px;}
.confession-divider{width:60px;height:1px;background:linear-gradient(to right,transparent,var(--ink-light),transparent);margin:0 auto 24px;}
.confession-text{overflow-y:auto;color:var(--bone);font-style:italic;line-height:1.9;padding-right:8px;flex:1;font-size:1.05rem;}
.confession-back{align-self:center;margin-top:28px;background:rgba(76,60,196,.1);border:1px solid var(--ink-light);color:var(--ink-pale);font-size:11px;letter-spacing:3px;padding:12px 28px;cursor:pointer;transition:.3s;}
.confession-back:hover{background:var(--ink-light);color:#fff;box-shadow:0 0 20px rgba(76,60,196,.5);}

/* ==================== CONTACT ==================== */
.contact-box{max-width:520px;margin:0 auto;background:rgba(23,21,34,.8);border:1px solid var(--ink-deep);padding:44px 36px;}
.contact-box p.intro{color:var(--bone);line-height:1.8;margin-bottom:30px;font-style:italic;}
.field{margin-bottom:22px;}
.field label{display:block;font-size:12px;letter-spacing:1px;color:var(--ash);margin-bottom:8px;font-style:italic;}
.field input,.field textarea{width:100%;background:rgba(0,0,0,.3);border:1px solid var(--ink-deep);color:var(--bone);font-family:Garamond,Georgia,serif;font-size:1rem;padding:12px 14px;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink-light);box-shadow:0 0 14px rgba(76,60,196,.4);}
.field textarea{min-height:120px;resize:vertical;}
.req-note{font-size:11px;color:var(--ash);margin-top:-8px;margin-bottom:26px;}
.contact-box button{background:linear-gradient(135deg,var(--ink),var(--ink-light));border:1px solid var(--ink-light);color:#fff;letter-spacing:2px;font-size:12px;padding:14px 34px;cursor:pointer;transition:.3s;}
.contact-box button:hover{box-shadow:0 0 26px rgba(76,60,196,.6);}
.form-note{font-size:11px;color:var(--ash);margin-top:16px;}

@media(max-width:640px){
  .site-nav{flex-direction:column;gap:14px;padding:16px 20px;}
  .nav-links{flex-wrap:wrap;justify-content:center;}
  .entity-name{font-size:1.8rem;letter-spacing:5px;}
  .ornate-frame{display:none;}
  .confession-sheet{padding:44px 24px 30px;}
}