.friend-panel { position: fixed; z-index: 10; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); padding: 18px; background: #fffdf3f2; border: 1px solid #abb6b0; }
.friend-panel p { font-size: 14px; line-height: 1.4; }
#join-form { display: grid; gap: 10px; text-align: left; }
#join-form label { font-size: 14px; }
#password { min-width: 0; width: 100%; padding: 12px; font: 18px system-ui, sans-serif; border: 1px solid #98abb5; background: #fffdf6; user-select: text; -webkit-user-select: text; }
#connected button { min-height: 48px; }
#leave, #reset-match { font-size: 14px; min-height: 36px; }
#room-label { margin: 4px 0; font: 12px system-ui, sans-serif; color: #526573; }
#countdown { position: fixed; z-index: 12; top: 42%; left: 50%; transform: translate(-50%, -50%); font: 100px Georgia, serif; color: #274d68; text-shadow: 0 2px 14px #fffdf6; pointer-events: none; }
#character-1 .sprite { width: 160px; height: 160px; left: -20px; margin-left: 0; bottom: -6px; }
.character { transition: left 50ms linear; }
.character.powered .sprite { filter: drop-shadow(0 0 var(--charge-glow) #38bfff); }
.character.dodging .sprite { opacity: .5; }
.character.dead .sprite { animation: none !important; opacity: .3; }
.character.dead::after { display: none; }
.controls:has(.actions[hidden]) { background: transparent; box-shadow: none; bottom: calc(200px + env(safe-area-inset-bottom)); }
@media (max-width: 360px) { #character-1 .sprite { width: 150px; height: 150px; left: -25px; } }
@media (prefers-reduced-motion: reduce) { .character { transition: none; } }