:root {
    --bg-dark: #0a0a0f;
    --bg-card: #12121a;
    --primary: #7c3aed;
    --secondary: #06b6d4;
    --accent: #f59e0b;
    --danger: #ef4444;
    --text: #ffffff;
    --text-muted: #9ca3af;
    --gradient: linear-gradient(135deg, #7c3aed 0%, #06b6d4 50%, #10b981 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

body {
    font-family: "Poppins", sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    overflow: hidden;
    touch-action: manipulation;
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
}

.app-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    height: 100dvh;
    padding: 50px 20px 0;
    max-width: 500px;
    margin: 0 auto;
}

.header {
    text-align: center;
    padding: 20px 0;
}

.header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 3px;
}

.tagline {
    color: var(--text-muted);
    font-size: 1rem;
    margin-top: 5px;
}

.stats-bar {
    display: flex;
    gap: 20px;
    background: var(--bg-card);
    padding: 15px 25px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
    justify-content: center;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary);
}

.death-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
}

.death-value {
    color: var(--accent) !important;
}

.death-timer.critical .death-value {
    color: var(--danger) !important;
    animation: pulse-danger 0.5s ease-in-out infinite;
}

@keyframes pulse-danger {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.click-button.has-extra-life {
    animation: heartbeat 1s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(1); }
    45% { transform: scale(1.03); }
}

.heart-border {
    display: none;
}

.click-button.has-extra-life .heart-border {
    display: block;
    position: absolute;
    inset: -3px;
    z-index: 0;
    pointer-events: none;
    clip-path: polygon(50% 12%, 62% 0%, 78% 0%, 92% 8%, 100% 25%, 100% 40%, 50% 100%, 0% 40%, 0% 25%, 8% 8%, 22% 0%, 38% 0%);
    background: linear-gradient(135deg, rgba(255, 150, 180, 1), rgba(255, 80, 120, 1));
    animation: heart-glow 2s ease-in-out infinite;
}

@keyframes heart-glow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 80, 120, 0.5)) drop-shadow(0 0 20px rgba(255, 80, 120, 0.3));
        opacity: 0.8;
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(255, 80, 120, 1)) drop-shadow(0 0 40px rgba(255, 80, 120, 0.6));
        opacity: 1;
    }
}

.click-button.has-extra-life .button-inner,
.click-button.has-extra-life .click-ring,
.click-button.has-extra-life .button-inner img {
    clip-path: polygon(50% 12%, 62% 0%, 78% 0%, 92% 8%, 100% 25%, 100% 40%, 50% 100%, 0% 40%, 0% 25%, 8% 8%, 22% 0%, 38% 0%);
    border-radius: 0 !important;
    padding: 0 !important;
    object-fit: cover;
    width: 100%;
    height: 100%;
}


.click-button.has-extra-life .button-inner::before {
    clip-path: polygon(50% 12%, 62% 0%, 78% 0%, 92% 8%, 100% 25%, 100% 40%, 50% 100%, 0% 40%, 0% 25%, 8% 8%, 22% 0%, 38% 0%);
    border-radius: 0 !important;
}

.click-button.has-extra-life .button-glow {
    inset: -30px;
    border-radius: 50%;
    background: rgba(255, 80, 120, 0.5);
    filter: blur(30px);
    clip-path: none;
    animation: heart-glow-pulse 2s ease-in-out infinite;
}

@keyframes heart-glow-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes heart-glow {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 15px rgba(255, 80, 120, 0.6)); }
    50% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 40px rgba(255, 80, 120, 1)); }
}

.clicker-area {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.click-button {
    position: relative;
    width: 220px;
    height: 220px;
    cursor: pointer;
    transition: transform 0.1s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.click-button:active {
    transform: scale(0.95);
}

/* Wenpad autoclick visual feedback */
.click-button.auto-clicked {
    animation: auto-click-pulse 0.2s ease-out;
}

@keyframes auto-click-pulse {
    0% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 255, 136, 0.8); }
    50% { transform: scale(0.95); box-shadow: 0 0 40px rgba(0, 255, 136, 1); }
    100% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 255, 136, 0); }
}

/* Server-side robot autoclick active animation */
.click-button.autoclick-active .button-glow {
    background: linear-gradient(135deg, #06b6d4 0%, #7c3aed 50%, #06b6d4 100%);
    opacity: 0.6;
    animation: robot-active-glow 1.5s ease-in-out infinite;
}

@keyframes robot-active-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.15); }
}

/* Robot autoclick pulse on each click */
.click-button.autoclick-pulse {
    animation: robot-click-pulse 0.15s ease-out;
}

@keyframes robot-click-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.93); }
    100% { transform: scale(1); }
}

.button-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: var(--gradient);
    opacity: 0.3;
    filter: blur(30px);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

.button-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--gradient);
    padding: 4px;
    box-shadow:
        0 10px 40px rgba(124, 58, 237, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.button-inner::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--bg-dark);
}

.button-inner img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.5));
    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.click-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    pointer-events: none;
}

.click-ring.animate {
    animation: ringExpand 0.4s ease-out forwards;
}

@keyframes ringExpand {
    0% { transform: scale(1); border-color: rgba(124, 58, 237, 0.8); opacity: 1; }
    100% { transform: scale(1.5); border-color: rgba(124, 58, 237, 0); opacity: 0; }
}

.click-button.has-extra-life .click-ring {
    border: none;
    background: transparent;
    border-radius: 0;
}

.click-button.has-extra-life .click-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 12%, 62% 0%, 78% 0%, 92% 8%, 100% 25%, 100% 40%, 50% 100%, 0% 40%, 0% 25%, 8% 8%, 22% 0%, 38% 0%);
    background: rgba(255, 80, 120, 0.8);
    opacity: 0;
}

