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

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

/* Values HUD */
.adventure-hud { position: sticky; top: 0; z-index: 15; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; margin-bottom: 1.5rem; padding: .8rem; background: var(--white); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 2px 10px rgba(24,37,31,.06); }
.adventure-hud-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem; font-size: .82rem; }
.adventure-hud-icon { font-size: 1.05rem; }
.adventure-hud-label { color: var(--ink); }
.adventure-hud-value { font-weight: 800; font-variant-numeric: tabular-nums; }
.adventure-hud-bar { grid-column: 1 / -1; height: .3rem; border-radius: 999px; background: var(--paper-deep); overflow: hidden; }
.adventure-hud-bar-fill { height: 100%; background: var(--green); }
.adventure-hud-item--low .adventure-hud-bar-fill { background: var(--rust); }
.adventure-hud-item--low .adventure-hud-value { color: var(--rust); }

.adventure-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); z-index: 60; padding: .7rem 1.2rem; background: var(--forest); color: var(--white); border-radius: 999px; font-size: .85rem; font-weight: 700; opacity: 0; transition: opacity .25s ease, transform .25s ease; pointer-events: none; max-width: 90vw; text-align: center; }
.adventure-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .adventure-toast { transition: none; } }

/* Level progress nav */
.adventure-progress { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; margin-bottom: 2rem; }
.adventure-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: .8rem; color: var(--ink); }
.adventure-progress-step:hover { border-color: var(--green); }
.adventure-progress-step.is-current { border-color: var(--green); background: var(--mint-pale); font-weight: 700; }
.adventure-progress-step.is-locked { opacity: .65; }
.adventure-progress-step.is-complete .adventure-progress-num { background: var(--green); }
.adventure-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: #8a9890; color: var(--white); font-size: .72rem; font-weight: 800; }
.adventure-progress-step.is-current .adventure-progress-num { background: var(--green); }

.adventure-level-container { max-width: 42rem; }
.adventure-level-head .eyebrow { color: var(--green); }
.adventure-level-head h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: .2rem 0 1rem; }

