body { font-family: system-ui, sans-serif; margin: 0; background: #f3f4f6; color: #111827; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: #ffffff; border-bottom: 1px solid #e5e7eb; }
.topbar a, .topbar button { margin-left: auto; }
main { max-width: 480px; margin: 40px auto; padding: 0 16px; }
.auth-form { background: #ffffff; padding: 24px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.auth-form label { display: block; margin-bottom: 12px; font-size: 14px; }
.auth-form input { display: block; width: 100%; box-sizing: border-box; padding: 8px; margin-top: 4px; border: 1px solid #d1d5db; border-radius: 6px; }
.auth-form button { background: #4f46e5; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; }
.error { color: #dc2626; font-size: 13px; }
main.portal { max-width: 960px; }
main.portal h1 { font-size: 22px; margin: 0 0 20px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.game-card { display: block; position: relative; background: #ffffff; border-radius: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); text-decoration: none; color: inherit; }
.game-card h2 { margin: 0 0 6px; font-size: 16px; }
.game-card p { margin: 0; font-size: 13px; color: #6b7280; }
.game-card--live { cursor: pointer; }
.game-card--live:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.game-card--soon { opacity: 0.6; }
.badge { display: inline-block; background: #e5e7eb; color: #374151; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }