:root{font-family:Segoe UI,Arial,sans-serif;color:#f8efe2;background:#091724;--accent:#c7a9ec;--accent-soft:#8e67b5;--accent-rgb:167,112,210}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;background:radial-gradient(circle at 12% -5%,rgba(var(--accent-rgb),.2),transparent 33%),radial-gradient(circle at 90% 70%,#15425856,transparent 35%),#091724}body[data-kind=tactic][data-sign=fire]{--accent:#ffc178;--accent-soft:#c78051;--accent-rgb:235,138,76}body[data-kind=tactic][data-sign=water]{--accent:#9ce0ed;--accent-soft:#5c9db2;--accent-rgb:92,166,205}body[data-kind=tactic][data-sign=earth]{--accent:#c4de9c;--accent-soft:#859d68;--accent-rgb:150,190,106}body[data-kind=tactic][data-sign=air]{--accent:#b8d2ff;--accent-soft:#728fca;--accent-rgb:126,164,235}body[data-kind=tactic][data-sign=mythic]{--accent:#d8b3f6;--accent-soft:#9975c3;--accent-rgb:174,117,224}
a{color:inherit;text-decoration:none}.shell{width:min(1500px,calc(100% - 36px));margin:auto;padding:22px 0 48px}.top{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.74rem;font-weight:900;letter-spacing:.13em;color:#f1dba8}.brand{display:flex;align-items:center;gap:10px}.brand img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.42))}.top a,.links a,#all-link{border:1px solid var(--accent-soft);border-radius:999px;padding:11px 16px;background:#122536b8;color:#ffe9c3;transition:transform .2s,background .2s}.top a:hover,.links a:hover,#all-link:hover{transform:translateY(-2px);background:#284059}
.heading{padding:36px 0 28px}.eyebrow{color:var(--accent);font-size:.73rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase}.heading h1{font:700 clamp(3rem,6vw,5.8rem)/1.04 Georgia,serif;letter-spacing:-.055em;color:#fff0d7;margin:13px 0 13px;text-shadow:0 0 32px rgba(var(--accent-rgb),.27)}.heading p{max-width:720px;margin:0;color:#c8d5dd;font-size:1.07rem;line-height:1.6}
.feature{display:grid;grid-template-columns:minmax(410px,1fr) minmax(420px,.92fr);gap:14px;align-items:stretch}.art-stage,.info{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);border-radius:22px;box-shadow:0 20px 60px #0007,inset 0 1px #fff2}.art-stage{isolation:isolate;display:grid;place-items:center;min-height:730px;padding:40px 24px;background:#122033}.art-stage::before{content:"";position:absolute;z-index:-2;inset:-8%;background:linear-gradient(90deg,#071523d9,#10172661 48%,#081626db),var(--art) center/cover no-repeat;filter:saturate(1.12) blur(5px);transform:scale(1.08)}.art-stage::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 50% 38%,rgba(var(--accent-rgb),.25),transparent 50%),linear-gradient(transparent 55%,#06121baa)}.art-haze{position:absolute;inset:10% 8%;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:50%;box-shadow:0 0 65px rgba(var(--accent-rgb),.13),inset 0 0 80px rgba(var(--accent-rgb),.1);animation:breathe 8s ease-in-out infinite alternate}@keyframes breathe{to{transform:scale(1.05);opacity:.6}}.seal{position:absolute;width:125px;aspect-ratio:1;background:url('assets/branding/monstra-guild-v2.png') center/contain no-repeat;filter:grayscale(1) brightness(1.7);opacity:.12;animation:turn 110s linear infinite}.seal-one{left:4%;top:5%}.seal-two{right:3%;bottom:8%;width:165px;animation-direction:reverse}@keyframes turn{to{transform:rotate(360deg)}}.card-display{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin:0;filter:drop-shadow(0 24px 26px #0009)}.card-display img{display:block;width:min(100%,405px);height:auto;max-height:650px;object-fit:contain;border-radius:11px}.card-display figcaption{margin-top:17px;padding:6px 12px;border:1px solid #ffe6be6b;border-radius:999px;background:#071926bd;color:#ffeac8;font-size:.64rem;font-weight:900;letter-spacing:.19em;text-align:center}
.info{padding:clamp(26px,3vw,45px);background:radial-gradient(circle at 88% 4%,rgba(var(--accent-rgb),.2),transparent 37%),linear-gradient(140deg,#0d2634,#16243b 57%,#171a2d)}.info::before{content:"";position:absolute;top:0;left:42px;width:180px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 18px var(--accent)}.info h2{font:700 clamp(2rem,3.1vw,3.25rem)/1.12 Georgia,serif;color:#fff1d7;margin:13px 0 16px}.flavor{max-width:60ch;color:#c8d8df;line-height:1.68;margin:0 0 24px;font-size:1.03rem}.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:22px}.fact{min-height:70px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:11px;background:#0b2132b9}.fact small{display:block;color:#a9bdcc;font-size:.64rem;font-weight:900;letter-spacing:.13em}.fact strong{display:block;margin-top:6px;color:#ffebc7;font:700 1.08rem Georgia,serif;overflow-wrap:anywhere}.effect-panel{padding:21px 22px 18px;border:1px solid var(--accent-soft);border-radius:15px;background:linear-gradient(140deg,rgba(var(--accent-rgb),.16),#0b2030cc)}.effect-panel h3{font:700 1.48rem Georgia,serif;color:#ffe7bd;margin:8px 0}.effect-panel p{color:#fff8e9;font-weight:700;line-height:1.55;margin:0 0 14px}.effect-panel small{color:#abc1d0;font-size:.76rem}.insight{border-top:1px solid #7592a44a;margin-top:26px;padding-top:23px}.insight h3{font:700 1.25rem Georgia,serif;color:#ffe7bd;margin:0 0 10px}.insight p{color:#c8d8df;line-height:1.65;margin:0}.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:33px}.links a{font-size:.83rem;font-weight:800;border-radius:9px}.links a[hidden]{display:none}.shell footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 0;color:#a9bec8;font-size:.82rem}#all-link{font-weight:800}
@media(max-width:950px){.feature{grid-template-columns:1fr}.art-stage{min-height:640px}.info{min-height:0}}@media(max-width:600px){.shell{width:min(100% - 22px,500px)}.top{font-size:.62rem}.brand img{width:38px;height:38px}.top a{padding:9px 11px;letter-spacing:0}.heading{padding:27px 0 21px}.art-stage{min-height:560px;padding:26px 12px}.card-display img{width:min(100%,325px)}.info{padding:25px 20px}.facts{grid-template-columns:1fr 1fr}.fact{min-height:62px;padding:10px}.shell footer{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.art-haze,.seal{animation:none}.top a,.links a,#all-link{transition:none}}