:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}button,input,select{font:inherit}:root{--bg:#0b1220;--card:#111a2e;--card2:#0f1730;--text:#e7ecff;--muted:#a9b3d6;--accent:#5eead4;--danger:#ff7b7b;--ok:#7cffb2;--radius:16px;--shadow:0 10px 30px #00000059}body{background:radial-gradient(1200px 700px at 20% 10%, #5eead426, transparent 60%), radial-gradient(1000px 700px at 80% 0%, #7e8bff29, transparent 55%), var(--bg);color:var(--text)}#app{justify-content:center;align-items:center;min-height:100%;padding:18px;display:flex}.screen{flex-direction:column;gap:14px;width:min(520px,100%);display:flex}h1{letter-spacing:.2px;margin:0 0 2px;font-size:28px}h2{color:var(--muted);margin:0;font-size:16px;font-weight:600}.muted{color:var(--muted)}.card{border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#ffffff0a,#ffffff05);border:1px solid #ffffff1a;flex-direction:column;gap:10px;padding:14px;display:flex}.subcard{background:linear-gradient(#ffffff08,#ffffff03);padding:12px}.input{height:44px;color:var(--text);background:#0003;border:1px solid #ffffff24;border-radius:12px;outline:none;padding:0 12px}.input:focus{border-color:#5eead480;box-shadow:0 0 0 4px #5eead424}.labelRow,label{color:var(--muted);font-size:14px;font-weight:600}.actions{flex-wrap:wrap;gap:10px;margin-top:6px;display:flex}.btn{cursor:pointer;letter-spacing:.2px;border:1px solid #ffffff24;border-radius:14px;height:46px;padding:0 14px;font-weight:800;transition:transform 50ms,filter 80ms}.btn:active{transform:translateY(1px)}.btn.primary{color:#001014;background:linear-gradient(#5eead4e6,#5eead4a6);border-color:#5eead499}.btn.ghost{color:var(--text);background:#0003}.recentList{flex-direction:column;gap:8px;display:flex}.recentRow{align-items:center;gap:10px;display:flex}.recentPick{height:44px;color:var(--text);cursor:pointer;text-align:left;background:#0000002e;border:1px solid #ffffff1f;border-radius:12px;flex:1;padding:0 12px;font-weight:700}.iconBtn{width:44px;height:44px;color:var(--text);cursor:pointer;background:#0000002e;border:1px solid #ffffff1f;border-radius:12px}.emojiGrid{grid-template-columns:repeat(8,1fr);gap:8px;display:grid}@media (max-width:420px){.emojiGrid{grid-template-columns:repeat(6,1fr)}}.emojiBtn{cursor:pointer;background:#0000002e;border:1px solid #ffffff1f;border-radius:12px;height:44px;font-size:20px}.emojiBtn.selected{border-color:#5eead499;box-shadow:0 0 0 3px #5eead424}.gameHeader{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.chip,.playerChip{background:#0000002e;border:1px solid #ffffff1f;border-radius:999px;padding:8px 12px;font-weight:800}.question{text-align:center;padding:8px 0;font-size:36px;font-weight:900}@media (max-width:420px){.question{font-size:32px}}.feedback{text-align:center;letter-spacing:.2px;height:20px;color:var(--muted);pointer-events:none;font-weight:900}.feedback.ok{color:var(--ok)}.feedback.ko{color:var(--danger)}.optionGrid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.optionBtn{height:64px;color:var(--text);cursor:pointer;background:#0000002e;border:1px solid #ffffff24;border-radius:16px;font-size:22px;font-weight:900}.optionBtn:active{transform:translateY(1px)}.badgeToast{text-align:center;height:22px;color:var(--accent);opacity:0;pointer-events:none;font-weight:900;transition:opacity .12s,transform .12s;transform:translateY(4px)}.badgeToast.show{opacity:1;transform:translateY(0)}.filterRow{align-items:center;gap:10px;display:flex}.scoreTable{flex-direction:column;gap:10px;margin-top:6px;display:flex}.scoreRow{background:#00000024;border:1px solid #ffffff1a;border-radius:14px;grid-template-columns:34px 1fr 64px 120px;align-items:center;gap:10px;padding:10px;display:grid}@media (max-width:480px){.scoreRow{grid-template-columns:34px 1fr 64px;grid-template-areas:"rank who score""rank date date"}.scoreDate{grid-area:date}}.scoreRank{color:var(--accent);text-align:center;font-weight:900}.scoreWho{font-weight:900}.scoreValue{text-align:right;font-weight:900}.scoreDate{color:var(--muted);text-align:right;font-size:12px}.scoreRow.clickable{cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left}.scoreRow.clickable:hover{border-color:#5eead459;transform:translateY(-1px)}.scoreRow.clickable:active{transform:translateY(0)}.scoreRow.clickable:focus{outline-offset:2px;outline:2px solid #5eead499}.modalOverlay{z-index:999;background:#0000008c;justify-content:center;align-items:center;padding:18px;display:flex;position:fixed;inset:0}.modal{background:linear-gradient(#ffffff0d,#ffffff05);border:1px solid #ffffff1f;border-radius:18px;width:min(520px,100%);padding:14px;box-shadow:0 18px 50px #00000073}.modalTitle{margin-bottom:8px;font-size:18px;font-weight:900}.modalContent{flex-direction:column;gap:8px;margin:10px 0 12px;display:flex}.modalRow{background:#00000024;border:1px solid #ffffff1a;border-radius:14px;grid-template-columns:140px 1fr;gap:10px;padding:10px;display:grid}@media (max-width:420px){.modalRow{grid-template-columns:1fr}}.modalKey{color:var(--muted);font-weight:800}.modalVal{font-weight:900}.shake{animation:.22s linear shake}@keyframes shake{0%{transform:translate(0)}30%{transform:translate(-4px)}60%{transform:translate(4px)}to{transform:translate(0)}}.levelsHost{flex-direction:column;gap:14px;display:flex}.levelSection{flex-direction:column;gap:8px;display:flex}.levelHeader{justify-content:space-between;align-items:baseline;display:flex}.scoreRow.simple{grid-template-columns:34px 1fr 60px 130px}@media (max-width:480px){.scoreRow.simple{grid-template-columns:34px 1fr 60px;grid-template-areas:"rank who score""rank date date"}}.scoreName{font-weight:900}.scoreMeta{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.pill{color:var(--muted);background:#0000002e;border:1px solid #ffffff1a;border-radius:999px;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:900;display:inline-flex}.scoreValue.big{font-size:18px}.scoreLegend{color:var(--muted);border-top:1px dashed #ffffff1f;flex-direction:column;gap:6px;margin-top:10px;padding-top:8px;font-size:13px;display:flex}.legendRow{align-items:center;gap:8px;display:flex}.legendRow span{font-size:16px}.footer{text-align:center;color:var(--muted);margin-top:10px;padding:6px 0 0;font-size:12px}