.ranking-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.rank-card{background:#181b22;border:1px solid #222;padding:16px 16px 18px;border-radius:14px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:.3s}
.rank-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px -8px rgba(0,0,0,.55)}
.rank-card .rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.rank-card .rc-title{font-weight:700;font-size:1.05rem;line-height:1.2}
.rank-card .rc-badge{font-size:.65rem;font-weight:700;padding:6px 10px;border-radius:8px;background:#252b35;border:1px solid #2f3742;letter-spacing:.5px;white-space:nowrap}
.rank-card .rc-sub{font-size:.72rem;opacity:.75;min-height:18px}
.rank-card .rc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.63rem;letter-spacing:.3px}
.rank-card .pill{padding:4px 8px;border-radius:8px;background:#20262f;font-weight:600}
.rank-card .pill-fs{background:#20262f}
.rank-card .pill-wager{background:#20262f}
.rank-card .pill-rating{background:#27222c}
.rank-card .pill-banner{text-transform:uppercase;background:#2b2530}
.rank-card .pill:nth-child(2){background:#27222c}
.rank-card .pill:last-child{background:#2b2530}
/* Banner styles (uniform regardless of ranking position) */
.banner-gold{box-shadow:0 0 0 1px rgba(255,215,0,.25),0 0 22px -6px rgba(255,215,0,.4) inset;border-color:rgba(255,215,0,.35)!important;background:linear-gradient(160deg,rgba(255,215,0,.12),rgba(255,215,0,.02))}
.banner-red{box-shadow:0 0 0 1px rgba(160,20,20,.4),0 0 28px -8px rgba(200,30,30,.5) inset;border-color:rgba(200,40,40,.45)!important;background:linear-gradient(150deg,rgba(200,40,40,.16),rgba(120,20,20,.04))}
/* Responsive */
@media (max-width:640px){.ranking-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}

/* --- Redesigned card layout --- */
.rank-card.redesigned{padding:30px 18px 20px 18px;gap:14px;align-items:stretch;}
.rank-card.redesigned .rc-rank-badge{position:absolute;top:10px;left:10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#232a33;border:2px solid #3b4a60;font-size:.8rem;font-weight:700;border-radius:50%;letter-spacing:.5px;box-shadow:0 4px 10px -4px rgba(0,0,0,.6);z-index:4;color:#d0d4d9}
/* Special banner styles influence badge (neutral intensity, no rank dependence) */
.banner-gold .rc-rank-badge{background:linear-gradient(135deg,#d4af37,#8a6d18);border-color:#e0c157;color:#fff}
.banner-red .rc-rank-badge{background:linear-gradient(135deg,#c94d4d,#7a1e1e);border-color:#d96868;color:#fff}
.rank-card.redesigned .rc-logo-wrap{width:100%;display:flex;align-items:center;justify-content:center;background:#12161c;border:1px solid #222;border-radius:12px;padding:20px 20px 18px;min-height:120px;position:relative}
.rank-card.redesigned .rc-logo-wrap.placeholder{font-size:1.8rem;font-weight:700;opacity:.4;letter-spacing:1px}
.rank-card.redesigned .rc-logo{max-width:120px;max-height:70px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.rank-card.redesigned .rc-name{text-align:center;font-size:1rem;font-weight:700;margin:0}
.rank-card.redesigned .rc-bonus-text{text-align:center;font-size:.7rem;opacity:.75;min-height:14px;margin-top:-6px}
.rank-card.redesigned .rc-bonus-text.is-empty{opacity:0;}
.rank-card.redesigned .rc-info-rows{display:flex;flex-direction:column;gap:6px;font-size:.7rem}
.rank-card.redesigned .rc-info-rows .row{display:flex;justify-content:space-between;align-items:center;background:transparent;border:1px solid transparent;padding:6px 10px;border-radius:8px;font-weight:600}
.rank-card.redesigned .rc-info-rows .row span{opacity:.65;font-weight:500}
/* Hide rows with empty values entirely while preserving overall spacing */
.rank-card.redesigned .rc-info-rows .row.is-empty{visibility:hidden}
/* Claim button base (will be themed) */
.rank-card.redesigned .claim-btn{display:block;text-align:center;width:100%;background:linear-gradient(90deg,#3c4450,#4a5563);padding:12px 14px;font-size:.7rem;font-weight:700;letter-spacing:.6px;border-radius:10px;text-transform:uppercase;border:1px solid #3f4854;color:#fff;position:relative;overflow:hidden;transition:filter .25s,box-shadow .25s}
.rank-card.redesigned .claim-btn:hover{filter:brightness(1.08)}
/* Typography adjustments */
.rank-card.redesigned .rc-name{font-family:'Antonio', 'Manrope', sans-serif;letter-spacing:.5px}
.rank-card.redesigned .claim-btn{font-family:'Exo 2','Manrope',sans-serif;font-weight:700}

/* Theming: card background + claim button variant colors */
/* Default: warm subtle gold/orange (non-pulsing) */
.banner-default.rank-card{background:linear-gradient(145deg,rgba(65,52,24,.35),rgba(32,29,24,.55) 40%,rgba(24,22,20,.85));border:1px solid rgba(180,140,60,.35)}
.rank-card.banner-default .claim-btn{background:linear-gradient(95deg,#c4821f,#e2a341 40%,#b36914);border-color:#e9b45c;box-shadow:0 0 0 1px rgba(255,190,90,.3),0 4px 14px -4px rgba(170,90,10,.5) inset;color:#fff}
.rank-card.banner-default .claim-btn:hover{box-shadow:0 0 0 1px rgba(255,205,120,.45),0 6px 18px -4px rgba(200,120,20,.6) inset;filter:brightness(1.06)}

/* Gold: richer luminous gold with gentle pulse */
@keyframes goldPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,215,120,.35),0 0 26px -8px rgba(255,210,90,.55) inset}50%{box-shadow:0 0 0 1px rgba(255,230,150,.55),0 0 32px -6px rgba(255,225,140,.75) inset}}
.banner-gold{background:linear-gradient(150deg,rgba(120,90,10,.75),rgba(60,45,10,.65) 35%,rgba(30,24,10,.85));border:1px solid rgba(255,220,120,.55)}
.banner-gold:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 65% 20%,rgba(255,230,160,.28),rgba(255,200,80,0) 60%)}
.rank-card.banner-gold .claim-btn{background:linear-gradient(100deg,#ffe38c,#e1b647 45%,#b98516);border-color:#ffec9d;animation:goldPulse 5.2s ease-in-out infinite;box-shadow:0 0 0 1px rgba(255,230,150,.5),0 4px 18px -6px rgba(190,120,15,.6) inset;color:#281c05;text-shadow:0 1px 2px rgba(255,255,255,.35)}
.rank-card.banner-gold .claim-btn:hover{filter:brightness(1.12)}

/* Red: molten red/orange with pulse */
@keyframes redPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,100,70,.3),0 0 24px -8px rgba(255,70,40,.55) inset}50%{box-shadow:0 0 0 1px rgba(255,140,110,.55),0 0 32px -6px rgba(255,90,50,.75) inset}}
.banner-red{background:linear-gradient(150deg,rgba(120,25,18,.78),rgba(70,16,14,.7) 38%,rgba(38,10,10,.88));border:1px solid rgba(210,60,40,.55)}
.banner-red:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 60% 18%,rgba(255,110,70,.25),rgba(255,60,30,0) 58%)}
.rank-card.banner-red .claim-btn{background:linear-gradient(105deg,#ff5a2e,#ff9448 33%,#d33b28 66%,#831a1a);border-color:#ff9862;animation:redPulse 5s ease-in-out infinite;box-shadow:0 0 0 1px rgba(255,120,70,.45),0 4px 20px -6px rgba(160,50,30,.6) inset;color:#fff}
.rank-card.banner-red .claim-btn:hover{filter:brightness(1.14)}

/* Preserve consistent shape/padding across variants */
.rank-card.banner-default,.rank-card.banner-gold,.rank-card.banner-red{border-radius:14px}

/* Animated emphasis for gold & red claim buttons (subtle scale pulse) */
@keyframes btnBreathGold{0%,100%{transform:translateZ(0) scale(1)}50%{transform:translateZ(0) scale(1.035)}}
@keyframes btnBreathRed{0%,100%{transform:translateZ(0) scale(1)}50%{transform:translateZ(0) scale(1.045)}}
.rank-card.banner-gold .claim-btn{animation:goldPulse 5.2s ease-in-out infinite, btnBreathGold 4.8s ease-in-out infinite}
.rank-card.banner-red .claim-btn{animation:redPulse 5s ease-in-out infinite, btnBreathRed 4.6s ease-in-out infinite}
.rank-card.banner-gold .claim-btn:hover, .rank-card.banner-red .claim-btn:hover{transform:scale(1.06)}
