/* =========================================
   GAME DECK PANEL
   ========================================= */
#game-deck-panel {
    background: var(--bg-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 10;
    flex-shrink: 0;
    opacity: 0;
    transition:
        width 0.35s cubic-bezier(0.4, 0.0, 0.2, 1),
        height 0.35s cubic-bezier(0.4, 0.0, 0.2, 1),
        opacity 0.2s ease,
        border 0.2s;
    width: 0;
    height: 100%;
    border: none;
}

#game-deck-panel.panel-open {
    width: 40%;
    height: 100%;
    opacity: 1;
}

#workspace-flex.orient-vertical #game-deck-panel {
    width: 100%;
    height: 0;
}

#workspace-flex.orient-vertical #game-deck-panel.panel-open {
    width: 100% !important;
    height: 40% !important;
}

/* Borders/Ordering */
.deck-left {
    order: -1;
    border-right: 2px solid var(--main-color);
    border-left: none;
    border-bottom: none;
    border-top: none;
}

.deck-right {
    order: 2;
    border-left: 2px solid var(--main-color);
    border-right: none;
    border-bottom: none;
    border-top: none;
}

.deck-top {
    order: -1;
    border-bottom: 2px solid var(--main-color);
    border-top: none;
    border-left: none;
    border-right: none;
}

.deck-bottom {
    order: 2;
    border-top: 2px solid var(--main-color);
    border-bottom: none;
    border-left: none;
    border-right: none;
}

.panel-hidden {
    display: none !important;
}

/* Deck UI */
.deck-header,
.deck-footer {
    padding: 8px 15px;
    border-bottom: 1px solid var(--main-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--header-bg);
    flex-shrink: 0;
}

.deck-footer {
    border-top: 1px solid var(--main-color);
    border-bottom: none;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.deck-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
}

.iframe-container {
    flex-grow: 1;
    background: #000;
    position: relative;
}

#game-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

#game-deck-panel button,
#game-select {
    background: var(--bg-color);
    color: var(--main-color);
    border: 1px solid var(--main-color);
    font-family: 'VT323', monospace;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 8px;
}

#game-deck-panel button:hover {
    background: var(--main-color);
    color: var(--bg-color);
}

#btn-stop-game:hover {
    background: #ff0000 !important;
    color: #fff !important;
}

.cart-controls {
    display: flex;
    width: 100%;
    gap: 5px;
}

#game-select {
    flex-grow: 1;
}

.deck-btn-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 5px;
}

.deck-btn {
    flex: 1;
    text-align: center;
    padding: 4px 0;
}

.deck-sep {
    color: var(--main-color);
    opacity: 0.5;
    padding: 0 5px;
    display: flex;
    align-items: center;
}

@media (max-width: 700px) {
    #workspace-flex {
        flex-direction: column !important;
    }

    #game-deck-panel {
        width: 100% !important;
        height: 0;
        border-left: none !important;
        border-right: none !important;
    }

    #game-deck-panel.panel-open {
        height: 40% !important;
    }

    /* Force visible border for vertical stacking */
    #game-deck-panel.deck-top,
    #game-deck-panel.deck-left {
        order: -1;
        border-bottom: 2px solid var(--main-color) !important;
    }

    #game-deck-panel.deck-bottom,
    #game-deck-panel.deck-right {
        order: 2;
        border-top: 2px solid var(--main-color) !important;
    }
}