.mogger-modal .dropzone .dz-preview .dz-image {
    width: unset;
    height: unset;
}
.mogger-modal .dropzone .dz-preview .dz-image img {
    width: auto;
    height: 300px;
}

.dz-progress {
    display: none;
}

.dz-upload {
    display: none;
}
.dropzone .dz-preview.dz-image-preview {
    background: unset;
}

.dropzone {
    min-height: 10px !important;
}

.form-row .dz-remove, .mogger-modal .dz-remove {
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    border: 1px solid #50ff50 !important;
    border-radius; 10px;
    background: #000;
    margin-top: 10px;
    color: #50ff50;
    cursor: pointer;
    text-shadow: 0 0 1px #008020;
    transition: background 0.12s, color 0.12s, border 0.12s;
}


.mogger-modal .dropzone .dz-preview .dz-image {
    border-radius : 1px; 
}

.rating-form .dropzone {
    background: unset;
    border: 2px solid #222;
    border-radius: 20px !important;
    margin: 0px auto !important;
    min-height: unset;
}

.mogger-modal .dropzone { 
    background: unset;
    max-width: 250px;
    border: 2px solid #50ff50;
    border-radius: 5px;
    margin: 0px auto;
    min-height: unset;
}

.mog-score-avatar {
    border-radius: 3px; 
    height: 40px; 
    width: auto;
}

.scoreboard {
    display: flex;
    border: 1px solid #222;
    max-height: 240px;
    min-height: 240px;
    overflow-y: auto;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
}

.battle-info {
    font-size: 18px;
    color: red;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    align-self: center;
    flex: 0 0 210px;
    align-content: center;
    margin: 0px auto;
    font-weight: bold;
    font-family: "Fixedsys", sans-serif;
}

.battle-box {
  display: flex;
  justify-content: center;  /* space evenly across the screen */
  align-items: flex-start;  /* align top edges */
  gap: 50px;                /* spacing between the two moggers */
  width: 100%;
}


.mogscore {
    border-radius: 3px;
    padding: 5px 0px;
}

.mogscore .small-author-avatar {
    height:25px;
    width: auto;
}

.lost, .won {
    font-family: 'Fixedsys', sans-serif;
    font-size: 16px;
    font-weight: bold;
    margin: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lost {
    color: red;
}

.won {
    color: #50ff50;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.mogscore {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin: 5px 0;
    padding: 10px;
    width: 90%;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 3px;

    /*background: linear-gradient(
        180deg,
        rgba(255,255,255,0.03),
        rgba(0,0,0,0.05)
    );*/

    box-shadow: 
        inset 0 0 0 1px rgba(0,0,0,0.4),
        0 2px 6px rgba(0,0,0,0.6);
}

.yeh {
    border: 1px solid #50ff50;
    box-shadow: 0 0 3px #50ff50;
}

.meh {
    border: 1px solid red;
    box-shadow: 0 0 3px red;
}


.left-side, .right-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%; /* Ensuring both sides take up equal space */
}

.mogger-pic {
    position: relative;
    overflow: hidden;
    display: inline-block; /* Ensures container wraps the image tightly */

    position: relative;
    cursor: pointer;
  width: 40vw;    /* 40% of viewport width */
  height: 520px;
  position: relative;
}

.mogger-pic img {
    display: block;
    border-radius: 10px;
    object-fit: contain;
    transition: 0.30s ease;
  width: 100%;
  height: 100%;
}

/* TOP SHADOW (for Username and Chads) */
.mogger-pic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%; /* How far down the shadow goes */
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* BOTTOM SHADOW (for Wins and Losses) */
.mogger-pic::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%; /* How far up the shadow goes */
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.95) 0%,  /* Darker at the very edge */
        rgba(0, 0, 0, 0.7) 30%,  /* Stays dark a bit longer */
        rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.wins, .losts, .mogger-chads, .mogger-pic.thread-user {
    z-index: 5; /* This pushes them to the very front */
}

.mogger-chads {
    position: absolute;
    padding: 15px 10px; 
    font-family: 'Fixedsys', sans-serif;
    font-size: 20px;
    right: 10px;
    position: absolute;
}

.wins {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #50ff50; /* No quotes */
    font-family: 'Fixedsys', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Extra safety shadow */
}

.losts {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #EE4B2B; /* No quotes */
    font-family: 'Fixedsys', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

.message-time {
    margin: 0px 8px;  color: #888; font-size: 10px; font-family: 'Fixedsys', sans-serif;
}
.message-time.incoming  {
    text-align: right;
}
.message-delete-button {
    align-self: center !important;
    opacity: 0;
    cursor: pointer;
    margin-left:10px;
}

/* 1. Set the base state for the bubble */
/* 1. Define WHAT should transition and for HOW LONG */
.message-bubble {
    transition: transform 0.5s ease; /* This tells the browser: "Watch for transform changes" */
}

/* 2. Define the CHANGE on hover */
.message-row:hover .message-bubble {
    transform: scale(1.03); /* This triggers the 3% growth */
}

/* 3. The Delete Button logic */
.message-delete-button {
    opacity: 0;
    transition: opacity 0.5s ease; /* Matches the 0.5s timing */
}

.message-row:hover .message-delete-button {
    opacity: 1;
}


.ql-resize-handler {
    background-color: #222 !important;
}
.ql-resize-toolbar button {
    background-color: #111 !important;
}

.ql-container {
    font-family: monospace;
    font-size: 18px !important;
}
/* Container animation */
.typing-indicator {
    display: none; /* Controlled by JS */
    text-align: center;
    padding: 8px 12px;
    font-size: 16px;
    color: #666;
    animation: fadeIn 0.3s ease-in-out;
}

/* Fade in the whole bubble */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}


@keyframes typingPulse {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1.2); opacity: 1; }
}

.message-row:hover {
    transition: transform 0.15s ease, filter 0.15s ease;
}
.t-content a, .r-content a {
    color: red;
}
/* Each message line */
.message-row {
    margin-bottom: 10px;
    display: flex;
}

/* LEFT side (other user) */
.message-row.incoming {
    justify-content: flex-end;
}

/* RIGHT side (me) */
.message-row.outgoing {
    justify-content: flex-start;
}

/* Bubble itself */
.message-bubble {
    display: flex;
    gap: 8px;
    max-width: 65%;
    min-width: 40%;
    padding: 8px 10px;
    border-radius: 6px;
    background: #111;
    border: 1px solid #333;
    line-height: 1.5;
    word-wrap: break-word;
    font-size: 0.9em;
    margin:2px 5px;
    /* Remove the bubble-specific styling and alignment */
    align-items: center; /* 👈 vertical centering */
    align-self: unset; /* Remove previous flex alignment */
}

/* Incoming bubble style */
.message-row.incoming .message-bubble {
    background: #222;
    border-color: #444;
}

/* Outgoing bubble style */
.message-row.outgoing .message-bubble {
    background: #111;
    border-color: #111;
    text-align: left;
}

/* Text */
.message-text {
    font-family: monospace;
    font-size: 14px;
    word-break: break-word;
}

.message-text.deleted {
    color: #888;
    text-align: center;
    margin: 0px auto;
    align-self: center;
    justify-content: center;
    font-style: italic;
    font-weight: bold;
    text-decoration: line-through;
}
/* Avatar */
.author-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

/* DISLIKE active state */
.reply-dislike-btn.disliked {
    animation: dislike-pop 0.35s ease-out;
}

/* red glow */
.reply-dislike-btn.disliked img {
    filter: drop-shadow(0 0 6px rgba(255, 60, 60, 0.85));
}

/* pop + shake combo */
@keyframes dislike-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25) rotate(4deg); }
    55%  { transform: scale(0.95) rotate(-4deg); }
    75%  { transform: translateX(-3px); }
    90%  { transform: translateX(3px); }
    100% { transform: scale(1); }
}

/* shared button base */
.reply-like-btn,
.reply-dislike-btn,
.message-send-button,
.reply-reply-btn {
    display: flex; 
    gap: 5px; 
    align-items: center; 
    padding: 4px 8px; 
    border: 1px solid #222; 
    border-radius: 5px; 
    background: #18181b;
    transition: transform 0.15s ease, filter 0.15s ease;
    justify-content: center;
}

#mirinButton {
    transition: transform 0.15s ease, filter 0.15s ease;
    border-radius: 10px;
    background: unset !important;
}
#mirinButton:hover,
.reply-like-btn:hover,
.reply-dislike-btn:hover,
.reply-delete-btn:hover,
.reply-reply-btn:hover {
    transform: translateY(-2px) scale(1.08);
    filter: brightness(1.6);
}
#mirinButton:hover {
    background: black;
}

/* click = press down */
.reply-like-btn:active,
.reply-dislike-btn:active,
.reply-reply-btn:active {
    transform: scale(0.92);
}

.reply-delete-btn {
    margin-left: 10px; padding: 5px 5px; color: red; font-family: 'Fixedsys', sans-serif; font-size: 18px; border: 3px solid red; border-radius: 5px; font-weight: bold;
}

/* LIKE animation */
.reply-like-btn.liked {
    animation: like-pop 0.35s ease-out;
}
.reply-like-btn {
    color: #50ff50;
}
.reply-dislike-btn {
    color: red;
}

/* triangle pop */
@keyframes like-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35) rotate(-6deg); }
    70%  { transform: scale(0.95) rotate(3deg); }
    100% { transform: scale(1); }
}

/* optional glow when liked */
.reply-like-btn.liked img {
    filter: drop-shadow(0 0 6px rgba(0, 255, 120, 0.8));
}

/* DISLIKE shake (optional but fun) */
.reply-dislike-btn.shake {
    animation: dislike-shake 0.35s;
}

@keyframes dislike-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}


.reply-children {
    margin-left: 40px;
    border-left: 2px solid #222;
    padding-left: 15px;
}

.reply-header {
    display: flex;
    align-items: center;
    width: 100%;
}

/* LEFT */
.reply-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* CENTER */
.reply-center {
    gap: 52px;
    margin: 0 auto; /* THIS centers it */
}

/* RIGHT */
.reply-right {
    margin-left: auto; /* pushes time all the way right */
}

.quill-reply-quote {
    background: #1a1a1a;
    border-left: 4px solid white; /* Or your theme color */
    padding: 8px;
    margin: 10px 0;
    border-radius: 4px;
    color: #ccc;
    font-family: 'Fixedsys', monospace;
}

.quote-header {
    font-size: 12px;
    margin-bottom: 4px;
}

.quote-body {
    font-size: 13px;
    font-style: italic;
    /* Limit the height of the quote in the editor */
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reply-item {
    transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.reply-item.reply-highlighted {
    border-left: 3px solid #6aff6a;
    background: rgba(106, 255, 106, 0.06);
    transform: translateX(6px);
}

.compact-reply-embed {
    display: block;
    padding: 2px 4px;
    margin: 4px 0;
    border-left: 2px solid #3a3a3a;
    background: rgba(255, 255, 255, 0.04);
    font-family: 'Fixedsys', monospace;
    font-size: 13px;
}

.compact-reply-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.compact-reply-avatar {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    flex-shrink: 0;
}

.compact-reply-username {
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.compact-reply-preview {
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.ql-pickrer-options {
    background-color:black !important;
}

:root {
    /* === Base text styling === */
    --rating-weight: 800;
    --rating-spacing: 0.05em;

    /* === LTN (Slate → Silver) === */
    --ltn-low:  #4d4e50;
    --ltn-mid:  #8c8d8f;
    --ltn-high: #a5a6a8;

    /* === MTN (Electric Blue) === */
    --mtn-low:  #005073;
    --mtn-mid:  #107dac;
    --mtn-high: #189ad3;
    --mtn-glow: 0 0 5px rgba(99, 179, 237, 0.3);

    --htn-low:  #800000;
    --htn-mid:  #bf0000;
    --htn-high: #ff0000;
    --htn-glow: 0 0 8px #f56565;

    /* === CHADLITE (Amber → Gold) === */
    --chadlite-low:  #a67c00;
    --chadlite-mid:  #bf9b30;
    --chadlite-high: #ffbf00;
    --chadlite-glow:
        0 0 10px #ecc94b,
        0 0 20px rgba(236, 201, 75, 0.4);

    /* === CHAD (Pure White Luminescence) === */
    --chad-color: #9D00FF;
    --chad-weight: 900;
    --chad-spacing: 0.15em;
    --chad-glow:
        0 0 7px #fff,
        0 0 15px #fff,
        0 0 21px rgba(255, 255, 255, 0.5);

    --moderator-color: #50ff50;
    --moderator-weight: 900;
    --moderator-spacing: 0.15em;
    --moderator-glow:
        0 0 7px white;
        0 0 15px white;
        0 0 21px rgba(255, 255, 255, 0.5);

    --admin-color: cyan;
    --admin-weight: 900;
    --admin-spacing: 0.15em;
    --admin-glow:
        0 0 7px white;
        0 0 15px white;
        0 0 21px rgba(255, 255, 255, 0.5);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.LTN.LOW  { 
    --progress-bg: var(--ltn-low);
    --progress-fg: #fff;
}
.LTN.MID  { 
    --progress-bg: var(--ltn-mid);
    --progress-fg: #000;
}
.LTN.HIGH { 
    --progress-bg: var(--ltn-high);
    --progress-fg: #000;
}

.MTN.LOW  { 
    --progress-bg: var(--mtn-low);
    --progress-fg: #fff;
}
.MTN.MID  { 
    --progress-bg: var(--mtn-mid);
    --progress-fg: #fff;
}
.MTN.HIGH { 
    --progress-bg: var(--mtn-high);
    --progress-fg: #000;
}

.HTN.LOW  { 
    --progress-bg: var(--htn-low);
    --progress-fg: #fff;
}
.HTN.MID  { 
    --progress-bg: var(--htn-mid);
    --progress-fg: #000;
}
.HTN.HIGH { 
    --progress-bg: var(--htn-high);
    --progress-fg: #000;
}

.CHADLITE.LOW  { 
    --progress-bg: var(--chadlite-low);
    --progress-fg: #000;
}
.CHADLITE.MID  { 
    --progress-bg: var(--chadlite-mid);
    --progress-fg: #000;
}
.CHADLITE.HIGH { 
    --progress-bg: var(--chadlite-high);
    --progress-fg: #000;
}

.CHAD {
    --progress-bg: var(--chad-color);
    --progress-fg: #000;
}

.MODERATOR {
    --progress-bg: var(--moderator-color);
    --progress-fg: #000;
}
.ADMIN {
    --progress-bg: var(--admin-color);
    --progress-fg: #000;
}

.MTN.HIGH .level-progress-fill {
    box-shadow: 0 0 6px rgba(99, 179, 237, 0.35);
}
.HTN.HIGH .level-progress-fill {
    box-shadow: 0 0 8px rgba(245, 101, 101, 0.45);
}

/* === Rating text colors === */
.LTN.LOW  { color: var(--ltn-low); }
.LTN.MID  { color: var(--ltn-mid); }
.LTN.HIGH { color: var(--ltn-high); }

.MTN.LOW  { color: var(--mtn-low); }
.MTN.MID  { color: var(--mtn-mid); }
.MTN.HIGH { color: var(--mtn-high); }

.HTN.LOW  { color: var(--htn-low); }
.HTN.MID  { color: var(--htn-mid); }
.HTN.HIGH { color: var(--htn-high); }

.CHADLITE.LOW  { color: var(--chadlite-low); }
.CHADLITE.MID  { color: var(--chadlite-mid); }
.CHADLITE.HIGH { color: var(--chadlite-high); }

.CHAD { color: var(--chad-color); }

.MODERATOR { color: var(--moderator-color); }
.ADMIN { color: var(--admin-color); }

img.thread-av {
    border: 1px solid ;
    box-shadow: 0 0 5px inset;
}

img.author-avatar {
    border: 1px solid ;
    box-shadow: 0 0 5px inset;
}

img.small-author-avatar {
    border: 1px solid ;
    box-shadow: 0 0 5px inset;
}

img.inbox-compact-avatar {
    border: 1px solid ;
    box-shadow: 0 0 5px inset;
}

.user-identity {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This creates the equal vertical spacing */
    flex: 1;
}

.avatar-mirin-stack {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.radar-module-wrapper {
    flex: 0 0 350px; /* Fixed width for the radar */
    display: flex;
    align-items: center;
    justify-content: center;
}

#myChart {
    height: 330px;
    width: 400px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.progress-labels {
    display: flex;
    justify-content: space-between; /* 👈 THIS */
    margin-top: 4px;
}

.rating-min {
    text-align: left;
}

.rating-max {
    text-align: right;
}


/*.unread {
    border-left: 1px dashed white;
}
.read {
    border-left: 1px solid #50ff50;
}*/

.message-mark {
    width: 25px;
    height: 25px;
    padding: 5px 10px;
    margin-left: 15px;
}

.thread-content .small-author-avatar {
    max-width: 20px !important;
    max-height: 40px !important;
}

.thread-content .thread-author {
    font-size: 10px !important;
}

.thread-content .mention {
    padding: 3px 5px;
    font-size: 10px !important;
    border: 1px solid #222 !important;
}

.r-content {
    font-size: 16px;
    color: #ddd;
    overflow-wrap: break-word;

    padding: 10px 0px;
    text-align: left;
    overflow-wrap: break-word;
}

.r-content img {
    display: block;
    margin: 12px 10px;
    float: none !important;
    border: 1px solid white;
    max-height: 250px;
    width: auto !important;
    max-width: 100%;
    border-radius: 6px;
}


.r-content h1,
.r-content h2 {
    text-align: left;
    margin: 16px 0 12px;
}
.r-content h1 {
    font-size: 17px;
}
.r-content h2 {
    font-size: 16px;
}
.r-content h3 {
    font-size: 15px;
}


.t-cont {
    width: 72vw;
    margin: 5px auto;
    background-color: #0a0a0a;
    padding: 8px;
    color: #ddd;
    font-family: monospace;
    border: 1px solid #222;
    border-radius: 10px;

    /*background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--levelColor), black 90%),
        #0a0a0a
    );*/
}

.reply-content {
    padding: 16px;
    color: #ddd;
    font-family: monospace;
    border-radius: 10px;
}

.thread-hero {
    float: left;
    width: fit-content;
    margin-right: 20px;
    margin-bottom: 15px;
    padding: 8px;
    /*background: linear-gradient(90deg, #1a0008, #0a0a0a);*/
    border: 1px solid #222;
    border-radius: 6px;
}

.thread-hero.LOW.LTN, .profile-hero.LOW.LTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ltn-low), black 90%),
        #0a0a0a
    );
}

.thread-hero.MID.LTN, .profile-hero.MID.LTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ltn-mid), black 90%),
        #0a0a0a
    );
}

.thread-hero.HIGH.LTN, .profile-hero.HIGH.LTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--ltn-high), black 90%),
        #0a0a0a
    );
}

.thread-hero.LOW.MTN, .profile-hero.LOW.MTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mtn-low), black 90%),
        #0a0a0a
    );
}

.thread-hero.MID.MTN, .profile-hero.MID.MTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mtn-mid), black 90%),
        #0a0a0a
    );
}

.thread-hero.HIGH.MTN, .profile-hero.HIGH.MTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--mtn-high), black 90%),
        #0a0a0a
    );
}

.thread-hero.LOW.HTN, .profile-hero.LOW.HTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--htn-low), black 90%),
        #0a0a0a
    );
}

.thread-hero.MID.HTN, .profile-hero.MID.HTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--htn-mid), black 90%),
        #0a0a0a
    );
}

