@media (max-width: 1024px) {
    .page-frame {
        width: 100%;
        margin: 0;
        padding: 0 0 28px;
    }

    .hero-shell {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .hero-topbar {
        padding: 8px 10px 8px;
        gap: 8px;
    }

    .hero-nav-row {
        display: grid;
        width: 100%;
        gap: 8px;
        justify-items: stretch;
    }

    .brandmark {
        width: 206px;
    }

    .site-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        gap: 8px;
        overflow: visible;
    }

    .site-nav a {
        width: 100%;
        padding-inline: 10px;
        font-size: 0.88rem;
    }

    .metric-strip,
    .announcement-bar {
        padding: 8px 10px;
    }

    .hero-servers {
        padding: 14px;
        gap: 14px;
    }

    .panel-card__head {
        padding: 8px 12px;
    }

    .panel-card__head--tabs {
        padding: 10px 12px;
    }

    .panel-card__body {
        padding: 14px 14px 16px;
    }

    .panel-card__head h2,
    .section-block__head h2 {
        font-size: 1.2rem;
    }

    .register-layout,
    .hero-grid,
    .server-grid,
    .dashboard-layout--player,
    .dashboard-layout--admin,
    .admin-sections-grid,
    .media-grid,
    .admin-overview-grid,
    .admin-stats-grid,
    .profile-settings-grid,
    .admin-server-form__grid,
    .community-topic-grid,
    .inline-grid {
        grid-template-columns: 1fr;
    }

    .hero-grid--account-home {
        grid-template-areas:
            "account"
            "news";
    }

    .order-mobile-first,
    .dashboard-side {
        order: -1;
    }

    .dashboard-side--admin {
        position: static;
        top: auto;
    }

    .hero-servers__grid {
        grid-template-columns: 1fr;
    }

    .hero-actions {
        justify-content: stretch;
        width: 100%;
    }

    .hero-actions > *,
    .inline-form {
        width: 100%;
    }

    .metric-strip {
        justify-content: flex-start;
        gap: 8px;
    }

    .metric-item--gold {
        margin-inline-start: 0;
    }

    .announcement-bar__item {
        font-size: 0.9rem;
        padding-inline-start: 28px;
    }

    .public-server-tabs__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .public-server-tab {
        width: 100%;
        padding-inline: 10px;
        font-size: 0.88rem;
    }

    .page-server-details .public-server-tabs__nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .page-server-details .public-server-tab {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding-inline: 6px;
        font-size: 0.74rem;
        white-space: nowrap;
    }

    .hall-tabs .public-server-tabs__nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: 12px;
        padding-bottom: 2px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .hall-tabs .public-server-tabs__nav::-webkit-scrollbar {
        display: none;
    }

    .hall-tabs .public-server-tab {
        flex: 0 0 29%;
        min-width: 29%;
        width: auto;
        min-height: 42px;
        padding-inline: 10px;
        font-size: 0.9rem;
        scroll-snap-align: start;
    }

    .panel-actions,
    .panel-actions--split {
        flex-direction: column;
    }

    .panel-actions > *,
    .panel-actions--split > * {
        width: 100%;
    }

    .panel-actions.panel-actions--account-home {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 6px;
        margin-top: 14px;
    }

    .panel-actions.panel-actions--account-home > * {
        width: auto;
        min-width: 0;
        flex: 1 1 0;
    }

    .panel-actions--account-home .button-surface--admin-link {
        flex-basis: 0;
    }

    .server-card .panel-actions {
        flex-direction: row;
        justify-content: flex-start;
    }

    .server-card .panel-actions > * {
        width: auto;
    }

    .server-list-compact__item,
    .avatar-upload-box,
    .select-with-flag,
    .avatar-file-picker {
        flex-direction: column;
        align-items: stretch;
    }

    .user-home-servers__top,
    .user-home-servers__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-home-servers__cta {
        min-width: 0;
        width: 100%;
    }

    .admin-server-row,
    .archive-hero {
        grid-template-columns: 1fr;
    }

    .admin-server-row__media {
        min-height: 190px;
    }

    .admin-user-card__summary,
    .panel-card__head--split,
    .panel-card__head-group,
    .profile-stat-list__item,
    .community-topic-card__footer,
    .community-topic-single__meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user-list__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .admin-user-card__panel,
    .admin-user-action-form,
    .admin-user-gold-form,
    .admin-user-card__stats {
        align-items: stretch;
    }

    .admin-user-gold-form__input,
    .admin-player-search,
    .admin-player-search__field,
    .file-trigger-button {
        width: 100%;
    }

    .admin-content-tabs__nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .community-topic-card {
        padding: 12px;
        gap: 10px;
    }

    .community-topic-card__body,
    .community-create-form {
        gap: 10px;
    }

    .community-topic-card__footer > * {
        width: 100%;
        justify-content: center;
    }

    .community-panel-head {
        align-items: center;
        flex-direction: row;
    }

    .community-panel-head .panel-card__head-group {
        align-items: center;
        flex-direction: row;
    }

    .community-panel-head .panel-actions--compact {
        margin-inline-start: auto;
    }

    .community-panel-head .button-surface,
    .community-panel-head .panel-actions--compact .button-surface {
        min-height: 38px;
        width: auto;
        padding-inline: 12px;
        font-size: 0.82rem;
    }

    .community-upload-field__shell {
        min-height: 48px;
        padding: 8px 10px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
    }

    .community-upload-field__button {
        min-height: 32px;
        padding-inline: 12px;
        font-size: 0.82rem;
    }

    .community-upload-field__hint {
        font-size: 0.82rem;
    }

    .community-upload-field__preview-item {
        width: 56px;
        height: 56px;
    }

    .community-gallery__slide img {
        max-height: 280px;
    }

    .community-gallery__thumb {
        width: 62px;
        height: 62px;
    }

    .community-gallery__nav {
        width: 38px;
        height: 38px;
    }

    .admin-content-tab,
    .admin-server-tab {
        width: 100%;
        justify-content: space-between;
        padding-inline: 10px;
    }

    .admin-server-tabs__nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .admin-server-row__top {
        display: grid;
    }

    .admin-status-shell__controls {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-status-options,
    .admin-status-submit {
        width: 100%;
    }

    .server-card__visual {
        justify-self: stretch;
        width: 100%;
        max-width: none;
    }

    .archive-comment {
        padding: 10px;
    }

    .archive-comment__identity strong {
        font-size: 0.9rem;
    }

    .archive-comment__text {
        font-size: 0.88rem;
    }

    .admin-user-list__meta {
        justify-items: start;
        text-align: start;
    }

    .hall-ranking-table {
        min-width: 100%;
        table-layout: auto;
    }

    .hall-ranking-table th,
    .hall-ranking-table td {
        padding: 10px 8px;
    }

    .hall-ranking-table th:first-child,
    .hall-ranking-table td:first-child {
        width: 48px;
    }

    .hall-ranking-table th:last-child,
    .hall-ranking-table td:last-child {
        width: 1%;
    }

    .hall-ranking-table th:nth-child(2),
    .hall-ranking-table td:nth-child(2) {
        padding-inline: 8px;
    }

    .hall-ranking-table__rank,
    .hall-ranking-table__value {
        font-size: 0.82rem;
        font-variant-numeric: tabular-nums;
    }

    .hall-ranking-table th {
        font-size: 0.9rem;
    }

    .hall-player-link {
        gap: 3px;
    }

    .hall-player-link__main {
        gap: 8px;
    }

    .hall-player-link__stars {
        min-width: 0;
        padding-inline: 0;
    }

    .hall-player-link__avatar {
        width: 45px;
        height: 45px;
        border-radius: 8px;
    }

    .hall-player-link__name {
        font-size: 0.88rem;
    }

    .hall-player-link__top {
        gap: 6px;
    }

    .hall-player-link__country {
        flex: 0 0 auto;
    }

    .hall-player-link__country img {
        width: 18px;
        height: 18px;
    }

    .star-strip--hall .star-strip__star {
        font-size: 0.65rem;
    }

    .hall-ranking-table__value {
        font-size: 13px;
    }

    .hall-profile-modal {
        max-height: calc(100vh - 24px);
    }

    .hall-profile-modal__head {
        align-items: center;
        gap: 10px;
    }

    .hall-modal-close {
        width: 38px;
        height: 38px;
        border-radius: 11px;
        font-size: 1.4rem;
    }

    .hall-profile-hero {
        display: grid;
        grid-template-columns: 92px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        text-align: right;
    }

    .hall-profile-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page-messages {
        overflow: hidden;
    }

    .page-messages .metric-strip {
        display: none;
    }

    .page-messages .content-shell {
        padding-top: 0;
    }

    .page-messages .messages-layout {
        min-height: calc(100dvh - var(--hero-shell-height, 132px));
        height: calc(100dvh - var(--hero-shell-height, 132px));
    }

    .page-messages .messages-card {
        min-height: calc(100dvh - var(--hero-shell-height, 132px));
        max-height: calc(100dvh - var(--hero-shell-height, 132px));
        border-top: 0;
    }

    .page-messages .messages-card .panel-card__head--split,
    .page-messages .messages-card .messages-card__head--center {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        min-height: 46px;
    }

    .page-messages .messages-card .messages-card__head--thread {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 8px;
        min-height: 46px;
    }

    .page-messages .messages-card__head {
        padding: 6px 12px;
    }

    .page-messages .messages-card__head h2 {
        font-size: 1.08rem;
        line-height: 1.2;
    }

    .page-messages .site-footer {
        display: none;
    }

    .page-messages .messages-card__body {
        grid-template-rows: 1fr;
        gap: 0;
    }

    .page-messages .messages-card__body--list-only,
    .page-messages .messages-card__body--viewer-only {
        grid-template-rows: 1fr;
    }

    .page-messages .messages-sidebar,
    .page-messages .messages-viewer,
    .page-messages .messages-thread-list,
    .page-messages .messages-conversation,
    .page-messages .messages-composer,
    .page-messages .messages-bubbles {
        min-height: 0;
    }

    .page-messages .messages-viewer {
        overflow: hidden;
    }

    .page-messages .messages-conversation {
        grid-template-rows: minmax(0, 1fr) auto;
    }

    .page-messages .messages-conversation,
    .page-messages .messages-composer {
        padding: 8px;
    }

    .page-messages .messages-bubbles,
    .page-messages .messages-thread-list {
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .page-messages .messages-bubbles::-webkit-scrollbar,
    .page-messages .messages-thread-list::-webkit-scrollbar {
        display: none;
    }

    .page-messages .messages-thread-card {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .page-messages .messages-thread-card__avatar img {
        width: 56px;
        height: 56px;
    }

    .page-messages .messages-thread-card__top {
        align-items: flex-start;
        gap: 8px;
    }

    .page-messages .messages-thread-card__top strong {
        font-size: 0.96rem;
    }

    .page-messages .messages-thread-card__top time {
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .page-messages .messages-thread-card__preview {
        font-size: 0.8rem;
        line-height: 1.45;
    }

    .page-messages .messages-thread-status {
        padding: 4px 8px;
        font-size: 0.72rem;
    }

    .page-messages .message-bubble {
        width: min(100%, 94%);
        padding: 8px 9px;
        gap: 7px;
    }

    .page-messages .message-bubble__avatar {
        width: 30px;
        height: 30px;
    }

    .page-messages .message-bubble__name {
        font-size: 0.88rem;
    }

    .page-messages .message-bubble__time {
        font-size: 0.68rem;
    }

    .page-messages .message-bubble p {
        font-size: 0.86rem;
        line-height: 1.6;
    }

    .page-messages .messages-reply-form {
        gap: 6px;
        padding-top: 6px;
    }

    .page-messages .messages-reply-form__label {
        font-size: 0.86rem;
    }

    .page-messages .messages-reply-form__row {
        grid-template-columns: minmax(0, 1fr) 108px;
        gap: 8px;
        align-items: stretch;
    }

    .page-messages .messages-reply-form__field textarea {
        min-height: 74px;
        max-height: 120px;
        font-size: 0.86rem;
        line-height: 1.55;
    }

    .page-messages .messages-reply-form__submit {
        min-height: 74px;
        padding-inline: 8px;
        font-size: 0.9rem;
    }

    .page-messages .messages-head-back {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .page-messages .messages-head-thread {
        justify-content: center;
        gap: 8px;
        justify-self: center;
    }

    .page-messages .messages-head-thread h2 {
        text-align: center;
    }
}

@media (max-width: 760px) {
    .page-profile .profile-settings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .page-profile .settings-card {
        min-width: 0;
        padding: 12px;
    }

    .page-profile .settings-card--wide {
        grid-column: 1 / -1;
    }

    .page-profile .settings-card:not(.settings-card--wide) .settings-card__head {
        align-items: flex-start;
    }

    .page-profile .settings-card:not(.settings-card--wide) .settings-card__head h3 {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .page-profile .settings-cost {
        min-height: 26px;
        padding-inline: 8px;
        font-size: 0.74rem;
    }

    .page-profile .profile-settings-grid .button-surface {
        width: 100%;
        justify-self: stretch;
        padding-inline: 10px;
        font-size: 0.9rem;
    }

    .page-profile .settings-form--upload {
        justify-items: center;
    }

    .page-profile .avatar-upload-box {
        align-items: center;
        text-align: center;
    }

    .page-profile .avatar-upload-box__preview {
        margin-inline: auto;
    }

    .page-profile .avatar-upload-box__fields {
        width: 100%;
        justify-items: center;
        text-align: center;
    }

    .page-profile .avatar-upload-box__fields .field-group {
        width: 100%;
        justify-items: center;
    }

    .page-profile .avatar-upload-box__fields .field-group span,
    .page-profile .file-name-display {
        text-align: center;
    }

    .page-profile .avatar-file-picker {
        width: min(50%, 220px);
        margin-inline: auto;
    }

    .page-profile .avatar-upload-box__fields > .button-surface {
        width: min(50%, 220px);
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .brandmark {
        width: min(70vw, 220px);
    }

    .site-nav {
        gap: 4px;
    }

    .site-nav a {
        min-height: 38px;
        padding-inline: 4px;
        font-size: 0.62rem;
        letter-spacing: -0.02em;
    }

    .hero-servers__head p {
        font-size: 0.96rem;
    }

    .hero-servers__head span {
        font-size: 0.88rem;
        line-height: 1.9;
    }

    .hero-copy h1 {
        font-size: 1.9rem;
    }

    .metric-value {
        font-size: 1rem;
    }

    .metric-label {
        font-size: 0.82rem;
    }

    .panel-card__head h2,
    .section-block__head h2 {
        font-size: 1.32rem;
    }

    .panel-card__head p,
    .section-block__head p,
    .hero-description {
        font-size: 0.92rem;
    }

    .hero-copy {
        padding-inline: 14px;
        padding-bottom: 16px;
    }

    .auth-tab {
        min-height: 48px;
        font-size: 0.96rem;
    }

    .field-group input,
    .field-group select,
    .field-group textarea {
        min-height: 48px;
    }

    .button-surface,
    .hero-server-card__cta,
    .server-card__cta {
        min-height: 42px;
    }
}

@media (max-width: 420px) {
    .hero-topbar,
    .metric-strip,
    .announcement-bar,
    .hero-servers,
    .panel-card__head,
    .panel-card__body {
        padding-inline: 12px;
    }

    .hero-topbar {
        padding-block: 10px 8px;
    }

    .metric-strip,
    .announcement-bar {
        padding-block: 8px;
    }

    .metric-strip {
        justify-content: space-between;
        gap: 6px;
    }

    .metric-item {
        gap: 4px;
    }

    .metric-value {
        font-size: 0.9rem;
    }

    .metric-label {
        font-size: 0.74rem;
    }

    .panel-card__head {
        padding-block: 10px;
    }

    .panel-card__body {
        padding-top: 12px;
        padding-bottom: 14px;
    }

    .panel-actions--account-home .button-surface,
    .panel-card--auth .panel-actions--account-home .button-surface {
        min-height: 36px;
        padding: 0 4px;
        font-size: 0.74rem;
        width: 100%;
    }

    .panel-actions--account-home > .inline-form {
        width: auto;
        flex: 1 1 0;
    }

    .profile-avatar-stack__frame {
        width: 148px;
        height: 148px;
    }

    .avatar-upload-box__preview,
    .avatar-upload-box__preview img {
        width: 100px;
        height: 100px;
    }

    .community-topic-card__title {
        font-size: 0.98rem;
    }

    .hall-tabs .public-server-tab {
        flex-basis: 29%;
        min-width: 29%;
        font-size: 0.84rem;
        padding-inline: 8px;
    }

    .hall-ranking-table th,
    .hall-ranking-table td {
        padding: 9px 7px;
    }

    .hall-ranking-table th:first-child,
    .hall-ranking-table td:first-child {
        width: 44px;
    }

    .hall-ranking-table th:last-child,
    .hall-ranking-table td:last-child {
        width: 1%;
    }

    .hall-ranking-table th {
        font-size: 0.86rem;
    }

    .star-strip__star {
        font-size: 0.9rem;
    }

    .hall-player-link__avatar {
        width: 44px;
        height: 44px;
    }

    .hall-player-link__stars {
        min-width: 0;
        padding-inline: 0;
    }

    .hall-player-link__name {
        font-size: 0.84rem;
    }

    .hall-player-link__country img {
        width: 18px;
        height: 18px;
    }

    .star-strip--hall .star-strip__star {
        font-size: 0.63rem;
    }

    .hall-ranking-table__value {
        font-size: 13px;
        font-variant-numeric: tabular-nums;
    }

    .hall-profile-modal__body {
        gap: 14px;
    }

    .hall-profile-hero {
        gap: 10px;
        padding: 12px;
    }

    .hall-profile-hero__avatar {
        width: 92px;
        height: 92px;
        flex-basis: 92px;
        border-radius: 14px;
    }

    .hall-profile-hero__flag {
        inset-inline-start: 4px;
        bottom: 4px;
        width: 28px;
        height: 28px;
    }

    .hall-profile-hero__copy h3 {
        font-size: 1.18rem;
        line-height: 1.3;
    }

    .hall-profile-hero__copy {
        gap: 4px;
        min-width: 0;
    }

    .hall-profile-hero__copy p {
        font-size: 0.92rem;
    }

    .hall-profile-stats__item {
        gap: 6px;
        padding: 10px 12px;
    }

    .hall-profile-stats__item strong {
        font-size: 1rem;
    }

    .hall-profile-stats__item span {
        font-size: 0.82rem;
    }

    .hall-profile-stats-card {
        padding: 6px 12px;
        border-radius: 12px;
    }

    .hall-profile-stats-card__row {
        min-height: 44px;
        gap: 12px;
    }

    .hall-profile-stats-card__row span {
        font-size: 0.88rem;
    }

    .hall-profile-stats-card__row strong {
        font-size: 1rem;
    }

    .hall-medals-block,
    .hall-admin-medal-form {
        gap: 12px;
        padding: 12px;
    }

    .hall-special-medals {
        gap: 8px;
    }

    .hall-special-medal {
        width: 56px;
        height: 56px;
        border-radius: 13px;
    }

    .hall-special-medal img,
    .hall-special-medal__fallback {
        width: 40px;
        height: 40px;
        border-radius: 9px;
    }

    .page-messages .messages-card__head {
        padding: 6px 10px;
    }

    .page-messages .messages-card__head h2 {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .metric-strip {
        gap: 4px;
        padding-inline: 8px;
    }

    .metric-item {
        gap: 3px;
    }

    .metric-value {
        font-size: 0.82rem;
    }

    .metric-label {
        font-size: 0.66rem;
    }
}