:root{--bg:#fff;--fg:#171717;--muted:#4a5565;--subtle:#6a7282;--faint:#99a1af;--primary:#7babff;--primary-ink:#0b1120;--primary-strong:#1d4ed8;--primary-tint:#eef4ff;--primary-line:#d6e4ff;--typed:#9fc1ff;--deco:#c9dbff;--grid:#7babff21;--accent:#f59e0b;--accent-ink:#1e1b0f;--miss:#f87171;--line:#e5e7eb;--key-empty:#f3f4f6;--kb-height-ratio:.58;--kb-bottom-offset:40px}*{box-sizing:border-box}html,body{touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;min-height:100%;margin:0}body{color:var(--fg);background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:40px 40px;font-family:LINE Seed JP,-apple-system,Hiragino Sans,sans-serif}body:before{content:"";background:var(--primary);height:4px;position:fixed;top:0;left:0;right:0}button{font:inherit;touch-action:manipulation}.screen{flex-direction:column;min-height:100dvh;padding:36px 24px 24px;display:flex;position:relative}.deco{border-top:1px solid var(--deco);width:46px;height:40px;position:absolute;top:22px;right:22px;transform:rotate(-25deg)}.deco:before,.deco:after{content:"";border:1px solid var(--deco);position:absolute}.deco:before{width:32px;top:9px;right:0}.deco:after{border-color:var(--primary);width:12px;height:12px;top:18px;right:8px;transform:rotate(45deg)}.ribbon,.outline-ribbon{letter-spacing:.3em;align-self:flex-start;padding:6px 12px;font:600 12px Outfit,sans-serif;display:inline-block;transform:skew(-14deg)}.ribbon{color:var(--primary-ink);background:var(--primary)}.accent-ribbon{color:var(--accent-ink);background:var(--accent)}.outline-ribbon{color:var(--primary-strong);border:1px solid var(--primary);padding:4px 9px}.primary-button,.secondary-button{border-radius:0;width:100%}.primary-button{height:56px;color:var(--primary-ink);letter-spacing:.1em;background:var(--primary);clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);font-weight:800}.secondary-button{height:48px;color:var(--fg);border:1px solid var(--line);background:var(--bg);font-size:15px;font-weight:700}.title-screen{justify-content:flex-start;padding-top:80px}.title-screen h1{margin:28px 0 18px;font-size:44px;line-height:1.2}.intro{color:var(--muted);margin:0;font-size:15px;font-weight:700;line-height:1.8}.best{color:var(--muted);margin-top:38px;font-size:12px;font-weight:700}.best strong{color:var(--fg);font:italic 300 64px/1 Outfit,sans-serif;display:block}.best small,.score small{margin-left:5px;font:800 20px LINE Seed JP,sans-serif}.title-screen .primary-button{margin-top:auto}.play{height:100dvh;padding-bottom:calc(60vw + var(--kb-bottom-offset) + 24px);overflow:hidden}#countdown{color:var(--fg);text-align:center;font:italic 300 120px Outfit,sans-serif;position:absolute;top:28%;left:0;right:0}.play-header{justify-content:space-between;align-items:end;min-height:48px;margin-top:32px;display:flex}#stats{color:var(--muted);flex:1;align-items:end;gap:18px;font-size:12px;font-weight:700;display:flex}#stats>span:last-child{margin-left:auto}.remaining{color:var(--fg);font:italic 500 36px/1 Outfit,sans-serif}.remaining small{color:var(--muted);margin-left:4px;font:700 13px LINE Seed JP,sans-serif}.remaining.urgent{color:var(--accent);font-size:64px}#stats b{color:var(--fg);font:500 22px Outfit,sans-serif}#bonus{visibility:hidden;min-width:44px;color:var(--accent-ink);background:var(--accent);font-size:12px;font-weight:700;transform:skew(-14deg)}#bonus:not(:empty){visibility:visible}.time-bar{background:var(--line);height:4px;margin-top:18px}.time-bar i{background:var(--fg);height:100%;transition:width .1s linear;display:block}.time-bar.urgent i{background:var(--accent)}.prompt-area{flex:1;min-height:0;padding-top:22px;overflow:hidden}.prompt-meta{color:var(--muted);letter-spacing:.24em;font:600 11px Outfit,sans-serif}.prompt-meta:before{content:"";vertical-align:middle;background:var(--primary);width:18px;height:2px;margin-right:8px;display:inline-block}#perfect{float:right;min-height:28px}.kanji{color:var(--muted);word-break:keep-all;overflow-wrap:anywhere;margin:12px 0 0;font-size:23px;font-weight:700;line-height:1.45}.reading-ticker-host{height:80px;margin:12px -24px 0;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 26% 84%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 26% 84%,#0000 100%)}.reading-ticker-line{white-space:nowrap;width:max-content;height:64px;transition:transform .14s ease-out;display:flex;transform:translate(0)}.reading-ticker-line span{height:64px;color:var(--fg);border:1px solid #0000;border-radius:10px;flex:none;padding:0 1px;font:800 46px/64px LINE Seed JP,sans-serif;position:relative}.reading-ticker-line span.is-typed{color:var(--typed)}.reading-ticker-line span.is-current{color:var(--primary-ink);background:var(--primary)}.reading-ticker-line span.is-current.is-miss{background:var(--miss)}.reading-ticker-line span[data-pending]:before{color:var(--primary-strong);content:attr(data-pending);font-size:16px;line-height:1;position:absolute;top:-2px;left:50%;transform:translate(-50%)}.reading-ticker-marker{background:var(--primary);border-radius:2px;height:3px;position:absolute;top:70px;left:28%}@media (prefers-reduced-motion:reduce){.reading-ticker-line{transition:none}}.is-counting #prompt,.is-counting #next,.is-counting #perfect{visibility:hidden}.play-bottom{flex-shrink:0}#next{border-top:1px dashed var(--primary-line);min-height:44px;color:var(--subtle);padding:14px 0 10px;font-size:16px;font-weight:700}#next span{color:var(--primary-strong);letter-spacing:.24em;margin-right:16px;font:600 11px Outfit,sans-serif}.combo-row{color:var(--muted);align-items:center;gap:10px;margin-bottom:8px;font-size:12px;font-weight:700;display:flex}.combo-row b{color:var(--fg);font:italic 500 22px Outfit,sans-serif}.combo-row>span:last-child{margin-left:auto}.gauge{background:var(--line);height:2px}.gauge i{background:var(--primary);height:4px;transition:width .2s;display:block;position:relative}.gauge i:after{content:"";background:var(--primary);width:10px;height:10px;position:absolute;top:-3px;right:-5px;transform:rotate(45deg)scale(.75)}.keyboard{right:4vw;bottom:calc(env(safe-area-inset-bottom) + var(--kb-bottom-offset));height:calc(100vw * var(--kb-height-ratio));grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(5,1fr);gap:6px;display:grid;position:fixed;left:4vw}.key{color:var(--fg);border:1px solid var(--line);background:var(--bg);box-shadow:0 2px 0 var(--line);border-radius:8px;padding:0;font:700 clamp(12px,5vw,21px) LINE Seed JP,sans-serif}.key--empty{background:var(--key-empty);box-shadow:none;border:0}.key--func{color:var(--primary-strong);border-color:var(--primary-line);background:var(--primary-tint);box-shadow:0 2px 0 var(--primary-line)}.key--func:active,.key:active{background:var(--primary-tint)}.flick-guide{z-index:2;color:var(--fg);border:1.5px solid var(--primary);background:var(--bg);pointer-events:none;border-radius:8px;place-items:center;font-size:22px;font-weight:700;display:grid;position:absolute}.flick-guide.is-active{color:var(--primary-ink);background:var(--primary);font-size:25px;font-weight:800;box-shadow:0 6px 16px #7babff73}.flick-only{right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);color:var(--faint);letter-spacing:.4em;text-align:center;font:600 10px Outfit,sans-serif;position:fixed;left:0}.result-screen{padding-top:80px}.result-label{color:var(--muted);margin:24px 0 0;font-size:13px;font-weight:700}.score{margin-top:4px;font:italic 300 132px/.85 Outfit,sans-serif;position:relative}.score small{position:absolute;bottom:0;right:0}.result-screen .accent-ribbon{margin-top:24px}.result-grid{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;margin-top:30px;display:grid}.result-grid p{color:var(--muted);border-bottom:1px solid var(--line);margin:0;padding:12px 8px;font-size:12px;font-weight:700}.result-grid p:nth-child(odd){border-right:1px solid var(--line)}.result-grid strong{color:var(--fg);font:500 30px Outfit,sans-serif;display:block}.result-grid strong small{margin-left:2px;font-size:14px}.duration{color:var(--muted);font-size:12px;font-weight:700}.result-actions{gap:10px;margin-top:auto;display:grid}.blocked{text-align:center;justify-content:center;align-items:center}.blocked h1{margin-top:28px;font-size:22px}.debug,.debug-panel{font:10px/1.3 ui-monospace,monospace}.debug-panel{max-width:96vw;color:var(--fg);text-align:left;pointer-events:none;background:#ffffffd9;padding:4px;position:absolute;top:4px;right:4px;overflow:auto}@media (orientation:landscape) and (pointer:coarse){#app:not(:has(.blocked)):after{z-index:10;content:"縦向きにしてください";color:var(--fg);background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:40px 40px;place-items:center;font-size:20px;font-weight:800;display:grid;position:fixed;inset:0}}