/* ===== CyberLite Universe AV-1 — Avatar Gallery and Account Picker ===== */
.profile-avatar,
.large-avatar {
    overflow:hidden;
    padding:0 !important;
}
.profile-avatar img,
.large-avatar img,
.avatar-current-preview img,
.avatar-gallery-choice img,
.registration-avatar-choice img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.profile-chip {
    cursor:pointer;
}
.profile-chip:hover,
.profile-chip:focus-visible {
    transform:translateY(-2px);
    border-color:rgba(99,220,255,.72);
    box-shadow:0 0 22px rgba(75,170,255,.16);
    outline:none;
}
.large-avatar {
    background:#071127 !important;
}
.signed-in .button + .button {
    margin-top:10px;
}

/* Registration avatar grid */
.avatar-picker.avatar-picker-gallery {
    display:block;
}
.avatar-picker-gallery legend {
    margin-bottom:10px;
}
.registration-avatar-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    max-height:340px;
    overflow-y:auto;
    padding:4px 4px 8px;
    scrollbar-width:thin;
    scrollbar-color:#46cfff #071027;
}
.registration-avatar-choice {
    display:block;
    min-width:0;
}
.avatar-picker .registration-avatar-choice > span {
    display:flex;
    min-height:0;
    flex-direction:column;
    gap:7px;
    padding:7px;
    font-size:inherit;
}
.registration-avatar-choice img {
    aspect-ratio:1;
    border-radius:10px;
    background:#071127;
}
.registration-avatar-choice small {
    overflow:hidden;
    color:#e8efff;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:center;
}

/* Change-avatar modal */
.avatar-modal-backdrop {
    z-index:120;
}
.avatar-modal {
    position:relative;
    width:min(940px,100%);
    max-height:calc(100vh - 32px);
    overflow:hidden;
    padding:26px;
    border:1px solid rgba(97,198,255,.58);
    border-radius:24px;
    background:linear-gradient(145deg,#07132f,#100a2d 72%,#071326);
    box-shadow:0 35px 110px rgba(0,0,0,.7),0 0 44px rgba(71,146,255,.16);
}
.avatar-modal-heading {
    display:grid;
    grid-template-columns:116px 1fr;
    align-items:center;
    gap:20px;
    padding-right:38px;
}
.avatar-modal-heading h2 {
    margin:0 0 7px;
    font-size:clamp(1.8rem,3vw,2.7rem);
}
.avatar-modal-heading p:last-child {
    margin:0;
    color:#bdc8df;
}
.avatar-current-preview {
    width:116px;
    height:116px;
    overflow:hidden;
    border:2px solid #57dfff;
    border-radius:24px;
    background:#071127;
    box-shadow:0 0 28px rgba(69,206,255,.28);
}
.avatar-filters {
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin:22px 0 16px;
    padding-bottom:4px;
    scrollbar-width:thin;
}
.avatar-filter {
    flex:0 0 auto;
    min-height:38px;
    padding:0 14px;
    color:#c8d2e9;
    border:1px solid rgba(115,166,224,.3);
    border-radius:999px;
    cursor:pointer;
    font-weight:800;
    background:rgba(4,10,29,.62);
}
.avatar-filter:hover,
.avatar-filter:focus-visible,
.avatar-filter.is-active {
    color:#fff;
    border-color:#5bdcff;
    outline:none;
    background:linear-gradient(105deg,rgba(38,132,255,.86),rgba(129,55,255,.84));
    box-shadow:0 0 18px rgba(75,165,255,.18);
}
.avatar-gallery {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    max-height:min(52vh,510px);
    overflow-y:auto;
    padding:4px 5px 12px;
    scrollbar-width:thin;
    scrollbar-color:#46cfff #071027;
}
.avatar-gallery-choice {
    position:relative;
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:7px;
    padding:7px;
    color:#eaf2ff;
    border:1px solid rgba(123,164,220,.28);
    border-radius:16px;
    cursor:pointer;
    background:rgba(3,9,27,.68);
    transition:transform .15s ease,border-color .18s ease,box-shadow .18s ease;
}
.avatar-gallery-choice:hover,
.avatar-gallery-choice:focus-visible {
    transform:translateY(-3px);
    border-color:rgba(91,220,255,.78);
    outline:none;
    box-shadow:0 12px 26px rgba(0,0,0,.28),0 0 18px rgba(75,180,255,.14);
}
.avatar-gallery-choice.is-selected {
    border-color:#74edff;
    box-shadow:0 0 0 3px rgba(78,216,255,.18),0 0 24px rgba(95,194,255,.22);
}
.avatar-gallery-choice.is-selected::after {
    content:"✓";
    position:absolute;
    top:12px;
    right:12px;
    display:grid;
    width:28px;
    height:28px;
    place-items:center;
    color:#071027;
    border-radius:50%;
    font-weight:1000;
    background:#71efff;
    box-shadow:0 0 16px rgba(113,239,255,.6);
}
.avatar-gallery-choice img {
    aspect-ratio:1;
    border-radius:11px;
    background:#071127;
}
.avatar-gallery-choice span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.78rem;
    font-weight:800;
    text-align:center;
}
.avatar-modal-footer {
    display:flex;
    min-height:62px;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-top:16px;
    border-top:1px solid rgba(119,160,219,.18);
}
.avatar-modal-actions {
    display:flex;
    gap:10px;
}
.avatar-save-message {
    min-height:1.4em;
    margin:0;
    color:#ff7e98;
}
.avatar-save-message[data-type="success"] {
    color:#9bec58;
}

@media (max-width:820px) {
    .avatar-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .avatar-modal { padding:22px; }
}
@media (max-width:560px) {
    .registration-avatar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .avatar-modal-backdrop { padding:8px; }
    .avatar-modal { max-height:calc(100vh - 16px); padding:18px 14px; border-radius:18px; }
    .avatar-modal-heading { grid-template-columns:82px 1fr; gap:12px; padding-right:30px; }
    .avatar-current-preview { width:82px; height:82px; border-radius:18px; }
    .avatar-modal-heading p:last-child { display:none; }
    .avatar-filters { margin:16px 0 12px; }
    .avatar-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-height:56vh; }
    .avatar-gallery-choice { padding:5px; border-radius:12px; }
    .avatar-gallery-choice span { font-size:.7rem; }
    .avatar-modal-footer { align-items:stretch; flex-direction:column; gap:8px; }
    .avatar-modal-actions { display:grid; grid-template-columns:1fr 1fr; }
    .avatar-save-message { text-align:center; }
}