:root{color-scheme:light;--ink:#253044;--muted:#68758b;--line:#dbe5ed;--accent:#1c92a9;--accent-dark:#126b7d;--glow:#40e6ff;--back:#eef7f8;font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 15% 10%,#dff4f6 0,transparent 34rem),linear-gradient(145deg,#f8fbfc,var(--back))}button,input{font:inherit}.app{width:min(1100px,calc(100% - 32px));margin:auto;padding:26px 0 20px}.app__header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:14px}.app__eyebrow{margin:0 0 4px;color:var(--accent-dark);font-size:.82rem;font-weight:700;letter-spacing:.12em}h1{margin:0;font-size:clamp(1.35rem,3vw,2rem)}.status{display:flex;gap:8px;margin:0}.status__item{min-width:92px;padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:#ffffffe0;text-align:center;box-shadow:0 5px 18px #29535e0f}.status dt{color:var(--muted);font-size:.75rem;font-weight:700}.status dd{margin:2px 0 0;color:var(--accent-dark);font-size:1.55rem;font-weight:800;line-height:1}.status small{font-size:.72rem}.play-area{position:relative;height:clamp(300px,43vh,420px);overflow:hidden;border:3px solid #b9dbe0;border-radius:22px;background:linear-gradient(#ffffffb8,#ffffffe8),repeating-linear-gradient(90deg,transparent 0 79px,#d9eef0 80px);box-shadow:0 18px 45px #254c581f}.falling-key{position:absolute;z-index:4;top:0;left:0;width:1.25em;color:var(--accent-dark);font:900 clamp(4rem,10vw,6.5rem)/1 Arial,sans-serif;text-align:center;text-shadow:0 5px 0 #d4edf0;will-change:transform,opacity}.falling-key.is-hit{animation:target-hit .18s ease-out forwards}.effect-layer{position:absolute;z-index:3;inset:0;pointer-events:none;overflow:hidden}.panel{position:absolute;z-index:8;top:50%;left:50%;width:min(760px,calc(100% - 32px));padding:clamp(18px,3vw,28px);border:1px solid var(--line);border-radius:20px;background:#fffffff5;text-align:center;box-shadow:0 20px 50px #254c5826;transform:translate(-50%,-50%)}.panel__label,.panel__sub{margin:0;color:var(--muted)}.panel__main{margin:14px 0 9px;font-size:clamp(1.1rem,3vw,1.45rem);font-weight:800}kbd{display:inline-block;padding:.28em .65em;border:1px solid #9eb8bf;border-bottom-width:4px;border-radius:8px;color:var(--accent-dark);background:#f8ffff;font:inherit}.mode-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 0;padding:0;border:0}.mode-option{cursor:pointer}.mode-option--numpad{grid-column:2/4}.mode-option input{position:absolute;opacity:0;pointer-events:none}.mode-option span{display:grid;place-items:center;min-height:62px;padding:8px 5px;border:2px solid #c7dade;border-radius:12px;color:#40576a;background:#f7fbfc;font-weight:800;transition:.15s}.mode-option small{display:block;margin-top:4px;color:var(--muted);font:600 .62rem Arial,sans-serif}.mode-option input:checked+span{color:#07404c;border-color:#29c5db;background:#d8fbff;box-shadow:0 0 0 3px #40e6ff2e,0 7px 18px #1c92a91f}.sound-setting{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 9px;color:var(--muted);font-weight:700}.sound-setting small{font-weight:500}.sound-toggle{min-width:54px;padding:4px 10px;border:1px solid #75bdc9;border-radius:99px;color:#07404c;background:#d8fbff;font-weight:800;cursor:pointer}.sound-toggle[aria-pressed=false]{color:#68758b;border-color:#becbd0;background:#edf1f2}.countdown{position:absolute;z-index:9;inset:0;display:grid;place-items:center;color:var(--accent-dark);background:#ffffffd6;font:900 clamp(6rem,22vw,13rem)/1 Arial,sans-serif;text-shadow:0 8px 0 #d4edf0}.exit-panel h2,.result h2{margin:8px 0 20px}.exit-panel__buttons,.result__scores{display:flex;justify-content:center;gap:10px}.dialog-button,.change-mode{padding:10px 18px;border:1px solid #9eb8bf;border-radius:99px;color:var(--accent-dark);background:#f6fcfd;font-weight:800;cursor:pointer}.dialog-button--danger{color:#9b2833;border-color:#dfaab0;background:#fff1f2}.result__scores{margin-bottom:18px}.result__scores p{min-width:130px;margin:0;padding:14px;border-radius:12px;color:var(--muted);background:#edf8f9;font-size:.82rem;font-weight:700}.result__scores strong{display:block;margin-top:4px;color:var(--accent-dark);font-size:2.2rem}.change-mode{margin-top:15px}.guide{margin-top:12px;padding:12px 14px 9px;border:1px solid #cfe2e6;border-radius:18px;background:#ffffffe0;box-shadow:0 10px 30px #254c5814}.guide__header{position:relative;display:flex;align-items:center;justify-content:center;min-height:24px;margin-bottom:9px}.guide__title{margin:0;color:var(--muted);font-size:.78rem;font-weight:700}.exit-hint{position:absolute;right:0;margin:0;color:var(--muted);font-size:.78rem}.exit-hint kbd{padding:.12em .45em;border-bottom-width:2px}.keyboard-viewport{overflow-x:auto;padding:4px 3px 7px}.screen-keyboard{--key-width:clamp(43px,6.3vw,68px);width:calc(var(--key-width)*10 + 63px);min-width:493px;margin:auto}.keyboard-row{display:grid;grid-template-columns:repeat(10,var(--key-width));gap:7px;width:max-content;margin-bottom:6px;transition:.18s}.keyboard-row[data-row=top]{margin-left:15px}.keyboard-row[data-row=home]{margin-left:29px}.keyboard-row[data-row=bottom]{margin-left:43px}.keyboard-row.is-inactive-row{opacity:.48;filter:saturate(.65)}.keycap,.numpad-key{position:relative;min-width:0;min-height:48px;padding:0;border:1px solid #a9c0c6;border-bottom:5px solid #819ba2;border-radius:9px;color:#33475b;background:linear-gradient(#fff,#eaf1f3);font:800 clamp(.95rem,2vw,1.28rem)/1 Arial,sans-serif;box-shadow:0 3px 6px #254c581f;transition:.08s}.keycap:before,.numpad-key:before{content:"";position:absolute;inset:3px;z-index:-1;border-radius:7px;opacity:.28}.keycap[data-zone*=little]:before,.numpad-key[data-finger=little]:before{background:#f6acc1}.keycap[data-zone*=ring]:before,.numpad-key[data-finger=ring]:before{background:#efc57f}.keycap[data-zone*=middle]:before,.numpad-key[data-finger=middle]:before{background:#d9dc75}.keycap[data-zone*=index]:before,.numpad-key[data-finger=index]:before{background:#8edcc4}.numpad-key[data-finger=thumb]:before{background:#b6c8ef}.keycap[data-bump=true]:after,.numpad-key[data-bump=true]:after{content:"";position:absolute;left:33%;right:33%;bottom:7px;height:3px;border-radius:2px;background:#718c94}.is-zone-target{opacity:1!important;border-color:#68cbd8!important;background:#e5fbfd!important;box-shadow:0 0 10px #40e6ff4d!important}.is-target{z-index:2;color:#073e4b!important;background:#bdf8ff!important;box-shadow:0 0 0 2px #5edbec,0 0 18px #40e6ffd9!important;transform:translateY(-1px)}.is-correct{color:#fff!important;background:#23cde6!important;transform:translateY(2px) scale(.98);box-shadow:0 0 0 3px #fff,0 0 30px var(--glow)!important}.is-wrong{z-index:3;color:#fff!important;background:#ef5360!important;border-color:#b32635!important;box-shadow:0 0 18px #ef3243d9!important;animation:wrong-shake .24s linear}.hands{display:flex;justify-content:center;gap:clamp(34px,11vw,130px);margin:7px auto 0}.hand{display:flex;align-items:flex-end;gap:4px;padding:5px 13px 0;border-bottom:7px solid #b8c9ce;border-radius:0 0 24px 24px}.finger,.numpad-finger{display:grid;place-items:start center;width:clamp(22px,4vw,34px);height:var(--finger-height);padding-top:6px;border:2px solid #a9bcc2;border-radius:15px 15px 8px 8px;color:#60727a;background:linear-gradient(#edf5f6,#dce9eb);font-size:clamp(.56rem,1.4vw,.68rem);font-weight:800;transition:.1s}.finger.is-target,.numpad-finger.is-target{transform:translateY(-4px)}.numpad-question{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:30px}.current-question{position:relative;z-index:4;display:flex;align-items:center;min-height:1.2em;color:#33475b;font:900 clamp(3.1rem,9vw,6rem)/1 Arial,sans-serif;letter-spacing:.04em;text-shadow:0 4px 0 #e3eff1}.current-question span{transition:.08s}.current-question span.is-entered{color:#1cb9cf;text-shadow:0 0 14px #40e6ff99}.current-question span.is-current{text-decoration:underline;text-decoration-color:#ef9f24;text-underline-offset:8px}.current-question .comma{margin-right:.05em;color:#738595;font-style:normal}.question-enter{margin-left:.35em;font-size:.27em;letter-spacing:0;text-shadow:none}.question-enter.is-ready{color:#073e4b;border-color:#29c5db;background:#bdf8ff;box-shadow:0 0 18px #40e6ffd9}.next-question{position:relative;z-index:4;display:flex;align-items:center;gap:12px;margin-top:24px;padding:10px 20px;border:1px solid #b9dbe0;border-radius:13px;background:#edf8f9d9;color:var(--muted)}.next-question span{font-size:.8rem;font-weight:800}.next-question strong{color:#40576a;font:800 clamp(1.3rem,4vw,2rem)/1 Arial,sans-serif;letter-spacing:.05em}.comma-note{z-index:4;margin:8px 0 0;color:var(--muted);font-size:.76rem}.current-question.is-promoting{animation:promote .3s ease-out}.question-shatter{position:absolute;z-index:6;top:39%;animation:shatter .28s ease-out forwards;pointer-events:none}.numpad-guide{display:flex;align-items:center;justify-content:center;gap:clamp(34px,8vw,100px);padding:4px 0 10px}.screen-numpad{display:grid;grid-template-columns:repeat(3,62px);grid-template-rows:repeat(4,52px);gap:7px}.numpad-key{font-size:1.1rem}.numpad-key[data-numpad-key="0"]{grid-column:1/3}.numpad-key[data-numpad-key="."]{grid-column:3;opacity:.32;filter:grayscale(1)}.numpad-key[data-numpad-key=Enter]{grid-column:1/4}.numpad-hand{display:flex;align-items:flex-end;gap:4px;padding:6px 10px 0;border-bottom:7px solid #b8c9ce;border-radius:0 0 24px 24px}.numpad-finger{width:34px}.numpad-finger[data-finger=thumb]{height:42px}.numpad-finger[data-finger=index]{height:57px}.numpad-finger[data-finger=middle]{height:63px}.numpad-finger[data-finger=ring]{height:57px}.numpad-finger[data-finger=little]{height:46px}.laser{position:fixed;z-index:2;height:9px;border-radius:99px;background:linear-gradient(#0877bd 0 20%,#69d8ff 20% 40%,#fff 40% 60%,#69d8ff 60% 80%,#0877bd 80%);box-shadow:0 0 5px #0877bd,0 0 12px #39c8ff,0 0 24px #1e9de2cc;transform-origin:0 50%;pointer-events:none;animation:laser-shot .2s ease-out forwards}.wrong-laser{position:fixed;z-index:20;height:5px;border-radius:99px;background:linear-gradient(#665978,#93869e,#554b61);box-shadow:0 0 5px #5c4c6dbf;transform-origin:0 50%;pointer-events:none;animation:wrong-laser-shot .11s ease-out forwards}.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--glow);animation:spark-burst .28s ease-out forwards}.message{min-height:1.5em;margin:10px 0 0;color:var(--muted);text-align:center;font-size:.92rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}[hidden]{display:none!important}@keyframes wrong-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}@keyframes laser-shot{from{opacity:1;clip-path:inset(0 100% 0 0)}45%{clip-path:inset(0)}to{opacity:0;clip-path:inset(0)}}@keyframes wrong-laser-shot{from{opacity:.9;clip-path:inset(0 100% 0 0)}70%{opacity:.8;clip-path:inset(0)}to{opacity:0}}@keyframes target-hit{to{opacity:0;filter:blur(5px);transform:translate(var(--key-x),var(--key-y)) scale(1.65) rotate(12deg)}}@keyframes spark-burst{from{opacity:1;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.1)}}@keyframes promote{from{opacity:.45;transform:translateY(58px) scale(.65)}to{opacity:1;transform:none}}@keyframes shatter{to{opacity:0;filter:blur(5px);transform:scale(1.55) rotate(6deg)}}
@media(max-width:720px){.app{width:min(100% - 20px,1100px);padding-top:16px}.app__header{align-items:stretch;flex-direction:column;gap:10px}.status{width:100%}.status__item{flex:1;min-width:0;padding:8px 4px}.play-area{height:410px;border-radius:16px}.panel{padding:16px 12px}.mode-selector{grid-template-columns:repeat(2,1fr)}.mode-option--numpad{grid-column:1/3}.mode-option span{min-height:49px}.screen-keyboard{--key-width:43px;margin-left:0}.keycap{min-height:43px}.hands{gap:18px}.hand{gap:2px;padding-inline:4px}.guide__header{justify-content:space-between;gap:8px}.exit-hint{position:static}.numpad-guide{flex-direction:column;gap:16px}.screen-numpad{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(4,48px)}.numpad-question{padding-bottom:0}.question-enter{display:block}.next-question{margin-top:20px}}

@keyframes promote{from{transform:translate(var(--promote-x),var(--promote-y)) scale(var(--promote-scale));transform-origin:center}to{transform:none;transform-origin:center}}

/* テンキー：視線を固定したまま一段ずつ送る数字リール */
.numpad-question{padding-bottom:0}.number-reel{--row-step:88px;position:relative;width:min(620px,calc(100% - 32px));height:286px;overflow:hidden}.number-reel__frame{position:absolute;z-index:2;top:50%;left:50%;width:min(520px,calc(100% - 24px));height:76px;border:3px solid #55d8e8;border-radius:16px;background:#dffbff47;box-shadow:0 0 0 5px #fff9,0 8px 28px #1c92a92e,0 0 24px #40e6ff45;transform:translate(-50%,-50%);pointer-events:none}.number-track{position:absolute;inset:0}.number-row{position:absolute;z-index:3;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:min(500px,calc(100% - 44px));height:70px;color:#526477;font:850 clamp(2rem,6vw,3.4rem)/1 Arial,sans-serif;letter-spacing:.04em;opacity:.58;transform:translate(-50%,calc(-50% + var(--row-offset)*var(--row-step))) scale(.82);transition:transform .28s cubic-bezier(.22,.75,.25,1),opacity .28s,color .28s;will-change:transform,opacity}.number-row[data-offset="-1"]{--row-offset:-1;opacity:.18}.number-row[data-offset="0"]{--row-offset:0;z-index:4;color:#253044;opacity:1;transform:translate(-50%,calc(-50% + var(--row-offset)*var(--row-step))) scale(1)}.number-row[data-offset="1"]{--row-offset:1}.number-row[data-offset="2"]{--row-offset:2;opacity:.3}.number-row.is-new{opacity:0}.number-row span{transition:color .08s,text-shadow .08s}.number-row span.is-entered{color:#1cb9cf;text-shadow:0 0 14px #40e6ff99}.number-row span.is-current{text-decoration:underline;text-decoration-color:#ef9f24;text-underline-offset:8px}.number-row .comma{margin-right:.05em;color:#738595;font-style:normal}.number-row .question-enter{margin-left:.55em;font-size:.3em;letter-spacing:0;text-shadow:none}.comma-note{position:absolute;z-index:5;bottom:12px;margin:0}
@media(max-width:720px){.number-reel{--row-step:82px;width:100%;height:280px}.number-reel__frame{width:calc(100% - 20px);height:72px}.number-row{width:calc(100% - 30px);font-size:clamp(1.8rem,9vw,3rem)}.number-row .question-enter{margin-left:.35em}}

/* 実物のテンキー配置：Enterは3とドットの右側で縦2段 */
.screen-numpad{grid-template-columns:repeat(4,62px)}
.numpad-key[data-numpad-key="7"]{grid-area:1/1}
.numpad-key[data-numpad-key="8"]{grid-area:1/2}
.numpad-key[data-numpad-key="9"]{grid-area:1/3}
.numpad-key[data-numpad-key="4"]{grid-area:2/1}
.numpad-key[data-numpad-key="5"]{grid-area:2/2}
.numpad-key[data-numpad-key="6"]{grid-area:2/3}
.numpad-key[data-numpad-key="1"]{grid-area:3/1}
.numpad-key[data-numpad-key="2"]{grid-area:3/2}
.numpad-key[data-numpad-key="3"]{grid-area:3/3}
.numpad-key[data-numpad-key="0"]{grid-area:4/1/5/3}
.numpad-key[data-numpad-key="."]{grid-area:4/3}
.numpad-key[data-numpad-key="Enter"]{grid-area:3/4/5/5}
@media(max-width:720px){.screen-numpad{grid-template-columns:repeat(4,56px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}