body{ background: var(--primary-bg); color: var(--primary-font); margin:0; padding:0; box-sizing:border-box; }

.player-root{ display:flex; min-height:100dvh; flex-direction:column; }

.header-banner {
    max-height: 240px;
    object-fit: contain;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    display: block;
}
/* Fixed, compact header */
.player-header{
    position:sticky; top:0; z-index:130;
    backdrop-filter: blur(8px);
    background: color-mix(in srgb, var(--primary-bg) 82%, transparent);
    /*border-bottom: 1px solid color-mix(in srgb, var(--secondary-bg) 18%, transparent);*/
}
/* Header en 2 lignes : meta centrée au 1er rang, pills au 2e rang */
.player-header .bar{
    max-width:680px; margin:0 auto; padding:.9rem .9rem .5rem .9rem;
    display:grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: auto auto;
    align-items:center;
    justify-items:center;
    row-gap:.5rem; column-gap:.6rem;
}
.player-header .meta{ grid-column: 1 / -1; grid-row: 1; text-align:center; display:flex; flex-direction:column; gap:.35rem; }
#players-pill{ grid-row:2; grid-column:2; justify-self:center; }
#state-pill{   grid-row:2; grid-column:3; justify-self:center; }
.player-header .title{ font-weight:800; font-size:1.02rem; line-height:1.1; }
.player-header .sub{ opacity:.85; font-size:.85rem; line-height:1.1; max-width:92vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 auto; }
.player-header .pill{ margin-left:0; font-weight:700; font-size:.8rem; padding:.25rem .6rem; border-radius:999px; background:var(--secondary-bg); color:var(--primary-bg); }
.player-header .pill.pill--players{ gap:.4rem; }
.player-header .pill.pill--players i{ font-size:16px; }

/* Content area (keeps room for bottom bar) */
.player-main{ flex:1 1 auto; display:flex; align-items:stretch; justify-content:center; }
.player-main .screen{
  --screen-hpad: .9rem;
  --screen-lpad: 1rem;
  width:100%;
  max-width:680px;
  margin:0 auto;
  padding: var(--screen-lpad) var(--screen-hpad) calc(5.8rem + var(--player-safe-bottom, env(safe-area-inset-bottom, 0)));
}
/* bingo en cours → compacter le padding L/R */
html.bingo-running .player-main .screen{
  --screen-hpad: .35rem; /* ajuste la valeur à ton goût */
  --screen-lpad: .35rem;
}

/* (optionnel) un peu plus d’air en paysage/écran large */
@media (min-width: 480px){
  html.bingo-running .player-main .screen{ --screen-hpad: .5rem; }
}

/* State sections */
[data-state] .state{ display:none; }
[data-state="En attente"] .state--waiting{ display:block; }
[data-state="En cours"] .state--running{ display:block; }
[data-state="Pause"]  .state--running{  display:block; }
[data-state="Partie terminée"]   .state--ended{   display:block; }

/* Cards */
.card{ display: flex; flex-direction: column; background: color-mix(in srgb, var(--primary-bg) 94%, #000 0%); border:1px solid color-mix(in srgb, var(--secondary-bg) 16%, transparent); border-radius:8px; padding:1rem; box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.card + .card{ margin-top:1rem; }
.card h3{ font-size:1rem; text-transform:uppercase; letter-spacing:.02em; color:var(--secondary-bg); margin:0 0 .5rem; }
.card > h3 { margin: 0 0 .5rem 0; }
.card__header{ display:flex; align-items:start; justify-content:space-between; }
.card .prize { display: flex; background: var(--primary-font); color: var(--primary-bg); font-weight: 600; border-radius: 1rem; padding: .5rem 1rem;; gap: .4rem; align-items: baseline; }
.card .middle-prize {margin: 1rem 0}
.card .rank  { line-height:1.2; color: var(--secondary-bg); }
.btn--icon-ghost{
    appearance:none; border:none; background:transparent; box-shadow:none;
    padding:0; margin:0; width:auto; height:auto; border-radius:0;
    color: var(--secondary-bg); font-weight:700; /* “gras” et couleur secondaire */
}
.btn--icon-ghost i{ font-size:18px; line-height:1; }
.btn--icon-ghost:active{ transform:translateY(0); }

/* Waiting: simple options grid */
.options-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; }
.opt{ display:flex; flex-direction:column; gap:.25rem; }
.opt label{ font-size:.85rem; opacity:.9; }
.opt input, .opt select{ border-radius:.6rem; border:1px solid #ced4da; background:#fff; color:#212529; padding:.55rem .65rem; font-size:1rem; }

/* Running: current item */
.current-item{ display:flex; flex-direction:column; gap:.5rem; }
.current-title{ font-size:clamp(1.1rem, 3.6vw, 1.4rem); font-weight:800; line-height:1.15; margin-top: .75rem; }
.current-comment{ font-size:clamp(0.8rem, 3.3vw, 1.1rem); font-weight:600; line-height:1.15; font-style: italic; opacity:.9; }
.current-meta{ display:flex; justify-content: space-between; gap:.5rem; opacity:.85; font-size:.95rem; }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; background: color-mix(in srgb, var(--secondary-bg) 18%, transparent); border-radius:.5rem; font-weight:700; }
.quiz-badge{ display:inline-flex; align-items:center; gap:.35rem; margin:0 0 .5rem 0; padding:.25rem .5rem; background: color-mix(in srgb, var(--secondary-bg) 18%, transparent); border-radius:.5rem; font-weight:700; }
/* Propositions affichées pendant la manche */
.options{ display: flex; flex-direction: column; margin-top:1rem; gap: 1.5rem; }
.option{ display:flex; align-items:center; justify-content:center; font-weight: 600; color:var(--primary-bg) ; background: var(--primary-font); border:3px solid color-mix(in srgb, var(--secondary-bg) 18%, transparent); padding:1rem 1rem; border-radius:.6rem; }
.option .t{margin-left:.35rem;}
/* chiffres à chasse fixe = pas de micro-sauts */
#running-index, #running-timer, #player-points-badge {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;       /* jamais de 2e ligne */
  text-align: center;        /* centrage horizontal */
  display: inline-flex;
  align-items: center;       /* centrage vertical conservé */
  justify-content: center;
}

