/* 第 14 輪 F 線：打怪區（HUD、HP 條、傷害數字、預警演出、面板）＋異色（彩虹閃光、全服跑馬燈） */
#huntLayer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 4; }
.hm { position: absolute; left: 0; top: 0; width: 74px; will-change: transform; text-align: center; font-family: inherit; }
.hm .hm-n { display: block; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; white-space: nowrap; margin-bottom: 1px; }
.hm i { display: block; height: 7px; border-radius: 5px; background: rgba(20, 16, 36, .75); border: 1px solid rgba(255, 255, 255, .7); overflow: hidden; }
.hm i b { display: block; height: 100%; width: 100%; background: linear-gradient(#ff7a7a, #e23b3b); transition: width .12s linear; }
.hm.elite { width: 104px; } .hm.elite .hm-n { font-size: 12px; color: #ffe27a; } .hm.elite i { height: 9px; }
.hm.boss { width: 150px; } .hm.boss .hm-n { font-size: 13px; color: #ffb36b; } .hm.boss i { height: 11px; } .hm.boss i b { background: linear-gradient(#c07aff, #7a3adf); }
.hm.shiny .hm-n { background: linear-gradient(90deg, #ff6b9a, #ffd24a, #6bffb0, #6bb8ff, #c06bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 1px #000); animation: huHue 2.4s linear infinite; }
.hm.hit i { border-color: #fff; box-shadow: 0 0 6px #fff; }
@keyframes huHue { to { filter: drop-shadow(0 1px 1px #000) hue-rotate(360deg); } }
.hd { position: absolute; left: 0; top: 0; font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 2px 0 #7a1f1f, 0 0 4px #000, 1px 1px 0 #000, -1px -1px 0 #000; will-change: transform; white-space: nowrap; }
.hd.crit { font-size: 30px; color: #ffe23a; text-shadow: 0 3px 0 #b34a00, 0 0 8px #ff8a00, 1px 1px 0 #000, -1px -1px 0 #000; }
.hd.hurt { color: #ff5a5a; font-size: 26px; text-shadow: 0 2px 0 #3a0000, 0 0 5px #000; }
.hd.exp { color: #9ae6ff; font-size: 17px; } .hd.coin { color: #ffd24a; font-size: 17px; } .hd.mat { color: #c8e0ff; font-size: 15px; }
.hd.gear { color: #ff9ad0; font-size: 18px; } .hd.first { color: #9dff9d; font-size: 15px; }
body.touch .hd { font-size: 17px; } body.touch .hd.crit { font-size: 25px; } body.touch .hd.hurt { font-size: 22px; }

#huntHud { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); z-index: 5; pointer-events: none; padding: 7px 10px 6px; border-radius: 14px; background: rgba(28, 22, 52, .78); color: #fff; border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(2px); }
#huntHud[hidden] { display: none; }
#huntHud .hh-zone { font-size: 12px; font-weight: 800; opacity: .92; text-align: center; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#huntHud .hh-row { display: flex; align-items: center; gap: 8px; }
#huntHud .hh-lv { flex: none; font-size: 16px; font-weight: 900; color: #ffe27a; min-width: 52px; }
#huntHud .hh-bars { flex: 1; display: flex; flex-direction: column; gap: 3px; }
#huntHud .hh-hp, #huntHud .hh-exp { position: relative; height: 15px; border-radius: 8px; background: rgba(0, 0, 0, .5); overflow: hidden; }
#huntHud .hh-exp { height: 10px; }
#huntHud .hh-hp i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#7aff9a, #28b85a); transition: width .15s linear; }
#huntHud .hh-hp.low i { background: linear-gradient(#ff8a8a, #e23b3b); }
#huntHud .hh-exp i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#9ae6ff, #3a9be0); transition: width .3s; }
#huntHud em { position: absolute; inset: 0; font-style: normal; font-size: 11px; font-weight: 800; line-height: 15px; text-align: center; text-shadow: 0 1px 2px #000; }
#huntHud .hh-exp em { font-size: 9px; line-height: 10px; }
#huntHud .hh-sub { display: flex; justify-content: space-between; font-size: 11px; opacity: .9; margin-top: 4px; }
#huntHud .hh-weak { color: #ff9a9a; font-weight: 800; }
body.touch #huntHud, body.mui #huntHud { left: 98px; right: 8px; bottom: auto; top: calc(48px + env(safe-area-inset-top)); transform: none; width: auto; padding: 4px 8px; border-radius: 12px; }
body.mui #huntHud .hh-zone { font-size: 10px; margin-bottom: 2px; text-align: left; }
body.mui #huntHud .hh-lv { font-size: 13px; min-width: 40px; }
body.mui #huntHud .hh-sub { display: none; }
body.mui #huntHud .hh-hp { height: 13px; } body.mui #huntHud .hh-hp em { line-height: 13px; font-size: 10px; }

#huntVign { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; box-shadow: inset 0 0 120px 30px rgba(255, 30, 30, .75); }
#huntVign.hit { animation: huVig .5s ease-out; }
@keyframes huVig { 0% { opacity: 1; } 100% { opacity: 0; } }
#huntBanner { position: fixed; left: 50%; top: 24%; transform: translateX(-50%); z-index: 7; pointer-events: none; text-align: center; color: #fff; text-shadow: 0 2px 6px #000; animation: huPop .45s cubic-bezier(.2, 1.6, .4, 1); }
#huntBanner[hidden] { display: none; }
#huntBanner b { display: block; font-size: 34px; font-weight: 900; letter-spacing: 2px; } #huntBanner span { display: block; font-size: 16px; font-weight: 800; margin-top: 2px; }
#huntBanner.lvup b { color: #ffe23a; font-size: 44px; -webkit-text-stroke: 2px #b34a00; } #huntBanner.elite b, #huntBanner.boss b { color: #ff8a6a; } #huntBanner.weak b { color: #ff9a9a; font-size: 22px; }
#huntBanner.gear b { color: #ffb0e0; font-size: 26px; }
#huntBanner.shiny b { font-size: 30px; background: linear-gradient(90deg, #ff6b9a, #ffd24a, #6bffb0, #6bb8ff, #c06bff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px #000); animation: huHue 2s linear infinite; }
body.touch #huntBanner b { font-size: 24px; } body.touch #huntBanner.lvup b { font-size: 32px; }
@keyframes huPop { 0% { transform: translateX(-50%) scale(.3); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* 異色：整個畫面邊框彩虹閃光＋全服跑馬燈 */
#shinyFlash { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0; box-shadow: inset 0 0 90px 24px #ff6b9a, inset 0 0 160px 50px #6bb8ff; }
#shinyFlash.go { animation: shFlash 1.6s ease-out; }
@keyframes shFlash { 0% { opacity: 0; filter: hue-rotate(0); } 12% { opacity: .95; } 100% { opacity: 0; filter: hue-rotate(360deg); } }
#shinyTicker { position: fixed; left: 50%; top: calc(90px + env(safe-area-inset-top)); transform: translateX(-50%); width: min(820px, calc(100vw - 24px)); height: 32px; z-index: 31; display: flex; align-items: center; border-radius: 999px; overflow: hidden; pointer-events: none; background: linear-gradient(90deg, #ff4f8a, #ffb02e, #35c98a, #3a8fe0, #9a4fe0, #ff4f8a); background-size: 200% 100%; animation: shBg 3s linear infinite; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .85); }
#shinyTicker[hidden] { display: none; }
#shinyTicker .st-ic { flex: none; font-size: 18px; padding: 0 8px; background: rgba(0, 0, 0, .25); height: 100%; display: flex; align-items: center; }
#shinyTicker .st-track { flex: 1; min-width: 0; height: 100%; position: relative; overflow: hidden; }
#shinyTicker .st-text { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); will-change: transform; }
#shinyTicker.mine { border-color: #fff36a; }
@keyframes shBg { to { background-position: 200% 0; } }
body.touch #shinyTicker { top: calc(22px + env(safe-area-inset-top)); height: 26px; width: calc(100vw - 12px); } body.touch #shinyTicker .st-text { font-size: 12px; }

/* 面板 */
.hu-win .gw-body { max-width: 760px; }
.hu-tabs { position: sticky; top: -2px; z-index: 2; background: var(--card, #fff); padding: 4px 0; }
.hu-tabs button { padding: 6px 12px; font-size: 14px; min-height: 36px; }
.hu-card { background: linear-gradient(135deg, #3a2f78, #5a3fa0); color: #fff; border-radius: 16px; padding: 14px; }
.hu-lv { display: flex; align-items: baseline; gap: 8px; } .hu-lv b { font-size: 30px; color: #ffe27a; } .hu-lv em { font-style: normal; font-weight: 900; background: #ffd24a; color: #5a3a00; padding: 1px 8px; border-radius: 9px; font-size: 12px; }
.hu-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(0, 0, 0, .35); overflow: hidden; margin: 8px 0; } .hu-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#9ae6ff, #3a9be0); } .hu-bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 800; line-height: 18px; text-shadow: 0 1px 2px #000; color: #fff; }
.hu-bar.sm { height: 12px; margin: 4px 0 0; background: rgba(0, 0, 0, .15); } .hu-bar.sm span { line-height: 12px; font-size: 10px; }
.hu-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .hu-stats div { background: rgba(255, 255, 255, .14); border-radius: 12px; padding: 8px 12px; } .hu-stats small { display: block; opacity: .85; font-size: 12px; } .hu-stats b { font-size: 24px; } .hu-stats em { font-style: normal; color: #9dff9d; font-size: 13px; margin-left: 6px; font-weight: 800; }
.hu-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; } .hu-mini { background: #f4f0ff; border-radius: 12px; padding: 8px 10px; text-align: center; } .hu-mini small { display: block; font-size: 12px; opacity: .75; } .hu-mini b { font-size: 18px; }
.hu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.hu-it { position: relative; background: #fff; border: 2px solid var(--rc, #ccc); border-radius: 12px; padding: 8px 6px; text-align: center; font-size: 13px; }
.hu-it .ic { font-size: 28px; line-height: 1.2; display: block; } .hu-it b { display: block; font-size: 14px; } .hu-it small { display: block; opacity: .75; font-size: 12px; } .hu-it.lock { opacity: .5; filter: grayscale(1); } .hu-it.on { box-shadow: 0 0 0 3px #ffd24a inset; }
.hu-it .gw-btn { margin-top: 4px; min-height: 36px; } .hu-it .sh { position: absolute; top: 2px; right: 4px; font-style: normal; }
.hu-it.shiny { border-image: linear-gradient(135deg, #ff6b9a, #ffd24a, #6bffb0, #6bb8ff, #c06bff) 1; border-width: 3px; }
.hu-zones { display: grid; gap: 8px; } .hu-zone { border-left: 8px solid var(--zc); background: #fff; border-radius: 10px; padding: 8px 12px; } .hu-zone.here { box-shadow: 0 0 0 2px #ffd24a; } .hu-zone .zh { display: flex; justify-content: space-between; align-items: center; } .hu-zone .zh em { font-style: normal; background: #ffd24a; color: #5a3a00; font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: 9px; }
.hu-zone .zs { font-size: 13px; opacity: .85; } .hu-zone .zs.warn { color: #b02a2a; } .hu-zone .zm { font-size: 22px; margin-top: 2px; letter-spacing: 2px; }
.hu-ach { display: grid; gap: 6px; } .hu-a { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 8px 10px; opacity: .8; } .hu-a.got { opacity: 1; background: #fff8e0; } .hu-a span { font-size: 22px; } .hu-a > div { flex: 1; min-width: 0; } .hu-a b { display: block; font-size: 14px; } .hu-a small { display: block; font-size: 12px; opacity: .8; } .hu-a em { font-style: normal; font-size: 12px; font-weight: 900; color: #2a8a4a; }
#btnHunt { font-weight: 800; }