/* ============================================================
   BlackWire Arcade — theme.css
   Design tokens + shared components for the whole frontend shell
   ============================================================ */

:root {
  /* --- color --- */
  --bg-void: #0b0710;
  --bg-panel: #1a1226;
  --bg-panel-raised: #241a35;
  --accent-primary: #b084ff;
  --accent-primary-dim: #7c5ab8;
  --accent-gold: #d4af6a;
  --text-primary: #ece6f5;
  --text-muted: #9483ad;
  --border-glow: #6d4fa3;
  --state-online: #7fd9a8;
  --state-danger: #e07a8e;

  /* --- type --- */
  --font-display: 'Cinzel Decorative', serif;
  --font-body: 'Cormorant Garamond', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- layout --- */
  --radius-panel: 6px;
  --gap: 1.25rem;
  --max-width: 1440px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(176,132,255,0.10), transparent 60%);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.5;
}

a { color: var(--accent-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-primary);
}

.mono { font-family: var(--font-mono); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}
/* extra breathing room on wide desktop monitors instead of just a hard-capped
   centered column with dead space on either side */
@media (min-width: 1560px) {
  .container { padding: 0 2.5rem; }
}

/* ============================================================
   Utility bar (top strip: logo, online count, account)
   ============================================================ */
.utility-bar {
  background: linear-gradient(180deg, #150d20, #0b0710);
  border-bottom: 1px solid var(--border-glow);
  padding: 0.6rem 0;
}

.utility-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent-primary);
  text-shadow: 0 0 18px rgba(176,132,255,0.35);
}

.wordmark small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: block;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* the "cathedral plaque" online counter */
.online-plaque {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--state-online);
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
}

.online-plaque .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--state-online);
  box-shadow: 0 0 6px var(--state-online);
  margin-right: 0.4rem;
}

.account-area {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.btn {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--border-glow);
  background: var(--bg-panel-raised);
  color: var(--text-primary);
  padding: 0.45rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:hover { box-shadow: 0 0 14px rgba(176,132,255,0.35); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-dim));
  border-color: var(--accent-primary);
  color: #1a1226;
}
.btn-danger { border-color: var(--state-danger); color: var(--state-danger); background: transparent; }

/* ============================================================
   Gothic-arch nav — the signature element
   ============================================================ */
.arch-nav {
  background: #0e0916;
  border-bottom: 1px solid var(--border-glow);
}

.arch-nav .container {
  display: flex;
  gap: 0.4rem;
  padding-top: 0.5rem;
  justify-content:center;
}

.arch-tab {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--text-muted);
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-bottom: none;
  padding: 0.65rem 1.4rem 0.5rem;
  /* pointed gothic-arch top via clip-path */
  clip-path: polygon(0% 100%, 0% 35%, 50% 0%, 100% 35%, 100% 100%);
  cursor: pointer;
  transition: color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.arch-tab:hover {
  color: var(--text-primary);
  box-shadow: 0 -6px 18px rgba(176,132,255,0.30);
}

.arch-tab.active {
  color: var(--bg-void);
  background: linear-gradient(180deg, var(--accent-primary), var(--accent-primary-dim));
  box-shadow: 0 -6px 22px rgba(176,132,255,0.45);
}

/* ============================================================
   Hero banner
   ============================================================ */
.hero {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
}
.hero h1 {
  font-size: 2rem;
  margin: 0 0 0.4rem;
}
.back-link {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 0.6rem;
  transition: color 0.15s;
}
.back-link:hover { color: var(--accent-gold); }

.rules-content p { margin: 0 0 0.75rem; line-height: 1.5; }
.rules-content p:last-child { margin-bottom: 0; }
.hero p {
  color: var(--text-muted);
  font-size: 1.2rem;
  margin: 0;
}

/* ============================================================
   Illuminated panel — corner-flourish card used everywhere
   ============================================================ */
.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-panel);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: var(--gap);
}

.panel::before, .panel::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent-primary);
  opacity: 0.6;
}
.panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.panel-header {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--accent-primary);
  border-bottom: 1px solid var(--border-glow);
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.panel-header .see-all {
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* ============================================================
   Game list rows (jackpot / players columns, like the original)
   ============================================================ */
.game-row-list { list-style: none; margin: 0; padding: 0; }
.game-row-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px dashed rgba(109,79,163,0.35);
}
.game-row-list li:last-child { border-bottom: none; }

