@font-face {
    font-family: 'Regular';
    src: url('../../font/bould-regular-webfont.woff') format('truetype');
}

@font-face {
    font-family: 'Bold';
    src: url('../../font/bould-bold-webfont.woff') format('truetype');
}

:root {
    --bg-color: oklch(0.2077 0.0398 265.75 / 1);
    --bg-panel: oklch(from var(--bg-color) calc(l + 0.1) c h / 1);

    --login-bg: lightgray;

    --login-text: #992929;
    --login-input-bg: oklch(from lightgray calc(l + 0.1) c h);
    --login-button-text: oklch(from var(--login-text) calc(l + 0.3) c h);
    
    --logout-color: #ef4444;
    --accent-hover: #0ea5e9;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: oklch(from var(--bg-color) calc(l + 0.2) c h / 1);
    --closing-flash: white;

    --ownerbadge: #f43f5e;
    --adminbadge: #0284c7;
    --vipbadge: #68f755;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Regular', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

html {
    font-size: clamp(14px, 2dvh, 16px)
}

body {
    background-color: oklch(from var(--color-primary-100) l c h / 0.5) !important;
    color: var(--color-secondary-800);
    transition: background-color 0.3s, color 0.3s;

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;

    /* A1 Gold (Dark Default) - Your exact current dark theme look */
    &.dark-gold {
        --color-primary-50: oklch(30% 0.122 264.05);
        --color-primary-100: oklch(29.03% 0.122 264.05);
        --color-primary-200: oklch(27.27% 0.122 264.05);
        --color-primary-300: oklch(25.01% 0.122 264.05);
        --color-primary-400: oklch(22.34% 0.122 264.05);
        --color-primary-500: oklch(19.32% 0.122 264.05);
        --color-primary-600: oklch(15.99% 0.111 264.05);
        --color-primary-700: oklch(12.37% 0.086 264.05);
        --color-primary-800: oklch(8.49% 0.059 264.05);
        --color-primary-900: oklch(4.36% 0.030 264.05);
        --color-primary-950: oklch(0% 0.011 264.05);

        --color-secondary-50: oklch(80% 0.190 96.32);
        --color-secondary-100: oklch(80.32% 0.191 96.32);
        --color-secondary-200: oklch(80.91% 0.193 96.32);
        --color-secondary-300: oklch(81.66% 0.194 96.32);
        --color-secondary-400: oklch(82.55% 0.197 96.32);
        --color-secondary-500: oklch(83.56% 0.199 96.32);
        --color-secondary-600: oklch(84.67% 0.202 96.32);
        --color-secondary-700: oklch(85.88% 0.204 96.32);
        --color-secondary-800: oklch(87.17% 0.208 96.32);
        --color-secondary-900: oklch(88.55% 0.211 96.32);
        --color-secondary-950: oklch(90% 0.203 96.32);

        body {
            background-color: oklch(from var(--color-primary-100) l c h / 0.7) !important;
        }

        #chat-box {
            #chat-topic {
                background-color: var(--color-primary-800) !important;
            }
        }
    }

    /* Cyber Neon Theme - High-contrast neon purple and synthwave pink */
    &.cyberpunk {
        --color-primary-50: oklch(24.478% 0.1363 299);
        --color-primary-100: oklch(29.03% 0.14 299);
        --color-primary-200: oklch(27.27% 0.15 299);
        --color-primary-300: oklch(25.01% 0.16 299);
        --color-primary-400: oklch(22.34% 0.17 299);
        --color-primary-500: oklch(19.32% 0.18 299);
        --color-primary-600: oklch(15.99% 0.19 299);
        --color-primary-700: oklch(12.37% 0.2 299);
        --color-primary-800: oklch(8.49% 0.21 299);
        --color-primary-900: oklch(4.36% 0.22 299);
        --color-primary-950: oklch(0% 0.023 299);

        --color-secondary-50: oklch(88.45% 0.25051 141);
        --color-secondary-100: oklch(80.32% 0.238 141);
        --color-secondary-200: oklch(80.91% 0.226 141);
        --color-secondary-300: oklch(81.66% 0.214 141);
        --color-secondary-400: oklch(82.55% 0.202 141);
        --color-secondary-500: oklch(83.56% 0.19 141);
        --color-secondary-600: oklch(84.67% 0.178 141);
        --color-secondary-700: oklch(85.88% 0.166 141);
        --color-secondary-800: oklch(87.17% 0.154 141);
        --color-secondary-900: oklch(88.55% 0.142 141);
        --color-secondary-950: oklch(90% 0.13 141);

        #chat-box {
            background-image: url(../img/music.webp), linear-gradient(oklch(from var(--bg-panel) calc(l - 0.2) c h / 0.9), oklch(from var(--bg-panel) calc(l - 0.1) c h / 0.9));

            #chat-topic {
                background-color: var(--color-primary-800) !important;
            }
        }
    }

    /* Slate Black Theme - Stealth mode dark greys with cool blue highlights */
    &.classic-dark {
        --color-primary-50: oklch(0% 0.011 271.68);
        --color-primary-100: oklch(19.68% 0.011 271.68);
        --color-primary-200: oklch(23.41% 0.011 271.68);
        --color-primary-300: oklch(25.9% 0.011 271.68);
        --color-primary-400: oklch(27.83% 0.011 271.68);
        --color-primary-500: oklch(29.43% 0.011 271.68);
        --color-primary-600: oklch(30.8% 0.011 271.68);
        --color-primary-700: oklch(32.01% 0.011 271.68);
        --color-primary-800: oklch(33.1% 0.011 271.68);
        --color-primary-900: oklch(34.09% 0.011 271.68);
        --color-primary-950: oklch(35% 0.011 271.68);

        --color-secondary-50: oklch(45% 0.120 231.67);
        --color-secondary-100: oklch(70.3% 0.143 231.67);
        --color-secondary-200: oklch(75.09% 0.135 231.67);
        --color-secondary-300: oklch(78.3% 0.128 231.67);
        --color-secondary-400: oklch(80.79% 0.121 231.67);
        --color-secondary-500: oklch(82.84% 0.114 231.67);
        --color-secondary-600: oklch(84.6% 0.102 231.67);
        --color-secondary-700: oklch(86.16% 0.091 231.67);
        --color-secondary-800: oklch(87.56% 0.081 231.67);
        --color-secondary-900: oklch(88.83% 0.073 231.67);
        --color-secondary-950: oklch(90% 0.065 231.67);
    }

    /* Studio Light Theme - Clean daytime bright appearance profile */
    &.radio-light {
        --mode: light;
        /* Primary */
        --color-primary-50: oklch(90% 0.077 53.81);
        --color-primary-100: oklch(89.3% 0.083 53.81);
        --color-primary-200: oklch(87.2% 0.087 53.81);
        --color-primary-300: oklch(83.7% 0.087 53.81);
        --color-primary-400: oklch(78.8% 0.087 53.81);
        --color-primary-500: oklch(72.5% 0.087 53.81);
        --color-primary-600: oklch(64.8% 0.087 53.81);
        --color-primary-700: oklch(55.7% 0.087 53.81);
        --color-primary-800: oklch(45.2% 0.087 53.81);
        --color-primary-900: oklch(33.3% 0.087 53.81);
        --color-primary-950: oklch(20% 0.057 53.81);

        --color-secondary-50: oklch(90% 0.077 53.81);
        --color-secondary-100: oklch(89.3% 0.083 53.81);
        --color-secondary-200: oklch(87.2% 0.087 53.81);
        --color-secondary-300: oklch(83.7% 0.087 53.81);
        --color-secondary-400: oklch(78.8% 0.087 53.81);
        --color-secondary-500: oklch(72.5% 0.087 53.81);
        --color-secondary-600: oklch(64.8% 0.087 53.81);
        --color-secondary-700: oklch(55.7% 0.087 53.81);
        --color-secondary-800: oklch(45.2% 0.087 53.81);
        --color-secondary-900: oklch(33.3% 0.087 53.81);
        --color-secondary-950: oklch(20% 0.057 53.81);

        background-color: oklch(from var(--foundation) 0.9 0.05 h / 0.8) !important;

        .poll-interaction-node {
            & > div {
                input {
                    background-color: oklch(from var(--border-color) calc(l - 0.3) calc(c - 0.15) h);
                }
            }
        }
    }

    &.crimson {
        /* Primary */
        --color-primary-50: oklch(94% 0.0065 25.22);
        --color-primary-100: oklch(89.3% 0.073 25.22);
        --color-primary-200: oklch(87.2% 0.088 25.22);
        --color-primary-300: oklch(83.7% 0.116 25.22);
        --color-primary-400: oklch(78.8% 0.126 25.22);
        --color-primary-500: oklch(72.5% 0.126 25.22);
        --color-primary-600: oklch(64.8% 0.126 25.22);
        --color-primary-700: oklch(55.7% 0.126 25.22);
        --color-primary-800: oklch(45.189% 0.12673 24.795);
        --color-primary-900: oklch(33.271% 0.1254 25.122);
        --color-primary-950: oklch(20% 0.091 25.22);

        --color-secondary-50: oklch(94% 0.0065 25.22);
        --color-secondary-100: oklch(89.3% 0.073 25.22);
        --color-secondary-200: oklch(87.2% 0.088 25.22);
        --color-secondary-300: oklch(83.7% 0.116 25.22);
        --color-secondary-400: oklch(78.8% 0.126 25.22);
        --color-secondary-500: oklch(72.5% 0.126 25.22);
        --color-secondary-600: oklch(64.8% 0.126 25.22);
        --color-secondary-700: oklch(55.7% 0.126 25.22);
        --color-secondary-800: oklch(45.189% 0.12673 24.795);
        --color-secondary-900: oklch(33.271% 0.1254 25.122);
        --color-secondary-950: oklch(20% 0.091 25.22);

        background-color: oklch(from var(--color-primary-50) l c h / 0.6) !important;
    }

    &.grinchmas {
        --bg-main: oklch(90.208% 0.05 155);
        --bg-panel: oklch(from var(--bg-main) calc(l - 0.06) c h);
        --bg-card: #1c0c0c;          /* Solid structural card modules container tint */
        --bg-input: #070202;         /* Pitch input typing boxes */
        --border-color: red;     /* Muted crimson line grids and separators */
        --text-main: black;        /* Pure white for high-contrast reading text */
        --text-muted: oklch(35% 0.14815 25.207);       /* Soft pink-grey desaturated text for timestamps */
        --special-highlight: oklch(from var(--accent-color) calc(l - 0.2) calc(c + 0.04) h);
        --accent-color: oklch(66.066% 0.22581 25.939);     /* 📻 OFFICIAL BRANDING KEY COLOR TONE */
        --accent-hover: oklch(from var(--accent-color) calc(l + 0.1) calc(c + 0.1) h);     /* Bright crimson flare highlight for hover buttons */

        #chat-box {
            background: url(../img/snow.jpg) center center / cover, linear-gradient(oklch(from var(--bg-panel) calc(l - -0.1) c h / 1), oklch(from var(--bg-panel) calc(l + 0.1) c h / 1));
            border: 3px ridge red;
        }

        #user-list-sidebar {
            background: url(../img/tree.jpg) right center / cover, linear-gradient(oklch(from var(--bg-panel) calc(l + 0.2) c h / 1), oklch(from var(--bg-panel) calc(l + 0) c h / 1));
            border: 1px solid red;
        }
    }

    &.killed {
        * {
        animation: killed 1s ease-in-out 5;
        }
        
        .barker-ticker-window, .barker-ticker-window * {
            animation: none;
        }

        .chat-main-area #kill-shout {
            display: block;
            animation: spin-pulse-reverse 5s ease-in-out forwards;
            /* Ensures it stays invisible at the start and end */
            opacity: 0; 
            transform: scale(0) rotate(-80deg);
        }
    }

    &.music-vault-hit {
        #music-vault-result {
            display: block;
            animation: vault-hit 4s ease-in-out forwards;
        }

        .face.tie {
            display: none;
        }

        .flipper {
            animation: vault-hit-pulse 4s ease-in-out forwards;
        }
    }

    &.music-vault-miss {
        #music-vault-result {
            display: block;
            animation: vault-miss 4s ease-in-out forwards;
        }
        
        .face.tie {
            display: none;
        }

        .flipper {
            animation: vault-miss-dip 4s ease-in-out forwards;
        }
    }

    &.music-vault-tie {
        #music-vault-result {
            display: block;
            animation: vault-tie 4s ease-in-out forwards;
        }

        .face.tie {
            display: block;
            animation: vault-tie-reveal 4s ease-in-out forwards;
        }

        .flipper {
            animation: vault-tie-wobble 2.5s ease-in-out forwards;

            .face {
                &:not(.tie) span {
                    display: none;
                }

                i {
                    filter: drop-shadow(2px 4px 6px gray);
                    color: gray;
                    -webkit-text-stroke: 4px white;
                    background: linear-gradient(to bottom, #888 0%, #555 30%, #080808 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }
}

@keyframes killed {
    0%, 100% {
        filter: none;
    }

    35% {
        filter: sepia(1) hue-rotate(-18deg) saturate(1.1) brightness(1.1); /* Red-tinted crimson look */
    }

    60% {
        filter: sepia(0.5) hue-rotate(-18deg) saturate(1); /* Red-tinted crimson look */
    }
}

/* =========================================================================
   GENERIC APP WIDGET MAPPING (Update your main CSS rules to use these variables!)
   ========================================================================= */

#login-panel, #register-panel {
    background-color: var(--login-bg);
    color: var(--login-text);

    p {
        font-size: 1.25rem;

        &.counter {
            border-inline: 2px solid var(--login-text);

            display: flex;
            gap: 0.5rem;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-block: 1rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            text-align: center;

            span {
                font-size: 2.5em;
                font-family: 'Bold';
                font-variant-numeric: tabular-nums;
                flex-grow: 1;
            }

            #chatmembers {
                text-align: right;
            }

            #chattext, #viptext {
                font-size: 1.1rem;
                font-family: 'Regular';
            }

            #chattext {
                text-align: left;
            }

            #viptext {
                text-align: right;
                padding-inline-start: 0.5rem;
                border-inline-start: 1px solid var(--login-text);

                span {
                    display: block;
                    font-size: 1.1em;
                    padding: 0;
                }

                &:has(span:empty) {
                    display: none;

                    + img {
                        display: none;
                    }
                }
            }

            #vip-image {
                height: 3rem;
                aspect-ratio: 1;
            }
        }
    }

    form {
        label {
            font-size: 1.25rem;
            color: var(--login-text);
        }

        input {
            font-size: 1.25rem;
            background-color: var(--login-input-bg);
        }

        button {
            background-color: var(--login-text);
            color: var(--login-button-text);
        }
    }

    .switch-prompt {
        text-align: center;
        margin-top: 15px;

        a {
            font-family: 'Bold';
            color: var(--login-text);
            
            &:hover {
                color: oklch(from var(--color-primary-800) calc(l + 0.2) c h);
                text-decoration: underline;
            }
        }
    }
}

