/**
 * Plugin Name: Contest Winners Management
 * Filename: assets/css/frontend-winner-board.css
 * Version: cwm-2.10.0c
 * Description: Styling für Frontend Winner Board (1920x1080)
 * 1.3.0 CR: Winner board
 * 1.3.0a FIX: Sort order and layout
 * 1.3.0c CR: oscillating bars from 0 to max
 * 1.3.0f FIX: 3rd place reveal
 * 1.3.0i FIX: Winner label & bounce
 * 1.3.0k FIX: Winner label & gray bar - again
 * 1.3.0l FIX: gray bar - again
 * 1.3.0m FIX: claude gewixe - again
 * 1.3.0n FIX: calude madness
 * 1.3.0r FIX: claude idiocy
 * 1.4.0 CR: bonus point handling
 * 1.4.0a FIX: bonus point handling
 * 1.4.0e FIX: black chart background
 * 1.4.0f FIX: various styles
 * 1.4.1b FIX: center contestant image
 * 1.4.1e FIX: force horizontal even split
 * 1.4.1h FIX: claude nightmare fix
 * 1.4.1i FIX: font sizes
 * 1.4.2 CR: background image
 * 1.4.2b FIX: Headline 1 step larger
 * 1.5.0 CR: Splash screen
 * 1.5.0a FIX: Splash screen
 * 1.5.0b FIX: Scaling splash screen in fullscreen mode
 * 1.5.0d FIX: iPad fullscreen
 * 1.5.1 FIX: final viewport fix
 * 1.6.0 CR: play button flow
 * 1.6.0a FIX: play button flow
 * 1.6.0b FIX: minor style optimizations
 * 1.6.0c FIX: minor style optimizations
 * 1.6.1b FIX: winners badge image instead of text
 * 1.6.1c FIX: winners badge image instead of text
 * 1.8.1 NEW: Tie Handlind multiple 1st and/or 2nd places
 * 1.8.2 NEW: Tie Handlind multiple 1st and/or 2nd places (step 2)
 * 1.9.0b FIX: missing battle-winner-badge
 * 2.0.0 CR: admin vote in voting dashboard
 * 2.7.4 CR: add visitor overview and voting potential to winner board preview
 */

/* ===========================
   Board Container
   =========================== */

.cwm-winner-board {
    width: 1920px;
    height: 1080px;
    position: relative;
    background-image: url('../images/Logo HD.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    font-family: Impact, 'Arial Black', sans-serif;
    margin: 0 auto;
    transform-origin: top left;
}

/* Unsichtbare Reset-Klickfläche auf Board-Title */
.cwm-board-title {
    cursor: pointer;
    position: relative;
    z-index: 100;
    user-select: none;
}

.cwm-board-title::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -50px;
    right: -50px;
    bottom: -20px;
    z-index: 101;
}

/* Responsive Scaling */
@media (max-width: 1920px) {
    .cwm-winner-board:not(.cwm-fullscreen) {
        transform: scale(0.8);
        margin-bottom: -216px; /* 1080 * 0.2 */
    }
}

@media (max-width: 1536px) {
    .cwm-winner-board:not(.cwm-fullscreen) {
        transform: scale(0.6);
        margin-bottom: -432px; /* 1080 * 0.4 */
    }
}

@media (max-width: 1200px) {
    .cwm-winner-board:not(.cwm-fullscreen) {
        transform: scale(0.5);
        margin-bottom: -540px; /* 1080 * 0.5 */
    }
}

/* Fullscreen Mode */
.cwm-winner-board.cwm-fullscreen {
    position: fixed;
    top: 50%;
    left: 50%;

    /* scale to fit any screen while preserving 16:9 */
    --cwm-scale: 1;
    transform: translate(-50%, -50%) scale(var(--cwm-scale));
    transform-origin: center center;

    margin: 0 !important;
    z-index: 999999;
    overflow: visible !important;

    /* internal design size – layout math stays 1:1 */
    width: 1920px;
    height: 1080px;
}

/* iOS/iPadOS: use dynamic viewport units to avoid right-cutoff */
@supports (width: 1dvw) {
    .cwm-winner-board.cwm-fullscreen {
        --cwm-scale: min(100dvw / 1920, 100dvh / 1080);
    }
}