.game-row-list .game-name { font-size: 1.05rem; }
.game-row-list .game-stats {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  gap: 0.75rem;
  min-width: 130px;
  justify-content: flex-end;
}
.game-row-list .jackpot { color: var(--accent-gold); }

/* ============================================================
   Grid layout for lobby home
   ============================================================ */
.lobby-grid {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  gap: var(--gap);
  padding: 1.5rem 0 3rem;
}
@media (max-width: 900px) {
  .lobby-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Table list rows (used on lobby.php)
   ============================================================ */
.table-row-list { list-style: none; margin: 0; padding: 0; }
.table-row-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid rgba(109,79,163,0.25);
}
.table-row-list li:hover { background: rgba(176,132,255,0.06); }
.table-status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.table-status.waiting { color: var(--state-online); border: 1px solid var(--state-online); }
.table-status.in_progress { color: var(--accent-gold); border: 1px solid var(--accent-gold); }

/* ============================================================
   Table/seat view (table.php)
   ============================================================ */
.seat-ring {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.seat {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-panel);
  padding: 1rem;
  text-align: center;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}
.seat.empty { opacity: 0.55; border-style: dashed; cursor: pointer; }
.seat.empty:hover { opacity: 1; box-shadow: 0 0 14px rgba(176,132,255,0.3); }
.seat.empty .add-bot-btn { margin-top: 0.4rem; opacity: 1; }
.seat .seat-username { font-family: var(--font-display); font-size: 0.95rem; }
.seat .seat-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }
.seat.active-turn { border-color: var(--accent-gold); box-shadow: 0 0 14px rgba(212,175,106,0.35); }
.seat .seat-spades-info { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-primary); margin-top: 0.15rem; }

/* ---- Spades ---- */
.spades-scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
}
.spades-team {
  background: var(--bg-panel-raised);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-panel);
  padding: 0.75rem;
  text-align: center;
}
.spades-team.my-team { border-color: var(--accent-gold); box-shadow: 0 0 12px rgba(212,175,106,0.25); }
.spades-team-name { font-family: var(--font-display); font-size: 0.9rem; color: var(--text-muted); }
.spades-team-name .spades-team-seats { font-size: 0.75rem; }
.spades-team-score { font-family: var(--font-mono); font-size: 1.8rem; color: var(--text-primary); line-height: 1.3; }
.spades-team-bags { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }

.spades-trick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 0.6rem;
  margin: 1rem 0;
  align-items: end;
}
.spades-trick-slot { text-align: center; }
.spades-trick-seat-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.spades-card-slot {
  min-height: 64px;
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  background: var(--bg-panel-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
}
.spades-card-slot.empty { border-style: dashed; opacity: 0.4; }
.spades-card-slot.red { color: #e07a8e; }
.spades-card-slot.black { color: var(--text-primary); }
.spades-trick-note { grid-column: 1 / -1; text-align: center; font-size: 0.8rem; color: var(--text-muted); font-style: italic; }

.spades-bid-label { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.spades-bid-buttons { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.spades-bid-buttons .spades-bid-btn { min-width: 2.4rem; }

.spades-hand-label { color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0 0.5rem; }
.spades-hand { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spades-card {
  min-width: 3rem;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border-glow);
  border-radius: 6px;
  background: var(--bg-panel-raised);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  text-align: center;
}
.spades-card.red { color: #e07a8e; }
.spades-card.black { color: var(--text-primary); }
.spades-card.legal { cursor: pointer; border-color: var(--accent-gold); }
.spades-card.legal:hover { box-shadow: 0 0 12px rgba(212,175,106,0.4); transform: translateY(-3px); }
.spades-card.illegal { opacity: 0.4; }

.chat-panel { display: flex; flex-direction: column; height: 420px; width: 100%; }
.chat-log {
  flex: 1;
  overflow-y: auto;
  font-size: 0.95rem;
  padding-right: 0.25rem;
}
.chat-log .msg { margin-bottom: 0.4rem; }
.chat-log .msg .who { color: var(--accent-primary); font-weight: 600; }
.chat-log .msg .who.system { color: var(--text-muted); font-style: italic; }
.chat-input-row { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.chat-input-row input {
  flex: 1;
  background: var(--bg-void);
  border: 1px solid var(--border-glow);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0.5rem 0.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
}

/* ============================================================
   Checkers board
   ============================================================ */
.checkers-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border: 2px solid var(--border-glow);
  box-shadow: 0 0 30px rgba(176,132,255,0.15);
}
.board-square {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.board-square.light { background: #241a35; }
.board-square.dark { background: #0b0710; }
.board-square.selectable { cursor: pointer; }
.board-square.selectable::after {
  content: "";
  position: absolute;
  width: 22%; height: 22%;
  border-radius: 50%;
  background: var(--accent-primary);
  opacity: 0.55;
}
.board-square.selected { box-shadow: inset 0 0 0 3px var(--accent-gold); }

.checker-piece {
  width: 74%;
  height: 74%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.checker-piece:hover { transform: scale(1.06); }
.checker-piece.red {
  background: radial-gradient(circle at 35% 30%, #ff9db3, #b0233f);
  border: 2px solid #ff5c7a;
  color: #3a0510;
  box-shadow: 0 0 10px rgba(255,92,122,0.5);
}
.checker-piece.black {
  background: radial-gradient(circle at 35% 30%, #4a4356, #0a0710);
  border: 2px solid #6d4fa3;
  color: #d9c8f5;
  box-shadow: 0 0 10px rgba(109,79,163,0.4);
}
.board-square.legal-move::after {
  content: "";
  position: absolute;
  width: 26%; height: 26%;
  border-radius: 50%;
  background: var(--accent-gold);
  opacity: 0.75;
}
.board-square.selectable::after { background: var(--accent-primary); }
.board-square.must-move { box-shadow: inset 0 0 0 2px var(--accent-gold); }

.turn-banner {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.turn-banner.your-turn { color: var(--state-online); }
.turn-banner.game-over { color: var(--accent-gold); font-size: 1.1rem; }

.color-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.color-badge .swatch {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.color-badge .swatch.red { background: radial-gradient(circle at 35% 30%, #ff9db3, #b0233f); border: 1px solid #ff5c7a; }
.color-badge .swatch.black { background: radial-gradient(circle at 35% 30%, #4a4356, #0a0710); border: 1px solid #6d4fa3; }

/* ============================================================
   Modal (login/register)
   ============================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11,7,16,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--bg-panel);
  border: 1px solid var(--accent-primary);
  box-shadow: 0 0 40px rgba(176,132,255,0.25);
  border-radius: var(--radius-panel);
  width: 360px;
  padding: 1.5rem;
}
.modal h2 { margin-top: 0; font-size: 1.3rem; color: var(--accent-primary); }
.modal label { display: block; font-size: 0.85rem; color: var(--text-muted); margin: 0.6rem 0 0.2rem; }
.modal input {
  width: 100%;
  background: var(--bg-void);
  border: 1px solid var(--border-glow);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0.5rem 0.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
}
.modal .modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; }
.modal .modal-error { color: var(--state-danger); font-size: 0.85rem; min-height: 1.2em; margin-top: 0.4rem; }
.modal .switch-link { font-size: 0.85rem; text-align: center; margin-top: 0.8rem; }

footer.site-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 2rem 1rem;
  border-top: 1px solid var(--border-glow);
}
@media(max-width:1000px){
body{width:99vw;}
.utility-bar .container{display:flex; justify-content:center;}  
.arch-nav .container{display:flex;flex-direction:row;flex-wrap:wrap;gap: 0rem !important;}
.arch-nav .container .arch-tab{
display:flex;flex-wrap:wrap;flex-shrink: 1; text-align:center; margin:auto; height:40px; font-size: small;
margin-bottom:5px;
 }
#logout-btn{padding: 0;}
.container{display:flex !important;flex-direction: column;}
.chat-panel{width: auto;}
}

/* ============================================================
   Account identity chip (header) + nav notification dot
   ============================================================ */
.account-identity { display:flex; align-items:center; gap:0.35rem; color:var(--text-primary); }
.account-identity:hover { text-decoration:none; }
.account-avatar { font-size:1.2rem; }
.account-badge { font-size:0.95rem; }

.arch-tab { position:relative; }
.notif-dot {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 3px;
  margin-left:0.3rem;
  background:var(--state-danger); color:#fff;
  border-radius:999px; font-family:var(--font-mono); font-size:0.65rem;
  vertical-align:middle;
}

/* ============================================================
   Friends page
   ============================================================ */
.friend-search { display:flex; gap:0.5rem; margin-bottom:0.8rem; }
.friend-search input {
  flex:1; background:var(--bg-void); border:1px solid var(--border-glow);
  border-radius:4px; color:var(--text-primary); padding:0.5rem 0.6rem;
  font-family:var(--font-body); font-size:1rem;
}
.friend-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.75rem; padding:0.6rem 0.2rem; border-bottom:1px solid rgba(109,79,163,0.25);
}
.friend-row:last-child { border-bottom:none; }
.friend-who { display:flex; align-items:center; gap:0.55rem; }
.friend-avatar { font-size:1.4rem; width:1.6em; text-align:center; }
.friend-name-col { display:flex; flex-direction:column; }
.friend-name { font-family:var(--font-display); font-size:1rem; }
.friend-presence { font-family:var(--font-mono); font-size:0.72rem; color:var(--text-muted); }
.friend-presence.online { color:var(--state-online); }
.friend-actions { display:flex; gap:0.4rem; }
.btn-sm { padding:0.3rem 0.7rem; font-size:0.85rem; }
.empty-note { color:var(--text-muted); font-size:0.95rem; padding:0.4rem 0; }

/* ============================================================
   Profile page
   ============================================================ */
.profile-header { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.profile-avatar {
  font-size:3rem; width:1.6em; height:1.6em; display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel-raised); border:1px solid var(--border-glow); border-radius:50%;
}
.profile-name { font-size:1.6rem; display:flex; align-items:center; gap:0.5rem; }
.profile-meta { color:var(--text-muted); font-size:0.9rem; margin-top:0.2rem; }
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:0.75rem; margin-top:1rem;
}
.stat-tile {
  background:var(--bg-panel-raised); border:1px solid var(--border-glow); border-radius:var(--radius-panel);
  padding:0.8rem; text-align:center;
}
.stat-tile .stat-value { font-family:var(--font-mono); font-size:1.4rem; color:var(--accent-gold); }
.stat-tile .stat-label { font-size:0.8rem; color:var(--text-muted); margin-top:0.2rem; }

/* ============================================================
   Token store
   ============================================================ */
.store-tabs { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.store-tab {
  background:var(--bg-panel-raised); border:1px solid var(--border-glow); color:var(--text-muted);
  border-radius:4px; padding:0.4rem 0.9rem; cursor:pointer; font-family:var(--font-body); font-size:0.95rem;
}
.store-tab.active { color:var(--bg-void); background:linear-gradient(180deg, var(--accent-primary), var(--accent-primary-dim)); border-color:var(--accent-primary); }
.store-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:0.9rem; }
.store-item {
  background:var(--bg-panel-raised); border:1px solid var(--border-glow); border-radius:var(--radius-panel);
  padding:1rem; display:flex; flex-direction:column; gap:0.5rem;
}
.store-item.owned { border-color:var(--state-online); }
.store-item .store-item-icon { font-size:2rem; text-align:center; }
.store-item .store-item-name { font-family:var(--font-display); font-size:1rem; text-align:center; }
.store-item .store-item-desc { font-size:0.85rem; color:var(--text-muted); text-align:center; min-height:2.4em; }
.store-item .store-item-price { font-family:var(--font-mono); color:var(--accent-gold); text-align:center; }
.store-item .store-item-swatch { width:32px; height:32px; border-radius:50%; margin:0 auto; border:2px solid var(--border-glow); }
.store-owned-tag { text-align:center; font-size:0.8rem; color:var(--state-online); }
.toast {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:200;
  background:var(--bg-panel); border:1px solid var(--accent-gold); color:var(--accent-gold);
  padding:0.6rem 1rem; border-radius:var(--radius-panel); box-shadow:0 0 20px rgba(212,175,106,0.35);
  font-family:var(--font-mono); font-size:0.9rem;
  animation: toast-in 0.2s ease;
}
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ============================================================
   Players nav dropdown
   ============================================================ */
.arch-tab-dropdown { position: relative; }
.arch-tab-dropdown .dropdown-trigger {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
.dropdown-caret { font-size: 0.65rem; opacity: 0.7; }
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-panel);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  min-width: 210px;
  padding: 0.4rem;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 50;
}
.arch-tab-dropdown:hover .dropdown-menu,
.arch-tab-dropdown.open .dropdown-menu { display: flex; }
.dropdown-menu a, .dropdown-menu .dropdown-note {
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dropdown-menu a:hover { background: rgba(176,132,255,0.12); text-decoration: none; }
.dropdown-menu .dropdown-note { color: var(--text-muted); font-size: 0.85rem; cursor: default; }

/* ============================================================
   Equipped cosmetics shown wherever a username appears
   ============================================================ */
.player-badge { cursor: help; }
.player-avatar-tag { margin-right: 0.25rem; }