*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background-color:#2a2a2a;font-family:Fredoka,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;display:flex;justify-content:center;align-items:center;height:100vh}#game-container{position:relative;box-shadow:0 0 50px #00000080;overflow:hidden;background-color:#a5e5ff}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.25em .5em;box-sizing:border-box;z-index:5}.hud-row{display:flex;justify-content:flex-end;align-items:center;width:100%;max-width:95%;gap:2em}.score-circle,.timer-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:6em;height:6em;border-radius:50%;background:#ffffff4d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 .25em .375em #0000001a;border:.15em solid rgba(255,255,255,.5);box-sizing:border-box}.score-circle{color:#1e3a8a}.timer-circle{background:#ef444433;color:#b91c1c}.score-circle .hud-number,.timer-circle .hud-number{font-size:2.5em;font-weight:900;line-height:1;margin:0}.score-circle .hud-label,.timer-circle .hud-label{font-size:.9em;font-weight:600;margin-top:.2em;text-transform:uppercase;letter-spacing:.05em}#overlay-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#a5e5ffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:10;transition:opacity .3s}#countdown-display{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8em;color:#fff;font-weight:800;text-shadow:.08em .08em 0 #3B82F6;pointer-events:none;z-index:8;display:none;animation:popIn .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes popIn{0%{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.btn{background:#ff5e78;color:#fff;padding:.6em 1.8em;font-size:1.8em;border-radius:2em;border:none;cursor:pointer;box-shadow:0 .3em #d43f59,0 .5em .5em #00000026;transition:transform .1s,box-shadow .1s;font-family:Fredoka,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:1em}.btn:active{transform:translateY(.3em);box-shadow:0 0 #d43f59}.title-text{font-size:8em;color:#3b82f6;font-weight:900;margin:0 0 .1em;text-shadow:.06em .06em 0 white;text-align:center;line-height:.85;width:100%;padding:0 .2em;box-sizing:border-box;word-spacing:100vw}.room-code-title{font-size:2.5em;word-spacing:normal;white-space:nowrap}.subtitle{font-size:1.5em;color:#1e40af;margin-bottom:2em;text-align:center;width:50%;max-width:80%;font-weight:600}.final-label{font-size:1.5em;color:#1e3a8a;font-weight:800;margin:0;letter-spacing:.05em}.final-score-val{font-size:8em;color:#fff;font-weight:900;filter:drop-shadow(0 .1em .1em rgba(0,0,0,.1));-webkit-text-stroke:.18em #3B82F6;paint-order:stroke fill;margin:0;line-height:1}.highscore-container{margin-top:.5em;font-size:1.2em;color:#1e40af;font-weight:700;background:#ffffff80;padding:.5em 1em;border-radius:1em}.hidden{display:none!important}.text-center{text-align:center}canvas{display:block}.menu-buttons{display:flex;flex-direction:column;gap:.8em;align-items:center}.btn-secondary{background:#6b7280;box-shadow:0 .3em #4b5563,0 .5em .5em #00000026}.btn-secondary:active{box-shadow:0 0 #4b5563}.name-input-container{display:flex;flex-direction:column;align-items:center;gap:.5em}.name-input,.code-input{font-family:Fredoka,sans-serif;font-size:1.5em;padding:.5em 1em;border:.15em solid rgba(59,130,246,.5);border-radius:1em;background:#fffc;color:#1e3a8a;text-align:center;outline:none;width:25%;max-width:200px}.name-input{width:50%;max-width:400px}.code-input{font-size:3em;font-weight:800;letter-spacing:.2em;width:25%;max-width:400px;text-transform:uppercase}.code-input:focus,.name-input:focus{border-color:#3b82f6;box-shadow:0 0 0 .2em #3b82f64d}.room-code-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:10em;height:10em;border-radius:50%;background:#ffffff4d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 .25em .375em #0000001a;border:.15em solid rgba(255,255,255,.5);box-sizing:border-box;color:#3b82f6;margin:.5em 0}.room-code-circle .hud-number{font-size:3.5em;font-weight:900;line-height:1;margin:0;letter-spacing:.15em;color:#3b82f6}.room-code-circle .hud-label{font-size:.9em;font-weight:600;margin-top:.2em;text-transform:uppercase;letter-spacing:.05em;color:#1e3a8a}.waiting-room-container{display:flex;width:100%;height:100%;box-sizing:border-box}.waiting-room-left{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em;box-sizing:border-box}.waiting-room-right{width:30%;background:#ffffff4d;padding:2em 1em;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:visible;min-height:0;max-height:100%}.players-list{display:flex;flex-direction:column;gap:.8em;width:100%;margin:0;overflow:visible}.player-item{display:flex;align-items:center;gap:.5em;background:#ffffff80;padding:.3em .8em;border-radius:2em;border:.15em solid transparent;width:100%;box-sizing:border-box;overflow:visible}.player-item.local{border-color:#3b82f6;background:#3b82f633}.player-avatar{width:1.5em;height:auto;display:block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;flex-shrink:0}.player-avatar.small{width:1.5em;height:auto}.player-name{font-size:1em;font-weight:600;color:#1e3a8a;line-height:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.waiting-text{color:#6b7280;font-style:italic;margin:0}.leaderboard{display:flex;flex-direction:column;gap:.5em;width:50%;max-width:350px;margin:1em 0}.leaderboard-row{display:flex;align-items:center;gap:.8em;background:#ffffff80;padding:.6em 1em;border-radius:1em;overflow:visible}.leaderboard-row.local{background:#3b82f633;border:.15em solid #3B82F6}.leaderboard-row .rank{font-size:1.5em;font-weight:800;width:40px;text-align:center}.leaderboard-row .player-name{flex:1;line-height:1.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.leaderboard-row .score{font-size:1.5em;font-weight:800;color:#3b82f6;flex-shrink:0}.scoreboard{position:absolute;left:.5em;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.2em;min-width:8em;max-width:10em;pointer-events:none;z-index:6}.scoreboard.hidden{display:none}.scoreboard-item{display:flex;align-items:center;gap:.4em;background:#0006;padding:.2em .4em;border-radius:.4em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);overflow:visible;min-height:1.5em}.scoreboard-item.local{background:#ffffffe6;border:.1em solid rgba(255,255,255,1);box-shadow:0 .1em .3em #0003}.scoreboard-item .scoreboard-icon{width:1.2em;height:auto;display:block;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;flex-shrink:0}.scoreboard-item .scoreboard-name{font-size:.7em;font-weight:600;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.1em}.scoreboard-item.local .scoreboard-name{color:#1e3a8a}.scoreboard-item .scoreboard-score{font-size:.8em;font-weight:800;color:gold;min-width:1.5em;text-align:right;flex-shrink:0}.scoreboard-item.local .scoreboard-score{color:#3b82f6}.loading-spinner{width:60px;height:60px;border:6px solid rgba(59,130,246,.2);border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}