/* La Licorne Céleste — thème nuit féerique */
:root {
    --kc-bg: radial-gradient(circle at 50% 0%, #5b3f9e 0%, #2a1b4d 55%, #140c2b 100%);
    --kc-ink: #fff8ff;
    --kc-muted: #e6dcff;
    --kc-card: #33245e;
    --kc-line: rgba(255, 209, 102, .35);
    --kc-accent: #ffd166;
    --kc-accent-2: #f472b6;
    --kc-accent-ink: #3b1f00;
    --kc-scene: #1b1240;
}

/* --- Lucioles --- */
.ff-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ff-unicorn { font-size: 3rem; animation: kc-float 3s ease-in-out infinite; }
.ff-request { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; min-height: 64px; padding: .5rem .8rem; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 3px solid var(--kc-line); }
.ff-group { display: inline-flex; gap: .3rem; padding: 0 .5rem; }
.ff-round { font-weight: 700; opacity: .7; margin-left: .4rem; }
.ff-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--c); opacity: .35; border: 3px solid #fff; display: inline-block; }
.ff-dot.got { opacity: 1; box-shadow: 0 0 12px var(--c); }
.ff-dot.next { opacity: 1; scale: 1.35; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 0 16px var(--c); animation: kc-wiggle 1s ease-in-out infinite; }
.ff-jarbox { display: flex; align-items: center; gap: .3rem; font-size: 2.2rem; }
.ff-jar { display: flex; flex-wrap: wrap; gap: 3px; max-width: 120px; }
.ff-jar .ff-dot { width: 16px; height: 16px; border-width: 2px; }
.forest { background: radial-gradient(circle at 50% 110%, #2b5d4a 0%, #13233f 55%, #0a0f26 100%); }
.forest-trees { position: absolute; left: 0; right: 0; bottom: -10px; font-size: 5rem; text-align: center; letter-spacing: -10px; opacity: .55; pointer-events: none; white-space: nowrap; overflow: hidden; }
.firefly {
    position: absolute; translate: -50% -50%; border: none; padding: 0; border-radius: 50%; z-index: 2;
    background: radial-gradient(circle, #fff 0 18%, var(--c) 30%, color-mix(in srgb, var(--c) 40%, transparent) 55%, transparent 70%);
    filter: drop-shadow(0 0 10px var(--c)); touch-action: none;
}
.firefly::after { content: ''; position: absolute; left: 22%; right: 22%; top: 12%; height: 30%; border-radius: 50%; background: rgba(255, 255, 255, .35); filter: blur(1px); animation: wings .15s linear infinite alternate; }
@keyframes wings { to { transform: scaleX(.6); } }
.firefly.fake { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .08; } }
.firefly.flee { opacity: .5; }

/* --- Crinière --- */
.mane-layout { display: grid; grid-template-columns: 2.2fr 1fr; grid-template-areas: "scene model" "pots model"; gap: .8rem; align-items: start; }
.mane-layout .meadow { grid-area: scene; }
.mane-layout .pots { grid-area: pots; margin-top: 0; }
.mane-layout .mane-model { grid-area: model; }
@media (max-width: 760px) {
    .mane-layout { grid-template-columns: 1fr; grid-template-areas: "model" "scene" "pots"; }
    .mane-model { width: 200px; margin: 0 auto; padding: .3rem; }
    .mane-layout .meadow { --kc-ar: 1.25; }
    .pot { width: 54px; height: 54px; }
}
.meadow { background: linear-gradient(180deg, #a8d8ff 0%, #d9f0ff 55%, #9ed98c 56%, #6fbf73 100%); }
.meadow .unicorn { position: absolute; inset: 3% 2% 0 2%; width: 96%; height: 97%; }
.strand-base { fill: none; stroke: #c9c6d6; stroke-linecap: round; transition: filter .15s; }
.strand-base.active { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px var(--kc-accent, #ffd166)); }
.strand-paint { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; pointer-events: none; transition: stroke .2s; }
.strand-gloss { fill: none; stroke: #fff; stroke-opacity: .28; stroke-linecap: round; pointer-events: none; }
.strand-hit { fill: none; stroke: transparent; pointer-events: stroke; cursor: crosshair; }
.meadow.done .unicorn { animation: kc-bounce 1s ease 2; }
.mane-model { background: #fffaf0; color: #3b2a5e; border-radius: 18px; padding: .6rem; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); text-align: center; }
.mane-model svg { width: 100%; height: auto; display: block; }
.model-title { font-weight: 700; margin: .2rem 0; }
.mane-model.sky { background: linear-gradient(180deg, #bfe6ff, #fffaf0); }
.lake-water { background: linear-gradient(180deg, #4d9de0, #1d5fa0); border-radius: 50% / 18%; padding: 6px; overflow: hidden; }
.lake-water .reflect { transform: scaleY(-1); opacity: .9; filter: blur(.3px); }
.pots { margin-top: .9rem; }
.pot { width: 66px; height: 66px; border-radius: 12px 12px 26px 26px; border: 4px solid #fff; background: var(--c, #fff); font-size: 2rem; box-shadow: 0 6px 0 rgba(0, 0, 0, .3); }
.pot.on { translate: 0 -8px; box-shadow: 0 0 0 5px var(--kc-accent), 0 10px 0 rgba(0, 0, 0, .3); }

/* --- Corne --- */
.sky-board { background: radial-gradient(circle at 50% 100%, #6d4bc2 0%, #2a1b4d 60%, #140c2b 100%); }
.horn-head { position: absolute; left: 50%; bottom: -4%; height: 42%; aspect-ratio: 200 / 120; translate: -50% 0; pointer-events: none; }
.horn-head svg { width: 100%; height: 100%; display: block; }
.horn-box { position: absolute; left: 50%; top: 4%; height: 68%; aspect-ratio: 68 / 202; translate: -50% 0; z-index: 1; }
.horn-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.horn-outline polygon { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.horn-slot { position: absolute; left: 0; width: 100%; }
.horn-slot svg { width: 100%; height: 100%; display: block; }
.horn-slot .ghost polygon, .horn-slot .ghost g { fill: rgba(255, 255, 255, .05) !important; stroke: rgba(255, 255, 255, .85); stroke-dasharray: 3 3; }
.horn-slot .ghost g { display: none; }
.horn-slot.filled { animation: kc-pop .3s ease; }
.horn-piece { padding: 0; flex: 0 0 auto; transition: rotate .2s; }
.horn-piece svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.sky-board.complete .horn-box { filter: drop-shadow(0 0 22px #ffd166); animation: kc-float 2s ease-in-out infinite; }

/* ---------- Niveaux 8-9 et 9-10 ans ---------- */
.ff-shown { padding-right: .6rem; border-right: 2px dashed rgba(255, 255, 255, .35); }
.ff-q { display: inline-grid; place-items: center; opacity: 1; background: rgba(255, 255, 255, .12); border-style: dashed; color: #fff; font-weight: 700; font-size: 1rem; }
.ff-q.next { --c: #fff; }
.firefly.cham { transition: background-color .4s, box-shadow .4s; }
.ff-legend { display: inline-flex; flex-wrap: wrap; gap: .3rem .8rem; font-weight: 700; }
.ff-legend > span { display: inline-flex; align-items: center; gap: .25rem; }
.ff-legend .ff-dot { width: 22px; height: 22px; }
.ff-goal { font-weight: 700; font-size: 1.05rem; padding: .2rem .7rem; border-radius: 999px; background: rgba(255, 209, 102, .18); }
.mane-model.notebook { background: #fff8e6; text-align: left; }
.mane-model.notebook .model-title { text-align: center; }
.clue-colors { margin: .4rem 0; font-size: .9rem; }
.clues { margin: .3rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; font-size: .98rem; line-height: 1.35; }
.clue-pill { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: var(--c); color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); white-space: nowrap; }
.mane-model.song { display: grid; gap: .5rem; justify-items: center; background: linear-gradient(180deg, #ffe9f6, #fffaf0); }
.song-notes { display: flex; gap: .4rem; }
.song-note { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #ead9ff; color: #6b4fa3; font-size: 1.2rem; transition: transform .15s, background .15s; }
.song-note.on { background: #ffd166; transform: translateY(-6px) scale(1.15); }
.song-btn { width: 100%; font-size: 1rem; }