/* ═══════════════════════════════════════════════════════════════
   TITOUE QUIZ — STYLES GROUPES
   À ajouter à la fin de style.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── PAGE GROUPES ─────────────────────────────────────────────────────────── */
.g-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 16px;
}

/* ─── CARTE GROUPE (liste) ──────────────────────────────────────────────────── */
.g-card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px rgba(0,0,0,1); }
.g-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.g-card-name { font-weight: 800; font-size: 1.05rem; }
.g-card-meta { font-size: .78rem; opacity: .6; margin-top: 2px; }

/* Dot réponse du jour */
.g-daily-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.g-daily-dot.correct  { background: var(--good, #00c896); }
.g-daily-dot.wrong    { background: #ff6b6b; }
.g-daily-dot.pending  { background: var(--border, #555); }

.g-answered-badge {
  font-size: .75rem;
  background: var(--grad1);
  color: var(--accent);
  border-radius: 20px;
  padding: 3px 10px;
  font-weight: 800;
  border: 2px solid var(--accent);
}

/* Avatars empilés */
.g-avatars { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.g-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent, #8b5cf6);
  color: #fff;
  font-size: .7rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.g-avatar.lg { width: 38px; height: 38px; font-size: .75rem; }

/* ─── BOUTONS CRÉATION / REJOINDRE ─────────────────────────────────────────── */
.g-create-btn {
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  border: 3px solid var(--line);
  background: var(--accent);
  color: #ffffff !important;
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
  margin-top: 8px;
  transition: all .15s;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-create-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px rgba(0,0,0,1); }
.g-create-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0px rgba(0,0,0,1); }
.g-join-btn {
  width: 100%;
  padding: 13px;
  border-radius: 16px;
  border: 3px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
  transition: all .15s;
  text-transform: uppercase;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-join-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px rgba(0,0,0,1); }
.g-join-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0px rgba(0,0,0,1); }

/* ─── DÉTAIL GROUPE ────────────────────────────────────────────────────────── */
.g-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 16px;
}
.g-detail-title {
  flex: 1;
  font-weight: 900;
  font-size: 1.1rem;
  text-align: center;
}
.g-members-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.g-member-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  font-size: .82rem;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-section-title {
  font-weight: 800;
  font-size: .9rem;
  opacity: .7;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-daily-count {
  background: var(--grad1);
  color: var(--accent);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 800;
  text-transform: none;
  border: 2px solid var(--accent);
}

/* ─── QUESTION DU JOUR ─────────────────────────────────────────────────────── */
.g-daily-card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 8px;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-daily-q {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 14px;
  line-height: 1.4;
}
.g-daily-options { display: flex; flex-direction: column; gap: 8px; }
.g-daily-option {
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: left;
  color: #ffffff !important;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-daily-option:hover { 
  border-color: var(--accent2); 
  background: var(--accent2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-daily-option:disabled { opacity: .6; cursor: default; }

.g-my-answer {
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .9rem;
  margin-bottom: 10px;
  border: 2px solid;
  font-weight: 700;
}
.g-my-answer.correct { background: rgba(0,217,163,.15); color: var(--good); border-color: var(--good); }
.g-my-answer.wrong   { background: rgba(255,107,107,.15); color: var(--bad); border-color: var(--bad); }
.g-explanation { font-size: .82rem; margin-bottom: 10px; padding: 8px 12px; background: var(--bg2); border-radius: 10px; border: 2px solid var(--line); }

/* Feed réponses */
.g-daily-feed { margin-top: 10px; }
.g-feed-title { font-size: .78rem; opacity: .55; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.g-feed-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 5px;
  font-size: .88rem;
  border: 2px solid;
  font-weight: 700;
}
.g-feed-item.correct { background: rgba(0,217,163,.12); border-color: var(--good); }
.g-feed-item.wrong   { background: rgba(255,107,107,.12); border-color: var(--bad); }
.g-feed-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent, #8b5cf6);
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.g-feed-name  { font-weight: 700; min-width: 60px; }
.g-feed-answer { flex: 1; opacity: .8; }
.g-feed-icon  { flex-shrink: 0; }

/* ─── DÉFIS ────────────────────────────────────────────────────────────────── */
.g-challenge-card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-challenge-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px rgba(0,0,0,1); }
.g-challenge-card.done { opacity: .75; }
.g-challenge-cat { font-weight: 800; font-size: .95rem; }
.g-challenge-meta { font-size: .76rem; opacity: .55; margin-top: 2px; }
.g-score-badge {
  background: var(--grad1);
  color: var(--accent);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .8rem;
  font-weight: 800;
  border: 2px solid var(--accent);
}
.g-todo-badge {
  background: var(--accent);
  color: var(--line);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: .8rem;
  font-weight: 800;
  border: 2px solid var(--line);
}
.g-progress-bar {
  height: 8px;
  background: var(--bg2);
  border-radius: 999px;
  margin-top: 10px;
  overflow: hidden;
  border: 2px solid var(--line);
}
.g-progress-bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .4s ease;
  min-width: 0;
}

/* ─── RÉSULTATS DÉFI ───────────────────────────────────────────────────────── */
.g-results-list { display: flex; flex-direction: column; gap: 8px; }
.g-result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  font-size: .92rem;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-result-row.first {
  background: var(--grad1);
  border-color: var(--accent);
  border-width: 3px;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-result-rank  { font-size: 1.2rem; flex-shrink: 0; width: 28px; }
.g-result-name  { flex: 1; font-weight: 700; }
.g-result-score { font-weight: 900; color: var(--accent, #8b5cf6); }
.g-result-detail { font-size: .78rem; opacity: .6; }

/* ─── CHAT — nouveau design ──────────────────────────────────────────────── */
.g-chat-wrap {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 80px;
  border: 3px solid var(--line);
  background: var(--card);
  box-shadow: 4px 4px 0px rgba(0,0,0,1);
}

/* En-tête du chat */
.g-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 3px solid var(--line);
  font-weight: 800;
  font-size: .88rem;
  color: var(--text);
  background: var(--bg2);
}
.g-chat-header-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--good, #3ecf8e);
  box-shadow: 0 0 6px var(--good, #3ecf8e);
  animation: chatPulse 2s ease infinite;
}
@keyframes chatPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

/* Zone messages */
.g-chat-messages {
  min-height: 240px;
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
  background: var(--bg);
}

/* Messages */
.g-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
  animation: msgIn .2s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

.g-chat-msg.me    { align-self: flex-end;   align-items: flex-end; }
.g-chat-msg.other { align-self: flex-start; align-items: flex-start; }

.g-msg-user {
  font-size: .68rem;
  opacity: .55;
  margin-bottom: 3px;
  font-weight: 800;
  letter-spacing: .2px;
  padding-left: 4px;
}

.g-msg-bubble {
  border-radius: 16px;
  padding: 12px 18px;
  font-size: .95rem;
  line-height: 1.45;
  word-break: break-word;
  position: relative;
  font-weight: 700;
}

/* Bulle "autre" — style papier */
.g-chat-msg.other .g-msg-bubble {
  background: var(--card);
  border: 2px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--text);
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}

/* Bulle "moi" — accent coloré */
.g-chat-msg.me .g-msg-bubble {
  background: var(--accent);
  color: var(--line);
  border: 2px solid var(--line);
  border-bottom-right-radius: 4px;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
  font-weight: 800;
}

/* Réactions */
.g-chat-reaction {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg2);
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: .78rem;
  animation: msgIn .2s ease both;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-reaction-emoji { font-size: 1.4rem; }
.g-reaction-user  { opacity: .7; font-size: .7rem; font-weight: 800; }

/* Zone saisie */
.g-chat-input-row {
  border-top: 3px solid var(--line);
  padding: 12px 14px 14px;
  background: var(--bg2);
}

.g-reactions-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  padding: 0 2px;
}

.g-reaction-btn {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all .12s;
  line-height: 1;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-reaction-btn:hover {
  transform: scale(1.25) rotate(-5deg) translate(-1px, -1px);
  background: var(--grad1);
  border-color: var(--accent);
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}

.g-chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
}

.g-chat-input {
  flex: 1;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--text);
  font-size: .95rem;
  font-weight: 600;
  outline: none;
  transition: all .15s;
}
.g-chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--grad1);
}
.g-chat-input::placeholder { color: var(--muted); opacity: .5; }

.g-chat-send-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--line);
  border: 2px solid var(--line);
  font-size: 1.2rem;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
  flex-shrink: 0;
}
.g-chat-send-btn:hover { 
  transform: translate(-2px, -2px) rotate(15deg); 
  box-shadow: 5px 5px 0px rgba(0,0,0,1); 
}
.g-chat-send-btn:active { 
  transform: translate(1px, 1px); 
  box-shadow: 2px 2px 0px rgba(0,0,0,1); 
}

/* ─── MODALE SÉLECTION CATÉGORIE ───────────────────────────────────────────── */
.g-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  backdrop-filter: blur(4px);
}
.g-modal {
  background: var(--card);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 32px;
  width: 100%;
  max-width: 500px;
  max-height: 75vh;
  overflow-y: auto;
  border: 3px solid var(--line);
  border-bottom: none;
}
.g-cat-list { display: flex; flex-direction: column; gap: 8px; }
.g-cat-choice {
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 13px 16px;
  text-align: left;
  color: #ffffff !important;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-cat-choice:hover { 
  border-color: var(--accent2); 
  background: var(--accent2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}

/* ─── OPTION BUTTONS RÉSULTAT (correct/wrong dans défi) ────────────────────── */
.option-btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent) !important;
  font-weight: 700;
  transition: all 0.2s;
}

.option-btn:hover {
  background: var(--accent2) !important;
  color: #ffffff !important;
  border-color: var(--accent2) !important;
  transform: translateY(-2px);
}

.option-btn.correct { 
  background: var(--good) !important; 
  border-color: var(--good) !important; 
  color: #ffffff !important; 
  border-width: 3px !important; 
}

.option-btn.wrong { 
  background: var(--bad) !important; 
  border-color: var(--bad) !important; 
  color: #ffffff !important; 
  border-width: 3px !important; 
}

/* ═══════════════════════════════════════════════════════════════
   NOUVELLE PAGE D'ACCUEIL — MODE SELECTOR
   ═══════════════════════════════════════════════════════════════ */

/* ─── HERO ─────────────────────────────────────────────────────────────────── */
.home-hero {
  text-align: center;
  padding: 24px 0 8px;
}
.home-title {
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.1;
}

/* ─── MODE SELECTOR ─────────────────────────────────────────────────────────── */
.mode-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

@media (max-width: 480px) {
  .mode-selector {
    grid-template-columns: 1fr;
  }
}

.mode-card {
  border-radius: var(--r-xl, 28px);
  padding: 24px 20px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mode-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

.mode-card:active {
  transform: scale(0.97);
}

/* Card Solo */
.solo-card {
  background: linear-gradient(135deg, var(--accent3, #7c3aed), var(--accent, #8b5cf6));
  color: #fff;
}

.solo-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

/* Card Multi */
.multi-card {
  background: linear-gradient(135deg, #3a1d8c, #6b35d4);
  color: #fff;
}

.multi-card::before {
  content: '';
  position: absolute;
  bottom: -20px; left: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}

.mode-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.mode-label {
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -.3px;
}

.mode-desc {
  font-size: .82rem;
  opacity: .85;
  line-height: 1.3;
  flex: 1;
}

/* Stats row dans card solo */
.mode-stats-row {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.mode-stats-row span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.mode-stats-row strong {
  font-size: 1.15rem;
  font-weight: 900;
}

.mode-stats-row .tiny {
  font-size: .65rem;
  opacity: .75;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Badges dans card multi */
.mode-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.mode-badge {
  background: rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 3px 8px;
  font-size: .7rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ─── BOUTON RETOUR MODE ──────────────────────────────────────────────────── */
.mode-back-btn {
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px 14px;
  color: var(--text);
  font-size: .85rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 4px;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
  text-transform: uppercase;
}

.mode-back-btn:hover {
  background: var(--bg2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}

/* =====================================================================
   JEUX DE GROUPE : BLITZ / MEMORY / IMPOSTEUR / LIGUE
   ===================================================================== */

/* --- Grille jeux 3x2 --- */
.g-games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (min-width: 600px) {
  .g-games-grid { grid-template-columns: repeat(3, 1fr); }
}

.g-game-tile {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 20px;
  padding: 16px 14px;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-game-tile:hover {
  transform: translate(-2px, -2px);
  border-color: var(--accent);
  box-shadow: 5px 5px 0px rgba(0,0,0,1);
}
.g-game-tile.done { opacity: .7; }
.g-game-tile.available {
  border-style: dashed;
  border-color: var(--accent);
  background: var(--grad1);
}

.g-game-tile-icon {
  font-size: 2.2rem;
  line-height: 1;
}
.g-game-tile-label {
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.2;
}
.g-game-tile-desc {
  font-size: .78rem;
  opacity: .65;
  line-height: 1.3;
  flex: 1;
}
.g-game-tile-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.g-game-tile-count {
  font-size: .72rem;
  opacity: .5;
}
.g-game-tile-launch {
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent, #8b5cf6);
}

.g-league-btn {
  width: 100%;
  padding: 11px;
  border-radius: 14px;
  border: 3px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: .88rem;
  font-weight: 800;
  cursor: pointer;
  margin-top: 4px;
  transition: all .15s;
  text-transform: uppercase;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-league-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0px rgba(0,0,0,1); }
.g-league-btn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0px rgba(0,0,0,1); }

/* --- Timer Blitz --- */
.g-timer {
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff !important;
  min-width: 32px;
  text-align: center;
  transition: color .2s;
}
.g-timer.danger { color: #ff4444 !important; animation: timerPulse .4s ease infinite alternate; }
@keyframes timerPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}

/* --- Memory hint --- */
.g-memory-hint {
  background: var(--grad1);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 10px;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}

/* --- Imposteur hint --- */
.g-imposteur-hint {
  background: rgba(155,93,229,.15);
  border: 2px solid #9b5de5;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 10px;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}

/* --- Vote imposteur --- */
.g-vote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.g-vote-btn {
  padding: 12px;
  border-radius: 14px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #ffffff !important;
  font-size: .9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
}
.g-vote-btn:hover {
  border-color: var(--accent2);
  background: var(--accent2);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}

/* --- Geo hints --- */
.g-geo-hint {
  background: rgba(33,150,243,.15);
  border: 2px solid #2196f3;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .85rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 6px;
  animation: fadeIn .3s ease;
  box-shadow: 2px 2px 0px rgba(0,0,0,1);
  display: flex;
  align-items: center;
}
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* --- Geo-devinette Design Amélioré --- */
.geo-card {
  background: linear-gradient(135deg, rgba(30, 36, 66, 0.95) 0%, rgba(21, 29, 53, 0.95) 100%);
  border: 3px solid rgba(139, 92, 246, 0.3);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.geo-badge {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  color: #ffffff !important;
  padding: 8px 16px;
  border-radius: 24px;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 4px 12px rgba(33,150,243,0.5);
  border: 2px solid rgba(255,255,255,0.2);
}

.geo-question-box {
  background: linear-gradient(135deg, rgba(33,150,243,0.2), rgba(25,118,210,0.15));
  border: 2px solid rgba(33,150,243,0.4);
  border-radius: 20px;
  padding: 24px;
  margin: 20px 0;
  text-align: center;
  box-shadow: 0 6px 20px rgba(33,150,243,0.3);
  backdrop-filter: blur(10px);
}

.geo-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff !important;
  margin-bottom: 12px;
  line-height: 1.3;
}

.geo-subtitle {
  font-size: 0.9rem;
  color: #ffffff !important;
  opacity: 0.85;
  font-weight: 600;
}

.geo-description {
  font-size: 1rem;
  color: #ffffff !important;
  opacity: 0.9;
  font-weight: 600;
  margin-top: 12px;
  padding: 16px;
  background: rgba(33,150,243,0.15);
  border-radius: 12px;
  border: 1px solid rgba(33,150,243,0.3);
  line-height: 1.5;
}

.geo-hints-container {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 60px;
}

.geo-answers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

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

.geo-option {
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 800;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: 2px solid var(--accent);
}

.geo-option:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.solo-geo-option {
  text-align: center;
}

.country-year {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(16,185,129,.12);
  color: var(--good);
  text-align: center;
}

.badge-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff !important;
  animation: pulse 1.5s ease infinite;
  border: 2px solid rgba(255,255,255,0.3);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(0.98); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* --- Estimation result (sondage + juste prix) --- */
.g-estimate-result {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 3px 3px 0px rgba(0,0,0,1);
}
.g-estimate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .95rem;
}
.g-estimate-row.correct strong { color: var(--good); }
.g-estimate-row strong { font-size: 1.1rem; font-weight: 900; }

/* --- Slider styling pour Sondage --- */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--bg2);
  outline: none;
  border: 2px solid var(--line);
  cursor: pointer;
  margin: 12px 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.1);
}

input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid var(--line);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.1);
}

input[type="range"]::-moz-range-track {
  background: var(--bg2);
  border-radius: 999px;
  border: 2px solid var(--line);
}


/* ═══════════════════════════════════════════════════════════════
   JEU MEMORY DATES - DESIGN SPÉCIAL
   ═══════════════════════════════════════════════════════════════ */

.memory-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(59, 130, 246, 0.05));
}

.memory-event-box {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 20px;
  padding: 24px 20px;
  margin: 16px 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.memory-event-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  animation: float 3s ease-in-out infinite;
}

.memory-event-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.memory-event-subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}

.memory-dates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.memory-date-card {
  background: var(--card);
  border: 3px solid var(--line);
  border-radius: 16px;
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 100px;
}

.memory-date-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px rgba(0,0,0,0.8);
  border-color: var(--accent);
}

.memory-date-card:active {
  transform: translate(0, 0);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.8);
}

.memory-date-card.correct {
  background: linear-gradient(135deg, #10b981, #34d399);
  border-color: #059669;
  color: #ffffff;
  animation: correctPulse 0.5s ease;
}

.memory-date-card.wrong {
  background: linear-gradient(135deg, #ef4444, #f87171);
  border-color: #dc2626;
  color: #ffffff;
  animation: shake 0.5s ease;
}

.memory-date-icon {
  font-size: 2rem;
}

.memory-date-text {
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

@keyframes correctPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- Nouveau Memory en plateau de cartes --- */
.memory-card {
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(99, 102, 241, 0.10)),
    var(--card);
  border-radius: 22px;
}

.memory-badge {
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.25);
}

.memory-scorebar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.memory-intro {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 2px solid rgba(20,184,166,.35);
  border-radius: 14px;
  background: rgba(20,184,166,.10);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.45;
}

.memory-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.memory-tile {
  position: relative;
  min-height: 132px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, #14b8a6, #6366f1);
  color: #fff;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,.85);
  transition: transform .18s ease, box-shadow .15s ease, border-color .15s ease, background .18s ease;
  overflow: hidden;
}

.memory-tile:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 rgba(0,0,0,.85);
  border-color: #14b8a6;
}

