#profiles { position: fixed; inset: 0; z-index: 9; pointer-events: none; transition: opacity .3s; }
.profile { position: absolute; border: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.profile:disabled { pointer-events: none; }
.profile:focus-visible { outline: 2px solid #dfc98b; outline-offset: 4px; }
body.menu-open #profiles, body.workshop-open #profiles, #profiles.profiles-hidden { opacity: 0; visibility: hidden; }
body.menu-open .profile, body.workshop-open .profile, .profiles-hidden .profile { pointer-events: none; }
#profile-picker { position: fixed; margin: auto; width: min(360px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; border: 1px solid #877a4f88; border-radius: 14px; background: #0d1d1d; color: #dfd7b9; box-shadow: 0 24px 64px #0009; line-height: 1.5; }
#profile-picker::backdrop { background: #05090d88; }
.profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.profile-heading h2 { font-size: 20px; font-weight: normal; color: #e9c77c; }
#profile-picker p { font-size: 13px; color: #c6bb9a; }
#profile-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.profile-option { min-height: 64px; border: 1px solid #877a4f66; border-radius: 8px; background: #12261f; cursor: pointer; }
.profile-option img { width: 40px; height: 40px; }
.profile-option:hover, .profile-option[aria-pressed="true"] { background: #28443a; border-color: #e9c77c; }
.profile-option:focus-visible, #profile-upload:focus-visible { outline: 2px solid #dfc98b; outline-offset: 3px; }
.profile-upload-label { display: block; margin-bottom: 8px; font-size: 14px; }
#profile-upload { width: 100%; font: inherit; font-size: 12px; }
#profile-upload::file-selector-button { padding: 8px 12px; margin-right: 10px; border: 1px solid #877a4f88; border-radius: 6px; background: #b79a51; color: #10140f; font: inherit; cursor: pointer; }
#profile-picker .profile-note { margin-top: 14px; font-size: 11px; }
#profile-message { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { #profiles { transition: none; } }