/* choisis une largeur qui couvre le max prévu */
#running-index       { min-width: 7ch; }
#running-timer       { min-width: 9ch; }  /* ~ "⏱ 00:00" */
#player-points-badge { min-width: 7ch; }  /* ~ "+10 pts" */

#player-points-badge{
  transition: background-color .25s ease-out, color .25s ease-out, transform .25s ease-out;
}

/* état flash commun */
#player-points-badge.is-flash{
  transform: translateY(-1px);
}

/* bonne réponse */
#player-points-badge.is-flash-good{
  background-color: #33ff00;
  color:#212529;
}

/* mauvaise réponse */
#player-points-badge.is-flash-bad{
  background-color: #ff0000;
}

.option.reveal, .option.is-correct{
    background: color-mix(in srgb, #33ff00 60%, transparent);
    border-color: #33ff00;
    box-shadow: 0 0 0 .12rem color-mix(in srgb, #33ff00 22%, transparent) inset;
}
.option.is-incorrect{
    background: color-mix(in srgb, #ff0000 60%, transparent);
    border-color: #ff0000;
    box-shadow: 0 0 0 .12rem color-mix(in srgb, #ff0000 22%, transparent) inset;
    opacity: .92;
}
.option.is-correct .option-badge strong,
.option.is-incorrect .option-badge strong{
    filter: contrast(1.15);
}
/* petite transition visuelle douce */
.option.is-correct, .option.is-incorrect{
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
}
/* ✅ Désactivation (quiz + blindtest) : opacifier toutes les options lorsqu’on met aria-disabled="true" */
.option[aria-disabled="true"]{ opacity:.6; pointer-events:none; }

/* 🎯 Quiz uniquement : visuels “orga” (cercle image + lettre superposée) */
html[data-game="quiz"] .option.option-block{
    display:flex; align-items:center; gap:.75rem; padding:1rem 1rem; border-radius:.5rem;
}
html[data-game="quiz"] .option-img-wrap{
    position:relative; width:2.5rem; height:2.5rem;  /* taille fixe comme l’orga */
    border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.25); overflow:hidden;
}
html[data-game="quiz"] .option-img{
    max-width:70%; max-height:70%; object-fit:contain; display:block;
}
html[data-game="quiz"] .option-badge-overlay{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:1rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); pointer-events:none;
}
html[data-game="quiz"] .option-text{
    flex:1; line-height:1.2; overflow-wrap:break-word; white-space:normal;
}

.progress-row{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .75rem;}
.progress-track{flex:1;height:.5rem;border-radius:.375rem;background:color-mix(in srgb, var(--secondary-bg) 18%, transparent);overflow:hidden}
.progress-fill{height:100%;background:var(--secondary-bg);transition:width .18s linear}

/* Paused: two tabs (numeric vs paper) */
.tabs{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.tab{ border:1px solid color-mix(in srgb, var(--secondary-bg) 20%, transparent); padding:.4rem .7rem; border-radius:.7rem; font-weight:700; opacity:.85; }
.tab[aria-selected="true"]{ background:var(--secondary-bg); color:var(--primary-bg); opacity:1; }
.list{ display:grid; gap:.5rem; }
.row{ display:flex; align-items:center; justify-content:space-between; background: color-mix(in srgb, var(--primary-font) 6%, transparent); border:1px solid color-mix(in srgb, var(--secondary-bg) 14%, transparent); padding:.6rem .75rem; border-radius:.6rem; }
.row .iq{ display:flex; justify-content:start; align-items: center; }
.row .qa-cell, .option .qa-cell{ display: inline-flex; align-items: baseline; justify-content: center; text-align:center; flex-wrap: wrap; column-gap: .7rem; row-gap: 0; padding: 0 1rem; }
.row .qa{ flex: 1 1 auto; justify-content:center; min-width: 0; display: grid; }
.row .pts { white-space: nowrap; }
.qa-q{ font-size:clamp(0.8rem, 3.3vw, 1.1rem); opacity:.9; line-height:1.2; margin-bottom:.5rem; }
.qa-a{ font-weight:600; line-height:1.2; }
.qa-c{ font-size:clamp(0.8rem, 3.3vw, 1.1rem); opacity:.9; line-height:1.2; margin-top:.5rem; font-style: italic; }
.secondary-bg{color:var(--secondary-bg)}

/* Applique seulement aux lignes quiz (qa-row) dans des listes marquées is-quiz */
.list.is-quiz .row.qa-row { justify-content: flex-start; gap: .75rem; align-items: center; }
.list.is-quiz .row.qa-row .qa-cell { flex: 1 1 auto; min-width: 0; display: grid; align-items: start; text-align: left; }
.list.is-quiz .row.qa-row .qa { justify-content: start; text-align: left; }
.list.is-quiz .row.qa-row .pts { margin-left: auto; }
@supports(selector(:has(*))){ .list.is-quiz .row:not(:has(.qa-cell)) { justify-content: space-between; }}

/* Correction Bingo: grille 5 colonnes, cases carrées arrondies */
.correction-grid{
    display:grid;
    grid-template-columns: repeat(6, 1fr); /* + de colonnes par défaut */
    gap:.35rem;                             /* inter-cases réduit */
}
.correction-cell{
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:1 / 1;                    /* cases carrées */
    border-radius:.55rem;                   /* arrondi plus discret */
    border:1px solid color-mix(in srgb, var(--secondary-bg) 10%, transparent);
    background: color-mix(in srgb, var(--primary-font) 5%, transparent);
    font-weight:800;
    font-size: clamp(.70rem, 2.6vw, .95rem); /* texte lisible mais compact */
}
.correction-cell.played{
    background: var(--secondary-bg);
    color: var(--primary-bg);
    border-color: color-mix(in srgb, var(--secondary-bg) 36%, transparent);
}
/* Un peu plus dense si l’écran le permet */
@media (min-width: 420px){
    .correction-grid{ grid-template-columns: repeat(7, 1fr); }
}
@media (min-width: 560px){
    .correction-grid{ grid-template-columns: repeat(8, 1fr); }
}

/* Ended: podium */
.podium{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.6rem; text-align:center; }
.podium .p{ background: color-mix(in srgb, var(--secondary-bg) 14%, transparent); border-radius:.8rem; padding:.8rem .5rem; }
.podium .p strong{ display:block; font-size:1.2rem; }

/* ===== player controls — mobile (compat totale avec ton markup) ===== */
.player-controls{
    position: fixed; left:0; right:0; bottom:0; z-index:125;
    display:flex; justify-content:center; align-items:center;
    padding: .5rem .9rem calc(.5rem + var(--player-safe-bottom, env(safe-area-inset-bottom, 0)));
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -10px 30px rgba(0,0,0,.15);
    -webkit-tap-highlight-color: transparent;
}
.player-controls .bar{
    width:100%; max-width:680px;
    display:flex; align-items:center; justify-content:center;
    gap:.5rem;
}

/* Base boutons → icône-only, ronds, gros touch targets */
.btn{
    appearance:none; border:none; background:#fff; color:#212529;
    width:44px; height:44px; padding:0;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,.12);
    transition: transform .04s ease;
    /*font-size:0; line-height:1; /* masque les libellés textuels ("Suiv.", "Lancer", etc.) */
    touch-action: manipulation;
}
.player-controls .btn { font-size:0; line-height:1; }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{ opacity:.6; pointer-events:none; }
.btn i{ font-size:24px; line-height:1; display:inline-flex; }

/* Primaire (Play/Pause) mis en avant (+ grand) */
.btn--primary{
    background: var(--secondary-bg);
    color:#212529;
    width:52px; height:52px;
    box-shadow:0 3px 12px rgba(0,0,0,.16);
}
.btn--primary i{ font-size:26px; }

/* Icônes spécifiques */
#btn-quit{ width:44px; height:44px; }
#btn-quit i{ font-size:18px; color:#dc3545; }

/* Play/Pause : gestion nativement des labels & état loading sans changer le HTML */
#btn-playpause{ position:relative; }

/* Quand tu ajoutes/supprimes l’attribut [hidden] sur tes spans, le bon label reste affiché (mais le texte est masqué par font-size:0) */
#btn-playpause [data-label-play][hidden],
#btn-playpause [data-label-pause][hidden]{ display:none !important; }
#btn-playpause [data-label-end][hidden]{ display:none !important; }

/* Spinner via pseudo-élément (ajoute/retire la classe .loading au bouton en JS) */
#btn-playpause.loading::after{
    content:""; position:absolute; inset:0; margin:auto;
    width:22px; height:22px; border-radius:50%;
    border:3px solid rgba(0,0,0,.15); border-top-color:#212529;
    animation:player-spin 1s linear infinite;
}
@keyframes player-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* (Optionnel) mode sombre léger */
/*@media (prefers-color-scheme: dark){
    .player-controls{ background: rgba(22,22,24,.72); }
    .btn{ background:#2b2b2f; color:#f1f3f5; box-shadow:0 2px 10px rgba(0,0,0,.28); }
    .btn--primary{ background: var(--secondary-bg); color:#111; }
}*/

/* Helpers */
.muted{ opacity:.75; }
.welcome {flex-direction: column;}
.welcome span {margin-top: .3rem;}
.space{ height:.25rem; }

/* ===== Options bottom sheet ===== */
.sheet[hidden]{ display:none !important; }
.sheet{ position:fixed; inset:0; z-index:130; }
.sheet__backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.35);
    opacity:0; transition:opacity .2s ease;
}
.sheet__panel{
    position:absolute; left:0; right:0; bottom:0;
    background:#fff; color:#212529; border-top-left-radius:1rem; border-top-right-radius:1rem;
    padding:.9rem .9rem calc(1rem + env(safe-area-inset-bottom,0));
    transform: translateY(100%); transition: transform .24s ease;
    max-height: 80dvh; overflow:auto;
    box-shadow:0 -12px 30px rgba(0,0,0,.25);
}
.sheet--open .sheet__backdrop{ opacity:1; }
.sheet--open .sheet__panel{ transform: translateY(0); }

