:root,[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--app-bg:#000;--app-bg-accent:#080808;--panel-bg:#0a0a0ad1;--panel-border:#ffffff1f;--panel-shadow:0 24px 80px #0000008f;--track-bg:#ffffff0f;--strong-text:#f7f9fb;--muted-text:#a2aab4;--link-text:#8be9fd;--typing-display-font:"Cascadia Mono", "Consolas", "JetBrains Mono", "SFMono-Regular", "Roboto Mono", monospace;--feedback-miss-overlay:#0300009e;--feedback-miss-stripe:#ff1f4d33;--keycap-bg:#ffffff0a;--keycap-border:#ffffff1a;--keycap-current-glow:#8be9fd59;--challenge-char-glow:#8be9fd59;--challenge-card-bg-highlight:radial-gradient(circle at top, #ffffff14, transparent 52%);--challenge-card-bg:linear-gradient(180deg, #0e0e0ef0, #040404fa);--challenge-focus-guide:linear-gradient(180deg, #ffffff2e, #ffffff0d);--challenge-focus-guide-shadow:#070a1047}[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--app-bg:#eef1f5;--app-bg-accent:#f8fafc;--panel-bg:#ffffffe6;--panel-border:#0f172a1a;--panel-shadow:0 18px 48px #0f172a14;--track-bg:#0f172a0f;--strong-text:#1a1d21;--muted-text:#5c6673;--link-text:#0b6e99;--feedback-miss-overlay:#fff5f5d1;--feedback-miss-stripe:#ff1f4d24;--keycap-bg:#0f172a0a;--keycap-border:#0f172a1f;--keycap-current-glow:#0b6e9938;--challenge-char-glow:#0b6e992e;--challenge-card-bg-highlight:radial-gradient(circle at top, #0b6e991a, transparent 52%);--challenge-card-bg:linear-gradient(180deg, #fffffffa, #ecf1f7f5);--challenge-focus-guide:linear-gradient(180deg, #0f172a38, #0f172a0f);--challenge-focus-guide-shadow:#0f172a1f}:root{color:var(--strong-text);background:radial-gradient(circle at top, #ffffff14, transparent 34%), radial-gradient(circle at bottom right, #ffffff0a, transparent 26%), linear-gradient(180deg, var(--app-bg-accent), var(--app-bg));font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Segoe UI,Noto Sans KR,Apple SD Gothic Neo,Malgun Gothic,sans-serif;font-weight:400;line-height:1.5}[data-theme=light]{background:radial-gradient(circle at top, #0b6e990f, transparent 34%), radial-gradient(circle at bottom right, #0f172a0a, transparent 26%), linear-gradient(180deg, var(--app-bg-accent), var(--app-bg))}#root{min-height:100svh}*{box-sizing:border-box}html,body{min-width:320px;min-height:100vh;margin:0}body{background:0 0}a,button,input,textarea,select{font:inherit}.game-shell{box-sizing:border-box;-webkit-user-select:none;user-select:none;flex-direction:column;gap:clamp(18px,1.6vw,24px);width:100%;max-width:1000px;min-height:100%;margin:0 auto;padding:clamp(18px,2vw,28px);display:flex}.top-layout{flex-direction:column;gap:16px;min-width:0;display:flex}.score-card,.gauge-panel,.challenge-card,.keyboard-panel,.restart-button,.hand-card,.game-stage-footer{border:1px solid var(--panel-border);box-shadow:var(--panel-shadow)}.score-card,.gauge-panel,.hand-card,.keyboard-panel,.game-stage-footer{background:var(--panel-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.section-label,.score-label,.keyboard-meta-label{color:var(--muted-text);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px;font-size:11px}.hand-badge,.hand-mini-badge{letter-spacing:.12em;text-transform:uppercase;justify-content:center;align-items:center;font-weight:800;display:inline-flex}.mode-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.assist-row{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.assist-toggle{color:var(--strong-text);font:inherit;cursor:pointer;background:#ffffff0a;border:1px solid #8be9fd2e;border-radius:999px;padding:9px 14px;transition:transform .2s,border-color .2s,background-color .2s}.assist-toggle:hover{border-color:#8be9fd70;transform:translateY(-1px)}.assist-toggle.is-active{background:#6df7c124;border-color:#6df7c18a}.assist-copy{color:var(--muted-text);margin:0;font-size:13px;line-height:1.55}.mode-button{color:var(--muted-text);font:inherit;cursor:pointer;background:#ffffff0a;border:1px solid #8be9fd2e;border-radius:999px;padding:10px 12px;transition:transform .2s,color .2s,border-color .2s,background-color .2s}.mode-button:hover{color:var(--strong-text);border-color:#8be9fd70;transform:translateY(-1px)}.mode-button.is-active{color:#06101f;background:linear-gradient(135deg,#8be9fd,#6df7c1);border-color:#0000}.mode-button:focus-visible,.restart-button:focus-visible,.assist-toggle:focus-visible,.keyboard-setting-button:focus-visible{outline-offset:3px;outline:2px solid #8be9fdd1}.hud{flex-direction:column;gap:12px;min-width:0;display:flex}.hud-metrics{flex-direction:column;gap:12px;display:flex}.scoreboard{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.score-card,.hand-card{border-radius:20px;flex-direction:column;gap:8px;padding:14px 16px;display:flex}.score-card strong{color:var(--strong-text);font-size:clamp(1.2rem,2vw,1.75rem)}.hand-stats{grid-template-columns:1fr;gap:10px;display:grid}.hand-card-head{color:var(--strong-text);align-items:center;gap:10px;display:flex}.hand-mini-badge,.hand-badge{border:1px solid #ffffff24}.hand-mini-badge{border-radius:999px;min-width:40px;height:32px;padding:0 10px;font-size:12px}.hand-card-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;display:grid}.hand-card-metrics div{flex-direction:column;gap:4px;display:flex}.hand-card-metrics dt{color:var(--muted-text);letter-spacing:.08em;text-transform:uppercase;font-size:11px}.hand-card-metrics dd{color:var(--strong-text);margin:0;font-size:18px;font-weight:700}.hand-mini-badge-left,.hand-badge-left{color:#8be9fd;background:#8be9fd29}.hand-mini-badge-right,.hand-badge-right{color:#ffd166;background:#ffd16629}.hand-card-left{border-color:#8be9fd38}.hand-card-right{border-color:#ffd16638}.gauge-panel{border-radius:22px;flex-direction:column;gap:12px;padding:14px 16px;display:flex}.gauge-copy{color:var(--strong-text);justify-content:space-between;align-items:center;gap:12px;display:flex}.gauge-copy span{color:var(--muted-text);font-size:13px}.gauge-copy strong{font-size:22px}.gauge-track{background:var(--track-bg);border-radius:999px;align-items:center;width:100%;height:14px;display:flex;overflow:hidden}.gauge-fill{border-radius:inherit;background:linear-gradient(90deg, var(--gauge-fill-start,#ff6b6b) 0%, var(--gauge-fill-end,#6df7c1) 100%);height:100%;box-shadow:0 0 24px var(--gauge-fill-shadow,#6df7c159);transition:width .14s linear}.game-stage-gauge{width:100%}.gauge-track-slim{height:1px}.game-stage{flex-direction:column;gap:16px;min-width:0;display:flex}.game-stage-main{flex-direction:column;align-items:stretch;gap:14px;min-height:0;display:flex}.feedback{flex-wrap:wrap;align-items:flex-start;gap:16px;min-width:220px;margin:0;display:flex}.feedback-copy{flex-direction:column;align-items:flex-start;gap:2px;display:flex}.feedback-label{letter-spacing:.16em;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.3rem);font-weight:700;line-height:1}.feedback-ready{color:#8be9fd}.feedback-perfect{color:#6df7c1}.feedback-good{color:#9ad1ff}.feedback-ok{color:#ffd166}.feedback-miss,.feedback-gameover{color:#ff7b7b}.feedback-timeout{color:#ffb86c}.feedback-detail{color:var(--muted-text);margin:0;font-size:12px;line-height:1.2}.feedback-detail-accent{font-weight:700}.feedback-detail-accent-miss,.feedback-detail-accent-gameover{color:#ff7b7b}.feedback-detail-accent-timeout{color:#ffb86c}.challenge-meta{z-index:1;max-width:min(46%,480px);color:var(--muted-text);flex-direction:column;gap:2px;display:flex;position:absolute;top:clamp(16px,1.8vw,22px);left:clamp(18px,2vw,26px)}.challenge-meta-line{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.challenge-meta-item{align-items:center;gap:3px;min-width:0;display:inline-flex}.challenge-meta-item-long{align-items:flex-start}.challenge-meta-group-title{color:var(--strong-text);letter-spacing:.08em;margin-top:2px;font-size:8px;font-weight:700}.challenge-meta-group-title:first-child{margin-top:0}.challenge-meta-key{color:var(--muted-text);letter-spacing:.12em;text-transform:uppercase;font-size:7px}.challenge-meta-item strong{color:var(--strong-text);white-space:normal;font-size:7px;font-weight:700;line-height:1.05}.challenge-meta-sample{color:var(--muted-text);font-size:6px;font-weight:500}.challenge-card{background:var(--challenge-card-bg-highlight), var(--challenge-card-bg);width:100%;min-height:clamp(180px,24vh,260px);color:var(--strong-text);-webkit-user-select:none;user-select:none;border-radius:34px;flex-direction:column;justify-content:center;align-items:stretch;gap:14px;padding:clamp(18px,2vw,26px);display:flex;position:relative;overflow:hidden}.challenge-card-main{flex-direction:column;flex:auto;justify-content:flex-end;align-items:stretch;gap:6px;width:100%;padding-bottom:2px;display:flex}.challenge-lock-overlay{z-index:20;pointer-events:none;background:linear-gradient(90deg, var(--feedback-miss-stripe), #ff1f4d05 16%, #ff1f4d05 84%, var(--feedback-miss-stripe)), radial-gradient(circle at center, #ff8e2429, transparent 48%), var(--feedback-miss-overlay);-webkit-backdrop-filter:blur(2px)saturate(1.28);backdrop-filter:blur(2px)saturate(1.28);justify-content:center;align-items:center;padding:clamp(18px,3vw,34px);display:flex;position:absolute;inset:0}.challenge-lock-overlay:before,.challenge-lock-overlay:after{content:"";opacity:.78;background:repeating-linear-gradient(135deg,#ffb527e6 0 26px,#281200d6 26px 52px);height:clamp(24px,4vw,44px);position:absolute;left:0;right:0;box-shadow:0 0 22px #ff1f4d8a,inset 0 0 18px #ff6a0047}.challenge-lock-overlay:before{border-bottom:2px solid #ff1f4de0;top:0}.challenge-lock-overlay:after{border-top:2px solid #ff1f4de0;bottom:0}.challenge-lock-panel{text-align:center;background:linear-gradient(#00000057,#0000009e),linear-gradient(90deg,#0000,#ff5b001f,#0000);border-top:2px solid #ff1f4de0;border-bottom:2px solid #ff1f4de0;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:min(88%,680px);padding:clamp(16px,2.5vw,26px) clamp(18px,3vw,34px);display:flex;position:relative;box-shadow:0 0 34px #ff1f4d57,inset 0 0 38px #ff72001f}.challenge-lock-panel:before,.challenge-lock-panel:after{content:"";background:#ff4e42e6;height:1px;position:absolute;left:0;right:0;box-shadow:0 0 18px #ff1f4ddb}.challenge-lock-panel:before{top:-8px}.challenge-lock-panel:after{bottom:-8px}.challenge-lock-condition,.challenge-lock-detail{color:#ff9530db;font-family:var(--typing-display-font);letter-spacing:.14em;text-shadow:0 0 12px #ff6700b8;font-size:clamp(.78rem,1.8vw,1.18rem);font-weight:700}.challenge-lock-title{color:#ff9d2e;font-family:var(--typing-display-font);letter-spacing:.04em;text-shadow:0 0 10px #ff9d2ecc,0 0 28px #ff5600c7,0 0 46px #ff1f4d85;justify-content:center;align-items:baseline;gap:.18em;font-size:clamp(2.6rem,8vw,6rem);font-weight:900;line-height:.92;display:inline-flex}.challenge-lock-time{text-align:right;font-variant-numeric:tabular-nums;width:6ch;display:inline-block}.challenge-lock-detail{color:#ff7e24c7;font-size:clamp(.74rem,1.5vw,1rem)}@keyframes challengeCardShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}50%{transform:translate(3px)}75%{transform:translate(-2px)}}@keyframes challengeCardFlash{0%{filter:brightness();transform:scale(1);box-shadow:inset 0 0 #8be9fd00,0 0 #8be9fd00}50%{filter:brightness(1.1);transform:scale(1.012);box-shadow:inset 0 0 24px #8be9fd29,0 0 28px #8be9fd2e}to{filter:brightness();transform:scale(1);box-shadow:inset 0 0 #8be9fd00,0 0 #8be9fd00}}@keyframes challengeCardPerfect{0%{filter:brightness();transform:translateY(0)scale(1);box-shadow:inset 0 0 #8be9fd00,0 0 #8be9fd00}45%{filter:brightness(1.22);transform:translateY(-8px)scale(1.025);box-shadow:inset 0 0 42px #8be9fd33,0 0 52px #8be9fd57}70%{filter:brightness(1.1);transform:translateY(-3px)scale(1.012);box-shadow:inset 0 0 24px #8be9fd24,0 0 28px #8be9fd2e}to{filter:brightness();transform:translateY(0)scale(1);box-shadow:inset 0 0 #8be9fd00,0 0 #8be9fd00}}.challenge-line{grid-template-columns:1fr auto 1fr;place-items:end center;width:100%;display:grid;position:relative}.challenge-current{flex-direction:column;flex:none;grid-column:2;justify-content:flex-end;align-items:center;display:flex;position:relative}.challenge-focus{justify-content:center;align-items:flex-end;min-width:max-content;padding:0 6px;display:inline-flex;position:relative}.challenge-focus:before,.challenge-focus:after{content:"";background:var(--challenge-focus-guide);width:1px;height:clamp(84px,10vw,128px);box-shadow:1px 0 0 var(--challenge-focus-guide-shadow);border-radius:999px;position:absolute;top:50%;transform:translateY(-50%)}.challenge-focus:before{left:-40px}.challenge-focus:after{right:-40px}.challenge-character,.challenge-upcoming-character,.keycap-shift-label,.keycap-base-label{font-family:var(--typing-display-font)}.challenge-character{color:var(--strong-text);vertical-align:bottom;text-shadow:0 0 40px var(--challenge-char-glow);font-size:clamp(5rem,9vw,8.2rem);font-weight:800;line-height:.88;display:inline-block}.challenge-character-upper{font-weight:800}.challenge-character-lower{font-weight:550}.challenge-character-neutral{font-weight:800}.challenge-upcoming-character.challenge-character-lower{font-weight:500}.app-build-meta-bar{z-index:30;pointer-events:none;align-items:center;gap:8px;display:flex;position:fixed;bottom:clamp(10px,1.6vw,16px);left:clamp(12px,2vw,20px)}.app-build-meta-bar>*{pointer-events:auto}.app-theme-toggle{border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);width:32px;height:32px;color:var(--strong-text);cursor:pointer;border-radius:999px;justify-content:center;align-items:center;padding:0;transition:background .18s,border-color .18s,transform .18s;display:inline-flex}.app-theme-toggle:hover{background:var(--track-bg);border-color:var(--link-text)}.app-theme-toggle:focus-visible{outline:2px solid var(--link-text);outline-offset:2px}.app-theme-toggle-icon{flex-shrink:0;width:16px;height:16px;display:block}.app-build-meta{border:1px solid var(--panel-border);background:var(--panel-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--muted-text);letter-spacing:.02em;border-radius:999px;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 10px;font-size:11px;display:flex}.app-build-meta-version{color:var(--strong-text);font-weight:700}.app-build-meta-link{color:var(--link-text,#8be9fd);text-decoration:none}.app-build-meta-link:hover{text-decoration:underline}.app-build-meta-separator{opacity:.45}.feedback-slot{justify-content:center;align-items:flex-end;width:100%;min-height:48px}.feedback-slot .feedback-copy{text-align:center;align-items:center}.feedback-slot .feedback-label{letter-spacing:.12em;font-size:clamp(1.2rem,2vw,1.6rem)}.feedback-slot .feedback-detail{font-size:12px}.challenge-card.is-miss-shake{animation:.15s ease-out challengeCardShake}.challenge-card.is-hit-flash{animation:.14s ease-out challengeCardFlash}.challenge-card.is-perfect-pop{animation:.32s cubic-bezier(.16,.9,.18,1) challengeCardPerfect}.challenge-upcoming{white-space:nowrap;flex:0 auto;grid-column:3;justify-content:flex-start;justify-self:start;align-items:flex-end;gap:clamp(20px,2vw,32px);margin-left:clamp(36px,4vw,64px);display:inline-flex}.challenge-upcoming-character{color:var(--strong-text);vertical-align:bottom;font-size:clamp(5rem,9vw,8.2rem);font-weight:800;line-height:.88;display:inline-block}.challenge-inline-gauge{width:100%}.keyboard-panel{border-radius:26px;width:100%;padding:16px;overflow-x:auto}.keyboard-setting-button{color:var(--muted-text);font:inherit;cursor:pointer;background:#ffffff0a;border:1px solid #8be9fd2e;border-radius:999px;padding:7px 10px;font-size:11px;transition:transform .18s,color .18s,border-color .18s,background-color .18s}.keyboard-setting-button:hover{color:var(--strong-text);border-color:#8be9fd6b;transform:translateY(-1px)}.keyboard-setting-button.is-active{color:#06101f;background:linear-gradient(135deg,#8be9fd,#6df7c1);border-color:#0000}.keyboard-rows{--keyboard-row-gap:8px;--keycap-min-height:54px;--key-u:clamp(34px, 4.6vw, 52px);gap:var(--keyboard-row-gap);flex-direction:column;width:max-content;min-width:max-content;margin-inline:auto;display:flex}.keyboard-row{justify-content:space-between;align-items:flex-start;gap:var(--keyboard-row-gap);width:100%;display:flex}.keycap{box-sizing:border-box;width:calc(var(--width-units,1) * var(--key-u));min-height:var(--keycap-min-height);border:1px solid var(--keycap-border);text-align:left;border-radius:16px;flex-direction:column;flex:none;justify-content:space-between;align-items:flex-start;padding:10px 12px;transition:transform .18s,border-color .18s,background-color .18s,box-shadow .18s;display:flex;position:relative;overflow:hidden}.keycap-jis-enter-anchor{width:calc(var(--width-units,1) * var(--key-u));min-height:var(--keycap-min-height);z-index:2;flex:none;position:relative}.keycap-jis-enter-slot{width:calc(var(--width-units,1) * var(--key-u));min-height:var(--keycap-min-height);visibility:hidden;pointer-events:none;flex:none}.keycap.keycap-jis-enter{--jis-enter-fill:var(--keycap-bg);--jis-enter-stroke:var(--keycap-border);width:100%;height:calc(2 * var(--keycap-min-height) + var(--keyboard-row-gap));min-height:calc(2 * var(--keycap-min-height) + var(--keyboard-row-gap));z-index:3;box-shadow:none;filter:none;background:0 0;border:none;border-radius:0;justify-content:center;align-items:center;position:absolute;top:0;left:0;overflow:visible}.keycap-jis-enter-shape{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.keycap-jis-enter-shape path{fill:var(--jis-enter-fill);stroke:var(--jis-enter-stroke);stroke-width:1.5px;vector-effect:non-scaling-stroke;transition:fill .18s,stroke .18s}.keycap-jis-enter .keycap-action-label{width:100%;height:var(--keycap-min-height);box-sizing:border-box;z-index:1;justify-content:center;align-items:center;padding:0 4px;display:flex;position:absolute;top:0;left:0}.keycap.keycap-jis-enter.is-current,.keycap.keycap-jis-enter.is-shift-helper{--jis-enter-fill:color-mix(in srgb, #6df7c1 18%, var(--keycap-bg));--jis-enter-stroke:#6df7c1d9;box-shadow:none;filter:drop-shadow(0 0 10px #6df7c138);background:0 0}.keycap:after{content:"";border-radius:inherit;opacity:0;pointer-events:none;background:radial-gradient(circle,#ffffffc7 0%,#ffffff47 34%,#fff0 72%);position:absolute;inset:-12%;transform:scale(.7)}@keyframes keycapPressedFlash{0%{opacity:0;transform:scale(.64)}30%{opacity:.92;transform:scale(1)}to{opacity:0;transform:scale(1.18)}}.keycap-char{--risk-alpha:0;--risk-rgb:255, 77, 77;background:linear-gradient(180deg, #ffffff0d, #ffffff08), linear-gradient(180deg, rgba(var(--risk-rgb), calc(var(--risk-alpha) * .24)), rgba(var(--risk-rgb), calc(var(--risk-alpha) * .1)));box-shadow:inset 0 0 0 1px rgba(var(--risk-rgb), calc(var(--risk-alpha) * .34)), 0 0 18px rgba(var(--risk-rgb), calc(var(--risk-alpha) * .12))}.keycap-left{--risk-rgb:255, 209, 102;border-color:#ffd16624}.keycap-right{--risk-rgb:255, 96, 96;border-color:#ff606024}.keycap-action{color:var(--muted-text);background:var(--keycap-bg);justify-content:center;align-items:center;font-size:13px}.keycap-action-label{white-space:nowrap}.keycap-action-label-lines{text-align:left;flex-direction:column;align-self:stretch;align-items:flex-start;line-height:1.05;display:flex}.keycap-shift-label{color:var(--muted-text);font-size:12px;line-height:1}.keycap-base-label{color:var(--strong-text);font-size:18px;font-weight:700;line-height:1}.keycap.is-current,.keycap.is-shift-helper{background:linear-gradient(#6df7c133,#6df7c114),linear-gradient(#ffffff0d,#ffffff08);border-color:#6df7c1b8;transform:translateY(-2px);box-shadow:0 0 26px #6df7c12e}.keycap.is-pressed-flash:after{animation:.18s ease-out keycapPressedFlash}.game-stage-footer{border-radius:24px;justify-content:flex-end;align-items:center;gap:16px;padding:14px 16px;display:flex}.footer-actions{align-items:center;gap:14px;min-width:0;margin-left:auto;display:flex}.footer-mode-controls{flex-direction:column;align-items:flex-start;gap:6px;min-width:0;display:flex}.footer-mode-buttons{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.footer-setting-controls{align-items:flex-start;gap:14px;min-width:0;display:flex}.footer-setting-group{flex-direction:column;align-items:flex-start;gap:6px;min-width:0;display:flex}.footer-setting-buttons{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.footer-mode-button,.footer-setting-button{padding:5px 9px;font-size:8px}.footer-actions .mode-button.is-active,.footer-actions .keyboard-setting-button.is-active,.footer-actions .assist-toggle.is-active{color:var(--strong-text);background:#6df7c124;border-color:#6df7c18a}.footer-separator{background:linear-gradient(#ffffff2e,#ffffff0d);border-radius:999px;align-self:stretch;width:1px;box-shadow:1px 0 #070a1047}.restart-button{border:1px solid var(--panel-border);color:var(--strong-text);font:inherit;cursor:pointer;background:linear-gradient(135deg,#8be9fd29,#6df7c129);border-radius:999px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:10px 16px;transition:transform .2s,border-color .2s,box-shadow .2s;display:inline-flex}.restart-shortcut{letter-spacing:.08em;color:var(--muted-text);font-size:7px;line-height:1}.restart-label{font-size:8px;line-height:1.1}.footer-mode-controls .keyboard-meta-label,.footer-setting-group .keyboard-meta-label{letter-spacing:.1em;margin-bottom:4px;font-size:8px}.restart-button:hover{border-color:#8be9fd80;transform:translateY(-1px)}@media (width<=1440px){.game-shell{padding:clamp(18px,2vw,28px)}.challenge-character,.challenge-upcoming-character{font-size:clamp(4.4rem,8.2vw,7.4rem)}}@media (width<=1180px){.challenge-meta{max-width:min(52%,440px)}.game-stage{min-height:0}}@media (width<=860px){.game-stage-footer{flex-direction:column;align-items:stretch}.scoreboard{grid-template-columns:1fr}.challenge-card{min-height:200px}.feedback{gap:10px}.challenge-meta{max-width:none;margin-bottom:12px;position:static}.footer-actions{flex-wrap:wrap;justify-content:space-between;width:100%;margin-left:0}.footer-separator{display:none}}@media (width<=720px){.game-shell{gap:16px;padding:16px}.challenge-meta{gap:1px;max-width:min(64%,260px);padding:6px 8px}.challenge-meta-key,.challenge-meta-item strong{font-size:6px}.challenge-meta-sample{font-size:5px}.challenge-meta-group-title-cumulative,.challenge-meta-line-cumulative-summary,.challenge-meta-line-cumulative-weak,.challenge-meta-line-hand-left,.challenge-meta-item-hand-right{display:none}.challenge-meta-group-title-session{margin-top:0}.hand-card-metrics{grid-template-columns:1fr}.footer-actions{flex-direction:column;align-items:stretch}.footer-mode-buttons{width:100%}.footer-setting-controls{flex-direction:column;align-items:stretch}.footer-setting-buttons{width:100%}.footer-mode-button,.footer-setting-button{flex:auto;justify-content:center}.challenge-line{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:24px;display:flex}.challenge-current{min-width:max-content}.feedback-inline{max-width:100%}.challenge-upcoming{white-space:normal;width:auto;margin-left:0}.challenge-lock-panel{width:94%}.keyboard-rows{min-width:720px}}@media (width<=430px){.challenge-meta,.keyboard-panel,.game-stage-footer{display:none}.game-stage-main{gap:12px}.challenge-card{gap:10px;min-height:0}.challenge-card-main{gap:4px}.challenge-lock-overlay{padding:14px}.challenge-lock-overlay:before,.challenge-lock-overlay:after{height:22px}.challenge-lock-panel{width:100%;padding:14px 12px}}.layout-modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#070a109e;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.layout-modal{border:1px solid var(--panel-border);background:var(--panel-bg);width:min(720px,100%);box-shadow:var(--panel-shadow);color:var(--strong-text);border-radius:28px;flex-direction:column;gap:16px;padding:28px 24px;display:flex}.layout-modal-title{margin:0;font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:700}.layout-modal-subtitle{color:var(--muted-text);margin:0;font-size:14px}.layout-modal-options{flex-wrap:wrap;gap:14px;display:flex}.layout-modal-option{border:1px solid var(--panel-border);background:var(--track-bg);color:var(--strong-text);cursor:pointer;text-align:left;border-radius:20px;flex-direction:column;flex:240px;align-items:stretch;gap:14px;padding:18px 16px;transition:border-color .18s,transform .18s,background .18s;display:flex}.layout-modal-option:hover{border-color:var(--link-text);transform:translateY(-1px)}.layout-modal-option.is-active{border-color:var(--link-text);box-shadow:0 0 0 1px var(--link-text)}.layout-modal-option-label{font-size:1.05rem;font-weight:700}.layout-modal-preview{flex-wrap:wrap;gap:6px;display:flex}.layout-modal-preview-key{border:1px solid var(--keycap-border);background:var(--keycap-bg);min-width:28px;min-height:34px;font-family:var(--typing-display-font);border-radius:8px;flex-direction:column;justify-content:center;align-items:center;padding:4px 6px;line-height:1;display:inline-flex}.layout-modal-preview-shift{color:var(--muted-text);min-height:10px;font-size:9px}.layout-modal-preview-base{font-size:13px;font-weight:700}.layout-modal-cancel{color:var(--muted-text);cursor:pointer;background:0 0;border:none;border-radius:999px;align-self:flex-end;padding:8px 14px}.layout-modal-cancel:hover{color:var(--strong-text)}.kana-shell{height:100dvh;max-height:100dvh;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));box-sizing:border-box;background:var(--app-bg,#f4f7fb);color:var(--strong-text,#142033);touch-action:manipulation;-webkit-user-select:none;user-select:none;overscroll-behavior:none;flex-direction:column;display:flex;overflow:hidden}.kana-main{flex-direction:column;flex:1;gap:8px;width:100%;max-width:480px;min-height:0;margin:0 auto;display:flex;overflow:hidden}.kana-shell .app-build-meta-bar{z-index:auto;pointer-events:auto;flex-wrap:wrap;flex:none;justify-content:flex-start;gap:6px;width:100%;position:static;bottom:auto;left:auto}.kana-shell .app-build-meta{flex:auto;min-width:0;padding:5px 8px;font-size:10px}.kana-challenge{flex-direction:column;flex:0 0 34dvh;justify-content:flex-start;gap:6px;height:34dvh;min-height:0;max-height:34dvh;display:flex;overflow:hidden}.kana-main-spacer{pointer-events:none;flex:1 1 0;min-height:0}.kana-bottom-dock{flex-direction:column;flex:none;gap:8px;min-height:0;display:flex}.kana-most-missed{background:var(--panel-bg,#ffffffb8);border:1px solid var(--keycap-border,#14203314);border-radius:12px;flex:none;min-width:0;padding:6px 10px}.kana-most-missed-text{white-space:nowrap;text-overflow:ellipsis;letter-spacing:.02em;color:var(--muted-text,#6b7a90);font-size:11px;line-height:1.3;display:block;overflow:hidden}.kana-prompt{text-align:center;background:var(--panel-bg,#ffffffb8);border:1px solid var(--keycap-border,#14203314);border-radius:16px;flex-direction:column;flex:auto;justify-content:center;align-items:stretch;gap:8px;min-height:0;padding:10px 12px 8px;transition:border-color .18s,background-color .18s;display:flex;position:relative;overflow:hidden}.kana-prompt.is-hit{border-color:#6df7c18c}.kana-prompt.is-miss,.kana-prompt.is-locked{border-color:#ff60608c}.kana-prompt.is-miss-shake{animation:.15s ease-out challengeCardShake}.kana-prompt.is-hit-flash{animation:.14s ease-out challengeCardFlash}.kana-prompt.is-perfect-pop{animation:.32s cubic-bezier(.16,.9,.18,1) challengeCardPerfect}.kana-inline-gauge{z-index:1;flex:none;width:100%;margin:0}.kana-status-accent{font-variant-numeric:tabular-nums;color:var(--strong-text,#142033)}.kana-lock-stripes{z-index:2;pointer-events:none;position:absolute;inset:0}.kana-lock-stripes:before,.kana-lock-stripes:after{content:"";opacity:.78;background:repeating-linear-gradient(135deg,#ffb527e6 0 26px,#281200d6 26px 52px);height:clamp(18px,5.5%,28px);animation:.6s ease-in-out infinite alternate kana-lock-stripe-pulse;position:absolute;left:0;right:0;box-shadow:0 0 22px #ff1f4d8a,inset 0 0 18px #ff6a0047}.kana-lock-stripes:before{background-position:0 0;border-bottom:2px solid #ff1f4de0;animation-name:kana-lock-stripe-slide-top,kana-lock-stripe-pulse;animation-duration:.6s,.6s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,alternate;top:0}.kana-lock-stripes:after{background-position:0 0;border-top:2px solid #ff1f4de0;animation-name:kana-lock-stripe-slide-bottom,kana-lock-stripe-pulse;animation-duration:.6s,.6s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-direction:normal,alternate;bottom:0}@keyframes kana-lock-stripe-slide-top{0%{background-position:0 0}to{background-position:52px 0}}@keyframes kana-lock-stripe-slide-bottom{0%{background-position:0 0}to{background-position:-52px 0}}@keyframes kana-lock-stripe-pulse{0%{opacity:.62}to{opacity:.88}}.kana-prompt-stage{z-index:1;pointer-events:none;height:calc(var(--kana-glyph-size) * 1.35);--kana-glyph-size:clamp(28px, min(11vw, 11dvh), 52px);flex:none;position:relative}.kana-current-slot{justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.kana-current{font-size:var(--kana-glyph-size);font-weight:700;line-height:1}.kana-upcoming-slot{margin-left:calc(var(--kana-glyph-size) * .55 + clamp(8px, 2.5vw, 16px));max-width:calc(50% - var(--kana-glyph-size) * .55);justify-content:flex-start;align-items:center;gap:clamp(6px,2vw,12px);display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translateY(-50%)}.kana-upcoming{font-size:var(--kana-glyph-size);color:var(--muted-text,#6b7a90);opacity:var(--upcoming-opacity,.55);flex:none;font-weight:700;line-height:1}.kana-status{z-index:1;letter-spacing:.08em;color:#5eb7ff;flex:none;margin:0;font-size:12px;font-weight:700;position:relative}.kana-status-detail{display:none}.kana-flick-pad{background:var(--panel-bg,#ffffffb8);border:1px solid var(--keycap-border,#14203314);box-sizing:border-box;border-radius:16px;flex:0 0 33.333dvh;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(5,1fr);align-self:stretch;gap:6px;min-width:0;height:33.333dvh;min-height:0;max-height:33.333dvh;margin-top:0;padding:6px;display:grid}.kana-flick-pad.is-locked{opacity:.72}.kana-flick-row{display:contents}.kana-flick-key{appearance:none;border:1px solid var(--keycap-border,#1420331a);box-sizing:border-box;background:var(--keycap-bg,#ffffffeb);height:100%;min-height:0;color:inherit;font:inherit;touch-action:none;cursor:pointer;border-radius:14px;grid-template:".up."minmax(0,.85fr)"left center right"minmax(0,1.3fr)".down."minmax(0,.85fr)/minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);place-items:center;padding:2px;display:grid;overflow:hidden}.kana-flick-key.is-spacer{visibility:hidden;pointer-events:none;background:0 0;border:none}.kana-flick-key.is-skeleton{pointer-events:none;cursor:default;opacity:.45}.kana-flick-key.is-restart{opacity:.78;cursor:pointer;justify-content:center;align-items:center;padding:4px 2px;display:flex}.kana-restart-label{writing-mode:horizontal-tb;text-align:center;letter-spacing:.04em;color:var(--strong-text,#142033);font-size:10px;font-weight:600;line-height:1.15}.kana-flick-key.is-restart:active,.kana-flick-key:active:not(.is-skeleton):not(.is-restart){background:#6df7c129;transform:scale(.98)}.kana-flick-glyph{--glyph-risk:0;--risk-rgb:255, 77, 77;box-sizing:border-box;color:color-mix(in srgb, rgb(var(--risk-rgb)) calc(var(--glyph-risk) * 100%), currentColor);background:rgba(var(--risk-rgb), calc(var(--glyph-risk) * .45));box-shadow:inset 0 0 0 1px rgba(var(--risk-rgb), calc(var(--glyph-risk) * .55));border-radius:6px;padding:1px 2px}.kana-flick-center{text-align:center;grid-area:center;max-width:100%;max-height:100%;font-size:clamp(14px,4.2dvh,22px);font-weight:700;line-height:1;overflow:hidden}.kana-flick-hint{max-width:100%;max-height:100%;color:var(--muted-text,#6b7a90);text-align:center;font-size:clamp(9px,2.2dvh,12px);line-height:1;overflow:hidden}.kana-flick-hint.is-up{grid-area:up}.kana-flick-hint.is-down{grid-area:down}.kana-flick-hint.is-left{grid-area:left}.kana-flick-hint.is-right{grid-area:right}.kana-footer{flex-wrap:nowrap;flex:none;align-items:center;gap:8px;width:100%;margin:0 0 4px;display:flex;overflow:hidden}.kana-footer-group{flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;display:flex}.kana-footer-label{letter-spacing:.08em;color:var(--muted-text,#6b7a90);font-size:9px}.kana-footer-button{appearance:none;border:1px solid var(--keycap-border,#1420331f);background:var(--panel-bg,#ffffffb8);color:inherit;font:inherit;cursor:pointer;white-space:nowrap;border-radius:999px;padding:6px 10px;font-size:12px}.kana-footer-button.is-active{color:#06101f;background:linear-gradient(135deg,#8be9fd,#6df7c1);border-color:#0000}@media (prefers-reduced-motion:reduce){.kana-lock-stripes:before,.kana-lock-stripes:after{animation:none}}
