:root{color-scheme:dark;--bg:#0b1016;--text:#f3f5f8;--muted:#9ba6b5;--border:rgba(255,255,255,.10);--accent:#92c6ba}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}html{touch-action:manipulation}button,a,input{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}body{overflow-x:hidden}.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0b1016}.backdrop canvas{display:block;width:100%;height:100%}.backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,16,22,.14),transparent 70%);pointer-events:none}.shell{position:relative;z-index:1;min-height:100dvh}.sidebar{display:flex;flex-direction:column;position:fixed;left:20px;top:20px;bottom:20px;width:232px;padding:17px 11px;z-index:10;background:rgba(28,35,44,.72);border:1px solid rgba(255,255,255,.13);border-radius:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 38px rgba(0,0,0,.26);transition:width .23s ease,padding .23s ease}.brand{display:flex;align-items:center;gap:12px;height:50px;padding:0 12px;margin-bottom:25px;font-size:21px;font-weight:750;letter-spacing:-.7px;white-space:nowrap;cursor:pointer}.brand-icon{width:24px;height:24px;display:grid;place-items:center;color:var(--accent);flex:none}.nav{display:flex;flex-direction:column;gap:6px;flex:1}.nav button[data-page="settings"]{margin-top:auto}.nav button{display:flex;align-items:center;gap:14px;width:100%;height:46px;padding:0 13px;border:0;border-radius:11px;background:transparent;color:#abb5c2;text-align:left;white-space:nowrap;transition:background .15s,color .15s,transform .12s cubic-bezier(.2,.7,.2,1);transform-origin:center}.nav button:hover{background:rgba(255,255,255,.065);color:#fff}.nav button.selected{background:rgba(146,198,186,.16);color:#e5fff8}.nav button:active{transform:scale(1.065);background:rgba(146,198,186,.24)}.nav svg{width:20px;height:20px;flex:none}.nav .label,.brand .brand-label{overflow:hidden;transition:opacity .14s}.sidebar.collapsed{width:70px;padding:17px 9px}.sidebar.collapsed .nav button{justify-content:center;gap:0;padding:0;position:relative}.sidebar.collapsed .nav button svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.sidebar.collapsed .label,.sidebar.collapsed .brand-label{display:none}.sidebar.collapsed .brand{padding:0;justify-content:center;gap:0}.sidebar.collapsed .nav button:active{transform:scale(1.10)}.main{margin-left:272px;min-height:100dvh;padding:32px 44px;transition:margin-left .23s ease}.shell:has(.sidebar.collapsed) .main{margin-left:100px}.page{display:none;min-height:calc(100dvh - 64px)}.page.active{display:block}.home{position:relative;min-height:calc(100dvh - 64px);display:flex;align-items:center}.home-inner{position:relative;max-width:650px;padding-bottom:5vh}.home h1{font-size:clamp(42px,5.5vw,76px);line-height:1.08;letter-spacing:-3px;margin:0 0 19px;font-weight:740}.home p{font-size:clamp(16px,1.7vw,19px);color:#a7b2be;line-height:1.6;margin:0 0 31px;max-width:470px}.primary{display:inline-flex;align-items:center;gap:11px;padding:13px 19px;border-radius:10px;border:1px solid #a4d4c7;background:#a4d4c7;color:#10231e;font-weight:700;transition:transform .12s,background .15s}.primary:hover{background:#b9e3d7}.primary:active{transform:scale(1.06)}.primary svg{width:19px;height:19px}.page-header{margin:25px 0 27px}.page-header h1{font-size:35px;letter-spacing:-1.3px;margin:0 0 7px}.page-header p{color:var(--muted);margin:0;font-size:15px}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:18px}.game{overflow:hidden;border-radius:13px;background:rgba(24,30,38,.76);border:1px solid var(--border);transition:transform .16s,border-color .16s}.game:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24)}.game:active{transform:scale(1.03)}.art{height:135px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;font-weight:800;font-size:25px;letter-spacing:-1px}.art{background:#1d2630;color:#81909e}.art svg{width:43px;height:43px;stroke-width:1.5}@media(max-width:700px){.art svg{width:35px;height:35px}}.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px}.game-name{font-weight:650;font-size:14px}.fav{display:grid;place-items:center;width:31px;height:31px;border:0;background:transparent;color:#98a4b0;border-radius:8px}.fav:hover,.fav.on{color:#f1a3a3;background:#ffffff0d}.fav svg{width:18px}.search-box{width:100%;display:flex;align-items:center;gap:10px;border:1px solid #ffffff25;background:#ffffff0a;border-radius:11px;padding:0 14px;height:49px;margin-bottom:26px}.search-box svg{width:19px;color:#9ca8b5}.search-box input{flex:1;background:transparent;border:0;outline:0;color:white;min-width:0}.chips{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 25px}.chip{background:#ffffff0b;border:1px solid var(--border);border-radius:9px;padding:10px 15px;color:#d7dfe7}.chip:active{transform:scale(1.05)}.chip:hover{background:#ffffff18}.empty{color:var(--muted);margin-top:25px}.setting{padding:18px 0;border-bottom:1px solid var(--border);max-width:580px;display:flex;justify-content:space-between;gap:18px;align-items:center}.setting span{color:var(--muted);font-size:14px}.toggle{border:1px solid #ffffff2a;border-radius:9px;padding:8px 12px;background:#ffffff10;color:white}@media(max-width:700px){.sidebar{left:10px;top:10px;bottom:10px;width:195px}.sidebar.collapsed{width:60px;padding:13px 6px}.sidebar.collapsed .nav button{height:44px}.main{margin-left:215px;padding:25px 20px}.shell:has(.sidebar.collapsed) .main{margin-left:76px;padding:25px 15px}.home h1{letter-spacing:-1.9px}.games-grid{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:11px}.art{height:105px}.page-header h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Games-only search and popular carousel */
.games-search-wrap{position:sticky;top:32px;z-index:7;margin:0 0 15px;padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.games-search-wrap .search-box{margin:0;height:54px;background:#222d38;border-color:rgba(255,255,255,.16);border-radius:13px;box-shadow:0 5px 14px rgba(0,0,0,.15)}
.popular{position:relative;min-height:310px;height:clamp(300px,35vw,410px);border-radius:17px;overflow:hidden;background:#17252d;margin:0 0 27px;border:1px solid rgba(255,255,255,.13);isolation:isolate}
.slide-outgoing{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.slide-outgoing .popular-content{z-index:2}.slide-outgoing .popular-bg{position:absolute;inset:0;background:#1d2630!important;display:flex;align-items:center;justify-content:center;color:#81909e}.popular > .popular-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#1d2630!important;color:#81909e}.popular-bg svg{width:76px;height:76px;stroke-width:1.5;flex-shrink:0}.popular-bg:before,.popular-bg:after{content:none}
.popular-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,18,.89),rgba(6,12,18,.45) 62%,rgba(6,12,18,.12))}
.popular-content{position:absolute;left:clamp(26px,5%,60px);bottom:clamp(34px,11%,55px);right:90px;z-index:1}
.popular-content h2{font-size:clamp(35px,4.4vw,59px);letter-spacing:-1.8px;margin:0 0 11px;line-height:1.05}
.popular-content p{color:#d1d9df;font-size:15px;margin:0 0 22px;max-width:390px;line-height:1.5}
.popular .primary{padding:11px 17px}.carousel-arrow{position:absolute;top:27%;transform:translateY(-50%);z-index:4;width:46px;height:46px;display:grid;place-items:center;background:rgba(10,16,23,.67);color:white;border:1px solid #ffffff36;border-radius:8px;backdrop-filter:blur(8px)}.carousel-arrow:active{transform:translateY(-50%) scale(1.07)}.carousel-arrow.prev{left:26px}.carousel-arrow.next{right:26px}.carousel-arrow svg{width:21px}
.carousel-dots{position:absolute;right:24px;bottom:20px;display:flex;gap:7px;z-index:4}.carousel-dots button{width:7px;height:7px;border:0;border-radius:99px;background:#ffffff66;padding:0}.carousel-dots button.current{width:24px;background:#b1e2d4}
@media(max-width:700px){.popular{height:315px;min-height:315px}.popular-content{left:27px;right:45px;bottom:40px}.popular-content h2{font-size:34px}.popular-content p{font-size:13px;max-width:230px}.carousel-arrow{width:38px;height:38px}.carousel-arrow.prev{left:14px}.carousel-arrow.next{right:14px}.carousel-dots{right:12px;bottom:12px}.games-search-wrap{top:25px}}

/* Game player */
.player-wrap{max-width:1100px;margin:auto}.player-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}.player-top h1{margin:0;font-size:26px}.back-button{border:1px solid var(--border);background:#202a34;color:white;border-radius:9px;padding:10px 14px}.player-frame{width:100%;aspect-ratio:16/9;border:1px solid var(--border);border-radius:12px;background:#1d2630}.game{cursor:pointer}.art img,.popular-bg img{width:100%;height:100%;object-fit:cover}.popular-bg img{position:absolute;inset:0}.popular-bg .placeholder{width:76px;height:76px}.art .placeholder{width:43px;height:43px}

/* Game player: taller stage with a floating control bar below it */
.player-wrap{max-width:1180px;margin:0 auto;padding-top:12px}
.player-frame{display:block;width:100%;aspect-ratio:16/10;min-height:360px;border:1px solid var(--border);border-radius:13px;background:#1d2630}
.player-controls{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;padding:12px 16px;background:rgba(26,34,43,.86);border:1px solid var(--border);border-radius:13px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.player-identity,.player-actions{display:flex;align-items:center;gap:10px;min-width:0}
#playerTitle{font-size:18px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-icon{width:42px;height:42px;display:grid;place-items:center;flex:none;border:1px solid transparent;border-radius:10px;color:#dce5eb;background:transparent;cursor:pointer;touch-action:manipulation;transition:transform .15s ease,background .15s ease}
.player-icon svg{width:21px;height:21px;stroke-width:2}
.player-icon:active{transform:scale(1.08)}
.player-icon:hover{background:rgba(255,255,255,.08)}
.player-icon.on{color:#ff7791}
.player-icon.on svg{fill:currentColor}
@media(max-width:650px){.player-frame{min-height:220px;aspect-ratio:4/3}.player-controls{padding:8px 10px}#playerTitle{font-size:16px}.player-icon{width:38px;height:38px}}