/* The Puzzle Vault main screen (index.php) — on the Frenika Devon brand system.
 *
 * Loaded after play/brand.css (the synced copy of frenikadevon's
 * assets/css/brand.css — never edit that copy here). Every colour is a brand
 * token, so a brand change arrives through the sync alone. This file only lays
 * out the pieces particular to this page; the admin console has its own
 * assets/css/admin.css on the same system.
 *
 * Several class names here are shared with brand.css (.btn, .btn-primary,
 * .btn-ghost, .panel, .badge …) — the rules below are written for THIS page's
 * markup and win by loading second. The IDs and state classes app.js toggles
 * (.hidden, .locked, .show, .shake, .loading, .on, .is-spoiled, .note-animate,
 * .cta-mystery) are all styled here; keep them if you touch the markup.
 *
 * No navigation bar on this page (owner's choice): the arch, the name and the
 * code box are all a visitor holding a printed puzzle needs.
 */

.hidden { display: none !important; }

body.vault { display: flex; flex-direction: column; min-height: 100vh; }

.stage {
    flex: 1;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: clamp(40px, 7vw, 72px) var(--gutter) clamp(56px, 8vw, 88px);
}

/* ---- hero ---- */

.hero { text-align: center; margin-bottom: 22px; }
.hero-arch { display: inline-block; margin-bottom: 14px; }
.hero-arch .arch { display: block; }
.hero .eyebrow { display: block; margin-bottom: 8px; }
.logo {
    margin: 0;
    font-size: clamp(2.8rem, 8vw, 4.6rem);
    line-height: 1;
}
.hero .rule { margin: 22px auto 20px; }
.tagline { margin: 0 auto; max-width: 34ch; }

/* ---- "How this portal works" link (also the "Reveal the answer" link) ---- */

.how-row { text-align: center; margin: 0 0 26px; }
.how-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    background: none;
    border: 0;
    font: inherit;
    font-weight: 800;
    font-size: .98rem;
    color: var(--grape);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.how-link:hover { color: var(--berry); }
