/* Monde du trône — les deux mini-jeux : « Aligner le sceau » (js/sigil.js) et « Deux mensonges, deux
   vérités » (js/lies.js). Le cadre commun vient de css/components/game.css. */

/* ---------- Le sceau ---------- */
.game-head figure img[src$=".svg"] { aspect-ratio: auto; height: auto; background: #07110d; }
.altar-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 24px 0; }
.altar-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.altar-num { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: .66rem; }
.altar-tab:hover:not(:disabled) { color: var(--pearl); border-color: var(--line-strong); }
.altar-tab.is-current { color: var(--lucent-hi); border-color: var(--lucent); background: rgba(185, 255, 152, .08); }
.altar-tab.is-done .altar-num { background: var(--lucent); border-color: var(--lucent); color: var(--night); }
.altar-tab:disabled { opacity: .4; cursor: not-allowed; }

.sigil-stage { position: relative; margin: 14px 24px 16px; border: 1px solid rgba(185, 255, 152, .25); background: #040806; }
#sigil { display: block; width: 100%; aspect-ratio: 16 / 10; touch-action: none; cursor: grab; outline: none; transition: filter .25s; }
#sigil:active { cursor: grabbing; }
#sigil:focus-visible { box-shadow: inset 0 0 0 2px var(--lucent); }
#sigil.is-snap { filter: grayscale(1) contrast(1.4) brightness(1.5); }
.sigil-overlay { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 16px 18px; background: linear-gradient(0deg, rgba(4, 8, 6, .95), rgba(4, 8, 6, .55) 70%, transparent); pointer-events: none; }
.sigil-overlay[hidden] { display: none; }
.sigil-overlay .tag { margin: 0; color: var(--lucent) !important; }
.sigil-relic { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: 1.3rem; color: var(--pearl); }
.sigil-entry { margin: 0; font-size: .74rem; color: var(--muted); }
.sigil-overlay[data-kind="fail"] .tag { color: #ffb08a !important; }
.sigil-meter { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: rgba(4, 8, 6, .8); font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sigil-meter i { --r: 0; position: relative; width: 110px; height: 6px; background: rgba(185, 255, 152, .12); overflow: hidden; }
.sigil-meter i::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--r)); background: linear-gradient(90deg, #4c8a45, var(--lucent)); }
.sigil-meter.is-hot { color: var(--lucent-hi); box-shadow: 0 0 16px rgba(185, 255, 152, .35); }
.sigil-pad { position: absolute; right: 10px; bottom: 10px; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(2, 34px); gap: 4px; }
.sigil-pad button { display: grid; place-items: center; border: 1px solid rgba(185, 255, 152, .35); background: rgba(4, 8, 6, .82); color: var(--lucent-hi); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; touch-action: none; }
.sigil-pad button:disabled { opacity: .25; cursor: default; }
.sigil-pad [data-sigil-move="y-"] { grid-column: 2; grid-row: 1; }
.sigil-pad [data-sigil-move="x-"] { grid-column: 1; grid-row: 2; }
.sigil-pad [data-sigil-move="y+"] { grid-column: 2; grid-row: 2; }
.sigil-pad [data-sigil-move="x+"] { grid-column: 3; grid-row: 2; }
.sigil-pad [data-sigil-move="z+"] { grid-column: 1; grid-row: 1; }
.sigil-pad [data-sigil-move="z-"] { grid-column: 3; grid-row: 1; }

.memory { margin: 0 24px 22px; padding: 18px 20px; border: 1px solid rgba(185, 255, 152, .35); background: radial-gradient(circle at 50% 0%, rgba(185, 255, 152, .08), transparent 60%), #070d09; }
.memory[hidden] { display: none; }
.memory .tag { margin: 0 0 10px; color: var(--lucent) !important; }
.memory-lines { display: grid; gap: 10px; }
.memory-line { margin: 0; font-family: var(--font-lore); font-style: italic; font-size: 1.15rem; line-height: 1.45; color: #eef8e6; animation: memory-in 1.2s var(--ease) both; animation-delay: var(--d, 0s); }
.memory-after { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid rgba(185, 255, 152, .2); font-size: .88rem; line-height: 1.6; color: var(--muted); }
.memory-src { margin: 8px 0 0; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
@keyframes memory-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }

/* ---------- Deux mensonges, deux vérités ---------- */
.lies-board { padding: 16px 24px 4px; }
.lies-say { margin: 0 0 14px; font-family: var(--font-lore); font-style: italic; font-size: 1.2rem; line-height: 1.4; color: var(--witch-hi); }
.lies-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.lie-item { position: relative; display: grid; gap: 6px; width: 100%; height: 100%; padding: 14px 16px; border: 1px solid var(--line); background: #0b0f0a; color: var(--ink); font: inherit; font-size: .95rem; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }
.lie-item:hover:not(:disabled) { border-color: var(--line-strong); }
.lie-item.is-picked { border-color: var(--witch); background: rgba(227, 201, 122, .1); box-shadow: inset 3px 0 0 var(--witch); }
.lie-item:disabled { cursor: default; }
.lie-mark { font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.lie-mark:empty { display: none; }
.lie-why { display: none; font-size: .8rem; line-height: 1.55; color: var(--muted); }
.lie-item.is-true, .lie-item.is-lie { cursor: default; }
.lie-item.is-true .lie-why, .lie-item.is-lie .lie-why { display: block; }
.lie-item.is-true { border-color: rgba(185, 255, 152, .5); }
.lie-item.is-true .lie-mark { color: var(--lucent); }
.lie-item.is-lie { border-color: rgba(255, 122, 92, .6); background: rgba(255, 122, 92, .06); }
.lie-item.is-lie .lie-mark { color: var(--rhulk); }
.lie-item.is-lie .lie-text { text-decoration: line-through; text-decoration-color: rgba(255, 122, 92, .6); }
.lie-item.is-picked.is-lie { box-shadow: inset 3px 0 0 var(--lucent); }
.lie-item.is-picked.is-true { box-shadow: inset 3px 0 0 var(--rhulk); }

@media (max-width: 680px) {
  .altar-tabs { padding-inline: 16px; }
  .sigil-stage { margin-inline: 16px; }
  #sigil { aspect-ratio: 4 / 3.4; }
  .sigil-meter i { width: 70px; }
  .sigil-pad { grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(2, 30px); }
  .memory { margin-inline: 16px; }
  .lies-board { padding-inline: 16px; }
  .lies-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .memory-line { animation: none; }
}