/* Dragon Ball Z Theme - Refactored CSS */

/* Base Styles */
.dbz-bg {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    background-attachment: fixed;
    position: relative;
}

.dbz-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/dbz-pattern.png');
    background-repeat: repeat;
    opacity: 0.05;
    z-index: -1;
}

.dbz-title {
    background: linear-gradient(to right, #f9d71c, #ff9500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 10px rgba(249, 215, 28, 0.3);
}

/* Component Styles */
/* Voting Cards Container */
#cards-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.75rem;
    overflow: hidden;
    padding-top: 0.5rem;
}

/* Consistent Card Width */
.dbz-card-btn {
    background: linear-gradient(135deg, #2a3f5f 0%, #1a2a4a 100%);
    border: 2px solid rgba(249, 215, 28, 0.5);
    color: white;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 4.25rem;
    /* Fixed width for all cards */
    height: 5rem;
    /* Fixed height for all cards */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Added for re-choosing card */
.dbz-card-btn {
    transition: all 0.2s ease;
}

.dbz-card-btn.ring-2 {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(249, 215, 28, 0.5);
}

.vote-indicator .dbz-vote-card {
    transition: all 0.3s ease;
}

/* Add a subtle animation when vote changes */
@keyframes vote-change {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.vote-indicator .dbz-vote-card.updated {
    animation: vote-change 0.3s ease;
}

/* End of re-choosing card*/

.dbz-card-btn:hover {
    background: linear-gradient(135deg, #3a4f6f 0%, #2a3a5a 100%);
    border-color: rgba(249, 215, 28, 0.8);
    box-shadow: 0 0 15px rgba(249, 215, 28, 0.5);
    transform: translateY(-4px);
}

.dbz-card-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.dbz-header,
.dbz-footer {
    background: rgba(22, 33, 62, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dbz-header {
    border-bottom: 1px solid rgba(249, 215, 28, 0.3);
    position: relative;
    z-index: auto;
    /* Prevent creating a new stacking context */
}

.dbz-footer {
    border-top: 1px solid rgba(249, 215, 28, 0.3);
}

.dbz-table {
    background: radial-gradient(ellipse at center, #2a3f5f 0%, #1a2a4a 100%);
    border: 3px solid rgba(249, 215, 28, 0.5);
    box-shadow: 0 0 30px rgba(249, 215, 28, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    width: 32rem;
    height: 20rem;
    border-radius: 50% / 62.5%; /* Creates oval shape: 50% horizontal, 62.5% vertical */
    transition: all 0.3s ease;
    max-width: 90vw;
    max-height: 60vh;
}

.dbz-participant-card {
    background: linear-gradient(135deg, #2a3f5f 0%, #1a2a4a 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(249, 215, 28, 0.2);
    transition: transform 0.3s;
    width: 4rem;
    height: 4rem;
    pointer-events: auto;
    border-radius: 50%;
    border: 2px solid rgba(249, 215, 28, 0.5);
    position: relative;
    z-index: 20;
}

/* Add a subtle background circle behind participants for better visibility */
.dbz-participant-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.7;
}

.dbz-participant-card:hover {
    transform: scale(1.1);
    border-color: rgba(249, 215, 28, 0.8);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 30px rgba(249, 215, 28, 0.4);
}

/* Animation for when participants join */
@keyframes participant-join {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.dbz-participant-card.joining {
    animation: participant-join 0.6s ease-out;
}

/* Subtle pulse for current user */
.dbz-participant-card.border-yellow-500 {
    animation: current-user-pulse 2s infinite;
}

@keyframes current-user-pulse {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(249, 215, 28, 0.2);
    }
    50% {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), 0 0 30px rgba(249, 215, 28, 0.4);
    }
}

.dbz-card-btn {
    background: linear-gradient(135deg, #2a3f5f 0%, #1a2a4a 100%);
    border: 2px solid rgba(249, 215, 28, 0.5);
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.dbz-card-btn:hover {
    background: linear-gradient(135deg, #3a4f6f 0%, #2a3a5a 100%);
    border-color: rgba(249, 215, 28, 0.8);
    box-shadow: 0 0 15px rgba(249, 215, 28, 0.5);
}

.dbz-card-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dbz-vote-card {
    background: linear-gradient(135deg, #f9d71c 0%, #ff9500 100%);
    color: #1a1a2e;
    box-shadow: 0 0 10px rgba(249, 215, 28, 0.5);
}

.dbz-stat-card {
    background: rgba(42, 63, 95, 0.7);
    border: 1px solid rgba(249, 215, 28, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Dark Mode Styles */
.dark-mode {
    background: #1a1a1a;
}

.dark-mode .dbz-card {
    background: rgba(30, 30, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .dbz-header,
.dark-mode .dbz-footer {
    background: rgba(30, 30, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .dbz-table {
    background: radial-gradient(circle, #2a2a2a 0%, #1a1a1a 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .dbz-participant-card {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.dark-mode .dbz-card-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .dbz-card-btn:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border-color: rgba(255, 255, 255, 0.3);
}

.dark-mode .dbz-stat-card {
    background: rgba(40, 40, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Container Styles */
#participants-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ensure the table is properly centered */
#table-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

#table-container>.relative {
    width: 100%;
    max-width: 40rem; /* Increased from 36rem to give more space */
    height: 24rem;
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Update participant name styling */
.participant-name {
    font-size: 0.75rem;
    /* Smaller font size */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 5rem;
}

/* Update vote indicator styling */
.vote-indicator .dbz-vote-card {
    padding: 1px 4px;
    font-size: 0.7rem;
    min-width: 1.5rem;
    text-align: center;
}

/* Bar Chart Styles */
/* Compact Vote Distribution Styles */
#vote-chart {
    max-width: 2xl;
    margin: 0 auto;
}

/* Vote Breakdown Styles */
#vote-breakdown {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Horizontal scrollable container */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

#vote-breakdown .vote-item {
    transition: all 0.3s ease;
    min-height: auto;
}

#vote-breakdown .avatar-container {
    transition: transform 0.3s ease;
}

#vote-breakdown .vote-value {
    transition: all 0.3s ease;
}

/* Summary stats animation */
#vote-breakdown .summary-stats {
    position: relative;
    overflow: hidden;
}

#vote-breakdown .summary-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(249, 215, 28, 0.1), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Compact Results Grid */
#compact-results {
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure elements are properly hidden */
.hidden {
    display: none !important;
}

/* Results area should take full height when active */
#results-area {
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Vote card highlighting */
.vote-card-highlighted {
    transform: scale(1.05) !important;
    z-index: 10;
    box-shadow: 0 0 20px rgba(249, 215, 28, 0.6);
}


@media (min-width: 1025px) and (max-width: 1280px) {
    #compact-results .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1281px) {
    #compact-results .grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Chart Enhancements */
.chart-bar {
    transition: all 0.3s ease;
}

.chart-bar:hover {
    filter: brightness(1.2);
    transform: scaleY(1.05);
}

/* Vote Card Enhancements */
.vote-card-highlighted {
    transform: scale(1.05) !important;
    z-index: 10;
}

/* Mini Chart Enhancements */
.mini-chart-bar {
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.mini-chart-bar:hover {
    filter: brightness(1.2);
    transform: scaleY(1.05);
}

/* Summary Header Gradient */
.summary-gradient {
    background: linear-gradient(135deg, rgba(249, 215, 28, 0.1) 0%, rgba(255, 149, 0, 0.05) 100%);
    backdrop-filter: blur(10px);
}

/* Pulse Animation for Consensus Votes */
@keyframes consensus-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(249, 215, 28, 0.7);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(249, 215, 28, 0);
    }
}

.animate-pulse.consensus {
    animation: consensus-pulse 2s infinite;
}

.vote-bar-container {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    /* Reduced from 8px */
    min-height: 24px;
    /* Fixed height for consistency */
}

.vote-label {
    width: 40px;
    /* Reduced from 60px */
    text-align: right;
    padding-right: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    /* Reduced font size */
    color: #e5e7eb;
    flex-shrink: 0;
}

.vote-bar-wrapper {
    flex-grow: 1;
    height: 16px;
    /* Reduced from 30px */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    /* Reduced from 4px */
    overflow: hidden;
    position: relative;
    margin: 0 8px;
    /* Reduced spacing */
}

.vote-bar {
    height: 100%;
    background: linear-gradient(90deg, #f9d71c, #ff9500);
    border-radius: 2px;
    /* Reduced from 4px */
    transition: width 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    /* Reduced from 8px */
    color: #1a1a2e;
    font-weight: 600;
    font-size: 0.7rem;
    /* Reduced font size */
    min-width: 20px;
    /* Ensure text fits */
}

.vote-count {
    width: 50px;
    /* Reduced from 60px */
    text-align: left;
    padding-left: 8px;
    font-weight: 600;
    font-size: 0.75rem;
    /* Reduced font size */
    color: #e5e7eb;
    flex-shrink: 0;
}

/* Vote indicator for users who have voted */
.user-has-voted .dbz-participant-card {
    border-color: rgba(249, 215, 28, 0.8) !important;
    box-shadow: 0 0 10px rgba(249, 215, 28, 0.3);
}

.user-has-voted .dbz-participant-card::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background-color: #f9d71c;
    border-radius: 50%;
    border: 2px solid #1a1a2e;
    box-shadow: 0 0 8px rgba(249, 215, 28, 0.5);
}

/* Vote indicator styling */
.vote-indicator .dbz-vote-card {
    background: linear-gradient(135deg, #2a3f5f 0%, #1a2a4a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(249, 215, 28, 0.5);
}

/* Animation for when someone votes */
.animate-pulse-once {
    animation: pulse-once 1s ease-out;
}

@keyframes pulse-once {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(249, 215, 28, 0.7);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 8px rgba(249, 215, 28, 0.8);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(249, 215, 28, 0.7);
    }
}

/* Animation for revealing votes */
.reveal-vote {
    animation: reveal-vote 0.5s ease-out;
}

@keyframes reveal-vote {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 15px rgba(249, 215, 28, 0.6);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: 0 2px 8px rgba(249, 215, 28, 0.4);
    }
}

/* Notification styling */
.vote-notification {
    animation: slide-up 0.3s ease-out;
    color: #1a1a2e;
    border: 1px solid rgba(249, 215, 28, 0.3);
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Animations */
@keyframes border-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@keyframes emoji-float {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

@keyframes energy-wave {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        width: 100vmax;
        height: 100vmax;
        opacity: 0;
    }
}

@keyframes super-saiyan {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.animate-consensus-pulse {
    animation: consensus-pulse 2s ease-in-out infinite;
}

@keyframes consensus-pulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

@keyframes float-particle {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty));
        opacity: 0;
    }
}

@keyframes pulse-glow {

    0%,
    100% {
        text-shadow: 0 0 5px rgba(249, 215, 28, 0.5);
        transform: scale(1);
    }

    50% {
        text-shadow: 0 0 20px rgba(249, 215, 28, 0.8), 0 0 30px rgba(255, 149, 0, 0.6);
        transform: scale(1.05);
    }
}

@keyframes smooth-punch {
    0% {
        transform: translate(var(--start-x), var(--start-y)) scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 0px rgba(255, 215, 0, 0));
    }

    10% {
        transform: translate(calc(var(--target-x) * 0.2), calc(var(--target-y) * 0.2)) scale(1.05) rotate(5deg);
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    }

    25% {
        transform: translate(calc(var(--target-x) * 0.5), calc(var(--target-y) * 0.5)) scale(1.15) rotate(10deg);
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 200, 0, 0.6));
    }

    40% {
        transform: translate(calc(var(--target-x) * 0.8), calc(var(--target-y) * 0.8)) scale(1.25) rotate(5deg);
        filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 150, 0, 0.7));
    }

    50% {
        transform: translate(var(--target-x), var(--target-y)) scale(1.4) rotate(0deg);
        filter: brightness(1.6) drop-shadow(0 0 25px rgba(255, 100, 0, 0.9));
    }

    55% {
        transform: translate(var(--target-x), var(--target-y)) scale(0.8) rotate(-5deg);
        filter: brightness(2) drop-shadow(0 0 30px rgba(255, 50, 0, 1));
    }

    60% {
        transform: translate(calc(var(--target-x) * 0.9), calc(var(--target-y) * 0.9)) scale(1.1) rotate(3deg);
        filter: brightness(1.5) drop-shadow(0 0 20px rgba(255, 100, 0, 0.8));
    }

    70% {
        transform: translate(calc(var(--target-x) * 0.6), calc(var(--target-y) * 0.6)) scale(1.2) rotate(-3deg);
        filter: brightness(1.3) drop-shadow(0 0 15px rgba(255, 150, 0, 0.7));
    }

    80% {
        transform: translate(calc(var(--target-x) * 0.3), calc(var(--target-y) * 0.3)) scale(1.1) rotate(2deg);
        filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 200, 0, 0.6));
    }

    90% {
        transform: translate(calc(var(--target-x) * 0.1), calc(var(--target-y) * 0.1)) scale(1.05) rotate(-1deg);
        filter: brightness(1.1) drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
    }

    100% {
        transform: translate(var(--start-x), var(--start-y)) scale(1) rotate(0deg);
        filter: brightness(1) drop-shadow(0 0 0px rgba(255, 215, 0, 0));
    }
}

@keyframes impact-burst {
    0% {
        transform: scale(0);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
    }

    30% {
        transform: scale(1.2);
        opacity: 0.9;
        box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.8);
    }

    60% {
        transform: scale(2);
        opacity: 0.6;
        box-shadow: 0 0 40px 10px rgba(255, 140, 0, 0.6);
    }

    100% {
        transform: scale(3.5);
        opacity: 0;
        box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);
    }
}

@keyframes impact-shake {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    5% {
        transform: translateX(-10px) rotate(-3deg);
    }

    10% {
        transform: translateX(10px) rotate(3deg);
    }

    15% {
        transform: translateX(-12px) rotate(-4deg);
    }

    20% {
        transform: translateX(12px) rotate(4deg);
    }

    25% {
        transform: translateX(-10px) rotate(-3deg);
    }

    30% {
        transform: translateX(10px) rotate(3deg);
    }

    35% {
        transform: translateX(-8px) rotate(-2deg);
    }

    40% {
        transform: translateX(8px) rotate(2deg);
    }

    45% {
        transform: translateX(-6px) rotate(-1deg);
    }

    50% {
        transform: translateX(6px) rotate(1deg);
    }

    55% {
        transform: translateX(-4px) rotate(-1deg);
    }

    60% {
        transform: translateX(4px) rotate(1deg);
    }

    65% {
        transform: translateX(-2px) rotate(0deg);
    }

    70% {
        transform: translateX(2px) rotate(0deg);
    }

    75% {
        transform: translateX(-1px) rotate(0deg);
    }

    80% {
        transform: translateX(1px) rotate(0deg);
    }

    85%,
    95% {
        transform: translateX(0) rotate(0deg);
    }

    90% {
        transform: translateX(-0.5px) rotate(0deg);
    }
}

@keyframes particle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0;
    }

    10% {
        transform: translate(calc(var(--tx) * 0.1), calc(var(--ty) * 0.1)) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

@keyframes particle-punch-path {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }

    20% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

@keyframes punch-text {
    0% {
        transform: translateY(0) scale(0) rotate(0deg);
        opacity: 0;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    }

    30% {
        transform: translateY(-15px) scale(1.3) rotate(5deg);
        opacity: 1;
        text-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }

    70% {
        transform: translateY(-25px) scale(1.1) rotate(-2deg);
        opacity: 0.8;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
    }

    100% {
        transform: translateY(-35px) scale(0.9) rotate(0deg);
        opacity: 0;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    }
}

@keyframes punch-text-path {
    0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 0;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    }

    40% {
        transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) scale(0.8) rotate(5deg);
        opacity: 0.7;
        text-shadow: 0 0 15px rgba(255, 215, 0, 1);
    }

    60% {
        transform: translate(calc(var(--tx) * 0.8), calc(var(--ty) * 0.8)) scale(1.2) rotate(-3deg);
        opacity: 1;
        text-shadow: 0 0 25px rgba(255, 215, 0, 1);
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0.9) rotate(0deg);
        opacity: 0;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.8);
    }
}

