/* ==========================================================================
   Home.css — game launcher
   ========================================================================== */

.HomePage { background: var(--Page); }

.Home {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding: clamp(20px, 4vh, 40px) clamp(16px, 4vw, 40px) 48px;
}
.HomeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.HomeIntro { margin: clamp(28px, 6vh, 56px) 0 clamp(20px, 4vh, 32px); }
.HomeIntro h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.HomeIntro p {
  margin: 10px 0 0;
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--Muted);
}

.GameCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.GameCard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e2ece7;
  border-radius: 24px;
  background: var(--White);
  color: var(--Ink);
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform .2s var(--EaseOut), box-shadow .2s ease, border-color .2s ease;
}
.GameCard:hover {
  transform: translateY(-4px);
  border-color: var(--Mint);
  box-shadow: 0 18px 40px rgba(44, 142, 106, 0.16);
}
.GameCard:focus-visible { outline: 3px solid var(--MintInk); outline-offset: 3px; }

.GameCardArt {
  height: 190px;
  display: grid;
  place-items: center;
}
.GameCardArtQuiz {
  background:
    radial-gradient(circle at 50% 55%, #ffffff 0%, transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 55%, rgba(74, 175, 137, 0.1) 0 6deg, transparent 6deg 18deg),
    #e6f5ee;
}
.MiniLozenge {
  --N: 22px;
  display: grid;
  place-items: center;
  width: 230px;
  height: 58px;
  padding: 2px;
  clip-path: polygon(var(--N) 0, calc(100% - var(--N)) 0, 100% 50%, calc(100% - var(--N)) 100%, var(--N) 100%, 0 50%);
  background: linear-gradient(180deg, #c3eadb, var(--MintDark) 50%, #c3eadb);
  filter: drop-shadow(0 8px 14px rgba(30, 70, 55, 0.14));
  transition: transform .3s var(--EaseOut);
}
.MiniLozengeText {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  clip-path: polygon(calc(var(--N) - 1px) 0, calc(100% - var(--N) + 1px) 0, 100% 50%, calc(100% - var(--N) + 1px) 100%, calc(var(--N) - 1px) 100%, 0 50%);
  background: linear-gradient(180deg, #ffffff, #f8fcfa 48%, #eef8f3 52%, #ffffff);
  color: var(--MintDeep);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.GameCard:hover .MiniLozenge { transform: scale(1.06); }

.GameCardArtGrid {
  grid-template-columns: repeat(3, 44px);
  grid-auto-rows: 44px;
  gap: 5px;
  place-content: center;
  place-items: stretch;
  background: #eef8f4;
}
.GameCardArtGrid span {
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--Mint);
  color: var(--White);
  font-size: 20px;
  font-weight: 800;
}
.GameCardArtGrid span:nth-child(-n+3) { background: var(--MintDark); }

.GameCardBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
}
.GameCardTag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--RadiusPill);
  background: var(--MintWash);
  color: var(--MintDeep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.GameCardTitle {
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -0.02em;
}
.GameCardText {
  font-size: 14.5px;
  line-height: 1.5;
  color: #6b7873;
}
.GameCardCta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--MintInk);
}