/* Le petit hibou des lettres — La Forêt des Métamorphoses */
@font-face { font-family: HibouCursive; src: url(../vendor/playwrite-fr-trad-latin-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: HibouPrint; src: url(../vendor/andika-latin-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: HibouPrint; src: url(../vendor/andika-latin-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: HibouDys; src: url(../vendor/opendyslexic-latin-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --ink: #2b2a3a; --cream: #fff8e6; --paper: #fffdf4; --leaf: #2f7d4f; --leaf2: #4caf7d; --wood: #8a5a34;
  --sun: #f5b83a; --berry: #e0568a; --sky: #3b78c4;
  --vowel-bg: #ffe6dc; --vowel-bd: #f0a58a; --vowel-ink: #c8452d;
  --cons-bg: #e0eeff; --cons-bd: #8fb6ec; --cons-ink: #2f68b5;
  --tile: clamp(78px, 17vmin, 140px);
  --shadow: 0 6px 0 rgba(60, 40, 20, .18), 0 10px 22px rgba(40, 30, 20, .18);
  font-size: clamp(14px, calc(9px + 1.1vmin), 22px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #cfeedd; color: var(--ink); font-family: HibouPrint, 'Andika', system-ui, sans-serif; touch-action: manipulation; -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
body.dys { font-family: HibouDys, HibouPrint, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, input:focus-visible, select:focus-visible, label:focus-within { outline: 4px solid #1b6fe0; outline-offset: 3px; }
input, select { font: inherit; -webkit-user-select: text; user-select: text; }
h1, h2, p { margin: 0; }

#scene { position: fixed; inset: 0; z-index: 0; }
#scene svg { width: 100%; height: 100%; display: block; }
#app { position: fixed; inset: 0; z-index: 1; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow-y: auto; overflow-x: hidden; }
#overlay { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#overlay > * { pointer-events: auto; }

/* ---------- lettres ---------- */
.g { display: inline-block; line-height: 1; height: 1em; transform: translateY(var(--dy, 0)); white-space: nowrap; font-weight: 400; }
.g-cap { font-family: HibouPrint; font-weight: 700; --k: .56; }
.g-scr { font-family: HibouPrint; --k: .64; }
.g-cm { font-family: HibouCursive; --k: .6; }
.g-cM { font-family: HibouCursive; --k: .46; }
body.dys .g-cap, body.dys .g-scr { font-family: HibouDys; font-weight: 400; }
.tile .g { font-size: calc(var(--tile) * var(--k, .6)); }

.tile { width: var(--tile); height: var(--tile); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none;
  background: radial-gradient(circle at 35% 28%, #fff, var(--paper) 62%, #f1e9d2); border: 5px solid #d8cdb0; box-shadow: var(--shadow); color: var(--ink); transition: transform .18s, box-shadow .18s, opacity .2s; }
.tile.vowel { background: radial-gradient(circle at 35% 28%, #fff, var(--vowel-bg) 62%, #ffd0bf); border-color: var(--vowel-bd); color: #5a2418; }
.tile.cons { background: radial-gradient(circle at 35% 28%, #fff, var(--cons-bg) 62%, #cde0fb); border-color: var(--cons-bd); color: #1d3b66; }
.tile.pressed { transform: scale(1.06); }
.tile.dragging { z-index: 60; box-shadow: 0 16px 30px rgba(30, 20, 10, .35); transition: none; cursor: grabbing; }
.tile.tried { opacity: .55; }
.tile.hint { animation: hint 1s ease-in-out infinite; }
.tile.done { opacity: .6; filter: saturate(.7); }
.tile.sel { transform: scale(1.1); box-shadow: 0 0 0 6px #ffd45c, var(--shadow); }
.tile.aim { transform: scale(1.12); box-shadow: 0 0 0 6px #7bd49a, var(--shadow); }
.wobble { animation: wobble .5s ease; }
.glow-ok { animation: glowok .9s ease; }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 20% { rotate: -9deg; } 45% { rotate: 8deg; } 70% { rotate: -4deg; } }
@keyframes hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 92, .0), var(--shadow); } 50% { box-shadow: 0 0 0 14px rgba(255, 212, 92, .7), var(--shadow); } }
@keyframes glowok { 0% { box-shadow: 0 0 0 0 rgba(95, 215, 140, .9), var(--shadow); } 100% { box-shadow: 0 0 0 26px rgba(95, 215, 140, 0), var(--shadow); } }

/* ---------- boutons, entêtes ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7em 1.3em; border-radius: 999px; background: var(--cream); color: var(--ink); font-weight: 700; font-size: 1.05rem; box-shadow: 0 4px 0 rgba(90, 60, 30, .25), 0 8px 18px rgba(40, 30, 20, .15); border: 3px solid #e7d8b0; transition: transform .12s; min-height: 3rem; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(90, 60, 30, .25); }
.btn.big { background: linear-gradient(#5ccf8b, #2f9d5f); border-color: #1f7a48; color: #fff; font-size: 1.3rem; padding: .8em 1.8em; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.btn.soft { background: #fffbe8; }
.btn.ghost { background: rgba(255, 255, 255, .55); border-color: transparent; box-shadow: none; }
.btn.small { font-size: .9rem; padding: .45em 1em; min-height: 2.4rem; }
.btn.danger { background: #ffe3e3; border-color: #f0a0a0; color: #8c2323; }
.icon-btn { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--cream); border: 3px solid #e7d8b0; font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(90, 60, 30, .22); flex: none; }
.icon-btn:active { transform: translateY(2px); }
.icon-spacer { width: 3.2rem; flex: none; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; background: var(--cream); border: 3px solid #e7d8b0; font-weight: 700; box-shadow: 0 4px 0 rgba(90, 60, 30, .2); }
.avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; border: 3px solid #fff; flex: none; }
.avatar.big { width: 4.2rem; height: 4.2rem; font-size: 2.4rem; }
.avatar.sel { box-shadow: 0 0 0 5px #1b6fe0; }

.screen { min-height: 100%; padding: 1rem clamp(1rem, 4vw, 3rem) 2rem; display: flex; flex-direction: column; gap: 1rem; max-width: 1100px; margin: 0 auto; }
.top { display: flex; align-items: center; gap: .8rem; }
.top-title { flex: 1; text-align: center; font-size: clamp(1.1rem, 3.2vmin, 1.8rem); background: rgba(255, 251, 232, .92); border-radius: 999px; padding: .35em 1em; border: 3px solid #e7d8b0; }
.lead { text-align: center; font-size: 1.25rem; font-weight: 700; background: rgba(255, 251, 232, .85); border-radius: 999px; padding: .4em 1.2em; align-self: center; }
.lead.left { text-align: left; align-self: stretch; border-radius: 1rem; }
.teacher-note { align-self: center; font-size: .95rem; background: #fff3c4; border: 2px dashed #e0b84a; border-radius: .8rem; padding: .35em .9em; }

/* ---------- Plumix ---------- */
.plumix { position: relative; width: min(30vmin, 220px); aspect-ratio: 200 / 224; flex: none; }
.plumix-hero { width: min(36vmin, 280px); }
.plumix-hero.small { width: min(26vmin, 200px); }
.plumix-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.plumix-corner { position: absolute; left: .6rem; bottom: .4rem; width: clamp(84px, 17vmin, 150px); z-index: 5; pointer-events: none; }
.plumix-corner .bubble { pointer-events: none; }
.px-wing-l { transform-origin: 52px 100px; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.px-wing-r { transform-origin: 148px 100px; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); }
.px-head { transform-origin: 100px 130px; transition: transform .35s; }
.px-bob { animation: pxbob 3.4s ease-in-out infinite; transform-origin: 100px 210px; }
.px-lids { transform-origin: 100px 52px; transform: scaleY(0); animation: pxblink 5s infinite; }
.px-pupils { transform: translate(var(--lx, 0), var(--ly, 0)); transition: transform .3s; }
.px-eyes-happy { display: none; }
.px-fx text { opacity: 0; transform-box: fill-box; transform-origin: center; }
.px-quill { transform-origin: 170px 150px; }
@keyframes pxbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) scale(1.01); } }
@keyframes pxblink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(2); } }
@keyframes pxhop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-16px) scale(.98, 1.03); } 75% { transform: translateY(0) scale(1.04, .96); } }
@keyframes pxdance { 0%, 100% { transform: rotate(-6deg) translateY(0); } 25% { transform: rotate(0) translateY(-14px); } 50% { transform: rotate(6deg) translateY(0); } 75% { transform: rotate(0) translateY(-14px); } }
@keyframes pxwingl { 0%, 100% { transform: rotate(52deg); } 50% { transform: rotate(14deg); } }
@keyframes pxwingr { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-52deg); } }
@keyframes pxfloat { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1) rotate(12deg); } }
@keyframes pxtwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2) rotate(20deg); } }