.chat-system-module, .online-user-item {
    border-color: var(--color-primary-900) !important;
}

button:not(.secondary-btn):not(.option) {
    font-family: 'Bold';
}
button:not(.secondary-btn):not(.option):not(.profile-tab-btn):hover {
    background-color: var(--color-primary-400) !important;
    color: var(--color-secondary-800) !important;
}
button[class^="poll"] {
    padding: 0.3rem;
}

.form-header {
    display: flex;
    flex-flow: row wrap;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;

    img {
        height: 5rem;
    }

    h2 {
        font-size: 2rem;
        font-family: 'Bold';
        text-decoration: underline;
    }
}

/* Container & Cards */
.card {
    width: 26rem;
    max-width: 90dvw;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0.625rem 1.5rem rgba(0,0,0,0.3);
}

.hidden { display: none !important; }

/* Typography & Form Elements */
h2 { margin-left: 0; margin-bottom: 1.25rem; font-family: 'Bold'; text-align: center; }

h3 {
    width: 17.5ch;
    
    span {
        display: block
    }
}

#display-username {
     cursor: pointer;
     text-decoration: underline;

    &::before {
        content: '(';
    }

    &::after {
        content: ')';
    }
}

.form-group { margin-bottom: 0.25rem; 
    &.soc, &.sho {
        display: flex;
        flex-flow: row;
        align-items: center;
    }
}

.form-group.soc label {
    font-size: 1.5em;
}

form.reglog {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.25rem;

    button {
        margin-top: 1rem;
    }
}

label { display: block; margin-bottom: 0; font-size: 0.9rem; color: var(--color-secondary-800); }

input, select, textarea {
    width: calc(100% - 0.5rem);
    padding: 0.25rem;
    margin: 0.25rem;
    background-color: var(--color-primary-300);
    color: var(--color-secondary-900);
    border: 1px solid oklch(from var(--color-secondary-900) l c h / 0.5);
    border-radius: 0.4rem;
    font-size: 0.9rem;
    outline: none;
    transition: border 0.2s;
}

strong {
    font-family: 'Bold';
    font-weight: normal;
}

input[type="text"],[type="password"] {
    padding: 0.25rem;
}

textarea { field-sizing: content; }
input:focus { border-color: var(--color-primary-600); }

