/* Chasse au trésor de Beau Soleil et Belle Lune : thème parchemin médiéval, mobile-first. */

:root {
  --ink: #3a2714;
  --ink-soft: #5b4326;
  --wax: #8c1f1f;
  --gold: #8a6d3b;
  --edge: #c8ab74;
  --parch-1: #f7ead0;
  --parch-2: #efdcb6;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(120, 80, 30, 0.35), rgba(0, 0, 0, 0)),
    #241a10;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  min-height: 100vh;
  padding: 22px 14px 60px;
}

.wrap { max-width: 660px; margin: 0 auto; }

/* En-tête du jeu */
.game-head { text-align: center; margin: 6px 0 22px; }
.game-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  color: #f1e2bd;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.game-sub {
  font-style: italic;
  color: #c8ab74;
  margin: 0.3em 0 0;
  font-size: 1rem;
}

/* Tracker des fragments d'arpenteur recueillis */
.fragments-tracker {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  background: rgba(20, 14, 8, 0.55);
  border: 1px dashed #b08a3a;
  border-radius: 10px;
}
.fragments-caption {
  flex-basis: 100%;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c8ab74;
}
.fragment-slot {
  min-width: 62px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  font-family: "Cinzel", serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: #f0d99a;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: rgba(150, 110, 50, 0.18);
}
.fragment-slot.empty { opacity: 0.45; }

/* Cartes du domaine (SVG inline, responsives) */
.map-frame {
  margin: 1em 0;
  border: 1px solid var(--edge);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(150, 110, 50, 0.08);
  padding: 6px;
}
.map-frame svg { display: block; width: 100%; max-width: 100%; height: auto; }

/* Sceau à glyphe long (chiffres romains) */
.seal--wide { font-size: 1.05rem; letter-spacing: 0.02em; }

/* Bandeau de messages */
.messages { margin: 0 0 18px; }
.msg {
  border-radius: 8px;
  padding: 11px 15px;
  margin-bottom: 8px;
  font-size: 1rem;
  border: 1px solid;
}
.msg.success { background: #efe4c4; color: #5a4a1c; border-color: var(--gold); }
.msg.error   { background: #f3ddd6; color: #7a1f12; border-color: var(--wax); }
.msg.info    { background: #e7e0cf; color: #4a4231; border-color: var(--edge); }

/* Le parchemin (carte d'étape) */
.scroll {
  position: relative;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 42%),
    radial-gradient(150% 150% at 50% 120%, rgba(120, 80, 30, 0.22), rgba(120, 80, 30, 0) 48%),
    linear-gradient(180deg, var(--parch-1), var(--parch-2));
  border: 2px solid var(--edge);
  border-radius: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(150, 110, 50, 0.25);
  padding: 38px 28px 30px;
  margin: 0 0 26px;
  scroll-margin-top: 20px;
  animation: unfurl 0.5s ease both;
}
.scroll::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(120, 80, 30, 0.35);
  border-radius: 3px;
  pointer-events: none;
}

@keyframes unfurl {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.seal {
  position: absolute;
  top: -16px;
  right: 22px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c0392b, #7c1f1f 60%, #561313);
  color: #f3d9c0;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.25);
  transform: rotate(-8deg);
  border: 2px solid rgba(0, 0, 0, 0.15);
}

/* ---- Bris de sceau : mise en scène plein écran (piloté par hunt.js) ---- */
.seal-break {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 50% 45%, rgba(20, 10, 4, 0.82), rgba(8, 4, 2, 0.94));
  animation: veil-in 0.3s ease both;
}
.seal-break.seal-break--lift {
  animation: veil-out 0.4s ease both;
}

.seal-break__wax {
  position: relative;
  width: 170px;
  height: 170px;
  animation: stamp 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s both;
}
/* Deux moitiés superposées : ensemble elles forment le sceau intact. */
.seal-break__half {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c0392b, #7c1f1f 60%, #561313);
  color: #f3d9c0;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), inset 0 3px 8px rgba(255, 255, 255, 0.28);
  border: 3px solid rgba(0, 0, 0, 0.18);
}
.seal-break__half--l {
  clip-path: polygon(0 0, 54% 0, 46% 50%, 54% 100%, 0 100%);
  animation: shatter-l 0.75s cubic-bezier(0.3, 0, 0.4, 1) 0.95s both;
}
.seal-break__half--r {
  clip-path: polygon(54% 0, 100% 0, 100% 100%, 54% 100%, 46% 50%);
  animation: shatter-r 0.75s cubic-bezier(0.3, 0, 0.4, 1) 0.95s both;
}
.seal-break__crack {
  position: absolute;
  top: 4%;
  left: 50%;
  width: 5px;
  height: 92%;
  margin-left: -2.5px;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(255, 240, 210, 0.95), rgba(255, 210, 150, 0.35));
  clip-path: polygon(40% 0, 60% 0, 45% 22%, 65% 45%, 40% 68%, 60% 100%, 40% 100%, 55% 68%, 35% 45%, 55% 22%);
  animation: crack 0.3s ease-out 0.65s both;
}
.seal-break__shard {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #f0c878;
  pointer-events: none;
  animation: shard 0.75s ease-out 0.95s both;
}