.click-button.has-extra-life .click-ring::after {
    content: '';
    position: absolute;
    inset: 4px;
    clip-path: polygon(50% 12%, 62% 0%, 78% 0%, 92% 8%, 100% 25%, 100% 40%, 50% 100%, 0% 40%, 0% 25%, 8% 8%, 22% 0%, 38% 0%);
    background: var(--bg-dark);
    opacity: 0;
}

.click-button.has-extra-life .click-ring.animate::before,
.click-button.has-extra-life .click-ring.animate::after {
    animation: heartRingExpand 0.4s ease-out forwards;
}

@keyframes heartRingExpand {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.click-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

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

/* ============ COMBO MULTIPLIER SYSTEM ============ */
.combo-display {
    position: relative;
    text-align: center;
    padding: 10px 20px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.combo-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 25px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.combo-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    margin-bottom: 2px;
}

.combo-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

/* Combo bar showing decay timer */
.combo-bar {
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 5px;
    overflow: hidden;
}

.combo-fill {
    height: 100%;
    width: 100%;
    background: white;
    border-radius: 2px;
    transition: width 0.1s linear, background 0.3s ease;
}

/* Color levels for combo multiplier */
.combo-1x .combo-value { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); }
.combo-1x .combo-fill { background: #ffffff; }
.combo-1x .combo-container { border-color: rgba(255, 255, 255, 0.2); }

.combo-2x .combo-value { color: #ffd700; text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
.combo-2x .combo-fill { background: linear-gradient(90deg, #ffd700, #ffec8b); }
.combo-2x .combo-container { border-color: rgba(255, 215, 0, 0.4); background: rgba(255, 215, 0, 0.1); }

.combo-3x .combo-value { color: #ff8c00; text-shadow: 0 0 25px rgba(255, 140, 0, 0.7); }
.combo-3x .combo-fill { background: linear-gradient(90deg, #ff8c00, #ffa500); }
.combo-3x .combo-container { border-color: rgba(255, 140, 0, 0.5); background: rgba(255, 140, 0, 0.1); }

.combo-4x .combo-value { color: #ff4444; text-shadow: 0 0 30px rgba(255, 68, 68, 0.8); }
.combo-4x .combo-fill { background: linear-gradient(90deg, #ff4444, #ff6b6b); }
.combo-4x .combo-container { border-color: rgba(255, 68, 68, 0.6); background: rgba(255, 68, 68, 0.15); }

.combo-5x .combo-value {
    color: #bf00ff;
    text-shadow: 0 0 40px rgba(191, 0, 255, 1), 0 0 60px rgba(191, 0, 255, 0.5);
    animation: combo-legendary-glow 0.5s ease-in-out infinite alternate;
}
.combo-5x .combo-fill { background: linear-gradient(90deg, #bf00ff, #ff00ff, #bf00ff); background-size: 200% 100%; animation: combo-fill-flow 1s linear infinite; }
.combo-5x .combo-container {
    border-color: rgba(191, 0, 255, 0.8);
    background: rgba(191, 0, 255, 0.2);
    box-shadow: 0 0 30px rgba(191, 0, 255, 0.4);
}

@keyframes combo-legendary-glow {
    0% { text-shadow: 0 0 40px rgba(191, 0, 255, 1), 0 0 60px rgba(191, 0, 255, 0.5); }
    100% { text-shadow: 0 0 50px rgba(255, 0, 255, 1), 0 0 80px rgba(255, 0, 255, 0.7); }
}

@keyframes combo-fill-flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

/* Pulse animation when multiplier increases */
.combo-pulse .combo-value {
    animation: combo-pulse-anim 0.4s ease-out;
}

@keyframes combo-pulse-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Bounce animation on change */
.combo-bounce .combo-container {
    animation: combo-bounce-anim 0.5s ease-out;
}

@keyframes combo-bounce-anim {
    0% { transform: translateY(0); }
    30% { transform: translateY(-15px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

/* Shake effect at high multipliers (4x, 5x) */
.combo-shake {
    animation: combo-shake-anim 0.4s ease-in-out;
}

@keyframes combo-shake-anim {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

/* Screen shake for max combo */
.screen-shake {
    animation: screen-shake-anim 0.3s ease-in-out;
}

@keyframes screen-shake-anim {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -2px); }
}

/* ============ COMBO GLITCH EFFECTS ============ */
/* Level 2 - Subtle color flicker */
.glitch-2 .combo-container {
    animation: glitch-subtle 2s infinite;
}

@keyframes glitch-subtle {
    0%, 95%, 100% { filter: hue-rotate(0deg); transform: translate(0); }
    96% { filter: hue-rotate(10deg); transform: translate(-1px, 0); }
    97% { filter: hue-rotate(-10deg); transform: translate(1px, 0); }
}

/* Level 3 - More frequent glitches */
.glitch-3 .combo-container {
    animation: glitch-medium 1s infinite;
}

@keyframes glitch-medium {
    0%, 90%, 100% { filter: hue-rotate(0deg); transform: translate(0); }
    91% { filter: hue-rotate(20deg); transform: translate(-2px, 1px); }
    93% { filter: hue-rotate(-20deg); transform: translate(2px, -1px); }
    95% { filter: hue-rotate(15deg); transform: translate(-1px, 1px); }
}

/* Level 4 - Heavy glitching with skew */
.glitch-4 .combo-container {
    animation: glitch-heavy 0.5s infinite;
}

@keyframes glitch-heavy {
    0%, 85%, 100% { filter: hue-rotate(0deg) brightness(1); transform: translate(0) skew(0); }
    86% { filter: hue-rotate(30deg) brightness(1.1); transform: translate(-3px, 2px) skew(2deg); }
    88% { filter: hue-rotate(-30deg) brightness(0.9); transform: translate(3px, -2px) skew(-2deg); }
    90% { filter: hue-rotate(45deg) brightness(1.2); transform: translate(-2px, 3px) skew(1deg); }
    92% { filter: hue-rotate(-15deg) brightness(1); transform: translate(2px, -1px) skew(-1deg); }
}

/* Level 5 - INSANE glitching - maximum distraction! */
.glitch-5 .combo-container {
    animation: glitch-insane 0.3s infinite;
}

@keyframes glitch-insane {
    0%, 70%, 100% {
        filter: hue-rotate(0deg) brightness(1) saturate(1);
        transform: translate(0) skew(0) scale(1);
    }
    72% {
        filter: hue-rotate(60deg) brightness(1.3) saturate(1.5);
        transform: translate(-4px, 3px) skew(3deg) scale(1.02);
    }
    74% {
        filter: hue-rotate(-60deg) brightness(0.8) saturate(2);
        transform: translate(4px, -3px) skew(-3deg) scale(0.98);
    }
    76% {
        filter: hue-rotate(90deg) brightness(1.2) saturate(1.2);
        transform: translate(-3px, 4px) skew(2deg) scale(1.03);
    }
    78% {
        filter: hue-rotate(-90deg) brightness(1.4) saturate(0.8);
        transform: translate(3px, -2px) skew(-4deg) scale(0.97);
    }
    80% {
        filter: hue-rotate(120deg) brightness(0.7) saturate(2.5);
        transform: translate(-5px, 2px) skew(5deg) scale(1.05);
    }
}

/* Extra text glitch effect for level 5 */
.glitch-5 .combo-value {
    animation: text-glitch 0.2s infinite;
}

@keyframes text-glitch {
    0%, 60%, 100% { text-shadow: 0 0 10px currentColor; }
    62% { text-shadow: -3px 0 #ff0000, 3px 0 #00ffff; }
    64% { text-shadow: 3px 0 #ff0000, -3px 0 #00ffff; }
    66% { text-shadow: -2px 2px #ff00ff, 2px -2px #00ff00; }
    68% { text-shadow: 2px -2px #ff00ff, -2px 2px #00ff00; }
}

/* ============ CLICKER GLITCH EFFECTS ============ */
/* Level 3 - Subtle button glitch */
.glitch-3 .click-button {
    animation: button-glitch-subtle 1.5s infinite;
}

@keyframes button-glitch-subtle {
    0%, 92%, 100% { filter: hue-rotate(0deg); transform: translate(0) scale(1); }
    94% { filter: hue-rotate(15deg); transform: translate(-2px, 0) scale(1.01); }
    96% { filter: hue-rotate(-15deg); transform: translate(2px, 0) scale(0.99); }
}

/* Level 4 - Medium button glitch */
.glitch-4 .click-button {
    animation: button-glitch-medium 0.8s infinite;
}

@keyframes button-glitch-medium {
    0%, 85%, 100% { filter: hue-rotate(0deg) brightness(1); transform: translate(0) scale(1); }
    87% { filter: hue-rotate(25deg) brightness(1.1); transform: translate(-3px, 2px) scale(1.02); }
    90% { filter: hue-rotate(-25deg) brightness(0.9); transform: translate(3px, -2px) scale(0.98); }
    93% { filter: hue-rotate(20deg) brightness(1.05); transform: translate(-2px, 1px) scale(1.01); }
}

/* Level 5 - Intense button glitch */
.glitch-5 .click-button {
    animation: button-glitch-intense 0.4s infinite;
}

@keyframes button-glitch-intense {
    0%, 70%, 100% { filter: hue-rotate(0deg) brightness(1) saturate(1); transform: translate(0) scale(1); }
    72% { filter: hue-rotate(40deg) brightness(1.2) saturate(1.3); transform: translate(-4px, 3px) scale(1.03); }
    76% { filter: hue-rotate(-50deg) brightness(0.85) saturate(1.5); transform: translate(4px, -2px) scale(0.97); }
    80% { filter: hue-rotate(60deg) brightness(1.15) saturate(1.2); transform: translate(-3px, 2px) scale(1.02); }
}

/* Combo particles */
.combo-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 200px;
    height: 100px;
}

.combo-particle {
    position: absolute;
    font-size: 1.5rem;
    animation: combo-particle-burst 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes combo-particle-burst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.2);
    }
}

/* Glow burst effect */
.combo-glow-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: glow-burst-anim 0.6s ease-out forwards;
}

@keyframes glow-burst-anim {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.3);
        box-shadow: 0 0 60px currentColor;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
        box-shadow: 0 0 0px currentColor;
    }
}

.score-display {
    text-align: center;
    padding: 20px;
}

.score-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    margin-bottom: 5px;
}

.score-value {
    font-size: 3.5rem;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer {
    text-align: center;
    padding: 15px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Auto-click Indicator - hidden, info shown in robot card instead */
.autoclick-indicator {
    display: none !important;
}

.autoclick-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 25px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 15px;
    border: 2px solid rgba(6, 182, 212, 0.3);
    transition: all 0.3s ease;
}

.autoclick-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    margin-bottom: 2px;
}

.autoclick-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary);
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Frozen Overlay */
.frozen-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.frozen-content {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #1a0a0a 0%, #2a0a0a 100%);
    border: 2px solid var(--danger);
    border-radius: 20px;
    max-width: 90%;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.frozen-content h2 {
    font-size: 2rem;
    color: var(--danger);
    margin-bottom: 20px;
    animation: pulse-danger 1s ease-in-out infinite;
}

.frozen-message {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 15px;
}

.frozen-timer {
    font-size: 1.5rem;
    color: var(--danger);
    font-weight: 700;
    margin-bottom: 15px;
}

.frozen-warning {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Views */
.view {
    display: none;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.view::-webkit-scrollbar {
    display: none;
}

.view.active {
    display: flex;
}

/* Clicker view should not scroll */
#clicker-view {
    overflow: hidden;
}

/* Tab Bar (Top Menu) */
.tab-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 2px;
    padding: 8px 8px;
    background: var(--bg-card);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 100;
}

/* Compact mode for 8 tabs */
.tab-bar.compact {
    padding: 6px 4px;
    gap: 1px;
}

.tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}

.tab-bar.compact .tab {
    padding: 6px 2px;
    border-radius: 6px;
}

.tab.active {
    background: rgba(124, 58, 237, 0.2);
}

.tab-icon {
    font-size: 1.3rem;
}

.tab-bar.compact .tab-icon {
    font-size: 1.15rem;
}

/* Leaderboard */
.leaderboard-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    overflow: hidden;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 15px;
}

.leaderboard-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.refresh-btn {
    padding: 8px 16px;
    background: var(--bg-card);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Poppins", sans-serif;
}

.refresh-btn:active {
    background: rgba(124, 58, 237, 0.2);
    border-color: var(--primary);
}

.leaderboard-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 5px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.leaderboard-item.top-1 {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
    border-color: rgba(255, 215, 0, 0.3);
}

.leaderboard-item.top-2 {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.15) 0%, rgba(192, 192, 192, 0.05) 100%);
    border-color: rgba(192, 192, 192, 0.3);
}

.leaderboard-item.top-3 {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.15) 0%, rgba(205, 127, 50, 0.05) 100%);
    border-color: rgba(205, 127, 50, 0.3);
}

.leaderboard-item.is-me {
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.3);
}

.leaderboard-item.is-dead {
    opacity: 0.6;
    background: linear-gradient(135deg, rgba(80, 80, 80, 0.2) 0%, rgba(40, 40, 40, 0.1) 100%);
    border-color: rgba(100, 100, 100, 0.3);
}

.leaderboard-item.is-dead .player-name {
    color: #888;
}

.leaderboard-item.is-frozen {
    opacity: 0.5;
    background: linear-gradient(135deg, rgba(120, 40, 40, 0.2) 0%, rgba(60, 20, 20, 0.1) 100%);
    border-color: rgba(150, 50, 50, 0.3);
}

.leaderboard-item.is-frozen .player-name {
    color: #ff6b6b;
    text-decoration: line-through;
}

.skull-score {
    font-size: 1.2rem;
}

.rank {
    font-size: 1.2rem;
    font-weight: 800;
    min-width: 35px;
    text-align: center;
}

.top-1 .rank { color: #ffd700; }
.top-2 .rank { color: #c0c0c0; }
.top-3 .rank { color: #cd7f32; }

.rank-medal {
    font-size: 1.4rem;
}

.player-name {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary);
}

.loading, .empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 1rem;
}

/* Shop */
.shop-container {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.shop-header {
    text-align: center;
    padding: 0 10px 15px;
}

.shop-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

.wallet-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--bg-card);
    border-radius: 20px;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.balance-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.balance-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
}

.balance-token {
    color: var(--secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.token-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 4px;
}

.token-icon-32 {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

/* Wallet Section */
.wallet-section {
    padding: 0 10px 15px;
}

.wallet-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.wallet-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.wallet-label {
    color: var(--text-muted) !important;
    font-size: 0.8rem !important;
    margin-bottom: 5px !important;
}

.wallet-address {
    font-family: monospace;
    font-size: 0.75rem !important;
    color: var(--secondary) !important;
    word-break: break-all;
    background: rgba(0,0,0,0.3);
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 12px !important;
}

.wallet-btn {
    padding: 10px 25px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    transition: all 0.2s ease;
}

.wallet-btn:active {
    transform: scale(0.95);
}

.wallet-btn.secondary {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
}

/* Autoclicker Robot Section */
.robot-section {
    padding: 15px;
    margin-bottom: 15px;
}

.section-title {
    color: var(--secondary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-align: center;
}

.robot-card-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.robot-skin-card {
    width: 100%;
    max-width: none;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(124, 58, 237, 0.15));
    border: 2px solid var(--secondary);
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
}

.robot-skin-card .skin-btn {
    width: auto;
    min-width: 150px;
    padding: 10px 20px;
}

.robot-skin-card .robot-owned-btns {
    width: auto;
    align-items: center;
}

.robot-skin-card.owned {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(124, 58, 237, 0.1));
}

.robot-skin-card.max-level {
    border-color: #bf00ff;
    background: linear-gradient(135deg, rgba(191, 0, 255, 0.15), rgba(255, 0, 255, 0.1));
    box-shadow: 0 0 20px rgba(191, 0, 255, 0.3);
}

.robot-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(124, 58, 237, 0.3));
}

.robot-emoji {
    font-size: 4rem;
    animation: robot-float 3s ease-in-out infinite;
}

@keyframes robot-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(-3deg); }
    75% { transform: translateY(-5px) rotate(3deg); }
}

.robot-level-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: var(--bg-dark);
    color: var(--text-muted);
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.robot-skin-card.owned .robot-level-badge {
    background: var(--accent);
    color: black;
    font-weight: 600;
}

.robot-skin-card.max-level .robot-level-badge {
    background: linear-gradient(135deg, #bf00ff, #ff00ff);
    color: white;
    animation: max-level-glow 1s ease-in-out infinite alternate;
}

@keyframes max-level-glow {
    0% { box-shadow: 0 0 5px rgba(191, 0, 255, 0.5); }
    100% { box-shadow: 0 0 15px rgba(255, 0, 255, 0.8); }
}

.robot-rate {
    display: block;
    color: var(--secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.robot-owned-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.robot-activate-btn {
    background: var(--secondary) !important;
}

.robot-activate-btn:hover {
    background: #0891b2 !important;
}

.robot-activate-btn.active {
    background: var(--accent) !important;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); }
    50% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.8); }
}

