@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{--void:#080b0f;--surface:#10171b;--surface2:#131e22;--gold:#d4af6a;--gold-light:#f4dba5;--teal:#28c8c1;--crimson:#ab2631;--mist:#d9dfe0;--muted:#a5b4b8;--border:rgba(214,180,117,.25);--serif:'Cinzel',Georgia,serif;--sans:'Inter',system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--void);color:var(--mist);font-family:var(--sans);font-size:15px;line-height:1.65;overflow-x:hidden}button,input,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}::selection{background:#166e70;color:#fff}.container{max-width:1240px;margin:auto;padding:0 30px}.eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:.28em;color:var(--teal);font-size:10px;font-weight:700}.eyebrow:before{content:'';width:26px;height:1px;background:currentColor}.section-title{font:500 clamp(30px,3.3vw,50px)/1.25 var(--serif);color:var(--gold-light);margin:15px 0 19px;text-wrap:balance}.section-lead{color:#aebbc0;max-width:640px;line-height:1.9}.button{display:inline-flex;gap:12px;align-items:center;justify-content:center;min-height:51px;padding:0 25px;border:1px solid var(--border);background:rgba(13,24,27,.8);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#ece5d2;clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);transition:background .2s,transform .2s,filter .2s}.button:hover{transform:translateY(-2px);background:rgba(16,73,75,.8)}.button.primary{background:linear-gradient(130deg,#922330,#500e20);border:1px solid #bd6151;color:#fff4dc;box-shadow:inset 0 0 22px #eb4e2214,0 8px 38px #0006}.button.primary:hover{background:linear-gradient(130deg,#b92e3f,#6c1826)}.button.gold{background:linear-gradient(130deg,#9d733e,#4f3827);border:1px solid #c6a36e}.button.ghost{background:rgba(10,19,24,.42)}.button[aria-disabled=true]{opacity:.56;cursor:not-allowed}.subtle{color:var(--muted)}.divider{height:1px;background:linear-gradient(90deg,transparent,#9a7a4e6e,transparent)}
.site-header{height:86px;position:fixed;z-index:50;inset:0 0 auto;display:flex;align-items:center;background:rgba(6,10,14,.9);border-bottom:1px solid rgba(188,145,84,.18);backdrop-filter:blur(19px);transition:height .25s}.header-content{width:100%;max-width:1550px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:32px}.brand{display:flex;width:218px;flex:0 0 218px;align-items:center;height:82px;position:relative;z-index:2}.brand img{width:213px;height:114px;object-fit:contain;filter:drop-shadow(0 7px 20px #000a);position:relative;top:8px}.header-nav{display:flex;align-items:center;gap:clamp(14px,1.65vw,28px);margin-left:auto}.header-nav a{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;white-space:nowrap;color:#d1d5d2;transition:color .2s}.header-nav a:hover,.header-nav a.active{color:var(--gold-light)}.header-actions{display:flex;align-items:center;gap:9px}.header-actions .button{padding:0 16px;min-height:42px;font-size:10px}.mobile-toggle{display:none;width:44px;height:44px;background:transparent;border:1px solid var(--border);color:var(--gold);font-size:24px}
.hero{min-height:790px;min-height:100svh;position:relative;isolation:isolate;display:flex;align-items:center;padding-top:118px;overflow:hidden;background:#081014}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/abyss-landscape.svg') center 47%/cover no-repeat;animation:skybreath 28s ease-in-out infinite alternate}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,7,12,.92) 0%,rgba(5,10,15,.75) 31%,rgba(4,9,13,.22) 78%,rgba(4,8,13,.4) 100%),linear-gradient(0deg,#080b0f 0%,transparent 26%,#02050624 80%)}.hero-grid{display:grid;grid-template-columns:minmax(0,610px) 1fr;align-items:center;min-height:690px;padding-bottom:90px}.hero-text{padding:52px 0}.hero-kicker{color:#dbbb87;font-size:11px;letter-spacing:.35em;text-transform:uppercase;display:flex;align-items:center;gap:16px}.hero-kicker:before{content:'';display:block;width:44px;height:1px;background:var(--crimson)}.hero h1{font:500 clamp(43px,5.1vw,75px)/1.15 var(--serif);letter-spacing:-.035em;color:#f4ebd7;margin:24px 0 18px;text-shadow:0 12px 38px #000d}.hero h1 em{font-style:normal;color:var(--gold-light)}.hero p{max-width:495px;color:#c2ceca;line-height:1.95;font-size:15px;text-shadow:0 2px 9px #000}.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}.hero-footer{position:absolute;bottom:40px;left:0;right:0;z-index:3}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px}.hero-bottom span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#afc0c1}.hero-scroll{display:flex;align-items:center;gap:10px}.hero-scroll i{display:block;height:26px;width:1px;background:var(--teal)}.hero-decoration{position:absolute;right:clamp(6%,12vw,18%);top:28%;width:min(26vw,385px);height:min(26vw,385px);border:1px solid #31e3dd19;border-radius:50%;box-shadow:0 0 150px #0bd2d118;pointer-events:none;animation:float 10s ease-in-out infinite}.hero-decoration:before,.hero-decoration:after{content:'';position:absolute;inset:9%;border:1px dashed #6ee9dd21;border-radius:50%}.hero-decoration:after{inset:-9%;border:1px solid #edc18114}
.ornament{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--gold);font-family:var(--serif);font-size:18px;margin:45px auto}.ornament:before,.ornament:after{content:'';display:block;width:110px;max-width:20vw;height:1px;background:linear-gradient(90deg,transparent,#b29160)}.ornament:after{transform:rotate(180deg)}.section{position:relative;padding:112px 0}.section.dark{background:linear-gradient(180deg,#080b0f,#0d1418 50%,#080b0f)}.section.stone{background:radial-gradient(ellipse at 70% 15%,#0d3b3d61,transparent 45%),#0a1115}.section-inner{position:relative;z-index:1}.intro-layout{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}.intro-art{height:420px;position:relative;background:radial-gradient(ellipse at 50% 49%,#06636c47,transparent 47%),url('assets/abyss-landscape.svg') 69% 47%/auto 155% no-repeat;border:1px solid var(--border);box-shadow:inset 0 0 110px #010408,0 24px 70px #0009;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px)}.intro-art:after{content:'THE ABYSS STIRS';position:absolute;bottom:27px;left:30px;letter-spacing:.3em;font-size:10px;color:var(--gold)}.lines{display:flex;gap:22px;margin-top:30px;padding-top:23px;border-top:1px solid var(--border)}.line-stat{font:600 25px var(--serif);color:#eed3a2}.line-stat small{display:block;font:500 10px var(--sans);text-transform:uppercase;letter-spacing:.2em;color:var(--muted);margin-top:7px}
.center{text-align:center}.center .section-lead{margin-left:auto;margin-right:auto}.classes-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:43px}.class-card{position:relative;text-align:left;min-height:286px;border:1px solid #cba46a36;padding:28px 19px 20px;background:linear-gradient(180deg,#13242a 0%,#0b1217 90%);transition:border-color .25s,transform .25s,background .25s;overflow:hidden;color:inherit;clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%,0 13px)}.class-card:before{content:'';position:absolute;inset:-65px -60px auto;height:210px;background:radial-gradient(ellipse,#138a8760,transparent 67%);opacity:.35;transition:opacity .2s}.class-card:hover,.class-card[aria-pressed=true]{border-color:#d2aa67aa;transform:translateY(-5px);background:linear-gradient(180deg,#183239,#0b1217)}.class-card[aria-pressed=true]:before{opacity:1}.class-glyph{display:block;font:500 59px/1 var(--serif);color:#b69b68;text-shadow:0 0 28px #2cd4d133;position:relative;margin:24px 0 46px}.class-name{font:600 17px var(--serif);color:var(--gold-light);display:block;position:relative}.class-role{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-top:7px;position:relative}.class-n{position:absolute;right:17px;top:12px;color:#ab957568;font:11px var(--serif)}.class-detail{display:flex;gap:27px;align-items:center;justify-content:space-between;margin-top:18px;padding:22px 27px;border:1px solid var(--border);background:#101a1e}.class-detail h3{font:500 22px var(--serif);color:var(--gold-light);margin:0 0 5px}.class-detail p{margin:0;color:#afbdc1;font-size:13px}.class-detail .detail-mark{font:500 39px var(--serif);color:#c1a66d;flex:0 0 auto}
.codex-top{display:flex;justify-content:space-between;align-items:end;gap:35px}.codex-top .section-lead{max-width:410px}.codex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:43px}.codex-card{min-height:180px;border:1px solid var(--border);padding:27px;background:linear-gradient(140deg,#122327c2,#0b1215);position:relative}.codex-card:before{content:'';position:absolute;inset:0 auto auto 0;width:55px;height:2px;background:var(--gold)}.codex-card .icon{font:24px var(--serif);color:var(--teal);margin-bottom:21px;display:block}.codex-card h3{font:500 19px var(--serif);color:var(--gold-light);margin:0 0 5px}.codex-card p{font-size:12px;color:#aab9ba;margin:0}.status{display:inline-flex;gap:8px;align-items:center;margin-top:15px;color:#c6b99c;font-size:10px;text-transform:uppercase;letter-spacing:.12em}.status:before{content:'';height:6px;width:6px;background:var(--gold);border-radius:50%}.codex-note{font-size:12px;color:var(--muted);margin-top:22px}.feature-split{display:grid;grid-template-columns:1.2fr .8fr;gap:5%;align-items:center}.chapter{border:1px solid var(--border);background:#0d171c;min-height:315px;padding:44px;position:relative;overflow:hidden}.chapter:after{content:'玄';position:absolute;right:20px;bottom:-93px;font:230px var(--serif);color:#2d98941a;pointer-events:none}.chapter .section-title{max-width:650px}.chapter aside{font:500 11px var(--serif);letter-spacing:.18em;color:var(--gold);margin-bottom:18px}.updates-list{border-top:1px solid var(--border)}.update-row{padding:20px 2px;border-bottom:1px solid var(--border);display:flex;gap:23px;align-items:center}.update-row time{color:var(--teal);font-size:11px;min-width:112px}.update-row span{font:500 14px var(--serif);color:#e1cfab}.update-row small{margin-left:auto;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);font-size:9px}.community-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}.community-card{border:1px solid var(--border);padding:34px;background:radial-gradient(ellipse at 95% 0,#0a55554a,transparent 50%),#10181d}.community-card.red{background:radial-gradient(ellipse at 95% 0,#691a284e,transparent 53%),#10181d}.community-icon{font:500 28px var(--serif);color:var(--gold)}.community-card h3{font:500 24px var(--serif);color:var(--gold-light);margin:22px 0 9px}.community-card p{color:#adbdc1;font-size:13px;margin:0 0 26px;max-width:380px}.community-card .button{min-height:40px;font-size:10px}
.support-banner{position:relative;background:radial-gradient(ellipse at 85% 50%,#68202b56,transparent 43%),linear-gradient(130deg,#111f24,#110f13);border:1px solid #bd946356;padding:52px 58px;display:flex;justify-content:space-between;gap:35px;align-items:center}.support-banner h2{font:500 30px var(--serif);color:var(--gold-light);margin:12px 0 8px}.support-banner p{max-width:620px;color:#bdc8c7;font-size:13px;margin:0}.footer{border-top:1px solid var(--border);background:#07090c;padding:42px 0 22px}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer img{width:180px;height:100px;object-fit:contain}.footer-links{display:flex;flex-wrap:wrap;gap:23px}.footer-links a{font-size:11px;color:#b1bcb8}.footer-bottom{margin-top:20px;padding-top:18px;border-top:1px solid #d5b57c23;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#7e9396}
.subpage{min-height:100vh;padding:150px 0 100px;position:relative;background:radial-gradient(ellipse at 77% 14%,#0a737038,transparent 42%),linear-gradient(#081015e6,#080b0f),url('assets/abyss-landscape.svg') center top/cover fixed}.subpage .container{max-width:1030px}.subpage-hero{max-width:750px}.subpage .section-title{font-size:clamp(35px,4.5vw,57px)}.under-panel{margin-top:36px;padding:42px;background:linear-gradient(140deg,#14252acc,#0d1419ee);border:1px solid var(--border)}.under-panel h2{font:500 24px var(--serif);color:var(--gold-light);margin:0 0 10px}.under-panel p{color:#b6c1c0}.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:35px}.roadmap article{border:1px solid var(--border);background:#101a1dcf;padding:25px}.roadmap span{font:500 25px var(--serif);color:var(--teal)}.roadmap h3{font:500 17px var(--serif);color:var(--gold-light);margin:14px 0 8px}.roadmap p{font-size:12px;color:#b0c0c2;margin:0}.back{display:inline-block;margin:20px 0;color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.15em}.pill{display:inline-block;border:1px solid #d5b57c4c;color:#d7ba7d;font-size:10px;letter-spacing:.15em;text-transform:uppercase;padding:7px 12px}
@keyframes skybreath{from{transform:scale(1)}to{transform:scale(1.035)}}@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(10px) rotate(4deg)}}@media(max-width:1230px){.header-content{gap:14px}.brand{width:180px;flex-basis:180px}.brand img{width:180px;height:100px}.header-nav{gap:14px}.header-nav a{font-size:10px}.header-actions .button{padding:0 11px}}
@media(max-width:980px){.site-header{height:76px}.header-content{padding:0 20px}.brand{height:70px;width:190px;flex-basis:190px}.brand img{width:185px;height:100px;top:7px}.header-nav{display:none;position:absolute;top:76px;left:0;right:0;padding:20px;background:#081013ef;border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;gap:0}.header-nav.open{display:flex}.header-nav a{padding:13px 16px;font-size:12px;border-bottom:1px solid #d6b57914}.mobile-toggle{display:block}.header-actions{margin-left:auto}.header-actions .button{min-height:39px}.hero-grid{grid-template-columns:1fr}.hero{min-height:740px}.hero-text{max-width:670px}.hero-decoration{right:4%;top:24%;opacity:.3}.classes-grid{grid-template-columns:repeat(3,1fr)}.intro-layout{gap:4%}.codex-grid{grid-template-columns:repeat(2,1fr)}.section{padding:84px 0}}
@media(max-width:680px){.container{padding:0 20px}.header-content{padding:0 14px}.brand{flex:0 0 128px;width:128px}.brand img{width:140px;height:86px;top:4px}.header-actions .button{font-size:9px;padding:0 10px;min-height:37px}.header-actions .download-cta{display:none}.mobile-toggle{width:39px;height:39px}.hero{min-height:760px;padding-top:91px}.hero:before{background-position:61% center}.hero:after{background:linear-gradient(90deg,#04080eea,#061016ae 70%,#0610168c),linear-gradient(0deg,#080b0f,transparent 35%)}.hero-grid{min-height:620px;padding-bottom:75px}.hero-text{padding:25px 0}.hero h1{font-size:clamp(37px,10vw,55px)}.hero p{font-size:13px}.hero-kicker{font-size:9px;letter-spacing:.2em}.hero-actions{gap:10px}.hero-actions .button{width:100%}.hero-footer{bottom:25px}.hero-bottom span{font-size:9px}.hero-decoration{display:none}.section{padding:74px 0}.intro-layout,.feature-split{grid-template-columns:1fr}.intro-art{height:285px;order:-1}.classes-grid{grid-template-columns:repeat(2,1fr);gap:10px}.class-card{min-height:235px;padding:19px 14px}.class-glyph{margin:22px 0 34px;font-size:47px}.class-name{font-size:14px}.class-role{font-size:9px}.codex-top{display:block}.codex-grid{grid-template-columns:1fr}.codex-card{min-height:155px}.community-grid,.roadmap{grid-template-columns:1fr}.chapter{padding:28px;min-height:240px}.support-banner{padding:33px 24px;display:block}.support-banner .button{margin-top:25px;width:100%}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}.footer-links{gap:14px}.class-detail{padding:18px}.update-row{flex-wrap:wrap;gap:7px}.update-row small{margin-left:0;width:100%}.subpage{padding-top:120px}.under-panel{padding:28px}.lines{gap:14px}.line-stat{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}


/* V2 — Immersive World Canvas: a single cinematic backdrop shared across the landing page. */
body{background:#06090d}
.abyss-world{position:fixed;inset:-75px 0;z-index:0;pointer-events:none;overflow:hidden;isolation:isolate;background:#06090d}
.abyss-world__image{position:absolute;inset:-45px 0;background-image:url('assets/abyss-empress-immersive.webp');background-repeat:no-repeat;background-size:cover;background-position:72% 40%;will-change:transform;transform:translate3d(0,var(--abyss-parallax,0px),0) scale(1.055)}
.abyss-world:before{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(3,7,11,.84) 0%,rgba(4,8,12,.67) 24%,rgba(4,8,13,.31) 58%,rgba(5,7,11,.34) 100%),linear-gradient(180deg,rgba(3,6,10,.19),rgba(3,7,11,.17) 48%,rgba(3,7,11,.59));pointer-events:none}
.abyss-world:after{content:'';position:absolute;z-index:2;inset:0;background:radial-gradient(ellipse at 83% 44%,transparent 14%,rgba(1,5,9,.13) 70%,rgba(1,4,8,.4));pointer-events:none}
main{position:relative;z-index:1}
.hero{isolation:auto;background:transparent;overflow:hidden}
.hero:before{display:none}
.hero:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(2,5,9,.49) 0%,rgba(3,7,11,.19) 38%,transparent 69%),linear-gradient(0deg,rgba(3,7,11,.42),transparent 24%);pointer-events:none}
.hero-grid{position:relative;z-index:1}.hero-footer{position:absolute;z-index:3}
.hero-decoration{display:none}
.section.dark{background:linear-gradient(180deg,rgba(4,9,13,.79),rgba(8,16,20,.83) 52%,rgba(4,9,13,.79))}
.section.stone{background:radial-gradient(ellipse at 76% 7%,rgba(7,80,79,.16),transparent 56%),rgba(5,11,15,.78)}
.intro-art{background:radial-gradient(ellipse at 55% 48%,rgba(0,127,125,.12),transparent 68%),linear-gradient(0deg,rgba(3,8,12,.56),rgba(3,8,12,.13)),url('assets/abyss-empress-immersive.webp') 80% 48%/auto 150% no-repeat}
.footer{position:relative;z-index:1;background:rgba(4,8,11,.95)}
.subpage{background:linear-gradient(90deg,rgba(3,8,12,.93),rgba(3,8,12,.76)),url('assets/abyss-empress-immersive.webp') 73% center/cover fixed}
@media(min-width:1200px){.hero{min-height:880px}.hero-grid{min-height:790px}}
@media(max-width:980px){.abyss-world__image{background-position:73% 50%}.abyss-world:before{background:linear-gradient(90deg,rgba(2,5,9,.89),rgba(3,7,11,.54) 65%,rgba(3,7,11,.36)),linear-gradient(0deg,rgba(2,5,9,.58),transparent 55%)}.hero{min-height:740px}}
@media(max-width:680px){.abyss-world{inset:0}.abyss-world__image{inset:-35px 0;background-position:73% 50%;transform:scale(1.045)}.abyss-world:before{background:linear-gradient(90deg,rgba(2,5,9,.91),rgba(3,7,11,.67) 65%,rgba(3,7,11,.42)),linear-gradient(0deg,rgba(2,5,9,.64),transparent 55%)}.hero:after{background:linear-gradient(90deg,rgba(2,5,9,.52),rgba(2,5,9,.13)),linear-gradient(0deg,rgba(3,6,10,.44),transparent 25%)}.section.dark,.section.stone{background-color:rgba(5,10,14,.87)}.intro-art{background-position:82% center}}
@media(prefers-reduced-motion:reduce){.abyss-world__image{will-change:auto;transform:scale(1.055)!important}}


/* V2.1 — Cinematic Atmosphere Refinement.
   The original backdrop remains unchanged. Ambient overlays are decorative only. */
.abyss-world{inset:0;overflow:hidden;contain:paint}
.abyss-world__image{
  inset:84px 0 0; background-position:73% 0%; background-size:cover;
  transform:translate3d(0,var(--abyss-parallax,0px),0) scale(1.012);
  transform-origin:50% 0%;
  will-change:transform;
}
/* Keep the character's crown below the header without shrinking the figure dramatically. */
.abyss-world__image:after{content:'';position:absolute;inset:0;pointer-events:none}
.abyss-world__glow,.abyss-world__fog,.abyss-world__sparks{
  position:absolute;inset:0;pointer-events:none;z-index:0
}
.abyss-world__glow{
  background:
    radial-gradient(ellipse 24% 23% at 89% 61%,rgba(15,217,205,.17),transparent 78%),
    radial-gradient(ellipse 22% 16% at 68% 17%,rgba(17,210,201,.11),transparent 82%),
    radial-gradient(ellipse 22% 24% at 78% 43%,rgba(135,23,44,.065),transparent 85%);
  mix-blend-mode:screen;opacity:.45;
  animation:abyss-light-breathe 16s ease-in-out infinite alternate;
}
.abyss-world__fog{
  inset:auto -18% -13%;height:46%;
  filter:blur(37px); opacity:.25;
  background:radial-gradient(ellipse 55% 35% at 40% 56%,rgba(114,175,177,.23),transparent 78%),
    radial-gradient(ellipse 37% 27% at 73% 37%,rgba(29,120,132,.29),transparent 80%);
  transform:translate3d(0,0,0);
  animation:abyss-mist-drift 38s ease-in-out infinite alternate;
}
.abyss-world__fog--near{
  inset:auto -14% -16%;height:37%;filter:blur(44px);opacity:.19;
  background:radial-gradient(ellipse 50% 41% at 59% 65%,rgba(59,154,159,.34),transparent 78%),
    radial-gradient(ellipse 37% 36% at 17% 47%,rgba(171,192,197,.19),transparent 80%);
  animation-duration:49s;animation-direction:alternate-reverse;
}
.abyss-world__sparks{
  opacity:.24;
  background-image:
    radial-gradient(circle at 84% 54%,rgba(87,241,222,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 72%,rgba(77,235,215,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 77% 68%,rgba(204,69,70,.78) 0 1px,transparent 2px),
    radial-gradient(circle at 62% 36%,rgba(211,93,85,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 96% 47%,rgba(131,229,219,.71) 0 1px,transparent 2px);
  animation:abyss-spark-breathe 11s ease-in-out infinite alternate;
}
/* The background is a single world but its light subtly changes with the journey. */
.abyss-world::after{
  background:radial-gradient(ellipse at 87% 42%,transparent 14%,rgba(1,5,9,.11) 66%,rgba(1,4,8,.31));
  transition:opacity 1.2s ease;
}
body[data-abyss-scene="classes"] .abyss-world::after,
body[data-abyss-scene="server-guide"] .abyss-world::after{opacity:.96}
body[data-abyss-scene="community"] .abyss-world__glow{filter:hue-rotate(-13deg)}
.hero:after{background:linear-gradient(90deg,rgba(2,5,9,.57) 0%,rgba(3,7,11,.25) 36%,transparent 69%),linear-gradient(0deg,rgba(3,7,11,.35),transparent 28%)}
.intro-art{background-position:80% 35%}
/* Small polished interactions: no continuously moving button borders. */
.button{position:relative;filter:drop-shadow(0 2px 10px rgba(0,0,0,.12))}
.button:hover{filter:brightness(1.12) drop-shadow(0 0 8px rgba(200,156,83,.18))}
.class-card{transition:border-color .26s,transform .26s,background .26s,box-shadow .26s}
.class-card:hover,.class-card[aria-pressed=true]{box-shadow:inset 0 0 34px rgba(26,148,148,.10),0 10px 27px rgba(0,0,0,.16)}
.codex-card{transition:border-color .3s,background-color .3s,box-shadow .3s}
.codex-card:hover{border-color:rgba(219,177,100,.45);box-shadow:inset 0 0 25px rgba(16,139,133,.06)}
@keyframes abyss-light-breathe{
  0%{opacity:.35;transform:scale(1)} 50%{opacity:.55} 100%{opacity:.74;transform:scale(1.015)}
}
@keyframes abyss-mist-drift{
  0%{transform:translate3d(-3%,0,0)} 100%{transform:translate3d(4%,-5%,0)}
}
@keyframes abyss-spark-breathe{
  from{opacity:.13;transform:translateY(0)}to{opacity:.32;transform:translateY(-9px)}
}
@media(min-width:1200px){
  /* Show the source art's upper edge rather than cropping away the crown. */
  .abyss-world__image{background-position:73% 0%}
}
@media(max-width:980px){
  .abyss-world__image{background-position:72% 0%}
  .abyss-world__glow{opacity:.30}
  .abyss-world__fog{opacity:.14}
  .abyss-world__sparks{opacity:.16}
}
@media(max-width:680px){
  .abyss-world__image{
    inset:76px 0 0;background-position:76% 0%;transform:scale(1.005) !important;
    will-change:auto;
  }
  .abyss-world__glow{opacity:.18;animation:none}
  .abyss-world__fog{filter:blur(36px);opacity:.11;animation:none}
  .abyss-world__fog--near,.abyss-world__sparks{display:none}
  .abyss-world:before{background:linear-gradient(90deg,rgba(2,5,9,.92),rgba(3,7,11,.66) 65%,rgba(3,7,11,.43)),linear-gradient(0deg,rgba(2,5,9,.58),transparent 55%)}
}
@media(prefers-reduced-motion:reduce){
  .abyss-world__image{transform:none !important;will-change:auto}
  .abyss-world__glow,.abyss-world__fog,.abyss-world__sparks{animation:none !important}
}



/* V2.3 — Smooth Magic. No animated WebP or image-frame decoding.
   Canvas coordinates are registered to the scene's original 1672x941 painting. */
.abyss-world__image::after{content:none!important}
.abyss-world__magic{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:.96}
@media(max-width:980px){.abyss-world__magic{opacity:.80}}
@media(max-width:680px){.abyss-world__magic{opacity:.66}}
@media(prefers-reduced-motion:reduce){.abyss-world__magic{display:none}}

/* --- Language switch (PT/EN) and Codex value lines --- */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:42px;padding:0 11px;border:1px solid var(--border);background:rgba(10,19,24,.55);color:var(--gold-light);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.lang-toggle:hover{background:rgba(16,73,75,.75);border-color:rgba(219,177,100,.55);color:#fff8e8}
.codex-card{display:flex;flex-direction:column;min-height:205px}
.codex-value{font:500 30px/1.15 var(--serif);color:var(--gold);margin:6px 0 9px;letter-spacing:.01em}
.codex-card .status{margin-top:auto}
@media(max-width:980px){.lang-toggle{min-height:39px;min-width:44px}}
@media(max-width:680px){.lang-toggle{min-height:37px;min-width:40px;padding:0 8px;font-size:9px}.codex-card{min-height:0}.codex-value{font-size:24px}}

/* ==========================================================================
   Account registration — Abyss Premium
   ========================================================================== */
.reg-body{background:#05080b}
.reg-page{position:relative;min-height:100vh;padding:86px 0 0;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 78% 8%, rgba(10,115,112,.20), transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 92%, rgba(120,22,34,.16), transparent 65%),
    linear-gradient(180deg,#05080b 0%,#070d11 45%,#05080b 100%);
}
.reg-page::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url('assets/abyss-empress-immersive.webp') center 12%/cover no-repeat;
  opacity:.16;filter:saturate(.7);
}
.reg-page::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,8,11,.55),rgba(5,8,11,.86) 55%,#05080b 92%);
}
.reg-ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.reg-ambient__orb{position:absolute;width:520px;height:520px;right:-140px;top:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(40,200,193,.18),transparent 65%);filter:blur(18px);
  animation:reg-orb 14s ease-in-out infinite}
.reg-ambient__veil{position:absolute;left:-10%;bottom:-30%;width:70%;height:60%;
  background:radial-gradient(ellipse,rgba(171,38,49,.14),transparent 70%);filter:blur(24px)}
@keyframes reg-orb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-18px,16px,0) scale(1.05)}}

.reg-shell{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:74px 30px 96px;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:64px;align-items:center}

/* ---- narrative column ---- */
.reg-side{max-width:520px}
.reg-side-title{font:500 clamp(32px,3.4vw,50px)/1.16 var(--serif);color:var(--gold-light);
  margin:16px 0 18px;text-wrap:balance}
.reg-side-lead{color:#a9b8bd;line-height:1.85;font-size:14px;max-width:460px}
.reg-perks{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:14px}
.reg-perks li{display:flex;gap:13px;align-items:flex-start;font-size:13px;color:#b8c4c6;line-height:1.6}
.reg-perk-mark{color:var(--gold);font-size:11px;line-height:1.9}
.reg-side-foot{margin-top:38px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#7d8a8d}
.reg-side-foot span[aria-hidden]{color:var(--teal)}

/* ---- card ---- */
.reg-card{position:relative;padding:40px 38px 34px;max-width:520px;justify-self:end;width:100%;
  background:linear-gradient(158deg,rgba(19,33,37,.94),rgba(8,14,18,.97));
  border:1px solid rgba(212,175,106,.22);
  box-shadow:0 34px 90px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045);
  border-radius:3px;overflow:hidden}
.reg-card::before{content:'';position:absolute;top:0;left:0;width:72px;height:2px;background:var(--gold)}
.reg-card-glow{position:absolute;right:-90px;top:-120px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(40,200,193,.16),transparent 68%);pointer-events:none}
.reg-card-head{position:relative;margin-bottom:28px}
.reg-card-kicker{display:block;font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--teal);font-weight:700;margin-bottom:10px}
.reg-card-title{font:500 25px/1.3 var(--serif);color:var(--gold-light);margin:0 0 10px;text-wrap:balance}
.reg-card-sub{font-size:12.5px;color:#93a3a7;line-height:1.7;margin:0}

/* ---- fields ---- */
.reg-form{position:relative;display:grid;gap:17px}
.field{display:grid;gap:8px}
.field label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#c9bb9b}
.field-control{position:relative;display:flex;align-items:center}
.field-control input{width:100%;height:50px;padding:0 48px 0 15px;font-size:14px;color:#ece6d6;
  background:#070d11;border:1px solid rgba(212,175,106,.2);border-radius:2px;
  transition:border-color .2s,box-shadow .2s,background .2s;outline:none}
.field-control input::placeholder{color:#5d6b6e}
.field-control input:hover{border-color:rgba(212,175,106,.34)}
.field-control input:focus{border-color:var(--teal);box-shadow:0 0 0 1px rgba(40,200,193,.45),0 0 22px rgba(40,200,193,.12);background:#081115}
.field-control input:-webkit-autofill{-webkit-text-fill-color:#ece6d6;-webkit-box-shadow:0 0 0 40px #070d11 inset}
.field-badge{position:absolute;right:15px;display:none;color:#37c9bd}
.field.is-valid .field-badge{display:block}
.field.is-valid .field-control input{border-color:rgba(40,200,193,.38)}
.field.is-invalid .field-control input{border-color:#b3454f;box-shadow:0 0 0 1px rgba(179,69,79,.35)}
.field-msg{margin:0;font-size:11.5px;line-height:1.5;color:#ef9f9f;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .22s ease,opacity .18s ease}
.field-msg.visible{max-height:64px;opacity:1}
.field-hint{font-size:10.5px;color:#75858a;line-height:1.6;letter-spacing:.01em}
#reg-username-msg,#reg-password-msg,#reg-password2-msg,#reg-consent-msg{min-height:0}

.field-toggle{position:absolute;right:6px;width:38px;height:38px;display:grid;place-items:center;
  background:transparent;border:0;color:#6f7f83;border-radius:2px;transition:color .2s,background .2s}
.field-toggle:hover{color:var(--gold);background:rgba(212,175,106,.07)}
.field-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.field-toggle .icon-eye-off{display:none}
.field-toggle.is-visible .icon-eye{display:none}
.field-toggle.is-visible .icon-eye-off{display:block}
.field-toggle.is-visible{color:var(--teal)}

/* password requirements */
.pw-reqs{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px}
.pw-reqs li{display:flex;align-items:center;gap:8px;font-size:10.5px;color:#6f7f83;transition:color .2s}
.req-dot{width:6px;height:6px;border-radius:50%;border:1px solid #55666a;flex:0 0 auto;transition:all .2s}
.pw-reqs li.is-met{color:#8fd8c9}
.pw-reqs li.is-met .req-dot{background:var(--teal);border-color:var(--teal);box-shadow:0 0 8px rgba(40,200,193,.5)}

/* honeypot: invisible to players, ignored by screen readers, never focusable */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* consent */
.consent{position:relative;display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;
  cursor:pointer;margin-top:2px}
.consent input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.consent-box{width:18px;height:18px;margin-top:1px;border:1px solid rgba(212,175,106,.4);border-radius:2px;
  background:#070d11;position:relative;transition:background .2s,border-color .2s}
.consent-box::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #08110f;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:all .18s}
.consent input:checked + .consent-box{background:var(--gold);border-color:var(--gold)}
.consent input:checked + .consent-box::after{opacity:1;transform:rotate(45deg) scale(1)}
.consent input:focus-visible + .consent-box{outline:2px solid var(--teal);outline-offset:3px}
.consent-text{font-size:11.5px;color:#9dadaf;line-height:1.65}

/* submit + states */
.reg-submit{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  height:54px;margin-top:6px;border:1px solid #bd6151;color:#fff4dc;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  background:linear-gradient(130deg,#922330,#500e20);
  box-shadow:inset 0 0 22px rgba(235,78,34,.09),0 12px 34px rgba(0,0,0,.45);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px);
  transition:filter .2s,transform .2s,opacity .2s}
.reg-submit:hover:not(:disabled){filter:brightness(1.14);transform:translateY(-1px)}
.reg-submit:active:not(:disabled){transform:translateY(0)}
.reg-submit:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.reg-submit:disabled{opacity:.62;cursor:progress}
.reg-submit-arrow{transition:transform .2s}
.reg-submit:hover:not(:disabled) .reg-submit-arrow{transform:translateX(4px)}
.reg-spinner{display:none;width:15px;height:15px;border:2px solid rgba(255,244,220,.35);
  border-top-color:#fff4dc;border-radius:50%;animation:reg-spin .7s linear infinite}
.reg-submit.is-loading .reg-spinner{display:block}
.reg-submit.is-loading .reg-submit-arrow{display:none}
@keyframes reg-spin{to{transform:rotate(360deg)}}

.reg-progress{position:relative;display:grid;gap:7px;margin-top:2px}
.reg-progress[hidden]{display:none}
.reg-progress::before{content:'';display:block;height:3px;background:#0d1a1f;border:1px solid rgba(212,175,106,.14)}
.reg-progress i{position:absolute;top:1px;left:1px;display:block;height:3px;width:0;
  background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .2s linear}
.reg-progress-text{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7d9395}

.reg-status{margin:0;min-height:18px;font-size:11.5px;line-height:1.55}
.reg-status.info{color:#9fd6d3}
.reg-status.error{color:#f0a3a3}
.reg-note{margin:2px 0 0;font-size:10px;color:#66757a;line-height:1.6}

.reg-captcha{display:flex;justify-content:center;margin:4px 0}

/* success */
.reg-success{text-align:center;padding:8px 4px 4px}
.reg-success[hidden]{display:none}
.reg-success-mark{font-size:26px;color:var(--gold);margin-bottom:12px;text-shadow:0 0 22px rgba(212,175,106,.5)}
.reg-success h2{font:500 24px/1.3 var(--serif);color:var(--gold-light);margin:0 0 14px}
.reg-success-line{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8f9ea1}
.reg-success-line strong{display:block;margin-top:8px;font:500 20px var(--serif);color:var(--gold);
  letter-spacing:.04em;text-transform:none;word-break:break-all}
.reg-success-warn{font-size:12px;color:#d8c9a8;line-height:1.7;margin:16px 0 24px;
  padding:12px 14px;border:1px solid rgba(212,175,106,.22);background:rgba(212,175,106,.05)}
.reg-success .button{width:100%}

.reg-footer{margin-top:0;border-top:1px solid rgba(212,175,106,.12)}

/* ---- responsive ---- */
@media (max-width:1020px){
  .reg-shell{grid-template-columns:1fr;gap:38px;padding-top:52px;max-width:620px}
  .reg-side{max-width:none;text-align:center}
  .reg-side-lead{margin-left:auto;margin-right:auto}
  .reg-perks{max-width:430px;margin-left:auto;margin-right:auto;text-align:left}
  .reg-side-foot{margin-top:24px}
  .reg-card{justify-self:center}
}
@media (max-width:600px){
  .reg-page{padding-top:76px}
  .reg-shell{padding:34px 16px 64px;gap:26px}
  .reg-side-title{font-size:30px;margin:12px 0 12px}
  .reg-side-lead{font-size:13px}
  .reg-perks{display:none}
  .reg-card{padding:28px 20px 24px;border-left:0;border-right:0;border-radius:0}
  .reg-card-title{font-size:22px}
  .pw-reqs{grid-template-columns:1fr}
  .reg-submit{height:52px}
}
@media (prefers-reduced-motion:reduce){
  .reg-ambient__orb{animation:none}
  .reg-spinner{animation:none;border-top-color:rgba(255,244,220,.35)}
}

/* ---- recovery code (success panel) ---- */
.reg-recovery{margin:18px 0 6px;padding:14px 16px;border:1px dashed rgba(212,175,106,.35);
  background:rgba(212,175,106,.05);display:grid;gap:9px;text-align:left}
.reg-recovery[hidden]{display:none}
.reg-recovery-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:#a99773}
.reg-recovery-code{font:500 17px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--gold-light);letter-spacing:.12em;word-break:break-all;user-select:all}
.reg-copy{justify-self:start;padding:6px 12px;border:1px solid rgba(212,175,106,.3);
  background:transparent;color:#cbb98f;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.reg-copy:hover{background:rgba(212,175,106,.1);color:#fff4dc}
.reg-copy.is-copied{border-color:var(--teal);color:var(--teal)}
.reg-recovery-warn{margin:0;font-size:10.5px;line-height:1.65;color:#c9a9a0}

/* ---- recovery page additions ---- */
.reg-alt{margin:18px 0 0;text-align:center;font-size:11.5px;color:#8b9a9d}
.reg-alt a{color:var(--gold-light);border-bottom:1px solid rgba(212,175,106,.35);padding-bottom:1px}
.reg-alt a:hover{color:#fff4dc;border-color:var(--gold)}
.reg-code-input{text-transform:uppercase;letter-spacing:.16em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}
.reg-side-foot a{color:#cbb98f}
.reg-side-foot a:hover{color:var(--gold-light)}

/* ---- systems: combat meter + achievements ---- */
.systems-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.system-card{position:relative;border:1px solid var(--border);padding:32px 30px 30px;
  background:linear-gradient(155deg,rgba(18,35,39,.86),rgba(9,16,19,.96));overflow:hidden}
.system-card::before{content:'';position:absolute;top:0;left:0;width:58px;height:2px;background:var(--gold)}
.system-head{display:flex;align-items:center;gap:14px;margin-bottom:13px}
.system-mark{font:26px/1 var(--serif);color:var(--teal);text-shadow:0 0 18px rgba(40,200,193,.35)}
.system-card h3{font:500 22px/1.25 var(--serif);color:var(--gold-light);margin:0}
.system-card p{margin:0;font-size:12.5px;line-height:1.75;color:#a9b8bb}
.system-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.system-list li{position:relative;padding-left:19px;font-size:12px;line-height:1.6;color:#b7c4c6}
.system-list li::before{content:'\2726';position:absolute;left:0;top:2px;font-size:9px;color:var(--gold)}
.system-tag{display:inline-block;margin-top:20px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:#8f9ea1;border:1px solid rgba(212,175,106,.25);padding:5px 9px}
@media(max-width:900px){.systems-grid{grid-template-columns:1fr}}
@media(max-width:600px){.system-card{padding:26px 20px}}

/* Floating server status panel */
.server-status{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;width:222px;padding:15px 16px;border:1px solid var(--border,#2a3538);border-radius:14px;background:rgba(10,16,20,.94);box-shadow:0 18px 40px rgba(0,0,0,.38);backdrop-filter:blur(10px);color:#e8e2d6;font-family:system-ui,sans-serif;pointer-events:none}
.server-status__title{font:600 11px/1.2 var(--serif,serif);letter-spacing:.15em;text-transform:uppercase;color:var(--gold,#c9a96a);margin:0 0 11px}
.server-status__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid rgba(201,169,106,.13);font-size:12px;color:#b9c4c6}
.server-status__row:first-of-type{border-top:0}
.server-status__badge{font:600 9px/1 system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#e8c97a;background:rgba(201,169,106,.12);border:1px solid rgba(201,169,106,.3);border-radius:999px;padding:5px 9px;white-space:nowrap}
@media(max-width:980px){.server-status{right:12px;top:auto;bottom:12px;transform:none;width:auto;min-width:196px;padding:12px 14px}}
@media(max-width:520px){.server-status{left:12px;right:12px;bottom:10px;width:auto;min-width:0}}