* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-height: 100vh;
    background-image: url('assets/floor.png');
    background-repeat: repeat;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Press Start 2P', cursive;
    position: relative;
}

.ca-text {
    color: #fff;
    font-size: clamp(10px, 1.2vw, 14px);
    z-index: 10;
}

.ca-text-desktop {
    position: absolute;
    top: 20px;
    left: 20px;
    white-space: nowrap;
    max-width: calc(100vw - 40px);
    word-break: break-all;
}

.ca-text-mobile {
    display: none;
    text-align: center;
    white-space: normal;
    word-break: break-all;
    margin-top: 20px;
    padding: 0 20px;
    max-width: 100%;
    font-size: clamp(8px, 2.5vw, 12px);
    line-height: 1.4;
    font-size: 0.9rem;
}

.container {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    margin-top: 25px;
    max-width: min(280px, 70vw);
    width: auto;
    height: auto;
}

.how-section {
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.how-screen {
    max-width: min(65%, 75vw);
    width: auto;
    height: auto;
}

.how-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 65%;
    max-width: 450px;
}

.how-title {
    font-size: clamp(10px, 1.6vw, 16px);
    margin-top: -10px;
    color: #fff;
}

.message-container {
    position: relative;
    min-height: 50px;
    margin-top: 40px;
}

.message {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    font-size: clamp(8px, 1.2vw, 13px);
    color: #fff;
    line-height: 1.2;
}

.message.active {
    opacity: 1;
    position: relative;
}

.bot-cards {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
    flex-wrap: nowrap;
}

.bot-card-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.bot-card {
    width: auto;
    height: auto;
    max-width: min(300px, 22vw, 80%);
}

.bot-pfp {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    max-width: 30%;
    z-index: 1;
}

.bot-name {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(14px, 2.5vw, 22px);
    z-index: 2;
    white-space: nowrap;
}

.bot-wallet {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(7px, 1.1vw, 11px);
    z-index: 2;
    text-align: center;
    width: 68%;
    word-break: break-all;
    line-height: 1.4;
}

.copy-btn {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0894ff;
    border: 2px solid #0863ff;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: clamp(9px, 1.4vw, 14px);
    padding: clamp(4px, 0.7vw, 7px) clamp(7px, 1.1vw, 11px);
    cursor: pointer;
    z-index: 2;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.copy-btn:hover {
    opacity: 0.8;
}

.copy-btn:active {
    opacity: 0.6;
}

.watch-live-link {
    display: block;
    margin-top: 25px;
    margin-bottom: 40px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.watch-live-link:hover {
    opacity: 0.8;
}

.watch-live {
    width: auto;
    height: auto;
    max-width: min(200px, 50vw);
    display: block;
}

.social-logos {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    z-index: 10;
}

.social-logos a {
    display: block;
    text-decoration: none;
    transition: opacity 0.2s;
}

.social-logos a:hover {
    opacity: 0.8;
}

.social-logo {
    width: auto;
    height: auto;
    max-width: min(60px, 12vw);
    display: block;
}

/* Large desktop screens - larger copy button */
@media (min-width: 1400px) {
    .logo {
        max-width: min(360px, 90vw);
    }
    
    .how-screen {
        max-width: min(80%, 90vw);
    }
    
    .how-content {
        width: 80%;
        max-width: 600px;
    }
    
    .how-title {
        font-size: clamp(12px, 2vw, 20px);
    }
    
    .message {
        font-size: clamp(10px, 1.5vw, 16px);
    }
    
    .copy-btn {
        top: 77%;
        font-size: clamp(12px, 2vw, 20px);
        padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 16px);
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1200px) {
    .bot-card {
        max-width: min(220px, 23vw, 80%);
    }
    
    .bot-cards {
        gap: clamp(10px, 1.5vw, 20px);
    }
    
    .copy-btn {
        font-size: clamp(10px, 1.5vw, 16px);
        padding: clamp(5px, 0.8vw, 8px) clamp(8px, 1.2vw, 12px);
    }
}

@media (max-width: 1024px) {
    .bot-card {
        max-width: min(200px, 22vw, 80%);
    }
    
    .bot-cards {
        gap: clamp(8px, 1.5vw, 15px);
    }
    
    .copy-btn {
        font-size: clamp(9px, 1.4vw, 14px);
        padding: clamp(4px, 0.7vw, 7px) clamp(7px, 1.1vw, 11px);
    }
}

@media (max-width: 768px) {
    .ca-text-desktop {
        display: none;
    }
    
    .ca-text-mobile {
        display: block;
    }
    
    .bot-card {
        max-width: min(300px, 80vw, 80%);
    }
    
    .bot-cards {
        flex-wrap: wrap;
        gap: clamp(10px, 3vw, 20px);
    }
    
    .how-screen {
        max-width: 95vw;
    }
    
    .social-logos {
        right: clamp(10px, 2vw, 20px);
        gap: clamp(10px, 2vw, 20px);
    }
    
    .social-logo {
        max-width: min(45px, 10vw);
    }

    .how-title {
        margin-top: 12px;
    }

    .message-container {
        margin-top: 20px;
    }

    .bot-name {
        font-size: clamp(18px, 4vw, 22px);
    }

    .bot-wallet {
        font-size: clamp(10px, 2vw, 12px);
    }

    .copy-btn {
        font-size: clamp(16px, 3.5vw, 20px);
        padding: clamp(8px, 1.5vw, 10px) clamp(12px, 2vw, 16px);
    }
}

@media (max-width: 480px) {
    .bot-name {
        font-size: clamp(16px, 5vw, 20px);
    }

    .bot-wallet {
        font-size: clamp(9px, 2.5vw, 11px);
    }

    .copy-btn {
        font-size: clamp(14px, 4vw, 18px);
        padding: clamp(8px, 2vw, 10px) clamp(12px, 2.5vw, 16px);
    }
    
    .social-logo {
        max-width: min(40px, 9vw);
    }
}