*{box-sizing:border-box}html{background:#070807;color:#eee8da;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;background:radial-gradient(circle at 88% 10%,rgba(101,121,91,.12),transparent 28%),radial-gradient(circle at 14% 92%,rgba(127,52,57,.10),transparent 25%),linear-gradient(180deg,#080a08,#0d100e 54%,#080908);min-height:100vh}button,input{font:inherit}button{cursor:pointer}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:rgba(8,10,8,.96);border-right:1px solid #252a25;padding:18px 13px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:11px;align-items:center;padding:8px 8px 22px;border-bottom:1px solid #242924}.brand .mini{width:38px;height:38px;border:1px solid rgba(197,165,93,.36);border-radius:12px;display:grid;place-items:center}.brand div:last-child{display:grid}.brand b{font-family:Georgia,serif;letter-spacing:.05em}.brand small{color:#758077;margin-top:3px}.sidebar nav{padding:20px 0;display:grid;gap:5px}.nav-btn{width:100%;border:0;background:transparent;color:#9ca59c;text-align:left;padding:11px 12px;border-radius:10px;display:flex;gap:11px;align-items:center}.nav-btn:hover,.nav-btn.active{background:linear-gradient(90deg,rgba(101,121,91,.16),rgba(197,165,93,.04));color:#efe5c9}.nav-btn.active{box-shadow:inset 2px 0 #c5a55d}.side-foot{margin-top:auto;padding:12px;border:1px solid rgba(101,121,91,.32);border-radius:12px;background:linear-gradient(135deg,rgba(101,121,91,.12),rgba(127,52,57,.07));display:flex;gap:10px;align-items:center}.side-foot>span{font-size:1.45rem;color:#92a57a}.side-foot div{display:grid}.side-foot small{color:#748075}.main{min-width:0}.topbar{height:64px;border-bottom:1px solid #252a25;background:rgba(8,10,8,.78);backdrop-filter:blur(12px);position:sticky;top:0;z-index:15;display:flex;align-items:center;padding:0 22px;gap:12px}.icon-btn{display:none;border:0;background:transparent;color:#ddd}.crumb{font-size:.9rem;color:#889188}.crumb span{margin:0 6px;color:#495149}.crumb b{color:#ddd4bd}.account-btn{margin-left:auto;border:1px solid #2c332c;background:#0e120f;color:#d8d0bc;border-radius:9px;padding:8px 11px}.account-btn:hover{border-color:rgba(197,165,93,.4)}#content{padding:28px;max-width:1500px;margin:auto}.stack{display:grid;gap:18px}.page-head .kicker,.kicker{font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#d7c171}.page-head h1{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.1rem);margin:.2rem 0}.page-head>p:last-child{color:#8b958c;max-width:750px}.panel,.card{position:relative;border:1px solid rgba(197,165,93,.16);border-radius:16px;background:linear-gradient(145deg,rgba(19,23,20,.96),rgba(10,12,10,.97));box-shadow:0 20px 60px rgba(0,0,0,.2);padding:20px}.hero{min-height:310px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;background:radial-gradient(circle at 80% 28%,rgba(197,165,93,.14),transparent 24%),radial-gradient(circle at 86% 78%,rgba(101,121,91,.14),transparent 30%),linear-gradient(125deg,#151a15,#0b0d0b 52%,#17110f)!important}.hero:before{content:"HUNTERZ";position:absolute;right:1%;bottom:-7%;font-size:clamp(4rem,12vw,10rem);font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.018);transform:rotate(-6deg)}.hero-copy{z-index:1;max-width:720px}.hero h1{font-family:Georgia,serif;font-size:clamp(2.6rem,7vw,5.5rem);margin:.2rem 0}.hero h1 span{color:#d6bf75}.hero p{color:#aeb6ad}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.sigil{width:220px;height:220px;flex:0 0 220px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(197,165,93,.35);background:radial-gradient(circle,rgba(197,165,93,.10),rgba(8,9,8,.20) 62%,rgba(101,121,91,.11));font-size:4.5rem;position:relative}.sigil:after{content:"1006 ☠︎ ❧";position:absolute;bottom:29px;font-size:.78rem;letter-spacing:.16em;color:#e5d5a5}.btn{border:1px solid #343b34;border-radius:9px;padding:10px 14px;background:#111511;color:#eae2cf}.btn:hover{filter:brightness(1.08)}.btn.gold{border:0;background:linear-gradient(135deg,#b78d40,#d2b96d);color:#12130f;font-weight:800}.btn.ghost{border-color:rgba(197,165,93,.3);background:transparent}.btn.danger{border-color:rgba(153,70,75,.5);color:#e1b5b7}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:17px;border:1px solid #252b25;border-radius:13px;background:#0c0f0d}.stat small{display:block;color:#6f7a70}.stat strong{display:block;margin:4px 0;font-size:1.55rem;color:#efe4c5}.stat span{color:#979f97}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.section-title{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:14px}.section-title .kicker{margin:0}.section-title h2{margin:3px 0;font-family:Georgia,serif}.rank-list{display:grid}.rank-row{border:0;border-bottom:1px solid #232923;background:transparent;color:#cbc5b7;padding:12px 3px;display:grid;grid-template-columns:40px 62px 1fr 25px;gap:10px;align-items:center;text-align:left}.rank-row:hover{background:rgba(101,121,91,.07)}.rank-row .tag{border:1px solid rgba(197,165,93,.3);border-radius:8px;padding:6px;text-align:center;color:#d7bf75}.rank-row span:nth-child(3){display:grid}.rank-row small{color:#717b72}.event-art{height:90px;border:1px solid #293029;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(127,52,57,.12),rgba(101,121,91,.08));font-family:Georgia,serif;color:#d9c57e;font-size:1.3rem}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.countdown div{padding:10px;border-radius:9px;background:#0b0e0b;text-align:center;border:1px solid #242a24}.countdown strong{display:block;color:#e8d8aa}.countdown span{font-size:.68rem;color:#727b72}.notice{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(101,121,91,.32);border-radius:11px;background:rgba(101,121,91,.08);color:#bdc7b9}.notice.error{border-color:rgba(127,52,57,.45);background:rgba(127,52,57,.1);color:#ddbbbd}.notice span{flex:1}.alliance-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between}.searchbox{display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #293029;border-radius:10px;background:#0a0d0a;min-width:min(360px,100%)}.searchbox input{border:0;outline:0;background:transparent;color:#eee;padding:11px 0;width:100%}.alliance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.alliance-card{overflow:hidden}.alliance-card:before{content:"";position:absolute;right:-45px;top:-45px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(101,121,91,.15),transparent 68%)}.crest{width:65px;height:65px;border:1px solid rgba(197,165,93,.4);border-radius:16px;display:grid;place-items:center;font-family:Georgia,serif;color:#d8c078}.alliance-card h2{font-family:Georgia,serif;margin:.45rem 0}.alliance-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #242a24;border-bottom:1px solid #242a24;margin:16px 0}.alliance-meta span{padding:10px 0;display:grid;color:#6f796f;font-size:.75rem}.alliance-meta strong{font-size:.95rem;color:#ded5be}.back{border:0;background:transparent;color:#d8c276;padding:0}.detail-hero{display:flex;align-items:center;gap:18px;overflow:hidden}.detail-crest,.avatar{width:86px;height:86px;flex:0 0 86px;border-radius:18px;border:1px solid rgba(197,165,93,.34);overflow:hidden;display:grid;place-items:center;background:#0b0e0b;font-size:2rem}.detail-crest img,.avatar img{width:100%;height:100%;object-fit:cover}.detail-hero h1{font-family:Georgia,serif;margin:.2rem 0}.detail-numbers{margin-left:auto;display:flex;gap:22px;text-align:right}.detail-numbers span{display:grid;color:#748076;font-size:.7rem;text-transform:uppercase}.detail-numbers strong{font-size:1.2rem;color:#e3d7b8}.roster-headbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.roster-scroll{overflow-x:auto;border:1px solid #252b25;border-radius:11px}.roster-row{min-width:820px;width:100%;display:grid;grid-template-columns:70px 2fr 1fr .7fr 1fr 1fr;gap:12px;align-items:center;padding:11px 13px;border:0;border-bottom:1px solid #212621;background:#0b0e0b;color:#aab3aa;text-align:left}.roster-row.header{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#667067;background:#080a08}.roster-row:not(.header):hover{background:#121712}.roster-player{display:flex;gap:10px;align-items:center}.roster-player img,.tiny-avatar{width:36px;height:36px;border-radius:9px;object-fit:cover;background:#151a15;border:1px solid #2c332c;display:grid;place-items:center}.roster-player span{display:grid}.roster-player strong{color:#e7deca}.roster-player small{color:#69736a}.online{color:#8fb780!important}.profile-link{margin-left:auto}.profile-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.profile-pills span{font-size:.7rem;border:1px solid #293029;border-radius:999px;padding:5px 8px;color:#929c92}.player-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.player-stats .card{padding:15px}.player-stats small{display:block;color:#6c766d;text-transform:uppercase}.player-stats strong{display:block;margin-top:5px;color:#e8ddbf}.heroes,.gear{display:grid;gap:9px}.hero-item,.gear-item{display:flex;align-items:center;gap:11px;padding:9px;border:1px solid #242a24;border-radius:10px;background:#0a0d0a}.hero-item img,.gear-item img{width:48px;height:48px;border-radius:9px;object-fit:contain;background:#141914}.hero-item div,.gear-item div{display:grid}.hero-item span,.hero-item small,.gear-item span{color:#778177;font-size:.76rem}.leaderboard{display:grid}.leader-row{display:grid;grid-template-columns:55px 1fr 160px;gap:12px;padding:13px 2px;border-bottom:1px solid #242a24;align-items:center}.leader-row span{color:#d0b96f}.leader-row small{color:#6d776e}.leader-row em{text-align:right;font-style:normal;color:#ddd3b9}.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}.podium .card{text-align:center}.podium .first{min-height:210px;border-color:rgba(197,165,93,.4)}.podium .ranknum{font-size:2rem;color:#d7c176}.events{display:grid;gap:10px}.event-row{display:grid;grid-template-columns:80px 1fr;gap:15px;align-items:center}.date{border:1px solid rgba(197,165,93,.25);border-radius:10px;text-align:center;padding:8px;color:#d6bd75}.date strong{display:block}.guide-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.guide h2{font-family:Georgia,serif}.guide p{color:#8e988e}.guide-detail{padding-top:12px;border-top:1px solid #293029;color:#bac2b7!important}.battle{display:grid;grid-template-columns:1fr 1fr;gap:18px}.battle fieldset{border:1px solid #273027;border-radius:11px;margin:10px 0;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.battle legend{color:#d8c37d}.battle label{display:grid;gap:5px;color:#79837a;font-size:.75rem}.battle input{background:#090c09;border:1px solid #293029;border-radius:8px;padding:9px;color:#eee}.split{display:grid;gap:12px}.bar{height:10px;background:#202620;border-radius:999px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#7b8d68,#c0a258)}.transfer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.transfer-grid .card span{font-family:Georgia,serif;color:#b49953}.auth-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.tabs{display:flex;gap:8px;margin-bottom:12px}.tabs button.active{border-color:#c0a55b;color:#e6d6aa}.form{display:grid;gap:11px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form label{display:grid;gap:5px;color:#7f897f;font-size:.75rem}.form input{background:#090c09;border:1px solid #293029;border-radius:8px;color:#eee;padding:10px}.profile-data{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}.profile-data div{padding:11px;border:1px solid #262d26;border-radius:9px;display:grid}.profile-data span{color:#6d776e;font-size:.72rem}.admin-list{display:grid;gap:8px}.admin-item{display:flex;gap:10px;align-items:center;border:1px solid #262d26;border-radius:10px;padding:10px}.admin-item>div{flex:1;display:grid}.admin-item small{color:#747e75}.empty{color:#788279;padding:18px 0}.welcome{position:fixed;z-index:100;inset:0;background:radial-gradient(circle at 50% 36%,#172018,#0a0d0a 40%,#040504 78%);display:grid;place-items:center;align-content:center;text-align:center;padding:20px;transition:.5s ease}.welcome.hidden{opacity:0;visibility:hidden}.welcome-mark{width:190px;height:190px;border-radius:50%;border:1px solid rgba(197,165,93,.45);display:grid;place-items:center;position:relative;box-shadow:0 0 70px rgba(197,165,93,.11)}.welcome-mark .eagle{font-size:4.8rem}.welcome-mark .crown{position:absolute;top:11px;color:#c7a75c;font-size:1.8rem}.welcome-mark b{position:absolute;bottom:28px;letter-spacing:.17em}.welcome-mark span{position:absolute;bottom:8px;color:#8c9d78}.welcome h1{font-family:Georgia,serif;font-size:clamp(2.5rem,8vw,5rem);margin:.2rem}.welcome>p:not(.kicker){color:#9fa79f}.welcome .btn{margin-top:15px}footer{border-top:1px solid #252a25;padding:22px 28px;display:flex;justify-content:space-between;gap:12px;color:#788178}footer div{display:flex;gap:7px;align-items:center}footer span{color:#5f695f}footer a{color:#d2bc76}@media(max-width:1050px){.app{grid-template-columns:78px 1fr}.brand div:last-child,.side-foot div,.nav-btn span:last-child{display:none}.brand{justify-content:center}.side-foot{justify-content:center}.alliance-grid{grid-template-columns:repeat(2,1fr)}.player-stats{grid-template-columns:repeat(3,1fr)}.transfer-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.app{display:block}.sidebar{position:fixed;left:-270px;width:250px;transition:.25s ease}.sidebar.open{left:0}.brand div:last-child,.side-foot div,.nav-btn span:last-child{display:grid}.side-foot{justify-content:flex-start}.icon-btn{display:block}.topbar{padding:0 12px}.crumb{display:none}#content{padding:18px 12px}.hero{min-height:360px}.sigil{display:none}.stat-grid{grid-template-columns:repeat(2,1fr)}.grid2,.battle,.auth-layout{grid-template-columns:1fr}.alliance-grid,.guide-grid{grid-template-columns:1fr}.detail-hero{align-items:flex-start;flex-wrap:wrap}.detail-numbers,.profile-link{margin-left:0;width:100%;text-align:left}.player-stats{grid-template-columns:repeat(2,1fr)}.podium{grid-template-columns:1fr}.podium .first{min-height:0}.leader-row{grid-template-columns:50px 1fr}.leader-row em{grid-column:2;text-align:left}.roster-headbar,.alliance-toolbar{flex-direction:column;align-items:stretch}.searchbox{min-width:0}.form-row,.profile-data{grid-template-columns:1fr}.transfer-grid{grid-template-columns:1fr 1fr}footer{flex-direction:column}}@media(max-width:430px){.stat-grid,.player-stats,.transfer-grid{grid-template-columns:1fr}.countdown{grid-template-columns:repeat(2,1fr)}}
/* faithful Halloween concept pass */
:root{--gold:#f2a128;--orange:#ef7715;--cream:#f5ead6;--ink:#040504;--panel:#090b09}
body{background:#030403;color:#ddd3c3;padding-bottom:82px}
.topbar{height:86px;background:rgba(3,4,3,.97);border-bottom:1px solid rgba(239,119,21,.25);padding:0 22px}
.topbrand{display:flex;flex-direction:column;line-height:1.08;margin-right:auto;margin-left:12px}.topbrand b{font-family:Georgia,serif;color:#ef8b1c;letter-spacing:.06em;font-size:1.1rem}.topbrand small{font-size:.57rem;letter-spacing:.16em;color:#8d897f;margin-top:4px}.crumb{display:none}
.account-btn{border:1px solid rgba(239,119,21,.45);color:#e7d5b9;background:#070806}
main{background:radial-gradient(circle at 80% 0,rgba(239,119,21,.08),transparent 28%),#050605}
.panel,.card,.stat{border-color:rgba(239,119,21,.23)!important;background:linear-gradient(145deg,#0c0e0b,#060706)!important;box-shadow:inset 0 0 42px rgba(239,119,21,.015),0 14px 34px rgba(0,0,0,.28)}
.hero{position:relative;min-height:570px;overflow:hidden;background:#090806!important;padding:54px 44% 44px 40px!important;display:block!important;border-color:rgba(239,119,21,.34)!important}
.hero:before{content:""!important;position:absolute;inset:0 0 0 39%;background:linear-gradient(90deg,#090806 0%,rgba(9,8,6,.15) 28%,rgba(7,7,6,.02) 100%),url('/assets/halloween-castle-hero.jpg') center/cover no-repeat;opacity:.98;color:transparent!important;z-index:0}
.hero:after{content:"🕸";position:absolute;left:20px;top:15px;font-size:4rem;opacity:.16;color:#d87917}
.hero-copy{position:relative;z-index:2;max-width:520px}.hero .kicker{color:#ed8e22;letter-spacing:.28em;font-size:.75rem}.hero h1{font-family:Georgia,serif;font-size:clamp(3.5rem,8vw,6rem);line-height:.88;color:var(--cream);margin:18px 0 26px}.hero h1 span{display:block;color:#ee7b16;text-shadow:0 0 24px rgba(239,119,21,.15)}.hero-copy>p:not(.kicker){font-family:Georgia,serif;color:#c3b59f;font-size:1.22rem;line-height:1.5;max-width:420px}.hero-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:30px}.hero-actions .btn{min-width:310px;justify-content:center}.btn.gold{background:linear-gradient(180deg,#f7ad34,#e76f10);border-color:#f29c27;color:#120a03;box-shadow:0 0 28px rgba(239,119,21,.18)}.sigil{display:none!important}
.stat-grid{gap:16px}.stat{min-height:145px;position:relative;overflow:hidden;padding:26px 28px}.stat:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,rgba(239,119,21,.055));pointer-events:none}.stat small{color:#9b907d}.stat strong{color:#ef8519;font-family:Georgia,serif;font-size:2.4rem}.stat span{color:#b7ac99}
.kicker{color:#e49a34}.panel h2,.panel h1,.card h2{font-family:Georgia,serif;color:#f0e3cf}
.mobile-dock{display:none}
footer{border-top:1px solid rgba(239,119,21,.18)}
@media(max-width:760px){
body{padding-bottom:76px}.main{width:100%}.topbar{height:78px;padding:0 14px}.topbrand{margin-left:8px}.topbrand b{font-size:1rem}.topbrand small{font-size:.48rem}.account-btn{padding:11px 12px;font-size:.9rem}
main{padding:14px!important}.hero{min-height:620px;padding:48px 24px 34px!important}.hero:before{inset:0;background:linear-gradient(180deg,rgba(5,6,5,.05),rgba(5,6,5,.2) 34%,#070806 68%,#070806 100%),url('/assets/halloween-castle-hero.jpg') top center/cover no-repeat;opacity:.78}.hero-copy{padding-top:250px}.hero .kicker{font-size:.66rem}.hero h1{font-size:3.9rem;margin:12px 0 22px}.hero-copy>p:not(.kicker){font-size:1.08rem}.hero-actions .btn{width:100%;min-width:0;font-size:.98rem}.stat-grid{grid-template-columns:1fr!important}.stat{min-height:128px}.grid2{grid-template-columns:1fr!important}
.mobile-dock{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:70px;z-index:80;background:rgba(3,4,3,.97);border-top:1px solid rgba(239,119,21,.28);box-shadow:0 -12px 30px rgba(0,0,0,.45)}.dock-btn{border:0;background:transparent;color:#817d75;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:1.15rem}.dock-btn small{font-size:.56rem;text-transform:uppercase;letter-spacing:.06em}.dock-btn.active{color:#f08a1d}.dock-btn.active span{text-shadow:0 0 12px rgba(239,119,21,.45)}
footer{margin-bottom:8px}
}
/* Exact-preview mobile corrections */
.hero h1 .realm-number{display:flex!important;align-items:center;gap:13px;width:max-content;color:#f07918!important}
.realm-number i{font-family:Georgia,serif;font-size:.28em;font-style:normal;color:#d7a04b;opacity:.9}
.hero-ornament{width:130px;display:flex;align-items:center;gap:8px;color:#8c5724;margin:-14px 0 18px;font-size:.8rem}
.hero-ornament:before,.hero-ornament:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#75451f)}
.hero-ornament:after{background:linear-gradient(90deg,#75451f,transparent)}
.halloween-stats .stat{display:flex;align-items:center;gap:18px}
.stat-icon{width:72px;height:72px;flex:0 0 72px;border:1px solid rgba(239,119,21,.32);border-radius:18px;display:grid;place-items:center;font-family:Georgia,serif;font-size:2rem;color:#f18a1c;background:radial-gradient(circle,rgba(239,119,21,.13),rgba(4,5,4,.7) 68%);box-shadow:inset 0 0 25px rgba(239,119,21,.07)}
.stat-copy{display:grid;position:relative;z-index:2}.stat-copy strong{line-height:1}.stat-copy span{margin-top:8px}
@media(max-width:760px){
.topbrand b{font-family:Georgia,"Times New Roman",serif;font-weight:800;letter-spacing:.09em;color:#f18a1d}.topbrand small{letter-spacing:.19em}
.hero{min-height:650px!important}.hero-copy{padding-top:285px!important}.hero h1{font-family:Georgia,"Times New Roman",serif!important;font-weight:800;letter-spacing:-.035em;line-height:.84!important}.hero h1 .realm-number{gap:10px}
.hero-ornament{margin-top:-8px}
.halloween-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.halloween-stats .stat{min-height:148px!important;padding:17px 14px!important;gap:12px!important}
.stat-icon{width:54px;height:54px;flex-basis:54px;border-radius:14px;font-size:1.45rem}.stat-copy small{font-size:.65rem}.stat-copy strong{font-size:2rem!important}.stat-copy span{font-size:.78rem}
}
@media(max-width:390px){.halloween-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.halloween-stats .stat{padding:14px 10px!important;gap:8px!important}.stat-icon{width:46px;height:46px;flex-basis:46px}.stat-copy strong{font-size:1.72rem!important}}
/* ===== KINGDOM 1006 CINEMATIC REALM INTRO ===== */
.legacy-welcome{display:none!important}
body.intro-lock{overflow:hidden;touch-action:none}
.realm-intro{
position:fixed;inset:0;z-index:9999;overflow:hidden;
background:#020302;color:#f1e5cc;
isolation:isolate;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.realm-intro.intro-done{animation:introExit .85s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
.realm-intro.intro-gone{display:none}
.intro-backdrop{
position:absolute;inset:-4%;
background:
linear-gradient(180deg,rgba(1,2,1,.35),rgba(1,2,1,.08) 48%,rgba(1,2,1,.74)),
url('/assets/realm-summon-bg.jpg') center/cover no-repeat;
filter:saturate(.72) brightness(.44) contrast(1.1);
transform:scale(1.07);
animation:realmBreathe 7s ease-out both
}
.intro-backdrop:after{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 50% 47%,transparent 0 26%,rgba(0,0,0,.38) 63%,rgba(0,0,0,.82) 100%)
}
.intro-moon{
position:absolute;width:min(50vw,520px);aspect-ratio:1;border-radius:50%;
left:50%;top:7%;transform:translateX(-50%) scale(.72);
background:radial-gradient(circle at 42% 38%,#f6d18b,#d39136 42%,#785021 66%,rgba(70,46,22,.15) 72%,transparent 74%);
opacity:0;filter:blur(.2px);box-shadow:0 0 70px rgba(226,154,67,.2);
animation:moonRise 1.5s 1.05s ease-out forwards
}
.summon-stage{position:absolute;inset:0;z-index:3}
.summon-reaper{
position:absolute;left:50%;bottom:7%;width:min(64vw,820px);max-height:78vh;object-fit:contain;
transform:translate(-50%,14%) scale(.84);opacity:0;filter:brightness(.7) contrast(1.18) drop-shadow(0 30px 38px #000);
animation:reaperReveal 1.45s 1.45s cubic-bezier(.16,.8,.2,1) forwards,reaperHover 2.7s 2.9s ease-in-out infinite alternate
}
.summon-eagle{
position:absolute;left:-5%;bottom:-18%;width:min(53vw,620px);max-height:58vh;object-fit:contain;
opacity:0;transform:translate(-15%,48%) rotate(-7deg) scale(.72);
filter:saturate(.9) contrast(1.05) drop-shadow(0 24px 24px #000);
animation:eagleSummon 1.35s 3.15s cubic-bezier(.15,.82,.17,1.02) forwards,eagleFloat 2.5s 4.55s ease-in-out infinite alternate
}
.summon-mammoth{
position:absolute;right:-5%;bottom:-20%;width:min(54vw,650px);max-height:60vh;object-fit:contain;
opacity:0;transform:translate(15%,52%) scale(.7);
filter:saturate(.9) contrast(1.05) drop-shadow(0 24px 24px #000);
animation:mammothSummon 1.45s 3.35s cubic-bezier(.15,.82,.17,1.02) forwards,mammothBreathe 2.8s 4.8s ease-in-out infinite alternate
}
.necromancy-ring{
position:absolute;left:50%;bottom:5%;width:min(72vw,800px);height:120px;border-radius:50%;
transform:translateX(-50%) scale(.25);opacity:0;
border:2px solid rgba(102,255,122,.1);
box-shadow:0 0 20px rgba(69,255,103,.18),0 0 90px rgba(52,230,87,.12),inset 0 0 45px rgba(59,255,97,.12);
animation:ringSummon 1.35s 2.55s ease-out forwards
}
.ring-two{width:min(58vw,620px);height:85px;animation-delay:2.82s;filter:blur(1px)}
.intro-summon-glow{
position:absolute;bottom:-18%;width:58vw;height:55vh;border-radius:50%;z-index:2;opacity:0;filter:blur(55px);
background:radial-gradient(circle,rgba(63,255,94,.40),rgba(41,220,70,.12) 42%,transparent 70%);
animation:magicGlow 1.4s 2.65s ease-out forwards
}
.glow-left{left:-10%}.glow-right{right:-10%}
.smoke{
position:absolute;bottom:-20%;width:42vw;height:46vh;border-radius:50%;
opacity:0;filter:blur(28px);
background:radial-gradient(circle at 50% 55%,rgba(96,255,119,.28),rgba(44,183,68,.14) 36%,rgba(15,55,22,.05) 63%,transparent 72%);
mix-blend-mode:screen;
animation:smokeRise 3.2s 2.45s ease-out forwards
}
.smoke-a{left:2%}.smoke-b{left:30%;animation-delay:2.7s}.smoke-c{right:1%;animation-delay:2.55s}
.embers{position:absolute;inset:0;pointer-events:none}
.embers i{
position:absolute;bottom:-5%;width:4px;height:4px;border-radius:50%;background:#f69a24;
box-shadow:0 0 8px #ff8b12;opacity:0;animation:emberFloat 3.2s 2.7s linear infinite
}
.embers i:nth-child(1){left:8%;animation-delay:2.6s}.embers i:nth-child(2){left:18%;animation-delay:3.15s}
.embers i:nth-child(3){left:27%;animation-delay:2.95s}.embers i:nth-child(4){left:39%;animation-delay:3.45s}
.embers i:nth-child(5){left:48%;animation-delay:2.72s}.embers i:nth-child(6){left:58%;animation-delay:3.25s}
.embers i:nth-child(7){left:67%;animation-delay:2.84s}.embers i:nth-child(8){left:76%;animation-delay:3.5s}
.embers i:nth-child(9){left:87%;animation-delay:3.05s}.embers i:nth-child(10){left:94%;animation-delay:2.74s}
.royal-curtain{
position:absolute;top:0;bottom:0;width:51.5%;z-index:12;display:grid;place-content:center;text-align:center;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 4%,rgba(0,0,0,.18) 7% 11%,rgba(255,255,255,.012) 14% 17%),
radial-gradient(ellipse at 48% 40%,#14130f 0,#080907 55%,#020302 100%);
box-shadow:inset 0 0 90px #000,0 0 60px rgba(0,0,0,.9);
border-color:rgba(201,154,58,.36)
}
.royal-curtain:before{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(211,164,69,.05) 45%,rgba(255,214,124,.10) 50%,rgba(0,0,0,.3) 55%,transparent);
opacity:.8
}
.curtain-left{left:0;border-right:2px solid rgba(204,151,48,.32);animation:curtainLeft 2.05s .72s cubic-bezier(.68,.01,.2,1) forwards}
.curtain-right{right:0;border-left:2px solid rgba(204,151,48,.32);animation:curtainRight 2.05s .72s cubic-bezier(.68,.01,.2,1) forwards}
.curtain-crown{font-size:clamp(2rem,7vw,4.5rem);color:#c79c49;text-shadow:0 0 24px rgba(212,165,73,.24);z-index:1}
.curtain-eagle{font-size:clamp(3rem,10vw,6.5rem);filter:grayscale(.35) sepia(.2);z-index:1;margin:.15em}
.curtain-1006{font-family:Georgia,serif;font-weight:800;font-size:clamp(1.6rem,5vw,3rem);letter-spacing:.16em;color:#d0ae67;z-index:1}
.curtain-valance{
position:absolute;left:0;right:0;top:0;height:11vh;z-index:15;
background:linear-gradient(180deg,#090a08,#12100c 65%,#050605);
border-bottom:2px solid #8e672d;
box-shadow:0 12px 34px rgba(0,0,0,.7);
clip-path:polygon(0 0,100% 0,100% 70%,94% 100%,86% 68%,77% 100%,68% 68%,59% 100%,50% 68%,41% 100%,32% 68%,23% 100%,14% 68%,6% 100%,0 70%)
}
.intro-title{
position:absolute;z-index:9;left:50%;bottom:11%;transform:translateX(-50%);width:min(92%,820px);text-align:center;
opacity:0;animation:titleReveal .9s 4.35s ease-out forwards
}
.intro-title span{display:block;color:#e6972b;letter-spacing:.22em;font-size:clamp(.62rem,1.7vw,.82rem);font-weight:800}
.intro-title strong{display:block;font-family:Georgia,serif;font-size:clamp(2.2rem,8vw,5.4rem);line-height:.95;margin:.16em 0;color:#f1e4ce;text-shadow:0 4px 24px #000}
.intro-title strong b{color:#ef7f18}
.intro-title small{color:#cabda8;font-family:Georgia,serif;font-size:clamp(.82rem,2vw,1.08rem)}
.intro-skip{
position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));z-index:30;
border:1px solid rgba(229,155,45,.52);background:rgba(3,4,3,.68);color:#e8b454;border-radius:999px;
padding:8px 13px;font-size:.66rem;letter-spacing:.12em;backdrop-filter:blur(10px)
}
.intro-loading{
position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);
z-index:20;display:flex;align-items:center;gap:9px;color:#ba9e6d;font-size:.62rem;letter-spacing:.16em
}
.intro-loading span{width:7px;height:7px;border:1px solid #dfad54;border-radius:50%;box-shadow:0 0 11px rgba(223,173,84,.5);animation:loadingPulse .8s infinite alternate}
.intro-loading em{font-style:normal}
@keyframes curtainLeft{0%{transform:translateX(0)}100%{transform:translateX(-96%) skewX(-1.5deg)}}
@keyframes curtainRight{0%{transform:translateX(0)}100%{transform:translateX(96%) skewX(1.5deg)}}
@keyframes reaperReveal{0%{opacity:0;transform:translate(-50%,22%) scale(.78);filter:brightness(.3) blur(4px)}100%{opacity:1;transform:translate(-50%,8%) scale(1);filter:brightness(.78) contrast(1.18) blur(0) drop-shadow(0 30px 38px #000)}}
@keyframes reaperHover{to{transform:translate(-50%,5%) scale(1.015)}}
@keyframes eagleSummon{0%{opacity:0;transform:translate(-15%,55%) rotate(-9deg) scale(.68)}70%{opacity:1}100%{opacity:1;transform:translate(0,4%) rotate(-2deg) scale(1)}}
@keyframes mammothSummon{0%{opacity:0;transform:translate(15%,60%) scale(.68)}75%{opacity:1}100%{opacity:1;transform:translate(0,3%) scale(1)}}
@keyframes eagleFloat{to{transform:translate(1%,-1%) rotate(1deg) scale(1.015)}}
@keyframes mammothBreathe{to{transform:translate(-.5%,0) scale(1.018)}}
@keyframes ringSummon{0%{opacity:0;transform:translateX(-50%) scale(.2)}45%{opacity:.9}100%{opacity:.15;transform:translateX(-50%) scale(1.2)}}
@keyframes magicGlow{0%{opacity:0;transform:scale(.7)}50%{opacity:.85}100%{opacity:.5;transform:scale(1.05)}}
@keyframes smokeRise{0%{opacity:0;transform:translateY(35%) scale(.7)}30%{opacity:.9}100%{opacity:.18;transform:translateY(-55%) scale(1.35)}}
@keyframes emberFloat{0%{opacity:0;transform:translateY(0) scale(.5)}18%{opacity:.9}100%{opacity:0;transform:translateY(-75vh) translateX(28px) scale(1.3)}}
@keyframes moonRise{to{opacity:.38;transform:translateX(-50%) scale(1)}}
@keyframes titleReveal{0%{opacity:0;transform:translate(-50%,18px)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes realmBreathe{0%{transform:scale(1.10);filter:saturate(.55) brightness(.32)}100%{transform:scale(1.03);filter:saturate(.82) brightness(.48)}}
@keyframes loadingPulse{to{transform:scale(1.55);background:#dca43d}}
@keyframes introExit{to{opacity:0;visibility:hidden;filter:blur(3px);transform:scale(1.015)}}
@media (max-width:760px){
.intro-moon{width:82vw;top:13%}
.summon-reaper{width:96vw;bottom:15%;max-height:65vh}
.summon-eagle{width:72vw;left:-18%;bottom:-5%;max-height:44vh}
.summon-mammoth{width:75vw;right:-22%;bottom:-5%;max-height:45vh}
.intro-title{bottom:13%}
.intro-title strong{font-size:clamp(2.3rem,13vw,4.5rem)}
.royal-curtain{width:52%}
.curtain-valance{height:9vh}
}
@media (max-width:430px){
.summon-reaper{width:112vw;bottom:17%}
.summon-eagle{width:78vw;left:-24%;bottom:1%}
.summon-mammoth{width:82vw;right:-28%;bottom:0}
.intro-title{bottom:12%}
.intro-title span{font-size:.55rem}
.intro-title small{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
.realm-intro *{animation-duration:.01ms!important;animation-delay:.01ms!important}
}
/* ===== INTRO STAYS UNTIL ENTER THE REALM IS PRESSED ===== */
.intro-enter{
display:block;
margin:18px auto 0;
min-width:min(86vw,340px);
padding:15px 22px;
border:1px solid #ef9b25;
border-radius:10px;
background:linear-gradient(180deg,#f3aa2d,#de7414);
color:#130a03;
font-weight:900;
font-size:clamp(.88rem,3vw,1.05rem);
letter-spacing:.04em;
box-shadow:0 0 30px rgba(236,128,21,.28), inset 0 1px rgba(255,255,255,.25);
opacity:0;
transform:translateY(14px) scale(.98);
pointer-events:none;
transition:opacity .55s ease, transform .55s ease, box-shadow .2s ease;
}
.realm-intro.intro-ready .intro-enter{
opacity:1;
transform:translateY(0) scale(1);
pointer-events:auto;
}
.realm-intro.intro-ready .intro-loading{
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
}
.realm-intro.intro-ready .intro-title{
opacity:1!important;
transform:translate(-50%,0)!important;
}
.intro-enter:active{transform:scale(.985)!important}
@media(max-width:430px){
.intro-enter{margin-top:14px;padding:14px 18px}
}
/* =========================================================
KINGDOM 1006 EXACT APPROVED CURTAIN -> REALM INTRO
Uses the user's two approved images exactly.
========================================================= */
.legacy-welcome{display:none!important}
body.intro-lock{overflow:hidden!important;touch-action:none!important}
.exact-intro{
position:fixed;
inset:0;
z-index:99999;
overflow:hidden;
background:#020202;
isolation:isolate;
}
.exact-intro.exact-exit{
animation:exactIntroExit .72s ease forwards;
pointer-events:none;
}
.exact-intro.exact-gone{display:none!important}
/* Exact second approved image, visible behind the curtains. */
.realm-view{
position:absolute;
inset:0;
z-index:1;
background:#020202 url('/assets/intro-realm-exact.jpg') center center / 100% 100% no-repeat;
}
/* Exact first approved curtain image split into two moving halves. */
.curtain-piece{
position:absolute;
top:0;
bottom:0;
width:50.12%;
z-index:10;
background-image:url('/assets/intro-curtain-exact.jpg');
background-repeat:no-repeat;
background-size:200% 100%;
will-change:transform;
filter:saturate(1.02) contrast(1.02);
}
.curtain-piece-left{
left:0;
background-position:left center;
animation:exactCurtainLeft 2.25s 3s cubic-bezier(.72,.02,.18,1) forwards;
}
.curtain-piece-right{
right:0;
background-position:right center;
animation:exactCurtainRight 2.25s 3s cubic-bezier(.72,.02,.18,1) forwards;
}
/* Purple smoke is independent CSS, so it visibly rolls in a loop. */
.royal-fog{
position:absolute;
z-index:16;
left:-18%;
bottom:-8%;
width:136%;
height:31vh;
min-height:180px;
pointer-events:none;
mix-blend-mode:screen;
filter:blur(22px) saturate(1.2);
opacity:.58;
background:
radial-gradient(ellipse at 8% 72%,rgba(168,70,255,.58) 0 13%,rgba(92,31,169,.30) 30%,transparent 55%),
radial-gradient(ellipse at 33% 78%,rgba(120,46,220,.55) 0 16%,rgba(69,28,139,.26) 34%,transparent 58%),
radial-gradient(ellipse at 60% 68%,rgba(191,83,255,.52) 0 13%,rgba(96,31,182,.24) 34%,transparent 57%),
radial-gradient(ellipse at 84% 80%,rgba(73,227,153,.18) 0 10%,rgba(94,36,179,.28) 31%,transparent 56%);
animation:fogDriftExact 8s ease-in-out infinite alternate;
}
.royal-fog:before,
.royal-fog:after{
content:"";
position:absolute;
inset:5% -10% -10%;
border-radius:50%;
filter:blur(28px);
}
.royal-fog:before{
background:
radial-gradient(ellipse at 22% 62%,rgba(224,126,255,.38),transparent 34%),
radial-gradient(ellipse at 65% 70%,rgba(132,52,240,.40),transparent 37%);
animation:fogCloudExactA 6s linear infinite alternate;
}
.royal-fog:after{
background:
radial-gradient(ellipse at 39% 72%,rgba(55,217,148,.12),transparent 34%),
radial-gradient(ellipse at 78% 59%,rgba(197,89,255,.35),transparent 38%);
animation:fogCloudExactB 9s ease-in-out infinite alternate-reverse;
}
.fog-two{
opacity:.38;
bottom:-1%;
filter:blur(34px);
transform:scaleX(1.12);
animation-duration:11s;
}
.fog-three{
opacity:.26;
bottom:-13%;
filter:blur(42px);
transform:scaleX(.94);
animation-duration:14s;
}
/* Fog stays with the curtain and disappears as the curtain finishes opening. */
.exact-intro.intro-opening .royal-fog{
animation:
fogDriftExact 8s ease-in-out infinite alternate,
fogFadeOut 1.5s 1.05s ease forwards;
}
/* Skip only skips the animation; it does NOT enter the website. */
.exact-skip{
position:absolute;
top:max(18px,env(safe-area-inset-top));
right:max(18px,env(safe-area-inset-right));
z-index:40;
border:1px solid rgba(213,169,83,.72);
color:#e9c778;
background:rgba(3,3,3,.54);
border-radius:999px;
padding:10px 18px;
font:700 .72rem/1 system-ui,-apple-system,sans-serif;
letter-spacing:.13em;
backdrop-filter:blur(8px);
}
/* Transparent button exactly over the ENTER THE REALM button in approved image. */
.realm-button-hotspot{
position:absolute;
z-index:35;
left:32%;
top:85.6%;
width:36%;
height:10.4%;
border:0;
background:transparent;
cursor:pointer;
opacity:0;
pointer-events:none;
}
.exact-intro.realm-ready .realm-button-hotspot{
opacity:1;
pointer-events:auto;
}
/* Small hover/tap glow without altering the approved button artwork. */
.exact-intro.realm-ready .realm-button-hotspot:active{
box-shadow:0 0 42px rgba(155,69,227,.42);
border-radius:18px;
}
@keyframes exactCurtainLeft{
0%{transform:translateX(0)}
100%{transform:translateX(-101.5%)}
}
@keyframes exactCurtainRight{
0%{transform:translateX(0)}
100%{transform:translateX(101.5%)}
}
@keyframes fogDriftExact{
0%{transform:translate3d(-4%,8%,0) scale(1.03)}
35%{transform:translate3d(3%,-2%,0) scale(1.09)}
72%{transform:translate3d(-1%,-8%,0) scale(1.13)}
100%{transform:translate3d(5%,1%,0) scale(1.06)}
}
@keyframes fogCloudExactA{
from{transform:translateX(-6%) scale(.96);opacity:.42}
to{transform:translateX(7%) scale(1.1);opacity:.72}
}
@keyframes fogCloudExactB{
from{transform:translate(-4%,4%) scale(1.06);opacity:.38}
to{transform:translate(6%,-6%) scale(.97);opacity:.68}
}
@keyframes fogFadeOut{
to{opacity:0;transform:translateY(20%) scale(1.08)}
}
@keyframes exactIntroExit{
to{opacity:0;visibility:hidden;transform:scale(1.01)}
}
/* Phone layout: preserve the exact compositions rather than crop pieces away. */
@media(max-width:760px){
.realm-view,
.curtain-piece{
background-size:100% 100%;
}
/* For split halves on mobile, each half needs the full-image scaling reference. */
.curtain-piece{
background-size:200% 100%;
}
.royal-fog{
height:27vh;
min-height:170px;
bottom:-4%;
opacity:.52;
}
.realm-button-hotspot{
left:27%;
width:46%;
top:85%;
height:11%;
}
}
/* =========================================================
SMOOTH INTRO FIX
- Curtains open once
- Only one final Kingdom 1006 image exists
- Summoning is CSS-only to prevent image popping/glitching
========================================================= */
.exact-intro{
position:fixed;inset:0;z-index:99999;overflow:hidden;
background:#020202;isolation:isolate;
}
.exact-intro.exact-exit{
animation:smoothIntroExit .72s ease forwards;
pointer-events:none;
}
.exact-intro.exact-gone{display:none!important}
/* One and only final realm artwork. */
.realm-view{
position:absolute;inset:0;z-index:1;
background:#020202 url('/assets/intro-realm-exact.jpg') center center / 100% 100% no-repeat;
opacity:1;
transform:scale(1);
filter:brightness(.58) saturate(.78);
transition:filter 1.2s ease;
}
.exact-intro.summoning .realm-view{
animation:realmSummonPulse 3.0s ease both;
}
.exact-intro.realm-ready .realm-view{
filter:brightness(1) saturate(1);
}
/* Exact curtain artwork. No inherited animation. */
.exact-intro .curtain-piece{
position:absolute;top:0;bottom:0;width:50.12%;z-index:30;
background-image:url('/assets/intro-curtain-exact.jpg');
background-repeat:no-repeat;background-size:200% 100%;
animation:none!important;
transition:none!important;
will-change:transform;
}
.exact-intro .curtain-piece-left{
left:0;background-position:left center;
transform:translate3d(0,0,0);
}
.exact-intro .curtain-piece-right{
right:0;background-position:right center;
transform:translate3d(0,0,0);
}
.exact-intro.open-curtains .curtain-piece-left{
animation:smoothCurtainLeft 2.15s cubic-bezier(.72,.02,.18,1) forwards!important;
}
.exact-intro.open-curtains .curtain-piece-right{
animation:smoothCurtainRight 2.15s cubic-bezier(.72,.02,.18,1) forwards!important;
}
/* Curtain fog loops while closed, then fades as curtain opens. */
.royal-fog{
position:absolute;z-index:34;left:-18%;bottom:-7%;
width:136%;height:27vh;min-height:165px;
pointer-events:none;mix-blend-mode:screen;
filter:blur(25px) saturate(1.18);
opacity:.46;
background:
radial-gradient(ellipse at 12% 72%,rgba(176,72,255,.46),transparent 43%),
radial-gradient(ellipse at 36% 80%,rgba(123,48,220,.43),transparent 47%),
radial-gradient(ellipse at 63% 70%,rgba(196,88,255,.40),transparent 46%),
radial-gradient(ellipse at 87% 80%,rgba(77,225,151,.14),rgba(105,39,185,.23) 27%,transparent 50%);
animation:curtainFogSmooth 8s ease-in-out infinite alternate;
}
.fog-two{opacity:.25;bottom:-1%;filter:blur(38px);animation-duration:12s}
.exact-intro.open-curtains .royal-fog{
animation:curtainFogSmooth 8s ease-in-out infinite alternate,fogFadeSmooth 1.35s .7s ease forwards;
}
/* CSS-only summoning FX */
.summon-fx{
position:absolute;inset:0;z-index:12;
pointer-events:none;
opacity:0;
}
.exact-intro.summoning .summon-fx{
opacity:1;
}
.fx-glow{
position:absolute;bottom:-14%;width:55vw;height:55vh;border-radius:50%;
opacity:0;filter:blur(52px);mix-blend-mode:screen;
background:radial-gradient(circle,rgba(149,63,255,.48),rgba(60,233,145,.19) 32%,rgba(80,28,145,.12) 51%,transparent 73%);
}
.fx-left{left:-8%}.fx-right{right:-8%}
.exact-intro.summoning .fx-glow{
animation:fxGlowBloom 2.6s ease-out forwards;
}
.fx-ring{
position:absolute;left:50%;bottom:8%;
width:min(72vw,820px);height:120px;border-radius:50%;
transform:translateX(-50%) scale(.24);
opacity:0;
border:2px solid rgba(134,255,186,.2);
box-shadow:
0 0 20px rgba(112,255,169,.28),
0 0 68px rgba(154,67,255,.28),
inset 0 0 36px rgba(128,255,178,.12);
}
.fx-ring-two{width:min(58vw,650px);height:86px}
.exact-intro.summoning .fx-ring-one{animation:ringSmooth 1.45s .25s ease-out forwards}
.exact-intro.summoning .fx-ring-two{animation:ringSmooth 1.45s .55s ease-out forwards}
.fx-fog{
position:absolute;bottom:-18%;width:58vw;height:48vh;border-radius:50%;
opacity:0;filter:blur(30px);mix-blend-mode:screen;
background:radial-gradient(circle at 50% 55%,rgba(176,74,255,.38),rgba(58,220,143,.16) 32%,rgba(84,31,151,.08) 57%,transparent 73%);
}
.fx-fog-a{left:-5%}.fx-fog-b{right:-5%}
.exact-intro.summoning .fx-fog-a{animation:fxFogRise 2.8s .2s ease-out forwards}
.exact-intro.summoning .fx-fog-b{animation:fxFogRise 3.0s .38s ease-out forwards}
.fx-sparks i{
position:absolute;bottom:-4%;width:4px;height:4px;border-radius:50%;
background:#cf8aff;box-shadow:0 0 9px #78efab;opacity:0;
}
.fx-sparks i:nth-child(1){left:10%}.fx-sparks i:nth-child(2){left:21%}.fx-sparks i:nth-child(3){left:33%}
.fx-sparks i:nth-child(4){left:45%}.fx-sparks i:nth-child(5){left:57%}.fx-sparks i:nth-child(6){left:69%}
.fx-sparks i:nth-child(7){left:81%}.fx-sparks i:nth-child(8){left:92%}
.exact-intro.summoning .fx-sparks i{animation:fxSparkRise 2.9s .35s linear infinite}
/* After summon, fade FX only. Final image never disappears/reappears. */
.exact-intro.realm-ready .summon-fx{
animation:fxLayerFade .9s ease forwards;
}
.realm-button-hotspot{
position:absolute;z-index:50;
left:31%;top:85.5%;width:38%;height:10.5%;
border:0;background:transparent;
opacity:0;pointer-events:none;
}
.exact-intro.realm-ready .realm-button-hotspot{
opacity:1;pointer-events:auto;
}
@keyframes smoothCurtainLeft{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-101.5%,0,0)}
}
@keyframes smoothCurtainRight{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(101.5%,0,0)}
}
@keyframes curtainFogSmooth{
0%{transform:translate3d(-4%,7%,0) scale(1.02)}
45%{transform:translate3d(3%,-3%,0) scale(1.08)}
100%{transform:translate3d(5%,1%,0) scale(1.04)}
}
@keyframes fogFadeSmooth{
to{opacity:0;transform:translateY(26%) scale(1.06)}
}
@keyframes realmSummonPulse{
0%{filter:brightness(.58) saturate(.78);transform:scale(1.02)}
28%{filter:brightness(.77) saturate(.98);transform:scale(1.01)}
58%{filter:brightness(1.05) saturate(1.15);transform:scale(1)}
100%{filter:brightness(1) saturate(1);transform:scale(1)}
}
@keyframes fxGlowBloom{
0%{opacity:0;transform:scale(.62)}
48%{opacity:.9}
100%{opacity:.4;transform:scale(1.06)}
}
@keyframes ringSmooth{
0%{opacity:0;transform:translateX(-50%) scale(.2)}
48%{opacity:.92}
100%{opacity:.1;transform:translateX(-50%) scale(1.2)}
}
@keyframes fxFogRise{
0%{opacity:0;transform:translateY(40%) scale(.72)}
36%{opacity:.72}
100%{opacity:.16;transform:translateY(-52%) scale(1.34)}
}
@keyframes fxSparkRise{
0%{opacity:0;transform:translateY(0)}
20%{opacity:.9}
100%{opacity:0;transform:translateY(-74vh) translateX(20px)}
}
@keyframes fxLayerFade{
to{opacity:0}
}
@keyframes smoothIntroExit{
to{opacity:0;visibility:hidden;transform:scale(1.01)}
}
@media(max-width:760px){
.realm-view{background-size:100% 100%}
.exact-intro .curtain-piece{background-size:200% 100%}
.fx-ring{width:88vw}
.realm-button-hotspot{left:26%;width:48%;top:85%;height:11%}
}
/* ===== FULL CHARACTER SUMMONING SEQUENCE ===== */
.summon-fx{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0}
.exact-intro.summoning .summon-fx{opacity:1}
.summon-char{
position:absolute;
object-fit:contain;
opacity:0;
will-change:transform,opacity,filter;
mix-blend-mode:screen;
filter:saturate(1.05) contrast(1.10) drop-shadow(0 24px 30px rgba(0,0,0,.75));
}
.summon-reaper-char{
left:50%;bottom:9%;
width:min(70vw,850px);
max-height:78vh;
transform:translate(-50%,24%) scale(.74);
}
.summon-eagle-char{
left:-6%;bottom:-11%;
width:min(54vw,640px);
max-height:58vh;
transform:translate(-10%,65%) rotate(-8deg) scale(.66);
}
.summon-mammoth-char{
right:-7%;bottom:-12%;
width:min(56vw,680px);
max-height:60vh;
transform:translate(10%,68%) scale(.66);
}
.exact-intro.summoning .summon-reaper-char{
animation:
reaperSummonIn 1.35s .15s cubic-bezier(.18,.82,.18,1) forwards,
reaperSummonHover 2.5s 1.55s ease-in-out infinite alternate;
}
.exact-intro.summoning .summon-eagle-char{
animation:
eagleSummonRise 1.45s 1.05s cubic-bezier(.14,.84,.16,1) forwards,
eagleSummonFloat 2.15s 2.55s ease-in-out infinite alternate;
}
.exact-intro.summoning .summon-mammoth-char{
animation:
mammothSummonRise 1.55s 1.30s cubic-bezier(.14,.84,.16,1) forwards,
mammothSummonBreath 2.45s 2.90s ease-in-out infinite alternate;
}
.fx-center{left:23%;right:23%;width:auto}
.exact-intro.summoning .fx-glow{
animation:fxGlowBloom 3s ease-out forwards
}
.exact-intro.summoning .fx-left{animation-delay:.7s}
.exact-intro.summoning .fx-center{animation-delay:.05s}
.exact-intro.summoning .fx-right{animation-delay:.95s}
.fx-ring-three{
width:min(46vw,520px)!important;
height:70px!important;
}
.exact-intro.summoning .fx-ring-one{animation:ringSmooth 1.55s .20s ease-out forwards}
.exact-intro.summoning .fx-ring-two{animation:ringSmooth 1.55s .48s ease-out forwards}
.exact-intro.summoning .fx-ring-three{animation:ringSmooth 1.55s .78s ease-out forwards}
.fx-fog-c{
left:22%;
width:56%;
}
.exact-intro.summoning .fx-fog-a{animation:fxFogRise 3.1s .65s ease-out forwards}
.exact-intro.summoning .fx-fog-b{animation:fxFogRise 3.2s .85s ease-out forwards}
.exact-intro.summoning .fx-fog-c{animation:fxFogRise 3.0s .18s ease-out forwards}
.fx-sparks i:nth-child(9){left:27%}
.fx-sparks i:nth-child(10){left:74%}
.exact-intro.summoning .fx-sparks i{animation:fxSparkRise 3.1s .4s linear infinite}
/* One smooth handoff to the final poster. */
.exact-intro.realm-ready .summon-char,
.exact-intro.realm-ready .fx-glow,
.exact-intro.realm-ready .fx-ring,
.exact-intro.realm-ready .fx-fog,
.exact-intro.realm-ready .fx-sparks{
animation:characterFxFade .85s ease forwards!important;
}
.exact-intro.realm-ready .realm-view{
animation:finalPosterSettle 1s ease forwards;
}
@keyframes reaperSummonIn{
0%{
opacity:0;
transform:translate(-50%,27%) scale(.72);
filter:saturate(.9) brightness(.35) blur(4px) drop-shadow(0 24px 30px rgba(0,0,0,.7));
}
62%{opacity:.98}
100%{
opacity:1;
transform:translate(-50%,5%) scale(1);
filter:saturate(1.05) brightness(.92) blur(0) drop-shadow(0 24px 30px rgba(0,0,0,.75));
}
}
@keyframes reaperSummonHover{
to{transform:translate(-50%,1.5%) scale(1.02)}
}
@keyframes eagleSummonRise{
0%{opacity:0;transform:translate(-10%,68%) rotate(-9deg) scale(.64)}
68%{opacity:1}
100%{opacity:1;transform:translate(0,1%) rotate(-1deg) scale(1)}
}
@keyframes eagleSummonFloat{
to{transform:translate(1%,-2.5%) rotate(1.5deg) scale(1.018)}
}
@keyframes mammothSummonRise{
0%{opacity:0;transform:translate(10%,70%) scale(.64)}
70%{opacity:1}
100%{opacity:1;transform:translate(0,1%) scale(1)}
}
@keyframes mammothSummonBreath{
to{transform:translate(-.5%,-1.5%) scale(1.02)}
}
@keyframes characterFxFade{
to{opacity:0;filter:blur(1px)}
}
@keyframes finalPosterSettle{
0%{filter:brightness(.7) saturate(.9);transform:scale(1.015)}
100%{filter:brightness(1) saturate(1);transform:scale(1)}
}
@media(max-width:760px){
.summon-reaper-char{width:110vw;bottom:17%;max-height:63vh}
.summon-eagle-char{width:79vw;left:-25%;bottom:-2%;max-height:43vh}
.summon-mammoth-char{width:84vw;right:-29%;bottom:-3%;max-height:45vh}
}
/* ===== FINAL INTRO HOLD FIX =====
Keep the summoned Reaper, eagle and mammoth alive/hovering until ENTER THE REALM.
Never fade the summoned character layer at realm-ready. */
.exact-intro.realm-ready .summon-fx{opacity:1!important;animation:none!important}
.exact-intro.realm-ready .summon-char{opacity:1!important}
.exact-intro.realm-ready .summon-reaper-char{
animation:reaperSummonHover 2.5s ease-in-out infinite alternate!important;
transform:translate(-50%,8%) scale(1)!important;
}
.exact-intro.realm-ready .summon-eagle-char{
animation:eagleSummonFloat 2.15s ease-in-out infinite alternate!important;
transform:translate(0,4%) rotate(-2deg) scale(1)!important;
}
.exact-intro.realm-ready .summon-mammoth-char{
animation:mammothSummonBreath 2.45s ease-in-out infinite alternate!important;
transform:translate(0,3%) scale(1)!important;
}
.exact-intro.realm-ready .fx-glow{opacity:.32!important;animation:fxGlowHold 4.5s ease-in-out infinite alternate!important}
.exact-intro.realm-ready .fx-ring{animation:ringHold 3.8s ease-in-out infinite!important}
.exact-intro.realm-ready .fx-fog{opacity:.20!important;animation:fxFogHold 6s ease-in-out infinite alternate!important}
.exact-intro.realm-ready .fx-sparks{opacity:1!important;animation:none!important}
.exact-intro.realm-ready .fx-sparks i{animation:fxSparkRise 3.1s linear infinite!important}
@keyframes fxGlowHold{from{transform:scale(.95);opacity:.24}to{transform:scale(1.08);opacity:.42}}
@keyframes ringHold{0%{opacity:.06;transform:translateX(-50%) scale(.86)}50%{opacity:.30;transform:translateX(-50%) scale(1.08)}100%{opacity:.06;transform:translateX(-50%) scale(.86)}}
@keyframes fxFogHold{from{transform:translateY(-20%) scale(1.08);opacity:.13}to{transform:translateY(-35%) scale(1.28);opacity:.27}}
/* =========================================================
NO DUPLICATE FINAL POSTER
Characters remain as the actual animated layers.
========================================================= */
.realm-view{display:none!important}
.realm-empty-bg{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(180deg,rgba(3,2,7,.18),rgba(2,2,4,.28)),
url('/assets/realm-summon-bg.jpg') center/cover no-repeat;
filter:brightness(.48) saturate(.82) hue-rotate(8deg);
transform:scale(1.025);
}
.realm-empty-bg:after{
content:"";
position:absolute;inset:0;
background:
radial-gradient(circle at 50% 24%,rgba(168,96,255,.10),transparent 24%),
radial-gradient(circle at 50% 80%,rgba(79,235,147,.08),transparent 30%),
linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.36));
}
/* Keep the summoned layers forever until Enter Realm is clicked */
.exact-intro.realm-ready .summon-char,
.exact-intro.realm-ready .fx-glow,
.exact-intro.realm-ready .fx-ring,
.exact-intro.realm-ready .fx-fog,
.exact-intro.realm-ready .fx-sparks{
animation-play-state:running!important;
opacity:1;
}
.exact-intro.realm-ready .summon-fx{
opacity:1!important;
animation:none!important;
}
.exact-intro.realm-ready .summon-reaper-char{
animation:reaperSummonHover 2.5s ease-in-out infinite alternate!important;
opacity:1!important;
transform:translate(-50%,5%) scale(1)!important;
}
.exact-intro.realm-ready .summon-eagle-char{
animation:eagleSummonFloat 2.15s ease-in-out infinite alternate!important;
opacity:1!important;
transform:translate(0,1%) rotate(-1deg) scale(1)!important;
}
.exact-intro.realm-ready .summon-mammoth-char{
animation:mammothSummonBreath 2.45s ease-in-out infinite alternate!important;
opacity:1!important;
transform:translate(0,1%) scale(1)!important;
}
.exact-intro.realm-ready .fx-ring-one{
animation:ringLoopOne 2.8s ease-in-out infinite!important;
}
.exact-intro.realm-ready .fx-ring-two{
animation:ringLoopTwo 3.4s .4s ease-in-out infinite!important;
}
.exact-intro.realm-ready .fx-ring-three{
animation:ringLoopThree 4s .8s ease-in-out infinite!important;
}
.exact-intro.realm-ready .fx-glow{
animation:glowLoop 2.6s ease-in-out infinite alternate!important;
}
.exact-intro.realm-ready .fx-fog-a{
animation:fogLoopA 5.5s ease-in-out infinite alternate!important;
}
.exact-intro.realm-ready .fx-fog-b{
animation:fogLoopB 6.2s ease-in-out infinite alternate-reverse!important;
}
.exact-intro.realm-ready .fx-fog-c{
animation:fogLoopC 7s ease-in-out infinite alternate!important;
}
.exact-intro.realm-ready .fx-sparks i{
animation:fxSparkRise 3.1s linear infinite!important;
}
.realm-copy{
position:absolute;
z-index:24;
left:50%;
bottom:5.5%;
width:min(92%,760px);
transform:translateX(-50%);
text-align:center;
opacity:0;
pointer-events:none;
transition:opacity .6s ease,transform .6s ease;
}
.exact-intro.realm-ready .realm-copy{
opacity:1;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
.realm-kicker{
color:#d8b170;
font-size:clamp(.62rem,1.8vw,.82rem);
letter-spacing:.22em;
font-weight:800;
}
.realm-title{
margin-top:.18em;
color:#eadcc2;
font-family:Georgia,serif;
font-weight:800;
font-size:clamp(2.6rem,8vw,5.6rem);
line-height:.92;
text-shadow:0 5px 24px #000;
}
.realm-title span{
display:block;
color:#a95cf3;
font-size:.88em;
}
.realm-tagline{
color:#d0c3b0;
font-family:Georgia,serif;
font-size:clamp(.8rem,2vw,1rem);
margin:10px auto 16px;
}
.realm-enter-real{
border:1px solid #b6873c;
background:linear-gradient(180deg,#28113a,#16081f);
color:#e9c27e;
padding:14px 26px;
min-width:min(82vw,360px);
border-radius:10px;
font-family:Georgia,serif;
font-weight:700;
font-size:clamp(.9rem,2.5vw,1.05rem);
box-shadow:
0 0 0 2px rgba(70,25,101,.55) inset,
0 0 24px rgba(139,74,208,.20);
}
/* Make sure older rules cannot fade the summoned characters */
@keyframes characterFxFade{to{opacity:1;filter:none}}
@keyframes fxLayerFade{to{opacity:1}}
@keyframes ringLoopOne{
0%,100%{opacity:.15;transform:translateX(-50%) scale(.92)}
50%{opacity:.75;transform:translateX(-50%) scale(1.10)}
}
@keyframes ringLoopTwo{
0%,100%{opacity:.12;transform:translateX(-50%) scale(.84)}
50%{opacity:.58;transform:translateX(-50%) scale(1.06)}
}
@keyframes ringLoopThree{
0%,100%{opacity:.10;transform:translateX(-50%) scale(.78)}
50%{opacity:.46;transform:translateX(-50%) scale(1.03)}
}
@keyframes glowLoop{
from{opacity:.26;transform:scale(.95)}
to{opacity:.62;transform:scale(1.08)}
}
@keyframes fogLoopA{
from{opacity:.16;transform:translateY(4%) scale(1.02)}
to{opacity:.36;transform:translateY(-18%) scale(1.18)}
}
@keyframes fogLoopB{
from{opacity:.14;transform:translate(2%,5%) scale(1)}
to{opacity:.32;transform:translate(-4%,-14%) scale(1.15)}
}
@keyframes fogLoopC{
from{opacity:.12;transform:translateY(8%) scale(.96)}
to{opacity:.28;transform:translateY(-10%) scale(1.12)}
}
@media(max-width:760px){
.realm-copy{bottom:4.5%;width:94%}
.realm-title{font-size:clamp(2.4rem,12vw,4.6rem)}
.realm-enter-real{min-width:78vw}
}
/* =========================================================
TRUE INFINITE HOVER
Entrance and hover are on DIFFERENT DOM elements.
This prevents Safari from stopping/replacing the hover
animation when realm-ready is applied.
========================================================= */
/* Disable all legacy direct-character rules from prior versions. */
.summon-char,
.summon-reaper-char,
.summon-eagle-char,
.summon-mammoth-char{
display:none!important;
}
/* OUTER slots handle only the one-time rise/summon. */
.summon-slot{
position:absolute;
z-index:8;
opacity:0;
pointer-events:none;
will-change:transform,opacity;
}
.reaper-slot{
left:50%;
bottom:17%;
width:min(110vw,850px);
max-width:850px;
transform:translate(-50%,28%);
}
.eagle-slot{
left:-25%;
bottom:-2%;
width:min(79vw,640px);
max-width:640px;
transform:translate(-10%,72%) rotate(-8deg) scale(.68);
}
.mammoth-slot{
right:-29%;
bottom:-3%;
width:min(84vw,680px);
max-width:680px;
transform:translate(10%,74%) scale(.68);
}
/* INNER images handle ONLY the endless subtle movement. */
.summon-hover{
display:block;
width:100%;
height:auto;
object-fit:contain;
opacity:1;
will-change:transform,filter;
transform-origin:50% 55%;
filter:saturate(1.06) contrast(1.08) drop-shadow(0 24px 30px rgba(0,0,0,.74));
}
.reaper-hover{
animation:reaperFloatNeverStop 3.15s ease-in-out infinite alternate;
}
.eagle-hover{
animation:eagleFloatNeverStop 2.65s ease-in-out infinite alternate;
}
.mammoth-hover{
animation:mammothFloatNeverStop 3.55s ease-in-out infinite alternate;
}
/* One-time entrance. The wrapper keeps its final state with forwards. */
.exact-intro.summoning .reaper-slot{
animation:reaperSlotRise 1.35s .15s cubic-bezier(.18,.82,.18,1) forwards!important;
}
.exact-intro.summoning .eagle-slot{
animation:eagleSlotRise 1.45s 1.05s cubic-bezier(.14,.84,.16,1) forwards!important;
}
.exact-intro.summoning .mammoth-slot{
animation:mammothSlotRise 1.55s 1.30s cubic-bezier(.14,.84,.16,1) forwards!important;
}
/* realm-ready MUST NOT replace or stop either set of animations. */
.exact-intro.realm-ready .summon-slot{
opacity:1!important;
animation-play-state:running!important;
}
.exact-intro.realm-ready .summon-hover{
opacity:1!important;
animation-play-state:running!important;
}
/* Explicitly neutralize old fade rules that targeted the summon layer. */
.exact-intro.realm-ready .summon-fx{
opacity:1!important;
animation:none!important;
}
/* Entrance keyframes */
@keyframes reaperSlotRise{
0%{opacity:0;transform:translate(-50%,28%) scale(.76)}
55%{opacity:1}
100%{opacity:1;transform:translate(-50%,0) scale(1)}
}
@keyframes eagleSlotRise{
0%{opacity:0;transform:translate(-10%,72%) rotate(-8deg) scale(.68)}
65%{opacity:1}
100%{opacity:1;transform:translate(0,0) rotate(-1deg) scale(1)}
}
@keyframes mammothSlotRise{
0%{opacity:0;transform:translate(10%,74%) scale(.68)}
68%{opacity:1}
100%{opacity:1;transform:translate(0,0) scale(1)}
}
/* Endless hover keyframes. These are never swapped out. */
@keyframes reaperFloatNeverStop{
0%{
transform:translate3d(0,0,0) scale(1) rotate(-.18deg);
filter:saturate(1.04) brightness(.98) drop-shadow(0 23px 29px rgba(0,0,0,.74));
}
50%{
transform:translate3d(0,-8px,0) scale(1.009) rotate(.12deg);
filter:saturate(1.08) brightness(1.025) drop-shadow(0 27px 33px rgba(0,0,0,.78));
}
100%{
transform:translate3d(1px,-15px,0) scale(1.016) rotate(.25deg);
filter:saturate(1.10) brightness(1.04) drop-shadow(0 30px 36px rgba(0,0,0,.80));
}
}
@keyframes eagleFloatNeverStop{
0%{transform:translate3d(0,0,0) rotate(-.8deg) scale(1)}
50%{transform:translate3d(7px,-10px,0) rotate(.45deg) scale(1.012)}
100%{transform:translate3d(-3px,-18px,0) rotate(1.35deg) scale(1.022)}
}
@keyframes mammothFloatNeverStop{
0%{transform:translate3d(0,0,0) rotate(.10deg) scale(1)}
50%{transform:translate3d(-5px,-8px,0) rotate(-.14deg) scale(1.008)}
100%{transform:translate3d(3px,-14px,0) rotate(.20deg) scale(1.016)}
}
/* Make the continuing movement more obvious on phones without being jumpy. */
@media(min-width:761px){
.reaper-slot{bottom:9%;width:min(70vw,850px)}
.eagle-slot{left:-6%;bottom:-11%;width:min(54vw,640px)}
.mammoth-slot{right:-7%;bottom:-12%;width:min(56vw,680px)}
}
/* =========================================================
KINGDOM 1006 — EMERALD / PURPLE NECROMANCY SITE THEME
Applies to the real site AFTER Enter the Realm.
Intro animation rules remain untouched.
========================================================= */
:root{
--k-bg:#050508;
--k-bg-2:#08070d;
--k-panel:#0b0911;
--k-panel-2:#0d0a15;
--k-purple:#7b2cbf;
--k-purple-bright:#b056ff;
--k-purple-soft:#4b1d69;
--k-emerald:#13c878;
--k-emerald-bright:#4cffae;
--k-emerald-dark:#075f3a;
--k-gold:#d6a84b;
--k-gold-soft:#8a672c;
--k-cream:#f0e5d2;
--k-muted:#a89eaa;
--k-line:rgba(132,62,184,.28);
}
/* Main website background */
body:not(.intro-lock){
background:
radial-gradient(circle at 78% 8%,rgba(92,32,143,.20),transparent 28%),
radial-gradient(circle at 15% 64%,rgba(11,154,91,.12),transparent 30%),
linear-gradient(180deg,#030306 0%,#09070f 48%,#050508 100%) !important;
color:var(--k-cream);
}
body:not(.intro-lock)::before{
content:"";
position:fixed;
inset:0;
z-index:-2;
pointer-events:none;
background:
radial-gradient(circle at 50% 0%,rgba(139,66,191,.08),transparent 38%),
repeating-linear-gradient(115deg,transparent 0 84px,rgba(255,255,255,.006) 85px 86px);
}
body:not(.intro-lock)::after{
content:"";
position:fixed;
left:-10%;
right:-10%;
bottom:-13vh;
height:32vh;
z-index:-1;
pointer-events:none;
opacity:.35;
filter:blur(42px);
background:
radial-gradient(ellipse at 18% 55%,rgba(138,48,214,.38),transparent 38%),
radial-gradient(ellipse at 52% 75%,rgba(29,192,116,.20),transparent 40%),
radial-gradient(ellipse at 84% 60%,rgba(113,35,184,.34),transparent 40%);
animation:siteFogDrift 10s ease-in-out infinite alternate;
}
/* Top navigation */
.topbar{
background:rgba(4,4,8,.94)!important;
border-bottom:1px solid rgba(64,224,142,.17)!important;
box-shadow:0 8px 30px rgba(0,0,0,.34);
backdrop-filter:blur(14px);
}
.brand b{
color:#e7d7b9!important;
text-shadow:0 0 18px rgba(176,86,255,.10);
}
.brand small{
color:#8f8695!important;
letter-spacing:.18em;
}
.account-btn{
color:#e7decf!important;
border-color:rgba(176,86,255,.40)!important;
background:
linear-gradient(180deg,rgba(31,18,42,.82),rgba(8,8,12,.94))!important;
box-shadow:
inset 0 0 18px rgba(35,204,126,.035),
0 0 18px rgba(126,47,189,.08);
}
.account-btn:hover{
border-color:rgba(76,255,174,.54)!important;
}
/* Sidebar */
.sidebar{
background:
radial-gradient(circle at 15% 12%,rgba(91,35,135,.18),transparent 24%),
linear-gradient(180deg,rgba(6,5,10,.985),rgba(7,6,12,.99))!important;
border-right:1px solid rgba(79,218,146,.16)!important;
}
.nav-btn{
color:#aea6b2!important;
border:1px solid transparent!important;
}
.nav-btn:hover{
color:#eee3d1!important;
background:rgba(113,47,165,.10)!important;
border-color:rgba(135,64,190,.12)!important;
}
.nav-btn.active{
color:#efe4d2!important;
background:
linear-gradient(90deg,rgba(93,37,141,.28),rgba(14,144,87,.08))!important;
border-color:rgba(176,86,255,.20)!important;
box-shadow:
inset 3px 0 var(--k-emerald),
0 0 24px rgba(119,48,176,.08)!important;
}
.nav-btn.active svg,
.nav-btn.active .icon{
color:var(--k-emerald-bright)!important;
}
/* Hero after entering the site */
.hero{
position:relative;
overflow:hidden;
border-color:rgba(134,54,188,.35)!important;
background:
radial-gradient(circle at 82% 17%,rgba(76,255,174,.11),transparent 19%),
radial-gradient(circle at 75% 28%,rgba(158,70,225,.18),transparent 31%),
linear-gradient(135deg,#0b0911 0%,#090710 54%,#0b0c0b 100%)!important;
box-shadow:
inset 0 0 55px rgba(124,45,183,.055),
0 22px 60px rgba(0,0,0,.30)!important;
}
.hero::after{
content:"✦ ◆ ☾";
position:absolute;
top:28px;
right:34px;
color:rgba(77,255,176,.44);
font-size:clamp(1rem,3vw,1.8rem);
letter-spacing:.34em;
text-shadow:0 0 18px rgba(76,255,174,.18);
}
.hero h1{
color:#eadcc2!important;
text-shadow:0 4px 18px rgba(0,0,0,.62);
}
.hero h1 span{
color:var(--k-purple-bright)!important;
text-shadow:
0 0 20px rgba(176,86,255,.22),
0 0 34px rgba(36,218,130,.08)!important;
}
.kicker,.page-head .kicker{
color:var(--k-emerald-bright)!important;
}
.hero-copy p{
color:#c3b9c7!important;
}
/* Buttons */
.btn.gold{
color:#f5ead8!important;
background:
linear-gradient(180deg,#4a1768 0%,#2b103e 55%,#190a26 100%)!important;
border:1px solid rgba(76,255,174,.48)!important;
box-shadow:
inset 0 0 0 1px rgba(211,169,76,.38),
0 0 24px rgba(128,49,192,.20),
0 0 34px rgba(30,210,124,.07)!important;
}
.btn.gold:hover{
background:
linear-gradient(180deg,#5b1d7e 0%,#321348 60%,#1b0a28 100%)!important;
box-shadow:
inset 0 0 0 1px rgba(224,185,91,.46),
0 0 30px rgba(173,75,244,.24),
0 0 38px rgba(40,226,139,.11)!important;
}
.btn:not(.gold){
color:#dfd3e4!important;
border-color:rgba(138,64,192,.34)!important;
background:rgba(8,7,12,.78)!important;
}
.btn:not(.gold):hover{
border-color:rgba(76,255,174,.42)!important;
background:rgba(23,13,31,.88)!important;
}
/* Panels / cards */
.panel,.card,.stat-card,.metric{
background:
radial-gradient(circle at 90% 5%,rgba(114,45,170,.08),transparent 30%),
linear-gradient(145deg,rgba(12,10,17,.97),rgba(7,8,10,.985))!important;
border-color:rgba(119,53,168,.32)!important;
box-shadow:
inset 0 0 28px rgba(66,212,137,.018),
0 14px 35px rgba(0,0,0,.24)!important;
}
.panel:hover,.card:hover,.stat-card:hover{
border-color:rgba(76,255,174,.28)!important;
}
/* Homepage stat cards */
.stat-card{
position:relative;
overflow:hidden;
}
.stat-card::before{
content:"";
position:absolute;
width:80px;
height:80px;
right:-36px;
top:-36px;
border-radius:50%;
background:radial-gradient(circle,rgba(166,74,236,.18),transparent 70%);
pointer-events:none;
}
.stat-card strong,
.metric strong,
.stat-card .value{
color:#bd72ff!important;
text-shadow:0 0 17px rgba(176,86,255,.14);
}
.stat-card .icon,
.stat-card svg{
color:var(--k-emerald-bright)!important;
filter:drop-shadow(0 0 7px rgba(76,255,174,.15));
}
.stat-card small,
.stat-card .label,
.metric .label{
color:#aaa0ac!important;
}
/* Tables / alliance rosters */
table{
border-color:rgba(108,51,153,.24)!important;
background:#07080a!important;
}
thead{
background:
linear-gradient(90deg,rgba(59,25,80,.42),rgba(8,52,34,.18))!important;
}
th{
color:#b9a9c2!important;
border-color:rgba(90,49,119,.26)!important;
}
td{
color:#d2c9d4!important;
border-color:rgba(80,55,96,.22)!important;
}
tr:hover td{
background:rgba(111,47,164,.08)!important;
}
.roster-row:hover{
background:
linear-gradient(90deg,rgba(105,43,159,.10),rgba(24,144,90,.04))!important;
}
/* Alliance / player profile accents */
.profile-card,.alliance-card{
border-color:rgba(118,50,171,.34)!important;
}
.profile-card h1,.alliance-card h1,
.page-head h1,.section-title,h2,h3{
color:#eadfce!important;
}
.badge,.pill,.chip{
border-color:rgba(79,211,142,.30)!important;
background:rgba(9,38,27,.28)!important;
color:#c9ead8!important;
}
.online,.status-online{
color:var(--k-emerald-bright)!important;
}
/* Search / form controls */
input,select,textarea{
color:#e5dce7!important;
background:#08070c!important;
border-color:rgba(125,57,177,.32)!important;
}
input:focus,select:focus,textarea:focus{
outline:none!important;
border-color:rgba(76,255,174,.54)!important;
box-shadow:0 0 0 3px rgba(30,196,119,.08)!important;
}
input::placeholder,textarea::placeholder{
color:#777080!important;
}
/* Links */
a{
color:#7ce9b2;
}
a:hover{
color:#c493ff;
}
/* Footer */
footer{
border-top:1px solid rgba(118,53,169,.22)!important;
background:
linear-gradient(180deg,rgba(5,5,8,.78),rgba(4,4,7,.96))!important;
color:#8e8792!important;
}
footer strong{
color:#d9cdbd!important;
}
/* Mobile bottom nav */
.bottom-nav{
background:rgba(5,5,9,.96)!important;
border-top:1px solid rgba(130,57,183,.24)!important;
box-shadow:0 -12px 30px rgba(0,0,0,.34)!important;
backdrop-filter:blur(14px);
}
.bottom-nav a,.bottom-nav button{
color:#8f8793!important;
}
.bottom-nav .active,
.bottom-nav a.active,
.bottom-nav button.active{
color:var(--k-emerald-bright)!important;
text-shadow:0 0 12px rgba(76,255,174,.18);
}
/* Menu icon / misc gold -> emerald/purple balance */
.menu-btn{
color:#d8cbdc!important;
}
.menu-btn:hover{
color:var(--k-emerald-bright)!important;
}
hr{
border-color:rgba(118,53,169,.22)!important;
}
/* Subtle animated site fog after entering realm */
@keyframes siteFogDrift{
from{transform:translate3d(-3%,5%,0) scale(1)}
to{transform:translate3d(4%,-4%,0) scale(1.08)}
}
@media(max-width:760px){
.hero::after{top:18px;right:14px;opacity:.7}
.stat-card{
min-height:150px;
}
}
/* ===== MOBILE INTRO COPY SAFE-CENTER FIX =====
Keep the realm wording/button around the visible viewport center so
Safari's dynamic bars cannot push ENTER THE REALM below the screen. */
@media (max-width:760px){
.realm-copy{
top:58%;
bottom:auto!important;
width:94%;
transform:translate(-50%,-50%)!important;
}
.exact-intro.realm-ready .realm-copy{
transform:translate(-50%,-50%)!important;
}
}
@media (max-width:430px){
.realm-copy{top:57%;}
}
/* ===== ENTER THE REALM PRESS FEEDBACK ===== */
.realm-enter-real{
position:relative;
overflow:hidden;
transform:translateZ(0);
transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,border-color .16s ease;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
}
.realm-enter-real::before{
content:"";
position:absolute;
inset:-2px;
border-radius:inherit;
pointer-events:none;
opacity:0;
background:
radial-gradient(circle at 50% 50%,rgba(76,255,174,.26),transparent 42%),
radial-gradient(circle at 50% 50%,rgba(176,86,255,.28),transparent 68%);
transform:scale(.78);
}
.realm-enter-real::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:18px;
height:18px;
border-radius:50%;
pointer-events:none;
opacity:0;
transform:translate(-50%,-50%) scale(.3);
border:2px solid rgba(234,194,126,.86);
box-shadow:0 0 10px rgba(76,255,174,.55),0 0 24px rgba(176,86,255,.42);
}
.realm-enter-real:active,
.realm-enter-real.is-pressed{
transform:scale(.965);
filter:brightness(1.18) saturate(1.08);
border-color:rgba(76,255,174,.88)!important;
box-shadow:
inset 0 0 18px rgba(76,255,174,.14),
0 0 18px rgba(76,255,174,.30),
0 0 34px rgba(176,86,255,.24)!important;
}
.realm-enter-real.is-pressed::before{animation:realmPressGlow .42s ease-out forwards}
.realm-enter-real.is-pressed::after{animation:realmPressRing .48s ease-out forwards}
.realm-enter-real.is-pressed{animation:realmButtonPulse .48s ease-out both}
@keyframes realmButtonPulse{
0%{transform:scale(1)}
28%{transform:scale(.955)}
62%{transform:scale(1.025)}
100%{transform:scale(1)}
}
@keyframes realmPressGlow{
0%{opacity:0;transform:scale(.72)}
45%{opacity:1}
100%{opacity:0;transform:scale(1.16)}
}
@keyframes realmPressRing{
0%{opacity:.95;transform:translate(-50%,-50%) scale(.35)}
100%{opacity:0;transform:translate(-50%,-50%) scale(8)}
}
/* =========================================================
ADMIN SITE BUILDER — MOBILE-SAFE CONTROLS
========================================================= */
.admin-builder{display:grid;gap:18px}
.admin-builder .builder-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.admin-builder .builder-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-builder .save-state{font-size:.86rem;color:#9f95a6;margin-top:4px}
.admin-builder .save-state.ok{color:#65e9a8}
.admin-builder .save-state.error{color:#ff8799}
.builder-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.builder-card{
background:linear-gradient(145deg,rgba(13,10,20,.98),rgba(6,8,10,.99));
border:1px solid rgba(132,62,184,.34);border-radius:18px;padding:18px;min-width:0
}
.builder-card.wide{grid-column:1/-1}
.builder-card h3{margin:0 0 6px}.builder-card>p{margin:0 0 14px;color:#9f96a4}
.builder-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.builder-fields .full{grid-column:1/-1}
.builder-fields label{display:grid;gap:6px;color:#b9afbd;font-size:.82rem}
.builder-fields input,.builder-fields textarea,.builder-fields select{
width:100%;box-sizing:border-box;border-radius:10px;padding:11px 12px;
background:#07070b;color:#eee3ed;border:1px solid rgba(129,58,180,.35);font:inherit
}
.builder-fields textarea{min-height:92px;resize:vertical}
.builder-tabs{
display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px;
position:relative;z-index:12;pointer-events:auto!important
}
.builder-tab{
appearance:none;-webkit-appearance:none;
border:1px solid rgba(123,55,174,.5)!important;
background:linear-gradient(180deg,#15101d,#0a090e)!important;
color:#c8bccd!important;border-radius:999px!important;
padding:10px 15px!important;font:inherit;font-weight:700!important;
line-height:1.1;cursor:pointer;pointer-events:auto!important;
touch-action:manipulation;-webkit-tap-highlight-color:rgba(76,255,174,.15)
}
.builder-tab.active{
color:#f0e5d2!important;border-color:#4cffae!important;
background:linear-gradient(180deg,rgba(74,23,104,.95),rgba(24,13,36,.98))!important;
box-shadow:0 0 18px rgba(76,255,174,.09),inset 0 0 0 1px rgba(176,86,255,.18)
}
.builder-tab:active{transform:scale(.97);filter:brightness(1.15)}
.builder-pane{display:none!important}
.builder-pane.active{display:grid!important;gap:16px}
.sort-list{display:grid;gap:8px;margin-top:10px}
.sort-item{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
background:#08080d;border:1px solid rgba(121,54,170,.30);border-radius:12px;padding:10px
}
.drag-handle{font-size:1.25rem;color:#9a64bc;cursor:grab;user-select:none;padding:5px}
.sort-item .sort-main{display:grid;grid-template-columns:72px minmax(110px,1fr) 70px;gap:8px;min-width:0}
.sort-item .sort-main input{min-width:0;width:100%;box-sizing:border-box;background:#060609;color:#eee;border:1px solid rgba(121,54,170,.3);border-radius:8px;padding:9px}
.sort-controls{display:flex;gap:5px}
.sort-controls button{width:36px;height:36px;border-radius:9px;border:1px solid rgba(96,221,151,.25);background:#0a0c0b;color:#d9d0dc}
.sort-check{display:flex;align-items:center;gap:6px;font-size:.78rem;color:#9c94a0}
.sort-check input{width:18px;height:18px}
.json-editor{min-height:330px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.45}
.admin-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(76,255,174,.35);color:#78f0b2;background:rgba(16,91,58,.16);border-radius:999px;padding:5px 9px;font-size:.72rem}
@media(max-width:760px){
.builder-grid{grid-template-columns:1fr}
.builder-card.wide{grid-column:auto}
.builder-fields{grid-template-columns:1fr}
.builder-fields .full{grid-column:auto}
.builder-tabs{gap:7px}
.builder-tab{font-size:.88rem!important;padding:10px 13px!important}
.sort-item{grid-template-columns:auto minmax(0,1fr)}
.sort-controls{grid-column:2;justify-content:flex-end}
.sort-item .sort-main{grid-template-columns:58px minmax(0,1fr)}
.sort-item .sort-main .nav-visible-wrap{grid-column:1/-1}
}
/* ===== FOOTER: DEAD MAN DISCORD CREDIT ===== */
.site-footer-credit{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.footer-sep{
color:rgba(176,86,255,.55)!important;
}
.deadman-link{
display:inline-flex;
align-items:center;
gap:5px;
color:#b76cff!important;
font-weight:800;
text-decoration:none;
border-bottom:1px solid rgba(76,255,174,.35);
padding:3px 2px;
border-radius:5px;
transition:color .16s ease, text-shadow .16s ease, transform .16s ease, border-color .16s ease;
-webkit-tap-highlight-color:rgba(76,255,174,.12);
}
.deadman-link:active{
transform:scale(.96);
color:#4cffae!important;
border-color:#4cffae;
text-shadow:0 0 12px rgba(76,255,174,.32);
}
@media(hover:hover) and (pointer:fine){
.deadman-link:hover{
color:#4cffae!important;
border-color:#4cffae;
text-shadow:0 0 12px rgba(76,255,174,.26);
}
}
@media(max-width:760px){
.site-footer-credit{
justify-content:flex-start;
row-gap:5px;
}
}
.footer-credit-prefix{
color:#9f96a4;
}
@media(max-width:760px){
.footer-credit-prefix{
flex-basis:auto;
}
}
/* Footer dashboard fields */
.builder-pane[data-builder-pane="footer"] .builder-card{
border-color:rgba(76,255,174,.24);
}
/* Keep the footer credit wording and clickable name together cleanly */
.footer-credit-line{
display:inline-flex;
align-items:baseline;
gap:6px;
flex-wrap:wrap;
min-width:0;
}
.footer-credit-prefix{
display:inline;
}
.deadman-link{
display:inline-flex;
flex:0 0 auto;
white-space:nowrap;
}
@media(max-width:760px){
.site-footer-credit{
display:flex;
align-items:center;
flex-wrap:wrap;
}
.footer-credit-line{
flex-basis:100%;
gap:6px;
line-height:1.35;
margin-top:3px;
}
.deadman-link{
margin-left:0;
}
}
/* =========================================================
ADMIN-CONTROLLED FONT COLORS
========================================================= */
:root{
--site-heading:#f3eadb;
--site-body:#d6cfca;
--site-muted:#9b93a8;
--site-accent:#b66cff;
--site-link:#41f0a6;
--site-button:#fff3dd;
}
body,#content,.panel,.card{color:var(--site-body)}
h1,h2,h3,h4,.page-head h1,.section-title h2,.detail-hero h1,.alliance-card h2{
color:var(--site-heading)!important;
}
p,.body-copy,.profile-data,.admin-item{color:var(--site-body)}
small,.empty,.page-head>p:last-child,.hero-copy>p:not(.kicker),.muted-demo{
color:var(--site-muted)!important;
}
.kicker,.realm-number,.rank-row .tag,.leader-row>span,.back,.accent,.highlight{
color:var(--site-accent)!important;
}
a,.deadman-link{color:var(--site-link)!important}
button,.btn,.nav-btn,.account-btn{color:var(--site-button)}
.btn.gold{color:#120a03}
/* Theme editor */
.theme-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.color-field{display:grid;grid-template-columns:58px minmax(0,1fr);gap:9px;align-items:center}
.color-field input[type="color"]{
width:58px;height:48px;padding:4px;border:1px solid rgba(123,55,174,.45);
border-radius:10px;background:#08080d;cursor:pointer
}
.color-field input[type="text"]{
width:100%;min-width:0;background:#07070b;color:#eee;border:1px solid rgba(123,55,174,.35);
border-radius:10px;padding:11px 12px;font:inherit
}
.color-field input.invalid-color{border-color:#e35e71!important}
.theme-preview{
margin-top:18px;padding:18px;border:1px solid rgba(76,255,174,.22);
border-radius:14px;background:#07080a;display:flex;gap:12px;align-items:center;flex-wrap:wrap
}
.theme-preview h2{margin:0 8px 0 0}
.theme-preview p{margin:0}
.theme-preview a{text-decoration:underline}
@media(max-width:760px){
.theme-color-grid{grid-template-columns:1fr}
}
/* =========================================================
ADMIN THEME: ORANGE + GOLD SITE ACCENTS
These two colors are editable from Admin Dashboard > Theme.
========================================================= */
:root{
--site-orange:#ef7715;
--site-gold:#d6a84b;
}
/* Main orange used across Home/nav/buttons/stats */
.topbrand b,
.hero .kicker,
.hero h1 span,
.stat strong,
.mobile-dock .dock-btn.active,
.hero h1 .realm-number,
.stat-icon{
color:var(--site-orange)!important;
}
.account-btn{
border-color:color-mix(in srgb,var(--site-orange) 46%,transparent)!important;
}
.btn.gold{
background:linear-gradient(180deg,
color-mix(in srgb,var(--site-orange) 78%,white 22%),
var(--site-orange))!important;
border-color:var(--site-orange)!important;
box-shadow:0 0 28px color-mix(in srgb,var(--site-orange) 20%,transparent)!important;
}
.stat:after{
background:linear-gradient(90deg,transparent 45%,color-mix(in srgb,var(--site-orange) 6%,transparent))!important;
}
.stat-icon{
border-color:color-mix(in srgb,var(--site-orange) 34%,transparent)!important;
background:radial-gradient(circle,
color-mix(in srgb,var(--site-orange) 14%,transparent),
rgba(4,5,4,.70) 68%)!important;
box-shadow:inset 0 0 25px color-mix(in srgb,var(--site-orange) 8%,transparent)!important;
}
.mobile-dock{
border-top-color:color-mix(in srgb,var(--site-orange) 30%,transparent)!important;
}
.mobile-dock .dock-btn.active span{
text-shadow:0 0 12px color-mix(in srgb,var(--site-orange) 46%,transparent)!important;
}
/* Secondary gold details */
.kicker,
.realm-number i,
.hero-ornament,
.page-head .kicker,
.rank-row .tag,
.back{
color:var(--site-gold)!important;
}
.hero-ornament:before,
.hero-ornament:after{
background:linear-gradient(90deg,transparent,var(--site-gold))!important;
}
.hero-ornament:after{
background:linear-gradient(90deg,var(--site-gold),transparent)!important;
}
/* Fallback for browsers without color-mix support */
@supports not (color:color-mix(in srgb,red 50%,blue)){
.account-btn{border-color:var(--site-orange)!important}
.btn.gold{box-shadow:0 0 28px rgba(239,119,21,.18)!important}
.stat-icon{border-color:var(--site-orange)!important}
.mobile-dock{border-top-color:var(--site-orange)!important}
}
/* =========================================================
ALLIANCE BRANDING / LEADER CUSTOMIZATION
========================================================= */
.alliance-branded-hero{
position:relative;overflow:hidden;min-height:250px;background-size:cover!important;background-position:center!important;
grid-template-columns:auto minmax(0,1fr) auto;isolation:isolate
}
.alliance-branded-hero:before{
content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(11,7,18,.20),rgba(3,8,8,.34));pointer-events:none
}
.alliance-custom-avatar{
width:104px;height:104px;border-radius:20px;overflow:hidden;display:grid;place-items:center;
background:rgba(4,5,7,.78);border:1px solid color-mix(in srgb,var(--ab-kicker) 58%,transparent);
box-shadow:0 0 28px rgba(0,0,0,.42);font-size:1.4rem
}
.alliance-custom-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.alliance-branded-hero .alliance-rank-label{color:var(--ab-kicker)!important}
.alliance-branded-hero h1{color:var(--ab-name)!important}
.alliance-branded-hero .alliance-leader-line,.alliance-branded-hero .alliance-leader-line b{color:var(--ab-details)!important}
.alliance-branded-hero .detail-numbers span{color:var(--ab-stat-label)!important}
.alliance-branded-hero .detail-numbers strong{color:var(--ab-stat-value)!important}
.alliance-roster-panel .section-title .kicker,.alliance-roster-panel .section-title h2{color:var(--ab-roster)!important}
.alliance-branding-intro{display:grid;gap:6px;padding:14px 16px;margin-bottom:14px;border:1px solid rgba(76,255,174,.22);border-radius:14px;background:rgba(5,10,8,.62)}
.alliance-branding-intro span{color:#c9c1ca}.alliance-branding-intro small{color:#918a96}
.alliance-brand-admin-list{display:grid;gap:16px}
.alliance-brand-card{display:grid;gap:15px}
.alliance-brand-preview{min-height:120px;border-radius:14px;padding:15px;display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#0a0710,#07100c);background-size:cover;background-position:center;border:1px solid rgba(127,60,184,.28);overflow:hidden}
.alliance-brand-preview .alliance-brand-avatar{width:74px;height:74px;flex:0 0 74px;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:#090a0d;border:1px solid rgba(255,255,255,.12);font-weight:800}
.alliance-brand-preview .alliance-brand-avatar img{width:100%;height:100%;object-fit:cover}
.alliance-brand-preview>div:last-child{display:grid;gap:4px;min-width:0}.alliance-brand-preview small{color:var(--ab-kicker)!important;font-weight:800;letter-spacing:.12em}.alliance-brand-preview b{color:var(--ab-name)!important;font-size:1.15rem}.alliance-brand-preview span{color:var(--ab-details)!important}
.alliance-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.alliance-color-grid label{display:grid;gap:6px;color:#aba3af;font-size:.79rem}
.alliance-upload-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:9px;align-items:end}
.alliance-upload-grid label{display:grid;gap:6px;color:#aaa2ad;font-size:.78rem}.alliance-upload-grid input[type=file]{max-width:100%;font-size:.76rem;color:#aaa;background:#07080b;border:1px solid rgba(123,55,174,.28);border-radius:10px;padding:9px}
.alliance-brand-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alliance-leader-manager{display:grid;gap:14px}.alliance-leader-manager>p{color:#9c949f}
.builder-fields select{width:100%;box-sizing:border-box;border-radius:10px;padding:11px 12px;background:#07070b;color:#eee3ed;border:1px solid rgba(129,58,180,.35);font:inherit}
@media(max-width:760px){
.alliance-branded-hero{min-height:310px;grid-template-columns:auto minmax(0,1fr);align-items:start;background-position:center!important}
.alliance-branded-hero .detail-numbers{grid-column:1/-1;width:100%;display:grid;grid-template-columns:1fr 1fr}
.alliance-custom-avatar{width:84px;height:84px;border-radius:17px}
.alliance-color-grid{grid-template-columns:1fr}
.alliance-upload-grid{grid-template-columns:1fr}.alliance-upload-grid .btn{width:100%}
.alliance-brand-preview{align-items:flex-start}.alliance-brand-preview .alliance-brand-avatar{width:64px;height:64px;flex-basis:64px}
}
/* Admin-editable alliance image upload rules */
.alliance-upload-settings-card{margin-bottom:16px;border-color:rgba(76,255,174,.28)!important}
.upload-rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.upload-rule-grid label{display:grid;gap:6px;color:#b9afbd;font-size:.84rem}
.upload-rule-grid input{
width:100%;box-sizing:border-box;background:#07070b;color:#eee;
border:1px solid rgba(123,55,174,.36);border-radius:10px;padding:11px 12px;font:inherit
}
.upload-format-box{margin-top:16px;padding:14px;border:1px solid rgba(123,55,174,.28);border-radius:12px;background:#08080d}
.upload-format-choices{display:flex;gap:10px 16px;flex-wrap:wrap;margin:10px 0}
.upload-format-choice{display:flex!important;align-items:center;gap:7px;color:#ddd!important;font-size:.9rem!important}
.upload-format-choice input{width:19px;height:19px}
.upload-format-box small{display:block;color:#91899a;line-height:1.45}
@media(max-width:760px){
.upload-rule-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
.upload-rule-grid{grid-template-columns:1fr}
}
/* Alliance custom banner must override the site's generic panel background. */
.panel.alliance-branded-hero{
background-size:cover!important;
background-position:center!important;
background-repeat:no-repeat!important;
}
/* Alliance list avatars */
.alliance-list-avatar{overflow:hidden}
.alliance-list-avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* Public alliance hero: remove the large empty area under Power/Members. */
.alliance-branded-hero{
min-height:0!important;
align-items:center!important;
padding-top:20px!important;
padding-bottom:20px!important;
}
.alliance-branded-hero .detail-numbers{align-self:center}
.alliance-custom-avatar{
width:clamp(48px,var(--ab-avatar-size,104px),220px)!important;
height:clamp(48px,var(--ab-avatar-size,104px),220px)!important;
flex:0 0 clamp(48px,var(--ab-avatar-size,104px),220px)!important;
}
.alliance-about-panel{display:grid;gap:8px}
.alliance-about-panel .kicker{margin:0}
.alliance-about-copy{color:var(--ab-details);line-height:1.65;white-space:normal}
.alliance-page-options{margin-top:4px}
.alliance-page-options textarea{
width:100%;box-sizing:border-box;resize:vertical;min-height:130px;
background:#07070b;color:#eee;border:1px solid rgba(123,55,174,.35);
border-radius:10px;padding:11px 12px;font:inherit;line-height:1.45
}
.field-help{display:block;color:#8f8793;font-size:.72rem;margin-top:2px}
@media(max-width:760px){
.alliance-branded-hero{min-height:0!important;align-items:start!important}
.alliance-branded-hero .detail-numbers{margin-top:4px!important}
.alliance-custom-avatar{
width:clamp(48px,var(--ab-avatar-size,104px),220px)!important;
height:clamp(48px,var(--ab-avatar-size,104px),220px)!important;
flex-basis:clamp(48px,var(--ab-avatar-size,104px),220px)!important;
}
}
/* Keep Power + Members directly below the leader line on alliance pages. */
.alliance-branded-hero .alliance-title-copy{
min-width:0;
}
.alliance-branded-hero .alliance-title-copy .detail-numbers{
margin:10px 0 0!important;
width:auto!important;
display:flex!important;
grid-template-columns:none!important;
gap:32px!important;
text-align:left!important;
align-self:auto!important;
}
.alliance-branded-hero .alliance-title-copy .detail-numbers span{
min-width:72px;
}
@media(max-width:760px){
.alliance-branded-hero .alliance-title-copy .detail-numbers{
margin-top:9px!important;
width:auto!important;
display:flex!important;
gap:28px!important;
}
}
/* Global alliance page display controls */
.alliance-display-settings-card{margin:16px 0;border-color:rgba(76,255,174,.28)!important}
.display-setting-note{display:block;margin-top:10px;color:#91899a;line-height:1.45}
/* Compact About Us rows while preserving intentional blank lines. */
.alliance-about-copy{line-height:var(--ab-about-line,1.35)!important}
.alliance-about-copy p{margin:0!important;line-height:inherit!important}
.alliance-about-copy p + p{margin-top:var(--ab-about-gap,12px)!important}
/* Alliance leader/admin customizable About Us text color */
.alliance-about-copy,
.alliance-about-copy p{
color:var(--ab-about,#d6cfca)!important;
}
/* =========================================================
MOBILE SIDEBAR — ALWAYS-AVAILABLE CLOSE BAR
========================================================= */
.close-menu-bar{
margin-top:7px!important;
color:#fff!important;
background:linear-gradient(180deg,#b51f2b,#781019)!important;
border:1px solid rgba(255,90,103,.75)!important;
box-shadow:0 0 16px rgba(190,25,40,.22)!important;
font-weight:800!important;
}
.close-menu-bar:hover,
.close-menu-bar:active{
background:linear-gradient(180deg,#d02a38,#8c111d)!important;
}
/* =========================================================
ALLIANCE DETAIL — MOBILE WIDE-FIT MODE
Keep the whole alliance header/about/roster visible instead of making the
page feel horizontally cropped on phones.
Safari supports CSS zoom, which gives this the same "wide/zoomed-out"
presentation the user gets after manually spreading the page.
========================================================= */
@media(max-width:760px){
/* The BODY is already zoomed to 75% by setAlliancePageMobileFit().
Do not zoom the alliance wrapper a second time: double zoom was
shrinking/cropping forged borders and roster columns on Safari. */
.alliance-wide-fit{
width:100%!important;
max-width:none!important;
zoom:1!important;
padding-left:10px!important;
padding-right:10px!important;
box-sizing:border-box!important;
}
.alliance-wide-fit .alliance-branded-hero{
grid-template-columns:auto minmax(0,1fr)!important;
}
.alliance-wide-fit .alliance-title-copy{
min-width:0!important;
}
.alliance-wide-fit .alliance-title-copy h1{
white-space:normal!important;
overflow-wrap:anywhere!important;
}
.alliance-wide-fit .roster-scroll{
overflow-x:visible!important;
}
}
/* Admin-controlled global About Us text size */
.alliance-about-copy,
.alliance-about-copy p{
font-size:var(--ab-about-font-size,16px)!important;
}
/* Multiple alliance manager / R4 selector */
.alliance-manager-picker{display:grid;gap:8px;padding:12px;border:1px solid rgba(123,55,174,.32);border-radius:12px;background:#08080d}
.alliance-manager-picker>small{color:#91899a;line-height:1.4}
.alliance-manager-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:260px;overflow:auto;padding:4px 2px}
.alliance-manager-option{display:flex!important;align-items:center;gap:9px;min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.025);color:#ddd!important}
.alliance-manager-option input{width:19px;height:19px;flex:0 0 auto}
.alliance-manager-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:600px){.alliance-manager-options{grid-template-columns:1fr}}
/* Discord contact buttons for assigned alliance managers */
.alliance-discord-contacts{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:10px;
align-items:center;
}
.alliance-discord-label{
width:100%;
font-size:.66rem;
letter-spacing:.14em;
color:var(--ab-stat-label,#9b93a8);
font-weight:800;
}
.discord-message-btn{
display:inline-flex;
align-items:center;
gap:6px;
text-decoration:none!important;
color:#f5efff!important;
background:linear-gradient(180deg,rgba(88,101,242,.32),rgba(88,101,242,.18));
border:1px solid rgba(114,126,255,.65);
border-radius:9px;
padding:7px 10px;
font-size:.78rem;
font-weight:750;
line-height:1.15;
box-shadow:0 0 12px rgba(88,101,242,.12);
}
.discord-message-btn:active{transform:scale(.98)}
@media(max-width:760px){
.alliance-discord-contacts{gap:6px;margin-top:8px}
.discord-message-btn{font-size:.72rem;padding:6px 8px}
}
/* Alliance hero alignment + tighter title spacing */
.alliance-branded-hero{
align-items:start!important;
}
.alliance-branded-hero .alliance-custom-avatar{
align-self:start!important;
}
.alliance-branded-hero .alliance-title-copy{
align-self:start!important;
padding-top:0!important;
}
.alliance-branded-hero .alliance-rank-label{
margin:0 0 2px!important;
line-height:1.05!important;
}
.alliance-branded-hero .alliance-title-copy h1{
margin:0 0 4px!important;
line-height:1.02!important;
}
.alliance-branded-hero .alliance-leader-line{
margin:0!important;
line-height:1.15!important;
}
.alliance-branded-hero .alliance-title-copy .detail-numbers{
margin-top:7px!important;
}
/* Short Discord manager button: Discord icon + manager name only */
.alliance-discord-contacts{
margin-top:7px!important;
gap:6px!important;
}
.discord-message-btn{
gap:5px!important;
padding:5px 8px!important;
border-radius:8px!important;
font-size:.72rem!important;
white-space:nowrap;
}
.discord-mark{
width:15px;
height:15px;
flex:0 0 15px;
display:block;
color:#cfd4ff;
}
@media(max-width:760px){
.alliance-branded-hero .alliance-rank-label{margin-bottom:1px!important}
.alliance-branded-hero .alliance-title-copy h1{margin-bottom:3px!important}
.alliance-branded-hero .alliance-title-copy .detail-numbers{margin-top:6px!important}
.discord-message-btn{font-size:.68rem!important;padding:4px 7px!important}
.discord-mark{width:14px;height:14px;flex-basis:14px}
}
/* Enter-Realm-like press feedback for Discord contact buttons */
.discord-message-btn{position:relative;transform-origin:center;transition:transform .14s ease,filter .14s ease,box-shadow .14s ease,border-color .14s ease!important}
.discord-message-btn:active,.discord-message-btn.discord-pressed{
transform:scale(.91)!important;
filter:brightness(1.45)!important;
border-color:#cbd0ff!important;
box-shadow:0 0 0 2px rgba(117,126,255,.32),0 0 20px rgba(88,101,242,.75),inset 0 0 16px rgba(255,255,255,.12)!important;
}
.discord-message-btn.discord-pressed::after{
content:'';position:absolute;inset:-7px;border:2px solid rgba(150,158,255,.62);
border-radius:12px;animation:discordPressRing .5s ease-out forwards;pointer-events:none;
}
@keyframes discordPressRing{0%{opacity:1;transform:scale(.82)}100%{opacity:0;transform:scale(1.18)}}
/* Link an existing Kingdom 1006 account to Discord */
.profile-actions{display:flex;gap:8px;flex-wrap:wrap}
.discord-link-btn{
border:1px solid rgba(114,126,255,.72)!important;
background:linear-gradient(180deg,rgba(88,101,242,.30),rgba(88,101,242,.14))!important;
color:#f4f3ff!important;
transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.discord-link-btn:active,.discord-link-btn.link-pressed{
transform:scale(.94)!important;filter:brightness(1.4);
box-shadow:0 0 0 2px rgba(114,126,255,.24),0 0 22px rgba(88,101,242,.55)!important;
}
.discord-linked-note{margin:10px 0 0;color:#91899a;font-size:.82rem;line-height:1.4}
/* Admin duplicate-account merge tool */
.account-merge-tool{display:grid;gap:14px}
.merge-warning{
padding:11px 13px;border:1px solid rgba(255,78,89,.48);border-radius:10px;
background:rgba(120,15,24,.16);color:#efc7ca;line-height:1.45
}
.merge-grid,.merge-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.merge-grid label,.merge-confirm-label{display:grid;gap:6px;color:#b7aeba}
.merge-grid select,.merge-confirm-label input{
width:100%;box-sizing:border-box;background:#07070b;color:#eee;
border:1px solid rgba(123,55,174,.4);border-radius:10px;padding:11px 12px;font:inherit
}
.merge-preview-grid>div{min-width:0}
.merge-preview-grid h4{margin:0 0 7px;color:#e9dfd4}
.merge-account-summary,.merge-account-empty{
display:grid;gap:5px;padding:12px;border:1px solid rgba(255,255,255,.09);
border-radius:10px;background:rgba(255,255,255,.025);min-height:108px
}
.merge-account-summary span{font-size:.78rem;color:#9b929f;overflow-wrap:anywhere}
.merge-account-empty{place-items:center;color:#777}
.merge-account-btn{justify-self:start}
.merge-account-btn:disabled{opacity:.4;filter:none!important;transform:none!important}
@media(max-width:700px){.merge-grid,.merge-preview-grid{grid-template-columns:1fr}}
/* Linked member About Me */
.member-about-card{
margin-top:12px;padding:13px 14px;border:1px solid rgba(123,55,174,.35);
border-radius:11px;background:rgba(255,255,255,.02)
}
.member-about-card>span,.public-player-about>span{
display:block;margin-bottom:6px;font-size:.68rem;letter-spacing:.16em;font-weight:800;color:#d6a84b
}
.member-about-card p,.public-player-about p{
margin:0;line-height:1.42;color:#d6cfca;overflow-wrap:anywhere
}
.form textarea{
width:100%;box-sizing:border-box;resize:vertical;min-height:120px;background:#07070b;color:#eee;
border:1px solid rgba(123,55,174,.45);border-radius:10px;padding:11px 12px;font:inherit
}
.player-link-note{
padding:10px 12px;border:1px solid rgba(65,240,166,.26);border-radius:9px;
background:rgba(65,240,166,.055);color:#9aa49d;font-size:.79rem;line-height:1.45
}
.public-player-about{
margin-top:11px;max-width:760px;padding:10px 12px;border-left:2px solid rgba(65,240,166,.55);
background:rgba(0,0,0,.18);border-radius:0 8px 8px 0
}
/* Member public profile improvements + customization */
.player-public-profile{
--mp-kicker:#d6a84b;
--mp-name:#f3eadb;
--mp-alliance:#8d978e;
--mp-about-label:#d6a84b;
--mp-about-text:#d6cfca;
--mp-stat-value:#e8ddbf;
}
.player-profile-hero{
align-items:flex-start;
}
.player-profile-copy{
min-width:0;
flex:1 1 0;
overflow:hidden;
}
.player-profile-kicker{
color:var(--mp-kicker)!important;
}
.player-profile-name{
color:var(--mp-name)!important;
font-size:clamp(1.8rem,6vw,3.35rem)!important;
line-height:1.03!important;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
white-space:normal!important;
}
.player-profile-alliance{
color:var(--mp-alliance)!important;
}
.public-player-about{
margin-top:8px!important;
padding:0!important;
border-left:0!important;
background:transparent!important;
}
.public-player-about>span{
display:inline!important;
margin:0!important;
color:var(--mp-about-label)!important;
font-weight:900!important;
letter-spacing:.06em!important;
font-size:.82rem!important;
}
.public-player-about p{
display:inline!important;
margin:0 0 0 5px!important;
color:var(--mp-about-text)!important;
line-height:1.35!important;
}
.player-public-profile .player-stats strong{
color:var(--mp-stat-value)!important;
}
/* Member Portal About Me styling */
.member-about-card>span{
font-weight:900!important;
}
.member-about-card p{
margin-top:2px!important;
}
/* Profile color editor */
.member-profile-color-editor{
display:grid;
gap:10px;
padding:14px;
border:1px solid rgba(123,55,174,.38);
border-radius:12px;
background:rgba(255,255,255,.02);
}
.member-profile-color-editor h3{
margin:0;
font-size:.9rem;
letter-spacing:.12em;
}
.member-profile-color-editor>p{
margin:0;
color:#91899a;
font-size:.8rem;
}
.profile-color-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.profile-color-grid label{
display:grid;
gap:5px;
}
.profile-color-grid input[type="color"]{
width:100%;
min-height:44px;
padding:3px;
border:1px solid rgba(123,55,174,.45);
border-radius:9px;
background:#08080d;
}
@media(max-width:600px){
.profile-color-grid{grid-template-columns:1fr 1fr}
.player-profile-name{font-size:clamp(1.65rem,7vw,2.55rem)!important}
}
/* Ensure View Profile action is prominent but compact */
#viewLinkedProfile{
display:inline-flex;
align-items:center;
justify-content:center;
}
/* Fix member Player Name custom color specificity.
The global .detail-hero h1 theme rule is more specific than .player-profile-name,
so target the public-profile H1 with greater specificity. */
.player-public-profile .player-profile-hero h1.player-profile-name{
color:var(--mp-name)!important;
}
/* =========================================================
INTRO SETTINGS LABEL CLARITY + SMOKY SUMMON OVERRIDES
Added after the safe combined build so we don't disturb older fixes.
========================================================= */
/* Give the summon wrappers filter support for the smoky reveal. */
.summon-slot{
will-change:transform,opacity,filter!important;
filter:blur(18px) brightness(.52) saturate(.72) drop-shadow(0 22px 26px rgba(0,0,0,.62));
}
/* Text layer starts slightly lower/blurred so it can smoke in cleanly. */
.realm-copy{
opacity:0;
transform:translateX(-50%) translateY(24px) scale(.97);
filter:blur(14px);
}
.realm-copy::before,
.realm-copy::after{
content:"";
position:absolute;
left:50%;
pointer-events:none;
opacity:0;
filter:blur(18px);
mix-blend-mode:screen;
}
.realm-copy::before{
width:min(82vw,560px);
height:110px;
bottom:72px;
transform:translateX(-50%);
background:
radial-gradient(ellipse at 50% 55%,rgba(182,108,255,.24),transparent 52%),
radial-gradient(ellipse at 35% 60%,rgba(76,255,174,.12),transparent 46%),
radial-gradient(ellipse at 70% 45%,rgba(255,255,255,.08),transparent 34%);
}
.realm-copy::after{
width:min(70vw,430px);
height:86px;
bottom:132px;
transform:translateX(-50%) scale(.9);
background:
radial-gradient(ellipse at 50% 50%,rgba(229,193,126,.18),transparent 48%),
radial-gradient(ellipse at 55% 58%,rgba(176,86,255,.14),transparent 52%);
}
/* Make each part of the writing stagger very slightly for a nicer reveal. */
.realm-kicker,
.realm-title,
.realm-tagline,
.realm-enter-real{
opacity:0;
transform:translateY(10px);
filter:blur(10px);
}
.exact-intro.realm-ready .realm-kicker{animation:realmTextPieceSmoke .52s .04s ease forwards}
.exact-intro.realm-ready .realm-title{animation:realmTextPieceSmoke .68s .10s ease forwards}
.exact-intro.realm-ready .realm-tagline{animation:realmTextPieceSmoke .62s .18s ease forwards}
.exact-intro.realm-ready .realm-enter-real{animation:realmTextPieceSmoke .72s .28s ease forwards}
@keyframes reaperSlotRiseSmoke{
0%{opacity:0;transform:translate(-50%,28%) scale(.76);filter:blur(22px) brightness(.38) saturate(.62) drop-shadow(0 18px 24px rgba(0,0,0,.55))}
30%{opacity:.40;filter:blur(16px) brightness(.55) saturate(.74) drop-shadow(0 20px 26px rgba(0,0,0,.60))}
68%{opacity:1;filter:blur(7px) brightness(.84) saturate(.92) drop-shadow(0 24px 30px rgba(0,0,0,.70))}
100%{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0) brightness(1) saturate(1) drop-shadow(0 28px 34px rgba(0,0,0,.78))}
}
@keyframes eagleSlotRiseSmoke{
0%{opacity:0;transform:translate(-10%,72%) rotate(-8deg) scale(.68);filter:blur(18px) brightness(.44) saturate(.68) drop-shadow(0 18px 24px rgba(0,0,0,.55))}
34%{opacity:.45;filter:blur(13px) brightness(.62) saturate(.76)}
72%{opacity:1;filter:blur(6px) brightness(.88) saturate(.95)}
100%{opacity:1;transform:translate(0,0) rotate(-1deg) scale(1);filter:blur(0) brightness(1) saturate(1) drop-shadow(0 25px 31px rgba(0,0,0,.76))}
}
@keyframes mammothSlotRiseSmoke{
0%{opacity:0;transform:translate(10%,74%) scale(.68);filter:blur(18px) brightness(.42) saturate(.66) drop-shadow(0 18px 24px rgba(0,0,0,.55))}
36%{opacity:.46;filter:blur(13px) brightness(.60) saturate(.76)}
74%{opacity:1;filter:blur(6px) brightness(.88) saturate(.95)}
100%{opacity:1;transform:translate(0,0) scale(1);filter:blur(0) brightness(1) saturate(1) drop-shadow(0 25px 31px rgba(0,0,0,.76))}
}
@keyframes realmCopySmokeIn{
0%{opacity:0;transform:translateX(-50%) translateY(24px) scale(.97);filter:blur(16px)}
45%{opacity:.82;transform:translateX(-50%) translateY(10px) scale(.985);filter:blur(8px)}
100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0)}
}
@keyframes realmTextPieceSmoke{
0%{opacity:0;transform:translateY(12px);filter:blur(12px)}
55%{opacity:.86;transform:translateY(4px);filter:blur(5px)}
100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes realmCopySmokeDriftA{
0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.88)}
28%{opacity:.42}
100%{opacity:0;transform:translateX(-50%) translateY(-38px) scale(1.16)}
}
@keyframes realmCopySmokeDriftB{
0%{opacity:0;transform:translateX(-50%) translateY(12px) scale(.82)}
30%{opacity:.32}
100%{opacity:0;transform:translateX(-50%) translateY(-52px) scale(1.22)}
}
.exact-intro.realm-ready .realm-copy::before{animation:realmCopySmokeDriftA 1.8s ease-out forwards}
.exact-intro.realm-ready .realm-copy::after{animation:realmCopySmokeDriftB 2.2s .08s ease-out forwards}
/* =========================================================
SELECTABLE TRANSPARENT MYTHICAL SMOKE OVERLAY
Admin > Intro: Off / Wide Ground Haze / Mystical Wisps
========================================================= */
.intro-smoke-overlay{
position:absolute;
z-index:22;
left:50%;
bottom:-2%;
width:120%;
height:auto;
max-width:none;
pointer-events:none;
opacity:0;
transform:translateX(-50%) scale(1.03);
transform-origin:50% 100%;
mix-blend-mode:screen;
filter:url(#introSmokeTint) brightness(.92) blur(.35px);
-webkit-filter:url(#introSmokeTint) brightness(.92) blur(.35px);
transition:opacity .45s ease;
animation:introSmokeBreathe 7s ease-in-out infinite alternate;
}
.exact-intro.smoke-wide .intro-smoke-overlay{opacity:.78;}
.exact-intro.smoke-wide .intro-smoke-overlay{
bottom:-4%;
width:128%;
filter:url(#introSmokeTint) brightness(.90) blur(.55px);
-webkit-filter:url(#introSmokeTint) brightness(.90) blur(.55px);
}
.exact-intro.smoke-wisps .intro-smoke-overlay{opacity:.70;}
.exact-intro.smoke-wisps .intro-smoke-overlay{
bottom:-7%;
width:112%;
filter:url(#introSmokeTint) brightness(.96) blur(.25px);
-webkit-filter:url(#introSmokeTint) brightness(.96) blur(.25px);
}
.exact-intro.smoke-off .intro-smoke-overlay{display:none!important}
@media(max-width:760px){
.exact-intro.smoke-wide .intro-smoke-overlay{width:175%;bottom:-1%}
.exact-intro.smoke-wisps .intro-smoke-overlay{width:150%;bottom:-1%}
}
@media(prefers-reduced-motion:reduce){
.intro-smoke-overlay{display:none!important}
}
@keyframes introSmokeBreathe{
0%{transform:translateX(-50%) translateY(1%) scale(1.02);}
50%{transform:translateX(-51%) translateY(-2%) scale(1.08);}
100%{transform:translateX(-49%) translateY(-5%) scale(1.12);}
}
/* =========================================================
IOS-SAFE CANVAS MYTHICAL SMOKE
Replaces SVG-filtered GIF smoke that Safari could hide.
Smoke is visible from frame one, above the closed curtains,
below the realm copy/button, and remains for the full intro.
========================================================= */
.intro-smoke-overlay{display:none!important}
.intro-smoke-canvas{
position:absolute;
inset:0;
z-index:22;
width:100%;
height:100%;
pointer-events:none;
display:block;
opacity:1;
mix-blend-mode:screen;
}
.exact-intro.smoke-off .intro-smoke-canvas{display:none!important}
.exact-intro.smoke-wide .intro-smoke-canvas{opacity:1}
.exact-intro.smoke-wisps .intro-smoke-canvas{opacity:.96}
/* =========================================================
TRUE OVERLAY FOG LAYER
Put smoke above curtains and characters, but below the text/button.
========================================================= */
.intro-smoke-canvas{
z-index:34!important;
opacity:.94;
}
.realm-copy{
z-index:40!important;
}
.exact-intro.smoke-wide .intro-smoke-canvas{opacity:.90!important}
.exact-intro.smoke-wisps .intro-smoke-canvas{opacity:.96!important}
/* =========================================================
REAL VIDEO SMOKE OVERLAY — USER-SUPPLIED ANIMATION
Black background disappears with screen blending.
Layer is above curtains + summoned characters and below realm copy.
========================================================= */
.intro-smoke-canvas{display:none!important}
.intro-smoke-video{
position:absolute;
z-index:34!important;
left:50%;
bottom:-3%;
width:190%;
height:58%;
max-width:none;
object-fit:cover;
object-position:center center;
transform:translateX(-50%);
pointer-events:none;
opacity:.82;
mix-blend-mode:screen;
filter:hue-rotate(var(--smoke-hue-shift,95deg)) saturate(1.35) brightness(1.14) contrast(1.06);
}
.exact-intro.smoke-off .intro-smoke-video{display:none!important}
.exact-intro.smoke-wide .intro-smoke-video{display:block!important}
.realm-copy{z-index:40!important}
@media(max-width:760px){
.intro-smoke-video{
width:215%;
height:54%;
bottom:-2%;
opacity:.86;
}
}
/* ===== REAL SMOKE FULL-HEIGHT FIX =====
Keep the real smoke video spanning the entire intro so it does not
begin/cut off around the KINGDOM 1006 title on tall mobile screens. */
.intro-smoke-video{
inset:0!important;
left:0!important;
bottom:auto!important;
width:100%!important;
height:100%!important;
transform:none!important;
object-fit:cover!important;
object-position:center center!important;
}
@media(max-width:760px){
.intro-smoke-video{
inset:0!important;
left:0!important;
bottom:auto!important;
width:100%!important;
height:100%!important;
transform:none!important;
object-fit:cover!important;
object-position:center center!important;
opacity:.86;
}
}
/* ===== FOUR REAL SMOKE CLIPS + RANDOM SELECTOR =====
Video source switching and per-clip color calibration live in intro.js. */
/* ===== iOS FOUR-PERSISTENT-VIDEO SMOKE FIX =====
Safari can keep the first decoded video when JS swaps a