@keyframes quick-flash {

    0%,
    20%,
    40%,
    100% {
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    30% {
        opacity: 0.2;
    }
}

@keyframes motion-trail {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
        filter: blur(2px);
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(1);
        opacity: 0;
        filter: blur(4px);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Animation Classes */
.animate-emoji {
    animation: emoji-float 3s ease-out forwards;
}

.animate-energy-wave {
    animation: energy-wave 2s ease-out forwards;
}

.animate-super-saiyan {
    animation: super-saiyan 2s ease-in-out forwards;
}

.animate-float-particle {
    --tx: calc((var(--random) - 0.5) * 200px);
    --ty: calc((var(--random) - 0.5) * 200px);
    --random: calc(var(--seed) + 0.5);
    animation: float-particle 2s ease-out forwards;
}

.animate-smooth-punch {
    animation: smooth-punch 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 100;
}

.animate-impact-shake {
    animation: impact-shake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* Particle Styles */
.impact-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ff9500 100%);
    animation: particle-burst 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 102;
    transform-origin: center;
}

.punch-path-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ff9500 100%);
    animation: particle-punch-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 102;
    transform-origin: center;
}

.energy-particle:nth-child(1) {
    --seed: 0.1;
}

.energy-particle:nth-child(2) {
    --seed: 0.2;
}

