@media (max-width: 1100px) {
    .hero-container,
    .support-grid,
    .signal-grid,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        width: min(100%, 52rem);
    }

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

    .community-grid {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .nav-menu {
        position: fixed;
        top: calc(var(--nav-height) + 0.75rem);
        right: 1rem;
        width: min(18rem, calc(100% - 2rem));
        padding: 1rem;
        display: grid;
        gap: 0.75rem;
        border-radius: var(--radius-xl);
        background: rgba(8, 14, 24, 0.96);
        border: 1px solid var(--line-soft);
        box-shadow: var(--shadow-strong);
        backdrop-filter: blur(18px);
        transform: translateY(-0.75rem);
        opacity: 0;
        pointer-events: none;
        z-index: 160;
        transition: opacity var(--transition-base), transform var(--transition-base);
    }

    .nav-menu.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        padding: 0.85rem 1rem;
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.03);
        line-height: 1.15;
    }

    .nav-link::after {
        left: 1rem;
        right: 1rem;
        bottom: 0.45rem;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 74px;
    }

    .container,
    .nav-container,
    .footer-bottom {
        width: min(100%, calc(100% - 1.2rem));
    }

    .nav-container {
        gap: 0.6rem;
    }

    .footer {
        padding: var(--space-5) 0 0;
    }

    .footer-content {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
    }

    .footer-brand,
    .footer-links {
        min-height: 100%;
        padding: 0.9rem;
        border-radius: var(--radius-lg);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
        border: 1px solid rgba(255, 255, 255, 0.07);
        box-shadow: 0 18px 34px rgba(2, 10, 22, 0.2);
        backdrop-filter: blur(16px);
    }

    .footer-brand {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 0.9rem;
    }

    .footer-links {
        width: 100%;
        gap: 0.45rem;
    }

    .footer-bottom {
        margin-top: 0.7rem;
        padding: 0.85rem 0 calc(4.7rem + env(safe-area-inset-bottom));
    }

    .nav-logo {
        min-width: 0;
        gap: 0.55rem;
    }

    .nav-logo-img {
        width: 2.2rem;
        height: 2.2rem;
    }

    .nav-logo-copy strong {
        font-size: 1.02rem;
        letter-spacing: -0.03em;
        padding-bottom: 0.24rem;
    }

    .hero {
        padding-top: 0;
    }

    .hero-copy,
    .hero-stage,
    .signal-card,
    .community-card,
    .support-card,
    .player-shell-inner {
        border-radius: var(--radius-lg);
    }

    .hero-actions,
    .hero-slide-actions,
    .player-shell-header,
    .player-shell-actions,
    .player-shell-footer,
    .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .player-shell-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .categories-scroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-nav {
        display: inline-flex;
    }

    .theme-fab {
        right: 0.8rem;
        bottom: 5.9rem;
        max-width: calc(100% - 1.2rem);
    }

    .theme-drawer {
        right: 0.6rem;
        left: 0.6rem;
        bottom: 10.1rem;
    }

    .theme-switcher {
        width: 100%;
        max-height: min(72vh, 34rem);
        overflow: auto;
    }

    .theme-switcher-head {
        align-items: flex-start;
    }

    .support-grid {
        gap: 1rem;
    }

    .support-card {
        padding: 1rem;
    }

    .theme-switcher-copy,
    .theme-switcher-panel,
    .theme-switcher-controls {
        width: 100%;
    }

    .theme-chip {
        flex: 1 1 30%;
        text-align: center;
    }

    .btn {
        min-height: 3.05rem;
        min-width: 0;
        padding: 0.9rem 1.05rem;
        font-size: 0.96rem;
    }

    .btn-inline {
        min-height: 2.6rem;
        padding: 0.68rem 0.9rem;
    }

    .hero-actions,
    .hero-slide-actions {
        align-items: flex-start;
    }

    .hero-actions .btn,
    .hero-slide-actions .btn {
        flex: 0 1 auto;
        width: auto;
        min-width: 9.5rem;
        min-height: 2.85rem;
        padding: 0.78rem 1rem;
        font-size: 0.92rem;
    }

    .comment-actions .btn {
        flex: 1 1 100%;
    }

    .category-chip {
        min-height: 2.9rem;
        padding: 0.75rem 0.95rem;
        font-size: 0.88rem;
    }

    .player-shell {
        margin-bottom: var(--space-5);
    }

    .player-shell-overlay {
        padding: 0.75rem 0;
    }

    .player-shell-overlay .player-shell-inner,
    .player-shell-inner {
        width: calc(100% - 1rem);
        padding: 0.95rem;
    }

    .gamer-fx {
        opacity: 0.72;
    }

    .site-scene {
        opacity: 0.88;
    }

    .site-scene-particles,
    .hero-particles {
        opacity: 0.58;
    }

    .site-scene-particle:nth-child(n + 7),
    .hero-particle:nth-child(n + 8) {
        display: none;
    }

    .community-card,
    .support-card,
    .hero-copy,
    .hero-stage,
    .player-shell-inner,
    .signal-card,
    .micro-card,
    .recent-card,
    .install-device-card,
    .player-stat,
    .highlight-chip,
    .theme-switcher {
        backdrop-filter: none;
    }

    .site-scene-panel-a {
        top: 16%;
        right: -2.5rem;
        width: 10.5rem;
        height: 6.5rem;
    }

    .site-scene-panel-b {
        left: -3rem;
        bottom: 14%;
        width: 11rem;
        height: 6.8rem;
    }

    .site-scene-ribbon-a {
        top: 30%;
        left: -5rem;
        width: 16rem;
    }

    .site-scene-ribbon-b {
        right: -5rem;
        bottom: 20%;
        width: 14rem;
    }

    .site-scene-orb-a {
        left: -1rem;
        top: 52%;
        width: 6rem;
        height: 6rem;
    }

    .site-scene-orb-b {
        right: 16%;
        top: 18%;
        width: 5rem;
        height: 5rem;
    }

    .hero-particles {
        opacity: 0.95;
    }

    .hero-particle {
        transform: scale(0.92);
    }

    .fx-panel {
        left: -1.1rem;
        bottom: 2.8rem;
        width: 11.5rem;
        height: 7rem;
    }

    .fx-ring {
        left: auto;
        right: -1rem;
        top: 20%;
        width: 8.8rem;
        height: 8.8rem;
    }

    .fx-prism {
        right: 13%;
        top: 14%;
        width: 7.2rem;
        height: 7.2rem;
    }

    .fx-orbit {
        left: -0.5rem;
        top: 10.5rem;
        width: 9.2rem;
        height: 9.2rem;
    }

    .fx-shard {
        left: 38%;
        bottom: 3.2rem;
        width: 5.2rem;
        height: 10.2rem;
    }

    .fx-node {
        right: 9%;
        top: 11%;
        width: 4.9rem;
        height: 4.9rem;
    }

    .fx-beam {
        right: -2rem;
        bottom: 4.4rem;
        width: 11rem;
    }

    #player-frame,
    .player-shell[data-mode="inline"] #player-frame {
        height: calc(100dvh - 16rem);
        min-height: 22rem;
    }

    .player-shell-overlay .player-shell-inner {
        max-height: calc(100dvh - 1rem);
    }

    .install-device-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    h1 {
        font-size: clamp(2.2rem, 11vw, 3.25rem);
    }

    .hero-copy,
    .hero-stage,
    .community-card,
    .support-card,
    .signal-card {
        padding: 1rem;
    }

    .hero-copy {
        padding: 0;
    }

    .hero-slide-card {
        min-height: 20.5rem;
    }

    .hero-slide-copy {
        padding: 1rem;
    }

    .hero-slide-copy h2 {
        font-size: 1.8rem;
    }

    .hero-thumb,
    .recent-card {
        padding: 0.8rem;
    }

    .recent-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .recent-card-action {
        grid-column: 2;
        justify-self: start;
        margin-top: 0.15rem;
    }

    .gamer-fx {
        opacity: 0.64;
    }

    .site-scene {
        opacity: 0.76;
    }

    .site-scene-panel-b,
    .site-scene-ribbon-b,
    .fx-beam,
    .fx-node {
        display: none;
    }

    .site-scene-panel-a {
        top: 14%;
        right: -3rem;
        width: 8rem;
        height: 5rem;
    }

    .site-scene-ribbon-a {
        top: 26%;
        left: -5.5rem;
        width: 13rem;
    }

    .site-scene-particle:nth-child(2n) {
        opacity: 0.18;
    }

    .hero-particles {
        opacity: 0.58;
    }

    .hero-particle:nth-child(2n) {
        opacity: 0.44;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .player-shell-title-group {
        align-items: flex-start;
    }

    .player-shell-actions {
        gap: 0.75rem;
    }

    .player-mode-switch {
        width: 100%;
        justify-content: space-between;
    }

    .mode-btn {
        flex: 1 1 0;
        padding-inline: 0.6rem;
    }

    .player-shell-stats {
        grid-template-columns: 1fr;
    }

    .comment-actions .btn {
        width: 100%;
    }

    .btn {
        min-height: 2.95rem;
        min-width: 0;
        width: 100%;
        white-space: normal;
        padding: 0.82rem 0.95rem;
        font-size: 0.93rem;
    }

    .hero-actions .btn,
    .hero-slide-actions .btn {
        width: auto;
        min-width: 8.75rem;
        max-width: 100%;
        min-height: 2.7rem;
        padding: 0.72rem 0.92rem;
        font-size: 0.88rem;
    }

    .hero-actions.support-contact-actions .btn {
        width: 100%;
    }

    .btn-inline {
        min-height: 2.5rem;
        padding: 0.65rem 0.85rem;
    }

    .theme-fab {
        left: auto;
        right: 0.7rem;
        justify-content: center;
        min-height: 3rem;
        padding-inline: 0.9rem;
    }

    .theme-drawer {
        right: 0.45rem;
        left: 0.45rem;
        bottom: 9.6rem;
    }

    .theme-switcher {
        padding: 0.95rem;
        border-radius: 1.2rem;
    }

    .footer-brand,
    .footer-links {
        padding: 0.8rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 0.8rem;
    }

    .footer-kicker {
        max-width: 100%;
        white-space: normal;
    }

    .footer-links h4 {
        font-size: 0.84rem;
    }

    .footer-links a,
    .footer-search {
        font-size: 0.88rem;
        line-height: 1.35;
    }

    .footer-bottom {
        width: min(100%, calc(100% - 1rem));
        margin-top: 0.6rem;
        padding: 0.78rem 0 calc(4.45rem + env(safe-area-inset-bottom));
    }

    .theme-switcher-head {
        flex-direction: row;
    }

    .fx-cube {
        top: 6.4rem;
        right: -0.8rem;
        width: 6.4rem;
        height: 6.4rem;
    }

    .fx-panel {
        left: -2.2rem;
        bottom: 5.8rem;
        width: 9rem;
        height: 5.5rem;
    }

    .fx-ring {
        right: -2.2rem;
        top: 12rem;
        width: 7rem;
        height: 7rem;
    }

    .fx-prism {
        right: 2rem;
        top: 8.5rem;
        width: 5.6rem;
        height: 5.6rem;
    }

    .fx-orbit {
        left: -1.2rem;
        top: 12rem;
        width: 7.2rem;
        height: 7.2rem;
    }

    .fx-shard {
        left: 40%;
        bottom: 8rem;
        width: 4rem;
        height: 7.8rem;
    }

    .fx-node {
        right: 0.8rem;
        top: 8.8rem;
        width: 3.9rem;
        height: 3.9rem;
    }

    .fx-beam {
        right: -2.8rem;
        bottom: 7.2rem;
        width: 8.6rem;
    }

    .hero-highlights {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-header {
        padding: 0.85rem;
    }

    .toast {
        border-radius: var(--radius-md);
        bottom: 5rem;
    }

    .loader-content {
        width: min(32rem, 100%);
        padding: 0.7rem;
    }

    .loader-title {
        font-size: clamp(1.35rem, 7vw, 1.8rem);
    }

    .loader-spinner-wrap {
        width: 4.3rem;
        height: 4.3rem;
    }

    .loader-shell {
        gap: 0.7rem;
    }

    .loader-visual,
    .loader-panel {
        padding: 0.9rem;
    }

    .loader-highlight-grid {
        gap: 0.55rem;
    }

    .loader-brand-row {
        gap: 0.45rem;
    }

    .loader-signal {
        padding: 0.35rem 0.55rem;
    }

    .loader-progress {
        height: 0.58rem;
    }

    .loader-stage-list,
    .loader-metric-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-height: 560px) and (orientation: landscape) {
    .hero {
        padding-top: 0;
    }

    .hero-container {
        gap: var(--space-4);
    }

    .hero-slide-card {
        min-height: 17rem;
    }

    #hero-stage-main {
        min-height: 18.5rem;
    }

    #player-frame,
    .player-shell[data-mode="inline"] #player-frame {
        height: calc(100dvh - 11rem);
    }
}

@media (hover: none) and (pointer: coarse) {
    .btn,
    .mode-btn,
    .category-chip,
    .nav-search-btn,
    .icon-btn,
    .mobile-nav-item {
        min-height: 44px;
    }

    .game-card:hover,
    .featured-card:hover,
    .blog-post-card:hover,
    .blog-page-archive-item:hover,
    .hero-thumb:hover,
    .search-result-item:hover,
    .hero-copy:hover,
    .hero-stage:hover,
    .signal-card:hover,
    .community-card:hover,
    .support-card:hover,
    .micro-card:hover,
    .recent-card:hover,
    .install-device-card:hover,
    .player-stat:hover,
    .highlight-chip:hover {
        transform: none;
    }
}

@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    .mobile-nav {
        padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
    }
}

@media (max-width: 420px) {
    .mobile-nav {
        gap: 0.2rem;
        width: calc(100% - 0.65rem);
        padding: 0.38rem 0.4rem;
        border-radius: 1.15rem;
    }

    .mobile-nav-item {
        min-height: 2.95rem;
        padding: 0.64rem 0.3rem;
        font-size: 0.72rem;
    }

    .mobile-nav-item span {
        letter-spacing: -0.025em;
    }
}