/* Social input owns only its thumb. The joystick remains live underneath. */
#arena #emote{left:auto;right:max(19px,env(safe-area-inset-right));bottom:calc(max(16px,env(safe-area-inset-bottom)) + 2 * clamp(60px,13.8vh,80px) + 25px);transform:none;width:43px;height:43px;border-color:#b6daeb;background:linear-gradient(145deg,#234c6c,#142c4b);box-shadow:0 3px 12px #07192b66;z-index:5;display:grid;place-items:center;padding:7px;touch-action:none}
#arena #emote,#arena #emote *,#arena #emoteTray.social-panel,#arena #emoteTray.social-panel *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none}
#arena #emote svg{display:block;width:100%;height:100%;pointer-events:none;color:#daf4ff}
#arena #emoteTray.social-panel{--wheel-size:min(222px,calc(100dvh - 168px));left:auto;right:max(14px,env(safe-area-inset-right));top:max(77px,calc(env(safe-area-inset-top) + 68px));bottom:auto;transform:none;width:min(284px,48vw);max-height:calc(100dvh - 88px);display:flex;flex-direction:column;gap:5px;padding:8px;border:1px solid #adcddd;border-radius:18px;background:linear-gradient(145deg,#22405bf5,#10243ff7);box-shadow:0 8px 32px #02102088,inset 0 1px 0 #e9f6ff44;z-index:6;overflow:hidden;font-size:11px;line-height:1.2;direction:ltr}
#arena #controls:has(.social-panel:not(.hidden)) .combat{visibility:hidden;pointer-events:none}
/* Keep the opener mounted and captured while the finger moves over the wheel. */
#arena #controls:has(.social-panel:not(.hidden)) #emote{opacity:.24}
#arena #emoteTray.social-panel .social-header{display:flex;align-items:center;gap:5px;flex-shrink:0;direction:inherit}
#arena #emoteTray.social-panel .social-tabs{display:flex;flex:1;gap:3px;min-width:0}
#arena #emoteTray.social-panel button{color:#ccecff;font-family:inherit;font-size:11px;font-weight:800;line-height:1.2;min-height:27px;margin:0;padding:4px 6px;border-radius:8px;background:#214665;border:1px solid #7298b277;overflow:hidden;text-shadow:none;letter-spacing:0;touch-action:none}
/* Explicit descendants defeat broad game-control span sizing on Android. */
#arena #emoteTray.social-panel button span,#arena #emoteTray.social-panel button b,#arena #emoteTray.social-panel button small{font-family:inherit;font-size:11px;font-weight:800;line-height:1.2;margin:0;letter-spacing:0;text-shadow:none;pointer-events:none}
#arena #emoteTray.social-panel .social-tabs button{flex:1;min-width:0;padding:5px 3px;font-size:10px;white-space:nowrap}
#arena #emoteTray.social-panel .social-tabs button.active{color:#162b43;background:linear-gradient(115deg,#ffe899,#edbd66);border-color:#fff0b2}
#arena #emoteTray.social-panel .social-close{min-width:27px;width:27px;height:27px;min-height:27px;padding:0;font-size:22px;line-height:1;background:#17314c;color:#fff0c0}
#arena #emoteTray.social-panel .social-wheel{position:relative;display:block;flex:none;align-self:center;width:min(calc(var(--wheel-size) * 1.3),100%);height:var(--wheel-size);min-height:0;overflow:visible;border:1px solid #7198b84f;border-radius:50%;background:repeating-conic-gradient(from -30deg,#2f56796b 0deg 58deg,#83c5e052 58deg 60deg);direction:ltr}
#arena #emoteTray.social-panel .social-slot{position:absolute;left:var(--slot-x);top:var(--slot-y);width:clamp(56px,calc(var(--wheel-size) * .35),77px);height:clamp(40px,calc(var(--wheel-size) * .26),57px);min-height:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:3px;border-radius:11px;text-align:center;color:#fff4d6;background:linear-gradient(145deg,#305a78,#1b3855);border:1px solid #91b5cb8a;box-shadow:0 2px 4px #08192d77}
#arena #emoteTray.social-panel .social-slot:active{transform:translate(-50%,-50%)}
#arena #emoteTray.social-panel .social-slot.selected{color:#142b43;background:linear-gradient(145deg,#fff2bc,#ecc267);border-color:#fff5ce;box-shadow:0 0 0 2px #fff2bd88,0 0 15px #edc66b66;z-index:2}
#arena #emoteTray.social-panel .social-slot .social-option-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:10px;line-height:1.15;max-height:2.3em;max-width:100%;overflow:hidden;overflow-wrap:anywhere;direction:inherit}
#arena #emoteTray.social-panel[dir=rtl] .social-slot .social-option-label{direction:rtl}
#arena #emoteTray.social-panel .social-reaction-icon{width:22px;height:21px;flex:0 0 21px;pointer-events:none}
#arena #emoteTray.social-panel .social-slot .social-dance-icon{font-size:18px;line-height:1;color:#ffe7a7}
#arena #emoteTray.social-panel .social-slot.selected .social-dance-icon{color:#264366}
#arena #emoteTray.social-panel .social-wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30%;height:30%;min-height:0;border-radius:50%;padding:3px;font-size:9px;line-height:1.25;color:#d7ecf5;border:1px solid #94c4dc88;background:#142d49;box-shadow:0 0 0 4px #0e213ba8;z-index:3}
#arena #emoteTray.social-panel .social-wheel-center:active{transform:translate(-50%,-50%)}
#arena #emoteTray.social-panel .social-pager{display:flex;justify-content:space-between;align-items:center;gap:4px;color:#b8d8eb;flex-shrink:0;direction:inherit}
#arena #emoteTray.social-panel .social-pager button{font-size:9px;min-height:25px;padding:4px 6px}
#arena #emoteTray.social-panel .social-pager-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:2px}
#arena #emoteTray.social-panel .social-wheel-hint,#arena #emoteTray.social-panel .social-page-count{font-size:9px;line-height:1.1;font-weight:600;white-space:nowrap;letter-spacing:0;margin:0}
#arena #emoteTray.social-panel .social-page-count{color:#e7c880;direction:ltr}
@media(max-height:360px){#arena #emoteTray.social-panel{padding:6px;gap:4px;width:min(256px,46vw);--wheel-size:calc(100dvh - 165px)}#arena #emoteTray.social-panel .social-slot .social-option-label{font-size:9px;line-height:1.15}#arena #emoteTray.social-panel .social-reaction-icon{width:19px;height:18px;flex-basis:18px}#arena #emoteTray.social-panel .social-slot .social-dance-icon{font-size:16px}}
/* A 40px slot retains 34px inside its border/padding: 12px icon + 1px gap + two 10.35px text lines. */
@media(max-height:340px){#arena #emoteTray.social-panel .social-slot{padding:2px}#arena #emoteTray.social-panel .social-reaction-icon{width:12px;height:12px;flex-basis:12px}#arena #emoteTray.social-panel .social-slot .social-dance-icon{font-size:12px}}
@media(orientation:portrait){#arena #emoteTray.social-panel{width:min(300px,74vw)}}