.how-q {
    display: inline-grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--grape);
    color: #fff;
    font-size: .85rem;
    font-weight: 900;
    text-decoration: none;
}
.how-link:hover .how-q { background: var(--berry); }
.danger-link { color: #b42318; font-size: .92rem; }
.danger-link:hover { color: #8f1b12; }
.danger-q, .danger-link:hover .danger-q { background: #b42318; }

/* ---- cards ---- */

.panel {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 6px solid var(--pink);
    border-radius: var(--r-lg);
    padding: clamp(22px, 4vw, 36px);
    box-shadow: var(--shadow-md);
    animation: popin .35s ease both;
}
@keyframes popin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.project-card { border-top-color: var(--teal); }

.field-label {
    display: block;
    margin-bottom: 10px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--berry);
}

.code-row { display: flex; flex-wrap: wrap; gap: 12px; }
.code-row .btn { flex: 0 0 auto; }
.vault .code-input {
    flex: 1 1 220px;
    min-width: 0;
    min-height: 58px;
    padding: 12px 18px;
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 60;
    font-weight: 650;
    font-size: 1.5rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
}
.vault .code-input::placeholder { color: #c8b7a6; letter-spacing: .14em; }
.vault .completion-input { font-size: 1.2rem; letter-spacing: .08em; }

.text-input, .text-area { width: 100%; }

/* ---- buttons: the brand's, plus the few this page needs ---- */

.vault .btn { gap: 8px; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: .78rem; }
.btn.full { width: 100%; }
.btn-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-success { background: var(--teal-deep); color: #fff; }
.btn-success:hover { background: #0b5d57; color: #fff; }
.btn-danger { background: #b42318; color: #fff; }
.btn-danger:hover { background: #8f1b12; color: #fff; }
.btn.loading { pointer-events: none; opacity: .7; }
.btn.loading .btn-label::after { content: " …"; }

.error-msg {
    margin: 10px 0 0;
    min-height: 1.3em;
    font-weight: 700;
    font-size: .95rem;
    color: #b42318;
    opacity: 0;
    transition: opacity .2s;
}
.error-msg.show { opacity: 1; }
.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---- the loaded puzzle ---- */

.project-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    background: var(--berry-tint);
    color: var(--berry-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.project-title { margin: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); }

.puzzle-banner { margin: 0 0 18px; }
.puzzle-banner-img {
    display: block;
    width: 100%;
    border-radius: var(--r-md);
    border-bottom: 4px solid transparent;
    border-image: var(--rainbow) 1;
}

.block { padding: 22px 0 0; margin-top: 22px; border-top: 1px solid var(--line); }
.project-head + .block, .puzzle-banner + .block { border-top: 0; margin-top: 0; padding-top: 0; }
.block-title {
    margin: 0 0 12px;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--berry);
}
.block-body { color: var(--ink); }
.instruction-block .block-body {
    padding: 16px 20px;
    background: var(--paper-2);
    border-left: 4px solid var(--marigold);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Rich text from the admin editor. */
.rich p { margin: 0 0 .7em; }
.rich p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: .3em 0 .7em; padding-left: 1.5em; }
.rich li { margin: .2em 0; }
.rich h3, .rich h4 { margin: .5em 0 .3em; }
.rich blockquote { margin: .6em 0; padding: 4px 16px; border-left: 4px solid var(--line); color: var(--ink-soft); }
.rich img { border-radius: var(--r-sm); }

.toggle-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.toggle-row .block-title { margin: 0; }

/* The hints switch. */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 700; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slider {
    position: relative;
    width: 52px; height: 30px;
    border-radius: 999px;
    background: var(--paper-3);
    border: 1px solid var(--line);
    transition: background .2s;
}
.slider::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .2s;
}
.switch input:checked + .slider { background: var(--berry); border-color: var(--berry); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.switch input:focus-visible + .slider { outline: 3px solid var(--orange); outline-offset: 3px; }
.switch-text { font-size: .95rem; color: var(--ink-soft); }

.notes-viewer {
    margin-top: 14px;
    padding: 18px 20px;
    background: var(--paper-2);
    border-radius: var(--r-md);
}
.note-counter {
    margin-bottom: 8px;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--marigold);
}
.note-item { min-height: 2em; }
.note-animate { animation: slidein .35s ease both; }
@keyframes slidein { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.note-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.notes-empty { color: var(--muted); font-style: italic; margin: 10px 0 0; }

/* ---- solution ---- */

.reveal-answer { margin-top: 12px; text-align: center; }
.spoiler-warning {
    margin-top: 12px;
    padding: 20px 22px;
    text-align: left;
    background: #fdecea;
    border-left: 4px solid #b42318;
    border-radius: 0 var(--r-md) var(--r-md) 0;
}
.spoiler-title { margin: 0 0 8px; color: #8f1b12; }
.spoiler-body { color: var(--ink-soft); margin-bottom: 16px; }
.spoiler-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.spoiler-actions .btn { flex: 1 1 200px; }

.completion-reveal {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    padding: 24px 22px;
    text-align: center;
    background: #dcf3ef;
    border: 1px solid #a9e2da;
    border-radius: var(--r-md);
    animation: reveal .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes reveal { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.reveal-title { margin: 0 0 12px; font-size: clamp(1.4rem, 3.5vw, 1.8rem); color: var(--teal-deep); }
.completion-reveal .rich { display: inline-block; text-align: left; }
.completion-reveal.is-spoiled { background: #fdf0dc; border-color: #f1d3a4; }
.completion-reveal.is-spoiled .reveal-title { color: var(--marigold); }
.hints-used { margin: 0 0 12px; font-weight: 700; color: var(--ink-soft); }

.confetti-burst { position: absolute; inset: 0; pointer-events: none; }
.confetti-burst i {
    position: absolute; top: 0;
    width: 8px; height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: confetti 1.6s ease-out forwards;
}
@keyframes confetti {
    0% { opacity: 1; transform: translateY(-10px) rotate(0); }
    100% { opacity: 0; transform: translateY(220px) rotate(540deg); }
}

/* ---- the solution file, behind its blur gate ----
 * The overlay is opaque enough on its own that nothing leaks through even if a
 * browser refuses to blur an embedded PDF. */

.reveal-shell { position: relative; }
.reveal-shell.locked {
    overflow: hidden;
    min-height: 220px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper-2);
}
@media (min-width: 700px) { .file-reveal.locked { min-height: 300px; } }
.reveal-shell.locked .reveal-content {
    filter: blur(16px) saturate(.55);
    transform: scale(1.04);
    pointer-events: none;
    user-select: none;
}
.reveal-shell.locked .file-frame { height: 300px; min-height: 0; visibility: hidden; }
.reveal-overlay {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 20px;
    border: 0;
    border-radius: var(--r-md);
    background: rgba(247, 236, 223, .9);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: background .2s;
}
.reveal-shell:not(.locked) .reveal-overlay { display: none; }
.reveal-overlay:hover, .reveal-overlay:focus-visible { background: rgba(247, 236, 223, .8); }
.reveal-glass { display: block; width: 58px; height: 58px; }
.reveal-glass svg {
    width: 100%; height: 100%;
    fill: none; stroke: var(--berry); stroke-width: 5; stroke-linecap: round;
    animation: glass-sweep 3.2s ease-in-out infinite;
}
@keyframes glass-sweep {
    0%, 100% { transform: translate(-6px, 0) rotate(-8deg); }
    50%      { transform: translate(6px, -3px) rotate(8deg); }
}
.reveal-text { font-family: var(--font-display); font-weight: 650; font-size: 1.4rem; }
.reveal-hint { font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.file-viewer { margin-top: 12px; }
.file-image { display: block; max-width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); }
.file-frame { width: 100%; height: 60vh; min-height: 320px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
@media (min-width: 700px) { .file-frame { height: 70vh; min-height: 460px; } }
#fileOpen { text-decoration: none; }

/* ---- next puzzle / review: the plum band ---- */

.cta-block, .review-block {
    margin-top: 26px;
    padding: 28px 24px;
    text-align: center;
    background: var(--plum);
    color: var(--on-plum);
    border: 0;
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
}
.cta-block::before, .review-block::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--rainbow);
}
.cta-block .block-title, .review-block .block-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 60;
    font-size: clamp(1.4rem, 3.4vw, 1.8rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--on-plum);
}
.cta-body { margin: 0 auto 18px; max-width: 46ch; color: var(--on-plum-soft); }
.cta-btn { background: var(--yellow); color: var(--ink); }
.cta-btn:hover { background: #fff; color: var(--ink); }
.cta-shop { display: block; margin-top: 14px; color: var(--yellow); font-weight: 700; }
.cta-shop:hover { color: #fff; }
.cta-block.cta-mystery::before { background: linear-gradient(90deg, var(--purple), var(--pink)); }

/* ---- "Tell the crew" (Patreon visitors only) ---- */

.crew-block {
    margin-top: 26px;
    padding: 24px 22px;
    text-align: center;
    background: var(--berry-tint);
    border: 0;
    border-radius: var(--r-lg);
}
.crew-block .block-title {
    font-family: var(--font-display);
    font-variation-settings: 'SOFT' 60;
    font-size: clamp(1.4rem, 3.4vw, 1.8rem);
    font-weight: 650;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
}
.crew-body { margin: 0 auto 16px; max-width: 44ch; color: var(--ink-soft); }
.crew-block + .cta-block { margin-top: 14px; }

/* ---- newsletter + feedback ---- */
.newsletter-sub { color: var(--ink-soft); margin-bottom: 14px; }
.newsletter-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.newsletter-fields .text-input { flex: 1 1 200px; width: auto; }
.newsletter-fields .btn { flex: 0 0 auto; }
.newsletter-disclaimer { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }
.newsletter-thanks, .feedback-thanks {
    padding: 20px;
    text-align: center;
    background: #dcf3ef;
    border-radius: var(--r-md);
}
.newsletter-thanks .reveal-title, .feedback-thanks .reveal-title { margin-bottom: 4px; }

.star-rating { display: inline-flex; gap: 4px; margin: 0 0 16px; }
.star {
    padding: 0 2px;
    background: none;
    border: 0;
    font-size: 2.2rem;
    line-height: 1;
    color: #d9c4ae;   /* an empty star, visible on the card */
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.star:hover { transform: scale(1.12); }
.star.on { color: var(--orange); }

.difficulty-label { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.difficulty-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
@media (min-width: 480px) {
    .difficulty-options { flex-direction: row; }
    .difficulty-options .diff-opt { flex: 1 1 0; justify-content: center; }
}
.diff-opt {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 46px; padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.diff-opt:hover { border-color: var(--berry); }
.diff-opt.on { background: var(--berry-tint); border-color: var(--berry); color: var(--berry-dark); }
.diff-icon { font-size: 1.15rem; line-height: 1; }
.feedback-comment { margin-bottom: 14px; }

#resetBtn { margin-top: 30px; }

/* ---- "How this portal works" dialog ---- */

.how-dialog {
    width: min(620px, calc(100% - 32px));
    max-height: calc(100% - 32px);
    padding: 0;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--card);
    color: var(--ink);
    box-shadow: var(--shadow-md);
}
.how-dialog::backdrop { background: rgba(36, 17, 47, .55); }
.how-dialog-inner { padding: clamp(24px, 4vw, 36px); border-top: 6px solid var(--pink); }
.how-dialog-title { margin: 0 0 10px; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.how-intro { color: var(--ink-soft); }
.how-steps { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 14px; }
.how-steps li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.55; }
.how-step-n {
    flex: 0 0 auto;
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--berry);
    color: #fff;
    font-weight: 800;
}
.how-foot { color: var(--muted); font-size: .95rem; }

/* ---- footer ---- */

.vault .site-footer.simple a { text-decoration: underline; }

@media (max-width: 560px) {
    .code-row .btn, .newsletter-fields .btn { width: 100%; }
    .panel { border-radius: var(--r-md); }
}

@media (prefers-reduced-motion: reduce) {
    .panel, .completion-reveal, .note-animate, .shake { animation: none; }
    .reveal-glass svg { animation: none; }
}