/* Emotes (emotes.js): the "jelly ball" button in the footer's left corner, the column it opens above it, and the
   bubble by a player's picture. --u scales the button (64 units across). */
.arena-mode .ability-side{position:relative;align-self:center}
.emote-button{--u:.94px;position:relative;width:calc(var(--u)*64);height:calc(var(--u)*64);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.emote-button>span,.emote-body>*{position:absolute;pointer-events:none}
.emote-body{inset:0}
.emote-halo{inset:calc(var(--u)*-5);border-radius:50%;background:radial-gradient(circle,#ffd24a66,transparent 70%)}
.emote-rim{inset:0;border-radius:50%;background:conic-gradient(from 200deg,#fff2b8,#d9a12c,#7a4a0e,#e7b443,#fff2b8,#b8801c,#7a4a0e,#fff2b8);box-shadow:0 calc(var(--u)*5) calc(var(--u)*9) #000b}
.emote-face{inset:calc(var(--u)*4);border-radius:50%;background:#1b1426;padding:calc(var(--u)*1)}
.emote-button .emote-jelly{display:block;width:100%;height:100%}
.emote-badge{right:calc(var(--u)*-6);bottom:calc(var(--u)*-2);width:calc(var(--u)*24);height:calc(var(--u)*19);border-radius:calc(var(--u)*8);background:linear-gradient(#5fb4ff,#1f4fa8);border:calc(var(--u)*2) solid #1b1426;display:grid;place-items:center;color:#fff;font:400 calc(var(--u)*12)/0 'Lilita One',sans-serif}
.emote-badge::after{content:"";position:absolute;left:calc(var(--u)*3);bottom:calc(var(--u)*-6);width:calc(var(--u)*7);height:calc(var(--u)*7);background:#1f4fa8;clip-path:polygon(0 0,100% 0,0 100%)}
/* It winks every 15 s or so, so new players notice it, and squishes like jelly when tapped. */
.emote-eyes{transform-box:fill-box;transform-origin:center;animation:emote-wink 15s ease-in-out 4s infinite}
@keyframes emote-wink{0%,96%,100%{transform:none}98%{transform:scaleY(.12)}}
.emote-button.squish .emote-body{animation:emote-squish .42s ease-out}
@keyframes emote-squish{30%{transform:scale(1.14,.86)}55%{transform:scale(.92,1.08)}80%{transform:scale(1.03,.97)}}
.emote-button[aria-expanded="true"] .emote-rim{box-shadow:0 0 calc(var(--u)*14) #ffd24a}
.emote-button:focus-visible,.emote-menu button:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* The column of emotes above the button, popping up one after another. */
.emote-menu{position:absolute;left:4px;bottom:calc(100% + 8px);z-index:30;display:flex;flex-direction:column-reverse;gap:7px;padding:6px;border-radius:26px;background:#0d1630e6;border:2px solid #ffd24a;box-shadow:0 6px 16px #000a}
.emote-menu[hidden]{display:none}
.emote-menu button{width:44px;height:44px;padding:2px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a3f80,#14204a);border:2px solid #3d5fb8;box-shadow:0 2px 0 #0a1230;display:grid;place-items:center;font-size:23px;line-height:1;cursor:pointer;animation:emote-in .22s ease-out both}
.emote-menu button:nth-child(2){animation-delay:.04s}.emote-menu button:nth-child(3){animation-delay:.08s}.emote-menu button:nth-child(4){animation-delay:.12s}.emote-menu button:nth-child(5){animation-delay:.16s}
@keyframes emote-in{from{opacity:0;transform:translateY(10px) scale(.6)}}
.emote-menu img{width:100%;height:100%;object-fit:contain}
.emote-menu.cooling .emote-pick{opacity:.4;filter:grayscale(1)}
.emote-menu .emote-mute{background:#24356e;border-color:#3d5fb8;font-size:18px}
.emote-menu .emote-mute[aria-checked="true"]{background:#4d1a22;border-color:#e2384d}
/* The bubble under a player's picture at the top. */
.emote-bubble{position:absolute;top:calc(100% + 4px);z-index:25;display:grid;place-items:center;width:52px;height:52px;padding:3px;border-radius:16px;background:#fff;border:2px solid #19203b;box-shadow:0 3px 0 #0a1230;font-size:26px;line-height:1;pointer-events:none;
  animation:emote-pop 2.2s ease-out forwards}
.emote-bubble img{width:100%;height:100%;object-fit:contain}
.emote-bubble::before{content:"";position:absolute;top:-8px;border:6px solid transparent;border-top:0;border-bottom:8px solid #19203b}
.emote-bubble.rival{left:12px}.emote-bubble.rival::before{left:10px}
.emote-bubble.mine{right:12px}.emote-bubble.mine::before{right:10px}
@keyframes emote-pop{0%{transform:scale(.3);opacity:0}12%{transform:scale(1.15);opacity:1}20%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
.reduce-motion :is(.emote-bubble,.emote-eyes,.emote-body,.emote-menu button){animation:none}
@media(prefers-reduced-motion:reduce){:is(.emote-bubble,.emote-eyes,.emote-body,.emote-menu button){animation:none}}
@media(max-height:700px){.emote-button{--u:.84px}}
/* The YOUR EMOTES panel in Fighters, under the squad (same frame as the squad panel). */
#collection-view .emote-editor{margin:0 0 14px;padding:12px 10px 12px;border-radius:16px;border:2px solid #e2b553;background:linear-gradient(180deg,#22407e,#162d61 60%,#122653);box-shadow:0 0 0 2px #081028,0 5px 0 2px #050a1d,0 10px 14px #0007,inset 0 2px 0 #ffffff2e}
.emote-editor-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.emote-editor-heading strong{font:400 22px/1 'Lilita One',sans-serif;letter-spacing:.5px;color:#ffd84a;-webkit-text-stroke:1.5px #6b3508;paint-order:stroke fill;text-shadow:0 2px 0 #6b3508}
.emote-editor-heading span{font:400 16px/1 'Lilita One',sans-serif;color:#fff;border:2px solid #e2b553;border-radius:10px;padding:5px 9px;background:#0d1630}
.emote-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.emote-slot{position:relative;aspect-ratio:1;max-height:118px;width:100%;justify-self:center;padding:8%;border-radius:16px;background:radial-gradient(circle at 50% 40%,#3b5bb5,#1b2c62);border:3px solid #6f8fe0;box-shadow:inset 0 -6px 10px #0006,0 3px 0 #0a1230;display:grid;place-items:center;cursor:pointer}
.emote-slot img,.emote-choice img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.emote-slot em{position:absolute;left:7px;top:5px;font:400 15px/1 'Lilita One',sans-serif;font-style:normal;color:#ffe27a;text-shadow:0 2px 0 #0a1230}
.emote-slot.open{border-color:#ffd24a;box-shadow:0 0 0 2px #ffd24a,0 0 16px #ffd24a99}
.emote-slot:active,.emote-choice:active:not(:disabled){transform:scale(.95)}
.emote-hint{margin:10px 0 7px;text-align:center;font-size:12.5px;font-weight:800;color:#9fe3a8}
.emote-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:9px;border-radius:14px;background:#0d1630;animation:emote-tray-in .2s ease-out}
@keyframes emote-tray-in{from{opacity:0;transform:translateY(-6px)}}
.emote-choice{position:relative;aspect-ratio:1;padding:6%;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a3f80,#14204a);border:2px solid #3d5fb8;cursor:pointer}
.emote-choice.here{border-color:#ffd24a;box-shadow:0 0 0 2px #ffd24a}
.emote-choice.used{opacity:.45;cursor:default}
.emote-choice.used::after{content:"✓";position:absolute;right:-3px;top:-3px;width:18px;height:18px;border-radius:50%;background:#3ccf74;color:#fff;font:800 12px/18px sans-serif;text-align:center;border:2px solid #0d1630}
.emote-slot:focus-visible,.emote-choice:focus-visible{outline:3px solid #fff;outline-offset:2px}
.reduce-motion .emote-tray{animation:none}
@media(prefers-reduced-motion:reduce){.emote-tray{animation:none}}
/* The Shop's EMOTES section (app.js emoteCards), on the coin pack cards. */
.emotes-market h2{margin:0;font:400 clamp(20px,5.5cqw,26px)/1 'Lilita One',sans-serif;color:#fff;text-shadow:0 2px #0a1230}
.emote-pack h3{color:#fff;-webkit-text-stroke:1.6px #081028;text-shadow:0 2px 0 #081028}
.gem-buy-button.is-owned{background:linear-gradient(180deg,#5ad57f,#2a9a4f);border-color:#0e4a23;font:400 15px 'Lilita One',sans-serif;color:#fff}
.emotes-market .shop-section-heading p{margin:4px 0 0;color:#e2edff;font-weight:700;text-shadow:0 1px 2px #000,0 0 6px #0a1230}