/* ═══════════════════════════════════════════════════════════════════
   RetroChain BBS — Stylesheet
   Full-screen BBS terminal aesthetic with CRT effects
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

/* Package UI Layer: bootstrap-icons + animate.css + tippy.js + notyf */
.bi {
  vertical-align: middle;
  line-height: 1;
}
.nav-emoji .bi {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(0, 255, 255, 0.25));
}
.pkg-panel-icon {
  margin-right: 8px;
  color: var(--bbs-cyan);
  font-size: 0.9em;
}
.bbs-panel.animate__animated {
  --animate-duration: 0.36s;
}
.chat-msg.animate__animated {
  --animate-duration: 0.24s;
}

.tippy-box[data-theme~='bbs'] {
  background: linear-gradient(180deg, rgba(8, 12, 32, 0.98), rgba(5, 7, 20, 0.98));
  border: 1px solid rgba(0, 255, 255, 0.3);
  color: #b6ffff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 255, 255, 0.14);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  border-radius: 8px;
}
.tippy-box[data-theme~='bbs'] .tippy-content {
  padding: 6px 9px;
}
.tippy-box[data-theme~='bbs'] > .tippy-arrow::before {
  color: rgba(0, 255, 255, 0.3);
}

.notyf__toast {
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.18);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.notyf__message {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
}
[data-aos] {
  will-change: transform, opacity;
}
.aos-animate {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.js-tilt-glare {
  border-radius: inherit;
  pointer-events: none;
}

:root {
  --bbs-bg: #0a0a16;
  --bbs-fg: #33ff33;
  --bbs-dim: #1a7a1a;
  --bbs-cyan: #00ffff;
  --bbs-yellow: #ffff33;
  --bbs-magenta: #ff33ff;
  --bbs-red: #ff3333;
  --bbs-blue: #3399ff;
  --bbs-orange: #ff9933;
  --bbs-white: #e0e0e0;
  --bbs-border: #1a3a1a;
  --bbs-input-bg: #0d0d1e;
  --bbs-highlight: rgba(51,255,51,0.08);
  --bbs-glow: rgba(51,255,51,0.4);
  --bbs-font: 'VT323', 'Share Tech Mono', 'Courier New', monospace;
  --bbs-panel-bg: rgba(10,10,22,0.92);
}

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

html, body {
  background: var(--bbs-bg);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 18px;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ═══ CRT Monitor Effect — Full Shader ═══ */

/* Scanlines */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px
  );
  z-index: 9999;
  mix-blend-mode: multiply;
}

/* Vignette — dark edges like a real CRT */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.45) 100%);
  z-index: 9998;
}

/* CRT flicker — very subtle */
@keyframes crt-flicker {
  0%   { opacity: 0.985; }
  5%   { opacity: 0.99; }
  10%  { opacity: 0.985; }
  15%  { opacity: 1; }
  20%  { opacity: 0.988; }
  50%  { opacity: 1; }
  80%  { opacity: 0.99; }
  85%  { opacity: 0.985; }
  90%  { opacity: 1; }
  95%  { opacity: 0.988; }
  100% { opacity: 0.985; }
}

body { animation: crt-flicker 4s steps(1) infinite; }

/* Screen curvature — subtle barrel distortion */
html {
  overflow: hidden;
}
body {
  overflow-y: auto;
  height: 100vh;
}

/* CRT warm-up animation on page load */
@keyframes crt-warmup {
  0%   { filter: brightness(0) saturate(0); transform: scaleY(0.005); }
  20%  { filter: brightness(0.5) saturate(0.2); transform: scaleY(0.005); }
  40%  { filter: brightness(0.8) saturate(0.5); transform: scaleY(1); }
  60%  { filter: brightness(1.2) saturate(0.8); }
  80%  { filter: brightness(1.05) saturate(1); }
  100% { filter: brightness(1) saturate(1); }
}

body.crt-warmup {
  animation: crt-warmup 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Horizontal scan bar — sweeps down the screen */
@keyframes crt-scanbar {
  0%   { top: -4px; }
  100% { top: 100vh; }
}
.crt-scanbar {
  position: fixed;
  left: 0; right: 0;
  height: 4px;
  background: linear-gradient(180deg, transparent, rgba(0,255,200,0.04), transparent);
  z-index: 9997;
  pointer-events: none;
  animation: crt-scanbar 8s linear infinite;
}

/* Screen flash effects */
@keyframes crt-flash-gold {
  0% { opacity: 0.35; } 100% { opacity: 0; }
}
@keyframes crt-flash-red {
  0% { opacity: 0.25; } 100% { opacity: 0; }
}
@keyframes crt-flash-green {
  0% { opacity: 0.3; } 100% { opacity: 0; }
}
.crt-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 9996;
}
.crt-flash.gold   { background: #FFD700; animation: crt-flash-gold 0.5s ease-out forwards; }
.crt-flash.red    { background: #FF2222; animation: crt-flash-red 0.4s ease-out forwards; }
.crt-flash.green  { background: #00FF88; animation: crt-flash-green 0.4s ease-out forwards; }
.crt-flash.purple { background: #AA44FF; animation: crt-flash-gold 0.5s ease-out forwards; }

a { color: var(--bbs-cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-shadow: 0 0 8px var(--bbs-cyan); }

::selection { background: var(--bbs-cyan); color: var(--bbs-bg); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bbs-bg); }
::-webkit-scrollbar-thumb { background: var(--bbs-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bbs-dim); }

/* ─── Header ─── */
.bbs-site-header {
  text-align: center;
  padding: 20px 16px 10px;
  border-bottom: 2px solid var(--bbs-border);
  background: linear-gradient(180deg, rgba(0,255,255,0.03), transparent);
  position: relative;
}

.bbs-ascii-banner {
  white-space: pre;
  font-size: 12px;
  line-height: 1.15;
  color: var(--bbs-cyan);
  display: inline-block;
  text-align: left;
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
}

.bbs-tagline {
  color: var(--bbs-yellow);
  font-size: 18px;
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(255,255,51,0.3);
}

.bbs-sysop-line {
  color: var(--bbs-dim);
  font-size: 15px;
  margin-top: 2px;
}

/* ─── Navigation Tabs ─── */
.bbs-nav {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--bbs-border);
  background: var(--bbs-panel-bg);
  overflow: visible;
  position: sticky;
  top: 0;
  z-index: 100;
}

.bbs-nav-btn {
  flex: none;
  padding: 10px 20px;
  cursor: pointer;
  color: var(--bbs-dim);
  font-family: var(--bbs-font);
  font-size: 20px;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}

.bbs-nav-btn:hover {
  color: var(--bbs-fg);
  background: var(--bbs-highlight);
}

.bbs-nav-btn.active {
  color: var(--bbs-cyan);
  border-bottom-color: var(--bbs-cyan);
  text-shadow: 0 0 8px rgba(0,255,255,0.3);
}

.bbs-nav-btn .nav-emoji { margin-right: 4px; }

/* ─── Status Bar ─── */
.bbs-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  border-bottom: 1px solid var(--bbs-border);
  font-size: 15px;
  color: var(--bbs-dim);
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(0,0,0,0.3);
}

.bbs-status-bar .status-online { color: var(--bbs-fg); }
.bbs-status-bar .status-user { color: var(--bbs-cyan); }
.bbs-status-bar .status-node { color: var(--bbs-yellow); }

/* ─── Panel Containers ─── */
.bbs-panel { display: none; min-height: calc(100vh - 200px); }
.bbs-panel.active { display: block; }

/* ─── Main Hall (Home) ─── */
.main-hall {
  padding: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.mh-welcome {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--bbs-border);
  margin-bottom: 20px;
}

.mh-welcome h2 {
  color: var(--bbs-cyan);
  font-size: 28px;
  text-shadow: 0 0 15px rgba(0,255,255,0.3);
}

.mh-welcome .mh-motd {
  color: var(--bbs-yellow);
  font-size: 20px;
  margin-top: 8px;
}

.mh-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .mh-grid { grid-template-columns: 1fr; }
}

.mh-card {
  border: 1px solid var(--bbs-border);
  padding: 16px;
  border-radius: 2px;
  background: rgba(10,10,22,0.6);
  transition: border-color 0.2s;
}

.mh-card:hover { border-color: var(--bbs-dim); }

.mh-card h3 {
  color: var(--bbs-yellow);
  font-size: 20px;
  margin-bottom: 10px;
  border-bottom: 1px dashed var(--bbs-border);
  padding-bottom: 6px;
}

.mh-card .mh-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 17px;
}

.mh-card .mh-stat-label { color: var(--bbs-dim); }
.mh-card .mh-stat-val { color: var(--bbs-fg); }
.mh-card .mh-stat-val.cyan { color: var(--bbs-cyan); }
.mh-card .mh-stat-val.yellow { color: var(--bbs-yellow); }
.mh-card .mh-stat-val.red { color: var(--bbs-red); }

.mh-events {
  max-height: 200px;
  overflow-y: auto;
}

.mh-event {
  padding: 3px 0;
  font-size: 16px;
  color: var(--bbs-dim);
  border-bottom: 1px solid rgba(26,58,26,0.3);
}

.mh-event .event-time { color: var(--bbs-dim); font-size: 14px; }
.mh-event .event-actor { color: var(--bbs-cyan); }

/* ─── Chat Panel ─── */
.chat-layout {
  display: grid;
  grid-template-columns: 52px 200px 1fr 220px;
  height: calc(100vh - 200px);
  min-height: 400px;
}

@media (max-width: 900px) {
  .chat-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    height: auto;
    min-height: 60vh;
  }
}

/* ─── Server Strip (Discord-like icon bar) ─── */
.server-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  background: rgba(0,0,0,0.45);
  border-right: 1px solid var(--bbs-border);
  overflow-y: auto;
}
.server-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(0,255,0,0.2);
  background: rgba(0,255,0,0.06);
  color: var(--bbs-fg);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-radius 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
  font-family: var(--bbs-font);
  padding: 0;
}
.server-icon:hover {
  border-radius: 35%;
  border-color: var(--bbs-cyan);
  background: rgba(0,255,0,0.12);
}
.server-icon.active {
  border-radius: 35%;
  border-color: var(--bbs-green);
  background: rgba(0,255,0,0.15);
  box-shadow: 0 0 8px rgba(0,255,0,0.3);
}
/* Active pill indicator on left */
.server-icon.active::before {
  content: '';
  position: absolute;
  left: -6px;
  width: 3px;
  height: 20px;
  background: var(--bbs-green);
  border-radius: 0 3px 3px 0;
}
.server-icon:hover::before {
  content: '';
  position: absolute;
  left: -6px;
  width: 3px;
  height: 10px;
  background: var(--bbs-dim);
  border-radius: 0 3px 3px 0;
}
.server-icon.active:hover::before {
  height: 20px;
  background: var(--bbs-green);
}
.server-strip-sep {
  width: 28px;
  height: 2px;
  background: var(--bbs-border);
  border-radius: 1px;
}
.clan-server-icon-btn {
  border-color: rgba(200,157,255,0.3);
  background: rgba(200,157,255,0.06);
}
.clan-server-icon-btn:hover {
  border-color: #c89dff;
  background: rgba(200,157,255,0.12);
}
.clan-server-icon-btn.active {
  border-color: #c89dff;
  background: rgba(200,157,255,0.18);
  box-shadow: 0 0 8px rgba(200,157,255,0.3);
}
.clan-server-icon-btn.active::before {
  background: #c89dff;
}

.chat-channels {
  border-right: 1px solid var(--bbs-border);
  padding: 10px;
  overflow-y: auto;
  background: rgba(0,0,0,0.2);
}

.chat-channels h3 {
  color: var(--bbs-yellow);
  font-size: 16px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--bbs-border);
  padding-bottom: 4px;
}

.chat-channels .channel-group {
  margin-bottom: 12px;
}

.chat-channels .channel-group-label {
  color: var(--bbs-dim);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  padding-left: 4px;
}

.channel-btn {
  display: block;
  width: 100%;
  background: none;
  border: 1px solid transparent;
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 17px;
  padding: 5px 8px;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  margin-bottom: 2px;
}

.channel-btn:hover {
  background: var(--bbs-highlight);
  border-color: var(--bbs-border);
}

.channel-btn.active {
  background: var(--bbs-highlight);
  border-color: var(--bbs-fg);
  color: var(--bbs-cyan);
}

.channel-btn .ch-count {
  color: var(--bbs-dim);
  font-size: 14px;
  float: right;
}

.channel-btn .ch-icon { margin-right: 4px; }

/* Chat main area */
.chat-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-room-header {
  padding: 8px 14px;
  border-bottom: 1px solid var(--bbs-border);
  color: var(--bbs-cyan);
  font-size: 18px;
  background: rgba(0,0,0,0.2);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  scroll-behavior: smooth;
}

.chat-msg {
  padding: 3px 8px 3px 4px;
  word-wrap: break-word;
  line-height: 1.4;
  position: relative;
  border-radius: 4px;
  transition: background 0.1s;
}
.chat-msg:hover {
  background: rgba(0, 255, 0, 0.02);
}

.chat-msg .msg-time { color: var(--bbs-dim); font-size: 14px; }
.chat-msg .msg-nick { color: var(--bbs-cyan); cursor: pointer; font-weight: bold; }
.chat-msg .msg-nick:hover { text-decoration: underline; }
.chat-msg .msg-text { color: var(--bbs-fg); }
.chat-msg.system { color: var(--bbs-yellow); font-style: italic; }
.chat-msg.system .msg-text { color: var(--bbs-yellow); }
.chat-msg.dm { border-left: 2px solid var(--bbs-magenta); padding-left: 8px; }
.chat-msg.dm .msg-nick { color: var(--bbs-magenta); }
.chat-msg.emote .msg-text { color: var(--bbs-magenta); font-style: italic; }

/* ── Markdown formatting ── */
.md-bold { color: var(--bbs-fg); font-weight: bold; }
.md-italic { font-style: italic; color: var(--bbs-cyan); }
.md-strike { text-decoration: line-through; opacity: 0.6; }
.md-inline {
  background: rgba(0,255,0,0.08);
  border: 1px solid rgba(0,255,0,0.15);
  border-radius: 3px;
  padding: 0 4px;
  font-family: var(--bbs-font);
  font-size: 0.92em;
  color: var(--bbs-green);
}
.md-codeblock {
  display: block;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,255,0,0.12);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 4px 0;
  font-family: var(--bbs-font);
  font-size: 0.9em;
  color: var(--bbs-green);
  white-space: pre-wrap;
  overflow-x: auto;
}
.md-quote {
  display: block;
  border-left: 3px solid var(--bbs-dim);
  padding-left: 8px;
  color: var(--bbs-dim);
  font-style: italic;
  margin: 2px 0;
}
/* ── Edited indicator ── */
.msg-edited {
  color: var(--bbs-dim);
  font-size: 0.8em;
  font-style: italic;
  margin-left: 4px;
  opacity: 0.7;
}

.chat-input-bar {
  display: flex;
  border-top: 1px solid var(--bbs-border);
  background: var(--bbs-input-bg);
  position: relative;
}

.chat-prompt {
  color: var(--bbs-fg);
  padding: 8px;
  font-family: var(--bbs-font);
  font-size: 18px;
  user-select: none;
}

.chat-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 18px;
  padding: 8px 4px;
  outline: none;
  caret-color: var(--bbs-fg);
}

.chat-input::placeholder { color: var(--bbs-dim); }

/* Online users sidebar */
.chat-users {
  border-left: 1px solid var(--bbs-border);
  padding: 10px;
  overflow-y: auto;
  background: rgba(0,0,0,0.2);
}

.chat-users h3 {
  color: var(--bbs-yellow);
  font-size: 16px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--bbs-border);
  padding-bottom: 4px;
}

.user-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 16px;
}

.user-entry:hover { background: var(--bbs-highlight); }
.user-entry .user-dot,
.user-entry .user-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bbs-dim);
  flex-shrink: 0;
}
.user-status-dot.online { background: #43b581; box-shadow: 0 0 4px rgba(67, 181, 129, 0.5); }
.user-status-dot.idle { background: #faa61a; box-shadow: 0 0 4px rgba(250, 166, 26, 0.3); }
.user-status-dot.offline { background: var(--bbs-dim); }
.user-entry .user-name { color: var(--bbs-cyan); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.user-entry .user-level { color: var(--bbs-dim); font-size: 14px; }
.user-entry .user-role {
  font-size: 12px;
  margin-left: -2px;
}
.user-entry .user-holder-badge {
  font-size: 12px;
}

/* ─── Message Boards ─── */
.boards-container {
  padding: 16px 24px;
  max-width: 960px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
}

.boards-container h2 {
  color: var(--bbs-cyan);
  font-size: 26px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--bbs-border);
  padding-bottom: 6px;
  text-shadow: 0 0 10px rgba(0,255,255,0.2);
}

.board-breadcrumb {
  color: var(--bbs-dim);
  font-size: 16px;
  margin-bottom: 12px;
}

.board-breadcrumb a {
  color: var(--bbs-cyan);
  cursor: pointer;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table th {
  text-align: left;
  color: var(--bbs-yellow);
  padding: 8px;
  border-bottom: 1px solid var(--bbs-border);
  font-size: 16px;
}

.board-table td {
  padding: 8px;
  border-bottom: 1px solid var(--bbs-border);
  font-size: 17px;
}

.board-table tr:hover td { background: var(--bbs-highlight); }
.board-table .board-name { color: var(--bbs-cyan); cursor: pointer; }
.board-table .board-name:hover { text-decoration: underline; }
.board-table .board-desc { color: var(--bbs-dim); }
.board-table .board-count { color: var(--bbs-yellow); text-align: center; }

.thread-row { cursor: pointer; }
.thread-row:hover td { background: var(--bbs-highlight); }
.thread-row .t-subject { color: var(--bbs-fg); }
.thread-row .t-author { color: var(--bbs-cyan); }
.thread-row .t-replies { color: var(--bbs-dim); text-align: center; }
.thread-row .t-date { color: var(--bbs-dim); font-size: 15px; }
.thread-row.pinned .t-subject::before { content: '📌 '; }

/* Post view */
.post-item {
  border: 1px solid var(--bbs-border);
  padding: 12px 16px;
  margin-bottom: 10px;
  border-radius: 2px;
  background: rgba(10,10,22,0.4);
}

.post-item.op { border-color: var(--bbs-cyan); }

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 16px;
}

.post-author { color: var(--bbs-cyan); font-weight: bold; }
.post-date { color: var(--bbs-dim); font-size: 14px; }
.post-body { color: var(--bbs-fg); white-space: pre-wrap; line-height: 1.5; }

.post-actions {
  margin-top: 8px;
  font-size: 14px;
}

.post-actions a {
  color: var(--bbs-dim);
  cursor: pointer;
  margin-right: 14px;
}
.post-actions a:hover { color: var(--bbs-fg); }

/* Compose form */
.compose-form {
  border: 1px solid var(--bbs-border);
  padding: 14px;
  margin-top: 12px;
  background: rgba(10,10,22,0.4);
}

.compose-form h3 {
  color: var(--bbs-yellow);
  margin-bottom: 10px;
}

.compose-form input,
.compose-form textarea {
  width: 100%;
  background: var(--bbs-input-bg);
  border: 1px solid var(--bbs-border);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 17px;
  padding: 8px 12px;
  outline: none;
  margin-bottom: 8px;
}

.compose-form input:focus,
.compose-form textarea:focus {
  border-color: var(--bbs-cyan);
  box-shadow: 0 0 5px rgba(0,255,255,0.2);
}

.compose-form textarea { min-height: 120px; resize: vertical; }

.bbs-btn {
  background: none;
  border: 1px solid var(--bbs-fg);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 17px;
  padding: 6px 22px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
}

.bbs-btn:hover {
  background: var(--bbs-highlight);
  text-shadow: 0 0 8px var(--bbs-glow);
}

.bbs-btn.cyan { border-color: var(--bbs-cyan); color: var(--bbs-cyan); }
.bbs-btn.cyan:hover { background: rgba(0,255,255,0.1); }
.bbs-btn.red { border-color: var(--bbs-red); color: var(--bbs-red); }
.bbs-btn.red:hover { background: rgba(255,51,51,0.1); }
.bbs-btn.yellow { border-color: var(--bbs-yellow); color: var(--bbs-yellow); }
.bbs-btn.yellow:hover { background: rgba(255,255,51,0.1); }
.bbs-btn.magenta { border-color: var(--bbs-magenta); color: var(--bbs-magenta); }
.bbs-btn.magenta:hover { background: rgba(255,51,255,0.1); }

/* ─── Legend of RETRO (LORD) ─── */
.lord-container {
  padding: 16px 24px;
  max-width: 900px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
}

.lord-hero {
  text-align: center;
  padding: 20px;
  border: 2px solid var(--bbs-red);
  margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(255,51,51,0.05), rgba(255,153,51,0.05));
  position: relative;
}

.lord-hero h1 {
  color: var(--bbs-red);
  font-size: 36px;
  text-shadow: 0 0 20px rgba(255,51,51,0.4);
}

.lord-hero .lord-subtitle {
  color: var(--bbs-yellow);
  font-size: 18px;
  margin-top: 4px;
}

.lord-hero .lord-retro-reward {
  color: var(--bbs-orange);
  font-size: 16px;
  margin-top: 8px;
  padding: 6px 16px;
  display: inline-block;
  border: 1px solid var(--bbs-orange);
  background: rgba(255,153,51,0.08);
}

.lord-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

@media (max-width: 600px) { .lord-stats-grid { grid-template-columns: 1fr; } }

.lord-card {
  border: 1px solid var(--bbs-border);
  padding: 12px 16px;
  border-radius: 2px;
  background: rgba(10,10,22,0.6);
}

.lord-card h3 {
  color: var(--bbs-yellow);
  margin-bottom: 8px;
  font-size: 18px;
  border-bottom: 1px dashed var(--bbs-border);
  padding-bottom: 4px;
}

.lord-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 17px;
}

.lord-stat-label { color: var(--bbs-dim); }
.lord-stat-val { color: var(--bbs-fg); }
.lord-stat-val.hp { color: var(--bbs-red); }
.lord-stat-val.gold { color: var(--bbs-yellow); }
.lord-stat-val.xp { color: var(--bbs-cyan); }
.lord-stat-val.level { color: var(--bbs-magenta); }
.lord-stat-val.retro { color: var(--bbs-orange); }

.lord-hp-bar {
  width: 100%;
  height: 16px;
  background: #1a1a2e;
  border: 1px solid var(--bbs-border);
  border-radius: 2px;
  margin: 4px 0;
  overflow: hidden;
}

.lord-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bbs-red), #ff6633);
  transition: width 0.3s;
}

.lord-xp-bar {
  width: 100%;
  height: 10px;
  background: #1a1a2e;
  border: 1px solid var(--bbs-border);
  border-radius: 2px;
  margin: 4px 0;
  overflow: hidden;
}

.lord-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bbs-cyan), var(--bbs-blue));
  transition: width 0.3s;
}

.lord-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  justify-content: center;
}

.lord-btn {
  background: none;
  border: 2px solid var(--bbs-fg);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 22px;
  padding: 10px 28px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
  position: relative;
}

.lord-btn:hover {
  background: var(--bbs-highlight);
  box-shadow: 0 0 20px rgba(51,255,51,0.2);
  transform: translateY(-1px);
}

.lord-btn:active { transform: translateY(0); }
.lord-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.lord-btn.fight { border-color: var(--bbs-red); color: var(--bbs-red); }
.lord-btn.fight:hover { background: rgba(255,51,51,0.1); box-shadow: 0 0 20px rgba(255,51,51,0.2); }
.lord-btn.heal { border-color: var(--bbs-blue); color: var(--bbs-blue); }
.lord-btn.heal:hover { background: rgba(51,153,255,0.1); }
.lord-btn.shop { border-color: var(--bbs-yellow); color: var(--bbs-yellow); }
.lord-btn.shop:hover { background: rgba(255,255,51,0.1); }
.lord-btn.pvp { border-color: var(--bbs-magenta); color: var(--bbs-magenta); }
.lord-btn.pvp:hover { background: rgba(255,51,255,0.1); }
.lord-btn.claim { border-color: var(--bbs-orange); color: var(--bbs-orange); }
.lord-btn.claim:hover { background: rgba(255,153,51,0.1); box-shadow: 0 0 20px rgba(255,153,51,0.3); }

.lord-log {
  border: 1px solid var(--bbs-border);
  padding: 12px 16px;
  min-height: 200px;
  max-height: 500px;
  overflow-y: auto;
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 16px;
  background: rgba(10,10,22,0.4);
}

.lord-log .log-encounter { color: var(--bbs-cyan); }
.lord-log .log-flavor { color: var(--bbs-dim); font-style: italic; }
.lord-log .log-player-attack { color: var(--bbs-fg); }
.lord-log .log-monster-attack { color: var(--bbs-red); }
.lord-log .log-victory { color: var(--bbs-fg); font-size: 20px; }
.lord-log .log-reward { color: var(--bbs-yellow); }
.lord-log .log-levelup { color: var(--bbs-magenta); font-size: 22px; text-shadow: 0 0 10px rgba(255,51,255,0.3); }
.lord-log .log-death { color: var(--bbs-red); font-size: 22px; }
.lord-log .log-retro-reward { color: var(--bbs-orange); font-size: 20px; text-shadow: 0 0 10px rgba(255,153,51,0.3); }

/* ── Narrative / Scene log styles ── */
.lord-log .log-narrator {
  color: #c8b8e8;
  font-style: italic;
  padding: 4px 0;
  line-height: 1.6;
  font-size: 16px;
}
.lord-log .log-scene {
  color: #6a6a8a;
  text-align: center;
  font-size: 14px;
  letter-spacing: 2px;
  padding: 2px 0;
}
.lord-log .log-scene:empty {
  padding: 4px 0;
}
.lord-log .log-special {
  color: var(--bbs-magenta);
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255,51,255,0.3);
}
.lord-log .log-companion {
  color: var(--bbs-green);
  font-style: italic;
  font-size: 14px;
}

.lord-shop-panel {
  border: 1px solid var(--bbs-yellow);
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(255,255,51,0.02);
}

.lord-shop-panel h3 { color: var(--bbs-yellow); margin-bottom: 10px; }

.shop-table {
  width: 100%;
  border-collapse: collapse;
}

.shop-table th {
  text-align: left;
  color: var(--bbs-yellow);
  font-size: 15px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--bbs-border);
}

.shop-table td {
  padding: 5px 8px;
  font-size: 16px;
  border-bottom: 1px solid rgba(26,58,26,0.5);
}

.shop-table .shop-buy {
  color: var(--bbs-fg);
  cursor: pointer;
  text-decoration: underline;
}

.shop-table .shop-buy:hover { color: var(--bbs-cyan); }
.shop-table .shop-buy.owned { color: var(--bbs-dim); cursor: default; text-decoration: none; }
.shop-table .shop-buy.cant-afford { color: var(--bbs-red); opacity: 0.5; }

/* LORD Leaderboard */
.lord-leaderboard { margin-top: 16px; }
.lord-leaderboard h3 { color: var(--bbs-yellow); margin-bottom: 10px; }

.lord-lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lord-lb-table th {
  text-align: left;
  color: var(--bbs-yellow);
  font-size: 15px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--bbs-border);
}

.lord-lb-table td {
  padding: 5px 8px;
  font-size: 16px;
  border-bottom: 1px solid rgba(26,58,26,0.3);
}

.lord-lb-table tr:first-child td { color: var(--bbs-yellow); }
.lord-lb-table tr:nth-child(2) td { color: var(--bbs-white); }
.lord-lb-table tr:nth-child(3) td { color: var(--bbs-orange); }

/* Events panel */
.lord-events {
  margin-top: 16px;
  border: 1px solid var(--bbs-border);
  padding: 12px;
  max-height: 250px;
  overflow-y: auto;
  background: rgba(10,10,22,0.4);
}

.lord-events h3 { color: var(--bbs-yellow); margin-bottom: 8px; }

.lord-event {
  padding: 3px 0;
  font-size: 16px;
  color: var(--bbs-dim);
  border-bottom: 1px solid rgba(26,58,26,0.3);
}

.lord-event .event-time { font-size: 13px; color: var(--bbs-dim); }

/* ─── Who's Online ─── */
.whos-online-container {
  padding: 16px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.whos-online-container h2 {
  color: var(--bbs-cyan);
  font-size: 26px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--bbs-border);
  padding-bottom: 6px;
}

.online-table {
  width: 100%;
  border-collapse: collapse;
}

.online-table th {
  text-align: left;
  color: var(--bbs-yellow);
  padding: 8px;
  border-bottom: 1px solid var(--bbs-border);
}

.online-table td {
  padding: 8px;
  border-bottom: 1px solid var(--bbs-border);
  font-size: 17px;
}

.online-table .ot-nick { color: var(--bbs-cyan); }
.online-table .ot-status { color: var(--bbs-fg); }
.online-table .ot-idle { color: var(--bbs-dim); }

/* ─── Profile / Settings (V2 Enhanced) ─── */
.profile-container {
  padding: 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── Profile Hero Banner ── */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(0,40,80,0.5), rgba(20,0,60,0.5));
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  margin-bottom: 16px;
}
.profile-hero-avatar {
  font-size: 56px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,255,0.06);
  border: 2px solid var(--bbs-cyan);
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-hero-info { flex: 1; min-width: 0; }
.profile-hero-name {
  font-size: 24px;
  font-weight: bold;
  color: var(--bbs-cyan);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-hero-tagline {
  font-size: 14px;
  color: var(--bbs-dim);
  font-style: italic;
  margin-bottom: 6px;
}
.profile-hero-address {
  font-size: 12px;
  color: var(--bbs-dim);
  font-family: monospace;
  word-break: break-all;
  opacity: 0.7;
  margin-bottom: 8px;
}
.profile-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: bold;
}
.profile-badge.chain { background: rgba(0,200,255,0.12); border: 1px solid rgba(0,200,255,0.3); color: #66ddff; }
.profile-badge.level { background: rgba(255,215,0,0.12); border: 1px solid rgba(255,215,0,0.3); color: #ffd700; }
.profile-badge.class { background: rgba(255,0,255,0.12); border: 1px solid rgba(255,0,255,0.3); color: #ff66ff; }

/* ── Stats Grid (top row cards) ── */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.profile-stat-card {
  text-align: center;
  padding: 14px 8px;
  background: rgba(10,10,22,0.6);
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
}
.psc-value {
  font-size: 22px;
  font-weight: bold;
  color: var(--bbs-cyan);
  margin-bottom: 4px;
}
.psc-label {
  font-size: 12px;
  color: var(--bbs-dim);
}

/* ── LORD Game Stats Grid ── */
.profile-lord-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 16px;
}

/* ── RETRO Economy Row ── */
.profile-retro-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.profile-retro-stat {
  text-align: center;
  padding: 12px 20px;
  min-width: 100px;
}
.retro-val {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: var(--bbs-fg);
  margin-bottom: 4px;
}
.retro-val.earned { color: var(--bbs-yellow); text-shadow: 0 0 8px rgba(255,215,0,0.3); }
.retro-val.spent { color: var(--bbs-red); }
.retro-label {
  font-size: 12px;
  color: var(--bbs-dim);
}

/* ── Wallet address mono style ── */
.profile-address-mono {
  font-family: monospace;
  font-size: 12px !important;
  word-break: break-all;
  line-height: 1.4;
}

/* ── Profile cards & rows (shared) ── */
.profile-card {
  border: 1px solid var(--bbs-border);
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(10,10,22,0.6);
  border-radius: 6px;
}
.profile-card h3 {
  color: var(--bbs-yellow);
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px solid var(--bbs-border);
  padding-bottom: 6px;
}
.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.profile-row label {
  color: var(--bbs-dim);
  width: 120px;
  flex-shrink: 0;
  font-size: 14px;
}
.profile-row input {
  flex: 1;
  background: var(--bbs-input-bg);
  border: 1px solid var(--bbs-border);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 15px;
  padding: 6px 10px;
  outline: none;
  border-radius: 4px;
}
.profile-row input:focus { border-color: var(--bbs-cyan); }

/* ── Profile Hero Title ── */
.profile-hero-title {
  font-size: 13px;
  color: var(--bbs-yellow);
  font-weight: bold;
  margin-bottom: 2px;
}

/* ── Rank Badge ── */
.profile-badge.rank {
  background: rgba(255,140,0,0.12);
  border: 1px solid rgba(255,140,0,0.3);
  color: #ff9944;
}
.profile-badge.custom {
  background: rgba(255,255,0,0.12);
  border: 1px solid rgba(255,255,0,0.3);
  color: #ffdd44;
}
.profile-badge.preseason {
  background: rgba(120, 200, 255, 0.14);
  border: 1px solid rgba(120, 200, 255, 0.34);
  color: #a6ecff;
}

/* ── Bio Section ── */
.profile-bio-section {
  padding: 12px 16px;
  background: rgba(10,10,22,0.4);
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  margin-bottom: 16px;
}
.profile-bio-text {
  font-size: 14px;
  color: var(--bbs-text);
  line-height: 1.5;
  margin: 0 0 8px 0;
}
.profile-social-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-social-link {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.2s;
}
.profile-social-link.twitter {
  background: rgba(29,161,242,0.1);
  border: 1px solid rgba(29,161,242,0.3);
  color: #1da1f2;
}
.profile-social-link.twitter:hover { background: rgba(29,161,242,0.2); }
.profile-social-link.discord {
  background: rgba(88,101,242,0.1);
  border: 1px solid rgba(88,101,242,0.3);
  color: #7289da;
}

/* ── Two-Column Layout ── */
.profile-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.profile-col { min-width: 0; }

/* ── Stats Grid 6 cols ── */
.profile-stats-grid {
  grid-template-columns: repeat(6, 1fr);
}

/* ── Profile Picture Selector ── */
.profile-pic-current {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-bottom: 12px;
  background: rgba(0,255,255,0.04);
  border-radius: 8px;
  border: 1px dashed var(--bbs-border);
}
.profile-pic-big {
  font-size: 48px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,255,255,0.06);
  border: 2px solid var(--bbs-cyan);
  border-radius: 50%;
}
.profile-pic-name {
  font-size: 14px;
  color: var(--bbs-dim);
}
.profile-pic-grid {}
.pic-category-label {
  font-size: 11px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 8px 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pic-category-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.profile-pic-option {
  width: 40px;
  height: 40px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,22,0.6);
  border: 2px solid var(--bbs-border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.profile-pic-option:hover {
  border-color: var(--bbs-cyan);
  background: rgba(0,255,255,0.08);
  transform: scale(1.1);
}
.profile-pic-option.pic-selected {
  border-color: var(--bbs-cyan);
  background: rgba(0,255,255,0.12);
  box-shadow: 0 0 8px rgba(0,255,255,0.3);
}
.profile-pic-option.pic-locked {
  opacity: 0.4;
  filter: grayscale(0.8);
}
.profile-pic-option.pic-locked:hover {
  opacity: 0.7;
}

/* ── Bio Textarea ── */
.profile-row textarea {
  flex: 1;
  background: var(--bbs-input-bg);
  border: 1px solid var(--bbs-border);
  color: var(--bbs-fg);
  font-family: var(--bbs-font);
  font-size: 14px;
  padding: 8px 10px;
  outline: none;
  border-radius: 4px;
  resize: vertical;
  min-height: 60px;
}
.profile-row textarea:focus { border-color: var(--bbs-cyan); }

/* ── Linked Wallets ── */
.profile-wallet-primary {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bbs-border);
}
.profile-no-wallets {
  text-align: center;
  color: var(--bbs-dim);
  padding: 10px;
  font-size: 13px;
  font-style: italic;
}
.profile-linked-wallet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  margin-bottom: 6px;
  background: rgba(10,10,22,0.4);
}
.plw-chain { font-size: 14px; flex-shrink: 0; }
.plw-address {
  font-family: monospace;
  font-size: 12px;
  color: var(--bbs-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plw-label {
  font-size: 12px;
  color: var(--bbs-dim);
  flex-shrink: 0;
}
.plw-unlink {
  flex-shrink: 0;
}
.bbs-btn-sm {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--bbs-border);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  color: var(--bbs-red);
  transition: all 0.15s;
}
.bbs-btn-sm:hover { background: rgba(255,0,0,0.15); }
.bbs-btn-sm.red { border-color: rgba(255,0,0,0.3); }

/* ── Link Wallet Form ── */
.profile-link-wallet-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bbs-border);
}
.profile-link-wallet-form .profile-row label { width: 80px; }

@media (max-width: 900px) {
  .profile-two-col { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .profile-hero { flex-direction: column; text-align: center; }
  .profile-hero-badges { justify-content: center; }
  .profile-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .profile-lord-grid { grid-template-columns: 1fr; }
  .profile-retro-grid { flex-direction: column; align-items: center; }
  .profile-hero-name { font-size: 20px; }
  .profile-container { padding: 8px 12px; }
}

/* ─── Connect Overlay ─── */
.bbs-connect-overlay {
  position: fixed;
  inset: 0;
  background: var(--bbs-bg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--bbs-font);
  text-align: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bbs-connect-overlay.hidden { display: none; }

.co-shell {
  width: min(1100px, 96vw);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: stretch;
  margin: auto;
  max-height: calc(100vh - 40px);
}

.co-panel {
  border: 1px solid rgba(0, 255, 255, 0.2);
  background: linear-gradient(180deg, rgba(1, 16, 26, 0.86), rgba(2, 12, 18, 0.92));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(0, 255, 255, 0.05);
  border-radius: 14px;
  padding: 18px 20px 16px;
  overflow: auto;
}

.co-side {
  border: 1px solid rgba(0, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.9), rgba(4, 8, 14, 0.92));
  border-radius: 14px;
  padding: 16px 14px;
  text-align: left;
}

.co-side h4 {
  margin: 0 0 10px;
  color: var(--bbs-cyan);
  font-size: 18px;
}

.co-side ul {
  margin: 0;
  padding-left: 18px;
  color: var(--bbs-dim);
  font-size: 14px;
  line-height: 1.45;
}

.co-side li + li {
  margin-top: 8px;
}

.bbs-connect-overlay .co-title {
  color: var(--bbs-cyan);
  font-size: 30px;
  margin-bottom: 10px;
  text-shadow: 0 0 20px rgba(0,255,255,0.4);
}

.bbs-connect-overlay .co-subtitle {
  color: var(--bbs-fg);
  font-size: 17px;
  margin-bottom: 12px;
}

.co-pill-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.co-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid rgba(0, 255, 255, 0.28);
  border-radius: 999px;
  color: var(--bbs-cyan);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(0, 255, 255, 0.08);
}

.bbs-connect-overlay .co-ascii {
  white-space: pre;
  font-size: 10px;
  line-height: 1.15;
  color: var(--bbs-cyan);
  margin-bottom: 12px;
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
  max-width: 100%;
  overflow: auto;
}

.co-connect-btn {
  background: none;
  border: 2px solid var(--bbs-cyan);
  color: var(--bbs-cyan);
  font-family: var(--bbs-font);
  font-size: 18px;
  padding: 10px 24px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s;
  margin: 6px;
}

.co-connect-btn:hover {
  background: rgba(0,255,255,0.1);
  box-shadow: 0 0 25px rgba(0,255,255,0.3);
  transform: scale(1.02);
}

.co-connect-btn.cosmos {
  border-color: var(--bbs-magenta);
  color: var(--bbs-magenta);
}

.co-connect-btn.cosmos:hover {
  background: rgba(255,51,255,0.1);
  box-shadow: 0 0 25px rgba(255,51,255,0.3);
}

.co-status {
  color: var(--bbs-dim);
  font-size: 15px;
  margin-top: 16px;
}

.co-divider {
  margin: 6px 0 4px;
  color: var(--bbs-dim);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.co-email-auth {
  width: min(530px, 100%);
  border: 1px solid rgba(0, 255, 255, 0.22);
  background: rgba(0, 10, 18, 0.6);
  border-radius: 10px;
  padding: 10px 12px 12px;
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
}

.co-email-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.co-email-tab {
  flex: 1;
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.25);
  color: var(--bbs-cyan);
  font-family: var(--bbs-font);
  font-size: 16px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 8px;
}

.co-email-tab.active {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: inset 0 0 12px rgba(0, 255, 255, 0.22);
}

.co-email-pane { display: none; }
.co-email-pane.active { display: block; }

.co-email-input {
  width: 100%;
  background: var(--bbs-input-bg);
  border: 1px solid rgba(0, 255, 255, 0.28);
  color: var(--bbs-cyan);
  font-family: var(--bbs-font);
  font-size: 16px;
  padding: 8px 10px;
  margin-bottom: 8px;
  outline: none;
  border-radius: 8px;
}

.co-email-input:focus {
  border-color: var(--bbs-cyan);
  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.14);
}

.co-connect-btn.email {
  width: 100%;
  font-size: 18px;
  margin: 2px 0 4px;
  border-color: var(--bbs-yellow);
  color: var(--bbs-yellow);
}

.co-connect-btn.email:hover {
  background: rgba(255, 255, 51, 0.1);
  box-shadow: 0 0 20px rgba(255, 255, 51, 0.22);
}

.co-email-note {
  color: var(--bbs-dim);
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}

.co-pass-strength {
  margin: -2px 0 8px;
  text-align: left;
}

.co-pass-meter {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 999px;
  overflow: hidden;
}

.co-pass-meter-fill {
  width: 0%;
  height: 100%;
  background: #666;
  transition: width 0.2s ease, background 0.2s ease;
}

.co-pass-meter-fill.lvl-0,
.co-pass-meter-fill.lvl-1 { background: #ff4d6d; }
.co-pass-meter-fill.lvl-2 { background: #ff9f43; }
.co-pass-meter-fill.lvl-3 { background: #ffd166; }
.co-pass-meter-fill.lvl-4 { background: #7ddc6d; }
.co-pass-meter-fill.lvl-5 { background: #00d4aa; }

.co-pass-meta {
  margin-top: 5px;
  font-size: 12px;
  color: var(--bbs-fg);
}

.co-pass-hint {
  margin-top: 3px;
  font-size: 12px;
  color: var(--bbs-dim);
}

.mnemonic-help {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 255, 51, 0.35);
  background: rgba(255, 255, 51, 0.05);
  color: var(--bbs-dim);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

/* ─── Wallet Panel ─── */
.wallet-panel-shell {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.wallet-identity-card {
  text-align: center;
}

.wallet-balance-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.wallet-balance-value {
  font-size: 32px;
  color: #00ff88;
  margin: 8px 0 6px;
  font-weight: bold;
}

.wallet-meta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.wallet-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 255, 255, 0.22);
  background: rgba(0, 255, 255, 0.08);
  font-size: 11px;
  color: var(--bbs-cyan);
}

.wallet-address-wrap {
  border: 1px solid rgba(0, 255, 255, 0.18);
  background: rgba(5, 14, 20, 0.8);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.wallet-address-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}

.wallet-address-full {
  font-family: monospace;
  font-size: 12px;
  color: #00ff88;
  word-break: break-all;
}

.wallet-actions-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.wallet-private-wrap {
  text-align: left;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid rgba(255, 68, 102, 0.35);
  background: rgba(48, 9, 18, 0.6);
  border-radius: 8px;
}

.wallet-private-title {
  font-size: 12px;
  color: #ff8899;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#walletPrivateKeyInput {
  width: 100%;
  background: #180912;
  color: #ffd9df;
  border: 1px solid rgba(255, 110, 140, 0.5);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: monospace;
  font-size: 12px;
  margin-bottom: 8px;
}

.wallet-private-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wallet-private-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: #f0b4bf;
  line-height: 1.45;
}

.wallet-manage-hint {
  font-size: 12px;
  color: #8fb8c0;
  margin-top: 8px;
}

.wallet-send-card h3,
.wallet-card-title {
  color: #00ccff;
  margin-bottom: 12px;
  font-size: 14px;
}

.wallet-send-card p {
  color: #666;
  font-size: 11px;
  margin-bottom: 12px;
}

.wallet-link-email-card p {
  color: #9cb7bf;
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}

.wallet-field {
  margin-bottom: 10px;
}

.wallet-field label {
  color: #888;
  font-size: 11px;
  display: block;
  margin-bottom: 4px;
}

.wallet-field input {
  width: 100%;
  padding: 8px;
  background: #111;
  color: #0f0;
  border: 1px solid #333;
  border-radius: 6px;
  font-family: monospace;
  font-size: 13px;
}

.wallet-link-hint {
  margin-top: 6px;
  color: #7fa1ad;
  font-size: 11px;
  line-height: 1.4;
}

.wallet-link-status {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  color: #88c6d1;
}

.wallet-link-status.error {
  color: #ff6a8a;
}

.wallet-inline-row {
  display: flex;
  gap: 8px;
}

.wallet-inline-row input {
  max-width: 220px;
}

.wallet-estimate {
  margin-bottom: 10px;
  padding: 8px;
  background: #0a0a14;
  border: 1px solid #222;
  border-radius: 4px;
  font-size: 11px;
  color: #888;
}

.wallet-send-btn {
  font-size: 14px;
  padding: 8px 24px;
}

.wallet-send-result {
  margin-top: 10px;
  font-size: 12px;
  display: none;
}

.wallet-tx-history {
  font-size: 12px;
  color: #888;
}

.wallet-help-card {
  margin-top: 16px;
  border-color: #444;
}

.wallet-help-card h3 {
  color: #ffcc00;
  margin-bottom: 8px;
  font-size: 13px;
}

.wallet-help-card p {
  color: #888;
  font-size: 11px;
  line-height: 1.6;
}

#totpSetupSecret {
  letter-spacing: 1.5px;
  text-align: center;
  font-size: 15px;
}

#totpSetupCode {
  text-align: center;
  letter-spacing: 2px;
}

#totpSetupOtpAuth {
  color: var(--bbs-cyan);
  text-decoration: underline;
  font-size: 14px;
}

@media (max-width: 980px) {
  .co-shell {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .co-side {
    order: -1;
  }
}

@media (max-width: 640px) {
  .co-panel {
    padding: 14px 12px 12px;
  }
  .co-connect-btn {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .bbs-connect-overlay .co-title {
    font-size: 24px;
  }
  .bbs-connect-overlay .co-subtitle {
    font-size: 14px;
  }
  .wallet-inline-row {
    flex-direction: column;
  }
  .wallet-inline-row input {
    max-width: 100%;
  }
  .wallet-actions-row .lord-btn,
  .wallet-private-actions .lord-btn {
    width: 100%;
  }
}

@media (max-height: 860px) {
  .bbs-connect-overlay .co-ascii {
    display: none;
  }
  .co-pill-row {
    display: none;
  }
  .co-side {
    display: none;
  }
  .co-shell {
    grid-template-columns: 1fr;
    max-height: none;
  }
}

/* ─── Nick Dialog ─── */
.nick-dialog {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bbs-bg);
  border: 2px solid var(--bbs-cyan);
  padding: 24px 32px;
  z-index: 600;
  text-align: center;
  min-width: 300px;
}

.nick-dialog.open { display: block; }

.nick-dialog h3 {
  color: var(--bbs-cyan);
  margin-bottom: 12px;
  font-size: 22px;
}

.nick-dialog input {
  background: var(--bbs-input-bg);
  border: 1px solid var(--bbs-cyan);
  color: var(--bbs-cyan);
  font-family: var(--bbs-font);
  font-size: 20px;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  margin-bottom: 12px;
}

.nick-dialog textarea {
  background: var(--bbs-input-bg);
  border: 1px solid var(--bbs-cyan);
  color: var(--bbs-cyan);
  font-family: var(--bbs-font);
  font-size: 16px;
  padding: 8px 12px;
  width: 100%;
  outline: none;
  margin-bottom: 12px;
  resize: vertical;
}

.nick-dialog button {
  background: none;
  border: 1px solid var(--bbs-cyan);
  color: var(--bbs-cyan);
  font-family: var(--bbs-font);
  font-size: 18px;
  padding: 6px 20px;
  cursor: pointer;
  margin: 0 6px;
}

/* ─── Toast notifications ─── */
.bbs-toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bbs-toast {
  padding: 10px 18px;
  font-family: var(--bbs-font);
  font-size: 17px;
  border-radius: 2px;
  animation: toast-in 0.25s ease-out;
  max-width: 400px;
}

.bbs-toast.info { background: rgba(0,255,255,0.15); border: 1px solid var(--bbs-cyan); color: var(--bbs-cyan); }
.bbs-toast.success { background: rgba(51,255,51,0.15); border: 1px solid var(--bbs-fg); color: var(--bbs-fg); }
.bbs-toast.error { background: rgba(255,51,51,0.15); border: 1px solid var(--bbs-red); color: var(--bbs-red); }
.bbs-toast.warning { background: rgba(255,255,51,0.15); border: 1px solid var(--bbs-yellow); color: var(--bbs-yellow); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Responsive ─── */
@media (max-width: 600px) {
  .bbs-ascii-banner { font-size: 8px; }
  .bbs-nav-btn { font-size: 17px; padding: 8px 12px; }
  .lord-btn { font-size: 18px; padding: 8px 18px; }
}

/* ── RETRO Reward Styles ── */
.log-retro-reward {
  color: #ffd700;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  padding: 2px 0;
}
.log-achievement {
  color: #ff00ff;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 0, 255, 0.4);
  padding: 4px 0;
  border-left: 3px solid #ff00ff;
  padding-left: 8px;
  margin: 4px 0;
}
.toast.achievement {
  background: linear-gradient(135deg, #1a0033, #330066);
  border-color: #ff00ff;
  color: #ff99ff;
}

/* ═══════════════════════════════════════════════════════════════════
   LORD V2 — CSS Additions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Class Selection Banner ── */
.lord-class-banner {
  background: linear-gradient(135deg, #0a0020, #1a0040);
  border: 2px solid var(--bbs-magenta, #ff00ff);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  display: none;
}
.lord-class-banner h3 { color: var(--bbs-magenta, #ff00ff); margin: 0 0 12px 0; text-align: center; }
.lord-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.lord-class-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--bbs-border, #333);
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.lord-class-card:hover {
  border-color: var(--bbs-magenta, #ff00ff);
  background: rgba(255,0,255,0.08);
  transform: translateY(-2px);
}
.lcc-emoji { font-size: 28px; margin-bottom: 4px; }
.lcc-name { font-weight: bold; color: var(--bbs-cyan, #00ffff); font-size: 14px; }

/* ── RETRO & Buffs Bar ── */
.lord-retro-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.lord-retro-bar .retro-amount {
  font-size: 18px;
  font-weight: bold;
  color: var(--bbs-yellow, #ffd700);
}
.lord-retro-bar .contract-balance {
  font-size: 12px;
  color: var(--bbs-dim, #666);
}
.lord-buff-display {
  font-size: 13px;
  color: var(--bbs-green, #00ff00);
  font-weight: bold;
}

/* ── Subpanels (shop, bank, pvp, store, wager, stats) ── */
.lord-subpanel {
  display: none;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--bbs-border, #333);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  max-height: 500px;
  overflow-y: auto;
}
.lord-subpanel h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--bbs-cyan, #00ffff);
}

/* ── Bank Panel ── */
.lord-bank-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.lord-bank-actions .lord-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bbs-border, #333);
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--bbs-fg, #ccc);
  font-family: inherit;
  font-size: 14px;
  width: 100px;
}
.lord-bank-actions .lord-input:focus {
  border-color: var(--bbs-cyan, #00ffff);
  outline: none;
}
.lord-bank-info {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}
.lord-bank-info span { color: var(--bbs-yellow, #ffd700); font-weight: bold; }

/* ── Wager Arena ── */
.lord-wager-create {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.lord-wager-create .lord-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--bbs-border, #333);
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--bbs-fg, #ccc);
  font-family: inherit;
  font-size: 14px;
  width: 100px;
}
.lord-wager-create .lord-input:focus {
  border-color: var(--bbs-yellow, #ffd700);
  outline: none;
}
.lord-wager-info {
  font-size: 12px;
  color: var(--bbs-dim, #666);
  margin-bottom: 8px;
}

/* ── Stats Panel ── */
.lord-stats-grid-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.lord-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bbs-border, #333);
  border-radius: 6px;
  padding: 12px;
}
.lord-card h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--bbs-cyan, #00ffff);
  border-bottom: 1px solid var(--bbs-border, #333);
  padding-bottom: 6px;
}
.lord-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
}
.lord-stat-label { color: var(--bbs-dim, #999); }
.lord-stat-val { color: var(--bbs-fg, #ccc); font-weight: bold; }

/* ── V2 Action Button Colors ── */
.lord-btn.potion { background: rgba(0,200,100,0.15); border-color: #00c864; color: #00ff7f; }
.lord-btn.potion:hover { background: rgba(0,200,100,0.3); }
.lord-btn.bank { background: rgba(200,180,0,0.15); border-color: #c8b400; color: #ffd700; }
.lord-btn.bank:hover { background: rgba(200,180,0,0.3); }
.lord-btn.flirt { background: rgba(255,100,150,0.15); border-color: #ff6496; color: #ff99b9; }
.lord-btn.flirt:hover { background: rgba(255,100,150,0.3); }
.lord-btn.retro-store { background: rgba(255,215,0,0.15); border-color: #ffd700; color: #ffe066; }
.lord-btn.retro-store:hover { background: rgba(255,215,0,0.3); }
.lord-btn.wager { background: rgba(200,50,255,0.15); border-color: #c832ff; color: #d96fff; }
.lord-btn.wager:hover { background: rgba(200,50,255,0.3); }
.lord-btn.stats { background: rgba(100,150,255,0.15); border-color: #6496ff; color: #99b9ff; }
.lord-btn.stats:hover { background: rgba(100,150,255,0.3); }

/* ── Character Card Expanded Stats ── */
.lord-char-extra {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 4px 8px;
  font-size: 12px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--bbs-border, #333);
}
.lord-char-extra .stat-mini {
  display: flex;
  justify-content: space-between;
}
.lord-char-extra .stat-mini .stat-label { color: var(--bbs-dim, #999); }
.lord-char-extra .stat-mini .stat-value { color: var(--bbs-fg, #ccc); font-weight: bold; }

/* ── Shop Table (shared gold + RETRO store) ── */
.shop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.shop-table th {
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid var(--bbs-border, #333);
  color: var(--bbs-dim, #999);
  font-size: 12px;
}
.shop-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.shop-buy {
  color: var(--bbs-green, #00ff00);
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}
.shop-buy.owned { color: var(--bbs-dim, #666); }
.shop-buy.cant-afford { color: var(--bbs-red, #ff4444); opacity: 0.5; }

/* ── Forest Event / Battle Log Extras ── */
.log-flavor { color: #b8a0d0; font-style: italic; padding: 2px 0; }
.log-encounter { color: var(--bbs-yellow, #ffd700); font-weight: bold; padding: 4px 0; }
.log-levelup { color: #00ff00; font-weight: bold; font-size: 15px; text-shadow: 0 0 10px rgba(0,255,0,0.5); padding: 4px 0; }

/* ── LORD action buttons grid ── */
.lord-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.lord-actions .bbs-btn {
  font-size: 14px;
  padding: 6px 12px;
  min-width: 0;
  white-space: nowrap;
}

/* ── Responsive adjustments ── */
@media (max-width: 600px) {
  .lord-class-grid { grid-template-columns: repeat(2, 1fr); }
  .lord-stats-grid-detail { grid-template-columns: 1fr; }
  .lord-card[style*="grid-column: span 2"] { grid-column: span 1 !important; }
  .lord-actions .bbs-btn { font-size: 12px; padding: 4px 8px; }
  .lord-retro-bar { flex-direction: column; gap: 6px; }
}

/* ── Chat History Messages ── */
.chat-msg.history {
  opacity: 0.75;
}
.chat-msg.history .msg-time {
  color: var(--bbs-dim);
}

/* ── Small inline avatar for Who's Online table ── */
.online-avatar-sm {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Inventory & Titles (added by inventory upgrade) ── */
.lord-btn.inventory { background: linear-gradient(135deg, #6a4c93, #9b59b6); }
.lord-btn.inventory:hover { background: linear-gradient(135deg, #7d5ba6, #a86cc1); }
.lord-btn.titles { background: linear-gradient(135deg, #c0a030, #daa520); }
.lord-btn.titles:hover { background: linear-gradient(135deg, #d4b440, #e8b830); }
.lord-btn.daily { background: linear-gradient(135deg, #e8822a, #f39c12); }
.lord-btn.daily:hover { background: linear-gradient(135deg, #f09030, #f5a623); }
.inv-equip-btn { background: var(--bbs-green); color: #000; border: none; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; }
.inv-equip-btn:hover { filter: brightness(1.2); }
.inv-sell-btn { background: var(--bbs-red); color: #fff; border: none; padding: 3px 8px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 4px; }
.inv-sell-btn:hover { filter: brightness(1.2); }
.inv-equipped { color: var(--bbs-yellow); font-weight: bold; }
.title-card { display: inline-block; background: rgba(255,255,255,0.05); border: 1px solid var(--bbs-dim); border-radius: 6px; padding: 6px 12px; margin: 4px; cursor: pointer; transition: all 0.2s; }
.title-card:hover { border-color: var(--bbs-yellow); background: rgba(255,215,0,0.1); }
.title-card.active { border-color: var(--bbs-yellow); background: rgba(255,215,0,0.15); box-shadow: 0 0 8px rgba(255,215,0,0.3); }
.title-card.locked { opacity: 0.4; cursor: default; }
.achievement-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #2d1f4e, #1a1a2e); border: 2px solid var(--bbs-yellow); border-radius: 12px; padding: 16px 24px; z-index: 10000; animation: achievePop 0.5s ease; text-align: center; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
@keyframes achievePop { 0% { transform: translateX(-50%) scale(0.5); opacity:0; } 50% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1); opacity:1; } }

/* ═══════════════════════════════════════════════════════════════
   V5: Grouped Action Buttons + How to Play + Active States + Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Grouped action layout ── */
.lord-actions-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  justify-content: center;
}

.lord-action-group {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 8px 10px 10px;
  min-width: 0;
  flex: 1 1 200px;
  max-width: 320px;
}

.lord-action-group-label {
  font-size: 11px;
  color: var(--bbs-dim);
  text-align: center;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.lord-action-group-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.lord-action-group-btns .lord-btn {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 6px;
  border-width: 1px;
  white-space: nowrap;
}

/* ── Active button state (panel open) ── */
.lord-btn.active {
  background: var(--bbs-highlight, rgba(51,255,51,0.15)) !important;
  box-shadow: 0 0 12px rgba(51,255,51,0.25), inset 0 0 20px rgba(51,255,51,0.05) !important;
  transform: translateY(0);
}
.lord-btn.fight.active { background: rgba(255,51,51,0.2) !important; box-shadow: 0 0 12px rgba(255,51,51,0.3), inset 0 0 20px rgba(255,51,51,0.05) !important; }
.lord-btn.shop.active { background: rgba(255,255,51,0.15) !important; box-shadow: 0 0 12px rgba(255,255,51,0.3), inset 0 0 20px rgba(255,255,51,0.03) !important; }
.lord-btn.pvp.active { background: rgba(255,51,255,0.15) !important; box-shadow: 0 0 12px rgba(255,51,255,0.3), inset 0 0 20px rgba(255,51,255,0.05) !important; }
.lord-btn.claim.active { background: rgba(255,153,51,0.15) !important; box-shadow: 0 0 12px rgba(255,153,51,0.3), inset 0 0 20px rgba(255,153,51,0.05) !important; }
.lord-btn.bank.active { background: rgba(0,255,255,0.12) !important; box-shadow: 0 0 12px rgba(0,255,255,0.3), inset 0 0 20px rgba(0,255,255,0.05) !important; }
.lord-btn.heal.active { background: rgba(51,153,255,0.15) !important; box-shadow: 0 0 12px rgba(51,153,255,0.3) !important; }
.lord-btn.discord.active { background: rgba(88,101,242,0.2) !important; box-shadow: 0 0 12px rgba(88,101,242,0.3) !important; }
.lord-btn.training.active { background: rgba(0,255,255,0.12) !important; box-shadow: 0 0 12px rgba(0,255,255,0.25) !important; }
.lord-btn.retro-store.active { background: rgba(255,153,51,0.15) !important; box-shadow: 0 0 12px rgba(255,153,51,0.3) !important; }
.lord-btn.wager.active { background: rgba(255,51,255,0.12) !important; box-shadow: 0 0 12px rgba(255,51,255,0.25) !important; }
.lord-btn.inventory.active { background: rgba(51,255,51,0.12) !important; box-shadow: 0 0 12px rgba(51,255,51,0.25) !important; }
.lord-btn.titles.active { background: rgba(255,215,0,0.12) !important; box-shadow: 0 0 12px rgba(255,215,0,0.25) !important; }
.lord-btn.quests.active { background: rgba(255,255,51,0.12) !important; box-shadow: 0 0 12px rgba(255,255,51,0.25) !important; }
.lord-btn.stats.active { background: rgba(0,255,255,0.12) !important; box-shadow: 0 0 12px rgba(0,255,255,0.25) !important; }
.lord-btn.daily.active { background: rgba(255,255,51,0.12) !important; box-shadow: 0 0 12px rgba(255,255,51,0.25) !important; }

/* ── Subpanel polish ── */
.lord-subpanel {
  display: none;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  max-height: 600px;
  overflow-y: auto;
  animation: panelSlide 0.2s ease-out;
}
@keyframes panelSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── How to Play collapsible ── */
.lord-howto {
  margin-bottom: 14px;
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
}

.lord-howto-summary {
  padding: 12px 16px;
  font-size: 15px;
  font-weight: bold;
  color: var(--bbs-yellow);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s;
  user-select: none;
}
.lord-howto-summary::-webkit-details-marker { display: none; }
.lord-howto-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.2s;
  font-size: 14px;
}
.lord-howto[open] > .lord-howto-summary::before { transform: rotate(90deg); }
.lord-howto-summary:hover { background: rgba(255,215,0,0.06); }

.lord-howto-body {
  padding: 0 16px 16px;
  animation: panelSlide 0.25s ease-out;
}

.howto-section {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.howto-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.howto-section h4 {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--bbs-cyan);
}
.howto-section p, .howto-section li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--bbs-fg);
  margin: 4px 0;
}
.howto-section ol, .howto-section ul {
  margin: 6px 0;
  padding-left: 22px;
}
.howto-section strong { color: var(--bbs-yellow); }
.howto-section em { color: var(--bbs-dim); }

/* rewards table */
.howto-rewards-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}
.howto-rewards-table th {
  text-align: left;
  color: var(--bbs-yellow);
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,215,0,0.2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.howto-rewards-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--bbs-fg);
}
.howto-rewards-table tr:hover td { background: rgba(255,255,255,0.02); }
.howto-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--bbs-dim);
  padding: 8px 12px;
  background: rgba(255,153,51,0.08);
  border-left: 3px solid var(--bbs-orange);
  border-radius: 0 6px 6px 0;
}

/* locations grid */
.howto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.howto-loc {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: var(--bbs-fg);
  line-height: 1.5;
}
.howto-loc span {
  display: block;
  font-size: 22px;
  margin-bottom: 4px;
}
.howto-loc strong { color: var(--bbs-cyan); font-size: 13px; }

/* ── Battle log polish ── */
.lord-log {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
  min-height: 160px;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
  scroll-behavior: smooth;
}

/* ── Hero section polish ── */
.lord-hero {
  text-align: center;
  padding: 18px 16px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(255,215,0,0.04) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,215,0,0.1);
  border-radius: 10px 10px 0 0;
}

/* ── Stats card polish ── */
.lord-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px;
}

/* ── RETRO bar polish ── */
.lord-retro-bar {
  background: rgba(255,153,51,0.06);
  border: 1px solid rgba(255,153,51,0.15);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 10px;
}

/* ── Forest fights bar ── */
.lord-fights-bar {
  text-align: center;
  font-size: 13px;
  color: var(--bbs-dim);
  margin-bottom: 10px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}

/* ── Mobile responsive for groups ── */
@media (max-width: 600px) {
  .lord-action-group { flex: 1 1 100%; max-width: 100%; }
  .lord-action-group-btns .lord-btn { font-size: 13px; padding: 5px 10px; }
  .howto-grid { grid-template-columns: 1fr 1fr; }
  .howto-loc span { font-size: 18px; }
}

/* ── Leaderboard polish ── */
.lord-leaderboard {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px;
  margin-top: 16px;
}

.lord-events {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
}

/* ════════════════════════════════════════════════
   V6: Terminal-First Layout + HUD + Info Tabs
   ════════════════════════════════════════════════ */

/* ── Compact HUD Bar ── */
.lord-hud {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  font-family: var(--bbs-font);
}

.hud-stat {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hud-stat:last-of-type { border-right: none; }

.hud-label {
  color: var(--bbs-dim);
  font-size: 11px;
  text-transform: uppercase;
}

.hud-val {
  color: var(--bbs-fg);
  font-weight: bold;
  font-size: 15px;
}
.hud-val.level { color: var(--bbs-magenta); }
.hud-val.hp { color: var(--bbs-red); }
.hud-val.gold { color: var(--bbs-yellow); }
.hud-val.retro { color: var(--bbs-orange, #ff9933); }

.hud-hp {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 120px;
  max-width: 200px;
  padding: 2px 6px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hud-hp .hud-label { color: var(--bbs-dim); font-size: 11px; }
.hud-hp .hud-val { font-size: 13px; white-space: nowrap; }

.lord-hp-bar.hud-bar {
  flex: 1;
  height: 8px;
  min-width: 40px;
  margin: 0;
  border-radius: 4px;
}

.hud-retro {
  background: rgba(255,153,51,0.08);
  border-radius: 4px;
  border: 1px solid rgba(255,153,51,0.2) !important;
  border-right: 1px solid rgba(255,153,51,0.2) !important;
}

.hud-fights {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--bbs-dim);
  margin-left: auto;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.08);
}
.hud-fights span span { color: var(--bbs-fg); font-weight: bold; }

/* ── Terminal Window ── */
.lord-terminal {
  border: 2px solid var(--bbs-green, #33ff33);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(51,255,51,0.1), inset 0 0 40px rgba(0,0,0,0.4);
}

.lord-terminal-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #2a2a3a, #1a1a2a);
  border-bottom: 1px solid var(--bbs-border);
}

.term-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.term-dot.red { background: #ff5f57; }
.term-dot.yellow { background: #febc2e; }
.term-dot.green { background: #28c840; }

.term-title {
  flex: 1;
  text-align: center;
  color: var(--bbs-dim);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lord-terminal .lord-log {
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  min-height: 300px;
  max-height: 500px;
  background: rgba(0,5,0,0.5);
  font-family: 'Courier New', 'Lucida Console', monospace;
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 16px;
}

/* ANSI art styling inside the terminal */
.lord-log .ansi-art {
  color: var(--bbs-green, #33ff33);
  white-space: pre;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
  display: block;
  padding: 6px 0;
}
.lord-log .ansi-art.red { color: var(--bbs-red); }
.lord-log .ansi-art.yellow { color: var(--bbs-yellow); }
.lord-log .ansi-art.cyan { color: var(--bbs-cyan); }
.lord-log .ansi-art.magenta { color: var(--bbs-magenta); }
.lord-log .ansi-art.blue { color: var(--bbs-blue, #3399ff); }

/* Scanline effect on terminal */
.lord-terminal .lord-log::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
}
.lord-terminal .lord-log { position: relative; }

/* ── Info Tabs ── */
.lord-info-tabs {
  display: flex;
  gap: 4px;
  margin: 12px 0 0;
  padding: 0;
  border-bottom: 2px solid var(--bbs-border);
}

.lord-info-tab {
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--bbs-dim);
  font-family: var(--bbs-font);
  font-size: 13px;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  transition: all 0.15s;
}
.lord-info-tab:hover {
  color: var(--bbs-fg);
  background: rgba(255,255,255,0.03);
}
.lord-info-tab.active {
  color: var(--bbs-cyan);
  background: rgba(0,255,255,0.06);
  border-color: var(--bbs-border);
  border-bottom: 2px solid var(--bbs-bg, #0a0a16);
  margin-bottom: -2px;
}

.lord-info-panel {
  background: rgba(10,10,22,0.5);
  border: 1px solid var(--bbs-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  animation: tabFade 0.2s ease;
}

@keyframes tabFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.04);
}

.info-label {
  color: var(--bbs-dim);
  font-size: 12px;
}

.info-val {
  color: var(--bbs-fg);
  font-weight: bold;
  font-size: 13px;
}
.info-val.level { color: var(--bbs-magenta); }
.info-val.hp { color: var(--bbs-red); }
.info-val.gold { color: var(--bbs-yellow); }
.info-val.xp { color: var(--bbs-cyan); }
.info-val.retro { color: var(--bbs-orange, #ff9933); }

/* ── Mobile responsive ── */
@media (max-width: 600px) {
  .lord-hud {
    gap: 4px;
    padding: 6px 8px;
    font-size: 12px;
  }
  .hud-stat { padding: 1px 4px; }
  .hud-val { font-size: 13px; }
  .hud-hp { min-width: 80px; }
  .lord-terminal .lord-log {
    min-height: 200px;
    max-height: 350px;
    font-size: 12px;
  }
  .lord-log .ansi-art { font-size: 8px; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .lord-info-tab { font-size: 11px; padding: 4px 8px; }
}

/* ═══ V7: Profile Pics Site-Wide ═══ */
.hud-avatar {
  font-size: 18px;
  padding: 0 6px 0 4px !important;
}
.hud-avatar .hud-val {
  font-size: 18px;
  line-height: 1;
}
.chat-avatar {
  font-size: 14px;
  margin-right: 2px;
}
.lb-avatar {
  font-size: 14px;
  margin-right: 3px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   V6: Profile Modal
   ═══════════════════════════════════════════════════════════════ */
.profile-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.75); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.profile-modal {
  background: var(--bbs-bg, #0a0a1a); border: 2px solid var(--bbs-green, #33ff33);
  border-radius: 8px; max-width: 480px; width: 90%; max-height: 85vh;
  overflow-y: auto; padding: 20px; position: relative;
  box-shadow: 0 0 30px rgba(51,255,51,0.15), inset 0 0 60px rgba(0,0,0,0.5);
  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
}
.profile-modal-close {
  position: absolute; top: 8px; right: 12px; background: none;
  border: none; color: var(--bbs-dim, #666); font-size: 24px;
  cursor: pointer; line-height: 1;
}
.profile-modal-close:hover { color: #f44; }
.pm-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 12px;
}
.pm-avatar {
  font-size: 48px; width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(51,255,51,0.08); border-radius: 8px;
  border: 1px solid var(--bbs-border, #1a3a1a);
}
.pm-name { color: var(--bbs-cyan, #00ffff); font-size: 20px; font-weight: bold; }
.pm-title { color: var(--bbs-yellow, #ffff00); font-size: 13px; }
.pm-tagline { color: var(--bbs-dim, #666); font-size: 12px; font-style: italic; }
.pm-address {
  color: var(--bbs-dim, #666); font-size: 11px; word-break: break-all;
  margin-bottom: 4px; padding: 4px 8px; background: rgba(0,0,0,0.3);
  border-radius: 4px;
}
.pm-chain { color: var(--bbs-dim, #666); font-size: 11px; margin-bottom: 10px; }
.pm-bio {
  color: var(--bbs-text, #aaa); font-size: 13px; margin-bottom: 12px;
  padding: 8px; background: rgba(0,0,0,0.2); border-radius: 4px;
  border-left: 2px solid var(--bbs-green, #33ff33);
  white-space: pre-wrap;
}
.pm-bio:empty { display: none; }
.pm-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  margin-bottom: 12px; padding: 8px;
  background: rgba(0,0,0,0.2); border-radius: 4px;
}
.pm-stat { display: flex; justify-content: space-between; }
.pm-stat-label { color: var(--bbs-dim, #666); font-size: 12px; }
.pm-stat-val { color: var(--bbs-green, #33ff33); font-size: 12px; font-weight: bold; }
.pm-wallets {
  margin-bottom: 8px; font-size: 12px; color: var(--bbs-dim, #666);
}
.pm-wallets:empty { display: none; }
.pm-wallets .pw-item {
  padding: 2px 0; display: flex; align-items: center; gap: 6px;
}
.pm-wallets .pw-chain { color: var(--bbs-cyan, #00ffff); font-size: 11px; }
.pm-wallets .pw-addr { color: var(--bbs-dim, #666); font-size: 10px; word-break: break-all; }
.pm-social { margin-bottom: 10px; font-size: 12px; }
.pm-social:empty { display: none; }
.pm-social a { color: var(--bbs-cyan, #00ffff); text-decoration: none; margin-right: 12px; }
.pm-social a:hover { text-decoration: underline; }
.pm-actions {
  display: flex; gap: 8px; margin-top: 12px;
  border-top: 1px solid var(--bbs-border, #1a3a1a); padding-top: 12px;
}
.pm-action-btn {
  flex: 1; padding: 8px 12px; background: rgba(51,255,51,0.08);
  border: 1px solid var(--bbs-green, #33ff33); color: var(--bbs-green, #33ff33);
  cursor: pointer; border-radius: 4px; font-family: inherit; font-size: 13px;
  transition: background 0.15s;
}
.pm-action-btn:hover { background: rgba(51,255,51,0.18); }
.pm-action-btn.pm-pvp { border-color: #f80; color: #f80; background: rgba(255,136,0,0.08); }
.pm-action-btn.pm-pvp:hover { background: rgba(255,136,0,0.18); }

/* ═══════════════════════════════════════════════════════════════
   V6: DM Panel (floating)
   ═══════════════════════════════════════════════════════════════ */
.dm-panel {
  position: fixed; bottom: 60px; right: 20px;
  width: 360px; max-height: 420px;
  background: var(--bbs-bg, #0a0a1a); border: 2px solid var(--bbs-magenta, #ff00ff);
  border-radius: 8px; z-index: 9998;
  display: flex; flex-direction: column;
  box-shadow: 0 0 20px rgba(255,0,255,0.2);
  font-family: 'IBM Plex Mono', 'Fira Code', monospace;
}
.dm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--bbs-border, #1a3a1a);
  color: var(--bbs-magenta, #ff00ff); font-weight: bold; font-size: 14px;
}
.dm-close {
  background: none; border: none; color: var(--bbs-dim, #666);
  font-size: 20px; cursor: pointer; line-height: 1;
}
.dm-close:hover { color: #f44; }
.dm-messages {
  flex: 1; overflow-y: auto; padding: 8px 12px;
  min-height: 200px; max-height: 300px;
  font-size: 13px; color: var(--bbs-text, #aaa);
}
.dm-msg {
  margin-bottom: 6px; word-wrap: break-word;
}
.dm-msg .dm-from { color: var(--bbs-magenta, #ff00ff); font-weight: bold; }
.dm-msg .dm-to { color: var(--bbs-cyan, #00ffff); font-weight: bold; }
.dm-msg .dm-time { color: var(--bbs-dim, #666); font-size: 11px; margin-right: 6px; }
.dm-msg .dm-text { color: var(--bbs-text, #aaa); }
.dm-msg.dm-self .dm-from { color: var(--bbs-cyan, #00ffff); }
.dm-input-bar {
  display: flex; padding: 6px 8px;
  border-top: 1px solid var(--bbs-border, #1a3a1a);
}
.dm-input {
  flex: 1; background: rgba(0,0,0,0.3); border: 1px solid var(--bbs-border, #1a3a1a);
  color: var(--bbs-green, #33ff33); padding: 6px 10px;
  font-family: inherit; font-size: 13px; border-radius: 4px; outline: none;
}
.dm-input:focus { border-color: var(--bbs-magenta, #ff00ff); }

/* V6: Clickable nicks in chat */
.msg-nick.clickable { cursor: pointer; }
.msg-nick.clickable:hover { text-decoration: underline; color: var(--bbs-yellow, #ffff00); }

/* V6: Clickable user entries */
.user-entry.clickable { cursor: pointer; }
.user-entry.clickable:hover { background: var(--bbs-highlight, rgba(51,255,51,0.1)); }

/* V6: Clickable who's online rows */
.online-table tr.clickable { cursor: pointer; }
.online-table tr.clickable:hover { background: var(--bbs-highlight, rgba(51,255,51,0.08)); }

/* V6: DM message in chat */
.chat-msg.dm-inline {
  background: rgba(255,0,255,0.06);
  border-left: 2px solid var(--bbs-magenta, #ff00ff);
  padding-left: 8px; margin-left: 4px;
}
.chat-msg.dm-inline .msg-nick { color: var(--bbs-magenta, #ff00ff); }

/* V6: Auto-resolve toggle */
.lord-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; font-size: 13px;
}
.lord-setting-row label { color: var(--bbs-text, #aaa); cursor: pointer; }
.lord-toggle {
  position: relative; width: 40px; height: 20px;
  background: #333; border-radius: 10px; cursor: pointer;
  transition: background 0.2s;
}
.lord-toggle.active { background: var(--bbs-green, #33ff33); }
.lord-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; background: #fff;
  border-radius: 50%; transition: transform 0.2s;
}
.lord-toggle.active::after { transform: translateX(20px); }

@media (max-width: 600px) {
  .profile-modal { max-width: 95%; padding: 14px; }
  .dm-panel { width: calc(100% - 20px); right: 10px; bottom: 50px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   V9: Admin Panel Styles
   ═══════════════════════════════════════════════════════════════════════ */

.admin-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1000px;
}

.admin-card {
  background: var(--bbs-bg);
  border: 1px solid var(--bbs-green);
  border-radius: 8px;
  padding: 16px;
}

.admin-card h3 {
  color: var(--bbs-cyan);
  margin: 0 0 12px;
  font-size: 14px;
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.admin-card-header h3 {
  margin: 0;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.admin-stat {
  background: rgba(0, 255, 0, 0.05);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.admin-label {
  color: var(--bbs-dim);
  font-size: 11px;
  text-transform: uppercase;
}

.admin-val {
  color: var(--bbs-green);
  font-size: 16px;
  font-weight: bold;
  margin-top: 4px;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.admin-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--bbs-dim);
  font-size: 12px;
}
.admin-select,
.admin-input-small {
  min-width: 110px;
  padding: 4px 8px;
  border: 1px solid rgba(0,255,0,0.35);
  border-radius: 6px;
  background: rgba(0,16,0,0.7);
  color: var(--bbs-green);
  font-family: inherit;
  font-size: 12px;
}
.admin-input-small {
  min-width: 130px;
}
.admin-liveops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 8px 0;
}
.admin-liveops-toggle {
  border: 1px solid rgba(0,255,0,0.2);
  border-radius: 8px;
  padding: 8px;
  background: rgba(0,255,0,0.05);
  color: var(--bbs-green);
}
.admin-liveops-toggle input {
  margin-right: 6px;
}
.admin-note {
  font-size: 12px;
  color: var(--bbs-dim);
  margin-bottom: 8px;
}
.admin-scroll {
  border: 1px solid rgba(0,255,0,0.2);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  padding: 8px;
  margin-top: 8px;
  max-height: 180px;
  overflow: auto;
  font-size: 12px;
}
.admin-scroll-row {
  padding: 5px 0;
  border-bottom: 1px solid rgba(0,255,0,0.14);
}
.admin-scroll-row:last-child {
  border-bottom: 0;
}
.admin-row-inline-btn {
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(0,255,255,0.25);
  background: rgba(0,255,255,0.08);
  color: var(--bbs-cyan);
  cursor: pointer;
  font-size: 10px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th {
  background: rgba(0, 255, 0, 0.1);
  color: var(--bbs-cyan);
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--bbs-green);
  white-space: nowrap;
}

.admin-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.1);
  color: var(--bbs-green);
}

.admin-table tr:hover td {
  background: rgba(0, 255, 0, 0.05);
}

.admin-user-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.admin-tiny-btn {
  padding: 2px 6px;
  font-size: 10px;
  border: 1px solid var(--bbs-green);
  background: transparent;
  color: var(--bbs-green);
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.admin-tiny-btn:hover {
  background: rgba(0, 255, 0, 0.2);
}

.admin-tiny-btn.gold {
  border-color: var(--bbs-yellow);
  color: var(--bbs-yellow);
}
.admin-tiny-btn.gold:hover {
  background: rgba(255, 255, 0, 0.15);
}

.admin-tiny-btn.gem {
  border-color: var(--bbs-magenta);
  color: var(--bbs-magenta);
}
.admin-tiny-btn.gem:hover {
  background: rgba(255, 0, 255, 0.15);
}

.admin-tiny-btn.retro {
  border-color: var(--bbs-cyan);
  color: var(--bbs-cyan);
}
.admin-tiny-btn.retro:hover {
  background: rgba(0, 255, 255, 0.15);
}

.admin-tiny-btn.level {
  border-color: #ff8c00;
  color: #ff8c00;
}
.admin-tiny-btn.level:hover {
  background: rgba(255, 140, 0, 0.15);
}

/* Post actions styling */
.post-actions a {
  cursor: pointer;
  margin-right: 12px;
  color: var(--bbs-dim);
  text-decoration: underline;
  font-size: 12px;
}
.post-actions a:hover {
  color: var(--bbs-yellow);
}

@media (max-width: 600px) {
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-table {
    font-size: 10px;
  }
  .admin-tiny-btn {
    font-size: 9px;
    padding: 1px 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DOOR GAMES — Complete UI System
   ═══════════════════════════════════════════════════════════════ */

/* ── Door Selection Screen ── */
.door-select-title {
  text-align: center;
  font-size: 28px;
  color: #0ff;
  text-shadow: 0 0 12px rgba(0,255,255,0.5), 0 0 30px rgba(0,255,255,0.2);
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.door-select-sub {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin-bottom: 24px;
}
.door-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.door-card {
  width: 280px;
  background: linear-gradient(145deg, #0d0d20 0%, #0a0a16 50%, #0d0d20 100%);
  border: 1px solid #2a2a4a;
  border-radius: 12px;
  padding: 28px 20px 22px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.door-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--card-accent, #0ff) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.door-card:hover::before { opacity: 0.6; }
.door-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 20px var(--card-glow, rgba(0,255,255,0.15));
  border-color: var(--card-accent, #0ff);
}
.door-card:active { transform: translateY(-1px) scale(0.98); }
.door-card-icon {
  font-size: 56px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 8px var(--card-glow, rgba(255,255,255,0.3)));
}
.door-card-name {
  font-size: 22px;
  font-weight: bold;
  margin: 6px 0;
  letter-spacing: 1px;
}
.door-card-desc {
  color: #999;
  font-size: 13px;
  margin-bottom: 6px;
}
.door-card-detail {
  color: #555;
  font-size: 11px;
}
.door-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0,255,136,0.15);
  color: #0f8;
  border: 1px solid rgba(0,255,136,0.3);
}

/* ── Shared Door Game Layout ── */
.door-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.door-header h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: 1px;
}
.door-header-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.door-btn {
  font-family: var(--bbs-font);
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(20,20,40,0.8);
  color: #aaa;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.door-btn:hover {
  color: #fff;
  border-color: #666;
  background: rgba(40,40,80,0.8);
}
.door-btn.accent { border-color: #0ff; color: #0ff; }
.door-btn.accent:hover { background: rgba(0,255,255,0.1); }
.door-btn.warn { border-color: #f80; color: #f80; }
.door-btn.warn:hover { background: rgba(255,136,0,0.1); }

.door-back-btn {
  font-family: var(--bbs-font);
  font-size: 12px;
  padding: 5px 12px;
  background: rgba(20,20,40,0.8);
  color: #888;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.door-back-btn:hover { color: #fff; border-color: #666; }

/* ── Balance Bar ── */
.door-balance-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  margin-bottom: 12px;
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,20,40,0.6), rgba(10,10,22,0.6), rgba(40,20,0,0.3));
  font-size: 13px;
}
.door-balance-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.door-balance-item .label { color: #888; font-size: 11px; }
.door-balance-item .value { font-weight: bold; }
.door-balance-item .gold { color: #ffcc00; }
.door-balance-item .retro { color: #ff8800; }
.door-balance-item .house { color: #00ff88; }

/* ── Card Visuals (shared Blackjack + Hold'em) ── */
.bj-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #1c1c34, #14142a);
  border: 1px solid #3a3a5a;
  border-radius: 6px;
  padding: 4px 6px;
  margin: 3px;
  min-width: 44px;
  min-height: 60px;
  text-align: center;
  text-shadow: 0 0 6px currentColor;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  position: relative;
}
.card-rank {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: 0;
}
.card-suit {
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}
.bj-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.6); }
.bj-card {
  animation: bjCardDealStagger 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
.bj-card-back {
  background: linear-gradient(135deg, #0a2a0a 0%, #0a4a1a 50%, #0a2a0a 100%);
  border-color: #0a5a2a;
  color: #0a0 !important;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,255,0,0.03) 4px, rgba(0,255,0,0.03) 8px);
}
.bj-card-back .card-rank { color: #0a5a2a; font-size: 16px; }
.bj-card-back .card-suit { font-size: 18px; }
.bj-card-red { color: #ff4444; }
.bj-card-red .card-rank { color: #ff4444; text-shadow: 0 0 8px rgba(255,68,68,0.5); }
.bj-card-red .card-suit { color: #ff4444; text-shadow: 0 0 8px rgba(255,68,68,0.4); }
.bj-card-black { color: #eee; }
.bj-card-black .card-rank { color: #eee; text-shadow: 0 0 8px rgba(255,255,255,0.3); }
.bj-card-black .card-suit { color: #ccc; text-shadow: 0 0 6px rgba(255,255,255,0.2); }

@keyframes bjCardDealStagger {
  0%   { transform: translateY(-30px) rotateY(90deg) scale(0.6); opacity: 0; }
  50%  { transform: translateY(-5px) rotateY(0deg) scale(1.05); opacity: 0.8; }
  100% { transform: translateY(0) rotateY(0deg) scale(1); opacity: 1; }
}

/* ── Community Card Staging (Hold'em Flop/Turn/River) ── */
.comm-flop { animation: commCardReveal 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) both; }
.comm-turn { animation: commCardReveal 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both; }
.comm-river { animation: commCardReveal 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) both; }
@keyframes commCardReveal {
  0%   { transform: translateY(-20px) rotateY(180deg) scale(0.5); opacity: 0; filter: blur(3px); }
  60%  { transform: translateY(-2px) rotateY(0deg) scale(1.08); opacity: 0.9; filter: blur(0); }
  100% { transform: translateY(0) rotateY(0deg) scale(1); opacity: 1; }
}
.comm-divider {
  display: inline-flex;
  align-items: center;
  color: rgba(255,255,255,0.1);
  font-size: 28px;
  margin: 0 2px;
  vertical-align: middle;
}

/* ── Celebration Banners (ASCII Art Results) ── */
.bj-celebration {
  font-family: var(--bbs-font);
  font-size: 13px;
  color: #ffcc00;
  text-shadow: 0 0 12px rgba(255,204,0,0.6), 0 0 24px rgba(255,204,0,0.3);
  line-height: 1.3;
  margin-bottom: 8px;
  animation: celebrationGlow 1.5s ease-in-out infinite alternate;
  white-space: nowrap;
  overflow: hidden;
}
.bj-win-banner {
  font-family: var(--bbs-font);
  font-size: 14px;
  color: #0f0;
  text-shadow: 0 0 10px rgba(0,255,0,0.5);
  letter-spacing: 3px;
  margin-bottom: 6px;
  animation: resultPulse 0.5s ease;
}
.bj-bust-banner {
  font-family: var(--bbs-font);
  font-size: 14px;
  color: #f44;
  text-shadow: 0 0 10px rgba(255,68,68,0.5);
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.he-royal-banner {
  font-family: var(--bbs-font);
  font-size: 13px;
  color: #ffcc00;
  text-shadow: 0 0 16px rgba(255,204,0,0.7), 0 0 32px rgba(255,204,0,0.4);
  line-height: 1.3;
  margin-bottom: 8px;
  animation: celebrationGlow 1s ease-in-out infinite alternate, resultBJ 0.6s ease;
  white-space: nowrap;
}
.he-big-win {
  font-family: var(--bbs-font);
  font-size: 14px;
  color: #f80;
  text-shadow: 0 0 12px rgba(255,136,0,0.6);
  letter-spacing: 3px;
  margin-bottom: 6px;
  animation: resultPulse 0.5s ease;
}
@keyframes celebrationGlow {
  0% { text-shadow: 0 0 12px rgba(255,204,0,0.4), 0 0 24px rgba(255,204,0,0.2); }
  100% { text-shadow: 0 0 20px rgba(255,204,0,0.8), 0 0 40px rgba(255,204,0,0.4), 0 0 60px rgba(255,204,0,0.2); }
}

/* ── Keyboard Shortcut Hints ── */
.kb-hint {
  text-align: center;
  color: #444;
  font-size: 10px;
  letter-spacing: 1px;
  margin-top: 4px;
}
.kb-hint kbd {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid #333;
  border-radius: 3px;
  padding: 1px 5px;
  font-family: var(--bbs-font);
  font-size: 10px;
  color: #666;
  margin: 0 1px;
}

/* ── Card Table (felt green surface) ── */
.card-table {
  border: 1px solid #1a3a1a;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  background: radial-gradient(ellipse at center, #0a2a12 0%, #061a0c 60%, #040e08 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.card-table::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0,255,0,0.06);
  border-radius: 8px;
  pointer-events: none;
}
.card-table-label {
  color: rgba(0,255,0,0.35);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.card-table-cards {
  font-size: 24px;
  letter-spacing: 4px;
  margin: 10px 0;
  min-height: 52px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
}
.card-table-value {
  font-size: 15px;
  font-weight: bold;
}

.card-table-divider {
  text-align: center;
  color: rgba(255,255,255,0.15);
  font-size: 18px;
  margin: 4px 0;
  letter-spacing: 4px;
}

/* ── Betting Panel ── */
.bet-panel {
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(15,15,30,0.8), rgba(10,10,22,0.9));
}
.bet-mode-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 14px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 3px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}
.bet-mode-btn {
  font-family: var(--bbs-font);
  font-size: 13px;
  padding: 6px 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}
.bet-mode-btn.gold {
  background: transparent;
  color: #888;
}
.bet-mode-btn.gold.active {
  background: linear-gradient(180deg, #1a5a1a, #0a3a0a);
  color: #0f0;
  box-shadow: 0 0 8px rgba(0,255,0,0.2);
}
.bet-mode-btn.retro {
  background: transparent;
  color: #888;
}
.bet-mode-btn.retro.active {
  background: linear-gradient(180deg, #6a3000, #3a1a00);
  color: #f80;
  box-shadow: 0 0 8px rgba(255,136,0,0.2);
}
.bet-mode-hint {
  color: #444;
  font-size: 11px;
  margin-top: 6px;
}

.bet-wager-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
}
.bet-wager-label { color: #0ff; font-size: 14px; }
.bet-wager-input {
  width: 90px;
  background: rgba(0,0,0,0.5);
  color: #0f0;
  border: 1px solid #2a4a2a;
  border-radius: 4px;
  padding: 6px 10px;
  text-align: center;
  font-family: var(--bbs-font);
  font-size: 16px;
  transition: border-color 0.2s;
}
.bet-wager-input:focus {
  outline: none;
  border-color: #0f0;
  box-shadow: 0 0 8px rgba(0,255,0,0.2);
}

.bet-chips {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0;
}
.chip-btn {
  font-family: var(--bbs-font);
  font-size: 12px;
  padding: 5px 12px;
  background: linear-gradient(180deg, #222, #1a1a1a);
  color: #ccc;
  border: 1px solid #444;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 38px;
}
.chip-btn:hover {
  background: linear-gradient(180deg, #333, #222);
  border-color: #888;
  color: #fff;
  transform: scale(1.05);
}
.chip-btn.retro-chip { color: #f80; border-color: #642; }
.chip-btn.retro-chip:hover { border-color: #f80; }

.deal-btn {
  font-family: var(--bbs-font);
  font-size: 18px;
  padding: 10px 40px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  margin-top: 8px;
}
.deal-btn.bj {
  background: linear-gradient(180deg, #00cc66, #008844);
  color: #000;
  box-shadow: 0 4px 12px rgba(0,204,102,0.3);
}
.deal-btn.bj:hover {
  background: linear-gradient(180deg, #00ee77, #00aa55);
  box-shadow: 0 6px 20px rgba(0,204,102,0.5);
  transform: translateY(-2px);
}
.deal-btn.he {
  background: linear-gradient(180deg, #cc3333, #882222);
  color: #fff;
  box-shadow: 0 4px 12px rgba(204,51,51,0.3);
}
.deal-btn.he:hover {
  background: linear-gradient(180deg, #ee4444, #aa3333);
  box-shadow: 0 6px 20px rgba(204,51,51,0.5);
  transform: translateY(-2px);
}
.deal-btn:active { transform: translateY(0) scale(0.97); }

/* ── Game Action Buttons ── */
.action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
.game-action-btn {
  font-family: var(--bbs-font);
  font-size: 15px;
  padding: 8px 24px;
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.game-action-btn:active { transform: scale(0.95); }
.game-action-btn.hit {
  background: linear-gradient(180deg, #115511, #0a3a0a);
  color: #0f0;
  border-color: #1a6a1a;
}
.game-action-btn.hit:hover { background: linear-gradient(180deg, #1a7a1a, #0f4f0f); box-shadow: 0 0 12px rgba(0,255,0,0.2); }
.game-action-btn.stand {
  background: linear-gradient(180deg, #554400, #3a2a00);
  color: #ff0;
  border-color: #6a5500;
}
.game-action-btn.stand:hover { background: linear-gradient(180deg, #7a6600, #554400); box-shadow: 0 0 12px rgba(255,255,0,0.2); }
.game-action-btn.double {
  background: linear-gradient(180deg, #003355, #002244);
  color: #4af;
  border-color: #004477;
}
.game-action-btn.double:hover { background: linear-gradient(180deg, #004488, #003366); box-shadow: 0 0 12px rgba(68,170,255,0.2); }
.game-action-btn.surrender {
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  color: #888;
  border-color: #444;
}
.game-action-btn.surrender:hover { background: #333; color: #aaa; }
.game-action-btn.call {
  background: linear-gradient(180deg, #008844, #006633);
  color: #fff;
  border-color: #00aa55;
}
.game-action-btn.call:hover { background: linear-gradient(180deg, #00aa55, #008844); box-shadow: 0 0 12px rgba(0,255,136,0.3); }
.game-action-btn.fold {
  background: linear-gradient(180deg, #551111, #3a0a0a);
  color: #f66;
  border-color: #772222;
}
.game-action-btn.fold:hover { background: linear-gradient(180deg, #772222, #551111); }

/* ── Check Button ── */
.game-action-btn.check {
  background: linear-gradient(180deg, #1a5a1a, #0d3d0d);
  color: #6f6;
  border-color: #2a7a2a;
}
.game-action-btn.check:hover { background: linear-gradient(180deg, #2a7a2a, #1a5a1a); box-shadow: 0 0 12px rgba(102,255,102,0.3); }

/* ═══════ Enhanced Poker Table Styles ═══════ */

/* Felt table background */
.he-felt-table {
  background: linear-gradient(180deg, #0a1a0a 0%, #0d2d0d 30%, #0a1a0a 100%);
  border: 2px solid #1a3a1a;
  border-radius: 12px;
  padding: 12px;
  box-shadow: inset 0 0 40px rgba(0,50,0,0.3), 0 0 20px rgba(0,0,0,0.5);
  position: relative;
}
.he-felt-table::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(0,100,0,0.15);
  border-radius: 10px;
  pointer-events: none;
}

/* Card sections on felt */
.he-card-section {
  background: rgba(0,0,0,0.2);
  border-color: #1a3a1a;
}
.he-community-section {
  border-color: #2a4a1a;
  background: rgba(0,30,0,0.3);
}

/* Street progress indicator */
.he-street-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.he-street-dot {
  padding: 2px 8px;
  border-radius: 3px;
  transition: all 0.3s;
}
.he-street-pending {
  color: #333;
  background: transparent;
}
.he-street-done {
  color: #0a0;
  background: rgba(0,170,0,0.1);
}
.he-street-active {
  color: #0f0;
  background: rgba(0,255,0,0.15);
  box-shadow: 0 0 8px rgba(0,255,0,0.3);
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0,255,0,0.5);
  animation: streetPulse 1.5s ease-in-out infinite;
}
.he-street-arrow {
  color: #222;
  font-size: 8px;
}
@keyframes streetPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,255,0,0.3); }
  50% { box-shadow: 0 0 16px rgba(0,255,0,0.5); }
}

/* Pot & info bar */
.he-info-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 0;
  margin: 6px 0;
  border-top: 1px solid #1a2a1a;
  border-bottom: 1px solid #1a2a1a;
}
.he-info-item {
  text-align: center;
}
.he-info-label {
  display: block;
  font-size: 9px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.he-info-value {
  display: block;
  font-size: 14px;
  color: #ff0;
  font-weight: bold;
}
.he-pot-item .he-pot-value {
  color: #f80;
  text-shadow: 0 0 8px rgba(255,136,0,0.4);
  font-size: 16px;
  animation: potGlow 2s ease-in-out infinite;
}
@keyframes potGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(255,136,0,0.4); }
  50% { text-shadow: 0 0 16px rgba(255,136,0,0.7); }
}

/* Hand strength indicator */
.he-hand-strength {
  text-align: center;
  font-size: 11px;
  padding: 3px 0;
  letter-spacing: 0.5px;
}

/* Best hand highlight at showdown */
.bj-card.he-best-card {
  box-shadow: 0 0 12px rgba(255,255,0,0.6), 0 0 4px rgba(255,255,0,0.8);
  border-color: #ff0 !important;
  transform: translateY(-3px);
  transition: all 0.3s;
}

/* Enhanced action row for multi-street */
.he-actions {
  gap: 8px;
}

/* ── Wager Display ── */
.wager-info {
  text-align: center;
  margin: 8px 0;
  font-size: 13px;
  color: #888;
}
.wager-info .amount { color: #ff0; font-weight: bold; font-size: 15px; }

/* ── Result Displays ── */
.game-result {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  min-height: 32px;
  margin: 10px 0;
  padding: 8px;
}
.game-result.win {
  color: #0f0;
  text-shadow: 0 0 12px rgba(0,255,0,0.5);
  animation: resultPulse 0.5s ease;
}
.game-result.lose {
  color: #f44;
  text-shadow: 0 0 12px rgba(255,68,68,0.5);
}
.game-result.push {
  color: #0ff;
  text-shadow: 0 0 12px rgba(0,255,255,0.5);
}
.game-result.bj {
  color: #ffcc00;
  text-shadow: 0 0 16px rgba(255,204,0,0.6);
  animation: resultBJ 0.6s ease;
}
@keyframes resultPulse {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes resultBJ {
  0% { transform: scale(0.5) rotateZ(-5deg); opacity: 0; }
  50% { transform: scale(1.15) rotateZ(2deg); }
  100% { transform: scale(1) rotateZ(0); opacity: 1; }
}

.play-again-btn {
  font-family: var(--bbs-font);
  font-size: 15px;
  padding: 8px 28px;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  animation: playAgainPulse 2s ease infinite;
}
@keyframes playAgainPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,204,102,0.3); }
  50% { box-shadow: 0 0 20px rgba(0,204,102,0.6); }
}

.door-exit-btn {
  font-family: var(--bbs-font);
  font-size: 14px;
  padding: 8px 24px;
  margin-left: 12px;
  background: linear-gradient(180deg, #333, #1a1a1a);
  color: #999;
  border: 1px solid #444;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.door-exit-btn:hover {
  background: linear-gradient(180deg, #444, #222);
  color: #fff;
  border-color: #666;
  box-shadow: 0 0 10px rgba(255,255,255,0.1);
}

/* ── Deposit / Withdraw Section ── */
.door-wallet-section {
  border-top: 1px solid #2a2a3a;
  padding-top: 10px;
  margin-top: 10px;
}
.door-wallet-label {
  color: #666;
  font-size: 11px;
  margin-bottom: 8px;
  text-align: center;
}
.door-wallet-row {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.door-wallet-input {
  width: 75px;
  background: rgba(0,0,0,0.4);
  color: #0f0;
  border: 1px solid #2a3a2a;
  border-radius: 4px;
  padding: 4px 8px;
  text-align: center;
  font-family: var(--bbs-font);
  font-size: 12px;
}
.door-wallet-btn {
  font-family: var(--bbs-font);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s;
}
.door-wallet-btn.deposit {
  background: linear-gradient(180deg, #3a2800, #2a1a00);
  color: #ff0;
  border-color: #553300;
}
.door-wallet-btn.deposit:hover { background: #442800; }
.door-wallet-btn.withdraw {
  background: linear-gradient(180deg, #330000, #220000);
  color: #f88;
  border-color: #550000;
}
.door-wallet-btn.withdraw:hover { background: #440000; }

/* ── Overlay / Stats Panels ── */
.door-overlay {
  border: 1px solid #2a2a4a;
  border-radius: 10px;
  padding: 18px;
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(15,15,32,0.95), rgba(10,10,22,0.98));
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.door-overlay h3 {
  margin: 0 0 12px;
  font-size: 18px;
  border-bottom: 1px solid #2a2a4a;
  padding-bottom: 8px;
}
.door-overlay table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.door-overlay table th {
  color: #666;
  text-align: left;
  padding: 4px 8px;
  border-bottom: 1px solid #222;
}
.door-overlay table td {
  padding: 4px 8px;
  border-bottom: 1px solid #1a1a1a;
}
.door-overlay table tr:hover { background: rgba(255,255,255,0.02); }

/* ── Stats Grid ── */
.door-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  font-size: 14px;
  padding: 8px 0;
}
.door-stats-grid .stat-label {
  color: #777;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  align-self: center;
}
.door-stats-grid .stat-val {
  text-align: right;
  font-weight: bold;
  font-size: 15px;
}

/* ── Port/Trade Price Colors ── */
.buy-price { color: #f44; }
.sell-price { color: #0f0; }

/* ── RetroWars Specific ── */
.tw-layout {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.tw-main {
  flex: 1;
  min-width: 300px;
}
.tw-sidebar {
  width: 290px;
  min-width: 250px;
  flex-shrink: 0;
}

.tw-ship-hud {
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(0,10,30,0.6), rgba(10,10,22,0.6));
}
.tw-ship-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 6px;
  font-size: 12px;
}
.tw-ship-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tw-sector-panel {
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 10px;
  background: linear-gradient(145deg, rgba(0,10,30,0.5), rgba(10,10,22,0.6));
}
.tw-sector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.tw-sector-id {
  color: #ff0;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255,255,0,0.3);
}
.tw-sector-name {
  color: #0ff;
  font-size: 15px;
  margin-left: 6px;
}
.tw-port-label {
  color: #555;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.tw-port-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.tw-port-table th {
  color: #666;
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid #222;
  font-size: 11px;
}
.tw-port-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #1a1a1a;
}
.tw-port-table .buy-price { color: #f44; }
.tw-port-table .sell-price { color: #0f0; }

.tw-nav-label {
  color: #555;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 10px 0 6px;
}
.tw-nav-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tw-warp-btn {
  font-family: var(--bbs-font);
  font-size: 12px;
  padding: 5px 14px;
  background: linear-gradient(180deg, #1a1a3a, #0f0f22);
  color: #88aaff;
  border: 1px solid #2a2a5a;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.tw-warp-btn:hover {
  background: linear-gradient(180deg, #2a2a5a, #1a1a3a);
  color: #aaccff;
  border-color: #4a4a8a;
  box-shadow: 0 0 10px rgba(100,150,255,0.2);
}

.tw-cargo-panel {
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: rgba(10,10,22,0.5);
}
.tw-cargo-label {
  color: #555;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.tw-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tw-action-btn {
  font-family: var(--bbs-font);
  font-size: 12px;
  padding: 5px 12px;
  background: rgba(20,20,40,0.8);
  color: #aaa;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.tw-action-btn:hover {
  color: #fff;
  border-color: #666;
  background: rgba(40,40,70,0.8);
}
.tw-action-btn.cashout { color: #ff0; border-color: #553; }
.tw-action-btn.cashout:hover { background: rgba(60,60,0,0.3); }

.tw-activity-panel {
  border: 1px solid #1a2a3a;
  border-radius: 8px;
  height: 100%;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: rgba(10,10,22,0.5);
  overflow: hidden;
}
.tw-activity-header {
  color: #ff0;
  font-size: 12px;
  font-weight: bold;
  padding: 8px 12px;
  border-bottom: 1px solid #1a2a3a;
  background: rgba(40,40,0,0.15);
}
.tw-activity-log {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 12px;
}
.tw-log-entry {
  color: #0f0;
  border-bottom: 1px solid #111;
  padding: 3px 0;
}
.tw-log-entry.danger { color: #f44; }
.tw-log-entry.trade { color: #0ff; }
.tw-log-entry.reward { color: #f80; }

.tw-ansi-art {
  background: rgba(0,0,0,0.4);
  border: 1px solid #222;
  border-radius: 4px;
  padding: 6px 10px !important;
  text-shadow: 0 0 6px currentColor;
  animation: ansiGlow 1.5s ease-out;
}
@keyframes ansiGlow {
  0% { opacity: 0; transform: scaleY(0.7); }
  30% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 1; text-shadow: 0 0 3px currentColor; }
}

/* ── PvP Panel ── */
.pvp-challenge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #222;
  transition: background 0.15s;
}
.pvp-challenge:hover { background: rgba(255,255,255,0.02); }
.pvp-accept-btn {
  font-family: var(--bbs-font);
  background: linear-gradient(180deg, #0a5a3a, #084a2a);
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  transition: all 0.15s;
}
.pvp-accept-btn:hover { background: #0a7a4a; }
.pvp-cancel-btn {
  font-family: var(--bbs-font);
  background: #440000;
  color: #f88;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
}

/* ── RetroWars Gauge Bars ── */
.tw-gauges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #1a2a3a;
}
.tw-gauge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tw-gauge-label {
  font-size: 10px;
  color: #666;
  width: 64px;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.tw-gauge {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #1a2a3a;
}
.tw-gauge-fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease, background 0.4s ease;
  box-shadow: 0 0 6px currentColor;
}
.tw-gauge-val {
  font-size: 11px;
  color: #888;
  width: 58px;
  text-align: right;
  flex-shrink: 0;
}

/* ── RetroWars Warp Button Enhancements ── */
.tw-warp-name {
  font-size: 12px;
  color: #aaccff;
}
.tw-warp-meta {
  font-size: 10px;
  display: block;
  margin-top: 1px;
  opacity: 0.8;
}
.tw-warp-btn {
  text-align: left;
  line-height: 1.3;
}
.tw-warp-btn.tw-warp-danger {
  border-color: #5a2a2a;
  background: linear-gradient(180deg, #2a1a1a, #1a0f0f);
}
.tw-warp-btn.tw-warp-danger:hover {
  border-color: #8a4a4a;
  box-shadow: 0 0 10px rgba(255,100,100,0.2);
}

/* ── Sector Danger Tint ── */
.tw-sector-panel.danger-0 { border-color: #1a3a2a; }
.tw-sector-panel.danger-1 { border-color: #2a3a1a; }
.tw-sector-panel.danger-2 { border-color: #3a3a1a; }
.tw-sector-panel.danger-3 { border-color: #3a2a1a; background: linear-gradient(145deg, rgba(30,15,0,0.5), rgba(10,10,22,0.6)); }
.tw-sector-panel.danger-4 { border-color: #4a1a1a; background: linear-gradient(145deg, rgba(40,10,10,0.5), rgba(15,5,10,0.6)); }
.tw-sector-panel.danger-5 { border-color: #5a1a3a; background: linear-gradient(145deg, rgba(40,5,20,0.5), rgba(20,5,15,0.6)); }

/* ── Warp Transition Animation ── */
.tw-warping { animation: twWarpEffect 0.8s ease-out; }
@keyframes twWarpEffect {
  0%  { filter: blur(0) brightness(1); }
  20% { filter: blur(4px) brightness(2); }
  50% { filter: blur(1px) brightness(1.3); }
  100% { filter: blur(0) brightness(1); }
}

/* ── SVG Galaxy Map ── */
.tw-galaxy-map-container {
  max-height: 580px;
  overflow: auto;
  text-align: center;
}
.tw-galaxy-svg {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
}
.tw-map-sector { cursor: pointer; transition: opacity 0.2s, r 0.2s; }
.tw-map-sector:hover { opacity: 1 !important; filter: url(#glowBig); }
.tw-map-legend {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 10px;
  color: #666;
}
.tw-map-legend span { display: flex; align-items: center; gap: 4px; }
.tw-map-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── Pirate Encounter Flash ── */
.tw-encounter-flash {
  animation: twEncounterFlash 0.6s ease-out;
}
@keyframes twEncounterFlash {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: inset 0 0 40px rgba(255,50,50,0.3); }
}

/* ── Sparkle for big wins ── */
@keyframes sparkle {
  0%   { box-shadow: 0 0 4px rgba(255,204,0,0.3); }
  25%  { box-shadow: 0 0 16px rgba(255,204,0,0.8), 0 0 30px rgba(255,204,0,0.3); }
  50%  { box-shadow: 0 0 4px rgba(0,255,136,0.3); }
  75%  { box-shadow: 0 0 16px rgba(0,255,136,0.8), 0 0 30px rgba(0,255,136,0.3); }
  100% { box-shadow: 0 0 4px rgba(255,204,0,0.3); }
}

/* ── Mobile responsiveness ── */
@media (max-width: 640px) {
  .door-grid { flex-direction: column; align-items: center; }
  .door-card { width: 100%; max-width: 340px; }
  .tw-layout { flex-direction: column; }
  .tw-sidebar { width: 100%; }
  .tw-activity-panel { max-height: 260px; }
  .door-balance-bar { flex-wrap: wrap; gap: 6px; font-size: 12px; }
  .action-row { gap: 6px; }
  .game-action-btn { padding: 6px 16px; font-size: 13px; }
  .bet-chips { gap: 4px; }
  .chip-btn { padding: 4px 8px; font-size: 11px; }
  .bj-card { min-width: 38px; min-height: 50px; padding: 3px 5px; }
  .bj-card .card-rank { font-size: 16px; }
  .bj-card .card-suit { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════
   NEXT-LEVEL BBS — Immersive Visual Overhaul
   ═══════════════════════════════════════════════════════════════════ */

/* ── Enhanced CRT: Phosphor Glow + Vignette ── */
body { animation: none !important; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.45) 100%);
}

body::after {
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 1px,
    rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px
  ) !important;
  animation: scanDrift 10s linear infinite !important;
}

@keyframes scanDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* Subtle phosphor color fringe — RGB separation */
@keyframes phosphor {
  0%, 100% { text-shadow: none; }
  25% { text-shadow: 0.3px 0 0 rgba(255,0,0,0.03), -0.3px 0 0 rgba(0,100,255,0.03); }
  75% { text-shadow: -0.3px 0 0 rgba(255,0,0,0.02), 0.3px 0 0 rgba(0,100,255,0.02); }
}

html { animation: phosphor 0.15s linear infinite; }

/* ═══ Matrix Rain Screensaver ═══ */
#bbsScreensaver {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: none;
  cursor: none;
}
#bbsScreensaver canvas {
  width: 100%;
  height: 100%;
}
#bbsScreensaver.active { display: block; }
.screensaver-hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(0,255,100,0.25);
  font-family: 'VT323', monospace;
  font-size: 14px;
  letter-spacing: 2px;
  animation: ss-hint-fade 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ss-hint-fade {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.4; }
}

/* ═══ Dramatic Loot Reveal ═══ */

/* Mystery Box — full dramatic sequence */
@keyframes loot-box-shake {
  0%, 100% { transform: rotate(0deg) scale(1); }
  10% { transform: rotate(-12deg) scale(1.05); }
  20% { transform: rotate(12deg) scale(1.08); }
  30% { transform: rotate(-15deg) scale(1.1); }
  40% { transform: rotate(15deg) scale(1.12); }
  50% { transform: rotate(-18deg) scale(1.15); }
  60% { transform: rotate(18deg) scale(1.12); }
  70% { transform: rotate(-12deg) scale(1.1); }
  80% { transform: rotate(8deg) scale(1.08); }
  90% { transform: rotate(-4deg) scale(1.04); }
}
@keyframes loot-box-burst {
  0%  { transform: scale(1.15); opacity: 1; }
  30% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes loot-box-glow {
  0%   { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
  50%  { box-shadow: 0 0 40px rgba(255,215,0,0.7), 0 0 80px rgba(255,165,0,0.3); }
  100% { box-shadow: 0 0 10px rgba(255,215,0,0.3); }
}

.loot-reveal-container {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.loot-reveal-container.active { opacity: 1; pointer-events: auto; }

.loot-reveal-box {
  font-size: 80px;
  animation: loot-box-shake 1.5s ease-in-out forwards, loot-box-glow 0.3s ease-in-out 5;
}
.loot-reveal-box.burst {
  animation: loot-box-burst 0.6s ease-out forwards;
}

.loot-reveal-items {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

@keyframes loot-item-appear {
  0%   { opacity: 0; transform: translateY(-40px) scale(0.5); }
  60%  { opacity: 1; transform: translateY(5px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.loot-item {
  opacity: 0;
  padding: 8px 20px;
  border-radius: 6px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  animation: loot-item-appear 0.5s ease-out forwards;
  text-shadow: 0 0 8px currentColor;
}
.loot-item.common    { color: #ccc; border: 1px solid rgba(204,204,204,0.3); background: rgba(204,204,204,0.05); }
.loot-item.uncommon  { color: #0f0; border: 1px solid rgba(0,255,0,0.3); background: rgba(0,255,0,0.05); }
.loot-item.rare      { color: #4da6ff; border: 1px solid rgba(77,166,255,0.3); background: rgba(77,166,255,0.05); text-shadow: 0 0 12px rgba(77,166,255,0.5); }
.loot-item.epic      { color: #b744ff; border: 1px solid rgba(183,68,255,0.3); background: rgba(183,68,255,0.05); text-shadow: 0 0 15px rgba(183,68,255,0.5); }
.loot-item.legendary { color: #FFD700; border: 1px solid rgba(255,215,0,0.4); background: rgba(255,215,0,0.08); text-shadow: 0 0 20px rgba(255,215,0,0.6); }

@keyframes loot-particle {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(0); }
}
.loot-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: loot-particle 1s ease-out forwards;
  pointer-events: none;
}

.loot-dismiss {
  margin-top: 24px;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  font-family: 'VT323', monospace;
}

/* Chest bounce enhancement */
@keyframes chest-bounce {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.15) rotate(-5deg); }
  30%  { transform: scale(0.95) rotate(3deg); }
  45%  { transform: scale(1.08) rotate(-2deg); }
  60%  { transform: scale(0.98); }
  75%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ═══ ASCII Combat Animations ═══ */
@keyframes combat-slash {
  0%   { opacity: 1; transform: translateX(-20px); }
  50%  { opacity: 1; transform: translateX(20px); }
  100% { opacity: 0; transform: translateX(40px); }
}
@keyframes combat-hit {
  0%   { color: inherit; }
  25%  { color: #ff4444; transform: translateX(3px); }
  50%  { color: inherit; transform: translateX(-3px); }
  75%  { color: #ff4444; transform: translateX(2px); }
  100% { color: inherit; transform: translateX(0); }
}
@keyframes combat-death {
  0%   { opacity: 1; filter: none; }
  30%  { opacity: 1; filter: brightness(3) saturate(0); }
  60%  { opacity: 0.6; color: #ff2222; }
  100% { opacity: 0; transform: translateY(20px) scaleY(0.5); }
}
@keyframes combat-hp-drain {
  from { width: var(--hp-from); }
  to   { width: var(--hp-to); }
}
.combat-scene {
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 6px;
  padding: 12px;
  margin: 8px 0;
  background: rgba(0,0,0,0.4);
  font-family: 'VT323', monospace;
}
.combat-monster-art {
  white-space: pre;
  font-size: 11px;
  line-height: 1.15;
  color: var(--bbs-cyan);
  text-align: center;
  margin-bottom: 8px;
}
.combat-hp-bar {
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  margin: 4px 0;
}
.combat-hp-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #ff4444, #44ff44);
  transition: width 0.6s ease-out;
}
.combat-hp-fill.low { background: linear-gradient(90deg, #ff2222, #ff8800); }
.combat-hp-fill.critical { background: #ff2222; animation: combat-hit 0.3s ease-in-out; }
.combat-hit-line {
  animation: combat-hit 0.4s ease-in-out;
  display: inline-block;
}
.combat-slash-fx {
  display: inline-block;
  animation: combat-slash 0.5s ease-out forwards;
  color: #ff4;
  font-weight: bold;
}
.combat-death-fx {
  animation: combat-death 1.2s ease-out forwards;
}
.combat-label {
  font-size: 13px;
  color: var(--bbs-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Ambient Starfield Canvas ── */
#bbsAmbient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* ── Boot Sequence Overlay ── */
#bootOverlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 501;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 30px 40px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #33ff33;
  overflow-y: auto;
  transition: opacity 0.6s ease;
}
#bootOverlay.fade-out { opacity: 0; pointer-events: none; }
.boot-line {
  white-space: pre;
  line-height: 1.5;
  opacity: 0;
  animation: bootAppear 0.02s ease-out forwards;
}
.boot-line.cyan { color: #0ff; }
.boot-line.yellow { color: #ff0; }
.boot-line.red { color: #f44; }
.boot-line.magenta { color: #f0f; }
.boot-line.dim { color: #555; }
.boot-line.bold { font-weight: bold; font-size: 20px; }
.boot-line.header { color: #0ff; font-size: 12px; line-height: 1.15; }
@keyframes bootAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}
.boot-cursor {
  display: inline-block;
  width: 10px;
  height: 16px;
  background: #33ff33;
  animation: cursorBlink 0.6s step-end infinite;
  vertical-align: middle;
  margin-left: 2px;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Enhanced Navigation ── */
.bbs-nav {
  background: linear-gradient(180deg, rgba(10,10,28,0.98), rgba(6,6,18,0.96)) !important;
  border-bottom: 1px solid rgba(0,255,255,0.12) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5), 0 1px 0 rgba(0,255,255,0.08);
  backdrop-filter: blur(12px);
}

.bbs-nav-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease !important;
}

.bbs-nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
  border-bottom: none !important;
}

.bbs-nav-btn:hover::after { width: 80%; }
.bbs-nav-btn.active { border-bottom-color: transparent !important; }
.bbs-nav-btn.active::after {
  width: 100%;
  height: 3px;
  background: var(--bbs-cyan);
  box-shadow: 0 0 12px var(--bbs-cyan), 0 0 25px rgba(0,255,255,0.2);
}

/* Tab notification pip */
.nav-pip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  background: #ff4444;
  border-radius: 50%;
  animation: pipGlow 2s ease infinite;
  box-shadow: 0 0 4px #ff4444;
}
@keyframes pipGlow {
  0%, 100% { box-shadow: 0 0 4px #ff4444; }
  50% { box-shadow: 0 0 8px #ff4444, 0 0 12px rgba(255,68,68,0.4); }
}

/* Keyboard shortcut labels */
.nav-key { font-size: 10px; color: rgba(255,255,255,0.12); margin-left: 3px; vertical-align: super; }

/* ── Dropdown Navigation ── */
.nav-dropdown {
  position: relative;
  flex: none;
  display: flex;
  align-items: stretch;
}
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-caret {
  font-size: 10px;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown.open .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: linear-gradient(180deg, rgba(10,10,28,0.98), rgba(6,6,18,0.99));
  border: 1px solid rgba(0,255,255,0.15);
  border-top: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 12px rgba(0,255,255,0.05);
  z-index: 200;
  flex-direction: column;
  backdrop-filter: blur(12px);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu .bbs-nav-btn {
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  font-size: 16px;
  border-bottom: 1px solid rgba(0,255,255,0.06);
}
.nav-dropdown-menu .bbs-nav-btn:last-child {
  border-bottom: none;
}
.nav-dropdown-menu .bbs-nav-btn:hover {
  background: rgba(0,255,255,0.08);
}
.nav-dropdown-menu .bbs-nav-btn.active {
  color: var(--bbs-cyan);
  background: rgba(0,255,255,0.06);
}
/* Divider between sections within a dropdown menu */
.nav-dropdown-divider {
  height: 1px;
  margin: 4px 10px;
  background: rgba(51,255,51,0.12);
}
/* Highlight the dropdown trigger when a child item is active */
.nav-dropdown.has-active > .nav-dropdown-trigger {
  color: var(--bbs-cyan);
  text-shadow: 0 0 8px rgba(0,255,255,0.3);
}
.nav-dropdown.has-active > .nav-dropdown-trigger::after {
  width: 100%;
  height: 3px;
  background: var(--bbs-cyan);
  box-shadow: 0 0 12px var(--bbs-cyan), 0 0 25px rgba(0,255,255,0.2);
}

/* Account hub in navbar */
.nav-dropdown-account > .nav-account-trigger {
  min-width: 178px;
  justify-content: flex-start;
  gap: 8px;
  padding-right: 12px;
}
.nav-account-avatar {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.3);
  background: rgba(0,255,255,0.08);
  box-shadow: inset 0 0 10px rgba(0,255,255,0.18);
  font-size: 13px;
  line-height: 1;
}
.nav-account-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.nav-account-label {
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.nav-account-value {
  color: var(--bbs-cyan);
  font-size: 14px;
  max-width: 112px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account-menu {
  min-width: 300px;
  padding-top: 0;
}
.nav-account-card {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,255,255,0.14);
  background: linear-gradient(180deg, rgba(0,255,255,0.08), rgba(0,255,255,0.02));
}
.nav-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-account-name {
  color: #e9ffff;
  font-size: 16px;
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account-chain {
  color: var(--bbs-yellow);
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,51,0.26);
  border-radius: 999px;
  padding: 2px 8px;
}
.nav-account-addr {
  margin-top: 6px;
  color: rgba(160,255,255,0.8);
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  word-break: break-all;
}
.nav-account-session {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nav-account-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.4px;
  color: rgba(190,255,255,0.85);
  background: rgba(0,255,255,0.05);
}
.nav-account-pill.ok {
  color: #baffdd;
  border-color: rgba(64,255,160,0.35);
  background: rgba(64,255,160,0.08);
}
.nav-account-pill.warn {
  color: #ffddaa;
  border-color: rgba(255,170,68,0.35);
  background: rgba(255,170,68,0.1);
}
.nav-account-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nav-account-action {
  flex: 1;
  min-width: 92px;
  border: 1px solid rgba(0,255,255,0.28);
  background: rgba(0,255,255,0.08);
  color: #b9ffff;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: var(--bbs-font);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.nav-account-action .bi {
  margin-right: 6px;
}
.nav-account-action:hover {
  background: rgba(0,255,255,0.18);
  color: #fff;
}
.nav-account-action.danger {
  border-color: rgba(255,85,85,0.3);
  background: rgba(255,68,68,0.09);
  color: #ff9b9b;
}
.nav-account-action.danger:hover {
  background: rgba(255,68,68,0.2);
  color: #fff;
}
.nav-account-action:disabled {
  opacity: 0.45;
  cursor: default;
}
.nav-account-action:disabled:hover {
  background: rgba(0,255,255,0.08);
  color: #b9ffff;
}
.nav-account-trigger.needs-sign .nav-account-avatar {
  border-color: rgba(255,170,68,0.55);
  box-shadow: inset 0 0 10px rgba(255,170,68,0.25), 0 0 10px rgba(255,170,68,0.2);
  animation: navNeedSignPulse 1.2s ease-in-out infinite;
}
.nav-account-trigger.needs-sign .nav-account-value {
  color: #ffcf8a;
}
@keyframes navNeedSignPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
/* Mobile: full-width dropdown */
@media (max-width: 600px) {
  .nav-dropdown-menu {
    position: fixed;
    left: 0;
    right: 0;
    min-width: 100vw;
  }
  .nav-dropdown-account > .nav-account-trigger {
    min-width: auto;
    padding-right: 10px;
  }
  .nav-account-meta { display: none; }
  .nav-account-menu { min-width: 100vw; }
}

body.hyve-chain .nav-account-avatar {
  border-color: rgba(0,255,100,0.35);
  background: rgba(0,255,100,0.1);
  box-shadow: inset 0 0 10px rgba(0,255,100,0.2);
}
body.hyve-chain .nav-account-value {
  color: #84ffc1;
}

/* ── Enhanced Status Bar ── */
.bbs-status-bar {
  background: linear-gradient(90deg, rgba(0,20,40,0.5), rgba(10,10,22,0.5), rgba(40,0,20,0.3)) !important;
  border-bottom: 1px solid rgba(51,255,51,0.08) !important;
  box-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

.status-clock {
  color: var(--bbs-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

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

.conn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0f0;
  box-shadow: 0 0 6px #0f0;
  animation: connPulse 3s ease infinite;
}
.conn-dot.disconnected { background: #f44; box-shadow: 0 0 6px #f44; animation: none; }
@keyframes connPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── Smooth Panel Transitions ── */
.bbs-panel.active {
  display: block;
  animation: panelReveal 0.35s ease-out;
}
@keyframes panelReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Enhanced Site Header ── */
.bbs-site-header {
  background: linear-gradient(180deg, rgba(0,255,255,0.04), rgba(0,0,0,0.3)) !important;
  border-bottom: 1px solid rgba(0,255,255,0.12) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.bbs-ascii-banner {
  text-shadow: 0 0 10px rgba(0,255,255,0.4), 0 0 40px rgba(0,255,255,0.1) !important;
  animation: bannerBreath 4s ease infinite alternate;
}
@keyframes bannerBreath {
  0% { text-shadow: 0 0 10px rgba(0,255,255,0.3), 0 0 30px rgba(0,255,255,0.08); filter: brightness(0.96); }
  100% { text-shadow: 0 0 15px rgba(0,255,255,0.5), 0 0 50px rgba(0,255,255,0.15); filter: brightness(1.04); }
}

/* ── Enhanced Main Hall Cards ── */
.mh-card {
  background: linear-gradient(145deg, rgba(10,10,22,0.8), rgba(15,15,30,0.6)) !important;
  border: 1px solid rgba(0,255,255,0.08) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.mh-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.02), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.mh-card:hover {
  border-color: rgba(0,255,255,0.25) !important;
  box-shadow: 0 0 20px rgba(0,255,255,0.06), inset 0 0 20px rgba(0,255,255,0.02);
  transform: translateY(-2px);
}
.mh-card:hover::after { left: 100%; }

/* ── Chat Message Animations ── */
.chat-msg {
  animation: msgSlideIn 0.2s ease-out;
  padding: 3px 8px !important;
  border-radius: 3px;
  transition: background 0.15s;
}
@keyframes msgSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.chat-msg:hover { background: rgba(255,255,255,0.02); }

/* ── Enhanced Card Visuals ── */
.bj-card {
  background: linear-gradient(145deg, #1e1e3a, #161630) !important;
  border: 1px solid #4a4a6a !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  min-width: 48px !important;
  min-height: 64px !important;
  box-shadow:
    0 3px 10px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 1px rgba(255,255,255,0.1) !important;
  position: relative;
  overflow: hidden;
}
.card-rank {
  font-size: 22px !important;
  font-weight: bold;
  line-height: 1.1;
}
.card-suit {
  font-size: 16px !important;
  line-height: 1;
  opacity: 0.9;
}

/* Holographic sheen on cards */
.bj-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    135deg,
    transparent 35%,
    rgba(255,255,255,0.04) 45%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.04) 55%,
    transparent 65%
  );
  transform: rotate(-45deg);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.bj-card:hover::after { transform: rotate(-45deg) translateY(80%); }

/* Enhanced card deal animation with stagger support */
.bj-card {
  animation: cardDealPro 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) both !important;
}
@keyframes cardDealPro {
  0%   { transform: translateY(-40px) rotateY(90deg) scale(0.5); opacity: 0; filter: blur(2px); }
  50%  { transform: translateY(-4px) rotateY(0deg) scale(1.05); opacity: 0.85; filter: blur(0); }
  100% { transform: translateY(0) rotateY(0deg) scale(1); opacity: 1; }
}

/* ── Enhanced Card Table (Felt) ── */
.card-table {
  background: radial-gradient(ellipse at center, #0c2f16 0%, #071c0e 55%, #040f08 100%) !important;
  border: 1px solid rgba(0,255,0,0.1) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 0 50px rgba(0,0,0,0.6),
    0 6px 24px rgba(0,0,0,0.4),
    inset 0 0 80px rgba(0,40,0,0.12) !important;
  padding: 20px !important;
  position: relative;
}

/* ── Enhanced Door Selection Cards ── */
.door-card {
  border-radius: 14px !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  perspective: 1000px;
}
.door-card:hover {
  transform: translateY(-8px) rotateX(2deg) !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.7),
    0 0 40px var(--card-glow, rgba(0,255,255,0.2)),
    inset 0 0 40px var(--card-glow, rgba(0,255,255,0.03)) !important;
}
.door-card-icon {
  transition: all 0.3s ease;
}
.door-card:hover .door-card-icon {
  transform: scale(1.2) translateY(-6px);
  filter: drop-shadow(0 0 16px var(--card-glow, rgba(255,255,255,0.5)));
}

/* ── Enhanced Deal Button Shine ── */
.deal-btn {
  position: relative !important;
  overflow: hidden !important;
}
.deal-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,0.12) 50%,
    transparent 60%
  );
  transform: translateX(-150%);
  transition: transform 0.5s ease;
  pointer-events: none;
}
.deal-btn:hover::after { transform: translateX(150%); }

/* ── Enhanced Toast Notifications ── */
.bbs-toast {
  border-radius: 8px !important;
  padding: 12px 20px !important;
  backdrop-filter: blur(10px);
  animation: toastSlideIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 1px rgba(255,255,255,0.1);
}
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.9); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Victory Celebration Effect ── */
@keyframes victoryShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.game-result.win, .game-result.bj {
  background: linear-gradient(90deg, transparent 0%, rgba(255,204,0,0.08) 25%, rgba(255,204,0,0.15) 50%, rgba(255,204,0,0.08) 75%, transparent 100%) !important;
  background-size: 200% 100%;
  animation: victoryShine 2s ease infinite, resultPulse 0.5s ease !important;
  border-radius: 8px;
}

/* ── Enhanced Scrollbars ── */
::-webkit-scrollbar { width: 5px !important; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2) !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,255,255,0.2), rgba(0,255,255,0.08)) !important;
  border-radius: 3px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,255,255,0.35), rgba(0,255,255,0.15)) !important;
}

/* ── Enhanced Connect Overlay ── */
.bbs-connect-overlay {
  background: radial-gradient(ellipse at center, #0a0a22, #040410) !important;
}
.co-connect-btn {
  border-radius: 8px !important;
  position: relative;
  overflow: hidden;
}
.co-connect-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(0,255,255,0.08);
  border-radius: 50%;
  transition: all 0.5s ease;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.co-connect-btn:hover::after { width: 350px; height: 350px; }

/* ── Enhanced LORD Terminal ── */
.lord-terminal {
  border: 2px solid rgba(51,255,51,0.35) !important;
  box-shadow:
    0 0 25px rgba(51,255,51,0.12),
    0 0 60px rgba(51,255,51,0.04),
    inset 0 0 40px rgba(0,0,0,0.5) !important;
}
.lord-terminal-header {
  background: linear-gradient(180deg, #2c2c42, #1c1c2e) !important;
}

/* ── Enhanced Profile Hero ── */
.profile-hero {
  background: linear-gradient(135deg, rgba(0,40,80,0.6), rgba(30,0,60,0.6)) !important;
  border: 1px solid rgba(0,255,255,0.12) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.3), inset 0 0 40px rgba(0,255,255,0.02);
  border-radius: 14px !important;
}

/* ── Sound Toggle Button ── */
.sound-toggle {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 200;
  font-size: 18px;
  background: rgba(10,10,22,0.92);
  border: 1px solid #333;
  border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: #555;
  backdrop-filter: blur(6px);
}
.sound-toggle:hover { border-color: #0ff; color: #0ff; }
.sound-toggle.active { color: #0f0; border-color: #0f0; box-shadow: 0 0 8px rgba(0,255,0,0.2); }

/* ── Enhanced PvP Overlay ── */
.door-overlay {
  border: 1px solid rgba(80,80,140,0.3) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(15,15,35,0.97), rgba(10,10,24,0.99)) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.2) !important;
}

/* ── Ambient Text Glow on Headings ── */
.main-hall .mh-welcome h2 {
  text-shadow: 0 0 20px rgba(0,255,255,0.4), 0 0 60px rgba(0,255,255,0.1) !important;
}
.boards-container h2 {
  text-shadow: 0 0 15px rgba(0,255,255,0.3) !important;
}
.door-select-title {
  text-shadow: 0 0 15px rgba(0,255,255,0.6), 0 0 40px rgba(0,255,255,0.2), 0 0 80px rgba(0,255,255,0.1) !important;
}

/* ── Chip Buttons Enhancement ── */
.chip-btn {
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.chip-btn:hover {
  transform: scale(1.1) translateY(-2px) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* ── Enhanced Balance Bar ── */
.door-balance-bar {
  border: 1px solid rgba(30,50,70,0.5) !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, rgba(0,20,40,0.7), rgba(10,10,22,0.7), rgba(40,20,0,0.4)) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

/* ── RetroWars Enhanced ── */
.tw-sector-panel {
  border-radius: 10px !important;
  border: 1px solid rgba(30,50,70,0.4) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
.tw-ship-hud {
  border-radius: 10px !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

/* ── Keypress flash for chat input ── */
@keyframes inputFlash {
  0% { border-color: var(--bbs-cyan); box-shadow: 0 0 6px rgba(0,255,255,0.3); }
  100% { border-color: var(--bbs-border); box-shadow: none; }
}
.chat-input:focus {
  border-bottom: 1px solid var(--bbs-cyan) !important;
  box-shadow: 0 1px 0 rgba(0,255,255,0.3);
}

/* ── Leaderboard row highlight ── */
.lord-lb-table tr:hover td {
  background: rgba(255,255,255,0.03);
  transition: background 0.15s;
}

/* ── Mobile adjustments for new features ── */
@media (max-width: 640px) {
  #bootOverlay { padding: 16px 20px; font-size: 13px; }
  .boot-line.header { font-size: 9px; }
  .boot-line.bold { font-size: 16px; }
  .sound-toggle { width: 30px; height: 30px; font-size: 14px; bottom: 8px; left: 8px; }
}

/* ═══ V8: Mail badge + mail row hover ═══ */
.nav-badge {
  display: inline-block;
  background: var(--bbs-red);
  color: #000;
  font-size: 0.7em;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: top;
}
.mail-row:hover { background: rgba(51, 255, 51, 0.08) !important; }

/* ═══════════════════════════════════════════════════════════════════
   Multi-Chain: Chain Picker (Connect Overlay)
   ═══════════════════════════════════════════════════════════════════ */
.co-chain-picker {
  margin: 16px 0 20px;
}
.co-chain-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.co-chain-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.co-chain-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 28px;
  background: rgba(255,255,255,0.04);
  border: 2px solid #333;
  border-radius: 8px;
  color: #888;
  font-family: var(--bbs-font);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 140px;
}
.co-chain-btn:hover {
  border-color: #666;
  color: #ccc;
  background: rgba(255,255,255,0.08);
}
.co-chain-btn.active {
  border-color: var(--bbs-fg);
  color: var(--bbs-fg);
  background: rgba(51,255,51,0.08);
  box-shadow: 0 0 12px rgba(51,255,51,0.2);
}
.co-chain-btn[data-chain="hyve"].active {
  border-color: #ffcc00;
  color: #ffcc00;
  background: rgba(255,204,0,0.08);
  box-shadow: 0 0 12px rgba(255,204,0,0.2);
}
.co-chain-icon {
  font-size: 24px;
}
.co-chain-name {
  font-size: 15px;
  font-weight: bold;
}
.co-chain-symbol {
  font-size: 11px;
  color: #666;
  letter-spacing: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   Multi-Chain: Chain Badge (Status Bar)
   ═══════════════════════════════════════════════════════════════════ */
.chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: rgba(51,255,51,0.12);
  border: 1px solid var(--bbs-fg);
  border-radius: 4px;
  color: var(--bbs-fg);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 8px;
}
.chain-badge:hover {
  background: rgba(51,255,51,0.25);
}
body.hyve-chain .chain-badge {
  background: rgba(255,204,0,0.12);
  border-color: #ffcc00;
  color: #ffcc00;
}
body.hyve-chain .chain-badge:hover {
  background: rgba(255,204,0,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   Multi-Chain: Hyve Theme (body.hyve-chain overrides)
   ═══════════════════════════════════════════════════════════════════ */
body.hyve-chain {
  --bbs-fg: #ffcc00;
  --bbs-dim: #7a6a1a;
  --bbs-cyan: #ff9900;
  --bbs-border: #3a3a1a;
  --bbs-highlight: rgba(255,204,0,0.08);
  --bbs-glow: rgba(255,204,0,0.4);
}
body.hyve-chain .bbs-ascii-banner {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.5);
}
body.hyve-chain .bbs-connect-overlay .co-ascii {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255,204,0,0.5);
}
body.hyve-chain .co-connect-btn {
  border-color: #ffcc00;
  color: #ffcc00;
}
body.hyve-chain .co-connect-btn:hover {
  background: rgba(255,204,0,0.15);
  box-shadow: 0 0 12px rgba(255,204,0,0.3);
}
body.hyve-chain .bbs-nav-btn.active,
body.hyve-chain .bbs-nav-btn:hover {
  color: #ffcc00;
  border-bottom-color: #ffcc00;
}
body.hyve-chain .nav-dropdown.has-active .nav-dropdown-trigger {
  color: #ffcc00;
}
body.hyve-chain .lord-btn {
  border-color: #ffcc00;
  color: #ffcc00;
}
body.hyve-chain .lord-btn:hover {
  background: rgba(255,204,0,0.15);
  box-shadow: 0 0 8px rgba(255,204,0,0.3);
}
body.hyve-chain .lord-btn-gold {
  background: rgba(255,204,0,0.15);
  border-color: #ff9900;
  color: #ffcc00;
}
body.hyve-chain .conn-dot {
  background: #ffcc00;
  box-shadow: 0 0 6px #ffcc00;
}

/* ═══════════════════════════════════════════════════════════════════
   V9: Holder Badges, Premium Channels, Stats, Terms
   ═══════════════════════════════════════════════════════════════════ */

/* Holder badge in status bar */
.holder-badge-bar {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.3);
  color: #ffd700;
  font-size: 0.85em;
  cursor: default;
  animation: holderGlow 2s ease-in-out infinite;
}
@keyframes holderGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,215,0,0.2); }
  50% { box-shadow: 0 0 10px rgba(255,215,0,0.5); }
}

/* Holder badge in chat messages */
.chat-holder-badge {
  font-size: 0.9em;
  margin-right: 2px;
}

/* Holder badge in user list */
.user-holder-badge {
  font-size: 0.8em;
  margin-right: 2px;
}

/* Premium channels group */
.premium-channels {
  border-top: 1px solid rgba(255,215,0,0.3);
  margin-top: 8px;
  padding-top: 6px;
}
.premium-channels .channel-group-label {
  color: #ffd700 !important;
}
.channel-btn.premium {
  border-left: 2px solid rgba(255,215,0,0.4);
}
.channel-btn.premium:hover,
.channel-btn.premium.active {
  background: rgba(255,215,0,0.1);
  border-left-color: #ffd700;
}
.holder-badge-sm {
  font-size: 0.9em;
  margin-left: 4px;
}
/* ─── Discord-like Clan Server Sidebar ─── */
.clan-server {
  border-top: 1px solid rgba(200,157,255,0.15);
  margin-top: 4px;
  padding-top: 2px;
}
.clan-server-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px;
  color: #c89dff;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: default;
}
.clan-server-icon {
  font-size: 16px;
  line-height: 1;
}
.clan-server-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-server-actions {
  display: flex;
  gap: 3px;
  margin-left: auto;
}
.clan-srv-btn {
  background: none;
  border: 1px solid rgba(200,157,255,0.25);
  color: #c89dff;
  font-size: 11px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: var(--bbs-font, monospace);
  padding: 0;
  line-height: 1;
}
.clan-srv-btn:hover {
  background: rgba(200,157,255,0.15);
  border-color: #c89dff;
  text-shadow: 0 0 6px rgba(200,157,255,0.5);
}
.clan-server-banner {
  padding: 4px 8px;
  font-size: 10px;
  color: var(--bbs-dim);
  font-style: italic;
  border-bottom: 1px solid rgba(200,157,255,0.08);
}
/* Category headings inside clan server */
.clan-category-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 2px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(200,157,255,0.6);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.clan-category-label:hover {
  color: #c89dff;
}
.clan-category-label .cat-collapse {
  font-size: 8px;
  transition: transform 0.15s;
}
.clan-category-label.collapsed .cat-collapse {
  transform: rotate(-90deg);
}
.clan-category-channels {
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.clan-category-channels.collapsed {
  max-height: 0 !important;
  padding: 0;
}
/* Channel buttons in clan server */
.channel-btn.clan-ch {
  border-left: 2px solid rgba(200,157,255,0.4);
  padding-left: 14px;
  font-size: 12px;
}
.channel-btn.clan-ch:hover,
.channel-btn.clan-ch.active {
  background: rgba(200,157,255,0.1);
  border-left-color: #c89dff;
}
.channel-btn.clan-ch .ch-type-icon {
  font-size: 11px;
  opacity: 0.7;
  margin-right: 2px;
}
.channel-btn.clan-ch .ch-topic {
  display: block;
  font-size: 9px;
  color: var(--bbs-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
  font-weight: normal;
}
/* Uncategorized channels heading */
.clan-uncategorized-label {
  padding: 4px 8px 2px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(200,157,255,0.4);
}
/* Empty server placeholder */
.clan-empty-hint {
  color: var(--bbs-dim);
  font-size: 11px;
  padding: 4px 10px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════
   CLAN PANEL — Full Overhaul
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header & Navigation ── */
.clan-header {
  text-align: center;
  padding: 10px 0 0;
}
.clan-ascii-banner {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  line-height: 1.3;
  color: var(--bbs-cyan, #0ff);
  white-space: pre;
  text-shadow: 0 0 8px rgba(0,255,255,0.3);
  margin: 0 auto 6px;
}
.clan-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(0,255,255,0.15);
  margin-bottom: 10px;
}
.clan-nav-btn {
  background: rgba(0,255,255,0.06);
  border: 1px solid rgba(0,255,255,0.2);
  color: var(--bbs-cyan, #0ff);
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.clan-nav-btn:hover {
  background: rgba(0,255,255,0.15);
  border-color: var(--bbs-cyan, #0ff);
  text-shadow: 0 0 6px rgba(0,255,255,0.5);
}
.clan-nav-btn.active {
  background: rgba(0,255,255,0.2);
  border-color: var(--bbs-cyan, #0ff);
  color: #fff;
  text-shadow: 0 0 8px rgba(0,255,255,0.6);
}

/* ── Sections / Views ── */
.clan-section {
  padding: 0 14px 14px;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
}
.clan-section-title {
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  color: var(--bbs-cyan, #0ff);
  margin: 0 0 10px;
  text-shadow: 0 0 6px rgba(0,255,255,0.3);
}
.clan-loading {
  text-align: center;
  color: var(--bbs-dim, #555);
  padding: 30px;
  font-style: italic;
}
.clan-empty {
  text-align: center;
  color: var(--bbs-dim, #555);
  padding: 30px;
  font-size: 13px;
}

/* ── "My Clan" card ── */
.clan-my-card {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 6px;
  padding: 14px;
  margin-bottom: 14px;
}
.clan-my-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.clan-my-tag {
  font-family: var(--bbs-font, monospace);
  font-size: 20px;
  font-weight: bold;
  color: var(--bbs-yellow, #ff0);
  text-shadow: 0 0 10px rgba(255,255,0,0.3);
  background: rgba(255,255,0,0.08);
  border: 1px solid rgba(255,255,0,0.2);
  border-radius: 4px;
  padding: 4px 10px;
}
.clan-my-info {
  flex: 1;
  min-width: 0;
}
.clan-my-name {
  font-family: var(--bbs-font, monospace);
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 2px;
}
.clan-my-motto {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #888);
  font-style: italic;
}
.clan-my-desc {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: var(--bbs-dim, #aaa);
  margin: 6px 0;
  line-height: 1.5;
}
.clan-my-id {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #555);
}

/* ── Stats Grid ── */
.clan-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.clan-stat-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 4px;
  padding: 10px;
  text-align: center;
}
.clan-stat-box .val {
  font-family: var(--bbs-font, monospace);
  font-size: 18px;
  font-weight: bold;
  color: var(--bbs-yellow, #ff0);
  text-shadow: 0 0 6px rgba(255,255,0,0.3);
  display: block;
}
.clan-stat-box .lbl {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #888);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
  display: block;
}

/* ── Action bar ── */
.clan-action-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.clan-action-btn {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid;
}
.clan-btn-deposit {
  background: rgba(255,255,0,0.1);
  border-color: rgba(255,255,0,0.3);
  color: var(--bbs-yellow, #ff0);
}
.clan-btn-deposit:hover {
  background: rgba(255,255,0,0.2);
  border-color: var(--bbs-yellow, #ff0);
}
.clan-btn-danger {
  background: rgba(255,0,0,0.1);
  border-color: rgba(255,0,0,0.3);
  color: var(--bbs-red, #f44);
}
.clan-btn-danger:hover {
  background: rgba(255,0,0,0.2);
  border-color: var(--bbs-red, #f44);
}

/* ── Members table ── */
.clan-members-section {
  margin-top: 10px;
}
.clan-members-title {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: var(--bbs-cyan, #0ff);
  margin-bottom: 6px;
}
.clan-table {
  width: 100%;
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  border-collapse: collapse;
}
.clan-table th {
  color: var(--bbs-cyan, #0ff);
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(0,255,255,0.2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.clan-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #ccc;
}
.clan-table tr:hover td {
  background: rgba(0,255,255,0.04);
}
.clan-role-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--bbs-font, monospace);
  font-weight: bold;
}
.clan-role-badge.leader {
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.3);
  color: #ffd700;
}
.clan-role-badge.officer {
  background: rgba(0,255,255,0.1);
  border: 1px solid rgba(0,255,255,0.2);
  color: var(--bbs-cyan, #0ff);
}
.clan-role-badge.member {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--bbs-dim, #888);
}
.clan-tbl-btn {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  color: #ccc;
  transition: all 0.15s;
  margin-right: 3px;
}
.clan-tbl-btn:hover {
  background: rgba(0,255,255,0.15);
  border-color: var(--bbs-cyan, #0ff);
  color: #fff;
}

/* ── Browse Grid ── */
.clan-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.clan-browse-card {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.12);
  border-radius: 6px;
  padding: 12px;
  cursor: default;
  transition: all 0.2s;
}
.clan-browse-card:hover {
  border-color: rgba(0,255,255,0.3);
  background: rgba(0,255,255,0.08);
}
.clan-browse-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.clan-browse-tag {
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  font-weight: bold;
  color: var(--bbs-yellow, #ff0);
  background: rgba(255,255,0,0.08);
  border: 1px solid rgba(255,255,0,0.2);
  padding: 2px 6px;
  border-radius: 3px;
}
.clan-browse-name {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clan-browse-members {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #888);
  margin-bottom: 4px;
}
.clan-browse-desc {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #aaa);
  line-height: 1.4;
  max-height: 44px;
  overflow: hidden;
  margin-bottom: 8px;
}
.clan-browse-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.clan-browse-id {
  font-family: var(--bbs-font, monospace);
  font-size: 9px;
  color: var(--bbs-dim, #555);
}
.clan-btn-join {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  padding: 4px 12px;
  background: rgba(0,255,0,0.1);
  border: 1px solid rgba(0,255,0,0.3);
  color: var(--bbs-green, #0f0);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
}
.clan-btn-join:hover {
  background: rgba(0,255,0,0.2);
  border-color: var(--bbs-green, #0f0);
  text-shadow: 0 0 6px rgba(0,255,0,0.4);
}
.clan-btn-promote {
  color: var(--bbs-cyan, #0ff);
  border-color: rgba(0,255,255,0.2);
}
.clan-btn-promote:hover {
  background: rgba(0,255,255,0.15);
  border-color: var(--bbs-cyan, #0ff);
}
.clan-btn-kick {
  color: var(--bbs-red, #f44);
  border-color: rgba(255,0,0,0.2);
}
.clan-btn-kick:hover {
  background: rgba(255,0,0,0.15);
  border-color: var(--bbs-red, #f44);
}

/* ── Leaderboard table ── */
.clan-lb-table {
  width: 100%;
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  border-collapse: collapse;
}
.clan-lb-table th {
  color: var(--bbs-cyan, #0ff);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(0,255,255,0.2);
  font-size: 11px;
  text-transform: uppercase;
}
.clan-lb-table th.c,
.clan-lb-table td.c { text-align: center; }
.clan-lb-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #ccc;
}
.clan-lb-table tr:hover td {
  background: rgba(0,255,255,0.04);
}
.clan-lb-table .clan-lb-top td {
  background: rgba(255,215,0,0.05);
  color: #fff;
}
.clan-lb-table .clan-lb-rank {
  font-size: 16px;
  text-align: center;
  width: 36px;
}

/* ── Create form ── */
.clan-create-box {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 6px;
  padding: 16px;
  max-width: 420px;
  margin: 0 auto;
}
.clan-create-ascii {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  line-height: 1.2;
  color: var(--bbs-cyan, #0ff);
  text-align: center;
  white-space: pre;
  margin-bottom: 12px;
  text-shadow: 0 0 6px rgba(0,255,255,0.2);
}
.clan-create-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.clan-label {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-cyan, #0ff);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.clan-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,255,255,0.2);
  color: #fff;
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 3px;
  transition: border-color 0.15s;
}
.clan-input:focus {
  outline: none;
  border-color: var(--bbs-cyan, #0ff);
  box-shadow: 0 0 8px rgba(0,255,255,0.15);
}
.clan-create-btn-main {
  background: rgba(0,255,255,0.15);
  border: 1px solid var(--bbs-cyan, #0ff);
  color: var(--bbs-cyan, #0ff);
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
  text-shadow: 0 0 6px rgba(0,255,255,0.3);
}
.clan-create-btn-main:hover {
  background: rgba(0,255,255,0.25);
  box-shadow: 0 0 14px rgba(0,255,255,0.2);
}

/* ── Help Section ── */
.clan-help-box {
  padding: 10px 0;
}
.clan-help-title {
  font-family: var(--bbs-font, monospace);
  font-size: 15px;
  color: var(--bbs-cyan, #0ff);
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 0 6px rgba(0,255,255,0.3);
}
.clan-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.clan-help-card {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 6px;
  padding: 14px;
  transition: all 0.2s;
}
.clan-help-card:hover {
  border-color: rgba(0,255,255,0.25);
  background: rgba(0,255,255,0.07);
}
.clan-help-icon {
  font-size: 22px;
  margin-bottom: 6px;
  display: block;
}
.clan-help-card h4 {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: var(--bbs-cyan, #0ff);
  margin: 0 0 4px;
}
.clan-help-card p {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #aaa);
  line-height: 1.5;
  margin: 0;
}

/* ── No-clan state ── */
.clan-no-clan {
  text-align: center;
  padding: 20px;
}
.clan-no-ascii {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  line-height: 1.2;
  color: var(--bbs-dim, #666);
  white-space: pre;
  margin-bottom: 10px;
}
.clan-no-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   CLAN REWARDS & MY STATS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Rewards View ── */
.clan-rewards-box {
  padding: 10px 0;
}
.clan-rewards-subtitle {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #aaa);
  text-align: center;
  margin: 0 0 14px;
  line-height: 1.5;
}
.clan-rewards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.clan-reward-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 16px;
  text-align: center;
  transition: all 0.2s;
}
.clan-reward-card.clan-reward-ready {
  border-color: rgba(0,255,0,0.3);
  background: rgba(0,255,0,0.04);
}
.clan-reward-card.clan-reward-ready:hover {
  border-color: rgba(0,255,0,0.5);
  background: rgba(0,255,0,0.07);
  box-shadow: 0 0 12px rgba(0,255,0,0.1);
}
.clan-reward-card.clan-reward-locked {
  border-color: rgba(255,255,255,0.06);
  opacity: 0.7;
}
.clan-reward-ascii {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  line-height: 1.2;
  color: var(--bbs-cyan, #0ff);
  white-space: pre;
  text-shadow: 0 0 6px rgba(0,255,255,0.2);
  margin-bottom: 8px;
}
.clan-reward-card.clan-reward-ready .clan-reward-ascii {
  color: var(--bbs-green, #0f0);
  text-shadow: 0 0 8px rgba(0,255,0,0.3);
}
.clan-reward-title {
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  color: #fff;
  margin: 0 0 6px;
}
.clan-reward-est {
  font-family: var(--bbs-font, monospace);
  font-size: 16px;
  font-weight: bold;
  color: var(--bbs-yellow, #ffd700);
  text-shadow: 0 0 6px rgba(255,215,0,0.3);
  margin-bottom: 4px;
}
.clan-reward-detail {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #888);
  margin-bottom: 4px;
}
.clan-reward-bonus {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-green, #0f0);
  margin-bottom: 8px;
}
.clan-reward-claim {
  display: inline-block;
  background: rgba(0,255,0,0.15);
  border: 1px solid var(--bbs-green, #0f0);
  color: var(--bbs-green, #0f0);
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-shadow: 0 0 6px rgba(0,255,0,0.3);
  margin-top: 6px;
}
.clan-reward-claim:hover {
  background: rgba(0,255,0,0.25);
  box-shadow: 0 0 14px rgba(0,255,0,0.2);
}
.clan-reward-timer {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: var(--bbs-yellow, #ffd700);
  margin-top: 8px;
  text-shadow: 0 0 4px rgba(255,215,0,0.2);
}
.clan-rewards-info {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.clan-rewards-info h4 {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: var(--bbs-cyan, #0ff);
  margin: 0 0 8px;
}
.clan-rewards-info ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.clan-rewards-info li {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #ccc);
  line-height: 1.7;
  padding-left: 14px;
  position: relative;
}
.clan-rewards-info li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--bbs-cyan, #0ff);
}
.clan-rewards-info strong {
  color: #fff;
}

/* ── My Stats View ── */
.clan-mystats-box {
  padding: 10px 0;
}
.clan-mystats-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.clan-mystats-name {
  font-family: var(--bbs-font, monospace);
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}
.clan-mystats-box .clan-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.clan-mystats-box .clan-stat-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 5px;
  padding: 12px 8px;
  text-align: center;
}
.clan-mystats-box .clan-stat-val,
.clan-stat-val {
  font-family: var(--bbs-font, monospace);
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.1);
}
.clan-mystats-box .clan-stat-label,
.clan-stat-label {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #aaa);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.clan-mystats-char {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.clan-mystats-char h4 {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: var(--bbs-cyan, #0ff);
  margin: 0 0 8px;
}
.clan-mystats-membership {
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.1);
  border-radius: 6px;
  padding: 12px 16px;
}
.clan-mystats-detail {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: var(--bbs-dim, #ccc);
  line-height: 2;
}
.clan-mystats-detail strong {
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   CLAN WARS PANEL — Full Overhaul
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header & Navigation ── */
.cw-header {
  text-align: center;
  padding: 10px 0 0;
}
.cw-ascii-banner {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  line-height: 1.3;
  color: var(--bbs-red, #f44);
  white-space: pre;
  text-shadow: 0 0 10px rgba(255,68,68,0.35);
  margin: 0 auto 6px;
}
.cw-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(255,68,68,0.15);
  margin-bottom: 10px;
}
.cw-nav-btn {
  background: rgba(255,68,68,0.06);
  border: 1px solid rgba(255,68,68,0.2);
  color: var(--bbs-red, #f44);
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.15s;
}
.cw-nav-btn:hover {
  background: rgba(255,68,68,0.15);
  border-color: var(--bbs-red, #f44);
  text-shadow: 0 0 6px rgba(255,68,68,0.5);
}
.cw-nav-btn.active {
  background: rgba(255,68,68,0.2);
  border-color: var(--bbs-red, #f44);
  color: #fff;
  text-shadow: 0 0 8px rgba(255,68,68,0.6);
}

/* ── War sections ── */
.cw-section {
  padding: 0 14px 14px;
  overflow-y: auto;
  max-height: calc(100vh - 260px);
}
.cw-section-title {
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  color: var(--bbs-red, #f44);
  margin: 0 0 10px;
  text-shadow: 0 0 6px rgba(255,68,68,0.3);
}
.cw-empty {
  text-align: center;
  color: var(--bbs-dim, #555);
  padding: 30px;
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
}
.cw-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.cw-muted {
  color: var(--bbs-dim, #666);
  font-size: 11px;
}

/* ── War Cards Grid ── */
.cw-war-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.cw-war-card {
  background: rgba(255,68,68,0.04);
  border: 1px solid rgba(255,68,68,0.15);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.cw-war-card:hover {
  border-color: rgba(255,68,68,0.35);
  background: rgba(255,68,68,0.08);
  box-shadow: 0 0 12px rgba(255,68,68,0.1);
}
.cw-war-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.cw-war-status {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  font-weight: bold;
}
.cw-war-stake {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-yellow, #ff0);
}
.cw-war-vs {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 8px 0;
}
.cw-war-clan {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  flex: 1;
}
.cw-vs-badge {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  font-weight: bold;
  color: var(--bbs-red, #f44);
  padding: 3px 8px;
  background: rgba(255,68,68,0.12);
  border: 1px solid rgba(255,68,68,0.25);
  border-radius: 3px;
}
.cw-war-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.cw-phase-tag {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--bbs-dim, #aaa);
  text-transform: uppercase;
}
.cw-war-time {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #555);
}

/* ── War Detail Card ── */
.cw-detail-card {
  background: rgba(255,68,68,0.04);
  border: 1px solid rgba(255,68,68,0.15);
  border-radius: 6px;
  padding: 16px;
}
.cw-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.cw-detail-title {
  font-family: var(--bbs-font, monospace);
  font-size: 16px;
  color: var(--bbs-red, #f44);
  margin: 0;
  text-shadow: 0 0 8px rgba(255,68,68,0.3);
}
.cw-detail-status {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border: 1px solid;
  border-radius: 3px;
}

/* ── VS Display ── */
.cw-detail-vs {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 14px;
}
.cw-detail-side {
  flex: 1;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  border: 1px solid;
}
.cw-side-attack {
  border-color: rgba(255,68,68,0.2);
}
.cw-side-defend {
  border-color: rgba(0,255,255,0.2);
}
.cw-side-label {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bbs-dim, #888);
  margin-bottom: 6px;
}
.cw-side-name {
  font-family: var(--bbs-font, monospace);
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}
.cw-side-stake {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: var(--bbs-yellow, #ff0);
}
.cw-vs-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--bbs-font, monospace);
  font-size: 20px;
  color: var(--bbs-red, #f44);
  text-shadow: 0 0 12px rgba(255,68,68,0.4);
  min-width: 50px;
}
.cw-detail-phase {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: var(--bbs-dim, #aaa);
  text-align: center;
  padding: 6px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

/* ── Signups ── */
.cw-signups {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.cw-signup-col {
  flex: 1;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.cw-signup-title {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  margin: 0 0 6px;
  text-shadow: 0 0 6px currentColor;
}
.cw-signup-row {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: #ccc;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cw-signup-empty {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim, #555);
  font-style: italic;
  padding: 6px;
}

/* ── Battle Results ── */
.cw-battle-results {
  background: rgba(255,68,68,0.04);
  border: 1px solid rgba(255,68,68,0.15);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
}
.cw-results-title {
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  color: var(--bbs-red, #f44);
  margin: 0 0 10px;
  text-align: center;
}
.cw-rounds {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.cw-round {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: #ccc;
  padding: 4px 8px;
  border-radius: 3px;
  background: rgba(0,0,0,0.2);
}
.cw-round-attack {
  border-left: 3px solid var(--bbs-red, #f44);
}
.cw-round-defend {
  border-left: 3px solid var(--bbs-cyan, #0ff);
}
.cw-round-num {
  color: var(--bbs-dim, #888);
  font-weight: bold;
  min-width: 24px;
}
.cw-round-vs {
  color: var(--bbs-dim, #666);
}
.cw-round-winner {
  margin-left: auto;
}
.cw-results-score {
  text-align: center;
  font-family: var(--bbs-font, monospace);
  font-size: 20px;
  font-weight: bold;
  padding: 8px;
}
.cw-results-pot {
  text-align: center;
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: #ccc;
}

/* ── Action buttons ── */
.cw-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cw-action-btn {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid;
}
.cw-btn-accept {
  background: rgba(0,255,0,0.1);
  border-color: rgba(0,255,0,0.3);
  color: var(--bbs-green, #0f0);
}
.cw-btn-accept:hover {
  background: rgba(0,255,0,0.2);
  border-color: var(--bbs-green, #0f0);
}
.cw-btn-decline {
  background: rgba(255,0,0,0.1);
  border-color: rgba(255,0,0,0.3);
  color: var(--bbs-red, #f44);
}
.cw-btn-decline:hover {
  background: rgba(255,0,0,0.2);
  border-color: var(--bbs-red, #f44);
}
.cw-btn-cancel {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: var(--bbs-dim, #888);
}
.cw-btn-cancel:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--bbs-dim, #888);
}
.cw-btn-signup {
  background: rgba(0,255,255,0.1);
  border-color: rgba(0,255,255,0.3);
  color: var(--bbs-cyan, #0ff);
}
.cw-btn-signup:hover {
  background: rgba(0,255,255,0.2);
  border-color: var(--bbs-cyan, #0ff);
}
.cw-btn-withdraw {
  background: rgba(255,165,0,0.1);
  border-color: rgba(255,165,0,0.3);
  color: orange;
}
.cw-btn-withdraw:hover {
  background: rgba(255,165,0,0.2);
  border-color: orange;
}
.cw-btn-resolve {
  background: rgba(255,68,68,0.15);
  border-color: rgba(255,68,68,0.4);
  color: var(--bbs-red, #f44);
  font-weight: bold;
}
.cw-btn-resolve:hover {
  background: rgba(255,68,68,0.25);
  border-color: var(--bbs-red, #f44);
  box-shadow: 0 0 10px rgba(255,68,68,0.2);
}
.cw-btn-back {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: var(--bbs-dim, #aaa);
}
.cw-btn-back:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.cw-declare-btn {
  background: rgba(255,68,68,0.15);
  border-color: rgba(255,68,68,0.4);
  color: var(--bbs-red, #f44);
  font-weight: bold;
}
.cw-declare-btn:hover {
  background: rgba(255,68,68,0.25);
  box-shadow: 0 0 10px rgba(255,68,68,0.2);
}

/* ── Declare Form ── */
.cw-declare-box {
  background: rgba(255,68,68,0.04);
  border: 1px solid rgba(255,68,68,0.15);
  border-radius: 6px;
  padding: 16px;
  max-width: 420px;
  margin: 0 auto;
}
.cw-declare-ascii {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  line-height: 1.2;
  color: var(--bbs-red, #f44);
  text-align: center;
  white-space: pre;
  margin-bottom: 12px;
  text-shadow: 0 0 6px rgba(255,68,68,0.2);
}
.cw-declare-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-label {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-red, #f44);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.cw-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,68,68,0.2);
  color: #fff;
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 3px;
  transition: border-color 0.15s;
}
.cw-input:focus {
  outline: none;
  border-color: var(--bbs-red, #f44);
  box-shadow: 0 0 8px rgba(255,68,68,0.15);
}
.cw-declare-note {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #666);
  text-align: center;
  margin-top: 6px;
}
.cw-declare-go {
  background: rgba(255,68,68,0.15);
  border: 1px solid var(--bbs-red, #f44);
  color: var(--bbs-red, #f44);
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 6px;
  text-shadow: 0 0 6px rgba(255,68,68,0.3);
}
.cw-declare-go:hover {
  background: rgba(255,68,68,0.25);
  box-shadow: 0 0 14px rgba(255,68,68,0.2);
}

/* ── History/Leaderboard Tables ── */
.cw-table {
  width: 100%;
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  border-collapse: collapse;
}
.cw-table th {
  color: var(--bbs-red, #f44);
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,68,68,0.2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cw-table th.c,
.cw-table td.c { text-align: center; }
.cw-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #ccc;
}
.cw-table tr:hover td {
  background: rgba(255,68,68,0.04);
}
.cw-winner {
  color: var(--bbs-green, #0f0) !important;
}
.cw-loser {
  color: var(--bbs-red, #f44) !important;
}
.cw-time {
  color: var(--bbs-dim, #555) !important;
  font-size: 10px;
}
.cw-lb-top td {
  background: rgba(255,215,0,0.05) !important;
  color: #fff !important;
}
.cw-lb-name {
  font-weight: bold;
}

/* ── War Record Stats ── */
.cw-record-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.cw-record-box {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,68,68,0.12);
  border-radius: 4px;
  padding: 14px;
  text-align: center;
}
.cw-record-num {
  font-family: var(--bbs-font, monospace);
  font-size: 22px;
  font-weight: bold;
  display: block;
  text-shadow: 0 0 8px currentColor;
}
.cw-record-label {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim, #888);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .clan-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .clan-browse-grid { grid-template-columns: 1fr; }
  .clan-help-grid { grid-template-columns: 1fr; }
  .cw-war-grid { grid-template-columns: 1fr; }
  .cw-detail-vs { flex-direction: column; }
  .cw-vs-big { transform: rotate(90deg); }
  .cw-signups { flex-direction: column; }
  .cw-record-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ Stats Panel ═══ */
.stats-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}
.stats-container h2 {
  color: var(--bbs-cyan);
  margin-bottom: 4px;
}
.stats-subtitle {
  color: var(--bbs-dim);
  font-size: 0.9em;
  margin-bottom: 16px;
}
.stats-holder-banner {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid var(--bbs-dim);
  background: rgba(0,255,0,0.05);
}
.stats-holder-banner.holder-supporter { border-color: #ffcc00; background: rgba(255,204,0,0.08); }
.stats-holder-banner.holder-hodler { border-color: #ffa500; background: rgba(255,165,0,0.08); }
.stats-holder-banner.holder-stacker { border-color: #ff8c00; background: rgba(255,140,0,0.08); }
.stats-holder-banner.holder-whale { border-color: #00bfff; background: rgba(0,191,255,0.08); }
.stats-holder-banner.holder-diamond { border-color: #b9f2ff; background: rgba(185,242,255,0.1); }
.stats-holder-banner.holder-legendary { border-color: #ffd700; background: rgba(255,215,0,0.12); }
.stats-holder-banner.holder-none { border-color: var(--bbs-dim); color: var(--bbs-dim); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: 1fr; }
}
.stats-chain-col h3 {
  color: var(--bbs-cyan);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--bbs-dim);
  padding-bottom: 4px;
}
.stats-card {
  background: rgba(0,255,0,0.03);
  border: 1px solid var(--bbs-dim);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.stats-card-title {
  background: rgba(0,255,0,0.06);
  padding: 6px 12px;
  font-weight: bold;
  color: var(--bbs-green);
  font-size: 0.9em;
  border-bottom: 1px solid var(--bbs-dim);
}
.stats-card-body {
  padding: 8px 12px;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.9em;
}
.stat-row span { color: var(--bbs-dim); }
.stat-row strong { color: var(--bbs-green); }

.stats-game-section {
  margin-bottom: 16px;
}
.stats-game-section h3 {
  color: var(--bbs-cyan);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--bbs-dim);
  padding-bottom: 4px;
}
.stats-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.stat-tile {
  background: rgba(0,255,0,0.04);
  border: 1px solid var(--bbs-dim);
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}
.stat-tile-val {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--bbs-green);
}
.stat-tile-lbl {
  font-size: 0.75em;
  color: var(--bbs-dim);
  margin-top: 2px;
}

.stats-activity {
  padding: 8px 0;
  color: var(--bbs-green);
}
.stats-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--bbs-dim);
}
.stats-updated {
  color: var(--bbs-dim);
  font-size: 0.85em;
}

/* ═══ Terms Panel ═══ */
.terms-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}
.terms-container h2 {
  color: var(--bbs-cyan);
  margin-bottom: 4px;
}
.terms-updated {
  color: var(--bbs-dim);
  font-size: 0.85em;
  margin-bottom: 16px;
}
.terms-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,255,0,0.08);
}
.terms-section h3 {
  color: var(--bbs-green);
  margin-bottom: 6px;
  font-size: 1em;
}
.terms-section p {
  color: var(--bbs-fg);
  line-height: 1.6;
  font-size: 0.9em;
}
.terms-section strong {
  color: var(--bbs-cyan);
}
.terms-accept {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--bbs-cyan);
  border-radius: 6px;
  background: rgba(0,255,255,0.05);
  text-align: center;
}
.terms-accept p {
  font-size: 0.9em;
  line-height: 1.6;
  color: var(--bbs-fg);
}

/* Hyve chain color overrides for stats */
body.hyve-chain .stats-card-title { color: #ffcc00; background: rgba(255,204,0,0.06); }
body.hyve-chain .stats-chain-col h3 { color: #ffcc00; }
body.hyve-chain .stat-row strong { color: #ffcc00; }
body.hyve-chain .stat-tile-val { color: #ffcc00; }
body.hyve-chain .stats-game-section h3 { color: #ffcc00; }
body.hyve-chain .holder-badge-bar { color: #ffcc00; border-color: rgba(255,204,0,0.3); background: rgba(255,204,0,0.15); }
body.hyve-chain .premium-channels .channel-group-label { color: #ffcc00 !important; }
body.hyve-chain .channel-btn.premium { border-left-color: rgba(255,204,0,0.4); }
body.hyve-chain .channel-btn.premium:hover,
body.hyve-chain .channel-btn.premium.active { background: rgba(255,204,0,0.1); border-left-color: #ffcc00; }

/* ═══════════════════════════════════════════════════════════════
   V10: Premium Panel + Mystery Box + Login Bonus Styles
   ═══════════════════════════════════════════════════════════════ */

/* Premium Container */
.premium-container {
  max-width: 700px;
  margin: 0 auto;
}
.premium-container h2 {
  color: var(--bbs-yellow, #FFD700);
  margin-bottom: 12px;
  font-size: 20px;
}
.premium-section {
  background: rgba(255,215,0,0.04);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.premium-section h3 {
  color: var(--bbs-cyan, #0ff);
  margin: 0 0 8px 0;
  font-size: 15px;
}

/* Tier Grid for Login Bonus */
.premium-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.premium-tier-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 8px 10px;
  text-align: center;
}
.premium-tier-card .tier-icon { font-size: 24px; }
.premium-tier-card .tier-name {
  font-size: 12px;
  color: var(--bbs-yellow, #FFD700);
  font-weight: bold;
  margin: 4px 0;
}
.premium-tier-card .tier-rewards {
  font-size: 11px;
  color: var(--bbs-dim, #888);
  line-height: 1.4;
}

/* Login Bonus Log */
.premium-bonus-log {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,255,0,0.2);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
}
.bonus-log-header {
  font-weight: bold;
  color: var(--bbs-yellow, #FFD700);
  margin-bottom: 6px;
  font-size: 14px;
}
.bonus-log-scene { color: var(--bbs-cyan, #0ff); font-weight: bold; }
.bonus-log-narrator { color: var(--bbs-dim, #888); font-style: italic; }
.bonus-log-reward { color: var(--bbs-green, #0f0); }

/* Mystery Box */
.mystery-box-status {
  text-align: center;
  padding: 12px;
}
.mystery-box-visual {
  display: inline-block;
  font-size: 48px;
  transition: transform 0.3s ease;
  cursor: pointer;
  margin-bottom: 8px;
}
.mystery-box-visual:hover { transform: scale(1.1) rotate(-5deg); }
.mystery-box-locked { opacity: 0.5; filter: grayscale(0.8); }
.mystery-box-opening {
  animation: boxShake 0.5s ease-in-out 3;
}
@keyframes boxShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg) scale(1.1); }
  75% { transform: rotate(10deg) scale(1.1); }
}
.premium-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  color: #000 !important;
  font-weight: bold;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.premium-btn:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(255,215,0,0.4); }
.premium-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.mystery-box-cooldown {
  color: var(--bbs-dim, #888);
  font-size: 13px;
  margin-top: 8px;
}
.mystery-box-total {
  color: var(--bbs-dim, #888);
  font-size: 12px;
  margin-top: 4px;
}

/* Mystery Box Results */
.mystery-box-results {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
  padding: 12px;
  margin-top: 10px;
}
.mystery-results-header {
  font-size: 16px;
  font-weight: bold;
  color: var(--bbs-yellow, #FFD700);
  margin-bottom: 8px;
  text-align: center;
}
.mystery-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mystery-item-name { color: var(--bbs-cyan, #0ff); }
.mystery-item-value { color: var(--bbs-green, #0f0); font-weight: bold; }
.mystery-loot-line {
  color: var(--bbs-green, #0f0);
  font-size: 13px;
  padding: 2px 0;
}
.mystery-next {
  color: var(--bbs-dim, #888);
  font-size: 12px;
  margin-top: 6px;
  text-align: center;
}

/* Premium Perks List */
.premium-perk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.premium-perk {
  color: var(--bbs-fg, #0f0);
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.premium-perk strong { color: var(--bbs-yellow, #FFD700); }

/* Premium Emote Grid */
.premium-emote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px 12px;
  margin-top: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}
.emote-item {
  font-size: 12px;
  color: var(--bbs-dim, #888);
}
.emote-item code {
  color: var(--bbs-cyan, #0ff);
  background: rgba(0,255,255,0.1);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
}

/* Tier-colored chat nicknames (subtle glow) */
.msg-nick[style*="color:#FFD700"] { text-shadow: 0 0 4px rgba(255,215,0,0.3); }
.msg-nick[style*="color:#00CED1"] { text-shadow: 0 0 4px rgba(0,206,209,0.3); }
.msg-nick[style*="color:#B9F2FF"] { text-shadow: 0 0 4px rgba(185,242,255,0.3); }
.msg-nick[style*="color:#FF6B6B"] { text-shadow: 0 0 6px rgba(255,107,107,0.4); }

/* Hyve overrides for premium */
body.hyve-theme .premium-section {
  border-color: rgba(0,230,118,0.15);
  background: rgba(0,230,118,0.04);
}
body.hyve-theme .premium-btn {
  background: linear-gradient(135deg, #00E676, #00BFA5) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   V11: OVER-THE-TOP BBS STYLING UPGRADE
   Neon glow, glassmorphism, animations, ANSI art, townsfolk, forge, chest
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Neon Pulse Animation ── */
@keyframes neon-pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255,255,0,0.3), 0 0 20px rgba(255,255,0,0.1); }
  50% { text-shadow: 0 0 20px rgba(255,255,0,0.6), 0 0 40px rgba(255,255,0,0.3), 0 0 60px rgba(255,255,0,0.1); }
}
@keyframes neon-cyan {
  0%, 100% { text-shadow: 0 0 10px rgba(0,255,255,0.3), 0 0 20px rgba(0,255,255,0.1); }
  50% { text-shadow: 0 0 20px rgba(0,255,255,0.6), 0 0 40px rgba(0,255,255,0.3); }
}
@keyframes glow-border {
  0%, 100% { border-color: rgba(0,255,255,0.3); box-shadow: 0 0 10px rgba(0,255,255,0.1); }
  50% { border-color: rgba(0,255,255,0.7); box-shadow: 0 0 20px rgba(0,255,255,0.3), 0 0 40px rgba(0,255,255,0.1); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes chest-bounce {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15) rotate(-3deg); }
  50% { transform: scale(1.25) rotate(3deg); }
  75% { transform: scale(1.15) rotate(-1deg); }
}
@keyframes forge-glow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,165,0,0.5)); }
  50% { filter: drop-shadow(0 0 20px rgba(255,165,0,0.9)) drop-shadow(0 0 40px rgba(255,100,0,0.5)); }
}
@keyframes rainbow-border {
  0% { border-color: #ff0000; }
  16% { border-color: #ff8800; }
  33% { border-color: #ffff00; }
  50% { border-color: #00ff00; }
  66% { border-color: #0088ff; }
  83% { border-color: #8800ff; }
  100% { border-color: #ff0000; }
}
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
.neon-pulse { animation: neon-pulse 2s ease-in-out infinite; }

/* ── Glassmorphism Cards ── */
.glass-card {
  background: rgba(10,10,22,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,255,255,0.15);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(0,255,255,0.4);
  box-shadow: 0 0 20px rgba(0,255,255,0.15), inset 0 0 20px rgba(0,255,255,0.05);
}

/* ── Enhanced Premium Sections ── */
.premium-section {
  background: rgba(10,10,22,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.premium-section::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bbs-cyan), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
.premium-section:hover {
  border-color: rgba(0,255,255,0.4);
  box-shadow: 0 0 30px rgba(0,255,255,0.1);
  transform: translateY(-2px);
}
.premium-section h3 {
  color: var(--bbs-cyan);
  font-size: 1.3em;
  margin-bottom: 10px;
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
}

/* ── Premium Buttons Glow ── */
.premium-btn {
  background: linear-gradient(135deg, rgba(0,255,255,0.2), rgba(255,0,255,0.2)) !important;
  border: 1px solid rgba(0,255,255,0.4) !important;
  color: var(--bbs-cyan) !important;
  border-radius: 8px !important;
  padding: 10px 24px !important;
  font-size: 1.1em !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(0,255,255,0.4);
}
.premium-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(0,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.premium-btn:hover {
  background: linear-gradient(135deg, rgba(0,255,255,0.35), rgba(255,0,255,0.35)) !important;
  box-shadow: 0 0 25px rgba(0,255,255,0.4), 0 0 50px rgba(0,255,255,0.15);
  transform: translateY(-2px);
}
.premium-btn:hover::after { opacity: 1; }
.premium-btn:disabled {
  background: rgba(40,40,60,0.5) !important;
  border-color: rgba(100,100,100,0.3) !important;
  color: var(--bbs-dim) !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ── Newspaper ANSI Art ── */
.newspaper-ansi-art {
  font-family: var(--bbs-font);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  margin: 8px auto;
  white-space: pre;
  overflow-x: auto;
  text-shadow: 0 0 8px currentColor;
  opacity: 0.85;
}

/* ── Newspaper Header ── */
.newspaper-header {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 3px double var(--bbs-yellow);
  position: relative;
}
.newspaper-title-inner {
  font-size: 1.8em;
  color: var(--bbs-yellow);
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255,255,0,0.3);
}
.newspaper-issue-date {
  color: var(--bbs-dim);
  font-size: 0.9em;
}
.newspaper-headline {
  font-size: 1.3em;
  color: var(--bbs-cyan);
  margin: 8px 0;
  border-top: 2px double var(--bbs-yellow);
  border-bottom: 2px double var(--bbs-yellow);
  padding: 8px 0;
  animation: neon-cyan 3s ease-in-out infinite;
}

/* ── Newspaper Stats Grid ── */
.newspaper-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.newspaper-stat-card {
  padding: 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.newspaper-stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.newspaper-stat-battle {
  background: rgba(255,0,0,0.08);
  border: 1px solid rgba(255,50,50,0.3);
  color: var(--bbs-red);
}
.newspaper-stat-bounty {
  background: rgba(255,255,0,0.04);
  border: 1px solid rgba(255,255,50,0.3);
  color: var(--bbs-yellow);
}
.newspaper-stat-title {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 6px;
  text-shadow: 0 0 8px currentColor;
}
.newspaper-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Stat value colors */
.stat-val-yellow { color: var(--bbs-yellow); text-shadow: 0 0 6px rgba(255,255,0,0.3); }
.stat-val-red { color: var(--bbs-red); text-shadow: 0 0 6px rgba(255,0,0,0.3); }
.stat-val-cyan { color: var(--bbs-cyan); text-shadow: 0 0 6px rgba(0,255,255,0.3); }

/* ── Newspaper Sections ── */
.newspaper-section {
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
}
.newspaper-section-title {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 1.05em;
}
.newspaper-kill-entry {
  padding: 2px 0;
  border-bottom: 1px dotted rgba(255,255,255,0.05);
}

/* ── Narrative Articles ── */
.newspaper-articles-section {
  margin-top: 16px;
  border-top: 2px double var(--bbs-yellow);
  padding-top: 12px;
}
.newspaper-article {
  margin-bottom: 14px;
  padding: 12px;
  background: rgba(0,255,255,0.03);
  border-left: 3px solid var(--bbs-cyan);
  border-radius: 0 8px 8px 0;
  transition: all 0.3s ease;
  animation: float-up 0.5s ease-out;
}
.newspaper-article:hover {
  background: rgba(0,255,255,0.08);
  border-left-width: 5px;
  box-shadow: 0 0 15px rgba(0,255,255,0.1);
}
.newspaper-article-title {
  font-weight: bold;
  color: var(--bbs-yellow);
  margin-bottom: 6px;
  font-size: 1.1em;
  text-shadow: 0 0 8px rgba(255,255,0,0.2);
}
.newspaper-article-body {
  color: var(--bbs-fg);
  line-height: 1.6;
  font-size: 0.95em;
}

/* ── Townsfolk Articles (V11) ── */
.newspaper-townsfolk-section {
  margin-top: 20px;
  border-top: 3px double var(--bbs-magenta);
  padding-top: 16px;
}
.newspaper-townsfolk-header {
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  color: var(--bbs-magenta);
  margin-bottom: 16px;
  text-shadow: 0 0 15px rgba(255,50,255,0.4);
  animation: neon-pulse 2s ease-in-out infinite;
}
.newspaper-townsfolk-article {
  margin-bottom: 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255,50,255,0.04), rgba(0,255,255,0.04));
  border: 1px solid rgba(255,50,255,0.15);
  border-left: 4px solid var(--bbs-magenta);
  border-radius: 0 10px 10px 0;
  transition: all 0.4s ease;
  animation: float-up 0.6s ease-out;
  position: relative;
  overflow: hidden;
}
.newspaper-townsfolk-article::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top right, rgba(255,50,255,0.1), transparent);
  pointer-events: none;
}
.newspaper-townsfolk-article:hover {
  background: linear-gradient(135deg, rgba(255,50,255,0.08), rgba(0,255,255,0.08));
  border-color: rgba(255,50,255,0.4);
  box-shadow: 0 0 20px rgba(255,50,255,0.15), 0 4px 15px rgba(0,0,0,0.3);
  transform: translateX(4px);
}
.newspaper-townsfolk-byline {
  font-size: 0.85em;
  color: var(--bbs-magenta);
  margin-bottom: 4px;
  opacity: 0.8;
}
.newspaper-townsfolk-title {
  font-weight: bold;
  font-size: 1.15em;
  color: var(--bbs-yellow);
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255,255,0,0.2);
}
.newspaper-townsfolk-body {
  color: var(--bbs-fg);
  line-height: 1.6;
  font-size: 0.95em;
}

/* ── Archive Button ── */
.newspaper-archive-btn {
  background: none;
  border: 1px solid var(--bbs-dim);
  color: var(--bbs-cyan);
  padding: 8px 20px;
  cursor: pointer;
  font-family: var(--bbs-font);
  border-radius: 6px;
  font-size: 1em;
  transition: all 0.3s ease;
}
.newspaper-archive-btn:hover {
  border-color: var(--bbs-cyan);
  box-shadow: 0 0 15px rgba(0,255,255,0.3);
  text-shadow: 0 0 8px rgba(0,255,255,0.5);
}

/* ── Weekly Forge Styling ── */
.forge-tier-info, .chest-tier-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  justify-content: center;
}
.forge-tier-badge, .chest-tier-badge {
  background: rgba(255,165,0,0.1);
  border: 1px solid rgba(255,165,0,0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85em;
  color: var(--bbs-yellow);
  transition: all 0.3s ease;
}
.forge-tier-badge:hover, .chest-tier-badge:hover {
  background: rgba(255,165,0,0.2);
  box-shadow: 0 0 10px rgba(255,165,0,0.3);
}
.chest-tier-badge {
  background: rgba(0,255,255,0.08);
  border-color: rgba(0,255,255,0.3);
  color: var(--bbs-cyan);
}
.chest-tier-badge:hover {
  background: rgba(0,255,255,0.15);
  box-shadow: 0 0 10px rgba(0,255,255,0.3);
}

.forge-claim-area, .chest-claim-area {
  text-align: center;
  padding: 12px 0;
}
.forge-visual, .chest-visual {
  display: inline-block;
  margin-bottom: 10px;
}
.forge-icon, .chest-icon {
  font-size: 3em;
  animation: forge-glow 2s ease-in-out infinite;
  cursor: default;
  transition: transform 0.3s;
}
.forge-icon:hover, .chest-icon:hover {
  transform: scale(1.2);
}
.chest-icon {
  animation: forge-glow 2.5s ease-in-out infinite;
}
.forge-cooldown, .chest-status {
  color: var(--bbs-dim);
  margin-top: 8px;
  font-size: 0.9em;
}
.forge-total, .chest-total {
  color: var(--bbs-dim);
  font-size: 0.85em;
  margin-top: 4px;
}
.forge-results, .chest-results {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255,165,0,0.05);
  border: 1px solid rgba(255,165,0,0.2);
  border-radius: 8px;
}
.chest-results {
  background: rgba(0,255,255,0.05);
  border-color: rgba(0,255,255,0.2);
}

/* Forge result log styling */
.forge-results-header, .chest-results-header {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--bbs-yellow);
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255,255,0,0.3);
}
.chest-results-header {
  color: var(--bbs-cyan);
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
}
.forge-log-scene, .chest-log-scene {
  color: var(--bbs-yellow);
  font-size: 1.05em;
}
.forge-log-reward, .chest-log-reward {
  color: var(--bbs-cyan);
  padding-left: 12px;
}
.forge-log-achievement, .chest-log-achievement {
  color: var(--bbs-magenta);
  font-weight: bold;
  animation: neon-pulse 1.5s ease-in-out infinite;
}
.forge-log-narrator, .chest-log-narrator {
  color: var(--bbs-dim);
  font-style: italic;
}

/* ── Chest opening animation ── */
.chest-opening .chest-icon {
  animation: chest-bounce 0.8s ease-in-out;
}
.mystery-box-opening .mystery-box-icon {
  animation: chest-bounce 0.8s ease-in-out;
}

/* ── Enhanced Nav Buttons ── */
.bbs-nav-btn {
  transition: all 0.3s ease;
  position: relative;
}
.bbs-nav-btn:hover {
  text-shadow: 0 0 12px currentColor;
  transform: translateY(-1px);
}
.bbs-nav-btn[data-panel="premium"] {
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,0,255,0.15));
  border-color: rgba(255,215,0,0.3);
}
.bbs-nav-btn[data-panel="premium"]:hover {
  border-color: rgba(255,215,0,0.7);
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}

/* ── Enhanced Panel Headers ── */
.bbs-panel h2 {
  position: relative;
  display: inline-block;
}
.bbs-panel h2::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--bbs-cyan), transparent);
  opacity: 0.5;
}

/* ── Enhanced lord-box styling ── */
.lord-box {
  background: rgba(10,10,22,0.6);
  backdrop-filter: blur(6px);
  border-radius: 10px;
}

/* ── Premium Tier Cards Enhancement ── */
.premium-tier-card {
  transition: all 0.3s ease;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.premium-tier-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3), 0 0 15px rgba(0,255,255,0.15);
}
.premium-tier-card::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  background: linear-gradient(135deg, rgba(0,255,255,0.1), transparent, rgba(255,0,255,0.1));
  border-radius: 10px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
.premium-tier-card:hover::before { opacity: 1; }

/* ── Enhanced Toast ── */
.bbs-toast {
  backdrop-filter: blur(10px);
  border-radius: 10px !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), 0 0 20px rgba(0,255,0,0.2);
  animation: float-up 0.4s ease-out;
}

/* ── Scrollbar enhancement ── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--bbs-dim), rgba(0,255,255,0.3));
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--bbs-cyan), var(--bbs-dim));
}

/* ── Premium perk list enhancement ── */
.premium-perk {
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 4px;
}
.premium-perk:hover {
  background: rgba(0,255,255,0.05);
  transform: translateX(4px);
}

/* ── Responsive fixes ── */
@media (max-width: 600px) {
  .newspaper-stats-grid { grid-template-columns: 1fr; }
  .forge-tier-info, .chest-tier-info { flex-direction: column; align-items: center; }
  .newspaper-ansi-art { font-size: 9px; }
}

/* ── Hyve theme V11 overrides ── */
body.hyve-theme .newspaper-townsfolk-section { border-top-color: rgba(0,230,118,0.3); }
body.hyve-theme .newspaper-townsfolk-header { color: #00E676; text-shadow: 0 0 15px rgba(0,230,118,0.4); }
body.hyve-theme .newspaper-townsfolk-article { border-left-color: #00E676; border-color: rgba(0,230,118,0.15); background: linear-gradient(135deg, rgba(0,230,118,0.04), rgba(0,255,255,0.04)); }
body.hyve-theme .newspaper-townsfolk-byline { color: #00E676; }
body.hyve-theme .forge-tier-badge { border-color: rgba(0,230,118,0.3); background: rgba(0,230,118,0.1); }
body.hyve-theme .chest-tier-badge { border-color: rgba(0,230,118,0.3); background: rgba(0,230,118,0.08); }
body.hyve-theme .premium-btn {
  background: linear-gradient(135deg, rgba(0,230,118,0.2), rgba(0,176,255,0.2)) !important;
  border-color: rgba(0,230,118,0.4) !important;
}
body.hyve-theme .premium-btn:hover {
  background: linear-gradient(135deg, rgba(0,230,118,0.35), rgba(0,176,255,0.35)) !important;
  box-shadow: 0 0 25px rgba(0,230,118,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   UPDATE BANNER
   ═══════════════════════════════════════════════════════════════ */
.update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-bottom: 2px solid var(--bbs-cyan, #0ff);
  padding: 0;
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  box-shadow: 0 4px 20px rgba(0,255,255,0.2);
}
.update-banner-show { transform: translateY(0); }
.update-banner-hide { transform: translateY(-100%); opacity: 0; transition: all 0.4s ease; }
.update-banner-content {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; font-size: 14px;
}
.update-banner-icon { font-size: 22px; flex-shrink: 0; }
.update-banner-text { flex: 1; color: #e0e0e0; }
.update-banner-text strong { color: #0ff; }
.update-banner-more { color: var(--bbs-yellow, #ff0); font-size: 12px; }
.update-banner-view {
  background: var(--bbs-cyan, #0ff); color: #000; border: none;
  padding: 5px 14px; border-radius: 4px; cursor: pointer;
  font-weight: bold; font-size: 12px; white-space: nowrap;
  transition: background 0.2s;
}
.update-banner-view:hover { background: #5ff; }
.update-banner-close {
  background: none; border: none; color: #888; cursor: pointer;
  font-size: 18px; padding: 4px 8px; line-height: 1;
  transition: color 0.2s;
}
.update-banner-close:hover { color: #fff; }

/* Hyve theme banner */
body.hyve-theme .update-banner {
  background: linear-gradient(135deg, #0a1a0a 0%, #0d2818 100%);
  border-bottom-color: #0f6;
  box-shadow: 0 4px 20px rgba(0,255,100,0.2);
}
body.hyve-theme .update-banner-text strong { color: #0f6; }
body.hyve-theme .update-banner-view { background: #0f6; }
body.hyve-theme .update-banner-view:hover { background: #5f8; }

/* ═══════════════════════════════════════════════════════════════
   UPDATES PANEL
   ═══════════════════════════════════════════════════════════════ */
.updates-container {
  max-width: 960px; margin: 0 auto; padding: 20px;
}
.updates-container h2 {
  color: var(--bbs-cyan, #0ff); margin: 0 0 4px; font-size: 22px;
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
}
.updates-subtitle {
  color: var(--bbs-dim, #888); font-size: 13px; margin-bottom: 20px;
}

/* Version header */
.upd-version-header {
  display: flex; align-items: center; gap: 16px;
  background: rgba(0,255,255,0.06); border: 1px solid rgba(0,255,255,0.15);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 24px;
}
.upd-version-badge {
  font-size: 28px; font-weight: bold; color: #0ff;
  background: rgba(0,255,255,0.12); border-radius: 8px;
  padding: 8px 16px; font-family: monospace;
  text-shadow: 0 0 12px rgba(0,255,255,0.5);
}
.upd-version-title { font-size: 18px; font-weight: bold; color: #eee; }
.upd-version-meta { font-size: 12px; color: var(--bbs-dim, #888); margin-top: 2px; }

/* Section titles */
.upd-section-title {
  font-size: 16px; font-weight: bold; color: var(--bbs-cyan, #0ff);
  margin: 24px 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,255,255,0.15);
}

/* Latest release block */
.upd-latest-release {
  background: linear-gradient(180deg, rgba(0,255,255,0.08), rgba(0,255,255,0.03));
  border: 1px solid rgba(0,255,255,0.22);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.upd-latest-head {
  margin-bottom: 10px;
}
.upd-latest-version {
  font-family: monospace;
  color: var(--bbs-cyan, #0ff);
  font-size: 12px;
  margin-bottom: 2px;
}
.upd-latest-title {
  color: #eee;
  font-size: 14px;
  font-weight: 600;
}
.upd-latest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upd-latest-list li {
  font-size: 13px;
  color: var(--bbs-dim, #aaa);
  padding-left: 16px;
  position: relative;
}
.upd-latest-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--bbs-cyan, #0ff);
  opacity: 0.75;
}

/* Features grid */
.upd-features-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px; margin-bottom: 8px;
}
.upd-feature-card {
  background: rgba(0,255,255,0.04); border: 1px solid rgba(0,255,255,0.1);
  border-radius: 6px; padding: 14px;
}
.upd-feature-card h4 {
  margin: 0 0 10px; font-size: 14px; color: var(--bbs-yellow, #ff0);
}
.upd-feature-list { display: flex; flex-direction: column; gap: 6px; }
.upd-feature-item { font-size: 13px; line-height: 1.4; }
.upd-feature-name {
  font-weight: bold; color: #ddd; margin-right: 6px;
}
.upd-feature-name::after { content: ' — '; color: var(--bbs-dim, #888); font-weight: normal; }
.upd-feature-desc { color: var(--bbs-dim, #aaa); }

/* Contract addresses */
.upd-contracts { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.06); }
.upd-contract-addr {
  font-size: 11px; color: var(--bbs-dim, #888); padding: 2px 0;
  font-family: monospace; word-break: break-all;
}
.upd-contract-addr span { color: #aaa; min-width: 48px; display: inline-block; }
.upd-contract-addr code { color: var(--bbs-cyan, #0ff); background: none; padding: 0; }

/* Changelog */
.upd-changelog { display: flex; flex-direction: column; gap: 12px; }
.upd-changelog-entry {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px; padding: 14px; transition: border-color 0.3s;
}
.upd-changelog-entry.upd-new {
  border-color: rgba(0,255,255,0.3);
  background: rgba(0,255,255,0.04);
}
.upd-cl-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.upd-cl-version {
  font-family: monospace; font-weight: bold; color: var(--bbs-cyan, #0ff);
  font-size: 14px;
}
.upd-cl-new-badge {
  background: #0ff; color: #000; font-size: 10px; font-weight: bold;
  padding: 1px 6px; border-radius: 3px; text-transform: uppercase;
}
.upd-cl-date { color: var(--bbs-dim, #888); font-size: 12px; margin-left: auto; }
.upd-cl-title { font-size: 14px; color: #ddd; margin-bottom: 8px; font-weight: 600; }
.upd-cl-items {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.upd-cl-items li {
  font-size: 13px; color: var(--bbs-dim, #aaa); padding: 2px 0;
  padding-left: 16px; position: relative;
}
.upd-cl-items li::before {
  content: '›'; position: absolute; left: 4px; color: var(--bbs-dim, #666);
}

/* Tags */
.upd-tag {
  display: inline-block; font-size: 10px; padding: 1px 5px;
  border-radius: 3px; margin-right: 4px; font-weight: 600;
  vertical-align: middle;
}
.upd-tag-feature { background: rgba(0,255,255,0.15); color: #0ff; }
.upd-tag-fix { background: rgba(255,100,100,0.15); color: #f88; }
.upd-tag-improve { background: rgba(255,200,0,0.15); color: #fc0; }

/* ═══ Hyve theme for updates panel ═══ */
body.hyve-theme .updates-container h2,
body.hyve-chain .updates-container h2 { color: #0f6; text-shadow: 0 0 10px rgba(0,255,100,0.3); }
body.hyve-theme .upd-version-header,
body.hyve-chain .upd-version-header { background: rgba(0,255,100,0.06); border-color: rgba(0,255,100,0.15); }
body.hyve-theme .upd-version-badge,
body.hyve-chain .upd-version-badge { color: #0f6; background: rgba(0,255,100,0.12); text-shadow: 0 0 12px rgba(0,255,100,0.5); }
body.hyve-theme .upd-section-title,
body.hyve-chain .upd-section-title { color: #0f6; border-bottom-color: rgba(0,255,100,0.15); }
body.hyve-theme .upd-latest-release,
body.hyve-chain .upd-latest-release { background: linear-gradient(180deg, rgba(0,255,100,0.1), rgba(0,255,100,0.03)); border-color: rgba(0,255,100,0.22); }
body.hyve-theme .upd-latest-version,
body.hyve-chain .upd-latest-version { color: #0f6; }
body.hyve-theme .upd-latest-list li::before,
body.hyve-chain .upd-latest-list li::before { color: #0f6; }
body.hyve-theme .upd-feature-card,
body.hyve-chain .upd-feature-card { background: rgba(0,255,100,0.04); border-color: rgba(0,255,100,0.1); }
body.hyve-theme .upd-cl-version,
body.hyve-chain .upd-cl-version { color: #0f6; }
body.hyve-theme .upd-cl-new-badge,
body.hyve-chain .upd-cl-new-badge { background: #0f6; }
body.hyve-theme .upd-changelog-entry.upd-new,
body.hyve-chain .upd-changelog-entry.upd-new { border-color: rgba(0,255,100,0.3); background: rgba(0,255,100,0.04); }
body.hyve-theme .upd-tag-feature,
body.hyve-chain .upd-tag-feature { background: rgba(0,255,100,0.15); color: #0f6; }
body.hyve-theme .upd-contract-addr code,
body.hyve-chain .upd-contract-addr code { color: #0f6; }

/* ═══ Responsive ═══ */
@media (max-width: 600px) {
  .upd-features-grid { grid-template-columns: 1fr; }
  .update-banner-content { flex-wrap: wrap; gap: 8px; padding: 8px 12px; font-size: 13px; }
  .update-banner-text { min-width: 0; }
}

/* Status bar version */
.status-version {
  color: var(--bbs-dim, #666); font-size: 11px; font-family: monospace;
  opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
.status-version:hover { opacity: 1; color: var(--bbs-cyan, #0ff); }
body.hyve-theme .status-version:hover,
body.hyve-chain .status-version:hover { color: #0f6; }


/* ═══════════════════════════════════════════════════════════════════
   A-TIER: @Mentions
   ═══════════════════════════════════════════════════════════════════ */
.chat-msg.mention-flash {
  animation: mentionFlash 1.5s ease-out;
}
@keyframes mentionFlash {
  0%   { background: rgba(255, 200, 0, 0.3); }
  100% { background: rgba(255, 200, 0, 0.08); }
}
.mention {
  color: var(--bbs-cyan, #0ff);
  font-weight: bold;
}
.mention.mention-me {
  color: #fc0;
  background: rgba(255, 200, 0, 0.15);
  border-radius: 3px;
  padding: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: Unread Badges
   ═══════════════════════════════════════════════════════════════════ */
.channel-btn {
  position: relative;
}
.unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f44;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 9px;
  padding: 0 4px;
  box-shadow: 0 0 6px rgba(255, 68, 68, 0.6);
  animation: badgePulse 2s ease-in-out infinite;
  z-index: 2;
  font-family: sans-serif;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: Typing Indicator — Discord-style animated dots
   ═══════════════════════════════════════════════════════════════════ */
#typingIndicator {
  font-size: 11px;
  color: var(--bbs-dim, #555);
  padding: 2px 8px;
  min-height: 16px;
  font-style: italic;
  display: none;
}
.typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-left: 4px;
  vertical-align: middle;
}
.typing-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bbs-green, #0f0);
  opacity: 0.4;
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Message Link Embed Previews ─────────────────────────────── */
.msg-link-embed {
  display: block;
  margin: 4px 0 2px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--bbs-cyan, #0ff);
  background: rgba(0, 255, 255, 0.04);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--bbs-dim);
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-link-embed a {
  color: var(--bbs-cyan, #0ff);
  text-decoration: none;
}
.msg-link-embed a:hover {
  text-decoration: underline;
}

/* ── Enhanced Message Entry Animations ────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
.chat-msg.new-msg {
  animation: fadeInUp 0.25s ease-out;
}

/* ── Chat Divider (Date Separator) ────────────────────────────── */
.chat-date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: var(--bbs-dim);
  font-size: 11px;
  user-select: none;
}
.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 255, 0, 0.1);
}

/* ── Glow accents for important UI elements ──────────────────── */
.chat-msg.mentioned {
  background: rgba(255, 200, 0, 0.08);
  border-left: 3px solid #fc0;
  padding-left: 8px;
  margin-left: -3px;
  box-shadow: inset 0 0 20px rgba(255, 200, 0, 0.03);
}
.chat-msg.watch-hit {
  background: rgba(0, 255, 255, 0.06);
  border-left: 3px solid var(--bbs-cyan, #0ff);
  padding-left: 8px;
  margin-left: -3px;
}

/* ── Smooth scrollbar for chat ────────────────────────────────── */
#chatMessages::-webkit-scrollbar { width: 6px; }
#chatMessages::-webkit-scrollbar-track { background: transparent; }
#chatMessages::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 0, 0.15);
  border-radius: 3px;
}
#chatMessages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: Emoji Reactions
   ═══════════════════════════════════════════════════════════════════ */
.msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
  min-height: 0;
}
.reaction-chip {
  background: rgba(0, 255, 0, 0.06);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 12px;
  padding: 1px 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--bbs-green, #0f0);
  font-family: inherit;
}
.reaction-chip:hover {
  background: rgba(0, 255, 0, 0.15);
  border-color: var(--bbs-green, #0f0);
}
.reaction-chip.mine {
  background: rgba(0, 255, 0, 0.15);
  border-color: var(--bbs-green, #0f0);
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
}
.reaction-count {
  font-size: 10px;
  opacity: 0.8;
}
.msg-react-trigger {
  position: absolute;
  top: 2px;
  right: 4px;
  opacity: 0.25;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 5px;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 3;
  line-height: 1.2;
}
.chat-msg:hover .msg-react-trigger {
  opacity: 0.8;
}
.msg-react-trigger:hover {
  opacity: 1 !important;
  border-color: var(--bbs-green, #0f0);
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}
.reaction-picker {
  position: absolute;
  top: -38px;
  right: 0;
  background: rgba(0, 10, 0, 0.95);
  border: 1px solid var(--bbs-green, #0f0);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  gap: 2px;
  z-index: 100;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
  animation: pickerFadeIn 0.15s ease-out;
}
@keyframes pickerFadeIn {
  from { opacity: 0; transform: translateY(5px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reaction-pick-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s, transform 0.1s;
}
.reaction-pick-btn:hover {
  background: rgba(0, 255, 0, 0.15);
  transform: scale(1.2);
}

/* ── Discord-style Hover Action Tray ─────────────────────────────── */
.msg-hover-tray {
  position: absolute;
  top: -14px;
  right: 6px;
  display: none;
  gap: 1px;
  background: rgba(0, 10, 0, 0.95);
  border: 1px solid rgba(0, 255, 0, 0.25);
  border-radius: 6px;
  padding: 2px 3px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  animation: trayFadeIn 0.12s ease-out;
}
.chat-msg:hover .msg-hover-tray {
  display: flex;
}
@keyframes trayFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hover-tray-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--bbs-dim, #555);
  transition: all 0.15s;
  font-family: inherit;
  line-height: 1.2;
}
.hover-tray-btn:hover {
  background: rgba(0, 255, 0, 0.12);
  color: var(--bbs-green, #0f0);
  transform: scale(1.15);
}
.hover-react-popup {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  display: flex;
  gap: 2px;
  background: rgba(0, 10, 0, 0.98);
  border: 1px solid var(--bbs-green, #0f0);
  border-radius: 8px;
  padding: 4px 5px;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 255, 0, 0.15);
  animation: pickerFadeIn 0.12s ease-out;
}
.hover-react-emoji {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: all 0.12s;
  line-height: 1;
}
.hover-react-emoji:hover {
  background: rgba(0, 255, 0, 0.15);
  transform: scale(1.25);
}
.hover-react-more {
  font-size: 16px;
  font-weight: bold;
  color: var(--bbs-dim, #555);
  border: 1px dashed rgba(0, 255, 0, 0.2);
  width: 28px;
  text-align: center;
}
.hover-react-more:hover {
  color: var(--bbs-green, #0f0);
  border-color: var(--bbs-green, #0f0);
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: Achievement Popup
   ═══════════════════════════════════════════════════════════════════ */
.achievement-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: auto;
}
.achievement-overlay.active {
  opacity: 1;
}
.achievement-overlay.dismissing {
  opacity: 0;
}
.achievement-popup {
  position: relative;
  text-align: center;
  padding: 30px 50px;
  border: 2px solid #fc0;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(40, 30, 0, 0.95), rgba(10, 8, 0, 0.98));
  box-shadow: 0 0 40px rgba(255, 200, 0, 0.3), inset 0 0 30px rgba(255, 200, 0, 0.05);
  animation: achieveSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 400px;
}
@keyframes achieveSlideIn {
  from { transform: scale(0.3) translateY(60px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.achievement-glow {
  position: absolute;
  inset: -20px;
  border-radius: 20px;
  background: radial-gradient(ellipse at center, rgba(255, 200, 0, 0.15), transparent 70%);
  animation: achieveGlow 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes achieveGlow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.achievement-icon {
  font-size: 60px;
  animation: achieveBounce 0.6s ease-out;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 15px rgba(255, 200, 0, 0.5));
}
@keyframes achieveBounce {
  0%   { transform: scale(0); }
  50%  { transform: scale(1.3); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.achievement-title {
  font-size: 12px;
  color: #fc0;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255, 200, 0, 0.5);
}
.achievement-name {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}
.achievement-desc {
  font-size: 13px;
  color: #aaa;
  margin-bottom: 8px;
}
.achievement-bonus {
  font-size: 16px;
  color: #fc0;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(255, 200, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: Chiptune Music Toggle
   ═══════════════════════════════════════════════════════════════════ */
.chiptune-toggle {
  position: fixed;
  bottom: 40px;
  right: 12px;
  background: rgba(0, 10, 0, 0.85);
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--bbs-green, #0f0);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  z-index: 1000;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chiptune-toggle:hover {
  border-color: var(--bbs-green, #0f0);
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.2);
}
.chiptune-toggle .music-icon {
  font-size: 14px;
}
.chiptune-toggle.playing {
  border-color: var(--bbs-cyan, #0ff);
  color: var(--bbs-cyan, #0ff);
  animation: musicPulse 1s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(0, 255, 255, 0.2); }
  50%      { box-shadow: 0 0 12px rgba(0, 255, 255, 0.4); }
}
.chiptune-next {
  background: none;
  border: 1px solid rgba(0, 255, 0, 0.2);
  border-radius: 3px;
  color: inherit;
  font-size: 10px;
  padding: 1px 4px;
  cursor: pointer;
  font-family: inherit;
}
.chiptune-next:hover {
  border-color: var(--bbs-green, #0f0);
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: Internet Radio Player
   ═══════════════════════════════════════════════════════════════════ */
.bbs-radio {
  position: fixed;
  bottom: 40px;
  left: 12px;
  z-index: 1000;
  font-family: inherit;
  font-size: 12px;
  user-select: none;
}
.radio-compact {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 10, 0, 0.85);
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: default;
}
.bbs-radio.playing .radio-compact {
  border-color: var(--bbs-cyan, #0ff);
  color: var(--bbs-cyan, #0ff);
}
.radio-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 255, 0, 0.25);
  flex-shrink: 0;
}
.radio-indicator.active {
  background: #0f0;
  box-shadow: 0 0 6px #0f0;
  animation: radioPulse 1.5s ease-in-out infinite;
}
.radio-indicator.buffering {
  background: #fc0;
  box-shadow: 0 0 6px #fc0;
  animation: radioPulse 0.4s ease-in-out infinite;
}
@keyframes radioPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
.radio-label {
  color: var(--bbs-green, #0f0);
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 10px;
}
.bbs-radio.playing .radio-label {
  color: var(--bbs-cyan, #0ff);
}
.radio-expand-btn {
  background: none;
  border: 1px solid rgba(0, 255, 0, 0.2);
  border-radius: 3px;
  color: var(--bbs-green, #0f0);
  font-size: 9px;
  padding: 1px 5px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.radio-expand-btn:hover {
  border-color: var(--bbs-green, #0f0);
}
.radio-panel {
  display: none;
  background: rgba(0, 10, 0, 0.92);
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 8px;
  padding: 10px;
  margin-top: 6px;
  min-width: 220px;
  backdrop-filter: blur(6px);
}
.bbs-radio.expanded .radio-panel {
  display: block;
  animation: radioSlideUp 0.2s ease-out;
}
@keyframes radioSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.radio-display {
  text-align: center;
  padding: 6px 0 8px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.15);
  margin-bottom: 8px;
}
.radio-station-name {
  color: var(--bbs-cyan, #0ff);
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}
.radio-station-genre {
  color: var(--bbs-dim, rgba(0, 255, 0, 0.5));
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.radio-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.radio-controls button {
  background: none;
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 4px;
  color: var(--bbs-green, #0f0);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.radio-controls button:hover {
  border-color: var(--bbs-green, #0f0);
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.2);
  color: #fff;
}
.radio-play-btn {
  font-size: 16px !important;
  padding: 4px 14px !important;
  border-color: var(--bbs-cyan, #0ff) !important;
  color: var(--bbs-cyan, #0ff) !important;
}
.bbs-radio.playing .radio-play-btn {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.2);
}
.radio-vol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
}
.radio-vol-icon {
  font-size: 11px;
  opacity: 0.7;
}
.radio-vol {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(0, 255, 0, 0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.radio-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bbs-green, #0f0);
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
  cursor: pointer;
}
.radio-vol::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bbs-green, #0f0);
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
  border: none;
  cursor: pointer;
}
.radio-stations-list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid rgba(0, 255, 0, 0.15);
  margin-top: 6px;
  padding-top: 6px;
}
.radio-station-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--bbs-green, #0f0);
  font-size: 11px;
  transition: background 0.15s;
}
.radio-station-item:hover {
  background: rgba(0, 255, 0, 0.08);
}
.radio-station-item.active {
  color: var(--bbs-cyan, #0ff);
  background: rgba(0, 255, 255, 0.06);
}
.radio-station-dot {
  font-size: 6px;
  opacity: 0.4;
}
.radio-station-item.active .radio-station-dot {
  opacity: 1;
  color: var(--bbs-cyan, #0ff);
  text-shadow: 0 0 4px var(--bbs-cyan, #0ff);
}
.radio-station-tag {
  margin-left: auto;
  font-size: 9px;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.radio-stations-list::-webkit-scrollbar {
  width: 4px;
}
.radio-stations-list::-webkit-scrollbar-track {
  background: transparent;
}
.radio-stations-list::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 0, 0.2);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   A-TIER: BBCode Styles (Message Boards)
   ═══════════════════════════════════════════════════════════════════ */
.bbcode-link {
  color: var(--bbs-cyan, #0ff);
  text-decoration: underline;
}
.bbcode-link:hover {
  color: #fff;
}
.bbcode-code {
  background: rgba(0, 255, 0, 0.08);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: inherit;
  font-size: 0.95em;
}
.bbcode-quote {
  border-left: 3px solid var(--bbs-dim, #555);
  padding: 6px 12px;
  margin: 6px 0;
  background: rgba(0, 255, 0, 0.03);
  font-style: italic;
}
.bbcode-quote cite {
  display: block;
  font-size: 0.9em;
  color: var(--bbs-dim, #555);
  margin-bottom: 4px;
  font-style: normal;
  font-weight: bold;
}
.bbcode-img {
  max-width: 400px;
  max-height: 300px;
  border: 1px solid rgba(0, 255, 0, 0.2);
  border-radius: 4px;
  display: block;
  margin: 4px 0;
}

/* Hyve theme adjustments for A-Tier */
body.hyve-theme .mention, body.hyve-chain .mention { color: #0f6; }
body.hyve-theme .mention.mention-me, body.hyve-chain .mention.mention-me { color: #fc0; }
body.hyve-theme .chat-msg.mentioned, body.hyve-chain .chat-msg.mentioned { border-left-color: #0f6; background: rgba(0, 255, 100, 0.08); }
body.hyve-theme .reaction-chip, body.hyve-chain .reaction-chip { border-color: rgba(0, 255, 100, 0.15); color: #0f6; }
body.hyve-theme .chiptune-toggle.playing, body.hyve-chain .chiptune-toggle.playing { border-color: #0f6; color: #0f6; }


/* ═══════════════════════════════════════════════════════════════════
   B-TIER: Activity Ticker
   ═══════════════════════════════════════════════════════════════════ */
.activity-ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: rgba(0, 8, 0, 0.92);
  border-top: 1px solid rgba(0, 255, 0, 0.15);
  overflow: hidden;
  z-index: 999;
  font-size: 12px;
  line-height: 24px;
}
.ticker-track {
  display: flex;
  gap: 40px;
  white-space: nowrap;
  animation: tickerScroll 60s linear infinite;
  padding-left: 100%;
}
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.ticker-item {
  color: var(--bbs-green, #0f0);
  flex-shrink: 0;
}
.ticker-item .ticker-icon { margin-right: 4px; }
.ticker-item.ticker-kill { color: var(--bbs-red, #f44); }
.ticker-item.ticker-gold { color: var(--bbs-yellow, #fc0); }
.ticker-item.ticker-level { color: var(--bbs-cyan, #0ff); }
.ticker-item.ticker-bounty { color: #f80; }
.ticker-item.ticker-achievement { color: #c8f; }
.ticker-close {
  position: absolute;
  right: 8px;
  top: 0;
  height: 24px;
  background: rgba(0, 8, 0, 0.95);
  border: none;
  color: var(--bbs-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 0 6px;
  z-index: 2;
}
.ticker-close:hover { color: var(--bbs-green, #0f0); }

/* ═══════════════════════════════════════════════════════════════════
   B-TIER: Theme Customizer
   ═══════════════════════════════════════════════════════════════════ */
.theme-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.theme-picker {
  background: rgba(0, 10, 0, 0.97);
  border: 2px solid var(--bbs-green, #0f0);
  border-radius: 8px;
  padding: 20px;
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(0, 255, 0, 0.15);
}
.theme-picker h3 {
  color: var(--bbs-cyan, #0ff);
  margin: 0 0 12px;
  text-align: center;
}
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.theme-preset {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.1);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.theme-preset:hover {
  transform: scale(1.1);
  border-color: #fff;
  box-shadow: 0 0 12px currentColor;
}
.theme-preset.active {
  border-color: #fff;
  box-shadow: 0 0 12px currentColor;
}
.theme-preset.active::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 0 4px #000;
}
.theme-custom-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.theme-custom-row label {
  color: var(--bbs-dim);
  font-size: 12px;
  width: 70px;
}
.theme-custom-row input[type="color"] {
  width: 32px;
  height: 24px;
  border: 1px solid var(--bbs-dim);
  background: none;
  cursor: pointer;
  border-radius: 3px;
}
.theme-picker-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}


/* Theme button in status bar */
.status-theme-btn {
  background: none;
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  padding: 1px 4px;
  margin-left: 6px;
  transition: all 0.2s;
  line-height: 1;
}
.status-theme-btn:hover {
  border-color: var(--bbs-green, #0f0);
  box-shadow: 0 0 6px rgba(0, 255, 0, 0.2);
}


/* ═══════════════════════════════════════════════════════════════════
   MAIN HALL — Hero Landing Page Overhaul
   ═══════════════════════════════════════════════════════════════════ */
.mh-hero {
  text-align: center;
  padding: 24px 20px 16px;
  position: relative;
  overflow: hidden;
}
.mh-ascii-art {
  color: var(--bbs-green, #0f0);
  font-size: 10px;
  line-height: 1.15;
  text-shadow: 0 0 10px currentColor;
  margin-bottom: 8px;
  opacity: 0.8;
  animation: asciiGlow 3s ease-in-out infinite alternate;
}
@keyframes asciiGlow {
  0% { text-shadow: 0 0 5px currentColor; opacity: 0.7; }
  100% { text-shadow: 0 0 20px currentColor, 0 0 40px currentColor; opacity: 1; }
}
@media (max-width: 600px) {
  .mh-ascii-art { font-size: 6px; }
}
.mh-hero-title {
  color: var(--bbs-cyan, #0ff) !important;
  font-size: 26px !important;
  text-shadow: 0 0 20px rgba(0,255,255,0.4), 0 0 60px rgba(0,255,255,0.1) !important;
  margin: 8px 0 4px !important;
}
.mh-hero-pulse {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bbs-cyan, #0ff), transparent);
  animation: heroPulse 4s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* Live Stats Bar */
.mh-live-bar {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 16px;
  background: rgba(0, 255, 0, 0.02);
  border: 1px solid rgba(0, 255, 0, 0.08);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mh-live-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mh-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bbs-green, #0f0);
}
.mh-live-dot.pulse-green {
  animation: livePulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px var(--bbs-green, #0f0);
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--bbs-green, #0f0); }
  50% { opacity: 0.4; box-shadow: 0 0 2px var(--bbs-green, #0f0); }
}
.mh-live-icon { font-size: 14px; }
.mh-live-val {
  font-weight: bold;
  font-size: 16px;
  color: var(--bbs-green, #0f0);
}
.mh-live-val.cyan { color: var(--bbs-cyan, #0ff); }
.mh-live-val.red { color: var(--bbs-red, #f44); }
.mh-live-label {
  color: var(--bbs-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* About Card */
.mh-about-text {
  line-height: 1.6;
  color: var(--bbs-fg);
  font-size: 13px;
}
.mh-about-text p { margin: 6px 0; }
.mh-accent { color: var(--bbs-cyan, #0ff); font-weight: bold; }
.mh-hl-game { color: var(--bbs-yellow, #fc0); }
.mh-tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mh-tag {
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.15);
  color: var(--bbs-cyan, #0ff);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Leaderboard in Main Hall */
.mh-lb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.mh-lb-chain-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.35);
  background: linear-gradient(90deg, rgba(0,255,255,0.16), rgba(0,255,255,0.05));
  color: var(--bbs-cyan, #0ff);
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-weight: bold;
}
body.hyve-chain .mh-lb-chain-pill {
  border-color: rgba(255,204,0,0.42);
  background: linear-gradient(90deg, rgba(255,204,0,0.18), rgba(255,204,0,0.05));
  color: #ffd45f;
}
.mh-lb-meta {
  color: var(--bbs-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mh-lb-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.mh-lb-select {
  min-width: 140px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(0,255,255,0.25);
  background: rgba(0,18,18,0.8);
  color: var(--bbs-cyan, #0ff);
  font-size: 11px;
}
.mh-lb-btn {
  border: 1px solid rgba(0,255,255,0.28);
  background: rgba(0,255,255,0.06);
  color: var(--bbs-cyan, #0ff);
  border-radius: 8px;
  font-size: 11px;
  padding: 5px 8px;
  cursor: pointer;
  font-family: inherit;
}
.mh-lb-btn:hover {
  background: rgba(0,255,255,0.12);
}
.mh-lb-btn.active {
  border-color: rgba(255,255,0,0.45);
  color: var(--bbs-yellow, #fc0);
  background: rgba(255,255,0,0.1);
}
.mh-lb-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mh-season-insight {
  margin: 0 0 10px;
  border: 1px solid rgba(120, 220, 255, 0.2);
  background: linear-gradient(135deg, rgba(0, 88, 120, 0.18), rgba(6, 30, 44, 0.22));
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  color: #c8f5ff;
}
.mh-season-insight strong {
  color: #f0feff;
}
.mh-season-insight .dim {
  color: var(--bbs-dim);
}
.mh-lb-signal {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--bbs-dim);
  background: rgba(255,255,255,0.03);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
.mh-lb-signal.live {
  color: #8cffb4;
  border-color: rgba(70,255,120,0.3);
  background: rgba(70,255,120,0.08);
}
.mh-lb-signal.snap {
  color: #ffe58c;
  border-color: rgba(255,224,92,0.35);
  background: rgba(255,224,92,0.08);
}
.mh-lb-signal.warn {
  color: #ff8f8f;
  border-color: rgba(255,95,95,0.35);
  background: rgba(255,95,95,0.08);
}
.mh-lb-empty {
  color: var(--bbs-dim);
  padding: 10px 0;
  text-align: center;
}
.mh-leaderboard .mh-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,255,255,0.08);
  background: linear-gradient(135deg, rgba(0,255,255,0.035), rgba(51,255,51,0.018));
  margin-bottom: 6px;
  transition: background 0.15s;
}
.mh-leaderboard .mh-lb-row:hover {
  background: linear-gradient(135deg, rgba(0,255,255,0.08), rgba(51,255,51,0.04));
  border-color: rgba(0,255,255,0.18);
}
.mh-leaderboard .mh-lb-row:last-child { margin-bottom: 0; }
.mh-lb-rank {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.mh-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  border: 1px solid rgba(0,255,255,0.25);
  background: rgba(0,255,255,0.08);
}
.mh-lb-info { flex: 1; min-width: 0; }
.mh-lb-nick {
  color: var(--bbs-white, #fff);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mh-lb-stats {
  color: var(--bbs-dim);
  font-size: 11px;
}
.mh-lb-level {
  color: var(--bbs-yellow, #fc0);
  background: rgba(255,255,0,0.08);
  border: 1px solid rgba(255,255,0,0.18);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: bold;
  font-size: 11px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.mh-rank-move {
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 6px;
  border: 1px solid transparent;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.mh-rank-move.up {
  color: #8dffb0;
  background: rgba(76, 255, 136, 0.14);
  border-color: rgba(76, 255, 136, 0.35);
}
.mh-rank-move.down {
  color: #ff9a9a;
  background: rgba(255, 102, 102, 0.12);
  border-color: rgba(255, 102, 102, 0.35);
}
.mh-rank-move.new {
  color: #8fe8ff;
  background: rgba(60, 200, 255, 0.14);
  border-color: rgba(60, 200, 255, 0.34);
}
.mh-rank-move.flat {
  color: #bcc8d3;
  background: rgba(190, 206, 220, 0.1);
  border-color: rgba(190, 206, 220, 0.24);
}

/* Quick Links / Doors Grid */
.mh-doors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 768px) {
  .mh-doors-grid { grid-template-columns: repeat(2, 1fr); }
}
.mh-door-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: rgba(0, 255, 0, 0.02);
  border: 1px solid rgba(0, 255, 0, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: inherit;
}
.mh-door-btn:hover {
  border-color: var(--bbs-cyan, #0ff);
  background: rgba(0, 255, 255, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.1);
}
.mh-door-icon { font-size: 24px; }
.mh-door-name {
  color: var(--bbs-cyan, #0ff);
  font-weight: bold;
  font-size: 13px;
}
.mh-door-desc {
  color: var(--bbs-dim);
  font-size: 10px;
  text-align: center;
}

/* Chain Info Footer */
.mh-chain-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px;
  border-top: 1px solid rgba(0, 255, 0, 0.06);
}
.mh-chain-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(0,255,0,0.1);
  background: rgba(0,0,0,0.2);
}
.mh-chain-badge.retro { border-color: rgba(0,255,0,0.15); }
.mh-chain-badge.hyve { border-color: rgba(0,255,100,0.15); }
.mh-chain-name {
  color: var(--bbs-cyan, #0ff);
  font-weight: bold;
  font-size: 13px;
}
.mh-chain-detail {
  color: var(--bbs-dim);
  font-size: 10px;
}
.mh-version-info {
  display: flex;
  gap: 6px;
  color: var(--bbs-dim);
  font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════
   CHAT S-TIER — Emoji Picker + Enhanced Input
   ═══════════════════════════════════════════════════════════════════ */
/* Emoji button in input bar */
.chat-emoji-btn, .chat-format-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s;
  line-height: 1;
  flex-shrink: 0;
}
.chat-emoji-btn:hover, .chat-format-btn:hover {
  background: rgba(0, 255, 0, 0.1);
  transform: scale(1.15);
}
.chat-format-btn { font-size: 16px; }

/* Emoji Picker Panel */
.emoji-picker-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 10, 0, 0.97);
  border: 1px solid var(--bbs-green, #0f0);
  border-radius: 8px;
  padding: 0;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0, 255, 0, 0.1);
  animation: emojiSlideUp 0.2s ease-out;
  margin: 0 8px;
}
@keyframes emojiSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.emoji-picker-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0, 255, 0, 0.1);
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.emoji-picker-tabs::-webkit-scrollbar { display: none; }
.emoji-picker-tab {
  padding: 6px 12px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  flex-shrink: 0;
  font-family: inherit;
}
.emoji-picker-tab:hover { background: rgba(0,255,0,0.05); }
.emoji-picker-tab.active {
  border-bottom-color: var(--bbs-green, #0f0);
  background: rgba(0,255,0,0.08);
}
.emoji-search-bar {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.06);
  flex-shrink: 0;
}
.emoji-search-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,255,0,0.15);
  border-radius: 4px;
  color: var(--bbs-fg);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
}
.emoji-search-input:focus { border-color: var(--bbs-green, #0f0); }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.emoji-grid::-webkit-scrollbar { width: 4px; }
.emoji-grid::-webkit-scrollbar-thumb { background: rgba(0,255,0,0.2); border-radius: 2px; }
.emoji-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: 22px;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
  padding: 0;
}
.emoji-pick:hover {
  background: rgba(0,255,0,0.12);
  transform: scale(1.25);
}
.emoji-category-label {
  grid-column: 1 / -1;
  color: var(--bbs-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 0 2px;
  border-bottom: 1px solid rgba(0,255,0,0.05);
}
/* Animated emoji shortcode output */
.animated-emoji {
  display: inline-block;
  animation: emojiPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes emojiPop {
  0% { transform: scale(0); }
  80% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.emoji-bounce {
  display: inline-block;
  animation: emojiBounce 0.6s ease infinite;
}
@keyframes emojiBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.emoji-spin {
  display: inline-block;
  animation: emojiSpin 1s linear infinite;
}
@keyframes emojiSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.emoji-pulse {
  display: inline-block;
  animation: emojiPulse 0.8s ease infinite;
}
@keyframes emojiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); }
}
.emoji-wiggle {
  display: inline-block;
  animation: emojiWiggle 0.4s ease infinite;
}
@keyframes emojiWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  75% { transform: rotate(-10deg); }
}
.emoji-glow {
  display: inline-block;
  filter: drop-shadow(0 0 4px currentColor);
  animation: emojiGlow 1.5s ease-in-out infinite alternate;
}
@keyframes emojiGlow {
  0% { filter: drop-shadow(0 0 2px currentColor); }
  100% { filter: drop-shadow(0 0 8px currentColor); }
}

/* Recently used row */
.emoji-recent-row {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(0,255,0,0.06);
  display: flex;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}
.emoji-recent-label {
  color: var(--bbs-dim);
  font-size: 10px;
  margin-right: 4px;
  flex-shrink: 0;
}

/* Enhanced chat input glow on focus */
.chat-input-bar {
  position: relative;
}
.chat-input-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bbs-green, #0f0), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.chat-input-bar:focus-within::before {
  opacity: 0.5;
}

/* Enhanced room header */
.chat-room-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.chat-room-topic {
  color: var(--bbs-dim);
  font-size: 12px;
  font-style: italic;
}

/* Animated message types */
.chat-msg.highlighted {
  background: rgba(0, 255, 255, 0.06);
  border-left: 2px solid var(--bbs-cyan, #0ff);
  padding-left: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   Message Delete Button
   ═══════════════════════════════════════════════════════════════════ */
.msg-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: none;
  border: none;
  color: var(--bbs-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 2px;
  opacity: 0;
  transition: all 0.15s;
  z-index: 2;
  line-height: 1;
}
.chat-msg:hover .msg-delete-btn {
  opacity: 0.5;
}
.msg-delete-btn:hover {
  opacity: 1 !important;
  color: var(--bbs-red, #f44);
  background: rgba(255, 50, 50, 0.1);
}

/* ════════════════════════════════════════════════════════════════════
   S-TIER MAIL SYSTEM — Full Outlook-style layout
   ════════════════════════════════════════════════════════════════════ */

.mail-layout {
  display: flex;
  height: calc(100vh - 80px);
  min-height: 500px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 255, 0.12);
}

/* ── Sidebar ── */
.mail-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: rgba(0, 10, 15, 0.9);
  border-right: 1px solid rgba(0, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.mail-sidebar-header {
  text-align: center;
  padding: 20px 12px 16px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.05) 0%, transparent 100%);
}
.mail-logo {
  font-size: 36px;
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.4));
  margin-bottom: 4px;
}
.mail-logo-text {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 6px;
  color: var(--bbs-cyan, #0ff);
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
}

/* ── Nav Buttons ── */
.mail-nav {
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mail-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--bbs-dim, #555);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.15s ease;
  position: relative;
}
.mail-nav-btn:hover {
  background: rgba(0, 255, 255, 0.05);
  color: var(--bbs-fg, #aaa);
  border-color: rgba(0, 255, 255, 0.08);
}
.mail-nav-btn.active {
  background: rgba(0, 255, 255, 0.08);
  color: var(--bbs-cyan, #0ff);
  border-color: rgba(0, 255, 255, 0.15);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.05);
}
.mail-nav-btn.compose-btn {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.12), rgba(0, 255, 255, 0.08));
  border-color: rgba(0, 255, 0, 0.2);
  color: var(--bbs-green, #0f0);
}
.mail-nav-btn.compose-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.15));
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.1);
}
.mail-nav-icon { font-size: 16px; flex-shrink: 0; }
.mail-nav-label { flex: 1; text-align: left; }
.mail-nav-badge {
  background: var(--bbs-red, #f44);
  color: #000;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 68, 68, 0.4); }
  50% { box-shadow: 0 0 12px rgba(255, 68, 68, 0.8); }
}

/* ── Sidebar Stats ── */
.mail-sidebar-stats {
  padding: 12px 14px;
  border-top: 1px solid rgba(0, 255, 255, 0.06);
  margin-top: auto;
}
.mail-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
}
.mail-stat-label { color: var(--bbs-dim, #555); }
.mail-stat-val { color: var(--bbs-cyan, #0ff); font-weight: bold; }
.mail-stat-val.unread { color: var(--bbs-red, #f44); }

/* ── Sidebar Tip ── */
.mail-sidebar-tip {
  padding: 10px 12px;
  margin: 8px;
  background: rgba(0, 255, 0, 0.04);
  border: 1px solid rgba(0, 255, 0, 0.08);
  border-radius: 6px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--bbs-dim, #555);
  line-height: 1.4;
}
.mail-tip-icon { font-size: 14px; flex-shrink: 0; }

/* ── Content Area ── */
.mail-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 5, 0, 0.4);
  overflow: hidden;
}

/* ── Compose Panel ── */
.mail-compose-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
}
.mail-compose-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 255, 0, 0.1);
  background: rgba(0, 255, 0, 0.03);
}
.mail-compose-header h3 {
  margin: 0;
  color: var(--bbs-green, #0f0);
  font-size: 16px;
}
.mail-close-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--bbs-dim, #555);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.mail-close-btn:hover { color: var(--bbs-red, #f44); border-color: var(--bbs-red, #f44); }
.mail-compose-fields {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.mail-field { display: flex; flex-direction: column; gap: 5px; }
.mail-field-label {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bbs-dim, #555);
}
.mail-field-input {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--bbs-fg, #aaa);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.mail-field-input:focus {
  border-color: var(--bbs-cyan, #0ff);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
}
.mail-field-textarea {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--bbs-fg, #aaa);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 120px;
  flex: 1;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  line-height: 1.6;
}
.mail-field-textarea:focus {
  border-color: var(--bbs-cyan, #0ff);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
}
.mail-char-counter {
  text-align: right;
  font-size: 10px;
  color: var(--bbs-dim, #555);
  margin-top: 2px;
}
.mail-compose-actions {
  padding: 14px 20px;
  border-top: 1px solid rgba(0, 255, 0, 0.08);
  display: flex;
  gap: 10px;
  align-items: center;
}
.mail-send-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.2), rgba(0, 200, 100, 0.15));
  border: 1px solid rgba(0, 255, 0, 0.3);
  border-radius: 6px;
  color: var(--bbs-green, #0f0);
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.mail-send-btn:hover {
  background: linear-gradient(135deg, rgba(0, 255, 0, 0.3), rgba(0, 200, 100, 0.25));
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
  transform: translateY(-1px);
}
.mail-send-icon { font-size: 16px; }
.mail-cancel-btn {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: var(--bbs-dim, #555);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.mail-cancel-btn:hover { color: var(--bbs-fg, #aaa); border-color: rgba(255, 255, 255, 0.2); }

/* ── Mail List ── */
.mail-list-panel {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.mail-list-panel::-webkit-scrollbar { width: 4px; }
.mail-list-panel::-webkit-scrollbar-thumb { background: rgba(0, 255, 255, 0.2); border-radius: 2px; }

/* ── Mail Cards (rendered by JS) ── */
.mail-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.mail-card:hover {
  background: rgba(0, 255, 255, 0.04);
}
.mail-card.unread {
  background: rgba(0, 255, 255, 0.03);
  border-left: 3px solid var(--bbs-cyan, #0ff);
}
.mail-card.unread .mail-card-sender { color: var(--bbs-cyan, #0ff); font-weight: bold; }
.mail-card.unread .mail-card-subject { color: var(--bbs-fg, #ccc); }
.mail-card .unread-dot {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--bbs-cyan, #0ff);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.6);
}
.mail-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  flex-shrink: 0;
  border: 2px solid rgba(0, 255, 255, 0.12);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.mail-card-body { flex: 1; min-width: 0; }
.mail-card-top { display: flex; justify-content: space-between; margin-bottom: 3px; }
.mail-card-sender {
  font-size: 13px;
  color: var(--bbs-dim, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-card-date {
  font-size: 10px;
  color: var(--bbs-dim, #555);
  flex-shrink: 0;
  margin-left: 8px;
}
.mail-card-subject {
  font-size: 13px;
  color: var(--bbs-dim, #777);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mail-card-preview {
  font-size: 11px;
  color: var(--bbs-dim, #444);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ── Mail Empty State ── */
.mail-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--bbs-dim, #555);
}
.mail-empty-icon { font-size: 64px; margin-bottom: 12px; display: block; filter: grayscale(0.5); }
.mail-empty-text { font-size: 15px; }

/* ── Message View ── */
.mail-view-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mail-view-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.08);
  background: rgba(0, 255, 255, 0.02);
  flex-shrink: 0;
}
.mail-toolbar-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.12);
  border-radius: 4px;
  color: var(--bbs-dim, #888);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.mail-toolbar-btn:hover { color: var(--bbs-cyan, #0ff); border-color: var(--bbs-cyan, #0ff); }
.mail-toolbar-btn.reply:hover { color: var(--bbs-green, #0f0); border-color: var(--bbs-green, #0f0); }
.mail-toolbar-btn.delete:hover { color: var(--bbs-red, #f44); border-color: var(--bbs-red, #f44); }
.mail-toolbar-right { display: flex; gap: 6px; }
.mail-view-body-panel {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.mail-view-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.08);
}
.mail-view-subject {
  font-size: 20px;
  font-weight: bold;
  color: var(--bbs-fg, #ccc);
  margin-bottom: 10px;
  line-height: 1.3;
}
.mail-view-meta {
  display: flex;
  gap: 16px;
  align-items: center;
}
.mail-view-from-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 15px;
  flex-shrink: 0;
  border: 2px solid rgba(0, 255, 255, 0.15);
}
.mail-view-from-info { display: flex; flex-direction: column; }
.mail-view-from {
  font-size: 13px;
  color: var(--bbs-cyan, #0ff);
  font-weight: bold;
}
.mail-view-date {
  font-size: 11px;
  color: var(--bbs-dim, #555);
}
.mail-view-body {
  color: var(--bbs-fg, #aaa);
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Mobile: Stack sidebar above content ── */
@media (max-width: 700px) {
  .mail-layout { flex-direction: column; height: auto; min-height: 0; }
  .mail-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(0, 255, 255, 0.1); }
  .mail-sidebar-header { display: none; }
  .mail-nav { flex-direction: row; padding: 8px; }
  .mail-nav-btn { padding: 8px 12px; font-size: 12px; }
  .mail-sidebar-stats, .mail-sidebar-tip { display: none; }
  .mail-content { min-height: 400px; }
}

/* ════════════════════════════════════════════════════════════════════
   S-TIER BOUNTY BOARD — Cinematic Wanted Poster style
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero Header ── */
.bounty-hero {
  position: relative;
  padding: 24px 20px 18px;
  text-align: center;
  overflow: hidden;
  border-bottom: 2px solid rgba(255, 68, 68, 0.15);
  background: linear-gradient(180deg, rgba(255, 50, 50, 0.06) 0%, transparent 80%);
}
.bounty-hero-bg {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 0, 0, 0.02) 2px,
    rgba(255, 0, 0, 0.02) 4px
  );
  pointer-events: none;
}
.bounty-hero-content { position: relative; z-index: 1; }
.bounty-ascii {
  font-size: 8px;
  line-height: 1.1;
  color: var(--bbs-red, #f44);
  text-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
  margin: 0 0 8px;
  overflow-x: auto;
}
.bounty-hero-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--bbs-red, #f44);
  text-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
  letter-spacing: 3px;
}
.bounty-hero-sub {
  font-size: 12px;
  color: var(--bbs-dim, #666);
  margin-top: 4px;
}

/* ── Live Stats Bar ── */
.bounty-live-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid rgba(255, 68, 68, 0.08);
  background: rgba(0, 0, 0, 0.3);
}
.bounty-live-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-right: 1px solid rgba(255, 68, 68, 0.06);
  font-size: 12px;
}
.bounty-live-stat:last-child { border-right: none; }
.bounty-live-icon { font-size: 16px; }
.bounty-live-val { font-weight: bold; color: var(--bbs-fg, #ccc); font-size: 14px; }
.bounty-live-val.gold { color: var(--bbs-yellow, #fc0); }
.bounty-live-val.red { color: var(--bbs-red, #f44); }
.bounty-live-val.cyan { color: var(--bbs-cyan, #0ff); }
.bounty-live-label { color: var(--bbs-dim, #555); font-size: 11px; }

/* ── Post Form (Collapsible) ── */
.bounty-post-section {
  margin: 12px 16px;
}
.bounty-post-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.08), rgba(255, 150, 50, 0.06));
  border: 1px solid rgba(255, 68, 68, 0.15);
  border-radius: 8px;
  color: var(--bbs-red, #f44);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.bounty-post-toggle:hover {
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.14), rgba(255, 150, 50, 0.1));
  box-shadow: 0 0 15px rgba(255, 68, 68, 0.1);
}
.bounty-toggle-arrow { transition: transform 0.3s; font-size: 10px; }
.bounty-post-toggle.open .bounty-toggle-arrow { transform: rotate(180deg); }
.bounty-post-form-inner {
  margin-top: 10px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 68, 68, 0.1);
  border-radius: 8px;
  animation: bountyFormSlide 0.2s ease-out;
}
@keyframes bountyFormSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.bounty-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.bounty-form-field.full { grid-column: 1 / -1; }
.bounty-form-label {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--bbs-dim, #888);
  margin-bottom: 5px;
  display: block;
}
.bounty-optional { color: var(--bbs-dim, #444); font-weight: normal; text-transform: none; letter-spacing: 0; }
.bounty-form-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 68, 68, 0.15);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--bbs-fg, #aaa);
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-sizing: border-box;
}
.bounty-form-input:focus {
  border-color: var(--bbs-red, #f44);
  box-shadow: 0 0 12px rgba(255, 68, 68, 0.15);
}
.bounty-reward-input-wrap {
  position: relative;
}
.bounty-reward-suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}
.bounty-reward-input-wrap .bounty-form-input { padding-right: 36px; }
.bounty-form-hint { font-size: 10px; color: var(--bbs-dim, #444); margin-top: 4px; }
.bounty-form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.bounty-submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 28px;
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.2), rgba(255, 120, 50, 0.15));
  border: 1px solid rgba(255, 68, 68, 0.3);
  border-radius: 6px;
  color: var(--bbs-red, #f44);
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.bounty-submit-btn:hover {
  background: linear-gradient(135deg, rgba(255, 68, 68, 0.3), rgba(255, 120, 50, 0.25));
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.2);
  transform: translateY(-1px);
}
.bounty-submit-icon { font-size: 18px; }
.bounty-form-note { font-size: 11px; color: var(--bbs-dim, #444); }

/* ── Bounty List Container ── */
.bounty-list-container {
  padding: 12px 16px;
  max-height: calc(100vh - 380px);
  overflow-y: auto;
}
.bounty-list-container::-webkit-scrollbar { width: 4px; }
.bounty-list-container::-webkit-scrollbar-thumb { background: rgba(255, 68, 68, 0.2); border-radius: 2px; }

/* ── Bounty Cards Grid ── */
.bounty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ── Bounty Card — Wanted Poster ── */
.bounty-card {
  position: relative;
  background: linear-gradient(145deg, rgba(40, 15, 15, 0.6), rgba(20, 8, 8, 0.8));
  border: 1px solid rgba(255, 68, 68, 0.12);
  border-radius: 10px;
  padding: 16px;
  transition: all 0.25s ease;
  overflow: hidden;
}
.bounty-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(255, 68, 68, 0.015) 1px,
    rgba(255, 68, 68, 0.015) 2px
  );
  pointer-events: none;
}
.bounty-card:hover {
  border-color: rgba(255, 68, 68, 0.25);
  box-shadow: 0 4px 20px rgba(255, 68, 68, 0.1), inset 0 0 20px rgba(255, 68, 68, 0.03);
  transform: translateY(-2px);
}

/* ── Card Header ── */
.bounty-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bounty-wanted-tag {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 3px;
  color: #000;
  background: var(--bbs-red, #f44);
  padding: 3px 12px;
  border-radius: 3px;
  text-shadow: none;
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.4);
  animation: wantedFlicker 3s infinite;
}
@keyframes wantedFlicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.7; }
  94% { opacity: 1; }
  96% { opacity: 0.6; }
  97% { opacity: 1; }
}
.bounty-reward-tag {
  font-size: 14px;
  font-weight: bold;
  color: var(--bbs-yellow, #fc0);
  text-shadow: 0 0 8px rgba(255, 200, 0, 0.3);
}

/* ── Target Name ── */
.bounty-target-name {
  font-size: 20px;
  font-weight: bold;
  color: var(--bbs-fg, #ccc);
  text-align: center;
  padding: 8px 0;
  margin-bottom: 8px;
  border-top: 1px dashed rgba(255, 68, 68, 0.1);
  border-bottom: 1px dashed rgba(255, 68, 68, 0.1);
  text-shadow: 0 0 10px rgba(255, 68, 68, 0.15);
}

/* ── Meta rows ── */
.bounty-meta { margin-bottom: 6px; }
.bounty-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 12px;
}
.bounty-meta-label { color: var(--bbs-dim, #555); }
.bounty-meta-value { color: var(--bbs-fg, #aaa); }

/* ── Reason Quote ── */
.bounty-reason {
  font-style: italic;
  color: var(--bbs-dim, #777);
  font-size: 12px;
  padding: 8px 12px;
  margin: 6px 0;
  border-left: 2px solid rgba(255, 68, 68, 0.2);
  background: rgba(255, 68, 68, 0.03);
  border-radius: 0 4px 4px 0;
}

/* ── Timer Bar ── */
.bounty-timer-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}
.bounty-timer-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.bounty-timer-fill.fresh { background: var(--bbs-green, #0f0); box-shadow: 0 0 6px rgba(0, 255, 0, 0.3); }
.bounty-timer-fill.aging { background: var(--bbs-yellow, #fc0); box-shadow: 0 0 6px rgba(255, 200, 0, 0.3); }
.bounty-timer-fill.expiring { background: var(--bbs-red, #f44); animation: timerPulse 1s infinite; }
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Cancel Button ── */
.bounty-cancel-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 68, 68, 0.1);
  border: 1px solid rgba(255, 68, 68, 0.2);
  color: var(--bbs-red, #f44);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
  z-index: 2;
}
.bounty-card:hover .bounty-cancel-btn { opacity: 1; }
.bounty-cancel-btn:hover {
  background: rgba(255, 68, 68, 0.2);
  box-shadow: 0 0 8px rgba(255, 68, 68, 0.3);
}

/* ── Empty State ── */
.bounty-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--bbs-dim, #555);
}
.bounty-empty-icon { font-size: 64px; margin-bottom: 12px; display: block; filter: grayscale(0.5); }

/* ── Stats Bar (inside bounty list) ── */
.bounty-stats-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(255, 68, 68, 0.04);
  border-radius: 6px;
  border: 1px solid rgba(255, 68, 68, 0.08);
}
.bounty-stat { text-align: center; flex: 1; }
.bounty-stat-value { font-weight: bold; font-size: 16px; color: var(--bbs-red, #f44); }
.bounty-stat-label { font-size: 10px; color: var(--bbs-dim, #555); text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 700px) {
  .bounty-ascii { font-size: 5px; }
  .bounty-live-bar { flex-wrap: wrap; }
  .bounty-live-stat { flex: 1 1 45%; }
  .bounty-form-grid { grid-template-columns: 1fr; }
  .bounty-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   V61: Right-Click Context Menu for Chat
   ═══════════════════════════════════════════════════════════════════ */
.chat-context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: linear-gradient(180deg, rgba(8,14,8,0.98), rgba(4,8,4,0.99));
  border: 1px solid var(--bbs-green, #0f0);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(0,255,0,0.08), inset 0 1px 0 rgba(0,255,0,0.08);
  backdrop-filter: blur(16px);
  animation: ctxMenuIn 0.15s ease-out;
  font-family: var(--bbs-font, monospace);
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: scale(0.92) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  color: var(--bbs-fg, #ccc);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s;
  text-align: left;
}
.ctx-menu-item:hover {
  background: rgba(0,255,0,0.1);
  color: var(--bbs-green, #0f0);
  text-shadow: 0 0 6px rgba(0,255,0,0.3);
}
.ctx-menu-item .ctx-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.ctx-menu-sep {
  height: 1px;
  margin: 3px 10px;
  background: rgba(0,255,0,0.12);
}
.ctx-menu-danger:hover {
  background: rgba(255,50,50,0.12) !important;
  color: #f55 !important;
  text-shadow: 0 0 6px rgba(255,50,50,0.3) !important;
}
.ctx-menu-header {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: bold;
  color: var(--bbs-green, #0f0);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  user-select: none;
  border-bottom: 1px solid rgba(0,255,0,0.08);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.ctx-reaction-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 10px;
  border-top: 1px solid rgba(0,255,0,0.08);
  animation: ctxMenuIn 0.1s ease-out;
}
.ctx-react-btn {
  background: none;
  border: 1px solid transparent;
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.12s;
  line-height: 1;
}
.ctx-react-btn:hover {
  background: rgba(0,255,0,0.15);
  border-color: rgba(0,255,0,0.2);
  transform: scale(1.25);
}

/* Hint on messages for right-click */
.chat-msg[data-msg-id] {
  cursor: context-menu;
}

/* ── Clan Server Context Menus ── */
.clan-ctx-menu {
  min-width: 180px;
  background: linear-gradient(180deg, rgba(12,8,24,0.98), rgba(8,4,16,0.99));
  border: 1px solid rgba(200,157,255,0.4);
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 20px rgba(200,157,255,0.08);
  backdrop-filter: blur(16px);
  animation: ctxMenuIn 0.15s ease-out;
  font-family: var(--bbs-font, monospace);
}
.clan-ctx-menu .ctx-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  font-size: 12px;
  color: rgba(200,157,255,0.85);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  box-sizing: border-box;
}
.clan-ctx-menu .ctx-item:hover {
  background: rgba(200,157,255,0.12);
  color: #c89dff;
}
.clan-ctx-menu .ctx-danger {
  color: rgba(255,120,120,0.85);
}
.clan-ctx-menu .ctx-danger:hover {
  background: rgba(255,50,50,0.12);
  color: #f55;
}

/* ═══════════════════════════════════════════════════════════════════
   V61: Live Blockchain Ticker
   ═══════════════════════════════════════════════════════════════════ */
.bbs-ticker-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(0,20,10,0.85), rgba(0,15,30,0.85), rgba(20,10,0,0.7));
  border-bottom: 1px solid rgba(0,255,0,0.1);
  padding: 0;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  height: 28px;
  flex-shrink: 0;
}
.ticker-toggle {
  background: none;
  border: none;
  border-right: 1px solid rgba(0,255,0,0.12);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.ticker-toggle:hover {
  background: rgba(0,255,0,0.08);
}
.ticker-toggle.collapsed {
  opacity: 0.5;
}
.ticker-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 0;
}
.ticker-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  white-space: nowrap;
  animation: tickerSlide 60s linear infinite;
  will-change: transform;
}
.ticker-scroll:hover {
  animation-play-state: paused;
}
@keyframes tickerSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-30%); }
}
.ticker-item {
  color: var(--bbs-dim, #888);
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  letter-spacing: 0.3px;
}
.ticker-chain {
  color: var(--bbs-green, #0f0);
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0,255,0,0.3);
}
.ticker-val {
  color: var(--bbs-cyan, #0ff);
  font-weight: bold;
}
.ticker-sep {
  color: rgba(0,255,0,0.2);
  font-size: 10px;
  flex-shrink: 0;
}
.ticker-feed {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.ticker-event {
  color: var(--bbs-dim, #888);
  font-size: 11px;
}
.ticker-event.dim {
  opacity: 0.5;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   V61: Mobile Responsive Overhaul — DO NOT BREAK DESKTOP
   ═══════════════════════════════════════════════════════════════════ */

/* ── Viewport meta is assumed: <meta name="viewport" content="width=device-width, initial-scale=1"> ── */

/* ── Small tablets & large phones (max 768px) ── */
@media (max-width: 768px) {
  /* Nav: horizontal scroll, smaller text */
  .bbs-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0 !important;
    padding: 0 4px !important;
  }
  .bbs-nav::-webkit-scrollbar { display: none; }
  .bbs-nav-btn {
    font-size: 13px !important;
    padding: 6px 8px !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .nav-emoji { font-size: 14px !important; }
  .nav-key { display: none !important; }
  .nav-caret { display: none !important; }

  /* Dropdowns: full width overlay */
  .nav-dropdown-menu {
    position: fixed !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-width: 100vw !important;
    border-radius: 12px 12px 0 0 !important;
    border: 1px solid rgba(0,255,0,0.15) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.8) !important;
    padding: 8px 0 !important;
    max-height: 50vh;
    overflow-y: auto;
    z-index: 300 !important;
  }
  .nav-dropdown-menu .bbs-nav-btn {
    font-size: 16px !important;
    padding: 12px 20px !important;
  }

  /* Status bar: wrap items */
  .bbs-status-bar {
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    justify-content: center !important;
  }
  .status-clock { display: none !important; }
  .status-version { display: none !important; }

  /* Ticker: smaller */
  .bbs-ticker-bar { height: 24px; }
  .ticker-item { font-size: 10px; }
  .ticker-toggle { padding: 2px 6px; font-size: 11px; }

  /* Chat layout: single column */
  .chat-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    height: calc(100vh - 160px) !important;
    min-height: 50vh !important;
  }
  /* Hide channels sidebar on mobile */
  .chat-channels {
    display: none !important;
  }
  /* Hide server strip on mobile */
  .server-strip {
    display: none !important;
  }
  /* Hide user list on mobile */
  .chat-users {
    display: none !important;
  }
  /* Mobile channel switcher (compact) */
  .chat-header {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0,255,0,0.1);
  }

  /* Chat messages area */
  .chat-messages {
    font-size: 13px !important;
  }
  .msg-time {
    font-size: 10px !important;
  }
  .msg-nick {
    font-size: 12px !important;
  }

  /* Chat input: bigger touch target */
  .chat-input-bar {
    padding: 6px 8px !important;
  }
  .chat-input-bar input {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 8px !important;
  }

  /* Emoji picker: full width on mobile */
  .emoji-picker-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 50vh !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    z-index: 500 !important;
  }
  .emoji-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
  .emoji-pick {
    font-size: 24px !important;
  }

  /* Context menu: wider on mobile */
  .chat-context-menu {
    min-width: 220px !important;
  }
  .ctx-menu-item {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }
  .ctx-react-btn {
    font-size: 24px !important;
    padding: 6px !important;
  }

  /* Panels: full width, no padding overflow */
  .bbs-panel {
    padding: 8px !important;
    overflow-x: hidden !important;
  }

  /* Site header: compact */
  .bbs-site-header {
    padding: 4px 8px !important;
  }
  .bbs-ascii-banner {
    font-size: 4px !important;
    line-height: 1.1 !important;
  }

  /* Main hall: single column */
  .mh-grid {
    grid-template-columns: 1fr !important;
  }
  .mh-hero {
    padding: 12px !important;
  }
  .mh-ascii-art {
    font-size: 4px !important;
    line-height: 1.1 !important;
  }
  .mh-hero-title {
    font-size: 18px !important;
  }
  .mh-live-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .mh-live-stat {
    flex: 1 1 45% !important;
    min-width: 100px;
  }

  /* LORD game: compact */
  .lord-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
  }

  /* Door games: single column */
  .doors-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mail layout: stack */
  .mail-layout {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }
  .mail-sidebar {
    width: 100% !important;
    max-height: 40vh;
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.1);
  }
  .mail-detail {
    width: 100% !important;
  }

  /* Bounty board: single column */
  .bounty-grid {
    grid-template-columns: 1fr !important;
  }

  /* Stats: compact */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Profile: stack */
  .profile-layout {
    flex-direction: column !important;
  }
  .profile-sidebar {
    width: 100% !important;
  }

  /* Clans: single column */
  .clan-grid {
    grid-template-columns: 1fr !important;
  }

  /* Board threads */
  .board-thread {
    padding: 8px !important;
  }

  /* Wallet panel: compact */
  .wallet-grid {
    grid-template-columns: 1fr !important;
  }

  /* Blackjack / Poker: responsive */
  .jack-table, .poker-table {
    padding: 8px !important;
  }
  .jack-cards, .poker-cards {
    gap: 4px !important;
  }
  .playing-card {
    font-size: 28px !important;
    min-width: 40px !important;
  }

  /* Who's Online table: horizontal scroll */
  .whos-online-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Very small phones (max 480px) ── */
@media (max-width: 480px) {
  .bbs-nav-btn {
    font-size: 11px !important;
    padding: 5px 6px !important;
  }
  .nav-emoji { font-size: 12px !important; }

  .chat-layout {
    height: calc(100vh - 140px) !important;
  }

  .emoji-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }

  .mh-live-stat {
    flex: 1 1 100% !important;
  }

  .lord-stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Hide ASCII art on very small screens */
  .bbs-ascii-banner,
  .mh-ascii-art,
  .bounty-ascii {
    display: none !important;
  }

  .bbs-panel {
    padding: 4px !important;
  }

  /* Bigger touch targets for all buttons */
  button, .bbs-btn, .btn {
    min-height: 36px;
  }
}

/* ── Touch-friendly improvements (hover not reliable on touch) ── */
@media (hover: none) {
  /* Remove hover-dependent reveals */
  .msg-react-trigger { display: none !important; }
  .msg-hover-tray { display: none !important; }
  .msg-delete-btn { display: none !important; }

  /* Context menu is the primary interaction on touch */
  .chat-msg[data-msg-id] {
    -webkit-touch-callout: none;
  }

  /* Bigger tap targets */
  .channel-btn {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* No hover effects that break on touch */
  .bbs-nav-btn:hover::after { width: 0; }
}

/* ════════════════════════════════════════════════════════════════
   Site Footer
   ════════════════════════════════════════════════════════════════ */
.bbs-footer {
  background: linear-gradient(180deg, #0a0a0a 0%, #050510 100%);
  border-top: 2px solid #33ff33;
  margin-top: 32px;
  padding: 0;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  color: #99aa88;
  position: relative;
  z-index: 10;
}
.bbs-footer::before {
  content: '════════════════════════════════════════════════════════════════════════════════';
  display: block;
  text-align: center;
  color: #1a3a1a;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  padding: 4px 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px 24px;
}

.footer-col { min-width: 0; }

/* Column 1 — About */
.footer-logo {
  font-size: 18px;
  font-weight: 700;
  color: #33ff33;
  margin-bottom: 6px;
  text-shadow: 0 0 8px rgba(51, 255, 51, 0.4);
}
.footer-tagline {
  font-size: 12px;
  color: #66cc66;
  margin: 0 0 10px;
  font-style: italic;
}
.footer-desc {
  font-size: 11px;
  line-height: 1.5;
  color: #778877;
  margin: 0 0 12px;
}
.footer-version {
  font-size: 10px;
  color: #556655;
  padding: 4px 8px;
  background: rgba(51, 255, 51, 0.05);
  border: 1px solid #1a3a1a;
  border-radius: 4px;
  display: inline-block;
}

/* Column headings */
.footer-heading {
  font-size: 13px;
  font-weight: 700;
  color: #33ff33;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1a3a1a;
}

/* Link lists */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links li {
  margin-bottom: 6px;
}
.footer-links a {
  color: #99aa88;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.2s, text-shadow 0.2s;
  display: inline-block;
}
.footer-links a:hover {
  color: #33ff33;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.3);
}

/* Chain info labels */
.footer-chain-label {
  color: #556655;
  font-size: 11px;
}
.footer-chain-value {
  color: #88bb88;
  font-size: 11px;
  font-weight: 600;
}

/* Social buttons */
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(51, 255, 51, 0.06);
  border: 1px solid #1a3a1a;
  border-radius: 4px;
  color: #99aa88;
  font-size: 12px;
  text-decoration: none;
  transition: all 0.2s;
  width: fit-content;
}
.footer-social-btn:hover {
  background: rgba(51, 255, 51, 0.15);
  border-color: #33ff33;
  color: #33ff33;
  text-shadow: 0 0 6px rgba(51, 255, 51, 0.3);
}
.footer-social-icon { font-size: 14px; }

/* Legal links */
.footer-legal-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-legal-links a {
  color: #667766;
  font-size: 11px;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-legal-links a:hover {
  color: #33ff33;
}

/* Bottom bar */
.footer-bottom {
  border-top: 1px solid #1a3a1a;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 24px;
}
.footer-bottom-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-copyright {
  font-size: 10px;
  color: #556655;
}
.footer-sysop {
  font-size: 10px;
  color: #445544;
}
.footer-retro {
  font-size: 10px;
  color: #334433;
  font-style: italic;
}

/* Hyve chain override */
.hyve-chain .bbs-footer {
  border-top-color: #ffcc00;
}
.hyve-chain .bbs-footer::before {
  color: #3a3a1a;
}
.hyve-chain .footer-logo {
  color: #ffcc00;
  text-shadow: 0 0 8px rgba(255, 204, 0, 0.4);
}
.hyve-chain .footer-tagline {
  color: #ccaa00;
}
.hyve-chain .footer-heading {
  color: #ffcc00;
  border-bottom-color: #3a3a1a;
}
.hyve-chain .footer-links a:hover,
.hyve-chain .footer-legal-links a:hover {
  color: #ffcc00;
  text-shadow: 0 0 6px rgba(255, 204, 0, 0.3);
}
.hyve-chain .footer-social-btn:hover {
  background: rgba(255, 204, 0, 0.15);
  border-color: #ffcc00;
  color: #ffcc00;
}
.hyve-chain .footer-version {
  background: rgba(255, 204, 0, 0.05);
  border-color: #3a3a1a;
}

/* ── Footer responsive ── */
@media (max-width: 1024px) {
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px 16px 20px;
  }
}
@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 14px 16px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }
  .footer-social {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ════════════════════════════════════════════════════════════════
   Command Palette (Ctrl/Cmd+K)
   ════════════════════════════════════════════════════════════════ */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
}

.cmdk-dialog {
  width: min(680px, 92vw);
  background: linear-gradient(180deg, rgba(7, 12, 7, 0.98), rgba(4, 8, 4, 0.98));
  border: 1px solid rgba(51, 255, 51, 0.45);
  border-radius: 10px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 28px rgba(51, 255, 51, 0.15);
  overflow: hidden;
}

.cmdk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(51, 255, 51, 0.2);
}

.cmdk-title {
  color: #7dff95;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.cmdk-hint {
  color: #8aa98a;
  font-size: 11px;
  border: 1px solid rgba(102, 170, 102, 0.4);
  border-radius: 6px;
  padding: 2px 7px;
}

.cmdk-input {
  width: calc(100% - 24px);
  margin: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(51, 255, 51, 0.25);
  background: rgba(5, 12, 5, 0.9);
  color: #d6ffd6;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.cmdk-input:focus {
  border-color: rgba(51, 255, 51, 0.6);
  box-shadow: 0 0 0 2px rgba(51, 255, 51, 0.15);
}

.cmdk-list {
  max-height: 48vh;
  overflow: auto;
  padding: 0 8px 10px;
}

.cmdk-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #d8f7d8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: 10px 11px;
  border-radius: 8px;
  cursor: pointer;
}

.cmdk-item:hover,
.cmdk-item.active {
  background: rgba(51, 255, 51, 0.16);
}

.cmdk-item-label {
  font-size: 13px;
}

.cmdk-item-group {
  font-size: 11px;
  color: #8dad8d;
}

.cmdk-empty {
  color: #92a892;
  padding: 12px;
  text-align: center;
  font-size: 13px;
}

body.hyve-chain .cmdk-dialog {
  border-color: rgba(255, 204, 0, 0.5);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 28px rgba(255, 204, 0, 0.18);
}

body.hyve-chain .cmdk-title {
  color: #ffe277;
}

body.hyve-chain .cmdk-input {
  border-color: rgba(255, 204, 0, 0.35);
}

body.hyve-chain .cmdk-input:focus {
  border-color: rgba(255, 204, 0, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.17);
}

body.hyve-chain .cmdk-item:hover,
body.hyve-chain .cmdk-item.active {
  background: rgba(255, 204, 0, 0.2);
}

@media (max-width: 640px) {
  .cmdk-overlay {
    padding-top: 4vh;
  }
  .cmdk-dialog {
    width: 96vw;
  }
  .cmdk-list {
    max-height: 58vh;
  }
}

/* ════════════════════════════════════════════════════════════════
   Next-Level UI: Notifications, Discover, Quests, Creator, Lore
   ════════════════════════════════════════════════════════════════ */
.cards-panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

.cards-sub {
  color: var(--bbs-dim);
  margin-bottom: 10px;
}

.cards-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.discover-search-toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.discover-search-kind {
  max-width: 180px;
  min-width: 140px;
}

.discover-search-meta {
  margin-left: 4px;
  margin-bottom: 0;
  opacity: 0.85;
}

.cards-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.card-item {
  border: 1px solid rgba(51, 255, 51, 0.2);
  background: rgba(10, 20, 10, 0.55);
  border-radius: 10px;
  padding: 10px 12px;
}

.card-item.unread {
  border-color: rgba(51, 255, 51, 0.45);
  box-shadow: 0 0 16px rgba(51, 255, 51, 0.1);
}

.card-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--bbs-dim);
  font-size: 12px;
}

.card-title {
  color: var(--bbs-fg);
  font-weight: 700;
  margin-top: 5px;
}

.card-sub {
  color: #9db79d;
  margin-top: 3px;
  font-size: 13px;
}

.card-pill {
  border: 1px solid rgba(51, 255, 51, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  text-transform: uppercase;
}

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

.card-empty {
  border: 1px dashed rgba(150, 180, 150, 0.4);
  color: var(--bbs-dim);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}

.quest-progress {
  margin-bottom: 10px;
  color: var(--bbs-cyan);
}

.quest-bar {
  margin-top: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  overflow: hidden;
}

.quest-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #25d366, #79ff93);
}

.quest-done {
  border-color: rgba(121, 255, 147, 0.55);
}

.creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.creator-card {
  border: 1px solid rgba(51, 255, 51, 0.25);
  background: rgba(8, 15, 8, 0.6);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.creator-card h3 {
  margin: 0 0 2px;
}

.bbs-input {
  width: 100%;
  border: 1px solid rgba(51, 255, 51, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--bbs-fg);
  padding: 9px 10px;
}

.locked {
  opacity: 0.72;
}

/* Chat advanced features */
.chat-room-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.chat-room-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.chat-room-btn {
  border: 1px solid rgba(121, 155, 121, 0.45);
  background: rgba(10, 18, 10, 0.6);
  color: var(--bbs-fg);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-room-btn:hover {
  border-color: rgba(121, 255, 147, 0.45);
  background: rgba(31, 62, 31, 0.6);
}
.chat-room-btn.has-unread {
  border-color: rgba(255, 219, 112, 0.66);
  color: #ffe8a6;
  box-shadow: 0 0 10px rgba(255, 209, 96, 0.22);
}

.chat-mod-banner,
.chat-pinned-bar,
.chat-reply-preview {
  margin: 8px 10px 0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.chat-mod-banner {
  border: 1px solid rgba(255, 180, 70, 0.5);
  background: rgba(80, 45, 5, 0.5);
  color: #ffcf8b;
}
.chat-mod-banner.liveops-info {
  border-color: rgba(0, 210, 255, 0.45);
  background: rgba(0, 55, 75, 0.45);
  color: #9eefff;
}
.chat-mod-banner.liveops-warn {
  border-color: rgba(255, 196, 70, 0.5);
  background: rgba(80, 52, 5, 0.5);
  color: #ffd99f;
}
.chat-mod-banner.liveops-alert {
  border-color: rgba(255, 100, 100, 0.6);
  background: rgba(82, 18, 18, 0.5);
  color: #ffc4c4;
}

.chat-pinned-bar {
  border: 1px solid rgba(51, 255, 51, 0.35);
  background: rgba(20, 40, 20, 0.5);
}

.pin-clear,
.announce-close,
.reply-cancel {
  border: 1px solid rgba(120, 150, 120, 0.5);
  background: rgba(0, 0, 0, 0.3);
  color: var(--bbs-fg);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
}

.msg-reply-ref {
  color: var(--bbs-cyan);
  cursor: pointer;
  margin-right: 6px;
  font-size: 12px;
}

.msg-thread-chip {
  margin-left: 8px;
  border: 1px solid rgba(0, 220, 255, 0.28);
  background: rgba(0, 220, 255, 0.08);
  color: #a6f8ff;
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 7px;
  cursor: pointer;
  font-family: inherit;
}
.msg-thread-chip:hover {
  background: rgba(0, 220, 255, 0.16);
}
.msg-bookmark-chip {
  margin-left: 6px;
  border: 1px solid rgba(255, 205, 77, 0.42);
  background: rgba(255, 205, 77, 0.12);
  color: #ffe9ba;
  font-size: 10px;
  border-radius: 999px;
  padding: 1px 7px;
  cursor: pointer;
  font-family: inherit;
}
.msg-bookmark-chip:hover {
  background: rgba(255, 205, 77, 0.2);
}
.chat-msg.bookmarked {
  border-left: 2px solid rgba(255, 205, 77, 0.74);
  padding-left: 8px;
}

.chat-thread-panel {
  margin: 8px 10px 0;
  border: 1px solid rgba(0, 220, 255, 0.28);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 50, 70, 0.32), rgba(8, 22, 30, 0.4));
}
.chat-search-panel {
  margin: 8px 10px 0;
  border: 1px solid rgba(0, 220, 255, 0.3);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(4, 42, 60, 0.34), rgba(8, 18, 28, 0.44));
}
.chat-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 220, 255, 0.2);
  color: #c5f7ff;
  font-size: 12px;
}
.chat-search-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-search-btn {
  border: 1px solid rgba(0, 220, 255, 0.35);
  background: rgba(0, 220, 255, 0.1);
  color: #c6f9ff;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-search-btn:hover {
  background: rgba(0, 220, 255, 0.18);
}
.chat-search-btn.danger {
  border-color: rgba(255, 120, 120, 0.35);
  color: #ffc1c1;
  background: rgba(255, 120, 120, 0.08);
}
.chat-search-controls {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 220, 255, 0.16);
}
.chat-search-input {
  width: 100%;
  border: 1px solid rgba(0, 220, 255, 0.34);
  background: rgba(0, 22, 30, 0.48);
  color: #cff9ff;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.chat-search-input:focus {
  border-color: rgba(0, 220, 255, 0.52);
  box-shadow: 0 0 0 2px rgba(0, 220, 255, 0.12);
}
.chat-search-meta {
  padding: 6px 10px;
  color: #8ec9d8;
  font-size: 11px;
}
.chat-search-results {
  max-height: 240px;
  overflow: auto;
  padding: 0 10px 10px;
}
.chat-search-result {
  border: 1px solid rgba(0, 220, 255, 0.25);
  border-radius: 8px;
  background: rgba(0, 220, 255, 0.06);
  padding: 7px 8px;
  margin-bottom: 7px;
}
.chat-search-result:last-child {
  margin-bottom: 0;
}
.chat-search-result.empty {
  border: 1px dashed rgba(120, 170, 185, 0.3);
  background: rgba(255, 255, 255, 0.02);
  color: #86a7b4;
  font-size: 11px;
}
.chat-search-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #92d8e8;
}
.chat-search-result-text {
  margin-top: 4px;
  color: #d7f8ff;
  font-size: 12px;
  line-height: 1.35;
}
.chat-search-result-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}
.chat-search-jump {
  border: 1px solid rgba(0, 220, 255, 0.34);
  background: rgba(0, 220, 255, 0.12);
  color: #c7f9ff;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-search-jump:hover {
  background: rgba(0, 220, 255, 0.2);
}
.chat-search-mark {
  color: #03212a;
  background: #79f0ff;
  border-radius: 4px;
  padding: 0 3px;
}
.chat-alerts-panel {
  margin: 8px 10px 0;
  border: 1px solid rgba(255, 205, 77, 0.32);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(72, 55, 10, 0.34), rgba(24, 18, 8, 0.42));
}
.chat-alerts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 205, 77, 0.22);
  color: #ffe8a7;
  font-size: 12px;
}
.chat-alerts-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-alerts-btn {
  border: 1px solid rgba(255, 205, 77, 0.3);
  background: rgba(255, 205, 77, 0.1);
  color: #ffe7ac;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-alerts-btn:hover {
  background: rgba(255, 205, 77, 0.16);
}
.chat-alerts-btn.danger {
  border-color: rgba(255, 120, 120, 0.35);
  color: #ffc1c1;
  background: rgba(255, 120, 120, 0.08);
}
.chat-alerts-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 205, 77, 0.16);
}
.chat-alert-chip {
  border: 1px solid rgba(255, 205, 77, 0.35);
  background: rgba(255, 205, 77, 0.12);
  color: #ffe8b8;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-alert-chip:hover {
  background: rgba(255, 205, 77, 0.2);
}
.chat-alert-chip.empty,
.chat-alert-hit.empty {
  border: 1px dashed rgba(210, 195, 130, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: #b4a77a;
  border-radius: 7px;
  font-size: 11px;
  padding: 6px 8px;
}
.chat-alerts-hits {
  max-height: 240px;
  overflow: auto;
  padding: 8px 10px 10px;
}
.chat-alert-hit {
  border: 1px solid rgba(255, 205, 77, 0.26);
  border-radius: 8px;
  background: rgba(255, 205, 77, 0.06);
  padding: 7px 8px;
  margin-bottom: 7px;
}
.chat-alert-hit:last-child {
  margin-bottom: 0;
}
.chat-alert-hit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #d6c593;
}
.chat-alert-hit-key {
  color: #fff0c5;
}
.chat-alert-hit-text {
  margin-top: 4px;
  color: #f4eed9;
  font-size: 12px;
  line-height: 1.35;
}
.chat-alert-hit-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}
.chat-alert-hit-jump {
  border: 1px solid rgba(255, 205, 77, 0.34);
  background: rgba(255, 205, 77, 0.12);
  color: #ffe9b8;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-alert-hit-jump:hover {
  background: rgba(255, 205, 77, 0.2);
}

.chat-bookmarks-panel {
  margin: 8px 10px 0;
  border: 1px solid rgba(255, 205, 77, 0.34);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(62, 48, 12, 0.34), rgba(20, 15, 8, 0.44));
}
.chat-bookmarks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 205, 77, 0.22);
  color: #ffe9b9;
  font-size: 12px;
}
.chat-bookmarks-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-bookmarks-btn {
  border: 1px solid rgba(255, 205, 77, 0.3);
  background: rgba(255, 205, 77, 0.1);
  color: #ffe7ac;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-bookmarks-btn:hover {
  background: rgba(255, 205, 77, 0.18);
}
.chat-bookmarks-btn.danger {
  border-color: rgba(255, 120, 120, 0.35);
  color: #ffc1c1;
  background: rgba(255, 120, 120, 0.08);
}
.chat-bookmarks-meta {
  padding: 6px 10px;
  color: #dbcda1;
  font-size: 11px;
  border-bottom: 1px solid rgba(255, 205, 77, 0.16);
}
.chat-bookmarks-list {
  max-height: 240px;
  overflow: auto;
  padding: 8px 10px 10px;
}
.chat-bookmark-item {
  border: 1px solid rgba(255, 205, 77, 0.26);
  border-radius: 8px;
  background: rgba(255, 205, 77, 0.06);
  padding: 7px 8px;
  margin-bottom: 7px;
}
.chat-bookmark-item:last-child {
  margin-bottom: 0;
}
.chat-bookmark-item.empty {
  border: 1px dashed rgba(210, 195, 130, 0.28);
  background: rgba(255, 255, 255, 0.02);
  color: #b4a77a;
  font-size: 11px;
  padding: 6px 8px;
}
.chat-bookmark-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #d6c593;
}
.chat-bookmark-text {
  margin-top: 4px;
  color: #f4eed9;
  font-size: 12px;
  line-height: 1.35;
}
.chat-bookmark-actions {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.chat-bookmark-jump,
.chat-bookmark-remove {
  border: 1px solid rgba(255, 205, 77, 0.34);
  background: rgba(255, 205, 77, 0.12);
  color: #ffe9b8;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-bookmark-jump:hover,
.chat-bookmark-remove:hover {
  background: rgba(255, 205, 77, 0.2);
}

.chat-msg.watch-hit {
  border-left: 2px solid rgba(255, 205, 77, 0.8);
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(255, 205, 77, 0.16), rgba(255, 205, 77, 0.02));
}
.chat-msg.watch-hit .msg-text {
  color: #fff3d1;
}
.chat-msg.watch-hit .msg-thread-chip {
  border-color: rgba(255, 205, 77, 0.4);
  color: #fff2c8;
}

body.hyve-chain .chat-alerts-panel {
  border-color: rgba(255, 214, 107, 0.42);
  background: linear-gradient(145deg, rgba(85, 65, 12, 0.4), rgba(28, 21, 8, 0.48));
}
body.hyve-chain .chat-bookmarks-panel {
  border-color: rgba(255, 214, 107, 0.42);
  background: linear-gradient(145deg, rgba(85, 65, 12, 0.4), rgba(28, 21, 8, 0.48));
}
body.hyve-chain .chat-search-panel {
  border-color: rgba(255, 214, 107, 0.4);
  background: linear-gradient(145deg, rgba(64, 54, 16, 0.35), rgba(24, 20, 10, 0.46));
}
body.hyve-chain .chat-search-input {
  border-color: rgba(255, 214, 107, 0.4);
}
body.hyve-chain .chat-search-input:focus {
  border-color: rgba(255, 214, 107, 0.62);
  box-shadow: 0 0 0 2px rgba(255, 214, 107, 0.14);
}
body.hyve-chain .chat-search-mark {
  background: #ffe17c;
  color: #2d2200;
}
body.hyve-chain .chat-room-btn.has-unread {
  border-color: rgba(255, 214, 107, 0.68);
  box-shadow: 0 0 12px rgba(255, 214, 107, 0.26);
}
@media (max-width: 900px) {
  .chat-room-header {
    flex-wrap: wrap;
  }
  .chat-room-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 560px) {
  .chat-room-actions {
    justify-content: space-between;
  }
  .chat-room-btn {
    flex: 1;
    text-align: center;
  }
  .chat-alerts-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.chat-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 220, 255, 0.18);
  color: #d7fbff;
  font-size: 12px;
}
.chat-thread-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-thread-btn {
  border: 1px solid rgba(0, 220, 255, 0.28);
  background: rgba(0, 220, 255, 0.08);
  color: #b4fbff;
  border-radius: 7px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.chat-thread-btn:hover {
  background: rgba(0, 220, 255, 0.15);
}
.chat-thread-btn.danger {
  border-color: rgba(255, 120, 120, 0.35);
  color: #ffc1c1;
  background: rgba(255, 120, 120, 0.08);
}
.chat-thread-body {
  max-height: 210px;
  overflow: auto;
  padding: 8px 10px;
}
.chat-thread-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 8px;
  margin-bottom: 7px;
  background: rgba(255, 255, 255, 0.03);
}
.chat-thread-item:last-child {
  margin-bottom: 0;
}
.chat-thread-item.reply {
  margin-left: 14px;
  border-left: 3px solid rgba(0, 220, 255, 0.35);
}
.chat-thread-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.chat-thread-nick {
  color: #e9fdff;
}
.chat-thread-time {
  color: var(--bbs-dim);
}
.chat-thread-text {
  color: var(--bbs-fg);
  font-size: 12px;
  line-height: 1.35;
  word-wrap: break-word;
}

.chat-trust {
  display: inline-block;
  font-size: 10px;
  color: #b8d9b8;
  border: 1px solid rgba(120, 190, 120, 0.35);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

#chatVoiceBtn.recording {
  color: #ff7272;
  border-color: #ff7272;
  box-shadow: 0 0 12px rgba(255, 114, 114, 0.35);
}

.chat-reactor-board {
  border: 1px solid rgba(51, 255, 51, 0.25);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 8px;
  font-size: 12px;
}

.reactor-title {
  color: var(--bbs-yellow);
  margin-bottom: 6px;
}

.reactor-row {
  display: flex;
  justify-content: space-between;
  color: var(--bbs-fg);
  margin: 2px 0;
}

/* Mobile sticky nav */
.bbs-mobile-nav {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2100;
  border: 1px solid rgba(51, 255, 51, 0.3);
  border-radius: 12px;
  background: rgba(4, 10, 4, 0.95);
  backdrop-filter: blur(4px);
  padding: 6px;
  display: none;
  justify-content: space-between;
  gap: 6px;
}

.bbs-mobile-nav button {
  flex: 1;
  border: 1px solid rgba(70, 170, 70, 0.35);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--bbs-fg);
  padding: 8px 0;
  font-size: 16px;
}

/* Multi-column upgrades on wider desktop */
@media (min-width: 1500px) {
  #panel-chat .chat-layout {
    grid-template-columns: 52px 280px minmax(600px, 1fr) 320px;
  }
  .cards-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .creator-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .bbs-mobile-nav {
    display: flex;
  }
  .bbs-panel {
    padding-bottom: 76px;
  }
  .cards-list {
    grid-template-columns: 1fr;
  }
}


/* ══ V13: Hamburger Button ══════════════════════════ */
.bbs-hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(51,255,51,0.3);
  border-radius: 6px;
  color: var(--bbs-fg);
  font-size: 22px;
  padding: 4px 10px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
@media (max-width: 768px) {
  .bbs-hamburger { display: flex; align-items: center; justify-content: center; }
}

/* ══ V13: Mobile Full-Screen Menu Overlay ═══════════ */
.bbs-mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 6, 2, 0.98);
  overflow-y: auto;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.bbs-mobile-menu-overlay.open {
  display: flex;
}
.mobile-menu-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(51,255,51,0.15);
}
.mobile-menu-title {
  color: var(--bbs-green, #33ff33);
  font-size: 18px;
  font-weight: bold;
  font-family: var(--font-term, monospace);
}
.mobile-menu-close {
  background: transparent;
  border: 1px solid rgba(51,255,51,0.3);
  color: var(--bbs-fg);
  font-size: 20px;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.mobile-menu-body {
  padding: 8px 16px 100px;
  flex: 1;
}
.mobile-menu-section {
  margin-bottom: 12px;
}
.mobile-menu-label {
  color: rgba(51,255,51,0.5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 12px 4px;
  font-family: var(--font-term, monospace);
}
.mobile-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(51,255,51,0.06);
  color: var(--bbs-fg);
  font-size: 16px;
  padding: 14px 12px;
  cursor: pointer;
  font-family: var(--font-term, monospace);
  transition: background 0.15s;
}
.mobile-menu-item:hover, .mobile-menu-item:active {
  background: rgba(51,255,51,0.08);
}
.mobile-nav-hamburger {
  font-size: 18px !important;
  font-weight: bold;
}

/* ══ V13: Creator Hub Full Styles ═══════════════════ */
.creator-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(51,255,51,0.15);
  margin-bottom: 16px;
  overflow-x: auto;
}
.creator-tab {
  background: transparent;
  border: none;
  color: rgba(51,255,51,0.5);
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--font-term, monospace);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.creator-tab:hover { color: var(--bbs-fg); }
.creator-tab.active {
  color: var(--bbs-green, #33ff33);
  border-bottom-color: var(--bbs-green, #33ff33);
}
.creator-tab-pane { display: none; }
.creator-tab-pane.active { display: block; }

.creator-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.creator-filter-row .bbs-select { flex: 1; }

.creator-event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.creator-event-card {
  border: 1px solid rgba(51,255,51,0.15);
  border-radius: 8px;
  padding: 14px;
  background: rgba(0,0,0,0.25);
  cursor: pointer;
  transition: border-color 0.2s;
}
.creator-event-card:hover {
  border-color: rgba(51,255,51,0.4);
}
.creator-event-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
}
.creator-event-card-title {
  font-weight: bold;
  color: var(--bbs-green, #33ff33);
  font-size: 15px;
}
.creator-event-card-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-term, monospace);
}
.badge-open { background: rgba(51,255,51,0.15); color: #33ff33; border: 1px solid rgba(51,255,51,0.3); }
.badge-active { background: rgba(255,200,0,0.15); color: #ffc800; border: 1px solid rgba(255,200,0,0.3); }
.badge-completed { background: rgba(100,100,255,0.15); color: #aaaaff; border: 1px solid rgba(100,100,255,0.3); }
.badge-cancelled { background: rgba(255,60,60,0.15); color: #ff6666; border: 1px solid rgba(255,60,60,0.3); }
.creator-event-card-meta {
  font-size: 12px;
  color: rgba(51,255,51,0.5);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}
.creator-event-card-meta span { white-space: nowrap; }

.creator-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 700px;
}
.creator-form-row { display: flex; flex-direction: column; gap: 4px; }
.creator-form-row label {
  font-size: 12px;
  color: rgba(51,255,51,0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-term, monospace);
}
.creator-form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 600px) { .creator-form-row-grid { grid-template-columns: 1fr; } }

.bbs-btn-primary {
  background: rgba(51,255,51,0.15) !important;
  border-color: rgba(51,255,51,0.4) !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
}
.bbs-btn-primary:hover {
  background: rgba(51,255,51,0.25) !important;
}
.bbs-btn-sm {
  font-size: 12px !important;
  padding: 4px 10px !important;
}

/* Creator Detail Overlay */
.creator-detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(2,6,2,0.97);
  overflow-y: auto;
  padding: 16px;
}
.creator-detail-card {
  max-width: 800px;
  margin: 0 auto;
}
.creator-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.creator-detail-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--bbs-green, #33ff33);
}
.creator-detail-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.creator-detail-section {
  border: 1px solid rgba(51,255,51,0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0,0,0,0.2);
}
.creator-detail-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(51,255,51,0.7);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.creator-leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-term, monospace);
  font-size: 13px;
}
.creator-leaderboard th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(51,255,51,0.2);
  color: rgba(51,255,51,0.6);
  font-size: 11px;
  text-transform: uppercase;
}
.creator-leaderboard td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(51,255,51,0.06);
}
.creator-leaderboard tr:first-child td { color: #ffd700; }
.creator-leaderboard tr:nth-child(2) td { color: #c0c0c0; }
.creator-leaderboard tr:nth-child(3) td { color: #cd7f32; }
.creator-action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.creator-score-input {
  width: 80px;
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════════════════
   V14: Pre-Season 1 — Early Adopter Styles
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Lore Pre-Season Banner ── */
.preseason-lore-banner {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
  text-align: center;
}
.lore-season-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 0.4rem 1.5rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: preseasonPulse 2s ease-in-out infinite;
}
@keyframes preseasonPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); }
  50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.7); }
}
.lore-intro {
  color: var(--bbs-text);
  opacity: 0.9;
  line-height: 1.7;
  margin: 0.5rem 0;
}
.preseason-lore-chapters { margin: 1.5rem 0; }
.lore-chapter {
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--bbs-cyan);
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
  border-radius: 0 8px 8px 0;
}
.lore-chapter h3 { color: var(--bbs-cyan); margin: 0 0 0.5rem; font-size: 1rem; }
.lore-chapter p { color: var(--bbs-text); opacity: 0.85; line-height: 1.6; margin: 0; }
.lore-chapter em { color: var(--bbs-green); }

/* ── Pre-Season Container ── */
.preseason-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

/* ── Hero ── */
.preseason-hero {
  text-align: center;
  padding: 2rem 1rem;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.15);
  margin-bottom: 1.5rem;
}
.preseason-hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0.3rem 1.2rem;
  border-radius: 20px;
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
  animation: preseasonPulse 2s ease-in-out infinite;
}
.preseason-hero h2 { color: var(--bbs-text); margin: 0.5rem 0; }
.preseason-hero-sub { color: var(--bbs-text); opacity: 0.7; max-width: 500px; margin: 0.5rem auto; }
.preseason-slot-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 1.1rem;
}
.preseason-slots-label { color: var(--bbs-text); opacity: 0.6; }
.preseason-slots-val {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.preseason-slots-chain { color: var(--bbs-text); opacity: 0.5; }

/* ── Status Card ── */
.preseason-status-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1rem 0;
}
.preseason-status-enrolled {
  text-align: center;
}
.preseason-tier-badge {
  display: inline-block;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.preseason-tier-name {
  font-size: 1.3rem;
  font-weight: bold;
}
.preseason-tier-pioneer { color: #ffd700; }
.preseason-tier-settler { color: #c0c0c0; }
.preseason-tier-explorer { color: #cd7f32; }
.preseason-points-display {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffd700;
  margin: 0.5rem 0;
}
.preseason-rank-display { color: var(--bbs-text); opacity: 0.7; margin: 0.3rem 0; }

/* ── Not enrolled card ── */
.preseason-enroll-card {
  text-align: center;
  padding: 2rem;
}
.preseason-enroll-card h3 { color: var(--bbs-cyan); margin-bottom: 0.5rem; }
.preseason-enroll-card p { color: var(--bbs-text); opacity: 0.7; margin-bottom: 1rem; }
.preseason-tiers-preview {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.preseason-tier-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1rem;
  min-width: 140px;
  text-align: center;
}
.preseason-tier-card-emoji { font-size: 2rem; }
.preseason-tier-card-name { font-weight: bold; margin: 0.3rem 0; color: var(--bbs-text); }
.preseason-tier-card-desc { font-size: 0.8rem; color: var(--bbs-text); opacity: 0.5; }

/* ── Action Buttons ── */
.preseason-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.2rem 0;
}
.preseason-btn {
  padding: 0.7rem 1.5rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.95rem;
  transition: all 0.2s;
}
.preseason-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.preseason-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.preseason-btn-register {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #000;
  font-size: 1.1rem;
  padding: 0.9rem 2rem;
}
.preseason-btn-welcome {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
}
.preseason-btn-daily {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}
.preseason-btn-weekly {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}

/* ── Box Result ── */
.preseason-box-result {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(255, 215, 0, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 1.2rem;
  margin: 1rem 0;
  animation: boxAppear 0.5s ease-out;
}
@keyframes boxAppear {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.box-result-scene {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd700;
  margin-bottom: 0.5rem;
}
.box-result-loot {
  padding: 0.3rem 0;
  color: var(--bbs-green);
  font-size: 0.95rem;
}
.box-result-points {
  text-align: center;
  margin-top: 0.5rem;
  color: #ffd700;
  font-weight: bold;
}

/* ── Tabs ── */
.preseason-tabs {
  display: flex;
  gap: 0;
  margin: 1rem 0 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.preseason-tab {
  background: none;
  border: none;
  color: var(--bbs-text);
  opacity: 0.5;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  margin-bottom: -2px;
}
.preseason-tab:hover { opacity: 0.8; }
.preseason-tab.active {
  opacity: 1;
  color: #ffd700;
  border-bottom-color: #ffd700;
}
.preseason-tab-pane { display: none; padding: 1rem 0; }
.preseason-tab-pane.active { display: block; }

/* ── Leaderboard ── */
.preseason-lb-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.6rem;
}
.preseason-chain-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.42);
  background: linear-gradient(90deg, rgba(255,215,0,0.16), rgba(255,215,0,0.05));
  color: #ffd700;
  font-size: 0.72rem;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-weight: bold;
}
body.hyve-chain .preseason-chain-pill {
  border-color: rgba(255,204,0,0.44);
  background: linear-gradient(90deg, rgba(255,204,0,0.18), rgba(255,204,0,0.06));
  color: #ffd45f;
}
.preseason-lb-count {
  font-size: 0.72rem;
  color: var(--bbs-text);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.9px;
}
.preseason-lb-wrap {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.015);
}
.preseason-leaderboard table {
  width: 100%;
  border-collapse: collapse;
}
.preseason-leaderboard th {
  text-align: left;
  color: var(--bbs-text);
  opacity: 0.5;
  font-size: 0.8rem;
  text-transform: uppercase;
  padding: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.preseason-leaderboard td {
  padding: 0.6rem 0.5rem;
  color: var(--bbs-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.preseason-leaderboard tr:hover td { background: rgba(255,255,255,0.03); }
.preseason-leaderboard tr:nth-child(1) td { color: #ffd700; font-weight: bold; }
.preseason-leaderboard tr:nth-child(2) td { color: #c0c0c0; }
.preseason-leaderboard tr:nth-child(3) td { color: #cd7f32; }
.preseason-lb-rank { font-weight: bold; width: 40px; }
.preseason-lb-points { color: #ffd700 !important; font-weight: bold; }
.preseason-player { color: var(--bbs-text); font-weight: 600; }
.preseason-tier-cell {
  text-transform: capitalize;
  font-size: 0.82rem;
  letter-spacing: 0.3px;
}
.preseason-tier-cell.preseason-tier-pioneer { color: #ffd700; }
.preseason-tier-cell.preseason-tier-settler { color: #c0c0c0; }
.preseason-tier-cell.preseason-tier-explorer { color: #cd7f32; }

/* ── Stats Panel ── */
.preseason-stats-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.preseason-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}
.preseason-stat-val {
  font-size: 1.8rem;
  font-weight: bold;
  color: #ffd700;
}
.preseason-stat-label {
  font-size: 0.8rem;
  color: var(--bbs-text);
  opacity: 0.5;
  margin-top: 0.3rem;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .preseason-tiers-preview { flex-direction: column; align-items: center; }
  .preseason-actions { flex-direction: column; }
  .preseason-btn { width: 100%; }
  .preseason-stats-panel { grid-template-columns: 1fr 1fr; }
}

/* PvP Arena Targets */
.pvp-target-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pvp-target-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bbs-surface, #1a1a2e); border: 1px solid var(--bbs-border, #333); border-radius: 6px; color: var(--bbs-text, #c8c8db); cursor: pointer; font-family: inherit; font-size: 13px; transition: all 0.2s; }
.pvp-target-btn:hover { border-color: var(--bbs-red, #ff4444); background: rgba(255,68,68,0.1); color: #fff; }

/* Lord game loading dots */
.lord-loading-dots { text-align: center; padding: 1rem; color: var(--bbs-dim, #666); font-size: 14px; animation: lordPulse 1.5s ease-in-out infinite; }
@keyframes lordPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.dot-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bbs-green, #0f0); margin-right: 6px; animation: dotBlink 1s ease-in-out infinite; }
@keyframes dotBlink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* Gold Marketplace */
.gold-market-tab { font-size: 12px !important; padding: 4px 12px !important; }
.gold-market-tab.active { background: var(--bbs-yellow) !important; color: #000 !important; }
.gold-market-pane { min-height: 50px; }

/* ═══════════════════════════════════════════════════ */
/*  WAGER ARENA — Enhanced Styles                      */
/* ═══════════════════════════════════════════════════ */

.wager-header h3 { color: var(--bbs-yellow); margin-bottom: 4px; }
.wager-subtitle { color: var(--bbs-dim); font-size: 13px; margin-bottom: 12px; }

.wager-create-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}
.wager-create-title { color: var(--bbs-cyan); font-weight: bold; font-size: 14px; margin-bottom: 8px; }
.wager-create-row { display: flex; flex-direction: column; gap: 8px; }
.wager-quick-amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.wager-quick-btn {
  font-size: 13px !important;
  padding: 4px 14px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bbs-border) !important;
  color: var(--bbs-yellow) !important;
  cursor: pointer;
  transition: all 0.15s;
}
.wager-quick-btn:hover {
  background: var(--bbs-yellow) !important;
  color: #000 !important;
}
.wager-create-input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.wager-create-input .lord-input { flex: 1; max-width: 180px; }
.wager-create-note { font-size: 11px; color: var(--bbs-dim); margin-top: 6px; }

.wager-stats-bar {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 10px 0;
  font-size: 12px;
}
.wager-stats-bar span { white-space: nowrap; }

.wager-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.wager-card:hover { border-color: var(--bbs-magenta); }
.wager-card.wager-yours { border-color: var(--bbs-cyan); background: rgba(0,255,255,0.03); }
.wager-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.wager-amount { font-size: 18px; font-weight: bold; color: var(--bbs-yellow); }
.wager-challenger { color: var(--bbs-magenta); font-size: 13px; }
.wager-age { color: var(--bbs-dim); font-size: 11px; }
.wager-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.wager-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
}
.wager-tag.yours { color: var(--bbs-cyan); border: 1px solid var(--bbs-cyan); }
.wager-pot { font-size: 12px; color: var(--bbs-dim); }

.wager-card-bottom .bbs-btn { font-size: 12px !important; padding: 4px 12px !important; }

.wager-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--bbs-border);
  font-size: 12px;
  color: var(--bbs-dim);
}

/* ═══════════════════════════════════════════════════ */
/*  GOLD MARKETPLACE — Enhanced Styles                 */
/* ═══════════════════════════════════════════════════ */

.gm-panel { }
.gm-header h3 { color: var(--bbs-yellow); margin-bottom: 4px; }
.gm-desc { color: var(--bbs-dim); font-size: 13px; margin-bottom: 12px; line-height: 1.4; }
.gm-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.gold-market-tab { font-size: 12px !important; padding: 5px 14px !important; border-radius: 6px !important; }
.gold-market-tab.active { background: var(--bbs-yellow) !important; color: #000 !important; font-weight: bold !important; }
.gold-market-pane { min-height: 60px; }

/* Browse — Stats bar */
.gm-stats-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.gm-stat { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.gm-stat-label { font-size: 10px; text-transform: uppercase; color: var(--bbs-dim); letter-spacing: 0.5px; }
.gm-stat-val { font-size: 14px; font-weight: bold; color: var(--bbs-fg); }

/* Insights + chart */
.gm-insights-area { margin-bottom: 12px; }
.gm-insights-card {
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  background: rgba(0,0,0,0.26);
  padding: 10px 12px;
}
.gm-chart-head {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gm-chart-title {
  color: var(--bbs-cyan);
  font-size: 13px;
  font-weight: bold;
}
.gm-chart-ranges { display: flex; gap: 6px; }
.gm-chart-range-btn {
  border: 1px solid var(--bbs-border);
  background: rgba(255,255,255,0.04);
  color: var(--bbs-fg);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
}
.gm-chart-range-btn:hover {
  border-color: var(--bbs-yellow);
  color: var(--bbs-yellow);
}
.gm-chart-range-btn.active {
  background: rgba(255,215,0,0.15);
  border-color: var(--bbs-yellow);
  color: var(--bbs-yellow);
}
.gm-chart-wrap {
  margin-top: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 220, 255, 0.05), rgba(0,0,0,0.15));
  padding: 6px;
  min-height: 210px;
}
.gm-chart-svg {
  width: 100%;
  height: 210px;
  display: block;
}
.gm-chart-grid {
  stroke: rgba(255,255,255,0.12);
  stroke-width: 1;
}
.gm-chart-y-label {
  fill: var(--bbs-dim);
  font-size: 9px;
  text-anchor: end;
}
.gm-chart-x-label {
  fill: var(--bbs-dim);
  font-size: 10px;
  text-anchor: middle;
}
.gm-chart-area {
  fill: rgba(0,255,170,0.12);
  stroke: none;
}
.gm-chart-line {
  fill: none;
  stroke: var(--bbs-green);
  stroke-width: 2.2;
}
.gm-chart-bar {
  fill: rgba(255, 215, 0, 0.38);
}
.gm-chart-dot {
  fill: var(--bbs-cyan);
  stroke: rgba(0,0,0,0.8);
  stroke-width: 1;
}
.gm-chart-empty {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bbs-dim);
  font-size: 13px;
}
.gm-chart-summary {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  font-size: 12px;
  color: var(--bbs-dim);
}
.gm-chart-summary b { color: var(--bbs-fg); }
.gm-change.up b { color: var(--bbs-green); }
.gm-change.down b { color: var(--bbs-red); }
.gm-change.flat b { color: var(--bbs-dim); }
.gm-trade-tape-title {
  margin-top: 8px;
  margin-bottom: 6px;
  color: var(--bbs-cyan);
  font-size: 12px;
  font-weight: bold;
}
.gm-trade-tape {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.gm-trade-pill {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  padding: 6px 8px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gm-trade-main { color: var(--bbs-yellow); font-weight: bold; font-size: 13px; }
.gm-trade-sub { color: var(--bbs-green); font-size: 12px; }
.gm-trade-rate { color: var(--bbs-fg); font-size: 11px; }
.gm-trade-meta { color: var(--bbs-dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Browse — Listing cards */
.gm-listing-grid { display: flex; flex-direction: column; gap: 8px; }
.gm-listing-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  padding: 10px 14px;
  position: relative;
  transition: border-color 0.2s, transform 0.15s;
}
.gm-listing-card:hover { border-color: var(--bbs-yellow); transform: translateY(-1px); }
.gm-listing-card.gm-best-deal { border-color: var(--bbs-green); background: rgba(0,255,100,0.04); }
.gm-badge {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--bbs-green);
  color: #000;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
}
.gm-listing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.gm-listing-seller { color: var(--bbs-cyan); font-size: 13px; }
.gm-listing-age { color: var(--bbs-dim); font-size: 11px; }
.gm-listing-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.gm-listing-gold { display: flex; align-items: baseline; gap: 4px; }
.gm-gold-amount { font-size: 22px; font-weight: bold; color: var(--bbs-yellow); }
.gm-gold-label { font-size: 12px; color: var(--bbs-dim); }
.gm-listing-price { text-align: right; }
.gm-price-main { font-size: 16px; font-weight: bold; color: var(--bbs-green); }
.gm-price-rate { font-size: 11px; color: var(--bbs-dim); }
.gm-listing-footer { display: flex; justify-content: flex-end; align-items: center; }
.gm-tag-yours { font-size: 12px; color: var(--bbs-dim); }
.gm-listing-footer .bbs-btn { font-size: 13px !important; padding: 5px 16px !important; }

/* Empty states */
.gm-empty {
  text-align: center;
  padding: 30px 10px;
  color: var(--bbs-dim);
}

/* Sell form */
.gm-sell-form { }
.gm-sell-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.gm-sell-field { display: flex; flex-direction: column; gap: 4px; }
.gm-sell-field label { font-size: 12px; color: var(--bbs-dim); }
.gm-sell-field .lord-input { width: 140px; }
.gm-field-hint { font-size: 10px; color: var(--bbs-dim); opacity: 0.7; }
.gm-btc-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gm-btc-btn {
  font-size: 12px !important;
  padding: 4px 10px !important;
}
.gm-btc-hint {
  font-size: 11px;
  color: var(--bbs-cyan);
  opacity: 0.9;
}
.gm-btc-index-row {
  margin-bottom: 8px;
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 6px;
  background: rgba(0, 120, 170, 0.08);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--bbs-fg);
}
.gm-btc-index-row strong {
  color: var(--bbs-cyan);
}
.gm-btc-index-row .stale {
  color: var(--bbs-yellow);
}

/* ═══════════════════════════════════════════════════════════════════
   DUNGEON CRAWLS — Full Retro RPG UI
   ═══════════════════════════════════════════════════════════════════ */
.dg-header { margin-bottom: 12px; }
.dg-title-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.dg-title { color: var(--bbs-yellow); margin: 0; font-size: 1.3em; text-shadow: 0 0 10px rgba(255,200,0,0.3); }
.dg-nav-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.dg-nav-btn {
  background: rgba(0,255,0,0.05); border: 1px solid rgba(0,255,0,0.25); color: var(--bbs-green);
  padding: 5px 12px; border-radius: 4px; cursor: pointer; font-family: var(--bbs-font, monospace);
  font-size: 12px; transition: all 0.15s; letter-spacing: 0.5px;
}
.dg-nav-btn:hover { background: rgba(0,255,0,0.12); border-color: var(--bbs-green); text-shadow: 0 0 6px rgba(0,255,0,0.3); }
.dg-nav-btn.active { background: rgba(0,255,0,0.15); border-color: var(--bbs-green); color: #fff; }
.dg-nav-create { border-color: rgba(255,200,0,0.4); color: var(--bbs-yellow); }
.dg-nav-create:hover { background: rgba(255,200,0,0.1); border-color: var(--bbs-yellow); text-shadow: 0 0 6px rgba(255,200,0,0.3); }

.dg-ascii-banner {
  color: var(--bbs-yellow); font-size: 12px; line-height: 1.3; margin: 0;
  text-shadow: 0 0 8px rgba(255,200,0,0.15); user-select: none;
  opacity: 0.85;
}

.dg-section {
  border: 1px solid rgba(0,255,0,0.12); border-radius: 6px;
  background: rgba(0,8,0,0.6); padding: 12px; margin-bottom: 10px;
}
.dg-loading { color: var(--bbs-dim); font-style: italic; text-align: center; padding: 20px; }

/* ─── Create Form ─── */
.dg-create-box {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
}
.dg-create-ascii {
  color: var(--bbs-cyan); font-size: 11px; line-height: 1.25; margin: 0;
  text-shadow: 0 0 6px rgba(0,255,255,0.12); flex-shrink: 0;
  opacity: 0.9;
}
.dg-create-fields { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 6px; }
.dg-label { color: var(--bbs-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.dg-input {
  background: rgba(0,8,0,0.8); border: 1px solid rgba(0,255,0,0.2); color: var(--bbs-green);
  padding: 8px 10px; border-radius: 4px; font-family: var(--bbs-font, monospace); font-size: 13px;
  transition: border-color 0.15s;
}
.dg-input:focus { border-color: var(--bbs-cyan); outline: none; box-shadow: 0 0 8px rgba(0,255,255,0.12); }
.dg-input::placeholder { color: rgba(0,255,0,0.3); }
.dg-depth-row { display: flex; align-items: center; gap: 8px; }
.dg-depth-input { flex: 1; accent-color: var(--bbs-yellow); }
.dg-depth-val { color: var(--bbs-yellow); font-weight: bold; font-size: 18px; min-width: 24px; text-align: center; }
.dg-depth-label { color: var(--bbs-dim); font-size: 11px; }
.dg-difficulty-hint { color: var(--bbs-yellow); font-size: 11px; opacity: 0.8; }
.dg-create-btn {
  background: linear-gradient(180deg, rgba(255,200,0,0.15), rgba(255,150,0,0.08));
  border: 1px solid rgba(255,200,0,0.5); color: var(--bbs-yellow);
  padding: 10px 20px; border-radius: 6px; cursor: pointer; font-family: var(--bbs-font, monospace);
  font-size: 14px; font-weight: bold; letter-spacing: 1px; margin-top: 8px;
  transition: all 0.2s; text-shadow: 0 0 8px rgba(255,200,0,0.2);
}
.dg-create-btn:hover {
  background: linear-gradient(180deg, rgba(255,200,0,0.25), rgba(255,150,0,0.15));
  border-color: var(--bbs-yellow); box-shadow: 0 0 20px rgba(255,200,0,0.15);
  transform: translateY(-1px);
}

/* ─── Party List ─── */
.dg-party-list { display: flex; flex-direction: column; gap: 8px; }
.dg-party-card {
  border: 1px solid rgba(0,255,0,0.15); border-radius: 6px; padding: 10px 12px;
  background: rgba(0,12,0,0.5); display: flex; justify-content: space-between;
  align-items: center; gap: 12px; transition: border-color 0.15s;
}
.dg-party-card:hover { border-color: rgba(0,255,0,0.35); }
.dg-party-info { flex: 1; }
.dg-party-name { color: var(--bbs-cyan); font-weight: bold; font-size: 14px; }
.dg-party-meta { color: var(--bbs-dim); font-size: 11px; margin-top: 2px; }
.dg-party-meta span { margin-right: 10px; }
.dg-party-players { color: var(--bbs-green); }
.dg-party-depth { color: var(--bbs-yellow); }
.dg-party-status { text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
.dg-party-status.lobby { color: var(--bbs-green); }
.dg-party-status.active { color: var(--bbs-yellow); }
.dg-join-btn {
  background: rgba(0,255,0,0.08); border: 1px solid rgba(0,255,0,0.3); color: var(--bbs-green);
  padding: 6px 16px; border-radius: 4px; cursor: pointer; font-family: var(--bbs-font, monospace);
  font-size: 12px; transition: all 0.15s; white-space: nowrap;
}
.dg-join-btn:hover { background: rgba(0,255,0,0.18); border-color: var(--bbs-green); }

/* ─── Dungeon Status ─── */
.dg-status-header { text-align: center; margin-bottom: 10px; }
.dg-status-title { color: var(--bbs-cyan); font-size: 16px; margin: 0; text-shadow: 0 0 8px rgba(0,255,255,0.15); }
.dg-status-progress { color: var(--bbs-dim); font-size: 11px; margin-top: 2px; }
.dg-progress-bar {
  height: 6px; background: rgba(0,255,0,0.08); border-radius: 3px;
  margin: 6px 0; overflow: hidden;
}
.dg-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--bbs-green), var(--bbs-cyan));
  border-radius: 3px; transition: width 0.5s ease;
}
.dg-party-roster {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 10px 0; padding: 8px; border: 1px solid rgba(0,255,0,0.08);
  border-radius: 6px; background: rgba(0,0,0,0.3);
}
.dg-player-card {
  text-align: center; padding: 6px 10px; min-width: 80px;
  border: 1px solid rgba(0,255,0,0.12); border-radius: 4px;
  background: rgba(0,8,0,0.5);
}
.dg-player-card.dead { opacity: 0.4; border-color: rgba(255,0,0,0.3); }
.dg-player-name { font-size: 12px; font-weight: bold; color: var(--bbs-fg); }
.dg-player-hp { font-size: 11px; margin-top: 2px; }
.dg-player-stats { font-size: 10px; color: var(--bbs-dim); margin-top: 1px; }
.dg-hp-bar {
  height: 4px; background: rgba(255,0,0,0.15); border-radius: 2px;
  margin-top: 3px; overflow: hidden;
}
.dg-hp-fill { height: 100%; border-radius: 2px; transition: width 0.4s ease; }
.dg-hp-fill.hp-high { background: var(--bbs-green); }
.dg-hp-fill.hp-mid { background: var(--bbs-yellow); }
.dg-hp-fill.hp-low { background: var(--bbs-red); }

/* ─── Room Display ─── */
.dg-room-box {
  border: 1px solid rgba(0,255,255,0.2); border-radius: 6px; padding: 12px;
  background: rgba(0,20,20,0.4); margin: 8px 0; text-align: center;
}
.dg-room-ascii {
  font-size: 11px; line-height: 1.2; margin: 0 0 8px 0;
  text-shadow: 0 0 4px rgba(0,255,0,0.1);
}
.dg-room-ascii.fight { color: var(--bbs-red); }
.dg-room-ascii.trap { color: var(--bbs-yellow); }
.dg-room-ascii.treasure { color: #ffd700; }
.dg-room-ascii.rest { color: var(--bbs-green); }
.dg-room-ascii.boss { color: #ff00ff; text-shadow: 0 0 10px rgba(255,0,255,0.2); }
.dg-room-type { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }
.dg-room-desc { color: var(--bbs-fg); font-size: 13px; }
.dg-room-difficulty {
  display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 1px;
}
.dg-diff-easy { background: rgba(0,255,0,0.1); color: var(--bbs-green); border: 1px solid rgba(0,255,0,0.2); }
.dg-diff-med { background: rgba(255,200,0,0.1); color: var(--bbs-yellow); border: 1px solid rgba(255,200,0,0.2); }
.dg-diff-hard { background: rgba(255,0,0,0.1); color: var(--bbs-red); border: 1px solid rgba(255,0,0,0.2); }
.dg-diff-boss { background: rgba(255,0,255,0.1); color: #ff00ff; border: 1px solid rgba(255,0,255,0.2); }

/* ─── Vote / Action Buttons ─── */
.dg-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,255,0,0.08);
}
.dg-action-btn {
  background: rgba(0,255,0,0.06); border: 1px solid rgba(0,255,0,0.25); color: var(--bbs-green);
  padding: 8px 18px; border-radius: 5px; cursor: pointer; font-family: var(--bbs-font, monospace);
  font-size: 13px; transition: all 0.15s; display: flex; align-items: center; gap: 6px;
}
.dg-action-btn:hover { background: rgba(0,255,0,0.15); border-color: var(--bbs-green); transform: translateY(-1px); }
.dg-action-btn.proceed { border-color: rgba(0,255,255,0.4); color: var(--bbs-cyan); }
.dg-action-btn.proceed:hover { background: rgba(0,255,255,0.12); border-color: var(--bbs-cyan); }
.dg-action-btn.retreat { border-color: rgba(255,200,0,0.4); color: var(--bbs-yellow); }
.dg-action-btn.retreat:hover { background: rgba(255,200,0,0.1); border-color: var(--bbs-yellow); }
.dg-action-btn.danger { border-color: rgba(255,50,50,0.4); color: var(--bbs-red); }
.dg-action-btn.danger:hover { background: rgba(255,50,50,0.12); border-color: var(--bbs-red); }
.dg-action-btn.start { border-color: rgba(255,200,0,0.5); color: var(--bbs-yellow); font-weight: bold; }
.dg-action-btn.start:hover { background: rgba(255,200,0,0.15); }
.dg-action-btn.search { border-color: rgba(100,200,255,0.4); color: #64c8ff; }
.dg-action-btn.search:hover { background: rgba(100,200,255,0.1); border-color: #64c8ff; }
.dg-action-btn.potion { border-color: rgba(200,100,255,0.4); color: #c864ff; }
.dg-action-btn.potion:hover { background: rgba(200,100,255,0.1); border-color: #c864ff; }

/* ─── Combat / Result Log ─── */
.dg-result-box {
  border: 1px solid rgba(0,255,0,0.12); border-radius: 6px; padding: 10px;
  background: rgba(0,0,0,0.4); margin: 8px 0;
}
.dg-result-title { color: var(--bbs-cyan); font-size: 13px; font-weight: bold; margin-bottom: 6px; }
.dg-combat-line {
  font-size: 12px; padding: 2px 0; border-bottom: 1px solid rgba(0,255,0,0.04);
  display: flex; gap: 6px; align-items: baseline;
}
.dg-combat-line:last-child { border-bottom: none; }
.dg-combat-icon { width: 16px; text-align: center; flex-shrink: 0; }
.dg-dmg-dealt { color: var(--bbs-red); }
.dg-dmg-taken { color: var(--bbs-yellow); }
.dg-heal { color: var(--bbs-green); }
.dg-loot { color: #ffd700; }
.dg-dodge { color: var(--bbs-cyan); }
.dg-death { color: var(--bbs-red); font-weight: bold; }

/* ─── Loot Summary ─── */
.dg-loot-box {
  border: 1px solid rgba(255,215,0,0.25); border-radius: 6px; padding: 10px;
  background: rgba(40,30,0,0.3); margin: 8px 0; text-align: center;
}
.dg-loot-title { color: #ffd700; font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.dg-loot-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dg-loot-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border: 1px solid rgba(255,215,0,0.2); border-radius: 4px;
  background: rgba(255,215,0,0.05); color: #ffd700; font-size: 12px;
}

/* ─── Empty State ─── */
.dg-empty {
  text-align: center; padding: 30px 20px; color: var(--bbs-dim);
}
.dg-empty-ascii {
  font-size: 11px; line-height: 1.2; margin: 0 0 10px 0; color: var(--bbs-dim);
  opacity: 0.6;
}
.dg-empty-text { font-size: 13px; }

/* ─── Vote Tracker ─── */
.dg-vote-tracker {
  text-align: center; margin: 6px 0; font-size: 11px; color: var(--bbs-dim);
}
.dg-vote-count { color: var(--bbs-green); font-weight: bold; }

@keyframes dgFlashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.dg-flash-in { animation: dgFlashIn 0.3s ease-out; }

/* ─── Guide / Help Nav Button ─── */
.dg-nav-help { border-color: rgba(200,100,255,0.4); color: #c864ff; }
.dg-nav-help:hover { background: rgba(200,100,255,0.1); border-color: #c864ff; text-shadow: 0 0 6px rgba(200,100,255,0.3); }

/* ─── Minimap ─── */
.dg-minimap {
  border: 1px solid rgba(0,255,255,0.15); border-radius: 6px; padding: 8px 12px;
  background: rgba(0,12,12,0.4); margin-bottom: 10px; text-align: center;
}
.dg-minimap-title { color: var(--bbs-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.dg-minimap-track {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 2px; font-family: var(--bbs-font, monospace);
}
.dg-map-node {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 1px solid rgba(0,255,0,0.15); border-radius: 4px;
  background: rgba(0,0,0,0.4); font-size: 10px; position: relative; transition: all 0.2s;
}
.dg-map-node.cleared { border-color: rgba(0,255,0,0.4); background: rgba(0,255,0,0.06); }
.dg-map-node.current {
  border-color: var(--bbs-cyan); background: rgba(0,255,255,0.12);
  box-shadow: 0 0 8px rgba(0,255,255,0.2); animation: dgPulseNode 1.5s ease-in-out infinite;
}
.dg-map-node.unknown { border-color: rgba(255,255,255,0.06); opacity: 0.4; }
.dg-map-icon { font-size: 11px; line-height: 1; }
.dg-map-num { font-size: 7px; color: var(--bbs-dim); line-height: 1; }
.dg-map-conn { color: var(--bbs-dim); font-size: 10px; opacity: 0.4; padding: 0 1px; }
@keyframes dgPulseNode {
  0%, 100% { box-shadow: 0 0 8px rgba(0,255,255,0.2); }
  50% { box-shadow: 0 0 14px rgba(0,255,255,0.4); }
}

/* ─── Monster Card ─── */
.dg-monster-card {
  border: 1px solid rgba(255,0,0,0.3); border-radius: 6px; padding: 10px;
  background: rgba(30,0,0,0.4); margin: 8px 0; text-align: center;
}
.dg-monster-name { color: var(--bbs-red); font-size: 15px; font-weight: bold; text-shadow: 0 0 8px rgba(255,0,0,0.2); }
.dg-monster-stats { display: flex; gap: 12px; justify-content: center; margin: 6px 0; font-size: 11px; }
.dg-mstat { color: var(--bbs-dim); }
.dg-mstat b { color: var(--bbs-fg); }
.dg-monster-hp-bar {
  height: 8px; background: rgba(255,0,0,0.1); border-radius: 4px;
  margin: 6px auto 0; max-width: 200px; overflow: hidden; border: 1px solid rgba(255,0,0,0.2);
}
.dg-monster-hp-fill {
  height: 100%; background: linear-gradient(90deg, #ff3333, #ff6644);
  border-radius: 4px; transition: width 0.5s ease;
}

/* ─── Actions Grid ─── */
.dg-actions-grid {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,255,0,0.08);
}
.dg-action-group {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.dg-action-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--bbs-dim); opacity: 0.7;
}
.dg-action-row { display: flex; gap: 6px; }

/* ─── Stance Buttons ─── */
.dg-action-btn.defend { border-color: rgba(100,200,255,0.4); color: #64c8ff; }
.dg-action-btn.defend:hover { background: rgba(100,200,255,0.1); border-color: #64c8ff; }
.dg-action-btn.rally { border-color: rgba(255,150,50,0.4); color: #ff9632; }
.dg-action-btn.rally:hover { background: rgba(255,150,50,0.1); border-color: #ff9632; }
.dg-action-btn.active-stance {
  background: rgba(0,255,0,0.12) !important; border-color: var(--bbs-green) !important;
  color: #fff !important; box-shadow: 0 0 10px rgba(0,255,0,0.15);
}
.dg-action-btn:disabled, .dg-action-btn[disabled] {
  opacity: 0.35; cursor: not-allowed; transform: none !important;
  filter: grayscale(0.5);
}
.dg-action-btn:disabled:hover, .dg-action-btn[disabled]:hover {
  background: rgba(0,255,0,0.06); transform: none;
}

/* ─── Keyboard Hints ─── */
.dg-kbd {
  display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px; padding: 0 4px; font-size: 9px; color: var(--bbs-dim);
  font-family: var(--bbs-font, monospace); line-height: 1.6; margin-left: 4px;
  vertical-align: middle;
}
.dg-kbd-hint {
  text-align: center; margin-top: 6px; font-size: 10px; color: var(--bbs-dim); opacity: 0.5;
}

/* ─── Vote Progress Bar ─── */
.dg-vote-progress { margin: 8px 0; }
.dg-vote-progress-bar {
  height: 8px; background: rgba(0,255,0,0.06); border-radius: 4px;
  overflow: hidden; border: 1px solid rgba(0,255,0,0.12);
}
.dg-vote-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--bbs-green), var(--bbs-cyan));
  border-radius: 4px; transition: width 0.4s ease;
}
.dg-vote-progress-text {
  font-size: 10px; color: var(--bbs-dim); text-align: center; margin-top: 3px;
}
.dg-vote-breakdown { font-size: 11px; color: var(--bbs-dim); text-align: center; margin: 4px 0; }
.dg-vote-nick { color: var(--bbs-cyan); }

/* ─── Player Card Enhancements ─── */
.dg-player-card.is-me {
  border-color: rgba(0,255,255,0.35); background: rgba(0,20,20,0.5);
  box-shadow: 0 0 8px rgba(0,255,255,0.08);
}
.dg-me-tag {
  font-size: 8px; color: var(--bbs-cyan); text-transform: uppercase;
  letter-spacing: 1px; opacity: 0.8; display: block; margin-bottom: 1px;
}
.dg-player-loot { font-size: 9px; color: #ffd700; margin-top: 2px; }
.dg-player-stance { font-size: 9px; margin-top: 1px; }

/* ─── Status Badge ─── */
.dg-status-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px;
}
.dg-status-badge.lobby { background: rgba(0,255,0,0.1); color: var(--bbs-green); border: 1px solid rgba(0,255,0,0.2); }
.dg-status-badge.active { background: rgba(255,200,0,0.1); color: var(--bbs-yellow); border: 1px solid rgba(255,200,0,0.2); }
.dg-status-badge.completed { background: rgba(0,255,255,0.1); color: var(--bbs-cyan); border: 1px solid rgba(0,255,255,0.2); }

/* ─── Lobby ─── */
.dg-lobby-info {
  text-align: center; padding: 12px; border: 1px dashed rgba(0,255,0,0.15);
  border-radius: 6px; margin: 8px 0; background: rgba(0,8,0,0.3);
}
.dg-lobby-waiting {
  color: var(--bbs-dim); font-size: 12px; font-style: italic;
  animation: dgPulseText 2s ease-in-out infinite;
}
.dg-lobby-hint { color: var(--bbs-dim); font-size: 10px; margin-top: 6px; opacity: 0.7; }
@keyframes dgPulseText {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ─── Active Notice ─── */
.dg-active-notice {
  border: 1px solid rgba(255,200,0,0.3); border-radius: 6px; padding: 10px;
  background: rgba(40,30,0,0.3); text-align: center; margin-bottom: 10px;
  color: var(--bbs-yellow); font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.dg-active-notice:hover {
  background: rgba(40,30,0,0.5); border-color: var(--bbs-yellow);
  box-shadow: 0 0 12px rgba(255,200,0,0.12);
}

/* ─── Party In-Progress Badge ─── */
.dg-party-in-progress {
  font-size: 10px; color: var(--bbs-yellow); opacity: 0.8;
}
.dg-party-progress { color: var(--bbs-dim); font-size: 10px; }
.dg-progress-text { color: var(--bbs-dim); font-size: 10px; }

/* ─── Log Section ─── */
.dg-log-section {
  border: 1px solid rgba(0,255,0,0.1); border-radius: 6px; padding: 10px;
  background: rgba(0,0,0,0.3); margin-top: 10px; max-height: 200px;
  overflow-y: auto;
}
.dg-log-title {
  color: var(--bbs-dim); font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px;
}
.dg-log-entries { display: flex; flex-direction: column; gap: 2px; }
.dg-log-entry { font-size: 11px; color: var(--bbs-dim); padding: 2px 0; border-bottom: 1px solid rgba(0,255,0,0.03); }
.dg-log-room { color: var(--bbs-cyan); font-weight: bold; }

/* ─── Completion / Failure Screens ─── */
.dg-victory-ascii {
  color: var(--bbs-green); font-size: 12px; line-height: 1.25; margin: 0 0 10px;
  text-shadow: 0 0 10px rgba(0,255,0,0.2); text-align: center;
}
.dg-defeat-ascii {
  color: var(--bbs-red); font-size: 12px; line-height: 1.25; margin: 0 0 10px;
  text-shadow: 0 0 10px rgba(255,0,0,0.2); text-align: center;
}
.dg-completion { text-align: center; }
.dg-failure { text-align: center; }
.dg-loot-total {
  font-size: 16px; color: #ffd700; font-weight: bold; margin: 6px 0;
  text-shadow: 0 0 8px rgba(255,215,0,0.2);
}
.dg-loot-val { color: #ffd700; font-weight: bold; }
.dg-fail-reason { color: var(--bbs-red); font-size: 13px; margin: 6px 0; }

/* ─── Fight Result Titles ─── */
.dg-fight-title { color: var(--bbs-cyan); font-size: 14px; font-weight: bold; margin-bottom: 6px; }
.dg-fight-victory { color: var(--bbs-green); font-weight: bold; font-size: 13px; }
.dg-fight-defeat { color: var(--bbs-red); font-weight: bold; font-size: 13px; }
.dg-result-subtitle { color: var(--bbs-dim); font-size: 11px; margin-bottom: 8px; }

/* ─── Room Transitions ─── */
.dg-descend-text {
  color: var(--bbs-cyan); font-size: 13px; text-align: center; margin: 8px 0;
  font-style: italic; opacity: 0.9;
}
.dg-next-room { text-align: center; margin-top: 8px; }

/* ─── Stance Announce ─── */
.dg-stance-announce {
  text-align: center; padding: 8px; border: 1px solid rgba(0,255,0,0.12);
  border-radius: 6px; background: rgba(0,8,0,0.4); margin: 6px 0;
  font-size: 12px;
}
.dg-trap-hint {
  color: var(--bbs-dim); font-size: 11px; text-align: center; margin-top: 4px;
  font-style: italic; opacity: 0.7;
}

/* ─── Help / Guide Section ─── */
.dg-help-toggle {
  display: none; /* toggled via JS */
}
.dg-help-section {
  padding: 12px; animation: dgFlashIn 0.3s ease-out;
}
.dg-help-ascii {
  color: var(--bbs-cyan); font-size: 11px; line-height: 1.25; margin: 0 0 12px;
  text-shadow: 0 0 6px rgba(0,255,255,0.12); text-align: center;
}
.dg-help-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.dg-help-card {
  border: 1px solid rgba(0,255,0,0.15); border-radius: 6px; padding: 10px;
  background: rgba(0,8,0,0.5);
}
.dg-help-card-title {
  color: var(--bbs-yellow); font-size: 13px; font-weight: bold;
  margin-bottom: 6px; border-bottom: 1px solid rgba(0,255,0,0.08);
  padding-bottom: 4px;
}
.dg-help-card-body {
  font-size: 11px; color: var(--bbs-fg); line-height: 1.5;
}
.dg-help-card-body b { color: var(--bbs-cyan); }
.dg-help-card-body .dg-help-item { margin: 3px 0; }
.dg-help-keyboard {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px; margin-top: 8px;
}
.dg-help-key-row {
  display: flex; align-items: center; gap: 8px; font-size: 11px;
}
.dg-help-key-row .dg-kbd { min-width: 20px; text-align: center; }

/* ─── Confirm Dialog ─── */
.dg-confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.dg-confirm-box {
  border: 1px solid rgba(255,200,0,0.4); border-radius: 8px;
  background: rgba(0,8,0,0.95); padding: 20px; max-width: 320px;
  text-align: center; box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.dg-confirm-text { color: var(--bbs-yellow); font-size: 14px; margin-bottom: 14px; }
.dg-confirm-btns { display: flex; gap: 8px; justify-content: center; }

@media (max-width: 600px) {
  .dg-minimap-track { gap: 1px; }
  .dg-map-node { width: 22px; height: 22px; font-size: 8px; }
  .dg-help-grid { grid-template-columns: 1fr; }
  .dg-actions-grid { gap: 6px; }
  .dg-action-btn { padding: 6px 12px; font-size: 11px; }
  .dg-monster-card { padding: 8px; }
}
.gm-sell-preview {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.gm-preview-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; }
.gm-sell-btn { width: 100%; margin-bottom: 8px; }
.gm-sell-note { font-size: 11px; color: var(--bbs-dim); text-align: center; }

/* My Listings */
.gm-my-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--bbs-border);
  margin-bottom: 10px;
}
.gm-my-list { display: flex; flex-direction: column; gap: 6px; }
.gm-my-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  padding: 8px 12px;
}
.gm-my-card.gm-status-active { border-left: 3px solid var(--bbs-green); }
.gm-my-card.gm-status-sold { border-left: 3px solid var(--bbs-yellow); opacity: 0.8; }
.gm-my-card.gm-status-cancelled { border-left: 3px solid var(--bbs-dim); opacity: 0.5; }
.gm-my-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
}
.gm-my-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gm-my-card-bottom .bbs-btn { font-size: 11px !important; padding: 3px 10px !important; }
.gm-status-label { font-size: 11px; color: var(--bbs-dim); text-transform: uppercase; }

@media (max-width: 720px) {
  .gm-chart-wrap { min-height: 180px; }
  .gm-chart-svg { height: 180px; }
  .gm-chart-summary { gap: 6px 10px; font-size: 11px; }
  .gm-trade-pill { min-width: 160px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LEVERAGED TRADING PANEL
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header & Desc ── */
.trading-panel { overflow: visible; }
.trading-header { text-align: center; margin-bottom: 10px; }
.trading-header h3 { color: var(--bbs-cyan); margin: 0 0 6px; font-family: var(--bbs-font, monospace); }
.trading-desc {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: var(--bbs-dim);
  margin: 0;
  line-height: 1.6;
}

/* ── Tabs ── */
.trading-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.trading-tab-btn {
  flex: 1;
  min-width: 100px;
  text-align: center;
}
.trading-pane { font-family: var(--bbs-font, monospace); }

/* ── Overview Bar ── */
.trading-overview-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 8px 12px;
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.1);
  border-radius: 6px;
  margin-bottom: 10px;
  font-family: var(--bbs-font, monospace);
}
.trading-ov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 70px;
}
.trading-ov-label {
  font-size: 10px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.trading-ov-val {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
}

/* ── Rate Info ── */
.trading-rate-info { margin-bottom: 12px; }
.trading-rate-live {
  font-family: var(--bbs-font, monospace);
  font-size: 13px;
  color: #fff;
  padding: 8px 12px;
  background: rgba(0,255,0,0.05);
  border: 1px solid rgba(0,255,0,0.15);
  border-radius: 5px;
  text-align: center;
}
.trading-rate-live strong { color: var(--bbs-yellow); }
.trading-rate-warn {
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: var(--bbs-red);
  padding: 10px 12px;
  background: rgba(255,0,0,0.05);
  border: 1px solid rgba(255,0,0,0.15);
  border-radius: 5px;
  text-align: center;
}

/* ── Open Form ── */
.trading-open-form {
  max-width: 500px;
  margin: 0 auto;
}
.trading-form-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.trading-form-field {
  flex: 1;
}
.trading-form-field label {
  display: block;
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-cyan);
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.trading-form-field select.lord-input {
  width: 100%;
}
.trading-field-hint {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim);
  display: block;
  margin-top: 2px;
}
.trading-open-btn {
  width: 100%;
  margin-top: 8px;
  font-size: 14px !important;
  padding: 10px !important;
}

/* ── Preview ── */
.trading-preview {
  background: rgba(0,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.12);
  border-radius: 5px;
  padding: 10px 14px;
  margin-top: 10px;
}
.trading-preview-grid { display: flex; flex-direction: column; gap: 4px; }
.trading-pv-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  color: #ccc;
}
.trading-pv-row span:first-child { color: var(--bbs-dim); }
.trading-pv-sep {
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 4px 0;
}
.trading-dir-long { color: var(--bbs-green); font-weight: bold; }
.trading-dir-short { color: var(--bbs-red); font-weight: bold; }

/* ── Risk Warning ── */
.trading-risk-warn {
  font-family: var(--bbs-font, monospace);
  font-size: 10px;
  color: var(--bbs-dim);
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,0,0,0.03);
  border: 1px solid rgba(255,0,0,0.08);
  border-radius: 4px;
  line-height: 1.6;
}
.trading-risk-warn strong { color: var(--bbs-red); }

/* ── Position Cards ── */
.trading-empty {
  text-align: center;
  padding: 20px;
  font-family: var(--bbs-font, monospace);
  color: var(--bbs-dim);
}
.trading-pos-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trading-pos-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 12px;
  transition: border-color 0.15s;
}
.trading-pos-card:hover { border-color: rgba(0,255,255,0.2); }
.trading-pos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.trading-pos-dir {
  font-family: var(--bbs-font, monospace);
  font-size: 14px;
  font-weight: bold;
}
.trading-pos-age {
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  color: var(--bbs-dim);
}
.trading-pos-body { margin-bottom: 10px; }
.trading-pos-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--bbs-font, monospace);
  font-size: 12px;
  padding: 2px 0;
  color: #ccc;
}
.trading-pos-row span:first-child { color: var(--bbs-dim); }
.trading-pos-footer { text-align: right; }
.trading-close-btn { font-size: 12px !important; }

/* ── History Table ── */
.trading-hist-table {
  width: 100%;
  font-family: var(--bbs-font, monospace);
  font-size: 11px;
  border-collapse: collapse;
}
.trading-hist-table th {
  color: var(--bbs-cyan);
  text-align: left;
  padding: 5px 6px;
  border-bottom: 1px solid rgba(0,255,255,0.15);
  font-size: 10px;
  text-transform: uppercase;
}
.trading-hist-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #ccc;
}
.trading-hist-table tr:hover td { background: rgba(0,255,255,0.03); }
.trading-row-profit td:nth-child(6) { color: var(--bbs-green); font-weight: bold; }
.trading-row-loss td:nth-child(6) { color: var(--bbs-red); }
.trading-row-liq td { opacity: 0.6; }
.trading-row-liq td:nth-child(7) { color: var(--bbs-red); font-weight: bold; }

/* ── Button style ── */
.lord-btn.trading {
  background: linear-gradient(135deg, rgba(255,100,0,0.15), rgba(255,50,0,0.1));
  border-color: rgba(255,100,0,0.3);
  color: #ff8844;
}
.lord-btn.trading:hover,
.lord-btn.trading.active {
  background: linear-gradient(135deg, rgba(255,100,0,0.25), rgba(255,50,0,0.2));
  border-color: rgba(255,100,0,0.6);
  box-shadow: 0 0 12px rgba(255,100,0,0.15);
}

@media (max-width: 600px) {
  .trading-form-row { flex-direction: column; gap: 8px; }
  .trading-overview-bar { gap: 4px 8px; }
  .trading-hist-table { font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
   STOCK TICKER — Retro Exchange Terminal
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.st-header {
  margin-bottom: 10px;
}
.st-ascii {
  color: var(--bbs-cyan);
  font-size: 10px;
  line-height: 1.15;
  margin: 0 0 6px 0;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.4);
  overflow-x: auto;
  white-space: pre;
}
.st-gold-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--bbs-yellow);
  border-radius: 4px;
  background: rgba(255, 200, 0, 0.06);
}
.st-gold-amount {
  color: var(--bbs-yellow);
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(255, 200, 0, 0.4);
}
.st-market-clock {
  color: var(--bbs-dim);
  font-size: 11px;
  font-family: monospace;
}

/* ── Tab bar ── */
.st-tabs {
  display: flex;
  gap: 3px;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--bbs-dim) transparent;
  border-bottom: 1px solid var(--bbs-dim);
  padding-bottom: 6px;
}
.st-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bbs-dim);
  border-radius: 4px 4px 0 0;
  color: var(--bbs-dim);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.st-tab:hover {
  background: rgba(0, 255, 0, 0.08);
  color: var(--bbs-green);
  border-color: var(--bbs-green);
}
.st-tab.active {
  background: rgba(0, 255, 255, 0.12);
  color: var(--bbs-cyan);
  border-color: var(--bbs-cyan);
  border-bottom-color: transparent;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}

/* ── Events ticker bar ── */
.st-events-bar {
  background: rgba(255, 255, 0, 0.06);
  border: 1px solid var(--bbs-yellow);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--bbs-yellow);
  overflow: hidden;
  white-space: nowrap;
}
.st-events-track {
  display: inline-block;
  animation: st-scroll 30s linear infinite;
}
@keyframes st-scroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.st-events-bar:hover .st-events-track {
  animation-play-state: paused;
}

/* ── Cards (replaces lord-box for stock panels) ── */
.st-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--bbs-dim);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 8px;
}
.st-muted { color: var(--bbs-dim); }

/* ── Summary bar ── */
.st-summary-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--bbs-dim);
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 4px;
  background: rgba(0, 255, 255, 0.03);
}
.st-summary-bar .st-stat { white-space: nowrap; }

/* ── Market insight strip ── */
.st-market-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.st-insight-card {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(100, 100, 100, 0.25);
  border-radius: 6px;
  padding: 7px 9px;
}
.st-insight-label {
  color: var(--bbs-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-insight-main {
  font-size: 13px;
  font-weight: bold;
  margin-top: 2px;
}

/* ── Stock Table ── */
.st-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.st-table th {
  color: var(--bbs-cyan);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--bbs-cyan);
  padding: 4px 6px;
  text-align: left;
}
.st-table th.r { text-align: right; }
.st-table th.c { text-align: center; }
.st-table td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.15);
}
.st-table td.r { text-align: right; }
.st-table td.c { text-align: center; }
.st-table tr { transition: background 0.1s; }
.st-table tr.st-clickable { cursor: pointer; }
.st-table tr.st-clickable:hover {
  background: rgba(0, 255, 255, 0.06);
}

/* ── Stock row data colors ── */
.st-sym { color: var(--bbs-yellow); font-weight: bold; }
.st-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.st-sector { color: var(--bbs-dim); font-size: 10px; text-transform: capitalize; }
.st-price { font-weight: bold; }
.st-up   { color: var(--bbs-green); }
.st-down { color: var(--bbs-red); }
.st-flat { color: var(--bbs-dim); }
.st-dim  { color: var(--bbs-dim); font-size: 10px; }
.st-cap  { font-size: 10px; }
.st-div  { color: var(--bbs-cyan); font-size: 10px; }

/* ── Sparkline ── */
.st-spark {
  font-family: monospace;
  letter-spacing: -1px;
  font-size: 13px;
}
.st-mini-chart-wrap {
  width: 112px;
  min-width: 112px;
}
.st-mini-svg {
  width: 112px;
  height: 28px;
  display: block;
}
.st-mini-empty {
  width: 112px;
  text-align: center;
  color: var(--bbs-dim);
  font-size: 10px;
}

/* ── Detail card ── */
.st-detail {
  border-color: var(--bbs-cyan);
  border-left: 3px solid var(--bbs-cyan);
}
.st-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.st-detail-name {
  color: var(--bbs-yellow);
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}
.st-detail-price {
  font-size: 18px;
  font-weight: bold;
}
.st-detail-chart {
  font-family: monospace;
  font-size: 14px;
  letter-spacing: -1px;
  margin: 6px 0;
  padding: 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
}
.st-detail-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  margin-top: 6px;
}
.st-detail-stats strong { color: var(--bbs-cyan); }
.st-detail-events {
  margin-top: 8px;
  border-top: 1px solid var(--bbs-dim);
  padding-top: 6px;
  font-size: 11px;
}
.st-chart-toolbar {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.st-chart-title {
  color: var(--bbs-cyan);
  font-size: 12px;
  font-weight: bold;
}
.st-chart-ranges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.st-chart-range-btn {
  border: 1px solid rgba(100, 100, 100, 0.4);
  background: rgba(255,255,255,0.03);
  color: var(--bbs-fg);
  font-size: 10px;
  border-radius: 4px;
  padding: 3px 8px;
  font-family: inherit;
  cursor: pointer;
}
.st-chart-range-btn:hover {
  border-color: var(--bbs-cyan);
  color: var(--bbs-cyan);
}
.st-chart-range-btn.active {
  background: rgba(0,255,255,0.15);
  border-color: var(--bbs-cyan);
  color: var(--bbs-cyan);
}
.st-pro-chart-wrap {
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(0, 255, 255, 0.05), rgba(0, 0, 0, 0.2));
  padding: 6px;
}
.st-pro-svg {
  width: 100%;
  height: 230px;
  display: block;
}
.st-pro-grid {
  stroke: rgba(255,255,255,0.10);
  stroke-width: 1;
}
.st-pro-y {
  fill: var(--bbs-dim);
  font-size: 9px;
  text-anchor: end;
}
.st-pro-line {
  fill: none;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.st-pro-dot {
  stroke: rgba(0,0,0,0.75);
  stroke-width: 1;
}
.st-pro-empty {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bbs-dim);
  font-size: 12px;
}
.st-detail-metrics {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.st-detail-metric {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(100, 100, 100, 0.25);
  border-radius: 5px;
  padding: 6px 8px;
}
.st-detail-metric span {
  display: block;
  color: var(--bbs-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.st-detail-metric strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}
.st-detail-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Trade form ── */
.st-trade-form {
  border-color: var(--bbs-green);
  border-left: 3px solid var(--bbs-green);
}
.st-trade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.st-trade-title {
  color: var(--bbs-cyan);
  margin: 0;
  font-size: 14px;
}
.st-trade-gold-badge {
  background: rgba(255, 200, 0, 0.15);
  border: 1px solid rgba(255, 200, 0, 0.4);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 13px;
  font-weight: bold;
  color: var(--bbs-yellow);
  white-space: nowrap;
}
.st-trade-section {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.st-trade-section-label {
  color: var(--bbs-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.st-trade-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.st-input { width: 95px; }
.st-btn-buy  { background: var(--bbs-green) !important; color: #000 !important; font-weight: bold; }
.st-btn-sell { background: var(--bbs-red) !important; color: #fff !important; font-weight: bold; }
.st-btn-short { background: var(--bbs-magenta) !important; color: #fff !important; font-size: 11px; }
.st-btn-sm  { font-size: 11px; }
.st-trade-info { color: var(--bbs-dim); font-size: 11px; margin-top: 4px; }

/* ── Quick-fill percentage buttons ── */
.st-quick-btns {
  display: flex;
  gap: 3px;
}
.st-btn-pct {
  font-size: 9px !important;
  padding: 2px 6px !important;
  background: rgba(0, 255, 255, 0.12) !important;
  color: var(--bbs-cyan) !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  border-radius: 3px !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.st-btn-pct:hover {
  background: rgba(0, 255, 255, 0.25) !important;
  border-color: var(--bbs-cyan) !important;
}

/* ── Live cost preview ── */
.st-cost-preview {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.st-cost-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}
.st-cost-label { color: var(--bbs-dim); }
.st-cost-val { color: var(--bbs-fg); font-weight: bold; }
.st-cost-total {
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  margin-top: 4px;
  padding-top: 4px;
}
.st-cost-total .st-cost-val { color: var(--bbs-yellow); font-size: 14px; }
.st-cost-warning {
  color: var(--bbs-red);
  font-size: 11px;
  margin-top: 4px;
  font-weight: bold;
}

/* ── AI Broker Cards ── */
.st-broker-intro {
  color: var(--bbs-dim);
  font-size: 12px;
  margin-bottom: 12px;
  padding: 6px 10px;
  background: rgba(0, 255, 255, 0.04);
  border-radius: 4px;
  border-left: 2px solid var(--bbs-cyan);
}
.st-broker-section-label {
  color: var(--bbs-cyan);
  font-size: 12px;
  font-weight: bold;
  margin: 12px 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-broker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.st-broker-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--bbs-dim);
  border-left: 3px solid var(--bbs-cyan);
  border-radius: 6px;
  padding: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.st-broker-card:hover {
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.1);
}
.st-broker-hire-card {
  border-style: dashed;
  background: rgba(0, 0, 0, 0.2);
}
.st-broker-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.st-broker-icon {
  font-size: 28px;
  line-height: 1;
}
.st-broker-name {
  font-size: 14px;
  font-weight: bold;
}
.st-broker-title {
  font-size: 10px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-broker-status {
  margin-left: auto;
  font-size: 9px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-broker-status.active {
  background: rgba(0, 255, 0, 0.15);
  color: var(--bbs-green);
  border: 1px solid rgba(0, 255, 0, 0.3);
}
.st-broker-desc {
  color: var(--bbs-fg);
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 8px;
}
.st-broker-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.st-broker-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.st-broker-stat span { color: var(--bbs-dim); }
.st-broker-stat strong { font-size: 12px; }
.st-broker-holdings {
  margin-bottom: 8px;
  font-size: 11px;
}
.st-broker-hold-label {
  color: var(--bbs-dim);
  font-size: 10px;
  margin-bottom: 3px;
}
.st-broker-hold {
  display: inline-block;
  background: rgba(0, 255, 255, 0.06);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 3px;
  padding: 1px 6px;
  margin: 2px 4px 2px 0;
  font-size: 10px;
  color: var(--bbs-yellow);
}
.st-broker-strategy {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.st-broker-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 255, 255, 0.08);
  color: var(--bbs-cyan);
  border: 1px solid rgba(0, 255, 255, 0.15);
}
.st-broker-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(100, 100, 100, 0.2);
}
.st-broker-fund-input {
  width: 80px !important;
  font-size: 11px !important;
}
.st-btn-fire {
  background: rgba(255, 50, 50, 0.2) !important;
  color: var(--bbs-red) !important;
  border: 1px solid rgba(255, 50, 50, 0.4) !important;
  font-size: 10px !important;
  margin-left: auto;
}
.st-btn-fire:hover {
  background: rgba(255, 50, 50, 0.4) !important;
}
.st-broker-hire-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.st-broker-budget-input {
  width: 140px !important;
  font-size: 11px !important;
}
.st-btn-hire {
  background: rgba(0, 255, 0, 0.15) !important;
  color: var(--bbs-green) !important;
  border: 1px solid rgba(0, 255, 0, 0.4) !important;
  font-size: 11px !important;
  font-weight: bold;
}
.st-btn-hire:hover {
  background: rgba(0, 255, 0, 0.3) !important;
}

/* ── Broker summary bar (top-level aggregate stats) ── */
.st-broker-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.12);
  border-radius: 6px;
}
.st-broker-summary-stat {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  gap: 2px;
}
.st-broker-summary-stat span { color: var(--bbs-dim); font-size: 10px; }
.st-broker-summary-stat strong { font-size: 13px; }

/* ── Claimable profits banner ── */
.st-broker-claim-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: rgba(0, 255, 0, 0.06);
  border: 1px solid rgba(0, 255, 0, 0.25);
  border-radius: 4px;
  font-size: 12px;
  color: var(--bbs-green);
  animation: broker-claim-pulse 2s ease-in-out infinite;
}
@keyframes broker-claim-pulse {
  0%, 100% { border-color: rgba(0, 255, 0, 0.25); }
  50% { border-color: rgba(0, 255, 0, 0.5); }
}
.st-btn-claim {
  background: rgba(0, 255, 0, 0.2) !important;
  color: var(--bbs-green) !important;
  border: 1px solid rgba(0, 255, 0, 0.5) !important;
  font-size: 11px !important;
  font-weight: bold;
  padding: 3px 12px !important;
  cursor: pointer;
}
.st-btn-claim:hover {
  background: rgba(0, 255, 0, 0.35) !important;
}

/* ── Enhanced performance stats grid ── */
.st-broker-perf {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  border: 1px solid rgba(100, 100, 100, 0.15);
}

/* ── Trading stats row ── */
.st-broker-trade-stats {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--bbs-dim);
  margin-bottom: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(100, 100, 100, 0.15);
}

/* ── Kickback rewards display ── */
.st-broker-kickbacks {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: linear-gradient(135deg, rgba(180, 60, 220, 0.08), rgba(255, 170, 0, 0.06));
  border-radius: 4px;
  border: 1px solid rgba(180, 60, 220, 0.2);
}
.st-broker-kick-label {
  font-size: 10px;
  color: var(--bbs-magenta);
  font-weight: bold;
  margin-bottom: 4px;
}
.st-broker-kick-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.st-broker-kick-item {
  font-size: 10px;
  color: var(--bbs-fg);
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ── Enhanced holding rows ── */
.st-broker-holding-row {
  display: grid;
  grid-template-columns: 50px 40px 70px 1fr 60px;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(100, 100, 100, 0.08);
}
.st-broker-hold-sym {
  color: var(--bbs-yellow);
  font-weight: bold;
}
.st-broker-hold-qty { color: var(--bbs-dim); }
.st-broker-hold-val { color: var(--bbs-fg); text-align: right; }
.st-broker-pnl-bar {
  height: 3px;
  background: rgba(100, 100, 100, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.st-broker-pnl-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
}
.st-broker-pnl-fill.st-up { background: var(--bbs-green); }
.st-broker-pnl-fill.st-down { background: var(--bbs-red); }

/* ── Activity log ── */
.st-broker-log {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid rgba(100, 100, 100, 0.1);
}
.st-broker-log-label {
  font-size: 10px;
  color: var(--bbs-dim);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.st-broker-log-entry {
  font-size: 10px;
  color: var(--bbs-fg);
  padding: 2px 0;
  border-bottom: 1px solid rgba(100, 100, 100, 0.06);
  line-height: 1.3;
}
.st-broker-log-time {
  color: var(--bbs-dim);
  font-size: 9px;
  margin-right: 4px;
}

/* ── Hire card detail rows ── */
.st-broker-hire-details {
  margin-bottom: 8px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.st-broker-hire-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(100, 100, 100, 0.06);
}
.st-broker-hire-row span { color: var(--bbs-dim); }
.st-broker-hire-row strong { font-size: 10px; color: var(--bbs-fg); }

/* ── Stock Guide / Help / FAQ Styles ── */
.st-guide-toc {
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.15);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.st-guide-toc-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--bbs-cyan);
  margin-bottom: 8px;
}
.st-guide-toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.st-guide-toc-links a {
  font-size: 11px;
  color: var(--bbs-cyan);
  text-decoration: none;
  transition: color 0.2s;
}
.st-guide-toc-links a:hover {
  color: var(--bbs-yellow);
  text-decoration: underline;
}
.st-guide-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.15);
}
.st-guide-section:last-of-type { border-bottom: none; }
.st-guide-heading {
  font-size: 14px;
  font-weight: bold;
  color: var(--bbs-yellow);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 0, 0.15);
}
.st-guide-section p {
  font-size: 12px;
  color: var(--bbs-fg);
  line-height: 1.5;
  margin: 6px 0;
}
.st-guide-section code {
  background: rgba(0, 255, 255, 0.08);
  color: var(--bbs-cyan);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: 'VT323', monospace;
}
.st-guide-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 8px 0;
}
.st-guide-box-title {
  font-size: 12px;
  font-weight: bold;
  color: var(--bbs-cyan);
  margin-bottom: 6px;
}
.st-guide-box ul,
.st-guide-box ol {
  margin: 0;
  padding-left: 18px;
}
.st-guide-box li {
  font-size: 11px;
  color: var(--bbs-fg);
  line-height: 1.6;
  margin-bottom: 3px;
}
.st-guide-box li strong {
  color: var(--bbs-yellow);
}
.st-guide-note {
  font-size: 11px;
  color: var(--bbs-dim);
  padding: 6px 10px;
  background: rgba(0, 255, 255, 0.03);
  border-left: 2px solid var(--bbs-cyan);
  border-radius: 0 4px 4px 0;
  margin: 8px 0;
}
.st-guide-warn {
  font-size: 11px;
  color: var(--bbs-red);
  padding: 8px 12px;
  background: rgba(255, 50, 50, 0.06);
  border: 1px solid rgba(255, 50, 50, 0.2);
  border-left: 3px solid var(--bbs-red);
  border-radius: 4px;
  margin: 8px 0;
}
.st-guide-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11px;
}
.st-guide-table thead th {
  background: rgba(0, 255, 255, 0.08);
  color: var(--bbs-cyan);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}
.st-guide-table td {
  padding: 5px 8px;
  color: var(--bbs-fg);
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
.st-guide-table tbody tr:hover {
  background: rgba(0, 255, 255, 0.03);
}
.st-guide-table-sm {
  max-width: 500px;
}
.st-guide-faq {
  margin-bottom: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  border: 1px solid rgba(100, 100, 100, 0.12);
}
.st-guide-faq-q {
  font-size: 12px;
  font-weight: bold;
  color: var(--bbs-yellow);
  margin-bottom: 4px;
}
.st-guide-faq-a {
  font-size: 11px;
  color: var(--bbs-fg);
  line-height: 1.5;
}
.st-guide-footer {
  text-align: center;
  padding: 12px;
  margin-top: 8px;
  background: rgba(0, 255, 255, 0.03);
  border-radius: 6px;
  border: 1px solid rgba(0, 255, 255, 0.1);
}
.st-guide-footer p {
  font-size: 12px;
  color: var(--bbs-dim);
  margin: 0;
}

/* ── Section headers inside tabs ── */
.st-section-title {
  margin: 0 0 8px 0;
  font-size: 14px;
}
.st-section-title.cyan { color: var(--bbs-cyan); }
.st-section-title.yellow { color: var(--bbs-yellow); }
.st-section-title.magenta { color: var(--bbs-magenta); }

/* ── Portfolio summary strip (legacy) ── */
.st-port-summary {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border: 1px solid var(--bbs-dim);
  border-radius: 4px;
  background: rgba(0, 255, 255, 0.03);
}

/* ══════════════════════════════════════════════════════════════
   ENHANCED PORTFOLIO (sp-* classes)
   ══════════════════════════════════════════════════════════════ */
.sp-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.sp-stat-card {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 5px;
  padding: 8px 10px;
  text-align: center;
}
.sp-stat-label {
  font-size: 10px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.sp-stat-value {
  font-size: 15px;
  font-weight: bold;
  color: var(--bbs-fg);
}
.sp-stat-value.yellow { color: var(--bbs-yellow); }
.sp-stat-value.cyan { color: var(--bbs-cyan); }
.sp-stat-value.green { color: var(--bbs-green); }
.sp-stat-value.red { color: var(--bbs-red); }

.sp-networth {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  padding: 6px 10px;
  margin-bottom: 8px;
  background: rgba(255, 255, 0, 0.04);
  border: 1px solid rgba(255, 255, 0, 0.12);
  border-radius: 4px;
  color: var(--bbs-dim);
}
.sp-networth strong { color: var(--bbs-fg); }
.sp-networth .green { color: var(--bbs-green); }
.sp-networth .red { color: var(--bbs-red); }
.sp-networth .cyan { color: var(--bbs-cyan); }

.sp-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.sp-tab {
  font-size: 11px;
  padding: 5px 12px;
  border: 1px solid rgba(100, 100, 100, 0.3);
  background: transparent;
  color: var(--bbs-dim);
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
}
.sp-tab.active {
  background: rgba(0, 255, 255, 0.12);
  border-color: var(--bbs-cyan);
  color: var(--bbs-cyan);
}
.sp-tab:hover { background: rgba(100, 100, 100, 0.15); }

.sp-pane { }
.sp-empty {
  text-align: center;
  color: var(--bbs-dim);
  padding: 20px 10px;
  font-size: 12px;
}

/* ── Holding cards ── */
.sp-holding-card {
  background: rgba(30, 30, 50, 0.5);
  border: 1px solid rgba(100, 100, 100, 0.25);
  border-radius: 5px;
  margin-bottom: 8px;
  overflow: hidden;
}
.sp-hold-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(100, 100, 100, 0.2);
  gap: 8px;
}
.sp-hold-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sp-sym {
  font-size: 14px;
  color: var(--bbs-cyan);
}
.sp-name {
  font-size: 10px;
  color: var(--bbs-dim);
}
.sp-sector {
  font-size: 9px;
  color: var(--bbs-dim);
  opacity: 0.6;
  text-transform: capitalize;
}
.sp-hold-value {
  text-align: right;
}
.sp-hold-val-amount {
  font-size: 15px;
  font-weight: bold;
  color: var(--bbs-yellow);
}
.sp-hold-val-pl {
  font-size: 11px;
  font-weight: bold;
}
.sp-hold-val-pl.green { color: var(--bbs-green); }
.sp-hold-val-pl.red { color: var(--bbs-red); }

.sp-hold-details {
  padding: 6px 10px;
}
.sp-hold-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
  color: var(--bbs-fg);
}
.sp-hold-row > span:first-child {
  color: var(--bbs-dim);
}
.sp-hold-row .green { color: var(--bbs-green); }
.sp-hold-row .red { color: var(--bbs-red); }
.sp-hold-row .cyan { color: var(--bbs-cyan); }
.sp-div-row {
  background: rgba(0, 255, 255, 0.04);
  padding: 3px 4px;
  border-radius: 3px;
  margin-top: 2px;
}

.sp-hold-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid rgba(100, 100, 100, 0.15);
  gap: 8px;
}
.sp-momentum {
  font-size: 10px;
  color: var(--bbs-dim);
}
.sp-momentum.green { color: var(--bbs-green); }
.sp-momentum.red { color: var(--bbs-red); }
.sp-suspended {
  font-size: 10px;
  color: var(--bbs-red);
  font-weight: bold;
}

/* ── Dividend section ── */
.sp-div-countdown {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(0, 255, 0, 0.04);
  border: 1px solid rgba(0, 255, 0, 0.15);
  border-radius: 5px;
  font-size: 12px;
  color: var(--bbs-dim);
}
.sp-div-countdown .yellow { color: var(--bbs-yellow); }
.sp-div-countdown .green { color: var(--bbs-green); }

.sp-div-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.sp-div-table tr:last-child td {
  font-weight: normal;
}
.sp-div-total {
  border-top: 1px solid rgba(0, 255, 255, 0.2);
  background: rgba(0, 255, 255, 0.03);
}

/* ── DRIP Preference Controls ── */
.sp-drip-control {
  margin: 4px 0 2px 0;
  padding: 6px 8px;
  background: rgba(100, 0, 255, 0.06);
  border: 1px solid rgba(100, 0, 255, 0.15);
  border-radius: 5px;
}
.sp-drip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.sp-drip-label {
  font-size: 10px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sp-drip-current {
  font-size: 11px;
  font-weight: bold;
  color: var(--bbs-cyan);
}
.sp-drip-presets {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.sp-drip-btn {
  padding: 2px 8px;
  font-size: 10px;
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--bbs-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.sp-drip-btn:hover {
  background: rgba(100, 0, 255, 0.15);
  border-color: rgba(100, 0, 255, 0.4);
  color: var(--bbs-fg);
}
.sp-drip-btn.active {
  background: rgba(100, 0, 255, 0.25);
  border-color: #a855f7;
  color: #d8b4fe;
  font-weight: bold;
}
.sp-drip-slider {
  flex: 1;
  min-width: 60px;
  max-width: 100px;
  height: 4px;
  accent-color: #a855f7;
  cursor: pointer;
  margin-left: 4px;
}
.sp-drip-slider-val {
  font-size: 10px;
  color: var(--bbs-dim);
  min-width: 28px;
  text-align: right;
}

/* ── Claim Pool Pane ── */
.sp-claim-header {
  margin-bottom: 8px;
}
.sp-claim-desc {
  font-size: 11px;
  color: var(--bbs-dim);
  margin: 0 0 8px 0;
}
.sp-claim-total {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: rgba(0, 255, 0, 0.06);
  border: 1px solid rgba(0, 255, 0, 0.2);
  border-radius: 6px;
  font-size: 13px;
  color: var(--bbs-dim);
}
.sp-claim-total strong {
  font-size: 18px;
}
.sp-claim-all-btn {
  margin-left: auto;
  padding: 6px 16px !important;
  font-size: 12px !important;
  background: linear-gradient(135deg, #166534, #22c55e) !important;
  border-color: #22c55e !important;
  font-weight: bold;
}
.sp-claim-all-btn:hover {
  background: linear-gradient(135deg, #22c55e, #4ade80) !important;
}
.sp-claim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.sp-claim-card {
  padding: 10px 12px;
  background: var(--bbs-panel-bg);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 5px;
}
.sp-claim-sym {
  font-size: 13px;
  font-weight: bold;
  color: var(--bbs-cyan);
  margin-bottom: 4px;
}
.sp-claim-amount {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}
.sp-claim-rate {
  font-size: 10px;
  color: var(--bbs-dim);
  margin-bottom: 6px;
}
.sp-claim-btn {
  width: 100%;
}

@media (max-width: 600px) {
  .sp-drip-presets { gap: 3px; }
  .sp-drip-slider { max-width: 80px; }
  .sp-claim-grid { grid-template-columns: 1fr; }
  .sp-claim-total { flex-wrap: wrap; }
}

.sp-dim { color: var(--bbs-dim); font-size: 10px; }

/* ── Recent trades / dividends scrollable ── */
.st-scroll-list {
  font-size: 11px;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 4px;
}
.st-scroll-list::-webkit-scrollbar { width: 4px; }
.st-scroll-list::-webkit-scrollbar-thumb { background: var(--bbs-dim); border-radius: 2px; }
.st-sub-heading {
  color: var(--bbs-dim);
  margin: 10px 0 4px 0;
  font-size: 12px;
  font-weight: bold;
}

/* ── News articles ── */
.st-news-list { display: flex; flex-direction: column; gap: 10px; }
.st-news-article {
  border: 1px solid var(--bbs-dim);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  transition: border-color 0.15s;
}
.st-news-article:hover { border-color: var(--bbs-cyan); }
.st-news-article.st-sentiment-bullish { border-left: 3px solid var(--bbs-green); }
.st-news-article.st-sentiment-bearish { border-left: 3px solid var(--bbs-red); }
.st-news-article.st-sentiment-neutral { border-left: 3px solid var(--bbs-yellow); }
.st-news-headline {
  color: var(--bbs-yellow);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}
.st-news-meta {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--bbs-dim);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.st-news-tag {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.st-news-tag.bullish { background: rgba(0, 255, 0, 0.15); color: var(--bbs-green); }
.st-news-tag.bearish { background: rgba(255, 50, 50, 0.15); color: var(--bbs-red); }
.st-news-tag.neutral { background: rgba(255, 200, 0, 0.15); color: var(--bbs-yellow); }
.st-news-tag.company { background: rgba(0, 255, 255, 0.1); color: var(--bbs-cyan); }
.st-news-tag.sector  { background: rgba(200, 120, 255, 0.1); color: #c8f; }
.st-news-tag.market  { background: rgba(255, 200, 0, 0.1); color: var(--bbs-yellow); }
.st-news-body {
  color: var(--bbs-fg);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  margin-bottom: 4px;
}
.st-news-source {
  color: var(--bbs-dim);
  font-size: 10px;
  font-style: italic;
}
.st-news-flash {
  animation: st-flash 0.8s ease-out;
  border-color: var(--bbs-yellow) !important;
}
@keyframes st-flash {
  0%   { background: rgba(255, 200, 0, 0.2); }
  100% { background: rgba(0, 0, 0, 0.3); }
}

/* ── Cancel/Close buttons in tables ── */
.st-btn-cancel {
  background: var(--bbs-red) !important;
  color: #fff !important;
  font-size: 10px;
  padding: 2px 8px !important;
}
.st-btn-close {
  background: var(--bbs-magenta) !important;
  color: #fff !important;
  font-size: 10px;
  padding: 2px 8px !important;
}

/* ── Stock Perks / Bonuses ── */
.st-bonus-header {
  color: var(--bbs-yellow);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 200, 0, 0.3);
}
.st-bonus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 4px;
  background: rgba(0, 255, 255, 0.04);
  border-left: 3px solid var(--bbs-green);
}
.st-bonus-name { color: var(--bbs-cyan); font-size: 13px; flex: 1; }
.st-bonus-val  { color: var(--bbs-green); font-weight: bold; font-size: 13px; margin: 0 10px; }
.st-bonus-max  { color: var(--bbs-dim); font-size: 11px; }
.st-empty {
  color: var(--bbs-dim);
  font-style: italic;
  text-align: center;
  padding: 20px 10px;
}

/* ══════════════════════════════════════════════════════════════
   LEVERAGED STOCK TRADING
   ══════════════════════════════════════════════════════════════ */
.slv-panel {
  padding: 0;
}
.slv-header {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: var(--bbs-yellow);
}
.slv-desc {
  font-size: 11px;
  color: var(--bbs-dim);
  margin-bottom: 8px;
}
.slv-disclaimer-box {
  background: rgba(255, 50, 50, 0.08);
  border: 1px solid rgba(255, 50, 50, 0.3);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.slv-disclaimer-title {
  color: var(--bbs-red);
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 6px;
}
.slv-disclaimer-box ul {
  margin: 4px 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--bbs-dim);
  line-height: 1.6;
}
.slv-disclaimer-box li {
  margin-bottom: 2px;
}
.slv-disclaimer-footer {
  font-size: 10px;
  color: var(--bbs-red);
  font-style: italic;
  margin-top: 6px;
  opacity: 0.8;
}
.slv-overview-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.12);
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 11px;
}
.slv-stat {
  white-space: nowrap;
  color: var(--bbs-dim);
}
.slv-stat strong {
  color: var(--bbs-fg);
}
.slv-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.slv-tab-btn {
  font-size: 11px;
  padding: 4px 10px;
  border: 1px solid rgba(100, 100, 100, 0.3);
  background: transparent;
  color: var(--bbs-dim);
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
}
.slv-tab-btn.active {
  background: rgba(255, 255, 0, 0.12);
  border-color: var(--bbs-yellow);
  color: var(--bbs-yellow);
}
.slv-tab-btn:hover {
  background: rgba(100, 100, 100, 0.15);
}
/* Position cards */
.slv-pos-card {
  background: rgba(30, 30, 50, 0.5);
  border: 1px solid rgba(100, 100, 100, 0.25);
  border-radius: 5px;
  margin-bottom: 8px;
  overflow: hidden;
}
.slv-pos-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(100, 100, 100, 0.2);
}
.slv-pos-symbol {
  font-size: 13px;
  color: var(--bbs-fg);
}
.slv-pos-symbol strong {
  color: var(--bbs-cyan);
}
.slv-pos-body {
  padding: 6px 10px;
}
.slv-pos-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
  color: var(--bbs-fg);
}
.slv-pos-row > span:first-child {
  color: var(--bbs-dim);
}
.slv-pos-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-top: 1px solid rgba(100, 100, 100, 0.15);
}
/* Direction badges */
.slv-dir-long { color: var(--bbs-green); }
.slv-dir-short { color: var(--bbs-red); }
/* PnL colors */
.slv-pnl-profit { color: var(--bbs-green); font-weight: bold; }
.slv-pnl-loss { color: var(--bbs-red); font-weight: bold; }
/* History table */
.slv-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.slv-hist-table th {
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 6px;
  text-align: left;
  color: var(--bbs-dim);
  font-weight: normal;
  border-bottom: 1px solid rgba(100, 100, 100, 0.3);
}
.slv-hist-table td {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
.slv-status-liq {
  background: rgba(255, 50, 50, 0.06);
}
/* Open form */
.slv-open-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: rgba(30, 30, 50, 0.5);
  border: 1px solid rgba(100, 100, 100, 0.2);
  border-radius: 5px;
  margin-bottom: 8px;
}
.slv-form-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.slv-form-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 140px;
}
.slv-form-field label {
  font-size: 10px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.slv-range {
  width: 100%;
  accent-color: var(--bbs-yellow);
}
.slv-lev-display {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--bbs-dim);
}
.slv-lev-display strong {
  color: var(--bbs-yellow);
  font-size: 16px;
}
.slv-field-hint {
  font-size: 9px;
  color: var(--bbs-dim);
  opacity: 0.7;
}
/* Preview box */
.slv-preview {
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.12);
  border-radius: 5px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.slv-preview-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slv-preview-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}
.slv-preview-row > span:first-child {
  color: var(--bbs-dim);
}
.slv-preview-sep {
  border-top: 1px dashed rgba(100, 100, 100, 0.3);
  margin: 2px 0;
}
/* Danger zone */
.slv-danger-zone {
  background: rgba(255, 50, 50, 0.06);
  border: 1px solid rgba(255, 50, 50, 0.2);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.slv-danger-header {
  font-size: 11px;
  font-weight: bold;
  color: var(--bbs-red);
  margin-bottom: 4px;
}
.slv-danger-zone p {
  font-size: 11px;
  color: var(--bbs-dim);
  margin: 0;
  line-height: 1.5;
}
/* Open button */
.slv-open-btn {
  width: 100%;
  padding: 8px;
  background: rgba(255, 255, 0, 0.15);
  border: 1px solid var(--bbs-yellow);
  color: var(--bbs-yellow);
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.slv-open-btn:hover {
  background: rgba(255, 255, 0, 0.25);
}
.slv-open-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ══════════════════════════════════════
   IPO Card Grid
   ══════════════════════════════════════ */
.ipo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.ipo-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bbs-dim);
  border-radius: 6px;
  padding: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ipo-card:hover {
  border-color: var(--bbs-cyan);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.15);
}
.ipo-card.selected {
  border-color: var(--bbs-yellow);
  box-shadow: 0 0 14px rgba(255, 220, 80, 0.20);
}
.ipo-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ipo-card-symbol {
  font-weight: bold;
  font-size: 16px;
  color: var(--bbs-cyan);
  text-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
}
.ipo-card-sector {
  font-size: 11px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ipo-card-name {
  font-size: 13px;
  color: var(--bbs-fg);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipo-card-price {
  margin-bottom: 8px;
}
.ipo-card-chart {
  margin: 4px 0 8px 0;
}
.ipo-card-cur {
  font-size: 20px;
  font-weight: bold;
  color: var(--bbs-fg);
}
.ipo-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  font-size: 11px;
  text-align: center;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ipo-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 11px;
}
.ipo-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.ipo-drill-card {
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-left: 3px solid var(--bbs-cyan);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.30);
  padding: 10px;
  margin-bottom: 10px;
}
.ipo-drill-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}
.ipo-drill-title {
  color: var(--bbs-yellow);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ipo-drill-symbol {
  color: var(--bbs-cyan);
  font-size: 15px;
  font-weight: bold;
}
.ipo-drill-price {
  font-size: 14px;
  font-weight: bold;
}
.ipo-drill-toolbar {
  margin-top: 8px;
}
.ipo-drill-stats {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}
.ipo-drill-stat {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(100,100,100,0.2);
  border-radius: 5px;
  padding: 6px 8px;
}
.ipo-drill-stat span {
  color: var(--bbs-dim);
  font-size: 10px;
  text-transform: uppercase;
}
.ipo-drill-stat strong {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}
.ipo-drill-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── IPO Create Form ── */
.ipo-form-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ipo-form-step {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bbs-cyan);
  color: #000;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ipo-form-step-label {
  font-weight: bold;
  font-size: 13px;
  color: var(--bbs-cyan);
}
.ipo-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ipo-label {
  font-size: 10px;
  color: var(--bbs-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ipo-fee-card {
  background: rgba(0, 255, 255, 0.04);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 6px;
  padding: 10px;
}
.ipo-preview-stat {
  text-align: center;
}
.ipo-preview-val {
  font-size: 16px;
  font-weight: bold;
}
.ipo-preview-label {
  font-size: 10px;
  color: var(--bbs-dim);
  margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .st-ascii { font-size: 7px; }
  .st-tabs { gap: 2px; }
  .st-tab { font-size: 10px; padding: 4px 6px; }
  .st-table { font-size: 11px; }
  .st-table th, .st-table td { padding: 3px 4px; }
  .st-market-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-mini-chart-wrap, .st-mini-svg { width: 86px; min-width: 86px; height: 24px; }
  .st-detail-stats { gap: 8px; font-size: 10px; }
  .st-pro-svg { height: 170px; }
  .st-detail-metrics { grid-template-columns: repeat(2, 1fr); }
  .st-trade-row { gap: 4px; }
  .st-news-headline { font-size: 13px; }
  .st-news-body { font-size: 11px; }
  .st-broker-grid { grid-template-columns: 1fr; }
  .st-broker-stats { grid-template-columns: 1fr; }
  .st-broker-actions { flex-direction: column; align-items: stretch; }
  .st-btn-fire { margin-left: 0; }
  .slv-form-row { flex-direction: column; }
  .slv-form-field { min-width: auto; }
  .slv-overview-bar { gap: 6px; font-size: 10px; }
  .slv-hist-table { font-size: 10px; }
  .slv-hist-table th, .slv-hist-table td { padding: 2px 3px; }
  .sp-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .sp-hold-header { flex-direction: column; }
  .sp-hold-value { text-align: left; }
  .sp-networth { flex-direction: column; gap: 4px; font-size: 10px; }
  .sp-div-stats { grid-template-columns: repeat(2, 1fr); }
  .sp-tabs { flex-wrap: wrap; }
  .ipo-grid { grid-template-columns: 1fr; }
  .ipo-drill-head { flex-direction: column; }
  .ipo-drill-stats { grid-template-columns: repeat(2, 1fr); }
  .ipo-card-stats { grid-template-columns: repeat(2, 1fr); }
  .ipo-card-cur { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Exotic Market & Companions
   ═══════════════════════════════════════════════════════════════════════ */

.lord-btn.exotic-market { border-color: #ff6600; color: #ff6600; }
.lord-btn.exotic-market:hover { background: rgba(255,102,0,0.1); box-shadow: 0 0 20px rgba(255,102,0,0.3); }
.lord-btn.exotic-market.active { background: rgba(255,102,0,0.15) !important; box-shadow: 0 0 12px rgba(255,102,0,0.3), inset 0 0 20px rgba(255,102,0,0.03) !important; }

/* Exotic Tabs */
.exotic-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.exotic-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--bbs-border);
  color: var(--bbs-dim);
  padding: 6px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.exotic-tab:hover { color: var(--bbs-fg); border-color: var(--bbs-yellow); }
.exotic-tab.active {
  color: var(--bbs-yellow);
  border-color: var(--bbs-yellow);
  background: rgba(255,215,0,0.08);
}

/* Exotic Card Grid */
.exotic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.exotic-card {
  border: 1px solid var(--bbs-border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(10,10,22,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}
.exotic-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.exotic-card.exotic-owned {
  opacity: 0.7;
}
.exotic-card-header {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exotic-rarity {
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.exotic-name {
  font-size: 15px;
  font-weight: bold;
  color: var(--bbs-fg);
}
.exotic-card-body {
  padding: 8px 10px 10px;
}
.exotic-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.exotic-stats.compact { margin-bottom: 4px; }
.exotic-stat {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
}
.exotic-stat.atk { color: #ff6644; }
.exotic-stat.def { color: #44aaff; }
.exotic-stat.hp { color: #ff4466; }
.exotic-stat.xp { color: #44ff88; }
.exotic-stat.gold { color: #ffd700; }
.exotic-stat.forest { color: #44cc44; }
.exotic-special {
  font-size: 11px;
  color: var(--bbs-dim);
  font-style: italic;
  margin-bottom: 6px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.02);
  border-radius: 3px;
}
.exotic-price {
  font-size: 12px;
  color: var(--bbs-yellow);
  margin-bottom: 8px;
}
.exotic-action {
  text-align: center;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  cursor: default;
}
.exotic-action.buyable {
  background: linear-gradient(135deg, rgba(255,102,0,0.2), rgba(255,215,0,0.2));
  color: var(--bbs-yellow);
  cursor: pointer;
  border: 1px solid rgba(255,215,0,0.3);
  transition: all 0.2s;
}
.exotic-action.buyable:hover {
  background: linear-gradient(135deg, rgba(255,102,0,0.35), rgba(255,215,0,0.35));
  box-shadow: 0 0 12px rgba(255,215,0,0.2);
}
.exotic-action.owned {
  color: var(--bbs-green);
  background: rgba(0,255,0,0.05);
}
.exotic-action.locked {
  color: var(--bbs-dim);
  background: rgba(255,255,255,0.02);
}
.exotic-action.cant-afford {
  color: var(--bbs-red);
  opacity: 0.6;
}

/* Companion-specific */
.companion-species {
  font-size: 11px;
  color: var(--bbs-dim);
  font-style: italic;
}
.companion-desc {
  font-size: 12px;
  color: var(--bbs-dim);
  margin-bottom: 8px;
  line-height: 1.4;
}
.companion-ability {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
  padding: 5px 6px;
  background: rgba(255,0,255,0.04);
  border-radius: 4px;
  border-left: 2px solid var(--bbs-magenta);
}
.companion-ability .ability-name {
  font-size: 12px;
  color: var(--bbs-magenta);
  font-weight: bold;
}
.companion-ability .ability-desc {
  font-size: 11px;
  color: var(--bbs-dim);
}

/* My Companions panel */
.companion-active-banner {
  background: linear-gradient(135deg, rgba(0,255,136,0.06), rgba(0,200,255,0.06));
  border: 1px solid rgba(0,255,136,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: center;
}
.companion-active-name {
  font-size: 14px;
  color: var(--bbs-green);
  margin-bottom: 6px;
}
.companion-active-buffs {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.buff-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: bold;
}
.buff-tag.atk { background: rgba(255,102,68,0.15); color: #ff6644; }
.buff-tag.def { background: rgba(68,170,255,0.15); color: #44aaff; }
.buff-tag.hp { background: rgba(255,68,102,0.15); color: #ff4466; }
.buff-tag.xp { background: rgba(68,255,136,0.15); color: #44ff88; }
.buff-tag.gold { background: rgba(255,215,0,0.15); color: #ffd700; }
.buff-tag.forest { background: rgba(68,204,68,0.15); color: #44cc44; }
.companion-active-ability {
  font-size: 12px;
  color: var(--bbs-magenta);
  margin-bottom: 8px;
}
.companion-unequip-btn {
  background: rgba(255,0,0,0.1);
  border: 1px solid rgba(255,0,0,0.3);
  color: var(--bbs-red);
  padding: 4px 12px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.companion-unequip-btn:hover {
  background: rgba(255,0,0,0.2);
}
.companion-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.companion-owned-card {
  border: 1px solid var(--bbs-border);
  border-radius: 6px;
  padding: 10px;
  background: rgba(10,10,22,0.5);
  transition: transform 0.2s;
}
.companion-owned-card:hover { transform: translateY(-1px); }
.companion-owned-card.equipped {
  border-color: var(--bbs-green) !important;
  background: rgba(0,255,136,0.04);
}
.companion-owned-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.companion-species-tag {
  font-size: 10px;
  color: var(--bbs-dim);
  font-weight: normal;
  font-style: italic;
}
.companion-equipped-badge {
  font-size: 10px;
  background: var(--bbs-green);
  color: #000;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: bold;
}
.companion-loyalty {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.loyalty-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.loyalty-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}
.companion-equip-btn {
  background: linear-gradient(135deg, rgba(0,255,136,0.15), rgba(0,200,255,0.15));
  border: 1px solid rgba(0,255,136,0.3);
  color: var(--bbs-green);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  border-radius: 4px;
  width: 100%;
  margin-top: 6px;
  transition: all 0.2s;
}
.companion-equip-btn:hover {
  background: linear-gradient(135deg, rgba(0,255,136,0.25), rgba(0,200,255,0.25));
  box-shadow: 0 0 10px rgba(0,255,136,0.2);
}

/* Mobile responsive for exotic market */
@media (max-width: 600px) {
  .exotic-grid { grid-template-columns: 1fr; }
  .companion-roster { grid-template-columns: 1fr; }
  .exotic-tabs { gap: 2px; }
  .exotic-tab { padding: 4px 8px; font-size: 11px; }
  .exotic-card-header { padding: 6px 8px; }
  .exotic-name { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Tavern (The Rusty Flagon), Town Crier, Back Alley
   ═══════════════════════════════════════════════════════════════════════ */

/* Button styles */
.lord-btn.tavern { border-color: #d4a24e; color: #d4a24e; }
.lord-btn.tavern:hover { background: rgba(212,162,78,0.15); box-shadow: 0 0 16px rgba(212,162,78,0.3); }
.lord-btn.tavern.active { background: rgba(212,162,78,0.18) !important; box-shadow: 0 0 12px rgba(212,162,78,0.3), inset 0 0 20px rgba(212,162,78,0.03) !important; }

.lord-btn.town-crier { border-color: #f0c040; color: #f0c040; }
.lord-btn.town-crier:hover { background: rgba(240,192,64,0.12); box-shadow: 0 0 14px rgba(240,192,64,0.25); }

.lord-btn.back-alley { border-color: #8866aa; color: #8866aa; }
.lord-btn.back-alley:hover { background: rgba(136,102,170,0.12); box-shadow: 0 0 14px rgba(136,102,170,0.25); }

/* Tavern panel internals */
.lord-subpanel-header h3 {
  color: #d4a24e;
  font-size: 16px;
  margin: 0 0 4px;
}
.tavern-flavor {
  color: var(--bbs-dim);
  font-size: 12px;
  margin-bottom: 12px;
  font-style: italic;
}
.tavern-section {
  margin-bottom: 14px;
  padding: 10px;
  border: 1px solid rgba(212,162,78,0.2);
  border-radius: 6px;
  background: rgba(212,162,78,0.03);
}
.tavern-section h4 {
  color: #d4a24e;
  font-size: 13px;
  margin: 0 0 8px;
  border-bottom: 1px solid rgba(212,162,78,0.15);
  padding-bottom: 4px;
}
.tavern-drinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.tavern-drink-card {
  border: 1px solid rgba(212,162,78,0.25);
  border-radius: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.3);
  text-align: center;
}
.tavern-drink-card.disabled {
  opacity: 0.5;
}
.drink-name {
  color: #d4a24e;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 4px;
}
.drink-desc {
  color: var(--bbs-dim);
  font-size: 11px;
  margin-bottom: 6px;
}
.drink-stats {
  font-size: 12px;
  margin-bottom: 6px;
}
.buff-atk { color: #ff6666; }
.buff-def { color: #66bbff; }
.tavern-buffed {
  color: var(--bbs-green);
  font-size: 12px;
  margin-bottom: 8px;
  text-align: center;
  padding: 6px;
  border: 1px solid rgba(0,255,136,0.2);
  border-radius: 4px;
  background: rgba(0,255,136,0.05);
}
.tavern-gamble-row,
.tavern-brawl-row,
.tavern-rumors-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--bbs-dim);
}
.tavern-gamble-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tavern-bet-input {
  width: 90px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(212,162,78,0.3);
  border-radius: 4px;
  color: var(--bbs-yellow);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 8px;
  text-align: center;
}
.tavern-bet-input:focus {
  outline: none;
  border-color: #d4a24e;
  box-shadow: 0 0 8px rgba(212,162,78,0.3);
}

/* ANSI art color variants */
.ansi-art.amber { color: #d4a24e; }
.ansi-art.dim { color: #8866aa; }
.ansi-art.yellow { color: #f0c040; }

/* Mobile responsive for tavern */
@media (max-width: 600px) {
  .tavern-drinks-grid { grid-template-columns: 1fr; }
  .tavern-gamble-row,
  .tavern-brawl-row,
  .tavern-rumors-row { flex-direction: column; text-align: center; }
  .tavern-gamble-controls { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   AUCTION HOUSE STYLES
   ═══════════════════════════════════════════════════════════════════ */

/* Header & Nav */
.ah-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.ah-title { color: var(--bbs-yellow); margin: 0; font-size: 18px; text-shadow: 0 0 10px rgba(255,215,0,0.3); }
.ah-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.ah-nav-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--bbs-dim);
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: all 0.2s;
}
.ah-nav-btn:hover { color: var(--bbs-yellow); border-color: var(--bbs-yellow); background: rgba(255,215,0,0.08); }
.ah-nav-btn.active { color: var(--bbs-yellow); border-color: var(--bbs-yellow); background: rgba(255,215,0,0.12); text-shadow: 0 0 6px rgba(255,215,0,0.3); }

/* Sections */
.ah-section {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 12px;
}
.ah-section-title { color: var(--bbs-cyan); margin: 0 0 10px 0; font-size: 14px; }

/* Loading & Empty states */
.ah-loading { color: var(--bbs-dim); text-align: center; padding: 20px; font-style: italic; }
.ah-empty { text-align: center; padding: 20px; }
.ah-empty-art { color: var(--bbs-dim); font-size: 13px; display: inline-block; text-align: left; }

/* Toolbar: Search / Filter / Sort */
.ah-toolbar { margin-bottom: 12px; }
.ah-search-row { display: flex; gap: 6px; margin-bottom: 8px; }
.ah-search-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #eee;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
}
.ah-search-input:focus { outline: none; border-color: var(--bbs-cyan); box-shadow: 0 0 8px rgba(0,255,255,0.15); }
.ah-sort-select {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #eee;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.ah-filter-tabs { display: flex; gap: 4px; }
.ah-filter-tab {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--bbs-dim);
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition: all 0.15s;
}
.ah-filter-tab:hover { color: #eee; border-color: rgba(255,255,255,0.2); }
.ah-filter-tab.active { color: var(--bbs-cyan); border-color: var(--bbs-cyan); background: rgba(0,255,255,0.08); }

/* Sales ticker */
.ah-sales-ticker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; margin-bottom: 10px;
  background: rgba(0,255,255,0.04); border: 1px solid rgba(0,255,255,0.1); border-radius: 4px;
  font-size: 11px; color: var(--bbs-dim);
}
.ah-ticker-label { color: var(--bbs-cyan); font-weight: bold; white-space: nowrap; }
.ah-ticker-item { white-space: nowrap; }
.ah-ticker-price { color: var(--bbs-yellow); font-weight: bold; }

/* Listings Grid */
.ah-listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.ah-listing-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.ah-listing-card:hover {
  border-color: var(--bbs-yellow);
  background: rgba(255,215,0,0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ah-listing-card.ah-rarity-mythic { border-color: rgba(255,0,255,0.3); }
.ah-listing-card.ah-rarity-legendary { border-color: rgba(255,165,0,0.3); }
.ah-listing-card.ah-rarity-epic { border-color: rgba(168,85,247,0.3); }
.ah-listing-card.ah-rarity-rare { border-color: rgba(59,130,246,0.3); }
.ah-listing-card.ah-rarity-uncommon { border-color: rgba(34,197,94,0.2); }

/* Item Art */
.ah-item-art {
  font-size: 10px;
  line-height: 1.15;
  margin: 0 auto 6px auto;
  text-align: center;
  pointer-events: none;
}
.ah-item-img {
  text-align: center;
  margin: 0 auto 6px auto;
}
.ah-pixel-img {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.2s;
}
.ah-listing-card:hover .ah-pixel-img { transform: scale(1.08); }
.ah-inv-card .ah-pixel-img { width: 48px; height: 48px; }
.ah-detail-art .ah-pixel-img { width: 96px; height: 96px; border-width: 2px; }
.ah-selected-card .ah-pixel-img { width: 56px; height: 56px; }
.ah-pixel-img.ah-rarity-mythic { border-color: rgba(255,0,255,0.4); box-shadow: 0 0 8px rgba(255,0,255,0.2); }
.ah-pixel-img.ah-rarity-legendary { border-color: rgba(255,165,0,0.4); box-shadow: 0 0 8px rgba(255,165,0,0.2); }
.ah-pixel-img.ah-rarity-epic { border-color: rgba(168,85,247,0.4); box-shadow: 0 0 8px rgba(168,85,247,0.2); }
.ah-pixel-img.ah-rarity-rare { border-color: rgba(59,130,246,0.4); box-shadow: 0 0 8px rgba(59,130,246,0.2); }
.ah-pixel-img.ah-rarity-divine { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 12px rgba(255,215,0,0.3); }
.ah-pixel-img.ah-rarity-exotic { border-color: rgba(0,255,200,0.4); box-shadow: 0 0 8px rgba(0,255,200,0.2); }

/* Shop / Inventory item icons */
.lord-item-icon {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 3px;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.08);
}
.shop-item-cell {
  white-space: nowrap;
}
.shop-item-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
  line-height: 0;
}

/* Card body */
.ah-card-body { text-align: center; }
.ah-card-name { font-size: 12px; font-weight: bold; color: #eee; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-card-stat { font-size: 11px; color: var(--bbs-dim); margin-bottom: 4px; }
.ah-card-price { margin-bottom: 2px; }
.ah-price-amount { font-size: 16px; font-weight: bold; color: var(--bbs-yellow); }
.ah-price-curr { font-size: 10px; color: var(--bbs-dim); margin-left: 3px; }
.ah-card-buyout { font-size: 11px; color: #ffa500; margin-bottom: 4px; }
.ah-card-footer { display: flex; justify-content: space-between; font-size: 10px; color: var(--bbs-dim); }
.ah-card-bids { }
.ah-card-time { }
.ah-time-urgent { color: #ef4444 !important; font-weight: bold; animation: ah-pulse 1.5s ease-in-out infinite; }
@keyframes ah-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.ah-card-seller { font-size: 10px; color: var(--bbs-dim); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Rarity badge */
.ah-rarity-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 6px;
  border: 1px solid;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Detail View */
.ah-back-btn {
  background: none; border: none; color: var(--bbs-cyan); cursor: pointer;
  font-family: inherit; font-size: 12px; padding: 4px 0; margin-bottom: 10px;
  transition: color 0.15s;
}
.ah-back-btn:hover { color: var(--bbs-yellow); }

.ah-detail-layout { display: flex; gap: 16px; flex-wrap: wrap; }
.ah-detail-art { text-align: center; min-width: 120px; }
.ah-detail-art .ah-item-art { font-size: 13px; }
.ah-detail-info { flex: 1; min-width: 240px; }
.ah-detail-name { margin: 0 0 8px 0; font-size: 16px; }

.ah-detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-bottom: 12px;
  font-size: 12px;
}
.ah-detail-stat { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ah-stat-label { color: var(--bbs-dim); }

.ah-detail-pricing {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding: 10px;
  background: rgba(255,215,0,0.05);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 6px;
  margin-bottom: 12px;
}
.ah-price-block { text-align: center; }
.ah-price-label { display: block; font-size: 10px; color: var(--bbs-dim); text-transform: uppercase; margin-bottom: 2px; }
.ah-price-big { font-size: 20px; font-weight: bold; color: var(--bbs-yellow); }
.ah-price-big small { font-size: 11px; color: var(--bbs-dim); }
.ah-buyout-price { color: #ffa500; }

/* Bid / Buyout actions */
.ah-detail-actions { margin-bottom: 12px; }
.ah-bid-row { display: flex; gap: 6px; margin-bottom: 6px; }
.ah-bid-input {
  flex: 1;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 4px;
  color: var(--bbs-yellow);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
}
.ah-bid-input:focus { outline: none; border-color: var(--bbs-yellow); box-shadow: 0 0 8px rgba(255,215,0,0.2); }
.ah-bid-btn {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1));
  border: 1px solid rgba(255,215,0,0.4);
  color: var(--bbs-yellow);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s;
  white-space: nowrap;
}
.ah-bid-btn:hover { background: rgba(255,215,0,0.25); box-shadow: 0 0 12px rgba(255,215,0,0.2); }
.ah-buyout-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,165,0,0.2), rgba(255,165,0,0.1));
  border: 1px solid rgba(255,165,0,0.4);
  color: #ffa500;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}
.ah-buyout-btn:hover { background: rgba(255,165,0,0.25); box-shadow: 0 0 14px rgba(255,165,0,0.2); }

/* Bid history */
.ah-bid-history { margin-top: 12px; }
.ah-bids-title { color: var(--bbs-dim); margin: 0 0 6px 0; font-size: 13px; }
.ah-bids-list { }
.ah-bid-entry {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px; margin-bottom: 2px;
  background: rgba(0,0,0,0.2); border-radius: 3px;
  font-size: 11px;
}
.ah-bid-who { color: var(--bbs-cyan); }
.ah-bid-amount { color: var(--bbs-yellow); font-weight: bold; }
.ah-bid-time { color: var(--bbs-dim); font-size: 10px; }

/* Inventory Grid */
.ah-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.ah-inv-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  position: relative;
}
.ah-inv-card:hover { border-color: var(--bbs-cyan); background: rgba(0,255,255,0.05); transform: translateY(-1px); }
.ah-inv-card.ah-rarity-mythic:hover { border-color: #ff00ff; }
.ah-inv-card.ah-rarity-legendary:hover { border-color: #ffa500; }
.ah-inv-card.ah-rarity-epic:hover { border-color: #a855f7; }
.ah-inv-card.ah-rarity-rare:hover { border-color: #3b82f6; }
.ah-inv-card .ah-item-art { font-size: 9px; }
.ah-inv-name { font-size: 11px; font-weight: bold; color: #eee; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ah-inv-stats { display: flex; justify-content: center; gap: 8px; font-size: 10px; color: var(--bbs-dim); }
.ah-stat-atk { color: var(--bbs-red); }
.ah-stat-def { color: var(--bbs-cyan); }
.ah-stat-val { color: var(--bbs-yellow); }

/* Selected item in create form */
.ah-selected-wrap { margin-bottom: 10px; }
.ah-selected-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  background: rgba(0,255,255,0.05);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 6px;
}
.ah-selected-card .ah-item-art { font-size: 11px; margin: 0; }
.ah-selected-info { flex: 1; }
.ah-selected-name { font-size: 14px; font-weight: bold; color: #eee; }
.ah-selected-stats { font-size: 12px; color: var(--bbs-dim); margin-top: 2px; }

/* Create form controls */
.ah-inv-picker { margin-bottom: 10px; }
.ah-load-btn {
  background: rgba(0,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.25);
  color: var(--bbs-cyan);
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  transition: all 0.2s;
}
.ah-load-btn:hover { background: rgba(0,255,255,0.15); box-shadow: 0 0 10px rgba(0,255,255,0.15); }
.ah-create-row { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ah-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: #eee;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 12px;
  flex: 1;
  min-width: 80px;
}
.ah-input:focus { outline: none; border-color: var(--bbs-cyan); box-shadow: 0 0 6px rgba(0,255,255,0.15); }
.ah-create-btn {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1));
  border: 1px solid rgba(255,215,0,0.4);
  color: var(--bbs-yellow);
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s;
}
.ah-create-btn:hover { background: rgba(255,215,0,0.25); box-shadow: 0 0 14px rgba(255,215,0,0.2); }

/* My Listings */
.ah-my-section { margin-bottom: 16px; }
.ah-my-title { color: var(--bbs-cyan); margin: 0 0 8px 0; font-size: 14px; }
.ah-my-empty { color: var(--bbs-dim); font-style: italic; font-size: 12px; padding: 8px 0; }
.ah-my-grid { display: flex; flex-direction: column; gap: 6px; }
.ah-my-card {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 8px 10px;
}
.ah-my-card.ah-status-active { border-left: 3px solid var(--bbs-green); }
.ah-my-card.ah-status-sold { border-left: 3px solid var(--bbs-yellow); opacity: 0.7; }
.ah-my-card.ah-status-other { border-left: 3px solid var(--bbs-dim); opacity: 0.6; }
.ah-my-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.ah-my-card-name { font-size: 12px; font-weight: bold; color: #eee; }
.ah-my-card-status { font-size: 10px; text-transform: uppercase; color: var(--bbs-dim); }
.ah-my-card-mid { display: flex; justify-content: space-between; font-size: 11px; color: var(--bbs-dim); }
.ah-my-card-price { color: var(--bbs-yellow); font-weight: bold; }
.ah-my-card-bot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 10px; color: var(--bbs-dim); }
.ah-cancel-btn {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  transition: all 0.15s;
}
.ah-cancel-btn:hover { background: rgba(239,68,68,0.2); }

/* Confirm Overlay */
.ah-confirm-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(3px);
}
.ah-confirm-box {
  background: #1a1a2e;
  border: 1px solid var(--bbs-yellow);
  border-radius: 8px;
  padding: 20px 24px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 0 30px rgba(255,215,0,0.15);
}
.ah-confirm-text { color: #eee; font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.ah-confirm-btns { display: flex; gap: 8px; justify-content: center; }
.ah-confirm-yes {
  background: rgba(34,197,94,0.2);
  border: 1px solid rgba(34,197,94,0.5);
  color: #22c55e;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: bold;
  transition: all 0.2s;
}
.ah-confirm-yes:hover { background: rgba(34,197,94,0.3); }
.ah-confirm-no {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.2s;
}
.ah-confirm-no:hover { background: rgba(239,68,68,0.2); }

/* Help / Guide */
.ah-help-art { color: var(--bbs-yellow); font-size: 13px; text-align: center; margin-bottom: 12px; }
.ah-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.ah-help-card {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  overflow: hidden;
}
.ah-help-card-title {
  background: rgba(0,255,255,0.08);
  border-bottom: 1px solid rgba(0,255,255,0.15);
  padding: 8px 12px;
  color: var(--bbs-cyan);
  font-weight: bold;
  font-size: 13px;
}
.ah-help-card-body { padding: 10px 12px; }
.ah-help-item { font-size: 12px; color: var(--bbs-dim); padding: 2px 0; line-height: 1.5; }

/* Mobile responsive */
@media (max-width: 600px) {
  .ah-header { flex-direction: column; align-items: flex-start; }
  .ah-listings-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ah-detail-layout { flex-direction: column; }
  .ah-detail-stats { grid-template-columns: 1fr; }
  .ah-create-row { flex-direction: column; }
  .ah-help-grid { grid-template-columns: 1fr; }
  .ah-inv-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════
   BIG UI ENHANCEMENT PASS — Connect Screen, LORD Bars, Rarity, HUD
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CONNECT SCREEN OVERHAUL ─────────────────────────────────── */

/* Deep space background with color vignettes */
.bbs-connect-overlay {
  background:
    radial-gradient(ellipse at 25% 15%, rgba(0,40,100,0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(60,0,120,0.2)  0%, transparent 55%),
    radial-gradient(ellipse at center, #080820 0%, #030310 100%) !important;
}

/* Scanline texture on main panel */
.co-panel {
  position: relative;
  overflow: hidden;
}
.co-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.co-panel > * { position: relative; z-index: 1; }

/* Animated ASCII art — power-on burst then settle */
@keyframes asciiReveal {
  0%   { opacity: 0; filter: brightness(0); }
  12%  { opacity: 1; filter: brightness(4);
         text-shadow: 0 0 60px rgba(0,255,255,1), 0 0 120px rgba(0,255,255,0.6); }
  40%  { filter: brightness(1.5);
         text-shadow: 0 0 24px rgba(0,255,255,0.8), 0 0 50px rgba(0,255,255,0.3); }
  100% { filter: brightness(1);
         text-shadow: 0 0 12px rgba(0,255,255,0.4), 0 0 28px rgba(0,255,255,0.15); }
}
.bbs-connect-overlay .co-ascii {
  animation: asciiReveal 2s ease-out forwards;
  opacity: 0;
}

/* Title — bigger, spaced */
.bbs-connect-overlay .co-title {
  font-size: 34px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

/* Chain picker cards */
.co-chain-btn {
  padding: 16px 30px !important;
  min-width: 155px !important;
  border: 1px solid rgba(80,80,120,0.4) !important;
  background: linear-gradient(160deg, rgba(8,10,24,0.92), rgba(4,6,14,0.96)) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
}
/* Shimmer sweep on hover */
.co-chain-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  transition: left 0.5s;
  pointer-events: none;
}
.co-chain-btn:hover::before { left: 160%; }
.co-chain-btn:hover {
  border-color: rgba(0,255,255,0.45) !important;
  color: var(--bbs-cyan) !important;
  background: linear-gradient(160deg, rgba(0,18,36,0.96), rgba(0,10,20,0.99)) !important;
  box-shadow: 0 0 22px rgba(0,255,255,0.18), inset 0 0 20px rgba(0,255,255,0.04) !important;
  transform: translateY(-3px) !important;
}
@keyframes chainPulseGreen {
  0%,100% { box-shadow: 0 0 16px rgba(51,255,51,0.2), inset 0 0 16px rgba(51,255,51,0.04); }
  50%     { box-shadow: 0 0 32px rgba(51,255,51,0.4), inset 0 0 28px rgba(51,255,51,0.08); }
}
@keyframes chainPulseGold {
  0%,100% { box-shadow: 0 0 16px rgba(255,204,0,0.2), inset 0 0 16px rgba(255,204,0,0.04); }
  50%     { box-shadow: 0 0 32px rgba(255,204,0,0.4), inset 0 0 28px rgba(255,204,0,0.08); }
}
.co-chain-btn.active {
  border-width: 2px !important;
  border-color: var(--bbs-fg) !important;
  color: var(--bbs-fg) !important;
  background: linear-gradient(160deg, rgba(0,18,0,0.94), rgba(0,8,0,0.97)) !important;
  animation: chainPulseGreen 2.5s ease-in-out infinite !important;
}
.co-chain-btn[data-chain="hyve"].active {
  border-color: #ffcc00 !important;
  color: #ffcc00 !important;
  background: linear-gradient(160deg, rgba(24,18,0,0.94), rgba(12,8,0,0.97)) !important;
  animation: chainPulseGold 2.5s ease-in-out infinite !important;
}
.co-chain-icon { font-size: 28px !important; }
.co-chain-name { font-size: 16px !important; letter-spacing: 1px; text-transform: uppercase; }
.co-chain-symbol { font-size: 11px !important; letter-spacing: 2px; }

/* Connect buttons — full-width, more dramatic */
.co-connect-btn {
  width: min(460px, 96%) !important;
  font-size: 20px !important;
  padding: 12px 24px !important;
  letter-spacing: 1px !important;
  border-width: 1px !important;
  border-radius: 4px !important;
  background: linear-gradient(135deg, rgba(0,22,40,0.85), rgba(0,12,22,0.92)) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.co-connect-btn:not([disabled]):hover {
  background: linear-gradient(135deg, rgba(0,44,72,0.96), rgba(0,28,48,0.99)) !important;
  box-shadow: 0 0 32px rgba(0,255,255,0.28), 0 4px 24px rgba(0,0,0,0.5) !important;
  transform: translateY(-2px) !important;
  letter-spacing: 2px !important;
}
.co-connect-btn.cosmos:not([disabled]):hover {
  background: linear-gradient(135deg, rgba(44,0,72,0.96), rgba(28,0,48,0.99)) !important;
  box-shadow: 0 0 32px rgba(255,51,255,0.28), 0 4px 24px rgba(0,0,0,0.5) !important;
}
.co-side {
  background: linear-gradient(180deg, rgba(4,8,20,0.94), rgba(2,4,12,0.96)) !important;
  border: 1px solid rgba(0,255,255,0.12) !important;
}

/* ── 2. LORD HP / XP BARS — Chunky pixel-art ─────────────────────── */

.lord-hp-bar {
  height: 20px !important;
  background: #060610 !important;
  border: 1px solid rgba(200,30,30,0.35) !important;
  border-radius: 0 !important;
  position: relative !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8) !important;
  overflow: hidden !important;
}
.lord-hp-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 7px,
    rgba(0,0,0,0.5) 7px, rgba(0,0,0,0.5) 8px
  );
  pointer-events: none;
  z-index: 2;
}
.lord-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b0000, #cc2000, #ff3311, #ff5533) !important;
  box-shadow: 0 0 10px rgba(255,40,0,0.55), inset 0 1px 0 rgba(255,180,140,0.25) !important;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  z-index: 1;
}
.lord-hp-fill::after {
  content: '';
  position: absolute;
  top: 2px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, rgba(255,200,180,0), rgba(255,200,180,0.3), rgba(255,200,180,0));
  pointer-events: none;
}

.lord-xp-bar {
  height: 12px !important;
  background: #030308 !important;
  border: 1px solid rgba(0,180,255,0.22) !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.lord-xp-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent, transparent 9px,
    rgba(0,0,0,0.55) 9px, rgba(0,0,0,0.55) 10px
  );
  pointer-events: none;
  z-index: 2;
}
.lord-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #003d5c, #006699, #00aadd, #00eeff) !important;
  box-shadow: 0 0 8px rgba(0,220,255,0.5), inset 0 1px 0 rgba(100,240,255,0.2) !important;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  z-index: 1;
}
.lord-xp-fill::after {
  content: '';
  position: absolute;
  top: 1px; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(100,240,255,0), rgba(100,240,255,0.3), rgba(100,240,255,0));
  pointer-events: none;
}
/* All other HP bars match the square pixel style */
.combat-hp-bar, .dg-hp-bar, .dg-monster-hp-bar { border-radius: 0 !important; }
.dg-hp-fill { box-shadow: 0 0 6px currentColor !important; }

/* ── 3. ITEM RARITY ANIMATED GLOW SYSTEM ──────────────────────────── */

@keyframes glowLegendary {
  0%,100% { box-shadow: 0 0 8px rgba(255,200,0,0.4),  0 0 18px rgba(255,170,0,0.2);  border-color: rgba(255,200,0,0.5); }
  50%     { box-shadow: 0 0 18px rgba(255,215,0,0.7),  0 0 36px rgba(255,190,0,0.35); border-color: rgba(255,215,0,0.75); }
}
@keyframes glowMythic {
  0%  { box-shadow: 0 0 10px rgba(255,0,255,0.5),  0 0 22px rgba(180,0,255,0.3);  border-color: rgba(255,0,255,0.55); }
  33% { box-shadow: 0 0 20px rgba(200,0,255,0.65), 0 0 42px rgba(140,0,255,0.3);  border-color: rgba(210,80,255,0.8); }
  66% { box-shadow: 0 0 14px rgba(255,40,255,0.55),0 0 30px rgba(170,0,255,0.3);  border-color: rgba(255,0,200,0.6); }
  100%{ box-shadow: 0 0 10px rgba(255,0,255,0.5),  0 0 22px rgba(180,0,255,0.3);  border-color: rgba(255,0,255,0.55); }
}
@keyframes glowDivine {
  0%,100% { box-shadow: 0 0 14px rgba(255,230,80,0.6),  0 0 28px rgba(255,200,0,0.35), 0 0 50px rgba(255,215,0,0.1); }
  50%     { box-shadow: 0 0 24px rgba(255,240,100,0.8),  0 0 48px rgba(255,215,0,0.5),  0 0 80px rgba(255,215,0,0.2); }
}
@keyframes glowEpic {
  0%,100% { box-shadow: 0 0 8px rgba(168,85,247,0.4),  0 0 16px rgba(140,60,220,0.2);  border-color: rgba(168,85,247,0.45); }
  50%     { box-shadow: 0 0 16px rgba(168,85,247,0.65), 0 0 32px rgba(140,60,220,0.35); border-color: rgba(180,100,255,0.7); }
}

/* Loot items */
.loot-item.legendary { animation: glowLegendary 2s ease-in-out infinite !important; }
.loot-item.mythic {
  color: #ff88ff !important;
  text-shadow: 0 0 16px rgba(255,0,255,0.7) !important;
  background: rgba(160,0,255,0.08) !important;
  animation: glowMythic 3s ease-in-out infinite !important;
}
.loot-item.divine {
  color: #ffe866 !important;
  text-shadow: 0 0 18px rgba(255,220,80,0.8) !important;
  background: rgba(255,200,0,0.1) !important;
  animation: glowDivine 2.5s ease-in-out infinite !important;
}
.loot-item.epic { animation: glowEpic 2.5s ease-in-out infinite !important; }

/* Auction House item images */
.ah-pixel-img.ah-rarity-legendary { animation: glowLegendary 2.5s ease-in-out infinite !important; }
.ah-pixel-img.ah-rarity-mythic    { animation: glowMythic 3s ease-in-out infinite !important; }
.ah-pixel-img.ah-rarity-divine    { animation: glowDivine 2.5s ease-in-out infinite !important; }
.ah-pixel-img.ah-rarity-epic      { animation: glowEpic 3s ease-in-out infinite !important; }

/* Auction House listing cards */
.ah-listing-card.ah-rarity-legendary { animation: glowLegendary 3s ease-in-out infinite !important; }
.ah-listing-card.ah-rarity-mythic    { animation: glowMythic 3.5s ease-in-out infinite !important; }

/* ── 4. ITEM IMAGES — crisp pixel rendering + placeholder ─────────── */

.lord-item-icon,
.ah-pixel-img,
img[class*="item-img"],
img[class*="item-icon"] {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
/* Pending-generation placeholder */
.lord-item-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #080818, #10102a);
  border: 1px solid rgba(80,80,160,0.25);
  border-radius: 2px;
  color: rgba(100,100,180,0.5);
  font-size: 18px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── 5. NAVIGATION: Active sweep underline ─────────────────────────── */

.bbs-nav-btn { position: relative; overflow: hidden; }
.bbs-nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--bbs-cyan);
  box-shadow: 0 0 8px rgba(0,255,255,0.7);
  transition: left 0.25s cubic-bezier(0.4,0,0.2,1), right 0.25s cubic-bezier(0.4,0,0.2,1);
}
.bbs-nav-btn.active::after { left: 8%; right: 8%; }
.bbs-nav-btn.active { text-shadow: 0 0 14px rgba(0,255,255,0.65) !important; }

/* ── 6. EARNINGS BANNER: HUD strip ───────────────────────────────── */

#earningsBanner {
  background: linear-gradient(90deg, rgba(0,8,18,0.97), rgba(4,4,14,0.97)) !important;
  border-bottom: 1px solid rgba(0,200,255,0.14) !important;
  backdrop-filter: blur(6px);
  font-size: 13px !important;
  gap: 8px !important;
  padding: 5px 16px !important;
  letter-spacing: 0.5px;
}
#earningsBannerBar {
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(0,190,255,0.2) !important;
  border-radius: 0 !important;
  height: 8px !important;
}
#earningsBannerFill {
  border-radius: 0 !important;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: 0 0 6px currentColor !important;
}

/* ── 7. LORD ACTION BUTTONS ──────────────────────────────────────── */

.lord-btn {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  min-width: 130px;
}
.lord-btn:not([disabled]):hover {
  background: rgba(51,255,51,0.07) !important;
  box-shadow: 0 0 22px rgba(51,255,51,0.22), inset 0 0 18px rgba(51,255,51,0.04) !important;
  border-color: var(--bbs-fg) !important;
}

/* ── 8. MAIN HALL STAT CARDS: Top accent edge ───────────────────── */

.mh-stat-card {
  position: relative;
  overflow: hidden;
}
.mh-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.5), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   UI ENHANCEMENT PASS 2 — Card Games, Main Hall, Chat, Doors
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CARD TABLE — Casino felt with wood rail ──────────────────── */

.card-table {
  background:
    radial-gradient(ellipse at center, #0d3318 0%, #082210 55%, #051509 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 3px #2a1a08,
    0 0 0 6px #1a1005,
    0 0 0 8px #2a1a08,
    0 0 40px rgba(0,0,0,0.8),
    inset 0 0 60px rgba(0,0,0,0.4) !important;
  position: relative !important;
}
/* Inner felt edge line */
.card-table::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(0,200,80,0.1) !important;
  border-radius: 8px !important;
  pointer-events: none;
}
/* Felt texture grain */
.card-table::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
}

/* ── 2. CARDS — Bigger, sharper, more dramatic ───────────────────── */

.bj-card {
  min-width: 52px !important;
  min-height: 72px !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #1e1e3a, #12122a) !important;
  border: 1px solid rgba(100,100,160,0.5) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  padding: 6px 8px !important;
}
.card-rank {
  font-size: 22px !important;
  font-weight: bold !important;
  letter-spacing: -1px !important;
}
.card-suit { font-size: 16px !important; }

.bj-card-red .card-rank {
  color: #ff3344 !important;
  text-shadow: 0 0 10px rgba(255,40,60,0.6), 0 0 20px rgba(255,40,60,0.2) !important;
}
.bj-card-red .card-suit {
  color: #ff3344 !important;
  text-shadow: 0 0 8px rgba(255,40,60,0.5) !important;
}
.bj-card-black .card-rank {
  color: #f0f0ff !important;
  text-shadow: 0 0 8px rgba(200,200,255,0.4) !important;
}
.bj-card-black .card-suit {
  color: #c0c0e0 !important;
}

/* Card back — green diamond weave */
.bj-card-back {
  background:
    repeating-linear-gradient(45deg,  transparent, transparent 5px, rgba(0,255,80,0.03) 5px, rgba(0,255,80,0.03) 10px),
    repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,255,80,0.03) 5px, rgba(0,255,80,0.03) 10px),
    linear-gradient(135deg, #072a10, #0a3a16, #072a10) !important;
  border-color: rgba(0,180,60,0.4) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(0,100,30,0.2),
    0 0 0 1px rgba(0,150,50,0.2) !important;
}

/* Deal animation — more dramatic arc */
@keyframes bjCardDealStagger {
  0%   { transform: translateY(-40px) rotateY(90deg) scale(0.5); opacity: 0; filter: brightness(2); }
  45%  { transform: translateY(-6px) rotateY(0deg) scale(1.06); opacity: 0.9; filter: brightness(1.3); }
  100% { transform: translateY(0) rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); }
}

/* Best hand card highlight */
.bj-card.he-best-card {
  box-shadow:
    0 0 0 2px #ffcc00,
    0 0 20px rgba(255,200,0,0.5),
    0 0 40px rgba(255,200,0,0.2) !important;
  transform: translateY(-4px) !important;
  z-index: 2;
}

/* ── 3. BET PANEL — Chip buttons ────────────────────────────────── */

.bet-panel {
  background: linear-gradient(180deg, rgba(10,10,28,0.92), rgba(6,6,18,0.96)) !important;
  border: 1px solid rgba(60,60,100,0.4) !important;
  border-radius: 12px !important;
}
.chip-btn {
  border-radius: 50% !important;
  font-weight: bold !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
.chip-btn:active {
  box-shadow: 0 1px 0 rgba(0,0,0,0.5) !important;
  transform: translateY(2px) !important;
}

/* ── 4. MAIN HALL CARDS — Lift with color accent ────────────────── */

.mh-card {
  border-radius: 10px !important;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), box-shadow 0.2s, border-color 0.2s !important;
}
.mh-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0,255,255,0.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(0,255,255,0.06) !important;
}
.mh-card h3 {
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
}

/* Live stats bar pulse dot */
.mh-live-dot {
  border-radius: 0 !important;
  width: 6px !important;
  height: 6px !important;
}
.mh-live-bar {
  border-radius: 0 !important;
  border-color: rgba(0,255,0,0.12) !important;
}

/* ── 5. DOOR SELECT — Bigger, more dramatic ──────────────────────── */

.door-card, .door-select-card {
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  overflow: hidden;
}
.door-card::before, .door-select-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.04), transparent);
  transition: left 0.4s;
  pointer-events: none;
}
.door-card:hover::before, .door-select-card:hover::before { left: 100%; }
.door-card:hover, .door-select-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(0,255,255,0.08) !important;
  border-color: rgba(0,255,255,0.3) !important;
}

/* ── 6. CHAT — Message + user improvements ───────────────────────── */

/* User avatar circles — sharper */
.chat-user-avatar, .user-avatar {
  border-radius: 4px !important;
  font-weight: bold !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1) !important;
}

/* Online status dot — square pixel style */
.user-status-dot, .status-dot {
  border-radius: 1px !important;
  box-shadow: 0 0 4px currentColor !important;
}

/* Message hover reveal actions */
.chat-message {
  transition: background 0.1s !important;
}
.chat-message:hover {
  background: rgba(255,255,255,0.02) !important;
}

/* Code blocks in chat */
.chat-message code {
  background: rgba(0,255,255,0.06) !important;
  border: 1px solid rgba(0,255,255,0.15) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  font-size: 0.9em !important;
}

/* Channel list hover */
.chat-channel-item:hover {
  background: rgba(255,255,255,0.04) !important;
  border-radius: 4px !important;
}
.chat-channel-item.active {
  background: rgba(0,255,255,0.07) !important;
  border-radius: 4px !important;
}

/* ── 7. FORGE & LOOT REVEAL — More dramatic ──────────────────────── */

.loot-reveal-box {
  border-radius: 8px !important;
  box-shadow:
    0 0 40px rgba(255,215,0,0.3),
    0 0 80px rgba(255,215,0,0.1),
    inset 0 0 30px rgba(0,0,0,0.5) !important;
}

@keyframes loot-box-glow {
  0%,100% { box-shadow: 0 0 20px rgba(255,200,0,0.3), inset 0 0 20px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 60px rgba(255,220,0,0.6), 0 0 100px rgba(255,200,0,0.2), inset 0 0 20px rgba(0,0,0,0.3); }
}

.loot-item {
  border-radius: 6px !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
}

/* ── 8. PROFILE — Character sheet improvements ───────────────────── */

.profile-hero {
  border-radius: 12px !important;
}
.profile-avatar {
  border-radius: 4px !important;
  box-shadow: 0 0 20px rgba(0,255,255,0.2), inset 0 0 0 1px rgba(0,255,255,0.15) !important;
}

/* ── 9. SCROLLBARS — More visible ────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb {
  background: rgba(0,255,255,0.2);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,255,0.4); }

/* ── 10. TOASTS — Retro terminal style ──────────────────────────── */

.notyf__toast {
  border-radius: 2px !important;
  border-left: 3px solid currentColor !important;
  font-family: var(--bbs-font) !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
}

/* ── 11. MODAL / DIALOGS — Terminal window style ─────────────────── */

.nick-dialog {
  border-radius: 2px !important;
  box-shadow:
    0 0 0 1px rgba(0,255,255,0.2),
    0 0 60px rgba(0,0,0,0.8),
    0 0 30px rgba(0,255,255,0.05) !important;
}
.nick-dialog h3 {
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(0,255,255,0.15) !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
}

/* ── 12. INPUT FIELDS — Focus glow ──────────────────────────────── */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
  outline: none !important;
  border-color: rgba(0,255,255,0.5) !important;
  box-shadow: 0 0 0 2px rgba(0,255,255,0.08), 0 0 12px rgba(0,255,255,0.1) !important;
}

/* ── 13. TABLES — Alternating row tint ──────────────────────────── */

.lord-lb-table tr:nth-child(even) td,
.bbs-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.015) !important;
}
.lord-lb-table tr:first-child td {
  color: #ffcc00 !important;
  text-shadow: 0 0 8px rgba(255,200,0,0.4) !important;
}
.lord-lb-table tr:nth-child(2) td { color: #c0c0c0 !important; }
.lord-lb-table tr:nth-child(3) td { color: #cd7f32 !important; }

/* ── 14. BUTTONS — Global polish ────────────────────────────────── */

button:focus-visible {
  outline: 2px solid rgba(0,255,255,0.5) !important;
  outline-offset: 2px !important;
}

/* ── 15. FOOTER — Legal bar polish ──────────────────────────────── */

.bbs-footer-bottom {
  border-top: 1px solid rgba(0,255,255,0.08) !important;
  letter-spacing: 0.5px !important;
}

/* ── 16. DOOR GAMES — Responsible Gambling Strips ───────────────── */

.door-responsible-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 18px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  font-size: 11px;
  color: #444;
  line-height: 1.4;
}

.door-responsible-footer strong { color: #555; }

.door-responsible-links {
  white-space: nowrap;
  flex-shrink: 0;
}

.door-responsible-links a {
  color: #445544;
  text-decoration: none;
  font-size: 10.5px;
}

.door-responsible-links a:hover { color: #667766; text-decoration: underline; }

.door-game-responsible-strip {
  margin-top: 10px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 10px;
  color: #3a3a3a;
  text-align: center;
  letter-spacing: 0.3px;
}