:root { --cw: #ffffff; }
body {
    font-family: 'Montserrat', sans-serif;
    background-color: #1a1a2e;
    color: #eee;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

#header-placeholder, #footer-placeholder {
    width: 100%;
}

/* Herní lišta */
.game-info-bar {
    width: 100%;
    background-color: #0f0e1c;
    padding: 20px 0;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #333;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-title { 
    color: #00e0ff; 
    text-shadow: 0 0 15px rgba(0, 224, 255, 0.6); 
    margin: 0; 
}

.main-content { flex: 1; display: flex; width: 100%; position: relative; overflow: hidden; }
#game-board { position: relative; flex-grow: 1; height: 100%; min-width: 900px; background-color: #1a1a2e; }
#game-report { width: 340px; background: #0f0e1c; border-left: 1px solid #333; padding: 15px; display: flex; flex-direction: column; z-index: 100; }
#log-list { flex-grow: 1; overflow-y: auto; font-family: 'Consolas', monospace; font-size: 0.85rem; }

.log-entry { margin-bottom: 4px; padding: 4px; border-left: 3px solid #555; background: #111; }
.log-entry { margin-bottom: 4px; padding: 4px; border-left: 3px solid #555; background: #161625; color: #ccc; }
.log-error { border-color: #ff4757; color: #ff7675; }
.log-success { border-color: #2ed573; color: #55efc4; }

.slot { width: 110px; height: 160px; border: 2px dashed rgba(255,255,255,0.2); border-radius: 10px; position: absolute; }
.slot { width: 110px; height: 160px; border: 2px dashed #333; border-radius: 10px; position: absolute; }
.top-row { top: 40px; }

/* Pozice slotů */
#stock-slot { left: 40px; }
#waste-slot { left: 170px; }
.foundation-slot[data-idx="0"] { left: 420px; }
.foundation-slot[data-idx="1"] { left: 550px; }
.foundation-slot[data-idx="2"] { left: 680px; }
.foundation-slot[data-idx="3"] { left: 810px; }

.card { 
    width: 110px; height: 160px; background: var(--cw); border-radius: 10px; 
    border: 1px solid #ccc; color: black; display: flex; flex-direction: column; 
    align-items: center; justify-content: space-between; padding: 10px; 
    box-sizing: border-box; font-size: 1.3rem; font-weight: bold; 
    position: absolute; cursor: grab; user-select: none; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.4); 
}

.card.back { 
    background: linear-gradient(135deg, #2980b9 25%, #3498db 50%, #2980b9 75%); 
    background-size: 15px 15px; color: transparent !important; 
    background: linear-gradient(135deg, #00e0ff 25%, #0099ff 50%, #00e0ff 75%); 
    background-size: 15px 15px; color: transparent !important;
    border-color: #00e0ff;
    box-shadow: 0 0 10px rgba(0, 224, 255, 0.3);
}

.card.red { color: #e74c3c; }
.card.black { color: #2c3e50; }

button {
    padding: 10px 18px;
    background-color: transparent;
    color: #00e0ff;
    border: 2px solid #00e0ff;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
    font-family: 'Montserrat', sans-serif;
}

button:hover { background-color: #00e0ff; color: #0f0e1c; box-shadow: 0 0 15px rgba(0, 224, 255, 0.4); }