/* 主役、空、砂の余白。画面上には旅に必要な操作だけを置く。 */
:root{--ink:#302c27;--paper:#efe9dc;--red:#755446;--sans:Arial,"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif}
.world{min-height:500px;color:#f6f0e7;cursor:grab}.world.is-dragging{cursor:grabbing}
#scene{background:linear-gradient(#4c7d86,#e4b690 60%,#bea084)}
.paper-grain,.world-vignette,.scene-copy,.route-bar,.place-label,.film-note,.journey-controls,.gesture-hint,.step-next{display:none!important}
.site-header{padding:39px 4.8%;grid-template-columns:1fr 100px 1fr;align-items:start;gap:28px;color:#f6f1e9}
.nav-left,.nav-right{gap:24px;min-height:46px;align-items:center}
.nav-right{gap:26px}.ride-button{background:#f4efea;color:#342f2b;border:1px solid #655b5266;border-radius:30px;padding:8px 18px;min-height:36px;gap:7px;font-size:10px;font-weight:700;letter-spacing:.07em;box-shadow:0 1px 1px #00000014}
.ride-button svg{width:23px;height:18px}.text-nav{font-size:10px;font-weight:700;letter-spacing:.04em;text-shadow:0 1px 1px #473e3833}.text-nav:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.wordmark{width:100px;padding:3px 0 0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.08em;line-height:.8;font-size:35px;transform:rotate(-5deg);color:#fff5eb}
.wordmark>span{display:block;font-family:inherit;font-size:30px;font-weight:400;letter-spacing:-.08em;margin-top:5px}
.wordmark>small{display:block;font:6px var(--sans);letter-spacing:.23em;margin-top:10px;transform:rotate(5deg)}
.sound-button{font-size:9px;font-weight:700;letter-spacing:.02em;gap:10px;min-height:40px}.sound-bars{height:15px}.sound-label-prefix{font-size:8px;opacity:.65;letter-spacing:.1em;margin-right:4px}
.bag-button{font-size:10px;font-weight:700;min-height:40px;gap:7px}.bag-label{display:none}.bag-button svg{width:19px;height:19px}#bag-count{background:transparent;border:1px solid #f6f0e775;color:#f6f0e7;width:20px;height:20px;font-size:9px}
.scroll-invitation{position:absolute;left:50%;bottom:99px;transform:translateX(-50%);display:flex;align-items:center;gap:24px;white-space:nowrap;pointer-events:none;transition:opacity .7s}
.scroll-invitation p{font-size:12px;letter-spacing:.07em;font-weight:700;margin:0;text-shadow:0 1px 2px #77665355}.scroll-invitation small{display:block;text-align:center;font-size:8px;font-weight:500;letter-spacing:.1em;opacity:.75;margin-top:8px}
.scroll-ornament{width:69px;height:14px;position:relative;border-top:1px solid #f2ece2aa;margin-top:13px}.scroll-ornament:before,.scroll-ornament:after{content:"";position:absolute;right:8px;top:-4px;width:6px;height:6px;border:1px solid #f2ece2ba;transform:rotate(45deg)}.scroll-ornament:after{right:0;border-right:0;border-top:0}.scroll-ornament:last-child{transform:scaleX(-1)}
.has-explored .scroll-invitation{opacity:.52}
.world-footer{left:4.8%;right:4.8%;bottom:23px;font-size:8px;font-weight:500;letter-spacing:.025em;align-items:center;gap:18px;color:#f6f0e7;text-shadow:0 1px 2px #6d594944}
.footer-left,.footer-right{display:flex;align-items:center;gap:22px}.world-footer button{font-size:9px;min-height:40px;white-space:nowrap;padding:3px 0;letter-spacing:.02em}.world-footer button:hover{text-decoration:underline;text-underline-offset:4px}.footer-cta{font-weight:700;letter-spacing:.06em!important}.footer-right button{font-size:8px}.footer-cta span{margin-left:10px}
.world-footer .location-opener{font-size:8px;letter-spacing:.08em}.location-opener i{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 7px 2px 0}.world-footer .concept-note{display:none}
.hotspot{color:#35302b;background:#f0eae2;border:1px solid #74675e66;box-shadow:0 2px 1px #332a2222;border-radius:30px;min-height:42px;gap:17px;padding:7px 11px 7px 20px;font-size:11px;font-weight:600}
.hotspot:after{content:"↗";border:0;width:22px;height:22px;font-size:20px}.hotspot:hover{background:#fff9ef;transform:translate(-50%,-50%) scale(1.04)}
.entry{--entry-ink:#11120f;--entry-ivory:#f1eddb;background:var(--entry-ink);color:var(--entry-ivory);transition:opacity 1s,visibility 1s}
.entry-art{background:var(--entry-ink) url('../art/entry-accents.png') center/cover no-repeat;filter:none}
.entry-art:after{background:linear-gradient(#11120f44,transparent 8%,transparent 92%,#11120f66)}
.entry-top{top:37px}.entry-top,.entry-bottom{font-size:9px;font-weight:500}
.entry-seal{transform:translateY(-2.2vh);width:clamp(330px,36vw,520px);box-shadow:0 0 0 14px var(--entry-ink);outline-offset:8px;background:var(--entry-ink);border-color:#f1eddbb3;outline-color:#f1eddb8a}
.entry .enter-button{background:var(--entry-ivory);color:var(--entry-ink)}.entry .enter-button:hover{background:#fff8e8}.entry button:focus-visible{outline-color:var(--entry-ivory)}
.entry-brand{font-size:clamp(38px,4.2vw,61px)}.entry-brand span{font-size:9px}.entry-seal p{font-size:12px;line-height:2.1;letter-spacing:.13em;margin:22px 0}.entry-scooter{width:61px;height:39px}.entry-kicker{font-size:8px}.enter-button{font-size:11px;min-height:46px;padding:13px 26px;border-radius:30px;gap:30px;letter-spacing:.05em}.enter-button:disabled{opacity:.5}.entry-skip{font-size:9px;min-height:38px}
.entry-loading{font-size:8px;letter-spacing:.13em;margin-top:12px;opacity:.5}
.list-mode .site-header,.fallback .site-header{color:var(--ink)}.list-mode .wordmark,.fallback .wordmark{color:var(--ink)}.list-mode #bag-count,.fallback #bag-count{color:var(--ink);border-color:var(--ink)}
.list-mode .ride-button{background:var(--ink);color:var(--paper)}.game-mode .scroll-invitation{display:none}.game-mode .world-footer{visibility:hidden}
.destination-list{display:grid;gap:0}.destination-list button{display:flex;align-items:center;gap:22px;width:100%;border-bottom:1px solid #302c2733;padding:25px 0;text-align:left;min-height:80px}
.destination-list button>b{font:italic 28px Georgia,serif;color:#927460;font-weight:400}.destination-list button>span{display:grid;gap:7px;font-size:16px}.destination-list small{font-size:8px;letter-spacing:.12em}.destination-list em{margin-left:auto;font-style:normal;font-size:25px}.destination-list button:hover{padding-left:8px;background:#e6ded111}.panel{border-left:0}.panel::backdrop{background:#171b1955;backdrop-filter:blur(2px)}
@media(max-width:1100px){.site-header{padding:30px 4.5%;gap:20px;grid-template-columns:1fr 88px 1fr}.nav-left,.nav-right{gap:17px}.wordmark{width:88px;font-size:31px}.wordmark>span{font-size:26px}.text-nav{font-size:9px}.sound-label-prefix{display:none}.world-footer{gap:10px}.footer-left,.footer-right{gap:14px}.scroll-invitation{bottom:95px}}
@media(max-width:700px){
 .site-header{padding:22px 6%;grid-template-columns:1fr 75px 1fr;gap:14px;align-items:start}.nav-left,.nav-right{gap:10px;min-height:40px}.ride-button{padding:8px 13px;min-height:40px}.ride-button svg{width:24px}.ride-button span,.nav-left .text-nav{display:none}.wordmark{width:75px;font-size:29px;padding-top:1px}.wordmark>span{font-size:24px;margin-top:5px}.wordmark>small{font-size:5px;margin-top:8px}.sound-button{padding:0;min-width:25px;min-height:44px}.sound-button #sound-label{display:none}.nav-right{gap:13px}.bag-button{gap:3px;min-width:40px;min-height:44px}.bag-button svg{width:17px}.bag-button #bag-count{font-size:8px;width:17px;height:17px}
 .world{min-height:540px}.scroll-invitation{bottom:128px;gap:13px}.scroll-invitation p{font-size:10px;letter-spacing:.035em}.scroll-invitation small{font-size:7px;letter-spacing:.06em}.scroll-ornament{width:35px}
 .world-footer{left:6%;right:6%;bottom:19px;display:grid;grid-template-columns:1fr auto;gap:7px;font-size:6px}.footer-left{grid-row:2;grid-column:1;display:block}.footer-left>span{display:none}.footer-left .location-opener{display:inline-flex;align-items:center;font-size:8px}.footer-cta{grid-column:1/-1;grid-row:1;justify-self:center;font-size:10px!important;margin-bottom:9px}.footer-right{grid-row:2;grid-column:2;gap:10px}.world-footer button{min-height:35px}.footer-right button{font-size:7px}
 .hotspot{font-size:10px;min-height:42px;padding-left:16px;gap:12px}.entry-seal{width:min(80vw,380px);min-width:272px;outline-offset:6px;box-shadow:0 0 0 11px var(--entry-ink)}.entry-brand{font-size:40px}.entry-brand span{font-size:8px}.entry-kicker{font-size:7px}.entry-scooter{height:30px;width:48px}.entry-seal p{font-size:11px;line-height:1.9;margin:15px 0}.entry-top{top:26px;font-size:7px}.entry-bottom{font-size:7px;bottom:22px}.entry-art{background-image:url('../art/entry-accents.png');background-size:cover;background-position:center}.enter-button{min-height:42px;padding:12px 21px;font-size:10px}.entry-skip{min-height:34px;font-size:8px}
}
@media(max-width:360px){.site-header{padding-left:5%;padding-right:5%;gap:8px}.wordmark{font-size:27px}.wordmark>span{font-size:23px}.nav-right{gap:8px}.entry-seal{min-width:262px}.entry-brand{font-size:36px}}
@media(max-height:650px) and (max-width:700px){.world{min-height:500px}.scroll-invitation{bottom:112px}.entry-seal{width:285px}.entry-kicker{margin-bottom:5px}.entry-seal p{margin:10px 0}.entry-top{top:16px}.entry-bottom{bottom:14px}.site-header{padding-top:17px}}
@media(prefers-reduced-motion:reduce){.entry{transition:none}.hotspot{transition:none}}

/* 横向きの低い画面でも、旅の操作を実際の表示領域に収める。 */
@media(max-height:500px) and (orientation:landscape){
 .world{height:100svh;min-height:100svh;height:100dvh;min-height:100dvh}
 .site-header{padding-top:12px;padding-bottom:8px}
 .world-footer{display:flex;left:4.5%;right:4.5%;bottom:7px;gap:12px;align-items:center}
 .world-footer button{min-height:32px}
 .footer-left,.footer-right{display:flex;align-items:center;gap:12px}
 .footer-left>span{display:none}.footer-left .location-opener{display:inline-flex;align-items:center}
 .footer-cta{margin-bottom:0}
 .scroll-invitation{bottom:56px;gap:16px}
 .scroll-invitation p{font-size:10px}.scroll-invitation small{display:none}
 .scroll-ornament{width:45px}
}

/* 縦画面では配達員を円の下まで見せる専用の構図を使う。 */
@media(max-width:700px) and (orientation:portrait){
 .entry-art{background-image:url('../art/entry-accents-phone.png');background-size:cover;background-position:center}
 .entry-seal{position:absolute;top:calc(50% - max(8.1svh,17.5vw));transform:translateY(-50%);width:59vw;min-width:0;max-width:380px;background:var(--entry-ink);border:1px solid #f1eddbb3;outline:0;box-shadow:none}
 .entry-kicker{font-size:6px;letter-spacing:.04em;margin-bottom:5px}
 .entry-scooter{height:22px;width:37px}
 .entry-brand{font-size:clamp(27px,8vw,45px);margin-top:5px}
 .entry-brand span{font-size:7px;letter-spacing:.5em;margin-top:7px}
 .entry-seal p{font-size:10px;line-height:1.7;margin:8px 0}
 .entry .enter-button{min-height:36px;padding:8px 17px;font-size:10px;gap:20px}
 .entry-skip{min-height:26px;font-size:8px;margin-top:2px}
}
@media(max-width:360px) and (orientation:portrait){
 .entry-seal{width:61vw}
 .entry-kicker{font-size:5px;margin-bottom:3px}
 .entry-scooter{height:17px;width:31px}
 .entry-brand{font-size:27px;margin-top:4px}
 .entry-brand span{font-size:6px;margin-top:5px}
 .entry-seal p{font-size:9px;line-height:1.8;margin:6px 0}
 .entry .enter-button{min-height:34px;padding:8px 16px;font-size:9px;gap:18px}
 .entry-skip{min-height:24px;font-size:7px;margin-top:0}
}