:root {
    --night:#0b1648;
    --purple:#4d22a3;
    --deep-purple:#1d086f;
    --orange:#ff7917;
    --blue:#174fb9;
    --paper:#fffdfa;
    --ink:#111a3b;
    --muted:#5b6278;
    --mist:#eef5ff;
    --line:rgba(17,26,59,.15);
    --success:#167c51;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.55; }
button,a,summary { font:inherit; }
button,summary { cursor:pointer; }
.wrap { width:min(920px,calc(100% - 2rem)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:64px; padding:.65rem max(1rem,calc((100% - 920px)/2)); color:#fff; background:rgba(29,8,111,.96); box-shadow:0 4px 24px rgba(11,22,72,.18); backdrop-filter:blur(8px); }
.back-link { color:#fff; font-weight:850; text-decoration:none; }
.collection-button,.button,.story-button { border:0; border-radius:999px; font-weight:900; }
.collection-button { padding:.58rem .75rem; color:var(--night); background:#fff; }
.collection-count { display:inline-grid; place-items:center; min-width:42px; margin-left:.35rem; padding:.12rem .35rem; border-radius:999px; color:#fff; background:var(--purple); }
.ghost-heading { padding:2rem 0 1.25rem; text-align:center; }
.station-label,.eyebrow { margin:0 0 .35rem; color:var(--purple); font-size:.78rem; font-weight:950; letter-spacing:.11em; text-transform:uppercase; }
h1,h2,p { overflow-wrap:break-word; }
h1 { margin:0; font-size:clamp(3rem,13vw,6rem); line-height:.9; letter-spacing:-.06em; }
h2 { margin:0 0 .6rem; font-size:clamp(1.55rem,5vw,2.35rem); line-height:1.08; letter-spacing:-.035em; }
.ghost-meta { margin:.7rem 0 0; color:var(--muted); font-weight:800; }
.scene { padding:0 0 2.5rem; color:#fff; background:linear-gradient(180deg,var(--paper) 0 7rem,var(--night) 7rem 100%); }
.panorama-instruction { margin:0 0 .75rem; color:var(--muted); font-weight:800; text-align:center; }
.station-team-tip { margin:0 auto .85rem; max-width:720px; border:1px solid #d8d0ef; border-radius:16px; color:var(--ink); background:#fff; box-shadow:0 7px 20px rgba(11,22,72,.07); }
.station-team-tip summary { padding:.7rem .9rem; color:var(--purple); font-weight:900; text-align:center; cursor:pointer; }
.station-team-tip-body { padding:0 .9rem .85rem; }
.station-team-tip-body > p { margin:.1rem 0 .65rem; color:var(--muted); font-size:.9rem; text-align:center; }
.station-team-tip ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; margin:0; padding:0; list-style:none; }
.station-team-tip li { padding:.55rem .65rem; border-radius:11px; background:#f5f1ff; }
.station-team-tip li strong,.station-team-tip li span { display:block; }
.station-team-tip li strong { color:var(--night); font-size:.85rem; }
.station-team-tip li span { color:var(--muted); font-size:.78rem; }
.station-team-tip .station-team-solo { margin:.65rem 0 0; font-size:.82rem; }
.panorama-shell { overflow:hidden; border:5px solid #fff; border-radius:24px; background:var(--night); box-shadow:0 20px 55px rgba(0,0,0,.28); }
.station-panorama { overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-color:var(--orange) var(--night); touch-action:auto; }
.panorama-stage { display:inline-block; width:max-content; height:min(460px,48svh); }
.panorama-stage img { display:block; width:auto; max-width:none; height:100%; object-fit:contain; }
.memory-panorama { position:absolute; inset:0; width:100% !important; opacity:0; transition:opacity 1.35s ease; }
.panorama-stage.transformed .memory-panorama { opacity:1; }
.ghost-hotspot { position:absolute; left:var(--ghost-x,50%); top:var(--ghost-y,39%); width:120px; height:160px; padding:0; border:0; border-radius:50%; color:#fff; background:transparent; transform:translate(-50%,-50%); }
.ghost-hotspot:disabled { pointer-events:none; }
.ghost-hotspot:not(:disabled) { cursor:crosshair; }
.ghost-hotspot span { position:absolute; left:50%; bottom:-2.2rem; width:max-content; max-width:150px; padding:.35rem .6rem; border-radius:999px; background:var(--orange); color:var(--night); font-size:.78rem; font-weight:950; opacity:0; transform:translateX(-50%) scale(.8); transition:.25s ease; }
.ghost-hotspot.found { border:4px solid var(--orange); box-shadow:0 0 0 8px rgba(255,121,23,.22),0 0 35px rgba(218,195,255,.9); animation:ghostPulse 1.4s ease-in-out infinite alternate; }
.ghost-hotspot.found span { opacity:1; transform:translateX(-50%) scale(1); }
.panorama-shell .transform-panel { z-index:4; }
.panorama-shell.transformed .transform-panel { pointer-events:none; opacity:0; transform:translateY(12px); }
.scene-frame { position:relative; overflow:hidden; border:5px solid #fff; border-radius:24px; box-shadow:0 20px 55px rgba(0,0,0,.28); }
.scene-frame img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.scene-haunted { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.scene-frame.revealed .scene-haunted { opacity:1; }
.scene-frame.revealed .scene-normal { filter:brightness(.72); }
.transform-panel { position:absolute; inset:auto 1rem 1rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.45); border-radius:18px; color:#fff; background:rgba(11,22,72,.86); backdrop-filter:blur(7px); transition:opacity .35s ease,transform .35s ease; }
.transform-panel p { margin:0; font-weight:800; }
.transform-button { flex:0 0 auto; padding:.7rem 1rem; border:0; border-radius:999px; color:var(--night); background:var(--orange); font-weight:950; }
.scene-frame.revealed .transform-panel { pointer-events:none; opacity:0; transform:translateY(12px); }
.narrative-status { min-height:1.4rem; margin:.65rem 0 0; color:rgba(255,255,255,.75); font-size:.85rem; text-align:center; }
.narrative-status.ready { margin:1rem 0; padding:.8rem 1rem; border:2px solid var(--orange); border-radius:16px; color:#fff; background:rgba(255,121,23,.16); font-size:1.08rem; font-weight:950; }
.scene-copy { max-width:720px; margin:1.5rem auto 0; }
.character-card { display:grid; grid-template-columns:clamp(112px,24vw,170px) 1fr; gap:1.15rem; align-items:center; overflow:hidden; padding:1rem; border:1px solid rgba(255,255,255,.3); border-radius:22px; background:linear-gradient(135deg,rgba(77,34,163,.78),rgba(11,22,72,.94)); box-shadow:0 18px 45px rgba(0,0,0,.28); animation:characterCardRise .55s cubic-bezier(.2,.75,.25,1) both; }
.character-portrait { width:100%; aspect-ratio:4/5; display:block; border:2px solid rgba(255,255,255,.45); border-radius:16px; object-fit:cover; object-position:center 12%; background:#1d124b; }
.character-found { margin:0 0 .25rem!important; color:#ffb56f!important; font-size:.75rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.character-name { margin:0; color:#fff; font-size:clamp(1.5rem,5vw,2.25rem); }
.character-meta-line { margin:.12rem 0 .6rem!important; color:#dcd1ff!important; font-size:.88rem; font-weight:850; }
.character-opening { margin:.1rem 0 .8rem!important; color:#fff!important; font-family:Georgia,serif; font-size:clamp(1.02rem,3.4vw,1.25rem); font-style:italic; line-height:1.35; }
.character-actions { display:flex; flex-wrap:wrap; gap:.45rem; }
.character-actions .story-button { margin:0; }
.character-card .story-more { grid-column:1/-1; margin-top:0; }
@keyframes characterCardRise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
.scene-copy .eyebrow { color:#ffb56f; }
.scene-copy p { color:rgba(255,255,255,.84); }
.story-button { margin:.2rem .4rem .2rem 0; padding:.7rem 1rem; color:#fff; background:var(--purple); }
.replay-button { border:2px solid rgba(255,255,255,.45); background:transparent; }
.story-more { margin-top:1rem; padding:1rem; border-left:4px solid var(--orange); background:rgba(255,255,255,.08); }
.story-more p { margin:0; }
.story-more p + p { margin-top:.75rem; }
@media (max-width:560px) { .character-card { grid-template-columns:92px 1fr; gap:.85rem; } .character-card .story-more { margin-inline:-.15rem; } }
@media (prefers-reduced-motion:reduce) { .character-card { animation:none; } }
.challenge { padding:3rem 0; }
.challenge-lead { max-width:720px; color:var(--muted); font-size:1.08rem; }
.safety-note { margin:1.25rem 0; padding:1rem; border:1px solid #f4bd68; border-radius:16px; background:#fff7e8; }
.answers { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; margin-top:1.5rem; }
.answer { display:grid; grid-template-columns:68px 1fr; gap:1rem; align-items:center; min-height:92px; padding:.8rem 1rem; border:2px solid var(--line); border-radius:18px; color:var(--ink); background:#fff; text-align:left; font-weight:850; box-shadow:0 8px 24px rgba(11,22,72,.06); }
.answer > img { display:block; width:62px; height:62px; border-radius:12px; object-fit:cover; }
.answer:hover,.answer:focus-visible { border-color:var(--blue); outline:none; transform:translateY(-1px); }
.answer.correct { border-color:var(--success); background:#edfff7; }
.answer.wrong { border-color:#c55252; animation:shake .22s linear; }
.pattern { display:block; width:62px; height:62px; border-radius:12px; background-color:#d9e8ff; }
.pattern-chain { background-color:#d9e8ff; background-image:linear-gradient(90deg,var(--purple) 8px,transparent 8px),linear-gradient(var(--purple) 8px,transparent 8px); background-size:28px 28px; border:5px solid var(--orange); }
.pattern-diamond { background:repeating-linear-gradient(45deg,var(--purple) 0 8px,#e7dcff 8px 18px); transform:rotate(0); }
.pattern-chevron { background:linear-gradient(135deg,transparent 45%,var(--blue) 46% 55%,transparent 56%) 0 0/24px 24px,linear-gradient(45deg,transparent 45%,var(--orange) 46% 55%,transparent 56%) 0 0/24px 24px,#e9f1ff; }
.pattern-star { display:grid; place-items:center; color:var(--orange); background:var(--purple); font-size:2.4rem; }
.answer-message { min-height:1.6rem; margin:1rem 0 0; font-weight:850; }
.wide-view { padding:0 0 2rem; }
details { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; }
summary { padding:1rem 1.15rem; color:var(--purple); font-weight:900; }
details > p { margin:0; padding:0 1.15rem 1rem; color:var(--muted); }
.panorama-scroller { overflow-x:auto; overscroll-behavior-inline:contain; padding:0 0 .5rem; scrollbar-color:var(--purple) #e9e6f5; }
.panorama-scroller img { display:block; width:max(1300px,100%); height:390px; object-fit:cover; }
.recovered { display:grid; grid-template-columns:100px 1fr; gap:1.25rem; align-items:center; margin-bottom:2rem; padding:1.4rem; border:2px solid #86d9b5; border-radius:22px; background:#effff8; }
.recovered .item-icon { display:grid; place-items:center; width:100px; height:100px; border-radius:20px; background:#fff; box-shadow:0 10px 24px rgba(22,124,81,.12); }
.item-icon img { display:block; width:76px; height:76px; border-radius:14px; object-fit:cover; }
.recovered.has-success-art { grid-template-columns:minmax(150px,230px) 1fr; padding-block:.75rem; }
.success-ghost-stage { position:relative; width:100%; max-width:230px; aspect-ratio:1/1; margin-inline:auto; filter:drop-shadow(0 12px 16px rgba(29,8,111,.2)); animation:successGhostArrives .7s cubic-bezier(.2,.9,.25,1.25) both,successGhostFloats 1.8s .7s ease-in-out infinite alternate; }
.success-custom-art { display:block; width:100%; height:100%; object-fit:contain; }
.success-generic-art { position:relative; width:100%; height:100%; }
.success-generic-ghost { display:block; width:100%; height:100%; object-fit:contain; }
.success-generic-item { position:absolute; left:50%; top:58%; width:31%; height:31%; padding:4px; border:3px solid #fff; border-radius:16px; background:#fff; box-shadow:0 6px 18px rgba(11,22,72,.28); object-fit:contain; transform:translate(-50%,-50%) rotate(-3deg); }
.recovered p { margin:.25rem 0 1rem; }
.button { padding:.7rem 1rem; color:#fff; background:var(--purple); }
.bonus-card { overflow:hidden; margin-bottom:3rem; padding:0; border:2px solid #c9b8ff; border-radius:24px; background:#fff; box-shadow:0 16px 42px rgba(29,8,111,.11); }
.bonus-unlocked { padding:.65rem 1.2rem; color:#fff; background:linear-gradient(90deg,var(--purple),var(--deep-purple)); font-size:.78rem; font-weight:950; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
.bonus-content { padding:1.35rem 1.35rem .7rem; }
.bonus-content p:last-child { margin-bottom:0; color:var(--muted); }
.bonus-version { margin:-.25rem 0 1.15rem; padding:.9rem 1rem; border:1px solid #d6c9ff; border-radius:16px; background:#f7f3ff; }
.bonus-version-label { display:inline-block; margin:0 0 .55rem!important; padding:.28rem .65rem; border-radius:999px; color:#fff!important; background:var(--purple); font-size:.72rem; font-weight:950; letter-spacing:.1em; text-transform:uppercase; }
.bonus-version-notice .bonus-version-label { color:var(--night)!important; background:var(--orange); }
.bonus-version-remember .bonus-version-label { background:#167c51; }
.bonus-compare-prompt { margin:0!important; color:var(--ink)!important; font-size:.9rem; }
.bonus-compare-prompt strong { display:block; margin-bottom:.18rem; }
.heritage-invitation { margin:.85rem 0 0!important; padding:.8rem .9rem; border-left:4px solid var(--orange); border-radius:0 12px 12px 0; color:var(--ink)!important; background:#fff8e7; font-size:.9rem; }
.heritage-invitation strong { display:block; margin-bottom:.15rem; }
.heritage-invitation a { color:var(--deep-purple); font-weight:900; }
.all-bonuses-unlocked { margin-top:1.15rem; padding-top:1rem; border-top:1px solid #d6c9ff; }
.all-bonuses-button { width:100%; padding:.8rem 1rem; border:0; border-radius:999px; color:#fff; background:linear-gradient(90deg,#167c51,var(--purple)); font-weight:950; }
.all-bonuses-panel { display:grid; gap:.7rem; margin-top:.85rem; }
.all-bonus { padding:.85rem; border:1px solid var(--line); border-radius:14px; background:#fff; }
.all-bonus-type { display:inline-block; margin:0 0 .35rem!important; color:var(--purple)!important; font-size:.7rem; font-weight:950; letter-spacing:.1em; }
.all-bonus h3 { margin:0 0 .25rem; font-size:1.05rem; }
.all-bonus p:last-child { margin:0; color:var(--muted); font-size:.9rem; }
.ghost-whisper { margin:1rem; padding:1.15rem; border-radius:18px; color:#fff; background:var(--night); }
.whisper-label { margin:0 0 .25rem; color:#ffb56f; font-size:.82rem; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.whisper-text { margin:.2rem 0 1rem; font-family:Georgia,serif; font-size:1.08rem; font-style:italic; }
.audio-hint-button { display:inline-flex; align-items:center; gap:.45rem; padding:.65rem .9rem; border:2px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; background:var(--purple); font-weight:900; }
.audio-hint-button:hover,.audio-hint-button:focus-visible { border-color:var(--orange); outline:none; }
.audio-hint-button.playing { color:var(--night); background:var(--orange); }

/* Progressive solve hints shown before the answer choices. */
.solve-hint-card { margin:1.25rem 0; padding:1rem; border:2px solid rgba(77,34,163,.22); border-radius:18px; background:#f5f0ff; box-shadow:0 8px 24px rgba(11,22,72,.06); }
.solve-hint-card h3 { margin:0; color:var(--deep-purple); font-size:1.08rem; }
.solve-hint-intro { margin:.25rem 0 .75rem; color:var(--muted); }
.solve-hint-list { display:grid; gap:.55rem; margin:.25rem 0 .85rem; padding-left:1.35rem; }
.solve-hint-list li { padding:.55rem .7rem; border-left:4px solid var(--purple); border-radius:0 12px 12px 0; color:var(--ink); background:#fff; font-family:Georgia,serif; }
.solve-hint-button { padding:.7rem 1rem; border:2px solid var(--purple); border-radius:999px; color:var(--deep-purple); background:#fff; font:inherit; font-weight:900; cursor:pointer; }
.solve-hint-button:hover,.solve-hint-button:focus-visible { color:#fff; background:var(--purple); outline:none; }
.solve-hint-button:disabled { border-color:#a8a2ba; color:#686174; background:#eeeaf4; cursor:default; }
.solve-hint-card.needs-attention { border-color:var(--orange); box-shadow:0 0 0 5px rgba(255,121,23,.12); }
.audio-note { margin:.7rem 0 0; color:rgba(255,255,255,.68); font-size:.78rem; }
.collection-dialog { width:min(620px,calc(100% - 1.5rem)); max-height:85vh; padding:1.25rem; border:0; border-radius:24px; color:var(--ink); box-shadow:0 28px 90px rgba(0,0,0,.35); }
.collection-dialog::backdrop { background:rgba(7,10,35,.72); backdrop-filter:blur(4px); }
.dialog-top { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; }
.close-button { width:42px; height:42px; border:0; border-radius:50%; color:#fff; background:var(--night); font-size:1.5rem; }
.collection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1rem 0; }
.collection-slot { min-height:112px; display:grid; place-items:center; padding:.65rem; border:2px dashed #bec4d5; border-radius:16px; color:#7b8296; background:#f6f7fb; text-align:center; font-size:.82rem; font-weight:800; }
.collection-slot.found { border-style:solid; border-color:#86d9b5; color:var(--ink); background:#effff8; }
.collection-slot img { display:block; width:54px; height:54px; margin:0 auto .35rem; border-radius:12px; object-fit:cover; }
.collection-slot strong { display:block; }
.collection-note { color:var(--muted); font-size:.85rem; }
.revisit-hunt { margin:1rem 0; padding-top:1rem; border-top:1px solid var(--line); }
.revisit-hunt-button { display:flex; justify-content:center; align-items:center; gap:.5rem; width:100%; padding:.85rem 1rem; border:0; border-radius:999px; color:#fff; background:linear-gradient(90deg,var(--purple),var(--deep-purple)); font-weight:950; }
.revisit-hunt-button span { font-size:1.2rem; }
.revisit-hunt-panel { margin-top:.8rem; padding:1rem; border-radius:18px; background:#f4f0ff; }
.revisit-hunt-panel > p { margin:.1rem 0 1rem; color:var(--muted); font-size:.9rem; }
.revisit-stations { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem; }
.revisit-stations a { display:flex; flex-direction:column; padding:.7rem .8rem; border:1px solid #c9b8ff; border-radius:13px; color:var(--night); background:#fff; text-decoration:none; }
.revisit-stations a:hover,.revisit-stations a:focus-visible { border-color:var(--orange); outline:none; box-shadow:0 4px 14px rgba(29,8,111,.1); }
.revisit-stations span { margin-top:.12rem; color:var(--muted); font-size:.75rem; }
.reset-test-button { width:100%; padding:.65rem; border:1px solid #c55252; border-radius:12px; color:#8d2525; background:#fff4f4; font-weight:850; }
.ghost-completion { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; overflow:hidden; padding:1rem; color:#fff; background:rgba(7,5,35,.9); opacity:0; backdrop-filter:blur(8px); transition:opacity .3s ease; }
.ghost-completion[hidden] { display:none; }
.ghost-completion.is-visible { opacity:1; }
.ghost-completion-panel { position:relative; z-index:2; width:min(580px,100%); max-height:calc(100svh - 2rem); overflow-y:auto; overscroll-behavior:contain; padding:clamp(1.5rem,6vw,3rem); border:3px solid #ffd166; border-radius:30px; background:radial-gradient(circle at 50% 0,rgba(132,78,255,.85),transparent 45%),linear-gradient(155deg,#21106e,#090728 72%); box-shadow:0 0 0 8px rgba(255,255,255,.08),0 24px 90px rgba(0,0,0,.55),0 0 70px rgba(255,121,23,.35); text-align:center; transform:scale(.82) translateY(24px); transition:transform .45s cubic-bezier(.2,.9,.25,1.2); scrollbar-gutter:stable; }
.ghost-completion.is-visible .ghost-completion-panel { transform:scale(1) translateY(0); }
.completion-ghosts { font-size:clamp(1.4rem,7vw,2.3rem); letter-spacing:.15em; animation:completionFloat 1.8s ease-in-out infinite alternate; }
.completion-kicker { margin:1rem 0 .25rem; color:#ffd166; font-size:.78rem; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.ghost-completion h2 { margin:.15rem 0 .6rem; color:#fff; font-size:clamp(2rem,9vw,4rem); line-height:.95; text-shadow:0 3px 0 #7b2ee8,0 0 28px rgba(255,255,255,.35); }
.completion-lead { margin:.8rem auto; color:#e9e2ff; font-family:Georgia,serif; font-size:clamp(1.05rem,4vw,1.35rem); }
.completion-count { display:inline-flex; align-items:baseline; margin:.6rem 0; padding:.4rem 1rem; border:2px solid rgba(255,255,255,.5); border-radius:999px; color:#ffd166; font-size:2rem; font-weight:950; }
.completion-count span { margin-left:.2rem; color:#fff; font-size:1rem; }
.completion-actions { display:grid; gap:.7rem; margin-top:1.35rem; }
.completion-actions button { width:100%; padding:.85rem 1rem; border-radius:999px; font-weight:950; }
.completion-primary { color:#19103f; background:#ffd166; }
.completion-secondary { border:2px solid rgba(255,255,255,.55); color:#fff; background:transparent; }
.ghost-roll { margin:1.35rem 0 0; padding:1.15rem; border:1px solid rgba(255,255,255,.28); border-radius:20px; color:#19103f; background:rgba(255,255,255,.96); text-align:left; }
.ghost-roll-kicker { margin:0 0 .2rem; color:#6f42c1; font-size:.72rem; font-weight:950; letter-spacing:.14em; text-transform:uppercase; }
.ghost-roll h3 { margin:0 0 .35rem; font-size:1.35rem; }
.ghost-roll > p:not(.ghost-roll-kicker) { margin:.35rem 0 1rem; color:#5b5570; font-size:.9rem; }
.ghost-roll-form { display:grid; gap:.8rem; }
.ghost-roll-form label { display:grid; gap:.3rem; font-size:.85rem; font-weight:900; }
.ghost-roll-form label span { color:#6e687b; font-weight:600; }
.ghost-roll-form input[type="text"],.ghost-roll-form input[type="email"] { width:100%; min-height:44px; padding:.7rem .8rem; border:2px solid #d8d1e5; border-radius:12px; color:#19103f; background:#fff; font:inherit; }
.ghost-roll-form input:focus { border-color:#6f42c1; outline:3px solid rgba(111,66,193,.2); }
.ghost-roll-consent { grid-template-columns:auto 1fr!important; align-items:start; gap:.6rem!important; }
.ghost-roll-consent input { width:20px; height:20px; margin-top:.1rem; accent-color:#6f42c1; }
.ghost-roll-consent span { color:#423b55!important; font-size:.8rem; line-height:1.4; }
.ghost-roll-submit { min-height:46px; padding:.75rem 1rem; border:0; border-radius:999px; color:#fff; background:linear-gradient(90deg,#6f42c1,#4d22a3); font-weight:950; cursor:pointer; }
.ghost-roll-submit:disabled { opacity:.65; cursor:wait; }
.ghost-roll-status { min-height:1.3em; margin:0; font-size:.85rem; font-weight:850; text-align:center; }
.ghost-roll-status.is-success { color:#0c7048; }.ghost-roll-status.is-error { color:#a4262c; }
.ghost-roll.is-submitted { padding:.9rem 1rem; border-color:#86d9b5; background:#effff8; text-align:center; }
.ghost-roll-trap { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; }
.ghost-completion-burst,.ghost-completion-burst::before,.ghost-completion-burst::after { position:absolute; inset:-30%; content:""; background-image:radial-gradient(circle,#ffd166 0 4px,transparent 5px),radial-gradient(circle,#ff7917 0 5px,transparent 6px),radial-gradient(circle,#8ee6cb 0 4px,transparent 5px),radial-gradient(circle,#ae82ff 0 5px,transparent 6px); background-position:7% 13%,34% 6%,72% 12%,91% 24%; background-size:170px 170px,220px 220px,190px 190px,250px 250px; animation:completionSpin 8s linear infinite; }
.ghost-completion-burst::before { inset:0; transform:rotate(37deg); }
.ghost-completion-burst::after { inset:0; transform:rotate(79deg); }
@keyframes completionFloat { to { transform:translateY(-8px); } }
@keyframes completionSpin { to { transform:rotate(360deg); } }
@keyframes shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
@keyframes ghostPulse { from { box-shadow:0 0 0 5px rgba(255,121,23,.18),0 0 18px rgba(218,195,255,.55); } to { box-shadow:0 0 0 11px rgba(255,121,23,.28),0 0 42px rgba(218,195,255,1); } }
@keyframes successGhostArrives { from { opacity:0; transform:translateY(24px) scale(.72) rotate(-4deg); } to { opacity:1; transform:translateY(0) scale(1) rotate(0); } }
@keyframes successGhostFloats { to { transform:translateY(-7px); } }
@media (max-width:620px) {
    .answers { grid-template-columns:1fr; }
    .scene-frame { margin-inline:-.35rem; border-width:3px; border-radius:18px; }
    .scene-frame img { aspect-ratio:4/3; }
    .panorama-shell { margin-inline:-.35rem; border-width:3px; border-radius:18px; }
    .panorama-stage { height:min(380px,45svh); }
    /* Keep the full ordinary panorama visible before the transformation. */
    .panorama-shell .transform-panel {
        position:relative;
        inset:auto;
        display:block;
        padding:.8rem;
        border:0;
        border-top:1px solid rgba(255,255,255,.28);
        border-radius:0;
        background:var(--night);
        backdrop-filter:none;
        text-align:center;
    }
    .panorama-shell .transform-panel p { margin:0 0 .55rem; }
    .panorama-shell .transform-button { width:100%; }
    .panorama-shell.transformed .transform-panel { display:none; }
    .station-team-tip ul { grid-template-columns:1fr; }
    .panorama-scroller img { width:1100px; height:330px; }
    .collection-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:430px) {
    .site-header { min-height:58px; }
    .back-link { font-size:.9rem; }
    .collection-button { font-size:.82rem; }
    .recovered { grid-template-columns:1fr; text-align:center; }
    .recovered.has-success-art { grid-template-columns:1fr; }
    .recovered .item-icon { margin-inline:auto; }
    .revisit-stations { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }