.rhythm-game{position:relative;width:min(100%,520px);margin:0 auto;color:#263747}
.rhythm-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.rhythm-hud>div{padding:7px 5px;border:2px solid #9aabc6;border-radius:14px;background:#f3f6ff;box-shadow:0 3px 0 #c6d1e1;text-align:center}
.rhythm-hud small{display:block;font-size:11px;font-weight:800;color:#5d6e85}
.rhythm-hud strong{display:block;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.rhythm-track-label{margin:0 0 8px;text-align:center;color:#435672;font-size:14px;font-weight:900}
.rhythm-stage{position:relative;overflow:hidden;height:310px;border:4px solid #293c62;border-radius:21px;background:radial-gradient(circle at 50% -5%,#78689d 0,#2d3c65 46%,#152842 100%);box-shadow:inset 0 0 0 3px #ffffff2b,0 6px 0 #7784a7;isolation:isolate}
.rhythm-stage:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 32px,#ffffff08 33px 34px),radial-gradient(circle at 15% 6%,#ffdfb644 0 23px,transparent 24px),radial-gradient(circle at 82% 8%,#e6a8df44 0 28px,transparent 29px);pointer-events:none}
.rhythm-lanes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr)}
.rhythm-lane{position:relative;border-right:2px solid #ffffff26;background:linear-gradient(180deg,#ffffff08,#ffffff02)}
.rhythm-lane:last-child{border-right:0}
.rhythm-lane span{position:absolute;top:10px;left:50%;transform:translateX(-50%);color:#e2e8fbaf;font-size:12px;font-weight:900}
.rhythm-lane-0{box-shadow:inset 0 -50px 60px #f9708b18}.rhythm-lane-1{box-shadow:inset 0 -50px 60px #f5c77118}.rhythm-lane-2{box-shadow:inset 0 -50px 60px #77dbcb18}.rhythm-lane-3{box-shadow:inset 0 -50px 60px #91acf918}
.rhythm-notes{position:absolute;inset:0;pointer-events:none}
.rhythm-note{position:absolute;z-index:2;width:19%;height:27px;transform:translate(-50%,-50%);border:3px solid #ffffffbb;border-radius:10px;box-shadow:0 4px 0 #121e38a8,inset 0 2px 0 #ffffff9a;will-change:top}
.rhythm-note[hidden]{display:none}
.rhythm-note-0{background:linear-gradient(#ff9da8,#ee5f7f)}.rhythm-note-1{background:linear-gradient(#ffe3a3,#efba60)}.rhythm-note-2{background:linear-gradient(#a2efe3,#50cbb6)}.rhythm-note-3{background:linear-gradient(#b9c9ff,#809de9)}
.rhythm-judge{position:absolute;top:79%;left:0;right:0;z-index:1;height:5px;background:#f6fafc;box-shadow:0 0 0 3px #ecf8ff47,0 0 15px #ffffffca}
.rhythm-cue{position:absolute;z-index:3;top:31%;left:50%;transform:translateX(-50%);min-width:115px;padding:7px 16px;border:2px solid #fff6;border-radius:18px;background:#192d58c9;box-shadow:0 5px 15px #111b38ad;color:#fff;font-size:28px;font-weight:900;text-align:center}
.rhythm-cue.is-hidden{display:none}
.rhythm-progress{overflow:hidden;height:9px;margin:12px 0 12px;border-radius:10px;background:#d4dded}
.rhythm-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#73cec3,#779dea,#f2b46e)}
.rhythm-pads{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.rhythm-pad{display:grid;place-items:center;min-height:68px;padding:5px;border:2px solid #43516c;border-radius:17px;color:#1d3349;font-family:inherit;font-size:21px;font-weight:900;cursor:pointer;touch-action:manipulation;box-shadow:0 5px 0 #8690a7}
.rhythm-pad-0{background:#ff9eab}.rhythm-pad-1{background:#f9d28b}.rhythm-pad-2{background:#8ee2d2}.rhythm-pad-3{background:#a9bcf9}
.rhythm-pad kbd{display:block;padding:0 5px;border:1px solid #4554688a;border-radius:5px;background:#ffffff8c;font-family:inherit;font-size:11px;font-weight:900;line-height:1.4}
.rhythm-pad:disabled{opacity:.56;cursor:default}
.rhythm-pad.is-struck{animation:rhythm-strike .2s ease}
.rhythm-game .toy-status{min-height:2.6em;margin:9px 0;text-align:center}
.rhythm-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rhythm-controls .button{min-width:0;padding:7px 2px;font-size:14px;white-space:nowrap}
.rhythm-overlay{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:18px;border-radius:19px;background:#17254baa;backdrop-filter:blur(2px)}
.rhythm-overlay[hidden]{display:none}
.rhythm-dialog{width:min(100%,355px);padding:22px 19px;border:3px solid #536c99;border-radius:21px;background:#fbfbf5;box-shadow:0 8px 0 #1d2d5099;text-align:center}
.rhythm-dialog h2{margin:0 0 10px;color:#344c6b;font-size:25px}
.rhythm-dialog p{margin:0 0 17px;color:#455c70;font-size:15px;line-height:1.6}
.rhythm-dialog .button{min-width:145px}
.rhythm-game button:focus-visible{outline:3px solid #f27965;outline-offset:2px}
@keyframes rhythm-strike{50%{transform:translateY(4px) scale(.96);box-shadow:0 1px 0 #8690a7}}
@media(max-width:480px){.toy-page:has(.rhythm-game) .toy-card{padding:14px 11px}.toy-page:has(.rhythm-game) .toy-card h1{font-size:22px}.toy-page:has(.rhythm-game) .toy-instruction{margin:5px 0 10px;line-height:1.4}.rhythm-hud{gap:6px;margin-bottom:8px}.rhythm-hud>div{padding:5px 3px}.rhythm-hud strong{font-size:16px}.rhythm-track-label{font-size:13px}.rhythm-stage{height:clamp(270px,40dvh,330px)}.rhythm-pad{min-height:61px;font-size:19px}.rhythm-dialog{padding:19px 15px}.rhythm-dialog h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.rhythm-pad.is-struck{animation:none}}