/* QuizFighterOne — Interface téléphone (maquette d'octobre 2026).
   Tout ce qui suit ne s'applique qu'aux écrans de 640 px ou moins : la version ordinateur ne change pas.
   Pour revenir à l'ancienne interface téléphone : retirer ce fichier et js/mobile.js d'index.html. */

/* Polices de la maquette (hébergées sur le site, chargées seulement si un élément téléphone les utilise). */
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/archivoblack-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Archivo Black'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/archivoblack-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Permanent Marker'; font-style:normal; font-weight:400; font-display:swap;
  src:url(fonts/permanentmarker-latin.woff2) format('woff2'); }

/* Hors téléphone : rien de tout ça n'apparaît. */
.m-only, .m-topbar, .m-nav, .m-sheet-head, .m-sheet-ranked { display:none !important; }

:root {
  --m-accent:#f2b632;          /* jaune « arène » de la maquette */
  --m-accent-ink:#2a1010;
  --m-heavy:'Archivo Black', 'Arial Black', var(--font-display);
  --m-hand:'Permanent Marker', 'Comic Sans MS', cursive;
  --m-card:color-mix(in srgb, var(--cranberry-900), #ffe9d2 6%);   /* opaque : la neige / les citrouilles animées passent derrière, pas à travers */
  --m-line:rgba(255,226,190,.13);
  --m-muted:rgba(255,240,224,.62);
}
body[data-theme="halloween"] { --m-accent:#f39a2c; --m-accent-ink:#1c0f26; }
body[data-theme="anniversaire"] { --m-accent:#f6c945; --m-accent-ink:#3a0f2e; }

@keyframes mLivePulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
/* (interface arène : html.m-ui) */
  html.m-ui .m-only { display:block !important; }
  html.m-ui .m-hide { display:none !important; }

  /* ---------- écrans de navigation (accueil, boutique, menus) ---------- */
  html.m-ui body.m-chrome:not([data-bg-skin]), html.m-ui body.m-chrome[data-bg-skin="default"] {
  background:
    radial-gradient(ellipse 520px 300px at 50% -6%, color-mix(in srgb, var(--cranberry-700) 38%, transparent), transparent 70%),
    var(--cranberry-900);
}
  html.m-ui body.m-chrome .m-topbar, html.m-ui body.m-chrome .m-nav { display:flex !important; }
  /* Neige / citrouilles / confettis du thème : derrière les cartes plutôt que par-dessus le texte. */
  html.m-ui body.m-chrome #snow { z-index:-1; }
  /* L'ancienne carte profil, les badges et les coins décoratifs laissent la place aux deux barres. */
  html.m-ui body.m-chrome .profile-overlay > :not(.avatar-picker-panel),
  html.m-ui body.m-chrome .achievements-badge,
  html.m-ui body.m-chrome .missions-badge,
  html.m-ui body.m-chrome .shop-badge,
  html.m-ui body.m-chrome .site-online-badge,
  html.m-ui body.m-chrome .online-badge,
  html.m-ui body.m-chrome .corner,
  html.m-ui body.m-chrome .legal-note,
  html.m-ui body.m-chrome .lobby-bubble { display:none !important; }
  html.m-ui body.m-chrome .profile-overlay { position:fixed; top:0; left:0; width:0; height:0; padding:0; margin:0; border:0; background:none; box-shadow:none; z-index:85; }
  html.m-ui body.m-chrome.has-hud:not(.party-mode) #stepContent { padding-top:.4rem; }
  html.m-ui body.m-chrome #app { padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
  html.m-ui body.m-chrome .app-footer { padding:.6rem 1rem 1rem; gap:.6rem; }
  /* Amis et chat : leurs bulles sont remplacées par les icônes de la barre du haut ; les fenêtres s'ouvrent au-dessus de la barre du bas. */
  html.m-ui body.m-chrome #chatToggleBtn, html.m-ui body.m-chrome .friends-widget { display:none !important; }
  html.m-ui body.m-chrome .friends-widget, html.m-ui body.m-chrome .chat-widget { bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  html.m-ui body.m-chrome .activity-toasts { bottom:calc(140px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- barre du haut ---------- */
  html.m-ui .m-topbar {
  align-items:center; justify-content:space-between; gap:.8rem;
  padding:calc(12px + env(safe-area-inset-top, 0px)) 16px 10px; position:relative; z-index:20;
}
  html.m-ui .m-logo {
  display:flex; flex-direction:column; align-items:flex-start; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--m-heavy); font-size:clamp(1.02rem, calc(4.9vw / var(--qfo-z, 1)), 1.28rem); line-height:.98; letter-spacing:.01em; text-transform:uppercase; color:#fff; white-space:nowrap; flex:none;
}
  html.m-ui .m-logo em { font-style:normal; color:var(--m-accent); }
  html.m-ui .m-top-actions { display:flex; gap:6px; margin-left:auto; }
  html.m-ui .m-top-icon {
  position:relative; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--m-card); border:1.5px solid var(--m-line); color:#fff; padding:0;
}
  html.m-ui .m-top-icon .m-ico { width:19px; height:19px; }
  html.m-ui .m-me { display:flex; align-items:center; gap:.65rem; background:none; border:0; padding:0; cursor:pointer; color:#fff; text-align:right; min-width:0; }
  html.m-ui .m-me-text { display:flex; flex-direction:column; align-items:flex-end; min-width:0; max-width:calc(38vw / var(--qfo-z, 1)); }
  html.m-ui .m-me-name, html.m-ui .m-me-title { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  html.m-ui .m-me-name { font-weight:800; font-size:.98rem; line-height:1.15; }
  html.m-ui .m-me-title { font-family:var(--m-hand); font-size:.82rem; color:var(--m-accent); line-height:1.15; }
  html.m-ui .m-me-meta { font-size:.7rem; color:var(--m-muted); font-weight:700; white-space:nowrap; }
  html.m-ui .m-me-avatar {
  position:relative; flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--cranberry-800); border:2.5px solid var(--m-accent); font-size:1.45rem; overflow:visible;
}
  html.m-ui .m-me-avatar .avatar-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  html.m-ui .m-badge { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--ember); color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }

  /* ---------- accueil ---------- */
  html.m-ui .m-home { display:flex; flex-direction:column; gap:14px; padding-bottom:.4rem; }
  html.m-ui .m-home .js-site-banner:empty, html.m-ui .m-home .js-referral-note:empty { display:none; }
  html.m-ui .m-hero {
  position:relative; margin:10px 2px 6px; padding:16px 16px 16px; border-radius:6px;
  background:var(--parchment); color:var(--ink); transform:rotate(-1.2deg);
  box-shadow:6px 7px 0 var(--cranberry-700), 0 18px 30px rgba(0,0,0,.35);
}
  html.m-ui .m-tape {
  position:absolute; top:-12px; left:50%; width:84px; height:24px; transform:translateX(-50%) rotate(-3deg);
  background:color-mix(in srgb, var(--m-accent) 70%, #fff 0%); opacity:.85; border-radius:2px;
  box-shadow:0 2px 4px rgba(0,0,0,.18);
}
  html.m-ui .m-hero-top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
  html.m-ui .m-kicker { font-family:var(--m-hand); font-size:1rem; color:var(--cranberry-700); }
  html.m-ui .m-online {
  display:inline-flex; align-items:center; gap:.35rem; flex:none; padding:.2rem .6rem; border-radius:999px;
  border:1.5px solid #2f7d4a; color:#1f6b3b; font-size:.76rem; font-weight:800; background:rgba(47,125,74,.08);
}
  html.m-ui .m-dot { width:8px; height:8px; border-radius:50%; background:#2fae5c; flex:none; }
  html.m-ui .m-dot.red { background:#ff4d4d; animation:mLivePulse 1.6s ease-in-out infinite; }
  
  html.m-ui .m-hero-title { margin:.1rem 0 .55rem; font-family:var(--m-heavy); font-weight:400; font-size:clamp(1.9rem, calc(9.4vw / var(--qfo-z, 1)), 2.35rem); line-height:1; letter-spacing:.01em; text-transform:uppercase; color:var(--cranberry-800); }
  html.m-ui .m-hero-mid { display:flex; align-items:flex-end; justify-content:space-between; gap:.8rem; padding-bottom:.75rem; border-bottom:2px dashed rgba(44,32,21,.22); }
  html.m-ui .m-hero-time { display:flex; flex-direction:column; }
  html.m-ui .m-label { font-size:.78rem; font-weight:700; color:var(--ink-soft); }
  html.m-ui .m-countdown { font-family:var(--m-heavy); font-size:1.75rem; line-height:1.05; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:.01em; }
  html.m-ui .m-hero-num { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
  html.m-ui .m-hero-num strong { font-family:var(--m-heavy); font-weight:400; font-size:1.6rem; line-height:1.05; color:var(--ink); }
  html.m-ui .m-hero-num small, html.m-ui .m-stat-value small { font-size:.62em; opacity:.7; }
  html.m-ui .m-hero-num span { font-size:.74rem; font-weight:700; color:var(--ink-soft); }
  html.m-ui .m-hero-stats { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.4rem; padding:.7rem 0 .85rem; }
  html.m-ui .m-stat { display:flex; flex-direction:column; min-width:0; }
  html.m-ui .m-stat-label { font-size:.74rem; font-weight:700; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html.m-ui .m-stat-value { font-family:var(--m-heavy); font-weight:400; font-size:1.08rem; color:var(--ink); }
  html.m-ui .m-cta {
  display:block; width:100%; padding:.85rem .6rem; border-radius:9px; cursor:pointer;
  background:var(--m-accent); color:var(--m-accent-ink); border:2.5px solid var(--m-accent-ink);
  box-shadow:4px 4px 0 var(--m-accent-ink); font-family:var(--m-heavy); font-size:1.08rem; letter-spacing:.02em; text-transform:uppercase;
  transition:transform .08s ease, box-shadow .08s ease;
}
  html.m-ui .m-cta:active { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--m-accent-ink); }

  html.m-ui .m-section { margin:.5rem 2px -4px; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--m-muted); }
  html.m-ui .m-modes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  html.m-ui .m-mode, html.m-ui .m-missions {
  display:flex; align-items:center; gap:.7rem; min-width:0; padding:.95rem .8rem; border-radius:12px; cursor:pointer; text-align:left;
  background:var(--m-card); border:1.5px solid var(--m-line); color:#fff; font-family:var(--font-body);
}
  html.m-ui .m-mode.featured { border-color:var(--m-accent); background:color-mix(in srgb, var(--m-card), var(--m-accent) 9%); }
  html.m-ui .m-mode:disabled { opacity:.5; }
  html.m-ui .m-mode:active, html.m-ui .m-missions:active { transform:scale(.98); }
  html.m-ui .m-mode-icon { flex:none; color:var(--m-accent); display:flex; }
  html.m-ui .m-mode-icon .m-ico { width:26px; height:26px; }
  html.m-ui .m-mode-text, html.m-ui .m-missions-text { display:flex; flex-direction:column; min-width:0; }
  html.m-ui .m-mode-text strong, html.m-ui .m-missions-text strong { font-size:.98rem; font-weight:800; line-height:1.2; }
  html.m-ui .m-mode-text span, html.m-ui .m-missions-text span { font-size:.76rem; color:var(--m-muted); font-weight:600; line-height:1.25; }
  html.m-ui .m-missions { width:100%; }
  html.m-ui .m-missions-text { flex:1; }
  html.m-ui .m-missions-count { flex:none; font-family:var(--m-heavy); font-size:1rem; color:var(--m-accent); }
  html.m-ui .m-missions.all-done .m-missions-count { color:#4fd17e; }

  html.m-ui .m-live { padding:14px 14px 6px; border-radius:14px; background:var(--m-card); border:1.5px solid var(--m-line); }
  html.m-ui .m-live-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.45rem; }
  html.m-ui .m-live-title { font-family:var(--m-hand); font-size:1.02rem; color:var(--m-accent); }
  html.m-ui .m-live-badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#ff6b6b; }
  html.m-ui .m-act { display:flex; align-items:center; gap:.65rem; padding:.55rem 0; border-top:1px solid var(--m-line); font-size:.88rem; color:#fff; }
  html.m-ui .m-act:first-child { border-top:0; }
  html.m-ui .m-act-av { flex:none; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem; color:#fff; }
  html.m-ui .m-act-text { flex:1; min-width:0; line-height:1.3; }
  html.m-ui .m-act-text .player-link, html.m-ui .m-act-text button { color:#fff; font-weight:800; }
  html.m-ui .m-act-ago { flex:none; font-size:.72rem; color:var(--m-muted); }
  html.m-ui .m-empty { margin:.3rem 0 .7rem; font-size:.84rem; color:var(--m-muted); }

  /* ---------- barre de navigation du bas ---------- */
  html.m-ui .m-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:60; align-items:flex-end; justify-content:space-around;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); min-height:66px; box-sizing:border-box;
  background:color-mix(in srgb, var(--cranberry-900) 94%, #000); border-top:1px solid var(--m-line);
  box-shadow:0 -10px 24px rgba(0,0,0,.35);
}
  html.m-ui .m-nav-item {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:4px 0;
  background:none; border:0; cursor:pointer; color:var(--m-muted); font-family:var(--font-body);
}
  html.m-ui .m-nav-item .m-ico { width:23px; height:23px; }
  html.m-ui .m-nav-label { font-size:.68rem; font-weight:800; }
  html.m-ui .m-nav-item.active { color:#fff; }
  html.m-ui .m-nav-play { position:relative; }
  html.m-ui .m-nav-play-btn {
  width:54px; height:54px; margin-top:-26px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:var(--m-accent); color:var(--m-accent-ink); transform:rotate(-4deg);
  box-shadow:3px 4px 0 var(--cranberry-700), 0 8px 18px rgba(0,0,0,.4);
}
  html.m-ui .m-nav-play-btn .m-ico { width:24px; height:24px; }
  html.m-ui .m-nav-play .m-nav-label { color:var(--m-accent); }

  /* ---------- pages Classement, Succès et Profil (js/mobile.js) ----------
     Elles occupent l'écran entre la barre du haut (--m-top, mesurée à l'ouverture) et la barre du bas, avec leur
     propre défilement ; la page d'en dessous ne bouge pas. */
  html.m-ui body[data-m-page] { overflow:hidden; }
  html.m-ui body[data-m-page="classement"] .global-leaderboard-sidebar:not([hidden]),
  html.m-ui body[data-m-page="succes"] #achievementsModal:not([hidden]) {
  display:block !important; position:fixed; top:var(--m-top, 72px); left:0; right:0; bottom:calc(66px + env(safe-area-inset-bottom, 0px));
  width:auto; max-height:none; margin:0; overflow-y:auto; overscroll-behavior:contain; z-index:58;
  border:0; border-radius:0; box-shadow:none; padding:6px 16px 28px; background:var(--cranberry-900);
}
  /* Profil : le bloc qui contient le panneau prend toute la page (avec un bloc de taille zéro, le navigateur
     envoyait les clics à l'accueil situé dessous : les onglets du profil ne réagissaient pas au doigt). */
  html.m-ui body[data-m-page="profil"] .profile-overlay {
  position:fixed; top:var(--m-top, 72px); left:0; right:0; bottom:calc(66px + env(safe-area-inset-bottom, 0px));
  width:auto; height:auto; max-width:none; padding:0; margin:0; border:0; border-radius:0; box-shadow:none; z-index:58; background:var(--cranberry-900);
}
  html.m-ui body[data-m-page="profil"] #profilePanel:not([hidden]) {
  position:absolute; top:6px; left:16px; right:16px; bottom:14px;
  width:auto; max-height:none; overflow-y:auto; overscroll-behavior:contain; border-radius:8px;
  box-shadow:5px 6px 0 var(--cranberry-700), 0 14px 28px rgba(0,0,0,.35);
}
  /* Titres de page en grosses capitales ; plus de croix de fermeture : on change de page avec la barre du bas
     (ou le bouton « retour » du téléphone). */
  html.m-ui body[data-m-page] .m-sheet-close,
  html.m-ui body[data-m-page] #achievementsModal .friend-profile-close,
  html.m-ui body[data-m-page="profil"] #profilePanel .chat-header .chat-close { display:none !important; }
  html.m-ui body[data-m-page="profil"] #profilePanel .chat-header {
  font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:1.05rem;
}

  /* Classement : titre, onglets en pastilles, liste sur une carte papier. */
  html.m-ui body[data-m-page="classement"] .m-sheet-head {
  display:flex !important; align-items:center; margin:.2rem 2px .8rem; color:#fff;
  font-family:var(--m-heavy); text-transform:uppercase; font-size:1.35rem; letter-spacing:.01em;
}
  html.m-ui body[data-m-page="classement"] .m-sheet-head strong { font-weight:400; }
  html.m-ui body[data-m-page="classement"] .glb-tabs { gap:6px; margin-bottom:.8rem; }
  html.m-ui body[data-m-page="classement"] .glb-tab {
  border-radius:999px; background:var(--m-card); color:var(--m-muted); border:1.5px solid var(--m-line); font-size:.82rem; padding:.55rem .3rem;
}
  html.m-ui body[data-m-page="classement"] .glb-tab.active { background:var(--m-accent); color:var(--m-accent-ink); border-color:var(--m-accent); }
  html.m-ui body[data-m-page="classement"] .glb-body {
  background:var(--parchment); color:var(--ink); border-radius:8px; padding:12px 14px; min-height:120px;
  box-shadow:5px 6px 0 var(--cranberry-700), 0 14px 28px rgba(0,0,0,.35);
}
  html.m-ui body[data-m-page="classement"] .glb-row { font-size:.92rem; padding:.55rem .2rem; }
  html.m-ui body[data-m-page="classement"] .m-sheet-ranked {
  display:flex !important; align-items:center; justify-content:center; gap:.4rem; width:100%; margin-top:1.1rem; padding:.9rem;
  border-radius:12px; border:1.5px solid var(--m-accent); background:color-mix(in srgb, var(--m-card), var(--m-accent) 9%);
  color:#fff; font-weight:800; font-family:inherit; font-size:.95rem; cursor:pointer;
}

  /* Succès : la fenêtre devient une carte papier pleine largeur, missions du jour en tête. */
  html.m-ui body[data-m-page="succes"] #achievementsModal .chest-modal-inner {
  width:auto; max-width:none; max-height:none; margin:0; overflow:visible; padding:16px 14px 18px; align-items:stretch; text-align:left;
}
  html.m-ui body[data-m-page="succes"] .tutorial-title { font-size:1.35rem; text-align:left; }
  html.m-ui body[data-m-page="succes"] .achievements-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  html.m-ui body[data-m-page="succes"] .m-succes-missions { margin-bottom:.6rem; }

  /* ---------- pendant une partie (solo, quiz du jour, Ranked) : plus de carte profil ni de badges ---------- */
  html.m-ui body.m-game .profile-overlay,
  html.m-ui body.m-game .achievements-badge,
  html.m-ui body.m-game .missions-badge,
  html.m-ui body.m-game .shop-badge,
  html.m-ui body.m-game .site-online-badge,
  html.m-ui body.m-game .corner { display:none !important; }
  html.m-ui body.m-game.has-hud:not(.party-mode) #stepContent { padding-top:.4rem; }

@media (prefers-reduced-motion:reduce){
  html.m-ui .m-dot.red { animation:none; }
  html.m-ui .m-hero { transform:none; }
}

/* =====================================================================================================
   Toutes les pages, sur téléphone : même style que l'accueil (fond sombre, cartes « papier » à ombre
   décalée, titres épais, boutons jaunes, cartes et écrans de jeu sombres, onglets en pastilles).
   ===================================================================================================== */
/* (interface arène : html.m-ui) */
  html.m-ui body:not([data-bg-skin]), html.m-ui body[data-bg-skin="default"] {
  background:
    radial-gradient(ellipse 520px 300px at 50% -6%, color-mix(in srgb, var(--cranberry-700) 38%, transparent), transparent 70%),
    var(--cranberry-900);
}
  html.m-ui #snow { z-index:-1; }
  html.m-ui body.has-hud .legal-note { display:none; }

  /* ---- cartes « papier » (contenu des pages) ---- */
  html.m-ui .panel {
  border:0; border-radius:8px; padding:18px 16px 20px; margin-bottom:1.4rem;
  box-shadow:5px 6px 0 var(--cranberry-700), 0 14px 28px rgba(0,0,0,.35);
}
  html.m-ui .panel::before { display:none; }
  html.m-ui .panel-title {
  font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.1;
  color:var(--cranberry-800); font-size:1.38rem; margin-bottom:.5rem;
}
  html.m-ui .panel-lead { font-size:.9rem; line-height:1.45; margin-bottom:1rem; }
  html.m-ui .panel-actions { gap:.6rem; margin-top:1.1rem; }
  html.m-ui .profile-panel-subtitle { font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; font-size:.92rem; letter-spacing:.02em; color:var(--cranberry-800); }

  /* ---- boutons ---- */
  html.m-ui .btn { border-radius:9px; }
  html.m-ui .btn-primary, html.m-ui .btn-gold {
  background:var(--m-accent); color:var(--m-accent-ink); border:2.5px solid var(--m-accent-ink);
  box-shadow:3px 3px 0 var(--m-accent-ink); font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; letter-spacing:.02em;
  transition:transform .08s ease, box-shadow .08s ease;
}
  html.m-ui .btn-primary:hover, html.m-ui .btn-gold:hover { background:var(--m-accent); filter:brightness(1.05); }
  html.m-ui .btn-primary:active, html.m-ui .btn-gold:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--m-accent-ink); }
  html.m-ui .btn-ghost { border-radius:9px; border-color:rgba(255,226,190,.35); color:#fff; }
  html.m-ui .btn-ghost.on-light { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 45%, transparent); }
  html.m-ui .btn-ghost-inline { border-radius:9px; }
  html.m-ui .pseudo-input,
  html.m-ui .panel select,
  html.m-ui .panel input[type=text],
  html.m-ui .panel input[type=number],
  html.m-ui .panel input[type=email],
  html.m-ui .panel input[type=password] {
  border-radius:9px; border:2px solid color-mix(in srgb, var(--ink) 22%, transparent); background:#fff;
}

  /* ---- menus (Solo / Local, Rejoindre / Créer, choix d'équipe…) : cartes sombres comme les modes de l'accueil ---- */
  html.m-ui .gate-choices, html.m-ui .gate-choices-3, html.m-ui .gate-choices-4 { grid-template-columns:1fr !important; gap:10px; margin-top:1rem; }
  html.m-ui .gate-choice {
  display:grid; grid-template-columns:auto 1fr; column-gap:.8rem; row-gap:.15rem; align-items:center; text-align:left;
  background:var(--m-card); border:1.5px solid var(--m-line); border-radius:12px; padding:.9rem .9rem; color:#fff;
  box-shadow:none; transform:none;
}
  html.m-ui .gate-choice::before { display:none; }
  html.m-ui .gate-choice:hover { transform:none; box-shadow:none; border-color:var(--m-accent); }
  html.m-ui .gate-choice > :first-child:not(.gate-choice-badge), html.m-ui .gate-choice-emoji { grid-row:1 / span 2; }
  html.m-ui .gate-choice-emoji { font-size:1.9rem; }
  html.m-ui .gate-choice-title { font-family:var(--font-body); font-weight:800; font-size:1rem; color:#fff; }
  html.m-ui .gate-choice-desc { font-size:.78rem; color:var(--m-muted); grid-column:2; }
  html.m-ui .gate-choice-badge { position:absolute; top:8px; right:8px; font-size:.56rem; }
  html.m-ui .gate-choice .dot { grid-row:1 / span 2; }
  html.m-ui .gate-choice-desc .lobby-player-row, html.m-ui .gate-choice-desc .team-count { color:var(--m-muted); }
  html.m-ui .landing-features { gap:8px; }
  html.m-ui .landing-feature { background:var(--m-card); border:1.5px solid var(--m-line); border-radius:12px; }
  html.m-ui .landing-feature strong { color:#fff; }
  html.m-ui .landing-feature span { color:var(--m-muted); }
  html.m-ui .landing-title { font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; color:var(--cranberry-800); }

  /* ---- écrans de jeu : carte sombre ---- */
  html.m-ui .stage-panel {
  background:var(--m-card); border:1.5px solid var(--m-line); border-radius:16px; padding:18px 14px 20px;
  box-shadow:0 14px 28px rgba(0,0,0,.35);
}
  html.m-ui .stage-kicker { font-family:var(--m-hand); text-transform:none; letter-spacing:0; font-size:1rem; font-weight:400; color:var(--m-accent); }
  html.m-ui .stage-question { font-size:1.45rem; color:#fff; }
  html.m-ui .solo-pills { gap:.4rem; margin-bottom:.9rem; }
  html.m-ui .solo-chip { border-radius:999px; border:1.5px solid var(--m-line); background:rgba(255,236,214,.06); color:#fff; font-size:.74rem; padding:.3rem .7rem; }
  html.m-ui .q-pill { border-color:var(--m-line); }
  html.m-ui .q-pill.active { background:var(--m-accent); border-color:var(--m-accent); color:var(--m-accent-ink); }
  html.m-ui .mini-board { background:var(--m-card); border:1.5px solid var(--m-line); border-radius:14px; }
  html.m-ui .mini-board h3 { font-family:var(--m-hand); font-weight:400; color:var(--m-accent); }
  html.m-ui .round-tabs { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:.4rem; padding-bottom:2px; scrollbar-width:none; }
  html.m-ui .round-tabs::-webkit-scrollbar { display:none; }
  html.m-ui .round-tab { flex:none; background:var(--m-card); background-color:var(--m-card); border:1.5px solid var(--m-line); color:var(--m-muted); border-radius:999px; padding:.45rem .85rem; font-size:.78rem; }
  html.m-ui .round-tab.active { background:var(--m-accent); background-color:var(--m-accent); border-color:var(--m-accent); color:var(--m-accent-ink); }

  /* ---- onglets d'une soirée (Équipes / Manches / Jeu / Classement) : pastilles ---- */
  html.m-ui .steps { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; gap:6px; padding:0 16px; margin:.5rem 0 1rem; scrollbar-width:none; }
  html.m-ui .steps::-webkit-scrollbar { display:none; }
  html.m-ui .step-tab {
  flex:none; transform:none !important; box-shadow:none; background:var(--m-card); color:var(--m-muted);
  border:1.5px solid var(--m-line); border-radius:999px; padding:.5rem .9rem; font-size:.8rem; white-space:nowrap;
}
  html.m-ui .step-tab::before { display:none; }
  html.m-ui .step-tab.active { background:var(--m-accent); color:var(--m-accent-ink); border-color:var(--m-accent); }

  /* ---- titre de la soirée (mode local / en ligne) ---- */
  html.m-ui .plaque-logo { border:0; border-radius:8px; padding:14px 16px; box-shadow:5px 6px 0 var(--cranberry-700), 0 14px 28px rgba(0,0,0,.35); }
  html.m-ui .plaque-logo::before, html.m-ui .plaque-logo .crown-star { display:none; }
  html.m-ui .quiz-title-input { font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; }

  /* ---- badge « Mode solo / En direct — code / Quitter » : barre sombre ---- */
  html.m-ui .online-badge { background:var(--m-card); color:#fff; border:1.5px solid var(--m-line); border-radius:12px; box-shadow:0 8px 18px rgba(0,0,0,.3); }
  html.m-ui .online-badge .btn-ghost { color:#fff; border-color:var(--m-line); }
  html.m-ui .online-badge .btn-ghost.danger { color:#ff8f8f; border-color:rgba(255,143,143,.6); }

  /* ---- fenêtres (succès, missions, coffres, tutoriel, messages) et profil : cartes « papier » ---- */
  html.m-ui .chest-modal-inner, html.m-ui .qfo-dialog, html.m-ui .avatar-picker-panel {
  border:0; border-radius:10px; box-shadow:6px 7px 0 var(--cranberry-700), 0 20px 40px rgba(0,0,0,.5);
}
  html.m-ui .tutorial-title, html.m-ui .chest-modal-inner h3 { font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; color:var(--cranberry-800); }

  /* ---- soirées (local / en ligne, hors jeu) : plus de carte profil ni de badges en haut ---- */
  html.m-ui body.m-game.has-hud.party-mode:not(.play-mode) .masthead { padding-top:.6rem; }


/* ---- retouches après la revue des captures ---- */
/* (interface arène : html.m-ui) */
  /* Bouton « Jouer tout de suite » de l'accueil visiteur : sur une seule ligne. */
  html.m-ui .express-btn { font-size:1rem; white-space:nowrap; padding:.9rem 1.3rem; }
  /* Sous-titres dans les cartes : capitales sobres plutôt que la police épaisse. */
  html.m-ui .profile-panel-subtitle { font-family:var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.06em; }
  /* Onglets d'une soirée : les 4 tiennent sur une ligne. */
  html.m-ui .steps { gap:5px; }
  html.m-ui .step-tab { flex:1 1 0; min-width:0; padding:.48rem .25rem; font-size:.72rem; overflow:hidden; text-overflow:ellipsis; }
  /* Petits boutons en pointillés posés sur le fond sombre (« Changer » d'équipe…) : lisibles. */
  html.m-ui main .btn-ghost-inline:not(.panel *) { color:var(--m-accent); border-color:color-mix(in srgb, var(--m-accent) 60%, transparent); }
  /* Formulaires (pseudo, connexion, inscription) : champs de même largeur. */
  html.m-ui .pseudo-form .pseudo-input { width:100%; min-width:0; box-sizing:border-box; }

/* (interface arène : html.m-ui) */
  /* Boutons « fantômes » posés sur une carte papier (ex. « Rejouer avec les mêmes équipes ») : texte foncé. */
  html.m-ui .panel .btn-ghost:not(.on-light):not(.danger) { color:var(--ink); border-color:color-mix(in srgb, var(--ink) 45%, transparent); }
  /* Contraste : petit texte manuscrit du Quiz du jour et nombre de questions des manches. */
  html.m-ui .m-kicker { color:var(--cranberry-800); }
  html.m-ui .round-tab .count { opacity:1; }

/* (interface arène : html.m-ui) */
  /* Onglets de soirée : toute la largeur (pendant le jeu, la mise en page en colonne les resserrait). */
  html.m-ui .steps, html.m-ui body.play-mode .steps { align-self:stretch; width:auto; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box; }

/* (interface arène : html.m-ui) */
  /* « Jouer tout de suite » : sur une ligne sans dépasser, même sur un écran de 320 px. */
  html.m-ui .express-btn { font-size:clamp(.82rem, calc(4.2vw / var(--qfo-z, 1)), 1rem); max-width:100%; box-sizing:border-box; padding:.9rem clamp(.8rem, calc(4vw / var(--qfo-z, 1)), 1.3rem); }

/* (interface arène : html.m-ui) */
  /* « QUIZFIGHTERONE » (un seul mot) : la taille suit la largeur de l'écran pour ne jamais dépasser. */
  html.m-ui .landing-title { font-size:clamp(1.3rem, calc(7.6vw / var(--qfo-z, 1)), 2.2rem); overflow-wrap:anywhere; }

/* (interface arène : html.m-ui) */
  /* Avatar du haut avec un cadre équipé : le cadre remplace l'anneau jaune et a un peu de place autour. */
  html.m-ui .m-me-avatar.has-frame { border-color:transparent; margin-left:8px; margin-right:4px; }
  html.m-ui .m-me-avatar.has-frame::after { inset:-26%; }
  html.m-ui .m-me-avatar .m-badge { z-index:2; }


/* =====================================================================================================
   ORDINATEUR (html.m-wide : écran de plus de 640 px avec DESIGN_ARENE_ORDINATEUR = true dans js/config.js)
   Maquette d'octobre 2026 : navigation dans la barre du haut, accueil en deux colonnes, pied de page fin.
   ===================================================================================================== */
.m-wide-only, .m-foot-note { display:none !important; }
html.m-ui.m-wide .m-wide-only { display:flex !important; }
html.m-ui.m-wide .m-commu.m-wide-only { display:block !important; }

/* ---- barre du haut : logo, navigation au centre, profil ---- */
html.m-ui.m-wide .m-topbar {
  padding:16px max(28px, calc((100% - 1300px) / 2)) 14px; border-bottom:1px solid var(--m-line);
  background:color-mix(in srgb, var(--cranberry-900) 85%, #000); min-height:80px; box-sizing:border-box;
}
html.m-ui.m-wide .m-logo { font-size:1.45rem; }
html.m-ui.m-wide .m-me-text { max-width:220px; }
html.m-ui.m-wide .m-nav {
  position:absolute; top:0; left:50%; right:auto; bottom:auto; transform:translateX(-50%); height:80px; min-height:0;
  align-items:center; justify-content:center; gap:6px; padding:0; background:none; border:0; box-shadow:none; z-index:21;
}
html.m-ui.m-wide .m-nav-item {
  flex:none; flex-direction:row; gap:.45rem; padding:.55rem .85rem; border-radius:10px; color:var(--m-muted);
}
html.m-ui.m-wide .m-nav-item:hover { color:#fff; background:rgba(255,236,214,.05); }
html.m-ui.m-wide .m-nav-item.active { color:#fff; background:rgba(255,236,214,.07); }
html.m-ui.m-wide .m-nav-item .m-ico { width:19px; height:19px; }
html.m-ui.m-wide .m-nav-label { font-size:.92rem; }
html.m-ui.m-wide .m-nav-play {
  background:var(--m-accent); color:var(--m-accent-ink); border:2.5px solid var(--m-accent-ink); padding:.6rem 1.3rem; margin:0 .4rem;
  box-shadow:3px 3px 0 var(--m-accent-ink); transform:rotate(-1.5deg);
}
html.m-ui.m-wide .m-nav-play:hover { background:var(--m-accent); color:var(--m-accent-ink); filter:brightness(1.05); }
html.m-ui.m-wide .m-nav-play-btn { width:auto; height:auto; margin:0; background:none; box-shadow:none; transform:none; color:inherit; }
html.m-ui.m-wide .m-nav-play-btn .m-ico { width:16px; height:16px; }
html.m-ui.m-wide .m-nav-play .m-nav-label { color:var(--m-accent-ink); font-family:var(--m-heavy); font-weight:400; text-transform:uppercase; font-size:1rem; letter-spacing:.02em; }
@media (max-width:1060px){
  html.m-ui.m-wide:not(.qfo-scaled) .m-nav-item:not(.m-nav-play) .m-nav-label { display:none; }
  html.m-ui.m-wide:not(.qfo-scaled) .m-me-text { display:none; }
}

/* ---- pages : pas de barre du bas sur ordinateur ---- */
html.m-ui.m-wide body.m-chrome #app { padding-bottom:0; }
html.m-ui.m-wide body.m-chrome .chat-widget { bottom:18px; right:18px; }
html.m-ui.m-wide body.m-chrome .activity-toasts { bottom:24px; }
html.m-ui.m-wide body:not(.party-mode) .masthead { display:none; }
html.m-ui.m-wide .global-leaderboard-sidebar { display:none !important; }
html.m-ui.m-wide main { padding:0 28px; }

/* ---- accueil : Quiz du jour à gauche, modes à droite, activité en dessous ---- */
html.m-ui.m-wide .m-home {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:34px; row-gap:16px;
  max-width:1250px; margin:26px auto 10px; align-items:start;
}
html.m-ui.m-wide .m-home > .js-site-banner, html.m-ui.m-wide .m-home > .js-referral-note { grid-column:1 / -1; }
html.m-ui.m-wide .m-hero { grid-column:1; grid-row:2 / span 4; margin:14px 10px 0 4px; padding:30px 32px 30px; }
html.m-ui.m-wide .m-hero-title { font-size:clamp(3rem, calc(4.6vw / var(--qfo-z, 1)), 4.3rem); line-height:.95; max-width:9ch; margin:.25rem 0 1.4rem; }
html.m-ui.m-wide .m-tape { width:96px; height:28px; top:-14px; }
html.m-ui.m-wide .m-kicker { font-size:1.15rem; }
html.m-ui.m-wide .m-countdown { font-size:2.5rem; }
html.m-ui.m-wide .m-hero-num strong { font-size:2.5rem; }
html.m-ui.m-wide .m-label, html.m-ui.m-wide .m-hero-num span { font-size:.92rem; }
html.m-ui.m-wide .m-hero-mid { padding-bottom:1.1rem; }
html.m-ui.m-wide .m-hero-stats { padding:1.1rem 0 1.4rem; }
html.m-ui.m-wide .m-stat-label { font-size:.9rem; }
html.m-ui.m-wide .m-stat-value { font-size:1.5rem; }
html.m-ui.m-wide .m-cta { font-size:1.45rem; padding:1rem; }
html.m-ui.m-wide .m-section { grid-column:2; grid-row:2; margin:6px 2px 0; }
html.m-ui.m-wide .m-modes { grid-column:2; grid-row:3; gap:14px; }
html.m-ui.m-wide .m-mode { flex-direction:column; align-items:flex-start; gap:1.1rem; padding:22px 20px; min-height:138px; justify-content:space-between; }
html.m-ui.m-wide .m-mode-icon .m-ico { width:30px; height:30px; }
html.m-ui.m-wide .m-mode-text strong { font-family:var(--m-heavy); font-weight:400; font-size:1.15rem; }
html.m-ui.m-wide .m-mode-text span { font-size:.85rem; }
html.m-ui.m-wide .m-party-strip {
  grid-column:2; grid-row:4; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:18px 20px;
  background:var(--m-card); border:1.5px solid var(--m-line); border-radius:12px; cursor:pointer; color:#fff; font-family:inherit;
}
html.m-ui.m-wide .m-party-strip:hover { border-color:var(--m-accent); }
html.m-ui.m-wide .m-party-strip-text { font-family:var(--m-hand); font-size:1.02rem; color:var(--m-accent); text-align:left; }
html.m-ui.m-wide .m-party-strip-link { flex:none; font-weight:800; font-size:.86rem; color:var(--m-accent); text-decoration:underline; text-underline-offset:3px; }
html.m-ui.m-wide .m-missions { grid-column:2; grid-row:5; padding:16px 20px; }
html.m-ui.m-wide .m-live { grid-column:1 / -1; padding:20px 22px 12px; margin-top:22px; }
html.m-ui.m-wide .m-live-title { font-size:1.2rem; }
html.m-ui.m-wide .m-act { padding:.9rem 0; font-size:.98rem; }
html.m-ui.m-wide .m-act-av { width:32px; height:32px; font-size:.9rem; }
html.m-ui.m-wide .m-commu { margin-top:.4rem; padding:16px 0 10px; border-top:1px solid var(--m-line); }
html.m-ui.m-wide .m-commu-title { display:block; font-size:.88rem; color:var(--m-muted); margin-bottom:.7rem; }
html.m-ui.m-wide .m-commu-links { display:flex; gap:10px; flex-wrap:wrap; }
html.m-ui.m-wide .m-commu-link {
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:10px; text-decoration:none;
  background:color-mix(in srgb, var(--cranberry-900), #ffe9d2 8%); border:1.5px solid var(--m-line); color:#fff; font-weight:800; font-size:.9rem;
}
html.m-ui.m-wide .m-commu-link:hover { border-color:var(--m-accent); }
html.m-ui.m-wide .m-commu-link svg { width:16px; height:16px; }

/* ---- pied de page fin (écrans de navigation) ---- */
html.m-ui.m-wide body.m-chrome .app-footer {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  margin-top:34px; padding:22px max(28px, calc((100% - 1300px) / 2)); border-top:1px solid var(--m-line);
}
html.m-ui.m-wide body.m-chrome .social-links { display:none; }
html.m-ui.m-wide body.m-chrome .m-foot-note { display:block !important; margin:0; font-size:.88rem; color:var(--m-muted); }
html.m-ui.m-wide body.m-chrome .legal-links { margin:0; display:flex; gap:1.2rem; font-size:0; }
html.m-ui.m-wide body.m-chrome .legal-links a { font-size:.9rem; color:var(--m-muted); }

/* ---- pages Classement / Succès / Profil : centrées, sans barre du bas ---- */
html.m-ui.m-wide body[data-m-page="classement"] .global-leaderboard-sidebar:not([hidden]),
html.m-ui.m-wide body[data-m-page="succes"] #achievementsModal:not([hidden]) {
  bottom:0; padding:22px max(28px, calc((100% - 900px) / 2)) 40px;
}
html.m-ui.m-wide body[data-m-page="profil"] .profile-overlay { bottom:0; }
html.m-ui.m-wide body[data-m-page="profil"] #profilePanel:not([hidden]) {
  top:22px; bottom:28px; left:max(28px, calc(50% - 450px)); right:max(28px, calc(50% - 450px));
}
html.m-ui.m-wide body[data-m-page="succes"] .achievements-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }

/* ---- autres écrans sur grand écran : on retrouve des mises en page larges ---- */
html.m-ui.m-wide .panel { padding:28px 32px 30px; }
html.m-ui.m-wide .panel-title { font-size:1.9rem; }
html.m-ui.m-wide .gate-choices { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px; }
html.m-ui.m-wide .gate-choices-3 { grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
html.m-ui.m-wide .stage-question { font-size:clamp(1.6rem, calc(2.4vw / var(--qfo-z, 1)), 2.2rem); }
html.m-ui.m-wide .stage-panel { padding:28px 26px 30px; }
html.m-ui.m-wide .steps { justify-content:center; gap:8px; max-width:760px; margin:.8rem auto 1.2rem !important; }
html.m-ui.m-wide .step-tab { flex:none; font-size:.86rem; padding:.55rem 1.1rem; }
html.m-ui.m-wide .round-tabs { flex-wrap:wrap; justify-content:center; overflow:visible; }
html.m-ui.m-wide .express-btn { font-size:1.15rem; padding:.95rem 2rem; }

/* ---- ordinateur : retouches après les premières captures ---- */
html.m-ui .m-nowrap { white-space:nowrap; }
/* Accueil : places fixes dans la grille (sinon le fil d'activité remontait tout en haut). */
html.m-ui.m-wide .m-home > .js-site-banner { grid-row:1; }
html.m-ui.m-wide .m-home > .js-referral-note { grid-row:6; }
html.m-ui.m-wide .m-live { grid-row:7; }
html.m-ui.m-wide .m-hero-title { max-width:6ch; }
/* Bouton JOUER de la barre du haut : toujours jaune, même quand l'onglet est actif. */
html.m-ui.m-wide .m-nav-item.m-nav-play, html.m-ui.m-wide .m-nav-item.m-nav-play.active, html.m-ui.m-wide .m-nav-item.m-nav-play:hover {
  background:var(--m-accent); color:var(--m-accent-ink);
}
/* Décor des coins : retiré sur toutes les pages du nouveau design. */
html.m-ui.m-wide .corner { display:none; }
/* Parties solo / Quiz du jour / Ranked : cadre de jeu centré plutôt qu'étiré sur tout l'écran. */
html.m-ui.m-wide body:not(.party-mode) main .stage-panel { max-width:980px; margin-left:auto; margin-right:auto; }
/* Onglets d'une soirée : centrés aussi pendant le jeu. */
html.m-ui.m-wide body.play-mode .steps, html.m-ui.m-wide body .steps { align-self:center; margin-left:auto !important; margin-right:auto !important; }
/* Tablette (641 à 900 px) : accueil sur une colonne, comme sur téléphone, avec la barre du haut de l'ordinateur. */
@media (max-width:900px){
  html.m-ui.m-wide .m-home { display:flex; flex-direction:column; align-items:stretch; max-width:640px; gap:14px; }
  html.m-ui.m-wide .m-hero { margin:14px 6px 6px; }
  html.m-ui.m-wide .m-hero-title { max-width:none; font-size:clamp(2.4rem, calc(7vw / var(--qfo-z, 1)), 3.2rem); }
  html.m-ui.m-wide .m-section { margin:.6rem 2px -4px; }
  html.m-ui.m-wide .m-live { margin-top:4px; }
}
/* Pages de contenu (boutique, menus…) : un peu d'air sous la barre du haut. */
html.m-ui.m-wide body.m-chrome main > .panel, html.m-ui.m-wide body.m-chrome main > section.panel { margin-top:26px; }

/* ---- ordinateur : pages courtes centrées dans l'écran, pied de page toujours en bas ----
   (Multijoueur, Rejoindre, Créer, Ranked, recherche d'adversaire, parties solo… ; pas les soirées, qui ont leur
   propre mise en page). Une page plus haute que l'écran reste en haut et défile normalement. */
html.m-ui.m-wide body:not(.party-mode):not(.play-mode) #app { display:flex; flex-direction:column; min-height:calc(100vh / var(--qfo-z, 1)); }
html.m-ui.m-wide body:not(.party-mode):not(.play-mode) main {
  flex:1 0 auto; display:flex; flex-direction:column; padding-top:28px; padding-bottom:28px; box-sizing:border-box;
}
html.m-ui.m-wide body:not(.party-mode):not(.play-mode) main > :not(.m-hide) {
  margin-top:auto !important; margin-bottom:auto !important; width:100%; box-sizing:border-box;
}
html.m-ui.m-wide body:not(.party-mode):not(.play-mode) main > .panel { max-width:960px; margin-left:auto; margin-right:auto; }
html.m-ui.m-wide body:not(.party-mode):not(.play-mode) main > .m-only .m-home { margin-top:0; margin-bottom:0; }
/* Pied de page : texte à gauche, liens à droite, sur une seule ligne. */
html.m-ui.m-wide body.m-chrome .app-footer { flex-wrap:nowrap; }
html.m-ui.m-wide body.m-chrome .legal-links { width:auto; flex:none; opacity:1; }
/* Cadres de menu (Multijoueur, Rejoindre, Créer, Ranked, recherche d'adversaire…) : titre et texte centrés,
   comme les boutons, et un cadre un peu moins large. */
html.m-ui.m-wide body:not(.party-mode):not(.play-mode) main > .gate-panel { max-width:880px; }
html.m-ui.m-wide main > .gate-panel > .panel-title { text-align:center; }
html.m-ui.m-wide main > .gate-panel > .panel-lead { text-align:center; margin-left:auto; margin-right:auto; }

/* =====================================================================================================
   Réglage « Apparence » du profil (dans les deux styles) : Arène / Classique + thème du site
   ===================================================================================================== */
.ui-style-choice { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin:.4rem 0 .7rem; }
.ui-style-btn {
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem; text-align:left; cursor:pointer; padding:.7rem .75rem;
  border-radius:10px; border:2px solid var(--parchment-dim); background:var(--snow); color:var(--ink); font-family:inherit;
}
.ui-style-btn strong { font-size:.92rem; }
.ui-style-btn span { font-size:.72rem; color:var(--ink-soft); line-height:1.3; }
.ui-style-btn.active { border-color:var(--gold-500); background:color-mix(in srgb, var(--gold-500) 16%, var(--snow)); box-shadow:0 0 0 2px color-mix(in srgb, var(--gold-500) 35%, transparent); }
.ui-theme-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:0 0 1rem; font-size:.85rem; font-weight:700; color:var(--ink); }
.ui-theme-select { flex:1; max-width:62%; padding:.5rem .7rem; border-radius:9px; border:2px solid var(--parchment-dim); background:var(--snow); color:var(--ink); font:inherit; font-weight:700; }

/* =====================================================================================================
   L'âme de l'ancien design dans le nouveau : pointillés des plaques, décor de fête dans les coins (ordinateur),
   plaque « Soirée entre amis » avec son étoile pendant les soirées.
   ===================================================================================================== */
html.m-ui .panel::before {
  display:block; inset:8px; border:2px dashed color-mix(in srgb, var(--cranberry-700) 55%, transparent); border-radius:5px;
}
html.m-ui .m-hero::after {
  content:''; position:absolute; inset:8px; border:2px dashed color-mix(in srgb, var(--cranberry-700) 50%, transparent);
  border-radius:4px; pointer-events:none;
}
html.m-ui .m-hero > * { position:relative; z-index:1; }
html.m-ui .m-hero > .m-tape { position:absolute; z-index:2; }
html.m-ui .plaque-logo::before { display:block; inset:7px; border-radius:6px; }
html.m-ui .plaque-logo .crown-star { display:block; }
/* Ordinateur : boules, baies et étoile (ou citrouilles, confettis… selon le thème) dans les coins, sous la barre du haut. */
html.m-ui.m-wide body.m-chrome .corner { display:block !important; top:80px; z-index:-1; }

/* ---- Fonds d'écran de la boutique dans le nouveau design ----
   Le fond équipé remplace le fond sombre ; sur les fonds clairs (Cerisiers, Neige & ski), un voile sombre garde
   le texte blanc lisible (logo, « Modes de jeu », pied de page). */
html.m-ui body[data-bg-skin="sakura"] #app::before, html.m-ui body[data-bg-skin="ski"] #app::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background:rgba(22,8,14,.5);
}
html.m-ui body[data-bg-skin]:not([data-bg-skin="default"]) { background-attachment:fixed; }
/* Couleur des cartes sombres recalculée sur body, là où le thème (Noël, Halloween…) définit ses couleurs :
   déclarée sur :root, elle restait celle du thème par défaut. */
body { --m-card:color-mix(in srgb, var(--cranberry-900), #ffe9d2 6%); }

/* =====================================================================================================
   Pendant une partie ou une soirée (body.m-game) : barre fine en haut avec le logo, le mode et « Quitter »
   (c'était le petit badge crème en haut à droite) ; bulles amis / chat dans le nouveau style.
   ===================================================================================================== */
html.m-ui body.m-game .online-badge:not([hidden]) {
  position:relative !important; top:auto !important; right:auto !important; left:auto !important; align-self:stretch;
  width:auto !important; max-width:none !important; margin:0 !important; box-sizing:border-box; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.45rem .5rem;
  padding:10px max(16px, calc((100% - 1300px) / 2)); border:0; border-bottom:1px solid var(--m-line); border-radius:0;
  background:color-mix(in srgb, var(--cranberry-900) 85%, #000); box-shadow:none; color:var(--m-muted); font-size:.8rem;
}
html.m-ui body.m-game .online-badge::before {
  content:'QUIZ FIGHTER ONE'; margin-right:auto; white-space:nowrap; color:#fff;
  font-family:var(--m-heavy); font-size:.95rem; letter-spacing:.01em;
}
html.m-ui body.m-game .online-badge .btn-ghost { padding:.35rem .75rem; font-size:.74rem; }
html.m-ui body.m-game.has-hud:not(.party-mode) #stepContent { padding-top:.8rem; }

html.m-ui .chat-toggle {
  width:48px; height:48px; font-size:1.15rem; color:#fff;
  background:var(--m-card); border:1.5px solid var(--m-line); box-shadow:0 8px 20px rgba(0,0,0,.45);
}
html.m-ui .chat-toggle:hover { border-color:var(--m-accent); }
html.m-ui .chat-toggle .chat-badge { background:var(--ember); }

/* ---- Fin de partie solo : carte papier avec grand score et étoiles ---- */
html.m-ui .m-result { text-align:center; padding-top:30px; overflow:visible; }
html.m-ui .m-result .m-tape { position:absolute; z-index:2; }
html.m-ui .m-result .m-kicker { display:block; font-size:1.05rem; }
html.m-ui .m-res-stars { display:flex; justify-content:center; gap:.35rem; margin:.5rem 0 .1rem; font-size:2rem; line-height:1; }
html.m-ui .m-res-star { color:color-mix(in srgb, var(--ink) 18%, transparent); }
html.m-ui .m-res-star.on { color:var(--m-accent); text-shadow:2px 2px 0 var(--m-accent-ink); }
html.m-ui .m-res-score { font-family:var(--m-heavy); font-size:clamp(3.4rem, calc(15vw / var(--qfo-z, 1)), 5rem); line-height:1; color:var(--cranberry-800); margin:.2rem 0 .4rem; font-variant-numeric:tabular-nums; }
html.m-ui .m-res-score small { font-size:.42em; opacity:.65; margin-left:.1em; }
html.m-ui .m-result .panel-title { text-align:center; }
html.m-ui .m-result .panel-lead { text-align:center; margin-left:auto; margin-right:auto; }
html.m-ui .m-res-actions { justify-content:center; }

/* ---- Tutoriel du nouveau design : la zone expliquée passe devant le fond sombre, la bulle se met à côté ---- */
html.m-ui .m-spot { z-index:95 !important; box-shadow:0 0 0 3px var(--m-accent), 0 0 26px 6px color-mix(in srgb, var(--m-accent) 45%, transparent) !important; }
html.m-ui .m-home .m-spot { position:relative; border-radius:12px; }
html.m-ui #mobileTopbar.m-spot { position:relative; }
html.m-ui #tutorialModal.m-tuto-bottom { align-items:flex-end; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
html.m-ui #tutorialModal.m-tuto-left { justify-content:flex-start; padding-left:calc(4vw / var(--qfo-z, 1)); }
html.m-ui #tutorialModal.m-tuto-right { justify-content:flex-end; padding-right:calc(4vw / var(--qfo-z, 1)); }
/* bulle plus compacte quand elle accompagne une zone, pour ne pas la recouvrir */
html.m-ui:not(.m-wide) #tutorialModal:is(.m-tuto-top,.m-tuto-bottom) .tutorial-emoji { font-size:28px; margin:0 0 2px; }
html.m-ui:not(.m-wide) #tutorialModal:is(.m-tuto-top,.m-tuto-bottom) .tutorial-inner { padding-top:14px; padding-bottom:14px; }
html.m-ui #tutorialModal.m-tuto-top { align-items:flex-start; padding-top:calc(18px + env(safe-area-inset-top, 0px)); }
html.m-ui.m-wide #tutorialModal.m-tuto-bottom { padding-bottom:28px; }
html.m-ui #tutorialModal .tutorial-inner { max-width:min(420px, calc(92vw / var(--qfo-z, 1))); }

/* ---- Bandeaux d'annonce / d'événement dans le nouveau design : carte sombre, texte clair ---- */
html.m-ui .m-home .site-banner { max-width:none; margin:0 0 10px; background:var(--m-card); border:1.5px solid var(--m-accent); color:#fff; border-radius:12px; }
html.m-ui .m-home .site-banner-close { color:var(--m-muted); }
html.m-ui .m-home .event-banner { background:linear-gradient(100deg, color-mix(in srgb, var(--m-accent) 22%, var(--m-card)), var(--m-card) 70%); }
html.m-ui .m-home .event-banner strong { color:var(--m-accent); }
html.m-ui .m-home .event-banner-goal { color:var(--m-muted); opacity:1; }

/* ---- Fil « Ça se passe maintenant » : avatar + cadre + couleur de pseudo + titre, comme au classement ---- */
html.m-ui .m-act-av { width:40px; height:40px; background:none; border-radius:0; display:flex; align-items:center; justify-content:center; }
html.m-ui .m-act-av .avatar-framed { margin:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; background:rgba(255,255,255,.08); }
html.m-ui .m-act-av .avatar-img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
html.m-ui.m-wide .m-act-av { width:46px; height:46px; }
html.m-ui.m-wide .m-act-av .avatar-framed { width:32px; height:32px; font-size:20px; }
html.m-ui .m-act-text .pseudo-title-badge { font-size:.68em; vertical-align:middle; }

/* ---- Mode Survie dans le nouveau design ---- */
html.m-ui .m-modes .m-mode-wide { grid-column:1 / -1; }
html.m-ui .survie-strip { background:var(--m-card); border:1.5px solid var(--m-accent); color:#fff; }
html.m-ui .survie-strip-badge { background:var(--m-accent); color:var(--m-accent-ink); }
html.m-ui .survie-hud { background:var(--m-card); border:1.5px solid var(--m-line); }
html.m-ui .survie-bonus-btn { border-color:var(--m-accent); background:color-mix(in srgb, var(--m-accent) 18%, transparent); }
html.m-ui .survie-hud .survie-quick-btn { border-color:var(--m-accent); background:color-mix(in srgb, var(--m-accent) 18%, transparent); }
html.m-ui .survie-hud .survie-quick-btn:hover { background:color-mix(in srgb, var(--m-accent) 32%, transparent); }
html.m-ui .survie-quick-count { background:var(--m-accent); color:var(--m-accent-ink); }

/* ---- Accueil ordinateur : plus de bandeau « soirée » ; cartes de mode compactes, colonne alignée sur le Quiz du jour ---- */
html.m-ui.m-wide .m-hero { grid-row:2 / span 3; }
html.m-ui.m-wide .m-missions { grid-row:4; }
html.m-ui.m-wide .m-modes { align-content:stretch; }
html.m-ui.m-wide .m-mode { min-height:0; padding:14px 18px; gap:.55rem; }
html.m-ui.m-wide .m-mode-icon .m-ico { width:26px; height:26px; }
html.m-ui.m-wide .m-modes .m-mode-wide { flex-direction:row; align-items:center; justify-content:flex-start; gap:.9rem; }
html.m-ui.m-wide .m-home { grid-template-rows:auto auto 1fr auto; }
html.m-ui.m-wide .m-modes { grid-auto-rows:1fr; }
html.m-ui.m-wide .m-home > .m-modes { align-self:stretch; height:auto; }