/* Creative Playground "new world" theme (combined release, 9 Nov 2026).
   Same-origin, CSS only: no fonts, images or requests. Every rule is scoped to
   body.pw-world (the /creative-playground/ page) or body.pw-hub (the Music Studio
   hub frame only: header, background, back link). Drum Machine, Read Music and Labyrinth
   never load this file. */

/* ---------- Palette ---------- */
.pw-world,.pw-hub{
  --pw-night:#0b0a24;   /* base */
  --pw-indigo:#1b1550;
  --pw-violet:#2a0f4a;
  --pw-ink:#eef0ff;     /* body text */
  --pw-muted:#cdd0f5;   /* secondary text */
  --pw-cyan:#7cf7ff;    /* neon accent 1 */
  --pw-pink:#ffb3ec;    /* neon accent 2 */
  --pw-focus:#ffd166;
}

/* ---------- Playground page ---------- */
.pw-world{margin:0;min-height:100vh;color:var(--pw-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;line-height:1.6;
  position:relative;overflow-x:hidden;background:var(--pw-night)}
.pw-world *,.pw-world *::before,.pw-world *::after{box-sizing:border-box}
:root:has(body.pw-world){background:#0b0a24}
/* animated aurora gradient */
.pw-world::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(40% 35% at 20% 25%,rgba(124,247,255,.12),transparent 70%),
    radial-gradient(35% 30% at 80% 20%,rgba(255,122,217,.10),transparent 70%),
    radial-gradient(45% 40% at 60% 85%,rgba(120,90,255,.14),transparent 70%),
    linear-gradient(160deg,var(--pw-night) 0%,var(--pw-indigo) 55%,var(--pw-violet) 100%);
  background-size:160% 160%,160% 160%,160% 160%,100% 100%;animation:pw-drift 24s ease-in-out infinite alternate}
/* fine CSS-only grain */
.pw-world::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:radial-gradient(#fff .7px,transparent 1px),radial-gradient(#fff .6px,transparent 1px);
  background-size:3px 3px,5px 5px;background-position:0 0,1px 2px}
@keyframes pw-drift{0%{background-position:0% 0%,100% 0%,50% 100%,0 0}100%{background-position:100% 100%,0% 100%,50% 0%,0 0}}

.pw-world a{color:var(--pw-cyan);text-underline-offset:.2em}
.pw-world a:focus-visible{outline:3px solid var(--pw-focus);outline-offset:3px;border-radius:.25rem}
.pw-skip{position:absolute;left:-999px;top:0;background:var(--pw-focus);color:var(--pw-night)!important;padding:.5rem 1rem;z-index:10}
.pw-skip:focus{left:1rem;top:1rem}

.pw-top,.pw-main,.pw-foot{max-width:70rem;margin:0 auto;padding:1rem 1.25rem}
.pw-top{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(124,247,255,.25)}
.pw-back{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-weight:600;text-decoration:none}
.pw-back:hover{text-decoration:underline}
.pw-topnav{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:center}
.pw-world .pw-topnav a{color:var(--pw-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.pw-world .pw-topnav a:hover{color:var(--pw-cyan)}
.pw-world .pw-topnav a[aria-current="page"]{color:var(--pw-cyan);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}

.pw-hero{padding:3rem 0 1.5rem}
.pw-kicker{color:var(--pw-pink);font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin:0 0 .5rem}
.pw-hero h1{font-size:clamp(2.4rem,8vw,4.5rem);line-height:1.05;margin:0 0 1rem;letter-spacing:-.02em;
  text-shadow:0 0 24px rgba(124,247,255,.35)}
.pw-lead{max-width:42rem;font-size:1.15rem;color:var(--pw-muted);margin:0}

.pw-category{padding:1.75rem 0;scroll-margin-top:1rem}
.pw-cat-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1rem}
.pw-cat-head h2{font-size:1.6rem;margin:0;line-height:1.2}
.pw-cat-head .pw-name{display:block}
/* plain visible subtitle under each themed section name (Music / Games / Visual) */
.pw-cat-head .pw-sub{display:block;font-size:.85rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pw-muted);margin-top:.15rem}
.pw-world .pw-topnav .pw-navsub{font-size:.75rem;color:var(--pw-muted);margin-left:.35rem}
.pw-tag{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .7rem;border-radius:999px;
  border:1px solid rgba(185,189,230,.5);color:var(--pw-muted)}
.pw-tag-live{border-color:var(--pw-cyan);color:var(--pw-cyan);box-shadow:0 0 12px rgba(124,247,255,.35)}
.pw-cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.pw-card{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;border-radius:1.25rem;
  background:rgba(20,16,60,.78);border:1px solid rgba(124,247,255,.3);
  box-shadow:0 0 0 1px rgba(255,122,217,.08),0 10px 30px rgba(0,0,0,.35)}
.pw-card h3{margin:0;font-size:1.25rem}
.pw-card p{margin:0;color:var(--pw-ink)}
.pw-card .pw-note{color:var(--pw-muted);font-size:.95rem}
.pw-card-soon{border-style:dashed;border-color:rgba(185,189,230,.45);background:rgba(20,16,60,.5)}
.pw-card-soon p{color:var(--pw-muted)}
.pw-btn{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.6rem 1.1rem;border-radius:999px;font-weight:700;text-decoration:none;
  background:var(--pw-cyan);color:var(--pw-night)!important;box-shadow:0 0 18px rgba(124,247,255,.45)}
.pw-btn:hover{background:#fff}

.pw-foot{margin-top:2rem;border-top:1px solid rgba(124,247,255,.25);padding-bottom:2.5rem;color:var(--pw-muted)}
.pw-foot p{margin:.5rem 0 0}

@media (max-width:600px){
  .pw-top,.pw-main,.pw-foot{padding-left:1rem;padding-right:1rem}
  .pw-hero{padding-top:2rem}
}

/* site search (search.css/search.js) on the playground: icon colour and the visually-hidden label */
.pw-world .site-search-btn{color:var(--pw-ink);border-color:rgba(124,247,255,.45)}
.pw-world .site-search-btn:hover{background:var(--pw-cyan);color:var(--pw-night)}
.pw-world .site-search-btn:focus-visible{outline-color:var(--pw-focus)}
.pw-world .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pw-world .pw-topnav{margin-left:auto}

/* ---------- Music Studio hub frame: light version ---------- */
:root:has(body.pw-hub){background:#1d1240}
.pw-hub{min-height:100vh;
  background:linear-gradient(170deg,#0f1030 0%,#161447 60%,#1d1240 100%) fixed}
.pw-hub>header{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem;
  border-bottom:1px solid rgba(124,247,255,.35)}
.pw-hub>header a{color:var(--pw-cyan)}
.pw-hub .pw-hub-back{display:inline-flex;align-items:center;min-height:44px;font-weight:650;text-decoration:none;
  padding:.2rem .8rem;border:1px solid rgba(124,247,255,.5);border-radius:999px}
.pw-hub .pw-hub-back:hover{background:rgba(124,247,255,.12)}
.pw-hub .pw-hub-sub{color:#cdd0f5;font-weight:500;margin-left:.3em}
.pw-hub>footer{border-top-color:rgba(124,247,255,.25)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pw-world::before{animation:none}
  .pw-world *,.pw-world *::before,.pw-world *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}