/*
  Home page — "Toy Shelf" concept.
  A bright, daytime browsing space, distinct from the darker
  "Spotlight Stage" feel used once you're inside an activity.
*/

body { background: var(--t2t-cream); }

.hero {
  text-align: center;
  padding: var(--t2t-space-5) var(--t2t-space-3) var(--t2t-space-4);
}

.hero__kicker {
  display: flex;
  justify-content: center;
  margin-bottom: var(--t2t-space-2);
}

.hero__kicker img {
  width: clamp(140px, 18vw, 180px);
  height: auto;
}

.hero__title {
  font-size: clamp(2.6rem, 8vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
}

.hero__title-word--a { color: var(--t2t-violet); }
.hero__title-word--b { color: var(--t2t-coral); }
.hero__title-x {
  display: inline-block;
  color: var(--t2t-ink);
  margin: 0 0.06em;
  transform: rotate(-6deg);
}

.hero__tagline {
  margin-top: var(--t2t-space-2);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--t2t-ink-soft);
}

.library {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--t2t-space-3) var(--t2t-space-5);
}

.library__heading {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: var(--t2t-space-3);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--t2t-space-3);
}

.app-card {
  background: var(--t2t-cream-panel);
  border: var(--t2t-border);
  border-radius: var(--t2t-radius-lg);
  box-shadow: var(--t2t-shadow-pop);
  padding: var(--t2t-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--t2t-space-2);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.app-card--active:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 rgba(36, 22, 64, 0.16);
}

.app-card--locked {
  opacity: 0.85;
}

.app-card__thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--t2t-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--t2t-cream);
}

.app-card__thumb svg { width: 68px; height: 68px; }

.app-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.app-card__title {
  font-size: 1.25rem;
  font-weight: 800;
}

.app-card__desc {
  color: var(--t2t-ink-soft);
  font-size: 1rem;
  font-weight: 600;
}

.app-card__badge {
  background: var(--t2t-cream);
  border: 2px solid #D9D2C4;
  color: var(--t2t-ink-soft);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 999px;
}

.app-card__play {
  margin-top: 4px;
  align-self: stretch;
  text-align: center;
}

.site-footer {
  text-align: center;
  padding: var(--t2t-space-3);
  color: var(--t2t-ink-soft);
  font-size: 0.9rem;
}