button {
    width: 100%;
    padding: .75rem;
    background-color: var(--color-primary-800);
    color: var(--color-secondary-200);
    border: none;
    border-radius: 0.5rem;
    /* corner-shape: squircle; */
    font-size: 1rem;
    font-family: 'Bold';
    cursor: pointer;
    transition: background 0.2s;

    &.set {
        width: 4.5ch;
    }

    &.logoutt, &.sett {
        display: none;
    }

    &.logout {
        width: 10ch;
        background-color: var(--logout-color);
        color: white;
    }

    &.poll-hit {
        background-color: green !important;
        color: contrast-color(green);
    }

    &.poll-miss {
        background-color: goldenrod !important;
        color: contrast-color(goldenrod);
    }

    &.poll-kill {
        background-color: maroon !important;
        color: contrast-color(maroon);
    }
}
button:hover { background-color: var(--color-primary-600); }

.chat-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 0 0 0.75rem;
    margin-bottom: 0.5rem;
    gap: 1rem;
    height: 4lh;

    img {
        height: 100%;
    }

    > div {
        width: -webkit-fill-available;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
        height: 100%;
        align-items: center;
        overflow: hidden;
        background-color: oklch(from var(--color-primary-300) l c h / 0.5);
        border-radius: 1rem 0 0 1rem;
        /* corner-shape: squircle; */

        div.barker {
            flex: 1;
        }
    }
}

/* Chatroom Layout */
#chat-container {
    width: 100dvw;
    height: 100dvh;
    display: flex;
    flex-direction: column;

    #pm-tabs-navigation-hub {
    display: flex;
    gap: 4px;
    padding: 0 10px;
    overflow-x: auto;
    min-height: 30px;
    scrollbar-width: none;
    border-bottom: 2px solid var(--color-primary-900);

    /* Tab Navigation Visual Anchor Elements */

    /* Close button styling inside tabs */
    .tab-close-icon {
        font-size: 10px;
        color: var(--text-muted);
        padding: 2px 4px;
        border-radius: 50%;
        transition: all 0.15s ease;

        &:hover {
            background-color: rgba(255, 74, 74, 0.2);
            color: #ff4a4a;
        }
    }

    /* Hide inactive chat logs seamlessly */
    .hidden-message-track {
        display: none !important;
    }

    .chat-portal-tab {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border: 1px solid var(--borde);
        border-radius: 4px 4px 0 0;
        font-size: 0.75rem;
        cursor: pointer;
        color: var(--foundation);
        white-space: nowrap;
        border-bottom: none !important;
    
        &:hover {
            opacity: 0.9;
        }

        &.tab-active-highlight {
            background-color: rgba(199,199,199,0.6);
            font-family: 'Bold';
            border-top: 2px solid var(--color-primary-950) !important;
        }

        &.new {
            animation: flashnewtab 1500ms ease-in-out infinite;
        }
    }

    #tab-room-public {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        background-color: var(--color-primary-300);
        border: 1px solid var(--color-primary-900);
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        font-size: 0.75rem;
        font-family: 'Bold';
        cursor: pointer;
        color: var(--accent-color);
        white-space: nowrap;
        transition: all 0.2s;
    }
}

    /* Close button styling inside tabs */
    .tab-close-icon {
        font-size: 10px;
        color: var(--color-primary-950);
        padding: 2px 4px;
        border-radius: 50%;
        transition: all 0.15s ease;
    }
    .tab-close-icon:hover {
        background-color: rgba(255, 74, 74, 0.2);
        color: #ff4a4a;
    }
}

