/*
  ================================================================
  LAN Baron — retro.css
  Visual style: Windows XP / DC++ circa 2003
  ================================================================

  Colour palette:
    Desktop blue:      #3a6ea5  (XP default desktop, teal variant)
    Window bg:         #ece9d8  (that warm XP grey-beige)
    Panel inset:       #ffffff  (listbox backgrounds)
    Title bar active:  gradient #0054e3 → #2f87f7
    Button face:       #d4d0c8
    Button light:      #ffffff  (top/left highlight)
    Button shadow:     #808080  (bottom/right)
    Button dark:       #404040  (outer dark edge)
    Text:              #000000

  Rarity colours (matching plan):
    Junk:      #808080
    Common:    #c0c0c0
    Uncommon:  #1eff00  (classic Diablo II green)
    Rare:      #0070dd  (WoW blue)
    Epic:      #a335ee  (WoW purple)
    Legendary: #ff8000  (WoW orange/gold)

  Fonts:
    UI chrome:  Tahoma, Arial (authentic XP)
    File lists: 'Courier New', monospace (directory listing feel)
    e-Peen:     VT323 (Google Fonts pixel font — imported below)
  ================================================================
*/

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #3a6ea5;
  font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  cursor: default;
  user-select: none;
}

/* ── Full-page flex column ────────────────────────────────────── */
body {
  display: flex;
  flex-direction: column;
}

/* ──────────────────────────────────────────────────────────────
   TOP BAR — Connection status + e-Peen counter + controls
   ────────────────────────────────────────────────────────────── */
#top-bar {
  flex: 0 0 auto;
  height: 44px;
  background: linear-gradient(to bottom, #1f5fba 0%, #3a8ff7 40%, #1e5dbb 100%);
  border-bottom: 2px solid #0a3a8a;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#connection-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  min-width: 190px;
}

.status-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4444;
  border: 1px solid #880000;
  box-shadow: 0 0 4px #ff0000;
  transition: background 0.3s, box-shadow 0.3s;
}

.status-led.connected {
  background: #44ff44;
  border: 1px solid #008800;
  box-shadow: 0 0 6px #00ff00;
}

/* ── e-PEEN COUNTER ───────────────────────────────────────────── */
#epeen-display {
  flex: 1;
  text-align: center;
  font-family: 'VT323', 'Courier New', monospace;
  line-height: 1;
}

.epeen-label {
  font-size: 13px;
  letter-spacing: 1px;
  opacity: 0.85;
  text-transform: uppercase;
}

#epeen-raw {
  font-size: 30px;
  color: #ffff00;
  text-shadow: 0 0 8px #ff8800, 1px 1px 2px rgba(0,0,0,0.8);
  letter-spacing: 2px;
  margin: 0 8px;
}

#epeen-tier {
  font-size: 15px;
  color: #aaddff;
  letter-spacing: 1px;
}

#top-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 240px;
  justify-content: flex-end;
}

/* ──────────────────────────────────────────────────────────────
   MAIN LAYOUT — Three columns
   ────────────────────────────────────────────────────────────── */
#main-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  min-height: 0;
}

/* ──────────────────────────────────────────────────────────────
   CHAT FOOTER
   ────────────────────────────────────────────────────────────── */
#panel-chat {
  flex: 0 0 auto;
  height: 155px;
  margin: 0 4px 4px 4px;
  display: flex;
  flex-direction: column;
}

#chat-messages {
  flex: 1;
  overflow-y: auto;
  background: #000000;
  color: #c0c0c0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 4px 6px;
  line-height: 1.5;
  scroll-behavior: smooth;
}

/* ──────────────────────────────────────────────────────────────
   WIN PANEL — 3D raised window chrome
   ────────────────────────────────────────────────────────────── */
.win-panel {
  background: #ece9d8;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #d4d0c8, inset -1px -1px 0 #808080;
  overflow: hidden;
  min-height: 0;
}

/* Column sizing */
#panel-users  { flex: 0 0 215px; }
#panel-files  { flex: 1 1 auto; }
#panel-stats  { flex: 0 0 275px; }

