/* --- QUANTUM BUTTON V1.0.0 STYLES --- */
:root {
    --neon-blue: #00f3ff;
    --neon-pink: #ff0099;
    --neon-green: #22ff22;
    --neon-gold: #ffd700;
    --neon-red: #ff4444;
    --bg-dark: #050505;
}

body {
    background: radial-gradient(circle at 50% 0%, #1a0b2e 0%, #000000 70%);
    color: white;
    font-family: 'Orbitron', Arial, sans-serif;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    -webkit-touch-callout: none;
}

/* --- UI COMPONENTS --- */

.btn-main {
    background: linear-gradient(180deg, rgba(0, 243, 255, 0.2) 0%, rgba(0, 243, 255, 0) 100%);
    border: 2px solid var(--neon-blue);
    box-shadow: 0 0 15px var(--neon-blue), inset 0 0 20px rgba(0, 243, 255, 0.1);
    text-shadow: 0 0 5px var(--neon-blue);
    clip-path: polygon(10% 0, 100% 0, 100% 80%, 90% 100%, 0 100%, 0 20%);
    transition: all 0.1s ease-out;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    touch-action: manipulation;
}
.btn-main:active { 
    transform: scale(0.95); 
    background: var(--neon-blue); 
    color: black; 
    text-shadow: none; 
}

#app-container { 
    position: relative; 
    z-index: 1; 
    background: black; 
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.screen { z-index: 200; }

/* FIX: WHEEL GRADIENT */
#wheel {
    background: conic-gradient(
        #ff0000 0deg 90deg,
        #ffd700 90deg 180deg,
        #00f3ff 180deg 270deg,
        #a855f7 270deg 360deg
    );
    border: 4px solid white;
    box-shadow: 0 0 20px rgba(255,255,255,0.2);
    will-change: transform;
}

/* FIX: CARD GLOWS */
.mode-card {
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
    transition: all 0.2s ease;
}
.mode-card:hover {
    box-shadow: 0 0 15px var(--neon-blue);
    border-color: var(--neon-blue);
}
.mode-card:active { transform: scale(0.98); }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

#game-hud { z-index: 100 !important; pointer-events: none; }
#game-hud button { pointer-events: auto !important; }

.theme-neon { border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 20px rgba(0, 243, 255, 0.1); }
.theme-gold { border: 2px solid var(--neon-gold) !important; box-shadow: 0 0 30px rgba(255, 215, 0, 0.4); }
.theme-devil { border: 2px solid var(--neon-red) !important; box-shadow: 0 0 40px rgba(255, 0, 0, 0.6); }
.theme-devil #game-area { box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.2); }

.theme-glitch { border: 2px solid #0f0 !important; animation: glitch-border 0.2s infinite; }
.glitch-text { 
    animation: glitch-text 0.1s infinite; 
    color: #0f0 !important; 
    text-shadow: 2px 0 red, -2px 0 blue;
    display: inline-block;
}

@keyframes glitch-border {
    0% { border-color: #0f0; } 25% { border-color: #f0f; } 50% { border-color: #0ff; } 100% { border-color: #0f0; }
}
@keyframes glitch-text {
    0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); }
}

.theme-neon-rgb { 
    border: none !important; 
    box-shadow: none !important; 
    position: relative; /* Needed for the glow to sit correctly */
    z-index: 1;
}

