:root{color-scheme:dark;--gold:#ffe38a;--cream:#fff8df;--aqua:#83ebdc;--footer:34px}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%}html{background:#082f44}body{background:radial-gradient(ellipse at 50% 43%,#17617a,#082f44 72%);background-attachment:fixed;color:var(--cream);font-family:system-ui,-apple-system,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overflow-x:hidden}header{position:absolute;z-index:5;left:0;right:0;top:0;padding:max(10px,env(safe-area-inset-top)) 12px 6px;display:flex;align-items:center;justify-content:space-between}header span{font-size:13px;font-weight:750;letter-spacing:.05em;color:#c5e5ec}header>div{display:flex;gap:6px}header button{padding:10px 13px;border:1px solid #a0dae36b;border-radius:30px;background:#052b40b0;color:#f1f9fa;font:700 14px system-ui;min-height:46px;cursor:pointer}#settings{font-size:25px;padding:1px 12px}main{position:relative;z-index:2;height:calc(100dvh - var(--footer) - env(safe-area-inset-bottom));min-height:650px;display:flex;flex-direction:column;align-items:center;padding:calc(68px + env(safe-area-inset-top)) 0 8px}h1{height:88px;flex-shrink:0;width:100%;font-size:clamp(28px,8.8vw,42px);font-weight:900;line-height:1.18;letter-spacing:.015em;margin:0;text-align:center;white-space:pre-line;display:flex;align-items:center;justify-content:center;text-shadow:0 4px 0 #032637,0 7px 25px #0005}#location{flex-shrink:0;margin:0 10px 5px;color:#c7edf2;font-size:16px;font-weight:650;line-height:1.6;text-align:center}#world{position:relative;flex:1;width:100%;min-height:200px;max-width:850px}canvas{display:block;width:100%;height:100%}#choices{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}.choice{border:0;background:transparent;color:#fff8d9;cursor:pointer;font:750 30px system-ui;position:relative;padding:0;min-width:0;min-height:80px}.choice span{position:absolute;bottom:45%;left:50%;transform:translateX(-50%);animation:point 1s ease-in-out infinite;text-shadow:0 2px 8px #0009}.choice:nth-child(2) span{animation-delay:.2s}.choice:nth-child(3) span{animation-delay:.4s}.choice:focus-visible{outline:3px solid #ffe6a0;outline-offset:-6px;border-radius:20px}.choice:disabled{cursor:default}.choice:disabled span{display:none}#hint{pointer-events:none;position:absolute;bottom:1%;left:0;right:0;text-align:center;font-size:20px;font-weight:800;margin:0;text-shadow:0 2px 6px #032e3f}#caption{flex-shrink:0;min-height:58px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:750;line-height:1.3;text-align:center;color:#e4f6fa;margin:2px 10px}#collection{flex-shrink:0;position:relative;width:min(100% - 20px,520px);background:linear-gradient(150deg,#083c50ee,#042333f5);border:2px solid #9bd3dc66;border-radius:22px;padding:10px 8px 9px;box-shadow:0 8px 25px #001b2c55}#slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.slot{position:relative;border:2px dashed #7ca9b4;border-radius:13px;min-height:100px;text-align:center;color:#8db9c4;display:flex;flex-direction:column;justify-content:center;padding:18px 1px 5px}.slot span{font-size:32px;font-weight:900;line-height:1.2}.slot span img{display:block;width:44px;height:44px;max-width:100%;margin:0 auto}.slot small{font-size:12px;font-weight:750;line-height:1.4;overflow-wrap:anywhere}.slot em{display:block;font-size:10px;line-height:1.35;font-style:normal;color:inherit;opacity:.85}.spotNumber{position:absolute;top:1px;left:5px;font-size:14px}.slot.found{border:2px solid var(--gold);background:linear-gradient(145deg,#fffbe8,#ffe7a7);color:#183d4a;box-shadow:0 0 10px #ffdb6944}.slot.current:not(.found){border-color:var(--gold);background:#215569;box-shadow:inset 0 0 16px #ffdb6e22}.slot.current .spotNumber{color:#ffe38a}.slot.found .spotNumber{color:#416b76}.slot.receiving{animation:receiving .55s ease-in-out infinite}.gotBadge{display:none;position:absolute;top:-18px;left:50%;transform:translateX(-50%);padding:3px 8px;background:#ffdd67;color:#113a4b;border:2px solid #fff6bd;font-size:14px;font-weight:950;border-radius:20px;white-space:nowrap;z-index:2}.slot.justLanded{animation:landed .8s cubic-bezier(.2,.8,.25,1);z-index:4}.slot.justLanded .gotBadge{display:block;animation:badgeUp 1s both}.slot.justLanded::after{content:'';position:absolute;inset:-5px;border:4px solid #ffe58b;border-radius:16px;animation:ring .85s ease-out both;pointer-events:none}#count{font-size:23px;font-weight:850;text-align:center;margin:8px 0 0;line-height:1.25}#collectionHint{font-size:13px;color:#cee8ed;text-align:center;margin:5px 0 0;line-height:1.5}#reward{background:linear-gradient(180deg,#ffe99c,#ffc858);color:#143b4c;border:2px solid #fff4bd;width:100%;border-radius:15px;min-height:58px;font:850 21px system-ui;margin-top:12px;cursor:pointer;box-shadow:0 5px 0 #ad7b20}#storageNotice{flex-shrink:0;background:#fff1cb;color:#714113;font-size:16px;font-weight:650;padding:12px;border-radius:12px;margin:8px 12px;text-align:center}#storageNotice:empty{display:none}footer{position:relative;z-index:2;text-align:center;font-size:11px;line-height:1.5;color:#b0d3de;padding:4px 8px calc(8px + env(safe-area-inset-bottom));min-height:calc(var(--footer) + env(safe-area-inset-bottom))}#fallback{position:absolute;inset:30% 0;text-align:center;font-size:clamp(40px,12vw,90px);pointer-events:none}#passportIntro,#successGuide{flex:1;width:100%;max-width:530px;min-height:270px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px 15px 18px}#passportIntro>div{font-size:27px;letter-spacing:3px}#passportIntro h2{font-size:29px;line-height:1.4;margin:18px 0 12px}#passportIntro p{font-size:20px;color:#d1ecf1;line-height:1.7;margin:4px 0}.guideTreasure{position:relative;line-height:0;margin:4px 0 12px}.guideTreasure img{width:94px;height:94px;filter:drop-shadow(0 6px 12px #ffe38655)}.guideTreasure b{position:absolute;bottom:0;right:-10px;display:flex;align-items:center;justify-content:center;line-height:1;width:36px;height:36px;border-radius:50%;background:#8cf2cb;color:#10463d;border:3px solid #fff4cf;font-size:23px}#guideTitle{font-size:clamp(25px,7.2vw,34px);font-weight:900;line-height:1.4;white-space:pre-line;color:var(--gold);margin:0;text-shadow:0 3px 0 #032c40}#guideRemaining{font-size:24px;font-weight:850;margin:10px 0 7px;color:#c7fff0}.parentHint{font-size:15px;color:#d2e9ef;line-height:1.6;margin:3px 0;max-width:340px}.passportLink{font-size:14px;color:#cee9f4;margin:10px 0 0;text-underline-offset:4px}.flyingToken{position:fixed;z-index:1002;pointer-events:none;width:136px;height:136px;filter:drop-shadow(0 0 18px #ffe27d);will-change:transform}.flyingToken img{width:100%;height:100%}#confetti{position:fixed;inset:0;pointer-events:none;z-index:1001;overflow:hidden}.spark{position:absolute;width:11px;height:18px;border-radius:2px;pointer-events:none}.spark.star{width:19px;height:19px;clip-path:polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 76%,20% 100%,30% 60%,0 38%,38% 35%)}#flare{position:fixed;z-index:1;inset:0;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 38%,#ffd95e22 0deg 12deg,transparent 12deg 25deg),radial-gradient(circle at 50% 38%,#ffe27755,transparent 60%);transition:opacity .4s}body[data-phase=reveal] #flare,body[data-phase=flying] #flare,body[data-phase=landed] #flare{opacity:1}#arrivalCallout{position:fixed;z-index:1003;top:44%;left:50%;width:min(92vw,400px);transform:translate(-50%,-50%);background:#fff0a2;color:#123e50;font-size:clamp(24px,7.3vw,34px);font-weight:950;text-align:center;padding:18px 8px;border:4px solid #fff9d9;border-radius:22px;box-shadow:0 8px 0 #b97d23,0 10px 45px #ffe17799;pointer-events:none;animation:callout .35s ease-out}dialog{color-scheme:light;width:min(94vw,430px);max-height:90dvh;overflow:auto;border:3px solid #f2da8a;background:#fff6df;color:#163647;border-radius:26px;padding:26px 18px;text-align:center;box-shadow:0 20px 90px #0008}dialog::backdrop{background:#001b2bdc}dialog h2{font-size:28px;margin:10px 0 18px;line-height:1.35}dialog p{font-size:18px;line-height:1.6}dialog button{display:block;width:100%;padding:15px 10px;min-height:56px;border:0;border-radius:14px;background:#184b60;color:white;font:750 18px system-ui;margin:12px 0;cursor:pointer}.secondary{background:transparent;border:1px solid #aebac0;color:#3b5263}.close{position:absolute;right:10px;top:8px;background:transparent;color:#244455;width:44px;height:44px;min-height:44px;padding:0;font-size:28px;margin:0}.badge{font-size:54px!important;margin:8px 0}#rewardIcons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}#rewardIcons img{width:54px;max-width:100%;height:54px}#rewardIcons small{display:block;font-size:11px;line-height:1.4;color:#345260}.adult{font-size:13px!important;color:#627780}#settingsDialog a{color:#205b74;font-size:16px}button:focus-visible,a:focus-visible{outline:3px solid #f3b648;outline-offset:3px}[hidden]{display:none!important}@keyframes point{50%{margin-bottom:7px}}@keyframes receiving{50%{box-shadow:0 0 25px #ffe38a99;background:#537761}}@keyframes landed{0%{transform:scale(.75)}35%{transform:scale(1.27) rotate(-5deg)}60%{transform:scale(.96) rotate(3deg)}80%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.45);opacity:0}}@keyframes badgeUp{0%{opacity:0;transform:translate(-50%,15px) scale(.7)}25%,85%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px)}}@keyframes callout{0%{transform:translate(-50%,-50%) scale(.65)}70%{transform:translate(-50%,-50%) scale(1.08)}100%{transform:translate(-50%,-50%) scale(1)}}@media(max-height:700px){main{min-height:650px;padding-top:62px}h1{height:76px;font-size:29px}#location{font-size:14px}#world{min-height:170px}#caption{font-size:19px;min-height:50px}#hint{font-size:18px}.slot{min-height:88px}.slot span img{width:38px;height:38px}#count{font-size:21px}#collectionHint{font-size:12px}#successGuide{padding-top:8px;min-height:270px}.guideTreasure img{width:72px;height:72px}#guideTitle{font-size:26px}.parentHint{font-size:14px}}@media(prefers-reduced-motion:reduce){.choice span,.slot.receiving,.slot.justLanded,.slot.justLanded::after,.gotBadge,#arrivalCallout{animation:none!important}#flare{transition:none;background:radial-gradient(circle at 50% 38%,#ffe27733,transparent 60%)}.slot.justLanded{outline:4px solid #ffe38a}.gotBadge{display:none!important}}

body[data-phase=next] main,body[data-phase=complete] main{height:auto;min-height:calc(100dvh - var(--footer) - env(safe-area-inset-bottom))}#successGuide{flex:1 0 auto}

body[data-phase=complete] .guideTreasure img{width:72px;height:72px}body[data-phase=complete] #successGuide{padding-top:8px;padding-bottom:12px}body[data-phase=complete] .passportLink{display:none}
@media(max-height:700px){body[data-phase=complete] .guideTreasure,body[data-phase=complete] .parentHint{display:none}body[data-phase=complete] h1{height:56px}body[data-phase=complete] #successGuide{min-height:0;padding:6px 14px 8px}body[data-phase=complete] #guideRemaining{font-size:22px;margin:6px 0}body[data-phase=complete] #guideTitle{font-size:26px}}

.previewPanel{position:relative;z-index:30;background:#fff1bc;color:#132e3d;padding:10px 14px;font-size:14px}.previewPanel summary{cursor:pointer;font-weight:800}.previewPanel nav{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px}.previewPanel a{background:#fff;color:#132e3d;border-radius:8px;padding:10px;text-decoration:underline}