.energy-particle:nth-child(3) {
    --seed: 0.3;
}

.energy-particle:nth-child(4) {
    --seed: 0.4;
}

.energy-particle:nth-child(5) {
    --seed: 0.5;
}

.energy-particle:nth-child(6) {
    --seed: 0.6;
}

/* Effect Styles */
.impact-burst {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 215, 0, 0.9) 20%, rgba(255, 140, 0, 0.7) 50%, rgba(255, 69, 0, 0) 100%);
    animation: impact-burst 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 101;
}

.punch-text {
    position: absolute;
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: punch-text 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 103;
    font-family: 'Arial Black', sans-serif;
}

.punch-path-text {
    position: absolute;
    font-weight: 900;
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: punch-text-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none;
    z-index: 103;
    font-family: 'Arial Black', sans-serif;
}

.quick-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    pointer-events: none;
    z-index: 90;
    animation: quick-flash 0.4s ease-out forwards;
}

.motion-trail {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 215, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 99;
    transform-origin: center;
}

.dbz-table::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50% / 62.5%; /* Match the table's oval shape */
    transform-origin: center center;
    z-index: -1;
    opacity: 0.7;
    animation: border-pulse 3s infinite;
}

/* Optional: Add a subtle glow effect */
.dbz-table::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50% / 62.5%; /* Match the oval shape */
    box-shadow: inset 0 0 30px rgba(249, 215, 28, 0.18), 0 0 15px rgba(249, 215, 28, 0.1);
    pointer-events: none;
}