.theme-neon-rgb::before {
    content: '';
    position: absolute;
    inset: -4px; /* Made it slightly bigger for better glow */
    background: conic-gradient(from 0deg, #ff0000, #ffd700, #00f3ff, #a855f7, #ff0000);
    filter: blur(10px); /* Softened the glow */
    animation: rotate 4s linear infinite;
    z-index: -1;
    border-radius: inherit; /* Matches the button shape */
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rotate-border { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ticker { display: inline-block; padding-left: 100%; animation: ticker 30s linear infinite; white-space: nowrap; }
@keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

.rainbow-text {
    background-image: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text; color: transparent; animation: rainbow 4s linear infinite; background-size: 200% auto;
}
@keyframes rainbow { 100% { background-position: 200% center; } }

@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 4s linear infinite; }

@keyframes crateShake {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(1.1); }
}
.animate-crate-shake { animation: crateShake 0.5s ease-in-out infinite; }

@keyframes tease {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    80% { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.animate-tease { animation: tease 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

@keyframes fortniteDance {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-30px) rotate(-360deg) scale(1.1); }
    50% { transform: translateY(0) rotate(-180deg) scale(0.9); }
    75% { transform: translateY(-15px) rotate(180deg) scale(1.1); }
}
.animate-fortnite { animation: fortniteDance 0.8s infinite ease-in-out; }

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-50px) scale(1.5); opacity: 0; }
}
.animate-float-up { animation: floatUp 0.8s ease-out forwards; }

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.1); }
    70% { transform: scale(1); }
}
.animate-heartbeat { animation: heartbeat 1.5s infinite ease-in-out; }

/* VFX */
.scanlines { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.15)); background-size: 100% 4px; pointer-events: none !important; z-index: 50; }
.vignette { background: radial-gradient(circle, transparent 50%, black 120%); pointer-events: none !important; z-index: 51; }
#q-button { will-change: transform; transform: translateZ(0); backface-visibility: hidden; overflow: visible !important; }

/* Devil Horns */
.horn-left, .horn-right {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 20px solid red;
    z-index: -1;
}
.horn-left { left: 10px; transform: rotate(-30deg); }
.horn-right { right: 10px; transform: rotate(30deg); }

.hidden { display: none !important; }
.flex { display: flex !important; }

/* MEGA SPIN ANIMATION */
@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease infinite;
}

/* NEON WHEEL COLORS */
#wheel {
    background: conic-gradient(
        var(--neon-red) 0deg 90deg,
        var(--neon-gold) 90deg 180deg,
        var(--neon-blue) 180deg 270deg,
        #a855f7 270deg 360deg
    ) !important;
}

/* Hide mega-spin for non-Pro users */
#mega-spin-btn {
    display: none !important;
}

body.is-pro #mega-spin-btn {
    display: flex !important;
    height: 80px !important;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 0 30px rgba(234,179,8,0.5), 0 0 60px rgba(168,85,247,0.3);
    animation: pulse 2s ease-in-out infinite, gradient-x 3s ease infinite;
}

body.is-pro #go-pro-btn {
    display: none !important;
}

body.is-pro #ad-banner {
    display: none !important;
}

#unlocked-avatars-grid img {
    width: 44px !important;
    height: 44px !important;
    object-fit: cover;
    border-radius: 8px;
}

/* SCREEN SHAKE ANIMATIONS */
@keyframes shake-light {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

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

.shake-light {
    animation: shake-light 0.3s ease-in-out;
}

.shake-heavy {
    animation: shake-heavy 0.5s ease-in-out;
}


#modal-spin {
    z-index: 10001 !important;
}


.pointer-events-none {
    pointer-events: none;
}

@media (max-height: 700px) {
    #streak-phrase {
        top: 15% !important;
        font-size: 2rem !important;
    }
}

