/* One task at a time, within the visual viewport. */
#player-stats-card {
    width: min(100%, 760px);
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
    overflow: hidden;
}

#profile-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(16, 9, 5, 0.4);
}

#profile-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #e9d6b4;
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}

#profile-tabs button[aria-selected='true'] {
    border-color: rgba(236, 189, 97, 0.45);
    background: #624025;
    color: #fff0cf;
}

#profile-tabs [hidden],
#profile-reset-button[hidden],
#stats-reset-button[hidden] {
    display: none !important;
}

#profile-tabs button:focus-visible {
    outline: 3px solid #f2cf79;
    outline-offset: 1px;
}

#player-profile-content {
    display: block;
    padding: 0;
    scrollbar-width: thin;
}

#player-profile-content [data-profile-panel][hidden] {
    display: none !important;
}

#player-stats-cards[hidden] {
    display: none !important;
}

#player-profile-content > section {
    gap: 10px;
    padding: 12px;
    border: 0;
    background: rgba(25, 12, 8, 0.22);
}

#profile-summary {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
}

#profile-preview-avatar {
    width: 54px;
    height: 54px;
}

#profile-local-note {
    padding: 0;
    border: 0;
    background: none;
}

#profile-avatar-picker {
    padding: 0;
}

#profile-avatar-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-top: 6px;
    padding: 2px;
    overflow: visible;
}

#profile-avatar-grid .profile-avatar-option {
    min-height: 48px;
    padding: 4px;
    gap: 2px;
    border-radius: 8px;
}

#profile-avatar-grid .profile-avatar-option img {
    width: 22px;
    height: 22px;
}

#profile-status:empty {
    display: none;
}

#profile-actions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
}

#profile-actions button {
    width: 100%;
    max-width: none;
}

#player-stats-footer {
    display: none;
}

#player-stats-card[data-profile-view='statistics'] #player-stats-footer {
    display: flex;
}

#player-stats-cards {
    overflow: visible;
    gap: 8px;
}

#player-statistics .stats-mini-card {
    min-height: 54px;
    padding: 7px;
    gap: 4px;
}

#player-achievements .achievement-card {
    padding: 10px;
}

@media (max-width: 520px) {
    #player-stats-card { padding: 12px; gap: 8px; }
    #profile-tabs button { font-size: 0.74rem; padding-inline: 3px; }
    #player-profile-content > section { padding: 8px; gap: 8px; }
    #profile-avatar-grid { gap: 5px; }
    #player-statistics .stats-label { font-size: 0.7rem; letter-spacing: 0; }
    #player-statistics .stats-row { gap: 5px; }
}

@media (max-height: 500px) and (min-width: 560px) {
    #player-stats-card { padding: 10px; gap: 6px; }
    #player-stats-header { min-height: 44px; }
    #player-profile-content #local-profile-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-rows: auto auto auto;
        align-items: start;
        column-gap: 14px;
        row-gap: 6px;
        padding: 6px;
    }
    #profile-section-title { display: none; }
    #profile-summary { grid-column: 1; grid-row: 1; }
    #profile-local-note { grid-column: 1; grid-row: 2; font-size: 0.73rem; }
    #profile-actions { grid-column: 1; grid-row: 3; }
    #profile-avatar-picker { grid-column: 2; grid-row: 1 / span 3; }
    #profile-avatar-picker legend { display: none; }
    #profile-avatar-grid { margin: 0; }
    #profile-status { grid-column: 1 / -1; }
    #player-stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #player-statistics .stats-subtitle { grid-column: 2; grid-row: 1; font-size: 0.7rem; }
    #player-statistics .stats-row:last-child { grid-column: 2; grid-row: 2 / span 2; }
    #player-statistics .stats-mini-card { min-height: 40px; padding: 4px; }
}