/* ==================================================
   CHIBI NETWORK
   GLOBAL MOBILE FIX

   desktop stays untouched
   ================================================== */


/* ==================================================
   BASIC SAFETY
   ================================================== */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


* {
    box-sizing: border-box;
}


img,
video,
iframe,
canvas {
    max-width: 100%;
}


/* ==================================================
   TABLET + PHONE
   ================================================== */

@media (max-width: 850px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    body {
        min-width: 0 !important;
    }


    /* ----------------------------------------------
       MAIN WINDOWS
       ---------------------------------------------- */

    .window,
    .rabbit-window,
    .guestbook-window,
    .diary-window,
    .public-diary-window,
    .user-room,
    .charm-window,
    .music-window,
    .network-window,
    .private-messages-window,
    .messages-window {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* ----------------------------------------------
       PAGE WRAPPERS
       ---------------------------------------------- */

    .diary-page,
    .public-diary-page,
    .user-room-page,
    .guestbook-page,
    .music-page,
    .charm-page {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    /* ----------------------------------------------
       CONTENT PADDING
       ---------------------------------------------- */

    .window-content,
    .diary-content,
    .public-diary-content,
    .guestbook-content,
    .room-content,
    .charm-content {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }


    /* ----------------------------------------------
       GRIDS BECOME ONE COLUMN
       ---------------------------------------------- */

    .room-grid,
    .room-currently-grid,
    .room-door-links,
    .profile-grid,
    .network-grid,
    .music-grid,
    .music-top-grid,
    .charm-grid,
    .pet-grid {
        grid-template-columns: 1fr !important;
    }


    /* ----------------------------------------------
       FLEX ROWS WRAP
       ---------------------------------------------- */

    .room-navigation,
    .room-panel-heading-row,
    .room-status-line,
    .admin-links,
    .track-bottom,
    .mp3-controls,
    .diary-directory {
        flex-wrap: wrap !important;
    }


    /* ----------------------------------------------
       NAVIGATION
       ---------------------------------------------- */

    nav,
    .menu,
    .room-navigation,
    .room-door-links {
        max-width: 100% !important;
    }


    nav a,
    .menu a,
    .room-navigation a,
    .room-door-links a {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }


    /* ----------------------------------------------
       TEXT OVERFLOW
       ---------------------------------------------- */

    p,
    span,
    a,
    div,
    button,
    label,
    input,
    textarea {
        overflow-wrap: anywhere;
    }


    /* ----------------------------------------------
       FORMS
       ---------------------------------------------- */

    input,
    textarea,
    select,
    button {
        max-width: 100%;
    }


    input,
    textarea,
    select {
        font-size: 16px !important;
    }


    textarea {
        width: 100% !important;
    }


    /* ----------------------------------------------
       GIFS / PHOTOS / POSTS
       ---------------------------------------------- */

    .room-post-media,
    .room-note-media,
    .public-note-gif-image,
    .public-note-gif-preview,
    .room-owner-media-preview,
    .room-status-gif,
    .diary-photo,
    .diary-video {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }


    /* ----------------------------------------------
       PROFILE MUSIC
       ---------------------------------------------- */

    .room-profile-song-panel {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 10px !important;
    }


    /* ----------------------------------------------
       PROFILE HERO
       ---------------------------------------------- */

    .room-hero {
        min-height: 0 !important;

        padding-right: 0 !important;
        padding-left: 0 !important;
    }


    /* ----------------------------------------------
       PROFILE COLUMNS
       ---------------------------------------------- */

    .room-main-column,
    .room-side-column {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ----------------------------------------------
       MOD BUTTONS
       ---------------------------------------------- */

    .room-profile-mod-controls {
        justify-content: stretch !important;
    }


    .room-profile-mod-delete,
    .room-account-ban-toggle {
        min-height: 38px;
    }


    /* ----------------------------------------------
       DECORATOR / CUSTOM ELEMENTS

       prevents decorations from creating
       horizontal scrolling
       ---------------------------------------------- */

    .room-decoration-stage,
    .profile-decoration-stage,
    .decorator-stage {
        max-width: 100% !important;
        overflow: hidden !important;
    }


    /* ----------------------------------------------
       BACKGROUND IMAGES
       ---------------------------------------------- */

    body,
    .dream-scene,
    .room-background-effects {
        background-position: center center;
    }

}


/* ==================================================
   PHONE
   ================================================== */

@media (max-width: 650px) {

    body {
        font-size: 14px;
    }


    /* ----------------------------------------------
       HEADINGS
       ---------------------------------------------- */

    h1 {
        max-width: 100%;

        font-size: clamp(
            26px,
            9vw,
            36px
        ) !important;

        line-height: 1.05;
    }


    h2 {
        font-size: clamp(
            20px,
            7vw,
            28px
        );
    }


    /* ----------------------------------------------
       TOP BARS
       ---------------------------------------------- */

    .window-bar,
    .diary-bar,
    .public-diary-bar,
    .room-topbar,
    .guestbook-bar {
        gap: 6px !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        font-size: 10px !important;
    }


    /* hide secondary desktop title text */

    .public-diary-bar span:last-child,
    .room-topbar span:last-child {
        display: none;
    }


    /* ----------------------------------------------
       PANELS
       ---------------------------------------------- */

    .room-panel,
    .diary-post,
    .guestbook-entry,
    .guestbook-write,
    .diary-post-form {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ----------------------------------------------
       BUTTONS / LINKS
       easier to tap
       ---------------------------------------------- */

    button,
    .room-navigation a,
    .room-door-links a,
    .menu a,
    .diary-return {
        min-height: 36px;
    }


    /* ----------------------------------------------
       NAV STACK
       ---------------------------------------------- */

    .room-navigation {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 5px !important;
    }


    .room-navigation a {
        display: block !important;

        width: 100%;

        text-align: center;
    }


    /* ----------------------------------------------
       PROFILE DOORS
       ---------------------------------------------- */

    .room-door-links {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 6px !important;
    }


    .room-door-links a {
        width: 100%;

        text-align: center;
    }


    /* ----------------------------------------------
       CURRENTLY CARDS
       ---------------------------------------------- */

    .room-currently-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 7px !important;
    }


    /* ----------------------------------------------
       DIARY
       ---------------------------------------------- */

    .public-diary-page {
        padding-top: 20px !important;
    }


    .public-diary-content {
        padding:
            20px
            14px
            28px !important;
    }


    .diary-heading h1 {
        font-size: clamp(
            27px,
            9vw,
            34px
        ) !important;

        letter-spacing: 2px !important;
    }


    .public-diary-page
    .post-body {
        padding:
            17px
            14px !important;
    }


    /* keep your dream background useful on phone */

    .dream-scene {
        background-size: cover !important;
        background-position: center center !important;
    }


    /* ----------------------------------------------
       GUESTBOOK
       ---------------------------------------------- */

    .guestbook-welcome,
    .guestbook-write,
    .guestbook-entry,
    .private-note {
        width: 100% !important;
        max-width: 100% !important;
    }


    /* ----------------------------------------------
       CHARM BOOK
       ---------------------------------------------- */

    .charm-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    /* ----------------------------------------------
       IMAGES
       ---------------------------------------------- */

    img,
    video {
        max-width: 100% !important;
    }

}


/* ==================================================
   TINY PHONES
   ================================================== */

@media (max-width: 420px) {

    .window,
    .rabbit-window,
    .guestbook-window,
    .diary-window,
    .public-diary-window,
    .user-room,
    .charm-window {
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
    }


    .window-content,
    .diary-content,
    .public-diary-content,
    .guestbook-content,
    .room-content,
    .charm-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .charm-grid {
        grid-template-columns: 1fr !important;
    }

}