/* Yataiguide — one harbour-blue world, frosted porcelain and lantern icing. */
:root{--frost-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.16' filter='url(%23n)'/%3E%3C/svg%3E");--frost-top:#edf7ff;--frost-bottom:#bed5e9;--frost-ink:#263e56;--ice-shadow:inset 0 2px 2px #fff9,inset 0 -3px 4px #7899b74a,0 5px 0 #6d91ae,0 9px 14px #0e223834;--paper-pattern:radial-gradient(circle at 3px 3px,#9db9ce32 1px,transparent 1.8px)}
.header{gap:20px;min-height:86px;padding-block:12px}.header:before{background:#1a2d43da;backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid #d3eaff18}.header-tools{margin-left:auto;display:flex;gap:12px;align-items:center}.town-brand{gap:12px}.town-brand img{width:62px;height:62px;filter:drop-shadow(0 3px 3px #071c2933)}.header .town-brand>.brand-word{background:none;box-shadow:none;color:#fff3df;padding:0;font-family:var(--display);font-size:30px;line-height:1;font-weight:550;letter-spacing:-1px}.brand-word>span{color:#badced}.brand-word small{display:block;color:#bdd1e3;font:400 11px var(--font);letter-spacing:.12em;margin-top:7px;text-transform:uppercase}
.flag-picker{position:relative}.flag-picker>#language{display:none}.flag-circle{display:inline-grid;place-items:center;overflow:hidden;flex:none;width:38px;height:38px;border-radius:50%;font-family:system-ui,sans-serif;font-size:30px;line-height:1;background:#e3edf8;box-shadow:inset 0 2px 3px #fff,0 2px 3px #657b984a}.flag-code{font:500 12px var(--display)}#flag-trigger{display:flex;gap:9px;align-items:center;padding:6px 12px 7px 6px;border-radius:30px;min-height:50px}.flag-options{position:absolute;right:0;top:100%;padding:16px;min-width:270px;display:grid;grid-template-columns:1fr 1fr;gap:10px;border-radius:24px;background:#e2eff7f5;box-shadow:inset 0 2px 0 #fff,0 12px 24px #0c203c50;backdrop-filter:blur(18px);z-index:60}.flag-options[hidden]{display:none}.flag-options button{display:flex;flex-direction:column;gap:7px;align-items:center;padding:10px 5px;border-radius:18px;border:1px solid transparent;color:#28425c;background:transparent;font-size:12px;line-height:1.4;min-height:84px}.flag-options button:hover,.flag-options button[aria-pressed=true]{background:#fff9;border-color:#a0c0d6}.flag-options .flag-circle{width:44px;height:44px;font-size:34px}
/* A free-standing town, with a short introduction below it. */
.cover{display:flex;flex-direction:column;gap:0;padding:0 0 44px;align-items:center}.cover figure,#yatai-world{order:0;width:100%;max-width:1080px;height:570px;aspect-ratio:auto;margin:0;isolation:isolate}.cover-copy{order:1;text-align:center;max-width:720px;padding:0;margin:-14px 0 0;z-index:1}.cover h1{font-size:clamp(36px,4vw,56px);line-height:1.1;margin:0 0 14px;max-width:none;letter-spacing:-.02em}.cover-copy>p{font-size:18px;max-width:44ch;margin:0 auto 22px;line-height:1.5}.cover .button{font-size:15px;min-height:48px;padding:12px 25px}.cover figure:before{content:'';position:absolute;inset:17% 4% 10%;border-radius:50%;background:radial-gradient(ellipse,#a1c7e11f,transparent 70%);z-index:-1}#yatai-world.town-ready .world-poster,#yatai-world.town-ready .hero-atmosphere{visibility:hidden}#yatai-world .hero-town-canvas{z-index:2;outline:none}
/* Porcelain controls have fine sugar grain, a rounded lip and bright pressed feedback. */
:is(#flag-trigger,.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button){border:1px solid #e9f6ff8c;border-radius:18px;background-color:var(--frost-bottom);background-image:var(--frost-noise),linear-gradient(145deg,var(--frost-top),#e0effa78 45%,var(--frost-bottom));color:var(--frost-ink);box-shadow:var(--ice-shadow);backdrop-filter:blur(10px);transition:transform 170ms cubic-bezier(.2,.7,.3,1),box-shadow 170ms ease,filter 170ms ease;position:relative}
:is(.cover .button,.discover-tabs button[aria-pressed=true],.view-switch button[aria-pressed=true]){background-color:#f4c39e;background-image:var(--frost-noise),linear-gradient(145deg,#fff1da,#ffd4ad 60%,#edb18e);box-shadow:inset 0 2px 2px #fffa,inset 0 -3px 4px #a36d4036,0 5px 0 #bd8d6c,0 9px 14px #0e223830;color:#3c4351}
@media(hover:hover) and (pointer:fine){:is(#flag-trigger,.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button):hover{transform:translateY(-2px);box-shadow:inset 0 2px 2px #fff,inset 0 -2px 9px #c3e9ff,0 5px 0 #8baec8,0 0 18px #b6e7ff72;filter:brightness(1.05)}}
:is(#flag-trigger,.motion-button,.cover .button,.actions button,.actions a,.popup-actions button,.collection-actions button,.save-stall,.saved-filter,.view-switch button,.phrase-arrows button,.phrase-dialog-nav button,.phrase-voice,.modal-voice,.close-button,.map-toolbar button,.maplibregl-ctrl-group button,.discover-tabs button):active{transform:translateY(3px) scale(.97);box-shadow:inset 0 0 15px #fff,0 1px 0 #7497b3,0 0 28px #b5e6ff9c}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #f7c59d;outline-offset:5px}button:disabled{filter:saturate(.45);opacity:.55;transform:none!important;box-shadow:inset 0 1px 0 #fff5!important}
.explore{padding-top:14px}.explore-title{margin-bottom:20px}.explore-title h2{font-size:29px}.explorer-shell{background:#30465dd9;box-shadow:inset 0 2px 1px #d7ecff33,0 12px 34px #0a19252e;border:1px solid #b5d5ee36;border-radius:34px}.explorer-sidebar{border-right:0}.search-row{padding:22px 20px 10px}.search-row input{background:#1a3045;border:1px solid #8daac055;box-shadow:inset 0 2px 4px #071c3e45,0 1px 0 #d2e8f244;min-height:49px}.craving-menu{padding:10px 12px 12px}.craving-grid button{transition:transform .2s;background:none}.craving-grid button:hover{background:#ffffff0a}.craving-grid img{filter:drop-shadow(0 5px 3px #081c3428)}.filters{padding-inline:18px}.area-tabs{gap:8px}.area-tabs button{font-size:12px;padding:8px 10px;border:0;border-radius:18px;background:#182f4633;box-shadow:inset 0 1px 1px #d6edff16}.area-tabs button[aria-pressed=true]{color:#253f55;background:#dcecf4;box-shadow:0 3px 0 #88abc4,inset 0 2px 0 #fff9}.results-bar{padding:18px 20px}.list-panel{padding:0 14px 18px}.area-context{padding-inline:6px}
#stall-list{display:grid;gap:20px;padding:8px 3px 16px}.stall-row,.stall-row:hover,.stall-row.selected{--text:#263d53;--muted:#50687d;--surface:#eaf1f5;--soft:#d7e5ed;--line:#bfd2df;--accent:#365f7f;margin:0;padding:20px 17px 16px;border:1px solid #eaf8ff;border-radius:26px;background-color:#e3eef4;background-image:var(--paper-pattern),linear-gradient(150deg,#eff7fbba,#ccdfeb55);background-size:15px 15px,100% 100%;color:var(--text);box-shadow:inset 0 2px 1px #fff,0 5px 0 #9db9cd,0 10px 16px #10233928;transition:box-shadow .2s,transform .2s}.stall-row:nth-child(3n+2){background-color:#f6e3d5}.stall-row:nth-child(3n){background-color:#dcece5}.stall-row.selected{box-shadow:inset 0 2px 1px #fff,0 5px 0 #8ba9c3,0 0 0 3px #f5ba8c}.stall-toggle{grid-template-columns:82px minmax(0,1fr) 12px;gap:12px}.stall-name{font-size:21px;line-height:1.18}.stall-dish{font-size:14px;line-height:1.45}.stall-row .chibi-art{width:82px;height:90px}.stall-row .food-tag{color:var(--muted);font-size:12px}.stall-meta{gap:7px;font-size:12px}.fact-button{font-size:11px;background:#ffffff88;min-height:30px;box-shadow:inset 0 1px 0 #fff}.stall-footer{border:0;margin-top:15px}.stall-row .row-expanded{border:0}.mini-menu,.station-info{background:#ffffff80;border:0}.save-stall{border-radius:50%;width:42px;height:42px}.miniature .jp-sign{background:#fff5df;color:#4a5260;box-shadow:0 2px 0 #c7bba2;padding:5px}.collection-card,.collection-card:hover{margin-bottom:20px;border:1px solid #d1ebff26;border-radius:30px;padding:26px;background-image:var(--frost-noise),linear-gradient(140deg,#bfdff017,#bfdff006);box-shadow:inset 0 2px 1px #fff1,0 6px 16px #0a17201f}.collection-grid{gap:12px}.collection-source{font-size:12px}.collection-art{border-radius:20px}.collection-copy h3{font-size:26px}
/* The map's controls and symbols use the same small icing forms. */
.map-panel{background:#263e56;border-radius:28px;overflow:hidden;min-width:0}.map-toolbar{justify-content:flex-end;padding:16px 18px 8px}.map-toolbar button{min-height:37px;padding:7px 14px;font-size:12px}.map-context{padding:10px 18px 12px;min-height:36px}.north-arrow{font-size:11px;color:#d7e7f4}#map{border-radius:24px 24px 0 0}.maplibregl-ctrl-group{background:transparent!important;box-shadow:none!important;display:grid;gap:9px;overflow:visible}.maplibregl-ctrl-group button{width:38px;height:38px;border-radius:15px!important}.maplibregl-ctrl-group button+button{border-top:1px solid #e9f6ff8c}.maplibregl-ctrl-top-right .maplibregl-ctrl{margin:14px 14px 0 0}.maplibregl-ctrl-scale{border:1px solid #e2f0fa!important;border-bottom:3px solid #8caabd!important;border-radius:9px 9px 12px 12px;background:#e2eef5ed!important;box-shadow:inset 0 2px 0 #fff,0 3px 0 #617f9a55;color:#355169!important;font:500 11px var(--display)!important;padding:4px 7px!important;line-height:1.3!important}.maplibregl-popup-content{border:1px solid #ffffffb3;border-radius:24px!important;background:#e8f2f7f2!important;color:#294157;box-shadow:inset 0 2px 0 #fff,0 7px 0 #9db8ca,0 12px 28px #0e213d4d!important;backdrop-filter:blur(14px);background-image:var(--frost-noise)!important}.maplibregl-popup-tip{border-top-color:#b4cbdc!important}.maplibregl-popup-close-button{right:5px!important;top:4px!important;font-size:22px;padding:5px 10px;border-radius:50%}.map-key{gap:10px;padding:15px 18px;flex-wrap:wrap}.map-key>span{display:inline-flex;gap:7px;align-items:center;padding:6px 10px 7px 6px;border-radius:18px;background:#e1eef3;color:#314b62;font-size:11px;box-shadow:inset 0 2px 0 #fff,0 3px 0 #829fb5}.map-key b{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;box-shadow:inset 0 2px 2px #fff8,0 3px 0 #526c7a3b;color:#263e53;font-size:12px}.map-key .line-k{background:#ffc7a1}.map-key .line-h{background:#b9ddf5}.map-key .line-n{background:#bce5d4}.street-shelf{border:0;background:#20384e55}.street-stall{border-radius:19px}.street-stall[aria-pressed=true]{border-color:#badced;background:#badced1c}.iso-plinth{border-radius:20%;background:#9ec9c0}.street-heading{padding-top:10px}.map-footer{padding:5px 18px 16px}.region-shape{filter:drop-shadow(0 2px 1px #0d23303b);border:0!important;box-shadow:inset 0 2px 2px #fff9!important}
/* Clear practical scenes, one instruction per tile. */
.first-time{padding-top:60px}.first-time>h2{margin-bottom:24px}.tips{gap:20px;counter-reset:manners}.tips p{counter-increment:manners;display:grid;grid-template-columns:140px 1fr;gap:0 18px;padding:24px;min-height:220px;border:1px solid #d1ebff25;border-radius:28px;background:#d0e8f80b;font-size:16px;line-height:1.6;align-content:center}.tips strong{display:contents;font-size:22px}.rule-ink{grid-column:1;grid-row:1 / 4;position:static;width:140px;height:155px;align-self:center}.tips p:before{content:counter(manners,decimal-leading-zero);grid-column:2;font:500 12px var(--display);color:#f1c79d;margin-bottom:6px}.tips strong{font-weight:550}.rules-source{font-size:12px;margin-top:18px;color:var(--muted)}
.phrase-grid{display:flex;gap:24px;padding:14px 2px 25px;align-items:stretch}.phrase-tile{position:relative;flex:0 0 calc((100% - 24px)/2);min-width:0;scroll-snap-align:start;display:flex}.phrase-line{flex:1;width:100%;min-height:480px;padding:30px 30px 86px;border-radius:30px;grid-template-columns:1fr 170px;align-content:start;gap:14px;border:1px solid #effaff;background-image:var(--frost-noise),var(--paper-pattern),linear-gradient(140deg,#edf8ff88,#bfd8ef44);background-size:140px 140px,18px 18px,100% 100%;background-color:#c9ddf0;box-shadow:inset 0 2px 0 #fff,0 6px 0 #829fb7}.phrase-tile:nth-child(3n+2) .phrase-line{background-color:#f5d1b9;box-shadow:inset 0 2px 0 #fff,0 6px 0 #b48e77}.phrase-tile:nth-child(3n) .phrase-line{background-color:#cee8da;box-shadow:inset 0 2px 0 #fff,0 6px 0 #8bae9f}.phrase-line .phrase-art{width:170px;height:170px;grid-column:2;grid-row:1 / 3}.phrase-line [lang=ja]{padding-top:20px}.phrase-line [lang=ja],.phrase-line em{font-size:21px;line-height:1.5}.phrase-line strong{font-size:29px}.phrase-line small{font-size:13px;line-height:1.5}#phrases .phrase-voice{position:absolute;right:25px;bottom:23px;z-index:2;display:flex;gap:9px;align-items:center;min-height:42px;padding:8px 16px;font-size:13px}.phrase-voice>span:first-child,.modal-voice>span:first-child{font-size:21px}.phrase-voice[aria-pressed=true],.modal-voice[aria-pressed=true]{box-shadow:inset 0 0 16px #fff,0 3px 0 #7497b3,0 0 22px #c7ebff8c}.speech-status:empty{display:none}.speech-status{font-size:13px;color:var(--muted);margin:12px 0}.modal-voice{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;min-height:45px;margin-top:22px}#modal-speech-status{font-size:13px}.phrase-modal-art{width:180px;height:180px}#phrase-content strong{font-size:32px}.sources{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:30px}.sources details{flex:0 1 auto;padding:0;border:0;background:none;box-shadow:none}.sources details[open]{flex-basis:100%}.sources summary{font-size:12px;min-height:42px;display:flex;align-items:center;gap:7px;color:var(--muted);padding:8px 0}.sources summary:before{content:'+';font-size:18px}.sources details[open] summary:before{content:'−'}.sources details p{font-size:13px;line-height:1.65;max-width:85ch}.footer{border:0;display:flex;gap:20px;align-items:center;padding-bottom:34px;font-size:12px}.footer #share{font-size:12px;color:var(--muted);margin-left:auto}.back-to-top{display:flex;gap:7px;align-items:center;text-decoration:none;color:var(--muted);font-size:12px}.back-to-top img{width:64px;height:64px}.back-to-top:hover img{animation:runner-step .35s ease-in-out infinite alternate}@keyframes runner-step{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}
@media(hover:hover) and (pointer:fine){body,a,button,summary{cursor:url('assets/brand/gumdrop-cursor.svg') 4 4,pointer}input,textarea{cursor:text}.maplibregl-canvas{cursor:grab}.maplibregl-canvas:active{cursor:grabbing}}
@media(max-width:1000px){.cover figure,#yatai-world{height:480px}.explorer-sidebar{border:0}.list-panel{height:700px}.tips p{grid-template-columns:115px 1fr;padding:20px;gap:0 14px}.rule-ink{width:115px;height:140px}.phrase-line{padding:26px 26px 85px;grid-template-columns:1fr 140px}.phrase-art{width:140px;height:150px}.collection-card{padding:22px}}
@media(max-width:767px){.header{min-height:76px;gap:12px}.town-brand img{width:45px;height:45px}.town-brand{gap:8px}.header .town-brand>.brand-word{font-size:23px}.brand-word small{font-size:9px;letter-spacing:.08em}.header-tools{gap:10px}#flag-trigger{padding:4px 7px 5px 4px;gap:5px;min-height:43px}.flag-circle{width:31px;height:31px;font-size:24px}.flag-code{display:none}.flag-options{min-width:255px;right:-44px;padding:12px;gap:7px}.motion-button{width:36px;min-width:36px;height:39px}.cover{padding:0 0 34px}.cover figure,#yatai-world{height:350px;max-width:100%;margin:0;width:100%}.cover-copy{margin:0;padding:0 6px}.cover h1{font-size:38px}.cover-copy>p{font-size:16px;max-width:29ch}.explore-title h2{font-size:26px}.explore.wrap{width:calc(100% - 24px)}.explorer-shell{border-radius:28px}.list-panel{padding-inline:12px;height:680px}.stall-row{padding:19px 16px}.stall-toggle{grid-template-columns:82px minmax(0,1fr) 12px}.stall-name{font-size:21px}.craving-grid img{height:68px;width:80px}.map-panel{border-radius:24px;min-height:900px}.map-key{gap:7px}.map-key>span{font-size:10px;padding-right:8px}.map-key b{width:23px;height:23px}.tips{grid-template-columns:1fr;gap:16px}.tips p{grid-template-columns:110px 1fr;padding:19px;min-height:185px;font-size:15px}.rule-ink{width:110px;height:140px}.tips strong{font-size:19px}.collection-card,.collection-card:hover{padding:20px;gap:16px;grid-template-columns:95px minmax(0,1fr)}.collection-art>.chibi-art{width:95px;height:120px}.collection-copy h3{font-size:22px}.phrase-tile{flex-basis:100%}.phrase-line{min-height:475px;padding:24px 24px 86px;grid-template-columns:1fr 130px}.phrase-line .phrase-art{width:140px;height:155px}.phrase-line [lang=ja],.phrase-line em{font-size:19px}.phrase-line strong{font-size:27px}.phrase-line [lang=ja]{padding-top:24px}.phrase-voice{right:22px;bottom:24px}.sources{gap:0 18px}.footer{gap:12px;flex-wrap:wrap}.back-to-top{margin-left:auto}.back-to-top img{width:50px;height:50px}.footer #share{margin-left:0}.phrase-modal-art{width:140px;height:145px}#phrase-content h2,#phrase-content .phrase-romaji{font-size:23px}#phrase-content strong{font-size:28px}}
@media(max-width:360px){.header .town-brand>.brand-word{font-size:20px}.town-brand img{width:40px;height:40px}.header-tools{gap:7px}.header{gap:8px}.cover figure,#yatai-world{height:305px}.cover h1{font-size:34px}.phrase-line{padding-inline:20px}.phrase-line .phrase-art{width:125px}.tips p{grid-template-columns:90px 1fr;padding:16px;gap:0 12px}.rule-ink{width:90px}.flag-options{min-width:240px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.back-to-top img{animation:none!important}button,a{transition:none!important}}
:root[data-motion=paused] .back-to-top img{animation:none!important}
/* Keep phrases spacious on tablets and small utility labels legible. */
@media(max-width:900px){.phrase-tile{flex-basis:100%}}
@media(max-width:767px){.brand-word small{font-size:11px}.map-key>span{font-size:11px}.explore.wrap{width:calc(100% - 32px)}}
#phrase-content h2{clear:both}

:is(#stall-list,#collection-cards,.maplibregl-popup-content) .save-stall{border-radius:50%}

@media(hover:hover) and (pointer:fine){#stall-list .stall-row:hover{transform:translateY(-2px);box-shadow:inset 0 2px 1px #fff,0 6px 0 #9db9cd,0 12px 20px #10233940}}
@media(prefers-reduced-motion:reduce){#stall-list .stall-row:hover{transform:none}}
