/* =========================================================
   STATBASKET CONSOLE PRO FINAL
   Professional scorer workstation
   SOLO PRESENTAZIONE - LOGICA INVARIATA
   ========================================================= */

*{
    box-sizing:border-box;
}

:root{
    --bg:#080d13;
    --bg2:#0b121a;

    --panel:#101821;
    --panel2:#151f2a;

    --border:#263440;
    --border2:#1c2833;

    --text:#f4f7fa;
    --muted:#8e9cab;
    --muted2:#657383;

    --home:#16427f;
    --home2:#12376e;

    --away:#942d2d;
    --away2:#782525;

    --green:#257846;
    --red:#9b3434;

    --blue-action:#173e69;
    --red-action:#482626;
    --neutral-action:#202b37;

    --radius:8px;
}


/* =========================================================
   BASE
   ========================================================= */

html,
body{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;

    background:var(--bg);
}

body{
    min-height:100vh;
    padding-bottom:42px;

    background:
        linear-gradient(
            180deg,
            #080d13 0%,
            #09111a 100%
        ) !important;

    color:var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   COMMON WIDTH
   ========================================================= */

.header,
.topbar,
.last-action,
.guide,
.scoreboard,
.quarters,
.mini-stats,
.live-panel,
.confirm-box{
    width:calc(100% - 32px);
    max-width:1380px;

    margin-left:auto !important;
    margin-right:auto !important;
}


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

.header{
    min-height:58px;

    padding:36px 4px 10px !important;

    display:flex;
    align-items:flex-end;

    border-bottom:1px solid var(--border2);

    color:#f2f5f8;

    font-size:15px;
    font-weight:900;

    letter-spacing:.8px;
}


/* =========================================================
   TOP COMMAND BAR
   ========================================================= */

.topbar{
    margin-top:9px !important;

    display:grid !important;

    grid-template-columns:
        repeat(14,minmax(55px,1fr));

    gap:5px;

    padding:7px;

    border:1px solid var(--border);
    border-radius:9px;

    background:#0f1720 !important;

    box-shadow:none !important;
}

.ctrl{
    min-width:0 !important;
    min-height:40px !important;

    margin:0 !important;
    padding:5px !important;

    border:1px solid #2c3947 !important;
    border-radius:6px !important;

    background:#17222e !important;

    color:#dce3ea !important;

    font-size:9px !important;
    font-weight:850 !important;

    cursor:pointer;

    box-shadow:none !important;

    transition:none !important;
}

.ctrl:hover{
    background:#1c2937 !important;
}

.ctrl.green{
    background:var(--green) !important;
    border-color:#318a55 !important;
}

.ctrl.red{
    background:var(--red) !important;
    border-color:#ad4141 !important;
}

.ctrl.orange{
    background:#30291e !important;
    border-color:#51442f !important;

    color:#decda4 !important;
}

.ctrl.purple{
    background:#24242a !important;
    border-color:#3b3c45 !important;

    color:#bec3ca !important;
}

.ctrl.dark{
    background:#121b24 !important;
}


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

.last-action{
    height:29px;

    margin-top:7px !important;

    padding:4px 10px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #253444;
    border-radius:6px !important;

    background:#101a25 !important;

    color:#aab8c7 !important;

    font-size:10px !important;
    font-weight:750 !important;

    box-shadow:none !important;
}


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

.guide{
    min-height:31px;

    margin-top:6px !important;
    margin-bottom:6px !important;

    padding:5px 10px !important;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #48442f;
    border-radius:6px !important;

    background:#191914 !important;

    color:#d4c88e !important;

    font-size:11px !important;
    font-weight:900 !important;

    letter-spacing:.3px;

    text-align:center;
}


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

.scoreboard{
    min-height:150px;

    margin-top:6px !important;

    padding:7px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        165px
        minmax(0,1fr);

    gap:7px !important;

    border:1px solid var(--border);
    border-radius:10px !important;

    background:#0d151e !important;

    box-shadow:none !important;
}


/* =========================================================
   TEAMS
   ========================================================= */

.team-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:134px !important;

    margin:0 !important;
    padding:12px 15px !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    grid-template-rows:
        auto
        1fr
        auto;

    column-gap:12px;

    align-items:center;

    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:7px !important;

    overflow:hidden;

    cursor:pointer;

    box-shadow:none !important;
    transition:none !important;
}