.plumix[data-pose='happy'] .px-eyes-open { display: none; }
.plumix[data-pose='happy'] .px-eyes-happy { display: inline; }
.plumix[data-pose='happy'] .px-wing-l { transform: rotate(46deg); }
.plumix[data-pose='happy'] .px-wing-r { transform: rotate(-46deg); }
.plumix[data-pose='happy'] .px-bob { animation: pxhop .7s ease-in-out infinite; }
.plumix[data-pose='happy'] .px-star { animation: pxtwinkle 1.2s infinite; }
.plumix[data-pose='happy'] .px-star.s2 { animation-delay: .5s; }

.plumix[data-pose='encourage'] .px-head { transform: rotate(-7deg); }
.plumix[data-pose='encourage'] .px-wing-r { transform: rotate(-30deg); }
.plumix[data-pose='encourage'] .px-lids { animation: none; transform: scaleY(.5); }

.plumix[data-pose='think'] .px-pupils { transform: translate(-7px, -6px); }
.plumix[data-pose='think'] .px-wing-r { transform: rotate(62deg); }
.plumix[data-pose='think'] .px-q { animation: pxfloat 2s infinite; }
.plumix[data-pose='think'] .px-glasses { opacity: 1; }

.plumix[data-pose='dance'] .px-eyes-open { display: none; }
.plumix[data-pose='dance'] .px-eyes-happy { display: inline; }
.plumix[data-pose='dance'] .px-bob { animation: pxdance .9s ease-in-out infinite; }
.plumix[data-pose='dance'] .px-wing-l { animation: pxwingl .45s ease-in-out infinite; }
.plumix[data-pose='dance'] .px-wing-r { animation: pxwingr .45s ease-in-out infinite; }
.plumix[data-pose='dance'] .px-note { animation: pxfloat 1.6s infinite; }
.plumix[data-pose='dance'] .px-note.n2 { animation-delay: .7s; }
.plumix[data-pose='dance'] .px-star { animation: pxtwinkle 1s infinite; }

