/* ============================================================================
   Play Zone hub — playful redesigned landing for /play/
   Lively hero + floating doodles + themed categories + bouncy sticker tiles.
   ========================================================================== */

.hub-page { flex-direction: column; align-items: center; padding-top: 80px; }

/* ---- floating background doodles ---- */
.hub-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hub-float {
    position: absolute; font-size: clamp(1.6rem, 4vw, 2.8rem); opacity: .42;
    animation: hub-bob 7s ease-in-out infinite; will-change: transform;
}
@keyframes hub-bob {
    0%, 100% { transform: translateY(14px) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}

.hub-wrap { position: relative; z-index: 1; width: 100%; max-width: 1060px; }

/* ---- hero ---- */
.hub-hero { text-align: center; margin-bottom: 1.9rem; }
.hub-title { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.hub-title h1 {
    font-family: var(--kf) !important; font-weight: 700; margin: 0; letter-spacing: 1px;
    font-size: clamp(2.6rem, 9vw, 4.4rem);
    background: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffd43b, #69db7c, #4dabf7, #9775fa, #f783ac) !important;
    background-size: 220% auto !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    text-shadow: none !important; animation: hub-shine 6s linear infinite;
}
@keyframes hub-shine { to { background-position: 220% center; } }
.hub-emoji { font-size: clamp(1.8rem, 6vw, 3rem); display: inline-block; animation: hub-bounce 1.8s ease-in-out infinite; }
.hub-emoji.e2 { animation-delay: .35s; }
@keyframes hub-bounce {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}
.hub-tagline {
    display: inline-block; margin: .9rem auto 0; color: #6a4bbc; font-weight: 600;
    font-size: clamp(1rem, 3vw, 1.25rem); background: rgba(255, 255, 255, .72);
    padding: .45rem 1.3rem; border-radius: 999px; box-shadow: 0 6px 16px rgba(120, 90, 200, .16);
}

/* ---- category sections ---- */
.hub-cat { margin-bottom: 1.9rem; }
.hub-cat-title {
    font-family: var(--kf) !important; font-weight: 700 !important;
    font-size: clamp(1.3rem, 4vw, 1.8rem) !important;
    color: #5b3a9e !important; -webkit-text-fill-color: #5b3a9e !important;
    background: none !important; text-shadow: none !important;
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem .2rem;
}
.hub-cat-title .chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem; border-radius: 14px; font-size: 1.3rem;
    background: #fff; box-shadow: 0 5px 12px rgba(120, 90, 200, .2);
}
.hub-cat-title::after {
    content: ''; flex: 1; height: 3px; border-radius: 3px; margin-left: .5rem;
    background: linear-gradient(90deg, rgba(151, 117, 250, .45), transparent);
}

/* ---- tile grid ---- */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1rem; }

.hub-tile {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem;
    text-decoration: none; color: #fff;
    border-radius: 24px; padding: 1.3rem 1rem 1.15rem; min-height: 152px;
    box-shadow: 0 10px 22px rgba(80, 60, 160, .18), 0 5px 0 rgba(0, 0, 0, .10);
    transition: transform .18s cubic-bezier(.2, 1.4, .4, 1), box-shadow .18s;
    animation: hub-pop .5s cubic-bezier(.2, 1.5, .5, 1) backwards;
}
.hub-tile::before {
    content: ''; position: absolute; top: -60%; left: -30%; width: 65%; height: 130%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: rotate(18deg); pointer-events: none;
}
.hub-tile:hover {
    transform: translateY(-7px) rotate(-1.5deg) scale(1.03);
    box-shadow: 0 20px 34px rgba(80, 60, 160, .30), 0 5px 0 rgba(0, 0, 0, .10);
}
.hub-tile:active { transform: translateY(-2px) scale(.99); }
.hub-tile:focus-visible { outline: 4px solid #ffd43b; outline-offset: 3px; }

.hub-badge {
    font-size: 2.5rem; line-height: 1; width: 4.2rem; height: 4.2rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .92); border-radius: 50%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .16); margin-bottom: .15rem;
}
.hub-tile:hover .hub-badge { animation: hub-wobble .55s ease; }
@keyframes hub-wobble {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-12deg) scale(1.08); }
    75%      { transform: rotate(12deg) scale(1.08); }
}
.hub-name { font-family: var(--kf); font-weight: 700; font-size: 1.12rem; line-height: 1.05; }
.hub-desc { font-size: .8rem; opacity: .92; font-weight: 500; }

/* dark text where the tile gradient is light */
.hub-tile.tile-dress, .hub-tile.tile-whack, .hub-tile.tile-flap { color: #5b3d00; }

@keyframes hub-pop {
    from { opacity: 0; transform: translateY(16px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
.hub-grid .hub-tile:nth-child(1) { animation-delay: .02s; }
.hub-grid .hub-tile:nth-child(2) { animation-delay: .06s; }
.hub-grid .hub-tile:nth-child(3) { animation-delay: .10s; }
.hub-grid .hub-tile:nth-child(4) { animation-delay: .14s; }
.hub-grid .hub-tile:nth-child(5) { animation-delay: .18s; }
.hub-grid .hub-tile:nth-child(6) { animation-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
    .hub-float, .hub-emoji, .hub-title h1, .hub-tile, .hub-tile:hover .hub-badge { animation: none !important; }
    .hub-tile { opacity: 1; transform: none; }
    .hub-title h1 { background-position: 0 center !important; }
}