/* ============================================================
   KWIZZ — design "sticker arcade" : papier crème, encre chaude,
   contours épais, ombres dures, boutons 3D à la Duolingo.
   ============================================================ */

:root {
  --sticker: #2b1c06; /* couleur du relief « autocollant » — en clair = l'encre */
  --paper: #fff6eb;
  --paper-2: #ffedd6;
  --ink: #2b1c06;
  --ink-60: #6f5d42;
  --ink-30: #cbbda5;
  --card: #ffffff;
  --yellow: #ffc400;
  --yellow-d: #dfa400;
  --red: #ff4d42;
  --red-d: #d63a30;
  --green: #2fbe5f;
  --green-d: #23984a;
  --blue: #4d7cff;
  --blue-d: #3a61d6;
  --orange: #ff8a00;
  --pink: #ff5ca8;
  --teal: #00b8a9;
  --r: 18px;
  --bw: 2.5px;
  --shadow: 0 4px 0 var(--ink);
  --font-d: 'Titan One', 'Arial Black', sans-serif;
  --font-b: 'Nunito', -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-b);
  font-weight: 700;
  background: var(--paper);
  background-image: radial-gradient(rgba(43, 28, 6, 0.055) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--ink);
  overflow-x: hidden;
  touch-action: pan-y;
}
img { display: block; }
/* aucune image/vidéo ne doit être enregistrable en appui long (iOS "Enregistrer l'image") ni glissable */
img, video, canvas, .vic-thumb, .fc-media {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}
button { font-family: inherit; cursor: pointer; color: inherit; } /* iOS 26 : sans ça, texte bleu système */
/* une app, pas une page web : le texte ne se sélectionne pas au tap */
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
input { font-family: inherit; }

#app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; }
.screen { min-height: 100dvh; padding: 18px 18px 110px; animation: screen-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); }
.screen.no-nav { padding-bottom: 24px; }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

h1, h2, h3, .display { font-family: var(--font-d); font-weight: 400; letter-spacing: 0.5px; }
h2 { font-size: 21px; }
.muted { color: var(--ink-60); }
.small { font-size: 13px; }
.center { text-align: center; }

/* ---------- logo ---------- */
.logo { font-family: var(--font-d); font-size: 44px; display: inline-flex; align-items: center; gap: 2px; line-height: 1; }
.logo .bolt { width: 0.72em; height: 0.95em; margin: 0 1px; transform: rotate(6deg); }
.logo-sm { font-size: 22px; }

/* ---------- intro vidéo (Seedance) ---------- */
.intro-video { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }
.intro-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 1; animation: intro-poster-zoom 2.6s ease-out both; }
.intro-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 2; opacity: 0; transition: opacity .25s ease; }
/* la vidéo est 9:16 : plein cadre sur mobile (portrait). En paysage/desktop on montre tout, sans sur-zoom. */
@media (orientation: landscape) { .intro-poster, .intro-video video { object-fit: contain; } }
.intro-video video.is-playing { opacity: 1; } /* révélée uniquement si l'autoplay a réellement démarré (pas de ▶ parasite) */
.intro-out { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
@keyframes intro-poster-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- boutons 3D ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--bw) solid var(--ink); border-radius: 16px;
  background: var(--card); color: var(--ink);
  font-family: var(--font-b); font-weight: 900; font-size: 16px;
  padding: 13px 20px; box-shadow: 0 5px 0 var(--sticker);
  transition: transform 0.06s, box-shadow 0.06s; user-select: none; text-decoration: none;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sticker); }
.btn.primary { background: var(--yellow); }
.btn.danger { background: var(--red); color: #fff; }
.btn.green { background: var(--green); color: #fff; }
.btn.blue { background: var(--blue); color: #fff; }
.btn.big { font-size: 19px; padding: 17px 26px; border-radius: 20px; }
.btn.block { display: flex; width: 100%; }
.btn.small { font-size: 13px; padding: 8px 13px; border-radius: 12px; box-shadow: 0 3px 0 var(--sticker); }
.btn.small:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn .em { font-size: 1.2em; }

/* ---------- cartes ---------- */
.card {
  background: var(--card); border: var(--bw) solid var(--ink);
  border-radius: var(--r); box-shadow: var(--shadow); padding: 16px;
}
.tilt-l { transform: rotate(-0.6deg); }
.tilt-r { transform: rotate(0.5deg); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 5px 12px; font-weight: 900; font-size: 13px; background: var(--card);
  box-shadow: 0 2.5px 0 var(--sticker);
}
.chip-hot { background: var(--yellow); animation: pulse 1.4s infinite; }
.chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 999px; background: var(--red); color: #fff; border: 2px solid var(--ink); font-size: 11px; font-weight: 900; line-height: 1; }
/* gros bouton "chambrer" mis en avant sur l'écran de victoire */
.btn.taunt-big { background: var(--yellow); font-size: 18px; padding: 16px 14px; box-shadow: 0 5px 0 var(--sticker); animation: taunt-wob 1.6s ease-in-out infinite; }
.btn.taunt-big:active { animation: none; }
@keyframes taunt-wob { 0%, 100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(1deg) scale(1.02); } }
/* accessibilité : "tout en plus gros" — agrandit toute l'interface */
body.big-ui { zoom: 1.18; }
@supports not (zoom: 1) { body.big-ui { font-size: 118%; } }

/* ---------- boutique d'emotes ---------- */
.rar-free { --rar: #9fb0c3; } .rar-commune { --rar: #6ec06e; } .rar-rare { --rar: #3f9bff; } .rar-epique { --rar: #ab5cff; } .rar-legende { --rar: #ffb300; }
.rar-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: var(--rar); vertical-align: middle; }
.emote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 8px; }
.emote-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 3px 8px; border: 2.5px solid var(--ink); border-bottom: 5px solid var(--rar); border-radius: 15px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); font-family: inherit; cursor: pointer; }
.emote-card:not([disabled]):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.emote-card .emote-face { font-size: 30px; line-height: 1; }
.emote-card .emote-name { font-weight: 900; font-size: 11px; text-align: center; }
.emote-tag { font-size: 10px; font-weight: 900; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; border: 2px solid var(--ink); }
.emote-tag.price { background: #fff3b0; }
.emote-tag.owned { background: var(--green); color: #fff; }
.emote-tag.locked { background: #e9e2d4; color: var(--ink-60); }
.emote-card.st-owned { opacity: .72; cursor: default; }
.emote-card.st-locked { opacity: .62; }
.emote-card.st-poor .emote-tag.price { background: #ffd9d9; }
.emote-card.rar-epique { box-shadow: 0 3px 0 var(--sticker), 0 0 0 3px rgba(171,92,255,.18); }
.emote-card.rar-legende { box-shadow: 0 3px 0 var(--sticker), 0 0 14px rgba(255,179,0,.55); background: linear-gradient(160deg, #fff8e6, #ffedb0); }
.emote-card.rar-legende .emote-face { animation: emote-glow 2.2s ease-in-out infinite; }
@keyframes emote-glow { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.14) rotate(4deg); } }
.emote-rar { display: inline-block; font-weight: 900; font-size: 12px; padding: 2px 13px; border-radius: 999px; border: 2px solid var(--ink); background: var(--rar); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.emote-face.big { font-size: 76px; display: block; line-height: 1; }
.emote-face.big.rar-legende { animation: emote-glow 2.2s ease-in-out infinite; }
.emote-send-row { display: flex; flex-wrap: wrap; gap: 8px; }
.emote-send { font-size: 25px; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 2.5px solid var(--ink); border-bottom: 5px solid var(--rar); border-radius: 13px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); cursor: pointer; }
.emote-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.emote-slap { position: fixed; inset: 0; margin: auto; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; font-size: 128px; z-index: 9999; pointer-events: none; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); animation: emote-slap 1.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes emote-slap { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 14% { transform: scale(1.35) rotate(8deg); opacity: 1; } 30% { transform: scale(1) rotate(-4deg); } 68% { transform: scale(1) rotate(-4deg); opacity: 1; } 100% { transform: scale(1.1) translateY(-46px); opacity: 0; } }

/* ---------- avatars ---------- */
.avatar { border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); background: var(--paper-2); object-fit: cover; }
.av-sm { width: 40px; height: 40px; }
.av-md { width: 56px; height: 56px; }
.av-lg { width: 96px; height: 96px; border-width: 3px; }
.av-xl { width: 140px; height: 140px; border-width: 3.5px; box-shadow: 0 5px 0 var(--sticker); }

/* avatar cartoon ⇄ vraie photo qui se retourne tout seul (profil) */
.pflip { display: inline-block; perspective: 800px; }
.pflip-in { position: relative; display: inline-block; transform-style: preserve-3d; animation: pflip 7s ease-in-out infinite; cursor: pointer; }
.pflip-in.paused { animation-play-state: paused; }
.pflip-face { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pflip-face.pflip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
@keyframes pflip { 0%, 42% { transform: rotateY(0deg); } 50%, 92% { transform: rotateY(180deg); } 100% { transform: rotateY(0deg); } }
@media (prefers-reduced-motion: reduce) { .pflip-in { animation-duration: 14s; } }

/* ---------- onboarding ---------- */
.splash { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100dvh; gap: 18px; padding: max(30px, 7dvh) 24px 40px; }
.mascot-wrap { animation: float 2.6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.tagline { font-size: 17px; font-weight: 800; color: var(--ink-60); }
.field {
  width: 100%; border: var(--bw) solid var(--ink); border-radius: 16px;
  padding: 15px 16px; font-size: 18px; font-weight: 800; background: var(--card);
  box-shadow: inset 0 3px 0 rgba(43, 28, 6, 0.08); outline: none; color: var(--ink);
}
.field::placeholder { color: var(--ink-30); }
.field:focus { border-color: var(--blue); }

.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
.avatar-grid img { width: 100%; height: auto; border-radius: 50%; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); transition: transform 0.1s; }
.avatar-grid img.sel { outline: 4px solid var(--yellow); transform: scale(1.08); }

.style-tabs { display: flex; gap: 8px; }
.style-tabs .tab { flex: 1; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--card); font-weight: 900; padding: 9px 4px; box-shadow: 0 3px 0 var(--sticker); font-size: 14px; }
.style-tabs .tab.on { background: var(--yellow); }

/* ---------- home ---------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.topbar .who { flex: 1; min-width: 0; }
.topbar .who .name { font-weight: 900; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level-wrap { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.level-bar { flex: 1; height: 10px; border: 2px solid var(--ink); border-radius: 99px; background: var(--card); overflow: hidden; max-width: 130px; }
.level-bar i { display: block; height: 100%; background: var(--blue); border-radius: 99px; transition: width 0.6s cubic-bezier(0.34, 1.3, 0.64, 1); }
.lvl-num { font-size: 12px; font-weight: 900; color: var(--ink-60); }

.streak-chip { background: #fff3d6; font-size: 15px; }
.streak-chip.hot { background: var(--yellow); animation: pulse 1.6s infinite; }
.streak-chip .flame { animation: flame 0.9s ease-in-out infinite alternate; display: inline-block; }
@keyframes flame { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.18) rotate(5deg); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

.cta-duel {
  position: relative; overflow: hidden;
  width: 100%; margin: 6px 0 18px; padding: 14px 16px; min-height: 118px;
  background: #ffcc06; border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 0 6px 0 var(--sticker); display: flex; align-items: center; justify-content: space-between; gap: 6px;
  transition: transform 0.07s, box-shadow 0.07s; text-align: left; font-family: inherit;
}
.cta-duel:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--sticker); }
.cta-txt { display: flex; flex-direction: column; align-items: flex-start; flex: 1; z-index: 1; }
.cta-l1 { font-family: var(--font-d); font-size: 25px; line-height: 1; display: flex; align-items: center; gap: 6px; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.cta-l2 { font-family: var(--font-d); font-size: 46px; line-height: .92; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.cta-sub { font-weight: 900; font-size: 13px; color: var(--ink); margin-top: 7px; }
.cta-bolt { width: 22px; height: 28px; animation: flame 0.8s ease-in-out infinite alternate; }
.cta-monster { width: 132px; height: 132px; object-fit: contain; flex: none; margin: -6px -12px -10px 0; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.section-title h2 { font-size: 18px; position: relative; }
.section-title h2::after {
  content: ''; position: absolute; left: 1px; bottom: -4px; width: 40px; height: 6px;
  background: var(--yellow); border-radius: 3px; transform: rotate(-1.6deg);
}

/* icônes maison */
.ic { display: inline-block; vertical-align: -3px; flex: none; }
.btn .ic { vertical-align: -3.5px; }
.chip .ic, .lvl-num .ic, .tag .ic, .small .ic { vertical-align: -2px; }
h2 .ic { vertical-align: -2.5px; }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d;
  border: 2px solid var(--ink); margin-right: 5px; vertical-align: 0;
  animation: livepulse 1.5s ease-in-out infinite;
}
@keyframes livepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,77,.35); } 50% { box-shadow: 0 0 0 4px rgba(255,77,77,.12); } }
.section-title .more { font-size: 13px; font-weight: 900; color: var(--blue); background: none; border: none; }

.duel-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; position: relative; }
.duel-row .mid { flex: 1; min-width: 0; }
.duel-row .who { display: block; font-weight: 900; font-size: 15px; }
.duel-row .sub { display: block; font-size: 12.5px; color: var(--ink-60); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel-row .score { font-family: var(--font-d); font-size: 20px; }
.duel-row.attention { background: #fff8dc; }
.badge-dot { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); border: 2.5px solid var(--ink); color: #fff; font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; animation: pulse 1.2s infinite; }
.tag { font-size: 11px; font-weight: 900; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 7px; box-shadow: 0 2px 0 var(--sticker); }
.tag.turn { background: var(--yellow); }
.tag.wait { background: var(--paper-2); color: var(--ink-60); }
.tag.win { background: var(--green); color: #fff; }
.tag.lose { background: var(--red); color: #fff; }
.tag.tie { background: var(--blue); color: #fff; }

.quest-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; }
.quest-row .em { font-size: 24px; }
.quest-row .mid { flex: 1; min-width: 0; }
.quest-row .label { display: block; font-weight: 900; font-size: 14px; }
.qbar { display: block; height: 14px; border: 2px solid var(--ink); border-radius: 99px; background: var(--paper-2); overflow: hidden; margin-top: 6px; position: relative; }
.qbar i { display: block; height: 100%; background: var(--green); transition: width 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
.qbar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 900; color: var(--ink); }
.quest-claim { background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 12px; font-weight: 900; padding: 8px 12px; box-shadow: 0 3px 0 var(--sticker); animation: pulse 1.4s infinite; font-size: 13px; }

.league-card { display: flex; align-items: center; gap: 14px; padding: 14px; }
.league-card .cup { font-size: 34px; }
.league-card .mid { flex: 1; }
.rankpill { font-family: var(--font-d); font-size: 22px; }

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); left: 50%; transform: translateX(-50%);
  width: min(440px, calc(100% - 28px)); display: flex; gap: 8px;
  /* VERRE LIQUIDE : la matière vient du flou + de la saturation, pas d'un aplat.
     Un liseré clair en haut (la lumière qui accroche), un reflet interne, et une
     ombre large et douce qui décolle la barre du contenu. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .26));
  -webkit-backdrop-filter: blur(34px) saturate(210%);
  backdrop-filter: blur(34px) saturate(210%);
  border: 1.5px solid rgba(255, 255, 255, .78);
  outline: 1px solid rgba(43, 28, 6, .10); outline-offset: -1.5px;
  border-radius: 26px;
  box-shadow: 0 10px 34px rgba(43, 28, 6, .18), 0 2px 10px rgba(43, 28, 6, .10),
              inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);
  padding: 8px; z-index: 40;
}
body.theme-dark .bottom-nav {
  background: linear-gradient(180deg, rgba(46, 52, 70, .55), rgba(20, 22, 31, .42));
  border-color: rgba(255, 255, 255, .16); outline-color: rgba(0, 0, 0, .35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), inset 0 1.5px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .06);
}

@supports not (backdrop-filter: blur(2px)) { .bottom-nav { background: var(--card); } }
.bottom-nav button { flex: 1; border: none; background: none; font-weight: 900; font-size: 12px; padding: 8px 4px; border-radius: 13px; color: var(--ink-60); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bottom-nav button .ico { font-size: 20px; height: 24px; display: flex; align-items: center; justify-content: center; }
.bottom-nav button .ico .ic { vertical-align: 0; }
.bottom-nav button.on { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); }

/* ---------- matchmaking ---------- */
.searching { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; gap: 22px; padding: 24px; }
.radar { position: relative; width: 150px; height: 150px; }
.radar .ring { position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: 50%; opacity: 0; animation: radar 1.8s infinite; }
.radar .ring:nth-child(2) { animation-delay: 0.6s; }
.radar .ring:nth-child(3) { animation-delay: 1.2s; }
@keyframes radar { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
.radar .avatar { position: absolute; inset: 25px; width: 100px; height: 100px; }
.cycling-name { font-family: var(--font-d); font-size: 24px; min-height: 32px; }

.vs-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 10px 0; }
.vs-burst { font-family: var(--font-d); font-size: 44px; color: var(--red); text-shadow: 2.5px 2.5px 0 var(--ink); transform: rotate(-6deg); animation: stamp-in 0.35s cubic-bezier(0.34, 1.8, 0.64, 1); }
.p-col { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 900; }
.count { font-family: var(--font-d); font-size: 88px; animation: stamp-in 0.3s cubic-bezier(0.34, 1.8, 0.64, 1); }
@keyframes stamp-in { from { transform: scale(2.4) rotate(-14deg); opacity: 0; } }

/* ---------- duel ---------- */
.duel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.round-dots-row { display: flex; justify-content: center; margin-bottom: 14px; }
.pace-pill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; padding: 5px 16px; border-radius: 999px; border: 2.5px solid var(--ink); font-family: var(--font-d); box-shadow: 0 3px 0 var(--sticker); text-align: center; white-space: nowrap; }
.pace-pill b { font-size: 11.5px; letter-spacing: .3px; }
.pace-pill > span { font-size: 16px; }
.pace-pill.av { background: var(--green); color: #fff; }
.pace-pill.re { background: var(--red); color: #fff; }
.pace-pill.eq { background: var(--card); color: var(--ink-60); }
.pace-pill.bump { animation: pace-bump .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes pace-bump { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
.pscore { display: flex; align-items: center; gap: 8px; font-family: var(--font-d); font-size: 20px; }
.round-dots { display: flex; gap: 5px; }
.round-dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); }
.round-dots i.on { background: var(--yellow); }
.round-dots i.done { background: var(--ink); }

.cat-banner { display: inline-flex; align-items: center; gap: 7px; border: 2.5px solid var(--ink); border-radius: 999px; padding: 7px 15px; font-weight: 900; color: #fff; box-shadow: 0 3px 0 var(--sticker); font-size: 14px; margin-bottom: 12px; }

/* la carte de question — l'objet signature de KWIZZ */
.qcard2 {
  border: var(--bw) solid var(--ink); border-radius: 20px; background: var(--card);
  box-shadow: 0 6px 0 var(--sticker); margin-bottom: 13px; overflow: hidden; transform: rotate(-1deg);
  animation: card-deal 0.32s cubic-bezier(0.34, 1.5, 0.64, 1);
}
@keyframes card-deal { from { transform: rotate(-6deg) translateY(-26px) scale(0.94); opacity: 0; } }
.qcard2 .qhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; color: #fff; font-weight: 900; font-size: 14px;
  border-bottom: var(--bw) solid var(--ink); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
.qcard2 .qhead .qn { font-family: var(--font-d); font-size: 12.5px; letter-spacing: 0.5px; background: rgba(0, 0, 0, 0.24); padding: 3px 10px; border-radius: 99px; text-shadow: none; }
.qcard2 .qbody { padding: 20px 16px; text-align: center; min-height: 104px; display: flex; align-items: center; justify-content: center; }
.qcard2 .qtext { font-size: 21.5px; font-weight: 900; line-height: 1.35; }
.qcard2 .qfuse { height: 14px; border-top: 2.5px solid var(--ink); background: #f2e6d4; }
.qcard2 .qfuse i { display: block; height: 100%; background: var(--green); transform-origin: left; }
/* ---- chrono numérique central (dynamique pendant la question, cf. mock) ---- */
.timer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--card); box-shadow: 0 3px 0 var(--sticker); font-family: var(--font-d); }
.timer-pill .tp-ic { font-size: 15px; }
.timer-pill b { font-size: 19px; letter-spacing: .5px; }
.timer-pill.warn { background: #fff3d6; }
.timer-pill.danger { background: #ffe0e0; color: var(--red); border-color: var(--red); }
.timer-pill.tick { animation: tp-tick .5s ease; }
@keyframes tp-tick { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }
/* ---- pied "Pièces disponibles" (cf. mock) ---- */
.coin-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 4px 0; padding-top: 12px; border-top: 2px dashed rgba(43,28,6,.18); font-weight: 900; font-size: 14px; color: var(--ink-60); }
.coin-foot .cf-l { display: inline-flex; align-items: center; gap: 8px; }
.coin-foot b { font-family: var(--font-d); font-size: 22px; color: var(--ink); }
/* --- gameplay calé sur le mock : gros profils + score, chrono, manche, espace bouton, coins --- */
.duel-top { margin-bottom: 8px; }
.duel-top .pscore { font-size: 27px; gap: 9px; }
.duel-top .pscore .avatar { width: 54px; height: 54px; border-width: 3px; }
.duel-top .pscore:first-child .avatar { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px #3f8ae8; }  /* anneau bleu = toi */
.duel-top .pscore:last-child .avatar { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--sticker); } /* anneau sombre = adversaire */
.timer-pill { padding: 9px 22px; gap: 8px; }
.timer-pill .tp-ic { font-size: 18px; }
.timer-pill b { font-size: 25px; }
.round-dots { gap: 6px; }
.round-dots i { width: 12px; height: 12px; }
.round-dots-row { margin-bottom: 16px; }
.joker-btn { margin: 26px auto 4px; padding: 12px 24px; font-size: 14.5px; }
.coin-foot { margin-top: 18px; font-size: 15px; }
.coin-foot b { font-size: 26px; }
/* icônes image (assets fournis) */
.ic-coin-img { vertical-align: middle; object-fit: contain; display: inline-block; }
.timer-pill .tp-ic { width: 22px; height: 26px; object-fit: contain; display: inline-block; }
.coin-foot .cf-l { display: inline-flex; align-items: center; gap: 9px; }
.coin-foot .cf-coins { width: 34px; height: 26px; object-fit: contain; }
.coin-foot .cf-r { display: inline-flex; align-items: center; gap: 7px; }
/* popup victoire "chambre-le" : image de marque + gros score */
.vt-hero { width: 100%; display: block; height: 190px; object-fit: cover; object-position: 42% 30%; border-bottom: 3px solid var(--ink); }
.vt-score { font-family: var(--font-d); font-size: 42px; line-height: 1; color: var(--ink); }
/* écran résultat : plein écran SANS scroll + responsive (clamp), boutons collés en bas */
.screen.no-nav.result-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding-top: calc(env(safe-area-inset-top, 0px) + 26px); padding-bottom: 10px; }
.result-screen .result-actions { margin-top: auto; width: 100%; }
.result-screen .stamp { flex: none; }
.lose-hero { width: 100%; max-width: 290px; display: block; margin: clamp(4px, 1vh, 10px) auto clamp(8px, 1.6vh, 14px); height: clamp(92px, 15vh, 150px); object-fit: cover; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--sticker); }
.vs-big { gap: 16px; align-items: center; margin: 0 0 3px; }
.vs-big .avatar { width: clamp(52px, 14vw, 66px); height: clamp(52px, 14vw, 66px); border-width: 3px; }
.vs-big .p-col { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.vs-big .pc-name { font-weight: 900; font-size: 14px; margin-top: 4px; }
.vs-big .pc-time { font-weight: 900; font-size: 12px; color: var(--ink-60); white-space: nowrap; }
.vs-big .vs-score { font-family: var(--font-d); font-size: clamp(34px, 9.5vw, 44px); line-height: 1; }
/* récap des manches : grille alignée, catégorie en pastille, manche gagnée surlignée */
.result-rounds { display: block; width: 100%; max-width: 350px; margin: 4px auto 0; padding: 10px 12px 8px; }
.result-rounds .rr-line { display: grid; grid-template-columns: 34px 1fr 34px 1fr; align-items: center; gap: 6px; margin-bottom: clamp(3px, 0.6vh, 6px); }
.result-rounds .rr-headline { margin-bottom: 5px; }
.result-rounds .rh { font-size: 12px; font-weight: 900; color: var(--ink-60); text-align: center; }
.result-rounds .rr-cat { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--paper-2); border: 2px solid rgba(43, 28, 6, .14); border-radius: 9px; }
.result-rounds .rside { display: flex; gap: 6px; justify-content: center; padding: 5px 6px; border-radius: 11px; }
.result-rounds .rside.won { background: rgba(76, 190, 107, .16); box-shadow: inset 0 0 0 2px rgba(76, 190, 107, .5); }
.result-rounds .rsq { width: clamp(17px, 5.2vw, 21px); height: clamp(17px, 5.2vw, 21px); border-radius: 6px; }
.result-rounds .rr-vs { font-family: var(--font-d); font-size: 12.5px; color: var(--ink-60); text-align: center; white-space: nowrap; }
.result-rounds .rr-foot { font-size: 11.5px; font-weight: 900; color: var(--ink-30); text-align: center; margin-top: 7px; }
/* réponse ACHETÉE aux pièces (joker) : la pièce se voit partout — pour le seum */
.rsq { position: relative; }
.rsq .rsq-jk { position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(43,28,6,.4)); }
.opp-jk { position: absolute; top: -8px; left: -8px; }
.opp-jk .ic-coin-img { filter: drop-shadow(0 1px 0 rgba(43,28,6,.4)); }
.rv-who .rv-jk { width: 15px; height: 15px; object-fit: contain; border: none !important; border-radius: 0 !important; margin-left: -4px; vertical-align: top; }
.jk-line { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 900; color: var(--ink-60); margin-top: 8px; }
.jk-line b { color: var(--ink); }
/* CTA photo du sheet "Chambre-le" : l'image donne envie de faire la photo de vainqueur */
.taunt-photo-cta { position: relative; display: block; width: 100%; padding: 0; margin: 10px 0 2px; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 0 var(--sticker); background: #000; font-family: inherit; cursor: pointer; }
.taunt-photo-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sticker); }
.taunt-photo-cta > img { width: 100%; height: clamp(170px, 26vh, 220px); object-fit: cover; object-position: 50% 38%; display: block; opacity: .92; }
.taunt-photo-cta .tpc-label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px 9px; background: linear-gradient(transparent, rgba(20, 12, 2, .82) 40%); color: #fff; font-family: var(--font-d); font-size: 16px; text-align: left; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.taunt-photo-cta .tpc-label small { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 11.5px; opacity: .9; }
/* partie en cours : on explique pourquoi la photo n'est pas là plutôt que de la proposer pour rien */
.taunt-photo-lock { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; padding: 11px 13px; border: 2.5px dashed rgba(43, 28, 6, .3); border-radius: 16px; background: var(--paper-2); color: var(--ink-60); font-weight: 900; font-size: 13px; line-height: 1.35; text-align: left; }
.taunt-photo-lock > span { flex: 1; }
.taunt-photo-lock b { color: var(--ink); }
.taunt-photo-lock svg { flex: none; opacity: .55; }
/* vanne envoyée avec la carte de partie : texte sous la carte */
.duel-card .dc-txt { display: block; margin-top: 6px; padding-top: 6px; border-top: 1.5px dashed rgba(43, 28, 6, .2); font-weight: 800; }
/* ---- onglet Amis fusionné : sous-onglets Amis | Chats (tap ou swipe) ---- */
.seg2 { display: flex; flex: 1; border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; box-shadow: 0 2px 0 var(--sticker); background: var(--card); margin-bottom: 12px; }
.seg2 .seg-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font-family: inherit; font-weight: 900; font-size: 14px; background: transparent; border: none; color: var(--ink-60); }
.seg2 .seg-opt.on { background: var(--yellow); color: var(--ink); }
.seg-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; border: 2px solid var(--ink); font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
div[style*="display:flex"] > .seg2 { margin-bottom: 0; }
/* ============================================================
   LES QUIZ — 3 posters d'arcade dans « Modes de jeu » (onglet Jouer)
   Chacun a son identité : Culture G jaune éclair, Drapeaux bleu-blanc-rouge,
   Géopolitique bleu nuit. Le reste (Conquête, Au plus proche, MOTAMO) garde
   ses grandes bannières : les quiz sont une FAMILLE, présentée en rangée.
   ============================================================ */