.sheet__header{
    display:flex; flex-direction: column; justify-content:space-between; gap:.6rem; margin-bottom:.6rem;
}
.sheet__header h2{ font-size:1rem; font-weight:800; margin:0; }
.sheet__header h2 > span { font-size: 0.9rem; font-weight: 400; font-style: italic; }

.sheet__body .options-grid{ gap:.75rem; }
.sheet__actions{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem;
}
.sheet__cta{ width:auto; height:48px; border-radius:1.25rem; padding:0 1rem; display:inline-flex; align-items:center; gap:.5rem; }
.sheet__ghost{ background:#f1f3f5; }

/* 1) Base : tout ce qui est marqué est caché par défaut */
[data-mode-only],
[data-game-only] { display: none; }

[data-stage="register"] #players-pill,
[data-stage="register"] #state-pill{
  display: none;
}

/* 2) Règles "indépendantes" */
/* — Mode seul (éléments SANS data-game-only) */
:root.paper-mode :where([data-mode-only~="paper"]:not([data-game-only])) { display: flex; }
:root:not(.paper-mode) :where([data-mode-only~="numeric"]:not([data-game-only])) { display: flex; }

/* — Jeu seul (éléments SANS data-mode-only) */
html[data-game="quiz"]      :where([data-game-only~="quiz"]:not([data-mode-only])) { display: flex; }
html[data-game="blindtest"] :where([data-game-only~="blindtest"]:not([data-mode-only])) { display: flex; }
html[data-game="bingo"]     :where([data-game-only~="bingo"]:not([data-mode-only])) { display: flex; }