.chat-main-area {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-height: 0; /* Prevents flex items from busting out of parent heights */
    margin: 0.5rem 0.75rem;

    #kill-shout {
        position: absolute;
        top: 50dvh;
        left: 50dvw;
        z-index: 40000;
        display: none;
        font-size: min(60dvw, 25dvh);
        font-family: 'Bold';
        text-shadow: 10px 10px 10px white;
        color: red;
        background-color: transparent !important;
        text-box-edge: trim-both cap alphabetic;
        transform: translate3D(-50%, -50%, 0);
        text-align: center;
        line-height: 0.8;
        -webkit-text-stroke: 2px white;

        span.who {
            font-size: 3rem;
            text-transform: uppercase;
            display: block;
            text-box: trim-both cap alphabetic;
            text-shadow: none;
            -webkit-text-stroke: 2px white;
            font-family: 'Bold';

            &::before, &::after {
                content: '☠️';
                padding-inline: 0.5ch;
            }
        }
    }

    #music-vault-result {
        display: none;
        position: fixed;
        left: 50%;
        top: 50%;
        width: 300px;
        height: 300px;

        transform: translate3D(-50%, -50%, 0);

        perspective: 1000px;

        z-index: 99999;
        pointer-events: none;
    }

    .face.tie {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3D(-50%, -50%, 0);
        font-family: 'Bold';
        font-size: 8rem;
        letter-spacing: 5px;
        text-align: center;
        background-color: white;
        color: black;
        border: 3px ridge black;

        padding: 1rem;
        border-radius: 1rem;
        line-height: 1;

        div.sm {
            font-size: 49%;
            display: block;
            justify-self: center;
            text-box: trim-both cap alphabetic;
        }
    }

    .flipper {
        width: 100%;
        height: 100%;
        position: relative;

        transform-style: preserve-3d;

        transition: transform 1s cubic-bezier(.2, .85, .25, 1);

        .hit {
            i {
            filter: drop-shadow(2px 4px 6px green);
            color: green;
            -webkit-text-stroke: 4px white;
            background: linear-gradient(to bottom, #0f0 0%, #0a0 30%, #040 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            }
        }

        .miss {
            transform: rotateX(180deg);

            i {
            filter: drop-shadow(2px -4px 6px red);
            color: red;
            -webkit-text-stroke: 4px white;
            background: linear-gradient(to bottom, #f00 0%, #a00 30%, #400 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            }
        }

        .face {
            position: absolute;
            inset: 0;

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

            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;

            i {
                font-size: 60dvh;
            }

            &.hit span {
                transform: translate3D(-30%, -30%, 0);
                font-size: 5rem;
                text-box: trim-both cap alphabetic;
            }

            &.miss span {
                transform: translate3D(-27%, -75%, 0);
                font-size: 4rem;
            }

            span {
                position: absolute;
                top: 50%;
                left: 50%;
                font-family: 'Bold';
                color: white;
                letter-spacing: 5px;

                div.sm {
                    font-size: 49%;
                    display: block;
                    justify-self: center;
                    text-box: trim-both cap alphabetic;
                }
            }
        }
    }
}

#chat-box {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    align-content: end;
    overflow: hidden;
    border: 3px ridge var(--color-primary-900);
    border-radius: 8px;
    padding: 0;
        background-image: url(../img/music.webp), linear-gradient(to bottom, oklch(from var(--color-primary-400) l c h / 0.8), oklch(from var(--color-primary-100) l c h / 0.8));
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    /* corner-shape: squircle; */

    #chat-topic {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        background-color: var(--color-secondary-50);
        border-radius: 2px 2px 0 0;
        color: var(--color-secondary-800);
        text-transform: uppercase;
        box-shadow: 0 0.5rem 10px var(--color-primary-950);
        
        &:before {
            padding: 0.25rem 0.5rem;
            margin-inline-end: 0.5rem;
            border-radius: 2px 0 0 0;
            font-family: 'Bold';
        }

        &.R {
            &::before {
                height: 100%;
                align-content: center;
                background-color: gray;
                color: white;
                content: 'REPLAY';
            }
        }

        &.L {
            &::before {
                background-color: red;
                color: white;
                content: 'LIVE SHOW!';
            }
        }

        &.P, &.V, &.B {
            &::before {
                background-color: green;
                color: white;
                content: 'ON AIR';
            }
        }

        &:not(.R, .V, .B, .P, .L) {
            &::before {
                display: none;
            }
        }
    }

    #chat-bark {
        position: absolute;
        z-index: 20000;
        left: 0;
        top: 0;
        opacity: 0;
        translate: 0 calc(-1lh - 1rem);
        interpolate-size: allow-keywords;
        transition: opacity, display, overlay, translate, height, padding;
        transition-behavior: allow-discrete;
        transition-duration: 500ms;
        height: 0px;
        width: 100%;
        box-shadow: 0 0.5rem 0.5rem var(--color-primary-950);

        > div {
            position: relative;
            width: 100%;
            opacity: 0;
            translate: 0 calc(-1lh - 1rem);
            padding: 0 0 0 1.5lh;
            display: block;
            interpolate-size: allow-keywords;
            transition: opacity, display, overlay, translate, height, padding, background;
            transition-behavior: allow-discrete;
            transition-duration: 500ms;
            height: 0px;

            &.on {
                display: block;
                opacity: 1;
                translate: 0 0;
                padding: 0.5rem 0.5rem 0.5rem 1.5lh;
                height: auto;
                
                @starting-style {
                    opacity: 0;
                    display: none;
                }
            }
        }

        &:has(div.on) {
            display: block;
            opacity: 1;
            translate: 0 0;
            height: auto;
            
            @starting-style {
                opacity: 0;
                display: none;
            }
        }

        #n-pl {
            background: url(../img/nowplaying_black.png) 0.25rem center / 1.25lh no-repeat, pink;
            color: oklch(from pink calc(l - 0.5) c h);
            z-index: 20040;
            
            &::before {
                content: "NOW PLAYING • ";
                font-family: 'Bold';
            }
        }

        #rq-pl {
            background: url('../img/micplus.png') 0.25rem center / 1.25lh no-repeat, orangered;
            color: oklch(from orangered calc(l + 1) calc(c - 0.1) h);
            z-index: 20030;
            
            &::before {
                content: "REQUEST • ";
                font-family: 'Bold';
            }
        }

        #sms-pl {
            background: url('../img/mobilephone.png') 0.25rem center / 1.25lh no-repeat, lightblue;
            color: oklch(from lightblue calc(l - 0.4) c h);
            z-index: 20010;
            
            &::before {
                content: "SMS LINE • ";
                font-family: 'Bold';
            }
        }

        #reqt-pl {
            background: url('../img/micplus.png') 0.25rem center / 1.25lh no-repeat, gray;
            color: oklch(from gray calc(l + 0.35) c h);
            z-index: 20020;

            &.Open {
                background: url('../img/micplus.png') 0.25rem center / 1.25lh no-repeat, green;
            }

            &.Closed {
                background: url('../img/micplus.png') 0.25rem center / 1.25lh no-repeat, crimson;
            }
            &.vip {
                background: url('../img/vip.png') 0.5rem center / 1.25lh no-repeat, gold;
                padding-left: 2lh;
                color: black;
            }
        }
    }
    
    #chat-messages {
        padding: 0;
        align-content: end;
        flex: 1 1 auto;
        height: 100%;
        overflow-y: auto;
        scrollbar-color: var(--color-primary-950) transparent;
        scrollbar-gutter: stable;

        .message {
            &.show-results-card {
                background-color: oklch(from var(--color-primary-800) l c h / 0.5) !important;
                border-left: 4px solid rgb(255, 188, 0);
                padding: 5px 10px;
                color: contrast-color(oklch(from var(--color-primary-800) l c h / 0.5));

                strong {
                    font-family: 'Bold';
                    color: oklch(from #ffbc00 calc(l + 0.1) c h);
                    padding-inline-end: 1ch;
                }

                span {
                    color: contrast-color(oklch(from var(--color-primary-800) l c h / 0.5));
                }

                hr {
                    border: none;
                    border-top: 2px solid #333;
                    margin: 6px 0;
                }

                div.outcome-ask, div.outcome-vote {
                    font-size: 13px;
                    color: var(--color-secondary-700);
                    font-family: 'Bold';

                    span {
                        font-family: 'Regular';
                        color: oklch(from var(--color-primary-700) 1 0 h);
                    }
                }

                div.outcome-ask {
                    column-count: 2;

                    span {
                        display: block;
                    }
                }

                div.outcome-vote {
                    span {
                        display: inline;
                    }
                }
            }

            margin-bottom: 4px;
            line-height: 1.5;
            font-size: 1rem;
            backdrop-filter: blur(0.5rem);
            padding: 0.1rem 0.5rem;
            color: var(--color-secondary-800);

            &.me {
                background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 0, 0.3) 45%, rgba(255, 255, 0, 0.6) 50%, rgba(255, 255, 0, 0.3) 55%, transparent 100%);
                background-size: 200% 100%;
                animation: stripePulse 2s ease-in-out 5;
            }

            &:is(.to, .from) {
                width: 80%;
                
                > div {
                    > span:first-of-type { font-size: 0.625rem; color: var(--color-secondary-800); margin-right: 6px; }
                    > span:last-of-type { color: var(--color-secondary-900); font-size: 0.9rem; }
                }
            }
            &.to { margin-right: auto;
                > div { border-left: 2px solid #0fc; padding-inline-start: 0.5rem; }
                > strong { color: #0fc }
            }
            &.from { margin-left: auto;
                > div { border-right: 2px solid #f05; text-align: end; padding-inline-end: 0.5rem; }
                > strong { color: #f05 }
            }
            &:not(:last-of-type) { margin-bottom: 0.125rem }
            &:nth-of-type(even) { background-color: rgb(255 255 255 / 0.05) }
            &:nth-of-type(odd) { background-color: rgb(255 255 255 / 0.15) }
            &.hidden { display: none !important; }

            .msg-time { font-size: 0.75rem; font-variant-numeric: tabular-nums; }
            .msg-content-area { padding: 2px 6px; border-radius: 4px; display: inline }

            /* Chat flow avatar styles */
            .msg-avatar {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                object-fit: cover;
                vertical-align: middle;
                margin-right: 4px;
                border: 1px solid var(--color-primary-900);
                display: inline-block;
            }

            .chat-username-clickable {
                cursor: pointer;
                transition: color 0.15s ease;
                
                &:hover {
                    text-decoration: underline;
                    opacity: 0.85;
                }
            }

            /* Hide trash buttons by default for standard users */
            .hide-staff-action {
                display: none !important;
            }
        }
    }
}

/* New: User List Panel Styling */
#user-list-sidebar {
    flex: 0 1 27ch; /* Sidebar gets 1/4 of the width */
    background-image: url(../img/phones.webp), linear-gradient(to bottom, oklch(from var(--color-primary-100) l c h / 0.8), oklch(from var(--color-primary-400) l c h / 0.8));
    background-blend-mode: overlay;
    background-position: center;
    background-size: cover;
    border: 1px solid var(--color-primary-900);
    border-radius: 0.5rem;
    /* corner-shape: squircle; */
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    .sidebar-title {
        flex: 0 0 auto;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--color-primary-900);
        padding-bottom: 2px;
    }

    #users-online-container {
        flex: 1 1 auto;
        overflow-y: scroll;
        scrollbar-color: var(--color-primary-950) transparent;
        scrollbar-gutter: auto;
    }

    .online-user-item {
        font-size: 1rem;
        padding: 0.25rem 0 0.25rem 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        border-radius: 4px;
        border-left: 1px solid var(--color-primary-900);
        margin-bottom: 4px;
        backdrop-filter: blur(0.5rem);
        background-color: oklch(from var(--color-primary-50) calc(l + 0.2) 0 h / 0.3);
        overflow: visible;

        &.opt {
            anchor-name: --selectedchatter;
        }

        &.me {
            padding: 0.25rem 0 0.25rem calc(0.5rem - 2px);
        
            &::before {
                width: 12px;
                border-radius: unset;
                clip-path: polygon(50% 0, calc(50% * (1 + sin(0.4turn))) calc(50% * (1 - cos(0.4turn))),
                    calc(50% * (1 - sin(.2turn))) calc(50% * (1 - cos(.2turn))),
                    calc(50% * (1 + sin(.2turn))) calc(50% * (1 - cos(.2turn))), 
                    calc(50% * (1 - sin(.4turn))) calc(50% * (1 - cos(.4turn))));
            }
        }

        span {
            cursor: pointer;

            &.oun {
                flex-grow: 1;
                text-box: trim-both cap alphabetic;
            }
        }

        /* Tiny green online dot anchor indicator */
        &::before {
            content: "";
            display: inline-block;
            width: 8px;
            aspect-ratio: 1;
            flex: 0 0 auto;
            background-color: #10b981;
            border-radius: 50%;
        }

        /* Dim their sidebar slot background text opacity slightly to show they are idle */
        &.status-away {
            opacity: 0.6;
            font-style: italic;

            span.oun::before {
                content: '\f0f4';
                font-family: 'Font Awesome 7 Free';
                font-weight: 600;
                font-style: normal;
                padding-inline:0.5ch
            }

            &::before {
                background-color: #f59e0b !important; /* Soft amber/yellow dot instead of green */
            }
        }

        .badge {
            font-size: 0.5625rem;
            padding: 1px 4px;
            margin-right: 8px;
        }

        &:has(span.badge-owner) {
            background-color: oklch(from var(--ownerbadge) calc(l + 0.25) c h / 0.3);
        }
        &:has(span.badge-admin) {
            background-color: oklch(from var(--adminbadge) calc(l + 0.25) c h / 0.3);
        }
        &:has(span.badge-vip) {
            background-color: oklch(from var(--vipbadge) calc(l + 0.25) c h / 0.3);
        }
    }
}

