/* ============================================================
 * Tivan le Serpent — v8.0-edu
 * Responsive-first, mobile→desktop. Respects prefers-color-scheme
 * and prefers-reduced-motion.
 * ============================================================ */

:root {
  --tivan-bg: #0f172a;
  --tivan-panel-bg: #111827;
  --tivan-fg: #e2e8f0;
  --tivan-fg-dim: #94a3b8;
  --tivan-accent: #22c55e;
  --tivan-accent-2: #38bdf8;
  --tivan-danger: #f43f5e;
  --tivan-common: #22c55e;
  --tivan-rare: #38bdf8;
  --tivan-epic: #a855f7;
  --tivan-legendary: #facc15;
  --tivan-secret: #f472b6;
  --tivan-radius: 10px;
  --tivan-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --tivan-safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    --tivan-bg: #f8fafc;
    --tivan-panel-bg: #ffffff;
    --tivan-fg: #0f172a;
    --tivan-fg-dim: #475569;
  }
}

.tivan-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  /* v8.7.0 : containment isole les repaints du jeu du reste de la page WP.
     `layout` + `style` + `paint` permet au browser de skipper le reflow/paint
     du document parent quand seul le canvas/HUD change. Gain mesurable sur
     pages WP chargées de widgets/sidebars. */
  contain: layout style paint;
  color: var(--tivan-fg);
  background: var(--tivan-bg);
  border-radius: var(--tivan-radius);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* v8.5.0 : largeur étendue pour réduire l'espace perdu autour du canvas
     sur grand écran. Avant : 1040px. Après : on suit le conteneur. */
  max-width: 1280px;
  margin: 0 auto;
  outline: none;
}

.tivan-wrapper.playing {
  overflow: hidden;
}

.tivan-hidden { display: none !important; }

/* Header */
.tivan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--tivan-panel-bg) 80%, transparent);
  border-radius: var(--tivan-radius);
}
.tivan-equation {
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: .02em;
}
.tivan-scoreboard {
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--tivan-fg-dim);
}
.tivan-scoreboard .tivan-score {
  color: var(--tivan-fg);
  font-weight: 700;
  margin-left: 4px;
}

/* Stage */
.tivan-stage {
  position: relative;
  display: flex;
  justify-content: center;
}
.tivan-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: var(--tivan-bg);
  border-radius: var(--tivan-radius);
  box-shadow: var(--tivan-shadow);
  touch-action: none;
}

/* D-pad */
.tivan-dpad {
  display: grid;
  place-items: center;
  gap: 6px;
  padding-bottom: calc(8px + var(--tivan-safe-bottom));
}
.tivan-dpad .row {
  display: flex;
  gap: 30px;
}
.tivan-dpad .dpad {
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in srgb, var(--tivan-panel-bg) 90%, transparent);
  color: var(--tivan-fg);
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--tivan-shadow);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tivan-dpad .dpad:active { transform: translateY(1px); }

@media (min-width: 1025px) {
  .tivan-dpad { display: none; }
}

/* Overlays */
.tivan-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  border-radius: var(--tivan-radius);
  z-index: 5;
}
.tivan-panel {
  width: min(92%, 420px);
  background: var(--tivan-panel-bg);
  color: var(--tivan-fg);
  padding: 18px 18px 14px;
  border-radius: var(--tivan-radius);
  box-shadow: var(--tivan-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tivan-panel h2, .tivan-panel h3, .tivan-panel h4 {
  margin: 0;
  text-align: center;
}
.tivan-panel .tivan-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tivan-panel .tivan-field span {
  font-size: 13px;
  color: var(--tivan-fg-dim);
}
.tivan-panel input[type="text"],
.tivan-panel select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--tivan-fg-dim) 40%, transparent);
  background: var(--tivan-bg);
  color: var(--tivan-fg);
  font-size: 16px;
}

.tivan-logo {
  font-weight: 700;
  letter-spacing: .04em;
  text-align: center;
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}
.tivan-logo span { font-size: 22px; }

.tivan-btn {
  padding: 12px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--tivan-accent);
  color: #052e16;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  min-height: 44px;
}
.tivan-btn:hover { filter: brightness(1.1); }
.tivan-btn:focus-visible { outline: 3px solid var(--tivan-accent-2); outline-offset: 2px; }

.tivan-msg { min-height: 20px; font-size: 13px; color: var(--tivan-fg-dim); text-align: center; }

/* v8.12.0 — TimeAttack badge dans HUD */
.tivan-timeattack-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--tivan-accent-2) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tivan-accent-2) 50%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tivan-fg);
  font-variant-numeric: tabular-nums;
}
.tivan-timeattack-badge.tivan-timeattack-warn {
  background: color-mix(in srgb, var(--tivan-danger) 25%, transparent);
  border-color: var(--tivan-danger);
  animation: tivanTaWarnPulse 0.8s ease-in-out infinite;
}
@keyframes tivanTaWarnPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* v8.12.0 — Nouveau record (PR celebration live) */
.tivan-pr-celebration {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
  pointer-events: none;
  animation: tivanPrCelIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
             tivanPrCelOut 0.4s ease-in 1.7s forwards;
}
.tivan-pr-cel-card {
  padding: 16px 26px;
  background: linear-gradient(135deg, #fde047, #f59e0b);
  border: 3px solid #1a1a2e;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  text-align: center;
  transform: rotate(-2deg);
}
.tivan-pr-cel-title {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}
.tivan-pr-cel-detail {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
}
@keyframes tivanPrCelIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes tivanPrCelOut {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) translateY(-15px); }
}