.memory-tile.flipped,
.memory-tile.matched {
  background: var(--card);
  color: var(--text);
  transform: none;
}

.memory-tile.matched {
  border-color: var(--good);
  background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(52,211,153,.16)), var(--card);
  cursor: default;
}

.memory-tile-back,
.memory-tile-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: opacity .16s ease, visibility .16s ease;
}

.memory-tile-back {
  font-size: 2.2rem;
  font-weight: 900;
  opacity: 1;
  visibility: visible;
}

.memory-tile-front {
  flex-direction: column;
  gap: 8px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  color: var(--text);
  background: var(--card);
}

.memory-tile.flipped .memory-tile-back,
.memory-tile.matched .memory-tile-back {
  opacity: 0;
  visibility: hidden;
}

.memory-tile.flipped .memory-tile-front,
.memory-tile.matched .memory-tile-front {
  opacity: 1;
  visibility: visible;
}

.memory-tile-kind {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent);
  font-weight: 900;
}

.memory-tile-text {
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
}

.memory-feedback-detail {
  margin-top: 8px;
  font-size: .86rem;
  line-height: 1.4;
  opacity: .9;
}

/* --- Timeline Battle --- */
.timeline-card {
  background:
    linear-gradient(135deg, rgba(244, 114, 182, 0.10), rgba(20, 184, 166, 0.10)),
    var(--card);
  border-radius: 22px;
}

.timeline-badge {
  background: linear-gradient(135deg, #f472b6, #14b8a6);
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.25);
}

.timeline-intro {
  margin: 14px 0;
  padding: 12px 14px;
  border: 2px solid rgba(244,114,182,.32);
  border-radius: 14px;
  background: rgba(244,114,182,.10);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 3px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 2px 2px 0 rgba(0,0,0,.85);
}

.timeline-row.correct {
  border-color: var(--good);
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(52,211,153,.10)), var(--card);
}

.timeline-row.wrong {
  border-color: rgba(239,68,68,.75);
}

.timeline-rank {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.timeline-title {
  font-weight: 850;
  line-height: 1.3;
}

.timeline-date {
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 900;
  color: var(--accent);
}

.timeline-correction {
  margin-top: 6px;
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(239, 68, 68, .14);
  color: #fecaca;
  font-size: .76rem;
  font-weight: 900;
}

.timeline-controls {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 6px;
}

.timeline-controls button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--accent);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.timeline-controls button:disabled {
  opacity: .35;
  cursor: default;
}

.timeline-result {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 2px solid var(--good);
  background: rgba(16,185,129,.12);
  font-weight: 800;
}

.timeline-result small {
  margin-top: 6px;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.35;
}

.timeline-answer-key {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.timeline-answer-title {
  font-weight: 900;
  color: var(--text);
}

.timeline-answer-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

.timeline-answer-row.ok {
  border-color: rgba(16,185,129,.55);
}

.timeline-answer-row.miss {
  border-color: rgba(239,68,68,.58);
}

.timeline-answer-rank {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 900;
}

.timeline-answer-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.timeline-answer-main small {
  color: var(--accent);
  font-weight: 900;
}

.timeline-answer-status {
  font-size: .76rem;
  font-weight: 900;
  color: var(--muted);
  text-align: right;
}

:root:not([data-mode="dark"]) .timeline-correction {
  background: #fee2e2;
  color: #991b1b;
}

:root:not([data-mode="dark"]) .timeline-answer-row {
  background: rgba(255,255,255,.48);
}

@media (max-width: 520px) {
  .timeline-row {
    grid-template-columns: 34px 1fr;
  }
  .timeline-controls {
    grid-column: 2;
    justify-content: start;
  }
}

/* --- Popcorn Clash --- */
.popcorn-card {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, .12), rgba(236, 72, 153, .10)),
    var(--card);
  border-radius: 22px;
}

.popcorn-badge {
  background: linear-gradient(135deg, #facc15, #ec4899);
  color: #111827 !important;
  border: 2px solid rgba(255,255,255,.35);
}

.popcorn-question {
  margin: 16px 0;
  padding: 16px;
  border: 2px solid rgba(250,204,21,.45);
  border-radius: 16px;
  background: rgba(250,204,21,.10);
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
}

.popcorn-hints {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.popcorn-hint {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid rgba(236,72,153,.35);
  background: rgba(236,72,153,.10);
}

.popcorn-hint span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  opacity: .7;
  font-weight: 900;
}

.popcorn-hint strong {
  line-height: 1.35;
}

.popcorn-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.popcorn-option {
  min-height: 58px;
  padding: 12px;
  border-radius: 14px;
  border: 3px solid var(--line);
  background: var(--accent);
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,.85);
  transition: transform .15s, box-shadow .15s, background .15s;
}

.popcorn-option:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(0,0,0,.85);
  background: var(--accent2);
}

.popcorn-option.correct {
  background: var(--good);
  border-color: var(--good);
}

.popcorn-option.wrong {
  background: var(--bad);
  border-color: var(--bad);
}

.popcorn-expl {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  opacity: .9;
}

@media (max-width: 520px) {
  .popcorn-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .memory-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .memory-tile {
    min-height: 104px;
  }
}

@media (max-width: 460px) {
  .memory-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Mode jour : fond colore par le theme et textes lisibles --- */
:root:not([data-mode="dark"]) #multiApp {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 30%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 28%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg2) 52%, var(--bg3) 100%) !important;
  color: var(--text) !important;
}

:root:not([data-mode="dark"]) #multiApp,
:root:not([data-mode="dark"]) #multiApp h1,
:root:not([data-mode="dark"]) #multiApp h2,
:root:not([data-mode="dark"]) #multiApp h3,
:root:not([data-mode="dark"]) #multiApp p,
:root:not([data-mode="dark"]) #multiApp span,
:root:not([data-mode="dark"]) #multiApp div,
:root:not([data-mode="dark"]) .g-card h3,
:root:not([data-mode="dark"]) .g-card p,
:root:not([data-mode="dark"]) .g-card-name,
:root:not([data-mode="dark"]) .g-card-meta,
:root:not([data-mode="dark"]) .g-daily-q,
:root:not([data-mode="dark"]) .g-section-title,
:root:not([data-mode="dark"]) .g-detail-title,
:root:not([data-mode="dark"]) .g-game-tile-label,
:root:not([data-mode="dark"]) .g-game-tile-desc,
:root:not([data-mode="dark"]) .g-explanation,
:root:not([data-mode="dark"]) .g-result-row,
:root:not([data-mode="dark"]) .g-result-name,
:root:not([data-mode="dark"]) .g-result-score,
:root:not([data-mode="dark"]) .g-memory-hint,
:root:not([data-mode="dark"]) .g-geo-hint,
:root:not([data-mode="dark"]) .timeline-title,
:root:not([data-mode="dark"]) .popcorn-question,
:root:not([data-mode="dark"]) .popcorn-hint strong,
:root:not([data-mode="dark"]) .popcorn-expl {
  color: var(--text) !important;
}

:root:not([data-mode="dark"]) .g-card,
:root:not([data-mode="dark"]) .g-daily-card,
:root:not([data-mode="dark"]) .g-member-chip,
:root:not([data-mode="dark"]) .g-modal,
:root:not([data-mode="dark"]) .g-game-tile,
:root:not([data-mode="dark"]) .g-league-btn,
:root:not([data-mode="dark"]) .memory-card,
:root:not([data-mode="dark"]) .timeline-card,
:root:not([data-mode="dark"]) .popcorn-card,
:root:not([data-mode="dark"]) .timeline-row {
  background: var(--card) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

:root:not([data-mode="dark"]) .g-card-meta,
:root:not([data-mode="dark"]) .g-feed-title,
:root:not([data-mode="dark"]) .g-game-tile-desc,
:root:not([data-mode="dark"]) .g-game-tile-count,
:root:not([data-mode="dark"]) .popcorn-hint span {
  color: var(--muted) !important;
  opacity: 1;
}

:root:not([data-mode="dark"]) .g-create-btn,
:root:not([data-mode="dark"]) .g-create-btn *,
:root:not([data-mode="dark"]) .g-daily-option,
:root:not([data-mode="dark"]) .g-daily-option *,
:root:not([data-mode="dark"]) .g-cat-choice,
:root:not([data-mode="dark"]) .g-cat-choice *,
:root:not([data-mode="dark"]) .g-vote-btn,
:root:not([data-mode="dark"]) .g-vote-btn *,
:root:not([data-mode="dark"]) .option-btn,
:root:not([data-mode="dark"]) .option-btn *,
:root:not([data-mode="dark"]) .popcorn-option,
:root:not([data-mode="dark"]) .popcorn-option *,
:root:not([data-mode="dark"]) .timeline-controls button,
:root:not([data-mode="dark"]) .timeline-controls button *,
:root:not([data-mode="dark"]) .memory-tile,
:root:not([data-mode="dark"]) .memory-tile *,
:root:not([data-mode="dark"]) .geo-badge {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   RELOOK MULTIJOUEUR : plus net, moins lourd
   ═══════════════════════════════════════════════════════ */
:root:not([data-mode="dark"]) #multiApp {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 54%, #ffffff) 0%, #f8fafc 52%, color-mix(in srgb, var(--bg2) 24%, #eef2f7) 100%) !important;
}

[data-mode="dark"] #multiApp {
  background: linear-gradient(180deg, #0b1020 0%, #111827 58%, #0f172a 100%) !important;
}

#multiApp .multi-inner {
  max-width: 980px !important;
  padding: 78px clamp(16px, 4vw, 34px) 110px !important;
}

#multiBackBtn,
#multiModeToggleBtn {
  border-radius: 8px !important;
  border: 1px solid var(--ui-border, rgba(37,52,76,.14)) !important;
  background: var(--ui-surface-strong, #fff) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 24px rgba(30,41,59,.12) !important;
}

#multiModeToggleBtn {
  border-radius: 50% !important;
}

.g-detail-header {
  padding: 0 0 20px;
  gap: 12px;
}

.g-detail-title {
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  color: var(--text) !important;
}

.g-members-row {
  margin: 0 0 22px;
}

.g-member-chip,
.g-card,
.g-daily-card,
.g-challenge-card,
.g-game-tile,
.g-league-btn,
.g-modal,
.memory-card,
.timeline-card,
.popcorn-card,
.timeline-row,
.g-result-row {
  border-radius: 8px !important;
  border: 1px solid var(--ui-border, rgba(37,52,76,.14)) !important;
  background: var(--ui-surface, rgba(255,255,255,.94)) !important;
  box-shadow: 0 10px 24px rgba(30,41,59,.09) !important;
}

[data-mode="dark"] .g-member-chip,
[data-mode="dark"] .g-card,
[data-mode="dark"] .g-daily-card,
[data-mode="dark"] .g-challenge-card,
[data-mode="dark"] .g-game-tile,
[data-mode="dark"] .g-league-btn,
[data-mode="dark"] .g-modal,
[data-mode="dark"] .memory-card,
[data-mode="dark"] .timeline-card,
[data-mode="dark"] .popcorn-card,
[data-mode="dark"] .timeline-row,
[data-mode="dark"] .g-result-row {
  background: var(--ui-surface, rgba(18,25,43,.92)) !important;
}

.g-card:hover,
.g-challenge-card:hover,
.g-game-tile:hover,
.g-league-btn:hover {
  transform: translateY(-2px) !important;
  border-color: var(--ui-border-strong, rgba(37,52,76,.24)) !important;
  box-shadow: 0 18px 44px rgba(30,41,59,.13) !important;
}

.g-section-title {
  margin: 28px 0 12px;
  color: #475569 !important;
  opacity: 1;
  font-size: .82rem;
  font-weight: 900;
}

[data-mode="dark"] .g-section-title {
  color: #cbd5e1 !important;
}

.g-daily-card {
  padding: 22px !important;
}

.g-daily-q {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  margin-bottom: 18px;
}

.g-my-answer,
.g-feed-item {
  border-radius: 8px !important;
  box-shadow: none !important;
}

.g-my-answer.wrong,
.g-feed-item.wrong {
  background: #fff1f2 !important;
  border-color: #fb7185 !important;
  color: #9f1239 !important;
}

.g-my-answer.correct,
.g-feed-item.correct {
  background: #ecfdf5 !important;
  border-color: #34d399 !important;
  color: #065f46 !important;
}

[data-mode="dark"] .g-my-answer.wrong,
[data-mode="dark"] .g-feed-item.wrong {
  background: rgba(244,63,94,.14) !important;
  color: #fecdd3 !important;
}

[data-mode="dark"] .g-my-answer.correct,
[data-mode="dark"] .g-feed-item.correct {
  background: rgba(16,185,129,.14) !important;
  color: #bbf7d0 !important;
}

.g-games-grid {
  gap: 14px;
}

.g-game-tile {
  min-height: 178px;
  padding: 20px !important;
}

.g-game-tile-icon {
  font-size: 2rem;
}

.g-game-tile-label {
  font-size: 1.08rem;
}

.g-game-tile-desc {
  font-size: .9rem;
  line-height: 1.45;
  color: #526174 !important;
}

.g-game-tile-footer {
  border-top: 1px solid var(--ui-border, rgba(37,52,76,.14));
  padding-top: 12px;
}

.g-game-tile-launch,
.g-score-badge,
.g-todo-badge,
.g-daily-count,
.g-answered-badge {
  border-radius: 999px !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff) !important;
  color: var(--accent3) !important;
  box-shadow: none !important;
}

.g-create-btn,
.g-daily-option,
.g-cat-choice,
.g-vote-btn,
.popcorn-option,
.timeline-controls button {
  border-radius: 8px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--accent3), var(--accent)) !important;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--accent) 25%, transparent) !important;
  color: #ffffff !important;
}

.g-create-btn:hover,
.g-daily-option:hover,
.g-cat-choice:hover,
.g-vote-btn:hover,
.popcorn-option:hover,
.timeline-controls button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.memory-board {
  gap: 14px;
}

.memory-tile {
  border-radius: 8px !important;
  box-shadow: 0 10px 20px rgba(30,41,59,.16) !important;
}

/* ═══════════════════════════════════════════════════════
   MULTIJOUEUR : glass fluide + touches dessinées
   ═══════════════════════════════════════════════════════ */
:root:not([data-mode="dark"]) #multiApp {
  background:
    radial-gradient(circle at 12% 8%, rgba(128, 199, 255, 0.50), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(255, 178, 219, 0.44), transparent 30%),
    radial-gradient(circle at 68% 92%, rgba(255, 219, 140, 0.30), transparent 34%),
    linear-gradient(145deg, #eef7ff 0%, #f7f0ff 48%, #fff8ea 100%) !important;
}

[data-mode="dark"] #multiApp {
  background:
    radial-gradient(circle at 18% 14%, rgba(78, 134, 255, 0.24), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(236, 112, 190, 0.16), transparent 28%),
    radial-gradient(circle at 56% 88%, rgba(71, 205, 220, 0.12), transparent 36%),
    linear-gradient(145deg, #0b1020 0%, #11172a 48%, #171f35 100%) !important;
}

#multiApp .multi-inner {
  max-width: 1040px !important;
}

#multiBackBtn,
#multiModeToggleBtn {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.22)),
    rgba(255,255,255,.58) !important;
  color: var(--dream-ink, #172033) !important;
  box-shadow: 0 14px 30px rgba(37,52,91,.13), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

#multiModeToggleBtn {
  border-radius: 50% !important;
}

.g-member-chip,
.g-card,
.g-daily-card,
.g-challenge-card,
.g-game-tile,
.g-league-btn,
.g-modal,
.memory-card,
.timeline-card,
.popcorn-card,
.timeline-row,
.g-result-row,
.g-chat-wrap {
  border-radius: 26px !important;
  border: 1px solid var(--dream-line, rgba(255,255,255,.58)) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.50), rgba(255,255,255,.20)),
    var(--dream-glass, rgba(255,255,255,.58)) !important;
  box-shadow: var(--dream-shadow-soft, 0 14px 34px rgba(37,52,91,.12)), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(24px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.22) !important;
}

