    :root{
      --bg:#0b1020;
      --card: rgba(255,255,255,.06);
      --card2: rgba(255,255,255,.10);
      --txt: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.68);
      --accent: #7c5cff;
      --accent2:#00d4ff;
      --good:#3cff9a;
      --bad:#ff4d6d;
      --warn:#ffd166;
      --shadow: 0 20px 60px rgba(0,0,0,.45);
      --radius: 18px;
    }

    html, body{
      -webkit-text-size-adjust: 100%;
      touch-action: manipulation;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
    }
    *{box-sizing:border-box}

    body{
      margin:0;
      font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
        radial-gradient(1000px 700px at 80% 20%, rgba(0,212,255,.18), transparent 60%),
        radial-gradient(900px 700px at 50% 90%, rgba(60,255,154,.10), transparent 60%),
        var(--bg);
      color:var(--txt);
      min-height:100vh;
      display:flex;
      justify-content:center;
      padding:
        22px
        calc(22px + env(safe-area-inset-right))
        22px
        calc(22px + env(safe-area-inset-left));
    }

    .app{
      width:min(980px, 100%);
      display:grid;
      gap:16px;
      margin: 0 auto;
      max-width: 100%;
    }

    header{display:flex; align-items:center; justify-content:space-between; gap:12px;}
    .brand{display:flex; align-items:center; gap:10px; user-select:none;}
    .logo{
      width:42px;height:42px;border-radius:14px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      box-shadow: 0 10px 30px rgba(124,92,255,.25);
      flex: 0 0 auto;
    }
    h1{font-size:18px;margin:0}
    .sub{font-size:12px;color:var(--muted)}
    .top-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}

    button{
      border:0;
      background: var(--card2);
      color:var(--txt);
      padding:10px 12px;
      border-radius:14px;
      cursor:pointer;
      transition:.15s transform,.15s filter,.15s background;
      box-shadow: 0 8px 20px rgba(0,0,0,.25);
      font-weight:700;
      user-select:none;
      -webkit-tap-highlight-color: transparent;
    }
    button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}

button:disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.35);
  transform:none!important;
}

button:disabled:hover{
  filter:grayscale(.35);
}

button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible{
      outline: 2px solid #ffd166;
      outline-offset: 2px;
    }
    .primary{background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.85));}
    .good{ background: linear-gradient(135deg, rgba(60,255,154,.95), rgba(0,212,255,.55)); color:#071014;}
    .bad{ background: linear-gradient(135deg, rgba(255,77,109,.95), rgba(255,209,102,.55)); color:#16060a;}
    .ghost{ background: transparent; outline:1px solid rgba(255,255,255,.18); box-shadow:none;}
    .miniBtn{padding:8px 10px; border-radius:12px; font-weight:900; font-size:12px}

    .iconBtn{
      width:44px;
      height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      border-radius:14px;
      font-weight:1000;
      font-size:18px;
      line-height:1;
      background: rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.16);
      box-shadow: 0 12px 26px rgba(0,0,0,.35);
      backdrop-filter: blur(10px);
    }
    .iconBtn:hover{filter:brightness(1.10)}
    .iconBtn:active{transform:translateY(1px)}
    #btnHomeFs, #btnHomeFinal{
      background: linear-gradient(135deg, rgba(124,92,255,.30), rgba(0,212,255,.14));
      border-color: rgba(124,92,255,.35);
    }
    #btnExitFs, #btnCloseFinal{
      background: rgba(255,255,255,.08);
    }

    .row{display:grid; grid-template-columns: 1fr; gap:16px;}
    @media (max-width: 860px){ .row{grid-template-columns:1fr} }

    .panel{
      background: var(--card);
      border:1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      padding:16px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }
    .panel h2{
      margin:0 0 10px 0;
      font-size:14px;
      color:var(--muted);
      letter-spacing:.5px;
      text-transform:uppercase;
    }

    label{display:block; font-size:12px; color:var(--muted); margin:10px 0 6px}
    input, select, textarea{
      width:100%;
      background: rgba(0,0,0,.20);
      border:1px solid rgba(255,255,255,.14);
      color:var(--txt);
      padding:10px 12px;
      border-radius:14px;
      outline:none;
      -webkit-appearance: none;
      appearance: none;
      font: inherit;
    }
    textarea{
      min-height:120px;
      resize:vertical;
      line-height:1.4;
    }

    .themeItem input{
      -webkit-appearance: checkbox !important;
      appearance: auto !important;
      accent-color: var(--accent);
      width:18px;
      height:18px;
      margin:0;
      padding:0;
      border-radius: 6px;
      background: transparent;
      border: none;
    }

    .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
    @media (max-width: 560px){ .grid2,.grid3{grid-template-columns:1fr} }

    .themeTools{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; align-items:center}
    .small{font-size:12px;color:var(--muted)}
    .themeDropdown{
      margin-top:10px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.12);
      overflow:hidden;
    }
    .themeDropdownHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      cursor:pointer;
      user-select:none;
    }
    .themeDropdownBody{
      padding:10px 12px 12px;
      display:none;
    }
    .themeDropdown.open .themeDropdownBody{display:block;}
    .themeGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    @media (max-width:560px){ .themeGrid{grid-template-columns:1fr;} }
    .themeItem{
      display:flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.12);
      user-select:none;
    }
    .themeItem span{font-size:13px; font-weight:800; color:rgba(255,255,255,.9)}

    .teamCard{
      margin-top:12px;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(520px 260px at 20% 25%, rgba(124,92,255,.12), transparent 60%),
        radial-gradient(520px 260px at 80% 40%, rgba(0,212,255,.08), transparent 60%),
        rgba(0,0,0,.12);
    }
    .teamCardTitle{
      font-size:13px;
      font-weight:1000;
      margin-bottom:8px;
      color:rgba(255,255,255,.92);
    }
    .playersBox{
      margin-top:10px;
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }

    .modeBox{
      margin-top:12px;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.10);
    }
    .hidden{display:none!important}

    .modalBackdrop{
      position:fixed; inset:0;
      background: rgba(0,0,0,.58);
      display:none;
      align-items:center; justify-content:center;
      padding:18px;
      z-index: 120;
    }

    .modal{
      width:min(760px, 100%);
      background: rgba(15,18,34,.92);
      border:1px solid rgba(255,255,255,.14);
      border-radius:22px;
      box-shadow: 0 30px 90px rgba(0,0,0,.65);
      backdrop-filter: blur(14px);
      max-height: min(82vh, 760px);
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .modalBody{
      padding:16px;
      overflow:auto;
      min-height:0;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    .modalBody::-webkit-scrollbar{
      width:0;
      height:0;
    }

    .modalFooter{
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
      padding:14px 16px 16px;
      border-top:1px solid rgba(255,255,255,.10);
      background: rgba(8,10,18,.88);
      position: sticky;
      bottom: 0;
      z-index: 2;
    }

    .modal p{margin:0 0 14px 0; color:var(--muted); font-size:13px; line-height:1.35}

    .pill{
      display:inline-flex; gap:8px; align-items:center;
      padding:6px 10px;
      border-radius:999px;
      background: rgba(124,92,255,.18);
      border:1px solid rgba(124,92,255,.35);
      color: rgba(255,255,255,.9);
      font-size:12px;
      font-weight:900;
    }

    .pillBig{
      padding: 10px 16px;
      font-size: 16px;
      font-weight: 1100;
      letter-spacing: .3px;
    }

    .modalRoundBox{
      margin:10px 0 12px;
      padding:14px 14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.14);
      background:
        radial-gradient(500px 260px at 20% 30%, rgba(124,92,255,.35), transparent 60%),
        radial-gradient(520px 260px at 80% 40%, rgba(0,212,255,.25), transparent 60%),
        rgba(255,255,255,.06);
      box-shadow: var(--shadow);
    }
    .modalRoundBox .k{
      font-size:12px;
      color:rgba(255,255,255,.72);
      font-weight:900;
      letter-spacing:.6px;
      text-transform:uppercase;
    }
    .modalRoundBox .v{font-size:22px; font-weight:1000; margin-top:2px;}
    .modalRoundBox .d{font-size:12px; color:rgba(255,255,255,.70); margin-top:6px; line-height:1.35}

    .scoreTable{
      width:100%;
      min-width:560px;
      border-collapse:separate;
      border-spacing:0 10px;
    }
    .scoreTable th{
      text-align:left; font-size:12px; color:var(--muted);
      font-weight:800; padding:0 10px 0 10px;
    }
    .scoreTable td{
      padding:12px 10px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
      vertical-align:top;
    }
    .scoreTable tr td:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
    .scoreTable tr td:last-child{border-top-right-radius:14px;border-bottom-right-radius:14px; text-align:right; font-weight:900}

    .turnOverlay, .finalOverlay{
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background:
        radial-gradient(1000px 700px at 20% 10%, rgba(124,92,255,.22), transparent 60%),
        radial-gradient(900px 700px at 80% 20%, rgba(0,212,255,.16), transparent 60%),
        radial-gradient(900px 700px at 50% 90%, rgba(60,255,154,.08), transparent 60%),
        rgba(8,10,18,.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 12px;
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 90;
    }
    .finalOverlay{ z-index: 95; }

    .turnSheet, .finalSheet{
      width: min(980px, calc(100% - 12px));
      max-height: calc(100dvh - 12px);
      height: auto;
      border-radius: 26px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 30px 90px rgba(0,0,0,.65);
      overflow: hidden;
      position: relative;
    }

    .turnWrap, .finalWrap{
      width: 100%;
      height: 100%;
      min-height: 0;
      margin: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 14px;
      padding-top: max(14px, env(safe-area-inset-top));
      padding-bottom: max(14px, env(safe-area-inset-bottom));
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }

    .turnTopMinimal{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 10px 10px;
      border-radius: 18px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }

    .turnTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 10px 10px;
      border-radius: 18px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
    }
    .turnTopLeft, .turnTopRight{ display:flex; align-items:center; gap:10px; }

    .turnCenter{
      display:flex;
      flex-direction: column;
      align-items:center;
      justify-content:center;
      gap: 14px;
      padding: 6px 6px;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .turnCenter::-webkit-scrollbar{
      width: 0;
      height: 0;
    }

    .themeHero{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding: 10px 18px;
      border-radius: 999px;
      border:1px solid rgba(124,92,255,.35);
      background: linear-gradient(135deg, rgba(124,92,255,.20), rgba(0,212,255,.14));
      box-shadow: 0 12px 40px rgba(0,0,0,.28);
      font-size: clamp(20px, 3.2vw, 34px);
      font-weight: 1100;
      letter-spacing: .3px;
      max-width: 92%;
    }

    .activePlayerHero{
      width: min(760px, 96%);
      max-width: 100%;
      text-align: center;
      padding: 16px 18px;
      border-radius: 22px;
      background:
        radial-gradient(520px 260px at 20% 25%, rgba(124,92,255,.32), transparent 60%),
        radial-gradient(520px 260px at 80% 40%, rgba(0,212,255,.22), transparent 60%),
        rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 18px 60px rgba(0,0,0,.35);
    }

    .activePlayerLabel{
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: rgba(255,255,255,.72);
      margin-bottom: 6px;
    }

    .activePlayerName{
      font-size: clamp(28px, 4.8vw, 52px);
      line-height: 1.05;
      font-weight: 1100;
      color: #fff;
      text-shadow: 0 12px 32px rgba(0,0,0,.45);
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .activePlayerTeam{
      margin-top: 8px;
      font-size: clamp(14px, 2vw, 18px);
      font-weight: 900;
      color: rgba(255,255,255,.86);
    }

    .turnInfoLine{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      margin-top: 2px;
    }

    .turnInfoPill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      font-size: 14px;
      font-weight: 900;
      color: rgba(255,255,255,.92);
    }

    .bigTimer{
      font-size: clamp(56px, 9vw, 108px);
      font-weight: 1100;
      letter-spacing: 1px;
      line-height: 1;
      text-shadow: 0 18px 60px rgba(0,0,0,.55);
      user-select:none;
    }
    .bigTimer.warn{ color: var(--warn); }
    .bigTimer.danger{ color: var(--bad); }

    .bigBar{
      width: min(560px, 92%);
      height: 14px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.10);
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
    }
    .bigBar > div{
      height:100%;
      width:100%;
      background: linear-gradient(90deg, var(--good), var(--accent2), var(--accent));
      transition: width .15s linear;
    }
    .bigBar.flash{ animation: flashbar .5s ease-in-out infinite; }
    @keyframes flashbar{
      0%,100%{filter:brightness(1)}
      50%{filter:brightness(1.35)}
    }

.wordCard{
  position:relative;
  width:min(760px,100%);
  min-height:125px;
  padding:18px;
  border-radius:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(520px 250px at 18% 20%,rgba(124,92,255,.46),transparent 62%),
    radial-gradient(520px 250px at 82% 40%,rgba(0,212,255,.30),transparent 62%),
    rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 28px 90px rgba(0,0,0,.60),
    0 0 50px rgba(124,92,255,.18);
}

.wordText{
  max-width:100%;
  font-size:clamp(38px,6vw,72px);
  font-weight:1100;
  line-height:1.04;
  text-align:center;
  text-shadow:0 12px 28px rgba(0,0,0,.70);
  text-wrap:balance;
  overflow-wrap:anywhere;
}

/* EFFET TEXTE MOT TROUVÉ / PASSÉ — DÉBUT */
.wordText.wordFoundTextFx{
  color: var(--good);
  text-shadow:
    0 6px 18px rgba(0,0,0,.65),
    0 0 30px rgba(60,255,154,.70),
    0 0 42px rgba(60,255,154,.42);
  animation: wordTextFoundPop .28s ease both;
}

.wordText.wordPassTextFx{
  color: #ffb347;
  text-shadow:
    0 6px 18px rgba(0,0,0,.65),
    0 0 30px rgba(255,179,71,.68),
    0 0 42px rgba(255,209,102,.35);
  animation: wordTextPassPop .26s ease both;
}

@keyframes wordTextFoundPop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.07); }
  100%{ transform:scale(1); }
}

@keyframes wordTextPassPop{
  0%{ transform:scale(1); }
  35%{ transform:scale(.96) rotate(-1deg); }
  70%{ transform:scale(1.04) rotate(1deg); }
  100%{ transform:scale(1) rotate(0); }
}
/* EFFET TEXTE MOT TROUVÉ / PASSÉ — FIN */

/* AJOUT COMPTE À REBOURS — DÉBUT */
.countdownOverlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(700px 420px at 50% 40%, rgba(124,92,255,.42), transparent 65%),
    radial-gradient(700px 420px at 50% 65%, rgba(0,212,255,.25), transparent 65%),
    rgba(8,10,18,.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.countdownOverlay.show{
  display:flex;
}

.countdownNumber{
  font-size: clamp(90px, 20vw, 180px);
  font-weight: 1100;
  line-height:1;
  color:#fff;
  text-shadow: 0 18px 60px rgba(0,0,0,.65);
  animation: countdownPop .65s ease both;
}

@keyframes countdownPop{
  0%{ transform:scale(.55); opacity:0; }
  45%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

.turnSheet.countdownActive .turnBottom{
  opacity:.35;
  pointer-events:none;
}

.turnSheet.countdownActive .wordCard{
  filter: blur(4px);
  opacity:.38;
}
/* AJOUT COMPTE À REBOURS — FIN */
/* EFFETS MOT TROUVÉ / PASSÉ — DÉBUT */
.wordCard{
  position:relative;
}

.wordCard.wordFoundFx{
  animation: wordFoundPulse .28s ease both;
}

.wordCard.wordPassFx{
  animation: wordPassShake .26s ease both;
}

@keyframes wordFoundPulse{
  0%{
    transform:scale(1);
    box-shadow: 0 22px 80px rgba(0,0,0,.55);
  }
  45%{
    transform:scale(1.045);
    box-shadow:
      0 22px 80px rgba(0,0,0,.55),
      0 0 0 6px rgba(60,255,154,.22),
      0 0 38px rgba(60,255,154,.42);
  }
  100%{
    transform:scale(1);
    box-shadow: 0 22px 80px rgba(0,0,0,.55);
  }
}


@keyframes wordPassShake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-8px); }
  50%{ transform:translateX(8px); }
  75%{ transform:translateX(-4px); }
  100%{ transform:translateX(0); }
}

/* Effet sous le doigt au clic sur Trouvé / Passer */
.turnBottom button{
  position: relative;
  overflow: hidden;
}

.tapRipple{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%, -50%) scale(.4);
  opacity:.75;
  animation: tapRippleFx .42s ease-out forwards;
}

.tapRipple.found{
  background:rgba(60,255,154,.75);
  box-shadow:
    0 0 0 6px rgba(60,255,154,.18),
    0 0 22px rgba(60,255,154,.65);
}

.tapRipple.pass{
  background:rgba(255,209,102,.75);
  box-shadow:
    0 0 0 6px rgba(255,209,102,.18),
    0 0 22px rgba(255,209,102,.60);
}

@keyframes tapRippleFx{
  0%{
    transform:translate(-50%, -50%) scale(.4);
    opacity:.85;
  }
  100%{
    transform:translate(-50%, -50%) scale(4.2);
    opacity:0;
  }
}

.turnBottom button.touchFx{
  animation: buttonTouchPop .18s ease both;
}

