:root{

    --home-color:#2563eb;
    --away-color:#dc2626;

    --bg:#081226;

    --card:#111827;

    --orange:#ff7a00;

    --green:#16a34a;

    --red:#dc2626;

    --yellow:#f59e0b;
}

*{

    box-sizing:border-box;

    -webkit-tap-highlight-color:transparent;
}

html,
body{

    margin:0;
    padding:0;

    min-height:100vh;

    overflow-y:auto;
    overflow-x:hidden;

    background:var(--bg);

    color:white;

    font-family:
    Arial,
    Helvetica,
    sans-serif;
}

/* ===================================== */
/* HEADER */
/* ===================================== */

.header{

    background:#020617;

    padding:14px;

    text-align:center;

    font-size:26px;

    font-weight:900;

    border-bottom:4px solid var(--orange);

    position:sticky;

    top:0;

    z-index:1000;
}

/* ===================================== */
/* TOPBAR */
/* ===================================== */

.topbar{

    position:sticky;

    top:64px;

    z-index:999;

    background:#111827;

    padding:10px;

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    justify-content:center;

    border-bottom:1px solid #1f2937;
}

.ctrl{

    border:none;

    border-radius:14px;

    min-width:60px;

    height:50px;

    background:#334155;

    color:white;

    font-size:15px;

    font-weight:900;

    cursor:pointer;

    transition:0.15s;
}

.ctrl:hover{

    opacity:0.92;
}

.ctrl:active{

    transform:scale(0.96);
}

.green{
    background:#16a34a;
}

.red{
    background:#dc2626;
}

.orange{
    background:#ea580c;
}

.purple{
    background:#7c3aed;
}

.dark{
    background:#111827;
}

.last-action{

    margin:0 12px 14px 12px;

    padding:18px;

    border-radius:18px;

    font-size:24px;

    font-weight:900;

    color:white;

    text-align:center;

    transition:0.25s;

    box-shadow:
    0 4px 20px rgba(0,0,0,0.25);
}

/* ===================================== */
/* GUIDE */
/* ===================================== */

.guide{

    margin:12px;

    background:#111827;

    border:2px solid #1f2937;

    border-radius:18px;

    padding:18px;

    text-align:center;

    font-size:24px;

    font-weight:900;

    color:#f59e0b;
}

/* ===================================== */
/* LAST ACTION */
/* ===================================== */

.last-action{

    margin:0 12px 12px 12px;

    background:#1e293b;

    border-left:6px solid #22c55e;

    border-radius:16px;

    padding:16px;

    font-size:18px;

    font-weight:900;

    color:white;
}

/* ===================================== */
/* SCOREBOARD */
/* ===================================== */

.scoreboard{

    display:grid;

    grid-template-columns:
    1fr 1fr 1fr;

    gap:10px;

    padding:12px;
}

.team-btn{

    border:none;

    border-radius:24px;

    color:white;

    min-height:170px;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:0.15s;
}

.team-btn:hover{

    opacity:0.95;
}

.team-btn:active{

    transform:scale(0.98);
}

.home{
    background:var(--home-color);
}

.away{
    background:var(--away-color);
}

.team-name{

    font-size:20px;

    font-weight:900;

    text-align:center;
}

.team-score{

    font-size:76px;

    font-weight:900;

    line-height:1;

    margin-top:6px;
}

.team-fouls{

    margin-top:10px;

    font-size:15px;

    font-weight:900;

    text-align:center;

    line-height:1.5;
}

/* ===================================== */
/* CLOCK */
/* ===================================== */

.clock-box{

    background:#020617;

    border-radius:24px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:170px;
}

.period{

    color:var(--orange);

    font-size:24px;

    font-weight:900;
}

.clock{

    font-size:68px;

    font-weight:900;

    margin-top:6px;

    cursor:pointer;

    transition:0.2s;
}

.running{
    color:#22c55e;
}

.stopped{
    color:#ef4444;
}

/* ===================================== */
/* QUARTERS */
/* ===================================== */

.quarters{

    display:flex;

    gap:10px;

    overflow:auto;

    padding:0 12px 12px 12px;
}

.qbox{

    background:#111827;

    border-radius:16px;

    min-width:95px;

    padding:12px;

    text-align:center;

    border:1px solid #1f2937;
}

.qtitle{

    color:var(--orange);

    font-size:12px;

    font-weight:900;
}

.qscore{

    font-size:22px;

    font-weight:900;

    margin-top:6px;
}

/* ===================================== */
/* MINI STATS */
/* ===================================== */

#miniStatsBox{

    display:none !important;
}

.mini-team{

    background:#111827;

    border-radius:22px;

    padding:12px;

    border:1px solid #1f2937;
}

.mini-title{

    font-size:18px;

    font-weight:900;

    margin-bottom:10px;

    text-align:center;

    color:var(--orange);
}

.mini-bench{

    text-align:center;

    font-size:12px;

    margin-bottom:10px;

    color:#f59e0b;

    font-weight:900;
}

