.loading{min-height:55vh;display:grid;place-items:center;color:var(--muted)}

/* All three daily cards keep the same image-stage height on iPad. */
.cards .art,.cards .side-card .art{height:clamp(230px,23vw,286px);aspect-ratio:auto}
.cards .side-card .art{min-height:0}
.cards .card-main{border-color:#dfc98e;background:#fffdf7;box-shadow:0 7px 22px #9f7f3620}
.cards .card-main .art{border-bottom:1px solid #ead7a4}
.cards .card-main .cardbody{background:linear-gradient(180deg,#fffefb 0%,#fffaf0 100%)}
.cards .card-main .badge{background:#244f57;color:#fff0bf;box-shadow:0 3px 12px #193d4224}
.cards .card-main .read-action{background:#f3ead2;border-color:#e5d4a8;color:#244d58}
.cards .card-main .read-action:not(:disabled):active{background:#ead9ae}
.fragment-art{background:#f3f4fb url('assets/ui/side-card-background.png') center/cover no-repeat!important}
.fragment-scene{padding:42px 24px 20px;overflow:visible}
.fragment-scene .fragment{flex:0 1 190px;width:190px;max-width:62%;height:190px;aspect-ratio:1}
/* The supplied PNG already is the puzzle piece. Do not draw another shape behind it. */
.fragment{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;isolation:auto!important}
.fragment:before,.fragment-spark{display:none!important}
.fragment img{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important;filter:none!important}
.gift-card{border:0!important;background:#f7f5fb;box-shadow:none!important}.gift-art{display:grid;place-items:center;background:linear-gradient(145deg,#f8fbff,#f3f0fb)!important}.gift-art>img{width:88%!important;height:88%!important;object-fit:contain!important;filter:drop-shadow(0 10px 12px #5f567321)}.gift-card .cardbody{background:linear-gradient(180deg,#fbfaff,#f5f3fa)}
.opened-letter{position:relative;padding-top:105px;margin:15px 0 28px}.opened-envelope{position:absolute;z-index:2;top:0;right:4%;width:155px;height:155px;object-fit:contain;filter:drop-shadow(0 8px 12px #5f567326)}.letter-sheet{min-height:670px;padding:95px 85px 125px;background:#fff url('assets/ui/letter-paper.png') center/100% 100% no-repeat;border-radius:28px;box-shadow:0 10px 35px #60708713}.letter-sheet .reading{max-width:39ch}.gift-actions{justify-content:center}.gift-reveal{position:fixed;z-index:100;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center;background:#f8faf5ee;backdrop-filter:blur(12px);animation:gift-appear .5s ease both}.gift-reveal-image{position:relative;z-index:2;width:min(330px,55vw);height:min(330px,42vh);object-fit:contain;filter:drop-shadow(0 16px 20px #65708035)}.gift-glow{position:absolute;width:min(480px,75vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff5b8aa,#cdefff66 45%,transparent 70%);animation:gift-glow 2.2s ease-in-out infinite}.gift-reveal h2{z-index:2;margin:8px 0;font:500 32px Georgia,serif}.gift-reveal p,.gift-reveal button{position:relative;z-index:2}.gift-reveal>p:not(.eyebrow){max-width:520px;margin:5px 0 24px}.gift-reveal.put-away{animation:gift-away .8s cubic-bezier(.4,0,.2,1) forwards;transform-origin:calc(100% - 70px) calc(100% - 70px)}

.expert-ring{transition:transform .25s,box-shadow .25s}
.badge-novice .expert-ring{filter:saturate(.78)}
.badge-watcher .expert-ring{filter:saturate(.9)}
.badge-explorer .expert-ring{filter:saturate(1.04)}
.badge-researcher .expert-ring{filter:saturate(1.15) drop-shadow(0 2px 5px #7696b455)}
.badge-expert .expert-ring{filter:saturate(1.22) drop-shadow(0 2px 7px #cfaa5d66)}
.expert-ring.energy-arrived{transform:scale(1.12);box-shadow:0 0 0 10px #f5d88938,0 0 32px #83d8e6}
.energy-stream{position:fixed;z-index:80;width:14px;height:14px;pointer-events:none;transform:translate(-50%,-50%);animation:energy-travel .9s cubic-bezier(.3,.08,.25,1) forwards}
.energy-stream i{position:absolute;inset:0;border-radius:50%;background:#fff4a8;box-shadow:0 0 12px #7bd9ed,0 0 24px #fff4a8}
.energy-stream i:nth-child(2){transform:translate(-20px,13px) scale(.62);animation:energy-orbit .45s linear infinite}
.energy-stream i:nth-child(3){transform:translate(17px,19px) scale(.42);animation:energy-orbit .55s linear infinite reverse}
.level-up{position:fixed;z-index:90;left:50%;top:28%;transform:translate(-50%,-50%);min-width:280px;padding:25px 34px;text-align:center;background:#fffef3f2;border:1px solid #e7d19a;border-radius:24px;box-shadow:0 15px 60px #1f56634a;animation:level-rise 1.8s ease forwards;pointer-events:none}
.level-up small,.level-up strong{display:block}.level-up small{font-size:12px;letter-spacing:2px;color:var(--muted)}.level-up strong{font:500 28px/1.3 Georgia,serif;margin-top:10px;color:#235964}

.choice-response{display:none;margin:-5px 0 22px;padding:17px 20px;border-radius:14px;background:#edf4f0;color:#46636b;line-height:1.75;font-size:16px}.choice-response.show{display:block}
.route-reminder{padding:14px 18px;border-left:3px solid #8ba9a5;background:#f0f5f2;color:#536c72}.first-choice{padding:14px 18px;border-radius:14px;background:#eef4f1}.first-choice small,.first-choice strong{display:block}.first-choice small{font-size:11px;letter-spacing:1.5px;color:var(--muted)}.first-choice strong{margin-top:7px}

.map-title{display:flex;justify-content:space-between;align-items:flex-end;gap:25px;margin-bottom:20px}.map-title h1{margin-bottom:6px}.map-title p{margin:0;color:var(--muted)}
.chapter-switch{display:flex;gap:8px;max-width:64%;overflow-x:auto;padding:4px;scroll-snap-type:x proximity}
.chapter-switch button{flex:none;min-width:170px;min-height:62px;padding:9px 15px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#fff;scroll-snap-align:end;font-family:Georgia,serif}
.chapter-switch button small{display:block;margin-bottom:5px;font:12px 'Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:1px;color:var(--muted)}
.chapter-switch button.selected{background:#e8f0ec;border-color:#6f9691;box-shadow:inset 0 0 0 1px #6f9691}
.route-map{position:relative;width:100%;aspect-ratio:2/1;min-height:380px;max-height:590px;overflow:hidden;border:1px solid #d6e1e5;border-radius:27px;background:#c9e6ea;isolation:isolate}
.route-map.wide{aspect-ratio:3/1;min-height:0;max-height:none}
.route-map>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.route-map:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fff0 45%,#123f4524);pointer-events:none}
.route-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route-map line{stroke:#315f68;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 1px 2px #fffbd6);vector-effect:non-scaling-stroke;animation:path-draw .5s ease both}
.route-map line.alternate{stroke:#8da8ac;stroke-dasharray:6 5}
.route-map line.planned{stroke:#315f68;stroke-width:3.5}
.route-map line.unexplored{stroke:#e8ecea;stroke-width:3;stroke-dasharray:7 7;filter:drop-shadow(0 1px 2px #31596355)}
.route-node,.branch-question{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:4;border:2px solid #fff;background:#2a6670;color:white;border-radius:50%;box-shadow:0 3px 12px #183f4c66}
.route-node{width:44px;height:44px;min-height:44px}.route-node span{font-size:20px;line-height:1}.route-node small{position:absolute;left:50%;top:44px;transform:translateX(-50%);min-width:25px;padding:2px 7px;border-radius:9px;background:#fffef0;color:#315961;font-size:11px}
.route-node.key{width:54px;height:54px;background:#315963;border-color:#ffe6a5;box-shadow:0 0 0 7px #fff2ad42,0 5px 16px #183f4c75}
.route-node.next{background:#fffdf0;color:#315f68;border-color:#315f68;animation:current-node 1.9s ease-in-out infinite}.route-node.next:disabled{opacity:1}
.route-node.question{background:#edf0ed;color:#6f8587;border-color:#d5dcda;border-style:dashed}.route-node.alternate{background:#91a6aa;border-style:dashed}
.branch-question{width:43px;height:43px;min-height:43px;background:#f2f4f1;color:#6f8587;border-color:#d5dcda;font:700 20px Georgia,serif;animation:question-in .45s ease both}
.location-pin{position:absolute;right:3%;bottom:4%;z-index:5;min-height:44px;padding:10px 16px;border-radius:22px;background:#fffef0e8;border:1px solid #e4d6a6;box-shadow:0 3px 12px #183f4c3b}
.map-legend{display:flex;gap:22px;flex-wrap:wrap;margin:16px 4px 34px;color:var(--muted);font-size:14px}.map-legend span{display:flex;align-items:center;gap:8px}.route-dot{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;background:#2a6670;color:white}.route-dot.key{background:#315963;color:#ffe6a5}.route-dot.next{background:#fffdf0;color:#315f68;border:1px solid #315f68}.route-dot.question{background:#eef1ee;color:#78898a;border:1px dashed #9aa9a8}
.route-options{display:grid;gap:12px;margin:24px 0}.route-options button{min-height:70px;padding:15px 18px;text-align:left;border:1px solid var(--line);border-radius:14px;background:#f8faf8}.route-options button strong,.route-options button small{display:block}.route-options button small{margin-top:8px;color:var(--muted)}
.location-view{margin-top:20px;overflow:hidden;border-radius:18px}.location-view img{width:100%;height:auto;display:block}

.discoveries,.bay-friends{margin:44px 0 58px}.collection-heading h2{font-size:28px;margin:8px 0}.collection-heading>p:last-child{margin:0;color:var(--muted);font-size:14px}.discovery-field{display:flex;align-items:flex-end;gap:38px;flex-wrap:wrap;min-height:180px;padding:20px 10px 4px}.discovery-object{width:160px;padding:0;text-align:center;background:transparent}.discovery-object img,.discovery-object .asset-pending{display:block;width:150px;height:125px;min-height:0;margin:0 auto;object-fit:contain;filter:drop-shadow(0 7px 7px #254a5528)}.discovery-object strong,.discovery-object small{display:block}.discovery-object strong{margin-top:9px;font:500 18px/1.35 Georgia,serif}.discovery-object small{margin-top:5px;color:var(--muted)}.collection-empty{display:inline-block;margin:22px 0 0;padding:15px 0;color:var(--muted);border-bottom:1px dashed #aebdb8}.bay-friends .friends{margin:22px 0 0}
.discovery-detail{text-align:center;padding:15px 20px 10px}.discovery-detail>img{width:210px;height:190px;object-fit:contain;filter:drop-shadow(0 10px 12px #254a5530)}.discovery-detail h2{font:500 29px Georgia,serif}.discovery-detail p{max-width:520px;margin:12px auto}.discovery-detail small{display:block;color:var(--muted);line-height:1.6}.map-locked{min-height:330px;margin:25px 0 40px;display:grid;place-content:center;text-align:center;border-radius:26px;background:linear-gradient(145deg,#eaf4f4,#f4f1f8);color:#617a80}.map-locked>span{font-size:52px;color:#d2a954}.map-locked h2{font:500 27px Georgia,serif;margin:12px 0 0}
.badge-segments{margin:22px 0 30px}.badge-segments i{width:28px}

.shelf-tabs{position:sticky;top:0;z-index:6;padding:10px 0;background:linear-gradient(var(--paper) 78%,transparent)}
.scrapbook-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:25px}
.chapter-memory{position:relative;min-height:250px;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fff;overflow:hidden}.chapter-memory>div:first-child{float:right;width:155px;height:160px;margin:-5px -3px 10px 20px}.chapter-memory>div:first-child img{width:100%;height:100%;object-fit:contain}.chapter-memory h2{font-family:Georgia,serif;font-size:25px}.chapter-memory p{color:var(--muted)}.locked-memory{background:#eef1ed;color:#768582}.locked-memory>div:first-child{display:grid;place-items:center;font-size:54px;opacity:.4}

@keyframes energy-travel{to{transform:translate(calc(var(--energy-x) - 50%),calc(var(--energy-y) - 50%)) scale(.45);opacity:.75}}
@keyframes energy-orbit{to{rotate:360deg}}
@keyframes level-rise{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}18%,75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-64%) scale(.97)}}
@keyframes path-draw{from{opacity:0}to{opacity:1}}
@keyframes current-node{50%{box-shadow:0 0 0 9px #fff4a93f,0 4px 16px #183f4c66}}
@keyframes question-in{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes gift-appear{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes gift-glow{50%{transform:scale(1.08);opacity:.75}}@keyframes gift-away{to{opacity:0;transform:translate(45vw,42vh) scale(.12)}}

@media(max-width:950px){
  .cards .art,.cards .side-card .art{height:258px}
  .side-card .fragment-scene{height:258px}
  .map-title{align-items:flex-start;flex-direction:column}.chapter-switch{max-width:100%;width:100%}.chapter-switch button{min-width:185px}
  .route-map{min-height:370px;aspect-ratio:1.9/1}.route-node{width:48px;height:48px}.route-node.key{width:56px;height:56px}
  .route-map.wide{min-height:250px;aspect-ratio:3/1}
  .letter-sheet{padding:86px 68px 120px}.opened-envelope{width:140px;height:140px}
  .scrapbook-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
  .cards .art,.cards .side-card .art{height:245px}.side-card .fragment-scene{height:245px}
  .route-map{min-height:360px;aspect-ratio:1.35/1}.route-map>img{width:145%;max-width:none;left:-22%;object-position:center}
  .route-map.wide{min-height:250px;aspect-ratio:3/1}.route-map.wide>img{width:100%;left:0}
  .letter-sheet{padding:75px 42px 105px;min-height:590px}.opened-envelope{width:120px;height:120px}.gift-reveal h2{font-size:27px}
  .route-node small{top:47px}.map-legend{gap:12px;font-size:12px}.scrapbook-grid{grid-template-columns:1fr}.shelf-tabs{overflow-x:auto;flex-wrap:nowrap}.shelf-tabs button{flex:none}
}
@media(prefers-reduced-motion:reduce){.energy-stream{display:none}.level-up{animation:none;opacity:1}.route-node.current{animation:none}}