/* ===================================================
   Roster Page — Styles
   The Sanctum Roster
=================================================== */

:root {
    --bg-dark: #121212;
    --window-bg: #e8dbc3;
    --border-color: #4a3b2a;
    --gold-accent: #b89548;
    --ink: #2b2018;
    --ink-muted: #665243;
    --tab-bg: #3d2f24;
    --tab-text: #a89582;
    --tab-hover: #4f3d2f;
    --font-title: "Cinzel", serif;
    --font-body: "Lato", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background-color: var(--bg-dark);
    background-image: radial-gradient(circle at center, #1f1f1f 0%, #050505 100%);
    color: var(--tab-text);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ===== NAV BAR ===== */
.nav-bar { display:flex; justify-content:space-between; align-items:center; padding:12px 40px; background:var(--tab-bg); border-bottom:3px solid #2a2118; background-image:linear-gradient(to bottom,rgba(255,255,255,.05),rgba(0,0,0,.2)); flex-wrap:wrap; gap:6px; width:100%; box-sizing:border-box; }
.nav-bar a { color:var(--tab-text); text-decoration:none; font-family:var(--font-title); font-size:.95rem; padding:6px 16px; border-radius:4px; transition:all .2s; }
.nav-bar a:hover { background:#4f3d2f; color:#dccaa5; }
.nav-bar a.active { color:var(--gold-accent); font-weight:700; }
.nav-bar a.nav-title { color:var(--gold-accent); font-size:1.1rem; font-weight:700; letter-spacing:1px; padding:0; background:none; }
.nav-bar a.nav-title:hover { background:none; color:#dccaa5; }
@media(max-width:768px){ .nav-bar{ padding:10px 15px; } .nav-bar a{ font-size:.8rem; padding:4px 10px; } .nav-bar a.nav-title{ font-size:.9rem; } }

/* ===== PAGE CONTENT ===== */
.page-content {
    flex: 1;
    padding: 30px 40px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ===== HEADER ===== */
.roster-header {
    text-align: center;
    margin-bottom: 24px;
}

.roster-title {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--gold-accent);
    margin: 0 0 10px;
    letter-spacing: 2px;
    text-shadow: 0 2px 12px rgba(184, 149, 72, 0.3);
}

.roster-subtitle {
    font-size: 0.95rem;
    color: var(--tab-text);
    opacity: 0.85;
}

/* ===== BOSS BANNER ===== */
.boss-banner {
    background: var(--tab-bg);
    background-image: linear-gradient(to right, rgba(255,255,255,0.03), rgba(184,149,72,0.07), rgba(255,255,255,0.03));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 20px;
    margin-bottom: 24px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--tab-text);
}

.boss-banner strong {
    color: var(--gold-accent);
    font-family: var(--font-title);
}

/* ===== LOADING ===== */
.loading {
    text-align: center;
    padding: 80px 20px;
    color: var(--tab-text);
    font-family: var(--font-title);
    font-size: 1.1rem;
    opacity: 0.7;
}

.loading-spinner {
    display: block;
    width: 40px;
    height: 40px;
    border: 3px solid rgba(184, 149, 72, 0.2);
    border-top-color: var(--gold-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 20px auto 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== ROSTER GRID ===== */
.roster-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* ===== CARD ===== */
.roster-card {
    background: var(--window-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 30px 24px 24px;
    width: 440px;
    text-align: center;
    text-decoration: none;
    color: var(--ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.roster-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
    border-color: var(--gold-accent);
    color: var(--ink);
}

.roster-card.rank-1 {
    border-color: var(--gold-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 16px rgba(184,149,72,0.2);
}

.roster-card.rank-1:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 24px rgba(184,149,72,0.4);
}

.rank-badge {
    position: absolute;
    top: 12px;
    left: 15px;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--ink-muted);
    font-weight: 700;
}

.rank-1 .rank-badge { color: var(--gold-accent); }

/* Avatar */
.avatar-wrap {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--border-color);
    margin-top: 4px;
    flex-shrink: 0;
}

.rank-1 .avatar-wrap { border-color: var(--gold-accent); }

.avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-fallback {
    width: 100%;
    height: 100%;
    background: var(--tab-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--gold-accent);
}

/* Username */
.card-username {
    font-family: var(--font-title);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
}

/* Class title */
.card-class {
    font-size: 1.1rem;
    font-style: italic;
    color: var(--ink-muted);
    font-weight: bold;
}

/* Level + CP row */
.card-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.lvl-pill {
    background: var(--tab-bg);
    color: var(--tab-text);
    font-family: var(--font-title);
    font-size: 0.9rem;
    padding: 4px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.cp-value {
    font-family: var(--font-title);
    font-size: 1.3rem;
    color: var(--gold-accent);
    font-weight: 700;
}

/* Top item */
.top-item {
    font-size: 1rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
    margin-top: 5px;
}

.item-none {
    color: var(--ink-muted);
    font-style: italic;
}

/* Inventory count + view hint */
.card-footer {
    font-size: 0.9rem;
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.view-hint { color: var(--gold-accent); }

.limbo-card {
    border-style: dashed !important;
    filter: grayscale(0.5);
}

.limbo-card::after {
    content: "DATA UNSTABLE";
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-size: 0.6rem;
    color: #ff0000;
    letter-spacing: 1px;
    font-family: var(--font-title);
    opacity: 0.6;
    animation: blink 1s infinite;
}

@keyframes blink { 50% { opacity: 0.1; } }

/* ===== MOBILE ===== */
@media (max-width: 600px) {
    .page-content { padding: 20px 16px; }
    .roster-title { font-size: 1.8rem; }
    .roster-card { width: 160px; padding: 14px 12px 12px; }
    .avatar-wrap { width: 56px; height: 56px; }
}