* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;
}


body {
    min-height:
        100vh;

    margin:
        0;

    font-family:
        "Courier New",
        monospace;

    background:
        var(--room-page);

    color:
        var(--room-text);

    transition:
        background 180ms ease,
        color 180ms ease;
}


a {
    color:
        var(--room-link);

    text-decoration:
        none;
}


a:hover {
    color:
        var(--room-accent);

    text-decoration:
        underline;
}


button,
input,
textarea {
    font-family:
        inherit;
}


.hidden {
    display:
        none !important;
}



/* ==================================================
   THEMES
   ================================================== */

body.theme-wonderland {

    --room-page:
        #09090c;

    --room-window:
        #151318;

    --room-panel:
        #1e1a1f;

    --room-panel-two:
        #271b20;

    --room-bar:
        #7a1f3a;

    --room-text:
        #eee6dc;

    --room-muted:
        #a69b9f;

    --room-accent:
        #d86887;

    --room-link:
        #e8abbc;

    --room-border:
        #e9e0d6;

    --room-shadow:
        #711b35;

    --room-grid:
        rgba(255,255,255,0.035);
}



body.theme-sakura {

    --room-page:
        #f1bdcb;

    --room-window:
        #fff0ec;

    --room-panel:
        #fae1e3;

    --room-panel-two:
        #f7ccd5;

    --room-bar:
        #d893a8;

    --room-text:
        #53333f;

    --room-muted:
        #87616f;

    --room-accent:
        #a44363;

    --room-link:
        #8e405b;

    --room-border:
        #784c5b;

    --room-shadow:
        #c6768f;

    --room-grid:
        rgba(120,76,91,0.06);
}



body.theme-wired {

    --room-page:
        #03080c;

    --room-window:
        #07131b;

    --room-panel:
        #0c1b25;

    --room-panel-two:
        #102633;

    --room-bar:
        #183444;

    --room-text:
        #add7ef;

    --room-muted:
        #739bb0;

    --room-accent:
        #d3f0ff;

    --room-link:
        #8ac9eb;

    --room-border:
        #6096b2;

    --room-shadow:
        #000000;

    --room-grid:
        rgba(135,202,237,0.055);
}



body.theme-dollhouse {

    --room-page:
        #c3d8e3;

    --room-window:
        #ede6dc;

    --room-panel:
        #e6d6d4;

    --room-panel-two:
        #d9c0c7;

    --room-bar:
        #bd91a0;

    --room-text:
        #46383f;

    --room-muted:
        #806d75;

    --room-accent:
        #8d5267;

    --room-link:
        #704a5a;

    --room-border:
        #62565c;

    --room-shadow:
        #7798a8;

    --room-grid:
        rgba(74,61,67,0.05);
}



body.theme-save-room {

    --room-page:
        #080d09;

    --room-window:
        #111913;

    --room-panel:
        #1b291f;

    --room-panel-two:
        #26372b;

    --room-bar:
        #405a47;

    --room-text:
        #ded8c4;

    --room-muted:
        #9a9b88;

    --room-accent:
        #b8cba8;

    --room-link:
        #b5c49f;

    --room-border:
        #829277;

    --room-shadow:
        #020402;

    --room-grid:
        rgba(190,210,180,0.035);
}



body.theme-y2k {

    --room-page:
        #9cbad0;

    --room-window:
        #e8edf2;

    --room-panel:
        #f6f7f8;

    --room-panel-two:
        #cbdbe7;

    --room-bar:
        #7fa9ca;

    --room-text:
        #172632;

    --room-muted:
        #5e7383;

    --room-accent:
        #275f8c;

    --room-link:
        #194f7a;

    --room-border:
        #536d81;

    --room-shadow:
        #627f94;

    --room-grid:
        rgba(20,60,90,0.06);
}



body.theme-bee-puppycat {

    --room-page:
        #b7cae5;

    --room-window:
        #fff0d7;

    --room-panel:
        #f8dbe8;

    --room-panel-two:
        #f3c9da;

    --room-bar:
        #b49cda;

    --room-text:
        #53485d;

    --room-muted:
        #7d6c83;

    --room-accent:
        #8063a0;

    --room-link:
        #a4517e;

    --room-border:
        #88749a;

    --room-shadow:
        #d69ab4;

    --room-grid:
        rgba(104,80,130,0.055);
}



