.playground-shell{max-width:1180px;margin:0 auto;padding:1.25rem}.playground-hero{padding:2rem;border-radius:24px;background:linear-gradient(135deg,#061f39,#0b5c74);color:#fff;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.22)}.playground-hero h1{font-size:clamp(2.2rem,6vw,4.5rem);margin:.25rem 0}.eyebrow{font-weight:800;letter-spacing:.12em}.keyboard-note{max-width:850px;margin:1rem auto}.hero-actions,.character-actions,.sky-controls,.dance-controls{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;align-items:center}.playground-shell button,.playground-shell select,.playground-shell input{font:inherit}.playground-shell button{font-weight:700;padding:.75rem 1rem;border-radius:12px;border:2px solid #062a4d;cursor:pointer}.playground-shell select{padding:.7rem;border-radius:10px;border:2px solid #062a4d}.playground-shell button:focus-visible,.playground-shell a:focus-visible,.playground-shell select:focus-visible,.playground-shell input:focus-visible{outline:4px solid #ffd84d;outline-offset:3px}.status-box{max-width:850px;margin:1rem auto 0;padding:1rem;border-radius:14px;background:#fff;color:#061f39;font-weight:700}.character-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.character-card{padding:1.25rem;border:3px solid #0b5c74;border-radius:18px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14)}.character-card h3{text-align:center;font-size:1.55rem;margin:.35rem 0}.character-symbol{font-size:4rem;text-align:center;min-height:5rem;display:grid;place-items:center}.character-output{min-height:2.6rem;margin-top:1rem;padding:.8rem;border-radius:10px;background:#f4f8fa;font-weight:700}.dance-floor,.braille-sky,.surprise-zone{margin-top:2rem;padding:1.5rem;border:3px solid #0b5c74;border-radius:20px;background:#f7fbfd}.dance-floor{text-align:center;background:linear-gradient(135deg,#fff8df,#eef9ff)}.dance-floor h2{font-size:clamp(1.8rem,4vw,3rem);margin:.25rem 0}.dance-controls{margin:1rem 0}.dance-controls label{font-weight:700}.dance-controls input[type=range]{min-width:180px}.dance-stage{--beat:0;position:relative;min-height:220px;margin:1rem 0;border-radius:20px;display:flex;align-items:center;justify-content:space-evenly;gap:1rem;padding:3rem 1rem 1rem;background:radial-gradient(circle at center,#fff 0,#dff3ff 38%,#0b5c74 100%);overflow:hidden;isolation:isolate}.dance-stage::before{content:attr(data-section) " • " attr(data-current-move);position:absolute;top:.65rem;left:50%;transform:translateX(-50%);max-width:90%;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.9);color:#061f39;font-weight:800;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:3}.dance-stage:not([data-current-move])::before{content:"Dance floor ready"}.dance-stage::after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,rgba(255,255,255,.05),rgba(255,255,255,.28),rgba(255,255,255,.05),rgba(255,255,255,.18),rgba(255,255,255,.05));transform:rotate(calc(var(--dance-time,0) * 6deg));opacity:calc(.15 + (var(--beat) * .45));z-index:-1}.dance-character{font-size:clamp(3.5rem,10vw,7rem);transition:transform 70ms linear,opacity 140ms linear;will-change:transform,filter,opacity;z-index:2}.dance-star{font-size:clamp(4rem,12vw,8rem)}.dance-party-active .dance-stage{box-shadow:0 0 calc(15px + (var(--beat) * 35px)) rgba(0,0,0,.28)}.dance-party-active .dance-stage[data-section="Finale"]{animation:finaleStagePulse .5s ease-in-out infinite alternate}.sky-stage{position:relative;height:300px;overflow:hidden;border-radius:18px;margin:1rem 0;background:linear-gradient(#9bd7ff,#eefbff 65%,#b9e8a5)}.braille-drop{position:absolute;top:-2rem;font-size:2.1rem;border:0;background:transparent!important;padding:.2rem!important;animation:brailleFall linear forwards;z-index:2}.scoreboard{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;font-size:1.1rem}.guest-appearance{margin-top:1rem;min-height:3rem;padding:1rem;border-radius:12px;background:#fff;font-weight:700;text-align:center}.dancer.is-dancing{animation:danceMove .55s infinite alternate ease-in-out}.dancer.is-spinning{animation:spinMove .8s linear infinite}.dancer.is-frozen{filter:grayscale(1)}@keyframes brailleFall{from{transform:translateY(0) rotate(0)}to{transform:translateY(340px) rotate(280deg)}}@keyframes danceMove{from{transform:translate(-12px,-5px) rotate(-10deg)}to{transform:translate(12px,5px) rotate(10deg) scale(1.08)}}@keyframes spinMove{to{transform:rotate(360deg)}}@keyframes finaleStagePulse{from{box-shadow:0 0 22px rgba(0,0,0,.28)}to{box-shadow:0 0 52px rgba(0,0,0,.5)}}.reduced-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reduced-motion .dance-character{transition:none!important;transform:none!important}.reduced-motion .dance-stage::after{display:none}.reduced-motion .dance-stage::before{content:"Motion reduced"}@media(max-width:640px){.playground-shell{padding:.7rem}.playground-hero{padding:1.25rem}.sky-stage{height:230px}.hero-actions button,.character-actions button,.sky-controls button,.dance-controls button,.dance-controls select{width:100%}.dance-stage{min-height:170px;padding-top:3.2rem}.dance-character{font-size:3.5rem}.dance-star{font-size:4.2rem}.dance-stage::before{font-size:.78rem;max-width:92%}}
/* Braille Rain storm environment */
.braille-sky .sky-controls label{font-weight:700}
.braille-sky .sky-controls input[type=range]{min-width:170px}
.sky-stage{transition:background 700ms ease,box-shadow 700ms ease}
.sky-stage .storm-clouds,.sky-stage .lightning-bolt{display:none;pointer-events:none}
.sky-stage.storm-active{background:linear-gradient(#111b2d 0%,#2d3a4b 50%,#596b77 72%,#526b46 100%);box-shadow:inset 0 -35px 70px rgba(7,16,28,.58)}
.sky-stage.storm-active .storm-clouds{display:block;position:absolute;inset:0;z-index:1;opacity:.96;background:
radial-gradient(ellipse at 8% 12%,#27313f 0 9%,transparent 10%),
radial-gradient(ellipse at 25% 7%,#161e2a 0 14%,transparent 15%),
radial-gradient(ellipse at 48% 15%,#354150 0 16%,transparent 17%),
radial-gradient(ellipse at 73% 8%,#151d29 0 15%,transparent 16%),
radial-gradient(ellipse at 94% 16%,#303b49 0 13%,transparent 14%),
linear-gradient(to bottom,rgba(10,16,25,.82) 0 28%,transparent 52%);
animation:stormCloudDrift 9s ease-in-out infinite alternate}
.sky-stage.storm-active::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(104deg,transparent 0 10px,rgba(190,224,255,.5) 11px,transparent 13px 25px);animation:realRainVisual .42s linear infinite;opacity:.62}
.sky-stage.storm-active .lightning-bolt{position:absolute;display:block;z-index:3;left:68%;top:10%;width:7px;height:145px;background:#f7fbff;box-shadow:0 0 12px 5px rgba(210,235,255,.9);opacity:0;transform:skew(-14deg) rotate(12deg)}
.sky-stage.lightning-flash{box-shadow:inset 0 0 100px rgba(235,247,255,.92),0 0 24px rgba(200,230,255,.8)}
.sky-stage.lightning-flash .lightning-bolt{opacity:1}
@keyframes realRainVisual{from{background-position:0 -28px}to{background-position:-9px 38px}}
@keyframes stormCloudDrift{from{transform:translateX(-1.5%) scale(1.03)}to{transform:translateX(1.5%) scale(1.08)}}
.reduced-motion .sky-stage.storm-active .storm-clouds,.reduced-motion .sky-stage.storm-active::after{animation:none!important}
@media(max-width:640px){.braille-sky .sky-controls input[type=range]{width:100%}}

/* Early, screen-reader-friendly access to Braille Rain */
.game-shortcuts{margin:1.25rem 0 2rem;padding:1.25rem;border:4px solid #8a5b00;border-radius:18px;background:#fff8df;text-align:center}
.game-shortcuts h2{margin:.1rem 0 .5rem;color:#062a4d}
.game-shortcuts p{margin:.45rem auto}
#braille-rain-game:focus{outline:5px solid #ffd84d;outline-offset:4px}
.sky-stage.lightning-flash::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:rgba(245,251,255,.88);box-shadow:inset 0 0 110px #fff}
.sky-stage.lightning-flash .lightning-bolt{width:10px;height:190px;opacity:1;background:#fff;box-shadow:0 0 18px 9px #d9f0ff}
@media(max-width:640px){.game-shortcuts{padding:1rem;border-width:3px}}

/* Layered lightning across the full Braille Rain sky */
.sky-stage .bolt-left{left:18%;top:5%;height:155px;transform:skew(-13deg) rotate(-8deg)}
.sky-stage .bolt-centre{left:49%;top:2%;height:205px;transform:skew(11deg) rotate(5deg)}
.sky-stage .bolt-right{left:80%;top:8%;height:170px;transform:skew(-16deg) rotate(14deg)}
.sky-stage.lightning-flash .bolt-left{animation:boltPulse .28s ease-out 0s 2}
.sky-stage.lightning-flash .bolt-centre{animation:boltPulse .32s ease-out .08s 2}
.sky-stage.lightning-flash .bolt-right{animation:boltPulse .3s ease-out .16s 2}
@keyframes boltPulse{0%{opacity:0}20%{opacity:1}55%{opacity:.18}100%{opacity:1}}
.reduced-motion .sky-stage.lightning-flash .lightning-bolt{animation:none!important;opacity:1}