#input-container { 
    display: flex;
    gap: 10px;
    background-color: oklch(from var(--color-primary-200) l c h / 0.4);
    border: 1px solid var(--color-primary-900);
    border-top: none;
    padding: 0 0.5rem 0.5rem;
    margin: 0 0.75rem 0.75rem 0.75rem;
    border-radius: 0 0 6px 6px;
    /* corner-shape: squircle; */

    button {
        width: max-content;

        &.upload-btn {
            width: auto !important;
            margin: 0 !important;
            padding: 0 15px !important;
        }
    }

    input[type="file"] {
        display: none;
    }

    input[type="text"] {
        flex: 1;
        font-size: 1.25rem;
        margin: 0.25rem 0;
    }
}

/* Base badge layout */
.badge {
    font-size: 0.6875rem;
    font-family: 'Bold';
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* 1. Owner Styling */
.role-owner .msg-user { color: #f43f5e !important; text-shadow: 0 0 8px rgba(244,63,94,0.3); }
.badge-owner { background-color: var(--ownerbadge); color: #fff; }

/* 2. Admin Styling */
.role-mod .msg-user { color: #38bdf8 !important; }
.badge-admin { background-color: var(--adminbadge); color: #fff; }

/* 3. VIP Styling */
.role-vip .msg-user { color: #a855f7 !important; }
.badge-vip { background-color: var(--vipbadge); color: #111; }

/* 4. User Styling (Clean & standard) */
.role-user .msg-user { color: #cbd5e1 !important; }
.badge-user { display: none; } /* Standard users don't need a visible badge label */

.message.whisper-mode {
    background-color: rgba(245, 158, 11, 0.08); /* Soft amber tint background strip */
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
}

.message.whisper-mode .msg-user {
    color: #f59e0b !important;
}

.whisper-tag {
    font-size: 0.6875rem;
    font-family: 'Bold';
    text-transform: uppercase;
    background-color: #f59e0b;
    color: #0f172a;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 6px;
}

#chat-input-form-wrapper {
    display: flex;
    flex-flow: row;
    flex: 1;
}

.chat-img-link {
    display: inline-block;
    color: var(--color-primary-900);
    text-decoration: underline;
    font-weight: 500;
    margin-top: 5px;
}
.chat-img-preview {
    display: block;
    max-width: 200px;
    max-height: 150px;
    border-radius: 6px;
    border: 1px solid var(--color-primary-900);
    margin-top: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}
.chat-img-preview:hover {
    transform: scale(1.02);
}

/* Fullscreen Popover Backdrop Overlay */
#image-popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(15, 23, 42, 0.85); /* Slick semi-transparent slate theme */
    backdrop-filter: blur(8px); /* Modern blur effect */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 44000; /* Forces it over absolutely everything else on the screen */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;

    &.active {
        opacity: 1;
        pointer-events: auto;

        #popover-target-img {
            transform: scale(1);
        }
    }

    /* The actual high-res image inside the popover */
    #popover-target-img {
        max-width: 90vw;
        max-height: 85vh;
        border-radius: 12px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        border: 1px solid var(--color-primary-900);
        transform: scale(0.95);
        transition: transform 0.25s ease;
    }

    /* Close Hint Badge */
    .popover-close-hint {
        position: absolute;
        bottom: 30px;
        background-color: rgba(0, 0, 0, 0.6);
        color: var(--color-primary-300);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.8125rem;
        letter-spacing: 0.5px;
        pointer-events: none;
    }
}

span i.fa-file-image {
    font-size: 1.25em;
    cursor: pointer;
}

div#emoji-modal {
    position: fixed;
    position-anchor: --emoji-button;
    bottom: anchor(bottom);
    margin-block-end: 0;
    margin-inline-start: -2.5rem;
    left: anchor(right);
    border: 2px solid var(--color-primary-800);
    border-radius: 1rem;
    background-color: var(--color-primary-50);
    box-shadow: 10px 10px 10px;
    overflow: clip;
    z-index: 30000;
    opacity: 0;
    transform: translate3D(0, 12px, 0);
    pointer-events: none;
    transition: all 0.2s ease;
    transform-origin: bottom left;
    scale: 0;

    &:not(.hide) {
        opacity: 1;
        margin-block-end: 3.5rem;
        pointer-events: auto;
        scale: 1;
        margin-inline-start: 0.5rem;
    }
}

button#emoji-button {
    anchor-name: --emoji-button;
}

.emoji-modal-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    padding: 0 0 0.5rem 0.5rem;
    align-items: center;
}

button#emoji-close {
    width: 3ch;
    padding: 0.25rem;
    aspect-ratio: 1;
    border-radius: 0 0 0 0.5rem;
}

div#emoji-grid {
    height: auto;
    gap: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

button.emoji-choice {
    font-size: 1.5rem;
    padding: 3px;
    background-color: unset;
}

.emoji-modal-header span {
    font-family: 'Bold';
    text-decoration: underline;
    text-transform: uppercase;
}

.emoji-choice:hover {
    background: rgba(128, 128, 128, 0.2);
}

/* Public Bio Card Popup Styling */
.bio-card-header { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 15px; border-bottom: 1px solid var(--color-primary-900); padding-bottom: 10px; }
h2 { flex-grow: 3; font-weight: normal; }
.break { flex-basis: 100%; height: 0; }
#view-tagline { font-style: italic; }

#profile-view-mode {
    #asl {
        font-size: 1.5rem;
        display: flex;
        flex-flow: row;

        span:not(:last-of-type):not(:has(+ span:empty)):after {
            content: '•';
            padding-inline: 0.5ch;
        }
    }

    strong, span {
        display: block;
    }
    
    strong {
        text-transform: uppercase;
        font-size: 0.9375rem;
        color: var(--color-secondary-600);
        margin-block-end: 3px;

        &:has(+ span:empty) {
            display: none;
        }
    }

    span {
        color: var(--color-secondary-800);
        margin-block-end: 10px
    }
}

.social-links { display: flex; gap: 15px; padding-top: 15px; margin-bottom: 15px; border-top: 1px solid var(--color-primary-950); }
.social-links a { color: var(--color-primary-950); text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.social-links a:hover { text-decoration: underline; }

/* Pointer formatting for clickable user handles */
.msg-user, .sidebar-username { cursor: pointer; }
.msg-user:hover, .sidebar-username:hover { text-decoration: underline; }

#view-socials i {
    font-size: 1.5em;
    cursor: pointer;
}

#view-socials:empty {
    margin: 0;
}

/* Floating Toast Stack Container */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10000; /* Stays above modals and chat panels */
    pointer-events: none;
}

