.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#1a1a2e;z-index:100}.screen-content{text-align:center;max-width:900px;padding:2rem}.screen h1{font-size:2.5rem;margin-bottom:.5rem;color:#eef}.screen h2{font-size:1.8rem;margin-bottom:1.5rem;color:#eef}.screen p{color:#aab;margin-bottom:1rem}.error{color:#f66!important}input[type=password],input[type=text]{width:100%;padding:.8rem 1rem;font-size:1.1rem;border:2px solid #334;border-radius:8px;background:#16213e;color:#eee;outline:none;margin-bottom:1rem}input:focus{border-color:#558}button[type=submit],.profile-card{cursor:pointer;font-size:1rem;font-family:inherit}button[type=submit]{width:100%;padding:.8rem;background:#46a;color:#fff;border:none;border-radius:8px;transition:background .2s}button[type=submit]:hover{background:#57b}.profile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:850px;margin:0 auto}.profile-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px;background:#16213e;border:2px solid #334;border-radius:10px;color:#eee;transition:border-color .2s,transform .1s}.profile-card:not(.claimed){border-color:#4a7}.profile-card:not(.claimed):hover{border-color:#6c9;transform:scale(1.05);background:#1a2a3e}.profile-card.claimed{opacity:.35;cursor:not-allowed;border-color:#222}.profile-preview-canvas{width:72px;height:90px;border-radius:6px}.profile-spinner{width:72px;height:90px;display:flex;align-items:center;justify-content:center}.profile-spinner:after{content:"";width:24px;height:24px;border:3px solid #334;border-top-color:#88a;border-radius:50%;animation:spin-loader .8s linear infinite}@keyframes spin-loader{to{transform:rotate(360deg)}}.profile-image{width:36px;height:50px;border-radius:8px;object-fit:cover}.profile-label{font-size:.85rem;font-weight:600}.profile-description{font-size:.7rem;color:#889;line-height:1.3;max-height:3.9em;overflow:hidden}.profile-card.selected{border-color:#6c9;background:#1a2a3e}.profile-detail{margin-top:16px;min-height:0}.detail-card{background:#16213e;border:2px solid #334;border-radius:10px;padding:12px 16px;text-align:left;max-width:450px;margin:0 auto}.detail-backstory{font-size:.8rem;color:#aab;line-height:1.4;margin-bottom:8px}.detail-select-btn{display:block;width:100%;padding:8px;background:#46a;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-family:inherit}.detail-select-btn:hover{background:#57b}.profile-taken{font-size:.65rem;color:#f66}.profile-available{font-size:.65rem;color:#4a7}.player-label{color:#fff;font-size:12px;font-weight:700;text-shadow:0 0 4px #000,0 0 8px #000;white-space:nowrap;pointer-events:none}.speech-bubble-anchor{pointer-events:none}.speech-bubble{color:#000;font-size:12px;font-weight:700;background:#fff;padding:4px 10px 8px;border-radius:10px;white-space:nowrap;pointer-events:none;animation:bubble-in .4s cubic-bezier(.34,1.56,.64,1) both}@keyframes bubble-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.speech-bubble:after{content:"";display:block;width:0;height:0;margin:4px auto -8px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #fff}.speech-bubble-fade{animation:bubble-out .5s ease-out both}@keyframes bubble-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.8) translateY(-20px)}}.chat-input-container{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);z-index:60}.chat-input-container input{width:300px;padding:8px 12px;font-size:14px;font-family:inherit;border:2px solid #558;border-radius:8px;background:#16213ee6;color:#eee;outline:none}.hud{position:absolute;top:0;left:0;right:0;z-index:50;pointer-events:none}.hud-top{display:flex;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 12px calc(16px + env(safe-area-inset-left,0px));font-size:.85rem}.hud-name{color:#aab}.hud-players{color:#8a8}.mobile-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#1a1a2e;display:flex;align-items:center;justify-content:center;z-index:200}.rotate-icon{font-size:4rem;margin-top:1rem;animation:spin 2s ease-in-out infinite}@keyframes spin{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.ios-prompt{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#2a2a4e;padding:12px 20px;border-radius:10px;text-align:center;z-index:150;max-width:320px;font-size:.85rem}.ios-prompt button{margin-top:8px;padding:6px 16px;background:#46a;color:#fff;border:none;border-radius:6px;cursor:pointer}#joystick-zone{position:absolute;bottom:env(safe-area-inset-bottom,0px);left:env(safe-area-inset-left,0px);width:200px;height:200px;z-index:60}.tile-label{color:#aab;font-size:11px;font-weight:600;text-align:center;white-space:nowrap;pointer-events:none;text-shadow:0 0 4px #000}.tile-viewer-back{position:absolute;top:16px;left:16px;z-index:100;padding:8px 16px;background:#4466aad9;color:#fff;border:none;border-radius:8px;font-size:.9rem;font-family:inherit;cursor:pointer;transition:background .2s}.tile-viewer-back:hover{background:#5577bbf2}@media(max-width:600px){.profile-grid{grid-template-columns:repeat(4,1fr);gap:8px}.profile-card{padding:8px 4px}.profile-preview-canvas,.profile-spinner{width:48px;height:60px}.profile-spinner:after{width:18px;height:18px}.profile-image{width:28px;height:40px;border-radius:6px}.profile-description{display:none}.screen h1{font-size:1.8rem}.screen h2{font-size:1.3rem}}