/* ==========================================================================
   Spooky Tower : « nuit hantée ».
   Ciel étoilé, lune, horloge géante dont les aiguilles tournent derrière la boîte,
   toits en silhouette, brume, deux petits fantômes (dessins originaux, pas tirés du jeu).
   L'illustration de la boîte est affichée entière, sans aucun effet.
   ========================================================================== */

@font-face { font-family: "Mystery Quest"; src: url("/assets/fonts/mystery-quest-latin-400-normal.woff2") format("woff2"); font-display: swap; }

.st {
  --nuit: #15112a;
  --nuit-2: #241d45;
  --lune: #f4ead0;
  --spectre: #a9e4f2;
  --lanterne: #f2a65a;
  --st-clair: #efeaff;
  --doux: #cbc3e8;
  --accent: var(--spectre);
  --encre: var(--st-clair);
  --encre-douce: var(--doux);
  --filet: rgba(239, 234, 255, 0.18);
  --papier: var(--nuit);
  background: var(--nuit);
  color: var(--st-clair);
}
.st .fil-ariane, .st .fil-ariane a { color: var(--doux); }

/* ---------- La nuit (ouverture) ---------- */
.st-nuit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(7rem, 14vw, 11rem);
  background:
    radial-gradient(ellipse 60% 50% at 78% 30%, rgba(120, 98, 200, 0.45), transparent 70%),
    linear-gradient(#0f0c1f 0%, #1d1740 45%, #3a2a62 100%);
}
.st-ciel { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.st-etoiles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 18px 26px, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 120px 80px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 200px 150px, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 70px 170px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 160px 30px, #fff 50%, transparent 52%);
  background-size: 230px 200px;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 85%);
  mask-image: linear-gradient(#000 40%, transparent 85%);
}
.st-etoiles--2 { background-size: 310px 270px; background-position: 90px 60px; opacity: 0.5; }
.st-lune {
  position: absolute;
  top: clamp(4.5rem, 9vw, 6.5rem);
  right: clamp(1rem, 6vw, 6rem);
  width: clamp(4.5rem, 9vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(214, 196, 150, 0.55) 0 9%, transparent 10%),
    radial-gradient(circle at 38% 64%, rgba(214, 196, 150, 0.45) 0 6%, transparent 7%),
    radial-gradient(circle at 32% 32%, #fffbea, #f1e3b8 62%, #ddc78d);
  box-shadow: 0 0 50px 14px rgba(244, 234, 208, 0.28), 0 0 160px 60px rgba(169, 228, 242, 0.13);
}
.st-fantome { position: absolute; width: clamp(2.4rem, 4vw, 3.4rem); fill: rgba(244, 240, 255, 0.82); filter: drop-shadow(0 0 12px rgba(169, 228, 242, 0.6)); }
.st-fantome__oeil { fill: #241d45; }
.st-fantome--1 { top: 22%; left: 46%; }
.st-fantome--2 { top: 11%; right: 22%; width: clamp(1.7rem, 2.8vw, 2.4rem); opacity: 0.75; transform: scaleX(-1); }

.st-scene { position: relative; z-index: 2; }
.st-scene__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(0.5rem, 3vw, 2rem) 0;
}
.st-surtitre {
  font: 600 0.8rem/1.3 var(--texte, sans-serif);
  font-family: "Inter", system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--spectre);
  margin: 0 0 1rem;
}
.st h1 {
  font-family: "Mystery Quest", var(--titre);
  font-weight: 400;
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  color: var(--lune);
  text-shadow: 0 0 28px rgba(169, 228, 242, 0.45), 0 4px 0 #0c0a18;
  margin: 0 0 1.25rem;
}
.st-accroche {
  font-family: var(--titre);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.35;
  color: var(--st-clair);
  max-width: 26ch;
  margin-bottom: 1.75rem;
}
.st .pictos { gap: 0.6rem; }
.st .pictos li {
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(169, 228, 242, 0.45);
  border-radius: 999px;
  background: rgba(21, 17, 42, 0.55);
  box-shadow: 0 0 18px -6px rgba(169, 228, 242, 0.7);
}
.st .pictos svg { color: var(--spectre); }