.mini-players{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:8px;
}

.mini-player{

    background:#1e293b;

    border-radius:14px;

    padding:8px;

    text-align:center;

    border:2px solid transparent;
}

/*
5 FALLI
NON ESPULSO
*/

.mini-player.foul-out{

    background:#7f1d1d;

    border-color:#fca5a5;
}

/*
ESPULSO VERO
*/

.mini-player.ejected{

    background:black;

    border-color:red;
}

.mini-number{

    font-size:24px;

    font-weight:900;
}

.mini-points{

    color:#22c55e;

    font-size:13px;

    font-weight:900;

    margin-top:4px;
}

.mini-fouls{

    color:#ef4444;

    font-size:11px;

    font-weight:900;

    margin-top:4px;

    line-height:1.4;
}

/* ===================================== */
/* SCREEN */
/* ===================================== */

.screen{

    padding:12px;
}

.nav-top{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;
}

.title{

    font-size:30px;

    font-weight:900;
}

.back{

    border:none;

    border-radius:14px;

    background:#111827;

    color:white;

    width:54px;

    height:54px;

    font-size:24px;

    font-weight:900;

    cursor:pointer;
}

/* ===================================== */
/* ACTIONS */
/* ===================================== */

.selected-action{

    margin-bottom:16px;

    border-radius:18px;

    background:#f59e0b;

    color:black;

    padding:16px;

    text-align:center;

    font-size:24px;

    font-weight:900;
}

.actions{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:12px;
}

.action{

    border:none;

    border-radius:20px;

    min-height:90px;

    color:white;

    font-size:22px;

    font-weight:900;

    cursor:pointer;

    transition:0.15s;
}

.action:active{

    transform:scale(0.97);
}

.p2{
    background:#16a34a;
}

.p3{
    background:#15803d;
}

.ft{
    background:#0284c7;
}

.minus{
    background:#7f1d1d;
}

.foul{
    background:#dc2626;
}

.tech{
    background:#f97316;
}

.uns{
    background:#9333ea;
}

.exp{
    background:#111827;
}

/* ===================================== */
/* PLAYERS */
/* ===================================== */
.players{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:8px;
}
.player{

    background:white;

    color:#111827;

    border-radius:14px;

    padding:8px 10px;

    cursor:pointer;

    transition:0.15s;

    border:2px solid #334155;
}

.player-number{

    font-size:28px;
}