/* ──────────────────────────────────────────────────────────────
   WIN TITLE BAR
   ────────────────────────────────────────────────────────────── */
.win-titlebar {
  flex: 0 0 auto;
  height: 20px;
  background: linear-gradient(to right, #0054e3 0%, #2f87f7 60%, #0054e3 100%);
  display: flex;
  align-items: center;
  padding: 0 3px 0 5px;
  gap: 4px;
  color: #ffffff;
  font-weight: bold;
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

.titlebar-icon { font-size: 12px; line-height: 1; }

.titlebar-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar-controls {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.titlebar-btn {
  width: 16px !important;
  height: 14px !important;
  font-size: 8px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.close-btn:hover {
  background: #cc3333 !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────────────────────────
   PANEL CONTENT (scrollable inner area)
   ────────────────────────────────────────────────────────────── */
.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: 2px;
}

/* ──────────────────────────────────────────────────────────────
   WIN INSET — sunken listbox / inset field look
   ────────────────────────────────────────────────────────────── */
.win-inset {
  background: #ffffff;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #d4d0c8;
  border-bottom: 1px solid #d4d0c8;
  box-shadow: inset 1px 1px 0 #404040;
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS — Classic 3D raised
   ────────────────────────────────────────────────────────────── */
.win-btn {
  background: #d4d0c8;
  color: #000000;
  border: none;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #ece9d8, inset -1px -1px 0 #808080;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  padding: 2px 8px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}

.win-btn:hover {
  background: #e4e0d8;
}

.win-btn:active {
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ece9d8;
  padding: 3px 7px 1px 9px;
}

.win-btn:disabled {
  color: #808080;
  text-shadow: 1px 1px 0 #ffffff;
  cursor: default;
}

/* ──────────────────────────────────────────────────────────────
   FILE BROWSER TOOLBAR
   ────────────────────────────────────────────────────────────── */
#file-browser-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
  font-size: 11px;
}

#browsing-user-label {
  flex: 1;
  font-weight: bold;
  color: #000080;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#storage-indicator {
  color: #404040;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   USER LIST ENTRIES
   ────────────────────────────────────────────────────────────── */
.user-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  cursor: pointer;
  border-bottom: 1px dotted #d4d0c8;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.user-entry:hover  { background: #316ac5; color: #ffffff; }
.user-entry.selected { background: #0a246a; color: #ffffff; }
.user-entry:hover .user-share-size  { color: #aaddff; }

.user-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.user-status-dot.online  { background: #44cc44; border: 1px solid #228822; }
.user-status-dot.offline { background: #888888; border: 1px solid #444444; }
.user-status-dot.busy    { background: #cc4444; border: 1px solid #882222; }

.user-handle {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-share-size {
  color: #404040;
  font-size: 10px;
}

/* User tier badges */
.user-tier {
  font-size: 9px;
  padding: 0 3px;
  border-radius: 2px;
  font-weight: bold;
}
.tier-newbie  { background: #888888; color: #fff; }
.tier-regular { background: #1eff00; color: #000; }
.tier-hoarder { background: #0070dd; color: #fff; }
.tier-baron   { background: #ff8000; color: #000; }

/* ──────────────────────────────────────────────────────────────
   FILE LIST ENTRIES
   ────────────────────────────────────────────────────────────── */
.file-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  cursor: pointer;
  border-bottom: 1px dotted #e0dcd4;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.file-entry:hover { background: #316ac5; color: #ffffff; }
.file-entry:hover .file-size,
.file-entry:hover .file-epeen { color: #aaddff; }
.file-entry.downloading { background: #fffacd; }
.file-entry.owned { color: #808080; cursor: default; }

.file-icon    { flex-shrink: 0; font-size: 13px; }
.file-name    { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size    { color: #404040; font-size: 10px; white-space: nowrap; }
.file-epeen   { color: #404040; font-size: 10px; white-space: nowrap; }

/* ──────────────────────────────────────────────────────────────
   RARITY COLOURS
   ────────────────────────────────────────────────────────────── */
.rarity-junk      { color: #808080; }
.rarity-common    { color: #c0c0c0; }
.rarity-uncommon  { color: #00c000; }  /* darkened from #1eff00 — readable on light bg */
.rarity-rare      { color: #0070dd; }
.rarity-epic      { color: #a335ee; }
.rarity-legendary {
  color: #ff8000;
  text-shadow: 0 0 6px #ff8800;
  animation: legendary-pulse 2s ease-in-out infinite alternate;
}

@keyframes legendary-pulse {
  from { text-shadow: 0 0 4px #ff8800; }
  to   { text-shadow: 0 0 16px #ffcc00, 0 0 4px #ff8800; }
}

/* ──────────────────────────────────────────────────────────────
   TRANSFER PANEL (tabbed: Downloads / Uploads / Stalled / My Files)
   Replaces the old #download-queue
   ────────────────────────────────────────────────────────────── */
#transfer-panel {
  flex: 0 0 auto;
  border-top: 2px solid #808080;
  height: 220px;
  display: flex;
  flex-direction: column;
  background: #d4d0c8;
  overflow: hidden;
}

#transfer-tabs {
  flex: 0 0 auto;
  display: flex;
  padding: 2px 2px 0;
  background: #c4c0b8;
  border-bottom: 1px solid #808080;
  gap: 1px;
}

.transfer-tab-btn {
  font-size: 9px !important;
  padding: 1px 6px !important;
  border-bottom: none !important;
  margin-bottom: -1px;
  z-index: 1;
  background: #b8b4ac !important;
  color: #404040 !important;
  white-space: nowrap;
}

.transfer-tab-btn.active {
  background: #d4d0c8 !important;
  color: #000000 !important;
  font-weight: bold;
}

.transfer-tab-badge {
  display: inline-block;
  background: #316ac5;
  color: #fff;
  border-radius: 8px;
  font-size: 8px;
  padding: 0 4px;
  font-weight: bold;
  min-width: 14px;
  text-align: center;
  vertical-align: middle;
  margin-left: 2px;
}

.transfer-tab-badge:empty,
.transfer-tab-badge[data-empty="true"] { display: none; }

#transfer-content {
  flex: 1;
  overflow-y: auto;
  background: #d4d0c8;
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.download-item {
  padding: 3px 6px;
  border-bottom: 1px dotted #b8b4ac;
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

/* Row containing filename + cancel button */
.download-item-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.download-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-cancel-btn {
  flex-shrink: 0;
  font-size: 9px !important;
  padding: 0px 5px !important;
  line-height: 14px !important;
  background: #c0392b !important;
  color: #ffffff !important;
  border-color: #7b241c !important;
}
.download-cancel-btn:hover { background: #e74c3c !important; }

/* XP-style progress bar */
.download-progress-bar {
  width: 100%;
  height: 12px;
  background: #ffffff;
  border: 1px solid #808080;
  position: relative;
  overflow: hidden;
}

.download-progress-fill {
  height: 100%;
  background: linear-gradient(
    to bottom,
    #38b8f8 0%,
    #2080e0 40%,
    #38b8f8 70%,
    #4ad0ff 100%
  );
  transition: width 0.2s linear;
  position: relative;
}

/* Classic XP shimmer */
.download-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: rgba(255,255,255,0.35);
  animation: progress-shimmer 1.2s linear infinite;
}

@keyframes progress-shimmer {
  from { left: -40%; }
  to   { left: 110%; }
}

/* ──────────────────────────────────────────────────────────────
   STATS BLOCK
   ────────────────────────────────────────────────────────────── */
.stats-block {
  margin: 4px;
  padding: 6px 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px dotted #e0dcd4;
  font-size: 11px;
}

.stat-label { color: #000080; font-weight: bold; }
.stat-value { font-family: 'Courier New', monospace; }

/* ──────────────────────────────────────────────────────────────
   UPGRADE TABS
   ────────────────────────────────────────────────────────────── */
#upgrade-tabs {
  display: flex;
  padding: 4px 4px 0;
  border-bottom: 1px solid #808080;
  background: #d4d0c8;
  gap: 2px;
}

.tab-btn {
  border-bottom: none !important;
  margin-bottom: -1px;
  z-index: 1;
  background: #c4c0b8 !important;
  color: #404040 !important;
}

.tab-btn.active {
  background: #ece9d8 !important;
  color: #000000 !important;
  font-weight: bold;
}

/* ──────────────────────────────────────────────────────────────
   UPGRADE ITEMS
   ────────────────────────────────────────────────────────────── */
.upgrade-panel {
  padding: 4px;
  overflow-y: auto;
}

.upgrade-item {
  margin-bottom: 4px;
  padding: 4px 6px;
  background: #f0ece4;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.upgrade-item.maxed { opacity: 0.55; }

.upgrade-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.upgrade-name  { font-weight: bold; font-size: 11px; }
.upgrade-cost  { font-family: 'Courier New', monospace; font-size: 10px; color: #800080; }
.upgrade-desc  { font-size: 10px; color: #404040; margin-bottom: 3px; line-height: 1.4; }
.upgrade-level { font-size: 10px; color: #000080; font-style: italic; }
.upgrade-btn   { font-size: 10px !important; padding: 1px 6px !important; float: right; }

/* ──────────────────────────────────────────────────────────────
   CHAT MESSAGES
   ────────────────────────────────────────────────────────────── */
.chat-line {
  display: flex;
  gap: 4px;
  line-height: 1.6;
  word-break: break-word;
}

.chat-timestamp { color: #606060; flex-shrink: 0; font-size: 10px; margin-top: 1px; }
.chat-nick      { flex-shrink: 0; font-weight: bold; }

.chat-nick.system-nick  { color: #00aaff; }
.chat-nick.you-nick     { color: #ffff44; }
.chat-nick.baron-nick   { color: #ff8000; }
.chat-nick.hoarder-nick { color: #0070dd; }
.chat-nick.regular-nick { color: #1eff00; }
.chat-nick.newbie-nick  { color: #c0c0c0; }

.chat-text             { flex: 1; color: #c0c0c0; }
.chat-text.system-text { color: #888888; font-style: italic; }
.chat-text.event-text  { color: #ffaa00; font-weight: bold; }

/* LAN Admin / Announcer */
.chat-line--admin {
  background: rgba(255, 60, 0, 0.08);
  border-left: 3px solid #ff4400;
  padding-left: 5px;
  margin-left: -8px;
}
.chat-nick.admin-nick { color: #ff4400; font-weight: bold; letter-spacing: 0.03em; }
.chat-text.admin-text { color: #ffcc99; font-weight: bold; }

/* ──────────────────────────────────────────────────────────────
   EVENT BANNER (modal overlay)
   ────────────────────────────────────────────────────────────── */
#event-banner {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #000080;
  color: #ffffff;
  border: 3px solid #0000ff;
  box-shadow: 4px 4px 0 #000000, 0 0 20px rgba(0,0,255,0.4);
  padding: 16px 32px;
  text-align: center;
  z-index: 9999;
  font-family: Tahoma, Arial, sans-serif;
  min-width: 320px;
  animation: event-flash 0.4s ease-out;
}

#event-banner-icon { font-size: 32px; margin-bottom: 8px; }
#event-banner-text { font-size: 15px; font-weight: bold; line-height: 1.4; }

@keyframes event-flash {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  70%  { transform: translate(-50%, -50%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ──────────────────────────────────────────────────────────────
   SCROLLBARS — XP-flavoured where browser supports it
   ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #d4d0c8; border-left: 1px solid #808080; }
::-webkit-scrollbar-thumb {
  background: #c4c0b8;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #d4d0c8, inset -1px -1px 0 #888888;
}
::-webkit-scrollbar-thumb:hover { background: #d4d4d4; }
::-webkit-scrollbar-button {
  background: #d4d0c8;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  height: 16px; width: 16px;
  display: block;
}
::-webkit-scrollbar-corner { background: #d4d0c8; }

/* ──────────────────────────────────────────────────────────────
   UTILITIES
   ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.placeholder-text {
  color: #808080;
  font-style: italic;
  padding: 12px 8px;
  text-align: center;
  font-size: 11px;
}

.win-separator {
  height: 2px;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  margin: 4px 2px;
}

.badge {
  display: inline-block;
  background: #cc0000;
  color: #ffffff;
  border-radius: 8px;
  font-size: 9px;
  padding: 0 5px;
  font-weight: bold;
  vertical-align: middle;
  min-width: 16px;
  text-align: center;
}

/* ──────────────────────────────────────────────────────────────
   TIPS MODAL
   ────────────────────────────────────────────────────────────── */

#tips-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 42, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001; /* above lobby modal */
}

#tips-modal.hidden { display: none !important; }

#tips-dialog {
  width: 440px;
  max-width: 96vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

#tips-content {
  padding: 14px 16px 16px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: #000000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tips-intro {
  line-height: 1.55;
  color: #000040;
  border-bottom: 1px solid #d4d0c8;
  padding-bottom: 8px;
  margin: 0;
}

.tips-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  line-height: 1.5;
}

.tips-list li { color: #000040; }
.tips-list li strong { color: #000080; }

.tips-rarity-key {
  margin: 0;
  padding: 6px 8px;
  background: #f0f0f0;
  border: 1px solid #d4d0c8;
  font-size: 10px;
}

.tips-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid #d4d0c8;
}

.tips-footer .win-btn {
  padding: 3px 24px;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3 — MULTIPLAYER ADDITIONS
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   LOBBY MODAL — full-screen overlay, Win98 dialog inside
   ────────────────────────────────────────────────────────────── */

#lobby-modal {
  position: fixed;
  inset: 0;                         /* covers the whole viewport */
  background: rgba(0, 0, 42, 0.75); /* dark blue tint — LAN basement vibes */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;                   /* above event-banner (9999) */
}

#lobby-modal.hidden { display: none !important; }

#lobby-dialog {
  width: 380px;
  max-width: 95vw;
}

.lobby-content {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Welcome splash at the top of the dialog */
.lobby-welcome {
  text-align: center;
  padding: 4px 0 8px;
  border-bottom: 1px solid #d4d0c8;
  margin-bottom: 2px;
}

.lobby-logo {
  font-size: 40px;
  margin-bottom: 4px;
  line-height: 1;
}

.lobby-title {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 22px;
  color: #000080;
  letter-spacing: 1px;
}

.lobby-subtitle {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10px;
  color: #808080;
  margin-top: 2px;
}

/* Label + input stacked vertically */
.lobby-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lobby-label {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #000080;
}

.lobby-input {
  width: 100%;
  padding: 4px 6px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  box-sizing: border-box;
  /* win-inset handles the border */
}

/* Two side-by-side choice buttons */
.lobby-actions {
  display: flex;
  gap: 8px;
}

.lobby-actions .win-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: 12px;
}

/* The connect row inside #lobby-lan-section */
.lobby-connect-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

#lobby-btn-connect {
  padding: 4px 20px;
}

/* Status / error line below everything */
.lobby-status {
  min-height: 14px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

.lobby-status--error { color: #c00000; }
.lobby-status--info  { color: #006600; }

/* ──────────────────────────────────────────────────────────────
   LOBBY — PHASE 6 ADDITIONS (multi-step flow, profiles, host)
   ────────────────────────────────────────────────────────────── */

/* Profile selector — hidden until JS finds saved profiles */
.lobby-select {
  width: 100%;
  padding: 3px 4px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  box-sizing: border-box;
  cursor: pointer;
  /* win-inset handles the sunken border */
}

/* Back row: small back button + step label on same line */
.lobby-back-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Small utility button (Back, etc.) */
.lobby-btn-sm {
  padding: 2px 10px;
  font-size: 11px;
  flex-shrink: 0;
}

/* Step label next to back button */
.lobby-step-label {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #000080;
}

/* ──────────────────────────────────────────────────────────────
   USER LIST SECTION HEADERS (LAN Players / NPC Users dividers)
   ────────────────────────────────────────────────────────────── */

.user-list-section-header {
  padding: 2px 6px 2px 8px;
  background: #d4d0c8;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #808080;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #000080;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
}

/* ──────────────────────────────────────────────────────────────
   LAN MULTIPLIER STAT ROW — green accent when active
   ────────────────────────────────────────────────────────────── */

#lan-multiplier-row .stat-label {
  color: #006600;
}

#lan-multiplier-row .stat-value {
  color: #006600;
  font-weight: bold;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE — don't shatter on narrow screens
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #panel-users { flex: 0 0 160px; }
  #panel-stats { flex: 0 0 220px; }
}

@media (max-width: 700px) {
  #main-layout { flex-direction: column; }
  #panel-users,
  #panel-stats  { flex: 0 0 auto; height: 140px; }
  #panel-files  { flex: 1 1 auto; }
  #panel-chat   { height: 120px; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — RESOURCE BARS + TRANSFER PANEL CONTENT
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   RESOURCE BARS — compact Storage / Network / CPU strip
   at the top of the right stats panel
   ────────────────────────────────────────────────────────────── */

#resource-bars {
  flex: 0 0 auto;
  padding: 4px 8px 2px;
  background: #d4d0c8;
  border-bottom: 1px solid #808080;
}

.resource-bar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 0;
  font-size: 9px;
}

.resource-bar-label {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 9px;
  color: #000080;
  font-weight: bold;
  width: 40px;
  flex-shrink: 0;
  white-space: nowrap;
}

.resource-bar-track {
  flex: 1;
  height: 10px;
  background: #ffffff;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #c0c0c0;
  position: relative;
  overflow: hidden;
}

.resource-bar-fill {
  height: 100%;
  transition: width 0.5s ease-out;
  position: relative;
}

/* Storage: green → yellow → red based on fill (set via JS class) */
.resource-bar-storage { background: linear-gradient(to right, #44cc44, #88cc44); }
.resource-bar-storage.warn  { background: linear-gradient(to right, #ccaa00, #cc8800); }
.resource-bar-storage.crit  { background: linear-gradient(to right, #cc4444, #aa2222); }

/* Network: XP blue (matches download progress bars) */
.resource-bar-network {
  background: linear-gradient(to bottom, #38b8f8 0%, #2080e0 60%, #38b8f8 100%);
}

/* CPU: green */
.resource-bar-cpu {
  background: linear-gradient(to bottom, #44cc44 0%, #228822 60%, #44cc44 100%);
}

.resource-bar-pct {
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: #404040;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────
   TRANSFER PANEL — content area styles
   ────────────────────────────────────────────────────────────── */

/* Shared: download-item styles (also used for stalled items) */
.download-item {
  padding: 3px 6px;
  border-bottom: 1px dotted #b8b4ac;
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.download-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}

/* Stalled download items */
.stalled-item {
  padding: 4px 6px;
  border-bottom: 1px dotted #b8b4ac;
  background: #fffacd;
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.stalled-item-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  justify-content: space-between;
}

.stalled-dismiss-btn {
  flex-shrink: 0;
  font-size: 9px !important;
  padding: 0px 5px !important;
  line-height: 14px !important;
  background: #6a3a3a !important;
  color: #ffffff !important;
  border-color: #3a1a1a !important;
}
.stalled-dismiss-btn:hover { background: #a04040 !important; }

.stalled-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stalled-item-meta {
  color: #804000;
  font-size: 9px;
  margin-bottom: 3px;
}

.stalled-find-btn {
  font-size: 9px !important;
  padding: 1px 6px !important;
  background: #2060c0 !important;
  color: #ffffff !important;
  border-color: #104080 !important;
}

.stalled-find-btn:hover {
  background: #3070d0 !important;
}

.stalled-find-btn:disabled {
  background: #808080 !important;
  color: #c0c0c0 !important;
}

.stalled-searching {
  font-style: italic;
  color: #004080;
  font-size: 9px;
}

/* Uploads tab */
.upload-item {
  padding: 3px 6px;
  border-bottom: 1px dotted #b8b4ac;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.upload-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-to {
  color: #004080;
  font-size: 9px;
  white-space: nowrap;
}

.upload-progress-bar {
  width: 80px;
  height: 8px;
  background: #ffffff;
  border: 1px solid #808080;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(to bottom, #88cc44, #44aa22);
  transition: width 0.5s linear;
}

/* My Files tab */
.my-file-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-bottom: 1px dotted #b8b4ac;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  cursor: default;
}

.my-file-entry:hover { background: rgba(49, 106, 197, 0.15); }

.my-file-icon  { flex-shrink: 0; }
.my-file-name  { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-file-size  { color: #606060; font-size: 9px; white-space: nowrap; }
.my-file-epeen { color: #800080; font-size: 9px; white-space: nowrap; }

/* Empty-state text inside transfer panel tabs */
.transfer-empty {
  color: #808080;
  font-style: italic;
  padding: 10px 8px;
  text-align: center;
  font-size: 10px;
}

/* ================================================================
   PHASE 5 — Popup Ads Mini-Game & Virus Screen Effects
   ================================================================ */

/* ── Popup Ad Windows ───────────────────────────────────────────── */

.popup-ad {
  position: fixed;
  width: 290px;
  background: #ece9d8;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 2px 2px 0 #404040, inset 1px 1px 0 #dfdfdf;
  font-family: Tahoma, 'MS Sans Serif', Arial, sans-serif;
  font-size: 11px;
  color: #000000;
  z-index: 1100;
  animation: popup-enter 0.15s ease-out;
  user-select: none;
}

@keyframes popup-enter {
  from { transform: scale(0.80) translateY(-10px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);     opacity: 1; }
}

.popup-ad-closing {
  animation: popup-exit 0.2s ease-in forwards;
}

@keyframes popup-exit {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.85); opacity: 0; }
}

.popup-ad-reward-flash {
  animation: popup-reward 0.35s ease-out;
}

@keyframes popup-reward {
  0%   { background: #ffff00; box-shadow: 0 0 16px #ffcc00; }
  100% { background: #ece9d8; box-shadow: 2px 2px 0 #404040; }
}

.popup-ad-titlebar {
  background: linear-gradient(to bottom, #0054e3, #2f87f7);
  color: #ffffff;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: bold;
  cursor: move;
  white-space: nowrap;
  overflow: hidden;
}

.popup-ad-title-icon { flex-shrink: 0; }

.popup-ad-title-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.popup-ad-close {
  flex-shrink: 0;
  margin-left: auto;
  min-width: 17px;
  height: 15px;
  padding: 0 3px;
  font-size: 9px;
  line-height: 13px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
}

.popup-ad-body {
  padding: 8px 10px 4px;
  text-align: center;
  line-height: 1.4;
}

/* Countdown timer bar at the bottom of each popup */
.popup-ad-timerbar {
  height: 3px;
  background: #d4d0c8;
  overflow: hidden;
}

.popup-ad-timerfill {
  height: 100%;
  background: linear-gradient(to right, #cc2200, #ff4400);
  width: 100%;
  transition: width 3s linear;
}

/* ── Garish Ad Content Styles ──────────────────────────────────── */

.popup-ad-headline {
  font-size: 13px;
  font-weight: bold;
  color: #cc0000;
}

.popup-ad-flashing {
  animation: ad-flash 0.55s step-end infinite;
}

@keyframes ad-flash {
  0%, 100% { color: #cc0000; background: transparent; }
  50%       { color: #ffee00; background: #cc0000; }
}

.popup-ad-green {
  color: #007700;
  font-weight: bold;
}

.popup-ad-cta {
  font-size: 10px;
  cursor: not-allowed;   /* authentic 90s CTA */
}


/* ================================================================
   Virus Overlay — full-screen effect + dialog
   ================================================================ */

/* Semi-transparent dark overlay — present but not fully blocking */
#virus-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(80, 0, 0, 0.18);
  pointer-events: none;  /* let clicks through — makes game "hard to play" */
}

#virus-overlay:not(.hidden) {
  pointer-events: all;
}

#virus-dialog {
  width: 380px;
  background: #ece9d8;
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  box-shadow: 4px 4px 0 #404040, 0 0 24px rgba(200, 0, 0, 0.5);
  animation: virus-pulse 0.9s ease-in-out infinite;
  pointer-events: all;
  position: relative;
}

@keyframes virus-pulse {
  0%, 100% { box-shadow: 4px 4px 0 #404040, 0 0 24px rgba(200,0,0,0.45); }
  50%       { box-shadow: 4px 4px 0 #404040, 0 0 40px rgba(255,0,0,0.80); }
}

.virus-titlebar {
  background: linear-gradient(to bottom, #880000, #cc1100) !important;
  animation: virus-titlebar-flash 0.7s step-end infinite;
}

@keyframes virus-titlebar-flash {
  0%, 100% { background: linear-gradient(to bottom, #880000, #cc1100) !important; }
  50%       { background: linear-gradient(to bottom, #cc2200, #ff3300) !important; }
}

#virus-dialog-body {
  padding: 12px 16px 14px;
  text-align: center;
}

#virus-name-display {
  font-size: 15px;
  font-weight: bold;
  color: #cc0000;
  font-family: 'Courier New', monospace;
  margin-bottom: 3px;
  word-break: break-all;
}

#virus-tagline-display {
  font-size: 10px;
  font-style: italic;
  color: #666666;
  margin-bottom: 8px;
}

#virus-message-display {
  font-size: 11px;
  color: #333333;
  margin-bottom: 10px;
  line-height: 1.45;
  border-left: 3px solid #cc0000;
  padding-left: 8px;
  text-align: left;
}

.virus-countdown-wrap {
  margin: 8px 0 6px;
}

.virus-countdown-label {
  font-size: 9px;
  color: #808080;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.virus-countdown-clock {
  background: #000000;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: bold;
  padding: 6px 14px;
  display: inline-block;
  border: 2px solid #00cc00;
  min-width: 80px;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.4);
  animation: countdown-glow 1s ease-in-out infinite;
}

@keyframes countdown-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(0,200,0,0.3); }
  50%       { box-shadow: 0 0 16px rgba(0,255,0,0.7); }
}

.virus-progress-bar {
  width: 100%;
  height: 10px;
  background: #333333;
  border: 1px solid #808080;
  margin-top: 8px;
  overflow: hidden;
  position: relative;
}

.virus-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #004400, #00cc00);
  width: 100%;
  /* transition set by JS */
}

#virus-av-note {
  margin-top: 8px;
  font-size: 9px;
  padding: 3px 6px;
  border-radius: 2px;
}

.virus-av-protected {
  background: #e8ffe8;
  color: #006600;
  border: 1px solid #aaddaa;
}

.virus-av-none {
  background: #fff0f0;
  color: #880000;
  border: 1px solid #ddaaaa;
}

/* Fake close button hover — shows it won't work */
#virus-fake-close:hover {
  cursor: not-allowed !important;
}

/* Wobble animation when clicking fake close */
.virus-dialog-wobble {
  animation: virus-wobble 0.35s ease-in-out !important;
}

@keyframes virus-wobble {
  0%   { transform: translate(0, 0)     rotate(0deg); }
  20%  { transform: translate(-6px, 2px) rotate(-2deg); }
  40%  { transform: translate(6px, -2px) rotate(2deg); }
  60%  { transform: translate(-4px, 1px) rotate(-1deg); }
  80%  { transform: translate(4px, -1px) rotate(1deg); }
  100% { transform: translate(0, 0)     rotate(0deg); }
}


/* ── Screen effects during active virus ────────────────────────── */

/* Jitter/shake on the main game layout */
body.virus-active #main-layout {
  animation: virus-shake 0.12s infinite;
}

@keyframes virus-shake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-2px,  1px); }
  30%  { transform: translate( 3px, -1px); }
  45%  { transform: translate(-1px,  2px); }
  60%  { transform: translate( 2px, -2px); }
  75%  { transform: translate(-2px,  0px); }
  100% { transform: translate( 0,    0); }
}

/* Moving scanline overlay */
body.virus-active::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 850;
  animation: virus-scanlines 0.06s linear infinite;
}

@keyframes virus-scanlines {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* Occasional colour inversion flash */
body.virus-active #panel-files {
  animation: virus-color-glitch 4s step-end infinite;
}

@keyframes virus-color-glitch {
  0%,  90%, 100% { filter: none; }
  91%, 92%       { filter: hue-rotate(120deg) saturate(2); }
  93%            { filter: none; }
  94%, 95%       { filter: invert(0.15) hue-rotate(180deg); }
  96%            { filter: none; }
}