/* 3) Règles "intersection" (éléments qui ont les DEUX attributs) */
:root.paper-mode[data-game="quiz"]      :where([data-game-only~="quiz"][data-mode-only~="paper"]) { display: flex; }
:root:not(.paper-mode)[data-game="quiz"]      :where([data-game-only~="quiz"][data-mode-only~="numeric"]) { display: flex; }
:root.paper-mode[data-game="blindtest"] :where([data-game-only~="blindtest"][data-mode-only~="paper"]) { display: flex; }
:root:not(.paper-mode)[data-game="blindtest"] :where([data-game-only~="blindtest"][data-mode-only~="numeric"]) { display: flex; }
:root.paper-mode[data-game="bingo"]     :where([data-game-only~="bingo"][data-mode-only~="paper"]) { display: flex; }
:root:not(.paper-mode)[data-game="bingo"]     :where([data-game-only~="bingo"][data-mode-only~="numeric"]) { display: flex; }

/* Gating */
:root:not([data-registered="1"]) .hide-until-registered { display: none !important; }
:root[data-registered="1"] #register-screen { display: none !important; }

/* Gate ouverte/fermée : message à la place du formulaire */
html[data-gate-open="0"] #register-screen form{ display:none; }
html[data-gate-open="0"] #register-closed{ display:flex; }
html[data-gate-open="1"] #register-closed{ display:none; }

/* Carte d’inscription : alignée avec les autres cards */
#register-screen.card {
    /*gap: .9rem;*/
    width: 85%;
    margin: auto;
    background: var(--primary-font);
    color: var(--primary-bg);
    font-weight: 600;
    /*background: color-mix(in srgb, var(--primary-bg) 94%, #000 0%);
    border: 1px solid color-mix(in srgb, var(--secondary-bg) 16%, transparent);*/
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