/* Individual Toast Alert Layout */
.toast-notification {
    background-color: var(--color-primary-200);
    color: var(--color-secondary-800);
    border: 1px solid var(--color-primary-400);
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    
    /* Smooth slide-in and fade-out animations */
    transform: translate3D(120%, 0, 0);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Slide in state triggered by JavaScript */
.toast-notification.show {
    transform: translate3D(0, 0, 0);
    opacity: 1;
}

/* Toast color variations to distinguish joins from leaves */
.toast-join {
    border-left: 4px solid #10b981; /* Emeral Green for logs */
}
.toast-leave {
    border-left: 4px solid #f43f5e; /* Rose Pink for departures */
}

/* Visual dot indicator badge */
.toast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.toast-join .toast-dot { background-color: #10b981; }
.toast-leave .toast-dot { background-color: #f43f5e; }

/* Avatar circle layouts */
.avatar-frame {
    width: 90px; height: 90px;
    border-radius: 25%;
    /* corner-shape: squircle; */
    border: 2px solid var(--color-primary-900);
    object-fit: cover;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}
.avatar-frame:hover {
    filter: brightness(0.8);
    transform: scale(1.02);
}

#view-lastseen::before {
    content: 'LAST SEEN:';
    padding-inline-end: 0.5rem;
    color: var(--color-secondary-600);
    font-size: 0.8125rem;
    text-transform: uppercase;
    font-weight: 700;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: oklch(from var(--color-primary-50) 0.5 0.05 h);
    backdrop-filter: blur(6px); /* sleek layout blur */
    
    /* Centering Magic */
    display: flex;
    justify-content: center;
    align-items: center;
    
    z-index: 50000; /* Positions it over chat boxes and sidebars */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* Active class state to transition the fade-in seamlessly */
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Centered Modal Card Content Container */
.modal-body {
    background-color: var(--color-primary-50);
    padding: 15px;
    border-radius: 12px;
    width: max-content;
    max-width: 70ch; /* Snug width width profiles grid maps */
    max-height: 85vh; /* Bounds content area height gracefully */
    overflow-y: auto; /* Adds clean scrollbar inside the card if contents run long */
    border: 3px solid var(--color-primary-900);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* Smooth Pop-in Scale Effect */
    transform: scale(0.95);
    transition: transform 0.25s ease;

    input[type="file"] {
        display: none;
    }
}

.modal-overlay.active .modal-body {
    transform: scale(1);
}

.modal-footer {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
    margin-block-start: 0.5rem;
}

/* Style Toolbar Container */
#style-toolbar {
    display: flex;
    gap: 1.75rem;
    align-items: center;
    background-color: oklch(from var(--color-primary-200) l c h / 0.4);
    border: 1px solid var(--color-primary-900);
    border-bottom: none;
    padding: 0.5rem 0.5rem 0;
    margin: 0 0.75rem;
    border-radius: 0;
    transition: border-radius 0.5s ease;

    div {
        display: flex;
        flex-direction: row;

        > label {
            display: flex;
            flex-flow: column;
            gap: 0;
            border: none;
            justify-content: center;
            align-content: center;
            padding: 0 0.25rem;

            > input {
                aspect-ratio: 1;
                width: 1rem;
            
            }
        }
    }

    .toolbar-label {
        font-size: 1rem;
        color: var(--color-secondary-900);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .chat-system-module {
        gap: 0.75rem;
        height: 2rem;
    }

    label {
        font-size: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        svg {
            cursor: pointer;
        }
    }

    input[type="color"] {
        -webkit-appearance: none;
        border: none;
        inline-size: 1.5rem;
        block-size: 1.5rem;
        cursor: pointer;
        outline: none;
        border-radius: 50%;

        &::-webkit-color-swatch-wrapper {
            padding: 0;
            border-radius: 50%;
        }
        &::-webkit-color-swatch {
            border: none;
            border-radius: 50%;
        }
    }
}

.options {
    height: 100%;
    aspect-ratio: 1;
    padding: 0 0.25rem;

    input {
        display: none;

        &:checked + svg path {
           fill: white;
        }
    }

    svg {
        height: 80%;
        fill: oklch(from var(--color-primary-700) l c h / 1);
    }
}

input[type="checkbox"] {
    height: 1rem;
    width: 2.5rem;
    aspect-ratio: 1;
    margin: 0;
}

/* Staff Delete Button Layout */
.del-msg {
    background-color: transparent !important;
    color: #ef4444 !important; /* Red tint trash icon */
    border: none !important;
    cursor: pointer;
    font-size: 0.8125rem;
    padding: 0 4px !important;
    width: auto !important;
    display: inline-block;
    vertical-align: middle;
    float: right;
}
.del-msg:hover {
    opacity: 1 !important;
}

/* Profile or Navigation Tabs Tray */
.profile-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--color-secondary-900);
    margin-bottom: 1rem;
    gap: 10px;
}

.profile-tab-btn {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-secondary-800) !important;
    padding: 8px 16px !important;
    font-size: 0.875rem;
    font-family: 'Bold';
    cursor: pointer;
    border-radius: 0 !important;
    width: auto !important;
    margin: 0 !important;
    transition: color 0.2s, border-bottom 0.2s;

    &.active-tab {
        border-bottom: 2px solid var(--color-secondary-950) !important;
    }
}

/* Standard field layout container */
.profile-section-block {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    width: 100%;
    align-items: center;
    gap: 0.4rem;

    label.s {
        grid-column: 1 / 2;
        text-align: right;

        + input, + select, + textarea {
            grid-column: -3 / -1;
            width: 100%;
            margin: 0;
        }
    }

    label.m {
        grid-column: 1 / 3;
        text-align: right;
        + input, + select, + textarea {
            grid-column: -2 / -1;
            width: 100%;
            margin: 0;
        }
    }

    label.l {
        grid-column: 1 / -1;

        + input, + select, + textarea {
            grid-column: 1 / -1;
            width: 100%;
            margin: 0;
        }
    }
}

div:has(label.profile-security-heading) {
    border-top: 1px solid var(--color-primary-900);
    margin: 20px 0;
    padding-top: 15px;
}

.role-badge {
    font-size: 0.875rem;
    vertical-align: middle;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    cursor: help;
}

/* Subtle bounce animation for owner badges
.badge-owner {
    animation: badgeSubtleFloat 3s ease-in-out infinite;
}

.badge-vip {
    perspective: 500px;
    animation: badgeVIPSubtleFloat 3s ease-in-out infinite;
} */

#user-context-menu {
    position: absolute;
    position-anchor: --selectedchatter;
    position-visibility: always;
    position-area: block-end;
    position-try-fallbacks: flip-y;

    * {
        font-stretch: condensed;
    }
}

.top-app-header-bar {
    display: flex;
    flex-grow: 1;
    gap: 0.5rem;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 0.5rem 0 0 0.5rem;
    container: barkbox / size;
}

#barker-stage {
    display: flex;
    flex-flow: row nowrap;
    flex: 1 1 auto;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    align-items: center;
    gap: 0 1rem;
    overflow: hidden;

    transform: translate3D(0, 0, 0);
    opacity: 1;

    container: barkbox / size;

    &.barker-changing {
        animation: bark-anim-off 1s ease-in-out forwards;
    }

    &.barker-entering {
        animation: bark-anim-on 1s ease-in-out forwards;
    }

    &.barker-broadcast {
        transition: none !important;
        animation: none !important;
        transform: none;
        opacity: 1;
    }

    #barker-text {
        display: flex;
        flex-flow: column nowrap;

        span:first-of-type {
            grid-area: head;
            font-family: 'Bold';
            text-align: right;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: clamp(1.5cqw, 1.1em, 30cqh);
            letter-spacing: 0.5px;
        }

        span:last-of-type {
            font-size: clamp(1.3cqw, 1em, 25cqh);
            line-height: 1.05;
            text-align: right;

            grid-area: body;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    #barker-images {
        grid-area: image;
        height: 100%;
        display: flex;
        align-items: center;
        
        img {
            max-height: 100%;
            width: auto;
            object-fit: contain;
        }
    }
}

/* Core Interaction Tray Layout Frame */
#interactive-poll-tray {
    background-color: oklch(from var(--color-primary-900) calc(l + 0.1) c h);
    border-top: 2px solid oklch(from var(--color-primary-900) calc(l + 0.2) c h);
    color: var(--color-secondary-200);
    padding: 0.5rem;
    margin: 0 0.75rem;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: bottom;
    border-radius: 0.5rem 0.5rem 0 0;
    /* corner-shape: squircle; */

    #poll-top-line {
        display: flex;
        flex-flow: row;
        justify-content: space-between;

        &:has(div > div.text > input:disabled) {
            display: none;
        }
    }

    &.closing {
        animation: textPulsateAlert 4s infinite alternate;
    }

    &.skip-animations {
        animation: none !important;
        transform: translate3D(0, 0, 0) !important;
        opacity: 1 !important;
    }

    &.hidden {
        + #style-toolbar {
            border-radius: 0.5rem 0.5rem 0 0;
            /* corner-shape: squircle; */
        }
    }
}

/* Slide Entry Animation Keyframe States */
.poll-tray-expanded {
    opacity: 1;
    transform: scaleY(1);
    max-height: 200px;
}

.poll-tray-collapsed {
    opacity: 0;
    transform: scaleY(0);
    max-height: 0;
    padding: 0 20px !important;
    overflow: hidden;
}

/* Interactive custom styled option buttons rules */
.option {
    background-color: var(--color-primary-700);
    border: 2px outset var(--color-primary-800);
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
    font-family: 'Bold';
    transition: background 0.15s, border-color 0.15s;
    
    &:hover {
        background-color: var(--color-secondary-700);
        border-color: var(--color-primary-50);
        color: var(--color-primary-200);
    }

    &.voted-active-state {
        background-color: var(--color-primary-700) !important;
        border-color: var(--color-primary-700) !important;
        box-shadow: 0 0 8px rgba(255, 188, 0, 0.4);
    }
}

.poll-tray-pulsate-alert {
    animation: pollTrayFlashPulse 10s ease-in-out;
}

/* Sidebar Voting Highlight Theme Rules */
.online-user-item.voted-highlight {
    border-left: 3px solid var(--color-primary-900) !important; /* Gold side border anchor indicator */
    border-radius: 6px 4px 4px 6px;
    font-family: 'Bold';
    transition: all 0.25s ease-in-out;
}

.voted-highlight .oun::before {
    content: '\f772' !important;
    font-family: 'Font Awesome 7 Free';
    font-weight: 600;
    font-style: normal;
    padding-inline: 0.5ch;
}

.poll-header-title { display: inline; font-family: 'Bold'; color: currentColor; font-size: 1rem; i { font-size: 1.25em; padding-inline-end: 0.5rem }}
.poll-question-text {
    display: inline;
    font-size: 0.875rem;
    margin-bottom: 12px;
    font-weight: 500; 
    
    &:has(+ div > div.text > input:disabled), &:has(+ div > div.voted),
    &:has(+ div > div.veto) {
        display: none;
        padding: 0;
    }
}

