/* 楓之谷地圖 */
.wm{--paper:#fff9ea;--paper2:#f6ead0;--ink:#4a2c16;--soft:#7a5a3c;--rim:#8c5a2b;--line:#e2c894;--accent:#f06a13;max-width:1320px;margin:0 auto;padding:24px 20px 40px;color:var(--ink)}
html[data-theme=dark] .wm{--paper:#26314f;--paper2:#1f2944;--ink:#f3ead6;--soft:#c2b59b;--rim:#3b4a73;--line:#3a4a78;--accent:#ffb347}
.wm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:14px}
.wm-head h1{margin:0;font-size:32px}
.wm-head p{margin:6px 0 0;color:var(--soft);font-weight:700}
.wm-find{position:relative;width:min(340px,100%)}
.wm-find input{box-sizing:border-box;width:100%;padding:11px 14px;border:3px solid var(--rim);border-radius:12px;background:var(--paper);color:var(--ink);font:700 15px/1.3 inherit}
.wm-find input:focus{outline:3px solid var(--accent);outline-offset:1px}
#wm-results{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;max-height:360px;overflow:auto;background:var(--paper);border:3px solid var(--rim);border-radius:12px;box-shadow:0 10px 24px #0005;padding:6px}
#wm-results button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:700 14px/1.35 inherit;cursor:pointer}
#wm-results button:hover,#wm-results button:focus{background:var(--paper2)}
#wm-results small{display:block;color:var(--soft);font-size:12px}
#wm-results p{margin:8px;color:var(--soft);font-size:13px}
#wm-worlds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
#wm-worlds button{padding:6px 12px;border:2px solid var(--rim);border-radius:999px;background:var(--paper);color:var(--ink);font:700 13px/1.3 inherit;cursor:pointer}
#wm-worlds button:hover{background:var(--paper2)}
#wm-worlds button.is-active{background:var(--accent);border-color:#a8430a;color:#fff}
.wm-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.wm-frame{background:linear-gradient(180deg,#b97a3f,#9a602c);border:3px solid #5a2f0e;border-radius:16px;padding:10px;box-shadow:inset 0 2px 0 #ffffff40,0 6px 0 #5a2f0e,0 10px 20px #0004}
html[data-theme=dark] .wm-frame{background:linear-gradient(180deg,#5b3d27,#45301f);border-color:#2a1c11}
.wm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 2px 8px;color:#fff;text-shadow:0 2px 0 #0006}
.wm-bar h2{margin:0;font-size:20px}
#wm-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;font-weight:700}
#wm-crumbs button{border:0;background:#0003;color:#fff;border-radius:6px;padding:3px 8px;font:inherit;cursor:pointer}
#wm-crumbs button:hover{background:#0005}
#wm-crumbs i{font-style:normal;opacity:.7}
#wm-count{font-size:12px;opacity:.9}
#wm-stage{position:relative;width:100%;border-radius:8px;overflow:visible;background:#0002}
#wm-image{display:block;width:100%;height:100%;border-radius:8px;user-select:none;-webkit-user-drag:none}
#wm-spots{position:absolute;inset:0;pointer-events:none}
#wm-spots .wm-spot{pointer-events:auto}
html[data-ui] body .wm #wm-spots .wm-spot,.wm .wm-spot{background-color:transparent!important;background-position:center!important;background-size:contain!important;background-repeat:no-repeat!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:0!important;min-width:0!important;padding:0!important;margin:0!important}
.wm-spot{position:absolute;width:18px;height:18px;translate:-50% -50%;cursor:pointer;transition:transform .15s;filter:drop-shadow(0 1px 1px #0008)}
.wm-spot:hover,.wm-spot:focus-visible{transform:scale(1.45);z-index:3;outline:none}
/* Field: the in-game smiley marker. */
html[data-ui] body .wm #wm-spots .wm-spot.t1,.wm .wm-spot.t1{width:14px;height:14px;background-image:linear-gradient(#fffbe9,#f1d9a6)!important;border:2px solid #7a4a1f!important;border-radius:50%!important;box-shadow:0 2px 0 #5a2f0e!important;filter:none}
html[data-ui] body .wm #wm-spots .wm-spot.t1:is(:hover,:focus-visible,.is-selected){background-image:linear-gradient(#fff3b0,#ffcd65)!important}
/* Town: blue house badge. */
html[data-ui] body .wm #wm-spots .wm-spot.t0,.wm .wm-spot.t0{width:26px;height:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='11.5' fill='%2328c8f0' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M7 13.2 13 7.6l6 5.6h-1.8v5.4h-3v-3.6h-2.4v3.6h-3v-5.4z' fill='%23ffffff'/%3E%3C/svg%3E")!important}
/* Facility / special place: red target. */
html[data-ui] body .wm #wm-spots :is(.wm-spot.t2,.wm-spot.t3),.wm :is(.wm-spot.t2,.wm-spot.t3){width:20px;height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='%23ffffff' stroke='%23e2332b' stroke-width='2.4'/%3E%3Ccircle cx='10' cy='10' r='4.6' fill='none' stroke='%23e2332b' stroke-width='2.2'/%3E%3Ccircle cx='10' cy='10' r='1.6' fill='%23e2332b'/%3E%3C/svg%3E")!important}
/* Spot that opens a more detailed world map: magnifier badge. */
html[data-ui] body .wm #wm-spots .wm-spot.is-link,.wm .wm-spot.is-link{width:26px;height:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Crect x='1.5' y='1.5' width='23' height='23' rx='6' fill='%23f0426a' stroke='%23ffffff' stroke-width='2'/%3E%3Ccircle cx='11.5' cy='11.5' r='5' fill='none' stroke='%23ffffff' stroke-width='2.4'/%3E%3Cpath d='m15.2 15.2 4.6 4.6' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")!important;animation:wm-bob 2.4s ease-in-out infinite}
.wm-spot.is-selected{transform:scale(1.35);z-index:4}
.wm-spot.is-selected::after{content:'';position:absolute;inset:-9px;border:3px solid #ffd75a;border-radius:50%;animation:wm-ping 1.3s ease-out infinite}
@keyframes wm-ping{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
@keyframes wm-bob{50%{translate:-50% -62%}}
#wm-tip{position:absolute;z-index:20;translate:-50% calc(-100% - 14px);pointer-events:none;min-width:120px;max-width:260px;padding:8px 11px;border-radius:9px;border:2px solid #e8c15a;background:linear-gradient(160deg,#2f3f6b,#1c2644 75%);color:#fff;box-shadow:0 0 0 2px #1a2035,0 6px 14px #0007;text-align:center}
#wm-tip.below{translate:-50% 30px}
#wm-tip strong{display:block;font-size:14px}
#wm-tip small{display:block;margin-top:2px;color:#d8e0ff;font-size:12px;line-height:1.4}
#wm-tip small.lv{color:#ffd75a}
#wm-tip small.link{color:#ff9fb5}
#wm-panel{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;background:var(--paper);border:3px solid var(--rim);border-radius:14px;padding:16px;box-shadow:inset 0 0 0 2px var(--paper2),0 6px 14px #0003}
#wm-panel h2{margin:0 0 8px;font-size:22px}
.wm-kicker{margin:0 0 2px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:1px}
.wm-hint{margin:0 0 10px;color:var(--soft);font-size:13px;font-weight:700;line-height:1.55}
.wm-legend{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px;font-weight:700;font-size:14px}
.wm-legend li{display:flex;align-items:center;gap:12px}
.wm .wm-legend .wm-spot{position:static;translate:none!important;display:inline-block;animation:none!important;flex:none}
.wm-enter{display:block;width:100%;margin:4px 0 12px;padding:10px 12px;border:0;border-radius:10px;background:#f0426a;color:#fff;font:800 15px/1.3 inherit;cursor:pointer;box-shadow:0 3px 0 #a3203f}
.wm-enter:hover{filter:brightness(1.08)}
.wm-map{border:2px dashed var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:var(--paper2)}
.wm-map.is-focus{border:2px solid var(--accent);box-shadow:0 0 0 3px #f06a1333}
.wm-map header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wm-map h3{margin:0;font-size:16px}
.wm-map header small{color:var(--soft);font-size:12px;white-space:nowrap}
.wm-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:6px;margin-top:8px;font-size:12px}
.wm-row>span{color:var(--soft);font-weight:800;padding-top:3px}
.wm-row>div{display:flex;flex-wrap:wrap;gap:4px}
.wm-row em{font-style:normal;color:var(--soft);padding:3px 2px}
.wm-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
.wm-chip:hover{border-color:var(--accent)}
.wm-chip b{color:var(--accent);font-size:11px}
.wm-map footer{display:flex;gap:12px;margin-top:10px;font-size:13px;font-weight:800}
.wm-map footer a{color:var(--accent);text-decoration:none}
.wm-map footer a.go{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--accent);color:#fff}
.wm-note{margin:16px 0 0;color:var(--soft);font-size:12px;font-weight:700}
@media (max-width:900px){.wm-body{grid-template-columns:1fr}#wm-panel{position:static;max-height:none}.wm-spot{width:15px;height:15px}html[data-ui] body .wm #wm-spots .wm-spot.t1{width:12px;height:12px}.wm-spot.t0,.wm-spot.is-link{width:21px;height:21px}.wm-spot.t2,.wm-spot.t3{width:17px;height:17px}}
@media (max-width:560px){.wm{padding:16px 12px 32px}.wm-head h1{font-size:26px}.wm-frame{padding:6px}.wm-spot{width:12px;height:12px}html[data-ui] body .wm #wm-spots .wm-spot.t1{width:10px;height:10px;border-width:1.5px!important}.wm-spot.t0,.wm-spot.is-link{width:17px;height:17px}.wm-spot.t2,.wm-spot.t3{width:14px;height:14px}}
@media (prefers-reduced-motion:reduce){.wm-spot.is-link,.wm-spot.is-selected::after{animation:none}}

/* The site-wide Maple button style (maple-site.css) targets every button in <main>; these controls keep their own look. */
html[data-ui] body .wm #wm-worlds button{background:var(--paper)!important;color:var(--ink)!important;border:2px solid var(--rim)!important;box-shadow:none!important;min-height:0!important}
html[data-ui] body .wm #wm-worlds button:hover{background:var(--paper2)!important}
html[data-ui] body .wm #wm-worlds button.is-active{background:var(--accent)!important;border-color:#a8430a!important;color:#fff!important}
html[data-ui] body .wm #wm-crumbs button{background:#0003!important;color:#fff!important;border:0!important;box-shadow:none!important;min-height:0!important;padding:3px 8px!important}
html[data-ui] body .wm #wm-results button{background:none!important;color:var(--ink)!important;border:0!important;box-shadow:none!important;min-height:0!important}
html[data-ui] body .wm #wm-results button:hover{background:var(--paper2)!important}
html[data-ui] body .wm #wm-panel .wm-enter{background:#f0426a!important;color:#fff!important;border:0!important;box-shadow:0 3px 0 #a3203f!important}

#wm-art{position:absolute;inset:0}
#wm-art svg{display:block;width:100%;height:100%;border-radius:8px}
#wm-drawn{opacity:.85}
.wm-mobs{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px!important}
.wm-mob{display:grid;justify-items:center;align-content:start;gap:2px;padding:6px 4px;border-radius:10px;background:var(--paper);border:1px solid var(--line);color:var(--ink);text-decoration:none;text-align:center;font-weight:700;font-size:12px;line-height:1.25}
.wm-mob:hover{border-color:var(--accent);transform:translateY(-1px)}
.wm-mob img{max-width:60px;max-height:52px;object-fit:contain;image-rendering:pixelated}
.wm-mob b{color:var(--accent);font-size:11px}
.wm-map footer small{align-self:center;color:var(--soft);font-weight:700;font-size:11.5px}
html[data-ui] body .wm .wm-map footer a{color:var(--accent)!important;text-decoration:none!important}
html[data-ui] body .wm .wm-map footer a.go{color:#fff!important;background:var(--accent)!important}
html[data-ui] body .wm .wm-mob{color:var(--ink)!important;text-decoration:none!important}

/* 世界旅行 boarding scene */
#wm-stage.is-board{container-type:inline-size}
.wm-tour{position:absolute;inset:0;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#fff8e6cc 0%,#fff8e699 38%,#fff8e6dd 100%),url(/map-guide/worlds/WorldMap.png) center/cover}
.wm-tour-head{position:absolute;z-index:3;left:3%;top:4%;display:flex;align-items:center;height:8.5cqw;padding:0 4.5cqw;background:linear-gradient(#fbf0d2,#ecd6a4);border-top:.35cqw solid #9b5c2c;border-bottom:.35cqw solid #9b5c2c;box-shadow:0 .5cqw .8cqw #0003}
.wm-tour-head::before,.wm-tour-head::after{content:'';position:absolute;top:-1.1cqw;bottom:-1.1cqw;width:2.4cqw;border-radius:1.2cqw;background:linear-gradient(90deg,#8c4a1c,#d68b4a 45%,#8c4a1c);box-shadow:0 .3cqw .4cqw #0004}
.wm-tour-head::before{left:-1.2cqw}.wm-tour-head::after{right:-1.2cqw}
.wm-tour-title{font-size:4.8cqw;font-weight:900;color:#4a2a10;letter-spacing:.4cqw;text-shadow:0 .2cqw 0 #fff8}
.wm-gate{position:absolute;right:0;top:0;width:68%;height:33%;background:url(/world-map/art/msa-floor.png) left bottom/auto 4.4cqw repeat-x}
.wm-jet{position:absolute;left:2%;bottom:3.6cqw;width:33cqw;filter:drop-shadow(0 .6cqw .4cqw #0003)}
.wm-guide-npc{position:absolute;left:53%;bottom:3.8cqw;height:12cqw;image-rendering:pixelated}
.wm-say{position:absolute;left:66%;right:2%;top:6%;margin:0;padding:1cqw 1.4cqw;background:#fff;border:.35cqw solid #3a4a78;border-radius:1.4cqw;color:#26314f;font-size:1.5cqw;font-weight:800;line-height:1.5}
.wm-say::after{content:'';position:absolute;left:-1.9cqw;bottom:1.6cqw;border:1cqw solid transparent;border-right-color:#3a4a78}
.wm-say b{display:block;color:#f06a13}
.wm-cards{position:absolute;left:4%;right:4%;bottom:3.5%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw 3cqw;z-index:2}
html[data-ui] body .wm .wm-card{position:relative;display:grid;gap:.4cqw;padding:1.1cqw 1.1cqw 1.3cqw!important;border:0!important;border-radius:.8cqw!important;background:#fffdf5!important;box-shadow:0 .8cqw 1.6cqw #0003!important;color:#3d2410!important;text-align:left;rotate:var(--tilt);transition:rotate .2s,transform .2s;cursor:pointer;min-height:0!important;font:inherit}
html[data-ui] body .wm .wm-card:hover,html[data-ui] body .wm .wm-card:focus-visible{rotate:0deg;transform:translateY(-.8cqw) scale(1.03);outline:none}
.wm-card-pic{display:block;aspect-ratio:16/8;overflow:hidden;border-radius:.5cqw;border:.3cqw solid #e2c894;background:#9fdcf2}
.wm-card-pic img,.wm-card-pic svg{display:block;width:100%;height:100%;object-fit:cover}
.wm-card strong{font-size:2.3cqw;line-height:1.2}
.wm-card small{font-size:1.4cqw;color:#8c5a2b;font-weight:800}
.wm-stamp{position:absolute;right:.2cqw;top:-.8cqw;display:grid;place-items:center;width:6.4cqw;height:6.4cqw;border:.3cqw dashed #e2332b;border-radius:50%;background:#fff5f2;color:#e2332b;font-size:1.3cqw;font-weight:900;line-height:1;rotate:12deg}
.wm-stamp small{color:inherit!important;font-size:1.1cqw!important}