#celebration-text {
    animation: pulse-glow 1.5s infinite;
}

/* Celebration Overlay - Updated for instant appear, smooth fade-out */
#celebration-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* When shown, appear instantly */
#celebration-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    /* No transition for fade-in */
}

/* Fade-out state - this will handle the fade-out transition */
#celebration-overlay.fade-out {
    opacity: 0;
    visibility: hidden;
    /* Add transition only for fade-out */
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Add transition only for fade-out */
#celebration-overlay.fade-out #celebration-text {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Add transition only for fade-out */
#celebration-overlay.fade-out #celebration-sprite {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Add transition only for fade-out */
#celebration-overlay.fade-out .energy-particle {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Add transition only for fade-out */
#celebration-overlay.fade-out .energy-wave {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Add transition only for fade-out */
#celebration-overlay.fade-out .absolute.inset-0.bg-gradient-to-r {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Music Player Styles */
#music-player-panel {
    position: fixed;
    width: 320px;
    max-height: 450px;
    background-color: rgba(30, 30, 30, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(249, 215, 28, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
    pointer-events: none;
}

#music-player-panel:not(.hidden) {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

#volume-slider::-webkit-slider-track {
    background: #4a5568;
    height: 6px;
    border-radius: 3px;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #f9d71c;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-top: -5px;
}

#volume-slider::-moz-range-track {
    background: #4a5568;
    height: 6px;
    border-radius: 3px;
}