body.theme-wisteria {

    --room-page:
        #b7a7cb;

    --room-window:
        #eee5f2;

    --room-panel:
        #f7eff6;

    --room-panel-two:
        #e6d4ed;

    --room-bar:
        #80669b;

    --room-text:
        #504457;

    --room-muted:
        #776a79;

    --room-accent:
        #72518f;

    --room-link:
        #66507d;

    --room-border:
        #6f6078;

    --room-shadow:
        #8e77a2;

    --room-grid:
        rgba(75,91,71,0.055);
}



/* ==================================================
   BACKGROUND
   ================================================== */

body {
    background-image:

        linear-gradient(
            var(--room-grid)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--room-grid)
            1px,
            transparent 1px
        );

    background-size:
        24px 24px;
}


body.theme-wired::after {
    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    pointer-events:
        none;

    opacity:
        0.16;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(180,225,255,0.12) 4px
        );
}


body.theme-y2k {
    background-image:
        radial-gradient(
            rgba(255,255,255,0.6)
            1px,
            transparent 1px
        );

    background-size:
        7px 7px;
}



body.theme-bee-puppycat {
    background-image:

        radial-gradient(
            circle at 18% 16%,
            rgba(255,241,195,0.72) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 75% 22%,
            rgba(255,218,235,0.72) 0 3px,
            transparent 4px
        ),

        linear-gradient(
            135deg,
            rgba(255,255,255,0.12),
            transparent 45%
        );

    background-size:
        38px 38px,
        52px 52px,
        auto;
}


body.theme-wisteria {
    background-image:

        linear-gradient(
            rgba(95,111,86,0.07)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(95,111,86,0.07)
            1px,
            transparent 1px
        ),

        radial-gradient(
            circle at 20% 10%,
            rgba(238,221,255,0.36),
            transparent 28%
        );

    background-size:
        22px 22px,
        22px 22px,
        auto;
}



/* ==================================================
   BACKGROUND DECORATIONS
   ================================================== */

.room-background-effects {
    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    overflow:
        hidden;
}


.room-decoration {
    position:
        absolute;

    color:
        var(--room-accent);

    opacity:
        0.35;

    font-size:
        34px;
}


.decoration-one {
    top:
        8%;

    left:
        4%;

    transform:
        rotate(-15deg);
}


.decoration-two {
    top:
        70%;

    left:
        8%;

    font-size:
        48px;

    transform:
        rotate(12deg);
}


.decoration-three {
    top:
        15%;

    right:
        7%;

    font-size:
        42px;

    transform:
        rotate(18deg);
}


.decoration-four {
    right:
        5%;

    bottom:
        8%;

    transform:
        rotate(-15deg);
}



/* ==================================================
   PAGE
   ================================================== */

.user-room-page {
    position:
        relative;

    z-index:
        1;

    width:
        100%;

    min-height:
        100vh;

    display:
        flex;

    justify-content:
        center;

    align-items:
        flex-start;

    padding:
        50px 20px 80px;
}


.user-room {
    position:
        relative;

    width:
        min(980px, 96vw);

    overflow:
        hidden;

    background:
        var(--room-window);

    border:
        2px solid
        var(--room-border);

    box-shadow:
        10px 10px 0
        var(--room-shadow);
}



/* ==================================================
   TOP BAR
   ================================================== */

.room-topbar {
    min-height:
        34px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        7px 10px;

    background:
        var(--room-bar);

    color:
        var(--room-text);

    border-bottom:
        2px solid
        var(--room-border);

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}



/* ==================================================
   CHECKERS
   ================================================== */

.room-checkers {
    height:
        12px;

    border-bottom:
        1px solid
        var(--room-border);

    background:
        conic-gradient(
            from 90deg,
            var(--room-border) 25%,
            var(--room-window) 0 50%,
            var(--room-border) 0 75%,
            var(--room-window) 0
        );

    background-size:
        16px 16px;
}


.room-bottom-checkers {
    border-top:
        1px solid
        var(--room-border);

    border-bottom:
        0;
}



/* ==================================================
   NAVIGATION
   ================================================== */

.room-navigation {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    padding:
        10px 14px;

    background:
        var(--room-panel);

    border-bottom:
        1px solid
        var(--room-border);
}


.room-navigation a {
    display:
        inline-block;

    padding:
        6px 9px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);

    font-size:
        11px;

    font-weight:
        bold;
}



/* ==================================================
   MESSAGE
   ================================================== */

