/* TV mode — activated via [data-tv="true"] on . Hides all chrome, blows up the countdown to fill the screen. */ [data-tv="true"] .topbar, [data-tv="true"] .info-grid, [data-tv="true"] footer.site-footer, [data-tv="true"] .hero-image, [data-tv="true"] .venue-crowd, [data-tv="true"] .hero-hint { display: none !important; } [data-tv="true"] .content { max-width: none; padding: 0; height: 100vh; display: flex; align-items: center; justify-content: center; } [data-tv="true"] .hero-card { box-shadow: none; clip-path: none; background: transparent; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } [data-tv="true"] .hero-figure { aspect-ratio: auto; max-height: none; height: 100vh; width: 100%; } [data-tv="true"] .venue-scene { filter: brightness(0.55) saturate(1.1); } /* hero-image (the hidden SEO/no-js fallback img) stays hidden in TV mode, but hero-sprite itself is repositioned into a small corner badge further below rather than hidden — see that rule for why. The rig here just becomes a plain full-stage positioning box for the countdown overlay. */ [data-tv="true"] .hero-rig { position: static; width: min(96vw, 1400px); aspect-ratio: auto; transform: none; cursor: default; } [data-tv="true"] .hero-overlay { position: static; width: 100%; height: auto; gap: 18px; } /* The rikishi still stands somewhere on a TV — just small, out of the way of the giant countdown, rather than hidden entirely. #heroSprite is pulled out of the (now full-screen, static) hero-rig's flow with position:fixed so it doesn't affect that layout; the idle-sheet/blink behaviour from hero.js keeps working unchanged since the same element and classes are still in play, just repositioned/resized here. */ [data-tv="true"] .hero-sprite { position: fixed; inset: auto auto 24px 24px; width: min(11vw, 150px); height: auto; aspect-ratio: 3 / 4; z-index: 60; opacity: 0.92; } [data-tv="true"] .flip-card { font-size: clamp(48px, 12vw, 180px); padding: 12px 20px; border-radius: 16px; } [data-tv="true"] .clock-sep { font-size: clamp(24px, 6vw, 90px); } [data-tv="true"] .clock-label { font-size: clamp(12px, 1.6vw, 22px); } [data-tv="true"] .eyebrow { font-size: clamp(14px, 2vw, 26px); } [data-tv="true"] .basho-name { font-size: clamp(18px, 3vw, 40px); } [data-tv="true"] .basho-meta { font-size: clamp(12px, 1.6vw, 20px); } .tv-exit-button { position: fixed; bottom: 18px; right: 18px; z-index: 70; } [data-tv="true"] .tv-exit-button { display: inline-flex; } .tv-exit-button { display: none; }