#volume-slider::-moz-range-thumb {
    background: #f9d71c;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    border: none;
}

.playlist-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.playlist-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.playlist-item.active {
    background-color: rgba(249, 215, 28, 0.2);
    border-left: 3px solid #f9d71c;
}

.playlist-item-title {
    flex-grow: 1;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playlist-item-duration {
    font-size: 0.75rem;
    color: #a0aec0;
    margin-left: 8px;
}

.music-player-error {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    background-color: rgba(220, 38, 38, 0.9);
    color: white;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 50;
    animation: fadeInOut 3s ease-in-out forwards;
}

.loading-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 8px;
}

audio {
    transition: volume 0.1s linear;
}

/* Made with ❤️ by Gabbosaur.Enhanced message styling with hover animation */
/* Enhanced message styling with side animation */
#mini-games-panel {
    background: linear-gradient(135deg, rgba(22, 33, 62, 0.9), rgba(15, 52, 96, 0.9));
    border: 1px solid rgba(249, 215, 28, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    transform: translateX(-150%);
    /* Start off-screen to the left */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

#mini-games-panel.animate-in {
    transform: translateX(0);
    opacity: 1;
}

#mini-games-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(249, 215, 28, 0.1), transparent, rgba(249, 215, 28, 0.1));
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#mini-games-panel.animate-in::before {
    transform: translateX(100%);
}

#mini-games-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #f9d71c, #ff9500);
    transform: scaleY(0);
    transition: transform 0.4s ease-out 0.3s;
    box-shadow: 0 0 10px rgba(249, 215, 28, 0.5);
}

#mini-games-panel.animate-in::after {
    transform: scaleY(1);
}

#mini-games-panel a {
    text-decoration: none;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

#mini-games-panel .text-sm {
    font-family: 'Arial', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
}

#mini-games-panel .text-red-500 {
    display: inline-block;
    animation: pulse 1.5s infinite;
    transition: transform 0.3s ease;
}

#mini-games-panel:hover .text-red-500 {
    animation: none;
    transform: scale(1.3) rotate(10deg);
}

#mini-games-panel .font-medium {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Particle effects */
#mini-games-panel .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #f9d71c;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

#mini-games-panel .particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation: particle-float 3s infinite 0.2s;
}

#mini-games-panel .particle:nth-child(2) {
    top: 70%;
    left: 20%;
    animation: particle-float 3s infinite 0.7s;
}

#mini-games-panel .particle:nth-child(3) {
    top: 40%;
    left: 80%;
    animation: particle-float 3s infinite 1.2s;
}

#mini-games-panel .particle:nth-child(4) {
    top: 80%;
    left: 70%;
    animation: particle-float 3s infinite 1.7s;
}

#mini-games-panel .particle:nth-child(5) {
    top: 30%;
    left: 60%;
    animation: particle-float 3s infinite 2.2s;
}

@keyframes particle-float {

    0%,
    100% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-20px) scale(1.5);
        opacity: 0;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Hover effects */
#mini-games-panel:hover {
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 6px 16px rgba(249, 215, 28, 0.2);
    border-color: rgba(249, 215, 28, 0.4);
}

#mini-games-panel:hover::before {
    background: linear-gradient(90deg, rgba(249, 215, 28, 0.2), transparent, rgba(249, 215, 28, 0.2));
    animation: shimmer 1.5s infinite;
}

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

    100% {
        transform: translateX(100%);
    }
}

/* Click ripple effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(249, 215, 28, 0.5);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Credit Component Styles */
#credit-component {
    transition: transform 0.3s ease;
}

#credit-component:hover {
    transform: translateY(-3px);
}

#heart-button {
    position: relative;
    overflow: hidden;
}

#heart-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(249, 215, 28, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#heart-button:hover::before {
    width: 100px;
    height: 100px;
}

#credit-card {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translate(-50%, 10px);
}

#credit-card.visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

#credit-card .text-red-500 {
    display: inline-block;
    transition: transform 0.3s ease;
}

#credit-card.visible .text-red-500 {
    transform: scale(1.2) rotate(10deg);
}

/* Pulse animation for heart */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.animate-pulse {
    animation: pulse 1s infinite;
}

/* For very small screens, make it even more compact */
@media (max-width: 480px) {
    .vote-bar-container {
        margin-bottom: 3px;
        min-height: 20px;
    }

    .vote-label {
        width: 30px;
        padding-right: 6px;
        font-size: 0.7rem;
    }

    .vote-bar-wrapper {
        height: 14px;
        margin: 0 6px;
    }

    .vote-bar {
        padding-right: 4px;
        font-size: 0.65rem;
        min-width: 16px;
    }

    .vote-count {
        width: 40px;
        padding-left: 6px;
        font-size: 0.7rem;
    }

    #vote-chart .mt-4.text-sm.text-gray-400 {
        margin-top: 6px;
        font-size: 0.65rem;
    }
}

