/* =========================================================
   Scourge Game Servers — Frontend Design System
   ========================================================= */

:root {
    --sg-bg:        #0d0d0f;
    --sg-bg2:       #111114;
    --sg-bg3:       #16161a;
    --sg-border:    rgba(255,255,255,0.07);
    --sg-red:       #cc2a2a;
    --sg-red-glow:  rgba(204,42,42,0.25);
    --sg-red-dim:   #a52020;
    --sg-text:      #e8e8ec;
    --sg-muted:     #888898;
    --sg-card-bg:   #111114;
    --sg-green:     #2bbf6e;
    --sg-orange:    #ed9b21;
    --sg-blue:      #5865f2;
    --sg-radius:    12px;
}

/* ---- Wrapper ---- */
.sgserver-wrap {
    background: var(--sg-bg);
    color: var(--sg-text);
    min-height: 60vh;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

/* ---- Breadcrumb ---- */
.sgserver-breadcrumb {
    max-width: 1160px;
    margin: 0 auto;
    padding: 16px 32px;
    font-size: 13px;
    color: var(--sg-muted);
}
.sgserver-breadcrumb a { color: var(--sg-muted); text-decoration: none; }
.sgserver-breadcrumb a:hover { color: var(--sg-text); }
.sgserver-breadcrumb .sep { margin: 0 6px; opacity: .5; }

/* ---- Hero ---- */
.sgserver-hero {
    max-width: 1160px;
    margin: 0 auto;
    padding: 32px 32px 24px;
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.sgserver-hero__thumb { flex-shrink: 0; }
.sgserver-hero__thumb img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: var(--sg-radius);
    border: 1px solid var(--sg-border);
}
.sgserver-hero__info { flex: 1; min-width: 0; }
.sgserver-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sgserver-hero__title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.1;
}
.sgserver-hero__excerpt { color: var(--sg-muted); margin: 0; font-size: 15px; }

/* Hero background overlay */
.sgserver-hero.has-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.sgserver-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.sgserver-hero.has-bg .sgserver-hero__thumb,
.sgserver-hero.has-bg .sgserver-hero__info,
.sgserver-hero.has-bg .player-gauge--hero {
    position: relative;
    z-index: 1;
}

/* Focal point picker */
.sgserver-focal-wrap {
    position: relative;
    display: block;
    cursor: crosshair;
    user-select: none;
    border-radius: 6px;
    overflow: hidden;
    line-height: 0;
}
.sgserver-focal-img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.sgserver-focal-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(204,42,42,0.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform .1s;
}
.sgserver-focal-wrap:active .sgserver-focal-dot { transform: translate(-50%,-50%) scale(1.2); }
.sgserver-focal-hint {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.4;
    opacity: 0;
    transition: opacity .2s;
}
.sgserver-focal-wrap:hover .sgserver-focal-hint { opacity: 1; }

/* Collapsible sections */
.section-toggle {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--sg-muted);
    line-height: 1;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.section-toggle:hover { background: var(--sg-bg3); color: var(--sg-text); }
.toggle-icon {
    display: inline-block;
    font-size: 12px;
    transition: transform .2s;
}
.collapsible-section.is-collapsed .section-body { display: none; }
.collapsible-section.is-collapsed .toggle-icon  { transform: rotate(-90deg); }

/* ---- Badges ---- */
.sgserver-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.sgserver-badge--status.status-online  { border-color: rgba(43,191,110,.35); color: var(--sg-green); }
.sgserver-badge--status.status-offline { border-color: rgba(204,42,42,.35);  color: var(--sg-red); }
.sgserver-badge--status.status-maintenance { border-color: rgba(237,155,33,.35); color: var(--sg-orange); }
.sgserver-badge--game { letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---- Status dots ---- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sg-muted);
    flex-shrink: 0;
}
.status-online  .status-dot,
.status-dot.status-online  { background: var(--sg-green); box-shadow: 0 0 6px var(--sg-green); animation: sg-pulse 2s infinite; }
.status-offline .status-dot,
.status-dot.status-offline { background: var(--sg-red); }
.status-maintenance .status-dot,
.status-dot.status-maintenance { background: var(--sg-orange); }

