*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;min-height:100vh}
header{text-align:center;padding:60px 20px}
header h1{font-size:3rem;margin-bottom:15px}
header p{color:#cbd5e1;font-size:1.2rem}
.container{max-width:1200px;margin:0 auto;padding:30px}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.card{background:rgba(255,255,255,.05);border-radius:16px;padding:30px;border:1px solid rgba(255,255,255,.1);transition:.3s}
.card:hover{transform:translateY(-6px);background:rgba(255,255,255,.08)}
.icon{font-size:3rem;margin-bottom:15px}
.card h2{margin-bottom:15px}
.card p{color:#cbd5e1;margin-bottom:25px;line-height:1.6}
.btn{display:inline-block;text-decoration:none;background:#2563eb;color:white;padding:12px 24px;border-radius:8px;font-weight:bold}
.btn:hover{background:#3b82f6}
.btn-disabled{display:inline-block;background:#475569;color:#cbd5e1;padding:12px 24px;border-radius:8px;font-weight:bold}
footer{text-align:center;padding:40px 20px;color:#94a3b8}

/* Account strip. One sign-in covers every game here: the session cookie is set
   at the site root with Path=/, so signing in on this page is already valid
   inside each game. No token passing, no redirect, nothing to keep in step. */
.account{
    position:absolute;top:0;right:0;
    display:flex;align-items:center;gap:14px;
    padding:16px 24px;font-size:.95rem;color:#cbd5e1;
}
.account a{color:#60a5fa;text-decoration:none;font-weight:600}
.account a:hover{text-decoration:underline}
.account .name{color:#fff;font-weight:600}
.account button{
    background:none;border:1px solid rgba(255,255,255,.2);color:#cbd5e1;
    padding:5px 12px;border-radius:6px;font:inherit;font-size:.85rem;cursor:pointer;
}
.account button:hover{border-color:#60a5fa;color:#fff}
@media(max-width:640px){
    .account{position:static;justify-content:center;padding:14px}
}

/* The nudge to set a nickname, shown only for a self-signup account with no
   nickname yet -- see auth-client.js's formatPlayerName. Animated for the
   same reason the password helper is (auth A-11): a static prompt gets
   tuned out. */
.change-name-pulse{
    border:1px solid #22c55e;
    border-radius:4px;
    padding:1px 8px;
    font:inherit;
    color:#fff;
    background:#22c55e;
    cursor:pointer;
    animation:change-name-pulse 1.6s ease-in-out infinite;
}

@keyframes change-name-pulse{
    0%,100%{opacity:1;}
    50%{opacity:.6;}
}

@media (prefers-reduced-motion:reduce){
    .change-name-pulse{animation:none;}
}