/* QuizFighterOne — styles du site (déplacés depuis index.html) */
  /* Univers festif volontairement unique (affiche/plaque) — couleurs peintes explicitement, pas de bascule clair/sombre. */
  :root{
    --cranberry-900:#3b0d13;
    --cranberry-800:#5a1119;
    --cranberry-700:#7c1a22;
    --cranberry-600:#9c2a2f;
    --pine-900:#12301f;
    --pine-800:#1c4632;
    --pine-600:#2f6b4a;
    --pine-500:#3f8560;
    --gold-500:#c9973e;
    --gold-300:#e6c479;
    --parchment:#f7ecd8;
    --parchment-dim:#e6d5ac;
    --ink:#2c2015;
    --ink-soft:#5c4a35;
    --snow:#fff8ea;
    --ember:#b3242c;
    --ember-dark:#8c1a20;
    --ember-light:#f3c1c2;

    --font-display:'Baloo 2','Segoe UI Rounded','Segoe UI',system-ui,sans-serif;
    --font-body:'Nunito','Segoe UI',system-ui,sans-serif;
  }

  /* ---- thèmes alternatifs (mêmes rôles de couleur, palette différente) ---- */
  body[data-theme="halloween"]{
    --cranberry-900:#1c0f26; --cranberry-800:#2c1638; --cranberry-700:#d9631e; --cranberry-600:#f0812e;
    --pine-900:#140d1c; --pine-800:#2a1f3d; --pine-600:#5a3f7a; --pine-500:#7a5aa0;
    --gold-500:#e08a2e; --gold-300:#f5b860;
    --parchment:#efe6da; --parchment-dim:#dccebd;
    --ink:#241830; --ink-soft:#4a3d55; --snow:#f6f0e6;
  }
  body[data-theme="anniversaire"]{
    --cranberry-900:#3a0f2e; --cranberry-800:#5c1548; --cranberry-700:#d6337a; --cranberry-600:#ef5da8;
    --pine-900:#0d2b36; --pine-800:#124451; --pine-600:#1f7a8c; --pine-500:#2fa0b5;
    --gold-500:#e8b53d; --gold-300:#f6d883;
    --parchment:#fdf3e8; --parchment-dim:#f0dcc0;
    --ink:#2c1424; --ink-soft:#5c4055; --snow:#fff6f0;
  }
  body[data-theme="classique"]{
    --cranberry-900:#20181a; --cranberry-800:#332527; --cranberry-700:#5c3a2e; --cranberry-600:#8a5a3c;
    --pine-900:#1c1712; --pine-800:#3a2f22; --pine-600:#6b5a3f; --pine-500:#8c7654;
    --gold-500:#c9973e; --gold-300:#e6c479;
    --parchment:#f5ecdd; --parchment-dim:#e2d2b0;
    --ink:#2b2015; --ink-soft:#5c4a35; --snow:#fdf6ea;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:
      radial-gradient(ellipse 900px 500px at 50% -8%, var(--cranberry-600), transparent 60%),
      linear-gradient(180deg, var(--cranberry-800), var(--cranberry-900) 55%, var(--cranberry-900));
    color:var(--snow);
    font-family:var(--font-body);
    min-height:100vh;
    overflow-x:hidden;
  }
  body[data-bg-skin="tokyo"]{
    background:
      radial-gradient(circle at 15% 20%, rgba(255,45,150,.6), transparent 30%),
      radial-gradient(circle at 82% 18%, rgba(45,230,255,.55), transparent 28%),
      radial-gradient(circle at 45% 10%, rgba(255,210,60,.35), transparent 22%),
      radial-gradient(circle at 70% 40%, rgba(150,60,255,.4), transparent 30%),
      radial-gradient(circle at 22% 68%, rgba(255,45,150,.35), transparent 26%),
      radial-gradient(circle at 78% 78%, rgba(45,230,255,.3), transparent 24%),
      radial-gradient(circle at 50% 98%, rgba(150,60,255,.28), transparent 30%),
      linear-gradient(180deg, #08040f 0%, #170a2e 45%, #05030a 100%);
  }
  body[data-bg-skin="sakura"]{
    background:
      radial-gradient(circle at 12% 10%, rgba(255,255,255,.7), transparent 35%),
      radial-gradient(circle at 85% 8%, rgba(255,200,222,.55), transparent 38%),
      radial-gradient(circle at 8% 82%, rgba(255,170,200,.5), transparent 40%),
      radial-gradient(circle at 90% 88%, rgba(255,255,255,.4), transparent 35%),
      radial-gradient(circle at 50% 50%, rgba(255,235,245,.35), transparent 55%),
      linear-gradient(160deg, #ffeef5 0%, #ffd7e6 40%, #ffc2da 75%, #ffb3d1 100%);
  }
  body[data-bg-skin="castle"]{
    background:
      radial-gradient(circle at 50% 30%, rgba(255,221,150,.55), transparent 22%),
      radial-gradient(circle at 38% 34%, rgba(255,200,110,.4), transparent 18%),
      radial-gradient(circle at 62% 34%, rgba(255,200,110,.4), transparent 18%),
      radial-gradient(circle at 50% 55%, rgba(255,210,140,.22), transparent 40%),
      radial-gradient(circle at 12% 88%, rgba(90,200,140,.18), transparent 30%),
      radial-gradient(circle at 88% 88%, rgba(90,200,140,.18), transparent 30%),
      linear-gradient(180deg, #050a1c 0%, #0b1633 35%, #14224a 60%, #1c2f5c 85%, #223666 100%);
  }
  body[data-bg-skin="ski"]{
    background:
      radial-gradient(circle at 82% 10%, rgba(255,250,220,.9), transparent 14%),
      radial-gradient(circle at 82% 10%, rgba(255,240,180,.5), transparent 26%),
      linear-gradient(180deg, #a9d4f0 0%, #cfe8f7 30%, #eef7fb 55%, #ffffff 70%),
      radial-gradient(ellipse 140% 40% at 50% 100%, #f4f9fc 0%, #dcecf5 60%, transparent 100%);
  }
  /* Fond Saphir (récompense du passe, niveau 12) : facettes de pierre précieuse bleue et reflets */
  body[data-bg-skin="saphir"]{
    background:
      radial-gradient(circle at 18% 14%, rgba(255,255,255,.35), transparent 10%),
      radial-gradient(circle at 80% 22%, rgba(170,215,255,.4), transparent 16%),
      radial-gradient(circle at 62% 82%, rgba(90,160,255,.35), transparent 24%),
      radial-gradient(circle at 30% 70%, rgba(40,110,255,.3), transparent 22%),
      conic-gradient(from 25deg at 50% 42%, #0b2a7a, #1a52c9, #0a1f5c, #2166dd, #0b2a7a, #14409f, #081a4f, #1c58cf, #0b2a7a);
  }
  .pseudo-color-gold{
    background:linear-gradient(90deg, #a8781f, #f3d98b, #a8781f) !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; font-weight:900 !important;
  }
  .pseudo-color-silver{
    background:linear-gradient(90deg, #8b95a0, #eef2f5, #8b95a0) !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; font-weight:900 !important;
  }
  .pseudo-color-rainbow{
    background:linear-gradient(90deg, #ff3b3b, #ff9900, #ffe600, #33cc33, #3399ff, #9933ff, #ff3b3b) !important;
    background-size:400% 100% !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; font-weight:900 !important;
    animation:rainbowPseudoShift 3s linear infinite !important;
  }
  @keyframes rainbowPseudoShift{ 0%{ background-position:0% 50%; } 100%{ background-position:400% 50%; } }
  /* Statistiques de visite (profil de l'admin) */
  .admin-stats{ background:var(--snow); color:var(--ink); border-radius:10px; padding:.5rem .6rem; font-size:.78rem; }
  .admin-stats .friend-sub{ margin:0 0 .4rem; }
  .admin-stats-chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem; }
  .admin-stats-chip{ background:var(--parchment); border-radius:999px; padding:.1rem .5rem; font-weight:700; font-size:.72rem; }
  .admin-stats-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
  .admin-stats-table th, .admin-stats-table td{ padding:.2rem .3rem; border-bottom:1px solid var(--parchment-dim); text-align:right; }
  .admin-stats-table th:first-child, .admin-stats-table td:first-child{ text-align:left; }
  .admin-stats-table th{ font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); }
  /* QR code pour rejoindre une partie en ligne */
  .qr-box{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; max-width:520px; margin:.8rem auto; padding:.8rem 1rem; background:var(--snow); color:var(--ink); border:2px solid var(--gold-500); border-radius:16px; text-align:left; }
  .qr-code{ width:120px; height:120px; flex:none; background:#fff; border-radius:8px; padding:4px; }
  .qr-code svg{ display:block; width:100%; height:100%; }
  .qr-text{ display:grid; gap:.2rem; font-size:.85rem; font-weight:600; min-width:0; max-width:300px; }
  .qr-text strong:first-child{ font-size:1rem; }
  .qr-gamecode{ font-family:var(--font-display); letter-spacing:.08em; color:var(--cranberry-700); }
  .qr-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.65); }
  .qr-modal-inner{ display:grid; justify-items:center; gap:.6rem; background:var(--snow); color:var(--ink); border:3px solid var(--gold-500); border-radius:20px; padding:1.2rem 1.4rem; max-width:92vw; text-align:center; }
  .qr-code-big{ width:min(70vmin, 360px); height:min(70vmin, 360px); }
  .qr-modal-code{ margin:0; font-size:1.2rem; font-weight:700; }
  .qr-modal-code strong{ font-family:var(--font-display); font-size:1.6rem; letter-spacing:.1em; color:var(--cranberry-700); }
  .qr-modal-hint{ margin:0; font-size:.9rem; max-width:34ch; }
  /* Couleurs de pseudo — communes : couleurs simples, assez foncées pour se lire sur fond clair comme sur fond sombre */
  .pseudo-color-red{ color:#d63031 !important; font-weight:800 !important; }
  .pseudo-color-green{ color:#2e9e4f !important; font-weight:800 !important; }
  .pseudo-color-blue{ color:#2f6fdf !important; font-weight:800 !important; }
  .pseudo-color-brown{ color:#9a5b2a !important; font-weight:800 !important; }
  .pseudo-color-pink{ color:#e0529c !important; font-weight:800 !important; }
  /* Rares : fluo, avec un halo lumineux */
  .pseudo-color-neonviolet{ color:#b026ff !important; font-weight:900 !important; text-shadow:0 0 4px rgba(176,38,255,.75), 0 0 12px rgba(176,38,255,.45) !important; }
  .pseudo-color-neonsky{ color:#00b8f0 !important; font-weight:900 !important; text-shadow:0 0 4px rgba(0,200,255,.8), 0 0 12px rgba(0,200,255,.45) !important; }
  .pseudo-color-neonorange{ color:#ff7a00 !important; font-weight:900 !important; text-shadow:0 0 4px rgba(255,122,0,.8), 0 0 12px rgba(255,122,0,.45) !important; }
  /* Légendaires : animées */
  .pseudo-color-fire{
    background:linear-gradient(0deg, #b01500 0%, #e83a00 30%, #ff6a00 55%, #ff9d00 80%, #ffbf1f 100%) !important;
    background-size:100% 200% !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; font-weight:900 !important;
    filter:drop-shadow(0 0 3px rgba(255,80,0,.75)) !important;
    animation:firePseudoFlicker 1.6s ease-in-out infinite alternate !important;
  }
  @keyframes firePseudoFlicker{ 0%{ background-position:50% 100%; } 50%{ background-position:50% 40%; } 100%{ background-position:50% 70%; } }
  .pseudo-color-galaxy{
    background:linear-gradient(110deg, #5b3bff 0%, #9b4dff 25%, #e04fc9 42%, #ffd6f5 50%, #e04fc9 58%, #4d8bff 78%, #5b3bff 100%) !important;
    background-size:300% 100% !important;
    -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; font-weight:900 !important;
    filter:drop-shadow(0 0 3px rgba(150,110,255,.85)) !important;
    animation:galaxyPseudoShine 4s linear infinite !important;
  }
  @keyframes galaxyPseudoShine{ 0%{ background-position:100% 50%; } 100%{ background-position:-200% 50%; } }
  .pseudo-color-sample{ font-family:var(--font-display); font-size:1.6rem; line-height:1; }
  @media (prefers-reduced-motion:reduce){ .pseudo-color-rainbow, .pseudo-color-fire, .pseudo-color-galaxy{ animation:none !important; } }
  .chest-shop-box{
    display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
    background:rgba(255,255,255,.35); border:2px dashed var(--gold-500); border-radius:16px; padding:1.1rem 1rem; margin-bottom:1.2rem;
  }
  .chest-shop-emoji{ font-size:2.4rem; }
  .chest-shop-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin-bottom:1.2rem; align-items:start; }
  .chest-shop-row .chest-shop-box{ margin-bottom:0; }
  .chest-shop-name{ font-family:var(--font-display); font-size:1.1rem; color:var(--ink); }
  .chest-shop-box.chest-saphir{ border-color:#1f6fd1; background:linear-gradient(160deg, rgba(31,111,209,.12), rgba(139,63,209,.10)); }
  .chest-shop-box.chest-saphir .chest-shop-name{ color:#1f6fd1; }
  .chest-shop-box.chest-mythique{ border-color:#c28a00; border-style:solid; background:linear-gradient(160deg, rgba(139,63,209,.16), rgba(194,138,0,.16)); box-shadow:0 0 18px rgba(194,138,0,.25); }
  .chest-shop-box.chest-mythique .chest-shop-name{ background:linear-gradient(90deg, #8b3fd1, #c28a00); -webkit-background-clip:text; background-clip:text; color:transparent; }
  @media (max-width:700px){ .chest-shop-row{ grid-template-columns:1fr; } }
  .chest-shop-desc{ font-size:.82rem; max-width:420px; color:var(--ink); opacity:.85; margin:0; }
  .chest-modal{
    position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center;
    background:rgba(10,10,15,.72);
  }
  .chest-modal[hidden]{ display:none; }
  .chest-modal-inner{
    background:var(--parchment); border:3px solid var(--gold-500); border-radius:20px; padding:2rem 2.2rem;
    display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:min(360px,86vw); text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
  }
  .chest-icon{ font-size:4.5rem; line-height:1; }
  .activity-feed{ margin-top:.6rem; padding-top:.5rem; border-top:1px solid rgba(0,0,0,.1); }
  .activity-feed-title{ font-weight:800; font-size:.78rem; margin-bottom:.3rem; color:var(--ink); }
  .activity-row{ display:flex; justify-content:space-between; gap:.5rem; font-size:.72rem; line-height:1.35; padding:.2rem 0; color:var(--ink); }
  .activity-ago{ opacity:.6; white-space:nowrap; }
  .activity-toasts{ position:fixed; left:16px; bottom:84px; z-index:56; display:flex; flex-direction:column; gap:.4rem; max-width:min(300px, 80vw); pointer-events:none; }
  .activity-toast{ display:flex; gap:.5rem; align-items:center; background:var(--parchment); color:var(--ink); border:2px solid var(--gold-500); border-radius:12px;
    padding:.5rem .7rem; font-size:.8rem; box-shadow:0 8px 20px rgba(0,0,0,.3); opacity:0; transform:translateX(-20px); transition:opacity .3s, transform .3s; }
  .activity-toast.show{ opacity:1; transform:translateX(0); }
  .activity-toast-icon{ font-size:1.1rem; }
  .player-link{ background:none; border:none; padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; text-align:inherit; }
  .player-link:hover{ text-decoration:underline; }
  .player-card-context{ font-style:italic; opacity:.8; margin:0 0 .6rem; word-break:break-word; color:var(--ink); }
  .player-card-notice{ font-weight:800; margin:.2rem 0 .6rem; color:var(--ink); }
  .player-card-hint{ font-size:.8rem; opacity:.75; margin:.6rem 0 0; color:var(--ink); }
  .player-report-form{ display:flex; flex-direction:column; gap:.35rem; margin-top:.8rem; text-align:left; width:100%; }
  .player-report-reason{ font-size:.85rem; font-weight:700; color:var(--ink); display:flex; gap:.45rem; align-items:center; cursor:pointer; }
  .player-report-comment{ width:100%; min-height:60px; border-radius:10px; border:2px solid var(--parchment-dim); padding:.5rem; font:inherit; font-size:.85rem; resize:vertical; }
  .admin-report{ border-bottom:1px solid rgba(0,0,0,.08); padding:.45rem 0; font-size:.8rem; display:flex; flex-direction:column; gap:.2rem; align-items:flex-start; color:var(--ink); }
  .admin-report-quote{ font-style:italic; opacity:.8; word-break:break-word; }
  .chest-icon[hidden]{ display:none; }
  .chest-modal-inner.chest-modal-wide{ width:min(640px, 94vw); max-width:min(640px, 94vw); padding:1.6rem 1.2rem; }
  .chest-roulette{ width:100%; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
  .chest-roulette-window{ position:relative; width:100%; overflow:hidden; border-radius:14px; background:rgba(0,0,0,.07); border:2px solid var(--parchment-dim); padding:10px 0; }
  .chest-roulette-window::before, .chest-roulette-window::after{ content:''; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none; }
  .chest-roulette-window::before{ left:0; background:linear-gradient(90deg, var(--parchment), transparent); }
  .chest-roulette-window::after{ right:0; background:linear-gradient(270deg, var(--parchment), transparent); }
  .chest-roulette-strip{ display:flex; gap:8px; will-change:transform; }
  .roulette-card{ flex:0 0 96px; width:96px; min-width:0; overflow:hidden; height:110px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
    background:var(--snow); border:2px solid var(--rc); border-bottom-width:6px; border-radius:10px; padding:.3rem; box-shadow:inset 0 -22px 26px -20px var(--rc); }
  .roulette-icon{ font-size:2.1rem; line-height:1; }
  .roulette-name{ font-size:.62rem; font-weight:800; color:var(--ink); text-align:center; line-height:1.15; }
  .chest-roulette-marker{ position:absolute; top:0; bottom:0; left:50%; width:4px; margin-left:-2px; background:var(--ember); z-index:3; box-shadow:0 0 10px rgba(179,36,44,.7); }
  .chest-roulette-marker::before, .chest-roulette-marker::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); border:9px solid transparent; }
  .chest-roulette-marker::before{ top:0; border-top-color:var(--ember); }
  .chest-roulette-marker::after{ bottom:0; border-bottom-color:var(--ember); }
  .roulette-win-show{ animation:rouletteWin .6s ease-in-out 3; }
  @keyframes rouletteWin{ 50%{ transform:scale(1.1); box-shadow:0 0 22px var(--rc), inset 0 -22px 26px -20px var(--rc); } }
  .chest-icon.chest-shake{ animation:chestShake .5s ease-in-out infinite; }
  .chest-icon.chest-pop{ animation:chestPop .45s cubic-bezier(.34,1.56,.64,1); }
  @keyframes chestShake{
    0%,100%{ transform:rotate(0deg) translateX(0); }
    20%{ transform:rotate(-8deg) translateX(-4px); }
    40%{ transform:rotate(7deg) translateX(4px); }
    60%{ transform:rotate(-6deg) translateX(-3px); }
    80%{ transform:rotate(5deg) translateX(3px); }
  }
  @keyframes chestPop{
    0%{ transform:scale(.3) rotate(-15deg); opacity:0; }
    60%{ transform:scale(1.25) rotate(6deg); opacity:1; }
    100%{ transform:scale(1) rotate(0deg); opacity:1; }
  }
  .chest-result{ font-size:1rem; font-weight:700; color:var(--ink); }
  .chest-rarity{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:.06em; margin-bottom:.2rem; }
  .chest-odds{ width:100%; max-width:520px; text-align:left; background:rgba(255,255,255,.55); border:1px solid var(--parchment-dim); border-radius:12px; padding:.7rem .9rem; font-size:.8rem; color:var(--ink); }
  .chest-odds-note{ margin:0 0 .5rem; font-weight:700; opacity:.8; }
  .chest-odds-rarity{ display:flex; justify-content:space-between; font-size:.9rem; margin-top:.4rem; }
  .chest-odds-items{ line-height:1.6; opacity:.9; }
  .chest-odds-items em{ font-style:normal; font-weight:700; opacity:.75; }
  .elo-rank-block{
    display:block; text-align:left; width:100%; max-width:360px; margin:0 auto; box-sizing:border-box;
    background:rgba(255,255,255,.5); border:2px solid var(--gold-500); border-radius:14px; padding:.6rem .9rem; color:var(--ink);
  }
  .elo-rank-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
  .elo-rank-name{ font-weight:800; color:var(--ink); font-size:.95rem; }
  .elo-rank-value{ font-weight:700; color:var(--ink); opacity:.75; font-size:.8rem; }
  .elo-bar-fill{ background:linear-gradient(90deg, var(--pine-600), var(--pine-500)); }
  .elo-rank-block .xp-bar-label{ color:var(--ink); opacity:.75; }
  .vs-row{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1.4rem; }
  .vs-card{
    display:flex; flex-direction:column; align-items:center; gap:.25rem; width:180px; max-width:44vw;
    background:var(--snow); border:2px solid var(--gold-500); border-radius:16px; padding:1.1rem .8rem;
    box-shadow:0 10px 24px rgba(0,0,0,.25); animation:vsSlideIn .5s cubic-bezier(.34,1.56,.64,1);
  }
  .vs-row .vs-card:first-child{ animation-name:vsSlideInLeft; }
  .vs-row .vs-card:last-child{ animation-name:vsSlideInRight; }
  .vs-card-avatar{ font-size:2.6rem; line-height:1; }
  .vs-card-name{ font-weight:800; color:var(--ink); font-size:1rem; text-align:center; }
  .vs-card-level{ font-size:.78rem; font-weight:700; color:var(--ink); opacity:.75; }
  .vs-card-rank{ font-size:.72rem; font-weight:700; color:var(--pine-600); }
  .vs-badge{
    font-family:var(--font-display); font-weight:900; font-size:1.6rem; color:var(--ember); flex:none;
    animation:vsPulse 1s ease-in-out infinite;
  }
  @keyframes vsSlideInLeft{ from{ transform:translateX(-60px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
  @keyframes vsSlideInRight{ from{ transform:translateX(60px); opacity:0; } to{ transform:translateX(0); opacity:1; } }
  @keyframes vsPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }
  @media (max-width:640px){ .vs-card{ width:130px; padding:.8rem .5rem; } .vs-card-avatar{ font-size:2rem; } }
  .pseudo-title-badge{
    display:inline-block; font-size:.68em; font-weight:800; background:var(--gold-500); color:var(--pine-900);
    border-radius:999px; padding:.05rem .5rem; margin-left:.35rem; vertical-align:middle; white-space:nowrap;
  }
  button{ font:inherit; }
  button:disabled{ opacity:.45; cursor:not-allowed; }
  input{ font:inherit; }
  :focus-visible{ outline:3px solid var(--gold-300); outline-offset:2px; }

  #app{ position:relative; z-index:1; }

  #snow{ position:fixed; inset:0; z-index:0; pointer-events:none; mix-blend-mode:screen; }

  .corner{ position:fixed; top:0; width:220px; height:220px; pointer-events:none; z-index:1; }
  .corner-tl{ left:0; }
  .corner-tr{ right:0; transform:scaleX(-1); }
  .blob{ position:absolute; border-radius:50%; }
  .blob-a{ width:150px;height:150px; top:-50px;left:-50px; background:radial-gradient(circle at 30% 30%, var(--pine-500), var(--pine-800) 72%); }
  .blob-b{ width:96px;height:96px; top:34px;left:58px; background:radial-gradient(circle at 30% 30%, var(--pine-600), var(--pine-900) 72%); }
  .corner .berry{ position:absolute; width:12px;height:12px; border-radius:50%; background:var(--ember); box-shadow:0 2px 4px rgba(0,0,0,.4); }
  .corner .berry:nth-child(3){ top:64px; left:34px; }
  .corner .berry:nth-child(4){ top:78px; left:52px; }
  .star{ background:var(--gold-500); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)); }
  .corner .star{ position:absolute; top:6px; left:14px; width:28px; height:28px; }
  @media (max-width:700px){ .corner{ display:none; } }

  @keyframes twinkle{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.72; transform:scale(.9);} }
  .star, .crown-star{ animation:twinkle 3.4s ease-in-out infinite; }
  @media (prefers-reduced-motion:reduce){ .star,.crown-star,.speed-timer.timeup{ animation:none; } }

  /* ---- masthead ---- */
  .masthead{ display:flex; justify-content:center; padding:2.6rem 1rem 1.2rem; }
  .plaque-logo{
    position:relative;
    background:var(--parchment);
    border:3px solid var(--gold-500);
    border-radius:26px;
    padding:1.7rem 2.6rem 1.4rem;
    text-align:center;
    box-shadow:0 20px 44px rgba(0,0,0,.4);
    max-width:560px;
  }
  .plaque-logo::before{
    content:''; position:absolute; inset:8px; border:2px dashed var(--cranberry-700); border-radius:18px; pointer-events:none;
  }
  .crown-star{ position:absolute; top:-17px; left:50%; transform:translateX(-50%); width:32px; height:32px; }
  .eyebrow{ position:relative; display:block; font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--pine-600); }
  .quiz-title-input{
    position:relative; display:block; width:100%; margin:.35rem 0; font-family:var(--font-display); font-weight:800; color:var(--pine-800);
    font-size:clamp(1.5rem,6vw,3.1rem); line-height:1.03; text-align:center;
    background:transparent; border:2px dashed transparent; border-radius:10px; padding:.1rem .3rem;
    transition:border-color .15s ease, background .15s ease;
  }
  .quiz-title-input:hover{ border-color:var(--gold-500); }
  .quiz-title-input:focus{ outline:none; border-color:var(--gold-500); background:rgba(255,255,255,.5); }
  .tagline{ position:relative; margin:0; font-weight:700; color:var(--ember); font-size:.95rem; }
  .visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .theme-select-wrap{ position:relative; display:block; margin-top:.8rem; }
  .theme-select{
    font-family:var(--font-body); font-weight:700; font-size:.78rem; color:var(--ink);
    background:var(--snow); border:2px solid var(--gold-500); border-radius:999px;
    padding:.35rem 1.6rem .35rem .9rem; cursor:pointer; appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size:5px 5px; background-repeat:no-repeat;
  }
  .theme-select:focus{ outline:2px solid var(--gold-500); outline-offset:2px; }
  .profile-overlay{
    position:fixed; top:10px; left:10px; z-index:55; display:flex; align-items:flex-start; gap:.55rem;
    background:var(--snow); border:2px solid var(--gold-500); border-radius:20px; padding:.4rem .8rem .4rem .4rem;
    box-shadow:0 10px 24px rgba(0,0,0,.35); font-family:var(--font-body); text-align:left;
    transition:transform .15s ease, background .15s ease; max-width:min(240px,64vw);
  }
  .profile-overlay:hover{ transform:translateY(-2px); background:rgba(255,248,234,.9); }
  .profile-overlay[hidden]{ display:none; }
  .profile-avatar{
    position:relative; width:32px; height:32px; border-radius:50%; background:var(--pine-800); color:var(--snow); border:none;
    display:flex; align-items:center; justify-content:center; font-size:.95rem; flex:none; cursor:pointer; padding:0; margin-top:.15rem;
  }
  .profile-info{ display:flex; flex-direction:column; gap:.22rem; min-width:0; background:transparent; border:none; cursor:pointer; padding:0; text-align:left; font-family:var(--font-body); }
  .profile-name{ font-weight:800; font-size:.76rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-meta{ display:block; font-size:.62rem; font-weight:700; color:var(--pine-800); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:.1rem 0; }
  .profile-xp-bar{ display:block; width:100px; max-width:100%; height:6px; border-radius:999px; background:var(--parchment-dim); overflow:hidden; }
  .profile-coins{ display:block; font-size:.68rem; font-weight:800; color:var(--gold-500); margin-top:.15rem; }
  .profile-xp-fill{ display:block; height:100%; background:linear-gradient(90deg, var(--gold-500), var(--gold-300)); border-radius:999px; transition:width .4s ease; }
  body.play-mode .profile-overlay{ top:4px; left:4px; padding:.3rem .6rem .3rem .3rem; }
  @media (max-width:640px){ .profile-overlay{ max-width:min(190px,54vw); } .profile-xp-bar{ width:70px; } }
  .achievements-badge{
    position:fixed; top:100px; left:10px; z-index:54; background:var(--snow); border:2px solid var(--gold-500);
    border-radius:999px; padding:.4rem .8rem; font-size:.72rem; font-weight:800; color:var(--ink); cursor:pointer;
    box-shadow:0 8px 18px rgba(0,0,0,.25); font-family:inherit;
  }
  .achievements-badge[hidden]{ display:none; }
  body.play-mode .achievements-badge{ top:60px; }
  @media (max-width:640px){ .achievements-badge{ top:92px; font-size:.66rem; padding:.35rem .65rem; } }
  .missions-badge{ top:140px; }
  .missions-badge.all-done{ border-color:#2e8b3d; }
  body.play-mode .missions-badge{ top:100px; }
  @media (max-width:640px){ .missions-badge{ top:126px; } }

  .avatar-picker-panel{
    position:absolute; top:calc(100% + 8px); left:0; width:min(340px,88vw);
    background:var(--parchment); border:2px solid var(--gold-500); border-radius:16px;
    box-shadow:0 16px 36px rgba(0,0,0,.4); overflow:hidden;
    max-height:min(520px,75vh); overflow-y:auto;
  }
  .avatar-picker-panel[hidden]{ display:none; }
  .avatar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; padding:.7rem; }
  .avatar-option{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
    background:var(--snow); border:2px solid var(--parchment-dim); border-radius:12px; padding:.5rem .3rem; cursor:pointer;
    font-family:var(--font-body); width:100%; box-sizing:border-box;
  }
  .avatar-option:hover{ border-color:var(--gold-500); }
  .avatar-option.active{ border-color:var(--pine-600); background:rgba(47,107,74,.15); }
  .avatar-option-wrap{ position:relative; width:100%; }
  /* rareté des skins en vente : contour + étiquette (couleurs identiques aux coffres) */
  .avatar-option[data-rarity]{ padding-top:.85rem; }
  .avatar-option[data-rarity]::before{
    content:attr(data-rarity-label); position:absolute; top:3px; left:50%; transform:translateX(-50%);
    font-size:.52rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; line-height:1;
    padding:.12rem .38rem; border-radius:999px; color:#fff; background:var(--rar); white-space:nowrap;
  }
  .avatar-option[data-rarity="commun"]{ --rar:#6b7280; border-color:#b7bcc4; }
  .avatar-option[data-rarity="rare"]{ --rar:#1f6fd1; border-color:#7fb0ec; }
  .avatar-option[data-rarity="epique"]{ --rar:#8b3fd1; border-color:#c19ae6; }
  .avatar-option[data-rarity="legendaire"]{ --rar:#c28a00; border-color:#e8c25a; box-shadow:0 0 8px rgba(232,194,90,.45); }
  .avatar-option.locked[data-rarity]{ opacity:.7; }
  .avatar-option.active[data-rarity]{ border-color:var(--pine-600); }
  /* bouton d'aperçu des fonds : en bas à droite, pour ne pas cacher l'étiquette de rareté */
  .avatar-option-wrap .bg-preview-btn{ top:auto; bottom:-6px; right:-6px; width:24px; height:24px; font-size:.68rem; z-index:1; box-shadow:0 2px 6px rgba(0,0,0,.3); }
  .rarity-legend{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; justify-content:center; margin:0 0 .8rem; font-size:.72rem; font-weight:800; }
  .rarity-legend span{ color:#fff; border-radius:999px; padding:.2rem .6rem; }
  .chest-result-cat{
    display:block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    color:var(--gold-600,#b8860b); margin-bottom:.15rem;
  }
  .bg-preview-btn{
    position:absolute; top:2px; right:2px; width:28px; height:28px; border-radius:50%; border:none;
    background:rgba(0,0,0,.55); color:var(--snow); font-size:.78rem; display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0; line-height:1;
  }
  .bg-preview-btn:hover{ background:var(--pine-800); }
  .bg-preview-banner{
    display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
    background:rgba(255,255,255,.5); border:2px dashed var(--gold-500); border-radius:12px;
    padding:.5rem .8rem; margin:.6rem 0 1rem; font-size:.82rem; font-weight:700; color:var(--ink);
  }
  .avatar-option.locked{ opacity:.45; cursor:not-allowed; }
  .avatar-option-emoji{ font-size:1.5rem; }
  .avatar-option-name{ font-size:.6rem; font-weight:700; color:var(--ink-soft); text-align:center; line-height:1.1; }
  .avatar-lock{ font-size:.6rem; font-weight:800; color:var(--ink-soft); }
  .profile-panel-body{ padding:.8rem .9rem 1rem; }
  .profile-panel-top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.3rem; }
  .profile-panel-avatar-wrap{
    display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%;
    flex:none; box-sizing:border-box; border:3px solid transparent; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .profile-panel-avatar{ font-size:2.2rem; line-height:1; }
  .profile-panel-name{ font-weight:800; color:var(--ink); font-size:1rem; }
  .profile-panel-level{ font-size:.78rem; color:var(--ink-soft); font-weight:700; }
  .season-medal{
    display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #fff, var(--medal-color,#cd7f32) 60%);
    border:2px solid var(--medal-color,#cd7f32); color:#2b2015; font-size:.62rem; font-weight:900; flex:none;
    box-shadow:0 2px 6px rgba(0,0,0,.35); margin:0 .1rem;
  }
  .season-medal:empty{ display:none; margin:0; width:0; }
  /* cadres de profil (images) : posés par-dessus l'avatar, 1,5 fois sa taille (l'anneau tombe sur le bord de l'avatar) */
  .has-frame{ position:relative; }
  .has-frame::after{
    content:''; position:absolute; inset:-25%; pointer-events:none; z-index:1;
    background:var(--frame-img) center / contain no-repeat;
  }
  /* avatar des autres joueurs avec leur cadre (classements, Ranked, salon, chat) : l'avatar devient rond */
  .avatar-framed{ display:inline-block; line-height:1; vertical-align:middle; margin:.15em; }
  .avatar-framed .avatar-img{ display:block; border-radius:50%; object-fit:cover; }
  .profile-avatar .chat-badge{ z-index:2; }
  .profile-avatar .avatar-img{ width:32px; height:32px; border-radius:50%; object-fit:cover; display:block; }
  .profile-panel-avatar-wrap .avatar-img{ width:46px; height:46px; }
  .frame-preview{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:1.35em; height:1.35em; margin:.25em; border-radius:50%; background:var(--pine-800); }
  .frame-preview-avatar{ font-size:.8em; line-height:1; }
  .frame-preview-avatar .avatar-img{ width:1.6em; height:1.6em; }
  .frame-thumb{ width:1.5em; height:1.5em; }
  .profile-stat-row{
    display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8rem; font-weight:700;
    color:var(--ink); background:var(--snow); border-radius:10px; padding:.5rem .7rem; margin-top:.5rem;
  }
  .profile-panel-subtitle{ font-family:var(--font-display); color:var(--pine-800); font-size:.9rem; margin:1rem 0 .3rem; }
  .profile-coins-row{ background:rgba(201,151,62,.18); border:1px solid var(--gold-500); }
  .profile-panel-soon{ font-size:.76rem; color:var(--ink-soft); opacity:.65; font-style:italic; margin:0 0 .4rem; }
  /* onglets du profil : barre collée en haut du panneau pendant le défilement */
  .profile-tabs{
    position:sticky; top:0; z-index:3; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.3rem;
    margin:.7rem -.9rem 0; padding:.45rem .9rem; background:var(--parchment); border-bottom:2px solid var(--parchment-dim);
  }
  .profile-tab{
    border:2px solid var(--parchment-dim); background:var(--snow); color:var(--ink); border-radius:10px;
    padding:.4rem .15rem; font-family:var(--font-body); font-size:.7rem; font-weight:800; cursor:pointer; white-space:nowrap;
  }
  .profile-tab:hover{ border-color:var(--gold-500); }
  .profile-tab.active{ background:var(--pine-600); border-color:var(--pine-600); color:var(--snow); }
  /* 5 onglets sur 2 lignes : 3 en haut (Stats, Passe, Skins), 2 en bas (Amis, Compte), sur toute la largeur */
  .profile-tab{ grid-column:span 2; overflow:hidden; text-overflow:ellipsis; }
  .profile-tab:nth-child(n+4){ grid-column:span 3; }
  .pass-tab-count{ display:inline-block; min-width:1.2em; padding:0 .3em; border-radius:999px; background:var(--ember); color:var(--snow); font-size:.62rem; line-height:1.4; }
  /* Passe de niveaux (onglet du profil) */
  .pass-head{ display:grid; gap:.4rem; background:var(--snow); color:var(--ink); border-radius:12px; padding:.6rem .7rem; margin-top:.5rem; }
  .pass-head-title{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; font-weight:800; font-size:.9rem; }
  .pass-head-level{ font-size:.75rem; color:var(--pine-600); }
  .pass-head-hint{ margin:0; font-size:.72rem; color:var(--ink-soft); }
  .pass-list{ display:grid; gap:.35rem; margin-top:.5rem; }
  .pass-row{ display:grid; grid-template-columns:3.2rem 1fr auto; align-items:center; gap:.5rem; background:var(--snow); color:var(--ink); border:2px solid var(--parchment-dim); border-radius:10px; padding:.4rem .55rem; font-size:.76rem; font-weight:700; }
  .pass-row.ready{ border-color:var(--gold-500); box-shadow:0 0 0 2px rgba(201,151,62,.25); }
  .pass-row.done{ opacity:.6; }
  .pass-row.locked{ opacity:.75; }
  .pass-level{ font-weight:900; color:var(--pine-600); }
  .pass-reward{ display:grid; gap:.15rem; min-width:0; }
  .pass-reward-item{ display:flex; align-items:center; gap:.35rem; overflow-wrap:anywhere; }
  .pass-reward-icon{ flex:none; font-size:1.1rem; line-height:1; }
  .pass-reward-icon .avatar-img{ width:1.4em; height:1.4em; }
  .pass-row .pass-claim-btn{ padding:.35rem .7rem; font-size:.74rem; min-height:0; }
  .pass-done{ color:var(--pine-600); font-size:.7rem; white-space:nowrap; }
  .pass-locked{ font-size:.9rem; }
  .pass-choice{ grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; padding-top:.3rem; border-top:1px dashed var(--parchment-dim); }
  .pass-choice-btn{ display:inline-flex; align-items:center; gap:.3rem; font:800 .72rem var(--font-body); background:var(--parchment); color:var(--ink); border:2px solid var(--gold-500); border-radius:999px; padding:.2rem .6rem; cursor:pointer; }
  .pass-choice-btn .frame-thumb{ width:1.6em; height:1.6em; }
  .profile-tab-pane{ padding-top:.3rem; }
  .profile-tab-pane[hidden], .avatar-grid[hidden]{ display:none; }
  .profile-skin-tabs{ display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center; margin:.7rem 0 .2rem; }
  .profile-skin-tab{
    border:2px solid var(--parchment-dim); background:var(--snow); color:var(--ink); border-radius:999px;
    padding:.25rem .6rem; font-family:var(--font-body); font-size:.7rem; font-weight:800; cursor:pointer;
  }
  .profile-skin-tab:hover{ border-color:var(--gold-500); }
  .profile-skin-tab.active{ background:var(--gold-500); border-color:var(--gold-500); color:#3b0d13; }
  .profile-skin-coins{ text-align:center; font-size:.74rem; font-weight:700; color:var(--ink-soft); margin:.45rem 0 0; }
  .profile-tab-pane[data-pane="skins"] .avatar-grid{ padding:.6rem 0 0; }
  .profile-panel-actions{ margin-top:1rem; display:flex; flex-direction:column; align-items:stretch; gap:.5rem; }
  .profile-panel-actions .btn-ghost{ width:100%; text-align:center; }
  .pseudo-form{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:1.2rem; }
  .pseudo-or{ text-align:center; font-size:.78rem; color:var(--ink-soft); opacity:.7; margin:1.1rem 0 0; font-weight:700; }
  .lobby-toggle-row{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.85rem; color:var(--ink); margin-top:.7rem; cursor:pointer; }
  .lobby-toggle-row input{ width:auto; }
  .xp-bar-wrap{ max-width:320px; margin:.6rem auto 1.2rem; }
  .xp-bar-label{ font-size:.8rem; font-weight:800; color:var(--pine-800); margin-bottom:.3rem; text-align:center; }
  .xp-bar-sub{ font-weight:600; color:var(--ink-soft); opacity:.75; }
  .xp-bar{ height:10px; border-radius:999px; background:var(--parchment-dim); overflow:hidden; border:1px solid var(--gold-500); }
  .xp-bar-fill{ height:100%; background:linear-gradient(90deg, var(--gold-500), var(--gold-300)); border-radius:999px; transition:width .4s ease; }
  .pseudo-input{ font-size:1rem; padding:.7rem 1rem; border-radius:12px; border:2px solid var(--parchment-dim); min-width:220px; font-family:var(--font-body); }

  /* ---- step nav ---- */
  .steps{ display:flex; justify-content:center; gap:clamp(.6rem,3vw,1.6rem); margin:.4rem auto 2.2rem; flex-wrap:wrap; padding:0 1rem; }
  .step-tab{
    position:relative; background:var(--parchment); color:var(--ink); border:2px solid var(--gold-500); border-radius:10px;
    padding:.6rem 1.05rem .55rem; font-weight:800; font-size:.82rem; letter-spacing:.02em; cursor:pointer;
    box-shadow:0 8px 16px rgba(0,0,0,.28); transform:rotate(var(--tilt,0deg)); transition:transform .15s ease, background .15s ease;
  }
  .step-tab::before{ content:''; position:absolute; top:-13px; left:50%; width:2px; height:13px; background:var(--gold-500); }
  .step-tab:nth-child(odd){ --tilt:-2deg; }
  .step-tab:nth-child(even){ --tilt:2deg; }
  .step-tab.active{ background:var(--ember); color:var(--snow); border-color:var(--gold-300); transform:translateY(-3px) rotate(0deg); }
  .step-tab:hover{ transform:translateY(-2px) rotate(0deg); }

  main{ padding:0 1rem; }

  /* ---- panel (plaque crème) ---- */
  .panel{
    position:relative; max-width:980px; margin:0 auto 3rem; background:var(--parchment); border:3px solid var(--gold-500);
    border-radius:24px; padding:clamp(1.2rem,4vw,2.4rem); box-shadow:0 22px 50px rgba(0,0,0,.38); color:var(--ink);
  }
  .panel::before{ content:''; position:absolute; inset:9px; border:2px dashed var(--cranberry-700); border-radius:16px; pointer-events:none; }
  .panel > *{ position:relative; }
  .panel-title{ font-family:var(--font-display); font-weight:800; color:var(--pine-800); font-size:clamp(1.5rem,3.4vw,2rem); margin:0 0 .4rem; text-wrap:balance; }
  .panel-lead{ margin:0 0 1.4rem; max-width:62ch; color:var(--ink-soft); font-weight:600; line-height:1.55; }
  .panel-actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.6rem; }

  .btn{ border:none; border-radius:12px; padding:.7rem 1.2rem; font-weight:800; font-size:.9rem; cursor:pointer; }
  .btn-primary{ background:var(--ember); color:var(--snow); }
  .btn-primary:hover{ background:var(--ember-dark); }
  .btn-gold{ background:var(--gold-500); color:var(--ink); }
  .btn-gold:hover{ background:var(--gold-300); }
  .btn-ghost{ background:transparent; border:2px solid var(--gold-500); color:var(--snow); font-weight:800; border-radius:12px; padding:.6rem 1.1rem; cursor:pointer; font-size:.85rem; }
  .btn-ghost.danger{ border-color:var(--ember); color:var(--ember-light); }
  .btn-ghost.on-light{ color:var(--ink); border-color:var(--pine-600); }
  .btn-ghost.on-light:hover{ background:rgba(0,0,0,.05); }
  .solo-pills{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.1rem; align-items:center; }
  .solo-abandon-btn{
    background:transparent; border:2px solid rgba(220,90,90,.6); color:#ff9a9a; font-weight:800; font-size:.68rem;
    border-radius:999px; padding:.25rem .65rem; cursor:pointer; font-family:inherit; margin:0;
  }
  .solo-abandon-btn:hover{ background:rgba(220,90,90,.15); }
  .solo-chip{ display:inline-flex; align-items:center; background:rgba(255,248,234,.12); border:2px solid var(--gold-500); border-radius:999px; padding:.35rem .95rem; font-weight:800; font-size:.85rem; color:var(--snow); }
  .solo-pick-list{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:1rem 0; }
  .solo-pick-btn{ background:var(--snow); color:var(--ink); border:2px solid var(--gold-500); border-radius:12px; padding:.65rem 1rem; cursor:pointer; font-weight:700; font-family:var(--font-body); font-size:.9rem; }
  .solo-pick-btn:hover{ border-color:var(--pine-600); }
  .panel-order-list{ list-style:none; margin:0 auto 1rem; padding:0; max-width:440px; text-align:left; }
  .panel-order-list li{ background:rgba(255,248,234,.1); border:2px solid var(--gold-500); border-radius:10px; padding:.55rem .9rem; margin-bottom:.4rem; font-weight:700; }
  .panel-order-list .empty-hint{ background:transparent; border-style:dashed; opacity:.75; font-weight:600; }
  .order-rank{ display:inline-block; min-width:20px; font-weight:800; color:var(--gold-300); }
  .daily-leaderboards-row{ display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center; margin-top:1.8rem; padding-top:1.4rem; border-top:2px dashed var(--parchment-dim); }
  .daily-leaderboard{ flex:1 1 280px; min-width:220px; max-width:420px; }
  .daily-leaderboard h3{ font-family:var(--font-display); color:var(--pine-800); font-size:1.05rem; margin:0 0 .3rem; }
  .daily-leaderboard-hint{ font-size:.76rem; color:var(--ink-soft); opacity:.8; margin:0; }
  .btn-ghost-inline{ background:transparent; border:2px dashed var(--pine-600); color:var(--pine-800); font-weight:800; border-radius:10px; padding:.45rem .85rem; cursor:pointer; font-size:.84rem; margin-top:.7rem; }

  .icon-btn{
    width:28px; height:28px; border-radius:50%; border:2px solid var(--cranberry-700); background:var(--snow); color:var(--cranberry-700);
    font-weight:800; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; line-height:1; flex:none;
  }
  .icon-btn:hover{ background:var(--cranberry-700); color:var(--snow); }

  input[type=text], input[type=number], select{
    font-family:var(--font-body); border:2px solid var(--parchment-dim); background:var(--snow); border-radius:10px;
    padding:.5rem .7rem; font-size:.92rem; color:var(--ink); width:100%;
  }

  /* ---- équipes ---- */
  .team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; }
  .team-card{ background:var(--snow); border:2px solid var(--team-color, var(--gold-500)); border-radius:16px; padding:1rem; }
  .team-card-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
  .team-dot{ width:14px; height:14px; border-radius:50%; flex:none; }
  .team-name{ font-weight:800; }
  .team-players{ display:grid; gap:.5rem; margin-bottom:.7rem; }
  .player-row{ display:flex; gap:.4rem; align-items:center; }
  /* partie en ligne : joueurs ayant rejoint l'équipe */
  .joined-player{ background:var(--snow); border:1px solid var(--parchment-dim); border-radius:10px; padding:.35rem .55rem; }
  .joined-player .avatar-img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
  .you-tag{ margin-left:auto; background:var(--pine-600); color:var(--snow); border-radius:999px; padding:.05rem .5rem; font-size:.66rem; font-weight:800; }
  .team-empty{ margin:0; font-size:.8rem; font-style:italic; color:var(--ink-soft); opacity:.75; }
  .team-joined-tag{ justify-self:start; font-size:.8rem; font-weight:800; color:var(--pine-600); }
  .team-join-btn{ justify-self:start; font-weight:800; }
  .team-count{ display:block; font-size:.72rem; font-weight:800; color:var(--ink-soft); }
  .team-count.full{ color:var(--ember); }
  .team-full-tag{ justify-self:start; font-size:.8rem; font-weight:800; color:var(--ember); }
  .lobby-waiting-line{ text-align:center; font-size:.85rem; font-weight:700; color:var(--ink); background:rgba(201,151,62,.14); border-radius:10px; padding:.45rem .8rem; margin:.2rem auto .8rem; max-width:560px; }
  .player-row input{ flex:1; }
  .swatches{ display:flex; gap:.4rem; flex-wrap:wrap; }
  .swatch{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
  .swatch.active{ border-color:var(--ink); box-shadow:0 0 0 2px var(--snow) inset; }

  /* ---- manches ---- */
  .rounds-list{ display:grid; gap:1.2rem; }
  .rounds-list.blurred .questions-list input,
  .rounds-list.blurred .questions-list textarea{ filter:blur(5px); transition:filter .15s ease; }
  .rounds-list.blurred .questions-list input:focus,
  .rounds-list.blurred .questions-list textarea:focus{ filter:none; }
  .round-card{ background:var(--snow); border:2px solid var(--parchment-dim); border-radius:18px; padding:1.1rem 1.2rem; }
  .round-head{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
  .round-num{
    width:30px; height:30px; border-radius:50%; background:var(--pine-600); color:var(--snow); font-weight:800;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .round-title{ font-weight:800; flex:1 1 180px; }
  .round-theme{ flex:1 1 180px; }
  .round-pts-label{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
  .round-pts-label input{ width:60px; }
  .round-type{ flex:0 0 auto; min-width:160px; font-weight:700; }
  .round-hint{ font-size:.82rem; color:var(--ink-soft); font-style:italic; margin:-.4rem 0 .8rem; }
  .round-gen{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; background:var(--snow); border:2px dashed var(--parchment-dim); border-radius:12px; padding:.55rem .7rem; margin:0 0 .9rem; }
  .round-gen-label{ font-size:.8rem; font-weight:800; color:var(--ink-soft); }
  .round-gen-difficulty{ font-size:.82rem; padding:.3rem .5rem; }
  .round-gen-count{ width:56px; font-size:.82rem; padding:.3rem .4rem; }
  .questions-list{ display:grid; gap:.55rem; margin-bottom:.3rem; }
  .empty-hint{ color:var(--ink-soft); font-style:italic; font-size:.88rem; margin:.2rem 0; }
  .question-row{ display:grid; grid-template-columns:1.4rem 1fr 1fr 4.4rem 1.8rem; gap:.5rem; align-items:center; }
  .q-num{ color:var(--ink-soft); font-weight:700; font-size:.85rem; }
  @media (max-width:640px){ .question-row{ grid-template-columns:1fr; } .q-num{ display:none; } }

  .panel-question{ background:var(--snow); border:2px dashed var(--parchment-dim); border-radius:14px; padding:.8rem .9rem; }
  .panel-question-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
  .panel-question-head .q-text{ flex:1; }
  .panel-items{ display:grid; gap:.5rem; margin:0 0 .6rem 1.9rem; }
  .panel-item-row{ display:grid; grid-template-columns:1.4rem 1fr 4.4rem 1.8rem; gap:.5rem; align-items:center; }
  @media (max-width:640px){ .panel-item-row{ grid-template-columns:1fr; } .panel-item-row .q-num{ display:none; } }

  .speed-heat{ background:var(--snow); border:2px dashed var(--parchment-dim); border-radius:14px; padding:.8rem .9rem; }
  .speed-heat-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.6rem; }
  .speed-heat-head input[type=text]{ flex:1 1 140px; }
  .speed-heat-head select{ flex:0 0 auto; min-width:140px; width:auto; }
  .speed-item-row{ display:grid; grid-template-columns:1.4rem 1fr 1fr 1.8rem; gap:.5rem; align-items:center; }
  @media (max-width:640px){ .speed-item-row{ grid-template-columns:1fr; } .speed-item-row .q-num{ display:none; } }

  .chain-question{ background:var(--snow); border:2px dashed var(--parchment-dim); border-radius:14px; padding:.8rem .9rem; }
  .chain-question-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
  .chain-question-head .q-text{ flex:1; }
  .chain-ranks{ display:flex; gap:.6rem; flex-wrap:wrap; margin-left:1.9rem; }
  .chain-rank-input{ display:flex; align-items:center; gap:.35rem; font-size:.8rem; font-weight:700; color:var(--ink-soft); }
  .chain-rank-input input{ width:56px; }

  .duel-row{ display:grid; grid-template-columns:1.4rem 1fr 1.6fr 1fr 1.8rem; gap:.5rem; align-items:center; }
  @media (max-width:640px){ .duel-row{ grid-template-columns:1fr; } .duel-row .q-num{ display:none; } }

  /* ---- jeu / scène ---- */
  .stage-wrap{ max-width:1400px; margin:0 auto 2rem; display:grid; grid-template-columns:1fr 300px; gap:1.2rem; align-items:start; }
  .stage-main{ display:grid; gap:1rem; min-width:0; }
  @media (max-width:900px){
    .stage-wrap{ grid-template-columns:1fr; }
    .mini-board{ order:-1; }
    body.play-mode .stage-wrap{ grid-template-rows:auto minmax(0,1fr); }
    body.play-mode .mini-board{ height:auto; max-height:26vh; }
  }
  .round-tabs{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
  .round-tab{
    background:rgba(255,248,234,.08); border:2px solid var(--gold-500); color:var(--snow); border-radius:999px;
    padding:.5rem 1rem; font-weight:800; font-size:.82rem; cursor:pointer;
  }
  .round-tab .count{ opacity:.75; font-weight:700; }
  .round-tab.active{ background:var(--gold-500); color:var(--ink); }

  /* ---- jeu : tient sur un seul écran, sans défiler ---- */
  body.play-mode{ height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
  body.play-mode #app{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  body.play-mode .masthead{ display:none; }
  body.play-mode .steps{ margin:.5rem auto .6rem; flex:0 0 auto; }
  body.play-mode main{ flex:1 1 auto; min-height:0; display:flex; }
  body.play-mode #stepContent{ flex:1 1 auto; min-height:0; width:100%; display:flex; }
  body.play-mode .stage-wrap{ flex:1 1 auto; min-height:0; width:100%; margin:0 auto; grid-template-rows:minmax(0,1fr); align-items:stretch; }
  body.play-mode .stage-main{ display:flex; flex-direction:column; min-height:0; }
  body.play-mode .round-tabs{ flex:0 0 auto; }
  body.play-mode .stage-panel{ flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
  body.play-mode .mini-board{ height:100%; min-height:0; overflow-y:auto; scrollbar-width:none; -ms-overflow-style:none; }
  body.play-mode .stage-panel::-webkit-scrollbar,
  body.play-mode .mini-board::-webkit-scrollbar{ display:none; width:0; height:0; }
  body.play-mode .app-footer{ flex:0 0 auto; padding:.4rem 1rem .6rem; }
  body.play-mode .legal-note{ display:none; }

  .stage-panel{
    position:relative; background:linear-gradient(160deg, var(--pine-800), var(--pine-900)); border:3px solid var(--gold-500);
    border-radius:24px; padding:clamp(1.3rem,4vw,2.6rem); color:var(--snow); box-shadow:0 22px 50px rgba(0,0,0,.42);
    text-align:center;
  }
  .stage-empty{ display:grid; gap:1rem; justify-items:center; padding:2rem 0; }
  .q-pills{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.1rem; }
  .q-pill{
    width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,248,234,.4); background:transparent; color:var(--snow);
    font-weight:800; cursor:pointer;
  }
  .q-pill.active{ background:var(--gold-500); color:var(--ink); border-color:var(--gold-500); }
  .q-pill.scored{ box-shadow:0 0 0 2px var(--ember) inset; }
  .stage-kicker{ text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:800; color:var(--gold-300); margin-bottom:.7rem; }
  .stage-question{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,4vw,2.3rem); line-height:1.25; text-wrap:balance; margin:0 auto 1.2rem; max-width:38ch; }
  .stage-controls{ display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:.9rem; }
  .stage-pts{ font-weight:700; color:var(--gold-300); }
  .stage-answer{
    display:inline-block; margin:0 auto 1.2rem; background:rgba(255,248,234,.1); border:2px solid var(--gold-300); border-radius:12px;
    padding:.7rem 1.2rem; font-weight:700; font-size:1.05rem;
    animation:popIn .35s ease;
  }
  .guess-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.7rem; margin:0 auto 1.3rem; max-width:760px; }
  .guess-row{ display:flex; align-items:center; gap:.5rem; background:rgba(255,248,234,.06); border:2px solid rgba(255,248,234,.25); border-radius:12px; padding:.5rem .7rem; text-align:left; }
  .guess-row .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
  .guess-name{ font-weight:700; font-size:.82rem; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--snow); }
  .guess-input{ width:90px; text-align:right; flex:none; }
  .closest-badge{ font-size:.68rem; font-weight:800; color:var(--gold-300); white-space:nowrap; flex:none; }
  .credit-row{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.4rem; }
  .credit-row.small{ margin:.5rem 0 0; gap:.4rem; }
  .credit-chip.small{ padding:.3rem .7rem; font-size:.74rem; }

  .panel-list{ display:grid; gap:.6rem; max-width:640px; margin:0 auto 1.3rem; text-align:left; }
  .panel-row-main{
    width:100%; display:flex; align-items:center; gap:.9rem; background:rgba(255,248,234,.08); border:2px solid rgba(255,248,234,.3);
    border-radius:12px; padding:.7rem 1.1rem; cursor:pointer; font-family:var(--font-body); color:var(--snow);
  }
  .panel-row.revealed .panel-row-main{ background:var(--gold-300); border-color:var(--gold-300); color:var(--ink); cursor:default; }
  .panel-rank{
    width:24px; height:24px; border-radius:50%; background:rgba(255,248,234,.2); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.8rem; flex:none;
  }
  .panel-row.revealed .panel-rank{ background:var(--pine-800); color:var(--snow); }
  .panel-text{ flex:1; font-weight:800; letter-spacing:.02em; }
  .panel-pts{ font-weight:800; font-variant-numeric:tabular-nums; flex:none; }

  .speed-head{ display:flex; align-items:center; justify-content:center; gap:.9rem; margin-bottom:.6rem; flex-wrap:wrap; }
  .speed-team{
    display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,248,234,.1); border:2px solid var(--team-color,var(--gold-500));
    border-radius:999px; padding:.35rem .9rem; font-weight:800; font-size:.85rem;
  }
  .speed-team .dot{ width:10px; height:10px; border-radius:50%; }
  .speed-player{ font-weight:700; color:var(--gold-300); font-size:.9rem; }
  .speed-timer{
    font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,8vw,3.6rem); text-align:center; letter-spacing:.03em;
    font-variant-numeric:tabular-nums; margin:.2rem 0 .4rem; color:var(--snow); animation:none;
  }
  .speed-timer.timeup{ color:var(--ember-light); animation:pulse-timeup 1s ease-in-out infinite; }
  @keyframes pulse-timeup{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
  .speed-timeup-label{ text-align:center; font-weight:800; color:var(--ember-light); margin-bottom:.8rem; }
  .speed-score{ text-align:center; font-weight:700; color:var(--gold-300); margin:.6rem 0 1rem; font-size:.92rem; }
  .speed-list{ display:grid; gap:.5rem; max-width:640px; margin:0 auto; text-align:left; }
  .speed-row{
    display:flex; align-items:center; gap:.7rem; background:rgba(255,248,234,.06); border:2px solid rgba(255,248,234,.25);
    border-radius:10px; padding:.5rem .8rem; color:var(--snow);
  }
  .speed-row.correct{ background:var(--gold-300); border-color:var(--gold-300); color:var(--ink); }
  .speed-row .q-num{ opacity:.7; flex:none; font-weight:700; font-size:.8rem; }
  .speed-text{ flex:1; font-weight:700; }
  .speed-answer{ font-size:.78rem; opacity:.75; font-style:italic; flex:none; }
  .speed-row .icon-btn{ flex:none; }
  .speed-row.correct .icon-btn{ background:var(--pine-800); border-color:var(--pine-800); color:var(--snow); }

  .chain-theme{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,3.6vw,1.9rem); text-align:center; text-wrap:balance; margin-bottom:.5rem; }
  .chain-turn{ text-align:center; font-weight:700; color:var(--gold-300); margin-bottom:1rem; font-size:1rem; }
  .chain-winner{ text-align:center; font-family:var(--font-display); font-weight:800; color:var(--gold-300); font-size:1.3rem; margin-bottom:1rem; }
  .chain-list{ display:grid; gap:.5rem; max-width:560px; margin:0 auto 1.2rem; }
  .chain-row{
    width:100%; display:flex; align-items:center; gap:.7rem; background:rgba(255,248,234,.06); border:2px solid rgba(255,248,234,.25);
    border-radius:12px; padding:.6rem 1rem; cursor:pointer; font-family:var(--font-body); color:var(--snow); text-align:left;
  }
  .chain-row.current{ border-color:var(--gold-300); background:rgba(230,196,121,.16); }
  .chain-row.eliminated{ opacity:.5; cursor:default; }
  .chain-row .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
  .chain-name{ flex:1; font-weight:700; }
  .chain-status{ font-size:.72rem; font-weight:700; color:var(--ember-light); }
  .chain-pts{ font-weight:800; font-variant-numeric:tabular-nums; }

  .q-pill-add{ border-style:dashed; font-weight:800; }
  .life-bars{ display:grid; gap:.6rem; max-width:520px; margin:0 auto 1.2rem; }
  .life-bar-row{ display:grid; gap:.3rem; }
  .life-bar-label{ display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.85rem; color:var(--snow); }
  .life-bar-label .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
  .life-bar-value{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:800; }
  .life-bar-track{ height:14px; border-radius:999px; background:rgba(255,248,234,.12); border:2px solid rgba(255,248,234,.25); overflow:hidden; }
  .life-bar-fill{ height:100%; background:var(--team-color,var(--gold-500)); border-radius:999px; transition:width .4s ease; }
  .life-bar-row.dead .life-bar-label{ opacity:.6; }
  .duel-theme-display{
    font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,5vw,3rem); text-align:center; text-wrap:balance;
    color:var(--gold-300); margin:.3rem 0 1rem; line-height:1.1;
  }
  .duel-instruction{ text-align:center; color:var(--snow); opacity:.85; font-weight:700; font-size:.85rem; margin-bottom:.7rem; }
  .duel-team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; max-width:600px; margin:0 auto 1.2rem; }
  .duel-team-btn{
    display:flex; align-items:center; justify-content:center; gap:.5rem; background:rgba(255,248,234,.08); border:2px solid var(--team-color,var(--gold-500));
    border-radius:14px; padding:.9rem 1rem; font-weight:800; color:var(--snow); cursor:pointer; font-size:.95rem;
  }
  .duel-team-btn .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
  .duel-team-btn.loser{ background:var(--ember); border-color:var(--ember); color:var(--snow); }
  .duel-team-badge{ font-weight:800; font-variant-numeric:tabular-nums; }
  .duel-result{ text-align:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--gold-300); margin-bottom:.8rem; text-wrap:balance; }
  .credit-chip{
    display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,248,234,.06); border:2px solid rgba(255,248,234,.3);
    color:var(--snow); border-radius:999px; padding:.45rem .95rem; font-weight:700; cursor:pointer; font-size:.85rem;
  }
  .credit-chip .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
  .credit-chip.active{ background:var(--gold-300); border-color:var(--team-color); color:var(--ink); box-shadow:0 0 0 2px var(--team-color) inset; }
  .stage-nav{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

  .mini-board{ background:rgba(255,248,234,.06); border:2px solid var(--gold-500); border-radius:18px; padding:1rem 1.3rem; }
  .mini-board h3{ margin:0 0 .6rem; font-family:var(--font-display); font-size:1.05rem; color:var(--gold-300); }
  .mini-board ol{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
  .mini-board li{ display:flex; align-items:center; gap:.6rem; font-weight:700; }
  .mini-board .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
  .mini-board .mini-names{ display:flex; flex-direction:column; flex:1; min-width:0; }
  .mini-board .name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mini-board .players{ font-size:.7rem; font-weight:600; color:var(--gold-300); opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .mini-board .pts{ font-variant-numeric:tabular-nums; font-weight:800; flex:none; }

  /* ---- classement ---- */
  .board-panel .panel-title{ margin-bottom:1rem; }
  .podium{ display:flex; align-items:flex-end; justify-content:center; gap:1rem; margin-bottom:1.8rem; }
  .riser{ background:var(--pine-800); border:2px solid var(--gold-500); border-radius:14px 14px 0 0; color:var(--snow); text-align:center; padding:1rem .8rem .8rem; width:150px; transform-origin:bottom; animation:riserGrow .5s cubic-bezier(.34,1.56,.64,1); }
  .riser-1{ height:170px; background:linear-gradient(160deg, var(--pine-600), var(--pine-800)); order:2; }
  .riser-2{ height:130px; order:1; }
  .riser-3{ height:105px; order:3; }
  .riser-rank{ font-family:var(--font-display); font-weight:800; color:var(--gold-300); font-size:1.1rem; }
  .riser-name{ font-weight:800; margin:.3rem 0; border-top:3px solid var(--team-color,var(--gold-500)); padding-top:.3rem; text-wrap:balance; }
  .riser-score{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--gold-300); }

  .board-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
  .board-row{ display:flex; align-items:center; gap:.8rem; background:var(--snow); border:2px solid var(--parchment-dim); border-radius:14px; padding:.7rem 1rem; }
  .board-row.rank-1{ border-color:var(--gold-500); box-shadow:0 0 0 2px var(--gold-500) inset; }
  .board-row.rank-2{ border-color:var(--pine-600); }
  .board-row.rank-3{ border-color:var(--ember); }
  .rank-badge{
    width:28px; height:28px; border-radius:50%; background:var(--pine-800); color:var(--snow); font-weight:800; flex:none;
    display:flex; align-items:center; justify-content:center; font-size:.85rem;
  }
  .board-row .dot{ width:13px; height:13px; border-radius:50%; flex:none; }
  .board-names{ display:flex; flex-direction:column; flex:1; min-width:0; }
  .board-team{ font-weight:800; }
  .board-players{ font-size:.8rem; color:var(--ink-soft); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .board-adjust{ display:flex; align-items:center; gap:.5rem; }
  .board-score{ font-variant-numeric:tabular-nums; font-weight:800; font-size:1.15rem; min-width:2ch; text-align:center; }

  .app-footer{ display:flex; justify-content:center; gap:1rem; padding:1rem 1rem 3.2rem; flex-wrap:wrap; }
  .social-links{ display:flex; gap:.6rem; align-items:center; width:100%; justify-content:center; order:10; }
  .social-link{
    display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
    background:transparent; border:2px solid var(--gold-500); color:var(--snow); text-decoration:none;
    transition:transform .15s ease, background .15s ease, color .15s ease;
  }
  .social-link:hover{ background:rgba(255,248,234,.12); transform:translateY(-2px); color:var(--gold-300); }
  .legal-note{ width:100%; text-align:center; font-size:.7rem; line-height:1.5; color:var(--snow); opacity:.55; margin:.4rem 0 0; }
  .legal-links{ width:100%; text-align:center; font-size:.72rem; margin:.2rem 0 0; color:var(--snow); opacity:.7; }
  .legal-links a{ color:inherit; }
  body.play-mode .legal-links{ display:none; }
  .auth-legal{ max-width:320px; font-size:.74rem; line-height:1.45; text-align:center; color:var(--ink); opacity:.8; margin:.2rem 0; }
  .auth-legal a, .profile-legal-links a{ color:inherit; font-weight:800; }
  .profile-legal-links{ text-align:center; font-size:.74rem; color:var(--ink); opacity:.75; margin:.6rem 0 0; }

  /* ---- mode en ligne ---- */
  .shop-badge{
    position:fixed; top:10px; right:10px; z-index:50;
    background:linear-gradient(135deg,var(--gold-300),var(--gold-500)); color:var(--pine-900); border:2px solid var(--gold-500);
    border-radius:999px; padding:.5rem .95rem; font-family:var(--font-display); font-weight:800; font-size:.85rem;
    box-shadow:0 10px 24px rgba(0,0,0,.35); cursor:pointer; transition:transform .15s ease;
  }
  .shop-badge:hover{ transform:translateY(-2px); }
  .shop-badge[hidden]{ display:none; }
  .site-online-badge{ position:fixed; top:56px; right:16px; z-index:50; }
  .site-online-badge[hidden]{ display:none; }
  .site-online-trigger{
    display:flex; align-items:center; gap:.4rem; background:var(--snow); border:2px solid var(--gold-500);
    border-radius:999px; padding:.35rem .7rem; font-size:.72rem; font-weight:800; color:var(--ink);
    box-shadow:0 8px 18px rgba(0,0,0,.2); cursor:pointer; font-family:inherit;
  }
  .site-online-dot{ width:8px; height:8px; border-radius:50%; background:#3ecf6e; box-shadow:0 0 6px rgba(62,207,110,.8); flex:none; }
  .site-online-list-panel{
    position:absolute; top:calc(100% + 8px); right:0; width:220px; max-width:70vw; max-height:320px; overflow-y:auto;
    background:var(--snow); border:2px solid var(--gold-500); border-radius:14px; padding:.6rem .7rem;
    box-shadow:0 14px 30px rgba(0,0,0,.3); text-align:left;
  }
  .site-online-list-panel[hidden]{ display:none; }
  .site-online-list-row{ display:flex; align-items:center; gap:.4rem; padding:.3rem 0; font-size:.78rem; font-weight:700; color:var(--ink); }
  @media (max-width:640px){ .site-online-badge{ top:52px; } .site-online-trigger{ font-size:.66rem; padding:.3rem .55rem; } }
  .friend-online-dot{ width:8px; height:8px; border-radius:50%; background:#3ecf6e; box-shadow:0 0 5px rgba(62,207,110,.8); flex:none; display:inline-block; margin-right:.3rem; }
  .friend-offline-dot{ width:8px; height:8px; border-radius:50%; background:#bbb; flex:none; display:inline-block; margin-right:.3rem; }
  .friends-online-header{ font-size:.72rem; font-weight:700; color:var(--pine-600); margin:0 0 .4rem; }
  .global-leaderboard-sidebar{
    position:fixed; top:100px; right:0; width:250px; max-height:calc(100vh - 120px); overflow-y:auto;
    background:var(--snow); border:2px solid var(--gold-500); border-right:none; border-radius:16px 0 0 16px;
    box-shadow:-8px 8px 24px rgba(0,0,0,.2); z-index:45; padding:.7rem;
  }
  .global-leaderboard-sidebar[hidden]{ display:none; }
  .glb-tabs{ display:flex; gap:.3rem; margin-bottom:.6rem; }
  .glb-tab{
    flex:1; background:var(--parchment-dim); border:none; border-radius:8px; padding:.4rem .2rem;
    font-size:.68rem; font-weight:800; color:var(--ink); cursor:pointer; font-family:inherit;
  }
  .glb-tab.active{ background:var(--pine-600); color:var(--snow); }
  .glb-row{ display:flex; align-items:center; gap:.4rem; padding:.3rem .2rem; font-size:.76rem; font-weight:700; color:var(--ink); border-bottom:1px solid rgba(0,0,0,.06); }
  .glb-row:last-child{ border-bottom:none; }
  .glb-row.self{ background:rgba(47,107,74,.12); border-radius:8px; }
  .glb-rank{ flex:none; width:1.2rem; opacity:.7; }
  .glb-pseudo{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .glb-pseudo .pseudo-title-badge{ font-size:.62em; }
  .glb-score{ flex:none; font-weight:800; color:var(--pine-600); }
  @media (max-width:1180px){ .global-leaderboard-sidebar{ display:none; } }
  .theme-picker{ max-width:500px; margin:1.4rem auto 0; }
  .theme-search-box{ position:relative; }
  .theme-search-input{
    width:100%; box-sizing:border-box; font-size:.9rem; padding:.65rem 1rem; border-radius:999px;
    border:2px solid var(--gold-500); font-family:var(--font-body); background:var(--snow); color:var(--ink);
  }
  .theme-suggestions{
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20; max-height:220px; overflow-y:auto;
    background:var(--snow); border:2px solid var(--gold-500); border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.25);
    padding:.3rem;
  }
  .theme-suggestions[hidden]{ display:none; }
  .theme-suggestion-item{
    display:block; width:100%; text-align:left; background:none; border:none; padding:.5rem .7rem; border-radius:8px;
    font-size:.85rem; font-weight:700; color:var(--ink); cursor:pointer; font-family:inherit;
  }
  .theme-suggestion-item:hover{ background:rgba(47,107,74,.12); }
  .theme-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; justify-content:center; }
  .theme-chip{
    display:inline-flex; align-items:center; gap:.35rem; background:rgba(47,107,74,.15); border:2px solid var(--pine-600);
    border-radius:999px; padding:.3rem .5rem .3rem .8rem; font-size:.78rem; font-weight:700; color:var(--ink);
  }
  .theme-chip button{ background:none; border:none; cursor:pointer; font-weight:800; color:var(--ink); font-size:.85rem; line-height:1; padding:.1rem .2rem; }
  .theme-chip-empty{ font-size:.78rem; font-weight:600; color:var(--ink-soft); opacity:.75; font-style:italic; }
  @media (max-width:640px){ .shop-badge{ font-size:.72rem; padding:.4rem .7rem; } }
  .online-badge{
    position:fixed; top:10px; right:10px; z-index:50;
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; max-width:min(320px,60vw);
    background:var(--snow); color:var(--ink); border:2px solid var(--gold-500); border-radius:16px;
    padding:.45rem .7rem; font-size:.74rem; font-weight:700; box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  .online-badge .btn-ghost.small{ padding:.3rem .6rem; font-size:.68rem; border-radius:999px; }
  .online-badge[hidden]{ display:none; }
  .invite-banner{
    position:fixed; top:64px; left:10px; z-index:56; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    background:var(--snow); color:var(--ink); border:2px solid var(--gold-500); border-radius:14px; padding:.5rem .8rem;
    box-shadow:0 10px 24px rgba(0,0,0,.35); font-size:.8rem; font-weight:700; max-width:min(320px,80vw);
  }
  .ranked-challenge-banner{ top:122px; border-color:var(--ember); }
  .ranked-history-list{ max-width:560px; margin:.6rem auto 0; display:flex; flex-direction:column; gap:.4rem; }
  .ranked-history-row{
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:var(--snow); border:2px solid var(--gold-500);
    border-radius:10px; padding:.5rem .8rem; font-size:.8rem; font-weight:700; color:var(--ink);
  }
  .ranked-history-row.win{ border-color:#4caf6a; }
  .ranked-history-row.loss{ border-color:var(--ember); }
  .ranked-history-label{ flex:none; min-width:70px; }
  .ranked-history-score{ flex:none; font-variant-numeric:tabular-nums; }
  .ranked-history-opp{ flex:1; min-width:100px; opacity:.85; }
  .ranked-history-elo{ flex:none; }
  .ranked-history-date{ flex:none; font-size:.72rem; opacity:.65; }
  .verify-notice{
    background:rgba(201,151,62,.16); border:2px solid var(--gold-500); border-radius:10px; padding:.5rem .7rem;
    font-size:.78rem; font-weight:700; color:var(--ink); margin-bottom:.6rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  }
  .ban-banner{ top:auto; bottom:84px; border-color:var(--ember); }
  .verify-actions{ display:flex; gap:.4rem; flex-wrap:wrap; }
  .ranked-lb{ max-width:560px; margin:.6rem auto 0; display:flex; flex-direction:column; gap:.35rem; }
  .ranked-lb-row{
    display:flex; align-items:center; gap:.6rem; background:var(--snow); border:2px solid var(--parchment-dim);
    border-radius:10px; padding:.45rem .8rem; font-size:.8rem; font-weight:700; color:var(--ink);
  }
  .ranked-lb-row.top{ border-color:var(--gold-500); }
  .ranked-lb-row.self{ background:rgba(47,107,74,.12); border-color:var(--pine-600); }
  .ranked-lb-pos{ flex:none; width:2rem; text-align:center; font-variant-numeric:tabular-nums; }
  .ranked-lb-player{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ranked-lb-player .pseudo-title-badge{ font-size:.62em; }
  .ranked-lb-tier{ flex:none; font-size:.72rem; opacity:.8; }
  .ranked-lb-elo{ flex:none; min-width:4.6rem; text-align:right; font-weight:800; color:var(--pine-600); font-variant-numeric:tabular-nums; }
  .ranked-lb .achievements-pager{ margin-top:.3rem; }
  .ranked-lb-me{ text-align:center; font-size:.78rem; font-weight:700; color:var(--ink); margin:.5rem 0 0; }
  @media (max-width:480px){ .ranked-lb-tier-name{ display:none; } }
  .rank-ladder{ max-width:520px; margin:.6rem auto 0; display:flex; flex-direction:column; gap:.35rem; }
  .rank-ladder-row{
    display:flex; align-items:center; gap:.6rem; background:var(--snow); border:2px solid var(--parchment-dim);
    border-radius:10px; padding:.45rem .8rem; font-size:.8rem; font-weight:700; color:var(--ink); flex-wrap:wrap;
  }
  .rank-ladder-row.current{ border-color:var(--gold-500); background:rgba(201,151,62,.14); }
  .rank-ladder-emoji{ font-size:1.1rem; flex:none; }
  .rank-ladder-info{ flex:1; display:flex; flex-direction:column; min-width:140px; }
  .rank-ladder-name{ }
  .rank-ladder-reward{ font-size:.66rem; font-weight:600; opacity:.7; }
  .rank-ladder-range{ flex:none; font-size:.72rem; opacity:.7; font-variant-numeric:tabular-nums; }
  .rank-ladder-you{ flex:none; background:var(--gold-500); color:var(--snow); border-radius:999px; padding:.1rem .5rem; font-size:.66rem; }
  .achievements-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.5rem; margin:.4rem 0 .6rem; }
  .achievement-card{
    display:flex; flex-direction:column; align-items:center; gap:.25rem; background:var(--snow); border:2px solid var(--parchment-dim);
    border-radius:12px; padding:.6rem .3rem; text-align:center; opacity:.55;
  }
  .achievement-card.unlocked{ border-color:var(--gold-500); opacity:1; background:rgba(201,151,62,.12); }
  .achievement-card-icon{ font-size:1.5rem; }
  .achievement-card-name{ font-size:.62rem; font-weight:700; color:var(--ink); line-height:1.2; }
  .achievement-card-desc{ font-size:.56rem; font-weight:600; color:var(--ink-soft); line-height:1.25; }
  .week-wins-badge{
    display:inline-flex; align-items:center; gap:.1rem; margin-left:.35rem; padding:.02rem .42rem; border-radius:999px;
    background:linear-gradient(180deg, #f0d58f, var(--gold-500)); color:#3b0d13; font-size:.74em; font-weight:800;
    line-height:1.4; vertical-align:middle; white-space:nowrap; box-shadow:0 1px 0 rgba(0,0,0,.18);
  }
  .daily-weekly-reward-note{ display:block; font-size:.72rem; font-weight:600; opacity:.75; }
  .daily-last-week{ margin:.4rem auto 0; max-width:560px; font-size:.78rem; font-weight:700; color:var(--ink); text-align:center; opacity:.85; }
  .daily-weekly-reward{ margin:.5rem auto 0; max-width:560px; padding:.45rem .8rem; border-radius:12px; background:rgba(201,151,62,.18); border:1px solid var(--gold-500); color:var(--ink); font-size:.82rem; font-weight:700; text-align:center; }
  /* boutique : les deux monnaies */
  .wallet-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.7rem; margin:.4rem 0 1rem; }
  .wallet-box{ display:flex; flex-direction:column; gap:.15rem; background:var(--snow); border:2px solid var(--gold-500); border-radius:14px; padding:.6rem .9rem; color:var(--ink); text-align:left; }
  .wallet-box strong{ font-family:var(--font-display); font-size:1.35rem; }
  .wallet-box span{ font-size:.82rem; font-weight:800; }
  .wallet-box small{ font-size:.7rem; font-weight:600; color:var(--ink-soft); }
  .wallet-box.wallet-blue{ border-color:#1e6fd9; background:#eef5ff; }
  .wallet-box.wallet-blue strong{ color:#1e6fd9; }
  .profile-panel-subtitle small{ font-weight:700; opacity:.7; font-size:.75em; }
  /* avatars dessinés (images) : même taille que l'emoji qu'ils remplacent */
  .avatar-img{ display:inline-block; width:1.3em; height:1.3em; object-fit:contain; vertical-align:middle; user-select:none; }
  /* fenêtre des succès : 9 par page en 3 x 3 */
  #achievementsModal .chest-modal-inner{ max-width:min(560px,94vw); width:100%; max-height:94vh; overflow-y:auto; padding:1.4rem 1.2rem 1.1rem; gap:.6rem; }
  .achievements-lead{ margin:0; font-size:.8rem; }
  .achievements-grid-paged{ grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin:0; }
  .achievements-grid-paged .achievement-card{ min-height:128px; justify-content:flex-start; padding:.6rem .35rem; }
  .achievements-grid-paged .achievement-card-icon{ font-size:1.8rem; }
  .achievements-grid-paged .achievement-card-name{ font-size:.74rem; }
  .achievements-grid-paged .achievement-card-desc{ font-size:.64rem; }
  .achievements-pager{ display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%; }
  .achievements-pager .btn-ghost[disabled]{ opacity:.35; cursor:default; }
  .achievements-page-label{ display:flex; flex-direction:column; align-items:center; gap:.25rem; font-size:.78rem; font-weight:800; color:var(--ink); min-width:88px; }
  .achievements-dots{ display:flex; gap:.3rem; }
  .achievements-dot{ width:7px; height:7px; border-radius:50%; background:var(--parchment-dim); }
  .achievements-dot.active{ background:var(--gold-500); }
  @media (max-width:640px){
    #achievementsModal .chest-modal-inner{ padding:1.2rem .7rem .9rem; }
    .achievements-grid-paged{ gap:.35rem; }
    .achievements-grid-paged .achievement-card{ min-height:118px; }
    .achievements-grid-paged .achievement-card-name{ font-size:.66rem; }
    .achievements-grid-paged .achievement-card-desc{ font-size:.58rem; }
  }
  .achievement-toast{
    position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); z-index:100; display:flex; align-items:center; gap:.7rem;
    background:var(--parchment); border:2px solid var(--gold-500); border-radius:16px; padding:.8rem 1.2rem;
    box-shadow:0 16px 36px rgba(0,0,0,.4); opacity:0; transition:opacity .35s ease, transform .35s ease; pointer-events:none;
  }
  .achievement-toast.show{ opacity:1; transform:translate(-50%,0); }
  .achievement-toast-icon{ font-size:2.2rem; }
  .achievement-toast-title{ font-family:var(--font-display); color:var(--pine-800); font-size:.78rem; font-weight:800; }
  .achievement-toast-name{ font-weight:800; color:var(--ink); font-size:.95rem; }
  .achievement-toast-coins{ font-weight:700; color:var(--gold-500); font-size:.8rem; }
  @media (max-width:640px){ .achievement-toast{ left:16px; right:16px; transform:translateY(20px); max-width:none; }
    .achievement-toast.show{ transform:translateY(0); } }
  /* missions du jour (écran de choix du mode) */
  .missions-panel{ max-width:560px; margin:0 auto 1.2rem; background:var(--snow); border:2px solid var(--gold-500); border-radius:14px; padding:.7rem .9rem; color:var(--ink); text-align:left; }
  .missions-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.2rem .8rem; margin-bottom:.4rem; font-family:var(--font-display); }
  .missions-reset{ font-size:.72rem; font-weight:700; color:var(--ink-soft); font-family:var(--font-body); }
  .mission-row{ display:flex; align-items:center; gap:.6rem; padding:.4rem 0; border-top:1px dashed var(--parchment-dim); }
  .mission-icon{ flex:none; font-size:1.3rem; width:1.8rem; text-align:center; }
  .mission-body{ flex:1; min-width:0; }
  .mission-text{ display:block; font-size:.82rem; font-weight:700; line-height:1.25; }
  .mission-bar{ height:7px; margin-top:.3rem; border-radius:999px; background:var(--parchment-dim); overflow:hidden; }
  .mission-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--gold-500), var(--gold-300)); transition:width .4s ease; }
  .mission-reward{ flex:none; font-size:.7rem; font-weight:700; text-align:right; color:var(--ink-soft); line-height:1.3; }
  .mission-reward strong{ color:var(--gold-500); font-size:.78rem; }
  .mission-row.done .mission-text{ text-decoration:line-through; opacity:.6; }
  .mission-row.done .mission-bar-fill{ background:#2e8b3d; }
  .missions-bonus{ margin:.4rem 0 0; font-size:.74rem; font-weight:700; color:var(--ink-soft); }
  #missionsModalBody .missions-panel{ border:none; background:transparent; padding:0; margin:0; max-width:none; }
  #missionsModalBody .missions-head strong{ display:none; }
  .invite-banner[hidden]{ display:none; }
  .friend-requests{ margin-bottom:.4rem; }
  .friend-list{ display:flex; flex-direction:column; gap:.4rem; }
  .friend-row{
    display:flex; align-items:center; gap:.5rem; background:var(--snow); border-radius:10px; padding:.45rem .6rem;
  }
  .friend-avatar{ font-size:1.2rem; flex:none; }
  .friend-name{ flex:1; font-weight:800; font-size:.8rem; color:var(--ink); min-width:0; }
  .friend-sub{ display:block; font-weight:600; font-size:.68rem; color:var(--ink-soft); opacity:.8; }
  .friend-actions{ display:flex; gap:.3rem; flex:none; }
  .friend-profile-trigger{
    display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; background:none; border:none; padding:0;
    cursor:pointer; text-align:left; font:inherit;
  }
  .friend-profile-trigger:hover .friend-name{ text-decoration:underline; }
  .friend-profile-inner{ position:relative; max-width:min(380px,90vw); }
  .friend-profile-close{ position:absolute; top:.6rem; right:.6rem; color:var(--ink) !important; font-size:1.1rem !important; opacity:.7; }
  .friend-profile-close:hover{ opacity:1; }
  .tutorial-inner{ max-width:min(480px,92vw); text-align:left; }
  .tutorial-emoji{ font-size:2.6rem; text-align:center; display:block; margin-bottom:.4rem; }
  .tutorial-title{ font-family:var(--font-display); font-size:1.25rem; color:var(--pine-800); text-align:center; margin:0 0 .7rem; }
  .tutorial-text{ font-size:.9rem; line-height:1.55; color:var(--ink); margin:0 0 .5rem; }
  .tutorial-dots{ display:flex; gap:.4rem; justify-content:center; margin:.8rem 0; }
  .tutorial-dot{ width:8px; height:8px; border-radius:50%; background:var(--parchment-dim); }
  .tutorial-dot.active{ background:var(--pine-600); }
  .tutorial-nav{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }

  /* ---- chat de partie ---- */
  .chat-widget{ position:fixed; bottom:16px; right:16px; z-index:55; display:flex; flex-direction:column; align-items:flex-end; gap:.6rem; }
  .chat-widget[hidden]{ display:none; }
  .chat-toggle{
    position:relative; width:52px; height:52px; border-radius:50%; border:2px solid var(--gold-500);
    background:var(--snow); color:var(--ink); font-size:1.4rem; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.35);
    display:flex; align-items:center; justify-content:center;
  }
  .chat-toggle.new-message{ animation:chatPulse 1.6s ease-in-out 2; }
  @keyframes chatPulse{
    0%,100%{ transform:scale(1); box-shadow:0 10px 24px rgba(0,0,0,.35); }
    50%{ transform:scale(1.15); box-shadow:0 0 0 10px rgba(224,138,46,.35), 0 10px 24px rgba(0,0,0,.35); }
  }
  .chat-badge{
    position:absolute; top:-4px; right:-4px; background:var(--ember); color:var(--snow); font-size:.65rem; font-weight:800;
    border-radius:999px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center;
  }
  .chat-badge[hidden]{ display:none; }
  .chat-panel{
    width:min(360px,85vw); max-height:min(500px,68vh); background:var(--parchment); border:2px solid var(--gold-500); border-radius:16px;
    box-shadow:0 16px 36px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden;
  }
  .chat-panel[hidden]{ display:none; }
  .chat-header{
    background:var(--pine-800); color:var(--snow); font-weight:800; font-size:.85rem; padding:.6rem .8rem;
    display:flex; align-items:center; justify-content:space-between;
  }
  .chat-close{ background:transparent; border:none; color:var(--snow); font-size:.9rem; cursor:pointer; opacity:.8; }
  .chat-close:hover{ opacity:1; }
  .chat-messages{ flex:1; overflow-y:auto; padding:.6rem .7rem; display:flex; flex-direction:column; gap:.5rem; min-height:240px; }
  .chat-msg{ background:var(--snow); border-radius:10px; padding:.4rem .6rem; font-size:.82rem; color:var(--ink); }
  .chat-msg-author{ display:flex; align-items:baseline; justify-content:space-between; gap:.4rem; font-weight:800; color:var(--cranberry-600); font-size:.74rem; margin-bottom:.1rem; }
  .chat-msg-team{ font-weight:600; color:var(--ink-soft); }
  .chat-msg-time{ font-weight:600; color:var(--ink-soft); opacity:.7; font-size:.68rem; flex:none; }
  .chat-msg-text{ word-break:break-word; }
  .chat-empty{ text-align:center; font-size:.78rem; color:var(--ink-soft); opacity:.7; padding:1rem 0; }
  .chat-input-row{ display:flex; gap:.4rem; padding:.6rem; border-top:2px solid var(--parchment-dim); }
  .chat-input{ flex:1; border:2px solid var(--parchment-dim); border-radius:10px; padding:.45rem .6rem; font-size:.85rem; font-family:var(--font-body); }
  .chat-send{ background:var(--ember); color:var(--snow); border:none; border-radius:10px; padding:.45rem .8rem; font-weight:800; cursor:pointer; }
  @media (max-width:640px){ .chat-widget{ bottom:10px; right:10px; } }
  .friends-widget{ position:fixed; bottom:16px; left:16px; z-index:55; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
  .friends-widget[hidden]{ display:none; }
  .friends-widget-body{ max-height:min(420px,60vh); overflow-y:auto; padding:.7rem; }
  @media (max-width:640px){ .friends-widget{ bottom:10px; left:10px; } }
  body.play-mode .online-badge{ top:4px; right:4px; padding:.35rem .55rem; }
  @media (max-width:640px){ .online-badge{ max-width:min(220px,54vw); font-size:.68rem; } }
  body.guest-mode #stepContent input:not(.guest-answer-input),
  body.guest-mode #stepContent select,
  body.guest-mode #stepContent textarea,
  body.guest-mode #stepContent button:not([data-action="guest-submit"]):not([data-action="guest-pick-team"]):not([data-action="guest-change-team"]),
  body.guest-mode .steps .step-tab{
    pointer-events:none; opacity:.85;
  }
  .guest-answer-box{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; margin:1rem 0; }
  .guest-answer-input{ font-size:1rem; padding:.65rem .9rem; border-radius:12px; border:2px solid var(--gold-500); min-width:220px; font-family:var(--font-body); }
  .guest-answer-result{ margin:1rem auto; max-width:440px; font-weight:800; font-size:1rem; padding:.7rem 1rem; border-radius:12px; animation:popIn .35s cubic-bezier(.34,1.56,.64,1); }
  .guest-answer-result.correct{ background:rgba(120,200,140,.18); color:#c9f2d4; border:2px solid #4caf6a; }
  .guest-answer-result.incorrect{ background:rgba(220,80,80,.15); color:var(--ember-light); border:2px solid var(--ember); animation:popIn .2s ease, shake .4s ease .2s; }
  .answer-info{ max-width:46ch; margin:-.4rem auto 1.2rem; font-size:.92rem; font-weight:600; font-style:italic; line-height:1.45; opacity:.9; }
  .answer-info-inline{ display:block; margin-top:.2rem; font-size:.85em; font-weight:600; font-style:italic; opacity:.85; }
  .report-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.4rem; margin-top:1rem; font-size:.8rem; }
  .report-label{ font-weight:700; opacity:.8; }
  .report-btn{ background:transparent; border:1px solid rgba(255,248,234,.35); color:var(--snow); border-radius:999px; padding:.3rem .75rem; font-size:.78rem; font-weight:700; cursor:pointer; opacity:.75; font-family:inherit; }
  .report-btn:hover{ opacity:1; border-color:var(--gold-300); }
  .report-btn.report-cancel{ border-style:dashed; }
  .report-done{ font-weight:700; opacity:.75; }
  .guest-answer-result.speed-miss{ margin:0 auto .8rem; font-size:.9rem; }
  .guest-answer-result.sent{ background:rgba(255,255,255,.08); color:var(--snow); border:2px solid var(--gold-500); }
  @keyframes popIn{ 0%{ transform:scale(.7); opacity:0; } 60%{ transform:scale(1.06); opacity:1; } 100%{ transform:scale(1); } }
  @keyframes shake{ 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);} 30%,50%,70%{transform:translateX(-7px);} 40%,60%{transform:translateX(7px);} }
  @keyframes riserGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  .live-answers{ background:rgba(0,0,0,.18); border-radius:14px; padding:.8rem 1rem; margin-top:1rem; text-align:left; }
  .live-answers h4{ margin:0 0 .5rem; font-size:.85rem; color:var(--gold-300); }
  .live-answers ul{ margin:0; padding:0; list-style:none; }
  .live-answer-row{ display:flex; align-items:center; gap:.5rem; padding:.4rem 0; border-bottom:1px solid rgba(255,255,255,.08); flex-wrap:wrap; }
  .live-answer-row:last-child{ border-bottom:none; }
  .live-answer-team{ font-weight:800; flex:none; }
  .live-answer-text{ flex:1; }
  .live-answer-row.correct .live-answer-text{ color:#8fe0a8; }
  /* Questions en direct (partie en ligne) : compte à rebours, équipes qui ont répondu, puis résultats */
  .live-timer{ display:flex; align-items:baseline; justify-content:center; gap:.8rem; flex-wrap:wrap; margin:.2rem 0 .6rem; font-family:var(--font-display); font-weight:800; font-size:1.6rem; }
  .live-countdown{ font-variant-numeric:tabular-nums; color:var(--snow); }
  .live-countdown.urgent{ color:var(--ember-light); animation:pulse-timeup 1s ease-in-out infinite; }
  .live-timer .stage-pts{ font-family:var(--font-body); font-size:.95rem; }
  .live-hint{ text-align:center; font-weight:700; font-size:.92rem; opacity:.85; margin:.8rem auto; max-width:46ch; }
  .live-teams{ list-style:none; margin:1rem auto; padding:0; max-width:560px; display:grid; gap:.45rem; text-align:left; }
  .live-team{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; background:rgba(255,248,234,.06); border:2px solid rgba(255,248,234,.2); border-radius:12px; padding:.5rem .9rem; }
  .live-team .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
  .live-team-name{ font-weight:800; flex:none; }
  .live-team-middle{ flex:1; min-width:0; display:flex; align-items:baseline; gap:.4rem; overflow-wrap:anywhere; }
  .live-team-right{ font-weight:800; font-size:.9rem; flex:none; font-variant-numeric:tabular-nums; }
  .live-team.done{ border-color:var(--gold-500); }
  .live-team.won{ border-color:#4caf6a; background:rgba(120,200,140,.14); }
  .live-team.won .live-team-right{ color:#8fe0a8; }
  .live-team.none{ opacity:.6; }
  .live-answer-by{ font-size:.78rem; opacity:.75; }
  .live-answer-none{ font-style:italic; opacity:.8; }
  .live-found{ display:block; flex-basis:100%; font-size:.8rem; opacity:.8; line-height:1.4; }
  .live-players{ display:flex; flex-direction:column; gap:.2rem; min-width:0; width:100%; }
  .live-player-line{ display:block; overflow-wrap:anywhere; }
  .live-player-line.ok .live-answer-text{ color:#8fe0a8; }
  .live-verdict{ font-weight:800; font-size:.85rem; }
  .live-fix-btn{ font:700 .72rem var(--font-body); background:none; border:1px solid rgba(255,248,234,.35); color:inherit; border-radius:999px; padding:.05rem .5rem; cursor:pointer; margin-left:.2rem; }
  .live-fix-btn:hover, .live-fix-btn:focus-visible{ border-color:var(--gold-300); outline:none; }
  .live-team-middle:has(.live-found){ flex-wrap:wrap; }
  .duel-team-tag{ display:inline-flex; align-items:center; gap:.35rem; font-weight:800; }
  .duel-team-tag .dot{ width:11px; height:11px; border-radius:50%; flex:none; }
  .duel-vs{ display:flex; align-items:center; justify-content:center; gap:.7rem; flex-wrap:wrap; font-family:var(--font-display); font-size:1.25rem; margin:.4rem 0 .6rem; }
  .duel-vs-sep{ font-size:1.4rem; }
  .chain-players{ display:flex; flex-wrap:wrap; gap:.3rem; }
  .chain-player{ padding:.1rem .55rem; border-radius:999px; background:rgba(255,248,234,.08); font-size:.85rem; font-weight:700; }
  .chain-player.current{ background:rgba(230,196,121,.25); color:var(--gold-300); }
  .chain-player.out{ opacity:.45; text-decoration:line-through; }
  .chain-said{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; max-width:640px; margin:0 auto 1rem; }
  .chain-said-item{ padding:.15rem .6rem; border-radius:8px; font-size:.85rem; font-weight:700; background:rgba(255,248,234,.08); border-left:4px solid var(--team-color); }
  .live-rules{ font-size:.8rem; font-weight:600; opacity:.7; }
  .live-solution{ max-width:560px; margin:0 auto 1rem; text-align:left; }
  @media (prefers-reduced-motion:reduce){ .live-countdown.urgent{ animation:none; } }
  .gate-panel{ max-width:960px; margin:0 auto; }
  .landing-panel{ max-width:760px; }
  .landing-hero{ text-align:center; margin-bottom:1.4rem; }
  .landing-logo{ font-size:2.6rem; display:block; margin-bottom:.2rem; }
  .landing-title{ font-family:var(--font-display); font-weight:800; color:var(--pine-800); font-size:clamp(1.9rem,5vw,2.6rem); margin:.1rem 0 .5rem; }
  .landing-tagline{ font-size:.95rem; color:var(--ink-soft); font-weight:700; max-width:520px; margin:0 auto; line-height:1.5; }
  .landing-online{
    display:inline-flex; align-items:center; gap:.4rem; margin:.9rem auto 0; padding:.35rem .8rem; border-radius:999px;
    background:rgba(47,107,74,.12); color:var(--pine-800); font-weight:800; font-size:.78rem;
  }
  .landing-features{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin:1.5rem 0 1.8rem; }
  @media (max-width:820px){ .landing-features{ grid-template-columns:repeat(2,1fr); } }
  .landing-feature{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem;
    background:var(--snow); border:2px solid var(--parchment-dim); border-radius:14px; padding:.9rem .7rem;
  }
  .landing-feature-icon{ font-size:1.6rem; }
  .landing-feature strong{ font-size:.82rem; color:var(--ink); }
  .landing-feature span{ font-size:.7rem; color:var(--ink-soft); line-height:1.35; }
  .gate-choices{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:1.6rem; }
  .gate-choices-3{ grid-template-columns:repeat(3,1fr); }
  .gate-choices-4{ grid-template-columns:repeat(4,1fr); }
  @media (max-width:980px){ .gate-choices-4{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:820px){ .gate-choices-3{ grid-template-columns:1fr; } }
  @media (max-width:640px){ .gate-choices{ grid-template-columns:1fr; } .gate-choices-4{ grid-template-columns:1fr; } }
  .gate-choice{
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
    background:linear-gradient(165deg, var(--snow), var(--parchment) 130%);
    border:2px solid var(--parchment-dim); border-radius:18px; padding:1.7rem 1.2rem 1.4rem;
    cursor:pointer; font-family:var(--font-body); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
  }
  .gate-choice::before{ content:''; position:absolute; top:0; left:0; right:0; height:7px; background:var(--accent, var(--gold-500)); z-index:1; }
  .gate-choice-local{ --accent:var(--gold-500); }
  .gate-choice-multi{ --accent:var(--cranberry-600); }
  .gate-choice-solo{ --accent:var(--pine-600); }
  .gate-choice-daily{ --accent:var(--gold-500); }
  .gate-choice:hover{ border-color:var(--accent, var(--gold-500)); transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.28); }
  .gate-choice[disabled]{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:0 6px 14px rgba(0,0,0,.12); }
  .gate-choice-badge{
    position:absolute; top:14px; right:12px; background:var(--accent, var(--cranberry-600)); color:var(--snow);
    font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:.22rem .55rem; border-radius:999px;
  }
  .gate-choice-emoji{ font-size:2.4rem; filter:drop-shadow(0 4px 6px rgba(0,0,0,.2)); }
  .gate-choice-title{ font-family:var(--font-display); font-weight:800; color:var(--pine-800); font-size:1.2rem; }
  .gate-choice-desc{ font-size:.82rem; color:var(--ink-soft); font-weight:600; line-height:1.45; }
  .team-pick-layout{ margin-top:1.6rem; }
  .my-team-badge{
    display:flex; align-items:center; gap:.5rem; justify-content:flex-start; margin-bottom:.8rem;
    font-size:.82rem; font-weight:700; color:var(--snow);
  }
  .board-panel .my-team-badge{ color:var(--ink); }
  .my-team-badge .btn-ghost-inline{ text-decoration:underline; }
  .lobby-bubble{
    position:fixed; top:130px; left:16px; z-index:52; width:220px; max-width:80vw; max-height:calc(100vh - 160px); overflow-y:auto;
    background:var(--snow); border:2px solid var(--gold-500); border-radius:16px;
    padding:.8rem 1rem; text-align:left; box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
  .lobby-bubble[hidden]{ display:none; }
  body.play-mode .lobby-bubble{ top:70px; }
  @media (max-width:900px){ .lobby-bubble{ position:static; width:auto; max-width:none; max-height:none; margin:1.2rem auto 0; } }
  .lobby-bubble h4{ margin:0 0 .5rem; font-family:var(--font-display); color:var(--pine-800); font-size:.9rem; }
  .lobby-bubble-row{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.35rem 0; border-bottom:1px solid rgba(0,0,0,.08); flex-wrap:wrap; }
  .lobby-bubble-row:last-child{ border-bottom:none; }
  .lobby-player-row{ display:inline-flex; align-items:center; gap:.3rem; font-weight:700; font-size:.78rem; color:var(--ink); }
  .lobby-player-level{ font-weight:600; opacity:.7; font-size:.9em; }
  .lobby-player-team{ font-size:.7rem; font-weight:700; color:var(--pine-600); }
  .lobby-player-team.lobby-waiting{ opacity:.6; font-style:italic; }
  .gate-choice-desc .lobby-player-row{ display:flex; margin:.15rem 0; }

  /* ---------- Outils de lancement : annonce, compteur d'inscrits, parrainage ---------- */
  .site-banner{
    display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin:0 auto 1rem; max-width:760px;
    background:linear-gradient(90deg, rgba(201,151,62,.25), rgba(201,151,62,.12)); border:2px solid var(--gold-500);
    border-radius:14px; padding:.6rem .8rem; text-align:left; color:var(--ink); font-weight:800; font-size:.9rem;
  }
  .site-banner-icon{ font-size:1.3rem; }
  .site-banner-text{ flex:1 1 200px; overflow-wrap:anywhere; }
  .site-banner-close{ background:none; border:none; cursor:pointer; font-size:1rem; color:var(--ink-soft); padding:.2rem .4rem; }
  .landing-registered:empty, .js-referral-note:empty, .js-site-banner:empty{ display:none; }
  .landing-registered{ margin:.5rem auto 0; }
  .players-count{
    display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .8rem; border-radius:999px;
    background:rgba(201,151,62,.16); color:var(--ink); font-weight:800; font-size:.8rem;
  }
  .referral-note{
    margin:.8rem auto; max-width:560px; padding:.6rem .8rem; border-radius:12px; border:2px dashed var(--gold-500);
    background:rgba(201,151,62,.12); color:var(--ink); font-weight:700; font-size:.88rem;
  }
  .referral-box{ margin-top:1rem; padding-top:.6rem; border-top:1px solid rgba(0,0,0,.1); }
  .referral-lead{ font-size:.8rem; color:var(--ink); margin:.2rem 0 .5rem; }
  .referral-row{ flex-wrap:nowrap; }
  .referral-link{ flex:1 1 auto; min-width:0; font-size:.72rem; }
  .admin-banner{ margin-bottom:.8rem; }
  .admin-banner-text{ width:100%; box-sizing:border-box; resize:vertical; font-family:inherit; margin:.3rem 0; }
  .admin-banner-row{ flex-wrap:wrap; gap:.4rem; }
  .admin-banner-row .pseudo-input{ flex:1 1 140px; min-width:0; }

  /* ---------- Téléphone : les badges du haut défilent avec la page au lieu de cacher le contenu ---------- */
  @media (max-width:640px){
    body:not(.party-mode) .masthead{ display:none; }
    body:not(.play-mode) .profile-overlay,
    body:not(.play-mode) .achievements-badge,
    body:not(.play-mode) .shop-badge,
    body:not(.play-mode) .site-online-badge,
    body:not(.play-mode) .online-badge{ position:absolute; }
    body.has-hud:not(.party-mode) #stepContent{ padding-top:160px; }
    body.has-hud.party-mode:not(.play-mode) .masthead{ padding-top:160px; }
  }