/* app/static/hub/hub.css — command-console aesthetic, matching the game apps. */
:root { --bg:#0b0e14; --panel:#121722; --ink:#e6edf3; --muted:#8b98a9; --accent:#36e0a6; --line:#1e2633; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
header { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
header h1 { margin:0; font-size:1.25rem; letter-spacing:.04em; }
#total-watchers { color:var(--muted); }
main { max-width:980px; margin:0 auto; padding:1.25rem; display:grid; gap:1.5rem; }
#game-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.75rem; }
.game-card { display:block; padding:.85rem 1rem; background:var(--panel); border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); }
.game-card.up { border-left:3px solid var(--accent); }
.game-card.down { opacity:.6; }
.game-name { font-weight:600; }
.game-stat { color:var(--muted); font-size:.85rem; }
h2 { font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0 0 .5rem; }
.live-row { display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; background:var(--panel); border:1px solid var(--line); border-radius:8px; margin-bottom:.4rem; text-decoration:none; color:var(--ink); }
.badge { font-size:.7rem; padding:.1rem .45rem; border-radius:999px; background:#1d2735; color:var(--accent); white-space:nowrap; }
.live-text { flex:1; }
.cd { color:var(--accent); font-variant-numeric:tabular-nums; }
.tick { display:flex; gap:.6rem; padding:.35rem 0; color:var(--muted); border-bottom:1px solid var(--line); }
.muted { color:var(--muted); }