/* ============================================================
   host.css — styles de la page Hôte (extraits de host.html)
   Chargé APRÈS brutal.css : surcharge les composants partagés.
   ============================================================ */

    /* ---------- boot loader DISCRET (#bootLoader) : masque sobre, pas le grand splash HOMIES ---------- */
    #bootLoader.boot-min { gap: 18px; }
    #bootLoader.boot-min::before { display: none; }   /* pas de bandeau cyan en biais */
    #bootLoader .boot-spin {
      width: 46px; height: 46px; background: var(--paper);
      border: 5px solid var(--ink); border-top-color: var(--magenta);
      box-shadow: 4px 4px 0 var(--ink); animation: boot-spin .7s linear infinite;
    }
    #bootLoader .boot-txt {
      font-family: var(--fb); font-weight: 700;
      font-size: 12px; letter-spacing: 3px; color: var(--ink); text-align: center; padding: 0 24px;
    }
    #bootLoader .boot-reload {
      margin-top: 6px; font-family: var(--fd); font-size: 16px; letter-spacing: 2px;
      color: var(--ink); background: var(--yellow); border: 4px solid var(--ink);
      box-shadow: 4px 4px 0 var(--ink); padding: 10px 22px; cursor: pointer;
    }
    #bootLoader .boot-reload:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
    @keyframes boot-spin { to { transform: rotate(360deg); } }

    /* ---------- shell host : header FIXE, seul l'écran actif scrolle (header/pied jamais déplacés) ---------- */
    body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }

    /* ---------- header commun (élément flex, ne bouge pas) ---------- */
    .hdr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 22px;
      border-bottom: 4px solid var(--ink);
      background: var(--paper);
      flex-shrink: 0;
      z-index: 50;
    }

    .hdr .logo {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hdr .bolt {
      width: 38px;
      height: 38px;
      background: var(--magenta);
      border: 3px solid var(--ink);
      display: grid;
      place-items: center;
      box-shadow: 3px 3px 0 var(--ink);
      transform: rotate(-4deg);
      font-size: 20px;
    }

    .hdr .name {
      font-family: var(--fd);
      font-size: 24px;
      letter-spacing: 2px;
    }

    .hdr .name b {
      color: var(--magenta);
    }

    .hdr .right {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .pill {
      border: 3px solid var(--ink);
      background: var(--yellow);
      padding: 5px 12px;
      font-family: var(--fd);
      letter-spacing: 1px;
      box-shadow: 3px 3px 0 var(--ink);
      font-size: 13px;
    }

    .stepper {
      display: flex;
      gap: 6px;
      flex-wrap: nowrap;
      overflow: hidden;
    }

    .step {
      font-family: var(--fd);
      font-size: 11px;
      letter-spacing: 1px;
      border: 3px solid var(--ink);
      padding: 5px 10px;
      background: var(--paper);
      box-shadow: 3px 3px 0 var(--ink);
      color: color-mix(in srgb, var(--ink) 45%, transparent);
      white-space: nowrap;
    }

    .step.on {
      background: var(--magenta);
      color: var(--paper);
    }

    .step.done {
      background: var(--green);
      color: var(--ink);
    }

    @media (max-width:820px) {
      .stepper .step {
        font-size: 9px;
        padding: 4px 6px;
        letter-spacing: 0;
      }

      .hdr .name {
        display: none;
      }
    }

    @media (max-width:560px) {
      .stepper {
        display: none;
      }
    }

    /* `.stepper` est aussi le composant des CARTES DE LISTE (packs) : ne pas le masquer
       sur mobile comme l'ancien step-indicator du header. Plus spécifique => l'emporte. */
    .listcard .stepper { display: flex; overflow: visible; gap: 10px; }

    section.screen {
      display: none;
    }

    section.screen.active {
      display: block;
      flex: 1;
      min-height: 0;
      overflow-y: auto;          /* par défaut l'écran scrolle en interne (header/pied du body fixes) */
    }

    /* écrans à shell interne (sous-header + pied fixes, milieu scrolle) : pas de scroll global */
    #screen-packs.active, #screen-format.active, #screen-recap.active, #screen-lobby.active,
    #screen-question.active, #screen-feedback.active, #screen-reveal.active, #screen-podium.active,
    #screen-transition.active, #screen-qod-bet.active, #screen-eliminated.active, #screen-editor.active {
      display: flex; flex-direction: column; overflow: hidden;
    }

    /* salon + format + récap : fond blanc (pas de pointillé) */
    #screen-lobby, #screen-format, #screen-recap, #screen-niveau, #screen-packs { background: var(--paper); }

    /* bouton « charger un quiz » (variante cyan du compose-btn) */
    .compose-btn.alt { background: var(--cyan); }

    /* liste des quiz sauvegardés (modale) */
    .saved-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 50vh; overflow-y: auto; }
    .saved-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 11px 13px; cursor: pointer; text-align: left; font-family: var(--fd); }
    .saved-item .si-nm { font-size: 15px; letter-spacing: .5px; }
    .saved-item .si-n { font-size: 12px; background: var(--yellow); border: 2px solid var(--ink); padding: 2px 8px; flex-shrink: 0; }
    .saved-item:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

    /* footer "qui a répondu" en direct (réf. Flux 3 — avatars chevauchés + X / Y ONT RÉPONDU) */
    .gh-foot { flex-shrink: 0; padding: 11px 14px; display: flex; align-items: center; gap: 9px; border-top: 3px solid var(--ink); background: var(--paper); }
    .gh-foot:empty { display: none; }
    .gh-foot .gf-avas { display: flex; }
    .gh-foot .gf-av { width: 28px; height: 28px; border: 2px solid var(--ink); overflow: hidden; background: var(--paper); margin-left: -9px; }
    .gh-foot .gf-av:first-child { margin-left: 0; }
    .gh-foot .gf-av img, .gh-foot .gf-av svg, .gh-foot .gf-av .av-emoji { width: 100%; height: 100%; display: block; }
    .gh-foot .gf-txt { font-family: var(--fb); font-weight: 700; font-size: 11px; letter-spacing: 1px; color: color-mix(in srgb, var(--ink) 60%, transparent); }
    .gh-foot .gf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); margin-left: auto; flex-shrink: 0; }

    /* ================= EDITEUR ================= */
    .editor-wrap {
      max-width: 880px;
      margin: 0 auto;
      padding: 28px 20px 120px;
    }

    .quiz-title-row {
      margin-bottom: 22px;
    }

    .quiz-title-input {
      width: 100%;
      font-family: var(--fd);
      font-size: 38px;
      letter-spacing: 1px;
      border: 4px solid var(--ink);
      background: var(--yellow);
      padding: 14px 18px;
      box-shadow: 8px 8px 0 var(--ink);
      text-transform: uppercase;
      outline: none;
    }

    .quiz-title-input:focus {
      background: #fff;
    }

    /* carte-question de l'ÉDITEUR uniquement (scopée pour ne pas toucher le gameplay) */
    #screen-editor .q-card {
      position: relative;
      margin-bottom: 26px;
      border: 4px solid var(--ink);
      background: var(--paper);
      box-shadow: 8px 8px 0 var(--ink);
    }

    #screen-editor .q-card .q-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 4px solid var(--ink);
      background: var(--cyan);
    }

    .q-num {
      font-family: var(--fd);
      font-size: 22px;
      background: var(--ink);
      color: var(--paper);
      padding: 2px 12px;
    }

    .q-head .grow {
      flex: 1;
    }

    .q-time {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 13px;
    }

    .q-time select {
      font-family: var(--fb);
      font-weight: 700;
      border: 3px solid var(--ink);
      padding: 5px 8px;
      background: var(--paper);
      box-shadow: 3px 3px 0 var(--ink);
    }

    .q-del {
      cursor: pointer;
      border: 3px solid var(--ink);
      background: var(--red);
      color: var(--paper);
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      font-family: var(--fd);
      box-shadow: 3px 3px 0 var(--ink);
      font-size: 18px;
    }

    .q-del:hover {
      transform: translate(-1px, -1px);
    }

    .q-body {
      padding: 16px;
    }

    .q-text-input {
      width: 100%;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 18px;
      border: 3px solid var(--ink);
      padding: 12px;
      margin-bottom: 14px;
      outline: none;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .q-text-input:focus {
      box-shadow: 4px 4px 0 var(--magenta);
    }

    .answers-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    @media (max-width:620px) {
      .answers-grid {
        grid-template-columns: 1fr;
      }
    }

    .ans-edit {
      display: flex;
      align-items: center;
      gap: 10px;
      border: 3px solid var(--ink);
      padding: 8px;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .ans-edit input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 15px;
      color: inherit;
    }

    .ans-edit input::placeholder {
      color: color-mix(in srgb, var(--ink) 40%, transparent);
    }

    .ans-edit .shape {
      width: 28px;
      height: 28px;
    }

    .correct-toggle {
      cursor: pointer;
      width: 30px;
      height: 30px;
      border: 3px solid var(--ink);
      background: var(--paper);
      display: grid;
      place-items: center;
      font-family: var(--fd);
      flex-shrink: 0;
    }

    .ans-edit.correct .correct-toggle {
      background: var(--ink);
      color: var(--green);
    }

    .ans-edit.correct {
      box-shadow: 4px 4px 0 var(--green);
    }

    .hint {
      font-size: 12px;
      font-weight: 700;
      color: color-mix(in srgb, var(--ink) 50%, transparent);
      margin-top: 8px;
      letter-spacing: .5px;
    }

    /* mode switcher par question */
    .mode-tabs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .mode-tab {
      font-family: var(--fd);
      font-size: 11px;
      letter-spacing: 1px;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 5px 9px;
      cursor: pointer;
      box-shadow: 3px 3px 0 var(--ink);
    }

    .mode-tab.on {
      background: var(--magenta);
      color: var(--paper);
    }

    .vote-note {
      border: 3px dashed var(--ink);
      background: #FFF7C2;
      padding: 14px;
      font-weight: 700;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .vote-note .e {
      font-size: 26px;
    }

    .ans-edit.locked input {
      pointer-events: none;
    }

    .poll-note {
      font-size: 12px;
      font-weight: 700;
      color: var(--magenta);
      margin-top: 8px;
      letter-spacing: .5px;
    }

    /* barre de packs */
    .packs-bar {
      border: 4px solid var(--ink);
      background: var(--paper);
      box-shadow: 8px 8px 0 var(--ink);
      padding: 14px;
      margin-bottom: 22px;
    }

    .packs-bar .pt {
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: 1.5px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pack-list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .pack-chip {
      cursor: pointer;
      border: 3px solid var(--ink);
      padding: 8px 12px;
      box-shadow: 4px 4px 0 var(--ink);
      font-family: var(--fd);
      font-size: 13px;
      letter-spacing: .5px;
      display: flex;
      align-items: center;
      gap: 7px;
      transition: transform .08s, box-shadow .08s;
    }

    .pack-chip:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--ink);
    }

    .pack-chip .pc-count {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      background: var(--paper);
      border: 2px solid var(--ink);
      padding: 1px 5px;
    }

    .editor-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 8px;
    }

    .sticky-foot {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--paper);
      border-top: 4px solid var(--ink);
      padding: 14px 20px;
      display: flex;
      justify-content: center;
      gap: 14px;
      z-index: 40;
    }

    /* page CRÉER : header (.cf-top) et pied (.cf-footer) FIXES, seul le milieu scrolle (PWA) */
    body.editor-mode {
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    /* ================= EDITEUR v2 (toolbar + sidebar + panel) ================= */
    body.editor-mode .hdr {
      display: none;
    }

    .ed-top {
      position: sticky;
      top: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      background: var(--paper);
      border-bottom: 4px solid var(--ink);
    }

    .ed-back {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
      border: 3px solid var(--ink);
      background: var(--paper);
      display: grid;
      place-items: center;
      font-family: var(--fd);
      font-size: 32px;
      line-height: 1;
      padding-bottom: 4px;
      box-shadow: 3px 3px 0 var(--ink);
      text-decoration: none;
      color: var(--ink);
    }

    .ed-back:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--ink);
    }

    .ed-brand {
      font-family: var(--fd);
      font-size: 18px;
      letter-spacing: 1px;
      white-space: nowrap;
    }

    .ed-brand b {
      color: var(--magenta);
    }

    .ed-title {
      flex: 1;
      min-width: 60px;
      font-family: var(--fd);
      font-size: 22px;
      letter-spacing: 1px;
      border: 3px solid var(--ink);
      background: var(--yellow);
      padding: 9px 12px;
      text-transform: uppercase;
      outline: none;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .ed-title:focus {
      background: #fff;
    }

    .cta-count {
      background: var(--paper);
      color: var(--ink);
      border: 2px solid var(--ink);
      padding: 0 8px;
      font-size: 14px;
    }

    @media (max-width:680px) {
      .ed-brand {
        display: none;
      }
    }

    .ed-main {
      display: grid;
      grid-template-columns: 300px 1fr;
      height: calc(100vh - 71px);
    }

    @media (max-width:820px) {
      .ed-main {
        grid-template-columns: 1fr;
        height: auto;
      }
    }

    .ed-side {
      border-right: 4px solid var(--ink);
      padding: 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #EFEFE9;
    }

    @media (max-width:820px) {
      .ed-side {
        border-right: none;
        border-bottom: 4px solid var(--ink);
      }
    }

    .ed-side-head {
      display: flex;
      justify-content: space-between;
      font-family: var(--fd);
      letter-spacing: 1.5px;
      font-size: 14px;
      margin-bottom: 12px;
    }

    .ed-side-head .n {
      background: var(--ink);
      color: var(--paper);
      padding: 0 10px;
    }

    .ed-qlist {
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ed-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-left: auto;
    }

    .ed-actions .btn {
      min-width: 122px;
      justify-content: center;
    }

    /* boutons uniformes (LANCER pas plus large) */
    .mobile-edit-note {
      display: none;
    }

    /* éditeur sur mobile : header clair (2 rangées) + création custom retirée
     (on garde uniquement packs / import / lancer) */
    @media (max-width:820px) {
      .ed-top {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
      }

      .ed-brand {
        display: none;
      }

      .ed-back {
        width: 40px;
        height: 40px;
        font-size: 20px;
      }

      .ed-title {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 17px;
        padding: 8px 10px;
      }

      .ed-actions {
        width: 100%;
        margin-left: 0;
        gap: 8px;
        flex-wrap: wrap;
      }

      .ed-actions .btn {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        font-size: 12px;
        padding: 11px 4px;
        letter-spacing: 0;
      }

      .ed-main {
        display: block;
        height: auto;
      }

      .ed-side {
        border-right: none;
        border-bottom: 4px solid var(--ink);
      }

      .ed-qlist {
        max-height: 30vh;
      }

      /* édition COMPLÈTE sur mobile : on garde le panneau et l'ajout de question */
      .ed-panel {
        display: block;
        padding: 16px 14px calc(28px + env(safe-area-inset-bottom));
      }

      .mobile-edit-note {
        display: none;
      }
    }

    .qmini {
      position: relative;
      display: flex;
      align-items: center;
      gap: 9px;
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: 3px 3px 0 var(--ink);
      padding: 9px 10px;
      cursor: pointer;
    }

    .qmini.sel {
      background: var(--cyan);
      box-shadow: 5px 5px 0 var(--ink);
      transform: translate(-1px, -1px);
    }

    .qmini-num {
      font-family: var(--fd);
      font-size: 15px;
      flex-shrink: 0;
    }

    .qmini-dot {
      width: 12px;
      height: 12px;
      border: 2px solid var(--ink);
      flex-shrink: 0;
      border-radius: 50%;
    }

    .qmini-text {
      flex: 1;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 0;
    }

    .qmini-mode {
      font-family: var(--fd);
      font-size: 9px;
      letter-spacing: .5px;
      border: 2px solid var(--ink);
      padding: 1px 4px;
      background: var(--paper);
    }

    .qmini-del {
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: var(--fd);
      font-size: 14px;
      color: var(--red);
      padding: 0 2px;
    }

    .ed-panel {
      padding: 24px;
      overflow-y: auto;
    }

    .panel-empty {
      display: grid;
      place-items: center;
      height: 100%;
      text-align: center;
      font-family: var(--fd);
      font-size: 24px;
      color: color-mix(in srgb, var(--ink) 40%, transparent);
    }

    .panel-label {
      font-family: var(--fd);
      font-size: 12px;
      letter-spacing: 2px;
      color: color-mix(in srgb, var(--ink) 60%, transparent);
      margin: 0 0 8px;
    }

    .panel-modes {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }

    @media (max-width:1040px) {
      .panel-modes {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .mode-card {
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: 4px 4px 0 var(--ink);
      padding: 12px;
      cursor: pointer;
      text-align: left;
      transition: transform .08s, box-shadow .08s;
    }

    .mode-card:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--ink);
    }

    .mode-card.on {
      background: var(--magenta);
      color: var(--paper);
    }

    .mode-card .mc-emoji {
      font-size: 24px;
    }

    .mode-card .mc-name {
      font-family: var(--fd);
      font-size: 15px;
      letter-spacing: .5px;
      margin-top: 4px;
    }

    .mode-card .mc-desc {
      font-size: 10px;
      font-weight: 700;
      opacity: .72;
      margin-top: 2px;
      line-height: 1.2;
    }

    .panel-q-input {
      width: 100%;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 18px;
      border: 3px solid var(--ink);
      padding: 14px;
      outline: none;
      box-shadow: 5px 5px 0 var(--ink);
      resize: vertical;
      min-height: 60px;
      line-height: 1.35;
    }

    .panel-q-input:focus {
      box-shadow: 5px 5px 0 var(--magenta);
    }

    .panel-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 16px 0;
      font-weight: 700;
      font-size: 13px;
    }

    .panel-meta select {
      font-family: var(--fb);
      font-weight: 700;
      border: 3px solid var(--ink);
      padding: 6px 10px;
      background: var(--paper);
      box-shadow: 3px 3px 0 var(--ink);
    }

    /* modal packs */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
      padding: 20px;
    }

    .modal-backdrop.show {
      display: flex;
    }

    .modal {
      background: var(--paper);
      border: 4px solid var(--ink);
      box-shadow: 8px 8px 0 var(--ink);
      max-width: 560px;
      width: 100%;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 18px;
      border-bottom: 4px solid var(--ink);
      background: var(--yellow);
      font-family: var(--fd);
      letter-spacing: 1px;
      flex-shrink: 0;
      font-size: 15px;
    }

    .modal-head button {
      border: 3px solid var(--ink);
      background: var(--paper);
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-family: var(--fd);
      box-shadow: 2px 2px 0 var(--ink);
      flex-shrink: 0;
    }

    .modal .pack-list {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      flex: 1 1 auto;
      min-height: 0;
    }

    .pack-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border: 3px solid var(--ink);
      box-shadow: 4px 4px 0 var(--ink);
      padding: 10px 12px;
      flex-wrap: wrap;
    }

    .pack-info {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: .5px;
      min-width: 0;
    }

    .pack-info .pc-count {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      background: var(--paper);
      border: 2px solid var(--ink);
      padding: 1px 5px;
    }

    .pack-add {
      display: flex;
      gap: 6px;
      flex-shrink: 0;
    }

    .pack-btn {
      font-family: var(--fd);
      font-size: 12px;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 6px 11px;
      cursor: pointer;
      box-shadow: 2px 2px 0 var(--ink);
      white-space: nowrap;
    }

    .pack-btn:active {
      transform: translate(1px, 1px);
      box-shadow: 1px 1px 0 var(--ink);
    }

    .pack-foot {
      padding: 14px 16px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      border-top: 4px solid var(--ink);
      background: #EFEFE9;
      flex-shrink: 0;
    }

    .pack-foot .btn {
      flex: 1 1 150px;
      white-space: nowrap;
      font-size: 13px;
      padding: 11px 10px;
    }

    /* ÉCRAN PACKS — structure create.html (header fixe + scroll au milieu + footer fixe) */
    #screen-packs.active {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: var(--paper);
    }

    .cf-top {
      padding: max(12px, env(safe-area-inset-top)) 18px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 3px solid var(--ink);
      flex-shrink: 0;
    }

    .cf-top-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .back-btn {
      width: 38px;
      height: 38px;
      border: 3px solid var(--ink);
      background: var(--paper);
      font-family: var(--fd);
      font-size: 30px;
      line-height: 1;
      padding-bottom: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 3px 3px 0 var(--ink);
      cursor: pointer;
    }

    .page-title {
      font-family: var(--fd);
      font-size: 17px;
      letter-spacing: 1px;
    }

    .step-counter {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 1.5px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
    }

    .step1-top {
      padding: 14px 18px 4px;
      flex-shrink: 0;
    }

    .step-label {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 2px;
      color: color-mix(in srgb, var(--ink) 50%, transparent);
    }

    .step-title {
      font-family: var(--fd);
      font-size: 28px;
      line-height: 28px;
      letter-spacing: -.5px;
      margin: 2px 0 4px;
    }

    .step-sub {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 11px;
      line-height: 14px;
      color: color-mix(in srgb, var(--ink) 60%, transparent);
      margin-bottom: 8px;
    }

    /* bouton primaire : écrire ses propres questions (ouvre l'éditeur) */
    .compose-btn {
      width: 100%;
      margin: 4px 0 12px;
      padding: 15px 16px;
      border: 4px solid var(--ink);
      background: var(--green);
      box-shadow: 5px 5px 0 var(--ink);
      font-family: var(--fd);
      font-size: 18px;
      letter-spacing: 1px;
      color: var(--ink);
      text-align: center;
      cursor: pointer;
      transition: transform .08s, box-shadow .08s;
    }
    .compose-btn:active {
      transform: translate(3px, 3px);
      box-shadow: 2px 2px 0 var(--ink);
    }

    .packs-head {
      font-family: var(--fd);
      font-size: 13px;
      letter-spacing: 1.5px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
      margin: 4px 0 10px;
    }

    .bg-cycle {
      width: 100%;
      margin-top: 8px;
      font-family: var(--fd);
      font-size: 12px;
      letter-spacing: 1px;
      border: 3px solid var(--ink);
      background: var(--cyan);
      padding: 9px 12px;
      box-shadow: 3px 3px 0 var(--ink);
      cursor: pointer;
      text-align: left;
    }

    .mode-toggle {
      display: flex;
      gap: 8px;
      margin: 6px 0 4px;
    }

    .mt-opt {
      flex: 1;
      font-family: var(--fd);
      font-size: 11px;
      letter-spacing: .5px;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 9px 8px;
      box-shadow: 3px 3px 0 var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .mt-opt .noto {
      width: 16px;
      height: 16px;
    }

    .mt-opt.on {
      background: var(--magenta);
      color: var(--paper);
    }

    .host-profile {
      display: none;
      align-items: center;
      gap: 12px;
      margin: 8px 0 4px;
      width: 100%;
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: 4px 4px 0 var(--ink);
      padding: 10px 12px;
      cursor: pointer;
      text-align: left;
    }

    .host-profile.show {
      display: flex;
    }

    .hp-ava .ava-emo {
      width: 48px;
      height: 48px;
      font-size: 48px;
      border-width: 3px;
    }

    .hp-info {
      flex: 1;
      min-width: 0;
    }

    .hp-name {
      font-family: var(--fd);
      font-size: 18px;
      letter-spacing: .5px;
      text-transform: uppercase;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .hp-edit {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: .5px;
      color: var(--magenta);
      margin-top: 2px;
    }

    .body-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 8px 18px 16px;
    }

    .pk-actions {
      display: flex;
      gap: 8px;
      margin: 6px 0 12px;
    }
    /* sur mobile : pas d'éditer/export/tout — on compose juste avec les packs */
    @media (max-width: 760px) {
      .pk-actions { display: none; }
    }

    .mini-btn {
      font-family: var(--fd);
      font-size: 11px;
      letter-spacing: 1px;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 8px 12px;
      box-shadow: 3px 3px 0 var(--ink);
      cursor: pointer;
    }

    .pk-card {
      margin-bottom: 10px;
      position: relative;
    }

    .pk-card::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 5px;
      right: -5px;
      bottom: -5px;
      background: var(--ink);
    }

    .pk-body {
      position: relative;
      border: 3px solid var(--ink);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pk-body .emoji-box {
      width: 44px;
      height: 44px;
      border: 3px solid var(--ink);
      background: var(--paper);
      display: grid;
      place-items: center;
      font-size: 23px;
      flex-shrink: 0;
      transform: rotate(-3deg);
    }

    .pk-body .info {
      flex: 1;
      min-width: 0;
    }

    .pk-body .name {
      font-family: var(--fd);
      font-size: 14px;
      line-height: 15px;
      letter-spacing: .5px;
    }

    .pk-body .desc {
      font-size: 10px;
      line-height: 12px;
      color: color-mix(in srgb, var(--ink) 70%, transparent);
      margin-top: 3px;
      font-weight: 700;
      font-family: var(--fb);
    }

    .pk-stepper {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .stepper-btn {
      width: 34px;
      height: 34px;
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: 2px 2px 0 var(--ink);
      font-family: var(--fd);
      font-size: 20px;
      display: grid;
      place-items: center;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      touch-action: manipulation;
    }

    .stepper-btn:active {
      background: var(--magenta);
      color: var(--paper);
    }

    .pk-val {
      font-family: var(--fd);
      font-size: 22px;
      min-width: 30px;
      text-align: center;
    }

    .cf-footer {
      flex-shrink: 0;
      padding: 12px 18px max(16px, env(safe-area-inset-bottom));
      background: var(--paper);
      border-top: 3px solid var(--ink);
      display: flex;
      align-items: stretch;
      gap: 10px;
    }

    .cf-footer .cta-go { flex: 1; }

    .pk-save {
      flex-shrink: 0;
      width: 56px;
      border: 4px solid var(--ink);
      background: var(--cyan);
      box-shadow: 5px 5px 0 var(--ink);
      font-size: 24px;
      cursor: pointer;
    }
    .pk-save:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }

    .cta-go {
      position: relative;
      cursor: pointer;
    }

    .cta-go::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 6px;
      right: -6px;
      bottom: -6px;
      background: var(--ink);
    }

    .cta-go .body {
      position: relative;
      border: 4px solid var(--ink);
      background: var(--green);
      padding: 14px;
      font-family: var(--fd);
      font-size: 20px;
      letter-spacing: 2px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: nowrap;
    }

    .count-pill {
      background: var(--paper);
      color: var(--ink);
      border: 2.5px solid var(--ink);
      padding: 1px 8px;
      font-size: 15px;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, .4);
    }

    .cta-go[data-disabled="true"] {
      opacity: .45;
      pointer-events: none;
    }

    /* ===== LOBBY (reproduction de lobby.html) ===== */
    #screen-lobby.active {
      display: flex;
      flex-direction: column;
    }

    .lobby-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;          /* seul le milieu du salon scrolle */
      padding-bottom: 16px;
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
    }

    .lobby-top {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px 12px;
      /* header COLLANT : le titre LE SALON reste visible quand on scrolle */
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--paper);
      border-bottom: 3px solid var(--ink);
    }
    .lobby-top .lobby-close {
      margin-left: auto;            /* poussé à droite (retour à gauche, fermer à droite) */
      background: var(--red);
      color: var(--paper);
      font-size: 20px;
      padding-bottom: 0;
    }

    .code-card {
      margin: 16px 18px 0;
      position: relative;
      transform: rotate(-1deg);
    }

    .code-card::before {
      content: '';
      position: absolute;
      top: 7px;
      left: 7px;
      right: -7px;
      bottom: -7px;
      background: var(--ink);
    }

    .code-card .body {
      position: relative;
      border: 4px solid var(--ink);
      background: var(--yellow);
      padding: 18px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .code-card .left {
      flex: 1;
      min-width: 0;
    }

    .cc-lbl {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 2px;
      color: color-mix(in srgb, var(--ink) 60%, transparent);
    }

    .code-big {
      font-family: var(--fd);
      font-size: 46px;
      line-height: 44px;
      letter-spacing: 2px;
      margin-top: 2px;
    }

    .cc-sub {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
      margin-top: 4px;
    }

    .cc-actions {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
    }

    .cc-act {
      width: 44px;
      height: 44px;
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: 3px 3px 0 var(--ink);
      display: grid;
      place-items: center;
      font-size: 28px;
      cursor: pointer;
    }

    .cc-act:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0 var(--ink);
    }

    .lobby-invite {
      margin: 12px 18px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 4px solid var(--ink);
      background: var(--magenta);
      color: var(--paper);
      box-shadow: 5px 5px 0 var(--ink);
      padding: 13px;
      font-family: var(--fd);
      font-size: 17px;
      letter-spacing: 1px;
      cursor: pointer;
    }

    .lobby-invite .li-ic {
      font-size: 22px;
      line-height: 1;
    }

    .lobby-invite:active {
      transform: translate(3px, 3px);
      box-shadow: 2px 2px 0 var(--ink);
    }

    .config-row {
      margin: 16px 18px 0;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .config-chip {
      position: relative;
    }

    .config-chip::before {
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      right: -3px;
      bottom: -3px;
      background: var(--ink);
    }

    .config-chip .body {
      position: relative;
      padding: 6px 11px;
      border: 3px solid var(--ink);
      background: var(--paper);
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--fd);
      font-size: 12px;
      letter-spacing: .5px;
    }

    .config-chip.mode .body {
      background: var(--yellow);
    }

    .config-chip.rounds .body {
      background: var(--cyan);
    }

    .config-chip .cic {
      font-size: 16px;
    }

    .section-title {
      margin: 22px 18px 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .st-sticker {
      position: relative;
      transform: rotate(-2deg);
    }

    .st-sticker::before {
      content: '';
      position: absolute;
      top: 4px;
      left: 4px;
      right: -4px;
      bottom: -4px;
      background: var(--ink);
    }

    .st-sticker .body {
      position: relative;
      padding: 5px 12px;
      border: 3px solid var(--ink);
      background: var(--paper);
      font-family: var(--fd);
      font-size: 13px;
      letter-spacing: 1.5px;
    }

    .st-count {
      margin-left: auto;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 1px;
    }

    .players-grid {
      padding: 0 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .player-row {
      position: relative;
    }

    .player-row::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 5px;
      right: -5px;
      bottom: -5px;
      background: var(--ink);
    }

    .player-row .body {
      position: relative;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .player-row.first .body {
      background: var(--green);
    }

    .pr-ava {
      flex-shrink: 0;
    }

    .pr-ava .ava-emo {
      width: 46px;
      height: 46px;
      font-size: 46px;
    }

    .pr-meta {
      flex: 1;
      min-width: 0;
    }

    .pr-name {
      font-family: var(--fd);
      font-size: 16px;
      letter-spacing: .5px;
      word-break: break-word;
    }

    .pr-badge {
      font-family: var(--fd);
      font-size: 9px;
      letter-spacing: 1px;
      border: 2px solid var(--ink);
      background: var(--magenta);
      color: var(--paper);
      padding: 2px 6px;
      box-shadow: 2px 2px 0 var(--ink);
      flex-shrink: 0;
    }

    .pr-rm {
      width: 30px;
      height: 30px;
      border: 2.5px solid var(--ink);
      background: var(--red);
      color: var(--paper);
      cursor: pointer;
      font-family: var(--fd);
      font-size: 15px;
      box-shadow: 2px 2px 0 var(--ink);
      flex-shrink: 0;
    }

    .player-row.isbot .body {
      background: #EFEFE9;
    }

    /* QR visible dans le lobby */
    .lobby-qr {
      margin: 16px 18px 0;
      display: flex;
      align-items: center;
      gap: 14px;
      border: 4px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      background: var(--cyan);
      padding: 12px;
    }

    /* > img : SEULEMENT le QR (enfant direct), pas les emojis du hint (sinon ils sont gonflés à 116px) */
    .lobby-qr > img {
      width: 116px;
      height: 116px;
      image-rendering: pixelated;
      border: 3px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
      background: var(--paper);
      display: block;
      flex-shrink: 0;
      cursor: pointer;
    }

    .lobby-qr .cap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .lobby-qr .qr-badge { align-self: flex-start; font-family: var(--fd); font-size: 13px; letter-spacing: 1px; background: var(--magenta); color: var(--paper); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); padding: 4px 10px; transform: rotate(-2deg); }
    .lobby-qr .qr-txt { font-family: var(--fd); font-size: 16px; letter-spacing: .5px; line-height: 1.1; }
    .lobby-qr .cap small { display: block; font-family: var(--fb); font-weight: 700; font-size: 10px; letter-spacing: .3px; color: color-mix(in srgb, var(--ink) 65%, transparent); word-break: break-all; margin-top: 2px; }

    .player-row.empty .body {
      background: #F2F2F2;
      background-image: repeating-linear-gradient(135deg, transparent 0, transparent 6px, rgba(10, 10, 10, .04) 6px, rgba(10, 10, 10, .04) 8px);
      border-style: dashed;
    }

    .pr-ph {
      width: 46px;
      height: 46px;
      border: 2.5px dashed rgba(10, 10, 10, .45);
      background: var(--paper);
      display: grid;
      place-items: center;
      font-family: var(--fd);
      font-size: 26px;
      color: color-mix(in srgb, var(--ink) 35%, transparent);
      flex-shrink: 0;
    }

    .player-row.empty .pr-name {
      color: color-mix(in srgb, var(--ink) 45%, transparent);
    }

    .pr-desc {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 10px;
      color: color-mix(in srgb, var(--ink) 40%, transparent);
      margin-top: 4px;
    }

    .lobby-footer {
      flex-shrink: 0;            /* pied fixe (élément flex, ne scrolle pas) */
      padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
      background: var(--paper);
      border-top: 3px solid var(--ink);
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
    }

    .lcta {
      position: relative;
      cursor: pointer;
    }

    .lcta::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 6px;
      right: -6px;
      bottom: -6px;
      background: var(--ink);
    }

    .lcta .body {
      position: relative;
      border: 4px solid var(--ink);
      padding: 14px;
      font-family: var(--fd);
      letter-spacing: 2px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .lcta-bot .body {
      background: var(--yellow);
      font-size: 13px;
      padding: 9px;
    }

    .lcta-start {
      margin-top: 8px;
    }

    .lcta-start .body {
      background: var(--green);
      font-size: 18px;
    }

    /* AJOUTER UN BOT : déplacé dans le corps -> aligné comme les joueurs (18px),
       ombre non rognée, taille un peu plus généreuse (et plus le style "plat" du pied) */
    .lobby-body .lcta-bot { margin: 14px 18px 8px; }
    .lobby-body .lcta-bot .body { font-size: 15px; padding: 13px; }

    .lcta[data-disabled="true"] {
      opacity: .5;
      pointer-events: none;
    }

    .qr-ov {
      position: fixed;
      inset: 0;
      background: color-mix(in srgb, var(--ink) 70%, transparent);
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .qr-ov.show {
      display: flex;
    }

    .qr-ov-card {
      background: var(--paper);
      border: 4px solid var(--ink);
      box-shadow: 10px 10px 0 var(--ink);
      padding: 18px;
      text-align: center;
    }

    .qr-ov-card img {
      width: min(88vw, 460px);
      height: auto;
      image-rendering: pixelated;
      display: block;
      border: 4px solid var(--ink);
    }

    .qr-ov-code {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 28px;
      letter-spacing: 6px;
      margin-top: 10px;
    }

    /* avatars emoji cote hote */
    .pchip .ava-emo {
      width: 54px;
      height: 54px;
      font-size: 54px;
    }

    .lb-row .ava-emo {
      width: 42px;
      height: 42px;
      font-size: 42px;
    }

    .pod .ava-emo {
      width: 70px;
      height: 70px;
      font-size: 70px;
    }

    .tile .pava {
      width: 48px;
      height: 48px;
      font-size: 48px;
      flex-shrink: 0;
      display: inline-block;
    }

    .ans-tiles.list .tile .pava {
      width: 38px;
      height: 38px;
      font-size: 38px;
    }

    /* présentation média (anagramme / image / 4 images / révélation texte) */
    .present-media {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 0 22px 14px;
    }

    .present-media:empty {
      display: none;
    }

    .present-media .media-img {
      max-height: 42vh;
    }

    .present-media .media-emoji {
      font-size: 130px;
    }

    .present-media .four-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }

    .present-media .four-grid .fg-cell .media-emoji {
      font-size: 86px;
    }

    .present-media .scrambled {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .present-media .scrambled .sl {
      font-family: var(--fd);
      font-size: 46px;
      width: 60px;
      height: 74px;
      border: 4px solid var(--ink);
      background: var(--yellow);
      box-shadow: 5px 5px 0 var(--ink);
      display: grid;
      place-items: center;
    }

    .present-media .hint-line {
      font-weight: 700;
      font-size: 14px;
      background: var(--cyan);
      border: 3px solid var(--ink);
      padding: 5px 12px;
      box-shadow: 3px 3px 0 var(--ink);
    }

    .present-media .answer-reveal {
      font-family: var(--fd);
      font-size: clamp(26px, 4vw, 46px);
      background: var(--green);
      border: 4px solid var(--ink);
      box-shadow: 6px 6px 0 var(--ink);
      padding: 10px 24px;
    }

    .present-media .text-wait {
      font-weight: 700;
      font-size: 15px;
      color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent);
    }

    /* mode téléphones : média à la taille du joueur (écran de jeu identique) */
    .present-media.compact {
      padding: 0 14px 6px;
      gap: 10px;
    }

    .present-media.compact .media-img {
      max-height: 30vh;
    }

    .present-media.compact .media-emoji {
      font-size: 90px;
    }

    .present-media.compact .four-grid {
      gap: 10px;
    }

    .present-media.compact .four-grid .fg-cell .media-emoji {
      font-size: 58px;
    }

    /* panneau éditeur : champs anagramme / image / 4 images */
    .panel-grid2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    @media (max-width:560px) {
      .panel-grid2 {
        grid-template-columns: 1fr;
      }
    }

    .panel-field {
      margin-bottom: 12px;
    }

    .panel-field input.f {
      width: 100%;
      font-family: var(--fb);
      font-weight: 700;
      font-size: 15px;
      border: 3px solid var(--ink);
      padding: 11px;
      outline: none;
      box-shadow: 4px 4px 0 var(--ink);
    }

    .panel-field input.f:focus {
      box-shadow: 4px 4px 0 var(--magenta);
    }

    .img-previews {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .img-previews .media-img,
    .img-previews .media-emoji {
      width: 84px;
      height: 84px;
      font-size: 52px;
      border: 3px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
    }

    .mode-card {
      min-height: 98px;
    }

    /* ================= LOBBY ================= */
    .lobby {
      min-height: calc(100vh - 64px);
      display: grid;
      grid-template-columns: 420px 1fr;
    }

    @media (max-width:880px) {
      .lobby {
        grid-template-columns: 1fr;
      }
    }

    .lobby-left {
      border-right: 4px solid var(--ink);
      background: var(--magenta);
      padding: 34px 28px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      position: relative;
      overflow: hidden;
    }

    @media (max-width:880px) {
      .lobby-left {
        border-right: none;
        border-bottom: 4px solid var(--ink);
      }
    }

    .lobby-left::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 254, 247, .16) 2px, transparent 2px);
      background-size: 24px 24px;
      pointer-events: none;
    }

    .lobby-left>* {
      position: relative;
      z-index: 1;
    }

    .join-howto {
      color: var(--paper);
      font-weight: 700;
      letter-spacing: 1px;
      font-size: 13px;
    }

    .code-box {
      background: var(--paper);
      border: 4px solid var(--ink);
      box-shadow: 8px 8px 0 var(--ink);
      padding: 18px 20px;
    }

    .code-box .lbl2 {
      font-family: var(--fd);
      letter-spacing: 2px;
      font-size: 13px;
      color: color-mix(in srgb, var(--ink) 60%, transparent);
    }

    .code-box .big-code {
      font-family: var(--fd);
      font-size: 64px;
      letter-spacing: 8px;
      line-height: 1;
      margin-top: 4px;
    }

    .qr-box {
      background: var(--paper);
      border: 4px solid var(--ink);
      box-shadow: 8px 8px 0 var(--ink);
      padding: 14px;
      align-self: flex-start;
    }

    .qr-box img {
      display: block;
      width: 200px;
      height: 200px;
      image-rendering: pixelated;
    }

    .qr-cap {
      text-align: center;
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 1px;
      margin-top: 6px;
    }

    .url-row {
      display: flex;
      gap: 8px;
      align-items: stretch;
    }

    .url-row .u {
      flex: 1;
      background: var(--paper);
      border: 3px solid var(--ink);
      padding: 8px 10px;
      font-weight: 700;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-shadow: 3px 3px 0 var(--ink);
    }

    .lobby-right {
      padding: 28px;
      display: flex;
      flex-direction: column;
    }

    .lobby-right .roster-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .roster-head .count-badge {
      font-family: var(--fd);
      font-size: 40px;
      background: var(--ink);
      color: var(--paper);
      padding: 2px 16px;
    }

    .roster-actions {
      margin-left: auto;
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    @media (max-width:880px) {
      .lobby-right .roster-head {
        flex-wrap: wrap;
      }

      .roster-actions {
        width: 100%;
        margin-left: 0;
      }

      .roster-actions .btn {
        flex: 1;
      }
    }

    .players-wall {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 14px;
      align-content: start;
      flex: 1;
    }

    .pchip {
      position: relative;
      border: 3px solid var(--ink);
      background: var(--paper);
      box-shadow: 4px 4px 0 var(--ink);
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

    .pchip .ava {
      width: 54px;
      height: 54px;
      border: 3px solid var(--ink);
      overflow: hidden;
      background: var(--paper);
    }

    .pchip .ava img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .pchip .pn {
      font-family: var(--fd);
      font-size: 15px;
      letter-spacing: .5px;
      text-align: center;
      word-break: break-word;
    }

    .pchip:nth-child(4n+1) {
      background: var(--yellow);
    }

    .pchip:nth-child(4n+2) {
      background: var(--cyan);
    }

    .pchip:nth-child(4n+3) {
      background: var(--green);
    }

    .pchip:nth-child(4n+4) {
      background: #FF80AB;
    }

    .empty-roster {
      flex: 1;
      display: grid;
      place-items: center;
      text-align: center;
    }

    .empty-roster .big {
      font-family: var(--fd);
      font-size: 30px;
      color: color-mix(in srgb, var(--ink) 40%, transparent);
    }

    /* ================= PRESENTER QUESTION ================= */
    .present {
      min-height: calc(100vh - 64px);
      display: flex;
      flex-direction: column;
    }

    .present-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 26px;
      gap: 16px;
      border-bottom: 4px solid var(--ink);
      background: var(--paper);
      position: sticky;
      top: 0;
      z-index: 60;
    }

    .qprogress {
      font-family: var(--fd);
      font-size: 18px;
      letter-spacing: 1px;
    }

    /* (ancien timer present-top / tuiles 2x2 supprimés : l'hôte utilise le ghdr + options-col de games.html) */

    .tile {
      position: relative;
      border: 4px solid var(--ink);
      box-shadow: 8px 8px 0 var(--ink);
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 20px 26px;
      font-family: var(--fd);
      font-size: clamp(20px, 2.6vw, 34px);
      letter-spacing: .5px;
      overflow: hidden;
    }

    .tile .shape {
      width: 48px;
      height: 48px;
    }

    .tile .tile-count {
      margin-left: auto;
      font-family: var(--fd);
      font-size: 30px;
      background: color-mix(in srgb, var(--ink) 18%, transparent);
      padding: 2px 14px;
      border: 3px solid var(--ink);
    }

    .tile.dim {
      opacity: .32;
    }

    .tile.win {
      box-shadow: 0 0 0 6px var(--ink), 12px 12px 0 var(--ink);
    }

    .tile .check {
      position: absolute;
      top: -2px;
      right: -2px;
      background: var(--ink);
      color: var(--green);
      font-family: var(--fd);
      font-size: 24px;
      padding: 2px 10px;
    }

    .tile .cross {
      position: absolute;
      top: -2px;
      right: -2px;
      background: var(--ink);
      color: var(--red);
      font-family: var(--fd);
      font-size: 24px;
      padding: 2px 10px;
    }

    .tile .elected {
      position: absolute;
      top: -3px;
      right: -3px;
      background: var(--magenta);
      color: var(--paper);
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: 1px;
      padding: 3px 10px;
      border: 3px solid var(--ink);
    }

    /* affichage en liste (mode vote joueur ou +4 options) */
    .ans-tiles.list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
    }

    .ans-tiles.list .tile {
      font-size: clamp(18px, 2.2vw, 26px);
      padding: 12px 18px;
    }

    .ans-tiles.list .tile .shape {
      width: 36px;
      height: 36px;
    }

    .present-foot {
      padding: 14px 26px;
      border-top: 4px solid var(--ink);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      background: var(--paper);
    }

    /* écran de jeu hôte = layout games.html */
    /* pendant le jeu, on masque la barre HOMIES -> l'hôte voit le MÊME écran que les joueurs */
    .in-game .hdr { display: none; }
    .q-screen {
      height: 100dvh;
      display: flex;
      flex-direction: column;
    }

    .q-screen #ansTiles {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
    }

    .q-screen .present-media {
      padding: 0 14px 6px;
    }

    .gplay-foot {
      padding: 12px 16px;
      border-top: 3px solid var(--ink);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      background: var(--paper);
      flex-shrink: 0;
    }

    /* mode téléphones : l'hôte joue (réponses lisibles games.html ou saisie texte) */
    .host-play {
      padding: 14px 18px 24px;
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
    }

    .host-play.options-col {
      overflow-y: auto;
    }

    #screen-transition.active {
      height: 100dvh;
    }

    /* remplit sous le header, pas d'espace vide */

    /* ============ CLASSEMENT (leaderboard-temp.html) ============ */
    #screen-reveal.active {
      display: flex;
      flex-direction: column;
    }

    .lb-screen {
      display: flex;
      flex-direction: column;
      height: calc(100dvh - 64px);
      background: var(--paper);
    }

    .lb-hero {
      padding: 16px 20px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    .lb-emoji {
      width: 54px;
      height: 54px;
    }

    .lb-emoji .noto {
      width: 100%;
      height: 100%;
    }

    .lb-title {
      margin-top: 4px;
      transform: rotate(-2deg);
    }

    .lb-title .body {
      padding: 6px 18px;
      font-family: var(--fd);
      font-size: 24px;
      letter-spacing: 2.5px;
      background: var(--yellow);
    }

    .lb-sub {
      margin-top: 8px;
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 1.5px;
      color: color-mix(in srgb, var(--ink) 65%, transparent);
    }

    .lb-list {
      padding: 14px 20px 0;
      flex: 1;
      overflow-y: auto;
      max-width: 680px;
      width: 100%;
      margin: 0 auto;
    }

    .lb-row {
      position: relative;
      margin-bottom: 9px;
    }

    .lb-row .sh {
      position: absolute;
      top: 4px;
      left: 4px;
      right: -4px;
      bottom: -4px;
      background: var(--ink);
    }

    .lb-row .bd {
      position: relative;
      background: var(--paper);
      border: 3px solid var(--ink);
      padding: 9px 11px;
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .lb-row.row-1st .bd {
      background: var(--yellow);
    }

    .lb-row.row-me .bd {
      border-color: var(--magenta);
      border-width: 4px;
    }

    .lb-rank {
      font-family: var(--fd);
      font-size: 13px;
      letter-spacing: 1px;
      padding: 4px 6px;
      border: 2px solid var(--ink);
      background: var(--paper);
      min-width: 36px;
      text-align: center;
      flex-shrink: 0;
    }

    .lb-row.row-1st .lb-rank,
    .lb-row.row-me .lb-rank {
      background: var(--magenta);
      color: var(--paper);
    }

    .lb-av {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
    }

    .lb-av .ava-emo {
      width: 38px;
      height: 38px;
      font-size: 38px;
    }

    .lb-av img {
      width: 100%;
      height: 100%;
    }

    .lb-name-col {
      flex: 1;
      min-width: 0;
    }

    .lb-nm {
      font-family: var(--fd);
      font-size: 16px;
      letter-spacing: 1px;
      line-height: 1.1;
    }

    .lb-delta {
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 1px;
      margin-top: 2px;
    }

    .lb-delta .gained {
      color: var(--magenta);
    }

    .lb-delta .eq {
      color: color-mix(in srgb, var(--ink) 45%, transparent);
    }

    .lb-delta .lost {
      color: var(--red);
    }

    .lb-total {
      font-family: var(--fd);
      font-size: 22px;
      line-height: 1;
      text-align: right;
      min-width: 48px;
    }

    .lb-total .pts {
      font-family: var(--fb);
      font-weight: 700;
      font-size: 8px;
      letter-spacing: 1px;
      color: color-mix(in srgb, var(--ink) 50%, transparent);
      margin-top: 2px;
    }

    .lb-bottom {
      padding: 12px 20px 16px;
      border-top: 3px solid var(--ink);
      flex-shrink: 0;
      background: var(--paper);
    }

    .lb-next-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .lb-next-lbl {
      font-weight: 700;
      font-size: 10px;
      letter-spacing: 1.5px;
      color: color-mix(in srgb, var(--ink) 65%, transparent);
    }

    .lb-next-pill {
      padding: 3px 10px;
      border: 2px solid var(--ink);
      background: var(--paper);
      box-shadow: 2px 2px 0 var(--ink);
      font-family: var(--fd);
      font-size: 13px;
      letter-spacing: 1px;
    }

    .lb-cta {
      width: 100%;
      background: var(--magenta);
      color: var(--paper);
      border: 4px solid var(--ink);
      box-shadow: 5px 5px 0 var(--ink);
      padding: 13px;
      font-family: var(--fd);
      font-size: 18px;
      letter-spacing: 2px;
      cursor: pointer;
    }

    .lb-cta.final {
      background: var(--green);
      color: var(--ink);
    }

    /* ================= PODIUM / RESULTS (results.html) ================= */
    #screen-podium.active {
      display: flex;
      flex-direction: column;
    }

    .res-screen {
      display: flex;
      flex-direction: column;
      height: calc(100dvh - 64px);
      background: var(--paper);
    }

    .res-hero {
      padding: 16px 18px 14px;
      background: var(--yellow);
      border-bottom: 4px solid var(--ink);
      text-align: center;
      flex-shrink: 0;
    }

    .res-label {
      font-weight: 700;
      font-size: 11px;
      letter-spacing: 3px;
      opacity: .7;
    }

    .res-gg {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 4px;
    }

    .res-gge {
      width: 38px;
      height: 38px;
    }

    .res-gge .noto {
      width: 100%;
      height: 100%;
    }

    .res-ggt {
      font-family: var(--fd);
      font-size: 44px;
      line-height: 1;
      letter-spacing: -.5px;
    }

    .res-winner {
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 1.5px;
      margin-top: 4px;
    }

    .res-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 0 16px 16px;
      max-width: 720px;
      width: 100%;
      margin: 0 auto;
    }

    .podium {
      display: grid;
      grid-template-columns: 1fr 1.2fr 1fr;
      gap: 8px;
      align-items: end;
      padding: 18px 0 0;
    }

    .pod {
      position: relative;
    }

    .pod .sh {
      position: absolute;
      top: 6px;
      left: 6px;
      right: -6px;
      bottom: -6px;
      background: var(--ink);
    }

    .pod .bd {
      position: relative;
      border: 4px solid var(--ink);
      padding: 12px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
    }

    .pod.gold .bd {
      background: var(--yellow);
      padding-top: 24px;
      min-height: 200px;
    }

    .pod.silver .bd {
      background: #E8E8E8;
      min-height: 170px;
    }

    .pod.bronze .bd {
      background: #FF9F45;
      min-height: 160px;
    }

    .pod .crown {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 34px;
      height: 34px;
      z-index: 2;
    }

    .pod .crown .noto {
      width: 100%;
      height: 100%;
    }

    .pod .ava {
      width: 56px;
      height: 56px;
      border: 3px solid var(--ink);
      background: var(--paper);
      overflow: hidden;
    }

    .pod.gold .ava {
      width: 64px;
      height: 64px;
    }

    .pod .ava .ava-emo {
      width: 100%;
      height: 100%;
      font-size: 64px;
    }

    .pod .ava img {
      width: 100%;
      height: 100%;
    }

    .pod .rk-num {
      font-family: var(--fd);
      font-size: 30px;
      line-height: 1;
    }

    .pod .pname {
      font-family: var(--fd);
      font-size: 12px;
      text-align: center;
      line-height: 1.05;
    }

    .pod .psc {
      font-family: var(--fd);
      font-size: 16px;
      padding: 2px 6px;
      border: 2.5px solid var(--ink);
      background: var(--paper);
      box-shadow: 2px 2px 0 var(--ink);
    }

    .res-list-title {
      font-family: var(--fd);
      font-size: 14px;
      letter-spacing: 2px;
      margin: 20px 0 8px;
      color: color-mix(in srgb, var(--ink) 70%, transparent);
    }

    .player-result {
      position: relative;
      margin-bottom: 8px;
    }

    .player-result .sh {
      position: absolute;
      top: 4px;
      left: 4px;
      right: -4px;
      bottom: -4px;
      background: var(--ink);
    }

    .player-result .bd {
      position: relative;
      border: 3px solid var(--ink);
      background: var(--paper);
      padding: 8px 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .player-result.me .bd {
      background: #FFE099;
      border-color: var(--magenta);
      border-width: 4px;
    }

    .player-result .rk {
      font-family: var(--fd);
      font-size: 18px;
      width: 30px;
      text-align: center;
      flex-shrink: 0;
    }

    .player-result .ava {
      width: 36px;
      height: 36px;
      border: 2.5px solid var(--ink);
      background: var(--paper);
      overflow: hidden;
      flex-shrink: 0;
    }

    .player-result .ava .ava-emo {
      width: 36px;
      height: 36px;
      font-size: 36px;
    }

    .player-result .ava img {
      width: 100%;
      height: 100%;
    }

    .player-result .nm {
      flex: 1;
      min-width: 0;
      font-family: var(--fd);
      font-size: 15px;
      letter-spacing: .5px;
    }

    .player-result .sc {
      font-family: var(--fd);
      font-size: 16px;
    }

    .res-foot {
      padding: 12px 16px 16px;
      border-top: 3px solid var(--ink);
      display: flex;
      gap: 10px;
      flex-shrink: 0;
      background: var(--paper);
    }

    .res-foot .btn {
      flex: 1;
    }

/* ---------- bloc récap (ex-2e <style> de host.html) ---------- */
    #screen-format .cr-wrap, #screen-recap .cr-wrap, #screen-niveau .cr-wrap { max-width:560px; margin:0 auto; width:100%; padding:14px 16px; display:flex; flex-direction:column; gap:12px; flex:1 1 auto; min-height:0; overflow-y:auto; }
    .cr-pill { align-self:flex-start; font-family:var(--fd); font-size:13px; letter-spacing:1.5px; border:3px solid var(--ink); background:var(--cyan); box-shadow:3px 3px 0 var(--ink); padding:6px 13px; display:inline-flex; align-items:center; gap:7px; }
    .cr-pill img { width:16px; height:16px; }
    .cr-fmt { position:relative; cursor:pointer; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink); background:var(--paper); padding:12px; display:flex; align-items:center; gap:12px; }
    .cr-fmt.sel { background:var(--yellow); border-width:5px; }
    .cr-fmt.soon { opacity:.55; cursor:not-allowed; }
    .cr-fmt .e { width:44px; height:44px; flex-shrink:0; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; }
    .cr-fmt .e img { width:30px; height:30px; }
    .cr-fmt .info { flex:1; min-width:0; } .cr-fmt .nm { font-family:var(--fd); font-size:16px; letter-spacing:.5px; } .cr-fmt .ds { font-family:var(--fb); font-weight:700; font-size:10px; color: color-mix(in srgb, var(--ink) 60%, transparent); margin-top:2px; }
    .cr-fmt .soon-tag { position:absolute; top:8px; right:8px; font-family:var(--fd); font-size:9px; letter-spacing:1px; background:var(--ink); color:var(--paper); padding:2px 6px; transform:rotate(4deg); }
    /* indicateur de sélection (checkbox cochée sur le format choisi) */
    .cr-fmt .cr-check { flex-shrink:0; width:30px; height:30px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--green); color:var(--ink); display:none; align-items:center; justify-content:center; font-family:var(--fd); font-size:18px; line-height:1; }
    .cr-fmt.sel .cr-check { display:flex; }
    .cr-lbl { font-family:var(--fb); font-weight:700; font-size:10px; letter-spacing:1.5px; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); margin-top:6px; }
    .cr-time { display:flex; align-items:center; justify-content:space-between; }
    .cr-time .t { font-family:var(--fd); font-size:16px; letter-spacing:.5px; }
    .cr-step { display:flex; align-items:center; gap:10px; }
    .cr-step .b { width:34px; height:34px; border:3px solid var(--ink); background:var(--yellow); box-shadow:2px 2px 0 var(--ink); font-family:var(--fd); font-size:20px; line-height:1; cursor:pointer; }
    .cr-step .v { font-family:var(--fd); font-size:24px; min-width:54px; text-align:center; }
    /* Carte SPECTATEUR (récap) — brutalist, remplace la case + texte moche */
    .spec-card { display:flex; align-items:center; gap:13px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); padding:13px 14px; cursor:pointer; }
    .spec-card input { position:absolute; opacity:0; pointer-events:none; }
    .spec-box { flex:0 0 auto; width:30px; height:30px; border:3px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:18px; color:transparent; }
    .spec-card input:checked ~ .spec-box { background:var(--green); color:var(--ink); }
    .spec-card:active { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
    .spec-tx { display:flex; flex-direction:column; gap:2px; min-width:0; }
    .spec-nm { font-family:var(--fd); font-size:15px; letter-spacing:.5px; }
    .spec-ds { font-family:var(--fb); font-weight:700; font-size:10.5px; line-height:1.35; color: color-mix(in srgb, var(--ink) 55%, transparent); }
    .cr-card { border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:var(--paper); }
    .cr-card .h { font-family:var(--fd); font-size:14px; letter-spacing:1px; padding:9px 12px; border-bottom:3px solid var(--ink); background:var(--yellow); }
    .cr-row { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-family:var(--fb); font-weight:400; font-size:12px; border-bottom:2px solid #E8E8E8; }
    .cr-row:last-child { border-bottom:0; } .cr-row .k { color: color-mix(in srgb, var(--ink) 50%, transparent); letter-spacing:1px; } .cr-row .v { font-family:var(--fb); font-weight:700; font-size:14px; letter-spacing:.5px; }
    .cr-chips { display:flex; flex-wrap:wrap; gap:7px; padding:11px 12px; }
    .cr-chip { font-family:var(--fd); font-size:11px; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:var(--cyan); padding:5px 9px; }
    .cr-chip.mystere { width:100%; text-align:center; background:var(--yellow); letter-spacing:1px; padding:8px 9px; }
    .cr-foot { max-width:560px; margin:0 auto; width:100%; padding:8px 16px 18px; flex-shrink:0; }
    .cr-go { cursor:pointer; border:4px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:15px; text-align:center; font-family:var(--fd); font-size:18px; letter-spacing:2px; background:var(--magenta); color:var(--paper); }
    .cr-go.green { background:var(--green); color:var(--ink); }
    .cr-prog { display:flex; gap:6px; max-width:560px; margin:0 auto; width:100%; padding:10px 16px 0; box-sizing:border-box; flex-shrink:0; }
    .cr-prog .s { flex:1; height:7px; border:2px solid var(--ink); background:#E8E8E8; }
    .cr-prog .s.on { background:var(--magenta); }
    .cr-prog .s.done { background:var(--ink); }

    /* ============================================================
       Refonte écran PACKS — grille de tuiles colorées + onglets + MIX
       ============================================================ */
    /* ============================================================
       ÉCRAN NIVEAU (étape 2/4) — tuiles de difficulté, langage .fmt2
       ============================================================ */
    .dif2-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .dif2 { position:relative; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:14px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; cursor:pointer; text-align:left; background:var(--paper); transition:transform .07s ease, box-shadow .07s ease; }
    .dif2:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
    .dif2-ic { width:54px; height:54px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1; }
    .dif2-ic img { width:34px; height:34px; object-fit:contain; display:block; }   /* emoji Noto animé (comme .fmt2-ic) */
    .dif2-nm { font-family:var(--fd); font-size:15px; letter-spacing:.5px; }
    .dif2.d0 { background:var(--gray2, #E8E8E8); }
    .dif2.d1 { background:var(--green); }
    .dif2.d2 { background:var(--cyan); }
    .dif2.d3 { background:var(--yellow); }
    .dif2.d4 { background:var(--orange); }
    .dif2.d5 { background:var(--red); } .dif2.d5 .dif2-nm { color:var(--paper); }
    .dif2.on { box-shadow:7px 7px 0 var(--ink); }
    .dif2.on::after { content:"✓"; position:absolute; top:8px; right:8px; width:26px; height:26px; border:3px solid var(--ink); background:var(--paper); box-shadow:2px 2px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); color:var(--ink); }
    .dif2-note { margin-top:12px; font-family:var(--fb); font-weight:700; font-size:10.5px; line-height:1.45; color:rgba(10,10,10,.55); }
    .pk-tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; scrollbar-width:none; }
    .pk-tabs::-webkit-scrollbar { display:none; }
    .pk-tab { flex:0 0 auto; font-family:var(--fd); font-size:13px; letter-spacing:.5px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); padding:7px 12px; white-space:nowrap; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
    .pk-tab.on { background:var(--magenta); color:var(--paper); }
    .pk-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-bottom:6px; }
    .pk-tile { position:relative; border:4px solid var(--ink); background:var(--paper); box-shadow:4px 4px 0 var(--ink); padding:11px; display:flex; flex-direction:column; gap:7px; min-height:132px; cursor:pointer; }
    .pk-tile.excl { opacity:.32; box-shadow:none; filter:grayscale(.6); }   /* MIX EXCLUSIF : tuile désactivée (Mix OU packs) */
    .pk-tile.on { box-shadow:6px 6px 0 var(--ink); }
    .pk-tile.mix { background:var(--purple); }
    .pk-tile.dk, .pk-tile.dk .pk-nm { color:var(--paper); }
    .pk-tile.dk .pk-ds { color:#f0f0f0; }
    .pk-ic { width:44px; height:44px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; }
    .pk-ic img { width:28px; height:28px; object-fit:contain; display:block; }
    .pk-nm { font-family:var(--fd); font-size:15px; line-height:1.05; letter-spacing:.3px; color:var(--ink); }
    .pk-ds { font-size:10.5px; color:#333; margin-top:auto; font-family:var(--fb); }
    .pk-add { align-self:flex-start; font-family:var(--fd); font-size:13px; border:3px solid var(--ink); background:var(--green); color:var(--ink); padding:4px 12px; box-shadow:2px 2px 0 var(--ink); }
    .pk-step { display:flex; align-items:center; gap:8px; align-self:stretch; margin-top:auto; }
    .pk-step .pk-sb { width:30px; height:30px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); font-family:var(--fd); font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 0 var(--ink); }
    .pk-step .pk-sv { flex:1; text-align:center; font-family:var(--fd); font-size:20px; }
    /* quand le pack est choisi : badge = CROIX ROUGE = bouton pour l'ENLEVER d'un coup (la tuile allumée + le compteur montrent déjà qu'il est sélectionné) */
    .pk-chk { position:absolute; top:8px; right:8px; width:28px; height:28px; border:3px solid var(--ink); background:#FF5252; box-shadow:2px 2px 0 var(--ink); display:none; align-items:center; justify-content:center; font-family:var(--fd); font-size:15px; color:#fff; cursor:pointer; z-index:3; }
    .pk-chk::before { content:'✕'; }
    .pk-tile.on .pk-chk { display:flex; }
    .pk-tile.on .pk-chk:active { transform:translate(2px,2px); box-shadow:0 0 0 var(--ink); }
    .pk-actions { display:flex; gap:8px; padding:14px 0 4px; flex-wrap:wrap; }

    /* ============================================================
       Refonte écran FORMAT — grille 2×2 + description dynamique + temps segmenté
       ============================================================ */
    .fmt2-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
    .fmt2 { position:relative; border:4px solid var(--ink); box-shadow:5px 5px 0 var(--ink); padding:14px 12px; display:flex; flex-direction:column; align-items:flex-start; gap:9px; cursor:pointer; text-align:left; background:var(--paper); transition:transform .07s ease, box-shadow .07s ease; }
    .fmt2:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
    .fmt2:nth-child(1) { background:var(--cyan); }
    .fmt2:nth-child(2) { background:var(--yellow); }
    .fmt2:nth-child(3) { background:var(--orange); }
    .fmt2:nth-child(4) { background:var(--green); }
    .fmt2:nth-child(5) { background:var(--green); }   /* MARATHON */
    .fmt2:nth-child(6) { background:var(--cyan); }    /* MISE LIBRE */
    .fmt2:nth-child(7) { background:var(--yellow); }  /* BUZZER */
    .fmt2:nth-child(8) { background:var(--orange); }  /* PAR ÉQUIPES */
    .fmt2:nth-child(9) { background:#FF80AB; }         /* MODE SOIRÉE */
    .fmt2-ic { width:54px; height:54px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; }
    .fmt2-ic img { width:34px; height:34px; object-fit:contain; display:block; }
    .fmt2-nm { font-family:var(--fd); font-size:16px; letter-spacing:.5px; line-height:1; color:var(--ink); }
    .fmt2.on { box-shadow:7px 7px 0 var(--ink); }
    .fmt2.on::after { content:"✓"; position:absolute; top:8px; right:8px; width:26px; height:26px; border:3px solid var(--ink); background:var(--green); box-shadow:2px 2px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); color:var(--ink); }
    .fmt2-desc { margin:14px 0 4px; border:4px solid var(--ink); background:var(--cyan); color:var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 14px; font-family:var(--fd); font-size:15px; letter-spacing:.5px; text-align:left; min-height:58px; display:flex; align-items:center; }
    .fmt2-desc.empty { background:var(--paper); color:#999; }
    .fmt2-times { display:flex; gap:7px; flex-wrap:wrap; }
    .fmt2-time { flex:1; min-width:42px; font-family:var(--fd); font-size:16px; border:3px solid var(--ink); background:var(--paper); color:var(--ink); padding:9px 0; text-align:center; box-shadow:3px 3px 0 var(--ink); cursor:pointer; }
    .fmt2-time.on { background:var(--magenta); color:var(--paper); }
    .cr-go.off { background:#ccc; color:#777; box-shadow:4px 4px 0 var(--ink); }

/* ------------------------------------------------------------
   Flux création (packs / format / récap) : les emojis Noto auto-
   convertis (.noto-em) tombaient trop bas sous les libellés Anton
   (caps hautes) → on les recentre verticalement.
   ------------------------------------------------------------ */
#screen-packs .noto-em,
#screen-format .noto-em,
#screen-recap .noto-em { vertical-align: middle; }

/* ============ DUEL : lobby hôte en FACE-À-FACE 1v1 (avatar + nom + NIV + XP) ============
   Placé hors @media : la spécificité `.duel-lobby .player-row .body` surcharge les
   règles mobiles du roster. #playersWall (.players-grid) fournit déjà le padding 18px. */
/* PAR ÉQUIPE — lobby groupé en 2 équipes (Rouge / Bleu) */
#playersWall .team-band { display: flex; align-items: center; gap: 8px; padding: 0 18px; margin: 12px 0 8px; }
#playersWall .team-band .tb-flag { font-family: var(--fd); font-size: 13px; letter-spacing: 1px; color: #fff; padding: 4px 10px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
#playersWall .team-band.red .tb-flag { background: #FF5252; }
#playersWall .team-band.blue .tb-flag { background: #4D7CFF; }
#playersWall .team-band .tb-n { font-family: var(--fb); font-weight: 700; font-size: 12px; opacity: .6; }
#playersWall .team-band .tb-line { flex: 1; height: 3px; background: var(--ink); opacity: .22; }
#playersWall .player-row.tm-red .body { box-shadow: inset 6px 0 0 #FF5252; }
#playersWall .player-row.tm-blue .body { box-shadow: inset 6px 0 0 #4D7CFF; }
#playersWall .player-row.tm-red .pr-meta, #playersWall .player-row.tm-blue .pr-meta { flex: 1; min-width: 0; }
/* swap = élément de FLUX à droite (plus d'absolute qui chevauchait le supprimer) */
#playersWall .pr-swap { margin-left: auto; width: 34px; height: 34px; flex-shrink: 0; border: 2.5px solid var(--ink); background: #FFD600; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--fd); font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
#playersWall .pr-swap + .pr-rm { margin-left: 6px; }
#playersWall .pr-swap:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* PAR ÉQUIPE — footer « qui a répondu » dédoublé (ligne ROUGE / ligne BLEU) */
.gh-foot.by-team { flex-direction: column; align-items: stretch; gap: 8px; }
.gh-foot.by-team .tf-row { display: flex; align-items: center; gap: 9px; }
.gh-foot.by-team .tf-tag { width: 96px; box-sizing: border-box; text-align: center; font-family: var(--fd); font-size: 12px; letter-spacing: .5px; color: #fff; padding: 3px 8px; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); flex-shrink: 0; }
.gh-foot.by-team .tf-tag.red { background: #FF5252; }
.gh-foot.by-team .tf-tag.blue { background: #4D7CFF; }
.gh-foot.by-team .gf-avas { flex: 1; }

/* PAR ÉQUIPE — sélecteur de sous-mode (écran FORMAT) */
#teamOpts .tmode-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
#teamOpts .tmode { display: flex; align-items: center; gap: 10px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 9px 11px; cursor: pointer; }
#teamOpts .tmode.on { background: #FFD600; }
#teamOpts .tmode.soon { opacity: .5; cursor: default; box-shadow: none; }
#teamOpts .tmode .em { font-size: 22px; flex-shrink: 0; }
#teamOpts .tmode .tx { min-width: 0; display: flex; flex-direction: column; }
#teamOpts .tmode .nm { font-family: var(--fd); font-size: 14px; letter-spacing: .5px; }
#teamOpts .tmode .nm b { color: var(--magenta); }
#teamOpts .tmode .ds { font-family: var(--fb); font-weight: 700; font-size: 9.5px; opacity: .7; line-height: 1.3; margin-top: 1px; }

.duel-lobby { display: flex; align-items: stretch; gap: 14px; margin: 6px 0 18px; }
.duel-lobby .player-row { flex: 1; margin: 0; }
.duel-lobby .player-row .body { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; padding: 22px 10px; height: 100%; position: relative; }
.duel-lobby .pr-ava { margin: 0 auto; }
/* avatar : OMBRE brutalist portée, PAS de bordure (demande utilisateur) */
.duel-lobby .pr-ava .ava-emo { width: 66px; height: 66px; font-size: 66px; border: none; box-shadow: 5px 5px 0 var(--ink); }
/* NIVEAU = badge N12 brutalist sur le coin bas-droit de la photo */
.duel-lobby .dl-ava { position: relative; width: 66px; height: 66px; margin: 0 auto; }
.duel-lobby .dl-lv { position: absolute; bottom: -5px; right: -8px; z-index: 3; background: var(--ink); color: var(--paper); border: 2px solid var(--paper); box-shadow: 2px 2px 0 var(--ink); font-family: var(--font-d, 'Anton'), sans-serif; font-size: 11px; letter-spacing: .5px; padding: 0 5px; line-height: 1.4; }
.duel-lobby .pr-meta { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; width: 100%; }
.duel-lobby .pr-name { justify-content: center; }
.duel-lobby .pr-xp2 { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; opacity: .6; }
/* ✕ retirer le bot (coin haut-droit de la carte) */
.duel-lobby .duel-rm { position: absolute; top: 6px; right: 6px; z-index: 3; }
.pr-lvl { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 7px; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; }
.pr-niv { background: var(--ink); color: var(--paper); padding: 1px 7px; letter-spacing: .5px; }
.pr-xp { opacity: .6; }
/* RANG = badge encadré brutalist (bordure + ombre) */
.duel-lobby .pr-grade { display: inline-flex; align-items: center; gap: 5px; margin: 0 auto; font-family: var(--font-d, 'Anton'), sans-serif; font-size: 13px; letter-spacing: .5px; line-height: 1; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--paper); padding: 4px 9px; }
.duel-lobby .pr-grade img { width: 16px; height: 16px; display: block; }
.duel-lobby .pr-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--font-d, 'Anton'), sans-serif; font-size: 11px; letter-spacing: .5px; border: 3px solid var(--ink); padding: 2px 10px; box-shadow: 2px 2px 0 var(--ink); background: var(--paper); white-space: nowrap; z-index: 2; }
.duel-lobby .pr-flag.host { background: var(--magenta); color: var(--paper); }
.duel-lobby .pr-flag.ready { background: var(--green); }
.duel-lobby .pr-flag.wait { background: #D9D9D9; }
.duel-lobby .player-row.empty .pr-ph { width: 66px; height: 66px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.duel-vs { align-self: center; font-family: var(--font-d, 'Anton'), sans-serif; font-size: 24px; }