:root {
  --gold: #FACC15;
  --gold-dim: #b8960f;
  --gold-glow: rgba(250,204,21,0.18);
  --dark: #0a0a0f;
  --dark2: #111118;
  --dark3: #181820;
  --dark4: #20202c;
  --border: rgba(250,204,21,0.15);
  --text: #e8e0cc;
  --text-dim: #7a7060;
  --rare: #3B82F6;
  --epic: #8B5CF6;
  --mythic: #EC4899;
  --uncommon: #22C55E;
  --danger: #ef4444;
}

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

body {
  background: var(--dark);
  color: var(--text);
  font-family: 'Crimson Pro', serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(250,204,21,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 30% 60% at 0% 50%, rgba(59,130,246,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 30% 60% at 100% 50%, rgba(139,92,246,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── HEADER ── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: rgba(10,10,15,0.9);
  backdrop-filter: blur(12px);
  flex-wrap: wrap;
}

.logo { display: flex; flex-direction: column; gap: 0.1rem; flex-shrink: 0; }
.logo-title {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(250,204,21,0.5);
  line-height: 1;
}
.logo-sub { font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.35em; color: var(--text-dim); }
.logo-divider { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin-top: 0.2rem; }

.nav { display: flex; gap: 0; margin-left: 0.5rem; }
.nav-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.nav-btn:hover { color: var(--text); }
.nav-btn.active { color: var(--gold); border-bottom-color: var(--gold); }

.header-stats { display: flex; gap: 1.5rem; align-items: center; margin-left: auto; }
.stat { text-align: right; }
.stat-value { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; color: var(--gold); }
.stat-label { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; }
.stat-divider { width: 1px; height: 2rem; background: var(--border); }

/* ── PAGES ── */
#marketPage, #pricesPage, #alertsPage, #islandPage, #playersPage { position: relative; z-index: 1; }
#pricesPage, #alertsPage, #islandPage, #playersPage { display: none; }
#pricesPage.visible, #alertsPage.visible, #islandPage.visible, #playersPage.visible { display: block; }
#marketPage.hidden { display: none; }

.page-inner { max-width: 1100px; margin: 0 auto; padding: 2rem 2rem 4rem; }
.page-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.page-title { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--gold); letter-spacing: 0.1em; }

/* ── MARKET ── */
main { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 2rem 2rem 4rem; }

.cats-bar {
  display: flex; gap: 1rem; margin-bottom: 1.5rem;
  overflow-x: auto; padding-bottom: 0.5rem;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}

.cat-pill {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  background: var(--dark3); border: 1px solid var(--border);
  padding: 0.6rem 1.2rem; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.cat-pill:hover, .cat-pill.active { border-color: var(--gold-dim); background: var(--gold-glow); }
.cat-pill-name { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
.cat-pill.active .cat-pill-name { color: var(--gold); }
.cat-pill-count { font-size: 0.85rem; font-weight: 600; color: var(--gold); }
.cat-pill-avg { font-size: 0.65rem; color: var(--text-dim); font-style: italic; }

.controls { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
.search-wrap { flex: 1; min-width: 240px; position: relative; }
.search-wrap::before { content: '⚔'; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gold-dim); font-size: 0.85rem; pointer-events: none; }
input[type="search"] {
  width: 100%; background: var(--dark3); border: 1px solid var(--border);
  color: var(--text); font-family: 'Crimson Pro', serif; font-size: 1rem;
  padding: 0.65rem 1rem 0.65rem 2.5rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="search"]::placeholder { color: var(--text-dim); }
input[type="search"]:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 2px var(--gold-glow); }

.sort-select {
  background: var(--dark3); border: 1px solid var(--border);
  color: var(--text); font-family: 'Crimson Pro', serif; font-size: 0.9rem;
  padding: 0.65rem 1rem; outline: none; cursor: pointer;
}

.total-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.total-count { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.15em; color: var(--text-dim); text-transform: uppercase; }
.total-count span { color: var(--gold); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}

.card {
  background: var(--dark2); padding: 1.5rem; cursor: pointer;
  transition: background 0.2s; position: relative; overflow: hidden;
  animation: fadeIn 0.4s ease both;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0; transition: opacity 0.2s;
}
.card:hover { background: var(--dark3); }
.card:hover::before { opacity: 1; }

.card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; gap: 0.5rem; }
.item-icon {
  width: 48px; height: 48px; background: var(--dark4); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  flex-shrink: 0; position: relative;
}
.qty-badge { position: absolute; bottom: 2px; right: 4px; font-size: 0.6rem; color: var(--text-dim); font-family: 'Cinzel', serif; }
.rarity-badge { font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.15em; padding: 0.2rem 0.5rem; text-transform: uppercase; border: 1px solid currentColor; opacity: 0.8; }
.rarity-rare { color: var(--rare); } .rarity-epic { color: var(--epic); }
.rarity-mythic { color: var(--mythic); } .rarity-uncommon { color: var(--uncommon); }
.rarity-common { color: var(--text-dim); }
.item-name { font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text); margin-bottom: 0.25rem; line-height: 1.3; }
.item-seller { font-size: 0.75rem; color: var(--text-dim); font-style: italic; }
.item-seller span { color: var(--gold-dim); font-style: normal; }

.card-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.price { display: flex; align-items: baseline; gap: 0.3rem; }
.price-value { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--gold); }
.price-currency { font-size: 0.65rem; letter-spacing: 0.12em; color: var(--gold-dim); text-transform: uppercase; }
.expires { font-size: 0.68rem; color: var(--text-dim); text-align: right; }
.expires.soon { color: var(--danger); }
.category-tag { font-size: 0.62rem; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; font-family: 'Cinzel', serif; background: var(--dark4); padding: 0.15rem 0.4rem; border: 1px solid var(--border); }

