*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0e1a;--hdr:#0f1626;--card:#141d30;--bd:#1e2a42;--tx:#fff;--tx2:#aebbd2;--idle:#7f8cab;--yellow:#FECC00;--blue:#006AA7;--blue2:#0085D1}
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--tx);font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif}
a{text-decoration:none;color:inherit}
::selection{background:var(--yellow);color:#0a0e1a}
.header{position:fixed;top:0;left:0;right:0;height:84px;background:var(--hdr);display:flex;align-items:center;gap:16px;padding:0 22px;z-index:50;border-bottom:1px solid var(--bd)}
.burger{display:none;background:none;border:none;color:var(--tx);cursor:pointer}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo .mascot{width:46px;height:46px;flex-shrink:0;filter:drop-shadow(0 3px 5px #0007)}
.logo .wm{display:flex;flex-direction:column;line-height:.78}
.logo .g-top{font:900 20px 'Nunito',sans-serif;color:#fff;letter-spacing:-.5px}
.logo .g-bot{font:400 19px 'Bungee',sans-serif;color:var(--yellow);letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,106,167,.85),0 4px 0 rgba(0,106,167,.55),0 6px 0 rgba(0,106,167,.3),0 8px 0 rgba(0,106,167,.14);animation:vibe .4s ease-in-out infinite}
@keyframes vibe{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
.search{position:relative;flex:1;max-width:480px;margin:0 auto}
.search input{width:100%;height:42px;border-radius:30px;border:2px solid transparent;background:#1a2540;color:var(--tx);font:700 15px 'Nunito',sans-serif;padding:0 18px 0 44px}
.search input::placeholder{color:var(--idle)}
.search input:focus{outline:none;border-color:var(--yellow);background:#1e2b4a}
.search::before{content:'';position:absolute;left:16px;top:50%;width:16px;height:16px;transform:translateY(-50%);background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8cab' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E")}
.login{background:linear-gradient(135deg,var(--blue2),var(--blue));color:#fff;font:800 15px 'Nunito',sans-serif;height:42px;padding:0 24px;border-radius:30px;border:none;cursor:pointer;flex-shrink:0;transition:filter .2s,transform .1s;box-shadow:0 3px 0 #00375c}
.login:hover{filter:brightness(1.1)}
.login:active{transform:translateY(2px);box-shadow:none}
.layout{display:flex;padding-top:84px}
.sidebar{position:fixed;top:84px;left:0;width:232px;height:calc(100vh - 84px);background:var(--bg);border-right:1px solid var(--bd);overflow-y:auto;padding:14px 12px 30px;z-index:40}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#1e2a42;border-radius:6px}
.snav{display:flex;align-items:center;gap:13px;height:40px;padding:0 11px;border-radius:11px;color:var(--tx2);font:700 14px 'Nunito',sans-serif;margin-bottom:3px;transition:all .12s}
.snav .ic{width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:9px;background:color-mix(in srgb,var(--ic,#7f8cab) 16%,transparent);color:var(--ic,var(--idle));transition:all .12s}
.cic{width:19px;height:19px}
.snav .lbl{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav .cnt{font-size:10px;color:#56607e;font-weight:800}
.snav:hover{color:#fff;background:#141d30}
.snav:hover .ic{transform:scale(1.1)}
.snav.active{color:#0a0e1a;background:var(--yellow);font-weight:900}
.snav.active .ic{background:#0a0e1a22;color:#0a0e1a}
.nbadge{background:#006AA7;color:#fff;font:900 9px 'Nunito';padding:3px 7px;border-radius:6px;letter-spacing:.5px}
.sdiv{height:1px;background:var(--bd);margin:13px 8px}
.sidebar h3{font:900 10px 'Nunito';text-transform:uppercase;letter-spacing:2px;color:#56607e;padding:4px 13px 9px}
.contact-btn{display:block;text-align:center;background:#141d30;border:1px solid var(--bd);color:var(--tx);font:800 14px 'Nunito';padding:11px;border-radius:30px;margin:8px 6px;transition:all .15s}
.contact-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.main{flex:1;margin-left:232px;padding:24px 28px;min-width:0}
footer{margin-left:232px;background:#0f1626;border-top:1px solid var(--bd);padding:34px 28px 26px}
.fcols{display:flex;flex-wrap:wrap;gap:40px;max-width:1100px}
.fcol h4{font:900 13px 'Nunito';color:var(--yellow);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.fcol a{display:block;color:var(--tx2);font:600 13px 'Nunito';margin-bottom:7px}
.fcol a:hover{color:#fff}
.fbottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--bd);color:var(--idle);font-size:12px}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:transform .22s;z-index:60;box-shadow:6px 0 30px #000a}.sidebar.open{transform:none}.main,footer{margin-left:0}.burger{display:block}}
@media(max-width:600px){.main{padding:14px}.login{padding:0 16px}.logo .g-top{font-size:17px}.logo .g-bot{font-size:16px}}
.logo .logoimg{height:60px;width:auto;display:block;filter:drop-shadow(0 3px 5px #0007)}
@media(min-width:901px){.logo{width:232px;justify-content:center;margin-left:-22px}}
html{background:var(--bg)}
footer .fwrap{display:flex;flex-wrap:wrap;justify-content:center;gap:54px;max-width:1180px;margin:0 auto}
.fbrand{max-width:320px;min-width:230px}
.flogo{height:58px;width:auto;margin-bottom:14px;filter:drop-shadow(0 3px 5px #0006)}
.ftag{color:var(--tx2);font:600 13px/1.65 'Nunito',sans-serif;margin-bottom:16px}
.fsocial{display:flex;gap:10px}
.fsocial a{width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--tx2);transition:.15s}
.fsocial a svg{width:18px;height:18px}
.fsocial a:hover{background:var(--yellow);color:#0a0e1a;border-color:var(--yellow);transform:translateY(-2px)}
.fcols{min-width:280px;justify-content:center}
.fbadges{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:1180px;margin:30px auto 0;padding-top:24px;border-top:1px solid var(--bd)}
.fbadge{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--bd);border-radius:30px;padding:7px 14px;color:var(--tx2);font:800 12px 'Nunito',sans-serif}
.fbadge svg{width:14px;height:14px;color:var(--yellow)}
.fbottom{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;max-width:1180px;margin:20px auto 0;text-align:center;color:var(--idle);font:600 12px 'Nunito',sans-serif}
.fresp{color:var(--tx2);font-weight:800}
.ttoggle{background:var(--card);border:1px solid var(--bd);color:var(--tx2);width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.15s}
.ttoggle:hover{color:var(--yellow);border-color:var(--yellow)}
.ttoggle svg{width:20px;height:20px}
.ttoggle .i-sun{display:none}
html[data-theme=light] .ttoggle .i-moon{display:none}
html[data-theme=light] .ttoggle .i-sun{display:block}
html[data-theme=light]{--bg:#f3f5fb;--hdr:#ffffff;--card:#ffffff;--bd:#e6eaf2;--tx:#0c1322;--tx2:#4a546b;--idle:#98a1b6}
html[data-theme=light] .search input{background:#eef1f7}
html[data-theme=light] .search input:focus{background:#fff}
html[data-theme=light] .snav:hover{background:#eef1f7;color:#0c1322}
html[data-theme=light] footer{background:#f6f8fc}
html[data-theme=light] .sidebar::-webkit-scrollbar-thumb{background:#d4dae6}
html[data-theme=light] body{background:#f3f5fb;color:#0c1322}
html[data-theme=light]{background:#f3f5fb}
html[data-theme=light] .content h1{color:#0c1322}
html[data-theme=light] .subtitle{color:#6b7488}
html[data-theme=light] .back,html[data-theme=light] .nav-back{background:#eef1f7;color:#4a546b}
html[data-theme=light] .gc{background:#fff}
html[data-theme=light] .gc img{background:#eef1f7}
html[data-theme=light] .gc span{color:#0c1322}
html[data-theme=light] .gg .gc,html[data-theme=light] .also-grid a{background:#fff;border-color:#e2e7f0}
html[data-theme=light] .prose{color:#3a4255}
html[data-theme=light] .prose h2,html[data-theme=light] .prose strong{color:#0c1322}
html[data-theme=light] .card{background:#fff;border-color:#e2e7f0;color:#0c1322}
html[data-theme=light] .game-info{background:#fff;border-color:#e2e7f0;color:#0c1322}
html[data-theme=light] .game-info h1,html[data-theme=light] .also-like h2,html[data-theme=light] .game-info p{color:#0c1322}
html[data-theme=light] .also-grid img{background:#eef1f7}
html[data-theme=light] .also-grid a{color:#0c1322}
