*, *::before, *::after { box-sizing: border-box; }

/* ---------- Theme Tokens ---------- */
:root{
  --pc-bg-2: #151922;
  --pc-card: #2b2d33;         /* Card base */
  --pc-fg: #f7f6f3;           /* Light text */
  --pc-gold: #c79a2e;         /* Primary gold */
  --pc-gold-2: #a37d23;       /* Deeper gold */
  --pc-gold-soft: #d9ac37;    /* Softer gold */
  --pc-muted: rgba(255,255,255,.08);
  --pc-shadow: 0 10px 30px rgba(0,0,0,.35);
  --pc-bg: url('../img/Background/valentinesBGs.png') no-repeat center center fixed;
  /* Sizing */
  --card-size: clamp(90px, 18vw, 160px);
  --card-radius: 16px;
  --grid-gap: clamp(8px, 2vw, 16px);

  /* Motion */
  --dur-fast: .18s;
  --dur-base: .4s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Page ---------- */
html, body { height: 100%; }
body{
  margin: 0;
  color: var(--pc-fg);
  background: url('../img/Background/valentinesBGs.png') no-repeat center center fixed;
  background-size: cover;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}


/* ---------- Grid ---------- */
.grid{
  max-width: min(1100px, 96vw);
  margin: min(4vh, 32px) auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-size), 1fr));
  gap: var(--grid-gap);
  align-items: center;
  justify-items: center;
  padding: clamp(8px, 2vw, 20px);
}

/* ---------- Cards ---------- */
.card{
  position: relative;
  width: var(--card-size);
  height: var(--card-size);
  perspective: 1200px; 
  transition: transform var(--dur-fast) var(--ease);
}
.card:focus-within,
.card:hover{
  transform: translateY(-2px);
}

/* The flipping inner element */
.card .front,
.card .back{
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  box-shadow: var(--pc-shadow);
  overflow: hidden;
}

/* Front side (question) */
.front{
  
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    var(--pc-card);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.05);
}


.front::after{
  content: "";
  width: 62%;
  height: 62%;
  background: url('../img/Backside-Memory/backside.png') no-repeat center / contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  opacity: .9;
}

/* Back side (image) */
.back{
  transform: rotateY(180deg);
  background:
    radial-gradient(140% 140% at 80% 0%, rgba(199,154,46,.16), rgba(199,154,46,0) 50%),
    var(--pc-card);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 78% 78%; 
  border: 1px solid rgba(199,154,46,.28);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    var(--pc-shadow);
}

/* Flip on selection */
.card.selected .front{ transform: rotateY(180deg); }
.card.selected .back{ transform: rotateY(0deg); }

/* Match state */
.card.match .front{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(217,172,55,.25), rgba(217,172,55,0) 50%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--pc-card) !important;
  border-color: rgba(217,172,55,.45);
  box-shadow:
    0 0 24px 6px rgba(217,172,55,.22),
    var(--pc-shadow);
}
.card.match .back{
  filter: saturate(1.06) contrast(1.02);
  box-shadow:
    0 0 26px 10px rgba(240,183,24,.18),
    0 0 0 1px rgba(255,255,255,.06) inset,
    var(--pc-shadow);
}
.card .front, .card .back { outline: none; }
.card:focus-within .front,
.card:focus-within .back{
  box-shadow:
    0 0 0 2px rgba(247,246,243,.85),
    0 0 0 6px rgba(199,154,46,.35),
    var(--pc-shadow);
}
@media (max-width: 420px){
  :root{
    --card-radius: 14px;
  }
  .grid{ gap: 10px; }
  .back{ background-size: 80% 80%; }
}

@media (hover:hover){
  .card:not(.selected):hover .front{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06) inset,
      0 12px 28px rgba(0,0,0,.45);
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#game {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Snowflakes */

.snowflake {
  position: fixed;
  top: -50px;
  z-index: 9999;
  user-select: none;
  pointer-events: none;
  color: #fff;
  font-family: Arial, sans-serif;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift)) rotate(360deg);
    opacity: 0.5;
  }
}