/* ===========================
   Loading Screen
   =========================== */

.cwm-board-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: white;
}

.cwm-loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: cwm-spin 1s linear infinite;
}

@keyframes cwm-spin {
    to { transform: rotate(360deg); }
}

.cwm-board-loading p {
    margin-top: 20px;
    font-size: 24px;
}

/* ===========================
   Splash Screen
   =========================== */

.cwm-splash-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.cwm-splash-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.cwm-splash-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    z-index: 21;
    color: rgba(255, 255, 255, 0.4);
}

.cwm-splash-button:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.cwm-splash-button .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.cwm-splash-screen.cwm-splash-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 800ms ease-out;
}

/* ===========================
   Board Layout
   =========================== */

.cwm-board-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 800ms ease-in;
}

.cwm-board-container.cwm-visible {
    opacity: 1;
}

/* Chart-Hintergrund separat */
.cwm-board-chart::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 290px; /* Endet über den Contestant-Bildern */
    background: rgba(0, 0, 0, 0.85);
    z-index: 0;
}

/* Unterer Bereich (Teilnehmer) abdunkeln */
.cwm-board-chart::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    height: 290px;
    background: rgba(233, 164, 113, 0.75);
    z-index: 0;
}

.cwm-chart-area {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
}

/* Header */
.cwm-board-header {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
}

.cwm-board-logo {
    max-height: 80px;
    margin-right: 30px;
}

.cwm-board-title {
    color: white;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

/* Chart Area */
.cwm-board-chart {
    flex: 1;
    position: relative;
    padding: 40px;
    padding-bottom: 0;
}

.cwm-chart-area {
    position: relative;
    height: 100%;
    width: 100%;
}

/* Contestants Area */
.cwm-board-contestants {
    position: absolute;
    bottom: 140px;
    left: 0;
    right: 0;
    height: 130px;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 0 40px;
    gap: 20px;
    z-index: 5;
}

.cwm-contestant {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
    width: 150px;
    flex-shrink: 0;
    height: 130px;
    position: relative;
}

.cwm-contestant:hover {
    transform: scale(1.1);
}

.cwm-contestant-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin: 0 auto 5px auto;
    position: relative;
}

.cwm-contestant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cwm-contestant-name {
    color: white;
    font-size: 24px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    width: 150px;
    white-space: normal;
    overflow: visible;
    line-height: 1.2;
    word-wrap: break-word;
    position: absolute;
    top: 130px;
    left: 0;
}

/* ===========================
   Preview Voting (Score-Overview)
   =========================== */

.cwm-contestant-votable {
    cursor: pointer;
}

.cwm-contestant-votable .cwm-contestant-image {
    transition: all 0.3s ease;
}

.cwm-contestant-votable:hover .cwm-contestant-image {
    transform: scale(1.1);
    border-color: #4ECDC4;
    box-shadow: 0 0 20px rgba(78, 205, 196, 0.6);
}

.cwm-contestant.cwm-voting {
    pointer-events: none;
    opacity: 0.6;
}

.cwm-contestant.cwm-vote-success .cwm-contestant-image {
    animation: cwm-vote-success-pulse 0.6s ease;
}

@keyframes cwm-vote-success-pulse {
    0%, 100% {
        transform: scale(1);
        border-color: white;
    }
    50% {
        transform: scale(1.15);
        border-color: #4ECDC4;
        box-shadow: 0 0 30px rgba(78, 205, 196, 0.8);
    }
}

/* ===========================
   Bonus Selection (Platz 1 & 2)
   =========================== */

.cwm-contestant.cwm-bonus-selectable {
    cursor: pointer;
}

.cwm-contestant.cwm-bonus-selectable .cwm-contestant-image {
    transition: all 0.3s ease;
    border-color: rgba(255, 255, 255, 0.5);
}

.cwm-contestant.cwm-bonus-selectable:hover .cwm-contestant-image {
    border-color: gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.cwm-contestant.cwm-bonus-selected .cwm-contestant-image {
    border-color: gold;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}

/* Bonus Overlay */
.cwm-bonus-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 215, 0, 0.85);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: cwm-bonus-pulse 1.5s ease-in-out infinite;
    z-index: 10;
}

