/* One painted world: opening arrival, hero selection, then the marching map. */
#heroSelection.hero-arrival{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#172529 url('../assets/intro-battle-shore-v080.webp') center/cover no-repeat;color:#f4ead4;isolation:isolate}
#heroSelection.hero-arrival::backdrop{background:#172529;backdrop-filter:none}
#heroArrivalScene,.arrival-map-veil>canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;pointer-events:none}
.hero-arrival-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0817185c,transparent 42%,#08171844),linear-gradient(0deg,#0c1c1dde,transparent 40%)}
#heroSelection .hero-arrival-portrait,.arrival-map-veil .hero-arrival-portrait{position:absolute;inset:auto auto 0 2vw;width:min(36vw,660px);height:91dvh;margin:0;pointer-events:none}
.hero-arrival-portrait>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 12px 22px #07131399)}
.hero-arrival-portrait figcaption{position:absolute;left:18%;bottom:5%;min-width:180px;padding:12px 90px 12px 16px;background:linear-gradient(90deg,#0a1c1cee,#152d29bc,transparent);border-left:2px solid #ba955c;text-shadow:0 2px 4px #0008}
.hero-arrival-portrait figcaption small{display:block;color:#dac79d;font-size:14px;letter-spacing:.25em}
.hero-arrival-portrait figcaption>b{font:800 clamp(28px,3vw,52px)/1.25 'LXGW WenKai Lite',serif;letter-spacing:.14em}
.hero-arrival-token{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:block;width:72px;height:72px;filter:drop-shadow(0 4px 4px #06191899)}
.hero-arrival-token>img,.hero-choice-token>img{display:block;width:100%;height:100%;object-fit:contain}
.hero-arrival-token>i,.hero-choice-token>i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;color:#f2e3bc;text-shadow:-1px 0 #28362e,1px 0 #28362e,0 -1px #28362e,0 1px #28362e}
.hero-arrival-token>i{font:800 36px/1 'LXGW WenKai Lite',serif}
#heroSelection.hero-arrival>article{position:absolute;inset:50% 4vw auto auto;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;width:clamp(340px,30vw,480px);height:auto;max-height:calc(100dvh - 48px);padding:30px;overflow-y:auto;overscroll-behavior:contain;contain:none;border:1px solid #b59965;border-radius:12px 3px 12px 3px;background:linear-gradient(150deg,#fff9edee,#eedfc5ed),url('../assets/technique-info-backdrop-v048-r18.webp') center/cover no-repeat;color:#233b36;box-shadow:0 22px 60px #06151566}
#heroSelection.hero-arrival>article::before{display:none}
#heroSelection.hero-arrival header{display:block;flex:none;padding:0;text-align:left}
#heroSelection.hero-arrival header small{color:#995139;font-size:12px;letter-spacing:.25em}
#heroSelection.hero-arrival header h2{margin:8px 0;font-size:clamp(24px,2vw,32px);line-height:1.35;letter-spacing:.02em}
#heroSelectionTitle{touch-action:none;user-select:none;-webkit-user-select:none}
#heroSelection.hero-arrival header p{margin:0;font-size:13px;line-height:1.6;color:#776449}
#heroSelection .hero-selection-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-height:auto;padding:0;overflow:visible;contain:none;scroll-snap-type:none}
#heroSelection .hero-selection-list>button{display:flex;align-items:center;gap:9px;min-height:70px;margin:0;padding:8px 10px;border:1px solid #b7a582;border-radius:6px;background:#fff9ed8f;color:#344940;box-shadow:0 2px 4px #3f332316;transform:none;scroll-snap-align:none;text-align:left}
#heroSelection .hero-selection-list>button.is-selected{border-color:#30554a;background:#31564b;color:#ffefd0;box-shadow:inset 0 0 0 1px #d5bb8559,0 3px 6px #213c3329}
#heroSelection .hero-selection-list>button:focus-visible{outline:2px solid #b73f2b;outline-offset:3px}
.hero-choice-token{position:relative;flex:none;display:block;width:44px;height:44px}
.hero-choice-token>i{font:800 23px/1 'LXGW WenKai Lite',serif}
#heroSelection .hero-selection-list>button b{display:block;font-size:18px;white-space:nowrap}
#heroSelection .hero-selection-list>button small{display:block;font-size:10px;opacity:.75;white-space:nowrap}
#heroSelection .hero-arrival-detail{margin:0;padding:15px 0 0;border-top:1px solid #aa8c5859;background:none}
.hero-arrival-detail h3{margin:0 0 10px;font-size:20px}
.hero-arrival-detail p{margin:0;font-size:14px;line-height:1.8;color:#605440}
#heroArrivalTraits{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
#heroArrivalTraits span{padding:3px 9px;border:1px solid #b39b7373;border-radius:4px;font-size:11px;color:#57634d;background:#faf2e0}
#heroSelection.hero-arrival footer{display:flex;flex-direction:column;gap:9px;flex:none;padding:0;border:0}
#heroSelection.hero-arrival footer span{font-size:12px;color:#857255}
#heroSelection.hero-arrival footer button{width:100%;min-width:0;min-height:48px;margin:0;border:1px solid #723d30;border-radius:6px;background:linear-gradient(145deg,#a84b36,#7f332b);color:#fff0d3;box-shadow:inset 0 1px 0 #e0b48680,0 3px 0 #502e27;font-size:17px}
#heroSelection.hero-arrival footer button:disabled{opacity:.58;filter:grayscale(.6)}
.arrival-map-veil{position:fixed;inset:0;z-index:30;overflow:hidden;background:#172529;pointer-events:none;transform-origin:50% 50%}
#shanheMap.is-arriving .shanhe-map-tools,#shanheMap.is-arriving header,#shanheMap.is-arriving footer{animation:arrival-map-controls 1.05s ease-out both}
@keyframes arrival-map-controls{0%,30%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@media(max-width:899px) and (min-aspect-ratio:1/1){
 #heroSelection.hero-arrival>article{right:2vw;width:43vw;min-width:300px;padding:18px;gap:13px;max-height:calc(100dvh - 20px)}
 #heroSelection .hero-arrival-portrait,.arrival-map-veil .hero-arrival-portrait{left:0;width:45vw}
 #heroSelection .hero-arrival-detail p{font-size:12px;line-height:1.65}
 #heroSelection .hero-selection-list>button{min-height:58px}
}
@media(max-aspect-ratio:10/11){
 #heroSelection .hero-arrival-portrait,.arrival-map-veil .hero-arrival-portrait{left:-4vw;bottom:52dvh;width:61vw;height:45dvh}
 .hero-arrival-portrait figcaption{left:12%;bottom:0;min-width:160px;padding:6px 68px 6px 10px}
 .hero-arrival-portrait figcaption small{font-size:11px}.hero-arrival-portrait figcaption>b{font-size:30px}
 .hero-arrival-token{width:54px;height:54px}.hero-arrival-token>i{font-size:28px}
 #heroSelection.hero-arrival>article{inset:auto 10px max(10px,env(safe-area-inset-bottom)) 10px;transform:none;width:auto;max-height:49dvh;padding:18px;gap:13px}
 #heroSelection.hero-arrival header h2{font-size:24px;margin:3px 0 4px}#heroSelection.hero-arrival header small{font-size:10px}#heroSelection.hero-arrival header p{display:none}
 #heroSelection .hero-selection-list{gap:8px}#heroSelection .hero-selection-list>button{min-height:58px;padding:6px 9px}.hero-choice-token{width:38px;height:38px}.hero-choice-token>i{font-size:21px}
 #heroSelection .hero-arrival-detail{padding-top:10px}.hero-arrival-detail h3{font-size:17px;margin-bottom:5px}.hero-arrival-detail p{font-size:12px;line-height:1.65}#heroArrivalTraits{margin-top:7px}#heroArrivalTraits span{font-size:10px}
 #heroSelection.hero-arrival footer{gap:6px}#heroSelection.hero-arrival footer span{display:none}#heroSelection.hero-arrival footer button{min-height:44px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){#shanheMap.is-arriving header,#shanheMap.is-arriving footer,#shanheMap.is-arriving .shanhe-map-tools{animation:none}}