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

html,
body {
    height: 100%;
}

body {
    font-family: Arial, sans-serif;
    background: #0c0f16;
    color: #eee;
    display: flex;
    flex-direction: column;
}

a {
    color: #ffd86a;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.auth-bar {
    background: #000;
    color: #fff;
    padding: 4px 20px;
    font-size: 0.9rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.auth-text {
    opacity: 0.9;
}

.auth-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover {
    color: #ffd86a;
    text-decoration: underline;
}

header {
    position: relative;
    background: #141926 url("/images/headerbg.png") center 35% / cover no-repeat;
    border-bottom: 2px solid #2f3b55;
    padding: 24px 20px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    min-height: 260px;
    flex-shrink: 0;
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.8));
    pointer-events: none;
    z-index: 0;
}

.logo-link,
.header-card {
    display: inline-block;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

#header-flames {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.forgot-password-text {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #c4c9da;
}

.flame-particle {
    position: absolute;
    bottom: 0;
    border-radius: 999px;
    transform-origin: center bottom;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 1) 0, rgba(255, 230, 150, 1) 25%, rgba(255, 140, 0, 0.95) 45%, rgba(255, 0, 0, 0.7) 65%, rgba(0, 0, 0, 0) 100%);
    filter: blur(0.5px);
    mix-blend-mode: screen;
    animation-name: flameRise;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes flameRise {
    0% {
        transform: translateY(0) scale(0.7);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        transform: translateY(-40px) scale(1);
        opacity: 0.9;
    }
    80% {
        transform: translateY(-70px) scale(0.9);
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) scale(0.6);
        opacity: 0;
    }
}

header h1 {
    font-size: 2rem;
    letter-spacing: 1px;
}

header p {
    margin-top: 5px;
    color: #b5c1e0;
}

.header-card {
    padding: 12px 28px;
    border-radius: 14px;
    background: rgba(12, 15, 22, 0.88);
    border: 1px solid rgba(255, 216, 106, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    text-align: center;
}

.header-card h1 {
    font-size: 2rem;
    letter-spacing: 1px;
    color: #ffd86a;
    margin-bottom: 4px;
}

.header-card p {
    margin-top: 0;
    font-size: 0.98rem;
    color: #e2e6ff;
}

.wrapper {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 20px 20px 0;
}

aside {
    width: 260px;
    background: #141926;
    border: 1px solid #2f3b55;
    border-radius: 6px;
    padding: 15px;
    flex-shrink: 0;
}

aside h2 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #2f3b55;
    padding-bottom: 5px;
}

.sidebar-section {
    margin-bottom: 20px;
}

.sidebar-nav ul {
    list-style: none;
    margin-top: 10px;
}

.sidebar-nav li {
    margin-bottom: 8px;
}

.btn {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-primary {
    background: #ffb347;
    color: #111;
    font-weight: bold;
}

.btn-primary:hover {
    background: #ffc266;
}

.btn-discord {
    background: #5865f2;
    color: #fff;
    margin-top: 8px;
}

.btn-discord:hover {
    background: #6d79ff;
}

main {
    flex: 1;
    background: #141926;
    border: 1px solid #2f3b55;
    border-radius: 6px;
    padding: 20px;
}

.hero {
    padding-bottom: 15px;
    border-bottom: 1px solid #2f3b55;
    margin-bottom: 20px;
}

.hero h2 {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.hero p {
    color: #c4c9da;
    line-height: 1.5;
}

.stats {
    margin-top: 15px;
    font-size: 0.95rem;
}

.stats span {
    display: inline-block;
    margin-right: 15px;
    color: #9fb0ff;
}

.news h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.news article {
    background: #181f30;
    border-radius: 4px;
    padding: 12px 15px;
    margin-bottom: 12px;
}

.news article h4 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.news article time {
    font-size: 0.8rem;
    color: #9aa5c4;
}

.news article p {
    margin-top: 5px;
    color: #c4c9da;
}

footer {
    text-align: center;
    padding: 15px 0 25px;
    font-size: 0.85rem;
    color: #8088a4;
    flex-shrink: 0;
}

.logo-wrapper {
    position: relative;
    display: inline-block;
    padding: 14px;
    border-radius: 16px;
    background: #000;
    box-shadow: 0 0 25px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
    overflow: hidden;
}

.logo-wrapper img {
    display: block;
    max-width: 220px;
    height: auto;
}

.logo-wrapper .border {
    position: absolute;
    background: #ffd86a;
    display: block;
}

.logo-wrapper .border-top,
.logo-wrapper .border-bottom {
    height: 2px;
    width: 0;
}

.logo-wrapper .border-left,
.logo-wrapper .border-right {
    width: 2px;
    height: 0;
}

.logo-wrapper .border-top {
    top: 0;
    left: 0;
}

.logo-wrapper .border-right {
    top: 0;
    right: 0;
}

.logo-wrapper .border-bottom {
    bottom: 0;
    right: 0;
}

.logo-wrapper .border-left {
    bottom: 0;
    left: 0;
}

@keyframes draw-horizontal {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes draw-vertical {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

@keyframes glow-flash {
    0%,
    80% {
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
    }
    90% {
        box-shadow: 0 0 40px rgba(255, 255, 0, 1), 0 0 80px rgba(255, 255, 0, 0.9);
    }
    100% {
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.8), 0 0 60px rgba(255, 0, 0, 0.4);
    }
}

.logo-link:hover .border-top {
    animation: draw-horizontal 0.3s linear forwards;
}

.logo-link:hover .border-right {
    animation: draw-vertical 0.3s linear forwards;
    animation-delay: 0.3s;
}

.logo-link:hover .border-bottom {
    animation: draw-horizontal 0.3s linear forwards;
    animation-delay: 0.6s;
}

.logo-link:hover .border-left {
    animation: draw-vertical 0.3s linear forwards;
    animation-delay: 0.9s;
}

.logo-link:hover .logo-wrapper {
    animation: glow-flash 0.7s ease-out 1 forwards;
    animation-delay: 1.2s;
}

.auth-page {
    max-width: 420px;
    margin: 0 auto;
}

.auth-page h2 {
    margin-bottom: 15px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    color: #c4c9da;
}

.auth-form input {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
}

.auth-form button {
    margin-top: 8px;
    align-self: flex-start;
}

.form-errors {
    background: #3b1220;
    border: 1px solid #ff4d4d;
    color: #ffdede;
    padding: 10px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.form-errors ul {
    list-style: disc;
    padding-left: 18px;
}

.staff-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.staff-icon {
    height: 16px;
    width: auto;
    display: inline-block;
    image-rendering: pixelated;
    vertical-align: middle;
}

.staff-name {
    font-weight: 700;
}

.staff-mod {
    color: #d9d9d9;
    text-shadow: 0 0 4px #ffffff, 0 0 8px #c0c0c0;
}

.staff-forummod {
    color: #7aff7a;
    text-shadow: 0 0 4px #7aff7a, 0 0 8px #1f7a1f;
}

.staff-admin {
    color: #ffe76b;
    text-shadow: 0 0 4px #ffe76b, 0 0 8px #ffb400;
}

.staff-owner {
    color: #ff5a5a;
    text-shadow: 0 0 4px #ff5a5a, 0 0 8px #ff0000;
}

.donor-donator {
    color: #ff4c4c;
    text-shadow: 0 0 4px #ff4c4c, 0 0 8px #a30000;
}

.donor-emerald {
    color: #008f3d;
    text-shadow: 0 0 4px #00ff7f, 0 0 8px #006622;
}

.donor-super {
    color: #7aff7a;
    text-shadow: 0 0 4px #7aff7a, 0 0 8px #1f7a1f;
}

.donor-legendary {
    color: #c66bff;
    text-shadow: 0 0 4px #c66bff, 0 0 8px #6b2ca8;
}

.donor-respected {
    color: #111111;
    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #ffffff,
        0 0 6px #9f9f9f;
}

.donor-platinum {
    color: #e5e4e2;
    text-shadow: 0 0 4px #ffffff, 0 0 8px #b0b0b0;
}

@keyframes onyxGlow {
    0% {
        color: #d8d7d5;
        text-shadow: 0 0 4px #ffffff, 0 0 8px #a0a0a0;
    }
    50% {
        color: #ffffff;
        text-shadow: 0 0 6px #ffffff, 0 0 12px #d8d7d5;
    }
    100% {
        color: #d8d7d5;
        text-shadow: 0 0 4px #ffffff, 0 0 8px #a0a0a0;
    }
}

.donor-onyx {
    animation: onyxGlow 2.2s ease-in-out infinite;
}

@keyframes zenytePulse {
    0% {
        color: #ff9a3c;
        text-shadow: 0 0 4px #ff9a3c, 0 0 8px #a64700;
    }
    50% {
        color: #ffd36b;
        text-shadow: 0 0 6px #ffd36b, 0 0 14px #ff9a3c;
    }
    100% {
        color: #ff9a3c;
        text-shadow: 0 0 4px #ff9a3c, 0 0 8px #a64700;
    }
}

.donor-zenyte {
    animation: zenytePulse 2s ease-in-out infinite;
}

/* ===== CUSTOM CURSORS ===== */

body {
    cursor: url("/images/Normal Select.cur"), auto;
}

a,
button,
.btn,
.auth-link {
    cursor: url("/images/Link Select.cur"), pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    cursor: url("/images/Text Select.cur"), text;
}

.cursor-busy {
    cursor: url("/images/Busy.cur"), wait;
}

.cursor-working {
    cursor: url("/images/Working in Background.cur"), progress;
}

.cursor-alternate {
    cursor: url("/images/Alternate Select.cur"), default;
}

.cursor-help {
    cursor: url("/images/Help Select.cur"), help;
}

.cursor-move {
    cursor: url("/images/Move.cur"), move;
}

.cursor-unavailable {
    cursor: url("/images/Unavailable.cur"), not-allowed;
}

.cursor-precision {
    cursor: url("/images/Precision Select.cur"), crosshair;
}

.cursor-handwriting {
    cursor: url("/images/Handwriting.cur"), text;
}

.resize-horizontal {
    cursor: url("/images/Horizontal Resize.cur"), ew-resize;
}

.resize-vertical {
    cursor: url("/images/Vertical Resize.cur"), ns-resize;
}

.resize-diagonal-1 {
    cursor: url("/images/Diagonal Resize 1.cur"), nwse-resize;
}

.resize-diagonal-2 {
    cursor: url("/images/Diagonal Resize 2.cur"), nesw-resize;
}
.footer-online {
    max-width: 1200px;
    margin: 0 auto 8px;
    padding: 8px 12px;
    border-top: 1px solid #2f3b55;
    border-bottom: 1px solid #2f3b55;
    background: #0c0f16;
    font-size: 0.9rem;
}

.footer-online-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.footer-online-label {
    font-weight: 600;
    color: #ffd86a;
}

.footer-online-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.footer-online-user {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-online-empty {
    color: #8088a4;
}

.footer-online-guests {
    text-align: center;
    color: #c4c9da;
}
.auth-link-admin {
    font-weight: 700;
    color: #ffd86a;
}

.auth-link-admin:hover {
    color: #ffffff;
    text-decoration: underline;
}

.admin-page {
    max-width: 900px;
    margin: 0 auto;
}

.admin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    padding: 10px 12px;
    border: 1px solid #2f3b55;
    border-radius: 6px;
    background: #0c0f16;
    font-size: 0.9rem;
}

.admin-legend div {
    min-width: 180px;
}

.admin-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.admin-search input[type="text"] {
    flex: 1;
    min-width: 200px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
}

.admin-user-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.admin-user-table th,
.admin-user-table td {
    border: 1px solid #2f3b55;
    padding: 6px 8px;
    text-align: left;
}

.admin-user-table th {
    background: #181f30;
    color: #ffd86a;
}

.admin-user-table tr:nth-child(even) {
    background: #111826;
}

.admin-user-table tr:nth-child(odd) {
    background: #151b2b;
}

.admin-edit-link {
    color: #ffd86a;
    font-weight: 600;
}

.admin-edit-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.admin-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 10px 0 5px;
    font-size: 0.9rem;
}

.admin-page-link {
    color: #ffd86a;
    text-decoration: none;
}

.admin-page-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.admin-page-current {
    color: #c4c9da;
}

.admin-success {
    background: #123b1f;
    border: 1px solid #3cff7a;
    color: #d9ffe3;
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.admin-edit-form select {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
}

.admin-back-link {
    margin-left: 10px;
    font-size: 0.9rem;
    color: #ffd86a;
    text-decoration: none;
}

.admin-back-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.admin-meta {
    margin-top: 12px;
    font-size: 0.85rem;
    color: #9aa5c4;
}
/* Avatar in header */
.profile-avatar-small {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
    border: 1px solid #2f3b55;
}

/* Profile page layout */
.profile-page {
    max-width: 520px;
    margin: 0 auto;
}

.profile-card {
    background: #181f30;
    border-radius: 6px;
    border: 1px solid #2f3b55;
    padding: 16px 18px;
    margin-top: 10px;
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.profile-avatar-large {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffd86a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.profile-username {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.profile-email {
    font-size: 0.9rem;
    color: #c4c9da;
}

.profile-bio-textarea {
    min-height: 120px;
    resize: vertical;
}

.profile-bio-display {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.95rem;
    color: #d8dff5;
    /* Keep line breaks, but don't preserve multiple spaces/tabs */
    white-space: pre-line;
    line-height: 1.5;
    text-align: left;
}


.profile-bio-empty {
    color: #8b92aa;
    font-style: italic;
}

/* Make the header name/avatars clickable but keep look */
.staff-display-link {
    text-decoration: none;
    color: inherit;
}

/* Footer profile links: no underline */
.footer-profile-link {
    text-decoration: none;
}

/* Forum basics */
.forum-index h2,
.forum-category-page h2,
.forum-thread-page h2 {
    margin-bottom: 10px;
}

.forum-category-card {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    background: #111;
}

.forum-category-desc {
    color: #ccc;
    margin: 4px 0 8px;
}

.forum-category-meta span {
    margin-right: 12px;
    font-size: 12px;
    color: #888;
}

/* Thread list */
.forum-thread-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 14px;
}

.forum-thread-table th,
.forum-thread-table td {
    padding: 8px;
    border-bottom: 1px solid #222;
}

.forum-thread-title {
    font-weight: 600;
}

.forum-thread-author {
    margin-top: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #aaa;
}

.thread-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 6px;
    text-transform: uppercase;
}

.thread-badge-sticky {
    background: #444400;
    color: #ffeb3b;
}

.thread-badge-locked {
    background: #440000;
    color: #ff7777;
}

/* Posts */
.forum-post-list {
    margin-top: 20px;
}

.forum-post {
    display: flex;
    padding: 10px;
    border: 1px solid #222;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #111;
}

/* Staff shading:
   1 = silver, 2 = green, 3 = gold, 4 = red (subtle tinted backgrounds) */
.forum-post.staff-1 {
    background: rgba(192, 192, 192, 0.07); /* silver */
}

.forum-post.staff-2 {
    background: rgba(0, 128, 0, 0.12); /* green */
}

.forum-post.staff-3 {
    background: rgba(212, 175, 55, 0.14); /* gold */
}

.forum-post.staff-4 {
    background: rgba(178, 34, 34, 0.16); /* red */
}

.forum-post-left {
    width: 160px;
    padding-right: 12px;
    text-align: center;
    border-right: 1px solid #222;
    margin-right: 12px;
}

.profile-avatar-forum {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid #333;
    display: block;
    margin: 0 auto 6px;
}

.forum-post-username {
    display: inline-flex;
    flex-direction: row;      /* crown and name side-by-side */
    align-items: center;      /* vertically center them */
    justify-content: center;
    gap: 4px;                 /* small space between crown and name */
    font-size: 13px;
}


.forum-post-right {
    flex: 1;
}

.forum-post-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}

.forum-post-content {
    white-space: normal;   /* let HTML <br> handle line breaks */
    font-size: 14px;
    line-height: 1.5;
}


/* Reply box */
.forum-reply-box {
    margin-top: 20px;
}

/* Forum mod */
.forum-mod-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
}

.forum-mod-table th,
.forum-mod-table td {
    border-bottom: 1px solid #222;
    padding: 6px;
}

.forum-quick-thread-tools {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forum-quick-thread-buttons button {
    margin-right: 6px;
}
/* === Forum layout width fixes === */

/* Main forum containers should stretch full width of <main> */
.forum-index,
.forum-category-list,
.forum-thread-list,
.forum-post-list {
    width: 100%;
    max-width: 100%;
    margin: 0;              /* remove auto-centering */
    padding: 0;
    box-sizing: border-box;
}

/* Each row / post should span the full container width */
.forum-category-row,
.forum-thread-row,
.forum-post {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;      /* breathing room between rows */
}

/* If you have inner columns (like left/right sides) */
.forum-category-main,
.forum-thread-main,
.forum-post-main {
    flex: 1 1 auto;
}

/* Optional: ensure text isn’t centered */
.forum-category-row,
.forum-thread-row,
.forum-post,
.forum-post-content {
    text-align: left;
}
/* === Forums should use full main width, not the narrow auth-page width === */
.auth-page.forum-index,
.auth-page.forum-category-page,
.auth-page.forum-thread-page,
.forum-index,
.forum-category-page,
.forum-thread-page {
    max-width: 100%;
    width: 100%;
    margin: 0; /* no centering */
}
/* Group the Forum Mod / Admin links nicely on the left side */
.auth-left-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto; /* pushes the rest of the auth bar content to the right */
}

/* Shared pill-style look for staff links */
.auth-link-forum-mod,
.auth-link-admin {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 216, 106, 0.4);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
    text-decoration: none;
}

/* Forum Mod: cool teal/blue badge */
.auth-link-forum-mod {
    background: radial-gradient(circle at 0 0, #4dd0ff 0, #1a2b3f 55%, #05070c 100%);
    color: #e6f7ff;
    border-color: #4dd0ff;
}

/* Admin: golden badge (keeps your existing color, just enhanced) */
.auth-link-admin {
    background: radial-gradient(circle at 0 0, #ffd86a 0, #7a4b00 55%, #05070c 100%);
    color: #ffffff;
    border-color: #ffd86a;
}

/* Override generic hover so pills glow instead of underlining */
.auth-link-forum-mod:hover,
.auth-link-admin:hover {
    text-decoration: none;
    filter: brightness(1.1);
}
/* ===== Highscores main page ===== */

.highscores-page {
    max-width: 100%;
    width: 100%;
}

.highscores-page h2 {
    margin-bottom: 4px;
}

.highscores-subtitle {
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #c4c9da;
}

.highscores-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Main table area */
.highscores-main {
    flex: 1 1 auto;
}

/* Skill nav on the right */
.highscores-skill-nav {
    width: 200px;
    background: #181f30;
    border: 1px solid #2f3b55;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.highscores-skill-nav h3 {
    margin-bottom: 6px;
    font-size: 0.95rem;
    color: #ffd86a;
    border-bottom: 1px solid #2f3b55;
    padding-bottom: 4px;
}

.highscores-skill-nav ul {
    list-style: none;
    margin-top: 6px;
}

.highscores-skill-nav li {
    margin-bottom: 4px;
}

.highscores-skill-link {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    color: #e2e6ff;
    text-decoration: none;
}

.highscores-skill-link:hover {
    background: #222a3f;
    text-decoration: none;
}

.highscores-skill-link.active {
    background: #ffd86a;
    color: #111;
    font-weight: 600;
}

/* Table */
.highscores-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.highscores-table th,
.highscores-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #222;
}

.highscores-table th {
    background: #181f30;
    color: #ffd86a;
    text-align: left;
}

.highscores-table tr:nth-child(even) {
    background: #111826;
}

.highscores-table tr:nth-child(odd) {
    background: #151b2b;
}

.highscores-col-rank {
    width: 70px;
}

.highscores-col-name {
    min-width: 160px;
}

.highscores-col-level,
.highscores-col-xp {
    width: 120px;
    text-align: right;
}

.highscores-rank {
    font-weight: 600;
}

.highscores-name {
    white-space: nowrap;
}

.highscores-level,
.highscores-xp {
    text-align: right;
}

/* Pagination */
.highscores-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.highscores-page-link {
    color: #ffd86a;
    text-decoration: none;
}

.highscores-page-link:hover {
    color: #ffffff;
    text-decoration: underline;
}

.highscores-page-current {
    color: #c4c9da;
}

/* ===== Player highscores page ===== */

.highscores-player-page {
    max-width: 600px;
    margin: 0 auto;
}

.highscores-player-header {
    margin-top: 4px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #2f3b55;
    background: #181f30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.9rem;
}

.highscores-player-summary-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.highscores-player-summary-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.highscores-player-rank {
    color: #ffd86a;
    font-weight: 600;
}

.highscores-player-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: #c4c9da;
}

/* Skill table on personal page */
.highscores-skill-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.highscores-skill-table th,
.highscores-skill-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #222;
}

.highscores-skill-table th {
    background: #181f30;
    color: #ffd86a;
    text-align: left;
}

.highscores-skill-table tr:nth-child(even) {
    background: #111826;
}

.highscores-skill-table tr:nth-child(odd) {
    background: #151b2b;
}

.highscores-skill-name {
    width: 50%;
}

.highscores-skill-level,
.highscores-skill-xp {
    width: 25%;
    text-align: right;
}

/* Forum moderation page should use full width, not narrow auth-page width */
.auth-page.forum-mod-page,
.forum-mod-page {
    max-width: 100%;
    width: 100%;
    margin: 0; /* no centering */
}

/* Make sure the moderation table stretches nicely */
.forum-mod-page .forum-mod-table {
    width: 100%;
}
.forum-post-content img.forum-embed-image {
    max-width: 100%;
    height: auto;
    display: block;
}
/* ===== Header message center ===== */

.auth-message-center {
    position: relative;
    margin-right: 12px;
}

.message-center-toggle {
    position: relative;
    background: transparent;
    border: 1px solid #2f3b55;
    border-radius: 999px;
    padding: 3px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e2e6ff;
    font-size: 0.9rem;
}

.message-center-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}