/* v8.12.0 — Match summary enrichi dans l'overlay End */
.tivan-end-recap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
  padding: 10px;
  background: color-mix(in srgb, var(--tivan-panel-bg) 60%, transparent);
  border-radius: 8px;
}
.tivan-end-recap-pr {
  padding: 6px 10px;
  background: linear-gradient(135deg, #fde047, #f59e0b);
  color: #1a1a2e;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.tivan-end-recap-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
  font-size: 13px;
}
.tivan-end-recap-row > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tivan-end-recap-row span { color: var(--tivan-fg-dim); }
.tivan-end-recap-row strong { color: var(--tivan-fg); font-variant-numeric: tabular-nums; }
.tivan-end-recap-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--tivan-fg-dim) 25%, transparent);
}
.tivan-end-recap-op {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--tivan-bg) 60%, transparent);
  border-radius: 999px;
  font-size: 13px;
}
.tivan-end-recap-op span { font-size: 16px; font-weight: 700; color: var(--tivan-accent); }
.tivan-end-recap-op strong { font-variant-numeric: tabular-nums; }
.tivan-end-recap-op em { color: var(--tivan-fg-dim); font-style: normal; font-size: 11px; }

/* v8.11.0 — Streak major overlay (25, 50, 100) */
.tivan-streak-major {
  position: absolute;
  inset: 0;
  z-index: 13;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: tivanStreakIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
             tivanStreakOut 0.4s ease-in 2.1s forwards;
}
.tivan-streak-major-card {
  padding: 22px 36px;
  background: linear-gradient(135deg, #fb7185 0%, #f59e0b 40%, #fde047 70%, #4ade80 100%);
  background-size: 200% 200%;
  border: 4px solid #1a1a2e;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 -6px 0 rgba(0, 0, 0, 0.18), inset 0 6px 0 rgba(255, 255, 255, 0.4);
  transform: rotate(-4deg);
  text-align: center;
  animation: tivanStreakShine 1.8s ease-in-out infinite;
}
.tivan-streak-major-streak {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-shadow: 3px 3px 0 #1a1a2e, 0 4px 12px rgba(0, 0, 0, 0.4);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.tivan-streak-major-label {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 2px 2px 0 #1a1a2e;
  letter-spacing: 2px;
}
.tivan-streak-major-100 .tivan-streak-major-card {
  background: linear-gradient(135deg, #a855f7 0%, #fb7185 50%, #fde047 100%);
  background-size: 200% 200%;
  border-width: 5px;
}
@keyframes tivanStreakIn {
  0%   { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes tivanStreakOut {
  0%   { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(0.9) translateY(-20px) rotate(-4deg); }
}
@keyframes tivanStreakShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* v8.11.0 — Pause overlay enrichi : stats live */
.tivan-pause-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--tivan-fg-dim) 30%, transparent);
}
.tivan-pause-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.tivan-pause-stat span { color: var(--tivan-fg-dim); }
.tivan-pause-stat strong { color: var(--tivan-fg); font-variant-numeric: tabular-nums; }

/* v8.10.0 — HUD actions (mute, help) + badges PR/combo */
.tivan-hud-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-left: 6px;
}
.tivan-hud-btn {
  border: 0;
  background: color-mix(in srgb, var(--tivan-panel-bg) 80%, transparent);
  color: var(--tivan-fg);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
.tivan-hud-btn:hover { background: color-mix(in srgb, var(--tivan-accent-2) 25%, transparent); }
.tivan-hud-btn:active { transform: scale(0.92); }
/* v8.13.0 — bouton install PWA pulse subtilement pour attirer l'œil */
.tivan-install {
  animation: tivanInstallPulse 2.5s ease-in-out infinite;
  background: color-mix(in srgb, var(--tivan-legendary) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--tivan-legendary) 50%, transparent);
}
@keyframes tivanInstallPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(253, 224, 71, 0); }
}
/* v8.16.0 — Wallet badge HUD (XP + 💎) */
.tivan-wallet-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--tivan-accent-2) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tivan-accent-2) 40%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tivan-fg);
  font-variant-numeric: tabular-nums;
}

/* v8.16.0 — Achievements progress bar dans shortcode stats */
.tivan-stats-achievements {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--tivan-legendary) 15%, transparent);
  border-radius: 8px;
}
.tivan-stats-ach-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tivan-stats-ach-label strong { font-size: 18px; color: var(--tivan-legendary); }
.tivan-stats-ach-bar { height: 8px; background: rgba(0, 0, 0, 0.18); border-radius: 4px; overflow: hidden; }
.tivan-stats-ach-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tivan-legendary), var(--tivan-accent));
  border-radius: 4px;
  transition: width 0.4s ease-out;
}

