:root{font-family:Inter,Avenir Next,sans-serif;color:#f8fafc;background:linear-gradient(180deg,#0f172a,#1e293b);--bg-top: #0f172a;--bg-bottom: #1e293b;--card: #111827;--card-line: #374151;--card-text: #f9fafb;--card-soft: #cbd5e1;--focus: #60a5fa;--focus-glow: rgba(59, 130, 246, .34);--panel: rgba(8, 17, 24, .88);--panel-strong: rgba(6, 12, 18, .96);--line: rgba(148, 163, 184, .26);--good: #86efac;--danger: #fca5a5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);overscroll-behavior:none}body{overflow:hidden}button{font:inherit}#app{position:relative;min-height:100vh;overflow:hidden}.atmosphere{position:fixed;inset:0;background:radial-gradient(circle at 10% 10%,rgba(59,130,246,.15),transparent 24%),radial-gradient(circle at 90% 8%,rgba(14,165,233,.12),transparent 22%);pointer-events:none}.eyebrow,.stat-label,.metric-label{display:block;margin:0 0 8px;color:#93c5fd;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}.tv-focus-target{outline:none}.tv-focus-target:focus-visible{border-color:var(--focus);box-shadow:0 0 0 3px #60a5fad9,0 0 0 10px var(--focus-glow);transform:scale(1.02)}.dashboard-shell{position:relative;z-index:1;width:100%;height:100vh;padding:40px}.games-section{display:flex;flex-direction:column;gap:20px;width:100%;height:100%}.header{display:flex;justify-content:space-between;align-items:center;gap:24px}.header h1{margin:6px 0 0;font-size:clamp(2rem,2.2vw,2.6rem);font-weight:700;color:#f8fafc}.arrow-box{display:flex;gap:12px;align-items:center}.arrow-btn{width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;border:1px solid #374151;background:#1e2e4a;color:#cbd5e1}.arrow-right{background:#1d4ed8;border-color:#3b82f6;color:#fff}.grid{display:flex;flex-direction:column;gap:20px;flex:1;min-height:0}.row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;flex:1;min-height:0}.card{appearance:none;width:100%;min-width:0;min-height:0;padding:14px;border-radius:14px;border:1px solid var(--card-line);background:var(--card);display:flex;flex-direction:column;gap:10px;align-items:stretch;text-align:left;color:inherit;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.card:hover{transform:scale(1.01);box-shadow:0 12px 28px #00000047}.card-thumbnail{position:relative;flex:1;min-height:0;border-radius:14px;overflow:hidden}.card-badge{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;background:#0f172ad9;color:#e0f2fe;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.card-badge-muted{color:#cbd5e1}.card-title{font-size:1.25rem;font-weight:700;color:var(--card-text)}.card-subtitle{font-size:.9rem;color:var(--card-soft)}.card-subtitle-featured{color:#93c5fd}.card-playable{border-color:#3b82f6;box-shadow:inset 0 0 0 1px #3b82f63d}.thumb-courier{background:radial-gradient(circle at 30% 30%,rgba(125,211,252,.2),transparent 24%),linear-gradient(165deg,#0ea5e9,#1e3a8a)}.thumb-rocket{background:linear-gradient(165deg,#0ea5e9,#1e3a8a)}.thumb-drift{background:linear-gradient(150deg,#fb7185,#7c2d12)}.thumb-tiles{background:linear-gradient(140deg,#34d399,#14532d)}.thumb-shadow{background:linear-gradient(155deg,#e11d48,#4c0519)}.thumb-cosmic{background:linear-gradient(160deg,#8b5cf6,#1e1b4b)}.thumb-forge{background:linear-gradient(145deg,#fbbf24,#78350f)}.thumb-sky{background:linear-gradient(150deg,#a78bfa,#312e81)}.thumb-pixel{background:linear-gradient(135deg,#22d3ee,#164e63)}.thumb-luna{background:linear-gradient(140deg,#ec4899,#500724)}.stage-shell{position:fixed;inset:0;z-index:20;display:none;padding:0;background:linear-gradient(180deg,#04080cd6,#04080ceb),#061018}body.stage-open .stage-shell{display:block}body.stage-open .dashboard-shell{visibility:hidden}.stage-topbar{position:relative;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:10px}.stage-control,.start-action{appearance:none;min-height:48px;padding:0 18px;border:none;border-radius:999px;background:linear-gradient(135deg,#f8fafc,#93c5fd);color:#0f172a;font-size:.92rem;font-weight:700;cursor:pointer}.stage-label{display:grid;justify-items:end}.stage-label strong{font-size:.95rem}.stage-frame{position:relative;height:100vh;overflow:hidden;background:linear-gradient(180deg,#060c12b8,#060c124d),#061018}#game-root,#game-root canvas{display:block;width:100%;height:100%}#hud{position:absolute;inset:0;z-index:5;display:grid;grid-template-columns:repeat(2,minmax(220px,300px));grid-template-rows:auto 1fr auto;align-content:space-between;justify-content:space-between;gap:10px;padding:18px;pointer-events:none}.panel{border:1px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--panel);box-shadow:0 18px 60px #00000052;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.metric-value{margin:0;font-size:1.25rem;font-weight:700}.objective{align-self:end;justify-self:end;max-width:280px}.status-ok{color:var(--good)}.status-danger{color:var(--danger)}#overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:#03080c80}.intro{max-width:560px;padding:20px 22px;background:var(--panel-strong);pointer-events:auto}.intro h1{margin:0 0 12px;font-size:clamp(2.1rem,4vw,3.2rem)}.intro p,.intro li{color:#cbd5e1;line-height:1.55}.intro ul{padding-left:18px}@media(max-width:1100px){body{overflow:auto}.dashboard-shell{height:auto;padding:20px}.row{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-frame{height:70vh}#hud{grid-template-columns:1fr;grid-template-rows:auto auto auto}.objective{justify-self:stretch;max-width:none}}.tv-mode .stage-shell{background:#061018}.tv-mode .stage-topbar{display:none}.tv-mode .stage-frame{height:100vh}.tv-mode #hud{grid-template-columns:220px 220px;gap:8px;padding:10px 12px}.tv-mode #hud .panel{padding:10px 12px;border-radius:14px;background:#0811189e}.tv-mode .metric-grid{gap:8px}.tv-mode .metric-value{font-size:1rem}.tv-mode .metric-label,.tv-mode .eyebrow,.tv-mode .stat-label{margin-bottom:4px;font-size:.62rem}.tv-mode .objective{display:none}.tv-mode #overlay{background:#03080c2e}.tv-mode .intro{max-width:500px;padding:18px 20px}