.poll-interaction-node {
    width: 100%;
    display: flex;
    gap: .5rem;

    &:not(:has(.veto)) {
        margin-top: .5rem;
    }

    > div.voted {
        font-size: 1.25rem;
        font-family: 'Bold';
        padding: 0.5rem 0 0 0;
        display: flex;
        align-items: center;
        gap: 6px;
        animation: checkPopIn 0.3s ease-out;
        width: 100%;
        border-top: 2px solid currentColor;

        &:has(input:disabled) {
            &::before {
                content: 'Thanks for your vote! ';
                display: inline-block;
                width: max-content;
            }
        }

        &:has(div.voted) > div {
            border: none;
            padding: none;
        }

        input {
            flex: 1 1;
            background-color: oklch(from var(--color-primary-700) calc(l + 0.3) calc(c - 0.15) h);
            border: 1px solid var(--color-primary-900);
            padding: 0.3rem;
            margin: 0;
            border-radius: 4px;
            font-size: 0.9rem;
            font-family: 'Bold';

            &:disabled {
                border: none;
                margin: 0;
                padding: 0;
                background-color: transparent;
                font-size: 1.25rem;
            }

            &::placeholder {
                color: oklch(from var(--color-primary-900) l c h / 0.6);
            }
        }

        button {
            font-weight: bold;
            border: 1px solid transparent;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            font-size: 0.75rem;
            width: 14ch;

            &:disabled {
                font-size: 1.125rem;
                cursor: not-allowed;
                background-color: #222;
                color: #777;
                display: none;
            }
        }

        &:not(.text):before {
            content: '\f772';
            font-family: 'Font Awesome 7 Free';
            font-weight: 600;
            padding-inline: 0.25rem;
        }

        > span:last-of-type {
            padding: 2px 8px;
            border-radius: 4px;
        }
    }

    > div.veto {
        font-size: 0.9rem;
        padding: 0;
        animation: checkPopIn 0.3s ease-out;
        width: 100%;
        border-top: 0;
    }

    .text {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;

        input {
            flex: 1 1 auto;
        }

        button {
            width: max-content;
        }
    }
}
.profile-header { align-items: center; display: flex; gap: 15px; h2 { text-align: left; font-family: 'Bold' }}
.context-menu { position: absolute; z-index: 100000; pointer-events: auto; background-color: #1a1a1a; border: 1px solid #333; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.5); min-width: 140px; }
.context-action { display: block; width: 100%; text-align: left; padding: 8px 14px; background-color: transparent; border: none; color: #fff; cursor: pointer; }
.context-action-report {  }
.context-action-kick { color: #ff4a4a; font-family: 'Bold'; }
.context-action-block { color: #f00; font-family: 'Bold'; }
.context-divider { border-top: 1px solid #333; margin: 5px 0; }
.report-modal { position: fixed; inset: 0; background-color: rgba(0,0,0,.7); z-index: 20000; display: flex; align-items: center; justify-content: center; }
.report-dialog { background-color: #1e1e1e; padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; border: 1px solid #333; }
.report-textarea { width: 100%; background-color: #121212; border: 1px solid #444; color: #fff; border-radius: 4px; padding: 8px; box-sizing: border-box; resize: none; }
.report-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
.report-submit, .report-cancel { color: #fff; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; }
.report-submit { background-color: var(--color-primary-900); color: #000; font-family: 'Bold'; }
.report-cancel { background-color: #444; }
.profile-security-heading { color: var(--color-secondary-700); font-family: 'Bold'; margin-bottom: 12px; }
.message-content { padding: 2px 6px; border-radius: 4px; display: inline-block; }
.poll-answer-row { display: flex; gap: 10px; width: 100%; }
.poll-answer-input { flex: 1; background-color: #0c0c0c; border: 1px solid #333; color: #fff; padding: 8px; border-radius: 4px; font-size: 0.8125rem; }
.poll-answer-submit { font-family: 'Bold'; border: none; padding: 0 16px; border-radius: 4px; font-size: 1rem; max-width: 10ch; }
.poll-answer-submit.is-locked { background-color: #222; color: #777; cursor: not-allowed; }
.poll-answer-submit.is-ready { background-color: var(--color-primary-900); color: #000; cursor: pointer; }
.poll-results-card { background-color: rgba(255,188,0,.05); border-left: 4px solid var(--color-primary-900); padding: 10px; }
.poll-results-title { color: var(--color-primary-900); }
.poll-results-question { font-family: 'Bold'; font-size: 0.875rem; }
.poll-results-rule { border: 0; border-top: 1px solid #333; margin: 6px 0; }
.poll-results-empty, .poll-voter-list { color: #aaa; font-size: 0.75rem; }
.poll-response-row { margin-bottom: 6px; font-size: 0.8125rem; }
.poll-response-name { color: var(--color-primary-900); }

div#settings-modal {
    position: absolute;

    h3 {
        width: unset;
    }
}

form#portal-settings-form {
    display: grid;
    grid-template-columns: max-content 25ch;
    gap: 0.25rem;
    margin-top: 1rem;
    align-items: center;
    
    label {
        text-align: right;
    }

    span:has(input[type="range"]) {
        display: flex;
        flex-flow: row;
        align-items: center;

        span {
            width: 6.5ch;
            text-align: right;
        }
    }
}

#forgot-password-modal form {
    display: grid;
    grid-template-columns: 1fr;

    > div {
        display: fl;
    }
}

input#set-play-sounds {
    height: 1rem;
}

.controls {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.mobile-sidebar-toggle-btn {
    display: none !important;
    background-color: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 5px 10px
}

@media screen and (-webkit-min-device-pixel-ratio: 3),
    screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) {
    .chat-header {
        display: grid;
        grid-template-rows: 2.5rem min-content;
        grid-template-columns: max-content 1fr max-content max-content;
        gap: 0.5rem;
        height: max-content;

        > div {
            display: none;
        }
    }

    #chat-topic {
        display: none;
    }

    h2 {
        font-size: 1.625rem;
    }

    h3 {
        width: unset;
        line-height: 1;
    }
    
    .barker {
        grid-column: 1 / -1;
        margin-inline: -1rem;
    }

    .top-app-header-bar {
        border: none;
        border-radius: 0;
    }

    form label, form input, form button, .card p, #forgot-password-modal p {
        font-size: 1.375rem;
    }

    .profile-section-block label,
    .profile-section-block input,
    .profile-section-block select,
    .profile-section-block textarea {
        font-size: 1.125rem
    }

    .modal-footer button {
        font-size: 1rem
    }

    #style-toolbar {
        gap: 0.75rem;
        justify-content: space-evenly;
    }
    
    #user-list-sidebar { /* Change to match your exact sidebar element ID! */
        position: fixed;
        max-height: 80%;
        right: -1rem;
        bottom: 1rem;
        width: 260px;
        border-left: 1px solid var(--color-primary-900);
        z-index: 9999; /* Floats over the chat message log canvas */
        transform: translate3D(100%, 0, 0); /* Hides completely off-screen to the right */
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-shadow: -5px 0 15px rgba(0,0,0,0.5), 5px 0 15px rgba(0,0,0,0.5);

        .online-user-item {
            height: 100%;
            overflow-y: auto;
        }

        &.open {
            transform: translate3D(-2rem, 0, 0);
        }
    }

    /* 3. Ensure the mobile trigger button is visible only on smaller phone viewports */
    .mobile-sidebar-toggle-btn {
        display: block !important;
    }
    
    button {
        &.logout, &.set {
            display: none;
        }

        &.logoutt, &.sett {
            display: block;
            margin: 0;
            width: max-content;
        }
    }

    .msg-time {
        position: absolute;
        bottom:0;
        right: 0;
    }

    .poll-header-title {
        margin-bottom: unset;
        font-size: 1em;
    }

    .poll-question-text, #poll-countdown-alert-banner {
        font-size: 1em;
    }

    #station-barker-panel > div {
        align-items: center;
        
        > #barker-head-node {
            font-size: clamp(1.5cqw, 1.2em, 30cqh);
        }

        #barker-body-node {
            text-align: center;
            font-size: clamp(1.5cqw, 0.9em, 25cqh)
        }
    }

    .message {
        .msg-time {
            font-size: 0.7rem;
            letter-spacing: -1px;
        }
    }
}

#reset-password-modal, #forgot-password-modal {
    position: fixed;
    inset: 0;
    background-color: oklch(from lightgrey calc(l - 0.4) c h);
    z-index: 45000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);

    > div {
        background-color: oklch(from lightgrey calc(l - 0.1) c h);
        padding: 1rem;
        border-radius: 8px;
        width: 90%;
        max-width: 400px;
        border: 1px solid var(--accent-color, #ffbc00);
        box-shadow: 0 0 20px rgba(255, 188, 0, 0.2);
    }

    h3 {
        margin-top: 0;
        color: #ffbc00;
    }

    p {
        font-size: 1.125rem;
        color: #aaa;
        margin-bottom: 1rem;
    }

    form > div {
        display: flex;
        flex-flow: row nowrap;
        gap: 0.75rem;
        margin-top: 1rem;
    }

    form > div > div {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    form > div > div > div {
        gap: 5px;
    }

    label {
        font-size: 1.125rem;
        color: #aaa;
    }

    input {
        background-color: #0a0a0a;
        border: 1px solid #333;
        color: #fff;
        padding: 10px;
        border-radius: 4px;
        font-size: 0.8125rem;
    }

    button {
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.8125rem;

        &[type="submit"] {
            width: 100%;
            background-color: #ffbc00;
            color: #000;
            font-family: 'Bold';    
            padding: 12px;
        }
        &[type="button"] {
            background-color: #333;
            color: #fff;
            border: none;
            padding: 10px 16px;
        }
    }
}

/* Target Input */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background-color: transparent;
  cursor: pointer;
  border: none;

    &::-webkit-slider-runnable-track {
      height: 8px;
      background-color: oklch(from var(--color-secondary-600) calc(l - 0.1) c h / 0.2);
      border-radius: 10px;
      border: none;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 16px;
      width: 16px;
      background-color: var(--color-secondary-900);
      border-radius: 50%;
       border: none;
      margin-top: -4px;
    }

    &::-moz-range-track {
      height: 8px;
      background-color: oklch(from var(--color-secondary-600) calc(l - 0.1) c h / 0.2);
      border-radius: 10px;
      border: none;
    }

    &::-moz-range-thumb {
      -webkit-appearance: none;
      height: 16px;
      width: 16px;
      background-color: var(--color-secondary-900);
      border-radius: 50%;
      border: none;
      margin-top: -4px;
    }
}

#slider_val {
    width: 6ch;
    padding-inline-end: 0.25rem;
    &::after {
        content: 'MB'
    }
}

#slider_val2 {
    width: 9ch;
    padding-inline-end: 0.25rem;
    &::after {
        content: ' days'
    }
}

