:root{--bg:#0f172a;--bg-accent:#1e293b;--fg:#f8fafc;--fg-muted:rgba(248,250,252,.7);--panel:rgba(15,23,42,.92);--shadow:0 20px 60px rgba(0,0,0,.35);--radius:14px;--transition:320ms cubic-bezier(.2,.8,.2,1)}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--fg);background:linear-gradient(135deg,var(--bg),var(--bg-accent));overflow:hidden;transition:background var(--transition)}body{min-height:100vh}.menu-toggle,body{display:flex;flex-direction:column}.menu-toggle{position:fixed;top:18px;left:18px;z-index:50;width:46px;height:46px;justify-content:center;align-items:center;gap:5px;background:hsla(0,0%,100%,.14);border:1px solid hsla(0,0%,100%,.22);border-radius:12px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease}.menu-toggle:hover{background:hsla(0,0%,100%,.22)}.menu-toggle span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px}.side-panel{position:fixed;top:0;left:0;width:min(340px,86vw);height:100%;background:var(--panel);border-right:1px solid hsla(0,0%,100%,.08);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform var(--transition);z-index:60;display:flex;flex-direction:column;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.side-panel.open{transform:translateX(0)}.side-panel-header{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 12px;border-bottom:1px solid hsla(0,0%,100%,.08)}.side-panel-header h2{margin:0;font-size:22px;letter-spacing:.4px}.icon-btn{background:transparent;border:none;color:var(--fg);font-size:28px;cursor:pointer;line-height:1;padding:4px 10px;border-radius:8px}.icon-btn:hover{background:hsla(0,0%,100%,.1)}.game-list{list-style:none;padding:14px;margin:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.game-list li{padding:16px 18px;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.08);border-radius:var(--radius);cursor:pointer;transition:background .2s ease,transform .2s ease,border-color .2s ease}.game-list li:hover{background:hsla(0,0%,100%,.12);transform:translateY(-1px);border-color:hsla(0,0%,100%,.18)}.game-list li.active{background:hsla(0,0%,100%,.18);border-color:hsla(0,0%,100%,.35)}.game-list .game-title{font-size:17px;font-weight:600}.game-list .game-desc{font-size:13px;color:var(--fg-muted);margin-top:4px}.side-scores{padding:14px 18px 22px;border-top:1px solid hsla(0,0%,100%,.08)}.side-scores h3{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--fg-muted)}.scores-table{width:100%;border-collapse:collapse}.scores-table td{padding:8px 6px;border-bottom:1px solid hsla(0,0%,100%,.06);font-size:14px}.scores-table tr:last-child td{border-bottom:none}.scores-table .scores-name{width:100%}.scores-table .scores-value{text-align:right;font-weight:700;font-size:16px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;animation:scoreBump .42s cubic-bezier(.3,1.6,.4,1)}.scores-table .leader-row td{color:#fde047}.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;opacity:0;transition:opacity var(--transition)}.backdrop.show{opacity:1}.stage{min-height:100vh}.stage,.welcome{flex:1 1;display:flex;flex-direction:column}.welcome{align-items:center;justify-content:center;text-align:center;padding:24px}.welcome h1{font-size:clamp(36px,6vw,64px);margin:0 0 12px;letter-spacing:.5px}.welcome p{font-size:18px;color:var(--fg-muted);margin:0}.game-view{flex:1 1;display:flex;flex-direction:column;min-height:100vh}.game-bar{justify-content:space-between;padding:18px 22px 18px 78px}.game-bar,.game-bar-left,.game-bar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.game-bar-right{justify-content:flex-end}.current-game-name{font-size:18px;font-weight:600;opacity:.9}.ghost-btn{background:hsla(0,0%,100%,.12);border:1px solid hsla(0,0%,100%,.2);color:var(--fg);padding:8px 14px;border-radius:10px;cursor:pointer;font-size:14px;transition:background .2s ease}.ghost-btn:hover{background:hsla(0,0%,100%,.22)}.ghost-btn:disabled{opacity:.4;cursor:not-allowed}.ghost-btn:disabled:hover{background:hsla(0,0%,100%,.12)}.controls-toggle{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.14);border:1px solid hsla(0,0%,100%,.22);color:var(--fg);border-radius:10px;cursor:pointer;font-size:22px;line-height:1;transition:background .16s ease;flex-shrink:0}.controls-toggle:hover{background:hsla(0,0%,100%,.24)}.difficulty-label{font-size:13px;color:var(--fg-muted)}.difficulty-select{background:hsla(0,0%,100%,.12);border:1px solid hsla(0,0%,100%,.2);color:var(--fg);padding:8px 12px;border-radius:10px;font-size:14px;cursor:pointer}.difficulty-select option{background:#1e293b;color:var(--fg)}.display-area{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}.display{font-size:clamp(44px,9vw,120px);font-weight:800;line-height:1.05;letter-spacing:.5px;max-width:1100px;text-shadow:0 6px 30px rgba(0,0,0,.35);word-break:break-word}.display.animate{animation:pop var(--transition)}.meta{margin-top:16px;font-size:16px;color:var(--fg-muted)}@keyframes pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.game-footer{display:flex;justify-content:center;padding:22px 22px 36px}.next-btn{background:hsla(0,0%,100%,.95);color:#111827;font-size:22px;font-weight:700;padding:18px 56px;border-radius:999px;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .16s ease,background .2s ease}.next-btn:hover{transform:translateY(-2px)}.next-btn:active{transform:translateY(0)}.next-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width:1024px){.game-bar{padding:14px 16px 14px 70px;gap:10px}.game-bar-left,.game-bar-right{gap:8px}.current-game-name{font-size:16px}.difficulty-select,.ghost-btn{padding:7px 10px;font-size:13px}.controls-toggle{width:34px;height:34px;font-size:20px}.scoreboard{padding:4px 14px 0;gap:8px}.score-card{min-width:108px;padding:8px 10px}.score-name{font-size:11px;gap:6px}.score-value{font-size:26px}.display{font-size:clamp(40px,9vw,96px)}.next-btn{padding:16px 44px;font-size:20px}.game-footer{padding:16px 16px 28px}}@media (max-width:600px){.menu-toggle{width:42px;height:42px;top:12px;left:12px}.game-bar{padding:12px 12px 12px 62px;gap:8px}.game-bar-left{flex:1 1;min-width:0}.game-bar-left .ghost-btn{padding:6px 8px;font-size:12px}.current-game-name{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.game-bar-right{width:100%;justify-content:flex-end}.scoreboard{padding:4px 10px 0;gap:6px}.score-card{min-width:96px;padding:6px 8px}.score-name{font-size:10px;letter-spacing:.3px}.score-value{font-size:22px}.display{font-size:clamp(34px,11vw,64px)}.meta{font-size:13px}.next-btn{padding:14px 36px;font-size:18px}.game-footer{padding:14px 12px 24px}.setup{padding:70px 14px 24px}.setup-card{padding:22px 18px}.setup-title{font-size:22px}.group-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.modal{padding:18px}.modal-group-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}.group-pick{padding:8px 6px;font-size:13px}.result-btn{padding:14px 10px;font-size:15px}}.setup{flex:1 1;display:flex;align-items:center;justify-content:center;padding:80px 24px 32px;overflow-y:auto}.setup-card{position:relative;width:100%;max-width:720px;background:rgba(15,23,42,.55);border:1px solid hsla(0,0%,100%,.12);border-radius:20px;padding:32px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}.setup-close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.18);border-radius:10px;color:var(--fg);font-size:22px;cursor:pointer;transition:background .16s ease;line-height:1}.setup-close:hover{background:hsla(0,0%,100%,.18)}.setup-title{margin:0 0 6px;font-size:28px}.setup-sub{margin:0 0 22px;color:var(--fg-muted)}.count-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.count-btn{min-width:48px;padding:10px 14px;border-radius:10px;border:1px solid hsla(0,0%,100%,.18);background:hsla(0,0%,100%,.08);color:var(--fg);font-weight:600;cursor:pointer;transition:all .18s ease}.count-btn:hover{background:hsla(0,0%,100%,.16)}.count-btn.active{background:hsla(0,0%,100%,.95);color:#111827;border-color:hsla(0,0%,100%,.95)}.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:10px;gap:10px;margin-bottom:24px}.group-edit{display:flex;align-items:center;gap:10px;padding:10px 12px;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.1);border-radius:12px}.group-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 2px hsla(0,0%,100%,.15)}.group-input{flex:1 1;background:transparent;border:none;color:var(--fg);font-size:15px;outline:none;min-width:0}.group-input::placeholder{color:hsla(0,0%,100%,.4)}.start-btn{width:100%;background:hsla(0,0%,100%,.95);color:#111827;font-size:18px;font-weight:700;padding:14px 24px;border-radius:12px;border:none;cursor:pointer;transition:transform .16s ease}.start-btn:hover{transform:translateY(-1px)}.scoreboard{display:flex;flex-wrap:wrap;gap:10px;padding:6px 22px 0;justify-content:center}.score-card{min-width:130px;background:rgba(0,0,0,.25);border:2px solid transparent;border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:4px;transition:transform .18s ease,box-shadow .22s ease}.score-card.leader{box-shadow:0 0 0 2px var(--group-color),0 0 22px var(--group-color);transform:translateY(-2px)}.score-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:hsla(0,0%,100%,.9);text-transform:uppercase;letter-spacing:.4px}.score-dot{width:10px;height:10px;border-radius:50%}.crown{margin-left:auto;color:#fde047;font-size:14px}.score-value{font-size:32px;font-weight:800;color:var(--fg);line-height:1;animation:scoreBump .42s cubic-bezier(.3,1.6,.4,1)}@keyframes scoreBump{0%{transform:scale(1)}35%{transform:scale(1.45);color:var(--group-color,var(--fg))}to{transform:scale(1)}}.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .18s ease}.modal{width:100%;max-width:460px;background:#1e293b;border:1px solid hsla(0,0%,100%,.12);border-radius:18px;padding:22px;box-shadow:var(--shadow);animation:modalIn .22s cubic-bezier(.2,.9,.2,1)}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.modal-header h3{margin:0;font-size:20px}.modal-current{margin:0 0 18px;padding:12px 14px;background:hsla(0,0%,100%,.06);border-radius:10px;display:flex;flex-direction:column;gap:2px}.modal-current-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--fg-muted)}.modal-current-value{font-size:20px;font-weight:700}.modal-label{display:block;font-size:13px;color:var(--fg-muted);margin-bottom:6px}.modal-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-gap:8px;gap:8px;margin-bottom:18px}.group-pick{border:2px solid;border-radius:10px;padding:10px 8px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s ease,background .16s ease,color .16s ease;text-align:center;word-break:break-word}.group-pick:hover{transform:translateY(-1px)}.group-pick.selected{box-shadow:0 0 0 3px hsla(0,0%,100%,.15)}.modal-actions{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px;margin-bottom:12px}.result-btn{border:none;border-radius:12px;padding:16px 12px;cursor:pointer;font-size:17px;font-weight:700;color:#fff;display:flex;flex-direction:column;gap:4px;align-items:center;transition:transform .14s ease,filter .18s ease}.result-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.result-btn.correct{background:#16a34a}.result-btn.wrong{background:#dc2626}.result-points{font-size:11px;font-weight:500;opacity:.85;text-transform:uppercase;letter-spacing:.4px}.skip-btn{width:100%;background:transparent;color:var(--fg-muted);border:1px dashed hsla(0,0%,100%,.2);padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px}.skip-btn:hover{color:var(--fg);border-color:hsla(0,0%,100%,.4)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalIn{0%{transform:translateY(12px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.modal-confirm-body{margin:0 0 8px;font-size:15px;line-height:1.5}.modal-note{margin:0 0 18px;font-size:13px;color:var(--fg-muted)}.modal-actions-confirm{grid-template-columns:1fr 1fr}.cancel-btn{padding:16px 12px;border-radius:12px;font-size:16px;font-weight:600}.lock-screen{flex:1 1;display:flex;align-items:center;justify-content:center;padding:24px}.lock-card{width:100%;max-width:380px;background:rgba(15,23,42,.55);border:1px solid hsla(0,0%,100%,.12);border-radius:20px;padding:32px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:14px;text-align:center}.lock-title{margin:0;font-size:28px;letter-spacing:.4px}.lock-sub{margin:0;color:var(--fg-muted);font-size:14px}.lock-input{width:100%;padding:14px 16px;background:hsla(0,0%,100%,.08);color:var(--fg);border:1px solid hsla(0,0%,100%,.18);border-radius:12px;font-size:16px;letter-spacing:1px;text-align:center;outline:none;transition:border-color .16s ease,background .16s ease}.lock-input:focus{border-color:hsla(0,0%,100%,.45);background:hsla(0,0%,100%,.12)}.lock-input.error{border-color:#f87171;background:hsla(0,91%,71%,.1)}.lock-error{color:#fca5a5;font-size:13px;margin-top:-4px}.lock-btn{width:100%;background:hsla(0,0%,100%,.95);color:#111827;font-size:16px;font-weight:700;padding:14px 24px;border-radius:12px;border:none;cursor:pointer;transition:transform .16s ease,opacity .16s ease}.lock-btn:hover{transform:translateY(-1px)}.lock-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}