/* Mission Atlantis — thème océan */
:root {
    --kc-bg: radial-gradient(circle at 50% 0%, #1b6fa3 0%, #06283d 60%, #031420 100%);
    --kc-ink: #f2fbff;
    --kc-muted: #cdeeff;
    --kc-card: #0b3a57;
    --kc-line: rgba(126, 214, 255, .35);
    --kc-accent: #ffc83d;
    --kc-accent-2: #2a9d8f;
    --kc-accent-ink: #3a2600;
    --kc-scene: #06283d;
}

/* --- Plongée --- */
.dive-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.mission-card { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1.1rem; border-radius: 999px; background: #fffaf0; color: #06283d; font-weight: 700; font-size: 1.6rem; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.mission-icon { font-size: 2.4rem; }
.mission-n { font-size: 1rem; opacity: .6; }
.album { display: flex; gap: .4rem; }
.photo { padding: .3rem .5rem; background: #fff; color: #06283d; border-radius: 6px; font-weight: 700; rotate: -4deg; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); font-size: 1.3rem; }
.kc-scene.ocean { --kc-ar: .95; background: linear-gradient(180deg, #7fd3ff 0%, #2b8cc4 20%, #165f8f 45%, #0b3a57 70%, #04182a 100%); }
@media (max-width: 640px) { .kc-scene.ocean { --kc-ar: .75; } }
.creature { position: absolute; right: 8%; translate: 0 -50%; font-size: 2.4rem; animation: kc-float 3s ease-in-out infinite; }
.ruler { position: absolute; left: 0; translate: 0 -50%; font-size: .8rem; font-weight: 700; padding-left: .3rem; border-top: 2px solid rgba(255, 255, 255, .5); width: 100%; opacity: .55; pointer-events: none; }
.target-band { position: absolute; left: 0; right: 0; background: rgba(255, 200, 61, .22); border-top: 3px dashed #ffc83d; border-bottom: 3px dashed #ffc83d; pointer-events: none; }
.seabed { position: absolute; left: 0; right: 0; bottom: -6px; font-size: 2.6rem; text-align: center; letter-spacing: .2rem; white-space: nowrap; overflow: hidden; pointer-events: none; }
.sub { position: absolute; left: 54%; width: 26%; translate: -50% -50%; transition: rotate .2s; filter: drop-shadow(0 0 8px rgba(255, 200, 61, .5)); pointer-events: none; }
.sub svg { width: 100%; height: auto; display: block; overflow: visible; }
.sub.on-target { filter: drop-shadow(0 0 18px #ffc83d); }
.depth-readout { position: absolute; left: 68%; translate: 0 -50%; font-weight: 700; font-size: 1.2rem; background: rgba(0, 0, 0, .45); border-radius: 8px; padding: 0 .4rem; pointer-events: none; }
.depth-readout:empty { display: none; }
.dive-controls { position: absolute; left: 2%; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: .6rem; z-index: 5; }
.dive-btn { min-height: 4.2rem; padding: .5rem .9rem; font-size: 1.1rem; }
.tank { width: 34px; height: 70px; border: 3px solid #fff; border-radius: 10px; position: relative; overflow: hidden; background: rgba(255, 255, 255, .15); }
.tank-water { position: absolute; left: 0; right: 0; bottom: 0; background: #4ea8de; transition: height .15s linear; }
.ocean.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: flash .4s ease forwards; pointer-events: none; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }

/* --- Récif obscur --- */
.reef-card { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-bottom: .8rem; }
.reef-slot { display: flex; align-items: center; gap: .4rem; min-width: 74px; min-height: 64px; padding: .4rem .7rem; border-radius: 16px; background: #fffaf0; color: #06283d; border: 4px solid transparent; justify-content: center; }
.reef-slot.riddle { max-width: 220px; cursor: pointer; }
.reef-slot.riddle small { font-size: .9rem; line-height: 1.25; }
.reef-slot.done { border-color: #52b788; }
.reef-slot.done .silhouette { display: none; }
.silhouette { font-size: 2.4rem; filter: brightness(0); opacity: .75; }
.silhouette.dim { filter: none; opacity: .3; }
.reef-slot .got { font-size: 2.2rem; }
.reef { background: linear-gradient(180deg, #0b3a57, #062236); }
.decor { position: absolute; z-index: 1; pointer-events: none; }
.sea-thing { position: absolute; z-index: 2; border: none; background: none; padding: 4px; line-height: 1; translate: -50% -50%; }
.sea-thing.found { z-index: 8; filter: drop-shadow(0 0 12px #7fd3ff); animation: kc-bounce .7s ease; }
.reef .kc-lens-ring { box-shadow: 0 0 40px 10px rgba(255, 240, 180, .15); }

/* --- Porte de nacre --- */
.gate-layout { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; align-items: start; }
@media (max-width: 760px) { .gate-layout { grid-template-columns: 1fr; } .door-model { width: 160px; margin: 0 auto; order: -1; } }
.gate-scene { --kc-ar: 1.2; background: radial-gradient(circle at 50% 50%, #1b6fa3, #04182a); display: grid; place-items: center; }
@media (max-width: 640px) { .gate-scene { --kc-ar: 1; } }
.door { position: relative; height: 90%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 8px #e9d8a6, 0 0 30px rgba(255, 255, 255, .3); touch-action: none; cursor: grab; }
.ring-layer { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transition: rotate .25s ease; }
.ring-layer.grab { transition: none; filter: brightness(1.12); }
.ring-layer svg, .ring-lines svg { width: 100%; height: 100%; display: block; }
.ring-lines { position: absolute; inset: 0; pointer-events: none; }
.ring-lines circle { fill: none; stroke: #8a6bd1; stroke-width: 1.5; }
.links { position: absolute; right: -4%; top: -4%; font-size: 2rem; }
.door.open { animation: door-open 1.6s ease forwards; }
@keyframes door-open { 50% { scale: 1.06; box-shadow: 0 0 0 8px #ffd166, 0 0 80px #fff; } 100% { scale: 1.06; box-shadow: 0 0 0 8px #ffd166, 0 0 80px #fff; } }
.door-model { background: #fffaf0; color: #06283d; border-radius: 18px; padding: .5rem; text-align: center; box-shadow: 0 8px 18px rgba(0, 0, 0, .3); }
.door-model svg { width: 100%; height: auto; display: block; border-radius: 50%; }
.door-model .model-title { font-weight: 700; margin-bottom: .3rem; }

/* ---------- Niveaux 8-9 et 9-10 ans ---------- */
.reef-card.count { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem 1rem; font-weight: 700; }
.limb-legend { display: inline-flex; gap: .8rem; font-size: 1.1rem; }
.limb-goal { padding: .2rem .7rem; border-radius: 999px; background: rgba(255, 209, 102, .2); }
.limb-net { opacity: .9; }