/* ================================================================= Vespene — Home (frontpage) REDESIGN Drop-in for the dashboard/home tab. Built on the EXISTING system: same tokens, fonts and primitives as css/dashboard.css (.btn / .pill / .panel / .race-letter / .wl). Selectors are scoped under #page-home — rename to #page-dashboard to land it in the app. The redesign applies the review fixes: • one primary action per surface, curation/secondary demoted • one play button, one pill system, one segmented-control style • neutral player names (race lives in a chip) • single status signal (pill only — no double-encoded borders) • grouped header status vs controls, decoded streak • clamped/aligned cards, consistent eyebrows ================================================================= */ /* ---------------- Tokens (mirrors dashboard.css) ---------------- */ #page-home { --bg-0:#0b0d11; --bg-1:#10141a; --bg-2:#161b22; --bg-3:#1d232c; --bg-4:#252c36; --line:#242b35; --line-soft:#1a1f27; --line-strong:#2f3742; --fg-0:#f4f6fa; --fg-1:#d8dde6; --fg-2:#9aa3b2; --fg-3:#6b7280; --fg-4:#4a525e; --accent:#56c2ff; --accent-2:#2da8ec; --accent-glow:rgba(86,194,255,.18); --accent-soft:rgba(86,194,255,.08); --accent-line:rgba(86,194,255,.32); --terran:#4d8bff; --protoss:#ffc857; --zerg:#b57bff; --win:#4ade80; --loss:#f87171; --warn:#facc15; --gas:#4ade80; --gap:18px; --rad:4px; --rad-lg:6px; --radius-lg:8px; --font-display:'Rajdhani', system-ui, sans-serif; --font-body:'Inter', system-ui, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; font-family:var(--font-body); color:var(--fg-1); min-height:100vh; background: radial-gradient(1200px 600px at 18% -10%, var(--accent-glow), transparent 60%), radial-gradient(900px 500px at 90% 110%, rgba(86,194,255,.04), transparent 65%), var(--bg-0); } /* ---------------- Primitives (from dashboard.css) ---------------- */ #page-home .eyebrow { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--fg-3); } #page-home .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 15px; background:var(--bg-3); border:1px solid var(--line-strong); color:var(--fg-1); font:600 12px var(--font-display); text-transform:uppercase; letter-spacing:.1em; border-radius:var(--rad); cursor:pointer; transition:all .15s ease; text-decoration:none; white-space:nowrap; } #page-home .btn:hover { border-color:var(--accent-line); color:var(--fg-0); } #page-home .btn.primary { background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#07111a; border-color:transparent; box-shadow:0 0 0 1px var(--accent), 0 8px 24px -10px var(--accent-glow); } #page-home .btn.primary:hover { filter:brightness(1.06); } #page-home .btn.ghost { background:transparent; border-color:var(--line); } #page-home .btn.tiny { padding:5px 9px; font-size:10.5px; } #page-home .pill-row { display:inline-flex; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--rad); padding:3px; gap:2px; } #page-home .pill { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border:none; background:transparent; color:var(--fg-2); font:600 11px var(--font-display); text-transform:uppercase; letter-spacing:.1em; border-radius:3px; cursor:pointer; transition:all .12s ease; } #page-home .pill:hover { color:var(--fg-1); } #page-home .pill.active { background:var(--accent-soft); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-line); } #page-home .pill svg { width:13px; height:13px; } #page-home .panel { background:linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%), var(--bg-2); border:1px solid var(--line); border-radius:var(--rad-lg); position:relative; } #page-home .race-letter { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:3px; font:700 11px var(--font-display); flex:none; } #page-home .race-T { background:rgba(77,139,255,.16); color:var(--terran); border:1px solid rgba(77,139,255,.35); } #page-home .race-P { background:rgba(255,200,87,.14); color:var(--protoss); border:1px solid rgba(255,200,87,.35); } #page-home .race-Z { background:rgba(181,123,255,.14); color:var(--zerg); border:1px solid rgba(181,123,255,.35); } #page-home .race-R { background:rgba(154,163,178,.14); color:var(--fg-2); border:1px solid rgba(154,163,178,.3); } #page-home .race-letter.sm { width:17px; height:17px; font-size:9px; border-radius:3px; } #page-home .race-letter.lg { width:40px; height:40px; font-size:15px; border-radius:8px; } #page-home .wl { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:4px; font:700 12px var(--font-display); flex:none; } #page-home .wl-W { background:rgba(74,222,128,.14); color:var(--win); border:1px solid rgba(74,222,128,.32); } #page-home .wl-L { background:rgba(248,113,113,.14); color:var(--loss); border:1px solid rgba(248,113,113,.32); } #page-home .dot { display:inline-block; width:7px; height:7px; border-radius:999px; background:var(--accent); } #page-home .dot.live { background:var(--loss); box-shadow:0 0 0 4px rgba(248,113,113,.18); animation:hp-pulse 1.6s ease-in-out infinite; } @keyframes hp-pulse { 0%,100%{ box-shadow:0 0 0 4px rgba(248,113,113,.18);} 50%{ box-shadow:0 0 0 7px rgba(248,113,113,.04);} } /* ================================================================= Layout shell ================================================================= */ #page-home .home { max-width:1480px; margin:0 auto; padding:26px 32px 64px; display:flex; flex-direction:column; gap:34px; } #page-home .hp-section { display:flex; flex-direction:column; gap:14px; } /* Section header lockup: / LABEL ............ actions */ #page-home .hp-sec-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } #page-home .hp-eyebrow { display:inline-flex; align-items:baseline; gap:9px; } #page-home .hp-eyebrow .sl { color:var(--accent); font:700 13px var(--font-mono); letter-spacing:0; } #page-home .hp-eyebrow .lbl { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.18em; font-size:13px; color:var(--fg-1); white-space:nowrap; } #page-home .hp-eyebrow .cnt { font:500 12px var(--font-mono); color:var(--fg-3); } #page-home .hp-sec-actions { display:inline-flex; align-items:center; gap:14px; } #page-home .hp-link { display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; font:600 11px var(--font-display); text-transform:uppercase; letter-spacing:.1em; color:var(--accent); text-decoration:none; } #page-home .hp-link:hover { color:var(--fg-0); } #page-home .hp-link svg { width:13px; height:13px; } /* ================================================================= 1 · Header — welcome / status / controls (fixes 1–5) ================================================================= */ #page-home .hp-header { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } #page-home .hp-welcome { display:flex; flex-direction:column; align-items:flex-start; } #page-home .hp-kicker { display:inline-flex; align-items:baseline; gap:8px; margin-bottom:6px; } #page-home .hp-kicker .sl { color:var(--accent); font:700 12px var(--font-mono); } #page-home .hp-kicker .lbl { font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); } #page-home .hp-title { margin:0; font-family:var(--font-display); font-weight:700; font-size:30px; line-height:1.06; letter-spacing:.01em; color:var(--fg-0); white-space:nowrap; } #page-home .hp-title .accent { color:var(--accent); } #page-home .hp-date { margin-top:8px; font-size:12.5px; color:var(--fg-3); } #page-home .hp-header-right { display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:flex-end; } #page-home .hp-status { display:inline-flex; align-items:center; gap:14px; padding:7px 15px; border:1px solid var(--line); background:rgba(255,255,255,.02); border-radius:var(--rad-lg); } #page-home .hp-stat { display:inline-flex; align-items:center; gap:8px; } #page-home .hp-stat .ic { display:inline-grid; place-items:center; } #page-home .hp-stat-txt { display:flex; flex-direction:column; line-height:1.05; } #page-home .hp-stat-val { font:700 17px var(--font-display); color:var(--fg-0); } #page-home .hp-stat-val.gas { color:var(--gas); } #page-home .hp-stat-val .u { color:var(--fg-3); font-size:13px; } #page-home .hp-stat-label { font:500 9px var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-top:2px; } #page-home .hp-vline { width:1px; height:26px; background:var(--line); } #page-home .hp-ctrl-divider { width:1px; height:34px; background:var(--line); } #page-home .hp-controls { display:inline-flex; align-items:center; gap:10px; } #page-home .btn.icon { padding:0; width:40px; height:40px; } #page-home .btn .nd { width:6px; height:6px; border-radius:999px; background:var(--accent); } /* ================================================================= 2 · Hero row — Continue analysis + Featured event (fixes 11–18) ================================================================= */ #page-home .hp-hero { display:grid; grid-template-columns:1.65fr 1fr; gap:18px; align-items:stretch; } /* Continue-analysis carousel card */ #page-home .hp-continue { position:relative; min-height:326px; border-radius:var(--rad-lg); overflow:hidden; border:1px solid var(--line); } #page-home .hp-continue-media { position:absolute; inset:0; background-size:cover; background-position:center; } #page-home .hp-continue-scrim { position:absolute; inset:0; background: linear-gradient(0deg, rgba(8,11,17,.94), transparent 52%), linear-gradient(180deg, rgba(8,11,17,.72), transparent 30%), radial-gradient(135% 105% at 50% 46%, rgba(8,11,17,.2), rgba(8,11,17,.72)), linear-gradient(90deg, rgba(8,11,17,.45), transparent 26%, transparent 74%, rgba(8,11,17,.45)); } #page-home .hp-continue-tint { position:absolute; inset:0; mix-blend-mode:screen; opacity:.85; pointer-events:none; } #page-home .hp-continue-top { position:absolute; top:18px; left:20px; right:16px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } #page-home .hp-continue-label .k { display:inline-flex; align-items:baseline; gap:7px; font:700 10px var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); } #page-home .hp-continue-label .k .t { color:#a9d9ff; } #page-home .hp-continue-label .sub { margin-top:4px; font:700 15px var(--font-display); color:var(--fg-2); } #page-home .hp-mapchip { text-align:right; padding:7px 12px; border-radius:var(--rad); background:rgba(0,0,0,.42); border:1px solid var(--line); } #page-home .hp-mapchip .m { font:700 15px var(--font-display); color:var(--fg-0); white-space:nowrap; } #page-home .hp-mapchip .t { margin-top:2px; font:400 10.5px var(--font-mono); color:var(--fg-2); } #page-home .hp-continue-mid { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); } /* Centered VS face-off */ #page-home .hp-faceoff { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; gap:24px; padding:0 26px; } #page-home .hp-fo-glow { position:absolute; left:50%; top:50%; width:380px; height:210px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, var(--accent-soft), transparent 78%); pointer-events:none; } #page-home .hp-fo-side { flex:1; display:flex; align-items:center; gap:16px; min-width:0; position:relative; } #page-home .hp-fo-side.left { justify-content:flex-end; text-align:right; } #page-home .hp-fo-side.right { justify-content:flex-start; text-align:left; } #page-home .hp-fo-col { flex:none; } #page-home .hp-fo-name { font:700 27px var(--font-display); color:var(--fg-0); line-height:1; letter-spacing:.01em; text-shadow:0 2px 14px rgba(0,0,0,.65); white-space:nowrap; } #page-home .hp-fo-mmr { margin-top:6px; font:500 12px var(--font-mono); color:var(--fg-1); letter-spacing:.04em; } #page-home .hp-fo-bar { display:block; height:3px; width:46px; border-radius:2px; background:var(--win); margin:7px 0 1px; box-shadow:0 0 12px rgba(74,222,128,.6); } #page-home .hp-fo-side.left .hp-fo-bar { margin-left:auto; } #page-home .hp-fo-side.right .hp-fo-bar { margin-right:auto; } #page-home .hp-fo-side.win .hp-fo-name { text-shadow:0 0 24px rgba(74,222,128,.3), 0 2px 14px rgba(0,0,0,.65); } #page-home .hp-fo-race { width:56px; height:56px; border-radius:13px; display:grid; place-items:center; font:700 21px var(--font-display); flex:none; } #page-home .hp-fo-race.race-T { background:rgba(77,139,255,.2); color:var(--terran); border:1px solid rgba(77,139,255,.55); box-shadow:0 0 28px -4px rgba(77,139,255,.6), inset 0 0 14px rgba(77,139,255,.12); } #page-home .hp-fo-race.race-P { background:rgba(255,200,87,.18); color:var(--protoss); border:1px solid rgba(255,200,87,.55); box-shadow:0 0 28px -4px rgba(255,200,87,.55), inset 0 0 14px rgba(255,200,87,.12); } #page-home .hp-fo-race.race-Z { background:rgba(181,123,255,.2); color:var(--zerg); border:1px solid rgba(181,123,255,.55); box-shadow:0 0 28px -4px rgba(181,123,255,.6), inset 0 0 14px rgba(181,123,255,.12); } #page-home .hp-fo-race.race-R { background:rgba(154,163,178,.18); color:var(--fg-1); border:1px solid rgba(154,163,178,.5); } #page-home .hp-fo-vs { position:relative; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font:800 14px var(--font-mono); letter-spacing:.06em; color:#cdebff; flex:none; background:radial-gradient(circle at 50% 40%, rgba(86,194,255,.18), rgba(8,11,17,.74)); border:1px solid var(--accent-line); box-shadow:0 0 28px -6px var(--accent-glow), inset 0 0 0 4px rgba(8,11,17,.5); } #page-home .hp-fo-vs::before, #page-home .hp-fo-vs::after { content:''; position:absolute; top:50%; width:24px; height:1px; background:linear-gradient(90deg, transparent, var(--accent-line)); } #page-home .hp-fo-vs::before { right:100%; margin-right:13px; } #page-home .hp-fo-vs::after { left:100%; margin-left:13px; transform:scaleX(-1); } @media (max-width:560px) { #page-home .hp-fo-name { font-size:20px; } #page-home .hp-fo-race { width:44px; height:44px; font-size:17px; } #page-home .hp-faceoff { gap:14px; padding:0 14px; } } #page-home .hp-matchup { display:inline-flex; align-items:center; gap:16px; } #page-home .hp-player { display:inline-flex; align-items:center; gap:11px; } #page-home .hp-pname { font:700 20px var(--font-display); color:var(--fg-0); line-height:1; } #page-home .hp-pmmr { font:400 11px var(--font-mono); color:var(--fg-2); margin-top:3px; } #page-home .hp-vs { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:999px; border:1px solid var(--line-strong); background:rgba(0,0,0,.35); font:700 10px var(--font-mono); color:var(--fg-2); } #page-home .hp-continue-bot { position:absolute; left:20px; right:16px; bottom:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; } #page-home .hp-cta-row { display:inline-flex; align-items:center; gap:12px; } #page-home .hp-result { display:inline-flex; align-items:center; gap:6px; font:500 11px var(--font-mono); color:var(--fg-2); } #page-home .hp-carousel { display:inline-flex; align-items:center; gap:10px; } #page-home .hp-navbtn { display:grid; place-items:center; width:30px; height:30px; border-radius:var(--rad); border:1px solid var(--line-strong); background:rgba(0,0,0,.4); color:var(--fg-1); cursor:pointer; transition:all .12s; } #page-home .hp-navbtn:hover { border-color:var(--accent-line); color:var(--accent); } #page-home .hp-dots { display:inline-flex; align-items:center; gap:6px; } #page-home .hp-dots i { width:6px; height:6px; border-radius:999px; background:rgba(255,255,255,.28); transition:all .15s; cursor:pointer; } #page-home .hp-dots i.on { width:17px; background:var(--accent); } /* Featured event */ #page-home .hp-featured { border:1px solid var(--accent-line); background:linear-gradient(180deg, var(--accent-soft), rgba(22,27,34,.6)); border-radius:var(--rad-lg); padding:16px 18px; display:flex; flex-direction:column; } #page-home .hp-feat-top { display:flex; align-items:center; gap:10px; } #page-home .hp-feat-title { margin:12px 0 0; font:700 22px var(--font-display); color:var(--fg-0); line-height:1.1; } #page-home .hp-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px; } #page-home .hp-feat-actions { display:flex; align-items:center; gap:8px; margin-top:14px; } #page-home .hp-sub { margin-top:16px; margin-bottom:8px; } #page-home .hp-minis { display:flex; flex-direction:column; gap:8px; } #page-home .hp-mini { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--rad); border:1px solid var(--line); background:var(--bg-2); } #page-home .hp-mini:hover { border-color:var(--line-strong); } #page-home .hp-mini-main { flex:1; min-width:0; } /* ================================================================= Shared card atoms (fixes 6–9, 16, 22) ================================================================= */ #page-home .hp-status-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--rad); font:700 10px var(--font-display); letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); background:var(--bg-3); color:var(--fg-2); } #page-home .hp-status-pill.upcoming { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); } #page-home .hp-status-pill.completed { background:var(--bg-3); border-color:var(--line); color:var(--fg-2); } #page-home .hp-status-pill.live { background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.35); color:var(--loss); } #page-home .hp-status-pill svg { width:11px; height:11px; } #page-home .hp-when { font:400 11px var(--font-mono); color:var(--fg-3); } #page-home .hp-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--rad); border:1px solid var(--line); background:rgba(255,255,255,.02); font:500 11px var(--font-mono); color:var(--fg-2); } #page-home .hp-chip .green { color:var(--gas); } #page-home .hp-chip svg { width:12px; height:12px; opacity:.8; } #page-home .hp-tag { display:inline-grid; place-items:center; padding:4px 8px; border-radius:var(--rad); border:1px solid var(--line-strong); background:rgba(255,255,255,.02); font:700 10px var(--font-mono); letter-spacing:.06em; color:var(--fg-2); flex:none; } #page-home .hp-thumb { width:64px; height:40px; border-radius:var(--rad); object-fit:cover; border:1px solid var(--line); flex:none; background:var(--bg-3); } #page-home .hp-thumb.sm { width:54px; height:38px; } #page-home .hp-names { display:flex; align-items:center; gap:7px; font:700 15px var(--font-display); color:var(--fg-0); min-width:0; } #page-home .hp-names .n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #page-home .hp-names .vs { color:var(--fg-3); font-weight:500; font-size:12px; } #page-home .hp-meta { margin-top:3px; font:400 11.5px var(--font-mono); color:var(--fg-2); } /* One play button + one icon button, everywhere */ #page-home .hp-play { display:grid; place-items:center; width:38px; height:38px; border-radius:var(--rad); background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#07111a; border:0; cursor:pointer; flex:none; box-shadow:0 6px 16px -8px var(--accent-glow); transition:filter .12s; } #page-home .hp-play:hover { filter:brightness(1.08); } #page-home .hp-play.sm { width:34px; height:34px; } #page-home .hp-icon-btn { display:grid; place-items:center; width:38px; height:38px; border-radius:var(--rad); border:1px solid var(--line-strong); background:transparent; color:var(--fg-2); cursor:pointer; flex:none; transition:all .12s; } #page-home .hp-icon-btn:hover { border-color:var(--accent-line); color:var(--fg-0); } #page-home .hp-icon-btn.is-active { background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent); } /* ================================================================= 3 · Live now (consistent panel + rows) ================================================================= */ #page-home .hp-live-body { display:grid; grid-template-columns:1.35fr 1fr; gap:16px; } #page-home .hp-live-feature { position:relative; border-radius:var(--rad-lg); overflow:hidden; border:1px solid var(--line); min-height:270px; background-size:cover; background-position:center; } #page-home .hp-live-feature .veil { position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,11,17,.94), transparent 58%); } #page-home .hp-live-feature .cap { position:absolute; left:16px; right:16px; bottom:14px; } #page-home .hp-live-feature .cap .nm { font:700 22px var(--font-display); color:var(--fg-0); } #page-home .hp-live-feature .cap .ti { margin-top:4px; font-size:13px; color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #page-home .hp-live-badge { position:absolute; top:14px; left:14px; } #page-home .hp-live { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:var(--rad); background:rgba(248,113,113,.14); border:1px solid rgba(248,113,113,.4); color:var(--loss); font:700 10px var(--font-display); letter-spacing:.12em; text-transform:uppercase; } #page-home .hp-count { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--rad); background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); color:var(--loss); font:700 10px var(--font-display); letter-spacing:.1em; text-transform:uppercase; } #page-home .hp-live-rows { display:flex; flex-direction:column; gap:8px; } #page-home .hp-live-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--rad); border:1px solid var(--line); background:var(--bg-2); cursor:pointer; transition:border-color .12s; } #page-home .hp-live-row:hover { border-color:var(--line-strong); } #page-home .hp-live-row .rt { width:64px; height:40px; border-radius:var(--rad); object-fit:cover; border:1px solid var(--line); flex:none; } #page-home .hp-live-row .rm { flex:1; min-width:0; } #page-home .hp-live-row .rn { display:flex; align-items:center; gap:7px; font:700 14px var(--font-display); color:var(--fg-0); } #page-home .hp-live-row .rti { margin-top:2px; font-size:12px; color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #page-home .hp-gamebadge { display:inline-grid; place-items:center; padding:2px 6px; border-radius:3px; font:700 9px var(--font-mono); letter-spacing:.04em; flex:none; } #page-home .hp-gamebadge.sc2 { background:rgba(86,194,255,.12); color:var(--accent); border:1px solid var(--accent-line); } #page-home .hp-gamebadge.bw { background:rgba(255,200,87,.12); color:var(--protoss); border:1px solid rgba(255,200,87,.3); } /* ================================================================= 4 · Library — My / Pro StarCraft II (fixes 6–10) ================================================================= */ #page-home .hp-lib { display:grid; grid-template-columns:1fr 1fr; gap:24px; } #page-home .hp-col { display:flex; flex-direction:column; gap:12px; } #page-home .hp-cards { display:flex; flex-direction:column; gap:10px; } #page-home .hp-rc { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--rad-lg); border:1px solid var(--line); background:var(--bg-2); transition:border-color .12s; } #page-home .hp-rc:hover { border-color:var(--line-strong); } #page-home .hp-rc-main { flex:1; min-width:0; } #page-home .hp-rc-actions { display:flex; align-items:center; gap:8px; } /* ================================================================= 5 · Tournaments (fixes 19–24) ================================================================= */ #page-home .hp-tourn { display:grid; grid-template-columns:repeat(auto-fill, minmax(244px, 1fr)); gap:16px; } #page-home .hp-tcard { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:var(--rad-lg); border:1px solid var(--line); background:var(--bg-2); transition:border-color .12s; } #page-home .hp-tcard:hover { border-color:var(--line-strong); } #page-home .hp-tcard.is-featured { box-shadow:inset 0 0 0 1px var(--accent-line); } #page-home .hp-tcard-top { display:flex; align-items:center; gap:8px; } #page-home .hp-tt { font:700 18px var(--font-display); color:var(--fg-0); line-height:1.18; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:43px; } #page-home .hp-tcard-actions { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:2px; } #page-home .hp-tcard-actions .btn { flex:1; } /* ================================================================= Responsive ================================================================= */ @media (max-width:1100px) { #page-home .hp-hero { grid-template-columns:1fr; } } @media (max-width:820px) { #page-home .hp-live-body, #page-home .hp-lib { grid-template-columns:1fr; } #page-home .hp-header { align-items:flex-start; } } /* ================================================================= Integration additions (not in the design bundle): • hp-hero--solo — hero grid when the continue carousel has no cards (logged-out + empty featured deck) so the featured column doesn't sit in a half-empty 1.65fr/1fr grid. ================================================================= */ @media (min-width:1101px) { #page-home .hp-hero.hp-hero--solo { grid-template-columns:1fr; max-width:640px; } } /* Phone-width header wrap — the bundle ships ≤1100/≤820/≤560 rules only; the project responsive contract requires a ≤767px escalation (the status + controls cluster is otherwise wider than the viewport on phones). Additive only: no bundle value changes at desktop widths. */ @media (max-width:767px) { #page-home .home { padding:18px 16px 56px; } #page-home .hp-title { white-space:normal; } #page-home .hp-header-right { justify-content:flex-start; } #page-home .hp-controls { flex-wrap:wrap; } #page-home .hp-status { flex-wrap:wrap; } #page-home .hp-ctrl-divider { display:none; } #page-home .hp-sec-actions { flex-wrap:wrap; } } /* Grid-blowout guard: grid items default to min-width:auto, so a wide min-content (segmented control + count lockup) forces horizontal scroll on narrow viewports. Inert at desktop widths. */ #page-home .hp-hero > *, #page-home .hp-live-body > *, #page-home .hp-lib > .hp-col { min-width:0; } /* Animated vespene backdrop — the bundle gives #page-home an OPAQUE background (kept as the reduced-motion/backdrop-off fallback), which buried the fixed z-index:-1 canvas. Isolate the page's stacking context and lift the canvas above the page background but under content. */ #page-home { isolation:isolate; } #page-home > .vespene-backdrop { z-index:0 !important; } #page-home .home { position:relative; z-index:1; } /* Library columns: both section heads reserve the segmented-control height so the two card stacks start on the same row; rows share one min-height. */ #page-home .hp-lib .hp-sec-head { min-height:38px; } #page-home .hp-lib .hp-rc { min-height:64px; } /* Tournaments band: event cards left, embedded month calendar right. */ #page-home .hp-tourn-band { display:grid; grid-template-columns:1.62fr 1fr; gap:18px; align-items:start; min-width:0; } #page-home .hp-tourn-band > * { min-width:0; } @media (max-width:1024px) { #page-home .hp-tourn-band { grid-template-columns:1fr; } } #page-home .hp-cal-embed { display:flex; flex-direction:column; max-height:560px; padding:4px 4px 0; } /* AI-coach shell: the legacy .home-coach body (css/home.css) inside the new section lockup; stack its two panes on phones. */ @media (max-width:767px) { #page-home .hp-coach .home-coach { grid-template-columns:1fr; } } /* Interactive header stats (vespene → Support modal, streak/weekly → detail popovers): button reset so the lockup renders identically to the static version, plus the page's standard hover affordance. */ #page-home button.hp-stat { background:none; border:0; padding:0; cursor:pointer; font:inherit; text-align:left; border-radius:var(--rad); } #page-home button.hp-stat:hover .hp-stat-label { color:var(--fg-2); } #page-home button.hp-stat:hover .hp-stat-val { color:var(--accent); } #page-home button.hp-stat:hover .hp-stat-val.gas { color:var(--gas); filter:brightness(1.15); } #page-home button.hp-stat:focus-visible { outline:2px solid var(--accent-line); outline-offset:3px; } /* Real race emblems / game crests inside the bundle's chips: the game badge gains a crest before its label (flex, not the bundle's inline-grid which would stack them), and emblem imgs center inside the race chip boxes. */ #page-home .hp-gamebadge { display:inline-flex; align-items:center; gap:4px; } #page-home .race-letter .home-race-ico, #page-home .hp-fo-race .home-race-ico { display:inline-flex; } /* Tournament cards: whole card is the click target; admin pin top-right, quiet accent link bottom-right of the chips row (no actions row → ~25% shorter card). Hover follows the page convention: border lifts, link brightens. */ #page-home .hp-tcard { cursor:pointer; } #page-home .hp-tcard-top .hp-icon-btn { margin-left:auto; width:26px; height:26px; } #page-home .hp-tcard-foot { margin-top:auto; padding-top:2px; align-items:center; } #page-home .hp-tcard-foot .hp-link { margin-left:auto; } #page-home .hp-tcard:hover .hp-link { color:var(--fg-0); } /* "Pick up where you left off" tiles (Notes / Lessons / Stardex) — the old training strip restyled to the redesign's card vocabulary. */ #page-home .hp-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; } #page-home .hp-tile { display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:var(--rad-lg); border:1px solid var(--line); background:var(--bg-2); cursor:pointer; transition:border-color .12s; } #page-home .hp-tile:hover { border-color:var(--line-strong); } #page-home .hp-tile:hover .hp-link { color:var(--fg-0); } #page-home .hp-tile-head { display:flex; align-items:center; gap:9px; } #page-home .hp-tile-ico { font-size:16px; line-height:1; } #page-home .hp-tile-name { font:700 18px var(--font-display); color:var(--fg-0); } #page-home .hp-tile-head .hp-tile-pill { margin-left:auto; } #page-home .hp-tile-body { font:400 12.5px/1.5 var(--font-body); color:var(--fg-2); } #page-home .hp-tile-foot { margin-top:auto; padding-top:2px; display:flex; } #page-home .hp-tile-foot .hp-link { margin-left:auto; } /* Home settings panel (☀ gear): layout customization + the legacy animated-backdrop controls (.home-bdctl styles live in css/home.css). */ /* z-layers from the app tokens — the sticky app header sits at --z-sticky (100), so lower values get the panel's top carved off. */ #page-home .hp-settings-scrim { position:fixed; inset:0; z-index:var(--z-dropdown, 1000); } #page-home .hp-settings { position:fixed; top:64px; right:24px; width:360px; max-height:calc(100vh - 90px); z-index:calc(var(--z-dropdown, 1000) + 1); display:flex; flex-direction:column; gap:14px; padding:16px 17px; overflow-y:auto; background:var(--bg-1); border:1px solid var(--line-strong); border-radius:var(--radius-lg); box-shadow:0 30px 70px -20px rgba(0,0,0,.75); } #page-home .hp-settings-head { display:flex; align-items:center; justify-content:space-between; } #page-home .hp-settings-title { font:700 17px var(--font-display); color:var(--fg-0); letter-spacing:.02em; } #page-home .hp-settings-x { width:26px; height:26px; display:grid; place-items:center; background:transparent; border:0; border-radius:var(--rad); color:var(--fg-2); cursor:pointer; } #page-home .hp-settings-x:hover { color:var(--fg-0); background:rgba(255,255,255,.06); } #page-home .hp-settings-sec { display:flex; flex-direction:column; gap:9px; padding-top:12px; border-top:1px solid var(--line); } #page-home .hp-settings-sec:first-of-type { border-top:0; padding-top:0; } #page-home .hp-settings-lbl { font:600 10px var(--font-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); } #page-home .hp-settings-hint { font:400 11.5px/1.45 var(--font-body); color:var(--fg-3); } #page-home .hp-settings-hidden { display:flex; flex-wrap:wrap; gap:6px; } @media (max-width:767px) { #page-home .hp-settings { left:8px; right:8px; width:auto; top:56px; } } /* Customize mode: sections outline + drag affordance + hide button. */ #page-home .home.is-customize [data-slot] { position:relative; } #page-home .home.is-customize [data-slot][draggable="true"] { outline:1px dashed var(--accent-line); outline-offset:6px; cursor:grab; } #page-home .home.is-customize [data-slot].is-dragging { opacity:.45; } #page-home .hp-sec-hide { position:absolute; top:-4px; right:-4px; z-index:6; padding:5px 9px; border-radius:var(--rad); border:1px solid rgba(248,113,113,.4); background:rgba(20,8,10,.85); color:var(--loss); font:600 10px var(--font-display); letter-spacing:.08em; text-transform:uppercase; cursor:pointer; } #page-home .hp-sec-hide:hover { background:rgba(248,113,113,.18); }