#register-screen h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--secondary-bg);
    margin: 0 0 .4rem 0;
}

/* Message quand la gate est fermée (remplace le formulaire) */
#register-closed {
    display: none;
    align-items: center;
    gap: 1.5rem;
    padding: .2rem 0 .1rem 0;
    color: var(--primary-bg);
}
#register-closed .muted { opacity: .85; }  

/* Form grid + label */
#register-screen form { display: grid; gap: 2rem; }
#register-screen label {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    opacity: .95;
    margin: .25rem 0 .35rem;
}

/* Champ texte (form-control) harmonisé */
.form-control{
    width:100%;
    appearance:none;
    background:color-mix(in srgb, var(--primary-font) 92%, var(--primary-bg) 8%);
    color: var(--primary-bg);
    font: inherit;
    line-height:1.25;
    padding:.65rem .75rem;
    border-radius:.7rem;
    border:1px solid color-mix(in srgb, var(--secondary-bg) 18%, #000 0%);
    box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
    outline:none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .05s ease;
}
.form-control:focus{
    border-color: color-mix(in srgb, var(--secondary-bg) 48%, #000 0%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--secondary-bg) 22%, transparent);
}
.form-control.is-invalid,
.form-control:invalid[aria-invalid="true"]{
    border-color:#ff2d00;
    box-shadow:0 0 0 3px color-mix(in srgb, #ff2d00 22%, transparent);
}
.form-control::placeholder{ color:#6c757d; opacity:.9; }
.form-control:-webkit-autofill{
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color:#212529;
}

/* Compteur & erreur */
#register-screen .char-counter{ display:none; font-size:.85rem; margin-top:.35rem; }
#register-screen .char-counter.is-over{ display:block; color:#ff2d00; font-weight:700; }
#error-message{
    color:#ff2d00;
    font-weight:700;
    margin-top:.35rem;
}

/* Bouton primaire cohérent (mêmes rayons/ombres que la page) */
#register-screen .btn.btn--primary, #register-screen .btn.btn--secondary, #screen-ended .btn.btn--primary{
    width:100%;
    height:42px;
    border-radius:30px;
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    background: var(--secondary-bg);
    color: var(--primary-bg);
    /*box-shadow: 0 3px 12px rgba(0,0,0,.16);*/
    font-size: 1rem;
    font-weight: 500;
    transition: transform .04s ease, filter .12s ease;
}
#register-screen .btn.btn--primary:active{ transform: translateY(1px); }
#register-screen .btn.btn--primary[disabled]{ opacity:.7; pointer-events:none; }

#register-screen .btn.btn--secondary{
    background:#ff2d00;
    color:#fff;
    opacity: .8;
}

.paper-unregister{
    width:85%;
    margin: 1.1rem auto 0;
}
.paper-unregister__btn{
    width:100%;
    height:42px;
    border-radius:18px;
    display:inline-flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--primary-font) 94%, var(--primary-bg) 6%);
    color: color-mix(in srgb, var(--primary-bg) 80%, var(--primary-font) 20%);
    border:1px solid color-mix(in srgb, var(--primary-bg) 18%, transparent);
    box-shadow:none;
    font-weight:600;
    opacity:.9;
}
.paper-unregister__btn:hover,
.paper-unregister__btn:focus{
    opacity:1;
    background: color-mix(in srgb, var(--primary-font) 90%, var(--primary-bg) 10%);
    outline:none;
}
.paper-unregister__btn:active{ transform: translateY(1px); }

/* État busy : spinner intégré sur le bouton (mêmes codes que ta barre) */
#playerForm[data-busy="1"] .btn.btn--primary{
    position:relative; pointer-events:none; opacity:.95;
}
#playerForm[data-busy="1"] .btn.btn--primary::after{
    content:""; width:18px; height:18px; border-radius:50%;
    border:3px solid rgba(0,0,0,.15); border-top-color:#212529;
    animation: regspin 1s linear infinite; margin-left:.5rem;
}
@keyframes regspin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* Mode sombre — reprend tes tons globaux */
/*@media (prefers-color-scheme: dark){
    #register-screen.card {
    background: color-mix(in srgb, var(--primary-bg) 86%, #000 0%);
    border-color: color-mix(in srgb, var(--secondary-bg) 22%, transparent);
    }
    .form-control{
    background: #1f1f22; color:#f1f3f5;
    border-color: color-mix(in srgb, var(--secondary-bg) 22%, #fff 0%);
    }
    .form-control::placeholder{ color:#adb5bd; }
    #playerForm[data-busy="1"] .btn.btn--primary::after{
    border-color: rgba(255,255,255,.2); border-top-color:#fff;
    }
}*/

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce){
    .form-control, #register-screen .btn.btn--primary { transition: none !important; }
    #playerForm[data-busy="1"] .btn.btn--primary::after{ animation: none; }
}

