/* Jeu : bandeau XP / série / défi du jour avec Wito (au-dessus des cartes) et écran de fin du défi — js/features/game.js */

:root { --wito: #1f5f73; --gm-fire: #c2410c; --gm-fire-soft: #fff1e6; --gm-xp: #7b3fa8; --gm-xp-soft: #f3ecf9; --gm-ok: #2f7d45; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wito: #3a8aa3; --gm-fire: #fb923c; --gm-fire-soft: #3a2414; --gm-xp: #c79af0; --gm-xp-soft: #2d2347; --gm-ok: #7cc98f; }
}
:root[data-theme="dark"] { --wito: #3a8aa3; --gm-fire: #fb923c; --gm-fire-soft: #3a2414; --gm-xp: #c79af0; --gm-xp-soft: #2d2347; --gm-ok: #7cc98f; }

/* Wito */
.wito { flex-shrink: 0; overflow: visible; }
.wito .wb { fill: var(--wito); }
.wito .wm { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.wito .wo { fill: #151821; stroke: #fff; stroke-width: 3; }
.wito .wg { fill: #fff; stroke: #1c2430; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .wito-wow, .wito-crown { animation: wito-hop .5s ease-out; }
  .wito-sad { animation: wito-shake .4s ease-in-out; }
}
@keyframes wito-hop { 0% { transform: translateY(0) } 40% { transform: translateY(-8px) rotate(-4deg) } 100% { transform: translateY(0) } }
@keyframes wito-shake { 0%, 100% { transform: translateX(0) } 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }

/* la barre du jeu, en haut de la carte */
.gm-wrap { position: relative; }
.gm-strip { position: relative; display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.gm-me { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); cursor: pointer; }
.gm-me:hover, .gm-me[aria-expanded="true"] { border-color: var(--accent); }
.gm-goal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gm-goal-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 13px; }
.gm-goal-h b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-goal-h span { font-family: var(--f-mono); font-size: 12px; color: var(--muted); display: inline-flex; }
.gm-goal.done .gm-goal-h span { color: var(--gm-ok); }
.gm-chips { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.gm-chip { display: inline-flex; align-items: center; gap: 3px; height: 28px; border-radius: 99px; padding: 0 9px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; white-space: nowrap; }
.gm-fire { background: var(--gm-fire-soft); color: var(--gm-fire); }
.gm-fire.off { background: var(--bg); color: var(--muted); }
.gm-combo { background: var(--gm-xp); color: #fff; }
:root[data-theme="dark"] .gm-combo { color: #1c1530; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gm-combo { color: #1c1530; } }
.gm-ring { display: inline-flex; }
.gm-ring .rg-bg { fill: none; stroke: var(--line); stroke-width: 4; }
.gm-ring .rg-fg { fill: none; stroke: var(--gm-xp); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.gm-ring text { font-family: var(--f-body); font-size: 13px; font-weight: 700; fill: var(--ink); }

.gm-bar { display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.gm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .5s ease; }
.gm-goal.done .gm-bar i { background: var(--gm-ok); }
.gm-bar.xp { flex: 1; }
.gm-bar.xp i { background: var(--gm-xp); }

/* la bulle de Wito : par-dessus le haut de la carte, quelques secondes, sans rien pousser */
.gm-bubble { position: absolute; z-index: 5; left: 4px; top: calc(100% - 4px); max-width: min(420px, 92%); margin: 0; pointer-events: none;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 4px 14px 14px 14px; padding: 7px 11px;
  font-size: 13.5px; line-height: 1.4; font-weight: 500; box-shadow: var(--shadow); animation: gm-say 4.5s ease forwards; }
@keyframes gm-say { 0% { opacity: 0; transform: translateY(-4px) } 6%, 85% { opacity: 1; transform: none } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .gm-bubble { animation-name: gm-say-still; } @keyframes gm-say-still { 0%, 90% { opacity: 1 } 100% { opacity: 0 } } }

/* le détail, en touchant Wito */
.gm-more { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.gm-lvl { display: flex; align-items: center; gap: 10px; }
.gm-lvl b { white-space: nowrap; }
.gm-lvl small { color: var(--muted); font-family: var(--f-mono); white-space: nowrap; }
.gm-more-f, .gm-day-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; font-size: 13px; }
.gm-day-f.center { justify-content: center; }
.gm-quest { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 99px; padding: 4px 11px; min-height: 34px; cursor: pointer; }
.gm-quest:hover { border-color: var(--accent); }
.gm-quest.ok { color: var(--gm-ok); border-color: var(--gm-ok); }
.gm-week { display: inline-flex; gap: 4px; }
.gm-week i { width: 13px; height: 13px; border-radius: 4px; background: var(--line); display: inline-block; }
.gm-week i.on { background: var(--gm-xp); }
.gm-week i.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.gm-chest { display: inline-flex; align-items: center; gap: 5px; color: var(--gm-xp); font-weight: 600; }
.gm-chest.open { color: var(--gm-ok); }

/* « +10 XP » */
.gm-pop { position: absolute; z-index: 60; transform: translate(-50%, 0); pointer-events: none; font-weight: 700; font-size: 15px; color: var(--gm-xp); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; box-shadow: var(--shadow); animation: gm-pop 1.1s ease-out forwards; }
@keyframes gm-pop { 0% { opacity: 0; transform: translate(-50%, 0) } 15% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -46px) } }

/* écran de fin du défi */
.gm-done { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 6px 0; }
.gm-done h2 { font-family: var(--f-display); font-size: 28px; margin: 0; }
.gm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 420px; }
.gm-stat { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.gm-stat small { color: var(--muted); font-size: 12px; font-weight: 600; }
.gm-stat b { font-size: 21px; display: inline-flex; align-items: center; gap: 5px; }
.gm-stat.xp b { color: var(--gm-xp); }
.gm-stat.fire b { color: var(--gm-fire); }
.gm-done .ad-slot { width: 100%; }
.gm-done-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.gm-done-go .btn { min-height: 46px; }

.gm-say { margin: 0; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 14px; padding: 8px 12px; font-size: 15px; line-height: 1.4; font-weight: 500; text-align: center; max-width: 34ch; }
@media (max-width: 480px) {
  .gm-strip { gap: 8px; }
  .gm-goal-h b { font-size: 12.5px; }
}

/* « Phrases » : la barre du jeu en haut du générateur */
#gen-gm .gm-strip { padding-right: 28px; } /* le bouton « remarque » du panneau est dans le coin */
#gen-gm:empty { display: none; }

/* « Phrases » : le bouton Options à côté de « Nouvelle phrase », et le réglage qu'il ouvre */
.gen-row { flex-wrap: wrap; gap: 10px; align-items: center; }
.gen-opt-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; }
.gen-opt-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gen-opt-sum { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--accent); background: var(--accent-soft); border-radius: 99px; padding: 1px 8px; }
.gen-opt-btn[aria-expanded="true"] .gen-opt-sum { background: var(--surface); }
.gob-ico circle { transition: transform .35s ease; }
.gen-opt-btn:hover .k1, .gen-opt-btn[aria-expanded="true"] .k1 { transform: translateX(8px); }
.gen-opt-btn:hover .k2, .gen-opt-btn[aria-expanded="true"] .k2 { transform: translateX(-8px); }
.gen-opt-btn:hover .k3, .gen-opt-btn[aria-expanded="true"] .k3 { transform: translateX(5px); }
@media (prefers-reduced-motion: no-preference) {
  /* au repos, les curseurs bougent doucement de temps en temps, pour montrer qu'on peut régler */
  .gen-opt-btn[aria-expanded="false"]:not(:hover) .k1 { animation: gob-a 6s ease-in-out infinite; }
  .gen-opt-btn[aria-expanded="false"]:not(:hover) .k2 { animation: gob-b 6s ease-in-out infinite; }
  .gen-opt-btn[aria-expanded="false"]:not(:hover) .k3 { animation: gob-c 6s ease-in-out infinite; }
}
@keyframes gob-a { 0%, 70%, 100% { transform: none } 78% { transform: translateX(8px) } 90% { transform: translateX(2px) } }
@keyframes gob-b { 0%, 72%, 100% { transform: none } 80% { transform: translateX(-8px) } 92% { transform: translateX(-2px) } }
@keyframes gob-c { 0%, 74%, 100% { transform: none } 82% { transform: translateX(5px) } 94% { transform: translateX(1px) } }
.gen-opts { display: flex; flex-direction: column; gap: 14px; }
.gen-opts .gen-adv { border-left: 0; padding-left: 0; border-top: 1px dashed var(--line); padding-top: 14px; }

/* les phrases résolues : 3 lignes courtes, le reste derrière « Voir les autres » */
.ex-done li button { padding: 7px 12px; align-items: center; }
.ex-done .ex-d-s { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.ex-done .ex-d-m { flex-shrink: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ex-d-more { align-self: flex-start; font-size: 13px; }
@media (max-width: 480px) { .ex-done li button { flex-direction: row !important; gap: 10px !important; } }

/* ---------- la zone d'apprentissage, la même dans Vocabulaire, Verbes et Phrases ----------
   une surface : la barre du jeu, une ligne de réglages (.rv-tools), un panneau qui s'ouvre (.rv-panel), puis l'exercice */
.rv-surface { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
#gen.rv-surface { padding: 16px 20px 20px; gap: 14px; }
#gen.rv-surface > * { margin-top: 0; margin-bottom: 0; }
.rv-surface > .card { border: 0; box-shadow: none; border-radius: 0; background: transparent; padding: 2px 0 0; min-height: 300px; }
.rv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.rv-surface .rv-filters { margin: 0; }
.rv-tool-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.rv-tool-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.rv-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 14px; }
.rv-hint { margin: 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 480px) { .rv-surface, #gen.rv-surface { padding: 12px 14px 16px; border-radius: 14px; } }

/* Verbes : les catégories en une barre, les astuces derrière un bouton, la liste fermée et compacte */
#rv-verbs .vb-cats { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; }
#rv-verbs .vb-cats .chip { border: 0; border-radius: 8px; background: transparent; padding: 7px 12px; min-height: 36px; font-weight: 600; color: var(--muted); }
#rv-verbs .vb-cats .chip:hover { color: var(--ink); }
#rv-verbs .vb-cats .chip.active { background: var(--accent); color: var(--accent-ink); }
#rv-verbs .astuces.rv-panel { background: var(--bg); padding: 4px 14px; margin: 0; }
#rv-verbs .astuces.rv-panel .astuce:first-child { border-top: 0; }
#rv-verbs .rv-surface .note { margin: 0; font-size: .84rem; padding: 9px 12px; }
#rv-verbs .vb-listbox { margin-top: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0 16px; }
#rv-verbs .vb-listbox summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 0; font-weight: 600; font-size: .95rem; list-style: none; }
#rv-verbs .vb-listbox summary::-webkit-details-marker { display: none; }
#rv-verbs .vb-listbox summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
#rv-verbs .vb-listbox[open] summary::after { transform: rotate(-135deg); }
#rv-verbs .vb-list-n { font-family: var(--f-mono); font-size: 12px; font-weight: 500; color: var(--muted); background: var(--bg); border-radius: 99px; padding: 1px 8px; }
#rv-verbs .vb-listbox .hint { margin: 0 0 10px; }
#rv-verbs #vb-verbList { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 6px; padding-bottom: 16px; }
#rv-verbs #vb-verbList .row { padding: 6px 10px; gap: 0 8px; margin: 0; border-radius: 9px; }
#rv-verbs #vb-verbList .row .de { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rv-verbs #vb-verbList .row .pat { display: none; }
#rv-verbs #vb-verbList .row .tl { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rv-verbs #vb-verbList .row .count { font-size: 0; grid-row: 1 / span 2; grid-column: 2; }
#rv-verbs #vb-verbList .row .count b { font-size: .78rem; font-family: var(--f-mono); font-weight: 600; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; }
#rv-verbs #vb-verbList .row .count.zero b { background: var(--bad-soft, #fbe7e7); color: var(--bad, #c0392b); }
#rv-verbs #vb-verbList .row .count.some b { background: var(--ok-soft, #e3f6ea); color: var(--ok, #2f7d45); }

/* ---------- Vocabulaire · Verbes · Phrases : trois grandes cartes, le cœur de l'apprentissage ---------- */
.rv-sub.rv-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; align-self: stretch; }
.rv-sub.rv-modes button { display: flex; align-items: center; gap: 12px; text-align: left; min-height: 68px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.rv-sub.rv-modes button:hover { border-color: var(--accent); transform: translateY(-1px); }
.rv-sub.rv-modes button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.rv-sub.rv-modes button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); transform: none; }
.rs-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.rv-modes button[aria-selected="true"] .rs-ico { background: var(--accent); color: var(--accent-ink); }
.rs-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rs-t { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.rs-s { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .rv-sub.rv-modes button, .rv-sub.rv-modes button:hover { transition: none; transform: none; } }
@media (max-width: 600px) {
  .rv-sub.rv-modes { gap: 8px; }
  .rv-sub.rv-modes button { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 10px 6px; min-height: 0; }
  .rv-sub.rv-modes .rs-txt { align-items: center; }
  .rs-ico { width: 36px; height: 36px; border-radius: 10px; }
  .rs-t { font-size: 15px; }
  .rs-s { font-size: 11px; }
}

/* chaque onglet a sa couleur : la barre du défi, l'anneau du niveau, l'icône de la grande carte */
.rv-surface[data-mode="vocab"], .rv-modes [data-rsub="vocab"] { --gm-c: var(--accent); --gm-c-soft: var(--accent-soft); }
.rv-surface[data-mode="verbs"], .rv-modes [data-rsub="verbs"] { --gm-c: var(--dat); --gm-c-soft: color-mix(in srgb, var(--dat) 14%, var(--surface)); }
.rv-surface[data-mode="gen"], .rv-modes [data-rsub="gen"] { --gm-c: var(--akk); --gm-c-soft: color-mix(in srgb, var(--akk) 14%, var(--surface)); }
.rv-surface .gm-bar i { background: var(--gm-c); }
.rv-surface .gm-goal.done .gm-bar i { background: var(--gm-ok); }
.rv-surface .gm-ring .rg-fg { stroke: var(--gm-c); }
.rv-surface .gm-bar.xp i { background: var(--gm-c); }
.rv-surface .gm-me { border-color: color-mix(in srgb, var(--gm-c) 35%, var(--line)); }
.rv-surface { border-top: 3px solid var(--gm-c, var(--line)); }
.rv-modes .rs-ico { background: var(--gm-c-soft); color: var(--gm-c); }
.rv-modes button[aria-selected="true"] { border-color: var(--gm-c) !important; background: var(--gm-c-soft) !important; box-shadow: inset 0 0 0 1px var(--gm-c), var(--shadow) !important; }
.rv-modes button[aria-selected="true"] .rs-ico { background: var(--gm-c); color: var(--surface); }
.rv-modes button:hover { border-color: var(--gm-c); }
.gm-unit { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

/* l'introduction de la première visite : Wito parle */
.intro-wito { display: flex; align-items: flex-start; gap: 12px; }
.intro-wito-av { flex-shrink: 0; width: 72px; height: 72px; display: grid; place-items: center; }
.intro-say { position: relative; flex: 1; min-width: 0; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 4px 16px 16px 16px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.intro-say .intro-w { margin: 0; font-weight: 600; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.intro-say h2 { margin: 0; }
.intro-say .intro-txt { margin: 0; }
@media (max-width: 480px) { .intro-wito-av { width: 52px; height: 52px; } .intro-wito-av .wito { width: 52px; height: 52px; } }

/* Mon journal : sa couleur, et la barre au-dessus des pages */
.rv-surface[data-mode="jr"] { --gm-c: var(--accent); --gm-c-soft: var(--accent-soft); } /* la même couleur que la ligne des autres onglets */
.jr-gm { padding: 14px 18px; margin-bottom: 16px; }
.gm-rate { background: var(--bg); color: var(--muted); }
.gm-rate.down { background: color-mix(in srgb, var(--gm-ok) 14%, var(--surface)); color: var(--gm-ok); }
.gm-rate.up { background: color-mix(in srgb, var(--again) 12%, var(--surface)); color: var(--again); }

/* Traduire, Lexique, Grammaire : Wito et un conseil, avec le même Wito que la barre de Réviser (tuile de 44 px) */
.wito-tip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 16px; box-shadow: var(--shadow); padding: 12px 16px; }
.wito-tip:empty { display: none; }
.wt-me { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: var(--bg); cursor: pointer; }
.wt-me:hover { border-color: var(--accent); }
.wt-me:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wt-say { margin: 0; flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wito-tip { min-height: 72px; box-sizing: border-box; } /* toujours la même hauteur, quel que soit le conseil */
@media (prefers-reduced-motion: no-preference) { .wt-say.pop { animation: wt-pop .3s ease-out; } }
@keyframes wt-pop { from { opacity: 0; transform: translateX(-6px) } to { opacity: 1; transform: none } }
@media (max-width: 480px) { .wito-tip { padding: 10px 12px; border-radius: 14px; } }

/* cadrer la zone : un peu d'air au-dessus quand elle remonte en haut de l'écran */
.rv-surface, #view-translate, #view-review, #view-journal, #view-grammar, #view-list, #view-taxi, #vb-ex { scroll-margin-top: 12px; }

/* ---------- les icônes de Vocabulaire, Verbes, Phrases : dessinées comme Wito (formes pleines, ses yeux, sa bouche en W, ses gants),
   dans une tuile de la même taille que celle de Wito (44 px, le même bord) ---------- */
.rv-modes .rs-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--gm-c) 35%, var(--line)); background: var(--bg); box-shadow: none; display: grid; place-items: center; }
.rv-modes button[aria-selected="true"] .rs-ico { background: var(--surface); border-color: var(--gm-c); box-shadow: none; }
.mt { overflow: visible; }
.mt .mt-body { fill: var(--gm-c); }
.mt .mt-back { fill: color-mix(in srgb, var(--gm-c) 38%, var(--surface)); }
.mt .mt-m { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mt .mt-g { fill: #fff; stroke: #1c2430; stroke-width: 2; }
@media (prefers-reduced-motion: no-preference) {
  .rv-modes button:hover .mt { animation: wito-hop .5s ease-out; }
  .rv-modes button[aria-selected="true"] .mt { animation: wito-hop .5s ease-out; }
}
@media (max-width: 600px) { .rv-modes .rs-ico { width: 44px; height: 44px; border-radius: 14px; } }

/* ---------- la ligne Traduire · Réviser · Journal… : icônes, pastille qui glisse, rebond, badge ---------- */
nav[role="tablist"] { position: relative; isolation: isolate; }
nav[role="tablist"] button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; z-index: 1; transition: color .25s; }
nav[role="tablist"] button[aria-selected="true"] { background: transparent; }
nav .nav-ink { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 7px; background: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .35s cubic-bezier(.34, 1.4, .64, 1), width .35s, height .35s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { nav .nav-ink { transition: none; } }
.nav-ico { flex-shrink: 0; transition: transform .2s; }
@media (prefers-reduced-motion: no-preference) {
  nav[role="tablist"] button:hover .nav-ico { animation: nav-bob .45s ease-in-out; }
  nav[role="tablist"] button[aria-selected="true"] .nav-ico { animation: nav-pop .4s ease-out; }
}
@keyframes nav-bob { 0%, 100% { transform: none } 40% { transform: translateY(-3px) rotate(-8deg) } 70% { transform: translateY(0) rotate(5deg) } }
@keyframes nav-pop { 0% { transform: scale(.6) } 60% { transform: scale(1.2) } 100% { transform: none } }
.nav-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 700; font-family: var(--f-mono); display: inline-grid; place-items: center; line-height: 1; box-shadow: 0 0 0 2px var(--surface); }
nav .tab-roamcab { gap: 0 !important; }
nav .tab-roamcab .nav-ico.taxi { color: #1C2430; margin-right: 6px; }
nav .tab-roamcab[aria-selected="true"] .nav-ico.taxi { color: #fff; }
@media (max-width: 480px) { nav[role="tablist"] button { gap: 5px; } .nav-ico { width: 16px; height: 16px; } }

/* Wito, les cartes et les onglets : les mêmes arrondis */
.gm-me, .wt-me { border-radius: 14px; }

/* Vocabulaire : les deux listes sur une seule ligne, même sur téléphone (le texte se coupe) */
.rv-surface .rv-filters { flex-wrap: nowrap; gap: 8px; }
.rv-surface .rv-filters select { flex: 1 1 0; min-width: 0; max-width: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
@media (max-width: 480px) { .rv-surface .rv-filters select { font-size: 13px; padding: 7px 8px; } }

/* Verbes : l'ampoule des astuces, sous les 4 verbes */
#rv-verbs .vb-tips-row { display: flex; justify-content: center; margin: 4px 0 0; }
#rv-verbs .vb-tips-row:has(> [hidden]) { display: none; }
.vb-bulb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.vb-bulb:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(250, 204, 21, .35); }
.vb-bulb .bulb-glass { fill: color-mix(in srgb, #FACC15 25%, transparent); transition: fill .2s; }
.vb-bulb[aria-expanded="true"] { border-color: #E0B000; box-shadow: 0 0 0 4px rgba(250, 204, 21, .3), 0 0 18px rgba(250, 204, 21, .55); }
.vb-bulb[aria-expanded="true"] .bulb-glass { fill: #FACC15; }
.vb-bulb:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#rv-verbs .rv-surface > .vb-ex + .ad-slot { margin-top: 0; }
#rv-verbs #vb-astuces { margin-top: 10px; }

/* téléphone : les icônes des onglets alignées en colonnes */
@media (max-width: 560px) {
  header nav[role="tablist"] button { justify-content: flex-start; padding-left: 14px; padding-right: 4px; }
  header nav[role="tablist"] .tab-roamcab { justify-content: flex-start; }
}

/* Traduire : le bilan du mois à droite du conseil */
.wt-chips { display: flex; gap: 6px; flex-shrink: 0; }
.wt-chip { background: var(--bg); color: var(--ink); }
.wt-chip.good { background: color-mix(in srgb, var(--gm-ok) 14%, var(--surface)); color: var(--gm-ok); }
.wt-chip.low { background: color-mix(in srgb, var(--again) 12%, var(--surface)); color: var(--again); }
@media (max-width: 480px) { .wt-chips { gap: 4px; } .wt-chip { padding: 0 7px; font-size: 12px; height: 26px; } }

/* Grammaire : remonter / descendre vite */
.jump { position: fixed; z-index: 40; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.jump-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--accent); box-shadow: var(--shadow), 0 4px 14px rgba(27, 36, 48, .12); cursor: pointer; transition: transform .15s; }
.jump-btn:hover { transform: translateY(-2px); border-color: var(--accent); }
.jump-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.jump-btn[hidden] { display: none; }

/* le petit Wito des flashcards (en haut à gauche, il réagit à la réponse) */
.card-wito { display: inline-flex; width: 24px; height: 24px; }
.card-wito .wito { width: 24px; height: 24px; }