:root {
            --bg-color: #f5f5f5;
            --controls-bg: #e0e0e0;
            --controls-border: #ccc;
            --text-color: #333;
            --btn-bg: white;
            --btn-border: #ccc;
            --btn-hover: #d0d0d0;
            --btn-active-bg: #4a90d9;
            --btn-active-border: #4a90d9;
            --status-bg: #e8f4e8;
            --status-color: #2a5a2a;
        }

        [data-theme="dark"] {
            --bg-color: #1a1a1a;
            --controls-bg: #2d2d2d;
            --controls-border: #444;
            --text-color: #eee;
            --btn-bg: #3a3a3a;
            --btn-border: #555;
            --btn-hover: #4a4a4a;
            --btn-active-bg: #4a90d9;
            --btn-active-border: #4a90d9;
            --status-bg: #1a3a1a;
            --status-color: #8f8;
        }

        html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-family: Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: background-color 0.3s, color 0.3s;
            overflow-x: hidden;
        }
        
        body {
            overflow-y: auto;
        }
        
        #body-inc {
            min-height: 100%;
        }
        
        img {
            display: none;
            max-width: calc(100vw - 40px);
            max-height: calc(100vh - 120px);
            height: auto;
            border-radius: 8px;
            box-shadow: 
                0 2px 4px rgba(0,0,0,0.2),
                0 8px 16px rgba(0,0,0,0.15),
                0 16px 32px rgba(0,0,0,0.1);
        }
        
        img.visible {
            display: block;
        }
        
        .imgbox {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 110px);
            padding: 10px;
            box-sizing: border-box;
        }
        
        .center-fit {
            max-width: 100%;
            max-height: calc(100vh - 120px);
            margin: auto;
            object-fit: contain;
        }
        
        .controls {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 10px;
            background: var(--controls-bg);
            border-bottom: 1px solid var(--controls-border);
            transition: background 0.3s, border-color 0.3s;
        }
        
        .back-btn {
            padding: 8px 12px;
            background: #666;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .back-btn:hover {
            background: #444;
        }
        
        .mode-toggle {
            display: flex;
            gap: 0;
        }
        
        .mode-btn, .shuffle-btn, .theme-btn {
            padding: 8px 12px;
            border: 1px solid var(--btn-border);
            background: var(--btn-bg);
            color: var(--text-color);
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s;
        }
        
        .mode-btn:first-child {
            border-radius: 4px 0 0 4px;
        }
        
        .mode-btn:last-child {
            border-radius: 0 4px 4px 0;
        }
        
        .mode-btn.active {
            background: var(--btn-active-bg);
            color: white;
            border-color: var(--btn-active-border);
        }
        
        .shuffle-btn, .theme-btn {
            border-radius: 4px;
        }
        
        .shuffle-btn:hover, .theme-btn:hover {
            background: var(--btn-hover);
        }
        
        .deck-status {
            text-align: center;
            padding: 8px;
            background: var(--status-bg);
            color: var(--status-color);
            font-weight: bold;
            display: none;
        }
        
        .deck-status.visible {
            display: block;
        }
        
        .card-placeholder {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-width: 280px;
            min-height: 380px;
            max-width: 90vw;
            max-height: 70vh;
            background: linear-gradient(145deg, #2a2a4a, #1a1a2e);
            border: 3px solid #4a90d9;
            border-radius: 15px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card-placeholder:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 30px rgba(74, 144, 217, 0.4);
        }
        
        [data-theme="light"] .card-placeholder {
            background: linear-gradient(145deg, #ffffff, #e8e8e8);
            border-color: #4a90d9;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        [data-theme="light"] .card-placeholder:hover {
            box-shadow: 0 10px 30px rgba(74, 144, 217, 0.3);
        }
        
        .placeholder-text {
            font-size: 24px;
            font-weight: bold;
            color: white;
            margin-bottom: 8px;
        }
        
        [data-theme="light"] .placeholder-text {
            color: #333;
        }
        
        .placeholder-subtext {
            font-size: 14px;
            color: #888;
        }

        @media (max-width: 600px) {
            #body-inc {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-height: 100vh;
                padding: 10px;
                box-sizing: border-box;
            }
            
            .imgbox {
                flex: 1;
                order: 1;
                min-height: auto;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            
            .controls {
                gap: 8px;
                padding: 10px;
                flex-wrap: wrap;
                justify-content: center;
                order: 2;
                width: 100%;
                box-sizing: border-box;
            }
            
            .deck-status {
                order: 0;
                width: 100%;
                padding: 8px;
            }
            
            .back-btn {
                padding: 10px 16px;
                font-size: 14px;
                width: auto;
                text-align: center;
                background: #666;
                flex: 1;
            }
            
            .back-btn:hover {
                background: #444;
            }
            
            .theme-btn {
                padding: 10px 16px;
                flex: 1;
            }
            
            .mode-toggle {
                width: 100%;
                justify-content: center;
            }
            
            .mode-btn {
                padding: 10px 16px;
                font-size: 14px;
                font-weight: bold;
                flex: 1;
            }
            
            .shuffle-btn {
                width: 100%;
                padding: 10px 16px;
                font-size: 14px;
            }
            
            .card-placeholder {
                min-width: calc(100vw - 40px);
                min-height: 60vh;
                max-width: calc(100vw - 40px);
            }
            
            .placeholder-text {
                font-size: 24px;
            }
            
            .placeholder-subtext {
                font-size: 14px;
            }
        }