/* La Lune — les deux mini-jeux de la section des secrets : murs de runes des galeries K1
   et Jeu du pneu du Sanctuaire. Le cadre des jeux vient de css/components/game.css. */

.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, rgba(168, 224, 108, .08), transparent 70%); }
.rune-status, .tire-status { min-height: 3em; margin: 0; padding: 0 24px 20px; font-family: var(--font-lore); font-style: italic; font-size: 1.15rem; line-height: 1.35; color: var(--pearl); }
.rune-status.ok, .tire-status.ok { color: var(--soulfire-hi); text-shadow: 0 0 18px rgba(168, 224, 108, .4); }
.rune-status.bad, .tire-status.bad { color: #ffb08a; }

/* ---------- Murs de runes ---------- */
.rune-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 24px 0; }
.rune-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); transition: color .25s, border-color .25s, background .25s; }
.rune-tabs button:hover { color: #fff; border-color: #fff; }
.rune-tabs button[aria-pressed="true"] { background: var(--pearl); border-color: var(--pearl); color: var(--night); }
.rune-tabs button.done::before { content: ''; width: 7px; height: 7px; transform: rotate(45deg); background: var(--soulfire); }

.rune-wall { display: grid; grid-template-columns: auto minmax(0, 300px); justify-content: center; align-items: center; gap: clamp(20px, 5vw, 56px); margin: 16px 24px 20px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); background: radial-gradient(ellipse 70% 70% at 60% 50%, rgba(168, 224, 108, .1), transparent 75%), linear-gradient(160deg, #101722, #080b12); }
.rune-goal { display: grid; justify-items: center; gap: 12px; }
.rune-goal span { max-width: 9em; font-size: .62rem; font-weight: 700; letter-spacing: .18em; line-height: 1.5; text-align: center; text-transform: uppercase; color: var(--faint); }
.rune-target { display: grid; place-items: center; width: clamp(72px, 12vw, 104px); aspect-ratio: 1; border: 1px solid var(--soulfire); background: #0a120c; color: var(--soulfire-hi); box-shadow: 0 0 26px rgba(168, 224, 108, .3), inset 0 0 20px rgba(168, 224, 108, .15); }
.rune-target svg { width: 58%; height: 58%; }
.rune-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rune { display: grid; place-items: center; aspect-ratio: 1; padding: 0; cursor: crosshair; border: 1px solid var(--line-strong); background: linear-gradient(145deg, #1c2331, #0f141e); color: #94a0b8; transition: color .3s, border-color .3s, box-shadow .3s, transform .15s; }
.rune svg { width: 54%; height: 54%; }
.rune:hover, .rune:focus-visible { border-color: #fff; color: #fff; }
.rune:active { transform: scale(.95); }
.rune.match { color: var(--soulfire-hi); border-color: rgba(168, 224, 108, .55); box-shadow: inset 0 0 18px rgba(168, 224, 108, .16); }
.rune.turn svg { animation: rune-turn .35s var(--ease); }
@keyframes rune-turn { from { opacity: 0; transform: scale(.5) rotate(-40deg); } }
.rune.hint { animation: rune-hint 1.3s ease-out; }
@keyframes rune-hint { 0%, 40% { border-color: var(--gold-hi); box-shadow: 0 0 0 4px rgba(241, 219, 164, .35), 0 0 22px rgba(241, 219, 164, .6); } }
.rune:disabled { cursor: default; }
#runes.solved .rune { color: #fff; border-color: var(--soulfire); box-shadow: 0 0 18px rgba(168, 224, 108, .35), inset 0 0 22px rgba(168, 224, 108, .25); }
.rune-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 24px 22px; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.rune-order svg { width: 22px; height: 22px; color: var(--ink); }
.rune-order i { font-style: normal; color: var(--faint); }

/* ---------- Jeu du pneu ---------- */
.tire-lane { position: relative; aspect-ratio: 16 / 5; margin: 16px 24px 0; overflow: hidden; cursor: default; border: 1px solid var(--line); background: radial-gradient(ellipse 80% 120% at 60% 110%, rgba(255, 255, 255, .07), transparent 70%), linear-gradient(180deg, #2b3140, #1b202c 60%, #141821); }
.tire-lane.running { cursor: pointer; }
.tire-lane::before { content: ''; position: absolute; left: 0; top: 30%; bottom: 30%; z-index: 1; width: 9%; border: 2px solid #e8c14a; border-left: 0; background: repeating-linear-gradient(135deg, #e8c14a 0 8px, #1c1a12 8px 16px); opacity: .9; }
.tire-lane::after { content: ''; position: absolute; left: 9%; right: 2%; top: 50%; border-top: 2px dashed rgba(255, 255, 255, .14); }
.crater { position: absolute; left: var(--x); top: 50%; z-index: 1; display: grid; place-items: center; width: calc(var(--r) * 2); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 42% 36%, #04060a 0 46%, #161b26 68%, #50586a 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), inset 0 4px 14px #000; }
.crater b { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.crater--small { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(216, 180, 106, .4), inset 0 4px 14px #000; }
.crater--small b { color: var(--gold-hi); }
.crater::after { content: attr(data-count) ' ×'; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: .66rem; font-weight: 800; white-space: nowrap; color: var(--soulfire-hi); }
.crater[data-count="0"]::after { content: none; }
.tire-aim { position: absolute; top: 10%; bottom: 10%; z-index: 2; width: 2px; margin-left: -1px; background: var(--gold-hi); box-shadow: 0 0 10px rgba(241, 219, 164, .8); opacity: 0; transition: opacity .3s; }
.tire-aim::before, .tire-aim::after { content: ''; position: absolute; left: -5px; border: 6px solid transparent; }
.tire-aim::before { top: -2px; border-top-color: var(--gold-hi); }
.tire-aim::after { bottom: -2px; border-bottom-color: var(--gold-hi); }
.tire-lane.running .tire-aim { opacity: 1; }
.tire { position: absolute; left: 6%; top: 50%; z-index: 3; width: 7.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #4a5162; background: radial-gradient(circle, #1c2029 0 26%, #a9b1c4 27% 31%, #0c0e13 32% 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, .6); opacity: 0; }
.tire-lane.running .tire { opacity: 1; }
.tire.rolling { transition: left 1.1s cubic-bezier(.2, .7, .3, 1), transform .45s ease-in, opacity .45s ease-in; }
.tire.rolling.sunk { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
.tire-left { display: flex; gap: 6px; }
.tire-left i { width: 18px; height: 18px; border-radius: 50%; border: 4px solid #8a93a8; opacity: .25; }
.tire-left[data-left="1"] i:nth-child(-n+1), .tire-left[data-left="2"] i:nth-child(-n+2), .tire-left[data-left="3"] i { opacity: 1; }

@media (max-width: 680px) {
  .rune-wall { grid-template-columns: minmax(0, 1fr); justify-items: center; margin-inline: 16px; }
  .rune-goal { grid-auto-flow: column; align-items: center; }
  .rune-grid { width: min(100%, 300px); }
  .tire-lane { aspect-ratio: 16 / 7; margin-inline: 16px; }
  .rune-tabs, .rune-order { padding-inline: 16px; }
  .rune-status, .tire-status { padding-inline: 16px; }
}