.app{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000;font-family:Arial,sans-serif}.game-canvas{width:100%;height:100%;display:block}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background:#fff;padding:30px;border-radius:15px;box-shadow:0 10px 30px #00000080;text-align:center;max-width:90vw;max-height:90vh;overflow-y:auto}.modal h2{margin-top:0;color:#333;font-size:2em;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.modal input{padding:12px 16px;margin:15px 0;border:2px solid #ddd;border-radius:8px;font-size:16px;width:200px;text-align:center}.modal button{padding:12px 24px;margin:10px;border:none;border-radius:8px;background:#4caf50;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:background .3s}.modal button:hover{background:#45a049}.modal button:disabled{background:#ccc;cursor:not-allowed}.hud{position:fixed;top:20px;left:20px;right:20px;z-index:100;pointer-events:none}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}.role-display{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:12px 20px;border-radius:25px;font-weight:700;font-size:18px;box-shadow:0 4px 15px #ff6b6b4d;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.time-display{background:#000000b3;color:#fff;padding:12px 20px;border-radius:25px;font-weight:700;font-size:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.rey-time{background:linear-gradient(135deg,gold,#ffed4e);color:#333;padding:10px 20px;border-radius:20px;font-weight:700;font-size:16px;text-align:center;box-shadow:0 4px 15px #ffd7004d;margin-bottom:10px}.connection-status{background:#000000b3;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.serve-indicator{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;padding:12px 20px;border-radius:25px;font-weight:700;font-size:16px;text-align:center;box-shadow:0 4px 15px #ff98004d;margin-bottom:10px;animation:glow 2s infinite alternate}@keyframes glow{0%{box-shadow:0 4px 15px #ff98004d}to{box-shadow:0 4px 25px #ff980099}}.controls{position:fixed;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-end;z-index:100}.left-controls{display:flex;align-items:center}.left-controls,.right-controls{touch-action:none}.right-controls{display:flex;flex-direction:column;align-items:flex-end;gap:15px}.action-row{display:flex;gap:15px}.action-button{width:70px;height:70px;border:none;border-radius:50%;font-weight:700;font-size:12px;color:#fff;cursor:pointer;box-shadow:0 4px 15px #0000004d;transition:all .1s;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.action-button:active{transform:scale(.95);box-shadow:0 2px 8px #0006}.jump-button{background:linear-gradient(135deg,#4caf50,#45a049);width:80px;height:80px}.kick-button{background:linear-gradient(135deg,#f44336,#d32f2f)}.head-button{background:linear-gradient(135deg,#2196f3,#1976d2)}.serve-button{background:linear-gradient(135deg,#ff9800,#f57c00);width:90px;height:90px;font-size:14px;font-weight:700;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.joystick-container{position:relative;width:140px;height:140px;border-radius:50%}.joystick-base{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#ffffff40,#ffffff14 60%,#ffffff05 61%),linear-gradient(180deg,#262a31e6,#1a1c20e6);border:2px solid rgba(255,255,255,.35);box-shadow:inset 0 2px 12px #0000008c,0 6px 18px #00000059;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative}.joystick-base:before,.joystick-base:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffffff1f;pointer-events:none}.joystick-base:before{width:2px;height:78%;border-radius:1px}.joystick-base:after{width:78%;height:2px;border-radius:1px}.joystick-knob{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffffe6,#ffffff8c 35%,#e6e6e6e6 60%),linear-gradient(160deg,#fffc,#dcdcdce6);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.6);box-shadow:inset 0 2px 8px #00000040,0 6px 16px #00000059;transition:transform .06s ease}.leaderboard-modal{min-width:300px}.leaderboard{margin:20px 0}.leaderboard-entry{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;margin:8px 0;background:#f5f5f5;border-radius:8px;transition:all .3s}.leaderboard-entry.winner{background:linear-gradient(135deg,gold,#ffed4e);color:#333;font-weight:700;transform:scale(1.05);box-shadow:0 4px 15px #ffd7004d}.leaderboard-entry .rank{font-weight:700;color:#666;min-width:30px}.leaderboard-entry.winner .rank{color:#333}.leaderboard-entry .name{flex:1;text-align:center;font-weight:500}.leaderboard-entry .time{font-weight:700;color:#4caf50;min-width:60px;text-align:right}.leaderboard-entry.winner .time{color:#333}@media (max-width: 768px){.hud{top:10px;left:10px;right:10px}.controls{bottom:10px;left:10px;right:10px;justify-content:flex-start}.left-controls{position:fixed;left:35%;bottom:calc(16% - 20px);transform:translate(-50%);z-index:110}.right-controls{position:fixed;right:12px;bottom:12px;align-items:flex-end;gap:12px}.role-display,.time-display{font-size:14px;padding:10px 16px}.action-button{width:60px;height:60px;font-size:10px}.jump-button{width:70px;height:70px}.joystick-container{width:120px;height:120px;background:transparent;border:0;padding:0;outline:none}.joystick-knob{width:50px;height:50px}}@media (max-height: 600px){.hud-top{flex-direction:column;align-items:flex-start;gap:5px}.controls{bottom:5px}.right-controls,.action-row{gap:10px}}