/* ============================================================ Blackbox Command Center, TV mode (tv.html + js/tv.js) Standalone stylesheet - main.css is NOT loaded on /tv. Tokens below are copied from main.css's :root[data-theme="dark"] palette (page/card/ink/ border/live + the one brand gradient) so the wall display reads as the same design system, just always-dark and scaled up for across-the-room legibility. Type scale uses clamp() against viewport width so the same markup works on a 1080p office TV and a 4K one. ============================================================ */ :root { color-scheme: dark; --page: #0f1013; --card: #17181c; --ink: #f2f2f3; --ink-soft: #b6bcc7; --muted: #8b93a1; --faint: #676e7a; --border: #2b2d33; --border-soft: #212327; --live: #34d399; --warn: #e2b23a; --danger: #f37272; --chip-bg: #232529; --radius-lg: 20px; --radius: 14px; --radius-sm: 10px; --grad: linear-gradient(90deg, #d95550 0%, #4a6ad9 52%, #2f9e68 100%); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: var(--page); color: var(--ink); font-family: var(--font); font-size: clamp(15px, 1.15vw, 22px); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Idle TV: js/tv.js adds .tv-cursor-hidden to after a few seconds without pointer movement. */ html.tv-cursor-hidden, html.tv-cursor-hidden * { cursor: none !important; } /* ============ Sign in ============ */ #tv-login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 600px at 20% -10%, rgba(74, 106, 217, 0.12), transparent 60%), radial-gradient(1000px 600px at 90% 110%, rgba(47, 158, 104, 0.10), transparent 60%), var(--page); z-index: 50; } #tv-login.hidden { display: none; } .tv-login-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 64px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 16px 36px rgba(0,0,0,0.48); text-align: center; } .tv-login-logo { height: 44px; } .tv-login-sub { color: var(--muted); font-size: 0.95em; } .tv-login-error { display: none; max-width: 420px; color: var(--danger); font-size: 0.85em; } .tv-login-error.show { display: block; } .tv-login-btn { margin-top: 8px; padding: 14px 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--ink); color: var(--page); font-family: var(--font-display); font-size: 1.05em; font-weight: 600; cursor: pointer; transition: background 160ms var(--ease), transform 160ms var(--ease); } .tv-login-btn:hover { background: #d8dadf; transform: translateY(-1px); } /* ============ App shell ============ */ #tv-app { display: none; height: 100vh; flex-direction: column; } #tv-app.active { display: flex; } /* ---- Top bar ---- */ .tv-topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(24px, 3vw, 56px); height: clamp(56px, 6.5vh, 88px); border-bottom: 1px solid var(--border-soft); position: relative; } /* The one brand moment, same as the app's hero hairline. */ .tv-topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: 0.55; } .tv-topbar-logo { height: clamp(20px, 2.6vh, 34px); } .tv-topbar-right { display: flex; align-items: baseline; gap: 18px; } .tv-clock { font-family: var(--font-display); font-size: 1.5em; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } .tv-clock-date { color: var(--muted); font-size: 0.95em; } .tv-live-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--live); align-self: center; animation: tv-pulse 2.4s ease-in-out infinite; } .tv-live-dot.stale { background: var(--warn); animation: none; } @keyframes tv-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.35); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } } .tv-reconnect { color: var(--warn); font-size: 0.8em; align-self: center; } /* ---- Rotating stage ---- */ .tv-stage { position: relative; flex: 1; min-height: 0; } .tv-view { position: absolute; inset: 0; padding: clamp(24px, 3.5vh, 56px) clamp(24px, 3vw, 56px); display: flex; flex-direction: column; opacity: 0; transform: translateX(28px); visibility: hidden; pointer-events: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease), visibility 0s linear 700ms; } .tv-view.is-active { opacity: 1; transform: translateX(0); visibility: visible; transition: opacity 700ms var(--ease), transform 700ms var(--ease), visibility 0s; } /* The outgoing view drifts left as the incoming one slides in from the right. */ .tv-view.is-leaving { opacity: 0; transform: translateX(-28px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---- Shared view furniture ---- */ .tv-view-head { margin-bottom: clamp(16px, 2.5vh, 36px); } .tv-view-kicker { font-size: 0.85em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .tv-view-title { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 46px); font-weight: 700; line-height: 1.15; } .tv-empty { margin: auto; color: var(--faint); font-size: 1.2em; text-align: center; } .tv-chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.7em; border-radius: 999px; background: var(--chip-bg); color: var(--ink-soft); font-size: 0.78em; font-weight: 600; white-space: nowrap; } .tv-game-dot { width: 0.55em; height: 0.55em; border-radius: 50%; flex-shrink: 0; } .tv-num { font-variant-numeric: tabular-nums; } /* ============ Hero chart (shared by overview + spotlight) ============ Edge-to-edge multi-series area+line chart. SVG carries the plot (grid, gradient-filled areas, glowing lines, optional peak dot); grid/peak *labels* are plain HTML positioned with the same top%/left% math so text stays crisp instead of riding the SVG's non-uniform viewBox scale. */ .tv-hero-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: clamp(4px, 1vh, 14px); } .tv-hero-plot { position: relative; flex: 1; min-height: 0; } .tv-hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .tv-hero-grid { stroke: var(--border-soft); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.8; } .tv-hero-grid--base { stroke: var(--border); opacity: 1; } /* Draw-in: every stroke ships with pathLength="1", so dasharray/dashoffset of 1 hides it regardless of real geometry. Activating the parent view transitions the offset to 0 - a pure CSS reveal, staggered per series via --tvi. prefers-reduced-motion already zeroes all transitions globally. */ .tv-hero-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1500ms var(--ease); transition-delay: calc(var(--tvi, 0) * 90ms); } .tv-view.is-active .tv-hero-line { stroke-dashoffset: 0; } .tv-hero-area { opacity: 0; transition: opacity 900ms var(--ease); transition-delay: calc(var(--tvi, 0) * 90ms); } .tv-view.is-active .tv-hero-area { opacity: 1; } .tv-hero-peak-dot { opacity: 0; transition: opacity 500ms var(--ease) 1400ms; } .tv-view.is-active .tv-hero-peak-dot { opacity: 1; } .tv-hero-grid-labels { position: absolute; inset: 0; pointer-events: none; } .tv-hero-grid-label { position: absolute; left: 2px; transform: translateY(-100%); padding-bottom: 5px; font-size: clamp(11px, 0.85vw, 15px); font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; /* Gridlines cross under colorful area fills - a tight dark shadow keeps the numbers readable wherever they land, without a boxy backdrop chip. */ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7); } .tv-hero-peak-label { position: absolute; transform: translate(-50%, calc(-100% - 12px)); display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: 0; transition: opacity 500ms var(--ease) 1500ms; pointer-events: none; white-space: nowrap; } .tv-view.is-active .tv-hero-peak-label { opacity: 1; } .tv-hero-peak-kicker { font-size: clamp(10px, 0.75vw, 13px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7); } .tv-hero-peak-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.3vw, 24px); color: var(--ink); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7); } .tv-hero-axis { display: flex; justify-content: space-between; flex-shrink: 0; margin-top: clamp(8px, 1.2vh, 16px); color: var(--muted); font-size: clamp(12px, 0.95vw, 16px); font-variant-numeric: tabular-nums; } /* First/last labels sit flush with the chart's edges (edge-to-edge x-axis); nudge them inward slightly so the glyphs don't clip the viewport. */ .tv-hero-axis span:first-child { text-align: left; } .tv-hero-axis span:last-child { text-align: right; } /* ============ View 1: all-games overview ============ */ .tv-overview-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.05em 0.55em; flex-shrink: 0; } .tv-overview-total-num { font-family: var(--font-display); font-size: clamp(48px, 6vw, 118px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .tv-overview-total-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-size: clamp(14px, 1.3vw, 24px); } /* Live counts as a clean horizontal strip - big number, dot + name under it, no card chrome. Wraps to a second row rather than squeezing. */ .tv-strip { display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 40px) clamp(22px, 2.8vw, 56px); margin-top: clamp(16px, 2.4vh, 30px); padding-bottom: clamp(14px, 2vh, 26px); border-bottom: 1px solid var(--border-soft); flex-shrink: 0; } .tv-strip-item { display: flex; flex-direction: column; gap: 0.3em; min-width: 0; } .tv-strip-num { font-family: var(--font-display); font-size: clamp(26px, 2.4vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -0.01em; } .tv-strip-num--empty { color: var(--faint); font-weight: 600; } .tv-strip-name { display: flex; align-items: center; gap: 0.45em; color: var(--ink-soft); font-size: clamp(12px, 0.95vw, 17px); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .tv-strip-name-text { max-width: clamp(140px, 11vw, 260px); overflow-wrap: anywhere; } /* ============ View: live players (card grid, restored 3c453b8) ============ The pre-hero-chart overview - kept as its own rotation slot alongside the hero chart above, not replaced by it. One card per game: count, name + dot, playing-now/24h-peak sub-line, small sparkline. */ .tv-spark { display: block; width: 100%; height: 100%; } .tv-overview-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 21vw, 420px), 1fr)); gap: clamp(14px, 1.6vw, 28px); align-content: start; } .tv-game-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 1.8vw, 30px); display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .tv-game-card-name { display: flex; align-items: flex-start; gap: 0.45em; flex-shrink: 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 40px); font-weight: 700; line-height: 1.15; color: var(--ink); } /* Dot optically centers on the first line: (1.15em line - 0.55em dot) / 2. */ .tv-game-card-name .tv-game-dot { margin-top: 0.3em; } /* Long names wrap to two lines, then ellipsize — never clip to nothing. */ .tv-game-card-name-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; } .tv-game-card-count { font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 88px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; flex-shrink: 0; } .tv-game-card-count.no-data { color: var(--faint); font-size: clamp(22px, 2vw, 36px); font-weight: 600; } .tv-game-card-sub { color: var(--muted); font-size: 0.85em; flex-shrink: 0; } /* min-height 0 lets a squeezed grid row compress the sparkline (the svg is preserveAspectRatio: none, so it scales) instead of clipping the card. */ .tv-game-card-spark { height: clamp(44px, 6vh, 84px); min-height: 0; margin-top: auto; } /* ============ View 2: game spotlight ============ */ .tv-spotlight-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px clamp(24px, 4vw, 64px); flex-shrink: 0; } .tv-spotlight-name { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 48px); font-weight: 700; } .tv-spotlight-count-wrap { display: flex; align-items: baseline; gap: 0.4em; } .tv-spotlight-count { font-family: var(--font-display); font-size: clamp(64px, 7.5vw, 150px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .tv-spotlight-count.no-data { color: var(--faint); font-size: clamp(28px, 3vw, 56px); font-weight: 600; } .tv-spotlight-sub { color: var(--muted); font-size: clamp(14px, 1.2vw, 22px); } .tv-hero-chart--spotlight { margin-top: clamp(14px, 2.2vh, 30px); } /* ============ View 3: board pulse ============ */ .tv-board-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 28px); } .tv-board-tile { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px, 2vw, 34px); overflow: hidden; } /* Same brand hairline as the topbar - ties the tiles into the wall's one accent moment instead of sitting as plain flat cards. */ .tv-board-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad); opacity: 0.4; } .tv-board-tile.done::before { opacity: 0.7; } .tv-board-tile-label { font-size: 0.9em; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .tv-board-tile-count { font-family: var(--font-display); font-size: clamp(48px, 5.4vw, 110px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; } .tv-board-tile.done .tv-board-tile-count { color: var(--live); } .tv-board-recent { margin-top: clamp(20px, 3.5vh, 48px); } .tv-board-recent-label { font-size: 0.85em; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } .tv-done-row { display: flex; align-items: center; gap: 1em; padding: clamp(12px, 1.6vh, 22px) 0; border-top: 1px solid var(--border-soft); font-size: clamp(17px, 1.5vw, 28px); } .tv-done-check { color: var(--live); flex-shrink: 0; display: inline-flex; } .tv-done-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-done-who { color: var(--muted); flex-shrink: 0; margin-left: auto; } /* ============ View 4: work log ============ */ .tv-worklog-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; } .tv-worklog-row { display: flex; align-items: center; gap: 1em; padding: clamp(12px, 1.8vh, 24px) 0; border-top: 1px solid var(--border-soft); font-size: clamp(16px, 1.4vw, 26px); } .tv-worklog-row:first-child { border-top: none; } .tv-worklog-avatar { flex-shrink: 0; width: 2em; height: 2em; border-radius: 50%; background: var(--chip-bg); color: var(--ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: 700; } .tv-worklog-body { min-width: 0; flex: 1; } .tv-worklog-who { font-weight: 700; margin-right: 0.5em; } .tv-worklog-text { color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tv-worklog-when { color: var(--faint); flex-shrink: 0; font-size: 0.8em; }