/* Robot Active Status Bar */
.robot-active-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(245, 158, 11, 0.2));
    border: 2px solid var(--secondary);
    border-radius: 12px;
    animation: active-pulse 2s ease-in-out infinite;
}

@keyframes active-pulse {
    0%, 100% { border-color: var(--secondary); }
    50% { border-color: var(--accent); }
}

.robot-active-icon {
    font-size: 2rem;
    animation: robot-work 0.5s ease-in-out infinite;
}

@keyframes robot-work {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

.robot-active-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.robot-active-label {
    color: var(--secondary);
    font-size: 0.8rem;
    font-weight: 600;
}

.robot-active-time {
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: 700;
    font-family: monospace;
}

.robot-active-rate {
    color: var(--text);
    font-size: 1.2rem;
    font-weight: 700;
    background: var(--secondary);
    padding: 5px 12px;
    border-radius: 8px;
}

.skins-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 10px 40px;
}

/* Flip Card Container */
.skin-card-container {
    height: 240px;
    position: relative;
}

.skin-card-container .skin-card {
    position: relative;
    width: 100%;
    height: 240px;
}

/* Robot card should not use fixed height */
.robot-skin-card {
    height: auto !important;
}

.skin-card-front {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-radius: 15px;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    width: 100%;
    height: 240px;
}