@keyframes buttonTouchPop{
  0%{ transform:scale(1); }
  50%{ transform:scale(.96); }
  100%{ transform:scale(1); }
}
/* EFFETS MOT TROUVÉ / PASSÉ — FIN */
    .turnBottom{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 10px;
      border-radius: 22px;
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.10);
      flex-shrink: 0;
    }
    .turnBottom button{
      min-height: 56px;
      padding: 16px 12px;
      font-size: clamp(15px, 2.4vw, 18px);
      border-radius: 18px;
    }

    .finalCard{
      border-radius: 20px;
      overflow:auto;
    }

  .miniScoreBox{
  margin-top:12px;
  padding:0;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.miniScoreTitle{
  font-weight:1000;
  padding:14px 16px 0;
  margin-bottom:8px;
}

.miniScoreTable{
  border-collapse:collapse;
  width:100%;
  min-width:640px;
}

.miniScoreTable thead th{
  padding:14px 16px;
  font-size:14px;
  font-weight:1000;
  color:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(255,255,255,.12);
  text-align:center;
}

.miniScoreTable thead th:first-child{
  text-align:left;
}

.miniScoreTable tbody td{
  padding:16px 16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  vertical-align:middle;
  font-size:18px;
  text-align:center;
}

.miniScoreTable tbody td:first-child{
  text-align:left;
}

.miniScoreTable tbody tr:last-child td{
  border-bottom:0;
}

.miniScoreTeamCell{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:260px;
}

.miniScoreAvatar{
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:27px;
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}

.miniScoreAvatar.violet{background:linear-gradient(135deg,#8b4dff,#b45cff);}
.miniScoreAvatar.bleu{background:linear-gradient(135deg,#1684ff,#37b8ff);}
.miniScoreAvatar.vert{background:linear-gradient(135deg,#28d67b,#7cffb2);}
.miniScoreAvatar.orange{background:linear-gradient(135deg,#ff8a1d,#ffd166);}
.miniScoreAvatar.rouge{background:linear-gradient(135deg,#ff3f68,#ff7a7a);}
.miniScoreAvatar.jaune{background:linear-gradient(135deg,#ffd166,#fff06a); color:#17130a;}
.miniScoreAvatar.rose{background:linear-gradient(135deg,#ff5ccf,#ff9ce8);}
.miniScoreAvatar.turquoise{background:linear-gradient(135deg,#00d4ff,#4dffdf);}
.miniScoreAvatar.default{background:linear-gradient(135deg,var(--accent),var(--accent2));}

.miniScoreTeamName{
  font-size:16px;
  font-weight:1100;
  color:#fff;
  line-height:1.15;
}

.miniScorePlayers{
  margin-top:4px;
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  color:rgba(255,255,255,.68);
}

.miniScorePlayers.violet{color:#b77cff;}
.miniScorePlayers.bleu{color:#45a8ff;}
.miniScorePlayers.vert{color:#55e99a;}
.miniScorePlayers.orange{color:#ffb347;}
.miniScorePlayers.rouge{color:#ff6f8d;}
.miniScorePlayers.jaune{color:#ffd166;}
.miniScorePlayers.rose{color:#ff8ee4;}
.miniScorePlayers.turquoise{color:#4dffdf;}

.miniScoreNumber{
  text-align:center;
  font-size:20px;
  font-weight:1000;
  color:rgba(255,255,255,.90);
}

.miniScoreTotal{
  text-align:center;
  font-size:21px;
  font-weight:1100;
}

.miniScoreTotal.violet,
.miniScoreNumber.violet{color:#b77cff;}

.miniScoreTotal.bleu,
.miniScoreNumber.bleu{color:#45a8ff;}

.miniScoreTotal.vert,
.miniScoreNumber.vert{color:#55e99a;}

.miniScoreTotal.orange,
.miniScoreNumber.orange{color:#ffb347;}

.miniScoreTotal.rouge,
.miniScoreNumber.rouge{color:#ff6f8d;}

.miniScoreTotal.jaune,
.miniScoreNumber.jaune{color:#ffd166;}

.miniScoreTotal.rose,
.miniScoreNumber.rose{color:#ff8ee4;}

.miniScoreTotal.turquoise,
.miniScoreNumber.turquoise{color:#4dffdf;}

.miniScoreMobilePlayers{
  display:block;
  margin-top:3px;
  font-size:13px;
  color:rgba(255,255,255,.66);
  font-weight:800;
}
    .miniScoreMobileHeaderLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.miniScoreMobileAvatar{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-size:23px;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}

.miniScoreMobileAvatar.violet{background:linear-gradient(135deg,#8b4dff,#b45cff);}
.miniScoreMobileAvatar.bleu{background:linear-gradient(135deg,#1684ff,#37b8ff);}
.miniScoreMobileAvatar.vert{background:linear-gradient(135deg,#28d67b,#7cffb2);}
.miniScoreMobileAvatar.orange{background:linear-gradient(135deg,#ff8a1d,#ffd166);}
.miniScoreMobileAvatar.rouge{background:linear-gradient(135deg,#ff3f68,#ff7a7a);}
.miniScoreMobileAvatar.jaune{background:linear-gradient(135deg,#ffd166,#fff06a); color:#17130a;}
.miniScoreMobileAvatar.rose{background:linear-gradient(135deg,#ff5ccf,#ff9ce8);}
.miniScoreMobileAvatar.turquoise{background:linear-gradient(135deg,#00d4ff,#4dffdf);}
.miniScoreMobileAvatar.default{background:linear-gradient(135deg,var(--accent),var(--accent2));}

@media (max-width:360px){
  .miniScoreMobileAvatar{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .miniScoreMobileHeaderLeft{
    gap:9px;
  }
}
  
    .modalTools{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-top:10px;
    }

    .revealTeamsGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin-top:10px;
    }
    @media (max-width:560px){
      .revealTeamsGrid{
        grid-template-columns:1fr;
      }
    }
    .revealTeamCard{
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.18), transparent 60%),
        radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.12), transparent 60%),
        rgba(255,255,255,.04);
    }
    .revealTeamTitle{
      font-weight:1000;
      margin-bottom:8px;
      font-size:14px;
    }
    .revealPlayerList{
      font-size:13px;
      line-height:1.55;
      color:rgba(255,255,255,.88);
    }

    .quickSetupGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-top:12px;
    }

    .quickSetupCard{
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.18), transparent 60%),
        radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.12), transparent 60%),
        rgba(255,255,255,.04);
    }

    .quickSetupTitle{
      font-size:14px;
      font-weight:1000;
      margin-bottom:8px;
    }

    .quickSetupHint{
      margin-top:10px;
      font-size:12px;
      color:#ffd166;
      font-weight:800;
    }

    .quickSetupRequired{
      color:#ffd166;
      font-weight:1000;
    }

    .finalDesktopTable{
      display:block;
      margin-top:14px;
    }

    .finalMobileCards{
      display:none;
    }

    .finalMobileCard{
      padding:12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.14), transparent 60%),
        radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.10), transparent 60%),
        rgba(0,0,0,.12);
    }

    .finalMobileCardHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
    }

    .finalMobileTeamName{
      font-size:16px;
      font-weight:1000;
    }

    .finalMobileTotal{
      padding:6px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      font-size:12px;
      font-weight:1000;
      white-space:nowrap;
    }

    .finalMobileRows{
      display:grid;
      gap:6px;
    }

    .finalMobileRow{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:8px 0;
      border-top:1px solid rgba(255,255,255,.08);
      font-size:14px;
    }

    .finalMobileRow strong{
      font-size:15px;
    }
    .finalMobileRow strong.miniScoreNumber,
.finalMobileRow strong.miniScoreTotal{
  font-size:18px;
}

    .finalMobileRow.total{
  font-weight:1000;
}

.scoresDesktopTable{
  display:block;
  margin-top:14px;
}

.scoresMobileCards{
  display:none;
}

.miniScoreDesktop{
  display:block;
}

.miniScoreMobile{
  display:none;
}

    .screen{display:none}
    .screen.active{display:block}

    .homeScreenWrap,
    .rulesScreenWrap{
      min-height: calc(100vh - 44px);
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .homeCard,
    .rulesCard{
      width:min(900px, 100%);
      background: var(--card);
      border:1px solid rgba(255,255,255,.10);
      border-radius: 28px;
      padding: 24px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
    }

    .homeCard{
      text-align:center;
      padding: 30px 24px;
    }

    .logoHeroWrap{
      display:flex;
      justify-content:center;
      margin-bottom:18px;
    }

    .logoHero{
      max-width:min(520px, 92%);
      width:100%;
      height:auto;
      display:block;
      filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
      user-select:none;
      -webkit-user-drag:none;
    }

    .homeTitle{
      margin:0;
      font-size: clamp(26px, 4vw, 42px);
      font-weight: 1100;
      letter-spacing: .2px;
    }

    .homeSubtitle{
      margin:10px auto 0;
      max-width:700px;
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
    }

    .homeActions{
      display:flex;
      gap:12px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:22px;
    }

    .homeActions button{
      min-width: 220px;
      padding:14px 18px;
      font-size:16px;
      border-radius:18px;
    }

    .homeInfoBar{
      display:flex;
      gap:10px;
      justify-content:center;
      flex-wrap:wrap;
      margin-top:18px;
    }

    .homeInfoPill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 12px;
      border-radius:999px;
      background: rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      font-size:12px;
      font-weight:900;
      color:rgba(255,255,255,.92);
    }

    .rulesTop{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:14px;
    }

    .rulesTitle{
      margin:0;
      font-size: clamp(22px, 3vw, 34px);
      font-weight:1100;
    }

    .rulesLead{
      color:var(--muted);
      font-size:14px;
      line-height:1.5;
      margin-bottom:18px;
    }

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

    .ruleBlock{
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.15), transparent 60%),
        radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.10), transparent 60%),
        rgba(0,0,0,.10);
    }

    .ruleBlock h3{
      margin:0 0 8px 0;
      font-size:15px;
      font-weight:1000;
    }

    .ruleBlock p{
      margin:0;
      color:rgba(255,255,255,.82);
      font-size:13px;
      line-height:1.55;
    }

    .rulesActions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
      margin-top:18px;
    }

    .homeLegalLine{
      margin-top: 12px;
      text-align: center;
      font-size: 11px;
      line-height: 1.5;
      opacity: .78;
    }

    .homeLegalLine a{
      color: rgba(255,255,255,.78);
      text-decoration: none;
      margin: 0 3px;
    }

    .homeLegalLine a:hover{
      color: #fff;
      text-decoration: underline;
    }

    .installCards{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      margin-top:10px;
    }

    .installCard{
      padding:18px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.12);
      background:
        radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.18), transparent 60%),
        radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.12), transparent 60%),
        rgba(255,255,255,.04);
      box-shadow: 0 18px 40px rgba(0,0,0,.22);
    }

    .installCardIcon{
      font-size:30px;
      margin-bottom:10px;
    }

    .installCardTitle{
      font-size:18px;
      font-weight:1000;
      margin-bottom:10px;
    }

    .installCardText{
      font-size:14px;
      line-height:1.7;
      color:rgba(255,255,255,.86);
    }
    
.configIntro{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.12), transparent 60%),
    rgba(255,255,255,.04);
  margin-bottom:14px;
}

.configIntroTitle{
  font-size:18px;
  font-weight:1100;
  margin-bottom:6px;
}

.configIntroText{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
}

.setupStep{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  scroll-margin-top: 16px;
}

.setupStepHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}

.setupStepTitle{
  font-size:15px;
  font-weight:1100;
}

.setupStepHint{
  font-size:12px;
  color:rgba(255,255,255,.62);
  line-height:1.45;
  margin-top:3px;
}

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

.presetCard{
  text-align:left;
  padding:13px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.06);
  box-shadow:none;
  min-height:96px;
}

.presetCard strong{
  display:block;
  font-size:14px;
  margin-bottom:5px;
}

.presetCard span{
  display:block;
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.68);
  font-weight:700;
}

.presetCard.active{
  background:linear-gradient(135deg, rgba(124,92,255,.50), rgba(0,212,255,.22));
  border-color:rgba(124,92,255,.65);
}

.choiceGroup{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.choiceBtn{
  box-shadow:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  padding:10px 13px;
  border-radius:999px;
  font-size:13px;
}

.choiceBtn.active{
  background:linear-gradient(135deg, rgba(124,92,255,.82), rgba(0,212,255,.48));
  border-color:rgba(255,255,255,.24);
}

.configNumberLine{
  display:flex;
  align-items:center;
  gap:8px;
}

.configNumberLine input{
  text-align:center;
  font-weight:1000;
}

.setupSummary{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(60,255,154,.22);
  background:
    radial-gradient(420px 200px at 20% 25%, rgba(60,255,154,.14), transparent 60%),
    rgba(0,0,0,.16);
}

.setupSummaryTitle{
  font-size:14px;
  font-weight:1100;
  margin-bottom:6px;
}

.setupSummaryText{
  font-size:13px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}

.advancedBox{
  margin-top:14px;
}

.advancedBox summary{
  cursor:pointer;
  font-weight:1000;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.advancedBoxInner{
  margin-top:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
}

.startBar{
  position:sticky;
  bottom:10px;
  margin-top:14px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,10,18,.88);
  backdrop-filter:blur(12px);
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  z-index:5;
}

.startBar button{
  min-width:220px;
  min-height:50px;
  font-size:16px;
  border-radius:18px;
}
.mobileStartButton{
  display:none;
}
@media (max-width: 760px){
  .presetGrid{
    grid-template-columns:1fr 1fr;
  }

  .setupStepHeader{
    flex-direction:column;
  }

  .startBar{
  display:none;
}

  .mobileStartButton{
    display:block;
    position:fixed;
    left:max(10px, env(safe-area-inset-left));
    right:max(10px, env(safe-area-inset-right));
    bottom:max(10px, env(safe-area-inset-bottom));
    z-index:80;
    padding:10px;
    border-radius:20px;
    background:rgba(8,10,18,.90);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 50px rgba(0,0,0,.65);
  }

  .mobileStartButton button{
  width:100%;
  min-height:50px;
  font-size:16px;
  border-radius:16px;
  padding:12px 14px;
}

  #configScreen{
    padding-bottom:90px;
  }
}

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

  .choiceBtn{
    flex:1 1 auto;
  }
}
    @media (max-width: 900px){
      .turnInfoLine{
        gap: 8px;
      }

      .turnInfoPill{
        font-size: 13px;
        padding: 7px 11px;
      }

      .themeHero{
        font-size: clamp(18px, 4.2vw, 28px);
        max-width: 100%;
      }

      .bigTimer{
        font-size: clamp(46px, 10vw, 84px);
      }
    }

    @media (max-width:700px){
      .rulesGrid,
      .quickSetupGrid,
      .installCards{
        grid-template-columns:1fr;
      }
    }

   @media (max-width: 600px){
  .turnOverlay, .finalOverlay{
    padding: 8px;
    align-items: stretch;
  }

  .turnSheet, .finalSheet{
    width: min(980px, calc(100% - 4px));
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    min-height: 0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
  }

  .turnWrap, .finalWrap{
    gap: 8px;
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .turnTopMinimal,
  .turnTop{
    padding: 6px;
    border-radius: 16px;
    flex: 0 0 auto;
  }

  .iconBtn{
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .turnCenter{
    gap: 8px;
    padding: 0 9px;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    overflow-y: auto;
    overflow-x: visible;
  }

  .activePlayerHero{
    width: 100%;
    padding: 12px 12px;
    border-radius: 18px;
  }

  .activePlayerLabel{
    font-size: 11px;
    margin-bottom: 4px;
  }

  .activePlayerName{
    font-size: clamp(26px, 8vw, 40px);
  }

  .activePlayerTeam{
    margin-top: 6px;
    font-size: 13px;
  }

  .turnInfoLine{
    gap: 6px;
    flex-wrap: wrap;
  }

  .turnInfoPill{
    font-size: 11px;
    padding: 4px 8px;
  }

  .bigTimer{
    font-size: clamp(56px, 14vw, 84px);
    line-height: 1;
  }

  .bigBar{
    width: 100%;
  }

.wordCard{
  width: calc(100% - 8px);
  padding: 12px 10px;
  border-radius: 18px;
  flex: 0 0 auto;
  margin-left:auto;
  margin-right:auto;
}

  .wordText{
    font-size: clamp(42px, 12vw, 66px);
    line-height: 1.04;
  }

  .turnBottom{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    flex: 0 0 auto;
  }

  .turnBottom button{
    min-height: 58px;
    padding: 12px 8px;
    font-size: 18px;
    border-radius: 16px;
  }

  .finalDesktopTable,
  .miniScoreDesktop{
    display:none;
  }

  .finalMobileCards,
  .miniScoreMobile{
    display:grid;
    gap:10px;
    margin-top:14px;
  }

  .scoresDesktopTable{
    display:none;
  }

  .scoresMobileCards{
    display:grid;
    gap:10px;
    margin-top:14px;
  }
}

    @media (max-width: 380px){
      .turnSheet, .finalSheet{
        height: calc(100dvh - 10px);
        max-height: calc(100dvh - 10px);
      }

      .turnCenter{
        gap: 6px;
      }

      .turnBottom{
        grid-template-columns: 1fr 1fr;
        gap: 6px;
      }

      .turnBottom button{
        min-height: 54px;
        padding: 10px 6px;
        font-size: 16px;
      }

      .turnInfoPill{
        font-size: 10px;
        padding: 4px 7px;
      }

      .wordText{
  font-size: clamp(34px, 10vw, 54px);
  line-height: 1.05;
}
    }

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

 
    @media (max-width: 760px){
  .modalBackdrop{
    padding:0;
    align-items:stretch;
    justify-content:stretch;
    background:rgba(8,10,18,.98);
  }

  .modalBackdrop .modal{
    width:100%;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    border:0;
  }

  .modalBody{
    flex:1;
    overflow-y:auto;
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      16px
      max(16px, env(safe-area-inset-left));
  }

  .modalFooter{
    padding:
      12px
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    background:rgba(8,10,18,.98);
  }

  .modalFooter button{
  flex:1;
  min-height:48px;
  font-size:15px;
  border-radius:16px;
  padding:11px 12px;
}
}
@media (max-width: 760px){
  .modalBackdrop.simpleModal{
    padding:18px;
    align-items:center;
    justify-content:center;
    background:rgba(8,10,18,.78);
  }

  .modalBackdrop.simpleModal .modal{
    width:min(560px, 100%);
    height:auto;
    max-height:85dvh;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.14);
  }

  .modalBackdrop.simpleModal .modalBody{
    flex:0 1 auto;
    padding:20px;
  }

  .modalBackdrop.simpleModal #modalTitle{
    font-size:22px;
    line-height:1.15;
  }

  .modalBackdrop.simpleModal #modalText .small{
    font-size:15px;
    line-height:1.45;
    color:rgba(255,255,255,.78);
  }

  .modalBackdrop.simpleModal .modalFooter{
    position:static;
    padding:14px 20px 20px;
    background:rgba(8,10,18,.96);
  }

  .modalBackdrop.simpleModal .modalFooter button{
    min-height:48px;
    font-size:15px;
  }
}

/* Évite la sélection de texte involontaire sur iPhone / mobile */
body,
button,
.turnOverlay,
.finalOverlay,
.turnSheet,
.finalSheet,
.turnWrap,
.turnCenter,
.turnBottom,
.wordCard,
.wordText,
.activePlayerHero,
.activePlayerLabel,
.activePlayerName,
.activePlayerTeam,
.themeHero,
.turnInfoPill,
.bigTimer,
.pill,
.modalRoundBox,
.homeInfoPill,
.logoHero,
.ruleBlock,
.installCard,
.quickSetupCard,
.finalMobileCard,
.turnCorrectionHero,
.turnCorrectionBadge,
.turnCorrectionIcon,
.turnCorrectionLabel,
.turnCorrectionPlayer,
.turnCorrectionTeam,
.turnCorrectionStat,
.turnCorrectionWords,
.turnCorrectionWordName{
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* On garde la saisie normale dans les champs */
input,
textarea,
select{
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

  
  /* Correction mobile fenêtre prénoms : le bouton Démarrer reste visible */
  @media (max-width: 760px){
    #quickSetupModal .modal{
      height: 100dvh;
      max-height: 100dvh;
      display: flex;
      flex-direction: column;
    }

    #quickSetupModal .modalBody{
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding-bottom: 16px;
    }

    #quickSetupModal .modalFooter{
      flex: 0 0 auto;
      display: flex;
      flex-direction: column-reverse;
      gap: 10px;
      padding:
        12px
        max(16px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    }

    #quickSetupModal .modalFooter button{
      width: 100%;
      min-height: 50px;
      font-size: 16px;
    }

    #btnStartQuickSetup{
      order: 2;
    }

    #btnCloseQuickSetup{
      order: 1;
    }
  }
/* FIN MANCHE 3 / CHOIX MANCHE 4 — DÉBUT */
.round4ChoiceHero{
  margin-top:12px;
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(520px 260px at 20% 25%, rgba(124,92,255,.38), transparent 60%),
    radial-gradient(520px 260px at 80% 45%, rgba(0,212,255,.26), transparent 60%),
    rgba(255,255,255,.07);
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  text-align:center;
}

.round4ChoiceIcon{
  font-size:42px;
  line-height:1;
  margin-bottom:10px;
}

.round4ChoiceTitle{
  font-size:clamp(24px, 4vw, 38px);
  font-weight:1100;
  line-height:1.08;
  color:#fff;
  text-shadow:0 12px 34px rgba(0,0,0,.50);
}

.round4ChoiceSubtitle{
  margin:10px auto 0;
  max-width:620px;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.82);
}

.round4ChoiceCards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}

.round4ChoiceCard{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.16);
  text-align:left;
}

.round4ChoiceCard strong{
  display:block;
  font-size:15px;
  margin-bottom:6px;
  color:#fff;
}

.round4ChoiceCard span{
  display:block;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.74);
}

.round4ChoiceButtonsHint{
  margin-top:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,209,102,.24);
  background:rgba(255,209,102,.09);
  color:#ffd166;
  font-size:13px;
  line-height:1.45;
  font-weight:900;
}

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

  .round4ChoiceHero{
    padding:15px;
  }
}
/* FIN MANCHE 3 / CHOIX MANCHE 4 — FIN */
/* ÉCRAN FINAL PREMIUM — DÉBUT */
.finalChampionHero{
  margin-bottom:16px;
  padding:24px 18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(700px 320px at 20% 20%, rgba(124,92,255,.42), transparent 60%),
    radial-gradient(700px 320px at 80% 35%, rgba(0,212,255,.28), transparent 60%),
    radial-gradient(700px 320px at 50% 100%, rgba(60,255,154,.16), transparent 60%),
    rgba(255,255,255,.08);
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.finalChampionHero::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.10) 50%,
    transparent 65%
  );
  transform:rotate(12deg);
  animation: championShine 3.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes championShine{
  0%{ transform:translateX(-45%) rotate(12deg); opacity:0; }
  35%{ opacity:1; }
  70%{ transform:translateX(45%) rotate(12deg); opacity:0; }
  100%{ transform:translateX(45%) rotate(12deg); opacity:0; }
}

.finalChampionInner{
  position:relative;
  z-index:1;
}

.finalChampionBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:1000;
  color:#fff;
  margin-bottom:12px;
}

.finalChampionCup{
  font-size:64px;
  line-height:1;
  margin-bottom:10px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
  animation: championCupPop 1.25s ease-in-out infinite alternate;
}

@keyframes championCupPop{
  from{ transform:scale(1) rotate(-2deg); }
  to{ transform:scale(1.06) rotate(2deg); }
}

.finalChampionLabel{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:1000;
  color:rgba(255,255,255,.72);
  margin-bottom:6px;
}

.finalChampionTeam{
  font-size:clamp(30px, 5.5vw, 56px);
  font-weight:1100;
  line-height:1.04;
  color:#fff;
  text-shadow:
    0 14px 36px rgba(0,0,0,.55),
    0 0 34px rgba(124,92,255,.42),
    0 0 38px rgba(0,212,255,.24);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.finalChampionPlayers{
  margin-top:14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.finalChampionPlayer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.30);
  font-size:15px;
  font-weight:1000;
  color:#fff;
}

.finalChampionScores{
  margin-top:16px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.finalChampionScore{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.15);
  font-size:14px;
  font-weight:1000;
  color:#fff;
}

.finalChampionScore.total{
  background:linear-gradient(135deg, rgba(60,255,154,.30), rgba(0,212,255,.18));
  border-color:rgba(60,255,154,.30);
}

.finalChampionMessage{
  margin:15px auto 0;
  max-width:700px;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.86);
}

.finalChampionPodium{
  margin-top:18px;
  display:grid;
  gap:10px;
}

.finalChampionPodiumItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
}

.finalChampionPodiumLeft{
  min-width:0;
}

.finalChampionPodiumName{
  font-size:15px;
  font-weight:1100;
  color:#fff;
}

.finalChampionPodiumPlayers{
  margin-top:4px;
  font-size:13px;
  font-weight:800;
  color:rgba(255,255,255,.66);
}

.finalChampionPodiumPoints{
  font-size:18px;
  font-weight:1100;
  white-space:nowrap;
  color:#fff;
}

@media (max-width:600px){
  .finalChampionHero{
    padding:20px 14px;
    border-radius:22px;
  }

  .finalChampionCup{
    font-size:48px;
  }

  .finalChampionTeam{
    font-size:clamp(26px, 8.5vw, 38px);
  }

  .finalChampionPlayer{
    font-size:13px;
    padding:9px 12px;
  }

  .finalChampionScore{
    font-size:13px;
    padding:9px 12px;
  }

  .finalChampionPodiumItem{
    flex-direction:column;
    align-items:flex-start;
  }

  .finalChampionPodiumPoints{
    font-size:16px;
  }
}
/* ÉCRAN FINAL PREMIUM — FIN */
/* ÉCRANS PREMIUM DE TRANSITION — DÉBUT */

.premiumTransitionHero{
  margin-top:12px;
  padding:22px 18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(700px 320px at 20% 20%, rgba(124,92,255,.42), transparent 60%),
    radial-gradient(700px 320px at 80% 35%, rgba(0,212,255,.28), transparent 60%),
    radial-gradient(700px 320px at 50% 100%, rgba(60,255,154,.13), transparent 60%),
    rgba(255,255,255,.08);
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.premiumTransitionHero::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.10) 50%,
    transparent 65%
  );
  transform:rotate(12deg);
  animation: premiumTransitionShine 4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes premiumTransitionShine{
  0%{ transform:translateX(-45%) rotate(12deg); opacity:0; }
  35%{ opacity:1; }
  70%{ transform:translateX(45%) rotate(12deg); opacity:0; }
  100%{ transform:translateX(45%) rotate(12deg); opacity:0; }
}

.premiumTransitionInner{
  position:relative;
  z-index:1;
}

.premiumTransitionBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:1000;
  color:#fff;
  margin-bottom:12px;
}

.premiumTransitionIcon{
  font-size:58px;
  line-height:1;
  margin-bottom:10px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
  animation: premiumIconPop 1.25s ease-in-out infinite alternate;
}

@keyframes premiumIconPop{
  from{ transform:scale(1) rotate(-2deg); }
  to{ transform:scale(1.06) rotate(2deg); }
}

.premiumTransitionLabel{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:1000;
  color:rgba(255,255,255,.72);
  margin-bottom:6px;
}

.premiumTransitionTitle{
  font-size:clamp(30px, 5.2vw, 54px);
  font-weight:1100;
  line-height:1.04;
  color:#fff;
  text-shadow:
    0 14px 36px rgba(0,0,0,.55),
    0 0 34px rgba(124,92,255,.42),
    0 0 38px rgba(0,212,255,.24);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.premiumTransitionSubtitle{
  margin:12px auto 0;
  max-width:700px;
  font-size:15px;
  line-height:1.5;
  color:rgba(255,255,255,.84);
}

.premiumTransitionPlayers{
  margin-top:16px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.premiumTransitionPlayer{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.30);
  font-size:15px;
  font-weight:1000;
  color:#fff;
}

.premiumTransitionInfoGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}

.premiumTransitionInfoCard{
  padding:13px;
  border-radius:18px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
}

.premiumTransitionInfoCard strong{
  display:block;
  font-size:18px;
  font-weight:1100;
  color:#fff;
  margin-bottom:4px;
}

.premiumTransitionInfoCard span{
  display:block;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.68);
}

.premiumTransitionScoreFocus{
  margin-top:18px;
  padding:14px;
  border-radius:20px;
  background:
    radial-gradient(520px 260px at 20% 25%, rgba(60,255,154,.16), transparent 60%),
    rgba(0,0,0,.18);
  border:1px solid rgba(60,255,154,.22);
}

.premiumTransitionScoreFocusTitle{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:1000;
  color:rgba(255,255,255,.72);
  margin-bottom:8px;
}

.premiumTransitionScoreFocusTeam{
  font-size:clamp(22px, 4vw, 34px);
  font-weight:1100;
  color:#fff;
}

.premiumTransitionScoreFocusPoints{
  margin-top:6px;
  font-size:16px;
  font-weight:1000;
  color:#3cff9a;
}

.premiumTransitionMiniPodium{
  margin-top:14px;
  display:grid;
  gap:8px;
}

.premiumTransitionMiniPodiumItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  text-align:left;
}

.premiumTransitionMiniPodiumName{
  font-size:14px;
  font-weight:1000;
  color:#fff;
}

.premiumTransitionMiniPodiumPlayers{
  margin-top:3px;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.62);
}

