/* ===========================================================
   Lakkireddy Labs — games hub
   Small additions on top of css/home.css (loaded first).
   Warm site theme; individual games keep their own look.
=========================================================== */

/* Hero sits a little tighter than the home hero. */
.games-hero { padding: 80px 0 8px; }
.games-hero h1 { max-width: 18ch; }

/* Card art tile — a small motif standing in for an app icon. */
.game-icon {
  width: 60px; height: 60px; border-radius: 23%; flex: none;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
}
.game-icon--dots {
  background: #0d0d0f;
  place-items: stretch;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px; padding: 13px;
}
.game-icon--dots i {
  display: block; border-radius: 50%;
  background: #5FE3A1; opacity: .9;
}
.game-icon--dots i:nth-child(2),
.game-icon--dots i:nth-child(6),
.game-icon--dots i:nth-child(8) { background: #F5C84B; }
.game-icon--dots i:nth-child(4),
.game-icon--dots i:nth-child(9) { background: #FF6B6B; }
.game-icon--dots i:nth-child(5) { background: #B794F6; }

.game-icon--chess {
  position: relative; overflow: hidden;
  background:
    conic-gradient(from 0deg, #33333b 0 25%, #23232a 0 50%, #33333b 0 75%, #23232a 0 100%);
}
.game-icon--chess span {
  font-size: 34px; line-height: 1; color: var(--card);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

.game-icon--g2048 {
  background: #15151a;
  place-items: stretch;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 5px; padding: 11px;
}
.game-icon--g2048 i {
  display: grid; place-items: center; border-radius: 5px;
  font: 800 11px/1 var(--mono); color: #241606;
}
.game-icon--g2048 i:nth-child(1){ background:#3b3b46; color:#cfcfe0; }
.game-icon--g2048 i:nth-child(2){ background:#cf5f17; color:#fff; }
.game-icon--g2048 i:nth-child(3){ background:#eaa72d; }
.game-icon--g2048 i:nth-child(4){ background:#ffd84a; }

.game-icon--reversi {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: #1f7d54;
}
.game-icon--reversi i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.game-icon--reversi i:nth-child(1){ background: radial-gradient(circle at 38% 32%, #2c2c34, #0c0c10 70%); box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.game-icon--reversi i:nth-child(2){ background: radial-gradient(circle at 38% 32%, #ffffff, #d8d2c4 75%); box-shadow: 0 1px 2px rgba(0,0,0,.35); }

.game-icon--mine, .game-icon--snake {
  background: #15151a; place-items: stretch;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px; padding: 10px;
}
.game-icon--mine i { border-radius: 3px; background: rgba(255,255,255,.10); }
.game-icon--mine i:nth-child(5){ background: #FF6B6B; box-shadow: 0 0 6px rgba(255,107,107,.6); }

.game-icon--snake i { border-radius: 3px; background: transparent; }
.game-icon--snake i:nth-child(1),
.game-icon--snake i:nth-child(2),
.game-icon--snake i:nth-child(5),
.game-icon--snake i:nth-child(8){ background: #8BE04E; }
.game-icon--snake i:nth-child(9){ background: #FF6B6B; }

/* Subtle "tap to play" affordance reusing product styles. */
.product .play-meta { color: var(--ink-2); font-size: 13.5px; font-family: var(--mono); letter-spacing: .04em; }