[data-mode="dark"] .g-member-chip,
[data-mode="dark"] .g-card,
[data-mode="dark"] .g-daily-card,
[data-mode="dark"] .g-challenge-card,
[data-mode="dark"] .g-game-tile,
[data-mode="dark"] .g-league-btn,
[data-mode="dark"] .g-modal,
[data-mode="dark"] .memory-card,
[data-mode="dark"] .timeline-card,
[data-mode="dark"] .popcorn-card,
[data-mode="dark"] .timeline-row,
[data-mode="dark"] .g-result-row,
[data-mode="dark"] .g-chat-wrap {
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    var(--dream-glass, rgba(22,29,50,.58)) !important;
  box-shadow: var(--dream-shadow-soft, 0 16px 42px rgba(0,0,0,.32)), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.g-card,
.g-challenge-card,
.g-game-tile {
  position: relative;
  overflow: hidden;
}

.g-card::after,
.g-challenge-card::after,
.g-game-tile::after {
  content: "✧";
  position: absolute;
  right: 20px;
  top: 16px;
  color: color-mix(in srgb, var(--accent) 58%, transparent);
  opacity: .75;
  font-size: 1.25rem;
  pointer-events: none;
}

.g-card:hover,
.g-challenge-card:hover,
.g-game-tile:hover,
.g-league-btn:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(255,255,255,.76) !important;
  box-shadow: var(--dream-shadow, 0 24px 70px rgba(37,52,91,.18)), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.g-section-title {
  color: var(--dream-muted, #53627a) !important;
  opacity: 1;
  letter-spacing: .04em !important;
}

.g-detail-title,
.g-daily-q,
.g-game-tile-label,
.timeline-title,
.popcorn-question {
  color: var(--dream-ink, #172033) !important;
}

.g-game-tile {
  min-height: 188px;
  padding: 22px !important;
}

.g-game-tile-icon,
.g-avatar {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52), 0 10px 20px rgba(45,68,128,.12);
}

.g-game-tile-desc,
.g-game-tile-count,
.g-card-meta,
.g-feed-title {
  color: var(--dream-muted, #53627a) !important;
}

.g-game-tile-footer {
  border-top: 1px solid rgba(255,255,255,.38);
}

.g-game-tile-launch,
.g-score-badge,
.g-todo-badge,
.g-daily-count,
.g-answered-badge {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.46) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,.18)),
    color-mix(in srgb, var(--accent) 12%, transparent) !important;
  color: var(--dream-ink, #172033) !important;
}

.g-create-btn,
.g-daily-option,
.g-cat-choice,
.g-vote-btn,
.popcorn-option,
.timeline-controls button {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  background: linear-gradient(135deg, #2e6cff, #7c6dff 46%, #ff83c6) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 36px rgba(62,105,255,.24), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

.g-join-btn,
.g-league-btn {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.50) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.22)),
    rgba(255,255,255,.58) !important;
  color: var(--dream-ink, #172033) !important;
}

.g-my-answer,
.g-feed-item,
.g-explanation {
  border-radius: 20px !important;
}

.memory-tile {
  border-radius: 24px !important;
  box-shadow: 0 16px 30px rgba(45,68,128,.18), inset 0 1px 0 rgba(255,255,255,.40) !important;
}

/* Mode jour multi plus illustré */
:root:not([data-mode="dark"]) #multiApp {
  background:
    radial-gradient(circle at 10% 8%, rgba(117, 196, 255, .44), transparent 27%),
    radial-gradient(circle at 88% 11%, rgba(255, 153, 203, .40), transparent 25%),
    radial-gradient(circle at 18% 86%, rgba(126, 232, 192, .30), transparent 27%),
    radial-gradient(circle at 78% 82%, rgba(255, 219, 118, .34), transparent 30%),
    linear-gradient(135deg, #f3fbff 0%, #fff5fb 48%, #fff9e8 100%) !important;
}

:root:not([data-mode="dark"]) .g-game-tile:nth-child(6n + 1),
:root:not([data-mode="dark"]) .g-card:nth-child(6n + 1) { --card-accent: #6d7cff; --card-accent2: #86d8ff; --card-wash: rgba(109,124,255,.16); }
:root:not([data-mode="dark"]) .g-game-tile:nth-child(6n + 2),
:root:not([data-mode="dark"]) .g-card:nth-child(6n + 2) { --card-accent: #ff76b8; --card-accent2: #ffd07a; --card-wash: rgba(255,118,184,.15); }
:root:not([data-mode="dark"]) .g-game-tile:nth-child(6n + 3),
:root:not([data-mode="dark"]) .g-card:nth-child(6n + 3) { --card-accent: #15b8a6; --card-accent2: #91e8b8; --card-wash: rgba(21,184,166,.14); }

:root:not([data-mode="dark"]) .g-member-chip,
:root:not([data-mode="dark"]) .g-card,
:root:not([data-mode="dark"]) .g-daily-card,
:root:not([data-mode="dark"]) .g-challenge-card,
:root:not([data-mode="dark"]) .g-game-tile,
:root:not([data-mode="dark"]) .g-league-btn,
:root:not([data-mode="dark"]) .g-chat-wrap {
  background:
    linear-gradient(150deg, rgba(255,255,255,.70), rgba(255,255,255,.30)),
    linear-gradient(135deg, var(--card-wash, rgba(139,92,246,.12)), rgba(255,255,255,.20)) !important;
  border: 2px solid color-mix(in srgb, var(--card-accent, var(--accent)) 32%, rgba(255,255,255,.64)) !important;
  border-radius: 30px 24px 34px 25px !important;
  box-shadow:
    0 18px 38px rgba(77, 82, 126, .13),
    inset 0 2px 0 rgba(255,255,255,.72) !important;
}

:root:not([data-mode="dark"]) .g-game-tile:nth-child(even),
:root:not([data-mode="dark"]) .g-card:nth-child(even) {
  border-radius: 25px 34px 26px 31px !important;
}

:root:not([data-mode="dark"]) .g-create-btn,
:root:not([data-mode="dark"]) .g-daily-option,
:root:not([data-mode="dark"]) .g-cat-choice,
:root:not([data-mode="dark"]) .g-vote-btn,
:root:not([data-mode="dark"]) .popcorn-option,
:root:not([data-mode="dark"]) .timeline-controls button {
  background: linear-gradient(135deg, #6d7cff, #ff76b8) !important;
  border: 2px solid rgba(255,255,255,.62) !important;
  border-radius: 24px 18px 25px 19px !important;
}

:root:not([data-mode="dark"]) .g-join-btn,
:root:not([data-mode="dark"]) .g-league-btn {
  background:
    linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.38)),
    rgba(255,255,255,.48) !important;
  border: 2px solid rgba(128, 114, 196, .24) !important;
}

/* Dernière couche mode jour : elle doit gagner car groups.css est chargé après style.css */
:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body,
:root:not([data-mode="dark"]) #multiApp {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 30%),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 28%),
    radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--accent3) 16%, transparent), transparent 32%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent2) 10%, #f8fbff) 0%,
      color-mix(in srgb, var(--accent) 7%, #ffffff) 48%,
      color-mix(in srgb, var(--accent3) 10%, #f7f9ff) 100%
    ) !important;
}

:root:not([data-mode="dark"]) .gradient {
  background: linear-gradient(96deg,
    color-mix(in srgb, var(--accent3) 62%, #111827) 0%,
    var(--accent) 48%,
    color-mix(in srgb, var(--accent2) 70%, #ff5aa8) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

:root:not([data-mode="dark"]) .home-title {
  color: #172033 !important;
  text-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

:root:not([data-mode="dark"]) .home-hero::after {
  color: color-mix(in srgb, var(--accent) 54%, transparent) !important;
  opacity: .55 !important;
}

:root:not([data-mode="dark"]) .mode-card,
:root:not([data-mode="dark"]) .g-member-chip,
:root:not([data-mode="dark"]) .g-card,
:root:not([data-mode="dark"]) .g-daily-card,
:root:not([data-mode="dark"]) .g-challenge-card,
:root:not([data-mode="dark"]) .g-game-tile,
:root:not([data-mode="dark"]) .g-league-btn,
:root:not([data-mode="dark"]) .g-chat-wrap {
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.82), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.74), rgba(255,255,255,.46)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 16%, transparent),
      color-mix(in srgb, var(--accent2) 12%, transparent)
    ) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.78)) !important;
  box-shadow:
    0 22px 52px color-mix(in srgb, var(--accent) 16%, rgba(28, 43, 72, .14)),
    inset 0 2px 0 rgba(255,255,255,.82) !important;
  color: #172033 !important;
}

:root:not([data-mode="dark"]) .mode-card *,
:root:not([data-mode="dark"]) .solo-card *,
:root:not([data-mode="dark"]) .play-card *,
:root:not([data-mode="dark"]) .multi-card *,
:root:not([data-mode="dark"]) .g-game-tile-label,
:root:not([data-mode="dark"]) .g-detail-title {
  color: #172033 !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .mode-desc,
:root:not([data-mode="dark"]) .muted,
:root:not([data-mode="dark"]) .tiny,
:root:not([data-mode="dark"]) .g-game-tile-desc,
:root:not([data-mode="dark"]) .g-game-tile-count {
  color: #4b5a70 !important;
}

:root:not([data-mode="dark"]) .mode-badge,
:root:not([data-mode="dark"]) .badge,
:root:not([data-mode="dark"]) .daily-badge,
:root:not([data-mode="dark"]) .g-game-tile-launch,
:root:not([data-mode="dark"]) .g-score-badge,
:root:not([data-mode="dark"]) .g-todo-badge {
  background:
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
    color-mix(in srgb, var(--accent) 9%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, rgba(17,24,39,.08)) !important;
  color: #1f2937 !important;
}

:root:not([data-mode="dark"]) .btn.primary,
:root:not([data-mode="dark"]) .g-create-btn,
:root:not([data-mode="dark"]) .g-daily-option,
:root:not([data-mode="dark"]) .g-cat-choice,
:root:not([data-mode="dark"]) .g-vote-btn,
:root:not([data-mode="dark"]) .popcorn-option,
:root:not([data-mode="dark"]) .timeline-controls button {
  background: linear-gradient(135deg, var(--accent3), var(--accent), var(--accent2)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.52) !important;
}

/* Mode nuit : nuages dessinés très légers derrière l'interface */
[data-mode="dark"] body::after,
[data-mode="dark"] #multiApp::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
}

[data-mode="dark"] body::after {
  background-image:
    radial-gradient(ellipse at 8% 17%, rgba(255, 238, 210, .28) 0 8%, transparent 18%),
    radial-gradient(ellipse at 17% 15%, rgba(255, 238, 210, .20) 0 8%, transparent 17%),
    radial-gradient(ellipse at 26% 18%, rgba(124, 119, 170, .28) 0 9%, transparent 19%),
    radial-gradient(ellipse at 73% 12%, rgba(255, 238, 210, .22) 0 8%, transparent 17%),
    radial-gradient(ellipse at 84% 10%, rgba(128, 123, 174, .28) 0 10%, transparent 20%),
    radial-gradient(ellipse at 94% 16%, rgba(255, 238, 210, .18) 0 8%, transparent 18%),
    radial-gradient(ellipse at 12% 84%, rgba(255, 238, 210, .18) 0 8%, transparent 18%),
    radial-gradient(ellipse at 22% 82%, rgba(105, 101, 153, .26) 0 10%, transparent 20%),
    radial-gradient(ellipse at 84% 82%, rgba(255, 238, 210, .20) 0 9%, transparent 18%);
  filter: blur(.2px);
  opacity: .82;
  animation: nightCloudDrift 34s ease-in-out infinite alternate;
}

[data-mode="dark"] #multiApp::before {
  background-image:
    radial-gradient(ellipse at 10% 12%, rgba(255, 238, 210, .24) 0 8%, transparent 18%),
    radial-gradient(ellipse at 20% 10%, rgba(116, 111, 162, .28) 0 10%, transparent 20%),
    radial-gradient(ellipse at 31% 14%, rgba(255, 238, 210, .16) 0 8%, transparent 18%),
    radial-gradient(ellipse at 72% 9%, rgba(255, 238, 210, .20) 0 8%, transparent 18%),
    radial-gradient(ellipse at 84% 12%, rgba(105, 101, 153, .28) 0 10%, transparent 20%),
    radial-gradient(ellipse at 92% 16%, rgba(255, 238, 210, .16) 0 8%, transparent 18%),
    radial-gradient(ellipse at 12% 88%, rgba(255, 238, 210, .18) 0 8%, transparent 18%),
    radial-gradient(ellipse at 24% 86%, rgba(105, 101, 153, .24) 0 10%, transparent 20%),
    radial-gradient(ellipse at 82% 88%, rgba(255, 238, 210, .18) 0 9%, transparent 18%);
  opacity: .70;
  animation: nightCloudDriftSoft 46s ease-in-out infinite alternate;
}

@keyframes nightCloudDrift {
  from { transform: translate3d(-10px, -4px, 0); }
  to { transform: translate3d(16px, 8px, 0); }
}

@keyframes nightCloudDriftSoft {
  from { transform: translate3d(12px, 5px, 0); }
  to { transform: translate3d(-18px, -7px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-mode="dark"] body::after,
  [data-mode="dark"] #multiApp::before {
    animation: none !important;
  }
}

.night-cloud-layer {
  display: none;
}

[data-mode="dark"] .night-cloud-layer {
  display: block;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

[data-mode="dark"] .cloud {
  position: absolute;
  width: clamp(170px, 20vw, 320px);
  height: clamp(58px, 7vw, 105px);
  border-radius: 999px;
  opacity: .34;
  background:
    radial-gradient(circle at 18% 54%, rgba(255,238,210,.62) 0 22%, transparent 23%),
    radial-gradient(circle at 36% 38%, rgba(205,196,226,.52) 0 28%, transparent 29%),
    radial-gradient(circle at 58% 50%, rgba(255,238,210,.54) 0 25%, transparent 26%),
    radial-gradient(circle at 78% 55%, rgba(121,116,166,.46) 0 23%, transparent 24%);
  filter: drop-shadow(0 0 18px rgba(255, 218, 166, .16));
  animation: cloudFloat 42s ease-in-out infinite alternate;
}

[data-mode="dark"] .cloud::after {
  content: "";
  position: absolute;
  inset: 18% 9%;
  border-top: 2px solid rgba(255, 213, 157, .34);
  border-radius: 50%;
  transform: rotate(-3deg);
}

[data-mode="dark"] .cloud.c1 { left: -3%; top: 7%; }
[data-mode="dark"] .cloud.c2 { right: -4%; top: 4%; width: clamp(210px, 24vw, 380px); animation-duration: 48s; }
[data-mode="dark"] .cloud.c3 { left: 3%; bottom: 7%; width: clamp(220px, 25vw, 400px); opacity: .28; animation-duration: 55s; }
[data-mode="dark"] .cloud.c4 { right: 8%; bottom: 9%; opacity: .24; animation-duration: 60s; }

@keyframes cloudFloat {
  from { transform: translate3d(-10px, -4px, 0) rotate(-1deg); }
  to { transform: translate3d(24px, 10px, 0) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-mode="dark"] .cloud {
    animation: none !important;
  }
}

/* Direction UI : fond thème + police plus ronde + pictos dessinés */
html,
body {
  font-family: 'Nunito', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.home-title,
.mode-label,
.section-title,
.theme-label,
.g-game-tile-label,
.btn,
.badge,
.mode-badge {
  font-family: 'Fredoka', 'Nunito', Inter, sans-serif !important;
  letter-spacing: .01em !important;
}

:root:not([data-mode="dark"]),
:root:not([data-mode="dark"]) body,
:root:not([data-mode="dark"]) #multiApp {
  background:
    radial-gradient(circle at 9% 8%, color-mix(in srgb, var(--accent2) 52%, transparent), transparent 34%),
    radial-gradient(circle at 91% 7%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 32%),
    radial-gradient(circle at 15% 90%, color-mix(in srgb, var(--accent3) 30%, transparent), transparent 34%),
    radial-gradient(circle at 82% 88%, color-mix(in srgb, var(--accent2) 30%, transparent), transparent 35%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent2) 28%, #f9fbff) 0%,
      color-mix(in srgb, var(--accent) 20%, #fff8fc) 48%,
      color-mix(in srgb, var(--accent3) 22%, #f7fbff) 100%
    ) !important;
}

:root:not([data-mode="dark"]) .titoue-play-card,
:root:not([data-mode="dark"]) .mode-card,
:root:not([data-mode="dark"]) .g-game-tile {
  background:
    radial-gradient(circle at 13% 16%, rgba(255,255,255,.76), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.62), rgba(255,255,255,.28)),
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 24%, transparent),
      color-mix(in srgb, var(--accent2) 20%, transparent)
    ) !important;
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.65)) !important;
}

:root:not([data-mode="dark"]) .titoue-play-card {
  background:
    radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.60), rgba(255,255,255,.25)),
    color-mix(in srgb, var(--accent) 14%, rgba(255,255,255,.45)) !important;
}

.mode-icon {
  font-size: 0 !important;
}

.ui-mark,
.game-mark {
  --mark-a: var(--accent);
  --mark-b: var(--accent2);
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  position: relative;
  border-radius: 19px 15px 21px 16px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.88), transparent 22%),
    linear-gradient(145deg, var(--mark-a), var(--mark-b));
  border: 2px solid rgba(255,255,255,.56);
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--mark-a) 28%, transparent),
    inset 0 2px 0 rgba(255,255,255,.50);
}

.ui-mark::before,
.game-mark::before {
  color: #fff;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(18, 23, 43, .28);
}

.ui-mark::after,
.game-mark::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: -18px 26px 0 -3px rgba(255,255,255,.42);
}

.ui-mark-quiz::before { content: "Q"; }
.ui-mark-play::before { content: "▶"; font-size: 1.1rem; transform: translateX(1px); }
.ui-mark-multi::before { content: "2P"; font-size: 1rem; }

.title-mark {
  width: 28px;
  height: 28px;
  border-radius: 10px 8px 11px 9px;
  margin-right: 8px;
  vertical-align: -6px;
}

.title-mark::before {
  font-size: .78rem;
}

.title-mark::after {
  width: 5px;
  height: 5px;
  right: 4px;
  top: 4px;
  box-shadow: none;
}

.g-game-tile-icon {
  width: auto !important;
  height: auto !important;
  font-size: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.game-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px 13px 18px 14px;
}

