@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&display=swap');

*{user-select:none}

.rtp-wrapper{
padding:20px;
background:linear-gradient(135deg,#5c0030,#a8004d);
}

.rtp-battle{
display:flex;
gap:10px;
}

.rtp-card{
position:relative;
flex:1;
max-width:50%;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(15px);
border:2px solid #d4af37;
border-radius:15px;
overflow:hidden;
transition:all 0.2s ease;
}

.rtp-card.pressed{
transform:scale(1.04);
}

.rtp-card.leader{
box-shadow:0 0 25px #ffd700;
}

.rtp-crown{
display:none;
position:absolute;
top:6px;
right:6px;
font-size:24px;
animation:bounce 1.5s infinite;
}

@keyframes bounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-4px);}
}

.rtp-leader{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
background:#ffd700;
color:#000;
text-align:center;
font-size:13px;
padding:4px;
font-weight:bold;
}

.rtp-img-wrap{
position:relative;
text-align:center;
background:#000;
}

.rtp-img-wrap img{
width:100%;
height:260px;
object-fit:contain; /* Desktop fix */
background:#000;
}

/* Mobile */
@media(max-width:768px){
.rtp-img-wrap img{
object-fit:cover;
}
}

.rtp-name{
position:absolute;
bottom:0;
width:100%;
padding:8px;
background:linear-gradient(to top,rgba(0,0,0,0.85),transparent);
color:#ffd700;
font-family:'Cairo',sans-serif;
text-align:center;
}

.rtp-count-label{
position:absolute;
top:8px;
left:8px;
color:#fff;
font-size:12px;
}

.rtp-count{
position:absolute;
top:25px;
left:8px;
color:#ffd700;
font-weight:bold;
}

.rtp-btn{
width:100%;
padding:8px;
background:linear-gradient(45deg,#ffd700,#caa000);
border:none;
font-weight:bold;
cursor:pointer;
}

.rtp-heart{
position:fixed;
font-size:42px;
color:#ff4d88;
animation:floatUp 1s forwards;
z-index:9999;
pointer-events:none;
}

@keyframes floatUp{
0%{transform:scale(0);opacity:1;}
100%{transform:translateY(-120px) scale(1.6);opacity:0;}
}