/* The Leiden Archive Mystery — game-specific styles.
   Reuses the site's existing tokens/components (styles.css) rather than
   redefining colours, type or spacing from scratch. */

.mystery-app-section { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 5rem); background: var(--paper); }

/* Map puzzle (chapter 5) */
.mystery-puzzle-map-wrap { margin-bottom: .9rem; }
.mystery-puzzle-map { height: 320px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-deep); }
.mystery-map-selected { margin: .5rem 0 0; font-size: .85rem; color: var(--green); font-weight: 700; }
.leaflet-marker-icon.mystery-map-pin--selected { filter: hue-rotate(120deg) saturate(1.4); }

/* Case notebook */
.mystery-notebook-toggle { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem; border: 1px solid var(--green); border-radius: 999px; background: var(--green); color: var(--white); font-family: var(--sans); font-size: .85rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(24,37,31,.25); }
.mystery-notebook-toggle:hover { background: var(--forest); }
.mystery-notebook-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .3rem; border-radius: 999px; background: var(--white); color: var(--green); font-size: .75rem; font-weight: 800; }
.mystery-notebook-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(24rem, 100vw); background: var(--paper); border-left: 1px solid var(--rule); box-shadow: -8px 0 24px rgba(24,37,31,.18); flex-direction: column; }
.mystery-notebook-drawer:not([hidden]) { display: flex; }
.mystery-notebook-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); background: var(--mint-pale); }
.mystery-notebook-head h2 { margin: 0; font-family: var(--serif); font-size: 1.15rem; }
.mystery-notebook-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.mystery-notebook-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.25rem; display: grid; gap: .9rem; align-content: start; }
.mystery-notebook-empty { color: #607067; font-size: .9rem; }

@media (max-width: 520px) {
  .mystery-notebook-toggle { right: .75rem; bottom: .75rem; padding: .55rem .9rem; font-size: .78rem; }
  .mystery-notebook-drawer { width: 100vw; }
}

/* Progress nav */
.mystery-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 2rem; }
.mystery-progress-step { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--white); cursor: pointer; text-align: left; font-family: var(--sans); font-size: .82rem; color: var(--ink); }
.mystery-progress-step:hover { border-color: var(--green); }
.mystery-progress-step.is-current { border-color: var(--green); background: var(--mint-pale); font-weight: 700; }
.mystery-progress-step.is-locked { opacity: .65; }
.mystery-progress-num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 999px; background: var(--green); color: var(--white); font-size: .72rem; font-weight: 800; }
.mystery-progress-step.is-locked .mystery-progress-num { background: #8a9890; }

/* Chapter body */
.mystery-chapter-container { max-width: 46rem; }
.mystery-chapter-head .eyebrow { color: var(--green); }
.mystery-chapter-head h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: .2rem 0 1rem; }
.mystery-chapter-head p { line-height: 1.6; }

.mystery-clue-vs-proof { margin: 1.5rem 0; padding: 1.25rem 1.4rem; border: 1px solid var(--rule); border-left: 5px solid var(--green); background: var(--white); border-radius: 2px; }
.mystery-clue-vs-proof h3 { margin-top: 0; font-family: var(--serif); }
.mystery-clue-vs-proof p { line-height: 1.6; }

