:root {
    --c-void:         #050514;
    --c-bg-deep:      #050514;
    --c-bg-panel:     #0b0b2e;
    --c-bg-panel-2:   #10103a;
    --c-bg-panel-dark:#08081f;
    --c-chrome-hi:    #ffffff;
    --c-chrome-mid:   #c3cdf2;
    --c-chrome-low:   #6f7ab0;

    /* accent colors */
    --c-blue:         #3355dd;
    --c-blue-bright:  #5c9bff;
    --c-ice:          #b8d4ff;   /* primary body text */
    --c-cyan:         #5fe0e8;
    --c-pink:         #e878d6;
    --c-purple:       #b98cf0;
    --c-yellow:       #f0d868;
    --c-lime:         #7be878;
    --c-red:          #ff6b6b;

    --c-border:       #3d4a8a;
    --c-border-hi:    #7ab8ff;

    --font-display:   'Comic Sans MS', 'Arial Black', Impact, Arial, sans-serif;
    --font-mono:      'Courier New', Courier, monospace;
    --font-body:      Verdana, Geneva, Arial, sans-serif;

    --panel-fill:     #0b0b2e;
    --panel-fill-alt: #10103a;
    --panel-fill-dark:#08081f;
    --panel-border:   2px solid #7ab8ff;
    --panel-shadow:   none;
    --panel-radius:   0;
    --metal-button:   #cccccc;
    --blue-button:    #26268f;
    --titlebar-gradient: #26268f;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #050514;
    background-image: url("images/bg_stars.gif");
    color: #b8d4ff;
    font-family: Verdana, Geneva, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;
}

::selection {
    background: #f0d868;
    color: #08081f;
}