.skin-card-back {
    display: none !important;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border-radius: 15px;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

/* When flipped, hide front and show back */
.skin-card.flipped .skin-card-front {
    display: none !important;
}

.skin-card.flipped .skin-card-back {
    display: flex !important;
}

/* Legendary info badge */
.legendary-info {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    display: flex !important;
}

/* Info Badge - positioned on skin-card */
.info-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: var(--accent);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--bg-dark);
    cursor: pointer;
    z-index: 200;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.skin-card-container .info-badge {
    display: flex;
}

/* Legendary skin styling */
.skin-card-container.legendary {
    position: relative;
}

.legendary-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ffd700);
    color: #1a0a00;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 10px;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    animation: legendary-pulse 2s ease-in-out infinite;
}

@keyframes legendary-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 140, 0, 0.5); }
}

.legendary-glow {
    animation: legendary-glow-pulse 3s ease-in-out infinite;
}

@keyframes legendary-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8)); }
}

.legendary-text {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.legendary-price {
    color: #ffd700 !important;
    font-weight: 700;
}

.legendary-btn {
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    color: #1a0a00 !important;
    font-weight: 700;
}

.legendary-btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}

/* Back of card content */
.back-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 5px;
    flex-shrink: 0;
}

.upgrade-soon {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 20px;
}