.premiumTransitionMiniPodiumPoints{
  font-size:15px;
  font-weight:1100;
  color:#fff;
  white-space:nowrap;
}

/* +1 MOT TROUVÉ — DÉBUT */
.floatingPointFx{
  position:fixed;
  left:50%;
  top:50%;
  z-index:9997;
  transform:translate(-50%, -50%);
  pointer-events:none;
  padding:14px 22px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(60,255,154,.95), rgba(0,212,255,.75));
  color:#071014;
  font-size:clamp(26px, 6vw, 52px);
  font-weight:1100;
  box-shadow:
    0 18px 60px rgba(0,0,0,.45),
    0 0 42px rgba(60,255,154,.45);
  animation:floatingPointPop .62s ease-out forwards;
}

@keyframes floatingPointPop{
  0%{
    opacity:0;
    transform:translate(-50%, -42%) scale(.65);
  }
  25%{
    opacity:1;
    transform:translate(-50%, -50%) scale(1.08);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -92%) scale(1);
  }
}
/* +1 MOT TROUVÉ — FIN */

@media (max-width:700px){
  .premiumTransitionHero{
    padding:20px 14px;
    border-radius:22px;
  }

  .premiumTransitionIcon{
    font-size:48px;
  }

  .premiumTransitionTitle{
    font-size:clamp(26px, 8.5vw, 38px);
  }

  .premiumTransitionInfoGrid{
    grid-template-columns:1fr;
  }

  .premiumTransitionPlayer{
    font-size:13px;
    padding:9px 12px;
  }

  .premiumTransitionMiniPodiumItem{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ÉCRANS PREMIUM DE TRANSITION — FIN */
/* ÉCRAN PREMIUM SPÉCIAL MANCHES — DÉBUT */

.premiumTransitionHero.roundTheme1{
  background:
    radial-gradient(720px 360px at 20% 20%, rgba(60,255,154,.34), transparent 62%),
    radial-gradient(720px 360px at 80% 35%, rgba(0,212,255,.24), transparent 62%),
    rgba(255,255,255,.08);
}

.premiumTransitionHero.roundTheme2{
  background:
    radial-gradient(720px 360px at 20% 20%, rgba(255,209,102,.36), transparent 62%),
    radial-gradient(720px 360px at 80% 35%, rgba(124,92,255,.26), transparent 62%),
    rgba(255,255,255,.08);
}

.premiumTransitionHero.roundTheme3{
  background:
    radial-gradient(720px 360px at 20% 20%, rgba(0,212,255,.34), transparent 62%),
    radial-gradient(720px 360px at 80% 35%, rgba(124,92,255,.30), transparent 62%),
    rgba(255,255,255,.08);
}

.premiumTransitionHero.roundTheme4{
  background:
    radial-gradient(720px 360px at 20% 20%, rgba(180,92,255,.38), transparent 62%),
    radial-gradient(720px 360px at 80% 35%, rgba(255,77,109,.24), transparent 62%),
    radial-gradient(720px 360px at 50% 100%, rgba(255,209,102,.16), transparent 62%),
    rgba(255,255,255,.08);
}

.roundRulePremiumBox{
  margin:18px auto 0;
  max-width:720px;
  padding:16px;
  border-radius:22px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}

.roundRulePremiumLabel{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:1000;
  color:rgba(255,255,255,.65);
  margin-bottom:8px;
}

.roundRulePremiumText{
  font-size:clamp(17px, 2.6vw, 25px);
  line-height:1.35;
  font-weight:1000;
  color:#fff;
}

.roundRulePremiumHint{
  margin-top:10px;
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
  font-weight:700;
}

.premiumTransitionHero.roundStartFx .premiumTransitionIcon{
  animation: roundIconPremiumPop 1.1s ease-in-out infinite alternate;
}

@keyframes roundIconPremiumPop{
  from{
    transform:scale(1) rotate(-3deg);
    filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
  }
  to{
    transform:scale(1.11) rotate(3deg);
    filter:
      drop-shadow(0 14px 28px rgba(0,0,0,.45))
      drop-shadow(0 0 18px rgba(255,255,255,.22));
  }
}

.roundStartParticles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.roundStartParticles span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  animation: roundParticleFloat 3.6s ease-in-out infinite;
}

.roundStartParticles span:nth-child(1){left:12%; top:22%; animation-delay:0s;}
.roundStartParticles span:nth-child(2){left:84%; top:24%; animation-delay:.4s;}
.roundStartParticles span:nth-child(3){left:20%; top:76%; animation-delay:.8s;}
.roundStartParticles span:nth-child(4){left:72%; top:72%; animation-delay:1.2s;}
.roundStartParticles span:nth-child(5){left:48%; top:16%; animation-delay:1.6s;}
.roundStartParticles span:nth-child(6){left:54%; top:84%; animation-delay:2s;}

@keyframes roundParticleFloat{
  0%,100%{
    transform:translateY(0) scale(1);
    opacity:.25;
  }
  50%{
    transform:translateY(-18px) scale(1.45);
    opacity:.75;
  }
}

@media (max-width:700px){
  .roundRulePremiumBox{
    padding:14px;
    border-radius:18px;
  }

  .roundRulePremiumText{
    font-size:18px;
  }

  .roundRulePremiumHint{
    font-size:13px;
  }
}

/* ÉCRAN PREMIUM SPÉCIAL MANCHES — FIN */
/* CORRECTION DU TOUR PREMIUM — DÉBUT */

.turnCorrectionHero{
  margin-top:12px;
  padding:22px 18px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(700px 320px at 20% 20%, rgba(124,92,255,.42), transparent 60%),
    radial-gradient(700px 320px at 80% 35%, rgba(0,212,255,.28), transparent 60%),
    radial-gradient(700px 320px at 50% 100%, rgba(255,209,102,.12), transparent 60%),
    rgba(255,255,255,.08);
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  text-align:center;
  position:relative;
  overflow:hidden;
}

.turnCorrectionHero::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(
    120deg,
    transparent 35%,
    rgba(255,255,255,.10) 50%,
    transparent 65%
  );
  transform:rotate(12deg);
  animation: turnCorrectionShine 4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes turnCorrectionShine{
  0%{ transform:translateX(-45%) rotate(12deg); opacity:0; }
  35%{ opacity:1; }
  70%{ transform:translateX(45%) rotate(12deg); opacity:0; }
  100%{ transform:translateX(45%) rotate(12deg); opacity:0; }
}

.turnCorrectionInner{
  position:relative;
  z-index:1;
}

.turnCorrectionBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:1000;
  color:#fff;
  margin-bottom:12px;
}

.turnCorrectionIcon{
  font-size:54px;
  line-height:1;
  margin-bottom:10px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
  animation: turnCorrectionIconPop 1.2s ease-in-out infinite alternate;
}

@keyframes turnCorrectionIconPop{
  from{ transform:scale(1) rotate(-2deg); }
  to{ transform:scale(1.06) rotate(2deg); }
}

.turnCorrectionLabel{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:1000;
  color:rgba(255,255,255,.72);
  margin-bottom:6px;
}

.turnCorrectionPlayer{
  font-size:clamp(30px, 5.2vw, 54px);
  font-weight:1100;
  line-height:1.04;
  color:#fff;
  text-shadow:
    0 14px 36px rgba(0,0,0,.55),
    0 0 34px rgba(124,92,255,.42),
    0 0 38px rgba(0,212,255,.24);
  word-break:break-word;
  overflow-wrap:anywhere;
}

.turnCorrectionTeam{
  margin-top:10px;
  font-size:17px;
  font-weight:1000;
  color:rgba(255,255,255,.86);
}

.turnCorrectionStats{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}

.turnCorrectionStat{
  padding:13px;
  border-radius:18px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  text-align:center;
}

.turnCorrectionStat strong{
  display:block;
  font-size:22px;
  font-weight:1100;
  color:#fff;
  margin-bottom:4px;
}

.turnCorrectionStat span{
  display:block;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.68);
}

.turnCorrectionAdjust{
  margin-top:16px;
  padding:14px;
  border-radius:20px;
  background:
    radial-gradient(520px 260px at 20% 25%, rgba(255,209,102,.14), transparent 60%),
    rgba(0,0,0,.18);
  border:1px solid rgba(255,209,102,.20);
}

.turnCorrectionAdjustTitle{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:1000;
  color:rgba(255,255,255,.72);
  margin-bottom:10px;
}

.turnCorrectionAdjustButtons{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.turnCorrectionAdjustButtons button{
  min-width:70px;
}

.turnCorrectionWords{
  margin-top:16px;
  padding:14px;
  border-radius:20px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
}

.turnCorrectionWordsTitle{
  font-size:14px;
  font-weight:1100;
  margin-bottom:10px;
  color:#fff;
}

.turnCorrectionWordRow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.turnCorrectionWordsTitle + .turnCorrectionWordRow{
  border-top:0;
}

.turnCorrectionWordName{
  flex:1;
  font-size:15px;
  font-weight:900;
  color:rgba(255,255,255,.90);
}

.turnCorrectionEmpty{
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
  text-align:center;
}

@media (max-width:700px){
  .turnCorrectionHero{
    padding:20px 14px;
    border-radius:22px;
  }

  .turnCorrectionIcon{
    font-size:44px;
  }

  .turnCorrectionPlayer{
    font-size:clamp(26px, 8.5vw, 38px);
  }

  .turnCorrectionStats{
    grid-template-columns:1fr;
  }

  .turnCorrectionWordRow{
    flex-direction:column;
    align-items:flex-start;
  }

  .turnCorrectionWordRow button{
    width:100%;
  }
}

/* CORRECTION DU TOUR PREMIUM — FIN */
/* ÉCRAN MOT À TROUVER PREMIUM — DÉBUT */

.turnSheet{
  background:
    radial-gradient(850px 420px at 18% 18%, rgba(124,92,255,.24), transparent 62%),
    radial-gradient(850px 420px at 82% 28%, rgba(0,212,255,.16), transparent 62%),
    radial-gradient(700px 380px at 50% 100%, rgba(60,255,154,.10), transparent 62%),
    rgba(255,255,255,.065);
}

.turnSheet::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(
    120deg,
    transparent 38%,
    rgba(255,255,255,.055) 50%,
    transparent 62%
  );
  transform:rotate(12deg);
  animation: turnPremiumShine 5.5s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}

.turnWrap{
  position:relative;
  z-index:1;
}

@keyframes turnPremiumShine{
  0%{ transform:translateX(-45%) rotate(12deg); opacity:0; }
  35%{ opacity:1; }
  70%{ transform:translateX(45%) rotate(12deg); opacity:0; }
  100%{ transform:translateX(45%) rotate(12deg); opacity:0; }
}

.turnSheet.roundPlaying1{
  background:
    radial-gradient(850px 420px at 18% 18%, rgba(60,255,154,.24), transparent 62%),
    radial-gradient(850px 420px at 82% 28%, rgba(0,212,255,.16), transparent 62%),
    rgba(255,255,255,.065);
}

.turnSheet.roundPlaying2{
  background:
    radial-gradient(850px 420px at 18% 18%, rgba(255,209,102,.26), transparent 62%),
    radial-gradient(850px 420px at 82% 28%, rgba(124,92,255,.18), transparent 62%),
    rgba(255,255,255,.065);
}