/* ===========================
   Battle Mode Bonus Selection
   =========================== */

.cwm-contestant.cwm-bonus-selectable-battle {
    cursor: pointer;
}

.cwm-contestant.cwm-bonus-selectable-battle .cwm-contestant-image {
    transition: all 0.3s ease;
    border-color: rgba(255, 255, 255, 0.5);
}

.cwm-contestant.cwm-bonus-selectable-battle:hover .cwm-contestant-image {
    border-color: gold;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

.cwm-contestant.cwm-bonus-selected-battle .cwm-contestant-image {
    border-color: gold;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}

/* Battle Mode Bonus Overlay */
.cwm-bonus-overlay-battle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 215, 0, 0.85);
    border-radius: 50%;
    border: 6px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: #333;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: cwm-bonus-pulse 1.5s ease-in-out infinite;
    z-index: 10;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

/* Battle Mode Winner Badge */
.cwm-battle-winner-badge {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 15;
    pointer-events: none;
}

.cwm-battle-winner-icon {
    position: static;
    transform: none;
    line-height: 0;
    font-size: 72px;
    font-weight: bold;
    text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
    animation: cwm-bonus-pulse-scale 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cwm-bonus-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.9;
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1;
    }
}

@keyframes cwm-bonus-pulse-scale {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.9; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1; 
    }
}

@keyframes cwm-bonus-pulse-center {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }
}

/* ===========================
   Bars
   =========================== */

.cwm-bar {
    position: absolute;
    width: 150px;
    bottom: 290px;
    transition: none;
}

/* Spezifische z-index für Balken-Typen */
.cwm-bar-color {
    z-index: 1; /* Farbige Balken hinten */
}

.cwm-bar-grey {
    z-index: 2; /* Graue Balken vorne */
}

/* Bar Content INNERHALB von .cwm-bar-fill am oberen Rand */
.cwm-bar-fill .cwm-bar-content {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    z-index: 10;
    width: 100%;
}

.cwm-bar-fill {
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
    transition: none;
}

/* Question Mark */
.cwm-bar-question {
    font-size: 48px;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: cwm-pulse 1.5s infinite;
}

/* No padding for grey bars to prevent jump on reveal */
.cwm-bar-grey .cwm-bar-fill {
    padding-top: 0;
}

.cwm-bar-grey .cwm-bar-question {
    margin-top: 20px;
}

@keyframes cwm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* ===========================
   Battle Mode Styles
   =========================== */

/* Battle Indicator Circle (farbiger Kreis) */
.cwm-battle-indicator-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Battle Indicator "!!" Text */
.cwm-battle-indicator {
    font-size: 52px;
    color: white;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: cwm-battle-blink 0.8s infinite;
}

/* Blink Animation für "!!" */
@keyframes cwm-battle-blink {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1);
    }
    50% { 
        opacity: 0.3; 
        transform: scale(1.1);
    }
}

/* Battle Mode Badge */
.cwm-battle-badge {
    position: absolute;
    top: calc(50% - 145px);
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
    color: white;
    padding: 50px 120px;
    border-radius: 30px;
    box-shadow: 0 12px 36px rgba(220, 38, 38, 0.7);
    z-index: 20;
    border: 8px solid #fef2f2;
}

/* Badge mit Blink-Animation (initial) */
.cwm-battle-badge {
    animation: cwm-badge-blink 1s ease-in-out infinite;
}

/* Badge Blink Animation */
@keyframes cwm-badge-blink {
    0%, 100% { 
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1);
        box-shadow: 0 12px 36px rgba(220, 38, 38, 0.7);
    }
    50% { 
        opacity: 0.7;
        transform: translate(-50%, -50%) rotate(-15deg) scale(1.08);
        box-shadow: 0 16px 48px rgba(220, 38, 38, 0.9);
    }
}

