.earth-scene{color:#414461;background:#b6c7e1;isolation:isolate}.earth-background,.earth-wash{position:absolute;inset:0;z-index:-2}.earth-background{background:url('./assets/memories.jpg') center/cover;opacity:.62}.earth-wash{z-index:-1;background:linear-gradient(180deg,#dce5f29c,#e3e9f329 40%,#dce3f3d9 85%),radial-gradient(ellipse at center,#b7cfe333,transparent 70%)}
.earth-heading{position:absolute;top:30px;left:20%;right:20%;text-align:center;z-index:3;pointer-events:none}.earth-heading p{color:#9a7226;font-size:13px;font-weight:bold;letter-spacing:3px;margin:0 0 8px}.earth-heading h1{font-size:clamp(26px,3.2vw,42px);letter-spacing:5px;margin:0;text-shadow:0 2px 18px #fff9}.earth-heading>span{display:block;margin-top:10px;font-size:11px;letter-spacing:4px;color:#5e617a}
.earth-back{position:absolute;z-index:8;left:25px;top:25px;border:1px solid #fff9;background:#fff7da88;color:#4e506d;border-radius:50%;width:44px;height:44px;font-size:23px}
#globe-stage{position:absolute;inset:120px 15% 210px;touch-action:none}#globe-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#globe-canvas:active{cursor:grabbing}
#map-markers,#marker-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.map-marker{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;padding:0;color:#ffd972;font-size:25px;line-height:32px;width:34px;height:34px;text-shadow:0 0 8px #fff4a2,0 1px 2px #8a602d;filter:drop-shadow(0 0 3px #ffd264)}.map-marker.locked{opacity:.2;filter:none}.map-marker span{position:absolute;left:50%;top:32px;transform:translateX(-50%);font-size:10px;line-height:16px;white-space:nowrap;background:#fff9e8e8;border:1px solid #fff8;border-radius:10px;padding:1px 7px;color:#6c5b3c;text-shadow:none}.map-marker.unlocking{animation:city-pop .7s ease-in-out 3}@keyframes city-pop{50%{filter:drop-shadow(0 0 13px #fff49a);font-size:34px}}
.globe-tools{position:absolute;right:27px;top:44%;z-index:5;display:grid;gap:8px}.globe-tools button{width:36px;height:36px;border-radius:50%;border:1px solid #fff9;color:#555976;background:#fff8debb;font-size:20px}
#snow-field{position:absolute;inset:145px 6% 240px;pointer-events:none;z-index:4}.snowflake{position:absolute;pointer-events:auto;border:0;background:radial-gradient(circle,#fff9,transparent 68%);color:#f9fdff;text-shadow:0 0 9px #76a7ce,0 2px 4px #5c7fba;font-size:30px;width:50px;height:50px;padding:0;animation:snow-float 5s ease-in-out infinite;animation-delay:var(--delay)}.snowflake:hover{transform:scale(1.2);color:#fff4b9}.snowflake:disabled{pointer-events:none;opacity:.45}.snowflake.collected{animation:snow-collect .5s ease-out forwards;pointer-events:none}@keyframes snow-float{50%{translate:0 -16px;rotate:15deg}}@keyframes snow-collect{to{transform:scale(1.9);opacity:0;filter:drop-shadow(0 0 15px #fff)}}.snow-spark{position:absolute;color:#fff5bd;font-size:18px;pointer-events:none;animation:snow-spark .55s ease-out forwards}@keyframes snow-spark{to{transform:translate(var(--x),var(--y));opacity:0}}
.explore-panel{position:absolute;z-index:5;bottom:38px;left:50%;transform:translateX(-50%);width:min(540px,84vw);padding:14px 23px 10px;border:1px solid #fff9;border-radius:24px;background:linear-gradient(135deg,#fffae8de,#e9e9f7dc);box-shadow:0 8px 35px #646e9918;backdrop-filter:blur(12px);text-align:center}
.earth-instruction{font-size:13px;letter-spacing:1px;margin:0 0 12px}.progress-heading{display:flex;justify-content:space-between;font-size:11px;color:#777590}.snow-meter{height:5px;border-radius:4px;background:#d7dce9;margin-top:7px;overflow:hidden}.snow-meter>span{display:block;height:100%;background:linear-gradient(90deg,#95c8e6,#c3aee0,#e9cb78);transition:width .4s}#next-city{font-size:10px;margin:7px 0 9px;color:#787689}
#city-list{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}#city-list button{border:1px solid #e1dce6;border-radius:15px;background:#fff8;font-size:10px;padding:6px 9px;color:#a29baa}#city-list button.unlocked{color:#87652c;border-color:#dfc890;background:#fff6da}#city-list button:focus-visible{outline:2px solid #9c81b3;outline-offset:2px}
#reset-trip{border:0;background:transparent;font-size:10px;color:#7e7b93;margin-top:8px;text-decoration:underline;text-underline-offset:3px}
.earth-footer{position:absolute;bottom:20px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;font-size:10px;letter-spacing:2px}.earth-footer button{pointer-events:auto;background:#fff2d3;border:1px solid #fff;border-radius:30px;color:#645774;min-width:84px;min-height:40px}
#earth-toast{position:absolute;z-index:8;left:50%;top:125px;transform:translateX(-50%);background:#fff7d9ed;border:1px solid white;padding:10px 20px;border-radius:30px;font-size:12px;max-width:85%;text-align:center;box-shadow:0 5px 25px #817a9422;pointer-events:none}#earth-toast:empty{display:none}
#memory-note{position:absolute;z-index:9;right:6%;top:25%;width:230px;padding:27px 23px;background:#fff5d9;box-shadow:0 15px 35px #53556e25;transform:rotate(3deg);border-radius:3px 3px 20px 3px;color:#655770}#memory-note small{font-size:9px;color:#a4927e}#memory-note p{font-size:16px;line-height:1.8}#memory-note button{position:absolute;top:6px;right:9px;background:none;border:0;color:#82717b;font-size:21px}
dialog{border:1px solid #fff;border-radius:26px;color:#514f68;background:linear-gradient(135deg,#fff9e9,#eaeafb);box-shadow:0 25px 100px #27243d55}dialog::backdrop{background:#27274080;backdrop-filter:blur(7px)}
#album-dialog{width:min(690px,90vw);max-height:90dvh;padding:27px;text-align:center;overflow:auto}.album-close{position:absolute;top:12px;right:14px;border:0;background:#eee8e2;border-radius:50%;width:32px;height:32px;color:#6a6178;font-size:22px}.album-kicker{font-size:9px;letter-spacing:3px;color:#9d8860;margin:7px 30px}#album-title{font-size:26px;margin:12px 0 20px}#album-frame{height:min(45dvh,370px);background:#dfe7ef;border-radius:14px;overflow:hidden;touch-action:pan-y}#album-photo{width:100%;height:100%;object-fit:contain}#photo-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#fcf7e5,#d8e4ef);color:#888399}#photo-placeholder[hidden]{display:none}#photo-placeholder>span{font-size:55px;color:#c5ab70}#photo-placeholder h3{font-size:17px;font-weight:normal}#photo-placeholder p{font-size:12px}.album-controls{display:flex;align-items:center;justify-content:center;gap:35px;margin-top:17px;font-size:12px}.album-controls button{border:1px solid #d7d1df;border-radius:50%;background:#fff9;width:38px;height:38px;color:#655974}.album-help{font-size:10px;color:#918a9a}
#reset-dialog{max-width:90vw;padding:26px}#reset-dialog h2{font-size:20px}#reset-dialog p{font-size:12px;line-height:1.8}#reset-dialog>div{display:flex;justify-content:flex-end;gap:10px}#reset-dialog button{border:1px solid #d8cbe1;border-radius:20px;padding:10px 16px;background:#fff7e0;color:#5e5368}
#globe-error{position:absolute;top:30%;left:15%;right:15%;background:#fff9e5;padding:25px;border-radius:20px;font-size:13px;line-height:1.8}
.finale-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse,#fff8e4,#d8d9ed);color:#666078;text-align:center}.finale-kicker{font-size:10px;letter-spacing:4px;color:#a89370}.finale-scene h1{font-size:clamp(24px,4vw,36px)}#paper-ball{width:155px;height:150px;margin:30px;background:radial-gradient(circle at 35% 30%,white,#e2dccb 65%,#c4bdac);border:1px solid white;border-radius:40% 55% 43% 50%;box-shadow:10px 20px 40px #aaa3bc44;color:#ada08c;font-size:65px;rotate:-10deg}#paper-ball span{display:block;font-size:11px;letter-spacing:3px}#final-card{background:#fffdf4;border:1px solid white;border-radius:12px;padding:35px 50px;box-shadow:0 12px 40px #aaa3bc33;animation:paper-open .7s ease}#final-card>span{font-size:40px;color:#bd9ba9}#final-card p,#final-card small{font-size:12px;color:#9b90a1}.finale-scene footer{position:absolute;bottom:25px;font-size:10px;letter-spacing:3px}@keyframes paper-open{from{transform:scale(.3) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
@media(max-width:600px){.earth-heading{top:24px;left:12%;right:12%}.earth-heading p{font-size:10px;letter-spacing:2px}.earth-heading h1{font-size:25px;letter-spacing:2px}.earth-heading>span{font-size:9px;letter-spacing:2px}.earth-back{top:16px;left:12px;width:34px;height:34px;font-size:19px}#globe-stage{inset:118px 0 255px}.globe-tools{right:10px;top:36%}.globe-tools button{width:30px;height:30px}.explore-panel{bottom:65px;width:92vw;padding:12px 12px 8px}.earth-instruction{font-size:11px;letter-spacing:0}#city-list{gap:4px}#city-list button{font-size:9px;padding:6px 7px}#snow-field{inset:140px 1% 265px}.snowflake{width:44px;height:44px;font-size:27px}.earth-footer{bottom:13px;left:18px;right:18px}#earth-toast{top:100px;font-size:11px;padding:8px 13px;width:max-content;max-width:90%}#memory-note{right:8%;top:25%;width:190px}#album-dialog{padding:22px 15px}#album-title{font-size:23px}.map-marker{font-size:22px}.map-marker span{font-size:9px}}
@media(max-height:550px) and (orientation:landscape){.earth-heading{top:12px;left:5%;right:45%}.earth-heading h1{font-size:23px}.earth-heading p{font-size:9px;margin:0 0 3px}.earth-heading>span{display:none}#globe-stage{inset:55px 43% 12px 5%}.explore-panel{left:auto;right:3%;top:75px;bottom:auto;transform:none;width:37%;padding:12px}.earth-instruction{font-size:10px}#snow-field{inset:70px 43% 40px 3%}.globe-tools{right:45%;top:40%}.earth-back{top:12px;left:12px}#earth-toast{top:12px;left:75%;font-size:10px;padding:7px 10px;max-width:37%}#memory-note{right:8%;top:15%;width:210px}.earth-footer{bottom:8px}#album-frame{height:38dvh}.album-kicker,.album-help{display:none}#album-title{margin:0 0 10px}}

#snow-field.decorative .snowflake{pointer-events:none;opacity:.3;font-size:19px;background:none}.earth-scene.hidden .snowflake{animation-play-state:paused}.map-marker.journey-complete{animation:city-pop .9s ease-in-out 2}

/* Pearl globe local preview. */
.earth-scene{background:#cbd4e9;color:#4c4b6b}.earth-background{opacity:.76}
.earth-wash{background:radial-gradient(ellipse at 50% 44%,#d6e3f081 0%,#e7e9fa55 36%,transparent 63%),linear-gradient(180deg,#e2e6f2a1 0%,#f0e7fa12 36%,#e9e9f5b0 78%,#e4e3f4de 100%)}
#globe-stage:before{content:"";position:absolute;inset:0 8%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#c5dfff11 38%,#e1d5ff55 57%,#f5f5ff38 64%,transparent 73%);filter:blur(16px)}
.earth-heading h1{color:#454969;font-weight:700;letter-spacing:5px;text-shadow:0 2px 15px #ffffffaa}.earth-heading p{color:#a07e46;letter-spacing:3.5px}.earth-heading>span{color:#74748d}
.map-marker{color:#f4d494;font-size:23px;text-shadow:0 0 7px #ffefc1,0 1px 2px #99754d77;filter:drop-shadow(0 0 3px #fff0b4)}
.map-marker:not(.locked):not(.unlocking):not(.journey-complete){animation:pearl-breathe 3.4s ease-in-out infinite}
@keyframes pearl-breathe{50%{filter:drop-shadow(0 0 6px #ffecb5);text-shadow:0 0 10px #fff8dd,0 1px 2px #99754d55}}
.map-marker span{background:#fffdf0cf;border:1px solid #ffffffcc;padding:2px 8px;border-radius:14px;color:#8a7656;font-size:9px;box-shadow:0 2px 9px #68608410;backdrop-filter:blur(7px)}
.map-marker.locked{opacity:.2}.map-marker.locked span{background:#f5f1ef88}
.explore-panel{background:linear-gradient(130deg,#fffaf2be,#f0ecf8ad);border:1px solid #ffffffb8;box-shadow:0 10px 32px #66638612;backdrop-filter:blur(16px);border-radius:25px}
.earth-instruction{color:#66627e;font-size:12px}.progress-heading{color:#89839c}.snow-meter{height:4px;background:#dcdbe97a}.snow-meter>span{background:linear-gradient(90deg,#a4cddd,#c9b7e5,#e5cc9b)}
#city-list button{background:#fff9;border-color:#e8e1ec;color:#aaa0af}#city-list button.unlocked{background:#fff7e5bf;border-color:#e8d6ac;color:#957b4b}
.globe-tools button,.earth-back{background:#fffaf0b0;border-color:#ffffffa8;color:#79738d;box-shadow:0 3px 12px #8177930d}.earth-footer button{background:linear-gradient(120deg,#fff9e5,#eae3f7);color:#80718a;border-color:#fff}
@media(max-width:600px){.earth-heading h1{letter-spacing:2px}.earth-instruction{font-size:11px}.map-marker{font-size:22px}#globe-stage:before{inset:9% 0}.explore-panel{backdrop-filter:blur(10px)}}
@media(max-height:550px) and (orientation:landscape){.earth-instruction{font-size:10px}.earth-heading h1{letter-spacing:2px}}