.message-center-icon {
    font-size: 1rem;
    line-height: 1;
}

.message-center-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ff4d4d;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px rgba(0,0,0,0.8);
}

/* Dropdown */

.message-center-dropdown {
    position: absolute;
    right: 0;
    top: 120%;
    width: 320px;
    background: #141926;
    border: 1px solid #2f3b55;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.7);
    padding: 8px 0 6px;
    display: none;
    z-index: 2000;
}

.message-center-dropdown.is-open {
    display: block;
}

.message-center-dropdown-header {
    padding: 4px 12px 8px;
    border-bottom: 1px solid #2f3b55;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.message-center-unread-label {
    font-size: 0.8rem;
    color: #ffd86a;
}

.message-center-empty {
    padding: 10px 12px;
    font-size: 0.85rem;
    color: #c4c9da;
}

.message-center-list-wrapper {
    max-height: 220px;
    overflow-y: auto;
}

.message-center-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.message-center-item {
    border-bottom: 1px solid #1b2336;
}

.message-center-item:last-child {
    border-bottom: none;
}

.message-center-item-link {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #e2e6ff;
}

.message-center-item-link:hover {
    background: #1b2336;
    text-decoration: none;
}

.message-center-item-title {
    font-size: 0.9rem;
    margin-bottom: 3px;
}

.message-center-item-meta {
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    opacity: 0.8;
}

.message-center-item-unread .message-center-item-title {
    font-weight: 700;
}

.message-center-item-unread .message-center-item-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4dd0ff;
    margin-right: 6px;
}

.message-center-view-all {
    display: block;
    text-align: center;
    padding: 6px 12px 4px;
    font-size: 0.85rem;
    color: #ffd86a;
    border-top: 1px solid #2f3b55;
}

.message-center-view-all:hover {
    background: #181f30;
    text-decoration: none;
}

/* ===== Message center page ===== */

/* Message center should use full width, like forums */
.message-center-page,
.auth-page.message-center-page {
    max-width: 100%;
    width: 100%;
    margin: 0;            /* no centering */
}

.message-center-page h2 {
    margin-bottom: 8px;
}

.message-center-layout {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
}

.message-center-sidebar {
    border-radius: 6px;
    border: 1px solid #2f3b55;
    background: #181f30;
    overflow: hidden;
}

.message-center-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.message-center-sidebar-item {
    border-bottom: 1px solid #1b2336;
}

.message-center-sidebar-item:last-child {
    border-bottom: none;
}

.message-center-sidebar-link {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: #e2e6ff;
    font-size: 0.9rem;
}

.message-center-sidebar-link:hover {
    background: #1f273c;
    text-decoration: none;
}

.message-center-sidebar-item-unread .message-center-sidebar-title {
    font-weight: 700;
}

.message-center-sidebar-item-unread .message-center-sidebar-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4dd0ff;
    margin-right: 6px;
}

.message-center-sidebar-title {
    margin-bottom: 3px;
}

.message-center-sidebar-meta {
    font-size: 0.75rem;
    opacity: 0.8;
}

.message-center-sidebar-item-active .message-center-sidebar-link {
    background: #222a3f;
}

.message-center-detail {
    border-radius: 6px;
    border: 1px solid #2f3b55;
    background: #181f30;
    padding: 14px 16px;
}

.message-center-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.message-center-from {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.message-center-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ffd86a;
    background: #000;
}

.message-center-from-name {
    font-size: 0.95rem;
    font-weight: 600;
}

.message-center-from-meta {
    font-size: 0.8rem;
    color: #c4c9da;
}

.message-center-detail-title {
    font-size: 1.1rem;
    margin: 6px 0 10px;
    color: #ffd86a;
}

.message-center-detail-body {
    font-size: 0.95rem;
    color: #d8dff5;
    line-height: 1.6;
}

.message-center-detail-body a {
    color: #ffd86a;
    text-decoration: underline;
}

.message-center-detail-body a:hover {
    color: #ffffff;
}

.message-center-detail-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 8px 0;
}
.admin-site-messages {
    margin-bottom: 20px;
}

.admin-site-messages h3 {
    margin-bottom: 8px;
}

.admin-site-messages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.admin-message-form {
    border: 1px solid #2f3b55;
    border-radius: 6px;
    padding: 10px 12px;
    background: #0c0f16;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-message-form h4 {
    margin-bottom: 4px;
}

.admin-message-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
    color: #c4c9da;
}

.admin-message-form input[type="text"],
.admin-message-form textarea {
    margin-top: 3px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
}

.admin-message-form textarea {
    resize: vertical;
    min-height: 80px;
}

.admin-message-form .forum-format-help {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #9aa5c4;
}
/* Player lookup search in highscores sidebar */
.highscores-player-search {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.highscores-player-search label {
    font-size: 0.85rem;
    color: #c4c9da;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.highscores-player-search input[type="text"] {
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
}

.highscores-player-search button.btn-primary {
    align-self: flex-end;
    padding: 4px 8px;
    font-size: 0.8rem;
}
/* ===== Homepage layout ===== */

.homepage-hero {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

.homepage-hero-media {
    position: relative;
}

.homepage-slider {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #2f3b55;
    background: #000;
    min-height: 220px;
}

.homepage-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.homepage-slide.active {
    opacity: 1;
}

.homepage-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* If only one slide, make sure it's visible */
.homepage-slide:first-child:only-child {
    position: relative;
    opacity: 1;
}

.homepage-hero-copy {
    background: #181f30;
    border-radius: 10px;
    border: 1px solid #2f3b55;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.homepage-hero-copy h2 {
    font-size: 1.6rem;
    margin-bottom: 8px;
}

.homepage-hero-copy p {
    color: #c4c9da;
    line-height: 1.5;
    margin-bottom: 12px;
}

.homepage-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Panels under hero */

.homepage-panels {
    margin-top: 10px;
}

.homepage-panels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.homepage-card {
    background: #181f30;
    border-radius: 8px;
    border: 1px solid #2f3b55;
    padding: 14px 16px;
    font-size: 0.95rem;
}

.homepage-card h3 {
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: #ffd86a;
}

/* Latest forum post */

.homepage-latest-post {
    font-size: 0.9rem;
}

.homepage-latest-title {
    font-weight: 600;
    display: inline-block;
    margin-bottom: 4px;
}

.homepage-latest-meta {
    color: #9aa5c4;
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.homepage-latest-link a {
    font-size: 0.85rem;
}

/* Top 3 table */

.homepage-top3-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 4px;
}

.homepage-top3-table th,
.homepage-top3-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #222;
}

.homepage-top3-table th {
    background: #141b2a;
    color: #ffd86a;
    text-align: left;
}

.homepage-top3-link {
    margin-top: 6px;
    font-size: 0.85rem;
}

/* Forums + ready cards */

.homepage-bullets {
    margin: 6px 0 8px;
    padding-left: 18px;
    color: #c4c9da;
}

.homepage-bullets li {
    margin-bottom: 3px;
}

.homepage-steps {
    margin: 6px 0 10px;
    padding-left: 18px;
    color: #c4c9da;
}

.homepage-steps li {
    margin-bottom: 6px;
}

.homepage-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* Responsive tweak */
@media (max-width: 800px) {
    .homepage-hero {
        grid-template-columns: 1fr;
    }
}
/* === Override homepage hero layout to make the image less wide & taller === */

/* Use flex instead of grid so the media block can have a fixed-ish width */
.homepage-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 20px;
}

/* Make the image block narrower */
.homepage-hero-media {
    flex: 0 0 600px;      /* ~360px wide on desktop */
    max-width: 100%;
}

/* Taller, less banner-y image area */
.homepage-slider {
    width: 100%;
    aspect-ratio: 4 / 4;  /* taller than wide */
    min-height: 0;        /* override old min-height if present */
    border-radius: 10px;
    border: 1px solid #2f3b55;
    background: #000;
    overflow: hidden;
    position: relative;
}

/* Slides still fade as before */
.homepage-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.homepage-slide.active {
    opacity: 1;
}

.homepage-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Text card just takes the remaining width */
.homepage-hero-copy {
    flex: 1 1 260px;
}

/* Mobile: stack them and let the image be a bit more banner-like again if you want */
@media (max-width: 800px) {
    .homepage-hero {
        flex-direction: column;
    }

    .homepage-hero-media {
        flex: 0 0 auto;
    }

    .homepage-slider {
        aspect-ratio: 16 / 9; /* looks nicer on mobile, optional */
    }
}
.homepage-hero-lead {
    margin-bottom: 8px;
    font-size: 0.98rem;
    color: #e2e6ff;
    line-height: 1.6;
}

.homepage-hero-points {
    list-style: none;
    margin: 6px 0 10px;
    padding-left: 0;
    font-size: 0.9rem;
    color: #c4c9da;
}

.homepage-hero-points li {
    margin-bottom: 4px;
}

.homepage-hero-points a {
    color: #ffd86a;
    text-decoration: none;
}

.homepage-hero-points a:hover {
    text-decoration: underline;
}

.homepage-hero-small {
    font-size: 0.85rem;
    color: #9aa5c4;
    margin-bottom: 10px;
}
.homepage-latest-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 0.9rem;
}

.homepage-latest-item + .homepage-latest-item {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #222838;
}

.homepage-latest-title {
    font-weight: 600;
    color: #ffd86a;
}

.homepage-latest-title:hover {
    text-decoration: underline;
}

.homepage-latest-meta {
    font-size: 0.8rem;
    color: #9aa5c4;
}
/* ===== Store Page ===== */

.store-page {
    max-width: 100%;
    width: 100%;
}

.store-page h2 {
    margin-bottom: 4px;
}

.store-subtitle {
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: #c4c9da;
}

.store-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* Main items area */
.store-main {
    flex: 1 1 auto;
}

/* Right sidebar */
.store-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Tabs */
.store-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.store-tab {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: #181f30;
    color: #e2e6ff;
    font-size: 0.85rem;
    text-decoration: none;
    border: 1px solid #2f3b55;
}

.store-tab:hover {
    background: #222a3f;
    text-decoration: none;
}

.store-tab.active {
    background: #ffd86a;
    color: #111;
    border-color: #ffd86a;
    font-weight: 600;
}

/* Global sale banner */
.store-global-sale-banner {
    margin-bottom: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    background: radial-gradient(circle at 0 0, #ffd86a 0, #7a4b00 55%, #05070c 100%);
    color: #111;
    font-size: 0.85rem;
}

/* Items grid */
.store-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}

.store-item-card {
    background: #181f30;
    border-radius: 6px;
    border: 1px solid #2f3b55;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.store-item-header h3 {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 4px;
}

.store-item-price {
    text-align: center;
    font-size: 0.9rem;
}

.store-item-price-main {
    font-weight: 600;
    color: #ffd86a;
}

.store-item-price-old {
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 5px;
}

.store-item-price-new {
    font-weight: 700;
    color: #7aff7a;
}

.store-item-price-sale-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.75rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: #440000;
    color: #ffaaaa;
}

.store-item-image-wrapper {
    text-align: center;
}

.store-item-image {
    max-width: 100%;
    height: 120px;
    object-fit: contain;
    image-rendering: auto;
}

.store-item-description {
    font-size: 0.85rem;
    color: #d8dff5;
    min-height: 48px;
}

.store-item-footer {
    border-top: 1px solid #2f3b55;
    padding-top: 8px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.store-quantity-label {
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.store-quantity-label select {
    flex: 1;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
}

.store-add-cart-btn {
    width: 100%;
}

/* Right side panels */
.store-panel {
    background: #181f30;
    border-radius: 6px;
    border: 1px solid #2f3b55;
    padding: 10px 12px;
    font-size: 0.9rem;
}

.store-panel + .store-panel {
    margin-top: 0;
}

.store-panel h3 {
    font-size: 0.95rem;
    margin-bottom: 6px;
}

.store-panel p {
    color: #c4c9da;
    margin-bottom: 6px;
}

.store-panel-muted {
    color: #8b92aa;
    font-size: 0.85rem;
}

.store-panel-highlight {
    color: #ffd86a;
    font-size: 0.85rem;
}

/* Cart */
.store-cart-empty {
    color: #8b92aa;
    font-size: 0.85rem;
}

.store-cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
}

.store-cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px solid #2f3b55;
}

.store-cart-line:last-child {
    border-bottom: none;
}

.store-cart-line-title {
    font-size: 0.9rem;
    font-weight: 600;
}

.store-cart-line-meta {
    font-size: 0.8rem;
    color: #c4c9da;
}

.store-cart-remove-form {
    margin: 0;
}

.store-cart-remove-btn {
    padding: 2px 6px;
    font-size: 0.8rem;
}

.store-cart-total {
    font-size: 0.9rem;
    margin-bottom: 6px;
}

.store-cart-actions {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.store-cart-actions .btn {
    flex: 1;
}

/* Account panel */
.store-account-stats {
    list-style: none;
    padding: 0;
    margin: 4px 0 8px;
    font-size: 0.85rem;
}

.store-account-stats li {
    margin-bottom: 2px;
}

.store-account-actions {
    display: flex;
    gap: 6px;
}

/* Collection box */
.store-collection-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.store-collection-line {
    border-bottom: 1px solid #2f3b55;
    padding: 4px 0;
    font-size: 0.85rem;
}

.store-collection-line:last-child {
    border-bottom: none;
}

.store-collection-title {
    font-weight: 600;
}

.store-collection-meta {
    color: #c4c9da;
    font-size: 0.8rem;
}

/* Make store use full width like forums */
.auth-page.store-page,
.store-page {
    max-width: 100%;
    width: 100%;
    margin: 0;
}
.admin-store-section {
    margin-top: 20px;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
}

.admin-store-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 8px;
}

.admin-store-column {
    flex: 1 1 320px;
}

.admin-store-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-store-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: #c4c9da;
}

.admin-store-form input[type="text"],
.admin-store-form input[type="number"],
.admin-store-form select,
.admin-store-form textarea {
    margin-top: 3px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid #2f3b55;
    background: #0c0f16;
    color: #eee;
    font-size: 0.85rem;
}

.admin-store-form textarea {
    resize: vertical;
}

.admin-store-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
/* Fix: remove background image behind store item title/cost */
.store-item-card,
.store-item-header,
.store-item-header h3 {
    background: none !important;
    background-image: none !important;
    box-shadow: none;
}

/* Optional: give the header a clean subtle look instead */
.store-item-header {
    padding-bottom: 4px;
    border-bottom: 1px solid #2f3b55;
}
/* THIS */
/* ===== Store item header fixes (override global <header> styles) ===== */

.store-item-card {
    background: #141926;
    border: 1px solid #2f3b55;
    border-radius: 6px;
    padding: 10px 10px 12px;
}

/* Reset the giant site header styles for store item headers */
.store-item-header {
    background: none !important;
    background-image: none !important;
    min-height: 0 !important;
    padding: 6px 10px 4px !important;
    margin: 0;
    border-bottom: 1px solid #2f3b55;
    box-shadow: none;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Make sure the title itself isn't carrying a background */
.store-item-header h3 {
    margin: 0;
    background: none !important;
    background-image: none !important;
}

/* Keep the price tight under the title */
.store-item-price {
    font-size: 0.9rem;
}

/* Optional: tidy the image area */
.store-item-image-wrapper {
    margin-top: 8px;
    text-align: center;
}

.store-item-image {
    max-width: 100%;
    height: auto;
    display: inline-block;
}
/* Kill the shaded overlay inherited from global header::before */
.store-item-header::before {
    content: none !important;
    background: none !important;
}
/* Smaller store item images */
.store-item-image-wrapper {
    height: 90px;              /* was 180px */
}

.store-item-image {
    max-height: 90px;
}
/* Center store item descriptions */
.store-item-description {
    text-align: center;
}
/* ==== Token purchase page ==== */
.store-token-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.store-token-package-card {
    background: #181f30;
    border: 1px solid #2f3b55;
    border-radius: 6px;
    padding: 12px 14px;
    text-align: center;
}

.store-token-package-card h3 {
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: #ffd86a;
}

.store-token-package-price {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.store-token-package-tokens {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.9rem;
    color: #c4c9da;
}

.store-token-package-desc {
    font-size: 0.9rem;
    color: #c4c9da;
    margin: 4px 0;
}

.store-token-package-rate {
    font-size: 0.85rem;
    color: #9aa5c4;
    margin-bottom: 6px;
}
/* Grid for token packages */
.store-token-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

/* Card wrapper */
.store-token-package-card {
    background: rgba(8, 10, 20, 0.95);
    border: 1px solid #2f3b55;
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
    position: relative;
    overflow: hidden;
}

/* Subtle glow on top */
.store-token-package-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(120, 180, 255, 0.12),
        transparent 40%,
        transparent 60%,
        rgba(180, 120, 255, 0.12)
    );
    opacity: 0.7;
    pointer-events: none;
}

/* Make internal content sit above the overlay */
.store-token-package-card > * {
    position: relative;
    z-index: 1;
}

/* Image area */
.store-token-package-image-wrapper {
    width: 100%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.store-token-package-image {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    image-rendering: pixelated; /* looks nice for RS-style icons, optional */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

/* Title */
.store-token-package-card h3 {
    margin: 6px 0 8px;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Price + tokens */
.store-token-package-price {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.store-token-package-tokens {
    display: block;
    font-size: 0.9rem;
    color: #c4e2ff;
    margin-top: 2px;
}

/* Tagline */
.store-token-package-desc {
    font-size: 0.9rem;
    color: #c4c9da;
    margin: 6px 0 4px;
}

/* Rate info */
.store-token-package-rate {
    font-size: 0.8rem;
    color: #9ca3c5;
    margin-bottom: 10px;
}

/* Button */
.store-token-package-card .btn.btn-primary {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* ===== Donator benefits page ===== */

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-gap: 16px;
    margin-top: 16px;
}

.benefits-card {
    background: #141926;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #2f3b55;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.benefits-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefits-icon {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: contain;
    background: #0b0f18;
    padding: 3px;
}

.benefits-rank-name {
    font-size: 1rem;
    font-weight: 600;
}

.benefits-rank-tagline {
    font-size: 0.8rem;
    color: #c4c9da;
}

.benefits-rank-blurb {
    font-size: 0.85rem;
    color: #c4c9da;
    margin-top: 4px;
}

.benefits-progress-wrapper {
    margin-top: 6px;
}

.benefits-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 4px;
    color: #c4c9da;
}

.benefits-progress-bar-bg {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #1a2030;
    overflow: hidden;
}

.benefits-progress-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #4fd1ff, #7c5cff);
    transition: width 0.3s ease;
}

.benefits-progress-note {
    font-size: 0.8rem;
    color: #97ffb0;
    margin-top: 4px;
}

.benefits-pill-current,
.benefits-pill-next {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-left: 4px;
}

.benefits-pill-current {
    background: #1f3d2c;
    color: #97ffb0;
}

.benefits-pill-next {
    background: #272136;
    color: #dccfff;
}

/* current in-game rank display */
.benefits-current-rank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.benefits-current-rank-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* FAQ section */
.benefits-faq {
    margin-top: 24px;
}

.benefits-faq h3 {
    margin-bottom: 8px;
}

.benefits-faq-item {
    margin-bottom: 10px;
}

.benefits-faq-item h4 {
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.benefits-faq-item p {
    font-size: 0.85rem;
    color: #c4c9da;
}
/* =========================================
   Recent Player Activity (index.php)
   ========================================= */

.homepage-card-activity {
    display: flex;
    flex-direction: column;
}

/* Wrap list so the card can't grow infinitely tall */
.homepage-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;          /* tweak to taste */
    overflow-y: auto;
    scrollbar-width: thin;
}

/* WebKit scrollbar styling (Chrome, Edge, etc.) */
.homepage-activity-list::-webkit-scrollbar {
    width: 6px;
}
.homepage-activity-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
.homepage-activity-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

/* Individual activity row */
.homepage-activity-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.85); /* dark slate */
    border: 1px solid rgba(148, 163, 184, 0.15);
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
    font-size: 0.85rem;
}

