*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,"Microsoft YaHei",sans-serif;color:#342e50}body{background:#dad5e6;display:grid;place-items:center}.game{position:relative;width:100%;max-width:480px;height:100dvh;min-height:580px;overflow:hidden;background:radial-gradient(ellipse at 65% 50%,#fff9ee 0%,transparent 46%),linear-gradient(150deg,#eee6fc,#f6f1f7 60%,#e9e4f6);isolation:isolate}header{position:absolute;z-index:3;top:max(24px,env(safe-area-inset-top));left:28px;right:28px;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:16px}.brand-mark{font-size:35px;color:#7c63b2}.brand small{display:block;font-size:8px;letter-spacing:2.2px;margin-top:5px;opacity:.6}button{cursor:pointer;font:inherit;border:0;touch-action:manipulation}#pause{width:40px;height:40px;border:1px solid #fff;background:#ffffff70;border-radius:50%;font-size:18px;color:#574772}.intro{position:absolute;top:13%;left:30px;z-index:2;pointer-events:none}.tag{font-size:10px;letter-spacing:1px;display:inline-flex;align-items:center;gap:7px;border:1px solid #bdb0d554;border-radius:18px;padding:7px 11px}.tag i{width:5px;height:5px;border-radius:50%;background:#9c7ad0}h1{font-size:clamp(32px,9vw,43px);line-height:1.24;letter-spacing:-2px;margin:19px 0 10px;font-weight:800}h1 span{color:#a186d0}.intro p{font-size:12px;color:#8b819a;letter-spacing:1px;margin:0}.scene{position:absolute;inset:0;z-index:1}.halo{position:absolute;width:78%;aspect-ratio:1;left:11%;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,#ffffffa0,#fff4);border:1px solid #ffffffd0;box-shadow:0 0 70px #ffffff55}.halo:after{content:"";position:absolute;inset:14px;border:1px dashed #c8b8df60;border-radius:50%}canvas{display:block;width:100%;height:100%;position:absolute;z-index:2;touch-action:manipulation}.floor{position:absolute;left:30%;width:40%;height:18px;top:69%;background:#7e6d9233;filter:blur(13px);border-radius:50%}.spark{position:absolute;color:#b79cd7;font-size:26px}.one{left:13%;top:42%}.two{right:12%;top:61%;font-size:40px}#status{position:absolute;top:50%;left:0;width:100%;text-align:center;z-index:3;font-size:12px;color:#88799c;padding:20px}footer{position:absolute;bottom:max(23px,env(safe-area-inset-bottom));left:28px;right:28px;z-index:3;text-align:center}.hint{display:flex;align-items:center;justify-content:center;gap:6px;color:#8b809a;font-size:10px;letter-spacing:1px;margin-bottom:15px}.dot{width:5px;height:5px;background:#a895c4;border-radius:50%}.bounce{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 24px;border-radius:19px;background:#756098;color:white;box-shadow:0 8px 18px #79648e24;font-weight:bold;font-size:15px;transition:transform .15s,background .15s}.bounce:active{transform:scale(.96);background:#645083}.bounce:disabled{opacity:.5;cursor:wait}.bounce span{font-size:23px;line-height:1}footer p{font-size:10px;color:#a298af;margin:12px 0 27px}.bottom{display:flex;justify-content:space-between;border-top:1px solid #c6bbd740;padding-top:16px;font-size:9px;letter-spacing:1px;color:#9a8dab}@media(min-width:600px){.game{max-height:960px;box-shadow:0 20px 80px #63527b20}}@media(max-height:700px){.intro{top:12%}h1{font-size:32px;margin-top:12px}.intro p{display:none}footer p{margin-bottom:14px}.bounce{padding:14px 22px}}@media(max-height:580px){body{overflow:auto}}
/* Animated geometric world, layered behind the central model. */
.geometry-background{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(140deg,#e9dafa,#f8e9db 48%,#d9eee8);background-size:220% 220%;animation:world-colors 18s ease-in-out infinite alternate}
.color-cloud{position:absolute;inset:-25%;background:radial-gradient(ellipse at 22% 30%,#b89ce94d,transparent 43%),radial-gradient(ellipse at 78% 75%,#e5ad864d,transparent 43%),radial-gradient(ellipse at 70% 10%,#9dcac640,transparent 40%);animation:cloud-drift 22s ease-in-out infinite alternate}
.geo{position:absolute;width:min(var(--size,180px),70vw);height:min(var(--size,180px),70vw);left:var(--x);top:var(--y);opacity:.68;background:linear-gradient(135deg,var(--color),var(--color) 48%,#ffffff80);animation:geometry-morph var(--duration,9s) ease-in-out infinite alternate;animation-delay:var(--delay,0s);will-change:transform,clip-path}
.g1{--x:-15%;--y:31%;--size:245px;--color:#a177d8;--duration:8s;--delay:-3s}
.g2{--x:62%;--y:20%;--size:215px;--color:#eda16e;--duration:10s;--delay:-7s}
.g3{--x:65%;--y:55%;--size:185px;--color:#61b5a6;--duration:9s;--delay:-2s}
.g4{--x:-5%;--y:72%;--size:155px;--color:#8b79ce;--duration:11s;--delay:-8s}
.g5{--x:42%;--y:4%;--size:95px;--color:#d788b6;--duration:7s;--delay:-5s}
.g6{--x:49%;--y:85%;--size:115px;--color:#dfb13f;--duration:9.5s;--delay:-4s}
.geo-ring{position:absolute;border:4px solid #a487cd88;left:var(--x);top:var(--y);width:min(var(--size),75vw);height:min(var(--size),75vw);border-radius:50%;animation:ring-shift 8s ease-in-out infinite alternate;animation-delay:var(--delay)}
.r1{--x:48%;--y:34%;--size:215px;--delay:-2s;border-color:#b98c7088}
.r2{--x:-18%;--y:52%;--size:255px;--delay:-5s}
.r3{--x:64%;--y:76%;--size:135px;--delay:-3s;border-color:#60a39099}
.halo{background:radial-gradient(circle,#ffffff40,#fff1);border-color:#ffffff90;box-shadow:none}.halo:after{animation:halo-turn 35s linear infinite}.spark{animation:spark-drift 6s ease-in-out infinite alternate}.two{animation-delay:-3s}
.paused .geometry-background,.paused .geometry-background *,.paused .halo:after,.paused .spark{animation-play-state:paused}
@keyframes world-colors{0%{background-position:0% 20%}50%{background-position:80% 50%}100%{background-position:100% 90%}}
@keyframes cloud-drift{from{transform:translate(-3%,-2%) rotate(-8deg)}to{transform:translate(4%,3%) rotate(16deg)}}
@keyframes geometry-morph{0%{transform:translate(-20px,20px) rotate(-20deg) scale(.7);clip-path:polygon(50% 0%,75% 25%,100% 50%,75% 75%,50% 100%,25% 75%,0% 50%,25% 25%);border-radius:0;filter:hue-rotate(-12deg)}33%{transform:translate(45px,-65px) rotate(90deg) scale(1.18);clip-path:polygon(50% 0%,67% 33%,100% 100%,75% 100%,50% 100%,25% 100%,0% 100%,33% 33%);border-radius:0;filter:hue-rotate(12deg)}66%{transform:translate(-35px,55px) rotate(200deg) scale(.85);clip-path:polygon(25% 0%,75% 0%,100% 25%,100% 75%,75% 100%,25% 100%,0% 75%,0% 25%);border-radius:45%;filter:hue-rotate(30deg)}100%{transform:translate(35px,-35px) rotate(330deg) scale(1.25);clip-path:polygon(0% 0%,50% 0%,100% 0%,100% 50%,100% 100%,50% 100%,0% 100%,0% 50%);border-radius:4%;filter:hue-rotate(-5deg)}}
@keyframes ring-shift{0%{transform:translate(15px,-35px) rotate(-35deg) scale(.65);border-radius:50%}50%{transform:translate(-40px,15px) rotate(65deg) scale(1.2);border-radius:4%}100%{transform:translate(30px,50px) rotate(160deg) scale(.9);border-radius:30%}}
@keyframes halo-turn{to{transform:rotate(360deg)}}
@keyframes spark-drift{to{transform:translateY(-12px) rotate(35deg);opacity:.45}}
@media(prefers-reduced-motion:reduce){.geometry-background,.geometry-background *,.halo:after,.spark{animation:none}}
canvas{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}canvas.grabbing{cursor:grabbing}
[hidden]{display:none!important}.header-controls{display:flex;gap:8px;align-items:center}#music-toggle{width:40px;height:40px;border:1px solid #fff;background:#ffffff80;border-radius:50%;font-size:23px;color:#765399}.music-start{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 24px;border-radius:24px;background:#756098;color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 18px #79648e24}.music-start:disabled{opacity:.5}footer{pointer-events:none}footer button{pointer-events:auto}footer p{margin-top:13px}.music-playing footer p{color:#796987}.music-playing #music-toggle{animation:music-glow 1.2s ease-in-out infinite alternate}#note-layer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}.music-note{position:absolute;width:52px;height:52px;margin:-26px 0 0 -26px;display:grid;place-items:center;border-radius:50%;border:2px solid #ffffffe0;background:linear-gradient(145deg,#fff4d9,#dcc5ff);box-shadow:0 4px 18px #78579845,0 0 0 5px #ffffff40;color:#7651a8;font-size:32px;line-height:1;pointer-events:auto;touch-action:manipulation;filter:hue-rotate(var(--note-hue));animation:note-arrive 1.65s ease-out both;transform-origin:center}.music-note:active{background:#fff1c7}.music-note:focus-visible{outline:3px solid #7651a8;outline-offset:5px}.note-hit{position:absolute;margin:-25px 0 0 -25px;width:50px;height:50px;text-align:center;font-size:38px;color:#c89035;animation:note-spark .6s ease-out both;pointer-events:none}@keyframes note-arrive{0%{opacity:0;transform:scale(.35) rotate(-18deg)}12%{opacity:1;transform:scale(1.08) rotate(8deg)}22%{opacity:1;transform:scale(.95) rotate(-4deg)}40%,75%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.75) rotate(12deg)}}@keyframes note-spark{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(2) rotate(45deg)}}@keyframes music-glow{to{background:#eedbff;box-shadow:0 0 12px #be99df66}}@media(prefers-reduced-motion:reduce){.music-note{animation:none}.note-hit{animation:none}.music-playing #music-toggle{animation:none}}
/* Two falling-note lanes flank the central soft model. */
.rhythm-lane{position:absolute;top:max(230px,31%);bottom:170px;width:56px;pointer-events:auto;touch-action:none;border:1px solid #ffffffb0;border-radius:30px;background:linear-gradient(180deg,#ffffff05,#d8c8ee35 60%,#aa89d33b);box-shadow:inset 0 0 18px #ffffff75;overflow:hidden;cursor:pointer}.left-lane{left:8px}.right-lane{right:8px;background:linear-gradient(180deg,#ffffff05,#d6ebe635 60%,#7eb7ac3b)}.rhythm-lane:before{content:'';position:absolute;left:50%;top:0;bottom:42px;width:1px;background:linear-gradient(transparent,#af91cb70)}.lane-notes{position:absolute;inset:0;pointer-events:none}.falling-note{position:absolute;left:50%;top:0;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:2px solid #fff;background:linear-gradient(145deg,#fff7e2,#caacf0);box-shadow:0 3px 12px #80639750;color:#7651a8;font-size:28px;line-height:1;will-change:transform}.right-lane .falling-note{background:linear-gradient(145deg,#effffb,#9dd1c4);color:#3d887a}.lane-hit{position:absolute;left:3px;bottom:16px;width:48px;height:54px;border:2px solid #ffffffed;border-radius:50%;background:#f0e5ffc0;color:#7651a8;box-shadow:0 0 0 3px #b58bd43b;font-size:25px;line-height:1;touch-action:none}.right-lane .lane-hit{background:#ddf4edc0;color:#3d887a;box-shadow:0 0 0 3px #7cb5a63b}.lane-hit small{display:block;font-size:8px;margin-top:3px;letter-spacing:1px}.lane-hit.hit-flash{animation:target-flash .3s ease-out}.lane-judgement{position:absolute;bottom:88px;left:0;right:0;text-align:center;font-size:12px;font-weight:800;color:#9f693a;z-index:3;text-shadow:0 1px 4px #fff}.lane-judgement[data-grade=miss]{color:#9c738b}.lane-judgement[data-grade=good]{color:#518a78}.rhythm-stats{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;margin:0 0 12px;color:#7c668e}.rhythm-stats strong{font-size:18px;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#644a80;margin-left:5px}#rhythm-combo{font-weight:700}.intro{left:82px;right:70px}h1{font-size:clamp(25px,7vw,34px)}@keyframes target-flash{0%{transform:scale(.85);background:#fff;box-shadow:0 0 0 12px #d9b6f480}100%{transform:scale(1)}}@media(max-height:700px){.rhythm-lane{top:215px;bottom:155px}.intro{top:12%}.intro h1{font-size:25px}.intro .tag{font-size:9px;padding:6px 8px}.rhythm-stats{margin-bottom:8px}}@media(prefers-reduced-motion:reduce){.lane-hit.hit-flash{animation:none}}
/* Full-height side tracks with broad luminous note bars and bottom hit pads. */
.game{--lane-width:clamp(70px,22vw,96px)}.rhythm-lane{top:0;bottom:0;width:var(--lane-width);border-radius:0;border:0;overflow:hidden;background:linear-gradient(180deg,#8567ab08 0%,#9b76c122 32%,#9a71c13b 75%,#7953a959 100%);box-shadow:inset -1px 0 #ffffffbd,inset 0 -70px 90px #a782c429;touch-action:none}.left-lane{left:0}.right-lane{right:0;background:linear-gradient(180deg,#4a9f9708 0%,#66aea422 32%,#61a99f3b 75%,#3b8b8059 100%);box-shadow:inset 1px 0 #ffffffbd,inset 0 -70px 90px #6fb1a629}.rhythm-lane:before{top:0;bottom:0;width:2px;background:linear-gradient(#ffffff00,#ffffffb0 25%,#ffffff60 80%,#ffffff00)}.rhythm-lane:after{content:'';position:absolute;left:0;right:0;bottom:calc(max(20px,env(safe-area-inset-bottom)) + 39px);height:2px;background:#fff;box-shadow:0 0 15px 4px #e7ccff99;pointer-events:none}.right-lane:after{box-shadow:0 0 15px 4px #bbffed99}.falling-note{width:calc(100% - 12px);height:34px;border-radius:9px;border:1px solid #fffffff0;background:linear-gradient(180deg,#f9f3ff,#c19de8 55%,#a979d6);box-shadow:0 0 16px #b580e67a,inset 0 2px 0 #fff9;color:#fff;font-size:24px;font-weight:700;text-shadow:0 1px 5px #734caa;letter-spacing:2px}.falling-note:before,.falling-note:after{content:'';position:absolute;top:12px;width:15%;height:2px;border-radius:2px;background:#ffffffaa}.falling-note:before{left:9%}.falling-note:after{right:9%}.right-lane .falling-note{background:linear-gradient(180deg,#f0fffc,#92d6c8 55%,#58b5a3);color:#fff;text-shadow:0 1px 5px #368777;box-shadow:0 0 16px #6cc6b57a,inset 0 2px 0 #fff9}.lane-hit{left:6px;bottom:max(20px,env(safe-area-inset-bottom));width:calc(100% - 12px);height:80px;border-radius:20px;border:2px solid #fffd;background:linear-gradient(160deg,#f6eaff,#ba94dd);color:#fff;box-shadow:0 5px 20px #77549c45,inset 0 2px 0 #ffffffb0;font-size:34px;text-shadow:0 2px 5px #8b63b4;z-index:2}.right-lane .lane-hit{background:linear-gradient(160deg,#e3fff7,#77bfae);color:#fff;box-shadow:0 5px 20px #388a7945,inset 0 2px 0 #ffffffb0;text-shadow:0 2px 5px #498f80}.lane-hit small{font-size:9px;letter-spacing:2px;margin-top:5px;color:#fff}.lane-judgement{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 103px);font-size:15px;letter-spacing:2px}.game header{left:calc(var(--lane-width) + 12px);right:calc(var(--lane-width) + 12px);gap:7px;align-items:flex-start}.brand{font-size:12px;gap:5px}.brand-mark{font-size:25px}.brand small{font-size:6px;letter-spacing:1px}.header-controls{gap:4px}#music-toggle,#pause{width:29px;height:29px;font-size:16px;flex-shrink:0}.intro{left:calc(var(--lane-width) + 15px);right:calc(var(--lane-width) + 10px);top:15%}.intro h1{font-size:clamp(25px,7vw,33px)}.intro .tag{font-size:8px;letter-spacing:0;padding:6px 8px}.intro p{font-size:10px;letter-spacing:0}.game footer{left:calc(var(--lane-width) + 12px);right:calc(var(--lane-width) + 12px);bottom:max(27px,env(safe-area-inset-bottom))}.rhythm-stats{flex-direction:column;gap:5px;margin-bottom:10px}.rhythm-stats strong{font-size:19px}.hint{font-size:9px;letter-spacing:0;margin-bottom:10px}.music-start{width:100%;font-size:11px;padding:12px 7px;border-radius:16px}.game footer p{font-size:9px;line-height:1.6;margin:10px 0 13px}.bottom{font-size:8px;letter-spacing:0;padding-top:10px;gap:7px}.halo{width:58%;left:21%}.spark.one{left:24%}.spark.two{right:24%;font-size:25px}@media(max-height:700px){.rhythm-lane{top:0;bottom:0}.intro{top:14%}.intro h1{font-size:25px}.game footer p{margin-bottom:9px}.rhythm-stats{margin-bottom:8px}.hint{font-size:8px}}
.hold-note{z-index:2;overflow:visible}.hold-tail{position:absolute;bottom:50%;left:14%;width:72%;background:linear-gradient(90deg,#b589db99,#e8d0ffcc,#b589db99);border:1px solid #ffffffe0;border-bottom:0;border-radius:10px 10px 0 0;box-shadow:0 0 12px #bc8fea60;z-index:-1;pointer-events:none}.right-lane .hold-tail{background:linear-gradient(90deg,#6fbca899,#c1f4e8cc,#6fbca899);box-shadow:0 0 12px #71cbb760}.hold-tail:before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:13px;background:#fff9;border-radius:8px;border:1px solid #fff}.rhythm-lane.holding .hold-tail{background:#f7e9ffdf;box-shadow:0 0 16px #d3a4ff}.right-lane.holding .hold-tail{background:#e4fff7df;box-shadow:0 0 16px #8de8d0}.rhythm-lane.holding .lane-hit{background:#fff;color:#9b66c3;box-shadow:0 0 20px #d3a4ff,inset 0 0 12px #e4bcff}.right-lane.holding .lane-hit{color:#49967f;box-shadow:0 0 20px #8de8d0,inset 0 0 12px #b4f2df}
/* Enter in free interaction; rhythm is an explicit optional game mode. */
.mode-switch{display:flex;gap:5px;padding:4px;border-radius:19px;background:#ffffff8a;border:1px solid #ffffffbf;margin-bottom:14px;pointer-events:auto}.mode-switch button{flex:1;padding:11px 6px;border-radius:14px;font-size:11px;font-weight:700;color:#82728e;background:transparent;white-space:nowrap}.mode-switch button[aria-pressed=true]{color:#fff;background:#80629f;box-shadow:0 3px 10px #80629f30}.game[data-mode=free] #note-layer,.game[data-mode=free] .rhythm-stats,.game[data-mode=free] #music-start,.game[data-mode=free] #music-toggle{display:none!important}.game[data-mode=free] header{left:28px;right:28px}.game[data-mode=free] .brand{font-size:16px;gap:10px}.game[data-mode=free] .brand-mark{font-size:35px}.game[data-mode=free] .brand small{font-size:8px;letter-spacing:2px}.game[data-mode=free] #pause{width:40px;height:40px;font-size:18px}.game[data-mode=free] .intro{left:30px;right:28px;top:13%}.game[data-mode=free] h1{font-size:clamp(32px,9vw,43px)}.game[data-mode=free] .intro .tag{font-size:10px;padding:7px 11px;letter-spacing:1px}.game[data-mode=free] footer{left:28px;right:28px;bottom:max(23px,env(safe-area-inset-bottom))}.game[data-mode=free] .mode-switch button{font-size:14px;padding:14px 10px}.game[data-mode=free] .hint{font-size:10px;letter-spacing:1px}.game[data-mode=free] #mode-help{font-size:11px;line-height:1.7;margin:12px 0 20px}.game[data-mode=rhythm] .mode-switch{flex-direction:column;margin-bottom:10px}.game[data-mode=rhythm] .mode-switch button{padding:8px 5px}.game[data-mode=rhythm] .intro{top:12%}.game[data-mode=rhythm] h1{font-size:27px}@media(max-height:700px){.game[data-mode=rhythm] .intro h1{font-size:23px}.game[data-mode=rhythm] .mode-switch{margin-bottom:7px;gap:2px}.game[data-mode=rhythm] .mode-switch button{padding:6px 5px}.game[data-mode=rhythm] footer p{margin:6px 0}.game[data-mode=free] h1{font-size:32px}}
#character-toggle{width:29px;height:29px;flex-shrink:0;border:1px solid #fff;border-radius:50%;background:#ffffff80;color:#765399;font-size:20px}.game[data-mode=free] #character-toggle{width:40px;height:40px;font-size:23px}.character-picker{position:absolute;z-index:8;top:78px;left:22px;right:22px;padding:16px;background:#fffaf6f5;border:1px solid #fff;border-radius:20px;box-shadow:0 12px 40px #745c9a35}.character-picker p{margin:0 0 12px;font-size:13px;font-weight:700}.character-picker>div{display:flex;gap:10px}.character-picker button{flex:1;border:1px solid #d8c9e9;border-radius:14px;padding:16px 10px;background:#f5eefb;color:#79638d;font-size:14px}.character-picker button[aria-pressed=true]{background:#80629f;color:#fff;border-color:#80629f}#gif-character{display:none;position:absolute;left:50%;top:50%;width:88%;max-width:420px;height:50%;object-fit:contain;z-index:2;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transform:translate(-50%,-50%);will-change:transform}.game[data-character^=gif] #gif-character{display:block}.game[data-character^=gif] #canvas{display:none}.game[data-character^=gif][data-mode=rhythm] #gif-character{width:calc(100% - 2 * var(--lane-width));height:47%}.game[data-mode=rhythm] .header-controls{flex-wrap:wrap;justify-content:flex-end;max-width:65px}
/* Larger animated character in both game modes. */
#gif-character{width:110%;max-width:525px;height:62.5%}.game[data-character^=gif][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.25);height:58.75%}

/* Mobile background: only transform and opacity change; shapes are painted once. */
.geometry-background{animation:none;background-size:100% 100%;contain:layout paint}.color-cloud{display:none}.geo{animation:light-geometry var(--duration,12s) ease-in-out infinite alternate;clip-path:none;filter:none;background:var(--color);opacity:.48;will-change:transform;contain:paint}.g1{border-radius:22%;--duration:12s}.g2{clip-path:polygon(50% 0,100% 100%,0 100%);--duration:15s}.g3{border-radius:50%;--duration:14s}.g4{border-radius:10%;--duration:17s}.g5,.g6,.r2,.r3{display:none}.geo-ring{animation:light-ring 16s ease-in-out infinite alternate;border-radius:50%;will-change:transform}.floor{filter:none;background:radial-gradient(ellipse,#7e6d9228,transparent 70%)}.spark{animation:none}.r1{border-width:3px;opacity:.5}@keyframes light-geometry{from{transform:translate3d(-12px,20px,0) rotate(-25deg) scale(.82);opacity:.38}to{transform:translate3d(28px,-35px,0) rotate(135deg) scale(1.16);opacity:.62}}@keyframes light-ring{from{transform:translate3d(10px,-22px,0) rotate(0) scale(.8)}to{transform:translate3d(-25px,30px,0) rotate(150deg) scale(1.12)}}#gif-character{width:143%;max-width:683px;height:81.25%}.game[data-character^=gif][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.625);height:76.375%}@media(prefers-reduced-motion:reduce){.geo,.geo-ring{animation:none}}
/* Enlarge the default cartoon once more. */
#gif-character{width:171.6%;max-width:820px;height:97.5%}.game[data-character^=gif][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.95);height:91.65%}
/* Clean play screen: only character and mode controls remain. */
.game header,.game[data-mode=free] header{left:auto;right:max(16px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));z-index:7;justify-content:flex-end}.game .header-controls{max-width:none;flex-wrap:nowrap;gap:8px}.game .rhythm-stats,.game .hint,.game #mode-help,.game .bottom{display:none!important}.game .mode-switch{margin-bottom:0}.game[data-mode=rhythm] .music-start{margin-top:10px}.game[data-mode=free] footer{bottom:max(24px,env(safe-area-inset-bottom))}
/* Mode tabs stay identical in both modes, anchored to the game viewport. */
.game .mode-switch,.game[data-mode=free] .mode-switch,.game[data-mode=rhythm] .mode-switch{position:absolute;top:max(20px,env(safe-area-inset-top));left:16px;right:72px;height:48px;display:flex;flex-direction:row;align-items:stretch;gap:4px;padding:4px;margin:0;z-index:7;border-radius:17px;pointer-events:auto}.game .mode-switch button,.game[data-mode=free] .mode-switch button,.game[data-mode=rhythm] .mode-switch button{flex:1;min-width:0;padding:8px 5px;border-radius:12px;font-size:12px;line-height:20px;white-space:nowrap}.game[data-mode=free] #character-toggle,.game[data-mode=rhythm] #character-toggle{width:40px;height:40px;font-size:23px}.game header,.game[data-mode=free] header{top:calc(max(20px,env(safe-area-inset-top)) + 4px)}.game .header-controls{position:relative}.game #music-toggle{position:absolute;right:0;top:50px;width:40px;height:40px}.game .mode-switch~footer{pointer-events:none}
/* Narrower mode tabs and a 20% smaller animated character in both modes. */
.game .mode-switch,.game[data-mode=free] .mode-switch,.game[data-mode=rhythm] .mode-switch{left:28px;right:92px}#gif-character{width:137.28%;max-width:656px;height:78%}.game[data-character^=gif][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.56);height:73.32%}
/* Compact mode controls centered at the top in both modes. */
.game .mode-switch,.game[data-mode=free] .mode-switch,.game[data-mode=rhythm] .mode-switch{left:50%;right:auto;transform:translateX(-50%);width:min(52%,220px);height:44px;gap:3px;padding:3px}.game .mode-switch button,.game[data-mode=free] .mode-switch button,.game[data-mode=rhythm] .mode-switch button{padding:7px 3px;font-size:11px;line-height:20px}
/* Taller, narrower rhythm start control with more space below it. */
.game[data-mode=rhythm] #music-start{position:relative;bottom:32px;width:88%;min-height:54px;padding:17px 8px;margin-top:10px;border-radius:18px;line-height:20px}
#free-grid{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}#free-grid span{border-right:1px solid #ffffffa0;border-bottom:1px solid #ffffffa0;position:relative}#free-grid span:nth-child(3n){border-right:0}#free-grid span:nth-child(n+7){border-bottom:0}#free-grid span:after{content:'';position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .18s ease-out}#free-grid span.is-lit:after{opacity:.42;transition:none}.game[data-mode=rhythm] #free-grid{display:none}

/* Keep all original GIF frames; key only the green floor tint of character three. */
.game[data-character=gif-alt] #gif-character{filter:url(#remove-green-shadow)}.character-picker>div{gap:6px}.character-picker button{min-width:0;padding:16px 5px;font-size:12px}
/* Sitting character only: 20% smaller; original hair tones are protected in the filter. */
.game[data-character=gif-alt] #gif-character{width:109.824%;max-width:524.8px;height:62.4%}.game[data-character=gif-alt][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.248);height:58.656%}
/* Sitting character: a further 15% reduction in each mode. */
.game[data-character=gif-alt] #gif-character{width:93.3504%;max-width:446.08px;height:53.04%}.game[data-character=gif-alt][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.0608);height:49.8576%}
/* Keep controls outside any oversized header or character hit area. */
.game header,.game[data-mode=free] header{pointer-events:none}.game .header-controls button{pointer-events:auto}.game .mode-switch,.game[data-mode=free] .mode-switch,.game[data-mode=rhythm] .mode-switch{z-index:20;pointer-events:auto}.game .mode-switch button{pointer-events:auto;touch-action:manipulation}.character-picker{z-index:30}
#rhythm-countdown{position:absolute;z-index:12;left:50%;top:40%;transform:translate(-50%,-50%);font-size:clamp(80px,24vw,120px);font-weight:800;color:#765bb5;text-shadow:0 3px 0 #fff6dc,0 8px 32px #765bb533;pointer-events:none}.game[data-mode=free] #rhythm-countdown{display:none}
#rhythm-countdown{inset:0;transform:none;display:flex;align-items:center;justify-content:center;background:rgba(65,65,70,.42);color:#fff;text-shadow:0 3px 16px #0004;pointer-events:auto}#rhythm-countdown[hidden]{display:none}.lane-judgement{display:none!important}#rhythm-judgement{position:absolute;z-index:6;left:50%;top:73%;transform:translateX(-50%);font-size:clamp(26px,8vw,38px);font-weight:800;letter-spacing:1px;color:#765bb5;text-shadow:0 2px 0 #fff,0 4px 14px #fff8;pointer-events:none;white-space:nowrap}#rhythm-judgement[data-grade=perfect]{color:#b47c21}#rhythm-judgement[data-grade=good]{color:#469c92}#rhythm-judgement[data-grade=miss]{color:#bf7489}.game[data-mode=free] #rhythm-judgement{display:none}
.free-word{position:absolute;z-index:7;pointer-events:none;font-size:36px;font-weight:900;line-height:50px;white-space:nowrap;text-shadow:0 2px 0 #fff,0 4px 15px #fff9;transform:translate(-50%,-50%);animation:free-word-life 1s ease-out both}.game[data-mode=rhythm] .free-word{display:none}@keyframes free-word-life{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}22%,50%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,calc(-50% - 14px)) scale(.98)}}@media(prefers-reduced-motion:reduce){.free-word{animation-name:free-word-fade}@keyframes free-word-fade{0%,50%{opacity:1}100%{opacity:0}}}
#free-combo{position:absolute;z-index:6;left:50%;top:73%;transform:translateX(-50%);color:#efb72e;font-size:clamp(24px,7vw,34px);font-weight:900;white-space:nowrap;text-shadow:0 2px 0 #fff,0 4px 12px #a7742926;pointer-events:none}.game[data-mode=rhythm] #free-combo{display:none}
.carnival-side{display:none;position:absolute;z-index:1;top:50%;max-width:46%;object-fit:contain;pointer-events:none;transform:translate(-50%,-50%)}#carnival-left{left:17%}#carnival-right{left:83%}.game[data-carnival=true][data-character^=gif] .carnival-side{display:block}.game[data-character=gif-alt] .carnival-side{filter:url(#remove-green-shadow)}#carnival-meter{position:absolute;z-index:7;top:23%;left:22%;width:56%;pointer-events:none;color:#d49b17;text-align:center;font-size:19px;font-weight:900;text-shadow:0 1px 0 #fff}#carnival-meter[hidden]{display:none}.carnival-track{height:12px;margin-top:7px;border-radius:20px;background:#7c5d3a25;border:2px solid #fff9;overflow:hidden}.carnival-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f2bd30,#ffe77c);transform-origin:left center}.game[data-mode=rhythm] #carnival-meter,.game[data-mode=rhythm] .carnival-side{display:none}
#carnival-meter{top:18%}
.carnival-side,#carnival-meter{opacity:1;transition:opacity .65s ease-out}.game[data-carnival=ending][data-character^=gif] .carnival-side{display:block;opacity:0}.game[data-carnival=ending] #carnival-meter{opacity:0}
.game[data-mode=rhythm][data-carnival] #carnival-meter{display:block}.game[data-mode=rhythm][data-carnival][data-character^=gif] .carnival-side{display:block}
#free-grid span{border:0}#free-grid span:after{background:radial-gradient(ellipse at center,#fff8 0%,#fff3 48%,#fff0 80%);opacity:0;transition:opacity .4s ease-out}#free-grid span.is-lit:after{opacity:.3;transition:opacity .06s ease-out}
#free-grid span:after{background:radial-gradient(ellipse at center,#ffffffed 0%,#fffbd4b3 38%,#ffffff66 72%,#ffffff26 100%);box-shadow:inset 0 0 28px #ffffff7a;opacity:0;transition:opacity .42s ease-out}#free-grid span.is-lit:after{opacity:.78;transition:opacity .045s ease-out}
.game[data-mode=free][data-grid-lines=true] #free-grid span{border-right:1px solid #ffffffb3;border-bottom:1px solid #ffffffb3}.game[data-mode=free][data-grid-lines=true] #free-grid span:nth-child(3n){border-right:0}.game[data-mode=free][data-grid-lines=true] #free-grid span:nth-child(n+7){border-bottom:0}.picker-settings{margin-top:15px;padding-top:12px;border-top:1px solid #d8c9e97a}.picker-setting-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:transparent;padding:6px 0;color:#79638d;font-size:13px;text-align:left}.picker-setting-toggle i{position:relative;display:block;width:42px;height:25px;border-radius:20px;background:#d8cde3;transition:background .2s}.picker-setting-toggle i:after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;background:#fff;border-radius:50%;box-shadow:0 1px 4px #6d507d26;transition:transform .2s}.picker-setting-toggle[aria-checked=true] i{background:#9672bd}.picker-setting-toggle[aria-checked=true] i:after{transform:translateX(17px)}
.game-watermark{position:absolute;z-index:6;bottom:calc(18px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;user-select:none;color:#78648f;opacity:.62;text-align:center;white-space:nowrap;text-shadow:0 1px 2px #fff9}.game-watermark strong{font-size:17px;font-weight:700;letter-spacing:3px;padding-left:3px}.game-watermark small{font-size:8px;font-weight:600;letter-spacing:2px;padding-left:2px}
.carnival-shock{position:absolute;z-index:2;opacity:0;pointer-events:none;transform:translate(-50%,-50%);object-fit:contain;mix-blend-mode:screen;will-change:transform,opacity}@media(prefers-reduced-motion:reduce){.carnival-shock{display:none}}
.carnival-shock{mix-blend-mode:normal;filter:brightness(1.12) saturate(1.15);transform-origin:center center}
.carnival-shock{filter:brightness(1.04) saturate(1.05)}
.game[data-character=gif] #gif-character{width:109.824%;max-width:524.8px;height:62.4%}.game[data-character=gif][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * 1.248);height:58.656%}.game[data-character=gif-alt] #gif-character{width:74.68032%;max-width:356.864px;height:42.432%}.game[data-character=gif-alt][data-mode=rhythm] #gif-character{width:calc((100% - 2 * var(--lane-width)) * .84864);height:39.88608%}
.game,.game *{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.game img,.game canvas{-webkit-user-drag:none}
.game[data-character=gif] #gif-character,.game[data-character=gif][data-mode=rhythm] #gif-character{width:98.8416%;max-width:472.32px;height:56.16%}.game[data-character=gif-alt] #gif-character,.game[data-character=gif-alt][data-mode=rhythm] #gif-character{width:67.212288%;max-width:321.1776px;height:38.1888%}
.follow-gate{position:absolute;inset:0;z-index:30;background:#423b5266;display:flex;align-items:center;justify-content:center;padding:24px}.follow-gate[hidden]{display:none}.follow-gate-card{position:relative;width:100%;max-width:340px;padding:26px 22px 22px;border:1px solid #fff;border-radius:24px;background:#fffaf8;box-shadow:0 16px 50px #44314a30;text-align:center;color:#79638d}.follow-gate-close{position:absolute;right:12px;top:8px;background:transparent;color:#998ba8;font-size:27px;padding:4px 8px}.follow-gate-icon{font-size:40px;color:#d47f9c}.follow-gate-card h2{font-size:19px;margin:10px 0 12px;color:#70528d}.follow-gate-card p{font-size:13px;line-height:1.9;margin:0 0 12px}.follow-gate-card strong{color:#9c6baa}#follow-gate-message{min-height:44px;font-size:12px;color:#a08eaa}#follow-gate-go,#follow-gate-verify{display:block;width:100%;border-radius:14px;padding:13px 8px;font-size:14px;font-weight:bold;text-decoration:none}#follow-gate-go{background:#906db3;color:white;margin-bottom:9px}#follow-gate-verify{background:#efe7f6;color:#8b6aa4}#follow-gate-verify:disabled{opacity:.5}
.follow-gate-card{max-height:calc(100% - 12px);overflow-y:auto}.follow-gate-checklist{list-style:none;padding:10px 12px;margin:0 0 12px;text-align:left;border-radius:12px;background:#f4eef9;font-size:12px;line-height:2}.follow-gate-checklist li:before{content:"○";margin-right:8px;color:#baa9c9}.follow-gate-checklist li[data-state=true]{color:#45958a}.follow-gate-checklist li[data-state=true]:before{content:"✓";color:#45958a}.follow-gate-checklist li[data-state=false]:before{color:#ce8d9a}#follow-gate-video{display:block;width:100%;border-radius:14px;padding:13px 8px;font-size:14px;font-weight:bold;text-decoration:none;background:#f0dfeb;color:#a15f8a;margin-bottom:9px}
.rhythm-lane,.right-lane{background:linear-gradient(180deg,rgba(27,22,38,.24),rgba(27,22,38,.36) 60%,rgba(27,22,38,.52));box-shadow:inset -1px 0 #ffffff6b}.right-lane{box-shadow:inset 1px 0 #ffffff6b}.falling-note{width:calc(100% - 8px);height:46px;border:2px solid #fff;border-radius:9px;background:linear-gradient(180deg,#f4dcff,#c183ed 45%,#954cc8);box-shadow:0 0 19px #c682edb3,0 4px 8px #17062455,inset 0 3px 0 #fff9;color:#fff;font-size:29px;text-shadow:0 1px 3px #4e2379;letter-spacing:1px}.right-lane .falling-note{background:linear-gradient(180deg,#dcfff4,#69dec0 45%,#25ac8b);box-shadow:0 0 19px #5fffd1a6,0 4px 8px #053e3455,inset 0 3px 0 #fff9;text-shadow:0 1px 3px #146454}.falling-note:before,.falling-note:after{top:19px;width:14%;height:3px;background:#fff}.hold-tail{left:10%;width:80%;border:2px solid #fffffff2;border-bottom:0;background:linear-gradient(90deg,#9e5ddbbf,#e7bdfff0,#9e5ddbbf);box-shadow:0 0 13px #bf79ef8c}.right-lane .hold-tail{background:linear-gradient(90deg,#31bfa2bf,#b4ffe8f0,#31bfa2bf);box-shadow:0 0 13px #45e4ba8c}.lane-hit{transition:transform .06s ease-out,box-shadow .06s ease-out}.rhythm-lane.is-pressed .lane-hit{transform:translateY(2px) scale(.95);box-shadow:0 0 24px #e8bdffb3,inset 0 0 16px #fff9}.right-lane.is-pressed .lane-hit{box-shadow:0 0 24px #a2ffe1b3,inset 0 0 16px #fff9}.lane-hit.hit-flash{animation-duration:.18s}
/* Keep note movement on compositor transforms and retain matching visual hit sizes. */
.rhythm-lane,.right-lane{background:linear-gradient(180deg,rgba(27,22,38,.16),rgba(27,22,38,.25) 60%,rgba(27,22,38,.38))}
.lane-hit{left:4px;width:calc(100% - 8px);height:46px;border-radius:9px;font-size:29px;line-height:1;padding:0;box-sizing:border-box}.lane-hit small{display:none}.rhythm-lane:after{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 22px)}
.falling-note{will-change:transform;contain:layout style}.hold-tail{transform-origin:center bottom;will-change:transform}
/* Only expose the playfield while the challenge is running. */
.game:not(.music-playing) .rhythm-lane{visibility:hidden;pointer-events:none}
.rhythm-hit-burst{position:absolute;left:4px;bottom:max(20px,env(safe-area-inset-bottom));width:calc(100% - 8px);height:46px;box-sizing:border-box;border:3px solid #f4d9ff;border-radius:9px;box-shadow:0 0 12px #e8bdff;opacity:0;pointer-events:none;will-change:transform,opacity;z-index:4}.right-lane .rhythm-hit-burst{border-color:#c4ffed;box-shadow:0 0 12px #a2ffe1}
@media(prefers-reduced-motion:reduce){.rhythm-hit-burst{display:none}}
/* Animate one cached SVG surface on touch screens, instead of repainting its paths. */
@keyframes geometry-surface-drift{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(4px,-7px,0) rotate(1deg)}}
@media(pointer:coarse){.game .geometry-background .pattern-scene [class^="ambient-"]{animation:none!important}.geometry-background .pattern-scene>svg{animation:geometry-surface-drift 14s ease-in-out infinite paused;transform-origin:center}.game .geometry-background .pattern-scene{contain:layout style}}
.game[data-mode=rhythm] .geometry-background .pattern-scene [class^="ambient-"]{animation:none!important}
.game[data-mode=rhythm] .geometry-background .pattern-scene>svg{animation:geometry-surface-drift 14s ease-in-out infinite paused;transform-origin:center}
.game[data-background="0"] .pattern-0>svg,.game[data-background="1"] .pattern-1>svg,.game[data-background="2"] .pattern-2>svg,.game[data-background="3"] .pattern-3>svg,.game[data-background="4"] .pattern-4>svg,.game[data-background="5"] .pattern-5>svg,.game[data-background="6"] .pattern-6>svg,.game[data-background="7"] .pattern-7>svg,.game[data-background="8"] .pattern-8>svg{animation-play-state:running}
.game[data-mode=rhythm] .falling-note,.game[data-mode=rhythm] .hold-tail{box-shadow:0 0 8px #e4c3ff99,inset 0 2px 0 #ffffff99}.game[data-mode=rhythm] .right-lane .falling-note,.game[data-mode=rhythm] .right-lane .hold-tail{box-shadow:0 0 8px #a2ffe199,inset 0 2px 0 #ffffff99}
@media(prefers-reduced-motion:reduce){.game .geometry-background .pattern-scene>svg{animation:none!important}}
/* Keep the portrait playfield inside tablet, landscape and folding viewports. */
html,body{width:100%;height:100%;overflow:hidden}body{display:flex;align-items:center;justify-content:center}
.game{width:100%;max-width:560px;height:100vh;height:100dvh;min-height:0;max-height:100vh;max-height:100dvh;flex:none}
.character-picker{max-height:calc(100% - 92px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain}
@media(min-aspect-ratio:1/1){.game{width:min(100vw,72vh);width:min(100vw,72dvh)}}
@media(max-height:600px){.game .mode-switch{top:max(8px,env(safe-area-inset-top));height:40px;width:min(56%,220px)}.game header,.game[data-mode=free] header{top:calc(max(8px,env(safe-area-inset-top)) + 2px);right:16px}.game .mode-switch button,.game[data-mode=free] .mode-switch button,.game[data-mode=rhythm] .mode-switch button{padding:5px 3px}.game[data-mode=rhythm] .music-start{min-height:48px;padding:10px 18px}.character-picker{top:58px;max-height:calc(100% - 70px)}.game-watermark{bottom:max(6px,env(safe-area-inset-bottom))}.game-watermark strong{font-size:13px}.game-watermark small{font-size:7px}#carnival-meter{top:19%;font-size:15px}.carnival-track{height:9px}}
.follow-gate-checklist li:after{content:attr(data-result);float:right;font-size:11px;color:#998ca5}.follow-gate-checklist li[data-state=true]:after{color:#45958a}.follow-gate-checklist li[data-state=false]:after{color:#ba7487}
#character-placeholder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:98.8416%;max-width:472.32px;height:56.16%;object-fit:contain;z-index:2;pointer-events:none}.game[data-character=gif-alt] #character-placeholder{width:67.212288%;max-width:321.1776px;height:38.1888%}.game[data-character=model] #character-placeholder{display:none}#status{z-index:4}
#character-picker .character-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}#character-picker .character-card{position:relative;display:grid;place-items:center;min-width:0;aspect-ratio:1;padding:5px;overflow:hidden;border:2px solid #e3d6ec;border-radius:17px;background:linear-gradient(145deg,#faf3ff,#f5eeea);touch-action:manipulation}#character-picker .character-card img{display:block;width:100%;height:100%;max-height:150px;object-fit:contain;pointer-events:none}#character-picker .character-card[aria-pressed=true]{background:linear-gradient(145deg,#eee0ff,#e9f6f0);border-color:#9270b6;box-shadow:0 0 0 2px #9270b61c}#character-picker .character-card[aria-pressed=true]:after{content:'✓';position:absolute;right:5px;top:5px;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#9270b6;color:#fff;font-size:14px;font-weight:bold;box-shadow:0 1px 4px #76539933}#character-picker .character-card:active{transform:scale(.97)}#character-picker .character-card:focus-visible{outline:3px solid #9270b6;outline-offset:2px}
.game[data-character=gif-four] #gif-character,.game[data-character=gif-four] #character-placeholder{width:98.8416%;max-width:472.32px;height:56.16%}.game[data-character=gif-five] #gif-character,.game[data-character=gif-five] #character-placeholder{width:67.212288%;max-width:321.1776px;height:38.1888%}
.game[data-character=gif-five] #gif-character,.game[data-character=gif-five][data-mode=rhythm] #gif-character,.game[data-character=gif-five] #character-placeholder{width:80.6547456%;max-width:385.41312px;height:45.82656%}
.game[data-character=gif-four][data-mode=rhythm] #gif-character{width:98.8416%;max-width:472.32px;height:56.16%}
#character-picker .character-coming-soon{border-style:dashed;border-color:#d8cbe5;background:#f7f1fa;color:#a391b2;cursor:default;box-shadow:none}#character-picker .character-coming-soon span{font-size:clamp(12px,3.3vw,16px);font-weight:600;letter-spacing:1px}#character-picker .character-coming-soon:active{transform:none}
.game[data-character=gif-five] #gif-character,.game[data-character=gif-five][data-mode=rhythm] #gif-character,.game[data-character=gif-five] #character-placeholder{width:88.115309568%;max-width:421.0638336px;height:50.0655168%}
#gif-character,#character-placeholder{transition:left .4s ease-out}.game[data-character=gif-four][data-carnival] #gif-character,.game[data-character=gif-four][data-carnival] #character-placeholder{left:30%}.game[data-character=gif-four][data-carnival] #carnival-left,.game[data-character=gif-four] #carnival-shock-left{display:none!important}.game[data-character=gif-four][data-carnival] #carnival-right{left:73%}
.game[data-character=gif-four][data-carnival] #gif-character,.game[data-character=gif-four][data-carnival] #character-placeholder{left:34%}.game[data-character=gif-four][data-carnival] #carnival-right{left:66%}
.game[data-character=gif-four][data-carnival] #carnival-right{max-width:none}
/* In role four's duet, role two appears in front at overlaps. */
.game[data-character=gif-four][data-carnival] #carnival-right{z-index:3}


.game[data-character=gif-five] #gif-character,.game[data-character=gif-five] #character-placeholder,.game[data-character=gif-five] .carnival-side{top:calc(50% - 30px)}