/* ===================== DashtechWars - Windows 95 theme ===================== */

:root {
  --win-gray: #c0c0c0;
  --win-gray-dark: #808080;
  --win-gray-darker: #404040;
  --win-white: #ffffff;
  --win-black: #000000;
  --win-navy: #000080;
  --win-teal: #008080;
  --win-blue-title: linear-gradient(90deg, #000080, #1084d0);
  --win-blue-title-inactive: linear-gradient(90deg, #808080, #b5b5b5);
  --font: "MS Sans Serif", "Pixelated MS Sans Serif", Tahoma, Geneva, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Ensure the [hidden] attribute always wins over element display rules. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 12px;
  color: var(--win-black);
}

body {
  background: var(--win-teal);
  overflow: auto;
}

#desktop {
  min-height: 100vh;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ===================== Window chrome ===================== */
.window {
  background: var(--win-gray);
  border: 2px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--win-gray-dark);
  padding: 2px;
}

.main-window {
  width: 100%;
  max-width: 960px;
}

.title-bar {
  background: var(--win-blue-title);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px;
  font-weight: bold;
  user-select: none;
}

.title-bar-text {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding-left: 2px;
}

.title-icon { font-size: 13px; }

.title-bar-controls {
  display: flex;
  gap: 2px;
}

.tb-btn {
  width: 18px;
  height: 16px;
  font-size: 9px;
  line-height: 1;
  background: var(--win-gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--win-gray-dark);
  cursor: pointer;
  padding: 0;
  color: #000;
  font-weight: bold;
}
.tb-btn:active {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px 0 var(--win-gray-dark);
}

/* ===================== Menu bar ===================== */
.menu-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-bottom: 1px solid var(--win-gray-dark);
}
.menu-item {
  padding: 2px 8px;
  cursor: pointer;
}
.menu-item:hover {
  background: var(--win-navy);
  color: #fff;
}
.menu-spacer { flex: 1; }
.menu-clock {
  font-size: 11px;
  padding: 1px 8px;
  border: 1px solid;
  border-color: #000 #fff #fff #000;
}

.window-body {
  padding: 8px;
}

/* ===================== Fieldset groups ===================== */
.group {
  border: 1px solid var(--win-gray-dark);
  border-right-color: #fff;
  border-bottom-color: #fff;
  margin: 0 0 8px 0;
  padding: 6px 8px 8px;
}
.group legend {
  padding: 0 4px;
  font-weight: bold;
}