.homepage-activity-item:last-child {
    margin-bottom: 0;
}

.homepage-activity-item:hover {
    background: rgba(30, 64, 175, 0.35); /* subtle blue highlight */
    border-color: rgba(129, 140, 248, 0.6);
    transform: translateY(-1px);
}

/* Top row: icon + text */
.homepage-activity-main {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* Optional small icon / badge at left */
.homepage-activity-icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #e5e7eb;
    background: linear-gradient(135deg, #0f172a, #1f2937);
    border: 1px solid rgba(148, 163, 184, 0.5);
}

.homepage-activity-text {
    flex: 1 1 auto;
    color: #e5e7eb;
    line-height: 1.3;
    word-break: break-word;
}

/* Bottom meta row: player / time */
.homepage-activity-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3px;
    font-size: 0.78rem;
    color: #9ca3af;
}

.homepage-activity-player {
    font-weight: 600;
    color: #e5e7eb;
}

.homepage-activity-time {
    font-style: italic;
    opacity: 0.9;
}

/* Type-specific color accents (depends on event_type column) */
.homepage-activity-item.activity-type-drop .homepage-activity-icon {
    background: linear-gradient(135deg, #7f1d1d, #b91c1c);
    border-color: rgba(248, 113, 113, 0.8);
}

.homepage-activity-item.activity-type-level_up .homepage-activity-icon {
    background: linear-gradient(135deg, #065f46, #059669);
    border-color: rgba(52, 211, 153, 0.8);
}

.homepage-activity-item.activity-type-level_99 .homepage-activity-icon {
    background: linear-gradient(135deg, #92400e, #f59e0b);
    border-color: rgba(251, 191, 36, 0.9);
}

/* Tiny badge style if you use them in the text */
.homepage-activity-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-left: 4px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #e5e7eb;
}
/* ================================
   ISSUE TRACKER STYLING
   ================================ */

/* Small label chips for category & severity */
.issue-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(10, 15, 30, 0.9);
    color: #d0d5f0;
    white-space: nowrap;
}

/* Category pill */
.issue-pill-cat {
    margin-left: 4px;
    margin-bottom: 2px;
    background: linear-gradient(135deg, #243b5a, #1a2640);
    color: #e1e7ff;
}

/* Severity colors */
.issue-pill-sev-low {
    background: rgba(46, 139, 87, 0.15);
    border-color: rgba(46, 139, 87, 0.7);
    color: #9be7b0;
}

.issue-pill-sev-medium {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255, 193, 7, 0.7);
    color: #ffe082;
}

.issue-pill-sev-high {
    background: rgba(255, 111, 0, 0.14);
    border-color: rgba(255, 111, 0, 0.8);
    color: #ffb380;
}

.issue-pill-sev-critical {
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.9);
    color: #ff9da6;
}

/* Issue cards inside the three columns */
.admin-page .store-panel {
    background: radial-gradient(circle at top left, #1e293b 0%, #0b1020 60%);
    border-radius: 10px;
    border: 1px solid #2f3b55;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.7), 0 10px 25px rgba(0,0,0,0.45);
}

/* Column headings (Received / Working on it / Fixed) */
.admin-store-column > h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e5edff;
}

.admin-store-column > h3::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #45b3ff;
}

/* Make each status header distinct-ish */
.admin-store-column:nth-child(1) > h3::before {
    background: #f59e0b; /* received */
}
.admin-store-column:nth-child(2) > h3::before {
    background: #3b82f6; /* in progress */
}
.admin-store-column:nth-child(3) > h3::before {
    background: #22c55e; /* fixed */
}

/* Issue description text */
.admin-page .store-panel p {
    color: #d2dcff;
}

/* Admin form inside each issue panel */
.admin-page .store-panel .admin-store-form select,
.admin-page .store-panel .admin-store-form textarea,
.admin-page .store-panel .admin-store-form input[type="text"] {
    background-color: #0b1020;
    border: 1px solid #2f3b55;
    color: #e5edff;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.85rem;
}

.admin-page .store-panel .admin-store-form select:focus,
.admin-page .store-panel .admin-store-form textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
}

/* Save changes button inside issue cards */
.admin-page .store-panel .admin-store-form .btn.btn-primary {
    font-size: 0.8rem;
    padding: 6px 12px;
}

/* Small muted helper text in forms */
.store-panel-muted {
    color: #8c9ac7;
}

/* Change log section */
.admin-page .store-panel .issue-log {
    margin-top: 8px;
    border-top: 1px dashed #2f3b55;
    padding-top: 6px;
}

.admin-page .store-panel .issue-log-title {
    font-size: 0.8rem;
    color: #9ca3c0;
    margin-bottom: 4px;
}

.admin-page .store-panel .issue-log-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.8rem;
    color: #cbd5ff;
}

.admin-page .store-panel .issue-log-list li {
    margin-bottom: 2px;
}

/* Time + admin names in log */
.admin-page .store-panel .issue-log-time {
    color: #8fa1ff;
    font-family: monospace;
    margin-right: 4px;
}

.admin-page .store-panel .issue-log-admin {
    color: #fbbf24;
    font-weight: 600;
}

/* Screenshot preview inside issue card */
.admin-page .store-panel img[alt="Issue screenshot"] {
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    cursor: zoom-in;
}

.admin-page .store-panel img[alt="Issue screenshot"]:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 22px rgba(0,0,0,0.6);
}

/* Filters bar on top of issue tracker */
.admin-page .admin-search select {
    background-color: #0b1020;
    border: 1px solid #2f3b55;
    color: #e5edff;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 0.85rem;
}

.admin-page .admin-search select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
}
/* ================================
   REPORT ISSUE PAGE STYLING
   ================================ */

/* Page container */
.auth-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* Heading + intro text */
.auth-page h2 {
    font-size: 1.8rem;
    margin-bottom: 6px;
    color: #e5edff;
}

.auth-page .store-subtitle {
    max-width: 720px;
    margin: 0 auto 18px auto;
    font-size: 0.95rem;
    color: #a9b4da;
    text-align: center;
}

/* Main card form */
.auth-page .store-panel[enctype="multipart/form-data"] {
    background: radial-gradient(circle at top left, #1e293b 0%, #050816 65%);
    border-radius: 12px;
    border: 1px solid #27334b;
    padding: 20px 22px;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.7),
        0 18px 40px rgba(0, 0, 0, 0.65);
}

.auth-page .store-panel h3 {
    font-size: 1.1rem;
    margin-bottom: 14px;
    color: #f9fbff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.auth-page .store-panel h3::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #6366f1);
}

/* Form layout */
.auth-page .store-panel label {
    display: block;
    margin-bottom: 14px;
    font-size: 0.9rem;
    color: #c6d0ff;
}

.auth-page .store-panel label > span {
    display: inline-block;
    margin-bottom: 4px;
}

/* Inputs, selects, textareas */
.auth-page .store-panel input[type="text"],
.auth-page .store-panel select,
.auth-page .store-panel textarea {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #27334b;
    background-color: #050816;
    color: #e5edff;
    padding: 8px 10px;
    font-size: 0.9rem;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    box-sizing: border-box;
}

.auth-page .store-panel textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.45;
}

.auth-page .store-panel input[type="text"]:focus,
.auth-page .store-panel select:focus,
.auth-page .store-panel textarea:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4);
    background-color: #020617;
}

/* Help text under fields */
.auth-page .store-panel .store-panel-muted {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: #8f9ac8;
}

/* File input */
.auth-page .store-panel input[type="file"] {
    margin-top: 4px;
    font-size: 0.85rem;
    color: #d1ddff;
}

/* Submit button */
.auth-page .store-panel .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 0.9rem;
    border-radius: 999px;
    margin-top: 12px;
    background: linear-gradient(135deg, #3b82f6, #22c55e);
    border: none;
    box-shadow: 0 8px 22px rgba(15, 118, 110, 0.55);
}

.auth-page .store-panel .btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.55);
}

/* Error + success messages on this page */
.auth-page .form-errors {
    max-width: 700px;
    margin: 0 auto 14px auto;
}

.auth-page .admin-success {
    max-width: 700px;
    margin: 0 auto 14px auto;
}

/* Small tweak so the list inside errors looks cleaner */
.auth-page .form-errors ul {
    padding-left: 18px;
    margin: 4px 0 0 0;
}

.auth-page .form-errors li {
    margin-bottom: 2px;
    font-size: 0.85rem;
}
/* ===============================
   ISSUE TRACKER – FULL WIDTH LAYOUT
   =============================== */

.auth-page.admin-page.issues-page {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 24px 24px 40px;
    box-sizing: border-box;
}

/* Title + back button area */
.issues-page h2 {
    font-size: 1.7rem;
    margin-bottom: 8px;
}

.issues-page > div .btn.btn-secondary {
    margin-bottom: 4px;
}

/* Filters bar spanning width */
.issues-page .admin-search {
    max-width: 100%;
    margin: 0 0 16px 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.issues-page .admin-search select {
    min-width: 180px;
}

/* Three columns stretch full width */
.issues-page .admin-store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}

/* Columns */
.issues-page .admin-store-column {
    min-width: 0;
}

.issues-page .admin-store-column h3 {
    margin-bottom: 10px;
    font-size: 1.05rem;
    color: #e5edff;
}

/* Make issue cards fill columns nicely */
.issues-page .issue-card {
    width: 100%;
}

/* Message boxes align to width too */
.issues-page .form-errors,
.issues-page .admin-success {
    max-width: 100%;
    margin: 0 0 14px 0;
}
header {
    position: relative;
}

/* Keep the logo above the flames */
.logo-wrapper {
    position: relative;
    z-index: 2;
}

/* Make sure header can contain absolutely positioned falling items */
header {
    position: relative;
    overflow: hidden; /* keep items inside header only */
}

/* Falling item style */
.falling-item {
    position: absolute;
    top: -40px; /* start slightly above header */
    width: 24px;        /* adjust to your icon size */
    height: 24px;
    pointer-events: none;
    image-rendering: pixelated; /* nice for RuneScape-style icons */
    will-change: top, transform, opacity;

    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards;
    opacity: 0;
}

/* Vertical falling */
@keyframes fall {
    0% {
        top: -40px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        top: 120%; /* past the bottom of the header */
        opacity: 0;
    }
}

/* Side-to-side + slight rotation for "feather" effect */
@keyframes sway {
    0%   { transform: translateX(0) rotate(0deg); }
    25%  { transform: translateX(-8px) rotate(-5deg); }
    50%  { transform: translateX(4px) rotate(3deg); }
    75%  { transform: translateX(-4px) rotate(-3deg); }
    100% { transform: translateX(0) rotate(0deg); }
}
.highscores-skill-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.highscores-skill-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated; /* looks good for RS icons */
}
/* ===== Highscores mode tabs (Mains / Ironman / Realism / XP modes) ===== */

.highscores-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 20px;
    border-bottom: 1px solid #1c2537;
    padding-bottom: 6px;
}

.highscores-mode-tabs a {
    padding: 6px 12px;
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #050814;
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.highscores-mode-tabs a:hover {
    background: #0b1020;
    color: #e5e7eb;
    border-color: #374151;
    transform: translateY(-1px);
}

.highscores-mode-tabs a.active {
    background: #2563eb;
    border-color: #3b82f6;
    color: #f9fafb;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.4);
}

/* ===== Player page: game mode / XP mode badges ===== */

.highscores-player-summary-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.highscores-player-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 2px;
    font-size: 0.8rem;
}

.highscores-mode-pill {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #1f2937;
    background: #050814;
    color: #e5e7eb;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Slight color hints per type (tweak as you like) */
.highscores-mode-pill-game {
    border-color: #4b5563;
}

.highscores-mode-pill-game.ironman {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.highscores-mode-pill-game.realism {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.highscores-mode-pill-xp {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.12);
}

/* Optional: description text under header */
.highscores-player-mode-desc {
    margin-top: 6px;
    font-size: 0.82rem;
    color: #9ca3af;
}
/* ===== Highscores mode tabs (Mains / Ironman / Realism / XP etc.) ===== */

.highscores-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    margin: 12px 0 18px;
    border-bottom: 1px solid #222a3d;
    padding-bottom: 0;
}

.highscores-mode-tabs a {
    position: relative;
    top: 1px; /* so active tab visually sits on top of border */
    padding: 8px 14px;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 6px 6px 0 0;
    border: 1px solid #222a3d;
    border-bottom: none;
    background: #101523;
    color: #cfd6f5;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.highscores-mode-tabs a:hover {
    background: #171d30;
    color: #ffffff;
    border-color: #2f3b55;
}

.highscores-mode-tabs a.active {
    background: #181f33;
    color: #ffffff;
    border-color: #4c7dff;
    box-shadow: 0 -2px 0 #4c7dff inset;
    font-weight: 600;
    z-index: 2;
}

/* optional: make tabs wrap nicely on small screens */
@media (max-width: 640px) {
    .highscores-mode-tabs {
        gap: 2px;
    }

    .highscores-mode-tabs a {
        flex: 1 1 calc(50% - 4px);
        text-align: center;
        border-radius: 6px 6px 0 0;
        font-size: 0.8rem;
        padding: 6px 8px;
    }
}
/* ===== Hero layout: text + ladders ===== */

.homepage-hero-copy {
    position: relative;
}

.homepage-hero-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* On wider screens, show text and ladders side by side */
@media (min-width: 900px) {
    .homepage-hero-content {
        flex-direction: row;
        align-items: flex-start;
    }

    .homepage-hero-text {
        flex: 2 1 0;
    }

    .homepage-hero-ladders {
        flex: 1 1 260px;
    }
}

/* ===== Top 3 by Mode card in hero ===== */

.homepage-hero-ladders {
    background: radial-gradient(circle at top left, #222c47 0, #070b14 55%);
    border-radius: 10px;
    padding: 10px 14px 14px;
    border: 1px solid #262d3f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    color: #d3ddff;
    max-width: 360px;
    width: 100%;
}

.homepage-hero-ladders-title {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f7f8ff;
    margin: 0 0 4px;
}

.homepage-hero-ladders-subtitle {
    margin: 0 0 8px;
    font-size: 0.75rem;
    color: #9aa6d8;
}

/* Grid of small ladder cards */
.homepage-hero-ladders-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 1100px) {
    .homepage-hero-ladders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Individual ladder (Mains, Ironman, etc.) */
.homepage-hero-ladder-card {
    background: rgba(5, 9, 18, 0.9);
    border-radius: 8px;
    border: 1px solid #20263a;
    padding: 6px 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.homepage-hero-ladder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.homepage-hero-ladder-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #f1f4ff;
}

/* List of players */
.homepage-hero-ladder-list {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
}

.homepage-hero-ladder-list li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 0.78rem;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(52, 72, 120, 0.35);
}

.homepage-hero-ladder-list li:last-child {
    border-bottom: none;
}

.ladder-rank {
    display: inline-block;
    min-width: 30px;
    font-weight: 600;
    color: #9fb3ff;
}

.ladder-player-name {
    margin-right: 4px;
    text-decoration: none;
    color: #e6ecff;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ladder-player-name:hover {
    color: #ffffff;
}

.ladder-level {
    color: #ffc76e;
    font-weight: 500;
}

.ladder-xp {
    color: #8f9ac2;
    font-size: 0.72rem;
}

/* "View full" link under each small ladder */
.homepage-hero-ladder-more {
    align-self: flex-end;
    font-size: 0.72rem;
    text-decoration: none;
    color: #93b4ff;
    margin-top: 2px;
}

.homepage-hero-ladder-more:hover {
    color: #ffffff;
}

/* Empty state text */
.homepage-hero-ladder-empty {
    font-size: 0.75rem;
    color: #8f9ac2;
    margin: 2px 0 4px;
}
/* ===== Top skill leaders panning banner ===== */

.highscores-banner {
    margin: 14px 0 18px;
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle at top left, #222c47 0, #050711 55%);
    border: 1px solid #252c3f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.highscores-banner::before {
    content: "Top skill leaders";
    position: absolute;
    left: 10px;
    top: 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8ea3ff;
    opacity: 0.85;
    pointer-events: none;
}

/* Outer track that scrolls */
.highscores-banner-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 18px 12px 10px; /* top padding leaves room for label */
    gap: 22px;
    animation: highscores-banner-scroll 120s linear infinite;
    width: max-content;
}

@keyframes highscores-banner-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .highscores-banner-track {
        animation: none;
    }
}

/* Individual "ad" style item for a skill */
.highscores-banner-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(5, 10, 20, 0.85);
    border: 1px solid rgba(80, 104, 158, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    font-size: 0.8rem;
    color: #dde5ff;
}

/* Skill icon in banner (reuses same files as player page) */
.highscores-banner-skill-icon {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.highscores-banner-skill-name {
    font-weight: 600;
    color: #f3f5ff;
}

.highscores-banner-text {
    color: #9ca7d9;
    font-size: 0.78rem;
}

/* Staff/donator rank icons in banner */
.highscores-banner-rank-icon {
    width: 14px;
    height: 14px;
}

/* Player link in banner */
.highscores-banner-player {
    text-decoration: none;
    margin-right: 4px;
    max-width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.highscores-banner-player:hover {
    color: #ffffff;
}

/* Level / XP text */
.highscores-banner-level {
    color: #ffc76e;
    font-weight: 600;
}

.highscores-banner-xp {
    color: #a4aed8;
    font-size: 0.75rem;
}

/* Make sure it doesn't blow up on small screens */
@media (max-width: 700px) {
    .highscores-banner-item {
        padding: 3px 8px;
        gap: 4px;
        font-size: 0.75rem;
    }

    .highscores-banner-player {
        max-width: 90px;
    }

    .highscores-banner::before {
        font-size: 0.65rem;
        top: 4px;
    }
}
/* Make scrolling banner skill icons pop more */
.highscores-banner-skill-icon {
    width: 26px;
    height: 26px;
    padding: 4px;
    border-radius: 999px; /* circular badge */
    
    /* Dark badge behind the icon */
    background: radial-gradient(circle at 30% 30%, #4f6298 0, #1a2237 45%, #050814 100%);
    
    /* Subtle outline + glow so it stands out on dark backgrounds */
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 10px rgba(0, 0, 0, 0.85);
    
    /* Make sure it doesn't stretch weirdly */
    object-fit: contain;
}

/* Optional: tiny spacing tweak so text isn't crowded */
.highscores-banner-item {
    gap: 10px;
}
/* ===========================
   HIGHSCORES LAYOUT
   =========================== */

.highscores-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 12px 24px;
}

.highscores-page h2 {
    margin-bottom: 4px;
}

.highscores-subtitle {
    font-size: 0.9rem;
    color: #cbd5f5;
    margin-bottom: 10px;
}

/* Two-column layout: table + sidebar */

.highscores-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1.4fr);
    gap: 20px;
    align-items: flex-start;
}

/* Make highscores table area scroll if needed on smaller screens */

.highscores-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

/* Tables */

.highscores-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(10, 16, 32, 0.95);
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.9rem;
}

.highscores-table thead {
    background: linear-gradient(90deg, #0b1020, #121b35);
}

.highscores-table th,
.highscores-table td {
    padding: 8px 10px;
    text-align: left;
}

.highscores-table th {
    font-weight: 600;
    color: #e5e7f6;
    border-bottom: 1px solid #1f2937;
}

.highscores-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.85);
}

.highscores-table tbody tr:hover {
    background: rgba(30, 64, 175, 0.25);
}

/* Sidebar */

.highscores-skill-nav {
    background: rgba(10, 16, 32, 0.95);
    border-radius: 10px;
    padding: 10px 12px 12px;
    border: 1px solid #1f2937;
}

.highscores-skill-nav h3 {
    margin: 8px 0;
    font-size: 0.95rem;
}

.highscores-skill-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.highscores-skill-nav li + li {
    margin-top: 3px;
}

.highscores-skill-link {
    display: block;
    padding: 4px 8px;
    border-radius: 6px;
    color: #d1d5f0;
    text-decoration: none;
    font-size: 0.85rem;
}

.highscores-skill-link:hover {
    background: rgba(30, 64, 175, 0.35);
    color: #ffffff;
}

