/* La Mesa de l'écho — mini-jeu « Le Murmure » (js/whisper.js) : corniches, fléaux, Corrompus,
   coffres cachés. Le cadre vient de css/components/game.css.
   L'état est porté par #whisper-arena : data-state (idle, run, won, lost), data-kind
   (jump, room, boss), classe is-locked tant que le portail est fermé. */

.whisper-arena { position: relative; aspect-ratio: 16 / 8.4; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #05060c; user-select: none; -webkit-user-select: none; }
.whisper-arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.45) saturate(.9); transition: filter .8s; }
.whisper-arena[data-state="won"] > img { filter: brightness(.8); }
.whisper-arena[data-state="lost"] > img, .whisper-arena.is-locked > img { filter: brightness(.22) saturate(.3); }
.whisper-arena.is-locked::before { content: 'Portail fermé'; position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-size: .8rem; font-weight: 800; letter-spacing: .4em; text-transform: uppercase; color: var(--faint); }
.whisper-field { position: absolute; inset: 0; cursor: crosshair; }
/* le chrono : un trait qui se vide */
.whisper-arena::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--taken), #fff); transform-origin: 0 50%; transform: scaleX(var(--time, 0)); transition: transform .12s linear; }
.whisper-arena.ouch { animation: wh-ouch .35s; }
@keyframes wh-ouch { 30% { box-shadow: inset 0 0 0 200px rgba(159, 232, 255, .25); } }

.ledge, .blight, .taken, .cache { position: absolute; left: var(--x); top: var(--y); padding: 0; transform: translate(-50%, -50%); border: 0; background: none; cursor: pointer; }
/* corniche : une dalle ; allumée pendant la démonstration, puis à retrouver */
.ledge { width: 15%; height: 9%; background: rgba(20, 24, 40, .82); border: 1px solid rgba(231, 235, 245, .22); transition: background .15s, border-color .15s, box-shadow .15s, opacity .2s; opacity: .55; }
.ledge.lit { opacity: 1; background: rgba(159, 232, 255, .9); border-color: #fff; box-shadow: 0 0 22px 4px rgba(159, 232, 255, .8); }
.ledge.next { opacity: 1; border-color: rgba(231, 235, 245, .7); }
.ledge.next:hover, .ledge.next:focus-visible { outline: 0; background: rgba(231, 235, 245, .3); }
.ledge.done { opacity: 1; background: rgba(255, 243, 189, .5); border-color: var(--sulfur-hi); }
.ledge:disabled { cursor: default; }
/* fléau : une bulle noire au liseré blanc */
.blight { width: 17%; aspect-ratio: 1; z-index: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 0, 0, .92) 0 58%, rgba(0, 0, 0, .5) 66%, transparent 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 26px 2px rgba(159, 232, 255, .5); animation: blight 3s ease-in-out infinite; }
@keyframes blight { 50% { transform: translate(-50%, -50%) scale(1.05); } }
.blight.struck { box-shadow: inset 0 0 0 2px #fff, 0 0 40px 10px rgba(255, 255, 255, .8); }
/* Corrompu : une silhouette noire, deux points blancs */
.taken { width: 38px; height: 46px; z-index: 2; }
.taken::before { content: ''; position: absolute; inset: 0; background: #000; clip-path: polygon(50% 0, 78% 18%, 72% 46%, 100% 100%, 0 100%, 28% 46%, 22% 18%); filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(159, 232, 255, .8)); }
.taken::after { content: ''; position: absolute; left: 50%; top: 22%; width: 12px; height: 4px; margin-left: -6px; background: radial-gradient(circle at 2px 2px, #fff 0 2px, transparent 2.5px), radial-gradient(circle at 10px 2px, #fff 0 2px, transparent 2.5px); }
.taken--aspect { width: 72px; height: 88px; }
.taken--aspect::after { top: 20%; transform: scale(1.8); }
.taken.struck::before { background: #fff; }
.taken:focus-visible, .blight:focus-visible, .ledge:focus-visible, .cache:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* coffre caché : presque rien */
.cache { width: 26px; height: 20px; z-index: 3; border: 1px solid rgba(255, 243, 189, .28); background: rgba(255, 243, 189, .06); opacity: .5; transition: opacity .3s, box-shadow .3s; }
.cache:hover, .cache:focus-visible { opacity: 1; box-shadow: 0 0 16px rgba(255, 243, 189, .8); }
.game-hud .hud-count.hud-time { min-width: 3.4em; color: var(--pearl); font-size: 1rem; }

@media (max-width: 680px) {
  .whisper-arena { margin-inline: 16px; aspect-ratio: 4 / 4.4; }
  .ledge { width: 22%; height: 8%; }
  .blight { width: 26%; }
}
@media (prefers-reduced-motion: reduce) {
  .blight, .whisper-arena.ouch { animation: none; }
}