/* brisca.css */
#view-brisca {
    font-family: 'Inter', sans-serif;
}

/* El área de juego usa position:absolute con flex:1 en cadena (#brisca-game,
   #brisca-playing-area). La regla base ".view.active{display:block}" no le da
   altura real a esa cadena flex, así que sin esto la sala colapsa a 0px de
   alto y "overflow:hidden" deja todo invisible en escritorio (en móvil hay
   una regla aparte que sí fuerza flex+fullscreen, por eso ahí sí se ve algo). */
#view-brisca.active {
    display: flex;
    flex-direction: column;
}

.brisca-card {
    width: 80px;
    height: 120px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    user-select: none;
    border: 2px solid #ccc;
    background-size: cover;
    background-position: center;
}

.brisca-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.6);
}

.brisca-card.played {
    cursor: default;
    transform: none !important;
}

/* Palos: Oros, Copas, Espadas, Bastos */
.card-oros { color: #d97706; }
.card-copas { color: #dc2626; }
.card-espadas { color: #2563eb; }
.card-bastos { color: #16a34a; }

/* Dorso del mazo (#brisca-boneyard tiene class="brisca-card brisca-card-back";
   la posición/tamaño ya vienen del inline style, esto solo pone el patrón visual). */
.brisca-card-back {
    background: repeating-linear-gradient(45deg, #1e3a8a, #1e3a8a 10px, #1e40af 10px, #1e40af 20px);
    border: 2px solid white;
}

/* El posicionamiento real (left:0; width:100%; gap:10px) viene del estilo
   inline en index.php, que tiene más prioridad. Aquí solo lo que el inline
   no define. No usar left/transform aquí: si no coinciden exactamente con el
   inline, la mano queda desplazada fuera del panel (eso causaba el bug de
   "no veo mis cartas"). */
.brisca-hand {
    position: absolute;
    bottom: 20px;
}

.brisca-trick-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1024px) {
    .brisca-card {
        width: 60px;
        height: 90px;
        font-size: 1rem;
    }
    .brisca-trick-area {
        width: 200px;
        height: 200px;
    }
}