.highscores-skill-link.active {
    background: linear-gradient(135deg, #1d4ed8, #6366f1);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.8);
}

/* Player search form */

.highscores-player-search {
    margin-bottom: 10px;
}

.highscores-player-search label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.highscores-player-search input[type="text"] {
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #1f2937;
    background: #050814;
    color: #e5e7f6;
    font-size: 0.85rem;
    box-sizing: border-box;
}

.highscores-player-search button {
    margin-top: 6px;
    width: 100%;
}

/* ===========================
   MODE TABS
   =========================== */

.highscores-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 16px;
}

.highscores-mode-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 0.8rem;
    text-decoration: none;
    color: #cbd5f5;
    background: #050814;
    border-radius: 999px;
    border: 1px solid #1f2937;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.12s ease;
}

.highscores-mode-tabs a:hover {
    background: #111827;
    color: #ffffff;
    border-color: #374151;
    transform: translateY(-1px);
}

.highscores-mode-tabs a.active {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

/* ===========================
   BANNER (TOP SKILL LEADERS)
   =========================== */

.highscores-banner {
    position: relative;
    margin: 8px 0 14px;
    padding: 6px 10px;
    border-radius: 10px;
    background: radial-gradient(circle at top left, #111827, #020617);
    border: 1px solid #1f2937;
    overflow: hidden; /* important to avoid page blow-out */
}

/* Desktop: marquee animation */
.highscores-banner-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: hs-banner-marquee 120s linear infinite;
    will-change: transform;
}

@keyframes hs-banner-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.highscores-banner-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-right: 1px solid rgba(148, 163, 184, 0.35);
    font-size: 0.8rem;
    color: #e5e7f6;
}

.highscores-banner-item:last-child {
    border-right: none;
}

/* Icon highlight so it doesn't blend into background */

.highscores-banner-icon-wrapper {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle, #111827 0%, #020617 55%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.highscores-banner-skill-icon {
    width: 18px;
    height: 18px;
    display: block;
    filter:
        drop-shadow(0 0 4px rgba(0, 0, 0, 0.8))
        saturate(1.1)
        contrast(1.05);
}

.highscores-banner-skill-name {
    font-weight: 600;
    color: #facc15;
}

.highscores-banner-text {
    opacity: 0.8;
    font-size: 0.78rem;
}

.highscores-banner-player {
    margin-left: 2px;
    color: #e5e7f6;
    text-decoration: none;
    font-weight: 500;
}

.highscores-banner-player:hover {
    text-decoration: underline;
}

.highscores-banner-level,
.highscores-banner-xp {
    font-size: 0.78rem;
    opacity: 0.88;
}

/* ===========================
   PAGINATION
   =========================== */

.highscores-pagination {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
}

.highscores-page-link {
    padding: 4px 10px;
    border-radius: 999px;
    background: #050814;
    border: 1px solid #1f2937;
    color: #e5e7f6;
    text-decoration: none;
}

.highscores-page-link:hover {
    background: #111827;
}

.highscores-page-current {
    opacity: 0.85;
}

/* ===========================
   RESPONSIVE TWEAKS
   =========================== */

@media (max-width: 960px) {
    .highscores-page {
        padding: 8px 10px 20px;
    }

    .highscores-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .highscores-skill-nav {
        order: -1; /* optional: move skills/search above table on tablet/mobile */
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    /* Banner: no animation, swipeable chips instead */
    .highscores-banner-track {
        animation: none;
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .highscores-banner-item {
        flex: 0 0 auto;
        border-right: none;
        background: rgba(15, 23, 42, 0.95);
        border-radius: 999px;
        padding: 4px 10px;
        margin-right: 8px;
    }

    .highscores-banner-skill-name {
        max-width: 80px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .highscores-banner-player {
        max-width: 110px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Tabs: tighter spacing, multiple rows allowed */
    .highscores-mode-tabs {
        justify-content: center;
    }

    .highscores-mode-tabs a {
        flex: 0 1 calc(50% - 8px);
        text-align: center;
        font-size: 0.8rem;
        padding: 5px 8px;
    }

    .highscores-table th,
    .highscores-table td {
        padding: 6px 6px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .highscores-mode-tabs a {
        flex: 1 1 100%;
    }

    .highscores-page {
        padding-inline: 8px;
    }
}
/* ===========================
   LEGAL PAGES (Terms / Privacy)
   =========================== */

.legal-page {
    max-width: 900px;
    margin: 2.5rem auto 4rem;
    padding: 2rem 2.5rem;
    background: radial-gradient(circle at top left, rgba(68, 91, 140, 0.18), transparent),
                rgba(7, 10, 20, 0.96);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
    color: #e3e7ff;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Mobile tweaks */
@media (max-width: 768px) {
    .legal-page {
        margin: 1.5rem 1rem 3rem;
        padding: 1.5rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* Main title */
.legal-page h2 {
    font-size: 1.9rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.03em;
    color: #f5f7ff;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

/* "Last updated" line */
.legal-page em {
    color: #a3accb;
    font-size: 0.85rem;
}

/* Section headings */
.legal-page h3 {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: #ffdf6b; /* gold-ish accent */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    position: relative;
    padding-left: 0.85rem;
}

.legal-page h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(to bottom, #ffdf6b, #ff9f43);
}

/* Sub-headings */
.legal-page h4 {
    margin-top: 1.4rem;
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
    color: #cfd6ff;
}

/* Paragraphs */
.legal-page p {
    margin: 0.4rem 0 0.8rem;
    color: #d0d6f4;
}

/* Lists */
.legal-page ul,
.legal-page ol {
    margin: 0.3rem 0 1rem 1.25rem;
    padding-left: 0.5rem;
}

.legal-page li {
    margin: 0.18rem 0;
    color: #d6dbff;
}

/* Custom bullets for unordered lists */
.legal-page ul li {
    list-style: none;
    position: relative;
    padding-left: 0.9rem;
}

.legal-page ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #ffdf6b;
    font-size: 1.1em;
}

/* Links */
.legal-page a {
    color: #7fc6ff;
    text-decoration: none;
    border-bottom: 1px dashed rgba(127, 198, 255, 0.7);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.legal-page a:hover {
    color: #b6e3ff;
    border-bottom-color: rgba(182, 227, 255, 1);
}

/* Disclaimer box at top */
.legal-disclaimer {
    margin: 1rem 0 1.5rem;
    padding: 0.9rem 1rem 0.9rem 1.1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 152, 120, 0.13), rgba(255, 99, 71, 0.08));
    border: 1px solid rgba(255, 133, 95, 0.5);
    color: #ffe5d5;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

.legal-disclaimer::before {
    content: "!";
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #ffe5d5;
    background: rgba(255, 102, 71, 0.4);
    box-shadow: 0 0 8px rgba(255, 99, 71, 0.5);
}

.legal-disclaimer strong {
    display: block;
    margin-left: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.legal-disclaimer br + strong {
    margin-top: 0.4rem;
}

.legal-disclaimer p {
    margin: 0;
    padding-left: 2.2rem;
}

/* Make the disclaimer spacing work when it’s just <p> inside */
.legal-disclaimer em {
    font-style: normal;
}

/* Small screens: stack text more comfortably */
@media (max-width: 600px) {
    .legal-disclaimer {
        padding: 0.9rem 0.9rem 0.9rem 0.95rem;
    }

    .legal-disclaimer::before {
        left: 0.6rem;
    }

    .legal-disclaimer strong,
    .legal-disclaimer p {
        padding-left: 2.1rem;
        margin-left: 0;
    }
}

/* Subtle horizontal divider between big sections (optional) */
.legal-page h3 + p,
.legal-page h3 + ul,
.legal-page h3 + ol {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 0.6rem;
    margin-top: 0.6rem;
}

/* Code/mono bits if you ever add them */
.legal-page code {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.9em;
    background: rgba(0, 0, 0, 0.35);
    padding: 0.12rem 0.3rem;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
/* ===== Better layout for the red "Important" disclaimer badge ===== */

.legal-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;

    margin: 1rem 0 1.5rem;
    padding: 0.9rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 152, 120, 0.13), rgba(255, 99, 71, 0.08));
    border: 1px solid rgba(255, 133, 95, 0.5);
    color: #ffe5d5;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}

/* The red circular exclamation icon now acts like a normal element on the left */
.legal-disclaimer::before {
    content: "!";
    flex: 0 0 24px;
    width: 24px;
    height: 24px;

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

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 0.85rem;
    color: #ffe5d5;
    background: rgba(255, 102, 71, 0.4);
    box-shadow: 0 0 8px rgba(255, 99, 71, 0.5);
    margin-top: 0.15rem; /* nudge down to align with text */
}

/* Text container inside the disclaimer */
.legal-disclaimer strong,
.legal-disclaimer p {
    margin: 0;
    padding: 0;
}

/* Make the title stand out slightly */
.legal-disclaimer strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

/* If you use <em> inside, keep it readable */
.legal-disclaimer em {
    font-style: normal;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .legal-disclaimer {
        padding: 0.85rem 0.9rem;
        gap: 0.6rem;
    }

    .legal-disclaimer::before {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }
}
/* === Live Chat Layout === */

.chat-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 12px 24px;
}

.chat-page h2 {
    margin-bottom: 4px;
}

.chat-subtitle {
    margin: 0 0 12px;
    font-size: 0.95rem;
    color: #c4c9da;
}

.chat-wrapper {
    background: rgba(8, 12, 24, 0.9);
    border-radius: 8px;
    border: 1px solid #242a3d;
    padding: 10px;
}

/* Main column only for now (easier on mobile) */
.chat-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Pinned messages */
.chat-pinned {
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(255, 216, 106, 0.18), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 216, 106, 0.45);
    padding: 6px 8px;
    margin-bottom: 4px;
    max-height: 160px;
    overflow-y: auto;
}

.chat-pinned-inner .chat-message {
    border-bottom: 1px dotted rgba(255, 216, 106, 0.4);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.chat-pinned-inner .chat-message:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Messages list */
.chat-messages {
    position: relative;
    background: rgba(5, 9, 20, 0.95);
    border-radius: 6px;
    border: 1px solid #242a3d;
    max-height: 420px;
    overflow-y: auto;
    padding: 6px 8px;
}

.chat-loading {
    text-align: center;
    color: #c4c9da;
    font-size: 0.9rem;
    padding: 16px 0;
}

/* Individual message */
.chat-message {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(36, 42, 61, 0.6);
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message-pinned {
    background: rgba(255, 216, 106, 0.06);
}

.chat-message-avatar {
    flex: 0 0 auto;
    padding-top: 2px;
}

.chat-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #242a3d;
}

.chat-message-main {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.chat-message-username {
    font-weight: 600;
}

.chat-staff-icon {
    width: 16px;
    height: 16px;
}

.chat-message-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: #8b90a5;
}

.chat-message-body {
    font-size: 0.9rem;
    color: #e3e7ff;
    word-wrap: break-word;
}

/* Make skill icons in chat easier to see */
.chat-message-body img,
.highscores-banner-skill-icon {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.9), transparent);
    border-radius: 4px;
}

/* Form and mod tools */
.chat-form {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.chat-form textarea {
    flex: 1 1 auto;
    resize: vertical;
    min-height: 40px;
    max-height: 120px;
    background: #050815;
    border-radius: 6px;
    border: 1px solid #242a3d;
    padding: 6px 8px;
    color: #e3e7ff;
    font-size: 0.9rem;
}

.chat-form textarea:focus {
    outline: none;
    border-color: #ffd86a;
    box-shadow: 0 0 0 1px rgba(255, 216, 106, 0.25);
}

.chat-send-btn {
    flex: 0 0 auto;
    align-self: flex-end;
    padding: 6px 14px;
}

/* Disabled notice */
.chat-disabled {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(59, 18, 32, 0.9);
    border: 1px solid #ff4d4d;
    color: #ffdede;
    font-size: 0.9rem;
}

/* Mod toolbar */
.chat-mod-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.chat-mod-hint {
    font-size: 0.8rem;
    color: #9ca3c9;
}

/* Per-message mod buttons */
.chat-message-mod {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.chat-mod-btn {
    background: #151a2b;
    border: 1px solid #313954;
    border-radius: 4px;
    font-size: 0.7rem;
    padding: 2px 6px;
    color: #cfd4ee;
    cursor: pointer;
}

.chat-mod-btn:hover {
    border-color: #ffd86a;
    color: #ffd86a;
}

/* Smaller mod controls on mobile */
@media (max-width: 640px) {
    .chat-page {
        padding: 12px 8px 20px;
    }

    .chat-wrapper {
        padding: 8px;
    }

    .chat-messages {
        max-height: 320px;
    }

    .chat-message {
        padding: 3px 0;
    }

    .chat-message-body {
        font-size: 0.85rem;
    }

    .chat-form {
        flex-direction: column;
    }

    .chat-send-btn {
        width: 100%;
        text-align: center;
    }

    .chat-message-mod {
        gap: 2px;
    }

    .chat-mod-btn {
        font-size: 0.65rem;
        padding: 1px 4px;
    }
}
/* ===== Live Chat (8 Visions) ===== */

.chat-page {
    margin: 20px auto 40px;
    max-width: 960px;
}

.chat-page h2 {
    margin-bottom: 4px;
}

.chat-subtitle {
    font-size: 0.9rem;
    color: #c4c9da;
    margin-bottom: 14px;
}

.chat-wrapper {
    max-width: 960px;
    margin: 0 auto;
}

.chat-main {
    border: 1px solid #262b3c;
    background: #05060a;
    padding: 0;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
}

/* --- Pinned messages strip --- */

.chat-pinned {
    border-bottom: 1px solid #262b3c;
    background: #0b0f19;
    padding: 6px 10px;
    min-height: 32px;
}

.chat-pinned-header {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #f5d67a;
    margin-bottom: 4px;
    opacity: 0.9;
}

.chat-pinned-inner .chat-message {
    border: 1px solid #f5d67a;
    background: #18130a;
    margin-bottom: 4px;
    padding: 6px 8px;
}

.chat-pinned-inner .chat-message:last-child {
    margin-bottom: 0;
}

/* --- Messages area --- */

.chat-messages {
    height: 380px;               /* fixed chat box height */
    overflow-y: auto;
    padding: 8px 10px;
    background: #05060a;
}

.chat-loading {
    font-size: 0.9rem;
    color: #8c92aa;
}

/* --- Individual message rows (boxy, no rounded corners) --- */

.chat-message {
    display: flex;
    padding: 6px 8px;
    border-bottom: 1px solid #151825;
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message-avatar {
    margin-right: 8px;
    flex-shrink: 0;
}

.chat-avatar-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border: 1px solid #32374a;
    background: #000;
}

.chat-message-main {
    flex: 1;
    min-width: 0;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
}

.chat-staff-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.chat-message-username {
    font-size: 0.9rem;
    font-weight: 600;
}

.chat-message-time {
    margin-left: auto;
    font-size: 0.75rem;
    color: #8b90a6;
}

.chat-message-body {
    font-size: 0.86rem;
    color: #d0d4e6;
    word-wrap: break-word;
    white-space: pre-wrap;
}

/* --- Mod tools row under a message --- */

.chat-message-mod {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.chat-mod-btn {
    font-size: 0.7rem;
    padding: 2px 5px;
    border: 1px solid #38405a;
    background: #111624;
    color: #d8def7;
    cursor: pointer;
    text-transform: uppercase;
}

.chat-mod-btn:hover {
    background: #1b2235;
}

/* --- Pinned message variant (if you want extra emphasis) --- */

.chat-message-pinned .chat-message-header .chat-message-username {
    color: #f5d67a;
}

/* --- Form / footer --- */

.chat-form {
    border-top: 1px solid #262b3c;
    padding: 8px 10px;
    display: flex;
    gap: 6px;
    background: #05060a;
}

.chat-form textarea {
    flex: 1;
    resize: none;
    font-size: 0.9rem;
    border-radius: 0;
    border: 1px solid #262b3c;
    background: #05060a;
    color: #e5e9ff;
    padding: 6px;
}

.chat-form textarea:focus {
    outline: none;
    border-color: #f5d67a;
}

.chat-send-btn {
    border-radius: 0;
    padding: 0 14px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.chat-disabled {
    border-top: 1px solid #262b3c;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: #c4c9da;
    background: #05060a;
}

/* --- Staff toolbar at bottom --- */

.chat-mod-toolbar {
    border-top: 1px solid #262b3c;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #05060a;
}

.chat-mod-toolbar .btn {
    border-radius: 0;
}

.chat-mod-hint {
    font-size: 0.78rem;
    color: #8c92aa;
}

/* --- Make sure chat UI is boxy: remove rounding from key elements --- */

.chat-main,
.chat-messages,
.chat-pinned,
.chat-form,
.chat-disabled {
    border-radius: 0;
}
/* Ensure pinned messages never scroll and always stack nicely */
.chat-pinned {
    overflow: visible;      /* make sure no scrollbar ever */
    max-height: none;
}

.chat-pinned-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;               /* clean spacing between pinned messages */
    max-height: none;
    overflow: visible;
}
/* Base style for any status badge shown next to usernames */
.chat-user-status {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.4;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    border-radius: 0;              /* keep it boxy */
    border: 1px solid transparent;
    vertical-align: middle;
}

/* Muted badge: subtle amber/yellow */
.chat-user-muted {
    background-color: rgba(230, 180, 60, 0.12);
    border-color: rgba(230, 180, 60, 0.6);
    color: #e6b43c;
}

/* Banned badge: stronger red, but not neon */
.chat-user-banned {
    background-color: rgba(200, 60, 60, 0.12);
    border-color: rgba(200, 60, 60, 0.7);
    color: #e05b5b;
    font-weight: 600;
}
.chat-message-body .chat-link {
    color: #4aa3ff;       /* adjust to your theme */
    text-decoration: underline;
    word-break: break-all; /* so long URLs don't break layout */
}

.chat-message-body .chat-link:hover {
    text-decoration: none;
}
.chat-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid #20252b;
}

.chat-tab {
    flex: 1 1 auto;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
    background: #14181d;
    border: 1px solid #20252b;
    border-bottom: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.chat-tab.active {
    background: #1e242b;
    font-weight: 600;
}

.chat-tab:not(.active):hover {
    background: #191e24;
}
.chat-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid #20252b;
}

.chat-tab {
    flex: 1 1 auto;
    padding: 6px 8px;
    font-size: 13px;
    text-align: center;
    background: #14181d;
    border: 1px solid #20252b;
    border-bottom: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #ffd700; /* yellow text */
}

.chat-tab.active {
    background: #1e242b;
    font-weight: 600;
    color: #ffd700; /* keep active yellow too */
}

.chat-tab:not(.active):hover {
    background: #191e24;
    color: #ffd700; /* yellow on hover */
}
/* Server logs page */
.server-logs-page {
    margin-top: 20px;
}

.server-logs-subtitle {
    color: #c0c0c0;
    margin-bottom: 15px;
}

.server-logs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px;
    background: #111;
    border-radius: 6px;
    border: 1px solid #222;
    margin-bottom: 15px;
}

.server-logs-filters .filter-group {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.server-logs-filters .filter-wide {
    flex: 1 1 260px;
}

.server-logs-filters label {
    font-size: 11px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.server-logs-filters input,
.server-logs-filters select {
    padding: 4px 6px;
    font-size: 13px;
    background: #050505;
    border: 1px solid #333;
    border-radius: 4px;
    color: #eee;
}

.server-logs-summary {
    font-size: 13px;
    color: #ccc;
    margin-bottom: 8px;
}

.server-logs-table-wrapper {
    border: 1px solid #222;
    border-radius: 6px;
    overflow: hidden;
    background: #050505;
}

.server-logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.server-logs-table th,
.server-logs-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #151515;
    vertical-align: top;
}

.server-logs-table th {
    background: #101010;
    font-weight: 600;
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    color: #b0b0b0;
}

.server-logs-table tr:nth-child(even) td {
    background: #070707;
}

.server-logs-table .no-logs {
    text-align: center;
    padding: 14px 8px;
    color: #888;
}

.log-type-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    background: #202020;
    color: #f1c40f;
    text-transform: uppercase;
}

.log-username {
    font-weight: 600;
    font-size: 13px;
}

.log-rank-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 4px;
}

.log-summary-cell {
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-json {
    display: none;
    max-height: 260px;
    overflow: auto;
    margin-top: 6px;
    padding: 6px;
    background: #020202;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    border: 1px solid #333;
}

.log-json.open {
    display: block;
}

.server-logs-pagination {
    margin-top: 10px;
    text-align: right;
}

.server-logs-pagination .page-link {
    display: inline-block;
    padding: 4px 8px;
    margin-left: 4px;
    border-radius: 4px;
    border: 1px solid #333;
    font-size: 12px;
    text-decoration: none;
    color: #ddd;
    background: #050505;
}

.server-logs-pagination .page-link.active {
    background: #f1c40f;
    border-color: #f1c40f;
    color: #000;
    font-weight: 600;
}
/******************************************
 * SERVER LOGS PAGE
 ******************************************/

.server-logs-page {
    max-width: 1300px;
    margin: 0 auto 40px auto;
    padding: 20px;
    color: #f5f5f5;
}

.server-logs-page h2 {
    font-size: 26px;
    margin-bottom: 5px;
}

.server-logs-subtitle {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #b3b3b3;
}

/******************************************
 * FILTER BAR
 ******************************************/

.server-logs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    padding: 15px 18px;
    margin-bottom: 18px;
    background: rgba(10, 10, 10, 0.85);
    border: 1px solid #333;
    border-radius: 6px;
}

.server-logs-filters .filter-group {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.server-logs-filters .filter-group.filter-wide {
    flex: 1 1 280px;
}

.server-logs-filters label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    color: #c9c9c9;
}

.server-logs-filters input[type="text"],
.server-logs-filters select {
    padding: 6px 8px;
    font-size: 13px;
    background: #131313;
    border: 1px solid #333;
    border-radius: 4px;
    color: #f5f5f5;
    outline: none;
}

.server-logs-filters input[type="text"]:focus,
.server-logs-filters select:focus {
    border-color: #f1c40f;
    box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.3);
}

/******************************************
 * SUMMARY / GLOBAL MESSAGES
 ******************************************/

.server-logs-summary {
    margin-bottom: 12px;
    font-size: 13px;
    color: #d0d0d0;
}

.server-logs-summary strong {
    color: #f1c40f;
}

.no-logs,
.no-logs-global {
    margin: 15px 0;
    padding: 12px 14px;
    background: rgba(20, 20, 20, 0.9);
    border: 1px dashed #555;
    border-radius: 4px;
    font-size: 13px;
    color: #b0b0b0;
}

/******************************************
 * LOG SECTIONS (ALL TYPES MODE)
 ******************************************/

.server-logs-section {
    margin-top: 22px;
    padding-top: 8px;
    border-top: 1px solid #333;
}

.server-logs-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.server-logs-section-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.server-logs-section-count {
    font-size: 12px;
    color: #aaaaaa;
}

/******************************************
 * TABLE WRAPPER & TABLE STYLES
 ******************************************/

.server-logs-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: 6px;
    border: 1px solid #333;
    background: rgba(10, 10, 10, 0.85);
}

.server-logs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 850px;
}

.server-logs-table thead {
    background: linear-gradient(to right, #232323, #181818);
}

.server-logs-table thead th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #444;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.server-logs-table tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, 0.7);
}

.server-logs-table tbody tr:nth-child(even) {
    background: rgba(10, 10, 10, 0.9);
}

.server-logs-table tbody tr:hover {
    background: rgba(60, 60, 60, 0.5);
}

.server-logs-table td {
    padding: 7px 10px;
    border-bottom: 1px solid #333;
    vertical-align: top;
}

/* Narrower columns */
.server-logs-table td:first-child,
.server-logs-table th:first-child {
    width: 70px;
    white-space: nowrap;
}

.server-logs-table td:nth-child(2),
.server-logs-table th:nth-child(2) {
    width: 150px;
    white-space: nowrap;
}

/******************************************
 * TYPE PILL / USER COLUMN / SUMMARY
 ******************************************/

.log-type-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(241, 196, 15, 0.15);
    border: 1px solid rgba(241, 196, 15, 0.5);
    color: #f1c40f;
}

/* You can get fancy and color-code by type if you want: */
/*
.log-type-pill[data-type="public_chat"] { background: ... }
*/

.log-username {
    font-weight: 500;
    white-space: nowrap;
}

.log-username.unknown-user {
    color: #888;
}

.log-rank-icon {
    width: 15px;
    height: 15px;
    margin-right: 4px;
    vertical-align: -2px;
}

/* reuse chat name colors if you have them already:
.staff-name.staff-mod { ... }
.staff-name.staff-admin { ... }
etc.
*/

.log-summary-cell {
    max-width: 300px;
    word-wrap: break-word;
    /* optional single-line with ellipsis:
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

.log-summary-cell .muted {
    color: #888;
}

/******************************************
 * JSON TOGGLER
 ******************************************/

.log-json {
    margin: 6px 0 0 0;
    padding: 8px 10px;
    font-size: 11px;
    line-height: 1.3;
    background: #050505;
    border-radius: 4px;
    border: 1px solid #333;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
    opacity: 0;
}

.log-json.open {
    max-height: 400px; /* enough for most logs */
    opacity: 1;
}

/******************************************
 * PAGINATION
 ******************************************/

.server-logs-pagination {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.server-logs-pagination .page-link {
    display: inline-block;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #444;
    background: #111;
    color: #ddd;
    text-decoration: none;
}

.server-logs-pagination .page-link:hover {
    border-color: #f1c40f;
    color: #f1c40f;
}

.server-logs-pagination .page-link.active {
    border-color: #f1c40f;
    background: #3a2d00;
    color: #f9e58b;
    font-weight: 600;
}

/******************************************
 * SMALL BUTTONS
 ******************************************/

.btn.btn-small {
    padding: 3px 7px;
    font-size: 11px;
    line-height: 1.2;
}

.btn.btn-secondary {
    /* if you already have .btn / .btn-secondary, this will just tweak slightly */
    background: #222;
    border-color: #555;
    color: #eee;
}

.btn.btn-secondary:hover {
    background: #333;
    border-color: #f1c40f;
}
/*/ TESTTTTTTTTTTTTTT/*/

/* === Store layout === */
.store-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.store-subtitle {
    margin-bottom: 18px;
    color: #bfc4d1;
    font-size: 14px;
}

/* Main layout: products + sidebar */
.store-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(260px, 1fr);
    gap: 20px;
}

@media (max-width: 960px) {
    .store-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* === Tabs / category filter === */

.store-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.store-tab {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(10, 12, 22, 0.85);
    color: #d8ddf0;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s;
}

.store-tab:hover {
    background: rgba(36, 45, 85, 0.95);
    border-color: rgba(92, 188, 255, 0.6);
    transform: translateY(-1px);
}

.store-tab.active {
    background: linear-gradient(135deg, #4b7bff, #40d0ff);
    border-color: transparent;
    color: #fff;
}

/* === Global sale banner === */

.store-global-sale-banner {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(15, 110, 70, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.3);
    font-size: 13px;
    color: #c6f6d5;
}

.store-global-sale-banner strong {
    color: #4ade80;
}

/* === Items grid === */

.store-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    align-items: stretch;
}

/* === Item card === */

.store-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 14px 14px 12px;
    border-radius: 12px;
    background: radial-gradient(circle at top left, rgba(63, 81, 181, 0.23), transparent 55%),
                radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.65), #050714 70%);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.2s;
}

.store-item-card:hover {
    transform: translateY(-3px);
    border-color: rgba(96, 165, 250, 0.7);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.65);
}