/* Badge Text */
.cwm-battle-badge-text {
    font-size: 84px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 6px;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

/* Badge nach 10 Sekunden - Blinken stoppen */
.cwm-battle-badge.cwm-battle-badge-static {
    animation: none;
}

.cwm-bar-points {
    font-size: 44px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.cwm-bar-label {
    font-size: 24px;
    margin-top: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Revealed State */
.cwm-bar.cwm-revealed .cwm-bar-fill {
    animation: cwm-glow 2s ease-in-out infinite;
}

@keyframes cwm-glow {
    0%, 100% { box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2), 0 0 30px rgba(255, 255, 255, 0.5); }
}

/* Explosion Effect */
.cwm-bar.cwm-exploding {
    animation: cwm-explode 0.5s ease-out;
}

@keyframes cwm-explode {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Grey Overlay for Scroll Effect */
.cwm-grey-overlay {
    position: absolute;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
    overflow: hidden;
    z-index: 10;
}

/* Winner Label - Position wird via JavaScript gesetzt */
.cwm-winner-label {
    position: absolute;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 15;
}

/* Winner Image - groß und pulsierend */
.cwm-winner-image {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid gold;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), 0 6px 16px rgba(0, 0, 0, 0.4);
    animation: cwm-winner-image-pulse 1s ease-in-out infinite;
}

@keyframes cwm-winner-image-pulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.9), 0 6px 16px rgba(0, 0, 0, 0.4);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 60px rgba(255, 215, 0, 1), 0 8px 20px rgba(0, 0, 0, 0.5);
    }
}

/* Winner Name - groß unter dem Bild */
.cwm-winner-name {
    font-size: 52px;
    font-weight: bold;
    color: white;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.7);
    line-height: 1.2;
    text-align: center;
    background: rgba(255, 215, 0, 0.25);
    padding: 15px 40px;
    border-radius: 20px;
    min-width: 250px;
}px 2px rgba(0, 0, 0, 0.2);
    line-height: 1.2;
    flex: 1;
}

/* Winner Pulse */
.cwm-bar.cwm-winner-pulse .cwm-bar-fill {
    animation: cwm-winner-pulse 1s ease-in-out infinite;
}

@keyframes cwm-winner-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===========================
   Confetti
   =========================== */

.cwm-confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    pointer-events: none;
    z-index: 1000;
}

/* ===========================
   Controls
   =========================== */

.cwm-board-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: none !important; /* CR: Buttons permanent versteckt */
    gap: 10px;
    z-index: 10;
}

.cwm-control-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.cwm-control-btn:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.cwm-control-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.cwm-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Button Colors */
.cwm-btn-start {
    background: #4caf50;
    color: white;
}

.cwm-btn-reveal-3 {
    background: #ff9800;
    color: white;
}

.cwm-btn-reveal-12 {
    background: #2196f3;
    color: white;
}

.cwm-btn-reset {
    background: #f44336;
    color: white;
}

.cwm-btn-fullscreen {
    background: #9c27b0;
    color: white;
}

/* ===========================
   Error State
   =========================== */

.cwm-board-error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
}

.cwm-error-message {
    background: rgba(244, 67, 54, 0.9);
    color: white;
    padding: 30px;
    border-radius: 10px;
    font-size: 24px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===========================
   Mobile Warning
   =========================== */

@media (max-width: 768px) {
    .cwm-winner-board::before {
        content: "Bitte drehen Sie Ihr Gerät oder nutzen Sie einen größeren Bildschirm für die beste Darstellung.";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        font-size: 18px;
        z-index: 1000;
        max-width: 80%;
    }
}

/* Vollbild-Overlay */
#cwm-wb-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
  overflow: visible !important;
}

/* Board intern 1920x1080, Skalierung von oben links */
#cwm-wb-overlay #cwm-winner-board {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  will-change: transform,left,top;
}

/* Titel nur verstecken, wenn der Board-Container noch nicht sichtbar ist */
.cwm-board-container:not(.cwm-visible) .cwm-board-title {
    display: none !important;
}

/* Play-Button bleibt immer sichtbar wenn aus Splash entfernt */
#cwm-winner-board > .cwm-splash-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 30;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

#cwm-winner-board > .cwm-splash-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ===========================
   Statistik-Overlay
   =========================== */

.cwm-statistics-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.85);
    padding: 20px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cwm-statistics-content {
    color: white;
    font-size: 56px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}