:root{--ink:#225341;--green:#275d45;--mint:#e3ecd4;--orange:#eb7d2c;--paper:#fff9e8;--line:#d9d5b2}*{box-sizing:border-box}body{margin:0;background:#eef2de;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;min-height:44px;border:2px solid #517459;border-radius:24px;background:var(--paper);color:var(--ink);font-weight:900;padding:9px 20px}button:hover:not(:disabled){background:#f1e8c9}button:disabled{cursor:default;opacity:.6}button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:4px solid #3863bb;outline-offset:3px}button.primary{background:var(--orange);color:#fff9e7;border-color:#ca6e2b;box-shadow:0 3px 0 #b8662b}button.primary:hover:not(:disabled){background:#f48e3a}[hidden]{display:none!important}.spot-page{max-width:1260px;margin:0 auto;padding:18px 22px 40px}.page-heading{text-align:center;margin:8px 0 20px}.page-heading h1{font-size:clamp(22px,3vw,31px);margin:0 0 9px}.page-heading p{margin:0;font-size:14px}#host{position:relative;background:var(--paper);border:1px solid #a6b58d;overflow:hidden;border-radius:18px;box-shadow:0 15px 35px #36654022}.spot-top{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 20px;background:var(--green);color:var(--paper)}.spot-top strong{font-size:16px;letter-spacing:.08em}.spot-top nav{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}.spot-top button{padding:6px 11px;min-height:38px;background:#e8f0d8;border-color:#d2dfbf;font-size:12px}#base{background:radial-gradient(ellipse at 0% 100%,#dce7c0 0,transparent 36%),radial-gradient(ellipse at 100% 0%,#ecedcd 0,transparent 30%),var(--paper)}#cover{padding:30px 35px 27px;text-align:center}#cover h2{display:inline-block;background:var(--green);color:var(--paper);padding:12px 35px;font-size:clamp(26px,3.6vw,43px);letter-spacing:.06em;line-height:1.5;margin:0 0 24px;transform:rotate(-1deg);box-shadow:7px 5px 0 #b9cba0;border-radius:3px}#cover h2 br{display:none}#cover em{color:#ffa044;font-style:normal}.park-poster{padding:8px;background:#fffdf0;box-shadow:0 5px 13px #39573133;transform:rotate(.4deg);max-width:1000px;margin:0 auto}.park-poster img{width:100%;height:355px;object-fit:cover;display:block}.cover-footer{display:flex;align-items:center;flex-direction:column;margin-top:21px;gap:11px}.five-flowers{font-size:29px;color:#507459;letter-spacing:13px;line-height:1.1}.cover-footer button{font-size:22px;min-width:310px;min-height:60px;padding:11px 35px;border-radius:40px}.cover-footer small{font-size:12px}.play-caption{text-align:center;font-size:15px;margin:0;padding:21px 15px 15px}#scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:0 24px 22px}.park-scene{position:relative;aspect-ratio:4/3;border:8px solid #fffdf1;background:url('./assets/park.webp') center/100% 100% no-repeat;border-radius:4px;box-shadow:0 4px 8px #47634530;min-width:0}.scene-label{position:absolute;left:2%;top:2%;background:var(--green);color:#fffde8;z-index:3;font-size:18px;padding:3px 13px;margin:0;transform:rotate(-2deg);letter-spacing:.1em;pointer-events:none}.park-object{position:absolute;left:var(--x);top:var(--y);width:14%;min-width:44px;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;background:#fff9e8;display:grid;place-items:center;overflow:visible;box-shadow:1px 2px 2px #26433126}.park-object img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;pointer-events:none}.park-object.extra{pointer-events:none;min-width:0;background:transparent;box-shadow:none}.park-object.extra img{border-radius:50%}.park-object.target{min-height:44px}.park-object.target:hover:not(:disabled){box-shadow:0 0 0 3px #fff9e8;z-index:2;background:#fff9e8}.park-object.found:after{content:'';position:absolute;inset:-9%;border:4px solid #ed7c2d;border-radius:50%;pointer-events:none}.park-object.hint{animation:hint-grow .6s ease-in-out infinite alternate;z-index:2;box-shadow:0 0 0 5px #f8d160}#host[data-paused=true] .park-object.hint{animation-play-state:paused}@keyframes hint-grow{to{transform:translate(-50%,-50%) scale(1.13)}}.play-controls{display:flex;flex-wrap:wrap;gap:12px 25px;align-items:center;justify-content:space-between;background:var(--green);padding:18px 26px;color:#fffae9}.progress{display:flex;align-items:center;gap:22px}.progress>span:first-child{font-size:16px;white-space:nowrap}.progress b{font-size:28px;color:#ffc252}#flowers{display:flex;gap:11px}#flowers span{font-size:32px;color:#c7d7bb;line-height:1}#flowers span.found{color:#ffc353}.buttons{display:flex;gap:10px;flex-wrap:wrap}.buttons button{font-size:14px;padding:8px 17px;min-height:44px}.buttons #review{color:#fffbed}#feedback{width:100%;font-size:14px;line-height:1.6;margin:0;text-align:center;min-height:23px}#feedback[data-state=ok]{color:#ffe19a}#result{padding:27px 45px 30px}#result>header{text-align:center}#result>header small{font-size:13px;letter-spacing:.12em}#result h2{font-size:clamp(29px,4.2vw,48px);margin:8px 0;color:var(--green);letter-spacing:.08em}#result>header p{font-size:15px;margin:0 0 22px}.comparison-layout{display:grid;grid-template-columns:minmax(0,1fr) 175px;gap:32px;align-items:end;max-width:960px;margin:0 auto}#comparisons{min-width:0}.comparison-row{display:grid;grid-template-columns:42px minmax(0,1fr) 35px minmax(0,1fr) 42px;gap:12px;align-items:center;border-bottom:2px dashed #d7d4b1;padding:13px 3px}.comparison-row:last-child{border-bottom:0}.pair-number{width:37px;height:39px;border-radius:60% 35% 60% 35%;background:var(--green);color:var(--paper);display:grid;place-items:center;font-size:20px}.comparison-row figure{margin:0;text-align:center}.comparison-row img{width:69px;height:69px;object-fit:contain;border-radius:50%;display:block;margin:0 auto}.comparison-row figcaption{font-size:13px;margin-top:3px;line-height:1.5}.pair-arrow{font-size:30px;color:#819d66;text-align:center}.pair-check{width:35px;height:35px;border-radius:50%;background:#7a9a59;color:var(--paper);font-size:25px;text-align:center}.celebrate{text-align:center;padding-bottom:30px}.celebrate img{width:175px;max-width:100%;mix-blend-mode:multiply}.celebrate strong{display:block;font-size:25px;line-height:1.6;transform:rotate(4deg)}.celebrate span{display:block;color:var(--orange);font-size:68px;line-height:1.4}#result>footer{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:26px}#result>footer button{min-width:150px;font-size:16px}.parent-note{font-size:14px;line-height:1.9;padding:24px 5px 0}.parent-note h2{font-size:20px}#modal{position:absolute;inset:0;background:#143323a6;z-index:10;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}#modal>section{width:min(100%,525px);max-height:95%;overflow:auto;background:var(--paper);border:5px solid #6d8b54;border-radius:22px;padding:22px;color:var(--ink);box-shadow:0 15px 35px #0004}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:2px dashed #c7ccaa;padding-bottom:12px;margin-bottom:16px}#modal h2{font-size:21px;margin:0}#modal p{line-height:1.9;font-size:16px}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:14px;padding:15px 0;font-weight:700}#dialog-content input[type=checkbox]{width:24px;height:24px;accent-color:#54844b}#dialog-content label:has(input[type=range]){display:flex;flex-wrap:wrap}#volume{width:100%;accent-color:#dc7f2d}#storage-note{font-size:12px!important;color:#626c54}#host:fullscreen,#host.faux-fullscreen{border:0;border-radius:0;width:100vw;height:100dvh;overflow:auto;background:var(--paper)}#host.faux-fullscreen{position:fixed;inset:0;z-index:10000}#host:fullscreen #base,#host.faux-fullscreen #base{min-height:calc(100dvh - 65px)}#host:fullscreen #modal,#host.faux-fullscreen #modal{position:fixed}
@media(max-width:900px){.spot-page{padding:14px 12px 30px}.spot-top{padding:11px 13px;gap:10px}.spot-top strong{font-size:14px}.spot-top button{font-size:11px;padding:5px 9px}.spot-top nav{gap:5px}#cover{padding:25px 23px}#cover h2{font-size:30px;padding:10px 23px}.park-poster img{height:305px}#scenes{padding:0 15px 18px;gap:12px}.scene-label{font-size:14px;padding:3px 9px}.park-scene{border-width:6px}.play-controls{padding:15px 18px;gap:12px;justify-content:center}.progress{gap:17px}#flowers{gap:8px}#flowers span{font-size:27px}.buttons button{font-size:13px;padding:7px 14px}#result{padding:24px}.comparison-layout{grid-template-columns:minmax(0,1fr) 125px;gap:22px}.comparison-row{gap:7px;grid-template-columns:36px minmax(0,1fr) 28px minmax(0,1fr) 35px}.comparison-row img{width:64px;height:64px}.comparison-row figcaption{font-size:12px}.celebrate img{width:125px}.celebrate strong{font-size:22px}#result>footer button{font-size:14px;min-width:140px}}
@media(max-width:620px){.spot-page{padding:10px 7px 26px}.page-heading{margin:7px 0 12px}.page-heading h1{font-size:21px}.page-heading p{font-size:11px;line-height:1.7}.spot-top{justify-content:center;flex-wrap:wrap;gap:9px;padding:10px 5px}.spot-top strong{width:100%;text-align:center}.spot-top nav{justify-content:center;gap:6px}.spot-top button{font-size:11px;min-height:38px;padding:5px 9px}#host{border-radius:12px}#cover{padding:23px 15px 25px}#cover h2{font-size:31px;line-height:1.4;padding:12px 19px;margin-bottom:20px}#cover h2 br{display:block}.park-poster{padding:5px;transform:none}.park-poster img{height:230px;object-position:66% 50%}.cover-footer{gap:12px;margin-top:23px}.five-flowers{font-size:25px;letter-spacing:8px}.cover-footer button{font-size:18px;min-width:0;width:100%;padding:11px 15px;min-height:57px}.cover-footer small{font-size:11px}.play-caption{font-size:12px;padding:17px 13px 13px;line-height:1.7}#scenes{grid-template-columns:1fr;padding:0 13px 17px;gap:15px}.park-scene{border-width:6px}.scene-label{font-size:16px;padding:3px 10px}.park-object{width:14%;min-width:44px}.park-object.found:after{border-width:3px;inset:-7%}.play-controls{padding:14px 12px;gap:13px}.progress{justify-content:space-between;width:100%;gap:9px}.progress>span:first-child{font-size:12px}.progress b{font-size:24px}#flowers{gap:7px}#flowers span{font-size:26px}.buttons{width:100%;justify-content:center;gap:9px}.buttons button{flex:1;font-size:13px;padding:7px 12px}.buttons #review{flex-basis:100%;max-width:350px}#feedback{font-size:12px;line-height:1.8;min-height:23px}#result{padding:22px 14px 25px}#result h2{font-size:29px;letter-spacing:.03em}#result>header small{font-size:11px}#result>header p{font-size:13px;margin-bottom:15px}.comparison-layout{display:block}.comparison-row{grid-template-columns:26px minmax(0,1fr) 19px minmax(0,1fr) 25px;gap:5px;padding:12px 1px}.pair-number{width:25px;height:28px;font-size:15px}.comparison-row img{width:62px;height:62px;max-width:100%}.comparison-row figcaption{font-size:11px;line-height:1.5}.pair-arrow{font-size:22px}.pair-check{width:24px;height:24px;font-size:18px}.celebrate{display:flex;align-items:center;justify-content:center;gap:15px;padding:14px 0 0}.celebrate img{width:100px;height:100px;object-fit:contain}.celebrate strong{font-size:20px}.celebrate strong br{display:none}.celebrate span{display:none}#result>footer{gap:10px;margin-top:20px}#result>footer button{min-width:0;flex:1;font-size:13px;padding:8px}#result>footer #back{flex-basis:100%}#modal{padding:10px;align-items:flex-start;overflow:auto}#modal>section{margin:auto;max-height:calc(100% - 8px);padding:16px 13px;border-width:4px}#modal h2{font-size:17px}#modal p{font-size:14px}#modal header button{font-size:12px;padding:8px}.parent-note{padding:18px 7px 0;font-size:12px}.parent-note h2{font-size:17px}}
@media(max-height:500px) and (min-width:621px){.spot-top{padding:7px 14px}.spot-top button{min-height:34px}.play-caption{padding:12px;font-size:12px}#scenes{max-width:850px;margin:0 auto;padding:0 15px 13px;gap:13px}.scene-label{font-size:12px}.play-controls{padding:10px 15px;gap:9px 20px}.progress b{font-size:23px}#flowers span{font-size:24px}.buttons button{font-size:12px;padding:6px 12px;min-height:40px}#feedback{font-size:12px}.park-poster img{height:245px}#cover{padding:20px 30px}.cover-footer{margin-top:17px}.cover-footer button{font-size:18px;min-height:50px}#modal{position:fixed}#modal>section{max-height:90vh}}
@media(prefers-reduced-motion:reduce){.park-object.hint{animation:none;outline:5px solid #f8d160;outline-offset:2px}}
.park-poster img{object-position:center bottom}
@media(max-width:620px){.park-poster img{object-position:66% bottom}}