@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes stamp {
  0% { transform: scale(2.6) rotate(-24deg); opacity: 0; }
  60% { opacity: 1; }
  80% { transform: scale(0.92) rotate(-8deg); opacity: 1; }
  100% { transform: scale(1) rotate(-8deg); opacity: 1; }
}
@keyframes crack {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes shatter-l {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(-150px, 105px) rotate(-42deg); opacity: 0; }
}
@keyframes shatter-r {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to { transform: translate(150px, 105px) rotate(42deg); opacity: 0; }
}
@keyframes shard {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 0; }
  20% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3) rotate(220deg);
    opacity: 0;
  }
}

/* La carte qui vient de s'ouvrir : halo doré + balayage lumineux. */
.scroll.just-opened {
  animation: unfurl 0.5s ease both, halo 1.5s ease-out both;
}
.scroll.just-opened::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(240, 210, 140, 0.5) 50%, transparent 58%);
  background-size: 300% 100%;
  background-position: 130% 0;
  animation: sweep 1.1s ease-out 0.15s both;
}
@keyframes halo {
  0% { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(150, 110, 50, 0.25), 0 0 0 0 rgba(240, 200, 120, 0); }
  28% { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(150, 110, 50, 0.25), 0 0 44px 10px rgba(240, 200, 120, 0.7); }
  100% { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(150, 110, 50, 0.25), 0 0 0 0 rgba(240, 200, 120, 0); }
}
@keyframes sweep {
  from { background-position: 130% 0; }
  to { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .seal-break { display: none; }
  .scroll.just-opened { animation: unfurl 0.5s ease both; }
  .scroll.just-opened::after { animation: none; content: none; }
}

.kicker {
  font-family: "Cinzel", serif;
  text-align: center;
  color: var(--gold);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 0.4em;
}
.scroll-title {
  font-family: "Cinzel", serif;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0 0 0.1em;
}
.rule { text-align: center; color: var(--gold); font-size: 1.2rem; margin: 0.4em 0 1em; }

.body { font-size: 1.12rem; line-height: 1.72; }
.body p { margin: 0 0 1em; }
.body .hint { font-style: italic; color: var(--ink-soft); }
.body .epreuve {
  font-family: "Cinzel", serif;
  color: var(--wax);
  font-size: 1.05rem;
  margin: 1.1em 0 0.2em;
}
.body .regle {
  text-align: center;
  font-weight: 500;
  color: var(--wax);
  background: rgba(150, 110, 50, 0.12);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 12px 14px;
}
.body .enigme {
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.7;
  color: var(--ink);
  background: rgba(150, 110, 50, 0.1);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--wax);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0.6em 0 0.4em;
}
.signature {
  text-align: right;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-top: 1.2em;
}