.game-mark-memory { --mark-a: color-mix(in srgb, var(--accent) 86%, #ffffff); --mark-b: color-mix(in srgb, var(--accent2) 82%, #ffffff); }
.game-mark-memory::before { content: "M"; }

.game-mark-timeline { --mark-a: color-mix(in srgb, var(--accent3) 88%, #ffffff); --mark-b: color-mix(in srgb, var(--accent) 72%, #ffffff); }
.game-mark-timeline::before { content: "↗"; font-size: 1.45rem; }

.game-mark-popcorn { --mark-a: color-mix(in srgb, var(--accent2) 88%, #ffffff); --mark-b: color-mix(in srgb, var(--accent) 74%, #ffffff); }
.game-mark-popcorn::before { content: "P"; }

.game-mark-geo { --mark-a: color-mix(in srgb, var(--accent) 76%, #0ea5e9); --mark-b: color-mix(in srgb, var(--accent2) 78%, #ffffff); }
.game-mark-geo::before { content: "⌖"; font-size: 1.35rem; }

.game-mark-sondage { --mark-a: color-mix(in srgb, var(--accent3) 75%, #ffffff); --mark-b: color-mix(in srgb, var(--accent2) 80%, #ffffff); }
.game-mark-sondage::before { content: "%"; }

.game-mark-price { --mark-a: color-mix(in srgb, var(--accent) 82%, #ffffff); --mark-b: color-mix(in srgb, var(--accent3) 78%, #ffffff); }
.game-mark-price::before { content: "#"; }

.badge .game-mark,
.daily-badge .mini-mark,
.nav .mini-mark {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 8px 7px 9px 7px;
  margin-right: 6px;
  vertical-align: -5px;
}

.badge .game-mark::before,
.daily-badge .mini-mark::before,
.nav .mini-mark::before {
  font-size: .72rem;
}

.badge .game-mark::after,
.daily-badge .mini-mark::after,
.nav .mini-mark::after {
  width: 4px;
  height: 4px;
  right: 3px;
  top: 3px;
  box-shadow: none;
}

.mini-mark {
  --mark-a: var(--accent);
  --mark-b: var(--accent2);
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 8px 7px 9px 7px;
  margin-right: 6px;
  vertical-align: -5px;
  display: inline-grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.88), transparent 22%),
    linear-gradient(145deg, var(--mark-a), var(--mark-b));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

.mini-mark::before {
  color: #fff;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 5px rgba(18,23,43,.25);
}

.mini-mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.8);
}

.mini-mark-daily::before { content: "★"; }
.mini-mark-home::before { content: "H"; }
.mini-mark-quiz::before { content: "Q"; }
.mini-mark-review::before { content: "R"; }
.mini-mark-stats::before { content: "%"; }

.theme-art {
  --mark-a: var(--accent);
  --mark-b: var(--accent2);
  width: 54px;
  height: 54px;
  display: inline-grid;
  place-items: center;
  position: relative;
  margin-bottom: 12px;
  border-radius: 20px 15px 22px 16px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.82), transparent 22%),
    linear-gradient(145deg, color-mix(in srgb, var(--mark-a) 88%, #fff), color-mix(in srgb, var(--mark-b) 78%, #fff));
  border: 2px solid rgba(255,255,255,.58);
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--mark-a) 24%, transparent),
    inset 0 2px 0 rgba(255,255,255,.5);
}

.theme-art::before {
  color: #fff;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 1.28rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(18,23,43,.28);
}

.theme-art::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: -18px 26px 0 -3px rgba(255,255,255,.42);
}

.theme-art-science::before { content: "S"; }
.theme-art-espace::before { content: "✦"; }
.theme-art-geopo::before { content: "G"; }
.theme-art-mythologie::before { content: "M"; }
.theme-art-history::before { content: "H"; }
.theme-art-rap::before { content: "R"; }
.theme-art-insolite::before { content: "?"; }
.theme-art-christian::before { content: "✚"; }
.theme-art-etymologie::before { content: "E"; }
.theme-art-enigmes::before { content: "∴"; }
.theme-art-films_facile::before,
.theme-art-films_difficile::before { content: "F"; }
.theme-art-paris::before { content: "P"; }
.theme-art-terreur::before,
.theme-art-ortho_choix::before,
.theme-art-ortho_faute_f::before,
.theme-art-ortho_faute_d::before { content: "!"; }

[data-mode="dark"] .ui-mark,
[data-mode="dark"] .game-mark {
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 14px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* Icônes finales : style app illustrée, teinte du thème, jamais jaune forcé */
:root {
  --icon-accent: var(--accent);
  --icon-accent2: var(--accent2);
  --icon-ink: #fff;
  --icon-panel: color-mix(in srgb, var(--accent) 24%, rgba(255,255,255,.52));
}

[data-theme="violet"] { --icon-accent: #8b5cf6; --icon-accent2: #c084fc; }
[data-theme="emeraude"] { --icon-accent: #10b981; --icon-accent2: #6ee7b7; }
[data-theme="ocean"] { --icon-accent: #0ea5e9; --icon-accent2: #7dd3fc; }
[data-theme="rose"] { --icon-accent: #ec4899; --icon-accent2: #f9a8d4; }
[data-theme="or"] { --icon-accent: #b9912f; --icon-accent2: #ffe08a; }
[data-theme="rouge"] { --icon-accent: #ef4444; --icon-accent2: #fb7185; }
[data-theme="menthe"] { --icon-accent: #14b8a6; --icon-accent2: #5eead4; }
[data-theme="indigo"] { --icon-accent: #6366f1; --icon-accent2: #a5b4fc; }
[data-theme="soleil"] { --icon-accent: #d8a93e; --icon-accent2: #ffe6a7; }
[data-theme="lavande"] { --icon-accent: #a855f7; --icon-accent2: #d8b4fe; }
[data-theme="peche"] { --icon-accent: #fb7185; --icon-accent2: #fdba74; }
[data-theme="ciel"] { --icon-accent: #38bdf8; --icon-accent2: #93c5fd; }
[data-theme="pistache"] { --icon-accent: #65a30d; --icon-accent2: #a3e635; }
[data-theme="corail"] { --icon-accent: #f43f5e; --icon-accent2: #fb7185; }
[data-theme="minuit"] { --icon-accent: #6366f1; --icon-accent2: #818cf8; }
[data-theme="aurore"] { --icon-accent: #ec4899; --icon-accent2: #fb7185; }

body[data-seasonal="ete"] { --icon-accent: #0ea5e9; --icon-accent2: #fb7185; }
body[data-seasonal="noel"] { --icon-accent: #10b981; --icon-accent2: #ef4444; }
body[data-seasonal="halloween"] { --icon-accent: #f97316; --icon-accent2: #a855f7; }
body[data-seasonal="printemps"] { --icon-accent: #ec4899; --icon-accent2: #34d399; }

[data-mode="dark"] {
  --icon-panel: rgba(255,255,255,.08);
  --icon-ink: color-mix(in srgb, var(--icon-accent2) 30%, #fff);
}

.ui-mark,
.game-mark,
.theme-art,
.mini-mark {
  --mark-a: var(--icon-accent) !important;
  --mark-b: var(--icon-accent2) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--icon-panel) 82%, rgba(255,255,255,.08)), rgba(255,255,255,.04)),
    color-mix(in srgb, var(--mark-a) 16%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--mark-a) 54%, rgba(255,255,255,.38)) !important;
  box-shadow:
    0 16px 28px color-mix(in srgb, var(--mark-a) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

.ui-mark::before,
.game-mark::before,
.theme-art::before,
.mini-mark::before {
  color: var(--icon-ink) !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--mark-a) 38%, transparent) !important;
}

.ui-mark::after,
.game-mark::after,
.theme-art::after,
.mini-mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--mark-a) 34%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--mark-a) 34%, transparent) 49% 51%, transparent 52%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.75) 0 4px, transparent 5px),
    radial-gradient(circle at 14% 84%, color-mix(in srgb, var(--mark-b) 56%, transparent) 0 3px, transparent 4px);
  box-shadow: none;
  opacity: .78;
}

.ui-mark-quiz::before {
  content: "";
  width: 23px;
  height: 23px;
  border-radius: 9px;
  background: var(--icon-ink);
  box-shadow:
    -8px -8px 0 -5px var(--mark-a),
    8px -7px 0 -5px var(--mark-b),
    -7px 8px 0 -5px var(--mark-b),
    8px 8px 0 -5px var(--mark-a);
}

.ui-mark-play::before,
.game-mark-timeline::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid var(--icon-ink);
  transform: translateX(2px);
}

.ui-mark-multi::before {
  content: "";
  width: 30px;
  height: 18px;
  border: 4px solid var(--icon-ink);
  border-radius: 12px;
  box-shadow:
    -11px 0 0 -8px var(--mark-a),
    11px 0 0 -8px var(--mark-b);
}

.game-mark-memory::before { content: "M"; }
.game-mark-popcorn::before { content: "P"; }
.game-mark-geo::before { content: "⌖"; }
.game-mark-sondage::before { content: "%"; }
.game-mark-price::before { content: "#"; }

/* Vrais nuages dessinés : courbes SVG visibles, plus de bulles rondes */
[data-mode="dark"] .cloud {
  background: transparent !important;
  opacity: .58 !important;
  filter: drop-shadow(0 0 18px rgba(255, 221, 177, .12));
}

[data-mode="dark"] .cloud::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='420' height='150' viewBox='0 0 420 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 102 C44 70 74 78 88 54 C110 18 158 28 166 66 C195 38 243 48 251 83 C282 62 330 74 336 105 C361 97 389 105 402 126 L38 126 C16 124 14 113 28 102Z' fill='%23efe1d0' fill-opacity='.16'/%3E%3Cpath d='M28 102 C44 70 74 78 88 54 C110 18 158 28 166 66 C195 38 243 48 251 83 C282 62 330 74 336 105 C361 97 389 105 402 126' fill='none' stroke='%23f4d7aa' stroke-opacity='.48' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M78 112 C126 88 184 98 226 78 C270 58 327 72 365 52' fill='none' stroke='%238b86aa' stroke-opacity='.36' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M116 52 C136 82 109 98 90 86 M256 83 C280 105 257 125 232 111 M333 102 C350 119 335 134 314 126' fill='none' stroke='%23f4d7aa' stroke-opacity='.38' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

[data-mode="dark"] .cloud::after {
  display: none !important;
}

/* Lisibilite finale du mode jour : les reponses ne doivent jamais etre blanc sur clair */
:root:not([data-mode="dark"]) .answers .answer,
:root:not([data-mode="dark"]) .answers .option-btn,
:root:not([data-mode="dark"]) .g-daily-option,
:root:not([data-mode="dark"]) .popcorn-option,
:root:not([data-mode="dark"]) .solo-geo-option,
:root:not([data-mode="dark"]) .geo-option {
  background:
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(255,255,255,.64)),
    color-mix(in srgb, var(--accent) 12%, transparent) !important;
  border: 2px solid color-mix(in srgb, var(--accent) 42%, rgba(255,255,255,.72)) !important;
  color: #172033 !important;
  text-shadow: none !important;
  box-shadow:
    0 14px 28px rgba(31, 41, 55, .08),
    inset 0 1px 0 rgba(255,255,255,.80) !important;
}

:root:not([data-mode="dark"]) .answers .answer *,
:root:not([data-mode="dark"]) .answers .option-btn *,
:root:not([data-mode="dark"]) .g-daily-option *,
:root:not([data-mode="dark"]) .popcorn-option *,
:root:not([data-mode="dark"]) .solo-geo-option *,
:root:not([data-mode="dark"]) .geo-option * {
  color: #172033 !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .answers .answer:hover:not(:disabled),
:root:not([data-mode="dark"]) .answers .option-btn:hover:not(:disabled),
:root:not([data-mode="dark"]) .g-daily-option:hover:not(:disabled),
:root:not([data-mode="dark"]) .popcorn-option:hover:not(:disabled),
:root:not([data-mode="dark"]) .solo-geo-option:hover:not(:disabled),
:root:not([data-mode="dark"]) .geo-option:hover:not(:disabled) {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.72)),
    color-mix(in srgb, var(--accent) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 68%, rgba(255,255,255,.35)) !important;
  color: #101827 !important;
}

:root:not([data-mode="dark"]) .answer.correct,
:root:not([data-mode="dark"]) .option-btn.correct,
:root:not([data-mode="dark"]) .g-daily-option.correct,
:root:not([data-mode="dark"]) .popcorn-option.correct,
:root:not([data-mode="dark"]) .solo-geo-option.correct,
:root:not([data-mode="dark"]) .geo-option.correct {
  background: linear-gradient(145deg, #dcfce7, #f0fdf4) !important;
  border-color: #22c55e !important;
  color: #14532d !important;
}

:root:not([data-mode="dark"]) .answer.wrong,
:root:not([data-mode="dark"]) .option-btn.wrong,
:root:not([data-mode="dark"]) .g-daily-option.wrong,
:root:not([data-mode="dark"]) .popcorn-option.wrong,
:root:not([data-mode="dark"]) .solo-geo-option.wrong,
:root:not([data-mode="dark"]) .geo-option.wrong {
  background: linear-gradient(145deg, #fee2e2, #fff1f2) !important;
  border-color: #fb7185 !important;
  color: #7f1d1d !important;
}

:root:not([data-mode="dark"]) .answer.correct *,
:root:not([data-mode="dark"]) .option-btn.correct *,
:root:not([data-mode="dark"]) .g-daily-option.correct *,
:root:not([data-mode="dark"]) .popcorn-option.correct *,
:root:not([data-mode="dark"]) .solo-geo-option.correct *,
:root:not([data-mode="dark"]) .geo-option.correct * {
  color: #14532d !important;
}

:root:not([data-mode="dark"]) .answer.wrong *,
:root:not([data-mode="dark"]) .option-btn.wrong *,
:root:not([data-mode="dark"]) .g-daily-option.wrong *,
:root:not([data-mode="dark"]) .popcorn-option.wrong *,
:root:not([data-mode="dark"]) .solo-geo-option.wrong *,
:root:not([data-mode="dark"]) .geo-option.wrong * {
  color: #7f1d1d !important;
}

:root:not([data-mode="dark"]) .question,
:root:not([data-mode="dark"]) .question h2,
:root:not([data-mode="dark"]) #questionText {
  color: #172033 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}

/* Pack final dessine : icones, avatars et reactions sans rendu emoji natif */
:root {
  --drawn-ink: color-mix(in srgb, var(--icon-accent2, var(--accent2)) 20%, #fff);
  --drawn-line: color-mix(in srgb, var(--icon-accent, var(--accent)) 58%, rgba(255,255,255,.35));
  --drawn-shadow: color-mix(in srgb, var(--icon-accent, var(--accent)) 22%, transparent);
}

:root:not([data-mode="dark"]) {
  --drawn-ink: #ffffff;
  --drawn-line: color-mix(in srgb, var(--icon-accent, var(--accent)) 54%, rgba(255,255,255,.70));
  --drawn-shadow: color-mix(in srgb, var(--icon-accent, var(--accent)) 18%, transparent);
}

.ui-mark,
.game-mark,
.theme-art,
.mini-mark,
.avatar-mark,
.season-mark,
.reaction-mark {
  --mark-a: var(--icon-accent, var(--accent)) !important;
  --mark-b: var(--icon-accent2, var(--accent2)) !important;
  position: relative;
  display: inline-grid !important;
  place-items: center !important;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.50), transparent 21%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--mark-a) 56%, rgba(255,255,255,.22)),
      color-mix(in srgb, var(--mark-b) 50%, rgba(255,255,255,.14))
    ) !important;
  border: 2px solid var(--drawn-line) !important;
  box-shadow:
    0 14px 28px var(--drawn-shadow),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.ui-mark,
.game-mark,
.theme-art {
  width: 58px !important;
  height: 58px !important;
  border-radius: 21px 16px 23px 17px !important;
}

.mini-mark,
.reaction-mark {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 10px 8px 11px 8px !important;
}

.avatar-mark,
.season-mark {
  width: 42px;
  height: 42px;
  border-radius: 16px 12px 17px 13px;
}

.ui-mark::before,
.game-mark::before,
.theme-art::before,
.mini-mark::before,
.avatar-mark::before,
.season-mark::before,
.reaction-mark::before,
.ui-mark::after,
.game-mark::after,
.theme-art::after,
.mini-mark::after,
.avatar-mark::after,
.season-mark::after,
.reaction-mark::after {
  content: "" !important;
  position: absolute;
  display: block;
  box-sizing: border-box;
  z-index: 1;
}

.ui-mark::after,
.game-mark::after,
.theme-art::after,
.mini-mark::after,
.avatar-mark::after,
.season-mark::after,
.reaction-mark::after {
  inset: 7px !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--mark-a) 32%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--mark-b) 30%, transparent) 49% 51%, transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.72) 0 3px, transparent 4px),
    radial-gradient(circle at 17% 82%, rgba(255,255,255,.36) 0 2px, transparent 3px) !important;
  box-shadow: none !important;
}

.ui-mark::before,
.game-mark::before,
.theme-art::before {
  inset: 15px;
}

.mini-mark::before,
.reaction-mark::before {
  inset: 7px;
}

.avatar-mark::before,
.season-mark::before {
  inset: 10px;
}

.ui-mark-quiz::before,
.mini-mark-quiz::before {
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 30%, var(--drawn-ink) 32% 47%, transparent 49%),
    radial-gradient(circle at 50% 50%, var(--drawn-ink) 0 18%, transparent 20%);
}

.ui-mark-play::before,
.game-mark-timeline::before {
  width: 0 !important;
  height: 0 !important;
  inset: auto !important;
  border-top: 13px solid transparent !important;
  border-bottom: 13px solid transparent !important;
  border-left: 21px solid var(--drawn-ink) !important;
  transform: translateX(2px);
  background: transparent !important;
}

.ui-mark-multi::before {
  border: 4px solid var(--drawn-ink);
  border-radius: 14px;
  box-shadow:
    -12px 0 0 -8px var(--drawn-ink),
    12px 0 0 -8px var(--drawn-ink);
}

.mini-mark-home::before {
  clip-path: polygon(50% 0, 98% 42%, 86% 42%, 86% 100%, 18% 100%, 18% 42%, 2% 42%);
  background: var(--drawn-ink);
}

.mini-mark-daily::before,
.mini-mark-review::before {
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 71%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);
  background: var(--drawn-ink);
}

.mini-mark-stats::before,
.game-mark-sondage::before {
  background:
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 0 65% / 25% 35% no-repeat,
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 38% 35% / 25% 65% no-repeat,
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 76% 10% / 25% 90% no-repeat;
}

.game-mark-memory::before {
  border-radius: 7px;
  border: 3px solid var(--drawn-ink);
  transform: rotate(-7deg);
  box-shadow: 9px 6px 0 -2px color-mix(in srgb, var(--drawn-ink) 72%, var(--mark-b));
}

.game-mark-popcorn::before {
  border-radius: 4px 4px 11px 11px;
  background:
    linear-gradient(90deg, var(--drawn-ink) 0 24%, transparent 25% 38%, var(--drawn-ink) 39% 62%, transparent 63% 76%, var(--drawn-ink) 77%),
    color-mix(in srgb, var(--mark-a) 35%, transparent);
  clip-path: polygon(8% 22%, 92% 22%, 80% 100%, 20% 100%);
}

.game-mark-geo::before {
  border-radius: 50% 50% 50% 8px;
  background: var(--drawn-ink);
  transform: rotate(-45deg);
}

.game-mark-geo::after {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--mark-a) 68%, #fff) 0 5px, transparent 6px),
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--mark-a) 34%, transparent) 49% 51%, transparent 52%) !important;
}

.game-mark-price::before {
  border-radius: 6px 6px 6px 12px;
  background: var(--drawn-ink);
  clip-path: polygon(0 20%, 66% 0, 100% 34%, 34% 100%, 0 66%);
}

.theme-art-science::before {
  background:
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 40% 0 / 20% 45% no-repeat,
    radial-gradient(ellipse at 50% 74%, var(--drawn-ink) 0 55%, transparent 57%);
}

.theme-art-espace::before,
.avatar-planet::before,
.season-mark-classic::before {
  border-radius: 50%;
  border: 4px solid var(--drawn-ink);
  transform: rotate(-18deg);
}

.theme-art-espace::after,
.avatar-planet::after {
  border: 3px solid color-mix(in srgb, var(--drawn-ink) 72%, transparent) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  transform: rotate(-18deg);
  background: transparent !important;
}

.theme-art-geopo::before,
.theme-art-paris::before {
  border-radius: 50% 50% 50% 8px;
  background: var(--drawn-ink);
  transform: rotate(-45deg);
}

.theme-art-mythologie::before,
.avatar-bolt::before {
  background: var(--drawn-ink);
  clip-path: polygon(56% 0, 16% 54%, 44% 54%, 33% 100%, 86% 39%, 56% 39%);
}

.theme-art-history::before {
  border-radius: 12px 4px 12px 4px;
  border: 4px solid var(--drawn-ink);
  border-left-width: 8px;
  transform: rotate(-4deg);
}

.theme-art-rap::before {
  width: 13px;
  height: 26px;
  inset: auto;
  border-radius: 999px;
  background: var(--drawn-ink);
  box-shadow: 10px 18px 0 -7px var(--drawn-ink);
  transform: rotate(-28deg);
}

.theme-art-insolite::before,
.theme-art-enigmes::before {
  border: 4px solid var(--drawn-ink);
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(28deg);
}

.theme-art-christian::before {
  background:
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 43% 0 / 18% 100% no-repeat,
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 0 34% / 100% 18% no-repeat;
}

.theme-art-etymologie::before {
  border: 3px solid var(--drawn-ink);
  border-radius: 3px 9px 9px 3px;
  box-shadow: -9px 0 0 -3px var(--drawn-ink);
}

.theme-art-films_facile::before,
.theme-art-films_difficile::before {
  border-radius: 5px;
  background:
    linear-gradient(135deg, transparent 0 18%, var(--drawn-ink) 19% 31%, transparent 32% 48%, var(--drawn-ink) 49% 61%, transparent 62% 78%, var(--drawn-ink) 79%),
    color-mix(in srgb, var(--drawn-ink) 22%, transparent);
}

.theme-art-terreur::before,
.theme-art-ortho_choix::before,
.theme-art-ortho_faute_f::before,
.theme-art-ortho_faute_d::before {
  background:
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 44% 0 / 16% 70% no-repeat,
    radial-gradient(circle at 52% 92%, var(--drawn-ink) 0 13%, transparent 14%);
}

.drawn-avatar-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px 12px 17px 13px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer;
}

.drawn-avatar-btn:hover,
.drawn-avatar-btn.active {
  transform: translateY(-2px) scale(1.04) !important;
}

.drawn-avatar-btn.active .avatar-mark {
  outline: 3px solid color-mix(in srgb, var(--accent) 62%, rgba(255,255,255,.70));
  outline-offset: 2px;
}

#userIconDisplay,
.g-msg-avatar,
.g-avatar {
  display: inline-grid !important;
  place-items: center !important;
}

#userIconDisplay .avatar-mark-menu,
.g-msg-avatar .avatar-mark-chat,
.g-avatar .avatar-mark-chat {
  width: 34px;
  height: 34px;
  border-radius: 13px 10px 14px 11px;
}

.avatar-initials {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.40), transparent 23%),
    linear-gradient(145deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .78rem;
}

.avatar-star::before,
.avatar-spark::before,
.avatar-shine::before {
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 71%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);
  background: var(--drawn-ink);
}

.avatar-target::before {
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--drawn-ink) 0 19%, transparent 21% 35%, var(--drawn-ink) 37% 49%, transparent 51%);
}