span:has([id^="slider_val"]) {
    display: flex;
    flex-flow: row;
    align-items: center;
}

#poll-countdown-alert-banner {
    color: white;
    font-size: 0.6875rem;
    font-family: 'Bold';
    letter-spacing: 0.5px;
}

#poll-countdown-seconds {
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;

    &:not(:empty) {
        &::before {
            content: '🕒 CLOSING IN:';
            padding-inline-end: 0.25rem;
        }

        &::after {
            content: 's'
        }
    }
}

@container barkbox (width < 500px) {
    #barker-images {
        display: none !important
    }

    #barker-stage {
        gap: 0 !important;
    }

    button {
        &.logout, &.set {
            width: max-content !important;
        }
    }

    #barker-stage {
        align-items: center;
        
        #barker-text {
            span:first-of-type {
                text-align: center;
                font-size: clamp(1.5cqw, 1.2em, 30cqh);
            }

            span:last-of-type {
                text-align: center;
                font-size: clamp(1.5cqw, 0.9em, 25cqh)
            }
        }
    }
}

@keyframes checkPopIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pollTrayFlashPulse {
    0%, 100% {
        transform: scaleY(1);
        box-shadow: 0 -4px 15px rgba(0,0,0,0.4);
        border-top-color: var(--color-primary-400);
    }
    20%, 60% {
        transform: scaleY(1.03); /* Slight upscale to break layout pattern */
        box-shadow: 0 -6px 25px rgba(255, 188, 0, 0.3); /* Bright gold ambient glow */
        border-top-color: #fff; /* Flash border to bright white */
        background-color: #1c1c1c; /* Temporarily lighten the background card tint */
    }
    40%, 80% {
        transform: scaleY(0.98);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.6);
        border-top-color: var(--color-primary-400);
        background-color: #141414;
    }
}

/* @keyframes flashnewtab {
    0%, 100% { background-color: transparent; color: var(--text-main) }
    50% { background-color: gold; color: black; box-shadow: 0.2rem -0.2rem 0.2rem white; }
}

@keyframes badgeSubtleFloat {
    0%, 100% { transform: translate3D(0, 0, 0); }
    50% { transform: translate3D(0, -2px, 0); }
} */

/* @keyframes badgeVIPSubtleFloat {
    0%, 100% { transform: none }
    50% { transform: scale(1.05) rotateY(0); }
    20% { transform: scale(1) rotateY(15deg); }
    80% { transform: scale(1) rotateY(-15deg); }
} */

@keyframes textPulsateAlert {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.01); background-color: var(--color-primary-200) }
}

@keyframes spin-pulse-reverse {
    /* 1. Enter: Animate to full size, spin 80 deg, fade in */
    0% {
        opacity: 0;
        transform: translate3D(-50%, -100%, 0) scale(0) rotate(-80deg);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1) rotate(0);
    }

    /* 2. Pulsate: 3 times to 1.5x size (holding the 80deg rotation) */
    /* Pulse 1 */
    23% { transform: translate3D(-50%, -100%, 0) scale(1.5) rotate(0); }
    31% { transform: translate3D(-50%, -100%, 0) scale(1) rotate(0); }

    /* Pulse 2 */
    39% { transform: translate3D(-50%, -100%, 0) scale(1.5) rotate(0); }
    47% { transform: translate3D(-50%, -100%, 0) scale(1) rotate(0); }

    /* Pulse 3 */
    55% { transform: translate3D(-50%, -100%, 0) scale(1.5) rotate(0); }
    63% { transform: translate3D(-50%, -100%, 0) scale(1) rotate(0); }

    /* Hold still briefly before exiting */
    85% {
        opacity: 1;
        transform: translate3D(-50%, -100%, 0) scale(1) rotate(0);
    }

    /* 3. Exit: Reverse of the first movement */
    100% {
        opacity: 0;
        transform: translate3D(-50%, -100%, 0) scale(0) rotate(80deg);
    }
}

@keyframes stripePulse {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes vault-hit {
    0%, 100% { opacity: 0; }
    12%, 85% { opacity: 1; }
}

@keyframes vault-hit-pulse {
    0% { transform: scale(0.2); }
    12% { transform: scale(1); }

    /* First pulse */
    25% { transform: scale(1.25); }

    34% { transform: scale(1); }

    /* Second pulse */
    43% { transform: scale(1.25); }

    52% { transform: scale(1); }

    /* Hold */
    85% { transform: scale(1); }

    /* Exit */
    100% { transform: translate3D(0, -100dvh, 0) scale(0.2); }
}

@keyframes vault-miss {
    0%, 100% { opacity: 0; }
    12%, 85% { opacity: 1; }
}

@keyframes vault-miss-dip {

    0% { transform: translate3D(0, -80px, 0) rotateX(180deg) scale(0.2); }

    12% {transform: translate3D(0, 0, 0) rotateX(180deg) scale(1); }

    /* First disappointed dip */
    25% { transform: translate3D(0, 45px, 0) rotateX(180deg) scale(1); }
    36% { transform: translate3D(0, -4px, 0) rotateX(180deg) scale(1); }

    /* Second dip */
    43% { transform: translate3D(0, 35px, 0) rotateX(180deg) scale(1); }

    52% { transform: translate3D(0, 0, 0) rotateX(180deg) scale(1); }

    /* Hold */
    85% { transform: translate3D(0, 0, 0) rotateX(180deg) scale(1); }

    /* Exit */
    100% { transform: translate3D(0, 100dvh, 0) rotateX(180deg) scale(0.2); }
}

@keyframes vault-tie {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

@keyframes vault-tie-wobble {

    0% { transform: rotateX(90deg) scale(0.2); }
    10% {transform: rotateX(150deg) scale(1); }

    20% { transform: rotateX(30deg) scale(1); }
    30% { transform: rotateX(150deg) scale(1); }
    30% { transform: rotateX(30deg) scale(1); }
    30% { transform: rotateX(150deg) scale(1); }
    30% { transform: rotateX(30deg) scale(1); }
    70% { transform: rotateX(150deg) scale(1); }
    80%, 90% { transform: rotateX(90deg) scale(1); }
    
    /* Exit */
    100% { transform: rotateX(90deg) scale(0); }
}

@keyframes vault-tie-reveal {
  0%, 50%, 100% { opacity: 0; transform: translate3D(-50%, -50%, 0) scale(0); }
  60%, 90% { opacity: 1; transform: translate3D(-50%, -50%, 0) scale(1); }
}

@keyframes bark-anim-off {
    from { transform: translate3D(0, 0, 0); opacity: 1; }
    to { transform: translate3D(-6rem, 0, 0); opacity: 0; }
}

@keyframes bark-anim-on {
    from { transform: translate3D(0, 100%, 0); opacity: 0; }
    to { transform: translate3D(0, 0, 0); opacity: 1; }
}