/* Vénus — les trois mini-jeux : « Le refrain des Oracles » (js/oracles.js), « Le labyrinthe des
   Gorgones » (js/gorgons.js) et « Le jeu de la fleur » (js/flowers.js). Le cadre vient de
   css/components/game.css.
   États : #oracles-arena[data-phase] (idle, sing, shoot, pause, won), classe « marked » ;
           #gorgons-arena[data-phase] (play, won), classe « caught » ;
           cases .gz-cell (wall, gaze, gorgon gz-n|s|e|w, me, exit, start, oracle, chest, open) ;
           cases .fl-cell (on), grille .growing pendant la pousse. */

/* ---------- Le refrain des Oracles ---------- */
.oracles-arena { position: relative; aspect-ratio: 16 / 8; margin: 18px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #050a0c; user-select: none; -webkit-user-select: none; }
.oracles-arena > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.75) hue-rotate(-12deg); }
.oracles-arena.marked { animation: oracles-marked .7s; }
@keyframes oracles-marked { 30% { box-shadow: inset 0 0 0 200px rgba(255, 70, 60, .22); } }
.oracles-arena[data-phase="won"] > img { filter: brightness(.55) saturate(.9); }
/* le Templier, en haut, et le bassin de Lumière au centre */
/* le Templier, au fond : un dôme de bouclier translucide */
.oracles-templar { position: absolute; left: 50%; top: 3%; width: 150px; height: 84px; margin-left: -75px; border: 1px solid rgba(216, 255, 249, .45); border-bottom: 0; border-radius: 75px 75px 6px 6px;
  background: radial-gradient(ellipse at 50% 85%, rgba(216, 255, 249, .45), rgba(127, 240, 224, .14) 45%, rgba(127, 240, 224, .04) 70%), repeating-linear-gradient(60deg, rgba(216, 255, 249, .08) 0 1px, transparent 1px 9px);
  box-shadow: 0 0 30px rgba(127, 240, 224, .25), inset 0 0 24px rgba(216, 255, 249, .25); }
.oracles-arena[data-phase="won"] .oracles-templar { opacity: .25; box-shadow: none; }
.oracles-pool { position: absolute; left: 50%; top: 46%; width: 120px; height: 30px; margin-left: -60px; border-radius: 50%; background: radial-gradient(ellipse, rgba(232, 244, 255, .75), rgba(127, 240, 224, .15) 60%, transparent 70%); }
.oracles-field { position: absolute; inset: 0; }
/* un Oracle (dessiné par js/oracles.js) : une croix de lumière pixelisée, comme dans Destiny 2.
   Le point (--x, --y) est son cœur ; le dessin monte bien plus haut qu'il ne descend. */