.adventure-teaser { line-height: 1.6; color: #4e6057; }
.adventure-reset-notice { margin: 0 0 1.5rem; padding: .8rem 1rem; background: #fbeed2; border: 1px solid var(--rule); border-radius: 2px; font-size: .85rem; }

.adventure-intro p { line-height: 1.6; }
.adventure-goal { padding: .8rem 1rem; background: var(--mint-pale); border-radius: 2px; }

.adventure-scene { border: 1px solid var(--rule); background: var(--white); padding: 1.4rem; border-radius: 2px; margin-bottom: 1.5rem; }
.adventure-scene-kind { margin: 0 0 .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.adventure-scene-prompt { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
.adventure-setback { border-color: var(--rust); border-left-width: 4px; }
.adventure-setback .adventure-scene-kind { color: var(--rust); }

.adventure-options { display: grid; gap: .6rem; }
.adventure-option { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; text-align: left; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); cursor: pointer; font-family: var(--sans); font-size: .92rem; }
.adventure-option:hover { border-color: var(--green); background: var(--mint-pale); }
.adventure-option-text { font-weight: 700; }
.adventure-option-note { font-size: .8rem; color: #607067; }

.adventure-timing-track { position: relative; height: 2.2rem; background: var(--paper-deep); border-radius: 999px; margin-bottom: 1rem; overflow: hidden; }
.adventure-timing-target { position: absolute; top: 0; bottom: 0; background: var(--mint-pale); border-left: 2px solid var(--green); border-right: 2px solid var(--green); }
.adventure-timing-marker { position: absolute; top: -2px; bottom: -2px; width: 6px; background: var(--forest); border-radius: 3px; transform: translateX(-50%); left: 0; }
.adventure-timing-marker.is-hit { background: var(--green); }
.adventure-timing-marker.is-miss { background: var(--rust); }
.adventure-timing-btn { display: block; margin: 0 auto .6rem; }
.adventure-timing-hint { text-align: center; font-size: .82rem; color: #607067; margin: 0; }
.adventure-timing-note { font-size: .9rem; color: #4e6057; }

/* Level 3 — map/route */
.adventure-map-message-progress { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin: 0 0 .3rem; }
.adventure-map-level { margin-bottom: 1rem; }
.adventure-map-canvas { height: 280px; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-deep); margin-bottom: .8rem; }
.adventure-map-pin-wrap { background: none; border: none; }
.adventure-map-pin { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--white); border: 1.5px solid var(--green); color: var(--forest); font-size: .72rem; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 4px rgba(24,37,31,.2); cursor: pointer; }
.adventure-map-pin--start { border-color: var(--ink); color: var(--ink); }
.adventure-map-pin--end { border-color: var(--gold, #8a6a1c); color: #6b5115; background: #fbeed2; cursor: default; }
.adventure-map-pin--risky { border-color: var(--rust); color: var(--rust); }
.adventure-map-waypoint-list { margin-top: .5rem; }

/* Level 5 — cargo puzzle */
.adventure-cargo-status { font-weight: 700; margin-bottom: .6rem; }
.adventure-cargo-warning { color: var(--rust); }
.adventure-cargo-grid-wrap { margin-bottom: .8rem; }
.adventure-cargo-grid { position: relative; display: grid; gap: 3px; background: var(--rule); border: 2px solid var(--ink); padding: 3px; aspect-ratio: 3 / 2; }
.adventure-cargo-cell { background: var(--paper-deep); }
.adventure-cargo-cell--emergency-row { background: #fbeed2; }
.adventure-cargo-cell.is-cursor { outline: 3px solid var(--green); outline-offset: -3px; }
.adventure-cargo-block { grid-row: span 1; grid-column: span 1; border: 1px solid var(--forest); background: var(--mint-pale); color: var(--forest); font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; padding: .2rem; cursor: grab; touch-action: none; }
.adventure-cargo-block--fragile { border-style: dashed; }
.adventure-cargo-feedback { min-height: 1.2rem; font-size: .85rem; color: var(--green); }
.adventure-cargo-feedback.is-error { color: var(--rust); }
.adventure-cargo-tray-label { font-size: .8rem; font-weight: 700; color: var(--green); margin: 0 0 .4rem; }
.adventure-cargo-tray { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.adventure-cargo-tile { border: 1px solid var(--rule); background: var(--white); border-radius: 2px; padding: .6rem .8rem; cursor: grab; touch-action: none; min-width: 9rem; }
.adventure-cargo-tile.is-selected { border-color: var(--green); background: var(--mint-pale); }
.adventure-cargo-tile-name { display: block; font-weight: 700; font-size: .88rem; }
.adventure-cargo-tile-meta { display: block; font-size: .72rem; color: #607067; margin-top: .2rem; }
.adventure-cargo-tray-empty { font-size: .85rem; color: #607067; }
.adventure-cargo-kb-controls { padding: .9rem 1rem; background: var(--mint-pale); border-radius: 2px; margin-bottom: 1rem; }
.adventure-cargo-kb-row { display: flex; gap: .4rem; margin: .6rem 0; }
.adventure-cargo-kb-btn { padding: .4rem .7rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; cursor: pointer; margin-right: .4rem; }
.adventure-cargo-actions { margin-top: 1rem; }
.adventure-cargo-drag-ghost { position: fixed; z-index: 80; transform: translate(-50%, -50%); pointer-events: none; padding: .4rem .7rem; background: var(--forest); color: var(--white); border-radius: 2px; font-size: .8rem; font-weight: 700; }

/* End-game screen */
.adventure-endgame { margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; }
.adventure-endgame-title { font-family: var(--serif); font-size: 1.6rem; margin: 0 0 .4rem; color: var(--forest); }
.adventure-endgame-why { line-height: 1.6; margin-bottom: 1.2rem; }
.adventure-endgame-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.adventure-endgame-score-item { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem; background: var(--paper-deep); border-radius: 2px; font-size: .85rem; }
.adventure-endgame-score-item strong { font-size: 1.2rem; }
.adventure-endgame-note { font-size: .82rem; color: #607067; margin: 0 0 1.2rem; }
.adventure-endgame-badges, .adventure-endgame-recap, .adventure-certificate { margin-bottom: 1.4rem; }
.adventure-endgame-badges h3, .adventure-endgame-recap h3, .adventure-certificate h3 { font-family: var(--serif); margin-bottom: .5rem; }
.adventure-endgame-badges ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.adventure-endgame-recap-level { border: 1px solid var(--rule); border-radius: 2px; padding: .5rem .8rem; margin-bottom: .5rem; }
.adventure-endgame-recap-level summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.adventure-endgame-recap-level ul { margin: .5rem 0 0; padding-left: 1.2rem; font-size: .85rem; }
.adventure-certificate { padding: 1.2rem 1.4rem; background: var(--mint-pale); border-radius: 2px; }
.adventure-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; }
.adventure-certificate-preview { margin-top: 1rem; }
.adventure-certificate-preview canvas { width: 100%; max-width: 40rem; height: auto; border: 1px solid var(--rule); display: block; }
.adventure-certificate-download { display: inline-block; margin-top: .7rem; }
.adventure-endgame-replay { display: flex; gap: .8rem; flex-wrap: wrap; }
.adventure-kb-btn { padding: .55rem 1rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; cursor: pointer; font-family: var(--sans); font-size: .88rem; }
.adventure-kb-btn:hover { border-color: var(--green); }

.adventure-outro-text { line-height: 1.6; font-size: 1.02rem; }
.adventure-outro-nav { margin-top: 1.2rem; }

.adventure-history { margin: 1.5rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--rule); background: var(--mint-pale); border-radius: 2px; }
.adventure-history h3 { margin-top: 0; font-family: var(--serif); }
.adventure-history p { line-height: 1.6; }
.adventure-history-links { font-size: .85rem; margin: 0; }

/* Locked level */
.adventure-level--locked { padding: 1.5rem; border: 1px solid var(--rule); background: var(--white); border-radius: 2px; }
.adventure-lock-panel { margin-top: 1.2rem; padding: 1.2rem; background: var(--mint-pale); border-radius: 2px; }
.adventure-lock-panel p { margin-top: 0; }
.adventure-access-form { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.adventure-access-form input { flex: 1 1 200px; padding: .55rem .7rem; border: 1px solid var(--rule); border-radius: 2px; font-family: var(--sans); }
.adventure-access-submit { padding: .55rem 1rem; border: 1px solid var(--green); background: var(--green); color: var(--white); border-radius: 2px; cursor: pointer; }

.adventure-reset { margin-top: 2rem; }
.adventure-reset button { background: none; border: 0; color: #607067; font-size: .8rem; text-decoration: underline; cursor: pointer; padding: 0; }

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

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

@media (max-width: 640px) {
  .adventure-hud { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ===================================================================
   Level 2 — The Secret Printing Press (visual minigame)
   Also used, in a cut-down form, by the free preview on /adventure/.
   =================================================================== */
.pp-phase-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pp-phase-eyebrow { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.pp-relaxed-toggle { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #4e6057; }
.pp-relaxed-toggle input { width: 1.1rem; height: 1.1rem; }

/* Shared scene illustration */
.pp-stage-wrap { border: 1px solid var(--rule); background: var(--white); border-radius: 3px; padding: .6rem; margin-bottom: 1rem; }
.pp-stage { display: block; width: 100%; height: auto; max-height: 260px; }
.pp-stage-wall { fill: var(--paper-deep); }
.pp-stage-floor { fill: #d8cdb4; }
.pp-stage-table { fill: #a9865a; }
.pp-stage-press-body { fill: var(--ink); }
.pp-stage-press-plate { fill: #5c6b62; }
.pp-stage-lever { transform-box: fill-box; transform-origin: 100% 100%; transition: transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .pp-stage-lever { transition: none; } }
.pp-stage-lever.is-pulled { transform: rotate(-52deg); }
.pp-stage-sheet { opacity: 0; transition: opacity .4s ease; }
.pp-stage-sheet.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pp-stage-sheet { transition: none; } }
.pp-stage-ink-pot { fill: var(--forest); }
.pp-stage-paper-stack { fill: var(--white); stroke: var(--rule); }
.pp-stage-cabinet { fill: #6b4f36; }
.pp-stage-cabinet-glow { opacity: 0; transition: opacity .3s ease; }
.pp-stage-cabinet-glow.is-active { opacity: 1; }
.pp-stage-window { fill: #cfe0da; stroke: var(--ink); }
.pp-stage-door { fill: #7a5a3a; stroke: var(--ink); }
.pp-stage-shadow { opacity: 0; transform: translateX(-40px); }
.pp-stage-shadow.is-passing { animation: pp-shadow-pass 2.4s ease-in-out; }
@keyframes pp-shadow-pass { 0% { opacity: 0; transform: translateX(-40px); } 20% { opacity: .55; } 80% { opacity: .55; } 100% { opacity: 0; transform: translateX(40px); } }
@media (prefers-reduced-motion: reduce) { .pp-stage-shadow.is-passing { animation: none; opacity: .55; } }
.pp-stage-door.is-knocking { animation: pp-knock .35s ease-in-out 3; }
@keyframes pp-knock { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pp-stage-door.is-knocking { animation: none; } }
.pp-stage-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pp-flicker 1.6s ease-in-out infinite; }
@keyframes pp-flicker { 0%, 100% { transform: scaleY(1) rotate(0deg); } 50% { transform: scaleY(1.08) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .pp-stage-flame { animation: none; } }

/* Phase 1 — prepare the press */
.pp-worktable { display: grid; gap: 1rem; }
.pp-item-group { border: 1px solid var(--rule); border-radius: 2px; padding: .8rem 1rem; background: var(--paper); }
.pp-item-group-label { margin: 0 0 .5rem; font-weight: 700; font-size: .85rem; color: var(--forest); }
.pp-item-choices { display: grid; gap: .5rem; }
.pp-item-btn { display: flex; align-items: center; gap: .6rem; text-align: left; padding: .65rem .8rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); cursor: pointer; font-family: var(--sans); }
.pp-item-btn:hover { border-color: var(--green); }
.pp-item-btn.is-selected { border-color: var(--green); background: var(--mint-pale); box-shadow: inset 0 0 0 1px var(--green); }
.pp-item-icon { font-size: 1.3rem; flex: 0 0 auto; }
.pp-item-text strong { display: block; font-size: .9rem; }
.pp-item-text span { font-size: .78rem; color: #607067; }
.pp-decoy-item { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border: 1px dashed var(--rust); border-radius: 2px; background: #fbeed2; cursor: pointer; font-family: var(--sans); }
.pp-decoy-item.is-picked { border-style: solid; background: var(--mint-pale); border-color: var(--rule); }
.pp-decoy-note { font-size: .78rem; color: #7a5a3a; }
.pp-prepare-confirm { margin-top: 1rem; }

/* Phase 2 — set the type */
.pp-typeset-status { min-height: 1.4rem; font-size: .85rem; color: var(--green); margin: 0 0 .6rem; }
.pp-typeset-status.is-error { color: var(--rust); }
.pp-slots { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pp-slot { width: 3rem; height: 3rem; border: 2px dashed var(--rule); border-radius: 2px; background: var(--paper); font-family: var(--serif); font-size: 1.3rem; font-weight: 700; cursor: pointer; }
.pp-slot.is-filled { border-style: solid; border-color: var(--green); background: var(--white); }
.pp-slot.is-highlighted { outline: 3px solid var(--green); outline-offset: 2px; }
.pp-tray-label { font-size: .8rem; font-weight: 700; color: var(--green); margin: 1rem 0 .4rem; }
.pp-tray { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pp-tile { width: 3rem; height: 3rem; border: 1px solid var(--rule); border-radius: 2px; background: #6b4f36; color: var(--white); font-family: var(--serif); font-size: 1.3rem; font-weight: 700; cursor: grab; touch-action: none; }
.pp-tile.is-flipped { transform: scaleX(-1); }
.pp-tile.is-selected { outline: 3px solid var(--green); outline-offset: 2px; }
.pp-typeset-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .7rem .9rem; background: var(--mint-pale); border-radius: 2px; }
.pp-typeset-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* Phase 3 — ink the form */
.pp-ink-wrap { display: flex; gap: 1.2rem; align-items: flex-end; margin-bottom: 1rem; }
.pp-ink-gauge { position: relative; width: 3rem; height: 10rem; background: var(--paper-deep); border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
.pp-ink-gauge-zone { position: absolute; left: 0; right: 0; background: var(--mint-pale); }
.pp-ink-gauge-fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--forest); }
.pp-ink-gauge-fill.is-hit { background: var(--green); }
.pp-ink-gauge-fill.is-miss { background: var(--rust); }
.pp-ink-btn { display: block; }
.pp-ink-hint { font-size: .82rem; color: #607067; }

/* Phase 5 — hide the evidence */
.pp-hide-timer { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--rust); margin: 0 0 .8rem; }
.pp-hide-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.pp-hide-action { min-height: 44px; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper); cursor: pointer; font-family: var(--sans); font-weight: 700; text-align: left; }
.pp-hide-action:hover { border-color: var(--green); }
.pp-hide-action.is-done { border-color: var(--green); background: var(--mint-pale); color: var(--forest); cursor: default; }

/* Result screen */
.pp-result-sheet-wrap { text-align: center; margin-bottom: 1.2rem; }
.pp-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.pp-score-item { padding: .7rem .9rem; background: var(--paper-deep); border-radius: 2px; }
.pp-score-item strong { display: block; font-family: var(--serif); font-size: 1.05rem; }
.pp-score-item span { font-size: .78rem; color: #607067; }
.pp-result-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }

/* Free preview widget on /adventure/ */
.pp-preview-wrap { max-width: 34rem; margin: 0 auto; }
.pp-preview-cta { margin-top: 1rem; text-align: center; }

/* Level cards on the /adventure/ landing page */
.pp-level-cards { display: grid; gap: .8rem; }
.pp-level-card { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--white); }
.pp-level-icon { flex: 0 0 auto; color: var(--green); }
.pp-level-card h3 { margin: .1rem 0 .3rem; font-family: var(--serif); font-size: 1.05rem; }
.pp-level-card p { margin: 0; font-size: .88rem; color: #4e6057; }
.pp-level-card .eyebrow { margin: 0; }

@media (max-width: 480px) {
  .pp-slot, .pp-tile { width: 2.75rem; height: 2.75rem; font-size: 1.15rem; }
  .pp-stage { max-height: 200px; }
}