*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a10;--card: #12121c;--border: rgba(255,255,255,.08);--text: #f0f0f5;--muted: #8888aa;--red: #e63946;--blue: #457b9d;--gold: #f4d03f;--green: #2ecc71}html,body,#root{height:100%;font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}.app-root{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.game-wrapper{width:100%;max-width:900px;display:flex;flex-direction:column;gap:0}.game-canvas{border-radius:0 0 8px 8px;overflow:hidden}.scoreboard{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--border);border-radius:8px 8px 0 0;padding:8px 24px;font-size:1.1rem}.score-team{display:flex;align-items:center;gap:12px}.score-team.left{flex-direction:row}.score-team.right{flex-direction:row-reverse}.team-label{font-size:.8rem;letter-spacing:.05em}.score-num{font-size:2.2rem;font-weight:800;line-height:1}.score-center{display:flex;align-items:center;justify-content:center;min-width:80px}.vs{font-size:1rem;color:var(--muted);font-weight:700}.countdown{font-size:2.5rem;font-weight:900;color:var(--gold);animation:pulse .8s ease-in-out infinite}.goal-flash{font-size:1.4rem;font-weight:900;color:var(--green);animation:pop .5s ease-out}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.9)}}@keyframes pop{0%{transform:scale(1.5);opacity:.5}to{transform:scale(1);opacity:1}}.lobby-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100}.lobby-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:40px 48px;max-width:440px;width:90%;text-align:center;display:flex;flex-direction:column;gap:18px}.lobby-logo{font-size:4rem}.lobby-title{font-size:2.2rem;font-weight:900}.lobby-tagline{color:var(--muted);font-size:.95rem}.name-row{display:flex;flex-direction:column;gap:6px;text-align:left}.name-row label{font-size:.85rem;color:var(--muted)}.name-input{background:#ffffff0f;border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:1rem;outline:none;transition:border-color .2s}.name-input:focus{border-color:#ffffff4d}.mode-buttons{display:flex;flex-direction:column;gap:10px}.btn-primary,.btn-secondary,.btn-ghost{border:none;border-radius:10px;padding:13px 20px;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s}.btn-primary:hover,.btn-secondary:hover,.btn-ghost:hover{opacity:.88;transform:translateY(-1px)}.btn-primary{background:var(--red);color:#fff}.btn-secondary{background:var(--blue);color:#fff}.btn-ghost{background:#ffffff14;color:var(--text)}.controls-hint{font-size:.78rem;color:var(--muted)}.lobby-hint{font-size:.85rem;color:var(--muted)}.player-list{display:flex;flex-direction:column;gap:8px}.player-entry{display:flex;align-items:center;gap:10px;background:#ffffff0a;border-radius:8px;padding:10px 14px}.player-entry.me{border:1px solid rgba(255,255,255,.15)}.p-avatar{font-size:1.4rem}.p-name{font-weight:600;flex:1;text-align:left}.p-you{font-size:.75rem;color:var(--muted)}.spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.15);border-top-color:var(--text);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.gameover-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:200}.gameover-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:48px;max-width:360px;width:88%;text-align:center;display:flex;flex-direction:column;gap:16px}.gameover-icon{font-size:4rem}.gameover-title{font-size:2.4rem;font-weight:900}.gameover-sub{color:var(--muted);font-size:1rem}.gameover-buttons{display:flex;flex-direction:column;gap:10px;margin-top:8px}.touch-controls{display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%);gap:10px;z-index:50}@media(pointer:coarse){.touch-controls{display:flex}}.tc-btn{width:60px;height:60px;background:#ffffff26;border:2px solid rgba(255,255,255,.3);border-radius:50%;font-size:1.4rem;color:#fff;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.tc-btn:active{background:#ffffff4d}.error-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#c0392b;color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;z-index:300}