/* Header: title + price */
.store-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.store-item-header h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    color: #f9fafb;
    /* keep multi-line titles tidy but allow wrapping */
    word-break: break-word;
}

/* Price area */
.store-item-price {
    text-align: right;
    font-size: 12px;
    white-space: nowrap;
}

.store-item-price-old {
    display: block;
    text-decoration: line-through;
    color: #9ca3af;
}

.store-item-price-new {
    display: block;
    font-weight: 600;
    color: #facc15;
}

.store-item-price-main {
    font-weight: 500;
    color: #e5e7eb;
}

.store-item-price-sale-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(22, 163, 74, 0.2);
    color: #4ade80;
}

/* Image */
.store-item-image-wrapper {
    width: 100%;
    margin-bottom: 8px;
    padding: 6px 4px;
    border-radius: 10px;
    background: radial-gradient(circle at center, rgba(148, 163, 184, 0.25), transparent 70%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.store-item-image {
    max-width: 80px;
    max-height: 80px;
    image-rendering: pixelated;
}

/* Description (flex-grow so footers line up) */
.store-item-description {
    flex-grow: 1;
    font-size: 13px;
    line-height: 1.35;
    color: #d1d5db;
    margin-bottom: 10px;
    white-space: pre-line;
}

/* Footer is pinned to bottom of the card */
.store-item-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.25);
}

/* Quantity + button row */
.store-item-footer form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
}

.store-quantity-label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    color: #9ca3af;
}

.store-quantity-label select {
    margin-top: 3px;
    padding: 4px 6px;
    min-width: 130px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 12px;
}

.store-quantity-label select:focus {
    outline: none;
    border-color: rgba(96, 165, 250, 0.9);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.7);
}

.store-add-cart-btn {
    white-space: nowrap;
    padding: 7px 14px;
    font-size: 13px;
}

/* === Sidebar panels === */

.store-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.store-panel {
    padding: 12px 14px;
    border-radius: 10px;
    background: radial-gradient(circle at top, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 13px;
    color: #e5e7eb;
}

.store-panel h3 {
    margin: 0 0 6px;
    font-size: 15px;
    color: #f9fafb;
}

.store-panel-muted {
    color: #9ca3af;
    font-size: 12px;
}

.store-panel-highlight {
    margin-top: 6px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(22, 163, 74, 0.2);
    color: #bbf7d0;
    font-size: 12px;
}

/* Cart styles (sidebar) */

.store-cart-empty {
    font-size: 12px;
    color: #9ca3af;
}

.store-cart-list {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

.store-cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.store-cart-line:last-child {
    border-bottom: none;
}

.store-cart-line-main {
    flex: 1;
    min-width: 0;
}

.store-cart-line-title {
    font-size: 13px;
    color: #e5e7eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-cart-line-meta {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.store-cart-remove-form {
    margin: 0;
}

.store-cart-remove-btn {
    padding: 0 8px;
    font-size: 14px;
    line-height: 1;
}

.store-cart-total {
    margin-top: 4px;
    font-size: 13px;
    color: #e5e7eb;
}

.store-cart-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Account / collection lists */

.store-account-stats {
    list-style: none;
    padding: 0;
    margin: 6px 0 8px;
    font-size: 13px;
}

.store-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.store-collection-list {
    list-style: none;
    padding: 0;
    margin: 2px 0 0;
}

.store-collection-line {
    padding: 6px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

.store-collection-line:last-child {
    border-bottom: none;
}

.store-collection-title {
    font-size: 13px;
    color: #e5e7eb;
}

.store-collection-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

/* === Misc === */

.store-account-stats strong,
.store-cart-total strong,
.store-collection-meta strong {
    color: #facc15;
}

/* Slight tweak to existing generic buttons if needed */
.btn.store-add-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.log-json {
    display: none;
}
.log-json {
    display: none; /* keep original <pre> hidden in the table */
}

/* Modal wrapper */
.json-modal {
    position: fixed;
    inset: 0;
    display: none;           /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 2000;
    font-family: inherit;
}

.json-modal.open {
    display: flex;
}

/* Dark backdrop */
.json-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

/* Dialog */
.json-modal-dialog {
    position: relative;
    z-index: 2001;
    width: 90%;
    max-width: 900px;
    max-height: 80vh;
    background: #111827; /* adjust to match your theme */
    color: #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}

/* Header */
.json-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.json-modal-header h3 {
    margin: 0;
    font-size: 16px;
}

/* Close button */
.json-modal-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 24px;
    cursor: pointer;
}

.json-modal-close:hover {
    color: #ffffff;
}

/* Body / JSON */
.json-modal-body {
    flex: 1;
    overflow: auto;
    border-radius: 4px;
    background: #020617;
    padding: 8px;
}

#json-modal-content {
    margin: 0;
    max-height: 70vh;
    overflow: auto;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre;
}

.download-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px 48px;
    color: #e5e7eb;
}

/* Hero layout */

.download-hero {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.download-hero-text h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.download-hero-tagline {
    color: #9ca3af;
    margin-bottom: 24px;
}

/* Steps */

.download-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.download-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #1f2937;
}

.download-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563eb;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.download-step-content h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.download-step-content p {
    margin: 0;
    color: #d1d5db;
    font-size: 0.95rem;
}

/* Aside cards */

.download-hero-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.download-requirements-card,
.download-note-card {
    padding: 16px 18px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #1f2937;
}

.download-requirements-card h2,
.download-note-card h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.download-requirements-card ul {
    margin: 0;
    padding-left: 18px;
    color: #d1d5db;
    font-size: 0.95rem;
}

.download-note-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #d1d5db;
}

/* Sections */

.download-section {
    margin-top: 32px;
}

.download-section h2 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.download-section-intro {
    margin: 0 0 18px;
    color: #9ca3af;
}

/* Grid of cards */

.download-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.download-card {
    padding: 18px 18px 16px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #111827;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.download-card h3 {
    margin: 0;
    font-size: 1.05rem;
}

.download-card p {
    margin: 0;
    color: #d1d5db;
    font-size: 0.95rem;
}

.download-card-details {
    margin: 0;
    padding-left: 18px;
    color: #9ca3af;
    font-size: 0.9rem;
}

.download-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

/* Buttons – piggyback on existing .btn styles, but add some spacing */

.download-link {
    margin-top: 8px;
    text-align: center;
    display: inline-block;
}

.download-client-btn {
    margin-top: 8px;
}

.download-client-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Help section */

.download-help-section {
    margin-top: 40px;
}

.download-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.download-help-card {
    padding: 16px 16px 14px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid #1f2937;
}

.download-help-card h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.download-help-card p {
    margin: 0;
    color: #d1d5db;
    font-size: 0.95rem;
}

/* Responsive */

@media (max-width: 960px) {
    .download-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .download-hero-aside {
        order: -1;
    }

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

    .download-help-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .download-page {
        padding: 24px 12px 32px;
    }

    .download-grid,
    .download-help-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .download-hero-text h1 {
        font-size: 1.6rem;
    }
}
/* ==============================
   ISSUES PAGE BASE
   (scoped under .issues-page)
   ============================== */

.issues-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #202124;
    background: transparent; /* no banner / hero images, keep your site bg */
}

/* ---------- Header ---------- */

.issues-page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.issues-page__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #202124;
}

.issues-page__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6368;
}

.issues-page__back {
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
}

/* ---------- Messages ---------- */

.issues-page .form-errors,
.issues-page .admin-success {
    margin-bottom: 12px;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}

.issues-page .form-errors {
    background: #fce8e6;
    border: 1px solid #f8b4b0;
    color: #b3261e;
}

.issues-page .admin-success {
    background: #e6f4ea;
    border: 1px solid #a8dab5;
    color: #0e6c3b;
}

/* ==============================
   FILTER BAR
   ============================== */

.issues-page .issues-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #dadce0;
    margin-bottom: 16px;
}

.issues-filter__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #5f6368;
}

.issues-filter__item span {
    font-weight: 500;
}

.issues-filter__item select {
    border-radius: 999px;
    border: 1px solid #dadce0;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    color: #202124;
    background-color: #ffffff;
    min-width: 160px;
}

.issues-filter__submit {
    margin-left: auto;
    font-size: 13px;
    padding: 6px 16px;
    border-radius: 999px;
}

/* ==============================
   COLUMNS (BOARD LAYOUT)
   ============================== */

/* Grid for the three columns */
.issues-page .admin-store-grid.issues-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* Individual column */

.issues-page .issues-column {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #dadce0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.issues-column__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
}

.issues-column__header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #202124;
}

.issues-column__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    border-radius: 999px;
    background: #f1f3f4;
    font-size: 11px;
    font-weight: 500;
    color: #5f6368;
}

.issues-column__body {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Subtle color hints per column (no heavy backgrounds) */
.issues-column--received .issues-column__header {
    border-bottom-color: #cfe4ff;
}
.issues-column--in-progress .issues-column__header {
    border-bottom-color: #ffe6b3;
}
.issues-column--fixed .issues-column__header {
    border-bottom-color: #c6f6d5;
}

.issues-page .store-panel-muted {
    font-size: 12px;
    color: #80868b;
    text-align: center;
    padding: 10px 4px;
}

/* ==============================
   ISSUE CARD
   ============================== */

.issues-page .issue-card {
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

/* Header row */

.issue-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.issue-card__title-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.issue-card__id {
    font-size: 11px;
    font-weight: 500;
    color: #80868b;
}

.issue-card__title {
    margin: 1px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #202124;
}

.issue-card__subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: #5f6368;
}

/* Tags on the right */

.issue-card__badge-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.issue-card__pill {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    background: #f1f3f4;
    color: #3c4043;
    white-space: nowrap;
}

/* Category: soft blue */
.issue-card__pill--category {
    background: #e3f2fd;
    color: #1a73e8;
}

/* Severity colors: bright tags */
.issue-card__pill--severity {
    border: 1px solid transparent;
}

.severity-low {
    background: #e6f4ea;
    color: #0e6c3b;
    border-color: #a8dab5;
}

.severity-medium {
    background: #fff7e0;
    color: #b06a00;
    border-color: #ffd36e;
}

.severity-high {
    background: #fce8e6;
    color: #b3261e;
    border-color: #f8b4b0;
}

.severity-critical {
    background: #f3e8fd;
    color: #6a1b9a;
    border-color: #d1b3ff;
}

/* Status badge */

.issue-card__status-badge {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.status-received {
    background: #e8f0fe;
    color: #1a73e8;
}

.status-in_progress {
    background: #fff7e0;
    color: #b06a00;
}

.status-fixed {
    background: #e6f4ea;
    color: #0e6c3b;
}

/* Description: keep compact, scroll if crazy long */

.issue-card__description {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #3c4043;
    max-height: 7rem;          /* limit height */
    overflow-y: auto;          /* scroll inside if huge */
}

/* ==============================
   SCREENSHOT AS LINK (NO BIG IMAGE)
   ============================== */

.issue-card__image {
    margin-top: 4px;
}

/* Hide the actual image so it doesn't blow up the card */
.issue-card__image img {
    display: none;
}

/* Turn the anchor into a small pill-style link */
.issue-card__image a {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f0fe;
    color: #1a73e8;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
}

/* The text of the link comes from your HTML ("alt" is not used in CSS),
   so if you want the text "View screenshot", change it in PHP.
   This styling just makes whatever you have look like a small chip. */

.issue-card__image a:hover {
    background: #d2e3fc;
}

/* ==============================
   FORM INSIDE CARD
   ============================== */

.issue-card__form {
    border-top: 1px solid #f1f3f4;
    padding-top: 6px;
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.issue-card__form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.issue-card__form-row label {
    flex: 1 1 130px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #5f6368;
}

.issue-card__form-row select {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dadce0;
    padding: 4px 8px;
    font-size: 12px;
    color: #202124;
    background: #ffffff;
}

.issue-card__note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #5f6368;
}

.issue-card__note textarea {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dadce0;
    padding: 5px 8px;
    font-size: 12px;
    resize: vertical;
    min-height: 44px;
}

.issue-card__note-help {
    font-size: 10px;
    color: #9aa0a6;
}

/* Footer row */

.issue-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.issue-card__updated {
    font-size: 10px;
    color: #9aa0a6;
}

/* Smaller primary button in card */

.btn.btn-primary.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 999px;
}

/* ==============================
   LOGS / ACTIVITY
   ============================== */

.issue-card__logs {
    margin-top: 6px;
    font-size: 11px;
}

/* Make <summary> look like a small toggle, no default triangle */

.issue-card__logs > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #5f6368;
}

.issue-card__logs > summary::-webkit-details-marker {
    display: none;
}

.issue-card__logs > summary::before {
    content: "▸";
    font-size: 10px;
    margin-right: 2px;
    color: #9aa0a6;
}

.issue-card__logs[open] > summary::before {
    content: "▾";
}

.issue-card__logs-count {
    color: #9aa0a6;
}

.issue-card__logs-list {
    list-style: none;
    padding-left: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #3c4043;
}

.issue-card__logs-list li {
    line-height: 1.3;
}

.issue-card__log-time {
    color: #5f6368;
    margin-right: 4px;
    font-family: monospace;
}

.issue-card__logs-empty {
    margin-top: 6px;
    color: #9aa0a6;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 1024px) {
    .issues-page .admin-store-grid.issues-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .issues-page {
        padding: 16px 12px 24px;
    }

    .issues-page__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .issues-page .admin-store-grid.issues-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* ==============================
   ISSUES PAGE – LAYOUT
   ============================== */

.issues-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 40px;
    box-sizing: border-box;
    color: #202124;
}

/* Header */

.issues-page__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.issues-page__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.issues-page__subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: #5f6368;
}

.issues-page__back {
    font-size: 13px;
    padding: 6px 12px;
}

/* Messages */

.issues-page .form-errors,
.issues-page .admin-success {
    margin-bottom: 12px;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
}

.issues-page .form-errors {
    background: #fce8e6;
    border: 1px solid #f8b4b0;
    color: #b3261e;
}

.issues-page .admin-success {
    background: #e6f4ea;
    border: 1px solid #a8dab5;
    color: #0e6c3b;
}

/* ==============================
   FILTER BAR
   ============================== */