.turnSheet.roundPlaying3{
  background:
    radial-gradient(850px 420px at 18% 18%, rgba(0,212,255,.24), transparent 62%),
    radial-gradient(850px 420px at 82% 28%, rgba(124,92,255,.20), transparent 62%),
    rgba(255,255,255,.065);
}

.turnSheet.roundPlaying4{
  background:
    radial-gradient(850px 420px at 18% 18%, rgba(180,92,255,.30), transparent 62%),
    radial-gradient(850px 420px at 82% 28%, rgba(255,77,109,.16), transparent 62%),
    radial-gradient(700px 380px at 50% 100%, rgba(255,209,102,.12), transparent 62%),
    rgba(255,255,255,.065);
}

.turnTopMinimal{
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 16px 38px rgba(0,0,0,.30);
}

.themeHero{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(124,92,255,.30), rgba(0,212,255,.18)),
    rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 14px 44px rgba(0,0,0,.34),
    0 0 28px rgba(124,92,255,.20);
}

.themeHero::before{
  content:"";
  position:absolute;
  inset:-80%;
  background:linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.14) 50%,
    transparent 60%
  );
  animation: themeHeroLight 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes themeHeroLight{
  0%{ transform:translateX(-40%) rotate(15deg); opacity:0; }
  45%{ opacity:1; }
  80%{ transform:translateX(40%) rotate(15deg); opacity:0; }
  100%{ transform:translateX(40%) rotate(15deg); opacity:0; }
}

.activePlayerHero{
  background:
    radial-gradient(520px 260px at 20% 25%, rgba(124,92,255,.28), transparent 60%),
    radial-gradient(520px 260px at 80% 40%, rgba(0,212,255,.18), transparent 60%),
    rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 18px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.activePlayerLabel{
  color:rgba(255,255,255,.66);
}

.activePlayerName{
  text-shadow:
    0 12px 32px rgba(0,0,0,.55),
    0 0 28px rgba(124,92,255,.28);
}

.activePlayerTeam{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
}

.turnInfoLine{
  width:min(760px, 96%);
  padding:8px;
  border-radius:18px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 36px rgba(0,0,0,.26);
}

.turnInfoPill{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.bigTimer{
  position:relative;
  padding:4px 18px 8px;
  border-radius:24px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 20px 60px rgba(0,0,0,.38),
    0 0 34px rgba(0,212,255,.13);
}

.bigTimer.warn{
  box-shadow:
    0 20px 60px rgba(0,0,0,.38),
    0 0 38px rgba(255,209,102,.28);
}

.bigTimer.danger{
  animation: timerDangerPulse .55s ease-in-out infinite;
}

@keyframes timerDangerPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      0 20px 60px rgba(0,0,0,.38),
      0 0 34px rgba(255,77,109,.28);
  }
  50%{
    transform:scale(1.035);
    box-shadow:
      0 20px 60px rgba(0,0,0,.38),
      0 0 54px rgba(255,77,109,.46);
  }
}

.bigBar{
  height:16px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 14px 42px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.wordCard{
  position:relative;
  isolation:isolate;
  padding:clamp(22px, 4vw, 38px) clamp(16px, 3vw, 28px);
  border-radius:32px;
  background:
    radial-gradient(520px 260px at 18% 20%, rgba(124,92,255,.46), transparent 62%),
    radial-gradient(520px 260px at 82% 40%, rgba(0,212,255,.30), transparent 62%),
    radial-gradient(520px 260px at 50% 100%, rgba(255,255,255,.08), transparent 62%),
    rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 28px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 52px rgba(124,92,255,.20);
}

.wordCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:linear-gradient(
    135deg,
    rgba(60,255,154,.55),
    rgba(0,212,255,.35),
    rgba(124,92,255,.45),
    rgba(255,209,102,.30)
  );
  z-index:-2;
  opacity:.55;
  filter:blur(1px);
  animation: wordBorderGlow 3.8s ease-in-out infinite;
}

.wordCard::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:30px;
  background:
    radial-gradient(520px 260px at 18% 20%, rgba(124,92,255,.38), transparent 62%),
    radial-gradient(520px 260px at 82% 40%, rgba(0,212,255,.24), transparent 62%),
    rgba(8,10,18,.82);
  z-index:-1;
}

@keyframes wordBorderGlow{
  0%,100%{
    opacity:.35;
    filter:blur(1px);
  }
  50%{
    opacity:.78;
    filter:blur(2px);
  }
}

.wordText{
  font-size:clamp(46px, 7.2vw, 94px);
  text-shadow:
    0 10px 24px rgba(0,0,0,.72),
    0 0 30px rgba(124,92,255,.48),
    0 0 42px rgba(0,212,255,.30);
  transform:translateZ(0);
}

.turnBottom{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 52px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.turnBottom button{
  min-height:66px;
  border-radius:22px;
  font-size:clamp(18px, 2.6vw, 22px);
  letter-spacing:.2px;
  box-shadow:
    0 16px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.20);
}

.turnBottom .good{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.30), transparent 62%),
    linear-gradient(135deg, rgba(60,255,154,1), rgba(0,212,255,.70));
}

.turnBottom .bad{
  background:
    radial-gradient(220px 120px at 20% 20%, rgba(255,255,255,.22), transparent 62%),
    linear-gradient(135deg, rgba(255,77,109,1), rgba(255,209,102,.72));
}

.turnBottom button:disabled{
  opacity:.50;
  box-shadow:none;
}

/* Mobile : mot plus premium sans casser l'espace */
@media (max-width:600px){
  .themeHero{
    padding:8px 13px;
    font-size:clamp(17px, 4.5vw, 23px);
  }

  .activePlayerHero{
    padding:11px 12px;
  }

  .activePlayerTeam{
    padding:5px 10px;
  }

  .turnInfoLine{
    width:100%;
    padding:6px;
    border-radius:15px;
  }

  .bigTimer{
    padding:2px 14px 6px;
    border-radius:20px;
  }

  .wordCard{
    width:100%;
    padding:20px 12px;
    border-radius:24px;
  }

  .wordCard::after{
    border-radius:22px;
  }

  .wordText{
    font-size:clamp(48px, 14vw, 74px);
  }

  .turnBottom button{
    min-height:62px;
    font-size:18px;
    border-radius:18px;
  }
}

@media (max-width:380px){
  .wordCard{
    padding:16px 10px;
  }

  .wordText{
    font-size:clamp(38px, 12vw, 58px);
  }

  .turnBottom button{
    min-height:56px;
    font-size:16px;
  }
}
.themeHero{
  isolation:isolate;
}

.themeHero::before{
  z-index:-1;
}

.themeHero{
  z-index:1;
}

.turnCenter,
.turnTopMinimal,
.turnBottom{
  position:relative;
  z-index:2;
}

.countdownOverlay{
  z-index:30;
}
/* ÉCRAN MOT À TROUVER PREMIUM — FIN */
/* PAGE ACCUEIL PREMIUM — DÉBUT */

.homeCard{
  position:relative;
  overflow:hidden;
  border-radius:32px;
  padding:34px 26px;
  background:
    radial-gradient(760px 360px at 20% 15%, rgba(124,92,255,.42), transparent 62%),
    radial-gradient(760px 360px at 80% 25%, rgba(0,212,255,.28), transparent 62%),
    radial-gradient(700px 360px at 50% 100%, rgba(60,255,154,.14), transparent 62%),
    rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 32px 100px rgba(0,0,0,.58);
}

.homeCard::before{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(
    120deg,
    transparent 36%,
    rgba(255,255,255,.10) 50%,
    transparent 64%
  );
  transform:rotate(12deg);
  animation: homePremiumShine 5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes homePremiumShine{
  0%{ transform:translateX(-45%) rotate(12deg); opacity:0; }
  35%{ opacity:1; }
  70%{ transform:translateX(45%) rotate(12deg); opacity:0; }
  100%{ transform:translateX(45%) rotate(12deg); opacity:0; }
}

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

.logoHeroWrap{
  position:relative;
  margin-bottom:18px;
}

.logoHeroWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(460px, 86vw);
  height:min(180px, 34vw);
  transform:translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(124,92,255,.34), transparent 64%),
    radial-gradient(circle, rgba(0,212,255,.22), transparent 70%);
  filter:blur(10px);
  pointer-events:none;
}

.logoHero{
  position:relative;
  z-index:1;
  max-width:min(540px, 94%);
  filter:
    drop-shadow(0 20px 46px rgba(0,0,0,.55))
    drop-shadow(0 0 26px rgba(124,92,255,.22));
}

.homeTitle{
  font-size:clamp(34px, 5vw, 58px);
  line-height:1.02;
  text-shadow:
    0 14px 34px rgba(0,0,0,.55),
    0 0 32px rgba(124,92,255,.34),
    0 0 36px rgba(0,212,255,.20);
}

.homeSubtitle{
  max-width:760px;
  margin-top:6px;
  font-size:clamp(15px, 2vw, 18px);
  color:rgba(255,255,255,.84);
}

.homePremiumBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
 margin:16px auto 14px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:13px;
  font-weight:1000;
  box-shadow:0 12px 30px rgba(0,0,0,.26);
}

.homeInfoBar{
  margin-top:22px;
}

.homeInfoPill{
  padding:10px 14px;
  background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 12px 28px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.homeActions{
  margin-top:26px;
}

.homeActions button{
  min-height:54px;
  border-radius:20px;
  box-shadow:
    0 16px 42px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.homeActions .primary{
  min-width:270px;
  font-size:18px;
  background:
    radial-gradient(240px 130px at 20% 20%, rgba(255,255,255,.28), transparent 62%),
    linear-gradient(135deg, rgba(124,92,255,1), rgba(0,212,255,.82));
}

.homeActions .ghost{
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.13);
}

.homePremiumCards{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-top:24px;
}

.homePremiumCard{
  display:block;
  width:100%;
  text-align:center;
  padding:16px 12px;
  border-radius:20px;
  background:
    radial-gradient(220px 120px at 20% 15%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 16px 36px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
  cursor:pointer;
  color:var(--txt);
  min-height:150px;
}

.homePremiumCard:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  border-color:rgba(124,92,255,.45);
}

.homePremiumCard:active{
  transform:translateY(1px);
}

.homePremiumCardMain{
  background:
    radial-gradient(240px 130px at 20% 20%, rgba(255,255,255,.22), transparent 62%),
    linear-gradient(135deg, rgba(124,92,255,.58), rgba(0,212,255,.28));
  border-color:rgba(124,92,255,.55);
}

.homeInstallActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:18px;
}

.homeInstallActions button{
  min-height:44px;
  border-radius:16px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(255,255,255,.13);
}

.homePremiumCardIcon{
  font-size:28px;
  line-height:1;
  margin-bottom:8px;
}

.homePremiumCardTitle{
  font-size:14px;
  font-weight:1100;
  color:#fff;
  margin-bottom:5px;
  text-shadow:0 8px 20px rgba(0,0,0,.35);
}

.homePremiumCardText{
  font-size:12px;
  line-height:1.45;
  color:rgba(255,255,255,.82);
  font-weight:750;
}

.homeReassurance{
  margin:18px auto 0;
  max-width:760px;
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}

.homeReassurance span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(60,255,154,.10);
  border:1px solid rgba(60,255,154,.20);
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:1000;
}

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

@media (max-width:520px){
  .homeCard{
    padding:26px 16px;
    border-radius:26px;
  }

  .homePremiumBadge{
    font-size:12px;
  }

  .homePremiumCards{
    grid-template-columns:1fr;
  }

  .homePremiumCard{
    min-height:auto;
    padding:16px 14px;
  }

  .homeSubtitle{
    font-size:14px;
  }

  .homeInstallActions{
    display:grid;
    grid-template-columns:1fr;
  }

  .homeInstallActions button{
    width:100%;
  }
}

/* PAGE ACCUEIL PREMIUM — FIN */
/* CORRECTION MOT COUPÉ LETTRE PAR LETTRE — DÉBUT */
.wordText{
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  hyphens: none !important;
  text-wrap: balance;
}

/* Sur mobile, on réduit légèrement pour éviter les lettres seules */
@media (max-width:600px){
  .wordText{
    font-size: clamp(38px, 11vw, 64px) !important;
  }
}

@media (max-width:380px){
  .wordText{
    font-size: clamp(32px, 10vw, 52px) !important;
  }
}
/* CORRECTION MOT COUPÉ LETTRE PAR LETTRE — FIN */
/* =========================================================
   CORRECTION FINALE AFFICHAGE JEU
   Mobile / iPad / ordinateur
   À placer tout en bas du CSS
   ========================================================= */