/* ===== Bingo grid (5×4 mobile-first) ===== */
/* zone bingo en “plein écran” mobile */
.bingo-area{
  width:100%;
  flex-direction: column;
  align-items: center;
}

/* grille 5×4, pleine largeur */
.bingo-card{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:7px 5px;
  width:100%;
}
.bingo-card--inline{
  padding:0;            /* plus de padding de card */
  margin-bottom: .5rem;
}

/* case */
.bingo-card > label{ position:relative; display:block; border-radius:8px; background:var(--secondary-bg); }
.bingo-card input{ display:none; }
.bingo-card .mark{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border-radius:8px; background:var(--primary-font); color:var(--primary-bg); overflow:hidden; text-align:center;
  padding:.35rem; height:100px;
  box-sizing: border-box;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Locked > prend le dessus sur checked */
.bingo-card label.bingo-cell--locked input:checked + .mark,
.bingo-card label.bingo-cell--locked .mark {
  background: var(--secondary-bg);
  color: var(--primary-bg);
  box-shadow: 0 0 0 .12rem color-mix(in srgb, var(--secondary-bg) 60%, transparent) inset;
  border: 1px solid color-mix(in srgb, var(--secondary-bg) 70%, transparent);
  cursor: default;
}

.bingo-card label.bingo-cell--locked .case-morceau-nom,
.bingo-card label.bingo-cell--locked .case-artiste-nom{
  opacity: 1;
}

/* contenus */
.case-numero{ font-weight:700; font-size:clamp(.8rem,2.4vw,1rem); line-height:1.1; margin-bottom: auto;}
.case-morceau-nom{
  font-weight:600; font-size:clamp(.75rem,2.9vw,.95rem); line-height:1.2; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.case-artiste-nom{
  font-weight:700; font-size:clamp(.7rem,2.5vw,.9rem); line-height:1.1; text-transform:uppercase;
  margin-top:auto; opacity:.85; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* état coché */
.bingo-card label input:checked + .mark{
  background: color-mix(in srgb, var(--secondary-bg) 50%, var(--primary-font));
  box-shadow: 0 0 0 .12rem color-mix(in srgb, var(--secondary-bg) 54%, transparent) inset;
  border: 1px solid color-mix(in srgb, var(--secondary-bg) 60%, transparent);
}

/* ===== Global Pause Overlay ===== */
.pause-overlay[hidden] { display: none; }

.pause-overlay{
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top, 0) .75rem calc(.75rem + var(--player-safe-bottom, env(safe-area-inset-bottom, 0)));
  background: rgba(0,0,0,.25);  /* voile */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);   /* floute ce qui est derrière */
  pointer-events: auto;         /* bloque les interactions sous-jacentes */
}

/* Badge “Jeu en pause” */
.pause-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .2px;
  background: var(--secondary-bg);
  color: var(--primary-bg);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.06);
}

/* petit plus : mode sombre */
/*@media (prefers-color-scheme: dark){
  .pause-badge{
    background: rgba(24,24,24,.92);
    color: #fff;
    border-color: rgba(255,255,255,.08);
  }
}*/

html.is-paused, html.is-paused body { overflow: hidden; }

/* Rang au centre, 2 lignes */
.player-rank-pill{
  flex: 1;
  min-width: 0;
  padding: .25rem .75rem .3rem;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  font-size: .75rem;
  /*background: rgba(0,0,0,.04);*/
  color:#212529;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-rank-pill .line-top{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  opacity: .7;
}

.player-rank-pill .value{
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.1;
}

/* Score à droite, 2 lignes */
.player-score-badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  gap: 0;
  border-radius: 999px;
  font-size: .75rem;
  background:#fff;
  color:#212529;
}

.player-score-badge .line-top{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  opacity: .7;
}

.player-score-badge .line-bottom{
  display: inline-flex;
  align-items: baseline;
  gap: .15rem;
}

.player-score-badge .value{
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
}

.player-score-badge .unit{
  font-size: .8rem;
  opacity: .85;
}

.player-score-badge.bump{
  animation: score-bump .32s ease-out;
}

.player-score-badge .value.is-medal {
  font-size: 1.5rem;      /* ajuste à ton goût */
  line-height: 1;
  display: inline-block;
}

.bingo-card-number {
  margin-top: .3rem;
}