.card-price-hint { font-size: 0.65rem; color: var(--uncommon); font-style: italic; margin-top: 0.2rem; }
.card-price-hint.above { color: var(--danger); }

/* ── PAGINATION ── */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2rem; font-family: 'Cinzel', serif; font-size: 0.7rem; }
.page-btn { background: var(--dark3); border: 1px solid var(--border); color: var(--text-dim); padding: 0.5rem 0.9rem; cursor: pointer; transition: all 0.2s; }
.page-btn:hover, .page-btn.active { background: var(--gold-glow); border-color: var(--gold-dim); color: var(--gold); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-info { color: var(--text-dim); padding: 0 0.5rem; }

/* ── LOADING / EMPTY ── */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 2rem; gap: 1.5rem; color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.loader { width: 40px; height: 40px; border: 1px solid var(--border); border-top-color: var(--gold-dim); border-radius: 50%; animation: spin 1s linear infinite; }
.empty { grid-column: 1/-1; text-align: center; padding: 4rem; color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* ── PRICES PAGE ── */
.price-search {
  background: var(--dark3); border: 1px solid var(--border); color: var(--text);
  font-family: 'Crimson Pro', serif; font-size: 1rem; padding: 0.55rem 1rem; outline: none;
  width: 260px; transition: border-color 0.2s;
}
.price-search:focus { border-color: var(--gold-dim); }
.price-search::placeholder { color: var(--text-dim); }

.prices-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }

.price-card {
  background: var(--dark2); padding: 1.2rem 1.5rem; cursor: pointer;
  transition: background 0.2s; animation: fadeIn 0.3s ease both;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.price-card:hover { background: var(--dark3); }
.price-card-name { font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 600; color: var(--text); }
.price-card-stats { display: flex; gap: 1rem; }
.price-stat { display: flex; flex-direction: column; }
.price-stat-label { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }
.price-stat-value { font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600; color: var(--gold); }
.price-stat-value.green { color: var(--uncommon); }
.price-card-count { font-size: 0.68rem; color: var(--text-dim); font-style: italic; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.modal-overlay.open { display: flex; }
.modal { background: var(--dark2); border: 1px solid var(--border); width: 100%; max-width: 680px; animation: fadeIn 0.2s ease; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border); }
.modal-title { font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 700; color: var(--gold); letter-spacing: 0.08em; }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 1rem; cursor: pointer; transition: color 0.2s; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.modal-stats { display: flex; gap: 1.5rem; margin-top: 1rem; flex-wrap: wrap; }
.modal-stat { display: flex; flex-direction: column; }
.modal-stat-label { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; }
.modal-stat-value { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; color: var(--gold); }

.chart-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.chart-tab { background: var(--dark3); border: 1px solid var(--border); color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.12em; padding: 0.35rem 0.8rem; cursor: pointer; transition: all 0.2s; }
.chart-tab.active, .chart-tab:hover { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-glow); }

/* ── ALERTS PAGE ── */
.alert-create-card { background: var(--dark2); border: 1px solid var(--border); padding: 1.5rem; margin-bottom: 1.5rem; position: relative; }
.alert-create-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.alert-create-title { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--gold-dim); text-transform: uppercase; margin-bottom: 1rem; }
.alert-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 160px; position: relative; }
.form-group label { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.15em; color: var(--text-dim); text-transform: uppercase; }
.form-group input {
  background: var(--dark3); border: 1px solid var(--border); color: var(--text);
  font-family: 'Crimson Pro', serif; font-size: 1rem; padding: 0.6rem 0.9rem; outline: none; transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--gold-dim); }