/* Button Animations */
@keyframes buttonPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes panelSlideIn {
    0% { 
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
    100% { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.button-animate {
    animation: buttonPulse 0.2s ease-out;
}

.panel-animate {
    animation: panelSlideIn 0.3s ease-out;
}

/* Super Saiyan Mode */
@keyframes superSaiyanAura {
    0% { 
        box-shadow: 0 0 30px #fbbf24, 0 0 60px #f59e0b, 0 0 90px #d97706;
    }
    50% { 
        box-shadow: 0 0 50px #fbbf24, 0 0 100px #f59e0b, 0 0 150px #d97706;
    }
    100% { 
        box-shadow: 0 0 30px #fbbf24, 0 0 60px #f59e0b, 0 0 90px #d97706;
    }
}

.dbz-participant-card.super-saiyan-mode {
    animation: superSaiyanAura 0.5s infinite;
    border-color: #fbbf24 !important;
    transform: scale(1.3);
    z-index: 100;
    position: relative;
}

/* Responsive Styles */
@media (max-width: 640px) {
    .dbz-table {
        width: 24rem !important;
        height: 16rem !important;
    }

    #table-container>.relative {
        max-width: 28rem;
        height: 20rem;
    }

    .dbz-participant-card {
        width: 3rem;
        height: 3rem;
    }

    .dbz-card-btn {
        width: 3rem;
        /* Smaller width for mobile */
        height: 3.5rem;
        /* Smaller height for mobile */
        font-size: 1rem;
    }

    .dbz-card-btn.long-text {
        font-size: 0.75rem;
    }

    #cards-container {
        gap: 0.5rem;
    }

    .participant-name {
        font-size: 0.7rem;
    }

    .participant-card-wrapper {
        position: relative;
    }

    .participant-card-wrapper::after {
        content: '';
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #10b981;
        /* Green for connected */
        border: 1px solid #fff;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .participant-card-wrapper.connected::after {
        opacity: 1;
    }

    .participant-card-wrapper.disconnected::after {
        background-color: #ef4444;
        /* Red for disconnected */
        opacity: 1;
    }

    #compact-results .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3;
    }

    #results-area {
        padding: 1rem;
    }

    .vote-indicator .dbz-vote-card {
        padding: 2px 4px;
        font-size: 0.7rem;
    }

    #emoji-panel {
        bottom: 10px;
        right: 10px;
    }

    .dbz-stat-card {
        margin-bottom: 10px;
    }

    .vote-bar-container {
        flex-direction: column;
        align-items: stretch;
    }

    .vote-label {
        width: 100%;
        text-align: center;
        padding-right: 0;
        padding-bottom: 4px;
    }

    .vote-count {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-top: 4px;
    }

    #celebration-text {
        font-size: 2.5rem;
    }

    .punch-text {
        font-size: 1.2rem;
    }

    /* Music Player Panel - Mobile Responsive */
    #music-player-panel {
        width: 90vw;
        max-width: 320px;
        padding: 0.75rem;
        max-height: 350px;
    }

    #playlist {
        max-height: 120px;
    }

    #play-pause-btn {
        width: 12;
        height: 12;
    }

    #volume-slider {
        height: 8px;
    }

    #volume-slider::-webkit-slider-thumb,
    #volume-slider::-moz-range-thumb {
        height: 20px;
        width: 20px;
    }

    #compact-results .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
    }

    #compact-results .vote-card {
        padding: 2px;
    }

    #compact-results .avatar-container {
        width: 2rem;
        height: 2rem;
    }

    #compact-results .vote-value {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.75rem;
    }

    #vote-breakdown {
        margin-top: 1rem;
    }

    #vote-breakdown .votes-grid {
        gap: 1rem;
    }

    #vote-breakdown .vote-card {
        padding: 0.5rem;
        transition: all 0.3s ease;
        min-width: auto;
    }

    #vote-breakdown .avatar-container {
        width: 2rem;
        height: 2rem;
        transition: transform 0.3s ease;
    }

    #vote-breakdown .vote-value {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
        transition: all 0.3s ease;
    }

    /* Ensure text truncation works properly */
    #vote-breakdown .name-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    #vote-breakdown .summary-stats {
        padding: 0.5rem;
        position: relative;
        overflow: hidden;
    }

    #vote-breakdown .summary-stats::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(249, 215, 28, 0.1), transparent);
        animation: shimmer 2s infinite;
    }

    #vote-breakdown .summary-stats .grid {
        gap: 0.5rem;
    }

    #vote-breakdown .summary-stats .text-lg {
        font-size: 1rem;
    }

    #vote-breakdown .summary-stats .text-xs {
        font-size: 0.65rem;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .dbz-table {
        width: 28rem !important;
        height: 18rem !important;
    }

    .dbz-participant-card {
        width: 3.5rem;
        height: 3.5rem;
    }

    .dbz-card-btn {
        width: 4rem;
        /* Medium width for tablets */
        height: 4.25rem;
        /* Medium height for tablets */
        font-size: 1.25rem;
    }

    /* For very long card values like "XXL" or "100" */
    .dbz-card-btn.long-text {
        font-size: 0.9rem;
    }

    #table-container>.relative {
        max-width: 32rem;
        height: 22rem;
    }

    .participant-name {
        font-size: 0.8rem;
    }

    .vote-indicator .dbz-vote-card {
        padding: 2px 6px;
        font-size: 0.8rem;
    }

    #emoji-panel {
        bottom: 15px;
        right: 15px;
    }

    /* Tablet positioning handled by JavaScript */

    #compact-results .grid {
        grid-template-columns: repeat(3, 1fr);
    }

    #vote-breakdown .votes-grid {
        gap: 1.5rem;
    }

    #vote-breakdown .vote-card {
        padding: 0.5rem;
    }

    #vote-breakdown .avatar-container {
        width: 2.25rem;
        height: 2.25rem;
    }

    #vote-breakdown .vote-value {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    #vote-breakdown .name-text {
        font-size: 0.625rem;
        max-width: 3.5rem;
    }
}