@keyframes score-bump{
  0%   { transform: scale(1); }
  25%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Ligne "Tu remportes :" */
.end-subtitle .end-prize-label{
  display: block;
  margin-top: .4rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* Ligne du lot */
.end-subtitle .end-prize{
  display: inline;
  color: var(--secondary-bg);
  line-height: 1.2;
}

.promo-card {
    border: 3px solid var(--secondary-bg);
    padding-bottom: 1rem;
}

.promo-card a.btn,
.promo-card a.btn--primary {
  text-decoration: none;
}

.promo-card a.btn:hover,
.promo-card a.btn--primary:hover,
.promo-card a.btn:focus,
.promo-card a.btn--primary:focus {
  text-decoration: none;
}

.rs-card {
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    border:none;
}

.cotton {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.rs-link {
    color: var(--secondary-bg);
}

/* === SweetAlert2 – style harmonisé avec l’UI du jeu === */

/* Pop-up de base */
.swal2-popup {
    border-radius: 1.1rem !important;
    background: var(--primary-font) !important;   /* même fond clair que les cards */
    color: var(--primary-bg) !important;
    box-shadow: 0 18px 60px rgba(0,0,0,0.35);
    padding: 1.75rem 1.75rem 1.4rem !important;
}

/* Variante “compacte” utilisée côté orga */
.swal2-popup.swal-small {
    max-width: 420px !important;
    width: calc(100% - 2rem) !important;
    border: 3px solid var(--secondary-bg) !important; /* bordure secondaire */
    padding: 1.5rem 1.75rem 1.25rem !important;
}

/* Titre de la pop-up */
.swal-title-small,
.swal2-title.swal-title-small {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: var(--secondary-bg) !important;
    padding: 0 !important;
}

/* Texte / html container */
.swal-text-small,
.swal2-html-container.swal-text-small {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--primary-bg) !important;
}

/* Zone des boutons : un peu plus compacte */
.swal2-actions {
    margin: .8rem 0 0 !important;
    gap: 0.75rem !important;
}

/* Bouton principal (confirm) → couleur secondaire du jeu */
.swal2-confirm.swal-btn-small,
.swal2-confirm.swal2-styled.swal-btn-small {
    background: var(--secondary-bg) !important;
    color: var(--primary-bg) !important;
    border-radius: 999px !important;
    padding: 0.6rem 1.4rem !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border: 1px solid color-mix(in srgb, var(--secondary-bg) 80%, #000 0%) !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.18);
}
.swal2-confirm.swal-btn-small:hover {
    filter: brightness(1.05);
}

/* Bouton secondaire (cancel) → fond clair + bordure neutre */
.swal2-cancel.swal-btn-small,
.swal2-cancel.swal2-styled.swal-btn-small {
    background: color-mix(in srgb, var(--primary-font) 92%, var(--primary-bg) 8%) !important;
    color: var(--primary-bg) !important;
    border-radius: 999px !important;
    padding: 0.6rem 1.4rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: 1px solid color-mix(in srgb, var(--primary-bg) 14%, transparent) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

/* Icône SweetAlert2 : plus petite et bien centrée dans la popup */
.swal2-popup.swal-small .swal2-icon{
    margin: 0 auto .9rem !important;   /* centré horizontalement + espace sous l’icône */
    transform: scale(.7);              /* réduction globale de l’icône */
    transform-origin: center center;
}

.swal2-popup.swal-small .swal2-icon.swal2-warning {
    border-color: var(--primary-bg) !important;
    color: var(--primary-bg) !important; /* pour le "!" */
}

.swal2-popup.swal-small .swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--primary-bg) !important; /* au cas où, selon la version */
}

/* Version mobile : pop-up + petite + texte et boutons réduits */
@media (max-width: 768px) {
    .swal2-popup.swal-small {
        width: 86vw !important;
        max-width: 86vw !important;
        padding: 1.25rem 1.4rem 1.1rem !important;
    }

    .swal-title-small {
        font-size: 1.2rem !important;
    }

    .swal-text-small {
        font-size: 0.85rem !important;
    }

    .swal-btn-small {
        font-size: 0.85rem !important;
        padding: 0.55rem 1.1rem !important;
    }

    .swal2-popup.swal-small .swal2-icon{
        transform: scale(.6);
        margin-bottom: .6rem !important;
    }
}

/* Notification > pop-up > général */

.colored-toast
{
    display:block !important;
    border:5px solid var(--secondary-bg);
    border-radius:15px !important;
    padding:0.75em !important;
}

.colored-toast .swal2-icon
{
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:0 !important;
    margin-bottom:30px !important;
}

.colored-toast .swal2-title 
{
    color: var(--secondary-bg);
    text-align:center !important;
    font-size:1.2em !important;
    line-height:1.4em !important;
    font-weight:600 !important;
}

.colored-toast .swal2-html-container 
{
    color: var(--primary-bg);
    text-align:center !important;
    font-size:0.9em !important;
}

.colored-toast .swal2-phase
{
    font-size:1.2em !important;
    font-weight:bold;
    color: var(--primary-bg);
}

.colored-toast a
{
   color:var(--secondary-bg);
   font-weight:600;
   font-size:1.1em; 
}

.colored-toast .swal2-close {color:var(--primary-bg);}        

.colored-toast.swal2-icon-success {border:5px solid var(--secondary-bg);}
.colored-toast.swal2-icon-success .swal2-title {color:var(--secondary-bg);}

/* Notification > pop-up > class spécifique succes, à la couleur de la phase correspondante */
.success-1 .colored-toast {border:5px solid var(--secondary-bg) !important;}
.success-1 .colored-toast .swal2-title {color:var(--secondary-bg) !important;}

.success-2 .colored-toast {border:5px solid var(--secondary-bg);}
.success-2 .colored-toast .swal2-title {color:var(--secondary-bg) !important;}

.success-3 .colored-toast {border:5px solid var(--secondary-bg);}
.success-3 .colored-toast .swal2-title {color:var(--secondary-bg) !important;}

.success-5 .colored-toast {border:5px solid var(--secondary-bg);}
.success-5 .colored-toast .swal2-title {color:var(--secondary-bg) !important;}


.colored-toast.swal2-icon-error {border:5px solid #f27474;}
.colored-toast.swal2-icon-error .swal2-title {color:#f27474;}

.colored-toast.swal2-icon-warning {border:5px solid #f8bb86;}
.colored-toast.swal2-icon-warning .swal2-title {color:#f8bb86;}

.colored-toast.swal2-icon-info {border:5px solid var(--secondary-bg);}
.colored-toast.swal2-icon-info .swal2-title {color:var(--secondary-bg);}

.colored-toast.swal2-icon-question {border:5px solid #87adbd;}
.colored-toast.swal2-icon-question .swal2-title {color:#87adbd;}

/* Notification > pop-up > sablier d'introduction */

.lds-hourglass {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 60px;
}
.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 8px;
  box-sizing: border-box;
  border: 24px solid var(--secondary-bg);
  border-color: var(--secondary-bg) transparent var(--secondary-bg) transparent;
  animation: lds-hourglass 1.2s infinite;
}
@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    transform: rotate(1800deg);
  }
}

/* === Transition banner (blindtest & quiz) === */
.transition-banner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:.85rem .9rem;
  margin:.4rem 0;
  border-radius:.9rem;
  background:color-mix(in srgb, var(--secondary-bg) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--secondary-bg) 26%, transparent);
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  text-align:center;
  gap:.15rem;
}

.transition-banner__label{
  font-weight:800;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.transition-banner__sub{
  font-size:.85rem;
  opacity:.9;
}

.transition-banner__pulse{
  width:28px;
  height:4px;
  margin-top:.3rem;
  border-radius:999px;
  background:var(--secondary-bg);
  opacity:.8;
  animation:transition-banner-pulse 1s ease-in-out infinite alternate;
}

@keyframes transition-banner-pulse{
  from{ transform:scaleX(.7); opacity:.4; }
  to{ transform:scaleX(1.4); opacity:1; }
}

/* Mode embed (organisateur) : on laisse l'iframe gérer la hauteur */
html.gm-embed,
html.gm-embed body {
  height: 100%;
}

/*html.gm-embed .player-main .screen {
  padding: 0;
}*/

html.gm-embed .header-banner,
html.gm-embed .player-header,
html.gm-embed #btn-quit {
  display: none !important;
}

/* On force un "mini plein écran" interne pour que la nav ait un bas où se coller */
html.gm-embed .player-root {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 4.5rem; /* réserve la hauteur de la nav pour ne pas masquer le contenu */
}

/* Le contenu prend la place au-dessus de la nav */
html.gm-embed .player-main {
  flex: 1 0 auto;
}

html.gm-embed .current-meta {
  gap: .2rem !important;
  font-size: .85rem !important;
}

/* Nav fixée en bas de l'iframe (donc en bas du player-interface côté orga) */
html.gm-embed .player-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

/* === GM iframe + Bingo : laisser la grille définir la hauteur === */

/* En mode GM embed sur le bingo, on laisse le document prendre sa hauteur naturelle */
html.gm-embed[data-game="bingo"],
html.gm-embed[data-game="bingo"] body {
  height: auto !important;
}

/* On annule les min-height plein écran éventuels */
html.gm-embed[data-game="bingo"] .player-root {
  min-height: 0 !important;
  display: block;
  padding-bottom: 4.5rem; /* réserve pour la nav si elle est fixée */
}

/* Pas de conteneur bingo qui force un viewport interne */
html.gm-embed[data-game="bingo"] .player-main,
html.gm-embed[data-game="bingo"] .player-main .screen,
html.gm-embed[data-game="bingo"] .bingo-area {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: .5rem !important;
}

/* La grille elle-même reste libre */
html.gm-embed[data-game="bingo"] .bingo-card {
  height: auto !important;
}

/* Nav toujours fixée en bas de l'iframe (la "carte" côté orga) */
html.gm-embed[data-game="bingo"] .player-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
}

.end-title {
  margin: 0;
}
.end-subtitle {
  margin-top: 1rem;
  margin-bottom: 0;
}
.promo-card >h2 {
  margin: 0;
}