.dance-page{background:#f2e8ff}.dance-page .nav{color:white}.dance-page .nav-links a.active:after{right:0;background:var(--yellow)}
.dance-hero{position:relative;isolation:isolate;min-height:100vh;padding:130px clamp(10px,4vw,62px) 90px;overflow:hidden;background:radial-gradient(circle at 15% 30%,#ff47a84d,transparent 24%),radial-gradient(circle at 88% 20%,#ffd83d31,transparent 22%),linear-gradient(145deg,#2b0759,#6022a8 52%,#075ebc);color:white}.dance-hero:before{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(#ffffff27 1.4px,transparent 1.5px);background-size:27px 27px;animation:danceDots 16s linear infinite}
.dance-heading{text-align:center;margin:0 auto 33px}.back-games{display:inline-flex;margin-bottom:17px;color:#ede3ff;text-decoration:none;font-size:13px;font-weight:900}.dance-eyebrow{display:flex;align-items:center;justify-content:center;gap:11px;font-size:11px;font-weight:1000;letter-spacing:2px;text-transform:uppercase}.dance-eyebrow b{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 7px #ffd83d25}.dance-heading h1{margin:18px 0 9px;font:800 clamp(54px,6vw,88px)/.83 "Baloo 2";letter-spacing:-4px}.dance-heading h1 span{color:var(--yellow)}.dance-heading p{margin:0;color:#eee5ff;font-size:17px}
.dance-shell{width:min(1180px,100%);margin:auto;padding:12px;border:1px solid #ffffff55;border-radius:32px;background:#ffffff17;box-shadow:0 30px 85px #15002d94;backdrop-filter:blur(10px)}.dance-stage{position:relative;isolation:isolate;aspect-ratio:16/9;overflow:hidden;border-radius:22px;background:radial-gradient(ellipse at 50% 78%,#ffdc6370 0 16%,transparent 46%),linear-gradient(180deg,#2d075c 0 57%,#120425 58% 100%);box-shadow:inset 0 0 0 4px #ffffff6b;touch-action:none}.dance-stage:before{content:"";position:absolute;z-index:-1;left:-10%;right:-10%;bottom:-9%;height:42%;background:repeating-linear-gradient(100deg,#ffffff09 0 8%,#00000012 8% 16%),linear-gradient(180deg,#351157,#150322);transform:perspective(520px) rotateX(58deg);transform-origin:bottom}.dance-stage:after{content:"";position:absolute;z-index:-2;left:12%;right:12%;top:15%;height:57%;border:7px solid #ffeb9b;border-radius:28px;background:radial-gradient(circle at 50% 50%,#ff4aa533 0 3%,transparent 3.4%),linear-gradient(135deg,#075ebc,#7b20be 46%,#ef3e97);background-size:39px 39px,auto;box-shadow:0 0 42px #ffcf40a8,inset 0 0 60px #16002499}
.stage-glow{position:absolute;z-index:0;top:-27%;width:22%;height:115%;background:linear-gradient(180deg,#fff9b9c9,transparent 72%);filter:blur(5px);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);transform-origin:top;opacity:.37;animation:spotlight 4s ease-in-out infinite}.glow-one{left:9%;rotate:-15deg}.glow-two{right:9%;rotate:15deg;animation-delay:-2s}.stage-led{position:absolute;z-index:0;left:14%;right:14%;top:17%;height:52%;display:flex;align-items:center;justify-content:space-around;overflow:hidden;border-radius:20px}.stage-led i{width:8%;height:8%;border-radius:50%;background:var(--yellow);box-shadow:0 0 26px #ffd83d;animation:ledPulse 1.2s ease-in-out infinite}.stage-led i:nth-child(2n){background:#ff58ad;box-shadow:0 0 26px #ff58ad;animation-delay:-.4s}.stage-led i:nth-child(3n){background:#50dcff;box-shadow:0 0 26px #50dcff;animation-delay:-.8s}
.dance-hud{position:absolute;z-index:8;left:12px;right:12px;top:12px;display:grid;grid-template-columns:105px 105px 90px minmax(210px,1fr) auto;gap:7px;pointer-events:none}.dance-hud>div{display:flex;min-height:51px;align-items:center;justify-content:center;gap:8px;padding:7px 11px;border:1px solid #ffffffbd;border-radius:15px;background:#fffffff0;color:var(--ink);box-shadow:0 8px 20px #1d003d45}.dance-hud small{color:#6f6680;font-size:8px;font-weight:1000;letter-spacing:1px;text-transform:uppercase}.dance-hud strong{font:800 21px/1 "Baloo 2"}.energy-box span{position:relative;flex:1;height:11px;overflow:hidden;border-radius:99px;background:#d8cee2}.energy-box span i{display:block;width:70%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff4c7b,#ffd83d,#48d783);transition:width .25s}.energy-box>strong{font-size:15px}.dance-hud .dance-actions{gap:4px;padding:5px;background:#ffffffc7;pointer-events:auto}.dance-actions button{display:grid;width:37px;height:37px;place-items:center;border:0;border-radius:10px;background:white;color:#6022a8;font:900 16px Nunito;cursor:pointer}.dance-actions button:hover{background:var(--yellow)}
.dance-track{position:absolute;z-index:4;left:3%;top:14%;bottom:7%;width:38%;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:2px solid #ffffff30;border-radius:25px;background:linear-gradient(180deg,#12032b6e,#090016a8);box-shadow:inset 0 0 35px #8d5cff28}.dance-lane{position:relative;border-right:1px solid #ffffff20}.dance-lane:last-of-type{border:0}.dance-lane>span{position:absolute;left:50%;top:11px;translate:-50%;color:#ffffff24;font:900 34px/1 "Baloo 2"}.dance-targets{position:absolute;z-index:3;left:0;right:0;bottom:7%;display:grid;grid-template-columns:repeat(4,1fr)}.dance-targets b{display:grid;width:58px;height:58px;margin:auto;place-items:center;border:4px solid white;border-radius:50%;background:#ffffff25;color:white;font:900 28px/1 "Baloo 2";box-shadow:0 0 0 8px #ffffff13,0 0 30px #ffffff55}.dance-targets b[data-action="left"]{background:#ff4d76}.dance-targets b[data-action="tap"]{background:#ffd83d;color:#2c1545}.dance-targets b[data-action="up"]{background:#42d985}.dance-targets b[data-action="right"]{background:#3e9cff}.dance-note{position:absolute;z-index:2;left:var(--lane-x);top:0;display:grid;width:52px;height:52px;place-items:center;border:4px solid white;border-radius:50%;background:var(--note-color);color:white;font:900 27px/1 "Baloo 2";box-shadow:0 7px 0 #1c0737,0 0 26px var(--note-color);translate:-50% -50%;will-change:top}.dance-note[data-action="tap"]{color:#2c1545}.dance-note.is-hit{animation:noteHit .28s ease-out forwards}
.calinou-dancer{position:absolute;z-index:3;right:5%;bottom:2%;width:49%;height:76%;display:flex;align-items:flex-end;justify-content:center;transform-origin:50% 100%}.calinou-dancer img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 24px 25px #0b001d99);transition:opacity .1s}.dance-aura{position:absolute;z-index:0;left:50%;bottom:3%;width:65%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffd83d8f,transparent 64%);translate:-50%;filter:blur(4px);animation:auraPulse 1.4s ease-in-out infinite}.calinou-dancer.move-tap{animation:danceTap .48s ease-out}.calinou-dancer.move-left{animation:danceLeft .5s ease-out}.calinou-dancer.move-right{animation:danceRight .5s ease-out}.calinou-dancer.move-up{animation:danceUp .55s ease-out}
.dance-feedback{position:absolute;z-index:9;left:50%;top:24%;min-width:150px;text-align:center;translate:-50%;color:var(--yellow);font:900 clamp(29px,4vw,55px)/1 "Baloo 2";text-shadow:0 5px 0 #722191,0 10px 25px #120020;opacity:0;pointer-events:none}.dance-feedback.show{animation:feedbackPop .55s ease-out}.dance-confetti{position:absolute;z-index:12;inset:0;overflow:hidden;pointer-events:none}.dance-confetti i{position:absolute;top:-8%;width:10px;height:18px;border-radius:3px;background:var(--confetti);animation:confettiFall 1.8s linear forwards}
.dance-overlay{position:absolute;z-index:15;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;padding:22px 35px;text-align:center;background:linear-gradient(145deg,#250448f4,#6022a8ef 58%,#075ebcef);opacity:0;visibility:hidden;transition:.3s}.dance-overlay.is-visible{opacity:1;visibility:visible}.dance-overlay-heading{display:flex;align-items:center;justify-content:center;gap:19px}.dance-overlay-heading img{width:105px;height:140px;object-fit:contain;filter:drop-shadow(0 14px 16px #12002088);animation:dancerFloat 1.6s ease-in-out infinite}.dance-overlay-heading>div{text-align:left}.dance-overlay-heading span{color:var(--yellow);font-size:9px;font-weight:1000;letter-spacing:2px}.dance-overlay h2{margin:1px 0;font:800 clamp(30px,3.7vw,48px)/1 "Baloo 2"}.dance-overlay p{max-width:590px;margin:4px auto 0;color:#ede3ff;font-size:13px}.dance-level-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;width:min(890px,96%)}.dance-level-card{position:relative;min-height:122px;padding:13px 7px 10px;border:3px solid #ffffff8c;border-radius:20px;background:linear-gradient(145deg,#ffffff26,#ffffff0d);color:white;box-shadow:0 11px 24px #1300275e;cursor:pointer;transition:.2s}.dance-level-card:hover,.dance-level-card.is-selected{transform:translateY(-7px);border-color:var(--yellow);background:linear-gradient(145deg,#ffd83d4d,#ff58ad30)}.dance-level-card.is-selected:after{content:"";position:absolute;inset:-7px;border:2px solid var(--yellow);border-radius:25px}.dance-level-card.is-locked{opacity:.42;filter:grayscale(.7);cursor:not-allowed}.dance-level-card small{display:block;color:var(--yellow);font-size:7px;font-weight:1000;letter-spacing:1px}.dance-level-card strong{display:block;margin:5px 0 1px;font:900 35px/.9 "Baloo 2"}.dance-level-card span{display:block;font:800 11px/1.05 "Baloo 2"}.dance-level-card em{display:block;margin-top:8px;color:#dfcdf6;font-size:7px;font-style:normal;font-weight:900}.dance-overlay-actions{display:flex;align-items:center;justify-content:center;gap:16px}.dance-overlay-actions button{min-height:47px;padding:0 25px;border:0;border-radius:999px;background:var(--yellow);color:var(--ink);font:1000 14px Nunito;cursor:pointer;box-shadow:0 7px 0 #d08b00}.dance-overlay-actions button:active{translate:0 5px;box-shadow:0 2px 0 #d08b00}.dance-overlay-actions button b{margin-left:12px}.dance-overlay-actions a{color:white;font-size:11px;font-weight:900}.dance-overlay.pause-view .dance-level-grid{display:none}.dance-overlay.pause-view .dance-overlay-heading{flex-direction:column}.dance-overlay.pause-view .dance-overlay-heading img{width:145px;height:195px}.dance-overlay.pause-view .dance-overlay-heading>div{text-align:center}.dance-overlay.pause-view .dance-overlay-heading span{display:none}
.dance-countdown{position:absolute;z-index:17;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#220041b3;backdrop-filter:blur(5px);opacity:0;visibility:hidden}.dance-countdown.is-visible{opacity:1;visibility:visible}.dance-countdown span{color:var(--yellow);font-size:12px;font-weight:1000;letter-spacing:3px}.dance-countdown strong{font:900 clamp(100px,18vw,190px)/.82 "Baloo 2";text-shadow:0 8px 0 #6f22a3}.dance-countdown p{margin:12px 0 0;font-weight:900}.dance-tutorial{position:absolute;z-index:13;left:50%;bottom:3%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(590px,90%);padding:10px;border:2px solid #ffffffab;border-radius:20px;background:#19002bd9;opacity:0;visibility:hidden;translate:-50% 14px}.dance-tutorial.is-visible{opacity:1;visibility:visible;translate:-50% 0;transition:.3s}.dance-tutorial div{display:flex;align-items:center;justify-content:center;gap:7px}.dance-tutorial b{display:grid;width:31px;height:31px;place-items:center;border-radius:50%;background:var(--yellow);color:#2c1545}.dance-tutorial span{font-size:9px;font-weight:900}
.dance-tips{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;width:min(1050px,100%);margin:26px auto 30px}.dance-tips article{display:grid;grid-template-columns:48px 1fr;column-gap:13px;align-items:center;padding:18px;border:1px solid #ffffff3d;border-radius:20px;background:#ffffff15}.dance-tips b{grid-row:1/3;display:grid;width:48px;height:48px;place-items:center;border-radius:14px;background:white;color:#6022a8;font-size:25px}.dance-tips h3{margin:0;font:800 18px "Baloo 2"}.dance-tips p{margin:0;color:#e9dcf8;font-size:12px}.dance-page footer{background:var(--ink)}
.dance-shell:fullscreen,.dance-page.dance-focus .dance-shell{position:fixed;z-index:1000;inset:0;width:100vw;max-width:none;height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:#2b0759}.dance-shell:fullscreen .dance-stage,.dance-page.dance-focus .dance-stage{width:100%;height:100%;border-radius:0;aspect-ratio:auto}.dance-page.dance-focus{overflow:hidden}
@keyframes danceDots{to{background-position:54px 27px}}@keyframes spotlight{50%{transform:rotate(19deg);opacity:.62}}@keyframes ledPulse{50%{transform:scale(1.55);opacity:.55}}@keyframes auraPulse{50%{transform:scale(1.1);opacity:.72}}@keyframes dancerFloat{50%{transform:translateY(-8px) rotate(-1deg)}}@keyframes noteHit{to{transform:scale(1.8);opacity:0}}@keyframes feedbackPop{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.12)}75%{opacity:1}100%{opacity:0;transform:translateY(-30px)}}@keyframes confettiFall{to{transform:translate(var(--drift),115vh) rotate(760deg)}}@keyframes danceTap{35%{transform:scale(1.07,.93) rotate(-2deg)}70%{transform:scale(.98,1.05) rotate(2deg)}}@keyframes danceLeft{40%{transform:translateX(-12%) rotate(-5deg)}70%{transform:translateX(3%) rotate(2deg)}}@keyframes danceRight{40%{transform:translateX(12%) rotate(5deg)}70%{transform:translateX(-3%) rotate(-2deg)}}@keyframes danceUp{40%{transform:translateY(-10%) scale(1.04)}75%{transform:translateY(2%)}}
@media(max-width:900px){.dance-hero{padding-top:112px}.dance-hud{top:max(7px,env(safe-area-inset-top));left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right));grid-template-columns:repeat(3,74px) minmax(150px,1fr)}.dance-hud .dance-actions{position:absolute;right:0;top:55px}.dance-track{width:42%}.calinou-dancer{right:1%;width:54%}.dance-tips{grid-template-columns:1fr}}
@media(max-width:620px){.dance-hero{padding:100px 5px 60px}.dance-heading{padding:0 12px}.dance-heading h1{font-size:48px;letter-spacing:-2px}.dance-heading p{font-size:15px}.dance-shell{padding:5px;border-radius:18px}.dance-stage{border-radius:14px}.dance-hud{grid-template-columns:repeat(3,1fr)}.dance-hud>div{min-height:40px;padding:3px 2px;flex-direction:column;gap:0;border-radius:9px}.dance-hud small{font-size:6px}.dance-hud strong{font-size:15px}.dance-hud .energy-box{position:absolute;left:0;right:104px;top:45px;display:grid;grid-template-columns:auto 1fr auto;gap:5px;min-height:24px;padding:3px 7px}.energy-box span{width:100%;height:7px}.energy-box>strong{font-size:9px}.dance-actions button{width:30px;height:28px}.dance-hud .dance-actions{top:44px}.dance-overlay{gap:5px;padding:7px}.dance-overlay-heading{gap:7px}.dance-overlay-heading img{width:53px;height:68px}.dance-overlay-heading span{font-size:6px}.dance-overlay h2{font-size:20px}.dance-overlay p{display:none}.dance-level-grid{gap:4px;width:99%}.dance-level-card{min-height:66px;padding:6px 2px;border-width:2px;border-radius:10px}.dance-level-card small{font-size:4px}.dance-level-card strong{font-size:20px}.dance-level-card span{font-size:6px}.dance-level-card em{display:none}.dance-overlay-actions{gap:9px}.dance-overlay-actions button{min-height:34px;padding:0 14px;font-size:10px}.dance-overlay-actions a{font-size:8px}.dance-track{left:2%;top:26%;bottom:4%;width:47%}.dance-targets b{width:34px;height:34px;border-width:2px;font-size:17px}.dance-note{width:31px;height:31px;border-width:2px;font-size:16px}.calinou-dancer{right:-4%;bottom:1%;width:58%;height:65%}.dance-tutorial{bottom:2%;gap:3px;padding:5px}.dance-tutorial b{width:22px;height:22px;font-size:12px}.dance-tutorial span{display:none}.dance-tips{padding:0 7px}.dance-tips article{padding:13px}}
@media(max-height:520px) and (orientation:landscape){.dance-overlay{gap:5px;padding:5px 18px}.dance-overlay-heading img{width:62px;height:82px}.dance-overlay-heading h2{font-size:23px}.dance-overlay-heading p{display:none}.dance-level-grid{gap:7px}.dance-level-card{min-height:84px;padding:7px 3px}.dance-level-card strong{font-size:25px}.dance-level-card span{font-size:8px}.dance-level-card em{font-size:5px;margin-top:4px}.dance-overlay-actions button{min-height:35px;font-size:10px}.dance-overlay-actions a{font-size:8px}.dance-hud>div{min-height:39px}.dance-track{top:19%;bottom:3%}.calinou-dancer{height:72%}}
@media(prefers-reduced-motion:reduce){.dance-hero:before,.stage-glow,.stage-led i,.dance-aura,.dance-overlay-heading img{animation:none!important}}