.status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 1px 0;
}
.stat-row b { font-weight: bold; }
.debt { color: #a00000; }

.meter {
  height: 14px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  margin: 3px 0;
  padding: 1px;
}
.meter-fill {
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(90deg, #008000 0, #008000 6px, #c0c0c0 6px, #c0c0c0 8px);
  transition: width .2s;
}

/* ===================== Market table ===================== */
.table-wrap {
  max-height: 280px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
}
.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.market-table thead th {
  position: sticky;
  top: 0;
  background: var(--win-gray);
  border: 1px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 3px 6px;
  text-align: left;
  font-weight: bold;
}
.market-table th.num, .market-table td.num { text-align: right; }
.market-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
.market-table tbody tr:nth-child(even) { background: #f3f3f3; }
.market-table tbody tr:hover { background: #d8e4ff; }

.comp-name { display: flex; align-items: center; gap: 5px; }
.comp-emoji { font-size: 14px; }
.trend-up { color: #008000; font-weight: bold; }
.trend-down { color: #a00000; font-weight: bold; }
.trend-flat { color: #555; }
.hot-tag {
  font-size: 9px;
  background: #ff0000;
  color: #fff;
  padding: 0 3px;
  border-radius: 2px;
  margin-left: 4px;
}
.cheap-tag {
  font-size: 9px;
  background: #008000;
  color: #fff;
  padding: 0 3px;
  border-radius: 2px;
  margin-left: 4px;
}

.mini-btn {
  font-size: 11px;
  padding: 1px 8px;
  margin: 0 1px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--win-gray-dark);
  cursor: pointer;
}
.mini-btn:active {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px 0 var(--win-gray-dark);
}
.mini-btn:disabled { color: #808080; cursor: not-allowed; }

/* ===================== Buttons ===================== */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.win-btn {
  font-family: var(--font);
  font-size: 12px;
  padding: 5px 12px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 var(--win-gray-dark);
  cursor: pointer;
  min-width: 90px;
}
.win-btn:active {
  border-color: #000 #fff #fff #000;
  box-shadow: inset 1px 1px 0 var(--win-gray-dark);
  padding: 6px 11px 4px 13px;
}
.win-btn:focus { outline: 1px dotted #000; outline-offset: -4px; }
.win-btn.primary { font-weight: bold; }
.win-btn:disabled { color: #808080; cursor: not-allowed; }

/* ===================== News panel ===================== */
.news-group { margin: 0 8px 8px; }
.news-panel {
  height: 70px;
  overflow-y: auto;
  background: #000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
}
.news-line { margin: 0 0 2px; }
.news-line .stamp { color: #00cc00; }

/* ===================== Status bar ===================== */
.status-bar {
  display: flex;
  gap: 2px;
  padding: 2px;
}
.sb-cell {
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 2px 6px;
  font-size: 11px;
}
.sb-cell:first-child { flex: 1; }

/* ===================== Modal / dialog ===================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 12px;
}
.modal-overlay[hidden] { display: none; }
/* The dialog overlay must sit above the splash overlay. */
#modalOverlay { z-index: 200; }
#splashOverlay { z-index: 100; }
.dialog {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow: auto;
}
.dialog.splash { max-width: 460px; }
.dialog .window-body { padding: 12px; }

.dialog p { margin: 6px 0; line-height: 1.4; }

.field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.field-row label { min-width: 90px; }
.field-row input[type="number"],
.field-row input[type="text"],
.field-row select {
  flex: 1;
  font-family: var(--font);
  font-size: 12px;
  padding: 3px 4px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #fff;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.loc-list, .gun-list { list-style: none; margin: 6px 0; padding: 0; }
.loc-list li, .gun-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 6px;
  border: 1px solid #b0b0b0;
  margin-bottom: 4px;
  background: #fff;
}
.loc-list .pol { font-size: 10px; color: #a00; }

.scores-table { width: 100%; border-collapse: collapse; }
.scores-table th, .scores-table td {
  border: 1px solid #b0b0b0;
  padding: 3px 6px;
  text-align: left;
}
.scores-table th { background: var(--win-gray); }
.scores-table .num { text-align: right; }
.scores-table .me { background: #fff8c0; font-weight: bold; }

/* ===================== Admin: invite links ===================== */
.inv-link {
  word-break: break-all;
  font-size: 11px;
  margin-right: 4px;
}
#newLink { word-break: break-all; }

/* ===================== Live leaderboard ===================== */
/* Wider dialog so all leaderboard columns fit. */
.dialog.dialog-wide { max-width: 860px; }

/* --- Win95 tab strip --- */
.lb-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 -2px 2px;     /* overlap the panel border so the active tab merges in */
  position: relative;
  z-index: 1;
}
.lb-tab {
  font-family: inherit;
  font-size: 11px;
  padding: 4px 14px 5px;
  cursor: pointer;
  background: var(--win-gray);
  color: #000;
  /* Raised 3D bevel, rounded-ish top like classic Win95 tabs. */
  border: 2px solid;
  border-color: #ffffff #808080 var(--win-gray) #ffffff;
  border-bottom: none;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  margin-top: 3px;          /* inactive tabs sit slightly lower */
}
.lb-tab:focus { outline: 1px dotted #000; outline-offset: -4px; }
.lb-tab.active {
  /* Active tab appears raised/forward and flush with the panel below. */
  margin-top: 0;
  padding-bottom: 7px;
  font-weight: bold;
  background: var(--win-gray);
  border-color: #ffffff #808080 var(--win-gray) #ffffff;
  z-index: 2;
}
/* The panel that the tabs sit on top of — classic sunken-on-raised frame. */
.lb-panel {
  border: 2px solid;
  border-color: #ffffff #808080 #808080 #ffffff;
  background: var(--win-gray);
  padding: 8px;
}
.lb-empty { text-align: center; color: #404040; padding: 14px 6px; }

.lb-table { font-size: 11px; }
.lb-table th, .lb-table td { padding: 3px 5px; white-space: nowrap; }
.lb-table .debt { color: #b00000; }
.lb-table .lb-ago { color: #404040; font-size: 10px; }
.lb-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.lb-legend { font-size: 11px; }
.lb-stamp { font-size: 10px; color: #404040; }
.lb-note { font-size: 11px; color: #404040; }
#lbTableHost { max-height: 56vh; overflow: auto; }

/* Status colours / indicators */
.st-active   { color: #008000; font-weight: bold; }
.st-dead     { color: #c00000; font-weight: bold; }
.st-bankrupt { color: #c06000; font-weight: bold; }
.st-stopped  { color: #606060; font-weight: bold; }

.go-status { font-size: 16px; margin: 4px 0; text-align: center; }

/* ===================== Game-over ribbon ===================== */
.game-over-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 6px 10px;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  background: #ffe8e8;
  font-weight: bold;
}
.game-over-bar.st-bankrupt { background: #fff0e0; }
.game-over-bar.st-dead { background: #ffe8e8; }
.game-over-bar .go-reason { font-weight: normal; font-size: 11px; flex: 1; min-width: 120px; }
.game-over-bar[hidden] { display: none !important; }

/* ===================== Splash ===================== */
.splash-logo {
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--win-navy);
  text-shadow: 2px 2px 0 #b0b0b0;
  margin: 6px 0 2px;
}
.splash-logo span { color: #a00000; }
.splash-tag { text-align: center; font-style: italic; margin: 0 0 10px; }
.splash-desc { background: #fff; border: 1px solid; border-color: #808080 #fff #fff #808080; padding: 8px; }
.splash-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0;
}
.splash-actions .win-btn { width: 100%; padding: 8px; }
.splash-foot { text-align: center; font-size: 10px; color: #404040; }

.encounter-art {
  text-align: center;
  font-size: 40px;
  margin: 4px 0;
}
.event-emoji { font-size: 28px; margin-right: 6px; vertical-align: middle; }

.msg-good { color: #008000; font-weight: bold; }
.msg-bad { color: #a00000; font-weight: bold; }

/* ===================== Auth pages (login/register/admin) ===================== */
.auth-body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 12px;
}
.auth-window { width: 100%; max-width: 380px; }
.admin-window { width: 100%; max-width: 760px; }

.menu-user {
  font-size: 11px;
  padding: 1px 8px;
  color: var(--win-navy);
  font-weight: bold;
}

.form-msg { min-height: 16px; margin: 4px 0; font-weight: bold; }
.form-hint { font-size: 10px; color: #404040; margin: 4px 0; }
.divider { border: none; border-top: 1px solid var(--win-gray-dark); border-bottom: 1px solid #fff; margin: 12px 0; }
.auth-foot { text-align: center; font-size: 11px; }
.auth-foot a { color: var(--win-navy); }

.info-box {
  background: #ffffcc;
  border: 1px solid #c0c000;
  padding: 8px;
  margin: 8px 0;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.info-box code, .scores-table code {
  font-family: "Courier New", monospace;
  font-weight: bold;
  letter-spacing: 1px;
}

.auth-window .splash-logo { font-size: 28px; margin-top: 2px; }
.auth-window form { margin-top: 8px; }

@media (max-width: 640px) {
  .status-grid { grid-template-columns: 1fr; }
  .win-btn { flex: 1; min-width: 0; }
  .menu-user { display: none; }
}

/* Utility classes used in place of inline styles */
.hint-text { font-size: 11px; color: #404040; }
.help-list { margin: 6px 0 6px 16px; line-height: 1.5; }
.mt-sm { margin-top: 6px; }
.dialog-actions.start { justify-content: flex-start; }
.table-limited { max-height: 340px; }
.st-won { color: #b8860b; font-weight: bold; }