/* 第 13 輪：館外世界（點歌、抓蟲、釣魚、圖鑑、成就、收購小攤） */
#wnotes { position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(92vw, 460px); }
#wnotes .wn { background: rgba(40, 30, 70, .92); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; box-shadow: 0 3px 12px rgba(0, 0, 0, .25); animation: wnIn .3s ease-out; text-align: center; max-width: 100%; }
#wnotes .wn.jb { background: linear-gradient(90deg, #8a3fb8, #e0509a); }
#wnotes .wn.ach { background: linear-gradient(90deg, #d9981a, #f2c14e); color: #3a2400; }
#wnotes .wn small { display: block; font-weight: 600; opacity: .9; }
@keyframes wnIn { from { opacity: 0; transform: translateY(-10px) scale(.95); } to { opacity: 1; transform: none; } }
/* 工具列／時機條 */
#wtool { position: fixed; left: 12px; bottom: 150px; z-index: 30; display: flex; flex-direction: column; gap: 6px; }
#wtool button { padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; background: #fff; border: 2px solid #4a3a5c; color: #4a3a5c; touch-action: manipulation; }
#wtool button.on { background: #4fb36a; color: #fff; border-color: #2d7a45; }
#wtool[hidden], #wbar[hidden], #wcard[hidden], #wfish[hidden] { display: none; }
#wbar { position: fixed; left: 50%; bottom: 200px; transform: translateX(-50%); z-index: 45; width: min(86vw, 420px); background: rgba(30, 24, 56, .92); border-radius: 16px; padding: 12px 16px 14px; color: #fff; text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); touch-action: manipulation; }
#wbar b { display: block; margin-bottom: 8px; font-size: 15px; }
#wbar .track { position: relative; height: 26px; background: #55507a; border-radius: 13px; overflow: hidden; }
#wbar .zone { position: absolute; top: 0; bottom: 0; background: #4fe08a; opacity: .9; }
#wbar .mark { position: absolute; top: -2px; bottom: -2px; width: 6px; margin-left: -3px; background: #fff; border-radius: 3px; box-shadow: 0 0 8px #fff; }
#wbar button { margin-top: 10px; padding: 10px 34px; border-radius: 999px; font-weight: 900; font-size: 18px; background: #ffd23a; color: #3a2400; border: 0; touch-action: manipulation; }
#wfish { position: fixed; left: 50%; bottom: 210px; transform: translateX(-50%); z-index: 45; text-align: center; color: #fff; }
#wfish .msg { background: rgba(30, 24, 56, .9); padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 15px; display: inline-block; }
#wfish .msg.hit { background: #e0402f; font-size: 22px; animation: wPulse .35s infinite alternate; }
#wfish button { display: block; margin: 10px auto 0; padding: 14px 40px; border-radius: 999px; font-weight: 900; font-size: 20px; background: #ffd23a; color: #3a2400; border: 0; touch-action: manipulation; }
@keyframes wPulse { to { transform: scale(1.08); } }
#wcard { position: fixed; left: 50%; bottom: 210px; transform: translateX(-50%); z-index: 46; background: #fffaf0; color: #4a3a5c; padding: 12px 22px; border-radius: 18px; border: 3px solid var(--rc, #4fb36a); text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); animation: wnIn .3s ease-out; min-width: 220px; }
#wcard b { font-size: 20px; display: block; } #wcard small { display: block; margin-top: 3px; font-weight: 700; }
#wcard .rar { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--rc, #4fb36a); color: #fff; font-size: 12px; font-weight: 800; margin-bottom: 4px; }
#wcard .new { color: #e0402f; font-weight: 900; }
/* 點歌視窗 */
.jb-win { display: flex; flex-direction: column; gap: 8px; }
.jb-now { background: linear-gradient(90deg, #f3e1ff, #ffe0ef); border-radius: 12px; padding: 8px 12px; } .jb-now b { display: block; } .jb-now small { opacity: .75; }
.jb-queue { margin: 0; padding: 0 0 0 4px; list-style: none; font-size: 14px; } .jb-queue small { opacity: .6; margin-left: 6px; }
.jb-lim { margin: 0; font-size: 13px; opacity: .85; } .jb-msg { margin: 0; min-height: 1.2em; font-weight: 800; color: #b03a6a; }
.jb-search { width: 100%; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; border: 2px solid #c9b8e8; font-size: 15px; }
.jb-list { list-style: none; margin: 0; padding: 0; max-height: 42vh; overflow: auto; }
.jb-list li { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #eee2f5; } .jb-list .t { flex: 1; font-weight: 700; font-size: 14px; } .jb-list small { opacity: .6; } .jb-list .dim { opacity: .6; justify-content: center; } .jb-list .more { justify-content: center; }
/* 收購小攤、收藏、圖鑑、成就 */
.st-line { background: #fff3d6; border-radius: 12px; padding: 8px 12px; font-weight: 700; margin-bottom: 8px; }
.st-cap { font-size: 13px; opacity: .85; margin: 4px 0 8px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.cl-item { background: #fff; border: 2px solid var(--rc, #ccc); border-radius: 12px; padding: 6px 8px; text-align: center; font-size: 13px; position: relative; }
.cl-item b { display: block; font-size: 14px; } .cl-item .ic { font-size: 26px; line-height: 1.2; } .cl-item.lock { opacity: .45; filter: grayscale(1); } .cl-item small { display: block; opacity: .75; }
.cl-item input { position: absolute; top: 4px; left: 4px; }
.ach-row { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 7px 10px; margin-bottom: 6px; border: 2px solid #eee; } .ach-row.got { border-color: #f2c14e; background: #fff8e2; } .ach-row .bar { height: 6px; background: #eee; border-radius: 3px; margin-top: 3px; overflow: hidden; } .ach-row .bar i { display: block; height: 100%; background: #4fb36a; }
.ach-row .r { margin-left: auto; text-align: right; font-size: 12px; white-space: nowrap; } .ach-row.pending { opacity: .6; }
.pf-dex { margin-top: 8px; font-size: 13px; font-weight: 700; display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 520px) { #wtool { bottom: 190px; } #wbar, #wfish, #wcard { bottom: 300px; left: 34%; max-width: 62vw; width: auto; } #wbar { width: 62vw; } #wnotes { top: 150px; } }

/* 第 14 輪 B 線：商人視窗、裝備分頁、快捷小鍵、珍稀／超稀有的樣式 */
.mc-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.mc-card { display: flex; gap: 10px; align-items: center; background: #fff; border: 2px solid #e8dcc0; border-radius: 14px; padding: 8px 10px; }
.mc-card.own { border-color: #4fb36a; background: #f2fbf4; }
.mc-card .ic { font-size: 30px; flex: 0 0 auto; }
.mc-card .tx { flex: 1; min-width: 0; } .mc-card .tx b { font-size: 15px; } .mc-card .tx p { margin: 2px 0 0; font-size: 12.5px; opacity: .85; line-height: 1.4; } .mc-card .tx small { display: block; opacity: .75; }
.mc-card .tier, .gr-row .tier { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #9b5de5; color: #fff; font-size: 11px; font-style: normal; font-weight: 800; }
.mc-card .mc-buy { flex: 0 0 auto; min-width: 92px; min-height: 44px; }
.gr-box, .gr-sec { background: #fff; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; border: 2px solid #eee; }
.gr-row { display: flex; justify-content: space-between; padding: 4px 0; } .gr-opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-height: 36px; }
.gr-sec > b { display: block; margin-bottom: 2px; }
#wgear { position: fixed; left: 12px; bottom: 196px; z-index: 30; }
#wgear[hidden] { display: none; }
#wgear button { padding: 8px 14px; min-height: 44px; border-radius: 999px; font-weight: 800; font-size: 13px; background: #fff; border: 2px solid #9b5de5; color: #4a3a5c; touch-action: manipulation; max-width: 70vw; }
#wgear button.on { background: #9b5de5; color: #fff; }
.cl-item.secret { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #b980f0) border-box; }
#wcard.secret { border-color: transparent; background: linear-gradient(#fffaf0, #fffaf0) padding-box, linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #b980f0) border-box; box-shadow: 0 0 24px rgba(255, 95, 162, .6); animation: wsecret 1.1s ease-in-out 3; }
#wcard.elite { box-shadow: 0 0 16px rgba(155, 93, 229, .55); }
@keyframes wsecret { 50% { transform: translateX(-50%) scale(1.07); } }
@media (max-width: 520px) { #wgear { bottom: 236px; } .mc-card { flex-wrap: wrap; } .mc-card .mc-buy { width: 100%; } }

.gw-shiny { font-style: normal; font-weight: 700; background: linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #b980f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-item.shiny { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #b980f0) border-box; }
.cl-item small.sh { color: #c0392b; font-weight: 700; }
#wcard.shiny { border-color: transparent; background: linear-gradient(#fffdf4, #fffdf4) padding-box, linear-gradient(90deg, #ff5f6d, #ffc371, #7bed9f, #70a1ff, #b980f0) border-box; box-shadow: 0 0 22px rgba(255, 200, 120, .7); }