* {
    box-sizing: border-box; 
}

html {
    font-family: system-ui, -apple-system, 
        "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", 
        "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", 
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;                 
}

.nav {
    position: sticky;
    top: 0;
    background-color: #111D2D;
    height: 6rem; 
    z-index: 10;
}

.game-container {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin: 0 auto;
    height: calc(100vh - 6rem); 
    display: flex;
    flex-direction: column;
}

.game-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;                 /* remove all outer margin */
  padding: 0.4rem 0 0.3rem; /* tiny controlled spacing */
  text-align: center;
  gap: 0.15rem;              /* almost no gap between title and Clicks/Misses */
}

.game-header h1,
.game-header h2,
.game-header p,
.header-info {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

.header-info{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.cards-container {
     display: grid;
    grid-template-columns: repeat(6, max-content);
    grid-template-rows: repeat(4, 1fr); 
    
    justify-content: center; 
    
    gap: 12px; 
    
    padding: 16px;
    width: 100%;
    flex-grow: 1;
    height: 0; 
}

.card-container {
    width: 100%;
    height: 100%;
    max-height: calc((100vh - 12rem) / 4); 
  
    aspect-ratio: 1 / 1.5; 
    position: relative;
    perspective: 900px; 
    
    margin: 0 auto; 
}

.card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d; 
    transition: all 0.6s ease; 
}

@media (min-width: 461px) {
    .card-container {
        height: 100%;
        width: calc((100vh - 6rem - 32px - 36px) / 4 / 1.5); 
        aspect-ratio: 1 / 1.5; 
    }
}

.card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.card-reveal {
    transform: rotateY(180deg);
}

.card-front{
    overflow: hidden; 
}

.card-front,
.card-back {
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    backface-visibility: hidden;
}
.card-image {
    width: 100%;
  height: 100%;
  
}

.card-back {
    background-image: url('../public/assets/images/CardRear.webp');
    background-size: cover;
}

.card-front {
    transform: rotateY(180deg);
    background-size: cover;
}

.card-blank
{
   opacity: 0;
   transition: opacity 0.5s ease-in-out;
}

.button{
    display: inline-block;
    background-color: #e2360f;
    text-decoration: none;
    color: white;
    padding:0rem 0.5rem; /* Top 0.5 - Right 1  - Bottom 0.5 - Left 1 */
    line-height: 2rem;
    border-radius: 0.5rem;
    border: 0;
    /*text-transform: uppercase;*/
}

 .button a {
        color: #fff;
    }

.button:hover {
    background-color: #b92504;
}

.button__icon{
    pointer-events: none;
    width: 1.5rem;
    height:1.5rem;
    position: relative;
    top:0.4rem;
    margin-right:0.4rem;
}

.button__icon_download {
    fill:#F3F4F5;
    stroke: #f3f4f5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}