/* 练习页吉祥物：像素「双色团子」（配合 L3 渐变丝带），逻辑在 assets/practice-mascot.js。类名沿用第一版的 aim-owl-*。
   头顶不放气泡和文字（用户要求），只用动作表达。
   动作全部由 JS 逐帧写 transform（跟随屏幕刷新率、带动态模糊和残影），这里只放外观；
   不要再给 .aim-owl-sprite / 枪 / 小球加 CSS transition 或 animation，会和逐帧动画打架。 */
/* 团子可以被拖到页面任意元素上，会被挂进各种容器：外观相关属性都加 !important，免得被所在容器的 button 样式改掉。
   left/top 由 JS 按目标元素上沿算好（像素）。 */
.aim-owl{display:block!important;position:absolute!important;left:0;top:0;right:auto!important;bottom:auto!important;z-index:4;width:36px!important;height:33px!important;min-width:0!important;min-height:0!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;opacity:1!important;flex:none!important;transform:none;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;will-change:transform}
.aim-owl.is-held{position:fixed!important;z-index:2147483000;cursor:grabbing}
html:has(.aim-owl.is-held),html:has(.aim-owl.is-held) *{cursor:grabbing!important;user-select:none!important}
.aim-owl i{display:block;font-style:normal}
.aim-owl svg{display:block;width:100%;height:100%;overflow:visible}
.aim-owl:focus-visible{outline:2px solid #3B82F6;outline-offset:3px;border-radius:6px}
html[data-ui-style="classic"] .aim-owl{width:28px!important;height:26px!important}
.aim-owl-sprite{position:relative;width:100%;height:100%;transform-origin:50% 100%;will-change:transform}
.aim-owl-ghost{position:absolute;inset:0;pointer-events:none;transform-origin:50% 100%;opacity:0;will-change:transform,opacity}
.aim-owl-svg{transform-origin:50% 100%}

.aim-owl-eyes-shut,.aim-owl-eyes-dizzy,.aim-owl-blush{display:none}
.aim-owl.is-sleep .aim-owl-eyes-open,.aim-owl.is-blink .aim-owl-eyes-open,.aim-owl.is-dizzy .aim-owl-eyes-open{display:none}
.aim-owl.is-sleep .aim-owl-eyes-shut,.aim-owl.is-blink:not(.is-dizzy) .aim-owl-eyes-shut{display:inline}
.aim-owl.is-dizzy .aim-owl-eyes-dizzy,.aim-owl.is-blush .aim-owl-blush{display:inline}
/* 被拖动打断动作的一瞬间：>< 眼。 */
.aim-owl.is-oops .aim-owl-eyes-open,.aim-owl.is-oops .aim-owl-eyes-shut{display:none}
.aim-owl.is-oops .aim-owl-eyes-dizzy{display:inline}

/* 拖动时，所有能吸附的卡片边沿描一条淡淡的蓝光；离团子最近（松手会落上去）的那条更亮。 */
.aim-owl-edges{position:fixed;inset:0;z-index:2147482999;pointer-events:none;opacity:0;transition:opacity .2s ease}
.aim-owl-edges.is-on{opacity:1}
.aim-owl-edges>i{position:absolute;display:block;height:1px;margin-top:-.5px;border-radius:1px;background:rgba(96,165,250,.16);box-shadow:0 0 4px rgba(59,130,246,.14);transition:background .25s ease,box-shadow .25s ease}
.aim-owl-edges>i.is-target{background:rgba(96,165,250,.42);box-shadow:0 0 5px rgba(59,130,246,.3)}

/* PRO 会员头顶的像素皇冠，中间一颗白像素偶尔闪一下。 */
.aim-owl .aim-owl-crown{display:none}
.aim-owl.is-pro .aim-owl-crown{display:inline}
.aim-owl-crown-shine{animation:aimOwlShine 3.2s ease-in-out infinite}

/* 西部牛仔动作：戴帽时藏起 PRO 皇冠；吹烟时嘴巴变成小圆口；帽子、左轮、烟都由 JS 逐帧摆。 */
.aim-owl.has-hat .aim-owl-crown{display:none}
.aim-owl-mouth-blow{display:none}
.aim-owl.is-blow .aim-owl-mouth,.aim-owl.is-blow .aim-owl-mouth-open{display:none}
.aim-owl.is-blow .aim-owl-mouth-blow{display:inline}
.aim-owl-fx>.aim-owl-hat{transform-origin:50% 100%}
.aim-owl-fx>.aim-owl-revolver{width:18px;height:11px;transform-origin:7px 5px}
.aim-owl-fx>.aim-owl-revolver>.aim-owl-flash{left:17px;top:-3px;width:7px!important;height:7px!important}
.aim-owl-fx>.aim-owl-smoke{width:5px;height:5px;border-radius:50%;background:rgba(226,232,240,.9)}

/* 抽奖：开奖舞台上团子大一点、在舞台最上层；开心（^ ^ 眼）/ 惊呆（用户 2026-11-10 选的 C「闪闪大眼」：竖长大黑眼带白高光和金亮点、小 o 嘴、一只小手放在嘴边，头两侧金色小闪光）。 */
.aim-owl.is-stage{z-index:40;width:54px!important;height:50px!important}
.aim-owl-eyes-happy,.aim-owl-eyes-star,.aim-owl-paw{display:none}
.aim-owl.is-happy .aim-owl-eyes-happy,.aim-owl.is-amazed .aim-owl-eyes-star,.aim-owl.is-amazed .aim-owl-paw{display:inline}
.aim-owl.is-happy .aim-owl-eyes-open,.aim-owl.is-happy .aim-owl-eyes-shut,.aim-owl.is-happy .aim-owl-eyes-dizzy,
.aim-owl.is-amazed .aim-owl-eyes-open,.aim-owl.is-amazed .aim-owl-eyes-shut,.aim-owl.is-amazed .aim-owl-eyes-dizzy,.aim-owl.is-amazed .aim-owl-mouth,.aim-owl.is-amazed .aim-owl-mouth-open,.aim-owl.is-amazed .aim-owl-mouth-blow{display:none!important}
.aim-owl-eyes-star{animation:aimOwlStarBlink .36s steps(2,jump-none) infinite}

/* 趣味动作：眯眼（打盹、打喷嚏、举重）、鬼脸（一只眼眯着吐舌头）、泡泡糖糊一脸、憋红脸；道具和风筝线。 */
.aim-owl-face-goofy,.aim-owl-gum{display:none}
.aim-owl.is-squint .aim-owl-eyes-open,.aim-owl.is-squint .aim-owl-eyes-dizzy{display:none}
.aim-owl.is-squint:not(.is-happy) .aim-owl-eyes-shut{display:inline}
.aim-owl.is-goofy .aim-owl-face-goofy,.aim-owl.is-gum .aim-owl-gum{display:inline}
.aim-owl.is-goofy .aim-owl-eyes-open,.aim-owl.is-goofy .aim-owl-eyes-shut,.aim-owl.is-goofy .aim-owl-mouth,.aim-owl.is-goofy .aim-owl-mouth-open{display:none!important}
.aim-owl-tongue{animation:aimOwlTongue .5s ease-in-out infinite alternate}
.aim-owl.is-strain .aim-owl-sprite .aim-owl-svg{filter:sepia(.55) saturate(2.6) hue-rotate(-25deg) brightness(.98)}
.aim-owl-sprite .aim-owl-svg{transition:filter .4s ease}
.aim-owl-fx>.aim-owl-prop{will-change:transform,opacity}
.aim-owl-fx>.aim-owl-string{height:1px!important;margin-top:-.5px;background:rgba(100,116,139,.85);transform-origin:0 50%}

/* 自己过日子：蛛丝、/tp 聊天框（我的世界那样的半透明黑底白字）、摔疼时全身变红。 */
.aim-owl-fx>.aim-owl-web{height:1px!important;margin-top:-.5px;background:rgba(248,250,252,.95);box-shadow:0 0 1px rgba(15,23,42,.6);transform-origin:0 50%}
.aim-owl-fx>.aim-owl-chat{display:flex!important;align-items:center;box-sizing:border-box;padding:0 5px;background:rgba(15,23,42,.62);color:#F8FAFC;font:11px/16px ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden;transform-origin:0 0}
.aim-owl-chat>i{display:inline-block!important}
.aim-owl-chat>.aim-owl-caret{width:5px;height:2px;margin-left:1px;align-self:flex-end;margin-bottom:3px;background:#F8FAFC;animation:aimOwlCaret .8s steps(1) infinite}
.aim-owl-chat.is-sent{background:rgba(124,58,237,.7)}
.aim-owl.is-hurt .aim-owl-sprite .aim-owl-svg{filter:sepia(1) saturate(7) hue-rotate(-45deg) brightness(.92)}

/* 换卡片第二版：蜘蛛头套、鼓气的腮帮、艾莎冰阶梯的发光、被拽下来后自己飞走的热气球。 */
.aim-owl-mask,.aim-owl-puff{display:none}
.aim-owl.is-masked .aim-owl-mask,.aim-owl.is-puffed .aim-owl-puff{display:inline}
.aim-owl.is-puffed .aim-owl-mouth{display:none}
.aim-owl-fx>.aim-owl-ice{filter:drop-shadow(0 0 3px rgba(125,211,252,.95)) drop-shadow(0 0 7px rgba(56,189,248,.45))}
.aim-owl-ice svg{overflow:visible}
.aim-owl-fx>.aim-owl-portal{filter:drop-shadow(0 0 3px rgba(251,146,60,.95)) drop-shadow(0 0 8px rgba(245,158,11,.55))}
.aim-owl-fx>.aim-owl-prop svg{overflow:visible}
.aim-owl-shatter{position:fixed;inset:0;z-index:2147482990;pointer-events:none;overflow:hidden}
.aim-owl-shatter>i,.aim-owl-shatter>.aim-owl-shatter-whole{position:absolute;display:block;pointer-events:none}
.aim-owl-shatter>i{filter:drop-shadow(0 0 2px rgba(125,211,252,.9))}
.aim-owl-shatter svg{display:block;width:100%;height:100%;overflow:visible}
.aim-owl-shatter>.aim-owl-shatter-whole{filter:drop-shadow(0 0 3px rgba(125,211,252,.95)) drop-shadow(0 0 7px rgba(56,189,248,.45))}
.aim-owl-escape{position:fixed!important;z-index:2147482990;pointer-events:none;display:block}
.aim-owl-escape svg{display:block;width:100%;height:100%}

/* 张嘴（吃图标时）。 */
.aim-owl-mouth-open{display:none}
.aim-owl.is-mouth .aim-owl-mouth{display:none}
.aim-owl.is-mouth .aim-owl-mouth-open{display:inline}

/* 吃掉品牌图标后发光：身体后面垫一层同形状剪影（左半蓝、右半红，JS 里膨胀+模糊），光贴着身体边缘一呼一吸；
   去掉 is-glow 时慢慢暗下去。 */
.aim-owl .aim-owl-aura{opacity:0;transition:opacity .9s ease}
.aim-owl.is-glow .aim-owl-aura{opacity:1}
.aim-owl.is-glow .aim-owl-aura-pulse{animation:aimOwlAura 1.3s ease-in-out infinite}

/* 呼吸（只缩放内层 svg，和 JS 写在外层的动作叠加）：睡着时深一点，醒着时很轻。 */
.aim-owl.is-sleep .aim-owl-svg{animation:aimOwlBreathe 2.6s ease-in-out infinite}
.aim-owl:not(.is-sleep) .aim-owl-sprite .aim-owl-svg{animation:aimOwlIdle 3.2s ease-in-out infinite}

/* 睡觉时头顶慢慢飘起三个像素 Z（用户点名要的，醒着不显示）。 */
.aim-owl .aim-owl-zzz{display:none;position:absolute;left:64%;top:6%;width:0;height:0;pointer-events:none}
.aim-owl.is-sleep:not(.is-held) .aim-owl-zzz{display:block}
.aim-owl-zzz>i{position:absolute;left:0;bottom:0;width:7px;height:7px;opacity:0;filter:drop-shadow(0 0 1px rgba(15,23,42,.6));animation:aimOwlZ 2.7s linear infinite}
.aim-owl-zzz>i:nth-child(2){width:6px;height:6px;animation-delay:.9s}
.aim-owl-zzz>i:nth-child(3){width:5px;height:5px;animation-delay:1.8s}
/* 倒挂在卡片下沿时整只团子上下翻转，Z 字本身再翻回来保持正着。 */
.aim-owl.is-flipped .aim-owl-zzz svg{transform:scaleY(-1)}

/* 掏枪点小球：整层在朝左时水平镜像；位置和动画都由 JS 逐帧写 transform。 */
.aim-owl-fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.aim-owl-fx.is-left{transform:scaleX(-1)}
.aim-owl-fx>i{position:absolute;left:0;top:0;will-change:transform}
.aim-owl-fx>.aim-owl-gun{width:16px;height:10px;transform-origin:2px 5px;transform:scale(0)}
.aim-owl-flash{position:absolute;left:14px;top:-4px;width:9px!important;height:9px!important;opacity:0}
.aim-owl-fx>.aim-owl-target{width:10px;height:10px;transform:scale(0)}
.aim-owl-fx>.aim-owl-bullet{width:0;height:2px;margin-top:-1px;border-radius:2px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(253,224,71,0),rgba(253,224,71,.85) 55%,#FFFFFF);box-shadow:0 0 4px rgba(253,224,71,.8)}
.aim-owl-fx>.aim-owl-bit{width:3px;height:3px}
.aim-owl-fx>.aim-owl-dropgun{width:16px;height:10px;margin:-3.5px 0 0 -6.5px}
.aim-owl-fx>.aim-owl-ring{width:14px;height:14px;border:2px solid #fff;border-radius:50%;box-sizing:border-box;opacity:0}

@keyframes aimOwlBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.06,.93)}85%{transform:scale(1.02,.98) translateY(1px)}}
@keyframes aimOwlZ{0%{opacity:0;transform:translate(0,0) scale(.45) rotate(-8deg)}12%{opacity:1}25%{transform:translate(4px,-5px) scale(.65) rotate(-2deg)}50%{transform:translate(7px,-11px) scale(.85) rotate(6deg)}75%{opacity:.85;transform:translate(6px,-17px) scale(1) rotate(2deg)}100%{opacity:0;transform:translate(3px,-23px) scale(1.12) rotate(-6deg)}}
@keyframes aimOwlCaret{0%{opacity:1}50%{opacity:0}}
@keyframes aimOwlTongue{from{transform:translateX(0)}to{transform:translateX(.4px)}}
@keyframes aimOwlStarBlink{from{opacity:1}to{opacity:.7}}
@keyframes aimOwlShine{0%,70%,100%{opacity:1}80%{opacity:.45}90%{opacity:1}}
@keyframes aimOwlAura{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes aimOwlIdle{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,.975)}}

@media (prefers-reduced-motion:reduce){.aim-owl *{animation:none!important;transition:none!important}}