/* =====================================================================
   triplememory.css
   Responsive layout + card styling for Triplet Memory
   Levels: 2x3, 3x3, 4x3, 5x3, 6x3, 7x3, 6x4, 6x5, 6x6, 7x6
===================================================================== */

/* -------- Reset and global vars -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-page-bg, #f7fafc);
  color: var(--color-page-text, #111);
  overflow: hidden;
}

:root {
  --grid-cols: 8;
  --grid-rows: 8;
  --color-cell-radius: 10px;
  --color-cell-hover-bg: #3b82f6;
  --color-grid-area-bg: #f1f5f9;
  --card-back-bg: #fff;
  --card-back-border: #94a3b8;
}

/* -------- Page layout -------- */
.page {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.grid-wrapper {
  height: 100%;
  padding: 8px 4px;
  background: var(--color-grid-area-bg);
  box-sizing: border-box;
  overflow: hidden;
}

/* -------- Grid container -------- */
.grid-8x8 {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  row-gap: 10px;
  column-gap: 10px;
}

.cell {
  display: grid;
  place-items: stretch;
}

/* -------- Card styling -------- */
.card {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.card-inner {
  width: 100%;
  height: 100%;
  border-radius: var(--color-cell-radius);
  position: relative;
  overflow: hidden;
}

.card-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform 0.4s;
}

/* back face */
.card-back {
  background-color: var(--card-back-bg);
  background-image: url("/images/card-backs/256/backside_1.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
  border-radius: var(--color-cell-radius);
  border: 1px solid var(--card-back-border);
  transform: rotateY(0deg);
}

/* front face */
.card-front {
  background: #fff;
  border-radius: var(--color-cell-radius);
  transform: rotateY(180deg);
}

.card-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px !important; /* NEW: small padding */
}

/* flipped states */
.card.is-revealed .card-back { transform: rotateY(180deg); }
.card.is-revealed .card-front { transform: rotateY(0deg); }

/* matched */
.card.matched .card-inner { cursor: default; }
.card.matched .card-front {
  background: #fff;
  border: 2px solid var(--color-cell-hover-bg);
}
.card.matched .card-back {
  border-color: var(--color-cell-hover-bg);
}

/* hover */
.card:not(.matched):not(.is-revealed):hover .card-inner {
  box-shadow: 0 0 0 1px rgba(59,130,246,0.10);
}

/* =====================================================================
   RESPONSIVE GRID ADJUSTMENTS
   body[data-grid="COLSxROWS"]
===================================================================== */

/* -------- Mobile first (<=767px) -------- */
@media (max-width: 767px) {

  body[data-grid="3x2"] .grid-8x8 { row-gap: 12px; column-gap: 12px; padding-top: 40%; padding-bottom: 40%; }
  body[data-grid="3x3"] .grid-8x8 { row-gap: 10px; column-gap: 10px; padding-top: 15%; padding-bottom: 15%; }
  body[data-grid="3x4"] .grid-8x8 { row-gap: 5px; column-gap: 5px; padding-top: 10%; padding-bottom: 10%; }
  body[data-grid="3x5"] .grid-8x8 { row-gap: 5px; column-gap: 10px; padding:  0 5%; }
  body[data-grid="3x6"] .grid-8x8 { row-gap: 5px; column-gap: 5px; padding:  0 15%; }
  body[data-grid="3x7"] .grid-8x8 { row-gap: 3px; column-gap: 5px; padding:  0 20%; }
  body[data-grid="4x6"] .grid-8x8 { row-gap: 5px; column-gap: 5px; padding: 0 5%; }
  body[data-grid="5x6"] .grid-8x8 { row-gap: 5px; column-gap: 5px; padding: 0; }
  body[data-grid="6x6"] .grid-8x8 { row-gap: 3px; column-gap: 3px; padding: 10% 0; }
  body[data-grid="6x7"] .grid-8x8 { row-gap: 3px; column-gap: 3px; padding: 0; }
}

/* -------- Tablet (768px–1199px) -------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .grid-wrapper {
    padding-left: 10%;
    padding-right: 10%;
  }
}

/* -------- Desktop (>=1200px) -------- */
@media (min-width: 1200px) {
/*  .grid-wrapper {
    padding-left: 20%;
    padding-right: 20%;
  }
*/
  body[data-grid="2x3"] .grid-8x8 { row-gap: 20px; column-gap: 20px; padding-left: 37%; padding-right: 37%;}
  body[data-grid="3x3"] .grid-8x8 { row-gap: 20px; column-gap: 20px; padding-left: 30%; padding-right: 30%;}
  body[data-grid="4x3"] .grid-8x8 { row-gap: 20px; column-gap: 20px; padding-left: 25%; padding-right: 25%;}
 
  body[data-grid="5x3"] .grid-8x8 { row-gap: 10px; column-gap: 10px; padding-left: 20%; padding-right: 20%;}
  body[data-grid="6x3"] .grid-8x8 { row-gap: 10px; column-gap: 10px; padding-left: 15%; padding-right: 15%;}
  body[data-grid="7x3"] .grid-8x8 { row-gap: 10px; column-gap: 10px; padding-left: 10%; padding-right: 10%;}
  
  body[data-grid="6x4"] .grid-8x8 { row-gap: 8px; column-gap: 8px; padding-left: 20%; padding-right: 20%;}
  body[data-grid="6x5"] .grid-8x8 { row-gap: 8px; column-gap: 8px; padding-left: 27%; padding-right: 27%;}
  body[data-grid="6x6"] .grid-8x8 { row-gap:  5px; column-gap:  5px; padding-left: 30%; padding-right: 30%;}
 
  body[data-grid="7x6"] .grid-8x8 { row-gap:  5px; column-gap:  5px; padding-left: 27%; padding-right: 27%;}
}

/* =====================================================================
   Modals (stats + code) — unchanged from previous
===================================================================== */

.stats-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  z-index: 9999;
}
.stats-modal.open { display: flex; }

.stats-modal-content {
  background: #fff;
  color: #111;
  padding: 24px 28px;
  border-radius: 10px;
  width: 90%;
  max-width: 360px;
  text-align: center;
  box-shadow: 0 4px 28px rgba(0,0,0,0.4);
}

.stats-list {
  text-align: left;
  margin: 16px 0 22px 0;
  font-size: 1rem;
  line-height: 1.6;
}

.stats-buttons {
  display: grid;
  gap: 10px;
}

.stats-btn {
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.stats-btn.finish       { background: #444;   color: #fff; }
.stats-btn.new-game     { background: #3b82f6; color: #fff; }
.stats-btn.change-level { background: #e67e22; color: #fff; }
.stats-btn.save-results { background: #16a34a; color: #fff; }

.stats-message {
  margin-top: 10px;
  font-size: 0.9rem;
}

/* code modal */
.code-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  z-index: 10000;
}
.code-modal.open { display: flex; }

.code-modal-content {
  background: #fff;
  color: #111827;
  padding: 22px 24px;
  border-radius: 10px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.4);
}