.jf-root{--jf-accent:#4f46e5;--jf-accent-hover:#4338ca;--jf-bg:#f8fafc;--jf-card:#fff;--jf-ink:#0f172a;--jf-muted:#64748b;--jf-border:#e2e8f0;--jf-success:#10b981;--jf-success-bg:#ecfdf5;--jf-warning:#f59e0b;--jf-warning-bg:#fffbeb;--jf-error:#ef4444;width:100%;max-width:440px;color:var(--jf-ink);background-color:var(--jf-bg);box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0 auto;padding:12px 16px 24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}@media (prefers-color-scheme:dark){.jf-root{--jf-bg:#0f172a;--jf-card:#1e293b;--jf-ink:#f8fafc;--jf-muted:#94a3b8;--jf-border:#334155;--jf-success-bg:#064e3b;--jf-warning-bg:#78350f}}.jf-hud{background:var(--jf-card);border:1px solid var(--jf-border);border-radius:12px;justify-content:space-between;align-items:center;margin-bottom:16px;padding:8px 12px;display:flex}.jf-progress-dots{align-items:center;gap:6px;display:flex}.jf-dot{background:var(--jf-border);width:22px;height:22px;color:var(--jf-muted);border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:700;transition:all .2s;display:flex}.jf-dot.active{background:var(--jf-accent);color:#fff;transform:scale(1.1);box-shadow:0 0 0 3px #4f46e533}.jf-dot.solved{background:var(--jf-success);color:#fff}.jf-dot.skipped{background:var(--jf-warning);color:#fff}.jf-timer-box{flex-direction:column;align-items:flex-end;display:flex}.jf-timer{font-variant-numeric:tabular-nums;color:var(--jf-ink);font-size:18px;font-weight:800}.jf-penalty-tag{color:var(--jf-warning);font-size:11px;font-weight:600}.jf-card{background:var(--jf-card);border:1px solid var(--jf-border);text-align:center;border-radius:16px;padding:20px 16px;box-shadow:0 2px 8px #0000000a}.jf-stage-title{text-transform:uppercase;letter-spacing:.05em;color:var(--jf-muted);margin-bottom:16px;font-size:13px;font-weight:700}.jf-slots-container{margin-bottom:24px}.jf-slots-row{justify-content:center;gap:8px;min-height:54px;display:flex}.jf-slot{border:2px dashed var(--jf-border);background:var(--jf-bg);text-transform:uppercase;width:48px;height:52px;color:var(--jf-ink);cursor:pointer;border-radius:10px;justify-content:center;align-items:center;font-size:24px;font-weight:800;transition:all .15s;display:flex}.jf-slot.filled{border:2px solid var(--jf-accent);background:var(--jf-card);box-shadow:0 2px 4px #4f46e526}.jf-slot.filled:active{transform:translateY(2px)}.jf-slot.solved{border-color:var(--jf-success);background:var(--jf-success-bg);color:var(--jf-success)}.jf-slot.revealed{border-color:var(--jf-warning);background:var(--jf-warning-bg);color:var(--jf-warning)}.jf-rack-section{margin-bottom:24px}.jf-rack-label{color:var(--jf-muted);margin-bottom:10px;font-size:12px;font-weight:600}.jf-rack-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.jf-tile-btn{border:1px solid var(--jf-border);background:var(--jf-card);width:48px;min-width:44px;height:52px;min-height:44px;color:var(--jf-ink);text-transform:uppercase;box-shadow:0 3px 0 var(--jf-border);cursor:pointer;border-radius:10px;outline:none;justify-content:center;align-items:center;font-size:22px;font-weight:800;transition:all .1s;display:flex}.jf-tile-btn:active:not(:disabled){box-shadow:0 1px 0 var(--jf-border);transform:translateY(2px)}.jf-tile-btn:disabled{opacity:.25;cursor:default;box-shadow:none;background:var(--jf-bg);transform:none}.jf-banner{min-height:24px;margin-bottom:16px;font-size:13px;font-weight:700;transition:opacity .2s}.jf-banner.error{color:var(--jf-error)}.jf-banner.success{color:var(--jf-success)}.jf-banner.warning{color:var(--jf-warning)}.jf-actions-row{justify-content:center;gap:10px;display:flex}.jf-btn{cursor:pointer;border:none;border-radius:10px;outline:none;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:10px 16px;font-size:14px;font-weight:700;transition:all .15s;display:flex}.jf-btn-primary{background:var(--jf-accent);color:#fff;flex:2}.jf-btn-primary:hover:not(:disabled){background:var(--jf-accent-hover)}.jf-btn-primary:disabled{opacity:.4;cursor:not-allowed}.jf-btn-secondary{background:var(--jf-bg);border:1px solid var(--jf-border);color:var(--jf-ink);flex:1}.jf-btn-secondary:hover:not(:disabled){background:var(--jf-border)}.jf-btn-skip{background:var(--jf-warning-bg);border:1px solid var(--jf-warning);color:var(--jf-warning);flex:1}.jf-btn-skip:hover:not(:disabled){background:#f59e0b33}.jf-summary-card{background:var(--jf-card);border:1px solid var(--jf-border);text-align:center;border-radius:16px;padding:24px 20px;box-shadow:0 4px 12px #0000000d}.jf-summary-icon{margin-bottom:8px;font-size:40px}.jf-summary-title{margin:0 0 16px;font-size:22px;font-weight:800}.jf-stats-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px;display:grid}.jf-stat-box{background:var(--jf-bg);border:1px solid var(--jf-border);border-radius:10px;padding:12px 8px}.jf-stat-box.full-width{border-color:var(--jf-accent);background:#4f46e50f;grid-column:span 2}.jf-stat-value{color:var(--jf-ink);font-size:20px;font-weight:800}.jf-stat-value.highlight{color:var(--jf-accent);font-size:26px}.jf-stat-label{color:var(--jf-muted);text-transform:uppercase;margin-top:2px;font-size:11px;font-weight:600}.jf-word-list{background:var(--jf-bg);text-align:left;border-radius:10px;margin-bottom:20px;padding:12px 14px}.jf-word-row{border-bottom:1px solid var(--jf-border);justify-content:space-between;align-items:center;padding:6px 0;font-size:14px;display:flex}.jf-word-row:last-child{border-bottom:none}.jf-word-text{letter-spacing:.05em;text-transform:uppercase;font-weight:700}.jf-word-status{font-size:12px;font-weight:600}.jf-word-status.solved{color:var(--jf-success)}.jf-word-status.skipped{color:var(--jf-warning)}@keyframes jf-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.jf-shake{animation:.35s ease-in-out jf-shake}@media (prefers-reduced-motion:reduce){.jf-shake{animation:none;border-color:var(--jf-error)!important}.jf-dot.active{transform:none}}.jf-rank-banner{border-radius:8px;justify-content:center;align-items:center;gap:6px;margin-bottom:16px;padding:8px 12px;font-size:13px;font-weight:700;display:flex}.jf-rank-banner.ranked{background:var(--jf-success-bg);color:var(--jf-success);border:1px solid var(--jf-success)}.jf-rank-banner.unranked{background:var(--jf-warning-bg);color:var(--jf-warning);border:1px solid var(--jf-warning)}