.tivan-pr-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--tivan-legendary) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--tivan-legendary) 50%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tivan-fg);
  font-variant-numeric: tabular-nums;
}
.tivan-combo-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.25), rgba(253, 224, 71, 0.25));
  border: 1px solid rgba(251, 113, 133, 0.5);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--tivan-fg);
  letter-spacing: 0.5px;
  animation: tivanComboPulse 0.4s ease-out;
}
@keyframes tivanComboPulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* v8.14.0 — Settings overlay (réglages unifiés) */
.tivan-settings-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: tivanTutorialIn 0.25s ease-out;
}
.tivan-settings-card {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  padding: 20px 22px;
  border-radius: 14px;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--tivan-accent-2);
}
.tivan-settings-card h3 { margin: 0 0 12px; font-size: 20px; color: var(--tivan-accent); }
.tivan-settings-card h4 { margin: 4px 0 8px; font-size: 13px; color: #fde047; text-transform: uppercase; letter-spacing: 1px; }
.tivan-settings-section { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.tivan-settings-section:last-of-type { border-bottom: 0; }
.tivan-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
.tivan-settings-row > span { flex: 1; }
.tivan-settings-row input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--tivan-accent); }
.tivan-settings-slider { flex-direction: column; align-items: stretch; gap: 6px; }
.tivan-settings-slider > span { display: flex; justify-content: space-between; }
.tivan-settings-slider input[type="range"] { width: 100%; accent-color: var(--tivan-accent-2); }
.tivan-settings-test {
  align-self: flex-end;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  background: var(--tivan-accent-2);
  color: #0f172a;
  cursor: pointer;
}
.tivan-settings-hint { display: block; padding: 8px 10px; color: var(--tivan-fg-dim); font-size: 12px; font-style: italic; }
.tivan-settings-close { display: block; width: 100%; margin-top: 14px; }

/* v8.10.0 — Help overlay */
.tivan-help-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: tivanTutorialIn 0.25s ease-out;
}
.tivan-help-card {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  padding: 20px 24px;
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--tivan-accent-2);
}
.tivan-help-card h3 { margin: 0 0 12px; font-size: 20px; color: var(--tivan-accent); }
.tivan-help-card h4 { margin: 14px 0 6px; font-size: 14px; color: #fde047; text-transform: uppercase; letter-spacing: 1px; }
.tivan-help-card ul { margin: 0; padding-left: 22px; }
.tivan-help-card li { margin: 4px 0; font-size: 14px; line-height: 1.4; }
.tivan-help-close { display: block; width: 100%; margin-top: 14px; }

/* v8.15.0 — Bouton share + actions end overlay */
.tivan-end-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.tivan-end-actions .tivan-btn { flex: 1; }
.tivan-btn-secondary {
  background: color-mix(in srgb, var(--tivan-panel-bg) 70%, var(--tivan-accent-2));
  color: var(--tivan-fg);
}

/* v8.15.0 — Tutorial pas-à-pas (remplace v8.6.0 statique) */
.tivan-tutorial-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}
.tivan-tut-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.2s, transform 0.2s;
}
.tivan-tut-dot.is-active { background: var(--tivan-accent); transform: scale(1.4); }
.tivan-tut-dot.is-done { background: var(--tivan-accent-2); }
.tivan-tutorial-step { text-align: center; padding: 8px 0 16px; }
.tivan-tut-emoji-big { font-size: 64px; margin-bottom: 8px; line-height: 1; }
.tivan-tutorial-step h3 { margin: 8px 0; font-size: 22px; color: var(--tivan-accent); }
.tivan-tutorial-step p { margin: 8px 0; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.92); }
.tivan-tutorial-nav {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.tivan-tutorial-nav .tivan-btn { flex: 1; }
.tivan-tut-prev:disabled { opacity: 0.4; cursor: not-allowed; }

/* v8.5.0.2 : grille de boutons grade — remplace le <select> qui se fermait
   parfois sans appliquer (mobile dropdowns sont notoires pour ça). Boutons
   tactiles, état actif clair, aperçu texte sous la grille. */
.tivan-grade-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.tivan-grade-btn {
  padding: 8px 4px;
  border: 1.5px solid color-mix(in srgb, var(--tivan-fg-dim) 30%, transparent);
  border-radius: 8px;
  background: var(--tivan-bg);
  color: var(--tivan-fg);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s, background 0.15s;
  min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tivan-grade-btn sup { font-size: 9px; vertical-align: super; }
.tivan-grade-btn:hover { border-color: var(--tivan-accent-2); }
.tivan-grade-btn:active { transform: translateY(1px); }
.tivan-grade-btn.is-active {
  background: linear-gradient(135deg, var(--tivan-accent), var(--tivan-accent-2));
  color: #052e16;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
}
.tivan-grade-preview {
  display: block;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tivan-fg);
  background: color-mix(in srgb, var(--tivan-accent-2) 15%, transparent);
  border-radius: 6px;
  text-align: center;
  min-height: 20px;
}
@media (max-width: 479px) {
  .tivan-grade-grid { grid-template-columns: repeat(4, 1fr); }
  .tivan-grade-btn { font-size: 12px; min-height: 44px; }
}

/* End overlay top15 */
.tivan-top15 { padding-left: 1.2em; margin: 6px 0; max-height: 40vh; overflow: auto; }
.tivan-top15 li { line-height: 1.5; }

/* Unlock toasts */
.tivan-unlocks { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.tivan-toast {
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  background: color-mix(in srgb, var(--tivan-accent) 20%, transparent);
  border-left: 4px solid var(--tivan-accent);
}
.tivan-toast.rarity-rare      { background: color-mix(in srgb, var(--tivan-rare) 20%, transparent);      border-left-color: var(--tivan-rare); }
.tivan-toast.rarity-epic      { background: color-mix(in srgb, var(--tivan-epic) 20%, transparent);      border-left-color: var(--tivan-epic); }
.tivan-toast.rarity-legendary { background: color-mix(in srgb, var(--tivan-legendary) 25%, transparent); border-left-color: var(--tivan-legendary); color: #2a1b00; }
.tivan-toast.rarity-secret    { background: color-mix(in srgb, var(--tivan-secret) 20%, transparent);    border-left-color: var(--tivan-secret); }

/* Leaderboard */
.tivan-leaderboard { background: var(--tivan-panel-bg); color: var(--tivan-fg); padding: 14px; border-radius: var(--tivan-radius); }
.tivan-leaderboard ol { padding-left: 1.2em; }
.tivan-leaderboard .rk { color: var(--tivan-fg-dim); }

/* Profil */
.tivan-profil { background: var(--tivan-panel-bg); color: var(--tivan-fg); padding: 14px; border-radius: var(--tivan-radius); }
.tivan-wallet { display: flex; gap: 12px; font-size: 18px; font-weight: 700; }
.tivan-titles-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tivan-titles-list li { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--tivan-bg) 60%, var(--tivan-panel-bg)); display: flex; align-items: center; gap: 8px; }
.rarity-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--tivan-common); }
.rarity-common .rarity-dot    { background: var(--tivan-common); }
.rarity-rare .rarity-dot      { background: var(--tivan-rare); }
.rarity-epic .rarity-dot      { background: var(--tivan-epic); }
.rarity-legendary .rarity-dot { background: var(--tivan-legendary); }
.rarity-secret .rarity-dot    { background: var(--tivan-secret); }

