/* Caen Poker - Chrono Live Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --gold: #c9a84c; --gold-l: #e8c96a; --red: #e03535; --green: #2ecc71; --orange: #e67e22; --bg: #08090c; --bg2: #0e1117; --border: rgba(255, 255, 255, .07); --text: #e8eaf0; --muted: rgba(232, 234, 240, .4); }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: 'Barlow', sans-serif; overflow: hidden; }
html:has(body.sitngo) { background: #090818; }
#app { height: 100dvh; display: grid; grid-template-rows: auto 3px 1fr auto; }
#header { background: linear-gradient(180deg, #0d1017, rgba(13, 16, 23, 0)); padding: .6rem 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
#logo { height: 32px; width: auto; }
#header-title { text-align: center; flex: 1; padding: 0 1rem; }
#header-tournoi { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(.9rem, 2.2vw, 1.4rem); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
#header-etape { font-size: clamp(.65rem, 1.2vw, .8rem); color: var(--muted); margin-top: .1rem; }
#header-right { text-align: right; min-width: 140px; }
#clock { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 700; color: var(--gold); letter-spacing: .05em; }
#progress-bar-wrap { background: rgba(255, 255, 255, .05); }
#progress-bar { height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-l)); transition: width .5s linear; }
#main { display: grid; grid-template-columns: 250px 1fr 260px; overflow: hidden; }
#panel-structure { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
#panel-structure h2 { font-family: 'Barlow Condensed', sans-serif; font-size: .65rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: .65rem 1rem .45rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#struct-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
#struct-scroll::-webkit-scrollbar { display: none; }
.struct-header { display: grid; grid-template-columns: 28px 1fr 1fr 1fr 36px; padding: .25rem .65rem; gap: .15rem; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .2); border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg2); z-index: 1; }
.struct-row { display: grid; grid-template-columns: 28px 1fr 1fr 1fr 36px; padding: .3rem .85rem; gap: .2rem; font-size: .75rem; color: var(--muted); transition: background .15s; }
.struct-row.actif { background: rgba(201, 168, 76, .12); color: var(--gold); font-weight: 700; }
.niv-badge { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 3px; font-weight: 900; font-size: .72rem; }
.struct-row.actif .niv-badge { background: var(--gold); color: #000; }
.struct-break { padding: .28rem .85rem; background: rgba(74, 184, 216, .06); color: rgba(74, 184, 216, .65); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-top: 1px solid rgba(74, 184, 216, .1); border-bottom: 1px solid rgba(74, 184, 216, .1); }
#center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .5rem 1rem; position: relative; gap: .15rem; }
#niveau-badge { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(.9rem, 2.8vw, 1.5rem); font-weight: 900; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
#chrono { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(6rem, 22vw, 15rem); font-weight: 900; line-height: .88; letter-spacing: -.01em; color: #fff; text-shadow: 0 0 80px rgba(255, 255, 255, .1); transition: color .3s; font-variant-numeric: tabular-nums; }
#chrono.ok { color: #fff; }
#chrono.warning { color: var(--orange); text-shadow: 0 0 50px rgba(230, 126, 34, .35); }
#chrono.critical { color: var(--red); text-shadow: 0 0 60px rgba(224, 53, 53, .5); animation: blink .8s infinite; }
@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .2 } }
#statut-label { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(.75rem, 1.8vw, 1.1rem); font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: var(--muted); }
#info-bar { display: flex; gap: 1.5rem; margin-top: .3rem; font-size: clamp(.65rem, 1.2vw, .78rem); color: var(--muted); }
.info-item { text-align: center; }
.info-item .ival { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 700; color: var(--text); }
.info-item .ilbl { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .1rem; color: rgba(232, 234, 240, 0.6);}
#blinds-row { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 580px; margin-top: .5rem; gap: .5rem; }
.blind-box-current { width: 100%; text-align: center; background: rgba(201, 168, 76, .07); border: 2px solid rgba(201, 168, 76, .4); border-radius: 8px; padding: .75rem 1.5rem; }
.blind-box-next { width: 100%; text-align: center; background: rgba(255, 255, 255, .02); border: 1px solid var(--border); border-radius: 5px; padding: .45rem 1rem; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.blind-label { font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.blind-val-big { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 900; color: var(--gold); line-height: 1; }
.blind-ante-big { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; color: rgba(232, 234, 240, .7); margin-top: .2rem; letter-spacing: .04em; }
.blind-next-label { font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.blind-next-val { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 2.5vw, 1.6rem); font-weight: 700; color: rgba(232, 234, 240, .5); }
.blind-next-ante {font-family: 'Barlow Condensed', sans-serif; font-size: clamp(0.8rem, 2vw, 1.2rem); font-weight: 700; color: rgba(232, 234, 240, .5); }
/* ── Overlay pause / break : couvre tout le panneau central ── */
#pause-banner {
    display: none;
    position: absolute;
    inset: 0;
    /* Fond semi-transparent foncé pour masquer le chrono de jeu en dessous */
    background: rgba(0, 0, 0, .88);
    /* Centrage parfait horizontal + vertical */
    align-items: center;
    justify-content: center;
    z-index: 10;
    flex-direction: column;
    gap: .75rem;
    /* Légère bordure lumineuse orange pour signaler la pause */
    outline: 2px solid rgba(230, 126, 34, .15);
    outline-offset: -2px;
}
#pause-banner.show { display: flex; }

