
:root{color-scheme:dark;--bg:#10121b;--panel:#191c29;--line:#2a2d3c;--text:#f5f4fc;--muted:#9598ae;--purple:#a58aff;--green:#85dbb0;font-family:Inter,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{border:0}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid var(--purple);outline-offset:4px}[hidden]{display:none!important}.brand{display:flex;align-items:center;gap:10px;font-size:27px;font-weight:800;letter-spacing:-1.3px}.brand-icon{position:relative;display:grid;place-items:center;background:#a98aff;width:34px;height:35px;border-radius:11px;color:#151321;font-size:31px;line-height:1}.brand-icon span{position:absolute;color:white;font-size:17px;left:13px;top:7px}.brand-dot{color:#a98aff;font-size:9px;align-self:flex-start;margin:7px 0 0 -4px}.sidebar{width:242px;background:#151722;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:34px 22px;display:flex;flex-direction:column;z-index:10}.sidebar .brand{margin:0 8px 48px}.nav-label{font-size:10px;letter-spacing:1.7px;color:#6c7088;margin:0 14px 14px;font-weight:700}.nav-item{width:100%;text-align:left;display:flex;align-items:center;gap:14px;background:transparent;color:#a0a3b9;border-radius:9px;padding:13px 15px;margin:3px 0;font-size:13px;font-weight:600}.nav-item span{font-size:20px;width:20px;text-align:center}.nav-item:hover{background:#222333;color:white}.nav-item.active{background:#a58aff1a;color:#b29aff}.sidebar nav{margin-bottom:29px}.sidebar-bottom{margin-top:auto}.class-card{display:flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:14px 10px;margin:25px 0 16px}.class-card b{font-size:10px}.class-card small{font-size:9px;display:block;color:var(--muted);margin-top:6px}.class-icon{color:var(--purple);font-size:28px}.main-wrap{margin-left:242px}.topbar{height:91px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 40px;gap:22px}.breadcrumb{font-size:12px;color:var(--muted);white-space:nowrap}.breadcrumb b{color:#dddde8;font-weight:500}.breadcrumb>span{color:var(--purple);margin-left:8px}.search-wrap{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#191b27;border-radius:9px;padding:0 13px;margin-left:auto;width:330px;height:39px;color:var(--muted)}.search-wrap>span{font-size:25px}.search-wrap input{border:0;background:none;outline:none;width:100%;font-size:11px;padding:0}.search-wrap kbd{font:11px monospace;border:1px solid #393b4b;padding:2px 5px;border-radius:4px}.network{font-size:10px;white-space:nowrap;color:#b4b8c9}.network i,.pill i{display:inline-block;background:var(--green);height:6px;width:6px;border-radius:50%;margin-right:6px}.avatar{background:#34304b;color:#c9b7ff;border:1px solid #55466f;width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}main{max-width:1530px;margin:auto;padding:32px 40px 0}.hero{min-height:365px;display:flex;position:relative;overflow:hidden;border:1px solid #484064;border-radius:19px;background:radial-gradient(ellipse at 80% 30%,#63449770,transparent 60%),linear-gradient(110deg,#252039,#282138 60%,#3e2d58);padding:35px 40px}.hero:after{content:'';position:absolute;inset:0;background-image:radial-gradient(#ddd3ff15 1px,transparent 1px);background-size:22px 22px;pointer-events:none}.hero-copy{position:relative;z-index:1}.pill{font-size:9px;font-weight:700;letter-spacing:1.6px;background:#cbb0ff12;border:1px solid #cbb0ff22;border-radius:20px;padding:8px 12px;display:inline-block;color:#dbd0f6}.pill i{width:5px;height:5px;background:#c2a2ff}.hero h1{font-size:44px;letter-spacing:-1.7px;line-height:1.12;margin:22px 0 14px}.hero h1 span{color:#baa1ff}.hero p{color:#b9b1cc;font-size:12px;line-height:1.9}.primary{background:#ac8aff;color:#171022;border:1px solid #bc9fff;box-shadow:0 5px 20px #9464ee20;font-weight:750;border-radius:8px;padding:12px 18px;font-size:12px;display:inline-flex;align-items:center;gap:26px;justify-content:space-between}.primary:hover{background:#bca1ff;transform:translateY(-1px)}.secondary{border:1px solid #3a3d50;background:#222532;color:#dedbea;border-radius:8px;padding:10px 13px;font-size:11px}.secondary:hover{background:#303348}.hero .primary{margin:10px 0 19px}.hero-foot{display:flex;gap:20px;font-size:9px;color:#a69cbd}.hero-art{position:absolute;right:4%;width:43%;height:100%;top:0;perspective:600px}.orbit{border:1px solid #d6b5ff17;width:315px;height:315px;border-radius:50%;position:absolute;top:30px;left:10%}.orbit-b{width:410px;height:410px;left:0;top:-20px}.gamepad{position:absolute;top:110px;left:10%;height:155px;width:275px;background:linear-gradient(150deg,#e2d6ff,#aa88e0 60%,#7551b0);border-radius:65px 65px 44px 44px;transform:rotate(-19deg) rotateY(-12deg);box-shadow:0 18px 0 #684394,0 30px 40px #160f3055,inset 0 4px 3px #ffffff70}.gamepad:before,.gamepad:after{content:'';position:absolute;z-index:-1;width:83px;height:130px;bottom:-34px;background:linear-gradient(90deg,#aa85da,#cfb7f5);border-radius:25px 20px 35px 35px;transform:rotate(17deg);box-shadow:0 10px 0 #704b9c}.gamepad:before{left:1px}.gamepad:after{right:1px;transform:rotate(-17deg);background:linear-gradient(90deg,#b18fe1,#9a76c7)}.dpad{position:absolute;top:25px;left:24px;font-size:57px;line-height:1;color:#403156;text-shadow:0 3px #74568d}.pad-center{position:absolute;left:125px;top:35px;color:#7d5a9e;font-size:14px}.pad-buttons{position:absolute;right:25px;top:26px;width:57px;height:57px;transform:rotate(-8deg)}.pad-buttons i{position:absolute;width:18px;height:18px;border-radius:50%;background:#4f3b74;box-shadow:0 3px 0 #72528f}.pad-buttons i:nth-child(1){left:20px;top:0;background:#d6f0a4}.pad-buttons i:nth-child(2){left:0;top:20px;background:#ffd798}.pad-buttons i:nth-child(3){right:0;top:20px;background:#ffa7c8}.pad-buttons i:nth-child(4){left:20px;bottom:0;background:#a7cbff}.stick{position:absolute;bottom:24px;width:37px;height:37px;background:#5c447d;border:6px solid #9672bb;border-radius:50%;box-shadow:0 4px 0 #775498,inset 0 2px 3px #332443}.stick-a{left:79px}.stick-b{right:74px}.spark{position:absolute;color:#dfc4ff}.s1{top:60px;right:15%;font-size:40px}.s2{bottom:45px;left:4%;font-size:35px}.s3{right:5%;bottom:70px;font-size:20px}.float-label{position:absolute;font-size:8px;letter-spacing:1.1px;background:#3c2f51;border:1px solid #765b93;border-radius:7px;padding:10px 12px;box-shadow:0 8px 20px #160d2822;z-index:1}.label-one{top:68px;left:0;transform:rotate(-9deg)}.label-two{bottom:55px;right:5%;transform:rotate(8deg);color:#e7d6ff}.library{padding-top:36px;scroll-margin-top:20px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.8px;color:#85849c}.section-top{display:flex;align-items:center;justify-content:space-between}.section-top h2{font-size:23px;letter-spacing:-.6px;margin:9px 0 0}.section-top h2 span{font-size:11px;background:#252737;color:#9d9db1;padding:4px 8px;border-radius:6px;vertical-align:middle;margin-left:7px}.section-top select{width:auto;font-size:11px;padding:10px;background:#191c28}.filters{display:flex;gap:8px;flex-wrap:wrap;margin:23px 0}.filter{font-size:10px;background:#1b1e2b;border:1px solid #2b2e3e;color:#a4a5bb;border-radius:7px;padding:9px 15px}.filter.active{color:#d6c5ff;background:#a382ff22;border-color:#77619f}.empty-state{border:1px dashed #393547;background:radial-gradient(ellipse at 50% 40%,#30233f33,transparent 60%),#151722;border-radius:13px;text-align:center;padding:33px 20px 26px}.empty-symbol{font-size:54px;color:#a88be3;position:relative;line-height:1;width:75px;margin:auto}.empty-symbol span{position:absolute;right:3px;bottom:0;font-size:18px;background:#30243e;border-radius:6px;padding:1px 4px}.empty-state h3{font-size:17px;letter-spacing:-.3px;margin:17px 0 9px}.empty-state p{font-size:11px;color:#9495aa;line-height:1.9}.empty-state .secondary{margin-top:7px}.empty-note{display:block;font-size:9px;color:#666b83;margin-top:16px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:26px 0 30px}.feature-row article{border:1px solid #282b3a;border-radius:11px;padding:19px 16px;display:flex;align-items:center;gap:13px;background:#171925}.feature-icon{width:35px;height:37px;display:grid;place-items:center;border-radius:10px;font-size:21px;flex-shrink:0}.purple{color:#ba9aff;background:#a382ff15}.green{color:#87d9b4;background:#72d5a515}.orange{color:#eeb887;background:#dd945315}.feature-row h3{font-size:10px;margin:0 0 7px}.feature-row p{font-size:9px;color:#85899e;margin:0}footer{border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;color:#656a81;font-size:9px}footer b{color:#a2a0b3;font-size:12px}footer>span:last-child{font-size:8px;letter-spacing:1px}.icon-button{background:transparent;color:#a6a4b9;font-size:19px;padding:8px;border-radius:7px}#mobile-menu{display:none}.preview-banner{padding:10px 14px;border:1px solid #5e4b7c;background:#2c233b;color:#bda6dc;border-radius:8px;font-size:11px;margin-bottom:16px}.login-screen{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:#29203d;padding:12%;background-image:radial-gradient(ellipse at 40% 20%,#7954ac55,transparent 70%)}.login-art h1{font-size:clamp(40px,5vw,79px);letter-spacing:-3px;line-height:1.08;margin:25px 0;z-index:1}.login-art h1 span{color:#b99afc}.login-art p{color:#baaccb;font-size:14px;z-index:1}.login-art>.eyebrow{color:#c5b1e8;z-index:1}.giant-mark{position:absolute;font-size:400px;right:-150px;top:-60px;color:#c29aff20;transform:rotate(16deg)}.orb{position:absolute;width:430px;height:430px;border:1px solid #c7a5ff18;border-radius:50%;bottom:-200px;left:-120px}.orb-two{width:600px;height:600px;bottom:-285px;left:-200px}.art-footer{position:absolute;bottom:35px;left:12%;right:12%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#b49bcd}.login-form-wrap{padding:40px 12%;display:flex;flex-direction:column;justify-content:space-between}.login-form-wrap form{margin:60px 0;max-width:400px}.login-form-wrap h2{font-size:29px;letter-spacing:-1px;margin-top:15px}.login-form-wrap p{font-size:13px;line-height:1.7;color:#9496ad}.login-form-wrap label{margin-top:32px}.login-bottom{font-size:10px;color:#70758a}.login-bottom span{display:block;margin-top:7px}.password-wrap{position:relative}.password-wrap input{padding-right:50px}.password-wrap button{position:absolute;right:10px;top:8px;background:transparent;color:#9b8cae;padding:7px}.wide{width:100%;margin-top:8px}.hint,small{color:#9294aa;font-size:11px;line-height:1.6}.error{color:#ffa5ba!important;font-size:12px;min-height:16px}.error:empty{min-height:0}input,select,textarea{width:100%;background:#191b28;border:1px solid #34374a;border-radius:7px;color:#eeeafa;padding:12px;outline:none}input:focus,select:focus,textarea:focus{border-color:#a082e1;box-shadow:0 0 0 3px #a082e110}label{display:block;font-size:12px;color:#c9c5d7;margin:17px 0 8px}input[type=checkbox]{width:auto;accent-color:#ac8aff}input[type=file]{font-size:10px;padding:10px}dialog{background:#141621;color:var(--text);border:1px solid #434055;border-radius:15px;width:min(760px,94vw);max-height:90vh;padding:26px}dialog::backdrop{background:#080912c9;backdrop-filter:blur(8px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}.dialog-head h2{margin:6px 0 0;font-size:23px}.admin-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line);padding-bottom:15px}.admin-tabs .active{background:#634c8b}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.check-row{display:flex;gap:20px;margin:4px 0 18px}#game-form{padding-bottom:18px;border-bottom:1px solid var(--line)}#settings-form button{margin-top:20px}.admin-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:14px 0}.admin-row>div{flex:1}.admin-row b{display:block;font-size:12px}.admin-row small{font-size:10px}.admin-row button{padding:8px;font-size:10px}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.game-card{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#1a1c29;transition:transform .2s,border-color .2s}.game-card:hover{transform:translateY(-5px);border-color:#a589e0}.game-cover{height:160px;position:relative;display:grid;place-items:center;background:linear-gradient(130deg,#3c2f5e,#725295);font-size:60px;color:#d4baff;overflow:hidden}.game-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.game-card-content{padding:16px}.game-card h3{margin:9px 0;font-size:17px}.game-card p{font-size:11px;color:var(--muted);line-height:1.6;min-height:35px}.game-card .primary{width:100%;margin-top:8px}.game-tag{font-size:9px;color:#c8b3f0}.favorite{position:absolute;right:10px;top:10px;background:#11131ccc;border:1px solid #ffffff30;border-radius:50%;color:#fff;font-size:20px;width:32px;height:32px;z-index:1}.favorite.selected{color:#c3a1ff}.download{display:block;background:none;color:#a7a2bc;font-size:10px;margin:12px auto 0}.download:disabled{cursor:default}#player-dialog{width:95vw;padding:16px}#player-dialog iframe{width:100%;height:72vh;border:0;background:#080a10}#player-dialog:fullscreen{width:100vw;height:100vh;max-width:none;max-height:none;border:0;border-radius:0}#player-dialog:fullscreen iframe{height:calc(100vh - 90px)}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#353044;border:1px solid #8c72b3;border-radius:9px;padding:13px 22px;font-size:12px;z-index:100;max-width:90vw} @media(min-width:1450px){.hero{min-height:400px}.hero h1{font-size:54px}.hero-art{right:10%}.gamepad{top:125px;transform:scale(1.15) rotate(-19deg)}}@media(max-width:1150px){.sidebar{width:205px;padding:28px 14px}.main-wrap{margin-left:205px}.topbar{padding:0 25px}.breadcrumb{display:none}main{padding:25px}.hero{padding:30px}.hero h1{font-size:38px}.hero-art{right:0;transform:scale(.85);transform-origin:right center}.feature-row{gap:10px}.feature-row article{padding:14px 10px;gap:8px}.feature-row p{line-height:1.6}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.sidebar{transform:translateX(-100%);width:230px;transition:transform .2s;box-shadow:20px 0 80px #0008}.sidebar.open{transform:translateX(0)}.main-wrap{margin:0}.topbar{height:70px;padding:0 16px;gap:12px}#mobile-menu{display:block}.search-wrap{width:100%}.search-wrap kbd,.avatar,.network{display:none}main{padding:20px 16px 0}.hero{padding:26px;min-height:370px}.hero h1{font-size:38px}.hero-art{opacity:.5;right:-115px;top:90px;transform:scale(.65)}.hero-copy{z-index:2}.hero p{font-size:11px}.hero-foot{font-size:8px;gap:12px}.feature-row{grid-template-columns:1fr}.feature-row article{padding:15px}.feature-row h3{font-size:12px}.feature-row p{font-size:11px}.section-top h2{font-size:20px}.section-top select{max-width:110px;font-size:10px}.eyebrow{font-size:8px}.filters{gap:6px}.filter{padding:9px 11px}.library{padding-top:28px}footer{gap:12px;line-height:1.8}footer>span:last-child{display:none}.login-screen{grid-template-columns:1fr}.login-art{display:none}.login-form-wrap{min-height:100svh;padding:30px 9%}.login-form-wrap form{margin:45px 0}.game-grid{gap:12px}.game-cover{height:120px}.game-card-content{padding:12px}.game-card h3{font-size:14px}.form-grid{grid-template-columns:1fr}.admin-row{flex-wrap:wrap}.admin-row>div{flex-basis:100%}.dialog-head h2{font-size:19px}.dialog-head .secondary{padding:8px}.check-row{flex-wrap:wrap;gap:0 15px}.game-card .primary{gap:8px;font-size:10px;padding:10px}.preview-banner{line-height:1.7}.admin-tabs{margin-top:8px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}html{scroll-behavior:smooth}

.sidebar{overflow-y:auto;scrollbar-width:thin}.sidebar>.brand,.sidebar>nav,.sidebar>.nav-label,.sidebar-bottom{flex-shrink:0}
/* Touch and standalone iPad layouts */
body{padding-bottom:env(safe-area-inset-bottom)}button,a,input,select,textarea{touch-action:manipulation}input,select,textarea{font-size:16px}button{min-height:40px}.offline-panel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#1b1e2c;border:1px solid #3b3551;border-radius:12px;padding:20px;margin-top:26px}.offline-panel>div{flex:1;min-width:220px}.offline-panel h3{font-size:15px;margin:0 0 9px}.offline-panel p{font-size:12px;color:#b8a5e4;line-height:1.7}.offline-panel small{display:block;font-size:11px}.backup-import{cursor:pointer;margin:0;position:relative;overflow:hidden;min-height:40px;display:flex;align-items:center}.backup-import input{position:absolute;inset:0;opacity:0;cursor:pointer}.game-tag{display:block;line-height:1.8}.network{display:inline-flex!important;align-items:center}#player-dialog{overscroll-behavior:contain}#player-dialog.expanded{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom))}#player-dialog.expanded iframe{height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}#player-dialog iframe{touch-action:auto}.dialog-head{flex-wrap:wrap}dialog{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.sidebar{padding-top:calc(28px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}.favorite{min-height:44px;width:44px;height:44px}.download{min-height:44px}.filter{min-height:44px}.search-wrap input{font-size:14px}.game-card p{overflow-wrap:anywhere}
@media(max-width:1024px){.sidebar{transform:translateX(-100%);width:245px;transition:transform .2s;box-shadow:20px 0 80px #0008}.sidebar.open{transform:translateX(0)}.main-wrap{margin:0}#mobile-menu{display:block}.topbar{gap:14px}.hero-art{right:5%}.feature-row h3{font-size:12px}.feature-row p{font-size:11px}.nav-item{min-height:44px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.icon-button{min-width:44px;min-height:44px}}
@media(max-width:600px){.network{font-size:9px}.topbar{gap:7px}.search-wrap{padding:0 8px}.search-wrap input{font-size:12px}.hero-art{right:-115px}.offline-panel{padding:16px}.game-grid{grid-template-columns:1fr}.game-cover{height:180px}#player-dialog{padding:12px}#player-dialog iframe{height:68dvh}.dialog-head>div:last-child{display:flex;align-items:center;gap:5px}.feature-row{margin-bottom:20px}}
@media(hover:none){.game-card:hover,.primary:hover{transform:none}}