.thread-hero.HIGH.HTN, .profile-hero.HIGH.HTN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--high-htn), black 90%),
        #0a0a0a
    );
}

.thread-hero.LOW.CHADLITE, .profile-hero.LOW.CHADLITE {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--chadlite-low), black 90%),
        #0a0a0a
    );
}

.thread-hero.MID.CHADLITE, .profile-hero.MID.CHADLITE {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--chadlite-mid), black 90%),
        #0a0a0a
    );
}

.thread-hero.HIGH.CHADLITE, .profile-hero.HIGH.CHADLITE {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--chadlite-high), black 90%),
        #0a0a0a
    );
}

.thread-hero.CHAD, .profile-hero.CHAD {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--chad-color), black 90%),
        #0a0a0a
    ) ;
}

.thread-hero.MODERATOR, .profile-hero.MODERATOR {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--moderator-color), black 90%),
        #0a0a0a
    );
}
.thread-hero.ADMIN, .profile-hero.ADMIN {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--admin-color), black 90%),
        #0a0a0a
    );
}

.t-op-picrel {
    float: right;
    padding:8px
}

.t-picrel {
    max-width: 100%;
    height: auto;
    max-width: 320px;
    display: block;
    border: 2px solid #eee;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.t-content, .r-content {
    /*font-size: 15px;*/
    /*line-height: 1.6*/
    overflow-wrap: break-word;
}

.ql-resize-style-left {
    float: none !important;
      margin-left: 0;
      margin-right: auto;
}

.ql-resize-style-center{
    float: none !important;
  margin-left: auto;
  margin-right: auto;
}

.ql-resize-style-right {
    float: none !important;
  margin-left: auto;
  margin-right: 0;
}

.t-content img {
    display: block;
    margin: 12px auto;
    float: none !important;
    max-width: 100%;
    height: auto;
    max-height: 600px;
    border: 1px solid white;
    border-radius: 6px;
}

.t-content h1,
.t-content h2,
.t-content h3 {
    text-align: center;
    margin: 16px 0 12px;
}

.t-content {
    background: #0a0a0a;
    padding: 8px 16px;
    line-height: 1.3;
    overflow-wrap: break-word;
    /* visual centering */
    /*max-width: 820px;*/
}

.t-content {
    margin-left: auto;
    margin-right: auto;
    background: #0a0a0a;
    border-bottom: 2px solid #222;
}


@media (max-width: 768px) {
    .leaderboard-container {
        display: none;
    }
    .logout {
        display: none !important;
    }
    
    .normie-avatar {
        display: none;
    }
    /* Kill floats */
    /*.thread-hero,*/
    .t-title {
        font-size: 18px !important;
        margin-bottom: 10px;
    }
    .t-op-picrel {
        float: none;
        width: 100%;
        margin: 0 0 12px 0;
    }

    /* Author block full width */
    /*.thread-hero {
        display: flex;
        align-items: center;
        gap: 12px;
    }*/

    .thread-avatar-section {
        padding: 8px !important;
    }

    /* Picrel centered */
    .t-op-picrel {
        text-align: center;
        max-width: 100%;
    }

    .t-picrel {
        max-height: 320px;
        margin: 0 auto;
    }


    /* Content becomes full width */
    .t-content {
        width: 100%;
        margin: 0px auto !important;
        padding: 0px 0px !important;
        font-size: 14px;
    }


    .t-content h1,
    .t-content h2,
    .t-content h3 {
        text-align: center;
        margin: 12px 0 8px;
    }

    .t-content h1 {
        font-size: 17px;
    }
    .t-content h2 {
        font-size: 16px;
    }
    .t-content h3 {
        font-size: 15px;
    }

    .t-cont {
        width: 98%;
        padding: 2px !important;
    }

    /* Content images */
    .t-content img {
        max-width: 100%;
        max-height: 320px;
        max-width: 300px !important;
    }
    .t-content iframe {
        max-width: 300px !important;
    }

    r-content {
        font-size: 13px;
    }
    .r-content img {
        max-height: 120px;
    }

    .t-content {
        max-width: 100%;
        padding: 12px 14px;
        margin: 0;
    }
    .thefuckingstats {
        text-align:center;
    }
}

.t-header {
    padding: 15px 25px;
    padding-top: 0px;
    align-items: center;
    text-align: center;
}

.ql-snow .ql-stroke {
    stroke: white !important;
}
.ql-snow .ql-fill {
    fill: white !important;
}

.mention a {
    color: unset;
}

span.ql-mention-denotation-char {
    display: none !important;
}

.mention {
    display: inline-flex;     /* KEY FIX */
    align-items: center;
    gap: 5px;

    font-family: monospace;
    font-size: 14px;
    color: white;
    line-height: 1.42;

    background-color: #080808;
    border: 2px solid white;
    border-radius: 5px;

    padding: 4px 8px;
    margin-right: 2px;

    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.mention .small-author-avatar {
    max-height: 50px;
}

.thread-user {
    display: inline-flex;   /* NOT flex */
    align-items: center;
    gap: 5px;
}


.user-info {
    display: grid; 
    text-align: left;
}

.ql-talention-list-item {
    line-height: unset;
}

.ql-mention-list-item {
    padding: 10px 20px !important;
    line-height: 18px;
    background-color: #060606;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
    user-select: none;        /* better for mentions */
    white-space: nowrap;
    line-height: 1.42;
}

.ql-mention-list-item.selected {
    background: #222;
}

.ql-mention-list-item:hover {
    transform: scale(1.12);
    transition: 0.1s ease-in-out;
}

/*.ql-mention-list-item.selected {
    background-color: black;
    transform: scale(1.12);
}*/
.ql-align-center {
    text-align: center;
}

.t-content .ql-align-center {
    /*display: flex;
    flex-direction: column;*/
}

/*.t-content p {
    display: flex;
    flex-direction: column;
}*/

.ql-align-left {
    text-align: left;
}

.ql-align-right {
    text-align: right;
}

.t-title {
    margin-top: 20px; 
    font-size: 22px;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
}

.pagination .reply {
    width: 66%;
}
/* --- NEW GRID LAYOUT --- */
.container {
    width: 90%;
    margin: 0 auto;
    color: white;
    font-family: 'Fixedsys', sans-serif;
}

::-webkit-scrollbar {
    width: 2px;
    background: black;
}

::-webkit-scrollbar-thumb {
    background: white;
    border-radius:50px;
}

::-webkit-scrollbar-track {
    background-color: black;
}

/* Base for username */
.author-name {
  font-family: 'Fixedsys', sans-serif;
  font-size: 16px;
  font-weight: bold;
  transition: color 0.3s, text-shadow 0.3s;
  position: relative;
}

/* Avatar borders */
.author-border {
  border-radius: 6px;
  transition: border-color 0.3s;
}
/* author ratings — text only, minimal and confident */

/* Less Than Nothing — faint, washed-out white */
.author_rating_LTN {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
  letter-spacing: 0.3px;
}

/* More Than Nothing — soft blue tone, calm */
.author_rating_MTN {
  color: #60a5fa; /* blue-400 */
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* Higher Than Nothing — clean violet tone */
.author_rating_HTN {
  color: #a78bfa; /* purple-400 */
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* CHAD-LITE — confident orange-red, strong but not aggressive */
.author_rating_CHADLITE {
  color: #f97316; /* orange-500 */
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* CHAD — dominant deep red tone, sharp presence */
.author_rating_CHAD {
  color: #ef4444; /* red-500 */
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* notifications */
.notification_type_1 { /* STREAK_CONTINUES */
  border: 2px solid #facc15; /* warm yellow */
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.5);
  background: rgba(250, 204, 21, 0.1);
}

.notification_type_2 { /* STREAK_LOST */
  border: 2px solid #ef4444; /* red */
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.notification_type_3 { /* FOLLOWER */
  border: 2px solid #3b82f6; /* blue */
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.08);
}

.notification_type_4 { /* CHADS */
  border: 2px solid #10b981; /* green */
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

.notification_type_5 { /* NEW_LEVEL */
  border: 2px solid #8b5cf6; /* purple */
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.08);
}

.notification_type_6 { /* UNLOCKED */
  border: 2px solid #f97316; /* orange */
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
  background: rgba(249, 115, 22, 0.08);
}

.notification_type_7 { /* REPLY */
  border: 2px solid #06b6d4; /* cyan */
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
  background: rgba(6, 182, 212, 0.08);
}


.notification_type_1:hover,
.notification_type_2:hover,
.notification_type_3:hover,
.notification_type_4:hover,
.notification_type_5:hover,
.notification_type_6:hover,
.notification_type_7:hover {
  transform: scale(1.01);
  transition: 0.1s ease-in-out;
}


.progress-fill-level-0 { background-color: #666; }
.progress-fill-level-1 { background-color: #d4af37; }/*animation: fillPulse 3s infinite; }*/
.progress-fill-level-2 { background-color: #ff3b3b; }/*animation: fillPulse 2.5s infinite; }*/
.progress-fill-level-3 { background-color: #9b30ff; }/*animation: fillPulse 2.2s infinite; }*/
.progress-fill-level-4 { background-color: #3a9eff; }/*animation: fillPulse 2s infinite; }*/
.progress-fill-level-5 { background-color: #ff0050; }/*animation: fillPulse 1.8s infinite; }*/
.progress-fill-level-6 { background-color: var(--levelColor); }/*animation: fillPulse 1.6s infinite; }*/
.progress-fill-level-7 { background-color: #ff6f00; }/*animation: fillPulse 1.4s infinite; }*/
.progress-fill-level-8 { 
  background-color: #8B0000;
  box-shadow: 0 0 12px #8B0000, 0 0 18px #550055 inset;
  animation: fillPulse 1.2s infinite;
}

/* Progress text overlay */
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 4px #000;
  pointer-events: none;
}


/* RANKING */

/*.container {
  position: relative;
  width: 95%;
  margin: 0 auto;
  padding: 0; }

#right { 
    float: right;
    flex: 1;
    color: white;
}

#right .supp-grid {
    max-height: 255px;
    overflow-y: auto;
    margin-top: 0px;
}

#left {
    float: left;
    flex: 1;
    font-size: 15px;
    font-family: 'Fixedsys', sans-serif;
    color: white;
    display: flex;
    height: 10px;
    flex-direction: column;
    text-align: center;
}*/

@font-face { 
    font-family: 'Fixedsys';
    src: url('./ttf/fixedsys.ttf');
}

@font-face {
  font-family: 'TerminalVector';
  src: url('./ttf/terminalvector.ttf');
}

body {
  font-family: 'Fixedsys', sans-serif;
  font-size: 18px;
  background: #060606;
  color: white;
  margin: 0px;
  padding: 0px; }

a {
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

a:hover {
  color: #ec0000;
}

/*h1 {
  font-size: 28px;
  margin: .4em 0px;
  color: #8b0000;
  padding: 0px;}*/

input, textarea {
  display: inline-block;
  /*border: 1px solid darkred;*/
  outline: none;
  background: white; }

.full-box {
  padding: 15px;
  box-sizing: border-box;
  margin: 20px 0px; }
  .full-box h1 {
    margin-top: 0px; }

.action-button {
  display: inline-block;
  background: darkred;
  color: white;
  padding: 10px 15px;
  text-transform: uppercase;
  margin-top: 25px;
  border: 0px;
  font-family: "Fixedsys", sans-serif;
  font-size: 14px;
  cursor: pointer; }
  .action-button:hover {
    background: #970302;
    color: white; }


.nav {
  background-color: #060606;
  padding: 0px 10px;
  /*border-bottom: 5px solid darkred;*/
  /*line-height: 56px;*/
  height: 60px; }
  .nav a.title {
  font-size: 24px; }
  .nav .left { 
      text-align: left; } 
  .nav .right {
    text-align: right; }
  .nav .center {
      font-size: 15px;
      text-align: center; }
    @media only screen and (max-width: 480px) {
      .nav .right {
        display: none; } 
      .nav .left {
        display: none; } }
  .nav .mobile-menu {
    display: none; }
    @media only screen and (max-width: 480px) {
      .nav .mobile-menu {
        display: block;
        text-align: right;
        float: right; } }
  .nav:after {
    content: " ";
    display: block;
    clear: both; }

    /* ─────────── THREAD POSTS ─────────── */
.reply { 
    margin: 0 auto;
    /*width: 50%;*/
    font-size: 12px;
    vertical-align: middle;
    font-family: monospace;
    text-align: center;          /* center the GIF */
    /*border: 1px solid darkred;*/
    background-color: black;
} 

.reply textarea { 
    max-width: 100%;
    min-width: 100%;
    font-size: 12px;
    color: white;
    box-sizing: border-box;
    background: #060606;
} 
.reply .popup_button { 
    color: black;
    /*border: 4px solid darkred;*/
    text-transform: uppercase;
    /*background-color: darkred;*/
    width: 50%;
}

.file-input {
  color: darkred;
  background: black;
  width: 50%;
}

.file-input::file-selector-button {
  background: black;
  color: white;
  border: none;
  padding: 4px 10px;
  cursor: pointer;
  font-family: 'Fixedsys', sans-serif;
  text-transform: lowercase;
}

.file-input::file-selector-button:hover {
  background: darkred;
}

.form-row {
  display: flex;
  align-items: center;
}


/*.board-nothing {
  text-align: center; }*/

.stats {
  margin-top: 5px;
  width: 60%;
  margin: 0px auto;
  padding: 15px; }
  .stats p {
    margin: 0px; }
    .stats p:nth-child(1) {
      margin-bottom: 10px; }

.small-author-avatar {
  vertical-align: middle;
  max-width: 30px;
  max-height: 30px; }

.stats-card {
    background-color: #060606;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px;
    color: white;
    border: 1px solid #8B0000;
}

.header {
    display: flex;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #8B0000;
}

.avatar img {
    width: 100%;
    height: 100%;
}

.stats-info {
    flex: 1;
    margin-left: 15px;
}

.username {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: white;
}


.progress-fill {
    height: 100%;
    position: relative;
}

.progress-text {
    color: white;
    position: absolute;
    width: 100%;
    text-align: center;
    font-weight: bold;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 14px;
}

.stats {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.stat-item {
    text-align: center;
    font-size: 14px;
}

.stat-icon {
  font-size: 20px;
  display: block;
  margin-bottom: 5px;
  color: #8B0000;
}

.stat-value {
  font-weight: bold;
  color: white;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center; /* center base alignment */
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.nav-left,
.nav-right {
  position: absolute;
  font-size: 20px;
  top: 0;
  height: 100%;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.nav-left {
  left: 60px; /* distance from left edge */
}

.nav-right {
  right: 60px; /* distance from right edge */
}

.nav-right a { 
    color: white;
}

.nav-right a:hover {
    color: red;
}

.nav-center {
  align-items: center;
  justify-content: center;
}

.nav-logo img { 
  height: 38px;
  width: auto;
  display: block;
}
.nav-gif {
    display: block;
    height: 60px;
    width: auto;
}

.nav-right img {
    width: 31px;
    height: auto;
}

.divider {
  color: white;
  font-size: 11px;
}


.board-title {
    color: white;
    cursor: pointer;
}

.board-title.IQPILL.active {
    color: #ff0000 !important;
    /*text-shadow: 0 0 2px #ff0000;*/
}

.board-title.OFF-TOPIC.active {
    color: #5fd75f !important;
    /*text-shadow: 0 0 2px #5fd75f;*/
}

.board-title.BOTB.active {
    color: #08bcc2 !important;
    /*text-shadow: 0 0 2px #ffa500;*/
}
.board-title.MARKET.active {
    color: #50ff50 !important;
    /*text-shadow: 0 0 2px #ffa500;*/
}



.board-title_1:hover {
    color: #FFEB00;

}

.board-title_2:hover {
    color: #ff0000;
}

.board-title_3:hover {
    color: #5fd75f;
}

.board-title_4:hover {
    color: #08bcc2;
}

.board-title_5:hover {
    color: #50ff50;
}

.thread-board-title_1 {
  color: #FFD700;
}

.thread-board-title_2 {
  color: #ff0000;
  /*text-shadow: 0 0 10px red;*/
}

.thread-board-title_3 {
  color: #5fd75f;
  /*text-shadow: 0 0 10px #5fd75f;*/
}

.thread-board-title_4 {
  color: #08bcc2;
  /*text-shadow: 0 0 10px #ffa500;*/
}


.thread-user {
  display: flex;
  align-items: center;
  gap: 5px;
}

.thread-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: monospace;
  justify-content: center; /* center threads horizontally */
  align-items: flex-start;  /* keeps top alignment */
  vertical-align: middle;
}

.thread-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    margin-bottom: 15px;
}

.thread-header {
  display: flex;
  font-family: 'Fixedsys', sans-serif;
  font-size: 16px;
  align-items: center;
  margin-bottom: 3px;
  gap: 5px;
}

.mention-thread-author {
  font-family: 'Fixedsys', sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
}


.thread-author {
  font-family: 'Fixedsys', sans-serif;
  font-size: 11px;
  text-decoration: none;
}

.thread-card {
  width: 325px;
  background-color: #000;
  /*border: 1px solid darkred;*/
  color: white;
  text-align: center;
  transition: all 0.10s ease-in-out;
}

.thread-card:hover {
  border: 2px solid #ec2000;
  transform: scale(1.01);
}

.picrel {
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
}

.picrel img {
  max-width: 200px;
  max-height: 160px;
  display: block;
}

.thread-info {
  text-align: center;
}

.thread-title {
  font-size: 14px;
  /*border-top: 1px solid red;*/
  /*border-bottom: 1px solid red;*/
  display: inline-block;
  word-break: break-word;
  white-space: normal;
  overflow: hidden;
}

.gif-and-triad {
    position: relative;

}

.board-header {
    vertical-align: middle;
    text-align: center;          /* center the GIF */
    margin-bottom: 10px;         /* spacing between GIF and threads */
}

.board-header .board-description {
    margin-top: 10px;
    width: 350px;                /* fixed width */
    height: 100px;                /* maintain aspect ratio */
    /*border: 2px solid red;      */
    border-radius: 2px;          /* optional: slightly rounded corners */
    display: inline-block;       /* ensure centering works */
}

.board-triad-triad {
    position: absolute;
    width: 120px;                /* fixed width */
    height: auto;                /* maintain aspect ratio */
}
.thread-box {
  background: #060606;
  border: 1px solid #700000;
  width: 100%;
  max-width: 260px;
  color: white;
  font-size: 13px;
  padding: 6px;
  box-sizing: border-box;
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}

.thread-box:hover {
  border-color: #ec0000;
  background: #0a0a0a;
}

.thread-box img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border: 1px solid #700000;
  border-radius: 2px;
  margin-bottom: 5px;
}

/* Thread container */
.thread-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
/* Quick reply popup */
#quickReplyPopup {
  bottom: 10px;
  right: 10px;
  background: #0a0a0a;
  border: 2px solid black;
  padding: 10px;
}

/* Quick reply header */
#quickReplyPopup .reply-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 5px;
}

#quickReplyPopup:disabled {
  bottom: 10px;
  color: black;
  right: 10px;
  background: #0a0a0a;
  border: 2px solid black;
  padding: 10px;
}

.sort-link {
    color: #444;
    text-decoration: none;
    font-size: 16px;
}

.sorts {
    margin-top: 10px;
}
.main-notification {
    text-align: center;
    font-family: monospace;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 10px;
    font-size: 10px;
}

.notification {
    max-height: 220px;
    overflow-y: auto;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 400px;
    border: 2px solid darkred;
    z-index: 999;
}

.message-container {
  width: 70%;
  margin: 30px auto;
  border: 2px solid #a00;
  background-color: #060606;
  color: #fff;
  display: flex;
  justify-content: center;
  font-family: monospace;
  box-sizing: border-box;
}

.inbox {
  display: flex;
  width: 100%;
  max-height: 768px;
  overflow-y: auto;
  border: 3px solid red;
  box-sizing: border-box;
}

/* LEFT PANEL */
.inbox-list {
  width: 30%;
  border-right: 2px solid red;
  padding: 15px;
  overflow-y: auto;
  max-height: 600px;
  box-sizing: border-box;
}

.inbox-item:hover {
  /*background-color: rgba(255, 0, 0, 0.1);*/
}

.inbox-username {
  font-size: 12px;
  color: #ff2222;
  text-decoration: none;
}

.inbox-time {
  font-size: 10px;
  color: #777;
}

/* RIGHT PANEL */
.chat-area {
    font-size: 14px;
    flex-direction: column-reverse;

  flex: 1;
  display: flex;
  flex-direction: column;
  border-left: 2px solid red;
  padding: 20px;
  position: relative;
  box-sizing: border-box;
}

.messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
    flex-direction: column-reverse; /* This flips the container */
  gap: 10px;
}

.message-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  color: #fff;
  width: fit-content;
  max-width: 70%;
  margin-bottom: 10px;
  border: 1px solid #666;
  border-color: #666;
}

.message-card-me {
  align-self: flex-end;
  color: #fff;
  padding: 10px;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid red;
  width: fit-content;
  max-width: 70%;
  margin-bottom: 10px;
}

/* CHAT INPUT */
.chat-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}

.chat-input textarea {
  flex: 1;
  background-color: #111;
  border: 1px solid red;
  color: #fff;
  resize: none;
  padding: 10px;
  height: 60px;
}

.chat-input button {
  background-color: #a00;
  border: 1px solid red;
  color: white;
  font-weight: bold;
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.2s;
}

.chat-input button:hover {
  background-color: #ff0000;
  transform: scale(1.05);
}

.empty {
  color: #666;
  text-align: center;
  margin-top: 40px;
  font-style: italic;
}

/* 🌑 RESPONSIVE ADAPTATION */
@media (max-width: 1024px) {
  .message-container {
    width: 95%;
  }

  .inbox-list {
    width: 35%;
  }
}

@media (max-width: 1526px) {
    .container {
        width: 100%;
    }

    user-profile-container {
        width: 95%;
        margin: 0px;
    }
  .inbox {
    flex-direction: column;
    border: none;
  }

  .inbox-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid red;
    max-height: 300px;
  }

  .chat-area {
      max-height: 300px;
      overflow-y: auto;
    width: 100%;
    border-left: none;
    border-top: 1px solid red;
    padding: 10px;
  }

  .message-bubble {
    max-width: 90%;
    font-size: 12px;
  }

  .chat-input {
    flex-direction: column;
    align-items: stretch;
  }

  .chat-input textarea {
    height: 80px;
  }

  .chat-input button {
    width: 100%;
    padding: 12px;
  }
  .message-container {
    margin: 20px auto;
    border-width: 1px;
  }
}

@media (max-width: 768px) {
    .reply-delete-btn {
        margin-left: 0px;
        border: 1px solid red;
        font-size: 16px;
        padding: 0px 4px;
        vertical-align: middle;
        align-self: center;
    }
    .reply-delete-x-btn {
        vertical-align: middle;
        align-self: center;
    }
    .reply-user .reply-time {
        display: none;
    }

  .t-title {
      font-size: 17px !important;
      width: 100% !important;
  }

    .thread-hero {
        float: unset !important;
        width: unset !important;
        margin: 0px auto !important;
    }

    .t-header .thread-hero {
        font-size: 14px !important;
    }
    .t-header .thread-hero img {
        width: 80px;
        height: auto;
    }
    .reply-children {
        margin-left: 1px;
        padding-left: 1px;
    }
}

@media (max-width: 480px) {
  .inbox-item {
    padding: 6px;
  }

  .inbox-username {
    font-size: 11px;
  }

  .chat-area {
    padding: 8px;
  }

  .chat-input textarea {
    font-size: 12px;
  }

  .message-bubble {
    font-size: 11px;
  }
}

/* --- COMPACT INBOX FOR INDEX PAGE --- */
#left .inbox {
  display: block;
  border: none;
  width: 100%;
}

#left .inbox-list {
  width: 100%;
  border: none;
  padding: 0;
}

.inbox-item-compact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 0, 0, 0.2);
  text-decoration: none;
  color: white;
  transition: background 0.2s ease;
}

