/* Le Cœur pâle — les deux mini-jeux : la dissection de Vérité (js/verity.js) et les symboles de
   Double destinée (js/duality.js). Le cadre commun (.game, .game-hud…) est dans
   css/components/game.css. */

/* ---------- Vérité : trois statues ---------- */
.verity { position: relative; padding: clamp(14px, 2.4vw, 24px); background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(255, 143, 177, .12), transparent 70%), linear-gradient(180deg, #120c18, #0a0810); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.verity.marked { animation: verity-mark .9s ease; }
@keyframes verity-mark { 30% { box-shadow: inset 0 0 0 2px rgba(255, 90, 120, .8), inset 0 0 60px rgba(255, 60, 100, .35); } }
.verity-statues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2vw, 22px); }
.vs-statue { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 16px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); transition: border-color .4s, box-shadow .4s; }
.vs-statue.is-free { border-color: rgba(127, 240, 200, .7); box-shadow: 0 0 22px rgba(127, 240, 200, .18); }
.vs-side { margin: 0; font-size: .6rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.vs-inside { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; border: 1px dashed rgba(255, 143, 177, .5); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--edge-hi, #ffe1ea); }
.vs-inside .vs-shape { width: 20px; height: 20px; }
.vs-solid { width: clamp(70px, 12vw, 108px); aspect-ratio: 64 / 60; }
.vs-solid svg { width: 100%; height: 100%; fill: none; stroke: #f4ead0; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(244, 234, 208, .45)); }
.is-free .vs-solid svg { stroke: #c9ffe9; filter: drop-shadow(0 0 8px rgba(127, 240, 200, .6)); }
.vs-name { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pearl); }
.vs-parts { display: flex; gap: 8px; }
.vs-part { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(6, 6, 14, .6); cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.vs-part:hover:not(:disabled), .vs-part:focus-visible { border-color: var(--edge, #ff8fb1); transform: translateY(-2px); }
.vs-part.is-picked { border-color: #fff; background: rgba(255, 143, 177, .25); box-shadow: 0 0 14px rgba(255, 143, 177, .6); }
.vs-part:disabled { cursor: default; opacity: .7; }
.vs-shape { width: 24px; height: 24px; fill: rgba(244, 234, 208, .15); stroke: #f4ead0; stroke-width: 1.6; }
.vs-shape--tri { stroke: #ffd68a; fill: rgba(255, 214, 138, .18); }
.vs-shape--carre { stroke: #9fd8ff; fill: rgba(159, 216, 255, .18); }
.vs-shape--cercle { stroke: #ff9fc0; fill: rgba(255, 159, 192, .18); }
#verity-time.is-urgent { color: #ff9a8a; }

/* ---------- Double destinée : autels et pointes ---------- */
.duality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #0a0a12; }
.duality[data-side="dark"] .duality-altars { order: 2; }
.duality-half { padding: clamp(14px, 2.4vw, 22px); }
.duality-altars { background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(207, 226, 255, .14), transparent 70%); border-right: 1px solid var(--line); }
.duality[data-side="dark"] .duality-altars { border-right: 0; border-left: 1px solid var(--line); background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(199, 125, 255, .18), transparent 70%); }
.duality-spikes { background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(199, 125, 255, .14), transparent 70%); }
.duality[data-side="dark"] .duality-spikes { background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(207, 226, 255, .12), transparent 70%); }
.duality-label { margin: 0 0 12px; font-size: .6rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.duality-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 92px; }
.altar { display: grid; place-items: center; width: clamp(62px, 9vw, 84px); aspect-ratio: 1; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .03); }
.altar img { width: 88%; height: 88%; object-fit: contain; animation: altar-in .5s ease both; }
.altar-hidden { font-size: 1.4rem; font-weight: 800; color: rgba(255, 255, 255, .25); }
.altar.is-done { border-color: rgba(127, 240, 200, .7); }
.altar.is-done img { opacity: .55; }
@keyframes altar-in { from { opacity: 0; transform: scale(.85); } }
.duality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.spike { position: relative; display: grid; place-items: center; padding: 6px 6px 18px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .02); cursor: pointer; transition: border-color .2s, transform .2s; }
.spike img { width: clamp(46px, 7vw, 66px); aspect-ratio: 1; object-fit: contain; animation: spike-float 3.2s ease-in-out infinite; }
.spike:nth-child(3n+2) img { animation-delay: -1s; }
.spike:nth-child(3n) img { animation-delay: -2s; }
.spike-pyramid { position: absolute; left: 50%; bottom: 4px; width: 0; height: 0; margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 12px solid #2c2236; }
@keyframes spike-float { 50% { transform: translateY(-4px); } }
.spike:hover:not(:disabled), .spike:focus-visible { border-color: var(--prism, #e58cff); transform: translateY(-2px); }
.spike:disabled { cursor: default; }
.duality[data-phase="read"] .spike, .duality[data-phase="idle"] .spike { opacity: .55; }
.spike.is-broken { border-color: rgba(127, 240, 200, .6); }
.spike.is-broken img { opacity: .2; filter: grayscale(1); animation: none; }
.duality.marked { animation: verity-mark .9s ease; }

@media (max-width: 680px) {
  .verity-statues { gap: 6px; }
  .vs-statue { padding: 10px 4px 12px; }
  .vs-part { width: 36px; height: 36px; }
  .vs-inside { padding: 3px 6px; letter-spacing: .06em; }
  .duality { grid-template-columns: minmax(0, 1fr); }
  .duality[data-side="dark"] .duality-altars { order: 0; border-left: 0; }
  .duality-altars { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .spike img, .altar img { animation: none; }
}