@supports (height: 100dvh) {
    html,
    body,
    .desktop-container {
        height: 100dvh;
    }
}

@media (hover: hover) and (pointer: fine) {
    .image-edit-trigger,
    .app-item,
    .status-action,
    .dot {
        transition: transform 150ms ease, filter 150ms ease;
    }

    .image-edit-trigger:hover,
    .status-action:hover {
        filter: brightness(0.97);
    }

    .app-item:hover .app-icon {
        transform: translateY(-2px);
    }
}

@media (max-width: 359px) {
    :root {
        --page-gap: 14px;
    }

    .screen {
        padding-inline: max(12px, var(--safe-left)) max(12px, var(--safe-right));
    }

    .widget-replaced {
        gap: 12px;
        padding: 14px 12px;
    }

    .time-block-container {
        grid-template-columns: minmax(22px, 1fr) auto minmax(50px, 1fr);
        gap: 4px;
    }

    .alano-text {
        display: none;
    }

    .time-and-seconds-wrapper {
        min-width: 106px;
    }

    .big-time {
        font-size: 2.55rem;
    }

    .seconds-display {
        font-size: 0.9rem;
    }

    .date-replaced {
        font-size: 0.68rem;
    }

    .photo-record-wrapper {
        gap: 10px;
        padding: 10px;
    }

    .page1-bottom-row,
    .page2-middle-row,
    .page2-bottom-row {
        gap: 10px;
    }

    .app-grid-2x2 {
        gap: 16px 6px;
    }

    .app-grid-2x2 .app-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 1.5rem;
    }

    .app-name {
        font-size: 0.68rem;
    }

    .cd-widget {
        padding: 11px;
    }

    .cd-widget-image-container {
        width: 70px;
        height: 70px;
    }

    .cd-widget-cd {
        left: 48px;
        width: 62px;
        height: 62px;
    }

    .call-widget-buttons {
        padding-inline: 20px;
    }

    .dock-container {
        width: calc(100% - 24px - var(--safe-left) - var(--safe-right));
    }
}

@media (min-width: 600px) {
    .screen {
        padding-inline: max(28px, calc((100% - 760px) / 2));
    }

    .widget-replaced,
    .page1-bottom-row,
    .weather-scale-wrapper,
    .page2-middle-row,
    .page2-bottom-row {
        max-width: 760px;
        margin-inline: auto;
    }
}

@media (min-width: 860px), (orientation: landscape) and (min-width: 640px) and (max-height: 600px) {
    .screen {
        display: grid;
        padding: 28px max(32px, calc((100% - 1040px) / 2));
        overflow-y: auto;
    }

    .screen-home {
        grid-template-columns: minmax(320px, 1.12fr) minmax(300px, 0.88fr);
        align-items: center;
    }

    .screen-home .widget-replaced,
    .screen-home .page1-bottom-row {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .screen-social {
        grid-template-columns: repeat(2, minmax(300px, 1fr));
        grid-template-rows: auto auto;
        align-content: center;
        align-items: stretch;
    }

    .screen-social .weather-scale-wrapper {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .screen-social .page2-middle-row,
    .screen-social .page2-bottom-row {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .screen-social .page2-bottom-row {
        align-self: end;
    }
}

@media (min-width: 1100px) and (min-height: 700px) {
    .screen {
        gap: 28px;
    }

    .screen-home {
        grid-template-columns: minmax(430px, 560px) minmax(330px, 420px);
        justify-content: center;
    }

    .screen-social {
        grid-template-columns: repeat(2, minmax(380px, 490px));
        justify-content: center;
    }
}

@media (max-height: 700px) {
    :root {
        --dock-height: 72px;
        --dock-gap: 8px;
        --page-gap: 14px;
    }

    .screen {
        padding-block: 12px;
    }

    .dock-container {
        border-radius: 22px;
    }

    .dock-container .app-icon {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 1.5rem;
    }

    .pagination {
        bottom: calc(var(--dock-height) + var(--dock-gap) + var(--safe-bottom));
    }
}

@media (max-height: 600px) {
    :root {
        --status-height: 28px;
        --dock-height: 66px;
    }

    .dock-container .app-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
}

@media (display-mode: standalone) {
    body {
        user-select: none;
        -webkit-user-select: none;
    }

    input {
        user-select: text;
        -webkit-user-select: text;
    }
}