.upgrade-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.upgrade-options::-webkit-scrollbar {
    display: none;
}

.referral-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 10px;
}

.referral-level {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.level-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.level-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
}

.level-max {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.referral-rate {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--secondary);
}

.referral-link-section {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.referral-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.2;
}

.referral-link-box {
    display: flex;
    gap: 6px;
    width: 100%;
}

.referral-link-box input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--text);
    font-size: 0.7rem;
    outline: none;
}

.copy-ref-btn {
    background: var(--accent);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1rem;
}

.copy-ref-btn:active {
    transform: scale(0.95);
}

.referral-progress {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

/* Friends View */
#friends-view {
    overflow: hidden !important;
}

.friends-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
}

.friends-header {
    text-align: center;
}

.friends-header h2 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.friends-tagline {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.friends-invite-section {
    background: var(--bg-card);
    border-radius: 15px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invite-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}

.invite-link-box {
    display: flex;
    gap: 8px;
}

.invite-link-box input {
    flex: 1;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 0.75rem;
    outline: none;
}

.copy-invite-btn {
    background: var(--accent);
    border: none;
    border-radius: 10px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.1rem;
}

.copy-invite-btn:active {
    transform: scale(0.95);
}

.wenpad-stats {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}

.wenpad-stat {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.wenpad-stat strong {
    color: var(--secondary);
}

.friends-list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.friends-list-section h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.friends-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

.friend-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.friend-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    overflow: hidden;
    align-self: center;
}

.friend-avatar.has-photo {
    background: none;
}

.friend-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.friend-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.friend-name {
    font-weight: 600;
    font-size: 0.9rem;
    word-break: break-word;
}

.friend-score {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.friend-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.friend-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    font-weight: 600;
}

.nudge-btn {
    background: var(--secondary);
    color: white;
}

.revive-btn {
    background: #ef4444;
    color: white;
}

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

.friends-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-muted);
}

.friends-empty-hint {
    font-size: 0.85rem;
    margin-top: 10px;
}

/* Blown up effect for purchased upgrade */
@keyframes upgrade-blowup {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
    100% { transform: scale(0.9); opacity: 1; }
}

.upgrade-btn.just-purchased {
    animation: upgrade-blowup 0.4s ease-out;
}

.upgrade-btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.upgrade-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.upgrade-btn:disabled {
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.upgrade-btn.purchased {
    background: var(--success);
    cursor: default;
}

/* Token bonus items - grey when not owned, green when owned */
.token-bonus[disabled] {
    background: var(--bg-dark);
    color: var(--text-muted);
    cursor: default;
}

.token-bonus.purchased {
    background: var(--success);
    color: white;
}

.flip-back-btn {
    margin-top: 10px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 6px 12px;
}

.flip-back-btn:hover {
    border-color: var(--text);
    color: var(--text);
}

.skin-card .skin-preview {
    flex-shrink: 0;
}

.skin-card .skin-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skin-card .skin-btn {
    flex-shrink: 0;
    margin-top: auto;
}

.skin-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3);
}