/* Texte principal "⏸ PAUSE" ou "⏸ BREAK" */
#pause-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    letter-spacing: .2em;
    color: var(--orange);
    text-shadow: 0 0 40px rgba(230, 126, 34, .5);
    animation: pulse-p 2s infinite;
    text-align: center;
    /* Empêche le texte de dépasser sur petits écrans */
    max-width: 90%;
}

@keyframes pulse-p { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* Label du break (ex: "PAUSE REPAS") — affiché sous le titre ⏸ */
#break-label-text {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 700;
    color: rgba(74, 184, 216, .9);
    letter-spacing: .15em;
    text-align: center;
    /* masqué par défaut, affiché uniquement en mode break structuré */
    display: none;
}

/* Chrono du break (décompte mm:ss de la durée du break) */
#break-chrono {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: clamp(3rem, 10vw, 7rem);
    font-weight: 900;
    color: var(--orange);
    line-height: 1;
    text-shadow: 0 0 40px rgba(230, 126, 34, .4);
    text-align: center;
    /* masqué par défaut */
    display: none;
}
#elim-flash { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .88); align-items: center; justify-content: center; flex-direction: column; animation: fadeIn .3s ease; }
#elim-flash.show { display: flex; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
#elim-flash-pos { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; color: var(--red); letter-spacing: .1em; text-shadow: 0 0 40px rgba(224, 53, 53, .5); margin-bottom: .5rem; }
#elim-flash-nom { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 900; color: #fff; letter-spacing: .04em; line-height: 1; }
#elim-flash-killer { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 3vw, 2rem); font-weight: 700; color: var(--muted); letter-spacing: .08em; margin-top: .6rem; }
#elim-flash-bar { position: absolute; bottom: 0; left: 0; height: 4px; background: var(--red); transition: width linear; }
#panel-stats { background: var(--bg2); border-left: 1px solid var(--border); display: flex; flex-direction: column; padding: .65rem .85rem; gap: .45rem; overflow: hidden; }
.stat-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border); border-radius: 5px; padding: .35rem .6rem; text-align: center; }
.stat-label { font-size: .58rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.stat-val { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 900; line-height: 1; }
.stat-val.green { color: var(--green); }
.stat-val.red { color: var(--red); }
.stat-val.gold { color: var(--gold); }
.stat-val.white { color: var(--text); }
#kills-panel { flex: 1; overflow: hidden; }
#kills-panel h3 { font-family: 'Barlow Condensed', sans-serif; font-size: .62rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .5rem; border-bottom: 1px solid var(--border); padding-bottom: .35rem; }
.kill-line { display: flex; justify-content: space-between; align-items: center; padding: .3rem .1rem; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: .78rem; }
.kill-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.kill-n { background: rgba(224, 53, 53, .18); color: var(--red); border: 1px solid rgba(224, 53, 53, .3); border-radius: 10px; padding: .1rem .45rem; font-size: .68rem; font-weight: 700; }
#footer { background: var(--bg2); border-top: 1px solid var(--border); padding: .4rem 1.5rem; display: flex; justify-content: space-between; align-items: center; font-size: .65rem; color: var(--muted); }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
#classement-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
#classement-list { flex: 1; overflow: hidden; min-height: 0; }
/* Lots : hauteur fixe pour 10 lots max (~22px/lot + header ~30px + gaps), laisse le reste au classement */
#lots-panel { flex-shrink: 0; max-height: 290px; overflow-y: auto; }
.classement-ligne { display: flex; align-items: center; gap: .4rem; padding: .18rem .1rem; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: .72rem; }
.cl-pos { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 900; flex-shrink: 0; }
.cl-pos.actif { background: rgba(46, 204, 113, .2); color: var(--green); border: 1px solid rgba(46, 204, 113, .3); }
.cl-pos.elim { background: rgba(224, 53, 53, .15); color: var(--red); border: 1px solid rgba(224, 53, 53, .25); }
.cl-nom { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-nom.actif { color: var(--text); }
.cl-nom.elim { color: var(--muted); }
.cl-badge { font-size: .65rem; font-weight: 700; padding: .1rem .4rem; border-radius: 8px; flex-shrink: 0; }
.cl-badge.actif { background: rgba(46, 204, 113, .15); color: var(--green); }
.cl-badge.elim { background: rgba(224, 53, 53, .1); color: var(--red); }

/* Portrait : message rotation */
@media (orientation: portrait) { #rotate-msg { display: flex !important; } #app { display: none !important; } }

/* Paysage mobile (hauteur < 500px) */
@media (orientation: landscape) and (max-height: 500px) {
    #app { font-size: 11px; }
    #header { padding: .15rem .6rem; height: 28px; }
    #header img { height: 18px; }
    #clock { font-size: .7rem; }
    #header-tournoi { font-size: .62rem; }
    #header-etape { display: none; }
    #btn-son { display: none; }
    #last-update { display: none; }
    #progress-bar-wrap { height: 2px; }
    #main { grid-template-columns: 200px 1fr 180px; height: calc(100dvh - 28px - 2px - 20px); gap: 0; }
    #panel-structure { padding: .2rem .3rem; overflow-y: auto; }
    #panel-structure h2 { font-size: .55rem; margin-bottom: .2rem; letter-spacing: .15em; }
    .struct-header { font-size: .55rem; padding: .1rem .2rem; }
    .struct-row { font-size: .6rem; padding: .12rem .2rem; gap: .15rem; }
    .niv-badge { width: 14px; height: 14px; font-size: .5rem; }
    .struct-break { font-size: .52rem; padding: .1rem; }
    #center { padding: .15rem .4rem; justify-content: center; gap: .1rem; overflow: hidden; }
    #niveau-badge { font-size: .58rem; padding: .08rem .45rem; margin-bottom: 0; }
    #chrono { font-size: clamp(3.2rem, 16vw, 6rem); line-height: 1; }
    #statut-label { font-size: .6rem; margin-top: 0; }
    #info-bar { flex-wrap: nowrap; gap: .15rem; justify-content: center; padding: .08rem .3rem; }
    .info-item { min-width: 0; flex: 1; text-align: center; }
    .ival { font-size: clamp(.6rem, 2.5vw, .82rem); }
    .ilbl { font-size: .45rem; }
    #blinds-row { gap: .4rem; margin-top: .08rem; }
    .blind-box-current { flex: 1.5; }
    .blind-box-next { flex: 1; padding: .2rem .4rem; }
    .blind-label { font-size: .45rem; }
    .blind-val-big { font-size: clamp(1.1rem, 5.5vw, 1.8rem); }
    .blind-ante-big { font-size: .5rem; }
    .blind-next-label { font-size: .45rem; }
    .blind-next-val { font-size: clamp(.7rem, 3vw, 1rem); }
    .blind-next-ante { font-size: .45rem; }
    #pause-banner { padding: .25rem; font-size: .75rem; }
    #panel-stats { display: flex !important; padding: .2rem .25rem; overflow: hidden; }
    #classement-panel { overflow: hidden; max-height: none; flex: 1; }
    #classement-panel h3 { font-size: .52rem; }
    #classement-label { font-size: .48rem; }
    .classement-ligne { padding: .1rem .2rem; font-size: .58rem; }
    #lots-panel { display: none; }
    #footer { height: 20px; padding: .15rem .5rem; font-size: .5rem; }
}

/* Paysage mobile moyen (hauteur 500-600px, ex: iPad mini paysage) */
@media (orientation: landscape) and (min-height: 500px) and (max-height: 600px) { #main { grid-template-columns: 220px 1fr 180px; } #chrono { font-size: clamp(3.5rem, 17vw, 7rem); } #panel-structure { padding: .3rem .4rem; } .struct-row { font-size: .65rem; } }

/* Tablette paysage (hauteur 500-768px) */
@media (orientation: landscape) and (min-height: 500px) and (max-height: 768px) { #main { grid-template-columns: 220px 1fr 180px; } #chrono { font-size: clamp(4rem, 20vw, 9rem); } }

/* Desktop (max-width 768px portrait — fallback) */
@media (max-width: 768px) and (orientation: portrait) { #chrono { font-size: clamp(5rem, 30vw, 12rem); } }

/* ─── Animations inline ─── */
@keyframes rotateHint { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } }
@keyframes pulseVainqueur { 0%, 100% { transform: scale(1); text-shadow: 0 0 80px rgba(255, 215, 0, .7), 0 0 160px rgba(255, 215, 0, .3); } 50% { transform: scale(1.03); text-shadow: 0 0 120px rgba(255, 215, 0, .9), 0 0 200px rgba(255, 215, 0, .5); } }

/* ══════════════════════════════════════════════════════════════════
   THÈME SIT & GO — Palette violet/cyan, distinct du tournoi normal
   ══════════════════════════════════════════════════════════════════ */
body.sitngo {
    --gold:     #7c5cbf;   /* violet principal  (remplace l'or)        */
    --gold-l:   #a57fe8;   /* violet clair      (barre de progression) */
    --bg:       #090818;   /* fond bleu-nuit violacé                    */
    --bg2:      #0f0d22;   /* fond panneaux                             */
    --border:   rgba(124, 92, 191, .18); /* bordures teintées violet    */
    --accent:   #1cbfbf;   /* cyan accent (blinds, badges actifs)       */
    --accent-l: #4de0e0;   /* cyan clair                                */
    background: #090818;   /* forcé directement en plus de la variable  */
}

/* Barre de progression en violet→cyan */
body.sitngo #progress-bar {
    background: linear-gradient(90deg, var(--gold), var(--accent));
}

/* Horloge en violet clair */
body.sitngo #clock { color: var(--gold-l); }

/* Badge du niveau actif dans la structure */
body.sitngo .struct-row.actif {
    background: rgba(124, 92, 191, .14);
    color: var(--gold-l);
}
body.sitngo .struct-row.actif .niv-badge {
    background: var(--gold);
    color: #fff;
}

/* Breaks dans la structure : cyan */
body.sitngo .struct-break {
    background: rgba(28, 191, 191, .06);
    color: rgba(28, 191, 191, .7);
    border-top-color:    rgba(28, 191, 191, .15);
    border-bottom-color: rgba(28, 191, 191, .15);
}

/* Chrono principal inchangé (#fff), états warning/critical identiques */

/* Encadré blinds courantes : bordure violet */
body.sitngo .blind-box-current {
    background: rgba(124, 92, 191, .08);
    border-color: rgba(124, 92, 191, .45);
}
/* Valeur des blinds en cyan */
body.sitngo .blind-val-big { color: var(--accent); }

/* Pause/break banner : couleur cyan au lieu d'orange */
body.sitngo #pause-banner { outline-color: rgba(28, 191, 191, .2); }
body.sitngo #pause-text {
    color: var(--accent);
    text-shadow: 0 0 40px rgba(28, 191, 191, .5);
}
body.sitngo #break-chrono { color: var(--accent); }

/* Tuile stat en jeu : vert reste vert — pas de changement */

/* Badge classement actif en cyan */
body.sitngo .cl-pos.actif {
    background: rgba(28, 191, 191, .18);
    color: var(--accent);
    border-color: rgba(28, 191, 191, .3);
}
body.sitngo .cl-badge.actif {
    background: rgba(28, 191, 191, .12);
    color: var(--accent);
}

/* Bandeau header : légère teinte violette */
body.sitngo #header {
    background: linear-gradient(180deg, #0e0c1a, rgba(14, 12, 26, 0));
    border-bottom-color: rgba(124, 92, 191, .2);
    color: var(--gold-l);
}

/* Indicateur "SIT & GO" dans le titre du tournoi 
body.sitngo #header-tournoi::before {
    content: 'SIT & GO · ';
    color: var(--gold-l);
    font-size: .75em;
    letter-spacing: .12em;
}*/

/* Barre de progression des niveaux actif : fond violet */
body.sitngo .stat-val.gold { color: var(--gold-l); }