/* Base commune : les boutons restent visibles */
.turnOverlay{
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.turnSheet{
  height: calc(100dvh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.turnWrap{
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

.turnCenter{
  min-height: 0 !important;
  overflow: hidden !important;
}

.turnBottom{
  flex: 0 0 auto !important;
}

/* Ordinateur */
@media (min-width: 1181px){
  .turnOverlay{
    padding: 12px !important;
  }

  .turnSheet{
    width: min(980px, calc(100vw - 24px)) !important;
    height: calc(100dvh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .turnWrap{
    gap: 10px !important;
  }

  .turnCenter{
    gap: 10px !important;
    justify-content: center !important;
  }

  .activePlayerHero{
    padding: 10px 14px !important;
  }

  .activePlayerName{
    font-size: clamp(24px, 3.2vw, 40px) !important;
  }

  .bigTimer{
    font-size: clamp(46px, 5.6vw, 74px) !important;
    padding: 2px 16px 6px !important;
  }

  .wordCard{
    width: min(760px, 96%) !important;
    max-height: 30vh !important;
    min-height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 20px !important;
  }

  .wordText{
    font-size: clamp(34px, 4.8vw, 66px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .turnBottom button{
    min-height: 58px !important;
    font-size: clamp(17px, 1.8vw, 20px) !important;
    padding: 10px !important;
  }
}

/* Ordinateur avec fenêtre basse */
@media (min-width: 1181px) and (max-height: 820px){
  .turnWrap{
    gap: 7px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .turnCenter{
    gap: 7px !important;
  }

  .themeHero{
    padding: 6px 14px !important;
    font-size: clamp(17px, 2vw, 26px) !important;
  }

  .activePlayerHero{
    padding: 8px 14px !important;
  }

  .activePlayerName{
    font-size: clamp(22px, 2.8vw, 34px) !important;
  }

  .turnInfoLine{
    padding: 5px !important;
  }

  .bigTimer{
    font-size: clamp(42px, 5vw, 64px) !important;
  }

  .wordCard{
    max-height: 26vh !important;
    min-height: 95px !important;
    padding: 12px 16px !important;
  }

  .wordText{
    font-size: clamp(30px, 4.3vw, 56px) !important;
  }

  .turnBottom button{
    min-height: 54px !important;
    font-size: 17px !important;
  }
}

/* iPad / tablette portrait */
@media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait){
  .turnOverlay{
    padding: 8px !important;
  }

  .turnSheet{
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 22px !important;
  }

  .turnWrap{
    gap: 12px !important;
    padding: 12px !important;
  }

  .turnCenter{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }

  .activePlayerName{
    font-size: clamp(38px, 6.4vw, 62px) !important;
  }

  .bigTimer{
    font-size: clamp(78px, 12vw, 128px) !important;
  }

  .wordCard{
    width: min(780px, 98%) !important;
    max-height: 32vh !important;
    min-height: 160px !important;
    padding: 24px 20px !important;
  }

  .wordText{
    font-size: clamp(58px, 8.8vw, 98px) !important;
    line-height: 1.04 !important;
  }

  .turnBottom button{
    min-height: 76px !important;
    font-size: 22px !important;
  }
}

/* iPad / tablette paysage : affichage normal */
@media (min-width: 941px) and (max-width: 1180px) and (orientation: landscape){
  .turnOverlay{
    padding: 10px !important;
  }

  .turnSheet{
    width: min(980px, calc(100vw - 20px)) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 24px !important;
  }

  .turnWrap{
    gap: 10px !important;
    padding: 10px !important;
  }

  .turnCenter{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  .themeHero,
  .activePlayerHero,
  .turnInfoLine,
  .bigTimer,
  .bigBar,
  .wordCard{
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .turnInfoLine{
    display: flex !important;
  }

  .wordCard{
    width: min(760px, 96%) !important;
    height: auto !important;
    max-height: 28vh !important;
    min-height: 115px !important;
    margin: 0 auto !important;
    padding: 16px 18px !important;
  }

  .wordText{
    font-size: clamp(42px, 5.6vw, 72px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .turnBottom button{
    min-height: 62px !important;
    font-size: 20px !important;
  }

  .turnBottom button span{
    display: inline !important;
  }
}

/* Téléphone paysage uniquement : compact en 2 colonnes */
@media (max-width: 940px) and (orientation: landscape) and (max-height: 560px){
  .turnOverlay{
    padding: 6px !important;
  }

  .turnSheet{
    width: calc(100vw - 12px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px !important;
  }

  .turnWrap{
    gap: 6px !important;
    padding: 6px 8px !important;
  }

  .turnTopMinimal{
    padding: 3px 6px !important;
    min-height: 34px !important;
  }

  .iconBtn{
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  .turnCenter{
    display: grid !important;
    grid-template-columns: 0.78fr 1.65fr !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    gap: 5px 10px !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .themeHero{
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 8px !important;
    font-size: clamp(12px, 2vw, 16px) !important;
  }

  .activePlayerHero{
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    padding: 6px 8px !important;
  }

  .activePlayerLabel{
    font-size: 8px !important;
    margin-bottom: 2px !important;
  }

  .activePlayerName{
    font-size: clamp(16px, 3.1vw, 24px) !important;
  }

  .activePlayerTeam{
    font-size: 10px !important;
    padding: 3px 7px !important;
  }

  .turnInfoLine{
    display: none !important;
  }

  .bigTimer{
    grid-column: 1 / 2 !important;
    grid-row: 3 / 4 !important;
    font-size: clamp(34px, 7vw, 54px) !important;
    padding: 2px 12px 5px !important;
  }

  .bigBar{
    grid-column: 1 / 2 !important;
    grid-row: 4 / 5 !important;
    width: 100% !important;
    height: 9px !important;
  }

  .wordCard{
    grid-column: 2 / 3 !important;
    grid-row: 1 / 5 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 10px 14px !important;
  }

  .wordText{
    font-size: clamp(38px, 8.2vw, 78px) !important;
    line-height: 1.02 !important;
  }

  .turnBottom{
    gap: 8px !important;
    padding: 5px !important;
  }

  .turnBottom button{
    min-height: 52px !important;
    padding: 9px 10px !important;
    font-size: 17px !important;
  }

  .turnBottom button span{
    display: none !important;
  }
}

/* Modales en paysage mobile/tablette */
@media (max-width: 1180px) and (orientation: landscape) and (max-height: 620px){
  .modalBackdrop{
    align-items: stretch !important;
    justify-content: center !important;
    padding: 6px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modalBackdrop .modal{
    width: min(900px, calc(100vw - 12px)) !important;
    height: auto !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .modalBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .modalFooter{
    flex: 0 0 auto !important;
    position: sticky !important;
    bottom: 0 !important;
  }

  #quickSetupModal .quickSetupGrid{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #quickSetupModal .quickSetupCard{
    padding: 10px !important;
  }

  #quickSetupModal label{
    margin: 6px 0 4px !important;
    font-size: 11px !important;
  }

  #quickSetupModal input{
    padding: 8px 10px !important;
  }
}
/* =========================================================
   CORRECTION MOBILE PAYSAGE
   On garde chrono à gauche + mot à droite
   Mais tout est centré dans les emplacements
   ========================================================= */

@media (max-width: 940px) and (orientation: landscape) and (max-height: 560px){

  .turnCenter{
    align-items: center !important;
  }

  .themeHero,
  .activePlayerHero,
  .bigTimer,
  .bigBar{
    align-self: center !important;
    justify-self: center !important;
  }

  .bigTimer{
    width: 100% !important;
    max-width: 210px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bigBar{
    max-width: 210px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .wordCard{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .wordText{
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin: 0 auto !important;
  }
}
/* =========================================================
   CORRECTION ÉCRAN RÉSULTATS FINAUX
   Les boutons du bas restent toujours visibles
   ========================================================= */

.finalOverlay{
  align-items: stretch !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 12px !important;
}

.finalSheet{
  width: min(980px, calc(100vw - 24px)) !important;
  height: calc(100dvh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.finalWrap{
  flex: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

.finalCard{
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.finalCard::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.finalWrap > div:last-child{
  flex: 0 0 auto !important;
  padding: 8px 0 0 !important;
  margin: 0 !important;
  background: rgba(8,10,18,.72);
  border-radius: 18px;
}

.finalWrap > div:last-child button{
  min-height: 44px !important;
  padding: 10px 14px !important;
}

/* Écran moins haut : on compacte un peu */
@media (max-height: 820px){
  .finalOverlay{
    padding: 8px !important;
  }

  .finalSheet{
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }

  .finalWrap{
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .finalChampionHero{
    padding: 16px 14px !important;
    margin-bottom: 10px !important;
  }

  .finalChampionCup{
    font-size: 46px !important;
    margin-bottom: 6px !important;
  }

  .finalChampionTeam{
    font-size: clamp(28px, 4.5vw, 46px) !important;
  }

  .finalChampionScores{
    margin-top: 12px !important;
  }

  .finalChampionPodium{
    margin-top: 12px !important;
  }

  .scoreTable td{
    padding: 10px 10px !important;
  }
}

/* Mobile : boutons en colonne, toujours visibles */
@media (max-width: 600px){
  .finalOverlay{
    padding: 8px !important;
  }

  .finalSheet{
    width: calc(100vw - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 20px !important;
  }

  .finalWrap > div:last-child{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .finalWrap > div:last-child button{
    width: 100% !important;
  }
}

/* =========================================================
   ALIGNEMENT FOND PAGE MOT À DEVINER AVEC LA DÉMO
   ========================================================= */

.turnOverlay{
  background:
    radial-gradient(900px 650px at 18% 10%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 650px at 85% 18%, rgba(0,212,255,.18), transparent 60%),
    rgba(8,10,18,.94) !important;
}

.turnSheet,
.turnSheet.roundPlaying1,
.turnSheet.roundPlaying2,
.turnSheet.roundPlaying3,
.turnSheet.roundPlaying4{
  background: rgba(255,255,255,.065) !important;
}

.turnSheet::before{
  display:none !important;
}
/* CORRECTION PREMIUM : éviter le doublon "Manche" */
#fsRoundOnly{
  display:none !important;
}

/* CORRECTION PREMIUM : boutons Trouvé / Passer plus lisibles comme la démo */
.turnBottom button{
  min-height:70px !important;
  font-size:clamp(18px, 2.5vw, 23px) !important;
  font-weight:1000 !important;
  line-height:1.15 !important;
  border-radius:22px !important;
}

.turnBottom button span{
  font-size:13px !important;
  font-weight:1000 !important;
}

@media (max-width:600px){
  .turnBottom button{
    min-height:62px !important;
    font-size:18px !important;
    border-radius:18px !important;
  }

  .turnBottom button span{
    font-size:12px !important;
  }
}
/* CORRECTION PREMIUM : infos Règle / Mots restants / Pass plus visibles comme la démo */
.turnInfoLine{
  padding:8px !important;
  gap:8px !important;
}

.turnInfoPill{
  font-size:13px !important;
  padding:7px 12px !important;
  line-height:1.15 !important;
  font-weight:1000 !important;
  border-radius:999px !important;
}

@media (max-width:600px){
  .turnInfoLine{
    padding:6px !important;
    gap:6px !important;
  }

  .turnInfoPill{
    font-size:12px !important;
    padding:6px 10px !important;
    font-weight:1000 !important;
  }
}
.demoLocked{
  opacity: .42 !important;
  cursor: not-allowed !important;
  filter: grayscale(.45);
}

.demoLocked:hover{
  transform: none !important;
}
.startRequirementMessage{
  display:none;
  margin-top:8px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,209,102,.14);
  border:1px solid rgba(255,209,102,.35);
  color:#ffd166;
  font-size:13px;
  font-weight:900;
  line-height:1.35;
}

.startRequirementMessage.show{
  display:block;
}
.requiredStar{
  color:#ffd166;
  font-weight:1100;
}

.isStartDisabled{
  opacity:.48;
  filter:grayscale(.25);
  cursor:not-allowed;
}

.inputNeedAttention{
  outline:3px solid rgba(255,209,102,.95) !important;
  box-shadow:0 0 0 6px rgba(255,209,102,.22), 0 0 26px rgba(255,209,102,.45) !important;
  animation:inputNeedAttentionPulse .55s ease-in-out 2;
}

@keyframes inputNeedAttentionPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.025); }
  100%{ transform:scale(1); }
}
/* =========================================================
   BOUTONS ÉCRAN FINAL COMPACTS SUR MOBILE
   À placer tout en bas du CSS
   ========================================================= */

.finalActions{
  display:flex !important;
  gap:8px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  padding:8px 0 0 !important;
  margin:0 !important;
  background:rgba(8,10,18,.72);
  border-radius:18px;
}

.finalActions button{
  width:auto !important;
  min-height:42px !important;
  padding:9px 13px !important;
  border-radius:14px !important;
  font-size:14px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}

@media (max-width: 600px){
  .finalActions{
    position:sticky !important;
    bottom:0 !important;
    z-index:20 !important;
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:6px !important;
    padding:8px 6px max(8px, env(safe-area-inset-bottom)) !important;
    margin:0 -4px -4px !important;
    background:linear-gradient(
      180deg,
      rgba(8,10,18,0),
      rgba(8,10,18,.96) 35%,
      rgba(8,10,18,.98)
    ) !important;
    backdrop-filter:blur(10px);
    border-radius:16px;
  }

  .finalActions button{
    width:100% !important;
    min-height:38px !important;
    padding:7px 4px !important;
    border-radius:12px !important;
    font-size:12px !important;
    line-height:1.1 !important;
    font-weight:900 !important;
    white-space:nowrap;
  }
}
/* =========================================================
   PATCH FINAL - Forcer les 3 boutons résultats sur une ligne
   À placer tout tout en bas du CSS
   ========================================================= */

@media (max-width: 600px){

  .finalWrap > div.finalActions:last-child{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column !important;
    gap:5px !important;
    padding:5px 4px max(5px, env(safe-area-inset-bottom)) !important;
    margin:0 !important;
    background:rgba(8,10,18,.88) !important;
    border-radius:12px !important;
  }

  .finalWrap > div.finalActions:last-child > button{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:32px !important;
    height:32px !important;
    padding:4px 3px !important;
    border-radius:10px !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}
/* Ordre boutons finaux mobile : Accueil | Score | Sauver */
@media (max-width: 600px){
  #btnFinalHome{
    order:1 !important;
  }

  #btnFinalScores{
    order:2 !important;
  }

  #btnExportScores{
    order:3 !important;
  }
}
/* Boutons finaux un peu plus gros en mobile portrait */
@media (max-width: 600px) and (orientation: portrait){
  .finalWrap > .finalActions > button{
    min-height:36px !important;
    padding:7px 5px !important;
    font-size:12.5px !important;
    line-height:1.05 !important;
    font-weight:1000 !important;
  }
}
/* Fenêtre de répartition aléatoire des équipes - version plus propre */
.randomTeamsStartBox{
  margin-top: 6px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(135deg, rgba(124,92,255,.20), rgba(0,212,255,.10)),
    rgba(255,255,255,.07);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.randomTeamsStartTitle{
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.1;
  font-weight: 1100;
  text-align: center;
  margin-bottom: 6px;
}

.randomTeamsStartSubtitle{
  text-align: center;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.revealTeamsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.revealTeamCard{
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,16,32,.72);
}

.revealTeamTitle{
  font-size: 17px;
  font-weight: 1100;
  margin-bottom: 8px;
  color: #fff;
}

.revealPlayerList{
  font-size: 15px;
  line-height: 1.45;
  font-weight: 750;
  color: rgba(255,255,255,.84);
}

/* Mobile et petits écrans */
@media (max-width: 640px){
  .randomTeamsStartBox{
    padding: 13px;
    border-radius: 20px;
  }

  .revealTeamsGrid{
    grid-template-columns: 1fr;
  }

  .randomTeamsStartTitle{
    font-size: 21px;
  }
}
.presetCustomLine{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.presetCustomBtn{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border-radius:999px;
  padding:11px 18px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

.presetCustomBtn:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}

.presetCustomBtn.active{
  border-color:rgba(124,92,255,.85);
  background:linear-gradient(135deg, rgba(124,92,255,.34), rgba(0,212,255,.18));
}
.hiddenDebugInfo{
  display:none !important;
}
@media (max-width: 900px) and (pointer: coarse){
  .presetTitle{
    font-size: 16px;
    line-height: 1.12;
  }

  .presetIcon{
    font-size: 22px;
  }

  .presetText{
    font-size: 13px;
    line-height: 1.22;
    font-weight: 500;
    opacity: .86;
  }

  .presetMeta{
    font-size: 12px;
    line-height: 1.25;
    font-weight: 600;
    opacity: .82;
  }
}
/* Titres des étapes de configuration plus visibles */
.setupStepTitle{
  display: inline-block;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.15;
  font-weight: 1100;
  color: #fff;
  letter-spacing: -0.02em;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(0,212,255,.16));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

@media (max-width: 900px) and (pointer: coarse){
  .setupStepTitle{
    font-size: 18px;
    line-height: 1.18;
    padding: 7px 10px;
  }
}
/* Chevron thèmes / difficultés plus discret et harmonisé */
#themeChevron,
#diffChevron{
  width:34px;
  height:34px;
  min-width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:22px;
  font-weight:1100;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(0,0,0,.18);
}
/* Menus déroulants plus visibles, mais plus discrets */
select{
  min-height:46px !important;
  padding:11px 42px 11px 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.20) !important;
  background-color:rgba(0,0,0,.22) !important;
  color:#fff !important;
  font-weight:900 !important;
  cursor:pointer !important;

  appearance:none !important;
  -webkit-appearance:none !important;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.92) 50%),
    linear-gradient(135deg, rgba(255,255,255,.92) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 22px) 20px,
    calc(100% - 15px) 20px !important;
  background-size:
    7px 7px,
    7px 7px !important;
  background-repeat:no-repeat !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.18) !important;
}

select:focus{
  border-color:rgba(124,92,255,.65) !important;
  box-shadow:
    0 0 0 3px rgba(124,92,255,.18),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.18) !important;
}

select option{
  background:#11172b;
  color:#fff;
}
/* Bloc mots personnalisés fermé par défaut */
.customWordsHeader{
  cursor:pointer;
  align-items:center;
  margin-bottom:0;
}

.customWordsBody{
  display:none;
  margin-top:12px;
}

#customWordsStep.customWordsOpen .customWordsBody{
  display:block;
}

.customWordsChevron{
  width:34px;
  height:34px;
  min-width:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:22px;
  font-weight:1100;
  box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}


/* Correction bloc "Ajoutez vos propres mots" : titre + chevron sur la même ligne */
#customWordsHeader{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-bottom:0 !important;
}

#customWordsHeader > div:first-child{
  flex:1 1 auto !important;
  min-width:0 !important;
}

#customWordsChevron{
  flex:0 0 34px !important;
}
#modalOk.isTemporarilyDisabled,
#modalOk:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  filter: grayscale(.15);
}
/* =========================================================
   HOME MOBILE STYLE - CHRONO PARTY
   Écran d'accueil type jeu mobile
   ========================================================= */

#homeScreen {
  padding: 0;
  overflow: hidden;
}

.mobileHomeScreen {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(135deg, rgba(124,92,255,.18), transparent 30%),
    linear-gradient(225deg, rgba(0,212,255,.16), transparent 32%),
    linear-gradient(45deg, rgba(255,209,102,.30), transparent 36%),
    linear-gradient(160deg, #ffffff 0%, #f4f2ea 100%);
  color: #111;
}

.mobileHomeScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(30deg, transparent 0 18%, rgba(124,92,255,.08) 18% 28%, transparent 28% 100%),
    linear-gradient(140deg, transparent 0 28%, rgba(0,212,255,.10) 28% 42%, transparent 42% 100%),
    linear-gradient(210deg, transparent 0 48%, rgba(255,209,102,.16) 48% 64%, transparent 64% 100%);
  pointer-events: none;
}

.mobileHomeTop {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 26px 24px 0;
}

.mobileLangBtn {
  border: 0;
  background: transparent;
  color: #111;
  font-weight: 1000;
  font-size: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.mobileFlag {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  background: rgba(255,255,255,.70);
  border: 4px solid #111;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
}

.mobileProfileBtn {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  border: 4px solid #111;
  background: #dfeaff;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 8px 0 rgba(0,0,0,.08);
}

.mobileHomeCenter {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 22px 110px;
  text-align: center;
}

.mobileHomeLogo {
  width: min(82vw, 430px);
  max-height: 260px;
  object-fit: contain;
  filter: drop-shadow(0 16px 0 rgba(0,0,0,.08));
  transform: rotate(-4deg);
}

.mobileFallbackTitle {
  margin: 0;
  font-size: clamp(4.2rem, 17vw, 7.5rem);
  line-height: .78;
  font-weight: 1000;
  letter-spacing: -5px;
  transform: rotate(-4deg);
  text-shadow: 0 10px 0 rgba(0,0,0,.08);
}

.mobileFallbackTitle span {
  color: #7c5cff;
}

.mobileHomeCatch {
  max-width: 340px;
  font-size: 1.05rem;
  font-weight: 1000;
  color: rgba(0,0,0,.72);
  line-height: 1.35;
}

.mobilePlayBtn {
  width: 158px;
  height: 158px;
  border-radius: 34px;
  border: 5px solid #111;
  background: rgba(255,255,255,.82);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 16px 0 rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease;
}

.mobilePlayBtn span {
  font-size: 5rem;
  line-height: 1;
  margin-left: 10px;
}

.mobilePlayBtn:active {
  transform: translateY(8px);
  box-shadow: 0 7px 0 rgba(0,0,0,.10);
}

.mobileConfigBtn {
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  background: linear-gradient(135deg, #7c5cff, #00d4ff);
  color: #fff;
  font-weight: 1000;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(124,92,255,.28);
}

.mobileDecor {
  position: absolute;
  z-index: 2;
  font-size: 2.5rem;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.14));
  opacity: .95;
  pointer-events: none;
}

.mobileDecor1 {
  top: 24%;
  left: 12%;
  transform: rotate(-18deg);
}

.mobileDecor2 {
  top: 26%;
  right: 12%;
  transform: rotate(16deg);
}

.mobileDecor3 {
  bottom: 33%;
  left: 12%;
  transform: rotate(10deg);
}

.mobileDecor4 {
  bottom: 31%;
  right: 13%;
  transform: rotate(-12deg);
}

.mobileHomeBottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  height: 92px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -10px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(14px);
}

.mobileNavBtn {
  border: 0;
  background: transparent;
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 1000;
}

.mobileNavBtn span {
  font-size: 1.7rem;
  line-height: 1;
}

.mobileNavBtn small {
  font-size: .66rem;
  font-weight: 1000;
}

.mobileHomeLegal {
  position: fixed;
  z-index: 21;
  left: 0;
  right: 0;
  bottom: 94px;
  display: flex;
  justify-content: center;
  gap: 7px;
  font-size: .66rem;
  font-weight: 800;
  opacity: .55;
}

.mobileHomeLegal a {
  color: #111;
  text-decoration: none;
}

@media (max-width: 420px) {
  .mobileHomeTop {
    padding: 20px 18px 0;
  }

  .mobileFlag,
  .mobileProfileBtn {
    width: 62px;
    height: 62px;
  }

  .mobileFlag {
    font-size: 2.2rem;
    border-radius: 20px;
  }

  .mobileLangBtn {
    font-size: 1.05rem;
  }

  .mobileHomeLogo {
    width: min(88vw, 360px);
    max-height: 210px;
  }

  .mobilePlayBtn {
    width: 138px;
    height: 138px;
    border-radius: 30px;
  }

  .mobilePlayBtn span {
    font-size: 4.3rem;
  }

  .mobileHomeBottom {
    height: 84px;
  }

  .mobileNavBtn span {
    font-size: 1.45rem;
  }

  .mobileNavBtn small {
    font-size: .58rem;
  }

  .mobileHomeLegal {
    bottom: 86px;
    font-size: .58rem;
  }

  .mobileDecor {
    font-size: 2rem;
  }
}
/* =========================================================
   PATCH ACCUEIL CHRONO PARTY - PLEIN ÉCRAN PROPRE
   À mettre tout en bas du CSS
   ========================================================= */

#homeScreen.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: block !important;
  z-index: 10 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

#homeScreen .mobileHomeScreen {
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

/* Évite les marges sombres de .app sur l'accueil */
body:has(#homeScreen.active) {
  padding: 0 !important;
  display: block !important;
  background: #f4f2ea !important;
}

body:has(#homeScreen.active) .app {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Bouton installation rond propre */
#btnInstallBadge.mobileProfileBtn {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  min-height: 68px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Logo et bouton mieux centrés */
.mobileHomeCenter {
  padding: 0 22px 118px !important;
  justify-content: center !important;
  gap: 16px !important;
}

.mobileHomeLogo {
  width: min(58vw, 360px) !important;
  max-height: 190px !important;
  transform: none !important;
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.16)) !important;
}

.mobileHomeCatch {
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  max-width: 520px !important;
}

.mobilePlayBtn {
  width: 150px !important;
  height: 150px !important;
  border-radius: 32px !important;
}

.mobileConfigBtn {
  margin-top: 2px !important;
}

/* Barre du bas plus propre */
.mobileHomeBottom {
  height: 86px !important;
}

.mobileNavBtn {
  box-shadow: none !important;
  border-radius: 0 !important;
}

.mobileNavBtn span {
  font-size: 1.65rem !important;
}

.mobileNavBtn small {
  color: #111 !important;
}

/* Mentions légales moins collées au bouton config */
.mobileHomeLegal {
  bottom: 88px !important;
}

/* Adaptation ordinateur très large */
@media (min-width: 900px) {
  .mobileHomeTop {
    padding: 24px clamp(28px, 5vw, 70px) 0 !important;
  }

  .mobileFlag {
    width: 70px !important;
    height: 70px !important;
    font-size: 2.1rem !important;
    border-radius: 20px !important;
  }

  .mobileLangBtn {
    font-size: 1.05rem !important;
  }

  #btnInstallBadge.mobileProfileBtn {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
  }

  .mobileDecor1 {
    top: 23% !important;
    left: 30% !important;
  }

  .mobileDecor2 {
    top: 24% !important;
    right: 30% !important;
  }

  .mobileDecor3 {
    bottom: 34% !important;
    left: 30% !important;
  }

  .mobileDecor4 {
    bottom: 34% !important;
    right: 30% !important;
  }
}

/* Adaptation mobile portrait */
@media (max-width: 600px) {
  .mobileHomeTop {
    padding: 18px 18px 0 !important;
  }

  .mobileFlag,
  #btnInstallBadge.mobileProfileBtn {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
  }

  .mobileFlag {
    font-size: 2rem !important;
  }

  .mobileHomeCenter {
    padding: 0 18px 108px !important;
    gap: 14px !important;
  }

  .mobileHomeLogo {
    width: min(82vw, 330px) !important;
    max-height: 180px !important;
  }

  .mobilePlayBtn {
    width: 138px !important;
    height: 138px !important;
  }

  .mobileHomeBottom {
    height: 82px !important;
  }

  .mobileHomeLegal {
    bottom: 84px !important;
    font-size: .56rem !important;
  }
}

/* Adaptation paysage bas, comme ta capture */
@media (orientation: landscape) and (max-height: 650px) {
  .mobileHomeTop {
    padding-top: 10px !important;
  }

  .mobileFlag,
  #btnInstallBadge.mobileProfileBtn {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-width: 3px !important;
  }

  .mobileFlag {
    font-size: 1.55rem !important;
  }

  .mobileLangBtn {
    font-size: .85rem !important;
    gap: 4px !important;
  }

  .mobileHomeCenter {
    gap: 8px !important;
    padding: 0 20px 86px !important;
  }

  .mobileHomeLogo {
    width: min(30vw, 250px) !important;
    max-height: 120px !important;
  }

  .mobileHomeCatch {
    font-size: .95rem !important;
  }

  .mobilePlayBtn {
    width: 116px !important;
    height: 116px !important;
    border-radius: 26px !important;
    border-width: 4px !important;
  }

  .mobilePlayBtn span {
    font-size: 3.4rem !important;
  }

  .mobileConfigBtn {
    padding: 11px 20px !important;
    font-size: .9rem !important;
  }

  .mobileHomeBottom {
    height: 68px !important;
  }

  .mobileNavBtn span {
    font-size: 1.35rem !important;
  }

  .mobileNavBtn small {
    font-size: .55rem !important;
  }

  .mobileHomeLegal {
    bottom: 70px !important;
    font-size: .52rem !important;
  }

  .mobileDecor {
    font-size: 1.5rem !important;
  }
}
/* =========================================================
   PATCH ACCUEIL FINAL - CHRONO PARTY
   Supprime FR, améliore Play, menu bas plus propre
   ========================================================= */

/* Enlève proprement l'ancien bouton FR si encore présent */
.mobileLangBtn,
.mobileFlag {
  display: none !important;
}

/* Top : uniquement le bouton installation à droite */
.mobileHomeTop {
  position: absolute !important;
  top: 18px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 24px !important;
  pointer-events: none !important;
}

.mobileProfileBtn {
  pointer-events: auto !important;
}

/* Bouton installation rond, sans texte qui déborde */
#btnInstallBadge.mobileProfileBtn {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 4px solid #111 !important;
  background: rgba(226, 238, 255, .92) !important;
  color: #111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.10) !important;
}

/* Centre mieux l'écran */
.mobileHomeCenter {
  padding: 0 22px 108px !important;
  justify-content: center !important;
  gap: 14px !important;
}

/* Logo un peu plus propre */
.mobileHomeLogo {
  width: min(46vw, 300px) !important;
  max-height: 145px !important;
  transform: none !important;
  filter: drop-shadow(0 12px 10px rgba(0,0,0,.18)) !important;
}

/* Phrase sous le logo */
.mobileHomeCatch {
  font-size: clamp(1rem, 1.35vw, 1.25rem) !important;
  max-width: 560px !important;
  color: rgba(0,0,0,.76) !important;
  font-weight: 1000 !important;
}

/* Nouveau bouton JOUER très visible */
.mobilePlayBtn {
  position: relative !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 38px !important;
  border: 5px solid #111 !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 38%),
    linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  box-shadow:
    0 14px 0 rgba(0,0,0,.16),
    0 22px 42px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}

.mobilePlayBtn::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  pointer-events: none !important;
}