.skin-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.skin-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skin-info {
    text-align: center;
}

.skin-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.skin-power {
    display: block;
    font-size: 0.75rem;
    color: var(--accent);
    margin-top: 4px;
    font-weight: 600;
}

.skin-price {
    display: block;
    font-size: 0.75rem;
    color: var(--secondary);
    margin-top: 2px;
}

.skin-price.free {
    color: var(--text-muted);
}

.skin-price.upgradeable-text {
    color: var(--accent);
    font-weight: 600;
}

.skin-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    background: rgba(124, 58, 237, 0.2);
    color: var(--primary);
    transition: all 0.2s ease;
}

.skin-btn:active {
    transform: scale(0.95);
}

.skin-btn.selected {
    background: var(--primary);
    color: white;
}

/* Spinner / Wheel of Fortune */
#spinner-view {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.spinner-container {
    padding: 20px;
    padding-bottom: 100px;
    text-align: center;
    max-width: 100%;
}

.spinner-header h2 {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 5px;
}

.spinner-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.wheel-wrapper {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 20px;
}

.wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: var(--accent);
    z-index: 10;
    text-shadow: 0 2px 10px rgba(0, 255, 136, 0.5);
}

.wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.3);
    border: 4px solid var(--accent);
    background: conic-gradient(
        #ff6b6b 0deg 45deg,
        #feca57 45deg 90deg,
        #48dbfb 90deg 135deg,
        #ff9ff3 135deg 180deg,
        #2d3436 180deg 225deg,
        #a55eea 225deg 270deg,
        #26de81 270deg 315deg,
        #fd79a8 315deg 360deg
    );
}

.wheel-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    pointer-events: none;
}

/* Position each emoji in its segment (rotated to center of each 45deg slice) */
.seg-0 { transform: rotate(22.5deg); }
.seg-1 { transform: rotate(67.5deg); }
.seg-2 { transform: rotate(112.5deg); }
.seg-3 { transform: rotate(157.5deg); }
.seg-4 { transform: rotate(202.5deg); }
.seg-5 { transform: rotate(247.5deg); }
.seg-6 { transform: rotate(292.5deg); }
.seg-7 { transform: rotate(337.5deg); }

.wheel-segment span {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
}

/* Extra Life Indicator */
.extra-life-indicator {
    animation: heartPulse 1.5s ease-in-out infinite;
}

.extra-life-indicator .stat-value {
    font-size: 1.5rem;
}

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

/* Wallet Styles */
.wallet-instructions {
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
    font-size: 0.85rem;
}

.wallet-instructions p {
    margin: 5px 0;
    color: #ffc107;
}

.token-ca {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 0.8rem;
}

.ca-label {
    color: var(--text-muted);
}

.ca-address {
    color: var(--accent);
    font-family: monospace;
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.wallet-balances {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px 0;
    font-size: 0.9rem;
}

.wallet-balances p {
    color: var(--text);
}

.wallet-balances span {
    color: var(--accent);
    font-weight: 600;
}

.wallet-address-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 5px 0;
}

.wallet-address-row .wallet-address {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--accent);
    word-break: break-all;
}

/* Copy Toast */
.copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--accent);
    color: #000;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 9999;
    pointer-events: none;
}

.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.spin-info {
    margin-bottom: 15px;
}

.spins-today, .spin-cost {
    color: var(--text);
    font-size: 1rem;
    margin: 5px 0;
}

.spin-cost span {
    color: var(--accent);
    font-weight: 600;
}

.spin-btn {
    padding: 15px 50px;
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: #000;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.spin-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

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

.spin-btn.spinning {
    animation: pulse 0.5s infinite;
}

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

.prize-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-card);
    border-radius: 15px;
}

.prize-item {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: left;
    padding: 5px;
}

/* Spin Result Popup */
.spin-result-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.spin-result-overlay.active {
    display: flex;
}

.spin-result-content {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid var(--accent);
    border-radius: 25px;
    animation: resultPopIn 0.5s ease-out;
}

@keyframes resultPopIn {
    from {
        transform: scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.spin-result-emoji {
    font-size: 4rem;
    margin-bottom: 15px;
}

.spin-result-title {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: 10px;
}

.spin-result-message {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 20px;
}

.spin-result-btn {
    padding: 12px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

/* Fun Message Popup */
.fun-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9997;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.fun-popup-overlay.active {
    display: flex;
}

.fun-popup-content {
    text-align: center;
    padding: 30px 40px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid var(--accent);
    border-radius: 20px;
    max-width: 90%;
    animation: funPopIn 0.3s ease-out;
}

@keyframes funPopIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.fun-popup-message {
    font-size: 1.4rem;
    color: var(--text);
    margin-bottom: 25px;
    line-height: 1.4;
}

.fun-popup-btn {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.fun-popup-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
}

.fun-popup-btn:active {
    transform: scale(0.95);
}

/* Cheat Input Box */
.cheat-input-container {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.cheat-input-container input {
    width: 200px;
    padding: 12px 20px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--accent);
    border-radius: 12px;
    color: white;
    outline: none;
    font-family: "Poppins", sans-serif;
}

.cheat-input-container input::placeholder {
    color: var(--text-muted);
    text-transform: none;
    font-weight: 400;
    font-size: 0.9rem;
}

.cheat-input-container input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}

#cheat-submit-btn {
    padding: 12px 40px;
    font-size: 1.1rem;
    font-weight: 600;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
}

.cheat-input-container.shake {
    animation: cheat-shake 0.5s ease-in-out;
}

.cheat-input-container.shake input {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.2);
}

