/* L'Île aux Dinosaures — thème jungle */
:root {
    --kc-bg: radial-gradient(circle at 50% 0%, #2f6b3a 0%, #17361f 55%, #0b1d10 100%);
    --kc-ink: #fffbea;
    --kc-muted: #d8f3dc;
    --kc-card: #1f4229;
    --kc-line: rgba(233, 196, 106, .35);
    --kc-accent: #f4a261;
    --kc-accent-2: #2a9d8f;
    --kc-accent-ink: #3a1c00;
    --kc-scene: #6b4423;
}

/* --- Fouille --- */
.dig-tip { text-align: center; font-size: 1.1rem; margin: 0 0 .6rem; }
.dig-scene { background: repeating-linear-gradient(0deg, #6b4423 0 26px, #5d3a1d 26px 52px); }
.dig-bone { position: absolute; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.dig-bone svg { width: 100%; height: 100%; }
.dig-bone.popped { animation: dig-pop .65s ease forwards; }
@keyframes dig-pop { 40% { scale: 1.25; filter: drop-shadow(0 0 14px #ffe08a); } 100% { scale: .4; opacity: 0; translate: 0 60px; } }
.dig-rock {
    position: absolute; z-index: 2; border: none; padding: 0; border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;
    background: radial-gradient(circle at 35% 30%, #b8b8b0, #7d7d76 60%, #55554f);
    box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .25);
}
.dig-rock.exposed { z-index: 7; animation: kc-wiggle 1.4s ease-in-out infinite; cursor: pointer; }
.dig-rock::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.dig-rock.hit1::after { background: linear-gradient(115deg, transparent 47%, #2d2d2a 48% 51%, transparent 52%); }
.dig-rock.hit2::after { background: linear-gradient(115deg, transparent 47%, #2d2d2a 48% 51%, transparent 52%), linear-gradient(35deg, transparent 47%, #2d2d2a 48% 51%, transparent 52%); }
.bone-piece { width: 112px; height: 80px; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .08); display: grid; place-items: center; }
.bone-piece svg { width: 100%; height: 100%; }
.bone-piece.kc-locked { opacity: .75; }

/* --- Squelette --- */
.kc-scene.dino-board { --kc-ar: 2; background: radial-gradient(circle at 50% 40%, #3d6b45, #1f3f26); }
.dino-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.dino-outline path { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; }
.dino-slot { position: absolute; display: grid; place-items: center; border-radius: 14px; border: 2px dashed rgba(255, 255, 255, .35); }
.dino-slot svg { width: 100%; height: 100%; }
.dino-slot.filled { border-color: transparent; animation: kc-pop .3s ease; }
.ghost path, .ghost circle, .ghost rect, .ghost ellipse { fill: rgba(255, 255, 255, .06) !important; stroke: rgba(255, 255, 255, .8) !important; stroke-dasharray: 5 4; }
.ghost g { fill: none; }
.dino-board.alive .dino-outline path { fill: rgba(244, 162, 97, .35); stroke-dasharray: none; transition: fill 1s; }

/* --- Piste --- */
.trail-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .8rem; }
.cast-card { position: relative; background: #f1ebe0; color: #4a3520; border-radius: 18px; padding: .6rem 1rem; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.cast-title { font-weight: 700; margin-bottom: .2rem; }
.trail-ref { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.trail-ref .hand { font-size: 34px; line-height: 1; }
.fork-steps { display: flex; gap: .4rem; }
.fork-dot { padding: .3rem .6rem; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 2px solid var(--kc-line); opacity: .6; font-weight: 700; }
.fork-dot.now { opacity: 1; border-color: var(--kc-accent); }
.fork-dot.done { opacity: 1; background: #2bb673; border-color: #2bb673; }
.fork-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; }
.trail {
    position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .5rem .8rem;
    border-radius: 22px; border: 4px solid transparent; min-height: 330px;
    background: linear-gradient(180deg, #4b6b3a 0%, #8a6a45 20%, #9c7a50 100%);
}
.trail:hover { border-color: rgba(255, 255, 255, .5); }
.trail-fog { font-size: 2.2rem; }
.trail-prints { flex: 1; display: flex; flex-direction: column-reverse; justify-content: space-around; align-items: center; width: 100%; }
.trail-prints .step-0 { translate: -26px 0; }
.trail-prints .step-1 { translate: 26px 0; }
.trail .trail-ref { background: rgba(255, 255, 255, .85); border-radius: 14px; padding: .2rem .6rem; }
.trail.wrong { border-color: #e76f51; filter: saturate(.6); }
.trail.right { border-color: #52b788; box-shadow: 0 0 0 6px rgba(82, 183, 136, .35); }
.walker { position: absolute; bottom: 12px; font-size: 2.4rem; animation: walk-up 1.4s ease-in forwards; }
@keyframes walk-up { to { bottom: 85%; opacity: .2; } }
.nest-found { font-size: 5rem; text-align: center; padding: 2rem 0; animation: kc-pop .5s ease; grid-column: 1 / -1; }

/* --- Couveuse --- */
.incub { background: radial-gradient(circle at 50% 75%, #6a8f3e 0%, #2f5226 55%, #1a3318 100%); }
.lamp-rail { position: absolute; left: 4%; top: 6%; width: 15%; height: 86%; border-radius: 20px; background: rgba(0, 0, 0, .28); border: 3px dashed rgba(255, 255, 255, .35); cursor: ns-resize; touch-action: none; }
.rail-label { position: absolute; top: -2px; left: 0; right: 0; text-align: center; font-size: .8rem; opacity: .8; }
.lamp { position: absolute; left: 50%; translate: -50% 0; font-size: 3.2rem; filter: drop-shadow(0 0 18px #ffd166); pointer-events: none; }
.nest { position: absolute; left: 30%; top: 14%; width: 40%; height: 80%; display: grid; place-items: center; }
.nest::after { content: ''; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse, #8b5a2b 0 55%, #5a3818 70%, transparent 72%); z-index: 0; }
.fern { position: absolute; font-size: 2.6rem; z-index: 1; transition: filter .6s, rotate .6s; }
.fern.f1 { left: 0; bottom: 8%; rotate: -20deg; }
.fern.f2 { right: 0; bottom: 8%; rotate: 20deg; }
.fern.f3 { left: 42%; bottom: 0; }
.incub.dry .fern { filter: sepia(1) saturate(1.6) hue-rotate(-15deg); rotate: 35deg; }
.egg-ring { position: absolute; width: min(78%, 240px); aspect-ratio: 1; z-index: 1; top: 8%; }
.egg-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 6; }
.ring-fg { fill: none; stroke: #ffd166; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .2s linear; }
.egg { position: absolute; top: 14%; z-index: 2; width: min(52%, 160px); aspect-ratio: 100 / 120; border: none; background: none; padding: 0; }
.egg-svg { width: 100%; height: 100%; overflow: visible; }
.egg .shell { fill: #fdf3d8; stroke: #c9a46a; stroke-width: 3; transition: fill .4s; }
.egg .spot { fill: #9cc58a; }
.egg .eye { fill: #3a2a1a; }
.egg .mouth { fill: none; stroke: #3a2a1a; stroke-width: 3; stroke-linecap: round; }
.egg .crack { fill: none; stroke: #6b4a1e; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.egg.crack1 .c1, .egg.crack2 .c1, .egg.crack2 .c2, .egg.crack3 .crack { opacity: 1; }
.egg[data-state="cold"] .shell { fill: #cfe6ff; }
.egg[data-state="cold"] { animation: shiver .18s linear infinite; }
.egg[data-state="hot"] .shell { fill: #ffc4b0; }
.egg[data-state="ok"] { animation: kc-float 2.4s ease-in-out infinite; }
.egg.ready { animation: kc-wiggle .5s ease-in-out infinite; cursor: pointer; }
.egg.hatched { opacity: 0; transition: opacity .4s; }
@keyframes shiver { 50% { translate: 2px 0; } }
.baby { position: absolute; top: 20%; z-index: 3; font-size: 6rem; animation: kc-pop .5s ease, kc-float 2.5s ease-in-out .5s infinite; }
.gauge { position: absolute; top: 8%; height: 78%; width: 8%; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.gauge.thermo { right: 4%; }
.gauge.humid { right: 14%; }
.g-icon { font-size: 1.6rem; }
.g-bar { position: relative; flex: 1; width: 60%; min-width: 22px; border-radius: 999px; background: linear-gradient(0deg, #4ea8de, #e76f51); border: 3px solid #fff; overflow: hidden; }
.humid .g-bar { background: linear-gradient(0deg, #c9a46a, #4ea8de); }
.g-zone { position: absolute; left: 0; right: 0; background: #52b788; box-shadow: 0 0 0 2px #fff inset; }
.g-marker { position: absolute; left: -6px; right: -6px; height: 8px; margin-bottom: -4px; background: #fff; border-radius: 4px; box-shadow: 0 0 0 2px #333; transition: bottom .15s linear; }
.wind { position: absolute; top: 30%; right: -30%; font-size: 3rem; opacity: 0; z-index: 3; pointer-events: none; }
.wind.on { animation: wind-blow 4s linear forwards; }
@keyframes wind-blow { 10% { opacity: 1; } 90% { opacity: 1; } to { right: 110%; opacity: 0; } }
.incub.misting::before { content: '💧 💧 💧 💧 💧'; position: absolute; left: 30%; right: 30%; top: 10%; text-align: center; font-size: 1.4rem; z-index: 4; animation: mist .8s linear infinite; pointer-events: none; }
@keyframes mist { from { translate: 0 0; opacity: 1; } to { translate: 0 60px; opacity: 0; } }
.spray { position: absolute; right: 3%; bottom: 3%; z-index: 5; min-height: 3.6rem; font-size: 1.2rem; }
.spray.kc-held { background: #4ea8de; color: #fff; }
.incub .gauge { height: 64%; }
@media (max-width: 640px) {
    .nest { left: 22%; width: 52%; }
    .lamp-rail { width: 16%; }
    .gauge { width: 10%; }
    .gauge.humid { right: 13%; }
}

/* ---------- Niveaux 8-9 et 9-10 ans ---------- */
.rock-sum { position: absolute; inset: 0; display: grid; place-items: center; font: 700 clamp(14px, 2.6vw, 24px) 'Fredoka', sans-serif; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, .6); pointer-events: none; }
.rock-hits { position: absolute; left: 50%; bottom: 4%; translate: -50% 0; font: 700 14px 'Fredoka', sans-serif; color: #ffd166; text-shadow: 0 1px 2px #000; pointer-events: none; }
.cast-card.notes { text-align: left; }
.trail-notes { margin: .3rem 0 0; padding-left: 1.1rem; display: grid; gap: .25rem; font-weight: 700; font-size: .98rem; }
.trail-len { margin-top: .35rem; font: 700 1.05rem 'Fredoka', sans-serif; color: #3b2414; background: #fff4d6; border-radius: 999px; padding: .1rem .7rem; }
.g-val { display: block; text-align: center; font: 700 14px 'Fredoka', sans-serif; color: #fff; margin-top: .2rem; }
.incub-card { margin-bottom: .7rem; text-align: center; }