/* v8.8.0 — Shortcode [tivan_mes_stats] */
.tivan-stats {
  background: var(--tivan-panel-bg);
  color: var(--tivan-fg);
  padding: 16px 18px;
  border-radius: var(--tivan-radius);
  font-family: 'Nunito', system-ui, sans-serif;
}
.tivan-stats h3 { margin: 0 0 10px; font-size: 20px; }
.tivan-stats h4 { margin: 14px 0 8px; font-size: 14px; color: var(--tivan-fg-dim); text-transform: uppercase; letter-spacing: 1px; }
.tivan-stats-alltime { font-size: 15px; padding: 8px 10px; background: color-mix(in srgb, var(--tivan-accent) 12%, transparent); border-radius: 8px; }
.tivan-stats-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding: 4px 0; }
.tivan-stats-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.tivan-stats-bar-fill { width: 100%; background: linear-gradient(to top, var(--tivan-accent), var(--tivan-accent-2)); border-radius: 4px 4px 0 0; min-height: 2px; }
.tivan-stats-bar-label { font-size: 11px; color: var(--tivan-fg-dim); text-transform: capitalize; }
.tivan-stats-bar-val { font-size: 10px; color: var(--tivan-fg); font-weight: 700; }
/* v8.17.0 — Historique des 10 dernières parties */
.tivan-stats-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.tivan-stats-history-list li {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--tivan-bg) 60%, var(--tivan-panel-bg));
  border-radius: 6px;
  font-size: 13px;
}
.tivan-stats-history-list li.empty { color: var(--tivan-fg-dim); font-style: italic; text-align: center; }
.tivan-hist-date { font-size: 11px; color: var(--tivan-fg-dim); font-variant-numeric: tabular-nums; }
.tivan-hist-mode { font-size: 16px; }
.tivan-hist-score { font-weight: 800; color: var(--tivan-accent); font-variant-numeric: tabular-nums; text-align: right; }
.tivan-hist-meta { font-size: 11px; color: var(--tivan-fg-dim); }

/* v8.17.0 — Numéro de partie dans end overlay */
.tivan-end-recap-gamenum {
  padding: 4px 10px;
  background: color-mix(in srgb, var(--tivan-accent-2) 18%, transparent);
  color: var(--tivan-fg);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.tivan-stats-ops { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 14px; }
.tivan-stats-ops th, .tivan-stats-ops td { padding: 6px 10px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--tivan-fg-dim) 25%, transparent); }
.tivan-stats-ops th { color: var(--tivan-fg-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.tivan-stats-suggest { margin-top: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--tivan-legendary) 18%, transparent); border-left: 3px solid var(--tivan-legendary); border-radius: 6px; font-size: 14px; }
.tivan-stats-empty { padding: 20px; text-align: center; color: var(--tivan-fg-dim); font-style: italic; }

/* Magasin */
.tivan-magasin { background: var(--tivan-panel-bg); color: var(--tivan-fg); padding: 14px; border-radius: var(--tivan-radius); }
.tivan-magasin-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tivan-magasin-table th, .tivan-magasin-table td { padding: 8px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--tivan-fg-dim) 30%, transparent); }
.tivan-magasin .muted { color: var(--tivan-fg-dim); font-size: 13px; }

