/* ============ 新手引導（js/coach.js）：提示框、紅點、新手指南 ============ */
#cm{position:fixed;inset:0;z-index:60;pointer-events:none;display:none}
#cm.on{display:block}
#cm.lost{visibility:hidden}
#cm .cm-hole{position:fixed;box-shadow:0 0 0 200vmax rgba(8,6,24,.66);border:2.5px solid #ffe38a;border-radius:14px;pointer-events:none;animation:cmGlow 1.3s ease-in-out infinite}
#cm.ctr .cm-hole{border:0;animation:none}
#cm .cm-b{position:fixed;pointer-events:auto;background:transparent;display:block}
#cm .cm-bub{position:fixed;left:0;top:0;width:max-content;max-width:min(318px,calc(100vw - 20px));box-sizing:border-box;padding:10px 13px 9px;border-radius:14px;
  background:linear-gradient(180deg,#2b2152,#1b1433);border:2px solid #f6c95a;box-shadow:0 6px 22px rgba(0,0,0,.45);pointer-events:auto;color:#fff;animation:cmIn .22s ease-out}
#cm .cm-bub p{margin:0;font-size:14px;line-height:1.5;font-weight:800;letter-spacing:.2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#cm .cm-bub p b{color:#ffe38a}
#cm .cm-k{display:block;margin-top:4px;font-size:12px;font-weight:800;color:#bfe8ff}
#cm .cm-k:empty{display:none}
#cm kbd,.gpg kbd{display:inline-block;min-width:16px;padding:0 5px;margin:0 1px;border-radius:5px;background:#f4ead2;color:#3b2a45;font:900 11px/17px ui-rounded,system-ui,sans-serif;text-align:center;box-shadow:0 2px 0 #b59a6a}
#cm .cm-f{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:7px}
#cm .cm-f a{margin-right:auto;font-size:11.5px;font-weight:800;color:#b9b0d6;text-decoration:underline;cursor:pointer;padding:4px 2px}
#cm .cm-f .gb{height:30px;line-height:28px;font-size:12.5px;min-width:64px}
#cm .cm-f .gb.blue{min-width:52px}
#cm .cm-n{position:absolute;right:9px;top:-10px;font-size:10.5px;font-weight:900;color:#3b2a45;background:#ffe38a;border-radius:9px;padding:0 7px;line-height:17px}
#cm .cm-n:empty{display:none}
#cm .cm-arr{position:fixed;width:0;height:0;border:11px solid transparent;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
#cm .cm-arr[data-s=b]{border-bottom-color:#f6c95a;border-top-width:0;animation:cmBy 0.9s ease-in-out infinite}
#cm .cm-arr[data-s=t]{border-top-color:#f6c95a;border-bottom-width:0;animation:cmBy 0.9s ease-in-out infinite reverse}
#cm .cm-arr[data-s=r]{border-right-color:#f6c95a;border-left-width:0;animation:cmBx 0.9s ease-in-out infinite}
#cm .cm-arr[data-s=l]{border-left-color:#f6c95a;border-right-width:0;animation:cmBx 0.9s ease-in-out infinite reverse}
#cm .cm-arr[data-s=n]{display:none}
@keyframes cmGlow{0%,100%{box-shadow:0 0 0 200vmax rgba(8,6,24,.66),0 0 6px 2px rgba(255,227,138,.6)}50%{box-shadow:0 0 0 200vmax rgba(8,6,24,.66),0 0 16px 6px rgba(255,227,138,.95)}}
@keyframes cmBy{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes cmBx{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes cmIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
html.pc #cm .cm-bub{max-width:380px;padding:12px 15px 10px}
html.pc #cm .cm-bub p{font-size:15.5px}
html.pc #cm .cm-k{font-size:13px}
html.pc #cm .cm-f .gb{height:34px;line-height:32px;font-size:13.5px}
/* 紅點：引導系統自己的（背包有更好的裝備、背包快滿） */
.dot.cmx{z-index:3}
/* 新手指南面板 */
.gpg .gpi{display:flex;align-items:center;gap:10px;cursor:pointer}
.gpg .gpi>i{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#ffe38a,#f0a838);color:#5a3300;font:900 14px/30px ui-rounded,system-ui,sans-serif;text-align:center;font-style:normal;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.gpg .gpi>em{font-style:normal;font-size:18px;color:#b08a5a;margin-left:auto}
.gpg ul.gpl{margin:6px 0 8px;padding-left:18px}
.gpg ul.gpl li{margin:5px 0;line-height:1.5;font-size:13px}
.gpg ul.gpl li b{color:#b0642a}
.gpg .gpb{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
html.pc .gpg ul.gpl li{font-size:14px}
