:root{
  --navy:#020817;--navy2:#071a36;--blue:#0b3770;--gold:#ffc943;--gold2:#9a5b05;
  --line:rgba(255,202,67,.72);--cyan:#21adff;--text:#fff3cb;
  font-family:"Trebuchet MS",Arial,sans-serif;color-scheme:dark
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#01050d;color:var(--text)}
button{font:inherit;color:inherit;border:0;cursor:pointer}button:focus-visible{outline:2px solid #8ed8ff;outline-offset:3px}
.app-shell{position:relative;width:100vw;height:100dvh;min-height:600px;overflow:hidden;isolation:isolate;background:
 radial-gradient(circle at 50% 33%,rgba(16,93,172,.22),transparent 32%),
 linear-gradient(180deg,#061630 0%,#031027 38%,#020916 100%)}
.app-shell:before{content:"";position:absolute;inset:0;z-index:-4;background:url('./assets/hero/xocdia79-hero.png') center 35%/cover no-repeat;opacity:.11;filter:saturate(.8)}
.app-shell:after{content:"";position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(0,5,15,.82),transparent 19% 81%,rgba(0,5,15,.82)),linear-gradient(180deg,rgba(0,4,13,.18),rgba(0,5,14,.72))}
.ambient{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.beam{position:absolute;width:2px;height:65%;top:-15%;background:linear-gradient(transparent,#1d8cff,transparent);box-shadow:0 0 25px #1188ff;transform-origin:top;opacity:.34}.beam-a{left:20%;transform:rotate(27deg)}.beam-b{right:21%;transform:rotate(-28deg)}
.orb{position:absolute;width:32vw;height:32vw;border-radius:50%;filter:blur(80px);opacity:.1}.orb-a{left:-12vw;top:20%;background:#086cff}.orb-b{right:-12vw;top:12%;background:#e3a52e}.sparkles{position:absolute;inset:0;background-image:radial-gradient(#d4ecff 1px,transparent 1px);background-size:83px 83px;opacity:.1;animation:drift 18s linear infinite}
@keyframes drift{to{transform:translate3d(42px,83px,0)}}

.masthead{position:relative;height:18%;min-height:105px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid rgba(255,198,53,.42);background:linear-gradient(180deg,rgba(3,14,33,.96),rgba(3,13,31,.78));box-shadow:0 9px 35px rgba(0,0,0,.5)}
.brand{position:absolute;left:50%;top:-16%;transform:translateX(-50%);width:min(300px,25vw);height:142%;background:none;filter:drop-shadow(0 11px 10px rgba(0,0,0,.85));transition:.25s}.brand:hover{transform:translateX(-50%) scale(1.025);filter:drop-shadow(0 0 13px rgba(255,192,50,.38))}.brand img{width:100%;height:100%;object-fit:contain}
.marquee{position:absolute;right:3.5%;top:25%;width:29%;min-width:370px;height:58px;padding:0 22px 0 66px;border:1px solid #d99b25;border-radius:16px 34px 34px 16px;background:linear-gradient(180deg,#123763 0%,#071a38 45%,#020a18 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.17),inset 0 -8px 13px rgba(0,0,0,.5),0 5px 13px rgba(0,0,0,.48),0 0 16px rgba(255,190,43,.12);overflow:hidden}.marquee:before,.marquee:after{content:"";position:absolute;top:0;width:35px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,211,98,.12),transparent)}.marquee:before{left:24%;transform:skewX(-20deg)}.marquee:after{right:4%;transform:skewX(-20deg)}
.sound-disc{position:absolute;left:12px;top:7px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #f2ba3d;background:radial-gradient(circle at 35% 30%,#2a6ca5,#07172f 68%);box-shadow:inset 0 0 0 4px rgba(0,0,0,.32),0 0 11px rgba(255,193,54,.35)}
.marquee-window{display:flex;align-items:center;gap:28px;white-space:nowrap;font-family:Georgia,serif;letter-spacing:1px}.marquee-window b{font-size:15px;text-shadow:0 2px 4px #000}.marquee-window i{color:#52e2ff}.marquee-window em{font-style:normal;color:#d4eaff;font-size:12px;animation:ticker 13s linear infinite}
@keyframes ticker{0%,18%{opacity:0;transform:translateX(25px)}28%,82%{opacity:1;transform:translateX(0)}92%,100%{opacity:0;transform:translateX(-25px)}}

.category-nav{height:11%;min-height:72px;display:grid;grid-template-columns:repeat(6,1fr);gap:2.1%;align-items:center;padding:0 5.2%;background:linear-gradient(180deg,rgba(2,10,23,.78),rgba(3,15,31,.92));border-bottom:1px solid rgba(255,195,53,.32)}
.category{position:relative;height:52px;padding:0 24px;display:flex;justify-content:center;align-items:center;gap:12px;font-weight:900;letter-spacing:.8px;color:#fff0bf;background:transparent;isolation:isolate;text-shadow:0 2px 3px #000;transition:transform .18s,filter .18s}
.category:before,.category:after{content:"";position:absolute;inset:0;z-index:-2;clip-path:polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);background:linear-gradient(180deg,#fff1a5 0%,#c98a20 8%,#72501c 13%,#f0bb43 22%,#5c3c0c 46%,#ffd35b 55%,#754709 88%,#efbc42 100%);filter:drop-shadow(0 7px 7px rgba(0,0,0,.7))}.category:after{inset:3px;z-index:-1;background:linear-gradient(180deg,#274d7e 0%,#102b52 23%,#06152d 58%,#020814 100%);box-shadow:inset 0 5px 8px rgba(255,255,255,.1)}
.category:hover{transform:translateY(-2px);filter:brightness(1.2)}.category:active{transform:translateY(2px) scale(.99)}.category.active{color:#1b1000;text-shadow:0 1px rgba(255,255,255,.45);filter:drop-shadow(0 0 12px rgba(255,191,39,.7))}.category.active:after{background:linear-gradient(180deg,#fff8bd,#ffc933 40%,#b96a06 100%)}.category .icon{font-size:20px;color:#ffd35b}.category.active .icon{color:#412600}

.lobby-floor{position:relative;height:58%;min-height:335px;padding:1.45% 4.4% 1.1%;display:grid;grid-template-columns:minmax(155px,16.5%) 1fr;gap:14px;border-bottom:1px solid rgba(255,198,49,.55)}
.featured-card{position:relative;min-width:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #eeb747;border-radius:24px;background:radial-gradient(circle at 50% 38%,#173e69,#07182f 53%,#020916);box-shadow:inset 0 0 0 4px #38250c,inset 0 0 0 6px #dba538,inset 0 0 40px rgba(35,122,218,.16),0 14px 30px rgba(0,0,0,.64)}
.featured-card:after{content:"";position:absolute;inset:-30% auto -30% -70%;width:38%;transform:rotate(16deg);background:linear-gradient(90deg,transparent,rgba(255,235,168,.18),transparent);animation:sweep 5.7s ease-in-out infinite}.featured-card img{width:62%;height:auto;filter:drop-shadow(0 8px 10px #000);margin-bottom:4%}.shield{width:76px;height:76px;display:grid;place-items:center;border-radius:19px;border:2px solid #65d4ff;background:linear-gradient(145deg,#1c83c1,#0c386f);box-shadow:inset 0 4px 8px rgba(255,255,255,.22),0 0 17px rgba(36,186,255,.43),0 8px 14px rgba(0,0,0,.5)}.shield span{font-weight:900;color:white}.featured-card small{margin-top:7%;font-size:10px;letter-spacing:2px;color:#a9dcff}.featured-card strong{font:700 clamp(18px,1.25vw,26px)/1.3 Georgia,serif;color:#ffe99f;text-shadow:0 2px 4px #000}.featured-card p{margin:2px 0 0;font-size:9px;font-weight:800}.pager{position:absolute;bottom:18px;display:flex;gap:6px}.pager i{width:7px;height:7px;border:1px solid #ffdc7a;border-radius:50%}.pager i.active{width:25px;border-radius:9px;background:#ffd54d;box-shadow:0 0 9px #ffd54d}.corner{position:absolute;width:40px;height:40px;border-color:#fff0a5}.corner.tl{left:8px;top:8px;border-left:5px solid;border-top:5px solid;border-radius:14px 0 0}.corner.tr{right:8px;top:8px;border-right:5px solid;border-top:5px solid;border-radius:0 14px 0 0}.corner.bl{left:8px;bottom:8px;border-left:5px solid;border-bottom:5px solid;border-radius:0 0 0 14px}.corner.br{right:8px;bottom:8px;border-right:5px solid;border-bottom:5px solid;border-radius:0 0 14px}
.game-viewport{min-width:0;overflow:hidden;padding:2px 4px 10px}.game-rail{height:100%;display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 1px}.game-rail::-webkit-scrollbar{display:none}
.game-card{position:relative;flex:0 0 clamp(205px,18.1vw,330px);height:100%;min-height:315px;border-radius:19px;padding:6px;scroll-snap-align:start;background:linear-gradient(135deg,#fff0a7 0%,#a2640d 15%,#ffdb71 31%,#573300 47%,#ffd870 72%,#8d5107 100%);box-shadow:0 14px 25px rgba(0,0,0,.62),0 0 0 2px rgba(255,215,112,.38);transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s;isolation:isolate;overflow:hidden}
.game-card:before{content:"";position:absolute;inset:6px;border-radius:14px;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 2px rgba(255,226,132,.78),inset 0 0 0 5px rgba(16,9,2,.72),inset 0 0 22px rgba(255,188,42,.17)}.game-card:after{content:"";position:absolute;z-index:3;top:-40%;bottom:-40%;left:-75%;width:32%;transform:rotate(15deg);background:linear-gradient(90deg,transparent,rgba(255,244,193,.34),transparent);animation:sweep 7s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
@keyframes sweep{0%,60%{left:-75%}82%,100%{left:145%}}.game-card:hover{transform:translateY(-8px) scale(1.018);filter:brightness(1.12);z-index:8}.game-card button.card-open{position:relative;width:100%;height:100%;padding:0;border-radius:14px;overflow:hidden;background:#020813}.card-open img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top;transition:transform .65s}.game-card:hover img{transform:scale(1.045)}
.card-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(0,4,12,.1) 56%,rgba(0,5,17,.98) 90%);pointer-events:none}.badge{position:absolute;left:10px;top:10px;z-index:5;padding:7px 12px;border:1px solid #ffd16c;border-radius:7px;background:linear-gradient(#53100c,#c22516 48%,#5b0808);font-size:10px;font-weight:900;box-shadow:inset 0 2px rgba(255,255,255,.2),0 4px 8px #000}.badge.live{background:linear-gradient(#0d6a31,#169346 48%,#06451e)}.badge.new{background:linear-gradient(#1159ae,#1486dd 48%,#073b79)}.badge i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#ffe86f;box-shadow:0 0 7px currentColor}
.favorite{position:absolute;right:11px;top:11px;z-index:6;width:40px;height:40px;border:1px solid #f9d26b;border-radius:50%;display:grid;place-items:center;font-size:23px;background:radial-gradient(circle at 35% 25%,#257ac1,#08305c 70%);box-shadow:inset 0 2px rgba(255,255,255,.25),0 4px 7px #000}.favorite.active{color:#ffe272;filter:drop-shadow(0 0 7px #ffc43d)}.card-meta{position:absolute;left:12px;right:12px;bottom:13px;z-index:5;text-align:center}.card-meta b{display:block;font:900 clamp(21px,1.75vw,34px)/1.05 Georgia,serif;letter-spacing:.5px;color:#ffe8a0;text-shadow:0 2px #4c2900,0 4px 7px #000}.card-meta small{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px;font-size:9px;color:#dceeff}.card-meta small i{width:7px;height:7px;border-radius:50%;background:#34f18a;box-shadow:0 0 8px #24ff82}.play-cue{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-45%) scale(.75);opacity:0;width:90px;height:90px;border-radius:50%;display:grid;place-items:center;background:rgba(1,13,30,.76);border:2px solid #ffd467;color:#ffd467;font-size:35px;box-shadow:0 0 28px rgba(255,200,52,.7),inset 0 0 18px rgba(40,145,255,.3);transition:.25s}.game-card:hover .play-cue{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rail-arrow{position:absolute;z-index:15;top:47%;transform:translateY(-50%);width:52px;height:70px;border:1px solid #e4ad32;background:linear-gradient(180deg,#234d7d,#07172f 55%,#020812);font:700 49px/1 Georgia,serif;color:#ffd45b;text-shadow:0 3px 4px #000;box-shadow:inset 0 3px rgba(255,255,255,.15),0 0 14px rgba(255,196,50,.4),0 8px 14px #000}.rail-arrow:hover{filter:brightness(1.3)}.rail-arrow:active{transform:translateY(-47%) scale(.96)}.rail-arrow.prev{left:calc(4.4% + max(155px,16.5%) + 17px);border-radius:0 24px 24px 0}.rail-arrow.next{right:2.2%;border-radius:24px 0 0 24px}
.status-pill{position:absolute;left:50%;bottom:12.6%;z-index:16;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 18px;border:1px solid #2879ba;border-radius:20px;background:rgba(2,14,31,.9);box-shadow:0 5px 12px #000;color:#d7ebff;font-size:10px}.status-pill i{width:8px;height:8px;border-radius:50%;background:#29ef85;box-shadow:0 0 9px #29ef85}

.bottom-dock{height:13%;min-height:86px;display:grid;grid-template-columns:24% 31% 1fr;gap:14px;padding:8px 4.2% 11px;background:linear-gradient(180deg,#0b2f5c 0%,#04142d 16%,#020814 100%);border-top:2px solid #d99c2b;box-shadow:0 -12px 28px rgba(0,0,0,.55)}
.dock-depth{position:relative;overflow:hidden;border:1px solid #e9b944;background:linear-gradient(180deg,#234d7b 0%,#0d2a51 41%,#05142b 42%,#020917 100%);box-shadow:inset 0 4px 6px rgba(255,255,255,.17),inset 0 -8px 12px rgba(0,0,0,.5),0 7px 12px rgba(0,0,0,.58),0 0 0 2px rgba(11,76,133,.55);transition:.18s}.dock-depth:after{content:"";position:absolute;left:10%;right:10%;top:0;height:36%;background:linear-gradient(rgba(255,255,255,.13),transparent);border-radius:50%}.dock-depth:hover{filter:brightness(1.2);transform:translateY(-2px)}.dock-depth:active{transform:translateY(3px);box-shadow:inset 0 6px 12px rgba(0,0,0,.65),0 2px 4px #000}.account{display:flex;align-items:center;gap:14px;padding:6px 20px;border-radius:28px 8px 8px 28px;background:linear-gradient(180deg,#277fc1,#0d4f8a 39%,#05264e 42%,#020b1d)}.avatar{flex:0 0 65px;height:65px;border:3px solid #ffd14f;border-radius:50%;display:grid;place-items:center;font-size:37px;background:radial-gradient(circle at 38% 28%,#2e85c7,#073260 67%);box-shadow:inset 0 0 0 5px rgba(0,0,0,.3),0 0 12px rgba(255,204,65,.35)}.account b,.account small{display:block;text-align:left}.account b{font:700 clamp(18px,1.4vw,27px) Georgia,serif}.account small{margin-top:4px;color:#ffdb58;font-size:14px;font-weight:900}.exchange{border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(180deg,#fff7bd 0%,#ffd454 31%,#b76b08 63%,#6f3500 100%);color:#3b2100;text-shadow:0 1px rgba(255,255,255,.5);box-shadow:inset 0 5px 7px rgba(255,255,255,.58),inset 0 -10px 14px rgba(77,31,0,.55),0 7px 13px #000,0 0 0 3px #ffe17a,0 0 18px rgba(255,197,43,.5)}.exchange span{font-size:24px}.exchange b{font:900 clamp(28px,2.5vw,49px) Georgia,serif;letter-spacing:1px}.dock-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.dock-actions button{border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.dock-actions span{font-size:28px;color:#ffd25d}.dock-actions small{font-weight:900;font-size:11px}

.modal-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:rgba(0,4,13,.82);backdrop-filter:blur(6px)}.modal-backdrop[hidden]{display:none}.modal-panel{position:relative;width:min(520px,88vw);padding:36px;text-align:center;border:2px solid #e8b448;border-radius:25px;background:radial-gradient(circle at 50% 0,#153c6b,#06162f 48%,#020817);box-shadow:inset 0 0 0 5px #171006,inset 0 0 0 7px #a96a10,0 20px 80px #000,0 0 35px rgba(35,135,255,.3);animation:pop .22s ease-out}.modal-panel img{width:180px}.modal-panel small{display:block;color:#6fcaff;letter-spacing:2px}.modal-panel h2{font:900 31px Georgia,serif;color:#ffdd7d}.modal-panel p{color:#d7e8ff}.modal-close{position:absolute;right:15px;top:13px;width:42px;height:42px;border:1px solid #ffc84f;border-radius:50%;background:linear-gradient(#153b68,#020918);font-size:27px}.gold-button{min-width:210px;padding:14px 25px;border:1px solid #ffefab;border-radius:12px;background:linear-gradient(#fff0a1,#e89a17 52%,#8b4800);color:#241300;font-weight:900;box-shadow:inset 0 3px rgba(255,255,255,.4),0 6px 10px #000}.gold-button:active{transform:translateY(3px)}@keyframes pop{from{transform:scale(.9);opacity:0}}

@media(max-width:1100px){.marquee{min-width:310px;width:34%}.marquee em,.marquee i{display:none}.lobby-floor{grid-template-columns:150px 1fr}.game-card{flex-basis:250px}.category-nav{gap:1%;padding-inline:2%}.category{font-size:13px}.bottom-dock{grid-template-columns:27% 29% 1fr;padding-inline:2%}.account{padding-left:9px}.avatar{width:55px;height:55px;flex-basis:55px}}
@media(max-width:760px){html,body{overflow:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible;padding-bottom:78px}.masthead{height:110px}.brand{left:27%;width:210px}.marquee{right:10px;top:25px;width:47%;min-width:0;height:52px;padding-left:51px}.sound-disc{width:36px;height:36px}.marquee-window b{font-size:10px}.category-nav{height:auto;min-height:58px;padding:7px 10px;display:flex;overflow-x:auto;gap:8px;scrollbar-width:none}.category{flex:0 0 132px;height:44px;font-size:11px}.lobby-floor{height:auto;min-height:520px;display:block;padding:12px 10px 16px}.featured-card{display:none}.game-viewport{height:510px;padding-inline:25px}.game-card{flex-basis:78vw;max-width:310px;height:500px}.rail-arrow{top:48%;width:40px;height:62px}.rail-arrow.prev{left:0}.rail-arrow.next{right:0}.status-pill{position:relative;bottom:auto;margin:-14px auto 8px;width:max-content}.bottom-dock{position:fixed;z-index:40;left:0;right:0;bottom:0;height:76px;min-height:76px;grid-template-columns:1fr 1.35fr 2.7fr;padding:6px;gap:6px}.account{padding:4px}.avatar{height:45px;flex-basis:45px;font-size:25px}.account b{font-size:10px}.account small{font-size:8px}.exchange b{font-size:18px}.exchange span{font-size:14px}.dock-actions{gap:4px}.dock-actions button{border-radius:7px}.dock-actions span{font-size:20px}.dock-actions small{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}