/* =========================================================
   SMALL WINDOW
   ========================================================= */

@media (max-width: 600px) {

    body {
        place-items: stretch;
    }


    .kritr-window {
        width: 100vw;
        height: 100vh;

        min-width: 0;
        min-height: 0;

        border: 0;
        outline: 0;

        box-shadow: none;
    }


    .hero-grid {
        grid-template-columns:
            110px
            minmax(0,1fr);

        min-height: 195px;
    }


    .album-art {
        min-height: 180px;
    }


    .visualizer-container {
        min-height: 195px;
    }


    .album-glyph {
        font-size: 46px;
    }


    .pet-display {
        width: 112px;

        min-height: 69px;
    }


    .pet-sprite {
        font-size: 16px;
    }

}


/* =========================================================
   VERY NARROW
   ========================================================= */

@media (max-width: 450px) {

    .cover-shell {
        display: none;
    }


    .hero-grid {
        grid-template-columns: 1fr;

        min-height: 205px;
    }


    .visualizer-container {
        min-height: 205px;
    }


    .secondary-controls {
        grid-template-columns: 1fr;
    }


    .speed-control {
        justify-content: space-between;
    }


    .music-actions {
        flex-direction: column;
    }


    #drop-hint {
        text-align: center;
    }


    .status-center {
        display: none;
    }


    .statusbar {
        grid-template-columns:
            1fr
            1fr;
    }


    .setting-box {
        grid-template-columns: 1fr;

        gap: 5px;
    }

}


/* =========================================================
   SHORT WINDOW
   ========================================================= */

@media (max-height: 610px) {

    .kritr-window {
        height:
            calc(100vh - 10px);

        min-height: 0;
    }


    .hero-grid {
        min-height: 170px;
    }


    .visualizer-container {
        min-height: 170px;
    }


    .album-art {
        min-height: 155px;
    }


    .track-card {
        min-height: 49px;
    }


    .pet-display {
        transform:
            scale(.9);

        transform-origin:
            right bottom;
    }

}