.issues-page .issues-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 4px;
    background: #ffffff;
    border: 1px solid #dadce0;
    margin-bottom: 16px;
}

.issues-filter__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #5f6368;
}

.issues-filter__item span {
    font-weight: 500;
}

.issues-filter__item select {
    border-radius: 2px;
    border: 1px solid #dadce0;
    padding: 4px 24px 4px 8px;
    font-size: 13px;
    min-width: 160px;
}

.issues-filter__submit {
    margin-left: auto;
    font-size: 13px;
    padding: 6px 16px;
}

/* ==============================
   COLUMNS
   ============================== */

.issues-page .issues-columns.admin-store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.issues-page .issues-column {
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Column headers: simple bars, no rounded edges */

.issues-column__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: #f5f5f5;
    border-bottom: 1px solid #dadce0;
    font-size: 12px;
}

.issues-column__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.issues-column__badge {
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid #dadce0;
    background: #ffffff;
}

.issues-column__body {
    padding: 0; /* rows handle their own spacing */
}

.issues-page .store-panel-muted {
    font-size: 12px;
    color: #80868b;
    padding: 8px 10px;
}

/* Status dots for column titles and rows */

.issues-column__status-dot,
.issue-row__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot--received {
    background: #1a73e8;
}
.status-dot--in_progress {
    background: #fbbc04;
}
.status-dot--fixed {
    background: #34a853;
}

/* ==============================
   ISSUE ROW (ACCORDION)
   ============================== */

.issue-row {
    border-bottom: 1px solid #e0e0e0;
}

/* Remove default marker, make summary a snug bar */

.issue-row__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-size: 12px;
    background: #ffffff;
}

.issue-row__summary::-webkit-details-marker {
    display: none;
}

/* Left side: status dot + id + title */

.issue-row__summary-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.issue-row__id {
    font-weight: 500;
    color: #5f6368;
    font-size: 11px;
}

.issue-row__title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* Right side: severity, category, reporter, created, chevron */

.issue-row__summary-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #5f6368;
    white-space: nowrap;
}

.issue-row__pill {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    border: 1px solid transparent;
}

.issue-row__pill--category {
    background: #e3f2fd;
    color: #1a73e8;
    border-color: #bbdefb;
}

.issue-row__pill--severity {
    background: #f1f3f4;
}

/* severity colors (bright) */
.severity--low {
    background: #e6f4ea;
    color: #0e6c3b;
    border-color: #a8dab5;
}

.severity--medium {
    background: #fff7e0;
    color: #b06a00;
    border-color: #ffd36e;
}

.severity--high {
    background: #fce8e6;
    color: #b3261e;
    border-color: #f8b4b0;
}

.severity--critical {
    background: #f3e8fd;
    color: #6a1b9a;
    border-color: #d1b3ff;
}

.issue-row__meta {
    color: #5f6368;
}

.issue-row__chevron {
    font-size: 10px;
    color: #9aa0a6;
}

/* Hover + open states */

.issue-row:hover > .issue-row__summary {
    background: #f8f9fa;
}

.issue-row[open] > .issue-row__summary {
    background: #f1f3f4;
}

/* Rotate chevron when open */

.issue-row[open] .issue-row__chevron {
    transform: rotate(180deg);
}

/* ==============================
   ISSUE ROW – BODY
   ============================== */

.issue-row__body {
    padding: 8px 10px 10px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.issue-row__section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.issue-row__section-title {
    font-size: 11px;
    font-weight: 600;
    color: #5f6368;
    text-transform: uppercase;
}

/* description text */

.issue-row__description {
    white-space: pre-wrap;
    line-height: 1.4;
    color: #3c4043;
}

/* screenshot link (no image) */

.issue-row__file-link {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f0fe;
    color: #1a73e8;
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
}

.issue-row__file-link:hover {
    background: #d2e3fc;
}

/* ==============================
   FORM
   ============================== */

.issue-row__form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.issue-row__form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.issue-row__form-row label {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #5f6368;
}

.issue-row__form-row select {
    border-radius: 2px;
    border: 1px solid #dadce0;
    padding: 4px 8px;
    font-size: 12px;
}

/* note */

.issue-row__note {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #5f6368;
}

.issue-row__note textarea {
    border-radius: 2px;
    border: 1px solid #dadce0;
    padding: 5px 8px;
    min-height: 44px;
    font-size: 12px;
    resize: vertical;
}

.issue-row__note-help {
    font-size: 10px;
    color: #9aa0a6;
}

/* footer */

.issue-row__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.issue-row__updated {
    font-size: 10px;
    color: #9aa0a6;
}

/* small button */

.btn.btn-primary.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* ==============================
   LOGS
   ============================== */

.issue-row__logs-list {
    list-style: none;
    padding-left: 0;
    margin: 2px 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.issue-row__logs-list li {
    line-height: 1.3;
}

.issue-row__log-time {
    color: #5f6368;
    margin-right: 4px;
    font-family: monospace;
    font-size: 10px;
}

.issue-row__logs-empty {
    font-size: 11px;
    color: #9aa0a6;
}

/* ==============================
   RESPONSIVE
   ============================== */

@media (max-width: 1024px) {
    .issues-page .issues-columns.admin-store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .issues-page {
        padding: 16px 12px 24px;
    }

    .issues-page .issues-columns.admin-store-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .issue-row__summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .issue-row__summary-right {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .issue-row__title {
        max-width: 100%;
    }
}
/* ==============================
   Tighter column headers
   ============================== */

.issues-column__header {
    padding: 2px 8px;          /* smaller silver bar */
    font-size: 11px;
    justify-content: flex-start;
    gap: 6px;
}

.issues-column__badge {
    margin-left: 6px;
    padding: 0 6px;
    line-height: 18px;
    font-size: 11px;
}

/* ==============================
   Uniform collapsed rows
   ============================== */

.issue-row {
    margin: 0;
}

.issue-row__summary {
    padding: 4px 8px;
    min-height: 28px;
    font-size: 12px;
    white-space: nowrap;         /* keep bars single-line */
}

.issue-row__summary-left,
.issue-row__summary-right {
    flex-wrap: nowrap;
}

.issue-row__summary-right {
    overflow: hidden;
}

.issue-row__title {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.issue-row__summary-right > * {
    flex-shrink: 0;
}

/* Keep hover/open look simple */
.issue-row:hover > .issue-row__summary {
    background: #f8f9fa;
}

.issue-row[open] > .issue-row__summary {
    background: #f1f3f4;
}

/* ==============================
   Delete button styles
   ============================== */

.issue-row__delete-form {
    margin-top: 4px;
    text-align: right;
}

.btn.btn-danger.btn-xs {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 2px;
    background: #dc2626;
    border: 1px solid #b91c1c;
    color: #ffffff;
    cursor: pointer;
}

.btn.btn-danger.btn-xs:hover {
    background: #b91c1c;
}

/* Optional: on very small screens allow wrapping again */
@media (max-width: 768px) {
    .issue-row__summary {
        white-space: normal;
    }
}





/* === COLUMN HEADER: MAKE IT A THIN, FLAT BAR (NO GRADIENT) === */

.issues-page .issues-column {
    background: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.issues-page .issues-column__header {
    margin: 0 !important;
    padding: 2px 8px !important;           /* thin bar */
    min-height: 24px !important;
    height: 24px !important;
    background: #f5f5f5 !important;        /* flat, no gradient */
    background-image: none !important;
    border-bottom: 1px solid #dadce0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;/* label + count close together */
    gap: 4px !important;
    font-size: 11px !important;
}

.issues-page .issues-column__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.issues-page .issues-column__badge {
    margin-left: 6px !important;
    padding: 0 6px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 11px !important;
    border-radius: 9px;
    border: 1px solid #c4c4c4;
    background: #ffffff;
}

/* Make sure the dot itself is small */
.issues-page .issues-column__status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}
/* === ISSUE ROWS: ALL CLOSED BARS SAME HEIGHT === */

.issues-page details.issue-row {
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

/* The bar itself */
.issues-page details.issue-row > summary.issue-row__summary {
    margin: 0 !important;
    padding: 0 8px !important;
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    font-size: 12px;
    background: #ffffff;
    white-space: nowrap;
    overflow: hidden;
}

/* Left + right pieces line up nicely */
.issues-page .issue-row__summary-left,
.issues-page .issue-row__summary-right {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.issues-page .issue-row__summary-right {
    overflow: hidden;
}

/* Title truncates instead of wrapping */
.issues-page .issue-row__title {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta text also truncates so height never grows */
.issues-page .issue-row__meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep pills from stretching things */
.issues-page .issue-row__pill {
    flex-shrink: 0;
}

/* Chevron aligned and tiny */
.issues-page .issue-row__chevron {
    font-size: 10px;
    color: #9aa0a6;
}

/* Hover / open states: keep height the same, just change bg */
.issues-page details.issue-row:hover > summary.issue-row__summary {
    background: #f8f9fa;
}

.issues-page details.issue-row[open] > summary.issue-row__summary {
    background: #f1f3f4;
}

/* Body still uses your existing styles */
.issues-page .issue-row__body {
    padding: 8px 10px 10px;
    background: #ffffff;
}

/* On very small screens, allow wrapping again so nothing vanishes */
@media (max-width: 768px) {
    .issues-page details.issue-row > summary.issue-row__summary {
        height: auto !important;
        min-height: 28px !important;
        white-space: normal;
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ===========================
   Server Status Page
   Add to styles.css
   =========================== */

.server-status-page {
    max-width: 1100px;
    margin: 24px auto 40px auto;
    padding: 20px 24px 28px;
    background: #050711;
    border-radius: 12px;
    border: 1px solid #1b2235;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

.server-status-page h2 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    color: #e5e7eb;
}

.server-status-subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    color: #9ca3af;
}

/* Grid layout for cards */
.server-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .server-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .server-status-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual server card */
.server-status-card {
    background: radial-gradient(circle at top left, #1b2235 0, #0b1020 55%, #050711 100%);
    border-radius: 10px;
    border: 1px solid #20263b;
    padding: 14px 14px 12px;
    position: relative;
    overflow: hidden;
}

.server-status-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(63, 131, 248, 0.15), transparent);
    opacity: 0.2;
    pointer-events: none;
}

.server-status-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.server-status-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #f9fafb;
}

/* Status badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: rgba(17, 24, 39, 0.9);
}

/* Online = green */
.status-online {
    color: #bbf7d0;
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.35), rgba(6, 95, 70, 0.4));
    border-color: rgba(22, 163, 74, 0.75);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 12px 20px rgba(22, 163, 74, 0.25);
}

/* Unstable = amber */
.status-warning {
    color: #fef3c7;
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.35), rgba(146, 64, 14, 0.4));
    border-color: rgba(217, 119, 6, 0.75);
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25), 0 12px 20px rgba(180, 83, 9, 0.26);
}

/* Offline = red */
.status-offline {
    color: #fecaca;
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.4), rgba(127, 29, 29, 0.55));
    border-color: rgba(248, 113, 113, 0.8);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.28), 0 12px 22px rgba(185, 28, 28, 0.3);
}

/* Card body */
.server-status-card-body {
    position: relative;
    z-index: 1;
    display: grid;
    row-gap: 6px;
    padding-top: 2px;
}

.server-status-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.server-status-label {
    color: #9ca3af;
    white-space: nowrap;
}

.server-status-value {
    color: #e5e7eb;
    text-align: right;
    flex: 1 1 auto;
    word-break: break-word;
}

/* Footnote */
.server-status-footnote {
    margin-top: 18px;
    font-size: 12px;
    color: #6b7280;
    text-align: right;
    border-top: 1px dashed rgba(55, 65, 81, 0.7);
    padding-top: 8px;
}
/* ======= 8 Visions – Splash Modal (overlay) ======= */
/* Base overlay – hidden by default, show with .is-visible */
.splash-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Add this class via JS/PHP when you want to show the splash */
.splash-modal-overlay.is-visible {
    display: flex;
}

/* Main modal container */
.splash-modal {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.7);
    background: #05070b url("/images/splash/splashbackground.jpg") center center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

/* Inner padding + subtle gradient overlay */
.splash-modal-inner {
    position: relative;
    padding: 2.25rem 2.5rem 2rem;
    background: linear-gradient(
        145deg,
        rgba(4, 8, 18, 0.92),
        rgba(8, 10, 20, 0.94)
    );
}

/* Top-right X button */
.splash-modal-close-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(10, 12, 22, 0.95);
    color: #f5f5f5;
    font-size: 1.4rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.splash-modal-close-icon:hover {
    background: rgba(40, 45, 75, 0.95);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

.splash-modal-close-icon:active {
    transform: translateY(0);
}

/* Header / title box */
.splash-modal-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.splash-modal-title {
    display: inline-block;
    padding: 0.9rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 55%),
                rgba(6, 10, 24, 0.96);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f8f8ff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.55);
}

/* Body layout */
.splash-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Feature cards row */
.splash-features-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

/* Individual feature card */
.splash-feature-card {
    flex: 1 1 0;
    min-width: 230px;
    max-width: 340px;
    background: linear-gradient(
        145deg,
        rgba(15, 18, 34, 0.98),
        rgba(8, 10, 22, 0.98)
    );
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.1rem 1.1rem 1.2rem;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Small top label or icon area (if used) */
.splash-feature-tag {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(198, 207, 255, 0.9);
    opacity: 0.85;
}

/* Card title */
.splash-feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fdfdff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card image */
.splash-feature-image {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

/* Card description text */
.splash-feature-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d4d7ea;
}

/* Bottom action area */
.splash-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 0.75rem;
}

/* Button base – works for <a> or <button> */
.splash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.98rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.1s ease,
        box-shadow 0.16s ease;
}

/* Primary: PLAY NOW */
.splash-btn-primary {
    background: linear-gradient(135deg, #e9b45c, #ffdd8a);
    border-color: rgba(0, 0, 0, 0.65);
    color: #191105;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

.splash-btn-primary:hover {
    background: linear-gradient(135deg, #ffd36a, #ffe79c);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.8);
}

.splash-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.65);
}

/* Secondary: close button */
.splash-btn-secondary {
    background: rgba(9, 11, 22, 0.96);
    border-color: rgba(255, 255, 255, 0.32);
    color: #e3e6ff;
}

.splash-btn-secondary:hover {
    background: rgba(32, 35, 54, 0.98);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.splash-btn-secondary:active {
    transform: translateY(0);
}

/* Keyboard focus outline */
.splash-btn:focus-visible,
.splash-modal-close-icon:focus-visible {
    outline: 2px solid #ffd56b;
    outline-offset: 2px;
}

/* Small helper text area (optional) */
.splash-modal-footer-note {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(210, 215, 255, 0.75);
}

/* ======= Responsive tweaks ======= */

@media (max-width: 900px) {
    .splash-modal-inner {
        padding: 1.8rem 1.4rem 1.6rem;
    }

    .splash-modal-title {
        font-size: 1.25rem;
        padding-inline: 1.2rem;
    }

    .splash-feature-card {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .splash-modal-overlay {
        padding: 1.2rem 0.75rem;
    }

    .splash-modal-inner {
        padding: 1.6rem 1.1rem 1.4rem;
    }

    .splash-modal-title {
        font-size: 1.1rem;
    }

    .splash-feature-image {
        height: 130px;
    }

    .splash-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .splash-btn {
        width: 100%;
    }
}
/* ======= 8 Visions – Splash Modal (overlay) ======= */
/* Base overlay – hidden by default, show with .is-visible */
.splash-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Add this class via PHP when you want to show the splash */
.splash-modal-overlay.is-visible {
    display: flex;
}

/* Main modal container */
.splash-modal {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.7);
    background: transparent; /* background is handled by .splash-modal-inner */
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

/* Inner padding + background image + gradient overlay */
.splash-modal-inner {
    position: relative;
    padding: 2.25rem 2.5rem 2rem;
    /* First layer = gradient, second layer = your splash background image */
    background:
        linear-gradient(145deg, rgba(4, 8, 18, 0.86), rgba(8, 10, 20, 0.96)),
        url("/images/splash/splashbackground.jpg") center center / cover no-repeat;
}

/* Header / title box */
.splash-modal-header {
    text-align: center;
    margin-bottom: 1.75rem;
}

.splash-modal-title {
    display: inline-block;
    padding: 0.9rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.12), transparent 55%),
                rgba(6, 10, 24, 0.96);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f8f8ff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.55);
}

/* Body layout */
.splash-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Feature cards row */
.splash-features-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

/* Individual feature card */
.splash-feature-card {
    flex: 1 1 0;
    min-width: 230px;
    max-width: 340px;
    background: linear-gradient(
        145deg,
        rgba(15, 18, 34, 0.98),
        rgba(8, 10, 22, 0.98)
    );
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.1rem 1.1rem 1.2rem;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Card title */
.splash-feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fdfdff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card image */
.splash-feature-image {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

/* Card description text */
.splash-feature-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d4d7ea;
}

/* Bottom action area */
.splash-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 0.75rem;
}

/* Button base – works for <a> or <button> */
.splash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.98rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.1s ease,
        box-shadow 0.16s ease;
}

/* Primary: PLAY NOW */
.splash-btn-primary {
    background: linear-gradient(135deg, #e9b45c, #ffdd8a);
    border-color: rgba(0, 0, 0, 0.65);
    color: #191105;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

.splash-btn-primary:hover {
    background: linear-gradient(135deg, #ffd36a, #ffe79c);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.8);
}

.splash-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.65);
}

/* Secondary: close button */
.splash-btn-secondary {
    background: rgba(9, 11, 22, 0.96);
    border-color: rgba(255, 255, 255, 0.32);
    color: #e3e6ff;
}

.splash-btn-secondary:hover {
    background: rgba(32, 35, 54, 0.98);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.splash-btn-secondary:active {
    transform: translateY(0);
}

/* Keyboard focus outline */
.splash-btn:focus-visible {
    outline: 2px solid #ffd56b;
    outline-offset: 2px;
}

/* Small helper text area (optional) */
.splash-modal-footer-note {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: rgba(210, 215, 255, 0.75);
}

/* ======= Responsive tweaks ======= */

@media (max-width: 900px) {
    .splash-modal-inner {
        padding: 1.8rem 1.4rem 1.6rem;
    }

    .splash-modal-title {
        font-size: 1.25rem;
        padding-inline: 1.2rem;
    }

    .splash-feature-card {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .splash-modal-overlay {
        padding: 1.2rem 0.75rem;
    }

    .splash-modal-inner {
        padding: 1.6rem 1.1rem 1.4rem;
    }

    .splash-modal-title {
        font-size: 1.1rem;
    }

    .splash-feature-image {
        height: 130px;
    }

    .splash-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .splash-btn {
        width: 100%;
    }
}
/* ======= 8 Visions – Splash Modal (overlay) ======= */
.splash-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.splash-modal-overlay.is-visible {
    display: flex;
}

/* Main modal container */
.splash-modal {
    position: relative;
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    overflow-y: auto;
    border-radius: 14px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.7);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-sizing: border-box;
}

/* Inner: ONLY your splash background, no dark gradient */
.splash-modal-inner {
    position: relative;
    padding: 2.25rem 2.5rem 2rem;
    background: url("/images/splash/splashbackground.jpg") center center / cover no-repeat;
}

/* Header reset so it does NOT use the global site banner */
.splash-modal-header {
    text-align: center;
    margin-bottom: 1.75rem;

    /* Kill any global header/banner styling */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: auto !important;
    padding: 0 !important;
}

/* Title pill */
.splash-modal-title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.85);
}


/* Body layout */
.splash-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Feature cards row */
.splash-features-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

/* Individual feature card */
.splash-feature-card {
    flex: 1 1 0;
    min-width: 230px;
    max-width: 340px;
    background: linear-gradient(
        145deg,
        rgba(15, 18, 34, 0.98),
        rgba(8, 10, 22, 0.98)
    );
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.1rem 1.1rem 1.2rem;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Card title */
.splash-feature-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fdfdff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Card image */
.splash-feature-image {
    width: 100%;
    height: 150px;
    border-radius: 8px;
    object-fit: cover;
    margin-top: 0.35rem;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

/* Card description text */
.splash-feature-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #d4d7ea;
}

/* Bottom action area */
.splash-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
    margin-top: 0.75rem;
}

/* Button base */
.splash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.98rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.1s ease,
        box-shadow 0.16s ease;
}

/* Primary: PLAY NOW */
.splash-btn-primary {
    background: linear-gradient(135deg, #e9b45c, #ffdd8a);
    border-color: rgba(0, 0, 0, 0.65);
    color: #191105;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.7);
}

.splash-btn-primary:hover {
    background: linear-gradient(135deg, #ffd36a, #ffe79c);
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.8);
}

.splash-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.65);
}

