@media (max-width: 820px) {
    :root {
        --mobile-edge: max(10px, env(safe-area-inset-left));
        --mobile-edge-right: max(10px, env(safe-area-inset-right));
        --mobile-topbar-height: 64px;
    }

    html {
        -webkit-text-size-adjust: 100%;
    }

    body {
        min-width: 320px;
        overflow: hidden;
    }

    .topbar {
        height: var(--mobile-topbar-height);
        padding: 0 var(--mobile-edge-right) 0 var(--mobile-edge);
        justify-content: center;
    }

    .topbar-tools {
        left: var(--mobile-edge);
        top: 10px;
        transform: none;
    }

    .tools-menu-button,
    .login-button {
        min-width: 44px;
        min-height: 44px;
        height: 44px;
    }

    .tools-menu-button {
        width: 44px;
        padding: 0;
    }

    .tools-menu-button span,
    .title {
        display: none;
    }

    .brand {
        position: absolute;
        left: 40%;
        transform: translateX(-50%);
        gap: 0;
    }

    .logo {
        width: 32px;
        height: 32px;
        padding: 5px;
        border-radius: 8px;
    }

    .player-count {
        position: absolute;
        top: 50%;
        left: calc(var(--mobile-edge) + 52px);
        height: 36px;
        max-width: 68px;
        margin: 0;
        padding: 0 9px;
        transform: translateY(-50%);
        box-sizing: border-box;
    }

    .player-count > span:last-child {
        display: none;
    }

    .legal-link {
        position: absolute;
        top: 50%;
        right: calc(var(--mobile-edge-right) + 88px);
        width: auto;
        min-width: 78px;
        height: 36px;
        margin: 0;
        padding: 0 10px;
        transform: translateY(-50%);
        box-sizing: border-box;
        font-size: 12px;
        white-space: nowrap;
    }

    .legal-link::before {
        display: none;
    }

    .login-menu {
        right: var(--mobile-edge-right);
        top: 10px;
        transform: none;
    }

    .login-button {
        max-width: 92px;
        padding: 0 12px;
        border-radius: 12px;
    }

    .login-button.logged-in {
        width: 44px;
        padding: 0;
    }

    .login-button.logged-in .login-label {
        display: none;
    }

    .login-label {
        max-width: 50px;
    }

    .login-avatar {
        width: 30px;
        height: 30px;
    }

    .canvas {
        inset: 0;
        width: auto;
        height: auto;
        overflow: hidden;
    }

    .canvas canvas {
        display: block;
        width: 100%;
        height: 100%;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .coords-panel {
        position: fixed;
        top: calc(var(--mobile-topbar-height) + 12px);
        right: auto;
        bottom: auto;
        left: var(--mobile-edge);
        z-index: 900;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        width: auto;
        max-width: min(236px, calc(100vw - var(--mobile-edge) - var(--mobile-edge-right)));
        padding: 6px;
        border-radius: 10px;
        opacity: 0.94;
        pointer-events: none;
    }

    .coord-field {
        gap: 5px;
        font-size: 12px;
    }

    .coord-field input {
        width: 42px;
        height: 28px;
        padding: 0 6px;
        font-size: 12px;
        pointer-events: none;
    }

    .coord-field-info {
        flex: 1 1 100%;
        max-width: 100%;
        padding-top: 7px;
        padding-left: 0;
        border-top: 1px solid #e2ddd6;
        border-left: 0;
        white-space: normal;
        line-height: 1.35;
    }

    .colorPickerBar {
        position: fixed;
        right: var(--mobile-edge-right);
        bottom: max(10px, env(safe-area-inset-bottom));
        left: var(--mobile-edge);
        z-index: 1100;
        max-width: none;
        max-height: calc(100dvh - var(--mobile-topbar-height) - 28px);
        padding: 10px;
        justify-content: flex-start;
        gap: 8px;
        box-sizing: border-box;
        transform: none;
        border-radius: 12px;
    }

    .colorPickerBar .sep {
        display: none;
    }

    .current-color,
    .expand-btn,
    .btn-cancel {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .swatch-row {
        flex: 1 1 170px;
        min-width: 0;
        padding: 2px 1px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .swatch-row::-webkit-scrollbar {
        display: none;
    }

    .swatch {
        width: 34px;
        height: 34px;
        border-radius: 7px;
    }

    .palette-popup {
        position: fixed;
        right: var(--mobile-edge-right);
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px);
        left: var(--mobile-edge);
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        width: auto;
        max-height: min(48dvh, 340px);
        padding: 10px;
        gap: 7px;
        overflow: auto;
        box-sizing: border-box;
        border-radius: 12px;
    }

    .palette-popup .swatch {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .btn {
        min-height: 40px;
        border-radius: 8px;
    }

    .btn-eraser {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .btn-eraser span {
        display: none;
    }

    .cooldown-indicator {
        height: 40px;
        min-width: 78px;
        padding: 0 10px;
        border-radius: 10px;
        font-size: 11px;
    }

    .coords {
        max-width: 98px;
        margin-left: auto;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
    }

    .tools-dropdown,
    .side-panel.expanded .tools-dropdown,
    .side-panel[data-active-panel="statistics"].expanded .tools-dropdown,
    .side-panel[data-active-panel="admin"].expanded .tools-dropdown {
        position: fixed;
        top: calc(var(--mobile-topbar-height) + 8px);
        right: var(--mobile-edge-right);
        left: var(--mobile-edge);
        width: calc(100vw - var(--mobile-edge) - var(--mobile-edge-right));
        max-width: none;
        max-height: calc(100dvh - var(--mobile-topbar-height) - 22px);
        grid-template-columns: minmax(0, 1fr);
        overflow: hidden;
        box-sizing: border-box;
        border-radius: 12px;
        transform-origin: top left;
    }

    .side-actions {
        width: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
    }

    .side-action {
        height: 44px;
        justify-content: center;
        padding: 0 8px;
    }

    .side-action-label {
        font-size: 12px;
    }

    .side-panel.expanded .side-content {
        max-height: calc(100dvh - var(--mobile-topbar-height) - 190px);
        padding: 12px;
        overflow: auto;
        border-top: 1px solid var(--panel-border);
        border-left: 0;
    }

    .side-summary {
        grid-template-columns: 1fr;
    }

    .leaderboard-list {
        max-height: min(42dvh, 340px);
    }

    .admin-user-item,
    .admin-snapshot-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .admin-ban-btn,
    .admin-snapshot-restore-btn,
    .admin-snapshot-delete-btn {
        min-height: 36px;
    }

    .admin-snapshot-actions {
        grid-template-columns: 1fr;
    }

    .admin-snapshot-item-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .login-settingsPopup {
        position: fixed;
        top: calc(var(--mobile-topbar-height) + 8px);
        right: var(--mobile-edge-right);
        width: min(310px, calc(100vw - 20px));
        max-height: calc(100dvh - var(--mobile-topbar-height) - 20px);
        overflow: auto;
    }

    .login-settingsPopup::before {
        display: none;
    }
}

@media (hover: none) and (pointer: coarse) {
    .current-color:hover,
    .swatch:hover,
    .legal-link:hover,
    .login-button:hover,
    .tools-menu-button:hover,
    .side-action:hover,
    .btn:hover,
    .btn-cancel:hover,
    .expand-btn:hover {
        transform: none;
    }
}

@media (max-width: 430px) {
    .player-count {
        left: calc(var(--mobile-edge) + 50px);
        max-width: 52px;
        justify-content: center;
        padding: 0 7px;
    }

    .legal-link {
        right: calc(var(--mobile-edge-right) + 82px);
        height: 34px;
        min-width: 76px;
        padding: 0 8px;
        font-size: 11px;
    }

    .logo {
        width: 30px;
        height: 30px;
    }

    .colorPickerBar {
        padding: 8px;
        gap: 7px;
    }

    .swatch {
        width: 32px;
        height: 32px;
    }

    .cooldown-indicator {
        order: 10;
        flex: 1 1 92px;
    }

    .coords {
        order: 11;
        flex: 0 1 auto;
    }

    .palette-popup {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        bottom: calc(max(10px, env(safe-area-inset-bottom)) + 116px);
    }

    .side-action {
        justify-content: flex-start;
    }
}

@media (max-width: 360px) {
    .player-count {
        display: none;
    }

    .login-button:not(.logged-in) .login-label {
        display: none;
    }

    .login-button:not(.logged-in) {
        width: 44px;
        padding: 0;
    }

    .legal-link {
        right: calc(var(--mobile-edge-right) + 54px);
        min-width: 74px;
    }
}