@media (min-width: 1025px) {

    #vote-breakdown .votes-row {
        justify-content: center;
        flex-wrap: nowrap;
    }

    #vote-breakdown .vote-card {
        padding: 0.5rem;
    }

    #vote-breakdown .avatar-container {
        width: 2.5rem;
        height: 2.5rem;
    }

    #vote-breakdown .vote-value {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    #vote-breakdown .name-text {
        font-size: 0.625rem;
        max-width: 4rem;
    }
}

/* Spectator Area Styles */
#spectator-area {
    transition: all 0.3s ease;
    min-width: 120px;
}



.spectator-avatar {
    transition: transform 0.3s ease;
}

.spectator-avatar:hover {
    transform: scale(1.1);
}

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

.spectator-avatar {
    animation: spectatorJoin 0.4s ease-out;
}

#spectator-toggle {
    transition: all 0.3s ease;
}

#spectator-toggle:active {
    transform: scale(0.95);
}

@media (max-width: 640px) {
    #spectator-area {
        bottom: 2px;
        padding: 0.5rem;
        font-size: 0.75rem;
    }
    
    .spectator-avatar .w-8 {
        width: 1.75rem;
        height: 1.75rem;
    }
}



/* Consensus Streak Glow - Table aura grows brighter with each consecutive consensus.
   Progression: 2 = gold (visible), 3 = gold/orange, 4 = red, 5+ = max. */
.dbz-table.streak-2 {
    box-shadow: 0 0 35px rgba(249, 215, 28, 0.5), 0 0 60px rgba(249, 215, 28, 0.25);
}

.dbz-table.streak-2::before {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(249, 215, 28, 0.35) 0%,
        transparent 70%);
}

.dbz-table.streak-3 {
    box-shadow: 0 0 55px rgba(249, 215, 28, 0.6), 0 0 100px rgba(255, 149, 0, 0.35);
}

.dbz-table.streak-3::before {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(249, 215, 28, 0.45) 0%,
        rgba(255, 149, 0, 0.2) 55%,
        transparent 85%);
    animation: border-pulse 2s infinite;
}

.dbz-table.streak-4 {
    box-shadow: 0 0 75px rgba(255, 149, 0, 0.7), 0 0 140px rgba(239, 68, 68, 0.45);
}

.dbz-table.streak-4::before {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(255, 149, 0, 0.5) 0%,
        rgba(239, 68, 68, 0.3) 60%,
        transparent 90%);
    animation: border-pulse 1.3s infinite;
}

.dbz-table.streak-5 {
    box-shadow: 0 0 90px rgba(239, 68, 68, 0.8), 0 0 180px rgba(220, 38, 38, 0.55);
}

.dbz-table.streak-5::before {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(239, 68, 68, 0.55) 0%,
        rgba(220, 38, 38, 0.35) 60%,
        transparent 92%);
    animation: border-pulse 1s infinite;
}

.dbz-table.streak-max {
    box-shadow: 0 0 110px rgba(239, 68, 68, 0.95), 0 0 220px rgba(249, 215, 28, 0.7);
}

.dbz-table.streak-max::before {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 220, 0.45) 0%,
        rgba(255, 149, 0, 0.55) 40%,
        rgba(239, 68, 68, 0.35) 75%,
        transparent 100%);
    animation: border-pulse 0.8s infinite;
}


/* Vote hint badges + breakdown card highlights: shown after reveal when votes differ.
   Applied only inside the Individual Votes breakdown (not on the table avatars,
   where the results overlay covers them). The badge is placed inside the card
   (top-right corner) so it's never clipped by parent overflow. */
.vote-hint-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.7px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
    z-index: 20;
    line-height: 1.1;
}

