:root{--bg-app: #F6F7F8;--bg-surface: #FFFFFF;--bg-subtle: #F0F2F5;--text-primary: #111827;--text-secondary: #4B5563;--text-muted: #9CA3AF;--border-subtle: #E5E7EB;--border-strong: #111827;--border-interactive: #CBD5E1;--color-accent: #111827;--color-correct-bg: #DCFCE7;--color-correct-text: #166534;--color-correct-border: #16A34A;--color-wrong-bg: #FEE2E2;--color-wrong-text: #991B1B;--color-wrong-border: #DC2626;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;background-color:#eaecef;color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.4;user-select:none;-webkit-user-select:none}#root{width:100%;min-height:100%;display:flex;justify-content:center}.app-container{width:100%;max-width:440px;min-height:100vh;background-color:var(--bg-app);display:flex;flex-direction:column;position:relative;border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle)}@media(max-width:440px){.app-container{border-left:none;border-right:none}}.app-header{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface);flex-shrink:0}.brand-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary);display:flex;align-items:center;gap:6px}.brand-badge{font-size:10px;font-weight:600;padding:2px 5px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-secondary)}.header-btn{font-size:12px;font-weight:500;color:var(--text-secondary);background:none;border:1px solid var(--border-subtle);padding:4px 10px;border-radius:4px;cursor:pointer}.header-btn:active{background:var(--bg-subtle);color:var(--text-primary)}.setup-screen{flex:1;display:flex;flex-direction:column;padding:12px 14px;gap:12px;overflow-y:auto}.mode-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:6px;padding:3px;gap:3px}.mode-tab-btn{padding:8px 6px;font-size:12px;font-weight:700;border:none;border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;text-align:center;transition:all .1s ease}.mode-tab-btn.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:0 1px 2px #0000000d}.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:6px}.setup-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:6px;padding:12px}.segment-group{display:grid;grid-template-columns:1fr 1fr;gap:6px}.segment-group-3{grid-template-columns:repeat(3,1fr)}.segment-group-4{grid-template-columns:repeat(2,1fr);gap:6px}.segment-group-5{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.segment-btn{background:var(--bg-surface);border:1px solid var(--border-interactive);border-radius:4px;padding:8px 4px;font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;text-align:center;transition:all .1s ease;line-height:1.2}.segment-btn.active{background:var(--text-primary);border-color:var(--text-primary);color:#fff}.segment-btn:active:not(.active):not(:disabled){background:var(--bg-subtle)}.segment-btn:disabled{background:#f3f4f6;border-color:#e5e7eb;color:#9ca3af;cursor:not-allowed;opacity:.6}.sub-note{font-size:10px;color:var(--text-muted);margin-top:4px}.preset-chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.preset-chip{background:var(--bg-subtle);border:1px solid var(--border-interactive);border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500;color:var(--text-secondary);cursor:pointer}.preset-chip:hover,.preset-chip:active{background:#e2e8f0;color:var(--text-primary)}.range-row{display:flex;align-items:center;gap:8px}.range-input-group{flex:1;display:flex;flex-direction:column;gap:4px}.range-input-group label{font-size:11px;color:var(--text-secondary)}.range-input{width:100%;padding:6px 8px;font-size:13px;font-family:var(--font-mono);border:1px solid var(--border-interactive);border-radius:4px;background:var(--bg-surface);color:var(--text-primary)}.range-separator{color:var(--text-muted);font-size:13px;padding-top:16px}.range-info{font-size:11px;color:var(--text-muted);margin-top:4px}.disclaimer-box{background:#fffbeb;border:1px solid #FDE68A;border-radius:4px;padding:6px 10px;font-size:11px;color:#92400e;line-height:1.4}.pb-preview{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-secondary);padding:8px 10px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:4px}.pb-preview-val{font-family:var(--font-mono);font-weight:700;color:var(--text-primary)}.btn-primary{width:100%;padding:12px;font-size:15px;font-weight:700;background:var(--text-primary);color:#fff;border:none;border-radius:6px;cursor:pointer;margin-top:auto;text-align:center;letter-spacing:.02em}.btn-primary:active{opacity:.85}.game-screen{flex:1;display:flex;flex-direction:column;padding:10px 14px 16px;justify-content:space-between;overflow:hidden}.game-top-bar{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);padding-bottom:6px;margin-bottom:6px}.stat-item{display:flex;align-items:baseline;gap:3px}.stat-label{font-size:10px;text-transform:uppercase;color:var(--text-muted)}.stat-val{color:var(--text-primary)}.grid-meta-tag{background:var(--bg-subtle);border:1px solid var(--border-subtle);color:var(--text-secondary);padding:1px 5px;border-radius:3px;font-size:10px}.streak-tag{background:#fef3c7;color:#92400e;border:1px solid #FDE68A;padding:1px 5px;border-radius:3px;font-size:10px}.target-display-card{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:110px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:8px;margin:4px 0 10px;position:relative}.target-hint{position:absolute;top:8px;font-size:11px;color:var(--text-muted);letter-spacing:.04em}.target-text{font-size:46px;font-weight:700;line-height:1.1;color:var(--text-primary);text-align:center;padding:0 10px}.target-text.vocab{font-size:32px}.answer-grid-container{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;margin-top:auto}.answer-grid.grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:10px;height:220px}.answer-grid.grid-4 .choice-btn{font-size:26px;min-height:80px}.answer-grid.grid-4 .choice-btn.vocab{font-size:20px}.answer-grid.grid-9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;height:280px}.answer-grid.grid-9 .choice-btn{font-size:22px;min-height:60px}.answer-grid.grid-9 .choice-btn.vocab{font-size:16px}.answer-grid.grid-16{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:6px;height:320px}.answer-grid.grid-16 .choice-btn{font-size:18px;min-height:48px;padding:4px}.answer-grid.grid-16 .choice-btn.vocab{font-size:13px}.answer-grid.grid-25{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:4px;height:340px}.answer-grid.grid-25 .choice-btn{font-size:15px;min-height:40px;padding:2px 1px;border-width:1.5px}.answer-grid.grid-25 .choice-btn.vocab{font-size:11px}.choice-btn{background:var(--bg-surface);border:2px solid var(--border-interactive);border-radius:5px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .05s ease,background-color .05s ease,border-color .05s ease;-webkit-user-select:none;user-select:none;text-align:center;line-height:1.1;word-break:break-all}.choice-btn:active{transform:scale(.96);border-color:var(--border-strong);background:var(--bg-subtle)}.choice-btn.correct{background-color:var(--color-correct-bg)!important;border-color:var(--color-correct-border)!important;color:var(--color-correct-text)!important}.choice-btn.wrong{background-color:var(--color-wrong-bg)!important;border-color:var(--color-wrong-border)!important;color:var(--color-wrong-text)!important}.elim-game-screen{flex:1;display:flex;flex-direction:column;padding:10px 14px 16px;overflow:hidden;justify-content:space-between}.elim-target-bar{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:12px;height:52px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:6px;margin-bottom:10px}.elim-target-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.06em}.elim-target-char{font-size:32px;font-weight:800;line-height:1;color:var(--text-primary)}.elim-target-romaji{font-size:13px;font-weight:600;font-family:var(--font-mono);color:var(--text-secondary)}.elim-target-romaji-large{font-size:28px;font-weight:700;font-family:var(--font-mono);color:var(--text-primary);line-height:1;letter-spacing:-.02em}.elim-grid-field{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%}.elim-grid{display:grid;width:100%;gap:5px}.elim-grid.cols-5{grid-template-columns:repeat(5,1fr)}.elim-grid.cols-6{grid-template-columns:repeat(6,1fr);gap:4px}.elim-cell{background:var(--bg-surface);border:1.5px solid var(--border-interactive);border-radius:4px;font-size:19px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;justify-content:center;min-height:44px;padding:2px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .1s ease,border-color .1s ease,transform .05s ease}.elim-grid.cols-6 .elim-cell{font-size:17px;min-height:40px}.elim-cell:active:not(.eliminated){transform:scale(.95);border-color:var(--border-strong);background:var(--bg-subtle)}.elim-cell.eliminated{opacity:.04;pointer-events:none;border:1px dashed #D1D5DB;background:transparent;color:transparent}.elim-cell.wrong-flash{background-color:var(--color-wrong-bg)!important;border-color:var(--color-wrong-border)!important;color:var(--color-wrong-text)!important;transform:scale(.98)}.result-screen{flex:1;display:flex;flex-direction:column;padding:14px;gap:12px;overflow-y:auto}.pb-banner{background:#fef3c7;border:1px solid #F59E0B;color:#78350f;padding:8px 10px;border-radius:4px;font-size:12px;font-weight:700;text-align:center}.result-summary-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:6px;padding:12px}.result-header-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}.result-tag{font-size:11px;font-weight:600;padding:2px 6px;background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:4px;color:var(--text-secondary)}.result-metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric-box{background:var(--bg-subtle);border:1px solid var(--border-subtle);border-radius:4px;padding:8px 10px}.metric-label{font-size:11px;color:var(--text-secondary);margin-bottom:2px}.metric-value{font-size:19px;font-family:var(--font-mono);font-weight:700;color:var(--text-primary)}.metric-unit{font-size:11px;font-weight:500;color:var(--text-secondary);margin-left:2px}.breakdown-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:6px;padding:10px 12px}.breakdown-title{font-size:11px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.item-list{display:flex;flex-direction:column;gap:5px}.item-row{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:var(--bg-subtle);border-radius:4px;font-size:12px}.item-prompt{font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px}.item-answer-tag{font-size:11px;color:var(--text-secondary)}.item-time-tag{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-primary)}.item-wrong-tag{color:var(--color-wrong-text);font-size:11px;font-weight:600}.empty-placeholder{font-size:11px;color:var(--text-muted);font-style:italic;padding:4px 0}.result-actions{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:6px}.btn-secondary{width:100%;padding:11px;font-size:13px;font-weight:600;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:6px;cursor:pointer;text-align:center}.btn-secondary:active{background:var(--bg-subtle)}.btn-disabled{width:100%;padding:8px;font-size:11px;font-weight:500;background:transparent;color:var(--text-muted);border:1px dashed var(--border-subtle);border-radius:6px;text-align:center;cursor:not-allowed}