/* Ultimate Teen Patti Hero - Casino Table Experience */

.hero.casino-theme {
    background: 
        radial-gradient(ellipse at 50% 120%, rgba(0, 100, 0, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 50% -20%, rgba(255, 215, 0, 0.1) 0%, transparent 40%),
        linear-gradient(180deg, #050505 0%, #0a0a0a 100%);
    min-height: 100vh;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Animated Light Rays */
.hero.casino-theme::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg at 50% 50%, 
        transparent 0deg, 
        rgba(255, 215, 0, 0.03) 10deg, 
        transparent 20deg,
        transparent 90deg,
        rgba(255, 215, 0, 0.03) 100deg,
        transparent 110deg,
        transparent 180deg,
        rgba(255, 215, 0, 0.03) 190deg,
        transparent 200deg,
        transparent 270deg,
        rgba(255, 215, 0, 0.03) 280deg,
        transparent 290deg
    );
    transform: translateX(-50%);
    animation: rotateLights 30s linear infinite;
    pointer-events: none;
}

@keyframes rotateLights {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

/* Spotlight Effect */
.hero.casino-theme::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Main Container */
.hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 20px 60px;
    position: relative;
    z-index: 2;
}

/* Top Badge Row */
.top-badges {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 20px;
    border-radius: 50px;
    color: #ccc;
    font-size: 0.9em;
    transition: all 0.3s;
}

.badge-item:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
}

.badge-item i {
    color: var(--primary-color);
}

/* Center Content */
.hero-center {
    text-align: center;
    margin-bottom: 40px;
}

/* Mega Title */
.mega-title {
    font-size: 5em;
    font-family: 'Russo One', sans-serif;
    line-height: 1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.mega-title .line1 {
    display: block;
    color: #fff;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
    animation: titleGlow 2s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    from { text-shadow: 0 0 30px rgba(255, 255, 255, 0.3); }
    to { text-shadow: 0 0 50px rgba(255, 255, 255, 0.5), 0 0 100px rgba(255, 215, 0, 0.2); }
}

.mega-title .line2 {
    display: block;
    font-size: 1.4em;
    background: linear-gradient(90deg, #ffd700, #ff8c00, #ffd700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShine 3s linear infinite;
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
}

@keyframes goldShine {
    to { background-position: 200% center; }
}

/* Win Amount Display */
.win-display {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(135deg, rgba(255, 69, 0, 0.2), rgba(255, 140, 0, 0.1));
    border: 2px solid rgba(255, 69, 0, 0.5);
    padding: 15px 40px;
    border-radius: 60px;
    margin-bottom: 30px;
    animation: winPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.win-display::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 215, 0, 0.1) 50%, transparent 60%);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

@keyframes winPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 69, 0, 0.3); transform: scale(1); }
    50% { box-shadow: 0 0 40px rgba(255, 69, 0, 0.6); transform: scale(1.02); }
}

.win-display .label {
    color: #ff8c00;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.win-display .amount {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5em;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.8);
}

/* Casino Table Scene */
.table-scene {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 420px;
    margin: 0 auto 40px;
    perspective: 1200px;
}

/* Poker Table */
.poker-table-3d {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotateX(45deg);
    width: 700px;
    height: 350px;
    background: 
        radial-gradient(ellipse at center, #1a5f2a 0%, #0d4d1a 60%, #0a3912 100%);
    border-radius: 350px / 175px;
    border: 20px solid #5d3a1a;
    box-shadow: 
        inset 0 0 100px rgba(0,0,0,0.5),
        0 50px 100px rgba(0,0,0,0.8),
        0 0 0 5px #3d2510,
        0 0 0 8px rgba(0,0,0,0.5);
}

.poker-table-3d::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 3px solid rgba(255, 215, 0, 0.3);
    border-radius: 330px / 160px;
    animation: tableBorder 2s ease-in-out infinite alternate;
}

@keyframes tableBorder {
    from { border-color: rgba(255, 215, 0, 0.2); }
    to { border-color: rgba(255, 215, 0, 0.5); }
}

