/* cards.css */

.glass-card {
  /* translucent, blurred “frosted‐glass” */
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  padding: 1rem;
  margin: 1rem 0;
  /* drop-shadow + glow */
  box-shadow:
    0 4px 30px rgba(0,0,0,0.1),
    0 0 8px var(--glow);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* intensify on hover */
.glass-card:hover {
  transform: scale(1.02);
  box-shadow:
    0 6px 40px rgba(0,0,0,0.15),
    0 0 12px var(--glow);
}







.stationary-glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1rem;
  border: 1px solid var(--card-border);
  /* inset 2rem horizontally so it never touches the screen edge */
  margin: 1rem 2rem;
  padding: 1rem 2rem; /* you already had horizontal padding here */
  box-shadow:
    0 4px 30px rgba(0,0,0,0.1),
    0 0 8px var(--glow);
  /* no transition/hover rules */
}

/* 2) Push the <a class="btn"> down to the bottom */
.stationary-glass-card .btn {
  margin-top: auto;
  align-self: flex-end;   /* so it hugs the right edge */
}


/* ------------------------------------------------------------------
   IMAGE-CARD
   A glass-like container specifically for portrait circles or squares
------------------------------------------------------------------ */
/* cards.css */

/* ------------------------------------------------------------------
   IMAGE-GLASS-CARD
   A fixed-size frosted-glass container for portraits or thumbnails
------------------------------------------------------------------ */
.image-glass-card {
  width: 12rem;
  height: 12rem;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow:
    0 4px 30px rgba(0, 0, 0, 0.1),
    0 0 8px var(--glow);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.image-glass-card:hover {
  box-shadow:
    0 6px 40px rgba(0, 0, 0, 0.15),
    0 0 12px var(--glow);
}
.image-glass-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-left: auto;
}
/* make any <img> inside fit perfectly */
.image-glass-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop-to-fill */
  object-position: center; /* center the focal point */
  display: block;          /* remove inline-image whitespace */
}


/* static/css/cards.css */

/* HERO WRAPPER: two‐column layout, with mobile fallback */
/* HERO GRID: text on the left, image fixed on the right */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;            /* space between columns */
  margin-bottom: 3rem;  /* space below hero */
}

/* On very small screens, stack vertically */
@media (max-width: 640px) {
  .hero-grid {
    grid-template-columns: 1fr;  /* single column */
  }
}


/* ─────────────────────────────────────────────
   SNAKE GAME – ADDITIONAL STYLES
───────────────────────────────────────────── */

.snake-card {
  display: flex;
  flex-direction: column;
}

/* 2) On large screens (1024px+), switch to two columns */
@media (min-width: 1024px) {
  .snake-card {
    flex-direction: row;
  }
}

/* Ensure the two halves are exactly equal */
.snake-card .snake-controls,
.snake-card .snake-canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.snake-card:hover {
  transform: none !important;
  /* restore the original box-shadow so it doesn’t “pop” */
  box-shadow:
    0 4px 30px rgba(0,0,0,0.1),
    0 0 8px var(--glow) !important;
}

/* Left side padding */
.snake-controls {
  padding: 1rem;
  gap: 1rem;
}

/* Score box: full width, frosted inset + glow */
.snake-score-box {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  box-shadow: inset 0 0 8px var(--glow);
  font-size: 1.25rem;
  font-weight: 600;
}

/* Selector keeps its previous look, but full‐width */
.snake-selector {
  width: 100%;
}

/* Buttons: blue‐600 → blue‐700 on hover just like your other buttons */
.snake-button {
  padding: 0.75rem 1.5rem;
  background-color: #2563EB;    /* tailwind’s blue-600 */
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
  align-self: flex-start;
}
.snake-button:hover {
  background-color: #1D4ED8;    /* tailwind’s blue-700 */
  transform: scale(1.05);
  box-shadow:
    0 6px 40px rgba(0,0,0,0.15),
    0 0 12px var(--glow);
}

/* Right side: center & pad the canvas, give it its own glow */
.snake-canvas {
  padding: 1rem;
  justify-content: center;
  align-items: center;
}
.snake-canvas canvas {
  border: 1px solid var(--card-border);
  border-radius: 0.5rem;
  box-shadow: 0 0 12px var(--glow);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}


/* ─────────────────────────────────────────────
   DUO-GRID  (exactly two columns, stacks on small)
───────────────────────────────────────────── */
.duo-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}

/* At ≤640 px viewport, fall back to one column */
@media (max-width: 640px) {
  .duo-grid {
    grid-template-columns: 1fr;
  }
}


.glass-select {
  /* existing rules… */
  /* add a custom down-arrow */
  background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5'><path fill='currentColor' d='M0 0l4 5 4-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem; /* make room for the arrow */
}