.pippic{position:relative;margin:0 auto;pointer-events:none;width:100%;height:100%}.pippic__fig{position:absolute;left:50%;bottom:9%;height:91%;aspect-ratio:600/654;translate:-50% 0;transform-origin:50% 95%;will-change:transform}.pippic__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.pippic__disc{position:absolute;left:50%;bottom:0;width:min(83.5%,calc(91% * 600 / 654 * .835 / .91));translate:-50% 0}.pippic__disc img{display:block;width:100%;height:auto}.mascot-host{overflow:hidden;background:radial-gradient(120% 80% at 50% 70%,#3a2275 0,#1b1238 55%,#0a0712 100%)}.mascot-host__figure{position:absolute;left:50%;bottom:18%;width:min(78%,420px);height:min(58%,460px);translate:-50% 0;filter:drop-shadow(0 18px 18px rgba(0,0,0,.45))}.mascot-host.is-compact .mascot-host__figure{bottom:4%;width:74%;height:92%}.is-gameplay .mascot-host{background:radial-gradient(120% 90% at 50% 80%,#3a2275 0,#160e2c 100%)}.mascot-caption{position:absolute;z-index:12;left:16px;right:16px;top:calc(72px + env(safe-area-inset-top));bottom:auto;margin:0 auto;max-width:560px;padding:16px 16px 12px;border-radius:18px;font:600 16px/1.4 inherit;color:#fff;text-align:left;text-shadow:0 1px 4px rgba(10,0,50,.45);background:linear-gradient(160deg,rgba(58,30,120,.94),rgba(30,20,90,.92));box-shadow:inset 0 0 0 1.5px hsla(0,0%,100%,.4),0 8px 18px rgba(10,0,50,.4);animation:mascot-say .3s cubic-bezier(.3,1.5,.5,1) both}.mascot-caption b,.mascot-reaction b{position:absolute;top:-10px;left:14px;padding:2px 10px;border-radius:99px;font:700 11px/1.2 inherit;letter-spacing:.08em;text-transform:uppercase;color:#3a1659;text-shadow:none;background:linear-gradient(180deg,#ffd24a,#ff9a1c)}.mascot-caption.is-compact{font-size:13.5px;padding:13px 12px 9px}.mascot-caption.is-compact,.mascot-reaction.is-compact{top:auto;bottom:calc(24px + env(safe-area-inset-bottom));left:16px;right:16px;max-width:none}.mascot-caption.is-compact~.mascot-reaction.is-compact{bottom:calc(104px + env(safe-area-inset-bottom))}.mascot-reaction{position:absolute;z-index:13;right:16px;top:calc(224px + env(safe-area-inset-top));max-width:min(60%,260px);margin:0;padding:13px 12px 9px;border-radius:16px;font:700 14px/1.35 inherit;color:#3a1659;background:#fff8e6;box-shadow:0 8px 18px rgba(10,0,50,.35);animation:mascot-say .3s cubic-bezier(.3,1.5,.5,1) both}.mascot-reaction b{color:#fff;background:linear-gradient(180deg,#8f6bff,#6042b8)}.broadcast-show:not(.is-gameplay) .mascot-reaction{top:calc(184px + env(safe-area-inset-top));bottom:auto;right:16px}.mascot-caption:not(.is-compact):after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;translate:-50% 0;rotate:45deg;background:inherit;border-radius:3px}@keyframes mascot-say{0%{opacity:0;scale:.92}to{opacity:1;scale:1}}.mascot-host__sparkles{position:absolute;inset:0;pointer-events:none}.mascot-host__sparkles i{position:absolute;left:calc(8% + (var(--i) * 47 % 84) * 1%);top:105%;width:10px;height:10px;border-radius:2px;background:hsl(calc(var(--i) * 41) 95% 65%);animation:mascot-sparkle calc(2.2s + (var(--i) * 13 % 9) * .15s) linear calc((var(--i) * 7 % 10) * -.25s) infinite}@keyframes mascot-sparkle{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(-120vh) rotate(540deg);opacity:.2}}.mascot-settings{display:grid;grid-gap:4px;gap:4px}@media (prefers-reduced-motion:reduce){.mascot-caption,.mascot-caption .mascot-text,.mascot-reaction{animation:none}.mascot-host__sparkles{display:none}}.mascot-host__tap{position:absolute;inset:0;z-index:2;border:0;padding:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.broadcast-show.is-ai-host .mascot-caption.is-compact,.broadcast-show.is-ai-host .mascot-reaction.is-compact{top:auto;bottom:calc(82px + env(safe-area-inset-bottom));left:16px;right:16px;z-index:30}.broadcast-show.is-ai-host .mascot-caption.is-compact~.mascot-reaction.is-compact{top:auto;bottom:calc(150px + env(safe-area-inset-bottom))}.broadcast-show.is-ai-host:has(.mascot-caption.is-compact:not(.is-beside),.mascot-reaction.is-compact) .broadcast-game-overlay{bottom:calc(150px + env(safe-area-inset-bottom))}.mascot-caption.is-compact .mascot-text,.mascot-reaction.is-compact .mascot-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.mascot-caption.is-compact .mascot-text{-webkit-line-clamp:2}.mascot-caption:not(.is-compact) .mascot-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.mascot-caption .mascot-text{animation:mascot-piece .22s ease-out both}@keyframes mascot-piece{0%{opacity:0}to{opacity:1}}.broadcast-show.is-ai-host .mascot-caption.is-compact{background:linear-gradient(160deg,#3a1e78,#1e145a)}.mascot-caption .mascot-personal{display:block;margin-top:6px;padding:6px 10px;border-radius:10px;font:700 13.5px/1.3 inherit;color:#3a1659;background:#fff8e6;text-shadow:none;animation:mascot-say .3s cubic-bezier(.3,1.5,.5,1) both}.champfig{position:relative;width:100%;height:100%;margin:0 auto;pointer-events:none}.champfig__pictures{position:absolute;inset:0;transition:opacity .2s}.champclip{inset:0;overflow:visible}.champclip,.champclip__cv{position:absolute;pointer-events:none}.champclip__cv{display:block;opacity:0;transition:opacity .2s}.champclip__cv[data-ready=true]{opacity:1}.broadcast-show.is-ai-host .mascot-caption.is-beside{top:calc(172px + env(safe-area-inset-top));bottom:auto;left:calc(50% + 78px);right:10px;max-width:150px;translate:0 -50%;margin:0;padding:6px 9px;border-radius:12px;font:600 12px/1.3 inherit;text-shadow:none;z-index:13;background:linear-gradient(160deg,#3a1e78,#1e145a);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.35),0 4px 10px rgba(10,0,50,.35);animation:none}.broadcast-show.is-ai-host .mascot-caption.is-beside:before{content:"";position:absolute;left:-5px;top:50%;width:10px;height:10px;translate:0 -50%;rotate:45deg;background:#34196e;box-shadow:inset 1px -1px 0 hsla(0,0%,100%,.35)}.broadcast-show.is-ai-host .mascot-caption.is-beside .mascot-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}@media (max-height:600px){.broadcast-show.is-ai-host .mascot-caption.is-beside{top:calc(131px + env(safe-area-inset-top));left:calc(50% + 53px)}}@media (max-height:560px){.broadcast-show.is-ai-host .mascot-caption.is-beside{top:calc(115px + env(safe-area-inset-top))}}@media (max-width:339px){.broadcast-show.is-ai-host .mascot-caption.is-beside{top:calc(246px + env(safe-area-inset-top));left:20px;right:20px;max-width:none;translate:none;text-align:center}.broadcast-show.is-ai-host .mascot-caption.is-beside:before{left:50%;top:-5px;translate:-50% 0}.broadcast-show.is-question:has(.mascot-caption.is-beside) .broadcast-game-overlay{top:calc(300px + env(safe-area-inset-top))}}.broadcast-show.is-ai-host.is-round-results .mascot-caption.is-beside{left:calc(50% + 70px)}.broadcast-show.is-ai-host.is-learning .mascot-caption.is-beside{top:calc(64px + clamp(140px, 27dvh, 235px) / 2 + env(safe-area-inset-top));left:calc(50% + 72px);right:26px}@media (max-height:600px){.broadcast-show.is-ai-host.is-round-results .mascot-caption.is-beside{top:calc(134px + env(safe-area-inset-top));left:calc(50% + 46px)}}@media (max-height:560px){.broadcast-show.is-ai-host.is-learning .mascot-caption.is-beside{top:calc(64px + 52px + env(safe-area-inset-top))}}@media (max-width:339px){.broadcast-show.is-ai-host.is-learning .mascot-caption.is-beside{top:auto;bottom:auto;top:calc(64px + clamp(140px, 27dvh, 235px) - 44px + env(safe-area-inset-top));left:28px;right:28px}.broadcast-show.is-round-results:has(.mascot-caption.is-beside) .broadcast-game-overlay{top:calc(300px + env(safe-area-inset-top))}}.broadcast-show.is-diagnostics>.mascot-host .mascot-host__figure,.broadcast-show.is-final>.mascot-host .mascot-host__figure,.broadcast-show.is-question>.mascot-host .mascot-host__figure,.broadcast-show.is-round-results>.mascot-host .mascot-host__figure{bottom:9%;height:82%;width:90%}.broadcast-show.is-winners>.mascot-host{background:transparent}.broadcast-show.is-winners>.mascot-host .mascot-host__figure{bottom:0;width:100%;height:100%}.broadcast-show.is-ai-host.is-diagnostics .mascot-caption.is-beside,.broadcast-show.is-ai-host.is-final .mascot-caption.is-beside{left:calc(50% + 70px)}