.form-group input::placeholder { color: var(--text-dim); }

.autocomplete-dropdown {
  position: absolute; top: 100%; left: 0; right: 0; background: var(--dark3); border: 1px solid var(--gold-dim);
  border-top: none; z-index: 50; max-height: 200px; overflow-y: auto; display: none;
}
.autocomplete-dropdown.open { display: block; }
.autocomplete-item { padding: 0.5rem 0.9rem; cursor: pointer; font-size: 0.9rem; transition: background 0.15s; border-bottom: 1px solid var(--border); }
.autocomplete-item:hover { background: var(--gold-glow); color: var(--gold); }

.btn-gold {
  background: var(--gold-glow); border: 1px solid var(--gold-dim); color: var(--gold);
  font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.7rem 1.4rem; cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.btn-gold:hover { background: rgba(250,204,21,0.28); }

.alerts-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.alert-row {
  background: var(--dark2); padding: 1rem 1.5rem; display: flex; align-items: center;
  gap: 1rem; transition: background 0.15s; flex-wrap: wrap;
}
.alert-row:hover { background: var(--dark3); }
.alert-item-name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--text); flex: 1; min-width: 120px; }
.alert-price { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--gold); white-space: nowrap; }
.alert-webhook { font-size: 0.7rem; color: var(--text-dim); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.alert-status { font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.12em; padding: 0.2rem 0.5rem; border: 1px solid; text-transform: uppercase; }
.alert-status.active { color: var(--uncommon); border-color: var(--uncommon); }
.alert-status.paused { color: var(--text-dim); border-color: var(--text-dim); }
.alert-last { font-size: 0.68rem; color: var(--text-dim); font-style: italic; white-space: nowrap; }
.alert-actions { display: flex; gap: 0.5rem; }
.btn-sm {
  background: var(--dark4); border: 1px solid var(--border); color: var(--text-dim);
  font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; cursor: pointer; transition: all 0.2s;
}
.btn-sm:hover { border-color: var(--gold-dim); color: var(--gold); }
.btn-sm.danger:hover { border-color: var(--danger); color: var(--danger); }

/* ── ISLAND PAGE ── */
.island-search-wrap { max-width: 520px; margin: 3rem auto 0; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.island-search-title { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; text-align: center; }
.island-search-title span { color: var(--gold); }
.island-input-row { display: flex; width: 100%; }
.island-input-row input { flex: 1; background: var(--dark3); border: 1px solid var(--border); border-right: none; color: var(--text); font-family: 'Crimson Pro', serif; font-size: 1rem; padding: 0.75rem 1rem; outline: none; }
.island-input-row input:focus { border-color: var(--gold-dim); }
.island-input-row input::placeholder { color: var(--text-dim); }
.island-input-row button { background: var(--gold-glow); border: 1px solid var(--gold-dim); color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.75rem 1.4rem; cursor: pointer; }
.island-result { max-width: 860px; margin: 2.5rem auto 4rem; animation: fadeIn 0.35s ease; }
.island-hero { background: var(--dark2); border: 1px solid var(--border); padding: 2rem 2.5rem; margin-bottom: 1px; position: relative; overflow: hidden; }
.island-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.island-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.island-owner { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.island-id { font-size: 0.7rem; color: var(--text-dim); font-style: italic; margin-top: 0.25rem; }
.island-balance-value { font-family: 'Cinzel', serif; font-size: 1.6rem; font-weight: 700; color: var(--gold); }
.island-balance-label { font-size: 0.65rem; letter-spacing: 0.15em; color: var(--text-dim); text-transform: uppercase; }
.island-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-top: none; }
.island-section { background: var(--dark2); padding: 1.5rem; }
.island-section-full { grid-column: 1/-1; }
.section-title { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.member-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.member-row:last-child { border-bottom: none; }
.member-name { font-size: 0.9rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; }
.member-avatar { width: 24px; height: 24px; image-rendering: pixelated; border: 1px solid var(--border); }
.member-role { font-family: 'Cinzel', serif; font-size: 0.55rem; letter-spacing: 0.12em; padding: 0.15rem 0.45rem; border: 1px solid currentColor; text-transform: uppercase; }
.role-OWNER { color: var(--gold); } .role-COADMIN { color: #f97316; } .role-MEMBER { color: var(--text-dim); }
.warp-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.warp-row:last-child { border-bottom: none; }
.warp-name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--text); }
.warp-coords { font-size: 0.7rem; color: var(--text-dim); font-style: italic; }
.empty-section { color: var(--text-dim); font-style: italic; font-size: 0.8rem; padding: 0.5rem 0; }
.island-error { text-align: center; padding: 3rem; color: var(--danger); font-family: 'Cinzel', serif; font-size: 0.75rem; letter-spacing: 0.15em; }
.json-section { background: var(--dark3); padding: 1rem; font-size: 0.75rem; color: var(--text-dim); font-family: monospace; overflow-x: auto; max-height: 200px; overflow-y: auto; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag { background: var(--dark4); border: 1px solid var(--border); padding: 0.2rem 0.6rem; font-size: 0.72rem; color: var(--text); }

/* ── PLAYERS PAGE ── */
.online-dot { display: inline-block; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; margin-right: 0.5rem; box-shadow: 0 0 6px #22c55e; animation: pulse 2s infinite; }
.total-online { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; color: var(--gold); }
.server-pills { display: flex; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 1.5rem; }
.server-pill { flex: 1; background: var(--dark2); padding: 1rem 1.5rem; text-align: center; }
.server-pill-name { font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.25rem; }
.server-pill-count { font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; color: var(--gold); }
.players-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; align-items: center; }
.players-search { flex: 1; min-width: 180px; background: var(--dark3); border: 1px solid var(--border); color: var(--text); font-family: 'Crimson Pro', serif; font-size: 1rem; padding: 0.55rem 0.9rem; outline: none; }
.players-search:focus { border-color: var(--gold-dim); }
.players-search::placeholder { color: var(--text-dim); }
.players-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.player-card { background: var(--dark2); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.85rem; transition: background 0.15s; animation: fadeIn 0.3s ease both; }
.player-card:hover { background: var(--dark3); }
.player-avatar { width: 36px; height: 36px; image-rendering: pixelated; border: 1px solid var(--border); flex-shrink: 0; }
.player-info { min-width: 0; }
.player-name { font-family: 'Cinzel', serif; font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-grade { font-size: 0.62rem; letter-spacing: 0.08em; margin-top: 0.15rem; font-family: 'Cinzel', serif; }
.player-servers { display: flex; gap: 0.25rem; margin-top: 0.3rem; flex-wrap: wrap; }
.server-tag { font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--dark4); border: 1px solid var(--border); padding: 0.1rem 0.35rem; color: var(--text-dim); font-family: 'Cinzel', serif; }
.players-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.players-title { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.refresh-btn { background: var(--dark3); border: 1px solid var(--border); color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.55rem 1rem; cursor: pointer; transition: all 0.2s; }
.refresh-btn:hover { border-color: var(--gold-dim); color: var(--gold); }
.last-update { font-size: 0.65rem; color: var(--text-dim); font-style: italic; }
.filter-btn { background: var(--dark3); border: 1px solid var(--border); color: var(--text-dim); font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 0.12em; padding: 0.55rem 1rem; cursor: pointer; transition: all 0.2s; text-transform: uppercase; }
.filter-btn:hover, .filter-btn.active { background: var(--gold-glow); border-color: var(--gold-dim); color: var(--gold); }

/* ── ANIMATIONS ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

@media (max-width: 768px) {
  header { padding: 0.8rem 1rem; gap: 0.8rem; }
  .logo-title { font-size: 1.2rem; }
  .header-stats { display: none; }
  .island-sections { grid-template-columns: 1fr; }
}