/* Horloge géante : la boîte est posée devant, les aiguilles dépassent derrière elle. */
.st-horloge-zone { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1; justify-self: center; }
.st-horloge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-horloge__fond { fill: rgba(21, 17, 42, 0.55); stroke: rgba(244, 234, 208, 0.55); stroke-width: 3; }
.st-horloge__anneau { fill: none; stroke: rgba(244, 234, 208, 0.2); stroke-width: 1.5; stroke-dasharray: 2 7; }
.st-horloge__traits line { stroke: rgba(244, 234, 208, 0.55); stroke-width: 1.5; }
.st-horloge__traits .st-horloge__grand { stroke: var(--lune); stroke-width: 4; }
.st-horloge__chiffres text { fill: var(--lune); font-family: "Mystery Quest", var(--titre); font-size: 22px; text-anchor: middle; }
.st-aiguille { fill: var(--lune); transform-box: view-box; transform-origin: 50% 50%; }
.st-aiguille--heure { transform: rotate(-60deg); }
.st-aiguille--minute { fill: var(--spectre); transform: rotate(40deg); }
.st-horloge__axe { fill: var(--lanterne); }
.st-boite { position: absolute; inset: 15% 21%; }
.st-boite picture { display: contents; }
.st-boite img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55)); }

/* Toits et brume, au pied de la page */
.st-ville { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(6rem, 13vw, 10rem); z-index: 1; }
.st-ville__toits { fill: #0b0916; }
.st-ville__fenetre { fill: var(--lanterne); opacity: 0.9; }
.st-ville__cadran { fill: var(--lune); opacity: 0.85; }
.st-brume {
  position: absolute;
  z-index: 1;
  left: -25%;
  width: 150%;
  height: 7rem;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(203, 195, 232, 0.22), transparent 70%);
  filter: blur(6px);
}
.st-brume--1 { bottom: clamp(3rem, 7vw, 6rem); }
.st-brume--2 { bottom: -2.5rem; z-index: 1; opacity: 0.8; }

/* ---------- Le dossier (contenu) ---------- */
.st-enquete {
  position: relative;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(120, 98, 200, 0.18), transparent 70%),
    #0b0916;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
}
.st-enquete__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.st-enquete h2 {
  font-family: "Mystery Quest", var(--titre);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--lune);
  margin-bottom: 1.25rem;
}
.st-description { font-size: 1.12rem; line-height: 1.7; color: var(--st-clair); max-width: 58ch; }
.st-description::first-letter {
  float: left;
  font-family: "Mystery Quest", var(--titre);
  font-size: 3.6em;
  line-height: 0.8;
  margin: 0.08em 0.12em 0 0;
  color: var(--spectre);
}
.st .bouton { background: var(--spectre); border-color: var(--spectre); color: var(--nuit); box-shadow: 0 0 22px -6px rgba(169, 228, 242, 0.8); }
.st .bouton:hover { background: var(--lanterne); border-color: var(--lanterne); color: var(--nuit); }
.st .bouton--clair { background: transparent; color: var(--st-clair); border-color: rgba(239, 234, 255, 0.6); box-shadow: none; }
.st .bouton--clair:hover { background: var(--st-clair); color: var(--nuit); border-color: var(--st-clair); }
.st .liens-secondaires a { color: var(--st-clair); }
.st .liens-secondaires a:hover { color: var(--spectre); }

