:root{--bg:#f4f7fb;--card:#fff;--ink:#1f2937;--muted:#667085;--primary:#6d5dfc;--primary2:#8f82ff;--ok:#198754;--bad:#dc3545;--line:#e6e9f0;--shadow:0 12px 35px rgba(35,45,85,.10)}
*{box-sizing:border-box}.zs-app{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;max-width:900px;margin:24px auto;background:linear-gradient(180deg,#f9faff,var(--bg));color:var(--ink);border-radius:24px;padding:18px;box-shadow:var(--shadow)}.zs-top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:14px}.zs-brand{display:flex;align-items:center;gap:12px}.zs-logo{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;font-size:28px}.zs-title{margin:0;font-size:clamp(24px,4vw,38px)}.zs-sub{margin:2px 0 0;color:var(--muted)}.zs-stats{display:flex;gap:8px;flex-wrap:wrap}.zs-pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 12px;font-weight:700}.zs-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px;margin:18px 0}.zs-btn{border:0;border-radius:14px;padding:13px 15px;font-weight:800;cursor:pointer;transition:.15s transform,.15s box-shadow;background:#fff;color:var(--ink);border:1px solid var(--line)}.zs-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(35,45,85,.09)}.zs-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;border:0}.zs-btn.ghost{background:#f8f8ff}.zs-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.zs-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:14px;margin-bottom:10px}.zs-question{font-size:clamp(21px,3vw,30px);font-weight:900;margin:8px 0 18px}.zs-scramble{font-size:clamp(25px,5vw,42px);letter-spacing:7px;text-align:center;background:#f5f3ff;border-radius:16px;padding:18px;margin-bottom:15px}.zs-options{display:grid;gap:10px}.zs-option{width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;padding:14px;font-size:17px;font-weight:750;cursor:pointer}.zs-option:hover{border-color:#b9b1ff}.zs-option.correct{border-color:var(--ok);background:#edf9f2}.zs-option.wrong{border-color:var(--bad);background:#fff0f1}.zs-inputrow{display:flex;gap:8px;flex-wrap:wrap}.zs-input{flex:1;min-width:180px;border:2px solid var(--line);border-radius:14px;padding:13px;font-size:18px;text-transform:uppercase}.zs-feedback{margin-top:14px;padding:13px;border-radius:14px;display:none}.zs-feedback.show{display:block}.zs-feedback.ok{background:#edf9f2;color:#11613a}.zs-feedback.bad{background:#fff0f1;color:#8a1d28}.zs-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px;flex-wrap:wrap}.zs-progress{height:10px;background:#e9ecf3;border-radius:999px;overflow:hidden;margin:10px 0 16px}.zs-progress>div{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2));width:0%}.zs-home{padding:18px;text-align:center}.zs-home h2{font-size:28px;margin:4px 0 6px}.zs-home p{color:var(--muted);max-width:650px;margin:0 auto 12px}.zs-small{font-size:13px;color:var(--muted)}.zs-result{text-align:center;padding:14px}.zs-score{font-size:64px;font-weight:1000;line-height:1}@media(max-width:560px){.zs-app{margin:0;border-radius:0;min-height:100vh}.zs-card{padding:16px}.zs-top{align-items:flex-start}}

.zs-player-card{max-width:650px;margin:0 auto}.zs-label{display:block;font-weight:800;margin:14px 0 6px}.zs-select{flex:1;min-width:210px;border:2px solid var(--line);border-radius:14px;padding:13px;background:#fff;font-size:16px}.zs-divider{display:flex;align-items:center;gap:12px;color:var(--muted);margin:20px 0}.zs-divider:before,.zs-divider:after{content:"";height:1px;background:var(--line);flex:1}.zs-player-actions{justify-content:center}.zs-ranking-list{display:grid;gap:8px}.zs-ranking-row{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}.zs-player-pill{max-width:210px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:560px){.zs-ranking-row{align-items:flex-start;flex-direction:column}.zs-stats{width:100%}}