.mystery-teaser { line-height: 1.6; color: #4e6057; }

/* Clue cards */
.mystery-clue-list { display: grid; gap: 1rem; margin: 1.5rem 0; }
.mystery-clue { border: 1px solid var(--rule); background: var(--white); padding: 1.1rem 1.3rem; border-radius: 2px; }
.mystery-clue-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.mystery-clue-head time { color: var(--green); font-size: .76rem; font-weight: 800; }
.mystery-reliability { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; }
.mystery-reliability--proven { background: var(--mint-pale); color: var(--green); }
.mystery-reliability--probable { background: #fbeed2; color: #6b5115; }
.mystery-reliability--uncertain { background: #fbeae2; color: #8a3f26; }
.mystery-clue h3 { margin: 0 0 .4rem; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.mystery-clue-summary { margin: 0 0 .6rem; line-height: 1.55; }
.mystery-clue-citation { margin: 0 0 .4rem; font-size: .76rem; color: #607067; }
.mystery-clue-links { margin: 0; font-size: .82rem; }

.mystery-map-note { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px dashed var(--rule); border-radius: 2px; background: var(--mint-pale); font-size: .9rem; }

/* Puzzles (extends .quiz-question look) */
.mystery-puzzles { margin-top: 1.5rem; }
.mystery-puzzle { border: 1px solid var(--rule); background: var(--white); padding: 1.2rem 1.4rem 1.4rem; margin: 0 0 1.25rem; border-radius: 2px; }
.mystery-puzzle-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mystery-puzzle-prompt { display: block; width: 100%; margin: 0 0 .9rem; padding: 0; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.mystery-puzzle-options { display: grid; gap: .5rem; margin-bottom: .9rem; }
.mystery-puzzle-options label { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; font-size: .92rem; }
.mystery-puzzle-options label:hover { border-color: var(--green); }
.mystery-puzzle-options input { accent-color: var(--green); width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.mystery-puzzle-rank, .mystery-puzzle-match { display: grid; gap: .5rem; margin-bottom: .9rem; }
.mystery-rank-row, .mystery-match-row { display: flex; align-items: center; gap: .7rem; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: 2px; font-size: .9rem; }
.mystery-match-row { justify-content: space-between; }
.mystery-rank-row select, .mystery-match-row select { padding: .35rem .5rem; border: 1px solid var(--rule); border-radius: 2px; font-family: var(--sans); }
.mystery-puzzle-feedback { margin: .8rem 0 0; padding: .7rem .9rem; border-radius: 2px; font-size: .88rem; line-height: 1.5; }
.mystery-puzzle-feedback--correct { background: var(--mint-pale); color: var(--forest); }
.mystery-puzzle-feedback--incorrect { background: #fbeae2; color: #7a3f27; }
.mystery-puzzle-hint { margin: .6rem 0 0; padding: .6rem .9rem; border: 1px dashed var(--rule); border-radius: 2px; font-size: .84rem; color: #4e6057; }
.mystery-puzzle-actions { display: flex; gap: .7rem; margin-top: 1rem; flex-wrap: wrap; }
.mystery-reveal-btn { background: none; border: 1px solid var(--rule); border-radius: 2px; padding: .55rem 1rem; font-size: .82rem; cursor: pointer; }
.mystery-puzzle--solved { border-color: var(--green); }

.mystery-continue-btn, .mystery-next-chapter-btn { display: inline-block; margin-top: .5rem; }

.mystery-outro, .mystery-conclusion { line-height: 1.6; }
.mystery-badge-note { margin-top: 1rem; padding: .8rem 1rem; background: var(--mint-pale); border-radius: 2px; }
.mystery-finished-note { font-style: italic; }

.mystery-evidence-review { margin: 1.5rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; }
.mystery-evidence-review h3 { margin-top: 0; font-family: var(--serif); }
.mystery-evidence-tier { margin-bottom: 1rem; }
.mystery-evidence-tier:last-child { margin-bottom: 0; }
.mystery-evidence-tier > span { display: inline-block; margin-bottom: .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; }
.mystery-evidence-tier--proven > span { background: var(--mint-pale); color: var(--green); }
.mystery-evidence-tier--probable > span { background: #fbeed2; color: #6b5115; }
.mystery-evidence-tier--uncertain > span { background: #fbeae2; color: #8a3f26; }
.mystery-evidence-tier ul { margin: 0; padding-left: 1.2rem; }
.mystery-evidence-tier li + li { margin-top: .4rem; }

/* Locked chapter */
.mystery-chapter--locked { padding: 1.5rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; }
.mystery-lock-panel { margin-top: 1.2rem; padding: 1.2rem; background: var(--mint-pale); border-radius: 2px; }
.mystery-lock-panel p { margin-top: 0; }
.mystery-lock-panel-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mystery-access-form { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.mystery-access-form input { flex: 1 1 200px; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 2px; font-family: var(--sans); }
.mystery-access-submit { padding: .55rem 1rem; border: 1px solid var(--green); background: var(--green); color: var(--white); border-radius: 2px; cursor: pointer; }
.mystery-access-note { flex-basis: 100%; margin: 0; font-size: .8rem; }

.mystery-certificate { margin: 1.5rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--rule); background: var(--mint-pale); border-radius: 2px; }
.mystery-certificate h3 { margin-top: 0; font-family: var(--serif); }
.mystery-certificate-name { width: 100%; max-width: 22rem; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 2px; margin: .6rem 0; font-family: var(--sans); display: block; }
.mystery-certificate-preview { margin-top: 1rem; }
.mystery-certificate-preview canvas { width: 100%; max-width: 40rem; height: auto; border: 1px solid var(--rule); display: block; }
.mystery-certificate-download { display: inline-block; margin-top: .7rem; }

.mystery-reset { margin-top: 2rem; }
.mystery-playagain-btn { background: none; border: 1px solid var(--rule); border-radius: 2px; color: var(--ink); font-size: .84rem; font-family: var(--sans); cursor: pointer; padding: .5rem .9rem; }
.mystery-playagain-btn:hover { border-color: var(--rust); color: var(--rust); }

.mystery-loading, .mystery-error { padding: 1rem 0; }

.mystery-disclaimer-section p { max-width: 46rem; font-size: .88rem; color: #4e6057; line-height: 1.6; }

/* Sales page (/mystery/) */
.mystery-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1.5rem; }
.mystery-fact-grid div { padding: 1rem 1.2rem; background: var(--white); }
.mystery-fact-grid small { display: block; color: var(--green); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.mystery-fact-grid strong { font-weight: 500; line-height: 1.5; }

.mystery-version-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.mystery-version-card { border: 1px solid var(--rule); background: var(--white); border-radius: 3px; padding: 1.5rem; display: flex; flex-direction: column; }
.mystery-version-card h3 { font-family: var(--serif); margin: 0 0 .3rem; }
.mystery-version-price { font-size: 1.5rem; font-weight: 700; color: var(--forest); margin: 0 0 1rem; }
.mystery-version-price span { font-size: .78rem; font-weight: 400; color: #607067; }
.mystery-version-card ul { flex: 1; padding-left: 1.2rem; margin-bottom: 1.2rem; }
.mystery-version-card li { margin-bottom: .5rem; line-height: 1.5; font-size: .92rem; }
.mystery-buy-btn { margin-top: .6rem; border: 1px solid var(--rule); background: none; cursor: not-allowed; }
.mystery-buy-btn:disabled { opacity: .65; }
.mystery-coming-soon-note { margin-top: 1.5rem; font-size: .85rem; color: #607067; text-align: center; }

.mystery-faq-item { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.mystery-faq-item:first-of-type { border-top: 1px solid var(--rule); }
.mystery-faq-item summary { cursor: pointer; font-weight: 700; font-family: var(--serif); font-size: 1.05rem; }
.mystery-faq-item p { margin: .8rem 0 0; line-height: 1.6; }

@media (max-width: 640px) {
  .mystery-match-row { flex-direction: column; align-items: flex-start; }
}

/* Chapter 2's "hotspot" puzzle — an animated illustrated scene followed by
   icon-based answer cards, standing in for chapter 1's plain radio list. */
.mystery-hotspot-scene-wrap { border: 1px solid var(--rule); background: var(--white); border-radius: 2px; padding: .5rem; margin-bottom: 1rem; }
.mystery-hotspot-scene { display: block; width: 100%; height: auto; max-height: 200px; }
.myst-scene-wall { fill: var(--paper-deep); }
.myst-scene-table { fill: #a9865a; }
.myst-scene-chair { fill: #6b4f36; }
.myst-scene-figure { fill: #3d4d45; }
.myst-scene-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: myst-flicker 1.6s ease-in-out infinite; }
@keyframes myst-flicker { 0%, 100% { transform: scaleY(1) rotate(0deg); } 50% { transform: scaleY(1.08) rotate(-2deg); } }
.myst-scene-scroll { transform-box: fill-box; animation: myst-scroll-in 1.1s ease-out 1; }
@keyframes myst-scroll-in { 0% { transform: translateX(-120px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
.myst-scene-seal { animation: myst-seal-pop .4s ease-out 1.1s both; }
@keyframes myst-seal-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .myst-scene-flame, .myst-scene-scroll, .myst-scene-seal { animation: none; }
}

.mystery-hotspot-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.mystery-hotspot-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .8rem; border: 1px solid var(--rule); border-radius: 2px; cursor: pointer; text-align: center; font-size: .88rem; }
.mystery-hotspot-card:hover { border-color: var(--green); background: var(--mint-pale); }
.mystery-hotspot-card.is-selected { border-color: var(--green); background: var(--mint-pale); box-shadow: inset 0 0 0 1px var(--green); font-weight: 700; }
.mystery-hotspot-icon { width: 2.2rem; height: 2.2rem; color: var(--forest); }
.mystery-hotspot-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mystery-hotspot-card:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }