/* Celestrius: responsive player space and touch controls. */
.pd-map-frame { width: 100%; min-width: 0; }
.pd-map-frame canvas {
    position: absolute;
    inset: 0;
}

@media (max-width: 820px) {
    .pd-grid { grid-template-columns: minmax(0, 1fr); }
    .pd-events-card .pd-list { grid-template-columns: minmax(0, 1fr); }
    .pd-heading, .pd-leader-heading { align-items: flex-start; flex-direction: column; }
    .pd-heading-actions { justify-content: flex-start; }
    .pd-card-heading { align-items: flex-start; flex-wrap: wrap; gap: 8px 14px; }
    .pd-card-heading h3 { flex: 1 1 auto; min-width: 0; }
    .pd-card-heading .pd-subtle { max-width: 100%; overflow-wrap: anywhere; }
    .pd-map-frame { min-height: 0; aspect-ratio: 1; }
    .pd-list > li, .pd-country-list span, .pd-machine-badges span {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .pd-server-summary span { max-width: 100%; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .shell { width: calc(100% - 32px); }

    /* Administration remains available inside the mobile menu. */
    .site-header .container { padding-inline: 16px; }
    .site-header .header-content { gap: 10px; }
    .site-header .brand-logo { flex-shrink: 1; min-width: 0; }
    .site-header .brand-icon { flex-shrink: 0; }
    .site-header .header-actions { gap: 6px; }
    .site-header .header-actions .admin-launch-btn { display: none; }
    .site-header #themeToggle, .site-header .burger-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 8px;
    }
    .site-header .mobile-drawer {
        max-height: calc(100vh - 69px);
        max-height: calc(100dvh - 69px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 16px;
    }
    .site-header .mobile-drawer .nav-link { min-height: 44px; font-size: 1rem; }

    .button, .pd-heading-actions .button, .signout-button {
        min-height: 48px;
        padding: 10px 16px;
        font-size: .9375rem;
        line-height: 1.4;
        text-align: center;
        white-space: normal;
    }
    .hero-actions { flex-direction: column; }
    .hero-actions .button { width: 100%; }
    .hero-lead, .section-intro, .account-description, .community-band p {
        font-size: 1rem;
        line-height: 1.7;
    }
    .eyebrow, .section-eyebrow { font-size: .75rem; letter-spacing: .08em; }
    .hero-facts span { font-size: .75rem; }
    .hero-art { height: 230px; }
    .join-panel, .account-panel { padding: 24px 18px; }
    .join-steps strong { font-size: 1rem; }
    .join-steps p { font-size: .9375rem; }
    .join-steps li { gap: 10px; }
    .join-footnote, .auth-note, .brand-disclaimer { font-size: .875rem; }
    .status-label, .status-stat span, .status-update,
    .address-label, .secure-chip, .more-links span { font-size: .75rem; letter-spacing: .04em; }
    .status-stat strong { font-size: .875rem; overflow-wrap: anywhere; }
    .status-update { white-space: normal; }
    .account-topline { flex-wrap: wrap; gap: 10px; }
    .profile-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .profile-preview > div:last-child { grid-column: 1 / -1; }
    .profile-preview span { font-size: .75rem; letter-spacing: .04em; white-space: normal; }
    .profile-preview strong { font-size: .875rem; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
    .copy-icon-button { width: 44px; height: 44px; }
    .address-card { gap: 8px; padding: 12px; }
    .address-card strong { font-size: clamp(.8rem, 3.7vw, 1.1rem); letter-spacing: 0; }
    .microsoft-button { gap: 8px; padding-inline: 10px; }
    .ms-logo { flex: 0 0 16px; width: 16px; height: 16px; }
    .pd-dashboard-link { min-height: 44px; align-items: center; font-size: 1rem; }
    .community-band h2 { font-size: 1.25rem; line-height: 1.3; }
    .community-band .button { min-height: 48px; }
    .more-links strong { font-size: 1.125rem; }
    body #cybercorpGlobalFooter .cc-footer-social-link,
    body #cybercorpGlobalFooter .cc-footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
    body #cybercorpGlobalFooter .footer-copy { font-size: .8125rem; }

    .player-dashboard, .server-main-grid { scroll-margin-top: 0; }
    .pd-heading { gap: 16px; }
    .pd-heading h2 { font-size: clamp(1.875rem, 8vw, 2.5rem); line-height: 1.15; }
    .pd-heading-actions { width: 100%; gap: 10px; }
    .pd-heading-actions .button { margin-left: auto; flex-shrink: 0; }
    .pd-badge { max-width: 100%; font-size: .75rem; line-height: 1.5; padding: 8px 10px; }
    .pd-badge::before { flex: 0 0 6px; }
    .pd-notice, .pd-empty, .pd-subtle { font-size: .9375rem; }
    .pd-card { padding: 20px 18px; }
    .pd-card h3 { font-size: 1.375rem; }
    .pd-caption { font-size: .75rem; }
    .pd-facts { gap: 12px 16px; }
    .pd-facts dt { font-size: .875rem; line-height: 1.5; }
    .pd-facts dd { font-size: 1.0625rem; }
    .pd-position { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pd-position > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 10px; }
    .pd-position dd { margin: 0; font-size: .875rem; text-align: right; }
    .pd-footnote { font-size: .8125rem; }
    .pd-map-frame > p { font-size: 1rem; line-height: 1.6; }
    .pd-map-north { font-size: .75rem; }
    .pd-list strong { font-size: 1.0625rem; }
    .pd-list small { font-size: .875rem; }
    .pd-machine-badges span, .pd-country-list span, .pd-server-summary span { font-size: .75rem; line-height: 1.5; }
    .pd-known h4 { font-size: 1rem; }
    .pd-leadership { padding: 16px 12px; }
    .pd-leadership .pd-card { padding: 18px 14px; }
    .pd-gate { padding: 22px 18px; }
    .pd-gate .button { width: 100%; }
    .copy-toast { right: 16px; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); font-size: .9375rem; text-align: center; }
}

@media (max-width: 420px) {
    .site-header .brand-sub { display: none; }
    .pd-heading-actions .button { margin-left: 0; }
}

@media (max-width: 360px) {
    .pd-facts { grid-template-columns: minmax(0, 1fr); }
    .hero-copy h1 { font-size: 3.4rem; }
}

@media (max-height: 500px) and (max-width: 820px) {
    .pd-map-frame { width: min(100%, 340px); margin-inline: auto; }
}