@keyframes sg-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ---- Facts Strip ---- */
.facts-strip {
    border-top: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
    background: var(--sg-bg2);
    padding: 0 32px;
}
.facts-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.facts-inner--4 {
    grid-template-columns: repeat(4, 1fr);
}
.fact {
    padding: 18px 20px;
    border-right: 1px solid var(--sg-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fact:last-child { border-right: none; }
.fact-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sg-muted);
}
.fact-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.fact-value em { color: var(--sg-red); font-style: normal; }
.status-dot--inline { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ---- Main Grid ---- */
.server-main {
    padding: 56px 32px 80px;
}
.server-main-inner {
    max-width: 1160px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}
.server-content { display: flex; flex-direction: column; gap: 28px; }

/* Kill trailing margins inside collapsible sections so gap handles all spacing */
.section-body > *:last-child,
.server-about-body > *:last-child { margin-bottom: 0; }

/* ---- Block Head ---- */
.block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}
.block-head h2 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: .02em;
}
.block-head-count {
    font-size: 12px;
    color: var(--sg-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- About ---- */
.server-about-body { color: var(--sg-text); line-height: 1.7; }
.server-about-body p { margin-bottom: 14px; }
.server-about-body p:last-child { margin-bottom: 0; }

.server-rules {
    margin-top: 20px;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    overflow: hidden;
}
.server-rules summary {
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    color: var(--sg-muted);
    user-select: none;
}
.server-rules summary:hover { color: var(--sg-text); }
.server-rules__body {
    padding: 0 18px 16px;
    color: var(--sg-muted);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-wrap;
}

.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.about-tag {
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 100px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.about-tag:hover { color: var(--sg-text); border-color: rgba(255,255,255,.2); }

/* ---- Announcements ---- */
.announce-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    overflow: hidden;
    background: var(--sg-bg2);
}
.announce-item {
    padding: 22px 24px;
    border-bottom: 1px solid var(--sg-border);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 20px;
    transition: background .15s;
}
.announce-item:last-child { border-bottom: none; }
.announce-item:hover { background: var(--sg-bg3); }
.announce-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--sg-muted);
    line-height: 1.5;
    padding-top: 3px;
}
.announce-date strong { display: block; font-size: 18px; color: var(--sg-text); font-weight: 600; }
.announce-body { display: flex; flex-direction: column; gap: 6px; }
.announce-meta { margin-bottom: 2px; }
.announce-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 100px;
    border: 1px solid;
}
.ann-type--update      { background: rgba(88,101,242,.12); border-color: rgba(88,101,242,.32); color: #8b9bff; }
.ann-type--maintenance { background: rgba(237,155,33,.12); border-color: rgba(237,155,33,.32); color: var(--sg-orange); }
.ann-type--event       { background: rgba(43,191,110,.12); border-color: rgba(43,191,110,.32); color: var(--sg-green); }
.announce-title { font-family: 'Rajdhani', sans-serif; font-size: 17px; font-weight: 700; color: #fff; }
.announce-text { color: var(--sg-muted); font-size: 14px; line-height: 1.6; }
.announce-text p { margin: 0; }

/* ---- Mods ---- */
.mods-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    overflow: hidden;
    background: var(--sg-bg2);
}
.mod-item {
    padding: 14px 18px;
    border-bottom: 1px solid var(--sg-border);
}
.mod-item:last-child { border-bottom: none; }
.mod-item__name { font-weight: 600; color: var(--sg-text); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.mod-item__version { font-size: 11px; color: var(--sg-muted); font-family: 'JetBrains Mono', monospace; }
.mod-item__desc { font-size: 13px; color: var(--sg-muted); margin-top: 3px; }

/* ---- Sidebar ---- */
.server-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }

/* ---- Connect Card ---- */
.connect-card {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    padding: 24px;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
.connect-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 0% 0%, rgba(88,101,242,.1), transparent 55%);
    pointer-events: none;
}
.connect-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(88,101,242,.12);
    border: 1px solid rgba(88,101,242,.28);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b9bff;
    position: relative;
}
.connect-card-icon svg { width: 22px; height: 22px; }
.connect-card-body { position: relative; display: flex; flex-direction: column; gap: 12px; }
.connect-card-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.connect-ip-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    padding: 8px 12px;
}
.connect-ip {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--sg-text);
    flex: 1;
    background: none;
    border: none;
    user-select: all;
}
.sgserver-copy-btn {
    background: none;
    border: none;
    color: var(--sg-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color .15s;
}
.sgserver-copy-btn:hover { color: var(--sg-text); }
.sgserver-copy-btn.copied { color: var(--sg-green); }
.connect-card-desc { color: var(--sg-muted); font-size: 13px; margin: 0 0 10px; line-height: 1.5; }
.connect-empty { color: var(--sg-muted); font-size: 13px; margin: 0; }

/* ---- Player Gauge ---- */
.player-gauge {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    padding: 18px 20px;
}
.player-gauge-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sg-muted);
    margin-bottom: 10px;
    font-weight: 600;
}
.player-gauge-bar {
    height: 6px;
    background: var(--sg-bg3);
    border-radius: 100px;
    overflow: hidden;
}
.player-gauge-fill {
    height: 100%;
    background: var(--sg-green);
    border-radius: 100px;
    transition: width .6s ease;
}
.player-gauge-foot {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--sg-muted);
    margin-top: 8px;
}
.player-gauge-foot em { color: var(--sg-text); font-style: normal; font-weight: 600; }

/* ---- Sidebar info rows ---- */
.sidebar-info-row {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.sidebar-info-label { color: var(--sg-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .1em; }
.sidebar-info-value { color: var(--sg-text); font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; }

/* ---- Buttons ---- */
.sgserver-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sg-red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
    line-height: 1;
}
.sgserver-btn:hover { background: var(--sg-red-dim); color: #fff; }
.sgserver-btn--sm { padding: 6px 14px; font-size: 12px; }
.sgserver-btn--outline {
    background: transparent;
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
}
.sgserver-btn--outline:hover { border-color: rgba(255,255,255,.2); color: var(--sg-text); background: var(--sg-bg3); }
.sgserver-btn--discord {
    background: rgba(88,101,242,.15);
    border: 1px solid rgba(88,101,242,.3);
    color: #8b9bff;
}
.sgserver-btn--discord:hover { background: rgba(88,101,242,.25); color: #a8b5ff; }

/* ---- Empty state ---- */
.sgserver-empty { color: var(--sg-muted); font-size: 14px; padding: 24px; text-align: center; }

/* ---- Archive ---- */
.sgserver-archive { padding: 0 0 80px; }
.sgserver-archive-header {
    background: var(--sg-bg2);
    border-bottom: 1px solid var(--sg-border);
    padding: 48px 32px 36px;
    text-align: center;
}
.sgserver-archive-header h1 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.sgserver-archive-header p { color: var(--sg-muted); margin: 0; }

.sgserver-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 24px 32px;
    border-bottom: 1px solid var(--sg-border);
    background: var(--sg-bg2);
}
.sgserver-filter-tag {
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 100px;
    text-decoration: none;
    transition: color .15s, border-color .15s, background .15s;
}
.sgserver-filter-tag:hover,
.sgserver-filter-tag.active {
    color: #fff;
    border-color: var(--sg-red);
    background: rgba(204,42,42,.12);
}

.sgserver-grid {
    max-width: 1160px;
    margin: 40px auto 0;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ---- Server Card (archive + shortcode) ---- */
.sgserver-card {
    background: var(--sg-card-bg);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .2s, transform .2s;
}
.sgserver-card:hover { border-color: rgba(255,255,255,.15); transform: translateY(-2px); }
.sgserver-card__thumb-link { display: block; overflow: hidden; }
.sgserver-card__thumb-link img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform .3s; }
.sgserver-card:hover .sgserver-card__thumb-link img { transform: scale(1.03); }
.sgserver-card__body { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.sgserver-card__meta-top { display: flex; flex-wrap: wrap; gap: 6px; }
.sgserver-card__title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.sgserver-card__title a { color: inherit; text-decoration: none; }
.sgserver-card__title a:hover { color: var(--sg-red); }
.sgserver-card__excerpt { color: var(--sg-muted); font-size: 13px; line-height: 1.5; margin: 0; flex: 1; }
.sgserver-card__footer { display: flex; align-items: center; gap: 12px; margin-top: auto; flex-wrap: wrap; }
.sgserver-card__stat { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--sg-muted); }
.sgserver-card__stat svg { opacity: .6; }
.sgserver-sep { color: var(--sg-border); }

/* Shortcode card variant */
.sgserver-card--shortcode {
    max-width: 400px;
    flex-direction: row;
}
.sgserver-card--shortcode .sgserver-card__thumb { width: 100px; flex-shrink: 0; }
.sgserver-card--shortcode .sgserver-card__thumb img { width: 100px; height: 100%; object-fit: cover; }
.sgserver-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--sg-muted); }
.sgserver-card__header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

