/* Le Cosmodrome — les deux mini-jeux de la section des secrets : la grotte au butin du
   Relais cosmique et la cache de Cayde. Le cadre des jeux vient de css/components/game.css. */

.secrets-sec { background: radial-gradient(ellipse 60% 45% at 30% 30%, color-mix(in srgb, var(--page-accent) 9%, transparent), transparent 70%); }

/* ---------- La grotte au butin ---------- */
.cave { position: relative; aspect-ratio: 16 / 8; margin: 16px 24px 0; overflow: hidden; border: 1px solid var(--line); background: #05070b; user-select: none; -webkit-user-select: none; }
.cave > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.15) contrast(1.05); }
.cave-mouth { position: absolute; inset: 0; cursor: crosshair; }
.foe { position: absolute; left: var(--x); top: var(--y); width: clamp(26px, 5.5%, 44px); aspect-ratio: 3 / 4; padding: 0; cursor: crosshair; transform: translate(-50%, -50%); border: 0; background: none; animation: foe-out 2.6s linear forwards; }
.foe::before { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 78% 14%, 70% 34%, 100% 46%, 78% 58%, 86% 100%, 58% 100%, 50% 72%, 42% 100%, 14% 100%, 22% 58%, 0 46%, 30% 34%, 22% 14%); background: linear-gradient(180deg, #1a2c22, #060a08); }
.foe::after { content: ''; position: absolute; left: 30%; right: 30%; top: 12%; height: 9%; border-radius: 50%; background: #9dff7a; box-shadow: 0 0 10px 3px rgba(157, 255, 122, .8); }
@keyframes foe-out { from { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 18% { opacity: 1; } 85% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -36%) scale(1.5); } }
.foe--past { width: clamp(38px, 8%, 64px); animation: foe-rise .6s var(--ease) backwards; }
.foe--past::before { background: linear-gradient(180deg, #4a3a1c, #120d05); }
.foe--past::after { background: var(--exotic); box-shadow: 0 0 12px 4px rgba(206, 174, 51, .8); }
@keyframes foe-rise { from { opacity: 0; transform: translate(-50%, -20%) scale(.6); } }
.cave-floor { position: absolute; left: 0; right: 0; bottom: 4%; height: 12%; pointer-events: none; }
.engram { position: absolute; left: var(--x); bottom: 0; width: clamp(18px, 3.6%, 30px); transform: translateX(-50%) rotate(var(--r)); filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5)); animation: engram-drop .5s var(--ease) backwards; }
@keyframes engram-drop { from { opacity: 0; transform: translateX(-50%) translateY(-60px) rotate(var(--r)); } }
.cave-remains { position: absolute; left: 50%; top: 58%; z-index: 2; padding: 8px 14px; cursor: pointer; transform: translate(-50%, -50%); background: rgba(6, 10, 22, .78); border: 1px solid var(--exotic); font: inherit; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); box-shadow: 0 0 24px rgba(206, 174, 51, .6); animation: remains-glow 1.6s ease-in-out infinite; }
.cave-remains[hidden] { display: none; }
@keyframes remains-glow { 50% { box-shadow: 0 0 8px rgba(206, 174, 51, .3); } }

/* ---------- La cache de Cayde ---------- */
.stash-board { display: grid; gap: 18px; margin: 16px 24px 0; padding: clamp(16px, 3vw, 26px); border: 1px solid var(--line); background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(224, 160, 90, .1), transparent 75%), linear-gradient(160deg, #141a26, #0a0d14); }
.stash-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.card { display: grid; justify-items: center; align-content: space-between; gap: 6px; aspect-ratio: 5 / 7; padding: 10px 6px; cursor: pointer; border: 1px solid #b9b2a2; border-radius: 6px; background: linear-gradient(160deg, #f6f1e4, #d9d1bd); color: #14161c; font: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.card:hover:not(:disabled), .card:focus-visible { outline: 0; transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, .5); }
.card[aria-pressed="true"] { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--page-accent), 0 12px 26px rgba(0, 0, 0, .55); }
.card-glyph { font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1; }
.card--hearts .card-glyph, .card--diamonds .card-glyph { color: #b3261e; }
.card-name { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.card-means { min-height: 2.5em; font-size: .68rem; font-weight: 700; line-height: 1.25; text-align: center; color: #6a6252; }
.card.set .card-means { color: #14161c; }
.card:disabled { cursor: default; }
.stash-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip { padding: 8px 14px; cursor: pointer; background: transparent; border: 1px solid var(--line-strong); font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink); transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.chip:not(:disabled):hover, .chip:not(:disabled):focus-visible { outline: 0; background: #fff; color: var(--night); border-color: #fff; }
.chip:disabled { cursor: default; opacity: .45; }
.chip.used { border-style: dashed; }
.stash-board.open .card { border-color: var(--exotic); box-shadow: 0 0 18px rgba(206, 174, 51, .45); }
.stash-board.open .card--spades { transform: translateY(-8px) rotate(-4deg); }

@media (max-width: 680px) {
  .cave { aspect-ratio: 4 / 3; margin-inline: 16px; }
  .stash-board { margin-inline: 16px; }
  .stash-deck { gap: 6px; }
  .card { padding: 6px 3px; }
  .card-means { font-size: .58rem; }
}