/* ==========================================================
   BünStats Live - TV-Broadcast-Dashboard (PDC / Sky-Sports-Stil)
   Reines CSS, keine Frameworks. Optimiert fuer 75"-TV, responsive
   fuer normale Browserfenster.
   ========================================================== */

:root{
    --black:#000000;
    --anthracite:#1a1a1a;
    --anthracite-light:#242424;
    --gold:#d4af37;
    --gold-light:#f2d879;
    --text:#f5f5f5;
    --text-dim:#9a9a9a;
    --live-red:#e02020;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{height:100%}

body{
    background:var(--black);
    color:var(--text);
    font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

/* ----------------------------------------------------------
   Topbar
   ---------------------------------------------------------- */

.topbar{
    height:70px;
    background:linear-gradient(180deg,#000,#0a0a0a);
    border-bottom:3px solid var(--gold);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 32px;
}

.brand{display:flex;align-items:center;gap:12px}
.brand .logo{font-size:30px}
.brand h1{
    color:var(--gold);
    font-size:26px;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:900;
}

.venue{
    color:var(--text-dim);
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.view-switch{
    color:var(--gold-light);
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    border:1px solid var(--gold);
    border-radius:20px;
    padding:6px 16px;
    transition:background .2s ease;
    white-space:nowrap;
}

.view-switch:hover{
    background:rgba(212,175,55,.12);
}

.nav-links{
    display:flex;
    gap:10px;
}

/* ----------------------------------------------------------
   Board-Liste
   ---------------------------------------------------------- */

.boards{
    display:flex;
    flex-direction:column;
    gap:22px;
    padding:22px clamp(12px,3vw,48px);
}

.loading{
    text-align:center;
    font-size:28px;
    color:var(--text-dim);
    padding:60px 0;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* ----------------------------------------------------------
   Board-Panel (kein "Card"-Look - volle Breite, wie eine
   TV-Grafik/Bauchbinde)
   ---------------------------------------------------------- */

.board-panel{
    background:linear-gradient(180deg,var(--anthracite-light) 0%,var(--anthracite) 45%,#111 100%);
    border-top:4px solid var(--gold);
    border-bottom:4px solid var(--gold);
    box-shadow:0 10px 34px rgba(0,0,0,.55);
}

.board-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 28px;
    background:var(--black);
    border-bottom:1px solid #2c2c2c;
}

.board-title{
    font-size:clamp(20px,1.6vw,30px);
    font-weight:900;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--text);
}

.status{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:clamp(14px,1vw,18px);
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--gold-light);
}

.live-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--live-red);
    box-shadow:0 0 8px 2px rgba(224,32,32,.7);
    animation:pulse 1.4s ease-in-out infinite;
}

@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.35;transform:scale(.75)}
}

/* ----------------------------------------------------------
   Matchup: Spieler nebeneinander mit Mitteltrenner
   ---------------------------------------------------------- */

.matchup{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:stretch;
}

.divider{
    width:2px;
    background:linear-gradient(180deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);
    position:relative;
}

.divider .vs{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--black);
    border:2px solid var(--gold);
    color:var(--gold);
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.player{
    padding:26px clamp(16px,3vw,44px);
    border:3px solid transparent;
    transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.player.active{
    background:rgba(212,175,55,.08);
    border-color:var(--gold);
    box-shadow:inset 0 0 40px rgba(212,175,55,.18), 0 0 26px rgba(212,175,55,.35);
}

.player-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
}

.player-name-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.player-arrow{
    width:0;
    height:0;
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    border-left:16px solid var(--gold);
    flex:none;
    visibility:hidden;
}

.player.active .player-arrow{visibility:visible}

