/* Hub page */
body.hub { background: #bfe6ff; overflow-x: hidden; }
#hub-bg { position: fixed; inset: 0; z-index: 0; }
#hub-bg canvas { display: block; width: 100%; height: 100%; }
.hub main, .hub-top { position: relative; z-index: 1; }

.hub-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(16px + var(--safe-top)) clamp(16px, 4vw, 48px) 0;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: .01em;
}
.logo-mark {
  width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; color: #fff; font-size: 24px;
  background: radial-gradient(circle at 30% 25%, #ffd76a, #ff8a3d 55%, #ff5d8f);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 6px 14px -4px rgba(255,93,143,.6);
}
.hub-actions { display: flex; gap: 10px; }

.hero {
  min-height: min(78vh, 760px); display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(20px, 6vw, 90px); max-width: 780px;
}
.hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: .005em;
  font-size: clamp(52px, 9vw, 112px); line-height: .95; color: var(--ink);
  text-shadow: 0 4px 0 rgba(255,255,255,.7);
}
.hero h1 span { color: #ff4f86; }
.hero p { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--ink-soft); max-width: 30em; margin: 18px 0 28px; font-weight: 700; }
.cta {
  align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; text-decoration: none;
  height: 68px; padding: 0 34px; border-radius: 999px; color: #fff;
  font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(180deg, #ff7aa4, #ff4f86);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.14), inset 0 4px 8px rgba(255,255,255,.4), 0 16px 30px -10px rgba(255,79,134,.7);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.cta:hover { transform: translateY(-3px) scale(1.04); }

.world { padding: 28px clamp(16px, 4vw, 48px) 10px; max-width: 1360px; margin: 0 auto; }
.world-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.world-emo {
  width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; font-size: 40px; flex: none;
  background: rgba(255,255,255,.8); box-shadow: var(--shadow-toy);
}
.world h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .01em; }
.world-head p { margin: 2px 0 0; font-size: 18px; color: var(--ink-soft); font-weight: 700; }

.tiles { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tiles-hero { grid-template-columns: 1fr; }
.tile {
  position: relative; display: block; text-decoration: none; color: var(--ink);
  border-radius: 30px; overflow: hidden; background: #fff;
  box-shadow: 0 8px 0 rgba(43,33,80,.1), 0 24px 50px -18px rgba(43,33,80,.45);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0));
  transition: transform .35s cubic-bezier(.2,1.2,.3,1), box-shadow .3s;
  will-change: transform;
}
.tile:hover { --ty: -6px; box-shadow: 0 12px 0 rgba(43,33,80,.1), 0 34px 60px -18px rgba(43,33,80,.55); }
.tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.tile:hover img { transform: scale(1.06); }
.tile-xl img { aspect-ratio: 21 / 9; }
.tile-body {
  position: relative; padding: 16px 20px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, #fff), #fff 70%);
}
.tile h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 25px; letter-spacing: .01em; }
.tile-xl h3 { font-size: 34px; }
.tile p { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.play {
  position: absolute; right: 18px; top: 18px; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-size: 22px; color: #fff; padding-left: 4px;
  background: var(--tint); box-shadow: inset 0 -5px 0 rgba(0,0,0,.15), 0 8px 18px -6px rgba(0,0,0,.4);
  transform: scale(.9); transition: transform .3s cubic-bezier(.3,1.7,.5,1);
}
.tile:hover .play { transform: scale(1.08) rotate(-8deg); }

.hub-foot { text-align: center; padding: 50px 20px calc(40px + var(--safe-bottom)); color: var(--ink-soft); font-weight: 700; }

@media (max-width: 600px) {
  .tile-xl img { aspect-ratio: 4 / 3; }
  .hero { min-height: 70vh; }
}