.avatar-gamepad::before {
  border-radius: 13px;
  border: 4px solid var(--drawn-ink);
  box-shadow: -8px 2px 0 -5px var(--drawn-ink), 8px -2px 0 -5px var(--drawn-ink);
}

.avatar-dice::before {
  border-radius: 7px;
  background:
    radial-gradient(circle at 28% 28%, var(--mark-a) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 72%, var(--mark-b) 0 3px, transparent 4px),
    var(--drawn-ink);
  transform: rotate(8deg);
}

.avatar-palette::before {
  border-radius: 50%;
  border: 5px solid var(--drawn-ink);
  border-right-color: transparent;
}

.avatar-clap::before {
  border-radius: 5px;
  background:
    linear-gradient(135deg, transparent 0 20%, var(--drawn-ink) 21% 32%, transparent 33% 48%, var(--drawn-ink) 49% 61%, transparent 62%),
    color-mix(in srgb, var(--drawn-ink) 32%, transparent);
}

.avatar-moon::before,
.night-moon::before {
  border-radius: 50%;
  box-shadow: -8px 0 0 0 var(--drawn-ink);
}

.avatar-rocket::before {
  border-radius: 50% 50% 9px 9px;
  background: var(--drawn-ink);
  transform: rotate(35deg);
  clip-path: polygon(50% 0, 82% 22%, 72% 78%, 50% 100%, 28% 78%, 18% 22%);
}

.avatar-ufo::before {
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 33%, var(--drawn-ink) 0 27%, transparent 29%),
    radial-gradient(ellipse at 50% 68%, var(--drawn-ink) 0 58%, transparent 60%);
}

.avatar-comet::before,
.avatar-meteor::before {
  border-radius: 50%;
  background: var(--drawn-ink);
  box-shadow: -15px 2px 0 -7px var(--drawn-ink), -25px 4px 0 -10px var(--drawn-ink);
}

.avatar-crown::before {
  background: var(--drawn-ink);
  clip-path: polygon(0 35%, 22% 58%, 38% 24%, 54% 58%, 82% 24%, 100% 58%, 100% 100%, 0 100%);
}

.avatar-gem::before {
  background: var(--drawn-ink);
  clip-path: polygon(20% 0, 80% 0, 100% 35%, 50% 100%, 0 35%);
}

.avatar-flame::before,
.reaction-flame::before {
  background: var(--drawn-ink);
  border-radius: 56% 44% 55% 45%;
  clip-path: polygon(48% 0, 70% 32%, 64% 54%, 84% 42%, 76% 100%, 24% 100%, 12% 52%, 36% 64%, 28% 32%);
}

.avatar-tent::before,
.avatar-mask::before,
.avatar-lion::before,
.avatar-tiger::before,
.avatar-panda::before,
.avatar-fox::before,
.avatar-wolf::before,
.avatar-owl::before,
.avatar-eagle::before,
.avatar-dragon::before,
.avatar-pizza::before,
.avatar-burger::before,
.avatar-cake::before,
.avatar-donut::before,
.avatar-cookie::before,
.avatar-cupcake::before,
.avatar-icecream::before,
.avatar-berry::before,
.avatar-cool::before,
.avatar-glasses::before,
.avatar-party::before,
.avatar-mischief::before,
.avatar-unicorn::before,
.avatar-serpent::before,
.avatar-aliengame::before,
.avatar-robot::before,
.avatar-alien::before,
.avatar-wizard::before,
.avatar-fairy::before,
.avatar-hero::before {
  border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(circle at 33% 42%, var(--mark-a) 0 3px, transparent 4px),
    radial-gradient(circle at 67% 42%, var(--mark-b) 0 3px, transparent 4px),
    var(--drawn-ink);
}

.avatar-tent::before,
.avatar-pizza::before,
.avatar-icecream::before,
.avatar-wizard::before,
.avatar-hero::before {
  border-radius: 8px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.avatar-donut::before {
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 28%, var(--drawn-ink) 30% 58%, transparent 60%);
}

.avatar-burger::before,
.avatar-cake::before,
.avatar-cupcake::before {
  border-radius: 8px 8px 14px 14px;
  background:
    linear-gradient(var(--mark-a), var(--mark-a)) 0 47% / 100% 18% no-repeat,
    var(--drawn-ink);
}

.reaction-mark {
  vertical-align: middle;
}

.reaction-clap::before {
  border-radius: 6px;
  background: var(--drawn-ink);
  transform: rotate(-18deg);
  box-shadow: 7px 3px 0 -1px color-mix(in srgb, var(--drawn-ink) 72%, var(--mark-b));
}

.reaction-laugh::before {
  border-radius: 50%;
  border: 4px solid var(--drawn-ink);
  border-top-color: transparent;
}

.reaction-mind::before {
  border-radius: 50%;
  border: 4px solid var(--drawn-ink);
  box-shadow: 0 -9px 0 -5px var(--drawn-ink), 8px -3px 0 -6px var(--drawn-ink);
}

.reaction-skull::before {
  border-radius: 50% 50% 42% 42%;
  background: var(--drawn-ink);
  box-shadow: -4px 2px 0 -2px var(--mark-a), 4px 2px 0 -2px var(--mark-b);
}

.reaction-party::before {
  background: var(--drawn-ink);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.reaction-steam::before {
  width: 18px;
  height: 10px;
  inset: auto;
  border-top: 4px solid var(--drawn-ink);
  border-bottom: 4px solid var(--drawn-ink);
  border-radius: 999px;
}

.reaction-heart::before {
  background: var(--drawn-ink);
  transform: rotate(-45deg);
  border-radius: 4px;
}

.reaction-heart::after {
  inset: 8px !important;
  background:
    radial-gradient(circle at 30% 26%, var(--drawn-ink) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 26%, var(--drawn-ink) 0 7px, transparent 8px) !important;
}

.seasonal-doodle {
  width: clamp(28px, 3.4vw, 52px);
  height: clamp(28px, 3.4vw, 52px);
  border-radius: 18px 13px 19px 14px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.40), transparent 22%),
    color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,.18));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, rgba(255,255,255,.38));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 18%, transparent);
}

.seasonal-doodle::before,
.seasonal-doodle::after,
.season-mark::before,
.season-mark::after {
  content: "" !important;
  position: absolute;
  box-sizing: border-box;
}

.seasonal-doodle-sparkle::before,
.seasonal-doodle-star::before,
.season-mark-classic::before {
  inset: 23%;
  background: var(--drawn-ink);
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 71%, 20% 92%, 31% 56%, 2% 35%, 38% 34%);
}

.seasonal-doodle-comet::before {
  inset: 36%;
  border-radius: 50%;
  background: var(--drawn-ink);
  box-shadow: -18px 4px 0 -7px var(--drawn-ink), -29px 8px 0 -11px var(--drawn-ink);
}

.seasonal-doodle-flower::before,
.seasonal-doodle-tulip::before,
.seasonal-doodle-leaf::before,
.season-mark-printemps::before {
  inset: 20%;
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 50%, var(--mark-b) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 16%, var(--drawn-ink) 0 18%, transparent 19%),
    radial-gradient(circle at 84% 50%, var(--drawn-ink) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 84%, var(--drawn-ink) 0 18%, transparent 19%),
    radial-gradient(circle at 16% 50%, var(--drawn-ink) 0 18%, transparent 19%);
}

.seasonal-doodle-butterfly::before {
  inset: 18%;
  background:
    radial-gradient(ellipse at 28% 34%, var(--drawn-ink) 0 28%, transparent 30%),
    radial-gradient(ellipse at 72% 34%, var(--drawn-ink) 0 28%, transparent 30%),
    linear-gradient(var(--mark-a), var(--mark-a)) 48% 18% / 8% 72% no-repeat;
}

.seasonal-doodle-snow::before,
.season-mark-noel::before {
  inset: 18%;
  background:
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 48% 0 / 8% 100% no-repeat,
    linear-gradient(60deg, transparent 46%, var(--drawn-ink) 47% 53%, transparent 54%),
    linear-gradient(-60deg, transparent 46%, var(--drawn-ink) 47% 53%, transparent 54%);
}

.seasonal-doodle-gift::before {
  inset: 24%;
  border-radius: 5px;
  background:
    linear-gradient(var(--mark-a), var(--mark-a)) 46% 0 / 12% 100% no-repeat,
    linear-gradient(90deg, transparent 0 42%, var(--mark-a) 43% 57%, transparent 58%),
    var(--drawn-ink);
}

.seasonal-doodle-pumpkin::before,
.season-mark-halloween::before {
  inset: 20%;
  border-radius: 48%;
  background:
    linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--mark-a) 50%, transparent) 31% 36%, transparent 37% 63%, color-mix(in srgb, var(--mark-a) 50%, transparent) 64% 69%, transparent 70%),
    var(--drawn-ink);
}

.seasonal-doodle-ghost::before {
  inset: 18% 22%;
  border-radius: 50% 50% 10px 10px;
  background: var(--drawn-ink);
  clip-path: polygon(0 22%, 18% 0, 82% 0, 100% 22%, 100% 100%, 75% 82%, 50% 100%, 25% 82%, 0 100%);
}

.seasonal-doodle-wave::before,
.season-mark-ete::before {
  inset: 32% 16%;
  border-radius: 50%;
  border-top: 6px solid var(--drawn-ink);
  transform: rotate(-8deg);
}

.seasonal-doodle-sun::before {
  inset: 25%;
  border-radius: 50%;
  background: var(--drawn-ink);
  box-shadow:
    0 -12px 0 -7px var(--drawn-ink),
    0 12px 0 -7px var(--drawn-ink),
    12px 0 0 -7px var(--drawn-ink),
    -12px 0 0 -7px var(--drawn-ink);
}

.season-mark-halloween { --mark-a: #f97316 !important; --mark-b: #a855f7 !important; }
.season-mark-noel { --mark-a: #10b981 !important; --mark-b: #ef4444 !important; }
.season-mark-ete { --mark-a: #0ea5e9 !important; --mark-b: #fb7185 !important; }
.season-mark-printemps { --mark-a: #ec4899 !important; --mark-b: #34d399 !important; }

.night-doodle {
  display: none;
}

[data-mode="dark"] .night-doodle {
  display: block;
  position: absolute;
  pointer-events: none;
  opacity: .56;
  filter: drop-shadow(0 0 18px rgba(255, 221, 177, .12));
  animation: nightDoodleFloat 34s ease-in-out infinite alternate;
}

[data-mode="dark"] .night-planet {
  width: clamp(58px, 7vw, 112px);
  height: clamp(58px, 7vw, 112px);
  border-radius: 50%;
  border: 2px solid rgba(244, 215, 170, .35);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.28), transparent 22%),
    radial-gradient(circle at 62% 70%, rgba(139, 128, 188, .36), transparent 30%),
    color-mix(in srgb, var(--accent2) 20%, rgba(255,238,210,.10));
}

[data-mode="dark"] .night-planet::before {
  content: "";
  position: absolute;
  inset: 24% -18%;
  border-top: 3px solid rgba(244, 215, 170, .42);
  border-radius: 50%;
  transform: rotate(-16deg);
}

[data-mode="dark"] .night-planet.p1 { left: 8%; top: 19%; }
[data-mode="dark"] .night-planet.p2 { right: 12%; top: 16%; width: clamp(44px, 5vw, 80px); height: clamp(44px, 5vw, 80px); animation-duration: 42s; }

[data-mode="dark"] .night-moon {
  width: clamp(44px, 5vw, 76px);
  height: clamp(44px, 5vw, 76px);
  border-radius: 50%;
  box-shadow: -16px 0 0 0 rgba(255, 232, 190, .40);
  right: 24%;
  top: 9%;
}

[data-mode="dark"] .night-star {
  width: 38px;
  height: 38px;
  background: rgba(255, 220, 168, .58);
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
}

[data-mode="dark"] .night-star.s1 { left: 69%; top: 20%; animation-duration: 28s; }
[data-mode="dark"] .night-star.s2 { left: 17%; bottom: 18%; width: 24px; height: 24px; animation-duration: 38s; }

@keyframes nightDoodleFloat {
  from { transform: translate3d(-8px, -4px, 0) rotate(-2deg); }
  to { transform: translate3d(18px, 9px, 0) rotate(2deg); }
}

/* Application des vraies icones generees */
.ui-mark,
.game-mark,
.theme-art,
.mini-mark,
.avatar-mark,
.season-mark,
.reaction-mark {
  background-image: var(--asset-icon) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ui-mark::before,
.ui-mark::after,
.game-mark::before,
.game-mark::after,
.theme-art::before,
.theme-art::after,
.mini-mark::before,
.mini-mark::after,
.avatar-mark::before,
.avatar-mark::after,
.season-mark::before,
.season-mark::after,
.reaction-mark::before,
.reaction-mark::after {
  display: none !important;
}

.ui-mark,
.game-mark,
.theme-art {
  width: 74px !important;
  height: 74px !important;
  border-radius: 22px !important;
}

.theme-art {
  margin-bottom: 10px !important;
}

.title-mark {
  width: 34px !important;
  height: 34px !important;
  margin-right: 8px !important;
}

.mini-mark,
.reaction-mark {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.avatar-mark,
.season-mark {
  width: 46px !important;
  height: 46px !important;
}

.g-msg-avatar .avatar-mark-chat,
.g-avatar .avatar-mark-chat,
#userIconDisplay .avatar-mark-menu {
  width: 38px !important;
  height: 38px !important;
}

.ui-mark-quiz,
.mini-mark-quiz,
.avatar-target,
.avatar-star,
.avatar-spark,
.avatar-shine,
.season-mark-classic,
.reaction-mind {
  --asset-icon: url("assets/icons/generated/quiz.png");
}

.ui-mark-play,
.title-mark.ui-mark-play {
  --asset-icon: url("assets/icons/generated/titoue-play.png");
}

.ui-mark-multi,
.avatar-gamepad,
.avatar-dice,
.avatar-party,
.avatar-aliengame {
  --asset-icon: url("assets/icons/generated/multi.png");
}

.game-mark-memory,
.avatar-cookie,
.avatar-cake,
.avatar-donut,
.avatar-cupcake {
  --asset-icon: url("assets/icons/generated/memory.png");
}

.game-mark-timeline,
.avatar-comet,
.avatar-meteor,
.avatar-bolt {
  --asset-icon: url("assets/icons/generated/timeline.png");
}

.game-mark-popcorn,
.avatar-pizza,
.avatar-burger,
.avatar-icecream,
.avatar-berry,
.reaction-party {
  --asset-icon: url("assets/icons/generated/popcorn.png");
}

.game-mark-geo,
.theme-art-geopo,
.theme-art-paris,
.avatar-ufo,
.avatar-rocket {
  --asset-icon: url("assets/icons/generated/geo.png");
}

.game-mark-sondage,
.mini-mark-stats {
  --asset-icon: url("assets/icons/generated/sondage.png");
}

.game-mark-price,
.avatar-gem,
.avatar-crown {
  --asset-icon: url("assets/icons/generated/price.png");
}

.theme-art-science,
.avatar-robot,
.avatar-glasses,
.reaction-steam {
  --asset-icon: url("assets/icons/generated/science.png");
}

.theme-art-espace,
.avatar-planet,
.avatar-moon,
.avatar-alien {
  --asset-icon: url("assets/icons/generated/espace.png");
}

.theme-art-mythologie,
.avatar-lion,
.avatar-tiger,
.avatar-dragon,
.avatar-serpent,
.avatar-unicorn,
.avatar-wizard,
.avatar-fairy,
.avatar-hero {
  --asset-icon: url("assets/icons/generated/mythologie.png");
}

.theme-art-history,
.avatar-tent,
.avatar-fox,
.avatar-wolf,
.avatar-owl,
.avatar-eagle {
  --asset-icon: url("assets/icons/generated/history.png");
}

.theme-art-rap,
.avatar-cool,
.avatar-flame,
.reaction-flame {
  --asset-icon: url("assets/icons/generated/rap.png");
}

.theme-art-etymologie,
.mini-mark-review,
.theme-art-insolite,
.theme-art-enigmes,
.theme-art-terreur,
.theme-art-ortho_choix,
.theme-art-ortho_faute_f,
.theme-art-ortho_faute_d,
.avatar-palette,
.avatar-mask,
.avatar-clap,
.reaction-clap,
.reaction-laugh,
.reaction-skull,
.reaction-heart {
  --asset-icon: url("assets/icons/generated/review.png");
}

.theme-art-christian,
.avatar-panda,
.avatar-mischief {
  --asset-icon: url("assets/icons/generated/mythologie.png");
}

.theme-art-films_facile,
.theme-art-films_difficile {
  --asset-icon: url("assets/icons/generated/popcorn.png");
}

.mini-mark-home {
  --asset-icon: url("assets/icons/generated/quiz.png");
}

.mini-mark-daily {
  --asset-icon: url("assets/icons/generated/sondage.png");
}

.season-mark-halloween {
  --asset-icon: url("assets/icons/generated/mythologie.png");
}

.season-mark-noel {
  --asset-icon: url("assets/icons/generated/review.png");
}

.season-mark-ete {
  --asset-icon: url("assets/icons/generated/espace.png");
}

.season-mark-printemps {
  --asset-icon: url("assets/icons/generated/science.png");
}

/* Rendu stable des PNG generes en vrais elements <img> */
img.asset-icon {
  display: inline-block !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.18));
  vertical-align: middle;
}

img.ui-mark,
img.game-mark,
img.theme-art {
  width: 86px !important;
  height: 86px !important;
  min-width: 86px !important;
  border-radius: 0 !important;
}

img.theme-art {
  margin: 0 0 10px 0 !important;
}

img.title-mark {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin-right: 8px !important;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.15));
}

