:root {
            --card-width: 100px;
            --card-height: 150px;
            --card-gap: 10px;
            --anim-speed: 0.25s;
            --game-max-width: 800px;
            --game-height: 1100px;
            --card-font-size: 32px;
            --card-symbol-size: 32px;
        }

.div-container {
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 800px;
    text-align: center;
    /* 추가: 자식이 넘치는 것을 방지 */
    overflow: hidden; 
    box-sizing: border-box;
}

.game-container {
   background: #2c3e50;
            border: 4px solid #3f8fef;
    padding: 15px;
    /* 수정: 부모 너비를 넘지 않도록 설정 */
    width: 100%; 
    max-width: 100%; 
    
    height: var(--game-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    border-radius: 12px;
    /* 추가: 패딩이 너비에 영향을 주지 않도록 함 */
    box-sizing: border-box; 
}

        @media (max-width: 800px) {
            :root {
            --card-width: 100px;
            --card-height: 150px;
            --card-gap: 10px;
            --anim-speed: 0.25s;
            --game-max-width: 800px;
            --game-height: 1100px;
            --card-font-size: 32px;
            --card-symbol-size: 32px;
            }
            .game-container { 
                padding: 10px 4px; 
                border-radius: 0;
            }
            body { align-items: flex-start; }
        }

        .card-slot {
            width: var(--card-width);
            height: var(--card-height);
            border: 2px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            position: relative;
            background: rgba(0, 0, 0, 0.15);
        }

        .card {
            width: var(--card-width);
            height: var(--card-height);
            background: white;
            border-radius: 6px;
            position: absolute;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            display: flex;
            flex-direction: column;
            padding: 2px;
            cursor: pointer;
            border: 1px solid #ddd;
            box-sizing: border-box;
            user-select: none;
            touch-action: none;
            transition: transform var(--anim-speed) cubic-bezier(0.2, 0.8, 0.2, 1), 
                        top var(--anim-speed) cubic-bezier(0.2, 0.8, 0.2, 1), 
                        left var(--anim-speed) cubic-bezier(0.2, 0.8, 0.2, 1);
            will-change: transform, top, left;
        }

        .card.no-transition {
            transition: none !important;
        }

        .card.back {
            background: #1e40af;
            background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'), 
                               linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
            border: 2px solid white;
        }

        .card.red { color: #e11d48; }
        .card.black { color: #1f2937; }
        
        /* 카드 내부 텍스트 스타일 강화 */
        .card-value {
            font-size: 24px;
            font-weight: 900;
            line-height: 1;
        }
        .card-suit-small {
            font-size: calc(var(--card-font-size) * 0.9);
            line-height: 1;
        }
        .card-suit-main {
            font-size: 24px;
        }

        .dragging-ghost {
            position: fixed !important;
            pointer-events: none;
            z-index: 9999 !important;
            opacity: 0.9;
            transform: scale(1.1) !important;
            box-shadow: 0 15px 30px rgba(0,0,0,0.5);
            transition: none !important;
        }

        .tableau-stack {
            position: relative;
            width: var(--card-width);
            min-height: var(--card-height);
        }

        .foundation-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.4rem;
            opacity: 0.1;
            color: white;
            pointer-events: none;
        }

        .header-ui {
            flex-shrink: 0;
            margin-bottom: 15px;
        }