@keyframes cheat-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80% { transform: translateX(8px); }
}

/* Cheater Detection Background */
.cheater-detection-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 900;
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 5px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    animation: cheater-pulse 1s ease-in-out infinite;
    transition: opacity 0.5s ease;
}

@keyframes cheater-pulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
        transform: translate(-50%, -50%) scale(1.02);
    }
}

/* Anti-Cheat Captcha Popup */
.captcha-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9998;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.captcha-overlay.active {
    display: flex;
}

.captcha-content {
    text-align: center;
    padding: 30px 40px;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: 20px;
    max-width: 90%;
}

.captcha-content h2 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 15px;
}

.captcha-message {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 25px;
}

.captcha-buttons {
    display: flex;
    justify-content: center;
}

.captcha-btn {
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    transition: all 0.2s ease;
}

.yes-btn {
    background: var(--danger);
    color: white;
}

.yes-btn:active {
    transform: scale(0.95);
}

.no-btn {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: 2px solid var(--text-muted);
    color: var(--text-muted);
    padding: 12px 30px;
    font-size: 0.9rem;
}

.no-btn:active {
    border-color: var(--secondary);
    color: var(--secondary);
}

/* Game Message Popup */
.game-msg-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.game-msg-overlay.active {
    display: flex;
}

.game-msg-content {
    text-align: center;
    padding: 35px 45px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid var(--accent);
    border-radius: 25px;
    max-width: 320px;
    animation: msgPopIn 0.4s ease-out;
}

.game-msg-content.error {
    border-color: var(--danger);
}

.game-msg-content.success {
    border-color: var(--secondary);
}