/* Secondary: close button */
.splash-btn-secondary {
    background: rgba(9, 11, 22, 0.96);
    border-color: rgba(255, 255, 255, 0.32);
    color: #e3e6ff;
}

.splash-btn-secondary:hover {
    background: rgba(32, 35, 54, 0.98);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.splash-btn-secondary:active {
    transform: translateY(0);
}

/* Focus outlines */
.splash-btn:focus-visible {
    outline: 2px solid #ffd56b;
    outline-offset: 2px;
}

/* ======= Responsive tweaks ======= */
@media (max-width: 900px) {
    .splash-modal-inner {
        padding: 1.8rem 1.4rem 1.6rem;
    }

    .splash-modal-title {
        font-size: 1.25rem;
        padding-inline: 1.2rem;
    }

    .splash-feature-card {
        min-width: 100%;
    }
}

@media (max-width: 600px) {
    .splash-modal-overlay {
        padding: 1.2rem 0.75rem;
    }

    .splash-modal-inner {
        padding: 1.6rem 1.1rem 1.4rem;
    }

    .splash-modal-title {
        font-size: 1.1rem;
    }

    .splash-feature-image {
        height: 130px;
    }

    .splash-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .splash-btn {
        width: 100%;
    }
}
.splash-modal-title {
    display: inline-block;
    padding: 0.9rem 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: transparent;           /* no black fill, background image shows through */
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);  /* keep it readable on bright image */
    box-shadow: none;
}
.splash-modal-title {
    /* remove pill styling */
    display: block;
    padding: 0;
    margin: 0 auto;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;

    /* simple heading text */
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); /* keeps it readable on bright bg */
}
.splash-modal-header {
    text-align: center;
    margin-bottom: 1.25rem;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: auto !important;
    padding: 0 !important;
}
/* ===== Achievements display (profiles) ===== */

.profile-achievements {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-achievements h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #f0f3ff;
}

.achievements-empty {
    font-size: 0.9rem;
    color: #9ca3c5;
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
}

.achievement-badge {
    background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), rgba(12, 15, 32, 0.95));
    border-radius: 8px;
    padding: 6px 6px 8px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(90, 108, 210, 0.25);
    cursor: default;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;
}

.achievement-badge:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(147, 197, 253, 0.6),
        0 8px 16px rgba(0, 0, 0, 0.35);
    background: radial-gradient(circle at top, rgba(129, 230, 217, 0.18), rgba(12, 15, 32, 0.98));
}

.achievement-badge-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 4px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(12, 18, 40, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-badge-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.achievement-badge-name {
    font-size: 0.78rem;
    line-height: 1.2;
    color: #e5e7ff;
    font-weight: 500;
    word-wrap: break-word;
}

/* ===== Achievements admin page ===== */

.achievements-admin-page {
    max-width: 1100px;
    margin: 0 auto 40px;
}

.achievements-admin-header {
    margin-bottom: 16px;
}

.achievements-admin-header h2 {
    margin-bottom: 4px;
}

.achievements-admin-header p {
    margin: 0;
    font-size: 0.95rem;
    color: #a3aed0;
}

.achievements-admin-tabs {
    display: inline-flex;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    padding: 3px;
    margin: 16px 0 20px;
}

.achievements-admin-tab {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: #cbd5f5;
    transition: background 0.12s ease-out, color 0.12s ease-out;
}

.achievements-admin-tab.active {
    background: linear-gradient(135deg, #4f46e5, #10b981);
    color: #f9fafb;
}

.achievements-admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 24px;
}

@media (max-width: 960px) {
    .achievements-admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.achievements-admin-form {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 12px;
    padding: 16px 18px 18px;
    box-shadow: 0 0 0 1px rgba(148, 163, 255, 0.15);
}

.achievements-admin-form h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
}

.achievements-admin-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.86rem;
    color: #e5e7ff;
}

.achievements-admin-label input[type="text"],
.achievements-admin-label input[type="number"],
.achievements-admin-label select,
.achievements-admin-label textarea {
    width: 100%;
    margin-top: 4px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 255, 0.35);
    background: rgba(15, 23, 42, 0.8);
    color: #f9fafb;
    padding: 6px 8px;
    font-size: 0.87rem;
}

.achievements-admin-label textarea {
    resize: vertical;
    min-height: 70px;
}

.achievements-admin-label small {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: #9ca3c5;
}

.achievements-admin-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 12px;
    font-size: 0.85rem;
    color: #e5e7ff;
}

.achievements-admin-badge-preview {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #cbd5f5;
}

.achievement-badge-image {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}

.achievement-no-image {
    font-size: 0.78rem;
    color: #9ca3c5;
}

.achievements-admin-list {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 12px;
    padding: 14px 16px 16px;
    box-shadow: 0 0 0 1px rgba(148, 163, 255, 0.15);
}

.achievements-admin-list h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1rem;
}

.achievements-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.achievements-admin-table th,
.achievements-admin-table td {
    padding: 6px 6px;
    border-bottom: 1px solid rgba(30, 64, 175, 0.35);
    vertical-align: top;
}

.achievements-admin-table th {
    text-align: left;
    font-weight: 600;
    color: #e5e7ff;
    white-space: nowrap;
}

.achievement-status {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.75rem;
}

.achievement-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
}

.achievement-status.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: #fecaca;
}

.achievements-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.achievements-admin-toggle-form {
    display: inline-block;
}

.achievements-admin-award-form {
    max-width: 480px;
}

.achievements-admin-success {
    margin-bottom: 12px;
}

/* Make sure small buttons still look okay */
.btn-small {
    padding: 4px 8px;
    font-size: 0.75rem;
}
.profile-meta-row {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: #c4c9da;
}

.profile-meta-label {
    font-weight: 600;
    margin-right: 0.25rem;
    color: #e2e6f5;
}

.profile-meta-value {
    font-weight: 700;
    color: #ffffff;
}
.profile-recent-activity {
    margin-top: 1.5rem;
}

.profile-activity-empty {
    color: #c4c9da;
    font-size: 0.9rem;
}
.profile-recent-activity {
    margin-top: 1.5rem;
}

.profile-activity-empty {
    color: #c4c9da;
    font-size: 0.9rem;
}
/* ===== Compare players card ===== */
.highscores-compare-card {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(129, 140, 248, 0.45);
    background: radial-gradient(circle at top, rgba(79, 70, 229, 0.18), rgba(15, 23, 42, 0.95));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
}

.highscores-compare-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e5e7eb;
}

.highscores-compare-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.compare-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.5rem;
    align-items: flex-end;
}

.compare-input-group label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: 0.2rem;
}

.compare-input-group input {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
}

.compare-input-group input:focus {
    outline: none;
    border-color: rgba(129, 140, 248, 0.9);
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.7);
}

.compare-vs {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    text-align: center;
    padding-bottom: 0.45rem;
}

.highscores-compare-card .btn-compare {
    margin-top: 0.1rem;
    width: 100%;
}

.compare-hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* ===== Compare modal ===== */
.compare-modal-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, rgba(56, 189, 248, 0.1), rgba(15, 23, 42, 0.96));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}

.compare-modal-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.compare-modal {
    width: min(1100px, 95vw);
    max-height: 90vh;
    background: linear-gradient(135deg, #020617 0%, #020617 40%, #111827 100%);
    border-radius: 18px;
    border: 1px solid rgba(129, 140, 248, 0.7);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.95);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.compare-modal-header {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(30, 64, 175, 0.8);
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
        radial-gradient(circle at 100% 0%, rgba(129, 140, 248, 0.18), transparent 55%),
        #020617;
}

.compare-modal-title h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #e5e7eb;
}

.compare-modal-eyebrow {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
    margin-bottom: 0.15rem;
}

.compare-modal-close {
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    border-radius: 999px;
    padding: 0.2rem 0.4rem;
}

.compare-modal-close:hover {
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
}

.compare-modal-body {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}

/* Summary row at top of modal */
.compare-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.compare-summary-card {
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.95), rgba(3, 7, 18, 0.95));
    border-radius: 0.9rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(30, 64, 175, 0.9);
    min-width: 180px;
}

.compare-summary-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #9ca3af;
    margin-bottom: 0.2rem;
}

.compare-summary-main {
    font-size: 1.25rem;
    font-weight: 700;
    color: #e5e7eb;
}

.compare-summary-sub {
    font-size: 0.8rem;
    color: #9ca3af;
}

.compare-summary-center {
    text-align: center;
    flex: 1;
    min-width: 220px;
}

.compare-summary-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e5e7eb;
    margin-bottom: 0.25rem;
}

.compare-summary-legend {
    font-size: 0.75rem;
    color: #9ca3af;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.3rem;
}

.legend-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    margin-right: 0.25rem;
}

.legend-dot-win {
    background: rgba(74, 222, 128, 0.9);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}

.legend-dot-tie {
    background: rgba(129, 140, 248, 0.9);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
}

.compare-summary-score {
    font-size: 0.85rem;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.compare-summary-score-vs {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
}

/* Grid of skills */
.compare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.2fr);
    gap: 0.4rem 0.9rem;
    align-items: stretch;
    font-size: 0.9rem;
}

.compare-grid-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #9ca3af;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(31, 41, 55, 0.9);
}

.compare-grid-heading-center {
    text-align: center;
}

.compare-skill-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #e5e7eb;
    justify-content: center;
}

.compare-skill-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(148, 163, 255, 0.6));
}

/* Cells for each player */
.compare-cell {
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.95), rgba(3, 7, 18, 0.95));
    border-radius: 0.7rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(31, 41, 55, 0.95);
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-height: 50px;
}

.compare-cell-win {
    border-color: rgba(34, 197, 94, 0.9);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5);
}

.compare-cell-lose {
    opacity: 0.75;
}

.compare-cell-tie {
    border-color: rgba(129, 140, 248, 0.7);
}

.compare-main-stat {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e5e7eb;
}

.compare-sub-stat {
    font-size: 0.78rem;
    color: #9ca3af;
}

.compare-diff-stat {
    font-size: 0.75rem;
    color: #a5b4fc;
}

/* Misc */
.compare-vs-inline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #9ca3af;
    margin: 0 0.35rem;
}

.compare-error {
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(248, 113, 113, 0.7);
    background: rgba(30, 64, 175, 0.16);
    color: #fecaca;
    font-size: 0.85rem;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .compare-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .compare-grid-heading-center {
        display: none;
    }

    .compare-skill-label {
        justify-content: flex-start;
    }
}
/* TEST */

/* ==== Forum: mini achievements box under avatar ==== */

.forum-user-achievements {
    margin-top: 6px;
    padding: 4px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 255, 0.35);
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
}

.forum-user-achievement-icon,
.forum-user-achievement-more {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 0 0 1px rgba(148, 163, 255, 0.4);
    overflow: hidden;
    cursor: default;
    transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out;
}

.forum-user-achievement-icon img {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.forum-user-achievement-icon:hover,
.forum-user-achievement-more:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(191, 219, 254, 0.9),
        0 4px 10px rgba(0, 0, 0, 0.45);
    background: rgba(15, 23, 42, 1);
}

.forum-user-achievement-more {
    font-size: 0.7rem;
    font-weight: 600;
    color: #dbeafe;
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.6);
}

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

.stafflist-page {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 16px;
}

.stafflist-page h2 {
    font-size: 26px;
    margin-bottom: 4px;
}