.team-btn.home{
    background:
        linear-gradient(
            115deg,
            var(--home2),
            var(--home)
        ) !important;
}

.team-btn.away{
    background:
        linear-gradient(
            115deg,
            var(--away),
            var(--away2)
        ) !important;
}

.team-name{
    grid-column:1;

    color:#fff;

    font-size:
        clamp(17px,1.65vw,23px) !important;

    font-weight:900 !important;

    line-height:1.05 !important;

    text-align:left;

    white-space:normal !important;
    overflow-wrap:anywhere;
}

.team-score{
    grid-column:2;
    grid-row:1 / 4;

    min-width:90px;

    align-self:center;

    color:#fff;

    font-size:
        clamp(62px,5.6vw,84px) !important;

    font-weight:950 !important;

    line-height:.9 !important;

    letter-spacing:-3px;

    text-align:center;

    font-variant-numeric:tabular-nums;

    text-shadow:none !important;
}

.bonus-indicator{
    width:max-content;

    padding:2px 6px;

    border-radius:4px;

    background:rgba(0,0,0,.16);

    color:#fff;

    font-size:8px !important;
    font-weight:900 !important;
}

.team-fouls{
    align-self:end;

    color:rgba(255,255,255,.76);

    font-size:9px !important;
    font-weight:700 !important;

    line-height:1.3;
}


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

.clock-box{
    min-height:134px;

    padding:8px !important;

    display:flex !important;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    border:1px solid #293542;
    border-radius:7px !important;

    background:#05090f !important;

    box-shadow:none !important;
}

.period{
    margin-bottom:7px;

    color:#93a6b9 !important;

    font-size:13px !important;
    font-weight:850 !important;

    letter-spacing:.8px;
}

.clock{
    color:#fafafa !important;

    font-size:52px !important;
    font-weight:950 !important;

    line-height:.92 !important;

    letter-spacing:-4px;

    cursor:pointer;

    font-variant-numeric:tabular-nums;

    text-shadow:none !important;
}


/* =========================================================
   PERIOD SCORES
   ========================================================= */

.quarters{
    min-height:0 !important;

    margin-top:7px !important;
    margin-bottom:6px !important;

    padding:6px 9px !important;

    display:flex !important;
    align-items:center;

    overflow-x:auto;

    border:1px solid #24313e;
    border-radius:7px;

    background:#0d161f !important;
}

.quarters:empty{
    display:none !important;
}

.quarters > *{
    min-height:auto !important;

    margin:0 5px 0 0 !important;

    padding:5px 10px !important;

    border-radius:5px !important;
}


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

.mini-stats{
    margin-top:5px !important;
    margin-bottom:5px !important;

    display:grid !important;

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

    gap:6px !important;
}

.mini-stats:empty{
    display:none !important;
}

.mini-team{
    min-width:0;

    border:1px solid var(--border) !important;
    border-radius:7px !important;

    background:var(--panel) !important;

    overflow:hidden;

    box-shadow:none !important;
}

.mini-title{
    padding:5px 8px;

    border-bottom:1px solid var(--border2);

    color:#adb8c4;

    font-size:10px !important;
    font-weight:850 !important;
}


/* =========================================================
   WORKSPACE
   ========================================================= */

.live-panel{
    margin-top:10px !important;
    margin-bottom:16px !important;

    display:grid !important;

    grid-template-columns:
        440px
        minmax(500px,1fr);

    gap:9px !important;

    align-items:stretch;

    justify-content:center;
}


/* quando il roster non è ancora richiesto */

.live-panel:has(#playersList:empty){
    grid-template-columns:
        minmax(480px,540px) !important;

    justify-content:center !important;
}