.inbox-item-compact:hover {
  background-color: rgba(255, 0, 0, 0.08);
}

.inbox-meta-compact {
  display: flex;
  flex-direction: column;
  flex: 1;
  display: flex;
  flex-direction: column;
  font-family: monospace;
  line-height: 1.2;
  overflow: hidden;
}

.inbox-topline {
  display: flex;
  font-size: 11px;
  color: #f55;
}

.inbox-message-snippet {
  font-size: 11px;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbox-time {
  font-size: 9px;
  color: #777;
  text-align: right;
  margin-top: 2px;
}

/* make avatars smaller and aligned */
#left .small-author-avatar {
  width: 20px;
  height: 20px;
}
/* --- Compact index-page inbox overrides (target #left) --- */
#left .inbox-compact-wrapper {
  width: 100%;
  max-width: 50px !important;
  box-sizing: border-box;
  padding: 6px 8px;
  font-family: monospace;
  color: #fff;
}

#left .inbox-compact-header {
  text-decoration: none;
  color: white;
  font-family: 'Fixedsys',sans-serif;
}


#left .inbox-compact-header:hover {
    color: red;
}

/* list container */
.sidebar-left .inbox-compact-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 175px;
  overflow-y: auto;
  padding-right: 4px; /* space for scrollbar */
}

/* each compact row (link) */
#left .inbox-compact-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: background 0.12s ease, transform 0.08s ease;
}

/* hover */
#left .inbox-compact-item:hover {
  background: rgba(255,0,0,0.06);
}

/* avatar */
#left .inbox-compact-avatar {
  width: 36px;            /* slightly larger for index to be readable */
  height: 36px;
  object-fit: cover;
  flex: 0 0 36px;
  margin-top: 2px;
}

/* body */
#left .inbox-compact-body {
  display: flex;
  flex-direction: column;
  min-width: 0; /* allow ellipsis */
  text-align: left;
  flex: 1 1 auto;
}

/* top row: name | rating  and last seen aligned right */
#left .inbox-compact-body .compact-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

/* name and rating */
#left .compact-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
}

/* last seen on same line (right) */
#left .compact-lastseen {
  font-size: 10px;
  color: #9b9b9b;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* last message preview: single line, ellipsis */
#left .compact-message {
  font-size: 12px;
  color: #cfcfcf;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* created-on timestamp — small, right-aligned in its own row */
#left .compact-ts {
  margin-top: 4px;
  font-size: 10px;
  color: #888;
  white-space: nowrap;
}

/* empty placeholder */
.inbox-compact-empty {
  color: #666;
  padding: 12px;
  font-size: 15px;
  text-align: center;
}

/* make sure compact overrides supersede other rules */
#left .inbox-compact-list,
#left .inbox-compact-item,
#left .inbox-compact-body { box-sizing: border-box; }

/* Responsive: if index column gets narrower, shrink avatar and fonts */
@media (max-width: 640px) {
  #left .inbox-compact-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
  #left .compact-name { font-size: 12px; }
  #left .compact-message { font-size: 11px; }
  #left .compact-lastseen, #left .compact-ts { font-size: 9px; }
}

.avatar-label {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none; /* so hover still works */
}

.avatar-label:hover .avatar-overlay {
  opacity: 1;
}

.theme-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.theme-link {
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid;
  cursor: pointer;
  opacity: 0.6;
  transition: all 0.25s ease;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
}

.theme-link.white {
  border-top-color: white;
}

.theme-link.red {
  border-top-color: #ff1a1a;
}

.theme-link:hover {
  opacity: 1;
  transform: scale(1.15);
}

.theme-link.active {
  opacity: 1;
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px currentColor);
}

.supp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center; /* center threads horizontally */
  align-items: flex-start;  /* keeps top alignment */
  vertical-align: middle;
  margin-top: 10px;
}


.supp-container {
  width: 200px;
}

/* CLEAN, FAST CARD */
.supp-card {
  width: 200px;
  background: #000;
  border: 1px solid #00d040; /* green but subtle */
  box-sizing: border-box;
  color: white;
  text-align: center;
  padding-bottom: 8px;
  background: var(--glass-bg);
    backdrop-filter: blur(10px);
  transition: transform 0.12s ease-in-out;
  box-shadow: 0 0 5px green inset;
    border: 3px solid #50ff50;
    border-radius: 10px;
}

.supp-card:hover {
  transform: scale(1.02);
  border-color: #00ff60;
}

.supp-image img {
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid #00c040;
}

/* LIGHTWEIGHT TEXT SHADOW */
.supp-name {
  margin-top: 8px;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 0 2px #009020; /* cheap, barely costs anything */
}

.supp-chads {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 10px;
}
/* COLORS FOR CHADS */
.chads-green {
  color: #00ff60;
  text-shadow: 0 0 1px #008020;
}

.chads-yellow {
  color: #ffe600;
  text-shadow: 0 0 1px #5a4c00;
}

.chads-red {
  color: #ff3b3b;
  text-shadow: 0 0 1px #600000;
}


/* BUTTON — SQUARE, LIGHT */
.buy-button-wrapper {
  padding: 0 8px;
}

.buy-button {
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  padding: 6px;
  border: 2px solid #00d040;
  background: #000;
  font-family: 'Fixedsys', sans-serif;
  font-size: 19px;
  color: #00d040;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 0 20px #008020;
  transition: background 0.12s, color 0.12s, border 0.12s;
}

.buy-button:hover {
  background: #00d040;
  color: #000;
  border-color: #00ff60;
}

/* DISABLED */
.buy-button:disabled {
  cursor: not-allowed;
  color: #ff3b3b;
  border-color: red;
  background: #000;
  text-shadow: 0 0 1px #600000;
}

.profile-wrapper {
    width: 80%;
    margin: 0 auto;
    display: block;
    color: #e2e2e2;
    font-family: monospace;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #333;
}

.profile-header-left {
    display: flex;
    gap: 15px;
}

.avatar-box {
    position: relative;
    width: 110px;
    height: 110px;
}

.avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.change-avatar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    background: rgba(0,0,0,0.7);
    font-size: 12px;
    padding: 3px 0;
    opacity: 0;
    transition: 0.2s ease;
}

.avatar-box:hover .change-avatar {
    opacity: 1;
}

.userinfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.username {
    font-size: 22px;
    font-weight: bold;
}

.substats {
    font-size: 13px;
    margin-top: 3px;
    color: #aaa;
}

/* Compact progress bar */
.progress-bar {
    width: 140px;
    height: 6px;
    background: #111;
    margin-top: 8px;
}

.progress-bar div {
    height: 100%;
    background: #aaa;
}

/* follow/message buttons */
.flat-btn {
    padding: 6px 12px;
    background: #111;
    color: #fff;
    border: 1px solid #444;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0;
    transition: 0.15s;
}

.flat-btn:hover {
    background: #222;
}

.profile-content-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.section {
    padding: 10px;
    border: 1px solid #333;
    border-radius: 0;
}

.section-title {
    font-size: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
}

.stats-list {
    padding-left: 15px;
    font-size: 12px;
    margin-top: 5px;
}

.about-text {
    font-size: 13px;
    line-height: 1.4em;
}

/* radar box */
.radar-box {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    height: 230px;
}

/* Main box */
#notifBox {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease-out; /* Add transform transition */
    position: fixed;
    bottom: 12px;
    right: 12px;

    width: 360px;
  /*max-width: 95%;*/
    max-height: 270px;

    z-index: 9999;

    display: flex;
    gap: 20px;
    flex-direction: column; 
    transform: translateX(100%);

    overflow: hidden;
    font-family: monospace;
}

#notifBox.active {
    opacity: 1;
    transform: translateX(0%);
}

#notifBox.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%); /* Stays off-screen */
}/* Header */

.notif-header {
  padding: 8px 10px;
  background: #111;
  border-bottom: 1px solid #222;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notif-title {
  color: white;
  font-size: 14px;
  letter-spacing: 1px;
}

.notif-close {
  color: red;
  font-size: 14px;
  text-decoration: none;
  font-weight: bold;
}

/* List */
.notif-list {
  overflow-y: auto;
}

/* Single notification */
.notif-item:hover {
  background: #111;
}

/* Time */
.notif-time {
  font-size: 11px;
  color: #888;
  margin-bottom: 3px;
}

.notif-time .notif-close {
    text-align: right;
}

/* Avatar + message layout */
.notif-main {
  display: flex;
  gap: 10px;
  align-items: center;
}

.notif-avatar {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 1px solid #333;
}

/* Author name */
.notif-author {
  /*color: white; */
  font-size: 13px;
  margin-bottom: 3px;
}

/* Message */
.notif-message {
  font-size: 12px;
  /*color: #0f0;*/
  color: white;
  line-height: 1.2;
}

.nav {
  background-color: #050505;
  padding: 0 12px;
  border-bottom: 5px solid #eee;
  display: flex;
  align-items: center;
  position: relative;
}

.nav-left {
  position: absolute;
  top: 0;
  left: 60px;
  height: 100%;
  display: flex;
  align-items: center;
}

.user-status {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 19px;
  color: white;
  font-family: inherit; /* keep your system font */
}

.user-status.guest {
  opacity: 0.7;
}


/* chads = white text */
.user-chads {
  color: white;
  font-weight: 600;
}

/* chad icon */
.chad-icon {
  width: 18px;
  height: auto;
  vertical-align: middle;

  /* Base color enhancement */
   /* Glow animation */
}

.chad-icon.light {
   filter: brightness(1.1) contrast(1.1)
          drop-shadow(0 0 2px rgba(255, 200, 80, 0.8))
          drop-shadow(0 0 2px rgba(255, 180, 50, 0.6));

}

.chad-icon.soyglow {
  animation: goldGlow 2s ease-in-out infinite;
}

@keyframes goldGlow {
  0% {
    filter: brightness(1.15) contrast(1.15)
            drop-shadow(0 0 3px rgba(255, 200, 80, 0.6))
            drop-shadow(0 0 6px rgba(255, 170, 60, 0.4));
  }
  50% {
    filter: brightness(1.35) contrast(1.3)
            drop-shadow(0 0 6px rgba(255, 215, 100, 1))
            drop-shadow(0 0 12px rgba(255, 190, 80, 0.8));
  }
  100% {
    filter: brightness(1.15) contrast(1.15)
            drop-shadow(0 0 3px rgba(255, 200, 80, 0.6))
            drop-shadow(0 0 6px rgba(255, 170, 60, 0.4));
  }
}


.mirin-icon {
    display: block;
    border-radius: 20px;
    width: 200px;
    vertical-align: middle;
    margin: 0px auto;
    height: auto;
    margin: 0px auto;
    filter: brightness(1.2) contrast(1.2);
}

/* mobile */
@media only screen and (max-width: 480px) {
  .nav-left {
    left: 10px;
    transform: scale(0.9);
    transform-origin: left center;
  }
}

/* Error Messages */

/*.avatar-section {
    display: flex;
    position: relative;
    flex-shrink: 0;
    width: 200px; 
    height: 200px;
}*/


.avatar-label { cursor: pointer; display:block; position:relative; }
.avatar-overlay {
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.6);
    color: #ff5b5b;
    font-size: 0.75em;
    text-transform:uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity .18s ease;
    border-radius:6px;
}
.avatar-label:hover .avatar-overlay { opacity: 1; }

/* identity + actions */
.user-identity { 
    flex: 1 1 300px; /* Give it space, but let it shrink */
    min-width: 0; 
}
.identity-top { align-items:center; gap:12px; display:flex; align-items:flex-start; vertical-align: middle; gap:20px; }
.user-title-line { font-family: 'Fixedsys', sans-serif; font-size: 18px; margin: 0;}
.username { font-size:1.6rem; margin:0; display:flex; align-items:center; gap:8px; }
.user-title-line .author-name { font-family: 'Fixedsys', sans-serif; font-weight:bold; }

/* Action buttons and chat form */
.profile-actions { 
    align-self: baseline;
}/*display:flex; align-items:center; gap:12px; }*/
.action-btn {
    background-color: var(--levelColor);
    color: black;
    border: 1px solid #8b0000;
    cursor: pointer;
    font-size: 0.85em;
    font-weight:700;
    text-transform:uppercase;
    transition: transform .12s ease, background-color .12s ease;
    padding: 8px 16px;
    border-radius: 4px;
}
.action-btn:hover { transform: translateY(-1px); background-color: #b10000; }

.hero-stat-module {
    flex: 1 1 250px; /* Stats take up half the module container */
    padding: 15px; /* slightly smaller padding for compact look */
}

.hero-radar-module {
    flex: 0 0 260px; /* Keep radar fixed size */
    padding: 0; /* Remove padding from radar module for fit */
    border: none;
    background-color: transparent;
    box-shadow: none;
}

/* Modules */
.module-title { font-size:0.85rem; color:#ff6b6b; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:1px; }

/* Stats */
.stat-list { display:grid; grid-template-columns: 1fr 1fr; gap:10px 20px; } /* Use a grid for a more compact, two-column layout */
.stat-item { display:flex; flex-direction:column; padding:0; border-bottom:none; }
.stat-item:nth-child(even) { border-right: none; }
.stat-label { color:var(--levelColor); text-transform:uppercase; order: 2; }
.stat-value { color:white; font-weight:700; font-size: 1.2rem; order: 1; margin-bottom: 2px; }
.hero-stat-module .stat-item { border-bottom: 1px dashed rgba(255,255,255,0.03); padding-bottom: 4px; }
.hero-stat-module .stat-item:nth-child(odd) { padding-right: 10px; }


/* Progress bar */
.hero-progress { min-width:220px; position:relative; margin-bottom: 15px; } /* Added margin */
.level-progress-bar {
    background-color: #222;
    margin-top; 10px;
    border: 1px solid #333;
    height: 18px;
    overflow: hidden;
    position: relative;
    border-radius:4px;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size:0.75rem;
    font-weight:700;
    color:#fff;
    pointer-events:none;
}
/* Responsive */
@media (max-width: 1050px) {
    .profile-hero { flex-wrap: wrap; }
    .hero-modules-container { flex: 1 1 100%; justify-content: space-between; margin-top: 15px; }
    .user-identity { flex: 1 1 50%; } /* identity can take up half the line */
    .hero-progress { min-width: 180px; width: 100%; }
}

@media (max-width: 768px) {
    .profile-hero { flex-direction:column; gap:12px; padding:18px; align-items:center; text-align:center; }
    .avatar-section { margin:0; }
    .user-identity { flex: 1 1 auto; width: 100%;  }
    .identity-top { flex-direction:column; gap:10px; align-items:center; }
    .hero-progress { min-width:180px; width:100%; margin: 0 auto 15px auto; }

    .hero-modules-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero-stat-module {
        flex: 1 1 auto;
        width: 100%;
        max-width: 400px;
        padding: 18px;
    }
    .stat-list { grid-template-columns: 1fr 1fr; }

}

/* Comment Form */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 10px;
    background-color: #0a0a0a;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.95rem;
}

.ql-editor {
    min-width: 100%;
}

.comment-form .ql-editor {
    background-color: #0a0a0a;
}
.comment-form .ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: 1px solid white;
}