/* ============================================================
 * Breakpoints
 * ============================================================ */

/* Mobile portrait (<480px) — vertical layout, D-pad full-width */
@media (max-width: 479px) {
  .tivan-header { flex-direction: column; align-items: flex-start; }
  .tivan-dpad .row { gap: 22px; }
  .tivan-dpad .dpad { min-width: 60px; min-height: 60px; font-size: 24px; }
  .tivan-panel { width: 94%; }
}

/* v8.24.0 : écrans BAS (téléphone en paysage, fenêtre écrasée)
   ------------------------------------------------------------------
   Toutes les media queries du fichier raisonnaient en LARGEUR. Or un iPhone
   en paysage fait environ 844 × 390 : il est très large et très bas. L'empilement
   en-tête + canvas + d-pad dépassait donc l'écran, et l'enfant se retrouvait
   avec les commandes hors du champ, ou devait faire défiler la page en pleine
   partie. C'est précisément l'orientation que le jeu RECOMMANDE ailleurs dans
   ce fichier, ce qui rendait le problème systématique.
   On raisonne ici en hauteur de fenêtre, indépendamment de la largeur. */
@media (max-height: 500px) {
  .tivan-header { padding: 2px 6px; font-size: 13px; gap: 6px; }
  .tivan-eq { font-size: clamp(16px, 4vh, 26px); }
  /* Le canvas ne prend jamais plus que la place réellement disponible une fois
     l'en-tête et le d-pad servis. */
  .tivan-canvas { max-height: 62vh; }
  .tivan-dpad .dpad { min-width: 42px; min-height: 42px; font-size: 18px; padding: 4px; }
  .tivan-dpad .row { gap: 10px; }
  .tivan-panel { max-height: 92vh; overflow-y: auto; padding: 10px 14px; }
  .tivan-top15 { max-height: 26vh; }
}

/* Écrans vraiment minuscules en hauteur (vieux téléphones en paysage) :
   le d-pad passe à côté du canvas plutôt qu'en dessous, sinon il n'y a plus
   de place pour jouer. */
@media (max-height: 400px) {
  .tivan-wrapper { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .tivan-header { flex-basis: 100%; }
  .tivan-stage { flex: 1 1 auto; min-width: 0; }
  .tivan-canvas { max-height: 78vh; }
  .tivan-dpad { flex: 0 0 auto; flex-direction: column; }
  .tivan-dpad .dpad { min-width: 38px; min-height: 38px; font-size: 16px; }
}

/* Mobile landscape (480–767px) */
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
  .tivan-wrapper { flex-direction: row; flex-wrap: wrap; }
  .tivan-header { flex-basis: 100%; }
  .tivan-stage { flex: 1 1 auto; }
  .tivan-dpad { flex-direction: row; align-items: center; }
}

/* Tablet (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .tivan-canvas { max-width: 100%; }
}

/* Desktop (>1024px) */
/* v8.5.0 : retire la limite max-width 960px — le canvas s'étend désormais
   à toute la largeur du wrapper (1280px) pour exploiter les grands écrans. */
@media (min-width: 1025px) {
  .tivan-canvas { max-width: 100%; }
}

/* Orientation nudge on small portrait screens */
@media (max-width: 767px) and (orientation: portrait) {
  .tivan-wrapper.playing::after {
    content: "📱 Mode paysage recommandé";
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 11px;
    color: var(--tivan-fg-dim);
    pointer-events: none;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tivan-toast { animation: none !important; }
}

/* ============================================================
   v8.5.0 — Mode practice : banderole subtile visible en jeu pour
   rappeler à l'enfant qu'il joue sans pression et que son score
   ne compte pas pour le leaderboard.
   ============================================================ */
/* ============================================================
   v8.5.1 — OUACHHH pop-art
   Affiché au centre quand le serpent vomit ou meurt par vomi.
   Style comic book : gros texte coloré, contour noir épais, ombre
   en damier, rotation légère, zoom-in puis fade.
   ============================================================ */
.tivan-ouachhh {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--ouach-rot, 0deg)) scale(0.4);
  z-index: 10;
  pointer-events: none;
  font-family: 'Bangers', 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(48px, 12vw, 130px);
  font-weight: 900;
  letter-spacing: 4px;
  color: #fef08a;
  /* Multi-stroke épais cartoon. */
  text-shadow:
    -3px -3px 0 #1a1a2e,
    3px -3px 0 #1a1a2e,
    -3px 3px 0 #1a1a2e,
    3px 3px 0 #1a1a2e,
    -5px 5px 0 #84cc16,
    -8px 8px 0 #65a30d,
    -11px 11px 12px rgba(0, 0, 0, 0.5);
  -webkit-text-stroke: 2px #1a1a2e;
  animation: tivanOuachhh 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes tivanOuachhh {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ouach-rot, 0deg)) scale(0.2); }
  18%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ouach-rot, 0deg)) scale(1.25); }
  28%  { transform: translate(-50%, -50%) rotate(calc(var(--ouach-rot, 0deg) * -0.3)) scale(1.05); }
  40%  { transform: translate(-50%, -50%) rotate(var(--ouach-rot, 0deg)) scale(1.12); }
  70%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--ouach-rot, 0deg)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -65%) rotate(var(--ouach-rot, 0deg)) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .tivan-ouachhh { animation-duration: 0.01ms !important; }
}