.room-message {
    min-height:
        300px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    padding:
        40px;

    color:
        var(--room-muted);

    text-align:
        center;

    letter-spacing:
        2px;
}



/* ==================================================
   CONTENT
   ================================================== */

.room-content {
    padding:
        22px;
}



/* ==================================================
   CUSTOM ROOM TITLE
   ================================================== */

.room-title-area {
    margin-bottom:
        22px;

    padding:
        17px 20px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);

    box-shadow:
        4px 4px 0
        var(--room-shadow);

    text-align:
        center;
}


.room-custom-title {
    margin:
        0;

    color:
        var(--room-accent);

    font-size:
        clamp(20px, 4vw, 34px);

    letter-spacing:
        3px;

    word-break:
        break-word;
}


.room-title-subtext {
    margin:
        8px 0 0;

    color:
        var(--room-muted);

    font-size:
        9px;

    letter-spacing:
        2px;
}



/* ==================================================
   HERO
   ================================================== */

.room-hero {
    display:
        grid;

    grid-template-columns:
        190px 1fr;

    gap:
        28px;

    align-items:
        center;

    padding:
        22px;

    background:
        var(--room-panel);

    border:
        2px solid
        var(--room-border);

    box-shadow:
        5px 5px 0
        var(--room-shadow);
}



/* ==================================================
   AVATAR
   ================================================== */

.room-avatar-column {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        9px;
}


.room-avatar-frame {
    width:
        160px;

    height:
        160px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--room-panel-two);

    border:
        3px solid
        var(--room-border);

    box-shadow:
        5px 5px 0
        var(--room-shadow);
}


.room-avatar {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.room-avatar-placeholder {
    color:
        var(--room-accent);

    font-size:
        60px;
}


.room-theme-label {
    width:
        160px;

    padding:
        5px;

    background:
        var(--room-panel-two);

    color:
        var(--room-accent);

    border:
        1px solid
        var(--room-border);

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}



/* ==================================================
   IDENTITY
   ================================================== */

.room-tiny-label {
    margin:
        0 0 6px;

    color:
        var(--room-muted);

    font-size:
        10px;

    letter-spacing:
        3px;
}


.room-display-name {
    margin:
        0;

    color:
        var(--room-accent);

    font-size:
        clamp(28px, 5vw, 46px);

    line-height:
        1;
}


.room-username {
    margin:
        7px 0 14px;

    color:
        var(--room-muted);

    font-size:
        13px;
}


.room-host-badge {
    display:
        inline-block;

    margin-bottom:
        13px;

    padding:
        5px 8px;

    color:
        var(--room-accent);

    border:
        1px solid
        var(--room-accent);

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.room-status-box {
    width:
        fit-content;

    max-width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        9px;

    padding:
        9px 11px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);
}


.room-status-line {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    max-width:
        100%;
}


.room-status-gif {
    display:
        block;

    width:
        auto;

    max-width:
        min(240px, 100%);

    max-height:
        150px;

    object-fit:
        contain;

    border:
        1px solid
        var(--room-border);

    box-shadow:
        3px 3px 0
        var(--room-shadow);
}


.room-status-label {
    color:
        var(--room-accent);

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}



/* ==================================================
   GRID
   ================================================== */

.room-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(220px, 0.8fr);

    gap:
        20px;

    margin-top:
        22px;
}


.room-main-column,
.room-sidebar {
    display:
        flex;

    flex-direction:
        column;

    gap:
        20px;
}



/* ==================================================
   PANELS
   ================================================== */

.room-panel {
    padding:
        14px;

    background:
        var(--room-panel);

    border:
        1px solid
        var(--room-border);

    box-shadow:
        4px 4px 0
        var(--room-shadow);
}


.room-panel-title {
    margin-bottom:
        13px;

    color:
        var(--room-accent);

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}


.room-panel-heading-row {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        13px;
}


.room-panel-heading-row
.room-panel-title {
    margin-bottom:
        0;
}


.room-small-link {
    font-size:
        9px;

    letter-spacing:
        1px;
}


.room-section-description {
    margin:
        -5px 0 13px;

    color:
        var(--room-muted);

    font-size:
        10px;

    line-height:
        1.4;
}



/* ==================================================
   ABOUT
   ================================================== */

.room-bio {
    min-height:
        90px;

    padding:
        12px;

    white-space:
        pre-wrap;

    word-break:
        break-word;

    background:
        var(--room-panel-two);

    border:
        1px dashed
        var(--room-border);

    font-size:
        13px;

    line-height:
        1.6;
}