.oracle { position: absolute; left: var(--x); top: var(--y); width: 116px; height: 174px; padding: 0; transform: translate(-50%, -67%); border: 0; background: none; color: #ffd98a; cursor: crosshair; animation: oracle-in .45s ease-out; }
.oracle[hidden] { display: none; }
.oracle svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px #fff6d8) drop-shadow(0 0 10px rgba(255, 214, 128, .9)) drop-shadow(0 0 28px rgba(255, 190, 90, .55)); }
.oracle .or-bar { fill: #fff3cf; }
.oracle .or-px { fill: #fffbe9; }
.oracle .or-heart { fill: #fff; }
.oracle .or-floor { fill: rgba(255, 214, 128, .28); filter: blur(3px); }
.oracle .or-bars { animation: oracle-flicker 1.9s steps(1) infinite; }
.oracle .or-cloud { animation: oracle-shimmer 1.2s steps(3) infinite; }
.oracle .or-core { animation: oracle-pulse 1.6s ease-in-out infinite; transform-origin: 0 0; }
.oracle:nth-child(2n) .or-bars { animation-delay: -.7s; } .oracle:nth-child(3n) .or-bars { animation-delay: -1.3s; }
/* pendant le refrain : on ne peut pas encore tirer */
.oracle.waiting { cursor: not-allowed; }
.oracle:not(.waiting):hover svg, .oracle:not(.waiting):focus-visible svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px rgba(255, 230, 160, 1)) drop-shadow(0 0 40px rgba(255, 200, 110, .8)); }
.oracle:focus-visible { outline: 1px dashed rgba(255, 255, 255, .6); outline-offset: 2px; }
/* détruit : la croix éclate en lumière */
.oracle.shatter { pointer-events: none; animation: oracle-break .52s ease-out forwards; }
.oracle.shatter .or-bars { animation: oracle-split .52s ease-out forwards; }
@keyframes oracle-in { 0% { transform: translate(-50%, -67%) scale(.15, 1.6); opacity: 0; filter: brightness(3); } 60% { transform: translate(-50%, -67%) scale(1.08, .96); opacity: 1; } }
@keyframes oracle-flicker { 0%, 100% { opacity: 1; } 18% { opacity: .82; } 19% { opacity: 1; transform: translateX(.6px); } 47% { transform: none; } 63% { opacity: .9; transform: translateX(-.8px); } 64% { transform: none; } }
@keyframes oracle-shimmer { 0% { opacity: .95; } 50% { opacity: .65; } 100% { opacity: .9; } }
@keyframes oracle-pulse { 50% { transform: scale(1.12); opacity: .85; } }
@keyframes oracle-break { 0% { filter: brightness(2.6); } 100% { transform: translate(-50%, -67%) scale(1.5, .2); opacity: 0; filter: brightness(3) blur(2px); } }
@keyframes oracle-split { to { transform: scaleX(2.2); opacity: 0; } }

/* ---------- Le labyrinthe des Gorgones ---------- */
.gorgons-arena { margin: 18px 24px 0; padding: 10px; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0%, rgba(127, 240, 224, .06), transparent 60%), #05080a; outline: none; }
.gorgons-arena:focus-visible { border-color: var(--vault); box-shadow: 0 0 0 1px var(--vault); }
.gorgons-arena.caught { animation: gorgons-caught .7s; }
@keyframes gorgons-caught { 30% { box-shadow: inset 0 0 0 400px rgba(232, 244, 255, .25); } }
.gorgons-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; max-width: 860px; margin: 0 auto; }
.gz-cell { position: relative; aspect-ratio: 1; background: #1f2b2a; cursor: pointer; }
.gz-cell.wall { background: linear-gradient(135deg, #090b0c, #040505); cursor: default; }
.gz-cell.gaze { background: #33403f; box-shadow: inset 0 0 10px rgba(232, 244, 255, .28); }
.gz-cell.start { background: #18282a; }
.gz-cell.exit::after { content: ''; position: absolute; inset: 18%; border: 2px solid var(--vault); box-shadow: 0 0 12px var(--vault); }
.gz-cell.chest::after { content: ''; position: absolute; inset: 26% 18%; background: linear-gradient(180deg, #e8c87a, #8a6f2c); border: 1px solid #fff1cf; opacity: .55; }
.gz-cell.chest.open::after { opacity: 1; box-shadow: 0 0 16px 4px rgba(255, 241, 207, .8); }
.gz-cell.oracle::before { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, #ff6a3c 60%, transparent 72%); box-shadow: 0 0 10px rgba(255, 106, 60, .8); }
/* une Gorgone : un losange argenté, un œil, une flèche qui montre où elle regarde */
.gz-cell.gorgon::before { content: ''; position: absolute; inset: 10%; z-index: 1; background: linear-gradient(135deg, #ffffff, #b9c6cc 60%, #6f7f86); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 6px rgba(232, 244, 255, .9)); animation: gorgon-tick 1s steps(1) infinite; }
.gz-cell.gorgon::after { content: ''; position: absolute; left: 50%; top: 50%; z-index: 2; width: 26%; height: 26%; margin: -13% 0 0 -13%; border-radius: 50%; background: #ff3a2c; box-shadow: 0 0 8px #ff3a2c; }
.gz-cell.gz-e::after { transform: translateX(45%); } .gz-cell.gz-w::after { transform: translateX(-45%); }
.gz-cell.gz-s::after { transform: translateY(45%); } .gz-cell.gz-n::after { transform: translateY(-45%); }
@keyframes gorgon-tick { 50% { filter: drop-shadow(0 0 10px rgba(232, 244, 255, 1)); } }
/* le Gardien */
.gz-cell.me::after { content: ''; position: absolute; inset: 16%; z-index: 3; background: linear-gradient(135deg, #fff1cf, #e8c87a); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 12px #e8c87a; }
.gorgons-arena[data-phase="won"] .gz-cell.exit { background: rgba(127, 240, 224, .25); }
.gorgons-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 24px 0; }
.gorgons-pad .d-btn { min-width: 52px; justify-content: center; }

/* ---------- Le jeu de la fleur ---------- */
.fleurs-forms { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.fleurs-forms li { padding: 6px 12px; border: 1px solid var(--line); font-size: .82rem; color: var(--muted); transition: color .4s, border-color .4s, background .4s; }
.fleurs-forms li b { color: var(--pearl); }
.fleurs-forms li.done { border-color: var(--garden); background: rgba(155, 227, 122, .1); color: var(--garden-hi); }
.fleurs-forms li.done { font-weight: 600; }
.fl-shape { display: inline-grid; grid-template-columns: repeat(var(--cols), 9px); gap: 2px; margin-right: 10px; vertical-align: middle; }
.fl-shape i { width: 9px; height: 9px; background: rgba(155, 227, 122, .1); }
.fl-shape i.on { border-radius: 50%; background: #e2ffd2; box-shadow: 0 0 4px rgba(155, 227, 122, .8); }
.fl-cell:disabled { opacity: 1; }
.fleurs-wrap { margin: 18px 24px 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--garden) 30%, transparent); background: radial-gradient(ellipse at 50% 100%, rgba(155, 227, 122, .08), transparent 60%), #060a06; }
.fleurs-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 2px; max-width: 900px; margin: 0 auto; }
.fl-cell { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: #0f160e; cursor: pointer; transition: background .2s; }
.fl-cell:disabled { cursor: default; }
.fl-cell:not(:disabled):hover, .fl-cell:not(:disabled):focus-visible { background: #1d2a19; outline: none; }
.fl-cell.on { background: #13200f; }
.fl-cell.on::before { content: ''; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff7c9 0 16%, transparent 18%), radial-gradient(circle at 50% 18%, #e2ffd2 0 22%, transparent 24%), radial-gradient(circle at 82% 50%, #e2ffd2 0 22%, transparent 24%), radial-gradient(circle at 50% 82%, #e2ffd2 0 22%, transparent 24%), radial-gradient(circle at 18% 50%, #e2ffd2 0 22%, transparent 24%);
  filter: drop-shadow(0 0 4px rgba(155, 227, 122, .8)); }
.fleurs-grid.growing .fl-cell.on::before { filter: drop-shadow(0 0 6px rgba(155, 227, 122, 1)); }

@media (max-width: 680px) {
  .oracles-arena, .gorgons-arena, .fleurs-wrap, .gorgons-pad { margin-inline: 16px; }
  .oracles-arena { aspect-ratio: 4 / 3.4; }
  .oracle { width: 78px; height: 117px; }
  .oracles-templar { width: 96px; height: 54px; margin-left: -48px; }
  .gorgons-arena, .fleurs-wrap { padding: 6px; }
  .gorgons-grid, .fleurs-grid { gap: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .oracle, .oracle .or-bars, .oracle .or-cloud, .oracle .or-core, .gz-cell.gorgon::before, .oracles-arena.marked, .gorgons-arena.caught { animation: none; }
}