@keyframes msgPopIn {
    from { transform: scale(0.5) rotate(-5deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

.game-msg-emoji {
    font-size: 4rem;
    margin-bottom: 15px;
    animation: msgEmojiPop 0.5s ease-out 0.2s both;
}

@keyframes msgEmojiPop {
    from { transform: scale(0); }
    50% { transform: scale(1.3); }
    to { transform: scale(1); }
}

.game-msg-title {
    font-size: 1.5rem;
    color: var(--text);
    margin-bottom: 10px;
}

.game-msg-content.error .game-msg-title {
    color: var(--danger);
}

.game-msg-content.success .game-msg-title {
    color: var(--secondary);
}

.game-msg-text {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

.game-msg-btn {
    padding: 12px 40px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: var(--accent);
    color: white;
    transition: transform 0.1s;
}

.game-msg-btn:active {
    transform: scale(0.95);
}

/* Buy Confirmation Modal */
.confirm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-overlay.active {
    display: flex;
}

.confirm-content {
    text-align: center;
    padding: 30px 40px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid var(--secondary);
    border-radius: 25px;
    max-width: 320px;
    animation: confirmPopIn 0.3s ease-out;
}

@keyframes confirmPopIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.confirm-content h2 {
    font-size: 1.5rem;
    color: var(--secondary);
    margin-bottom: 20px;
}

.confirm-skin-preview {
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    border: 2px solid var(--accent);
}

.confirm-skin-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
}

.confirm-price {
    color: var(--secondary);
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.confirm-btn {
    padding: 12px 30px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
}

.confirm-btn:active {
    transform: scale(0.95);
}

.cancel-btn {
    background: var(--bg-card);
    color: var(--text-muted);
    border: 2px solid var(--text-muted);
}

.buy-confirm-btn {
    background: var(--secondary);
    color: white;
}

.revive-confirm-btn {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

.revive-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.revive-score {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Music Player - Large Overlay */
.music-player {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
}

.music-player.active {
    display: block;
}

.music-toggle {
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 56px;
    height: 56px;
    background: var(--gradient);
    border: none;
    border-radius: 50%;
    font-size: 1.6rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 201;
}

.music-toggle:active {
    transform: scale(0.9);
}

.music-toggle.playing {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 20px rgba(124, 58, 237, 0.6); }
    50% { box-shadow: 0 4px 30px rgba(124, 58, 237, 0.9), 0 0 40px rgba(6, 182, 212, 0.4); }
}

.music-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(10, 10, 15, 0.98) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
    max-height: 70vh;
    overflow: hidden;
}

.music-panel.open {
    transform: translateY(0);
}

.music-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.music-drag-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.music-title {
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.music-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 10px;
    line-height: 1;
    transition: all 0.2s ease;
}

.music-close:active {
    background: rgba(255, 255, 255, 0.2);
}

.music-albums {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.music-albums::-webkit-scrollbar {
    display: none;
}

.album-btn {
    padding: 12px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.album-btn.active {
    background: var(--gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
}

.music-embed {
    padding: 0 20px 25px;
}

.music-embed iframe {
    border-radius: 12px;
    width: 100%;
    height: 80px;
}

/* Album Color Themes */

/* Crypto Anthems - Synthwave (pink/purple/cyan neon) */
body.theme-crypto-anthems {
    --bg-dark: #0d0221;
    --bg-card: #1a0a2e;
    --primary: #ff00ff;
    --secondary: #00ffff;
    --accent: #ff6ec7;
    --gradient: linear-gradient(135deg, #ff00ff 0%, #00ffff 50%, #ff6ec7 100%);
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(255, 0, 255, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(0, 255, 255, 0.15) 0%, transparent 50%);
}

/* Antisocial Netwerking - Muted Rainbow */
body.theme-antisocial {
    --bg-dark: #1a1a2e;
    --bg-card: #252540;
    --primary: #9b59b6;
    --secondary: #3498db;
    --accent: #e67e22;
    --gradient: linear-gradient(135deg, #e74c3c 0%, #9b59b6 25%, #3498db 50%, #2ecc71 75%, #f39c12 100%);
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(155, 89, 182, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(52, 152, 219, 0.1) 0%, transparent 50%);
}

/* Six-Seven - Black & White */
body.theme-six-seven {
    --bg-dark: #0a0a0a;
    --bg-card: #1a1a1a;
    --primary: #ffffff;
    --secondary: #888888;
    --accent: #cccccc;
    --text: #ffffff;
    --text-muted: #666666;
    --gradient: linear-gradient(135deg, #ffffff 0%, #888888 50%, #444444 100%);
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
}

/* Six-Seven theme - black text on white buttons */
body.theme-six-seven .skin-btn.selected,
body.theme-six-seven .album-btn.active,
body.theme-six-seven .wallet-btn,
body.theme-six-seven .refresh-btn:active,
body.theme-six-seven .upgrade-btn:not(:disabled),
body.theme-six-seven .robot-activate-btn.active,
body.theme-six-seven .prestige-display,
body.theme-six-seven .claim-btn {
    color: #0a0a0a;
}

body.theme-six-seven .tab.active {
    background: rgba(255, 255, 255, 0.2);
}

/* Music View Tab */
.music-container {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.music-view-header {
    text-align: center;
    padding: 0 10px 20px;
}

.music-view-header h2 {
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 5px;
}

.music-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.album-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 15px 20px;
}

.album-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.album-card.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.3);
}

.album-card:active {
    transform: scale(0.98);
}

.album-art {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.album-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.album-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.album-year {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.music-player-embed {
    padding: 0 15px 20px;
}

.music-player-embed iframe {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.music-links {
    text-align: center;
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.music-links-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.streaming-platforms {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.platform {
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--secondary);
    font-weight: 600;
}


/* Wenpad Level Progress Grid */
.wenpad-level-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    margin-bottom: 10px;
}

.current-level {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.current-rate {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

.wenpad-levels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 5px;
}

.wenpad-level-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.wenpad-level-btn.unlocked {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(255, 100, 100, 0.2));
    border-color: var(--primary);
}

.wenpad-level-btn.current {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: var(--accent);
    transform: scale(1.05);
}

.wenpad-level-btn.locked {
    opacity: 0.5;
}

.level-num {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.wenpad-level-btn.unlocked .level-num,
.wenpad-level-btn.current .level-num {
    color: var(--text);
}

.level-rate {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
}

.level-req {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.wenpad-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin: 8px 0;
}

/* Achievements View */
.achievements-container {
    padding: 10px;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.achievements-header h2 {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.achievements-stats {
    padding: 8px 15px;
    background: rgba(138, 43, 226, 0.2);
    border-radius: 20px;
}

.achievements-count {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
}

.achievements-section {
    margin-bottom: 25px;
}

.achievement-category {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.achievement-card {
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 0;
}

.achievement-card.unlocked {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(255, 100, 100, 0.1));
    border-color: var(--primary);
}

.achievement-card.locked {
    opacity: 0.6;
}

.achievement-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.achievement-badge {
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.achievement-card.unlocked .achievement-badge {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.achievement-card.locked .achievement-badge {
    filter: grayscale(1);
}

.achievement-info {
    flex: 1;
    min-width: 0;
}

.achievement-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.achievement-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: block;
}

.achievement-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.achievement-reward {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 600;
}

.achievement-progress {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.achievement-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.achievement-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.claim-btn {
    padding: 4px 10px;
    font-size: 0.65rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.achievement-claimed {
    font-size: 0.8rem;
}

.prestige-display {
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    margin-right: 8px;
}

/* Board Sections (Leaderboard) */
.board-section {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: rgba(138, 43, 226, 0.2);
    cursor: pointer;
    font-weight: 700;
}

.board-toggle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.board-content {
    padding: 5px;
}

.prestige-score {
    color: var(--primary);
    font-weight: 700;
}

/* Telegram theme adaptation */
body.tg-theme-dark {
    --bg-dark: var(--tg-theme-bg-color, #0a0a0f);
    --text: var(--tg-theme-text-color, #ffffff);
}

/* Settings Button */
.header {
    position: relative;
}

.settings-btn {
    position: absolute;
    top: 20px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.settings-btn:hover, .settings-btn:active {
    opacity: 1;
    transform: scale(1.1);
}

/* Settings Popup */
.settings-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.settings-popup.active {
    opacity: 1;
    visibility: visible;
}

.settings-content {
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border-radius: 20px;
    padding: 0;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text);
}

.settings-close {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.settings-close:hover {
    opacity: 1;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-label {
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 52px;
    height: 28px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #666;
    border-radius: 28px;
    transition: 0.3s;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--primary, #00ff88);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Settings View */
.settings-container {
    padding: 15px;
}

.settings-container h2 {
    margin: 0 0 20px 0;
    color: #fff;
}

.settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 18px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.settings-label {
    font-size: 1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Music View */
.music-container {
    padding: 15px;
}

.music-container h2 {
    margin: 0 0 5px 0;
    color: #fff;
}

.music-container .music-tagline {
    color: #aaa;
    font-size: 0.9rem;
    margin: 0 0 20px 0;
}

.music-container .album-cards {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.music-container .album-card {
    width: 100px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s;
}

.music-container .album-card.active {
    opacity: 1;
    transform: scale(1.05);
}

.music-container .album-art {
    width: 100%;
    border-radius: 8px;
}

.music-container .album-info {
    text-align: center;
    margin-top: 5px;
}

.music-container .album-name {
    display: block;
    font-size: 0.75rem;
    color: #fff;
}

.music-container .album-year {
    display: block;
    font-size: 0.65rem;
    color: #888;
}