/* ==================================================
   CURRENTLY
   ================================================== */

.room-currently-grid {
    display:
        grid;

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

    gap:
        9px;
}


.room-currently-card {
    min-height:
        90px;

    padding:
        10px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);
}


.room-currently-label {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--room-accent);

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.room-currently-value {
    margin:
        0;

    color:
        var(--room-text);

    font-size:
        12px;

    line-height:
        1.4;

    word-break:
        break-word;
}


.room-currently-empty {
    color:
        var(--room-muted);

    font-style:
        italic;
}



/* ==================================================
   OWNER ROOM NOTES
   ================================================== */

.room-notes {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.room-note-card {
    position:
        relative;

    padding:
        13px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);
}


.room-note-card::before {
    content:
        "♡";

    position:
        absolute;

    top:
        7px;

    right:
        9px;

    color:
        var(--room-accent);

    opacity:
        0.65;
}


.room-note-title {
    margin:
        0 35px 7px 0;

    color:
        var(--room-accent);

    font-size:
        13px;
}


.room-note-date {
    margin:
        0 0 9px;

    color:
        var(--room-muted);

    font-size:
        9px;

    letter-spacing:
        1px;
}


.room-note-text {
    margin:
        0;

    white-space:
        pre-wrap;

    word-break:
        break-word;

    font-size:
        12px;

    line-height:
        1.6;
}


.room-note-owner-controls {
    display:
        flex;

    gap:
        6px;

    margin-top:
        10px;

    padding-top:
        9px;

    border-top:
        1px dashed
        var(--room-border);
}


.room-note-owner-controls button {
    padding:
        5px 7px;

    background:
        var(--room-panel);

    color:
        var(--room-text);

    border:
        1px solid
        var(--room-border);

    cursor:
        pointer;

    font-size:
        9px;
}



/* ==================================================
   OWNER NOTE COMPOSER
   ================================================== */

