*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--surface:#13131a;--surface2:#1c1c28;--border:#2a2a3a;--text:#e2e2f0;--muted:#6b6b8a;--accent:#7c3aed;--accent-light:#a78bfa;--green:#15803d;--red:#b91c1c;--cyan:#22d3ee}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,system-ui,-apple-system,sans-serif}#app{flex-direction:column;min-height:100vh;display:flex}.hub{flex-direction:column;align-items:center;gap:40px;min-height:100vh;padding:48px 24px 32px;display:flex}.hub-header{text-align:center}.hub-title{letter-spacing:-.03em;color:var(--text);font-size:clamp(2rem,6vw,3.5rem);font-weight:800}.hub-title .accent{color:var(--accent-light)}.hub-sub{color:var(--muted);margin-top:8px;font-size:1rem}.game-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;width:100%;max-width:840px;display:grid}.game-card{background:var(--surface);border:1px solid var(--border);cursor:pointer;text-align:left;color:var(--text);border-radius:16px;flex-direction:column;align-items:flex-start;gap:8px;padding:28px 24px;transition:border-color .15s,transform .15s,background .15s;display:flex;position:relative}.game-card:hover:not([disabled]){border-color:var(--accent);background:var(--surface2);transform:translateY(-2px)}.game-card[disabled]{cursor:default;opacity:.5}.card-emoji{font-size:2rem}.card-title{font-size:1.2rem;font-weight:700}.card-desc{color:var(--muted);font-size:.875rem;line-height:1.5}.badge{background:var(--surface2);border:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-radius:99px;padding:2px 8px;font-size:.7rem;font-weight:600;position:absolute;top:12px;right:12px}.hub-footer{margin-top:auto;font-size:.8rem}.hub-footer a{color:var(--muted);text-decoration:none;transition:color .15s}.hub-footer a:hover{color:var(--accent-light)}.game-wrap{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:16px;display:flex}.game-back{color:var(--muted);cursor:pointer;z-index:100;background:0 0;border:none;border-radius:6px;padding:4px 8px;font-size:.85rem;transition:color .15s,background .15s;position:fixed;top:12px;left:16px}.game-back:hover{color:var(--text);background:var(--surface2)}.canvas-container{zoom:1.4;width:600px;height:400px;position:relative}@media (width<=900px){.canvas-container{zoom:1.1}}@media (width<=680px){.canvas-container{zoom:calc(100vw / 600)}}#result{color:var(--text);z-index:10;opacity:0;pointer-events:none;background:#0a0a0ff0;flex-direction:column;gap:4px;padding:8px 16px;transition:opacity .3s;display:flex;position:absolute;inset:0;overflow-y:auto}#result.visible{opacity:1;pointer-events:all}#result-cols{flex:1;grid-template-columns:1fr 1fr;gap:8px;display:grid}#result-left,#result-right{flex-direction:column;gap:4px;display:flex}.fail-reason{background:#dc26261f;border:1px solid #dc262659;border-radius:6px;flex-direction:column;gap:3px;padding:6px 10px;display:flex}.fail-label{color:#fca5a5;font-size:.8rem;font-weight:700}.fail-sentence{color:var(--text);font-size:.78rem;font-style:italic}.fail-explanation{color:var(--muted);font-size:.72rem;line-height:1.5}.score-msg{font-size:1.1rem;font-weight:700}.best-msg{color:var(--accent-light);font-size:.85rem}.combo-msg{color:var(--cyan);font-size:.8rem}.level-msg{color:var(--muted);font-size:.8rem}.lb-title{color:var(--accent-light);font-size:.85rem;font-weight:700}#lb-rank-msg{color:var(--muted);font-size:.78rem}#lb-list{flex-direction:column;gap:2px;max-height:140px;font-size:.75rem;display:flex;overflow-y:auto}.lb-row{gap:6px;display:flex}.lb-row.me{color:var(--green);font-weight:700}#review-list{max-height:80px;color:var(--muted);font-size:.72rem;overflow-y:auto}#nickname-section{flex-direction:column;gap:4px;display:none}#nickname-section label{font-size:.78rem}#nickname-section input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:6px;width:100%;padding:4px 8px;font-size:.85rem}.cta-msg{color:var(--muted);text-align:center;font-size:.8rem}.result-buttons{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.result-buttons a,.result-buttons button{cursor:pointer;border:none;border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:600;text-decoration:none}#btn-textboi{background:var(--accent);color:#fff}#btn-next-game,#btn-replay{background:var(--surface2);border:1px solid var(--border);color:var(--text)}.tip{color:var(--muted);text-align:center;font-size:.72rem}#hud{pointer-events:none;z-index:5;justify-content:space-between;padding:6px 12px;font-size:.8rem;display:flex;position:absolute;top:0;left:0;right:0}#hud-score{color:var(--text);font-weight:700}#hud-level{color:var(--cyan)}#hud-combo{color:var(--accent-light)}@keyframes flash{0%,to{opacity:1}50%{opacity:.3}}.flash{animation:.4s 3 flash}.nickname-label{color:#facc15;font-size:.75rem;font-weight:700}.nickname-row{gap:6px;display:flex}#nickname-input{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:5px;outline:none;flex:1;padding:5px 10px;font-family:inherit;font-size:.85rem}#nickname-input:focus{border-color:#facc15}#btn-submit-nick{color:#0a0a18;cursor:pointer;background:#facc15;border:none;border-radius:5px;padding:5px 12px;font-family:inherit;font-size:.82rem;font-weight:700}#leaderboard-section{flex-direction:column;gap:4px;display:none}.lb-row{color:var(--muted);border-radius:4px;grid-template-columns:28px 1fr auto;align-items:center;gap:6px;padding:3px 6px;font-size:.72rem;display:grid}.lb-row.lb-me{color:#4ade80;background:#4ade801a;font-weight:700}.lb-rank-num{font-size:.68rem}.lb-score-val{text-align:right;font-weight:700}.review-row{background:#ffffff0a;border-radius:4px;align-items:flex-start;gap:6px;padding:4px 6px;display:flex}.review-icon{flex-shrink:0;margin-top:1px;font-size:.8rem}.review-body{flex-direction:column;gap:1px;display:flex}.review-sentence{color:var(--text);font-size:.72rem;font-style:italic}.review-exp{color:var(--muted);font-size:.68rem;line-height:1.4}#lb-list::-webkit-scrollbar{width:4px}#review-list::-webkit-scrollbar{width:4px}#lb-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}#review-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}