.mobilePlayBtn .playTriangle {
  display: block !important;
  font-size: 4.6rem !important;
  line-height: .85 !important;
  margin-left: 10px !important;
  color: #fff !important;
  text-shadow:
    0 5px 0 rgba(0,0,0,.18),
    0 0 22px rgba(255,255,255,.35) !important;
}

.mobilePlayBtn .playLabel {
  display: block !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  font-weight: 1100 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.18) !important;
}

.mobilePlayBtn:active {
  transform: translateY(7px) !important;
  box-shadow:
    0 7px 0 rgba(0,0,0,.16),
    0 14px 30px rgba(0,0,0,.16) !important;
}

/* Bouton config plus compact */
.mobileConfigBtn {
  margin-top: 2px !important;
  padding: 12px 24px !important;
  border-radius: 999px !important;
  font-size: .98rem !important;
  box-shadow: 0 12px 28px rgba(124,92,255,.25) !important;
}

/* Liens légaux visibles mais discrets */
.mobileHomeLegal {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 72px !important;
  z-index: 22 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .62rem !important;
  font-weight: 900 !important;
  opacity: .65 !important;
  color: rgba(0,0,0,.78) !important;
  pointer-events: auto !important;
}

.mobileHomeLegal a {
  color: rgba(0,0,0,.78) !important;
  text-decoration: none !important;
}

.mobileHomeLegal a:hover {
  text-decoration: underline !important;
}

/* Menu bas plus fin et plus propre */
.mobileHomeBottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 21 !important;
  height: 70px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  background: rgba(255,255,255,.96) !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.08) !important;
  backdrop-filter: blur(14px) !important;
}

.mobileNavBtn {
  min-width: 0 !important;
  height: 70px !important;
  padding: 5px 2px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  gap: 3px !important;
}

.mobileNavBtn span {
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

.mobileNavBtn small {
  font-size: .56rem !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: #111 !important;
}

/* Décors mieux placés */
.mobileDecor {
  font-size: 1.75rem !important;
  opacity: .95 !important;
}

.mobileDecor1 {
  top: 24% !important;
  left: 30% !important;
}

.mobileDecor2 {
  top: 24% !important;
  right: 30% !important;
}

.mobileDecor3 {
  bottom: 34% !important;
  left: 30% !important;
}

.mobileDecor4 {
  bottom: 34% !important;
  right: 30% !important;
}

/* Paysage bas, comme ta capture */
@media (orientation: landscape) and (max-height: 650px) {
  .mobileHomeCenter {
    gap: 8px !important;
    padding: 0 20px 78px !important;
  }

  .mobileHomeLogo {
    width: min(28vw, 245px) !important;
    max-height: 110px !important;
  }

  .mobileHomeCatch {
    font-size: .92rem !important;
  }

  .mobilePlayBtn {
    width: 112px !important;
    height: 112px !important;
    border-radius: 28px !important;
    border-width: 4px !important;
  }

  .mobilePlayBtn::before {
    inset: 7px !important;
    border-radius: 22px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 3.2rem !important;
    margin-left: 7px !important;
  }

  .mobilePlayBtn .playLabel {
    font-size: .68rem !important;
  }

  .mobileConfigBtn {
    padding: 10px 22px !important;
    font-size: .88rem !important;
  }

  .mobileHomeBottom {
    height: 62px !important;
  }

  .mobileNavBtn {
    height: 62px !important;
  }

  .mobileNavBtn span {
    font-size: 1.22rem !important;
  }

  .mobileNavBtn small {
    font-size: .52rem !important;
  }

  .mobileHomeLegal {
    bottom: 64px !important;
    font-size: .52rem !important;
  }

  #btnInstallBadge.mobileProfileBtn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-width: 3px !important;
    font-size: 1.35rem !important;
  }

  .mobileHomeTop {
    top: 12px !important;
    padding: 0 18px !important;
  }
}

/* Mobile portrait */
@media (max-width: 600px) and (orientation: portrait) {
  .mobileHomeCenter {
    padding: 0 18px 102px !important;
    gap: 13px !important;
  }

  .mobileHomeLogo {
    width: min(82vw, 330px) !important;
    max-height: 170px !important;
  }

  .mobilePlayBtn {
    width: 138px !important;
    height: 138px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 4.2rem !important;
  }

  .mobileHomeBottom {
    height: 76px !important;
  }

  .mobileNavBtn {
    height: 76px !important;
  }

  .mobileHomeLegal {
    bottom: 78px !important;
    font-size: .56rem !important;
  }
}
/* =========================================================
   ACCUEIL CHRONO PARTY FINAL
   Desktop rempli + mobile propre + menu non coupé
   ========================================================= */

/* Plein écran accueil */
#homeScreen.active {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: block !important;
  overflow: hidden !important;
  padding: 0 !important;
  z-index: 10 !important;
}

body:has(#homeScreen.active) {
  padding: 0 !important;
  display: block !important;
  background: #f4f2ea !important;
  overflow: hidden !important;
}

body:has(#homeScreen.active) .app {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
}

/* Fond général */
.mobileHomeScreen {
  position: relative !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  color: #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background:
    linear-gradient(135deg, rgba(124,92,255,.16), transparent 28%),
    linear-gradient(225deg, rgba(0,212,255,.16), transparent 34%),
    linear-gradient(45deg, rgba(255,209,102,.24), transparent 38%),
    linear-gradient(160deg, #ffffff 0%, #f4f2ea 100%) !important;
}

.mobileHomeScreen::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(30deg, transparent 0 18%, rgba(124,92,255,.08) 18% 28%, transparent 28% 100%),
    linear-gradient(140deg, transparent 0 28%, rgba(0,212,255,.10) 28% 42%, transparent 42% 100%),
    linear-gradient(210deg, transparent 0 48%, rgba(255,209,102,.16) 48% 64%, transparent 64% 100%) !important;
  pointer-events: none !important;
}

/* Supprime l'ancien FR */
.mobileLangBtn,
.mobileFlag {
  display: none !important;
}

/* Bouton installation */
.mobileHomeTop {
  position: absolute !important;
  top: 22px !important;
  right: 28px !important;
  z-index: 40 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 0 !important;
}

#btnInstallBadge.mobileProfileBtn {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 4px solid #111 !important;
  background: rgba(236,244,255,.94) !important;
  color: #111 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  overflow: hidden !important;
  box-shadow:
    0 7px 0 rgba(0,0,0,.12),
    0 14px 26px rgba(0,0,0,.14) !important;
}

/* Carte centrale desktop */
.homeHeroCard {
  position: relative !important;
  z-index: 5 !important;
  width: min(920px, calc(100vw - 320px)) !important;
  min-height: 610px !important;
  border-radius: 34px !important;
  background: rgba(255,255,255,.44) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Centre */
.mobileHomeCenter {
  position: relative !important;
  z-index: 6 !important;
  width: 100% !important;
  padding: 28px 30px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  text-align: center !important;
}

.mobileHomeLogo {
  width: min(54vw, 390px) !important;
  max-height: 180px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: drop-shadow(0 14px 12px rgba(0,0,0,.20)) !important;
}

.mobileFallbackTitle {
  margin: 0 !important;
  font-size: clamp(4rem, 12vw, 7rem) !important;
  line-height: .78 !important;
  font-weight: 1000 !important;
  letter-spacing: -5px !important;
  transform: rotate(-4deg) !important;
  text-shadow: 0 10px 0 rgba(0,0,0,.08) !important;
}

.mobileFallbackTitle span {
  color: #7c5cff !important;
}

.mobileHomeCatch {
  max-width: 620px !important;
  font-size: clamp(1rem, 1.35vw, 1.25rem) !important;
  font-weight: 1000 !important;
  color: rgba(0,0,0,.74) !important;
  line-height: 1.35 !important;
}

/* Badges desktop */
.homeFeaturePills {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin: 2px 0 4px !important;
}

.homeFeaturePills span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 38px !important;
  padding: 9px 16px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  color: rgba(0,0,0,.76) !important;
  font-size: .88rem !important;
  font-weight: 1000 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.07) !important;
}

/* Bouton JOUER */
.mobilePlayBtn {
  position: relative !important;
  width: 170px !important;
  height: 170px !important;
  border-radius: 38px !important;
  border: 5px solid #111 !important;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), transparent 38%),
    linear-gradient(135deg, #7c5cff 0%, #00d4ff 100%) !important;
  color: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  box-shadow:
    0 15px 0 rgba(0,0,0,.18),
    0 24px 48px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
}

.mobilePlayBtn::before {
  content: "" !important;
  position: absolute !important;
  inset: 10px !important;
  border-radius: 30px !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  pointer-events: none !important;
}

.mobilePlayBtn .playTriangle {
  display: block !important;
  font-size: 5rem !important;
  line-height: .85 !important;
  margin-left: 10px !important;
  color: #fff !important;
  text-shadow:
    0 5px 0 rgba(0,0,0,.18),
    0 0 22px rgba(255,255,255,.35) !important;
}

.mobilePlayBtn .playLabel {
  display: block !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 1100 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.18) !important;
}

.mobilePlayBtn:active {
  transform: translateY(7px) !important;
  box-shadow:
    0 8px 0 rgba(0,0,0,.18),
    0 16px 32px rgba(0,0,0,.16) !important;
}

/* Bouton config */
.mobileConfigBtn {
  min-width: 330px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  background: linear-gradient(135deg, #7c5cff, #00d4ff) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  font-size: 1.05rem !important;
  cursor: pointer !important;
  box-shadow: 0 14px 30px rgba(124,92,255,.25) !important;
}

/* Décors */
.mobileDecor {
  position: absolute !important;
  z-index: 3 !important;
  font-size: 2.3rem !important;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,.14)) !important;
  opacity: .95 !important;
  pointer-events: none !important;
}

.mobileDecor1 {
  top: 23% !important;
  left: 18% !important;
  transform: rotate(-18deg) !important;
}

.mobileDecor2 {
  top: 24% !important;
  right: 20% !important;
  transform: rotate(16deg) !important;
}

.mobileDecor3 {
  bottom: 33% !important;
  left: 18% !important;
  transform: rotate(10deg) !important;
}

.mobileDecor4 {
  bottom: 33% !important;
  right: 20% !important;
  transform: rotate(-12deg) !important;
}

/* Liens légaux */
.mobileHomeLegal {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  z-index: 35 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  opacity: .72 !important;
  color: rgba(0,0,0,.78) !important;
  pointer-events: auto !important;
}

.mobileHomeLegal a {
  color: rgba(0,0,0,.78) !important;
  text-decoration: none !important;
}

.mobileHomeLegal a:hover {
  text-decoration: underline !important;
}

/* Menu bas */
.mobileHomeBottom {
  position: fixed !important;
  left: max(22px, env(safe-area-inset-left)) !important;
  right: max(22px, env(safe-area-inset-right)) !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 30 !important;
  height: 78px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 24px !important;
  box-shadow: 0 -6px 28px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(14px) !important;
  overflow: visible !important;
}

