/* F4IOZ — the trio of mascots (mascottes.js): their colours, a guide and its bubble, a scene of lines. Self-contained:
   the host's colours when it has them (--panel-2, --text, --border-strong…), its own otherwise, light and dark. Only
   .ma-… classes, and Gamma's .g-… (the VNA game's drawing). With « reduced motion », nothing moves. */

.ma-guide, .ma-scene, .ma-svg {
  --ma-gamma: #4FC3FF; --ma-gamma-bord: #2A7FAF; --ma-visage: #0B1730; --ma-or: #FFC94D; --ma-rose: #FF6FAE;
  --ma-kepler: #F2B544; --ma-kepler-bord: #B07A1A; --ma-panneau: #2D4FA8; --ma-panneau-ligne: #8FB0FF;
  --ma-doppler: #FF7A59; --ma-doppler-bord: #C24E33; --ma-casque: #2B2F45; --ma-bleu: #4F8BFF; --ma-rouge: #FF5A5A;
  --ma-fond: var(--panel-2, #F3F6FB); --ma-texte: var(--text, #14202E); --ma-dim: var(--text-dim, #5A6B80); --ma-bord: var(--border-strong, #C5D0DE);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ma-guide, :root:not([data-theme="light"]) .ma-scene { --ma-fond: var(--panel-2, #1A2333); --ma-texte: var(--text, #E8EEF6); --ma-dim: var(--text-dim, #9AA8BA); --ma-bord: var(--border-strong, #34425A); }
}
:root[data-theme="dark"] .ma-guide, :root[data-theme="dark"] .ma-scene { --ma-fond: var(--panel-2, #1A2333); --ma-texte: var(--text, #E8EEF6); --ma-dim: var(--text-dim, #9AA8BA); --ma-bord: var(--border-strong, #34425A); }
:root[data-theme="light"] .ma-guide, :root[data-theme="light"] .ma-scene, :root[data-theme="light"] .ma-svg { --ma-bleu: #1F5FD6; --ma-rouge: #C92A2A; }

/* ------------------------------------------------------------ the drawings */
.ma-svg { width: 64px; height: 64px; overflow: visible; display: block; }
.ma-oeil { fill: #fff; } .ma-reflet, .ma-pupille { fill: var(--ma-visage); }
.ma-trait { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.ma-bouche { fill: none; stroke: var(--ma-or); stroke-width: 2.4; stroke-linecap: round; }
.ma-bouche-pleine { fill: #2A0F1E; stroke: var(--ma-or); stroke-width: 1.6; stroke-linejoin: round; }
.ma-signe { font: 900 13px system-ui, sans-serif; fill: var(--ma-or); }
.ma-z text { font: 800 8px system-ui, sans-serif; fill: var(--ma-dim, #9AA8BA); }
.ma-eclats path { stroke: var(--ma-or); stroke-width: 1.8; stroke-linecap: round; fill: none; }
/* Gamma (as in « Apprivoise ton VNA »). */
.ma-gamma .g-corps { fill: var(--ma-gamma); stroke: var(--ma-gamma-bord); stroke-width: 1.5; }
.ma-gamma .g-visage { fill: var(--ma-visage); }
.ma-gamma .g-joue { fill: var(--ma-rose); opacity: .7; }
.ma-gamma .g-ant { stroke: var(--ma-gamma-bord); stroke-width: 2.5; stroke-linecap: round; }
.ma-gamma .g-boule { fill: var(--ma-rose); }
.ma-gamma .g-lettre { font: 900 12px system-ui, sans-serif; fill: var(--ma-visage); }
.ma-gamma .g-bras { fill: none; stroke: var(--ma-gamma); stroke-width: 3; stroke-linecap: round; }
.ma-gamma[data-humeur="oups"] .g-visage { fill: #3A0F22; }
/* Kepler. */
.ma-kepler .k-corps { fill: var(--ma-kepler); stroke: var(--ma-kepler-bord); stroke-width: 1.5; }
.ma-kepler .k-feuille { fill: none; stroke: #FFE3A3; stroke-width: 1.4; opacity: .8; }
.ma-kepler .k-visage { fill: var(--ma-visage); }
.ma-kepler .k-panneau { fill: var(--ma-panneau); stroke: #1B3277; stroke-width: 1; }
.ma-kepler .k-grille { stroke: var(--ma-panneau-ligne); stroke-width: .7; opacity: .7; }
.ma-kepler .k-mat, .ma-kepler .k-antenne, .ma-kepler .k-moignon, .ma-kepler .k-pied { fill: none; stroke: #8C99AD; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ma-kepler .k-bout { fill: var(--ma-rose); }
.ma-kepler .k-lunettes circle, .ma-kepler .k-lunettes path { fill: none; stroke: #E8EEF6; stroke-width: 1.3; }
.ma-kepler .k-lettre { font: 800 6.5px system-ui, sans-serif; fill: var(--ma-visage); }
.ma-kepler .ma-bouche { stroke-width: 1.9; }
/* Doppler. */
.ma-doppler .d-corps { fill: var(--ma-doppler); stroke: var(--ma-doppler-bord); stroke-width: 1.5; }
.ma-doppler .d-casque, .ma-doppler .d-micro { fill: none; stroke: var(--ma-casque); stroke-width: 2.6; stroke-linecap: round; }
.ma-doppler .d-ecouteur, .ma-doppler .d-micro-b { fill: var(--ma-casque); }
.ma-doppler .d-meche { fill: none; stroke: var(--ma-doppler-bord); stroke-width: 2.4; stroke-linecap: round; }
.ma-doppler .d-joue { fill: var(--ma-rose); opacity: .75; }
.ma-doppler .d-avant { fill: none; stroke: var(--ma-bleu); stroke-width: 1.8; stroke-linecap: round; }
.ma-doppler .d-arriere { fill: none; stroke: var(--ma-rouge); stroke-width: 1.8; stroke-linecap: round; opacity: .85; }
.ma-doppler .ma-oeil { fill: #fff; stroke: var(--ma-doppler-bord); stroke-width: .6; }
.ma-doppler .ma-trait { stroke: var(--ma-visage); }
.ma-doppler .ma-bouche { stroke: var(--ma-visage); stroke-width: 2; }
.ma-doppler .ma-bouche-pleine { fill: #5A1414; stroke: var(--ma-visage); }

/* The moves: floating, a jump of joy, a laugh's shake, sleep's breath, the waves running out. */
.ma-svg { animation: ma-flotte 3.4s ease-in-out infinite; transform-origin: 50% 90%; }
.ma-svg[data-humeur="content"] { animation: ma-saute .6s ease-out 2, ma-flotte 3.4s ease-in-out 1.2s infinite; }
.ma-svg[data-humeur="rit"] { animation: ma-rit .25s ease-in-out 6, ma-flotte 3.4s ease-in-out 1.5s infinite; }
.ma-svg[data-humeur="surpris"] { animation: ma-sursaut .45s ease-out; }
.ma-svg[data-humeur="dort"] { animation: ma-souffle 3.8s ease-in-out infinite; }
.ma-svg[data-humeur="oups"] { animation: ma-penche .5s ease-out; }
.ma-svg[data-humeur="reflechit"] { animation: ma-penseur 2.6s ease-in-out infinite; }
.ma-z text { animation: ma-z 2.4s ease-in-out infinite; } .ma-z text:nth-child(2) { animation-delay: .5s; } .ma-z text:nth-child(3) { animation-delay: 1s; }
.ma-gamma .g-boule { animation: ma-clignote 1.6s ease-in-out infinite; }
.ma-doppler .d-avant { animation: ma-onde .9s ease-in-out infinite; } .ma-doppler .d-arriere { animation: ma-onde 1.8s ease-in-out infinite; }
.ma-kepler .k-panneau { animation: ma-soleil 4s ease-in-out infinite; }
@keyframes ma-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ma-saute { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px) scale(1.04); } }
@keyframes ma-rit { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg) translateY(-1px); } }
@keyframes ma-sursaut { 0% { transform: scale(1); } 35% { transform: translateY(-7px) scale(1.08, .95); } 100% { transform: none; } }
@keyframes ma-souffle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes ma-penche { 30% { transform: rotate(-9deg); } 70% { transform: rotate(5deg); } }
@keyframes ma-penseur { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg); } }
@keyframes ma-z { 0% { opacity: 0; transform: translateY(3px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes ma-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ma-onde { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes ma-soleil { 0%, 100% { filter: none; } 50% { filter: brightness(1.25); } }

/* ------------------------------------------------------------ a guide and its bubble */
.ma-guide { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ma-texte); }
.ma-bulle { position: relative; padding: 9px 13px 10px; border-radius: 14px; background: var(--ma-fond); border: 1px solid var(--ma-bord); font-size: 14px; line-height: 1.45; }
.ma-bulle::before { content: ''; position: absolute; left: -8px; top: 22px; width: 14px; height: 14px; background: var(--ma-fond); border-left: 1px solid var(--ma-bord); border-bottom: 1px solid var(--ma-bord); transform: rotate(45deg); }
.ma-nom { display: block; font: 800 11px/1.3 system-ui, sans-serif; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 2px; }
.ma-guide[data-qui="gamma"] .ma-nom, .ma-replique[data-qui="gamma"] .ma-nom, .ma-acteur[data-qui="gamma"] figcaption { color: var(--ma-gamma-bord); }
.ma-guide[data-qui="kepler"] .ma-nom, .ma-replique[data-qui="kepler"] .ma-nom, .ma-acteur[data-qui="kepler"] figcaption { color: var(--ma-kepler-bord); }
.ma-guide[data-qui="doppler"] .ma-nom, .ma-replique[data-qui="doppler"] .ma-nom, .ma-acteur[data-qui="doppler"] figcaption { color: var(--ma-doppler-bord); }
.ma-guide.parle .ma-bulle { animation: ma-bulle .35s ease-out; }
.ma-guide.ma-eteint { grid-template-columns: minmax(0, 1fr); }
.ma-guide.ma-eteint .ma-guide-perso, .ma-guide.ma-eteint .ma-bulle::before, .ma-guide.ma-eteint .ma-nom { display: none; }
@keyframes ma-bulle { from { transform: translateY(6px) scale(.97); opacity: .3; } }

/* ------------------------------------------------------------ a scene */
.ma-scene { display: flex; flex-direction: column; gap: 8px; color: var(--ma-texte); }
.ma-plateau { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 4vw, 34px); padding: 4px 0 0; }
.ma-acteur { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .25s ease, opacity .25s ease, filter .25s ease; opacity: .72; filter: saturate(.75); }
.ma-acteur figcaption { font: 800 11px system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.ma-acteur.parle { opacity: 1; filter: none; transform: translateY(-4px) scale(1.1); }
.ma-acteur .ma-svg { width: 58px; height: 58px; }
.ma-scene.compacte .ma-acteur .ma-svg { width: 46px; height: 46px; }
.ma-fil { list-style: none; margin: 0; padding: 2px 2px 4px; display: flex; flex-direction: column; gap: 6px; max-height: 210px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ma-replique { padding: 7px 12px 8px; border-radius: 13px; background: var(--ma-fond); border: 1px solid var(--ma-bord); border-left: 4px solid var(--ma-c, var(--ma-bord)); font-size: 14px; line-height: 1.45;
  max-width: 92%; animation: ma-bulle .3s ease-out; }
.ma-replique[data-qui="gamma"] { --ma-c: var(--ma-gamma); }
.ma-replique[data-qui="kepler"] { --ma-c: var(--ma-kepler); align-self: center; }
.ma-replique[data-qui="doppler"] { --ma-c: var(--ma-doppler); align-self: flex-end; border-left-width: 1px; border-right: 4px solid var(--ma-c); }
.ma-replique .ma-nom { display: inline; margin-right: 6px; }
.ma-boutons { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.ma-compte { margin-right: auto; font-size: 12px; color: var(--ma-dim); font-variant-numeric: tabular-nums; }
.ma-boutons button { font: 600 14px system-ui, sans-serif; padding: 7px 14px; min-height: 38px; border-radius: 999px; cursor: pointer; border: 1px solid var(--ma-bord); background: transparent; color: var(--ma-texte); }
.ma-boutons .ma-suivant { background: var(--accent, #2F7DF6); border-color: transparent; color: #fff; }
.ma-boutons .ma-suivant.ma-fin { background: var(--green, #1F9D57); }
.ma-boutons button:focus-visible { outline: 3px solid var(--ma-or); outline-offset: 2px; }
.ma-boutons button[hidden] { display: none; }
.ma-scene.ma-eteint .ma-replique { max-width: none; align-self: stretch; border: none; border-left: 3px solid var(--ma-bord); background: transparent; border-radius: 0; padding: 2px 10px; }
.ma-scene.ma-eteint .ma-fil { max-height: none; }
.ma-scene.ma-eteint .ma-replique .ma-nom { display: none; }

/* Doppler's sliding words: squeezed and bluer as it comes, stretched and redder as it goes. */
.ma-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ma-glisse .ma-mot { white-space: nowrap; }
.ma-glisse .ma-l { display: inline-block; animation: ma-monte .9s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i) * 12ms); }
.ma-glisse.descend .ma-l { animation-name: ma-descend; }
@keyframes ma-monte { 0% { transform: translateY(.55em) scaleX(.7); color: var(--ma-bleu); letter-spacing: -.12em; } 60% { color: var(--ma-bleu); } 100% { transform: none; } }
@keyframes ma-descend { 0% { transform: translateY(-.35em); } 40% { color: var(--ma-texte); } 75% { transform: translateY(.35em) scaleX(1.25); color: var(--ma-rouge); letter-spacing: .14em; } 100% { transform: none; } }

@media (max-width: 600px) {
  .ma-guide { grid-template-columns: 48px minmax(0, 1fr); } .ma-guide .ma-svg { width: 48px; height: 48px; }
  .ma-acteur .ma-svg { width: 46px; height: 46px; }
  .ma-fil { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .ma-svg, .ma-svg[data-humeur], .ma-z text, .ma-gamma .g-boule, .ma-doppler .d-avant, .ma-doppler .d-arriere, .ma-kepler .k-panneau,
  .ma-guide.parle .ma-bulle, .ma-replique, .ma-glisse .ma-l { animation: none; }
  .ma-acteur { transition: none; }
}