img.mini-mark,
img.reaction-mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin-right: 7px !important;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.16));
}

img.avatar-mark,
img.season-mark {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.16));
}

#userIconDisplay img.avatar-mark-menu,
.g-msg-avatar img.avatar-mark-chat,
.g-avatar img.avatar-mark-chat {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  margin: 0 !important;
}

.mode-icon,
.g-game-tile-icon {
  min-height: 88px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.g-game-tile-icon {
  margin-bottom: 6px !important;
}

.theme-card > img.theme-art {
  position: relative !important;
  z-index: 2 !important;
}

.g-section-title,
.daily-badge,
.nav button,
.section-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* La couleur de correction remplit toute la case */
.answer.correct,
.option-btn.correct,
.popcorn-option.correct,
.g-daily-option.correct,
.geo-option.correct,
.solo-geo-option.correct,
.memory-date-card.correct {
  background: linear-gradient(135deg, #10b981, #34d399) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  box-shadow: 0 16px 30px rgba(16,185,129,.28) !important;
}

.answer.wrong,
.option-btn.wrong,
.popcorn-option.wrong,
.g-daily-option.wrong,
.geo-option.wrong,
.solo-geo-option.wrong,
.memory-date-card.wrong {
  background: linear-gradient(135deg, #ef4444, #fb7185) !important;
  border-color: #fb7185 !important;
  color: #ffffff !important;
  box-shadow: 0 16px 30px rgba(239,68,68,.26) !important;
}

.answer.correct *,
.option-btn.correct *,
.popcorn-option.correct *,
.g-daily-option.correct *,
.geo-option.correct *,
.solo-geo-option.correct *,
.memory-date-card.correct *,
.answer.wrong *,
.option-btn.wrong *,
.popcorn-option.wrong *,
.g-daily-option.wrong *,
.geo-option.wrong *,
.solo-geo-option.wrong *,
.memory-date-card.wrong * {
  color: #ffffff !important;
}

.answer.correct::before,
.answer.wrong::before,
.option-btn.correct::before,
.option-btn.wrong::before,
.popcorn-option.correct::before,
.popcorn-option.wrong::before,
.geo-option.correct::before,
.geo-option.wrong::before,
.solo-geo-option.correct::before,
.solo-geo-option.wrong::before {
  display: none !important;
}

.answer.correct::after,
.answer.wrong::after {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Retour stable : pictos CSS recolorables, pas de PNG fixes pour les icones UI */
.ui-mark,
.game-mark,
.theme-art,
.mini-mark,
.avatar-mark,
.season-mark,
.reaction-mark {
  --mark-a: var(--icon-accent, var(--accent)) !important;
  --mark-b: var(--icon-accent2, var(--accent2)) !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.50), transparent 21%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--mark-a) 56%, rgba(255,255,255,.22)),
      color-mix(in srgb, var(--mark-b) 50%, rgba(255,255,255,.14))
    ) !important;
  border: 2px solid color-mix(in srgb, var(--mark-a) 54%, rgba(255,255,255,.38)) !important;
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--mark-a) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
  filter: none !important;
}

.ui-mark,
.game-mark,
.theme-art {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
}

.mini-mark,
.reaction-mark {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
}

.avatar-mark,
.season-mark {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

.ui-mark::before,
.game-mark::before,
.theme-art::before,
.mini-mark::before,
.avatar-mark::before,
.season-mark::before,
.reaction-mark::before,
.ui-mark::after,
.game-mark::after,
.theme-art::after,
.mini-mark::after,
.avatar-mark::after,
.season-mark::after,
.reaction-mark::after {
  content: "" !important;
  display: block !important;
}

.ui-mark::after,
.game-mark::after,
.theme-art::after,
.mini-mark::after,
.avatar-mark::after,
.season-mark::after,
.reaction-mark::after {
  position: absolute;
  inset: 7px !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  opacity: .72 !important;
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--mark-a) 32%, transparent) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, color-mix(in srgb, var(--mark-b) 30%, transparent) 49% 51%, transparent 52%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.72) 0 3px, transparent 4px),
    radial-gradient(circle at 17% 82%, rgba(255,255,255,.36) 0 2px, transparent 3px) !important;
}

.ui-mark-quiz::before,
.mini-mark-quiz::before,
.avatar-target::before,
.avatar-star::before,
.avatar-spark::before,
.avatar-shine::before,
.season-mark-classic::before {
  inset: 16px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle, var(--drawn-ink) 0 19%, transparent 21% 35%, var(--drawn-ink) 37% 49%, transparent 51%) !important;
}

.ui-mark-play::before,
.game-mark-timeline::before {
  inset: auto !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 13px solid transparent !important;
  border-bottom: 13px solid transparent !important;
  border-left: 21px solid var(--drawn-ink) !important;
  background: transparent !important;
  transform: translateX(2px) !important;
}

.ui-mark-multi::before {
  inset: 17px 13px !important;
  border: 4px solid var(--drawn-ink) !important;
  border-radius: 14px !important;
  box-shadow:
    -12px 0 0 -8px var(--drawn-ink),
    12px 0 0 -8px var(--drawn-ink) !important;
  background: transparent !important;
}

.game-mark-memory::before {
  inset: 15px !important;
  border-radius: 7px !important;
  border: 3px solid var(--drawn-ink) !important;
  background: transparent !important;
  transform: rotate(-7deg) !important;
  box-shadow: 9px 6px 0 -2px color-mix(in srgb, var(--drawn-ink) 72%, var(--mark-b)) !important;
}

.game-mark-popcorn::before {
  inset: 15px !important;
  border-radius: 4px 4px 11px 11px !important;
  background:
    linear-gradient(90deg, var(--drawn-ink) 0 24%, transparent 25% 38%, var(--drawn-ink) 39% 62%, transparent 63% 76%, var(--drawn-ink) 77%),
    color-mix(in srgb, var(--mark-a) 35%, transparent) !important;
  clip-path: polygon(8% 22%, 92% 22%, 80% 100%, 20% 100%) !important;
}

.game-mark-geo::before,
.theme-art-geopo::before,
.theme-art-paris::before {
  inset: 15px !important;
  border-radius: 50% 50% 50% 8px !important;
  background: var(--drawn-ink) !important;
  transform: rotate(-45deg) !important;
}

.game-mark-sondage::before,
.mini-mark-stats::before {
  inset: 8px !important;
  background:
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 0 65% / 25% 35% no-repeat,
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 38% 35% / 25% 65% no-repeat,
    linear-gradient(var(--drawn-ink), var(--drawn-ink)) 76% 10% / 25% 90% no-repeat !important;
}

.game-mark-price::before,
.avatar-gem::before {
  inset: 15px !important;
  background: var(--drawn-ink) !important;
  clip-path: polygon(20% 0, 80% 0, 100% 35%, 50% 100%, 0 35%) !important;
}

/* SVG test pack : recolorable par theme, style dessin propre */
.vector-icon {
  color: var(--icon-accent, var(--accent)) !important;
  --icon-fill: color-mix(in srgb, var(--icon-accent, var(--accent)) 68%, #ffffff);
  --icon-accent2: var(--icon-accent2, var(--accent2));
  overflow: visible !important;
  filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--icon-accent, var(--accent)) 24%, transparent));
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.vector-icon.ui-mark,
.vector-icon.game-mark,
.vector-icon.theme-art {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
}

.vector-icon.mini-mark,
.vector-icon.reaction-mark {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin-right: 7px;
}

.vector-icon.title-mark {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  margin-right: 8px;
}

:root:not([data-mode="dark"]) .vector-icon {
  filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--icon-accent, var(--accent)) 18%, transparent));
}

/* Vrais avatars : petits portraits dessines, sans emoji et sans image externe */
.real-avatar {
  --skin: #f2c7a6;
  --hair: #3f2a1f;
  --shirt: var(--accent);
  position: relative;
  display: inline-grid !important;
  place-items: center !important;
  overflow: visible !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 17px 13px 18px 14px !important;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.72), transparent 19%),
    linear-gradient(145deg, color-mix(in srgb, var(--shirt) 42%, #ffffff), color-mix(in srgb, var(--accent2) 36%, #ffffff)) !important;
  border: 2px solid color-mix(in srgb, var(--shirt) 48%, rgba(255,255,255,.55)) !important;
  box-shadow:
    0 12px 22px color-mix(in srgb, var(--shirt) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
  filter: none !important;
}

.real-avatar::before,
.real-avatar::after,
.real-avatar .avatar-face,
.real-avatar .avatar-face::before,
.real-avatar .avatar-face::after {
  content: "" !important;
  position: absolute;
  display: block !important;
  box-sizing: border-box;
}

.real-avatar::before {
  width: 24px;
  height: 25px;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  border-radius: 48% 48% 46% 46%;
  background: var(--skin) !important;
  border: 2px solid rgba(255,255,255,.34);
  z-index: 3;
}

.real-avatar::after {
  width: 31px;
  height: 19px;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  border-radius: 17px 17px 10px 10px;
  background: linear-gradient(145deg, var(--shirt), color-mix(in srgb, var(--shirt) 58%, var(--accent2))) !important;
  z-index: 1;
}

.real-avatar .avatar-face {
  width: 27px;
  height: 20px;
  left: 50%;
  top: 7px;
  transform: translateX(-50%);
  border-radius: 48% 48% 40% 40%;
  background: var(--hair) !important;
  z-index: 2;
}

.real-avatar .avatar-face::before {
  width: 3px;
  height: 3px;
  left: 9px;
  top: 17px;
  border-radius: 50%;
  background: #172033 !important;
  box-shadow: 9px 0 0 #172033;
  z-index: 5;
}

.real-avatar .avatar-face::after {
  width: 9px;
  height: 5px;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  border-bottom: 2px solid rgba(23,32,51,.72);
  border-radius: 50%;
  z-index: 5;
}

.avatar-style-short .avatar-face {
  height: 15px;
  border-radius: 50% 50% 38% 38%;
}

.avatar-style-bob .avatar-face {
  width: 30px;
  height: 25px;
  border-radius: 13px 13px 11px 11px;
}

.avatar-style-bun .avatar-face {
  width: 25px;
  height: 17px;
}

.avatar-style-bun .avatar-face::after {
  box-shadow: -15px -17px 0 4px var(--hair), 15px -17px 0 4px var(--hair);
}

.avatar-style-waves .avatar-face {
  width: 31px;
  height: 23px;
  border-radius: 15px 15px 11px 11px;
  box-shadow: inset 5px 0 0 color-mix(in srgb, var(--hair) 76%, #ffffff);
}

.avatar-style-curly .avatar-face {
  width: 31px;
  height: 22px;
  background:
    radial-gradient(circle at 13% 45%, var(--hair) 0 7px, transparent 8px),
    radial-gradient(circle at 37% 24%, var(--hair) 0 8px, transparent 9px),
    radial-gradient(circle at 61% 24%, var(--hair) 0 8px, transparent 9px),
    radial-gradient(circle at 87% 45%, var(--hair) 0 7px, transparent 8px) !important;
}

.avatar-style-long .avatar-face {
  width: 32px;
  height: 32px;
  border-radius: 15px 15px 13px 13px;
}

.avatar-style-fringe .avatar-face {
  width: 29px;
  height: 18px;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 55%, 58% 78%, 41% 54%, 25% 78%, 0 58%);
}

.avatar-style-cap .avatar-face {
  width: 30px;
  height: 12px;
  top: 6px;
  border-radius: 999px 999px 8px 8px;
  background: color-mix(in srgb, var(--shirt) 82%, #111827) !important;
}

.avatar-style-cap .avatar-face::after {
  width: 13px;
  height: 5px;
  left: 22px;
  top: 5px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shirt) 72%, #ffffff) !important;
}

.drawn-avatar-btn .real-avatar {
  width: 46px !important;
  height: 46px !important;
}

.drawn-avatar-btn.active .real-avatar {
  outline: 3px solid color-mix(in srgb, var(--accent) 62%, rgba(255,255,255,.70));
  outline-offset: 2px;
}

#userIconDisplay .avatar-mark-menu,
.g-msg-avatar .avatar-mark-chat,
.g-avatar .avatar-mark-chat {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  transform: scale(.88);
  transform-origin: center;
}

/* Avatars objets en images : remplace les anciens visages CSS. */
img.avatar-image,
img.season-image {
  display: inline-block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
  filter: drop-shadow(0 10px 14px rgba(8, 12, 30, .22));
}

.drawn-avatar-btn {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.08) !important;
  border: 2px solid rgba(255,255,255,.18) !important;
}

.drawn-avatar-btn:hover,
.drawn-avatar-btn.active {
  background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.10)) !important;
  border-color: color-mix(in srgb, var(--accent) 72%, #ffffff) !important;
}

.drawn-avatar-btn .avatar-image {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
}

.drawn-avatar-btn.active .avatar-image {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 62%, transparent)) drop-shadow(0 10px 14px rgba(8, 12, 30, .24));
}

#userIconDisplay .avatar-image,
#userIconDisplay .avatar-mark-menu,
.g-msg-avatar .avatar-image,
.g-msg-avatar .avatar-mark-chat,
.g-avatar .avatar-image,
.g-avatar .avatar-mark-chat {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  transform: none !important;
}

.g-avatar:has(.avatar-image),
.g-msg-avatar:has(.avatar-image) {
  background: transparent !important;
}

.seasonal-theme-btn .season-image {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  margin-bottom: 2px !important;
}

/* Dernier passage UX : decor fixe, nav legere, zero pluie d'icones. */
.seasonal-emoji {
  display: block !important;
  width: clamp(42px, 4.3vw, 66px) !important;
  height: clamp(42px, 4.3vw, 66px) !important;
  z-index: 0 !important;
  opacity: 0;
  filter: drop-shadow(0 16px 22px rgba(5, 8, 24, .20));
}

.seasonal-doodle {
  --season-fall-a: var(--accent);
  --season-fall-b: var(--accent2);
  border-radius: 18px 14px 20px 15px !important;
  background:
    radial-gradient(circle at 27% 22%, rgba(255,255,255,.58), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.50), transparent 0 7%, transparent 8%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--season-fall-a, var(--accent)) 30%, rgba(255,255,255,.72)),
      color-mix(in srgb, var(--season-fall-b, var(--accent2)) 28%, rgba(255,255,255,.48))) !important;
  border: 1.5px solid color-mix(in srgb, var(--season-fall-a, var(--accent)) 48%, rgba(255,255,255,.74)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 14px 28px color-mix(in srgb, var(--season-fall-a, var(--accent)) 18%, transparent) !important;
}

html[data-mode="dark"] .seasonal-doodle {
  background:
    radial-gradient(circle at 27% 22%, rgba(255,255,255,.50), transparent 20%),
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.42), transparent 0 7%, transparent 8%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--season-fall-a, var(--accent)) 38%, rgba(255,255,255,.18)),
      color-mix(in srgb, var(--season-fall-b, var(--accent2)) 30%, rgba(255,255,255,.10))) !important;
  border-color: color-mix(in srgb, var(--season-fall-a, var(--accent)) 48%, rgba(255,255,255,.34)) !important;
}

body[data-seasonal="printemps"] .seasonal-doodle {
  --season-fall-a: #ec4899;
  --season-fall-b: #34d399;
}

body[data-seasonal="noel"] .seasonal-doodle {
  --season-fall-a: #10b981;
  --season-fall-b: #ef4444;
}

body[data-seasonal="halloween"] .seasonal-doodle {
  --season-fall-a: #a855f7;
  --season-fall-b: #f97316;
}

body[data-seasonal="ete"] .seasonal-doodle {
  --season-fall-a: #0ea5e9;
  --season-fall-b: #fbbf24;
}

body[data-seasonal="default"] .seasonal-doodle {
  --season-fall-a: #8b5cf6;
  --season-fall-b: #38bdf8;
}

.seasonal-doodle::before {
  background: none !important;
  border: 0 !important;
  opacity: .96;
}

.seasonal-doodle-sparkle::before,
.seasonal-doodle-star::before {
  inset: 23% !important;
  background: color-mix(in srgb, var(--season-fall-a, var(--accent)) 78%, #ffffff) !important;
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 72%, 20% 92%, 31% 56%, 2% 35%, 39% 34%) !important;
}