.player-name{
    font-size:clamp(24px,2.6vw,40px);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.player.active .player-name{color:var(--gold-light)}

.average{text-align:right;flex:none}
.average-label{
    font-size:11px;
    color:var(--text-dim);
    letter-spacing:2px;
    text-transform:uppercase;
}
.average-value{
    font-size:clamp(18px,1.6vw,26px);
    font-weight:800;
    color:var(--gold-light);
    font-variant-numeric:tabular-nums;
}

.sets-legs{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-top:6px;
}

.sets-legs-item{
    font-size:12px;
    letter-spacing:1px;
    color:var(--text-dim);
}

.sets-legs-item b{
    color:var(--text);
    font-size:14px;
    margin-right:3px;
}

.score{
    font-size:clamp(72px,10vw,180px);
    font-weight:900;
    text-align:center;
    line-height:1;
    margin:18px 0 6px;
    color:#ffffff;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 30px rgba(212,175,55,.12);
}

.finish-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-height:26px;
}

.finish-label{
    text-align:center;
    color:var(--text-dim);
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
}

.turn-score{
    display:flex;
    align-items:center;
    gap:8px;
    padding:3px 12px;
    border:1px solid var(--gold);
    border-radius:20px;
    background:rgba(212,175,55,.12);
}

.turn-score-label{
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold-light);
}

.turn-score-value{
    font-size:16px;
    font-weight:900;
    color:var(--gold-light);
    font-variant-numeric:tabular-nums;
}

/* ----------------------------------------------------------
   Match-Footer: Leg / Set / Runde
   ---------------------------------------------------------- */

.match-info{
    display:flex;
    justify-content:space-evenly;
    background:var(--black);
    border-top:2px solid var(--gold);
    padding:16px 12px;
}

.info-box{text-align:center}
.info-title{
    color:var(--text-dim);
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
}
.info-value{
    font-size:clamp(22px,2vw,32px);
    font-weight:900;
    color:var(--text);
    font-variant-numeric:tabular-nums;
}

/* ----------------------------------------------------------
   Responsive: schmale Browserfenster / Tablets / Handys
   ---------------------------------------------------------- */

@media(max-width:900px){

    .matchup{grid-template-columns:1fr}
    .divider{
        width:auto;
        height:2px;
        background:linear-gradient(90deg,transparent,var(--gold) 15%,var(--gold) 85%,transparent);
    }
    .divider .vs{top:0}

    .player{border-bottom:1px solid #2c2c2c}
    .player:last-child{border-bottom:none}

    .score{font-size:clamp(64px,22vw,110px)}
    .player-name{white-space:normal}
}

@media(max-width:520px){
    .topbar{padding:0 16px}
    .venue{display:none}
    .board-header{padding:10px 16px}
    .player{padding:18px 16px}
}

/* ---------------- Einzelne Pfeile der aktuellen Aufnahme ---------------- */

.dart-pips{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:6px 0 10px;
}

.dart-pip{
    min-width:48px;
    padding:4px 10px;
    border-radius:8px;
    border:1px solid #333;
    background:#0d0d0d;
    color:var(--text-dim);
    font-size:14px;
    font-weight:800;
    text-align:center;
    letter-spacing:.5px;
}

.dart-pip-thrown{
    border-color:var(--gold);
    color:var(--gold-light);
    background:rgba(212,175,55,.1);
}

/* ---------------- Leg-Ende-Haken & Sieger-Anzeige ---------------- */

.leg-check-badge{
    background:rgba(61,220,132,.15);
    color:#3ddc84;
    border:1px solid #3ddc84;
    border-radius:12px;
    padding:2px 10px;
    font-size:12px;
    font-weight:700;
    margin-left:10px;
    animation:leg-check-pop .3s ease;
}

@keyframes leg-check-pop{
    0%{ transform:scale(0.7); opacity:0; }
    100%{ transform:scale(1); opacity:1; }
}

.board-panel-finished{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:200px;
}

.win-announcement{
    font-size:clamp(24px,3vw,40px);
    font-weight:900;
    color:#fff;
    text-align:center;
    padding:30px 20px;
}

.win-name{
    color:var(--gold-light);
}

.rotation-hint{
    font-size:11px;
    color:var(--text-dim);
    margin-left:10px;
    letter-spacing:.5px;
}