html, body { overflow-x: hidden; }
.tv-body {
    min-height: 100vh; margin: 0; background: #05060a; padding-bottom: 90px; box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #f5f6f8;
}
#tv-ticker-slot { position: fixed; top: 0; left: 0; right: 0; z-index: 7; }
.tv-ticker {
    width: 100%; overflow: hidden; background: #e8ab2f; border-bottom: 1px solid #0d0e12;
}
.tv-ticker-track { display: flex; width: max-content; animation: tv-ticker-scroll 90s linear infinite; }
.tv-ticker-item { flex-shrink: 0; padding: 6px 40px; font-weight: 700; font-size: 13px; color: #14151a; white-space: nowrap; }
@keyframes tv-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tv-topbar {
    position: fixed; top: 30px; left: 0; right: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 30px; background: rgba(10,11,15,0.9); border-bottom: 1px solid #262a37;
}
.tv-topbar .tv-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #e8ab2f; font-size: 15px; }
.tv-topbar .tv-brand img { width: 28px; height: 28px; }
.tv-topbar .tv-title { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; }
.tv-topbar .tv-title .accent { color: #e8ab2f; }
.tv-topbar .tv-meta { display: flex; gap: 20px; font-size: 13px; color: #8b90a0; }
.tv-topbar .tv-meta b { color: #f5f6f8; }

.tv-wrap-outer { display: flex; width: 100%; max-width: 1400px; margin: 100px auto 0; gap: 20px; padding: 20px; box-sizing: border-box; }
.tv-main { flex: 1; min-width: 0; }
.tv-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tv-side-panel { background: #14161d; border: 1px solid #262a37; border-radius: 14px; padding: 16px; }
.tv-side-panel h4 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #8b90a0; }
.tv-feed-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #232733; font-size: 13px; }
.tv-feed-item:last-child { border-bottom: none; }
.tv-feed-item .fi-team { font-weight: 700; }
.tv-feed-item .fi-amt { color: #e8ab2f; font-weight: 700; }
.tv-feed-item .fi-time { color: #5b5f6e; font-size: 11px; }

.tv-card { display: flex; gap: 40px; align-items: center; padding: 34px; box-sizing: border-box; }
.tv-photo { width: clamp(110px, 18vw, 300px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; border: 4px solid #e8ab2f; background: #1b1e28; flex-shrink: 0; }
.tv-info { min-width: 0; }
.tv-info h1 { font-size: clamp(24px, 4vw, 42px); margin: 0 0 10px; overflow-wrap: anywhere; }
.tv-tag { font-size: clamp(13px, 1.6vw, 18px); color: #a0a4ae; margin-bottom: 22px; overflow-wrap: anywhere; }
.tv-bid { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 24px; }
.tv-bid-amount { font-size: clamp(28px, 5.5vw, 58px); font-weight: 800; color: #e8ab2f; }
.tv-bid-team { font-size: clamp(15px, 2vw, 22px); color: #4f8ef7; font-weight: 700; }
.tv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 16px 24px; font-size: clamp(13px, 1.4vw, 18px); }
.tv-stats b { font-size: clamp(16px, 2vw, 24px); display: block; color: #e8ab2f; }
.tv-brief { margin-top: 24px; font-size: 15px; color: #c4c7cf; max-width: 700px; font-style: italic; overflow-wrap: anywhere; }
.tv-empty { text-align: center; font-size: clamp(20px, 4vw, 34px); color: #a0a4ae; padding: 100px 20px; }
.flip-countdown-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100vh - 100px); box-sizing:border-box; padding:20px; }
.flip-countdown { display: flex; justify-content: center; gap: clamp(10px, 2vw, 24px); }
.flip-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flip-value {
    display: inline-block; min-width: clamp(60px, 8vw, 110px); background: #14161d;
    border: 1px solid var(--border); border-radius: 12px; padding: 10px 6px;
    font-size: clamp(30px, 6vw, 64px); font-weight: 800; color: var(--gold);
    font-variant-numeric: tabular-nums;
}
.flip-value.flip { animation: flip-tick 0.5s ease; }
@keyframes flip-tick { 0% { transform: rotateX(90deg); opacity: 0.3; } 100% { transform: rotateX(0deg); opacity: 1; } }
.flip-unit label { font-size: clamp(11px, 1.2vw, 14px); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.tv-shuffle-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 14px;
    max-width: 700px; margin: 24px auto 0;
}
.tv-shuffle-photo {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px;
    border: 3px solid #e8ab2f; background: #1b1e28;
    animation: tv-shuffle-flicker 1.4s ease-in-out infinite;
}
@keyframes tv-shuffle-flicker {
    0%, 100% { opacity: 0.35; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.02); }
}

.tv-card {
    position: relative;
    background: #14161d;
    border: 2px solid #262a37;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(232,171,47,0.08);
}
/* Reveal/roll screen stacks vertically (heading, shuffle grid, caption),
   unlike the live/resolved cards which are a photo+info row. .tv-card
   defaults to flex-row, which was squeezing these into slivers and
   wrapping text one character per line. */
.tv-card[data-status="pending"] {
    flex-direction: column;
    text-align: center;
}
.tv-card[data-status="pending"] > * {
    width: 100%;
}
.tv-card[data-status="pending"] .tv-tag {
    overflow-wrap: normal;
    word-break: normal;
}
.tv-mode-tag {
    position: absolute; top: -16px; left: 34px;
    background: #e8ab2f; color: #1a1305; font-weight: 800;
    padding: 4px 16px; border-radius: 20px; font-size: 12px; letter-spacing: 1px;
}

/* Timer lives in the topbar (normal flow, full-width bar with room to
   spare) rather than a floating box, so it never overlaps the side
   panel's Team Purses/Activity content on desktop or mobile. Updated via
   an htmx out-of-band swap each poll, independent of the card swap. */
.tv-timer {
    background: #14161d; border: 2px solid #262a37; border-radius: 10px;
    padding: 6px 16px; text-align: center; flex-shrink: 0;
    font-size: 20px; font-weight: 800; color: #4f8ef7; min-width: 54px;
}
.tv-timer-low { color: #e5534b; border-color: #e5534b; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.tv-bid-amount { transition: all 0.2s ease; }

/* Result stamp: PNG badge (sold/unsold) bounced into the card's open
   right-hand space (clear of the photo and text) for the hold window
   after sold/unsold, before the card is allowed to clear. */
.tv-photo-wrap { flex-shrink: 0; }
.tv-result-stamp {
    position: absolute; top: 50%; right: 40px; z-index: 2;
    width: clamp(160px, 20vw, 350px); aspect-ratio: 1 / 1; object-fit: contain;
    background: transparent; pointer-events: none;
    transform: translateY(-50%);
    animation: tv-stamp-in 0.4s cubic-bezier(.2,1.4,.4,1);
}
.tv-result-stamp.no-replay { animation: none; transform: translateY(-50%) rotate(-4deg); }
@media (min-width: 901px) { .tv-result-stamp { width: clamp(96px, 12vw, 210px); } }
@keyframes tv-stamp-in {
    0%   { opacity: 0; transform: translateY(-180%) scale(1.15) rotate(-4deg); filter: blur(2px); }
    18%  { opacity: 1; transform: translateY(-55%) scale(1.08) rotate(-4deg); filter: blur(0); }
    32%  { transform: translateY(-45%) scale(0.86) rotate(-4deg); }
    48%  { transform: translateY(-53%) scale(1.04) rotate(-4deg); }
    68%  { transform: translateY(-49%) scale(0.98) rotate(-4deg); }
    100% { transform: translateY(-50%) scale(1) rotate(-4deg); opacity: 1; }
}

.purse-ticker {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; gap: 16px; padding: 16px 30px;
    background: #0a0c12; border-top: 1px solid #262a37; z-index: 6;
}
.purse-chip { flex: 1; border-left: 4px solid #e8ab2f; padding: 6px 12px; }
.purse-team { font-size: 13px; color: #a0a4ae; display: block; }
.purse-amt { font-size: 19px; font-weight: 700; }
.purse-bar { height: 4px; background: #262a37; border-radius: 2px; margin-top: 6px; overflow: hidden; }
.purse-bar-fill { height: 100%; transition: width 0.5s ease; }

/* Mid-size TV/browser windows: side panel was fighting the card for
   width and forcing text to compress while the photo stayed pinned to
   its clamp floor. Drop the side panel below the card here instead of
   waiting for the mobile breakpoint. */
@media (max-width: 1300px) and (min-width: 901px) {
    .tv-wrap-outer { flex-direction: column; }
    .tv-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .tv-side-panel { flex: 1 1 260px; }
}

/* Spectator / mobile mode */
@media (max-width: 900px) {
    .tv-wrap-outer { flex-direction: column; margin-top: 94px; padding: 12px; gap: 14px; }
    .tv-side { width: 100%; flex-direction: column; }
    .tv-side-panel { width: 100%; box-sizing: border-box; }
    .tv-card { flex-direction: column; gap: 18px; padding: 18px; text-align: center; }
    .tv-photo { width: min(60vw, 220px); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
    .tv-bid { justify-content: center; }
    .tv-stats { grid-template-columns: repeat(2, 1fr); text-align: left; }
    .tv-topbar { padding: 8px 12px; flex-wrap: wrap; gap: 6px; row-gap: 4px; }
    .tv-topbar .tv-brand { font-size: 12px; }
    .tv-topbar .tv-brand img { width: 20px; height: 20px; }
    .tv-topbar .tv-title { font-size: 16px; order: 3; width: 100%; text-align: center; }
    .tv-topbar .tv-meta { gap: 10px; font-size: 11px; }
    .tv-timer { font-size: 15px; padding: 4px 10px; min-width: 38px; }
    .purse-ticker { flex-wrap: wrap; padding: 10px 14px; }
    .purse-chip { flex: 1 1 45%; }
}

.tv-starting-now {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: calc(100vh - 100px); box-sizing: border-box;
    text-align: center; padding: 20px;
    font-size: clamp(28px, 6vw, 72px); font-weight: 800; letter-spacing: 2px;
    color: var(--gold); text-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
    animation: tv-starting-pulse 1.8s ease-in-out infinite;
}
#tv-countdown-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; min-height: calc(100vh - 100px); box-sizing: border-box;
    text-align: center; color: var(--gold);
}
@keyframes tv-starting-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}