.vote-hint-badge-min {
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.vote-hint-badge-max {
    background: linear-gradient(135deg, #dc2626, #f87171);
}


/* Individual Votes breakdown: highlight LOW / HIGH voters after reveal */
.breakdown-hint-min {
    border-color: #60a5fa !important;
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5), inset 0 0 12px rgba(96, 165, 250, 0.15);
}

.breakdown-hint-max {
    border-color: #f87171 !important;
    box-shadow: 0 0 10px rgba(248, 113, 113, 0.5), inset 0 0 12px rgba(248, 113, 113, 0.15);
}


/* Consensus streak banner - shown at streak >= 3 */
.streak-banner {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    z-index: 9998;
    pointer-events: none;
    text-align: center;
    animation: streak-banner-show 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
    opacity: 0;
}

.streak-banner-combo {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 4px;
    text-shadow:
        0 0 10px #fbbf24,
        0 0 20px #f59e0b,
        0 3px 6px rgba(0, 0, 0, 0.8);
    margin-bottom: 4px;
    transform: skewX(-8deg);
}

.streak-banner-number {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(4rem, 14vw, 9rem);
    font-weight: 900;
    line-height: 0.9;
    color: #fff;
    text-shadow:
        0 0 20px #fbbf24,
        0 0 40px #f59e0b,
        0 0 70px #ff6600,
        0 6px 12px rgba(0, 0, 0, 0.7);
    animation: streak-banner-shake 0.5s ease-in-out;
    transform: skewX(-8deg);
}

.streak-banner-label {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: clamp(1.4rem, 3.5vw, 2.4rem);
    font-weight: 900;
    color: #ff9500;
    letter-spacing: 3px;
    text-shadow:
        0 0 8px #ff9500,
        0 0 18px #ff6600,
        0 3px 6px rgba(0, 0, 0, 0.8);
    margin-top: 4px;
    transform: skewX(-8deg);
}

/* Tiered colors: from gold -> orange -> red as the streak grows */
.streak-banner.tier-warm .streak-banner-number {
    color: #fff8dc;
    text-shadow:
        0 0 20px #fbbf24,
        0 0 40px #ff9500,
        0 0 70px #ff6600,
        0 6px 12px rgba(0, 0, 0, 0.7);
}

.streak-banner.tier-hot .streak-banner-number {
    color: #fff;
    text-shadow:
        0 0 20px #ff9500,
        0 0 40px #ef4444,
        0 0 80px #dc2626,
        0 6px 14px rgba(0, 0, 0, 0.8);
}
.streak-banner.tier-hot .streak-banner-label {
    color: #f87171;
    text-shadow:
        0 0 10px #ef4444,
        0 0 24px #dc2626,
        0 3px 6px rgba(0, 0, 0, 0.8);
}

@keyframes streak-banner-show {
    0% {
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
        filter: blur(8px);
    }
    15% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 1;
        filter: blur(0);
    }
    25% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    75% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 0;
    }
}

@keyframes streak-banner-shake {
    0%, 100% { transform: skewX(-8deg) translateX(0); }
    25% { transform: skewX(-8deg) translateX(-6px); }
    75% { transform: skewX(-8deg) translateX(6px); }
}

/* Radial energy burst behind the banner */
.streak-banner-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin-top: -150px;
    margin-left: -150px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 220, 0.4) 0%,
        rgba(249, 215, 28, 0.25) 30%,
        rgba(255, 149, 0, 0.12) 55%,
        transparent 80%);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    animation: streak-banner-burst-anim 2s ease-out forwards;
    z-index: -1;
}

@keyframes streak-banner-burst-anim {
    0%   { transform: scale(0); opacity: 0; }
    20%  { transform: scale(1); opacity: 1; }
    50%  { transform: scale(1.6); opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}


/* Super Saiyan 2 electric sparks - active while streak >= 4 */
.ssj2-spark {
    position: fixed;
    pointer-events: none;
    z-index: 5;
    width: 2px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.95) 10%,
        #60a5fa 40%,
        #3b82f6 70%,
        transparent 100%);
    filter:
        drop-shadow(0 0 4px rgba(147, 197, 253, 0.95))
        drop-shadow(0 0 10px rgba(59, 130, 246, 0.7));
    transform-origin: top center;
    opacity: 0;
    animation: ssj2-spark-flash 0.35s ease-out forwards;
    will-change: opacity, transform;
}

@keyframes ssj2-spark-flash {
    0%   { opacity: 0; transform: scaleY(0.3); }
    20%  { opacity: 1; transform: scaleY(1); }
    60%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0.6); }
}


/* Divine aura particles - active at streak >= 5 (SSJ God / SSJ Blue).
   Replace the SSJ2 sparks with upward-drifting ki particles. */
.aura-particle {
    position: fixed;
    pointer-events: none;
    z-index: 5;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: aura-particle-rise 2.4s ease-out forwards;
}

.aura-particle.god {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 100, 100, 0.9) 30%,
        rgba(220, 38, 38, 0.6) 60%,
        transparent 100%);
    filter:
        drop-shadow(0 0 6px rgba(255, 80, 80, 0.9))
        drop-shadow(0 0 14px rgba(220, 38, 38, 0.6));
}

.aura-particle.blue {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(147, 197, 253, 0.9) 30%,
        rgba(37, 99, 235, 0.6) 60%,
        transparent 100%);
    filter:
        drop-shadow(0 0 6px rgba(147, 197, 253, 0.95))
        drop-shadow(0 0 14px rgba(37, 99, 235, 0.7));
}

.aura-particle.ui {
    background: radial-gradient(circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(226, 232, 240, 0.95) 35%,
        rgba(148, 163, 184, 0.6) 65%,
        transparent 100%);
    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 14px rgba(203, 213, 225, 0.7));
}

@keyframes aura-particle-rise {
    0%   { opacity: 0; transform: translateY(0) scale(0.6); }
    15%  { opacity: 1; transform: translateY(-20px) scale(1); }
    70%  { opacity: 0.85; }
    100% { opacity: 0; transform: translateY(-160px) scale(0.3); }
}