.seasonal-doodle-comet::before {
  inset: 32% !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--season-fall-a, var(--accent)) 78%, #ffffff) !important;
  box-shadow:
    -14px 5px 0 -5px color-mix(in srgb, var(--season-fall-b, var(--accent2)) 72%, #ffffff),
    -25px 10px 0 -8px color-mix(in srgb, var(--season-fall-a, var(--accent)) 48%, #ffffff) !important;
}

.seasonal-doodle-flower::before,
.seasonal-doodle-tulip::before,
.seasonal-doodle-leaf::before {
  inset: 19% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, #fff7c7 0 15%, transparent 17%),
    radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--season-fall-a) 78%, #ffffff) 0 18%, transparent 20%),
    radial-gradient(circle at 85% 50%, color-mix(in srgb, var(--season-fall-b) 78%, #ffffff) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 85%, color-mix(in srgb, var(--season-fall-a) 72%, #ffffff) 0 18%, transparent 20%),
    radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--season-fall-b) 72%, #ffffff) 0 18%, transparent 20%) !important;
}

.seasonal-doodle-butterfly::before {
  inset: 16% !important;
  background:
    radial-gradient(ellipse at 28% 34%, color-mix(in srgb, var(--season-fall-a) 76%, #ffffff) 0 28%, transparent 30%),
    radial-gradient(ellipse at 72% 34%, color-mix(in srgb, var(--season-fall-b) 76%, #ffffff) 0 28%, transparent 30%),
    radial-gradient(ellipse at 30% 72%, color-mix(in srgb, var(--season-fall-b) 60%, #ffffff) 0 18%, transparent 20%),
    radial-gradient(ellipse at 70% 72%, color-mix(in srgb, var(--season-fall-a) 60%, #ffffff) 0 18%, transparent 20%),
    linear-gradient(#fff7d6, #fff7d6) 48% 18% / 8% 70% no-repeat !important;
}

.seasonal-doodle-snow::before {
  inset: 18% !important;
  background:
    linear-gradient(#ffffff, #ffffff) 48% 0 / 8% 100% no-repeat,
    linear-gradient(60deg, transparent 45%, #ffffff 46% 54%, transparent 55%),
    linear-gradient(-60deg, transparent 45%, #ffffff 46% 54%, transparent 55%) !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.55));
}

.seasonal-doodle-gift::before {
  inset: 23% !important;
  border-radius: 7px !important;
  background:
    linear-gradient(#fff4c2, #fff4c2) 46% 0 / 13% 100% no-repeat,
    linear-gradient(90deg, transparent 0 42%, #fff4c2 43% 57%, transparent 58%),
    color-mix(in srgb, var(--season-fall-b) 74%, #ffffff) !important;
}

.seasonal-doodle-pumpkin::before {
  inset: 20% !important;
  border-radius: 48% !important;
  background:
    linear-gradient(90deg, transparent 29%, rgba(255,255,255,.22) 30% 35%, transparent 36% 64%, rgba(255,255,255,.22) 65% 70%, transparent 71%),
    color-mix(in srgb, var(--season-fall-b) 82%, #ffffff) !important;
}

.seasonal-doodle-ghost::before {
  inset: 17% 22% !important;
  border-radius: 50% 50% 10px 10px !important;
  background:
    radial-gradient(circle at 37% 43%, #182033 0 5%, transparent 6%),
    radial-gradient(circle at 63% 43%, #182033 0 5%, transparent 6%),
    #ffffff !important;
  clip-path: polygon(0 22%, 18% 0, 82% 0, 100% 22%, 100% 100%, 75% 82%, 50% 100%, 25% 82%, 0 100%) !important;
}

.seasonal-doodle-wave::before {
  inset: 30% 15% !important;
  border-radius: 50% !important;
  border-top: 7px solid color-mix(in srgb, var(--season-fall-a) 74%, #ffffff) !important;
  transform: rotate(-8deg);
}

.seasonal-doodle-sun::before {
  inset: 25% !important;
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--season-fall-b) 84%, #ffffff) !important;
  box-shadow:
    0 -13px 0 -7px color-mix(in srgb, var(--season-fall-b) 76%, #ffffff),
    0 13px 0 -7px color-mix(in srgb, var(--season-fall-b) 76%, #ffffff),
    13px 0 0 -7px color-mix(in srgb, var(--season-fall-b) 76%, #ffffff),
    -13px 0 0 -7px color-mix(in srgb, var(--season-fall-b) 76%, #ffffff) !important;
}

html[data-mode="dark"] body::before {
  animation: none !important;
  opacity: .42 !important;
}

body[data-seasonal="halloween"]::before {
  content: "" !important;
  background: none !important;
  animation: none !important;
}

body[data-seasonal]::after,
html[data-mode="dark"] body:not([data-seasonal])::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .48 !important;
  filter: none !important;
  animation: none !important;
  background-repeat: no-repeat !important;
  background-size: 330px 210px, 260px 220px, 360px 210px, 300px 200px !important;
  background-position: left -60px top 70px, right -34px top 46px, left -70px bottom 42px, right -54px bottom 44px !important;
}

.app,
#multiApp,
#multiApp .multi-inner,
.page {
  position: relative;
  z-index: 1;
}

.nav {
  background: linear-gradient(180deg, rgba(7, 10, 26, 0), rgba(7, 10, 26, .54)) !important;
  border-top: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.nav .inner {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: none !important;
  margin: 0 auto 10px !important;
  padding: 8px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: rgba(19, 24, 46, .58) !important;
  box-shadow: 0 14px 36px rgba(4, 7, 22, .24) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

:root:not([data-mode="dark"]) .nav {
  background: linear-gradient(180deg, rgba(255,255,255,0), color-mix(in srgb, var(--accent) 11%, rgba(255,255,255,.38))) !important;
}

:root:not([data-mode="dark"]) .nav .inner {
  background: rgba(255,255,255,.52) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 16px 42px rgba(60, 42, 96, .13) !important;
}

.nav .inner button {
  overflow: hidden !important;
  border-radius: 20px !important;
  padding: 10px 8px 12px !important;
  color: rgba(255,255,255,.74) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}

:root:not([data-mode="dark"]) .nav .inner button {
  color: #415069 !important;
}

.nav .inner button::before {
  display: none !important;
}

.nav .inner button:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.10) !important;
}

.nav .inner button.active {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  border-color: color-mix(in srgb, var(--accent) 54%, rgba(255,255,255,.34)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

:root:not([data-mode="dark"]) .nav .inner button.active {
  color: #172033 !important;
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.72)) !important;
  border-color: color-mix(in srgb, var(--accent) 44%, rgba(255,255,255,.72)) !important;
}

.nav .inner button.active::after {
  content: "" !important;
  position: absolute !important;
  left: 28% !important;
  right: 28% !important;
  bottom: 5px !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--accent3), var(--accent), var(--accent2)) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 44%, transparent) !important;
}

html[data-mode="dark"] #multiApp::before,
.night-cloud-layer,
.cloud {
  display: none !important;
  animation: none !important;
}

body[data-seasonal="default"]::after,
html[data-mode="dark"] body:not([data-seasonal])::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 260'%3E%3Cpath d='M17 164c40-48 93 5 134-33 28-27 67-44 104-20 31 20 70-7 121 8' fill='none' stroke='%23f4d5a0' stroke-width='6' stroke-linecap='round' opacity='.38'/%3E%3Cpath d='M64 174c16 22 57 13 66-12' fill='none' stroke='%23f4d5a0' stroke-width='4' stroke-linecap='round' opacity='.45'/%3E%3Ccircle cx='248' cy='74' r='42' fill='%23f2c77c' opacity='.20'/%3E%3Cpath d='M252 38a43 43 0 1 0 34 69 45 45 0 0 1-55-58 42 42 0 0 1 21-11z' fill='%23f7d79e' opacity='.48'/%3E%3Cpath d='M340 42l8 18 18 8-18 8-8 18-8-18-18-8 18-8z' fill='%23ffc66e' opacity='.70'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 260'%3E%3Ccircle cx='232' cy='126' r='62' fill='%239d7b55' opacity='.28'/%3E%3Ccircle cx='212' cy='105' r='66' fill='%23d6c8b2' opacity='.16'/%3E%3Cpath d='M37 161c44-38 83 4 121-22 29-20 63-24 98-4 28 16 49 2 72-9' fill='none' stroke='%23e8d6b2' stroke-width='5' stroke-linecap='round' opacity='.34'/%3E%3Cpath d='M84 79l10 23 23 10-23 10-10 23-10-23-23-10 23-10z' fill='%23ffc66e' opacity='.56'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 250'%3E%3Cpath d='M19 141c49-47 102 15 151-22 42-32 78-45 128-14 33 20 68 5 111-15' fill='none' stroke='%23e8d6b2' stroke-width='6' stroke-linecap='round' opacity='.34'/%3E%3Cpath d='M28 153c21 34 72 26 89-8' fill='none' stroke='%23e8d6b2' stroke-width='4' stroke-linecap='round' opacity='.42'/%3E%3Ccircle cx='102' cy='74' r='50' fill='%23f5d08e' opacity='.19'/%3E%3Cpath d='M313 47l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='%23f5d08e' opacity='.58'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 250'%3E%3Cpath d='M28 155c48-45 98 13 142-19 34-25 79-40 127-11 25 15 46 12 65 1' fill='none' stroke='%23e8d6b2' stroke-width='6' stroke-linecap='round' opacity='.30'/%3E%3Ccircle cx='242' cy='86' r='48' fill='%239d7b55' opacity='.23'/%3E%3Cpath d='M72 49l9 20 20 9-20 9-9 20-9-20-20-9 20-9z' fill='%23ffc66e' opacity='.54'/%3E%3C/svg%3E") !important;
}

body[data-seasonal="printemps"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cpath d='M80 132c43-44 94-48 151-18' fill='none' stroke='%2347c79b' stroke-width='7' stroke-linecap='round' opacity='.38'/%3E%3Cpath d='M133 102c-34-29-72-16-78 18 31 20 65 18 78-18z' fill='%23f5a7cf' opacity='.58'/%3E%3Cpath d='M137 102c30-31 69-22 78 11-27 23-62 25-78-11z' fill='%238ee7c1' opacity='.62'/%3E%3Ccircle cx='136' cy='106' r='9' fill='%23ffffff' opacity='.75'/%3E%3Cpath d='M255 55l8 18 18 8-18 8-8 18-8-18-18-8 18-8z' fill='%23ff93bf' opacity='.55'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Ccircle cx='178' cy='104' r='16' fill='%23ffd36f' opacity='.80'/%3E%3Cpath d='M178 45c20 29 20 88 0 117-20-29-20-88 0-117zM119 104c29-20 88-20 117 0-29 20-88 20-117 0zM136 63c34 6 75 48 81 82-34-6-75-48-81-82zM219 63c-6 34-48 75-82 81 6-34 48-75 82-81z' fill='%23f8a3cf' opacity='.52'/%3E%3Cpath d='M42 174c49-31 95-18 126 17' fill='none' stroke='%2369d7a8' stroke-width='6' stroke-linecap='round' opacity='.38'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 240'%3E%3Cpath d='M70 151c63-57 141-52 216-9' fill='none' stroke='%2347c79b' stroke-width='7' stroke-linecap='round' opacity='.34'/%3E%3Cellipse cx='125' cy='104' rx='40' ry='22' fill='%23f7a6cf' opacity='.54'/%3E%3Cellipse cx='205' cy='95' rx='48' ry='25' fill='%2384e6c1' opacity='.52' transform='rotate(-17 205 95)'/%3E%3Ccircle cx='165' cy='102' r='10' fill='%23ffffff' opacity='.74'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M62 159c50-42 104-43 163-11' fill='none' stroke='%2347c79b' stroke-width='7' stroke-linecap='round' opacity='.33'/%3E%3Cpath d='M132 119c-19-38-58-40-80-15 17 31 50 45 80 15zM139 121c30-30 68-20 79 12-26 25-61 27-79-12z' fill='%23f7a6cf' opacity='.52'/%3E%3Cpath d='M248 54l7 16 16 7-16 7-7 16-7-16-16-7 16-7z' fill='%2384e6c1' opacity='.60'/%3E%3C/svg%3E") !important;
}

body[data-seasonal="noel"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cpath d='M34 170c44-33 95-23 139 7 39 27 84 21 137-14' fill='none' stroke='%23dbeafe' stroke-width='7' stroke-linecap='round' opacity='.48'/%3E%3Crect x='116' y='72' width='86' height='72' rx='15' fill='%23ef4444' opacity='.56'/%3E%3Cpath d='M159 72v72M116 107h86' stroke='%23fef3c7' stroke-width='10' opacity='.72'/%3E%3Cpath d='M270 54v76M232 92h76M243 65l54 54M297 65l-54 54' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M42 170c52-39 120-27 178 14' fill='none' stroke='%23dbeafe' stroke-width='7' stroke-linecap='round' opacity='.45'/%3E%3Cpath d='M166 47l54 111H112z' fill='%2310b981' opacity='.50'/%3E%3Cpath d='M166 71l39 84h-78z' fill='%2334d399' opacity='.45'/%3E%3Ccircle cx='160' cy='104' r='5' fill='%23fef3c7' opacity='.90'/%3E%3Ccircle cx='187' cy='129' r='5' fill='%23ef4444' opacity='.78'/%3E%3Cpath d='M260 58v70M225 93h70M235 68l50 50M285 68l-50 50' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 240'%3E%3Cpath d='M24 168c60-42 117-26 168 6 39 25 85 17 142-18' fill='none' stroke='%23dbeafe' stroke-width='7' stroke-linecap='round' opacity='.44'/%3E%3Cpath d='M92 71v76M54 109h76M65 82l54 54M119 82l-54 54' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' opacity='.62'/%3E%3Crect x='185' y='77' width='84' height='68' rx='15' fill='%23ef4444' opacity='.52'/%3E%3Cpath d='M227 77v68M185 111h84' stroke='%23fef3c7' stroke-width='10' opacity='.70'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M32 174c52-35 108-23 151 7 35 24 76 19 124-12' fill='none' stroke='%23dbeafe' stroke-width='7' stroke-linecap='round' opacity='.42'/%3E%3Cpath d='M152 50l50 104H104z' fill='%2310b981' opacity='.48'/%3E%3Cpath d='M260 57v68M226 91h68M237 68l46 46M283 68l-46 46' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' opacity='.62'/%3E%3C/svg%3E") !important;
}

body[data-seasonal="halloween"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Cpath d='M35 165c54-38 118-29 177 10 36 24 74 19 112-10' fill='none' stroke='%23d7c2ff' stroke-width='6' stroke-linecap='round' opacity='.32'/%3E%3Cellipse cx='147' cy='107' rx='65' ry='50' fill='%23f97316' opacity='.52'/%3E%3Cpath d='M147 53l13-27 13 28' fill='%23845a28' opacity='.58'/%3E%3Cpath d='M119 101l19 12-19 10zM173 101l-19 12 19 10z' fill='%23111827' opacity='.70'/%3E%3Cpath d='M121 133c25 18 53 18 78 0' fill='none' stroke='%23111827' stroke-width='7' stroke-linecap='round' opacity='.62'/%3E%3Cpath d='M260 65c36 0 48 27 48 58v47l-20-16-20 16-20-16-20 16v-47c0-31 12-58 32-58z' fill='%23ffffff' opacity='.50'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M44 166c58-42 120-28 183 14' fill='none' stroke='%23d7c2ff' stroke-width='6' stroke-linecap='round' opacity='.30'/%3E%3Cpath d='M144 51c40 0 56 33 56 71v50l-22-17-22 17-22-17-22 17v-50c0-38 16-71 32-71z' fill='%23ffffff' opacity='.54'/%3E%3Ccircle cx='132' cy='105' r='6' fill='%23111827' opacity='.66'/%3E%3Ccircle cx='159' cy='105' r='6' fill='%23111827' opacity='.66'/%3E%3Cellipse cx='259' cy='117' rx='45' ry='36' fill='%23f97316' opacity='.44'/%3E%3Cpath d='M249 111l14 8-14 7zM276 111l-14 8 14 7z' fill='%23111827' opacity='.66'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 240'%3E%3Cpath d='M27 170c57-39 115-29 167 4 44 27 88 20 145-17' fill='none' stroke='%23d7c2ff' stroke-width='6' stroke-linecap='round' opacity='.30'/%3E%3Cpath d='M95 55c37 0 51 31 51 66v45l-20-16-20 16-20-16-20 16v-45c0-35 14-66 29-66z' fill='%23ffffff' opacity='.50'/%3E%3Cellipse cx='246' cy='110' rx='60' ry='46' fill='%23f97316' opacity='.48'/%3E%3Cpath d='M224 105l17 10-17 9zM270 105l-17 10 17 9z' fill='%23111827' opacity='.68'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M35 170c47-36 96-30 147 0 42 25 76 20 124-14' fill='none' stroke='%23d7c2ff' stroke-width='6' stroke-linecap='round' opacity='.28'/%3E%3Cellipse cx='122' cy='111' rx='50' ry='39' fill='%23f97316' opacity='.48'/%3E%3Cpath d='M237 54c34 0 47 29 47 62v44l-18-14-18 14-18-14-18 14v-44c0-33 13-62 25-62z' fill='%23ffffff' opacity='.49'/%3E%3C/svg%3E") !important;
}

body[data-seasonal="ete"]::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'%3E%3Ccircle cx='248' cy='76' r='43' fill='%23ffd166' opacity='.66'/%3E%3Cpath d='M248 13v31M248 108v32M185 76h31M280 76h32M204 32l22 22M270 98l22 22M292 32l-22 22M226 98l-22 22' stroke='%23ffd166' stroke-width='7' stroke-linecap='round' opacity='.50'/%3E%3Cpath d='M26 166c36-25 67-25 103 0s67 25 103 0 67-25 103 0' fill='none' stroke='%2338bdf8' stroke-width='9' stroke-linecap='round' opacity='.54'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M25 164c36-25 68-25 104 0s68 25 104 0 50-21 79-4' fill='none' stroke='%2338bdf8' stroke-width='9' stroke-linecap='round' opacity='.54'/%3E%3Ccircle cx='118' cy='78' r='41' fill='%23ffd166' opacity='.58'/%3E%3Cpath d='M118 17v29M118 109v29M57 78h29M150 78h29' stroke='%23ffd166' stroke-width='7' stroke-linecap='round' opacity='.48'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 240'%3E%3Cpath d='M27 165c39-26 72-26 111 0s72 26 111 0 72-26 111 0' fill='none' stroke='%2338bdf8' stroke-width='9' stroke-linecap='round' opacity='.50'/%3E%3Ccircle cx='260' cy='76' r='42' fill='%23ffd166' opacity='.54'/%3E%3Cpath d='M260 18v28M260 107v28M201 76h28M291 76h28' stroke='%23ffd166' stroke-width='7' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 240'%3E%3Cpath d='M30 166c37-25 69-25 106 0s69 25 106 0 47-20 74-5' fill='none' stroke='%2338bdf8' stroke-width='9' stroke-linecap='round' opacity='.48'/%3E%3Ccircle cx='107' cy='77' r='38' fill='%23ffd166' opacity='.52'/%3E%3C/svg%3E") !important;
}

:root:not([data-mode="dark"]) body[data-seasonal]::after {
  opacity: .34 !important;
}

/* Icônes saisonnières sans bulle : uniquement le dessin qui tombe. */
.seasonal-emoji {
  width: clamp(54px, 5vw, 78px) !important;
  height: clamp(54px, 5vw, 78px) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  filter: drop-shadow(0 16px 18px rgba(5, 8, 24, .22)) !important;
}

.seasonal-doodle {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html[data-mode="dark"] .seasonal-doodle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.seasonal-doodle::before {
  text-indent: 0 !important;
  filter: drop-shadow(0 8px 10px rgba(5, 8, 24, .18));
}

.seasonal-doodle::after {
  display: none !important;
}

.seasonal-doodle-sparkle::before,
.seasonal-doodle-star::before {
  inset: 14% !important;
}

.seasonal-doodle-comet::before {
  inset: 22% !important;
}

.seasonal-doodle-flower::before,
.seasonal-doodle-tulip::before,
.seasonal-doodle-leaf::before {
  inset: 8% !important;
}

.seasonal-doodle-butterfly::before {
  inset: 5% !important;
  filter: drop-shadow(0 9px 11px rgba(5, 8, 24, .20));
}

.seasonal-doodle-snow::before {
  inset: 9% !important;
  filter: drop-shadow(0 0 9px rgba(255,255,255,.75)) drop-shadow(0 8px 10px rgba(5,8,24,.16));
}

.seasonal-doodle-gift::before {
  inset: 12% !important;
}

.seasonal-doodle-pumpkin::before {
  inset: 8% !important;
}

.seasonal-doodle-ghost::before {
  inset: 2% 14% 0 !important;
  background:
    radial-gradient(circle at 37% 42%, #141827 0 6%, transparent 7%),
    radial-gradient(circle at 63% 42%, #141827 0 6%, transparent 7%),
    linear-gradient(180deg, #ffffff 0%, #efe9ff 100%) !important;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.42))
    drop-shadow(0 12px 14px rgba(5,8,24,.26));
}

.seasonal-doodle-wave::before {
  inset: 20% 8% !important;
  border-top-width: 9px !important;
}

.seasonal-doodle-sun::before {
  inset: 14% !important;
}

@keyframes springDecor {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: .74; }
  50%  { transform: translate3d(var(--decor-sway), 52vh, 0) rotate(var(--decor-spin)); opacity: .82; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(calc(var(--decor-spin) * 2)); opacity: 0; }
}

@keyframes butterflyDecor {
  0%   { transform: translate3d(0, 0, 0) rotate(-8deg) scale(.92); opacity: 0; }
  12%  { opacity: .78; }
  35%  { transform: translate3d(var(--decor-step-one), -34px, 0) rotate(10deg) scale(1.05); opacity: .84; }
  70%  { transform: translate3d(var(--decor-step-two), 28px, 0) rotate(-12deg) scale(.98); opacity: .72; }
  100% { transform: translate3d(var(--decor-direction), -8px, 0) rotate(8deg) scale(.9); opacity: 0; }
}

@keyframes winterDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); opacity: 0; }
  15%  { opacity: .72; }
  55%  { transform: translate3d(var(--decor-sway), 58vh, 0) rotate(120deg); opacity: .82; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(260deg); opacity: 0; }
}

@keyframes giftDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(-8deg) scale(.9); opacity: 0; }
  12%  { opacity: .76; }
  72%  { opacity: .70; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(var(--decor-spin)) scale(1.02); opacity: 0; }
}

@keyframes halloweenDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(-12deg); opacity: 0; }
  14%  { opacity: .78; }
  62%  { transform: translate3d(var(--decor-sway), 62vh, 0) rotate(18deg); opacity: .84; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) rotate(var(--decor-spin)); opacity: 0; }
}

@keyframes ghostDecor {
  0%   { transform: translate3d(0, -8vh, 0) scale(.88); opacity: 0; }
  18%  { opacity: .88; }
  45%  { transform: translate3d(calc(var(--decor-sway) * -1), 38vh, 0) scale(1.04); opacity: .92; }
  76%  { transform: translate3d(var(--decor-sway), 76vh, 0) scale(.96); opacity: .86; }
  100% { transform: translate3d(var(--decor-drift), 112vh, 0) scale(.9); opacity: 0; }
}

@keyframes sunDecor {
  0%   { transform: translate3d(0, -12vh, 0) rotate(0deg) scale(.8); opacity: 0; }
  20%  { opacity: .78; }
  55%  { transform: translate3d(var(--decor-sway), 42vh, 0) rotate(90deg) scale(1.04); opacity: .84; }
  100% { transform: translate3d(var(--decor-drift), 108vh, 0) rotate(180deg) scale(.92); opacity: 0; }
}

@keyframes waveDecor {
  0%   { transform: translate3d(0, 0, 0) scale(.95); opacity: 0; }
  12%  { opacity: .74; }
  50%  { transform: translate3d(var(--decor-step-one), -18px, 0) scale(1.05); opacity: .82; }
  100% { transform: translate3d(var(--decor-direction), 12px, 0) scale(.95); opacity: 0; }
}

@keyframes sparkleDecor {
  0%   { transform: translate3d(0, -8vh, 0) scale(.7); opacity: 0; }
  25%  { opacity: .70; }
  65%  { opacity: .62; }
  100% { transform: translate3d(var(--decor-drift), 100vh, 0) scale(1); opacity: 0; }
}

/* Validation option 3 : jour jardin/bassin, palette reduite et icones sans bulle. */
:root:not([data-mode="dark"]) {
  --accent: #4faaa0 !important;
  --accent2: #8fc69a !important;
  --accent3: #2f7d72 !important;
  --bg: #cfe8e5 !important;
  --bg2: #f6edcf !important;
  --bg3: #d3e8d9 !important;
  --card: rgba(255,255,255,.42) !important;
  --card-hover: rgba(255,255,255,.55) !important;
  --line: rgba(255,255,255,.55) !important;
  --text: #172033 !important;
  --muted: #53657a !important;
  --shadow: 0 22px 64px rgba(33, 77, 83, .16) !important;
  --shadow-card: 0 14px 36px rgba(33, 77, 83, .12) !important;
  --glow: none !important;
}

:root:not([data-mode="dark"]) body,
:root:not([data-mode="dark"]) #multiApp {
  background:
    linear-gradient(180deg, rgba(207,232,229,.92), rgba(246,237,207,.78) 52%, rgba(211,232,217,.90)),
    url("assets/backgrounds/garden-scene.svg") center top / cover no-repeat fixed !important;
}

:root:not([data-mode="dark"]) body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.22)),
    url("assets/backgrounds/garden-scene.svg") center top / cover no-repeat !important;
  opacity: .82 !important;
  animation: none !important;
}

:root:not([data-mode="dark"]) body::after {
  opacity: .045 !important;
}

:root:not([data-mode="dark"]) .gradient {
  background: linear-gradient(100deg, #1f4f70, #347e79 55%, #d49a4d) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

:root:not([data-mode="dark"]) .mode-card,
:root:not([data-mode="dark"]) .card,
:root:not([data-mode="dark"]) .daily-card,
:root:not([data-mode="dark"]) .titoue-play-card,
:root:not([data-mode="dark"]) .theme-card,
:root:not([data-mode="dark"]) .g-card,
:root:not([data-mode="dark"]) .g-daily-card,
:root:not([data-mode="dark"]) .g-challenge-card,
:root:not([data-mode="dark"]) .g-game-tile,
:root:not([data-mode="dark"]) .g-league-btn,
:root:not([data-mode="dark"]) .g-chat-wrap {
  background:
    radial-gradient(circle at 18% 13%, rgba(255,255,255,.52), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.20)) !important;
  border: 1.5px solid rgba(255,255,255,.58) !important;
  color: #172033 !important;
  box-shadow:
    0 22px 60px rgba(33, 77, 83, .13),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
}

:root:not([data-mode="dark"]) .solo-card,
:root:not([data-mode="dark"]) .play-card,
:root:not([data-mode="dark"]) .multi-card {
  background:
    radial-gradient(circle at 18% 13%, rgba(255,255,255,.52), transparent 25%),
    linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.20)) !important;
}

:root:not([data-mode="dark"]) .mode-card *,
:root:not([data-mode="dark"]) .card *,
:root:not([data-mode="dark"]) .g-game-tile-label,
:root:not([data-mode="dark"]) .g-detail-title {
  color: #172033 !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .mode-desc,
:root:not([data-mode="dark"]) .muted,
:root:not([data-mode="dark"]) .tiny,
:root:not([data-mode="dark"]) .g-game-tile-desc,
:root:not([data-mode="dark"]) .g-game-tile-count {
  color: #53657a !important;
}

:root:not([data-mode="dark"]) .mode-badge,
:root:not([data-mode="dark"]) .badge,
:root:not([data-mode="dark"]) .daily-badge,
:root:not([data-mode="dark"]) .g-game-tile-launch,
:root:not([data-mode="dark"]) .g-score-badge,
:root:not([data-mode="dark"]) .g-todo-badge {
  background: rgba(255,255,255,.46) !important;
  border: 1px solid rgba(255,255,255,.66) !important;
  color: #172033 !important;
  box-shadow: 0 8px 18px rgba(33, 77, 83, .10) !important;
}

:root:not([data-mode="dark"]) .btn.primary,
:root:not([data-mode="dark"]) .g-create-btn,
:root:not([data-mode="dark"]) .g-daily-option,
:root:not([data-mode="dark"]) .g-cat-choice,
:root:not([data-mode="dark"]) .g-vote-btn,
:root:not([data-mode="dark"]) .popcorn-option,
:root:not([data-mode="dark"]) .timeline-controls button {
  background: linear-gradient(135deg, #2f7d72, #6aa875) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.62) !important;
  box-shadow: 0 14px 30px rgba(47, 125, 114, .18) !important;
}

:root:not([data-mode="dark"]) .nav {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(122, 169, 149, .28)) !important;
}

:root:not([data-mode="dark"]) .nav .inner {
  background: rgba(255,255,255,.42) !important;
  border-color: rgba(255,255,255,.66) !important;
}

:root:not([data-mode="dark"]) .nav .inner button.active::after {
  background: linear-gradient(90deg, #2f7d72, #6aa875) !important;
  box-shadow: none !important;
}

.seasonal-fall {
  width: clamp(50px, 4.8vw, 74px) !important;
  height: clamp(50px, 4.8vw, 74px) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: visible !important;
  filter: drop-shadow(0 12px 14px rgba(5,8,24,.22)) !important;
}

.seasonal-fall::before,
.seasonal-fall::after {
  content: "" !important;
  position: absolute !important;
  box-sizing: border-box !important;
}

.seasonal-fall::after {
  display: none !important;
}

.seasonal-fall-flower::before,
.seasonal-fall-tulip::before,
.seasonal-fall-leaf::before {
  inset: 8% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, #fff7c7 0 15%, transparent 17%),
    radial-gradient(circle at 50% 15%, #f8a6c8 0 18%, transparent 20%),
    radial-gradient(circle at 85% 50%, #8fd9a8 0 18%, transparent 20%),
    radial-gradient(circle at 50% 85%, #f8a6c8 0 18%, transparent 20%),
    radial-gradient(circle at 15% 50%, #8fd9a8 0 18%, transparent 20%) !important;
}

.seasonal-fall-butterfly::before {
  inset: 5% !important;
  background:
    radial-gradient(ellipse at 28% 34%, #f2a3c9 0 28%, transparent 30%),
    radial-gradient(ellipse at 72% 34%, #8fd9c2 0 28%, transparent 30%),
    radial-gradient(ellipse at 30% 72%, #9bd9ad 0 18%, transparent 20%),
    radial-gradient(ellipse at 70% 72%, #f6bdd8 0 18%, transparent 20%),
    linear-gradient(#fff7d6, #fff7d6) 48% 18% / 8% 70% no-repeat !important;
}

.seasonal-fall-snow::before {
  inset: 9% !important;
  background:
    linear-gradient(#ffffff, #ffffff) 48% 0 / 8% 100% no-repeat,
    linear-gradient(60deg, transparent 45%, #ffffff 46% 54%, transparent 55%),
    linear-gradient(-60deg, transparent 45%, #ffffff 46% 54%, transparent 55%) !important;
  filter: drop-shadow(0 0 9px rgba(255,255,255,.75));
}

.seasonal-fall-gift::before {
  inset: 12% !important;
  border-radius: 8px !important;
  background:
    linear-gradient(#fff4c2, #fff4c2) 46% 0 / 13% 100% no-repeat,
    linear-gradient(90deg, transparent 0 42%, #fff4c2 43% 57%, transparent 58%),
    #e66f6f !important;
}

.seasonal-fall-pumpkin::before {
  inset: 8% !important;
  border-radius: 48% !important;
  background:
    linear-gradient(90deg, transparent 29%, rgba(255,255,255,.22) 30% 35%, transparent 36% 64%, rgba(255,255,255,.22) 65% 70%, transparent 71%),
    #f29a4b !important;
}

.seasonal-fall-ghost::before {
  inset: 2% 14% 0 !important;
  border-radius: 50% 50% 10px 10px !important;
  background:
    radial-gradient(circle at 37% 42%, #141827 0 6%, transparent 7%),
    radial-gradient(circle at 63% 42%, #141827 0 6%, transparent 7%),
    linear-gradient(180deg, #ffffff 0%, #efe9ff 100%) !important;
  clip-path: polygon(0 22%, 18% 0, 82% 0, 100% 22%, 100% 100%, 75% 82%, 50% 100%, 25% 82%, 0 100%) !important;
}

.seasonal-fall-wave::before {
  inset: 20% 8% !important;
  border-radius: 50% !important;
  border-top: 9px solid #60c5d1 !important;
  transform: rotate(-8deg);
}

.seasonal-fall-sun::before {
  inset: 14% !important;
  border-radius: 50% !important;
  background: #ffd166 !important;
  box-shadow:
    0 -13px 0 -7px #ffd166,
    0 13px 0 -7px #ffd166,
    13px 0 0 -7px #ffd166,
    -13px 0 0 -7px #ffd166 !important;
}

.seasonal-fall-sparkle::before,
.seasonal-fall-star::before {
  inset: 14% !important;
  background: #f7d28c !important;
  clip-path: polygon(50% 0, 61% 34%, 98% 35%, 69% 56%, 80% 92%, 50% 72%, 20% 92%, 31% 56%, 2% 35%, 39% 34%) !important;
}

.seasonal-fall-comet::before {
  inset: 22% !important;
  border-radius: 50% !important;
  background: #f7d28c !important;
  box-shadow: -14px 5px 0 -5px #8fd9c2, -25px 10px 0 -8px #f7d28c !important;
}

/* Mode jour : DA illustrée, plus calme et moins multicolore. */
:root:not([data-mode="dark"]) {
  --day-sky: #b8dcf2;
  --day-cream: #fff4da;
  --day-water: #76b8bd;
  --day-leaf: #75ad7a;
  --day-ink: #172033;
  --day-muted: #54657b;
  --line: rgba(84, 116, 137, .28) !important;
  --card: rgba(255, 255, 255, .46) !important;
  --card-hover: rgba(255, 255, 255, .58) !important;
  --text: var(--day-ink) !important;
  --muted: var(--day-muted) !important;
  --shadow: 0 24px 70px rgba(54, 82, 104, .17) !important;
  --shadow-card: 0 16px 42px rgba(54, 82, 104, .13) !important;
}

:root:not([data-mode="dark"]) body,
:root:not([data-mode="dark"]) #multiApp {
  background:
    linear-gradient(180deg, rgba(184,220,242,.96) 0%, rgba(255,244,218,.90) 52%, rgba(217,239,228,.94) 100%) !important;
}

:root:not([data-mode="dark"]) body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.18)),
    url("assets/backgrounds/day-scene.svg") center top / cover no-repeat !important;
  opacity: .78 !important;
  filter: saturate(.96) contrast(.98) !important;
}

:root:not([data-mode="dark"]) body[data-seasonal]::after {
  opacity: .06 !important;
  filter: saturate(.75) !important;
}

:root:not([data-mode="dark"]) .gradient {
  background: linear-gradient(100deg, #1f4f85 0%, #347e8d 54%, #d49a4d 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

:root:not([data-mode="dark"]) .home-title {
  text-shadow: 0 14px 30px rgba(52, 126, 141, .16) !important;
}

:root:not([data-mode="dark"]) .mode-card,
:root:not([data-mode="dark"]) .card,
:root:not([data-mode="dark"]) .daily-card,
:root:not([data-mode="dark"]) .titoue-play-card,
:root:not([data-mode="dark"]) .theme-card,
:root:not([data-mode="dark"]) .g-card,
:root:not([data-mode="dark"]) .g-daily-card,
:root:not([data-mode="dark"]) .g-challenge-card,
:root:not([data-mode="dark"]) .g-game-tile,
:root:not([data-mode="dark"]) .g-league-btn,
:root:not([data-mode="dark"]) .g-chat-wrap {
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.56), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.24)) !important;
  border: 1.5px solid rgba(255,255,255,.60) !important;
  box-shadow:
    0 24px 70px rgba(40, 75, 92, .13),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  color: var(--day-ink) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

:root:not([data-mode="dark"]) .mode-card::before,
:root:not([data-mode="dark"]) .theme-card::before,
:root:not([data-mode="dark"]) .g-game-tile::before {
  opacity: .18 !important;
  background: linear-gradient(120deg, rgba(255,255,255,.42), rgba(255,255,255,0)) !important;
}

:root:not([data-mode="dark"]) .mode-card *,
:root:not([data-mode="dark"]) .card *,
:root:not([data-mode="dark"]) .g-game-tile-label,
:root:not([data-mode="dark"]) .g-detail-title {
  color: var(--day-ink) !important;
  text-shadow: none !important;
}

:root:not([data-mode="dark"]) .mode-desc,
:root:not([data-mode="dark"]) .muted,
:root:not([data-mode="dark"]) .tiny,
:root:not([data-mode="dark"]) .g-game-tile-desc,
:root:not([data-mode="dark"]) .g-game-tile-count {
  color: var(--day-muted) !important;
}

:root:not([data-mode="dark"]) .mode-badge,
:root:not([data-mode="dark"]) .badge,
:root:not([data-mode="dark"]) .daily-badge,
:root:not([data-mode="dark"]) .g-game-tile-launch,
:root:not([data-mode="dark"]) .g-score-badge,
:root:not([data-mode="dark"]) .g-todo-badge {
  background: rgba(255,255,255,.46) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  color: var(--day-ink) !important;
  box-shadow: 0 8px 20px rgba(54, 82, 104, .10) !important;
}

:root:not([data-mode="dark"]) .btn.primary,
:root:not([data-mode="dark"]) .g-create-btn,
:root:not([data-mode="dark"]) .g-daily-option,
:root:not([data-mode="dark"]) .g-cat-choice,
:root:not([data-mode="dark"]) .g-vote-btn,
:root:not([data-mode="dark"]) .popcorn-option,
:root:not([data-mode="dark"]) .timeline-controls button {
  background: linear-gradient(135deg, #3b78ad, #6fb7a5) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.62) !important;
  box-shadow: 0 14px 32px rgba(59, 120, 173, .18) !important;
}

:root:not([data-mode="dark"]) .nav {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(164, 203, 213, .38)) !important;
}

:root:not([data-mode="dark"]) .nav .inner {
  background: rgba(255,255,255,.44) !important;
  border-color: rgba(255,255,255,.70) !important;
  box-shadow: 0 16px 42px rgba(40, 75, 92, .14) !important;
}

:root:not([data-mode="dark"]) .nav .inner button.active {
  background: rgba(255,255,255,.42) !important;
  border-color: rgba(255,255,255,.72) !important;
}

:root:not([data-mode="dark"]) .nav .inner button.active::after {
  background: linear-gradient(90deg, #3b78ad, #6fb7a5) !important;
  box-shadow: none !important;
}

:root:not([data-mode="dark"]) img.asset-icon {
  filter: drop-shadow(0 12px 18px rgba(40, 75, 92, .18)) saturate(.95) !important;
}