.stafflist-subtitle {
    color: #cbd5f5;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Layout grid for tiers */
.stafflist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Base tier card style */
.stafflist-tier-card {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: 14px;
    background: radial-gradient(circle at top left, #1f2937 0, #020617 55%, #000 100%);
    border: 1px solid #1f2937;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

/* Subtle glow or accent per tier */
.stafflist-tier-4 {
    border-color: #f97316;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.4);
}

.stafflist-tier-3 {
    border-color: #3b82f6;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}

.stafflist-tier-2 {
    border-color: #a855f7;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

.stafflist-tier-1 {
    border-color: #14b8a6;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.25);
}

.stafflist-tier-header {
    margin-bottom: 10px;
}

/* Little label at the top like a badge */
.stafflist-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #e5e7eb;
}

.stafflist-tier-title {
    font-size: 18px;
    margin: 8px 0 2px;
}

.stafflist-tier-desc {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

/* Members list inside each tier */
.stafflist-members {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.stafflist-member {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(31, 41, 55, 0.8);
}

.stafflist-member:first-child {
    border-top: none;
    padding-top: 2px;
}

.stafflist-member-left {
    margin-right: 10px;
}

.stafflist-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #4b5563;
}

.stafflist-member-right {
    flex: 1;
    min-width: 0;
}

.stafflist-member-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

/* Slightly smaller crown in this context */
.stafflist-staff-icon {
    width: 16px;
    height: 16px;
}

/* Empty state text */
.stafflist-empty {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 10px;
}
/* ===========================
   STAFFLIST PAGE – UPDATED
   =========================== */

.stafflist-page {
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 16px;
}

.stafflist-page h2 {
    font-size: 26px;
    margin-bottom: 4px;
}

.stafflist-subtitle {
    color: #cbd5f5;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Layout grid for tiers */
.stafflist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Outer card can keep your background image */
.stafflist-tier-card {
    position: relative;
    padding: 0; /* inner box will handle padding */
    border-radius: 16px;
    overflow: hidden;
    /* keep whatever background/image you already have on this element */
}

/* Inner box that makes text readable regardless of bg */
.stafflist-tier-inner {
    background: rgba(3, 7, 18, 0.9); /* dark overlay */
    border-radius: 16px;
    padding: 14px 16px 12px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    backdrop-filter: blur(4px);
}

/* Tier accent by rank (just border/glow, image stays on outer card) */
.stafflist-tier-4 .stafflist-tier-inner {
    border-color: #f97316;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.4);
}

.stafflist-tier-3 .stafflist-tier-inner {
    border-color: #3b82f6;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}

.stafflist-tier-2 .stafflist-tier-inner {
    border-color: #a855f7;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

.stafflist-tier-1 .stafflist-tier-inner {
    border-color: #14b8a6;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.25);
}

.stafflist-tier-header {
    margin-bottom: 10px;
}

.stafflist-tier-title {
    font-size: 18px;
    margin: 0 0 4px;
    color: #e5e7eb;
}

.stafflist-tier-desc {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

/* Members list */
.stafflist-members {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.stafflist-member {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-top: 1px solid rgba(31, 41, 55, 0.8);
}

.stafflist-member:first-child {
    border-top: none;
    padding-top: 2px;
}

.stafflist-member-left {
    margin-right: 10px;
}

.stafflist-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #4b5563;
}

.stafflist-member-right {
    flex: 1;
    min-width: 0;
}

.stafflist-member-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.stafflist-staff-icon {
    width: 16px;
    height: 16px;
}

.stafflist-empty {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 10px;
}
/* ===========================
   STAFF LIST – CHAIN OF COMMAND
   =========================== */

.stafflist-page {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 16px;
}

.stafflist-page h2 {
    font-size: 26px;
    margin-bottom: 4px;
}

.stafflist-subtitle {
    color: #cbd5f5;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Vertical chain container */
.stafflist-chain {
    position: relative;
    padding-left: 40px;
    margin-top: 10px;
}

/* Vertical line down the side */
.stafflist-chain::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.4),
        rgba(148, 163, 184, 0.8),
        rgba(148, 163, 184, 0.4)
    );
}

/* Each tier block in the chain */
.stafflist-tier-block {
    position: relative;
    margin-bottom: 24px;
}

/* Circle node on the chain */
.stafflist-tier-node {
    position: absolute;
    left: 11px;
    top: 18px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #020617;
    border: 2px solid #9ca3af;
    box-shadow: 0 0 6px rgba(15, 23, 42, 0.8);
}

/* Box that holds header + members */
.stafflist-tier-content {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 10px;
    padding: 10px 14px 10px;
    border: 1px solid #4b5563;
    /* kill any background images coming from global styles */
    background-image: none !important;
}

/* Accent colours by rights */
.stafflist-rights-4 .stafflist-tier-node {
    border-color: #f97316;
}

.stafflist-rights-4 .stafflist-tier-content {
    border-color: #f97316;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.35);
}

.stafflist-rights-3 .stafflist-tier-node {
    border-color: #3b82f6;
}

.stafflist-rights-3 .stafflist-tier-content {
    border-color: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.stafflist-rights-2 .stafflist-tier-node {
    border-color: #a855f7;
}

.stafflist-rights-2 .stafflist-tier-content {
    border-color: #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.28);
}

.stafflist-rights-1 .stafflist-tier-node {
    border-color: #14b8a6;
}

.stafflist-rights-1 .stafflist-tier-content {
    border-color: #14b8a6;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.25);
}

/* Tier header: horizontal bar with crown + text */
.stafflist-tier-header {
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(31, 41, 55, 0.9);
    padding-bottom: 6px;
}

.stafflist-tier-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stafflist-tier-icon {
    width: 22px;
    height: 22px;
}

.stafflist-tier-text {
    display: flex;
    flex-direction: column;
}

.stafflist-tier-title {
    margin: 0;
    font-size: 17px;
    color: #e5e7eb;
}

.stafflist-tier-desc {
    margin: 2px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

/* Members list under each tier */
.stafflist-members {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.stafflist-member {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.stafflist-member + .stafflist-member {
    border-top: 1px solid rgba(31, 41, 55, 0.75);
}

.stafflist-member-left {
    margin-right: 8px;
}

.stafflist-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #4b5563;
}

.stafflist-member-right {
    flex: 1;
    min-width: 0;
}

.stafflist-member-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.stafflist-staff-icon {
    width: 16px;
    height: 16px;
}

.stafflist-empty {
    margin: 8px 0 0;
    font-size: 13px;
    color: #9ca3af;
}
/* ===========================
   STAFF LIST – CHAIN OF COMMAND
   =========================== */

.stafflist-page {
    max-width: 900px;
    margin: 0 auto 40px;
    padding: 16px;
}

.stafflist-page h2 {
    font-size: 26px;
    margin-bottom: 4px;
}

.stafflist-subtitle {
    color: #cbd5f5;
    font-size: 14px;
    margin-bottom: 18px;
}

/* Vertical chain container */
.stafflist-chain {
    position: relative;
    padding-left: 40px;
    margin-top: 10px;
}

/* Vertical line down the side */
.stafflist-chain::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.4),
        rgba(148, 163, 184, 0.8),
        rgba(148, 163, 184, 0.4)
    );
}

/* Each tier block in the chain */
.stafflist-tier-block {
    position: relative;
    margin-bottom: 24px;
}

/* Circle node on the chain */
.stafflist-tier-node {
    position: absolute;
    left: 11px;
    top: 18px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #020617;
    border: 2px solid #9ca3af;
    box-shadow: 0 0 6px rgba(15, 23, 42, 0.8);
}

/* Box that holds header + members */
.stafflist-tier-content {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 10px;
    padding: 10px 14px 10px;
    border: 1px solid #4b5563;
    /* kill any background images coming from global styles */
    background-image: none !important;
}

/* Accent colours by rights */
.stafflist-rights-4 .stafflist-tier-node {
    border-color: #f97316;
}

.stafflist-rights-4 .stafflist-tier-content {
    border-color: #f97316;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.35);
}

.stafflist-rights-3 .stafflist-tier-node {
    border-color: #3b82f6;
}

.stafflist-rights-3 .stafflist-tier-content {
    border-color: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.stafflist-rights-2 .stafflist-tier-node {
    border-color: #a855f7;
}

.stafflist-rights-2 .stafflist-tier-content {
    border-color: #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.28);
}

.stafflist-rights-1 .stafflist-tier-node {
    border-color: #14b8a6;
}

.stafflist-rights-1 .stafflist-tier-content {
    border-color: #14b8a6;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.25);
}

/* Tier header: horizontal bar with crown + text */
.stafflist-tier-header {
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(31, 41, 55, 0.9);
    padding-bottom: 6px;
}

.stafflist-tier-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stafflist-tier-icon {
    width: 22px;
    height: 22px;
}

.stafflist-tier-text {
    display: flex;
    flex-direction: column;
}

.stafflist-tier-title {
    margin: 0;
    font-size: 17px;
    color: #e5e7eb;
}

.stafflist-tier-desc {
    margin: 2px 0 0;
    font-size: 13px;
    color: #9ca3af;
}

/* Members list under each tier */
.stafflist-members {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.stafflist-member {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.stafflist-member + .stafflist-member {
    border-top: 1px solid rgba(31, 41, 55, 0.75);
}

.stafflist-member-left {
    margin-right: 8px;
}

.stafflist-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #4b5563;
}

.stafflist-member-right {
    flex: 1;
    min-width: 0;
}

.stafflist-member-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.stafflist-staff-icon {
    width: 16px;
    height: 16px;
}

.stafflist-empty {
    margin: 8px 0 0;
    font-size: 13px;
    color: #9ca3af;
}
/* ===========================
   STAFF LIST – CLEAN TITLE BAR
   =========================== */

/* Card that holds each tier – force no background image */
.stafflist-tier-content {
    background-color: #020617 !important;   /* solid dark */
    background-image: none !important;      /* kill any global bg image */
    border-radius: 10px;
    padding: 10px 14px 10px;
    border: 1px solid #4b5563;
}

/* Short title bar at top (no images, just flat color) */
.stafflist-tier-header {
    background-color: #0b1120 !important;
    background-image: none !important;
    margin: 0 0 8px;
    padding: 4px 10px 6px;
    border-radius: 6px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

/* Row inside the header: crown + title + desc */
.stafflist-tier-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Optional: keep the little crown icon next to the title.
   If you decide you want *no crown at all*, you can hide it with:
   .stafflist-tier-icon { display:none; }
*/
.stafflist-tier-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.stafflist-tier-text {
    display: flex;
    flex-direction: column;
}

.stafflist-tier-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
}

.stafflist-tier-desc {
    margin: 2px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

/* Keep the chain look from before (no background images here either) */
.stafflist-chain {
    position: relative;
    padding-left: 40px;
    margin-top: 10px;
}

.stafflist-chain::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.4),
        rgba(148, 163, 184, 0.8),
        rgba(148, 163, 184, 0.4)
    );
}

.stafflist-tier-block {
    position: relative;
    margin-bottom: 24px;
}

.stafflist-tier-node {
    position: absolute;
    left: 11px;
    top: 18px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #020617;
    border: 2px solid #9ca3af;
    box-shadow: 0 0 6px rgba(15, 23, 42, 0.8);
}

/* Accent by rights (optional, keeps the glow per tier) */
.stafflist-rights-4 .stafflist-tier-node {
    border-color: #f97316;
}
.stafflist-rights-4 .stafflist-tier-content {
    border-color: #f97316;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.3);
}

.stafflist-rights-3 .stafflist-tier-node {
    border-color: #3b82f6;
}
.stafflist-rights-3 .stafflist-tier-content {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.28);
}

.stafflist-rights-2 .stafflist-tier-node {
    border-color: #a855f7;
}
.stafflist-rights-2 .stafflist-tier-content {
    border-color: #a855f7;
    box-shadow: 0 0 9px rgba(168, 85, 247, 0.26);
}

.stafflist-rights-1 .stafflist-tier-node {
    border-color: #14b8a6;
}
.stafflist-rights-1 .stafflist-tier-content {
    border-color: #14b8a6;
    box-shadow: 0 0 8px rgba(20, 184, 166, 0.25);
}

/* Member list stays the same, just included for completeness */
.stafflist-members {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.stafflist-member {
    display: flex;
    align-items: center;
    padding: 5px 0;
}

.stafflist-member + .stafflist-member {
    border-top: 1px solid rgba(31, 41, 55, 0.75);
}

.stafflist-member-left {
    margin-right: 8px;
}

.stafflist-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #4b5563;
}

.stafflist-member-right {
    flex: 1;
    min-width: 0;
}

.stafflist-member-name {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.stafflist-staff-icon {
    width: 16px;
    height: 16px;
}

.stafflist-empty {
    margin: 8px 0 0;
    font-size: 13px;
    color: #9ca3af;
}
/* ===========================
   STAFF LIST – COMPACT BOXES
   =========================== */

/* Overall chain container: less left padding + tighter spacing */
.stafflist-chain {
    padding-left: 28px;
    margin-top: 6px;
}

/* Each tier block: smaller gap between tiers */
.stafflist-tier-block {
    margin-bottom: 14px;
}

/* The vertical node (dot) stays the same size, just aligning to new spacing */
.stafflist-tier-node {
    top: 14px; /* slightly higher so it lines up with smaller header */
}

/* Card body around header + members – reduce padding */
.stafflist-tier-content {
    padding: 6px 10px 8px;
    border-radius: 8px;
}

/* Shorter title bar */
.stafflist-tier-header {
    margin: 0 0 4px;
    padding: 3px 8px 4px;
    border-radius: 5px;
}

/* Title + description: slightly smaller text */
.stafflist-tier-title {
    font-size: 14px;
}

.stafflist-tier-desc {
    font-size: 11px;
}

/* Member list: tighter spacing */
.stafflist-members {
    margin: 4px 0 0;
}

.stafflist-member {
    padding: 3px 0;
}

.stafflist-member + .stafflist-member {
    border-top: 1px solid rgba(31, 41, 55, 0.7);
}

/* Smaller avatar + slightly smaller name line */
.stafflist-avatar {
    width: 26px;
    height: 26px;
}

.stafflist-member-name {
    font-size: 13px;
}

/* Slightly smaller rank icon */
.stafflist-staff-icon {
    width: 14px;
    height: 14px;
}
/* =======================================
   STAFF LIST – FORCE COMPACT TIER HEADER
   ======================================= */

/* Kill any old min-height on the outer containers */
.stafflist-tier-card,
.stafflist-tier-block,
.stafflist-tier-content,
.stafflist-tier-header {
    min-height: 0 !important;
}

/* Compact the whole tier content box */
.stafflist-tier-content {
    padding: 6px 10px 8px;      /* smaller padding */
    border-radius: 8px;
}

/* Compact the title bar itself */
.stafflist-tier-header {
    padding: 4px 10px;          /* short bar */
    margin: 0 0 4px;
    border-radius: 5px;
}

/* Slightly smaller text so it doesn’t look crowded */
.stafflist-tier-title {
    font-size: 14px;
    line-height: 1.2;
}

.stafflist-tier-desc {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 2px;
}

/* Tighten member list a bit so the whole block feels smaller */
.stafflist-members {
    margin: 4px 0 0;
}

.stafflist-member {
    padding: 3px 0;
}

.stafflist-avatar {
    width: 26px;
    height: 26px;
}

.stafflist-member-name {
    font-size: 13px;
}
/* Beta disclaimer styling in hero */
.homepage-hero-disclaimer {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0.75rem 0 1.25rem;
    padding: 0.75rem 1rem;

    background: rgba(10, 12, 24, 0.9); /* subtle dark panel */
    border-left: 3px solid #f0b429;    /* accent stripe */
    border-radius: 4px;

    color: #d4d8e8;
}

.homepage-hero-disclaimer strong {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8rem;
    margin-right: 0.25rem;
    color: #ffd66b;
}

.homepage-hero-disclaimer a {
    color: #ffd66b;
    text-decoration: underline;
}

.homepage-hero-disclaimer a:hover {
    text-decoration: none;
}
/* === Voting page === */

.votes-page {
    max-width: 900px;
    margin: 0 auto 40px;
}

.votes-subtitle {
    margin: 6px 0 18px;
    color: #c4c9da;
    font-size: 0.95rem;
}

.votes-summary-card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.votes-summary-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.votes-summary-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}

.votes-summary-value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fbbf24;
}

.votes-summary-text {
    margin: 0;
    font-size: 0.9rem;
    color: #d1d5db;
}

.votes-sites-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.votes-site-card {
    background: #020617;
    border-radius: 10px;
    border: 1px solid #1f2937;
    padding: 14px 16px;
}

.votes-site-header {
    margin-bottom: 12px;
}

.votes-site-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.votes-site-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e5e7eb;
}

.votes-site-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 2px 7px;
    border-radius: 9999px;
    border: 1px solid #4b5563;
    color: #9ca3af;
}

.votes-site-desc {
    margin: 0;
    font-size: 0.9rem;
    color: #d1d5db;
}

.votes-site-actions {
    margin-top: 10px;
    margin-bottom: 6px;
}

.votes-site-btn {
    width: 100%;
    text-align: center;
}

.votes-site-note {
    margin: 0;
    font-size: 0.8rem;
    color: #9ca3af;
}
/* ===== VOTE PAGE BANNER STYLE (RuLocus) ===== */

/* Keep the page centered and not too wide */
.votes-sites-grid {
    max-width: 700px;
    margin: 0 auto;
}

/* Turn the RuLocus card into a short horizontal banner */
.votes-site-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    background: #020617;
    border-radius: 8px;
    border: 1px solid #1f2937;
    padding: 8px 12px;
}

/* Header becomes compact and sits on the left side of the banner */
.votes-site-header {
    flex: 1 1 auto;
    margin: 0;
}

/* Title row stays as-is, but tighter spacing */
.votes-site-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

/* Name + tag slightly smaller so the banner stays short */
.votes-site-name {
    font-size: 1rem;
    font-weight: 600;
}

.votes-site-tag {
    font-size: 0.7rem;
}

/* Description: small line under the title, still inside the banner */
.votes-site-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Put the button on the right side of the banner */
.votes-site-actions {
    flex: 0 0 auto;
    margin: 0 0 0 12px; /* small gap from the text */
}

.votes-site-btn {
    width: auto;             /* no full-width button */
    padding: 6px 14px;
    font-size: 0.9rem;
}

/* Extra info goes below the banner as a small line of text */
.votes-site-note {
    flex-basis: 100%;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #9ca3af;
}
/* ===== RuLocus vote banner cleanup ===== */

/* Kill any background images and make it a small, flat banner */
.votes-site-card,
.votes-site-card::before,
.votes-site-card::after {
    background-image: none !important;
    background: #020617;               /* dark flat background */
    border: 1px solid #1f2937;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
    padding: 8px 12px;
}

/* If the card also uses a generic "homepage-card" style, override that too */
.votes-page .homepage-card,
.votes-page .homepage-card::before,
.votes-page .homepage-card::after {
    background-image: none !important;
    background: #020617;
}

/* Make the card a short horizontal bar */
.votes-site-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;              /* don't force tall card */
}

/* Compact header on the left */
.votes-site-header {
    flex: 1 1 auto;
    margin: 0;
}

.votes-site-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.votes-site-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.votes-site-tag {
    font-size: 0.7rem;
    padding: 2px 6px;
}

/* Hide the old description block inside the banner */
.votes-site-desc {
    display: none;
}

/* Button on the right side, not full width */
.votes-site-actions {
    flex: 0 0 auto;
    margin-left: 10px;
}

.votes-site-btn {
    width: auto;
    padding: 6px 14px;
    font-size: 0.9rem;
}

/* Small extra info line *below* the banner */
.votes-site-note {
    flex-basis: 100%;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #9ca3af;
}
/* ===== Vote page: remove homepage banner background from RuLocus block ===== */

/* Kill background (including any banner image) on the card wrapper */
.votes-page .homepage-card {
    background: #020617 !important;   /* or use transparent if you prefer */
    background-image: none !important;
}

/* Also nuke any pseudo-element used for the banner overlay */
.votes-page .homepage-card::before,
.votes-page .homepage-card::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* If your RuLocus block uses a more specific class, keep it clean too */
.votes-page .votes-site-card,
.votes-page .votes-site-card::before,
.votes-page .votes-site-card::after {
    background: #020617 !important;
    background-image: none !important;
    content: normal;
}
/* === VOTE PAGE: completely remove banner / image background from RuLocus block === */

/* Kill any background/image on the RuLocus card itself */
.votes-site-card {
    background: #020617 !important;       /* or transparent if you prefer */
    background-image: none !important;
    position: relative;
}

/* Kill any decorative pseudo-elements that might be drawing the banner */
.votes-site-card::before,
.votes-site-card::after {
    content: '' !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* If the RuLocus block is ALSO using homepage-card, flatten that combo too */
.homepage-card.votes-site-card {
    background: #020617 !important;
    background-image: none !important;
}

.homepage-card.votes-site-card::before,
.homepage-card.votes-site-card::after {
    content: '' !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
}

/* Layout to make it a short, wide banner with title + button */
.votes-site-card {
    border-radius: 6px;
    padding: 10px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.votes-site-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.votes-site-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e5e7eb;
}

.votes-site-sub {
    font-size: 0.8rem;
    color: #9ca3af;
}

.votes-site-cta {
    white-space: nowrap;
}
/* ============================
   VOTE PAGE – HARD RESET BACKGROUNDS
   ============================ */

/* Kill ANY background image on articles on the vote page
   (this includes the RuLocus block) */
.votes-page article,
.votes-page article::before,
.votes-page article::after {
    background: none !important;
    background-image: none !important;
}

/* RuLocus card – make it a short wide bar with title + button */
.votes-site-card {
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    padding: 10px 16px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    min-height: 0;           /* don’t force tall box */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* Left side: title + tiny description stacked */
.votes-site-header {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.votes-site-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.votes-site-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #e5e7eb;
}

.votes-site-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #9ca3af;
}

.votes-site-desc {
    margin: 0;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Right side: button and small note stacked */
.votes-site-actions {
    flex-shrink: 0;
}

.votes-site-btn {
    white-space: nowrap;
}

.votes-site-note {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: right;
}
/* ============================
   VOTE PAGE – SKINNY RULOCUS BANNER
   ============================ */

/* Kill any old card styling */
.votes-page .votes-site-card {
    background: none !important;
    background-image: none !important;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 16px;
    max-width: 520px;      /* optional: keep it from being too wide */
}

/* Skinny banner at the top: "RuLocus  TOPLIST" */
.votes-page .votes-site-header {
    background: rgba(15, 23, 42, 0.95);
    border-radius: 4px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;         /* don't force height */
    margin-bottom: 6px;
}

.votes-page .votes-site-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.votes-page .votes-site-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e5e7eb;
}

.votes-page .votes-site-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.7);
    color: #9ca3af;
}

/* Hide the long description from inside the banner to keep it skinny */
.votes-page .votes-site-desc {
    display: none;
}

/* Button sits underneath the skinny banner */
.votes-page .votes-site-actions {
    margin-top: 6px;
}

.votes-page .votes-site-btn {
    display: inline-block;
    margin-top: 2px;
}

/* Note text under the button */
.votes-page .votes-site-note {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #9ca3af;
}
/* ============================
   VOTE PAGE – REWARDS PANEL
   ============================ */

.votes-page .votes-rewards-panel {
    margin: 18px 0 24px;
    padding: 12px 14px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.85); /* dark, readable block */
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.votes-page .votes-rewards-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #e5e7eb;
}

.votes-page .votes-rewards-list {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
}

.votes-page .votes-rewards-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.88rem;
    padding: 3px 0;
    border-bottom: 1px dashed rgba(55, 65, 81, 0.6);
}

.votes-page .votes-rewards-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.votes-page .votes-reward-tier-label {
    font-weight: 500;
    color: #e5e7eb;
}

.votes-page .votes-reward-amount {
    white-space: nowrap;
    font-weight: 500;
    color: #34d399; /* soft green for rewards */
    font-size: 0.85rem;
}

.votes-page .votes-rewards-note {
    margin: 4px 0 0;
    font-size: 0.78rem;
    color: #9ca3af;
}
/* ============================
   VOTE STORE (vote_store.php)
   ============================ */

.vote-store-page .vote-store-balance {
    margin: 10px 0 18px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.vote-store-page .vote-store-balance-label {
    font-size: 0.9rem;
    color: #e5e7eb;
}

.vote-store-page .vote-store-balance-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #38bdf8;
}

.vote-store-page .vote-store-empty {
    margin-top: 10px;
    color: #c4c9da;
}

.vote-store-page .vote-store-grid {
    margin-top: 6px;
}

.vote-store-page .vote-store-item-card {
    display: flex;
    flex-direction: column;
}

.vote-store-page .vote-store-price {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e5e7eb;
}

.vote-store-page .vote-store-cost strong {
    color: #facc15;
}

.vote-store-page .vote-store-item-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(30, 64, 175, 0.6);
    display: flex;
    justify-content: flex-end;
}

.vote-store-page .vote-store-buy-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================
   ADMIN VOTE PAGE (adminvote.php)
   ============================ */

.admin-vote-page .admin-section {
    margin-top: 20px;
}

.admin-vote-page .admin-vote-add-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 8px;
}

.admin-vote-page .admin-vote-help {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 8px;
}

.admin-vote-page .admin-vote-empty {
    color: #c4c9da;
}

.admin-vote-page .admin-vote-table-wrapper {
    overflow-x: auto;
}

.admin-vote-page .admin-vote-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-vote-page .admin-vote-table th,
.admin-vote-page .admin-vote-table td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(30, 64, 175, 0.5);
    text-align: left;
}

.admin-vote-page .admin-vote-table th {
    font-weight: 600;
    color: #e5e7eb;
    background: rgba(15, 23, 42, 0.9);
}

.admin-vote-page .admin-vote-item-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.admin-vote-page .admin-vote-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 4px;
}

.admin-vote-page .admin-vote-item-name {
    font-weight: 600;
    color: #e5e7eb;
}

.admin-vote-page .admin-vote-item-desc {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-top: 2px;
}

.admin-vote-page .admin-vote-item-meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
}

.admin-vote-page .admin-vote-status {
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-vote-page .admin-vote-status.active {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.admin-vote-page .admin-vote-status.inactive {
    background: rgba(239, 68, 68, 0.08);
    color: #fca5a5;
}

.admin-vote-page .admin-vote-actions .btn-small {
    padding: 3px 8px;
    font-size: 0.8rem;
}
/* ===== Giveaways on homepage ===== */

.homepage-card-giveaway {
    border-left: 3px solid #f2b94b;
}

.homepage-giveaway-title {
    font-weight: 600;
    margin: 4px 0 2px;
}

.homepage-giveaway-desc {
    font-size: 0.9rem;
    color: #c4c9da;
    margin: 0 0 8px;
}

.homepage-giveaway-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.85rem;
    color: #9fa6c4;
    margin-bottom: 8px;
}

.homepage-giveaway-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.homepage-giveaway-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(5, 10, 25, 0.8);
}

.homepage-giveaway-item-image {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 6px;
}

.homepage-giveaway-item-name {
    font-size: 0.85rem;
}

.homepage-giveaway-item-qty {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-left: 4px;
}

.homepage-giveaway-actions {
    margin-top: 4px;
}

.homepage-giveaway-enter-btn {
    width: 100%;
}

.homepage-giveaway-login-hint {
    font-size: 0.85rem;
    color: #c4c9da;
}

/* ===== Admin giveaways page ===== */

.admin-giveaways-page {
    max-width: 1100px;
    margin: 0 auto;
}

.admin-giveaways-subtitle {
    margin-bottom: 16px;
    color: #c4c9da;
}

.admin-giveaways-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
    gap: 16px;
}

.admin-giveaway-panel {
    background: rgba(5, 10, 25, 0.9);
    border-radius: 6px;
    padding: 12px 16px;
}

.admin-giveaway-panel h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.admin-giveaway-card {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 10px 0;
}

.admin-giveaway-card:last-child {
    border-bottom: none;
}

.admin-giveaway-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.admin-giveaway-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.admin-giveaway-meta {
    font-size: 0.8rem;
    color: #9fa6c4;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-giveaway-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.btn-small {
    padding: 4px 8px;
    font-size: 0.8rem;
}

.admin-giveaway-items {
    margin-top: 8px;
    font-size: 0.85rem;
}

.admin-giveaway-items-empty {
    color: #9fa6c4;
}

.admin-giveaway-items-list {
    list-style: none;
    padding-left: 0;
    margin: 4px 0 8px;
}

.admin-giveaway-items-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.btn-link-danger {
    border: none;
    padding: 0;
    background: none;
    color: #e57373;
    cursor: pointer;
    font-size: 0.8rem;
}

.admin-giveaway-add-item-form label {
    display: block;
    margin-bottom: 4px;
}

.admin-giveaway-add-item-form input[type="number"] {
    width: 100%;
    max-width: 120px;
}

.admin-giveaway-add-item-form {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
}
.homepage-hero-topvoters-card {
    margin-top: 16px;
    padding: 10px 12px;
    background: rgba(6, 10, 26, 0.85);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.homepage-hero-topvoters-list .ladder-xp {
    font-size: 0.85rem;
    opacity: 0.9;
}
.homepage-hero-topdonators-card {
    margin-top: 16px;
    padding: 10px 12px;
    background: rgba(6, 10, 26, 0.85);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.homepage-hero-miniheading {
    margin-top: 4px;
    margin-bottom: 4px;
    font-size: 0.9rem;
    opacity: 0.9;
}
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-discord-link img {
    height: 32px;      /* adjust as you like */
    width: auto;
    display: block;
}
.auth-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* or whatever you’re already using */
    gap: 0.5rem;               /* space between items if you like */
}

.auth-discord-link {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}

.auth-discord-icon {
    height: 24px;   /* tweak size to match the mail icon visually */
    width: auto;
    display: block;
}
/* Small 8 Visions banner inside the black auth bar */
.auth-network-banner{
  display: inline-flex;
  align-items: center;
  line-height: 0;
  margin-right: 10px;
}

.auth-network-banner-img{
  height: 24px;  /* adjust smaller/larger here */
  width: auto;
  display: block;
}

@media (max-width: 520px){
  .auth-network-banner-img{ height: 18px; }
}