.modal-open{overflow:hidden}
.auth-dialog{box-sizing:border-box;width:min(448px,calc(100% - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:8px;background:#fff;color:#111827;overflow:auto;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;animation:reference-modal-in .3s ease-out}
.auth-dialog::backdrop{background:rgba(0,0,0,.5)}
.auth-dialog[data-modal-name=profile]{width:min(400px,calc(100% - 32px))}
.auth-dialog[data-modal-name=choose-avatar]{width:min(520px,calc(100% - 32px));border-radius:16px}
.modal-close{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}
.auth-dialog .auth-card,.auth-dialog .profile-card{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:24px;border:0;border-radius:0;background:#fff}
.auth-dialog h1{margin:0 0 16px;color:#000;font-size:18px;font-weight:600;line-height:28px;text-align:center}
.auth-placeholder{width:100%;height:auto;aspect-ratio:400/235;margin:0 0 16px;border-radius:6px;font-size:12px;font-weight:400;color:#6b7280}
.registration-options-placeholder{width:100%;aspect-ratio:3/2;margin:0 0 16px;border-radius:6px;font-size:12px;color:#6b7280}.registration-options-description{margin:0;color:#374151;font-size:14px;line-height:20px;text-align:center}.registration-options-actions{display:grid;gap:8px;margin-top:32px}.registration-options-actions .reference-social-buttons{gap:8px}
.reference-subtitle{margin:-12px 0 16px;color:#374151;font-size:16px;line-height:24px;text-align:center}
.reference-description{margin:0 0 16px;color:#4b5563;font-size:16px;line-height:24px;text-align:center}
.reference-form{display:grid;gap:16px;margin:0}
.reference-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]){box-sizing:border-box;width:100%;height:42px;min-height:42px;margin:0;padding:8px 16px;border:1px solid #d1d5db;border-radius:4px;background:#fff;color:#000;font:16px/24px ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.reference-form input::placeholder{color:#6b7280;opacity:1}
.reference-form input:focus{outline:0;border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.55)}
.reference-primary,.reference-secondary,.social-button,.reference-link-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;padding:8px 16px;border-radius:4px;font:14px/20px ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;text-decoration:none;cursor:pointer}
.reference-primary{border:0;color:#fff}.reference-primary-blue{background:#009efc}.reference-primary-green{background:#53b100}.reference-primary:hover{filter:brightness(.95)}
.reference-secondary,.social-button{border:1px solid #d1d5db;background:#fff;color:#374151}.reference-secondary:hover,.social-button:hover{background:#f3f4f6}.reference-secondary:disabled{opacity:.5;cursor:not-allowed}
.reference-form-links{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-top:0;color:#374151;font-size:14px;line-height:20px}.reference-form-links a,.reference-form-bottom a{color:#2563eb}.reference-form-bottom{color:#374151;font-size:14px;line-height:20px;text-align:center}
.reference-divider{display:flex;align-items:center;gap:16px;margin:24px 0;color:#9ca3af;font-size:14px;font-weight:500}.reference-divider::before,.reference-divider::after{content:"";height:1px;flex:1;background:#d1d5db}
.reference-social-buttons{display:grid;grid-template-columns:1fr;gap:8px;margin:0}.reference-social-buttons form{margin:0}.social-button{gap:8px;font-weight:500}.social-icon-placeholder{width:20px;height:20px;min-width:20px;border-radius:2px;font-size:7px;color:#6b7280}
.check{display:flex;align-items:flex-start;gap:8px;color:#374151;font-size:12px;line-height:16px}.check input{width:16px;height:16px;margin:1px 0 0;flex:none}.check a{color:#2563eb}
.modal-feedback{margin:16px 24px 0;padding:8px 0;color:#16a34a;font-size:14px;line-height:20px;text-align:center;overflow-wrap:anywhere}.modal-feedback p{margin:0}.modal-feedback p+p{margin-top:4px}.modal-feedback.is-error{color:#dc2626}
.reference-text-center{text-align:center}.verify-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}.verify-actions form{margin:0}.reference-link-button{border:0;background:none;color:#4b5563;text-decoration:underline}
.reference-profile-card{padding:24px 16px!important}.profile-avatar-block{display:flex;flex-direction:column;align-items:center;margin-bottom:8px}.profile-avatar-block>img{width:192px;height:192px;margin-bottom:16px;border-radius:50%;object-fit:cover;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.profile-avatar-actions{display:flex;width:100%;gap:8px}.profile-avatar-actions>*{width:50%;padding:8px;font-size:14px}.reference-field-label{display:grid;gap:4px;color:#374151;font-size:14px;font-weight:500}.profile-logout-form{margin-top:8px}.profile-social{margin-top:20px;padding-top:16px;border-top:1px solid #e5e7eb}.profile-social>p{margin:0 0 8px;color:#374151;font-size:14px;text-align:center}
.reference-avatar-card{padding:32px 24px!important}.reference-avatar-card h1{margin-bottom:24px;font-size:20px}.reference-avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}.reference-avatar-grid .avatar-option{display:block;width:100%;aspect-ratio:1;padding:0;border:1px solid #d1d5db;border-radius:50%;background:#fff;cursor:pointer}.reference-avatar-grid .avatar-option img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}.reference-avatar-grid .avatar-option:hover,.reference-avatar-grid .avatar-option.is-selected{outline:4px solid #60a5fa;outline-offset:0}.avatar-picker-actions{display:flex;justify-content:space-between;gap:16px;margin-top:24px}.avatar-picker-actions>*{width:50%}
.auth-dialog button:disabled{cursor:not-allowed}
.game-verify{display:grid;place-items:center;width:100%;padding:24px}
@media(max-width:520px){.auth-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}.auth-dialog .auth-card{padding:20px}.modal-feedback{margin-right:20px;margin-left:20px}.reference-form-links{flex-direction:column;gap:6px}.reference-avatar-grid{gap:12px}.reference-avatar-card{padding:26px 18px!important}}
.reference-avatar-grid .avatar-option img{border:0}
.profile-upload-label{position:relative}.profile-upload-label input{position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden}.profile-upload-label:focus-within{outline:3px solid #bd821b;outline-offset:3px}
.profile-avatar-crop{width:425px;height:510px;overflow:hidden;position:relative}.profile-avatar-crop>img{display:block;max-width:100%}.auth-dialog[data-modal-name=profile].is-cropping{width:min(900px,calc(100% - 32px))}.auth-dialog.is-cropping .reference-profile-card{display:grid;grid-template-columns:368px minmax(0,425px);align-items:start;justify-content:center;gap:24px}.auth-dialog.is-cropping .profile-avatar-crop{display:block}.profile-avatar-crop .cropper-container{width:100%!important;height:100%!important}
@keyframes reference-modal-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.auth-dialog{animation:none}}
.profile-upload-label:focus-within{outline:none!important}
@media(max-width:860px){.auth-dialog[data-modal-name=profile].is-cropping{width:calc(100% - 20px)}.auth-dialog.is-cropping .reference-profile-card{grid-template-columns:1fr}.profile-avatar-crop{width:100%;height:min(510px,65vh)}}