/* L'équipe : comme des fiches d'enquête épinglées */
.st-equipe {
  position: relative;
  background: var(--lune);
  color: #2a2340;
  padding: 1.75rem 1.5rem 1.25rem;
  border-radius: 3px;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.8);
  transform: rotate(1.5deg);
}
.st-equipe::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: -0.6rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffb27a, #c25a1c);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.45);
}
.st-enquete .st-equipe__titre { font-size: 1.9rem; color: #2a2340; margin-bottom: 0.75rem; }
.st-credits { margin: 0; }
.st-credits div { padding: 0.65rem 0; border-top: 1px dashed rgba(42, 35, 64, 0.35); }
.st-credits dt { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #4d4466; }
.st-credits dd { margin: 0.15rem 0 0; font-size: 1.02rem; }

/* La photo du contenu, présentée comme un cliché (le cadre seul est décoré) */
.st-cliche {
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  max-width: 58rem;
  background: var(--lune);
  padding: clamp(0.75rem, 2vw, 1.1rem) clamp(0.75rem, 2vw, 1.1rem) 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.st-cliche img { width: 100%; height: auto; }
.st-cliche figcaption {
  font-family: "Mystery Quest", var(--titre);
  color: #2a2340;
  font-size: 1.5rem;
  text-align: center;
  padding: 0.7rem 0 0.9rem;
}

@media (max-width: 52rem) {
  .st-scene__grille { grid-template-columns: minmax(0, 1fr); }
  .st-horloge-zone { max-width: 24rem; order: -1; }
  .st-titre { text-align: center; }
  .st-accroche { margin-inline: auto; }
  .st .pictos { justify-content: center; }
  .st-enquete__grille { grid-template-columns: minmax(0, 1fr); }
  .st-equipe { transform: none; }
  .st-fantome--1 { top: 46%; left: 6%; }
}

@media (prefers-reduced-motion: no-preference) {
  .st-aiguille--minute { animation: st-tour 60s linear infinite; }
  .st-aiguille--heure { animation: st-tour 720s linear infinite; animation-delay: -120s; }
  @keyframes st-tour { from { transform: rotate(40deg); } to { transform: rotate(400deg); } }
  .st-etoiles--2 { animation: st-scintille 4s ease-in-out infinite alternate; }
  @keyframes st-scintille { from { opacity: 0.15; } to { opacity: 0.6; } }
  .st-fantome--1 { animation: st-flotte 6s ease-in-out infinite alternate; }
  .st-fantome--2 { animation: st-flotte2 8s ease-in-out infinite alternate; }
  @keyframes st-flotte { from { transform: translate(0, 0); } to { transform: translate(18px, -16px); } }
  @keyframes st-flotte2 { from { transform: scaleX(-1) translate(0, 0); } to { transform: scaleX(-1) translate(-14px, 12px); } }
  .st-brume--1 { animation: st-brume 26s ease-in-out infinite alternate; }
  .st-brume--2 { animation: st-brume 34s ease-in-out infinite alternate-reverse; }
  @keyframes st-brume { to { transform: translateX(12%); } }
  .st-ville__fenetre--vacille { animation: st-vacille 5s steps(1) infinite; }
  .st-ville__fenetre--vacille:nth-of-type(2n) { animation-delay: -2s; }
  .st-ville__fenetre--vacille:nth-of-type(3n) { animation-duration: 7s; }
  @keyframes st-vacille { 0%, 60%, 100% { opacity: 0.9; } 62%, 70% { opacity: 0.15; } 72% { opacity: 0.9; } 85% { opacity: 0.2; } }
  .st-lune { animation: st-halo 7s ease-in-out infinite alternate; }
  @keyframes st-halo { to { box-shadow: 0 0 70px 22px rgba(244, 234, 208, 0.36), 0 0 200px 80px rgba(169, 228, 242, 0.18); } }
}

/* Bouton « Jouer sur Board Game Arena » : une lanterne dans la nuit */
.st .bouton--jouer { background: var(--lanterne); border-color: var(--lanterne); color: var(--nuit); box-shadow: 0 0 26px -4px rgba(242, 166, 90, 0.85); }
.st .bouton--jouer:hover { background: var(--lune); border-color: var(--lune); color: var(--nuit); }