/* FIRST WIN OF THE DAY ribbon (first-win.js). On BATTLE! it takes the FREE ENTRY tag's place. */
.first-win{position:absolute;left:50%;bottom:-36px;width:min(306px,86%);transform:translateX(-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 3px 0 #2a0308) drop-shadow(0 6px 8px #0007)}
.first-win[hidden]{display:none}
.first-win>svg{display:block;width:100%;height:auto;overflow:visible}
.first-win text{font:400 19px 'Lilita One',sans-serif;letter-spacing:.6px;fill:#fff3cf;stroke:#4a0710;stroke-width:4px;paint-order:stroke fill;stroke-linejoin:round}
.first-win>b{position:absolute;right:-1%;top:22px;display:flex;align-items:center;gap:2px;padding:2px 8px 3px 3px;border-radius:15px;border:2px solid #052039;background:linear-gradient(180deg,#2a457e,#152954 55%,#123364);box-shadow:0 0 0 2px #f6b923,0 2px 0 #080b25,inset 0 2px 0 #4a71b3;color:#ffe066;font:400 17px/1 'Lilita One',sans-serif;text-shadow:0 2px 0 #0a0b23;transform:rotate(9deg)}
.first-win>b svg{width:20px;height:20px;filter:drop-shadow(0 1px 0 #000)}
.home-battle.first-win-day .battle-rules{visibility:hidden}
@media(min-width:501px){.home-battle .first-win{bottom:-46px;width:min(408px,74%)}.home-battle .first-win>b{font-size:21px;top:19px;right:-3%;padding:3px 11px 4px 4px;border-radius:19px}.home-battle .first-win>b svg{width:27px;height:27px}}
@media(max-height:740px){.home-battle .first-win{bottom:-30px;width:min(268px,82%)}.home-battle .first-win>b{font-size:15px;top:17px}.home-battle .first-win>b svg{width:17px;height:17px}}
@media(orientation:landscape) and (max-height:560px){.home-battle .first-win{bottom:-22px;width:min(215px,63%)}.home-battle .first-win>b{font-size:12px;top:12px;padding:1px 6px 2px 2px}.home-battle .first-win>b svg{width:13px;height:13px}}
/* On the win screen it hangs under the coins panel; the note below makes room. */
.arena-result-rewards .first-win{bottom:auto;top:calc(100% - 8px);width:min(330px,110%,calc(100vw - 24px));animation:first-win-in .5s cubic-bezier(.3,1.6,.5,1) .75s both}
.arena-result-rewards .first-win>svg{width:100%;height:auto}
.arena-result-rewards .first-win text{font-size:18px}
.arena-result-rewards:has(.first-win)+.arena-result-note,.arena-result-rewards:has(.first-win)+.arena-result-extra,.arena-result-rewards:has(.first-win)+.win-chest{margin-top:58px}
@keyframes first-win-in{from{opacity:0;transform:translateX(-50%) scale(.4) rotate(-8deg)}to{opacity:1;transform:translateX(-50%) scale(1) rotate(0)}}
.reduce-motion .arena-result-rewards .first-win{animation:none}