/* Pagination — scoped inside .sgserver-wrap to avoid hitting theme header nav */
.sgserver-wrap .nav-links { display: flex; gap: 6px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.sgserver-wrap .nav-links a,
.sgserver-wrap .nav-links span {
    padding: 7px 13px;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    color: var(--sg-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.sgserver-wrap .nav-links a:hover { color: var(--sg-text); border-color: rgba(255,255,255,.2); }
.sgserver-wrap .nav-links .current { background: var(--sg-red); border-color: var(--sg-red); color: #fff; }

/* ---- My Account Server Panel ---- */
.scourge-myserver-block {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
}
.scourge-myserver-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--sg-border);
    gap: 12px;
    flex-wrap: wrap;
}
.scourge-myserver-header h3 { margin: 0; font-size: 18px; font-family: 'Rajdhani', sans-serif; font-weight: 700; color: #fff; }
.scourge-myserver-header-meta { display: flex; align-items: center; gap: 10px; }

.scourge-myserver-tabs {
    display: flex;
    border-bottom: 1px solid var(--sg-border);
    background: var(--sg-bg);
}
.scourge-myserver-tab {
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sg-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s;
}
.scourge-myserver-tab:hover { color: var(--sg-text); }
.scourge-myserver-tab.active { color: #fff; border-bottom-color: var(--sg-red); }

.scourge-myserver-panel { padding: 24px; }

.sgserver-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
.sgserver-field { display: flex; flex-direction: column; gap: 5px; }
.sgserver-field--full { grid-column: 1 / -1; }
.sgserver-field label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--sg-muted); }
.sgserver-field label small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.sgserver-field input,
.sgserver-field select,
.sgserver-field textarea {
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--sg-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s;
    box-sizing: border-box;
    width: 100%;
}
.sgserver-field input:focus,
.sgserver-field select:focus,
.sgserver-field textarea:focus {
    outline: none;
    border-color: rgba(204,42,42,.5);
}
.sgserver-field textarea { resize: vertical; min-height: 90px; }

.sgserver-ann-form-wrap {
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 20px;
}
.sgserver-ann-form-wrap h4 { margin: 0 0 14px; font-family: 'Rajdhani', sans-serif; font-size: 16px; font-weight: 700; color: #fff; }
.sgserver-ann-form { display: flex; flex-direction: column; gap: 10px; }

.sgserver-ann-list-admin { display: flex; flex-direction: column; gap: 0; }
.sgserver-ann-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--sg-border);
    gap: 12px;
    flex-wrap: wrap;
}
.sgserver-ann-row:last-child { border-bottom: none; }
.sgserver-ann-row__left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.sgserver-ann-row__left strong { color: var(--sg-text); }
.sgserver-ann-row__left small { color: var(--sg-muted); }
.sgserver-ann-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 100px;
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    white-space: nowrap;
}
.sgserver-ann-row__actions { display: flex; gap: 12px; font-size: 13px; }
.sgserver-ann-row__actions a { color: var(--sg-muted); text-decoration: none; }
.sgserver-ann-row__actions a:hover { color: var(--sg-text); }
.sgserver-ann-row__actions button { background: none; border: none; cursor: pointer; font-size: 13px; padding: 0; }

.sgserver-ann-pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.sgserver-page-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    color: var(--sg-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s;
}
.sgserver-page-btn:hover { color: var(--sg-text); }
.sgserver-page-btn.active { background: var(--sg-red); border-color: var(--sg-red); color: #fff; }

/* ---- Hero Player Gauge ---- */
.sgserver-hero { flex-wrap: wrap; }
.player-gauge--hero {
    flex-shrink: 0;
    min-width: 180px;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: flex-start;
}
.player-gauge-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sg-muted);
}
.pg-live {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    background: rgba(43,191,110,.15);
    border: 1px solid rgba(43,191,110,.3);
    color: var(--sg-green);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.player-gauge-count {
    font-family: 'Rajdhani', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.player-gauge-count em { font-style: normal; font-size: 20px; color: var(--sg-muted); }
.player-gauge-bar {
    height: 6px;
    background: var(--sg-bg3);
    border-radius: 100px;
    overflow: hidden;
}
.player-gauge-bar span {
    display: block;
    height: 100%;
    background: var(--sg-green);
    border-radius: 100px;
    transition: width .6s ease;
}
.player-gauge-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--sg-muted);
}

/* ---- Side Card (Server Info) ---- */
.side-card {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    padding: 22px;
}
.side-card h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sg-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.accent { color: var(--sg-red); }
.side-info-list { display: flex; flex-direction: column; gap: 10px; }
.side-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    gap: 12px;
}
.side-info-row .lbl { color: var(--sg-muted); flex-shrink: 0; }
.side-info-row .val { color: var(--sg-text); font-weight: 500; text-align: right; }
.side-info-row .val.online {
    color: var(--sg-green);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.side-info-row .val.online::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sg-green);
    box-shadow: 0 0 5px var(--sg-green);
    animation: sg-pulse 2s infinite;
    flex-shrink: 0;
}
.side-cta {
    background: linear-gradient(135deg, rgba(204,42,42,.1) 0%, rgba(204,42,42,.03) 100%);
    border-color: rgba(204,42,42,.25);
}

/* ---- Rules List ---- */
.rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rules-list li {
    color: var(--sg-muted);
    font-size: 13.5px;
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}
.rules-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--sg-red);
    font-weight: 700;
}

/* ---- Player Activity Section ---- */
.activity-grid { display: flex; flex-direction: column; gap: 20px; }
.chart-card {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: var(--sg-radius);
    overflow: hidden;
}
.chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--sg-border);
}
.chart-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chart-meta { font-size: 12px; color: var(--sg-muted); }
.chart-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--sg-border);
}
.chart-stat {
    padding: 14px 20px;
    border-right: 1px solid var(--sg-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.chart-stat:last-child { border-right: none; }
.chart-stat .lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sg-muted);
}
.chart-stat .val {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
.chart-stat .val em { font-style: normal; font-size: 14px; color: var(--sg-muted); }
.chart-wrap--placeholder {
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.chart-placeholder-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--sg-border);
}
.chart-bar {
    flex: 1;
    background: rgba(204,42,42,.18);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: background .2s;
}
.chart-bar:hover { background: rgba(204,42,42,.4); }
.chart-placeholder-msg {
    font-size: 12px;
    color: var(--sg-muted);
    text-align: center;
    font-style: italic;
}

/* ---- Activity: chart + feed ---- */
.activity-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-auto-rows: 520px;
    gap: 16px;
}
.chart-card,
.feed-card {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.chart-head,
.feed-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.chart-title,
.feed-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chart-title .accent,
.feed-title .accent { color: var(--sg-red); }

/* Live dot */
.live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--sg-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.live-dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2bbf6e;
    box-shadow: 0 0 6px #2bbf6e;
    animation: sgLivePulse 2s infinite;
}
.live-dot.offline::before {
    background: #444;
    box-shadow: none;
    animation: none;
}
@keyframes sgLivePulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}

