:root{font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",system-ui,sans-serif;color:#17324b;background:#f7e8b3;touch-action:manipulation}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 12% 18%,#fff8 0 2%,transparent 2.2%),linear-gradient(150deg,#fff0b8,#7fdbd5 62%,#1683ad);user-select:none}.topbar{height:56px;padding:0 max(16px,calc((100vw - 1050px)/2));display:flex;align-items:center;justify-content:space-between;background:#fffbe9e8;border-bottom:3px solid #fff}.brand{text-decoration:none;color:#073c5f;font-weight:1000;letter-spacing:.07em}.brand b{color:#e95248}.sound,.sub button{border:0;border-radius:999px;padding:9px 14px;background:#fff;color:#174866;font-weight:900;box-shadow:0 3px 0 #78a8b6}main{width:min(1050px,100%);margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;padding:24px}.intro{align-self:center}.eyebrow{font-weight:1000;font-size:.75rem;letter-spacing:.16em;color:#b74539}.intro h1{font-size:clamp(2.3rem,5vw,4.5rem);line-height:1;margin:5px 0;color:#073c5f;text-shadow:3px 3px #fff}.intro h1 span{color:#e34e42}.lead{font-size:1.2rem;line-height:1.75}.lead b{color:#a7352e}.legend{display:flex;gap:7px;flex-wrap:wrap}.legend span{padding:8px 10px;border:3px solid #0f7894;border-radius:13px;background:#fff;font-weight:900}.record{width:210px;margin-top:18px;padding:12px 18px;display:grid;background:#073c5f;color:#fff;border-radius:20px}.record strong{font-size:1.6rem;color:#ffd957}.game-card{justify-self:center;width:100%;max-width:520px;padding:10px;background:#fff;border:5px solid #fff;border-radius:28px;box-shadow:0 18px 50px #073c5f55}.hud{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:8px}.hud div{text-align:center;background:#e7f8f5;border-radius:13px;padding:5px}.hud small{display:block;color:#467183;font-weight:800}.hud b{font-size:1.2rem}.stage{height:330px;position:relative;overflow:hidden;border-radius:21px;background:repeating-linear-gradient(0deg,transparent 0 63px,#fff2 64px 65px),repeating-linear-gradient(90deg,transparent 0 63px,#fff2 64px 65px),linear-gradient(#56c8dd,#2199c2);border:4px solid #0b759a}.stage:before,.stage:after{content:"";position:absolute;background:#e6c76f;border:8px solid #8f6b2d;border-radius:45% 55% 50% 40%;box-shadow:inset 0 0 0 7px #77b65d}.stage:before{width:130px;height:65px;left:-30px;bottom:5px;transform:rotate(12deg)}.stage:after{width:105px;height:55px;right:-30px;top:15px;transform:rotate(-18deg)}.cloud{position:absolute;color:#fff9;font-size:45px}.c1{left:18px;top:55px}.c2{right:60px;bottom:20px}.island{position:absolute;font-size:40px;filter:drop-shadow(0 5px 2px #07577d88)}.i1{left:30px;bottom:15px}.i2{right:30px;top:20px}.compass{position:absolute;width:92px;height:92px;right:16px;bottom:15px;border:5px solid #744c21;border-radius:50%;background:#fff3cfdd;box-shadow:0 5px 0 #104f64}.compass i{position:absolute;font-style:normal;font-size:.72rem;font-weight:1000}.compass i:nth-child(1){top:2px;left:38px;color:#d34237}.compass i:nth-child(2){right:4px;top:35px}.compass i:nth-child(3){bottom:2px;left:38px}.compass i:nth-child(4){left:4px;top:35px}.compass b{position:absolute;inset:22px;display:grid;place-items:center;font-size:34px;color:#df473d}.ship{position:absolute;left:calc(50% - 29px);top:calc(50% - 31px);font-size:58px;z-index:2;filter:drop-shadow(0 6px 2px #07577d88);transition:transform .22s}.ship.move-n{transform:translateY(-28px)}.ship.move-s{transform:translateY(28px)}.ship.move-w{transform:translateX(-28px)}.ship.move-e{transform:translateX(28px)}.wake{position:absolute;left:calc(50% - 35px);top:calc(50% + 25px);width:70px;height:14px;border-bottom:5px dotted #d9fbff;opacity:.8}.treasure{position:absolute;inset:34% 0 auto;text-align:center;font-size:48px;z-index:4;animation:treasure .7s ease-out}.judge{position:absolute;left:0;right:0;top:18%;z-index:5;text-align:center;font-size:2rem;font-weight:1000;color:#fff;text-shadow:0 3px #9d3029;opacity:0}.judge.show{animation:judge .65s}.overlay{position:absolute;inset:0;z-index:9;display:grid;place-content:center;text-align:center;padding:26px;background:#063b61e8;color:#fff}.overlay[hidden]{display:none}.overlay h2{font-size:1.9rem;margin:0}.overlay p{line-height:1.75}.overlay button{border:0;border-radius:999px;padding:14px 28px;background:#ffd957;color:#533d0c;font-size:1.15rem;font-weight:1000;box-shadow:0 5px 0 #b98924}.mission{padding:8px 9px 5px}.mission-top{display:flex;justify-content:space-between;font-size:.8rem;font-weight:900;color:#41657a}.mission #clue{text-align:center;margin:2px;font-size:1.35rem;font-weight:1000;color:#0a4f73}.timer{height:8px;overflow:hidden;border-radius:9px;background:#dbe8e9}.timer i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ffd24c,#ef5045);transform-origin:left}.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.controls button{min-height:61px;border:0;border-radius:16px;background:#eaf9f7;color:#123e58;font-size:1rem;font-weight:1000;box-shadow:0 4px 0 #78b9be}.controls button span{display:block;font-size:1.5rem;color:#e24a3e}.controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #78b9be}.controls button:disabled{opacity:.45}.sub{display:flex;gap:8px;justify-content:center;margin-top:11px}.key-help{text-align:center;font-size:.75rem;font-weight:800;color:#587481;margin:8px 0 1px}footer{text-align:center;padding:16px;color:#fff;font-weight:900;letter-spacing:.15em}@keyframes judge{15%{opacity:1;transform:scale(1.25)}75%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}@keyframes treasure{0%{opacity:0;transform:scale(.2) rotate(-20deg)}65%{opacity:1;transform:scale(1.3)}100%{transform:scale(1)}}
@media(max-width:760px){.topbar{height:52px}main{display:block;padding:9px}.intro{text-align:center}.intro h1{font-size:1.85rem;margin:0}.eyebrow,.lead,.legend{display:none}.record{width:auto;margin:6px auto;padding:5px 12px;display:flex;gap:10px;align-items:center;justify-content:center;font-size:.75rem}.record strong{font-size:1rem}.game-card{padding:7px}.stage{height:min(48vh,370px);min-height:290px}.hud b{font-size:1.05rem}.controls button{min-height:57px}footer{display:none}}@media(max-height:670px) and (max-width:760px){.intro h1{font-size:1.25rem}.record,.key-help{display:none}.stage{height:275px;min-height:250px}.controls button{min-height:49px}.mission #clue{font-size:1.1rem}.sub{margin-top:7px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Side-view voyage: progress is separate from geographical directions. */
.stage{height:365px;background:linear-gradient(#a2e6ee 0 53%,#36b9d2 53%,#1685ad);isolation:isolate}
.stage[data-scene=sunrise]{background:linear-gradient(#ffc587,#fff0b8 53%,#54bfd1 53%,#178daf)}
.stage[data-scene=sunset]{background:linear-gradient(#886eab,#ffbd88 53%,#698db7 53%,#305d91)}
.stage:before{width:80px;height:34px;left:-32px;bottom:12px}.stage:after{width:90px;height:44px;right:-20px;top:auto;bottom:12px}
.i1{left:-8px;bottom:24px;font-size:30px}.i2{right:2px;top:auto;bottom:27px;font-size:38px}
.ship{left:8%;top:auto;bottom:40px;font-size:49px;transition:left .55s ease;z-index:3}
.wake{left:5%;top:auto;bottom:40px;width:48px}.cloud{font-size:30px}.c1{top:57px;left:15px}.c2{top:82px;right:20px;bottom:auto}
.scene-hint{position:absolute;top:12px;left:8px;right:8px;text-align:center;font-size:.9rem;font-weight:900;color:#124464}
.scene-symbol{position:absolute;top:75px;left:0;right:0;text-align:center;font-size:54px}
.stage[data-scene=map]:has(.compass:not([hidden])) .scene-symbol{display:none}
.compass{width:138px;height:138px;top:52px;bottom:auto;left:calc(50% - 69px);right:auto;background:#fff6db;border-width:5px;z-index:2}
.compass i:nth-child(n){inset:auto;font-size:1.1rem;transform:translate(-50%,-50%);color:#17324b}
.compass i.top{top:15px;left:50%}.compass i.right{top:50%;left:calc(100% - 15px)}.compass i.bottom{top:calc(100% - 15px);left:50%}.compass i.left{top:50%;left:15px}.compass i.north{color:#c8322c}
.compass b{inset:30px;font-size:49px;line-height:1;color:#d34237}
.voyage-line{position:absolute;left:10%;right:12%;height:5px;bottom:25px;background:#fff6;border-radius:5px}.voyage-line i{display:block;height:100%;background:#ffde66;transition:width .55s}
.port-label,.goal-label{position:absolute;bottom:4px;font-size:.7rem;color:white;font-weight:900}.port-label{left:8%}.goal-label{right:6%}
.overlay{padding:18px;overflow-y:auto}.overlay h2{font-size:1.45rem}.overlay p{font-size:.95rem;margin:10px 0;line-height:1.65}.overlay button{font-size:1rem;padding:11px 20px}
.stage[data-state=feedback] .overlay{inset:8px 8px auto;border-radius:16px;background:#fff9eaf5;color:#17324b;box-shadow:0 4px 16px #13496030;padding:14px;max-height:255px}
.stage[data-state=collection] .overlay p{font-size:.85rem;line-height:1.4;margin:7px 0}
.treasure{inset:auto 8% 68px auto;font-size:28px}.answer-help{text-align:center;font-size:.78rem;font-weight:bold;margin:4px 0 7px;color:#305b73}
.mission #clue{font-size:1.12rem;line-height:1.5;min-height:3em;display:grid;place-content:center}
.controls button:focus-visible,.overlay button:focus-visible,.sub button:focus-visible{outline:3px solid #d74234;outline-offset:3px}
@media(max-width:760px){.stage{height:340px;min-height:340px}.intro h1{font-size:1.5rem}.mission #clue{font-size:1.05rem}.controls button{min-height:57px}}
@media(max-width:360px){.scene-hint{font-size:.8rem}.overlay p{font-size:.85rem}.overlay h2{font-size:1.25rem}.sub button{padding:9px;font-size:.72rem}}
.island{z-index:1}.port-label,.goal-label{z-index:4;text-shadow:0 1px 2px #073c5f}.voyage-line{z-index:1}