*{box-sizing:border-box}html,body{height:100%;margin:0;background:#111;font-family:Inter,system-ui,Arial;overflow:hidden}#viewport{position:relative;width:100vw;height:100vh;overflow:hidden}#world{position:absolute;width:13243px;height:9604px;background:url('background.webp') center/cover no-repeat}#player{position:absolute;width:100px;height:100px;left:5940px;top:3840px;background-image:url('sprite/player_spritesheet_chloe.png');background-size:300px 400px;z-index:200}#interactionBox{position:fixed;left:50%;transform:translateX(-50%);bottom:8%;min-width:280px;max-width:80%;padding:12px 16px;color:#fff;border-radius:8px;font-size:18px;text-align:center;z-index:9999;visibility:hidden}#interactionHint{position:fixed;left:50%;transform:translateX(-50%);bottom:18%;padding:8px 14px;color:#fff;border-radius:6px;font-size:16px;z-index:9998;visibility:hidden} .zone{pointer-events:none} body.debug-on .zone{pointer-events:auto; border:2px dashed rgba(255,0,255,0.6); background:rgba(255,0,255,0.06)} .ghost{position:absolute;width:100px;height:100px;background-size:300px 400px;opacity:0.9;filter:grayscale(10%);z-index:100} /* hat overlay styling */ #chapeauOverlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:300;background-size:300px 400px;background-repeat:no-repeat;display:none}
/* --- Effet de flash photo --- */
.flash-effect {
  animation: flashEffect 0.4s ease;
}
@keyframes flashEffect {
  0% { filter: brightness(1); }
  30% { filter: brightness(2.5); }
  100% { filter: brightness(1); }
}

/* --- Appareil photo clignotant --- */
.camera-blink {
  animation: blinkCamera 0.3s steps(1, end) infinite;
}
@keyframes blinkCamera {
  0%, 100% { content: url('assets/appareil_1.png'); }
  50% { content: url('assets/appareil_2.png'); }
}