@font-face{font-family:huninn;src:url('https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@master/font/jf-openhuninn-2.1.ttf') format('truetype');font-display:swap}
:root{--ink:#69594c;--ink2:#a28b77;--cream:#fffaf0;--coral:#d68d75;--mint:#b7cec1;--hand:huninn,'Zen Maru Gothic','M PLUS Rounded 1c',sans-serif;--bounce:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:var(--hand);color:var(--ink);background:#faf2e6}
body{background:radial-gradient(ellipse at 51% 42%,#fffaf0 20%,#f8eade 78%,#f3e1d5)}
body:before{content:'';position:fixed;inset:0;background:url('assets/clay-surface-v2.webp') center/650px;mix-blend-mode:multiply;opacity:.2;pointer-events:none}
button,input,select{font-family:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #86ada1;outline-offset:5px}
.hidden{display:none!important}
#grain{display:none}
#globe{position:fixed;left:260px;right:280px;top:108px;bottom:100px;isolation:isolate}
#globe canvas{display:block}#shadow{position:fixed;left:49%;top:76%;width:420px;height:40px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#ab8d6436,transparent 69%);pointer-events:none}
body.tw #shadow{opacity:0}#stage-water{position:fixed;left:calc(50% - 160px);top:24%;width:430px;height:530px;border-radius:47% 53% 55% 45%;background:radial-gradient(ellipse,#d2e2d53b,#d2e2d500 69%);opacity:0;pointer-events:none}body.tw #stage-water{opacity:1}
header{position:fixed;left:36px;right:36px;top:27px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.brand{display:flex;align-items:center;text-decoration:none;font-size:20px;letter-spacing:-.7px;color:var(--ink);font-weight:700}.brand span:last-child{font-size:12px;font-weight:400;letter-spacing:2px;margin-left:14px}.edition{font-size:10px;letter-spacing:2px;color:#a18d78}
.clay-mascot{background:url('assets/clay-characters-v2.webp') 100% 95.62%/440.2% 230.4% no-repeat;aspect-ratio:403/385}
.brand-drop{display:inline-block;width:40px;height:38px;margin-right:8px;filter:drop-shadow(0 3px 2px #8a78691a)}
#intro{position:fixed;top:205px;left:40px;z-index:2;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:2px;color:#b29279}
#intro h1{font-size:42px;line-height:1.4;font-weight:500;letter-spacing:2px;margin:17px 0;color:#776252}#intro h1 span{color:#d28c78}#intro p{font-size:13px;color:var(--ink2);line-height:2.05}
.sticker{margin-top:21px;display:inline-block;padding:10px 15px;background:#e8edcf;transform:rotate(-7deg);border:3px solid #fffdf5;border-radius:11px 9px 13px 8px;box-shadow:0 3px 7px #8a785b1a;font-size:12px}.sticker span{font-size:18px;margin-left:15px}
#clay-companion{position:relative;margin-top:24px;margin-left:35px;width:145px;transform:rotate(-5deg)}#clay-companion .clay-mascot{width:136px;filter:drop-shadow(3px 9px 5px #987f6022)}#clay-companion>span{display:block;font-size:10px;text-align:center;margin-top:2px;color:#af9580;letter-spacing:1px}
.seg{position:fixed;top:104px;left:40px;display:flex;gap:5px;padding:6px;background:#fffaf0;border:3px solid #fffcf6;border-radius:28px 31px 26px 29px;box-shadow:0 5px 0 #e9dbc8,0 8px 15px #9c7f6010}
.seg button{border:0;background:transparent;border-radius:22px;padding:8px 18px;color:var(--ink2);font-size:14px;transition:background .2s,transform .2s}.seg button.on{background:linear-gradient(#c8dac5,#b7cdb5);color:#5c7259;box-shadow:inset 0 2px 2px #fff8,0 2px 1px #a7bd9f}.seg button:hover{transform:translateY(-1px)}
.seg.small{top:161px;left:41px;border:none;background:transparent;box-shadow:none;padding:0;gap:3px}.seg.small button{font-size:11px;padding:5px 14px}.seg.small button.on{background:#eee0c9;box-shadow:inset 0 1px 3px #b39b8020;color:#947453}
.panel{background:linear-gradient(145deg,#fffdf7,#fff8ec);border:3px solid #fffdf6;border-radius:30px 25px 31px 26px;padding:18px;box-shadow:2px 6px 0 #e8d8c347,0 14px 28px #a27f5e0e}
#stats{position:fixed;top:121px;right:32px;width:244px;padding:22px 18px;transform:rotate(1deg)}.stoggle{display:none}.cd{font-size:12px;color:#b0937b}.cd b{font-size:48px;font-weight:400;color:#ce9276}.cd small{font-size:11px}.lbl{font-size:10px;color:#a8917c;margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0 13px}.grid>div{padding:12px 2px;text-align:center;border-radius:18px 15px 19px 14px;background:#f4e6cd;box-shadow:inset 1px 2px 3px #d3bb9814}.grid>div:nth-child(2){background:#e9eedb;transform:rotate(-2deg)}.grid>div:nth-child(3){background:#f2e1d7;transform:rotate(2deg)}.grid b{display:block;font-size:16px;font-weight:400}.grid span{font-size:10px;color:#a18e78}.mini{font-size:10px;color:#b09a85;line-height:1.9}.src,.note{font-size:9px;line-height:1.8;color:#ad957e;margin-top:8px}.tag{background:#f4e3c9;color:#aa8261;border-radius:7px;padding:1px 5px;margin:0 2px}
.btn{background:linear-gradient(#e5a18b,#d79178);color:#fffaf4;border:2px solid #efb49e;border-radius:26px 29px 25px 31px;padding:14px 22px;font-size:14px;box-shadow:inset 0 2px 2px #fff5,0 5px 0 #bb816750,0 9px 20px #a7795620;transition:transform .25s var(--bounce)}.btn:hover{transform:translateY(-3px) rotate(-1deg)}.btn:active{transform:translateY(2px)}.btn.ghost{color:#9f876e;background:#f5eada;border-color:#fbf2e5;box-shadow:0 4px 0 #d8c5ae40}
#toggle{position:fixed;left:40px;bottom:49px;z-index:6}#map-caption{position:fixed;bottom:39px;left:50%;transform:translateX(-50%);text-align:center;line-height:1.9;font-size:12px;color:#a28c76;pointer-events:none}#map-caption small{display:block;font-size:9px;letter-spacing:1px;color:#b7a08b}.taiwan-copy{display:none}body.tw .global-copy{display:none}body.tw .taiwan-copy{display:inline}#demo-badge{position:fixed;right:38px;bottom:50px;font-size:9px;color:#b4987d;letter-spacing:.5px}
#legend{position:fixed;left:40px;top:595px;display:grid;grid-template-columns:1fr 1fr;gap:11px;width:193px;padding:15px;font-size:11px}#legend i{display:inline-block;border-top:5px solid;border-radius:10px;width:13px;margin-right:5px;vertical-align:middle}
#info{position:fixed;right:32px;top:445px;width:244px;font-size:12px;line-height:1.8;z-index:10}#info b{color:#be886e}#info .x{float:right;border:0;background:transparent;font:inherit;color:#a38e78;cursor:pointer}#info p{margin:10px 0;line-height:1.9}#info small{color:var(--ink2)}
#feed{position:fixed;right:32px;bottom:87px;width:244px;font-size:11px;display:flex;flex-direction:column;gap:7px;pointer-events:none}#feed>div{padding:8px 12px;background:#fffbf3;border:2px solid #fff;border-radius:18px;animation:feed 8s forwards}@keyframes feed{0%{opacity:0;transform:translateY(8px)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
#form{position:fixed;left:32px;bottom:32px;width:430px;max-height:calc(100dvh - 64px);overflow:auto;z-index:20;padding:20px}#form h2{font-size:22px;font-weight:400;margin:0 0 18px;color:#c5876d}label{display:block;font-size:12px;color:#a38b73;margin-bottom:10px}input,select{display:block;width:100%;margin-top:5px;border:2px solid #efe2d1;border-radius:13px;padding:10px 9px;background:#fffcf7;font-size:14px;color:var(--ink)}input:focus,select:focus{outline:2px solid #b8cec2;outline-offset:1px}.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}.row{display:flex;gap:8px}.chips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 12px;font-size:12px;color:#a38b73}.chips>span{width:57px}.chips label{display:inline-flex;align-items:center;gap:4px;margin:0;border:2px solid #efe2d0;background:#fff7e9;border-radius:20px;padding:5px 10px;font-size:12px;cursor:pointer}.chips input{appearance:none;position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0}.chips label:has(input:checked){background:#f6daca;border-color:#dda68d}.chips label:has(input:focus-visible){outline:3px solid #b8cec2}.msg{font-size:12px;color:#bd7e63;min-height:1em;margin:10px 0 0}.fine{font-size:10px;line-height:1.6;color:#b09a82;margin:8px 0 0}.tip{font:12px/1.8 var(--hand);padding:9px 12px;border:3px solid #fff;background:#fff9ec;color:#8a735d;border-radius:18px;box-shadow:0 5px 10px #a87e5620}
#routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}#map-labels{position:absolute;inset:0;z-index:3;pointer-events:none}.clabel{position:absolute;pointer-events:auto;display:flex;align-items:center;white-space:nowrap;min-height:29px;background:#fffaf0;border:2px solid #fffef8;border-radius:15px 12px 14px 11px;padding:4px 9px;color:#a0856d;font-size:11px;box-shadow:0 3px 0 #d9c5a83d,0 5px 10px #9b765910;transition:background .2s}.clabel .cnt{margin-left:6px;display:inline-block;min-width:17px;line-height:17px;text-align:center;font-size:9px;font-weight:400;border-radius:50%;padding:0 4px;background:#d6a284;color:#fffdf7}.clabel:hover{background:#f9e8d0}
body.tw #intro h1{font-size:39px}body.tw #clay-companion{margin-top:14px;width:100px;margin-left:35px}body.tw #clay-companion .clay-mascot{width:96px}body.tw .sticker{display:none}body.tw #intro p{font-size:12px}body.tw #globe canvas:first-child{filter:drop-shadow(3px 10px 8px #96805f20)}
@media(min-width:701px) and (max-width:1100px){#globe{left:210px;right:230px}#intro{left:25px}#intro h1{font-size:37px}#stats,#info{width:210px;right:18px}#legend{left:25px}header{left:25px}.seg{left:25px}.seg.small{left:26px}.edition{font-size:9px}#clay-companion{margin-left:10px}#demo-badge{right:24px}}
@media(max-width:700px){
 header{top:15px;left:17px;right:17px}.brand{font-size:16px;letter-spacing:-.6px}.brand span:last-child{font-size:10px;margin-left:7px;letter-spacing:0}.brand-drop{width:31px;height:30px;margin-right:7px}.edition{display:none}
 #intro,body.tw #intro{top:63px;left:18px;right:18px;text-align:center}#intro .eyebrow,#intro p,#intro .sticker,#clay-companion,body.tw #clay-companion{display:none}#intro h1,body.tw #intro h1{font-size:27px;line-height:1.2;margin:8px 0;letter-spacing:2px}#intro h1 br{display:none}
 .seg{top:115px;left:50%;transform:translateX(-50%);padding:5px}.seg button{font-size:13px;padding:6px 20px;white-space:nowrap}.seg.small{top:168px;left:50%;transform:translateX(-50%);white-space:nowrap}.seg.small button{font-size:10px;padding:4px 13px}
 #globe{left:0;right:0;top:202px;bottom:183px}body.tw #globe{top:174px;bottom:195px}#shadow{top:69%;width:65vw;height:22px;left:50%}#stage-water{left:80px;top:25%;width:270px;height:370px}
 #stats{top:auto;bottom:88px;left:18px;right:18px;width:auto;transform:none;padding:8px 13px;border-radius:23px 20px 25px 18px;z-index:6}.stoggle{display:block;position:absolute;right:10px;top:15px;border:0;border-radius:50%;width:27px;height:27px;background:#f2e7d4;color:#b09b81;font-size:14px}#stats.collapsed .stoggle{transform:rotate(180deg)}#stats.collapsed .grid,#stats.collapsed .mini,#stats.collapsed .src,#stats.collapsed .lbl{display:none}#stats.collapsed .cd{font-size:10px;display:flex;align-items:baseline;gap:5px}#stats.collapsed .cd b{font-size:23px}#stats .note{margin-top:0;font-size:9px}#stats .grid{margin:6px 0}#stats .grid>div{padding:5px}.cd b{font-size:29px}#stats .mini{display:none}
 #toggle{bottom:24px;left:50%;width:calc(100% - 72px);padding:12px 8px;font-size:13px;transform:translateX(-50%)}#toggle:hover{transform:translateX(-50%) translateY(-1px)}#map-caption{bottom:174px;width:100%;font-size:10px}#map-caption small,#demo-badge{display:none}body.tw #map-caption{display:none}
 #legend{top:auto;bottom:171px;left:18px;right:18px;width:auto;display:flex;justify-content:center;gap:8px;padding:0;border:0;background:none;box-shadow:none;font-size:9px}#legend i{width:9px;border-width:4px;margin-right:2px}#legend>div{white-space:nowrap}
 #info{top:auto;bottom:172px;left:18px;right:18px;width:auto;max-height:40dvh;overflow:auto;z-index:10;background:#fffcf5}#feed{display:none}#form{left:10px;right:10px;bottom:12px;width:auto;max-height:90dvh;padding:16px}#form .two{grid-template-columns:1fr 1fr}input,select{font-size:13px;padding:8px 6px}.chips label{font-size:11px;padding:4px 8px}.chips>span{width:48px}
 .clabel{font-size:10px;min-height:26px;padding:3px 6px;border-radius:12px 9px 13px 10px}.clabel .cnt{font-size:9px;min-width:16px;line-height:16px;margin-left:4px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
#legend button{font:inherit;color:var(--ink2);border:0;padding:2px 0;text-align:left;background:none;border-radius:9px;white-space:nowrap}#legend button.selected{background:#e5ecdc;box-shadow:0 0 0 5px #e5ecdc;color:#607c63}#legend button:hover{color:#725f4d}
/* A little island-explorer feeling: quiet water, floating controls, numbered destinations. */
.section-kicker{font:700 9px/1.5 ui-monospace,monospace;letter-spacing:1.7px;color:#bd8870}.stats-kicker{margin-bottom:9px}
#stats{transform:none;border-radius:25px;padding:18px}#stats .grid{margin:13px 0 10px}#stats .cd b{font-size:42px}
#scene-tools{position:fixed;z-index:7;left:calc(50% - 10px);top:111px;transform:translateX(-50%);display:flex;gap:3px;padding:5px;background:#fffaf1ed;border:2px solid #fffdf6;border-radius:24px;box-shadow:0 5px 15px #8d73511c;backdrop-filter:blur(12px)}
#scene-tools button{border:0;border-radius:17px;background:transparent;font:11px var(--hand);color:#937b65;padding:8px 13px;white-space:nowrap}#scene-tools button:hover,#scene-tools button[aria-pressed=true],#scene-tools button[aria-expanded=true]{background:#e8edde;color:#65765a}
#journey-index{position:fixed;right:32px;top:435px;width:244px;max-height:calc(100dvh - 530px);overflow:auto;padding:18px 16px;z-index:6;border-radius:25px;background:#fffaf2ed;backdrop-filter:blur(10px)}.index-head{display:flex;align-items:center;justify-content:space-between}.index-head button{border:0;background:transparent;color:#ac947a;font-size:19px;line-height:1;padding:0 3px}
#journey-index h2{font-size:19px;margin:8px 0 7px;font-weight:500;letter-spacing:.5px}#journey-index p{font-size:10px;line-height:1.7;color:#ad967f;margin:0 0 13px}
#region-list{display:grid;gap:2px}#region-list button{display:grid;grid-template-columns:25px 1fr 32px 10px;align-items:center;gap:6px;text-align:left;padding:7px 5px;border:0;background:none;border-radius:10px;font:11px var(--hand);color:#806d5c}#region-list button:hover,#region-list button.selected{background:#edf0df}.index-number{font:italic 14px Georgia,serif;color:#c98d70}#region-list small{font-size:9px;text-align:right;color:#aa9480}.index-arrow{font-size:10px;color:#b09b86}
.label-number{font:italic 10px Georgia,serif;color:#c08c72;margin-right:5px}.clabel{border-radius:19px;padding:5px 9px}.clabel .cnt{background:#b8c7a6;color:#fff}
#stage-water{left:calc(50% - 365px);top:175px;width:745px;height:600px;border-radius:48% 52% 50% 46%;background:radial-gradient(ellipse at 58% 50%,#a7cfc2bb 0%,#bfdad08c 43%,#d7e7d73d 61%,#e7ecde00 72%);overflow:hidden;transition:opacity .8s}
#stage-water:before{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Cellipse cx='27' cy='31' rx='9' ry='1.5' fill='%23fffaf0'/%3E%3Cellipse cx='118' cy='78' rx='6' ry='1.2' fill='%23fffaf0'/%3E%3C/svg%3E");opacity:.42;mask-image:radial-gradient(ellipse,#000 15%,transparent 67%);animation:sea-drift 18s linear infinite}
@keyframes sea-drift{to{background-position:160px 0}}.scene-paused #stage-water:before{animation-play-state:paused}
body.tw #intro{top:215px}body.tw #intro .eyebrow{font-size:9px;letter-spacing:1px}body.tw #intro h1{font-size:35px}body.tw #clay-companion{margin-top:25px}body.tw #legend{top:auto;bottom:170px}body.tw #info{background:#fffaf3}
@media(min-width:701px) and (max-width:1100px){#journey-index{right:18px;width:210px}#scene-tools{left:49%;top:104px}#scene-tools button{padding:8px 9px}#stage-water{left:22%;width:58vw}}
@media(max-width:700px){
 #stats{padding:8px 13px}#stats .cd b{font-size:29px}#stats.collapsed .cd b{font-size:23px}.stats-kicker{display:none}
 #scene-tools{top:auto;bottom:205px;left:50%;padding:3px;gap:2px;box-shadow:0 3px 8px #8d735113}#scene-tools button{font-size:9px;padding:5px 10px}body.tw #scene-tools{bottom:auto;top:170px}
 #journey-index{top:auto;bottom:172px;left:18px;right:18px;width:auto;max-height:54dvh;padding:17px;z-index:11;background:#fffaf5}#journey-index h2{font-size:18px}#region-list{grid-template-columns:1fr 1fr;gap:5px 10px}#region-list button{grid-template-columns:22px 1fr 29px 9px;gap:4px;padding:9px 3px}
 #stage-water{left:26px;top:215px;width:355px;height:410px}body.tw #intro{top:63px}body.tw #intro h1{font-size:27px}body.tw #legend{top:auto;bottom:171px}
 body.tw #globe{top:208px;bottom:195px}.label-number{font-size:9px;margin-right:4px}.clabel{padding:3px 6px}#map-caption{bottom:173px}
}
@media(min-width:701px){#journey-index{padding:16px}#journey-index h2{margin:6px 0 5px}#journey-index p{margin-bottom:7px}#region-list button{padding:5px;font-size:12px}}

/* Counted origin clusters stay on the globe; empty destinations are intentionally muted. */
.origin-badge{position:absolute;transform:translateX(-50%);border:2px solid #fffaf0;border-radius:16px;background:#fff7e9;color:#806954;font:11px inherit;padding:4px 7px;white-space:nowrap;pointer-events:auto;box-shadow:0 3px 8px #886f5120;cursor:pointer}
.origin-badge b{display:inline-block;background:#9ebca7;color:#fff;border-radius:10px;padding:1px 5px;margin-left:2px}
.origin-badge[hidden]{display:none}
.clabel.empty,#region-list button.empty{opacity:.48}
@media(max-width:699px){.origin-badge{font-size:9px;padding:3px 5px}}
/* Arrival breakdowns remain scrollable within the desktop detail card. */
@media(min-width:700px){#info{max-height:calc(100dvh - 475px);overflow:auto}}

.share-actions{margin-top:12px;display:grid;gap:8px}.share-actions button,#personal-route button{border:1px solid #d4dcc4;border-radius:12px;padding:8px;background:#e8eddd;color:#6e725c;font:inherit;cursor:pointer}.share-actions input{width:100%;font-size:11px}.share-actions .fine{font-size:10px;line-height:1.65}
#personal-route{position:fixed;z-index:8;left:50%;top:164px;transform:translateX(-50%);background:#fff9ef;border:2px solid white;border-radius:20px;padding:8px 12px;box-shadow:0 4px 12px #96795b20;display:flex;gap:8px;align-items:center;font-size:11px;max-width:calc(100vw - 24px)}
#personal-route.hidden{display:none}#personal-title{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:699px){#personal-route{top:205px;width:max-content;gap:5px;padding:6px;font-size:9px}#personal-route button{padding:6px}#personal-title{max-width:110px}}

body.personal #demo-badge,body.personal #stats .note{display:none}

#submitSuccess{background:#e9efdd;color:#56754e;border-radius:12px;padding:10px;font-weight:700}

/* Submission feedback stays within the existing warm form. */
button:disabled{opacity:.6;cursor:wait}#challenge{margin:8px 0;min-width:0}#security-note{margin:8px 0}#accepted-count{font-size:11px;letter-spacing:.5px}#stats .note{line-height:1.5}
@media(max-width:700px){#stats:not(.collapsed) #accepted-count{display:block;margin-bottom:4px}}

/* Quiet footer; native dialog keeps focus and Escape handling accessible. */
#site-footer{position:fixed;left:40px;bottom:17px;z-index:7;font-size:11px}
#site-footer button{font:inherit;color:#87715e;background:none;border:0;padding:3px 0;text-decoration:underline;text-underline-offset:3px}
#site-info{position:fixed;inset:0;margin:auto;width:min(430px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:30px;border:3px solid #fffdf7;border-radius:26px;background:#fff8ed;color:var(--ink);box-shadow:0 16px 60px #78604a30}
#site-info::backdrop{background:#68544345;backdrop-filter:blur(3px)}
#site-info h2{font-size:21px;font-weight:500;line-height:1.6;margin:8px 20px 12px 0}
#site-info h3{font-size:14px;margin:24px 0 8px}#site-info p{font-size:13px;line-height:1.9;margin:8px 0}
#site-info a{color:#8d5e45;font-size:13px;text-underline-offset:4px;overflow-wrap:anywhere}
#close-site-info{position:absolute;top:12px;right:14px;border:0;border-radius:50%;width:32px;height:32px;background:#f1e6d7;color:#806c58;font-size:22px}
@media(max-width:700px){#site-footer{left:50%;transform:translateX(-50%);bottom:2px;white-space:nowrap;font-size:10px}#site-footer button{padding:2px 8px}#site-info{padding:24px}}

/* Four personal companions, shared by the picker, globe and flat map. */
.traveler{display:inline-block;width:64px;aspect-ratio:1;background-image:url('assets/homecoming-travelers-v1.webp');background-size:300% 100%;background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #846d4d16)}
.traveler-drop{background-image:url('assets/clay-characters-v2.webp');background-position:100% 95.62%;background-size:440.2% 230.4%;aspect-ratio:403/385}
.traveler-mountain{background-position:0 0}.traveler-potato{background-position:50% 0}.traveler-boba{background-position:100% 0}
#clay-companion .traveler{width:136px}body.tw #clay-companion .traveler{width:96px}
#choose-avatar{position:fixed;left:40px;bottom:122px;z-index:7;display:flex;align-items:center;gap:4px;border:2px solid #fff9ed;border-radius:23px;background:#f7eddd;color:#806b56;padding:5px 12px 5px 5px;font:11px var(--hand);box-shadow:0 3px 0 #deceb647}
#choose-avatar .traveler{width:35px}
#avatar-dialog{margin:auto;width:min(530px,calc(100vw - 28px));max-height:85dvh;overflow:auto;padding:28px;border:3px solid #fffdf5;border-radius:28px;background:#fff8ec;color:var(--ink);box-shadow:0 18px 70px #69523b30}
#avatar-dialog::backdrop{background:#69523b55;backdrop-filter:blur(4px)}#avatar-dialog h2{font-size:25px;font-weight:500;margin:12px 0}#avatar-dialog p{font-size:12px;line-height:1.8}#close-avatar{float:right;border:0;background:none;font-size:24px;color:#8e765d}
#avatar-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0}#avatar-options button{font:12px var(--hand);border:2px solid #e9dcc6;border-radius:19px;background:#faf1e1;color:#80654e;padding:8px 3px}#avatar-options .traveler{display:block;width:100%;margin-bottom:5px}#avatar-options button[aria-pressed=true]{background:#e4ecd6;border-color:#9db38d}#avatar-options b{font-weight:500}
.form-avatar{border:0;background:#e9eedc;color:#718060;border-radius:14px;padding:8px 11px;margin-bottom:14px;font:11px var(--hand)}
#route-controls{position:fixed;left:40px;top:168px;z-index:7;display:flex;gap:3px;padding:3px;border:1px solid #eadcc8;background:#fff9eded;border-radius:18px}
#route-controls button{border:0;background:none;border-radius:15px;color:#947b63;font:11px var(--hand);padding:6px 11px}#route-controls button.on{background:#e7eddb;color:#607454}
#views{z-index:7}#views button{padding:8px 12px;font-size:12px}
#flat-map{position:fixed;left:30px;right:302px;top:207px;bottom:116px;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#fffaf0,#f4e8d3);border:3px solid #fffdf4;border-radius:32px;box-shadow:0 10px 30px #93785812}
.flat-heading{position:absolute;left:24px;top:18px;pointer-events:none}.flat-heading span{font:9px ui-monospace,monospace;letter-spacing:2px;color:#b38c6b}.flat-heading h2{font-size:19px;font-weight:500;margin:8px 0;color:#927757}
#mercator-canvas{position:absolute;left:0;top:78px;width:100%;height:calc(100% - 130px);touch-action:none;cursor:grab}#mercator-canvas:active{cursor:grabbing}
#flat-zoom{position:absolute;right:16px;top:17px;display:flex;gap:4px}#flat-zoom button{border:1px solid #e6d8bd;border-radius:13px;background:#fff9e9;color:#887156;font:12px var(--hand);height:32px;min-width:32px}
#flat-status{position:absolute;bottom:26px;left:24px;font-size:10px;color:#927b61;margin:0}.projection-note{position:absolute;bottom:11px;left:24px;font-size:9px;color:#a88c70}
body.flat #globe,body.flat #shadow,body.flat #stage-water{visibility:hidden;pointer-events:none}body.flat #intro{top:85px;left:40px}body.flat #intro h1{font-size:28px;margin:10px 0}body.flat #intro h1 br{display:none}body.flat #intro .eyebrow,body.flat #intro p,body.flat .sticker,body.flat #clay-companion{display:none}
body.flat #views{top:144px}body.flat #route-controls{top:153px;left:405px}body.flat #scene-tools{top:103px;left:auto;right:307px;transform:none}body.flat #choose-avatar{left:285px;bottom:45px}body.flat #map-caption{display:none}body.flat #personal-route{top:204px;left:calc(50% - 115px);font-size:10px;z-index:9}
@media(min-width:701px) and (max-width:1100px){#flat-map{right:245px;left:20px}body.flat #views{left:20px}body.flat #route-controls{left:20px;top:198px}body.flat #flat-map{top:240px}body.flat #scene-tools{right:245px}body.flat #intro{left:20px}body.flat #intro h1{font-size:24px}}
@media(max-width:700px){
 #views,#views.seg{top:115px;left:50%;width:max-content;max-width:calc(100vw - 20px)}#views button{font-size:11px;padding:6px 12px}
 #route-controls,body.flat #route-controls{top:169px;left:50%;transform:translateX(-50%);white-space:nowrap}#route-controls button{font-size:10px;padding:5px 10px}
 #choose-avatar,body.flat #choose-avatar{left:auto;right:14px;bottom:174px;font-size:10px;padding:2px 8px 2px 2px}#choose-avatar .traveler{width:25px}
 #scene-tools,body.tw #scene-tools,body.flat #scene-tools{top:208px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);max-width:calc(100vw - 20px)}#scene-tools button{padding:5px 8px;font-size:9px}
 #globe,body.tw #globe{top:246px;bottom:205px}body.tw #scene-tools{top:173px}body.tw #globe{top:215px}
 #map-caption{bottom:174px;width:230px;left:12px;transform:none;text-align:left;font-size:9px}
 #avatar-dialog{padding:20px}#avatar-options{gap:5px;margin:16px 0}#avatar-options button{font-size:11px;border-radius:14px}
 body.flat #intro{top:63px;left:18px;right:18px}body.flat #intro h1{font-size:27px;margin:8px 0}body.flat #views{top:115px;left:50%}
 #flat-map,body.flat #flat-map{left:8px;right:8px;top:248px;bottom:211px;border-radius:24px}
 .flat-heading{left:14px;top:12px}.flat-heading span{font-size:8px}.flat-heading h2{font-size:12px;margin:5px 0}
 #flat-zoom{right:10px;top:12px;gap:2px}#flat-zoom button{font-size:10px;min-width:25px;height:27px}
 #mercator-canvas{top:56px;height:calc(100% - 99px)}#flat-status{left:14px;bottom:25px;font-size:8px}.projection-note{left:14px;right:8px;bottom:9px;font-size:7px}
 body.flat #personal-route,#personal-route{top:244px;width:max-content;max-width:calc(100vw - 16px);left:50%}body.flat.personal #flat-map{top:290px}
}

@media(max-width:700px){body.flat #flat-map{top:208px}body.flat #scene-tools{top:auto;bottom:174px;left:14px;right:auto;transform:none}body.flat #resetScene,body.flat #indexToggle{display:none}body.flat.personal #flat-map{top:244px}body.flat #personal-route{top:205px}}
@media(max-width:700px){#info{bottom:215px}}

.flat-heading h2{max-width:calc(100vw - 220px)}@media(max-width:700px){.flat-heading h2{max-width:205px;font-size:11px}}

/* Short app-side-panel viewports need usable map space, not just scaled phone chrome. */
#interaction-notice{position:fixed;z-index:25;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100vw - 30px);padding:11px 16px;border:2px solid #fffdf6;border-radius:18px;background:#e8efdb;color:#5e7351;font-size:12px;box-shadow:0 6px 20px #79644024;pointer-events:none}
@media(max-width:700px){#interaction-notice{bottom:auto;top:53px;width:max-content;font-size:11px}}
@media(max-width:700px) and (max-height:720px){
 header{top:8px}.brand{font-size:14px}.brand-drop{width:26px;height:27px}.brand span:last-child{font-size:9px}
 #intro,body.tw #intro,body.flat #intro{top:43px}#intro h1,body.tw #intro h1,body.flat #intro h1{font-size:22px;margin:7px 0;letter-spacing:1px}
 #views,#views.seg,body.flat #views{top:81px}#views button{padding:5px 10px;font-size:11px}
 #route-controls,body.flat #route-controls{top:130px}
 #scene-tools{top:167px}body.tw #scene-tools{top:133px}
 #globe{top:202px;bottom:186px}body.tw #globe{top:173px;bottom:186px}
 #flat-map,body.flat #flat-map{top:170px;bottom:186px}body.flat.personal #flat-map{top:206px}
 .flat-heading{top:10px}.flat-heading h2{font-size:10px;max-width:145px}.flat-heading span{font-size:7px}
 #mercator-canvas{top:54px;height:calc(100% - 94px)}#flat-zoom{top:10px;right:8px}#flat-zoom button{min-width:23px;height:25px;font-size:9px}
 #flat-status{font-size:8px;bottom:23px}.projection-note{font-size:7px;bottom:8px}
 #choose-avatar,body.flat #choose-avatar{bottom:146px}body.flat #scene-tools{bottom:146px;top:auto}
 #map-caption{display:none}#personal-route,body.flat #personal-route{top:170px;font-size:8px;padding:4px}#personal-title{max-width:83px}
 #info{bottom:186px;max-height:calc(100dvh - 390px);padding:13px}
 #stats .cd b,#stats.collapsed .cd b{font-size:22px}#stats{padding:7px 12px}
 #interaction-notice{top:41px;max-width:calc(100vw - 24px);font-size:10px;padding:8px 12px}
}

@media(max-width:700px) and (min-height:721px){
  #intro h1,body.tw #intro h1,body.flat #intro h1{font-size:clamp(20px,6.6vw,27px);letter-spacing:1px}
}