.topbar{position:fixed;z-index:80;left:50%;top:14px;transform:translateX(-50%);width:min(1180px,calc(100% - 28px));height:68px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:8px 10px 8px 18px;color:#284f60;background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:999px;box-shadow:0 12px 32px rgba(42,139,173,.17);backdrop-filter:blur(16px);font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif}
.topbar .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:#284f60}
.topbar .brand img{display:block;width:46px;height:46px;object-fit:contain;border:0;border-radius:0;background:none}
.topbar .brand b{display:block;line-height:1;font-size:1rem}
.topbar .brand small{display:block;color:#d98268;font-size:.7rem;font-weight:900;letter-spacing:.08em}
.topbar .nav{display:flex;justify-content:center;align-items:center;gap:clamp(10px,2vw,26px)}
.topbar .nav>a{text-decoration:none;color:#38697e;font-size:.85rem;font-weight:900;white-space:nowrap}
.topbar .nav>a:hover{color:#d98268}
.topbar .nav-group{position:relative}
.topbar .nav-parent{background:none;border:0;padding:0;font-family:inherit;font-size:.85rem;font-weight:900;color:#38697e;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.topbar .nav-parent i{font-style:normal;font-size:.7em;opacity:.8}
.topbar .nav-sub{display:none;position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);min-width:200px;padding:10px;border-radius:16px;background:#fff;box-shadow:0 18px 44px rgba(73,126,139,.13);border:1px solid #dce9e9;z-index:90}
.topbar .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.topbar .nav-group:hover .nav-sub,.topbar .nav-group.open .nav-sub{display:grid}
.topbar .nav-sub a{display:block;padding:8px 14px;border-radius:10px;color:#38697e;font-size:.86rem;font-weight:800;white-space:nowrap;text-decoration:none}
.topbar .nav-sub a:hover{background:#f5fafb;color:#d98268}
.topbar .nav-sub a[aria-current=page]{color:#5c4330;background:linear-gradient(180deg,#f7e9c8,#efdcae)}
.topbar .nav-group.here>.nav-parent{color:#d98268}
.topbar .nav-actions{display:flex;gap:8px;align-items:center}
.topbar .nav-actions .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 19px;border:0;border-radius:999px;text-decoration:none;font-weight:1000;cursor:pointer;color:#5c4330;background:linear-gradient(180deg,#f3dda9,#e9c477);box-shadow:0 5px 0 #c99f5d;font-size:.95rem}
.topbar .nav-toggle{display:none;width:44px;height:44px;border:0;border-radius:50%;color:#fff;background:#477f91;font-size:1.2rem;cursor:pointer;font-family:inherit}
.topbar .nav>a[aria-current=page]{color:#d98268}
/* 頁首是固定的，內容要讓開。用 body 的內距而不是占位方塊：register/reset 的 body 是
   display:flex 置中的版型，占位方塊在那裡會變成卡片旁邊的一欄，卡片照樣被壓在頁首底下。 */
body.has-sitehead{padding-top:96px;align-items:flex-start}
/* register/reset 那兩頁的「← 回首頁」是 position:fixed 釘在左上角的，會被頁首蓋住半個字；
   頁首左邊的吉祥物本來就連回首頁 ⇒ 那兩頁（a.home 是 body 的直接子節點）不再顯示它。
   download/android 的 .home 在 .wrap 裡面、是一般的行內連結，不受影響。 */
body.has-sitehead>a.home{display:none}
.sitehead-spacer{display:none}
@media(max-width:900px){
.topbar .nav{display:none;position:absolute;top:74px;left:0;right:0;padding:16px 18px;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-radius:22px;box-shadow:0 18px 44px rgba(73,126,139,.13)}
.topbar .nav.open{display:flex}
.topbar .nav>a{padding:10px 0;border-bottom:1px solid #dce9e9}
.topbar .nav-group{width:100%;border-bottom:1px solid #dce9e9}
.topbar .nav-parent{width:100%;justify-content:space-between;padding:10px 0}
.topbar .nav-sub{position:static;transform:none;display:none;min-width:0;padding:2px 0 8px 14px;border:0;box-shadow:none;background:transparent}
.topbar .nav-group:hover .nav-sub{display:none}
.topbar .nav-group.open .nav-sub{display:grid}
.topbar .nav-toggle{display:block}
.topbar .nav-actions .btn{display:none}
body.has-sitehead{padding-top:92px}
}
@media(max-width:620px){.topbar .brand span{display:none}}

*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:#284f60;background:linear-gradient(180deg,#f3fafc 0,#fbfdfd 42%,#f4faf7 100%);font-family:"Microsoft JhengHei","Noto Sans TC",sans-serif;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit}button,a{font:inherit}
.wrap{width:min(1240px,100%);margin:auto;padding-inline:clamp(18px,4vw,50px)}
main{padding-bottom:40px}
.crumb{margin:0 0 10px;color:#6b7f87;font-size:.86rem}.crumb a{font-weight:900;text-decoration:none;color:#38697e}
h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0 0 6px;letter-spacing:-.01em}
.sub{margin:0 0 20px;color:#6b7f87;font-size:.95rem;font-weight:800}
h2{font-size:1.2rem;margin:26px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2 .count{color:#6b7f87;font-size:.85rem;font-weight:800}
.searchbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.searchbar input{flex:1 1 320px;min-width:0;min-height:52px;padding:10px 18px;border:2px solid #cfe4e9;border-radius:16px;background:#fff;color:#284f60;font-family:inherit;font-size:1rem}
.searchbar input::placeholder{color:#9db4bc}
.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 19px;border:0;border-radius:999px;text-decoration:none;font-weight:1000;cursor:pointer}
.btn-primary{color:#5c4330;background:linear-gradient(180deg,#f3dda9,#e9c477);box-shadow:0 5px 0 #c99f5d}
.btn-white{color:#477f91;background:#fff;box-shadow:0 4px 0 #cfe3e8}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabs button{min-height:46px;padding:8px 20px;border:2px solid #cfe4e9;border-radius:999px;background:#fff;color:#38697e;font-family:inherit;font-weight:1000;font-size:.95rem;cursor:pointer}
.tabs button[aria-selected=true]{color:#5c4330;background:linear-gradient(180deg,#f3dda9,#e9c477);border-color:#e3c68c;box-shadow:0 4px 0 #c99f5d}
.panel[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips button{min-height:40px;padding:6px 16px;border:2px solid #dce9e9;border-radius:999px;background:#fff;color:#5b7b88;font-family:inherit;font-weight:900;font-size:.86rem;cursor:pointer}
.chips button[aria-pressed=true]{color:#fff;background:#477f91;border-color:#477f91}
.areagrid{columns:3 330px;column-gap:12px}
.area{break-inside:avoid;margin:0 0 12px;border:2px solid #e2eef0;border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(73,126,139,.13);overflow:hidden}
.area>summary{padding:15px 18px;font-weight:1000;cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;list-style:none}
.area>summary::-webkit-details-marker{display:none}
.area>summary small{color:#6b7f87;font-weight:800;font-size:.8rem}
.maps{padding:0 18px 14px}
.mapblock{padding:11px 0;border-top:1px solid #dce9e9}
.mapblock h4{margin:0 0 7px;font-size:.92rem;color:#38697e}
.mapblock h4 em{font-style:normal;color:#6b7f87;font-weight:800;font-size:.82rem}
.chiplist{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px 4px 5px;border:1px solid #d5e7ea;border-radius:999px;background:#f8fdfe;font-size:.84rem;font-weight:900;text-decoration:none}
.chip img{width:24px;height:24px;object-fit:contain;image-rendering:pixelated}
.chip.plain{padding:4px 11px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:11px}
.card{display:flex;align-items:center;gap:11px;padding:11px 13px;border:2px solid #e2eef0;border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(73,126,139,.13);text-decoration:none}
.card b{display:block;font-size:.98rem;line-height:1.35;overflow-wrap:anywhere}.card small{display:block;color:#6b7f87;font-size:.79rem;font-weight:800}
.card>span{min-width:0}
.ico{flex:0 0 50px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border:1px solid #dce9e9;border-radius:12px;background:#f8fdfe;overflow:hidden;text-align:center}
.ico img{max-width:46px;max-height:46px;object-fit:contain;image-rendering:pixelated}
.ico.coin{color:#a58037;background:linear-gradient(180deg,#fbf0d4,#f3e0b0);font-size:.72rem;font-weight:1000}
.ico.none{color:#9fb8bf;font-size:.66rem;font-weight:900;line-height:1.2}
.mobhead{display:flex;flex-wrap:wrap;align-items:center;gap:20px;padding:22px;margin:0 0 6px;border:2px solid #e2eef0;border-radius:26px;background:#fff;box-shadow:0 18px 44px rgba(73,126,139,.13)}
.mobhead .portrait{flex:0 0 136px;width:136px;min-height:136px;display:flex;align-items:center;justify-content:center;border:1px solid #dce9e9;border-radius:20px;background:#f8fdfe;color:#9fb8bf;font-size:.8rem;font-weight:900}
.mobhead .portrait img{max-width:126px;max-height:180px;object-fit:contain;image-rendering:pixelated}
.mobhead h1{margin:0}
/* #460⑥ 標籤【整顆不可被拆行】：擁有者看到卡片把「首領」兩個字切成兩行。
   inline-block＋nowrap ⇒ 名字太長時換行點只會落在名字裡，標籤整顆跟著走。 */
.badge{display:inline-block;white-space:nowrap;margin-left:10px;padding:3px 11px;border-radius:999px;background:#d98268;color:#fff;font-size:.72rem;font-weight:1000;vertical-align:middle}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.facts li{padding:5px 13px;border:1px solid #cfe4e9;border-radius:999px;background:#f8fdfe;font-size:.87rem;font-weight:900}
.dropgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:10px}
.drop{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #dce9e9;border-radius:15px;background:#fff}
.drop b{display:block;font-size:.94rem;line-height:1.35}
.drop small{display:block;color:#6b7f87;font-size:.78rem;font-weight:800}
.drop.q{border-color:#e6cf9a;background:linear-gradient(180deg,#fffaef,#fff)}
.tagq{display:inline-block;white-space:nowrap;margin-left:6px;padding:1px 8px;border-radius:999px;background:#e9c982;color:#5c4330;font-size:.68rem;font-weight:1000;vertical-align:1px}
.drop b,.mobrow b,.mobhead h1,.itemhead h1{overflow-wrap:anywhere}
.mobrow{display:grid;grid-template-columns:56px 1fr auto;gap:13px;align-items:center;padding:12px 15px;border:2px solid #e2eef0;border-radius:18px;background:#fff;box-shadow:0 18px 44px rgba(73,126,139,.13);margin-bottom:9px;text-decoration:none}
.mobrow .ico{flex:none;width:56px;height:56px}
.mobrow b{display:block;font-size:1rem}
.mobrow .where{display:block;color:#6b7f87;font-size:.82rem;font-weight:800}
.mobrow .lv{padding:4px 12px;border:1px solid #cfe4e9;border-radius:999px;background:#f8fdfe;font-size:.84rem;font-weight:1000;white-space:nowrap}
.itemhead{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:20px 22px;margin-bottom:6px;border:2px solid #e2eef0;border-radius:26px;background:#fff;box-shadow:0 18px 44px rgba(73,126,139,.13)}
.itemhead .ico{flex:0 0 84px;width:84px;height:84px;border-radius:18px}
.itemhead .ico img{max-width:64px;max-height:64px}
.itemhead h1{font-size:clamp(1.3rem,3vw,1.9rem)}
.more{margin-top:14px;text-align:center}
.empty{padding:18px;border:2px dashed #c5d9dd;border-radius:18px;color:#6b7f87;background:#fff}
.hide{display:none}
footer{margin-top:40px;padding:30px 0;color:#e2f0f3;background:#477f91}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center;font-weight:800;font-size:.9rem}
.foot a{font-weight:900;text-decoration:none}
@media(max-width:900px){
 .areagrid{columns:1}
 .cards{grid-template-columns:1fr 1fr}
 .dropgrid{grid-template-columns:1fr}
 .mobhead .portrait{flex:0 0 108px;width:108px;min-height:108px}
 .mobrow{grid-template-columns:48px 1fr;row-gap:6px}
 .mobrow .ico{width:48px;height:48px}
 .mobrow .lv{grid-column:2;justify-self:start}
}
@media(max-width:430px){.cards{grid-template-columns:1fr}}