/* L'Agence des Chiens Détectives — thème polar rigolo */
:root {
    --kc-bg: radial-gradient(circle at 50% 0%, #6a4c93 0%, #3d2c5c 60%, #1f1533 100%);
    --kc-ink: #fffaf2;
    --kc-muted: #eadcff;
    --kc-card: #47346b;
    --kc-line: rgba(255, 209, 102, .35);
    --kc-accent: #ffd166;
    --kc-accent-2: #e63946;
    --kc-accent-ink: #3b2400;
    --kc-scene: #f6e7cf;
}

/* --- Carnet --- */
.notebook { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; padding: .5rem .8rem; margin-bottom: .8rem; border-radius: 18px; background: #fffaf0; color: #3b2a1a; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); position: relative; }
.nb-title { font-weight: 700; margin-right: .3rem; }
.nb-slot { width: 58px; height: 58px; border-radius: 12px; border: 3px dashed #c9b28d; display: grid; place-items: center; font-weight: 700; color: #b59c74; font-size: 1.4rem; background: #fff; }
.nb-slot.filled { border-style: solid; border-color: #52b788; }
.nb-slot svg { width: 48px; height: 48px; }
.witness { padding: .4rem .7rem; border-radius: 12px; background: #e8f7ee; font-weight: 600; }

/* --- Cuisine --- */
.kitchen { background: #f6e7cf; }
.k-wall { position: absolute; inset: 0 0 58% 0; background: repeating-linear-gradient(90deg, #f9d9a8 0 40px, #f3cc94 40px 80px); }
.k-counter { position: absolute; left: 0; right: 0; top: 42%; height: 12%; background: #a0622d; box-shadow: 0 8px 0 #7a4a20; }
.k-window { position: absolute; left: 44%; top: 4%; font-size: 3.5rem; opacity: .8; }
.k-decor { position: absolute; font-size: 2.2rem; translate: -50% -50%; pointer-events: none; }
.clue { position: absolute; width: 34px; height: 34px; padding: 0; border: none; background: none; translate: -50% -50%; opacity: .14; z-index: 2; transition: opacity .2s, scale .2s; }
.clue svg { width: 100%; height: 100%; }
.clue.lit { opacity: 1; scale: 1.7; z-index: 7; }
.clue.got { opacity: 0; transition: opacity .4s; }
.cover { position: absolute; z-index: 3; border: none; background: none; font-size: 3.4rem; padding: 0; translate: -50% -55%; transition: translate .6s ease, rotate .6s ease; }
.cover.moved { rotate: 20deg; opacity: .85; translate: 45% -95%; pointer-events: none; }
.kc-scene.party { width: min(100%, calc(42vh * var(--kc-ar))); }
.kitchen .k-decor { filter: saturate(.8); }

/* --- Suspects --- */
.paw-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: .8rem; position: relative; }
.pg { display: flex; align-items: center; gap: .2rem; background: rgba(255, 255, 255, .12); border-radius: 12px; padding: .2rem .5rem; }
.pg-paw svg, .pg-head svg { width: 38px; height: 38px; display: block; }
.pg-paw { background: #fffaf0; border-radius: 8px; }
.suspects { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.suspects.s6 { grid-template-columns: repeat(3, 1fr); }
.suspects.s10 { grid-template-columns: repeat(5, 1fr); }
.suspects.s12 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) { .suspects.s10, .suspects.s12 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .suspects, .suspects.s6 { grid-template-columns: repeat(2, 1fr); } .suspects.s10, .suspects.s12 { grid-template-columns: repeat(3, 1fr); } }
.suspect { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem; border-radius: 18px; border: 4px solid var(--kc-line); background: #fffaf0; color: #3b2a1a; transition: transform .35s, opacity .35s, filter .35s; }
.portrait svg { width: 100%; max-width: 110px; height: auto; display: block; }
.sname { font-weight: 700; }
.suspect.down { transform: perspective(500px) rotateX(70deg); opacity: .35; filter: grayscale(1); }
.suspect.caught { border-color: #e63946; box-shadow: 0 0 0 6px rgba(230, 57, 70, .4); animation: kc-bounce .7s ease 2; }

/* --- Fête --- */
.party { background: linear-gradient(180deg, #ffe8f0 0%, #ffd6e4 72%, #c98b5a 72%, #a96d3f 100%); }
.garland { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 1.6rem; letter-spacing: 1rem; }
.balloon { position: absolute; width: 7%; min-width: 34px; translate: -50% -50%; border: none; background: none; padding: 0; z-index: 2; animation: bob 3s ease-in-out infinite; }
.balloon svg { width: 100%; height: auto; display: block; }
.balloon.low { z-index: 1; width: 6%; }
.balloon.ticked::after { content: '✔'; position: absolute; left: 50%; top: 22%; translate: -50% 0; font-weight: 900; font-size: 1.3rem; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
@keyframes bob { 50% { translate: -50% -58%; } }
.gift { position: absolute; z-index: 3; translate: -50% -50%; font-size: 4.4rem; border: none; background: none; padding: 0; line-height: 1; transition: translate .6s ease, rotate .6s ease; }
.gift.moved { translate: 10% -20%; rotate: 25deg; }
.lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin-top: .9rem; padding: .8rem; border-radius: var(--kc-radius); background: #5a3818; border: 4px solid #e9c46a; }
.chest { font-size: 3rem; }
.dial { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .3rem .5rem; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.dial-label { font-size: 1.1rem; white-space: nowrap; }
.dial-num { width: 58px; height: 62px; display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; background: #fffaf0; color: #3b2a1a; border-radius: 10px; }
.dial-btn { width: 52px; height: 40px; border-radius: 10px; border: none; background: var(--kc-accent); color: var(--kc-accent-ink); font-size: 1.2rem; }
.lock.opened .chest { animation: kc-bounce .7s ease 2; font-size: 3.6rem; }