/* v80: 吉祥物兔兔 — empty states, speech bubbles, corner guide */
:root{--mascot-ink:#4b3a35;--mascot-paper:#f6f2ff;--mascot-text:#2d2540;--mascot-accent:#8f7fb8;--mascot-accent-2:#b9a8e6}

/* ── empty states ── */
.mascot-empty{display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:center!important;gap:6px!important;text-align:left!important}
.mascot-empty.is-left{flex-direction:row!important}
.mascot-empty::before{display:none!important}
.mascot-empty .crystal-empty-gem,.mascot-empty .wi-empty-gem,#empty.mascot-empty>.mascot-bubble>span[aria-hidden]:first-child{display:none!important}
.mascot-pic{flex:none;width:118px;height:auto;cursor:pointer;user-select:none;-webkit-user-drag:none;transform-origin:50% 100%;animation:mascot-in .6s cubic-bezier(.2,1.5,.4,1) both,mascot-breathe 3.4s ease-in-out .6s infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.mascot-bubble{position:relative;max-width:min(420px,100%);margin-bottom:44px;padding:14px 18px;border:2.5px solid var(--mascot-ink);border-radius:20px;background:var(--mascot-paper);color:var(--mascot-text);font-size:15px;line-height:1.65;box-shadow:0 8px 22px rgba(0,0,0,.28);transform-origin:0 100%;animation:mascot-pop .45s cubic-bezier(.2,1.6,.4,1) .22s both}
.mascot-empty.is-left .mascot-bubble{transform-origin:100% 100%}
.mascot-bubble::before,.mascot-bubble::after{content:'';position:absolute;bottom:14px;width:0;height:0;border-style:solid}
.mascot-empty.is-right .mascot-bubble::before{left:-15px;border-width:9px 15px 9px 0;border-color:transparent var(--mascot-ink) transparent transparent}
.mascot-empty.is-right .mascot-bubble::after{left:-10px;bottom:16px;border-width:7px 11px 7px 0;border-color:transparent var(--mascot-paper) transparent transparent}
.mascot-empty.is-left .mascot-bubble::before{right:-15px;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--mascot-ink)}
.mascot-empty.is-left .mascot-bubble::after{right:-10px;bottom:16px;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--mascot-paper)}
.mascot-bubble h2,.mascot-bubble h3,.mascot-bubble strong{color:#3d2f5c!important;margin:0 0 4px!important;font-size:17px!important}
.mascot-bubble p{color:var(--mascot-text)!important;margin:0 0 8px!important;max-width:none!important;font-size:14px!important}
.mascot-bubble p:last-child{margin-bottom:0!important}
.mascot-bubble a:not([class]){color:#5b3fa8!important;text-decoration:underline}
.mascot-bubble button,.mascot-bubble .cp-btn,.mascot-bubble .wd-btn,.mascot-bubble .ca-btn,.mascot-bubble [class*=button]{margin-top:6px}
.mascot-bubble .ca-empty-actions{justify-content:flex-start!important}
.mascot-compact{gap:2px!important}
.mascot-compact .mascot-pic{width:72px}
.mascot-compact .mascot-bubble{margin-bottom:26px;padding:10px 13px;font-size:13.5px;border-radius:16px}
@media (max-width:520px){.mascot-pic{width:84px}.mascot-bubble{margin-bottom:30px;padding:11px 14px;font-size:14px}}
.mascot-pic.is-hop,.mascot-guide-bunny.is-hop{animation:mascot-hop .55s cubic-bezier(.3,1.4,.5,1)!important}
.mascot-spark{position:absolute;top:10%;pointer-events:none;color:#c9b4ff;font-size:20px;text-shadow:0 0 8px rgba(201,180,255,.8);animation:mascot-spark .9s ease-out forwards}
.mascot-empty{position:relative}

/* ── corner guide ── */
.mascot-guide{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:14px;z-index:9400;display:flex;align-items:flex-end;gap:4px;max-width:min(470px,calc(100vw - 24px));pointer-events:none;animation:mascot-slide .5s cubic-bezier(.2,1.3,.4,1) both}
.mascot-guide[hidden]{display:none}
.mascot-guide.is-right{left:auto;right:max(12px,env(safe-area-inset-right));flex-direction:row-reverse}
.mascot-guide.is-out{animation:mascot-out .26s ease-in forwards}
.mascot-guide-bunny{flex:none;width:112px;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform-origin:50% 100%;animation:mascot-breathe 3.4s ease-in-out infinite}
.mascot-guide-bunny:focus-visible{outline:2px solid var(--mascot-accent-2);outline-offset:4px;border-radius:12px}
.mascot-guide-pic{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));-webkit-user-drag:none}
.mascot-guide-pic.is-l,.mascot-guide.is-right .mascot-guide-pic.is-r{display:none}
.mascot-guide.is-right .mascot-guide-pic.is-l{display:block}
.mascot-guide-bubble{position:relative;margin-bottom:52px;padding:14px 18px 12px;border:2.5px solid var(--mascot-ink);border-radius:20px;background:var(--mascot-paper);color:var(--mascot-text);box-shadow:0 12px 30px rgba(0,0,0,.4);pointer-events:auto;transform-origin:0 100%}
.mascot-guide.is-right .mascot-guide-bubble{transform-origin:100% 100%}
.mascot-guide-bubble.is-pop{animation:mascot-pop .42s cubic-bezier(.2,1.6,.4,1) both}
.mascot-guide-bubble::before,.mascot-guide-bubble::after{content:'';position:absolute;bottom:16px;border-style:solid;width:0;height:0}
.mascot-guide-bubble::before{left:-15px;border-width:9px 15px 9px 0;border-color:transparent var(--mascot-ink) transparent transparent}
.mascot-guide-bubble::after{left:-10px;bottom:18px;border-width:7px 11px 7px 0;border-color:transparent var(--mascot-paper) transparent transparent}
.mascot-guide.is-right .mascot-guide-bubble::before{left:auto;right:-15px;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--mascot-ink)}
.mascot-guide.is-right .mascot-guide-bubble::after{left:auto;right:-10px;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--mascot-paper)}
.mascot-guide-text{margin:0 18px 0 0;font-size:15px;line-height:1.7;color:var(--mascot-text)}
.mascot-guide-x{position:absolute;top:4px;right:6px;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:#7b6a95;font-size:20px;line-height:1;cursor:pointer}
.mascot-guide-x:hover{background:#e6ddfa}
.mascot-guide-dots{display:flex;gap:5px;margin:9px 0 0}
.mascot-guide-dots:empty{display:none}
.mascot-guide-dots i{width:7px;height:7px;border-radius:50%;background:#d3c8ea;transition:background .2s,transform .2s}
.mascot-guide-dots i.is-on{background:var(--mascot-accent);transform:scale(1.3)}
.mascot-guide-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mascot-guide-actions:empty{display:none}
.mascot-btn{min-height:34px;padding:0 14px;border:2px solid var(--mascot-ink);border-radius:999px;background:#fff;color:var(--mascot-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s,background .15s}
.mascot-btn:hover{transform:translateY(-1px);background:#efe8ff}
.mascot-btn.is-primary{background:var(--mascot-accent);color:#fff}
.mascot-btn.is-primary:hover{background:#7d6ca8}
.mascot-btn.is-quiet{border-color:transparent;background:none;color:#7b6a95;font-weight:400}
.mascot-btn:focus-visible{outline:2px solid #5b3fa8;outline-offset:2px}
.mascot-ring{position:fixed;z-index:9300;pointer-events:none;border:3px solid #b9a8e6;border-radius:14px;box-shadow:0 0 0 4px rgba(185,168,230,.25),0 0 26px rgba(185,168,230,.55);transition:left .3s ease,top .3s ease,width .3s ease,height .3s ease;animation:mascot-ring 1.6s ease-in-out infinite}
.mascot-ring[hidden]{display:none}
body.mascot-touring .sheep-guest{display:none!important}

/* peeking helper button */
.mascot-peek{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:10px;z-index:9200;width:62px;height:62px;padding:0;border:0;background:none;cursor:pointer;overflow:visible}
.mascot-peek[hidden]{display:none}
.mascot-peek-pic{position:absolute;left:0;bottom:0;width:62px;height:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));transform:translateY(22%);transform-origin:50% 100%;transition:transform .3s cubic-bezier(.2,1.5,.4,1)}
.mascot-peek:hover .mascot-peek-pic,.mascot-peek:focus-visible .mascot-peek-pic{transform:translateY(0) rotate(-4deg)}
.mascot-peek-q{position:absolute;right:-4px;top:-2px;display:grid;place-items:center;width:22px;height:22px;border:2px solid var(--mascot-ink);border-radius:50%;background:var(--mascot-paper);color:var(--mascot-text);font:700 13px/1 system-ui,sans-serif;animation:mascot-bob 2.6s ease-in-out infinite}
.mascot-peek:focus-visible{outline:2px solid var(--mascot-accent-2);outline-offset:3px;border-radius:14px}
@media print{.mascot-guide,.mascot-peek,.mascot-ring{display:none!important}}
@media (max-width:560px){
 .mascot-guide-bunny{width:80px}
 .mascot-guide-bubble{margin-bottom:36px;padding:12px 14px 10px}
 .mascot-guide-text{font-size:14px}
 .mascot-peek,.mascot-peek-pic{width:52px}
}

@keyframes mascot-in{0%{opacity:0;transform:translateY(24px) scale(.7)}60%{opacity:1;transform:translateY(-6px) scale(1.04,.97)}100%{transform:none}}
@keyframes mascot-breathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3px) scale(.99,1.025)}}
@keyframes mascot-hop{0%{transform:scale(1.06,.92)}35%{transform:translateY(-22px) scale(.96,1.05) rotate(-3deg)}65%{transform:translateY(0) scale(1.07,.92)}100%{transform:none}}
@keyframes mascot-pop{0%{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.04)}100%{transform:none}}
@keyframes mascot-slide{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:none}}
@keyframes mascot-out{to{opacity:0;transform:translateY(30px) scale(.94)}}
@keyframes mascot-spark{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1.2)}}
@keyframes mascot-ring{0%,100%{box-shadow:0 0 0 4px rgba(185,168,230,.25),0 0 18px rgba(185,168,230,.45)}50%{box-shadow:0 0 0 8px rgba(185,168,230,.12),0 0 32px rgba(185,168,230,.7)}}
@keyframes mascot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.mascot-pic,.mascot-bubble,.mascot-guide,.mascot-guide-bunny,.mascot-guide-bubble,.mascot-ring,.mascot-peek-q,.mascot-spark{animation:none!important}.mascot-ring,.mascot-peek-pic{transition:none!important}}
body[data-motion=reduced] .mascot-pic,body[data-motion=reduced] .mascot-bubble,body[data-motion=reduced] .mascot-guide,body[data-motion=reduced] .mascot-guide-bunny,body[data-motion=reduced] .mascot-guide-bubble,body[data-motion=reduced] .mascot-ring,body[data-motion=reduced] .mascot-peek-q{animation:none!important}
.wd-guest.mascot-empty .mascot-bubble{max-width:600px}.mascot-bubble ol{margin:6px 0 10px;padding-left:20px;color:var(--mascot-text)}.mascot-bubble li{margin:3px 0}
/* v85: never override [hidden] (e.g. glamour gallery #empty is hidden while results exist) */
.mascot-empty[hidden],.mascot-bubble [hidden]{display:none!important}
/* v86: inside the speech bubble everything is plain dark text — buttons/links read as underlined text, no fills */
.mascot-bubble button,.mascot-bubble a,.mascot-bubble [class*=btn],.mascot-bubble [class*=button]{display:inline-flex!important;align-items:center;min-height:0!important;margin:6px 14px 0 0!important;padding:2px 0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#2d2540!important;font-weight:700!important;text-decoration:underline!important;text-underline-offset:3px;cursor:pointer;filter:none!important;backdrop-filter:none!important}
.mascot-bubble button:hover,.mascot-bubble a:hover,.mascot-bubble [class*=btn]:hover{color:#5b3fa8!important;transform:none!important}
.mascot-bubble button::before,.mascot-bubble button::after,.mascot-bubble a::before,.mascot-bubble a::after,.mascot-bubble [class*=btn]::before,.mascot-bubble [class*=btn]::after{display:none!important}
.mascot-bubble button:focus-visible,.mascot-bubble a:focus-visible{outline:2px solid #5b3fa8!important;outline-offset:2px}
.mascot-bubble *{color:#2d2540}
.mascot-bubble button,.mascot-bubble a,.mascot-bubble [class*=btn]{font-size:15px!important;letter-spacing:0!important}
/* v91: 新手任務 chip + list */
.mascot-quest{position:fixed;left:12px;bottom:14px;z-index:9150;display:inline-flex;align-items:center;gap:8px;min-height:0;padding:4px 14px 4px 4px;border:2px solid var(--mascot-ink);border-radius:999px;background:var(--mascot-paper);color:var(--mascot-text);font:700 13px/1.2 system-ui,'Noto Sans TC',sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:mascot-slide .5s cubic-bezier(.2,1.3,.4,1) both}
.mascot-quest:hover{transform:translateY(-2px)}
.mascot-quest:focus-visible{outline:2px solid #5b3fa8;outline-offset:3px}
.mascot-quest-ring{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--mascot-accent) var(--p,0%),#ddd3f3 0);padding:3px;box-sizing:border-box}
.mascot-quest-pic{width:100%;height:100%;object-fit:contain;border-radius:50%;background:var(--mascot-paper)}
body.mascot-touring .mascot-quest{display:none}
.mascot-quest-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.mascot-quest-list a{color:var(--mascot-text)!important;text-decoration:none;font-size:14px;font-weight:600}
.mascot-quest-list a:hover{color:#5b3fa8!important;text-decoration:underline}
.mascot-quest-list li.is-done a{color:#7b8f7a!important;text-decoration:line-through;font-weight:400}
.mascot-quest-hint{width:100%;margin:4px 0 0;font-size:12.5px;color:#6a5a86}
@media print{.mascot-quest{display:none!important}}