.live-panel:has(#playersList:empty) #playersPanel{
    display:none !important;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel{
    width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:10px !important;

    border:1px solid #293540 !important;
    border-radius:8px !important;

    background:#101821 !important;

    color:var(--text) !important;

    box-shadow:none !important;
}

.panel-title{
    margin:0 0 9px;

    padding-bottom:7px;

    border-bottom:1px solid var(--border2);

    color:#8c9aaa !important;

    font-size:9px !important;
    font-weight:850 !important;

    letter-spacing:1px;

    text-transform:uppercase;

    text-align:left !important;
}


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

.actions{
    display:grid !important;

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

    gap:7px !important;
}

.action{
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;

    margin:0 !important;
    padding:6px !important;

    border:1px solid #344252 !important;
    border-radius:6px !important;

    background:var(--neutral-action) !important;

    color:#edf1f5 !important;

    font-size:15px !important;
    font-weight:900 !important;

    line-height:1 !important;

    cursor:pointer;

    box-shadow:none !important;
    transition:none !important;

    touch-action:manipulation;
}


/* tiri */

.action.p2,
.action.p3,
.action.ft{
    background:var(--blue-action) !important;

    border-color:#28527e !important;
}


/* falli / decrementi */

.action.minus,
.action.foul{
    background:var(--red-action) !important;

    border-color:#653636 !important;
}


/* sanzioni */

.action.tech,
.action.uns,
.action.exp{
    background:#222c38 !important;

    border-color:#394653 !important;

    color:#dce2e8 !important;
}


/* =========================================================
   BENCH
   ========================================================= */

.staff-box{
    margin-top:8px !important;

    display:grid !important;

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

    gap:6px !important;
}

.staff-btn{
    width:100% !important;
    min-height:40px !important;

    padding:5px !important;

    border:1px solid #334252 !important;
    border-radius:6px !important;

    background:#192534 !important;

    color:#d5dde5 !important;

    font-size:9px !important;
    font-weight:850 !important;

    cursor:pointer;

    box-shadow:none !important;
}


/* =========================================================
   PLAYER PANEL
   ========================================================= */

#playersPanel{
    min-height:100%;
}

.selected-action{
    min-height:37px;

    margin:0 0 8px !important;

    padding:6px 9px !important;

    display:flex;

    align-items:center;
    justify-content:center;

    border:1px solid #2a4056 !important;
    border-radius:6px !important;

    background:#101d2a !important;

    color:#b8cadb !important;

    font-size:10px !important;
    font-weight:900 !important;

    text-align:center;

    text-transform:uppercase;
}

.players{
    width:100%;

    display:grid !important;

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

    gap:7px !important;
}

.players button{
    min-width:0 !important;
    min-height:58px !important;

    margin:0 !important;
    padding:6px !important;

    border:1px solid #324153 !important;
    border-radius:6px !important;

    background:#172331 !important;

    color:#e6ebf0 !important;

    font-size:11px !important;
    font-weight:800 !important;

    line-height:1.05 !important;

    cursor:pointer;

    overflow:hidden;

    box-shadow:none !important;
    transition:none !important;

    touch-action:manipulation;
}


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

.confirm-box{
    margin-top:5px !important;

    padding:7px !important;

    border:1px solid #294331 !important;
    border-radius:6px !important;

    background:#14231a !important;

    color:#afd0b8 !important;

    font-size:10px !important;
    font-weight:850 !important;

    box-shadow:none !important;
}


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

.status{
    position:fixed;

    left:50%;
    bottom:6px;

    transform:translateX(-50%);

    z-index:1500;

    min-width:300px;
    max-width:calc(100% - 20px);

    padding:5px 11px !important;

    border:1px solid #293541 !important;
    border-radius:999px !important;

    background:#080d13 !important;

    color:#8895a4 !important;

    font-size:8px !important;
    font-weight:750 !important;

    text-align:left;

    box-shadow:none !important;
}


/* =========================================================
   NO FLASH
   ========================================================= */

