*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0f0f1a;--bg-card:#1a1a2e;--bg-hover:#252542;--text:#e0e0f0;--text2:#9898b8;--accent:#5B8DEF;--border:#2a2a44}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100dvh}
header{background:var(--bg-card);border-bottom:1px solid var(--border);padding:0 24px;position:sticky;top:0;z-index:10}
.header-inner{max-width:800px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;height:56px}
.header-inner h1{font-size:20px;font-weight:700}
.user-info{display:flex;align-items:center;gap:10px;font-size:14px}
.btn-link{background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px;padding:6px 12px;border-radius:8px}
.btn-link:hover{background:var(--bg-hover)}
main{max-width:800px;margin:0 auto;padding:32px 24px}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.game-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s}
.game-card:hover{border-color:var(--accent)}
.game-card.disabled{opacity:.5;pointer-events:none}
.game-icon{font-size:40px;text-align:center}
.game-info h3{font-size:17px;font-weight:600;margin-bottom:4px}
.game-info p{font-size:13px;color:var(--text2);margin-bottom:8px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--bg-hover);color:var(--text2);margin-right:6px}
.btn-play{display:inline-block;text-align:center;padding:10px 20px;border-radius:10px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px;border:none;cursor:pointer;transition:opacity .15s}
.btn-play:hover{opacity:.85}
.btn-play:disabled{background:var(--bg-hover);color:var(--text2);cursor:default}

/* Auth overlay */
.auth-overlay{position:fixed;z-index:100;inset:0;background:#00000066;display:grid;place-content:center;padding:24px;backdrop-filter:blur(3px)}
.auth-card{background:var(--bg-card);border:1px solid var(--border);border-radius:22px;padding:28px;width:min(380px,92vw);position:relative}
.auth-card h2{text-align:center;margin:0 0 18px;font-size:18px}
.auth-form label{display:grid;gap:5px;margin:12px 0;font-weight:600;font-size:14px}
.auth-form input{background:var(--bg-hover);border:1px solid var(--border);padding:11px 14px;border-radius:12px;font-size:15px;outline:none;color:var(--text)}
.auth-form input:focus{border-color:var(--accent)}
.auth-form .primary{width:100%;margin:10px 0;padding:12px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
.auth-error{color:#ff6b6b;font-size:13px;text-align:center;min-height:20px;margin:0}
.auth-switch{text-align:center;font-size:13px;color:var(--accent);cursor:pointer;margin:6px 0 0}
.auth-switch:hover{text-decoration:underline}
.auth-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:#888}
.auth-close:hover{color:#fff}
.hidden{display:none!important}
#toast{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);padding:12px 24px;border-radius:12px;font-size:14px;z-index:200;opacity:0;transition:opacity .3s}
#toast.show{opacity:1}