/* ============================================================
   v8.6.0 — Tutoriel 1ère partie
   ============================================================ */
.tivan-tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 14;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  padding: 16px;
  animation: tivanTutorialIn 0.3s ease-out;
}
.tivan-tutorial-card {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  padding: 22px 24px 20px;
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.08);
  border: 2px solid var(--tivan-accent);
}
.tivan-tutorial-card h3 {
  margin: 0 0 12px;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  color: #fde047;
}
.tivan-tutorial-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tivan-tutorial-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.tivan-tut-emoji { font-size: 22px; flex-shrink: 0; }
.tivan-tutorial-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}
.tivan-tutorial-close { width: 100%; }
@keyframes tivanTutorialIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ============================================================
   v8.6.0 — Indicateur longueur serpent dans le HUD
   ============================================================ */
.tivan-length-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.18);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tivan-fg);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   v8.6.0 — Mode daltonien (attribut data-tivan-a11y="cb")
   Ajoute un anneau noir épais autour de chaque pellet + une lettre
   index (A,B,C,D) en haut-gauche pour différencier sans couleur.
   ============================================================ */
.tivan-wrapper[data-tivan-a11y~="cb"] .tivan-canvas {
  filter: contrast(1.1);
}

/* High contrast mode (attribut data-tivan-a11y~="hc") */
.tivan-wrapper[data-tivan-a11y~="hc"] {
  --tivan-bg: #000;
  --tivan-panel-bg: #111;
  --tivan-fg: #fff;
  --tivan-fg-dim: #ddd;
}
.tivan-wrapper[data-tivan-a11y~="hc"] .tivan-canvas {
  filter: contrast(1.25) brightness(1.1);
}

/* ============================================================
   v8.5.2 — Easter egg score 504 : Tivan est fier de toi !
   Overlay pop-art au centre du canvas avec mini photo de Tivan,
   gros titre rotatif, score, étoiles éclatantes.
   ============================================================ */