/* Chart stats row */
.chart-stats {
    display: flex;
    gap: 24px;
    margin: 14px 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--sg-border);
    flex-wrap: wrap;
}
.chart-stat .lbl {
    font-size: 10.5px;
    color: var(--sg-muted);
    letter-spacing: .12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}
.chart-stat .val {
    font-family: 'Rajdhani', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.chart-stat .val em {
    color: var(--sg-red);
    font-style: normal;
    font-size: 14px;
    margin-left: 3px;
}

/* SVG chart */
.chart-wrap {
    position: relative;
    flex: 1;
    min-height: 160px;
}
.chart-wrap svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.area-fill   { fill: url(#sgAreaGrad); }
.area-line   { fill: none; stroke: var(--sg-red); stroke-width: 2; stroke-linejoin: round; }
.hover-line  { stroke: rgba(255,255,255,.18); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity .1s; }
.hover-dot   { fill: #fff; stroke: var(--sg-red); stroke-width: 2; opacity: 0; transition: opacity .1s; }
.gridline    { stroke: var(--sg-border); stroke-width: 1; }
.axis-label  { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; fill: var(--sg-muted); }
.chart-tip {
    position: absolute;
    pointer-events: none;
    background: var(--sg-bg);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11.5px;
    color: var(--sg-text);
    transform: translate(-50%, -120%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s;
    z-index: 2;
    font-family: 'JetBrains Mono', monospace;
}
.chart-tip.visible { opacity: 1; }
.chart-tip strong  { color: var(--sg-red); }
.chart-no-data {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    color: var(--sg-muted);
    font-size: 13px;
    font-style: italic;
}

/* Feed */
.feed-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 14px 0 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}
.feed-list::-webkit-scrollbar       { width: 4px; }
.feed-list::-webkit-scrollbar-track { background: transparent; }
.feed-list::-webkit-scrollbar-thumb { background: var(--sg-border); border-radius: 4px; }
.feed-item {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px dashed var(--sg-border);
    font-size: 13px;
}
.feed-item:last-child { border-bottom: none; }
.feed-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.feed-item.join  .feed-icon { background: rgba(43,191,110,.12); border: 1px solid rgba(43,191,110,.3); color: #2bbf6e; }
.feed-item.leave .feed-icon { background: rgba(204,42,42,.12);  border: 1px solid rgba(204,42,42,.3);  color: var(--sg-red); }
.feed-name {
    color: var(--sg-text);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.feed-name.anon { color: var(--sg-muted); font-style: italic; }
.feed-time {
    color: var(--sg-muted);
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}
.feed-empty {
    color: var(--sg-muted);
    font-size: 13px;
    font-style: italic;
    padding: 12px 0;
    list-style: none;
}

/* Online player list */
.player-online-list {
    margin-top: 16px;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 12px;
    padding: 16px 20px;
}
.player-list-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--sg-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.player-names { display: flex; flex-wrap: wrap; gap: 6px; }
.player-name {
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--sg-text);
    font-family: 'JetBrains Mono', monospace;
}

/* ---- Activity range tabs ---- */
.activity-tabs { display: flex; gap: 2px; }
.activity-tab {
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 3px 9px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.5;
    transition: background .15s, color .15s, border-color .15s;
}
.activity-tab:hover { background: rgba(255,255,255,.06); color: var(--sg-text); }
.activity-tab.is-active { background: var(--sg-red); border-color: var(--sg-red); color: #fff; }

/* ---- Unique stat mini-toggle ---- */
.stat-range-toggle { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.stat-range-btn {
    background: transparent;
    border: 1px solid var(--sg-border);
    color: var(--sg-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.4;
    transition: background .15s, color .15s;
}
.stat-range-btn:hover { color: var(--sg-text); }
.stat-range-btn.is-active { background: var(--sg-red); border-color: var(--sg-red); color: #fff; }

/* ---- Most Time Played (feed-card style) ---- */
.playtime-feed { max-height: 320px; overflow-y: auto; }
.playtime-item { display: flex; align-items: center; gap: 10px; }
.playtime-rank {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--sg-muted);
    min-width: 18px;
    text-align: right;
    flex-shrink: 0;
}
.playtime-item:nth-child(1) .playtime-rank { color: #f5c518; }
.playtime-item:nth-child(2) .playtime-rank { color: #b0b0b8; }
.playtime-item:nth-child(3) .playtime-rank { color: #cd7f32; }

/* ---- Currently Online green dot ---- */
.player-name::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sg-green);
    margin-right: 5px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    flex-shrink: 0;
}

/* ---- Activity lower row (Currently Online + Most Time Played) ---- */
.activity-lower {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
.activity-lower > :only-child { grid-column: 1 / -1; }
.player-online-list.feed-card .player-names {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 16px;
}

/* ---- Responsive ---- */
@media ( max-width: 900px ) {
    .server-main-inner { grid-template-columns: 1fr; }
    .server-sidebar { position: static; }
    .sgserver-grid { grid-template-columns: repeat(2, 1fr); }
    .facts-inner { grid-template-columns: repeat(3, 1fr); }
    .fact:nth-child(3) { border-right: none; }
    .player-gauge--hero { width: 100%; }
    .chart-stats { grid-template-columns: repeat(2, 1fr); }
    .chart-stat:nth-child(2) { border-right: none; }
    .activity-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .activity-lower { grid-template-columns: 1fr; }
    .scourge-myserver-tabs { flex-wrap: wrap; }
    .scourge-myserver-tab { flex: 1 1 auto; text-align: center; }
}
@media ( max-width: 600px ) {
    /* Hero */
    .sgserver-hero { flex-direction: column; align-items: flex-start; padding: 20px 16px; gap: 14px; }
    .sgserver-hero__thumbnail { width: 64px; height: 64px; }
    .sgserver-hero__title { font-size: 26px; }
    .sgserver-hero__badges { gap: 6px; }
    /* Facts */
    .facts-strip { padding: 0 16px; }
    .facts-inner { grid-template-columns: repeat(2, 1fr); }
    .fact:nth-child(2n) { border-right: none; }
    .fact:nth-child(3) { border-right: 1px solid var(--sg-border); }
    .fact { padding: 14px 12px; }
    .fact-value { font-size: 18px; }
    /* Layout */
    .sgserver-breadcrumb { padding: 10px 16px; font-size: 12px; }
    .server-main { padding: 24px 16px 48px; }
    .server-content { gap: 20px; }
    /* Blocks */
    .block-head { flex-wrap: wrap; }
    .block-head h2 { font-size: 18px; }
    .announce-item { grid-template-columns: 1fr; gap: 8px; }
    .announce-item__actions { justify-content: flex-start; }
    /* Sidebar */
    .connect-card { grid-template-columns: 1fr; }
    .side-card { padding: 16px; }
    /* Activity */
    .activity-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .chart-stats { grid-template-columns: repeat(2, 1fr); }
    .chart-card, .feed-card { padding: 14px; }
    /* My Account */
    .sgserver-edit-grid { grid-template-columns: 1fr; }
    .sgserver-field--full { grid-column: 1; }
    .scourge-myserver-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .scourge-myserver-header-meta { flex-wrap: wrap; }
    .sgserver-ann-form-wrap { padding: 14px; }
    .sgserver-ann-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .sgserver-ann-row__actions { width: 100%; display: flex; gap: 10px; }
    /* Archive */
    .sgserver-archive-header { padding: 24px 16px 20px; }
    .sgserver-grid { grid-template-columns: 1fr; padding: 0 16px; }
    .sgserver-filter-bar { padding: 0 16px; flex-wrap: wrap; gap: 6px; }
}

/* =========================================================
   Archive card — hero strip
   ========================================================= */

.sgserver-card__hero-strip {
    display: block;
    position: relative;
    width: 100%;
    height: 130px;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    text-decoration: none;
}
.sgserver-card__hero-overlay {
    position: absolute;
    inset: 0;
}

/* =========================================================
   Reviews
   ========================================================= */

.review-avg-badge {
    color: #f5a623;
    font-size: 14px;
}

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

.review-card {
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    padding: 14px 16px;
}
.review-card--mine {
    border-color: rgba(204,42,42,0.35);
}

.review-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.review-card__avatar {
    border-radius: 50%;
    flex-shrink: 0;
}
.review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.review-card__username {
    font-size: 13px;
    font-weight: 600;
    color: var(--sg-text);
}
.review-card__date {
    font-size: 11px;
    color: var(--sg-muted);
}
.review-card__stars { display: flex; gap: 2px; }
.review-card__stars .star { color: var(--sg-muted); font-size: 16px; }
.review-card__stars .star--filled { color: #f5a623; }
.review-card__body {
    font-size: 13px;
    color: var(--sg-text);
    margin: 0;
    line-height: 1.6;
}

/* Submit wrap */
.review-submit-wrap {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sg-border);
}
.review-form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.review-discord-avatar { border-radius: 50%; }
.review-discord-name { font-size: 13px; font-weight: 600; color: var(--sg-text); flex: 1; }
.sgserver-discord-logout {
    background: none;
    border: none;
    color: var(--sg-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}
.sgserver-discord-logout:hover { color: var(--sg-text); }

/* Star picker */
.review-star-picker {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}
.star-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--sg-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color .1s, transform .1s;
}
.star-btn:hover,
.star-btn.active { color: #f5a623; transform: scale(1.15); }

/* Review textarea */
.review-body-input {
    width: 100%;
    background: var(--sg-bg3);
    border: 1px solid var(--sg-border);
    border-radius: 4px;
    color: var(--sg-text);
    font-family: inherit;
    font-size: 13px;
    padding: 10px 12px;
    resize: vertical;
    box-sizing: border-box;
}
.review-body-input:focus { border-color: var(--sg-red); outline: none; }

.review-form-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.review-char-count { font-size: 12px; color: var(--sg-muted); }
.review-card__avatar--anon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3a3a44;
    color: #888898;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}
.review-anon-wrap {
    margin-bottom: 10px;
}
.review-anon-label {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.04) !important;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s, background 0.15s;
    margin: 0 !important;
    width: 100%;
    box-sizing: border-box;
}
.review-anon-label:hover {
    border-color: rgba(255,255,255,0.22) !important;
    background: rgba(255,255,255,0.07) !important;
}
.review-anon-label input.review-anon-check {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px;
    accent-color: var(--sg-red);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 !important;
}
.review-anon-label > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.review-anon-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e8e8ec !important;
    line-height: 1.2;
}
.review-anon-desc {
    font-size: 11px !important;
    color: #888898 !important;
    line-height: 1.3;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Login prompt */
.review-login-prompt p { color: var(--sg-muted); margin: 0 0 12px; font-size: 13px; }
.sgserver-btn--discord {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #5865F2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}
.sgserver-btn--discord:hover { background: #4752c4; color: #fff; }

/* =========================================================
   Showcase Slider
   ========================================================= */

.showcase-slider { position: relative; }

.showcase-main {
    position: relative;
    width: 100%;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}
/* Images: natural size, contained, max-height so portrait shots don't take over the page */
.showcase-main > img {
    display: block;
    max-width: 100%;
    max-height: 560px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Videos: 16:9 wrapper fills the container */
.showcase-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}
.showcase-video-wrap iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
}
.showcase-play-overlay {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    background: rgba(0,0,0,0.15);
    transition: background .2s;
    overflow: hidden;
}
.showcase-play-overlay img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.showcase-play-overlay:hover { background: rgba(0,0,0,0.45); }
.showcase-play-btn {
    position: relative; z-index: 1;
    width: 64px; height: 64px;
    background: rgba(13,13,15,0.75);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.showcase-play-overlay:hover .showcase-play-btn {
    background: var(--sg-red, #cc2a2a);
    transform: scale(1.08);
}
.showcase-play-btn svg { width: 28px; height: 28px; margin-left: 4px; }

.showcase-caption {
    font-size: 13px; color: var(--sg-muted);
    text-align: center; min-height: 1.3em;
    margin-bottom: 10px;
}

.showcase-nav {
    display: flex; align-items: center; gap: 8px;
}
.showcase-arrow {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 4px;
    color: var(--sg-text);
    font-size: 20px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    padding: 0;
}
.showcase-arrow:hover:not(:disabled) {
    background: var(--sg-bg3);
    border-color: rgba(255,255,255,0.18);
}
.showcase-arrow:disabled { opacity: 0.28; cursor: default; }

.showcase-thumbs {
    display: flex; gap: 6px;
    flex: 1; overflow-x: auto;
    scrollbar-width: none;
}
.showcase-thumbs::-webkit-scrollbar { display: none; }

.showcase-thumb {
    flex-shrink: 0;
    width: 72px; height: 46px;
    border-radius: 4px; overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .15s;
    background: var(--sg-bg3);
    position: relative;
}
.showcase-thumb.active { border-color: var(--sg-red, #cc2a2a); }
.showcase-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-thumb-video-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35);
    font-size: 16px; color: #fff;
}

/* Showcase admin list (My Account) */
.showcase-admin-list {
    display: flex; flex-direction: column; gap: 8px;
    margin-bottom: 16px;
}
.showcase-admin-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: var(--sg-bg2);
    border: 1px solid var(--sg-border);
    border-radius: 6px;
}
.showcase-admin-thumb {
    width: 80px; height: 52px;
    border-radius: 4px; overflow: hidden; flex-shrink: 0;
    background: var(--sg-bg3);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.showcase-admin-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-admin-info { flex: 1; min-width: 0; }
.showcase-admin-info .type-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--sg-muted);
    margin-bottom: 4px;
}
.showcase-admin-info input[type=text] {
    width: 100%; font-size: 13px;
    background: var(--sg-bg3); border: 1px solid var(--sg-border);
    border-radius: 3px; color: var(--sg-text);
    padding: 4px 8px; box-sizing: border-box;
}
.showcase-admin-actions {
    display: flex; flex-direction: column; gap: 4px; flex-shrink: 0;
}
.showcase-admin-add {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 12px; margin-top: 4px;
    background: var(--sg-bg2); border: 1px dashed var(--sg-border);
    border-radius: 6px; align-items: center;
}
.showcase-admin-add input[type=url] {
    flex: 1; min-width: 200px; font-size: 13px;
    background: var(--sg-bg3); border: 1px solid var(--sg-border);
    border-radius: 3px; color: var(--sg-text);
    padding: 6px 10px; box-sizing: border-box;
}
.showcase-count-badge {
    font-size: 12px; color: var(--sg-muted);
    margin-bottom: 8px;
}


/* ============================================================
   Shop & Player Profile - Public Sub-pages
   ============================================================ */

/* Loading spinner */
.gs-shop-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 20px; color:var(--sg-muted); gap:14px; }
.gs-spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,.1); border-top-color:var(--sg-accent,#e05c5c); border-radius:50%; animation:gs-spin .7s linear infinite; }
@keyframes gs-spin { to { transform:rotate(360deg); } }

/* Generic notice */
.sgserver-notice { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:20px 24px; color:var(--sg-muted); margin:24px auto; max-width:600px; text-align:center; }

/* Buttons */
.gs-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:6px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:opacity .15s, background .15s; }
.gs-btn--primary { background:var(--sg-accent,#e05c5c); color:#fff; }
.gs-btn--primary:hover { opacity:.85; }
.gs-btn--outline { background:transparent; border:1px solid rgba(255,255,255,.2); color:inherit; }
.gs-btn--outline:hover { border-color:rgba(255,255,255,.4); }
.gs-btn--ghost { background:rgba(255,255,255,.06); color:inherit; }
.gs-btn--ghost:hover { background:rgba(255,255,255,.1); }
.gs-btn--disabled, .gs-btn[disabled] { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* Badges */
.gs-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.gs-badge--green { background:rgba(43,191,110,.15); color:#2bbf6e; }
.gs-badge--yellow { background:rgba(255,193,7,.15); color:#ffc107; }
.gs-badge--red { background:rgba(224,92,92,.15); color:#e05c5c; }

/* Link banner */
.gs-shop-banner { width:100%; }
.gs-banner-inner { display:flex; align-items:center; gap:12px; padding:14px 20px; border-radius:8px; margin-bottom:20px; font-size:14px; flex-wrap:wrap; }
.gs-banner--info    { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.gs-banner--warn    { background:rgba(255,193,7,.08); border:1px solid rgba(255,193,7,.25); }
.gs-banner--success { background:rgba(43,191,110,.08); border:1px solid rgba(43,191,110,.25); }
.gs-banner--code    { background:rgba(224,92,92,.08); border:1px solid rgba(224,92,92,.3); flex-direction:column; align-items:flex-start; }
.gs-code-display { display:inline-block; font-family:"JetBrains Mono",monospace; font-size:22px; font-weight:700; letter-spacing:.12em; background:rgba(0,0,0,.3); padding:6px 16px; border-radius:6px; margin-top:6px; }
.gs-code-meta { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; color:var(--sg-muted); }

/* Wallet bar */
.gs-wallet-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:8px; margin-bottom:20px; font-size:14px; }
.gs-wallet-label { color:var(--sg-muted); }
.gs-wallet-amount { font-weight:700; font-size:16px; }

/* Tab bar */
.gs-tab-bar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:4px; }
.gs-tab { background:transparent; border:none; color:var(--sg-muted); font-size:14px; font-weight:600; padding:8px 14px; border-radius:6px 6px 0 0; cursor:pointer; transition:color .15s, background .15s; }
.gs-tab:hover { color:inherit; background:rgba(255,255,255,.05); }
.gs-tab.active { color:var(--sg-accent,#e05c5c); border-bottom:2px solid var(--sg-accent,#e05c5c); }

/* Item grid */
.gs-item-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.gs-item-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s; }
.gs-item-card:hover { border-color:rgba(255,255,255,.18); }
.gs-item-header { display:flex; align-items:baseline; gap:8px; }
.gs-item-name { font-weight:700; font-size:15px; }
.gs-item-qty { font-size:12px; color:var(--sg-muted); background:rgba(255,255,255,.06); padding:1px 6px; border-radius:4px; }
.gs-item-desc { font-size:13px; color:var(--sg-muted); margin:0; }
.gs-item-type { font-size:11px; color:var(--sg-muted); background:rgba(0,0,0,.25); padding:2px 6px; border-radius:4px; font-family:"JetBrains Mono",monospace; }
.gs-item-footer { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
.gs-item-price { font-weight:700; font-size:15px; flex:1; }
.gs-item-stock { font-size:12px; color:var(--sg-muted); }

/* Bundle list */
.gs-bundle-list { display:flex; flex-direction:column; gap:16px; }
.gs-bundle-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.gs-bundle-header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.gs-bundle-name { font-weight:700; font-size:16px; }
.gs-bundle-items { margin:0; padding-left:18px; color:var(--sg-muted); font-size:13px; }
.gs-bundle-items li { margin-bottom:2px; }

/* Orders table */
.gs-orders-table { width:100%; border-collapse:collapse; font-size:14px; }
.gs-orders-table th { text-align:left; padding:8px 12px; color:var(--sg-muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid rgba(255,255,255,.08); }
.gs-orders-table td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.05); }
.gs-orders-table tr:last-child td { border-bottom:none; }

/* Toast */
.gs-toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; border-radius:8px; font-size:14px; font-weight:600; z-index:9999; opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; pointer-events:none; max-width:320px; }
.gs-toast--show { opacity:1; transform:translateY(0); }
.gs-toast--success { background:#1a3a2a; color:#2bbf6e; border:1px solid rgba(43,191,110,.3); }
.gs-toast--error   { background:#3a1a1a; color:#e05c5c; border:1px solid rgba(224,92,92,.3); }
.gs-toast--info    { background:#1e1e2e; color:#a0a0c0; border:1px solid rgba(160,160,192,.2); }

/* Empty state */
.gs-empty { color:var(--sg-muted); font-size:14px; padding:32px 0; text-align:center; }

/* Player profile layout */
.gs-player-layout { display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
@media (max-width:900px) { .gs-player-layout { grid-template-columns:1fr; } }

.gs-player-hero-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:20px; margin-bottom:20px; }
.gs-player-name-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gs-player-name { font-size:24px; font-weight:800; font-family:"Rajdhani",sans-serif; }
.hero-subtitle { font-size:14px; color:var(--sg-muted); margin:4px 0 0; }

.gs-profile-section { margin-bottom:24px; }
.gs-profile-section h3 { font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--sg-muted); margin:0 0 12px; }

.gs-stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.gs-stat-box { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:4px; }
.gs-stat-val { font-size:18px; font-weight:700; word-break:break-word; overflow-wrap:break-word; }
.gs-stat-label { font-size:11px; color:var(--sg-muted); text-transform:uppercase; letter-spacing:.05em; }
.gs-stat-sublabel { font-size:10px; color:var(--sg-muted,#888); opacity:.65; margin-top:1px; }

/* Inventory */
.gs-inv-list { display:flex; flex-wrap:wrap; gap:6px; }
.gs-inv-item { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:5px; padding:3px 10px; font-size:12px; font-family:"JetBrains Mono",monospace; }
.gs-inv-item em { color:var(--sg-muted); font-style:normal; }

/* Sidebar cards */
.gs-side-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:16px; margin-bottom:16px; }
.gs-side-card h4 { margin:0 0 12px; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--sg-muted); }
.gs-wallet-stat { font-size:20px; font-weight:700; margin-bottom:6px; }
.gs-wallet-sub { font-size:12px; color:var(--sg-muted); }

/* Mini order list */
.gs-order-mini-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.gs-order-mini-list li { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }

/* Shop teaser block */
.shop-teaser-block { background:var(--sg-card,#1a1a2e); border:1px solid var(--sg-border,rgba(255,255,255,.1)); border-radius:8px; padding:20px; margin-bottom:24px; }
.shop-teaser-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.shop-teaser-currency { font-size:24px; line-height:1; }
.shop-teaser-title { margin:0; font-size:18px; font-weight:600; flex:1; }
.shop-teaser-browse { margin-left:auto; }
.shop-teaser-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
.shop-teaser-item { background:var(--sg-card-inner,rgba(255,255,255,.05)); border:1px solid var(--sg-border,rgba(255,255,255,.08)); border-radius:6px; padding:10px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.shop-teaser-item--skeleton { min-height:90px; animation:pulse 1.4s ease-in-out infinite; }
.shop-teaser-item-icon { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
.shop-teaser-icon-placeholder { width:40px; height:40px; background:var(--sg-border,rgba(255,255,255,.1)); border-radius:4px; display:inline-block; }
.shop-teaser-item-name { font-size:11px; color:var(--sg-text,#ccc); line-height:1.3; }
.shop-teaser-item-price { font-size:12px; font-weight:600; color:var(--sg-accent,#f59e0b); }
.shop-teaser-footer { margin-top:14px; padding-top:12px; border-top:1px solid var(--sg-border,rgba(255,255,255,.08)); display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--sg-muted,#888); }
.shop-teaser-balance-link { color:var(--sg-accent,#f59e0b); text-decoration:none; font-weight:500; }

/* ---- Player profile hero ---- */
.server-hero {
    position: relative;
    min-height: 220px;
    background: var(--sg-bg-secondary, #1a1a2e);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
.server-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
}
.server-hero .hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 24px 28px;
    width: 100%;
    flex-wrap: wrap;
}
.server-hero .hero-icon img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(255,255,255,.15); }
.server-hero .hero-text { flex: 1; min-width: 0; }
.server-hero .hero-text h1 { margin: 0 0 2px; font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; }
.server-hero .hero-subtitle { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); }

/* ---- Player profile nav breadcrumb ---- */
.player-profile-nav {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sg-muted, #888);
    background: var(--sg-bg-secondary, rgba(0,0,0,.35));
    border-bottom: 1px solid var(--sg-border, rgba(255,255,255,.08));
    backdrop-filter: blur(4px);
}
.player-profile-nav__link {
    color: var(--sg-muted, #9ca3af);
    text-decoration: none;
    transition: color .15s;
}
.player-profile-nav__link:hover { color: var(--sg-text, #e5e7eb); text-decoration: underline; }
.player-profile-nav__sep { color: rgba(255,255,255,.2); }
.player-profile-nav__current { color: var(--sg-text, #e5e7eb); font-weight: 600; }

/* ---- Player name links (currently online + activity feed) ---- */
.player-name-link { color: var(--sg-text, #e0e0e0); text-decoration: none; transition: color .15s; }
.player-name-link:hover { color: var(--sg-accent, #f59e0b); text-decoration: underline; }

/* ---- Player hero card (profile page hero overlay) ---- */
.player-hero-card {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(8,8,14,.72);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    padding: 16px 22px;
    min-width: 200px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.player-hero-card__name { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: .2px; }
.player-hero-card__meta { font-size: 13px; color: var(--sg-muted, #aaa); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Faction badges ---- */
.gs-faction-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.gs-faction-badge--game { background: rgba(80,150,255,.18); color: #7ab4ff; border: 1px solid rgba(80,150,255,.3); }
.gs-faction-badge--custom { background: rgba(245,158,11,.15); color: var(--sg-accent, #f59e0b); border: 1px solid rgba(245,158,11,.3); }

/* ---- Player profile description ---- */
.gs-player-description { font-size: 14px; color: var(--sg-muted, #aaa); line-height: 1.6; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); white-space: pre-wrap; }

/* ---- Shop teaser theme fix (D4) ---- */
.shop-teaser-block {
    background: var(--sg-bg-secondary, var(--sg-card, #1e2027));
    border: 1px solid var(--sg-border, rgba(255,255,255,.1));
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.shop-teaser-browse.sgserver-btn--primary,
.shop-teaser-browse { }

/* ---- World card ---- */
.world-card { border-left: 3px solid var(--sg-accent, #f59e0b); padding-left: 14px; }

/* ---- Leaderboard section ---- */
.leaderboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}
.leaderboard-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 16px;
}
.leaderboard-card__title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sg-muted, #888);
    margin-bottom: 12px;
}
.leaderboard-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.leaderboard-rank {
    width: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--sg-muted, #888);
    flex-shrink: 0;
}
.leaderboard-row:first-child .leaderboard-rank { color: #f59e0b; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color: #94a3b8; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #a16207; }
.leaderboard-name { flex: 1; color: var(--sg-text, #e0e0e0); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.leaderboard-name:hover { color: var(--sg-accent, #f59e0b); }
.leaderboard-stat { font-size: 12px; color: var(--sg-muted, #888); flex-shrink: 0; }

/* ---- All Players page ---- */
.gs-players-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.gs-players-search { flex: 1; min-width: 200px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 8px 12px; color: var(--sg-text, #e0e0e0); font-size: 14px; outline: none; }
.gs-players-search:focus { border-color: var(--sg-accent, #f59e0b); }
.gs-players-count { font-size: 13px; color: var(--sg-muted, #888); white-space: nowrap; }
.gs-players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gs-player-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s, background .15s;
}
.gs-player-card:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.07); }
.gs-player-card__header { display: flex; align-items: center; gap: 8px; }
.gs-player-card__status { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
.gs-player-card__name { font-size: 14px; font-weight: 600; color: var(--sg-text, #e0e0e0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-player-card__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.gs-player-card__profession { font-size: 11px; color: var(--sg-muted, #aaa); }
.gs-player-card__stats { display: flex; gap: 10px; font-size: 12px; color: var(--sg-muted, #aaa); margin-top: 2px; }
.gs-player-card__stats span { display: flex; align-items: center; gap: 3px; }
.gs-players-empty { color: var(--sg-muted, #888); font-size: 14px; padding: 20px 0; }
.player-profile-nav__arrow { margin-right: 2px; }

/* =========================================================
   Private section banner + Inventory Viewer (paper-doll + bags)
   Reused inside #gs-private-section on the public player page.
   ========================================================= */

.gs-private-section {
    border: 1px solid rgba(255, 215, 100, 0.18);
    border-radius: var(--sg-radius, 12px);
    background: rgba(255, 215, 100, 0.025);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gs-private-banner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #d4b86a;
    padding: 4px 8px;
    background: rgba(255, 215, 100, 0.06);
    border-left: 3px solid #b08c2c;
    border-radius: 3px;
}
.gs-private-banner__icon { font-size: 14px; }

#gs-inventory-card .gs-inv-root { margin-top: 4px; }

.gs-inv-root {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 12px;
    color: #d8d2c8;
}
@media (max-width: 720px) {
    .gs-inv-root { grid-template-columns: 1fr; }
}

.gs-inv-equip, .gs-inv-bags {
    background: #1a1815;
    border: 1px solid #3a3631;
    border-radius: 4px;
    padding: 10px;
    min-width: 0;
}
.gs-inv-equip-body {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px;
}
.gs-inv-paperdoll { display: flex; justify-content: center; }
.gs-inv-worn-regions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gs-inv-region { display: flex; flex-direction: column; gap: 3px; }
.gs-inv-region-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6e6557;
}
.gs-inv-region-cells {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.gs-inv-section { margin-top: 10px; }
.gs-inv-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #c7bda9;
    background: #25221e;
    padding: 4px 8px;
    border-left: 3px solid #6b5e3d;
    margin-bottom: 6px;
}
.gs-inv-bag-chain {
    font-weight: 400;
    font-size: 10px;
    color: #8a7f6e;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.gs-inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 48px));
    gap: 4px;
}
.gs-inv-grid--hands { grid-template-columns: repeat(2, 1fr); }

.gs-inv-cell {
    position: relative;
    width: 48px;
    height: 48px;
    background: #2a2723;
    border: 1px solid #3a3631;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px #14120f;
    overflow: visible;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.gs-inv-cell:hover { border-color: #6b5e3d; }
.gs-inv-cell--selected { border-color: #c7a84a; box-shadow: inset 0 0 0 1px #14120f, 0 0 0 1px #c7a84a; }
.gs-inv-cell img {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    object-fit: contain;
    display: block;
}
.gs-inv-cell--empty {
    background: repeating-linear-gradient(45deg, #1a1815, #1a1815 4px, #14120f 4px, #14120f 8px);
    opacity: 0.4;
    cursor: default;
    overflow: hidden;
}
.gs-inv-cond {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    opacity: 0.95;
}

/* Hover tooltip */
.gs-inv-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1a1815;
    border: 1px solid #6b5e3d;
    border-radius: 4px;
    padding: 5px 8px;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.5;
    color: #d8d2c8;
    pointer-events: none;
    z-index: 200;
    min-width: 100px;
}
.gs-inv-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #6b5e3d;
}
.gs-inv-tooltip-name { font-weight: 700; color: #f5edd9; }
.gs-inv-tooltip-weight { color: #8a7f6e; }
.gs-inv-cell:hover .gs-inv-tooltip { display: block; }

/* Click popover (body-appended floating panel) */
.gs-inv-popover {
    position: absolute;
    z-index: 9999;
    background: #25221e;
    border: 1px solid #6b5e3d;
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    color: #d8d2c8;
    min-width: 180px;
    max-width: 260px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.gs-inv-pop-close {
    position: absolute;
    top: 6px; right: 8px;
    background: none;
    border: none;
    color: #8a7f6e;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    line-height: 1;
}
.gs-inv-pop-close:hover { color: #d8d2c8; }
.gs-inv-pop-name { font-weight: 700; color: #f5edd9; font-size: 13px; margin-bottom: 2px; }
.gs-inv-pop-type { font-family: monospace; font-size: 10px; color: #8a7f6e; margin-bottom: 6px; }
.gs-inv-pop-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #3a3631;
    color: #c7bda9;
    border-radius: 3px;
    padding: 2px 6px;
    margin-bottom: 8px;
}
.gs-inv-pop-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    border-top: 1px solid #2e2b27;
    font-size: 11px;
}
.gs-inv-pop-row span:first-child { color: #8a7f6e; }

.gs-inv-hand-cell, .gs-inv-hotbar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
}
.gs-inv-hand-label {
    font-size: 10px;
    color: #8a7f6e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.gs-inv-hotbar-num {
    position: absolute;
    top: -2px;
    left: -2px;
    background: #6b5e3d;
    color: #f5edd9;
    font-size: 9px;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 0 0 1px #14120f;
}
.gs-inv-empty-note {
    font-size: 11px;
    color: #6e6557;
    font-style: italic;
    padding: 6px;
}