/* =========================================================================
   SITE HERITAGE SCENES CSS — DIRECTION « ENCRE & CINABRE » (SCÈNE FLUIDE)
   Feuille de styles de production dédiée pour les 7 univers d'encre (A0 à K0)
   ========================================================================= */

/* --- 1. TOKENS DE LA DIRECTION ARTISTIQUE ENCRE & CINABRE --- */
:root {
  --heritage-gold: #C59B27;
  --heritage-gold-soft: rgba(197, 155, 39, 0.22);
  --heritage-gold-border: rgba(197, 155, 39, 0.38);
  --heritage-cinabre: #D9563A;
  --heritage-cinabre-glow: rgba(217, 86, 58, 0.35);
  --heritage-jade: #2E7D32;
  --heritage-jade-glow: rgba(46, 125, 50, 0.35);
  --heritage-ink-dark: #1E1713;
  --heritage-glass-blur: 16px;
  --heritage-glass-sat: 170%;
}

/* --- 2. CONTENEUR SCÈNE FLUIDE ÉLARGI (UNIVERSALISATION DE TOUS LES CONTENEURS) --- */
.gameContainer.scene--fluid-stage,
.container.scene--fluid-stage,
.scene--fluid-stage,
#wordExpositionScreen,
#pinyinInputScreen,
#recall2StepScreen,
#sentenceBuilderScreen {
  max-width: min(1080px, 92vw) !important;
  width: min(1080px, calc(100% - 32px)) !important;
  margin: 20px auto 40px !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  padding: 24px 28px 28px !important;
  box-sizing: border-box !important;
  border: 1.5px solid rgba(197, 155, 39, 0.45) !important;
  box-shadow: 0 20px 60px rgba(42, 30, 21, 0.16), 0 2px 10px rgba(42, 30, 21, 0.08) !important;
  background-color: var(--paper, #E0D2B4) !important;
  background-image:
    var(--hatch-tex, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0  0.7 0 0 0 0  0.38 0 0 0 0  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")),
    radial-gradient(1200px 720px at 12% -8%, rgba(255,246,226,0.85), transparent 68%),
    radial-gradient(1000px 620px at 104% 6%, rgba(206,152,110,0.22), transparent 70%),
    radial-gradient(1100px 700px at 50% 118%, rgba(120,78,40,0.16), transparent 72%),
    linear-gradient(168deg, #E6D9BD 0%, #E0D2B4 46%, #D8C8A6 100%) !important;
  background-size: var(--noise-tile, 220px 220px), auto, auto, auto, auto !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-blend-mode: multiply, normal, normal, normal, normal !important;
}

.page.dark .gameContainer.scene--fluid-stage,
.page.dark .container.scene--fluid-stage,
.page.dark .scene--fluid-stage,
.page.dark #wordExpositionScreen,
.page.dark #pinyinInputScreen,
.page.dark #recall2StepScreen,
.page.dark #sentenceBuilderScreen,
body.dark .gameContainer.scene--fluid-stage,
body.dark .container.scene--fluid-stage,
body.dark .scene--fluid-stage,
body.dark #wordExpositionScreen,
body.dark #pinyinInputScreen,
body.dark #recall2StepScreen,
body.dark #sentenceBuilderScreen {
  background-color: var(--paper-2, #221610) !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(232,197,148,0.02) 0px, rgba(232,197,148,0.02) 2px, transparent 2px, transparent 6px),
    radial-gradient(100% 90% at 12% -6%, rgba(56, 38, 24, 0.60), transparent 68%),
    radial-gradient(100% 80% at 104% 6%, rgba(38, 22, 14, 0.50), transparent 70%),
    radial-gradient(100% 90% at 50% 118%, rgba(20, 12, 8, 0.60), transparent 72%),
    linear-gradient(168deg, #221610 0%, #1A100B 52%, #120A06 100%) !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(232, 197, 148, 0.12) !important;
}

/* DÉVERROUILLAGE OVERFLOW POUR L'ANIMATION FLIP DU MODE PHRASES */
.scene--fluid-stage:has(.sentenceBuilderPanel),
#sentenceBuilderScreen,
.sentenceBuilderPanel {
  overflow: visible !important;
}

/* En-tête et alignements internes en Scène Fluide */
.scene--fluid-stage .gameHeader {
  position: relative;
  z-index: 15;
  margin-bottom: 20px;
}

/* SOUS-CARTE CARACTÈRE OPAQUE NOBLE (ZÉRO FLASH GPU — FOND PAPIER DE SOIE PUR) */
.scene--fluid-stage .wordCard,
.scene--fluid-stage .summaryCard {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto 24px !important;
  padding: 40px 32px 32px !important;
  border-radius: 28px !important;
  background-color: #FAF5EE !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  box-shadow:
    inset 0 1.5px 1px #FFFFFF,
    inset 0 -1px 1px rgba(197, 155, 39, 0.15),
    0 12px 36px -8px rgba(42, 30, 21, 0.12),
    0 2px 8px rgba(42, 30, 21, 0.06) !important;
  min-height: 210px !important;
  box-sizing: border-box !important;
  z-index: 15 !important;
}

.page.dark .scene--fluid-stage .wordCard,
.page.dark .scene--fluid-stage .summaryCard,
body.dark .scene--fluid-stage .wordCard,
body.dark .scene--fluid-stage .summaryCard {
  background-color: #1F150F !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(212, 175, 55, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.65),
    0 16px 40px -10px rgba(0, 0, 0, 0.75),
    0 4px 12px rgba(0, 0, 0, 0.50) !important;
}

/* En-tête et composants internes de la carte de mot (.wordCard) */
.scene--fluid-stage .wordCard .levelTag {
  position: absolute !important;
  top: 20px !important;
  left: 24px !important;
  font-family: var(--ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  z-index: 25 !important;
}

.scene--fluid-stage .wordCard .speakerBtn,
.speakerBtn {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  background: rgba(255, 252, 248, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    0 3px 10px rgba(42, 30, 21, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  color: var(--ink-2, #5C4733) !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}

.scene--fluid-stage .wordCard .speakerBtn:hover,
.speakerBtn:hover {
  transform: scale(1.08) !important;
  background: #FFFFFF !important;
  border-color: rgba(197, 155, 39, 0.65) !important;
  color: var(--heritage-cinabre, #D9563A) !important;
  box-shadow:
    0 0 14px rgba(217, 86, 58, 0.25),
    0 4px 12px rgba(42, 30, 21, 0.14) !important;
}

.page.dark .scene--fluid-stage .wordCard .speakerBtn,
.page.dark .speakerBtn,
body.dark .scene--fluid-stage .wordCard .speakerBtn,
body.dark .speakerBtn {
  background: rgba(34, 22, 16, 0.94) !important;
  border-color: rgba(212, 175, 55, 0.30) !important;
  box-shadow:
    inset 0 1px 1px rgba(212, 175, 55, 0.20),
    0 4px 12px rgba(0, 0, 0, 0.50) !important;
  color: var(--ink-2, #D3BE9F) !important;
}

.page.dark .scene--fluid-stage .wordCard .speakerBtn:hover,
.page.dark .speakerBtn:hover,
body.dark .scene--fluid-stage .wordCard .speakerBtn:hover,
body.dark .speakerBtn:hover {
  background: rgba(46, 30, 22, 0.96) !important;
  border-color: rgba(212, 175, 55, 0.60) !important;
  color: #FFA489 !important;
  box-shadow:
    0 0 14px rgba(217, 86, 58, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.65) !important;
}

.scene--fluid-stage .wordCard .charDisplay {
  font-family: var(--font-han, "Noto Serif SC", serif) !important;
  font-size: clamp(52px, 6.5vw, 76px) !important;
  line-height: 1.15 !important;
  margin: 10px 0 6px !important;
  color: var(--ink, #2A1E15) !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

.page.dark .scene--fluid-stage .wordCard .charDisplay,
body.dark .scene--fluid-stage .wordCard .charDisplay {
  color: var(--ink, #F2E6D2) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

.scene--fluid-stage .wordCard .pinyinDisplay {
  font-family: var(--ui, sans-serif) !important;
  font-size: clamp(20px, 2.4vw, 26px) !important;
  font-weight: 500 !important;
  color: var(--ink-2, #5C4733) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 4px !important;
}

.page.dark .scene--fluid-stage .wordCard .pinyinDisplay,
body.dark .scene--fluid-stage .wordCard .pinyinDisplay {
  color: var(--ink-2, #D3BE9F) !important;
}

.scene--fluid-stage .wordCard .frDisplay {
  font-family: var(--ui, sans-serif) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  font-weight: 600 !important;
  color: var(--ink, #2A1E15) !important;
  margin-top: 8px !important;
}

.page.dark .scene--fluid-stage .wordCard .frDisplay,
body.dark .scene--fluid-stage .wordCard .frDisplay {
  color: var(--ink, #F2E6D2) !important;
}

/* CARTOUCHE DE CONTEXTE & RÉVÉLATION (CLONAGE EXACT .ui-reveal-capsule--col4) */
.scene--fluid-stage .contextBox,
.scene--fluid-stage .recallPromptBox {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto 16px !important;
  padding: 16px 20px !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.90) 0%, rgba(252, 248, 240, 0.78) 100%) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border: 1px solid rgba(197, 155, 39, 0.35) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 6px 18px rgba(42, 30, 21, 0.08) !important;
  border-radius: 18px !important;
  color: var(--ink, #2A1E15) !important;
}

.page.dark .scene--fluid-stage .contextBox,
.page.dark .scene--fluid-stage .recallPromptBox,
body.dark .scene--fluid-stage .contextBox,
body.dark .scene--fluid-stage .recallPromptBox {
  background: linear-gradient(135deg, rgba(46, 30, 22, 0.90) 0%, rgba(32, 20, 14, 0.80) 100%) !important;
  border-color: rgba(226, 184, 124, 0.30) !important;
  box-shadow: inset 0 1px 1px rgba(232, 197, 148, 0.20), 0 6px 18px rgba(0, 0, 0, 0.50) !important;
  color: var(--ink, #F2E6D2) !important;
}

/* CARTOUCHE DE FEEDBACK & DIAGNOSTIC D'ERREUR (CLONAGE LIGNES F / H) */
.scene--fluid-stage .feedbackRowReserved {
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  min-height: 110px !important;
  position: relative !important;
  z-index: 15 !important;
}

.scene--fluid-stage .feedbackRow {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 16px auto !important;
  padding: 18px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  border-radius: 18px !important;
  background: rgba(253, 248, 242, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid rgba(217, 86, 58, 0.35) !important;
  box-shadow: 0 6px 18px rgba(42, 30, 21, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
  color: var(--ink, #2A1E15) !important;
}

.page.dark .scene--fluid-stage .feedbackRow,
body.dark .scene--fluid-stage .feedbackRow {
  background: rgba(38, 26, 18, 0.94) !important;
  border-color: rgba(217, 86, 58, 0.45) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(232, 197, 148, 0.15) !important;
  color: var(--ink, #F2E6D2) !important;
}

/* VÉRITABLE TAMPON IMPÉRIAL CALLIGRAPHIQUE « 错 » & « 对 » (LIGNES F & H) */
.stamp,
.scene--fluid-stage .stamp,
.feedbackRow .stamp,
.mistakeItem .stamp,
.ui-seal-stamp {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--han, "Noto Serif SC", serif) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  user-select: none !important;
  transform: rotate(-4deg) !important;
  animation: stampIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) !important;
  box-sizing: border-box !important;
  position: relative !important;
  line-height: 1 !important;
}

.stamp.stamp-incorrect,
.stamp-incorrect,
.scene--fluid-stage .stamp.stamp-incorrect,
.mistakeItem .stamp.stamp-incorrect,
.ui-seal-stamp--cinabre {
  background: linear-gradient(135deg, #D9563A 0%, #B8402A 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #F07E65 !important;
  box-shadow:
    0 4px 14px rgba(217, 86, 58, 0.45),
    0 1px 3px rgba(30, 22, 16, 0.20),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.65) !important;
}

.page.dark .stamp.stamp-incorrect,
.page.dark .stamp-incorrect,
.page.dark .scene--fluid-stage .stamp.stamp-incorrect,
.page.dark .mistakeItem .stamp.stamp-incorrect,
.page.dark .ui-seal-stamp--cinabre,
body.dark .stamp.stamp-incorrect,
body.dark .stamp-incorrect,
body.dark .scene--fluid-stage .stamp.stamp-incorrect,
body.dark .mistakeItem .stamp.stamp-incorrect,
body.dark .ui-seal-stamp--cinabre {
  background: linear-gradient(135deg, #E05335 0%, #C43B23 100%) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 180, 160, 0.50) !important;
  box-shadow:
    0 0 20px rgba(217, 86, 58, 0.70),
    0 0 36px rgba(217, 86, 58, 0.35),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.60) !important;
}

.stamp.stamp-correct,
.stamp-correct,
.scene--fluid-stage .stamp.stamp-correct,
.ui-seal-stamp--jade {
  background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #81C784 !important;
  box-shadow:
    0 4px 14px rgba(46, 125, 50, 0.45),
    0 1px 3px rgba(30, 22, 16, 0.20),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.65) !important;
}

.page.dark .stamp.stamp-correct,
.page.dark .stamp-correct,
.page.dark .scene--fluid-stage .stamp.stamp-correct,
body.dark .stamp.stamp-correct,
body.dark .stamp-correct,
body.dark .scene--fluid-stage .stamp.stamp-correct {
  box-shadow:
    0 0 20px rgba(76, 175, 80, 0.70),
    0 0 36px rgba(76, 175, 80, 0.35),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.60) !important;
}

.scene--fluid-stage .feedbackText {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
}

.scene--fluid-stage .feedbackTitle-incorrect {
  color: var(--heritage-cinabre, #D9563A) !important;
  font-family: var(--ui, sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
}

.scene--fluid-stage .feedbackTitle-correct {
  color: var(--heritage-jade, #2E7D32) !important;
  font-family: var(--ui, sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
}

.scene--fluid-stage .answerSummary {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  font-family: var(--ui, sans-serif) !important;
  font-size: 14.5px !important;
  color: var(--ink-2, #5C4733) !important;
}

.page.dark .scene--fluid-stage .answerSummary,
body.dark .scene--fluid-stage .answerSummary {
  color: var(--ink-2, #D3BE9F) !important;
}

/* CARTOUCHE D'EXEMPLES & SYNTAXE (LIGNE J) */
.scene--fluid-stage .exampleBox {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 16px auto !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
  border-radius: 18px !important;
  background: rgba(253, 248, 242, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(197, 155, 39, 0.30) !important;
  border-top: 2px solid rgba(212, 175, 55, 0.70) !important;
  box-shadow: 0 6px 18px rgba(42, 30, 21, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
  text-align: left !important;
}

.page.dark .scene--fluid-stage .exampleBox,
body.dark .scene--fluid-stage .exampleBox {
  background: rgba(38, 26, 18, 0.94) !important;
  border-color: rgba(226, 184, 124, 0.25) !important;
  border-top-color: rgba(226, 190, 80, 0.65) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(232, 197, 148, 0.15) !important;
}

.scene--fluid-stage .exampleBox .contextLabel {
  font-family: var(--ui, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--heritage-gold, #C59B27) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.scene--fluid-stage .exampleBox .exampleChar {
  font-family: var(--font-han, "Noto Serif SC", serif) !important;
  font-size: 24px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
  color: var(--ink, #2A1E15) !important;
  margin-top: 4px !important;
}

.page.dark .scene--fluid-stage .exampleBox .exampleChar,
body.dark .scene--fluid-stage .exampleBox .exampleChar {
  color: var(--ink, #F2E6D2) !important;
}

.scene--fluid-stage .exampleBox .exampleHighlight {
  color: var(--heritage-cinabre, #D9563A) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid rgba(217, 86, 58, 0.40) !important;
}

.scene--fluid-stage .exampleBox .examplePinyin {
  font-family: var(--ui, sans-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ink-2, #5C4733) !important;
  margin-top: 4px !important;
}

.page.dark .scene--fluid-stage .exampleBox .examplePinyin,
body.dark .scene--fluid-stage .exampleBox .examplePinyin {
  color: var(--ink-2, #D3BE9F) !important;
}

.scene--fluid-stage .exampleBox .exampleFr {
  font-family: var(--ui, sans-serif) !important;
  font-size: 14.5px !important;
  font-style: italic !important;
  color: var(--ink-2, #5C4733) !important;
  margin-top: 6px !important;
}

.page.dark .scene--fluid-stage .exampleBox .exampleFr,
body.dark .scene--fluid-stage .exampleBox .exampleFr {
  color: var(--ink-2, #D3BE9F) !important;
}

/* LIGNE DE PARI DE MÉMOIRE (JE L'AI, ÇA VIENT, AUCUNE IDÉE) */
.scene--fluid-stage .confidenceBetRow {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto 16px !important;
  position: relative !important;
  z-index: 15 !important;
}

.scene--fluid-stage .confidenceBetChip {
  font-family: var(--ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  background: linear-gradient(135deg, rgba(255, 252, 248, 0.92) 0%, rgba(248, 238, 230, 0.78) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    0 4px 12px rgba(42, 30, 21, 0.10) !important;
  color: var(--ink-2, #5C4733) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.scene--fluid-stage .confidenceBetChip:hover {
  transform: translateY(-2px) !important;
  background: #FFFFFF !important;
  color: var(--ink, #2A1E15) !important;
}

.scene--fluid-stage .confidenceBetChip.confidenceBetChip-active {
  background: linear-gradient(135deg, #D9563A 0%, #B8402A 100%) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(217, 86, 58, 0.50), inset 0 1.5px 0.5px rgba(255, 255, 255, 0.70) !important;
}

/* LIGNES DE SAISIE ET VALIDATION UNIVERSELLES (TOUS MODES) */
.scene--fluid-stage .answerRow,
.scene--fluid-stage .inputRow {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 0 auto 16px !important;
  position: relative !important;
  z-index: 15 !important;
}

.scene--fluid-stage #recallPinyinInput,
.scene--fluid-stage #answerInput,
.scene--fluid-stage #pinyinInput,
.scene--fluid-stage .inputRow input,
.scene--fluid-stage .answerRow input {
  position: relative !important;
  z-index: 15 !important;
  flex: 1 !important;
  height: 52px !important;
  padding: 0 20px !important;
  font-size: 17px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(252, 248, 240, 0.78) 100%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  color: var(--ink, #2A1E15) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1.5px 0.5px rgba(255, 255, 255, 1), 0 4px 12px rgba(42, 30, 21, 0.08) !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

.page.dark .scene--fluid-stage #recallPinyinInput,
.page.dark .scene--fluid-stage #answerInput,
.page.dark .scene--fluid-stage #pinyinInput,
.page.dark .scene--fluid-stage .inputRow input,
.page.dark .scene--fluid-stage .answerRow input,
body.dark .scene--fluid-stage #recallPinyinInput,
body.dark .scene--fluid-stage #answerInput,
body.dark .scene--fluid-stage #pinyinInput,
body.dark .scene--fluid-stage .inputRow input,
body.dark .scene--fluid-stage .answerRow input {
  background: linear-gradient(135deg, rgba(48, 34, 24, 0.92) 0%, rgba(32, 22, 16, 0.82) 100%) !important;
  color: var(--ink, #F2E6D2) !important;
  border-color: rgba(226, 184, 124, 0.32) !important;
  box-shadow: inset 0 1.5px 0.5px rgba(232, 197, 148, 0.25), 0 4px 14px rgba(0, 0, 0, 0.50) !important;
}

.scene--fluid-stage .promptRow {
  position: relative !important;
  z-index: 15 !important;
}

/* BOUTONS SECONDAIRES TACTILES FLOTTANTS (CLONAGE EXACT .matrix-mock-btn--col3) */
.scene--fluid-stage .secondaryBtn,
.scene--fluid-stage .confidenceBetChip,
.scene--fluid-stage .gameHeader .secondaryBtn,
.secondaryBtn {
  font-family: var(--ui, sans-serif) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  background: rgba(255, 252, 248, 0.94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 1),
    0 4px 12px rgba(42, 30, 21, 0.08),
    0 1px 3px rgba(42, 30, 21, 0.05) !important;
  color: var(--ink-2, #5C4733) !important;
  cursor: pointer !important;
  z-index: 25 !important;
  pointer-events: auto !important;
  transition: all 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.scene--fluid-stage .secondaryBtn:hover,
.scene--fluid-stage .confidenceBetChip:hover,
.secondaryBtn:hover {
  transform: translateY(-2px) !important;
  background: #FFFFFF !important;
  border-color: rgba(197, 155, 39, 0.65) !important;
  box-shadow:
    inset 0 1.5px 0.5px #FFFFFF,
    0 8px 18px rgba(42, 30, 21, 0.12) !important;
  color: var(--ink, #2A1E15) !important;
}

.page.dark .scene--fluid-stage .secondaryBtn,
.page.dark .scene--fluid-stage .confidenceBetChip,
.page.dark .secondaryBtn,
body.dark .scene--fluid-stage .secondaryBtn,
body.dark .scene--fluid-stage .confidenceBetChip,
body.dark .secondaryBtn {
  background: rgba(34, 22, 16, 0.94) !important;
  border-color: rgba(212, 175, 55, 0.30) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(212, 175, 55, 0.20),
    0 4px 14px rgba(0, 0, 0, 0.50) !important;
  color: var(--ink-2, #D3BE9F) !important;
}

.page.dark .scene--fluid-stage .secondaryBtn:hover,
.page.dark .scene--fluid-stage .confidenceBetChip:hover,
.page.dark .secondaryBtn:hover,
body.dark .scene--fluid-stage .secondaryBtn:hover,
body.dark .scene--fluid-stage .confidenceBetChip:hover,
body.dark .secondaryBtn:hover {
  background: rgba(46, 30, 22, 0.96) !important;
  border-color: rgba(212, 175, 55, 0.55) !important;
  color: var(--ink, #F2E6D2) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(212, 175, 55, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.65) !important;
}

/* BOUTON PRIMAIRE CINABRE INCANDESCENT FLOTTANT (CLONAGE EXACT .matrix-mock-btn--col3-primary) */
.scene--fluid-stage .primaryBtn,
.scene--fluid-stage #submitAnswer,
.scene--fluid-stage #nextWord,
.scene--fluid-stage #nextWordChoice,
.scene--fluid-stage #wordExpositionContinueBtn,
.scene--fluid-stage #submitRecallPinyin,
.scene--fluid-stage #nextRecallPinyin,
.scene--fluid-stage #nextRecallChar,
.primaryBtn {
  font-family: var(--ui, sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  height: 52px !important;
  padding: 0 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.50) !important;
  background: linear-gradient(135deg, #D9563A 0%, #B8402A 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 4px 18px rgba(217, 86, 58, 0.45),
    0 2px 6px rgba(184, 64, 42, 0.35),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.65) !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  z-index: 25 !important;
  pointer-events: auto !important;
  transition: all 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  white-space: nowrap !important;
}

.scene--fluid-stage .primaryBtn:hover,
.scene--fluid-stage #submitAnswer:hover,
.scene--fluid-stage #nextWord:hover,
.scene--fluid-stage #nextWordChoice:hover,
.scene--fluid-stage #wordExpositionContinueBtn:hover,
.scene--fluid-stage #submitRecallPinyin:hover,
.scene--fluid-stage #nextRecallPinyin:hover,
.scene--fluid-stage #nextRecallChar:hover,
.primaryBtn:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #E2684D 0%, #C4462F 100%) !important;
  box-shadow:
    0 8px 24px rgba(217, 86, 58, 0.60),
    0 2px 8px rgba(184, 64, 42, 0.40),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.80) !important;
}

.scene--fluid-stage .primaryBtn:active,
.scene--fluid-stage #submitAnswer:active,
.scene--fluid-stage #nextWord:active,
.scene--fluid-stage #nextWordChoice:active,
.scene--fluid-stage #wordExpositionContinueBtn:active,
.scene--fluid-stage #submitRecallPinyin:active,
.scene--fluid-stage #nextRecallPinyin:active,
.scene--fluid-stage #nextRecallChar:active,
.primaryBtn:active {
  transform: translateY(1px) !important;
  box-shadow:
    0 2px 8px rgba(217, 86, 58, 0.40),
    inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================================================
   CONFINEMENT ET DÉCORS DES PANNEAUX DU HUB & PARCOURS (COLONNE 0)
   Purge absolue de tout pseudo-élément hérité (::before, ::after)
   ========================================================================= */
.panel-heritage-d0,
.panel-heritage-k0,
.panel-heritage-i0,
.panel-heritage-a0 {
  position: relative !important;
  overflow: hidden !important;
}

/* Purge impérative des anciens colophons, équerres et sceau 印 sur ces panneaux */
.panel-heritage-d0::before,
.panel-heritage-d0::after,
.panel.panel-heritage-d0::before,
.panel.panel-heritage-d0::after,
.page.dark .panel.panel-heritage-d0::before,
.page.dark .panel.panel-heritage-d0::after,
body.dark .panel.panel-heritage-d0::before,
body.dark .panel.panel-heritage-d0::after,
.panel-heritage-k0::before,
.panel-heritage-k0::after,
.panel.panel-heritage-k0::before,
.panel.panel-heritage-k0::after,
.page.dark .panel.panel-heritage-k0::before,
.page.dark .panel.panel-heritage-k0::after,
body.dark .panel.panel-heritage-k0::before,
body.dark .panel.panel-heritage-k0::after,
.panel-heritage-i0::before,
.panel-heritage-i0::after,
.panel.panel-heritage-i0::before,
.panel.panel-heritage-i0::after,
.page.dark .panel.panel-heritage-i0::before,
.page.dark .panel.panel-heritage-i0::after,
body.dark .panel.panel-heritage-i0::before,
body.dark .panel.panel-heritage-i0::after,
.panel-heritage-a0::before,
.panel-heritage-a0::after,
.panel.panel-heritage-a0::before,
.panel.panel-heritage-a0::after,
.page.dark .panel.panel-heritage-a0::before,
.page.dark .panel.panel-heritage-a0::after,
body.dark .panel.panel-heritage-a0::before,
body.dark .panel.panel-heritage-a0::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
}

.panel-heritage-d0 .heritage-scene-overlay,
.panel-heritage-k0 .heritage-scene-overlay,
.panel-heritage-i0 .heritage-scene-overlay,
.panel-heritage-a0 .heritage-scene-overlay {
  border-radius: inherit;
  z-index: 1 !important;
  pointer-events: none !important;
}

.panel-heritage-d0 > *:not(.heritage-scene-overlay),
.panel-heritage-k0 > *:not(.heritage-scene-overlay),
.panel-heritage-i0 > *:not(.heritage-scene-overlay),
.panel-heritage-a0 > *:not(.heritage-scene-overlay) {
  position: relative;
  z-index: 10;
}

/* Contrôles interactifs internes (Strate 2) */
.panel-heritage-d0 .levelChip,
.panel-heritage-d0 .customSplitButton,
.panel-heritage-d0 button,
.panel-heritage-k0 button,
.panel-heritage-i0 button,
.panel-heritage-a0 button {
  position: relative !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}

/* --- 1. Panneau Sélecteur HSK D0 (Bassin Impérial) --- */
.panel-heritage-d0 .decor-layer--waves-dynamic {
  position: absolute !important;
  height: 110px !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  opacity: 0.30 !important;
  pointer-events: none !important;
  background-image: url("assets/decor/deco-ocean-wave.webp") !important;
  background-size: 100% 100% !important;
  background-position: bottom center !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: normal !important;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 55%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 55%, transparent 100%) !important;
}

.panel-heritage-d0 .decor-layer--koi-ripple {
  width: clamp(280px, 38vw, 420px) !important;
  height: clamp(180px, 28vw, 280px) !important;
  bottom: -15px !important;
  right: -10px !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
  mix-blend-mode: multiply !important;
  filter: contrast(1.25) brightness(0.98) !important;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 50%, rgba(0,0,0,0.7) 80%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 50%, rgba(0,0,0,0.7) 80%, transparent 100%) !important;
}

.page.dark .panel-heritage-d0 .decor-layer--koi-ripple,
body.dark .panel-heritage-d0 .decor-layer--koi-ripple {
  opacity: 0.92 !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.22) contrast(1.3) drop-shadow(0 0 14px rgba(226, 92, 56, 0.45)) !important;
}

.page.dark .panel-heritage-d0 .decor-layer--waves-dynamic,
body.dark .panel-heritage-d0 .decor-layer--waves-dynamic {
  opacity: 0.26 !important;
  filter: invert(0.88) sepia(0.35) brightness(0.95) !important;
  mix-blend-mode: screen !important;
}

/* --- 2. Grand Panneau de Progression / Guide K0 (Phénix des Brumes) --- */
.panel-heritage-k0 .decor-layer--waves-dynamic,
.panel-heritage-k0 .decor-layer--koi-ripple,
.panel-heritage-k0 .decor-layer--blossom-original {
  display: none !important;
}

.panel-heritage-k0 .decor-layer--ethereal-phoenix {
  display: block !important;
  width: clamp(220px, 32vw, 360px) !important;
  height: clamp(150px, 22vw, 240px) !important;
  top: -10px !important;
  right: -10px !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 45%, rgba(0,0,0,0.55) 70%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 45%, rgba(0,0,0,0.55) 70%, transparent 100%) !important;
}

.page.dark .panel-heritage-k0 .decor-layer--ethereal-phoenix,
body.dark .panel-heritage-k0 .decor-layer--ethereal-phoenix {
  opacity: 0.32 !important;
  filter: brightness(1.2) drop-shadow(0 0 14px rgba(226, 92, 56, 0.35)) !important;
}

/* --- 3. Panneau de Modes de Jeu I0 (Monts Shan Shui Huangshan) --- */
.panel-heritage-i0 .decor-layer--golden-pine {
  display: none !important;
}

.panel-heritage-i0 .decor-layer--huangshan-panorama {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
  background-size: cover !important;
  background-position: bottom center !important;
  background-repeat: no-repeat !important;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 85%, black 25%, rgba(0,0,0,0.5) 60%, transparent 95%) !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 85%, black 25%, rgba(0,0,0,0.5) 60%, transparent 95%) !important;
}

.page.dark .panel-heritage-i0 .decor-layer--huangshan-panorama,
body.dark .panel-heritage-i0 .decor-layer--huangshan-panorama {
  opacity: 0.20 !important;
  filter: invert(0.85) sepia(0.3) brightness(0.9) !important;
  mix-blend-mode: screen !important;
}

/* --- 4. Panneau de Préférences A0 (Pavillon aux Lanternes) --- */
.panel-heritage-a0 .decor-layer--blossom-original {
  display: none !important;
}

.panel-heritage-a0 .decor-layer--lantern-pavilion {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  opacity: 0.32 !important;
  pointer-events: none !important;
  background-position: bottom left !important;
  background-repeat: no-repeat !important;
  background-size: clamp(380px, 48vw, 560px) auto !important;
  mask-image: radial-gradient(ellipse 85% 80% at 0% 100%, black 35%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 0% 100%, black 35%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
}

.page.dark .panel-heritage-a0 .decor-layer--lantern-pavilion,
body.dark .panel-heritage-a0 .decor-layer--lantern-pavilion {
  opacity: 0.38 !important;
  filter: brightness(1.2) drop-shadow(0 0 12px rgba(226, 184, 124, 0.40)) !important;
}

/* --- 3. ARCHITECTURE DE L'OVERLAY DÉCORATIF MULTICOUCHE --- */
.heritage-scene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none !important;
  overflow: hidden;
  z-index: 1;
  border-radius: inherit;
}

.heritage-scene-overlay .decor-layer {
  position: absolute;
  pointer-events: none !important;
}

/* Scaling proportionnel des éléments d'encre en scène fluide */
.scene--fluid-stage .decor-layer--koi-ripple {
  width: clamp(320px, 40vw, 560px) !important;
  height: clamp(240px, 30vw, 380px) !important;
}

.scene--fluid-stage .decor-layer--golden-pine {
  width: clamp(320px, 42vw, 560px) !important;
  height: clamp(220px, 28vw, 360px) !important;
}

/* Pavillon aux lanternes : étiré à 100% de la scène sans restriction de boîte (voir section 4.3) */

.scene--fluid-stage .decor-layer--ethereal-phoenix {
  width: clamp(320px, 40vw, 540px) !important;
  height: clamp(220px, 28vw, 360px) !important;
}

/* Branche Meihua : activée spécifiquement pour l'univers A0 en haut à droite */
.scene--fluid-stage .decor-layer--blossom-original {
  display: none;
}

.scene--fluid-stage .heritage-scene-overlay--A0 .decor-layer--blossom-original,
.heritage-scene-overlay--A0 .decor-layer--blossom-original {
  display: block !important;
  position: absolute !important;
  width: clamp(320px, 35vw, 480px) !important;
  height: clamp(220px, 28vw, 360px) !important;
  top: -15px !important;
  right: -15px !important;
}

.scene--fluid-stage .decor-layer--waves-dynamic,
.scene--fluid-stage .decor-layer--huangshan-panorama,
.scene--fluid-stage .decor-layer--mountains-original {
  width: 100% !important;
  height: clamp(200px, 26vw, 320px) !important;
}

/* --- 4. DÉFINITION DES CALQUES D'ENCRE & MASQUES RADIAUX 360° --- */

/* 4.1. Vagues Haishui Pleines (Bas de scène) */
.decor-layer--waves-dynamic {
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("assets/decor/deco-ocean-wave.webp");
  background-position: bottom center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 0.42;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.40) 70%, rgba(0,0,0,0.10) 90%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 40%, rgba(0,0,0,0.40) 70%, rgba(0,0,0,0.10) 90%, transparent 100%);
  z-index: 1;
}

.page.dark .decor-layer--waves-dynamic,
body.dark .decor-layer--waves-dynamic {
  opacity: 0.38;
  filter: invert(0.88) sepia(0.35) brightness(0.95);
  mix-blend-mode: screen;
}

/* 4.2. Carpe Koï en Remous (Bas Droit) */
.decor-layer--koi-ripple {
  bottom: -10px;
  right: -10px;
  width: clamp(280px, 75%, 440px);
  height: clamp(210px, 62%, 340px);
  background-image: url("assets/decor/deco-koi-ripple.png");
  background-position: bottom right;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.75;
  mix-blend-mode: multiply;
  filter: contrast(1.25) brightness(0.98);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 50%, rgba(0,0,0,0.7) 80%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 50%, rgba(0,0,0,0.7) 80%, transparent 100%);
  z-index: 2;
}

.page.dark .decor-layer--koi-ripple,
body.dark .decor-layer--koi-ripple {
  opacity: 0.90;
  mix-blend-mode: normal;
  filter: brightness(1.22) contrast(1.3) drop-shadow(0 0 2px rgba(225, 215, 200, 0.45)) drop-shadow(0 0 12px rgba(226, 92, 56, 0.40));
}

/* Liant atmosphérique d'encre et de brume au sol pour l'univers A0 */
.heritage-scene-overlay--A0::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(ellipse 95% 45% at 50% 100%, rgba(180, 155, 120, 0.22) 0%, rgba(200, 180, 150, 0.10) 50%, transparent 80%) !important;
  mix-blend-mode: multiply !important;
  z-index: 0 !important;
}

.page.dark .heritage-scene-overlay--A0::before,
body.dark .heritage-scene-overlay--A0::before {
  background: radial-gradient(ellipse 95% 50% at 50% 100%, rgba(12, 8, 5, 0.65) 0%, rgba(226, 92, 56, 0.08) 35%, transparent 80%) !important;
  mix-blend-mode: normal !important;
}

/* 4.3. Pavillon aux Lanternes (Bas Gauche — Éradication Totale du Rebord : 100% du Conteneur Inset 0) */
.decor-layer--lantern-pavilion,
.scene--fluid-stage .decor-layer--lantern-pavilion {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  bottom: 0 !important;
  left: 0 !important;
  pointer-events: none !important;
  background-image: url("assets/decor/deco-lantern-pavilion.png") !important;
  background-position: bottom left !important;
  background-repeat: no-repeat !important;
  background-size: clamp(480px, 50%, 750px) auto !important;
  opacity: 0.55 !important;
  mix-blend-mode: multiply !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 0% 100%, black 25%, transparent 75%) !important;
  mask-image: radial-gradient(ellipse 70% 65% at 0% 100%, black 25%, transparent 75%) !important;
  z-index: 2 !important;
}

.page.dark .decor-layer--lantern-pavilion,
.page.dark .scene--fluid-stage .decor-layer--lantern-pavilion,
body.dark .decor-layer--lantern-pavilion,
body.dark .scene--fluid-stage .decor-layer--lantern-pavilion {
  opacity: 0.75 !important;
  mix-blend-mode: screen !important;
  filter: brightness(1.22) contrast(1.15) drop-shadow(0 0 12px rgba(226, 92, 56, 0.40)) !important;
}

/* 4.4. Roses / Prunier Meihua (Haut Droit — Masque Angulaire Doux 360°) */
.decor-layer--blossom-original {
  top: -15px;
  right: -15px;
  background-image: url("images/blossom.png");
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.40;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 85% 85% at 85% 15%, black 45%, rgba(0,0,0,0.55) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 85% at 85% 15%, black 45%, rgba(0,0,0,0.55) 70%, transparent 100%);
  z-index: 2;
}

.page.dark .decor-layer--blossom-original,
body.dark .decor-layer--blossom-original {
  opacity: 0.30;
  filter: brightness(1.22) contrast(1.15);
  mix-blend-mode: screen;
}

/* 4.5. Panorama des Monts Huangshan (Bas de scène) */
.decor-layer--huangshan-panorama {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  bottom: 0;
  left: 0;
  background-image: url("assets/decor/deco-huangshan-mountains.webp");
  background-position: bottom center;
  background-size: cover !important;
  background-repeat: no-repeat;
  opacity: 0.25;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 85%, black 25%, rgba(0,0,0,0.5) 60%, transparent 95%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 85%, black 25%, rgba(0,0,0,0.5) 60%, transparent 95%);
  z-index: 1;
}

.page.dark .decor-layer--huangshan-panorama,
body.dark .decor-layer--huangshan-panorama {
  opacity: 0.22;
  filter: invert(0.88) brightness(0.85);
  mix-blend-mode: screen;
}

/* 4.6. Pin d'Or aux Aiguilles Célestes (Bas Gauche — Décalé vers le fond) */
.decor-layer--golden-pine {
  bottom: -35px;
  left: -20px;
  background-image: url("assets/decor/deco-golden-pine.png");
  background-position: bottom left;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.52;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 45% 65%, black 45%, rgba(0,0,0,0.65) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 45% 65%, black 45%, rgba(0,0,0,0.65) 70%, transparent 100%);
  z-index: 2;
}

.page.dark .decor-layer--golden-pine,
body.dark .decor-layer--golden-pine {
  opacity: 0.72;
  mix-blend-mode: normal;
  filter: brightness(1.18) contrast(1.12) drop-shadow(0 0 1.5px rgba(225, 215, 200, 0.40)) drop-shadow(0 0 10px rgba(226, 92, 56, 0.35));
}

/* 4.7. Chaîne de Montagnes Sumi-e (Bas de scène) */
.decor-layer--mountains-original {
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url("images/mountains.jpg");
  background-position: center bottom;
  background-size: cover;
  opacity: 0.50;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.25) 80%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.25) 80%, transparent 100%);
  z-index: 1;
}

.page.dark .decor-layer--mountains-original,
body.dark .decor-layer--mountains-original {
  opacity: 0.36;
  mix-blend-mode: screen;
  filter: invert(0.88) brightness(0.8);
}

/* 4.8. Phénix des Brumes Fenghuang (Haut Droit) */
.decor-layer--ethereal-phoenix {
  top: -5px;
  right: -15px;
  background-image: url("assets/decor/deco-ethereal-phoenix.png");
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.52;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 55% 50%, black 50%, rgba(0,0,0,0.7) 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 55% 50%, black 50%, rgba(0,0,0,0.7) 75%, transparent 100%);
  z-index: 2;
}

.page.dark .decor-layer--ethereal-phoenix,
body.dark .decor-layer--ethereal-phoenix {
  opacity: 0.72;
  mix-blend-mode: normal;
  filter: brightness(1.18) contrast(1.12) drop-shadow(0 0 1.5px rgba(225, 215, 200, 0.40)) drop-shadow(0 0 10px rgba(226, 92, 56, 0.35));
}

/* --- 5. COMPOSITIONS DES 7 UNIVERS ÉTALONS DE LA COLONNE 0 (ASSINIS : SANS BRANCHES PARASITES) --- */

/* Univers A0 : Pavillon aux lanternes (bas gauche) + Branche Meihua délicate (haut droit) */
.heritage-scene-overlay--A0 .decor-layer--lantern-pavilion,
.heritage-scene-overlay--A0 .decor-layer--blossom-original { display: block !important; }

/* Univers B0 : Vagues pleines + Carpe Koï géante (QCM 4 Choix) */
.heritage-scene-overlay--B0 .decor-layer--waves-dynamic,
.heritage-scene-overlay--B0 .decor-layer--koi-ripple { display: block; }

/* Univers D0 : Vagues pleines + Carpe Koï (Classification & Niveaux) */
.heritage-scene-overlay--D0 .decor-layer--waves-dynamic,
.heritage-scene-overlay--D0 .decor-layer--koi-ripple { display: block; }

/* Univers E0 : Huangshan + Pin d'or (Saisie Pinyin) */
.heritage-scene-overlay--E0 .decor-layer--huangshan-panorama,
.heritage-scene-overlay--E0 .decor-layer--golden-pine { display: block; }

/* Univers I0 : Huangshan + Pin d'or (Nouveau Mot Découverte) */
.heritage-scene-overlay--I0 .decor-layer--huangshan-panorama,
.heritage-scene-overlay--I0 .decor-layer--golden-pine { display: block; }

/* Univers J0 : Montagnes + Phénix des Brumes (Syntaxe & Contexte) */
.heritage-scene-overlay--J0 .decor-layer--mountains-original,
.heritage-scene-overlay--J0 .decor-layer--ethereal-phoenix { display: block; }

/* Univers K0 : Vagues + Carpe Koï (Bilan de Session sans branches parasites) */
.heritage-scene-overlay--K0 .decor-layer--waves-dynamic,
.heritage-scene-overlay--K0 .decor-layer--koi-ripple { display: block; }

/* --- 6. STYLES TACTILES & LIQUID GLASS POUR TOUCHES DE QCM ET ACTIONS --- */

/* Grille de choix QCM Universelle (standard 2x2 réactif) */
.scene--fluid-stage .choiceGrid,
.choiceGrid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  max-width: 860px !important;
  width: 100% !important;
  margin: 20px auto 0 !important;
  position: relative !important;
  z-index: 25 !important;
  box-sizing: border-box !important;
}

@media (max-width: 600px) {
  .scene--fluid-stage .choiceGrid,
  .choiceGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Boutons de choix QCM : 64px tactile, zéro blur, biseau 3D franc */
.scene--fluid-stage .choiceButton,
.choiceButton {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 64px !important;
  width: 100% !important;
  padding: 16px 20px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  font-family: var(--font-han, "Noto Serif SC"), var(--ui, sans-serif) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  cursor: pointer !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 25 !important;
  pointer-events: auto !important;
  transition: all 0.16s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* Touches neutres en mode clair : ivoire satiné 94% */
.scene--fluid-stage .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect),
.choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect) {
  background: rgba(255, 252, 248, 0.94) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  color: var(--ink, #2A1D18) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
    0 4px 12px rgba(42, 30, 21, 0.08),
    0 1px 3px rgba(42, 30, 21, 0.04) !important;
}

.scene--fluid-stage .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect):hover,
.choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect):hover {
  transform: translateY(-2px) !important;
  background: #FFFFFF !important;
  border-color: rgba(197, 155, 39, 0.65) !important;
  box-shadow:
    inset 0 1.5px 0.5px #FFFFFF,
    0 8px 20px rgba(42, 30, 21, 0.12) !important;
}

/* Touches neutres en mode sombre : laque impériale 94% */
.page.dark .scene--fluid-stage .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect),
.page.dark .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect),
body.dark .scene--fluid-stage .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect),
body.dark .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect) {
  background: rgba(34, 22, 16, 0.94) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.28) !important;
  color: var(--ink, #F2E6D2) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(212, 175, 55, 0.20),
    0 4px 14px rgba(0, 0, 0, 0.50) !important;
}

.page.dark .scene--fluid-stage .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect):hover,
.page.dark .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect):hover,
body.dark .scene--fluid-stage .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect):hover,
body.dark .choiceButton:not(.choiceButton-correct):not(.choiceButton-incorrect):hover {
  transform: translateY(-2px) !important;
  background: rgba(46, 30, 22, 0.96) !important;
  border-color: rgba(212, 175, 55, 0.55) !important;
  box-shadow:
    inset 0 1.5px 0.5px rgba(212, 175, 55, 0.35),
    0 8px 22px rgba(0, 0, 0, 0.65) !important;
}

/* Touche Correcte : Vert Jade Incandescent (Opaque/Satiné, ZÉRO blur) */
.scene--fluid-stage .choiceButton.choiceButton-correct,
.choiceButton.choiceButton-correct {
  background: #1B4D2E !important;
  border: 1.5px solid #2ECC71 !important;
  color: #E8F8F0 !important;
  box-shadow:
    0 4px 18px rgba(46, 204, 113, 0.40),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.scene--fluid-stage .choiceButton.choiceButton-correct::after,
.choiceButton.choiceButton-correct::after {
  content: "对";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #2ECC71;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Touche Incorrecte : Rouge Cinabre Incandescent (Opaque/Satiné, ZÉRO blur) */
.scene--fluid-stage .choiceButton.choiceButton-incorrect,
.choiceButton.choiceButton-incorrect {
  background: #6A1A14 !important;
  border: 1.5px solid #E74C3C !important;
  color: #FDEDEC !important;
  box-shadow:
    0 4px 18px rgba(231, 76, 60, 0.40),
    inset 0 1.5px 0.5px rgba(255, 255, 255, 0.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.scene--fluid-stage .choiceButton.choiceButton-incorrect::after,
.choiceButton.choiceButton-incorrect::after {
  content: "错";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #FFA489;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Boutons d'action : suppression de tout bandeau parasite, flottement libre */
.scene--fluid-stage .actionsRowButtons,
.scene--fluid-stage .actionsRowButtonsReserved,
.scene--fluid-stage .actionsRowButtonsReserved .actionsRowButtons {
  position: relative;
  z-index: 25;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- 7. ONGLETS DE KITS (KITVIEWTABS) — STYLE LIQUID GLASS MODERNE --- */
.kitViewTabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.kitViewTab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}

/* Onglet inactif : capsule satinée soyeuse sans blur */
.kitViewTab--inactive {
  background: rgba(255, 252, 248, 0.94) !important;
  color: var(--ink-2, #5C4733) !important;
  border: 1px solid rgba(197, 155, 39, 0.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(42, 30, 21, 0.05) !important;
}

.kitViewTab--inactive:hover {
  background: #FFFFFF !important;
  color: var(--ink, #2A1E15) !important;
  border-color: rgba(197, 155, 39, 0.55) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(42, 30, 21, 0.10) !important;
}

.page.dark .kitViewTab--inactive,
body.dark .kitViewTab--inactive {
  background: rgba(34, 22, 16, 0.94) !important;
  color: var(--ink-2, #D3BE9F) !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

.page.dark .kitViewTab--inactive:hover,
body.dark .kitViewTab--inactive:hover {
  background: rgba(46, 30, 22, 0.96) !important;
  color: #FFF !important;
  border-color: rgba(212, 175, 55, 0.50) !important;
}

/* Onglet actif : pilule rouge cinabre impériale incandescente */
.kitViewTab--active {
  background: linear-gradient(135deg, #D9563A 0%, #B8402A 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  font-weight: 700 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 16px rgba(217, 86, 58, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
  transform: translateY(-1px) !important;
}

.kitViewTab--active .kitViewTabIcon {
  color: #FFE6E0 !important;
}

.kitViewTabIcon {
  font-family: var(--serif, "Songti SC", serif) !important;
  font-size: 15px !important;
}

/* --- 8. ADAPTATIONS RESPONSIVE (MOBILE < 600px) --- */
@media (max-width: 600px) {
  .gameContainer.scene--fluid-stage,
  .container.scene--fluid-stage {
    width: calc(100% - 20px) !important;
    padding: 12px 0 !important;
  }
  
  .scene--fluid-stage .decor-layer--koi-ripple,
  .scene--fluid-stage .decor-layer--golden-pine,
  .scene--fluid-stage .decor-layer--lantern-pavilion,
  .scene--fluid-stage .decor-layer--ethereal-phoenix {
    width: 280px !important;
    height: 190px !important;
    opacity: 0.35 !important;
  }
  
  .scene--fluid-stage .decor-layer--waves-dynamic,
  .scene--fluid-stage .decor-layer--huangshan-panorama,
  .scene--fluid-stage .decor-layer--mountains-original {
    height: 180px !important;
    opacity: 0.28 !important;
  }
}

/* --- 9. FICHES D'ERREURS ET DE REMÉDIATION DANS SUMMARYSCREEN (LIGNE H0) --- */
.scene--fluid-stage .mistakeList,
.mistakeList {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 860px !important;
  margin: 16px auto 0 !important;
}

.scene--fluid-stage .mistakeItem,
.mistakeItem {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 18px 24px !important;
  border-radius: 20px !important;
  background: rgba(253, 248, 242, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  box-shadow:
    0 8px 24px rgba(42, 30, 21, 0.08),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95) !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.page.dark .scene--fluid-stage .mistakeItem,
.page.dark .mistakeItem,
body.dark .scene--fluid-stage .mistakeItem,
body.dark .mistakeItem {
  background: rgba(38, 26, 18, 0.94) !important;
  border-color: rgba(226, 184, 124, 0.28) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 1.5px 1px rgba(232, 197, 148, 0.18) !important;
}

/* Cartouche Hanzi doux à gauche */
.scene--fluid-stage .mistakeChar,
.mistakeChar {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--han, "Noto Serif SC", serif) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--heritage-cinabre, #D9563A) !important;
  background: rgba(217, 86, 58, 0.10) !important;
  border: 1.5px solid rgba(217, 86, 58, 0.35) !important;
  border-radius: 16px !important;
  box-shadow:
    0 2px 10px rgba(217, 86, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
  line-height: 1 !important;
  text-align: center !important;
}

.page.dark .scene--fluid-stage .mistakeChar,
.page.dark .mistakeChar,
body.dark .scene--fluid-stage .mistakeChar,
body.dark .mistakeChar {
  background: rgba(217, 86, 58, 0.18) !important;
  border-color: rgba(217, 86, 58, 0.45) !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  color: #FFA489 !important;
}

/* Bloc d'informations d'erreur */
.scene--fluid-stage .mistakeDetails,
.mistakeDetails {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  text-align: left !important;
}

.scene--fluid-stage .mistakeHeaderRow,
.mistakeHeaderRow {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

.scene--fluid-stage .mistakeTitle,
.mistakeTitle {
  font-family: var(--ui, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ink, #2A1E15) !important;
  line-height: 1.3 !important;
}

.page.dark .scene--fluid-stage .mistakeTitle,
.page.dark .mistakeTitle,
body.dark .scene--fluid-stage .mistakeTitle,
body.dark .mistakeTitle {
  color: var(--ink, #F2E6D2) !important;
}

.scene--fluid-stage .mistakeDiagLabel,
.mistakeDiagLabel {
  font-family: var(--ui, sans-serif) !important;
  font-size: 13px !important;
  color: var(--ink-3, #8C7560) !important;
}

.page.dark .scene--fluid-stage .mistakeDiagLabel,
.page.dark .mistakeDiagLabel,
body.dark .scene--fluid-stage .mistakeDiagLabel,
body.dark .mistakeDiagLabel {
  color: var(--ink-3, #A89279) !important;
}

/* Capsule de friction / Rappel de fausse saisie */
.scene--fluid-stage .mistakeYourAnswer,
.mistakeYourAnswer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--ui, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--heritage-cinabre, #D9563A) !important;
  background: rgba(217, 86, 58, 0.08) !important;
  border: 1px solid rgba(217, 86, 58, 0.28) !important;
  border-radius: 8px !important;
  padding: 4px 12px !important;
  margin-top: 4px !important;
  width: fit-content !important;
  box-shadow: 0 1px 4px rgba(217, 86, 58, 0.08) !important;
}

.page.dark .scene--fluid-stage .mistakeYourAnswer,
.page.dark .mistakeYourAnswer,
body.dark .scene--fluid-stage .mistakeYourAnswer,
body.dark .mistakeYourAnswer {
  background: rgba(217, 86, 58, 0.15) !important;
  border-color: rgba(217, 86, 58, 0.35) !important;
  color: #FFA489 !important;
}

/* Boutons d'actions tactiles H0 sous chaque carte */
.scene--fluid-stage .mistakeActionsRow,
.mistakeActionsRow {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.mistakeBtnSmall {
  font-size: 12.5px !important;
  padding: 6px 16px !important;
  border-radius: 999px !important;
  height: 32px !important;
}

/* =========================================================================
   10. BADGES HSK 1 À 6 NOBLES — COULEURS PATRIMONIALES HARMONISÉES
   ========================================================================= */

.levelTag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  transition: all 0.18s ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* HSK 1 : Jade doux / vert sauge (#2E7D32) */
.levelTag--hsk1, [data-hsk="1"] .levelTag, .levelTag[style*="#4F7965"], .levelTag[style*="#2E7D32"] {
  background: rgba(46, 125, 50, 0.18) !important;
  color: #2E7D32 !important;
  border: 1px solid rgba(46, 125, 50, 0.38) !important;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}
.page.dark .levelTag--hsk1, .page.dark [data-hsk="1"] .levelTag, .page.dark .levelTag[style*="#4F7965"], .page.dark .levelTag[style*="#2E7D32"],
body.dark .levelTag--hsk1, body.dark [data-hsk="1"] .levelTag, body.dark .levelTag[style*="#4F7965"], body.dark .levelTag[style*="#2E7D32"] {
  background: rgba(46, 125, 50, 0.25) !important;
  color: #81C784 !important;
  border-color: rgba(46, 125, 50, 0.50) !important;
}

/* HSK 2 : Ambre / or impérial (#C59B27) */
.levelTag--hsk2, [data-hsk="2"] .levelTag, .levelTag[style*="#C9762B"], .levelTag[style*="#C59B27"] {
  background: rgba(197, 155, 39, 0.18) !important;
  color: #B2821A !important;
  border: 1px solid rgba(197, 155, 39, 0.38) !important;
  box-shadow: 0 2px 6px rgba(197, 155, 39, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}
.page.dark .levelTag--hsk2, .page.dark [data-hsk="2"] .levelTag, .page.dark .levelTag[style*="#C9762B"], .page.dark .levelTag[style*="#C59B27"],
body.dark .levelTag--hsk2, body.dark [data-hsk="2"] .levelTag, body.dark .levelTag[style*="#C9762B"], body.dark .levelTag[style*="#C59B27"] {
  background: rgba(197, 155, 39, 0.25) !important;
  color: #FFD54F !important;
  border-color: rgba(197, 155, 39, 0.50) !important;
}

/* HSK 3 : Cinabre ardent (#D9563A) */
.levelTag--hsk3, [data-hsk="3"] .levelTag, .levelTag[style*="#8B3A3A"], .levelTag[style*="#D9563A"] {
  background: rgba(217, 86, 58, 0.18) !important;
  color: #D9563A !important;
  border: 1px solid rgba(217, 86, 58, 0.38) !important;
  box-shadow: 0 2px 6px rgba(217, 86, 58, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}
.page.dark .levelTag--hsk3, .page.dark [data-hsk="3"] .levelTag, .page.dark .levelTag[style*="#8B3A3A"], .page.dark .levelTag[style*="#D9563A"],
body.dark .levelTag--hsk3, body.dark [data-hsk="3"] .levelTag, body.dark .levelTag[style*="#8B3A3A"], body.dark .levelTag[style*="#D9563A"] {
  background: rgba(217, 86, 58, 0.25) !important;
  color: #FFA489 !important;
  border-color: rgba(217, 86, 58, 0.50) !important;
}

/* HSK 4 : Bleu lapis-lazuli / indigo (#1E88E5) */
.levelTag--hsk4, [data-hsk="4"] .levelTag, .levelTag[style*="#3D5A80"], .levelTag[style*="#1E88E5"] {
  background: rgba(30, 136, 229, 0.18) !important;
  color: #1976D2 !important;
  border: 1px solid rgba(30, 136, 229, 0.38) !important;
  box-shadow: 0 2px 6px rgba(30, 136, 229, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}
.page.dark .levelTag--hsk4, .page.dark [data-hsk="4"] .levelTag, .page.dark .levelTag[style*="#3D5A80"], .page.dark .levelTag[style*="#1E88E5"],
body.dark .levelTag--hsk4, body.dark [data-hsk="4"] .levelTag, body.dark .levelTag[style*="#3D5A80"], body.dark .levelTag[style*="#1E88E5"] {
  background: rgba(30, 136, 229, 0.25) !important;
  color: #90CAF9 !important;
  border-color: rgba(30, 136, 229, 0.50) !important;
}

/* HSK 5 : Pourpre impériale / prune (#8E24AA) */
.levelTag--hsk5, [data-hsk="5"] .levelTag, .levelTag[style*="#6B4C8A"], .levelTag[style*="#8E24AA"] {
  background: rgba(142, 36, 170, 0.18) !important;
  color: #8E24AA !important;
  border: 1px solid rgba(142, 36, 170, 0.38) !important;
  box-shadow: 0 2px 6px rgba(142, 36, 170, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}
.page.dark .levelTag--hsk5, .page.dark [data-hsk="5"] .levelTag, .page.dark .levelTag[style*="#6B4C8A"], .page.dark .levelTag[style*="#8E24AA"],
body.dark .levelTag--hsk5, body.dark [data-hsk="5"] .levelTag, body.dark .levelTag[style*="#6B4C8A"], body.dark .levelTag[style*="#8E24AA"] {
  background: rgba(142, 36, 170, 0.25) !important;
  color: #CE93D8 !important;
  border-color: rgba(142, 36, 170, 0.50) !important;
}

/* HSK 6 : Or pur étincelant (#D4AF37) */
.levelTag--hsk6, [data-hsk="6"] .levelTag, .levelTag[style*="#946200"], .levelTag[style*="#D4AF37"] {
  background: rgba(212, 175, 55, 0.20) !important;
  color: #A37F14 !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 2px 6px rgba(212, 175, 55, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}
.page.dark .levelTag--hsk6, .page.dark [data-hsk="6"] .levelTag, .page.dark .levelTag[style*="#946200"], .page.dark .levelTag[style*="#D4AF37"],
body.dark .levelTag--hsk6, body.dark [data-hsk="6"] .levelTag, body.dark .levelTag[style*="#946200"], body.dark .levelTag[style*="#D4AF37"] {
  background: rgba(212, 175, 55, 0.28) !important;
  color: #FFE082 !important;
  border-color: rgba(212, 175, 55, 0.60) !important;
}

/* =========================================================================
   11. ENRICHISSEMENT DES GRANDES CARTES DU HUB (PANELS, STATS, ACTIONS)
   ========================================================================= */

.panel,
.hubPanel,
.tableCard,
.statCard,
.hubMainSection,
.dashboardMissedItem {
  position: relative !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(197, 155, 39, 0.28) !important;
  border-top: 3px solid #D9563A !important;
  box-shadow:
    0 10px 30px rgba(42, 30, 21, 0.08),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.90) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.panel:hover,
.hubPanel:hover,
.tableCard:hover,
.statCard:hover {
  border-color: rgba(197, 155, 39, 0.45) !important;
  box-shadow:
    0 14px 36px rgba(42, 30, 21, 0.12),
    inset 0 1.5px 1px #FFFFFF !important;
}

/* Thème sombre : laque impériale, liseré or brossé, zéro gris béton */
.page.dark .panel,
.page.dark .hubPanel,
.page.dark .tableCard,
.page.dark .statCard,
.page.dark .hubMainSection,
.page.dark .dashboardMissedItem,
body.dark .panel,
body.dark .hubPanel,
body.dark .tableCard,
body.dark .statCard,
body.dark .hubMainSection,
body.dark .dashboardMissedItem {
  background:
    repeating-linear-gradient(45deg, rgba(232, 197, 148, 0.02) 0px, rgba(232, 197, 148, 0.02) 2px, transparent 2px, transparent 8px),
    linear-gradient(168deg, #221610 0%, #1A100B 100%) !important;
  border: 1.5px solid rgba(212, 175, 55, 0.28) !important;
  border-top: 3px solid #D9563A !important;
  box-shadow:
    0 16px 40px -10px rgba(0, 0, 0, 0.75),
    inset 0 1.5px 1px rgba(212, 175, 55, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.60) !important;
}

.page.dark .panel:hover,
.page.dark .hubPanel:hover,
.page.dark .tableCard:hover,
.page.dark .statCard:hover,
body.dark .panel:hover,
body.dark .hubPanel:hover,
body.dark .tableCard:hover,
body.dark .statCard:hover {
  border-color: rgba(212, 175, 55, 0.50) !important;
  box-shadow:
    0 20px 48px -8px rgba(0, 0, 0, 0.85),
    inset 0 1.5px 1px rgba(212, 175, 55, 0.35) !important;
}

/* =========================================================================
   BOÎTE HANZI WRITER & ORDRE DES TRAITS — FOND SATINÉ & GRILLE MI ZI GE
   Éradication totale du gris et des filtres feTurbulence sur le tracé
   ========================================================================= */
.strokeOrderTarget,
.writingRepTarget,
.writingRepPlaceholder,
#characterTarget,
.writerTarget,
.writingCanvas,
.hanziWriterBox,
.componentWorkshop {
  background-color: #FAF6EE !important;
  background-image:
    /* Mi Zi Ge (米字格) : Diagonales subtiles */
    linear-gradient(45deg, transparent calc(50% - 0.75px), rgba(197, 155, 39, 0.16) calc(50% - 0.75px), rgba(197, 155, 39, 0.16) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(135deg, transparent calc(50% - 0.75px), rgba(197, 155, 39, 0.16) calc(50% - 0.75px), rgba(197, 155, 39, 0.16) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    /* Mi Zi Ge (米字格) : Médianes horizontale et verticale */
    linear-gradient(to bottom, transparent calc(50% - 0.75px), rgba(217, 86, 58, 0.20) calc(50% - 0.75px), rgba(217, 86, 58, 0.20) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to right, transparent calc(50% - 0.75px), rgba(217, 86, 58, 0.20) calc(50% - 0.75px), rgba(217, 86, 58, 0.20) calc(50% + 0.75px), transparent calc(50% + 0.75px)) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 1.5px solid rgba(197, 155, 39, 0.35) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 24px rgba(42, 30, 21, 0.08),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

.page.dark .strokeOrderTarget,
.page.dark .writingRepTarget,
.page.dark .writingRepPlaceholder,
.page.dark #characterTarget,
.page.dark .writerTarget,
.page.dark .writingCanvas,
.page.dark .hanziWriterBox,
.page.dark .componentWorkshop,
body.dark .strokeOrderTarget,
body.dark .writingRepTarget,
body.dark .writingRepPlaceholder,
body.dark #characterTarget,
body.dark .writerTarget,
body.dark .writingCanvas,
body.dark .hanziWriterBox,
body.dark .componentWorkshop {
  background-color: #221610 !important;
  background-image:
    /* Mi Zi Ge (米字格) Sombre : Diagonales ambrées délicates */
    linear-gradient(45deg, transparent calc(50% - 0.75px), rgba(226, 184, 124, 0.16) calc(50% - 0.75px), rgba(226, 184, 124, 0.16) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(135deg, transparent calc(50% - 0.75px), rgba(226, 184, 124, 0.16) calc(50% - 0.75px), rgba(226, 184, 124, 0.16) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    /* Mi Zi Ge (米字格) Sombre : Médianes or brossé ambré */
    linear-gradient(to bottom, transparent calc(50% - 0.75px), rgba(226, 184, 124, 0.22) calc(50% - 0.75px), rgba(226, 184, 124, 0.22) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to right, transparent calc(50% - 0.75px), rgba(226, 184, 124, 0.22) calc(50% - 0.75px), rgba(226, 184, 124, 0.22) calc(50% + 0.75px), transparent calc(50% + 0.75px)) !important;
  border-color: rgba(226, 184, 124, 0.32) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    inset 0 1.5px 1px rgba(232, 197, 148, 0.18) !important;
}

/* Transparence absolue des SVG de tracé HanziWriter internes */
.strokeOrderTarget svg,
.writingRepTarget svg,
#characterTarget svg,
.writerTarget svg,
.writingCanvas svg {
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================================
   HIÉRARCHIE STRICTE DES CALQUES ET STRATES CSS
   Strate 0 : Décors et textures (z-index: 1, pointer-events: none)
   Strate 1 : Cartes principales et conteneurs (z-index: 10, fond opaque 94%+)
   Strate 2 : Contrôles interactifs (z-index: 25, pointer-events: auto, pas de backdrop-filter)
   ========================================================================= */

/* --- Strate 0 : Décors et textures --- */
.heritage-scene-overlay,
.decor-layer,
.panel::before,
.wordSidebar::before {
  z-index: 1 !important;
  pointer-events: none !important;
}

/* --- Strate 1 : Cartes principales & Conteneurs (Opaque à 96%+) --- */
.panel,
.wordCard,
.summaryCard,
.choiceGrid,
.writingRepBox {
  position: relative;
  z-index: 10;
}

.mistakeItem {
  position: relative !important;
  z-index: 10 !important;
  background: rgba(253, 248, 242, 0.96) !important;
  opacity: 1 !important;
}

.page.dark .mistakeItem,
body.dark .mistakeItem {
  background: rgba(34, 22, 16, 0.96) !important;
  opacity: 1 !important;
}

/* --- Strate 2 : Contrôles interactifs prioritaires --- */
.btn,
.primaryBtn,
.secondaryBtn,
.choiceButton,
.speakerBtn,
.levelChip,
.tabBtn,
.writingShowAnswerBtn,
.strokeOrderModeBtn,
.strokeOrderReplayBtn {
  z-index: 25 !important;
  pointer-events: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* =========================================================================
   ACCESSIBILITÉ CLAVIER & NAVIGATION TAB UNIVERSELLE (:focus-visible)
   Anneau impérial cinabre à haut contraste, visible sur tout fond clair ou sombre
   ========================================================================= */
.btn:focus-visible,
.primaryBtn:focus-visible,
.secondaryBtn:focus-visible,
.choiceButton:focus-visible,
.speakerBtn:focus-visible,
.levelChip:focus-visible,
.tabBtn:focus-visible,
.sentenceTile:focus-visible,
.mistakeBtnSmall:focus-visible,
.kitViewTab:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
.mode-card:focus-visible,
.modeCard:focus-visible,
.classicQuizCard:focus-visible,
.chip:focus-visible {
  outline: 3px solid #D9563A !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(217, 86, 58, 0.35) !important;
  z-index: 50 !important;
}

.page.dark .btn:focus-visible,
.page.dark .primaryBtn:focus-visible,
.page.dark .secondaryBtn:focus-visible,
.page.dark .choiceButton:focus-visible,
.page.dark .speakerBtn:focus-visible,
.page.dark .levelChip:focus-visible,
.page.dark .tabBtn:focus-visible,
.page.dark .sentenceTile:focus-visible,
.page.dark .mistakeBtnSmall:focus-visible,
.page.dark .kitViewTab:focus-visible,
.page.dark button:focus-visible,
.page.dark [role="button"]:focus-visible,
.page.dark input:focus-visible,
.page.dark .mode-card:focus-visible,
.page.dark .modeCard:focus-visible,
.page.dark .classicQuizCard:focus-visible,
.page.dark .chip:focus-visible,
body.dark button:focus-visible,
body.dark [role="button"]:focus-visible {
  outline: 3px solid #F07E65 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(240, 126, 101, 0.45) !important;
  z-index: 50 !important;
}

/* =========================================================================
   FOCUS PROGRAMMATIQUE VISIBLE POUR L'ENCHAÎNEMENT FLUIDE (:focus)
   Garantit que le bouton pré-sélectionné (action primaire "Suivant / Continuer")
   affiche l'anneau impérial cinabre même après un clic souris préalable.
   ========================================================================= */
.primaryBtn:focus,
#continueCheckpoint:focus,
#nextKitBtn:focus,
#advanceToNextKit:focus,
#tutorContinue:focus,
#nextSentenceCloze:focus,
#reviewNextWord:focus,
[data-action="next-word"]:focus,
[data-action="next-choice-word"]:focus,
[data-action="next-sentence"]:focus,
[data-action="next-writing-word"]:focus,
[data-action="next-pinyin"]:focus,
[data-action="restart-session"]:focus {
  outline: 3px solid #D9563A !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(217, 86, 58, 0.35) !important;
  z-index: 50 !important;
}

.page.dark .primaryBtn:focus,
.page.dark #continueCheckpoint:focus,
.page.dark #nextKitBtn:focus,
.page.dark #advanceToNextKit:focus,
.page.dark #tutorContinue:focus,
.page.dark #nextSentenceCloze:focus,
.page.dark #reviewNextWord:focus,
.page.dark [data-action="next-word"]:focus,
.page.dark [data-action="next-choice-word"]:focus,
.page.dark [data-action="next-sentence"]:focus,
.page.dark [data-action="next-writing-word"]:focus,
.page.dark [data-action="next-pinyin"]:focus,
.page.dark [data-action="restart-session"]:focus,
body.dark .primaryBtn:focus,
body.dark #continueCheckpoint:focus,
body.dark #nextKitBtn:focus,
body.dark #advanceToNextKit:focus,
body.dark #tutorContinue:focus,
body.dark #nextSentenceCloze:focus,
body.dark #reviewNextWord:focus,
body.dark [data-action="next-word"]:focus,
body.dark [data-action="next-choice-word"]:focus,
body.dark [data-action="next-sentence"]:focus,
body.dark [data-action="next-writing-word"]:focus,
body.dark [data-action="next-pinyin"]:focus,
body.dark [data-action="restart-session"]:focus {
  outline: 3px solid #F07E65 !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 4px rgba(240, 126, 101, 0.45) !important;
  z-index: 50 !important;
}

/* =========================================================================
   CARTOUCHES D'EXEMPLES (LIGNE J) — CAPSULE DU MOT FRANÇAIS CIBLE
   ========================================================================= */
.exampleHighlight {
  color: var(--cinabre, #D9563A) !important;
  font-weight: 700 !important;
}

.exampleChar .exampleHighlight {
  border-bottom: 2px solid var(--cinabre, #D9563A) !important;
}

.examplePinyin .exampleHighlight {
  border-bottom: 1.5px solid var(--cinabre, #D9563A) !important;
}

.exampleHighlight--fr {
  display: inline-block !important;
  background: rgba(217, 86, 58, 0.08) !important;
  border-bottom: 1.5px solid var(--cinabre, #D9563A) !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  color: var(--cinabre, #D9563A) !important;
  font-weight: 600 !important;
  margin: 0 2px !important;
  line-height: 1.3 !important;
  box-shadow: 0 1px 3px rgba(217, 86, 58, 0.08) !important;
}

.page.dark .exampleChar .exampleHighlight,
body.dark .exampleChar .exampleHighlight {
  border-bottom-color: #E0684B !important;
  color: #FFA489 !important;
}

.page.dark .examplePinyin .exampleHighlight,
body.dark .examplePinyin .exampleHighlight {
  border-bottom-color: #E0684B !important;
  color: #FFA489 !important;
}

.page.dark .exampleHighlight--fr,
body.dark .exampleHighlight--fr {
  background: rgba(217, 86, 58, 0.16) !important;
  border-bottom: 1.5px solid #E0684B !important;
  color: #FFA489 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
}

/* =========================================================================
   HARMONISATION DES LISTES DE VOCABULAIRE & FICHES (LIQUID GLASS 94%)
   ========================================================================= */
.wordListItem {
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
  border: 1px solid transparent !important;
}

.wordListItem:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(197, 155, 39, 0.30) !important;
}

.page.dark .wordListItem:hover,
body.dark .wordListItem:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(226, 184, 124, 0.28) !important;
}

.wordListItem-expanded {
  background: rgba(217, 86, 58, 0.09) !important;
  border-color: rgba(217, 86, 58, 0.35) !important;
}

.page.dark .wordListItem-expanded,
body.dark .wordListItem-expanded {
  background: rgba(217, 86, 58, 0.18) !important;
  border-color: rgba(226, 114, 79, 0.45) !important;
}

/* =========================================================================
   13. DIRECTION ARTISTIQUE « GRANDE FRESQUE SHANSHUI » — FOND PANORAMIQUE UNIFIÉ DU HUB
   Unification absolue du fond entre Parcours guidé et Entraînement libre.
   Zéro interaction : pointer-events: none, aria-hidden, z-index: 0 fixe.
   ========================================================================= */

.hubScenicBackdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  user-select: none;
}

.page:has(.hubScenicBackdrop)::after {
  display: none !important;
}

/* Couches de composition Shanshui */
.hubScenicLayer {
  display: block;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 1. Vol de grues célestes dans la brume (Haut Droite — Masque 360° ultra-doux) */
.hubScenicLayer--cranes {
  position: absolute;
  top: 12px;
  right: clamp(20px, 6vw, 100px);
  width: clamp(260px, 26vw, 440px);
  height: clamp(160px, 18vw, 280px);
  background-image: url("assets/decor/deco-crane-flight.png");
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.28;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 90% 85% at 75% 25%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.80) 35%, rgba(0,0,0,0.40) 65%, rgba(0,0,0,0.10) 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 85% at 75% 25%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.80) 35%, rgba(0,0,0,0.40) 65%, rgba(0,0,0,0.10) 85%, transparent 100%);
}

/* 2. Grand Pin Millénaire Doré (Flanc Gauche — Masque Elliptique doux sans aucun rebord) */
.hubScenicLayer--pine {
  position: absolute;
  top: 8vh;
  left: 0;
  width: clamp(200px, 20vw, 360px);
  height: 75vh;
  background-image: url("assets/decor/deco-golden-pine.png");
  background-position: left center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.26;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 92% 75% at 0% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.80) 35%, rgba(0,0,0,0.42) 65%, rgba(0,0,0,0.10) 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 75% at 0% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.80) 35%, rgba(0,0,0,0.42) 65%, rgba(0,0,0,0.10) 85%, transparent 100%);
}

/* 3. Pavillon des Lettrés (Flanc Droit — Fondu brumeux 360° sans découpe) */
.hubScenicLayer--pavilion {
  position: absolute;
  top: 28vh;
  right: 0;
  width: clamp(180px, 18vw, 320px);
  height: 48vh;
  background-image: url("assets/decor/deco-scholar-pavilion.png");
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.24;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 92% 75% at 100% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.80) 35%, rgba(0,0,0,0.40) 65%, rgba(0,0,0,0.10) 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 75% at 100% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.80) 35%, rgba(0,0,0,0.40) 65%, rgba(0,0,0,0.10) 85%, transparent 100%);
}

/* 4. Panorama des Monts Huangshan (Pied de page — Dissolution radiale totale de tous les rebords) */
.hubScenicLayer--mountains {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(260px, 30vh, 400px);
  background-image: url("assets/decor/deco-huangshan-mountains.webp");
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.26;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.10) 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.10) 85%, transparent 100%);
}

/* 5. Vagues d'estampe & Carpe Koï (Bas Droite — Fondu doux d'encre vers l'intérieur) */
.hubScenicLayer--water {
  position: absolute;
  bottom: 0;
  right: 0;
  width: clamp(260px, 28vw, 440px);
  height: clamp(160px, 20vh, 260px);
  background-image: url("assets/decor/deco-koi-ripple.png");
  background-position: bottom right;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 92% 88% at 95% 95%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.10) 85%, transparent 100%);
  mask-image: radial-gradient(ellipse 92% 88% at 95% 95%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.10) 85%, transparent 100%);
}

/* --- VARIATION NUIT D'ENCRE (MODE SOMBRE) --- */
.page.dark .hubScenicLayer--cranes,
body.dark .hubScenicLayer--cranes {
  opacity: 0.38;
  mix-blend-mode: screen;
  filter: brightness(1.15) contrast(1.1);
}

.page.dark .hubScenicLayer--pine,
body.dark .hubScenicLayer--pine {
  opacity: 0.30;
  mix-blend-mode: screen;
  filter: brightness(1.12) contrast(1.1) sepia(0.2);
}

.page.dark .hubScenicLayer--pavilion,
body.dark .hubScenicLayer--pavilion {
  opacity: 0.28;
  mix-blend-mode: screen;
  filter: brightness(1.1) contrast(1.05);
}

.page.dark .hubScenicLayer--mountains,
body.dark .hubScenicLayer--mountains {
  opacity: 0.30;
  mix-blend-mode: screen;
  filter: brightness(0.9) contrast(1.15);
}

.page.dark .hubScenicLayer--water,
body.dark .hubScenicLayer--water {
  opacity: 0.38;
  mix-blend-mode: screen;
  filter: brightness(1.12) contrast(1.1);
}

/* --- OPTIMISATIONS MOBILES (< 768px) --- */
@media (max-width: 768px) {
  .hubScenicLayer--pine {
    width: 130px;
    opacity: 0.15;
  }
  .page.dark .hubScenicLayer--pine,
  body.dark .hubScenicLayer--pine {
    opacity: 0.20;
  }
  .hubScenicLayer--pavilion {
    display: none;
  }
  .hubScenicLayer--cranes {
    width: 180px;
    height: 120px;
    opacity: 0.18;
  }
  .page.dark .hubScenicLayer--cranes,
  body.dark .hubScenicLayer--cranes {
    opacity: 0.25;
  }
  .hubScenicLayer--mountains {
    height: 190px;
    opacity: 0.22;
  }
  .hubScenicLayer--water {
    width: 190px;
    height: 130px;
    opacity: 0.26;
  }
}