/* XINGYU_MOBILE_CHAT_VISIBLE_AND_MAGIC_V27 */

/* 新互动卡片保持既有绮趣互动的圆润、发光和双人连线质感。 */
#magicModal .spell-doomarrow .magic-spell-card-icon{background:radial-gradient(circle at 32% 24%,#fff,#ffd5d5 42%,#d94c53)}
#magicModal .spell-icewater .magic-spell-card-icon{background:radial-gradient(circle at 32% 24%,#fff,#d8f9ff 42%,#59cbe8)}
#magicModal .spell-samadhifire .magic-spell-card-icon{background:radial-gradient(circle at 32% 24%,#fff8c8,#ffb14c 43%,#ef4d32)}
#magicModal .spell-stinkjar .magic-spell-card-icon{background:radial-gradient(circle at 32% 24%,#fffde0,#d8eb92 43%,#86aa39)}

.magic-scene-interaction.spell-doomarrow .magic-target-burst{background:radial-gradient(circle,rgba(255,244,244,.96),rgba(227,58,67,.29) 34%,transparent 70%)}
.magic-scene-interaction.spell-icewater .magic-target-burst{background:radial-gradient(circle,rgba(235,255,255,.96),rgba(50,204,245,.30) 34%,transparent 70%)}
.magic-scene-interaction.spell-samadhifire .magic-target-burst{background:radial-gradient(circle,rgba(255,247,202,.94),rgba(255,81,28,.38) 34%,transparent 70%)}
.magic-scene-interaction.spell-stinkjar .magic-target-burst{background:radial-gradient(circle,rgba(248,255,222,.94),rgba(135,179,55,.35) 34%,transparent 70%)}
.magic-scene-interaction.spell-doomarrow .magic-link-beam{background:linear-gradient(90deg,transparent,#5a1621,#f26d5f,#fff1d9,#f26d5f,transparent)!important;filter:drop-shadow(0 0 8px rgba(196,38,48,.88))!important}
.magic-scene-interaction.spell-icewater .magic-link-beam{background:linear-gradient(90deg,transparent,#d9ffff,#64ddff,#fff,#64ddff,transparent)!important;filter:drop-shadow(0 0 9px rgba(35,194,240,.92))!important}
.magic-scene-interaction.spell-samadhifire .magic-link-beam{background:linear-gradient(90deg,transparent,#ffdb64,#ff572d,#fff0a7,#ff572d,transparent)!important;filter:drop-shadow(0 0 9px rgba(255,82,32,.9))!important}
.magic-scene-interaction.spell-stinkjar .magic-link-beam{background:linear-gradient(90deg,transparent,#c4dc77,#7ca33d,#f0f9b8,#7ca33d,transparent)!important;filter:drop-shadow(0 0 8px rgba(102,146,48,.84))!important}

.magic-player-aura.aura-doomarrow .magic-aura-glow{background:radial-gradient(circle,rgba(255,244,241,.72),rgba(237,73,81,.40) 31%,rgba(121,10,27,.18) 57%,transparent 73%)!important}
.magic-player-aura.aura-icewater .magic-aura-glow{background:radial-gradient(circle,rgba(243,255,255,.76),rgba(72,216,255,.42) 31%,rgba(34,140,244,.16) 57%,transparent 73%)!important}
.magic-player-aura.aura-samadhifire .magic-aura-glow{background:radial-gradient(circle,rgba(255,250,222,.74),rgba(255,99,35,.44) 32%,rgba(205,32,20,.16) 57%,transparent 73%)!important}
.magic-player-aura.aura-stinkjar .magic-aura-glow{background:radial-gradient(circle,rgba(251,255,225,.72),rgba(166,201,75,.42) 32%,rgba(95,134,40,.16) 57%,transparent 73%)!important}

/* 施法者与目标都有专属动作，且只影响临时视觉图层。 */
.magic-caster-doomarrow::after{content:'🏹';position:absolute;z-index:90;left:50%;top:37%;font-size:48px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(80,12,20,.34));animation:magicArrowDraw 2.4s ease-out forwards}
.magic-react-doomarrow .player-visual{animation:magicArrowHit .28s ease-in-out 7!important}
.magic-react-icewater .player-visual{animation:magicColdShiver .22s ease-in-out 10!important}
.magic-react-samadhifire .player-visual{animation:magicFireBounce .36s ease-in-out 6!important}
.magic-react-stinkjar .player-visual{animation:magicStinkRecoil .42s ease-in-out 6!important}

.magic-scene-interaction.spell-doomarrow .prop-1{font-size:86px!important;animation-name:magicArrowImpact!important}
.magic-scene-interaction.spell-doomarrow .prop-2{font-size:90px!important;animation-name:magicArrowBurst!important}
.magic-scene-interaction.spell-icewater .prop-1{font-size:84px!important;transform:translate(0,-116px) rotate(-18deg)!important;animation-name:magicBucketPour!important}
.magic-scene-interaction.spell-icewater .prop-2{font-size:94px!important;transform:translate(0,-12px)!important;animation-name:magicWaterSplash!important}
.magic-scene-interaction.spell-icewater .prop-3{font-size:64px!important;transform:translate(58px,18px)!important;animation-name:magicIceTwinkle!important}
.magic-scene-interaction.spell-samadhifire .magic-scene-special{transform:translateY(42px);animation:magicFireRise 3.55s ease-out forwards}
.magic-scene-interaction.spell-samadhifire .magic-special-prop{font-size:82px!important;filter:drop-shadow(0 0 17px rgba(255,92,23,.9))!important}
.magic-scene-interaction.spell-samadhifire .prop-1{transform:translate(-70px,18px)!important}.magic-scene-interaction.spell-samadhifire .prop-2{transform:translate(0,-18px)!important;font-size:106px!important}.magic-scene-interaction.spell-samadhifire .prop-3{transform:translate(70px,18px)!important}
.magic-scene-interaction.spell-stinkjar .magic-scene-special{transform:translateY(45px);animation:magicJarBlast 3.55s ease-out forwards}
.magic-scene-interaction.spell-stinkjar .prop-1,.magic-scene-interaction.spell-stinkjar .prop-3{font-size:84px!important;animation-name:magicStinkCloud!important}
.magic-scene-interaction.spell-stinkjar .prop-2{font-size:100px!important;animation-name:magicJarPop!important}

@keyframes magicArrowDraw{0%{opacity:0;transform:translate(-84px,24px) rotate(-24deg) scale(.55)}18%,62%{opacity:1;transform:translate(-48px,0) rotate(-7deg) scale(1.08)}100%{opacity:0;transform:translate(98px,-7px) rotate(15deg) scale(.8)}}
@keyframes magicArrowImpact{0%{opacity:0;translate:-150px 18px;rotate:-20deg;scale:.45}30%,68%{opacity:1;translate:-4px 0;rotate:8deg;scale:1.18}100%{opacity:0;translate:84px -16px;rotate:18deg;scale:.8}}
@keyframes magicArrowBurst{0%,22%{opacity:0;scale:.2}38%,70%{opacity:1;scale:1.28}100%{opacity:0;scale:1.75}}
@keyframes magicBucketPour{0%{opacity:0;translate:-22px -95px;rotate:-35deg;scale:.45}25%,60%{opacity:1;translate:0 0;rotate:22deg;scale:1.15}100%{opacity:0;translate:18px 34px;rotate:48deg;scale:.9}}
@keyframes magicWaterSplash{0%{opacity:0;scale:.2}25%,72%{opacity:1;scale:1.3}100%{opacity:0;translate:0 48px;scale:1.65}}
@keyframes magicIceTwinkle{0%,25%{opacity:0;scale:.2}42%,76%{opacity:1;scale:1.2;rotate:24deg}100%{opacity:0;translate:26px 20px;scale:1.45;rotate:70deg}}
@keyframes magicFireRise{0%{opacity:0;scale:.35 .2}22%,72%{opacity:1;scale:1 1}100%{opacity:0;translate:0 -74px;scale:1.22 1.4}}
@keyframes magicJarBlast{0%{opacity:0;scale:.28}20%,68%{opacity:1;scale:1.05}100%{opacity:0;translate:0 -35px;scale:1.35}}
@keyframes magicStinkCloud{0%{opacity:0;scale:.2}24%,70%{opacity:1;scale:1.25}100%{opacity:0;translate:var(--stink-x,0px) -82px;scale:1.7}}
@keyframes magicJarPop{0%{opacity:0;translate:0 58px;scale:.28;rotate:-15deg}24%,68%{opacity:1;translate:0 0;scale:1.2;rotate:7deg}100%{opacity:0;translate:0 -52px;scale:1.38;rotate:12deg}}
@keyframes magicArrowHit{0%,100%{transform:translateX(0) rotate(0)}35%{transform:translateX(11px) rotate(5deg)}68%{transform:translateX(-8px) rotate(-4deg)}}
@keyframes magicColdShiver{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-5px) rotate(-2deg)}75%{transform:translateX(5px) rotate(2deg)}}
@keyframes magicFireBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.035,.98)}}
@keyframes magicStinkRecoil{0%,100%{transform:translateX(0) rotate(0)}30%{transform:translateX(-6px) rotate(-3deg)}70%{transform:translateX(7px) rotate(3deg)}}

/* 手机：聊天面板固定在可见底部，消息区域独立滚动，发送框不会再被浏览器底栏截掉。 */
@media(max-width:700px){
    body.lobby-reference-page{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
    body .main-container.ui-remix-v1.ui-left-latest-v6.ui-reference-v9{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
    .ui-reference-v9 .bottom-chat-area{
        position:fixed!important;z-index:9000!important;left:4px!important;right:4px!important;bottom:max(0px,env(safe-area-inset-bottom))!important;
        width:auto!important;max-height:43dvh!important;margin:0!important;padding:6px!important;overflow-y:auto!important;
        -webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:linear-gradient(180deg,#fff,#edf4ff)!important;
        box-shadow:0 -5px 18px rgba(30,76,134,.18),inset 0 1px 0 #fff!important;
    }
    .ui-reference-v9 .chat-top-row{display:grid!important;grid-template-columns:minmax(0,1fr) 78px 56px 110px!important;gap:4px!important;align-items:center!important;flex-wrap:nowrap!important}
    .ui-reference-v9 .chat-title-block{order:1!important;min-width:0!important;overflow:hidden!important;white-space:nowrap!important}
    .ui-reference-v9 .chat-right-side{order:2!important;min-width:0!important;margin:0!important;justify-content:center!important}
    .ui-reference-v9 #toggleExpand{order:3!important;width:56px!important;min-width:56px!important;padding:0!important}
    .ui-reference-v9 #btnHorn.world-horn-btn{order:4!important;width:110px!important;min-width:110px!important;margin:0!important;padding:0 5px!important;font-size:11px!important;white-space:nowrap!important}
    .ui-reference-v9 .chat-dress-btn{width:78px!important;min-width:78px!important;height:30px!important;padding:3px 5px!important;font-size:10px!important}
    .ui-reference-v9 .chat-dress-icon{width:22px!important;height:22px!important;flex-basis:22px!important;font-size:13px!important}
    .ui-reference-v9 .chat-dress-label{display:inline!important}
    .ui-reference-v9 .horn-input-wrap{grid-column:1/-1!important;order:10!important;width:100%!important;min-width:0!important}
    .ui-reference-v9 .chat-box{height:108px!important;min-height:108px!important;max-height:108px!important;overflow-y:auto!important}
    .ui-reference-v9 .scene-wrap{height:48dvh!important;min-height:250px!important;max-height:none!important;margin-bottom:0!important}
    .magic-caster-doomarrow::after{font-size:38px!important}
    .magic-target-burst{width:220px!important;height:220px!important}
    .magic-scene-interaction.spell-icewater .prop-1{transform:translate(0,-88px) rotate(-18deg)!important}
}