:root {
    --ink: #4d2d3b;
    --muted: #8b6977;
    --rose: #c4618b;
    --rose-deep: #a74770;
    --rose-soft: #e9adc5;
    --cream: #fff9fb;
    --surface: rgba(255, 250, 252, .78);
    --surface-strong: rgba(255, 250, 252, .94);
    --line: rgba(137, 77, 103, .13);
    --shadow: 0 26px 70px rgba(126, 70, 95, .12);
    --ease: cubic-bezier(.22, .8, .24, 1);
    --search-glow-opacity: .18;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f8e7ee; }
body {
    margin: 0;
    min-height: 100dvh;
    color: var(--ink);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #f8e7ee;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}
button, input { font: inherit; }
button { color: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(196, 97, 139, .22); outline-offset: 3px; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
[hidden] { display: none !important; }

/* ---------- Shared controls ---------- */
.primary-button,
.secondary-button {
    width: 100%;
    min-height: 56px;
    border-radius: 18px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .22s ease, background .22s ease, opacity .2s ease;
}
.primary-button {
    color: #fff;
    background: linear-gradient(135deg, #ca648f 0%, #ad4d76 52%, #d5799f 100%);
    box-shadow: 0 14px 30px rgba(174, 69, 112, .24);
    font-weight: 650;
}
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(174, 69, 112, .29); }
.primary-button:active { transform: translateY(0) scale(.99); }
.primary-button:disabled { opacity: .46; cursor: default; transform: none; box-shadow: none; }
.primary-button svg { width: 20px; height: 20px; }
.secondary-button {
    color: var(--rose-deep);
    background: rgba(255,255,255,.47);
    border: 1px solid rgba(154, 82, 114, .12);
    font-weight: 600;
}
.secondary-button:hover { background: rgba(255,255,255,.7); }
.text-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--rose-deep);
    font-weight: 650;
    cursor: pointer;
}
.field { display: grid; gap: 9px; }
.field > span { color: var(--muted); font-size: 13px; font-weight: 600; }
.field input {
    width: 100%;
    height: 56px;
    border: 1px solid rgba(126, 72, 96, .12);
    border-radius: 17px;
    padding: 0 17px;
    color: var(--ink);
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.field input:focus {
    outline: none;
    background: rgba(255,255,255,.92);
    border-color: rgba(169, 91, 126, .3);
    box-shadow: 0 0 0 4px rgba(196, 97, 139, .09);
}
.field--code input { letter-spacing: .22em; text-align: center; font-size: 22px; font-weight: 700; }
/* Answer feedback is part of the form, not a floating alert. */
.form-feedback {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-5px);
    transition: grid-template-rows .34s var(--ease), opacity .28s ease, transform .34s var(--ease);
}
.form-feedback__inner { min-height: 0; overflow: hidden; }
.form-feedback p {
    margin: 0;
    padding: 13px 16px;
    border-radius: 17px;
    color: #87405f;
    background: linear-gradient(135deg, rgba(255,247,250,.76), rgba(239,194,211,.42));
    border: 1px solid rgba(177,78,119,.13);
    box-shadow: 0 10px 24px rgba(137,65,96,.07), inset 0 1px 0 rgba(255,255,255,.72);
    font-size: 14px;
    font-weight: 620;
    line-height: 1.5;
    text-align: center;
}
.form-feedback.is-visible { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.timeline-form .form-feedback.is-visible { margin-bottom: 14px; }
.form-feedback.is-bumping p { animation: answerFeedbackBump .38s var(--ease); }
.answer-form.has-error .field input {
    border-color: rgba(177,78,119,.28);
    box-shadow: 0 0 0 4px rgba(196,97,139,.07);
}

.answer-choices { display: grid; gap: 11px; }
.answer-choice { position: relative; display: block; cursor: pointer; }
.answer-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.answer-choice__surface {
    min-height: 58px;
    padding: 10px 14px 10px 18px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #674252;
    background: rgba(255,255,255,.57);
    border: 1px solid rgba(132,72,99,.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    transition: transform .2s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease, color .22s ease;
}
.answer-choice__text { font-size: 15px; font-weight: 650; line-height: 1.35; }
.answer-choice__mark {
    flex: 0 0 auto;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: transparent;
    background: rgba(190,93,134,.07);
    border: 1px solid rgba(160,78,113,.12);
    transition: color .2s ease, background .22s ease, border-color .22s ease, transform .22s var(--ease);
}
.answer-choice__mark svg { width: 17px; height: 17px; stroke-width: 2; }
.answer-choice:hover .answer-choice__surface { background: rgba(255,255,255,.76); }
.answer-choice:active .answer-choice__surface { transform: scale(.992); }
.answer-choice > input:focus-visible + .answer-choice__surface {
    outline: 3px solid rgba(196,97,139,.18);
    outline-offset: 2px;
}
.answer-choice > input:checked + .answer-choice__surface {
    color: #6f304d;
    border-color: rgba(183,74,120,.28);
    background: linear-gradient(135deg, rgba(255,248,251,.92), rgba(236,179,203,.58));
    box-shadow: 0 12px 28px rgba(152,69,105,.10), inset 0 1px 0 rgba(255,255,255,.86);
}
.answer-choice > input:checked + .answer-choice__surface .answer-choice__mark {
    color: #fff;
    background: linear-gradient(135deg, #cf6c95, #ac4b74);
    border-color: transparent;
    transform: scale(1.04);
}
.answer-form.has-error .answer-choice__surface { border-color: rgba(177,78,119,.18); }

@keyframes answerFeedbackBump {
    0% { transform: translateY(0); }
    36% { transform: translateY(-3px); }
    70% { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

/* ---------- Login ---------- */
.login-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 14% 15%, rgba(255,255,255,.92) 0 18%, transparent 44%),
        radial-gradient(circle at 88% 76%, rgba(231,178,201,.38), transparent 40%),
        linear-gradient(135deg, #fff9fb 0%, #f8e7ee 52%, #f2d6e1 100%);
}
.login-wrap {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 28px 18px;
    position: relative;
    z-index: 1;
}
.login-card {
    width: min(100%, 560px);
    padding: clamp(28px, 6vw, 52px);
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 34px;
    background: rgba(255, 250, 252, .74);
    box-shadow: var(--shadow);
    backdrop-filter: blur(22px);
}
.login-card h1 { margin: 0 0 34px; font-size: clamp(36px, 7vw, 54px); line-height: 1.04; letter-spacing: -.055em; }
.login-form { display: grid; gap: 20px; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-card input { position: absolute; opacity: 0; pointer-events: none; }
.role-card__inner {
    min-height: 62px;
    padding: 14px 16px;
    border: 1px solid rgba(126,72,96,.1);
    border-radius: 18px;
    background: rgba(255,255,255,.44);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.role-card input:checked + .role-card__inner { background: rgba(255,255,255,.84); border-color: rgba(190,78,126,.32); box-shadow: 0 12px 30px rgba(126,70,95,.09); transform: translateY(-2px); }
.role-card__title { font-weight: 650; line-height: 1.25; }

/* ---------- Quest permanent shell ---------- */
.quest-page { overflow: hidden; background: #f8e7ee; }
.quest-app {
    min-height: 100dvh;
    isolation: isolate;
    position: relative;
    overflow: hidden;
}
.quest-ambient {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.92), transparent 34%),
        radial-gradient(circle at 90% 82%, rgba(218,157,183,.34), transparent 42%),
        linear-gradient(145deg, #fff8fb 0%, #f8e6ee 48%, #f0cedc 100%);
    transform: translateZ(0);
}
.quest-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,calc(var(--search-glow-opacity) + .08)), transparent 46%);
    opacity: .7;
    transition: opacity 1s ease;
}
.quest-ambient__granim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.4s ease;
}
.quest-ambient__wash {
    position: absolute;
    display: block;
    border-radius: 48% 52% 56% 44% / 43% 48% 52% 57%;
    filter: blur(40px);
    opacity: 0;
    transition: opacity 1.4s ease;
}
.quest-ambient__wash--one { width: 54vw; height: 48vw; left: -13vw; top: -15vw; background: rgba(255,255,255,.46); }
.quest-ambient__wash--two { width: 46vw; height: 42vw; right: -8vw; top: 12vh; background: rgba(227,153,185,.28); }
.quest-ambient__wash--three { width: 48vw; height: 40vw; left: 25vw; bottom: -18vw; background: rgba(251,219,232,.48); }
.quest-app.is-finale .quest-ambient { background: linear-gradient(145deg, #fff7fa, #f3d7e3 58%, #e9bfd0); }
.quest-app.is-finale .quest-ambient__granim { opacity: .82; }
.quest-app.is-finale .quest-ambient__wash { opacity: 1; }
.quest-app.is-finale .quest-ambient__wash--one { animation: organicFloatOne 14s ease-in-out infinite alternate; }
.quest-app.is-finale .quest-ambient__wash--two { animation: organicFloatTwo 17s ease-in-out infinite alternate; }
.quest-app.is-finale .quest-ambient__wash--three { animation: organicFloatThree 19s ease-in-out infinite alternate; }

.quest-logout {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    z-index: 20;
}
.icon-button {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(127,73,97,.09);
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    backdrop-filter: blur(14px);
    cursor: pointer;
    color: rgba(91,49,67,.72);
}
.icon-button svg { width: 19px; height: 19px; }

.quest-stage {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: max(76px, calc(env(safe-area-inset-top) + 60px)) 20px max(34px, calc(env(safe-area-inset-bottom) + 22px));
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior: contain;
}
.scene-host {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: calc(100dvh - 112px);
    display: grid;
    place-items: center;
}
.quest-scene {
    width: min(100%, 700px);
    max-width: 100%;
    min-width: 0;
    margin: auto;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    will-change: opacity, transform;
    contain: layout style;
}
.quest-scene.is-transitioning { pointer-events: none; }
.quest-scene.scene-enter-start {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(.996);
    transition: opacity 580ms cubic-bezier(.16,1,.3,1), transform 580ms cubic-bezier(.16,1,.3,1);
}
.quest-scene.scene-enter-start.scene-enter-active {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}
.story-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 34px;
    background: var(--surface);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px);
    padding: clamp(26px, 5vw, 46px);
}
.story-card__head { text-align: center; }
.story-card h1,
.completion-scene h1,
.finale-scene h1 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.05em;
    text-wrap: balance;
}
.story-card h1 { font-size: clamp(31px, 6vw, 48px); line-height: 1.08; }
.story-lead,
.story-secondary { margin: 17px auto 0; max-width: 590px; color: #745463; font-size: clamp(16px, 2.5vw, 19px); line-height: 1.62; text-wrap: balance; }
.story-secondary { color: #927482; font-size: 15px; }

.location-panel,
.question-panel,
.timeline-form,
.hidden-item-panel,
.photo-repeat,
.transition-panel { margin-top: 30px; }
.answer-form,
.photo-form { display: grid; gap: 16px; }
.question-panel h2 { margin: 0 0 20px; text-align: center; font-size: clamp(21px, 4vw, 28px); line-height: 1.3; letter-spacing: -.025em; }
.location-panel { display: grid; gap: 12px; }
.location-live { display: grid; gap: 18px; }
.location-live[hidden] { display: none; }
.distance-display { text-align: center; padding: 18px 0 2px; }
.distance-display > span { display: block; color: #9f7d8b; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .1em; }
.distance-display strong { display: block; margin-top: 7px; font-size: clamp(28px, 6vw, 42px); letter-spacing: -.045em; }
.distance-display p { margin: 10px auto 0; max-width: 460px; color: var(--muted); line-height: 1.55; }
.warmth-meter { height: 7px; border-radius: 99px; background: rgba(174,98,132,.08); overflow: hidden; }
.warmth-meter span { display: block; width: 2%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e99fbe, #bf5e89); transition: width .7s var(--ease); }
.location-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #927482; font-size: 13px; }

.timeline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.memory-card { position: relative; border: 0; padding: 0; border-radius: 20px; overflow: hidden; background: #f5dde7; aspect-ratio: 1 / .78; cursor: pointer; box-shadow: 0 10px 24px rgba(109,60,82,.09); transition: transform .28s var(--ease), box-shadow .28s ease, outline-color .2s ease; outline: 2px solid transparent; }
.memory-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.memory-card__index { position: absolute; left: 11px; bottom: 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(78,44,59,.62); backdrop-filter: blur(8px); font-size: 11px; font-weight: 700; }
.memory-card.is-selected { outline-color: rgba(196,79,128,.48); transform: scale(.985); }
.memory-card.is-swapping { animation: cardSwap .34s var(--ease); }

.hidden-item-panel { min-height: 126px; display: grid; place-items: center; }
.hidden-item-reveal { width: 100%; display: grid; gap: 18px; opacity: 0; transform: translateY(10px); }
.hidden-item-reveal:not([hidden]) { animation: revealPanel .52s var(--ease) forwards; }
.hidden-item-prompt { margin: 0 auto; max-width: 430px; text-align: center; color: #745463; font-size: 17px; line-height: 1.55; text-wrap: balance; }

.photo-repeat { display: grid; gap: 18px; }
.old-photo { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 18px 38px rgba(106,58,79,.12); }
.old-photo img { width: 100%; display: block; }
.photo-form { grid-template-columns: 1fr 1fr; }
.photo-capture { min-height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.52); border: 1px solid rgba(126,72,96,.1); cursor: pointer; font-weight: 650; color: var(--rose-deep); }
.photo-capture input { position: absolute; opacity: 0; pointer-events: none; }
.photo-capture__icon svg { width: 21px; height: 21px; }

/* ---------- Dedicated success/found scenes ---------- */
.completion-scene,
.found-scene,
.finale-scene {
    min-height: min(610px, calc(100dvh - 120px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 16px;
}
.completion-mark {
    width: 78px;
    height: 78px;
    margin-bottom: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #db82a7, #ae4f78);
    box-shadow: 0 18px 42px rgba(174,69,112,.24);
    animation: completionPop .72s var(--ease) both;
}
.completion-mark svg { width: 36px; height: 36px; stroke-width: 1.8; }
.completion-scene h1,
.found-scene h2 { font-size: clamp(34px, 7vw, 56px); line-height: 1.08; }
.completion-scene form { width: min(100%, 340px); margin-top: 32px; }
.found-scene { width: 100%; }
.found-scene h2 { margin: 0; max-width: 760px; letter-spacing: -.045em; text-wrap: balance; }
.found-scene .primary-button { width: min(100%, 340px); margin-top: 38px; }

/* ---------- Finale ---------- */
.finale-scene { position: relative; min-height: calc(100dvh - 70px); width: min(100%, 960px); margin: auto; transform: translateY(-4.2vh); }
.finale-heart { width: 164px; height: 126px; margin-bottom: 34px; filter: drop-shadow(0 20px 30px rgba(135,68,98,.1)); }
.finale-heart svg { width: 100%; height: 100%; overflow: visible; }
.finale-heart__glow,
.finale-heart__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.finale-heart__glow { stroke: rgba(255,255,255,.68); stroke-width: 9; filter: blur(8px); opacity: .7; }
.finale-heart__line { stroke: url(#finale-heart-gradient); stroke-width: 1.65; stroke-dasharray: 1; stroke-dashoffset: 1; animation: finaleHeartDraw 2.55s .24s var(--ease) forwards; }
.finale-scene h1 { max-width: 850px; font-size: clamp(48px, 8vw, 78px); line-height: .99; color: #4a2a39; }
.finale-scene p { margin: 22px auto 0; max-width: 620px; color: #7c5c69; font-size: clamp(17px, 2.4vw, 21px); line-height: 1.6; text-wrap: balance; }
.finale-decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.3s ease; }
.quest-app.is-finale .finale-decor { opacity: 1; }
.finale-petal,
.finale-falling-heart,
.finale-ring,
.finale-bouquet,
.finale-glint { position: absolute; display: block; pointer-events: none; will-change: transform, opacity; }
.finale-petal { width: var(--size, 18px); height: calc(var(--size, 18px) * 1.35); opacity: .5; }
.finale-petal svg { width: 100%; height: 100%; fill: var(--petal-fill, rgba(190,112,147,.22)); stroke: var(--petal-stroke, rgba(167,86,122,.3)); stroke-width: 1; }
.finale-falling-heart {
    width: var(--size, 15px);
    height: var(--size, 15px);
    filter: drop-shadow(0 7px 10px rgba(132,58,91,.08));
}
.finale-falling-heart svg { width: 100%; height: 100%; overflow: visible; }
.finale-falling-heart path {
    fill: var(--heart-fill, rgba(191,75,123,.32));
    stroke: var(--heart-stroke, rgba(158,64,104,.28));
    stroke-width: 1;
}
.finale-ring {
    width: var(--size, 30px);
    height: var(--size, 30px);
    border: 2px solid rgba(180,128,52,.88);
    border-radius: 50%;
    box-shadow:
        0 0 0 .8px rgba(255,249,221,.8) inset,
        0 0 16px rgba(211,169,96,.22),
        0 9px 20px rgba(112,72,36,.11);
}
.finale-ring::before {
    content: "";
    position: absolute;
    width: 5.5px;
    height: 5.5px;
    left: 50%;
    top: -4.5px;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 1.4px;
    border: 1px solid rgba(188,145,78,.76);
    background: linear-gradient(135deg, #fff, rgba(255,238,246,.96) 48%, rgba(238,210,224,.9));
    box-shadow: 0 0 13px rgba(255,255,255,.86), 0 0 20px rgba(224,185,119,.24);
}
.finale-ring::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    left: 50%;
    top: -2.8px;
    transform: translateX(-50%) rotate(45deg);
    border-top: 1px solid rgba(255,255,255,.95);
    border-left: 1px solid rgba(255,255,255,.75);
}
.finale-bouquet {
    width: var(--size, 38px);
    height: calc(var(--size, 38px) * 1.18);
    filter: drop-shadow(0 8px 13px rgba(116,55,82,.09));
}
.finale-bouquet svg { width: 100%; height: 100%; overflow: visible; }
.finale-bouquet .bouquet-stem {
    fill: none;
    stroke: var(--stem, rgba(115,139,105,.5));
    stroke-width: 1.5;
    stroke-linecap: round;
}
.finale-bouquet .bouquet-leaf { fill: var(--leaf, rgba(129,151,119,.3)); }
.finale-bouquet .bouquet-flower {
    fill: var(--flower, rgba(205,102,145,.46));
    stroke: var(--flower-stroke, rgba(168,74,114,.3));
    stroke-width: .8;
}
.finale-bouquet .bouquet-center { fill: rgba(255,241,211,.72); }
.finale-glint { width: var(--size, 7px); height: var(--size, 7px); opacity: .65; }
.finale-glint::before,
.finale-glint::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255,255,255,.9); border-radius: 99px; transform: translate(-50%,-50%); }
.finale-glint::before { width: 1px; height: 100%; }
.finale-glint::after { height: 1px; width: 100%; }

/* ---------- Admin ---------- */
.admin-page {
    min-height: 100dvh;
    background: linear-gradient(145deg, #fff9fb, #f5e1e9 58%, #ecd0dc);
}
.admin-shell { min-height: 100dvh; width: min(100%, 1120px); margin: 0 auto; padding: 26px 24px 36px; display: grid; align-content: center; gap: 18px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-header h1 { margin: 0; font-size: clamp(28px,4vw,40px); letter-spacing: -.045em; }
.admin-link, .admin-danger { border: 0; background: transparent; cursor: pointer; color: #8a6474; font-weight: 600; }
.admin-board { padding: 22px; border: 1px solid rgba(255,255,255,.62); border-radius: 28px; background: rgba(255,250,252,.72); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.admin-progress-track { height: 7px; margin-bottom: 20px; border-radius: 99px; overflow: hidden; background: rgba(159,87,118,.08); }
.admin-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #df8faf, #b14f78); transition: width .5s var(--ease); }
.admin-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.admin-stage-tile-form { margin: 0; }
.admin-stage-tile { width: 100%; min-height: 104px; padding: 14px; border-radius: 18px; border: 1px solid transparent; display: grid; align-content: space-between; gap: 8px; text-align: left; cursor: pointer; transition: transform .18s ease, background .2s ease, box-shadow .2s ease; }
.admin-stage-tile:hover { transform: translateY(-2px); }
.admin-stage-tile__number { font-size: 11px; font-weight: 700; opacity: .65; }
.admin-stage-tile strong { font-size: 13px; line-height: 1.25; }
.admin-stage-tile.is-done { background: #edd5df; color: #765060; }
.admin-stage-tile.is-active { background: linear-gradient(145deg, #c4618b, #a74770); color: #fff; box-shadow: 0 12px 26px rgba(151,75,108,.2); }
.admin-stage-tile.is-future { background: rgba(255,255,255,.5); color: #9a7b88; border-color: rgba(128,73,97,.08); }
.admin-reset-form { margin-top: 18px; text-align: right; }

/* ---------- Generic non-quest AJAX fade ---------- */
#app-root.simple-swap-out { animation: simpleOut .22s ease forwards; }
#app-root.simple-swap-in { animation: simpleIn .34s var(--ease) both; }

/* ---------- Animations ---------- */
@keyframes revealPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes completionPop { 0% { opacity: 0; transform: scale(.74); } 62% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes cardSwap { 0%,100% { transform: scale(1); } 50% { transform: scale(.96); } }
@keyframes finaleHeartDraw { to { stroke-dashoffset: 0; } }
@keyframes organicFloatOne { from { transform: translate3d(-2vw,-1vh,0) rotate(-4deg) scale(.94); } to { transform: translate3d(10vw,8vh,0) rotate(8deg) scale(1.12); } }
@keyframes organicFloatTwo { from { transform: translate3d(3vw,-2vh,0) rotate(5deg) scale(1); } to { transform: translate3d(-9vw,11vh,0) rotate(-7deg) scale(1.16); } }
@keyframes organicFloatThree { from { transform: translate3d(-4vw,5vh,0) rotate(-3deg) scale(1.04); } to { transform: translate3d(7vw,-8vh,0) rotate(6deg) scale(.92); } }
@keyframes simpleOut { to { opacity: 0; transform: translateY(-5px); } }
@keyframes simpleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
    .quest-stage {
        place-items: center;
        padding: max(64px, calc(env(safe-area-inset-top) + 52px)) 14px max(20px, calc(env(safe-area-inset-bottom) + 14px));
    }
    .quest-scene { width: 100%; }
    .story-card { border-radius: 28px; padding: 27px 20px 24px; }
    .story-card h1 { font-size: clamp(30px, 9vw, 42px); }
    .story-lead { font-size: 16px; line-height: 1.58; }
    .location-panel, .question-panel, .timeline-form, .hidden-item-panel, .photo-repeat, .transition-panel { margin-top: 24px; }
    .completion-scene, .found-scene { min-height: calc(100dvh - 100px); padding-inline: 10px; }
    .completion-scene h1, .found-scene h2 { font-size: clamp(34px, 10vw, 49px); }
    .timeline-grid { gap: 9px; }
    .memory-card { border-radius: 17px; }
    .photo-form { grid-template-columns: 1fr; }
    .finale-scene { min-height: calc(100dvh - 34px); padding: 24px 12px; transform: translateY(-4.8vh); }
    .finale-heart { width: 142px; height: 110px; margin-bottom: 30px; }
    .finale-scene h1 { font-size: clamp(43px, 12vw, 61px); line-height: 1.02; }
    .finale-scene p { font-size: 17px; line-height: 1.55; }
    .quest-ambient__wash { filter: blur(28px); }
    .quest-ambient__wash--one { width: 82vw; height: 72vw; }
    .quest-ambient__wash--two { width: 78vw; height: 68vw; }
    .quest-ambient__wash--three { width: 80vw; height: 70vw; left: 10vw; }
    .admin-shell { align-content: start; padding: max(22px, env(safe-area-inset-top)) 14px 24px; }
    .admin-board { padding: 14px; border-radius: 22px; }
    .admin-stage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .admin-stage-tile { min-height: 88px; padding: 11px; border-radius: 15px; }
    .admin-stage-tile strong { font-size: 12px; }
    .role-grid { grid-template-columns: 1fr; }
    .role-card__inner { min-height: 58px; }
}

@media (max-width: 420px) {
    .story-card { padding: 24px 17px 20px; }
    .primary-button, .secondary-button { min-height: 54px; border-radius: 17px; }
    .field input { height: 54px; }
    .location-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
    .admin-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Login opening scene ---------- */
.login-intro {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: max(28px, env(safe-area-inset-top)) 22px max(28px, env(safe-area-inset-bottom));
    background:
        radial-gradient(ellipse at 18% 16%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.34) 28%, transparent 52%),
        radial-gradient(ellipse at 82% 82%, rgba(215,132,168,.23) 0%, transparent 48%),
        linear-gradient(145deg, #fff9fb 0%, #f9e5ee 42%, #efcbd9 100%);
    will-change: opacity, filter, transform;
}
.login-intro.is-leaving {
    pointer-events: none;
    animation: loginIntroLeave .76s cubic-bezier(.22,.78,.22,1) forwards;
}
.login-intro__aurora,
.login-intro__sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.login-intro__glow {
    position: absolute;
    border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%;
    filter: blur(44px);
    opacity: .5;
    will-change: transform;
}
.login-intro__glow--one {
    width: min(78vw, 760px);
    aspect-ratio: 1.15;
    left: -20%;
    top: -18%;
    background: rgba(255,255,255,.84);
    animation: introAuroraOne 13s ease-in-out infinite alternate;
}
.login-intro__glow--two {
    width: min(70vw, 690px);
    aspect-ratio: 1;
    right: -22%;
    top: 24%;
    background: rgba(214,126,165,.24);
    animation: introAuroraTwo 16s ease-in-out infinite alternate;
}
.login-intro__glow--three {
    width: min(58vw, 580px);
    aspect-ratio: 1.1;
    left: 26%;
    bottom: -30%;
    background: rgba(255,225,237,.66);
    animation: introAuroraThree 18s ease-in-out infinite alternate;
}
.login-intro__content {
    position: relative;
    z-index: 4;
    width: min(100%, 850px);
    display: grid;
    justify-items: center;
    text-align: center;
}
.login-intro__content h1 {
    margin: 0;
    max-width: 850px;
    color: #4d2d3b;
    font-size: clamp(38px, 6.2vw, 76px);
    line-height: 1.055;
    letter-spacing: -.055em;
    font-weight: 650;
    text-wrap: balance;
    text-shadow: 0 2px 28px rgba(255,255,255,.58);
    animation: introTextArrive 1.05s .16s cubic-bezier(.2,.8,.2,1) both;
}
.intro-button {
    margin-top: clamp(34px, 6vh, 56px);
    min-width: 170px;
    min-height: 58px;
    padding: 0 24px;
    border: 1px solid rgba(135,71,100,.13);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #704257;
    background: rgba(255,255,255,.62);
    box-shadow: 0 18px 50px rgba(119,66,90,.1), inset 0 1px 0 rgba(255,255,255,.75);
    backdrop-filter: blur(16px);
    cursor: pointer;
    font-weight: 650;
    animation: introButtonArrive .9s .48s cubic-bezier(.2,.8,.2,1) both;
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.intro-button:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.78);
    box-shadow: 0 22px 56px rgba(119,66,90,.14), inset 0 1px 0 rgba(255,255,255,.85);
}
.intro-button:active { transform: translateY(0) scale(.985); }
.intro-button svg { width: 20px; height: 20px; }


.login-intro__sparkle {
    position: absolute;
    width: 12px;
    height: 12px;
    opacity: .3;
    animation: introSparkle 4.8s ease-in-out infinite;
}
.login-intro__sparkle::before,
.login-intro__sparkle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 0 14px rgba(206,118,157,.18);
    transform: translate(-50%, -50%);
}
.login-intro__sparkle::before { width: 2px; height: 100%; }
.login-intro__sparkle::after { width: 100%; height: 2px; }
.login-intro__sparkle--1 { left: 12%; top: 31%; animation-delay: -1s; }
.login-intro__sparkle--2 { left: 24%; top: 17%; transform: scale(.65); animation-delay: -3.1s; }
.login-intro__sparkle--3 { left: 35%; top: 79%; transform: scale(.52); animation-delay: -2.3s; }
.login-intro__sparkle--4 { left: 58%; top: 18%; transform: scale(.78); animation-delay: -.4s; }
.login-intro__sparkle--5 { left: 69%; top: 76%; transform: scale(.48); animation-delay: -3.7s; }
.login-intro__sparkle--6 { right: 11%; top: 36%; transform: scale(.72); animation-delay: -2.7s; }
.login-intro__sparkle--7 { right: 24%; top: 12%; transform: scale(.42); animation-delay: -1.6s; }
.login-intro__sparkle--8 { right: 34%; bottom: 9%; transform: scale(.62); animation-delay: -4.1s; }
.login-intro__sparkle--9 { left: 8%; bottom: 13%; transform: scale(.48); animation-delay: -.8s; }

@keyframes introAuroraOne {
    to { transform: translate3d(10vw, 7vh, 0) scale(1.08) rotate(5deg); }
}
@keyframes introAuroraTwo {
    to { transform: translate3d(-9vw, -5vh, 0) scale(1.12) rotate(-7deg); }
}
@keyframes introAuroraThree {
    to { transform: translate3d(-4vw, -8vh, 0) scale(1.08) rotate(6deg); }
}
@keyframes introTextArrive {
    from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(8px); }
    to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}
@keyframes introButtonArrive {
    from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes introSparkle {
    0%, 100% { opacity: .12; scale: .6; rotate: 0deg; }
    48% { opacity: .62; scale: 1.05; rotate: 22deg; }
}
@keyframes loginIntroLeave {
    0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
    100% { opacity: 0; transform: translate3d(0,-3px,0) scale(1.006); }
}

@media (max-width: 620px) {
    .login-intro__content h1 {
        font-size: clamp(38px, 11.5vw, 58px);
        line-height: 1.07;
    }
    .login-intro__content h1 br { display: none; }
    .intro-button { margin-top: 38px; min-width: 158px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-intro__glow,
    .login-intro__sparkle,
    .login-intro__content h1,
    .intro-button { animation: none !important; }
    .login-intro.is-leaving { animation-duration: .18s; }
}

/* ---------- Memories slider ---------- */
.quest-scene[data-stage-type="memories"] {
    width: min(920px, 100%);
    max-width: 100%;
    min-width: 0;
}
.story-card--memories {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: clamp(18px, 4vw, 34px);
    overflow: hidden;
}
.story-card--memories .story-card__head { width: min(100%, 700px); max-width: 100%; margin-inline: auto; }
.memory-showcase {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 28px;
    overflow: hidden;
}
.memory-showcase__viewport {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(20px, 7vw, 100px);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
    border-radius: 30px;
    contain: inline-size;
}
.memory-showcase__viewport::-webkit-scrollbar { display: none; }
.memory-showcase__track {
    display: flex;
    gap: 14px;
    width: max-content;
    min-width: 100%;
    padding-inline: clamp(20px, 7vw, 100px);
}
.memory-slide {
    position: relative;
    flex: 0 0 min(640px, calc(100vw - 160px));
    height: clamp(340px, 56vh, 610px);
    margin: 0;
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 28px;
    background: rgba(92, 46, 66, .08);
    box-shadow: 0 24px 64px rgba(94, 49, 69, .14), inset 0 0 0 1px rgba(255,255,255,.48);
    isolation: isolate;
}
.memory-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 24%, transparent 74%, rgba(75,39,55,.08));
}
.memory-slide__backdrop {
    position: absolute;
    inset: -34px;
    z-index: -1;
    background-position: center;
    background-size: cover;
    filter: blur(34px) saturate(.86) brightness(1.05);
    opacity: .56;
    transform: scale(1.12);
}
.memory-slide img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.memory-arrow {
    position: absolute;
    z-index: 4;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.58);
    border-radius: 50%;
    color: #6d3a51;
    background: rgba(255,250,252,.72);
    box-shadow: 0 12px 30px rgba(88,44,63,.13);
    backdrop-filter: blur(16px);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.memory-arrow:hover { transform: scale(1.05); background: rgba(255,252,253,.9); box-shadow: 0 16px 34px rgba(88,44,63,.17); }
.memory-arrow:active { transform: scale(.97); }
.memory-arrow svg { width: 21px; height: 21px; stroke-width: 1.9; }
.memory-arrow--prev { left: 7px; }
.memory-arrow--next { right: 7px; }
.memory-position {
    width: min(72%, 480px);
    height: 3px;
    margin: 18px auto 0;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(128,72,97,.1);
}
.memory-position span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #d76796, #aa456f);
    transition: transform .55s var(--ease);
}
.transition-panel--memories { width: min(100%, 430px); margin: 24px auto 0; }

/* ---------- Finale richness ---------- */
.finale-decor::before,
.finale-decor::after {
    content: "";
    position: absolute;
    pointer-events: none;
    width: 130vw;
    height: 34vh;
    left: -15vw;
    border-radius: 50%;
    filter: blur(34px);
    opacity: .30;
    mix-blend-mode: soft-light;
    will-change: transform, opacity;
}
.finale-decor::before {
    top: 13vh;
    background: linear-gradient(100deg, transparent 4%, rgba(255,255,255,.66) 30%, rgba(228,127,169,.34) 52%, rgba(255,255,255,.5) 73%, transparent 96%);
    transform: rotate(-7deg);
    animation: finaleSilkOne 13s ease-in-out infinite alternate;
}
.finale-decor::after {
    bottom: 5vh;
    background: linear-gradient(92deg, transparent 7%, rgba(224,117,161,.25) 28%, rgba(255,255,255,.58) 50%, rgba(235,153,186,.26) 70%, transparent 94%);
    transform: rotate(8deg);
    animation: finaleSilkTwo 16s ease-in-out infinite alternate;
}
.finale-petal { filter: drop-shadow(0 8px 10px rgba(126,64,91,.09)); }
.finale-heart { position: relative; }
.finale-heart::before {
    content: "";
    position: absolute;
    inset: 4% -22% -14%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.72) 0%, rgba(225,116,163,.18) 34%, transparent 70%);
    filter: blur(10px);
    animation: finaleHeartHalo 4.8s ease-in-out infinite;
}
@keyframes finaleSilkOne {
    from { transform: translate3d(-5vw,-2vh,0) rotate(-8deg) scaleX(.96); opacity: .22; }
    to { transform: translate3d(7vw,5vh,0) rotate(-3deg) scaleX(1.05); opacity: .38; }
}
@keyframes finaleSilkTwo {
    from { transform: translate3d(5vw,4vh,0) rotate(9deg) scaleX(1.03); opacity: .18; }
    to { transform: translate3d(-7vw,-4vh,0) rotate(5deg) scaleX(.96); opacity: .34; }
}
@keyframes finaleHeartHalo {
    0%, 100% { opacity: .58; transform: scale(.94); }
    50% { opacity: .88; transform: scale(1.06); }
}

@media (max-width: 760px) {
    .story-card--memories { padding: 24px 12px 20px; }
    .story-card--memories .story-card__head { padding-inline: 8px; }
    .memory-showcase { margin-top: 22px; }
    .memory-showcase__viewport { scroll-padding-inline: 14px; border-radius: 24px; }
    .memory-showcase__track { gap: 10px; padding-inline: 14px; }
    .memory-slide {
        flex-basis: min(520px, calc(100vw - 92px));
        max-width: calc(100vw - 92px);
        height: min(55vh, 520px);
        min-height: 330px;
        border-radius: 23px;
    }
    .memory-arrow { width: 42px; height: 42px; margin-top: -21px; background: rgba(255,250,252,.8); }
    .memory-arrow--prev { left: 4px; }
    .memory-arrow--next { right: 4px; }
    .memory-position { margin-top: 14px; width: 68%; }
    .transition-panel--memories { margin-top: 20px; padding-inline: 8px; }
    .finale-decor::before, .finale-decor::after { width: 165vw; left: -32vw; filter: blur(28px); }
}

@media (max-width: 430px) {
    .quest-stage { padding-inline: 14px; }
    .story-card--memories { padding-inline: 10px; }
    .memory-showcase__viewport { scroll-padding-inline: 10px; }
    .memory-showcase__track { padding-inline: 10px; }
    .memory-slide { flex-basis: calc(100vw - 68px); max-width: calc(100vw - 68px); min-height: 300px; }
}

/* ---------- 4×4 photo jigsaw ---------- */
.story-card--jigsaw {
    width: min(100%, 680px);
    overflow: visible;
}
.jigsaw-form {
    margin-top: 26px;
}
.jigsaw-shell {
    width: min(100%, 540px);
    margin-inline: auto;
    padding: 4.5%;
    overflow: visible;
}
.jigsaw-board {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    border-radius: 24px;
    background: rgba(255,255,255,.17);
    box-shadow: inset 0 0 0 1px rgba(133,72,99,.065), 0 24px 52px rgba(112,63,84,.08);
    isolation: isolate;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.jigsaw-cell {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}
.jigsaw-cell::after {
    content: "";
    position: absolute;
    inset: 10%;
    z-index: -1;
    border-radius: 15px;
    background: rgba(196,83,130,0);
    box-shadow: 0 0 0 1px rgba(196,83,130,0);
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.jigsaw-cell.is-drop-target::after {
    background: rgba(202,91,139,.09);
    box-shadow: 0 0 0 1px rgba(190,76,124,.17);
    transform: scale(.94);
}
.jigsaw-piece {
    position: absolute;
    left: -18%;
    top: -18%;
    z-index: 2;
    width: 136%;
    height: 136%;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    touch-action: none;
    cursor: grab;
    transform: translateZ(0);
    transition: opacity .16s ease, filter .18s ease;
}
.jigsaw-piece:active { cursor: grabbing; }
.jigsaw-piece:focus-visible {
    outline: 2px solid rgba(190,76,124,.35);
    outline-offset: -14%;
}
.jigsaw-piece.is-drag-source {
    opacity: .18;
    filter: saturate(.72);
}
.jigsaw-piece__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 4px 5px rgba(86,44,62,.10));
}
.jigsaw-piece__outline {
    fill: none;
    stroke: rgba(255,255,255,.64);
    stroke-width: .95;
    vector-effect: non-scaling-stroke;
    transition: opacity .36s ease;
}
.jigsaw-drag-ghost {
    position: fixed;
    z-index: 9999;
    margin: 0;
    pointer-events: none;
    transform-origin: center;
    cursor: grabbing;
    filter: drop-shadow(0 18px 18px rgba(94,43,66,.22));
    will-change: transform;
}
.jigsaw-drag-ghost .jigsaw-piece__svg {
    filter: drop-shadow(0 15px 16px rgba(88,40,61,.2));
}
.jigsaw-board.is-solved {
    animation: jigsawSolved .72s cubic-bezier(.2,.8,.2,1) both;
}
.jigsaw-board.is-solved .jigsaw-piece {
    pointer-events: none;
}
.jigsaw-board.is-solved .jigsaw-piece__outline {
    opacity: .12;
}
.completion-secondary {
    margin: 17px auto 0;
    max-width: 520px;
    color: #795463;
    font-size: clamp(17px, 2.8vw, 20px);
    line-height: 1.55;
    text-wrap: balance;
}
@keyframes jigsawSolved {
    0% { transform: scale(1); filter: saturate(1); }
    52% { transform: scale(1.012); filter: saturate(1.06); }
    100% { transform: scale(1); filter: saturate(1.02); }
}

@media (max-width: 620px) {
    .story-card--jigsaw {
        padding-inline: 18px;
    }
    .jigsaw-form { margin-top: 20px; }
    .jigsaw-shell {
        width: min(100%, 430px);
        padding: 3.8%;
    }
    .jigsaw-board { border-radius: 20px; }
}


/* ---------- Fogged glass memory ---------- */
.story-card--fog {
    width: min(100%, 640px);
}

.fog-glass-stage {
    margin-top: 26px;
}

.fog-window {
    position: relative;
    width: min(100%, 520px);
    height: clamp(300px, 47vh, 390px);
    margin-inline: auto;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,.92), transparent 42%),
        linear-gradient(145deg, rgba(247,225,234,.92), rgba(236,202,216,.88));
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 22px 50px rgba(105,56,78,.11), inset 0 1px 0 rgba(255,255,255,.88);
    isolation: isolate;
}

.fog-window__reveal {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    padding: 42px 34px;
    text-align: center;
}

.fog-window__reveal {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
}

.fog-window__flowers {
    width: min(92%, 360px);
    align-self: end;
    filter: drop-shadow(0 14px 24px rgba(116, 61, 85, .11));
    transform: translateY(4px);
}

.fog-window__flowers svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.fog-bouquet__stems {
    fill: none;
    stroke: rgba(99, 132, 93, .72);
    stroke-width: 5;
    stroke-linecap: round;
}

.fog-bouquet__leaves {
    fill: rgba(143, 169, 126, .66);
}

.fog-bouquet__bloom {
    fill: #e7a9c0;
    stroke: rgba(255, 255, 255, .72);
    stroke-width: 2.2;
}

.fog-bouquet__bloom--2,
.fog-bouquet__bloom--5 {
    fill: #f1bfd0;
}

.fog-bouquet__bloom--3 {
    fill: #d995b0;
}

.fog-bouquet__bloom--4 {
    fill: #efc6d5;
}

.fog-bouquet__center {
    fill: #f8e4ad;
    stroke: rgba(255,255,255,.65);
    stroke-width: 2;
}

.fog-bouquet__wrap {
    fill: rgba(248, 226, 234, .82);
    stroke: rgba(183, 118, 145, .28);
    stroke-width: 2;
}

.fog-bouquet__ribbon {
    fill: rgba(195, 108, 144, .68);
}

.fog-window__reveal strong {
    max-width: 390px;
    color: #5a3445;
    font-size: clamp(19px, 4.3vw, 27px);
    line-height: 1.22;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.fog-window__canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity .72s cubic-bezier(.16,1,.3,1), filter .72s ease;
}

.fog-window__canvas:active {
    cursor: grabbing;
}

.fog-window__canvas.is-cleared {
    opacity: 0;
    filter: blur(9px);
    pointer-events: none;
}

.fog-window__hint {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: rgba(91,60,73,.68);
    font-size: 13px;
    font-weight: 620;
    letter-spacing: -.01em;
    pointer-events: none;
    transition: opacity .24s ease, transform .28s var(--ease);
    text-shadow: 0 1px 8px rgba(255,255,255,.82);
}

.fog-window__hint.is-hidden {
    opacity: 0;
    transform: translateY(5px);
}

.fog-window__finger {
    width: 20px;
    height: 20px;
    color: rgba(151,76,108,.67);
}

.fog-window__finger svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.55;
}

.fog-found-form {
    width: min(100%, 360px);
    margin: 20px auto 0;
    opacity: 0;
    transform: translateY(8px);
}

.fog-found-form.is-visible {
    animation: fogFoundReveal .48s var(--ease) forwards;
}

@keyframes fogFoundReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 620px) {
    .story-card--fog {
        padding-inline: 18px;
    }

    .fog-glass-stage {
        margin-top: 22px;
    }

    .fog-window {
        height: clamp(300px, 44vh, 355px);
        border-radius: 24px;
    }

    .fog-window__reveal {
        padding: 34px 24px;
    }

    .fog-window__flowers {
        width: min(94%, 330px);
    }

    .fog-window__reveal strong {
        font-size: clamp(18px, 5.5vw, 24px);
    }
}