.bubble { position: absolute; left: 62%; bottom: 82%; min-width: 11rem; max-width: min(26rem, 70vw); background: #fff; border: 4px solid #e7d8b0; border-radius: 1.3rem; padding: .7rem 1rem; font-weight: 700; font-size: 1.05rem; line-height: 1.3; box-shadow: 0 6px 16px rgba(40, 30, 20, .2); z-index: 8; color: var(--ink); }
.bubble::after { content: ''; position: absolute; left: 16%; bottom: -16px; width: 22px; height: 22px; background: #fff; border-right: 4px solid #e7d8b0; border-bottom: 4px solid #e7d8b0; transform: rotate(45deg) skew(8deg, 8deg); border-radius: 0 0 6px 0; }
.bubble.pop { animation: bubblepop .35s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 14% 100%; }
.plumix-corner .bubble { left: 70%; bottom: 76%; font-size: .98rem; }
@keyframes bubblepop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- accueil ---------- */
.home { min-height: 100%; display: flex; flex-direction: column; padding: .8rem clamp(.8rem, 3vw, 2rem) 1rem; gap: .6rem; }
.home-bar { display: flex; justify-content: space-between; align-items: center; }
.home-bar-r { display: flex; gap: .6rem; }
.home-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: center; }
.hero { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.hero .plumix { margin-top: 2.5rem; }
.hero-title, .splash { text-align: center; }
.title-small { font-family: HibouCursive, cursive; line-height: 1.5; font-size: clamp(1.3rem, 3.8vmin, 2.2rem); color: #fff; text-shadow: 0 3px 0 #2f7d4f, 0 6px 14px rgba(0, 0, 0, .25); }
.title-big { font-family: HibouCursive, cursive; font-size: clamp(2rem, 7vmin, 4.2rem); line-height: 1.45; color: #ffe27a; text-shadow: 0 4px 0 #b9741a, 0 8px 18px rgba(0, 0, 0, .25); }
.title-sub { font-weight: 700; color: #fff; background: rgba(47, 125, 79, .85); display: inline-block; padding: .25em 1em; border-radius: 999px; margin-top: .4rem; font-size: clamp(.9rem, 2.2vmin, 1.2rem); }
.cards { display: grid; gap: .9rem; }
.mode-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1rem; align-items: center; text-align: left; padding: .9rem 1.2rem; border-radius: 1.6rem; color: #fff; border: 4px solid rgba(255, 255, 255, .85); box-shadow: 0 7px 0 rgba(40, 30, 20, .25), 0 14px 26px rgba(40, 30, 20, .22); transition: transform .15s; }
.mode-card:active { transform: translateY(4px); }
.mode-card:hover { transform: translateY(-2px); }
.mode-card .mode-icon { grid-row: 1 / 3; font-size: clamp(2.6rem, 8vmin, 4.2rem); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .2)); }
.mode-card .mode-name { font-weight: 700; font-size: clamp(1.15rem, 3vmin, 1.7rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .2); }
.mode-card .mode-sub { font-size: clamp(.85rem, 2vmin, 1.1rem); opacity: .95; }
.m-dress { background: linear-gradient(135deg, #f59e42, #e0568a); }
.m-bridges { background: linear-gradient(135deg, #4caf7d, #2f8f6a); }
.m-mirror { background: linear-gradient(135deg, #6c8cf0, #8a63d2); }
.home-foot { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.week-banner { align-self: center; background: #fff3c4; border: 3px dashed #e0b84a; border-radius: 1rem; padding: .4em 1em; font-size: 1.05rem; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .home-main { grid-template-columns: 1fr; }
  .hero { flex-direction: row; justify-content: center; gap: 1rem; }
  .hero .plumix { margin-top: 3rem; width: min(30vw, 150px); }
}

/* ---------- sentiers ---------- */
.level-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .9rem; }
.level-card { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; text-align: left; background: rgba(255, 253, 244, .96); border: 4px solid #e7d8b0; border-radius: 1.5rem; box-shadow: var(--shadow); position: relative; }
.level-card.reco { border-color: #4caf7d; box-shadow: 0 0 0 5px rgba(76, 175, 125, .35), var(--shadow); }
.level-card.locked { opacity: .65; filter: grayscale(.4); cursor: default; }
.level-card.done { border-color: var(--sun); }
.lv-num { width: 3rem; height: 3rem; border-radius: 50%; background: var(--leaf2); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; flex: none; }
.lv-body { display: flex; flex-direction: column; gap: .2rem; flex: 1; min-width: 0; }
.lv-name { font-weight: 700; font-size: 1.15rem; }
.lv-letters { font-size: .95rem; color: #5a5a6a; letter-spacing: .12em; text-transform: uppercase; }
.lv-bar { height: .7rem; border-radius: 999px; background: #e8e1c8; overflow: hidden; margin-top: .2rem; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7bd49a, #2f9d5f); border-radius: 999px; transition: width .6s; }
.lv-example { display: flex; align-items: center; gap: .3rem; font-size: 2.4rem; height: 3.8rem; flex: none; color: var(--ink); }
.lv-example .arrow { font-size: 1.2rem; color: #9a8a6a; font-family: HibouPrint; }
.lv-example .g { height: 1em; }
.lv-star { position: absolute; right: -.3rem; top: -.5rem; font-size: 1.8rem; }

/* ---------- cadre des jeux ---------- */
.mode { position: relative; height: 100%; display: flex; flex-direction: column; padding: .6rem clamp(.6rem, 2vw, 1.4rem) .6rem; gap: .4rem; }
.mode-head { display: flex; align-items: center; gap: .6rem; }
.mode-title { font-weight: 700; background: rgba(255, 251, 232, .92); padding: .3em .9em; border-radius: 999px; border: 3px solid #e7d8b0; font-size: clamp(.9rem, 2.4vmin, 1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pips { flex: 1; display: flex; justify-content: center; gap: .15rem; }
.pip { font-size: clamp(1.2rem, 3.4vmin, 2rem); filter: grayscale(1) opacity(.45); transition: filter .3s, transform .3s; }
.pip.on { filter: none; transform: rotate(-12deg); }
.pip.now { filter: grayscale(.3); animation: pxbob 1.6s ease-in-out infinite; }
.mode-body { flex: 1; display: flex; flex-direction: column; position: relative; min-height: 0; }

/* ---------- Dressing ---------- */
.dress-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 0; }
.dress-caption { background: rgba(255, 251, 232, .9); padding: .3em 1em; border-radius: 999px; font-weight: 700; font-size: clamp(.9rem, 2.2vmin, 1.15rem); text-align: center; max-width: 92%; }
.dummy { --d: clamp(120px, min(46vmin, 42vh), 270px); width: var(--d); height: calc(var(--d) * 1.12); position: relative; transition: transform .2s; }
.dummy.ready { transform: scale(1.08); filter: drop-shadow(0 0 16px #ffe27a); }
.dummy.shake { animation: shake .5s; }
@keyframes shake { 0%, 100% { translate: 0; } 20% { translate: -12px; } 40% { translate: 10px; } 60% { translate: -6px; } 80% { translate: 4px; } }
.dummy-body { position: absolute; inset: 8% 6% 6%; border-radius: 46% 46% 40% 40%; background: linear-gradient(#e6e2ee, #cfc8e0); border: 5px solid #fff; box-shadow: var(--shadow); }
.dummy.vowel .dummy-body { background: linear-gradient(#ffd2c0, #ff9f82); }
.dummy.cons .dummy-body { background: linear-gradient(#cfe3ff, #8fb6ec); }
.dummy-ears { position: absolute; left: 14%; right: 14%; top: 0; height: 18%; }
.dummy-ears::before, .dummy-ears::after { content: ''; position: absolute; top: 0; width: 24%; height: 100%; border-radius: 50%; background: inherit; background: #fff; border: 4px solid #fff; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, .06); }
.dummy-ears::before { left: 0; } .dummy-ears::after { right: 0; }
.dummy-arm { position: absolute; top: 44%; width: 16%; height: 30%; border-radius: 999px; background: #fff; border: 4px solid #fff; z-index: 0; }
.dummy-arm.l { left: -4%; transform: rotate(24deg); } .dummy-arm.r { right: -4%; transform: rotate(-24deg); }
.dummy-foot { position: absolute; bottom: 0; width: 26%; height: 9%; border-radius: 50%; background: #fff; }
.dummy-foot.l { left: 20%; } .dummy-foot.r { right: 20%; }
.dummy-face { position: absolute; left: 0; right: 0; top: 10%; height: 22%; }
.eye { position: absolute; top: 0; width: 13%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.eye::after { content: ''; position: absolute; top: 18%; left: 22%; width: 30%; height: 30%; border-radius: 50%; background: #fff; }
.eye.l { left: 30%; } .eye.r { right: 30%; }
.mouth { position: absolute; left: 41%; width: 18%; top: 62%; height: 28%; border-bottom: 5px solid var(--ink); border-radius: 0 0 999px 999px; }
.cheek { position: absolute; top: 50%; width: 11%; height: 22%; border-radius: 50%; background: rgba(240, 100, 140, .35); }
.cheek.l { left: 17%; } .cheek.r { right: 17%; }
.tummy { position: absolute; left: 50%; top: 56%; width: 58%; aspect-ratio: 1; translate: -50% -42%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #fff7e6); border: 4px solid rgba(255, 255, 255, .9); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .06); cursor: pointer; }
.tummy .g { font-size: calc(var(--d) * .36 * var(--k, .64) / .64); }
.tummy .g-cM, .tummy .g-cm { font-size: calc(var(--d) * .34); }
.dummy.vowel .tummy { color: #7a2a18; } .dummy.cons .tummy { color: #1d3b66; }
.tummy .worn { animation: twirl .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes twirl { from { transform: translateY(var(--dy, 0)) rotate(-300deg) scale(.2); opacity: 0; } to { transform: translateY(var(--dy, 0)) rotate(0) scale(1); opacity: 1; } }
.dummy.dressed .dummy-body { animation: dance .9s ease 2; }
.dummy.dressed::after { content: '✨'; position: absolute; right: -6%; top: 4%; font-size: 2.2rem; animation: pxtwinkle 1s infinite; }
@keyframes dance { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg) translateY(-8px); } 75% { transform: rotate(5deg) translateY(-8px); } }

.rail-wrap { position: relative; padding-top: .2rem; }
.rod { position: absolute; left: 0; right: 0; top: 5px; height: 12px; border-radius: 6px; background: linear-gradient(#c9976a, #8a5a34); box-shadow: 0 4px 6px rgba(0, 0, 0, .25); }
.rail { display: flex; justify-content: center; gap: clamp(.5rem, 2.5vw, 2rem); padding-top: .2rem; flex-wrap: nowrap; }
.hanger { display: flex; flex-direction: column; align-items: center; position: relative; transition: opacity .3s, scale .3s; }
.hanger.gone { opacity: .0; pointer-events: none; }
.hanger .wire { display: block; width: calc(var(--tile) * .82); margin-bottom: -.5rem; z-index: 2; pointer-events: none; }
.hanger .wire svg { display: block; width: 100%; height: auto; }
.hanger .tile { z-index: 1; }

.photo-frame { display: flex; gap: clamp(.5rem, 2vw, 1.4rem); padding: clamp(.8rem, 2vw, 1.4rem); background: linear-gradient(#b87a45, #8a5a34); border-radius: 1.2rem; border: 6px solid #6f4426; box-shadow: var(--shadow), inset 0 0 0 4px #d6a572; }
.slot { width: calc(var(--tile) * 1.1); display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.slot::before { content: ''; width: calc(var(--tile) * 1.05); height: calc(var(--tile) * 1.05); border-radius: 50%; background: rgba(255, 253, 244, .5); border: 4px dashed #fff; order: 1; }
.slot.filled::before { display: none; }
.slot .tile { order: 1; }
.slot-label { order: 2; color: #fff6dd; font-weight: 700; font-size: clamp(.8rem, 1.8vmin, 1rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.slot.ready::before { background: rgba(255, 245, 160, .85); border-style: solid; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 30; }
.flash.go { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

/* ---------- Ponts de lianes ---------- */
.mode-bridges .mode-body { padding: .2rem 0 0; }
.col-labels { display: flex; justify-content: space-around; font-weight: 700; color: #fff; font-size: clamp(.8rem, 2vmin, 1.05rem); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.col-labels span { background: rgba(47, 125, 79, .8); padding: .15em .8em; border-radius: 999px; }
.bridge-stage { flex: 1; position: relative; display: flex; justify-content: space-around; min-height: 0; padding: 0 clamp(.5rem, 6vw, 5rem); --tile: min(calc((100vh - 15rem) / 4.4), clamp(70px, 20vmin, 124px)); }
.bridge-col { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; z-index: 2; }
.vines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.vine-rope { fill: none; stroke: #3f9d52; stroke-width: 9; stroke-linecap: round; }
.vine-shadow { fill: none; stroke: rgba(0, 40, 10, .22); stroke-width: 13; stroke-linecap: round; transform: translateY(5px); }
.vine-rope.grow, .vine-shadow.grow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: grow .55s ease-out forwards; }
@keyframes grow { to { stroke-dashoffset: 0; } }
.vine-leaf { fill: #62c27d; animation: fadein .3s both; }
.vine-flower { animation: fadein .4s both; }
.vine-flower ellipse { stroke: rgba(0, 0, 0, .12); stroke-width: 1; }
.vine-temp { fill: none; stroke: #7bc47f; stroke-width: 8; stroke-dasharray: 2 13; stroke-linecap: round; opacity: .95; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.bubble-slot { display: flex; }
.bubble-tile { touch-action: none; }

/* ---------- Miroir ---------- */
.mirror-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 0; }
.mirror-prompt { min-height: 2.2rem; background: rgba(255, 251, 232, .93); border-radius: 999px; padding: .3em 1.1em; font-weight: 700; font-size: clamp(.9rem, 2.3vmin, 1.2rem); text-align: center; max-width: 94%; }
.mirror-prompt:empty { visibility: hidden; }
.mirror { position: relative; height: min(58vh, 62vw, 520px); aspect-ratio: 200 / 190; border-radius: 50%; padding: 4.5%; background: conic-gradient(from 30deg, #f6d57a, #c9942f, #fff0b0, #b8821f, #f6d57a); box-shadow: 0 10px 0 rgba(90, 60, 10, .3), 0 18px 34px rgba(40, 30, 20, .3); }
.mirror-gem { position: absolute; width: 7%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e0568a 55%, #8a1f4a); border: 3px solid #f6d57a; z-index: 2; }
.mirror-gem.g1 { left: 46.5%; top: -2%; } .mirror-gem.g2 { left: -1%; top: 46%; background: radial-gradient(circle at 35% 30%, #fff, #4caf7d 55%, #1f6b45); } .mirror-gem.g3 { right: -1%; top: 46%; background: radial-gradient(circle at 35% 30%, #fff, #3b78c4 55%, #1d3f78); }
.glass { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 25%, #ffffff, #eaf6ff 45%, #cfe6fb 100%); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7), inset 0 8px 24px rgba(40, 80, 140, .2); }
.m-svg { width: 100%; height: 100%; display: block; touch-action: none; }
.shine { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .55) 0 18%, transparent 18% 26%, rgba(255, 255, 255, .3) 26% 30%, transparent 30%); pointer-events: none; border-radius: 50%; }
.mirror.sparkling .glass { animation: sparkle 1s ease; }
@keyframes sparkle { 0%, 100% { filter: none; } 30% { filter: brightness(1.25) saturate(1.3); } }
.m-glyph { fill: var(--ink); transition: opacity .4s, fill .3s; paint-order: stroke; }
.mirror.vowel .m-glyph { fill: var(--vowel-ink); } .mirror.cons .m-glyph { fill: var(--cons-ink); }
.m-glyph-layer { transform-box: fill-box; transform-origin: center; }
.m-glyph-layer.lift { animation: lift .38s ease forwards; }
.m-glyph-layer.flip { animation: flip .32s ease-in forwards; }
.m-glyph-layer.unflip { animation: unflip .38s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes lift { to { transform: translateY(-8px) scale(1.12); filter: drop-shadow(0 0 6px #ffe27a); } }
@keyframes flip { from { transform: translateY(-8px) scale(1.12, 1.12); } to { transform: translateY(-8px) scale(0, 1.12); } }
@keyframes unflip { from { transform: scale(0, 1.12); filter: drop-shadow(0 0 8px #ffe27a); } to { transform: scale(1, 1); } }
.m-lines line { shape-rendering: crispEdges; }
.rail-road { fill: none; stroke: #bcdcff; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.rail-dash { fill: none; stroke: #fff; stroke-width: 1.8; stroke-dasharray: 0.5 5; stroke-linecap: round; }
.rail-paint { fill: none; stroke: #f59e42; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.golden .rail-paint { stroke: #f5b83a; }
.golden .rail-road { stroke: #fff0b0; }
.rail-chev { fill: none; stroke: #5b93e0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.rail-start { opacity: 0; transform-box: fill-box; }
.rail-start.on { opacity: 1; }
.rail-start-dot { fill: #3fbf6a; stroke: #fff; stroke-width: 2.4; }
.rail-start.on .rail-start-dot { animation: startpulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rail-start.pulse .rail-start-dot { animation: startshake .6s; transform-box: fill-box; transform-origin: center; }
@keyframes startpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes startshake { 0%, 100% { transform: scale(1); } 25%, 75% { transform: scale(1.7); } 50% { transform: scale(1.3); } }
.rail-start-num { fill: #fff; font-size: 9px; font-weight: 700; font-family: HibouPrint; }
.m-quill { pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.mirror-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

/* ---------- résumé, carnet ---------- */
.summary { align-items: center; text-align: center; }
.sum-title { font-family: HibouCursive, cursive; font-size: clamp(1.8rem, 6vmin, 3.2rem); color: #ffe27a; text-shadow: 0 4px 0 #b9741a; line-height: 1.4; }
.sum-body { display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.sum-right { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.sticker-card { background: rgba(255, 253, 244, .96); border: 4px solid #e7d8b0; border-radius: 1.6rem; padding: 1rem 1.6rem; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.sticker-title { font-weight: 700; font-size: 1.2rem; }
.sticker-name { font-weight: 700; font-size: 1.3rem; }
.sum-lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; font-weight: 700; font-size: 1.1rem; background: rgba(255, 251, 232, .9); border-radius: 1rem; padding: .5rem 1rem; }
.sum-lines:empty { display: none; }
.sum-stars { font-size: 2rem; letter-spacing: .2em; color: #d9d2bd; text-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.sum-stars .on { color: var(--sun); }
.sum-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

.sticker { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; padding: .7rem .6rem .5rem; background: #fff; border: 5px solid #fff; border-radius: 1.6rem; box-shadow: 0 0 0 3px #e7d8b0, 0 6px 14px rgba(40, 30, 20, .2); transform: rotate(-2deg); transition: transform .2s; }
.sticker:nth-child(even) { transform: rotate(2deg); }
.sticker .sticker-emoji { font-size: clamp(2.6rem, 8vmin, 4rem); line-height: 1.1; }
.sticker .sticker-letters { display: flex; gap: .5rem; font-size: 1.7rem; height: 2.2rem; align-items: center; }
.sticker .sticker-letters .g { font-size: 1.7rem; --k: 1; }
.sticker-cap { font-size: .85rem; font-weight: 700; color: #5a5a6a; }
.sticker.big { padding: 1rem 2rem; } .sticker.big .sticker-emoji { font-size: clamp(4rem, 14vmin, 7rem); }
.sticker.locked { background: #efe9d6; filter: grayscale(1) opacity(.7); }
.sticker.anim-0 .sticker-emoji { animation: st0 2.4s ease-in-out infinite; }
.sticker.anim-1 .sticker-emoji { animation: st1 2.8s ease-in-out infinite; }
.sticker.anim-2 .sticker-emoji { animation: st2 2.2s ease-in-out infinite; }
.sticker.anim-3 .sticker-emoji { animation: st3 3s ease-in-out infinite; }
.sticker.boing { animation: boing .6s; }
@keyframes st0 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes st1 { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.06); } }
@keyframes st2 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12, .94); } }
@keyframes st3 { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(-6px) rotate(-5deg); } 90% { transform: translateX(6px) rotate(5deg); } }
@keyframes boing { 0%, 100% { scale: 1; } 30% { scale: 1.18; } 60% { scale: .95; } }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; }
.album h2 { background: rgba(255, 251, 232, .92); display: inline-block; padding: .2em .9em; border-radius: 999px; font-size: 1.2rem; }
.album-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .6rem; }
.photo { display: flex; gap: .3rem; align-items: center; padding: .5rem .8rem; background: #fff; border: 4px solid #8a5a34; border-radius: .6rem; box-shadow: var(--shadow); font-size: 1.6rem; height: 3.4rem; }
.photo .g { font-size: 1.6rem; --k: 1; }

/* ---------- forêt ---------- */
.forest-pct { display: flex; align-items: center; gap: 1.2rem; justify-content: center; flex-wrap: wrap; background: rgba(255, 251, 232, .92); border-radius: 1.5rem; padding: .8rem 1.4rem; font-weight: 700; font-size: 1.15rem; }
.ring { --p: 0; width: 6rem; height: 6rem; border-radius: 50%; background: conic-gradient(#4caf7d calc(var(--p) * 1%), #e1dcc4 0); display: grid; place-items: center; position: relative; flex: none; }
.ring::before { content: ''; position: absolute; inset: .7rem; border-radius: 50%; background: var(--paper); }
.ring span { position: relative; font-weight: 700; font-size: 1.3rem; }
.ring.small { width: 4.2rem; height: 4.2rem; } .ring.small::before { inset: .5rem; } .ring.small span { font-size: .95rem; }
.forest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.8rem, 1fr)); gap: .7rem; }
.tree { position: relative; display: flex; flex-direction: column; align-items: center; background: rgba(255, 253, 244, .88); border-radius: 1.2rem; padding: .4rem .2rem .2rem; border: 3px solid #e7d8b0; }
.tree .tree-emoji { font-size: 2.6rem; line-height: 1.1; }
.tree.s0 .tree-emoji { opacity: .6; filter: grayscale(.5); }
.tree .g { font-size: 1.6rem; --k: 1; color: var(--ink); height: 2rem; }
.tree-flower { position: absolute; right: .3rem; top: .2rem; font-size: 1.2rem; animation: pxtwinkle 2.6s infinite; }

/* ---------- profils ---------- */
.profiles-body { display: flex; gap: 1.5rem; align-items: center; justify-content: center; flex-wrap: wrap; flex: 1; }
.profiles-form { display: flex; flex-direction: column; gap: 1rem; align-items: center; min-width: min(100%, 22rem); background: rgba(255, 251, 232, .93); border-radius: 1.6rem; padding: 1.2rem 1.4rem; border: 4px solid #e7d8b0; box-shadow: var(--shadow); }
.profile-list { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.profile-card { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem .9rem; border-radius: 1.2rem; background: #fff; border: 4px solid #e7d8b0; font-weight: 700; }
.profile-card.on { border-color: var(--leaf2); }
.new-profile { display: flex; flex-direction: column; gap: .7rem; align-items: center; }
.new-profile h2 { font-size: 1.2rem; }
.name-input { width: 100%; max-width: 20rem; text-align: center; font-size: 1.4rem; padding: .5em 1em; border: 4px solid #e7d8b0; border-radius: 999px; background: #fff; }
.name-input.small { font-size: 1rem; padding: .3em .8em; text-align: left; }
.avatar-pick { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; max-width: 22rem; }
.avatar-pick .avatar { width: 3.2rem; height: 3.2rem; font-size: 1.8rem; }

/* ---------- accueil sonore ---------- */
.splash { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: radial-gradient(circle at 50% 40%, rgba(255, 245, 190, .55), rgba(20, 90, 60, .55)); transition: opacity .45s, transform .45s; }
.splash.leave { opacity: 0; transform: scale(1.06); }
.splash .plumix { width: min(40vmin, 300px); margin-bottom: .5rem; }
.splash-go { margin-top: 1.2rem; font-weight: 700; font-size: clamp(1.1rem, 3vmin, 1.7rem); background: #fff; padding: .5em 1.4em; border-radius: 999px; border: 4px solid #e7d8b0; animation: pxbob 1.8s ease-in-out infinite; box-shadow: var(--shadow); }

/* ---------- espace parents ---------- */
.gate-box { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; background: rgba(255, 251, 232, .95); border-radius: 1.6rem; padding: 1.6rem; border: 4px solid #e7d8b0; box-shadow: var(--shadow); }
.gate-q { font-size: 2.6rem; font-weight: 700; }
.gate-msg { color: #8c2323; font-weight: 700; text-align: center; max-width: 20rem; min-height: 1.4em; }
.parent { max-width: 980px; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.tab { padding: .5em 1em; border-radius: 999px; background: rgba(255, 251, 232, .8); border: 3px solid #e7d8b0; font-weight: 700; }
.tab.on { background: var(--leaf2); color: #fff; border-color: #2f8f6a; }
.tab-content { background: rgba(255, 253, 244, .96); border-radius: 1.4rem; padding: 1rem 1.2rem 1.4rem; border: 4px solid #e7d8b0; box-shadow: var(--shadow); }
.tab-body { display: flex; flex-direction: column; gap: .8rem; }
.tab-body h2 { font-size: 1.15rem; border-bottom: 3px solid #e7d8b0; padding-bottom: .2rem; margin-top: .4rem; }
.presets { display: flex; gap: .4rem; flex-wrap: wrap; }
.letter-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .4rem; }
.lchip { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .3rem; border-radius: .9rem; background: #fff; border: 3px solid #e0d6b8; height: 3.4rem; }
.lchip .g { font-size: 1.5rem; --k: 1; height: 1em; }
.lchip.on { background: #d6f3df; border-color: #3fa86b; box-shadow: inset 0 0 0 2px #3fa86b; }
.week-summary { font-weight: 700; background: #fff3c4; border-radius: .8rem; padding: .4em .9em; }
.switch-row { display: flex; align-items: center; gap: 1rem; padding: .4rem .2rem; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-text { flex: 1; display: flex; flex-direction: column; }
.sw-label { font-weight: 700; }
.sw-hint { font-size: .88rem; color: #5a5a6a; }
.switch { width: 3.4rem; height: 1.9rem; border-radius: 999px; background: #cfc9b4; position: relative; transition: background .2s; flex: none; }
.switch::after { content: ''; position: absolute; left: .2rem; top: .2rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch-row input:checked + .switch { background: var(--leaf2); }
.switch-row input:checked + .switch::after { transform: translateX(1.5rem); }
.switch-row:focus-within .switch { outline: 4px solid #1b6fe0; outline-offset: 3px; }
.radio-group { display: flex; flex-direction: column; gap: .4rem; }
.radio { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: .9rem; background: #fff; border: 3px solid #e0d6b8; cursor: pointer; font-weight: 700; }
.radio.on { border-color: #3fa86b; background: #e6f7ec; }
.radio input { width: 1.2rem; height: 1.2rem; accent-color: #2f9d5f; }
.slider-row { display: flex; align-items: center; gap: 1rem; font-weight: 700; }
.slider-row input { flex: 1; accent-color: #2f9d5f; height: 2rem; }
.select { font-size: 1.1rem; padding: .4em .8em; border-radius: .8rem; border: 3px solid #e0d6b8; background: #fff; }
.track-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.track-sentence { font-weight: 700; font-size: 1.1rem; flex: 1; min-width: 12rem; }
.legend { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .9rem; }
.pip { display: inline-block; }
i.pip, span.pip.pip-new, span.pip.pip-learning, span.pip.pip-review, span.pip.pip-good { width: .8rem; height: .8rem; border-radius: 50%; filter: none; }
.pip-new { background: #dcd7c6; } .pip-learning { background: #f5c04a; } .pip-review { background: #f08a5d; } .pip-good { background: #3fa86b; }
.track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .4rem; }
.tcell { display: flex; flex-direction: column; align-items: center; background: #fff; border: 3px solid #eadfc2; border-radius: .8rem; padding: .2rem; height: 4.4rem; justify-content: center; }
.tcell .g { font-size: 1.4rem; --k: 1; }
.tcell .g + .g { margin-top: -.05rem; }
.pips3 { display: flex; gap: .2rem; margin-top: .1rem; }
.track-lists { display: flex; flex-direction: column; gap: .3rem; line-height: 1.5; }
.history ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.prof-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.prof-edit { display: flex; flex-direction: column; }
.row-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.file-btn { cursor: pointer; }

/* ---------- confettis & toasts ---------- */
.confetti { position: absolute; pointer-events: none; z-index: 40; animation: confetti 1.5s ease-out forwards; will-change: transform, opacity; }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 120px)) rotate(var(--rot)); opacity: 0; } }
.toast { position: fixed; left: 50%; bottom: 1.4rem; translate: -50% 20px; background: #2b2a3a; color: #fff; padding: .6em 1.2em; border-radius: 999px; font-weight: 700; opacity: 0; transition: opacity .3s, translate .3s; z-index: 50; max-width: 90vw; text-align: center; }
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- petits écrans / portrait ---------- */
@media (max-height: 520px) {
  :root { --tile: clamp(60px, 15vmin, 100px); }
  .plumix-corner { width: 70px; }
  .mirror { height: min(52vh, 62vw); }
  .dummy { --d: min(30vmin, 160px); }
}
@media (max-aspect-ratio: 1/1) {
  .mirror { height: auto; width: min(86vw, 52vh * 1.05); }
  .rail { gap: .4rem; }
  .plumix-corner { bottom: auto; top: 3.9rem; right: .4rem; left: auto; width: clamp(64px, 14vmin, 96px); }
  .plumix-corner .bubble { left: auto; right: 60%; bottom: auto; top: 10%; }
  .plumix-corner .bubble::after { display: none; }
}
@media (min-aspect-ratio: 1/1) { .rail-wrap, .mode-bridges .bridge-stage { padding-left: clamp(84px, 17vmin, 150px); } .mode-mirror .mirror-actions { padding-left: clamp(84px, 17vmin, 150px); } }
#app.playing { overflow: hidden; }
.level-card.locked { opacity: 1; filter: grayscale(.85) brightness(.96); background: #ece6d2; }
body.big-targets { --tile: clamp(92px, 20vmin, 168px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.plumix-corner .px-star, .plumix-corner .px-note { display: none; }

/* bulle de l'accueil : à gauche de Plumix pour ne pas cacher le titre */
.hero .bubble, .plumix-hero .bubble { left: auto; right: 48%; bottom: 88%; max-width: min(15rem, 58vw); }
.hero .bubble::after, .plumix-hero .bubble::after { left: auto; right: 14%; }
[hidden] { display: none !important; }
.m-rail { pointer-events: none; }
@media (max-width: 760px) { .home .bubble { display: none; } }