/* =======================================================
   Full‑bleed header & footer
======================================================= */
header, footer {
  position: relative;
  width: 100%;
  left: 0; right: 0;
  background: lightgray;
  color: orangered;
  box-sizing: border-box;
}

footer {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
}

header > .inner,
footer > .inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1rem;

  /* add these: */
  text-align: center;
  font-weight: bold;
}

html {
  position: relative;
  min-height: 100%; /* Prevent horizontal scroll */
}

main {
  margin-bottom: 60px;
}

/* =======================================================
   GLOBAL RESET & BASE
======================================================= */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { overflow-x:hidden; width:100%; height:100%; font-family:sans-serif; }
body {
  background: url('../images/background.jpg') center/cover no-repeat;
  color: orangered;
}
.visually-hidden { position:absolute; clip:rect(0 0 0 0); }

/* =======================================================
   GAME INFO
======================================================= */
.game-info {
  display:flex; flex-wrap:wrap;
  gap:1rem; align-items:center; justify-content:center;
}
.game-info p, .game-info label {
  font-size:2rem; font-weight:bold;
}
.game-info select, .game-info button {
  font-size:1.8rem; padding:.3rem .5rem;
}
.game-info button {
  background: orangered; border:none; border-radius:4px; cursor:pointer;
}
.game-info button:hover { background:#e1ab25; }
.hidden { display:none; }

/* =======================================================
   BOARD & CARDS
======================================================= */
.game-container {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
  gap:1rem; padding:1rem;
}
.card {
  background: orangered;
  border:2px solid #333;
  border-radius:4px;
  aspect-ratio: 1/1;
  position:relative;
  perspective:1000px;
  cursor:pointer;
}
.card-inner {
  width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s;
}
.card-front, .card-back {
  position:absolute; width:100%; height:100%;
  backface-visibility:hidden; border-radius:4px;
}
.card-front {
  background: url('../images/background-card.jpg') center/cover no-repeat;
}
.card-back {
  transform:rotateY(180deg);
  background-size:cover; background-position:center;
  border:2px solid #2b2f77;
}
.flipped .card-inner { transform:rotateY(180deg); }
.matched { opacity:.7; cursor:default; }

/* =======================================================
   MODAL
======================================================= */
.modal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
}
.modal.hidden { display:none; }
.modal-content {
  background:#fff; padding:2rem; border-radius:8px; text-align:center;
  color: orangered; max-width:90%; width:300px;
}
.modal-content button {
  margin-top:1rem; padding:.5rem 1rem; font-size:1.2rem;
  background: orangered; border:none; border-radius:4px; cursor:pointer;
}
.modal-content button:hover { background:#e1ab25; }

/* =======================================================
   MEDIA QUERIES
======================================================= */
@media (min-width:768px){
  .game-container { grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); }
}
@media (min-width:1200px){
  /* easy: 8 cards = 2×4; normal 12 & hard 24 = 2×6 / 4×6 */
  .game-container.easy-desktop  { grid-template-columns: repeat(4,1fr); }
  .game-container.normal-desktop,
  .game-container.hard-desktop  { grid-template-columns: repeat(6,1fr); }
}
/* Very large screens */
@media (min-width:1920px){
  .game-info p, .game-info label { font-size:3.5rem; }
}

/* constrain & center header/footer content */
.inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 1rem;           /* your existing padding */
  text-align: center;      /* center text */
  font-weight: bold;       /* bold footer text */
}

/* also constrain & center the board on wide screens */
.game-container {
  max-width: 1800px;
  margin: 0 auto;
}