.player-name{

    font-size:15px !important;

    font-weight:900;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.player-stats{

    margin-top:2px;

    display:flex;

    gap:6px;

    font-size:10px;

    font-weight:900;
}

.player:hover{

    transform:translateY(-1px);
}

.player:active{

    transform:scale(0.98);
}

/*
5 FALLI
*/

.player.foul-out{

    background:#fecaca;

    border-color:#dc2626;
}

/*
ESPULSO
*/

.player.ejected{

    background:#450a0a;

    color:white;

    border-color:red;
}


.pt{
    color:#16a34a;
}

.fl{
    color:#dc2626;
}

.ut{
    color:#f59e0b;
}

/* ===================================== */
/* STAFF */
/* ===================================== */

.staff-box{

    margin-top:22px;

    background:#111827;

    border-radius:22px;

    padding:16px;

    border:1px solid #1f2937;
}

.staff-title{

    text-align:center;

    font-size:18px;

    font-weight:900;

    margin-bottom:12px;
}

.staff-buttons{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

.staff-btn{

    border:none;

    border-radius:16px;

    background:#334155;

    color:white;

    min-height:74px;

    font-size:17px;

    font-weight:900;

    cursor:pointer;
}

/* ===================================== */
/* CONFIRM BOX */
/* ===================================== */

.confirm-box{

    background:#16a34a;

    color:white;

    border-radius:18px;

    padding:18px;

    margin-top:20px;

    text-align:center;

    font-size:20px;

    font-weight:900;

    display:none;
}

/* ===================================== */
/* STATUS */
/* ===================================== */

.status{

    position:fixed;

    bottom:12px;

    right:12px;

    background:black;

    color:white;

    padding:12px 16px;

    border-radius:12px;

    font-size:14px;

    font-weight:900;

    z-index:9999;

    border:1px solid #374151;
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:768px){

    .scoreboard{

        grid-template-columns:
        1fr 120px 1fr;

        gap:5px;
    }

    .team-btn{

        min-height:120px;
        padding:8px;
    }

    .team-name{

        font-size:14px;
    }

    .team-score{

        font-size:42px;
    }

    .clock-box{

        min-height:120px;
    }

    .clock{

        font-size:32px;
    }

    .period{

        font-size:18px;
    }

    .players{

        grid-template-columns:
        repeat(2,1fr);
    }

    .actions{

        grid-template-columns:
        repeat(3,1fr);
    }

}

/* ===================================== */
/* PRINT */
/* ===================================== */

@media print{

    body{

        background:white;

        color:black;
    }

    .topbar,
    .status,
    .guide,
    .last-action,
    #actionsScreen,
    #playersScreen{

        display:none !important;
    }

    .header{

        color:black;

        background:white;

        border-bottom:3px solid black;
    }

    .team-btn,
    .clock-box,
    .mini-team,
    .qbox{

        color:black !important;

        background:white !important;

        border:1px solid black !important;
    }
}

/* ===================================== */
/* SCORE ANIMATION */
/* ===================================== */

.score-flash{

    animation:scoreFlash 0.6s ease;
}

@keyframes scoreFlash{

    0%{

        transform:scale(1);

        filter:brightness(1);
    }

    30%{

        transform:scale(1.25);

        filter:
        brightness(1.8)
        drop-shadow(0 0 18px #22c55e);
    }

    100%{

        transform:scale(1);

        filter:brightness(1);
    }
}

/* ===================================== */
/* BONUS TEAM FOULS */
/* ===================================== */

.team-bonus{

    animation:bonusPulse 1s infinite;
}

.team-danger{

    animation:dangerPulse 0.7s infinite;
}

@keyframes bonusPulse{

    0%{
        box-shadow:0 0 0 rgba(250,204,21,0);
    }

    50%{
        box-shadow:
        0 0 24px rgba(250,204,21,0.9);
    }

    100%{
        box-shadow:0 0 0 rgba(250,204,21,0);
    }
}

@keyframes dangerPulse{

    0%{
        box-shadow:0 0 0 rgba(239,68,68,0);
    }

    50%{
        box-shadow:
        0 0 28px rgba(239,68,68,1);
    }

    100%{
        box-shadow:0 0 0 rgba(239,68,68,0);
    }
}

/* ===================================== */
/* BONUS */
/* ===================================== */

.bonus-indicator{

    display:none;

    margin-top:8px;

    padding:8px 18px;

    border-radius:999px;

    font-size:18px;

    font-weight:900;

    letter-spacing:1px;

    background:#facc15;

    color:black;

    border:3px solid rgba(255,255,255,0.4);

    box-shadow:
    0 0 20px rgba(250,204,21,0.7);

    animation:
    bonusPulse 1s infinite;
}

.bonus-danger{

    background:#dc2626 !important;

    color:white !important;

    box-shadow:
    0 0 24px rgba(220,38,38,0.95);
}

@keyframes bonusPulse{

    0%{

        transform:scale(1);

        opacity:1;
    }

    50%{

        transform:scale(1.08);

        opacity:0.8;
    }

    100%{

        transform:scale(1);

        opacity:1;
    }
}

/* ===================================== */
/* LIVE PANEL */
/* ===================================== */

.live-panel{

    display:grid;

    grid-template-columns:
        320px 1fr;

    gap:10px;

    padding:10px;
}

.panel{

    background:#fff;

    border-radius:12px;

    padding:8px;
}

.panel-title{

    font-size:22px;

    font-weight:900;

    text-align:center;

    margin-bottom:8px;
}

.actions{

    display:grid;

    grid-template-columns:
    repeat(5,1fr);

    gap:8px;
}

.action{

    height:70px;

    font-size:28px;

    font-weight:900;
}

.staff-box{

    display:flex;

    gap:8px;

    margin-top:8px;
}

.staff-btn{

    flex:1;

    height:60px;

    font-size:22px;

    font-weight:900;
}

.players{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:6px;
}

.team-btn.active{

    outline:6px solid #facc15;

    transform:scale(1.02);

    box-shadow:
    0 0 25px rgba(250,204,21,.8);
}   

.player-btn{

    height:90px;

    font-size:30px;

    font-weight:900;
}

.selected-action{

    text-align:center;

    font-size:28px;

    font-weight:900;

    margin-bottom:10px;
}


.player{

    display:flex !important;

    align-items:center !important;

    justify-content:space-between !important;

    min-height:70px !important;

    padding:8px 12px !important;
}

.player-info{

    flex:1;

    overflow:hidden;
}

.player-name{

    font-size:16px !important;

    font-weight:900;

    margin-bottom:4px;
}

.player-stats{

    display:flex !important;

    gap:8px;

    font-size:12px !important;

    margin:0 !important;
}

.player-number{

    font-size:38px !important;

    font-weight:900;

    width:50px;

    text-align:right;

    color:#0f172a;
}

@media(max-width:768px){

    .live-panel{
        grid-template-columns:1fr;
    }

    .actions{
        grid-template-columns:repeat(3,1fr);
    }

    .players{
        grid-template-columns:repeat(2,1fr);
    }

    .header{
        display:none;
    }

    .topbar{

        position:relative;
        top:auto;

        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:4px;
    }

    .ctrl{
        min-width:auto;
        height:42px;
        font-size:12px;
    }

    .player{
        min-height:90px !important;
    }

    .player-number{
        font-size:46px !important;
    }

    .action{
        height:90px;
        font-size:28px;
    }
}