/* ═══════════════════════════════════════════════════════════════════
   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');

: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 scanline overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
  );
  z-index: 9999;
}

/* CRT flicker animation */
@keyframes crt-flicker {
  0% { opacity: 0.98; }
  50% { opacity: 1; }
  100% { opacity: 0.98; }
}

body { animation: crt-flicker 0.1s infinite; }

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;
  border-bottom: 2px solid var(--bbs-border);
  background: var(--bbs-panel-bg);
  overflow-x: auto;
  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: 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;
  }
}

.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: 2px 0;
  word-wrap: break-word;
  line-height: 1.4;
}

.chat-msg .msg-time { color: var(--bbs-dim); font-size: 14px; }
.chat-msg .msg-nick { color: var(--bbs-cyan); cursor: pointer; }
.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; }

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

.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 {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bbs-fg);
  flex-shrink: 0;
}
.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; }

/* ─── 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: 400px;
  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); }

.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 ─── */
.profile-container {
  padding: 16px 24px;
  max-width: 700px;
  margin: 0 auto;
}

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

.profile-card {
  border: 1px solid var(--bbs-border);
  padding: 16px;
  margin-bottom: 16px;
  background: rgba(10,10,22,0.6);
}

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

.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.profile-row label {
  color: var(--bbs-dim);
  width: 120px;
  flex-shrink: 0;
}

.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: 17px;
  padding: 6px 10px;
  outline: none;
}

.profile-row input:focus {
  border-color: var(--bbs-cyan);
}

.avatar-preview {
  font-size: 48px;
  text-align: center;
  padding: 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: center;
  font-family: var(--bbs-font);
  text-align: center;
}

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

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

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

.bbs-connect-overlay .co-ascii {
  white-space: pre;
  font-size: 11px;
  line-height: 1.15;
  color: var(--bbs-cyan);
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
}

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

.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: 18px;
  margin-top: 16px;
}

/* ─── 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 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: 400px;
  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; }
}