.score-flash,
#home_score.score-flash,
#away_score.score-flash,
#home_score,
#away_score,
#clock,
#period,
#home_team_fouls,
#away_team_fouls,
#homeBenchInfo,
#awayBenchInfo,
#miniStatsBox,
#miniHomePlayers,
#miniAwayPlayers,
#playersList,
#lastActionBar,
#guideText,
#quartersBox,
.team-score,
.team-fouls,
.mini-stats,
.mini-team,
.mini-players{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media(min-width:1300px){

    .scoreboard{
        grid-template-columns:
            minmax(0,1fr)
            175px
            minmax(0,1fr);
    }

    .live-panel{
        grid-template-columns:
            460px
            700px;
    }

    .live-panel:has(#playersList:empty){
        grid-template-columns:
            520px !important;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

    .topbar{
        grid-template-columns:
            repeat(7,minmax(0,1fr));
    }

    .scoreboard{
        grid-template-columns:
            minmax(0,1fr)
            130px
            minmax(0,1fr);
    }

    .clock{
        font-size:39px !important;
    }

    .live-panel{
        grid-template-columns:
            minmax(300px,.8fr)
            minmax(390px,1.2fr);
    }

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


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

@media(max-width:760px){

    html,
    body{
        background:#080d13 !important;
        background-image:none !important;
    }

    body{
        padding-bottom:30px;
    }

    .header,
    .topbar,
    .last-action,
    .guide,
    .scoreboard,
    .quarters,
    .mini-stats,
    .live-panel,
    .confirm-box{
        width:calc(100% - 10px);
    }

    .header{
        min-height:43px;

        padding:36px 2px 5px !important;

        font-size:8px;
    }

    .topbar{
        margin-top:5px !important;

        grid-template-columns:
            repeat(7,minmax(0,1fr));

        gap:3px;

        padding:4px;
    }

    .ctrl{
        min-height:34px !important;

        padding:2px !important;

        font-size:7px !important;
    }

    .last-action{
        height:26px;

        margin-top:4px !important;

        font-size:7px !important;
    }

    .guide{
        min-height:29px;

        margin-top:4px !important;
        margin-bottom:4px !important;

        font-size:9px !important;
    }

    .scoreboard{
        min-height:95px;

        grid-template-columns:
            minmax(0,1fr)
            72px
            minmax(0,1fr);

        gap:4px !important;

        padding:4px !important;
    }

    .team-btn{
        min-height:87px !important;

        padding:6px !important;

        column-gap:3px;
    }

    .team-name{
        font-size:9px !important;
    }

    .team-score{
        min-width:30px;

        font-size:32px !important;

        letter-spacing:-2px;
    }

    .team-fouls{
        font-size:6px !important;
    }

    .bonus-indicator{
        padding:1px 3px;

        font-size:6px !important;
    }

    .clock-box{
        min-height:87px;
    }

    .period{
        margin-bottom:4px;

        font-size:7px !important;
    }

    .clock{
        font-size:22px !important;

        letter-spacing:-2px;
    }

    .quarters{
        margin-top:4px !important;
        margin-bottom:4px !important;

        padding:3px 4px !important;
    }

    .mini-stats{
        margin:4px auto !important;

        grid-template-columns:
            1fr 1fr;

        gap:4px !important;
    }

    .live-panel,
    .live-panel:has(#playersList:empty){

        display:flex !important;

        flex-direction:column !important;

        width:calc(100% - 10px);

        margin-top:5px !important;

        gap:5px !important;
    }

    .live-panel:has(#playersList:empty) #playersPanel{
        display:none !important;
    }

    .panel{
        padding:6px !important;
    }

    .panel-title{
        margin-bottom:5px;

        padding-bottom:5px;

        font-size:8px !important;
    }

    .actions{
        gap:4px !important;
    }

    .action{
        min-height:47px !important;

        padding:3px !important;

        font-size:12px !important;
    }

    .staff-box{
        gap:4px !important;

        margin-top:4px !important;
    }

    .staff-btn{
        min-height:32px !important;

        padding:2px !important;

        font-size:7px !important;
    }

    .selected-action{
        min-height:30px;

        margin-bottom:5px !important;

        font-size:8px !important;
    }

    .players{
        grid-template-columns:
            repeat(3,minmax(0,1fr));

        gap:4px !important;
    }

    .players button{
        min-height:44px !important;

        padding:3px !important;

        font-size:9px !important;
    }

    .status{
        min-width:200px;
    }


    /*
       Safari iOS: niente layer grafici che
       possano causare repaint / flash
    */

    *,
    *::before,
    *::after{
        -webkit-backdrop-filter:none !important;
        backdrop-filter:none !important;
    }

    .scoreboard,
    .team-btn,
    .clock-box,
    .panel,
    .topbar,
    .mini-stats,
    .mini-team{
        box-shadow:none !important;
        transform:none !important;
        -webkit-transform:none !important;
    }
}


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

@media
(max-height:600px)
and (orientation:landscape){

    .header{
        padding-top:34px !important;

        font-size:7px;
    }

    .topbar{
        grid-template-columns:
            repeat(14,minmax(0,1fr));
    }

    .ctrl{
        min-height:28px !important;

        font-size:6px !important;
    }

    .scoreboard{
        min-height:72px;

        grid-template-columns:
            minmax(0,1fr)
            95px
            minmax(0,1fr);
    }

    .team-btn,
    .clock-box{
        min-height:66px !important;
    }

    .team-score{
        font-size:27px !important;
    }

    .clock{
        font-size:24px !important;
    }

    .mini-stats{
        display:none !important;
    }

    .live-panel{
        display:grid !important;

        grid-template-columns:
            340px
            minmax(400px,1fr) !important;
    }

    .live-panel:has(#playersList:empty){
        grid-template-columns:
            410px !important;
    }

    .action{
        min-height:34px !important;

        font-size:9px !important;
    }

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

    .players button{
        min-height:34px !important;

        font-size:8px !important;
    }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media(hover:none) and (pointer:coarse){

    button,
    .ctrl,
    .action,
    .team-btn,
    .staff-btn{

        touch-action:manipulation;

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



/* =========================================================
   FIX DEFINITIVO POSIZIONE AZIONI
   Il pannello AZIONI non deve spostarsi
   quando compare il pannello GIOCATORI
   ========================================================= */

.live-panel{
    display:grid !important;

    grid-template-columns:
        460px
        minmax(520px,700px) !important;

    justify-content:center !important;

    align-items:start !important;

    gap:10px !important;
}


/*
 * Anche quando playersList è vuoto,
 * manteniamo la stessa griglia.
 * Nascondiamo solo il pannello destro.
 */

.live-panel:has(#playersList:empty){
    grid-template-columns:
        460px
        minmax(520px,700px) !important;

    justify-content:center !important;
}


.live-panel:has(#playersList:empty) #playersPanel{
    display:block !important;

    visibility:hidden !important;

    pointer-events:none !important;
}


/*
 * Quando vengono caricati i giocatori,
 * il pannello diventa visibile nello stesso spazio.
 */

.live-panel:not(:has(#playersList:empty)) #playersPanel{
    display:block !important;

    visibility:visible !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

    .live-panel,
    .live-panel:has(#playersList:empty){

        grid-template-columns:
            minmax(300px,.8fr)
            minmax(390px,1.2fr) !important;

        justify-content:stretch !important;
    }

}


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

@media(max-width:760px){

    .live-panel,
    .live-panel:has(#playersList:empty){

        display:flex !important;

        flex-direction:column !important;

        width:calc(100% - 10px);

        gap:5px !important;
    }

    .live-panel:has(#playersList:empty) #playersPanel{

        display:none !important;

        visibility:hidden !important;
    }

}


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

@media
(max-height:600px)
and (orientation:landscape){

    .live-panel,
    .live-panel:has(#playersList:empty){

        display:grid !important;

        grid-template-columns:
            340px
            minmax(400px,1fr) !important;
    }

    .live-panel:has(#playersList:empty) #playersPanel{

        display:block !important;

        visibility:hidden !important;
    }

}



/* =========================================================
   SEQUENZA UI STABILE
   SQUADRA -> AZIONE -> GIOCATORE
   ========================================================= */

#livePanel{
    display:grid !important;

    grid-template-columns:
        460px
        minmax(520px,700px) !important;

    justify-content:center !important;

    align-items:start !important;

    gap:10px !important;
}


/* stato iniziale */
#actionsPanel{
    display:none;
}

#playersPanel{
    display:none;
}


/* stato dopo scelta squadra */
body.sb-step-actions #actionsPanel{
    display:block !important;
}

body.sb-step-actions #playersPanel{
    display:none !important;
}


/* stato dopo scelta azione */
body.sb-step-players #actionsPanel{
    display:block !important;
}

body.sb-step-players #playersPanel{
    display:block !important;
}


/* su desktop azioni sempre nella stessa posizione */
body.sb-step-actions #livePanel{
    grid-template-columns:
        460px
        minmax(520px,700px) !important;
}

body.sb-step-actions #playersPanel{
    visibility:hidden !important;
    display:block !important;
    pointer-events:none !important;
}

body.sb-step-players #playersPanel{
    visibility:visible !important;
    pointer-events:auto !important;
}


/* mobile: sequenza verticale */
@media(max-width:760px){

    #livePanel{
        display:flex !important;

        flex-direction:column !important;

        width:calc(100% - 10px);

        gap:5px !important;
    }

    body.sb-step-actions #playersPanel{
        display:none !important;
    }

    body.sb-step-players #playersPanel{
        display:block !important;
        visibility:visible !important;
    }
}


/* landscape */
@media
(max-height:600px)
and (orientation:landscape){

    #livePanel{
        display:grid !important;

        grid-template-columns:
            340px
            minmax(400px,1fr) !important;
    }
}