/* Çerçeve, imza ve kutlama koleksiyonu — v0.7.8 */
:root{--avatar-radius:18%}
.avatar-art{display:block;width:100%;height:100%;border-radius:inherit;overflow:hidden}
.avatar,.star-avatar,.ranking-avatar,.product-avatar,.product-frame{position:relative;isolation:isolate}
.avatar-framed{border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;overflow:visible!important}
.avatar-framed>.avatar-art{position:relative;width:68%;height:68%;border-radius:12%;z-index:1}
.frame-art{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;z-index:2;pointer-events:none}
.avatar-animated .portrait-character{transform-box:view-box;transform-origin:48px 76px;animation:cosmeticBreath 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated .portrait-head{transform-box:view-box;transform-origin:48px 68px;animation:cosmeticHeadNod 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated[data-avatar-mood=playful] .portrait-head,.avatar-animated[data-avatar-mood=lick] .portrait-head{animation-name:cosmeticHeadShake}
.avatar-animated[data-avatar-mood=regal] .portrait-head{animation-name:cosmeticHeadTilt}
.avatar-animated[data-avatar-mood=flutter] .portrait-head{animation-name:cosmeticHeadFloat}
.avatar-animated .portrait-eye-left,.avatar-animated .portrait-eye-right{transform-box:fill-box;transform-origin:center;animation:cosmeticBlink 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated .portrait-eye-right{animation-name:cosmeticWink}
.avatar-animated .portrait-smile{animation:cosmeticSmile 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated .portrait-grin{animation:cosmeticGrin 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated .portrait-tongue{transform-box:fill-box;transform-origin:center top;animation:cosmeticTongue 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated[data-avatar-mood=lick] .portrait-tongue{animation-name:cosmeticLick}
.avatar-animated .portrait-paw{transform-box:view-box;transform-origin:68px 85px;animation:cosmeticPaw 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-animated .portrait-wings{transform-box:view-box;transform-origin:48px 82px;animation:cosmeticWings 12s ease-in-out var(--portrait-phase,0s) infinite}
.avatar-epic .portrait-stars{animation:cosmeticTwinkle 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.avatar-epic .portrait-orbit{transform-box:view-box;transform-origin:48px 48px;animation:cosmeticOrbit 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.avatar-epic>.avatar-art{box-shadow:0 0 0 1px #ffffff60,0 2px 8px #29144044}
[data-frame-rarity=epic]>.frame-art{animation:cosmeticFrameGlow 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.frame-sparks{position:absolute;inset:0;pointer-events:none;z-index:3;color:var(--frame-light,#ffdc65)}
.frame-sparks i{position:absolute;font-style:normal;font-size:clamp(8px,1vw,13px);line-height:1;text-shadow:0 0 4px var(--frame-color,#bd821f);animation:cosmeticSparkle 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.frame-sparks i:nth-child(1){top:3%;left:7%}.frame-sparks i:nth-child(2){top:8%;right:4%;animation-delay:calc(var(--cosmetic-phase,0s) - 1.5s)}
.frame-sparks i:nth-child(3){bottom:4%;right:8%;animation-delay:calc(var(--cosmetic-phase,0s) - 3s)}.frame-sparks i:nth-child(4){bottom:8%;left:4%;animation-delay:calc(var(--cosmetic-phase,0s) - 4.5s)}
.name-animated{animation:cosmeticInk 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.name-animated.name-gradient{background-size:300% 100%;animation:cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite}
.name-epic{letter-spacing:.2px}
.name-epic[data-name-effect=flame]{animation:cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite,cosmeticFlame 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.name-epic[data-name-effect=electric]{animation:cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite,cosmeticVoltage 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.name-epic[data-name-effect=prism]{animation:cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite,cosmeticPrism 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.name-epic[data-name-effect=eclipse]{animation:cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite,cosmeticEclipse 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.effect-epic{position:relative;isolation:isolate;overflow:hidden!important;color:#f9cf38;background:radial-gradient(circle at 35% 25%,#493077,#17142e)!important}
.effect-epic img{animation:cosmeticEffectPulse 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.effect-preview-sparks{position:absolute;inset:0;pointer-events:none}
.effect-preview-sparks i{position:absolute;font-size:15px;font-style:normal;line-height:1;color:#ffdb52;text-shadow:0 0 5px #cf91f9;animation:cosmeticPreviewBurst 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.effect-preview-sparks i:nth-child(1){left:15%;top:30%}.effect-preview-sparks i:nth-child(2){left:65%;top:15%;animation-delay:calc(var(--cosmetic-phase,0s) - 1.2s)}
.effect-preview-sparks i:nth-child(3){left:75%;top:65%;animation-delay:calc(var(--cosmetic-phase,0s) - 2.4s)}.effect-preview-sparks i:nth-child(4){left:20%;top:75%;animation-delay:calc(var(--cosmetic-phase,0s) - 3.6s)}
.effect-preview-sparks i:nth-child(5){left:45%;top:40%;animation-delay:calc(var(--cosmetic-phase,0s) - 4.8s)}
@keyframes cosmeticBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.4px) scale(1.015)}}
@keyframes cosmeticHeadNod{0%,12%,27%,60%,78%,100%{transform:rotate(0) translateY(0)}18%,23%{transform:rotate(-2deg) translateY(2px)}20%{transform:rotate(2deg) translateY(-1px)}68%{transform:rotate(4deg) translateY(-1px)}}
@keyframes cosmeticHeadShake{0%,28%,48%,72%,100%{transform:rotate(0)}33%,41%{transform:rotate(-4deg)}37%,45%{transform:rotate(4deg)}82%{transform:rotate(-3deg)}}
@keyframes cosmeticHeadTilt{0%,14%,45%,75%,100%{transform:rotate(0)}24%,35%{transform:rotate(-4deg)}85%,92%{transform:rotate(3deg)}}
@keyframes cosmeticHeadFloat{0%,25%,55%,100%{transform:rotate(0) translateY(0)}14%,70%{transform:rotate(-3deg) translateY(-1px)}40%,87%{transform:rotate(3deg) translateY(1px)}}
@keyframes cosmeticBlink{0%,11%,15%,71%,75%,100%{transform:scaleY(1)}13%,73%{transform:scaleY(.08)}}
@keyframes cosmeticWink{0%,11%,15%,28%,38%,71%,75%,100%{transform:scaleY(1)}13%,31%,35%,73%{transform:scaleY(.08)}}
@keyframes cosmeticSmile{0%,20%,39%,63%,83%,100%{opacity:1}24%,35%,67%,79%{opacity:0}}
@keyframes cosmeticGrin{0%,20%,39%,63%,83%,100%{opacity:0}24%,35%,67%,79%{opacity:1}}
@keyframes cosmeticTongue{0%,43%,58%,100%{opacity:0;transform:scaleY(.1)}47%,54%{opacity:1;transform:scaleY(1)}}
@keyframes cosmeticLick{0%,44%,64%,100%{opacity:0;transform:translate(0,0) scale(.2)}48%,54%,60%{opacity:1;transform:translate(2px,-1px) scale(1)}51%,57%{opacity:1;transform:translate(-1px,1px) scale(.55)}}
@keyframes cosmeticPaw{0%,42%,66%,100%{opacity:0;transform:translateY(9px) rotate(12deg)}47%,61%{opacity:1;transform:translateY(-4px) rotate(-4deg)}}
@keyframes cosmeticWings{0%,26%,56%,100%{transform:scaleX(1)}34%,48%{transform:scaleX(.86)}40%{transform:scaleX(1.04)}}
@keyframes cosmeticTwinkle{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes cosmeticOrbit{0%,100%{transform:rotate(-4deg);opacity:.65}50%{transform:rotate(4deg);opacity:1}}
@keyframes cosmeticFrameGlow{0%,100%{filter:drop-shadow(0 0 1px var(--frame-color,#c89427))}50%{filter:drop-shadow(0 0 3px var(--frame-light,#ffe277))}}
@keyframes cosmeticSparkle{0%,18%,100%{opacity:.2;transform:scale(.65) rotate(0)}40%,65%{opacity:1;transform:scale(1.25) rotate(90deg)}}
@keyframes cosmeticSignature{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes cosmeticInk{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 3px var(--name-color,#81619f)}}
@keyframes cosmeticFlame{0%,100%{filter:drop-shadow(0 -1px 1px #ed871955)}30%,70%{filter:drop-shadow(-1px -2px 2px #ef6b2288) drop-shadow(1px -3px 3px #ffc13566)}50%{filter:drop-shadow(1px -2px 2px #e7432977)}}
@keyframes cosmeticVoltage{0%,100%{filter:drop-shadow(0 0 1px #488fea55)}25%,65%{filter:drop-shadow(-1px 0 2px #588bec99) drop-shadow(1px 0 3px #9676ec66)}45%,85%{filter:drop-shadow(1px -1px 1px #588fea77)}}
@keyframes cosmeticPrism{0%,100%{filter:drop-shadow(0 0 1px #d0569766)}35%{filter:drop-shadow(1px 0 2px #37c7c477)}70%{filter:drop-shadow(-1px 0 2px #c966d477)}}
@keyframes cosmeticEclipse{0%,100%{filter:drop-shadow(0 0 1px #6e418b55)}50%{filter:drop-shadow(0 0 3px #a866ce88) drop-shadow(0 0 2px #e8a42c77)}}
@keyframes cosmeticEffectPulse{0%,100%{transform:scale(.94);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes cosmeticPreviewBurst{0%,15%,100%{opacity:0;transform:translateY(10px) scale(.4) rotate(-20deg)}45%{opacity:1;transform:translateY(-5px) scale(1) rotate(12deg)}80%{opacity:.2;transform:translateY(-20px) scale(.6) rotate(30deg)}}
.cosmetics-paused .avatar-animated *,.cosmetics-paused [data-frame-rarity=epic] *,.cosmetics-paused .name-animated,.cosmetics-paused .effect-epic *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.avatar-animated *,[data-frame-rarity=epic] *,.name-animated,.effect-epic *{animation:none!important}.frame-sparks,.effect-preview-sparks{display:none}}
body:not(.in-game) .online-card .avatar-framed{--frame-width:5px}
.star-avatar.avatar-framed{--frame-width:8px}
.ranking-avatar.avatar-framed{--frame-width:4px}
.turn-avatar.avatar-framed{--frame-width:6px}
body.in-game #players .avatar-framed{--frame-width:3px}
.product-frame.avatar-framed{--frame-width:8px}
body.in-game #players .avatar{width:44px;height:44px;font-size:22px}
.cosmetic-name{font-weight:800;color:var(--name-color,#81619f)!important}
.cosmetic-name.name-gradient{background:var(--name-gradient);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.celebration[data-motion=petals] .celebration-particle{font-size:24px}
.celebration[data-motion=bubbles] .celebration-particle{font-size:27px;text-shadow:0 1px 2px #ffffff88}
.celebration[data-motion=sparkle] .celebration-particle{font-size:25px}
.celebration.fx_confetti_default .celebration-particle:nth-of-type(3n+1){color:#b69bcb}
.celebration.fx_confetti_default .celebration-particle:nth-of-type(3n+2){color:#d8b774}
.celebration.fx_confetti_default .celebration-particle:nth-of-type(3n+3){color:#97b89d}
[data-name-style="name_gold"]{--name-color:#c8890b;}
.celebration.fx_firework_gold .celebration-particle:nth-of-type(3n+1){color:#ebb33b}
.celebration.fx_firework_gold .celebration-particle:nth-of-type(3n+2){color:#f7c140}
.celebration.fx_firework_gold .celebration-particle:nth-of-type(3n+3){color:#d4b25c}
[data-frame="frame_neon"]{--frame-color:#7d3dd0;--frame-light:#e775ce;}
.celebration.fx_rainbow .celebration-particle:nth-of-type(3n+1){color:#ad64d3}
.celebration.fx_rainbow .celebration-particle:nth-of-type(3n+2){color:#64d3ac}
.celebration.fx_rainbow .celebration-particle:nth-of-type(3n+3){color:#e88f4f}
[data-frame="frame_mint"]{--frame-color:#258557;--frame-light:#ed4c54;}
[data-frame="frame_daisy"]{--frame-color:#287a45;--frame-light:#fffdf4;}
[data-frame="frame_wood"]{--frame-color:#744125;--frame-light:#d98234;}
[data-frame="frame_oak"]{--frame-color:#7c4c29;--frame-light:#d04459;}
[data-frame="frame_coral"]{--frame-color:#aa3e38;--frame-light:#f45c62;}
[data-frame="frame_sky"]{--frame-color:#287bb1;--frame-light:#57cbed;}
[data-frame="frame_sage"]{--frame-color:#2a8752;--frame-light:#89c932;}
[data-frame="frame_cherry"]{--frame-color:#6c3833;--frame-light:#db3650;}
[data-frame="frame_charcoal"]{--frame-color:#34394e;--frame-light:#755ba8;}
[data-frame="frame_silver"]{--frame-color:#347fa0;--frame-light:#c3f7ff;}
[data-frame="frame_bronze"]{--frame-color:#a46619;--frame-light:#ffcd33;}
[data-frame="frame_gold"]{--frame-color:#a96a17;--frame-light:#f8c637;}
[data-frame="frame_rose"]{--frame-color:#a53264;--frame-light:#f57298;}
[data-frame="frame_pearl"]{--frame-color:#306c85;--frame-light:#cfebe9;}
[data-frame="frame_marble"]{--frame-color:#427c66;--frame-light:#7cd486;}
[data-frame="frame_ink"]{--frame-color:#442477;--frame-light:#9865d8;}
[data-frame="frame_copper"]{--frame-color:#9e4a25;--frame-light:#f28e3d;}
[data-frame="frame_teal"]{--frame-color:#086c6b;--frame-light:#52d4c6;}
[data-frame="frame_epic_baroque"]{--frame-color:#88651d;--frame-light:#ffc531;}
[data-frame="frame_epic_emerald"]{--frame-color:#1b794d;--frame-light:#38b676;}
[data-frame="frame_epic_sapphire"]{--frame-color:#255e9c;--frame-light:#86e6fa;}
[data-frame="frame_epic_ruby"]{--frame-color:#9c2346;--frame-light:#e64367;}
[data-frame="frame_epic_moon"]{--frame-color:#302552;--frame-light:#ad8bea;}
[data-frame="frame_epic_sun"]{--frame-color:#ac5b12;--frame-light:#ffa524;}
[data-frame="frame_epic_royal"]{--frame-color:#644017;--frame-light:#e9b837;}
[data-frame="frame_epic_antique"]{--frame-color:#42632b;--frame-light:#8bc943;}
[data-frame="frame_epic_diamond"]{--frame-color:#5d479d;--frame-light:#d2bbfc;}
[data-frame="frame_epic_masterpiece"]{--frame-color:#7932a0;--frame-light:#e956bc;}
[data-name-style="name_mint"]{--name-color:#2b9969;}
[data-name-style="name_coral"]{--name-color:#c85c3b;}
[data-name-style="name_sky"]{--name-color:#3979c7;}
[data-name-style="name_lavender"]{--name-color:#8239c7;}
[data-name-style="name_rose"]{--name-color:#c9417c;}
[data-name-style="name_copper"]{--name-color:#af662b;}
[data-name-style="name_forest"]{--name-color:#2da165;}
[data-name-style="name_ocean"]{--name-color:#2c8ea2;}
[data-name-style="name_sunset"]{--name-color:#c35d2c;--name-gradient:linear-gradient(110deg,#cc7621,#c2376e);}
[data-name-style="name_pearl"]{--name-color:#9737c4;--name-gradient:linear-gradient(110deg,#9243ca,#bf7536);}
[data-name-style="name_epic_royal"]{--name-color:#8c35bd;--name-gradient:linear-gradient(110deg,#8c35bd,#d18c21);}
[data-name-style="name_epic_emerald"]{--name-color:#248b63;--name-gradient:linear-gradient(110deg,#248b63,#a8ba34);}
[data-name-style="name_epic_sapphire"]{--name-color:#3753c4;--name-gradient:linear-gradient(110deg,#3753c4,#8749cc);}
[data-name-style="name_epic_aurora"]{--name-color:#2da176;--name-gradient:linear-gradient(110deg,#2da176,#8f42ca);}
[data-name-style="name_epic_gold"]{--name-color:#c89214;--name-gradient:linear-gradient(110deg,#b67d08,#dea11b);}
[data-name-style="name_epic_master"]{--name-color:#b35533;--name-gradient:linear-gradient(110deg,#b35533,#6836c0);}
.celebration.fx_sparkles .celebration-particle:nth-of-type(3n+1){color:#f5b93d}
.celebration.fx_sparkles .celebration-particle:nth-of-type(3n+2){color:#a764d3}
.celebration.fx_sparkles .celebration-particle:nth-of-type(3n+3){color:#e4535d}
.celebration.fx_petals .celebration-particle:nth-of-type(3n+1){color:#f7c440}
.celebration.fx_petals .celebration-particle:nth-of-type(3n+2){color:#e4537a}
.celebration.fx_petals .celebration-particle:nth-of-type(3n+3){color:#77d364}
.celebration.fx_bubbles .celebration-particle:nth-of-type(3n+1){color:#64d3c5}
.celebration.fx_bubbles .celebration-particle:nth-of-type(3n+2){color:#8d64d3}
.celebration.fx_bubbles .celebration-particle:nth-of-type(3n+3){color:#f7b740}
.celebration.fx_leaves .celebration-particle:nth-of-type(3n+1){color:#e79e42}
.celebration.fx_leaves .celebration-particle:nth-of-type(3n+2){color:#b0d364}
.celebration.fx_leaves .celebration-particle:nth-of-type(3n+3){color:#e67f51}
.celebration.fx_hearts .celebration-particle:nth-of-type(3n+1){color:#d76088}
.celebration.fx_hearts .celebration-particle:nth-of-type(3n+2){color:#d364a1}
.celebration.fx_hearts .celebration-particle:nth-of-type(3n+3){color:#f3a844}
.celebration.fx_notes .celebration-particle:nth-of-type(3n+1){color:#9364d3}
.celebration.fx_notes .celebration-particle:nth-of-type(3n+2){color:#e5a752}
.celebration.fx_notes .celebration-particle:nth-of-type(3n+3){color:#64d3b4}
.celebration.fx_stars .celebration-particle:nth-of-type(3n+1){color:#f7c240}
.celebration.fx_stars .celebration-particle:nth-of-type(3n+2){color:#9c64d3}
.celebration.fx_stars .celebration-particle:nth-of-type(3n+3){color:#dc5b97}
.celebration.fx_ribbons .celebration-particle:nth-of-type(3n+1){color:#9862d6}
.celebration.fx_ribbons .celebration-particle:nth-of-type(3n+2){color:#64d39c}
.celebration.fx_ribbons .celebration-particle:nth-of-type(3n+3){color:#e68151}
.celebration.fx_garden .celebration-particle:nth-of-type(3n+1){color:#95d362}
.celebration.fx_garden .celebration-particle:nth-of-type(3n+2){color:#dd5a87}
.celebration.fx_garden .celebration-particle:nth-of-type(3n+3){color:#dfc657}
.celebration.fx_epic_aurora .celebration-particle:nth-of-type(3n+1){color:#64d3a5}
.celebration.fx_epic_aurora .celebration-particle:nth-of-type(3n+2){color:#a164d3}
.celebration.fx_epic_aurora .celebration-particle:nth-of-type(3n+3){color:#d3c864}
.celebration.fx_epic_meteor .celebration-particle:nth-of-type(3n+1){color:#f7b340}
.celebration.fx_epic_meteor .celebration-particle:nth-of-type(3n+2){color:#b564d3}
.celebration.fx_epic_meteor .celebration-particle:nth-of-type(3n+3){color:#f76740}
.celebration.fx_epic_royal .celebration-particle:nth-of-type(3n+1){color:#edb12c}
.celebration.fx_epic_royal .celebration-particle:nth-of-type(3n+2){color:#a464d3}
.celebration.fx_epic_royal .celebration-particle:nth-of-type(3n+3){color:#f1b746}
.celebration.fx_epic_sakura .celebration-particle:nth-of-type(3n+1){color:#e84f89}
.celebration.fx_epic_sakura .celebration-particle:nth-of-type(3n+2){color:#ec4b90}
.celebration.fx_epic_sakura .celebration-particle:nth-of-type(3n+3){color:#bc64d3}
.celebration.fx_epic_gold .celebration-particle:nth-of-type(3n+1){color:#e6aa1f}
.celebration.fx_epic_gold .celebration-particle:nth-of-type(3n+2){color:#f7c940}
.celebration.fx_epic_gold .celebration-particle:nth-of-type(3n+3){color:#d2b146}
.celebration.fx_epic_galaxy .celebration-particle:nth-of-type(3n+1){color:#9f64d3}
.celebration.fx_epic_galaxy .celebration-particle:nth-of-type(3n+2){color:#619cd7}
.celebration.fx_epic_galaxy .celebration-particle:nth-of-type(3n+3){color:#d364a9}
.celebration.fx_epic_master .celebration-particle:nth-of-type(3n+1){color:#e7b039}
.celebration.fx_epic_master .celebration-particle:nth-of-type(3n+2){color:#b364d3}
.celebration.fx_epic_master .celebration-particle:nth-of-type(3n+3){color:#81d364}
[data-name-style="name_epic_flame"]{--name-color:#c12d14;--name-gradient:linear-gradient(110deg,#8b1b13,#eb491b,#ad3c07,#ee8a13,#8b1b13);}
[data-name-style="name_epic_voltage"]{--name-color:#1b59c8;--name-gradient:linear-gradient(110deg,#193c96,#167cc0,#6233bc,#195eac,#193c96);}
[data-name-style="name_epic_prism"]{--name-color:#923eac;--name-gradient:linear-gradient(110deg,#a92162,#8240b4,#156d98,#237a57,#bb5618,#a92162);}
[data-name-style="name_epic_eclipse"]{--name-color:#4f287b;--name-gradient:linear-gradient(110deg,#37235e,#8b35a0,#b85b19,#613897,#37235e);}
/* Living edge ornaments leave the portrait window transparent. */
[data-frame-living=true] .frame-eyes{transform-box:fill-box;transform-origin:center;animation:cosmeticBlink 12s ease-in-out var(--portrait-phase,0s) infinite}
[data-frame-living=true] .frame-wing{transform-box:fill-box;transform-origin:center;animation:gardenWing 6s ease-in-out var(--cosmetic-phase,0s) infinite}
[data-frame-living=true] .frame-wing-right{animation-direction:reverse}
[data-frame-living=true] .frame-flower{transform-box:fill-box;transform-origin:center;animation:gardenFlower 12s ease-in-out var(--portrait-phase,0s) infinite}
[data-frame-living=true] .frame-snake-head{transform-box:fill-box;transform-origin:center;animation:gardenSnake 12s ease-in-out var(--portrait-phase,0s) infinite}
[data-frame-living=true] .frame-snake-tongue{transform-box:fill-box;transform-origin:left center;animation:gardenTongue 12s ease-in-out var(--portrait-phase,0s) infinite}
[data-frame-living=true] .frame-glint{animation:cosmeticTwinkle 6s ease-in-out var(--cosmetic-phase,0s) infinite}
@keyframes gardenWing{0%,35%,70%,100%{transform:scaleX(1)}15%,50%,85%{transform:scaleX(.55)}}
@keyframes gardenFlower{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes gardenSnake{0%,25%,62%,100%{transform:rotate(0)}35%,48%{transform:rotate(-5deg)}78%{transform:rotate(4deg)}}
@keyframes gardenTongue{0%,29%,43%,68%,83%,100%{opacity:0;transform:scaleX(.1)}32%,39%,72%,80%{opacity:1;transform:scaleX(1)}35%,76%{opacity:1;transform:scaleX(.65)}}
/* Text and decorative layers are independent, so badges remain readable. */
.cosmetic-name{position:relative;isolation:isolate}
.cosmetic-name.name-gradient.name-animated{background:none;color:var(--name-color)!important;animation:none}
.cosmetic-name .name-text{position:relative;z-index:1;display:inline-block;max-width:100%;vertical-align:baseline}
.cosmetic-name.name-gradient .name-text{background:var(--name-gradient);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite}
.name-effects{position:absolute;left:-4%;top:-.65em;width:108%;height:2.4em;z-index:0;overflow:visible;pointer-events:none}
.signature-flame{transform-box:fill-box;transform-origin:center bottom;animation:signatureFire 3s ease-in-out var(--cosmetic-phase,0s) infinite}
.signature-flame:nth-child(3n){animation-delay:calc(var(--cosmetic-phase,0s) - 1s)}
.signature-flame:nth-child(3n+1){animation-delay:calc(var(--cosmetic-phase,0s) - 2s)}
[data-name-effect=flame] .name-text{filter:drop-shadow(0 -1px 1px #ffbd44) drop-shadow(0 1px 0 #922714)}
[data-name-effect=ice] .name-text{filter:drop-shadow(0 1px 0 #064665) drop-shadow(0 0 2px #93e8ff)}
.signature-icicles{animation:signatureFrost 6s ease-in-out var(--cosmetic-phase,0s) infinite}
.signature-snow{transform-box:fill-box;transform-origin:center;animation:signatureSnow 6s ease-in-out var(--cosmetic-phase,0s) infinite}
[data-name-effect=comet] .name-text{animation:signatureArrival .7s ease-out both,cosmeticSignature 6s linear var(--cosmetic-phase,0s) infinite}
.signature-comet{animation:signatureComet 12s ease-in-out var(--portrait-phase,0s) infinite}
@keyframes signatureFire{0%,100%{transform:scaleY(.68);opacity:.6}50%{transform:scaleY(1.08);opacity:1}}
@keyframes signatureFrost{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes signatureSnow{0%,100%{opacity:.4;transform:translateY(-1px) rotate(-10deg)}50%{opacity:1;transform:translateY(1px) rotate(10deg)}}
@keyframes signatureArrival{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
@keyframes signatureComet{0%,5%,100%{opacity:0;transform:translateX(-30px)}10%,28%{opacity:1}42%{opacity:0;transform:translateX(110px)}}
.cosmetics-paused [data-frame-living=true] *,.cosmetics-paused .name-animated *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){[data-frame-living=true] *,.name-animated *{animation:none!important}.name-effects{display:none}}
[data-name-style="name_epic_glacier"]{--name-color:#056487;--name-gradient:linear-gradient(110deg,#056487,#55cce8,#c6f7ff,#0b72ae,#056487)}
[data-name-style="name_epic_comet"]{--name-color:#9b247b;--name-gradient:linear-gradient(110deg,#7042bb,#d8358b,#c18a0a,#127bba,#7042bb)}

/* Keep signature artwork on the nickname, independent of stretched grid/flex rows. */
.name-signature{display:inline-block;position:relative;isolation:isolate;max-width:100%;vertical-align:baseline}
.name-signature>.name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.name-signature>.name-effects{left:0;width:100%;max-width:100%}

/* Consistent crown before the nickname, independent of name gradients. */
body .vip-crown{display:inline-flex!important;position:relative;align-items:center;justify-content:center;vertical-align:-2px;flex:none;width:17px;height:17px;margin:0 4px 0 0;padding:0!important;border:0!important;border-radius:0!important;background:none!important;color:#f6c64e!important;-webkit-text-fill-color:#f6c64e!important;text-shadow:none;filter:none;letter-spacing:0}
body .vip-crown svg{display:block;width:17px;height:17px;overflow:visible;fill:currentColor;stroke:#f6c64e;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
body .vip-crown:focus{outline:2px solid #f6c64e;outline-offset:2px}
body .vip-crown:focus::after{content:attr(aria-label);position:absolute;z-index:20;top:100%;left:0;width:max-content;padding:4px 7px;border:1px solid #566c89;border-radius:5px;background:#142235;color:#fff;font:11px/1.4 sans-serif;-webkit-text-fill-color:#fff}

/* Scale sample typography to its actual preview box, including narrow cards. */
:is(.promo-art,.highlight-art,.shop-item-icon,.shop-preview-art,.inventory-art):has(.name-preview){display:flex;align-items:center;justify-content:center;box-sizing:border-box;container-type:inline-size;overflow:hidden;min-width:0;padding:6px}
:is(.promo-art,.highlight-art,.shop-item-icon,.shop-preview-art,.inventory-art) .name-preview{display:block;box-sizing:border-box;min-width:0;max-width:100%;font-size:clamp(8px,21cqi,24px)!important;line-height:1.6;letter-spacing:-.03em;white-space:nowrap}
:is(.promo-art,.highlight-art,.shop-item-icon,.shop-preview-art,.inventory-art) .name-signature{max-width:100%}