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

:root {
  /* ── Color ── */
  --bg-top: #fff4d6;
  --bg-bottom: #ffe0ec;
  --panel: #ffffff;
  --text: #362f4f;
  --sub: #7a7096;
  --accent: #ffb703;

  /* ── Type scale (Fredoka = display/headings, Quicksand = body/labels) ── */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;

  /* ── Spacing scale (4px base) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ── Elevation (three-tier shadow system, not one flat drop-shadow) ── */
  --shadow-sm: 0 1px 2px rgba(54,47,79,.06), 0 1px 1px rgba(54,47,79,.08);
  --shadow-md: 0 4px 10px rgba(54,47,79,.08), 0 2px 4px rgba(54,47,79,.06);
  --shadow-lg: 0 12px 28px rgba(54,47,79,.14), 0 4px 10px rgba(54,47,79,.08);

  --radius-md: 20px;
  --radius-lg: 28px;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: linear-gradient(160deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

#app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-7) var(--sp-4) var(--sp-8);
}

/* ── Soft floating background decoration ── */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.decor { position: absolute; opacity: .5; filter: saturate(.7); }
.decor-star { font-size: 22px; animation: twinkle 3.2s ease-in-out infinite; }
.decor-cloud { font-size: 46px; opacity: .35; animation: drift 22s linear infinite; }
.decor-1 { top: 8%; left: 8%; animation-delay: 0s; }
.decor-2 { top: 14%; right: 12%; animation-delay: 1.2s; }
.decor-3 { top: 4%; left: 60%; animation-delay: 0s; }
.decor-4 { bottom: 18%; left: 6%; animation-delay: 2s; }
.decor-5 { bottom: 10%; right: 8%; animation-delay: 6s; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(1); }
  50% { opacity: .6; transform: scale(1.15); }
}
@keyframes drift {
  0% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(-10px); }
}

/* ── Header ── */
.hub-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: var(--sp-7);
  animation: settle-in .5s cubic-bezier(.2,.8,.3,1.1) both;
}
.hub-badge {
  width: 84px; height: 84px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe9b0 70%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  /* Idle animation now comes from animate.css (animate__bounce, applied in
     index.html) instead of a hand-written keyframe -- see DESIGN-PATTERNS.md
     "use what you can find" note. */
}
.hub-logo { font-size: 42px; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-6px) rotate(4deg); }
}
h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.hub-subtitle {
  margin: var(--sp-2) 0 0;
  font-size: 16px;
  color: var(--sub);
  font-weight: 600;
}

/* Read-aloud button: static/inline (never position:fixed) so it can't ever
   drift over a tile -- see index.html comment for why. */
.read-page-btn {
  margin: var(--sp-4) auto 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe29a, #ffb347);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s;
}
.read-page-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.read-page-btn:active { transform: scale(.96); }
.read-page-icon { font-size: 17px; }
.read-page-btn.reading { animation: read-page-pulse 1s ease-in-out infinite; }
@keyframes read-page-pulse {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(255,179,71,.5); }
  50% { box-shadow: var(--shadow-sm), 0 0 0 8px rgba(255,179,71,0); }
}

/* ── Tile grid ── */
.tile-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  width: 100%;
  max-width: 640px;
}
@media (min-width: 560px) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-2) var(--sp-5);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-md);
  transition: transform .18s cubic-bezier(.2,.8,.3,1.4), box-shadow .18s ease;
  min-height: 148px;
  opacity: 0;
  animation: tile-in .45s cubic-bezier(.2,.8,.3,1.1) forwards;
}
.tile-grid .tile:nth-child(1) { animation-delay: .05s; }
.tile-grid .tile:nth-child(2) { animation-delay: .1s; }
.tile-grid .tile:nth-child(3) { animation-delay: .15s; }
.tile-grid .tile:nth-child(4) { animation-delay: .2s; }
.tile-grid .tile:nth-child(5) { animation-delay: .25s; }
.tile-grid .tile:nth-child(6) { animation-delay: .3s; }
@keyframes tile-in {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes settle-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tile-live { cursor: pointer; }
.tile-live:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-lg); }
.tile-live:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }

.tile-art {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--tile-tint, #f0f0f0);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.05);
}
.tile-emoji { font-size: 38px; }
.tile-live:hover .tile-emoji { animation: wiggle .5s ease; }
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg) scale(1.05); }
  75% { transform: rotate(8deg) scale(1.05); }
}

.tile-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--tile-color, var(--text));
}

.hub-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-7);
  text-align: center;
}
.hub-footer p {
  font-size: 13px;
  color: var(--sub);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .decor-star, .decor-cloud, .hub-badge, .tile, .read-page-btn.reading { animation: none !important; opacity: 1; }
}

@media (max-width: 400px) {
  .tile-grid { gap: var(--sp-3); }
  .tile { min-height: 128px; padding: var(--sp-5) var(--sp-1) var(--sp-4); }
  .tile-art { width: 64px; height: 64px; }
  .tile-emoji { font-size: 32px; }
}
@media (max-width: 340px) {
  h1 { font-size: 27px; }
  .hub-badge { width: 68px; height: 68px; }
  .hub-logo { font-size: 34px; }
}