:root{--bg:#f5f9ff;--page-bg:#f5f9ff;--surface-1:#ffffff;--surface-2:#eef5ff;--surface-3:#e2edfb;--chrome:#ffffff;--chrome-line:rgba(11, 94, 201, 0.22);--chrome-line-strong:rgba(11, 94, 201, 0.45);--line:#d9e7f7;--line-strong:#bbd3f0;--text:#0f172a;--text-muted:#64748b;--text-faint:#94a3b8;--accent:#0b5ec9;--accent-hover:#1677ff;--accent-deep:#073b7a;--accent-rgb:11,94,201;--accent-soft:rgba(11, 94, 201, 0.09);--accent-ring:rgba(11, 94, 201, 0.5);--on-accent:#ffffff;--tint-rgb:15,23,42;--shade-rgb:11,94,201;--glass:rgba(255, 255, 255, 0.86);--glass-strong:rgba(255, 255, 255, 0.72);--radius-card:14px;--radius-ctrl:11px;--radius-pill:999px;--shadow-card:0 1px 2px rgba(var(--shade-rgb),0.06);--shadow-lift:0 18px 40px -16px rgba(var(--shade-rgb),0.18);--shadow-pop:0 24px 60px -16px rgba(var(--shade-rgb),0.24);--ease:cubic-bezier(0.22, 0.61, 0.36, 1);--font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;--maxw:1840px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--page-bg);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh}body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:0 0}body.game-active{overflow:hidden}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}::selection{background:var(--accent-soft);color:var(--text)}button{font-family:inherit;cursor:pointer}[role=button],a,button{touch-action:manipulation}:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;border-radius:6px}*{scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:999px;border:2px solid var(--bg)}::-webkit-scrollbar-track{background:0 0}:root{--rail-w:56px;--rail-open:164px}#main-container{padding-left:var(--rail-w)}.rail{position:fixed;left:0;top:0;bottom:0;z-index:45;width:var(--rail-w);display:flex;flex-direction:column;align-items:stretch;padding:14px 0;background:var(--surface-1);border-right:1px solid var(--line);overflow:hidden;transition:width .2s var(--ease),box-shadow .2s var(--ease)}.rail:has(:focus-visible),.rail:hover{width:var(--rail-open);box-shadow:24px 0 60px -28px rgba(var(--shade-rgb),.16)}body.game-active .rail{display:none}.rail-nav{display:flex;flex-direction:column;gap:4px;padding:0 6px}.rail-btn{display:flex;align-items:center;gap:0;height:44px;padding:0;flex:none;justify-content:center;border:0;border-radius:13px;background:0 0;cursor:pointer;color:var(--text-muted);font-size:.96rem;font-weight:600;font-family:inherit;text-align:left;text-decoration:none;white-space:nowrap;transition:background .14s var(--ease),color .14s var(--ease)}.rail-ico{flex:none;width:44px;display:grid;place-items:center}.rail-ico svg{width:21px;height:21px;display:block}.rail-lbl{opacity:0;max-width:0;min-width:0;overflow:hidden;white-space:nowrap;transition:opacity .16s var(--ease),max-width .2s var(--ease)}.rail:has(:focus-visible) .rail-btn,.rail:hover .rail-btn{justify-content:flex-start;padding-left:8px}.rail:has(:focus-visible) .rail-lbl,.rail:hover .rail-lbl{opacity:1;max-width:168px}.rail-btn:hover{background:var(--surface-2);color:var(--text)}.rail-btn.is-active{background:var(--accent);color:var(--on-accent)}.rail-btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-2px}.topsearch{position:sticky;top:0;z-index:20;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:12px 0 8px;background:var(--page-bg)}.ftabs{display:flex;align-items:center;gap:4px}.ftab{min-height:44px;padding:0 16px;border:0;border-radius:var(--radius-pill);background:0 0;color:var(--text-muted);font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:color .14s var(--ease)}.ftab:hover{color:var(--text)}.ftab.is-active{color:var(--accent)}.ftab:focus-visible{outline:2px solid var(--accent-ring);outline-offset:-4px}.search{position:relative;width:min(720px,100%)}.search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-faint);pointer-events:none;transition:color .15s var(--ease)}.search input{width:100%;height:50px;padding:0 20px 0 48px;background:var(--surface-1);border:1px solid var(--line-strong);border-radius:var(--radius-pill);color:var(--text);font-size:.98rem;line-height:1;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}.search input::placeholder{color:var(--text-faint)}.search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.search input:focus{outline:0;border-color:var(--accent-ring);box-shadow:0 0 0 3px var(--accent-soft)}.search:focus-within svg{color:var(--text-muted)}main{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vw,40px)}.hero{display:none}.hero h1{margin:0;font-size:clamp(1.5rem, 3vw, 2rem);font-weight:720;letter-spacing:-.02em}.hero p{margin:6px 0 0;color:var(--text-muted);font-size:.95rem}.hero .count{color:var(--text-faint);font-family:var(--font-mono);font-size:.8rem;white-space:nowrap}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.chip{height:34px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;background:0 0;border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--text-muted);font-size:.85rem;font-weight:550;transition:all .15s var(--ease)}.chip:hover{color:var(--text);border-color:var(--line-strong)}.chip.is-active{background:var(--accent-soft);border-color:transparent;color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px}.card{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--surface-2);box-shadow:var(--shadow-card);text-align:left;color:var(--text);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--surface-3);transition:transform .35s var(--ease),filter .2s var(--ease)}.card .label{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;font-size:.86rem;font-weight:600;line-height:1.25;color:#fff;background:linear-gradient(to top,rgba(6,23,48,.88) 8%,rgba(6,23,48,.46) 55%,transparent);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:transform .2s var(--ease)}.card .play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;background:rgba(11,94,201,.28);transition:opacity .2s var(--ease)}.card .play span{width:52px;height:52px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 10px 28px -8px var(--accent-ring);transform:scale(.82);transition:transform .2s var(--ease)}.card .play svg{width:22px;height:22px}.card .badge{position:absolute;top:9px;left:9px;padding:3px 8px;font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent)}.card .fav{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(7,59,122,.62);color:#fff;opacity:0;cursor:pointer;transition:opacity .15s var(--ease),background .15s var(--ease)}.card .fav svg{width:17px;height:17px;display:block}.card .fav.is-fav,.card .fav:focus-visible,.card:focus-visible .fav,.card:hover .fav{opacity:1}.card .fav:hover{background:rgba(7,59,122,.9)}.card .fav.is-fav{color:var(--accent)}.card .fav.is-fav svg{fill:currentColor}.card .fav:focus-visible{outline:2px solid var(--accent-ring);outline-offset:1px}.card:focus-visible,.card:hover{transform:translateY(-5px);border-color:var(--accent-ring);box-shadow:var(--shadow-lift)}.card:focus-visible img,.card:hover img{transform:scale(1.06)}.card:focus-visible .play,.card:hover .play{opacity:1}.card:focus-visible .play span,.card:hover .play span{transform:scale(1)}.empty{grid-column:1/-1;display:grid;justify-items:center;padding:clamp(48px,9vw,84px) 24px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface-1);box-shadow:var(--shadow-card);color:var(--text-muted);text-align:center}.empty svg{width:26px;height:26px;padding:13px;box-sizing:content-box;margin-bottom:16px;border-radius:50%;background:var(--accent-soft);color:var(--accent);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.14)}.empty p{margin:0;color:var(--text);font-size:1.06rem;font-weight:650;letter-spacing:-.015em}.empty .empty-sub{margin-top:7px;color:var(--text-muted);font-size:.9rem;font-weight:500;letter-spacing:0}footer{max-width:var(--maxw);margin:40px auto 0;padding:28px clamp(16px,4vw,40px) 40px;border-top:1px solid var(--line);color:var(--text-faint);font-size:.82rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}#gamePage{position:fixed;inset:0;z-index:100;background:#050b16;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease)}#gamePage.active{opacity:1;visibility:visible;pointer-events:auto}.game-bar{flex:none;display:flex;align-items:center;gap:12px;height:54px;padding:0 14px;background:var(--surface-1);border-bottom:1px solid var(--line)}#gameSessionTitle{flex:1;min-width:0;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-bar .icon-btn{width:38px;height:38px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;color:var(--text-muted);transition:all .15s var(--ease)}.game-bar .icon-btn svg{width:18px;height:18px;display:block}.game-bar .icon-btn:hover{color:var(--text);border-color:var(--line-strong);background:var(--surface-3)}.game-bar .icon-btn.close:hover{color:#fff;background:#d04646;border-color:#d04646}#gameViewStack{position:relative;flex:1;min-height:0;background:#050b16}.game-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#050b16}.game-frame:not(.active){display:none}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;transition-duration:0s!important}}@media (max-width:640px){.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}:root{--rail-w:56px}.rail{transition:none}.rail:has(:focus-visible),.rail:hover{width:64px;box-shadow:none}.rail-lbl{display:none}}.splash{position:fixed;inset:0;z-index:10000;background:#f5f9ff;transition:opacity .38s ease}.splash iframe{width:100%;height:100%;border:0;display:block}.splash.is-out{opacity:0;pointer-events:none}@media (prefers-reduced-motion:reduce){.splash{transition:none}}.rail-btn[hidden]{display:none!important}.card:focus-visible,.card:hover{box-shadow:var(--shadow-lift),0 0 0 1px rgba(var(--accent-rgb),.22),0 8px 40px -12px rgba(var(--accent-rgb),.18)}.search input:focus{box-shadow:0 0 0 3px var(--accent-soft),0 2px 20px -8px rgba(var(--accent-rgb),.22)}.rail{box-shadow:1px 0 0 var(--line),6px 0 32px rgba(var(--shade-rgb),.07)}.card .badge{box-shadow:0 2px 10px -2px rgba(var(--accent-rgb),.5)}.rail-btn.is-active{box-shadow:0 4px 14px -4px rgba(var(--accent-rgb),.4)}