:root{--color-primary: #4caf50;--color-accent: #ff9800;--color-sky: #81d4fa;--color-safe: #66bb6a;--color-bg-pill: rgba(255, 255, 255, .88);--color-text: #2c3e50;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;height:100dvh;overflow:hidden;position:fixed;background-color:var(--color-sky);font-family:var(--font-family);-webkit-user-select:none;user-select:none;touch-action:none}#app{position:relative;width:100%;height:100%;height:100dvh}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;touch-action:none;outline:none}#hud-overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));z-index:10}.hud-top{display:flex;align-items:center;justify-content:space-between;width:100%;pointer-events:auto}.hud-pill{display:flex;align-items:center;gap:8px;background:var(--color-bg-pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 16px;border-radius:9999px;box-shadow:0 4px 14px #0000001f;font-weight:700;font-size:15px;color:var(--color-text);border:2px solid rgba(255,255,255,.6)}.hud-pill .icon{font-size:18px}.hud-center-status{background:#ffffffd9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;color:#388e3c;box-shadow:0 2px 8px #00000014;border:1px solid rgba(76,175,80,.3)}.hud-actions{display:flex;gap:8px;align-items:center}.hud-invite-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#4caf50,#2e7d32);color:#fff;border:2px solid rgba(255,255,255,.85);padding:8px 14px;border-radius:9999px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 14px #2e7d3259;pointer-events:auto;transition:transform .1s ease,filter .2s ease}.hud-invite-btn:active{transform:scale(.93);filter:brightness(.9)}.hud-icon-btn{width:44px;height:44px;border-radius:50%;background:var(--color-bg-pill);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.7);box-shadow:0 4px 12px #00000026;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s ease,background-color .2s ease;pointer-events:auto}.hud-icon-btn:active{transform:scale(.92);background-color:#f0f0f0}.touch-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.joystick-zone{width:140px;height:140px;pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}.joystick-base{width:120px;height:120px;border-radius:50%;background:#ffffff59;border:3px solid rgba(255,255,255,.85);box-shadow:0 8px 24px #0000002e,inset 0 2px 6px #fff6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}.joystick-knob{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#81c784,#388e3c);border:3px solid #ffffff;box-shadow:0 4px 12px #0000004d;position:absolute;pointer-events:none;transition:transform .04s ease-out}.action-buttons-group{display:flex;gap:16px;align-items:flex-end;pointer-events:auto}.action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;border-radius:50%;cursor:pointer;box-shadow:0 6px 18px #00000038;color:#fff;font-weight:700;transition:transform .08s ease,filter .08s ease;touch-action:none;-webkit-user-select:none;user-select:none}.jump-btn{width:82px;height:82px;font-size:32px;background:radial-gradient(circle at 35% 35%,#ffb74d,#f57c00);border:4px solid #ffffff}.wave-btn{width:68px;height:68px;font-size:26px;background:radial-gradient(circle at 35% 35%,#64b5f6,#1976d2);border:3px solid #ffffff}.action-btn:active{transform:scale(.9);filter:brightness(.92)}.btn-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.hud-bottom-desktop{align-self:center;background:#ffffffe6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 18px;border-radius:9999px;display:flex;gap:16px;font-size:13px;color:var(--color-text);box-shadow:0 4px 16px #0000001f;border:1px solid rgba(255,255,255,.8);pointer-events:auto}@media(hover:none)and (pointer:coarse){.hud-bottom-desktop{display:none}}@media(hover:hover)and (pointer:fine){.touch-controls{opacity:.7;transition:opacity .3s}.touch-controls:hover{opacity:1}}.modal-backdrop{position:fixed;inset:0;background:#0f172aa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;touch-action:auto}.modal-card{background:#fff;border-radius:28px;max-width:580px;width:100%;padding:28px 24px;box-shadow:0 20px 48px #00000047,0 0 0 1px #0000000d;display:flex;flex-direction:column;gap:20px;text-align:center;animation:modalPopIn .22s ease-out}@keyframes modalPopIn{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.modal-title{font-size:24px;font-weight:800;color:#1e293b;margin-bottom:4px}.modal-subtitle{font-size:14px;color:#64748b;font-weight:500}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:520px){.character-grid{grid-template-columns:1fr;gap:10px}}.char-card{background:#f8fafc;border:3px solid #e2e8f0;border-radius:20px;padding:16px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;transition:all .15s ease;position:relative;outline:none;font-family:inherit}@media(max-width:520px){.char-card{flex-direction:row;padding:12px 16px;gap:14px;text-align:left}}.char-card:hover:not(.taken){transform:translateY(-2px);border-color:#cbd5e1;background:#f1f5f9}.char-card.selected[data-char=orange]{border-color:#ff7043;background:#fff7ed;box-shadow:0 8px 20px #ff704340}.char-card.selected[data-char=blue]{border-color:#1e88e5;background:#eff6ff;box-shadow:0 8px 20px #1e88e540}.char-card.selected[data-char=pink]{border-color:#ec407a;background:#fdf2f8;box-shadow:0 8px 20px #ec407a40}.char-avatar-circle{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;border:3px solid #ffffff;box-shadow:0 4px 10px #0000001f;flex-shrink:0}.char-orange{background:linear-gradient(135deg,#ffca28,#ff7043)}.char-blue{background:linear-gradient(135deg,#4dd0e1,#1e88e5)}.char-pink{background:linear-gradient(135deg,#f48fb1,#ec407a)}.char-details{display:flex;flex-direction:column;gap:2px}.char-name{font-size:14px;color:#1e293b;font-weight:700}.char-desc{font-size:12px;color:#64748b}.char-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:9999px;margin-top:auto}.char-badge.available{background:#dcfce7;color:#15803d}.char-badge.taken{background:#fee2e2;color:#b91c1c}.char-card.taken{opacity:.52;filter:grayscale(.7);cursor:not-allowed;pointer-events:none;background:#f1f5f9;border-color:#e2e8f0}.modal-error{background:#fee2e2;color:#b91c1c;padding:8px 14px;border-radius:12px;font-size:13px;font-weight:600}.btn-start-play{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:16px;font-weight:800;padding:14px 24px;border-radius:9999px;border:none;cursor:pointer;box-shadow:0 6px 18px #16a34a59;transition:transform .1s ease,filter .2s ease,opacity .2s ease;font-family:inherit}.btn-start-play:not(:disabled):hover{filter:brightness(1.05);transform:translateY(-1px)}.btn-start-play:not(:disabled):active{transform:scale(.97)}.btn-start-play:disabled{background:#cbd5e1;color:#64748b;box-shadow:none;cursor:not-allowed;opacity:.8}