/* Where's Rocko? — home / hub styles, layered on TOP of the shared /styles.css
   tokens (the same way /play/play.css layers for the game). Creative-Library
   look: warm paper, Fredoka + Nunito, Rocko orange-red, rounded chunky cards.
   The Playground is a kid-friendly GAME LAUNCHER: big colorful tiles, live games
   only, real banner + badge art where it exists, a bright fallback where it doesn't. */
:root {
  /* playground category hues (shared with the game catalog) */
  --c-seek:   #2E74E8;
  --c-math:   #DD8E06;
  --c-read:   #2FA24B;
  --c-comics: #8A54D6;
  --c-logic:  #12A0A4;
  --c-create: #E4589B;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-seek:   #5C9BFF;
    --c-math:   #F0B23C;
    --c-read:   #56C878;
    --c-comics: #B486F0;
    --c-logic:  #33C6CA;
    --c-create: #FF82BC;
  }
}

/* the hub wants more room than the 760px content column */
body.home main { max-width: 1080px; padding: 0 20px 80px; }

/* ============ hero ============ */
.hub-hero {
  position: relative; overflow: hidden;
  margin: 26px 0 44px; padding: 50px 48px; border-radius: 28px;
  background:
    radial-gradient(120% 150% at 100% 0%, color-mix(in srgb, var(--brand) 16%, var(--surface)) 0%, var(--surface) 58%);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 44px;
}
/* faint hand-drawn paw pattern, brand-tinted */
.hub-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23F04E37'%3E%3Cellipse cx='60' cy='76' rx='23' ry='18'/%3E%3Cellipse cx='32' cy='50' rx='9' ry='11'/%3E%3Cellipse cx='50' cy='36' rx='9' ry='11'/%3E%3Cellipse cx='70' cy='36' rx='9' ry='11'/%3E%3Cellipse cx='88' cy='50' rx='9' ry='11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px; transform: rotate(-8deg) scale(1.2);
}
.hub-hero > * { position: relative; }
.hub-hero-copy { flex: 1 1 auto; min-width: 0; }
.eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 800;
  color: var(--brand-ink); margin: 0 0 12px;
}
.hub-hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.6rem); margin: 0 0 .26em; }
.hub-hero h1 .accent { color: var(--brand); }
.hub-hero .lede { font-size: 1.12rem; font-weight: 700; line-height: 1.5; color: var(--ink-soft); max-width: 48ch; margin: 0; }
.hub-hero .lede strong { color: var(--ink); }
.hub-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.hub-hero-art { flex: 0 0 auto; width: 190px; height: 190px; filter: drop-shadow(0 12px 22px rgba(30,22,14,.18)); }

/* theme-song toggle */
.song-toggle {
  display: inline-flex; align-items: center; gap: .55em;
  padding: 12px 20px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
  cursor: pointer; box-shadow: var(--shadow);
  transition: border-color .12s ease, color .12s ease, transform .08s ease;
}
.song-toggle:hover { border-color: var(--brand); color: var(--brand-ink); transform: translateY(-1px); }
.song-toggle .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 15px; }
.song-toggle .eq i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; }
.song-toggle[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-ink); }
.song-toggle[aria-pressed="true"] .eq i { animation: eq 900ms ease-in-out infinite; }
.song-toggle[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: .15s; }
.song-toggle[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: .30s; }
.song-toggle[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%,100% { height: 5px; } 50% { height: 15px; } }

/* the hidden-Rocko easter egg, peeking from behind the hero's bottom edge */
.peek {
  position: absolute; left: 30px; bottom: 0; width: 44px; height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer; z-index: 1;
  transform: translateY(42%); opacity: .72;
  transition: transform .2s ease, opacity .2s ease;
}
.peek img { width: 100%; height: auto; display: block; pointer-events: none; }
.peek:hover, .peek:focus-visible { transform: translateY(6%); opacity: 1; outline: none; }
.peek.found { pointer-events: none; }

.egg-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 50;
  display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper); font-weight: 700; font-size: .95rem;
  padding: 12px 20px; border-radius: 999px; box-shadow: var(--shadow-lift);
  opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(16px);
  transition: opacity .25s ease, transform .25s ease;
}
.egg-toast img { width: 26px; height: 26px; }
.egg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .hub-hero { flex-direction: column; align-items: flex-start; padding: 34px 24px; gap: 22px; }
  .hub-hero-art { align-self: center; width: 150px; height: 150px; }
  .hub-cta { justify-content: flex-start; }
}

/* ============ section heads ============ */
.section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 22px; }
.section-head h2 { font-size: 1.9rem; margin: 0; }
.section-head .sub { color: var(--ink-soft); font-weight: 700; font-size: .98rem; }

/* ============ GAME LAUNCHER ============ */
.glaunch { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }

.gtile {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .14s cubic-bezier(.2,.8,.3,1.5), box-shadow .14s ease;
}
.gtile:hover, .gtile:focus-visible { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow-lift); outline: none; }
.gtile:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--brand)) 45%, transparent), var(--shadow-lift); }

/* banner (real art, cover-fit) */
.gtile-banner { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; }
.gtile-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* generated fallback banner for games without art yet */
.gtile-banner.fallback {
  display: grid; place-items: center;
  background: radial-gradient(125% 135% at 50% 0%, color-mix(in srgb, var(--c) 55%, #fff) 0%, var(--c) 72%);
}
.gtile-banner.fallback::after {
  content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='60' cy='76' rx='23' ry='18'/%3E%3Cellipse cx='32' cy='50' rx='9' ry='11'/%3E%3Cellipse cx='50' cy='36' rx='9' ry='11'/%3E%3Cellipse cx='70' cy='36' rx='9' ry='11'/%3E%3Cellipse cx='88' cy='50' rx='9' ry='11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 78px; transform: rotate(-8deg) scale(1.15);
}
.gt-emoji { position: relative; font-size: 4.6rem; line-height: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.22)); }

/* category chip, over the banner top-left */
.gtile-cat {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-weight: 800; font-size: .72rem; color: #fff;
  background: color-mix(in srgb, var(--c) 90%, #000); padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
}
/* flagship ribbon, top-right */
.gtile-star {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem; color: var(--brand-ink);
  background: #fff; padding: 5px 11px; border-radius: 999px; box-shadow: var(--shadow);
}
/* collectible badge sticker, over the banner bottom-left */
.gtile-badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: #fff;
  border: 3px solid #fff; box-shadow: 0 4px 12px rgba(30,22,14,.28); overflow: hidden;
}
.gtile-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gtile-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; }
.gtile-body h3 { font-size: 1.28rem; }
.gtile-body p { margin: 0; color: var(--ink-soft); font-weight: 700; font-size: .92rem; flex: 1 1 auto; }
.gtile-play {
  margin-top: 6px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #fff;
  background: var(--c, var(--brand)); padding: 9px 20px; border-radius: 999px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c, var(--brand)) 42%, transparent);
}
.gtile:hover .gtile-play .arw { animation: nudge .6s ease-in-out; }
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.launch-note { margin: 26px 2px 0; color: var(--ink-soft); font-weight: 700; font-size: .95rem; }

@media (max-width: 520px) {
  .glaunch { grid-template-columns: 1fr; }
  .section-head h2 { font-size: 1.6rem; }
}

/* ============ about ============ */
.hub-about {
  margin-top: 50px; padding: 30px 30px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line);
}
.hub-about h2 { font-size: 1.5rem; margin: 0 0 .55em; }
.hub-about p { max-width: 66ch; margin: 0 0 1em; color: var(--ink); font-weight: 600; }
.hub-about p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}