.mobileNavBtn {
  min-width: 0 !important;
  width: 100% !important;
  height: 78px !important;
  padding: 7px 2px 8px !important;
  border-radius: 20px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  gap: 5px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.mobileNavBtn span {
  display: block !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
  height: 24px !important;
}

.mobileNavBtn small {
  display: block !important;
  font-size: .62rem !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* Desktop très large */
@media (min-width: 1200px) {
  .homeHeroCard {
    width: min(920px, 56vw) !important;
  }
}

/* Ordinateur plus petit / tablette paysage */
@media (max-width: 1100px) {
  .homeHeroCard {
    width: min(760px, calc(100vw - 60px)) !important;
    min-height: 560px !important;
  }

  .mobileDecor1 {
    left: 10% !important;
  }

  .mobileDecor2 {
    right: 10% !important;
  }

  .mobileDecor3 {
    left: 10% !important;
  }

  .mobileDecor4 {
    right: 10% !important;
  }
}

/* Mobile portrait */
@media (max-width: 700px) and (orientation: portrait) {
  .mobileHomeScreen {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .homeHeroCard {
    width: 100vw !important;
    min-height: auto !important;
    flex: 1 1 auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .mobileHomeCenter {
    height: calc(100dvh - 128px - env(safe-area-inset-bottom)) !important;
    padding: 42px 20px 12px !important;
    justify-content: center !important;
    gap: 14px !important;
  }

  .mobileHomeLogo {
    width: min(78vw, 360px) !important;
    max-height: 170px !important;
  }

  .mobileHomeCatch {
    font-size: 1rem !important;
    max-width: 360px !important;
  }

  .homeFeaturePills {
    display: none !important;
  }

  .mobilePlayBtn {
    width: 142px !important;
    height: 142px !important;
    border-radius: 34px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 4.25rem !important;
  }

  .mobilePlayBtn .playLabel {
    font-size: .88rem !important;
  }

  .mobileConfigBtn {
    min-width: 0 !important;
    width: min(330px, 82vw) !important;
    padding: 13px 18px !important;
    font-size: .96rem !important;
  }

  #btnInstallBadge.mobileProfileBtn {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 1.35rem !important;
    border-width: 3px !important;
  }

  .mobileHomeTop {
    top: 18px !important;
    right: 18px !important;
  }

  .mobileDecor {
    font-size: 1.65rem !important;
  }

  .mobileDecor1 {
    top: 15% !important;
    left: 8% !important;
  }

  .mobileDecor2 {
    top: 25% !important;
    right: 7% !important;
  }

  .mobileDecor3 {
    bottom: 36% !important;
    left: 9% !important;
  }

  .mobileDecor4 {
    bottom: 36% !important;
    right: 9% !important;
  }

  .mobileHomeBottom {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    height: 86px !important;
    border-radius: 22px !important;
  }

  .mobileNavBtn {
    height: 86px !important;
    padding: 8px 2px 10px !important;
    gap: 6px !important;
  }

  .mobileNavBtn span {
    font-size: 1.6rem !important;
    height: 28px !important;
  }

  .mobileNavBtn small {
    font-size: .66rem !important;
  }

  .mobileHomeLegal {
    bottom: calc(100px + env(safe-area-inset-bottom)) !important;
    font-size: .62rem !important;
  }
}

/* Mobile petit écran */
@media (max-width: 380px) and (orientation: portrait) {
  .mobileHomeCenter {
    gap: 11px !important;
    padding-top: 34px !important;
  }

  .mobileHomeLogo {
    width: min(74vw, 300px) !important;
    max-height: 145px !important;
  }

  .mobilePlayBtn {
    width: 128px !important;
    height: 128px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 3.85rem !important;
  }

  .mobileNavBtn small {
    font-size: .6rem !important;
  }
}

/* Paysage bas : compact */
@media (orientation: landscape) and (max-height: 650px) {
  .homeHeroCard {
    width: min(720px, 58vw) !important;
    min-height: 430px !important;
    border-radius: 28px !important;
  }

  .mobileHomeCenter {
    gap: 8px !important;
    padding: 14px 22px !important;
  }

  .mobileHomeLogo {
    width: min(28vw, 250px) !important;
    max-height: 110px !important;
  }

  .mobileHomeCatch {
    font-size: .92rem !important;
  }

  .homeFeaturePills {
    gap: 8px !important;
    margin: 0 !important;
  }

  .homeFeaturePills span {
    min-height: 30px !important;
    padding: 6px 12px !important;
    font-size: .72rem !important;
  }

  .mobilePlayBtn {
    width: 112px !important;
    height: 112px !important;
    border-radius: 28px !important;
    border-width: 4px !important;
  }

  .mobilePlayBtn::before {
    inset: 7px !important;
    border-radius: 22px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 3.2rem !important;
    margin-left: 7px !important;
  }

  .mobilePlayBtn .playLabel {
    font-size: .68rem !important;
  }

  .mobileConfigBtn {
    min-width: 260px !important;
    padding: 10px 20px !important;
    font-size: .88rem !important;
  }

  .mobileHomeBottom {
    height: 68px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .mobileNavBtn {
    height: 68px !important;
    padding: 5px 2px 7px !important;
    gap: 4px !important;
  }

  .mobileNavBtn span {
    font-size: 1.3rem !important;
    height: 22px !important;
  }

  .mobileNavBtn small {
    font-size: .54rem !important;
  }

  .mobileHomeLegal {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    font-size: .52rem !important;
  }

  #btnInstallBadge.mobileProfileBtn {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    border-width: 3px !important;
    font-size: 1.25rem !important;
  }

  .mobileHomeTop {
    top: 12px !important;
    right: 18px !important;
  }

  .mobileDecor {
    font-size: 1.45rem !important;
  }
}
/* =========================================================
   PATCH ACCUEIL - REMONTER BLOC + LOGO PLUS GRAND
   À placer tout en bas du CSS
   ========================================================= */

/* Ordinateur : bloc plus haut et logo plus grand */
@media (min-width: 701px) {
  .mobileHomeScreen {
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: clamp(55px, 7vh, 90px) !important;
  }

  .homeHeroCard {
    transform: translateY(-28px) !important;
    min-height: 650px !important;
  }

  .mobileHomeLogo {
    width: min(64vw, 500px) !important;
    max-height: 230px !important;
  }

  .mobileHomeCenter {
    gap: 18px !important;
  }

  .mobileHomeCatch {
    font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
  }

  .homeFeaturePills span {
    font-size: .94rem !important;
    padding: 10px 18px !important;
  }
}

/* Très grand écran : garde le bloc bien haut et bien rempli */
@media (min-width: 1200px) {
  .homeHeroCard {
    width: min(980px, 58vw) !important;
    min-height: 660px !important;
  }

  .mobileHomeLogo {
    width: min(54vw, 520px) !important;
    max-height: 240px !important;
  }
}

/* Mobile : logo plus grand */
@media (max-width: 700px) and (orientation: portrait) {
  .mobileHomeLogo {
    width: min(88vw, 410px) !important;
    max-height: 220px !important;
  }

  .mobileHomeCenter {
    height: calc(100dvh - 128px - env(safe-area-inset-bottom)) !important;
    padding: 34px 18px 12px !important;
    gap: 14px !important;
  }

  .mobileHomeCatch {
    font-size: 1.02rem !important;
  }

  .mobilePlayBtn {
    width: 148px !important;
    height: 148px !important;
  }

  .mobileConfigBtn {
    width: min(340px, 86vw) !important;
  }

  .mobileHomeLegal {
    bottom: calc(99px + env(safe-area-inset-bottom)) !important;
    font-size: .58rem !important;
    gap: 5px !important;
    padding: 0 8px !important;
    flex-wrap: wrap !important;
  }
}

/* Petit mobile : évite que tout soit trop serré */
@media (max-width: 380px) and (orientation: portrait) {
  .mobileHomeLogo {
    width: min(86vw, 350px) !important;
    max-height: 185px !important;
  }

  .mobilePlayBtn {
    width: 132px !important;
    height: 132px !important;
  }

  .mobileHomeCatch {
    font-size: .95rem !important;
  }

  .mobileHomeLegal {
    font-size: .52rem !important;
  }
}

/* Paysage ordinateur ou écran bas : remonte sans écraser */
@media (orientation: landscape) and (max-height: 650px) {
  .mobileHomeScreen {
    padding-top: 34px !important;
  }

  .homeHeroCard {
    transform: translateY(-18px) !important;
    min-height: 450px !important;
  }

  .mobileHomeLogo {
    width: min(32vw, 330px) !important;
    max-height: 145px !important;
  }
}

/* Liens légaux un peu plus lisibles */
.mobileHomeLegal a,
.mobileHomeLegal span {
  color: rgba(0,0,0,.78) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}
/* =========================================================
   PATCH ACCUEIL FINAL BIS
   Desktop moins haut + mobile sans chevauchement
   À placer tout en bas du CSS
   ========================================================= */

/* DESKTOP : on redescend le bloc central */
@media (min-width: 701px) {
  .mobileHomeScreen {
    justify-content: flex-start !important;
    padding-top: clamp(70px, 9vh, 115px) !important;
  }

  .homeHeroCard {
    transform: translateY(0) !important;
    min-height: 610px !important;
  }

  .mobileHomeLogo {
    width: min(48vw, 460px) !important;
    max-height: 215px !important;
  }
}

/* GRAND ÉCRAN : bloc équilibré, pas collé en haut */
@media (min-width: 1200px) {
  .mobileHomeScreen {
    padding-top: clamp(75px, 8vh, 105px) !important;
  }

  .homeHeroCard {
    width: min(980px, 58vw) !important;
    min-height: 600px !important;
  }

  .mobileHomeLogo {
    width: min(48vw, 500px) !important;
    max-height: 225px !important;
  }
}

/* MOBILE : on empêche le bouton config d'être caché */
@media (max-width: 700px) and (orientation: portrait) {
  .mobileHomeCenter {
    height: auto !important;
    min-height: calc(100dvh - 190px - env(safe-area-inset-bottom)) !important;
    padding: 28px 18px 150px !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .mobileHomeLogo {
    width: min(78vw, 340px) !important;
    max-height: 170px !important;
  }

  .mobileHomeCatch {
    font-size: .96rem !important;
    line-height: 1.25 !important;
    margin-top: -2px !important;
  }

  .mobilePlayBtn {
    width: 132px !important;
    height: 132px !important;
    border-radius: 32px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 3.9rem !important;
  }

  .mobilePlayBtn .playLabel {
    font-size: .82rem !important;
  }

  .mobileConfigBtn {
    width: min(320px, 84vw) !important;
    padding: 12px 16px !important;
    font-size: .92rem !important;
    margin-top: 0 !important;
    position: relative !important;
    z-index: 36 !important;
  }

  .mobileHomeLegal {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    font-size: .52rem !important;
    line-height: 1.1 !important;
    gap: 4px !important;
    padding: 0 10px !important;
    flex-wrap: wrap !important;
    z-index: 37 !important;
    opacity: .72 !important;
  }

  .mobileHomeBottom {
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    height: 76px !important;
    border-radius: 20px !important;
    z-index: 35 !important;
  }

  .mobileNavBtn {
    height: 76px !important;
    padding: 7px 2px 8px !important;
    gap: 4px !important;
  }

  .mobileNavBtn span {
    font-size: 1.42rem !important;
    height: 24px !important;
  }

  .mobileNavBtn small {
    font-size: .6rem !important;
    line-height: 1.05 !important;
  }

  #btnInstallBadge.mobileProfileBtn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    font-size: 1.25rem !important;
  }

  .mobileHomeTop {
    top: 16px !important;
    right: 16px !important;
  }
}

/* PETIT MOBILE : encore plus compact */
@media (max-width: 380px) and (orientation: portrait) {
  .mobileHomeCenter {
    padding: 24px 16px 145px !important;
    gap: 10px !important;
  }

  .mobileHomeLogo {
    width: min(76vw, 300px) !important;
    max-height: 145px !important;
  }

  .mobileHomeCatch {
    font-size: .88rem !important;
  }

  .mobilePlayBtn {
    width: 120px !important;
    height: 120px !important;
  }

  .mobilePlayBtn .playTriangle {
    font-size: 3.45rem !important;
  }

  .mobilePlayBtn .playLabel {
    font-size: .74rem !important;
  }

  .mobileConfigBtn {
    width: min(300px, 84vw) !important;
    padding: 11px 14px !important;
    font-size: .86rem !important;
  }

  .mobileHomeLegal {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    font-size: .48rem !important;
  }

  .mobileHomeBottom {
    height: 72px !important;
  }

  .mobileNavBtn {
    height: 72px !important;
  }

  .mobileNavBtn span {
    font-size: 1.3rem !important;
  }

  .mobileNavBtn small {
    font-size: .55rem !important;
  }
}

/* Safari iPhone avec barre d'adresse : un peu plus de sécurité */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 700px) and (orientation: portrait) {
    .mobileHomeCenter {
      padding-bottom: 155px !important;
    }

    .mobileHomeLegal {
      bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    }
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .mobileConfigBtn {
    margin-top: 70px !important;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .mobilePlayBtn {
    margin-top: 20px !important;
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .mobileDecor {
    font-size: 2.25rem !important;
  }
}

/* Historique des scores */
.scoreHistoryBox{
  display:grid;
  gap:14px;
}

.scoreHistoryIntro{
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,.78);
  font-weight:800;
}

.scoreHistoryItem{
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(420px 200px at 20% 25%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(420px 200px at 80% 40%, rgba(0,212,255,.12), transparent 60%),
    rgba(255,255,255,.05);
}

.scoreHistoryTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.scoreHistoryDate{
  font-size:14px;
  font-weight:1000;
  color:#fff;
}

.scoreHistoryContent{
  max-height:360px;
  overflow:auto;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,.14);
}

@media (max-width:600px){
  .scoreHistoryTop{
    flex-direction:column;
    align-items:flex-start;
  }

  .scoreHistoryTop button{
    width:100%;
  }

  .scoreHistoryContent{
    max-height:420px;
  }
}
/* =========================================================
   PATCH IPHONE PAYSAGE - AUTORISER LE SCROLL ACCUEIL
   À placer tout en bas du CSS
   ========================================================= */

@media (max-width: 940px) and (orientation: landscape) and (max-height: 650px){

  body:has(#homeScreen.active){
    overflow-y: auto !important;
    height: auto !important;
  }

  #homeScreen.active{
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #homeScreen .mobileHomeScreen{
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding-bottom: 90px !important;
  }

  .homeHeroCard{
    min-height: auto !important;
    margin-top: 60px !important;
    margin-bottom: 95px !important;
  }

  .mobileHomeCenter{
    padding-bottom: 18px !important;
  }
}
.homeFade1,
.homeFade2,
.homeFade3,
.homeFade4{
  opacity:0;
  transform:translateY(18px) scale(.98);
  animation:homeIntro .75s ease forwards;
}

.homeFade1{ animation-delay:.08s; }
.homeFade2{ animation-delay:.24s; }
.homeFade3{ animation-delay:.40s; }
.homeFade4{ animation-delay:.62s; }

@keyframes homeIntro{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.homeLogoGlow{
  animation:
    homeIntro .75s ease forwards,
    logoGlow 3.2s ease-in-out infinite;
}

@keyframes logoGlow{
  0%,100%{
    filter:drop-shadow(0 0 10px rgba(124,92,255,.35));
  }
  50%{
    filter:drop-shadow(0 0 22px rgba(0,212,255,.55));
  }
}

.homePulse{
  animation:homePulse 2.8s ease-in-out infinite;
}

@keyframes homePulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 18px 45px rgba(124,92,255,.35);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 24px 65px rgba(0,212,255,.45);
  }
}
.mobileDecor{
  animation:homeDecorFloat 4s ease-in-out infinite;
}

.mobileDecor{
  animation:homeDecorFloat 4s ease-in-out infinite;
  will-change: transform;
}

.mobileDecor1{ animation-delay:0s; }
.mobileDecor2{ animation-delay:.4s; }
.mobileDecor3{ animation-delay:.8s; }
.mobileDecor4{ animation-delay:1.2s; }

@keyframes homeDecorFloat{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -14px;
  }
}
.mobileProfileBtn{
  animation:installBadgeWiggle 3.2s ease-in-out infinite;
  transform-origin:center;
}

@keyframes installBadgeWiggle{
  0%,100%{
    transform:rotate(0deg) scale(1);
  }
  8%{
    transform:rotate(-8deg) scale(1.06);
  }
  16%{
    transform:rotate(8deg) scale(1.06);
  }
  24%{
    transform:rotate(-5deg) scale(1.04);
  }
  32%{
    transform:rotate(5deg) scale(1.04);
  }
  40%{
    transform:rotate(0deg) scale(1);
  }
}.mobileProfileBtn{
  animation:installBadgeWiggle 3.2s ease-in-out infinite;
  transform-origin:center;
}

body.appInstalled .mobileProfileBtn{
  animation:none !important;
}
/* Statistiques Chrono Party */
.statsGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.statCard{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 10px;
  text-align:center;
  font-size:13px;
  line-height:1.35;
}

.statCard b{
  display:inline-block;
  margin:4px 0;
  font-size:18px;
  color:#ffd166;
}

.statLine{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 14px;
  margin-top:10px;
  font-size:14px;
  line-height:1.4;
}

.statLine b{
  display:block;
  margin-top:6px;
  color:#ffd166;
  font-size:16px;
  font-weight:1000;
}

@media (max-width: 420px){
  .statCard{
    padding:10px 8px;
    font-size:12px;
  }

  .statCard b{
    font-size:16px;
  }

  .statLine{
    font-size:13px;
  }
}

@media (max-width: 360px){
  .statsGrid{
    grid-template-columns:1fr;
  }
}
/* Lisibilité fenêtre Statistiques uniquement */
.statCard{
  padding:18px 14px;
  min-height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.statCard b{
  margin:6px 0;
  line-height:1.25;
}

.statLine{
  padding:18px 16px;
  margin-top:14px;
  line-height:1.6;
}

.statLine b{
  margin-top:10px;
  line-height:1.5;
}

.statsGrid{
  gap:14px;
}
.statResult{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,209,102,.14);
  border:1px solid rgba(255,209,102,.28);
  color:#fff;
  font-weight:1000;
}

.statResult strong{
  color:#ffd166;
}
.statLine{
  font-size:18px;
  font-weight:900;
}

.statLine b{
  font-size:17px;
  font-weight:1000;
}
.statResult{
  margin-top:6px;
  padding:4px 8px;
  font-size:15px;
  line-height:1.2;
  border-radius:999px;
}

.statResult strong{
  font-size:13px;
}
.statIcon{
  font-size:29px;
}

.statCard b{
  font-size:16px;
}

.statCard span{
  font-size:15px;
  font-weight:800;
}
.statCard{
  min-height:115px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  text-align:center;
}

.statCard .statIcon{
  font-size:28px;
  line-height:1;
}

.statCard b{
  font-size:18px;
  line-height:1.2;
  max-width:100%;
  overflow-wrap:anywhere;
}

.statCard span{
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  opacity:.82;
}
/* PATCH SCROLL ACCUEIL ORDINATEUR PORTABLE */
@media (min-width: 701px) and (max-height: 760px) {
  body:has(#homeScreen.active) {
    overflow-y: auto !important;
  }

  #homeScreen.active {
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
  }

  #homeScreen .mobileHomeScreen {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-y: auto !important;
    padding-bottom: 130px !important;
  }

  .homeHeroCard {
    min-height: auto !important;
    margin: 80px auto 130px !important;
  }
}
/* PATCH PICTOS ACCUEIL ORDINATEUR PORTABLE */
@media (min-width: 701px) and (max-height: 760px) {
  .mobileDecor {
    font-size: 1.65rem !important;
    opacity: .55 !important;
    z-index: 1 !important;
  }

  .mobileDecor1 {
    top: 14% !important;
    left: 8% !important;
  }

  .mobileDecor2 {
    top: 14% !important;
    right: 8% !important;
  }

  .mobileDecor3 {
    bottom: 18% !important;
    left: 8% !important;
  }

  .mobileDecor4 {
    bottom: 18% !important;
    right: 8% !important;
  }

  .homeHeroCard {
    z-index: 5 !important;
  }
}
/* PICTOS ACCUEIL : taille adaptée selon écran */
@media (max-width: 700px) and (orientation: portrait) {
  .mobileDecor {
    font-size: 2.2rem !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .mobileDecor {
    font-size: 2.4rem !important;
    opacity: .65 !important;
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  .mobileDecor {
    font-size: 2.3rem !important;
    opacity: .6 !important;
    z-index: 1 !important;
  }
}
/* Bouton Maître adaptatif
   Permet d’activer ou désactiver l’aide automatique.
   Quand il est activé, le jeu ajuste légèrement le rythme selon les performances des équipes.
*/
/* Carte IA adaptative */
.adaptiveAiCard{
  grid-column:1 / -1;
  width:100%;
  margin-top:18px;
  padding:16px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(0,212,255,.10));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}

.adaptiveAiText{
  flex:1;
  min-width:0;
}

.adaptiveAiBadge{
  display:inline-flex;
  margin-bottom:6px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:rgba(255,255,255,.14);
  color:#fff;
}

.adaptiveMasterTitle{
  font-weight:900;
  font-size:15px;
}

.adaptiveMasterHint{
  margin-top:4px;
  font-size:13px;
  opacity:.72;
  line-height:1.4;
}

.adaptiveSwitch{
  width:58px;
  height:32px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  position:relative;
  cursor:pointer;
  transition:.25s;
  flex-shrink:0;
}

.adaptiveSwitch.active{
  background:linear-gradient(135deg,#7c5cff,#00d4ff);
  box-shadow:0 0 20px rgba(124,92,255,.45);
}

.adaptiveSwitchDot{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  position:absolute;
  top:4px;
  left:4px;
  transition:.25s;
}

.adaptiveSwitch.active .adaptiveSwitchDot{
  left:30px;
}
/* Blocs pleine largeur après IA adaptative */
.adaptiveAiCard,
#customWordsStep,
.advancedBox,
.setupSummary,
.startBar{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
}

/* Barre de démarrage pleine largeur */
.startBar{
  display:flex !important;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

@media (max-width:700px){
  .startBar{
    flex-direction:column;
    align-items:stretch;
  }

  .startBar .primary{
    width:100%;
  }

  .startBar #btnStartGame{
    display:none !important;
  }
}
#toggleAdaptiveMasterGuided{
  width: 58px !important;
  height: 30px !important;
  min-width: 58px !important;
  padding: 0 !important;
  position: relative !important;
  display: inline-block !important;
}

#toggleAdaptiveMasterGuided .adaptiveSwitchDot{
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  top: 3px !important;
  left: 3px !important;
  transform: none !important;
}

#toggleAdaptiveMasterGuided.active .adaptiveSwitchDot{
  left: 31px !important;
  transform: none !important;
}
.adaptiveMasterRow #toggleAdaptiveMasterGuided{
  margin-top: 10px !important;
}
.turnIaInfo{
  margin-top:10px;
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.86);
}
#modalOk{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.randomTeamsReveal{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(124,92,255,.35), transparent 40%),
    radial-gradient(circle at bottom right, rgba(0,212,255,.22), transparent 40%),
    linear-gradient(135deg,#171a36,#1d2c48);

  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Fenêtre répartition aléatoire des équipes - effet premium */
.randomTeamsStartBox{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(124,92,255,.35), transparent 40%),
    radial-gradient(circle at bottom right, rgba(0,212,255,.22), transparent 40%),
    linear-gradient(135deg,#171a36,#1d2c48);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 25px 80px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.randomTeamsStartBox::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.06) 50%,
      transparent 70%
    );
  animation:teamShine 7s linear infinite;
  pointer-events:none;
}

