.home-screen {

    position: relative;

    z-index: 2;

    height: 100%;

    padding-bottom: 160px;

}
.icon.podcasts{
    background: linear-gradient(135deg,#7f00ff,#b54cff);
    border-radius:22px;
    position:relative;
}

.icon.podcasts::before{
    content:"🎙️";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-size:30px;
}

.app-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px 10px;

    padding: 12px 14px;

}

.app-icon {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-decoration: none;

    color: white;

    position: relative;

    transition:
        transform .15s ease;

}

.app-icon:active {

    transform: scale(.88);

}

.app-icon span {

    margin-top: 6px;

    max-width: 70px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-align: center;

    font-size: 11px;

    text-shadow:
        0 1px 2px rgba(0,0,0,.7);

}

.icon {

    width: 60px;

    height: 60px;

    border-radius: 14px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    box-shadow:
        0 4px 10px rgba(0,0,0,.25);

}

.messages,
.photos,
.notes,
.contacts,
.phone,
.settings,
.spotify,
.instagram {

    position: relative;

}

.messages::before,
.photos::before,
.notes::before,
.contacts::before,
.phone::before,
.settings::before,
.spotify::before,
.instagram::before {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100%;

}

.messages {

    background:
        linear-gradient(
            135deg,
            #4cd964,
            #34c759
        );

}

.messages::before {

    content: "💬";

}

.photos {

    background:
        linear-gradient(
            135deg,
            #ffcc00,
            #ff9500
        );

}

.photos::before {

    content: "🌸";

}

.spotify {

    background:
        linear-gradient(
            135deg,
            #1ed760,
            #169c46
        );

}

.spotify::before {

    content: "🎵";

}

.instagram {

    background:
        linear-gradient(
            135deg,
            #feda75,
            #fa7e1e,
            #d62976,
            #962fbf,
            #4f5bd5
        );

}

.instagram::before {

    content: "📷";

}

.notes {

    background:
        linear-gradient(
            135deg,
            #ffe066,
            #ffd43b
        );

}

.notes::before {

    content: "📝";

}

.contacts {

    background:
        linear-gradient(
            135deg,
            #74c0fc,
            #339af0
        );

}

.contacts::before {

    content: "👤";

}

.phone {

    background:
        linear-gradient(
            135deg,
            #51cf66,
            #37b24d
        );

}

.phone::before {

    content: "📞";

}

.settings {

    background:
        linear-gradient(
            135deg,
            #adb5bd,
            #868e96
        );

}

.settings::before {

    content: "⚙";

}

.badge {

    position: absolute;

    top: -4px;
    right: 4px;

    min-width: 20px;
    height: 20px;

    padding: 0 6px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 999px;

    background: #ff3b30;

    color: white;

    font-size: 11px;
    font-weight: 700;

}

@keyframes move {

    0% {
        transform: rotate(-1deg);
    }

    50% {
        transform: rotate(1deg);
    }

    100% {
        transform: rotate(-1deg);
    }

}

.edit-mode .app-icon {

    animation:
        move .15s infinite;

}

@media (max-width: 450px) {

    body {

        background: black;

    }

    #phone {

        width: 100vw;
        height: 100vh;

        border-radius: 0;

    }

}
.compass {

    background:
        linear-gradient(
            135deg,
            #444,
            #111
        );

}

.compass::before {

    content: "🧭";

}