.comment-form textarea {
    min-height: 70px;
    resize: vertical;
    padding: 8px 10px;
    background-color: #0a0a0a;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.95rem;
}

.comment-form button {
    align-self: normal;
    padding: 6px 12px;
    color: #000;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.15s ease;
}

.comment-form button:hover {
    background-color: #ff0000;
}

/* Comments Grid */
.comments-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comment-item {
    background-color: #0a0a0a;
    border: 1px solid #222;
    padding: 12px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #aaa;
}

.comment-body {
    color: #ddd;
    font-size: 1rem;
    line-height: 1.3;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.comment-likes {
    font-weight: 700;
    color: #ff5b5b;
}

.like-btn {
    background-color: transparent;
    border: 1px solid #ff5b5b;
    color: #ff5b5b;
    font-size: 0.8rem;
    padding: 4px 8px;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 3px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.like-btn:hover {
    background-color: #ff5b5b;
    color: #000;
}

/* Responsive */
@media (max-width:600px) {
    .comment-item { font-size: 0.95rem; padding: 10px; }
    .comment-header { flex-direction: column; gap: 2px; }
}
/* ---------- Container ---------- */
.user-profile-container {
    width: 83%;
    margin: 30px auto;
    background-color: #070707;
    box-shadow: 0 0 20px rgba(0,0,0,0.6);
    overflow: hidden;
    border: 1px solid #222;
    color: #ddd;
}

/* Error Messages */
.error-message {
    color: white;
    padding: 12px 16px;
    text-align: center;
    margin: 12px 2px;
    border: 2px solid white;
}

.profile-hero {
    display:flex;
    gap:24px;
    border-radius: 8px;
    padding:22px 28px;
}


/*.avatar-section { 
position: relative; 
flex-shrink: 0; }
.avatar-section {
    text-align: center;
}*/

.user-avatar {
    width: 300px;
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(255,0,0,0.18);
    transition: transform .18s ease;
}
.avatar-label { cursor: pointer; display:block; position:relative; }
.avatar-overlay {
    position: absolute;
    inset: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(0,0,0,0.6);
    color: #ff5b5b;
    font-size: 0.75em;
    text-transform:uppercase;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity .18s ease;
    border-radius:6px;
}
.avatar-label:hover .avatar-overlay { opacity: 1; }

/* identity + actions */
.user-identity { 
    flex: 1 1 300px; /* Give it space, but let it shrink */
    min-width: 0; 
}
.identity-top { align-items:center; gap:12px; display:flex; align-items:flex-start; vertical-align: middle; gap:20px; }
.user-title-line { font-family: 'Fixedsys', sans-serif; font-size: 18px; margin: 0;}
.username { font-size:1.6rem; margin:0; display:flex; align-items:center; gap:8px; }
.user-title-line .author-name { font-family: 'Fixedsys', sans-serif; font-weight:bold; }

/* Action buttons and chat form */
.profile-actions { margin-top:12px; display:flex; align-items:center; gap:12px; }
.action-btn {
    background-color: var(--levelColor);
    color: black;
    border: 1px solid #8b0000;
    cursor: pointer;
    font-size: 0.85em;
    font-weight:700;
    text-transform:uppercase;
    transition: transform .12s ease, background-color .12s ease;
    padding: 8px 16px;
    border-radius: 4px;
}
.action-btn:hover { transform: translateY(-1px); background-color: #b10000; }

/* Hero Modules Container (Stats and Radar) */
.hero-modules-container {
    display: flex;
    gap: 18px;
    flex: 1 2 300px; /* Give it more space than identity */
    min-width: 0;
}

.hero-stat-module {
    flex: 1 1 250px; /* Stats take up half the module container */
    padding: 15px; /* slightly smaller padding for compact look */
}

.module {
    font-family: 'Fixedsys', sans-serif;
    font-size: 16px;
    color: #ddd;

    width: 100%; /* not 130% */
    background-color: #060606;
    border: 1px solid #111;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    border-radius: 6px;

    padding: 12px;
}

.module-title { font-size:0.85rem; color:#ff6b6b; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:1px; }

/* Stats */
.stat-list { display:grid; grid-template-columns: 1fr 1fr; gap:10px 20px; } /* Use a grid for a more compact, two-column layout */
.stat-item { display:flex; flex-direction:column; padding:0; border-bottom:none; }
.stat-item:nth-child(even) { border-right: none; }
.stat-label { color:var(--levelColor);  text-transform:uppercase; order: 2; }
.stat-value { color:white; font-weight:700; order: 1; margin-bottom: 2px; }
.hero-stat-module .stat-item { border-bottom: 1px dashed rgba(255,255,255,0.03); padding-bottom: 4px; }
.hero-stat-module .stat-item:nth-child(odd) { padding-right: 10px; }


/* Progress bar */
.hero-progress { min-width:220px; position:relative; margin-bottom: 15px; } /* Added margin */
.level-progress-bar {
    background-color: #222;
    margin-top; 10px;
    border: 1px solid #333;
    height: 18px;
    overflow: hidden;
    position: relative;
    border-radius:4px;
}

.level-progress-fill {
    height: 100%;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:8px;
    transition: width .5s ease;
    box-shadow: 0 0 8px rgba(255,0,0,0.18);
}

.level-progress-fill {
    height: 100%;
    background-color: var(--progress-bg);
    color: var(--progress-fg);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    transition: width 0.4s ease, background-color 0.25s ease;
}


.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size:0.75rem;
    font-weight:700;
    color:#fff;
    pointer-events:none;
}

@media (max-width: 1050px) {
    .profile-hero { flex-wrap: wrap; }
    .sidebar-left .profile-hero {
        max-width: 50vw;
    }
    .hero-modules-container { flex: 1 1 100%;  margin-top: 15px; }
    .user-identity { flex: 1 1 50%; } /* identity can take up half the line */
    .hero-progress { min-width: 180px; width: 100%; }
}

@media (max-width: 768px) {
    .profile-hero { flex-direction:column; gap:12px; padding:18px; align-items:center; text-align:center; }
    .avatar-section { margin:0; }
    .user-identity { flex: 1 1 auto; width: 100%;  }
    .identity-top { flex-direction:column; gap:10px; align-items:center; }
    .hero-progress { min-width:180px; width:100%; margin: 0 auto 15px auto; }

    .hero-modules-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .hero-stat-module {
        flex: 1 1 auto;
        width: 100%;
        max-width: 400px;
        padding: 18px;
    }
    .stat-list { grid-template-columns: 1fr 1fr; }

}

@media (max-width:600px) {
    .user-profile-container { width: 100%: margin:0px; }
    .username { font-size:1.15rem; }
    .stat-list { grid-template-columns: 1fr; } /* Stack stats vertically on small screens */
    .hero-stat-module .stat-item { padding-right: 0 !important; }
}
.pagination {
    margin-top: 20px;
    text-align: center;
}

.pagination-page {
    display: inline-block;
    padding: 6px 10px;
    margin: 0 3px;
    color: white;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
}

.pagination-page.active {
    background: white;
    color: black;
    border-color: white;
}

/* Horizontal button layout */
.action-controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Sharp, dark, fixedsys-style profile buttons */
.profile-btn {
    font-family: monospace;
    padding: 6px 14px;
    background: black;
    color: #50ff50;
    border: 2px solid #50ff50;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Fixedsys', sans-serif;
    border-radius: 5px;
    font-size: 18px;
    
    box-shadow: inset 0 0 6px rgba(0,255,0,0.60);

    transition: background-color .12s ease, 
                color .12s ease,
                transform .12s ease;
}

/* Hover (hard, metallic) */
.profile-btn:hover {
    background-color: #50ff50;
    color: black;
    transform: translateY(-1px);
}

.watch-btn {
    border-color: #50ff50;
    font-size: 12px !important;
    color: #50ff50;
    border: unset;
    border-radius: 5px;
    box-shadow: inset 0 0 8px rgba(0,255,0,0.28) !important;
}

.watch-btn:hover {
    background-color: #ff2b2b;
    color: black;
}

.watch-btn.true {
    border-color: red !important;
    color: red !important;
    box-shadow: inset 0 0 8px rgba(255,0,0,0.28) !important;
}

.edit-btn {
    border-radius: 8px; 
    border: 2px solid white;
    color: #eee;
    padding: 4px 10px;
}

.tip-btn {
    border-color: #50ff50;
    color: #50ff50;
}

.tip-btn:hover {
    background-color: #50ff50;
    color: black;
}

.follow-btn.FOLLOW {
    border: 2px solid #50ff50;
    color: #50ff50;
}

.follow-btn.UNFOLLOW {
    border: 2px solid red;
    color: red;
    box-shadow: inset 0 0 6px rgba(255,0,0,0.60);
}

.follow-btn {
    font-size: 18px;
    font-family: 'Fixedsys', sans-serif;
    border-radius: 5px;
}

.follow-btn:hover {
    color: black;
}

/* Hidden form under the buttons */
.tip-chads-form {
    display: none;
    display: flex;
    gap: 8px;
}

.tip-input {
    width: 80px;
    padding: 6px 8px;
    background-color: #0a0a0a;
    color: var(--levelColor);
    border: 1px solid var(--levelColor);
    font-family: monospace;
    font-size: 0.85rem;
    border-radius: 0;
}

.tip-input:focus {
    outline: none;
    border-color: #ff3b3b;
}

/* Send button (distinct but matching style) */
.send-tip-btn {
    border-color: #ff3b3b !important;
    color: #ff3b3b !important;
}

.send-tip-btn:hover {
    background-color: #ff3b3b !important;
    color: #000 !important;
}
.stat-val {
    color: white;
    font-weight: bold;
}

.avatar-stats-wrapper {
    display: flex;
    align-items: center;
}

.avatar-label {
    cursor: pointer;
    position: relative;
    display: block;
}

.avatar-label input {
    display: none; /* clicking the label triggers it */
}

.stats-clean {
    color: var(--levelColor);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 260px;
    padding-left: 2px;
}

.vertical-stats b {
    color: white;
}

/* Thread container */
.thread-cont {
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Original post */
.op-post {
    display: flex;
    flex-direction: column;
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* Profile picture */
.op-post .avatar {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

/* Picrel image */
.op-post .picrel {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
    border-radius: 6px;
}

/* Replies */
.reply-post {
    display: flex;
    flex-direction: column;
    background-color: #1f1f1f;
    padding: 12px;
    border-radius: 6px;
    margin-top: 15px;
    width: 100%; /* Make reply same width as container */
    box-sizing: border-box;
}

/* Buttons */
button.delete, button.edit {
    margin-right: 5px;
}


.thread-cont {
    /*margin: 10px auto;*/
    background-color: #070707;
    /*border: 1px solid #222;*/
    padding: 16px;
    color: #ddd;
    font-family: monospace;
}

/*.thread-hero {
    display: flex;
    gap: 20px;
    padding: 8px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--levelColor), black 97%),
        #0a0a0a
    );
    border: 1px solid #222;
    border-radius: 6px;
}*/

.thread-av {
    width: 140px;
    height: auto;
    border: 2px solid var(--levelColor);
}


.thread-actions { margin-top: 12px; display: flex; gap: 8px; }
.thread-btn { padding: 4px 12px; font-weight: bold; text-transform: uppercase; border: 1px solid var(--levelColor); background: #111; color: var(--levelColor); cursor: pointer; border-radius: 0; }
.thread-btn:hover { background-color: var(--levelColor); color: black; }

.replies-section { width: 68vw;  margin: 0px auto; margin-top: 50px; display: flex; flex-direction: column; gap: 12px; }
.comments-section { width: 75%;  margin: 0px auto; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }

.reply-item { display: flex; gap: 12px; border: 1px solid #222; padding: 12px; border-radius: 6px; background-color: #0a0a0a; }
.reply-avatar img { max-height: unset; max-width: unset; height: 60px; width: auto; border-radius: 2px; border: 2px solid var(--levelColor); object-fit: cover; }

.reply-main { flex: 1; font-family: monospace; font-size: 14px;  text-align: left;}
.reply-header { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #aaa; margin-bottom: 6px; }
.reply-content { word-break: break-all; font-size: 14px; };
.reply-content img.reply-picrel { max-width: 170px; margin-top: 4px; border-radius: 4px; }

.thread-content a {
  color: red;
  text-decoration: underline;
}

.reply-actions { display: flex; gap: 6px;}
.like-btn { padding: 2px 6px; font-size: 0.8rem; border: 1px solid #ff5b5b; color: #ff5b5b; background: transparent; cursor: pointer; border-radius: 3px; }
.like-btn:hover { background: #ff5b5b; color: black; }

.reply-form-section { margin-top: 24px; }
.reply-form { display: flex; flex-direction: column; gap: 8px; }
.reply-form input, .reply-form textarea { background: #0a0a0a; border: 1px solid #333; color: #ddd; padding: 6px 10px; border-radius: 4px; font-family: monospace; }
.send-reply-btn { align-self: start; border: 1px solid #ff3b3b; background: #111; color: #ff3b3b; padding: 4px 12px; cursor: pointer; }
.send-reply-btn:hover { background: #ff3b3b; color: black; }

/* Pagination */
.pagination { text-align: center; margin-top: 20px; }
.pagination-page { display: inline-block; padding: 6px 10px; margin: 0 3px; color: white; border: 1px solid #444; border-radius: 4px; text-decoration: none; }
.pagination-page.active { background: white; color: black; border-color: white; }

.reply-author.username {
    font-size: 18px;
}

.reply-author.RATING {
    font-size: 15px;
}
/* Responsive */
@media (max-width: 768px) {
    /*.thread-hero { flex-direction: column; align-items: center; text-align: center; }*/
    .reply-item { flex-direction: column; }
    .reply-avatar img { width: 30px !important; height: 30px !important; }
    .reply {
        width: 98%;
    }

    .watch-btn {
        margin-top: 15px;
    }

    .reply-author.username {
        font-size: 14px;
    }

    .reply-author.RATING {
        font-size: 12px;
    }

    .replies-section .ignore {
        width: 13px !important;
        height: auto;
    }
}

/* --- NEW CONSOLIDATED MOG BATTLES STYLING --- */

.mog-grid {
    /* Auto-fill grid: minimum card size of 320px */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 0; /* Align with main center content */
    margin-top: 15px;
}

.mog-battle-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: white;
    background: #050505;
    border: 2px solid #444; /* Base border */
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    padding: 15px;
    transition: all 0.2s ease-in-out;
}

.mog-battle-card:hover {
    border-color: white; /* Theme color highlight on hover */
    box-shadow: 0 0 15px white;
    transform: translateY(-2px);
}

/* --- HEADER --- */
.mog-battle-header {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #ccc;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
    margin-bottom: 15px;
}

/* --- BODY (MOGGERS) --- */
.mog-battle-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align contents to top, not center */
    gap: 10px;
}

/* --- EACH MOGGER --- */
/* Picture */
.mogger-image {
    /* Aspect ratio for the image container */
    padding-bottom: 100%; 
    position: relative;
    margin-bottom: 8px;
}

.mogger-image img {
    position: absolute;
    width: 100px;
    height: auto;;
    top: 0;
    left: 0;
    object-fit: cover;
    border: 1px solid #333; /* Clean border around the image */
}

/* User Info */
.mogger-name {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mogger-user {
    padding: 15px 10px; 
    position: absolute;
}


/* Points */
.mogger-points {
    font-size: 24px;
    font-weight: 900;
    margin-top: 3px;
}

.mog-win {
    color: #00ff00; /* Bright Green */
    text-shadow: 0 0 5px #00ff00;
}

.mog-lose {
    color: #ff3b3b; /* Bright Red */
    text-shadow: 0 0 5px #ff3b3b;
}

/* --- VS TEXT --- */
.mog-vs {
    font-size: 20px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 8px white;
    align-self: center; /* Centers vertically between the two pictures */
}

/* --- RESPONSIVE ADJUSTMENT FOR MOG CARDS --- */
@media (max-width: 450px) {
    /* On very small phones, stack the moggers vertically for readability */
    .mog-battle-card {
        padding: 10px;
    }
    .mog-battle-body {
        flex-direction: column;
        align-items: center;
    }
    .mog-vs {
        display: none; /* Hide 'VS' text when stacked */
    }
}

.invite-header {
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}

.invite-empty {
    text-align: center;
    padding: 10px;
    color: #aaa;
}

.invite-left {
    margin-right: 15px;
}

.invite-pic {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.invite-middle {
    flex-grow: 1;
}

.invite-from {
    font-size: 18px;
}

.invite-rating {
    color: #aaa;
    font-size: 14px;
}

.invite-time {
    color: #666;
    font-size: 14px;
}

.invite-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.invite-button {
    width: 100px;
    padding: 6px;
    font-size: 14px;
    color: white;
    border: none;
    cursor: pointer;
}

.invite-accept {
    background-color: #2ecc71;
}

.invite-decline {
    background-color: #e74c3c;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1000px) {
    .main-layout {
        /* On tablets/small laptops: Left and Right sidebars stack below content or hide */
        grid-template-columns: 1fr; 
        grid-template-areas: 
            "center"
            "left"
            "right";
    }
    /* Assign areas to make them stack in specific order */
    .sidebar-left { grid-area: left; }
    .feed-center  { grid-area: center; }
    .sidebar-right{ grid-area: right; }

}

/* --- COMPONENT STYLES --- */
/* Inbox Styling */
.inbox-compact-wrapper {
    background-color: #060606;
    overflow-y: auto;
}

.inbox-compact-item {
    display: flex;
    gap: 10px;
    padding: 2px;
    border: 1px solid #333;
    margin-bottom: 5px;
    background: #0a0a0a;
    text-decoration: none;
    color: white;
    align-items: center;
    transition: all 0.2s;
}

.inbox-compact-item:hover {
    background: #111;
}

.inbox-compact-avatar {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border: 1px solid #333;
}

.inbox-compact-body {
    flex: 1;
    min-width: 0; /* Allows text truncate to work */
}

.compact-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-bottom: 2px;
}

.compact-message {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Online Users Grid */
.online-users-box {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 5px;
    border: 1px solid green;
    box-shadow: 0 0 5px green inset;
    background: #000;
    justify-content: center;
}
.online-users-box .online-user img {
    width: 28px;
    height: 28px;
    object-fit: cover;
}

/* Leaderboard Styling */
.leaderboard-container {
    background: #050505;
    font-size: 18px;
}

.leaderboard {
    display: flex;
    flex-direction: column;
    gap: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    gap: 6px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-bottom: 1px solid #222;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    padding: 6px 10px;
    background-color: #0a0a0a;
    border: 1px solid #333;
    transition: background-color 0.2s ease;
    border-radius: 4px;
}

.leaderboard-row.me {
    box-shadow: 0 0 6px #50ff50;
}

.leaderboard-row img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin: 0 10px;
    /*box-shadow: 0 0 12px #50ff50;*/
}

.leaderboard-info {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.leaderboard-stats {
    font-size: 10px;
    color: #666;
}

.sidebar-left, .sidebar-right {
    display: flex;
    padding-top: 15px;
    flex-direction: column;
    gap: 2px;
}

.leaderboard-row:hover {
    background-color: #110000;
}

.leaderboard-name {
    text-decoration: none;
    flex: 1;
    text-align: left;
    font-weight: bold;
    color: inherit;
}

.leaderboard-chads {
    color: #fd0100;
    font-weight: bold;
    white-space: nowrap;
}

.leaderboard-empty {
    color: #555;
    padding: 10px;
    font-style: italic;
    text-align: center;
}

/* --- INBOX & PANELS --- */
.panel-header {
    /*background: #111;
    border: 1px solid #333;*/
    padding: 1px;
    text-align: center;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 5px;
}

.inbox-compact-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border: 1px solid #333;
    margin-bottom: 5px;
    background: #0a0a0a;
    text-decoration: none;
    color: white;
    align-items: center;
    transition: all 0.2s;
}

.inbox-compact-item:hover {
    background: #111;
}

.inbox-compact-avatar {
    width: 35px; height: 35px;
    object-fit: cover;
    border: 1px solid #333;
}

.inbox-compact-body { flex: 1; min-width: 0; }

.compact-top {
    display: flex; justify-content: space-between;
    font-size: 12px; margin-bottom: 2px;
}

.compact-message {
    font-size: 11px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.main-layout {
    display: grid;
    /* OLD: grid-template-columns: 250px 1fr 250px; */
    
    /* NEW: This creates the 30% - 40% - 30% ratio */
    grid-template-columns: 1fr 1.4fr 1fr; 
    
    grid-template-areas: "left center right";
    gap: 20px;
    align-items: start;
}

/* Optional: If the sidebars feel TOO empty on huge screens, 
   you can align the content to look better */
.sidebar-left {
    align-items: center; /* Pushes inbox text towards the center */
}
.sidebar-left .panel-header, 
.sidebar-left .online-users-box {
    width: 100%; /* Ensures the boxes still fill the sidebar width */
    max-width: 300px; /* Prevents sidebar boxes from looking comically wide */
}

.sidebar-right {
    align-items: center; /* Pushes invites towards the center */
    padding-top: 10px;
}
.sidebar-right .panel-header, 
.sidebar-right .invite-box {
    width: 100%;
    max-width: 340px;
}

/* --- RESPONSIVE / MOBILE VIEW --- */
@media (max-width: 1000px) {
    .main-layout {
        grid-template-columns: 1fr 1fr; /* TWO COLUMNS on mobile */
        grid-template-areas:
            "left right"   /* messages + sidebar right */
            "center center"; /* feed centered full width */
    }

    .sidebar-left { grid-area: left; align-items: center; } /* Center content on mobile */
    .feed-center  { grid-area: center; }
    .sidebar-right{ grid-area: right; align-items: center; } /* Center content on mobile */
    
    .inbox-compact-wrapper { max-height: 200px; }


    /* * NEW: Remove fixed max-width constraints on stacked sidebars, 
     * but limit the box size so it doesn't span 100% of a large phone/tablet screen.
     */

    .sidebar-left .panel-header, 
    .sidebar-left .inbox-compact-wrapper,
    .sidebar-left .online-users-box,
    .sidebar-right .panel-header, 
    .sidebar-right .invite-box {
        width: 95%; /* Make content responsive to the new 1fr column */
        max-width: 400px; /* Cap width for usability on wider tablets/landscape phones */
        margin: 0 auto; /* Center the element within the 1fr column */
    }
    
    /* Ensure the leaderboard also respects the column width */
    .leaderboard-container {
        width: 95%;
        margin: 15px auto 20px auto;
    }

    .leaderboard-row {
        width: 100%; /* Rows fill the smaller container */
    }

    /* Ensure the thread grid also looks good */
    .thread-grid {
        padding: 0 10px; 
    }
}

@media (max-width: 500px) {
    .main-layout {
        grid-template-columns: 1fr;  
        grid-template-areas:
            "left"
            "center"
            "right";
    }
}
/* --- REUSABLE FILE INPUT STYLING --- */

/* Base styling for all file inputs */
.styled-file-input {
    color: white;
    background: black;
    width: 100%; /* Ensures it fits nicely in the container */
    margin-bottom: 4px; /* Space before the button */
    padding: 3px;
    box-sizing: border-box; /* Include padding in the width */
}

/* Custom button within the file input */
.styled-file-input::file-selector-button {
    background: #060606; /* Dark background for the button part */
    color: white;
    border: 1px solid #444; /* Subtle border */
    padding: 4px 8px;
    cursor: pointer;
    font-family: 'Fixedsys', sans-serif;
    text-transform: uppercase;
    font-size: 10px;
    transition: background 0.2s ease;
}

.styled-file-input::file-selector-button:hover {
    background: darkred; /* Hover effect */
    border-color: darkred;
}


/* --- INVITE ACTIONS (New Flex Layout for Accept button) --- */
/* The input is now structured inside the form for visual grouping */

.invite-actions .accept-form {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items for visual cleaness */
    gap: 4px;
}

.invite-actions .accept-form input[type="file"] {
    width: 100%; /* Ensures it uses the full width of the button column */
}

/* Redefine the ACCEPT button to be part of the new look */
.invite-button.invite-accept {
    /* Using background property to handle the theme color */
    background: white; 
    color: black; 
    font-weight: bold;
    border: none;
    border-radius: 2px;
}

/* ENTIRE CARD */
.invite-card {
    display: flex;
    padding: 10px;
    background: #0f0f0f;
    border: 1px solid #1c1c1c;
    margin-bottom: 12px;
    transition: background .2s ease, border-color .2s ease;
}

.invite-card:hover {
    background: #161616;
    border-color: #333;
}

.invite-click {
    cursor: pointer;
}


/* LEFT PIC */
.inv-left { display: flex; }
.inv-pic {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border: 1px solid white;
}
.inv-left {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

.inv-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* MIDDLE BLOCK */
.inv-mid {
    flex: 1;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inv-user .thread-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-time {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
}


/* RIGHT ACTIONS */
.inv-right {
    display: flex;
    gap: 10px;
}

.inv-file {
    width: 100%;
    padding: 3px;
    font-size: 11px;
    background: black;
    border: 1px solid #333;
    color: white;
}

.inv-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* Button styles */
.inv-accept,
.inv-decline {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.inv-accept {
    background: #27ae60;
    color: #fff;
}

.inv-accept:hover {
    background: #1e8b4c;
}

.inv-decline {
    background: #c0392b;
    color: #fff;
}

.inv-decline:hover {
    background: #9f2f22;
}

/* File input button */
.custom-file-upload {
    padding: 6px 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    color: #ccc;
    transition: background .15s ease, border-color .15s ease;
}

.custom-file-upload:hover {
    background: #2a2a2a;
    border-color: #555;
}

.invite-card:hover {
    transform: translateY(-2px);
}

input[type="file"]:valid + .custom-file-upload {
    border-color: #2ecc71;
    color: #2ecc71;
}

.file-icon {
    margin-right: 5px;
    font-size: 14px;
    line-height: 1; /* Ensure icon aligns well */
}

/* --------------------
   INVITE EMPTY 
   -------------------- */
.invite-empty {
    text-align: center; 
    padding: 15px; 
    color: #777; 
    border: 1px dashed #333;
    border-radius: 3px; /* Consistent rounding */
}

/* --- BATTLE PAGE STYLES --- */

/* --- BATTLE PAGE STYLES (REVISED) --- */
/* --- DETAILED MOG BATTLE PAGE STYLES (REVISED) --- */

.battle-cont {
    width: 95%;
    max-width: 900px; /* Capped for compactness */
    margin: 20px auto;
    padding: 0;
}

/* --- 1. BATTLE HERO CONTAINER --- */
.battle-hero {
    background: #181818; /* Dark base */
    border: 1px solid #333;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.battle-header {
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid white; /* Theme-colored divider */
}

.battle-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px rgba(var(--theme-color-rgb), 0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.battle-time-prize {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
}

.battle-time .countdown {
    font-weight: bold;
    color: #e74c3c;
}
.battle-prize {
    font-weight: bold;
    color: #ffbf00; /* Green prize color */
    font-size: 45px;
    font-family: 'Fixedsys', sans-serif;
}

/* --- OPPONENTS CONTAINER --- */
.battle-opponents {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.battle-vs {
    font-size: 2.5rem;
    font-weight: bold;
    color: #555;
    align-self: flex-end; /* Align VS text lower, near the middle */
    margin-bottom: 50px;
    text-shadow: none;
}

/* --- MOGGER INFO BOX --- */
.mogger-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
    max-width: 400px;
    background: #121212; /* Very dark background */
    padding: 15px;
    border: 1px solid #444;
    border-radius: 6px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) inset;
}

.mogger-info-score {
    text-align: center;
    margin-bottom: 15px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px dashed #333;
}

.mogger-name {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 2px;
}

.mogger-score-current {
    display: block;
    font-size: 14px;
    color: #ccc;
    font-weight: bold;
}

.mogger-points {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
    margin-right: 5px;
}

/* --- VOTE BUTTONS (Redesigned & Compact) --- */
.vote-btn {
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    margin-bottom: 10px;
    background-color: white;
    color: black;
    border-radius: 4px;
    box-shadow: 0 4px 0 0 color-mix(in srgb, white, black 40%); /* 3D effect */
    transition: all 0.1s ease;
}
.vote-btn:active {
    box-shadow: 0 1px 0 0 color-mix(in srgb, white, black 40%); /* Pressed effect */
    transform: translateY(3px);
}
.vote-btn:hover {
    background-color: color-mix(in srgb, white, black 10%);
}

/* Win/Loss Status Colors */
.mog-win {
    color: #2ecc71; /* Green */
}
.mog-lose {
    color: #e74c3c; /* Red */
}

/* --- 2. COMMENTS SECTION --- */

.comment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comment-item {
    display: flex;
    gap: 12px;
    border: 1px solid #222;
    padding: 12px;
    border-radius: 4px;
    background-color: #0c0c0c;
    border-left: 4px solid var(--levelColor); /* Accent bar */
}

.comment-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Circular avatars */
    border: 2px solid var(--levelColor);
    object-fit: cover;
}

.comment-main { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #999; margin-bottom: 6px; }
.comment-content { font-size: 0.95rem; color: #ddd; line-height: 1.6; }
.comment-content img.comment-picrel { 
max-width: 100%; margin-top: 8px; border-radius: 4px; 
}
.comment-empty { text-align: center; color: #555; padding: 20px; font-style: italic; }

/* --- RESPONSIVE BATTLE PAGE --- */
@media (max-width: 650px) {
    .battle-opponents {
        flex-direction: column;
        align-items: center;
    }
    .mogger-hero {
        width: 90%;
        max-width: none;
        margin-bottom: 20px;
    }
    .battle-vs {
        align-self: center;
        margin: 10px 0;
    }
    .mogger-score-current {
        font-size: 12px;
    }
    .mogger-points {
        font-size: 2rem;
    }
}

.mog-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}

.mog-tab {
    padding: 6px 12px;
    background: #111;
    border: 1px solid #222;
    font-size: 13px;
    color: #aaa;
    transition: all .2s ease;
}

.mog-tab:hover {
    background: #1a1a1a;
    border-color: #333;
    color: #fff;
}


.mog-tab.active {
    background: #2e2e2e;
    color: #fff;
    border-color: #555;
    font-weight: bold;
}

.mog-create-card {
    padding: 15px;
    background: #040404;
    border-radius: 8px;
    margin-top: 18px;
}

.mog-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
    text-align: left;
}

.mog-field label {
    color: #aaa;
    font-size: 12px;
    margin-bottom: 4px;
}

.mog-field input[type="text"],
.mog-field input[type="number"] {
    background: black;
    color: white;
    border: 1px solid #222;
    padding: 8px;
    font-size: 14px;
    border-radius: 5px;
}

.mog-field input[type="file"] {
    font-size: 13px;
    color: #ccc;
}

.mog-submit {
    width: 100%;
    padding: 10px;
    border: 2px solid;
    font-size: 15px;
    color: #000;
    cursor: pointer;
    margin-top: 5px;
}

.mog-submit:hover {
    filter: brightness(1.15);
}

.mogbattle-form {
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

.mogbattle-input {
    width: 90%;
    background: black;
    color: white;
    border: 1px solid #444;
    margin-top: 6px;
    font-size: 14px;
    padding: 6px;
    text-align: center;
    font-family: 'Fixedsys', sans-serif;
}

.mogbattle-input:focus {
    outline: none;
    border: 1px solid white;
}

.mogbattle-button {
    margin-top: 10px;
    padding: 6px 10px;
    width: 60%;
    font-size: 14px;
    color: black;
    text-transform: uppercase;
    cursor: pointer;
    border: 3px solid;
    font-family: 'Fixedsys', sans-serif;
}

.mogbattle-button:hover {
    filter: brightness(1.2);
}
/* --- SHOP SECTION STYLING --- */
.shop-section {
    max-width: 1200px;
    margin: 20px auto; /* Separates it from hero and comments */
    padding: 18px 28px;
    background-color: #070707;
    border: 1px solid #222;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 6px;
}

.shop-section .module-title {
    color: #ffaa00; /* Use a distinct color for this private section */
    font-size: 1rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px dashed #333;
    padding-bottom: 5px;
}

.token-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.token-item {
    font-family: monospace;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background-color: #0a0a0a;
    border: 1px solid #1a1a1a;
    border-left: 4px solid #00ff00; /* Green highlight for active tokens */
    border-radius: 4px;
}

.token-label {
    color: #00ff00; /* Bright green for the label */
    font-weight: bold;
    flex-shrink: 0;
}

.token-value {
    color: #ddd;
    background-color: #111;
    padding: 2px 6px;
    border-radius: 2px;
    font-size: 0.95rem;
    user-select: all; /* Make token easy to copy */
    overflow-x: auto;
    white-space: nowrap;
}

.token-status {
    color: #00ff00;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.no-tokens {
    color: #888;
    font-style: italic;
    padding: 10px 0;
}

/* Responsive adjustment for shop section */
@media (max-width: 768px) {
    .shop-section {
        margin: 20px 16px;
        padding: 15px;
    }
    .token-item {
        flex-wrap: wrap;
        justify-content: center;
    }
    .token-label {
        width: 100%;
        text-align: center;
    }
}
/* AUTH BOX (Login/Register box) */
.auth-box {
    padding: 20px;
    width: 90%;
    max-width: 450px; /* Set a maximum width for better control */
    text-align: center;
    margin-top: 25px; 
    
    border: 2px solid #333;
    box-shadow: 0 0 15px rgba(255,0,0,0.1);
    border-radius: 4px;
    color: #ddd;
    font-family: 'Fixedsys', sans-serif;
}

.auth-box h1 {
    font-size: 2.2rem;
    margin: 15px 0 20px 0;
    color: white;
}

/* INPUT FIELDS */
.auth-box input[type=text], 
.auth-box input[type=password],
.auth-box input[name="token"] {
    display: block;
    width: calc(100% - 20px); /* 100% minus padding */
    margin: 10px auto;
    padding: 10px;
    font-family: monospace;
    font-size: 1rem;
    background-color: #0a0a0a;
    border: 1px solid #222;
    color: #fff;
    border-radius: 0;
}

.auth-box input:focus {
    outline: none;
    border-color: #ff000D;
    box-shadow: 0 0 5px rgba(255,0,13,0.5);
}

/* SUBMIT BUTTON */
.action-button {
    background-color: #ff000D;
    color: black;
    border: 1px solid #ff000D;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 20px;
    margin-top: 15px;
    border-radius: 0;
    transition: background-color 0.1s;
    font-family: monospace;
}
.action-button:hover {
    background-color: #ff3333;
    border-color: #ff3333;
}

/* CLEARFIX */
.auth-box:after {
    content: "";
    display: block;
    clear: both;
}

/* ERROR MESSAGE */
.error {
    background-color: black;
    color: white;
    border: 1px solid white;
    padding: 10px;
    margin-bottom: 15px;
    margin-top: 15px;
    border-radius: 2px;
}

/* EVIL HEADER MESSAGE */
.evil-message {
    font-size: 20px;
    color: #aaa;
    margin-bottom: 10px;
}
.evil-message span {
    font-weight: bold;
}

/* VERIFICATION SUCCESS MESSAGE */
.verification-success {
    background-color: #004400; /* Dark green background */
    color: #00ff00; /* Bright green text */
    padding: 15px;
    margin-top: 20px;
    border: 1px solid #00ff00;
    border-radius: 4px;
    text-align: left;
}
.verification-note {
    font-style: italic;
    font-size: 0.9rem;
    margin-top: 10px;
    color: #90ee90;
}

/* LOGIN LINK */
.login-link {
    margin-top: 20px;
    text-align: center;
    padding-top: 15px;
    border-top: 1px dashed #222;
    font-size: 0.95rem;
    clear: both; /* Ensure it's below the float button */
}
.login-link a {
    color: #ff000D;
    text-decoration: none;
    font-weight: bold;
}
.login-link a:hover {
    text-decoration: underline;
}

/* MEDIA QUERY */
@media only screen and (max-width: 480px) {
    .auth-box {
        margin-top: 10px;
        padding: 15px;
    }
}
/* Add textarea to the existing input group styling */
.auth-box input[type=text], 
.auth-box input[type=password],
.auth-box input[name="token"],
.auth-box textarea { /* <-- ADDED TEXTAREA HERE */
    display: block;
    margin: 10px auto;
    padding: 10px;
    font-size: 1rem;
    background-color: #0a0a0a;
    border: 1px solid #222;
    color: #fff;
    border-radius: 0;
    resize: vertical; /* Allows user to resize vertically */
}

.auth-box input:focus,
.auth-box textarea:focus { /* <-- ADDED TEXTAREA FOCUS HERE */
    outline: none;
    border-color: #ff000D;
    box-shadow: 0 0 5px rgba(255,0,13,0.5);
}

/* Updated CSS for Interactive Elements */
.auth-box input[type=text], 
.auth-box input[type=password],
.auth-box input[name="token"],
.auth-box textarea,
.action-button /* <-- Also target the button */ { 
    /* Existing styles... */
    position: relative; /* <-- MUST be relative, absolute, or fixed for z-index to work */
    z-index: 10;        /* <-- Set a high layer index */
}

.admin-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    background-color: #070707;
    border: 1px solid #222;
    color: #ddd;
    font-family: monospace;
}

.admin-title {
    color: #ff000D;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #222;
    padding-bottom: 10px;
}

/* Tabs */
.ticket-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
}

.tab-link {
    padding: 10px 15px;
    text-decoration: none;
    color: #999;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: color 0.1s, border-bottom-color 0.1s;
}

.tab-link:hover {
    color: #ddd;
}

.tab-link.active {
    color: #ff000D;
    border-bottom-color: #ff000D;
}

/* Sections */
.ticket-list {
    padding-top: 20px;
}

.section-title {
    font-size: 1.2rem;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #333;
}
.pending-color { color: #ffaa00; }
.accepted-color { color: #00ff00; }
.rejected-color { color: #ff5555; }

.ticket-list:not(.active-tab) {
    display: none;
}
.pending-message {
    opacity: 0.5;
}

/* Ticket Items */
.ticket-item {
    background-color: #111;
    border: 1px solid #222;
    padding: 15px;
    margin-bottom: 10px;
    border-left: 4px solid var(--border-color); /* Used by specific status classes */
}

.pending-item { --border-color: #ffaa00; }
.accepted-item { --border-color: #00ff00; }
.rejected-item { --border-color: #ff5555; }


.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed #333;
    margin-bottom: 10px;
}

.ticket-username {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}
.ticket-time, .ticket-ip {
    font-size: 0.8rem;
    color: #999;
}

.ticket-message {
    font-size: 0.95rem;
    margin: 5px 0;
}

.ticket-password {
    font-size: 0.85rem;
    color: #aaa;
}
.ticket-password code {
    background-color: #000;
    padding: 2px 4px;
    border-radius: 2px;
}
.note {
    font-style: italic;
    font-size: 0.75rem;
    color: #666;
}

/* Actions */
.ticket-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.admin-btn {
    font-family: monospace;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    transition: background-color 0.1s, color 0.1s;
}

.accept-btn {
    background-color: transparent;
    color: #00ff00;
    border: 1px solid #00ff00;
}
.accept-btn:hover {
    background-color: #00ff00;
    color: black;
}

.reject-btn {
    background-color: transparent;
    color: #ff5555;
    border: 1px solid #ff5555;
}
.reject-btn:hover {
    background-color: #ff5555;
    color: black;
}

.no-tickets {
    text-align: center;
    padding: 20px;
    color: #999;
}

/* --- New Styles for Tabs (unchanged from previous step, but included for completeness) --- */
.feed-tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    border-bottom: 2px solid #333;
}

.feed-tab {
    padding: 8px 15px;
    text-decoration: none;
    color: #888;
    font-weight: bold;
    flex-grow: 1;
    text-align: center;
    transition: color 0.2s, border-bottom 0.2s;
    border-bottom: 2px solid transparent;
}

.feed-tab:hover {
    color: #ccc;
}

.feed-tab.active {
    color: #fff;
    border-bottom: 3px solid red;
}

/* --- Main Feed Item Styles --- */

.feed-list {
    max-height: 200px;
    overflow-y: auto;
    font-family: monospace;
}

.feed-item {
    display: block; 
    justify-content: space-between; 
    align-items: flex-start; 
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid red;
    transition: background-color 0.1s;
    cursor: pointer;
}

.feed-item:hover {
    background-color: #1a1a1a;
}

.feed-main {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Takes up most space */
    margin-right: 10px; /* Space before the time element */
}

/* --- Time (Moved to the end) --- */
.feed-time {
    font-size: 11px;
    color: #666;
    align-self: flex-end; /* Pushes the time to the bottom of the feed-item container */
    white-space: nowrap;
}

/* --- Shared Avatar Styling (NO RADIUS) --- */
.feed-avatar {
    width: 25px;
    height: 25px;
    /* Removed border-radius: 50%; */
    object-fit: cover;
}


/* --------------------------------------
   POSTS/REPLIES VIEW (posts_type=2)
   -------------------------------------- */

.feed-reply-header {
    /* Contains: Picrel, Thread Title, Thread Author/Rating */
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.feed-reply-header .feed-thread-picrel {
    width: 20px;
    height: 20px;
}

.feed-thread-title {
    /* Now white/default color */
    font-weight: bold;
    font-size: 13px;
    color: inherit; /* White */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-thread-author {
    font-family: 'Fixedsys', sans-serif;
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.feed-reply-content {
    /* Contains: Reply Author Avatar and Content */
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.feed-reply-author-info .feed-avatar {
    /* Reply author avatar */
    width: 20px;
    height: 20px;
    /* Optional: margin-top if needed to align with the first line of content */
}


/* --------------------------------------
   THREADS VIEW (posts_type=1)
   -------------------------------------- */

.feed-thread-header {
    /* Contains: Post Picrel, Post Title */
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.feed-thread-header .feed-post-picrel {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}


.feed-message {
    word-break: break-all;
    font-size: 13px;
    color: inherit; /* White/Default color for content */
    /* When used in feed-reply-content, it takes up the remaining width */
    flex-grow: 1; 
}

.notif-item {
    color: white;
    padding: 8px 10px;
    border-bottom: 1px solid #1a1a1a;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-family: monospace;
    
    /* MODIFIED: Use flexbox to align content (left) and delete button (right) */
    display: flex; 
    justify-content: space-between; /* Space out the content and delete button */
    align-items: center; /* Vertically center all items in the row */
}

/* New wrapper for all existing content (time, avatar, message) */
.notif-content-wrapper {
    /* Allow the main content to take up the available space */
    flex-grow: 1; 
    padding-right: 10px; /* Add some space before the delete button border */
}

#notifBox:hover .notif-delete-wrapper::before {
    animation-play-state: paused;
}

@keyframes countdown-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* New wrapper for the delete button */
.notif-delete-wrapper::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; /* Size of the circle */
    height: 28px;
    border: 2px solid rgba(255, 255, 255, 0.2); /* Light background circle */
    border-radius: 50%;
    border-top: 2px solid var(--level-color, #70ff00); /* Color of the countdown arc */
    
    /* Animation definition: uses the time defined in the JS startTimer function */
    animation: countdown-spin 3.5s linear forwards; /* Duration should match JS timer (3500ms) */
    animation-play-state: running;
}
/* New wrapper for the delete button */
.notif-delete-wrapper {
    /* Set the vertical divider */
    /*border-left: 2px solid white; */
    position:relative;
    
    /* Vertically center the 'x' button inside its small column */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Set a fixed size for the button area */
    width: 30px; 
    height: 100%; /* Take full height of .notif-item (or close to it) */
    
    /* Padding to separate the border from the 'x' */
    padding-left: 5px;
    margin-left: -5px; /* Adjust margin to bring it closer to the border */
}

/* Style the 'x' link itself */
.notif-delete-btn {
    color: red;
    background: transparent;
    border: unset;
    font-size: 14px;
    text-decoration: none;
    font-weight: bold;
}

.carousel { width: 200px; overflow: hidden; }
.track { 
display: flex; 
will-change: transform;
width: 100%; 
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

.slide { width: 200px; flex-shrink: 0; }

/* Popup Overlay */
.pin-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.hidden { display: none; }

.pin-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 16px;
}

/* Highlighted Item */
.pin-select-item.selected {
    background-color: 333 !important;
    border-left: 4px solid #888;
}

/* Footer */
.pin-popup-footer {
    padding: 12px;
    background: #111;
    border-top: 2px solid #222;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bid Button */
.pin-bid-btn {
    background: #222;
    border: 2px solid #444;
    padding: 8px 14px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    border-radius: 0; /* no curves */
}

.pin-bid-btn:hover {
    background: #444;
}

.pin-bid-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- 1. Base Pinned Container & Card Styling --- */

.thread-pinned .thread-card {
    /* Base Contrast and Appearance */
    
    /* Strong, Distinct Border */
    border: 4px solid red;
    border-radius: 1px;
    
    /* Attention-Grabbing Shadow */
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.9), 0 0 10px rgba(255, 255, 255, 0.2) inset;
    
    /* Enable smooth transitions for the hover effect */
    transition: all 0.3s ease; 
}

/* title and content will flow to the right of the float */
.thread-main .thread-title {
  font-size: 19px;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.notif-shop-wrapper {
    display: flex;
    gap: 10px;
}

.notif-shop-wrapper > div {
    flex: 1; /* take equal space */
}

.notif-shop-wrapper > div:only-child {
    flex: none;
    width: 100%;
}
.notif-shop-wrapper {
    max-width: 1200px;
    margin: 20px auto;
}

@media (max-width: 768px) {
    .notif-shop-wrapper {
        flex-direction: column;
    }
}

/* MOBILE RESPONSIVE ADJUSTMENTS */
@media (max-width: 1000px) {

    .thread-cont {
        width: 96%;
    }

    user-profile-container { 
        width: 100%;
        margin: 0px;
    }
    .main-layout { 
        gap : 0px;
    }
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 0px; /* small side padding */
        margin: 0 auto;
    }
    .nav .container,
    .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px; /* small side padding */
        margin: 0 auto;
    }
  .nav {
      height: 60px;
  }

  /* remove the center darktriad logo on mobile */

  /* shrink font sizes */
  .nav-left,
  .nav-right,
  .user-status {
      font-size: 18px;
      gap: 6px;
  }
  .user-stats img {
      margin-top: 4px !important;
  }

  a#current_username {
      display: none;
  }

  .nav-right a {
      font-size: 14px !important;
  }

  /* shrink avatar */
  .nav-right img.author-avatar {
      /*height: 28px !important;*/
      width: auto;
  }

  /* shift left+right sections inward */
  .nav-left {
      left: 10px;
  }

  .nav-right {
      right: 10px;
  }

  /* shrink status icons */
  .chad-icon {
      width: 16px;
      height: 16px;
  }

  /* remove huge gap between elements */
  .user-status {
      gap: 6px;
  }
}

.reply-time {
    font-family: 'Fixedsys', sans-serif;
    font-size: 14px;
    color: white;
}

@media (max-width: 768) {

  .nav-left,
  .nav-right {
      font-size: 12px;
  }

  .nav-right a {
      font-size: 12px !important;
  }

  .nav-right img.author-avatar {
      /*height: 24px !important;*/
  }

  .sidebar-right {
      display: none;
  }
  /*.sidebar-left {
      display: none;
  }*/
  .thread-picrel { 
      float: none;
  }
    /* shrink padding & overall card */
    .reply-item {
        padding: 0px;
        flex-direction: column;
    }

    /* avatar smaller */
    .reply-avatar img {
        width: 55px;
        height: auto;
    }

    /* HEADER RESTRUCTURE */
    .reply-header {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    /* Make username + rating stack like threads */
    .reply-header > div {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .reply-header .author_rating_0,
    .reply-header [class*="author_rating_"] {
        font-size: 15px !important;
        margin-top: -2px;
    }

    /* Time moves under rating on very small screens */

    /* Picrel scales nicely on mobile */
    .reply-picrel {
        height: auto;
        border-radius: 4px;
    }

    /* Content readable */
    /* Nested replies indent better */
    .reply-item .reply-item {
        margin-left: 5px;
        margin-top: 0px;

    }
}

.index-dt {
    display: none;
    width: 45px;
    height: auto;
}
/* MOBILE PROFILE LAYOUT FIX */
@media (max-width: 768px) {
    .nav {
        padding: 0px 0px;
    }

  .nav-gif {
      height: 50px;
  }

  .r-content {
      font-size: 12px;
      padding: 0px 0px;
  }

  .reply-author.username {
    font-size: 12px;
  }

  .reply-author.RATING {
      font-size: 10px;
  }

  .reply-children {
      border-left: unset;
  }
  .reply-time {
      font-size: 10px;
  }
  .replies-section {
      width: 99%;
  }

  .index-dt {
      display: block;
  }
    /* container becomes full width */
    .user-profile-container {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0;
    }

    /* hero becomes stacked instead of side-by-side */
    .profile-hero {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        width: unset !important;
    }

    /* avatar centered */
    .avatar-section {
        margin: 0 auto;
        text-align: center;
    }

    .user-avatar {
        width: 150px;
        height: 150px;
    }

    .avatar-label {
        width: 150px;
        height: 150px;
    }

    /* identity block takes full width */
    .user-identity {
        width: 100%;
    }

    /* NEW MOBILE STATS GRID */
    .vertical-stats {
        display: grid;
        width: 100%;
        margin-top: 12px;
        gap: 8px;
    }

    /* first row: 3 stats next to each other */
    .vertical-stats div:nth-child(1),
    .vertical-stats div:nth-child(2),
    .vertical-stats div:nth-child(3) {
        display: flex;
        justify-content: center;
        gap: 4px;
        font-size: 14px;
    }

    .vertical-stats {
        grid-template-columns: 1fr; /* stack everything */
        text-align: center;
    }

    /* shrink second-row stats */
    .vertical-stats div:nth-child(n+4) {
        font-size: 13px;
        opacity: 0.9;
    }

    /* move progress bar UNDER all stats */
    .hero-progress {
        order: 99;
        width: 100%;
        margin: 0 auto;
        margin-top: 10px;
    }

    .level-progress-bar {
        height: 16px;
    }

    /* modules stack properly */
    .hero-modules-container {
        width: 100%;
        flex-direction: column;
    }
    .comments-section {
        width: 97%;
    }

    /* radar chart shrinks */
    .radar-module {
        margin-top: 12px;
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* Override the default container background */
.messages-page {
    margin: 15px auto;
    height: 84vh;
}

.messages-layout {
    display: flex;
    height: 100%;
    border: 1px solid #222;
    border-radius: 5px;
    width: 90%;
    box-shadow: none; /* No soft shadows */
    margin: 0px auto;
}

/* --- Sidebar (Inbox List) --- */

.inbox-sidebar {
    min-width: 350px;
    flex-shrink: 0;
    padding: 0; /* Remove top/bottom padding */
}

.sidebar-title {
    font-size: 1.2em;
    font-weight: normal;
    /*color: #ff0000; */
    color: white;
    padding: 10px 20px;
    margin: 0;
    text-transform: uppercase;
}

.inbox-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.inbox-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 10px 10px;
    transition: background-color 0.1s;
    border-radius: 6px;
    border: 1px solid #222; /* Subtle separator */
    padding: 10px 10px;
}

.inbox-item:hover {
    cursor: pointer;
    background-color: #1a1a1a;
}

/* Optional: Active conversation style */
 .inbox-item.active {
    background-color: #051505;
    color: #ffffff; 
} 

.inbox-meta {
    flex-grow: 1;
    margin-left: 10px;
}

.author-info {
    display: flex;
    align-items: baseline;
    margin-bottom: 2px;
}

.author-name {
    font-weight: bold;
    color: #ffffff; /* White for main name */
    margin-right: 5px;
}

.last-seen-time {
    font-size: 0.7em;
}

.inbox-empty {
    padding: 20px;
    text-align: center;
    color: #555555;
    font-style: italic;
    border-bottom: 1px solid #111111;
}

/* --- Author Avatars and Borders (Levels) --- */

.chat-main-area {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #222;
}

.recipient-name {
    font-size: 1em;
    font-weight: normal;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
}

.message-history {
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    padding: 5px;
    font-family: monospace;
    gap: 5px;
}

.chat-placeholder {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555555;
    font-size: 1em;
    text-align: center;
    padding: 20px;
}

/* --- Chat Input Form --- */

.chat-input-form {
    display: flex;
    padding: 10px 15px;
    border-top: 1px solid #222;
    flex-shrink: 0;
    padding-left: 0px;
}

.chat-input-form textarea {
    flex-grow: 1;
    flex: 1;
    padding: 8px 10px;
    background-color: #000000;
    color:white;
    /* No border-radius */
    resize: none;
    font-size: 1em;
    border-radius:10px;
    min-height: 35px;
    line-height: 1.3;
    margin-right: 10px;
    font-family: monospace;
    transition: border-color 0.3s ease
}

.chat-input-form textarea:focus {
    border-color: #50ff50; /* Red focus border */
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.send-button {
    padding: 8px 15px;
    background-color: #000000;
    color: #ff0000; /* Red text on black button */
    border: 1px solid #ff0000; /* Red border */
    /* No border-radius */
    font-weight: normal;
    cursor: pointer;
    transition: all 0.1s;
    flex-shrink: 0;
    text-transform: uppercase;
}

.send-button:hover {
    background-color: #ff0000; /* Invert colors on hover */
    color: #000000;
    border-color: #ffffff;
}

/* --- Responsiveness (Mobile View) --- */

#back {
    display: none;
}

.sidebar-header {
border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; padding: 10px;
}

.idkman.hidden {
    display: unset;
}

.chat-sidebar {
    max-height: 80vh;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .sidebar-header {
        width: 96%;
        padding: 0px 10px !important;
    }
    .sidebar-title img {
        width: 15px !important;
    }
    #search-popover {
        width: 200px !important;
    }
    .idkman {
        width: 100% !important;
    }

    .idkman.hidden {
        display: none;
    }
    #back {
        display: unset;
    }

    #myChart {
        width: 100vw;
        height: 200px;
    }
    .avatar-section {
        width: unset;   /* fix width */
        height: unset;  /* fix height */
    }
    .mirin-icon {
        width: 150px !important;
    }
    .mirin-icon.ignore {
        width: 150px !important;
    }
    /*#inbox-sidebar {
        display: none;
    }
    .sidebar-header {
        display: none;
    }
    .messages-layout {
        flex-direction: column;
    }

    .chat-main-area {
        width: 100%;
        height: 55vh;
    }*/
    
    .chat-input-form {
        padding: 8px 8px;
    }

  .chad-icon {
      width: 14px;
      height: 14px;
  }

  .nav-left .chad-icon {
      width: 20px !important;
      height: 20px !important ;
  }

  .nav-left .chad-icon {
      margin-top : 4px !important;
  }
}

.message-continuation {
    margin-left: 45px;   /* aligns text under the first bubble */
    padding: 3px 0;
}


.msg-line {
    font-family: monospace;
    font-size: 14px;
    color: #ddd;
    padding: 2px 0;
}

.msg-line.continuation {
    margin-left: 50px; /* same indent as message text under avatar */
}

.message-bubble {
    border-bottom: 0.1px solid transparent;
    padding: 5px;
    transition: border-color 0.3s;
}

.slide-out-left {
	animation: slideOutLeft 0.6s ease forwards;
}

.slide-in-right {
	animation: slideInRight 0.6s ease forwards;
}

.slide-in-left {
	animation: slideInLeft 0.6s ease forwards;
}

@keyframes slideOutLeft {
	to { transform: translateX(-120%); opacity: 0; }
}

@keyframes slideInRight {
	from { transform: translateX(120%); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
	from { transform: translateX(-120%); opacity: 0; }
	to   { transform: translateX(0); opacity: 1; }
}

.vs {
    font-size: 28px;
    color: white;
    font-weight: bold;
    align-self: center;
    text-shadow: 0 0 8px rgba(255,255,255,0.7);
}


/* On hover: darken image slightly */
.mogger-pic:hover img {
    filter: brightness(40%);
}



/* VOTE overlay */
.vote-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: 0.25s ease;
    pointer-events: none;
    text-shadow: 0 0 6px black;
}

.mogger-pic:hover .vote-overlay {
    opacity: 1;
}

/* ELO float text */
.elo-float {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 0);
	font-weight: bold;
	font-size: 22px;
	opacity: 0;
	pointer-events: none;
}

.elo-up {
	color: #2ecc71;
	animation: eloUp 1.2s ease-out forwards;
}

.elo-down {
	color: #e74c3c;
	animation: eloDown 1.2s ease-out forwards;
}

@keyframes eloUp {
	0%   { opacity: 0; transform: translate(-50%, 10px); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -40px); }
}

@keyframes eloDown {
	0%   { opacity: 0; transform: translate(-50%, -10px); }
	20%  { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, 40px); }
}

.message-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.message-icon {
    width: 20px;
    height: auto;
    vertical-align: middle;
}

/* The floating unread count */
.msg-count {
    position: absolute;
    top: -6px;
    right: -6px;

    background: #ff2a2a;
    color: white;
    font-size: 10px;
    font-weight: bold;

    padding: 2px 4px;
    border-radius: 50%;
    min-width: 14px;
    text-align: center;
    line-height: 1;
    pointer-events: none;
}

/* Container for the image and the badge */
.message-icon-container {
    /* Make the container inline-block so it respects the flow of text,
       but allows for absolute positioning inside. */
    display: inline-block;
    position: relative; 
    /* Adjust this margin to position it correctly relative to other elements */
    margin-left: 10px; 
}

#score-container {
    font-weight: light;
}

/* The Animated Floating Element */
.floating-gain {
    position: absolute;
    /* Deep XP Green color */
    color: #4CAF50; 
    font-weight: 900; /* Extra bold */
    opacity: 1;
    pointer-events: none;
    z-index: 100;
    text-shadow: 0 0 5px rgba(76, 175, 80, 0.8); /* Glow effect */
    
    /* Animation settings */
    animation: floatUpAndFade 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; 
    /* Using a specific curve (easeOutQuad) for smoother movement */
}


.floating-gain.rating-vote {
}
/* The Enhanced Keyframes */
@keyframes floatUpAndFade {
    0% {
        transform: translate(-50%, 0) scale(1); /* Start centered */
        opacity: 1;
        /* Start with full glow */
        filter: brightness(1); 
    }
    30% {
        transform: translate(-50%, -30px) scale(1.1); /* Quick lift and slight expansion */
        opacity: 1;
        filter: brightness(1.5); /* Temporary brightness boost */
    }
    100% {
        transform: translate(-50%, -100px) scale(0.6); /* Move far up and shrink */
        opacity: 0;                            /* CRUCIAL: Fade out completely */
        /* Fade the brightness/glow */
        filter: brightness(0.5); 
    }
}

.floating-loss {
    position: absolute;
    /* Damage Red color */
    color: #f44336; 
    font-weight: 900;
    opacity: 1;
    pointer-events: none;
    z-index: 100;
    text-shadow: 0 0 8px rgba(244, 67, 54, 0.9); /* Stronger red glow */
    
    /* Animation settings: Faster and uses the new DOWN keyframes */
    animation: floatDownAndFade 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards; 
}

/* The Downward Keyframes */
@keyframes floatDownAndFade {
    0% {
        transform: translate(-50%, 0) scale(1); /* Start centered */
        opacity: 1;
        filter: brightness(1.5); /* Start bright red */
    }
    100% {
        transform: translate(-50%, 60px) scale(0.8); /* Move DOWN and shrink */
        opacity: 0;                             /* CRUCIAL: Fade out completely */
        filter: brightness(0.8);                /* Red glow fades */
    }
}

.notif-delete-wrapper::before {
    /* ... (rest of the ::before styles) ... */
    animation: countdown-spin 3.5s linear forwards; 
    animation-play-state: running;
}

/* Individual notification animation */
.notif-item {
    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        height 0.35s ease,
        margin 0.35s ease,
        padding 0.35s ease;
}

/* When deleting */
.notif-item.closing {
    transform: translateX(120%);
    opacity: 0;

    /* Collapse nicely */
    height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}


/* Sparkle Effect */
@keyframes sparkle {
    0% {
      opacity: 0.8;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
    }
    100% {
      opacity: 0.8;
      transform: scale(1);
    }
}

.sparkle {
    animation: sparkle 1s infinite;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Optional: Adding a glow effect to enhance the sparkle */
.sparkle {
    filter: brightness(1.4) contrast(1.2);
}

.main-notif {
  width: 360px;
  max-height: 270px;

  border: 2px solid green;
  box-shadow: 0 0 5px green inset;
  background: #0b0b0b;
  border: 1px solid #222;


  display: flex;
  flex-direction: column;

  overflow: hidden;
  font-family: monospace;
}

.thread-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* PICREL */
.thread-picrel {
    padding: 6px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.thread-picrel img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.thread-content.preview {
    font-family: monospace;
    font-size: 12px;
    color: #ddd;

    /* containment */
    max-height: 120px;
    /*overflow: hidden;*/

    /* make broken HTML behave */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;

    word-break: break-word;
    white-space: normal;

    line-height: 1.4;
}

/* normalize garbage injected by markdown/bbcode */
.thread-content.preview img {
  max-height: 80px;
  width: auto !important;
  max-width: 100%;
  display: block;
  margin: 4px auto;
  opacity: 0.85;
}

.thread-content.preview br {
    content: "";
    display: block;
    margin-bottom: 4px;
}

.thread-content.preview b {
    font-weight: bold;
    color: #fff;
}

.thread-content.preview h2 {
    font-weight: bold;
    font-size: 13px;
}

.thread-content.preview h1 {
    font-weight: bold;
    font-size: 14px;
}


/* MODAL BASE */
/* MODAL BASE */
.mogger-modal, .rating-form, .thread-edit-form {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* BACKDROP */
.mogger-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
}

/* POPUP */
.rating-popup, .editor-popup {
    position: relative;
    z-index: 1;
    padding: 18px;
    border-radius: 6px;
    font-family: monospace;
}


.rating-popup.thedesc {
    height: 10vw; width: 40vw;
    border: 1px solid #222; 
    background: #060606; 
}

/* POPUP */
.mogger-popup {
    position: relative;
    z-index: 1;
    width: 400px;             /* bigger */
    max-width: 90vw;
    padding: 24px;
    /*Abackground: #060606;*/
    border-radius: 8px;
    /*border: 1px solid #555;*/
    font-family: monospace;
    display: flex;
    justify-content: center;   /* center drop zone */
    align-items: center;
    flex-direction: column;
}

/* DROP ZONE */
.mogger-dropzone {
    border: 2px dashed #888;   /* neutral grey */
    padding: 32px;
    text-align: center;
    cursor: pointer;
    color: #ccc;
    transition: background 0.15s, box-shadow 0.15s;
    width: 100%;
    max-width: 320px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mogger-dropzone:hover {
    background: rgba(255,255,255,0.05);
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

.mogger-text {
    font-size: 14px;
    margin-top: 8px;
    color: #ddd;
    text-align: center;
    line-height: 1.4;
}

.mogger-modal.hidden , .rating-form.hidden, .thread-edit-form.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

.mogger-modal, .rating-form, .thread-edit-form, .reply {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease-in-out;
}


.thread-op {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    flex-direction: column;
    gap: 16px;
}

/* LEFT: text / bbcode */
.thread-op-body {
    flex: 1 1 auto;
    min-width: 0; /* CRITICAL for long BBCode */
}

/* RIGHT: picrel */
.thread-content {
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.45;
}


@media (max-width: 768px) {
    .thread-op {
        flex-direction: column;
    }

    .thread-op-picrel {
        max-width: 100%;
        margin-top: 10px;
    }
}

.thread-content .greentext {
    color: #789922;
}
.thread-op-picrel {
    text-align: center;
    /*margin: 6px 0;*/
    margin: 0px auto;
}

.thread-op-picrel img,
.thread-picrel {
    max-width: 100%;
    max-height: 420px;
    height: auto;
    border-radius: 2px;
}

.thread-main .thread-title {
    font-size: 16px;
    text-align: center;
    color: #eee;
    word-break: break-word;
}

.thread-content {
    font-size: 14px;
    line-height: 1.45;
    color: #ddd;
    word-break: break-word;
}

.thread-content span[class^="size"] {
    line-height: 1.4;
}

.thread-content blockquote {
    border-left: 2px solid #444;
    padding-left: 8px;
    margin: 6px 0;
    color: #aaa;
}

.thread-main .thread-title {
    text-align: center;
    width: 100%;
    margin: 0 auto 6px auto;
    font-size: 16px;
    color: #eee;
    word-break: break-word;
}

.thread-time {
    display: block;
    text-align: right;
    font-size: 13px;
    color: #888;
    margin-top: 6px;
    white-space: nowrap;
}


.reply-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid #222;
    width: 100%;
}

/* Clickable user block */
.reply-user {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
}

/* Username */
.reply-author {
    font-size: 16px;
    font-family: 'Fixedsys', monospace;
}

/* Rating under username */
.reply-rating {
    font-size: 14px;
    margin-top: -2px;
}

/* Push time to far right */
.reply-user:hover .reply-author {
    text-decoration: underline;
}


.related-text {
    text-align: center;
    margin: 30px auto 15px;
    font-size: 20px;
    font-weight: 800;
    font-family: monospace; /* Matches your thread list */
    letter-spacing: 8px;
    color: #ffffff;
    
    position: relative;
    display: block;
    width: 100%;
    
    /* Subtle scanline animation */
    text-shadow: 
        1px 0 0 rgba(255,0,0,0.5), 
        -1px 0 0 rgba(0,255,255,0.5);
    animation: textReflect 4s infinite linear;
}

/* Creating the underline accent */
.related-text::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    background: #fff;
    margin: 8px auto 0;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff;
    opacity: 0.6;
}

@keyframes textReflect {
    0% {
        opacity: 0.9;
        text-shadow: 1px 0 0 rgba(255,0,0,0.5), -1px 0 0 rgba(0,255,255,0.5);
    }
    2% {
        opacity: 1;
        text-shadow: 3px 0 0 rgba(255,0,0,1), -3px 0 0 rgba(0,255,255,1);
    }
    4% {
        opacity: 0.9;
        text-shadow: 1px 0 0 rgba(255,0,0,0.5), -1px 0 0 rgba(0,255,255,0.5);
    }
    50% {
        opacity: 1;
        text-shadow: 1px 0 0 rgba(255,0,0,0.2), -1px 0 0 rgba(0,255,255,0.2);
    }
    100% {
        opacity: 0.9;
    }
}

.similar-threads {
    text-align: center;
    border: 1px solid #222;
}

.similar-threads {
    margin: 10px auto 20px;
    /*padding: 14px 16px;*/
    width: 85%;

    /*border-top: 2px solid #222;
    border-bottom: 2px solid #111;*/

    /*background: linear-gradient(
        180deg,
        #0b0b0b,
        #080808
    );*/

    font-family: monospace;
    color: #bbb;
}

.similar-threads > .header {
    margin-bottom: 10px;
    font-size: 15px;
    letter-spacing: 1px;
    color: #888;
    text-transform: uppercase;

    border-bottom: 1px solid #222;
    padding-bottom: 6px;
}

.similar-threads .thread-header {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 8px 4px;
    border-bottom: 1px dashed #222;

    transition: background 0.15s ease;
}

.similar-threads .thread-header:last-child {
    border-bottom: none;
}

.similar-threads .thread-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.similar-threads .thread-title b {
    font-size: 14px;
}

.similar-threads .thread-header:hover .thread-title b {
    color: #fff;
}

.similar-threads .small-author-avatar {
    width: 26px;
    height: 26px;
}

.similar-threads .thread-board-title_3,
.similar-threads .thread-board-title_1,
.similar-threads .thread-board-title_2 {
    font-size: 12px;
}

.similar-threads .author_rating_1,
.similar-threads .author_rating_2,
.similar-threads .author_rating_3 {
    font-size: 12px;
}

@media (max-width: 700px) {
    .similar-threads {
        padding: 10px;
    }

    .inbox-compact-list {
        max-height: 100px;
    }

    .similar-threads .thread-header {
        gap: 8px;
    }

    .sidebar-left, .sidebar-right {
        padding-top : 1px;
    }
    

    .similar-threads .thread-title b {
        font-size: 13px;
    }
}

.resizable-button {
  padding: 10px;
  border: 1px solid #0056b3;
  cursor: pointer; /* Indicates it's interactive */

  /* Make the element resizable */
  resize: both; /* or vertical, or horizontal */
  
  /* Required for the resize property to work */
  overflow: auto; 
}

.thread-main {
    font-size: 16px;
    color: #ddd;
    font-family: monospace;
    width: 100%;
    display: flex;
    flex-direction: column; /* Keeps Title on top, Body below */
}

/* Add this new wrapper class to your CSS */
.thread-body-wrapper {
    display: flex;
    flex-direction: row; /* Puts content and picrel side-by-side */
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.thread-title {
    font-family: monospace;
    font-weight: 700;
    text-align: center;
    width: 100%;
    /*margin: 0 auto 15px auto;*/
    font-size: 20px;
    color: #eee;
    word-break: break-word;
}

.thread-content {
    flex: 1; /* Makes the text fill the available space */
    font-size: 14px;
    line-height: 1.65;
    color: white;
    font-family: monospace;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.thread-op-picrel {
    flex: 0 0 250px; /* Adjust this value to change how wide the right image is */
    text-align: center;
}

.thread-picrel {
    width: 100%; 
    height: auto;
    max-height: 420px;
    object-fit: cover;
    border-radius: 2px;
    border: 1px solid rgba(255,255,255,0.1);
}

.total-mirin-box {
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #333;
    background: #000;
    text-align: center;
    border-radius: 4px;
}

.mirin-gradient {
    background: linear-gradient(to bottom, #fff 0%, #aaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 22px;
}

.hero-radar-module {
    background: rgba(0,0,0,0.3);
    border: 1px solid #222;
    padding: 10px;
    border-radius: 8px;
}

.reply-attached {
    border: 1px dashed #222;
}

.boards-titles {
    font-size: 20px;
}

.form-row textarea {
    width: 100%;
    font-family: monospace; 
    font-size: 18px; 
    text-align: center; 
    outline: unset; 
    border: none; 
    border-bottom: 1px solid #222; 
    color: white;
    background: #0a0a0a; 
}


.thread_title {
    width: 100%;
    font-family: monospace; 
    font-size: 14px; 
    text-align: center; 
    outline: unset; 
    border: none; 
    border-bottom: 1px solid #222; 
    color: white;
    background: #0a0a0a; 
}

@media (max-width: 750px) {
    #thread_post_form.active::before {
        content: "";
        position: fixed;
        top: 0; left: 0;
        height: 100vw;
        background: rgba(0,0,0,0.5);
        z-index: -1;
    }
}

.inbox-item.thisnigga {
    border: 2px solid #50ff50 !important;
    margin: 5px 5px;
}
.inbox-item a:hover {
    color: unset !important;
}

.inbox-sidebar a {
    color: unset !important;
}
.inbox-sidebar a:hover {
    color: unset !important;
}

.inbox-item.unread {
    border-right: 5px solid #50ff50;
    border-radius: 6px;
}
.unread-count {
    color: #50ff50 !important;
    font-size: 18px;
}

.replies-section .ignore {
    width: 18px;
    height: auto;
}

.sim-threads {
    display: flex;
    padding: 10px 20px;
    flex-direction: column;
    gap: 10px;
    margin: 10px auto;
    border: 1px solid #222;
    border-radius: 10px;
    padding: 0px 0px !important;
}

.sim-thread-thread {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid #222;
    border-radius: 10px;
}

.sim-threads-title {
    padding: 10px 5px; 
    margin: 0px auto;
}

@media (max-width: 768px) {

    .sim-threads img  {
        width: 20px !important;
    }
    .sim-threads {
        width: 92vw !important;
        padding: 5px 5px !important;
    }
    .sim-threads .thread-author {
        display: none;
    }
    .sim-threads .board-title {
        font-size: 10px !important;
    }
    .sim-threads .sim-thread-title {
        font-size: 10px !important;
    }
    .sim-threads .notif-time {
        display: none;
        font-size: 6px !important;
    }

    .sim-threads .sim-thread-thread {
        padding: 5px 10px !important;
    }
    .sim-threads-title {
        padding: 0px 0px !important;
        font-size: 14px !important;
    }

}

.thread-card.LOOKSMAXXING {
    border: 3px solid #FFD700 !important;
}

.thread-card.IQPILL {
    border: 3px solid #ff0000 !important;
}

.thread-card.OFF-TOPIC {
    border: 3px solid #5fd75f !important;
}

.mogger-pic.rating {
    height: 400px;
    max-width: 500px;
}

.rating-picrel {
    height: 400px;
}


.rating-info {
    display: flex;
    position: absolute;
    bottom: 10px;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Extra safety shadow */
}

.ratinf-info.title {
    left: 1px;
}

.ratinf-info.count {
    font-size: 12px !important;
    font-weight: unset !important;
    right: 10px;
}

#rating-dropzone .dz-preview.dz-image-preview {
    height: 300px !important;
}

#rating-dropzone .dz-image img {
    height: 250px !important;
}

#rating-dropzone .dz-image {
    height: 250px !important;
}

#rating-dropzone .dz-remove {
    text-decoration: none;
    text-transform: uppercase;
    width: 80%;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 10px;
    align-self: center;
    border: 1px solid #50ff50 !important;
    border-radius: 10px;
    background: #000;
    margin-top: 10px;
    color: #50ff50;
    cursor: pointer;
    text-shadow: 0 0 1px #008020;
    transition: background 0.12s, color 0.12s, border 0.12s;
    margin: 10px auto;
}

.editor-popup .dz-remove {
    color: #50ff50;
}


.rating-pics {
    display: flex;
    gap: 50px;
    margin: 0px auto;
    justify-content: center;
    align-items: center;
}

.rating-pics img {
    border: 1px solid #222;
    height: 17vw;
    align-self: center;
    border-radius: 5px;
}

.t-cont .rating {
    width: 73% !important;
}

.ratings-section {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 60px;
    font-size: 32px;
}

.current-rating {
    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #aaa;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

.ratting-nigga {
    position: relative;
    padding: 14px 28px;
    font-weight: var(--rating-weight);
    letter-spacing: var(--rating-spacing);
    border-radius: 14px;
    cursor: pointer;
    user-select: none;

    background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #aaa;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}

/* Hover feel */
.ratting-nigga:hover, current-rating:hover  {
    transform: translateY(-3px) scale(1.04);
}

/* Click feel */
.ratting-nigga:active, current-rating.active {
    transform: translateY(1px) scale(0.98);
}

.ratting-nigga:nth-child(1) {
    color: var(--ltn-high);
}
.ratting-nigga:nth-child(1):hover,
.ratting-nigga:nth-child(1).active {
    box-shadow: 0 0 12px var(--ltn-mid);
}

/* MTN */
.ratting-nigga:nth-child(2) {
    color: var(--mtn-high);
}
.ratting-nigga:nth-child(2):hover,
.ratting-nigga:nth-child(2).active {
    box-shadow: var(--mtn-glow);
}

/* HTN */
.ratting-nigga:nth-child(3) {
    color: var(--htn-high);
}
.ratting-nigga:nth-child(3):hover,
.ratting-nigga:nth-child(3).active {
    box-shadow: var(--htn-glow);
}

/* CHADLITE */
.ratting-nigga:nth-child(4) {
    color: var(--chadlite-high);
}
.ratting-nigga:nth-child(4):hover,
.ratting-nigga:nth-child(4).active {
    box-shadow: var(--chadlite-glow);
}

/* CHAD */
.ratting-nigga:nth-child(5) {
    color: var(--chad-color);
    font-weight: var(--chad-weight);
    letter-spacing: var(--chad-spacing);
}
.ratting-nigga:nth-child(5):hover,
.ratting-nigga:nth-child(5).active {
    box-shadow: 0 0 18px var(--chad-color);
}


.ratings-section {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 48px;
    font-size: 1.5rem;
}

/* Base */
.ratting-nigga {
    padding: 12px 26px;
    font-weight: var(--rating-weight);
    letter-spacing: var(--rating-spacing);
    cursor: pointer;
    user-select: none;

    background: #0b0b0b;
    border-radius: 6px;
    border: 2px solid transparent;

    color: #999;
    width: 10vw;
    text-align: center;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

.ratting-nigga:hover {
    transform: translateY(-2px);
}

.ratting-nigga:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .ratting-nigga {
        padding: 3px 15px !important; 
        width: 13vw !important;
        height: 8vw;
        border: 1px solid #222;
        align-self: center;
        align-content: center;
    }
    .rating-pics {
        flex-direction: column;
        padding: 30px 5px;
    }

    .rating-pics img {
        height: unset;
        width: 50vw;
        gap: 2px;
        padding: 2px 5px;
    }
    .pagination .reply {
        width: 100%;
    }
    .comment-form {
        width: 95% !important;
    }
    .ratings-section {
        align-items: center;
        vertical-align: center;
        font-size: 0.7rem !important;
        gap: 6px;
    }
}

.my-moggers {
    border: 1px solid #222;
}

.quill-image-uploading {
  position: relative;
  display: inline-block;
}

.quill-image-uploading img {
  max-width: 98% !important;
  filter: blur(5px);
  opacity: 0.3;
}

.quill-image-uploading::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 3px solid #ccc;
  border-top-color: #1e40af;
  z-index: 1;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}


.mirin-btn {
    font-size: 30px;
    background: #0a0a0a;
    margin: 0px auto;
    margin-top: 20px;
    color: #fff;
    padding: 12px 30px;
    font-family: 'Fixedsys', sans-serif;
    font-weight: 800;
    border-radius: 10px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

.mirin-btn:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); 
    transform: translateY(-2px);
}

.mirin-btn.true {
    border: 4px solid #50ff50;
}

.mirin-btn.false {
    border: 4px solid red;
}

.message.dropzone {
    position: relative;
    background: #000000;
    border: 3px solid #222 !important;
    border-bottom: unset;
    border-radius: 10px;
    border-bottom: unset;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border: 1px ;
    padding: 0px 0px;
    padding-bottom: 175px;
}

.message .dz-remove {
    text-decoration: none;
    width: 25%;
    left: 40%;
    margin: 0px auto;
    position: absolute;
    font-size: 14px;
    font-weight: bold;
    padding: 6px 10px;
    border: 1px solid red !important;
    border-radius: 30px !important;
    background: #000;
    margin-top: 10px;
    color: red;
    cursor: pointer;
    text-shadow: 0 0 1px #008020;
    transition: background 0.12s, color 0.12s, border 0.12s;
}

.message-files {
    width: 200px;
    height: auto;
    border: 4px solid #222;
    border-radius: 6px;
}

.reply-like-send_message img {
    width: 30px; 
    height: 30px;
}
.description {
    align-self: baseline;
    border: 1px solid #222;
    padding: 10px 20px;
    cursor: text;
    border-radius: 6px;
    margin: 0px 20px;
}

.description-text {
    color: #eee;
    font-size: 20px;
}

@media (max-width: 768px) {
    .ql-editor img {
        max-height: 200px;
    }
    .avatar-stats-wrapper {
        flex-direction: column;
    }
    .rating-popup.thedesc {
        width: 70vw;
        height: 40vw;
    }
    .description {
        align-self: center;
    }
    .description-text {
        font-size: 18px;
    }

    .user-identity {
        align-self: baseline;
    }

    .identity-top {
        gap: 0px;
    }
    .sidebar-left .identity-top {
        flex-direction: row; gap: 10px; 
    }

    .profile-actions {
        align-self: center;
    }

    .rating-popup.thedesc textarea {
        height: 20vw !important;
    }

    .feed-tab {
        font-size: 12px !important;
        padding: 4px 5px;
    }
    
    .feed-list .notif-item {
        margin: 1px 5px !important;
    }

    .rating-title {
        font-size: 11px;
    }

    .rating-current-rating {
        font-size: 16px !important;
        font-family: 'Fixedsys', sans-serif;
    }

    .sim-thread-thread .thread-author {
        display: none !important;
    }

    .sim-thread-thread {
        font-size: 11px !important;
    }
    .sim-thread-thread .board-title {
        font-size: 11px !important;
    }
    .sim-thread-thread .notif-time {
        font-size: 9px !important;
    }
    .sim-thread-title {
        font-size: 11px !important;
    }

    .reply-like-send_message img {
        width: 25px; 
        height: 25px;
    }
    .message-files {
        width: 120px;
        height: auto;
        border: 3px solid #222;
    }
}

.thread-container.pinned {
    transform: translateY(-3px) scale(1.01); 
    border: 1px solid rgba(255, 215, 0, 1);
    /*box-shadow: 0 5px 5px rgba(255, 69, 0, 1), 0 0 30px rgba(255, 120, 0, 0.7);*/
}

.pin-thread-button {
    padding: 5px 20px;
    border: 3px solid #50ff50;
    border-radius: 10px;
    background: transparent;
    color: #eee;
    font-family: 'Fixedsys', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
}
.fuckass-threads-to-pin {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pin-popup {
    border: 1px solid #222;
    position: relative;
    
    max-height: 800px;
    overflow-y: auto;
    /* Enable smooth transitions for the hover effect */
    transition: all 0.3s ease; 
    z-index: 1;
    padding: 16px;
    border-radius: 8px;
    font-family: monospace;
}

.thread-edit {
    display: none; 
    z-index: 999; 
    font-family: monospace;  
    border: 1px solid white; 
    border-radius: 10px; 
    top: 100px; 
}

.editor {
    display: none; 
    position: absolute;
    z-index: 999;
    font-family: monospace;
    border: 1px solid white;
    border-radius: 10px;
}


.thread-edit-form {
    border: 1px solid #222;
    border-radius: 10px;
}
.editor-popup {
    border: 2px solid #eee;
}

.main-board-option, .board-option {
    align-self: center; 
    border: unset;
    background: transparent; 
    vertical-align: middle; 
    font-size: 20px;
    font-family: 'Fixedsys', sans-serif;
    cursor:pointer
}

.board-option {
    /* Existing styles plus these refinements */
    transition: transform 0.1s, color 0.2s, background 0.2s;
    padding: 5px 15px;
    border-radius: 4px; /* Softens the look slightly */
    outline: none;
}

/* Clear Hover State */
.board-option:hover {
    background: rgba(255, 255, 255, 0.1); /* Subtle highlight */
    color: #fff !important;
    transform: translateY(-2px); /* Lifts up */
}

/* Clear Active/Pressed State */
.board-option:active {
    transform: translateY(1px); /* Sinks down when clicked */
    background: rgba(255, 255, 255, 0.2);
}

/* Keep the active page highlighted */
.board-option.active {
    border-bottom: 2px solid #fff;
    color: #fff !important;
}

.editor-popup {
    position: absolute; 
    top: 50%;           
    left: 50%;          
    transform: translate(-50%, -50%); 
    width: 85%;
    /*height: 86vh;       
    max-height: 86vh;   */
    background: #060606;
    overflow: hidden;
    z-index: 999;
}

.editor-popup #editor {
    height: 56vh;       
    max-height: 56vh;   
    background: #060606;
    overflow: hidden;
}

.editor-popup #edit-editor {
    height: 56vh;       
    max-height: 56vh;   
    background: #060606;
    overflow: hidden;
}


@media (max-width: 768px) {
    .editor-popup #editor, .editor-popup #edit-editor{
        height: unset;       
        max-height: 100vw;
        font-size: 15 !important;
    }

    .editor-popup #thread_title {
        font-size: 16px !important;
    }


    .editor-popup .board-option, .editor-popup #edit-editor {
        font-size: 16px;
    }

    .reply-like-btn,
    .reply-dislike-btn,
    .message-send-button,
    .reply-reply-btn {
        display: flex; 
        gap: 2px; 
        align-items: center; 
        padding: 4px 6px; 
        border: 1px solid #222; 
        border-radius: 5px; 
        font-size: 10px;
        background: #18181b;
        transition: transform 0.15s ease, filter 0.15s ease;
        justify-content: center;
    }
    .reply-like-btn img,
    .reply-dislike-btn img ,
    .message-send-button img,
    .reply-reply-btn img {
        width: 15px !important;
        height: auto !important;
    }
}

.draft, .description {
    transition: transform 0.3s ease;;
}

.description:hover, .draft:hover, .sidebar-left #hero:hover {
  transform: scale(1.03);
}

.supp-grid .supp-container,
.supp-grid .supp-card {
    width: 300px;
}

.supp-grid .supp-card {
    border: 3px solid #50ff50;
    border-radius: 10px;
}

.supp-grid .supp-name {
    font-size: 22px;
}

.supp-grid .supp-image img {
    height: 260px;
}

#edit_button, #post_delete_button {
    background: black !important;
    color: red;
    border: 1px solid red;
    padding: 2px 10px;
    border-radius: 4px;
}

#edit_button {
    color: #50ff50;
    border: 1px solid #50ff50;
}

.ql-resize-style-center a {
    style: inline-block !impor
}

.sidebar-left .user-avatar {
    width: 150px;
    max-height: 300px;
}

.sidebar-left .author-name {
    font-size: 18px;
}

.sidebar-left .name {
    font-size: 18px;
}

.sidebar-left #myChart {
    height: 130px;
    width: 200px;
}

.fuck-notifications {
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.5s ease-out; /* Add transform transition */
    position: fixed;
    bottom: 5px;
    right: 10px;

    width: 30vw;
    max-height:90%;
    padding: 10px 20px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;

    gap:10px;
    border: 2px solid #222;

    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--htn-high), black 97%),
        #0a0a0a
    );

    z-index: 9999;

    display: flex;
    flex-direction: column; 
    transform: translateX(100%);

    overflow-y: auto;
    overflow: scroll;
    font-family: monospace;
    border: 3px solid #50ff50;
    border-right: 1px solid #222;
}

.fuck-notifications.active {
    opacity: 1;
    transform: translateX(0%);
}

.liked-users, 
.search-users, 
.disliked-users {
    display: none;
    position: absolute;
    bottom: 120%; /* show above the trigger */
    left: 50%;
    transform: translateX(-50%);
    
    width: 120px;
    max-height: 120px;
    overflow-y: auto;

    background: #18181b;
    padding: 8px;
    border-radius: 8px;

    display: none;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 999;
}

.liked-users {
    border: 1px solid #50ff50;
}

.disliked-users {
    border: 1px solid red;
}

.search-users {
    bottom: unset; /* show above the trigger */
    background: #060606;
    border: 1px solid #222 !important;
    flex-wrap: inherit;
    flex-direction: column;
    gap: 8px;
    border: #eee;
    max-height: 400px;
    overflow-y: auto;
    width: 400px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  text-align: center;
  width: 60px;
}


.autosave-control {
    display: inline-flex;
    align-items: center;
    background: rgb(10, 10, 10);
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Number Input */
.autosave-control input {
    width: 30px;
    text-align: center;
    font-size: 20px;
    background: transparent;
    font-family: 'Fixedsys', sans-serif;
    color: #ffffff;
    border: none;
    outline: none;
}

/* Remove default arrows */
.autosave-control input::-webkit-inner-spin-button,
.autosave-control input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.autosave-control input {
    -moz-appearance: textfield;
}

/* Buttons */
.autosave-control button {
    width: 30px;
    height: 30px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    border: none;
    background: #2a2a2a;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Hover */
.autosave-control button:hover {
    background: #3a3a3a;
}

/* Click effect */
.autosave-control button:active {
    transform: scale(0.92);
    background: #4CAF50;
}

/* Optional: Disabled state */
.autosave-control button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#autosave-status {
    align-self: center;
    font-weight: 500;
    font-size: 15px;
    color: #b0b0b0;
    margin: 0px auto;
    color: red;
    font-family: 'Fixedsys', sans-serif;
}



/* ============================= */
/* GLOBAL BUTTON BASE */
/* ============================= */

.main-board-option,
.board-option {
    appearance: none;
    border: none;
    background: transparent;
    font-family: 'Fixedsys', sans-serif;
    font-size: 24px;
    padding: 4px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: 
        all 0.25s ease,
        box-shadow 0.3s ease;
    position: relative;
    letter-spacing: 1px;
}

/* Base look */
.board-title {
    color: #aaa;
    opacity: 1;
}

/* ============================= */
/* HOVER EFFECT (Modern Glow Lift) */
/* ============================= */

.board-title:hover {
    transform: translateY(-3px);
    opacity: 1;
}

/* Soft underline animation */
.board-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0%;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.board-title:hover::after {
    width: 70%;
}

/* ============================= */
/* ACTIVE PAGE STYLE */
/* ============================= */

.board-title.active {
    font-weight: bold;
    opacity: 1;
    transform: translateY(-2px);
}

.board-title.LOOKSMAXXING {
    color: #FFD700 !important;
}
.board-title.LOOKSMAXXING.active {
    color: #FFD700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* IQPILL */
.board-title.IQPILL {
    color: #ff0000;
}
.board-title.IQPILL.active {
    color: #ff0000;
    text-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}

.board-title.OFF-TOPIC.active {
    color: #5fd75f;
    text-shadow: 0 0 8px rgba(95, 215, 95, 0.7);
}
.board-title.OFF-TOPIC {
    color: #5fd75f !important;
}

.board-title.MARKET {
    color: #50ff50 !important;
}

/* BOTB */
.board-title.BOTB {
    color: #0aa4a8;
}
.board-title.BOTB.active {
    color: #08bcc2;
    text-shadow: 0 0 8px rgba(8, 188, 194, 0.7);
}

@media (max-width: 768px) {
    #autosave-status {
        font-family: monospace;
        font-size: 10px;
    }

    .autosave-control button {
        width: 20px;
        height: 20px;
        font-size: 16px;
     }

    .main-board-option,
    .board-option {
        font-size: 17px;
        padding: 4px 10px;
    }

    .carousel {
        display: none;
    }
    .autosave-control input {
        width: 20px;
        font-family: monospace;
        font-size: 12px;
    }   

    #thread_draft_button, #thread_post_button {
        height: auto !important;
        font-family: monospace !important;
        font-size: 12px !important;
    }

    #cuck_warning {
        width: unset !important;
        margin: 5px 10px;
    }
}

.mogger-box .winner {
    border: #50ff50;
}
.vote-button {
    text-align: center;
  position: relative;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 25px;
  margin: 5px auto;
  display: block;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid #50ff50;
  background: #111;
  color: #50ff50;
  text-transform: uppercase;
  transition: all 0.25s ease;
  box-shadow: 0 6px 0 #2ecc2e;
}

.voted-users {
    margin-top: 20px; 
    max-height: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #222;
}
/* Hover effect */
.vote-button:hover , .vote-button.active {
  background: #50ff50;
  color: #111;
  box-shadow: 0 4px 12px rgba(80, 255, 80, 0.6);
  transform: translateY(-2px);
}

/* Pressed effect */
.vote-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #2ecc2e;
}

/* Subtle glow animation */
.vote-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(80, 255, 80, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.vote-button:hover::after {
  opacity: 1;
}

/* ===== Leaderboard Container ===== */
.leaderboard-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

/* ===== Leaderboard Card ===== */
.leaderboard {
    width: 100%;
    max-width: 720px;
    padding: 0 10px;
}

/* ===== Leaderboard Row ===== */
.leaderboard-row {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    color: #f5f5f5;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect */
.leaderboard-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ===== Background by Role ===== */
.leaderboard-row {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--high-htn), black 90%),
        #0a0a0a
    );
}

/* ===== Rank ===== */
.leaderboard-row > div:first-child {
    width: 50px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

/* ===== Avatar ===== */
.leaderboard-row img {
    width: 38px;
    height: 38px;
    margin: 0 14px;
    object-fit: cover;
}



/* ===== Experience ===== */
.leaderboard-chads {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Current User Highlight ===== */
.leaderboard-row.current-user {
    outline: 2px solid #fff;
    border-radius: 12px;
}

/* ===== Separator ===== */
.leaderboard-separator {
    text-align: center;
    font-size: 12px;
    opacity: 0.4;
    letter-spacing: 6px;
    margin: 16px 0;
}


.registration-darktriad {
    width: 50px; height: 50px;
}

:root {
    --accent-color: #50ff50;
    --text-color: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --border-color: rgba(255, 255, 255, 0.1);
}

.auth-wrapper {
    justify-content: center;
    align-items: center;
    font-family: 'Fixedsys', sans-serif;

    position:fixed;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    z-index: 999;
}

.glass-box {
    background: var(--glass-bg);
    background: #0a0a0a;
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    padding: 10px 60px;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    text-align: center;
    min-width: 500px;
    min-height: 500px;
}

.main-logo {
    width: 200px;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.discord-link {
    display: flex;
    align-items: center;
    font-size: 23px;
    justify-content: center;
    gap: 10px;
    color: #7289da;
    text-decoration: none;
    font-size: 0.8rem;
    margin-bottom: 30px;
    transition: 0.3s;
}

.discord-link:hover {
    color: white;
    text-shadow: 0 0 10px #7289da;
}

.icon-small {
    width: 20px;
    height: 20px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;

}

.input-group input {
    width: 90%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    color: white;
    font-family: inherit;
    letter-spacing: 1px;
    outline: none;
    transition: 0.3s;
    border-radius: 4px;
    font-size: 18px;
}

.input-group input:focus {
    border-color: var(--accent-color);
    background: rgba(255, 0, 13, 0.05);
}

.toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
}

.toggle-btn img {
    width: 18px;
    filter: invert(1);
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s;
    letter-spacing: 3px;
    margin-top: 10px;
}

.submit-btn:hover {
    background: var(--accent-color);
    color: black;
    box-shadow: 0 0 20px rgba(255, 0, 13, 0.4);
}

.footer-links {
    margin-top: 10px;
    font-size: 22px;
    color: #666;
}

.footer-links a {
    color: white;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
}

.register-backdrop {
    position: absolute;
    inset: 0;
    width: 10000%;
    height: 10000%;
    background: var(--glass-bg);
    z-index:999;
    backdrop-filter: blur(10px);
}

.identity-top {
    margin-bottom: 10px;
}

.nav-button {
    background: transparent;
    padding: 5px;
    border-bottom: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: bold;
    cursor: pointer;
    transition: 0.4s;
    margin-top: 10px;
}
.nav-button:hover {
    background: var(--accent-color);
    color: black;
    box-shadow: 0 0 20px rgba(255, 0, 13, 0.4);
}
.logout-btn {
    background: transparent;
    border: unset;
    color: #50ff50;

}

.messages-btn, .notifications-btn {
    display: flex; 
    background: transparent;
    color: #50ff50;
    padding: 10px 10px;
    line-height: 0px !important;
    transition: transform 0.15s ease, filter 0.15s ease;
    justify-content: center;
    align-items: center;
    justify-content: center;
    border: unset;
    border-bottom: 4px solid #50ff50;
    border-radius: 6px;
    gap: 10px; 
}

.messages-btn.active, .notifications-btn.active {
    background: #18181b;
}

@media (max-width: 768px) {
    .glass-box {
        min-width: unset;
        min-height: unset;
        height: 68vh;
        width: 60vw;
    }
    #messages-count {
        font-size: 10px !important;
    }
    .messages-btn, .notifications-btn {
        padding: 5px 5px;
    }

    .footer-links {
        font-size: 16px;
    }

    .discord-link {
        margin-bottom: 20px;
    }
    .messages-btn img, .notifications-btn img {
        width: 20px !important; 
    }
    #my_avatar {
        width: 28px !important;
        height: 28px !important;
    }
    .feed-center .leaderboard-container {
        display: none;
    }
    .logout-btn {
        display: none;
    }

    #notifications_count {
        font-size: 10px !important;
    }
}

#hero {
    position: relative;
    background-size: cover;
    background-position: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.user-profile-container #hero {
    min-height: 350px; /* Adjust based on how tall you want the top section */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.hero-overlay-mask {
    display: flex;
    padding: 10px;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    
    /* This keeps your gradient! 
       Adjust the 0.8 (opacity) to make the banner more or less visible */
    /*background: linear-gradient(
        to bottom, 
        rgba(7, 7, 7, 0.9) 0%, 
        rgba(7, 7, 7, 1.0) 100%
    );*/
    background: linear-gradient(to bottom,rgba(7, 7, 7, 0.8),rgba(7, 7, 7, 0.9));

    background-size: cover;
    background-position: center;

}
@media screen and (max-width: 768px) {
    .hero-overlay-mask {
        width: 95%;
        display: flex;
        flex-direction: column;
    }
    .thefuckingstats {
        margin-left: 2px !important;
    }

    .the-cuck-buttons {
        gap: 3px !important;
    }
    #ze_boards {
        margin-top: 10px; 
    }
    .sidebar-left .profile-hero {
        max-width: unset;
    }
}

.background-mask {
    background: linear-gradient(to bottom,rgba(7, 7, 7, 0.8),rgba(7, 7, 7, 0.9));
    border-radius: 8px;
}