@media (max-width: 560px) {
    .brand-lockup small {
        max-width: 170px;
    }

    .hero-panel {
        grid-template-columns: 1fr 86px;
        min-height: 152px;
        padding: 16px;
    }

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

    .crystal-orbit span {
        width: 58px;
        height: 58px;
    }

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

    .activity-grid,
    .game-grid,
    .inventory-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .topbar {
        min-height: 68px;
        gap: 10px;
    }

    .brand-lockup {
        gap: 9px;
    }

    .brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
        font-size: 14px;
    }

    .brand-lockup strong {
        font-size: 14px;
    }

    .brand-lockup small {
        max-width: 138px;
        font-size: 9px;
    }

    .topbar-actions {
        gap: 6px;
    }

    .topbar .icon-button {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 13px;
    }
}