/* 「ふたりの音あそび」: two lanes (left = the cat's paw, right = the fairy's light), marks falling to a line at 80%. */
#rhythm-dialog{max-width:560px;padding:28px;overflow:auto}#rhythm-dialog h2{margin-bottom:10px;padding-right:22px;font-size:25px}
.rhythm-intro{font-size:15px!important;line-height:1.8;margin:0 0 12px}
.rhythm-best{font-size:12px!important;line-height:1.8;color:var(--muted);margin-bottom:12px}
.rhythm-options{margin-bottom:16px}.rhythm-options>label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px}.rhythm-options input[type=checkbox]{width:20px;height:20px;accent-color:var(--green);flex:none}.rhythm-options>small{display:block;font-size:12px;line-height:1.7;color:var(--muted);padding-left:30px}
.rhythm-tune-open{margin-top:10px;border:1px solid #cbd2bd;border-radius:12px;padding:8px 14px;min-height:40px;font-size:13px;background:#fffdf4;color:#527152}
.rhythm-tune{margin-top:10px;padding:14px;border-radius:14px;background:#f6f0e0;border:1px solid #e6dcc2;display:grid;gap:10px}.rhythm-tune p{font-size:13px!important;line-height:1.7;margin:0}
.rhythm-tune-row{display:grid;grid-template-columns:auto 1fr;gap:10px}.rhythm-tune-row .quiet-button{margin:0;width:auto;padding:0 16px;border:1px solid #d8cfb4;border-radius:10px;background:#fffdf6;color:#4b4a36}
.rhythm-tune-tap{min-height:64px;border:0;border-radius:14px;background:#e9dcb4;color:#4b4a36;font-size:18px;font-weight:600;touch-action:none;user-select:none;-webkit-user-select:none}.rhythm-tune-tap:not(:disabled){background:#f1c86a}
.rhythm-tune-slider{display:flex;justify-content:space-between;font-size:13px}.rhythm-tune input[type=range]{width:100%;accent-color:var(--green)}
.rhythm-progress{width:100%;height:6px;margin-bottom:8px;accent-color:#c49a3a}
.rhythm-stage{position:relative;height:320px;overflow:hidden;border:1px solid #cdbf96;border-radius:16px;background:#3b3527 url('./assets/room.png') center 60%/cover;isolation:isolate;touch-action:none}
.rhythm-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(#1c1d2bb8,#2b2a2690 60%,#1f1a14c0);z-index:0}
.rhythm-lane{position:absolute;top:0;bottom:0;width:50%;z-index:1}.rhythm-lane.lane-0{left:0;border-right:1px dashed #fff3d040}.rhythm-lane.lane-1{right:0}
.rhythm-lane.lane-0{background:linear-gradient(90deg,#f0a86010,#f0a86022 50%,#f0a86010)}.rhythm-lane.lane-1{background:linear-gradient(90deg,#fff4b010,#fff4b022 50%,#fff4b010)}
.rhythm-notes{position:absolute;inset:0;z-index:4;pointer-events:none}
.rhythm-note{position:absolute;top:-22px;left:25%;width:44px;height:44px;border-radius:50%;will-change:transform}
.rhythm-note.lane-0{background:radial-gradient(circle at 50% 58%,#fff4e8 0 16%,transparent 17%),radial-gradient(circle at 32% 34%,#fff4e8 0 9%,transparent 10%),radial-gradient(circle at 50% 26%,#fff4e8 0 9%,transparent 10%),radial-gradient(circle at 68% 34%,#fff4e8 0 9%,transparent 10%),radial-gradient(circle,#f0a060 0 62%,#c2703a 63% 70%,transparent 71%);box-shadow:0 0 14px #f0a06099}
.rhythm-note.lane-1{left:75%;background:radial-gradient(circle,#fffbe0 0 22%,#ffe98a 23% 55%,#e8c24a 56% 64%,transparent 65%);box-shadow:0 0 18px #ffe98acc}
.rhythm-note.met{opacity:0;transition:opacity .18s ease}
.rhythm-note.missed{opacity:.28;transition:opacity .3s ease}
.rhythm-line{position:absolute;left:5%;right:5%;top:80%;height:4px;margin-top:-2px;border-radius:4px;z-index:3;background:#fff3c8;box-shadow:0 0 12px #ffe7a0}
.rhythm-stage.beat .rhythm-line{animation:rhythm-pulse .22s ease-out}
.rhythm-judge{position:absolute;top:60%;width:50%;text-align:center;font-weight:700;font-size:19px;color:#fffbe8;text-shadow:0 1px 4px #0008;opacity:0;z-index:6;pointer-events:none}.rhythm-judge[data-lane="0"]{left:0}.rhythm-judge[data-lane="1"]{right:0}
.rhythm-judge[data-result="perfect"]{color:#ffe98a}.rhythm-judge[data-result="ok"]{color:#e8e2d0;font-size:16px}
.rhythm-judge.show{animation:rhythm-word .6s ease-out forwards}
.rhythm-countin{position:absolute;left:0;right:0;top:34%;text-align:center;font-family:Georgia,serif;font-size:46px;color:#fff8df;text-shadow:0 2px 8px #0009;z-index:7;pointer-events:none}
.rhythm-cat,.rhythm-fairy{position:absolute;bottom:2%;height:19%;width:auto;object-fit:contain;z-index:5;pointer-events:none;transform-origin:50% 100%}.rhythm-cat{left:calc(25% - 34px)}.rhythm-fairy{left:calc(75% - 24px);filter:drop-shadow(0 0 10px #fff0c2)}
.rhythm-cat.hop{animation:rhythm-hop .32s ease-out}.rhythm-fairy.hop{animation:rhythm-twirl .4s ease-out}
.rhythm-stage[data-phase="paused"]:after{content:"ひと休み";position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:#fffbedc8;font-size:21px;color:#3b5b4b}
.rhythm-pads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.rhythm-pad{min-height:78px;border-radius:16px;border:2px solid #d6b98a;background:#fff4e2;color:#6a4a22;display:grid;place-items:center;align-content:center;gap:2px;font-size:15px;font-weight:600;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.rhythm-pad svg{width:26px;height:26px}.rhythm-pad.pad-fairy{border-color:#e2cf7a;background:#fffbe6;color:#6d5a2c}
.rhythm-pad.pressed{animation:rhythm-press .16s ease-out}
.rhythm-pad:focus-visible{outline:3px solid #c99738;outline-offset:3px}
.rhythm-silent{font-size:13px!important;text-align:center;color:#7a6a3a;margin:8px 0 0}
.rhythm-feedback{font-size:13px!important;text-align:center;min-height:2.6em;line-height:1.7;margin:6px 0;color:var(--muted)}
.rhythm-controls{display:flex;justify-content:center}.rhythm-pause{border:1px solid #cbd2bd;border-radius:12px;padding:10px 18px;font-size:14px;background:#fffdf4;color:#527152;min-width:110px;min-height:44px}
.rhythm-keyboard{text-align:center;font-size:12px!important;color:var(--muted);margin-top:7px}
.rhythm-result{text-align:center;padding:15px 0}.rhythm-result h3{font-size:21px;font-family:"Yu Mincho",serif;line-height:1.5;margin:0 0 9px}.rhythm-result p{font-size:15px;line-height:1.9}.rhythm-final-points{font-size:58px;font-family:Georgia,serif;color:var(--green);line-height:1.2}.rhythm-final-points small{font-size:15px;color:var(--muted)}.rhythm-result-note{margin:10px 0;color:#658344;font-size:13px!important}
.rhythm-start-note{font-size:13px!important;color:#9a5a3a;min-height:1.4em;margin:4px 0 8px;text-align:center}
@keyframes rhythm-pulse{0%{transform:scaleY(2.2);box-shadow:0 0 22px #ffe7a0}100%{transform:none}}
@keyframes rhythm-word{0%{opacity:0;transform:translateY(8px)}25%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px)}}
@keyframes rhythm-hop{50%{transform:translateY(-10px) rotate(-6deg)}}
@keyframes rhythm-twirl{50%{transform:translateY(-8px) rotate(18deg)}}
@keyframes rhythm-press{50%{transform:scale(.95)}}
@media(max-width:600px){#rhythm-dialog{padding:23px 16px;width:calc(100% - 20px)}#rhythm-dialog h2{font-size:22px}.rhythm-intro{font-size:14px!important}.rhythm-stage{height:280px}.rhythm-keyboard{display:none}.rhythm-note{width:40px;height:40px;top:-20px}}
@media(max-height:760px){#rhythm-dialog[data-playing] :is(.eyebrow,.rhythm-intro,.rhythm-best){display:none}.rhythm-stage{height:250px}}
@media(max-height:560px){#rhythm-dialog[data-playing] h2{display:none}.rhythm-stage{height:190px}.rhythm-pad{min-height:60px}#rhythm-dialog[data-playing] .rhythm-keyboard{display:none}}
/* Less motion: the marks still fall (the game needs them), everything else stays still. */
@media(prefers-reduced-motion:reduce){.rhythm-stage.beat .rhythm-line,.rhythm-cat.hop,.rhythm-fairy.hop,.rhythm-pad.pressed{animation:none}.rhythm-judge.show{animation:none;opacity:1}}
[data-reduce-motion="true"] :is(.rhythm-stage.beat .rhythm-line,.rhythm-cat.hop,.rhythm-fairy.hop,.rhythm-pad.pressed){animation:none}
[data-reduce-motion="true"] .rhythm-judge.show{animation:none;opacity:1}
/* While playing, the stage takes what the screen's height leaves, so the pads never fall off a short screen. */
#rhythm-dialog[data-playing] .rhythm-stage{height:clamp(120px,calc(100dvh - 250px),320px)}
@media(max-height:560px){#rhythm-dialog[data-playing]{padding-top:14px;padding-bottom:12px}#rhythm-dialog[data-playing] .rhythm-progress{width:calc(100% - 52px)}#rhythm-dialog[data-playing] .rhythm-stage{height:clamp(110px,calc(100dvh - 190px),240px)}#rhythm-dialog[data-playing] .rhythm-feedback{min-height:0;margin:4px 0}}
/* A fairy wearing something on her tuft is drawn with room above; her box grows to keep her the same size. */
.rhythm-fairy.still-padded{height:calc(19% * 1.1276)}
.mouse-fairy.still-padded{height:calc(28% * 1.1276)}
/* Less motion: a pad still answers, by colour only. */
@media(prefers-reduced-motion:reduce){.rhythm-pad.pressed{background:#f7d9a8}}
[data-reduce-motion="true"] .rhythm-pad.pressed{background:#f7d9a8}