/**
 * TV Overlay - Base Styles
 * 
 * Shared styles for all TV broadcast overlays.
 * Designed for transparent overlay on video streams.
 */

/* ============================================
   Reset & Transparency
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: transparent !important;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Chroma key mode */
body.chroma-key {
    background: var(--chroma-color, #00ff00) !important;
}

/* ============================================
   CSS Variables
   ============================================ */
:root {
    /* Player colors */
    --player1-color: #06b6d4;
    --player2-color: #f97316;
    
    /* Theme colors */
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --overlay-bg-solid: #1a1a2e;
    --overlay-border: rgba(255, 255, 255, 0.1);
    --overlay-text: #ffffff;
    --overlay-text-muted: rgba(255, 255, 255, 0.7);
    --overlay-accent: #2ba8ff;
    
    /* Sizing */
    --overlay-scale: 1;
    
    /* Chroma */
    --chroma-color: #00ff00;
}

/* Light theme */
.theme-light {
    --overlay-bg: rgba(255, 255, 255, 0.95);
    --overlay-bg-solid: #ffffff;
    --overlay-border: rgba(0, 0, 0, 0.1);
    --overlay-text: #1a1a2e;
    --overlay-text-muted: rgba(0, 0, 0, 0.6);
}

/* ============================================
   Typography
   ============================================ */
.overlay-text {
    color: var(--overlay-text);
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.3);
}

.theme-light .overlay-text {
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.3);
}

/* ============================================
   Player Name & Score
   ============================================ */
.overlay-player {
    display: flex;
    align-items: center;
    gap: calc(0.75rem * var(--overlay-scale));
}

.overlay-player-name {
    font-size: calc(1rem * var(--overlay-scale));
    font-weight: 600;
    color: var(--overlay-text);
    white-space: nowrap;
    max-width: calc(150px * var(--overlay-scale));
    overflow: hidden;
    text-overflow: ellipsis;
}

.overlay-player-score {
    font-size: calc(1.5rem * var(--overlay-scale));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: calc(2rem * var(--overlay-scale));
    text-align: center;
}

.overlay-player-1 .overlay-player-score {
    color: var(--player1-color);
}

.overlay-player-2 .overlay-player-score {
    color: var(--player2-color);
}

/* ============================================
   Serve Indicator
   ============================================ */
.overlay-serve {
    width: calc(8px * var(--overlay-scale));
    height: calc(8px * var(--overlay-scale));
    background: var(--overlay-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.overlay-player.serving .overlay-serve {
    opacity: 1;
    animation: servePulse 1.5s ease-in-out infinite;
}

@keyframes servePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43, 168, 255, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(43, 168, 255, 0); }
}

/* ============================================
   Game Score (Games Won)
   ============================================ */
.overlay-games {
    display: flex;
    align-items: center;
    gap: calc(0.25rem * var(--overlay-scale));
}

.overlay-game-dot {
    width: calc(10px * var(--overlay-scale));
    height: calc(10px * var(--overlay-scale));
    border-radius: 50%;
    background: var(--overlay-border);
    transition: all 0.3s ease;
}

.overlay-game-dot.won {
    background: var(--player-color, var(--overlay-accent));
}

/* ============================================
   Match Info
   ============================================ */
.overlay-match-info {
    font-size: calc(0.75rem * var(--overlay-scale));
    color: var(--overlay-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.overlay-sport-icon {
    font-size: calc(1rem * var(--overlay-scale));
    color: var(--overlay-accent);
}

/* ============================================
   Dividers
   ============================================ */
.overlay-divider {
    width: 1px;
    height: calc(24px * var(--overlay-scale));
    background: var(--overlay-border);
}

.overlay-score-divider {
    font-size: calc(1.25rem * var(--overlay-scale));
    font-weight: 300;
    color: var(--overlay-text-muted);
    padding: 0 calc(0.5rem * var(--overlay-scale));
}

/* ============================================
   Animations
   ============================================ */
.score-change {
    animation: scoreFlash 0.3s ease-out;
}

@keyframes scoreFlash {
    0% { transform: scale(1.3); color: #fff; }
    100% { transform: scale(1); }
}

.game-won-flash {
    animation: gameWonFlash 0.5s ease-out;
}

@keyframes gameWonFlash {
    0% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ============================================
   Visibility Utilities
   ============================================ */
.overlay-hidden {
    display: none !important;
}

.overlay-fade-in {
    animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.overlay-fade-out {
    animation: overlayFadeOut 0.3s ease-out forwards;
}

@keyframes overlayFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(10px); }
}