.tivan-proud-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: tivanProudIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
             tivanProudOut 0.5s ease-in 3s forwards;
}
.tivan-proud-card {
  position: relative;
  padding: 16px 28px 18px;
  background: linear-gradient(135deg, #ffd400 0%, #ff2d87 50%, #a855f7 100%);
  background-size: 220% 220%;
  border: 3px solid #1a1a2e;
  border-radius: 20px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    inset 0 -4px 0 rgba(0, 0, 0, 0.18),
    inset 0 4px 0 rgba(255, 255, 255, 0.4);
  transform: rotate(-3deg);
  text-align: center;
  animation: tivanProudShine 2.2s ease-in-out infinite;
}
.tivan-proud-img {
  width: 110px;
  height: 110px;
  border-radius: 14px;
  border: 3px solid #1a1a2e;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  display: block;
  margin: 0 auto 10px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tivan-proud-title {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow:
    2px 2px 0 #1a1a2e,
    -1px -1px 0 #1a1a2e,
    0 3px 8px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  line-height: 1.05;
}
.tivan-proud-score {
  margin-top: 6px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #fde047;
  text-shadow: 1px 1px 0 #1a1a2e;
  letter-spacing: 0.8px;
}
/* v8.5.2.1 : ligne bonus punchy juste sous le titre. */
.tivan-proud-bonus {
  margin-top: 4px;
  display: inline-block;
  padding: 4px 12px;
  background: linear-gradient(90deg, #fde047, #f59e0b);
  color: #1a1a2e;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1.2px;
  border-radius: 999px;
  border: 2px solid #1a1a2e;
  box-shadow: 0 4px 0 #1a1a2e, 0 8px 16px rgba(0,0,0,0.35);
  animation: tivanProudBonusPulse 0.7s ease-in-out infinite alternate;
}
@keyframes tivanProudBonusPulse {
  0%   { transform: scale(1) rotate(-1deg); }
  100% { transform: scale(1.06) rotate(1.5deg); }
}
@media (max-width: 479px) {
  .tivan-proud-bonus { font-size: 14px; padding: 3px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tivan-proud-bonus { animation: none; }
}
@keyframes tivanProudIn {
  0%   { opacity: 0; transform: scale(0.4) rotate(-15deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes tivanProudOut {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.95) translateY(-10px) rotate(-2deg); }
}
@keyframes tivanProudShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (max-width: 479px) {
  .tivan-proud-img { width: 84px; height: 84px; }
  .tivan-proud-title { font-size: 18px; }
  .tivan-proud-score { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tivan-proud-overlay,
  .tivan-proud-card {
    animation: none !important;
  }
}

/* v8.9.0 — Daily challenge banner dans le start panel */
.tivan-daily-banner {
  padding: 8px 12px;
  background: linear-gradient(135deg, #fb7185, #ffd400);
  color: #1a1a2e;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(251, 113, 133, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  letter-spacing: 0.5px;
}

/* v8.5.0.1 : bandeau de confirmation grade+mode au démarrage. */
.tivan-grade-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(56, 189, 248, 0.95));
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: tivanGradeBanner 2.5s ease-out forwards;
  text-align: center;
}
.tivan-grade-banner strong { font-size: 22px; }
@keyframes tivanGradeBanner {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

.tivan-mode-practice .tivan-stage::before {
  content: "🎓 Mode pratique";
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.85), rgba(56, 189, 248, 0.85));
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Focus visibility for accessibility */
.tivan-wrapper:focus-visible { outline: 3px solid var(--tivan-accent-2); outline-offset: 2px; }
.dpad:focus-visible { outline: 3px solid var(--tivan-accent-2); outline-offset: 2px; }

/* ============================================================
   Polish pass v8.4.2 — flash, particules, combo, equation swap
   Feedback visuel imm\u00e9diat pour que le joueur sente chaque bite.
   ============================================================ */

/* Canvas shake quand on mange une mauvaise r\u00e9ponse / casse un rocher */
@keyframes tivanShake {
  0%, 100% { transform: translate(0, 0); }
  20%      { transform: translate(-4px, 2px); }
  40%      { transform: translate(3px, -3px); }
  60%      { transform: translate(-2px, 3px); }
  80%      { transform: translate(2px, -1px); }
}
.tivan-canvas.tivan-shake { animation: tivanShake 0.38s ease-in-out; }

/* Particules + / - / \u2b50 qui montent et fadent */
.tivan-particle {
  position: absolute;
  pointer-events: none;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 0 6px rgba(253, 224, 71, 0.6), 1px 1px 0 #000;
  transform: translate(-50%, -50%);
  animation: tivanParticleFloat 1.1s ease-out forwards;
  z-index: 5;
}
@keyframes tivanParticleFloat {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1;   transform: translate(calc(-50% + var(--dx, 0px) * 0.2), calc(-50% + var(--dy, 0px) * 0.2)) scale(1.3); }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.9); }
}

/* Flash color\u00e9 sur la stage (bonne r\u00e9ponse = vert, mauvaise = rouge) */
.tivan-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: tivanFlashFade 0.22s ease-out forwards;
  z-index: 4;
}
.tivan-flash-good { background: radial-gradient(ellipse at center, rgba(78, 205, 196, 0.55), rgba(78, 205, 196, 0) 70%); }
.tivan-flash-bad  { background: radial-gradient(ellipse at center, rgba(233, 69, 96, 0.55), rgba(233, 69, 96, 0) 70%); }
@keyframes tivanFlashFade {
  0%   { opacity: 0;    }
  25%  { opacity: 1;    }
  100% { opacity: 0;    }
}

/* Texte flottant (multiplicateur, combo badge, combo lost) */
.tivan-floattext {
  position: absolute;
  pointer-events: none;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  z-index: 6;
  animation: tivanFloatUp 1.3s ease-out forwards;
}
.tivan-floattext-combo-mult {
  font-size: 20px;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 2px 2px 0 #1a1a2e;
  letter-spacing: 1px;
}
.tivan-floattext-combo-badge {
  font-size: 28px;
  color: #fff;
  letter-spacing: 2px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #e94560 0%, #ffd700 50%, #00d2ff 100%);
  background-size: 200% 200%;
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  text-shadow: 2px 2px 0 #1a1a2e;
  animation: tivanFloatUp 1.6s ease-out forwards, tivanComboShine 0.6s ease-in-out infinite;
}
.tivan-floattext-combo-lost {
  font-size: 14px;
  color: #ff8da1;
  font-style: italic;
  text-shadow: 0 0 6px rgba(233, 69, 96, 0.6);
  letter-spacing: 0.5px;
  opacity: 0.9;
}
@keyframes tivanFloatUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(0) scale(0.5); }
  18%  { opacity: 1; transform: translate(-50%, -50%) translateY(-8px) scale(1.2); }
  30%  { opacity: 1; transform: translate(-50%, -50%) translateY(-14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-60px) scale(0.9); }
}
@keyframes tivanComboShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Anime l'\u00e9quation au moment o\u00f9 elle change */
@keyframes tivanEqSwap {
  0%   { transform: scale(1); filter: brightness(1); }
  15%  { transform: scale(1.15); filter: brightness(1.8) drop-shadow(0 0 12px rgba(253, 224, 71, 0.8)); }
  45%  { transform: scale(0.97); filter: brightness(1.1); }
  100% { transform: scale(1); filter: brightness(1); }
}
.tivan-equation.tivan-eq-swap {
  animation: tivanEqSwap 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Respect prefers-reduced-motion pour les enfants sensibles / accessibilit\u00e9 */
@media (prefers-reduced-motion: reduce) {
  .tivan-particle,
  .tivan-floattext,
  .tivan-flash,
  .tivan-canvas.tivan-shake,
  .tivan-equation.tivan-eq-swap {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   Badges power-up HUD (loupe / x2 / indicatrice)
   Affich\u00e9s en haut \u00e0 droite du wrapper pendant la dur\u00e9e active.
   Barre qui diminue = timer visuel intuitif.
   ============================================================ */
.tivan-powerup-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  min-width: 52px;
  background: linear-gradient(135deg, rgba(30, 30, 60, 0.92), rgba(15, 52, 96, 0.88));
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: tivanPowerupIn 0.25s ease-out;
}
.tivan-powerup-badge-slow   { border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(96, 165, 250, 0.35); }
.tivan-powerup-badge-double { border-color: rgba(192, 132, 252, 0.6); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(192, 132, 252, 0.35); }
.tivan-powerup-badge-hint   { border-color: rgba(251, 113, 133, 0.6); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(251, 113, 133, 0.35); }

/* Stack multiple badges vertically when several are active simultaneously. */
.tivan-powerup-badge + .tivan-powerup-badge { top: auto; bottom: 12px; right: 12px; }

.tivan-powerup-icon {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tivan-powerup-badge-double .tivan-powerup-icon { color: #c084fc; font-size: 18px; letter-spacing: -0.5px; }
.tivan-powerup-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.tivan-powerup-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #fff, #f5c518);
}
.tivan-powerup-badge-slow   .tivan-powerup-bar-fill { background: linear-gradient(90deg, #dbeafe, #60a5fa); }
.tivan-powerup-badge-double .tivan-powerup-bar-fill { background: linear-gradient(90deg, #f3e8ff, #c084fc); }
.tivan-powerup-badge-hint   .tivan-powerup-bar-fill { background: linear-gradient(90deg, #ffe4e6, #fb7185); }

@keyframes tivanPowerupIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tivan-powerup-badge { animation: none; }
  .tivan-powerup-bar-fill { transition: none !important; }
}

/* ============================================================
   Quest system HUD (v8.4.4)
   Panneau en haut \u00e0 gauche, un d\u00e9fi par match, barre de progression.
   ============================================================ */
.tivan-quest-panel {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 8;
  min-width: 180px;
  max-width: 220px;
  padding: 8px 12px 10px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.92));
  border: 1.5px solid rgba(253, 224, 71, 0.35);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 14px rgba(253, 224, 71, 0.12);
  animation: tivanQuestIn 0.3s ease-out;
}
.tivan-quest-label {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(253, 224, 71, 0.75);
  margin-bottom: 3px;
}
.tivan-quest-text {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 6px;
}
.tivan-quest-bar {
  height: 5px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.tivan-quest-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, #fde047, #f59e0b);
  transition: transform 0.3s ease-out;
}
.tivan-quest-progress {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: rgba(253, 224, 71, 0.8);
  letter-spacing: 0.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@keyframes tivanQuestIn {
  0%   { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* C\u00e9l\u00e9bration quand le d\u00e9fi est compl\u00e9t\u00e9 : flash + glow + disparition. */
.tivan-quest-panel.tivan-quest-done {
  border-color: #4ade80;
  box-shadow: 0 0 28px rgba(74, 222, 128, 0.6), 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: tivanQuestDone 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), tivanQuestOut 0.5s ease-out 1.9s forwards;
}
.tivan-quest-done .tivan-quest-bar-fill {
  background: linear-gradient(90deg, #4ade80, #22c55e);
}
.tivan-quest-done .tivan-quest-progress {
  color: #4ade80;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}
@keyframes tivanQuestDone {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes tivanQuestOut {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-40px) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .tivan-quest-panel,
  .tivan-quest-panel.tivan-quest-done {
    animation: none !important;
  }
  .tivan-quest-bar-fill { transition: none !important; }
}

/* ============================================================
   v8.18.0 — Audit fixes : accessibilité consolidée
   ============================================================ */

/* Catch-all reduced-motion : désactive TOUTES les animations/transitions.
   Les blocs ciblés ci-dessus restent (spécifiques), ceci couvre le reste
   (streak-major, pr-celebration, install pulse, combo pulse, grade banner,
   proud overlay, etc.) pour les enfants à sensibilité vestibulaire. */
@media (prefers-reduced-motion: reduce) {
  .tivan-wrapper *,
  .tivan-wrapper *::before,
  .tivan-wrapper *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Contraste toast légendaire : texte quasi-noir + fond plus opaque pour
   passer WCAG AA (le 25% transparent sur fond sombre donnait ~1.9:1). */
.tivan-toast.rarity-legendary {
  background: color-mix(in srgb, var(--tivan-legendary) 42%, #fff 8%);
  color: #1a1206;
}

/* Focus-visible cohérent sur tous les contrôles interactifs (navigation
   clavier + accessibilité). Couvre boutons grade, HUD, inputs, selects. */
.tivan-grade-btn:focus-visible,
.tivan-hud-btn:focus-visible,
.tivan-wrapper select:focus-visible,
.tivan-wrapper input:focus-visible,
.tivan-wrapper button:focus-visible {
  outline: 3px solid var(--tivan-accent-2);
  outline-offset: 2px;
}

/* v8.19.0 (emc-ui-ux, goal gradient) — ligne momentum record dans le start panel */
.tivan-record-momentum {
  margin: 2px 0 4px;
  padding: 8px 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--tivan-fg);
  background: color-mix(in srgb, var(--tivan-legendary) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--tivan-legendary) 45%, transparent);
  border-radius: 999px;
}
.tivan-record-momentum strong { color: var(--tivan-legendary); }