/* Table Center Logo */
.poker-table-3d::after {
    content: '♠♥♦♣';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: rgba(255, 215, 0, 0.15);
    letter-spacing: 10px;
}

/* Cards on Table */
.table-cards {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 15px;
    z-index: 10;
}

.table-card {
    width: 110px;
    height: 155px;
    background: linear-gradient(145deg, #fff, #f5f5f5);
    border-radius: 12px;
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.5),
        0 0 20px rgba(255, 215, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    font-family: 'Georgia', serif;
    font-weight: bold;
    position: relative;
    transform-origin: center bottom;
    transition: all 0.3s ease;
}

.table-card::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    pointer-events: none;
}

.table-card:nth-child(1) { 
    transform: rotate(-15deg) translateY(10px);
    animation: cardHover 3s ease-in-out infinite;
    animation-delay: 0s; 
}
.table-card:nth-child(2) { 
    transform: translateY(-20px) scale(1.1);
    box-shadow: 
        0 0 60px rgba(255, 215, 0, 0.6), 
        0 20px 50px rgba(0,0,0,0.5);
    z-index: 11;
    animation: cardHover 3s ease-in-out infinite;
    animation-delay: 0.2s; 
}
.table-card:nth-child(3) { 
    transform: rotate(15deg) translateY(10px);
    animation: cardHover 3s ease-in-out infinite;
    animation-delay: 0.4s; 
}

@keyframes cardHover {
    0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}

.table-card:nth-child(1) { --rot: -15deg; }
.table-card:nth-child(2) { --rot: 0deg; }
.table-card:nth-child(3) { --rot: 15deg; }

.table-card:hover {
    transform: scale(1.15) translateY(-30px) !important;
    box-shadow: 0 0 80px rgba(255, 215, 0, 0.8), 0 30px 60px rgba(0,0,0,0.6);
    z-index: 20;
}

.table-card.red { color: #c41e3a; }
.table-card.black { color: #1a1a1a; }

.table-card .rank { font-size: 2em; line-height: 1; }
.table-card .suit { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 4em; 
    opacity: 0.9;
}
.table-card .rank-btm { 
    font-size: 2em; 
    text-align: right; 
    transform: rotate(180deg); 
    line-height: 1;
}

/* Chip Stacks */
.chip-stack {
    position: absolute;
    display: flex;
    flex-direction: column-reverse;
    z-index: 5;
}

.chip {
    width: 50px;
    height: 14px;
    border-radius: 50%;
    margin-bottom: -10px;
    box-shadow: 0 3px 5px rgba(0,0,0,0.4);
    position: relative;
}

.chip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.3);
}

