/* Game Controls Component Styles */

/* Tab scrollbar styling */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Tab transition effects */
.game-tab {
    transition: all 0.3s ease;
}
.game-tab:hover {
    background-color: rgba(55, 65, 81, 0.3);
}
.tab-iframe {
    transition: opacity 0.3s ease;
}

/* Game loading animation */
.progress-animation {
    animation: progress 60s linear;
    width: 0%;
}

@keyframes progress {
    0% { width: 0%; }
    100% { width: 100%; }
}

/* Game control bar responsive adjustments */
#game-control-bar {
    backdrop-filter: blur(8px);
}

#game-control-bar button {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#game-control-bar button i {
    font-size: 14px;
}

@media (min-width: 768px) {
    #game-control-bar button {
        min-height: 40px;
    }
    
    #game-control-bar button i {
        font-size: 16px;
    }
}

/* Modal animations */
.modal-enter {
    transform: scale(0.95);
    opacity: 0;
}

.modal-enter-active {
    transform: scale(1);
    opacity: 1;
    transition: all 0.3s ease;
}

/* Share modal specific styles */
#share-modal .social-button {
    transition: all 0.3s ease;
}

#share-modal .social-button:hover {
    transform: scale(1.1);
}

/* How to play modal specific styles */
#how-to-play-modal .control-item {
    background: rgba(55, 65, 81, 0.5);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}

#how-to-play-modal .key-indicator {
    background: rgb(55, 65, 81);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
}

/* Fullscreen adjustments */
.fullscreen-mode #game-control-bar,
.fullscreen-mode #game-tabs {
    display: none !important;
}

/* Domain watermark */
.domain-watermark {
    pointer-events: none;
    user-select: none;
}

/* Landscape fullscreen button */
#landscape-fullscreen-btn {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Exit fullscreen button */
#exit-fullscreen-btn {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments for small screens */
@media (max-width: 640px) {
    #game-control-bar {
        padding: 8px 12px;
    }
    
    #game-control-bar .flex.items-center.space-x-1 {
        gap: 4px;
    }
    
    #how-to-play-modal .control-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    #how-to-play-modal .control-item > div {
        margin-bottom: 8px;
        width: 100%;
    }
}