.qz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.qz-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 19px 7px 9px; overflow: hidden; text-align: center;
  font-family: inherit; color: #fff; border: var(--bw) solid var(--ink); border-radius: 16px;
  box-shadow: var(--shadow);
}
.qz-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.qz-card .qz-tag { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); font-family: var(--font-d); font-size: 8.5px; letter-spacing: 1.4px; background: rgba(43, 28, 6, .85); color: #fff; border-radius: 0 0 8px 8px; padding: 2.5px 9px 2px; z-index: 2; }
/* zones à hauteur FIXE → les 3 cartes s'alignent au pixel quel que soit le texte */
.qz-card .qz-em { height: 38px; display: flex; align-items: center; font-size: 29px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(43, 28, 6, .35)); }
.qz-card .qz-name { height: 30px; display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 11.5px; line-height: 1.1; letter-spacing: .2px; text-shadow: 0 1.5px 0 rgba(43, 28, 6, .45); }
.qz-card .qz-sub { height: 14px; font-size: 9.5px; font-weight: 900; opacity: .95; line-height: 14px; white-space: nowrap; overflow: hidden; max-width: 100%; text-shadow: 0 1px 2px rgba(43, 28, 6, .45); }
.qz-card .qz-play, .qz-card .qz-soon { margin-top: 9px; width: 100%; font-family: var(--font-d); font-size: 11.5px; letter-spacing: .4px; border-radius: 99px; padding: 5px 0; }
.qz-card .qz-play { color: var(--ink); background: #fff; border: 2px solid var(--ink); box-shadow: 0 2.5px 0 var(--sticker); }
.qz-card .qz-soon { font-size: 10px; color: #fff; background: rgba(43, 28, 6, .5); border: 2px dashed rgba(255, 255, 255, .6); padding: 5.5px 0; }
/* les 3 identités : fond dégradé + GROS emoji en filigrane (même langage pour les trois) */
.qz-card::after { position: absolute; right: -16px; bottom: 12px; font-size: 76px; opacity: .17; transform: rotate(12deg); pointer-events: none; }
.qz-card.qz-cg { background: linear-gradient(160deg, #ffd23e 0%, var(--yellow) 55%, #eaa800 100%); color: var(--ink); }
.qz-card.qz-cg .qz-name { text-shadow: 0 1.5px 0 rgba(255, 255, 255, .5); }
.qz-card.qz-cg .qz-sub { text-shadow: none; }
.qz-card.qz-cg::after { content: '⚡'; }
.qz-card.qz-fl { background: linear-gradient(160deg, #5a86ff 0%, #3f66e0 100%); }
.qz-card.qz-fl::after { content: '🚩'; }
.qz-card.qz-gp { background: linear-gradient(160deg, #2b2550 0%, #3b3266 60%, #17324e 100%); }
.qz-card.qz-gp::after { content: '🌐'; right: auto; left: -16px; transform: rotate(-10deg); }
.qz-card.qz-gp:disabled { filter: saturate(.6) brightness(.92); }

/* ============================================================
   NOUVEAU DUEL — wizard en 3 temps (adversaire → mode → mise)
   ============================================================ */
.nd-sheet { min-height: 330px; }
/* étape 1 : potes en cartes scrollables */
.nd-strip { display: flex; gap: 10px; overflow-x: auto; padding: 10px 2px 12px; margin: 0 -2px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nd-strip::-webkit-scrollbar { display: none; }
.nd-fr {
  flex: 0 0 auto; width: 108px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 9px; font-family: inherit; color: var(--ink); text-align: center;
  background: var(--card); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow);
}
.nd-fr:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.nd-fr .nd-fr-img, .nd-fr .pflip { width: 56px; height: 56px; }
.nd-fr .nd-fr-img { border-radius: 50%; border: 2.5px solid var(--ink); object-fit: cover; display: block; }
.nd-fr .pflip .nd-fr-img { border: 2.5px solid var(--ink); }
.nd-fr .nd-fr-name { max-width: 100%; font-size: 11.5px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-fr .nd-fr-elo { display: flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 900; color: var(--ink-60); }
.nd-fr .nd-fr-go { width: 100%; margin-top: 3px; font-family: var(--font-d); font-size: 10.5px; letter-spacing: .4px; color: #fff; background: linear-gradient(180deg, #3cc96b, #23984a); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 0; box-shadow: 0 2px 0 #1c7a3c; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.nd-skel { flex: 0 0 auto; width: 108px; height: 128px; border-radius: 16px; border: 2.5px dashed var(--ink-30); background: var(--paper-2); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
/* barre "vs X · jeu" cliquable pour revenir en arrière */
.nd-vs { display: flex; align-items: center; gap: 8px; width: 100%; font-family: inherit; text-align: left; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 99px; padding: 5px 12px 5px 8px; box-shadow: 0 2px 0 var(--sticker); color: var(--ink); }
.nd-vs:active { transform: translateY(2px); box-shadow: none; }
.nd-vs .nd-vs-arrow { font-weight: 900; font-size: 15px; }
.nd-vs .nd-vs-img, .nd-vs .pflip { width: 30px; height: 30px; flex: none; }
.nd-vs .nd-vs-img { border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; display: block; }
.nd-vs .nd-vs-mys { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: var(--card); border: 2px solid var(--ink); border-radius: 50%; }
.nd-vs .nd-vs-txt { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-vs .nd-vs-txt b { color: var(--ink); }
.nd-vs .nd-vs-edit { font-size: 10.5px; font-weight: 900; color: var(--blue); }
/* étape 2 : les 4 modes en 2×2, chacun son identité */
.nd-games { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nd-game {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 96px; padding: 12px 8px 10px; font-family: inherit; text-align: center; color: #fff;
  border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: var(--shadow);
}
.nd-game:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.nd-game:disabled { filter: saturate(.55) brightness(.92); }
.nd-game .nd-g-em { font-size: 25px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(43, 28, 6, .3)); }
.nd-game .nd-g-name { font-family: var(--font-d); font-size: 12px; line-height: 1.1; text-shadow: 0 1.5px 0 rgba(43, 28, 6, .4); }
.nd-game .nd-g-sub { font-size: 9.5px; font-weight: 900; opacity: .92; }
.nd-game.nd-g-cg { background: linear-gradient(160deg, #ffd23e, #eaa800); color: var(--ink); }
.nd-game.nd-g-cg .nd-g-name { text-shadow: 0 1.5px 0 rgba(255, 255, 255, .5); }
.nd-game.nd-g-fl { background: linear-gradient(160deg, #5a86ff, #3f66e0); }
.nd-game.nd-g-gp { background: linear-gradient(160deg, #2b2550, #17324e); }
.nd-game.nd-g-mo { background: linear-gradient(160deg, #3b3266, #4a3f85); }

/* ---------- grille de potes (volet Amis) : cartes avec tête qui tourne + DÉFIER ---------- */
.fr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fr-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 7px 10px; background: var(--card); border: var(--bw) solid var(--ink);
  border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; color: var(--ink);
}
.fr-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.fr-medal { position: absolute; top: -9px; left: -6px; font-size: 17px; filter: drop-shadow(0 1px 0 rgba(43, 28, 6, .3)); }
.fr-face { position: relative; width: 62px; height: 62px; border-radius: 50%; border: 2.5px solid var(--ink); overflow: hidden; background: var(--paper-2); display: block; }
.fr-face img, .fr-face .pflip, .fr-face .pflip-in { width: 100%; height: 100%; display: block; }
.fr-face img { object-fit: cover; }
.fr-dot { position: absolute; bottom: 3px; right: 3px; z-index: 2; }
.fr-name { font-size: 11.5px; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-elo { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 900; color: var(--ink-60); }
.fr-defy {
  width: 100%; margin-top: 3px; font-family: var(--font-d); font-size: 11.5px; letter-spacing: .4px;
  color: #fff; background: linear-gradient(180deg, #3cc96b, #23984a); border: 2.5px solid var(--ink);
  border-radius: 99px; padding: 6px 0; box-shadow: 0 3px 0 #1c7a3c; text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.fr-defy:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c7a3c; }

/* 3 volets (Feed · Amis · Chats) : un poil plus compact pour tenir sur petit écran */
.seg2.seg3 .seg-opt { gap: 4px; padding: 10px 4px; font-size: 13px; }
.seg2.seg3 .seg-badge { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.seg2.seg3 .seg-opt .ic-flame { width: 16px !important; height: 16px !important; }
/* ---- onglet Thèmes : catalogue thèmes → sous-thèmes ---- */
.theme-sec { margin-bottom: 20px; }
.theme-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.theme-head .th-em { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 19px; border: 2.5px solid var(--ink); border-radius: 11px; box-shadow: 0 2px 0 var(--sticker); }
.theme-head h3 { font-family: var(--font-d); font-size: 17px; flex: 1; }
.prem-chip { background: #f3e8ff; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 12px; border: 2.5px solid var(--ink); border-top: 6px solid var(--cc); border-radius: 16px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); font-family: inherit; text-align: left; }
.cat-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.cat-card .cc-em { font-size: 24px; line-height: 1.1; }
.cat-card .cc-label { font-weight: 900; font-size: 13.5px; line-height: 1.2; }
.cat-card .cc-sub { font-size: 11px; font-weight: 900; color: var(--ink-60); }
.cat-card.locked { opacity: .55; }
.cat-card .cc-lock { position: absolute; top: 8px; right: 9px; font-size: 14px; }
.cat-sheet-head { display: flex; align-items: center; gap: 10px; }
.cat-sheet-head .csh-em { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2.5px solid var(--ink); border-radius: 13px; box-shadow: 0 2px 0 var(--sticker); }
.cat-stats-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
/* ---- Thèmes façon "playlists" : chips filtres, bannière premium, familles, rangées ---- */
.th-chips { display: flex; gap: 8px; margin: 10px 0 12px; }
.th-chip { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--card); font-family: inherit; font-weight: 900; font-size: 12.5px; color: var(--ink-60); box-shadow: 0 2px 0 var(--sticker); }
.th-chip.on { background: var(--yellow); color: var(--ink); }
.th-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--sticker); }
.premium-banner { display: flex; width: 100%; padding: 0; border: 3px solid var(--ink); border-radius: 18px; overflow: hidden; background: #241c31; color: #fff; box-shadow: 0 4px 0 var(--sticker); margin-bottom: 16px; text-align: left; font-family: inherit; cursor: pointer; }
.premium-banner:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sticker); animation: none; }
/* respiration TRÈS légère pour attirer l'œil sans être lourde (coupée si l'utilisateur réduit les animations) */
.premium-banner { animation: prem-breathe 3.6s ease-in-out infinite; will-change: transform; }
@keyframes prem-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.014) translateY(-1px); } }
.premium-banner .pb-soon { animation: prem-glow 3.6s ease-in-out infinite; }
@keyframes prem-glow { 0%, 100% { box-shadow: 0 0 0 rgba(255, 196, 0, 0); } 50% { box-shadow: 0 0 9px rgba(255, 196, 0, .75); } }
@media (prefers-reduced-motion: reduce) { .premium-banner, .premium-banner .pb-soon { animation: none; } }
.pb-visual { position: relative; width: 118px; flex: none; background: linear-gradient(135deg, #ff8a00, #ef476f); display: flex; align-items: center; justify-content: center; }
.pb-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-emojis { font-size: 21px; line-height: 1.5; text-align: center; }
.pb-txt { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.pb-txt b { font-family: var(--font-d); font-size: 17px; font-weight: 400; }
.pb-gold { color: var(--yellow); }
.pb-txt > span { font-weight: 800; font-size: 12.5px; opacity: .92; }
.pb-soon { align-self: flex-start; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 10px; font-size: 11px !important; font-weight: 900 !important; opacity: 1 !important; margin-top: 3px; }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.family-card { display: flex; align-items: center; gap: 10px; padding: 15px 13px; border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--sticker); font-family: var(--font-d); font-size: 15px; color: var(--ink); text-align: left; }
.family-card .fc-em { font-size: 24px; }
.family-card:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
/* "Pour toi" : 3 lignes empilées qui scrollent horizontalement ENSEMBLE */
.hscroll3 { display: grid; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.hscroll3::-webkit-scrollbar { display: none; }
.mini-cat { flex: none; width: 122px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 11px; border: 2.5px solid var(--ink); border-top: 6px solid var(--cc); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); font-family: inherit; text-align: left; }
.mini-cat .mc-em { font-size: 22px; }
.mini-cat .mc-label { font-weight: 900; font-size: 12px; line-height: 1.15; }
.mini-cat .mc-sub { font-size: 10.5px; font-weight: 900; color: var(--ink-60); }
.mini-cat:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
/* pilule coins de la home : bien mise en avant (gros asset + gros chiffre) */
.coins-pill { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: var(--font-d); font-size: 24px; line-height: 1; color: var(--ink); background: var(--card); border: 3px solid var(--ink); border-radius: 999px; padding: 5px 13px 5px 7px; box-shadow: 0 3px 0 var(--sticker); }
.coins-pill:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.coins-pill .ic-coin-img { filter: drop-shadow(0 1px 0 rgba(43, 28, 6, .3)); }
.coins-pill .cp-plus { font-size: 13px; margin-left: 1px; opacity: .9; }
.coins-pill .cp-cart { width: 27px; height: 27px; object-fit: contain; margin-left: 1px; }
/* icônes dessinées qui remplacent des emojis (caddie, loupe…) */
/* display:inline-block OBLIGATOIRE : une règle globale met les <img> en block → l'icône tombait à la ligne */
.ic-img { display: inline-block !important; object-fit: contain; vertical-align: -3px; }
/* chrono dessiné : aligné au texte, jamais déformé */
.ic-chrono { vertical-align: -4px; flex: none; }
.ic-cam { vertical-align: -4px; flex: none; }
.ic-cam-flash { vertical-align: -7px; margin-right: 2px; } /* version flash : plus grande, on la recale sur la ligne */
.ic-flame { vertical-align: -4px; flex: none; }
.ic-muscle { vertical-align: -4px; flex: none; }
/* boutons posés sur l'aperçu caméra : flash + bascule selfie/arrière */
.cam-btn { position: absolute; z-index: 4; font-family: inherit; font-weight: 900; font-size: 13px; color: #fff; background: rgba(20, 12, 2, .62); border: 2.5px solid rgba(255, 255, 255, .9); border-radius: 999px; padding: 7px 12px; backdrop-filter: blur(3px); }
.cam-btn:active { transform: scale(.94); }
.cam-flash { top: 10px; left: 10px; font-size: 17px; padding: 6px 11px; }
.cam-flash.on { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.cam-flip { top: 10px; right: 10px; }
/* ville de prise de vue + indice de zoom sur les photos du feed */
.fc-media { position: relative; }
.fc-city { position: absolute; bottom: 8px; left: 8px; z-index: 3; font-size: 11.5px; font-weight: 900; color: #fff; background: rgba(20, 12, 2, .66); border-radius: 999px; padding: 4px 10px; backdrop-filter: blur(3px); }
.fc-zoom { position: absolute; bottom: 8px; right: 8px; z-index: 3; font-size: 13px; background: rgba(20, 12, 2, .55); border-radius: 999px; padding: 3px 8px; }
/* visionneuse plein écran zoomable */
.zoomv { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.zoomv img { max-width: 100vw; max-height: 100vh; object-fit: contain; transform-origin: center center; transition: transform .06s linear; will-change: transform; }
.zv-close { position: absolute; top: 14px; right: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid #fff; background: rgba(20, 12, 2, .6); color: #fff; font-size: 17px; font-weight: 900; }
.zv-cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #fff; font-weight: 900; font-size: 14px; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.zv-hint { position: absolute; top: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .82); font-weight: 900; font-size: 12px; transition: opacity .3s; }
.bottom-nav .ico .ic-flame { vertical-align: middle; } /* onglet Feed : icône centrée dans le bouton */
.cal-fire .ic-flame { vertical-align: top; }
.taunt-photo-cta .tpc-label .ic-cam { vertical-align: -3px; } /* CTA sur l'image : reste sur la ligne du titre */
.vic-mini .ic-cam, .duel-row .ic-cam { vertical-align: -3px; }
.pc-time .ic-chrono, .board-time .ic-chrono, .bzh-clock .ic-chrono { vertical-align: -3px; }
.blitz-intro .blitz-big .ic-chrono { vertical-align: middle; width: 76px; height: 76px; } /* le gros chrono garde la taille de l'ancien emoji */
.pace-banner .ic-chrono, .chrono-banner .ic-chrono { vertical-align: -4px; }
.duel-row .ic-chrono { vertical-align: -3px; }
/* titre de section : le texte et l'icône dessinée restent sur la MÊME ligne */
.section-title h2 { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.section-title h2 .ic-img { vertical-align: middle; flex: none; }
.search-wrap { position: relative; }
.search-wrap .ic-img { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-wrap .field { padding-left: 46px; }
/* chips de delta (elo / coins) — remplace la ligne de texte brute */
.delta-chips { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.delta-chip { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: 13px; padding: 5px 13px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--card); box-shadow: 0 2px 0 var(--sticker); }
.delta-chip.up { background: #e2f6e5; color: var(--green-d); }
.delta-chip.down { background: #ffe3e3; color: var(--red); }
.delta-chip.gold { background: #fff3c4; color: var(--ink); }
/* mini-bilan H2H : UNE ligne sobre sous le récap */
.h2h-line { font-weight: 900; font-size: 13px; color: var(--ink-60); margin-top: 9px; text-align: center; }
.h2h-line b.v { color: var(--green-d); }
.h2h-line b.d { color: var(--red); }
.h2h-line .sep { margin: 0 6px; color: var(--ink-30); }
.h2h-line .tim { font-weight: 800; font-size: 12px; }
/* ---- fanion décoratif en haut à droite de la carte (cf. mock) ---- */
.qcard2 { position: relative; }
.q-pennant { position: absolute; top: -8px; right: 16px; width: 28px; height: 24px; background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); box-shadow: 2px 2px 0 rgba(43,28,6,.35); z-index: 3; }
/* ---- bandeau avance/retard EN SECONDES (entre les manches) ---- */
.pace-banner { font-family: var(--font-d); font-size: 15.5px; padding: 8px 18px; border-radius: 999px; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); margin: 6px 0 2px; }
.pace-banner.av { background: var(--green); color: #fff; }
.pace-banner.re { background: var(--red); color: #fff; }
.pace-banner.eq { background: var(--card); color: var(--ink); }
.qnum { font-size: 12px; font-weight: 900; color: var(--ink-60); margin-bottom: 8px; letter-spacing: 1px; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ans {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border: var(--bw) solid var(--ink); border-radius: 16px; background: var(--card);
  padding: 12px; font-weight: 900; font-size: 16.5px; min-height: 80px;
  box-shadow: 0 4px 0 var(--sticker); transition: transform 0.06s, box-shadow 0.06s, background 0.12s; color: var(--ink); line-height: 1.2;
}
.ans .ak {
  flex: none; width: 27px; height: 27px; border-radius: 9px; border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 13px; color: #fff; box-shadow: 0 2px 0 var(--sticker);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.ans:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.ans.lock { pointer-events: none; }
.ans.good { background: var(--green); color: #fff; animation: pop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1); }
.ans.bad { background: var(--red); color: #fff; animation: shake 0.4s; }
.ans.good .ak, .ans.bad .ak { background: rgba(255, 255, 255, 0.28) !important; }
.ans.dim { opacity: 0.45; }
@keyframes pop { 50% { transform: scale(1.06); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px) rotate(-1deg); } 45% { transform: translateX(6px) rotate(1deg); } 70% { transform: translateX(-4px); } 90% { transform: translateX(3px); } }

.opp-ping { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 8px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; padding: 7px 14px 7px 8px; box-shadow: 0 4px 0 var(--sticker); font-weight: 900; font-size: 13px; animation: drop-in 0.35s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes drop-in { from { transform: translate(-50%, -60px); } }

.fact-note {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 148px);
  width: min(432px, calc(100% - 30px)); z-index: 720;
  background: var(--yellow);
  border: var(--bw) solid var(--ink); border-radius: 4px 16px 16px 16px;
  box-shadow: 0 4px 0 var(--sticker), 0 12px 28px rgba(43, 28, 6, .25); padding: 13px 15px 12px;
  font-weight: 800; font-size: 15.5px; line-height: 1.45; transform: translateX(-50%) rotate(0.7deg);
  animation: note-pop 0.35s cubic-bezier(0.34, 1.7, 0.64, 1); cursor: pointer;
}
.fact-note::before {
  content: ''; position: absolute; top: -11px; left: 22px; width: 64px; height: 17px;
  background: rgba(255, 255, 255, 0.6); border: 1.5px solid rgba(43, 28, 6, 0.22);
  border-radius: 3px; transform: rotate(-2.5deg);
}
.fact-note b { display: block; font-family: var(--font-d); font-size: 12px; letter-spacing: 0.8px; margin-bottom: 3px; }
@keyframes note-pop { from { transform: translateX(-50%) scale(0.75) rotate(0.7deg); opacity: 0; } }

.catpick { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.cat-chip { display: flex; align-items: center; gap: 12px; border: var(--bw) solid var(--ink); border-radius: 18px; padding: 17px 16px; font-weight: 900; font-size: 17px; color: #fff; box-shadow: 0 5px 0 var(--sticker); transition: transform 0.07s, box-shadow 0.07s; }
.cat-chip:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sticker); }
.cat-chip .em { font-size: 24px; }
.cat-chip.picked { animation: pop 0.35s; outline: 4px solid var(--yellow); }

.bot-bubble { position: fixed; bottom: 88px; left: 16px; max-width: 70%; background: var(--card); border: 2.5px solid var(--ink); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-weight: 800; box-shadow: 0 4px 0 var(--sticker); z-index: 55; animation: drop-up 0.3s; font-size: 14px; }
.bot-bubble .from { font-size: 11px; color: var(--ink-60); font-weight: 900; }
.typing i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-60); margin-right: 3px; animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.round-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70dvh; gap: 20px; }
.scoreline { display: flex; align-items: center; gap: 16px; font-family: var(--font-d); font-size: 40px; }

/* ---------- résultat ---------- */
.stamp { font-family: var(--font-d); font-size: 46px; transform: rotate(-4deg); display: inline-block; padding: 8px 22px; border: 3.5px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--sticker); animation: stamp-in 0.4s cubic-bezier(0.34, 1.8, 0.64, 1); }
.stamp.win { background: var(--green); color: #fff; }
.stamp.lose { background: var(--red); color: #fff; }
.stamp.tie { background: var(--blue); color: #fff; }

.dots-grid { display: flex; flex-direction: column; gap: 8px; margin: 6px auto; width: fit-content; }
.dots-line { display: flex; align-items: center; gap: 6px; }
.dots-line .lbl { width: 34px; font-size: 11px; font-weight: 900; color: var(--ink-60); text-align: right; margin-right: 4px; }
.dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--ink); }
.dot.g { background: var(--green); }
.dot.r { background: var(--red); }
.dot.sep { border: none; width: 6px; }

.xp-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-size: 24px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 999px; padding: 8px 20px; box-shadow: 0 4px 0 var(--sticker); }
.gain-toast { display: flex; align-items: center; gap: 10px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 14px; box-shadow: 0 4px 0 var(--sticker); font-weight: 900; font-size: 14px; animation: drop-up 0.3s; margin-top: 8px; }

.result-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; background: rgba(43, 28, 6, 0.55); z-index: 100; display: flex; align-items: flex-end; justify-content: center; animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; } }
.overlay.centered { align-items: center; padding: 22px; }
.sheet { width: 100%; max-width: 480px; max-height: 88dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); border-top: 3px solid var(--ink); border-radius: 26px 26px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); animation: sheet-up 0.3s cubic-bezier(0.34, 1.3, 0.64, 1); }
@keyframes sheet-up { from { transform: translateY(80%); } }
.sheet .grab { width: 44px; height: 5px; border-radius: 99px; background: var(--ink-30); margin: 0 auto 16px; }
.modal { background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 0 8px 0 var(--sticker); padding: 26px 22px; width: 100%; max-width: 400px; text-align: center; animation: stamp-in 0.35s cubic-bezier(0.34, 1.6, 0.64, 1); }

.reveal-robot { font-size: 64px; animation: float 2s infinite; }
.glitch-name { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }

.taunt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.taunt-grid .btn { font-size: 14px; padding: 12px 8px; }

/* ---------- ligue ---------- */
.lg-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 2px dashed var(--ink-30); }
.lg-row:last-child { border-bottom: none; }
.lg-row .rank { font-family: var(--font-d); width: 30px; font-size: 17px; color: var(--ink-60); }
.lg-row .nm { flex: 1; font-weight: 900; font-size: 15px; }
.lg-row .pts { font-weight: 900; color: var(--ink-60); font-size: 14px; }
.lg-row.me { background: #fff3cf; border-radius: 14px; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); margin: 4px 0; }
.zone-label { font-size: 11px; font-weight: 900; letter-spacing: 1.5px; color: var(--green-d); padding: 8px 14px 2px; }
.zone-label.down { color: var(--ink-30); }

/* ---------- profil ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.stat-box { text-align: center; padding: 14px 8px; }
.stat-box .v { font-family: var(--font-d); font-size: 26px; }
.stat-box .k { font-size: 12px; font-weight: 900; color: var(--ink-60); }
/* victoires / défaites mis en avant */
.stat-box.win { background: #e7fbee; border-bottom: 5px solid var(--green); }
.stat-box.lose { background: #ffece9; border-bottom: 5px solid var(--red); }
.stat-box.win .v { color: var(--green-d); font-size: 34px; }
.stat-box.lose .v { color: var(--red-d); font-size: 34px; }
.stat-box.win .k, .stat-box.lose .k { color: var(--ink); }
/* amis en commun */
.mutual-strip { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 4px; -webkit-overflow-scrolling: touch; }
.mutual-friend { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; flex: none; width: 62px; }
.mutual-friend:active { transform: scale(.94); }
.mutual-friend .mf-name { font-size: 11px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62px; }
/* ---------- mode blitz ---------- */
.blitz-cta { background: linear-gradient(90deg, #ff8a3d, #ff5470); color: #fff; border-bottom: 5px solid var(--ink); }
.blitz-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; }
.blitz-intro .blitz-big { font-size: 76px; animation: pulse 1.4s infinite; }
/* le jeu et le résultat remplissent tout l'écran */
.blitz-play { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 14px; }
.blitz-play .bz-qwrap { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 16px; margin-top: 12px; }
.blitz-play .answers { margin-top: 0; }
.blitz-play .answers .ans { min-height: 62px; }
.blitz-play .bz-bot-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.blitz-result { display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; padding: 22px 0 18px; }
.blitz-result .bz-result-top { display: flex; flex-direction: column; align-items: center; }
.blitz-result .bz-result-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin: 0 auto; }
/* pendule d'échecs : deux cartes chrono */
.bz-clocks { display: flex; align-items: stretch; justify-content: center; gap: 8px; }
.bz-cc { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px 6px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); opacity: .68; transition: opacity .15s, transform .15s; }
.bz-cc.on { opacity: 1; transform: translateY(-2px); box-shadow: 0 5px 0 var(--sticker); }
.bz-cc.on.opp { background: #fff0e6; }
.bz-cc.on:not(.opp) { background: #eafaf0; }
.bz-cc .nm { font-weight: 900; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bz-cc .mn { font-family: var(--font-d); font-size: 20px; line-height: 1.1; }
.bz-cc .mn b { font-size: 26px; }
.bz-cc .tm { font-weight: 900; font-size: 13px; color: var(--ink-60); }
.bz-vsx { align-self: center; font-family: var(--font-d); color: var(--ink-30); font-size: 14px; }
.bz-streak-row { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 13px; margin-top: 10px; justify-content: center; }
.bz-pips { display: inline-flex; gap: 5px; }
.bz-pip { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--card); transition: background .12s; }
.bz-pip.on { background: var(--green); }

/* tête de match blitz pote (pendule) — avatars, chrono XXL, manches en étoiles */
.bzh { display: flex; align-items: stretch; justify-content: center; gap: 9px; width: 100%; }
.bzh-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 3px solid var(--ink); border-radius: 18px; padding: 10px 6px 9px; background: var(--card); box-shadow: 0 4px 0 var(--sticker); opacity: .62; transition: opacity .15s, transform .15s, box-shadow .15s; }
.bzh-side.on { opacity: 1; transform: translateY(-3px); box-shadow: 0 7px 0 var(--sticker); background: #eafaf0; }
.bzh-side.on.opp { background: #fff0e6; animation: pulse 1.4s infinite; }
.bzh-face { width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--ink); object-fit: cover; background: var(--paper-2); }
.bzh-nm { font-weight: 900; font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bzh-clock { font-family: var(--font-d); font-size: 15px; color: var(--ink-60); }
.bzh-clock b { font-size: 24px; color: var(--ink); }
.bzh-st { font-size: 15px; line-height: 1.2; letter-spacing: 1px; font-weight: 900; min-height: 19px; }
.bzh-vs { align-self: center; font-family: var(--font-d); font-size: 17px; color: var(--ink-30); flex: none; }
.bzh-streak { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 12px 0 10px; }
.bzh-streak .bz-pip { width: 20px; height: 20px; box-shadow: 0 2px 0 var(--sticker); }
.bzh-streak .bz-pip.on { background: var(--yellow); }
.bzh-streak-lbl { font-weight: 900; font-size: 12px; color: var(--ink-60); }
.bz-bot-panel { text-align: center; padding: 40px 16px; }
.bz-bot-emoji { font-size: 64px; animation: pulse 1s infinite; }
.blitz-play.botting .bz-cc.opp { animation: pulse 1s infinite; }
.bz-result-time { font-family: var(--font-d); font-size: 52px; line-height: 1; margin: 8px 0 2px; }
.bz-vs { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.bz-vs-col { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px 14px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); min-width: 96px; }
.bz-vs-col.winner { background: #e7fbee; border-bottom: 5px solid var(--green); }
.bz-vs-col .who { font-weight: 900; font-size: 12px; }
.bz-vs-col .t { font-family: var(--font-d); font-size: 20px; }
.bz-vs-x { font-family: var(--font-d); color: var(--ink-60); }

/* ---------- tableau de duel (façon QuizDuel) ---------- */
.board-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px; margin-bottom: 8px; }
.board-p { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 900; font-size: 12px; max-width: 86px; text-align: center; }
.board-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px; }
.board-score { font-family: var(--font-d); font-size: 38px; letter-spacing: 1px; text-align: center; }
.board-score .dash { color: var(--ink-30); margin: 0 5px; }
.board-unknown { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-family: var(--font-d); font-size: 24px; color: var(--ink-30); }
.board-line { text-align: center; font-weight: 800; color: var(--ink-60); margin: 2px 0 14px; font-size: 14px; }
.round-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 12px; margin-bottom: 10px; }
.round-row.current { background: #fff8dc; animation: pulse 2s infinite; }
.round-row.future { opacity: 0.45; box-shadow: none; }
.rside { display: flex; gap: 5px; }
.rsq { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--ink); background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #fff; }
.rsq.g { background: var(--green); }
.rsq.r { background: var(--red); }
.rsq.hidden { background: var(--ink-30); }
.rmid { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.round-cat { font-size: 10.5px; font-weight: 900; color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 3px 8px; box-shadow: 0 2px 0 var(--sticker); text-align: center; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round-cat.ghost { background: var(--paper-2); color: var(--ink-30); box-shadow: none; border-color: var(--ink-30); }
.react-toast { animation: stamp-in 0.45s cubic-bezier(0.34, 1.8, 0.64, 1); background: #fff8dc; }

/* ---------- cartes de thème (façon Duel Quiz) ---------- */
.deck { display: flex; flex-direction: column; gap: 14px; padding: 6px 8px; }
.theme-card {
  position: relative; overflow: hidden; text-align: left;
  border: 3px solid var(--ink); border-radius: 20px; min-height: 108px;
  background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 65%, #000 12%));
  box-shadow: 0 6px 0 var(--sticker); color: #fff; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.3s;
}
.theme-card.tcr-0 { transform: rotate(-2.2deg); }
.theme-card.tcr-1 { transform: rotate(1.6deg); }
.theme-card.tcr-2 { transform: rotate(-1.2deg); }
.theme-card:active { transform: translateY(4px) scale(0.99); box-shadow: 0 1px 0 var(--sticker); }
.theme-card.picked { transform: scale(1.05) rotate(0deg); box-shadow: 0 8px 0 var(--sticker), 0 0 0 4px var(--yellow); z-index: 2; animation: pop 0.4s; }
.theme-card.folded { opacity: 0.25; transform: scale(0.94); }
.tc-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.09) 0 14px, transparent 14px 28px); pointer-events: none; }
.tc-emoji { position: absolute; right: 6px; top: 50%; transform: translateY(-50%) rotate(10deg); font-size: 74px; opacity: 0.9; text-shadow: 0 4px 0 rgba(0,0,0,0.18); pointer-events: none; }
.tc-top { position: absolute; top: 10px; left: 16px; font-family: var(--font-d); font-size: 11px; letter-spacing: 1px; opacity: 0.75; }
.tc-label { font-family: var(--font-d); font-size: 21px; text-shadow: 2px 2px 0 rgba(0,0,0,0.28); max-width: 70%; line-height: 1.1; }

/* ---------- calendrier de parties ---------- */
.cal-month { margin-bottom: 14px; }
.cal-title { font-weight: 900; text-transform: capitalize; margin-bottom: 6px; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 10px; font-weight: 900; color: var(--ink-30); text-align: center; margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font-weight: 900; font-size: 12.5px; color: var(--ink-30);
  border: 2px solid transparent;
}
.cal-cell.empty { visibility: hidden; }
.cal-cell.played { color: var(--ink); border-color: var(--ink); }
.cal-cell.played.h1 { background: #ffe9b3; }
.cal-cell.played.h2 { background: #ffd76e; }
.cal-cell.played.h3 { background: var(--yellow); box-shadow: 0 2px 0 var(--sticker); }
.cal-cell.streaked { color: var(--orange); }
.cal-cell.played.streaked { color: var(--ink); outline: 2px solid var(--orange); }
.cal-cell.today { border-color: var(--blue); border-style: dashed; color: var(--ink); }
.cal-badge { position: absolute; top: -5px; right: -4px; background: var(--ink); color: var(--paper); font-size: 9px; border-radius: 99px; padding: 1px 4.5px; }
.cal-fire { position: absolute; top: -9px; left: -5px; font-size: 12px; font-style: normal; animation: flame 0.9s ease-in-out infinite alternate; }

/* ---------- édition profil ---------- */
.social-chip { text-decoration: none; background: #f0f7ff; font-size: 12px; }
.social-chip:active { transform: translateY(2px); box-shadow: 0 0.5px 0 var(--sticker); }
.ep-chip { cursor: pointer; opacity: 0.65; }
.ep-chip.on { background: var(--yellow); opacity: 1; }
.flabel { display: block; font-size: 12px; font-weight: 900; color: var(--ink-60); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px; }
[data-prof]:not([data-prof=""]) { cursor: pointer; }

/* ---------- chat entre potes ---------- */
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; padding: 4px 2px; }
.msg { display: flex; }
.msg .msg-txt {
  max-width: 78%; background: var(--card); border: 2px solid var(--ink); border-radius: 15px 15px 15px 4px;
  padding: 8px 13px; font-weight: 800; font-size: 14.5px; box-shadow: 0 2.5px 0 var(--sticker); line-height: 1.35; word-break: break-word;
}
.msg.mine { justify-content: flex-end; }
.msg.mine .msg-txt { background: var(--yellow); border-radius: 15px 15px 4px 15px; }

/* ---------- bulle de chambrage ---------- */
.taunt-bubble {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: min(400px, calc(100% - 36px)); display: flex; align-items: center; gap: 12px;
  background: #fff8dc; border: 3px solid var(--ink); border-radius: 20px 20px 20px 6px;
  padding: 12px 16px; box-shadow: 0 6px 0 var(--sticker); z-index: 250;
  animation: stamp-in 0.45s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.taunt-bubble .tb-from { display: block; font-size: 11px; font-weight: 900; color: var(--ink-60); }
.taunt-bubble .tb-txt { display: block; font-weight: 900; font-size: 15px; }

/* ---------- résultat : manches visibles ---------- */
.rr-head { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; color: var(--ink-60); padding: 0 4px 6px 46px; gap: 30px; }
.rr-line { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.rr-num { font-size: 10px; font-weight: 900; color: var(--ink-30); width: 20px; text-align: right; }
.rr-cat { font-size: 15px; width: 20px; }
.rr-vs { font-weight: 900; color: var(--ink-30); }

/* ---------- fiches & stats ---------- */
.board-time { font-size: 10px; color: var(--ink-60); font-weight: 900; }
.fiche-point { font-weight: 800; font-size: 13.5px; margin: 4px 0; line-height: 1.45; }
.fiche-flex { background: #fff3d6; border: 2px dashed var(--yellow-d); border-radius: 12px; padding: 9px 12px; font-size: 13px; margin-top: 10px; line-height: 1.5; }

/* ---------- amis / présence ---------- */
.online-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid var(--ink); vertical-align: middle; animation: pulse 1.6s infinite; }
button.lg-row { background: none; border: none; border-bottom: 2px dashed var(--ink-30); font-family: inherit; cursor: pointer; text-align: left; }
button.lg-row:last-child { border-bottom: none; }

/* ---------- récap questions ---------- */
.rv-choice { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink-30); border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; position: relative; overflow: hidden; }
.rv-choice.good { border-color: var(--green); background: #eefaf2; }
.rv-choice.bad { border-color: var(--red); background: #fff0ef; }
.rv-txt { flex: 1; font-weight: 800; font-size: 13.5px; position: relative; z-index: 1; }
.rv-who { display: flex; gap: 3px; z-index: 1; }
.rv-who img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); }
.rv-pct { width: 54px; height: 9px; border: 1.5px solid var(--ink-30); border-radius: 99px; overflow: hidden; background: var(--paper-2); z-index: 1; }
.rv-pct i { display: block; height: 100%; background: var(--blue); }
.rv-num { font-size: 11.5px; width: 34px; text-align: right; color: var(--ink-60); z-index: 1; }

/* ---------- classement France verrouillé ---------- */
.lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }

/* ---------- points de vitesse ---------- */
.pts-float { position: fixed; width: 60px; text-align: center; font-family: var(--font-d); font-size: 22px; color: var(--green-d); z-index: 90; pointer-events: none; animation: pts-rise 0.9s ease-out forwards; text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff; }
@keyframes pts-rise { from { opacity: 0; transform: translateY(8px) scale(0.7); } 20% { opacity: 1; } to { opacity: 0; transform: translateY(-48px) scale(1.2); } }
.duel-row .score { font-size: 16px; }

/* ---------- toast ---------- */
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-weight: 900; padding: 11px 20px; border-radius: 999px; z-index: 200; animation: drop-in 0.3s; box-shadow: 0 4px 0 rgba(43, 28, 6, 0.3); font-size: 14px; max-width: 90%; text-align: center; }

/* ---------- confetti canvas ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 300; }

/* ---------- admin ---------- */
.admin-shell { max-width: 860px; margin: 0 auto; padding: 22px 18px 80px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tabs .tab { border: 2.5px solid var(--ink); background: var(--card); border-radius: 12px; padding: 9px 16px; font-weight: 900; box-shadow: 0 3px 0 var(--sticker); font-size: 14px; }
.tabs .tab.on { background: var(--yellow); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.form-grid label, .flabel { display: block; font-size: 12px; font-weight: 900; color: var(--ink-60); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.6px; }
select.field { appearance: none; }
.gen-card { margin-bottom: 12px; position: relative; }
.gen-card .q { font-weight: 900; font-size: 15px; margin-bottom: 8px; padding-right: 60px; }
.gen-card .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.gen-card .choices span { border: 2px solid var(--ink-30); border-radius: 10px; padding: 6px 9px; font-size: 13px; font-weight: 800; }
.gen-card .choices span.good { border-color: var(--green); background: #e8f9ee; }
.gen-card .fun { font-size: 12.5px; color: var(--ink-60); font-weight: 800; font-style: italic; }
.gen-card .kill { position: absolute; top: 12px; right: 12px; }
.bank-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 4px; border-bottom: 2px dashed var(--ink-30); }
.bank-row .q { flex: 1; font-weight: 800; font-size: 14px; }
.pill-cat { font-size: 11px; font-weight: 900; color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 7px; white-space: nowrap; }
.count-badge { font-family: var(--font-d); font-size: 15px; }
.spinner { width: 22px; height: 22px; border: 3.5px solid var(--ink-30); border-top-color: var(--ink); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 500px) {
  body { padding-top: 12px; }
  #app { border: 3px solid var(--ink); border-radius: 30px; box-shadow: 0 8px 0 var(--sticker); overflow: hidden; margin-bottom: 30px; min-height: calc(100dvh - 60px); }
  .screen { min-height: calc(100dvh - 66px); }
}

/* ---------- éditeur de personnage ---------- */
.av-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 4px 2px 10px; flex: none; scrollbar-width: none; }
.av-tabs::-webkit-scrollbar { display: none; }
.av-tab {
  flex: none; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--card);
  font-weight: 900; font-size: 13px; padding: 7px 14px; color: var(--ink-60); box-shadow: 0 2.5px 0 var(--sticker);
}
.av-tab.on { background: var(--yellow); color: var(--ink); }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.av-grid.sw { grid-template-columns: repeat(5, 1fr); }
.av-opt {
  border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card); padding: 5px 4px 4px;
  box-shadow: 0 3px 0 var(--sticker); display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.av-opt img { width: 100%; border-radius: 50%; display: block; }
.av-opt span { font-size: 9.5px; font-weight: 900; color: var(--ink-60); line-height: 1.1; text-align: center; }
.av-opt.sel { outline: 3.5px solid var(--yellow); background: #fff8e5; }
.av-opt.sel span { color: var(--ink); }
.av-opt:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }

/* ---------- LOOK : accessoires payants dans l'éditeur de perso ---------- */
.av-opt { position: relative; }
/* liseré de rareté */
.av-opt.r-commun { border-color: #6f7681; }
.av-opt.r-rare { border-color: #4d7cff; box-shadow: 0 3px 0 #2f56c9; }
.av-opt.r-epique { border-color: #a86bff; box-shadow: 0 3px 0 #7a3ecb; }
.av-opt.r-legend { border-color: var(--yellow-d); box-shadow: 0 3px 0 #b98600, 0 0 12px rgba(255, 196, 0, .55); }
/* pastille emoji de l'item, en haut à gauche de la vignette */
.av-opt .av-rar { position: absolute; top: -8px; left: -4px; font-size: 12px; background: var(--card); border: 2px solid var(--ink); border-radius: 99px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
/* prix : dans le flux, sous le nom → jamais coupé par le bord de la grille */
.av-opt .av-price { order: 3; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 900; color: #2b1c06; background: var(--yellow); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 7px; white-space: nowrap; margin-top: 1px; }
/* verrouillé : on GARDE les couleurs (ça doit donner envie), juste un voile + cadenas */
.av-opt.av-lock img { filter: saturate(.82) brightness(.97); }
.av-opt.av-lock { background: var(--paper-2); }
.av-opt.av-lock::after { content: '🔒'; position: absolute; top: 4px; right: 5px; font-size: 11px; filter: drop-shadow(0 1px 1px rgba(255,255,255,.9)); }

/* pastille ✨ sur l'avatar du profil → éditeur de look */
.look-btn {
  position: absolute; bottom: 2px; left: -8px; z-index: 3; width: 38px; height: 38px; font-size: 17px;
  background: linear-gradient(160deg, #fff6d0, var(--yellow) 60%, #e9a900);
  border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--sticker); font-family: inherit;
}
.look-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }

/* fiche d'achat d'un accessoire */
.cos-preview { position: relative; display: inline-block; }
.cos-preview img { width: 148px; height: 148px; border-radius: 50%; border: 3px solid var(--ink); display: block; }
.cos-rar { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 900; color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 2px 10px; }
.cos-rar.r-commun { background: #6f7681; }
.cos-rar.r-rare { background: #4d7cff; }
.cos-rar.r-epique { background: #a86bff; }
.cos-rar.r-legend { background: var(--yellow); color: #2b1c06; }
.av-sw { aspect-ratio: 1; border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--sticker); }
.av-sw.sel { outline: 4px solid var(--yellow); }

/* ---------- swipe-back : la page se tourne ---------- */
.screen.swiping { will-change: transform; box-shadow: -16px 0 42px rgba(43, 28, 6, 0.2); border-radius: 22px 0 0 22px; }
#app.swipe-back > .screen { animation: page-in 0.24s cubic-bezier(0.25, 1, 0.5, 1); }
@keyframes page-in { from { transform: translateX(-13%); opacity: 0.5; } }

/* ---------- bloc invitation (Amis) ---------- */
.invite-card { background: var(--yellow); margin: 14px 0 4px; padding: 14px; text-align: center; }
.invite-card .btn.primary { background: var(--card); }

/* ---------- groupes ---------- */
.avatar-stack { display: inline-flex; flex: none; align-items: center; }
.avatar-stack img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--sticker); object-fit: cover; }
.avatar-stack img + img { margin-left: -13px; }
.msg-from { display: block; font-size: 11px; font-weight: 900; margin-bottom: 1px; }
.msg.sys { justify-content: center; }
.msg.sys span { font-size: 11.5px; font-weight: 900; color: var(--ink-30); background: none; border: none; box-shadow: none; padding: 2px 0; }
.gpick { position: relative; }
.gpick .gtick { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 900; color: transparent; flex: none; }
.gpick.on { background: #fff8dc; }
.gpick.on .gtick { background: var(--green); color: #fff; }

/* ---------- paris (Zaps) ---------- */
.bet-row { display: flex; gap: 8px; }
.bet-chip {
  flex: 1; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--card);
  font-weight: 900; font-size: 14px; padding: 10px 4px; box-shadow: 0 3px 0 var(--sticker); color: var(--ink-60);
}
.bet-chip.on { background: var(--yellow); color: var(--ink); }
.bet-chip:disabled { opacity: 0.35; }

/* ---------- où l'adversaire a appuyé ---------- */
.ans { position: relative; }
.ans .opp-pick {
  position: absolute; right: -7px; top: -7px; width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--ink); background: var(--card); object-fit: cover;
  animation: pop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1); z-index: 2;
}

/* ---------- duel partagé dans un chat ---------- */
.msg-txt.duel-card { cursor: pointer; }
.duel-card .dc-line { display: block; font-size: 15px; }
.duel-card .dc-sub { display: block; font-size: 11px; font-weight: 900; color: var(--ink-60); margin-top: 2px; }

/* ---------- ligue : divisions ---------- */
.div-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); display: inline-block; }
.div-dot.on { background: var(--yellow); }
.div-dot.done { background: var(--ink); }
.zone-label.releg { color: var(--red); }

/* ---------- photo de victoire (façon BeReal) ---------- */
.vic-frame {
  position: relative; width: 100%; aspect-ratio: 3/4; border: var(--bw) solid var(--ink);
  border-radius: 22px; overflow: hidden; box-shadow: 0 6px 0 var(--sticker); background: #1c1610; cursor: pointer;
}
.vic-frame .vic-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vic-frame .vic-vig {
  position: absolute; top: 12px; left: 12px; width: 31%; border-radius: 14px;
  border: 2.5px solid var(--ink); outline: 3px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); z-index: 2;
}
.vic-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 900; color: #fff; background: rgba(43, 28, 6, 0.55);
  padding: 4px 12px; border-radius: 99px; z-index: 2;
}
.snap-btn {
  width: 76px; height: 76px; border-radius: 50%; margin: 14px auto 0; display: block;
  background: #fff; border: 5px solid var(--ink); box-shadow: 0 5px 0 var(--sticker), inset 0 0 0 4px var(--paper);
}
.snap-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sticker), inset 0 0 0 4px var(--paper); }
.vic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vic-thumb {
  position: relative; aspect-ratio: 3/4; border: 2.5px solid var(--ink); border-radius: 14px;
  overflow: hidden; box-shadow: 0 3px 0 var(--sticker); padding: 0; background: #1c1610;
}
.vic-thumb img, .vic-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vic-play { position: absolute; top: 6px; left: 6px; font-size: 11px; color: #fff; background: rgba(43,28,6,.7); border-radius: 99px; padding: 1px 7px; }
.vic-thumb .vic-score {
  position: absolute; bottom: 6px; right: 6px; font-family: var(--font-d); font-size: 13px;
  color: #fff; background: rgba(43, 28, 6, 0.7); padding: 2px 8px; border-radius: 99px;
}
.img-bubble img { display: block; width: 100%; max-width: 210px; border-radius: 10px; margin-top: 2px; }
.img-bubble { cursor: pointer; }
.img-bubble .img-cap { display: block; margin-top: 5px; font-size: 13.5px; }
/* messages vocaux */
.vid-wrap { position: relative; display: inline-block; }
.vid-sound-badge { position: absolute; bottom: 8px; right: 6px; font-size: 11px; font-weight: 900; color: #fff; background: rgba(43,28,6,.72); border-radius: 99px; padding: 2px 8px; pointer-events: none; }
.aud-bubble .aud-row { display: flex; align-items: center; gap: 8px; }
.aud-bubble .aud-mic { font-size: 20px; flex: none; }
.aud-bubble audio { height: 36px; max-width: 190px; }
.voice-mic { font-size: 66px; line-height: 1; animation: pulse 1s infinite; cursor: pointer; }

/* ---------- conquête 2v2 (plateau bleus vs rouges) ---------- */
.cq-banner { position: relative; overflow: hidden; width: 100%; margin: 0 0 14px; padding: 14px 16px; min-height: 118px; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--sticker); display: flex; align-items: center; background: linear-gradient(103deg, #2f6fd6 0 28%, #4da3ff 42%, #eaf2ff 48% 52%, #ff8093 58%, #e5384f 72% 100%); font-family: inherit; transition: transform .07s, box-shadow .07s; }
.cq-banner:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sticker); }
.cq-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cq-b-txt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cq-b-title { font-family: var(--font-d); font-size: 31px; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; line-height: .9; letter-spacing: .5px; text-shadow: 0 3px 0 rgba(43,28,6,.32); }
.cq-b-mode { font-family: var(--font-d); font-size: 17px; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; line-height: 1; }
.cq-b-mode .b { color: #b9d7ff; } .cq-b-mode .r { color: #ffc0cb; }
.cq-b-sub { font-weight: 900; font-size: 11.5px; color: var(--ink); background: rgba(255,255,255,.92); border: 2px solid var(--ink); border-radius: 99px; padding: 2px 10px; box-shadow: 0 2px 0 var(--sticker); }
.cq-b-play { margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-size: 15px; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 5px 15px 4px; box-shadow: 0 3px 0 var(--sticker); }
.cq-b-play svg { width: 15px; height: 15px; }
.cq-b-badge { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-weight: 900; font-size: 11px; color: #fff; background: rgba(43,28,6,.82); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; white-space: nowrap; box-shadow: 0 2px 0 rgba(43,28,6,.5); }
.cq-screen { display: flex; flex-direction: column; padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
.cq-topbar { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.cq-clock { flex: 1; text-align: center; font-family: var(--font-d); font-size: 22px; color: var(--red-d); background: #fff0e6; border: 2.5px solid var(--ink); border-radius: 12px; padding: 7px 8px; box-shadow: 0 3px 0 var(--sticker); }
.cq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 3px solid var(--ink); border-radius: 18px; padding: 13px 14px; box-shadow: 0 5px 0 var(--sticker); background: linear-gradient(90deg, #dcecff 0 42%, var(--card) 42% 58%, #ffe1e8 58% 100%); }
.cq-side { display: flex; align-items: center; }
.cq-side img { width: 44px; height: 44px; margin-right: -11px; border-width: 2.5px; }
.cq-side.red img { margin-right: 0; margin-left: -11px; }
.cq-score { display: flex; align-items: center; gap: 12px; }
.cq-count { font-family: var(--font-d); font-size: 46px; line-height: 1; }
.cq-count.blue { color: #1f7ae0; } .cq-count.red { color: #e0304f; }
.cq-vs { font-family: var(--font-d); font-size: 15px; color: var(--ink-30); }
.cq-turn { text-align: center; font-weight: 900; font-size: 13.5px; margin: 14px 0 12px; }
.cq-turn.mine { background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 12px; padding: 9px; box-shadow: 0 3px 0 var(--sticker); animation: pulse 1.4s infinite; }
.cq-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cq-tile { position: relative; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 15px; background: var(--card); box-shadow: 0 4px 0 var(--sticker); display: flex; align-items: center; justify-content: center; font-size: 30px; padding: 0; font-family: inherit; }
.cq-tile:disabled { opacity: 1; }
.cq-tile.neutral .cq-em { opacity: .4; filter: grayscale(.35); }
.cq-tile.blue { background: linear-gradient(160deg, #8fc6ff, #3f9bff); }
.cq-tile.red { background: linear-gradient(160deg, #ffa8b6, #ff5470); }
.cq-tile.fort.blue { background: linear-gradient(160deg, #5aaefc, #1f7ae0); font-size: 32px; }
.cq-tile.fort.red { background: linear-gradient(160deg, #ff7d92, #e0304f); font-size: 32px; }
.cq-tile .cq-def { position: absolute; bottom: 3px; right: 5px; font-size: 9.5px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.cq-tile .cq-by { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); object-fit: cover; box-shadow: 0 1px 0 var(--sticker); }
/* liste des défis à jouer (bas de conquête) */
.cq-challenges { margin-top: 16px; }
.cq-ch-title { font-family: var(--font-d); font-size: 15px; margin-bottom: 8px; }
.cq-ch { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); padding: 8px 10px; margin-bottom: 8px; transition: transform .06s, box-shadow .06s; }
.cq-ch:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.cq-ch-em { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.cq-ch-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cq-ch-mid b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-ch-st { font-size: 11.5px; font-weight: 900; color: var(--ink-60); }
.cq-ch-st.free { color: var(--green-d); }
.cq-ch-go { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--red); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; color: #fff; }
/* équipes avec noms (photos possibles) */
.cq-p { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 42px; }
.cq-p .avatar { width: 34px; height: 34px; margin: 0; }
.cq-pn { font-size: 8.5px; font-weight: 900; color: var(--ink-60); max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* plateau 6×6 : tuiles un peu plus petites */
.cq-grid { gap: 6px; }
.cq-tile { font-size: 25px; }
.cq-tile.locked { outline: 3px solid var(--yellow); outline-offset: -3px; }
.cq-tile .cq-lock { position: absolute; bottom: 2px; right: 3px; font-size: 12px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
/* historique des batailles */
.cq-log { margin-top: 2px; }
.cq-lg { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); padding: 5px 9px; margin-bottom: 6px; }
.cq-lg-av { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.cq-lg-t { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 800; line-height: 1.25; }
.cq-lg-ago { flex: none; font-size: 10px; font-weight: 900; color: var(--ink-30); }
.cq-rank { margin-top: 2px; }
.cq-rk { display: flex; align-items: center; gap: 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); padding: 6px 10px; margin-bottom: 6px; }
.cq-rk-pos { flex: none; width: 26px; text-align: center; font-family: var(--font-d); font-size: 15px; }
.cq-rk-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cq-rk-n { flex: none; font-family: var(--font-d); font-size: 17px; color: var(--ink); min-width: 20px; text-align: right; }
.cq-tile.atk { cursor: pointer; outline: 3px solid var(--yellow); outline-offset: -1px; animation: cq-pulse 1.1s ease-in-out infinite; z-index: 1; }
@keyframes cq-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.cq-pick-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.cq-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); padding: 8px 10px; font-family: inherit; font-weight: 900; font-size: 12px; min-width: 66px; }
.cq-pick.on { background: var(--yellow); }
.cq-pick .avatar { width: 34px; height: 34px; }

/* ---------- FEED : trash-talks des potes (façon BeReal) ---------- */
.feed-card { background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--sticker); padding: 0; margin-bottom: 14px; overflow: hidden; }
.feed-card > .fc-head { padding: 10px 12px 8px; }
.feed-card > .fc-reacts, .feed-card > .fc-comments, .feed-card > .fc-cmtbar, .feed-card > .fc-facebar { padding-left: 12px; padding-right: 12px; }
.feed-card > .fc-cmtbar { padding-bottom: 11px; }
.fc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fc-head .avatar { width: 40px; height: 40px; }
.fc-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.18; }
.fc-who b { font-size: 15px; }
.fc-you { font-family: var(--font-d); font-size: 9.5px; color: #fff; background: var(--red); border: 2px solid var(--ink); border-radius: 99px; padding: 0 6px; margin-left: 3px; vertical-align: middle; }
.fc-sub { font-size: 12px; font-weight: 800; color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-time { font-size: 11px; font-weight: 900; color: var(--ink-30); white-space: nowrap; align-self: flex-start; }
.fc-media { position: relative; border-radius: 0; overflow: hidden; border: none; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); background: #1c1610; aspect-ratio: 3 / 4; max-height: 68vh; }
.fc-media .fc-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-sound { position: absolute; bottom: 8px; right: 8px; font-size: 10.5px; font-weight: 900; color: #fff; background: rgba(43,28,6,.72); border-radius: 99px; padding: 3px 9px; pointer-events: none; }
.fc-reacts { display: flex; gap: 6px; margin: 11px 0 2px; flex-wrap: wrap; }
.fc-react { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; line-height: 1; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 99px; padding: 5px 10px; box-shadow: 0 2px 0 var(--sticker); font-family: inherit; transition: transform .06s, box-shadow .06s; }
.fc-react:active { transform: translateY(2px); box-shadow: 0 0 0 var(--sticker); }
.fc-react.on { background: var(--yellow); }
.fc-react b { font-size: 12px; font-weight: 900; color: var(--ink); }
.fc-comments { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 2px; }
.fc-comments:empty { margin: 0; }
.fc-cmt { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; font-weight: 700; line-height: 1.35; }
.fc-cmt img { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); flex: none; margin-top: 1px; }
.fc-cmt b { font-weight: 900; }
.fc-cmtbar { display: flex; gap: 8px; align-items: center; margin-top: 9px; }
.fc-input { flex: 1; min-width: 0; border: 2.5px solid var(--ink); border-radius: 99px; padding: 8px 14px; font-family: inherit; font-weight: 700; font-size: 13px; background: #fff; }
.fc-send { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--yellow); box-shadow: 0 3px 0 var(--sticker); display: flex; align-items: center; justify-content: center; }
.fc-send:active { transform: translateY(3px); box-shadow: 0 0 0 var(--sticker); }
.fc-send:disabled { opacity: .5; }
.fc-net { font-size: 9px; font-weight: 900; color: var(--ink-60); background: var(--paper-2); border: 1.5px solid var(--ink-30); border-radius: 99px; padding: 1px 6px; margin-left: 5px; white-space: nowrap; }

/* toggle visibilité Potes / Public (aperçu chambrage) */
.vis-row { margin-top: 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vis-lbl { font-size: 11.5px; font-weight: 900; color: var(--ink-60); }
.vis-toggle { display: flex; border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; box-shadow: 0 2px 0 var(--sticker); flex: none; }
.vis-opt { font-family: inherit; font-weight: 900; font-size: 12px; padding: 6px 13px; background: #fff; border: none; color: var(--ink-60); }
.vis-opt.on { background: var(--yellow); color: var(--ink); }
.vis-hint { flex-basis: 100%; font-size: 11px; font-weight: 800; color: var(--ink-60); margin-top: 2px; line-height: 1.3; }
/* toggle Public/Privé par trash (profil / viewer) */
.vic-vis-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.vic-vis { font-family: inherit; font-weight: 900; font-size: 13px; padding: 7px 15px; border-radius: 99px; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); flex: none; }
.vic-vis:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.vic-vis.is-pub { background: var(--green); color: #fff; }
.vic-vis.is-priv { background: #ffe0e0; color: var(--red); }
.vic-vis-hint { font-size: 11px; font-weight: 800; color: var(--ink-60); line-height: 1.25; }
.vic-thumb .vic-vis-badge { position: absolute; top: 6px; right: 6px; font-size: 12px; background: rgba(43,28,6,.7); border-radius: 99px; padding: 1px 6px; line-height: 1.4; z-index: 2; }
/* tableau bilan H2H entre potes */
.h2h-table { width: 100%; border-collapse: collapse; }
.h2h-table th { font-family: var(--font-d); font-size: 11px; color: var(--ink-60); padding: 4px 4px 8px; text-align: center; }
.h2h-table th.h2h-name { text-align: left; padding-left: 8px; }
.h2h-table td { padding: 7px 4px; text-align: center; font-family: var(--font-d); font-size: 15px; border-top: 2px solid rgba(43,28,6,.08); }
.h2h-table td.h2h-name { text-align: left; font-size: 13px; white-space: nowrap; }
.h2h-table .av-xs { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: middle; margin-right: 6px; }
.h2h-table .h2h-w { color: var(--green-d); }
.h2h-table .h2h-wt { color: var(--green-d); opacity: .75; }
.h2h-table .h2h-lt { color: var(--red); opacity: .8; }
.h2h-table .h2h-l { color: var(--red); }
.h2h-table tr[data-fp] { cursor: pointer; }
.h2h-filters { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px; }
.h2h-filters .chip { cursor: pointer; }
.h2h-filters .chip.on { background: var(--yellow); color: var(--ink); }

/* bannière « nouvelle version » */
.upd-banner { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 600; font-family: inherit; font-weight: 900; font-size: 13px; color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 99px; padding: 9px 16px; box-shadow: 0 4px 0 var(--sticker); animation: drop-up 0.35s cubic-bezier(0.34, 1.5, 0.64, 1); white-space: nowrap; }
.upd-banner:active { transform: translate(-50%, 3px); box-shadow: 0 1px 0 var(--sticker); }

/* 💡 joker payant : la bonne réponse pour 100 coins — bien VISIBLE, c'est le but */
.joker-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; margin: 12px auto 0;
  font-family: inherit; font-weight: 900; font-size: 13px; color: var(--ink);
  background: linear-gradient(160deg, #fffbe6 0%, #ffefad 48%, #ffd968 100%);
  border: 2.5px solid var(--ink); border-radius: 99px; padding: 9px 18px;
  box-shadow: 0 3px 0 var(--sticker), 0 0 14px rgba(255, 196, 0, .35);
  animation: jk-breathe 3.2s ease-in-out infinite; }
.joker-btn:active { transform: scale(0.96); }
.joker-btn:disabled { opacity: .45; animation: none; }
@keyframes jk-breathe { 0%, 100% { box-shadow: 0 3px 0 var(--sticker), 0 0 10px rgba(255, 196, 0, .3); } 50% { box-shadow: 0 3px 0 var(--sticker), 0 0 22px rgba(255, 196, 0, .7); } }

/* ============================================================
   ✨ PASS DORÉ — 3 bonnes réponses payées d'avance.
   Tout ce qui est gagné avec des pièces s'affiche EN DORÉ
   (jamais vert/rouge) : on doit voir que c'était acheté.
   ============================================================ */
:root { --gold-1: #ffe89a; --gold-2: #ffc400; --gold-3: #b8860b; }

/* bouton joker quand on a du stock doré */
.joker-btn.is-gold {
  position: relative; overflow: hidden; color: #4a3200; border: 2.5px solid var(--gold-3);
  background: linear-gradient(160deg, #fff6d0 0%, var(--gold-1) 38%, var(--gold-2) 72%, #e9a900 100%);
  box-shadow: 0 3px 0 var(--gold-3), 0 0 16px rgba(255, 196, 0, .5);
  font-size: 13px; padding: 9px 18px;
}
.joker-btn .jk-shine, .gold-pass .gp-shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-18deg); animation: gold-sweep 2.6s ease-in-out infinite;
}
@keyframes gold-sweep { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }

/* réponse validée grâce aux pièces : doré brillant */
.ans.gold {
  background: linear-gradient(160deg, #fff3bd 0%, var(--gold-1) 32%, var(--gold-2) 70%, #e9a900 100%) !important;
  color: #4a3200 !important; border-color: var(--gold-3) !important;
  box-shadow: 0 4px 0 var(--gold-3), 0 0 22px rgba(255, 196, 0, .6) !important;
  animation: pop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1), gold-glow 1.4s ease-in-out infinite 0.3s;
}
.ans.gold .ak { background: rgba(255, 255, 255, .45) !important; color: #4a3200 !important; }
@keyframes gold-glow {
  0%, 100% { box-shadow: 0 4px 0 var(--gold-3), 0 0 18px rgba(255, 196, 0, .5); }
  50% { box-shadow: 0 4px 0 var(--gold-3), 0 0 30px rgba(255, 196, 0, .95); }
}
/* carré doré dans le récap des manches */
.rsq.gold { background: linear-gradient(160deg, var(--gold-1), var(--gold-2) 60%, #e9a900); border-color: var(--gold-3); box-shadow: 0 0 10px rgba(255, 196, 0, .75); }
/* ligne du récap détaillé */
.rv-choice.gold { background: linear-gradient(100deg, #fff8de, #ffe9a8); border-color: var(--gold-3) !important; }
.jk-line { background: linear-gradient(100deg, #fff8de, #ffeeb5); border: 2px dashed var(--gold-3); border-radius: 99px; padding: 6px 12px; width: fit-content; margin-left: auto; margin-right: auto; color: #6a4e00; }
.jk-line b { color: #4a3200; }

/* la carte "PASS DORÉ" avant la partie */
.gold-pass {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; width: 100%;
  font-family: inherit; text-align: left; color: #4a3200; padding: 12px 14px; border-radius: 16px;
  border: 2.5px solid var(--gold-3);
  background: linear-gradient(150deg, #fff8dc 0%, var(--gold-1) 40%, var(--gold-2) 78%, #e9a900 100%);
  box-shadow: 0 4px 0 var(--gold-3), 0 0 18px rgba(255, 196, 0, .45);
  animation: gold-breathe 3.4s ease-in-out infinite;
}
.gold-pass:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-3); }
.gold-pass:disabled { filter: grayscale(.45); opacity: .75; animation: none; }
.gold-pass.compact { padding: 10px 12px; border-radius: 14px; }
.gold-pass .gp-em { font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7)); }
.gold-pass .gp-mid { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gold-pass .gp-t { font-family: var(--font-d); font-size: 14px; letter-spacing: .2px; }
.gold-pass.compact .gp-t { font-size: 13px; }
.gold-pass .gp-d { font-size: 11.5px; font-weight: 900; color: #6a4e00; }
.gold-pass .gp-price { display: flex; align-items: center; gap: 4px; font-family: var(--font-d); font-size: 15px; background: rgba(255, 255, 255, .55); border: 2px solid var(--gold-3); border-radius: 99px; padding: 4px 9px; }
.gold-pass.has-stock { animation: none; }
@keyframes gold-breathe { 0%, 100% { box-shadow: 0 4px 0 var(--gold-3), 0 0 14px rgba(255, 196, 0, .4); } 50% { box-shadow: 0 4px 0 var(--gold-3), 0 0 26px rgba(255, 196, 0, .8); } }
/* ============================================================
   « À TOI DE JOUER » — bande de cartes scrollable en haut de la home
   (format QuizDuel : tête, score, attente, gros bouton JOUER)
   ============================================================ */
.turn-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.turn-head h3 { font-family: var(--font-d); font-size: 15px; letter-spacing: .3px; display: flex; align-items: center; gap: 6px; }
.turn-head .turn-n { font-family: var(--font-d); font-size: 12px; color: #2b1c06; background: var(--yellow); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 8px; }
.turn-strip {
  display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden;
  padding: 11px 2px 12px; margin: -8px -2px 4px; /* padding haut : les pastilles dépassent de la carte, il ne faut pas les rogner */
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.turn-strip::-webkit-scrollbar { display: none; }
.turn-card {
  position: relative; flex: 0 0 auto; width: 124px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 9px 11px; font-family: inherit; text-align: center;
  /* un <button> n'hérite PAS la couleur du body → sans ça le pseudo reste noir en thème sombre */
  color: var(--ink);
  background: var(--card); border: var(--bw) solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow);
}
.turn-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.turn-card .tc-wait {
  position: absolute; top: -7px; right: 6px; display: flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 900; color: var(--ink-60);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 99px; padding: 1px 6px;
}
.turn-card .tc-game { position: absolute; top: -8px; left: 6px; font-size: 13px; background: var(--card); border: 2px solid var(--ink); border-radius: 99px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.turn-card .tc-face { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--ink); overflow: hidden; background: var(--paper-2); display: block; }
.turn-card .tc-face img, .turn-card .tc-face .pflip, .turn-card .tc-face .pflip-in { width: 100%; height: 100%; display: block; }
.turn-card .tc-face img { object-fit: cover; }
/* le retournement perso ↔ photo dans une petite tête : pas de perspective agressive */
.fx-flip { perspective: 600px; }
.fx-flip .pflip-in { animation-duration: 8s; }
.turn-card .tc-name { font-size: 11.5px; font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn-card .tc-score { font-family: var(--font-d); font-size: 17px; line-height: 1; color: var(--blue); }
.turn-card .tc-score i { font-style: normal; color: var(--ink-30); margin: 0 1px; }
.turn-card .tc-score.up { color: var(--green-d); }
.turn-card .tc-score.down { color: var(--red-d); }
/* rien à comparer encore : on montre l'étape plutôt qu'un 0–0 qui ne dit rien */
.turn-card .tc-step { font-family: var(--font-d); font-size: 11px; letter-spacing: .3px; color: var(--ink-60); background: var(--paper-2); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.turn-card .tc-step.new { color: #2b1c06; background: var(--yellow); border: 2px solid var(--ink); } /* fond jaune → encre en dur (le thème sombre inverse --ink) */
.turn-card .tc-play {
  margin-top: 2px; width: 100%; font-family: var(--font-d); font-size: 12.5px; letter-spacing: .4px;
  /* vert un peu plus soutenu que .btn.green : le blanc dessus reste lisible même en petit */
  color: #fff; background: linear-gradient(180deg, #3cc96b, #23984a); border: 2.5px solid var(--ink); border-radius: 99px;
  padding: 6px 0; box-shadow: 0 3px 0 #1c7a3c; text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

/* ============================================================
   🔤 MOTAMO — duel de mots façon Motus/SUTOM
   Rouge = bien placée · jaune = présente mal placée · gris = absente
   ============================================================ */
:root { --mo-navy: #2b2550; --mo-navy-2: #3b3266; --mo-red: #e2413a; --mo-yel: #ffc400; }

/* bannière du mode dans l'onglet Jouer */
.mo-banner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  width: 100%; margin-top: 12px; padding: 15px 15px 13px; text-align: left; font-family: inherit;
  color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: linear-gradient(135deg, var(--mo-navy) 0%, var(--mo-navy-2) 55%, #4a3f85 100%);
  box-shadow: var(--shadow); overflow: hidden;
}
.mo-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.mo-banner .mo-b-new, .ml-banner .mo-b-new, .sk-banner .mo-b-new, .fc-banner .mo-b-new { position: absolute; top: 10px; right: 12px; font-family: var(--font-d); font-size: 10px; letter-spacing: .6px; background: var(--mo-yel); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 3px 9px; transform: rotate(3deg); z-index: 1; }
.mo-banner .mo-b-sub, .ml-banner .mo-b-sub, .sk-banner .mo-b-sub, .fc-banner .mo-b-sub { font-size: 12.5px; font-weight: 900; opacity: .92; position: relative; }
.mo-banner .mo-b-play, .ml-banner .mo-b-play, .sk-banner .mo-b-play, .fc-banner .mo-b-play { font-family: var(--font-d); font-size: 14px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 6px 18px; box-shadow: 0 3px 0 var(--sticker); position: relative; }
.mo-tiles { display: flex; gap: 5px; }
.mo-t {
  width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 19px; color: #fff; border-radius: 8px;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .55);
}
.mo-t.r { background: var(--mo-red); border-color: var(--ink); }
.mo-t.y { background: var(--mo-yel); color: var(--ink); border-color: var(--ink); border-radius: 50%; }
.mo-banner .mo-tiles { animation: mo-pop-in .5s cubic-bezier(.34, 1.6, .64, 1); }

/* logo texte compact (feuilles / résultat) */
.mo-logo, .mo-logo-sm { display: inline-flex; gap: 3px; }
.mo-logo b, .mo-logo-sm b { font-family: var(--font-d); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 7px; background: var(--mo-navy); color: #fff; border: 2px solid var(--ink); }
.mo-logo-sm b { width: 22px; height: 22px; font-size: 13px; border-radius: 5px; }
.mo-logo b.r, .mo-logo-sm b.r { background: var(--mo-red); }
.mo-logo b.y, .mo-logo-sm b.y { background: var(--mo-yel); color: var(--ink); border-radius: 50%; }

/* écran de jeu */
.mo-screen { padding-bottom: 8px; }
.mo-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 8px; }
.mo-tag { font-family: var(--font-d); font-size: 13px; background: var(--mo-navy); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 12px; }
.mo-len { font-size: 12px; font-weight: 900; color: var(--ink-60); }
.mo-grid { display: flex; flex-direction: column; gap: 5px; align-items: center; margin: 4px 0 8px; }
.mo-row { display: flex; gap: 5px; justify-content: center; }
.mo-cell {
  width: clamp(30px, 9.6vw, 42px); height: clamp(34px, 10.4vw, 46px);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: clamp(16px, 5vw, 22px); color: #fff; text-transform: uppercase;
  background: var(--mo-navy-2); border: 2px solid var(--ink); border-radius: 8px;
}
.mo-row.played .mo-cell { animation: mo-flip .32s ease both; }
.mo-cell.ok { background: var(--mo-red); }
.mo-cell.mis { background: var(--mo-yel); color: var(--ink); border-radius: 50%; }
.mo-cell.no { background: var(--mo-navy-2); opacity: .62; }
.mo-cell.in { background: #fff; color: var(--ink); }
/* lettres IMPOSÉES (1re lettre + bien placées trouvées) : rouge, non effaçables, façon SUTOM */
.mo-cell.in.fix { background: var(--mo-red); color: #fff; }
.mo-cell.in.typed { animation: mo-pop-in .14s ease; }
.mo-cell.in .mo-dot { font-style: normal; color: var(--ink-30); }
.mo-row.input.shake { animation: shake .4s; }
.mo-hint { text-align: center; color: var(--ink-60); font-weight: 900; margin-bottom: 8px; }
@keyframes mo-flip { 0% { transform: rotateX(90deg); opacity: .4; } 100% { transform: rotateX(0); opacity: 1; } }
@keyframes mo-pop-in { 0% { transform: scale(.85); } 100% { transform: scale(1); } }

/* clavier AZERTY */
.mo-kb { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.mo-kb-row { display: flex; gap: 4.5px; justify-content: center; }
.mo-key {
  flex: 1; max-width: 36px; height: 46px; font-family: inherit; font-weight: 900; font-size: 15px;
  color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 0 2.5px 0 var(--sticker); padding: 0; touch-action: manipulation;
}
.mo-key:active { transform: translateY(2px); box-shadow: 0 0.5px 0 var(--sticker); }
.mo-key.wide { max-width: 54px; font-size: 17px; }
.mo-key.go { background: var(--green); color: #fff; }
.mo-key.ok { background: var(--mo-red); color: #fff; }
.mo-key.mis { background: var(--mo-yel); }
.mo-key.no { background: var(--paper-2); color: var(--ink-30); box-shadow: 0 1px 0 var(--ink-30); border-color: var(--ink-30); }

/* panneau de fin de mot */
.mo-panel {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(430px, calc(100% - 24px)); background: var(--card); border: var(--bw) solid var(--ink);
  border-radius: 18px; box-shadow: 0 6px 0 var(--sticker); padding: 15px; text-align: center; z-index: 60;
  animation: drop-up .35s cubic-bezier(.34, 1.5, .64, 1);
}
.mo-p-word { font-family: var(--font-d); font-size: 20px; }
.mo-p-word.ok { color: var(--green-d); }
.mo-p-word.ko { color: var(--red-d); }
.mo-p-reveal { font-weight: 900; margin-top: 4px; }
.mo-p-reveal b { font-family: var(--font-d); letter-spacing: 1px; color: var(--mo-navy); }
.mo-p-opp { display: block; font-size: 12.5px; font-weight: 900; margin-top: 9px; color: var(--ink-60); line-height: 1.7; }
.mo-p-opp .avatar { display: inline-block; vertical-align: -8px; margin-right: 4px; }
.mo-p-opp .mo-win-txt { color: var(--green-d); }

/* hub + résultat : chips par mot */
.mo-b-chip { font-size: 11.5px; font-weight: 900; border-radius: 99px; padding: 3px 8px; border: 2px solid var(--ink); background: var(--paper-2); white-space: nowrap; }
.mo-b-chip.ok { background: #e8f9ee; color: var(--green-d); }
.mo-b-chip.ko { background: #ffe8e6; color: var(--red-d); }
.mo-b-chip.hid { background: var(--ink-30); color: #fff; }
.mo-b-chip.none { background: none; border-color: var(--ink-30); color: var(--ink-30); }
.mo-b-side { display: flex; justify-content: center; min-width: 84px; }
.mo-b-side.won .mo-b-chip { box-shadow: 0 0 0 2.5px var(--yellow); }
.mo-rr { align-items: center; }
/* le tableau du résultat MOTAMO : colonne mot plus large que les 34px du quiz */
.result-rounds .rr-line.mo-rr { grid-template-columns: 88px 1fr 20px 1fr; }
.result-rounds .rr-headline .mo-rr-word { background: none; }
.mo-rr-word { font-family: var(--font-d); font-size: 10.5px; letter-spacing: .3px; background: var(--mo-navy); color: #fff; border-radius: 7px; padding: 4px 5px; min-width: 82px; text-align: center; white-space: nowrap; }
.mo-rr-side { display: flex; justify-content: center; min-width: 78px; }
.mo-rr-side.won .mo-b-chip { box-shadow: 0 0 0 2.5px var(--yellow); }
.mo-mini { display: inline-flex; flex-direction: column; gap: 2px; }
.mo-mini i { display: flex; gap: 2px; }
.mo-mini b { width: 8px; height: 8px; border-radius: 2px; background: var(--ink-30); }
.mo-mini b.ok { background: var(--mo-red); }
.mo-mini b.mis { background: var(--mo-yel); border-radius: 50%; }

/* revoir les grilles */
.mo-rv-wrap { display: flex; gap: 12px; justify-content: center; }
.mo-rv-col { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.mo-rv-name { font-family: var(--font-d); font-size: 13px; margin-bottom: 2px; }
.mo-row.mini { gap: 3px; }
.mo-cell.sm { width: 20px; height: 22px; font-size: 11px; border-radius: 5px; border-width: 1.5px; font-family: var(--font-b); font-weight: 900; }

/* stats MOTAMO */
.mo-st-bars { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 4px; }
.mo-st-line { display: flex; align-items: center; gap: 8px; }
.mo-st-k { width: 24px; text-align: center; font-family: var(--font-d); font-size: 14px; }
.mo-st-bar { flex: 1; height: 18px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 7px; overflow: hidden; }
.mo-st-bar i { display: block; height: 100%; background: var(--blue); border-radius: 4px; min-width: 2px; transition: width .5s cubic-bezier(.34, 1.3, .64, 1); }
.mo-st-bar i.ko { background: var(--red); }
.mo-st-n { width: 30px; text-align: right; font-weight: 900; }
.mo-st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.mo-st-card { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 12px; padding: 9px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.mo-st-card b { font-family: var(--font-d); font-size: 19px; }
.mo-st-card span { font-size: 10.5px; font-weight: 900; color: var(--ink-60); }
.mo-st-best { margin-top: 10px; text-align: center; font-weight: 900; background: #fff8dc; border: 2px dashed var(--yellow-d); border-radius: 12px; padding: 8px; font-size: 13px; }

/* ============================================================
   🧩 MÉLIMO — grilles croisées : roue de lettres + grille
   Identité : teal profond + orange (vs MOTAMO rouge/jaune/nuit)
   ============================================================ */
:root { --ml-teal: #00857a; --ml-teal-d: #00655c; --ml-orange: #ff8a00; }

/* bannière du mode (onglet Jouer) */
.ml-banner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  width: 100%; margin-top: 12px; padding: 15px 15px 13px; text-align: left; font-family: inherit;
  color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: linear-gradient(135deg, #006b62 0%, var(--ml-teal) 55%, #00a08f 100%);
  box-shadow: var(--shadow); overflow: hidden;
}
.ml-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.ml-banner::after { content: '🧩'; position: absolute; right: -12px; bottom: -8px; font-size: 78px; opacity: .18; transform: rotate(12deg); }
.ml-tiles { display: flex; gap: 5px; }
.ml-t {
  width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 19px; color: #fff; border-radius: 8px;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .55);
}
.ml-t.a { background: var(--ml-orange); border-color: var(--ink); }
.ml-t.b { background: #fff; color: var(--ml-teal-d); border-color: var(--ink); border-radius: 50%; }

/* logo compact (board/résultat) */
.ml-logo-sm { display: inline-flex; gap: 3px; }
.ml-logo-sm b { font-family: var(--font-d); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 5px; background: var(--ml-teal); color: #fff; border: 2px solid var(--ink); }
.ml-logo-sm b.t { background: var(--ml-orange); }
.ml-logo-sm b.o { background: #fff; color: var(--ml-teal-d); border-radius: 50%; }

/* écran de jeu */
.ml-screen { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 8px; }
.ml-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 6px; }
.ml-tag { font-family: var(--font-d); font-size: 12.5px; background: var(--ml-teal); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 11px; }
.ml-count, .ml-bonus { font-size: 13px; font-weight: 900; background: var(--card); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; }
.ml-bonus.flash { animation: pop 0.35s cubic-bezier(0.34, 1.8, 0.64, 1); background: #fff3b0; }

.ml-grid-wrap { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; min-height: 0; padding: 2px 0; }
.ml-grid { --mlc: clamp(30px, min(calc((100vw - 40px) / var(--mlw, 9)), calc((100dvh - 430px) / var(--mlh, 9))), 52px); display: grid; gap: 4px; }
.ml-grid .ml-cell { width: var(--mlc); height: var(--mlc); font-size: calc(var(--mlc) * 0.5); }
.ml-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 17px; color: #fff; text-transform: uppercase;
  background: rgba(43, 28, 6, .34); border: 2px solid rgba(43, 28, 6, .45); border-radius: 8px;
}
body.theme-light .ml-cell, body:not(.theme-dark) .ml-cell { background: #cbbda5; border-color: #a8977a; color: #fff; }
.ml-cell.on { background: var(--ml-teal) !important; border-color: var(--ink) !important; }
.ml-cell.hint { background: var(--ml-orange) !important; border-color: var(--ink) !important; }
.ml-cell.pop { animation: mo-flip .32s ease both; }
.ml-void { visibility: hidden; }

/* mot en cours de tracé */
.ml-word { text-align: center; font-family: var(--font-d); font-size: 21px; letter-spacing: 2px; min-height: 30px; color: var(--ink); }
.ml-word.live { color: var(--ml-teal-d); }
.ml-word.ko { color: var(--red-d); animation: shake .4s; }

/* la roue */
.ml-wheel-zone { position: relative; display: flex; justify-content: center; padding: 2px 0 4px; flex: none; }
.ml-wheel {
  position: relative; width: min(248px, 66vw); height: min(248px, 66vw); border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #ffffff, #f3ead9 70%);
  border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--sticker);
  touch-action: none; user-select: none;
}
body.theme-dark .ml-wheel { background: radial-gradient(circle at 50% 42%, #3a3226, #241f18 70%); }
.ml-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ml-trace path { fill: none; stroke: var(--ml-orange); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ml-letter {
  position: absolute; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 24px; color: var(--ink);
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker);
  pointer-events: none;
}
.ml-letter.sel { background: var(--ml-orange); color: #fff; transform: scale(1.08); box-shadow: 0 3px 0 var(--sticker), 0 0 14px rgba(255, 138, 0, .6); }
.ml-shuffle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; font-size: 19px;
  background: var(--paper-2); border: 2.5px solid var(--ink); box-shadow: 0 2.5px 0 var(--sticker); font-family: inherit;
}
.ml-shuffle:active { transform: translate(-50%, -50%) translateY(2px); box-shadow: 0 0.5px 0 var(--sticker); }

/* ← quitter une manche solo (jeux du jour / zen / salon) */
.solo-quit { padding: 8px 12px; font-size: 17px; line-height: 1; flex: none; }

/* barre d'outils sous la grille : les bonus ne flottent plus dans le vide */
.game-tools { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 10px; margin-bottom: 6px; flex: none; position: relative; z-index: 2; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 900; font-size: 13px;
  color: var(--ink); background: #fff8dc; border: 2.5px dashed var(--yellow-d); border-radius: 999px;
  padding: 8px 14px; box-shadow: 0 3px 0 var(--yellow-d);
}
.tool-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-d); }
.tool-btn .tool-em { font-size: 17px; line-height: 1; }
.tool-btn .tool-cost { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--ink-60); }
.tool-btn .tool-cost.free { color: var(--green-d); font-weight: 900; }
.tool-btn.free { background: #d9f7e2; border-color: var(--green-d); box-shadow: 0 3px 0 var(--green-d); animation: pulse 1.6s infinite; }
/* la jauge des mots bonus : on dit ce que ça rapporte */
.ml-bonus .ml-bn-hint { font-style: normal; font-size: 10.5px; font-weight: 900; color: var(--ink-60); margin-left: 4px; }
.tool-btn.solid { background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); }
.tool-btn.solid:active { box-shadow: 0 1px 0 var(--sticker); }
.tool-btn[disabled] { opacity: .45; }

/* indice payant */
.ml-hint {
  position: absolute; right: 10px; top: 2px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 52px; height: 52px; border-radius: 50%; font-size: 19px; font-family: inherit;
  background: #fff8dc; border: 2.5px dashed var(--yellow-d); box-shadow: 0 3px 0 var(--yellow-d);
}
.ml-hint:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--yellow-d); }
.ml-hint .ml-hint-c { display: flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 900; color: var(--ink-60); }

/* carte MÉLIMO du wizard (5e, pleine largeur) */
.nd-game.nd-g-ml { background: linear-gradient(160deg, #006b62, #00a08f); }

/* ============================================================
   🔢 KIDOKU — sudoku 6×6 en duel. Identité : violet + jaune.
   ============================================================ */
:root { --sk-violet: #6b3fb8; --sk-violet-d: #533090; }

/* bannière (onglet Jouer) */
.sk-banner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  width: 100%; margin-top: 12px; padding: 15px 15px 13px; text-align: left; font-family: inherit;
  color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: linear-gradient(135deg, #532f92 0%, var(--sk-violet) 55%, #8250d8 100%);
  box-shadow: var(--shadow); overflow: hidden;
}
.sk-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.sk-banner::after { content: '🔢'; position: absolute; right: -10px; bottom: -8px; font-size: 76px; opacity: .18; transform: rotate(12deg); }
.sk-banner .mo-b-new, .sk-banner .mo-b-sub, .sk-banner .mo-b-play { position: relative; }
.sk-banner .mo-b-new { position: absolute; }
.sk-tiles { display: flex; gap: 5px; }
.sk-t {
  width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 19px; color: #fff; border-radius: 8px;
  background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .55);
}
.sk-t.v { background: #fff; color: var(--sk-violet); border-color: var(--ink); }
.sk-t.y { background: var(--yellow); color: var(--ink); border-color: var(--ink); border-radius: 50%; }

/* logo compact */
.sk-logo-sm { display: inline-flex; gap: 3px; }
.sk-logo-sm b { font-family: var(--font-d); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 5px; background: var(--sk-violet); color: #fff; border: 2px solid var(--ink); }
.sk-logo-sm b.v { background: #fff; color: var(--sk-violet); }
.sk-logo-sm b.y { background: var(--yellow); color: var(--ink); border-radius: 50%; }

/* écran de jeu */
.sk-screen { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 10px; }
.sk-tag { font-family: var(--font-d); font-size: 12.5px; background: var(--sk-violet); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 11px; }
/* ❤️ les vies : on doit VOIR qu'on peut perdre la grille */
.sk-lives { display: inline-flex; align-items: center; gap: 2px; background: var(--card); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; }
.sk-lives .sk-life { font-size: 14px; line-height: 1; font-style: normal; transition: transform .2s; }
.sk-lives .sk-life.dead { opacity: .55; filter: grayscale(1); }
.sk-lives.low { background: #ffe0dc; border-color: var(--red-d); animation: pulse 1.1s infinite; }
.sk-lives.hit { animation: shake .4s; }
.sk-errs .sk-noerr { color: var(--green-d); letter-spacing: 0; }
.sk-errs .sk-errmax { color: var(--ink-60); letter-spacing: 0; }

.sk-grid-wrap { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; min-height: 0; padding: 2px 0; }
/* la case s'adapte à l'écran (largeur ET hauteur dispo) : plus de grille
   riquiqui perdue au milieu du vide sur les grands téléphones */
.sk-grid {
  --skc: clamp(40px, min(calc((100vw - 34px) / 6), calc((100dvh - 330px) / 6)), 62px);
  display: grid; grid-template-columns: repeat(6, var(--skc)); grid-auto-rows: var(--skc); gap: 0;
  border: 3.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--ink);
}
.sk-grid .sk-cell { font-size: calc(var(--skc) * 0.46); }
.sk-grid.n9 {
  --skc: clamp(31px, min(calc((100vw - 30px) / 9), calc((100dvh - 320px) / 9)), 46px);
  grid-template-columns: repeat(9, var(--skc)); grid-auto-rows: var(--skc);
}
/* case DÉBLOQUÉE aux coins : teinte or */
.sk-cell.hinted { color: #b8860b; background: #fff3c4; }
.sk-cell.hinted.hl { background: #f4e5ab; }
/* bouton indice, ancré au coin de la zone grille */


.sk-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 22px; color: var(--sk-violet);
  background: var(--card); border: none; outline: 1px solid rgba(43, 28, 6, .18); font-weight: 400;
  padding: 0; font-family: var(--font-d);
}
.sk-cell.given { color: var(--ink); background: var(--paper-2); }
.sk-cell.mine { color: var(--sk-violet); }
.sk-cell.bR { border-right: 3px solid var(--ink); }
.sk-cell.bB { border-bottom: 3px solid var(--ink); }
.sk-cell.hl { background: #fff8e0; }
.sk-cell.given.hl { background: #f3e8cd; }
.sk-cell.sel { background: var(--yellow) !important; color: var(--ink); box-shadow: inset 0 0 0 3px var(--sticker); }
.sk-cell.pop { animation: pop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1); }
.sk-cell.bad { background: #ffd7d3 !important; color: var(--red-d); animation: shake .4s; }
body.theme-dark .sk-cell.hl { background: #3a3226; }
body.theme-dark .sk-cell.given.hl { background: #443b2b; }

/* pavé 1-6 */
.sk-pad { display: flex; gap: 7px; justify-content: center; padding: 6px 6px 2px; flex: none; }
.sk-pad.n9 { gap: 4px; }
.sk-pad.n9 .sk-key { max-width: 42px; height: clamp(50px, calc((100dvh - 640px) / 2 + 50px), 70px); font-size: 22px; border-radius: 12px; }
.sk-key {
  flex: 1; max-width: 56px; height: clamp(52px, calc((100dvh - 620px) / 2 + 52px), 74px);
  font-family: var(--font-d); font-size: 24px;
  color: var(--ink); background: var(--card); border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: 0 3.5px 0 var(--sticker); padding: 0; touch-action: manipulation;
}
.sk-key:active { transform: translateY(3px); box-shadow: 0 0.5px 0 var(--sticker); }

/* carte du wizard : 6 modes → grille 2 colonnes, les 2 gros à cheval */
.nd-game.nd-g-sk { background: linear-gradient(160deg, #532f92, #8250d8); }
.nd-game.nd-g-ml { grid-column: auto; }
.nd-game.nd-g-sk { grid-column: auto; }

/* ============================================================
   ⛱️ FLÉCHO — mots fléchés en duel, ambiance chill summer :
   ciel, soleil couchant, corail. Les défs sont DANS la grille.
   ============================================================ */
:root { --fc-coral: #ff6f61; --fc-coral-d: #d94f42; --fc-sun: #ffc94b; --fc-sky: #3fb3d4; --fc-sand: #fff0cd; }
.fc-banner {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  width: 100%; margin-top: 12px; padding: 15px 15px 13px; text-align: left; font-family: inherit;
  color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: linear-gradient(135deg, var(--fc-sky) 0%, #ffb45c 58%, var(--fc-coral) 100%);
  box-shadow: var(--shadow); overflow: hidden;
}
.fc-banner:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.fc-banner::after { content: '⛱️'; position: absolute; right: -8px; bottom: -12px; font-size: 76px; opacity: .3; transform: rotate(-10deg); }
.fc-tiles { display: flex; gap: 5px; position: relative; }
.fc-t {
  width: 33px; height: 33px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 19px; color: #fff; border-radius: 8px;
  background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .6);
  transform: rotate(-2deg);
}
.fc-t:nth-child(2n) { transform: rotate(2deg); }
.fc-t.c { background: #fff; color: var(--fc-coral-d); border-color: var(--ink); }
.fc-t.s { background: var(--fc-sun); color: var(--ink); border-color: var(--ink); border-radius: 50%; }
.fc-logo-sm { display: inline-flex; gap: 3px; }
.fc-logo-sm b { font-family: var(--font-d); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border-radius: 5px; background: var(--fc-sky); color: #fff; border: 2px solid var(--ink); }
.fc-logo-sm b.c { background: var(--fc-coral); }
.fc-logo-sm b.s { background: var(--fc-sun); color: var(--ink); border-radius: 50%; }

/* écran de jeu : badges du haut */
.fc-tag { font-family: var(--font-d); font-size: 12px; background: var(--fc-coral); color: #fff; border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.fc-theme { font-family: var(--font-d); font-size: 12.5px; letter-spacing: .4px; color: var(--ink); background: var(--fc-sand); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.fc-errs { font-weight: 900; font-size: 11px; color: var(--red-d); }

/* la grille de fléchés : cases lettre crème, cases déf encre, flèches corail */
.fc-grid-wrap { margin-top: 8px; }
.fc-grid {
  --fcs: clamp(34px, min(calc((100vw - 26px) / var(--fcn)), calc((100vh - 396px) / var(--fch))), 47px);
  display: grid; grid-template-columns: repeat(var(--fcn), var(--fcs));
  justify-content: center; width: fit-content; margin: 0 auto;
  background: var(--card); border: 3px solid var(--ink); border-radius: 12px;
  overflow: hidden; box-shadow: 0 4px 0 var(--sticker);
}
.fc-cell {
  width: var(--fcs); height: var(--fcs); position: relative;
  display: flex; align-items: center; justify-content: center;
  border-right: 1.5px solid rgba(43, 28, 6, .22); border-bottom: 1.5px solid rgba(43, 28, 6, .22);
  padding: 0; font-family: inherit;
}
.fc-cell.blk { background: repeating-linear-gradient(45deg, #f6ecd4 0 6px, #efe2c4 6px 12px); }
.fc-cell.def { background: var(--ink); padding: 2px 3px; border-color: rgba(255, 246, 235, .18); }
.fc-dtxt {
  color: var(--paper); font-weight: 900; font-size: 8.6px; line-height: 1.14; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto;
}
.fc-dtxt.big { font-size: 10.5px; }
.fc-dtxt.sml { font-size: 7.9px; }
.fc-ar { position: absolute; width: 0; height: 0; }
.fc-ar.r { right: 0; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6.5px solid var(--fc-coral); }
.fc-ar.dn { bottom: 0; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6.5px solid var(--fc-coral); }
.fc-cell.let { background: #fff; font-family: var(--font-d); font-size: calc(var(--fcs) * .54); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.fc-cell.let.sl { background: var(--fc-sand); }
.fc-cell.let.cur { background: var(--fc-sun); box-shadow: inset 0 0 0 2.5px var(--sticker); }
.fc-cell.let.typed { color: var(--fc-coral-d); }
.fc-cell.let.gold { background: #fff3c4; color: #b8860b; }
.fc-cell.let.bad { background: #ffd7d3 !important; color: var(--red-d); animation: shake .4s; }
.fc-cell.let.pop { animation: pop 0.3s cubic-bezier(0.34, 1.8, 0.64, 1); }
.fc-cell.def.sldef { box-shadow: inset 0 0 0 3px var(--fc-sun); }

/* indices : rangée à droite sous la grille (💡 lettre 15 · 🎯 mot 50) */
.fc-hints { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 6px 0; }
.fc-hint { position: static; width: 50px; height: 50px; }

/* barre de définition active + navigation ‹ › */
.fc-defbar { display: flex; gap: 8px; align-items: stretch; margin: 10px 2px 6px; }
.fc-nav { width: 46px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--card); font-family: var(--font-d); font-size: 21px; color: var(--ink); box-shadow: 0 3px 0 var(--sticker); padding: 0; touch-action: manipulation; }
.fc-nav:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.fc-def {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
  background: var(--ink); color: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px;
  font-family: inherit; font-weight: 900; font-size: 14px; padding: 5px 10px; text-align: center;
  box-shadow: 0 3px 0 var(--sticker);
}
.fc-def .fc-dlen { font-size: 10px; opacity: .68; white-space: nowrap; font-weight: 900; }
.fc-def .muted { color: rgba(255, 246, 235, .6); }
.fc-kb { margin-top: 4px; }

/* carte FLÉCHO du wizard (7e, pleine largeur) + tuiles-logos des cartes */
.nd-game.nd-g-fc { background: linear-gradient(160deg, #2f97b5, #ff8a70); grid-column: auto; }
.nd-g-tiles { display: flex; justify-content: center; margin-bottom: 2px; }

/* ============================================================
   PROFIL façon réseau social : badge série, onglets, murs de photos
   ============================================================ */
.prof-ava .avatar, .prof-ava .pflip { width: 104px; height: 104px; }
.streak-pill {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-family: inherit; font-weight: 900; font-size: 14px; color: var(--ink);
  background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; box-shadow: 0 3px 0 var(--sticker);
}
.streak-pill b { font-family: var(--font-d); font-size: 16px; }
.streak-pill.safe { background: #d9f7e2; }
.streak-pill.danger { background: var(--red); color: #fff; animation: pulse 1.3s infinite; }
.streak-pill.danger b { color: #fff; }
.streak-pill .sp-cd { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 13px; }
.streak-pill .sp-ok { color: var(--green-d); font-size: 15px; }
.streak-pill.danger .sp-ok { color: #fff; }
.streak-pill .sp-txt { font-weight: 900; font-size: 12.5px; }

.prof-tabs { display: flex; gap: 6px; margin: 14px 0 12px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 16px; padding: 4px; }
.prof-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font-d); font-size: 13.5px; letter-spacing: .4px; color: var(--ink-60);
  background: none; border: none; border-radius: 12px; padding: 9px 4px;
}
.prof-tab b { font-family: var(--font-d); }
.prof-tab.on { background: var(--card); color: var(--ink); box-shadow: 0 2px 0 var(--sticker); border: 2px solid var(--ink); }

/* la note de confidentialité au-dessus du mur (façon « seuls tes amis voient… ») */
.wall-note {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-weight: 800; font-size: 12px; color: var(--ink-60);
  background: var(--paper-2); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px;
}
.wall-hide-btn { font-family: inherit; font-weight: 900; font-size: 11.5px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 999px; padding: 4px 10px; box-shadow: 0 2px 0 var(--sticker); }
.wall-hide-btn.off { background: var(--yellow); }

/* le mur : 3 colonnes bord à bord, comme les grands réseaux */
.wall-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  margin: 0 -18px; /* pleine largeur : on annule le padding de l'écran */
}
.wall-thumb {
  position: relative; padding: 0; border: none; background: var(--paper-2);
  aspect-ratio: 3 / 4; overflow: hidden; display: block; width: 100%;
}
.wall-thumb img, .wall-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-thumb .vic-play { position: absolute; top: 6px; right: 7px; font-size: 13px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.wall-score {
  position: absolute; left: 6px; bottom: 6px;
  font-family: var(--font-d); font-size: 12.5px; color: #fff;
  background: rgba(43, 28, 6, .78); border-radius: 8px; padding: 2px 7px;
}
.wall-score.win { background: rgba(35, 152, 74, .88); }
.wall-score.lose { background: rgba(214, 58, 48, .88); }
.wall-vis { position: absolute; right: 6px; bottom: 6px; font-size: 11px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.wall-from {
  position: absolute; right: 6px; bottom: 6px; max-width: 62%;
  font-weight: 900; font-size: 10px; color: #fff; text-align: right;
  background: rgba(43, 28, 6, .72); border-radius: 7px; padding: 2px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* onglets : emoji de mur + icône dessinée pour les stats */
.prof-tab .pt-em { font-size: 17px; line-height: 1; }
.prof-tab .pt-ic { height: 25px; width: auto; display: block; transform: translateY(-1px); }
/* recalage optique : la masse de l'icône stats est plus basse (58 %) que celle des trophées (49 %) */
.prof-tab .pt-ic.pt-stats { transform: translateY(-3px); }
.prof-tab.on .pt-em { filter: none; }

/* les MURS : cadre crème de la DA (le noir façon Yope jurait avec le reste) */
#prof-body.on-wall {
  background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 20px;
  padding: 12px 10px 14px; margin: 0 -6px; box-shadow: inset 0 3px 0 rgba(43, 28, 6, .07);
}
#prof-body.on-wall .wall-note { background: rgba(255, 255, 255, .72); }
#prof-body.on-wall .card { background: var(--card); }
#prof-body.on-wall .wall-thumb { background: rgba(43, 28, 6, .08); box-shadow: 0 2px 0 rgba(43, 28, 6, .18); }

/* on est sur STATS : le fond change nettement sous la barre d'onglets */
#prof-body.on-stats {
  background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 20px;
  padding: 14px 12px 16px; margin: 0 -6px; box-shadow: inset 0 3px 0 rgba(43, 28, 6, .07);
}
#prof-body.on-stats .card { background: var(--card); }

/* vignettes de mur : coins arrondis façon Yope */
.wall-grid { gap: 5px; margin: 0 -8px; }
.wall-thumb { border-radius: 16px; box-shadow: 0 2px 0 rgba(43, 28, 6, .18); }

/* carte NIVEAU : refaite propre, alignée et responsive */
.lvl-card { background: var(--card); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--sticker); padding: 12px 14px; margin-top: 12px; text-align: left; }
.lvl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lvl-chip { font-family: var(--font-d); font-size: 16px; letter-spacing: .5px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.lvl-next { font-weight: 900; font-size: 12px; color: var(--ink-60); white-space: nowrap; }
.lvl-next b { color: var(--ink); }
.lvl-track { height: 16px; margin: 10px 0 8px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; }
.lvl-track i {
  display: block; height: 100%; border-radius: 999px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #3a61d6, var(--blue) 45%, #8fb0ff);
  box-shadow: 0 0 12px rgba(77, 124, 255, .75), inset 0 2px 0 rgba(255, 255, 255, .45);
  transition: width .6s cubic-bezier(.34,1.3,.64,1);
}
.lvl-track i::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.85) 45%, transparent 70%);
  transform: translateX(-100%); animation: lvl-shine 2.4s ease-in-out infinite;
}
@keyframes lvl-shine { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(220%); } }
.lvl-card { position: relative; overflow: hidden; }
.lvl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 900; font-size: 12px; flex-wrap: wrap; }

.sec-ic { height: 26px; width: auto; vertical-align: -6px; margin-right: 2px; }
.inline-ic { height: 20px; width: auto; display: block; }

/* les mesures de perf */
.perf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.perf-grid.four { grid-template-columns: repeat(2, 1fr); }
.perf-box { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; text-align: center; }
.perf-box .perf-em { font-size: 20px; line-height: 1; height: 22px; display: flex; align-items: center; }
.perf-box .perf-v { font-family: var(--font-d); font-size: 24px; line-height: 1.05; }
.perf-box .perf-k { font-family: var(--font-d); font-size: 10.5px; letter-spacing: .4px; color: var(--ink); line-height: 1.1; }
.perf-box .perf-s { font-weight: 800; font-size: 9px; color: var(--ink-60); line-height: 1.2; }
.elo-delta { font-weight: 900; font-size: 12.5px; border-radius: 999px; padding: 2px 8px; border: 2px solid var(--ink); }
.elo-delta.up { background: #d9f7e2; color: var(--green-d); }
.elo-delta.down { background: #ffe0dc; color: var(--red-d); }

/* récap : les mois défilent horizontalement (avant : mois courant seulement) */
.cal-card { padding: 10px 0 8px; overflow: hidden; }
.cal-scroll { max-height: 340px; overflow-y: auto; scroll-snap-type: y proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 0 12px; }
.cal-scroll::-webkit-scrollbar { display: none; }
.cal-page { scroll-snap-align: start; padding: 4px 0 10px; border-bottom: 1.5px dashed var(--ink-30); }
.cal-page:last-child { border-bottom: none; }
.cal-hint { display: block; text-align: center; font-weight: 800; font-size: 11px; margin: 0 0 6px; }

/* pastille « nouveau » sur l'onglet du mur de la honte */
.prof-tab .tab-new {
  position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--red); color: #fff; border: 2px solid var(--ink);
  font-family: var(--font-b); font-weight: 900; font-size: 10.5px;
  display: flex; align-items: center; justify-content: center; animation: pulse 1.2s infinite;
}

/* 💀 visionneur d'un chambrage reçu : média + réactions + commentaires */
.shame-sheet { max-height: 92vh; overflow-y: auto; }
.sh-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.sh-head .sh-who { flex: 1; display: flex; flex-direction: column; text-align: left; font-weight: 900; font-size: 14px; line-height: 1.2; }
.sh-head .sh-sub { font-weight: 800; font-size: 11.5px; color: var(--ink-60); }
.sh-media {
  border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 4px 0 var(--sticker); max-height: 46vh; display: flex; justify-content: center;
}
.sh-media img, .sh-media video { width: 100%; max-height: 46vh; object-fit: contain; display: block; background: #000; }
.sh-facebar { margin-top: 12px; }
.sh-reacts { margin-top: 8px; }
.sh-comments { max-height: 30vh; overflow-y: auto; margin-top: 4px; }

/* séries (onglet stats) */
.serie-row { display: flex; align-items: center; gap: 8px; padding: 8px 2px; font-weight: 800; font-size: 12px; color: var(--ink-60); border-bottom: 1.5px dashed var(--ink-30); }
.serie-row:last-child { border-bottom: none; }
.serie-row.big { font-size: 13.5px; color: var(--ink); }
.serie-row .serie-em { width: 24px; text-align: center; flex: none; }
.serie-row .serie-lbl { flex: none; text-align: left; white-space: nowrap; }
.serie-row .serie-val { flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.serie-row .serie-val b { font-family: var(--font-d); font-size: 14px; }

/* profil : les stats de chaque jeu, une ligne par mode */
.pg-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; width: 100%; }
.pg-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit; padding: 10px 12px; }
.pg-row .mo-logo-sm b, .pg-row .ml-logo-sm b, .pg-row .sk-logo-sm b, .pg-row .fc-logo-sm b { width: 17px; height: 17px; font-size: 10px; border-radius: 4px; }
.pg-row .mo-logo-sm, .pg-row .ml-logo-sm, .pg-row .sk-logo-sm, .pg-row .fc-logo-sm { gap: 2px; flex-shrink: 0; }
.pg-row:active { transform: translateY(2px); }
.pg-mid { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-wtl { font-weight: 900; font-size: 13px; color: var(--ink); white-space: nowrap; }
.pg-wtl .w { color: var(--green-d); }
.pg-wtl .l { color: var(--red-d); }
.pg-sub { font-weight: 800; font-size: 11.5px; color: var(--ink-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-go { font-family: var(--font-d); font-size: 11px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; box-shadow: 0 2px 0 var(--sticker); white-space: nowrap; }

/* ============================================================
   ☀️ JEUX DU JOUR — un défi par jeu, le même pour toute la France
   ============================================================ */
.daily-pill { font-family: var(--font-d); font-size: 11.5px; letter-spacing: .4px; background: #fff3b0; color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 5px 11px; white-space: nowrap; }
.daily-head { margin: 4px 0 10px; }
.daily-title { font-family: var(--font-d); font-size: 30px; margin: 0; }
.daily-sub { font-weight: 900; font-size: 12.5px; color: var(--ink-60); margin-top: 2px; }
.daily-cd { font-weight: 900; font-size: 12.5px; margin-top: 6px; }
.daily-cd b { font-family: var(--font-d); background: var(--ink); color: var(--paper); border-radius: 8px; padding: 2px 8px; }
.daily-prog { display: flex; align-items: center; gap: 10px; margin: 2px 2px 8px; }
.daily-track { flex: 1; height: 14px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 99px; overflow: hidden; }
.daily-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), #ff9f43); transition: width .5s cubic-bezier(.34,1.4,.64,1); }
.daily-count { font-family: var(--font-d); font-size: 16px; }

.dg-card {
  position: relative; display: block; width: 100%; margin-top: 12px; padding: 0; text-align: left; font-family: inherit;
  color: #fff; border: var(--bw) solid var(--ink); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden;
}
/* l'illustration occupe la moitié droite ; le texte garde la gauche (cf. maquette) */
.dg-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 13px 14px 13px; width: min(60%, 235px); min-height: 128px; }
.dg-art { position: absolute; right: 2px; bottom: 0; height: 100%; width: auto; max-width: 46%; pointer-events: none; }
.dg-art text { paint-order: stroke; }
.dg-card:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.dg-card.dg-quiz { background: linear-gradient(135deg, #e8a800, var(--yellow)); color: var(--ink); }
.dg-card.dg-mots { background: linear-gradient(135deg, var(--mo-navy), #4a3f85); }
.dg-card.dg-melimo { background: linear-gradient(135deg, #006b62, #00a08f); }
.dg-card.dg-sudoku { background: linear-gradient(135deg, #532f92, #8250d8); }
.dg-card.dg-fleche { background: linear-gradient(135deg, var(--fc-sky) 0%, #ffb45c 58%, var(--fc-coral) 100%); }
.dg-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.dg-name { font-family: var(--font-d); font-size: 18px; letter-spacing: .4px; }
.dg-logo { display: inline-flex; }
.dg-badge { font-family: var(--font-d); font-size: 9.5px; letter-spacing: .5px; border: 2px solid var(--ink); border-radius: 99px; padding: 3px 8px; white-space: nowrap; }
.dg-badge.done { background: #d9f7e2; color: var(--ink); }
.dg-badge.fomo { background: #fff3b0; color: var(--ink); animation: pulse 2.2s infinite; }
.dg-line { font-weight: 900; font-size: 12.5px; opacity: .95; }
.dg-score { font-family: var(--font-d); letter-spacing: .3px; }
.dg-fr { font-weight: 900; font-size: 11.5px; opacity: .92; }
.dg-cta { font-family: var(--font-d); font-size: 13px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 99px; padding: 6px 16px; box-shadow: 0 3px 0 var(--sticker); }
.dg-cta.board { background: var(--yellow); }

/* la sheet de classement */
.dg-myscore { font-family: var(--font-d); font-size: 20px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 14px; display: inline-block; }
.dg-sec { font-family: var(--font-d); font-size: 12px; letter-spacing: .6px; color: var(--ink-60); margin: 12px 2px 6px; }
.dg-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 12px; margin-top: 6px; background: var(--card); }
.dg-row.me { background: #fff3b0; box-shadow: 0 2px 0 var(--sticker); }
.dg-rank { font-family: var(--font-d); font-size: 14px; min-width: 34px; text-align: center; }
.dg-face, .dg-row .pflip { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); flex-shrink: 0; object-fit: cover; }
.dg-row .pflip .dg-face { border: none; width: 100%; height: 100%; }
.dg-nm { font-weight: 900; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sc { font-weight: 900; font-size: 12px; color: var(--ink-60); white-space: nowrap; }


/* ============================================================
   Onglet Jouer : les 3 parties (DUELS · SOLO ZEN · MULTI)
   ============================================================ */
.play-tabs { display: flex; gap: 8px; margin: 2px 0 12px; }
.play-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px 8px; font-family: inherit; border: 2.5px solid var(--ink); border-radius: 14px;
  background: var(--card); box-shadow: 0 3px 0 var(--sticker); color: var(--ink);
}
.play-tab span { font-size: 19px; line-height: 1; }
.play-tab b { font-family: var(--font-d); font-size: 11px; letter-spacing: .4px; }
.play-tab.on { background: var(--yellow); transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
/* onglets en image (SOLO ZEN, MULTI) : le visuel remplit la carte, la bordure CSS fait le cadre */
.play-tab.tab-img { padding: 0; overflow: hidden; position: relative; }
.play-tab.tab-img img { display: block; width: 100%; height: auto; aspect-ratio: 560 / 318; object-fit: cover; } /* même ratio pour les 3 : les visuels se recadrent */
.play-tab.tab-img:not(.on) img { opacity: .68; } /* pas de filter : ça bavait sur iOS */
.play-tab:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }

/* ---------- 🧘 SOLO ZEN : progression + carte des niveaux ---------- */
.zen-track { display: block; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .28); border: 1.5px solid rgba(0, 0, 0, .25); overflow: hidden; margin: 2px 0; }
.zen-track i { display: block; height: 100%; background: #fff; border-radius: 99px; }
.zen-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.zl {
  position: relative; aspect-ratio: 1; border-radius: 16px; border: 2.5px solid var(--ink);
  font-family: var(--font-d); font-size: 17px; color: var(--ink); background: var(--card);
  box-shadow: 0 3px 0 var(--sticker); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0; touch-action: manipulation;
}
.zl:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.zl.done { background: #d9f7e2; }
.zl.done.zero { background: #fff3d6; }
.zl.cur { background: var(--yellow); animation: pulse 1.6s infinite; }
.zl.lock { background: var(--paper-2); color: var(--ink-30); box-shadow: 0 2px 0 var(--ink-30); border-color: var(--ink-30); }
.zl-st { font-size: 10px; line-height: 1; color: #dfa400; letter-spacing: 1px; font-family: inherit; font-weight: 900; }
.zl.lock .zl-st { font-size: 9px; filter: grayscale(1); opacity: .6; }
.zen-stars { display: flex; justify-content: center; gap: 10px; margin: 8px 0 2px; }
.zs { font-size: 44px; color: var(--ink-30); transform: scale(.6); opacity: .45; }
.zs.on { color: var(--yellow); opacity: 1; animation: zsPop .5s cubic-bezier(0.34, 1.9, 0.64, 1) both; text-shadow: 0 3px 0 var(--yellow-d); }
@keyframes zsPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }

/* ---------- 🎉 MULTI : le salon ---------- */
.party-join .party-code-in { flex: 1; font-family: var(--font-d); font-size: 20px; letter-spacing: 6px; text-align: center; text-transform: uppercase; }
.party-code-card {
  text-align: center; padding: 14px 12px; border: 2.5px solid var(--ink); border-radius: var(--r);
  background: linear-gradient(135deg, #ffe29a, #ffc94b); box-shadow: var(--shadow); margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.party-code { display: flex; gap: 7px; }
.party-code b {
  font-family: var(--font-d); font-size: 30px; width: 44px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 11px; box-shadow: 0 3px 0 var(--sticker);
}
.party-seats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.party-seat {
  width: 76px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--card); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 2px 0 var(--sticker);
}
.party-seat.done { background: #d9f7e2; }
.party-seat.free { border-style: dashed; box-shadow: none; background: var(--paper-2); }
.party-face { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: #fff; }
.party-free { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--ink-30); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 18px; color: var(--ink-30); }
.party-nm { font-weight: 900; font-size: 11px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-st { font-weight: 800; font-size: 9.5px; color: var(--ink-60); }

/* ---------- ☀️ stats du jour (parties + séries) ---------- */
.daily-streak { font-weight: 900; font-size: 13px; margin-top: 5px; }
.dg-stats { display: block; font-weight: 800; font-size: 10.5px; opacity: .85; margin-top: 1px; }

/* ---------- tél tourné : l'app reste verticale, on le dit clairement ---------- */
#rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 3900; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px;
    background: var(--paper); background-image: radial-gradient(rgba(43, 28, 6, .055) 1.3px, transparent 1.3px); background-size: 22px 22px;
  }
  #rotate-hint .rh-em { font-size: 46px; animation: rh-turn 2.2s ease-in-out infinite; }
  #rotate-hint .rh-t { font-family: var(--font-d); font-size: 21px; color: var(--ink); }
  #rotate-hint .rh-sub { font-size: 13.5px; font-weight: 900; color: var(--ink-60); }
}
@keyframes rh-turn { 0%, 100% { transform: rotate(-82deg); } 45%, 55% { transform: rotate(0deg); } }

/* pied de partie : rappel du stock doré (même taille que le libellé, jamais coupé) */
.coin-foot .cf-gold { color: #a4700a; font-weight: 900; white-space: nowrap; }
.coin-foot .cf-gold b { font-family: inherit; font-size: inherit; color: inherit; }

/* 🚩 signaler une question (dans l'en-tête de la carte) */
.q-flag { background: none; border: none; font-size: 14px; padding: 0 2px; opacity: .55; font-family: inherit; line-height: 1; }
.q-flag:active { transform: scale(1.25); opacity: 1; }

/* bannière iOS « ajoute à l'écran d'accueil » */
.a2hs { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(430px, calc(100% - 24px)); z-index: 550; background: var(--card); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--sticker); padding: 13px 14px 8px; animation: drop-up 0.4s cubic-bezier(0.34, 1.5, 0.64, 1); }
.a2hs-row { display: flex; align-items: flex-start; gap: 11px; }
.a2hs-ic { width: 52px; height: 52px; border-radius: 13px; border: 2.5px solid var(--ink); flex: none; box-shadow: 0 3px 0 rgba(43,28,6,.25); }
.a2hs-mid { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; padding-right: 16px; }
.a2hs-mid b { font-size: 14.5px; }
.a2hs-mid span { font-size: 12px; font-weight: 700; color: var(--ink-60); }
.a2hs-how { background: #eaf3ff; border: 2px dashed #2b7de0; border-radius: 10px; padding: 5px 8px; margin-top: 3px; color: var(--ink) !important; font-weight: 800 !important; }
.a2hs-x { position: absolute; top: 8px; right: 10px; background: none; border: none; font-weight: 900; font-size: 15px; color: var(--ink-30); font-family: inherit; }
.a2hs-arrow { text-align: center; font-size: 20px; margin-top: 2px; animation: a2hs-bounce 1.1s ease-in-out infinite; }
@keyframes a2hs-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* bannière notifs : elle gigote tant que les notifs ne sont pas activées */
.push-nudge { animation: push-nudge 3.4s ease-in-out infinite; }
@keyframes push-nudge {
  0%, 76%, 100% { transform: rotate(0); }
  79% { transform: rotate(-1.7deg) scale(1.015); }
  83% { transform: rotate(1.5deg) scale(1.015); }
  87% { transform: rotate(-1.1deg); }
  91% { transform: rotate(0.8deg); }
  95% { transform: rotate(0); }
}
.push-nudge .push-bell { display: inline-block; transform-origin: top center; animation: push-bell 3.4s ease-in-out infinite; }
@keyframes push-bell {
  0%, 74%, 100% { transform: rotate(0); }
  78% { transform: rotate(-14deg); }
  82% { transform: rotate(12deg); }
  86% { transform: rotate(-8deg); }
  90% { transform: rotate(5deg); }
  94% { transform: rotate(0); }
}

/* popup « on t'a chambré » */
.tp-frame { width: 100%; border-radius: 15px; overflow: hidden; border: 2.5px solid var(--ink); margin-top: 12px; background: #1c1610; }
.tp-media { width: 100%; max-height: 340px; object-fit: contain; display: block; }

/* shop v2 : boosts / utilitaires / titres */
.shop-card { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-family: inherit; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 4px 0 var(--sticker); padding: 11px 13px; margin-bottom: 10px; transition: transform .06s, box-shadow .06s; }
.shop-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sticker); }
.shop-em { flex: none; width: 46px; height: 46px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.shop-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.shop-mid b { font-size: 14.5px; }
.shop-desc { font-size: 11.5px; font-weight: 700; color: var(--ink-60); }
.shop-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.shop-tag { font-weight: 900; font-size: 12px; border: 2px solid var(--ink); border-radius: 99px; padding: 3px 10px; white-space: nowrap; background: var(--yellow); color: var(--ink); }
.shop-tag.on { background: var(--green); color: #fff; }
.shop-tag.owned { background: #fff; }
.shop-tag.locked { background: var(--ink-30); color: #fff; }
.shop-tag.poor { background: #fff; color: var(--ink-60); }
.shop-count { font-weight: 900; font-size: 12px; color: var(--green-d); }

/* blitz sprint 100 s */
.bz-sprint-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bz-clock { font-family: var(--font-d); font-size: 40px; color: var(--ink); background: #fff0e6; border: 3px solid var(--ink); border-radius: 14px; padding: 4px 16px; box-shadow: 0 4px 0 var(--sticker); min-width: 120px; text-align: center; }
.bz-clock.low { color: #fff; background: var(--red); animation: pulse 0.8s infinite; }
.bz-score { font-family: var(--font-d); font-size: 20px; color: var(--green-d); white-space: nowrap; }
.bz-score b { font-size: 28px; }
.bz-final { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.bz-final-side { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--sticker); background: var(--card); padding: 10px 18px; min-width: 96px; }
.bz-final-n { font-family: var(--font-d); font-size: 40px; line-height: 1; }
.bz-final-vs { font-family: var(--font-d); font-size: 18px; color: var(--ink-30); }
/* titre équipé sous le pseudo */
.usr-title { display: inline-block; font-family: var(--font-d); font-size: 10px; color: #fff; background: var(--ink); border-radius: 99px; padding: 1px 8px; margin-left: 6px; letter-spacing: .3px; vertical-align: middle; -webkit-text-stroke: 0; }

/* ---------- AU PLUS PROCHE (réponse chiffrée, premier à 10) ---------- */
.np-banner { position: relative; width: 100%; margin: 0 0 14px; padding: 13px 15px; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--sticker); display: flex; align-items: center; gap: 12px; background: linear-gradient(105deg, #00b8a9 0 58%, #ffc400 58% 100%); font-family: inherit; transition: transform .07s, box-shadow .07s; }
.np-banner:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sticker); }
.np-b-target { font-size: 38px; line-height: 1; filter: drop-shadow(0 2px 0 rgba(43,28,6,.3)); }
.np-b-txt { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.np-b-title { font-family: var(--font-d); font-size: 23px; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; line-height: 1; }
.np-b-sub { font-weight: 900; font-size: 11px; color: var(--ink); background: rgba(255,255,255,.85); border-radius: 99px; padding: 2px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.np-b-play { font-family: var(--font-d); font-size: 15px; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 6px 14px; box-shadow: 0 3px 0 var(--sticker); }
.np-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; width: 100%; }
.np-head { display: flex; gap: 8px; width: 100%; }
.np-p { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); padding: 8px 4px 6px; }
.np-p.me { background: #eafaf0; }
.np-p.lead { background: var(--yellow); }
.np-p-av { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.np-p-nm { font-weight: 900; font-size: 10.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-p-w { font-family: var(--font-d); font-size: 13px; color: var(--ink-60); }
.np-p-w b { font-size: 19px; color: var(--ink); }
.np-p { position: relative; }
.np-p-st { position: absolute; top: -8px; right: -6px; width: 23px; height: 23px; border-radius: 50%; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12px; background: var(--green); color: #fff; box-shadow: 0 2px 0 var(--sticker); z-index: 1; }
.np-p-st.wait { background: var(--orange); animation: pulse 1.2s infinite; }
.np-wait-card { border: 3px solid var(--ink); border-radius: 18px; background: var(--card); box-shadow: 0 5px 0 var(--sticker); padding: 16px 14px 13px; text-align: center; margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.np-myguess { font-family: var(--font-d); font-size: 42px; color: var(--teal); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; line-height: 1.05; }
.np-mg-u { font-size: 19px; }
.np-locked { font-weight: 900; font-size: 11px; color: var(--ink-60); background: var(--paper-2); border-radius: 99px; padding: 3px 10px; align-self: center; }
.np-waiting { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 900; font-size: 13.5px; margin-top: 16px; color: var(--ink-60); }
.np-dots { display: inline-flex; gap: 4px; align-items: flex-end; }
.np-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); border: 1.5px solid var(--ink); animation: np-dot 1.2s infinite; }
.np-dots i:nth-child(2) { animation-delay: .15s; }
.np-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes np-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
.np-inrow { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.np-in { flex: 1; min-width: 0; border: 3px solid var(--ink); border-radius: 16px; padding: 13px 15px; font-family: var(--font-d); font-size: 22px; background: #fff; box-shadow: 0 4px 0 var(--sticker); text-align: center; }
.np-unit { font-weight: 900; font-size: 15px; color: var(--ink-60); white-space: nowrap; }
.np-ans { font-family: var(--font-d); font-size: 44px; line-height: 1.1; margin: 6px 0 10px; color: var(--teal); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.np-ans-u { font-size: 20px; }
.np-rvl { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.np-rvl-row { display: flex; align-items: center; gap: 8px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--card); padding: 7px 11px; font-weight: 900; font-size: 13.5px; }
.np-rvl-row.win { background: var(--yellow); box-shadow: 0 3px 0 var(--sticker); }
.np-rvl-nm { flex: 1; text-align: left; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-rvl-v { font-family: var(--font-d); font-size: 15px; }
.np-rvl-d { font-size: 10.5px; color: var(--ink-60); white-space: nowrap; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin-top: 18px; }
.pod-col { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; }
.pod-medal { font-size: 22px; }
.pod-av { width: 46px; height: 46px; border-radius: 50%; border: 2.5px solid var(--ink); object-fit: cover; }
.pod-nm { font-weight: 900; font-size: 11.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-step { width: 100%; border: 3px solid var(--ink); border-radius: 12px 12px 6px 6px; background: var(--card); box-shadow: 0 4px 0 var(--sticker); display: flex; align-items: center; justify-content: center; font-family: var(--font-d); font-size: 22px; }
.pod-col.p1 .pod-step { height: 74px; background: var(--yellow); }
.pod-col.p2 .pod-step { height: 52px; background: #e8e8e8; }
.pod-col.p3 .pod-step { height: 40px; background: #f3d7b7; }
.pod-col.p1 .pod-av { width: 56px; height: 56px; }

/* ---------- mur des victoires / jour du calendrier ---------- */
.vic-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.vic-strip::-webkit-scrollbar { display: none; }
.vic-strip .vic-thumb { flex: none; width: 31%; }
.vic-mini {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: var(--bw) solid var(--ink); border-radius: 16px; background: #fff8dc;
  box-shadow: 0 4px 0 var(--sticker); padding: 8px 12px 8px 8px; font-family: inherit;
}
.vic-mini img:not(.ic-img), .vic-mini video { width: 54px; height: 72px; object-fit: cover; border-radius: 10px; border: 2px solid var(--ink); flex: none; }
.vic-mini .who { font-weight: 900; display: block; }
.vic-mini .sub { font-size: 12px; font-weight: 800; color: var(--ink-60); display: block; }
.day-ph { position: relative; }
.day-ph-tag {
  position: absolute; left: 4px; right: 4px; bottom: 4px; font-size: 8.5px; font-weight: 900;
  color: #fff; background: rgba(43, 28, 6, 0.65); border-radius: 6px; padding: 2px 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vic-thumb .vic-score { bottom: auto; top: 6px; }
.cal-cell.played { cursor: pointer; }

/* ---------- FAQ ---------- */
.faq-item .faq-arrow { font-weight: 900; color: var(--ink-30); }
.faq-item .faq-body { margin-top: 10px; font-weight: 700; font-size: 14.5px; line-height: 1.55; color: var(--ink); border-top: 2px dashed rgba(43, 28, 6, 0.15); padding-top: 10px; }

/* ---------- T'ES OÙ ?! (mode géo) ---------- */
.game-row { display: flex; gap: 8px; }
.game-chip {
  flex: 1; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card);
  font-weight: 900; font-size: 12.5px; padding: 10px 4px 8px; box-shadow: 0 3px 0 var(--sticker); color: var(--ink-60);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.game-chip .gc-em { font-size: 22px; }
.game-chip.on { background: var(--yellow); color: var(--ink); }
.geo-photo {
  flex: 1; min-height: 0; border: var(--bw) solid var(--ink); border-radius: 20px;
  overflow: auto; background: #1c1610; box-shadow: 0 5px 0 var(--sticker);
  display: flex; align-items: center; -webkit-overflow-scrolling: touch;
}
.geo-photo img { min-width: 140%; height: 100%; object-fit: cover; user-select: none; }
.geo-loading { width: 100%; text-align: center; color: var(--paper); font-weight: 800; padding: 30px 0; }
.geo-map { flex: 1; min-height: 0; border: var(--bw) solid var(--ink); border-radius: 20px; box-shadow: 0 5px 0 var(--sticker); z-index: 1; }
.geo-flagpin { font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.geo-reveal {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(440px, calc(100% - 28px)); background: var(--card); border: var(--bw) solid var(--ink);
  border-radius: 18px; box-shadow: 0 6px 0 var(--sticker); padding: 13px 16px; z-index: 500;
  animation: drop-up 0.3s cubic-bezier(0.34, 1.5, 0.64, 1); text-align: center;
}
@keyframes drop-up { from { transform: translate(-50%, 80px); opacity: 0; } }
.geo-reveal .gr-name { font-family: var(--font-d); font-size: 17px; margin-bottom: 4px; }
.geo-reveal .gr-line { font-weight: 800; font-size: 14.5px; }
.geo-reveal .gr-pts { color: var(--green-d); }
.geo-pts { font-family: var(--font-d); font-size: 13px; min-width: 52px; text-align: center; }
.q-img { max-height: 96px; border-radius: 10px; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 rgba(43,28,6,.25); }
.mystery-av { display: inline-flex; align-items: center; justify-content: center; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 50%; font-family: var(--font-d); font-size: 20px; width: 46px; height: 46px; }

/* ---------- pull-to-refresh ---------- */
html, body { overscroll-behavior-y: none; }
#ptr {
  position: fixed; top: -54px; left: 50%; transform: translate(-50%, 0);
  width: 46px; height: 46px; border-radius: 50%; background: var(--card);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--sticker);
  display: flex; align-items: center; justify-content: center;
  z-index: 400; opacity: 0; pointer-events: none;
}
#ptr.ready { background: var(--yellow); }
#ptr.spin .ic { animation: ptr-spin 0.6s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ---------- shake « erreur » (mauvaise réponse) ---------- */
.kx-shake { animation: kx-shake 0.44s cubic-bezier(.36,.07,.19,.97); }
@keyframes kx-shake {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-8px) rotate(-1deg); }
  26% { transform: translateX(7px) rotate(1deg); }
  40% { transform: translateX(-6px); }
  54% { transform: translateX(5px); }
  68% { transform: translateX(-3px); }
  82% { transform: translateX(2px); }
}

/* ---------- réponses en drapeaux ---------- */
.ans.ans-img { justify-content: center; padding: 8px; }
.ans.ans-img img { height: 56px; max-width: 78%; border-radius: 8px; border: 2px solid var(--ink); box-shadow: 0 2px 0 rgba(43, 28, 6, 0.25); object-fit: cover; }
.ans.ans-img .ak { position: absolute; top: -8px; left: -8px; }

/* ---------- résultat compact : tout tient à l'écran ---------- */
.result-fit { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-bottom: 14px; }
.result-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.result-top .stamp.sm { flex: 1; text-align: center; }
.stamp.sm { font-size: 30px; padding: 5px 14px; box-shadow: 0 4px 0 var(--sticker); }
.mini-mascot { flex: none; width: 46px; }
.result-rounds .rsq { width: 16px; height: 16px; border-radius: 5px; }
.result-rounds .rr-line { margin-bottom: 3px; gap: 6px; }
.result-rounds .rr-head { padding-bottom: 4px; }
.gains-line { min-height: 26px; margin-top: 6px; }
.result-fit .result-actions { width: 100%; gap: 8px; margin-top: auto; }
.result-fit .vic-mini { margin-top: 4px; }

/* ---------- retour flottant + abandon discret + score de tableau géant ---------- */
.back-float { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 14px; z-index: 5; }
.screen { position: relative; }
.forfeit-link {
  background: none; border: none; box-shadow: none; font-family: inherit;
  font-weight: 900; font-size: 12.5px; color: rgba(226, 55, 43, 0.75);
  padding: 6px; margin: 0 auto; display: block; text-decoration: underline dotted;
}
.board-score { font-size: 52px; }
.board-head { padding: 16px 14px; }

/* ---------- badge de niveau + pastille Zaps ---------- */
.avatar-lvl { position: relative; display: inline-block; flex: none; }
.lvl-badge {
  position: absolute; bottom: -4px; right: -6px; min-width: 22px; height: 22px; padding: 0 4px;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px;
  font-family: var(--font-d); font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 0 var(--sticker); z-index: 2;
}
.zap-pill {
  display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(#ffd24d, #ffc400);
  border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 11px;
  font-weight: 900; font-size: 14px; box-shadow: 0 3px 0 var(--sticker); flex: none;
}
.bet-box {
  margin-top: 14px; background: #fff8dc; border: 2.5px dashed var(--yellow-d);
  border-radius: 16px; padding: 12px;
}
.bet-chip { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.forfeit-link { font-size: 11.5px; opacity: 0.75; padding: 4px 2px; display: inline-block; margin: 0; }

/* ---------- dashboard admin ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.mcard { background: var(--card); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--sticker); padding: 12px 14px; }
.mcard .mval { font-family: var(--font-d); font-size: 26px; line-height: 1.1; }
.mcard .mlabel { font-weight: 900; font-size: 12px; margin-top: 3px; }
.mcard .msub { font-size: 11px; font-weight: 800; color: var(--ink-60); margin-top: 1px; }
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .dash-2col { grid-template-columns: 1fr; } }
.chart-h { font-weight: 900; font-size: 14px; margin-bottom: 10px; }
.chart-x { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 800; color: var(--ink-60); margin-top: 4px; }
.lb-line { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 13px; }
.lb-name { flex: 0 0 40%; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-bar { flex: 1; height: 10px; background: #f0e7d6; border-radius: 99px; overflow: hidden; border: 1.5px solid var(--ink); }
.lb-bar i { display: block; height: 100%; background: var(--yellow-d); }
.lb-val { flex: none; font-weight: 900; min-width: 42px; text-align: right; }
.lb-rate { flex: none; font-weight: 900; min-width: 40px; text-align: right; }
.admin-modal { position: fixed; inset: 0; background: rgba(43, 28, 6, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 300; }

/* ---------- banque : grille catégories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cat-tile { background: var(--card); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--sticker); padding: 12px 10px; text-align: center; position: relative; font-family: inherit; }
.cat-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.cat-tile .ct-emoji { font-size: 26px; display: block; }
.cat-tile .ct-label { display: block; font-weight: 900; font-size: 12.5px; margin-top: 4px; line-height: 1.2; }
.cat-tile .ct-count { display: inline-block; margin-top: 6px; color: #fff; font-weight: 900; font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 2px solid var(--ink); }
.fcat { cursor: pointer; }
.fcat.on { background: var(--yellow); }
/* ---------- usine : grille difficulté ---------- */
.diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.diff-grid .dg-l { display: block; font-size: 12px; font-weight: 900; margin-bottom: 4px; }
@media (max-width: 560px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- table des comptes ---------- */
.ptable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ptable th { text-align: left; font-weight: 900; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-60); padding: 8px 10px; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.ptable th.ptsort { cursor: pointer; }
.ptable th.ptsort.on { color: var(--ink); }
.ptable td { padding: 8px 10px; border-bottom: 1px solid var(--ink-15, rgba(43,28,6,.12)); white-space: nowrap; }
.ptable tr:last-child td { border-bottom: none; }
.ptable .pnum { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }

/* ---------- thèmes clair / sombre (le coloré crème est le défaut) ---------- */
body.theme-light {
  --paper: #ffffff; --paper-2: #f7f5f1; --card: #ffffff;
}
body.theme-light { background-color: #fff; background-image: radial-gradient(rgba(43, 28, 6, .045) 1.3px, transparent 1.3px); }
/* en clair, les grandes surfaces crème passent au blanc : plus net, plus « app » */
body.theme-light .sheet, body.theme-light .modal, body.theme-light .card,
body.theme-light .st-row, body.theme-light .field { background: #fff; }
body.theme-light .bottom-nav { background: rgba(255, 255, 255, .93); }
/* ---------- 🌙 MODE SOMBRE — une vraie nuit, pas une image inversée ----------
   Bleu-nuit chaud (pas du noir pur : moins agressif, plus « jeu »), cartes qui
   remontent d'un cran, encre crème, et les couleurs de marque conservées vives.
   Les traits noirs deviennent des halos clairs : sinon tout disparaît. */
body.theme-dark {
  /* le relief doit ASSOMBRIR sous l'objet : avec var(--ink) (crème) chaque
     autocollant posait une dalle lumineuse sous lui — 256 ombres concernées. */
  --sticker: rgba(0, 0, 0, .62);
  --paper: #14161f; --paper-2: #1b1e2a; --card: #222634;
  --ink: #f2ede4; --ink-60: #9ba3b8; --ink-30: #4a5163;
  --shadow: 0 4px 0 rgba(0, 0, 0, .55);
  --yellow-d: #c99a12;
  color-scheme: dark;
}
/* les motifs sont désormais dans l'illustration de fond (voir plus bas) */
/* ============================================================
   FOND ILLUSTRÉ (clair et sombre)
   ------------------------------------------------------------
   De vraies illustrations comic (nuages, éclairs, étoiles, crânes, trame de
   points) plutôt que mes motifs CSS : le dessin est bien meilleur et le poids
   ridicule (44 Ko et 39 Ko en WebP, contre 1,3 Mo et 1 Mo en PNG).
   Posé sur un pseudo-élément FIXE et non en `background-attachment: fixed` :
   cette propriété est cassée dans la WebView iOS (saccades, décalages).
   Le motif est aux BORDS, le centre est propre → le contenu reste lisible.
   ============================================================ */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-position: 50% 0; background-size: cover;
}
body.theme-dark::before { background-image: url('/bg-comic-dark.webp?v=1'); }
body:not(.theme-dark)::before { background-image: url('/bg-comic-light.webp?v=1'); }
/* Un fond d'app acheté reste maître chez lui — photo ET ambiances en pièces.
   ⚠️ Seule la photo était couverte ici : le décor comique restait donc posé par-dessus
   les fonds achetés (ciel, bonbon, menthe, plage, nuit, lac) et on ne voyait rien. */
body.bg-photo::before, body.bg-custom::before { display: none; }
/* le fond PHOTO de l'utilisateur reste maître chez lui */
body.theme-dark.bg-photo::before { display: none; }
/* les surfaces */
body.theme-dark .card, body.theme-dark .sheet, body.theme-dark .modal,
body.theme-dark .st-row, body.theme-dark .field, body.theme-dark .ans,
body.theme-dark .qcard2, body.theme-dark .bet-chip, body.theme-dark .game-chip,
body.theme-dark .dg-card, body.theme-dark .duel-row, body.theme-dark .turn-card,
body.theme-dark .miss-q, body.theme-dark .fcd-side, body.theme-dark .st-theme,
body.theme-dark .bg-item, body.theme-dark .yp-row.me, body.theme-dark .chip {
  background: var(--card); color: var(--ink); border-color: #39405280;
}
body.theme-dark .qcard2 .qbody { color: var(--ink); background: #262b3a !important; }
body.theme-dark .lb-bar, body.theme-dark .level-bar, body.theme-dark .daily-track { background: #2c3242; }
/* reflets calibrés pour le crème : beaucoup trop forts sur fond sombre */
body.theme-dark .coins-pill::after, body.theme-dark .shop-balance::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); }
/* la barre du bas est translucide : au-dessus d'une bannière vive elle prenait
   sa couleur. On l'opacifie juste assez pour qu'elle reste « verre » sans virer. */
body.theme-dark .bottom-nav { background: linear-gradient(180deg, rgba(38, 43, 59, .86), rgba(20, 22, 31, .8)); }
/* les bordures « encre » : en sombre elles doivent ÉCLAIRER, pas assombrir */
body.theme-dark .card, body.theme-dark .sheet, body.theme-dark .modal,
body.theme-dark .st-row, body.theme-dark .field, body.theme-dark .chip {
  box-shadow: 0 3px 0 var(--sticker), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* les boutons neutres restent lisibles */
body.theme-dark .btn:not(.primary):not(.danger):not(.green):not(.blue) { background: #2c3242; color: var(--ink); }
body.theme-dark .btn.small { background: #262b3a; }
/* les fonds d'écran colorés s'assombrissent au lieu de flasher */
body.theme-dark .party-screen { background: linear-gradient(180deg, #241a33, #1a1524 40%, #221a30); }
body.theme-dark .daily-screen { background: linear-gradient(180deg, #2a2113, #1c1810 40%, #241d12); }
body.theme-dark .zen-map { background: linear-gradient(180deg, rgba(20, 26, 44, .88), rgba(16, 20, 34, .7)); }
body.theme-dark .zen-bg { filter: saturate(.5) brightness(.45); }
body.theme-dark .st-me { background: linear-gradient(135deg, #3a2f14, #4a3c17); }
body.theme-dark .st-premium { background: linear-gradient(135deg, #0f1119, #232838); }
body.theme-dark .st-promo { background: linear-gradient(135deg, #1e2a44, #26365a); }
body.theme-dark .st-mini { border-color: #394052; }
/* le texte sur fond jaune/vert reste sombre (contraste) */
body.theme-dark .btn.primary, body.theme-dark .btn.green, body.theme-dark .st-theme.on,
body.theme-dark .shine-pill, body.theme-dark .st-promo-go { color: #14161f; }
/* ⚠️ … mais encore faut-il que le fond SOIT jaune. `body.theme-dark .st-theme` (0,2,1)
   écrase `.st-theme.on` (0,2,0) : la puce sélectionnée gardait le fond sombre de la carte,
   avec le texte sombre imposé juste au-dessus → contraste 1,2, illisible. Il faut la
   spécificité (0,3,1) pour rendre le jaune à la puce active. */
body.theme-dark .st-theme.on { background: var(--yellow); border-color: var(--ink); }
/* les images du jeu : légèrement adoucies pour ne pas éblouir la nuit */
body.theme-dark .qz-imgcard img, body.theme-dark .dgi-card img,
body.theme-dark .zen-home img, body.theme-dark .daily-home img,
body.theme-dark .fboard-home img, body.theme-dark .cta-duel img { filter: brightness(.88) saturate(.95); }

/* ---------- bannière chrono (départage) ---------- */
.chrono-banner { display:inline-block; margin: 4px 0 8px; font-weight: 900; font-size: 13.5px; border: 2.5px solid var(--ink); border-radius: 12px; padding: 7px 14px; box-shadow: 0 3px 0 var(--sticker); }
.chrono-banner.win { background: #e8f9ee; }
.chrono-banner.lose { background: #ffe8e6; }
.chrono-banner.tie { background: #eaf1ff; }
/* ---------- face à face sur profil ami ---------- */
.h2h-box { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px 14px; box-shadow: 0 3px 0 var(--sticker); }
.h2h-box .h2h-t { font-size: 11px; font-weight: 900; color: var(--ink-60); letter-spacing: .5px; }
.h2h-box .h2h-nums { font-family: var(--font-d); font-size: 15px; }

.snap-btn.rec { border-color: var(--red); box-shadow: 0 5px 0 var(--red-d), inset 0 0 0 4px var(--paper); }
.snap-btn.recording { background: var(--red); animation: recpulse .8s ease-in-out infinite; }
@keyframes recpulse { 50% { transform: scale(0.9); } }

/* ---------- popup de revue (manche jouée) ---------- */
.sheet-head { position: sticky; top: -22px; margin: -22px -20px 12px; padding: 16px 20px 12px; background: var(--paper); border-bottom: 2px solid var(--ink); display: flex; align-items: center; gap: 10px; z-index: 2; }
.sheet-head h2 { flex: 1; margin: 0; }
.sheet-x { flex: none; width: 34px; height: 34px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--card); font-weight: 900; font-size: 16px; box-shadow: 0 3px 0 var(--sticker); }

/* réactions PHOTO (tu réagis avec ta tête) */
.fc-facebar { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; flex-wrap: wrap; }
.fc-face-cta { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 900; font-size: 12.5px; background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 99px; padding: 5px 12px; box-shadow: 0 2px 0 var(--sticker); }
.fc-face-cta:active { transform: translateY(2px); box-shadow: 0 0 0 var(--sticker); }
.fc-faces { display: flex; gap: -6px; }
.fc-face { width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--ink); object-fit: cover; margin-left: -8px; background: var(--card); box-shadow: 0 2px 0 rgba(43,28,6,.35); }
.fc-face:first-child { margin-left: 0; }
.fc-faces-wrap { display: flex; align-items: center; }

/* pièces du profil : en haut à GAUCHE, en gros */


/* ---- boutique : solde en gros qui brille + packs de pièces ---- */
.shop-balance { position: relative; overflow: hidden; }
.shop-balance b { font-size: 26px; }
.shop-balance::after { content: ''; position: absolute; top: -60%; left: -35%; width: 30%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); transform: rotate(14deg); animation: bal-shine 3s ease-in-out infinite; pointer-events: none; }
@keyframes bal-shine { 0% { left: -40%; } 55%, 100% { left: 125%; } }
/* mini caméra de réaction (têtes) */
.face-cam-wrap { width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--sticker); background: #1c1610; }
.face-cam-wrap video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.ic-trophy { vertical-align: -4px; flex: none; }

/* ---- packs de pièces : lignes lisibles, prix mis en avant ---- */
.pack-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.pack-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 13px 13px 14px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); font-family: inherit; text-align: left; }
.pack-row:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.pack-row .pk-em { font-size: 30px; line-height: 1; flex: none; }
.pack-row .pk-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pack-row .pk-amount { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-size: 21px; line-height: 1; }
.pack-row .pk-name { font-size: 11.5px; font-weight: 900; color: var(--ink-60); }
.pack-row .pk-bonus { color: var(--green-d); }
.pack-row .pk-cta { flex: none; min-width: 82px; text-align: center; font-family: var(--font-d); font-size: 16px; color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px; padding: 8px 12px; box-shadow: 0 2px 0 var(--sticker); }
.pack-row .pk-cta.get { background: var(--green); color: #fff; }
.pack-row .pk-cta.done { background: var(--paper-2); color: var(--ink-60); }
.pack-row .pk-tag { position: absolute; top: -8px; right: 12px; font-size: 10px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 9px; }
.pack-row.free { background: #e9f8ec; }
.pack-row.free .pk-tag { background: var(--green); }
.pack-row.best { background: #fff8dc; border-color: var(--yellow-d); }
.pack-row.best .pk-tag { background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); }
.pack-row.mega { background: linear-gradient(135deg, #2b1c06, #4a3410); border-color: var(--yellow); box-shadow: 0 3px 0 var(--sticker), 0 0 16px rgba(255,196,0,.45); }
.pack-row.mega .pk-amount, .pack-row.mega .pk-name { color: #fff; }
.pack-row.mega .pk-bonus { color: var(--yellow); }
.pack-row.mega .pk-tag { background: var(--yellow); color: var(--ink); }
/* mini caméra de réaction (têtes) */
.face-cam-wrap { width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--sticker); background: #1c1610; }
.face-cam-wrap video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
/* brillance aussi sur les pièces de la home et du profil */
.coins-pill { position: relative; overflow: hidden; }
.coins-pill::after { content: ''; position: absolute; top: -60%; left: -40%; width: 28%; height: 220%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.8), transparent); transform: rotate(14deg); animation: bal-shine 3.4s ease-in-out infinite; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .coins-pill::after, .shop-balance::after { animation: none; opacity: 0; } }

/* ---- profil : bandeau haut (pièces à gauche · stats à droite, MÊME taille) + carte XP ---- */
.prof-top { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.prof-top .coins-pill { flex: none; }
.prof-stats-btn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 15px; font-family: var(--font-d); font-size: 17px; color: var(--ink); background: var(--card); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--sticker); }
.prof-stats-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.xp-card { width: 100%; max-width: 340px; margin: 12px auto 2px; padding: 10px 13px 11px; border: 2.5px solid var(--ink); border-radius: 16px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); text-align: left; }
.xp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.xp-lvl { font-family: var(--font-d); font-size: 18px; }
.xp-next { font-size: 11px; font-weight: 900; color: var(--ink-60); }
.xp-track { height: 16px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.xp-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4d7cff, #7A5AE0); position: relative; transition: width .7s cubic-bezier(.34,1.3,.64,1); }
.xp-track i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); animation: bal-shine 2.6s ease-in-out infinite; }
.xp-foot { margin-top: 6px; font-size: 11.5px; font-weight: 900; color: var(--ink); }

/* feed : score bien lisible collé au trophée */
.fc-score { display: inline-flex; align-items: center; gap: 5px; margin-left: 7px; }
.fc-score b { font-family: var(--font-d); font-size: 17px; color: var(--ink); }
/* profil : série expliquée */
.streak-line { font-weight: 900; font-size: 13px; margin-top: 5px; }
.streak-line b { color: var(--ink); }

/* ---- home : boutons ronds (notifs + caddie) ---- */
.hd-round { position: relative; width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: var(--card); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 0 3px 0 var(--sticker); }
.hd-round:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sticker); }
.hd-round img { width: 26px; height: 26px; object-fit: contain; }
.home-top { gap: 8px; }
/* ---- notifications ---- */
.ntf-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font-family: inherit; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: 0 2px 0 var(--sticker); padding: 9px 11px; margin-bottom: 8px; }
.ntf-row:active { transform: translateY(2px); box-shadow: 0 0 0 var(--sticker); }
.ntf-ic { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--paper-2); border: 2px solid rgba(43,28,6,.15); border-radius: 50%; }
.ntf-face { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; }
.ntf-txt { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.ntf-ago { flex: none; font-size: 10px; font-weight: 900; color: var(--ink-30); }
/* ---- galerie de têtes ---- */
.face-gal { display: flex; gap: 10px; flex-wrap: wrap; }
.face-pick-wrap { position: relative; }
.face-pick { padding: 0; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; width: 64px; height: 64px; box-shadow: 0 3px 0 var(--sticker); background: var(--card); }
.face-pick:active { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 var(--sticker); }
.face-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--red); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; z-index: 2; }

.ic-bell { vertical-align: -4px; flex: none; }
.hd-round .ic-bell { vertical-align: middle; }

/* photo de profil dans la barre du bas */

/* ---- home Duels : plus d'air entre les blocs du bas (c'était serré) ---- */
#home-shame { margin-top: 6px; }
#home-shame .vic-strip { margin-bottom: 4px; }
.screen .cq-banner { margin-top: 20px; margin-bottom: 18px; }
.screen .np-banner { margin-top: 0; margin-bottom: 20px; }
.screen #duels { margin-bottom: 6px; }
.screen #duels .duel-row { margin-bottom: 10px; }
.screen .cta-duel { margin-bottom: 20px; }
/* la barre du bas flotte : on garde une vraie marge dessous pour ne rien coller */
.screen { padding-bottom: 108px; }
.screen.no-nav { padding-bottom: 24px; }
.screen.no-nav.result-screen { padding-bottom: 10px; }
/* pin de localisation dessiné */
.ic-pin { vertical-align: -3px; flex: none; }

/* 3 boutons ronds à droite sur la home : on resserre un peu pour tout faire tenir sur petit écran */
.home-top .hd-round { width: 44px; height: 44px; }
.home-top .hd-round img { width: 25px; height: 25px; }
.home-top { gap: 7px; }

/* ---- anneau coloré autour de l'avatar (couleur choisie par le joueur) ---- */
/* anneau coloré : couvre le cas SANS photo (<img class=avatar>) ET AVEC photo (<span class=pflip>) */
.avatar-lvl > .avatar, .avatar-lvl > .pflip { border-radius: 50%; box-shadow: 0 0 0 7px var(--ring, transparent); }
.avatar-lvl > .pflip { display: inline-block; }
.ring-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ring-row input[type="color"] { width: 54px; height: 42px; padding: 0; border: 3px solid var(--ink); border-radius: 12px; background: var(--card); box-shadow: 0 3px 0 var(--sticker); }
.ring-demo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 5px var(--rd, #FFC400); }
.ring-demo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ---- feed verrouillé : on ne voit les autres qu'après avoir joué (façon BeReal) ---- */
.fc-locked { position: relative; }
.fc-locked .fc-blur { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); background: rgba(20, 12, 2, .18); backdrop-filter: blur(26px) saturate(1.2); -webkit-backdrop-filter: blur(26px) saturate(1.2); }
.fc-locked .fc-blur b { font-family: var(--font-d); font-size: 19px; }
.fc-locked .fc-blur span { font-weight: 900; font-size: 12.5px; opacity: .95; max-width: 230px; }
.fc-lock-cta { margin-top: 8px; font-family: var(--font-d); font-size: 15px; color: var(--ink); background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 999px; padding: 9px 18px; box-shadow: 0 3px 0 var(--sticker); }
.fc-locked .fc-el { filter: blur(18px); transform: scale(1.08); }

/* faux média TRÈS flou (au lieu d'un bloc noir) — le vrai média n'est jamais envoyé au client */
.fc-locked .fc-fake { filter: blur(34px) saturate(1.35); transform: scale(1.35); }

/* onglet Profil sans libellé : le rond occupe toute la hauteur du bouton (plus de vide dessous) */
.bottom-nav button[data-n="profile"] { justify-content: center; gap: 0; padding: 4px; }
.bottom-nav button[data-n="profile"] .ico:not(.nav-ring) { height: auto; }

/* ---- onglet Profil : anneau de couleur NET autour de la photo (façon Snapchat) ---- */
/* taille FIXE : sans ça, tant que la photo n'est pas chargée le cercle s'étire
   en ovale noir sur toute la largeur du bouton (le bug du premier affichage). */
.bottom-nav button .ico.nav-ring { width: 38px; height: 38px; aspect-ratio: 1 / 1; flex: none; box-sizing: border-box; padding: 3.5px;
  border-radius: 50%; background: var(--ring, var(--ink)); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.bottom-nav .nav-pp { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: none; background: var(--paper-2); }

/* icônes dessinées dans la barre du bas — toutes calibrées sur la même
   HAUTEUR d'encre (les PNG sont recadrés sans marge), la largeur suit le
   dessin : c'est ce qui leur donne enfin le même poids visuel. */
.bottom-nav .nav-ic-img { height: 26px; width: auto; max-width: 100%; object-fit: contain; display: block; }

/* ---- barre du bas SANS libellés : que des icônes, plus grosses ---- */
.bottom-nav.nav-ico-only { gap: 4px; padding: 8px 10px; }
.bottom-nav.nav-ico-only button { gap: 0; padding: 6px 2px; justify-content: center; font-size: 0; line-height: 0; flex: 1 1 0; min-width: 0; box-sizing: border-box; }
/* bordure transparente permanente : la pastille active ne décale plus les autres onglets */
.bottom-nav.nav-ico-only button { border: 2.5px solid transparent; border-radius: 15px; }
.bottom-nav.nav-ico-only button.on { border-color: var(--ink); }
/* une seule boîte optique pour TOUTES les icônes (dessins, SVG, avatar) */
.bottom-nav.nav-ico-only button .ico { height: 38px; width: 100%; display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; }
.bottom-nav.nav-ico-only .nav-ic-img { height: 36px; width: auto; max-width: 100%; }
.bottom-nav.nav-ico-only .ico .ic-flame { width: 34px !important; height: 34px !important; vertical-align: middle; }
/* traits un peu plus épais pour tenir face aux icônes dessinées */
.bottom-nav.nav-ico-only .ico .ic { stroke-width: 2.4; }
.bottom-nav.nav-ico-only button .ico.nav-ring { width: 40px; height: 40px; padding: 2.5px; }
.bottom-nav.nav-ico-only button[data-n="profile"] { padding: 6px 2px; }
.bottom-nav.nav-ico-only button[data-n="profile"] .ico:not(.nav-ring) { height: 38px; }
/* ALIGNEMENT OPTIQUE : chaque dessin a sa masse d'encre placée différemment
   (le calendrier est haut, le joystick bas). Centrer géométriquement ne suffit
   pas — on recale sur le barycentre d'encre mesuré : joystick 60 %, calendrier
   43,5 %, social 51 % → décalage vers la moyenne (51,5 %). */
.bottom-nav.nav-ico-only button[data-n="themes"] .nav-ic-img { transform: translateY(-3px); }
.bottom-nav.nav-ico-only button[data-n="daily"] .nav-ic-img { transform: translateY(3px); }
.bottom-nav.nav-ico-only button[data-n="friends"] .nav-ic-img { transform: translateY(-2px); }

/* pastilles : calées sur le coin du bouton, jamais rognées */
.bottom-nav.nav-ico-only .badge-dot { top: -3px; right: -1px; width: 19px; height: 19px; font-size: 10.5px; line-height: 1; border-width: 2px; }
/* petits écrans : un cran en dessous pour que rien ne se touche */
@media (max-width: 360px) {
  .bottom-nav.nav-ico-only { gap: 2px; padding: 7px 6px; }
  .bottom-nav.nav-ico-only button .ico { height: 34px; }
  .bottom-nav.nav-ico-only .nav-ic-img { height: 32px; }
  .bottom-nav.nav-ico-only button .ico.nav-ring { width: 36px; height: 36px; }
  .bottom-nav.nav-ico-only button[data-n="profile"] .ico:not(.nav-ring) { height: 34px; }
}

/* ============ onglet STATS : bandeaux de section + stats par jeu ============ */
/* le reproche : « c'est pas clair » — un bandeau franc sépare le quizz du reste */
.sec-band { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; padding: 10px 13px; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--sticker); text-align: left; }
.sec-band.quiz { background: var(--yellow); }
.sec-band.games { background: #cfe4ff; }
.sec-band.all { background: var(--paper-2); margin-top: 4px; }
.sec-band .sb-em { display: inline-flex; align-items: center; }
.sec-band .sb-em .sec-ic { height: 24px; width: auto; }
.sec-band .sb-txt { display: flex; flex-direction: column; font-family: var(--font-d); font-size: 16px; line-height: 1.1; }
.sec-band .sb-txt small { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 11px; opacity: .62; margin-top: 3px; }

.gs-card { text-align: left; margin-bottom: 12px; padding: 13px 14px 14px; }
.gs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.gs-games { font-weight: 900; font-size: 12px; color: var(--ink-60); margin-left: auto; }
.gs-wtl { display: inline-flex; gap: 5px; }
.gs-wtl b { font-size: 11.5px; padding: 3px 7px; border-radius: 99px; border: 2px solid var(--ink); background: var(--paper-2); }
.gs-wtl b.w { background: #b8f0c0; }
.gs-wtl b.l { background: #ffc9c4; }
.gs-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.gs-m { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border: 2.5px solid var(--ink); border-radius: 13px; background: var(--paper-2); }
.gs-m b { font-family: var(--font-d); font-size: clamp(14px, 4.4vw, 19px); line-height: 1; }
.gs-m span { font-size: 8.5px; font-weight: 900; color: var(--ink-60); text-align: center; line-height: 1.15; }
.gs-letters { display: flex; justify-content: space-around; gap: 6px; margin-top: 9px; padding-top: 9px; border-top: 2px dashed rgba(43, 28, 6, .18); font-weight: 900; font-size: 12px; color: var(--ink-60); }
.gs-letters b { font-family: var(--font-d); font-size: 15px; color: var(--ink); }
.gs-go { margin-top: 10px; }

/* histogramme des essais MOTAMO — lecture SUTOM : 1 ligne par nombre de coups */
.tries-chart { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.tc-row { display: flex; align-items: center; gap: 8px; }
.tc-row .tc-n { width: 14px; font-family: var(--font-d); font-size: 15px; text-align: center; }
.tc-row.fail .tc-n { color: var(--ink-60); }
.tc-bar { flex: 1; height: 17px; display: flex; }
.tc-bar i { display: block; height: 100%; border: 2.5px solid var(--ink); border-radius: 6px; background: #7fb2ff; min-width: 8px; transition: width .4s ease; }
.tc-bar i.top { background: var(--red); }
.tc-bar i.ko { background: #d8cfc0; }
.tc-v { min-width: 30px; text-align: right; font-family: var(--font-d); font-size: 14px; }
.tc-legend { display: flex; justify-content: space-between; font-weight: 900; font-size: 10.5px; color: var(--ink-60); margin: -6px 0 10px; }
@media (max-width: 359px) { .gs-m b { font-size: 15px; } .gs-m span { font-size: 8px; } }

/* en-tête des vannes : compteur du pool + re-tirage 🎲 */
.taunt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 2px 6px; }
.taunt-head > span { font-weight: 900; font-size: 12px; color: var(--ink-60); }
.taunt-head > span b { color: var(--ink); }
.taunt-reroll { font-family: inherit; font-weight: 900; font-size: 12px; padding: 5px 11px; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--yellow); box-shadow: 0 2px 0 var(--sticker); }
.taunt-reroll:active { transform: translateY(2px); box-shadow: none; }
.taunt-reroll.spin { opacity: .6; }

/* cartes du jour : illustration à droite (maquette du 2026-08-09) */
.dg-card .dg-head { margin-bottom: 1px; }
.dg-stats { font-weight: 900; font-size: 11px; opacity: .92; }
@media (max-width: 400px) {
  .dg-body { width: min(64%, 205px); min-height: 118px; padding: 11px 12px; }
  .dg-art { max-width: 44%; }
  .dg-cta { font-size: 12px; padding: 5px 13px; }
}
@media (max-width: 340px) { .dg-body { width: 59%; padding: 10px 11px; } .dg-art { max-width: 39%; } }

/* ---- iPhone (PWA installée + app iOS) : respecter l'encoche et la barre home ---- */
.screen { padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.screen.no-nav { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.bottom-nav { bottom: max(14px, calc(6px + env(safe-area-inset-bottom, 0px))); }

/* ---- barre de nav « Liquid Glass » (demande Maxime 2026-08-10) : verre dépoli au-dessus du contenu ---- */
.bottom-nav {
  background: rgba(255, 250, 240, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 10px 28px rgba(43, 28, 6, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.bottom-nav button.on { border-width: 2px; }
/* navigateurs sans backdrop-filter : on garde la carte opaque d'origine */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav { background: var(--card); border: var(--bw) solid var(--ink); box-shadow: 0 5px 0 var(--sticker); }
}

/* achat In-App en cours : la ligne respire le temps de la feuille Apple */
.pack-row.buying { opacity: .55; animation: pulse 1.4s infinite; }

/* le soleil dessiné (remplace ☀️ dans l'UI des Jeux du jour) : se cale sur la taille du texte.
   -0.32em de marge basse : le dessin porte son ombre violette sous le disque, sans quoi
   le soleil paraît flotter au-dessus de la ligne de texte. */
.sun-ic { height: 1.35em; width: auto; vertical-align: -0.34em; margin-right: 1px; }
.sun-big { height: 92px; width: auto; display: block; margin: 0 auto; }
/* titre de l'onglet : une seule ligne, soleil et texte centrés ensemble (sinon le soleil part seul à la ligne) */
.daily-title { display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.daily-title .sun-ic { height: 1.5em; vertical-align: 0; margin: 0 0 6px; }
/* dans les petites pastilles, le soleil reste discret */
.daily-pill .sun-ic, .mo-p-opp .sun-ic { height: 1.5em; vertical-align: -0.45em; }

/* questions d'art : l'image EST la question → aussi grande que l'écran le permet */
.q-img.big { max-height: min(38vh, 250px); max-width: 100%; object-fit: contain; }
@media (max-height: 700px) { .q-img.big { max-height: 30vh; } }

/* carte du mode ART dans le wizard de duel (même sélecteur que les autres modes) */
.nd-game.nd-g-ar { background: linear-gradient(160deg, #9D4EDD, #6D28D9); }

/* pastille « NOUVEAU » sur une carte de catégorie du catalogue */
.cat-card { position: relative; }
.cc-new { position: absolute; top: 6px; right: 6px; font-family: var(--font-d); font-size: 8.5px; letter-spacing: .4px; padding: 3px 6px; border-radius: 99px; background: var(--red); color: #fff; border: 2px solid var(--ink); }

/* carte ART de la rangée « Modes de jeu » (le violet de la catégorie) */
.qz-card.qz-ar { background: linear-gradient(160deg, #B266FF 0%, #9D4EDD 55%, #6D28D9 100%); }
.qz-card.qz-ar::after { content: '🖼️'; }

/* ---------- Inviter des potes : QR code + gains de parrainage ---------- */
.qr-card { background: #fff; border: var(--bw) solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); padding: 16px 16px 12px; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-svg { display: block; border-radius: 8px; }
.qr-code-line { font-family: var(--font-d); font-size: 22px; letter-spacing: 3px; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 99px; padding: 4px 18px; }
.qr-hint { font-weight: 900; font-size: 11.5px; color: var(--ink-60); }
.inv-actions { display: flex; flex-direction: column; gap: 9px; margin: 16px 0 4px; }
.inv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.inv-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; }
.inv-box b { font-family: var(--font-d); font-size: 26px; line-height: 1; }
.inv-box span { font-size: 9.5px; font-weight: 900; color: var(--ink-60); letter-spacing: .3px; }
.inv-box.gold { background: var(--yellow); }
.inv-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 2px dashed rgba(43, 28, 6, .14); font-weight: 900; }
.inv-row:last-child { border-bottom: none; }
.inv-row .muted { margin-left: auto; font-size: 11.5px; }
.ref-welcome { background: #d9f7e2; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--sticker); padding: 9px 14px; margin: 4px auto 10px; font-weight: 900; font-size: 12.5px; max-width: 320px; }
.ref-field { text-transform: uppercase; letter-spacing: 2px; font-family: var(--font-d); }
.inv-note { font-weight: 900; font-size: 11px; color: var(--ink-60); text-align: center; margin-top: 2px; }

/* carte de parrainage sur l'accueil, sous les duels */
.ref-home { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 13px 15px; text-align: left; font-family: inherit;
  background: linear-gradient(135deg, #d9f7e2, #b8f0c0); border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); }
.ref-home:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sticker); }
.ref-home .rh-img { flex: none; width: 88px; height: 62px; object-fit: cover; object-position: 50% 30%;
  border: 2.5px solid var(--ink); border-radius: 12px; }
.ref-home .rh-mid { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ref-home .rh-mid b { font-family: var(--font-d); font-size: 15px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ref-home .rh-mid span { font-weight: 900; font-size: 11.5px; color: var(--ink-60); }
.ref-home .rh-go { font-family: var(--font-d); font-size: 22px; flex: none; }

/* mode IA ou pas : l'image est LE sujet → aussi grande que l'écran le permet */
.q-img.xl { max-height: min(44vh, 360px); max-width: 100%; width: auto; border-radius: 14px; object-fit: contain; }
/* cartes du mode IA (wizard + rangée Modes de jeu) : dégradé cyan futuriste */
.nd-game.nd-g-ia { background: linear-gradient(160deg, #00B8D4, #0f5d8f); }
.qz-card.qz-ia { background: linear-gradient(160deg, #26d0e8 0%, #00B8D4 55%, #0b6ca3 100%); }
.qz-card.qz-ia::after { content: '🤖'; }

/* Réglages : suppression de compte (action destructrice → discrète mais claire) */
.danger-link { color: var(--red); }
.del-line { font-weight: 900; font-size: 12.5px; padding: 5px 0; border-bottom: 2px dashed rgba(43, 28, 6, .14); }
.del-line:last-child { border-bottom: none; }
/* bouton signaler, posé sur les médias */
.rep-btn { background: rgba(255, 255, 255, .92); border: 2.5px solid var(--ink); border-radius: 99px; font-family: inherit;
  font-weight: 900; font-size: 11.5px; padding: 5px 11px; box-shadow: 0 2px 0 var(--sticker); }
.rep-btn:active { transform: translateY(2px); box-shadow: none; }
.rep-reasons { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; }
.fc-report { background: none; border: none; font-size: 13px; opacity: .4; padding: 2px 4px; font-family: inherit; line-height: 1; }
.fc-report:active { opacity: 1; transform: scale(1.2); }
.sh-head .rep-btn { margin-left: auto; margin-right: 6px; }

/* affiche d'invitation en tête de l'écran « Invite tes potes » */
.inv-hero { width: 100%; max-width: 340px; border: var(--bw) solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow); display: block; margin: 2px auto 0; }

/* ============ SOLO ZEN : chemin de progression ============ */
.zen-map { height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px 0;
  background: linear-gradient(180deg, rgba(223, 237, 255, .82), rgba(232, 241, 255, .45) 32%, rgba(223, 237, 255, .7)); }
.zen-map .play-tabs, .zen-map .zen-top, .zen-map .zen-goal { flex: none; }
/* la signature de l'app : les cartes sont des autocollants, légèrement de travers */
.zen-goal { transform: rotate(-.6deg); }
.zrow:nth-child(odd) .zcard { transform: rotate(-.45deg); }
.zrow:nth-child(even) .zcard { transform: rotate(.45deg); }
.zrow:nth-child(odd) .zcard:active:not(:disabled) { transform: rotate(-.45deg) translateY(3px); }
.zrow:nth-child(even) .zcard:active:not(:disabled) { transform: rotate(.45deg) translateY(3px); }
.zrow.boss .zboss { transform: rotate(-.7deg); }
.zrow.boss .zboss:active:not(:disabled) { transform: rotate(-.7deg) translateY(4px); }
/* seul le chemin défile — l'en-tête (onglets, pilules, boss) reste posé */
.zen-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  margin: 0 -12px; padding: 4px 12px 190px; }
/* le décor du monde : couche FIXE derrière l'écran (le .screen garde un transform → pas de fixed dedans) */
.zen-bg { position: fixed; inset: 0; z-index: 0; background-color: #ffedc6;
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  filter: saturate(.72) contrast(.9); } /* le décor est une ambiance, pas un poster */
/* bannière NOUVEAU DUEL de la home en visuel (coins clippés par la carte) */
.cta-duel.cta-img { display: block; width: 100%; padding: 0; background: #ffcc00;
  border: var(--bw) solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.cta-duel.cta-img img { display: block; width: 100%; height: auto; }
.cta-duel.cta-img:active { transform: translateY(3px); box-shadow: none; }

/* bouton SOLO ZEN de la home (visuel fourni, coins arrondis par clip) */
.zen-home { display: block; width: 100%; padding: 0; margin: 12px 0 0; background: none;
  border: var(--bw) solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.zen-home img { display: block; width: 100%; height: auto; background: #0f2f9e; }
.zen-home:active { transform: translateY(3px); box-shadow: none; }

/* rangée du haut : portefeuille + stats, une seule ligne */
.zen-top { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.zt-pill { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-weight: 900; line-height: 1;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 99px; padding: 8px 12px; box-shadow: 0 3px 0 var(--sticker); }
.zt-pill b { font-family: var(--font-d); font-size: 14px; }
.zt-pill.coins { background: linear-gradient(135deg, #ffe98a, #ffc400); }
.zt-pill.gems { background: linear-gradient(135deg, #d8f3ff, #9fe0ff); }
.zt-pill.flame { background: linear-gradient(135deg, #ffdcb4, #ffb26b); }
.zt-pill.stats { margin-left: auto; }
.zt-lab { font-size: 10px !important; letter-spacing: .4px; }
button.zt-pill:active { transform: translateY(3px); box-shadow: none; }

/* bandeau objectif : LE prochain boss, et rien d'autre */
.zen-goal { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, #4d8dff, #1d5be0);
  color: #fff6eb; border: var(--bw) solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 11px 12px; margin-bottom: 14px; }
.zen-goal .zg-tag { opacity: .85; }
.zen-goal .zg-bar { background: rgba(10, 30, 80, .45); }
.zen-goal .zg-bar span { color: #fff6eb; }
.zen-goal .zg-loot i { background: rgba(255, 255, 255, .92); color: var(--ink); }
.zg-face { flex: none; font-size: 36px; filter: drop-shadow(0 2px 0 rgba(43, 28, 6, .3)); }
.zg-left { flex: 1; min-width: 0; }
.zg-tag { font-family: var(--font-d); font-size: 9px; letter-spacing: .6px; opacity: .65; }
.zg-title { display: block; font-family: var(--font-d); font-size: 18px; line-height: 1.1; margin: 1px 0 2px; }
.zg-bar { position: relative; height: 18px; margin-top: 6px; background: rgba(43, 28, 6, .18); border: 2.5px solid var(--ink);
  border-radius: 99px; overflow: hidden; }
.zg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7ee08a, #2fbe5f); transition: width .5s cubic-bezier(.34,1.4,.64,1); }
.zg-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 10.5px; color: var(--ink); }
.zg-loot { flex: none; display: flex; flex-direction: column; gap: 4px; }
.zg-loot i { font-style: normal; display: inline-flex; align-items: center; gap: 3px; justify-content: center;
  font-family: var(--font-d); font-size: 11px; background: rgba(255, 255, 255, .6); border: 2px solid var(--ink);
  border-radius: 99px; padding: 3px 8px; }



/* le chemin lui-même */
.zen-path { position: relative; padding-left: 6px; }
.zen-path::before { content: ''; position: absolute; left: 27px; top: 12px; bottom: 12px; width: 5px;
  background: repeating-linear-gradient(#4d8dff 0 10px, transparent 10px 18px); border-radius: 4px; }
.zrow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; position: relative; }
.zdot { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-d); font-size: 16px;
  background: var(--paper-2); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); }
.zrow.done .zdot { background: #b8f0c0; }
.zrow.skipped .zdot { background: var(--paper-2); opacity: .8; }
.zrow.cur .zdot { background: var(--ink); color: #8fc1ff; transform: scale(1.12); box-shadow: 0 0 0 5px rgba(77, 141, 255, .5), 0 3px 0 var(--sticker); }
.zrow.lock .zdot { background: #eee7db; color: var(--ink-60); }
.zrow.chest .zdot { background: #e9d5ff; }
.zdot-ok { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; border-radius: 50%; background: #2fbe5f;
  color: #fff; border: 2px solid var(--ink); font-size: 9px; font-style: normal; display: flex; align-items: center; justify-content: center; }
.zcard { flex: 1; display: flex; align-items: center; gap: 8px; text-align: left; font-family: inherit;
  background: linear-gradient(180deg, #fff, #f6eddd); border: 2.5px solid var(--ink); border-radius: 16px; padding: 9px 12px; box-shadow: 0 3px 0 var(--sticker); }
.zcard:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.zcard:disabled { opacity: .62; }
.zrow.cur .zcard { background: linear-gradient(135deg, #cfe3ff, #8fc1ff); border-width: 3px; box-shadow: 0 4px 0 var(--sticker); }
.zrow.done .zcard { background: linear-gradient(135deg, #f2fff5, #cef3da); }
.zrow.lock .zcard { background: linear-gradient(180deg, #f8f1e4, #efe4cf); padding: 7px 12px; }
.zrow.chest .zcard { background: #f6ecff; }
.zc-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zc-mid b { font-family: var(--font-d); font-size: 14.5px; }
.zc-sub { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.zc-stars { display: flex; gap: 2px; margin-top: 2px; }
.zc-stars i { font-style: normal; font-size: 13px; color: rgba(43, 28, 6, .22); line-height: 1; }
.zc-stars i.on { color: #ffb300; text-shadow: 0 1px 0 var(--ink); }
.zc-play { flex: none; font-family: var(--font-d); font-size: 12px; background: #1d5be0; color: #fff;
  border-radius: 99px; padding: 6px 14px; }
.zc-lock { flex: none; font-size: 17px; opacity: .75; display: flex; align-items: center; }

/* compteur de recharge des 💎 */
.zt-timer { font-size: 8.5px; font-weight: 900; opacity: .8; margin-left: 2px; white-space: nowrap; }
/* prix d'entrée sur le gros bouton */
.zen-cta .btn { text-align: left; padding-left: 18px; padding-right: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(13px, 4.3vw, 18px);
  background: linear-gradient(135deg, #4d8dff, #1d5be0); color: #fff6eb; }
.zen-cta .btn:active { background: linear-gradient(135deg, #3f7df0, #1848c0); }
.zen-cta .cta-gem { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-family: var(--font-d); background: rgba(255, 255, 255, .92); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 99px; padding: 4px 10px; }
/* boutique : en-tête sticky à 2 soldes + cartes de packs avec icônes dessinées */
.shop-head { gap: 8px; top: calc(env(safe-area-inset-top, 0px) - 8px); }
.shine-pill.sm { font-size: 14px; padding: 6px 12px; gap: 4px; }
.pk-img { flex: none; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 0 rgba(43, 28, 6, .18)); }
.pack-row.gempk { background: linear-gradient(135deg, #eaf7ff, #d4eeff); }
.pack-row.gempk.best { background:
    linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%) no-repeat -220% 0 / 200% 100%,
    linear-gradient(135deg, #d8f3ff, #9fe0ff);
  animation: shineBg 3s ease-in-out infinite; }
@keyframes shineBg { 0% { background-position: -220% 0, 0 0; } 55%, 100% { background-position: 220% 0, 0 0; } }
.pk-tag.blue { background: #1d5be0; color: #fff; }


/* coffre mystère : la carte gacha, violette et brillante */
.mystery-card { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font-family: inherit;
  background:
    linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%) no-repeat -220% 0 / 200% 100%,
    linear-gradient(135deg, #efe0ff, #d9beff);
  animation: shineBg 3.2s ease-in-out infinite;
  border: 3px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 0 4px 0 var(--sticker); }
.mystery-card:active { transform: translateY(3px); box-shadow: none; }
.my-em { flex: none; font-size: 36px; filter: drop-shadow(0 2px 0 rgba(43, 28, 6, .2)); }
.my-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.my-mid b { font-family: var(--font-d); font-size: 17px; }
.my-desc { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.my-price { flex: none; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-d); font-size: 15px;
  background: linear-gradient(135deg, #ffe98a, var(--yellow)); border: 3px solid var(--ink); border-radius: 99px;
  padding: 9px 13px; box-shadow: 0 3px 0 var(--sticker); }
.my-big { font-size: 64px; line-height: 1; display: inline-block; }
.my-big.shake { animation: myShake .6s ease-in-out; }
.my-big.pop { animation: zsPop .5s cubic-bezier(0.34, 1.9, 0.64, 1) both; }
@keyframes myShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.06); } 40% { transform: rotate(12deg) scale(1.1); } 60% { transform: rotate(-10deg) scale(1.12); } 80% { transform: rotate(8deg) scale(1.08); } }
.my-odds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.my-odds span { font-weight: 900; font-size: 11px; background: var(--paper-2); border: 2px solid var(--ink);
  border-radius: 99px; padding: 4px 10px; }
.my-odds i { font-style: normal; opacity: .6; margin-left: 3px; }

/* vitrine Look : mini-cartes aux couleurs de rareté */
.look-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.look-card { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 14px; padding: 9px 4px;
  box-shadow: 0 3px 0 var(--sticker); }
.look-card:active { transform: translateY(3px); box-shadow: none; }
.look-card .lk-em { font-size: 26px; line-height: 1; }
.look-card b { font-family: var(--font-d); font-size: 9px; text-align: center; line-height: 1.15; }
.lk-price { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-d); font-size: 9.5px; color: var(--ink-60); }
.look-card.rar-rare { background: linear-gradient(180deg, #fff, #e8efff); }
.look-card.rar-epique { background: linear-gradient(180deg, #fff, #f0e5ff); }
.look-card.rar-legend { background: linear-gradient(180deg, #fff, #fff3c9); }

/* aperçu avatar en GRAND dans l'éditeur (on doit voir les accessoires) */
#av-preview { width: min(60vw, 240px); height: min(60vw, 240px); border-radius: 26px; }
/* paywall studio */
.studio-previews { display: flex; justify-content: center; gap: 8px; }
.studio-previews img { width: 88px; height: 88px; border-radius: 18px; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--sticker); }
.studio-previews img:nth-child(1) { transform: rotate(-5deg); }
.studio-previews img:nth-child(3) { transform: rotate(5deg); }
.gp-perks-lite { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left;
  background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 13px; }
.gp-perks-lite span { font-weight: 900; font-size: 12.5px; }
/* le haut du header boutique : rien ne passe au-dessus */
.shop-head::before { content: ''; position: absolute; left: -20px; right: -20px; bottom: 100%; height: 130px; background: var(--paper); }
.shop-head { box-shadow: 0 -60px 0 18px var(--paper); } /* double sécurité iOS : rien ne passe au-dessus */
/* butins du coffre en pastilles */
.my-loots { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.my-loots i { font-style: normal; font-weight: 900; font-size: 10px; background: rgba(255, 255, 255, .72);
  border: 2px solid var(--ink); border-radius: 99px; padding: 2px 7px; }
/* flash d'ouverture du coffre */
.my-flash { position: fixed; inset: 0; background: #fff; opacity: .85; z-index: 99; pointer-events: none; animation: myFlash .4s ease-out forwards; }
@keyframes myFlash { from { opacity: .85; } to { opacity: 0; } }
.gp-price i, .gp-price em { font-style: normal; font-family: inherit; font-size: inherit; }

/* l'identité VIOLETTE de l'onglet Multi */
.party-screen { min-height: 100dvh;
  background: linear-gradient(180deg, #ead9ff 0%, #f7efff 34%, #eddfff 100%); }
/* … et ses boutons assortis au visuel violet de l'onglet */
.party-screen .btn.primary, .party-screen .btn.blue {
  background: linear-gradient(135deg, #a85ce8, #7c22ce); color: #fff; }
.party-screen .btn.primary:active, .party-screen .btn.blue:active {
  background: linear-gradient(135deg, #9a4cdb, #6b1cb5); }

/* la carte potes en tête des stats du profil */
.prof-friends-card { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font-family: inherit;
  background: linear-gradient(135deg, #e4f7e9, #cdeed8); border: 3px solid var(--ink); border-radius: 18px;
  padding: 11px 14px; box-shadow: 0 3px 0 var(--sticker); margin-bottom: 14px; }
.prof-friends-card:active { transform: translateY(3px); box-shadow: none; }
.pf-stack { display: flex; flex: none; }
.pf-stack img { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); object-fit: cover;
  margin-left: -12px; background: #fff; position: relative; }
.pf-stack img:first-child { margin-left: 0; }
.pf-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-mid b { font-family: var(--font-d); font-size: 15px; }
.pf-mid span { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.pf-go { flex: none; font-family: var(--font-d); font-size: 22px; opacity: .5; }
/* têtes de section des émotes */
.emote-rar-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 2px 7px; }
.emote-rar-head b { font-family: var(--font-d); font-size: 14px; letter-spacing: .3px; }
.emote-rar-head span { font-weight: 900; font-size: 11px; color: var(--ink-60); }
.emote-rar-head.rar-rare b { color: #2f5fd0; }
.emote-rar-head.rar-epique b { color: #8b32dc; }
.emote-rar-head.rar-legende b { color: #c98a00; }
/* streak : le mot jours */
.sp-days { font-weight: 900; font-size: 12px; opacity: .75; }
/* écran de connexion / inscription : tient dans l'écran (tailles fluides) */
.splash { gap: clamp(8px, 1.8dvh, 18px); padding-top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 3dvh, 40px)); }
.splash .mascot-wrap svg { width: clamp(78px, 15dvh, 150px); height: auto; }
.splash .field { padding-top: clamp(9px, 1.4dvh, 14px); padding-bottom: clamp(9px, 1.4dvh, 14px); }

/* bannière du haut de l'onglet Multi (remplace titre + sous-titre) */
.party-hero { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 0 4px 0 var(--sticker); margin: 2px 0 12px; }

/* détail d'une manche flécho (grille + stats dans la feuille) */
.fc-grid.fc-mini { --fcs: clamp(26px, calc((100vw - 72px) / var(--fcn)), 40px); margin-top: 4px; }
.fc-grid.fc-mini .fc-dtxt { font-size: 7.2px; }
.fc-grid.fc-mini .fc-dtxt.big { font-size: 8.6px; }
.fc-grid.fc-mini .fc-dtxt.sml { font-size: 6.4px; }
.fc-cell.let.miss { background: #ffe3dd; color: #c0402e; }
.fcd-stats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.fcd-side { display: flex; align-items: center; gap: 8px; background: #fff; border: 2.5px solid var(--ink);
  border-radius: 14px; padding: 7px 10px; box-shadow: 0 2px 0 var(--sticker); }
.fcd-name { font-family: var(--font-d); font-size: 13px; flex: none; }
.fcd-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; justify-content: flex-end; }
.fcd-chip { font-size: 10.5px; font-weight: 900; background: var(--paper); border: 2px solid var(--ink-30);
  border-radius: 99px; padding: 2px 7px; white-space: nowrap; }
.fcd-legend { display: flex; justify-content: center; gap: 12px; margin-top: 10px; font-size: 11px; font-weight: 900; color: var(--ink-60); }
.fcd-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 4px; border: 2px solid var(--ink-30); vertical-align: -2px; margin-right: 3px; }
.fcd-legend .lg.lock { background: #fff; }
.fcd-legend .lg.gold { background: linear-gradient(160deg, var(--gold-1), var(--gold-2)); }
.fcd-legend .lg.miss { background: #ffe3dd; }
/* ligne de manche cliquable dans les résultats */
button.rr-tap { font-family: inherit; color: inherit; text-align: inherit; width: 100%; background: none; border: none; padding: 6px 20px 6px 0; position: relative; }
button.rr-tap:active { transform: scale(.98); }
.rr-eye { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .45; }

/* historique des jeux du jour */
.dh-day { width: 100%; display: flex; flex-direction: column; gap: 7px; text-align: left; font-family: inherit;
  color: inherit; margin-bottom: 10px; cursor: pointer; }
.dh-day:active { transform: translateY(3px); box-shadow: none; }
.dh-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dh-n { font-family: var(--font-d); font-size: 16px; }
.dh-date { font-size: 11.5px; font-weight: 900; color: var(--ink-60); text-transform: capitalize; }
.dh-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dh-chip { font-size: 11px; font-weight: 900; border-radius: 99px; padding: 3px 9px; border: 2px solid var(--ink-30); }
.dh-chip.ok { background: #d9f7e2; border-color: #2e9e5b; }
.dh-chip.none { background: var(--paper); color: var(--ink-60); }
.dh-chip.replay { font-family: inherit; display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(160deg, #fffbe6, #ffe27a); border-color: var(--ink); box-shadow: 0 2px 0 var(--sticker); }
.dh-chip.replay:active { transform: translateY(2px); box-shadow: none; }
.dh-chip.replay:disabled { opacity: .5; }
.dh-see { font-size: 11.5px; font-weight: 900; color: var(--ink-60); }
/* les questions d'un sprint passé */
.miss-list { display: flex; flex-direction: column; gap: 8px; max-height: 62dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
.miss-q { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px; box-shadow: 0 2px 0 var(--sticker); }
.miss-t { font-size: 13px; font-weight: 900; margin-bottom: 6px; }
.miss-a { font-size: 12.5px; font-weight: 900; border-radius: 10px; padding: 5px 9px; margin-top: 4px; }
.miss-a.good { background: #d9f7e2; color: #1d7a43; }
.miss-a.bad { background: #ffe3dd; color: #c0402e; }
.miss-a.none { background: var(--paper); color: var(--ink-60); }
.miss-a.gold { background: linear-gradient(160deg, #fff3bd, #ffe27a); color: #6a4e00; }

/* 🎨 la feuille des fonds de l'app */
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bg-item { display: flex; flex-direction: column; align-items: center; gap: 5px; font-family: inherit; color: inherit;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 15px; padding: 10px 6px 8px; box-shadow: 0 3px 0 var(--sticker); }
.bg-item:active { transform: translateY(3px); box-shadow: none; }
.bg-item.on { outline: 3px solid var(--yellow); outline-offset: 1.5px; }
.bg-swatch { width: 54px; height: 54px; border-radius: 14px; border: 2.5px solid var(--ink); }
.bg-swatch.photo { display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(135deg, #ffe98a, #ffb3d1 55%, #a9d4ff); }
.bg-name { font-size: 10.5px; font-weight: 900; text-align: center; line-height: 1.15; }
.bg-tag { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-d); font-size: 10px;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 99px; padding: 2.5px 8px; }
.bg-item.on .bg-tag { background: #d9f7e2; }

/* bannière FLÉCHO en visuel (remplace la version à tuiles) */
.fc-banner-img { display: block; width: 100%; padding: 0; background: #8a4fd8; border: var(--bw) solid var(--ink);
  border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); margin-top: 12px; }
.fc-banner-img img { display: block; width: 100%; height: auto; }
.fc-banner-img:active { transform: translateY(3px); box-shadow: none; }

/* le wizard Nouveau duel : mêmes visuels que Modes de jeu, en 2 colonnes */
.nd-games-img { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
.nd-games-img .nd-span2 { grid-column: span 2; }

/* réactions dans le popup « t'a chambré » (mêmes pastilles que le feed) */
.tp-reacts { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* 🧐 PERSONNAGES HISTORIQUES : portrait géant + réponse écrite */
.perso-img { max-height: 34dvh; width: auto; max-width: 100%; object-fit: contain; border-radius: 12px;
  border: 2.5px solid var(--ink); background: #fff; }
.perso-zone { margin-top: 12px; display: flex; flex-direction: column; gap: 0; }
.perso-in { width: 100%; font-size: 17px; text-align: center; font-weight: 900; }
.perso-in.good { background: #d9f7e2; border-color: #2e9e5b; }
.perso-in.bad { background: #ffe3dd; border-color: #c0402e; }
.perso-in.gold { background: linear-gradient(160deg, #fff3bd, #ffe27a); border-color: var(--gold-3); }
.perso-verdict { text-align: center; font-weight: 900; font-size: 15px; border-radius: 14px; padding: 9px 12px; margin-bottom: 8px;
  border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--sticker); animation: pop .3s cubic-bezier(.34, 1.8, .64, 1); }
.perso-verdict.ok { background: #d9f7e2; }
.perso-verdict.ko { background: #ffe3dd; }
.perso-ini { text-align: center; font-weight: 900; margin-top: 8px; min-height: 0; }
.perso-ini b { font-family: var(--font-d); letter-spacing: 2px; }
.perso-hints { display: flex; justify-content: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ps-fact { display: inline-block; background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 12px;
  padding: 8px 12px; font-weight: 900; font-size: 13px; line-height: 1.35; box-shadow: 0 2px 0 var(--sticker); }
.ps-hint { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 900; font-size: 12.5px;
  color: var(--ink); background: #fff8dc; border: 2.5px dashed var(--yellow-d); border-radius: 99px;
  padding: 8px 14px; box-shadow: 0 2px 0 var(--yellow-d); }
.ps-hint:active { transform: translateY(2px); box-shadow: none; }
.ps-hint-c { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; color: var(--ink-60); }

/* bannière mode hors ligne du zen */
.zen-offline { flex: none; text-align: center; font-weight: 900; font-size: 11.5px; color: var(--ink);
  background: #fff3b0; border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 10px; margin-bottom: 8px;
  box-shadow: 0 2px 0 var(--sticker); }

/* ---------- ⚙️ RÉGLAGES : un écran d'app, pas une pile de boutons ---------- */
.st-sheet { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
/* la carte « moi » en haut */
.st-me { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: inherit; color: inherit;
  background: linear-gradient(135deg, #fff3cf, #ffe27a); border: 3px solid var(--ink); border-radius: 18px;
  padding: 11px 13px; box-shadow: 0 3px 0 var(--sticker); margin-bottom: 12px; }
.st-me:active { transform: translateY(3px); box-shadow: none; }
.st-me-ring { position: relative; flex: none; }
.st-me-face { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; display: block; }
.st-me-lvl { position: absolute; bottom: -4px; right: -4px; font-family: var(--font-d); font-size: 11px;
  background: var(--ink); color: var(--yellow); border-radius: 99px; padding: 2px 7px; border: 2px solid var(--yellow); }
.st-me-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-me-mid b { font-family: var(--font-d); font-size: 18px; }
.st-me-wallet { display: flex; gap: 8px; flex-wrap: wrap; }
.st-me-wallet i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-weight: 900; font-size: 12px;
  background: rgba(255, 255, 255, .6); border-radius: 99px; padding: 2px 8px; }
.st-me-xp { display: block; height: 7px; border-radius: 99px; background: rgba(43, 28, 6, .18); overflow: hidden; }
.st-me-xp i { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
/* les avantages / la promo, avec le vrai monstre zen */
.st-premium { display: flex; align-items: center; gap: 11px; }
.st-prem-ic { width: 42px; height: auto; flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.st-prem-ic-em { font-size: 30px; flex: none; }
.st-prem-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-prem-mid b { font-family: var(--font-d); font-size: 13px; letter-spacing: .5px; color: var(--yellow); }
.st-prem-mid span { font-weight: 900; font-size: 11.5px; line-height: 1.35; }
.st-promo-ic { width: 44px; height: auto; flex: none; }
/* avantages / promo */
.st-premium { background: linear-gradient(135deg, #2b1c06, #4a3413); color: #ffe9c4; border: 3px solid var(--ink);
  border-radius: 16px; padding: 10px 13px; margin-bottom: 12px; box-shadow: 0 3px 0 var(--sticker); }
.st-promo { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-family: inherit; color: inherit;
  background: linear-gradient(135deg, #dbe9ff, #b9d4ff); border: 3px solid var(--ink); border-radius: 16px;
  padding: 10px 12px; box-shadow: 0 3px 0 var(--sticker); margin-bottom: 12px; }
.st-promo:active { transform: translateY(3px); box-shadow: none; }
.st-promo-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-promo-mid b { font-family: var(--font-d); font-size: 15px; }
.st-promo-mid span { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.st-promo-go { flex: none; font-family: var(--font-d); font-size: 12px; background: var(--ink); color: #dbe9ff;
  border-radius: 99px; padding: 6px 12px; }
/* titres de section */
.st-sec { font-family: var(--font-d); font-size: 11.5px; letter-spacing: 1px; color: var(--ink-60);
  margin: 16px 2px 7px; }
/* les lignes */
.st-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: inherit; color: inherit;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; padding: 10px 12px;
  box-shadow: 0 2px 0 var(--sticker); margin-bottom: 7px; }
.st-row:active { transform: translateY(2px); box-shadow: none; }
.st-em { font-size: 21px; flex: none; width: 26px; text-align: center; }
.st-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-mid b { font-size: 14px; font-weight: 900; }
.st-mid span { font-size: 10.5px; font-weight: 800; color: var(--ink-60); }
.st-right { flex: none; display: flex; align-items: center; }
.st-arrow { font-family: var(--font-d); font-size: 20px; color: var(--ink-30); }
/* interrupteurs */
.st-switch { flex: none; width: 46px; height: 27px; border-radius: 99px; background: var(--ink-30);
  border: 2.5px solid var(--ink); position: relative; transition: background .18s; }
.st-switch i { position: absolute; top: 1px; left: 1px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); transition: transform .18s cubic-bezier(.34, 1.6, .64, 1); }
.st-switch.on { background: var(--green); }
.st-switch.on i { transform: translateX(19px); }
/* thèmes */
.st-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 2px 0 7px; }
.st-theme { font-family: inherit; font-weight: 900; font-size: 11px; color: inherit; background: #fff;
  border: 2.5px solid var(--ink); border-radius: 13px; padding: 9px 4px; box-shadow: 0 2px 0 var(--sticker);
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.st-theme b { font-size: 17px; }
.st-theme.on { background: var(--yellow); }
/* zone dangereuse + version */
.st-danger { display: flex; gap: 8px; margin-top: 18px; }
.st-mini { flex: 1; font-family: inherit; font-weight: 900; font-size: 11.5px; color: var(--ink-60);
  background: none; border: 2px dashed var(--ink-30); border-radius: 12px; padding: 9px 6px; }
.st-mini.danger { color: var(--red); border-color: rgba(214, 64, 46, .4); }
.st-version { text-align: center; font-weight: 900; font-size: 10.5px; color: var(--ink-30); margin-top: 12px; }
.st-version a { color: var(--ink-60); }

/* récap d'une manche PERSONNAGES : portrait cadré + les deux réponses */
.pr-q { padding: 10px; }
.pr-photo { display: block; width: 100%; max-height: 190px; object-fit: contain; background: #efe7d9;
  border: 2.5px solid var(--ink); border-radius: 12px; margin-bottom: 8px; }
.pr-name { font-weight: 900; font-size: 14px; text-align: center; margin-bottom: 8px; }
.pr-ans { display: flex; align-items: center; gap: 8px; border-radius: 11px; padding: 6px 9px; margin-top: 5px;
  border: 2px solid var(--ink-30); }
.pr-face { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; flex: none; }
.pr-who { font-weight: 900; font-size: 12px; flex: none; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-guess { flex: 1; min-width: 0; font-weight: 800; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-mark { flex: none; font-size: 15px; }
.pr-ans.good { background: #d9f7e2; border-color: #2e9e5b; }
.pr-ans.bad { background: #ffe3dd; border-color: #c0402e; }
.pr-ans.gold { background: linear-gradient(160deg, #fff3bd, #ffe27a); border-color: var(--gold-3); }
.pr-ans.none { background: var(--paper); }
body.theme-dark .pr-ans.none { background: var(--paper-2); }
body.theme-dark .pr-ans.good { background: #1d4030; }
body.theme-dark .pr-ans.bad { background: #45211d; }

/* rappel de la victoire (ou de la honte) sous la photo du mur */
.vic-recap { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 10px;
  background: linear-gradient(135deg, #fff3cf, #ffe27a); border: 2.5px solid var(--ink); border-radius: 15px;
  padding: 9px 12px; box-shadow: 0 3px 0 var(--sticker); }
.vic-recap.lose { background: linear-gradient(135deg, #ffe0dc, #ffc4bd); }
.vr-stamp { font-family: var(--font-d); font-size: 13px; letter-spacing: .5px; }
.vr-score { font-family: var(--font-d); font-size: 27px; line-height: 1.05; }
.vr-vs { font-weight: 900; font-size: 12.5px; }
.vr-date { font-weight: 900; font-size: 10.5px; color: var(--ink-60); text-transform: capitalize;
  display: flex; align-items: center; gap: 3px; }
body.theme-dark .vic-recap { background: linear-gradient(135deg, #3a2f14, #4a3c17); }
body.theme-dark .vic-recap.lose { background: linear-gradient(135deg, #45211d, #58291f); }

/* 🔔 la notification du jeu (app ouverte) : elle descend sous la barre d'état */
.ian { position: fixed; left: 50%; transform: translateX(-50%); z-index: 980;
  top: calc(env(safe-area-inset-top, 0px) + 8px); width: min(430px, calc(100% - 20px));
  display: flex; align-items: center; gap: 11px; text-align: left; font-family: inherit; color: var(--ink);
  background: var(--card); border: 3px solid var(--ink); border-radius: 18px; padding: 10px 13px;
  box-shadow: 0 6px 0 var(--sticker), 0 14px 30px rgba(43, 28, 6, .3);
  animation: ian-in .32s cubic-bezier(.34, 1.5, .64, 1); }
.ian.out { animation: ian-out .24s ease forwards; }
@keyframes ian-in { from { transform: translate(-50%, -130%); opacity: 0; } }
@keyframes ian-out { to { transform: translate(-50%, -130%); opacity: 0; } }
.ian-em { font-size: 25px; flex: none; }
.ian-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ian-mid b { font-size: 13.5px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ian-mid span { font-size: 11.5px; font-weight: 800; color: var(--ink-60); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ian-go { flex: none; font-family: var(--font-d); font-size: 20px; color: var(--ink-30); }
.ian:active { transform: translate(-50%, 3px); box-shadow: 0 3px 0 var(--sticker); }

/* 📲 l'aperçu avant partage : on voit ce qu'on va poster */
.story-prev { width: min(420px, 100%); margin: 0 auto; background: var(--card); border: var(--bw) solid var(--ink);
  border-radius: 26px 26px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  box-shadow: 0 -8px 30px rgba(43, 28, 6, .25); animation: sheet-up .28s cubic-bezier(.34, 1.4, .64, 1); }
.sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sp-head b { font-family: var(--font-d); font-size: 17px; }
.sp-img { display: block; width: 100%; max-height: 52dvh; object-fit: contain; border-radius: 16px;
  border: 2.5px solid var(--ink); background: #0e0c16; }
.sp-actions { margin-top: 12px; }

/* 📲 le bouton qui envoie la story — il doit donner envie d'être touché */
.story-btn { position: relative; overflow: hidden; width: 100%;
  background: linear-gradient(120deg, #ff5ca8, #a855f7 45%, #4d7cff);
  color: #fff; font-family: var(--font-d); font-size: 16px; letter-spacing: .4px;
  border: var(--bw) solid var(--ink); border-radius: 16px; padding: 13px 16px; box-shadow: var(--shadow); }
.story-btn::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: story-sweep 2.8s ease-in-out infinite; }
@keyframes story-sweep { 0% { left: -70%; } 55% { left: 130%; } 100% { left: 130%; } }
.story-btn:active { transform: translateY(3px); box-shadow: none; }

/* 🎁 pastille « cadeau du jour à récupérer » sur l'onglet Boutique */
.badge-dot.gift { top: 2px; right: 8px; animation: gift-pulse 1.6s ease-in-out infinite; }
@keyframes gift-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 77, 66, .6); }
  50% { transform: scale(1.14); box-shadow: 0 0 0 7px rgba(255, 77, 66, 0); }
}

/* 🏋️ ENTRAÎNEMENT : un bloc à part, clairement séparé des modes de jeu du dessus */
.train-zone { margin: 26px -18px calc(-110px - env(safe-area-inset-bottom, 0px)); /* mange le padding du bas de .screen */
  padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 122px);
  background: var(--paper-2); border-top: 3px solid var(--ink); }
.train-zone .section-title { margin-top: 22px; }
.train-zone .search-wrap { margin-bottom: 12px; }
.train-zone .th-chips { margin-bottom: 20px; }
body.theme-light .train-zone { background: #f2f0ec; }
body.theme-dark .train-zone { background: #10131c; border-color: #39405280; }
.train-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.train-em { font-size: 26px; flex: none; }
.train-mid { display: flex; flex-direction: column; gap: 1px; }
.train-mid b { font-family: var(--font-d); font-size: 17px; letter-spacing: .5px; }
.train-mid span { display: flex; align-items: center; gap: 3px; font-weight: 900; font-size: 11.5px; color: var(--ink-60); }

/* 📳 écran des vibrations */
.hp-forces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hp-force { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: inherit; color: inherit;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 15px; padding: 11px 5px; box-shadow: 0 2px 0 var(--sticker); }
.hp-force b { font-size: 22px; }
.hp-force .hp-f-l { font-weight: 900; font-size: 12px; }
.hp-force .hp-f-d { font-weight: 800; font-size: 9.5px; color: var(--ink-60); text-align: center; line-height: 1.2; }
.hp-force.on { background: var(--yellow); }
.hp-force:active { transform: translateY(2px); box-shadow: none; }
.hp-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hp-test { display: flex; align-items: center; gap: 7px; font-family: inherit; font-weight: 900; font-size: 12px; color: inherit;
  background: #fff; border: 2.5px dashed var(--ink-30); border-radius: 13px; padding: 10px 11px; text-align: left; }
.hp-test b { font-size: 17px; }
.hp-test:active { transform: scale(.97); background: var(--paper-2); }
body.theme-dark .hp-force, body.theme-dark .hp-test { background: var(--card); }

/* ---------- PLEIN ÉCRAN : la couleur de l'écran monte sous la barre d'état ----------
   Sans ça, le contenu scrolle SOUS l'heure/le wifi et devient illisible : cette
   bande reprend la teinte de l'écran courant (--tint, posée par syncPageTint). */
/* Le plein écran ne se joue pas avec une bande posée par-dessus (elle mangeait le
   contenu) : c'est le FOND qui monte, et chaque écran garde sa marge sous l'heure. */


/* les cartes Modes de jeu en visuels portrait */
.qz-imgcard { position: relative; display: block; padding: 0; background: #1c2b6b;
  border: 2.5px solid var(--ink); border-radius: 16px; overflow: hidden;
  box-shadow: 0 3px 0 var(--sticker); font-family: inherit; }
.qz-imgcard img { display: block; width: 100%; height: auto; }
.qz-imgcard:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.qz-imgcard.soon img { filter: grayscale(.55) brightness(.75); }
.qz-soon-tag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-d); font-size: 13px; background: var(--ink); color: #ffe9c4;
  border-radius: 99px; padding: 6px 14px; border: 2px dashed rgba(255, 233, 196, .6); }

/* les cartes du jour en VISUEL plein (quiz sprint / flécho) */
.dgi-card { position: relative; display: block; width: 100%; padding: 0; margin-bottom: 12px;
  background: #ffc400; border: var(--bw) solid var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow); font-family: inherit; color: inherit; }
.dgi-card:active { transform: translateY(3px); box-shadow: none; }
.dgi-bg { display: block; width: 100%; height: auto; }
.dgi-fomo { position: absolute; top: 10px; left: 10px; font-weight: 900; font-size: 11px;
  background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 4px 10px; box-shadow: 0 2px 0 var(--sticker); }
.dgi-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: rgba(43, 28, 6, .62); color: #fff; backdrop-filter: blur(1.5px); }
.dgi-done b { font-family: var(--font-d); font-size: 21px; letter-spacing: .5px; }
.dgi-done span { font-weight: 900; font-size: 13.5px; }
.dgi-done i { font-style: normal; font-weight: 900; font-size: 12px; background: rgba(255, 255, 255, .18); border-radius: 99px; padding: 2px 10px; }
.dgi-done em { font-style: normal; font-family: var(--font-d); font-size: 12px; margin-top: 6px;
  background: var(--yellow); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 99px; padding: 6px 14px; box-shadow: 0 2px 0 var(--sticker); }
.gen-podium { margin-top: 10px; }

/* la carte JEUX DU JOUR sur la home */
.daily-home { position: relative; display: block; width: 100%; margin-top: 12px; padding: 0;
  background: #ffc400; border: var(--bw) solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.daily-home:active { transform: translateY(3px); box-shadow: none; }
.daily-home .badge-dot { z-index: 2; }
.dhh-img { display: block; width: 100%; height: auto; }
/* 👑 le bouton classement entre potes, tout en bas de la home */
.fboard-home { position: relative; display: block; width: 100%; margin-top: 16px; padding: 0;
  background: #2e9e5b; border: var(--bw) solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.fboard-home img { display: block; width: 100%; height: auto; }
.fboard-home:active { transform: translateY(3px); box-shadow: none; }

/* ☀️ Jeux du jour : la page chaude et vivante */
.daily-screen { min-height: 100dvh;
  background: linear-gradient(180deg, #ffe9c4 0%, #fff5e2 38%, #ffe9c9 100%); }
.daily-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 12px; text-align: center; }
.dhr-sun { width: 84px; height: auto; filter: drop-shadow(0 4px 0 rgba(43, 28, 6, .18)); animation: dhr-float 3.4s ease-in-out infinite; }
@keyframes dhr-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.dhr-title { font-family: var(--font-d); font-size: 30px; letter-spacing: 1px; margin: 0;
  text-shadow: 0 2.5px 0 rgba(255, 255, 255, .9); }
.dhr-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dhr-n { font-family: var(--font-d); font-size: 12.5px; background: var(--ink); color: #ffe9c4; border-radius: 99px; padding: 5px 12px; }
.dhr-cd { font-weight: 900; font-size: 12.5px; background: #fff; border: 2.5px solid var(--ink); border-radius: 99px; padding: 3.5px 10px; box-shadow: 0 2px 0 var(--sticker); }
.dhr-streak { font-weight: 900; font-size: 12.5px; background: linear-gradient(160deg, #ffd58a, #ff9d3f); border: 2.5px solid var(--ink); border-radius: 99px; padding: 3.5px 10px; box-shadow: 0 2px 0 var(--sticker); }
.dhr-streak i { font-style: normal; font-size: 10.5px; opacity: .75; }
.dhr-fomo { font-weight: 900; font-size: 12px; color: var(--ink-60); background: rgba(255, 255, 255, .65);
  border-radius: 99px; padding: 4px 12px; }
.dhr-fomo b { color: var(--ink); }
.chip.dhr-bonus { background: linear-gradient(160deg, #fff3b0, #ffe27a); border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--sticker); }
/* le podium d'hier */
.ypodium { margin-top: 12px; text-align: left; }
.yp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
.yp-head .muted { font-size: 11px; font-weight: 900; }
.yp-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 2px dashed rgba(43, 28, 6, .08); }
.yp-row:last-of-type { border-bottom: none; }
.yp-row.me { background: #fff8dc; border-radius: 10px; padding: 5px 6px; }
.yp-medal { flex: none; font-size: 17px; width: 24px; text-align: center; }
.yp-face { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; flex: none; }
.yp-nm { flex: 1; min-width: 0; font-weight: 900; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yp-sc { flex: none; font-weight: 900; font-size: 11.5px; color: var(--ink-60); }

/* encadré Studio dans l'édition du profil */
.studio-invite { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font-family: inherit;
  background: linear-gradient(135deg, #f0e3ff, #ddc4ff); border: 3px solid var(--ink); border-radius: 18px;
  padding: 12px 14px; box-shadow: 0 3px 0 var(--sticker); margin: 4px 0 6px; }
.studio-invite:active { transform: translateY(3px); box-shadow: none; }
.si-em { flex: none; font-size: 30px; }
.si-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.si-mid b { font-family: var(--font-d); font-size: 15px; }
.si-mid span { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.si-tag { flex: none; font-family: var(--font-d); font-size: 13px; background: linear-gradient(135deg, #ffe98a, var(--yellow));
  border: 2.5px solid var(--ink); border-radius: 99px; padding: 7px 12px; box-shadow: 0 2px 0 var(--sticker); }
/* mini image dans les récaps de questions */
.q-img-mini { display: block; width: 100%; max-height: 150px; object-fit: contain; border-radius: 12px;
  border: 2.5px solid var(--ink); margin-bottom: 8px; background: #fff; }

/* ---------- SPLASH sombre électrique (1re ouverture) ---------- */
.splash-dark { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: stretch;
  justify-content: flex-start; gap: 10px; padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 22px);
  background:
    radial-gradient(130% 60% at 50% 110%, rgba(255, 138, 0, .14), transparent 60%),
    #000; }
.sd-hero { display: block; width: calc(100% + 44px); margin: 0 -22px 4px; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 90%, transparent 100%); }
.sd-card-img { flex: none; width: 58px; height: auto; filter: drop-shadow(0 0 12px rgba(255, 196, 0, .4)); }
.sd-bolts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sd-bolts i { position: absolute; font-style: normal; font-size: 22px; opacity: .28; filter: saturate(1.4);
  animation: sdFlicker 2.6s ease-in-out infinite; }
@keyframes sdFlicker { 0%, 100% { opacity: .14; } 50% { opacity: .5; } }
.sd-monster { align-self: center; filter: drop-shadow(0 0 34px rgba(255, 196, 0, .55)); position: relative; line-height: 0; }
.sd-logo { position: relative; text-align: center; font-family: var(--font-d); font-size: 64px; line-height: .92;
  color: var(--yellow); letter-spacing: 1px;
  text-shadow: 0 3px 0 #2b1c06, 0 -2px 0 #2b1c06, 3px 0 0 #2b1c06, -3px 0 0 #2b1c06, 0 7px 0 rgba(43, 28, 6, .8), 0 0 42px rgba(255, 196, 0, .5); }
.sd-logo .sd-bolt { -webkit-text-stroke: 0; text-shadow: 0 0 26px rgba(255, 196, 0, .9); }
.sd-tag { position: relative; text-align: center; font-family: var(--font-d); font-size: 27px; color: #fff; margin-top: 2px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.sd-tag b { color: var(--yellow); }
.sd-card { position: relative; display: flex; align-items: center; gap: 12px; background: rgba(20, 14, 4, .88);
  border: 3px solid var(--yellow); border-radius: 18px; padding: 13px 15px; color: #fff; font-weight: 800; font-size: 15px;
  line-height: 1.35; box-shadow: 0 0 24px rgba(255, 196, 0, .25); margin-top: 8px; }
.sd-card b { color: var(--yellow); }
.sd-card-em { font-size: 30px; flex: none; }
.sd-go { position: relative; margin-top: 12px; box-shadow: 0 4px 0 #2b1c06, 0 0 30px rgba(255, 196, 0, .45); }
.sd-login { position: relative; background: #fff; color: var(--ink); }
.sd-foot { position: relative; text-align: center; margin-top: 10px; color: rgba(255, 255, 255, .85);
  font-weight: 800; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.sd-foot i { font-style: normal; color: var(--yellow); }
.sd-foot b { color: #fff; }
.sd-foot .sd-foot-big { font-family: var(--font-d); font-size: 19px; }

/* pack supporter : cœur qui bat, carte qui brille, prix rouge, MERCI en dessous */
.supporter-card { width: 100%; display: flex; align-items: center; gap: 12px;
  text-align: left; font-family: inherit;
  background:
    linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .65) 50%, transparent 68%) no-repeat -220% 0 / 200% 100%,
    linear-gradient(135deg, #ffe3e3, #ffc9cf);
  animation: shineBg 2.8s ease-in-out infinite;
  border: 3px solid var(--ink); border-radius: 18px; padding: 15px 14px; box-shadow: 0 4px 0 var(--sticker), 0 0 0 4px rgba(224, 51, 47, .28); }
.supporter-card:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.sup-em { flex: none; font-size: 38px; filter: drop-shadow(0 2px 0 rgba(43, 28, 6, .2));
  animation: heartBeat 1.25s ease-in-out infinite; transform-origin: center; }
@keyframes heartBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.14); } 50% { transform: scale(1); } }
.sup-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sup-mid b { font-family: var(--font-d); font-size: 18px; }
.sup-perk { font-weight: 900; font-size: 11.5px; color: var(--ink-60); }
.sup-price { flex: none; font-family: var(--font-d); font-size: 16px; background: linear-gradient(135deg, #ff6b6b, #e0332f);
  color: #fff; border: 3px solid var(--ink); border-radius: 99px; padding: 10px 14px; box-shadow: 0 3px 0 var(--sticker); }
.sup-merci { margin-top: 10px; background: var(--card); border: 3px solid var(--ink); border-radius: 18px;
  padding: 13px 15px; box-shadow: 0 3px 0 var(--sticker); transform: rotate(-.4deg); }
.sup-merci b { display: block; font-family: var(--font-d); font-size: 24px; margin-bottom: 3px; }
.sup-merci span { display: block; font-weight: 800; font-size: 13px; line-height: 1.45; color: var(--ink-60); }
.sup-merci span b { display: inline; font-family: inherit; font-size: inherit; color: var(--ink); }

/* solde qui brille (l'en-tête sticky .sheet-head existe déjà plus haut) */
.shine-pill { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-d); font-size: 20px; border: 3px solid var(--ink); border-radius: 99px;
  padding: 9px 18px; box-shadow: 0 3px 0 var(--sticker); background: linear-gradient(135deg, #d8f3ff, #9fe0ff); }
.shine-pill.coins { background: linear-gradient(135deg, #ffe98a, #ffc400); }
.shine-pill::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 34px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: skewX(-22deg); animation: shineSweep 2.6s ease-in-out infinite; }
@keyframes shineSweep { 0% { left: -50px; } 55% { left: calc(100% + 20px); } 100% { left: calc(100% + 20px); } }

/* vitrine 💎 : packs + Zen Pass */
.gemp-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit;
  background: linear-gradient(135deg, #eaf7ff, #d4eeff); border: 3px solid var(--ink); border-radius: 16px;
  padding: 12px; box-shadow: 0 3px 0 var(--sticker); margin-bottom: 9px; }
.zgem-row + .gemp-row { margin-top: 18px; } /* respiration entre le marchand et les packs */
.gemp-row.coinsrow { background: linear-gradient(135deg, #fff3cf, #ffe28f); }
.zpow-row + .gemp-row.coinsrow { margin-top: 18px; } /* idem entre pouvoirs et recharges */
.gemp-row.best { background:
    linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%) no-repeat -220% 0 / 200% 100%,
    linear-gradient(135deg, #d8f3ff, #9fe0ff);
  animation: shineBg 3s ease-in-out infinite; }
.gemp-row.coinsrow.best { background:
    linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, .65) 50%, transparent 68%) no-repeat -220% 0 / 200% 100%,
    linear-gradient(135deg, #ffe98a, #ffc400);
  animation: shineBg 3s ease-in-out infinite; } /* le best des packs pièces reste doré */
.gemp-pass::after { content: ''; position: absolute; top: -60%; bottom: -60%; width: 46px;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: skewX(-22deg); animation: shineSweep 3s ease-in-out infinite; pointer-events: none; }
.gemp-row:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.gemp-em { flex: none; font-size: 27px; }
.gemp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gemp-mid b { font-family: var(--font-d); font-size: 14.5px; }
.gemp-mid span { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.gemp-price { flex: none; font-family: var(--font-d); font-size: 13px; background: var(--yellow);
  border: 2.5px solid var(--ink); border-radius: 99px; padding: 5px 11px; }
.gemp-pass { position: relative; overflow: hidden; width: 100%; display: flex; flex-direction: column; align-items: flex-start;
  gap: 5px; text-align: left; font-family: inherit; background: linear-gradient(135deg, #2b1c06, #4a3312); color: #fff6eb;
  border: 3px solid var(--ink); border-radius: 20px; padding: 17px 16px; margin: 18px 0 8px;
  box-shadow: 0 5px 0 var(--sticker), 0 0 0 4px rgba(255, 196, 0, .55); }
.gemp-pass:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.gp-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-d); font-size: 23px; color: var(--yellow); }
.gp-head i { font-style: normal; font-size: 9.5px; letter-spacing: .6px; background: var(--yellow); color: var(--ink);
  border-radius: 99px; padding: 4px 10px; }
.gp-perk { font-weight: 900; font-size: 13px; opacity: .94; }
.gp-price { align-self: stretch; text-align: center; font-family: var(--font-d); font-size: 17px; margin-top: 9px;
  background: linear-gradient(135deg, #ffe98a, var(--yellow)); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 99px; padding: 11px 14px; box-shadow: 0 3px 0 var(--sticker); }

/* rappels de la feuille « à sec » */
.zgem-tips { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.zgem-tips span { font-weight: 900; font-size: 12.5px; background: var(--paper-2); border: 2.5px solid var(--ink);
  border-radius: 99px; padding: 6px 14px; }
/* bouton fixe */
.zen-far { text-align: center; margin: 10px 0 0; }
.zen-far { font-weight: 900; font-size: 12px; color: var(--ink); }
.zen-far { background: rgba(255, 246, 235, .78); border-radius: 99px; padding: 5px 14px; width: fit-content; margin-left: auto; margin-right: auto; }
/* hors du .screen : son animation d'entrée laisse un transform qui casserait position:fixed */
.zen-cta { position: fixed; left: 50%; transform: translateX(-50%); width: min(456px, calc(100% - 24px));
  bottom: calc(98px + env(safe-area-inset-bottom, 0px)); z-index: 30; }
.zen-cta .btn { position: relative; z-index: 1; box-shadow: 0 4px 0 var(--sticker), 0 8px 22px rgba(43, 28, 6, .28); }
/* fondu derrière le bouton : le chemin s'estompe dessous au lieu d'être coupé net */
.zen-cta::before { content: ''; position: absolute; left: -20px; right: -20px; top: -26px;
  bottom: calc(-98px - env(safe-area-inset-bottom, 0px)); background: linear-gradient(transparent, rgba(228, 239, 255, .9) 55%);
  pointer-events: none; }


.gem-ic { line-height: 1; filter: drop-shadow(0 1px 0 rgba(43,28,6,.35)); }

/* ---- le boss sur le chemin ---- */
.zrow.boss .zdot { background: #2b1c06; color: var(--yellow); }
.zrow.boss.done .zdot { background: #2fbe5f; color: #fff; }
.zboss { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit;
  background: linear-gradient(135deg, #3a2a12, #17100a); color: #fff6eb; border: 3px solid var(--ink);
  border-radius: 18px; padding: 10px 12px; box-shadow: 0 4px 0 var(--sticker), 0 0 0 3px rgba(77, 141, 255, .5); }
.zboss:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.zboss:disabled { opacity: .55; }
.zb-face { flex: none; font-size: 32px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.zb-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zb-tag { font-family: var(--font-d); font-size: 8.5px; letter-spacing: .6px; color: #8fc1ff; }
.zb-mid b { font-family: var(--font-d); font-size: 15px; }
.zb-sub { font-weight: 900; font-size: 10px; opacity: .7; }
.zb-loot { display: flex; align-items: center; gap: 3px; margin-top: 3px; font-family: var(--font-d); font-size: 11px; color: #cfe3ff; }
.zb-go { flex: none; font-size: 20px; background: linear-gradient(135deg, #4d8dff, #1d5be0); color: #fff; border: 2.5px solid var(--ink);
  border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; }

/* ---- feuilles : pouvoirs, marchand, stats ---- */
.zpow-row, .zgem-row { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; font-family: inherit;
  background: var(--card); border: 2.5px solid var(--ink); border-radius: 16px; padding: 12px;
  box-shadow: 0 3px 0 var(--sticker); margin-bottom: 9px; }
.zgem-row:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.zgem-row.off { opacity: .5; }
.zpow-em, .zgem-em { flex: none; font-size: 26px; }
.zpow-mid, .zgem-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zpow-mid b, .zgem-mid b { font-family: var(--font-d); font-size: 14px; }
.zpow-mid span, .zgem-mid span { font-weight: 900; font-size: 10.5px; color: var(--ink-60); }
.zpow-cost, .zgem-cost { flex: none; display: flex; align-items: center; gap: 3px; font-family: var(--font-d); font-size: 13px;
  background: var(--yellow); border: 2.5px solid var(--ink); border-radius: 99px; padding: 4px 10px; }
.zgem-cost { background: linear-gradient(135deg, #d8f3ff, #a8e4ff); }
.zstat-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.zstat-hero > div { text-align: center; background: linear-gradient(135deg, #ffd83e, var(--yellow));
  border: 3px solid var(--ink); border-radius: 16px; padding: 10px 4px; box-shadow: 0 3px 0 var(--sticker); }
.zstat-hero b { display: block; font-family: var(--font-d); font-size: 22px; line-height: 1; }
.zstat-hero small { font-size: 8px; font-weight: 900; opacity: .7; letter-spacing: .3px; }
.zstat-line { display: flex; align-items: center; gap: 9px; padding: 9px 4px; border-bottom: 2px dashed rgba(43,28,6,.16); }
.zstat-line:last-child { border-bottom: 0; }
.zstat-line > span { flex: none; font-size: 17px; width: 22px; text-align: center; }
.zstat-line b { flex: 1; font-weight: 900; font-size: 13px; }
.zstat-line i { font-style: normal; font-family: var(--font-d); font-size: 14px; }

/* ---- pendant un niveau : vies du boss + achat de pouvoirs ---- */
.bz-lives { display: flex; gap: 2px; margin-left: auto; }
.bz-quit { flex: none; width: 32px; height: 32px; border-radius: 50%; font-family: var(--font-d); font-size: 14px;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--sticker); }
.bz-quit:active { transform: translateY(2px); box-shadow: none; }
.bz-lives i { font-style: normal; font-size: 15px; filter: grayscale(1); opacity: .35; }
.bz-lives i.on { filter: none; opacity: 1; }
.boss-taunt { text-align: center; font-weight: 900; font-size: 12.5px; background: #2b1c06; color: #fff6eb;
  border-radius: 99px; padding: 6px 14px; margin: 0 auto 8px; max-width: 92%; animation: zsPop .45s cubic-bezier(.34,1.9,.64,1) both; }
.blitz-play.boss-run .qcard2 { box-shadow: 0 4px 0 var(--sticker), 0 0 0 4px rgba(255,196,0,.35); }
.zen-run { min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: linear-gradient(180deg, rgba(223, 237, 255, .86), rgba(232, 241, 255, .55) 38%, rgba(223, 237, 255, .84)); }
.zen-run .bz-qwrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 0; }
.zen-prog { position: relative; flex: none; height: 24px; margin-top: 10px; background: var(--paper-2);
  border: 2.5px solid var(--ink); border-radius: 99px; overflow: hidden; box-shadow: 0 2px 0 var(--sticker); transform: rotate(-.3deg); }
.zen-prog i { display: block; height: 100%; background: linear-gradient(90deg, #7fb2ff, #2f6bff); transition: width .4s ease; }
.zen-prog span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-d); font-size: 11px; letter-spacing: .4px; }
.zen-powdock { flex: none; display: flex; align-items: stretch; gap: 9px;
  background: rgba(255, 251, 243, .88); border: 2.5px solid var(--ink); border-radius: 20px; padding: 10px;
  box-shadow: 0 3px 0 var(--sticker); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin-top: 10px; transform: rotate(.3deg); }
.zpw-wallet { flex: none; align-self: center; }
.zpw-wallet { display: flex; align-items: center; gap: 4px; font-family: var(--font-d); font-size: 13px;
  background: var(--paper-2); border: 2.5px solid var(--ink); border-radius: 99px; padding: 5px 11px; }
.zpw { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  line-height: 1.15; font-family: inherit;
  background: linear-gradient(180deg, #fff, #f6eddd); border: 3px solid var(--ink); border-radius: 16px;
  padding: 9px 6px; box-shadow: 0 4px 0 var(--sticker); }
.zpw:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.zpw i { font-style: normal; font-size: 24px; }
.zpw b { font-family: var(--font-d); font-size: 11px; letter-spacing: .3px; }
.zpw span { display: flex; align-items: center; gap: 3px; font-family: var(--font-d); font-size: 10.5px; opacity: .8; }
.zpw.off { opacity: .42; }
.zs-chest.boss { background: #2b1c06; color: #fff6eb; }

/* coffre décroché dans la feuille de résultat */
.zs-chest { background: #f6ecff; border: 3px solid var(--ink); border-radius: 16px; padding: 10px 14px; margin: 8px auto 2px;
  box-shadow: 0 3px 0 var(--sticker); font-size: 30px; line-height: 1.1; }
.zs-chest b { display: block; font-family: var(--font-d); font-size: 15px; }
.zs-chest span { display: block; font-weight: 900; font-size: 11px; color: var(--ink-60); }
.zrow.goal .zcard { border-color: #7C3AED; box-shadow: 0 3px 0 #7C3AED; }
.zdot-goal { position: absolute; left: 50%; transform: translateX(-50%); bottom: -9px; background: #7C3AED; color: #fff;
  border: 2px solid var(--ink); border-radius: 99px; font-style: normal; font-family: var(--font-d); font-size: 7px;
  letter-spacing: .3px; padding: 1px 5px; white-space: nowrap; }

/* ---- filtres photo : la bande qu'on fait défiler sous l'aperçu ---- */
.filt-row { display: flex; gap: 7px; overflow-x: auto; padding: 8px 2px 4px; margin: 0 -2px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.filt-row::-webkit-scrollbar { display: none; }
.filt-chip { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 60px; padding: 7px 9px; border-radius: 14px; font-family: inherit; font-weight: 900;
  font-size: 10.5px; letter-spacing: .2px; color: var(--ink); background: var(--card);
  border: 2.5px solid var(--ink); box-shadow: 0 2px 0 var(--sticker); cursor: pointer; }
.filt-chip .filt-em { font-size: 21px; line-height: 1; }
.filt-chip.on { background: var(--yellow); box-shadow: 0 3px 0 var(--sticker); transform: translateY(-1px); }
.filt-chip:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--sticker); }

/* ============================================================
   MODE SOMBRE — CONTRASTE
   ------------------------------------------------------------
   Audit de contraste sur tout le DOM : ~90 textes sous le seuil, dus à DEUX
   fautes systématiques (jamais à la couleur de fond, qui est bonne) :
     1. des surfaces CLAIRES écrites en dur (blanc, crème, pastel, jaune) que
        le mode sombre n'a jamais reprises → le texte est passé en crème et se
        retrouve crème sur crème ;
     2. du texte foncé posé en dur qui atterrit sur du foncé.
   Règle tenue ici : sur une surface de MARQUE (jaune, vert, pastel) le texte
   reste l'ENCRE FONCÉE — c'est le contraste qui compte, pas le thème. Les
   surfaces neutres claires, elles, deviennent sombres.
   ============================================================ */

/* 1) surfaces de marque conservées, texte remis en encre foncée */
body.theme-dark .shop-tag, body.theme-dark .bg-tag, body.theme-dark .th-chip,
body.theme-dark .qz-soon-tag, body.theme-dark .zap-pill, body.theme-dark .cta-gem,
body.theme-dark .seg-opt.on, body.theme-dark .pk-tag, body.theme-dark .emote-tag,
body.theme-dark .family-card, body.theme-dark .family-card .fc-em,
body.theme-dark .pack-row.free, body.theme-dark .pack-row.free b,
body.theme-dark .pack-row.free .pk-name, body.theme-dark .wall-note,
body.theme-dark .wall-note b, body.theme-dark .zen-far {
  color: #2b1c06;
}
/* le « BIENTÔT » était crème pâle sur crème : il lui faut son propre fond */
body.theme-dark .qz-soon-tag { background: var(--yellow); }

/* 2) la carte du Solo Zen gardait TOUTES ses surfaces claires
      (bulles crème, rangées beiges) — c'est le « blanc sur blanc » signalé */
body.theme-dark .zcard {
  background: linear-gradient(180deg, #262b3a, #1e222e);
  border-color: #39405280; color: var(--ink);
}
body.theme-dark .zcard:disabled, body.theme-dark .zcard[disabled] {
  background: linear-gradient(180deg, #1d212c, #171a23);
}
body.theme-dark .zdot { background: #2b3040; color: var(--ink); border-color: #454d63; }
body.theme-dark .zc-stars i { color: rgba(242, 237, 228, .26); }
body.theme-dark .zc-sub { color: var(--ink-60); }

/* 3) le solde de la boutique : encre foncée posée en dur sur fond sombre */
body.theme-dark .sheet-head b, body.theme-dark .shop-balance,
body.theme-dark .shop-balance b { color: var(--ink); }

/* --- carte du Solo Zen : les états sont écrits en (0,3,0), il faut monter à (0,4,0).
       ⚠️ `.zrow.cur .zdot` valait `background: var(--ink)` : en sombre l'encre EST
       le crème, donc la bulle du niveau courant devenait crème à texte bleu pâle. --- */
body.theme-dark .zrow.cur .zcard { background: linear-gradient(135deg, #2f5fd0, #1d3f96); color: var(--ink); }
body.theme-dark .zrow.cur .zcard .zc-sub { color: #cfe3ff; }
body.theme-dark .zrow.cur .zdot { background: #4d8dff; color: #0e1220; }
body.theme-dark .zrow.lock .zdot { background: #2b3040; color: var(--ink-60); }
body.theme-dark .zrow.done .zdot { background: #2fbe5f; color: #0e1220; }
body.theme-dark .zrow.chest .zdot { background: #7C3AED; color: #fff; }
body.theme-dark .zrow.cur .zc-stars i { color: rgba(255, 255, 255, .34); }

/* pastilles de solde en tête du Solo Zen : dégradés clairs (bleu glacé, or) avec
   du texte devenu crème → sur une surface claire, l'encre reste foncée. */
body.theme-dark .zt-pill.coins, body.theme-dark .zt-pill.coins b,
body.theme-dark .zt-pill.gems, body.theme-dark .zt-pill.gems b { color: #2b1c06; }
/* les récompenses du prochain boss sont dans des pastilles BLANCHES (.zg-loot i) */
body.theme-dark .zg-loot i { color: #2b1c06; }

/* ============================================================
   MODE NUIT — LES TEINTES SEMANTIQUES (vert « reussi », bleu « info », dore)
   ------------------------------------------------------------
   Ces elements posaient un fond CLAIR en dur. En mode nuit --ink devient creme :
   ca donnait du blanc sur vert clair ou bleu clair, illisible. Deux traitements,
   selon une regle objective, la luminance du fond :
     - teinte tres pale (> 0,85) = une SURFACE -> on l'assombrit, le texte creme reste ;
     - teinte saturee = un BADGE fait pour ressortir -> on garde la couleur et on force
       le texte fonce, exactement ce que le mode nuit fait deja aux boutons jaunes.
   ============================================================ */
/* surface verte -> fond sombre teinte */
body.theme-dark .bz-cc.on:not(.opp),
body.theme-dark .bz-vs-col.winner,
body.theme-dark .bzh-side.on,
body.theme-dark .chrono-banner.win,
body.theme-dark .dg-badge.done,
body.theme-dark .dh-chip.ok,
body.theme-dark .gen-card .choices span.good,
body.theme-dark .np-p.me,
body.theme-dark .party-seat.done,
body.theme-dark .perso-in.good,
body.theme-dark .perso-verdict.ok,
body.theme-dark .ref-welcome,
body.theme-dark .rv-choice.good,
body.theme-dark .stat-box.win,
body.theme-dark .streak-pill.safe,
body.theme-dark .tool-btn.free,
body.theme-dark .zl.done {
  background: #1d3226; color: var(--ink);
}
/* surface bleue -> fond sombre teinte */
body.theme-dark .a2hs-how,
body.theme-dark .chrono-banner.tie,
body.theme-dark .social-chip,
body.theme-dark .zs-chest {
  background: #1e2740; color: var(--ink);
}
/* surface dorée -> fond sombre teinte */
body.theme-dark .av-opt.sel,
body.theme-dark .bet-box,
body.theme-dark .bz-cc.on.opp,
body.theme-dark .bz-clock,
body.theme-dark .bzh-side.on.opp,
body.theme-dark .daily-pill,
body.theme-dark .delta-chip.gold,
body.theme-dark .dg-badge.fomo,
body.theme-dark .dg-row.me,
body.theme-dark .duel-row.attention,
body.theme-dark .emote-tag.price,
body.theme-dark .fiche-flex,
body.theme-dark .gpick.on,
body.theme-dark .lg-row.me,
body.theme-dark .ml-bonus.flash,
body.theme-dark .ml-hint,
body.theme-dark .mo-st-best,
body.theme-dark .pack-row.best,
body.theme-dark .ps-hint,
body.theme-dark .react-toast,
body.theme-dark .round-row.current,
body.theme-dark .rv-choice.bad,
body.theme-dark .stat-box.lose,
body.theme-dark .streak-chip,
body.theme-dark .taunt-bubble,
body.theme-dark .timer-pill.warn,
body.theme-dark .tool-btn,
body.theme-dark .vic-mini,
body.theme-dark .zen-bg,
body.theme-dark .zen-offline,
body.theme-dark .zl.done.zero {
  background: #332a19; color: var(--ink);
}
/* badge verte -> couleur gardee, texte fonce */
body.theme-dark .gs-wtl b.w {
  color: #14161f;
}
/* badge bleue -> couleur gardee, texte fonce */
body.theme-dark .prem-chip,
body.theme-dark .sec-band.games {
  color: #14161f;
}
/* badge dorée -> couleur gardee, texte fonce */
body.theme-dark .cal-cell.played.h1,
body.theme-dark .cal-cell.played.h2,
body.theme-dark .chrono-banner.lose,
body.theme-dark .cta-duel,
body.theme-dark .cta-duel.cta-img,
body.theme-dark .daily-home,
body.theme-dark .dgi-card,
body.theme-dark .emote-card.st-poor .emote-tag.price,
body.theme-dark .emote-tag.locked,
body.theme-dark .fcd-legend .lg.miss,
body.theme-dark .gs-wtl b.l,
body.theme-dark .perso-in.bad,
body.theme-dark .perso-verdict.ko,
body.theme-dark .pod-col.p2 .pod-step,
body.theme-dark .pod-col.p3 .pod-step,
body.theme-dark .pr-photo,
body.theme-dark .qcard2 .qfuse,
body.theme-dark .sk-cell.hinted.hl,
body.theme-dark .sk-lives.low,
body.theme-dark .tc-bar i.ko {
  color: #14161f;
}

/* ---------- 👑 le film de victoire sur un boss ---------- */
.bossvid { position: relative; width: min(86vw, 340px); aspect-ratio: 9 / 16; max-height: 78vh;
  border: 3.5px solid var(--ink); border-radius: 22px; overflow: hidden;
  box-shadow: 0 8px 0 var(--sticker); background: #131a35; }
.bossvid-v { display: block; width: 100%; height: 100%; object-fit: cover; }
.bossvid-skip { position: absolute; right: 9px; bottom: 9px; font-family: inherit; font-weight: 900;
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink); background: var(--yellow);
  border: 2.5px solid var(--ink); border-radius: 99px; padding: 7px 14px; box-shadow: 0 3px 0 var(--ink); }
.bossvid-skip:active { transform: translateY(3px); box-shadow: none; }
/* le cadre est déjà sombre : rien à inverser en mode nuit, on garde juste l'encre du bouton */
body.theme-dark .bossvid-skip { color: #14161f; }

/* ============================================================
   🎓 TUTORIEL — les 90 premières secondes
   ------------------------------------------------------------
   ⚠️ Dans ce CSS, `.center` ne fait QUE `text-align: center` (l.68) : il ne
   centre rien verticalement. Un écran plein qui se tient debout tout seul doit
   donc être une colonne flex, comme le fait déjà `.screen.no-nav.result-screen`
   (l.391). C'est ce que fait `.tt-screen`.
   Une seule colonne de 340 px de large, un rythme vertical unique porté par le
   `gap` du conteneur — aucune marge posée à la main sur les enfants, c'est ce
   qui produit des espacements incohérents.
   ============================================================ */
.tt-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 20px calc(env(safe-area-inset-bottom, 0px) + 22px); }
/* tout enfant à largeur limitée reste centré : c'est ce qui manquait */
.tt-screen > * { width: 100%; max-width: 340px; margin-inline: auto; }
/* …sauf les éléments qui doivent garder leur taille propre */
.tt-screen > .avatar, .tt-screen > .tt-faces, .tt-screen > .tt-score,
.tt-screen > .tt-chal-em, .tt-screen > .reveal-robot { width: auto; max-width: none; }

.tt-chal-em { font-size: 38px; line-height: 1; animation: pulse 1.6s infinite; }
.tt-faces { display: flex; align-items: center; justify-content: center; gap: 16px; }
.tt-vs { font-family: var(--font-d); font-size: 19px; opacity: .5; }

.tt-h1 { font-family: var(--font-d); font-size: 26px; line-height: 1.12; margin: 0; }
.tt-sub { font-weight: 800; font-size: 14px; line-height: 1.55; margin: 0; }
.tt-sub.small { font-size: 12.5px; }
.tt-step { font-weight: 900; font-size: 10px; letter-spacing: .12em; opacity: .55; margin: 0; }
.tt-screen > .tt-sub:has(> .tt-tag:only-child) { margin-bottom: -6px; }
.tt-tag { display: inline-block; font-weight: 900; font-size: 9.5px; letter-spacing: .06em; vertical-align: 2px;
  background: var(--ink); color: var(--paper); border-radius: 99px; padding: 3px 8px; margin-right: 5px; }
/* le bouton principal garde la largeur de la colonne, jamais plus */
.tt-screen .btn.block { max-width: 340px; }

/* ---- le duel : une page normale, pas un écran de tuto ---- */
.tt-duel { min-height: 100dvh; display: flex; flex-direction: column; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 22px; }
.tt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 900; font-size: 13px; }
.tt-bar > span { display: flex; align-items: center; gap: 6px; }
.tt-bar b { font-family: var(--font-d); font-size: 18px; line-height: 1; }
.tt-prog { font-size: 11px; opacity: .55; letter-spacing: .04em; }
/* La barre de score reste en haut, et le couple question+réponses se centre dans
   l'espace qui reste : les deux marges `auto` se partagent le vide, ce qui met les
   réponses à hauteur du pouce au lieu de laisser un trou en bas. */
.tt-duel .qcard2 { margin-top: auto; }
.tt-duel .answers { margin-bottom: auto; }
/* ⚠️ .av-xs n'est défini QUE dans .h2h-table (l.1276) : ailleurs l'image garde sa
   taille native (425 px) et fait exploser la ligne. On dimensionne donc ici. */
.tt-bar .avatar, .tt-msg .avatar { width: 24px; height: 24px; flex: 0 0 auto;
  border-width: 2px; box-shadow: none; }

/* ---- le score final ---- */
.tt-score { display: flex; align-items: flex-start; justify-content: center; gap: 18px; }
.tt-sc { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; }
.tt-sc b { font-family: var(--font-d); font-size: 32px; line-height: 1; }
.tt-sc span { font-weight: 900; font-size: 11.5px; opacity: .7; }
.tt-sc.w b { color: var(--green-d); }
/* le tiret se cale sur la ligne des CHIFFRES, pas au milieu des avatars */
.tt-score .tt-vs { align-self: flex-start; margin-top: 62px; }

/* ---- les vannes : le moment fort ---- */
.tt-jabs { display: flex; flex-direction: column; gap: 8px; }
.tt-jab { display: block; width: 100%; font-family: inherit; font-weight: 900; font-size: 13.5px;
  line-height: 1.35; text-align: left; color: inherit; background: #fff;
  border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px; box-shadow: 0 3px 0 var(--sticker); }
.tt-jab:active { transform: translateY(3px); box-shadow: none; }
.tt-jab.sent { background: var(--yellow); }
.tt-jab:disabled { opacity: .4; }
.tt-jab.sent:disabled { opacity: 1; }
body.theme-dark .tt-jab { background: var(--card); }
body.theme-dark .tt-jab.sent { background: var(--yellow); color: #14161f; }

/* ---- l'échange de vannes ---- */
.tt-thread { display: flex; flex-direction: column; gap: 9px; }
.tt-msg { max-width: 88%; font-weight: 900; font-size: 13.5px; line-height: 1.35; text-align: left;
  border: 3px solid var(--ink); border-radius: 15px; padding: 10px 13px;
  box-shadow: 0 3px 0 var(--sticker); display: flex; align-items: center; gap: 8px; }
.tt-msg.me { align-self: flex-end; background: var(--yellow); border-bottom-right-radius: 5px; }
.tt-msg.them { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; }
body.theme-dark .tt-msg.me { color: #14161f; }
body.theme-dark .tt-msg.them { background: var(--card); }

/* ---- la bulle d'aide : une seule à l'écran ---- */
.tt-hint { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h, 74px) + 12px); z-index: 90;
  display: flex; align-items: center; gap: 10px; max-width: 420px; margin-inline: auto;
  font-weight: 900; font-size: 13px; line-height: 1.4; text-align: left;
  background: var(--yellow); color: #2b1c06; border: 3px solid var(--ink); border-radius: 16px;
  padding: 11px 13px; box-shadow: 0 5px 0 var(--sticker); animation: hintIn .26s ease both; }
.tt-hint.out { animation: hintOut .22s ease both; }
.tt-hint-x { flex: 0 0 auto; font-family: inherit; font-weight: 900; font-size: 13px; color: #2b1c06;
  background: rgba(0, 0, 0, .12); border: 0; border-radius: 99px; width: 26px; height: 26px; }
@keyframes hintIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hintOut { to { opacity: 0; transform: translateY(10px); } }

/* ---------- les deux captures qui montrent la photo de vainqueur ---------- */
/* ⚠️ les deux captures n'ont PAS le même ratio (une vue rognée + une capture de
   téléphone entière). Forcer un 9:16 en `cover` rognait un tiers de la première :
   on aligne donc sur la HAUTEUR et chacune garde ses proportions. */
.tt-shots { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
.tt-shot { margin: 0; display: flex; flex-direction: column; align-items: center; }
.tt-shot img { display: block; height: 208px; width: auto; max-width: 100%;
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--sticker); background: var(--card); }
.tt-shot figcaption { font-weight: 900; font-size: 11px; opacity: .7; margin-top: 5px; }
/* aucune image déposée : on ne laisse pas un blanc au milieu de l'écran */
.tt-shots:empty { display: none; }

/* ---------- la visite guidée : la bulle qui suit les onglets ---------- */
.tt-tour { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h, 74px) + 12px); z-index: 95;
  max-width: 420px; margin-inline: auto; background: var(--yellow); color: #2b1c06;
  border: 3px solid var(--ink); border-radius: 18px; padding: 13px 14px 11px;
  box-shadow: 0 6px 0 var(--sticker); animation: hintIn .26s ease both; }
.tt-tour-txt { font-weight: 800; font-size: 13.5px; line-height: 1.45; }
.tt-tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.tt-tour-dots { display: flex; gap: 5px; margin-right: auto; }
.tt-tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(43, 28, 6, .28); }
.tt-tour-dots i.on { background: #2b1c06; transform: scale(1.25); }
.tt-tour-skip { font-family: inherit; font-weight: 900; font-size: 12px; color: rgba(43, 28, 6, .6);
  background: none; border: 0; padding: 6px 4px; }
.tt-tour-next { font-family: inherit; font-weight: 900; font-size: 12.5px; color: var(--paper);
  background: var(--ink); border: 0; border-radius: 99px; padding: 8px 16px; }
.tt-tour-next:active { transform: translateY(2px); }

/* ---------- la pastille de visite : plus grande, plus lisible ---------- */
.tt-tour { padding: 16px 17px 13px; border-radius: 20px; max-width: 460px;
  box-shadow: 0 7px 0 var(--sticker); }
.tt-tour-txt { font-size: 15.5px; line-height: 1.5; }
.tt-tour-foot { margin-top: 14px; gap: 10px; }
.tt-tour-step { font-weight: 900; font-size: 12px; opacity: .55; margin-right: auto; letter-spacing: .04em; }
.tt-tour-skip { font-size: 13px; }
.tt-tour-next { font-size: 14px; padding: 10px 20px; }
/* la roue crantée qu'on désigne à l'arrêt « réglages » */
.tt-pulse { animation: ttPulse 1.1s ease-in-out infinite; }
@keyframes ttPulse { 0%,100% { transform: none; } 50% { transform: scale(1.16); } }

/* ---------- les blocs « EXEMPLE » injectés dans les écrans vides ---------- */
/* Décoration pure : aucune donnée, rien en base. Étiqueté EXEMPLE pour que
   personne ne croie que ces potes existent. */
.tt-demo { background: var(--card, #fff); border: 3px dashed var(--ink); border-radius: 16px;
  padding: 10px 12px 12px; margin: 0 0 14px; box-shadow: 0 4px 0 var(--sticker); }
.tt-demo-tag { font-weight: 900; font-size: 9.5px; letter-spacing: .1em; opacity: .55; margin-bottom: 8px; }
.tt-demo-row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 2px dashed rgba(128, 128, 128, .22); }
.tt-demo-row:last-child { border-bottom: 0; }
.tt-demo-row .avatar { width: 34px; height: 34px; flex: 0 0 auto; border-width: 2px; box-shadow: none; }
.tt-demo-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; text-align: left; }
.tt-demo-mid b { font-size: 13.5px; }
.tt-demo-mid span { font-size: 11px; opacity: .65; font-weight: 800; }
.tt-demo-r { font-weight: 900; font-size: 11.5px; opacity: .7; flex: 0 0 auto; }
.tt-demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tt-demo-stats span { display: flex; flex-direction: column; align-items: center; font-weight: 900;
  font-size: 10px; opacity: .7; }
.tt-demo-stats b { font-family: var(--font-d); font-size: 20px; opacity: 1; }

/* ============================================================
   🏁 MULTI — LE CLASSEMENT EN BARRES
   ------------------------------------------------------------
   Le format vient des captures de Maxime (barres proportionnelles, médaillon au
   sommet, pastille de score en bas, pastille dorée = MON RANG), mais l'HABILLAGE
   est celui du jeu : papier crème, aplats francs, contours à l'encre et relief
   « autocollant ». Le dégradé bleu de la référence faisait copie.
   Les 6 couleurs de joueur sont celles des confettis (juice.js) : c'est la
   palette maison, elle revient partout dans l'app.

   ⚠️ préfixe `mx-` et PAS `lb-` : `.lb-bar` existe déjà (barre de progression du
   backstage, l.2436) avec height:10px et overflow:hidden — la collision écrasait
   les barres et rognait la pastille de rang.
   ============================================================ */
.mx-screen { min-height: 100dvh; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px calc(env(safe-area-inset-bottom, 0px) + 16px);
  /* pas de fond propre : on laisse l'illustration comic de l'app derrière */ }
.mx-top { text-align: center; font-weight: 900; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-60); }
.mx-goal { text-align: center; font-family: var(--font-d); font-size: 25px; margin-top: 1px; }

.mx-bars { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center;
  gap: 10px; padding: 40px 2px 0; min-height: 0; }
/* ⚠️ PAS de `height: 100%` ici : `.mx-bars` est un élément flex sans hauteur définie,
   donc le pourcentage retombe sur `auto` = la hauteur du contenu. Mesuré : la colonne
   sortait à 110,5 px au lieu des 759 px de la zone, et les barres 100/50/75 % tombaient
   toutes sous le plancher de 62 px — trois barres identiques. `align-items: stretch`
   sur le parent suffit à remplir, et la hauteur des barres est calculée en pixels
   dans `mixBoard`/`mixEnd`. */
.mx-col { flex: 1 1 0; min-width: 0; max-width: 86px; display: flex;
  flex-direction: column; align-items: center; justify-content: flex-end; }
/* à 2 ou 3 joueurs, 86 px laissait le graphe flotter au milieu d'un grand vide */
.mx-bars.n2 .mx-col { max-width: 132px; }
.mx-bars.n3 .mx-col { max-width: 106px; }

/* ⚠️ `flex: 0 0 auto` OBLIGATOIRE : la barre est un élément flex dans une colonne,
   donc sa `height` est traitée comme une base flexible et elle s'étirait pour remplir
   la colonne — toutes les barres sortaient à la même hauteur malgré des scores
   différents (mesuré : 688 px pour 100 % ET pour 50 %).
   `min-height` : à 0 point le médaillon flotterait dans le vide. */
.mx-bar { flex: 0 0 auto; position: relative; width: 100%; height: 0; min-height: 62px;
  border: 3px solid var(--ink); border-top-left-radius: 999px; border-top-right-radius: 999px;
  border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
  box-shadow: 0 4px 0 var(--sticker);
  transition: height .95s cubic-bezier(.22, 1.1, .36, 1); }
/* les 6 accents maison — aplats francs, pas de dégradé */
.mx-bar.c0 { background: var(--yellow); }
.mx-bar.c1 { background: #4d7cff; }
.mx-bar.c2 { background: var(--green); }
.mx-bar.c3 { background: #ff8a00; }
.mx-bar.c4 { background: #ff5ca8; }
.mx-bar.c5 { background: var(--red); }
/* Un reflet clair sur le haut de la barre. ⚠️ Plafonné en pixels et fondu à zéro :
   à 34 % d'une barre de 677 px le liseré faisait 230 px et se coupait net au milieu
   — ça se lisait comme un bug d'affichage, pas comme un volume. */
.mx-bar::after { content: ''; position: absolute; inset: 3px 3px auto; height: 30%; max-height: 110px;
  border-radius: 999px 999px 40% 40%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .40), rgba(255, 255, 255, 0)); }

/* le médaillon posé en débord sur le sommet — même carrosserie que les avatars du jeu */
.mx-face { position: absolute; left: 50%; top: 0; transform: translate(-50%, -54%);
  width: 100%; max-width: 72px; aspect-ratio: 1; border-radius: 50%;
  background: var(--card); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--sticker);
  padding: 3px; box-sizing: border-box; }
.mx-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mx-col.me .mx-face { background: var(--yellow); }

/* la pastille dorée = mon rang */
.mx-rank { position: absolute; right: -8px; top: -8px; min-width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-d);
  font-size: 16px; color: var(--ink); background: var(--yellow);
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--sticker); }

/* la pastille de score, sous la barre — comme les chips du jeu */
.mx-score { margin-top: 13px; width: 100%; text-align: center; font-family: var(--font-d);
  font-size: 17px; color: var(--ink); background: var(--card);
  border: 3px solid var(--ink); border-radius: 999px; padding: 5px 4px;
  box-shadow: 0 3px 0 var(--sticker); }
.mx-col.me .mx-score { background: var(--yellow); }

/* ---- la rangée « qui a répondu » ---- */
.mx-wait { display: flex; align-items: flex-end; justify-content: center; gap: 12px; flex-wrap: wrap; }
.mx-w { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 88px; }
.mx-w-face { position: relative; width: 66px; height: 66px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--sticker);
  padding: 3px; box-sizing: border-box; }
.mx-w-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mx-w.me .mx-w-face { background: var(--yellow); }
.mx-w-ok { position: absolute; right: -5px; bottom: -5px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); border: 3px solid var(--ink); display: flex; align-items: center;
  justify-content: center; font-size: 12px; color: #fff;
  animation: mxPop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.mx-w-nm { font-weight: 900; font-size: 12px; color: var(--ink); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes mxPop { from { transform: scale(0); } to { transform: scale(1); } }

.mx-fun { text-align: center; font-weight: 800; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-60); max-width: 330px; margin: 6px auto 0; }
/* Maxime : « déborde pas sur chambrer ». Les pastilles de score arrivaient à ras des
   boutons : on met un vrai palier entre le graphe et la zone d'action. */
/* ⚠️ La marge est ici et PLUS en style inline sur le bouton : `style="margin:0 auto"`
   écrasait le `margin-top` de cette règle (l'inline gagne toujours) et le bouton
   touchait la pastille de score — mesuré : écart de 0 px. */
.mx-taunt { max-width: 320px; margin: 20px auto 0; }
.mx-actions { display: flex; gap: 9px; max-width: 340px; margin: 20px auto 0; }

/* ---------- MIX : la question en direct ---------- */
.mix-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mix-q { font-family: var(--font-d); font-size: 19px; }
.mix-goal { font-weight: 900; font-size: 11.5px; opacity: .6; }
/* le chrono de la question : une barre qui se vide, plus lisible qu'un compte à rebours */
.mix-chrono-wrap { height: 8px; border-radius: 99px; background: var(--ink-30); overflow: hidden; }
.mix-chrono-wrap i { display: block; height: 100%; border-radius: 99px; background: var(--yellow);
  transition: width 1.1s linear; }
.ans.mine { outline: 4px solid var(--yellow); outline-offset: -4px; }
/* Maxime : « quand c'est œuvre d'art ou personnalité, adapte qu'on voit bien l'image »
   — l'image était en `.q-img` nu, plafonné à 96 px : illisible pour un tableau ou un
   visage à reconnaître. On reprend le gabarit `xl` déjà utilisé ailleurs dans l'app.
   Et « fait gaffe que ce soit clean l'espace » : la carte absorbe le mou au lieu de
   laisser un trou entre les réponses et la rangée des joueurs. */
#mix-screen .qcard2 { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  max-height: 34vh; }
#mix-screen .qcard2 .qbody { flex: 1 1 auto; min-height: 0; justify-content: center; }
/* avec une image, la carte a droit à bien plus de place : c'est l'image qu'on vient lire.
   ⚠️ Plafonds réglés en mesurant : à 54vh / 330px la page débordait de quelques pixels
   une fois les 4 réponses et la bande des joueurs empilées. */
#mix-screen.has-img .qcard2 { max-height: 48vh; }
#mix-screen .q-img.xl { max-height: min(34vh, 290px); }
@media (max-height: 740px) { #mix-screen .q-img.xl { max-height: 26vh; } }
/* Le mou va aux BOUTONS DE RÉPONSE, pas dans un trou. Le faire absorber par la carte
   donnait un grand rectangle blanc (mesuré : 341 px de vide autour d'une ligne de
   texte) ; ici les boutons grandissent — plus lisibles et plus faciles à toucher.
   ⚠️ Trois pièges vérifiés au passage :
   - plafonner `.ans` en étirant les rangées creuse un vide ENTRE les deux rangées
     (mesuré : 274 px) : la rangée grandit pendant que le bouton reste bloqué.
   - laisser les réponses grandir SANS plafond donne l'inverse : des boutons de 156 px
     presque vides pour « De bague ». Donc les réponses ne grandissent pas du tout…
   - …mais elles doivent pouvoir se COMPRIMER (`flex: 0 1 auto`, jamais `0 0 auto`,
     sinon la page débordait dès qu'une image s'affichait).
   Le mou restant va à la bande des joueurs, qu'il voulait justement plus présente. */
#mix-screen .answers { flex: 0 1 auto; min-height: 0; }
#mix-screen .ans { min-height: 78px; }
/* « au plus proche » en salon : une estimation à taper, pas 4 boutons. On réutilise
   `.np-in` / `.np-unit` du mode solo pour garder exactement la même carrosserie. */
#mix-screen .np-answer { display: flex; flex-direction: column; gap: 10px; }
#mix-screen .np-answer .np-inrow { margin-top: 0; }
/* la réponse exacte et l'écart de chacun, sur le classement */
.mx-exact { text-align: center; font-family: var(--font-d); font-size: 20px; color: var(--ink); margin-top: 2px; }
.mx-mine { text-align: center; font-weight: 900; font-size: 12.5px; color: var(--ink-60); margin-top: 2px; }
.mx-w-gap, .mx-gap { display: block; text-align: center; font-weight: 900; font-size: 11px; color: var(--ink-60); }
#mix-screen .mix-wait { flex: 1 1 auto; margin-top: 0; display: flex; flex-direction: column;
  justify-content: flex-end; min-height: 0; }
/* Maxime : « j'ai vu que c'était petit et en bas de l'écran, met ça plus gros ».
   La rangée des joueurs n'est plus un détail décoratif : c'est là qu'on lit le
   score des autres pendant qu'on joue. Donc grand, et pas collé au bas. */
/* ⚠️ Le pointillé est porté par le TITRE, pas par `.mix-wait` : la bande grandit pour
   absorber le mou, et un `border-top` posé dessus restait accroché tout en haut, loin
   des avatars — ça creusait un trou juste sous le trait. */
.mix-wait { margin-top: auto; padding: 0 4px 6px; }
.mix-wait-t { text-align: center; font-weight: 900; font-size: 12.5px; color: var(--ink-60);
  margin-bottom: 12px; padding-top: 14px; border-top: 3px dashed var(--ink-30); }
.mix-wait .mx-w-face { width: 62px; height: 62px; }
/* le score de chaque joueur, gros — c'est l'information qu'on vient chercher */
.mx-w-pts { font-family: var(--font-d); font-size: 21px; line-height: 1; color: var(--ink); }
.mx-w.lead .mx-w-pts { color: var(--green-d, #1f9c48); }
.mx-w.lead .mx-w-face { border-color: var(--green); box-shadow: 0 3px 0 var(--sticker), 0 0 0 3px var(--green); }
/* le chiffre tressaute quand il change : on voit qui vient de marquer */
.mx-w-pts.bump { animation: mxBump .42s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes mxBump { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }

/* ⚠️ Ici traînaient les restes de la première version (fond bleu) : `.mx-taunt` en
   `color: #fff` sur `background: rgba(255,255,255,.16)`. Sur le fond crème actuel ça
   donnait du blanc sur blanc — le bouton CHAMBRER entre les manches était invisible
   (mesuré : texte rgb(255,255,255) sur page rgb(255,255,255)). Supprimé : le bouton
   reprend le `.btn small` de l'app, et `.mx-taunt` (ligne ~4168) ne gère que la marge. */

/* la carte MIX dans le choix du jeu */
.nd-g-mix { background: linear-gradient(135deg, #ffd35e, #ff7a3d); }
/* Les cartes des modes de quizz en salon — chacune reprend la couleur de son mode
   sur l'écran Duel, pour qu'on les reconnaisse au premier coup d'œil. */
.nd-game.nd-g-np { background: linear-gradient(150deg, #4fd07a, #12a05a); color: #fff; }
.nd-game.nd-g-fl { background: linear-gradient(150deg, #5b8cff, #1b46c9); color: #fff; }
.nd-game.nd-g-ar { background: linear-gradient(150deg, #b97bef, #7b2fd0); color: #fff; }
.nd-game.nd-g-pe { background: linear-gradient(150deg, #7fbf5a, #3d7a22); color: #fff; }
.nd-game.nd-g-gp { background: linear-gradient(150deg, #3fa9d8, #14688f); color: #fff; }
.nd-game.nd-g-np .nd-g-name, .nd-game.nd-g-fl .nd-g-name, .nd-game.nd-g-ar .nd-g-name,
.nd-game.nd-g-pe .nd-g-name, .nd-game.nd-g-gp .nd-g-name { text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }