:root{font-family:Segoe UI,Arial,sans-serif;color:#f7f0e8;background:#0b1320;--accent:#b995e2}*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 16% -4%,#302440 0,transparent 35%),radial-gradient(circle at 88% 42%,#12283a 0,transparent 38%),#0b1320}
body[data-mode=expert]{--accent:#efa982;background:radial-gradient(circle at 16% -4%,#44283c 0,transparent 35%),radial-gradient(circle at 88% 42%,#2d1d34 0,transparent 38%),#0b1320}
a{color:#c7ebe9;text-decoration:none}a:hover{text-decoration:underline}.shell{width:min(1640px,calc(100% - 36px));margin:auto;padding:22px 0 70px}
.top{display:flex;justify-content:space-between;gap:15px;align-items:center;color:#d4c292;font-size:.78rem;font-weight:800;letter-spacing:.12em}.nav-brand{display:inline-flex;align-items:center;gap:10px}.nav-brand img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 9px #c792d04d)}
.nav-back{padding:11px 16px;border:1px solid #8a735a;border-radius:999px;background:#132232a8;color:#ffe1a8;transition:background .2s,border-color .2s,transform .2s}.nav-back:hover{background:#25354a;border-color:#e3bd74;transform:translateY(-2px);text-decoration:none}
h1{font-family:Georgia,serif;font-size:clamp(2.9rem,5vw,5.2rem);line-height:1.04;letter-spacing:-.045em;margin:33px 0 12px;color:#fff0d3;text-shadow:0 3px 25px #b878cb3a}.lead{max-width:780px;margin:0 0 30px;color:#c5c9d6;font-size:1.05rem;line-height:1.6}
.scene-preview{margin-bottom:44px}.scene-preview iframe{display:block;width:100%;height:720px;border:0;border-radius:18px;background:#071622}
.story-section{position:relative;isolation:isolate;overflow:hidden;margin:0 -12px;padding:clamp(36px,5vw,76px) 24px 68px;border:1px solid #886c9b80;border-radius:28px;background:radial-gradient(circle at 20% 34%,#61346a32,transparent 42%),linear-gradient(145deg,#0a1d2a 0%,#10192a 48%,#0b1724 100%);box-shadow:0 24px 60px #0005,inset 0 1px #d0a9ed42}
.story-section::before{content:"";position:absolute;z-index:-1;top:8%;left:45%;width:min(850px,75vw);aspect-ratio:1;background:url('assets/branding/monstra-guild-v2.png') center/contain no-repeat;filter:grayscale(1) brightness(1.35);opacity:.075;pointer-events:none;transform:rotate(-9deg)}
.story-section::after{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#dfb5ff 1px,transparent 1.5px),radial-gradient(#80c8d6 .8px,transparent 1.3px);background-size:190px 210px,257px 233px;background-position:25px 34px,110px 125px;opacity:.15;pointer-events:none}
.story-seal{position:absolute;z-index:-1;left:var(--x);top:var(--y);width:var(--size);aspect-ratio:1;background:url('assets/branding/monstra-guild-v2.png') center/contain no-repeat;filter:grayscale(1) brightness(1.7);mix-blend-mode:screen;opacity:.105;pointer-events:none;animation:seal-turn var(--duration) linear infinite;animation-delay:var(--delay)}@keyframes seal-turn{from{transform:rotate(var(--start))}to{transform:rotate(calc(var(--start) + 360deg))}}
.section-intro{width:min(1220px,100%);margin:0 auto 35px}.eyebrow{color:#e3baf8;font-size:.75rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase}body[data-mode=expert] .eyebrow{color:#f2bb91}.section-intro .eyebrow::before{content:"";display:inline-block;width:30px;height:1px;margin:0 12px 4px 0;background:var(--accent)}.section-intro h2{max-width:850px;margin:12px 0 14px;font-family:Georgia,serif;font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.08;letter-spacing:-.035em;color:#fff0d4}.section-intro p{max-width:740px;margin:0;color:#c6d6de;line-height:1.65}
.story-grid{display:grid;width:min(1220px,100%);margin:auto;grid-template-columns:minmax(330px,455px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.card-holder{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;margin:0;padding:20px 20px 22px;border:1px solid var(--accent);border-radius:21px;background:radial-gradient(circle at 50% 35%,#683d6d96,#252037 64%,#111c2b 100%);box-shadow:0 20px 50px #0008,inset 0 0 0 5px #0718278f,inset 0 0 0 6px #9e6fb05c}
.card-holder::before{content:"";position:absolute;z-index:-1;inset:4%;border-radius:45%;background:radial-gradient(circle,#be8df666 0%,#7446a524 38%,transparent 70%);filter:blur(20px)}.card-holder img{display:block;width:min(100%,375px);height:auto;border-radius:13px;box-shadow:0 18px 34px #0009}.card-holder figcaption{margin-top:17px;color:#dec5f3;font-size:.68rem;font-weight:900;letter-spacing:.23em;text-align:center}body[data-mode=expert] .card-holder figcaption{color:#ffd0ae}
.notes{counter-reset:profile;position:relative;padding:clamp(24px,3vw,39px);border:1px solid #826d9b8a;border-radius:21px;background:linear-gradient(145deg,#0a1d2ce8,#172239e8 55%,#191729e8);box-shadow:0 20px 45px #0006,inset 0 1px #eed29826;backdrop-filter:blur(7px)}.notes::before{content:"";position:absolute;top:0;left:37px;width:110px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 14px #d7a3ff73}.notes h2{font-family:Georgia,serif;color:#ffe9bd;font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.12;margin:12px 0 18px}.notes p{max-width:56ch;color:#c7d5dc;line-height:1.66}
.detail{counter-increment:profile;display:grid;grid-template-columns:33px 1fr;column-gap:13px;border-top:1px solid #69819350;padding:17px 8px 18px 0}.detail::before{content:counter(profile,decimal-leading-zero);grid-row:1/span 2;display:flex;align-items:center;justify-content:center;align-self:start;width:31px;height:31px;border:1px solid #a47abb;border-radius:8px;background:#72458952;color:#e5baff;font:800 .66rem Georgia,serif}.detail strong{grid-column:2;display:block;margin-bottom:6px;color:#ffe5b0}.detail span{grid-column:2;display:block;color:#c1d1d9;line-height:1.55}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}.actions a{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:10px 20px;border:1px solid #dfb9fc;border-radius:10px;background:linear-gradient(115deg,#e6c5ff,#9e6fbc);box-shadow:0 7px 24px #a979d929;color:#152332;font-size:.9rem;font-weight:900;transition:transform .2s,box-shadow .2s}.actions a.secondary{background:#17283a;color:#eedbfb;border-color:#806e95}.actions a:hover{transform:translateY(-2px);box-shadow:0 10px 30px #b58bd955;text-decoration:none}
@media(max-width:850px){.story-grid{grid-template-columns:1fr}.card-holder{width:min(100%,500px);margin:auto}.story-section::before{top:24%;left:15%;width:90vw;opacity:.055}.story-seal{opacity:.07}.story-seal:nth-of-type(n+5){display:none}.scene-preview{margin-bottom:30px}}
@media(max-width:500px){.shell{width:min(100% - 24px,500px)}.card-holder{padding:14px 10px 22px}.story-section{margin:0 -5px;padding:32px 15px 42px}.top{font-size:.68rem}.nav-brand img{width:38px;height:38px}.nav-back{padding:9px 11px;letter-spacing:0}.notes{padding:23px 19px}.detail{grid-template-columns:28px 1fr;column-gap:10px}.detail::before{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){.nav-back,.actions a{transition:none}.story-seal{animation:none;transform:rotate(var(--start))}}