/* Responzivní grid pomocí flex-wrap/minmax by mohl rozbít čtverce, 
   proto držíme fixní sloupce a zmenšujeme velikost fontu/paddingů */
/* Hrací plocha */
.board {
    display: grid;
    gap: 10px;
    width: 100%;
    /* 
       Tento řádek je kouzlo! Zajistí, že hrací plocha nikdy nebude 
       širší než 70 % výšky monitoru. Díky tomu se 5 řádků vždy bezpečně 
       vejde na obrazovku i s nadpisem a skóre. 
    */
    max-width: 75vh; 
    margin: 0 auto;
}

/* Rozložení mřížky pro 25 karet (5 sloupců) */
.grid-25 {
    grid-template-columns: repeat(5, 1fr);
}

/* Rozložení mřížky pro 35 karet (7 sloupců - noční směna) */
.grid-35 {
    /* Aby výška 5 řádků zůstala 75vh, šířka pro 7 sloupců musí být 105vh */
    max-width: 105vh; 
    grid-template-columns: repeat(7, 1fr);
}

@media (max-width: 768px) {
    .board { gap: 8px; }
    .card-front { font-size: 11px; padding: 4px; }
}

.active-player {
    border: 2px solid #2563eb;
    background-color: #eff6ff;
}

/* Samotná kartička */
.pexeso-card {
    /* 
       Vyhodíme pevně danou šířku/výšku v pixelech.
       Díky aspect-ratio: 1 / 1 bude karta VŽDY dokonalý čtverec,
       bez ohledu na to, jak moc ji monitor zmenší.
    */
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; 
    position: relative;
    cursor: pointer;
    perspective: 1000px;
}

/* Přístupnost: Viditelný focus při procházení klávesnicí */
.pexeso-card:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 4px;
}

/* Zabrání "dvojkliku" na už otočenou kartu na úrovni prohlížeče */
.pexeso-card.flipped {
    pointer-events: none;
}

.card-inner {
    width: 100%; height: 100%;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.pexeso-card.flipped .card-inner { transform: rotateY(180deg); }

.card-face {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    padding: 10px; text-align: center; font-weight: bold;
}

.card-back { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #64748b; border: 2px solid #334155; }
.card-front { background: #ffffff; border: 2px solid #e2e8f0; color: #0f172a; transform: rotateY(180deg); }