.skin-robot {
    background: radial-gradient(circle at 30% 30%, #718096, #2d3748) !important;
    border: 3px solid #cbd5e0 !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 15px #a0aec0 !important;
    position: relative;
    overflow: hidden !important; /* Keeps eyes inside */
}

/* Robot Eyes */
.skin-robot::before, .skin-robot::after {
    content: '';
    position: absolute;
    top: 35%;
    width: 12px;
    height: 12px;
    background: #00f3ff;
    border-radius: 50%;
    box-shadow: 0 0 8px #00f3ff;
    animation: blink-eyes 4s infinite;
}

.skin-robot::before { left: 25%; }
.skin-robot::after { right: 25%; }

@keyframes blink-eyes {
    0%, 96%, 100% { transform: scaleY(1); }
    98% { transform: scaleY(0.1); } /* Blink! */
}

/* ============================================
   ROBOT SKIN VARIANTS - Each skin has unique robot
   ============================================ */

/* GOLD ROBOT - Luxurious golden robot */
.skin-robot-gold {
    background: radial-gradient(circle at 30% 30%, #fff8dc, #ffd700) !important;
    border: 3px solid #fff !important;
    box-shadow: inset 0 0 20px rgba(255,255,255,0.5), 0 0 30px #ffd700 !important;
    position: relative;
    overflow: hidden !important;
}

.skin-robot-gold::before, .skin-robot-gold::after {
    content: '';
    position: absolute;
    top: 35%;
    width: 14px;
    height: 14px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 12px #ffd700, inset 0 0 4px #fff;
    animation: blink-eyes 3s infinite;
}

.skin-robot-gold::before { left: 22%; }
.skin-robot-gold::after { right: 22%; }

/* NEON ROBOT - Cyberpunk neon robot */
.skin-robot-neon {
    background: #0a0a0a !important;
    border: 2px solid #00f3ff !important;
    box-shadow: inset 0 0 30px rgba(0,243,255,0.3), 0 0 20px #00f3ff !important;
    position: relative;
    overflow: hidden !important;
}

.skin-robot-neon::before, .skin-robot-neon::after {
    content: '';
    position: absolute;
    top: 35%;
    width: 12px;
    height: 12px;
    background: #00f3ff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00f3ff, 0 0 30px #ff0099;
    animation: neon-eyes 2s ease-in-out infinite;
}

.skin-robot-neon::before { left: 25%; }
.skin-robot-neon::after { right: 25%; }

@keyframes neon-eyes {
    0%, 100% { background: #00f3ff; box-shadow: 0 0 15px #00f3ff; }
    25% { background: #ff0099; box-shadow: 0 0 15px #ff0099; }
    50% { background: #00ff00; box-shadow: 0 0 15px #00ff00; }
    75% { background: #ffff00; box-shadow: 0 0 15px #ffff00; }
}

/* GLITCH ROBOT - Matrix-style glitchy robot */
.skin-robot-glitch {
    background: #111 !important;
    border: 2px solid #0f0 !important;
    box-shadow: inset 0 0 20px rgba(0,255,0,0.2), 0 0 15px #0f0 !important;
    position: relative;
    overflow: hidden !important;
    animation: glitch-shake 0.3s infinite;
}

.skin-robot-glitch::before, .skin-robot-glitch::after {
    content: '';
    position: absolute;
    top: 35%;
    width: 12px;
    height: 12px;
    background: #0f0;
    border-radius: 2px;
    box-shadow: 0 0 10px #0f0, 2px 0 #f00, -2px 0 #00f;
    animation: glitch-eyes 0.1s infinite;
}

.skin-robot-glitch::before { left: 25%; }
.skin-robot-glitch::after { right: 25%; }

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

@keyframes glitch-eyes {
    0%, 100% { opacity: 1; transform: translate(0); }
    33% { opacity: 0.8; transform: translate(2px, -1px); }
    66% { opacity: 0.9; transform: translate(-2px, 1px); }
}

/* DEVIL ROBOT - Menacing red robot with horns */
.skin-robot-devil {
    background: radial-gradient(circle at 30% 30%, #ffaaaa, #cc0000) !important;
    border: 3px solid #ff0000 !important;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5), 0 0 30px rgba(255,0,0,0.8) !important;
    position: relative;
    overflow: visible !important;
}

.skin-robot-devil::before, .skin-robot-devil::after {
    content: '';
    position: absolute;
    top: 35%;
    width: 14px;
    height: 14px;
    background: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff0000, inset 0 0 5px #ffff00;
    animation: devil-eyes 1s ease-in-out infinite;
}

.skin-robot-devil::before { left: 22%; }
.skin-robot-devil::after { right: 22%; }

@keyframes devil-eyes {
    0%, 100% { box-shadow: 0 0 15px #ff0000, inset 0 0 5px #ffff00; }
    50% { box-shadow: 0 0 25px #ff0000, inset 0 0 8px #fff; }
}

/* Devil Horns - Applied via additional elements */
.skin-robot-devil .horn-left,
.skin-robot-devil .horn-right {
    position: absolute;
    top: -12px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 24px solid #cc0000;
    filter: drop-shadow(0 0 5px #ff0000);
    z-index: 10;
}

.skin-robot-devil .horn-left { left: 8px; transform: rotate(-25deg); }
.skin-robot-devil .horn-right { right: 8px; transform: rotate(25deg); }

@media (orientation: portrait) {
    #app-container {
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    /* Make buttons bigger for thumbs */
    .mode-card {
        padding: 1.5rem !important;
    }
    
    .mode-card .text-2xl {
        font-size: 1.8rem !important;
    }
}

/* Confetti Animation for Results Screen */
@keyframes confetti-fall {
    0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffd700;
    top: -10px;
    z-index: 300;
    pointer-events: none;
    animation: confetti-fall 3s linear forwards;
}

/* SKIN-MATCHING GAME BORDERS */
.theme-gold #app-container {
    border-color: var(--neon-gold) !important;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
}

.theme-neon #app-container {
    border-color: var(--neon-blue) !important;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.3);
}

.theme-glitch #app-container {
    border-color: #0f0 !important;
    animation: glitch-border 0.2s infinite;
}

@keyframes bomb-flash {
    0% { opacity: 0; }
    20% { opacity: 0.8; }
    100% { opacity: 0; }
}

@keyframes bomb-particle {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(
            calc(-50% + var(--end-x)), 
            calc(-50% + var(--end-y))
        ) scale(0);
        opacity: 0;
    }
}

@keyframes bomb-ring {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 4px;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes bomb-emoji {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   ACCESSIBILITY - COLOR BLIND MODE
   ============================================ */

/* Protanopia/Deuteranopia friendly (red-green) */
.color-blind-mode {
    filter: none !important;
}

.color-blind-mode .text-green-400,
.color-blind-mode .text-green-500,
.color-blind-mode .bg-green-400,
.color-blind-mode .bg-green-500,
.color-blind-mode .border-green-400,
.color-blind-mode .border-green-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity)) !important; /* Blue instead of green */
}

.color-blind-mode .text-red-400,
.color-blind-mode .text-red-500,
.color-blind-mode .text-red-600,
.color-blind-mode .bg-red-400,
.color-blind-mode .bg-red-500,
.color-blind-mode .bg-red-600,
.color-blind-mode .border-red-400,
.color-blind-mode .border-red-500,
.color-blind-mode .border-red-600 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity)) !important; /* Orange instead of red */
}

/* High contrast rarity colors */
.color-blind-mode .skin-robot-devil {
    background: radial-gradient(circle at 30% 30%, #ffcc80, #ff9800) !important;
    border-color: #ff9800 !important;
}

/* Add symbols to distinguish colors */
.color-blind-mode [data-rarity="COMMON"]::after { content: " ●"; }
.color-blind-mode [data-rarity="UNCOMMON"]::after { content: " ■"; }
.color-blind-mode [data-rarity="RARE"]::after { content: " ◆"; }
.color-blind-mode [data-rarity="SUPER"]::after { content: " ★"; }
.color-blind-mode [data-rarity="ULTRA"]::after { content: " ✦"; }
.color-blind-mode [data-rarity="MYTHIC"]::after { content: " ✶"; }

/* High contrast mode option */
.high-contrast-mode {
    filter: contrast(1.2) !important;
}

.high-contrast-mode .bg-gray-900 {
    background-color: #000 !important;
}

.high-contrast-mode .text-gray-400,
.high-contrast-mode .text-gray-500 {
    color: #fff !important;
}