/* Developed by Slyness */
/* Whiskers et la Lune volée : personnages, échanges, sardines, nouvelles énigmes */

/* ---------- Compteur de sardines ---------- */
.sard {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 10px; border-radius: 23px;
  background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 2px rgba(244,201,93,.6);
  font-size: 26px; font-weight: 700; color: #ffe9b0; font-variant-numeric: tabular-nums;
}
.sard img { width: 56px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.sard.bump { animation: sardbump .5s cubic-bezier(.3,1.8,.6,1); }
@keyframes sardbump { 40% { transform: scale(1.25); box-shadow: inset 0 0 0 2px #fff4c4, 0 0 22px rgba(255,220,120,.8); } }
.fly.fish { width: 130px; filter: drop-shadow(0 0 14px rgba(200,230,255,1)); }

/* ---------- Dialogue : portrait de Whiskers ou du personnage ---------- */
#dialog .dpic { width: 150px; display: flex; align-items: flex-end; justify-content: center; }
#dialog .dpic img { width: 150px; }
#dialog.pose .dpic img, #dialog.npc .dpic img { width: auto; max-width: 170px; max-height: 200px; }
#dialog.pop .dpic img { animation: catpop .4s ease-out; }
#dialog.pop img { animation: none; }
#dialog.npc .say-bubble { box-shadow: 0 8px 24px rgba(0,0,0,.6), inset 0 0 0 3px #7c8fc4; }
#dialog.npc .say-bubble::before { border-right-color: #7c8fc4; }
#dialog.npc .say-bubble b { color: #34508f; }

/* ---------- Sprites ---------- */
.sprite.lay { transform: rotate(72deg); animation: none; }
.sprite.lay:hover { transform: rotate(72deg) scale(1.15); }
.sprite.plank { transform: rotate(-4deg); filter: drop-shadow(0 10px 8px rgba(0,0,0,.55)); }
.sprite.plank.appear { animation: plank .9s cubic-bezier(.3,1.4,.6,1); }
@keyframes plank { from { transform: translateX(-40%) rotate(-30deg); opacity: 0; } }
.sprite.npc {
  cursor: pointer; transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.5));
  animation: npcbreath 3.2s ease-in-out infinite; transition: filter .2s;
}
.sprite.npc:hover { filter: drop-shadow(0 0 10px rgba(190,215,255,.95)) drop-shadow(0 8px 8px rgba(0,0,0,.5)) brightness(1.08); }
@keyframes npcbreath { 50% { transform: scale(1.015, .985); } }
.sprite.npc.scared { animation: shiver .35s ease-in-out infinite; }
@keyframes shiver { 25% { transform: translateX(-2px) rotate(-1deg); } 75% { transform: translateX(2px) rotate(1deg); } }

/* ---------- Étang : lanternes éteintes / allumées ---------- */
/* Lanternes éteintes : la lumière est assombrie et désaturée sur place (pas de taches opaques) */
[data-scene=etang][data-state=unlit] .pond-off {
  display: block; inset: 0;
  backdrop-filter: brightness(.38) saturate(.15); -webkit-backdrop-filter: brightness(.38) saturate(.15);
  --m: radial-gradient(ellipse 3.2% 5.2% at 29.8% 64.5%, #000 35%, transparent 100%),
    radial-gradient(ellipse 3.2% 5.2% at 75.8% 64.5%, #000 35%, transparent 100%),
    radial-gradient(ellipse 3.4% 4.6% at 29.8% 77%, #000 30%, transparent 100%),
    radial-gradient(ellipse 3.4% 4.6% at 75.8% 74.8%, #000 30%, transparent 100%),
    radial-gradient(ellipse 2.2% 3.4% at 61.1% 57.6%, #000 30%, transparent 100%),
    radial-gradient(ellipse 2.2% 3.2% at 61.1% 62%, #000 30%, transparent 100%),
    radial-gradient(ellipse 1.8% 2.6% at 40.9% 61.3%, #000 30%, transparent 100%),
    radial-gradient(ellipse 1.8% 2.6% at 57.9% 60.6%, #000 30%, transparent 100%);
  -webkit-mask: var(--m); mask: var(--m);
}
/* Nuit plus sombre tant que les lanternes ne sont pas allumées */
[data-scene=etang][data-state=unlit] .pond-dark {
  display: block; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(rgba(96,108,170,.9), rgba(70,80,140,.88));
}
[data-scene=etang][data-state=lit] .pond-glow {
  display: block; inset: 0; mix-blend-mode: screen; animation: flicker 3s infinite;
  background:
    radial-gradient(circle at 29.8% 64%, rgba(255,190,90,.38), transparent 11%),
    radial-gradient(circle at 75.8% 64%, rgba(255,190,90,.38), transparent 11%),
    radial-gradient(circle at 61% 58%, rgba(255,190,90,.25), transparent 7%),
    radial-gradient(ellipse 30% 14% at 52% 82%, rgba(255,170,80,.16), transparent 100%);
}
@keyframes flicker { 0%,100% { opacity: .85; } 20% { opacity: 1; } 35% { opacity: .7; } 50% { opacity: .95; } 70% { opacity: .75; } 85% { opacity: 1; } }

/* ---------- Échanges avec les personnages ---------- */
.modal-card.trade { width: 940px; text-align: left; }
.modal-card.trade h3 { text-align: left; margin-left: 270px; }
.tr-head { display: flex; gap: 30px; align-items: flex-end; margin-top: -10px; }
.tr-pic { width: 240px; height: 260px; object-fit: contain; object-position: bottom; margin-top: -70px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.6)); animation: npcbreath 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.tr-say { position: relative; flex: 1; padding: 18px 26px 20px; border-radius: 22px; background: #fffaf0; color: #2a1606; box-shadow: inset 0 0 0 3px #7c8fc4, 0 8px 20px rgba(0,0,0,.45); margin-bottom: 20px; }
.tr-say::before { content: ""; position: absolute; left: -16px; bottom: 30px; border: 16px solid transparent; border-right-color: #7c8fc4; border-left: 0; }
.tr-say small { display: block; font-size: 17px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #5a6fa8; }
.tr-say p { margin: 6px 0 0; font-size: 25px; line-height: 1.35; font-weight: 500; }
.tr-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.tr-row {
  display: flex; align-items: center; gap: 18px; padding: 10px 14px 10px 12px; border-radius: 18px;
  background: rgba(255,240,210,.08); box-shadow: inset 0 0 0 2px rgba(244,201,93,.35);
}
.tr-row.done { opacity: .55; }
.tr-item { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.tr-talk { display: grid; place-items: center; font-size: 40px; }
.tr-label { flex: 1; font-size: 25px; font-weight: 600; color: #ffeccc; }
.tr-price { display: flex; align-items: center; gap: 6px; font-size: 26px; font-weight: 700; color: var(--gold); }
.tr-price img { width: 60px; }
.tr-row .btn { min-width: 120px; }
.tr-row .btn:disabled { filter: grayscale(.7) brightness(.75); cursor: default; transform: none; }
.tr-locked { margin: 0; padding: 16px; border-radius: 16px; font-size: 24px; text-align: center; color: #f3dfbf; background: rgba(0,0,0,.25); }
.tr-tip { margin: 22px 0 0; font-size: 19px; color: #e1c99f; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-tip img { width: 40px; }
.tr-tip b { color: var(--gold); font-size: 22px; }

/* ---------- Intro, menu, fin ---------- */
#intro-cat { width: auto !important; height: 230px; margin-top: -190px !important; }
#intro-cat.in { animation: catin .6s cubic-bezier(.3,1.5,.6,1); }
@keyframes catin { from { opacity: 0; transform: translateY(30px) scale(.8); } }
.menu-cat { width: 440px; }
.menu-box h1 small { font-size: 76px; margin-left: 60px; }
.end-bg { filter: brightness(.9) saturate(.95); }
.end-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,8,25,.65), transparent 40%, transparent 55%, rgba(5,8,25,.7)); }
.end-cat { width: 430px; left: 70px; bottom: 20px; animation: endcat 4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(200,220,255,.35)) drop-shadow(0 30px 30px rgba(0,0,0,.5)); }
@keyframes endcat { 50% { transform: translateY(-10px) rotate(-1deg); } }
.end-box h2 { font-size: 68px; line-height: 1.05; font-family: "Caveat", cursive; color: #3b4f9a; text-shadow: 0 3px 0 #cfd9ff; }
.end-box p { font-size: 23px; }

/* ---------- Pots de fleurs ---------- */
.pots-row { display: flex; gap: 14px; justify-content: center; padding: 0 20px; transition: filter .4s; }
.pots-row.solved { filter: drop-shadow(0 0 24px rgba(140,255,170,.8)); }
.fpot { width: 128px; background: none; display: flex; flex-direction: column; align-items: center; transition: transform .2s; }
.fpot:hover { transform: translateY(-6px); }
.fpot.sel { transform: translateY(-16px); }
.fpot.sel .terra { box-shadow: 0 0 0 4px #ffe066, 0 0 24px rgba(255,220,100,.8); }
.fl svg { width: 110px; height: 132px; display: block; margin-bottom: -10px; position: relative; z-index: 1; }
.terra {
  position: relative; z-index: 2;
  width: 112px; height: 96px; display: grid; place-items: center;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
  background: linear-gradient(180deg, #e07c46 0 18%, #b8552a 18% 22%, #cf6a39 22%);
  border-radius: 6px;
}
.terra span { margin-top: 24px; padding: 2px 8px; border-radius: 6px; background: #fff7e2; color: #4a2a0c; font-family: "Caveat", cursive; font-size: 24px; font-weight: 700; }
.shelf-plank { height: 22px; margin: 0 auto; width: 860px; border-radius: 4px; background: linear-gradient(180deg, #8a4f22, #5a2e10); box-shadow: 0 12px 18px rgba(0,0,0,.45); }

/* ---------- Panneau à outils ---------- */
.pegboard {
  position: relative; width: 860px; height: 290px; margin: 0 auto 22px; border-radius: 12px;
  background: radial-gradient(circle, #6b4826 2.5px, transparent 3.5px) 0 0 / 26px 26px, linear-gradient(180deg, #d9a86a, #c18c4c);
  box-shadow: inset 0 0 0 6px #8a5a2c, 0 14px 26px rgba(0,0,0,.5); transition: box-shadow .4s;
}
.pegboard.solved { box-shadow: inset 0 0 0 6px #8a5a2c, 0 0 0 5px #9dffbf, 0 0 50px rgba(130,255,180,.7); }
.outline { position: absolute; cursor: pointer; }
.outline svg { display: block; }
.outline svg.ghost * { fill: rgba(60,35,15,.55) !important; stroke: rgba(40,20,5,.6); stroke-width: 2; stroke-dasharray: 6 4; }
.outline:hover svg.ghost * { fill: rgba(90,55,20,.65) !important; }
.outline.filled { animation: appear .5s ease-out; filter: drop-shadow(0 4px 3px rgba(0,0,0,.45)); }
.tooltray { display: flex; flex-wrap: wrap; gap: 18px 26px; justify-content: center; align-items: center; min-height: 120px; padding: 16px; border-radius: 16px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 2px rgba(244,201,93,.3); }
.tool { cursor: grab; touch-action: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.5)); transition: filter .2s; }
.tool:hover { filter: drop-shadow(0 0 10px rgba(255,230,140,.9)); }
.tool.sel { filter: drop-shadow(0 0 0 #ffe066) drop-shadow(0 0 12px rgba(255,220,100,1)); }
.tool.drag { position: relative; z-index: 5; cursor: grabbing; transition: none; }
.tool svg { display: block; }

/* ---------- Mémoire ---------- */
.memory { display: grid; grid-template-columns: repeat(4, 150px); gap: 14px; justify-content: center; perspective: 1000px; transition: filter .4s; }
.memory.solved { filter: drop-shadow(0 0 24px rgba(140,255,170,.7)); }
.mcard { position: relative; height: 150px; background: none; padding: 0; transform-style: preserve-3d; transition: transform .45s; }
.mcard.flip { transform: rotateY(180deg); }
.mback, .mface { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mback { background: radial-gradient(circle at 50% 50%, #ffe39a 0 14px, transparent 15px), repeating-linear-gradient(45deg, #3c4f96 0 12px, #33437f 12px 24px); box-shadow: inset 0 0 0 4px #f4c95d, 0 6px 12px rgba(0,0,0,.5); }
.mcard:hover .mback { filter: brightness(1.15); }
.mface { transform: rotateY(180deg); display: grid; place-items: center; background: #fff7e2; box-shadow: inset 0 0 0 4px #e0b25a, 0 6px 12px rgba(0,0,0,.5); }
.mface img { width: 104px; height: 104px; object-fit: contain; }
.mcard.match .mface { box-shadow: inset 0 0 0 4px #6fd690, 0 0 20px rgba(120,255,160,.6); }

/* ---------- Lanternes ---------- */
.lpond { position: relative; width: 760px; height: 430px; margin: 0 auto 20px; }
.lwater { position: absolute; left: 18%; right: 18%; top: 22%; bottom: 22%; border-radius: 50%; background: radial-gradient(ellipse, #22306a, #0c1435 70%); box-shadow: 0 0 0 10px #4a5a3a, 0 0 0 16px #3a4a2c, inset 0 0 40px #000; transition: box-shadow .8s, background .8s; }
.lpond.solved .lwater { background: radial-gradient(ellipse, #6a5a3a, #1c2448 70%); box-shadow: 0 0 0 10px #4a5a3a, 0 0 0 16px #3a4a2c, 0 0 80px rgba(255,200,100,.5), inset 0 0 40px rgba(255,190,90,.3); }
.lantern { position: absolute; width: 80px; height: 120px; translate: -50% -50%; background: none; display: flex; flex-direction: column; align-items: center; transition: transform .2s; }
.lantern:hover { transform: scale(1.06); }
.lroof { width: 80px; height: 24px; background: #8c8a84; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.lbox { position: relative; width: 50px; height: 46px; background: #a8a59c; box-shadow: inset 0 0 0 4px #77746c; display: grid; place-items: center; }
.lbox b { width: 26px; height: 26px; border-radius: 4px; background: #232328; transition: background .3s, box-shadow .3s; }
.lfoot { width: 30px; height: 40px; background: linear-gradient(90deg, #8c8a84, #a8a59c, #8c8a84); }
.lantern.on .lbox b { background: radial-gradient(circle, #fff6c8, #ffb847 70%); box-shadow: 0 0 22px 10px rgba(255,190,80,.7); animation: flicker 2s infinite; }

/* ---------- Pigeons ---------- */
.pigeons { display: flex; gap: 30px; justify-content: center; margin: 10px 0 24px; transition: filter .4s; }
.pigeons.solved { filter: drop-shadow(0 0 24px rgba(140,255,170,.7)); }
.pigeon { width: 160px; height: 210px; padding: 10px; border-radius: 22px; background: rgba(255,240,210,.08); box-shadow: inset 0 0 0 2px rgba(244,201,93,.35); transition: background .2s; }
.pigeon:hover { background: rgba(255,240,210,.16); }
.pigeon img { width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(var(--hue)) saturate(1.4) drop-shadow(0 6px 6px rgba(0,0,0,.5)); transform-origin: 50% 100%; }
.pigeon { position: relative; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--col) 45%, transparent); }
.pigeon.sing { background: color-mix(in srgb, var(--col) 38%, transparent); box-shadow: inset 0 0 0 4px var(--col), 0 0 34px var(--col); }
.pnote { position: absolute; left: 50%; top: 4px; translate: -50% 0; font-size: 44px; font-weight: 700; color: var(--col); text-shadow: 0 0 12px var(--col); opacity: 0; pointer-events: none; }
.pigeon.sing .pnote { animation: pnote .7s ease-out; }
@keyframes pnote { 0% { opacity: 0; transform: translateY(20px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-36px); } }
.pigeon.sing img { animation: sing .5s ease-out; }
@keyframes sing { 30% { transform: scale(1.12, .92) translateY(-14px) rotate(-5deg); } 60% { transform: scale(.96, 1.06); } }
.pdots { display: flex; gap: 14px; justify-content: center; }
.pdots i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); transition: background .3s; }
.pdots i.on { background: #ffd34d; box-shadow: 0 0 12px rgba(255,210,80,.9); }

/* ---------- Girouette ---------- */
.vdial { position: relative; width: 400px; height: 400px; margin: 0 auto 22px; border-radius: 50%; background: radial-gradient(circle, #1f2c5a, #0b1230 70%); box-shadow: 0 0 0 10px #2a2420, 0 0 0 14px var(--gold2), 0 20px 40px rgba(0,0,0,.6); transition: box-shadow .4s; }
.vdial.solved { box-shadow: 0 0 0 10px #2a2420, 0 0 0 14px #9dffbf, 0 0 60px rgba(130,255,180,.8); }
.vlab { position: absolute; translate: -50% -50%; font-family: Georgia, serif; font-size: 22px; color: #9fb0e0; }
.vlab.big { font-size: 40px; font-weight: 700; color: #ffe7b0; }
.varrow { position: absolute; left: 50%; top: 50%; width: 60px; height: 300px; margin: -150px 0 0 -30px; transition: transform .35s cubic-bezier(.3,1.4,.6,1); }
.varrow svg { width: 100%; height: 100%; filter: drop-shadow(0 0 2px #9fb0e0); }
.vcoq { position: absolute; left: 50%; top: 64px; translate: -50% 0; font-size: 46px; filter: brightness(.35) drop-shadow(0 0 2px #cfd8ff); }
.vpin { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c0, var(--gold) 45%, #8a5a1c); }
.vslots { display: flex; gap: 14px; justify-content: center; margin-bottom: 22px; }
.vslots i { width: 70px; height: 56px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 28px; font-weight: 700; background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 2px rgba(244,201,93,.4); }
.vslots i.on { color: #3a2a0a; background: linear-gradient(180deg, #ffe39a, #e0a93f); box-shadow: 0 0 12px rgba(255,210,100,.7); }
.vctrl { display: flex; gap: 20px; justify-content: center; align-items: center; }
.vctrl .btn.small { font-size: 32px; width: 80px; }
.vreset { margin-top: 18px; }

/* ---------- Note à l'envers ---------- */
.paper.mirror { transform: scaleX(-1) rotate(1.2deg); margin: 0 auto; }
.pz-sub.after { margin: 26px 0 0; }

/* ---------- Boîte à musique ---------- */
.comb { display: flex; gap: 8px; justify-content: center; align-items: flex-start; width: 760px; height: 230px; margin: 0 auto; padding: 24px 30px 0; border-radius: 16px; background: linear-gradient(180deg, #5a2e12, #3a1c0a); box-shadow: inset 0 0 0 4px #c79a4a, 0 12px 24px rgba(0,0,0,.6); }
.tooth { position: relative; flex: 1; height: var(--len); border-radius: 0 0 14px 14px; background: linear-gradient(90deg, #8c939b, #f2f5f8 45%, #aab1b8); box-shadow: 0 4px 6px rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; color: #3a3f45; font-size: 22px; font-weight: 700; transform-origin: top; }
.tooth.down { animation: twang .5s ease-out; }
@keyframes twang { 15% { transform: rotate(3deg); background: linear-gradient(90deg, #c9a24a, #fff3c8 45%, #d9b25a); } 40% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } }

/* ---------- Télescope ---------- */
.scope.aim { position: relative; cursor: grab; touch-action: none; }
.scope.aim:active { cursor: grabbing; }
.cross { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.35); pointer-events: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: rgba(255,255,255,.35); }
.cross::before { left: 50%; top: -14px; bottom: -14px; width: 1.5px; }
.cross::after { top: 50%; left: -14px; right: -14px; height: 1.5px; }
.aimpad { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; margin-right: 20px; }
.aimpad .btn.small { padding: 6px 14px; }

/* Les objets à ramasser et les personnages passent au-dessus des zones cliquables */
.hot { z-index: 2; }
.sprite.pick, .sprite.npc { z-index: 3; }
.sprite.lay { filter: drop-shadow(0 0 8px rgba(255,240,190,.75)) drop-shadow(0 4px 4px rgba(0,0,0,.45)); }
.sprite svg { display: block; width: 100%; height: auto; }