:root{--bg: #F4F6F8;--surface: #FFFFFF;--ink: #1A1F26;--ink-muted: #5A6472;--line: #D9DEE5;--accent: #2E7D6F;--on-accent: #FFFFFF;--ok: #2E7D32;--ok-soft: #E7F3E8;--warn: #B26A00;--bad: #B3261E;--bad-soft: #FCE8E6;--focus: #0B63CE;--surface-raised: #FDFBF5;--surface-deep: #E8F0ED;--accent-soft: #CDE8E0;--accent-strong: #155E52;--lane: #D8E4DF;--lane-mark: #96B5AB;--shadow: #1A1F2630;--overlay: #1A1F26CC;--avatar-skin: #F1C6A8;--avatar-hair: #48515C;--font-ui: "Noto Sans JP", system-ui, sans-serif}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-ui)}main{box-sizing:border-box;min-height:100dvh;background:var(--surface);padding:clamp(1rem,4vw,2rem)}main.game-shell{background:var(--surface-deep);padding:max(1rem,env(safe-area-inset-top)) max(.85rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(.85rem,env(safe-area-inset-left))}button,input{font:inherit}button{touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.metronome{width:2rem;height:2rem;border-radius:50%;background:var(--line)}.metronome.active{background:var(--accent)}.note-board{display:flex;gap:.25rem;margin:1rem 0}.note{color:var(--ink-muted)}.note.lit{color:var(--ok)}.note.late{color:var(--warn);transform:translateY(.5rem)}.name-match-game,.name-match-result{width:min(100%,62rem);margin:0 auto}.training-card{max-width:38rem;margin:1.25rem 0;border:1px solid var(--line);border-radius:1.25rem;background:var(--surface-raised);padding:1.2rem}.training-card h2{margin:.25rem 0 .5rem}.training-card p:not(.eyebrow){color:var(--ink-muted);line-height:1.65}.name-match-record{max-width:38rem;margin:1rem 0;border:1px solid var(--line);border-radius:1rem;padding:1rem}.name-match-record h3{margin:0 0 .75rem;font-size:1rem}.name-match-record>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.name-match-record p{display:grid;gap:.25rem;margin:0}.name-match-record span{color:var(--ink-muted);font-size:.75rem}.name-match-record strong{color:var(--accent-strong);font-size:1.25rem}.game-hud{display:grid;grid-template-columns:auto minmax(3.5rem,1fr) auto;align-items:center;gap:.55rem;margin-bottom:.75rem}.progress-hud{display:grid;gap:.1rem}.game-hud span{color:var(--ink-muted);font-size:.78rem}.game-hud strong{font-size:1.1rem}.hud-actions,.result-actions{display:flex;gap:.45rem}.icon-action,.secondary-action{min-height:2.75rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:.55rem .9rem}.sound-action{display:grid;place-items:center;width:2.75rem;padding:.55rem}.sound-icon{width:1.35rem;height:1.35rem;fill:currentColor}.sound-icon path:not(:first-child){fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.7}.combo-indicator{display:grid;justify-items:center;min-width:3.5rem;opacity:.38;transition:opacity .16s ease,transform .16s ease}.combo-indicator.active{color:var(--accent-strong);opacity:1}.combo-indicator strong{position:relative;line-height:1}.combo-indicator.broken{animation:combo-break .52s ease-out;color:var(--bad)}.combo-break-value:after{position:absolute;top:50%;right:-.28rem;left:-.28rem;height:.16rem;border-radius:999px;background:currentColor;content:"";transform:rotate(-18deg)}.combo-indicator.milestone{animation:combo-pop .36s ease-out}@keyframes combo-pop{50%{transform:scale(1.18)}}@keyframes combo-break{35%{transform:translate(-.14rem) rotate(-4deg)}70%{transform:translate(.14rem) rotate(4deg)}}.song-progress{height:.42rem;overflow:hidden;border-radius:999px;background:var(--line);margin-bottom:1rem}.song-progress span{display:block;width:var(--song-progress);height:100%;border-radius:inherit;background:var(--accent)}.coach-row{display:grid;grid-template-columns:3.6rem minmax(0,1fr);align-items:center;gap:.7rem;min-height:4rem;margin-bottom:.75rem}.coach-avatar{width:3.6rem;height:3.6rem;filter:drop-shadow(0 .25rem .35rem var(--shadow))}.coach-avatar.happy{animation:coach-celebrate .44s ease-out}.coach-avatar.sad{animation:coach-react .36s ease-out}.coach-avatar-back{fill:var(--accent-soft)}.coach-avatar-coat{fill:var(--surface);stroke:var(--lane-mark);stroke-width:1.5}.coach-avatar-face{fill:var(--avatar-skin)}.coach-avatar-hair,.coach-avatar-detail{fill:var(--avatar-hair)}.coach-avatar-line{fill:none;stroke:var(--avatar-hair);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.coach-avatar-alert{fill:none;stroke:var(--bad);stroke-linecap:round;stroke-width:2.6}@keyframes coach-celebrate{50%{transform:translateY(-.22rem) scale(1.04)}}@keyframes coach-react{35%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}}.coach-bubble{position:relative;margin:0;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);padding:.7rem .85rem;font-size:.88rem;font-weight:700;line-height:1.4}.coach-bubble:before{position:absolute;top:50%;left:-.38rem;width:.65rem;height:.65rem;border-bottom:1px solid var(--line);border-left:1px solid var(--line);background:var(--surface);content:"";transform:translateY(-50%) rotate(45deg)}.pharmacy-lane{position:relative;min-height:clamp(11rem,34vh,18rem);overflow:hidden;border:1px solid var(--lane-mark);border-radius:1.5rem;background:linear-gradient(var(--surface-deep),var(--surface-raised));box-shadow:0 1rem 2.5rem var(--shadow)}.lane-line{position:absolute;inset:50% 0 auto;height:.55rem;background:var(--lane);transform:translateY(-50%)}.lane-line:after{position:absolute;inset:-.25rem 0 auto;height:.1rem;background:var(--lane-mark);content:""}.lane-judgment{position:absolute;z-index:4;top:11%;left:50%;width:min(16rem,calc(100% - 4rem));color:var(--accent-strong);font-size:clamp(1.85rem,9vw,3.15rem);font-style:italic;font-weight:950;letter-spacing:-.04em;line-height:1;pointer-events:none;text-align:center;text-shadow:0 .16rem 0 var(--surface),0 .3rem .8rem var(--shadow);transform:translate(-50%);animation:lane-judgment-pop .9s cubic-bezier(.2,.8,.2,1) both}.lane-judgment.correct_off_time{color:var(--warn)}.lane-judgment.incorrect,.lane-judgment.unanswered{color:var(--bad)}.judgment-zone{position:absolute;z-index:2;top:14%;bottom:14%;left:17%;display:grid;place-items:end center;width:.35rem;border-radius:999px;background:var(--accent);box-shadow:0 0 0 .45rem var(--accent-soft)}.judgment-zone span{margin-bottom:-1.8rem;color:var(--accent-strong);font-size:.72rem;font-weight:700;white-space:nowrap}.judgment-zone.ready,.judgment-zone.guide{animation:judgment-ready .52s ease-out;box-shadow:0 0 0 .7rem var(--accent-soft)}.early-tap-callout{position:absolute;z-index:4;top:1rem;left:calc(17% + 1.1rem);border:2px solid var(--warn);border-radius:999px;background:var(--surface);box-shadow:0 .35rem .8rem var(--shadow);color:var(--warn);padding:.48rem .75rem;font-size:clamp(.95rem,4.2vw,1.15rem);font-weight:900;line-height:1;white-space:nowrap;animation:early-tap-pop .28s ease-out}.early-tap-callout:before{position:absolute;top:50%;left:-.55rem;width:.75rem;height:.75rem;border-bottom:2px solid var(--warn);border-left:2px solid var(--warn);background:var(--surface);content:"";transform:translateY(-50%) rotate(45deg)}@keyframes judgment-ready{50%{transform:scaleX(1.8)}}@keyframes lane-judgment-pop{0%{opacity:0;transform:translate(-50%,.6rem) scale(.58) rotate(-3deg)}45%{opacity:1;transform:translate(-50%) scale(1.14) rotate(1deg)}72%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,-.35rem) scale(.96)}}@keyframes early-tap-pop{0%{opacity:0;transform:translate(-.3rem) scale(.9)}}.drug-note{position:absolute;z-index:3;top:50%;display:grid;justify-items:center;grid-template-rows:3.8rem 3.6rem;width:min(11rem,42vw);height:7.4rem;transform:translate(-50%,-1.9rem);text-align:center;will-change:left}.drug-note-symbol{display:grid;place-items:center;width:3.8rem;height:3.8rem;border:.3rem solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 .45rem 1rem var(--shadow);color:var(--on-accent);font-size:1.6rem}.drug-note strong{box-sizing:border-box;display:grid;place-items:center;width:100%;height:3.25rem;margin-top:.4rem;border:1px solid var(--line);border-radius:.55rem;background:var(--surface);padding:.32rem .55rem;font-size:clamp(.84rem,3vw,1rem);line-height:1.2;overflow-wrap:anywhere}.lane-prompt{position:absolute;inset:50% 1rem auto;margin:0;color:var(--ink-muted);text-align:center;transform:translateY(-50%)}.pause-overlay{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:var(--overlay);padding:.8rem}.pause-menu{box-sizing:border-box;display:grid;gap:.55rem;width:min(100%,22rem);border-radius:1rem;background:var(--surface-raised);color:var(--ink);padding:.9rem;text-align:center}.pause-menu strong{font-size:1.15rem}.pause-menu p{margin:0;color:var(--ink-muted);font-size:.86rem}.pause-menu button{min-height:2.75rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:.55rem .9rem;font-weight:700}.pause-menu .danger-action{border-color:var(--bad);color:var(--bad)}.feedback-slot{min-height:5.7rem;padding-top:.65rem}.feedback{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.18rem .8rem;border-left:.35rem solid var(--accent);border-radius:.45rem;background:var(--surface-raised);padding:.55rem .8rem}.feedback-judgment{grid-row:1 / 3;min-width:5.7rem;color:var(--accent-strong);font-size:clamp(1.45rem,7vw,2.15rem);font-style:italic;line-height:1;text-align:center}.feedback-outcome{color:var(--ink);font-size:clamp(.95rem,3.8vw,1.15rem);font-weight:800}.feedback.incorrect,.feedback.unanswered{border-left-color:var(--bad)}.feedback.incorrect .feedback-judgment,.feedback.unanswered .feedback-judgment{color:var(--bad)}.feedback.correct_off_time{border-left-color:var(--warn)}.feedback.correct_off_time .feedback-judgment{color:var(--warn)}.feedback span{color:var(--ink-muted);font-size:.88rem}.feedback .feedback-outcome{color:var(--ink);font-size:clamp(.95rem,3.8vw,1.15rem);font-weight:800}.correct-answer{display:grid;grid-column:1 / -1;gap:.12rem;border-top:1px solid var(--line);padding-top:.45rem}.correct-answer small{color:var(--ink-muted);font-size:.72rem}.correct-answer strong{color:var(--ink);font-size:clamp(1.12rem,4.6vw,1.45rem);line-height:1.25}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.answer-grid button{position:relative;min-height:4.5rem;border:1px solid var(--lane-mark);border-radius:1rem;background:var(--surface);color:var(--ink);padding:.8rem .65rem .8rem 2rem;font-weight:700;line-height:1.3}.answer-grid button.waiting{color:var(--ink-muted);opacity:.76}.answer-grid button.waiting:active{background:var(--surface-deep)}.answer-grid button:not(:disabled):active{background:var(--accent-soft);transform:translateY(.1rem)}.answer-grid button:disabled{color:var(--ink-muted);opacity:.68}.key-hint{position:absolute;top:50%;left:.6rem;display:grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--surface-deep);color:var(--accent-strong);font-size:.74rem;transform:translateY(-50%)}.timing-hint{min-height:1.4rem;margin:.7rem 0 0;color:var(--ink-muted);font-size:.82rem;font-weight:700;text-align:center}.timing-hint.ready{color:var(--accent-strong);font-size:.95rem}.timing-hint.guide{color:var(--warn);font-size:.95rem}.name-match-result{display:grid;align-content:start;min-height:calc(100dvh - 4rem);padding-bottom:1rem}.eyebrow{margin:0;color:var(--accent-strong);font-size:.82rem;font-weight:800;letter-spacing:.08em}.name-match-result h2{margin:.35rem 0 1.3rem}.result-knowledge-summary{display:grid;gap:.3rem;margin-bottom:.75rem;border:2px solid var(--accent-soft);border-radius:1rem;background:var(--surface-raised);padding:1rem}.result-knowledge-summary>span,.result-knowledge-summary>small{color:var(--ink-muted);font-size:.82rem}.result-knowledge-summary>strong{color:var(--accent-strong);font-size:clamp(2.6rem,13vw,4rem);line-height:1}.result-knowledge-summary p{margin:0;font-weight:800}.personal-best-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem;margin-top:.25rem;border-top:1px solid var(--line);padding-top:.55rem;font-size:.82rem}.personal-best-row em{border-radius:999px;background:var(--accent-soft);color:var(--accent-strong);padding:.2rem .55rem;font-style:normal;font-weight:800}.result-pair-list{margin-bottom:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface);padding:.85rem}.result-pair-list h3,.rhythm-record h3{margin:0 0 .75rem;font-size:1rem}.result-pair-columns,.result-pair-list li{display:grid;grid-template-columns:4.25rem minmax(0,1fr) 1rem minmax(0,1fr);align-items:center;gap:.4rem}.result-pair-columns{padding:0 .55rem .35rem;color:var(--ink-muted);font-size:.68rem;font-weight:700}.result-pair-list ol{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}.result-pair-list li{border:1px solid var(--line);border-left-width:.35rem;border-radius:.75rem;padding:.65rem .55rem}.result-pair-list li[data-knowledge-state=correct]{border-color:var(--ok);background:var(--ok-soft)}.result-pair-list li[data-knowledge-state=review],.result-pair-list li[data-knowledge-state=unanswered]{border-color:var(--bad);background:var(--bad-soft)}.pair-status{display:grid;gap:.15rem;font-size:.7rem;font-weight:800}.pair-status>small{color:var(--ink-muted);font-size:.65rem}.pair-outcome{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.25rem}.pair-outcome strong{font-size:1.1rem}.result-pair-list li[data-knowledge-state=correct] .pair-outcome{color:var(--ok)}.result-pair-list li[data-knowledge-state=review] .pair-outcome,.result-pair-list li[data-knowledge-state=unanswered] .pair-outcome{color:var(--bad)}.pair-name{min-width:0;overflow-wrap:anywhere;font-size:.8rem;font-weight:800;line-height:1.45}.pair-arrow{color:var(--ink-muted);text-align:center;font-weight:700}.rhythm-record{margin-bottom:.75rem;border:1px solid var(--line);border-radius:1rem;padding:.85rem}.rhythm-record>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem}.rhythm-record p{display:grid;gap:.15rem;margin:0}.rhythm-record span,.rhythm-record small{color:var(--ink-muted);font-size:.7rem}.rhythm-record strong{font-size:1.15rem}.name-match-result .result-actions{display:grid}.name-match-result .result-actions button{min-height:3rem}.save-status{min-height:1.25rem;margin:0 0 .75rem;color:var(--ink-muted);font-size:.82rem}.save-status.failed{color:var(--bad);font-weight:700}.primary-action{min-height:3rem;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);padding:.7rem 1.2rem;font-weight:800}@media(min-width:48rem){.answer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.answer-grid button{min-height:5rem}.pair-name{font-size:.9rem}.name-match-result .result-actions{grid-template-columns:repeat(2,minmax(0,max-content))}}@media(prefers-reduced-motion:reduce){.answer-grid button,.drug-note,.song-progress span{transition:none}.combo-indicator.milestone,.combo-indicator.broken,.coach-avatar.happy,.coach-avatar.sad,.judgment-zone.ready,.judgment-zone.guide,.lane-judgment,.early-tap-callout{animation:none}}