@media (max-width: 900px) {

    .detail-panel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(420px, 100vw);
        z-index: 60;
        box-shadow: -10px 0 34px rgba(0,0,0,.45);
        border-left: 1px solid var(--border2);
    }

    .detail-resizer {
        display: none;
    }
}

@media (max-width: 640px) {
    .detail-panel {
        width: 100vw;
        border-left: none;
    }

    .modal {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
    }

    .sticky-board .scratch-card {
        width: min(250px, calc(100vw - 44px));
    }

    .sc-grab {
        height: 22px;
    }

    .sh-invite-row {
        flex-wrap: wrap;
    }

    .sh-role-sel {
        flex: 1 1 auto !important;
    }

    .tabs {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .tabs::-webkit-scrollbar {
            display: none;
        }
}