@keyframes teamShine{
  from{ transform:translateX(-30%); }
  to{ transform:translateX(30%); }
}

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

.randomTeamsStartTitle{
  font-size:clamp(28px,4vw,42px);
  font-weight:1000;
  text-align:center;
  background:linear-gradient(90deg,#fff,#c7d7ff,#8be7ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.revealTeamCard{
  background:
    linear-gradient(180deg, rgba(10,18,40,.95), rgba(7,14,28,.92));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:.25s transform;
}

.revealTeamCard:hover{
  transform:translateY(-2px);
}
/* Fenêtre début de tour : 4 infos alignées sur ordinateur */
.premiumTransitionInfoGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}

/* Tablette / mobile : 2 colonnes */
@media (max-width:700px){
  .premiumTransitionInfoGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Très petit mobile : 1 colonne si besoin */
@media (max-width:420px){
  .premiumTransitionInfoGrid{
    grid-template-columns: 1fr;
  }
}
.turnIaInfo{
  margin-top:10px;
  padding:8px 12px;
  border-radius:999px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:rgba(124,92,255,.22);
  border:1px solid rgba(255,255,255,.16);
}
/* Correctif 18/05 : répartition équipes + titre moins imposant */
.randomTeamsStartTitle{
  font-size:clamp(20px, 2.6vw, 30px) !important;
  line-height:1.12;
}

.revealTeamHeader{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}

.revealTeamAvatar{
  width:46px;
  height:46px;
  min-width:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:24px;
  box-shadow:0 10px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.22);
}

.revealTeamAvatar.violet{background:linear-gradient(135deg,#8b4dff,#b45cff);}
.revealTeamAvatar.bleu{background:linear-gradient(135deg,#1684ff,#37b8ff);}
.revealTeamAvatar.vert{background:linear-gradient(135deg,#28d67b,#7cffb2);}
.revealTeamAvatar.orange{background:linear-gradient(135deg,#ff8a1d,#ffd166);}
.revealTeamAvatar.rouge{background:linear-gradient(135deg,#ff3f68,#ff7a7a);}
.revealTeamAvatar.jaune{background:linear-gradient(135deg,#ffd166,#fff06a); color:#17130a;}
.revealTeamAvatar.rose{background:linear-gradient(135deg,#ff5ccf,#ff9ce8);}
.revealTeamAvatar.turquoise{background:linear-gradient(135deg,#00d4ff,#4dffdf);}
.revealTeamAvatar.default{background:linear-gradient(135deg,var(--accent),var(--accent2));}

.revealPlayerList{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.revealPlayerLine{
  display:flex;
  align-items:center;
  gap:8px;
}

.revealPlayerDot{
  width:9px;
  height:9px;
  min-width:9px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(255,255,255,.08);
}

.revealPlayerDot.violet{background:#b45cff;}
.revealPlayerDot.bleu{background:#37b8ff;}
.revealPlayerDot.vert{background:#28d67b;}
.revealPlayerDot.orange{background:#ffd166;}
.revealPlayerDot.rouge{background:#ff5f7f;}
.revealPlayerDot.jaune{background:#fff06a;}
.revealPlayerDot.rose{background:#ff9ce8;}
.revealPlayerDot.turquoise{background:#4dffdf;}
@media (max-width: 600px){
  #activationBanner{
    max-width: calc(100% - 70px);
    padding: 6px 10px;
    font-size: 11px;
    line-height: 1.15;
    border-radius: 999px;
  }

  #activationBanner .checkIcon,
  #activationBanner svg,
  #activationBanner img{
    width: 14px;
    height: 14px;
  }
}
/* Stats avancées écran final Chrono Party */
.finalStatsPanel{
  margin:18px 0;
  padding:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(124,92,255,.20), rgba(0,212,255,.10)), rgba(255,255,255,.06);
  box-shadow:0 18px 42px rgba(0,0,0,.24);
}
.finalStatsHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.finalStatsKicker{
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.finalStatsHeader h3{
  margin:4px 0 0;
  font-size:22px;
  line-height:1.1;
}
.finalStatsTotals{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.finalStatsTotals span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.90);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.finalStatsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.finalStatCard{
  min-height:132px;
  padding:14px;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}
.finalStatIcon{
  font-size:24px;
  margin-bottom:8px;
}
.finalStatLabel{
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.finalStatValue{
  margin-top:5px;
  color:#fff;
  font-size:20px;
  font-weight:950;
  line-height:1.1;
  word-break:break-word;
}
.finalStatDetail{
  margin-top:7px;
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.35;
}
.finalAiBox,
.finalProgressBox{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}
.finalAiTitle,
.finalProgressTitle{
  font-weight:950;
  color:#fff;
  margin-bottom:8px;
}
.finalAiBox p{
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.45;
}
.finalProgressRow{
  margin-top:12px;
}
.finalProgressTeam{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#fff;
  font-weight:900;
  margin-bottom:6px;
}
.finalProgressTrack{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.12);
}
.finalProgressBar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #7c5cff, #00d4ff, #3cff9a);
}
.finalProgressRounds{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:7px;
}
.finalProgressRounds span{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.78);
  font-size:11px;
  font-weight:800;
}

@media (max-width: 760px){
  .finalStatsPanel{
    padding:13px;
    border-radius:20px;
  }
  .finalStatsHeader{
    display:block;
  }
  .finalStatsHeader h3{
    font-size:18px;
  }
  .finalStatsTotals{
    justify-content:flex-start;
    margin-top:10px;
  }
  .finalStatsGrid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .finalStatCard{
    min-height:auto;
    padding:12px;
  }
  .finalStatValue{
    font-size:17px;
  }
  .finalStatDetail{
    font-size:12px;
  }
}
#finalOverlay .finalActions{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  padding:7px 10px !important;
}

#finalOverlay .finalButtonsRow{
  display:flex !important;
  gap:7px !important;
  width:100% !important;
}

#finalOverlay .finalButtonsRow button{
  flex:1 1 0 !important;
  min-height:34px !important;
  padding:5px 6px !important;
  font-size:13px !important;
}

#finalOverlay .finalLinksRow{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:7px !important;
  width:100% !important;
}

#finalOverlay .finalLinksRow .homeInfoPill{
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  white-space:nowrap !important;
  padding:7px 6px !important;
  font-size:12px !important;
  line-height:1.1 !important;
  text-decoration:none !important;
}
/* =========================
   MODE COOP - Boss Chrono
========================= */
.coopModeChoiceGrid,
.guidedModeGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.gameModeCard.selected,
.coopBossLevelCard.selected,
.guidedModeCard:hover{
  outline:3px solid rgba(255,255,255,.38);
  transform:translateY(-1px);
}

.coopBossConfig{
  margin-top:14px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.14);
}

.coopBossHeader{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.coopBossIcon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.12);
  font-size:28px;
}

.coopBossTitle{
  font-weight:1100;
  font-size:18px;
}

.coopBossText{
  opacity:.82;
  font-size:13px;
  line-height:1.35;
}

.coopBossLevels{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.coopBossLevelCard,
.guidedModeCard{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:18px;
  padding:12px;
  font-weight:1000;
  cursor:pointer;
  text-align:left;
}

.coopBossLevelCard span,
.guidedModeCard span{
  display:block;
  font-size:12px;
  font-weight:800;
  opacity:.72;
  margin-top:4px;
  line-height:1.35;
}

.coopBossHud{
  margin-top:14px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
}

.coopBossHudTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-weight:1100;
}

.coopBossHudBar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  overflow:hidden;
  margin-top:10px;
}

.coopBossHudBar span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #6ee7ff, #a78bfa, #fb7185);
}

.coopBossHudText{
  margin-top:8px;
  font-size:12px;
  opacity:.78;
  font-weight:800;
}

.coopFinalHero{
  border-radius:26px;
  padding:22px;
  text-align:center;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.16);
}

.coopFinalHero.success{
  box-shadow:0 0 0 1px rgba(74,222,128,.22), 0 18px 60px rgba(74,222,128,.12);
}

.coopFinalHero.failed{
  box-shadow:0 0 0 1px rgba(248,113,113,.22), 0 18px 60px rgba(248,113,113,.12);
}

.coopFinalIcon{
  font-size:54px;
  line-height:1;
}

.coopFinalBadge{
  margin-top:10px;
  font-weight:1000;
  opacity:.85;
}

.coopFinalTitle{
  margin-top:8px;
  font-size:clamp(28px,5vw,46px);
  font-weight:1200;
}

.coopFinalText{
  margin-top:8px;
  opacity:.86;
  line-height:1.45;
}

.coopFinalStats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.coopFinalStats div{
  border-radius:18px;
  padding:12px;
  background:rgba(255,255,255,.09);
}

.coopFinalStats strong{
  display:block;
  font-size:22px;
}

.coopFinalStats span{
  display:block;
  font-size:12px;
  opacity:.72;
  font-weight:800;
  margin-top:3px;
}

.coopFinalPlayers{
  margin-top:14px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.12);
}

.coopFinalPlayers div{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.coopFinalPlayers span{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  font-weight:900;
}

@media (max-width:760px){
  .coopModeChoiceGrid,
  .guidedModeGrid,
  .coopBossLevels,
  .coopFinalStats{
    grid-template-columns:1fr;
  }
}

/* =========================
   MODE COOP BOSS - TOURS VISIBLES
========================= */
.coopBossLevelCard small{
  display:block;
  margin-top:5px;
  font-size:12px;
  opacity:.9;
  color:#ffd95c;
}
.fsCoopBossHud{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:10px 0 6px;
  padding:10px 12px;
  border:1px solid rgba(255,217,92,.42);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(80,48,120,.52), rgba(11,166,197,.28));
  box-shadow:0 14px 34px rgba(0,0,0,.20);
}
.fsCoopBossHud.hidden{display:none!important;}
.fsCoopBossHudTop{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  font-weight:1000;
  color:#fff;
}
.fsCoopBossHudTop strong{
  color:#ffd95c;
  white-space:nowrap;
}
.fsCoopBossHudBar{
  height:9px;
  margin:8px 0 6px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.16);
}
.fsCoopBossHudBar span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#32e6a1,#13b7e3,#7c5cff,#ffd95c);
  transition:width .25s ease;
}
.fsCoopBossHudText{
  font-size:13px;
  font-weight:800;
  opacity:.9;
}

@media (max-width: 520px){
  .fsCoopBossHud{
    width:100%;
    max-width:100%;
    margin:8px 0 6px;
    padding:9px 10px;
    border-radius:16px;
  }
  .fsCoopBossHudTop{
    gap:6px;
    align-items:flex-start;
  }
  .fsCoopBossHudTop span{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .fsCoopBossHudTop strong{
    font-size:13px;
    white-space:nowrap;
  }
  .fsCoopBossHudText{
    font-size:12px;
    line-height:1.25;
  }
}

.guidedModeCard span{line-height:1.35;}

/* Coop : écran groupe avant démarrage */
.revealTeamsGrid.coopRevealSingle{
  grid-template-columns:minmax(0, 1fr);
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================
   MODE COOP - FINAL BOSS ANIMÉ
========================= */
.coopBossBattle{
  position:relative;
  width:128px;
  height:104px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
}

.coopBossEmoji,
.coopBossExplosion,
.coopBossTrophy{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:64px;
  line-height:1;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.35));
}

.coopBossExplosion,
.coopBossTrophy{
  opacity:0;
  transform:scale(.65);
}

.coopBossBattle.bossDefeated .coopBossEmoji{
  animation:coopBossShake .95s ease-in-out forwards;
}

.coopBossBattle.bossDefeated .coopBossExplosion{
  animation:coopBossExplosion .55s ease-out .8s forwards;
}

.coopBossBattle.bossDefeated .coopBossTrophy{
  animation:coopBossTrophy .7s cubic-bezier(.2,1.35,.35,1) 1.18s forwards;
}

.coopBossBattle.bossWinner .coopBossEmoji{
  animation:coopBossGrow 1.2s ease-in-out forwards;
}

.coopBossBattle.bossWinner .coopBossTrophy{
  animation:coopBossFire .85s ease-out .55s forwards;
}

@keyframes coopBossShake{
  0%{ transform:translateX(0) rotate(0) scale(1); opacity:1; }
  12%{ transform:translateX(-9px) rotate(-5deg) scale(1.03); }
  24%{ transform:translateX(9px) rotate(5deg) scale(1.04); }
  36%{ transform:translateX(-7px) rotate(-4deg) scale(1.05); }
  48%{ transform:translateX(7px) rotate(4deg) scale(1.04); }
  62%{ transform:translateX(-5px) rotate(-3deg) scale(1.02); }
  78%{ transform:translateX(5px) rotate(3deg) scale(.98); opacity:1; }
  100%{ transform:translateY(14px) scale(.1) rotate(18deg); opacity:0; }
}

@keyframes coopBossExplosion{
  0%{ opacity:0; transform:scale(.35) rotate(-15deg); }
  45%{ opacity:1; transform:scale(1.35) rotate(8deg); }
  100%{ opacity:0; transform:scale(1.8) rotate(16deg); }
}

@keyframes coopBossTrophy{
  0%{ opacity:0; transform:translateY(18px) scale(.55); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes coopBossGrow{
  0%{ transform:scale(1); }
  60%{ transform:scale(1.14); }
  100%{ transform:scale(1.1); }
}

@keyframes coopBossFire{
  0%{ opacity:0; transform:scale(.65); }
  100%{ opacity:1; transform:scale(1.05); }
}

.coopFightSummary{
  margin:18px auto 0;
  max-width:560px;
  border-radius:22px;
  padding:16px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
}

.coopFightSummaryHeader{
  font-weight:1000;
  opacity:.9;
}

.coopFightSummaryResult{
  margin-top:8px;
  font-size:34px;
  line-height:1;
}

.coopFightSummaryTitle{
  margin-top:8px;
  font-size:22px;
  font-weight:1200;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.coopFinalSmallStats{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:12px;
}

.coopFinalSmallStats span{
  border-radius:999px;
  padding:8px 11px;
  background:rgba(255,255,255,.08);
  font-weight:900;
  font-size:13px;
}

.coopPerf.legend strong,
.coopPerf.gold strong,
.coopPerf.silver strong,
.coopPerf.bronze strong{
  letter-spacing:.01em;
}

@media (prefers-reduced-motion: reduce){
  .coopBossBattle *{
    animation:none !important;
  }
  .coopBossBattle.bossDefeated .coopBossEmoji{ opacity:0; }
  .coopBossBattle.bossDefeated .coopBossTrophy{ opacity:1; transform:scale(1); }
  .coopBossBattle.bossWinner .coopBossTrophy{ opacity:1; transform:scale(1); }
}
.gameModeCard{
  min-height:86px;
  padding:16px 18px;
  border-radius:20px;
  border:2px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(34,211,238,.08));
  cursor:pointer;
  transition:.18s ease;
}

.gameModeCard .presetIcon{
  font-size:24px;
  margin-bottom:5px;
}

.gameModeCard .presetTitle{
  font-size:19px;
  font-weight:1000;
}

.gameModeCard .presetText{
  font-size:13px;
  line-height:1.25;
  font-weight:900;
  color:white;
}

.gameModeCard.selected{
  border-color:#ffd84d;
  background:linear-gradient(135deg,rgba(139,92,246,.50),rgba(34,211,238,.22));
  box-shadow:0 0 0 2px rgba(255,216,77,.16), 0 12px 28px rgba(0,0,0,.28);
  transform:translateY(-1px);
}

.gameModeCard[data-game-mode="coop"].selected{
  border-color:#22d3ee;
  box-shadow:0 0 0 2px rgba(34,211,238,.18), 0 12px 28px rgba(0,0,0,.28);
}
.coopBossLevelCard{
  position:relative;
  min-height:86px;
  padding:16px 14px;
  border-radius:18px;
  border:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  transition:.18s ease;
  cursor:pointer;
  overflow:hidden;
}

.coopBossLevelCard::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.65;
  z-index:0;
}

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

.coopBossLevelCard[data-coop-level="easy"]::before{
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(20,184,166,.07));
}

.coopBossLevelCard[data-coop-level="standard"]::before{
  background:linear-gradient(135deg,rgba(59,130,246,.20),rgba(14,165,233,.08));
}

.coopBossLevelCard[data-coop-level="hard"]::before{
  background:linear-gradient(135deg,rgba(249,115,22,.22),rgba(239,68,68,.08));
}

.coopBossLevelCard[data-coop-level="legend"]::before{
  background:linear-gradient(135deg,rgba(124,58,237,.24),rgba(168,85,247,.10));
}

.coopBossLevelCard:hover{
  border-color:rgba(255,255,255,.34);
  transform:translateY(-1px);
}

.coopBossLevelCard.selected{
  border-color:rgba(255,255,255,.78);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.10),
    0 12px 24px rgba(0,0,0,.25);
  transform:translateY(-2px);
}

.coopBossLevelCard.selected::after{
  content:"✓";
  position:absolute;
  top:10px;
  right:12px;
  width:24px;
  height:24px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffd84d;
  color:#111827;
  font-weight:1000;
  font-size:15px;
  box-shadow:0 5px 12px rgba(0,0,0,.25);
  z-index:2;
}

.coopBossLevelCard.selected strong,
.coopBossLevelCard.selected .presetTitle{
  color:#ffffff;
}

.coopBossLevelCard [data-coop-turns-info]{
  color:#ffd84d;
  font-weight:1000;
}

/* =========================
   Âges enfants - réutilise les couleurs Boss existantes
========================= */
.kidsAgeCard{
  min-height:86px;
}

.kidsAgeChoiceGroup{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.kidsAgeChoiceBtn{
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}

.kidsAgeChoiceBtn[data-kids-age="6-7"]{
  background:linear-gradient(135deg,rgba(34,197,94,.34),rgba(20,184,166,.16));
}

.kidsAgeChoiceBtn[data-kids-age="8-9"]{
  background:linear-gradient(135deg,rgba(59,130,246,.36),rgba(14,165,233,.18));
}

.kidsAgeChoiceBtn[data-kids-age="10+"]{
  background:linear-gradient(135deg,rgba(124,58,237,.38),rgba(168,85,247,.20));
}

.kidsAgeChoiceBtn.active{
  border-color:rgba(255,255,255,.78);
  box-shadow:0 0 0 2px rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.18);
}

@media (max-width:640px){
  .kidsAgeChoiceGroup{
    grid-template-columns:1fr;
  }
}
/* Couleurs parcours Jouer : Classique / Coop */
.guidedModeCard[data-game-mode="classic"]{
  background:linear-gradient(135deg, rgba(124,58,237,.32), rgba(59,130,246,.18)) !important;
  border-color:rgba(167,139,250,.75) !important;
}

.guidedModeCard[data-game-mode="coop"]{
  background:linear-gradient(135deg, rgba(14,165,233,.28), rgba(34,197,94,.18)) !important;
  border-color:rgba(45,212,191,.75) !important;
}