/* Grille de l'alphabet des clercs + message codé */
.cipher-grid {
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: center;
  background: rgba(150, 110, 50, 0.13);
  border: 1px solid var(--edge);
  border-radius: 4px;
  padding: 12px;
  margin: 0.9em 0;
  line-height: 1.95;
}
.cipher {
  font-size: 1.18rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.95;
  color: var(--wax);
  font-weight: 500;
  margin: 0.6em 0 0.2em;
  word-break: break-word;
}

/* Carte verrouillée active (saisie du mot de passe) */
.scroll.locked {
  background: linear-gradient(180deg, #efe2c2, #e4d2a8);
  text-align: center;
}
.lock-emoji { font-size: 2.2rem; }
.locked-teaser { font-size: 1.08rem; color: var(--ink-soft); margin: 0.6em auto 1.1em; max-width: 34ch; }

.pw-form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; }
.pw-form input[type="text"],
.pw-form input[type="password"],
.final-form input {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.15rem;
  padding: 12px 14px;
  border: 2px solid var(--edge);
  border-radius: 8px;
  background: #fbf3df;
  color: var(--ink);
  text-align: center;
}
.pw-form input:focus, .final-form input:focus {
  outline: none;
  border-color: var(--wax);
  box-shadow: 0 0 0 3px rgba(140, 31, 31, 0.15);
}

.btn-seal {
  font-family: "Cinzel", serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #f7e7c8;
  background: linear-gradient(180deg, #9a3a2c, var(--wax));
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 4px 0 #5a1414;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.btn-seal:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a1414; }

/* Étape encore scellée (placeholder) */
.scroll.sealed {
  background: linear-gradient(180deg, #e6d8b8, #d8c39a);
  text-align: center;
  opacity: 0.72;
  padding: 26px;
}
.scroll.sealed .lock-emoji { font-size: 1.8rem; opacity: 0.8; }
.scroll.sealed .sealed-label {
  font-family: "Cinzel", serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.4em;
}

/* Le coffre : saisie du code à 3 chiffres */
.final-form { display: flex; flex-direction: column; gap: 12px; max-width: 320px; margin: 0.5em auto 0; }
.final-form input {
  font-family: "Cinzel", serif;
  font-size: 2rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}

/* Victoire */
.scroll.victory {
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 240, 200, 0.6), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #f8edcf, #efdcb0);
  border-color: var(--gold);
  text-align: center;
}
.victory .crest { font-size: 2.4rem; color: var(--gold); }
.victory .title-won {
  font-family: "Cinzel", serif;
  font-size: 1.05rem;
  color: var(--ink);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: 9px 16px;
  display: inline-block;
  margin: 0.8em 0;
  background: rgba(150, 110, 50, 0.12);
}

/* Pied de page */
.foot { text-align: center; margin-top: 26px; }
.foot a {
  color: #b9975a;
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

/* Page Maître */
.master h2 {
  font-family: "Cinzel", serif;
  color: var(--wax);
  border-bottom: 2px solid var(--edge);
  padding-bottom: 0.25em;
  margin: 1.6em 0 0.6em;
  font-size: 1.2rem;
}
.master table { width: 100%; border-collapse: collapse; margin: 0.6em 0; font-size: 1rem; }
.master th, .master td { border: 1px solid var(--edge); padding: 8px 10px; text-align: left; vertical-align: top; }
.master th { background: rgba(150, 110, 50, 0.16); font-family: "Cinzel", serif; }
.master .secret { font-family: "Cinzel", serif; color: var(--wax); font-weight: 600; }
.master ul, .master ol { padding-left: 1.3em; }
.master li { margin-bottom: 0.3em; }

@media (max-width: 420px) {
  .game-title { font-size: 1.4rem; }
  .scroll { padding: 32px 20px 26px; }
  .body { font-size: 1.06rem; }
}