a              { color: #5fe0e8; text-decoration: underline; }
a:hover        { color: #f0d868; }
a:visited      { color: #e878d6; }

.emote         { height: 15px; vertical-align: text-bottom; margin: 0 1px; }
.emote-med     { height: 20px; vertical-align: text-bottom; margin: 0 2px; }

img:not([src]), img[src=""] {
    outline: 2px solid #ff6b6b;
    background: #2a0f0f;
    min-width: 32px;
    min-height: 32px;
}

/* PAGE LAYOUT */
.page-layout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 1100px;
    margin: 8px auto;
}

.sidebar       { flex: 0 0 180px; width: 180px; min-width: 110px; max-width: 200px; padding-right: 6px; }
.sidebar-right { flex: 0 0 180px; width: 180px; min-width: 0; padding-left: 6px; }
.main-col      { flex: 1 1 0; min-width: 0; }

/* SIDEBAR */
.sidebar-nav,
.sidebar-box,
.sidebar-buttons {
    border: 1px solid #3d4a8a;
    background: #0b0b2e;
    padding: 10px;
    margin-bottom: 9px;
    text-align: center;
}

.sidebar-box { font-size: 12px; color: #b8d4ff; }

.sidebar-nav {
    border: 2px solid #5c9bff;
}

.sidebar-nav h4 {
    color: #f0d868;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 7px;
    border-bottom: 1px solid #5c9bff;
    padding-bottom: 5px;
}

.sidebar-nav a {
    display: block;
    color: #5fe0e8;
    text-decoration: none;
    padding: 5px 4px;
    font-size: 12px;
    border-bottom: 1px dotted #3d4a8a;
}

.sidebar-nav a:hover { color: #f0d868; background: #16164a; }

.sidebar-box .label {
    color: #e878d6;
    display: block;
    margin-bottom: 3px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-deco { text-align: center; margin-bottom: 7px; }

.sidebar-buttons img {
    width: 88px;
    height: 31px;
    border: 1px solid #5c9bff;
    margin: 2px;
}

.sidebar-buttons img:hover { border-color: #f0d868; }

.sidebar-showcase { padding: 4px; margin-bottom: 7px; text-align: center; line-height: 0; }
.sidebar-showcase img             { margin: 2px; }
.sidebar-showcase .topic-gif      { max-width: 100%; height: auto; display: block; margin: 4px auto; }
.sidebar-showcase .showcase-gif   { width: 48px; height: auto; }
.sidebar-showcase .showcase-gif-lg{ width: 64px; height: auto; }
.sidebar-showcase .showcase-btn   { width: 88px; height: 31px; border: 1px solid #3d4a8a; }
.sidebar-showcase .showcase-btn:hover { border-color: #f0d868; }

/* HEADER */
.site-header {
    text-align: center;
    padding: 16px 12px 12px;
    border-bottom: 3px solid #5c9bff;
    background: #0b0b2e;
}

.site-title {
    font-family: 'Comic Sans MS', 'Arial Black', Impact, Arial, sans-serif;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 4px;
    color: #f0d868;
    margin-bottom: 5px;
}

.tagline {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #5fe0e8;
    letter-spacing: 0.5px;
}

.clock {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 18px;
    color: #7be878;
    margin-top: 6px;
}

.top-ticker {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 14px;
    color: #7be878;
    padding: 5px 8px;
    margin-bottom: 7px;
    background: #071a07;
    border: 2px inset #2e5c2e;
}

/* FRAME / WINDOW */
.frame {
    border: 3px outset #7ab8ff;
    background: #0b0b2e;
}

.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 7px;
    background: #26268f;
    color: #ffffff;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
}

.title-buttons { display: flex; gap: 3px; }

.title-buttons span {
    width: 16px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #cccccc;
    border: 2px outset #eeeeee;
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    cursor: default;
}

/* TABS */
.tabs {
    display: flex;
    flex-wrap: wrap;
    background: #0b0b2e;
    border-bottom: 2px solid #5c9bff;
}

.tab {
    background: #12123f;
    color: #8a93c4;
    border: 1px solid #3d4a8a;
    border-bottom: none;
    padding: 6px 15px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
}

.tab:hover  { background: #1c1c5c; color: #ffffff; }
.tab.active { background: #26268f; color: #f0d868; border-color: #7ab8ff; border-bottom: 1px solid #0b0b2e; }

.content     { padding: 20px 22px; min-height: 400px; }
.tab-panel   { display: none; }
.tab-panel.active { display: block; }

/* CONTENT TYPOGRAPHY */
.content h2 {
    font-family: 'Comic Sans MS', 'Arial Black', Arial, sans-serif;
    font-weight: bold;
    font-size: 17px;
    color: #f0d868;
    margin-bottom: 9px;
    padding-bottom: 5px;
    border-bottom: 2px solid #5c9bff;
}

.content h3 {
    font-family: 'Comic Sans MS', 'Arial Black', Arial, sans-serif;
    font-weight: bold;
    font-size: 17px;
    color: #e878d6;
    margin: 14px 0 6px;
}

.content p        { margin-bottom: 11px; }
.content strong   { color: #f0d868; }
.content em       { font-style: italic; color: #5fe0e8; }
.content ul, .content ol { margin: 6px 0 10px 20px; }
.content li       { margin-bottom: 4px; }
.content li a:hover { color: #f0d868; }

hr {
    border: none;
    border-top: 2px solid #5c9bff;
    margin: 12px 0;
}

/* UTILITIES */
.highlight { color: #f0d868; }
.accent    { color: #e878d6; }
.dim       { color: #6f7ab0; }
.primary   { color: #5fe0e8; }

.divider {
    text-align: center;
    color: #6f7ab0;
    margin: 11px 0;
    font-size: 11px;
    letter-spacing: 2px;
}

/* BLINK */
@keyframes blink {
    0%, 100% { visibility: visible; }
    50%       { visibility: hidden; }
}

.geocities-blink {
    animation: blink 0.8s step-start infinite;
    color: #e878d6;
    font-weight: bold;
    font-size: 12px;
}

/* GEOCITIES HEADER BAR */
.geocities-header {
    width: 100%;
    background: #26268f;
    color: #ffffff;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 0;
    border: 2px outset #7ab8ff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.geocities-title {
    font-weight: bold;
    font-size: 12px;
    color: #ffffff;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    letter-spacing: 1px;
}

.geocities-sub {
    font-size: 11px;
    color: #5fe0e8;
    background: #0b0b2e;
    border: 1px solid #5c9bff;
    margin: 4px 0 6px 0;
    padding: 3px 0;
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
    text-align: center;
}

.geocities-footer {
    width: 100%;
    background: #26268f;
    color: #ffffff;
    font-size: 10px;
    border: 2px inset #7ab8ff;
    margin-top: 6px;
    padding: 3px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.geocities-side-content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 15px auto 0;
    align-items: flex-start;
    width: 100%;
    max-width: 600px;
}

.geocities-side-box {
    background: #10103a;
    border: 2px inset #7ab8ff;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding: 7px 11px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.geocities-side-text { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* UNDER CONSTRUCTION */
.under-construction {
    text-align: center;
    padding: 9px;
    margin: 9px 0;
    border: 2px dashed #f0d868;
    background: #1a1608;
    color: #f0d868;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 12px;
}

.under-construction img { vertical-align: middle; margin: 0 4px; }

/* PRIDE STRIP */
.pride-strip {
    height: 4px;
    background: linear-gradient(to right,
        #ff0000 0%, #ff0000 17%,
        #ff8800 17%, #ff8800 33%,
        #ffff00 33%, #ffff00 50%,
        #00cc00 50%, #00cc00 67%,
        #0000ff 67%, #0000ff 83%,
        #9900ff 83%, #9900ff 100%);
}

/* GIF DIVIDERS */
.gif-divider { text-align: center; margin: 11px 0; }
.gif-divider img { display: inline; vertical-align: middle; max-width: 100%; }

/* GUESTBOOK */
.guestbook-container {
    margin: 11px 0;
    border: 2px inset #5c9bff;
    padding: 9px;
    background: #08081f;
    min-height: 300px;
}

.guestbook-entry {
    background: #0b0b2e;
    border: 1px solid #3d4a8a;
    margin-bottom: 7px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.guestbook-name    { color: #f0d868; font-family: 'Comic Sans MS', Arial, sans-serif; font-weight: bold; font-size: 13px; margin-right: 5px; }
.guestbook-message { color: #b8d4ff; font-size: 13px; font-family: Verdana, Arial, sans-serif; }

.guestbook-replies {
    margin-left: 20px;
    border-left: 2px solid #5c9bff;
    padding-left: 10px;
    margin-top: 4px;
}

.guestbook-reply {
    background: #10103a;
    border: 1px solid #3d4a8a;
    padding: 6px 9px;
    margin-top: 4px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
}

.guestbook-entry--reply { opacity: 0.92; }
.guestbook-reply-header { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.guestbook-reply-author { color: #e878d6; font-size: 12px; }
.guestbook-reply-text   { color: #9bb8e8; padding-left: 3px; }

#guestbook-form label {
    color: #5fe0e8;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 13px;
    vertical-align: middle;
}

#guestbook-form-status {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #e878d6;
    margin-left: 6px;
    vertical-align: middle;
}

#guestbook-form button {
    background: #cccccc;
    color: #000000;
    font-weight: bold;
    border: 2px outset #eeeeee;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 11px;
    padding: 4px 15px;
    cursor: pointer;
}

#guestbook-form button:active { border-style: inset; }
#guestbook-form button:hover  { background: #dddddd; }

#guestbook-form input[type="text"] {
    background: #08081f;
    color: #5fe0e8;
    border: 2px inset #3d4a8a;
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    padding: 4px 7px;
}

/* TWITCH / CHANNEL LAYOUT */
.twitch-tab-wrapper {
    display: flex;
    gap: 0;
    margin-top: 9px;
    width: 100%;
    align-items: flex-start;
}

.twitch-rail { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; flex-shrink: 0; width: 92px; min-width: 88px; }
.twitch-rail-left  { padding-right: 8px; }
.twitch-rail-right { padding-left: 8px; }

.twitch-rail img,
.music-rail img {
    width: 88px;
    height: 31px;
    border: 1px solid #5c9bff;
    display: block;
    background: #0b0b2e;
}

.twitch-rail img:hover,
.music-rail img:hover { border-color: #f0d868; }

.twitch-tab-content { flex: 1 1 0; min-width: 0; padding: 0 6px; max-width: 100%; }

.twitch-status-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #0b0b2e;
    border: 2px inset #3d4a8a;
    padding: 7px 13px;
    margin: 0 auto;
    font-size: 13px;
    font-family: 'Courier New', Courier, monospace;
    max-width: 320px;
    width: fit-content;
}

.twitch-status-box.live    { background: #061c26; border-color: #5fe0e8; }
.twitch-status-box.offline { background: #14142e; border-color: #6f7ab0; opacity: 0.82; }

.twitch-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    background: #5fe0e8;
}

.twitch-status-box.offline .twitch-dot { background: #52598a; }

.twitch-status-text-main {
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    color: #ffffff;
    font-size: 14px;
}

.twitch-status-box.offline .twitch-status-text-main { color: #6f7ab0; font-weight: normal; }

.twitch-channels {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    margin: 15px 0 11px 0;
    border: 2px solid #5c9bff;
    padding: 11px 6px;
    background: #08081f;
    overflow-x: auto;
    scrollbar-color: #5c9bff #0b0b2e;
    scrollbar-width: thin;
}

.twitch-channel-box {
    background: #10103a;
    border: 2px inset #3d4a8a;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding: 8px 11px;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
}

.twitch-channel-box h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 13px;
    color: #f0d868;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

.twitch-channel-box .dim { color: #b98cf0; font-size: 11px; font-family: 'Courier New', Courier, monospace; margin-left: 2px; }
.twitch-channel-box a    { display: inline-block; margin-bottom: 8px; margin-top: 2px; }
.twitch-channel-box a img{ border: 1px solid #3d4a8a; background: #0b0b2e; }

.twitch-live-preview {
    margin-top: 7px;
    min-height: 100px;
    font-size: 12px;
    color: #5fe0e8;
    background: #06061a;
    border: 2px inset #14143f;
    padding: 7px 4px;
    overflow-x: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.twitch-channel-box .emote          { vertical-align: middle; margin-right: 2px; }
.twitch-channel-box .twitch-stream-title { font-size: 12px; color: #9bb8e8; padding: 0; margin: 4px 0 0 0; text-align: left; }

/* BLINK DOT */
.twitch-blink-dot90s {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e878d6;
    margin-right: 3px;
    animation: blink 1s step-start infinite;
    vertical-align: middle;
}

/* BLOG */
.blog-post {
    background: #0b0b2e;
    border: 2px inset #5c9bff;
    margin: 20px 0 24px 0;
    padding: 13px 15px 9px 15px;
}

.blog-meta {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 11px;
    color: #ffffff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-title  { font-weight: bold; font-size: 13px; color: #f0d868; }
.blog-date   { color: #e878d6; font-size: 11px; }

.blog-content { font-size: 13px; margin-top: 3px; }
.blog-content img { max-width: 100%; margin: 8px 0; border: 1px solid #3d4a8a; }
.blog-content blockquote { border-left: 3px solid #5fe0e8; margin: 8px 0; padding-left: 9px; color: #9bb8e8; font-style: italic; background: #0a1a2e; }
.blog-content ul, .blog-content ol { margin-left: 20px; }
.blog-content li { margin-bottom: 4px; }

.blog-pagination { margin-top: 17px; margin-bottom: 9px; text-align: center; }

.blog-pagination button.blog-page-btn {
    background: #26268f;
    color: #ffffff;
    border: 2px outset #4d6ba8;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    padding: 4px 15px;
    margin: 0 3px;
    cursor: pointer;
}

.blog-pagination button.blog-page-btn:hover  { background: #3232b0; }
.blog-pagination button.blog-page-btn:active { border-style: inset; }

/* CHAR COUNTER */
.char-counter {
    display: inline-block;
    min-width: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 11px;
    color: #5fe0e8;
    background: #08081f;
    border: 1px solid #5c9bff;
    margin-left: 2px;
    margin-right: 6px;
    padding: 0 4px;
    text-align: center;
    vertical-align: middle;
}

/* PROFILE CARD */
.profile-card-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 11px;
    color: #ffffff;
    gap: 3px;
    width: 100%;
    word-break: break-word;
    overflow: hidden;
}

.sidebar-avatar-widget { text-align: center; }

.profile-card-oldschool {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    justify-content: flex-start;
    width: 100%;
    flex-wrap: nowrap;
}

.profile-card-vertical { flex-direction: column; align-items: center; gap: 0; width: 100%; padding: 0; }

.profile-card-avatar-label {
    font-size: 9px;
    color: #5fe0e8;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin-top: 4px;
    width: 100%;
}

.profile-card-oldschool .sidebar-status-avatar {
    width: 84px !important;
    height: 84px !important;
    min-width: 84px;
    min-height: 84px;
    background: #0b0b2e;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px outset #7ab8ff;
    margin: 0 auto;
    position: relative;
}

.profile-card-discord-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-top: 6px;
    font-size: 9px;
    color: #a3aef0;
    font-family: 'Courier New', Courier, monospace;
}

.profile-card-discord-icon { width: 16px; height: 16px; vertical-align: middle; }

.profile-card-oldschool .sidebar-status-avatar img,
.profile-card-oldschool .sidebar-status-avatar video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-size: 10px;
    color: #ffffff;
    gap: 3px;
    flex: 1 1 0;
    word-break: break-word;
    overflow: hidden;
}

.profile-card-info .sidebar-status-username    { font-weight: bold; font-size: 12px; color: #f0d868; }
.profile-card-info #sidebar-discord-status-dot { margin-left: 0; margin-right: 3px; }
.profile-card-info #sidebar-discord-status-inline { font-size: 10px; color: #5fe0e8; margin-left: 0; }

/* STATUS WIDGET */
.status-widget {
    border: 2px inset #5c9bff;
    background: #08081f;
    padding: 7px 11px;
    margin: 9px 0;
    font-size: 12px;
    text-align: center;
}

/* STATS BOX */
.stats-box {
    border: 2px inset #3d4a8a;
    background: #08081f;
    padding: 9px 13px;
    margin: 9px 0;
    font-size: 12px;
}

.stat-line { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted #262c66; }
.stat-line:last-child { border-bottom: none; }
.stat-label { color: #6f7ab0; }
.stat-value { color: #5fe0e8; font-weight: bold; }

/* GENRE TAGS */
.genre-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 9px; }

.genre-tag {
    border: 1px solid #e878d6;
    background: #260f26;
    color: #e878d6;
    padding: 2px 9px;
    font-size: 11px;
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
}

.genre-tag:hover { background: #e878d6; color: #08081f; }

/* BLINKIES */
.blinkies { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 7px 0; }
.blinkies img { height: 20px; }

/* STATUS BAR */
.status-bar {
    display: flex;
    justify-content: space-between;
    padding: 4px 9px;
    background: #08081f;
    border-top: 2px inset #3d4a8a;
    font-size: 11px;
    font-family: 'Courier New', Courier, monospace;
    color: #6f7ab0;
}

/* BUTTON WALL */
.button-wall {
    margin-top: 7px;
    padding: 11px;
    border: 2px inset #5c9bff;
    background: #08081f;
    text-align: center;
}

.button-wall h3 {
    font-family: 'Comic Sans MS', Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f0d868;
    margin-bottom: 8px;
}

.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.buttons a, .buttons img { display: inline-block; }

.buttons img { width: 88px; height: 31px; border: 1px solid #3d4a8a; }
.buttons img:hover { border-color: #f0d868; }

/* WEBRING */
.webring-box {
    margin-top: 6px;
    padding: 7px;
    border: 2px inset #3d4a8a;
    background: #0b0b2e;
    text-align: center;
    font-size: 12px;
    color: #6f7ab0;
}

.webring-box a       { color: #5fe0e8; text-decoration: none; margin: 0 6px; }
.webring-box a:hover { color: #f0d868; }

/* VIDEO CONTAINER */
.video-container {
    margin: 15px auto;
    border: 3px outset #7ab8ff;
    padding: 13px 9px 9px;
    background: #0b0b2e;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HOME DECO ROW */
.home-deco-row { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 9px 0; }
.home-deco-row img { vertical-align: middle; }
.header-deco-left, .header-deco-right { height: 20px; vertical-align: middle; margin: 0 3px; }

/* MUSIC TAB */
.music-tab-wrapper { display: flex; gap: 0; }
.music-rail { display: flex; flex-direction: column; gap: 5px; padding: 4px 0; flex-shrink: 0; }
.music-rail-left  { padding-right: 8px; }
.music-rail-right { padding-left: 8px; }
.music-tab-content { flex: 1; min-width: 0; }

/* FOOTER */
.site-footer {
    text-align: center;
    padding: 11px;
    font-size: 10px;
    font-family: 'Courier New', Courier, monospace;
    color: #52598a;
    margin-top: 7px;
    border-top: 2px solid #5c9bff;
}

/* 3D CUBE WIDGET */
.lowpoly-widget {
    perspective: 500px;
    display: flex;
    justify-content: center;
    padding: 13px 0 6px 0;
    position: relative;
}

.lowpoly-shape {
    width: 60px;
    height: 60px;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    cursor: grab;
    touch-action: none;
    transform: rotateX(var(--rx, 20deg)) rotateY(var(--ry, 0deg));
}

.lowpoly-shape:active,
.lowpoly-shape.is-dragging { cursor: grabbing; }

.lowpoly-shape .face { position: absolute; width: 60px; height: 60px; background-size: cover; background-position: center; border: 1px solid #5c9bff; }
.lowpoly-shape .f1 { transform: rotateY(0deg) translateZ(30px); }
.lowpoly-shape .f2 { transform: rotateY(90deg) translateZ(30px); }
.lowpoly-shape .f3 { transform: rotateY(180deg) translateZ(30px); }
.lowpoly-shape .f4 { transform: rotateY(-90deg) translateZ(30px); }
.lowpoly-shape .f5 { transform: rotateX(90deg) translateZ(30px); }
.lowpoly-shape .f6 { transform: rotateX(-90deg) translateZ(30px); }

.lowpoly-shape.is-spinning { animation: lowpoly-spin 6s linear infinite; }

@keyframes lowpoly-spin {
    from { transform: rotateX(20deg) rotateY(0deg); }
    to   { transform: rotateX(20deg) rotateY(360deg); }
}

.lowpoly-caption {
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    color: #5fe0e8;
    letter-spacing: 1px;
    margin-top: 3px;
}

/* MEMORY CARD */
.memcard-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    color: #5fe0e8;
}

.memcard-icon {
    width: 16px;
    height: 20px;
    background: #aabbcc;
    border: 1px outset #ccddee;
    position: relative;
}

.memcard-icon::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: #000000;
}

.memcard-blink {
    animation: blink 1.4s step-start infinite;
    color: #5fe0e8;
    font-weight: bold;
    letter-spacing: 1px;
}

/* PS2 DISC SPINNER */
.ps2-disc {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    background: conic-gradient(from 0deg, #b98cf0 0deg, #5c9bff 90deg, #e878d6 180deg, #5fe0e8 270deg, #b98cf0 360deg);
    border: 1px solid #5c9bff;
    animation: ps2-disc-spin 2.4s linear infinite;
}

.ps2-disc.is-idle { animation-play-state: paused; opacity: 0.55; }

@keyframes ps2-disc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.ps2-loading {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: #b8d4ff;
}

.ps2-loading-dots { display: inline-flex; gap: 4px; }

.ps2-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5c9bff;
    animation: ps2-load-pulse 1.2s ease-in-out infinite;
}

.ps2-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.ps2-loading-dots span:nth-child(3) { animation-delay: 0.3s; }
.ps2-loading-dots span:nth-child(4) { animation-delay: 0.45s; }

@keyframes ps2-load-pulse {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50%       { opacity: 1;   transform: scale(1.15); }
}

.power-led {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7be878;
    vertical-align: middle;
    margin-right: 4px;
}

/* CRT BOOT OVERLAY */
#crt-boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #050514;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s;
}

#crt-boot-overlay.booted { opacity: 0; pointer-events: none; }

#crt-boot-overlay .crt-degauss {
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    animation: crt-degauss-flash 1.1s ease-out 1;
}

@keyframes crt-degauss-flash {
    0%   { opacity: 0; transform: scaleY(0.002); }
    6%   { opacity: 1; transform: scaleY(1.4); }
    18%  { opacity: 0.5; transform: scaleY(0.85); }
    30%  { opacity: 0.85; transform: scaleY(1.05); }
    45%  { opacity: 0.15; transform: scaleY(0.98); }
    100% { opacity: 0; transform: scaleY(1); }
}

#crt-boot-overlay .crt-scan-line {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    background: #ffffff;
    transform: translateY(-50%) scaleY(1);
    animation: crt-line-expand 0.5s ease-in 0.55s 1 both;
}

@keyframes crt-line-expand {
    0%   { transform: translateY(-50%) scaleY(1); opacity: 1; }
    70%  { transform: translateY(-50%) scaleY(140); opacity: 1; }
    100% { transform: translateY(-50%) scaleY(160); opacity: 0; }
}

#crt-boot-overlay canvas.crt-static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen; }
#crt-boot-overlay.stage-static canvas.crt-static { opacity: 0.85; animation: crt-static-flicker 0.12s steps(2) infinite; }
#crt-boot-overlay.stage-settle canvas.crt-static { opacity: 0.12; }

@keyframes crt-static-flicker {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(1.25); }
}

#crt-boot-overlay .boot-tower-field {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    padding-bottom: 20%;
    opacity: 0;
    transition: opacity 0.8s ease 0.9s;
}

#crt-boot-overlay.stage-towers .boot-tower-field { opacity: 1; }

#crt-boot-overlay .boot-tower {
    width: 10px;
    background: #5c9bff;
    border-radius: 2px 2px 0 0;
    animation: boot-tower-rise 1.6s ease-out infinite alternate;
}

@keyframes boot-tower-rise {
    from { height: 10px; opacity: 0.5; }
    to   { height: var(--tower-h, 60px); opacity: 1; }
}

#crt-boot-overlay .boot-label {
    position: relative;
    z-index: 2;
    font-family: 'Comic Sans MS', Arial, sans-serif;
    letter-spacing: 6px;
    font-size: 13px;
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.6s ease 1.2s;
}

#crt-boot-overlay.stage-towers .boot-label { opacity: 1; }

#crt-boot-overlay .crt-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, #050514 100%);
    z-index: 3;
}

#crt-boot-overlay .crt-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: repeating-linear-gradient(180deg, rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px, transparent 2px, transparent 3px);
}

#crt-boot-overlay .boot-skip {
    position: absolute;
    bottom: 12px;
    right: 16px;
    z-index: 4;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    letter-spacing: 1px;
    color: #a3aef0;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.4s ease 0.6s;
}

#crt-boot-overlay.stage-static .boot-skip,
#crt-boot-overlay.stage-towers .boot-skip,
#crt-boot-overlay.stage-settle .boot-skip { opacity: 0.7; }

#crt-boot-overlay .boot-skip:hover { opacity: 1; color: #ffffff; }

/* DJ LOGO */
.dj-logo-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    min-height: 250px;
    margin: 9px auto 13px auto;
    border: 3px outset #7ab8ff;
    background: #0b0b2e;
    padding: 13px;
    overflow: hidden;
}

.dj-logo-img { display: block; width: auto; height: auto; max-width: 250px; max-height: 250px; object-fit: contain; }
.dj-logo-placeholder.dj-logo-empty .dj-logo-caption { display: block; }
.dj-logo-placeholder.dj-logo-empty::before { content: '\25C8'; display: block; font-size: 20px; color: #5c9bff; margin-bottom: 4px; }

/* JAGGED DIVIDER */
.jagged-divider {
    height: 12px;
    margin: 13px 0;
    background:
        linear-gradient(135deg, #3355dd 25%, transparent 25%) 0 0/14px 14px,
        linear-gradient(225deg, #5c9bff 25%, transparent 25%) 0 0/14px 14px,
        linear-gradient(315deg, #b98cf0 25%, transparent 25%) 0 0/14px 14px,
        linear-gradient(45deg,  #e878d6 25%, transparent 25%) 0 0/14px 14px;
}

/* VMU BADGE */
.vmu-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 22px;
    background: #aabbcc;
    border: 1px outset #ccddee;
}

.vmu-badge::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 3px;
    background: #5fe0e8;
}

/* IMAGE PICKER */
#allImagesPicker img { height: 1.5em; max-width: 120px; width: auto; margin: 2px; vertical-align: middle; cursor: pointer; }
#preview img         { height: 1.5em; max-width: 120px; width: auto; vertical-align: middle; }

/* CHROME SWEEP */
.chrome-sweep { position: relative; overflow: hidden; }
.dither-noise  { position: relative; }

/* MOBILE */
@media (max-width: 768px) {
    .sidebar, .sidebar-right { display: none !important; }
    .page-layout { display: block; width: 100%; max-width: 100%; margin: 4px 0; padding: 0; }
    .main-col    { width: 100%; min-width: 0; }
    .frame       { border-left: none; border-right: none; }
    .tabs        { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab         { flex: 0 0 auto; white-space: nowrap; font-size: 11px; padding: 6px 11px; }
    .content     { padding: 12px; min-height: 0; }
    .music-rail  { display: none; }
    .music-tab-wrapper { display: block; }
    .gif-divider img   { max-width: 100%; height: auto; }
    .status-bar  { flex-direction: column; align-items: center; gap: 3px; font-size: 10px; }
    .twitch-tab-wrapper { flex-direction: column; align-items: stretch; }
    .twitch-rail { flex-direction: row; width: 100%; min-width: 0; justify-content: center; padding: 2px 0; }
    .twitch-rail-left, .twitch-rail-right { padding: 0; }
    .twitch-tab-content { padding: 0 2px; }
    .twitch-channels    { gap: 9px; padding: 7px 2px; }
    .twitch-channel-box { min-width: 170px; max-width: 210px; margin: 0 3px; }
    .mobile-status-widgets { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; margin: 11px 0 4px 0; justify-content: center; }
    .mobile-status-widgets .sidebar-box { flex: 1 1 130px; max-width: 48%; font-size: 12px; margin-bottom: 0; }
    .lowpoly-widget { padding: 9px 0; }
    #crt-boot-overlay .boot-tower-field { transform: scale(0.7); }
}

@media (min-width: 769px) { .mobile-status-widgets { display: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}