.room-add-note-button {
    padding:
        7px 10px;

    background:
        var(--room-panel-two);

    color:
        var(--room-link);

    border:
        1px solid
        var(--room-border);

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.room-note-composer {
    margin-bottom:
        15px;

    padding:
        12px;

    background:
        var(--room-panel-two);

    border:
        1px dashed
        var(--room-accent);
}


.room-note-composer form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.room-note-composer label {
    color:
        var(--room-accent);

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.room-note-composer input,
.room-note-composer textarea {
    width:
        100%;

    padding:
        8px;

    background:
        var(--room-window);

    color:
        var(--room-text);

    border:
        1px solid
        var(--room-border);

    outline:
        none;
}


.room-note-composer textarea {
    min-height:
        110px;

    resize:
        vertical;
}


.room-note-composer button {
    width:
        fit-content;

    padding:
        8px 11px;

    background:
        var(--room-bar);

    color:
        var(--room-text);

    border:
        1px solid
        var(--room-border);

    cursor:
        pointer;

    font-weight:
        bold;
}



/* ==================================================
   PUBLIC NOTE INFO
   ================================================== */

.public-note-info {
    margin-bottom:
        14px;

    padding:
        10px;

    background:
        var(--room-panel-two);

    border:
        1px dashed
        var(--room-border);

    color:
        var(--room-muted);

    font-size:
        10px;

    line-height:
        1.5;
}


.public-note-info p {
    margin:
        3px 0;
}


.public-note-info a {
    display:
        inline-block;

    margin-top:
        6px;

    font-weight:
        bold;
}



/* ==================================================
   PUBLIC NOTE COMPOSER
   ================================================== */

.public-note-composer {
    margin-bottom:
        15px;

    padding:
        12px;

    background:
        var(--room-panel-two);

    border:
        1px dashed
        var(--room-accent);
}


.public-note-composer form {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.public-note-composer label {
    color:
        var(--room-accent);

    font-size:
        9px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.public-note-composer textarea {
    width:
        100%;

    min-height:
        95px;

    padding:
        9px;

    resize:
        vertical;

    outline:
        none;

    background:
        var(--room-window);

    color:
        var(--room-text);

    border:
        1px solid
        var(--room-border);
}


.public-note-form-bottom {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;
}


.public-note-character-count {
    color:
        var(--room-muted);

    font-size:
        9px;
}


.public-note-composer button {
    padding:
        8px 11px;

    background:
        var(--room-bar);

    color:
        var(--room-text);

    border:
        1px solid
        var(--room-border);

    cursor:
        pointer;

    font-size:
        10px;

    font-weight:
        bold;
}


.room-form-status {
    min-height:
        14px;

    margin:
        3px 0 0;

    color:
        var(--room-accent);

    font-size:
        9px;
}



/* ==================================================
   PUBLIC NOTES LIST
   ================================================== */

.public-notes-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;
}


.public-note-card {
    padding:
        11px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);
}


.public-note-header {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding-bottom:
        9px;

    border-bottom:
        1px dashed
        var(--room-border);
}


.public-note-avatar {
    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        var(--room-window);

    color:
        var(--room-accent);

    border:
        1px solid
        var(--room-border);

    font-size:
        18px;
}


.public-note-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.public-note-identity {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        2px;
}


.public-note-name {
    color:
        var(--room-accent);

    font-size:
        12px;

    font-weight:
        bold;

    word-break:
        break-word;
}


.public-note-name:hover {
    text-decoration:
        underline;
}


.public-note-username {
    color:
        var(--room-muted);

    font-size:
        9px;
}


.public-note-date {
    color:
        var(--room-muted);

    font-size:
        8px;
}


.public-note-host-badge {
    margin:
        2px 0;

    padding:
        2px 4px;

    color:
        var(--room-accent);

    border:
        1px solid
        var(--room-accent);

    font-size:
        7px;

    letter-spacing:
        1px;
}


.public-note-text {
    margin:
        11px 0 0;

    white-space:
        pre-wrap;

    word-break:
        break-word;

    font-size:
        12px;

    line-height:
        1.55;
}


.public-note-controls {
    display:
        flex;

    gap:
        6px;

    margin-top:
        10px;

    padding-top:
        8px;

    border-top:
        1px dashed
        var(--room-border);
}


.public-note-controls button {
    padding:
        5px 7px;

    background:
        var(--room-panel);

    color:
        var(--room-text);

    border:
        1px solid
        var(--room-border);

    cursor:
        pointer;

    font-size:
        8px;
}


.public-note-controls button:hover {
    color:
        var(--room-accent);

    border-color:
        var(--room-accent);
}



/* ==================================================
   PERSONAL LINKS
   ================================================== */

.room-links-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.room-personal-link {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 10px;

    overflow:
        hidden;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        1px;
}


.room-personal-link::after {
    content:
        "↗";

    color:
        var(--room-muted);
}


.room-personal-link:hover {
    border-color:
        var(--room-accent);

    text-decoration:
        none;
}


.room-link-text {
    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.room-links-empty {
    margin:
        0;

    padding:
        12px;

    color:
        var(--room-muted);

    text-align:
        center;

    border:
        1px dashed
        var(--room-border);

    font-size:
        10px;
}



/* ==================================================
   ROOM INFO
   ================================================== */

.room-info-list {
    display:
        flex;

    flex-direction:
        column;
}


.room-info-row {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        9px 0;

    border-bottom:
        1px dashed
        var(--room-border);

    font-size:
        10px;
}


.room-info-row:last-child {
    border-bottom:
        0;
}


.room-info-row span {
    color:
        var(--room-muted);
}


.room-info-row strong {
    color:
        var(--room-accent);

    text-align:
        right;

    word-break:
        break-word;
}



/* ==================================================
   DOORS
   ================================================== */

.room-door-links {
    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}


.room-door-links a {
    display:
        block;

    padding:
        8px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);

    text-align:
        center;

    font-size:
        10px;

    font-weight:
        bold;
}



/* ==================================================
   NETWORK POSTS
   ================================================== */

.room-posts {
    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}


.room-post-card {
    padding:
        12px;

    background:
        var(--room-panel-two);

    border:
        1px solid
        var(--room-border);
}


.room-post-date {
    margin-bottom:
        8px;

    color:
        var(--room-muted);

    font-size:
        9px;

    letter-spacing:
        1px;
}


.room-post-text {
    margin:
        0;

    white-space:
        pre-wrap;

    word-break:
        break-word;

    font-size:
        12px;

    line-height:
        1.5;
}


.room-post-media {
    display:
        block;

    width:
        auto;

    max-width:
        100%;

    max-height:
        420px;

    margin-top:
        12px;

    object-fit:
        contain;

    border:
        1px solid
        var(--room-border);
}


.room-empty {
    margin:
        0;

    padding:
        18px;

    color:
        var(--room-muted);

    border:
        1px dashed
        var(--room-border);

    text-align:
        center;

    font-size:
        11px;
}



/* ==================================================
   THEME DETAILS
   ================================================== */

body.theme-sakura
.user-room::before {
    content:
        "♡  ✿  ♡  ✿  ♡  ✿  ♡";

    display:
        block;

    padding:
        6px;

    background:
        #f7cbd6;

    color:
        var(--room-accent);

    border-bottom:
        1px solid
        var(--room-border);

    text-align:
        center;

    letter-spacing:
        12px;
}


body.theme-sakura
.room-note-card::before {
    content:
        "✿";
}


body.theme-wired
.room-display-name,
body.theme-wired
.room-custom-title {
    text-shadow:
        2px 0
        rgba(111,210,255,0.35);
}


body.theme-wired
.room-note-card::before {
    content:
        "_";
}


body.theme-dollhouse
.room-avatar-frame {
    border-radius:
        50% 50% 8px 8px;
}


body.theme-dollhouse
.room-panel-title,
body.theme-dollhouse
.room-custom-title {
    font-family:
        Georgia,
        serif;

    font-style:
        italic;
}


body.theme-save-room
.room-note-card::before {
    content:
        "♠";
}


body.theme-y2k
.user-room {
    border:
        3px ridge
        #ffffff;
}


body.theme-y2k
.room-topbar {
    background:
        linear-gradient(
            180deg,
            #ddebfa,
            #6f9fc5
        );

    color:
        #152b3c;
}


body.theme-y2k
.room-panel,
body.theme-y2k
.room-avatar-frame,
body.theme-y2k
.room-navigation a,
body.theme-y2k
.room-currently-card,
body.theme-y2k
.room-note-card,
body.theme-y2k
.room-personal-link,
body.theme-y2k
.public-note-card {
    border:
        2px outset
        #dfe7ed;
}



/* ==================================================
   BEE AND PUPPYCAT DETAILS
   ================================================== */

body.theme-bee-puppycat
.room-background-effects::before {
    content:
        "✦   ☆   ·   ♡   ·   ☆   ✦";

    position:
        absolute;

    top:
        22px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        #fff1bd;

    font-size:
        20px;

    letter-spacing:
        10px;

    white-space:
        nowrap;

    opacity:
        0.72;

    text-shadow:
        2px 2px 0
        rgba(121,91,148,0.25);
}


body.theme-bee-puppycat
.room-topbar {
    background:
        linear-gradient(
            90deg,
            #b6a4de,
            #edb5ce,
            #efcd87
        );

    color:
        #4a3b5b;
}


body.theme-bee-puppycat
.room-checkers {
    background:
        repeating-linear-gradient(
            90deg,
            #f6c5d9 0 12px,
            #cab8e7 12px 24px,
            #f4d89e 24px 36px,
            #a9d5cf 36px 48px
        );

    background-size:
        auto;

    border-color:
        #8b739b;
}


body.theme-bee-puppycat
.room-avatar-frame {
    border-radius:
        18px;

    background:
        #fff6df;
}


body.theme-bee-puppycat
.room-panel,
body.theme-bee-puppycat
.room-title-area {
    border-radius:
        8px;
}


body.theme-bee-puppycat
.room-note-card::before {
    content:
        "☆";
}


body.theme-bee-puppycat
.room-decoration {
    color:
        #fff0ba;

    opacity:
        0.62;

    text-shadow:
        2px 2px 0
        rgba(126,88,150,0.22);
}



/* ==================================================
   WISTERIA DETAILS
   ================================================== */

body.theme-wisteria
.user-room::before,
body.theme-wisteria
.user-room::after {
    content:
        "";

    position:
        absolute;

    top:
        0;

    z-index:
        20;

    width:
        7px;

    height:
        7px;

    background:
        #6d835f;

    pointer-events:
        none;
}


body.theme-wisteria
.user-room::before {
    left:
        13px;

    box-shadow:
        7px 0 0 #637c58,
        14px 0 0 #637c58,
        21px 0 0 #637c58,
        28px 0 0 #637c58,
        35px 0 0 #637c58,
        7px 7px 0 #8d70ad,
        14px 7px 0 #b294d1,
        21px 7px 0 #9275b1,
        28px 7px 0 #c0a0df,
        14px 14px 0 #a887c7,
        21px 14px 0 #80609e,
        28px 14px 0 #ae8bd0,
        14px 21px 0 #8b6aaa,
        21px 21px 0 #b593d4,
        21px 28px 0 #7e5d9d,
        35px 7px 0 #667e59,
        42px 7px 0 #667e59,
        42px 14px 0 #9b7abb,
        49px 14px 0 #b494d0,
        42px 21px 0 #81609e,
        49px 21px 0 #a988c8,
        49px 28px 0 #775793;
}


body.theme-wisteria
.user-room::after {
    right:
        13px;

    box-shadow:
        -7px 0 0 #637c58,
        -14px 0 0 #637c58,
        -21px 0 0 #637c58,
        -28px 0 0 #637c58,
        -35px 0 0 #637c58,
        -7px 7px 0 #8d70ad,
        -14px 7px 0 #b294d1,
        -21px 7px 0 #9275b1,
        -28px 7px 0 #c0a0df,
        -14px 14px 0 #a887c7,
        -21px 14px 0 #80609e,
        -28px 14px 0 #ae8bd0,
        -14px 21px 0 #8b6aaa,
        -21px 21px 0 #b593d4,
        -21px 28px 0 #7e5d9d,
        -35px 7px 0 #667e59,
        -42px 7px 0 #667e59,
        -42px 14px 0 #9b7abb,
        -49px 14px 0 #b494d0,
        -42px 21px 0 #81609e,
        -49px 21px 0 #a988c8,
        -49px 28px 0 #775793;
}


body.theme-wisteria
.room-topbar {
    background:
        linear-gradient(
            90deg,
            #725b8b,
            #9679b1,
            #725f84
        );

    color:
        #fff7ff;
}


body.theme-wisteria
.room-checkers {
    background:
        repeating-linear-gradient(
            90deg,
            #775e91 0 12px,
            #d8c4e7 12px 24px,
            #6d815f 24px 36px,
            #eee3f4 36px 48px
        );

    background-size:
        auto;
}


body.theme-wisteria
.room-note-card::before {
    content:
        "✦";

    color:
        #8768a5;
}


body.theme-wisteria
.room-decoration {
    top:
        -24px;

    width:
        7px;

    height:
        5px;

    font-size:
        0;

    background:
        #c3a1e0;

    box-shadow:
        4px 3px 0
        #8868a6;

    opacity:
        0.82;

    animation:
        wisteriaRoomPetal
        linear
        infinite;
}


body.theme-wisteria
.decoration-one {
    left:
        8%;

    animation-duration:
        12s;

    animation-delay:
        -3s;
}


body.theme-wisteria
.decoration-two {
    left:
        31%;

    animation-duration:
        15s;

    animation-delay:
        -9s;
}


body.theme-wisteria
.decoration-three {
    left:
        67%;

    right:
        auto;

    animation-duration:
        11s;

    animation-delay:
        -6s;
}


body.theme-wisteria
.decoration-four {
    left:
        88%;

    right:
        auto;

    bottom:
        auto;

    animation-duration:
        16s;

    animation-delay:
        -12s;
}


@keyframes wisteriaRoomPetal {

    0% {
        transform:
            translate3d(
                0,
                -30px,
                0
            )
            rotate(0deg);
    }

    50% {
        transform:
            translate3d(
                26px,
                52vh,
                0
            )
            rotate(180deg);
    }

    100% {
        transform:
            translate3d(
                -20px,
                110vh,
                0
            )
            rotate(360deg);
    }

}



/* ==================================================
   MOBILE
   ================================================== */

@media (
    max-width: 760px
) {

    .user-room-page {
        padding:
            18px 10px 50px;
    }


    .room-content {
        padding:
            13px;
    }


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

        text-align:
            center;
    }


    .room-identity {
        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;
    }


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


    .room-currently-grid {
        grid-template-columns:
            1fr;
    }


    .room-topbar {
        font-size:
            9px;
    }

}


@media (
    max-width: 450px
) {

    .room-avatar-frame {
        width:
            135px;

        height:
            135px;
    }


    .room-theme-label {
        width:
            135px;
    }


    .room-navigation {
        flex-direction:
            column;
    }


    .room-navigation a {
        text-align:
            center;
    }


    .room-panel-heading-row {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .room-custom-title {
        font-size:
            20px;
    }


    .public-note-form-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

}