.chip.gold { 
    background: linear-gradient(90deg, #ffd700 0%, #ffec8b 50%, #ffd700 100%); 
    border: 2px dashed #b8860b; 
}
.chip.red { 
    background: linear-gradient(90deg, #dc143c 0%, #ff6b6b 50%, #dc143c 100%); 
    border: 2px dashed #8b0000; 
}
.chip.blue { 
    background: linear-gradient(90deg, #1e90ff 0%, #87ceeb 50%, #1e90ff 100%); 
    border: 2px dashed #00008b; 
}
.chip.green { 
    background: linear-gradient(90deg, #228b22 0%, #90ee90 50%, #228b22 100%); 
    border: 2px dashed #006400; 
}

.chip-stack.left { left: 10%; bottom: 25%; }
.chip-stack.right { right: 10%; bottom: 25%; }

/* Winner Explosion */
.winner-explosion {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.winner-text {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5em;
    color: #ffd700;
    text-shadow: 
        0 0 10px #ffd700,
        0 0 20px #ff8c00,
        0 0 30px #ff4500,
        3px 3px 0 #000,
        -1px -1px 0 #000;
    animation: winnerPulse 0.5s ease-in-out infinite alternate;
    white-space: nowrap;
}

@keyframes winnerPulse {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.1); filter: brightness(1.2); }
}

/* Confetti */
.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall 3s linear infinite;
    pointer-events: none;
}

@keyframes confettiFall {
    0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}

/* Sparkle Effects */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    animation: sparkle 1.5s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

/* CTA Section */
.hero-cta {
    text-align: center;
}

.cta-download {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, #ff4500, #ff6b00);
    color: white;
    padding: 25px 60px;
    border-radius: 70px;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 
        0 10px 40px rgba(255, 69, 0, 0.5),
        inset 0 -5px 20px rgba(0,0,0,0.2),
        0 0 0 3px rgba(255, 69, 0, 0.3);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cta-download::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: ctaShine 2s infinite;
}

@keyframes ctaShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

.cta-download:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 
        0 20px 60px rgba(255, 69, 0, 0.6),
        inset 0 -5px 20px rgba(0,0,0,0.2),
        0 0 0 5px rgba(255, 69, 0, 0.4);
    background: linear-gradient(135deg, #ff5500, #ff7b00);
}

.cta-download i {
    font-size: 1.5em;
    animation: downloadBounce 1s ease-in-out infinite;
}

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

.cta-bonus {
    display: block;
    margin-top: 15px;
    font-size: 1.2em;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: bonusPulse 2s ease-in-out infinite;
}

@keyframes bonusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Stats Row */
.stats-row {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.stat-box {
    text-align: center;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.stat-box:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.stat-box .number {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5em;
    color: #fff;
    background: linear-gradient(180deg, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-box .label {
    color: #888;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Wave Divider Fix */
.custom-shape-divider-bottom-1678901234 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
}

.custom-shape-divider-bottom-1678901234 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.custom-shape-divider-bottom-1678901234 .shape-fill {
    fill: #0a0a0a;
}

/* Responsive */
@media (max-width: 992px) {
    .mega-title { font-size: 3em; }
    .poker-table-3d { width: 500px; height: 250px; transform: translateX(-50%) rotateX(40deg); }
    .table-card { width: 80px; height: 112px; padding: 8px; }
    .table-card .suit { font-size: 2.8em; }
    .table-card .rank { font-size: 1.5em; }
    .chip-stack { display: none; }
    .table-scene { height: 350px; }
    .winner-text { font-size: 1.8em; }
}

@media (max-width: 576px) {
    .hero-container { padding: 80px 15px 40px; }
    .mega-title { font-size: 2em; }
    .mega-title .line2 { font-size: 1.2em; }
    .win-display { padding: 10px 20px; flex-direction: column; text-align: center; }
    .win-display .amount { font-size: 1.5em; }
    .poker-table-3d { width: 280px; height: 140px; border-width: 10px; }
    .table-card { width: 55px; height: 77px; padding: 5px; border-radius: 6px; gap: 5px; }
    .table-card .rank { font-size: 1.1em; }
    .table-card .suit { font-size: 1.8em; }
    .table-card .rank-btm { font-size: 1.1em; }
    .table-scene { height: 280px; }
    .table-cards { gap: 8px; }
    .cta-download { padding: 18px 35px; font-size: 1em; gap: 12px; }
    .cta-download i { font-size: 1.2em; }
    .stats-row { gap: 15px; }
    .stat-box { padding: 10px 15px; }
    .stat-box .number { font-size: 1.8em; }
    .winner-text { font-size: 1.2em; }
    .top-badges { gap: 8px; }
    .badge-item { padding: 6px 12px; font-size: 0.75em; }
}

/* Live Players Bar */
.live-players-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    padding: 15px 30px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.player-avatars {
    display: flex;
}

.p-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8em;
    margin-left: -10px;
    border: 2px solid #0a0a0a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.p-avatar:first-child { margin-left: 0; }
.p-avatar.more {
    background: linear-gradient(135deg, #ff4500, #ff6b00);
    font-size: 0.7em;
    font-weight: bold;
}

.live-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    font-size: 0.9em;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #4CAF50;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
    50% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
}

/* Responsive for live players bar */
@media (max-width: 576px) {
    .live-players-bar {
        flex-direction: column;
        gap: 10px;
        padding: 12px 20px;
    }
    .live-text {
        font-size: 0.8em;
    }
    .p-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.7em;
    }
}