:root {
  color-scheme: dark;
  --color-bg: #080d16; --color-surface: #111a28; --color-surface-elevated: #182437; --color-surface-hover: #1d2b40; --color-border: #2a3a52; --color-border-strong: #3a506e;
  --color-text: #f4f7fb; --color-text-muted: #a7b2c3; --color-text-subtle: #7c899b; --color-text-disabled: #5f6b7c; --color-primary: #22d3ee; --color-primary-hover: #67e8f9; --color-primary-active: #06b6d4; --color-primary-foreground: #081018;
  --color-accent: #65e572; --color-accent-hover: #86efac; --color-accent-active: #4ade80; --color-accent-muted: rgb(101 229 114 / 12%); --color-success: #22c55e; --color-success-muted: rgb(34 197 94 / 12%); --color-partial: #34d399; --color-warning: #fb7185; --color-warning-muted: rgb(251 113 133 / 12%); --color-danger: #f43f5e; --color-danger-hover: #fb7185; --color-danger-muted: rgb(244 63 94 / 12%); --color-public: #a78bfa; --color-public-muted: rgb(167 139 250 / 12%); --color-locked: #7c899b; --color-display-only: #64748b;
  --color-terran: #4da3ff; --color-terran-muted: rgb(77 163 255 / 12%); --color-protoss: #65e572; --color-protoss-muted: rgb(101 229 114 / 12%); --color-zerg: #d66bff; --color-zerg-muted: rgb(214 107 255 / 12%); --color-random: #a7b2c3; --color-random-muted: rgb(167 178 195 / 12%); --color-first: #65e572; --color-second: #c7d0dc; --color-third: #c47a5a;
  --space-1: .375rem; --space-2: .625rem; --space-3: .875rem; --space-4: 1.25rem; --space-5: 1.75rem; --space-6: 2.5rem;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--color-bg); color: var(--color-text);
}
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(58rem 32rem at 92% -10%, rgb(34 211 238 / 9%), transparent 58%), radial-gradient(46rem 30rem at -15% 105%, rgb(101 229 114 / 6%), transparent 60%), var(--color-bg); } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgb(61 87 120 / 15%) 1px, transparent 1px), linear-gradient(90deg, rgb(61 87 120 / 15%) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 72%); } button, input, select { font: inherit; } button { cursor: pointer; } a { color: var(--color-primary); } button, a { min-height: 44px; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.site-header { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.1rem 0; display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border); } .site-header p, footer, .eyebrow, .badge, label, th { color: var(--color-text-muted); font: 700 .72rem/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; } .brand { color: var(--color-text); text-decoration: none; font-weight: 900; letter-spacing: -.05em; font-size: 1.35rem; } .brand span { color: var(--color-primary); }
.top-nav { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; } .top-nav a { text-decoration: none; color: var(--color-text-muted); padding: .55rem .7rem; border: 1px solid transparent; border-radius: 8px; } .top-nav a[aria-current="page"] { background: rgb(34 211 238 / 12%); color: var(--color-primary); border-color: rgb(34 211 238 / 30%); } main { width: min(1080px, calc(100% - 2rem)); margin: clamp(2rem, 6vh, 5rem) auto 4rem; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: 0 10px 30px rgb(0 0 0 / 18%); } .auth-card { max-width: 560px; margin: auto; }
h1 { font-size: clamp(2rem, 6vw, 4rem); line-height: .98; letter-spacing: -.055em; margin: var(--space-2) 0 var(--space-4); } h2 { font-size: 1.2rem; margin: 0 0 var(--space-2); } h3 { margin: 0 0 var(--space-2); } .lede { color: var(--color-text-muted); line-height: 1.65; max-width: 65ch; } .mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin: var(--space-5) 0 var(--space-4); border: 1px solid var(--color-border); border-radius: 10px; padding: .25rem; } .mode { border: 0; border-radius: 7px; padding: .7rem; background: transparent; color: var(--color-text-muted); } .mode.active { background: var(--color-primary); color: var(--color-primary-foreground); font-weight: 800; }
form { display: grid; gap: var(--space-3); } label { display: grid; gap: var(--space-1); } input, select { width: 100%; min-height: 44px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface-elevated); color: var(--color-text); padding: .7rem .85rem; } input:focus, select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgb(34 211 238 / 18%); outline: none; } .primary, .secondary { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: .65rem .9rem; font-weight: 800; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease; } .primary { border: 1px solid var(--color-primary); color: var(--color-primary-foreground); background: var(--color-primary); } .primary:hover { background: var(--color-primary-hover); } .secondary { color: var(--color-text); background: var(--color-surface-elevated); border: 1px solid var(--color-border); } .secondary:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); } button:active { transform: translateY(1px); } button:disabled { color: var(--color-text-disabled); opacity: .65; cursor: not-allowed; }
.message { color: var(--color-danger-hover); min-height: 1.2rem; margin: 0; font-size: .9rem; } .message.success { color: var(--color-success); } .account-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: var(--space-5); } .badge, .status-badge, .race-badge { width: fit-content; display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--color-border); padding: .35rem .55rem; border-radius: 999px; } .status-badge { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .status-open { color: var(--color-primary); background: rgb(34 211 238 / 12%); border-color: rgb(34 211 238 / 36%); } .status-closing { color: var(--color-warning); background: var(--color-warning-muted); border-color: rgb(251 113 133 / 36%); } .status-locked, .status-pending, .status-display { color: var(--color-locked); background: rgb(124 137 155 / 10%); } .status-public { color: var(--color-public); background: var(--color-public-muted); border-color: rgb(167 139 250 / 36%); } .status-completed { color: var(--color-success); background: var(--color-success-muted); border-color: rgb(34 197 94 / 36%); }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } .subcard, .group-card { align-content: start; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: 12px; padding: var(--space-4); } .group-card { transition: background 160ms ease, border-color 160ms ease; } .group-card:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); } .checkbox-label { display: flex; align-items: center; gap: .65rem; text-transform: none; letter-spacing: normal; font: inherit; } .checkbox-label input { width: auto; } .code-output { display: block; min-height: 2rem; color: var(--color-success); overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .group-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); } .group-meta { margin: .3rem 0; color: var(--color-text-muted); font-size: .88rem; line-height: 1.55; } .event-statuses { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--space-3) 0; } .prediction-form { margin-top: var(--space-4); } .selection-count { color: var(--color-primary); font-weight: 750; font-variant-numeric: tabular-nums; margin: 0; }
.player-choice { align-items: center; grid-template-columns: auto auto 1fr; padding: .7rem; border: 1px solid var(--color-border); border-left: 3px solid var(--race-color, var(--color-random)); border-radius: 9px; background: var(--color-surface); color: var(--color-text); text-transform: none; letter-spacing: normal; font: inherit; min-height: 52px; } .player-choice:has(input:checked) { border-color: var(--color-primary); border-left-color: var(--color-primary); background: rgb(34 211 238 / 10%); box-shadow: 0 0 0 1px rgb(34 211 238 / 26%); } .player-choice:has(input:checked)::after { content: "Selected"; color: var(--color-primary); font-size: .72rem; font-weight: 800; text-transform: uppercase; } .player-choice input { width: auto; accent-color: var(--color-primary); } .avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; border: 1px solid var(--race-color, var(--color-border)); } .race-badge { margin-left: .4rem; font-size: .72rem; font-weight: 800; } .race-terran { --race-color: var(--color-terran); color: var(--color-terran); background: var(--color-terran-muted); border-color: rgb(77 163 255 / 36%); } .race-protoss { --race-color: var(--color-protoss); color: var(--color-protoss); background: var(--color-protoss-muted); border-color: rgb(101 229 114 / 36%); } .race-zerg { --race-color: var(--color-zerg); color: var(--color-zerg); background: var(--color-zerg-muted); border-color: rgb(214 107 255 / 36%); } .race-random { --race-color: var(--color-random); color: var(--color-random); background: var(--color-random-muted); }
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-2); align-items: center; } .matchup .player-choice { grid-template-columns: auto auto 1fr; } .vs { color: var(--color-text-subtle); font: 800 .8rem ui-monospace, monospace; } .public-predictions { margin: 0; padding-left: 1.25rem; color: var(--color-text-muted); line-height: 1.7; } .table-wrap { overflow-x: auto; margin-top: var(--space-4); } table { width: 100%; border-collapse: collapse; min-width: 620px; } th, td { padding: .8rem; border-bottom: 1px solid var(--color-border); text-align: left; } th { color: var(--color-text-muted); } .rank-1 td:first-child { color: var(--color-first); font-weight: 900; } .rank-2 td:first-child { color: var(--color-second); font-weight: 900; } .rank-3 td:first-child { color: var(--color-third); font-weight: 900; } .current-user { box-shadow: inset 3px 0 var(--color-primary); background: rgb(34 211 238 / 7%); } footer { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0; text-align: center; } [hidden] { display: none !important; }
@media (max-width: 720px) { .site-header { align-items: flex-start; flex-direction: column; } .top-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .15rem; } main { margin-top: 2rem; } .admin-grid, .matchup { grid-template-columns: 1fr; } .vs { text-align: center; } .group-card { padding: var(--space-3); } table { min-width: 0; } .table-wrap { overflow: visible; } table thead { display: none; } table, tbody, tr, td { display: block; } tr { border: 1px solid var(--color-border); border-radius: 9px; margin-bottom: .7rem; } td { border: 0; padding: .38rem .65rem; } td:first-child { padding-top: .65rem; } td:last-child { padding-bottom: .65rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }