:root {
--bg-color: #2D5A27;
--card-back: #1e3a8a;
/* Tamanho base para telas grandes */
--card-width: 95px;
--card-height: 140px;
--card-gap: 15px;
}

/* Ajustes para telas menores (Tablets e Laptops pequenos) */
@media (max-width: 1100px) {
:root {
--card-width: 8.5vw;
--card-height: 12.5vw;
--card-gap: 1vw;
}
}

/* Ajustes para Celulares */
@media (max-width: 600px) {
:root {
--card-width: 9vw;
--card-height: 13vw;
--card-gap: 0.5vw;
}
#status-bar {
height: auto;
flex-direction: column;
padding: 10px;
gap: 10px;
}
.stats {
font-size: 1em;
gap: 15px;
}
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-color);
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-x: hidden;
color: white;
user-select: none;
}

#status-bar {
background: rgba(0,0,0,0.95);
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
z-index: 100;
position: sticky;
top: 0;
box-shadow: 0 2px 15px rgba(0,0,0,0.7);
height: 60px;
}

.controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}

.btn {
background: #eee;
color: #333;
border: none;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
font-size: 0.85em;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}

.btn:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

#game-board {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: var(--card-gap);
padding: 15px;
max-width: 1400px;
margin: 0 auto;
flex-grow: 1; /* Garante que o tabuleiro ocupe o espaço disponível */
}

/* Nova área inferior para evitar sobreposição */
.bottom-bar {
position: sticky;
bottom: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0.95));
width: 100%;
padding: 15px 30px;
display: flex;
justify-content: space-between;
align-items: flex-end;
pointer-events: none;
z-index: 200;
box-sizing: border-box;
}

/* Reativa cliques para os elementos filhos */
.bottom-bar > * {
pointer-events: auto;
}

.column {
position: relative;
min-height: 75vh;
width: var(--card-width);
}

.card {
width: var(--card-width);
height: var(--card-height);
background: white;
border-radius: 5px;
position: absolute;
color: black;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
padding: 4px 5px;
box-sizing: border-box;
cursor: pointer;
border: 1px solid #777;
font-weight: 900;
font-size: clamp(0.8em, 2vw, 1.4em);
gap: 2px;
}

.card .rank {
line-height: 1;
min-width: 0.7em;
}

.card .suit {
font-size: 0.85em;
line-height: 1.1;
}

.card.face-down, .foundation-card {
background-color: var(--card-back) !important;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.05) 5px, rgba(255,255,255,.05) 10px) !important;
color: transparent !important;
}

.card.red { color: #cc0000; }
.card.black { color: #000000; }

#foundations {
display: flex;
gap: 5px;
}

.foundation-pile {
width: calc(var(--card-width) * 0.4);
height: var(--card-height);
position: relative;
}

.foundation-card {
position: absolute;
width: var(--card-width);
height: var(--card-height);
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
bottom: 0; /* Alinha na base da barra */
}

#deck-container {
position: relative;
cursor: pointer;
}

#deck-pile {
width: var(--card-width);
height: var(--card-height);
background-color: var(--card-back);
border-radius: 5px;
border: 2px solid white;
}

#deck-count {
position: absolute;
top: -10px;
right: -10px;
background: #fa243c;
color: white;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.8em;
font-weight: bold;
border: 2px solid white;
}

.stats { display: flex; gap: 20px; font-size: 1.1em; align-items: center; }

#music-modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.85);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #111;
padding: 10px;
border-radius: 12px;
width: 95%;
max-width: 660px;
position: relative;
}

#message {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
color: black;
padding: 20px;
border-radius: 15px;
display: none;
text-align: center;
z-index: 3000;
width: 80%;
}